vzcode 2.18.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/chatOperations.js

@@ -35,6 +35,7 @@ export const ensureChatExists = (shareDBDoc, chatId) => {
 };
 /**
  * Adds a user message to the chat
+ * Clears old messages to reflect that each prompt is a self-contained code transformation
  */
 export const addUserMessage = (shareDBDoc, chatId, content) => {
     const userMessage = {
@@ -49,10 +50,7 @@ export const addUserMessage = (shareDBDoc, chatId, content) => {
             ...shareDBDoc.data.chats,
             [chatId]: {
                 ...shareDBDoc.data.chats[chatId],
-                messages: [
-                    ...shareDBDoc.data.chats[chatId].messages,
-                    userMessage,
-                ],
+                messages: [userMessage], // Replace old messages with just the new user message
                 updatedAt: dateToTimestamp(new Date()),
             },
         },
@@ -281,6 +279,7 @@ export const updateFiles = (shareDBDoc, files) => {
     DEBUG && console.log('updateFiles op:');
     DEBUG && console.log(JSON.stringify(filesOp, null, 2));
     shareDBDoc.submitOp(filesOp);
+    return filesOp;
 };
 /**
  * Finds a file ID by searching for a matching file name

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/dist/server/aiChatHandler/llmStreaming.js

@@ -3,9 +3,15 @@ import { parseMarkdownFiles, StreamingMarkdownParser, } from 'llm-code-format';
 import { mergeFileChanges } from 'editcodewithai';
 import { updateFiles, updateAIScratchpad, createStreamingAIMessage, addStreamingEvent, updateStreamingStatus, finalizeStreamingMessage, } from './chatOperations.js';
 import { formatFiles } from '../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
  */
@@ -59,7 +65,7 @@ enableReasoningTokens = false, model, aiRequestOptions, }) => {
         };
         // Helper to complete file editing
         const completeFileEditing = async (fileName) => {
-            if (fileName && currentFileContent) {
+            if (fileName) {
                 DEBUG &&
                     console.log(`LLMStreaming: Completing file editing for ${fileName}`);
                 await addStreamingEvent(shareDBDoc, chatId, {
@@ -114,6 +120,27 @@ enableReasoningTokens = false, model, aiRequestOptions, }) => {
                     }
                 }
             },
+            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 = [];
@@ -197,11 +224,37 @@ enableReasoningTokens = false, model, aiRequestOptions, }) => {
         // 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
+        // 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 mergedChanges = mergeFileChanges(shareDBDoc.data.files, newFilesFormatted);
-        updateFiles(shareDBDoc, mergedChanges);
+        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 {

package/dist/server/prettier.js

@@ -67,6 +67,8 @@ export const formatFile = async (fileText, fileName) => {
         return null;
     }
 };
+// Keys are file names, values are file text contents
+//export type FileCollection = Record<string, string>;
 /**
  * Formats multiple files using Prettier
  * Only formats files that have supported extensions
@@ -74,24 +76,24 @@ export const formatFile = async (fileText, fileName) => {
  */
 export const formatFiles = async (fileCollection) => {
     const results = {};
-    const targetFileIds = Object.keys(fileCollection);
+    const targetFileNames = Object.keys(fileCollection);
     // Process files in parallel for better performance
-    const formatPromises = targetFileIds.map(async (fileId) => {
-        const fileData = fileCollection[fileId];
-        if (!fileData)
+    const formatPromises = targetFileNames.map(async (fileName) => {
+        const fileText = fileCollection[fileName];
+        results[fileName] = fileText;
+        // Preserve empty files as empty,
+        // since this is the cue to delete a file.
+        if (!fileText || fileText.trim() === '') {
             return;
-        // Handle both FileCollection format and test format
-        const fileName = typeof fileData === 'string'
-            ? fileId
-            : fileData.name;
-        const fileText = typeof fileData === 'string'
-            ? fileData
-            : fileData.text;
-        if (!fileText)
-            return;
-        const formatted = await formatFile(fileText, fileName);
-        if (formatted !== null && formatted !== fileText) {
-            results[fileId] = formatted;
+        }
+        try {
+            const formatted = await formatFile(fileText, fileName);
+            if (formatted !== null && formatted !== fileText) {
+                results[fileName] = formatted;
+            }
+        }
+        catch (error) {
+            console.error(`Error formatting ${fileName}:`, error);
         }
     });
     await Promise.all(formatPromises);

package/dist/utils/fileDiff.js

@@ -1,4 +1,21 @@
 import { createTwoFilesPatch } from 'diff';
+// Special marker to indicate a file deletion
+export const FILE_DELETION_MARKER = '__FILE_DELETED__';
+/**
+ * Check if a diff string represents a file deletion
+ */
+export function isFileDeletion(diffString) {
+    return diffString.startsWith(FILE_DELETION_MARKER);
+}
+/**
+ * Extract file name from a deletion marker
+ */
+export function getDeletedFileName(diffString) {
+    if (!isFileDeletion(diffString)) {
+        return '';
+    }
+    return diffString.substring(FILE_DELETION_MARKER.length + 1);
+}
 /**
  * Generate a unified diff for a single file using the diff library
  */
@@ -7,6 +24,10 @@ export function generateFileUnifiedDiff(fileId, fileName, beforeContent, afterCo
     if (beforeContent === afterContent) {
         return '';
     }
+    // Handle file deletion case - when file existed before but is now empty/deleted
+    if (beforeContent && !afterContent) {
+        return `${FILE_DELETION_MARKER}:${fileName}`;
+    }
     // Use the diff library's createTwoFilesPatch function to generate unified diff
     const unifiedDiff = createTwoFilesPatch(fileName, fileName, beforeContent, afterContent, '', '', { context: 3 });
     return unifiedDiff;
@@ -60,7 +81,10 @@ export function parseUnifiedDiffStats(unifiedDiff) {
 }
 /**
  * Combine multiple unified diffs into a single diff string
+ * Note: File deletion markers are excluded from combination
  */
 export function combineUnifiedDiffs(unifiedDiffs) {
-    return Object.values(unifiedDiffs).join('\n');
+    return Object.values(unifiedDiffs)
+        .filter((diff) => !isFileDeletion(diff))
+        .join('\n');
 }