aboutsummaryrefslogtreecommitdiff
path: root/apps/web/components/editor/generative/ai-completion-command.tsx
blob: 7fb64a0b360a958e10f5bd6b131071be67249de7 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import { CommandGroup, CommandItem, CommandSeparator } from "../ui/command";
import { useEditor } from "novel";
import { Check, TextQuote, TrashIcon } from "lucide-react";

const AICompletionCommands = ({
	completion,
	onDiscard,
}: {
	completion: string;
	onDiscard: () => void;
}) => {
	const { editor } = useEditor();
	return (
		<>
			<CommandGroup>
				<CommandItem
					className="gap-2 px-4"
					value="replace"
					onSelect={() => {
						const selection = editor?.view.state.selection;

						if (!selection) return;

						editor
							?.chain()
							.focus()
							.insertContentAt(
								{
									from: selection.from,
									to: selection.to,
								},
								completion,
							)
							.run();
					}}
				>
					<Check className="h-4 w-4 text-muted-foreground" />
					Replace selection
				</CommandItem>
				<CommandItem
					className="gap-2 px-4"
					value="insert"
					onSelect={() => {
						const selection = editor?.view.state.selection;
						if (!selection) return;
						editor
							?.chain()
							.focus()
							.insertContentAt(selection.to + 1, completion)
							.run();
					}}
				>
					<TextQuote className="h-4 w-4 text-muted-foreground" />
					Insert below
				</CommandItem>
			</CommandGroup>
			<CommandSeparator />

			<CommandGroup>
				<CommandItem onSelect={onDiscard} value="thrash" className="gap-2 px-4">
					<TrashIcon className="h-4 w-4 text-muted-foreground" />
					Discard
				</CommandItem>
			</CommandGroup>
		</>
	);
};

export default AICompletionCommands;