Merge pull request #10933 from growilabs/feat/180264-180289-add-growi-cloud-link-to-ai-integration

feat: Add growi cloud link to ai integration settings

apps/app/public/static/locales/en_US/translation.json

@@ -660,7 +660,9 @@
     }
   },
   "default_ai_assistant": {
-    "not_set": "Default assistant is not set"
+    "not_set": "Default assistant is not set",
+    "open_cloud_settings_to_enable": "Please check the GROWI.cloud management screen to enable AI integration",
+    "to_cloud_settings": "Open GROWI.cloud Settings"
   },
   "ai_assistant_substance": {
     "add_assistant": "Add Assistant",

apps/app/public/static/locales/fr_FR/translation.json

@@ -655,7 +655,9 @@
     }
   },
   "default_ai_assistant": {
-    "not_set": "L'assistant par défaut n'est pas configuré"
+    "not_set": "L'assistant par défaut n'est pas configuré",
+    "open_cloud_settings_to_enable": "Veuillez consulter l'écran de gestion GROWI.cloud pour activer l'intégration AI",
+    "to_cloud_settings": "Ouvrir les paramètres GROWI.cloud"
   },
   "ai_assistant_substance": {
     "add_assistant": "Ajouter un assistant",

apps/app/public/static/locales/ja_JP/translation.json

@@ -693,7 +693,9 @@
     }
   },
   "default_ai_assistant": {
-    "not_set": "デフォルトアシスタントが設定されていません"
+    "not_set": "デフォルトアシスタントが設定されていません",
+    "open_cloud_settings_to_enable": "AI 連携を有効にするには GROWI.cloud の管理画面をご確認ください",
+    "to_cloud_settings": "GROWI.cloud の管理画面へ"
   },
   "ai_assistant_substance": {
     "add_assistant": "アシスタントを追加する",

apps/app/public/static/locales/ko_KR/translation.json

@@ -620,7 +620,9 @@
     }
   },
   "default_ai_assistant": {
-    "not_set": "기본 어시스턴트가 설정되지 않았습니다."
+    "not_set": "기본 어시스턴트가 설정되지 않았습니다.",
+    "open_cloud_settings_to_enable": "AI 통합을 활성화하려면 GROWI.cloud 관리 화면을 확인하십시오",
+    "to_cloud_settings": "GROWI.cloud 관리 화면 열기"
   },
   "ai_assistant_substance": {
     "add_assistant": "어시스턴트 추가",

apps/app/public/static/locales/zh_CN/translation.json

@@ -651,7 +651,9 @@
     }
   },
   "default_ai_assistant": {
-    "not_set": "未设置默认助手"
+    "not_set": "未设置默认助手",
+    "open_cloud_settings_to_enable": "请查看 GROWI.cloud 管理界面以启用 AI 集成",
+    "to_cloud_settings": "前往 GROWI.cloud 管理界面"
   },
   "ai_assistant_substance": {
     "add_assistant": "添加助手",

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/client/components/Sidebar/SidebarNav/PrimaryItems.tsx

@@ -1,9 +1,12 @@
 import { memo } from 'react';
 import dynamic from 'next/dynamic';
 import { useAtomValue } from 'jotai';
+import { useTranslation } from 'react-i18next';
 
+import { NotAvailable } from '~/client/components/NotAvailable';
 import { SidebarContentsType } from '~/interfaces/ui';
 import { useIsGuestUser } from '~/states/context';
+import { useGrowiAppIdForGrowiCloud, useGrowiCloudUri } from '~/states/global';
 import { aiEnabledAtom } from '~/states/server-configurations';
 import { useSidebarMode } from '~/states/ui/sidebar';
 
@@ -27,14 +30,35 @@ type Props = {
 export const PrimaryItems = memo((props: Props) => {
   const { onItemHover } = props;
 
+  const { t } = useTranslation();
   const { sidebarMode } = useSidebarMode();
   const isAiEnabled = useAtomValue(aiEnabledAtom);
   const isGuestUser = useIsGuestUser();
+  const growiCloudUri = useGrowiCloudUri();
+  const growiAppIdForGrowiCloud = useGrowiAppIdForGrowiCloud();
+  const isCloud = growiCloudUri != null && growiAppIdForGrowiCloud != null;
 
   if (sidebarMode == null) {
     return <></>;
   }
 
+  const aiAssistantNotAvailableTitle = (
+    <>
+      <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 (
     <div className={`${styles['grw-primary-items']} mt-1`}>
       <PrimaryItem
@@ -78,7 +102,7 @@ export const PrimaryItems = memo((props: Props) => {
           onHover={onItemHover}
         />
       )}
-      {isAiEnabled && (
+      {isAiEnabled ? (
         <PrimaryItem
           sidebarMode={sidebarMode}
           contents={SidebarContentsType.AI_ASSISTANT}
@@ -87,6 +111,22 @@ export const PrimaryItems = memo((props: Props) => {
           isCustomIcon
           onHover={onItemHover}
         />
+      ) : (
+        isCloud && (
+          <NotAvailable
+            isDisabled
+            title={aiAssistantNotAvailableTitle}
+            placement="right"
+          >
+            <PrimaryItem
+              sidebarMode={sidebarMode}
+              contents={SidebarContentsType.AI_ASSISTANT}
+              label="AI Assistant"
+              iconName="growi_ai"
+              isCustomIcon
+            />
+          </NotAvailable>
+        )
       )}
     </div>
   );

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

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { NotAvailable } from '~/client/components/NotAvailable';
 import { NotAvailableForGuest } from '~/client/components/NotAvailableForGuest';
+import { useGrowiAppIdForGrowiCloud, useGrowiCloudUri } from '~/states/global';
 import { aiEnabledAtom } from '~/states/server-configurations';
 
 import { useAiAssistantSidebarActions } from '../../states';
@@ -11,6 +12,22 @@ import { useSWRxAiAssistants } from '../../stores/ai-assistant';
 
 import styles from './OpenDefaultAiAssistantButton.module.scss';
 
+const AiAssistantButton = ({
+  onClick,
+}: {
+  onClick?: () => void;
+}): JSX.Element => (
+  <button
+    type="button"
+    className={`btn btn-search ${styles['btn-open-default-ai-assistant']}`}
+    onClick={onClick}
+  >
+    <span className="growi-custom-icons fs-4 align-middle lh-1">
+      ai_assistant
+    </span>
+  </button>
+);
+
 const OpenDefaultAiAssistantButtonSubstance = (): JSX.Element => {
   const { t } = useTranslation();
   const { data: aiAssistantData } = useSWRxAiAssistants();
@@ -42,15 +59,7 @@ const OpenDefaultAiAssistantButtonSubstance = (): JSX.Element => {
         isDisabled={defaultAiAssistant == null}
         title={t('default_ai_assistant.not_set')}
       >
-        <button
-          type="button"
-          className={`btn btn-search ${styles['btn-open-default-ai-assistant']}`}
-          onClick={openDefaultAiAssistantButtonClickHandler}
-        >
-          <span className="growi-custom-icons fs-4 align-middle lh-1">
-            ai_assistant
-          </span>
-        </button>
+        <AiAssistantButton onClick={openDefaultAiAssistantButtonClickHandler} />
       </NotAvailable>
     </NotAvailableForGuest>
   );
@@ -58,9 +67,37 @@ const OpenDefaultAiAssistantButtonSubstance = (): JSX.Element => {
 
 const OpenDefaultAiAssistantButton = (): JSX.Element => {
   const isAiEnabled = useAtomValue(aiEnabledAtom);
+  const { t } = useTranslation();
+  const growiCloudUri = useGrowiCloudUri();
+  const growiAppIdForGrowiCloud = useGrowiAppIdForGrowiCloud();
+  const isCloud = growiCloudUri != null && growiAppIdForGrowiCloud != null;
 
   if (!isAiEnabled) {
-    return <></>;
+    if (!isCloud) return <></>;
+
+    return (
+      <NotAvailable
+        isDisabled
+        title={
+          <>
+            <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>
+          </>
+        }
+      >
+        <AiAssistantButton />
+      </NotAvailable>
+    );
   }
 
   return <OpenDefaultAiAssistantButtonSubstance />;