ai-kit

1'use client';
2 
3import cloneDeep from 'lodash/cloneDeep.js';
4import { BaseAIPlugin, withAIBatch } from '@platejs/ai';
5import {
6  AIChatPlugin,
7  AIPlugin,
8  applyAISuggestions,
9  getInsertPreviewStart,
10  streamInsertChunk,
11  useChatChunk,
12} from '@platejs/ai/react';
13import { ElementApi, getPluginType, KEYS, PathApi } from 'platejs';
14import { usePluginOption } from 'platejs/react';
15 
16import { AILoadingBar, AIMenu } from '@/registry/ui/ai-menu';
17import { AIAnchorElement, AILeaf } from '@/registry/ui/ai-node';
18 
19import { useChat } from '../use-chat';
20import { CursorOverlayKit } from './cursor-overlay-kit';
21import { MarkdownKit } from './markdown-kit';
22 
23export const aiChatPlugin = AIChatPlugin.extend({
24  options: {
25    chatOptions: {
26      api: '/api/ai/command',
27      body: {},
28    },
29  },
30  render: {
31    afterContainer: AILoadingBar,
32    afterEditable: AIMenu,
33    node: AIAnchorElement,
34  },
35  shortcuts: { show: { keys: 'mod+j' } },
36  useHooks: ({ editor, getOption }) => {
37    useChat();
38 
39    const mode = usePluginOption(AIChatPlugin, 'mode');
40    const toolName = usePluginOption(AIChatPlugin, 'toolName');
41    useChatChunk({
42      onChunk: ({ chunk, isFirst, nodes, text: content }) => {
43        if (isFirst && mode === 'insert') {
44          const { startBlock, startInEmptyParagraph } =
45            getInsertPreviewStart(editor);
46 
47          editor.getTransforms(BaseAIPlugin).ai.beginPreview({
48            originalBlocks:
49              startInEmptyParagraph &&
50              startBlock &&
51              ElementApi.isElement(startBlock)
52                ? [cloneDeep(startBlock)]
53                : [],
54          });
55 
56          editor.tf.withoutSaving(() => {
57            editor.tf.insertNodes(
58              {
59                children: [{ text: '' }],
60                type: getPluginType(editor, KEYS.aiChat),
61              },
62              {
63                at: PathApi.next(editor.selection!.focus.path.slice(0, 1)),
64              }
65            );
66          });
67          editor.setOption(AIChatPlugin, 'streaming', true);
68        }
69 
70        if (mode === 'insert' && nodes.length > 0) {
71          editor.tf.withoutSaving(() => {
72            if (!getOption('streaming')) return;
73 
74            editor.tf.withScrolling(() => {
75              streamInsertChunk(editor, chunk, {
76                textProps: {
77                  [getPluginType(editor, KEYS.ai)]: true,
78                },
79              });
80            });
81          });
82        }
83 
84// … truncated