vzcode 2.21.0 → 2.22.0

package/dist/llm-streaming-server/llmStreaming.js

@@ -0,0 +1,265 @@
+import OpenAI from 'openai';
+import { parseMarkdownFiles, StreamingMarkdownParser, } from 'llm-code-format';
+import { mergeFileChanges } from 'editcodewithai';
+import { updateFiles, updateAIScratchpad, createStreamingAIMessage, addStreamingEvent, updateStreamingStatus, finalizeStreamingMessage, } from './chatOperations.js';
+import { formatFiles } from '../server/prettier.js';
+// Verbose logs
+const DEBUG = false;
+// Useful for testing/debugging the streaming behavior
+const slowMode = false;
+// If the `EMIT_FIXTURES` variable is true,
+// then an output file in the `test/fixtures` folder
+// with the before and after file states for testing purposes.
+// This feeds into tests in codemirror-ot.
+const EMIT_FIXTURES = false;
+/**
+ * Creates and configures the LLM function for streaming with reasoning tokens
+ */
+export const createLLMFunction = ({ shareDBDoc, chatId, 
+// Feature flag to enable/disable reasoning tokens.
+// When false, reasoning tokens are not requested from the API
+// and reasoning content is not processed in the streaming response.
+enableReasoningTokens = false, model, aiRequestOptions, }) => {
+    return async (fullPrompt) => {
+        // Create OpenRouter client for reasoning token support
+        const openRouterClient = new OpenAI({
+            apiKey: process.env.VZCODE_EDIT_WITH_AI_API_KEY,
+            baseURL: process.env.VZCODE_EDIT_WITH_AI_BASE_URL ||
+                'https://openrouter.ai/api/v1',
+            defaultHeaders: {
+                'HTTP-Referer': 'https://vizhub.com',
+                'X-Title': 'VizHub',
+            },
+        });
+        let fullContent = '';
+        let generationId = '';
+        let currentEditingFileName = null;
+        let accumulatedTextChunk = '';
+        let currentFileContent = '';
+        // Create streaming AI message
+        createStreamingAIMessage(shareDBDoc, chatId);
+        // Set initial content generation status
+        updateStreamingStatus(shareDBDoc, chatId, 'Formulating a plan...');
+        // Helper to get original file content
+        const getOriginalFileContent = (fileName) => {
+            const files = shareDBDoc.data.files;
+            for (const file of Object.values(files)) {
+                if (file.name === fileName) {
+                    return file.text || '';
+                }
+            }
+            return '';
+        };
+        // Helper to emit text chunk when accumulated
+        const emitTextChunk = async () => {
+            if (accumulatedTextChunk.trim()) {
+                DEBUG &&
+                    console.log('LLMStreaming: Emitting text chunk:', accumulatedTextChunk.substring(0, 100) + '...');
+                await addStreamingEvent(shareDBDoc, chatId, {
+                    type: 'text_chunk',
+                    content: accumulatedTextChunk,
+                    timestamp: Date.now(),
+                });
+                accumulatedTextChunk = '';
+            }
+        };
+        // Helper to complete file editing
+        const completeFileEditing = async (fileName) => {
+            if (fileName) {
+                DEBUG &&
+                    console.log(`LLMStreaming: Completing file editing for ${fileName}`);
+                await addStreamingEvent(shareDBDoc, chatId, {
+                    type: 'file_complete',
+                    fileName,
+                    beforeContent: getOriginalFileContent(fileName),
+                    afterContent: currentFileContent,
+                    timestamp: Date.now(),
+                });
+                currentFileContent = '';
+            }
+        };
+        // Define callbacks for streaming parser
+        const callbacks = {
+            onFileNameChange: async (fileName, format) => {
+                DEBUG &&
+                    console.log(`LLMStreaming: File changed to: ${fileName} (${format})`);
+                // Emit any accumulated text chunk first
+                await emitTextChunk();
+                // Complete previous file if any
+                if (currentEditingFileName) {
+                    await completeFileEditing(currentEditingFileName);
+                }
+                // Start new file
+                currentEditingFileName = fileName;
+                currentFileContent = '';
+                // Emit file start event
+                await addStreamingEvent(shareDBDoc, chatId, {
+                    type: 'file_start',
+                    fileName,
+                    timestamp: Date.now(),
+                });
+                // Update status
+                updateStreamingStatus(shareDBDoc, chatId, `Editing ${fileName}...`);
+            },
+            onCodeLine: async (line) => {
+                DEBUG && console.log(`Code line: ${line}`);
+                // Accumulate code content for the current file
+                currentFileContent += line + '\n';
+            },
+            onNonCodeLine: async (line) => {
+                DEBUG && console.log(`Non-code line: ${line}`);
+                // Accumulate non-code content as text chunk
+                if (line.trim() !== '') {
+                    accumulatedTextChunk += line + '\n';
+                    // Update status for subsequent non-code chunks
+                    if (firstNonCodeChunkProcessed) {
+                        updateStreamingStatus(shareDBDoc, chatId, 'Describing changes...');
+                    }
+                    else {
+                        firstNonCodeChunkProcessed = true;
+                    }
+                }
+            },
+            onFileDelete: async (fileName) => {
+                DEBUG &&
+                    console.log(`LLMStreaming: File marked for deletion: ${fileName}`);
+                // Emit any accumulated text chunk first
+                await emitTextChunk();
+                // Complete previous file if any
+                if (currentEditingFileName) {
+                    await completeFileEditing(currentEditingFileName);
+                }
+                // Reset current editing state
+                currentEditingFileName = null;
+                currentFileContent = '';
+                // Emit file delete event
+                await addStreamingEvent(shareDBDoc, chatId, {
+                    type: 'file_delete',
+                    fileName,
+                    timestamp: Date.now(),
+                });
+                // Update status
+                updateStreamingStatus(shareDBDoc, chatId, `Deleting ${fileName}...`);
+            },
+        };
+        const parser = new StreamingMarkdownParser(callbacks);
+        const chunks = [];
+        let reasoningContent = '';
+        // Stream the response with reasoning tokens
+        const modelName = model ||
+            process.env.VZCODE_EDIT_WITH_AI_MODEL_NAME ||
+            'anthropic/claude-3.5-sonnet';
+        // Configure reasoning tokens based on enableReasoningTokens flag
+        const requestConfig = {
+            model: modelName,
+            messages: [{ role: 'user', content: fullPrompt }],
+            usage: { include: true },
+            stream: true,
+            ...aiRequestOptions,
+        };
+        // Only include reasoning configuration if reasoning tokens are enabled
+        if (enableReasoningTokens) {
+            requestConfig.reasoning = {
+                effort: 'low',
+                exclude: false,
+            };
+        }
+        const stream = await openRouterClient.chat.completions.create(requestConfig);
+        let reasoningStarted = false;
+        let contentStarted = false;
+        let firstNonCodeChunkProcessed = false;
+        for await (const chunk of stream) {
+            if (slowMode) {
+                await new Promise((resolve) => setTimeout(resolve, 500));
+            }
+            const delta = chunk.choices[0]?.delta; // Type assertion for OpenRouter-specific reasoning fields
+            if (delta?.reasoning && enableReasoningTokens) {
+                // Handle reasoning tokens (thinking) - only if enabled
+                if (!reasoningStarted) {
+                    reasoningStarted = true;
+                    updateStreamingStatus(shareDBDoc, chatId, 'Thinking...');
+                }
+                reasoningContent += delta.reasoning;
+                updateAIScratchpad(shareDBDoc, chatId, reasoningContent);
+            }
+            else if (delta?.content) {
+                // Handle regular content tokens
+                if (!contentStarted) {
+                    contentStarted = true;
+                    if (reasoningStarted) {
+                        // Clear reasoning when content starts
+                        updateAIScratchpad(shareDBDoc, chatId, '');
+                    }
+                    // // Set initial content generation status
+                    // updateStreamingStatus(
+                    //   shareDBDoc,
+                    //   chatId,
+                    //   'Formulating a plan...',
+                    // );
+                }
+                const chunkContent = delta.content;
+                chunks.push(chunkContent);
+                await parser.processChunk(chunkContent);
+                fullContent += chunkContent;
+            }
+            else if (chunk.usage) {
+                // Handle usage information
+                DEBUG && console.log('Usage:', chunk.usage);
+            }
+            if (!generationId && chunk.id) {
+                generationId = chunk.id;
+            }
+        }
+        await parser.flushRemaining();
+        // Emit any remaining text chunk
+        await emitTextChunk();
+        // Complete final file if any
+        if (currentEditingFileName) {
+            await completeFileEditing(currentEditingFileName);
+        }
+        // // Capture the current state of files before applying changes
+        // const beforeFiles = createFilesSnapshot(
+        //   shareDBDoc.data.files,
+        // );
+        // Parse the full content to extract file changes
+        // export type FileCollection = Record<string, string>;
+        const newFilesUnformatted = parseMarkdownFiles(fullContent, 'bold').files;
+        // Run Prettier on `newFiles` before applying them,
+        // preserving empty files as empty
+        // since that is the cue to delete a file.
+        const newFilesFormatted = await formatFiles(newFilesUnformatted);
+        // Capture the current state of files before applying changes
+        let vizFilesBefore;
+        if (EMIT_FIXTURES) {
+            vizFilesBefore = JSON.parse(JSON.stringify(shareDBDoc.data.files));
+        }
+        // Apply all the edits at once
+        const vizFilesAfter = mergeFileChanges(shareDBDoc.data.files, newFilesFormatted);
+        const filesOp = updateFiles(shareDBDoc, vizFilesAfter);
+        if (EMIT_FIXTURES) {
+            const fs = await import('fs');
+            const path = await import('path');
+            const testCasesDir = path.resolve(process.cwd(), '../', 'fixtures');
+            if (!fs.existsSync(testCasesDir)) {
+                fs.mkdirSync(testCasesDir, { recursive: true });
+            }
+            const timestamp = new Date()
+                .toISOString()
+                .replace(/[:.]/g, '-');
+            const testCasePath = path.join(testCasesDir, `ai-chat-${timestamp}.json`);
+            const testCaseData = {
+                vizFilesBefore,
+                vizFilesAfter,
+                filesOp,
+            };
+            fs.writeFileSync(testCasePath, JSON.stringify(testCaseData, null, 2));
+            console.log(`AI chat test case written to ${testCasePath}`);
+        }
+        // Finalize streaming message
+        finalizeStreamingMessage(shareDBDoc, chatId);
+        return {
+            content: fullContent,
+            generationId: generationId,
+        };
+    };
+};

package/dist/llm-streaming-server/validation.js

@@ -0,0 +1,19 @@
+/**
+ * Validates incoming request data for AI chat messages
+ */
+export const validateRequest = (req, res) => {
+    const { content, chatId } = req.body;
+    if (!content || typeof content !== 'string') {
+        res.status(400).json({
+            error: 'Invalid request: content is required and must be a string',
+        });
+        return false;
+    }
+    if (!chatId || typeof chatId !== 'string') {
+        res.status(400).json({
+            error: 'Invalid request: chatId is required and must be a string',
+        });
+        return false;
+    }
+    return true;
+};

package/dist/server/aiChatHandler/index.js

@@ -1,8 +1,8 @@
-import { validateRequest } from './validation.js';
-import { ensureChatsExist, ensureChatExists, addUserMessage, setAIStatus, } from './chatOperations.js';
-import { createLLMFunction } from './llmStreaming.js';
-import { performAIEditing } from './aiEditing.js';
-import { handleError, handleBackgroundError, } from './errorHandling.js';
+import { validateRequest } from '../../llm-streaming-server/validation.js';
+import { ensureChatsExist, ensureChatExists, addUserMessage, setAIStatus, } from '../../llm-streaming-server/chatOperations.js';
+import { createLLMFunction } from '../../llm-streaming-server/llmStreaming.js';
+import { performAIEditing } from '../../llm-streaming-server/aiEditing.js';
+import { handleError, handleBackgroundError, } from '../../llm-streaming-server/errorHandling.js';
 import { createRunCodeFunction } from '../../runCode.js';
 import { createSubmitOperation } from '../../submitOperation.js';
 import { getGenerationMetadata } from 'editcodewithai';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -110,35 +110,35 @@
   },
   "homepage": "https://github.com/vizhub-core/vzcode#readme",
   "dependencies": {
-    "@codemirror/autocomplete": "^6.19.0",
+    "@codemirror/autocomplete": "^6.19.1",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.11",
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/lang-markdown": "^6.4.0",
-    "@codemirror/lint": "^6.9.0",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/lint": "^6.9.2",
     "@codemirror/state": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.38.5",
-    "@langchain/core": "^0.3.78",
-    "@langchain/openai": "^0.6.14",
-    "@lezer/highlight": "^1.2.1",
+    "@codemirror/view": "^6.38.6",
+    "@langchain/core": "^1.0.3",
+    "@langchain/openai": "^1.0.0",
+    "@lezer/highlight": "^1.2.3",
     "@livekit/components-react": "^2.9.15",
     "@replit/codemirror-indentation-markers": "^6.5.3",
     "@replit/codemirror-interact": "^6.3.1",
     "@replit/codemirror-lang-svelte": "^6.0.0",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@teamwork/websocket-json-stream": "^2.0.0",
-    "@typescript/vfs": "^1.6.1",
-    "@uiw/codemirror-theme-abcdef": "^4.25.2",
-    "@uiw/codemirror-theme-dracula": "^4.25.2",
-    "@uiw/codemirror-theme-eclipse": "^4.25.2",
-    "@uiw/codemirror-theme-github": "^4.25.2",
-    "@uiw/codemirror-theme-material": "^4.25.2",
-    "@uiw/codemirror-theme-nord": "^4.25.2",
-    "@uiw/codemirror-theme-okaidia": "^4.25.2",
-    "@uiw/codemirror-theme-xcode": "^4.25.2",
-    "@uiw/codemirror-themes": "^4.25.2",
+    "@typescript/vfs": "^1.6.2",
+    "@uiw/codemirror-theme-abcdef": "^4.25.3",
+    "@uiw/codemirror-theme-dracula": "^4.25.3",
+    "@uiw/codemirror-theme-eclipse": "^4.25.3",
+    "@uiw/codemirror-theme-github": "^4.25.3",
+    "@uiw/codemirror-theme-material": "^4.25.3",
+    "@uiw/codemirror-theme-nord": "^4.25.3",
+    "@uiw/codemirror-theme-okaidia": "^4.25.3",
+    "@uiw/codemirror-theme-xcode": "^4.25.3",
+    "@uiw/codemirror-themes": "^4.25.3",
     "@valtown/codemirror-ts": "^2.3.1",
     "@vizhub/runtime": "^4.5.0",
     "@vizhub/viz-types": "^0.5.0",
@@ -157,14 +157,14 @@
     "diff2html": "^3.4.52",
     "dotenv": "^17.2.3",
     "editcodewithai": "^2.4.0",
-    "eslint-linter-browserify": "^9.37.0",
+    "eslint-linter-browserify": "^9.39.1",
     "express": "^5.1.0",
     "ignore": "^7.0.5",
     "json0-ot-diff": "^1.1.2",
     "jszip": "^3.10.1",
     "livekit-server-sdk": "^2.14.0",
     "llm-code-format": "^3.1.0",
-    "lucide-react": "^0.545.0",
+    "lucide-react": "^0.553.0",
     "npm": "^11.6.2",
     "open": "^10.2.0",
     "prettier-plugin-svelte": "^3.4.0",
@@ -172,7 +172,7 @@
     "react-bootstrap": "^2.10.10",
     "react-dom": "^18",
     "react-markdown": "^10.1.0",
-    "react-router-dom": "^7.9.4",
+    "react-router-dom": "^7.9.5",
     "remark-gfm": "^4.0.1",
     "sharedb": "^5.2.2",
     "sharedb-client-browser": "^5.2.2",
@@ -181,31 +181,31 @@
     "ws": "^8.18.3"
   },
   "devDependencies": {
-    "@eslint/js": "^9.37.0",
-    "@tauri-apps/cli": "^2.8.4",
+    "@eslint/js": "^9.39.1",
+    "@tauri-apps/cli": "^2.9.3",
     "@types/d3-color": "^3.1.3",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@typescript-eslint/eslint-plugin": "^8.46.0",
-    "@typescript-eslint/parser": "^8.46.0",
-    "@vitejs/plugin-react": "^5.0.4",
+    "@typescript-eslint/eslint-plugin": "^8.46.3",
+    "@typescript-eslint/parser": "^8.46.3",
+    "@vitejs/plugin-react": "^5.1.0",
     "concurrently": "^9.2.1",
     "cross-env": "^10.1.0",
-    "eslint": "^9.37.0",
+    "eslint": "^9.39.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.0",
-    "globals": "^16.4.0",
-    "npm-check-updates": "^19.0.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "^16.5.0",
+    "npm-check-updates": "^19.1.2",
     "prettier": "^3.6.2",
-    "sass": "^1.93.2",
+    "sass": "^1.93.3",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
-    "vite": "^7.1.9",
-    "vitest": "^3.2.4"
+    "vite": "^7.2.2",
+    "vitest": "^4.0.8"
   },
   "optionalDependencies": {
-    "@rollup/rollup-darwin-arm64": "^4.52.4",
-    "@rollup/rollup-win32-x64-msvc": "^4.52.4"
+    "@rollup/rollup-darwin-arm64": "^4.53.1",
+    "@rollup/rollup-win32-x64-msvc": "^4.53.1"
   }
 }

package/src/client/CodeEditor/getOrCreateEditor.tsx

@@ -70,7 +70,7 @@ import { SparklesSVG } from '../Icons/SparklesSVG';
 import { MINIMAL_EXTENSIONS } from '../featureFlags';
 
 const DEBUG = false;
-const enableToDoPlugin = false;
+const enableToDoPlugin = true;
 
 // Define a StateField to store the file name.
 // This should be defined at the module level if it's to be imported by other modules.
@@ -138,6 +138,7 @@ const languageExtensions = {
   html: () => html(htmlConfig),
   css,
   md: markdown,
+  prompt: markdown,
   svelte,
 };
 
@@ -188,7 +189,7 @@ export const getOrCreateEditor = async ({
   esLintSource,
   rainbowBracketsEnabled = true,
   setIsAIChatOpen,
-  handleSendMessage,
+  setAIChatMessage,
 }: {
   // TODO pass this in from the outside
   paneId?: PaneId;
@@ -225,7 +226,7 @@ export const getOrCreateEditor = async ({
   ) => Promise<readonly Diagnostic[]>;
   rainbowBracketsEnabled?: boolean; // New parameter type
   setIsAIChatOpen: (isAIChatOpen: boolean) => void;
-  handleSendMessage: any; // TODO fix types
+  setAIChatMessage: (message: string) => void;
 }): Promise<ExtendedEditorCacheValue> => {
   // Cache hit
 
@@ -356,7 +357,10 @@ export const getOrCreateEditor = async ({
     );
 
     // Enable line wrapping for Markdown files
-    if (fileExtension === 'md') {
+    if (
+      fileExtension === 'md' ||
+      fileExtension === 'prompt'
+    ) {
       extensions.push(EditorView.lineWrapping);
     }
 
@@ -485,22 +489,25 @@ export const getOrCreateEditor = async ({
           wrap.style.alignItems = 'center';
           wrap.style.justifyContent = 'center';
           wrap.className = 'icon-button icon-button-dark';
+          wrap.style.cursor = 'pointer';
+
+          // Handle click directly on the wrapper element
+          wrap.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setAIChatMessage('Implement the TODO');
+            setIsAIChatOpen(true);
+          });
+
           const reactContainer =
             document.createElement('div');
           wrap.appendChild(reactContainer);
 
           const root = createRoot(reactContainer);
           root.render(
-            <div
-              onClick={() => {
-                setIsAIChatOpen(true);
-                // setAIChatMessage('Implement the TODO');
-                handleSendMessage('Implement the TODO');
-              }}
-            >
-              <SparklesSVG width={14} height={14} />
-            </div>,
+            <SparklesSVG width={14} height={14} />,
           );
+
           return wrap;
         }
 

package/src/client/CodeEditor/index.tsx

@@ -43,7 +43,7 @@ export const CodeEditor = ({
     codeEditorRef,
     enableAutoFollow,
     setIsAIChatOpen,
-    handleSendMessage,
+    setAIChatMessage,
   } = useContext(VZCodeContext);
 
   // Set `doc.data.isInteracting` to `true` when the user is interacting
@@ -117,7 +117,7 @@ export const CodeEditor = ({
         aiCopilotEndpoint,
         esLintSource,
         setIsAIChatOpen,
-        handleSendMessage,
+        setAIChatMessage,
       });
 
       if (isMounted) {
@@ -142,7 +142,7 @@ export const CodeEditor = ({
     aiCopilotEndpoint,
     esLintSource,
     setIsAIChatOpen,
-    handleSendMessage,
+    setAIChatMessage,
   ]);
 
   // Every time the active file switches from one file to another,

package/src/client/VZSidebar/AIChat/styles.scss

@@ -362,6 +362,25 @@
     margin-top: 1rem;
     margin-bottom: 0.5rem;
     color: inherit;
+    font-weight: 600;
+  }
+
+  h1 {
+    font-size: 1.25rem; // 20px at 16px base
+  }
+
+  h2 {
+    font-size: 1.125rem; // 18px at 16px base
+  }
+
+  h3 {
+    font-size: 1rem; // 16px at 16px base
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 0.875rem; // 14px at 16px base
   }
 
   ul,
@@ -784,10 +803,29 @@
     h6 {
       margin: 8px 0 6px 0;
       color: var(--vh-color-neutral-04);
+      font-weight: 600;
 
       &:first-child {
         margin-top: 0;
       }
     }
+
+    h1 {
+      font-size: 1.125rem; // 18px at 16px base
+    }
+
+    h2 {
+      font-size: 1rem; // 16px at 16px base
+    }
+
+    h3 {
+      font-size: 0.9375rem; // 15px at 16px base
+    }
+
+    h4,
+    h5,
+    h6 {
+      font-size: 0.8125rem; // 13px at 16px base
+    }
   }
 }

package/src/client/VZSidebar/FileTypeIcon.tsx

@@ -25,6 +25,7 @@ export function getExtensionIcon(fileName: string) {
     case 'json':
       return <JsonSVG />;
     case 'md':
+    case 'prompt':
       return <MarkdownSVG />;
     case 'html':
       return <HtmlSVG />;

package/src/client/VZSidebar/index.tsx

@@ -32,7 +32,7 @@ import { MicSVG } from '../Icons/MicSVG';
 import { sortFileTree } from '../sortFileTree';
 import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
 import { VZCodeContext } from '../VZCodeContext';
-import { AIChat } from './AIChat';
+import { AIChat } from '../../llm-streaming-ui/components/index.js';
 import { Listing } from './Listing';
 import { Search } from './Search';
 import { DeleteConfirmationModal } from './DeleteConfirmationModal';