📄(frontend) remove AI feature when MIT

AI feature is under AGPL license, so it is removed
when the project is under MIT license.
NEXT_PUBLIC_PUBLISH_AS_MIT manage this.

Author: AntoLC

src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts

@@ -77,7 +77,7 @@ test.describe.serial('Language', () => {
     page,
     browserName,
   }) => {
-    await createDoc(page, 'doc-toolbar', browserName, 1);
+    await createDoc(page, 'doc-translations-slash', browserName, 1);
 
     const header = page.locator('header').first();
     const editor = page.locator('.ProseMirror');

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

@@ -1,9 +1,4 @@
 import { useBlockNoteEditor, useComponentsContext } from '@blocknote/react';
-import {
-  AIMenu as AIMenuDefault,
-  getAIExtension,
-  getDefaultAIMenuItems,
-} from '@blocknote/xl-ai';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
@@ -18,6 +13,12 @@ import {
   DocsStyleSchema,
 } from '../../types';
 
+import {
+  AIMenuDefault,
+  getAIExtension,
+  getDefaultAIMenuItems,
+} from './libAGPL';
+
 export function AIMenu() {
   return (
     <AIMenuDefault

src/frontend/apps/impress/src/features/docs/doc-editor/components/AI/index.ts

@@ -1,2 +1,30 @@
-export * from './AIUI';
-export * from './useAI';
+import dynamic from 'next/dynamic';
+import { FC } from 'react';
+
+export { useAI } from './useAI';
+export * from './useModuleAI';
+
+const AIMenuController = dynamic(() =>
+  process.env.NEXT_PUBLIC_PUBLISH_AS_MIT === 'false'
+    ? import('./libAGPL').then((mod) => mod.AIMenuController)
+    : Promise.resolve(() => null),
+);
+
+const AIToolbarButton = dynamic(() =>
+  process.env.NEXT_PUBLIC_PUBLISH_AS_MIT === 'false'
+    ? import('./AIUI').then((mod) => mod.AIToolbarButton)
+    : Promise.resolve(() => null),
+);
+
+const AIMenu = dynamic(() =>
+  process.env.NEXT_PUBLIC_PUBLISH_AS_MIT === 'false'
+    ? import('./AIUI').then((mod) => mod.AIMenu)
+    : Promise.resolve(() => null),
+) as FC<unknown>;
+
+const modGetAISlashMenuItems =
+  process.env.NEXT_PUBLIC_PUBLISH_AS_MIT === 'false'
+    ? import('./libAGPL').then((mod) => mod.getAISlashMenuItems)
+    : Promise.resolve(null);
+
+export { AIMenu, AIMenuController, AIToolbarButton, modGetAISlashMenuItems };

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

@@ -0,0 +1,12 @@
+export {
+  AIMenu as AIMenuDefault,
+  AIMenuController,
+  createAIExtension,
+  createBlockNoteAIClient,
+  getAIExtension,
+  getAISlashMenuItems,
+  getDefaultAIMenuItems,
+  llmFormats,
+} from '@blocknote/xl-ai';
+export * as localesAI from '@blocknote/xl-ai/locales';
+import '@blocknote/xl-ai/style.css';

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

@@ -1,16 +1,13 @@
 import { createOpenAI } from '@ai-sdk/openai';
-import {
-  createAIExtension,
-  createBlockNoteAIClient,
-  llmFormats,
-} from '@blocknote/xl-ai';
 import { CoreMessage } from 'ai';
 import { useMemo } from 'react';
 
 import { fetchAPI } from '@/api';
 import { useConfig } from '@/core';
 import { Doc } from '@/docs/doc-management';
 
+import { useModuleAI } from './useModuleAI';
+
 const systemPrompts: Record<
   'add-assistant' | 'add-formatting' | 'add-edit-instruction',
   CoreMessage
@@ -39,11 +36,6 @@ const userPrompts: Record<string, string> = {
     'Summarize the selected text into a concise paragraph. Add a small summarize title above the text.',
 };
 
-const client = createBlockNoteAIClient({
-  baseURL: ``,
-  apiKey: '',
-});
-
 /**
  * Custom implementation of the PromptBuilder that allows for using predefined prompts.
  *
@@ -52,14 +44,22 @@ const client = createBlockNoteAIClient({
  */
 export const useAI = (docId: Doc['id']) => {
   const conf = useConfig().data;
+  const modules = useModuleAI();
 
   return useMemo(() => {
-    if (!conf?.AI_MODEL) {
-      return null;
+    if (!modules || !conf?.AI_MODEL) {
+      return;
     }
 
+    const { llmFormats, createAIExtension, createBlockNoteAIClient } = modules;
+
+    const clientAI = createBlockNoteAIClient({
+      baseURL: ``,
+      apiKey: '',
+    });
+
     const openai = createOpenAI({
-      ...client.getProviderSettings('openai'),
+      ...clientAI.getProviderSettings('openai'),
       fetch: (input, init) => {
         // Create a new headers object without the Authorization header
         const headers = new Headers(init?.headers);
@@ -76,7 +76,7 @@ export const useAI = (docId: Doc['id']) => {
     const extension = createAIExtension({
       stream: false,
       model,
-      agentCursor: conf?.AI_BOT,
+      agentCursor: conf.AI_BOT,
       // Create a custom promptBuilder that extends the default one
       promptBuilder: async (editor, opts): Promise<Array<CoreMessage>> => {
         const defaultPromptBuilder = llmFormats.html.defaultPromptBuilder;
@@ -155,5 +155,5 @@ export const useAI = (docId: Doc['id']) => {
     });
 
     return extension;
-  }, [conf?.AI_BOT, conf?.AI_MODEL, docId]);
+  }, [conf?.AI_BOT, conf?.AI_MODEL, docId, modules]);
 };

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

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const modulesAGPL =
+  process.env.NEXT_PUBLIC_PUBLISH_AS_MIT === 'false'
+    ? import('./libAGPL')
+    : Promise.resolve(null);
+
+export const useModuleAI = () => {
+  const [modules, setModules] = useState<Awaited<typeof modulesAGPL>>();
+
+  useEffect(() => {
+    const resolveModule = async () => {
+      const resolvedModules = await modulesAGPL;
+      if (!resolvedModules) {
+        return;
+      }
+      setModules(resolvedModules);
+    };
+    void resolveModule();
+  }, []);
+
+  return modules;
+};
+
+export const useModuleDictionnaryAI = () => {
+  const { i18n } = useTranslation();
+  const lang = i18n.resolvedLanguage;
+
+  const [dictionary, setDictionary] = useState<{
+    ai?: unknown;
+  }>();
+
+  useEffect(() => {
+    const resolveModule = async () => {
+      const resolvedModules = await modulesAGPL;
+      if (!resolvedModules) {
+        return;
+      }
+
+      const { localesAI } = resolvedModules;
+
+      setDictionary({
+        ai: localesAI[lang as keyof typeof localesAI],
+      });
+    };
+
+    void resolveModule();
+  }, [lang]);
+
+  return dictionary;
+};

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

@@ -5,13 +5,9 @@ import {
   withPageBreak,
 } from '@blocknote/core';
 import '@blocknote/core/fonts/inter.css';
-import * as locales from '@blocknote/core/locales';
 import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
 import { useCreateBlockNote } from '@blocknote/react';
-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';
@@ -22,13 +18,14 @@ import { Doc, useIsCollaborativeEditable } from '@/docs/doc-management';
 import { useAuth } from '@/features/auth';
 
 import { useHeadings, useUploadFile, useUploadStatus } from '../hook/';
+import { useDictionary } from '../hook/useDictionary';
 import useSaveDoc from '../hook/useSaveDoc';
 import { useEditorStore } from '../stores';
 import { cssEditor } from '../styles';
 import { DocsBlockNoteEditor } from '../types';
 import { randomColor } from '../utils';
 
-import { AIMenu, useAI } from './AI';
+import { AIMenu, AIMenuController, useAI } from './AI';
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
 import { CalloutBlock, DividerBlock } from './custom-blocks';
@@ -57,8 +54,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   const readOnly = !doc.abilities.partial_update || !isEditable || isLoading;
 
   useSaveDoc(doc.id, provider.document, !readOnly);
-  const { i18n } = useTranslation();
-  const lang = i18n.resolvedLanguage;
+  const dictionary = useDictionary();
 
   const { uploadFile, errorAttachment } = useUploadFile(doc.id);
   const aiExtension = useAI(doc.id);
@@ -120,7 +116,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
         },
         showCursorLabels: showCursorLabels as 'always' | 'activity',
       },
-      dictionary: { ...locales[lang as keyof typeof locales], ai: aiEn },
+      dictionary,
       extensions: aiExtension ? [aiExtension] : [],
       tables: {
         splitCells: true,
@@ -131,7 +127,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
       uploadFile,
       schema: blockNoteSchema,
     },
-    [collabName, lang, provider, uploadFile],
+    [aiExtension, collabName, dictionary, provider, uploadFile],
   );
 
   useHeadings(editor);

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

@@ -6,14 +6,14 @@ import {
   useBlockNoteEditor,
   useDictionary,
 } from '@blocknote/react';
-import { getAISlashMenuItems } from '@blocknote/xl-ai';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useConfig } from '@/core';
 
 import { DocsBlockSchema } from '../types';
 
+import { modGetAISlashMenuItems } from './AI';
 import {
   getCalloutReactSlashMenuItems,
   getDividerReactSlashMenuItems,
@@ -26,19 +26,24 @@ export const BlockNoteSuggestionMenu = () => {
   const { data: conf } = useConfig();
 
   const getSlashMenuItems = useMemo(() => {
-    return async (query: string) =>
-      Promise.resolve(
+    return async (query: string) => {
+      const getAISlashMenuItems = await modGetAISlashMenuItems;
+
+      return Promise.resolve(
         filterSuggestionItems(
           combineByGroup(
             getDefaultReactSlashMenuItems(editor),
             getPageBreakReactSlashMenuItems(editor),
             getCalloutReactSlashMenuItems(editor, t, basicBlocksName),
             getDividerReactSlashMenuItems(editor, t, basicBlocksName),
-            conf?.AI_FEATURE_ENABLED ? getAISlashMenuItems(editor) : [],
+            conf?.AI_FEATURE_ENABLED && getAISlashMenuItems
+              ? getAISlashMenuItems(editor)
+              : [],
           ),
           query,
         ),
       );
+    };
   }, [basicBlocksName, editor, t, conf?.AI_FEATURE_ENABLED]);
 
   return (

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

@@ -0,0 +1,30 @@
+import * as locales from '@blocknote/core/locales';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useModuleDictionnaryAI } from '../components/AI';
+
+export const useDictionary = () => {
+  const { i18n } = useTranslation();
+  const lang = i18n.resolvedLanguage;
+  const aiDictionary = useModuleDictionnaryAI();
+  const [dictionary, setDictionary] = useState(() => ({
+    ...locales[lang as keyof typeof locales],
+  }));
+
+  useEffect(() => {
+    const dictionary = locales[lang as keyof typeof locales];
+
+    if (!aiDictionary) {
+      setDictionary(dictionary);
+      return;
+    }
+
+    setDictionary({
+      ...dictionary,
+      ...aiDictionary,
+    });
+  }, [aiDictionary, lang]);
+
+  return dictionary;
+};