From 77282907cb29e27457b0659f458a90b29882f15c Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Thu, 12 Sep 2024 14:36:18 +0200
Subject: [PATCH] =?UTF-8?q?fixup!=20=E2=9C=A8(frontend)=20add=20ai=20butto?=
 =?UTF-8?q?n=20to=20blocknote=20toolbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/doc-editor/api/useAIRewrite.tsx      |  4 +-
 .../docs/doc-editor/components/AIButton.tsx   | 58 ++++++++++++-------
 .../components/BlockNoteToolbar.tsx           |  1 +
 3 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/api/useAIRewrite.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/api/useAIRewrite.tsx
index 9543ecc9..7506d033 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/api/useAIRewrite.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/api/useAIRewrite.tsx
@@ -2,10 +2,12 @@ import { useMutation } from '@tanstack/react-query';
 
 import { APIError, errorCauses, fetchAPI } from '@/api';
 
+export type AIActions = 'rephrase' | 'summarize' | 'translate' | 'correct';
+
 export type DocAIParams = {
   docId: string;
   text: string;
-  action: 'rephrase' | 'summarize';
+  action: AIActions;
 };
 
 export type DocAIResponse = string;
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/AIButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/AIButton.tsx
index 061b50b4..79bf9253 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/AIButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/AIButton.tsx
@@ -7,16 +7,15 @@ import {
 } from '@blocknote/react';
 import { useMemo } from 'react';
 
+import { BoxButton } from '@/components';
+
 import { Doc } from '../../doc-management';
-import { useAIRewrite } from '../api/useAIRewrite';
+import { AIActions, useAIRewrite } from '../api/useAIRewrite';
 
 interface AIButtonProps {
   doc: Doc;
 }
 
-/**
- * Custom Formatting Toolbar Button to convert markdown to json.
- */
 export function AIButton({ doc }: AIButtonProps) {
   const editor = useBlockNoteEditor();
   const Components = useComponentsContext();
@@ -29,22 +28,18 @@ export function AIButton({ doc }: AIButtonProps) {
   }, editor);
   const { mutateAsync: requestAI } = useAIRewrite();
 
-  const handleRephraseAI = async () => {
+  const handleRephraseAI = async (action: AIActions) => {
     const textCursorPosition = editor.getSelectedText();
     const newText = await requestAI({
       docId: doc.id,
       text: textCursorPosition,
-      action: 'rephrase',
+      action,
     });
 
-    editor.replaceBlocks(
-      [selectedBlocks[0]],
-      [
-        {
-          content: newText,
-        },
-      ],
-    );
+    editor.insertInlineContent([
+      newText,
+      //{ type: 'text', text: 'World', styles: { bold: true } },
+    ]);
   };
 
   const show = useMemo(() => {
@@ -56,11 +51,34 @@ export function AIButton({ doc }: AIButtonProps) {
   }
 
   return (
-    <Components.FormattingToolbar.Button
-      mainTooltip="Rephrase with AI"
-      onClick={() => void handleRephraseAI()}
-    >
-      Rephrase
-    </Components.FormattingToolbar.Button>
+    <Components.Generic.Menu.Root>
+      <Components.Generic.Menu.Trigger>
+        <Components.FormattingToolbar.Button
+          className="bn-button"
+          data-test="colors"
+          label="AI"
+          mainTooltip="AI Actions"
+        >
+          AI
+        </Components.FormattingToolbar.Button>
+      </Components.Generic.Menu.Trigger>
+      <Components.Generic.Menu.Dropdown className="bn-menu-dropdown bn-color-picker-dropdown">
+        {['rephrase', 'summarize', 'correct'].map((action) => (
+          <BoxButton
+            key={`button-${action}`}
+            $padding={{ horizontal: 'small', vertical: 'tiny' }}
+            $margin="auto"
+            onClick={() => void handleRephraseAI('rephrase')}
+            $hasTransition
+            $radius="6px"
+            $width="98%"
+            $align="center"
+            $css="&:hover{background-color: #f2f8ff;}text-transform: capitalize!important;"
+          >
+            {action}
+          </BoxButton>
+        ))}
+      </Components.Generic.Menu.Dropdown>
+    </Components.Generic.Menu.Root>
   );
 }
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolbar.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolbar.tsx
index 79a03d3f..3a16ea55 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolbar.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolbar.tsx
@@ -18,6 +18,7 @@ import React, { useMemo } from 'react';
 
 import { Doc } from '../../doc-management';
 
+// import { AIButton } from './AIButton';
 import { AIButton } from './AIButton';
 
 interface BlockNoteToolbarProps {