fix(ci): green PR 4937 checks

Author: felixfeng33

apps/www/next-env.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
 /// <reference types="next/navigation-types/compat/navigation" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/www/public/r/ai-kit.json

@@ -14,6 +14,11 @@
     "https://platejs.org/r/ai-api.json"
   ],
   "files": [
+    {
+      "path": "src/registry/lib/ai-stream-batching.ts",
+      "content": "const DEFAULT_BATCH_WINDOW_IN_MS = 16;\nconst SLOW_BATCH_WINDOW_IN_MS = 32;\nconst SLOW_FLUSH_THRESHOLD_IN_MS = 24;\n\ntype AIStreamBatchTimer = ReturnType<typeof setTimeout>;\ntype AIStreamBatchFlushOptions = {\n  force?: boolean;\n};\n\nexport type AIStreamBatcher = ReturnType<typeof createAIStreamBatcher>;\n\nexport function shouldFlushAIStreamChunkImmediately(chunk: string) {\n  return chunk.includes('\\n') || chunk.includes('```') || chunk.includes('|');\n}\n\nexport function createAIStreamBatcher({\n  applyChunk,\n  cancel = clearTimeout,\n  getNow = () => performance.now(),\n  schedule = setTimeout,\n}: {\n  applyChunk: (chunk: string, options?: AIStreamBatchFlushOptions) => void;\n  cancel?: (timer: AIStreamBatchTimer) => void;\n  getNow?: () => number;\n  schedule?: (callback: () => void, delayInMs: number) => AIStreamBatchTimer;\n}) {\n  let batchWindowInMs = DEFAULT_BATCH_WINDOW_IN_MS;\n  let pendingChunk = '';\n  let timer: AIStreamBatchTimer | null = null;\n\n  const clearTimer = () => {\n    if (timer) {\n      cancel(timer);\n      timer = null;\n    }\n  };\n\n  const flush = (options?: AIStreamBatchFlushOptions) => {\n    if (!pendingChunk) return false;\n\n    const chunk = pendingChunk;\n\n    pendingChunk = '';\n    clearTimer();\n\n    const startedAt = getNow();\n\n    applyChunk(chunk, options);\n\n    batchWindowInMs =\n      getNow() - startedAt > SLOW_FLUSH_THRESHOLD_IN_MS\n        ? SLOW_BATCH_WINDOW_IN_MS\n        : DEFAULT_BATCH_WINDOW_IN_MS;\n\n    return true;\n  };\n\n  const queue = ({ chunk, isFirst }: { chunk: string; isFirst: boolean }) => {\n    if (!chunk) return;\n\n    if (isFirst) {\n      reset();\n      pendingChunk = chunk;\n      flush();\n\n      return;\n    }\n\n    pendingChunk += chunk;\n\n    if (shouldFlushAIStreamChunkImmediately(chunk)) {\n      flush();\n\n      return;\n    }\n\n    if (!timer) {\n      timer = schedule(() => {\n        timer = null;\n        flush();\n      }, batchWindowInMs);\n    }\n  };\n\n  const reset = () => {\n    pendingChunk = '';\n    batchWindowInMs = DEFAULT_BATCH_WINDOW_IN_MS;\n    clearTimer();\n  };\n\n  return {\n    flush,\n    getBatchWindowInMs: () => batchWindowInMs,\n    getPendingChunk: () => pendingChunk,\n    queue,\n    reset,\n  };\n}\n",
+      "type": "registry:lib"
+    },
     {
       "path": "src/registry/components/editor/plugins/ai-kit.tsx",
       "content": "'use client';\n\nimport { useEffect, useRef } from 'react';\n\nimport cloneDeep from 'lodash/cloneDeep.js';\nimport { BaseAIPlugin, withAIBatch } from '@platejs/ai';\nimport {\n  AIChatPlugin,\n  AIPlugin,\n  applyAISuggestions,\n  getInsertPreviewStart,\n  resetStreamInsertChunk,\n  streamInsertChunk,\n  useChatChunk,\n} from '@platejs/ai/react';\nimport { ElementApi, getPluginType, KEYS, PathApi } from 'platejs';\nimport { usePluginOption } from 'platejs/react';\n\nimport { AILoadingBar, AIMenu } from '@/registry/ui/ai-menu';\nimport { AIAnchorElement, AILeaf } from '@/registry/ui/ai-node';\nimport { createAIStreamBatcher } from '@/registry/lib/ai-stream-batching';\n\nimport { useChat } from '../use-chat';\nimport { CursorOverlayKit } from './cursor-overlay-kit';\nimport { MarkdownKit } from './markdown-kit';\n\nexport const aiChatPlugin = AIChatPlugin.extend({\n  options: {\n    chatOptions: {\n      api: '/api/ai/command',\n      body: {},\n    },\n  },\n  render: {\n    afterContainer: AILoadingBar,\n    afterEditable: AIMenu,\n    node: AIAnchorElement,\n  },\n  shortcuts: { show: { keys: 'mod+j' } },\n  useHooks: ({ editor, getOption }) => {\n    useChat();\n\n    const mode = usePluginOption(AIChatPlugin, 'mode');\n    const toolName = usePluginOption(AIChatPlugin, 'toolName');\n    const insertStreamBatcherRef = useRef<ReturnType<\n      typeof createAIStreamBatcher\n    > | null>(null);\n\n    if (!insertStreamBatcherRef.current) {\n      insertStreamBatcherRef.current = createAIStreamBatcher({\n        applyChunk: (chunk, options) => {\n          editor.tf.withoutSaving(() => {\n            if (!getOption('streaming') && !options?.force) return;\n\n            editor.tf.withScrolling(() => {\n              streamInsertChunk(editor, chunk, {\n                textProps: {\n                  [getPluginType(editor, KEYS.ai)]: true,\n                },\n              });\n            });\n          });\n        },\n      });\n    }\n\n    useEffect(\n      () => () => {\n        insertStreamBatcherRef.current?.reset();\n      },\n      []\n    );\n\n    useChatChunk({\n      onChunk: ({ chunk, isFirst, nodes, text: content }) => {\n        if (isFirst && mode === 'insert') {\n          const { startBlock, startInEmptyParagraph } =\n            getInsertPreviewStart(editor);\n\n          editor.getTransforms(BaseAIPlugin).ai.beginPreview({\n            originalBlocks:\n              startInEmptyParagraph &&\n              startBlock &&\n              ElementApi.isElement(startBlock)\n                ? [cloneDeep(startBlock)]\n                : [],\n          });\n\n          editor.tf.withoutSaving(() => {\n            editor.tf.insertNodes(\n              {\n                children: [{ text: '' }],\n                type: getPluginType(editor, KEYS.aiChat),\n              },\n              {\n                at: PathApi.next(editor.selection!.focus.path.slice(0, 1)),\n              }\n            );\n          });\n          editor.setOption(AIChatPlugin, 'streaming', true);\n        }\n\n        if (mode === 'insert' && nodes.length > 0) {\n          insertStreamBatcherRef.current?.queue({ chunk, isFirst });\n        }\n\n        if (toolName === 'edit' && mode === 'chat') {\n          withAIBatch(\n            editor,\n            () => {\n              applyAISuggestions(editor, content);\n            },\n            {\n              split: isFirst,\n            }\n          );\n        }\n      },\n      onFinish: () => {\n        insertStreamBatcherRef.current?.flush({ force: true });\n        editor.setOption(AIChatPlugin, 'streaming', false);\n        resetStreamInsertChunk(editor);\n        insertStreamBatcherRef.current?.reset();\n      },\n    });\n  },\n});\n\nexport const AIKit = [\n  ...CursorOverlayKit,\n  ...MarkdownKit,\n  AIPlugin.withComponent(AILeaf),\n  aiChatPlugin,\n];\n",

apps/www/public/r/markdown-streaming-demo.json

@@ -3144,6 +3144,10 @@
         "https://platejs.org/r/ai-api.json"
       ],
       "files": [
+        {
+          "path": "src/registry/lib/ai-stream-batching.ts",
+          "type": "registry:lib"
+        },
         {
           "path": "src/registry/components/editor/plugins/ai-kit.tsx",
           "type": "registry:component"

apps/www/public/r/registry.json

@@ -1971,12 +1971,16 @@ export const Index: Record<string, any> = {
     type: "registry:component",
     registryDependencies: ["https://platejs.org/r/markdown-kit.json","https://platejs.org/r/cursor-overlay-kit.json","https://platejs.org/r/ai-menu.json","https://platejs.org/r/ai-node.json","https://platejs.org/r/ai-toolbar-button.json","https://platejs.org/r/ai-api.json"],
     files: [{
+      path: "src/registry/lib/ai-stream-batching.ts",
+      type: "registry:lib",
+      target: ""
+    },{
       path: "src/registry/components/editor/plugins/ai-kit.tsx",
       type: "registry:component",
       target: ""
     }],
     component: React.lazy(async () => {
-      const mod = await import("@/registry/components/editor/plugins/ai-kit.tsx")
+      const mod = await import("@/registry/lib/ai-stream-batching.ts")
       const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
       return { default: mod.default || mod[exportName] }
     }),

apps/www/public/r/use-chat.json

@@ -73,18 +73,14 @@ const createProxyTransportFetch = (chatId: string): typeof fetch =>
 
 export const useChat = () => {
   const editor = useEditorRef();
-  const chatInstanceIdRef = React.useRef<string | undefined>(undefined);
+  const [chatInstanceId] = React.useState(() => `editor:${nanoid()}`);
   const options: PluginChatOptions =
     usePluginOption(aiChatPlugin, 'chatOptions') ?? {};
   const {
     api = '/api/ai/command',
     transport: providedTransport,
     ...chatOptions
   } = options;
-  if (!chatInstanceIdRef.current) {
-    chatInstanceIdRef.current = `editor:${nanoid()}`;
-  }
-  const chatInstanceId = chatInstanceIdRef.current;
 
   // remove when you implement the route /api/ai/command
   const abortControllerRef = React.useRef<AbortController | null>(null);

apps/www/public/tailwind.css

@@ -5,6 +5,7 @@ import {
   type ErrorInfo,
   type ReactNode,
   useEffect,
+  useEffectEvent,
   useMemo,
   useRef,
   useState,
@@ -378,6 +379,12 @@ export default function MarkdownStreamingDemo() {
   const currentChunkLabel =
     activeIndex === 0 ? 'before first chunk' : `#${activeIndex}`;
   const editorBoundaryResetKey = `${sourceIdentity}:${activeIndex}`;
+  const syncTreeJson = useEffectEvent(() => {
+    setTreeJson(encodeEditorTree(editor.children));
+  });
+  const stopPlayback = useEffectEvent(() => {
+    setIsPlaying(false);
+  });
 
   async function handleCopyChunks() {
     try {
@@ -510,7 +517,7 @@ export default function MarkdownStreamingDemo() {
         };
       }
 
-      setTreeJson(encodeEditorTree(editor.children));
+      syncTreeJson();
       return;
     }
 
@@ -521,7 +528,7 @@ export default function MarkdownStreamingDemo() {
         sourceIdentity,
         streamedChunks: chunks.slice(0, activeIndex),
       };
-      setTreeJson(encodeEditorTree(editor.children));
+      syncTreeJson();
       return;
     }
 
@@ -541,13 +548,13 @@ export default function MarkdownStreamingDemo() {
       };
     }
 
-    setTreeJson(encodeEditorTree(editor.children));
+    syncTreeJson();
   }, [activeIndex, editor, sourceIdentity, transformedCurrentChunks]);
 
   useEffect(() => {
     if (!isPlaying) return;
     if (activeIndex >= transformedCurrentChunks.length) {
-      setIsPlaying(false);
+      stopPlayback();
       return;
     }