PromptFineTuning

Author: AntoLC

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -1,4 +1,3 @@
-import { createOpenAI } from '@ai-sdk/openai';
 import { codeBlock } from '@blocknote/code-block';
 import {
   BlockNoteSchema,
@@ -10,24 +9,20 @@ import * as locales from '@blocknote/core/locales';
 import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
 import { useCreateBlockNote } from '@blocknote/react';
-import {
-  AIMenuController,
-  createAIExtension,
-  createBlockNoteAIClient,
-} from '@blocknote/xl-ai';
+import { AIMenuController } from '@blocknote/xl-ai';
 import { en as aiEn } from '@blocknote/xl-ai/locales';
 import '@blocknote/xl-ai/style.css';
 import { HocuspocusProvider } from '@hocuspocus/provider';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as Y from 'yjs';
 
-import { fetchAPI } from '@/api';
 import { Box, TextErrors } from '@/components';
 import { Doc, useIsCollaborativeEditable } from '@/docs/doc-management';
 import { useAuth } from '@/features/auth';
 
 import { useHeadings, useUploadFile, useUploadStatus } from '../hook/';
+import { useAI } from '../hook/useAI';
 import useSaveDoc from '../hook/useSaveDoc';
 import { useEditorStore } from '../stores';
 import { cssEditor } from '../styles';
@@ -67,31 +62,13 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   const lang = i18n.resolvedLanguage;
 
   const { uploadFile, errorAttachment } = useUploadFile(doc.id);
+  const aiExtension = useAI(doc.id);
 
   const collabName = readOnly
     ? 'Reader'
     : user?.full_name || user?.email || t('Anonymous');
   const showCursorLabels: 'always' | 'activity' | (string & {}) = 'activity';
 
-  const client = createBlockNoteAIClient({
-    baseURL: ``,
-    apiKey: '',
-  });
-  const openai = createOpenAI({
-    ...client.getProviderSettings('openai'),
-    fetch: (input, init) => {
-      // Create a new headers object without the Authorization header
-      const headers = new Headers(init?.headers);
-      headers.delete('Authorization');
-
-      return fetchAPI(`documents/${doc.id}/ai-proxy/`, {
-        ...init,
-        headers,
-      });
-    },
-  });
-  const model = openai.chat('neuralmagic/Meta-Llama-3.1-70B-Instruct-FP8');
-
   const editor: DocsBlockNoteEditor = useCreateBlockNote(
     {
       codeBlock,
@@ -145,16 +122,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
         showCursorLabels: showCursorLabels as 'always' | 'activity',
       },
       dictionary: { ...locales[lang as keyof typeof locales], ai: aiEn },
-      extensions: [
-        createAIExtension({
-          stream: false,
-          model,
-          agentCursor: {
-            name: 'Albert',
-            color: '#8bc6ff',
-          },
-        }),
-      ],
+      extensions: [aiExtension],
       tables: {
         splitCells: true,
         cellBackgroundColor: true,

src/frontend/apps/impress/src/features/docs/doc-editor/hook/useAI.tsx

@@ -0,0 +1,42 @@
+import { createOpenAI } from '@ai-sdk/openai';
+import { createAIExtension, createBlockNoteAIClient } from '@blocknote/xl-ai';
+import { useMemo } from 'react';
+
+import { fetchAPI } from '@/api';
+
+import { Doc } from '../../doc-management';
+
+const client = createBlockNoteAIClient({
+  baseURL: ``,
+  apiKey: '',
+});
+
+export const useAI = (docId: Doc['id']) => {
+  return useMemo(() => {
+    const openai = createOpenAI({
+      ...client.getProviderSettings('openai'),
+      fetch: (input, init) => {
+        // Create a new headers object without the Authorization header
+        const headers = new Headers(init?.headers);
+        headers.delete('Authorization');
+
+        return fetchAPI(`documents/${docId}/ai-proxy/`, {
+          ...init,
+          headers,
+        });
+      },
+    });
+    const model = openai.chat('neuralmagic/Meta-Llama-3.1-70B-Instruct-FP8');
+
+    const extension = createAIExtension({
+      stream: false,
+      model,
+      agentCursor: {
+        name: 'Albert',
+        color: '#8bc6ff',
+      },
+    });
+
+    return extension;
+  }, [docId]);
+};