Reorganize initial view for each assistant

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

@@ -21,10 +21,7 @@ import { useEditorAssistant } from '../../../services/editor-assistant';
 import { useKnowledgeAssistant, useFetchAndSetMessageDataEffect } from '../../../services/knowledge-assistant';
 import { useAiAssistantSidebar } from '../../../stores/ai-assistant';
 
-import { AiAssistantChatInitialView } from './AiAssistantChatInitialView';
-import { AiAssistantDropdown } from './AiAssistantDropdown';
 import { MessageCard } from './MessageCard';
-import { QuickMenuList } from './QuickMenuList';
 import { ResizableTextarea } from './ResizableTextArea';
 
 import styles from './AiAssistantSidebar.module.scss';
@@ -69,18 +66,24 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
     createThread: createThreadForKnowledgeAssistant,
     postMessage: postMessageForKnowledgeAssistant,
     processMessage: processMessageForKnowledgeAssistant,
+
+    // Views
+    initialView: initialViewForKnowledgeAssistant,
     headerIcon: headerIconForKnowledgeAssistant,
     headerText: headerTextForKnowledgeAssistant,
     placeHolder: placeHolderForKnowledgeAssistant,
   } = useKnowledgeAssistant();
 
   const {
+    initialView: initialViewForEditorAssistant,
     createThread: createThreadForEditorAssistant,
     postMessage: postMessageForEditorAssistant,
     processMessage: processMessageForEditorAssistant,
     isActionButtonShown,
     accept,
     reject,
+
+    // Views
     headerIcon: headerIconForEditorAssistant,
     headerText: headerTextForEditorAssistant,
     placeHolder: placeHolderForEditorAssistant,
@@ -106,6 +109,12 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
     return thread;
   }, [aiAssistantData, createThreadForEditorAssistant, createThreadForKnowledgeAssistant, isEditorAssistant, selectedAiAssistant?._id]);
 
+  const initialView = useMemo(() => {
+    return isEditorAssistant
+      ? initialViewForEditorAssistant
+      : initialViewForKnowledgeAssistant;
+  }, [initialViewForEditorAssistant, initialViewForKnowledgeAssistant, isEditorAssistant]);
+
   const headerIcon = useMemo(() => {
     return isEditorAssistant
       ? headerIconForEditorAssistant
@@ -290,10 +299,6 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
     }
   };
 
-  const clickQuickMenuHandler = useCallback(async(quickMenu: string) => {
-    await submit({ input: quickMenu });
-  }, [submit]);
-
   const clickAcceptHandler = useCallback(() => {
     accept();
   }, [accept]);
@@ -302,10 +307,6 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
     reject();
   }, [reject]);
 
-  const selectAiAssistantHandler = useCallback((aiAssistant?: AiAssistantHasId) => {
-    setSelectedAiAssistant(aiAssistant);
-  }, []);
-
   return (
     <>
       <div className="d-flex flex-column vh-100">
@@ -351,28 +352,7 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
               </div>
             )
             : (
-              <>{isEditorAssistant
-                ? (
-                  <>
-                    <div className="py-2">
-                      <AiAssistantDropdown
-                        selectedAiAssistant={selectedAiAssistant}
-                        onSelect={selectAiAssistantHandler}
-                      />
-                    </div>
-                    <QuickMenuList
-                      onClick={clickQuickMenuHandler}
-                    />
-                  </>
-                )
-                : (
-                  <AiAssistantChatInitialView
-                    description={aiAssistantData?.description ?? ''}
-                    additionalInstruction={aiAssistantData?.additionalInstruction ?? ''}
-                    pagePathPatterns={aiAssistantData?.pagePathPatterns ?? []}
-                  />
-                )}
-              </>
+              <>{ initialView }</>
             )
           }
 

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

@@ -28,9 +28,12 @@ import { handleIfSuccessfullyParsed } from '~/features/openai/utils/handle-if-su
 import { useIsEnableUnifiedMergeView } from '~/stores-universal/context';
 import { useCurrentPageId } from '~/stores/page';
 
+import type { AiAssistantHasId } from '../../interfaces/ai-assistant';
 import type { MessageLog } from '../../interfaces/message';
 import type { IThreadRelationHasId } from '../../interfaces/thread-relation';
 import { ThreadType } from '../../interfaces/thread-relation';
+import { AiAssistantDropdown } from '../components/AiAssistant/AiAssistantSidebar/AiAssistantDropdown';
+import { QuickMenuList } from '../components/AiAssistant/AiAssistantSidebar/QuickMenuList';
 import { useAiAssistantSidebar } from '../stores/ai-assistant';
 
 interface CreateThread {
@@ -66,6 +69,7 @@ type UseEditorAssistant = () => {
   reject: () => void,
 
   // Views
+  initialView: JSX.Element,
   headerIcon: JSX.Element,
   headerText: JSX.Element,
   placeHolder: string,
@@ -132,6 +136,7 @@ export const useEditorAssistant: UseEditorAssistant = () => {
   // States
   const [detectedDiff, setDetectedDiff] = useState<DetectedDiff>();
   const [selectedText, setSelectedText] = useState<string>();
+  const [selectedAiAssistant, setSelectedAiAssistant] = useState<AiAssistantHasId>();
 
   // Hooks
   const { t } = useTranslation();
@@ -314,6 +319,29 @@ export const useEditorAssistant: UseEditorAssistant = () => {
 
   const placeHolder = useMemo(() => { return 'sidebar_ai_assistant.editor_assistant_placeholder' }, []);
 
+  const initialView = useMemo(() => {
+    const selectAiAssistantHandler = (aiAssistant?: AiAssistantHasId) => {
+      setSelectedAiAssistant(aiAssistant);
+    };
+
+    const clickQuickMenuHandler = async(quickMenu: string) => {
+      // await submit({ input: quickMenu });
+    };
+
+    return (
+      <>
+        <div className="py-2">
+          <AiAssistantDropdown
+            selectedAiAssistant={selectedAiAssistant}
+            onSelect={selectAiAssistantHandler}
+          />
+        </div>
+        <QuickMenuList
+          onClick={clickQuickMenuHandler}
+        />
+      </>
+    );
+  }, [selectedAiAssistant]);
 
   return {
     createThread,
@@ -324,6 +352,7 @@ export const useEditorAssistant: UseEditorAssistant = () => {
     reject,
 
     // Views
+    initialView,
     headerIcon,
     headerText,
     placeHolder,

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

@@ -10,6 +10,7 @@ import { handleIfSuccessfullyParsed } from '~/features/openai/utils/handle-if-su
 import type { MessageLog } from '../../interfaces/message';
 import type { IThreadRelationHasId } from '../../interfaces/thread-relation';
 import { ThreadType } from '../../interfaces/thread-relation';
+import { AiAssistantChatInitialView } from '../components/AiAssistant/AiAssistantSidebar/AiAssistantChatInitialView';
 import { useAiAssistantSidebar } from '../stores/ai-assistant';
 import { useSWRMUTxMessages } from '../stores/message';
 import { useSWRMUTxThreads } from '../stores/thread';
@@ -34,6 +35,7 @@ type UseKnowledgeAssistant = () => {
   processMessage: ProcessMessage
 
   // Views
+  initialView: JSX.Element
   headerIcon: JSX.Element
   headerText: JSX.Element
   placeHolder: string
@@ -97,6 +99,20 @@ export const useKnowledgeAssistant: UseKnowledgeAssistant = () => {
 
   const placeHolder = useMemo(() => { return 'sidebar_ai_assistant.knowledge_assistant_placeholder' }, []);
 
+  const initialView = useMemo(() => {
+    if (aiAssistantSidebarData?.aiAssistantData == null) {
+      return <></>;
+    }
+
+    return (
+      <AiAssistantChatInitialView
+        description={aiAssistantSidebarData.aiAssistantData.description}
+        additionalInstruction={aiAssistantSidebarData.aiAssistantData.additionalInstruction}
+        pagePathPatterns={aiAssistantSidebarData.aiAssistantData.pagePathPatterns}
+      />
+    );
+  }, [aiAssistantSidebarData?.aiAssistantData]);
+
   return {
     // Functions
     createThread,
@@ -104,6 +120,7 @@ export const useKnowledgeAssistant: UseKnowledgeAssistant = () => {
     processMessage,
 
     // Views
+    initialView,
     headerIcon,
     headerText,
     placeHolder,