npm - vzcode - Versions diffs - 1.39.0 → 1.41.0 - Mend

vzcode 1.39.0 → 1.41.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/dist/index.html CHANGED Viewed

@@ -20,7 +20,7 @@
       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-0y6ZxgSv.js"></script>
+    <script type="module" crossorigin src="/assets/index-DPAeYEiH.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DKLiE98a.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,17 +1,17 @@
 {
   "name": "vzcode",
-  "version": "1.39.0",
+  "version": "1.41.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
-  "bin": "src/server/index.js",
+  "bin": "src/server/index.ts",
   "files": [
     "dist/**",
     "src/**"
   ],
   "scripts": {
     "test": "vitest run",
-    "test-interactive": "cd test/sampleDirectories/kitchenSink && node ../../../src/server/index.js",
+    "test-interactive": "cd test/sampleDirectories/kitchenSink && node --import 'data:text/javascript,import { register } from \"node:module\"; import { pathToFileURL } from \"node:url\"; register(\"ts-node/esm\", pathToFileURL(\"./\"));' ../../../src/server/index.ts",
     "prettier": "prettier {*.*,**/*.*} --write",
     "typecheck": "tsc --noEmit",
     "dev": "cross-env EDITOR_PORT=5173 concurrently \"npm run test-interactive\" \"vite\"",
@@ -115,7 +115,7 @@
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.38.1",
     "@langchain/core": "^0.3.66",
-    "@langchain/openai": "^0.6.2",
+    "@langchain/openai": "^0.6.3",
     "@lezer/highlight": "^1.2.1",
     "@livekit/components-react": "^2.9.14",
     "@replit/codemirror-indentation-markers": "^6.5.3",
@@ -134,33 +134,34 @@
     "@uiw/codemirror-theme-xcode": "^4.24.1",
     "@uiw/codemirror-themes": "^4.24.1",
     "@valtown/codemirror-ts": "^2.3.1",
+    "@vizhub/runtime": "^4.1.0",
     "@vizhub/viz-types": "^0.3.0",
     "@vizhub/viz-utils": "^1.3.0",
     "body-parser": "^2.2.0",
     "codemirror": "^6.0.2",
     "codemirror-copilot": "^0.0.7",
-    "codemirror-ot": "^4.5.0",
+    "codemirror-ot": "^4.6.0",
     "color-hash": "^2.0.2",
     "comlink": "^4.4.2",
     "d3-array": "^3.2.4",
     "diff-match-patch": "^1.0.5",
-    "dotenv": "^17.2.0",
-    "editcodewithai": "^2.2.0",
+    "dotenv": "^17.2.1",
+    "editcodewithai": "^2.3.0",
     "eslint-linter-browserify": "^9.31.0",
     "express": "^5.1.0",
     "ignore": "^7.0.5",
     "json0-ot-diff": "^1.1.2",
     "livekit-server-sdk": "^2.13.1",
-    "llm-code-format": "^2.1.0",
+    "llm-code-format": "^3.0.0",
     "ngrok": "^5.0.0-beta.2",
-    "npm": "^11.4.2",
+    "npm": "^11.5.1",
     "open": "^10.2.0",
     "prettier-plugin-svelte": "^3.4.0",
     "react": "^18",
     "react-bootstrap": "^2.10.10",
     "react-dom": "^18",
     "react-markdown": "^10.1.0",
-    "react-router-dom": "^7.7.0",
+    "react-router-dom": "^7.7.1",
     "remark-gfm": "^4.0.1",
     "sharedb": "^5.2.2",
     "sharedb-client-browser": "^5.2.2",
@@ -169,19 +170,20 @@
     "ws": "^8.18.3"
   },
   "devDependencies": {
-    "@eslint/js": "^9.31.0",
+    "@eslint/js": "^9.32.0",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@vitejs/plugin-react": "^4.7.0",
     "concurrently": "^9.2.0",
     "cross-env": "^7.0.3",
-    "eslint": "^9.31.0",
+    "eslint": "^9.32.0",
     "globals": "^16.3.0",
-    "npm-check-updates": "^18.0.1",
+    "npm-check-updates": "^18.0.2",
     "prettier": "^3.6.2",
     "sass": "^1.89.2",
+    "ts-node": "^10.9.2",
     "typescript": "^5.8.3",
-    "vite": "^7.0.5",
+    "vite": "^7.0.6",
     "vitest": "^3.2.4"
   },
   "optionalDependencies": {

package/src/client/CodeEditor/getOrCreateEditor.ts CHANGED Viewed

@@ -166,7 +166,6 @@ export const getOrCreateEditor = async ({
   paneId = 'root',
   fileId,
   shareDBDoc,
-  content,
   filesPath,
   localPresence,
   docPresence,
@@ -194,10 +193,7 @@ export const getOrCreateEditor = async ({
   // This can be `undefined` in the case where we are
   // viewing files read-only, in which case multiplayer
   // editing is not enabled.
-  shareDBDoc: ShareDBDoc<VizContent> | undefined;
-  // The initial content to present.
-  content: VizContent;
+  shareDBDoc: ShareDBDoc<VizContent>;
   filesPath: string[];
   localPresence: any;
@@ -233,6 +229,7 @@ export const getOrCreateEditor = async ({
   // Compute `text` and `fileExtension` from the ShareDB document.
   const textPath = [...filesPath, fileId, 'text'];
   const namePath = [...filesPath, fileId, 'name'];
+  const content = shareDBDoc.data;
   const text = getAtPath(content, textPath);
   const name = getAtPath(content, namePath);

package/src/client/CodeEditor/index.tsx CHANGED Viewed

@@ -91,13 +91,13 @@ export const CodeEditor = ({
   // Get the editor corresponding to the active file.
   // Looks in `editorCache` first, and if not found, creates a new editor.
   useEffect(() => {
+    if (!shareDBDoc) return;
     let isMounted = true;
     const initEditor = async () => {
       const editor = await getOrCreateEditor({
         fileId: activePane.activeFileId,
         shareDBDoc,
-        content,
         filesPath,
         localPresence,
         docPresence,

package/src/client/CodeEditor/json1PresenceDisplay.ts CHANGED Viewed

@@ -12,7 +12,7 @@ import {
   Username,
 } from '../../types';
-const DEBUG = true;
+const DEBUG = false;
 // Deals with receiving the broadcasted presence cursor locations
 // from other clients and displaying them.
@@ -57,6 +57,7 @@ export const json1PresenceDisplay = ({
         //   this.scrollToCursor(view);
         // });
         // Receive remote presence changes.
+        // Receive remote presence changes.
         docPresence.on(
           'receive',
           (id: PresenceId, presence: Presence) => {
@@ -64,37 +65,35 @@ export const json1PresenceDisplay = ({
               console.log(
                 `Received presence for id ${id}`,
                 presence,
-              ); // Debug statement
+              );
             }
-            // If presence === null, the user has disconnected / exited
+            // If presence is null, the user has disconnected.
+            // We must remove them from our local state.
             if (!presence) {
               delete presenceState[id];
-              return;
-            }
-            // Check if the presence is for the current file or not.
-            const isPresenceInCurrentFile = pathMatches(
-              path,
-              presence,
-            );
-            // If the presence is in the current file, update the presence state.
-            if (isPresenceInCurrentFile) {
-              presenceState[id] = presence;
-            } else if (presence) {
-              // Otherwise, delete the presence state.
-              delete presenceState[id];
+              // Also remove their cursor position to prevent errors.
+              delete this.cursorPosition[id];
+            } else {
+              // Otherwise, the user is active. Check if the presence
+              // is for the current file.
+              const isPresenceInCurrentFile = pathMatches(
+                path,
+                presence,
+              );
-              // Note: Auto-follow tab opening is now handled by usePresenceAutoFollow hook
-              // in VZCodeContext, which works independently of CodeMirror extensions
+              // If it's the current file, add/update their state.
+              if (isPresenceInCurrentFile) {
+                presenceState[id] = presence;
+              } else {
+                // If it's for another file, remove them from this view's state.
+                delete presenceState[id];
+                delete this.cursorPosition[id];
+              }
             }
-            // Update decorations to reflect new presence state.
-            // TODO consider mutating this rather than recomputing it on each change.
             const presenceDecorations = [];
-            // Object.keys(presenceState).map((id) => {
             for (const id of Object.keys(presenceState)) {
               const presence: Presence = presenceState[id];
               const { start, end } = presence;
@@ -104,7 +103,7 @@ export const json1PresenceDisplay = ({
                 presence.username,
               );
               const { username } = presence;
-              //console.log("File User Color:" + assignUserColor(presence.username));
               presenceDecorations.push({
                 from,
                 to: from,
@@ -112,10 +111,6 @@ export const json1PresenceDisplay = ({
                   side: -1,
                   block: false,
                   widget: new PresenceWidget(
-                    // TODO see if we can figure out why
-                    // updateDOM was not being called when passing
-                    // the presence id as the id
-                    // id,
                     '' + Math.random(),
                     userColor,
                     username,
@@ -123,10 +118,7 @@ export const json1PresenceDisplay = ({
                 }),
               });
-              // This is `true` when the presence is a cursor,
-              // with no selection.
               if (from !== to) {
-                // This is the case when the presence is a selection.
                 presenceDecorations.push({
                   from,
                   to,
@@ -142,34 +134,26 @@ export const json1PresenceDisplay = ({
                 });
               }
               if (view.state.doc.length >= from) {
-                // Ensure position is valid
-                this.cursorPosition[id] = from; // Store the cursor position, important to run if we cant get the regular scroll to work
-                // console.log(`Stored cursor position for id ${id}: ${from}`); // Debug statement
+                this.cursorPosition[id] = from;
               } else {
-                // console.warn(`Invalid cursor position for id ${id}: ${from}`); // Debug statement
+                // The cursor position is invalid, so remove it.
+                delete this.cursorPosition[id];
               }
             }
             this.decorations = Decoration.set(
               presenceDecorations,
-              // Without this argument, we get the following error:
-              // Uncaught Error: Ranges must be added sorted by `from` position and `startSide`
               true,
             );
-            // Somehow this triggers re-rendering of the Decorations.
-            // Not sure if this is the correct usage of the API.
-            // Inspired by https://github.com/yjs/y-codemirror.next/blob/main/src/y-remote-selections.js
-            // Set timeout so that the current CodeMirror update finishes
-            // before the next ones that render presence begin.
+            // This dispatch triggers the re-rendering of decorations.
+            // It now correctly runs after a deletion.
             setTimeout(() => {
               view.dispatch({
                 annotations: [presenceAnnotation.of(true)],
               });
             }, 0);
-            // Auto-follow all users when their presence is broadcast
-            // by scrolling them into view.
             if (enableAutoFollowRef.current) {
               this.scrollToCursor(view);
             }

package/src/client/VZRight.tsx CHANGED Viewed

@@ -1,14 +1,75 @@
-// Displays the Vite devserver iframe.
-// TODO test this out, think this through.
-// Purpose: support folks using VZCode as the editor
-// for their Vite-based projects.
-const enableIframe = false;
+import { useContext, useEffect, useMemo } from 'react';
+import {
+  createRuntime,
+  VizHubRuntime,
+} from '@vizhub/runtime';
+import BuildWorker from './buildWorker?worker';
+import { VZCodeContext } from './VZCodeContext';
+import { vizFilesToFileCollection } from '@vizhub/viz-utils';
+const enableIframe = true;
+// Singleton runtime instance
+// TODO use refs, and cleanup on unmount
+let runtime: VizHubRuntime = null;
+let isFirstRun = true;
 export const VZRight = () => {
+  // Get access to the current files.
+  const { content } = useContext(VZCodeContext);
+  const files = useMemo(
+    () =>
+      content
+        ? vizFilesToFileCollection(content.files)
+        : null,
+    [content?.files],
+  );
+  const isInteracting = content?.isInteracting || false;
+  useEffect(() => {
+    if (!files) return;
+    // Initialize the runtime only once
+    if (!runtime) {
+      const worker = new BuildWorker();
+      const iframe = document.getElementById(
+        'viz-iframe',
+      ) as HTMLIFrameElement;
+      runtime = createRuntime({
+        iframe,
+        worker,
+        setBuildErrorMessage: (error) => {
+          if (error) {
+            console.error('Build error:', error);
+          }
+        },
+      });
+    }
+    // Run code in the iframe
+    if (isFirstRun || isInteracting) {
+      runtime.run({
+        files,
+        enableHotReloading: true,
+        enableSourcemap: true,
+        vizId: 'example-viz',
+      });
+      isFirstRun = false;
+    }
+    // TODO use refs, and cleanup on unmount
+    // return () => {
+    //   runtime.cleanup();
+    //   worker.terminate();
+    // };
+  }, [files, isInteracting]);
   return (
     <div className="right">
       {enableIframe ? (
-        <iframe src="http://localhost:5173/"></iframe>
+        <iframe id="viz-iframe"></iframe>
       ) : null}
     </div>
   );

package/src/client/VZSidebar/AIChat/ChatInput.tsx CHANGED Viewed

@@ -1,4 +1,9 @@
-import { useRef, useEffect, useCallback } from 'react';
+import {
+  useRef,
+  useEffect,
+  useCallback,
+  memo,
+} from 'react';
 import { Form, Button } from '../../bootstrap';
 interface ChatInputProps {
@@ -9,7 +14,7 @@ interface ChatInputProps {
   focused: boolean;
 }
-export const ChatInput = ({
+const ChatInputComponent = ({
   message,
   setMessage,
   onSendMessage,
@@ -35,6 +40,13 @@ export const ChatInput = ({
     [onSendMessage],
   );
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setMessage(event.target.value);
+    },
+    [setMessage],
+  );
   return (
     <div className="ai-chat-input-container">
       <Form.Group className="ai-chat-input-group">
@@ -42,9 +54,7 @@ export const ChatInput = ({
           as="textarea"
           rows={2}
           value={message}
-          onChange={(event) =>
-            setMessage(event.target.value)
-          }
+          onChange={handleChange}
           onKeyDown={handleKeyDown}
           ref={inputRef}
           placeholder="Describe what you'd like me to change in your code..."
@@ -63,3 +73,5 @@ export const ChatInput = ({
     </div>
   );
 };
+export const ChatInput = memo(ChatInputComponent);

package/src/client/VZSidebar/AIChat/Message.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import { timestampToDate } from '@vizhub/viz-utils';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import { useMemo, memo } from 'react';
 interface MessageProps {
   id: string;
@@ -10,27 +11,39 @@ interface MessageProps {
   isStreaming?: boolean;
 }
-export const Message = ({
+const MessageComponent = ({
   role,
   content,
   timestamp,
   isStreaming,
 }: MessageProps) => {
+  // Memoize date formatting to avoid repeated computation
+  const formattedTime = useMemo(() => {
+    return timestampToDate(timestamp).toLocaleTimeString(
+      [],
+      {
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+    );
+  }, [timestamp]);
+  // Memoize the className string to avoid recreation
+  const messageClassName = useMemo(() => {
+    return `ai-chat-message ${role}${isStreaming ? ' streaming' : ''}`;
+  }, [role, isStreaming]);
   return (
-    <div
-      className={`ai-chat-message ${role}${isStreaming ? ' streaming' : ''}`}
-    >
+    <div className={messageClassName}>
       <div className="ai-chat-message-content">
         <Markdown remarkPlugins={[remarkGfm]}>
           {content}
         </Markdown>
       </div>
       <div className="ai-chat-message-time">
-        {timestampToDate(timestamp).toLocaleTimeString([], {
-          hour: '2-digit',
-          minute: '2-digit',
-        })}
+        {formattedTime}
       </div>
     </div>
   );
 };
+export const Message = memo(MessageComponent);

package/src/client/VZSidebar/AIChat/MessageList.tsx CHANGED Viewed

@@ -1,4 +1,9 @@
-import { useRef, useEffect } from 'react';
+import {
+  useRef,
+  useEffect,
+  useCallback,
+  memo,
+} from 'react';
 import { Message } from './Message';
 import { StreamingMessage } from './StreamingMessage';
 import { TypingIndicator } from './TypingIndicator';
@@ -17,7 +22,7 @@ interface MessageListProps {
   isLoading: boolean;
 }
-export const MessageList = ({
+const MessageListComponent = ({
   messages,
   aiScratchpad,
   aiStatus,
@@ -25,11 +30,11 @@ export const MessageList = ({
 }: MessageListProps) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
-  const scrollToBottom = () => {
+  const scrollToBottom = useCallback(() => {
     messagesEndRef.current?.scrollIntoView({
       behavior: 'smooth',
     });
-  };
+  }, []);
   useEffect(() => {
     scrollToBottom();
@@ -60,3 +65,5 @@ export const MessageList = ({
     </div>
   );
 };
+export const MessageList = memo(MessageListComponent);

package/src/client/VZSidebar/AIChat/StreamingMessage.tsx CHANGED Viewed

@@ -1,12 +1,13 @@
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import { memo } from 'react';
 interface StreamingMessageProps {
   content: string;
   status?: string;
 }
-export const StreamingMessage = ({
+const StreamingMessageComponent = ({
   content,
   status,
 }: StreamingMessageProps) => {
@@ -23,3 +24,7 @@ export const StreamingMessage = ({
     </div>
   );
 };
+export const StreamingMessage = memo(
+  StreamingMessageComponent,
+);

package/src/client/VZSidebar/AIChat/TypingIndicator.tsx CHANGED Viewed

@@ -1,4 +1,6 @@
-export const TypingIndicator = () => {
+import { memo } from 'react';
+const TypingIndicatorComponent = () => {
   return (
     <div className="ai-chat-message assistant">
       <div className="ai-chat-message-content">
@@ -11,3 +13,7 @@ export const TypingIndicator = () => {
     </div>
   );
 };
+export const TypingIndicator = memo(
+  TypingIndicatorComponent,
+);

package/src/client/VZSidebar/AIChat/index.tsx CHANGED Viewed

@@ -1,4 +1,9 @@
-import { useContext, useState, useCallback } from 'react';
+import {
+  useContext,
+  useState,
+  useCallback,
+  useMemo,
+} from 'react';
 import { VZCodeContext } from '../../VZCodeContext';
 import { v4 as uuidv4 } from 'uuid';
 import { MessageList } from './MessageList';
@@ -25,11 +30,15 @@ export const AIChat = () => {
   const aiScratchpad = currentChat?.aiScratchpad;
   const aiStatus = currentChat?.aiStatus;
-  // Transform messages to ensure they have required id field
-  const messages = rawMessages.map((msg, index) => ({
-    ...msg,
-    id: msg.id || `msg-${index}`,
-  }));
+  // Transform messages to ensure they have required id field - memoized to avoid recreation
+  const messages = useMemo(
+    () =>
+      rawMessages.map((msg, index) => ({
+        ...msg,
+        id: msg.id || `msg-${index}`,
+      })),
+    [rawMessages],
+  );
   const handleSendMessage = useCallback(async () => {
     if (!message.trim() || isLoading) return;
@@ -66,7 +75,13 @@ export const AIChat = () => {
     } finally {
       setIsLoading(false);
     }
-  }, [message, isLoading, currentChatId]);
+  }, [
+    message,
+    isLoading,
+    aiChatEndpoint,
+    aiChatOptions,
+    currentChatId,
+  ]);
   return (
     <div className="ai-chat-container">

package/src/client/buildWorker.ts ADDED Viewed

@@ -0,0 +1,3 @@
+// @ts-ignore TODO fix this type error
+import { initWorker } from '@vizhub/runtime/worker';
+initWorker();

package/src/client/usePresenceAutoFollow.ts CHANGED Viewed

@@ -1,9 +1,8 @@
-import { useContext, useEffect, useRef } from 'react';
-import { VZCodeContext } from './VZCodeContext';
-import { Presence, PresenceId, TabState } from '../types';
+import { useEffect, useRef } from 'react';
+import { Presence, PresenceId } from '../types';
 import { VizFileId } from '@vizhub/viz-types';
-const DEBUG = true;
+const DEBUG = false;
 /**
  * Custom hook that handles auto-following users by opening tabs when presence

package/src/server/aiChatHandler/{chatOperations.js → chatOperations.ts} RENAMED Viewed

@@ -213,12 +213,15 @@ export const setIsInteracting = (
 /**
  * Finds a file ID by searching for a matching file name
  */
-export const resolveFileId = (fileName, shareDBDoc) => {
+export const resolveFileId = (
+  fileName: string,
+  shareDBDoc: any,
+) => {
   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) {
+    if ((file as any).name === fileName) {
       return fileId;
     }
   }