Merge pull request #9897 from weseek/imprv/165077-hide-summary-mode-switch-in-editor-assistant-mode

imprv: Hide summary mode switch in editor assistant mode

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

@@ -3,9 +3,9 @@ import {
   type FC, memo, useRef, useEffect, useState, useCallback, useMemo,
 } from 'react';
 
-import { useForm, Controller } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { Collapse, UncontrolledTooltip } from 'reactstrap';
+import { Collapse } from 'reactstrap';
 import SimpleBar from 'simplebar-react';
 
 import { toastError } from '~/client/util/toastr';
@@ -19,11 +19,14 @@ import type { IThreadRelationHasId } from '../../../../interfaces/thread-relatio
 import {
   useEditorAssistant,
   useAiAssistantSidebarCloseEffect as useAiAssistantSidebarCloseEffectForEditorAssistant,
+  isEditorAssistantFormData,
+  type FormData as FormDataForEditorAssistant,
 } from '../../../services/editor-assistant';
 import {
   useKnowledgeAssistant,
   useFetchAndSetMessageDataEffect,
   useAiAssistantSidebarCloseEffect as useAiAssistantSidebarCloseEffectForKnowledgeAssistant,
+  type FormData as FormDataForKnowledgeAssistant,
 } from '../../../services/knowledge-assistant';
 import { useAiAssistantSidebar } from '../../../stores/ai-assistant';
 
@@ -36,10 +39,7 @@ const logger = loggerFactory('growi:openai:client:components:AiAssistantSidebar'
 
 const moduleClass = styles['grw-ai-assistant-sidebar'] ?? '';
 
-export type FormData = {
-  input: string;
-  summaryMode?: boolean;
-};
+type FormData = FormDataForEditorAssistant | FormDataForKnowledgeAssistant;
 
 type AiAssistantSidebarSubstanceProps = {
   isEditorAssistant: boolean;
@@ -71,10 +71,13 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
     createThread: createThreadForKnowledgeAssistant,
     postMessage: postMessageForKnowledgeAssistant,
     processMessage: processMessageForKnowledgeAssistant,
+    form: formForKnowledgeAssistant,
+    resetForm: resetFormForKnowledgeAssistant,
 
     // Views
     initialView: initialViewForKnowledgeAssistant,
     generateMessageCard: generateMessageCardForKnowledgeAssistant,
+    generateSummaryModeSwitch: generateSummaryModeSwitchForKnowledgeAssistant,
     headerIcon: headerIconForKnowledgeAssistant,
     headerText: headerTextForKnowledgeAssistant,
     placeHolder: placeHolderForKnowledgeAssistant,
@@ -84,6 +87,9 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
     createThread: createThreadForEditorAssistant,
     postMessage: postMessageForEditorAssistant,
     processMessage: processMessageForEditorAssistant,
+    form: formForEditorAssistant,
+    resetForm: resetFormEditorAssistant,
+    isTextSelected,
 
     // Views
     generateInitialView: generateInitialViewForEditorAssistant,
@@ -93,17 +99,20 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
     placeHolder: placeHolderForEditorAssistant,
   } = useEditorAssistant();
 
-  const form = useForm<FormData>({
-    defaultValues: {
-      input: '',
-      summaryMode: true,
-    },
-  });
+  const form = isEditorAssistant ? formForEditorAssistant : formForKnowledgeAssistant;
 
   // Effects
   useFetchAndSetMessageDataEffect(setMessageLogs, threadData?.threadId);
 
   // Functions
+  const resetForm = useCallback(() => {
+    if (isEditorAssistant) {
+      resetFormEditorAssistant();
+    }
+
+    resetFormForKnowledgeAssistant();
+  }, [isEditorAssistant, resetFormEditorAssistant, resetFormForKnowledgeAssistant]);
+
   const createThread = useCallback(async(initialUserMessage: string) => {
     if (isEditorAssistant) {
       const thread = await createThreadForEditorAssistant();
@@ -117,19 +126,22 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
     return thread;
   }, [aiAssistantData, createThreadForEditorAssistant, createThreadForKnowledgeAssistant, isEditorAssistant]);
 
-  const postMessage = useCallback(async(currentThreadId: string, input: string, summaryMode?: boolean) => {
+  const postMessage = useCallback(async(currentThreadId: string, formData: FormData) => {
     if (isEditorAssistant) {
-      const response = await postMessageForEditorAssistant(currentThreadId, input);
-      return response;
+      if (isEditorAssistantFormData(formData)) {
+        const response = await postMessageForEditorAssistant(currentThreadId, formData);
+        return response;
+      }
+      return;
     }
     if (aiAssistantData?._id != null) {
-      const response = postMessageForKnowledgeAssistant(aiAssistantData._id, currentThreadId, input, summaryMode);
+      const response = await postMessageForKnowledgeAssistant(aiAssistantData._id, currentThreadId, formData);
       return response;
     }
   }, [aiAssistantData?._id, isEditorAssistant, postMessageForEditorAssistant, postMessageForKnowledgeAssistant]);
 
   const isGenerating = generatingAnswerMessage != null;
-  const submit = useCallback(async(data: FormData) => {
+  const submitSubstance = useCallback(async(data: FormData) => {
     // do nothing when the assistant is generating an answer
     if (isGenerating) {
       return;
@@ -146,8 +158,8 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
     const newUserMessage = { id: logLength.toString(), content: data.input, isUserMessage: true };
     setMessageLogs(msgs => [...msgs, newUserMessage]);
 
-    // reset form
-    form.reset({ input: '', summaryMode: data.summaryMode });
+    resetForm();
+
     setErrorMessage(undefined);
 
     // add an empty assistant message
@@ -178,7 +190,7 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
         return;
       }
 
-      const response = await postMessage(currentThreadId_, data.input, data.summaryMode);
+      const response = await postMessage(currentThreadId_, data);
       if (response == null) {
         return;
       }
@@ -275,7 +287,23 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
     }
 
   // eslint-disable-next-line max-len
-  }, [isGenerating, messageLogs, form, currentThreadId, createThread, t, postMessage, processMessageForKnowledgeAssistant, processMessageForEditorAssistant, growiCloudUri]);
+  }, [isGenerating, messageLogs, resetForm, currentThreadId, createThread, t, postMessage, form, processMessageForKnowledgeAssistant, processMessageForEditorAssistant, growiCloudUri]);
+
+  const submit = useCallback((data: FormData) => {
+    if (isEditorAssistant) {
+      const markdownType = (() => {
+        if (isEditorAssistantFormData(data) && data.markdownType != null) {
+          return data.markdownType;
+        }
+
+        return isTextSelected ? 'selected' : 'none';
+      })();
+
+      return submitSubstance({ ...data, markdownType });
+    }
+
+    return submitSubstance(data);
+  }, [isEditorAssistant, isTextSelected, submitSubstance]);
 
   const keyDownHandler = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
@@ -313,6 +341,14 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
     return initialViewForKnowledgeAssistant;
   }, [generateInitialViewForEditorAssistant, initialViewForKnowledgeAssistant, isEditorAssistant, submit]);
 
+  const additionalInputControl = useMemo(() => {
+    if (isEditorAssistant) {
+      return <></>;
+    }
+
+    return generateSummaryModeSwitchForKnowledgeAssistant(isGenerating);
+  }, [generateSummaryModeSwitchForKnowledgeAssistant, isEditorAssistant, isGenerating]);
+
   const messageCard = useCallback(
     (role: MessageCardRole, children: string, messageId?: string, messageLogs?: MessageLog[], generatingAnswerMessage?: MessageLog) => {
       if (isEditorAssistant) {
@@ -396,33 +432,7 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
                   <span className="material-symbols-outlined">send</span>
                 </button>
               </div>
-              <div className="form-check form-switch">
-                <input
-                  id="swSummaryMode"
-                  type="checkbox"
-                  role="switch"
-                  className="form-check-input"
-                  {...form.register('summaryMode')}
-                  disabled={form.formState.isSubmitting || isGenerating}
-                />
-                <label className="form-check-label" htmlFor="swSummaryMode">
-                  {t('sidebar_ai_assistant.summary_mode_label')}
-                </label>
-
-                {/* Help */}
-                <a
-                  id="tooltipForHelpOfSummaryMode"
-                  role="button"
-                  className="ms-1"
-                >
-                  <span className="material-symbols-outlined fs-6" style={{ lineHeight: 'unset' }}>help</span>
-                </a>
-                <UncontrolledTooltip
-                  target="tooltipForHelpOfSummaryMode"
-                >
-                  {t('sidebar_ai_assistant.summary_mode_help')}
-                </UncontrolledTooltip>
-              </div>
+              { additionalInputControl }
             </form>
 
             {form.formState.errors.input != null && (

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

@@ -8,6 +8,7 @@ import {
 } from '@growi/editor/dist/client/services/unified-merge-view';
 import { useCodeMirrorEditorIsolated } from '@growi/editor/dist/client/stores/codemirror-editor';
 import { useSecondaryYdocs } from '@growi/editor/dist/client/stores/use-secondary-ydocs';
+import { useForm, type UseFormReturn } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { type Text as YText } from 'yjs';
 
@@ -34,7 +35,7 @@ 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 { type FormData } from '../components/AiAssistant/AiAssistantSidebar/AiAssistantSidebar';
+// import { type FormData } from '../components/AiAssistant/AiAssistantSidebar/AiAssistantSidebar';
 import { MessageCard, type MessageCardRole } from '../components/AiAssistant/AiAssistantSidebar/MessageCard';
 import { QuickMenuList } from '../components/AiAssistant/AiAssistantSidebar/QuickMenuList';
 import { useAiAssistantSidebar } from '../stores/ai-assistant';
@@ -43,7 +44,7 @@ interface CreateThread {
   (): Promise<IThreadRelationHasId>;
 }
 interface PostMessage {
-  (threadId: string, userMessage: string): Promise<Response>;
+  (threadId: string, formData: FormData): Promise<Response>;
 }
 interface ProcessMessage {
   (data: unknown, handler: {
@@ -59,6 +60,10 @@ interface GenerateInitialView {
 interface GenerateMessageCard {
   (role: MessageCardRole, children: string, messageId: string, messageLogs: MessageLog[], generatingAnswerMessage?: MessageLog): JSX.Element;
 }
+export interface FormData {
+  input: string,
+  markdownType?: 'full' | 'selected' | 'none'
+}
 
 type DetectedDiff = Array<{
   data: SseDetectedDiff,
@@ -70,6 +75,9 @@ type UseEditorAssistant = () => {
   createThread: CreateThread,
   postMessage: PostMessage,
   processMessage: ProcessMessage,
+  form: UseFormReturn<FormData>
+  resetForm: () => void
+  isTextSelected: boolean,
 
   // Views
   generateInitialView: GenerateInitialView,
@@ -139,8 +147,10 @@ export const useEditorAssistant: UseEditorAssistant = () => {
 
   // States
   const [detectedDiff, setDetectedDiff] = useState<DetectedDiff>();
-  const [selectedText, setSelectedText] = useState<string>();
   const [selectedAiAssistant, setSelectedAiAssistant] = useState<AiAssistantHasId>();
+  const [selectedText, setSelectedText] = useState<string>();
+
+  const isTextSelected = useMemo(() => selectedText != null && selectedText.length !== 0, [selectedText]);
 
   // Hooks
   const { t } = useTranslation();
@@ -150,7 +160,17 @@ export const useEditorAssistant: UseEditorAssistant = () => {
   const yDocs = useSecondaryYdocs(isEnableUnifiedMergeView ?? false, { pageId: currentPageId ?? undefined, useSecondary: isEnableUnifiedMergeView ?? false });
   const { data: aiAssistantSidebarData } = useAiAssistantSidebar();
 
+  const form = useForm<FormData>({
+    defaultValues: {
+      input: '',
+    },
+  });
+
   // Functions
+  const resetForm = useCallback(() => {
+    form.reset({ input: '' });
+  }, [form]);
+
   const createThread: CreateThread = useCallback(async() => {
     const response = await apiv3Post<IThreadRelationHasId>('/openai/thread', {
       type: ThreadType.EDITOR,
@@ -159,21 +179,33 @@ export const useEditorAssistant: UseEditorAssistant = () => {
     return response.data;
   }, [selectedAiAssistant?._id]);
 
-  const postMessage: PostMessage = useCallback(async(threadId, userMessage) => {
+  const postMessage: PostMessage = useCallback(async(threadId, formData) => {
+    const getMarkdown = (): string | undefined => {
+      if (formData.markdownType === 'none') {
+        return undefined;
+      }
+
+      if (formData.markdownType === 'selected') {
+        return selectedText;
+      }
+
+      if (formData.markdownType === 'full') {
+        return codeMirrorEditor?.getDoc();
+      }
+    };
+
     const response = await fetch('/_api/v3/openai/edit', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         threadId,
-        userMessage,
-        markdown: selectedText != null && selectedText.length !== 0
-          ? selectedText
-          : undefined,
+        userMessage: formData.input,
+        markdown: getMarkdown(),
       }),
     });
 
     return response;
-  }, [selectedText]);
+  }, [codeMirrorEditor, selectedText]);
 
   const processMessage: ProcessMessage = useCallback((data, handler) => {
     handleIfSuccessfullyParsed(data, SseMessageSchema, (data: SseMessage) => {
@@ -231,7 +263,7 @@ export const useEditorAssistant: UseEditorAssistant = () => {
         pendingDetectedDiff.forEach((detectedDiff) => {
           if (isReplaceDiff(detectedDiff.data)) {
 
-            if (selectedText != null && selectedText.length !== 0) {
+            if (isTextSelected) {
               const lineInfo = getLineInfo(yText, lineRef.current);
               if (lineInfo != null && lineInfo.text !== detectedDiff.data.diff.replace) {
                 yText.delete(lineInfo.startIndex, lineInfo.text.length);
@@ -256,26 +288,29 @@ export const useEditorAssistant: UseEditorAssistant = () => {
         });
       });
 
-      // Mark as applied: true after applying to secondaryDoc
+      // Mark items as applied after applying to secondaryDoc
       setDetectedDiff((prev) => {
+        if (!prev) return prev;
         const pendingDetectedDiffIds = pendingDetectedDiff.map(diff => diff.id);
-        prev?.forEach((diff) => {
+        return prev.map((diff) => {
           if (pendingDetectedDiffIds.includes(diff.id)) {
-            diff.applied = true;
+            return { ...diff, applied: true };
           }
+          return diff;
         });
-        return prev;
       });
+    }
+  }, [codeMirrorEditor, detectedDiff, isTextSelected, selectedText, yDocs?.secondaryDoc]);
 
-      // Set detectedDiff to undefined after applying all detectedDiff to secondaryDoc
-      if (detectedDiff?.filter(detectedDiff => detectedDiff.applied === false).length === 0) {
-        setSelectedText(undefined);
-        setDetectedDiff(undefined);
-        lineRef.current = 0;
-        // positionRef.current = 0;
-      }
+  // Set detectedDiff to undefined after applying all detectedDiff to secondaryDoc
+  useEffect(() => {
+    if (detectedDiff?.filter(detectedDiff => detectedDiff.applied === false).length === 0) {
+      setSelectedText(undefined);
+      setDetectedDiff(undefined);
+      lineRef.current = 0;
+      // positionRef.current = 0;
     }
-  }, [codeMirrorEditor, detectedDiff, selectedText, yDocs?.secondaryDoc]);
+  }, [detectedDiff]);
 
 
   // Views
@@ -295,7 +330,7 @@ export const useEditorAssistant: UseEditorAssistant = () => {
     };
 
     const clickQuickMenuHandler = async(quickMenu: string) => {
-      await onSubmit({ input: quickMenu });
+      await onSubmit({ input: quickMenu, markdownType: 'full' });
     };
 
     return (
@@ -365,6 +400,9 @@ export const useEditorAssistant: UseEditorAssistant = () => {
     createThread,
     postMessage,
     processMessage,
+    form,
+    resetForm,
+    isTextSelected,
 
     // Views
     generateInitialView,
@@ -385,3 +423,8 @@ export const useAiAssistantSidebarCloseEffect = (): void => {
     }
   }, [close, data?.isEditorAssistant, editorMode]);
 };
+
+// type guard
+export const isEditorAssistantFormData = (formData): formData is FormData => {
+  return 'markdownType' in formData;
+};

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

@@ -3,6 +3,10 @@ import {
   useCallback, useMemo, useState, useEffect,
 } from 'react';
 
+import { useForm, type UseFormReturn } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { UncontrolledTooltip } from 'reactstrap';
+
 import { apiv3Post } from '~/client/util/apiv3-client';
 import { SseMessageSchema, type SseMessage } from '~/features/openai/interfaces/knowledge-assistant/sse-schemas';
 import { handleIfSuccessfullyParsed } from '~/features/openai/utils/handle-if-successfully-parsed';
@@ -21,7 +25,7 @@ interface CreateThread {
 }
 
 interface PostMessage {
-  (aiAssistantId: string, threadId: string, userMessage: string, summaryMode?: boolean): Promise<Response>;
+  (aiAssistantId: string, threadId: string, formData: FormData): Promise<Response>;
 }
 
 interface ProcessMessage {
@@ -34,14 +38,26 @@ interface GenerateMessageCard {
   (role: MessageCardRole, children: string): JSX.Element;
 }
 
+interface GenerateSummaryModeSwitch {
+  (isGenerating: boolean): JSX.Element
+}
+
+export interface FormData {
+  input: string
+  summaryMode?: boolean
+}
+
 type UseKnowledgeAssistant = () => {
   createThread: CreateThread
   postMessage: PostMessage
   processMessage: ProcessMessage
+  form: UseFormReturn<FormData>
+  resetForm: () => void
 
   // Views
   initialView: JSX.Element
-  generateMessageCard: GenerateMessageCard,
+  generateMessageCard: GenerateMessageCard
+  generateSummaryModeSwitch: GenerateSummaryModeSwitch
   headerIcon: JSX.Element
   headerText: JSX.Element
   placeHolder: string
@@ -53,11 +69,24 @@ export const useKnowledgeAssistant: UseKnowledgeAssistant = () => {
   const { aiAssistantData } = aiAssistantSidebarData ?? {};
   const { threadData } = aiAssistantSidebarData ?? {};
   const { trigger: mutateThreadData } = useSWRMUTxThreads(aiAssistantData?._id);
+  const { t } = useTranslation();
+
+  const form = useForm<FormData>({
+    defaultValues: {
+      input: '',
+      summaryMode: true,
+    },
+  });
 
   // States
   const [currentThreadTitle, setCurrentThreadId] = useState(threadData?.title);
 
   // Functions
+  const resetForm = useCallback(() => {
+    const summaryMode = form.getValues('summaryMode');
+    form.reset({ input: '', summaryMode });
+  }, [form]);
+
   const createThread: CreateThread = useCallback(async(aiAssistantId, initialUserMessage) => {
     const response = await apiv3Post<IThreadRelationHasId>('/openai/thread', {
       type: ThreadType.KNOWLEDGE,
@@ -74,19 +103,19 @@ export const useKnowledgeAssistant: UseKnowledgeAssistant = () => {
     return thread;
   }, [mutateThreadData]);
 
-  const postMessage: PostMessage = useCallback(async(aiAssistantId, threadId, userMessage, summaryMode) => {
+  const postMessage: PostMessage = useCallback(async(aiAssistantId, threadId, formData) => {
     const response = await fetch('/_api/v3/openai/message', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         aiAssistantId,
         threadId,
-        userMessage,
-        summaryMode,
+        userMessage: formData.input,
+        summaryMode: form.getValues('summaryMode'),
       }),
     });
     return response;
-  }, []);
+  }, [form]);
 
   const processMessage: ProcessMessage = useCallback((data, handler) => {
     handleIfSuccessfullyParsed(data, SseMessageSchema, (data: SseMessage) => {
@@ -129,14 +158,49 @@ export const useKnowledgeAssistant: UseKnowledgeAssistant = () => {
     );
   }, []);
 
+  const generateSummaryModeSwitch: GenerateSummaryModeSwitch = useCallback((isGenerating) => {
+    return (
+      <div className="form-check form-switch">
+        <input
+          id="swSummaryMode"
+          type="checkbox"
+          role="switch"
+          className="form-check-input"
+          {...form.register('summaryMode')}
+          disabled={form.formState.isSubmitting || isGenerating}
+        />
+        <label className="form-check-label" htmlFor="swSummaryMode">
+          {t('sidebar_ai_assistant.summary_mode_label')}
+        </label>
+
+        {/* Help */}
+        <a
+          id="tooltipForHelpOfSummaryMode"
+          role="button"
+          className="ms-1"
+        >
+          <span className="material-symbols-outlined fs-6" style={{ lineHeight: 'unset' }}>help</span>
+        </a>
+        <UncontrolledTooltip
+          target="tooltipForHelpOfSummaryMode"
+        >
+          {t('sidebar_ai_assistant.summary_mode_help')}
+        </UncontrolledTooltip>
+      </div>
+    );
+  }, [form, t]);
+
   return {
     createThread,
     postMessage,
     processMessage,
+    form,
+    resetForm,
 
     // Views
     initialView,
     generateMessageCard,
+    generateSummaryModeSwitch,
     headerIcon,
     headerText,
     placeHolder,