fixup! ✨(frontend) add ai button to blocknote toolbar

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

@@ -5,34 +5,19 @@ import {
 } from '@blocknote/react';
 import { useMemo } from 'react';
 
-import { BoxButton } from '@/components';
+import { Box, BoxButton } from '@/components';
 
 import { Doc } from '../../doc-management';
 import { AIActions, useAIRewrite } from '../api/useAIRewrite';
 
-interface AIButtonProps {
+interface AIGroupButtonProps {
   doc: Doc;
 }
 
-export function AIButton({ doc }: AIButtonProps) {
+export function AIGroupButton({ doc }: AIGroupButtonProps) {
   const editor = useBlockNoteEditor();
   const Components = useComponentsContext();
   const selectedBlocks = useSelectedBlocks(editor);
-  const { mutateAsync: requestAI } = useAIRewrite();
-
-  const handleRephraseAI = async (action: AIActions) => {
-    const textCursorPosition = editor.getSelectedText();
-    const newText = await requestAI({
-      docId: doc.id,
-      text: textCursorPosition,
-      action,
-    });
-
-    editor.insertInlineContent([
-      newText,
-      //{ type: 'text', text: 'World', styles: { bold: true } },
-    ]);
-  };
 
   const show = useMemo(() => {
     return !!selectedBlocks.find((block) => block.content !== undefined);
@@ -81,21 +66,60 @@ export function AIButton({ doc }: AIButtonProps) {
             action: 'translate_de',
           },
         ].map(({ label, action }) => (
-          <BoxButton
+          <AIButton
             key={`button-${action}`}
-            $padding={{ horizontal: 'tiny', vertical: 'tiny' }}
-            $margin="auto"
-            onClick={() => void handleRephraseAI(action as AIActions)}
-            $hasTransition
-            $radius="6px"
-            $width="100%"
-            $align="center"
-            $css="&:hover{background-color: #f2f8ff;}text-transform: capitalize!important;"
-          >
-            {label}
-          </BoxButton>
+            action={action as AIActions}
+            label={label}
+            docId={doc.id}
+          />
         ))}
       </Components.Generic.Menu.Dropdown>
     </Components.Generic.Menu.Root>
   );
 }
+
+interface AIButtonProps {
+  action: AIActions;
+  label: string;
+  docId: Doc['id'];
+}
+
+const AIButton = ({ action, label, docId }: AIButtonProps) => {
+  const editor = useBlockNoteEditor();
+  const { mutateAsync: requestAI, isPending } = useAIRewrite();
+
+  const handleRephraseAI = async (action: AIActions) => {
+    const textCursorPosition = editor.getSelectedText();
+
+    const newText = await requestAI({
+      docId,
+      text: textCursorPosition,
+      action,
+    });
+
+    editor.insertInlineContent([
+      newText,
+      //{ type: 'text', text: 'World', styles: { bold: true } },
+    ]);
+  };
+
+  return (
+    <BoxButton
+      key={`button-${action}`}
+      $padding={{ horizontal: 'tiny', vertical: 'tiny' }}
+      $margin="auto"
+      onClick={() => void handleRephraseAI(action)}
+      $hasTransition
+      $radius="6px"
+      $width="100%"
+      $justify="center"
+      $align="center"
+      $gap="1rem"
+      $css="&:hover{background-color: #f2f8ff;}text-transform: capitalize!important;"
+      $direction="row"
+    >
+      {label}
+      {isPending && <Box className="loader" />}
+    </BoxButton>
+  );
+};

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

@@ -19,7 +19,7 @@ import React, { useMemo } from 'react';
 import { Doc } from '../../doc-management';
 
 // import { AIButton } from './AIButton';
-import { AIButton } from './AIButton';
+import { AIGroupButton } from './AIButton';
 
 interface BlockNoteToolbarProps {
   doc: Doc;
@@ -33,7 +33,7 @@ export const BlockNoteToolbar = ({ doc }: BlockNoteToolbarProps) => {
           <BlockTypeSelect key="blockTypeSelect" />
 
           {/* Extra button to convert from markdown to json */}
-          <AIButton key="AIButton" doc={doc} />
+          <AIGroupButton key="AIButton" doc={doc} />
 
           {/* Extra button to convert from markdown to json */}
           <MarkdownButton key="customButton" />

src/frontend/apps/impress/src/pages/globals.css

@@ -41,3 +41,17 @@ main ::-webkit-scrollbar-thumb:hover,
   cursor: pointer;
   outline: inherit;
 }
+
+.loader {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 71%;
+  width: 20px;
+  height: 20px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}