diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/assets/wand_stars.svg b/src/frontend/apps/impress/src/features/docs/doc-editor/assets/wand_stars.svg new file mode 100644 index 00000000..743b871a --- /dev/null +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/assets/wand_stars.svg @@ -0,0 +1,6 @@ + + + diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/AI/AIUI.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/AI/AIUI.tsx index 8d814961..be6e784a 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/AI/AIUI.tsx +++ b/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 ( - { - if (aiResponseStatus === 'user-input') { - if (editor.getSelection()) { - const aiMenuItems = getDefaultAIMenuItems( - editor, - aiResponseStatus, - ).filter((item) => ['simplify'].indexOf(item.key) === -1); + <> + + { + 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: , + }; + } else if (item.key === 'translate') { + return { + ...item, + icon: ( + + ), + }; + } + + 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: ( + + ), + }; + } + return item; + }, ); - - return aiMenuItems; } - } - return getDefaultAIMenuItems(editor, aiResponseStatus); - }} - /> + return getDefaultAIMenuItems(editor, aiResponseStatus); + }} + /> + ); }