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) { {[ { - label: 'Rephrase', + label: ( + <> + + text_fields + {' '} + Use as prompt + + ), + action: 'prompt', + }, + { + label: ( + <> + + refresh + {' '} + Rephrase + + ), action: 'rephrase', }, { - label: 'Summarize', + label: ( + <> + + summarize + {' '} + Summarize + + ), action: 'summarize', }, { - label: 'Correct', + label: ( + <> + + check + {' '} + Correct + + ), action: 'correct', }, { - label: 'Translate to French', + label: ( + <> + + translate + {' '} + FR + + ), action: 'translate_fr', }, { - label: 'Translate to English', + label: ( + <> + + translate + {' '} + EN + + ), action: 'translate_en', }, { - label: 'Translate to German', + label: ( + <> + + translate + {' '} + 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;"