fb response overlay

apps/app/src/client/components/NotAvailable.tsx

@@ -1,12 +1,16 @@
 import React, { type JSX } from 'react';
 import { Disable } from 'react-disable';
 import type { UncontrolledTooltipProps } from 'reactstrap';
-import { UncontrolledTooltip } from 'reactstrap';
+import {
+  PopoverBody,
+  UncontrolledPopover,
+  UncontrolledTooltip,
+} from 'reactstrap';
 
 type NotAvailableProps = {
   children: JSX.Element;
   isDisabled: boolean;
-  title: string;
+  title: string | JSX.Element;
   classNamePrefix?: string;
   placement?: UncontrolledTooltipProps['placement'];
 };
@@ -29,9 +33,15 @@ export const NotAvailable = ({
       <div id={id}>
         <Disable disabled={isDisabled}>{children}</Disable>
       </div>
-      <UncontrolledTooltip placement={placement} target={id}>
-        {title}
-      </UncontrolledTooltip>
+      {typeof title === 'string' ? (
+        <UncontrolledTooltip placement={placement} target={id}>
+          {title}
+        </UncontrolledTooltip>
+      ) : (
+        <UncontrolledPopover trigger="hover" placement={placement} target={id}>
+          <PopoverBody>{title}</PopoverBody>
+        </UncontrolledPopover>
+      )}
     </>
   );
 };

apps/app/src/features/openai/client/components/AiAssistant/OpenDefaultAiAssistantButton.tsx

@@ -1,8 +1,6 @@
 import React, { type JSX, useCallback, useMemo } from 'react';
 import { useAtomValue } from 'jotai';
-import { Disable } from 'react-disable';
 import { useTranslation } from 'react-i18next';
-import { PopoverBody, UncontrolledPopover } from 'reactstrap';
 
 import { NotAvailable } from '~/client/components/NotAvailable';
 import { NotAvailableForGuest } from '~/client/components/NotAvailableForGuest';
@@ -72,8 +70,6 @@ const OpenDefaultAiAssistantButton = (): JSX.Element => {
   const growiAppIdForGrowiCloud = useGrowiAppIdForGrowiCloud();
   const isCloud = growiCloudUri != null && growiAppIdForGrowiCloud != null;
 
-  const popoverTargetId = 'ai-disabled-btn';
-
   if (!isAiEnabled) {
     if (!isCloud) return <></>;
 
@@ -88,33 +84,28 @@ const OpenDefaultAiAssistantButton = (): JSX.Element => {
       </button>
     );
 
-    return (
+    const popoverContent = (
       <>
-        <div id={popoverTargetId}>
-          <Disable disabled>{button}</Disable>
-        </div>
-        <UncontrolledPopover
-          trigger="hover"
-          placement="top"
-          target={popoverTargetId}
-        >
-          <PopoverBody>
-            <p className="mb-2">
-              {t('default_ai_assistant.open_cloud_settings_to_enable')}
-            </p>
-            <a href={`${growiCloudUri}/my/apps/${growiAppIdForGrowiCloud}`}>
-              <span
-                className="material-symbols-outlined me-1"
-                style={{ fontSize: '1rem', verticalAlign: 'middle' }}
-              >
-                share
-              </span>
-              {t('default_ai_assistant.to_cloud_settings')}
-            </a>
-          </PopoverBody>
-        </UncontrolledPopover>
+        <p className="mb-2">
+          {t('default_ai_assistant.open_cloud_settings_to_enable')}
+        </p>
+        <a href={`${growiCloudUri}/my/apps/${growiAppIdForGrowiCloud}`}>
+          <span
+            className="material-symbols-outlined me-1"
+            style={{ fontSize: '1rem', verticalAlign: 'middle' }}
+          >
+            share
+          </span>
+          {t('default_ai_assistant.to_cloud_settings')}
+        </a>
       </>
     );
+
+    return (
+      <NotAvailable isDisabled title={popoverContent}>
+        {button}
+      </NotAvailable>
+    );
   }
 
   return <OpenDefaultAiAssistantButtonSubstance />;