AI Menu

1'use client';
2 
3import * as React from 'react';
4 
5import {
6  AIChatPlugin,
7  AIPlugin,
8  useEditorChat,
9  useLastAssistantMessage,
10} from '@platejs/ai/react';
11import { getTransientCommentKey } from '@platejs/comment';
12import { BlockSelectionPlugin, useIsSelecting } from '@platejs/selection/react';
13import { getTransientSuggestionKey } from '@platejs/suggestion';
14import { Command as CommandPrimitive } from 'cmdk';
15import {
16  Album,
17  BadgeHelp,
18  BookOpenCheck,
19  Check,
20  CornerUpLeft,
21  FeatherIcon,
22  ListEnd,
23  ListMinus,
24  ListPlus,
25  Loader2Icon,
26  PauseIcon,
27  PenLine,
28  SmileIcon,
29  Wand,
30  X,
31} from 'lucide-react';
32import {
33  type NodeEntry,
34  type SlateEditor,
35  isHotkey,
36  KEYS,
37  NodeApi,
38  TextApi,
39} from 'platejs';
40import {
41  useEditorPlugin,
42  useFocusedLast,
43  useHotkeys,
44  usePluginOption,
45} from 'platejs/react';
46import { type PlateEditor, useEditorRef } from 'platejs/react';
47 
48import { Button } from '@/components/ui/button';
49import {
50  Command,
51  CommandGroup,
52  CommandItem,
53  CommandList,
54} from '@/components/ui/command';
55import {
56  Popover,
57  PopoverAnchor,
58  PopoverContent,
59} from '@/components/ui/popover';
60import { cn } from '@/lib/utils';
61import { commentPlugin } from '@/registry/components/editor/plugins/comment-kit';
62 
63import { AIChatEditor } from './ai-chat-editor';
64 
65export function AIMenu() {
66  const { api, editor } = useEditorPlugin(AIChatPlugin);
67  const mode = usePluginOption(AIChatPlugin, 'mode');
68  const toolName = usePluginOption(AIChatPlugin, 'toolName');
69 
70  const streaming = usePluginOption(AIChatPlugin, 'streaming');
71  const isSelecting = useIsSelecting();
72  const isFocusedLast = useFocusedLast();
73  const open = usePluginOption(AIChatPlugin, 'open') && isFocusedLast;
74  const [value, setValue] = React.useState('');
75 
76  const [input, setInput] = React.useState('');
77 
78  const chat = usePluginOption(AIChatPlugin, 'chat');
79 
80  const { messages, status } = chat;
81  const [anchorElement, setAnchorElement] = React.useState<HTMLElement | null>(
82    null
83  );
84 
85  const content = useLastAssistantMessage()?.parts.find(
86    (part) => part.type === 'text'
87  )?.text;
88 
89  React.useEffect(() => {
90    if (!streaming) return;
91 
92    const anchorEntry = api.aiChat.node({ anchor: true });
93    if (!anchorEntry) return;
94 
95    const anchorDom = editor.api.toDOMNode(anchorEntry[0])!;
96    // eslint-disable-next-line react-hooks/set-state-in-effect -- Position the popover from editor DOM while the edit stream is active.
97    setAnchorElement(anchorDom);
98// … truncated