@docyrus/ui-pro-ai-assistant 0.0.1

package/src/internal/plate-editor/editor/auth-context.ts

@@ -0,0 +1,11 @@
+'use client';
+
+import { createContext, use } from 'react';
+
+interface AuthContextValue {
+  getAccessToken?: () => Promise<string | null>;
+}
+
+export const AuthContext = createContext<AuthContextValue>({});
+
+export const useAuthContext = () => use(AuthContext);

package/src/internal/plate-editor/editor/editor-base-kit.tsx

@@ -0,0 +1,39 @@
+import { BaseBasicBlocksKit } from './plugins/basic-blocks-base-kit';
+import { BaseBasicMarksKit } from './plugins/basic-marks-base-kit';
+import { BaseCalloutKit } from './plugins/callout-base-kit';
+import { BaseCodeBlockKit } from './plugins/code-block-base-kit';
+import { BaseColumnKit } from './plugins/column-base-kit';
+import { BaseCommentKit } from './plugins/comment-base-kit';
+import { BaseDateKit } from './plugins/date-base-kit';
+import { BaseFontKit } from './plugins/font-base-kit';
+import { BaseLinkKit } from './plugins/link-base-kit';
+import { BaseListKit } from './plugins/list-base-kit';
+import { MarkdownKit } from './plugins/markdown-kit';
+import { BaseMathKit } from './plugins/math-base-kit';
+import { BaseMediaKit } from './plugins/media-base-kit';
+import { BaseMentionKit } from './plugins/mention-base-kit';
+import { BaseSuggestionKit } from './plugins/suggestion-base-kit';
+import { BaseTableKit } from './plugins/table-base-kit';
+import { BaseTocKit } from './plugins/toc-base-kit';
+import { BaseToggleKit } from './plugins/toggle-base-kit';
+
+export const BaseEditorKit = [
+  ...BaseBasicBlocksKit,
+  ...BaseCodeBlockKit,
+  ...BaseTableKit,
+  ...BaseToggleKit,
+  ...BaseTocKit,
+  ...BaseMediaKit,
+  ...BaseCalloutKit,
+  ...BaseColumnKit,
+  ...BaseMathKit,
+  ...BaseDateKit,
+  ...BaseLinkKit,
+  ...BaseMentionKit,
+  ...BaseBasicMarksKit,
+  ...BaseFontKit,
+  ...BaseListKit,
+  ...BaseCommentKit,
+  ...BaseSuggestionKit,
+  ...MarkdownKit
+];

package/src/internal/plate-editor/editor/editor-kit.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { TrailingBlockPlugin, type Value } from 'platejs';
+import { type TPlateEditor, useEditorRef } from 'platejs/react';
+
+import { AIKit } from './plugins/ai-kit';
+import { AutoformatKit } from './plugins/autoformat-kit';
+import { BasicBlocksKit } from './plugins/basic-blocks-kit';
+import { BasicMarksKit } from './plugins/basic-marks-kit';
+import { BlockMenuKit } from './plugins/block-menu-kit';
+import { BlockPlaceholderKit } from './plugins/block-placeholder-kit';
+import { CalloutKit } from './plugins/callout-kit';
+import { CodeBlockKit } from './plugins/code-block-kit';
+import { ColumnKit } from './plugins/column-kit';
+import { CommentKit } from './plugins/comment-kit';
+import { CopilotKit } from './plugins/copilot-kit';
+import { CursorOverlayKit } from './plugins/cursor-overlay-kit';
+import { DateKit } from './plugins/date-kit';
+import { DiscussionKit } from './plugins/discussion-kit';
+import { DndKit } from './plugins/dnd-kit';
+import { DocxKit } from './plugins/docx-kit';
+import { EmojiKit } from './plugins/emoji-kit';
+import { ExitBreakKit } from './plugins/exit-break-kit';
+import { FloatingToolbarKit } from './plugins/floating-toolbar-kit';
+import { FontKit } from './plugins/font-kit';
+import { LinkKit } from './plugins/link-kit';
+import { ListKit } from './plugins/list-kit';
+import { MarkdownKit } from './plugins/markdown-kit';
+import { MathKit } from './plugins/math-kit';
+import { MediaKit } from './plugins/media-kit';
+import { MentionKit } from './plugins/mention-kit';
+import { SlashKit } from './plugins/slash-kit';
+import { SuggestionKit } from './plugins/suggestion-kit';
+import { TableKit } from './plugins/table-kit';
+import { TocKit } from './plugins/toc-kit';
+import { ToggleKit } from './plugins/toggle-kit';
+
+export const EditorKit = [
+  ...CopilotKit,
+  ...AIKit,
+  ...BlockMenuKit,
+
+  // Elements
+  ...BasicBlocksKit,
+  ...CodeBlockKit,
+  ...TableKit,
+  ...ToggleKit,
+  ...TocKit,
+  ...MediaKit,
+  ...CalloutKit,
+  ...ColumnKit,
+  ...MathKit,
+  ...DateKit,
+  ...LinkKit,
+  ...MentionKit,
+
+  // Marks
+  ...BasicMarksKit,
+  ...FontKit,
+
+  // Block Style
+  ...ListKit,
+
+  // Collaboration
+  ...DiscussionKit,
+  ...CommentKit,
+  ...SuggestionKit,
+
+  // Editing
+  ...SlashKit,
+  ...AutoformatKit,
+  ...CursorOverlayKit,
+  ...DndKit,
+  ...EmojiKit,
+  ...ExitBreakKit,
+  TrailingBlockPlugin,
+
+  // Parsers
+  ...DocxKit,
+  ...MarkdownKit,
+
+  // UI
+  ...BlockPlaceholderKit,
+  ...FloatingToolbarKit
+];
+
+export type MyEditor = TPlateEditor<Value, (typeof EditorKit)[number]>;
+
+export const useEditor = () => useEditorRef<MyEditor>();

package/src/internal/plate-editor/editor/plate-editor.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useImperativeHandle, type RefObject, useMemo } from 'react';
+
+import { type Value } from 'platejs';
+import { deserializeMd } from '@platejs/markdown';
+
+import { Plate, usePlateEditor } from 'platejs/react';
+
+import { AuthContext } from './auth-context';
+import { EditorKit } from './editor-kit';
+import { Editor, EditorContainer } from '../plate-ui/editor';
+import { FixedToolbar } from '../plate-ui/fixed-toolbar';
+import { FixedToolbarButtons } from '../plate-ui/fixed-toolbar-buttons';
+
+export interface PlateEditorHandle {
+  setValue: (value: Value) => void;
+  setMarkdown: (markdown: string) => void;
+}
+
+export interface PlateEditorProps {
+  value?: Value;
+  onChange?: (value: Value) => void;
+  onReady?: () => void;
+  readOnly?: boolean;
+  placeholder?: string;
+  hideToolbar?: boolean;
+  collabToken?: string;
+  documentId?: string;
+  getAccessToken?: () => Promise<string | null>;
+}
+
+export const PlateEditor = ({
+  ref, value, onChange, onReady, readOnly, placeholder = 'Type...', hideToolbar, getAccessToken
+}: PlateEditorProps & { ref?: RefObject<PlateEditorHandle | null> }) => {
+  const editor = usePlateEditor({ plugins: EditorKit, value });
+  const authValue = useMemo(() => ({ getAccessToken }), [getAccessToken]);
+
+  useImperativeHandle(ref, () => ({
+    setValue(newValue: Value) {
+      editor.tf.setValue(newValue);
+      editor.tf.focus({ edge: 'start' });
+    },
+    setMarkdown(markdown: string) {
+      const nodes = deserializeMd(editor, markdown);
+
+      editor.tf.setValue(nodes);
+      editor.tf.focus({ edge: 'start' });
+    }
+  }), [editor]);
+
+  return (
+    <AuthContext value={authValue}>
+      <Plate
+        editor={editor}
+        onChange={({ value }) => onChange?.(value)}>
+        <div className="flex h-full flex-col overflow-hidden">
+          {!hideToolbar && !readOnly && (
+            <FixedToolbar>
+              <FixedToolbarButtons />
+            </FixedToolbar>
+          )}
+
+          <EditorContainer className="flex-1 min-h-0">
+            <Editor
+              placeholder={placeholder}
+              readOnly={readOnly}
+              variant="default"
+              onLoad={onReady} />
+          </EditorContainer>
+        </div>
+      </Plate>
+    </AuthContext>
+  );
+};

package/src/internal/plate-editor/editor/plate-types.ts

@@ -0,0 +1,126 @@
+'use client';
+
+import {
+  type EmptyText,
+  type KEYS,
+  type PlainText,
+  type TBasicMarks,
+  type TCommentText,
+  type TElement,
+  type TFontMarks,
+  type TImageElement,
+  type TLinkElement,
+  type TListProps,
+  type TMentionElement,
+  type TTableElement,
+  type TText,
+  type TTextAlignProps
+} from 'platejs';
+
+export interface MyBlockElement extends TElement, TListProps {
+  id?: string;
+}
+
+export interface MyBlockquoteElement extends MyTextBlockElement {
+  type: typeof KEYS.blockquote;
+}
+
+export interface MyCodeBlockElement extends MyBlockElement {
+  children: MyCodeLineElement[];
+  type: typeof KEYS.codeBlock;
+}
+
+export interface MyCodeLineElement extends TElement {
+  children: PlainText[];
+  type: typeof KEYS.codeLine;
+}
+
+export interface MyH1Element extends MyTextBlockElement {
+  type: typeof KEYS.h1;
+}
+
+export interface MyH2Element extends MyTextBlockElement {
+  type: typeof KEYS.h2;
+}
+
+export interface MyH3Element extends MyTextBlockElement {
+  type: typeof KEYS.h3;
+}
+
+export interface MyHrElement extends MyBlockElement {
+  children: [EmptyText];
+  type: typeof KEYS.hr;
+}
+
+export interface MyImageElement
+  extends MyBlockElement,
+  TImageElement {
+  children: [EmptyText];
+  type: typeof KEYS.img;
+}
+
+export interface MyLinkElement extends TLinkElement {
+  id: string;
+  children: RichText[];
+  type: typeof KEYS.link;
+  icon?: string;
+  title?: string;
+}
+
+export interface MyMentionElement extends TMentionElement {
+  children: [EmptyText];
+  type: typeof KEYS.mention;
+  key?: string;
+}
+
+export type MyNestableBlock = MyParagraphElement;
+
+export interface MyParagraphElement extends MyTextBlockElement {
+  type: typeof KEYS.p;
+}
+
+export interface MyTableCellElement extends TElement {
+  children: MyNestableBlock[];
+  type: typeof KEYS.td;
+}
+
+export interface MyTableElement extends MyBlockElement, TTableElement {
+  children: MyTableRowElement[];
+  type: typeof KEYS.table;
+}
+
+export interface MyTableRowElement extends TElement {
+  children: MyTableCellElement[];
+  type: typeof KEYS.tr;
+}
+
+export interface MyTextBlockElement
+  extends TElement,
+  TTextAlignProps {
+  children: (
+    | MyLinkElement
+    | MyMentionElement
+    | RichText
+  )[];
+}
+
+export interface MyToggleElement extends MyTextBlockElement {
+  type: typeof KEYS.toggle;
+}
+
+export type MyValue = (
+  | MyBlockquoteElement
+  | MyCodeBlockElement
+  | MyH1Element
+  | MyH2Element
+  | MyH3Element
+  | MyHrElement
+  | MyImageElement
+  | MyParagraphElement
+  | MyTableElement
+  | MyToggleElement
+)[];
+
+export interface RichText extends TBasicMarks, TCommentText, TFontMarks, TText {
+  kbd?: boolean;
+}

package/src/internal/plate-editor/editor/plugins/ai-kit.tsx

@@ -0,0 +1,172 @@
+'use client';
+
+import { type RefCallback, type RefObject, useEffect } from 'react';
+
+import { withAIBatch } from '@platejs/ai';
+import {
+  AIChatPlugin,
+  AIPlugin,
+  applyAISuggestions,
+  rejectAISuggestions,
+  streamInsertChunk,
+  useChatChunk
+} from '@platejs/ai/react';
+import { BlockSelectionPlugin } from '@platejs/selection/react';
+import { getPluginType, KEYS, PathApi } from 'platejs';
+import { type PlateEditor, usePluginOption } from 'platejs/react';
+
+import { useStickToBottom } from 'use-stick-to-bottom';
+
+import { CursorOverlayKit } from './cursor-overlay-kit';
+import { MarkdownKit } from './markdown-kit';
+import { AIMenu } from '../../plate-ui/ai-menu';
+import { AIAnchorElement, AILeaf } from '../../plate-ui/ai-node';
+
+import { useChat } from '../use-chat';
+
+export const aiChatPlugin = AIChatPlugin.extend({
+  options: {
+    contentRef: null as
+      | (RefObject<HTMLElement | null> & RefCallback<HTMLElement>)
+      | null,
+    scrollRef: null as
+      | (RefObject<HTMLElement | null> & RefCallback<HTMLElement>)
+      | null
+  }
+}).configure({
+  render: {
+    afterEditable: AIMenu,
+    node: AIAnchorElement
+  },
+  shortcuts: { show: { keys: 'mod+j' } },
+  normalizeInitialValue: ({ editor }) => {
+    const anchor = editor.getApi(AIChatPlugin).aiChat.node({ anchor: true });
+
+    if (anchor) {
+      editor.tf.removeNodes({ at: anchor[1] });
+    }
+
+    editor.tf.withoutSaving(() => {
+      rejectAISuggestions(editor);
+    });
+  },
+  useHooks: ({
+    api, editor, getOption, setOptions
+  }) => {
+    const { contentRef, scrollRef } = useStickToBottom({
+      /** Replace "bottom of the scroll container" with "top of the anchor" */
+      targetScrollTop: (_defaultBottom, { scrollElement }) => {
+        const anchorNode = api.aiChat.node({ anchor: true });
+
+        if (!anchorNode) return 0; // fallback: real bottom
+
+        const anchor = api.toDOMNode(anchorNode[0])?.parentElement
+          ?.parentElement as HTMLDivElement;
+
+        if (!anchor) return 0; // fallback: real bottom
+
+        const scrollRect = scrollElement.getBoundingClientRect();
+        const anchorRect = anchor.getBoundingClientRect();
+
+        // Add a threshold of 100px from the bottom
+        const threshold = 100;
+        const isVisible
+          = anchorRect.top >= scrollRect.top
+            && anchorRect.bottom <= scrollRect.bottom - threshold;
+
+        const anchorTop = anchor.offsetTop - scrollElement.offsetTop;
+
+        return isVisible ? 0 : anchorTop;
+      }
+    });
+
+    useEffect(() => {
+      setOptions({ contentRef, scrollRef });
+    }, [contentRef, scrollRef, setOptions]);
+
+    useChat();
+
+    const mode = usePluginOption(AIChatPlugin, 'mode');
+    const toolName = usePluginOption(AIChatPlugin, 'toolName');
+
+    useEffect(() => {
+      if (toolName === 'edit') {
+        insertAIAnchorElement(editor);
+      }
+    }, [editor, toolName]);
+
+    useChatChunk({
+      onChunk: ({
+        chunk, isFirst, nodes, text: content
+      }) => {
+        if (isFirst && toolName === 'generate') {
+          insertAIAnchorElement(editor);
+        }
+        if (mode === 'insert' && nodes.length > 0) {
+          withAIBatch(
+            editor,
+            () => {
+              if (!getOption('streaming')) return;
+
+              editor.tf.withScrolling(() => {
+                streamInsertChunk(editor, chunk, {
+                  textProps: {
+                    [getPluginType(editor, KEYS.ai)]: true
+                  }
+                });
+              });
+            },
+            { split: isFirst }
+          );
+        }
+        if (toolName === 'edit' && mode === 'chat' && content) {
+          withAIBatch(
+            editor,
+            () => {
+              applyAISuggestions(editor, content);
+            },
+            {
+              split: isFirst
+            }
+          );
+        }
+      },
+      onFinish: () => {
+        editor.setOption(AIChatPlugin, 'streaming', false);
+        editor.setOption(AIChatPlugin, '_blockChunks', '');
+        editor.setOption(AIChatPlugin, '_blockPath', null);
+        editor.setOption(AIChatPlugin, '_mdxName', null);
+      }
+    });
+  }
+});
+
+export const AIKit = [
+  ...CursorOverlayKit,
+  ...MarkdownKit,
+  AIPlugin.withComponent(AILeaf),
+  aiChatPlugin
+];
+
+const insertAIAnchorElement = (editor: PlateEditor) => {
+  const blockNodes = editor
+    .getApi(BlockSelectionPlugin)
+    .blockSelection.getNodes({ selectionFallback: true, sort: true });
+
+  const at
+    = blockNodes.length === 0 ? PathApi.next(editor.selection!.focus.path.slice(0, 1)) : PathApi.next(blockNodes.at(-1)![1]);
+
+  editor.tf.withoutSaving(() => {
+    editor.tf.insertNodes(
+      {
+        children: [{ text: '' }],
+        type: getPluginType(editor, KEYS.aiChat)
+      },
+      {
+        at
+      }
+    );
+  });
+
+  editor.setOption(AIChatPlugin, 'streaming', true);
+};