Reorganize automatic close process for right sidebar

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

@@ -10,15 +10,21 @@ import SimpleBar from 'simplebar-react';
 
 import { toastError } from '~/client/util/toastr';
 import { useGrowiCloudUri, useIsEnableUnifiedMergeView } from '~/stores-universal/context';
-import { useEditorMode, EditorMode } from '~/stores-universal/ui';
 import loggerFactory from '~/utils/logger';
 
 import type { AiAssistantHasId } from '../../../../interfaces/ai-assistant';
 import type { MessageLog } from '../../../../interfaces/message';
 import { MessageErrorCode, StreamErrorCode } from '../../../../interfaces/message-error';
 import type { IThreadRelationHasId } from '../../../../interfaces/thread-relation';
-import { useEditorAssistant } from '../../../services/editor-assistant';
-import { useKnowledgeAssistant, useFetchAndSetMessageDataEffect } from '../../../services/knowledge-assistant';
+import {
+  useEditorAssistant,
+  useAiAssistantSidebarCloseEffect as useAiAssistantSidebarCloseEffectForEditorAssistant,
+} from '../../../services/editor-assistant';
+import {
+  useKnowledgeAssistant,
+  useFetchAndSetMessageDataEffect,
+  useAiAssistantSidebarCloseEffect as useAiAssistantSidebarCloseEffectForKnowledgeAssistant,
+} from '../../../services/knowledge-assistant';
 import { useAiAssistantSidebar } from '../../../stores/ai-assistant';
 
 import { MessageCard, type MessageCardRole } from './MessageCard';
@@ -57,7 +63,6 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
   const [errorMessage, setErrorMessage] = useState<string | undefined>();
   const [isErrorDetailCollapsed, setIsErrorDetailCollapsed] = useState<boolean>(false);
 
-
   // Hooks
   const { t } = useTranslation();
   const { data: growiCloudUri } = useGrowiCloudUri();
@@ -460,7 +465,6 @@ export const AiAssistantSidebar: FC = memo((): JSX.Element => {
   const sidebarRef = useRef<HTMLDivElement>(null);
   const sidebarScrollerRef = useRef<HTMLDivElement>(null);
 
-  const { data: editorMode } = useEditorMode();
   const { data: aiAssistantSidebarData, close: closeAiAssistantSidebar } = useAiAssistantSidebar();
   const { mutate: mutateIsEnableUnifiedMergeView } = useIsEnableUnifiedMergeView();
 
@@ -469,24 +473,8 @@ export const AiAssistantSidebar: FC = memo((): JSX.Element => {
   const isOpened = aiAssistantSidebarData?.isOpened;
   const isEditorAssistant = aiAssistantSidebarData?.isEditorAssistant ?? false;
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (isOpened && sidebarRef.current && !sidebarRef.current.contains(event.target as Node) && !isEditorAssistant) {
-        closeAiAssistantSidebar();
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [closeAiAssistantSidebar, isEditorAssistant, isOpened]);
-
-  useEffect(() => {
-    if (isEditorAssistant && editorMode !== EditorMode.Editor) {
-      closeAiAssistantSidebar();
-    }
-  }, [closeAiAssistantSidebar, editorMode, isEditorAssistant]);
+  useAiAssistantSidebarCloseEffectForEditorAssistant();
+  useAiAssistantSidebarCloseEffectForKnowledgeAssistant(sidebarRef);
 
   useEffect(() => {
     if (!aiAssistantSidebarData?.isOpened) {

apps/app/src/features/openai/client/services/editor-assistant.tsx

@@ -26,6 +26,7 @@ import {
 } from '~/features/openai/interfaces/editor-assistant/sse-schemas';
 import { handleIfSuccessfullyParsed } from '~/features/openai/utils/handle-if-successfully-parsed';
 import { useIsEnableUnifiedMergeView } from '~/stores-universal/context';
+import { EditorMode, useEditorMode } from '~/stores-universal/ui';
 import { useCurrentPageId } from '~/stores/page';
 
 import type { AiAssistantHasId } from '../../interfaces/ai-assistant';
@@ -373,3 +374,14 @@ export const useEditorAssistant: UseEditorAssistant = () => {
     placeHolder,
   };
 };
+
+export const useAiAssistantSidebarCloseEffect = (): void => {
+  const { data, close } = useAiAssistantSidebar();
+  const { data: editorMode } = useEditorMode();
+
+  useEffect(() => {
+    if (data?.isEditorAssistant && editorMode !== EditorMode.Editor) {
+      close();
+    }
+  }, [close, data?.isEditorAssistant, editorMode]);
+};

apps/app/src/features/openai/client/services/knowledge-assistant.tsx

@@ -1,4 +1,4 @@
-import type { Dispatch, SetStateAction } from 'react';
+import type { Dispatch, SetStateAction, RefObject } from 'react';
 import {
   useCallback, useMemo, useState, useEffect,
 } from 'react';
@@ -130,7 +130,6 @@ export const useKnowledgeAssistant: UseKnowledgeAssistant = () => {
   }, []);
 
   return {
-    // Functions
     createThread,
     postMessage,
     processMessage,
@@ -175,3 +174,20 @@ export const useFetchAndSetMessageDataEffect = (setMessageLogs: Dispatch<SetStat
 
   }, [mutateMessageData, setMessageLogs, threadId]);
 };
+
+export const useAiAssistantSidebarCloseEffect = (sidebarRef: RefObject<HTMLDivElement>): void => {
+  const { data, close } = useAiAssistantSidebar();
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (data?.isOpened && sidebarRef.current && !sidebarRef.current.contains(event.target as Node) && !data.isEditorAssistant) {
+        close();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [close, data?.isEditorAssistant, data?.isOpened, sidebarRef]);
+};