electron-rare/docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Anthony LC
2024-09-13 13:51:34 +02:00
parent 08a1e3c0e4
commit 3883d80ccb
2 changed files with 64 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/apps/impress/src/features/docs/doc-editor/api/useAIRewrite.tsx
+1
View File
@@ -3,6 +3,7 @@ import { useMutation } from '@tanstack/react-query';
import { APIError, errorCauses, fetchAPI } from '@/api';
export type AIActions =
| 'prompt'
| 'rephrase'
| 'summarize'
| 'translate'
src/frontend/apps/impress/src/features/docs/doc-editor/components/AIButton.tsx
+63 -10
View File
@@ -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;"