optimize AiAssistantSidebar

apps/app/src/components/Layout/BasicLayout.tsx

@@ -5,33 +5,22 @@ import dynamic from 'next/dynamic';
 import { DeleteBookmarkFolderModalLazyLoaded } from '~/client/components/DeleteBookmarkFolderModal';
 import { GrantedGroupsInheritanceSelectModalLazyLoaded } from '~/client/components/GrantedGroupsInheritanceSelectModal';
 import { PageAccessoriesModalLazyLoaded } from '~/client/components/PageAccessoriesModal';
-// eslint-disable-next-line no-restricted-imports
 import { DeleteAttachmentModalLazyLoaded } from '~/client/components/PageAttachment';
 import { PageDeleteModalLazyLoaded } from '~/client/components/PageDeleteModal';
 import { PageDuplicateModalLazyLoaded } from '~/client/components/PageDuplicateModal';
 import { PagePresentationModalLazyLoaded } from '~/client/components/PagePresentationModal';
 import { PageRenameModalLazyLoaded } from '~/client/components/PageRenameModal';
-// eslint-disable-next-line no-restricted-imports
 import { PageSelectModalLazyLoaded } from '~/client/components/PageSelectModal';
-// eslint-disable-next-line no-restricted-imports
 import { PutBackPageModalLazyLoaded } from '~/client/components/PutbackPageModal';
 import { ShortcutsModalLazyLoaded } from '~/client/components/ShortcutsModal';
-// eslint-disable-next-line no-restricted-imports
 import { AiAssistantManagementModalLazyLoaded } from '~/features/openai/client/components/AiAssistant/AiAssistantManagementModal';
+import { AiAssistantSidebarLazyLoaded } from '~/features/openai/client/components/AiAssistant/AiAssistantSidebar/dynamic';
 import { PageBulkExportSelectModalLazyLoaded } from '~/features/page-bulk-export/client/components';
 
 import { RawLayout } from './RawLayout';
 
 import styles from './BasicLayout.module.scss';
 
-const AiAssistantSidebar = dynamic(
-  () =>
-    import(
-      '~/features/openai/client/components/AiAssistant/AiAssistantSidebar/AiAssistantSidebar'
-    ).then((mod) => mod.AiAssistantSidebar),
-  { ssr: false },
-);
-
 const moduleClass = styles['grw-basic-layout'] ?? '';
 
 const Sidebar = dynamic(

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

@@ -45,8 +45,6 @@ type AiAssistantSidebarSubstanceProps = {
   aiAssistantData?: AiAssistantHasId;
   threadData?: IThreadRelationHasId;
   onCloseButtonClicked?: () => void;
-  onNewThreadCreated?: (thread: IThreadRelationHasId) => void;
-  onMessageReceived?: () => void;
 }
 
 const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> = (props: AiAssistantSidebarSubstanceProps) => {
@@ -55,8 +53,6 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
     aiAssistantData,
     threadData,
     onCloseButtonClicked,
-    onNewThreadCreated,
-    onMessageReceived,
   } = props;
 
   // States
@@ -69,6 +65,26 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
   const { t } = useTranslation();
   const growiCloudUri = useGrowiCloudUri();
 
+  // useSWRxThreads is executed only when Substance is rendered
+  const { data: threads, mutate: mutateThreads } = useSWRxThreads(aiAssistantData?._id);
+  const { refreshThreadData } = useAiAssistantSidebarActions();
+
+  // refresh thread data when the data is changed
+  useEffect(() => {
+    if (threads == null) {
+      return;
+    }
+
+    const currentThread = threads.find(t => t.threadId === threadData?.threadId);
+    if (currentThread != null) {
+      refreshThreadData(currentThread);
+    }
+  }, [threads, refreshThreadData, threadData?.threadId]);
+
+  const newThreadCreatedHandler = useCallback((thread: IThreadRelationHasId): void => {
+    refreshThreadData(thread);
+  }, [refreshThreadData]);
+
   const {
     createThread: createThreadForKnowledgeAssistant,
     postMessage: postMessageForKnowledgeAssistant,
@@ -192,7 +208,7 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
 
         threadId = newThread.threadId;
 
-        onNewThreadCreated?.(newThread);
+        newThreadCreatedHandler(newThread);
       }
       catch (err) {
         logger.error(err.toString());
@@ -244,7 +260,7 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
           });
 
           // refresh thread data
-          onMessageReceived?.();
+          mutateThreads();
           return;
         }
 
@@ -331,7 +347,7 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
     }
 
     // eslint-disable-next-line max-len
-  }, [isGenerating, messageLogs, resetForm, threadData?.threadId, createThread, onNewThreadCreated, t, postMessage, form, onMessageReceived, processMessageForKnowledgeAssistant, processMessageForEditorAssistant, growiCloudUri]);
+  }, [isGenerating, messageLogs, resetForm, threadData?.threadId, createThread, newThreadCreatedHandler, t, postMessage, form, mutateThreads, processMessageForKnowledgeAssistant, processMessageForEditorAssistant, growiCloudUri]);
 
   const submit = useCallback((data: FormData) => {
     if (isEditorAssistant) {
@@ -546,7 +562,7 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
 
 export const AiAssistantSidebar: FC = memo((): JSX.Element => {
   const aiAssistantSidebarData = useAiAssistantSidebarStatus();
-  const { close: closeAiAssistantSidebar, refreshThreadData } = useAiAssistantSidebarActions();
+  const { close: closeAiAssistantSidebar } = useAiAssistantSidebarActions();
   const { disable: disableUnifiedMergeView } = useUnifiedMergeViewActions();
 
   const aiAssistantData = aiAssistantSidebarData?.aiAssistantData;
@@ -554,31 +570,14 @@ export const AiAssistantSidebar: FC = memo((): JSX.Element => {
   const isOpened = aiAssistantSidebarData?.isOpened;
   const isEditorAssistant = aiAssistantSidebarData?.isEditorAssistant ?? false;
 
-  const { data: threads, mutate: mutateThreads } = useSWRxThreads(aiAssistantData?._id);
-
-  const newThreadCreatedHandler = useCallback((thread: IThreadRelationHasId): void => {
-    refreshThreadData(thread);
-  }, [refreshThreadData]);
-
   useEffect(() => {
     if (!aiAssistantSidebarData?.isOpened) {
       disableUnifiedMergeView();
     }
   }, [aiAssistantSidebarData?.isOpened, disableUnifiedMergeView]);
 
-  // refresh thread data when the data is changed
-  useEffect(() => {
-    if (threads == null) {
-      return;
-    }
-
-    const currentThread = threads.find(t => t.threadId === threadData?.threadId);
-    if (currentThread != null) {
-      refreshThreadData(currentThread);
-    }
-  }, [threads, refreshThreadData, threadData?.threadId]);
-
   if (!isOpened) {
+    // biome-ignore lint/complexity/noUselessFragments: ignore
     return <></>;
   }
 
@@ -591,8 +590,6 @@ export const AiAssistantSidebar: FC = memo((): JSX.Element => {
         isEditorAssistant={isEditorAssistant}
         threadData={threadData}
         aiAssistantData={aiAssistantData}
-        onMessageReceived={mutateThreads}
-        onNewThreadCreated={newThreadCreatedHandler}
         onCloseButtonClicked={closeAiAssistantSidebar}
       />
     </div>

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantSidebar/dynamic.tsx

@@ -0,0 +1,25 @@
+import type { FC } from 'react';
+import { memo } from 'react';
+
+import { useLazyLoader } from '~/client/util/use-lazy-loader';
+
+import { useAiAssistantSidebarStatus } from '../../../states';
+
+export const AiAssistantSidebarLazyLoaded: FC = memo(() => {
+  const aiAssistantSidebarData = useAiAssistantSidebarStatus();
+  const isOpened = aiAssistantSidebarData?.isOpened ?? false;
+
+  const ComponentToRender = useLazyLoader(
+    'ai-assistant-sidebar',
+    () => import('./AiAssistantSidebar').then(mod => ({ default: mod.AiAssistantSidebar })),
+    isOpened,
+  );
+
+  if (ComponentToRender == null) {
+    return null;
+  }
+
+  return <ComponentToRender />;
+});
+
+AiAssistantSidebarLazyLoaded.displayName = 'AiAssistantSidebarLazyLoaded';