fixup! ✨(frontend) integrate new Blocknote AI feature

src/frontend/apps/impress/src/features/docs/doc-editor/assets/wand_stars.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M4.4 21L3 19.6L10.525 12.05L6 10.925L10.95 7.85L10.525 2L15 5.775L20.4 3.575L18.225 9L22 13.45L16.15 13.05L13.05 18L11.925 13.475L4.4 21ZM5 8L3 6L5 4L7 6L5 8ZM13.875 12.925L15.075 10.95L17.4 11.125L15.9 9.35L16.775 7.2L14.625 8.075L12.85 6.6L13.025 8.9L11.05 10.125L13.3 10.675L13.875 12.925ZM18 21L16 19L18 17L20 19L18 21Z"
+    fill="#303030"
+  />
+</svg>

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

@@ -6,12 +6,13 @@ import {
 } from '@blocknote/xl-ai';
 import '@blocknote/xl-ai/style.css';
 import { useTranslation } from 'react-i18next';
-import { css } from 'styled-components';
+import { createGlobalStyle, css } from 'styled-components';
 
-import { Box, Text } from '@/components';
+import { Box, Icon, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 
 import IconAI from '../../assets/IconAI.svg';
+import IconWandStar from '../../assets/wand_stars.svg';
 import {
   DocsBlockNoteEditor,
   DocsBlockSchema,
@@ -19,34 +20,80 @@ import {
   DocsStyleSchema,
 } from '../../types';
 
+const AIMenuStyle = createGlobalStyle`
+  #ai-suggestion-menu .bn-suggestion-menu-item-small .bn-mt-suggestion-menu-item-section[data-position=left] svg {
+    height: 18px;
+    width: 18px;
+  }
+`;
+
 export function AIMenu() {
   return (
-    <AIMenuDefault
-      items={(editor: DocsBlockNoteEditor, aiResponseStatus) => {
-        if (aiResponseStatus === 'user-input') {
-          if (editor.getSelection()) {
-            const aiMenuItems = getDefaultAIMenuItems(
-              editor,
-              aiResponseStatus,
-            ).filter((item) => ['simplify'].indexOf(item.key) === -1);
+    <>
+      <AIMenuStyle />
+      <AIMenuDefault
+        items={(editor: DocsBlockNoteEditor, aiResponseStatus) => {
+          if (aiResponseStatus === 'user-input') {
+            let aiMenuItems = getDefaultAIMenuItems(editor, aiResponseStatus);
+
+            if (editor.getSelection()) {
+              aiMenuItems = aiMenuItems.filter(
+                (item) => ['simplify'].indexOf(item.key) === -1,
+              );
+
+              aiMenuItems = aiMenuItems.map((item) => {
+                if (item.key === 'improve_writing') {
+                  return {
+                    ...item,
+                    icon: <IconWandStar />,
+                  };
+                } else if (item.key === 'translate') {
+                  return {
+                    ...item,
+                    icon: (
+                      <Icon
+                        iconName="translate"
+                        $color="inherit"
+                        $size="18px"
+                      />
+                    ),
+                  };
+                }
+
+                return item;
+              });
+            } else {
+              aiMenuItems = aiMenuItems.filter(
+                (item) =>
+                  ['action_items', 'write_anything'].indexOf(item.key) === -1,
+              );
+            }
 
             return aiMenuItems;
-          } else {
-            const aiMenuItems = getDefaultAIMenuItems(
-              editor,
-              aiResponseStatus,
-            ).filter(
-              (item) =>
-                ['action_items', 'write_anything'].indexOf(item.key) === -1,
+          } else if (aiResponseStatus === 'user-reviewing') {
+            return getDefaultAIMenuItems(editor, aiResponseStatus).map(
+              (item) => {
+                if (item.key === 'accept') {
+                  return {
+                    ...item,
+                    icon: (
+                      <Icon
+                        iconName="check_circle"
+                        $color="inherit"
+                        $size="18px"
+                      />
+                    ),
+                  };
+                }
+                return item;
+              },
             );
-
-            return aiMenuItems;
           }
-        }
 
-        return getDefaultAIMenuItems(editor, aiResponseStatus);
-      }}
-    />
+          return getDefaultAIMenuItems(editor, aiResponseStatus);
+        }}
+      />
+    </>
   );
 }