From 3883d80ccb186da105062305114bc7deab88b011 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 13 Sep 2024 13:51:34 +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      |  1 +
 .../docs/doc-editor/components/AIButton.tsx   | 73 ++++++++++++++++---
 2 files changed, 64 insertions(+), 10 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 6ce392b5..2043e32a 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
@@ -3,6 +3,7 @@ import { useMutation } from '@tanstack/react-query';
 import { APIError, errorCauses, fetchAPI } from '@/api';
 
 export type AIActions =
+  | 'prompt'
   | 'rephrase'
   | 'summarize'
   | 'translate'
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 9e4ab6f3..09cd9606 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
@@ -3,9 +3,9 @@ import {
   useComponentsContext,
   useSelectedBlocks,
 } from '@blocknote/react';
-import { useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 
-import { Box, BoxButton } from '@/components';
+import { Box, BoxButton, Text } from '@/components';
 
 import { Doc } from '../../doc-management';
 import { AIActions, useAIRewrite } from '../api/useAIRewrite';
@@ -42,27 +42,80 @@ export function AIGroupButton({ doc }: AIGroupButtonProps) {
       <Components.Generic.Menu.Dropdown className="bn-menu-dropdown bn-color-picker-dropdown">
         {[
           {
-            label: 'Rephrase',
+            label: (
+              <>
+                <Text $isMaterialIcon $size="m">
+                  text_fields
+                </Text>{' '}
+                Use as prompt
+              </>
+            ),
+            action: 'prompt',
+          },
+          {
+            label: (
+              <>
+                <Text $isMaterialIcon $size="m">
+                  refresh
+                </Text>{' '}
+                Rephrase
+              </>
+            ),
             action: 'rephrase',
           },
           {
-            label: 'Summarize',
+            label: (
+              <>
+                <Text $isMaterialIcon $size="m">
+                  summarize
+                </Text>{' '}
+                Summarize
+              </>
+            ),
             action: 'summarize',
           },
           {
-            label: 'Correct',
+            label: (
+              <>
+                <Text $isMaterialIcon $size="m">
+                  check
+                </Text>{' '}
+                Correct
+              </>
+            ),
             action: 'correct',
           },
           {
-            label: 'Translate to French',
+            label: (
+              <>
+                <Text $isMaterialIcon $size="m">
+                  translate
+                </Text>{' '}
+                FR
+              </>
+            ),
             action: 'translate_fr',
           },
           {
-            label: 'Translate to English',
+            label: (
+              <>
+                <Text $isMaterialIcon $size="m">
+                  translate
+                </Text>{' '}
+                EN
+              </>
+            ),
             action: 'translate_en',
           },
           {
-            label: 'Translate to German',
+            label: (
+              <>
+                <Text $isMaterialIcon $size="m">
+                  translate
+                </Text>{' '}
+                DE
+              </>
+            ),
             action: 'translate_de',
           },
         ].map(({ label, action }) => (
@@ -80,7 +133,7 @@ export function AIGroupButton({ doc }: AIGroupButtonProps) {
 
 interface AIButtonProps {
   action: AIActions;
-  label: string;
+  label: ReactNode;
   docId: Doc['id'];
 }
 
@@ -112,7 +165,7 @@ const AIButton = ({ action, label, docId }: AIButtonProps) => {
       $hasTransition
       $radius="6px"
       $width="100%"
-      $justify="center"
+      $justify="flex-start"
       $align="center"
       $gap="1rem"
       $css="&:hover{background-color: #f2f8ff;}text-transform: capitalize!important;"