Migrate to React Hooks

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

@@ -16,14 +16,8 @@ import loggerFactory from '~/utils/logger';
 import type { AiAssistantHasId } from '../../../../interfaces/ai-assistant';
 import { MessageErrorCode, StreamErrorCode } from '../../../../interfaces/message-error';
 import type { IThreadRelationHasId } from '../../../../interfaces/thread-relation';
-import {
-  postMessage as postMessageForEditorAssistant,
-  processMessage as processMessageForEditorAssistant,
-} from '../../../services/editor-assistant';
-import {
-  postMessage as postMessageForKnowledgeAssistant,
-  processMessage as processMessageForKnowledgeAssistant,
-} from '../../../services/knowledge-assistant';
+import { useEditorAssistant } from '../../../services/editor-assistant';
+import { useKnowledgeAssistant } from '../../../services/knowledge-assistant';
 import { useAiAssistantSidebar } from '../../../stores/ai-assistant';
 import { useSWRMUTxMessages } from '../../../stores/message';
 import { useSWRMUTxThreads } from '../../../stores/thread';
@@ -76,6 +70,9 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
   const { trigger: mutateThreadData } = useSWRMUTxThreads(aiAssistantData?._id);
   const { trigger: mutateMessageData } = useSWRMUTxMessages(aiAssistantData?._id, threadData?.threadId);
 
+  const { postMessage: postMessageForKnowledgeAssistant, processMessage: processMessageForKnowledgeAssistant } = useKnowledgeAssistant();
+  const { postMessage: postMessageForEditorAssistant, processMessage: processMessageForEditorAssistant } = useEditorAssistant();
+
   const form = useForm<FormData>({
     defaultValues: {
       input: '',
@@ -292,7 +289,8 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
       form.setError('input', { type: 'manual', message: err.toString() });
     }
 
-  }, [isGenerating, messageLogs, form, currentThreadId, aiAssistantData?._id, mutateThreadData, t, isEditorAssistant, growiCloudUri]);
+  // eslint-disable-next-line max-len
+  }, [isGenerating, messageLogs, form, currentThreadId, aiAssistantData?._id, isEditorAssistant, mutateThreadData, t, postMessageForKnowledgeAssistant, processMessageForKnowledgeAssistant, growiCloudUri]);
 
   const keyDownHandler = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {

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

@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+
 import {
   SseMessageSchema,
   SseDetectedDiffSchema,
@@ -8,33 +10,46 @@ import {
 } from '~/features/openai/interfaces/editor-assistant/sse-schemas';
 import { handleIfSuccessfullyParsed } from '~/features/openai/utils/handle-if-successfully-parsed';
 
-export const postMessage = async(threadId: string, userMessage: string, markdown: string, aiAssistantId?: string): Promise<Response> => {
-  const response = await fetch('/_api/v3/openai/edit', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      aiAssistantId,
-      threadId,
-      userMessage,
-      markdown,
-    }),
-  });
+interface PostMessage {
+  (threadId: string, userMessage: string, markdown: string, aiAssistantId?: string): Promise<Response>;
+}
+interface ProcessMessage {
+  (data: unknown, handler: {
+    onMessage: (data: SseMessage) => void;
+    onDetectedDiff: (data: SseDetectedDiff) => void;
+    onFinalized: (data: SseFinalized) => void;
+  }): void;
+}
 
-  return response;
-};
+export const useEditorAssistant = (): { postMessage: PostMessage, processMessage: ProcessMessage } => {
+  const postMessage: PostMessage = useCallback(async(threadId, userMessage, markdown, aiAssistantId) => {
+    const response = await fetch('/_api/v3/openai/edit', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        aiAssistantId,
+        threadId,
+        userMessage,
+        markdown,
+      }),
+    });
+    return response;
+  }, []);
+
+  const processMessage: ProcessMessage = useCallback((data, handler) => {
+    handleIfSuccessfullyParsed(data, SseMessageSchema, (data: SseMessage) => {
+      handler.onMessage(data);
+    });
+    handleIfSuccessfullyParsed(data, SseDetectedDiffSchema, (data: SseDetectedDiff) => {
+      handler.onDetectedDiff(data);
+    });
+    handleIfSuccessfullyParsed(data, SseFinalizedSchema, (data: SseFinalized) => {
+      handler.onFinalized(data);
+    });
+  }, []);
 
-export const processMessage = (data: unknown, handler: {
-  onMessage: (data: SseMessage) => void,
-  onDetectedDiff: (data: SseDetectedDiff) => void,
-  onFinalized: (data: SseFinalized) => void,
-}): void => {
-  handleIfSuccessfullyParsed(data, SseMessageSchema, (data: SseMessage) => {
-    handler.onMessage(data);
-  });
-  handleIfSuccessfullyParsed(data, SseDetectedDiffSchema, (data: SseDetectedDiff) => {
-    handler.onDetectedDiff(data);
-  });
-  handleIfSuccessfullyParsed(data, SseFinalizedSchema, (data: SseFinalized) => {
-    handler.onFinalized(data);
-  });
+  return {
+    postMessage,
+    processMessage,
+  };
 };

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

@@ -1,25 +1,40 @@
+import { useCallback } from 'react';
+
 import { SseMessageSchema, type SseMessage } from '~/features/openai/interfaces/knowledge-assistant/sse-schemas';
 import { handleIfSuccessfullyParsed } from '~/features/openai/utils/handle-if-successfully-parsed';
 
-export const postMessage = async(
-    aiAssistantId: string, threadId: string, userMessage: string, summaryMode?: boolean,
-): Promise<Response> => {
-  const response = await fetch('/_api/v3/openai/message', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      aiAssistantId,
-      threadId,
-      userMessage,
-      summaryMode,
-    }),
-  });
-  return response;
-};
+interface PostMessage {
+  (aiAssistantId: string, threadId: string, userMessage: string, summaryMode?: boolean): Promise<Response>;
+}
+interface ProcessMessage {
+  (data: unknown, handler: {
+    onMessage: (data: SseMessage) => void}
+  ): void;
+}
+
+export const useKnowledgeAssistant = (): { postMessage: PostMessage, processMessage: ProcessMessage } => {
+  const postMessage: PostMessage = useCallback(async(aiAssistantId, threadId, userMessage, summaryMode) => {
+    const response = await fetch('/_api/v3/openai/message', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        aiAssistantId,
+        threadId,
+        userMessage,
+        summaryMode,
+      }),
+    });
+    return response;
+  }, []);
+
+  const processMessage: ProcessMessage = useCallback((data, handler) => {
+    handleIfSuccessfullyParsed(data, SseMessageSchema, (data: SseMessage) => {
+      handler.onMessage(data);
+    });
+  }, []);
 
-export const processMessage = (data: unknown,
-    handler: {onMessage: (data: SseMessage) => void}) : void => {
-  handleIfSuccessfullyParsed(data, SseMessageSchema, (data: SseMessage) => {
-    handler.onMessage(data);
-  });
+  return {
+    postMessage,
+    processMessage,
+  };
 };