✨(frontend) add ai blocknote feature

Add AI button to the editor toolbar.
We can use AI to generate content with our editor.
A list of predefined actions are available to use.

Author: AntoLC

CHANGELOG.md

@@ -11,6 +11,8 @@ and this project adheres to
 
 ## Added
 
+- ✨AI to doc editor #250
+- ✨(backend) allow uploading more types of attachments #309
 - ✨(frontend) add buttons to copy document to clipboard as HTML/Markdown #300
 
 ## Changed
@@ -22,9 +24,6 @@ and this project adheres to
 ## Fixed
 
 - 🐛(frontend) invalidate queries after removing user #336
-
-## Fixed
-
 - 🐛(backend) Fix dysfunctional permissions on document create #329
 
 ## [1.5.1] - 2024-10-10
@@ -37,7 +36,6 @@ and this project adheres to
 
 ## Added
 
-- ✨(backend) allow uploading more types of attachments #309
 - ✨(backend) add name fields to the user synchronized with OIDC #301
 - ✨(ci) add security scan #291
 - ♻️(frontend) Add versions #277

src/frontend/apps/e2e/__tests__/app-impress/common.ts

@@ -51,6 +51,7 @@ export const createDoc = async (
 
       await page.locator('.c__modal__backdrop').click({
         position: { x: 0, y: 0 },
+        force: true,
       });
 
       await expect(

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

@@ -181,4 +181,57 @@ test.describe('Doc Editor', () => {
       /http:\/\/localhost:8083\/media\/.*\/attachments\/.*.png/,
     );
   });
+
+  test('it checks the AI buttons', async ({ page, browserName }) => {
+    await page.route(/.*\/ai-translate\//, async (route) => {
+      const request = route.request();
+      if (request.method().includes('POST')) {
+        await route.fulfill({
+          json: {
+            answer: 'Bonjour le monde',
+          },
+        });
+      } else {
+        await route.continue();
+      }
+    });
+
+    await createDoc(page, 'doc-ai', browserName, 1);
+
+    await page.locator('.bn-block-outer').last().fill('Hello World');
+
+    const editor = page.locator('.ProseMirror');
+    await editor.getByText('Hello').dblclick();
+
+    await page.getByRole('button', { name: 'AI' }).click();
+
+    await expect(
+      page.getByRole('menuitem', { name: 'Use as prompt' }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('menuitem', { name: 'Rephrase' }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('menuitem', { name: 'Summarize' }),
+    ).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Correct' })).toBeVisible();
+    await expect(
+      page.getByRole('menuitem', { name: 'Language' }),
+    ).toBeVisible();
+
+    await page.getByRole('menuitem', { name: 'Language' }).hover();
+    await expect(
+      page.getByRole('menuitem', { name: 'English', exact: true }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('menuitem', { name: 'French', exact: true }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('menuitem', { name: 'German', exact: true }),
+    ).toBeVisible();
+
+    await page.getByRole('menuitem', { name: 'English', exact: true }).click();
+
+    await expect(editor.getByText('Bonjour le monde')).toBeVisible();
+  });
 });

src/frontend/apps/impress/src/api/APIError.ts

@@ -18,3 +18,7 @@ export class APIError<T = unknown> extends Error implements IAPIError<T> {
     this.data = data;
   }
 }
+
+export const isAPIError = (error: unknown): error is APIError => {
+  return error instanceof APIError;
+};

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

@@ -0,0 +1,3 @@
+export * from './useCreateDocUpload';
+export * from './useDocAITransform';
+export * from './useDocAITranslate';

src/frontend/apps/impress/src/features/docs/doc-editor/api/useDocAITransform.tsx

@@ -0,0 +1,46 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+
+export type AITransformActions =
+  | 'correct'
+  | 'prompt'
+  | 'rephrase'
+  | 'summarize';
+
+export type DocAITransform = {
+  docId: string;
+  text: string;
+  action: AITransformActions;
+};
+
+export type DocAITransformResponse = {
+  answer: string;
+};
+
+export const docAITransform = async ({
+  docId,
+  ...params
+}: DocAITransform): Promise<DocAITransformResponse> => {
+  const response = await fetchAPI(`documents/${docId}/ai-transform/`, {
+    method: 'POST',
+    body: JSON.stringify({
+      ...params,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to request ai transform',
+      await errorCauses(response),
+    );
+  }
+
+  return response.json() as Promise<DocAITransformResponse>;
+};
+
+export function useDocAITransform() {
+  return useMutation<DocAITransformResponse, APIError, DocAITransform>({
+    mutationFn: docAITransform,
+  });
+}

src/frontend/apps/impress/src/features/docs/doc-editor/api/useDocAITranslate.tsx

@@ -0,0 +1,40 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+
+export type DocAITranslate = {
+  docId: string;
+  text: string;
+  language: string;
+};
+
+export type DocAITranslateResponse = {
+  answer: string;
+};
+
+export const docAITranslate = async ({
+  docId,
+  ...params
+}: DocAITranslate): Promise<DocAITranslateResponse> => {
+  const response = await fetchAPI(`documents/${docId}/ai-translate/`, {
+    method: 'POST',
+    body: JSON.stringify({
+      ...params,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to request ai translate',
+      await errorCauses(response),
+    );
+  }
+
+  return response.json() as Promise<DocAITranslateResponse>;
+};
+
+export function useDocAITranslate() {
+  return useMutation<DocAITranslateResponse, APIError, DocAITranslate>({
+    mutationFn: docAITranslate,
+  });
+}