Implementing the AI Chat Editor using PlateStatic

.changeset/tiny-pots-hide.md

@@ -0,0 +1,6 @@
+---
+"www": patch
+"@udecode/plate-ai": patch
+---
+
+Fix editor type using `SlateEditor` instead of `PlateEditor`.

apps/www/public/r/index.json

@@ -2461,6 +2461,10 @@
       {
         "path": "plate-ui/indent-todo-marker.tsx",
         "type": "registry:ui"
+      },
+      {
+        "path": "plate-ui/indent-todo-marker-static.tsx",
+        "type": "registry:ui"
       }
     ],
     "name": "indent-todo-marker",

apps/www/public/r/styles/default/ai-demo.json

@@ -17,7 +17,7 @@
       "type": "registry:example"
     },
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { withProps } from '@udecode/cn';\nimport { AIChatPlugin, AIPlugin } from '@udecode/plate-ai/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport {\n  CodeBlockPlugin,\n  CodeLinePlugin,\n  CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport {\n  ParagraphPlugin,\n  PlateLeaf,\n  createPlateEditor,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\n\nimport { cursorOverlayPlugin } from '@/components/editor/plugins/cursor-overlay-plugin';\nimport { AIMenu } from '@/components/plate-ui/ai-menu';\nimport { BlockquoteElement } from '@/components/plate-ui/blockquote-element';\nimport { CodeBlockElement } from '@/components/plate-ui/code-block-element';\nimport { CodeLeaf } from '@/components/plate-ui/code-leaf';\nimport { CodeLineElement } from '@/components/plate-ui/code-line-element';\nimport { CodeSyntaxLeaf } from '@/components/plate-ui/code-syntax-leaf';\nimport { HeadingElement } from '@/components/plate-ui/heading-element';\nimport { HrElement } from '@/components/plate-ui/hr-element';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { ParagraphElement } from '@/components/plate-ui/paragraph-element';\n\nimport { basicNodesPlugins } from './basic-nodes-plugins';\nimport { blockSelectionReadOnlyPlugin } from './block-selection-plugins';\nimport { indentListPlugins } from './indent-list-plugins';\nimport { linkPlugin } from './link-plugin';\n\nconst createAIEditor = () => {\n  const editor = createPlateEditor({\n    id: 'ai',\n    override: {\n      components: {\n        [BlockquotePlugin.key]: BlockquoteElement,\n        [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),\n        [CodeBlockPlugin.key]: CodeBlockElement,\n        [CodeLinePlugin.key]: CodeLineElement,\n        [CodePlugin.key]: CodeLeaf,\n        [CodeSyntaxPlugin.key]: CodeSyntaxLeaf,\n        [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }),\n        [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }),\n        [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }),\n        [HorizontalRulePlugin.key]: HrElement,\n        [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }),\n        [LinkPlugin.key]: LinkElement,\n        [ParagraphPlugin.key]: ParagraphElement,\n        [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }),\n        [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }),\n      },\n    },\n    plugins: [\n      ...basicNodesPlugins,\n      ...indentListPlugins,\n      HorizontalRulePlugin,\n      linkPlugin,\n      MarkdownPlugin.configure({ options: { indentList: true } }),\n      blockSelectionReadOnlyPlugin,\n    ],\n  });\n\n  return editor;\n};\n\nconst systemCommon = `\\\nYou are an advanced AI-powered note-taking assistant, designed to enhance productivity and creativity in note management.\nRespond directly to user prompts with clear, concise, and relevant content. Maintain a neutral, helpful tone.\n\nRules:\n- <Document> is the entire note the user is working on.\n- <Reminder> is a reminder of how you should reply to INSTRUCTIONS. It does not apply to questions.\n- Anything else is the user prompt.\n- Your response should be tailored to the user's prompt, providing precise assistance to optimize note management.\n- For INSTRUCTIONS: Follow the <Reminder> exactly. Provide ONLY the content to be inserted or replaced. No explanations or comments.\n- For QUESTIONS: Provide a helpful and concise answer. You may include brief explanations if necessary.\n- CRITICAL: Distinguish between INSTRUCTIONS and QUESTIONS. Instructions typically ask you to modify or add content. Questions ask for information or clarification.\n`;\n\nconst systemDefault = `\\\n${systemCommon}\n- <Block> is the current block of text the user is working on.\n- Ensure your output can seamlessly fit into the existing <Block> structure.\n- CRITICAL: Provide only a single block of text. DO NOT create multiple paragraphs or separate blocks.\n<Block>\n{block}\n</Block>\n`;\n\nconst systemSelecting = `\\\n${systemCommon}\n- <Block> is the block of text containing the user's selection, providing context.\n- Ensure your output can seamlessly fit into the existing <Block> structure.\n- <Selection> is the specific text the user has selected in the block and wants to modify or ask about.\n- Consider the context provided by <Block>, but only modify <Selection>. Your response should be a direct replacement for <Selection>.\n<Block>\n{block}\n</Block>\n<Selection>\n{selection}\n</Selection>\n`;\n\nconst systemBlockSelecting = `\\\n${systemCommon}\n- <Selection> represents the full blocks of text the user has selected and wants to modify or ask about.\n- Your response should be a direct replacement for the entire <Selection>.\n- Maintain the overall structure and formatting of the selected blocks, unless explicitly instructed otherwise.\n- CRITICAL: Provide only the content to replace <Selection>. Do not add additional blocks or change the block structure unless specifically requested.\n<Selection>\n{block}\n</Selection>\n`;\n\nconst userDefault = `<Reminder>\nCRITICAL: DO NOT use block formatting. You can only use inline formatting.\nCRITICAL: DO NOT start new lines or paragraphs.\nNEVER write <Block>.\n</Reminder>\n{prompt}`;\n\nconst userSelecting = `<Reminder>\nIf this is a question, provide a helpful and concise answer about <Selection>.\nIf this is an instruction, provide ONLY the text to replace <Selection>. No explanations.\nEnsure it fits seamlessly within <Block>. If <Block> is empty, write ONE random sentence.\nNEVER write <Block> or <Selection>.\n</Reminder>\n{prompt} about <Selection>`;\n\nconst userBlockSelecting = `<Reminder>\nIf this is a question, provide a helpful and concise answer about <Selection>.\nIf this is an instruction, provide ONLY the content to replace the entire <Selection>. No explanations.\nMaintain the overall structure unless instructed otherwise.\nNEVER write <Block> or <Selection>.\n</Reminder>\n{prompt} about <Selection>`;\n\nexport const PROMPT_TEMPLATES = {\n  systemBlockSelecting,\n  systemDefault,\n  systemSelecting,\n  userBlockSelecting,\n  userDefault,\n  userSelecting,\n};\n\nexport const aiPlugins = [\n  cursorOverlayPlugin,\n  MarkdownPlugin.configure({ options: { indentList: true } }),\n  AIPlugin,\n  AIChatPlugin.configure({\n    options: {\n      createAIEditor,\n      promptTemplate: ({ isBlockSelecting, isSelecting }) => {\n        return isBlockSelecting\n          ? PROMPT_TEMPLATES.userBlockSelecting\n          : isSelecting\n            ? PROMPT_TEMPLATES.userSelecting\n            : PROMPT_TEMPLATES.userDefault;\n      },\n      systemTemplate: ({ isBlockSelecting, isSelecting }) => {\n        return isBlockSelecting\n          ? PROMPT_TEMPLATES.systemBlockSelecting\n          : isSelecting\n            ? PROMPT_TEMPLATES.systemSelecting\n            : PROMPT_TEMPLATES.systemDefault;\n      },\n    },\n    render: { afterEditable: () => <AIMenu /> },\n  }),\n] as const;\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { AIChatPlugin, AIPlugin } from '@udecode/plate-ai/react';\nimport {\n  BaseBoldPlugin,\n  BaseCodePlugin,\n  BaseItalicPlugin,\n  BaseStrikethroughPlugin,\n  BaseUnderlinePlugin,\n} from '@udecode/plate-basic-marks';\nimport { BaseBlockquotePlugin } from '@udecode/plate-block-quote';\nimport {\n  BaseCodeBlockPlugin,\n  BaseCodeLinePlugin,\n  BaseCodeSyntaxPlugin,\n} from '@udecode/plate-code-block';\nimport { BaseParagraphPlugin, createSlateEditor } from '@udecode/plate-common';\nimport { BaseHeadingPlugin, HEADING_LEVELS } from '@udecode/plate-heading';\nimport { BaseHorizontalRulePlugin } from '@udecode/plate-horizontal-rule';\nimport { BaseIndentListPlugin } from '@udecode/plate-indent-list';\nimport { BaseLinkPlugin } from '@udecode/plate-link';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\n\nimport { AIMenu } from '@/components/plate-ui/ai-menu';\nimport {\n  TodoLiStatic,\n  TodoMarkerStatic,\n} from '@/components/plate-ui/indent-todo-marker-static';\n\nimport { cursorOverlayPlugin } from './cursor-overlay-plugin';\nconst createAIEditor = () => {\n  const editor = createSlateEditor({\n    id: 'ai',\n    plugins: [\n      BaseBlockquotePlugin,\n      BaseBoldPlugin,\n      BaseCodeBlockPlugin,\n      BaseCodeLinePlugin,\n      BaseCodePlugin,\n      BaseCodeSyntaxPlugin,\n      BaseItalicPlugin,\n      BaseStrikethroughPlugin,\n      BaseUnderlinePlugin,\n      BaseHeadingPlugin,\n      BaseHorizontalRulePlugin,\n      BaseLinkPlugin,\n      BaseParagraphPlugin,\n      BaseIndentListPlugin.extend({\n        inject: {\n          targetPlugins: [\n            BaseParagraphPlugin.key,\n            ...HEADING_LEVELS,\n            BaseBlockquotePlugin.key,\n            BaseCodeBlockPlugin.key,\n          ],\n        },\n        options: {\n          listStyleTypes: {\n            todo: {\n              liComponent: TodoLiStatic,\n              markerComponent: TodoMarkerStatic,\n              type: 'todo',\n            },\n          },\n        },\n      }),\n      MarkdownPlugin.configure({ options: { indentList: true } }),\n    ],\n  });\n\n  return editor;\n};\n\nconst systemCommon = `\\\nYou are an advanced AI-powered note-taking assistant, designed to enhance productivity and creativity in note management.\nRespond directly to user prompts with clear, concise, and relevant content. Maintain a neutral, helpful tone.\n\nRules:\n- <Document> is the entire note the user is working on.\n- <Reminder> is a reminder of how you should reply to INSTRUCTIONS. It does not apply to questions.\n- Anything else is the user prompt.\n- Your response should be tailored to the user's prompt, providing precise assistance to optimize note management.\n- For INSTRUCTIONS: Follow the <Reminder> exactly. Provide ONLY the content to be inserted or replaced. No explanations or comments.\n- For QUESTIONS: Provide a helpful and concise answer. You may include brief explanations if necessary.\n- CRITICAL: Distinguish between INSTRUCTIONS and QUESTIONS. Instructions typically ask you to modify or add content. Questions ask for information or clarification.\n`;\n\nconst systemDefault = `\\\n${systemCommon}\n- <Block> is the current block of text the user is working on.\n- Ensure your output can seamlessly fit into the existing <Block> structure.\n- CRITICAL: Provide only a single block of text. DO NOT create multiple paragraphs or separate blocks.\n<Block>\n{block}\n</Block>\n`;\n\nconst systemSelecting = `\\\n${systemCommon}\n- <Block> is the block of text containing the user's selection, providing context.\n- Ensure your output can seamlessly fit into the existing <Block> structure.\n- <Selection> is the specific text the user has selected in the block and wants to modify or ask about.\n- Consider the context provided by <Block>, but only modify <Selection>. Your response should be a direct replacement for <Selection>.\n<Block>\n{block}\n</Block>\n<Selection>\n{selection}\n</Selection>\n`;\n\nconst systemBlockSelecting = `\\\n${systemCommon}\n- <Selection> represents the full blocks of text the user has selected and wants to modify or ask about.\n- Your response should be a direct replacement for the entire <Selection>.\n- Maintain the overall structure and formatting of the selected blocks, unless explicitly instructed otherwise.\n- CRITICAL: Provide only the content to replace <Selection>. Do not add additional blocks or change the block structure unless specifically requested.\n<Selection>\n{block}\n</Selection>\n`;\n\nconst userDefault = `<Reminder>\nCRITICAL: DO NOT use block formatting. You can only use inline formatting.\nCRITICAL: DO NOT start new lines or paragraphs.\nNEVER write <Block>.\n</Reminder>\n{prompt}`;\n\nconst userSelecting = `<Reminder>\nIf this is a question, provide a helpful and concise answer about <Selection>.\nIf this is an instruction, provide ONLY the text to replace <Selection>. No explanations.\nEnsure it fits seamlessly within <Block>. If <Block> is empty, write ONE random sentence.\nNEVER write <Block> or <Selection>.\n</Reminder>\n{prompt} about <Selection>`;\n\nconst userBlockSelecting = `<Reminder>\nIf this is a question, provide a helpful and concise answer about <Selection>.\nIf this is an instruction, provide ONLY the content to replace the entire <Selection>. No explanations.\nMaintain the overall structure unless instructed otherwise.\nNEVER write <Block> or <Selection>.\n</Reminder>\n{prompt} about <Selection>`;\n\nexport const PROMPT_TEMPLATES = {\n  systemBlockSelecting,\n  systemDefault,\n  systemSelecting,\n  userBlockSelecting,\n  userDefault,\n  userSelecting,\n};\n\nexport const aiPlugins = [\n  cursorOverlayPlugin,\n  MarkdownPlugin.configure({ options: { indentList: true } }),\n  AIPlugin,\n  AIChatPlugin.configure({\n    options: {\n      createAIEditor,\n      promptTemplate: ({ isBlockSelecting, isSelecting }) => {\n        return isBlockSelecting\n          ? PROMPT_TEMPLATES.userBlockSelecting\n          : isSelecting\n            ? PROMPT_TEMPLATES.userSelecting\n            : PROMPT_TEMPLATES.userDefault;\n      },\n      systemTemplate: ({ isBlockSelecting, isSelecting }) => {\n        return isBlockSelecting\n          ? PROMPT_TEMPLATES.systemBlockSelecting\n          : isSelecting\n            ? PROMPT_TEMPLATES.systemSelecting\n            : PROMPT_TEMPLATES.systemDefault;\n      },\n    },\n    render: { afterEditable: () => <AIMenu /> },\n  }),\n] as const;\n",
       "path": "components/editor/plugins/ai-plugins.tsx",
       "target": "components/ai-plugins.tsx",
       "type": "registry:example"