feat(ai-assistant): add Growi Cloud link to enable AI Assistant for cloud users

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>
   );