🛂(frontend) bind ai_proxy abilities with AI feature

Bind ai_proxy abilities to the AI feature.
If ai_proxy is false, the AI feature will
not be available.

Author: AntoLC

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

@@ -389,6 +389,53 @@ test.describe('Doc Editor', () => {
     await expect(page.getByText('Write with AI')).toBeVisible();
   });
 
+  test(`it checks ai_proxy ability`, async ({ page, browserName }) => {
+    await mockedDocument(page, {
+      accesses: [
+        {
+          id: 'b0df4343-c8bd-4c20-9ff6-fbf94fc94egg',
+          role: 'owner',
+          user: {
+            email: '[email protected]',
+            full_name: 'Super Owner',
+          },
+        },
+      ],
+      abilities: {
+        destroy: true, // Means owner
+        link_configuration: true,
+        ai_proxy: false,
+        accesses_manage: true,
+        accesses_view: true,
+        update: true,
+        partial_update: true,
+        retrieve: true,
+      },
+      link_reach: 'restricted',
+      link_role: 'editor',
+      created_at: '2021-09-01T09:00:00Z',
+      title: '',
+    });
+
+    const [randomDoc] = await createDoc(
+      page,
+      'doc-editor-ai-proxy',
+      browserName,
+      1,
+    );
+
+    await verifyDocName(page, randomDoc);
+
+    await page.locator('.bn-block-outer').last().fill('Hello World');
+
+    const editor = page.locator('.ProseMirror');
+    await editor.getByText('Hello').selectText();
+
+    await expect(page.getByRole('button', { name: 'Ask AI' })).toBeHidden();
+    await page.locator('.bn-block-outer').last().fill('/');
+    await expect(page.getByText('Write with AI')).toBeHidden();
+  });
+
   test('it downloads unsafe files', async ({ page, browserName }) => {
     const [randomDoc] = await createDoc(page, 'doc-editor', browserName, 1);
 

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

@@ -42,12 +42,13 @@ const userPrompts: Record<string, string> = {
  * This extends the default HTML promptBuilder from BlockNote to support custom prompt templates.
  * Custom prompts can be invoked using the pattern !promptName in the AI input field.
  */
-export const useAI = (docId: Doc['id']) => {
+export const useAI = (doc: Doc) => {
   const conf = useConfig().data;
   const modules = useModuleAI();
+  const aiAllowed = !!(conf?.AI_FEATURE_ENABLED && doc.abilities?.ai_proxy);
 
   return useMemo(() => {
-    if (!modules || !conf?.AI_MODEL) {
+    if (!aiAllowed || !modules || !conf?.AI_MODEL) {
       return;
     }
 
@@ -65,7 +66,7 @@ export const useAI = (docId: Doc['id']) => {
         const headers = new Headers(init?.headers);
         headers.delete('Authorization');
 
-        return fetchAPI(`documents/${docId}/ai-proxy/`, {
+        return fetchAPI(`documents/${doc.id}/ai-proxy/`, {
           ...init,
           headers,
         });
@@ -155,5 +156,5 @@ export const useAI = (docId: Doc['id']) => {
     });
 
     return extension;
-  }, [conf?.AI_BOT, conf?.AI_MODEL, docId, modules]);
+  }, [aiAllowed, conf?.AI_BOT, conf?.AI_MODEL, doc.id, modules]);
 };

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

@@ -57,7 +57,8 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   const dictionary = useDictionary();
 
   const { uploadFile, errorAttachment } = useUploadFile(doc.id);
-  const aiExtension = useAI(doc.id);
+  const aiExtension = useAI(doc);
+  const aiAllowed = !!aiExtension;
 
   const collabName = readOnly
     ? 'Reader'
@@ -165,9 +166,9 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
         editable={!readOnly}
         theme="light"
       >
-        {aiExtension && <AIMenuController aiMenu={AIMenu} />}
-        <BlockNoteSuggestionMenu />
-        <BlockNoteToolbar />
+        {aiAllowed && <AIMenuController aiMenu={AIMenu} />}
+        <BlockNoteSuggestionMenu aiAllowed={aiAllowed} />
+        <BlockNoteToolbar aiAllowed={aiAllowed} />
       </BlockNoteView>
     </Box>
   );

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

@@ -9,8 +9,6 @@ import {
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useConfig } from '@/core';
-
 import { DocsBlockSchema } from '../types';
 
 import { modGetAISlashMenuItems } from './AI';
@@ -19,11 +17,14 @@ import {
   getDividerReactSlashMenuItems,
 } from './custom-blocks';
 
-export const BlockNoteSuggestionMenu = () => {
+export const BlockNoteSuggestionMenu = ({
+  aiAllowed,
+}: {
+  aiAllowed: boolean;
+}) => {
   const editor = useBlockNoteEditor<DocsBlockSchema>();
   const { t } = useTranslation();
   const basicBlocksName = useDictionary().slash_menu.page_break.group;
-  const { data: conf } = useConfig();
 
   const getSlashMenuItems = useMemo(() => {
     return async (query: string) => {
@@ -36,15 +37,13 @@ export const BlockNoteSuggestionMenu = () => {
             getPageBreakReactSlashMenuItems(editor),
             getCalloutReactSlashMenuItems(editor, t, basicBlocksName),
             getDividerReactSlashMenuItems(editor, t, basicBlocksName),
-            conf?.AI_FEATURE_ENABLED && getAISlashMenuItems
-              ? getAISlashMenuItems(editor)
-              : [],
+            aiAllowed && getAISlashMenuItems ? getAISlashMenuItems(editor) : [],
           ),
           query,
         ),
       );
     };
-  }, [basicBlocksName, editor, t, conf?.AI_FEATURE_ENABLED]);
+  }, [basicBlocksName, editor, t, aiAllowed]);
 
   return (
     <SuggestionMenuController

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

@@ -8,21 +8,18 @@ import {
 import React, { JSX, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useConfig } from '@/core/config/api';
-
 import { AIToolbarButton } from '../AI';
 import { getCalloutFormattingToolbarItems } from '../custom-blocks';
 
 import { FileDownloadButton } from './FileDownloadButton';
 import { MarkdownButton } from './MarkdownButton';
 import { ModalConfirmDownloadUnsafe } from './ModalConfirmDownloadUnsafe';
 
-export const BlockNoteToolbar = () => {
+export const BlockNoteToolbar = ({ aiAllowed }: { aiAllowed: boolean }) => {
   const dict = useDictionary();
   const [confirmOpen, setIsConfirmOpen] = useState(false);
   const [onConfirm, setOnConfirm] = useState<() => void | Promise<void>>();
   const { t } = useTranslation();
-  const { data: conf } = useConfig();
 
   const toolbarItems = useMemo(() => {
     const toolbarItems = getFormattingToolbarItems([
@@ -56,15 +53,15 @@ export const BlockNoteToolbar = () => {
   const formattingToolbar = useCallback(() => {
     return (
       <FormattingToolbar>
-        {conf?.AI_FEATURE_ENABLED && <AIToolbarButton />}
+        {aiAllowed && <AIToolbarButton />}
 
         {toolbarItems}
 
         {/* Extra button to convert from markdown to json */}
         <MarkdownButton key="customButton" />
       </FormattingToolbar>
     );
-  }, [toolbarItems, conf?.AI_FEATURE_ENABLED]);
+  }, [toolbarItems, aiAllowed]);
 
   return (
     <>