vzcode 2.2.0 → 2.3.0

package/dist/cli.js

@@ -0,0 +1,113 @@
+#!/usr/bin/env node
+import { spawn } from 'child_process';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+// Get the directory of the current module
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+// Function to find the Tauri binary
+function findTauriApp() {
+    // Look for the Tauri binary in common locations
+    const possiblePaths = [
+        // Development location (when running from source)
+        path.join(__dirname, '..', 'src-tauri', 'target', 'debug', 'vzcode'),
+        path.join(__dirname, '..', 'src-tauri', 'target', 'debug', 'vzcode.exe'),
+        // Release location (when running from built package)
+        path.join(__dirname, '..', 'src-tauri', 'target', 'release', 'vzcode'),
+        path.join(__dirname, '..', 'src-tauri', 'target', 'release', 'vzcode.exe'),
+        // MacOS app bundle
+        path.join(__dirname, '..', 'src-tauri', 'target', 'debug', 'vzcode.app', 'Contents', 'MacOS', 'vzcode'),
+        path.join(__dirname, '..', 'src-tauri', 'target', 'release', 'vzcode.app', 'Contents', 'MacOS', 'vzcode'),
+    ];
+    for (const binaryPath of possiblePaths) {
+        if (fs.existsSync(binaryPath)) {
+            return binaryPath;
+        }
+    }
+    return null;
+}
+// Function to launch the Tauri app
+function launchTauriApp(workingDirectory) {
+    const tauriBinary = findTauriApp();
+    if (!tauriBinary) {
+        console.error('VZCode desktop app not found. Please build it first with: npm run tauri:build');
+        console.error('Falling back to launching browser version...');
+        launchBrowserVersion(workingDirectory);
+        return;
+    }
+    console.log(`Launching VZCode desktop app from: ${workingDirectory}`);
+    // First start the server in the background
+    startServerInBackground(workingDirectory);
+    // Give the server a moment to start, then launch Tauri
+    setTimeout(() => {
+        const child = spawn(tauriBinary, [], {
+            cwd: workingDirectory,
+            stdio: 'inherit',
+            detached: true,
+        });
+        // Allow the parent process to exit while keeping the child running
+        child.unref();
+    }, 2000);
+}
+// Function to start the server in the background
+function startServerInBackground(workingDirectory) {
+    // Start the server process in the background
+    const serverPath = path.join(__dirname, 'server', 'index.js');
+    const serverChild = spawn('node', [serverPath], {
+        cwd: workingDirectory,
+        stdio: ['ignore', 'pipe', 'pipe'],
+        detached: true,
+    });
+    // Don't block on the server process
+    serverChild.unref();
+    // Log server output for debugging
+    if (serverChild.stdout) {
+        serverChild.stdout.on('data', (data) => {
+            console.log('Server:', data.toString());
+        });
+    }
+    if (serverChild.stderr) {
+        serverChild.stderr.on('data', (data) => {
+            console.error('Server error:', data.toString());
+        });
+    }
+}
+// Fallback function to launch the browser version
+async function launchBrowserVersion(workingDirectory) {
+    const { default: open } = await import('open');
+    const serverModule = await import('./server/index.js');
+    // Note: The server/index.js will use process.cwd() automatically
+    // and we're already in the correct working directory
+    console.log(`Starting VZCode server from: ${workingDirectory}`);
+}
+// Main CLI function
+function main() {
+    const workingDirectory = process.cwd();
+    // Parse command line arguments
+    const args = process.argv.slice(2);
+    if (args.includes('--help') || args.includes('-h')) {
+        console.log('VZCode - Multiplayer Code Editor');
+        console.log('');
+        console.log('Usage: vzcode [options]');
+        console.log('');
+        console.log('Options:');
+        console.log('  --help, -h     Show this help message');
+        console.log('  --browser      Force browser version instead of desktop app');
+        console.log('  --port=<port>  Specify port for server (default: 3030)');
+        console.log('');
+        console.log('Examples:');
+        console.log('  vzcode                    # Launch desktop app in current directory');
+        console.log('  vzcode --browser          # Launch browser version');
+        console.log('  vzcode --port=4000        # Start server on port 4000');
+        return;
+    }
+    if (args.includes('--browser')) {
+        launchBrowserVersion(workingDirectory);
+    }
+    else {
+        launchTauriApp(workingDirectory);
+    }
+}
+// Run the CLI
+main();

package/dist/index.html

@@ -20,8 +20,8 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-CpxqGhXj.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BM8tDh6M.css">
+    <script type="module" crossorigin src="/assets/index-DuUjtrt6.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BoFeK4GL.css">
   </head>
   <body>
     <div id="root"></div>

package/{src/ot.ts → dist/ot.js}

@@ -4,21 +4,9 @@
 import OTJSON1Presence from 'sharedb-client-browser/dist/ot-json1-presence-umd.cjs';
 import jsondiff from 'json0-ot-diff';
 import diffMatchPatch from 'diff-match-patch';
-
-export const { json1Presence, textUnicode } =
-  OTJSON1Presence;
-
+export const { json1Presence, textUnicode } = OTJSON1Presence;
 // The OT type used throughout the codebase.
 export const otType = json1Presence.type;
-
 // Applies an OT op to an object.
 export const apply = otType.apply;
-
-export const diff = (a, b) =>
-  jsondiff(
-    a,
-    b,
-    diffMatchPatch,
-    json1Presence,
-    textUnicode,
-  );
+export const diff = (a, b) => jsondiff(a, b, diffMatchPatch, json1Presence, textUnicode);

package/{src/randomId.ts → dist/randomId.js}

@@ -1,13 +1,12 @@
 // Generate a random ID string consisting of digits.
 const numDigits = 8;
 export const randomId = () => {
-  let randomString = '';
-  for (let i = 0; i < numDigits; i++) {
-    randomString += Math.floor(Math.random() * 10);
-  }
-  return randomString;
+    let randomString = '';
+    for (let i = 0; i < numDigits; i++) {
+        randomString += Math.floor(Math.random() * 10);
+    }
+    return randomString;
 };
-
 // const probabilityOfCollision =
 //   1 - Math.pow(1 - 1 / Math.pow(10, numDigits), numRuns);
 // Using this formula, the probability of generating the same ID twice

package/dist/runCode.js

@@ -0,0 +1,20 @@
+import { generateRunId } from '@vizhub/viz-utils';
+/**
+ * Creates a runCode function that triggers code execution by changing the `runId` in the content.
+ * This works for both client-side (with submitOperation) and server-side (with ShareDB document).
+ */
+export const createRunCodeFunction = (submitOperation) => () => {
+    submitOperation((content) => ({
+        ...content,
+        runId: generateRunId(),
+    }));
+};
+/**
+ * Creates a runCodeRef object compatible with React refs.
+ * This is useful for maintaining compatibility with existing code that expects a ref.
+ */
+export const createRunCodeRef = (submitOperation) => {
+    return {
+        current: createRunCodeFunction(submitOperation),
+    };
+};

package/dist/server/aiChatHandler/aiEditing.js

@@ -0,0 +1,89 @@
+import { assembleFullPrompt, prepareFilesForPrompt, } from 'editcodewithai';
+import { formatMarkdownFiles } from 'llm-code-format';
+import { createFilesSnapshot, generateFilesUnifiedDiff, } from '../../utils/fileDiff.js';
+import { formatFiles } from '../prettier.js';
+import { createSubmitOperation } from '../../submitOperation.js';
+// Dev flag for waiting 1 second before starting the LLM function.
+// Useful for debugging and testing purposes, e.g. checking the typing indicator.
+const delayStart = false;
+/**
+ * Performs AI chat without editing - just generates a response
+ */
+export const performAIChat = async ({ prompt, shareDBDoc, llmFunction, }) => {
+    const preparedFiles = prepareFilesForPrompt(shareDBDoc.data.files);
+    const filesContext = formatMarkdownFiles(preparedFiles);
+    // 2. Assemble the final prompt for Q&A mode
+    const fullPrompt = assembleFullPrompt({
+        filesContext,
+        prompt,
+        editFormat: 'whole',
+    });
+    if (delayStart) {
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+    }
+    // Call the LLM function which will handle streaming but won't edit files
+    const result = await llmFunction(fullPrompt);
+    return {
+        content: result.content,
+        generationId: result.generationId,
+        diffData: {}, // No file changes in ask mode
+    };
+};
+/**
+ * Performs AI editing operations using streaming with incremental OT operations
+ */
+export const performAIEditing = async ({ prompt, shareDBDoc, llmFunction, runCode, }) => {
+    // 1. Capture the current state of files before editing
+    const beforeFiles = createFilesSnapshot(shareDBDoc.data.files);
+    const preparedFiles = prepareFilesForPrompt(shareDBDoc.data.files);
+    const filesContext = formatMarkdownFiles(preparedFiles);
+    // 2. Assemble the final prompt
+    const fullPrompt = assembleFullPrompt({
+        filesContext,
+        prompt,
+        editFormat: 'whole',
+    });
+    if (delayStart) {
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+    }
+    // Call the LLM function which will handle streaming and incremental file updates
+    const result = await llmFunction(fullPrompt);
+    // 3. Run Prettier on changed files before running code
+    const afterLLMFiles = createFilesSnapshot(shareDBDoc.data.files);
+    // Find files that were changed by the AI
+    const changedFileIds = Object.keys(afterLLMFiles).filter((fileId) => beforeFiles[fileId]?.text !==
+        afterLLMFiles[fileId]?.text);
+    if (changedFileIds.length > 0) {
+        // Format the changed files
+        const formattedFiles = await formatFiles(shareDBDoc.data.files, changedFileIds);
+        // Apply formatted versions to shareDBDoc if formatting succeeded
+        if (Object.keys(formattedFiles).length > 0) {
+            const submitOperation = createSubmitOperation(shareDBDoc);
+            submitOperation((document) => {
+                const updatedFiles = { ...document.files };
+                // Apply each formatted file
+                Object.entries(formattedFiles).forEach(([fileId, formattedText]) => {
+                    if (updatedFiles[fileId]) {
+                        updatedFiles[fileId] = {
+                            ...updatedFiles[fileId],
+                            text: formattedText,
+                        };
+                    }
+                });
+                return {
+                    ...document,
+                    files: updatedFiles,
+                };
+            });
+        }
+    }
+    runCode();
+    // 4. Capture the state of files after editing and formatting, then generate diff
+    const afterFiles = createFilesSnapshot(shareDBDoc.data.files);
+    const diffData = generateFilesUnifiedDiff(beforeFiles, afterFiles);
+    return {
+        content: result.content,
+        generationId: result.generationId,
+        diffData,
+    };
+};

package/dist/server/aiChatHandler/chatOperations.js

@@ -0,0 +1,360 @@
+import { dateToTimestamp, } from '@vizhub/viz-utils';
+import { randomId } from '../../randomId.js';
+import { diff } from '../../ot.js';
+/**
+ * Ensures the chats object exists in the ShareDB document
+ */
+export const ensureChatsExist = (shareDBDoc) => {
+    if (!shareDBDoc.data.chats) {
+        const op = diff(shareDBDoc.data, {
+            ...shareDBDoc.data,
+            chats: {},
+        });
+        shareDBDoc.submitOp(op);
+    }
+};
+/**
+ * Ensures a specific chat exists in the ShareDB document
+ */
+export const ensureChatExists = (shareDBDoc, chatId) => {
+    if (!shareDBDoc.data.chats[chatId]) {
+        const op = diff(shareDBDoc.data, {
+            ...shareDBDoc.data,
+            chats: {
+                ...shareDBDoc.data.chats,
+                [chatId]: {
+                    id: chatId,
+                    messages: [],
+                    createdAt: dateToTimestamp(new Date()),
+                    updatedAt: dateToTimestamp(new Date()),
+                },
+            },
+        });
+        shareDBDoc.submitOp(op);
+    }
+};
+/**
+ * Adds a user message to the chat
+ */
+export const addUserMessage = (shareDBDoc, chatId, content) => {
+    const userMessage = {
+        id: `user-${Date.now()}`,
+        role: 'user',
+        content: content,
+        timestamp: dateToTimestamp(new Date()),
+    };
+    const userMessageOp = diff(shareDBDoc.data, {
+        ...shareDBDoc.data,
+        chats: {
+            ...shareDBDoc.data.chats,
+            [chatId]: {
+                ...shareDBDoc.data.chats[chatId],
+                messages: [
+                    ...shareDBDoc.data.chats[chatId].messages,
+                    userMessage,
+                ],
+                updatedAt: dateToTimestamp(new Date()),
+            },
+        },
+    });
+    shareDBDoc.submitOp(userMessageOp);
+    return userMessage;
+};
+/**
+ * Updates AI status in the chat
+ */
+export const updateAIStatus = (shareDBDoc, chatId, status) => {
+    const op = diff(shareDBDoc.data, {
+        ...shareDBDoc.data,
+        chats: {
+            ...shareDBDoc.data.chats,
+            [chatId]: {
+                ...shareDBDoc.data.chats[chatId],
+                aiStatus: status,
+            },
+        },
+    });
+    shareDBDoc.submitOp(op);
+};
+/**
+ * Updates AI scratchpad content
+ */
+export const updateAIScratchpad = (shareDBDoc, chatId, content) => {
+    const op = diff(shareDBDoc.data, {
+        ...shareDBDoc.data,
+        chats: {
+            ...shareDBDoc.data.chats,
+            [chatId]: {
+                ...shareDBDoc.data.chats[chatId],
+                aiScratchpad: content,
+            },
+        },
+    });
+    // op is `null` if there are no changes
+    // This can happen if the content is the same as before
+    // In that case, we don't need to submit an operation
+    if (op) {
+        shareDBDoc.submitOp(op);
+    }
+};
+/**
+ * Clears AI scratchpad and updates status
+ */
+export const clearAIScratchpadAndStatus = (shareDBDoc, chatId, status) => {
+    const op = diff(shareDBDoc.data, {
+        ...shareDBDoc.data,
+        chats: {
+            ...shareDBDoc.data.chats,
+            [chatId]: {
+                ...shareDBDoc.data.chats[chatId],
+                aiScratchpad: undefined,
+                aiStatus: status,
+            },
+        },
+    });
+    shareDBDoc.submitOp(op);
+};
+/**
+ * Creates an initial empty AI message for streaming
+ */
+export const createAIMessage = (shareDBDoc, chatId) => {
+    const aiMessage = {
+        id: `assistant-${Date.now()}`,
+        role: 'assistant',
+        content: '',
+        timestamp: dateToTimestamp(new Date()),
+    };
+    const messageOp = diff(shareDBDoc.data, {
+        ...shareDBDoc.data,
+        chats: {
+            ...shareDBDoc.data.chats,
+            [chatId]: {
+                ...shareDBDoc.data.chats[chatId],
+                messages: [
+                    ...shareDBDoc.data.chats[chatId].messages,
+                    aiMessage,
+                ],
+                updatedAt: dateToTimestamp(new Date()),
+            },
+        },
+    });
+    shareDBDoc.submitOp(messageOp);
+    return aiMessage.id;
+};
+/**
+ * Updates the content of an AI message during streaming
+ */
+export const updateAIMessageContent = (shareDBDoc, chatId, messageId, content) => {
+    const chat = shareDBDoc.data.chats[chatId];
+    const messageIndex = chat.messages.findIndex((msg) => msg.id === messageId);
+    if (messageIndex === -1) {
+        console.warn(`AI message with id ${messageId} not found`);
+        return;
+    }
+    const updatedMessages = [...chat.messages];
+    updatedMessages[messageIndex] = {
+        ...updatedMessages[messageIndex],
+        content,
+    };
+    const messageOp = diff(shareDBDoc.data, {
+        ...shareDBDoc.data,
+        chats: {
+            ...shareDBDoc.data.chats,
+            [chatId]: {
+                ...chat,
+                messages: updatedMessages,
+                updatedAt: dateToTimestamp(new Date()),
+            },
+        },
+    });
+    shareDBDoc.submitOp(messageOp);
+};
+/**
+ * Sets the AI status for a chat
+ */
+export const setAIStatus = (shareDBDoc, chatId, status) => {
+    const op = diff(shareDBDoc.data, {
+        ...shareDBDoc.data,
+        chats: {
+            ...shareDBDoc.data.chats,
+            [chatId]: {
+                ...shareDBDoc.data.chats[chatId],
+                aiStatus: status,
+                updatedAt: dateToTimestamp(new Date()),
+            },
+        },
+    });
+    shareDBDoc.submitOp(op);
+};
+/**
+ * Finalizes an AI message by clearing temporary fields
+ */
+export const finalizeAIMessage = (shareDBDoc, chatId) => {
+    const op = diff(shareDBDoc.data, {
+        ...shareDBDoc.data,
+        chats: {
+            ...shareDBDoc.data.chats,
+            [chatId]: {
+                ...shareDBDoc.data.chats[chatId],
+                aiScratchpad: undefined,
+                aiStatus: undefined,
+                updatedAt: dateToTimestamp(new Date()),
+            },
+        },
+    });
+    shareDBDoc.submitOp(op);
+};
+/**
+ * Adds diff data to the most recent AI message
+ */
+export const addDiffToAIMessage = (shareDBDoc, chatId, diffData, beforeCommitId) => {
+    const chat = shareDBDoc.data.chats[chatId];
+    const messages = [...chat.messages];
+    // Find the most recent AI message
+    const lastAIMessageIndex = messages.length - 1;
+    if (lastAIMessageIndex >= 0 &&
+        messages[lastAIMessageIndex].role === 'assistant') {
+        const newMessage = {
+            ...messages[lastAIMessageIndex],
+            diffData,
+            ...(beforeCommitId && { beforeCommitId }), // Add beforeCommitId for VizHub integration
+        };
+        // Use type assertion to extend the message with diffData
+        messages[lastAIMessageIndex] = newMessage;
+        const messageOp = diff(shareDBDoc.data, {
+            ...shareDBDoc.data,
+            chats: {
+                ...shareDBDoc.data.chats,
+                [chatId]: {
+                    ...chat,
+                    messages,
+                    updatedAt: dateToTimestamp(new Date()),
+                },
+            },
+        });
+        shareDBDoc.submitOp(messageOp);
+    }
+};
+/**
+ * Adds an AI response message to the chat (legacy function, kept for compatibility)
+ */
+export const addAIMessage = (shareDBDoc, chatId, content) => {
+    const aiResponse = {
+        id: Date.now() + 1,
+        role: 'assistant',
+        content: content || 'AI edit completed successfully.',
+        timestamp: dateToTimestamp(new Date()),
+    };
+    const messageOp = diff(shareDBDoc.data, {
+        ...shareDBDoc.data,
+        chats: {
+            ...shareDBDoc.data.chats,
+            [chatId]: {
+                ...shareDBDoc.data.chats[chatId],
+                messages: [
+                    ...shareDBDoc.data.chats[chatId].messages,
+                    aiResponse,
+                ],
+                updatedAt: dateToTimestamp(new Date()),
+                aiStatus: undefined,
+            },
+        },
+    });
+    shareDBDoc.submitOp(messageOp);
+    return aiResponse;
+};
+/**
+ * Updates files in the ShareDB document
+ */
+export const updateFiles = (shareDBDoc, files) => {
+    const filesOp = diff(shareDBDoc.data, {
+        ...shareDBDoc.data,
+        files,
+    });
+    shareDBDoc.submitOp(filesOp);
+};
+/**
+ * Finds a file ID by searching for a matching file name
+ */
+export const resolveFileId = (fileName, shareDBDoc) => {
+    const files = shareDBDoc.data.files;
+    // Search through all files to find matching name
+    for (const [fileId, file] of Object.entries(files)) {
+        if (file.name === fileName) {
+            return fileId;
+        }
+    }
+    // If file doesn't exist, return null
+    return null;
+};
+/**
+ * Creates a new file with a random ID
+ */
+export const createNewFile = (shareDBDoc, fileName) => {
+    // Generate a new random file ID
+    const newFileId = randomId();
+    const newState = {
+        ...shareDBDoc.data,
+        files: {
+            ...shareDBDoc.data.files,
+            [newFileId]: {
+                name: fileName,
+                text: '',
+            },
+        },
+    };
+    const op = diff(shareDBDoc.data, newState);
+    shareDBDoc.submitOp(op);
+    return newFileId;
+};
+/**
+ * Ensures a file exists, creating it if necessary
+ */
+export const ensureFileExists = (shareDBDoc, fileName) => {
+    let fileId = resolveFileId(fileName, shareDBDoc);
+    if (!fileId) {
+        // File doesn't exist, create it
+        fileId = createNewFile(shareDBDoc, fileName);
+    }
+    return fileId;
+};
+/**
+ * Clears the content of a file
+ */
+export const clearFileContent = (shareDBDoc, fileId) => {
+    const currentFile = shareDBDoc.data.files[fileId];
+    if (currentFile && currentFile.text) {
+        // Clear the file content
+        const newState = {
+            ...shareDBDoc.data,
+            files: {
+                ...shareDBDoc.data.files,
+                [fileId]: {
+                    ...currentFile,
+                    text: '',
+                },
+            },
+        };
+        const op = diff(shareDBDoc.data, newState);
+        shareDBDoc.submitOp(op);
+    }
+};
+/**
+ * Appends a line to a file using OT operations
+ */
+export const appendLineToFile = (shareDBDoc, fileId, line) => {
+    const currentFile = shareDBDoc.data.files[fileId];
+    const currentContent = currentFile?.text || '';
+    const newContent = currentContent + line + '\n';
+    const newDocState = {
+        ...shareDBDoc.data,
+        files: {
+            ...shareDBDoc.data.files,
+            [fileId]: {
+                ...currentFile,
+                text: newContent,
+            },
+        },
+    };
+    shareDBDoc.submitOp(diff(shareDBDoc.data, newDocState));
+};

package/dist/server/aiChatHandler/errorHandling.js

@@ -0,0 +1,49 @@
+import { dateToTimestamp } from '@vizhub/viz-utils';
+import { diff } from '../../ot.js';
+/**
+ * Handles errors by adding an error message to the chat and clearing AI state
+ */
+export const handleError = (shareDBDoc, chatId, error, res) => {
+    console.error('[handleAIChatMessage] error:', error);
+    // Clear scratchpad and add error message on error
+    try {
+        const errorResponse = {
+            id: `error-${Date.now()}`,
+            role: 'assistant',
+            content: 'Sorry, I encountered an error while processing your message. Please try again.',
+            timestamp: dateToTimestamp(new Date()),
+        };
+        const errorOp = diff(shareDBDoc.data, {
+            ...shareDBDoc.data,
+            chats: {
+                ...shareDBDoc.data.chats,
+                [chatId]: {
+                    ...shareDBDoc.data.chats[chatId],
+                    messages: [
+                        ...shareDBDoc.data.chats[chatId].messages,
+                        errorResponse,
+                    ],
+                    aiScratchpad: undefined,
+                    aiStatus: undefined,
+                    updatedAt: dateToTimestamp(new Date()),
+                },
+            },
+        });
+        shareDBDoc.submitOp(errorOp);
+    }
+    catch (opError) {
+        console.error('[handleAIChatMessage] error handling error state:', opError);
+    }
+    if (res) {
+        res.status(500).json({
+            error: 'Internal server error',
+            message: error.message,
+        });
+    }
+};
+/**
+ * Handles errors in background processing (without HTTP response)
+ */
+export const handleBackgroundError = (shareDBDoc, chatId, error) => {
+    handleError(shareDBDoc, chatId, error, null);
+};