npm - vzcode - Versions diffs - 1.40.0 → 1.42.0 - Mend

vzcode 1.40.0 → 1.42.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/assets/bindings_wasm_bg-BQfW5T_2.wasm +0 -0
package/dist/assets/buildWorker-B-vXZ9gA.js +579 -0
package/dist/assets/{index-DKLiE98a.css → index-CP9o_hN5.css} +1 -1
package/dist/assets/index-kPLgjbcb.js +329 -0
package/dist/index.html +2 -2
package/package.json +17 -16
package/src/client/App/style.scss +2 -2
package/src/client/CodeEditor/getOrCreateEditor.ts +2 -5
package/src/client/CodeEditor/index.tsx +1 -1
package/src/client/CodeEditor/json1PresenceDisplay.ts +40 -12
package/src/client/VZRight.tsx +68 -6
package/src/client/VZSidebar/AIChat/ChatInput.tsx +17 -5
package/src/client/VZSidebar/AIChat/Message.tsx +21 -8
package/src/client/VZSidebar/AIChat/MessageList.tsx +29 -31
package/src/client/VZSidebar/AIChat/StreamingMessage.tsx +6 -1
package/src/client/VZSidebar/AIChat/TypingIndicator.tsx +7 -1
package/src/client/VZSidebar/AIChat/index.tsx +22 -9
package/src/client/VZSidebar/aiCopyPaste.ts +8 -1
package/src/client/VZSidebar/index.tsx +10 -8
package/src/client/buildWorker.ts +3 -0
package/src/client/vzReducer/searchReducer.test.ts +250 -0
package/src/client/vzReducer/searchReducer.ts +3 -1
package/src/{ot.js → ot.ts} +11 -0
package/src/runCode.ts +4 -23
package/src/server/aiChatHandler/aiEditing.ts +10 -7
package/src/server/aiChatHandler/chatOperations.ts +144 -58
package/src/server/aiChatHandler/errorHandling.ts +1 -1
package/src/server/aiChatHandler/index.ts +8 -2
package/src/server/aiChatHandler/llmStreaming.ts +83 -44
package/src/submitOperation.ts +1 -1
package/dist/assets/index-ubSLcdJf.js +0 -327
package/src/client/diff.js +0 -12
package/src/runCode.js +0 -48
package/src/submitOperation.js +0 -16
/package/src/{randomId.js → randomId.ts} +0 -0

package/dist/index.html CHANGED Viewed

@@ -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-ubSLcdJf.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DKLiE98a.css">
+    <script type="module" crossorigin src="/assets/index-kPLgjbcb.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CP9o_hN5.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "1.40.0",
+  "version": "1.42.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -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",
-    "eslint-linter-browserify": "^9.31.0",
+    "dotenv": "^17.2.1",
+    "editcodewithai": "^2.3.0",
+    "eslint-linter-browserify": "^9.32.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,24 +170,24 @@
     "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",
+    "cross-env": "^10.0.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": {
-    "@rollup/rollup-darwin-arm64": "^4.45.1",
-    "@rollup/rollup-win32-x64-msvc": "^4.45.1"
+    "@rollup/rollup-darwin-arm64": "^4.46.1",
+    "@rollup/rollup-win32-x64-msvc": "^4.46.1"
   }
 }

package/src/client/App/style.scss CHANGED Viewed

@@ -70,12 +70,12 @@ body,
   }
   .right {
+    display: flex;
     flex: 1;
     background-color: white;
     iframe {
-      width: 100%;
-      height: 100%;
+      flex: 1;
       border: none;
     }
   }

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

@@ -41,6 +41,12 @@ export const json1PresenceDisplay = ({
       //Added variable for cursor position
       cursorPosition = {};
+      // Flag to prevent multiple pending updates
+      pendingUpdate = false;
+      // Flag to prevent multiple pending scroll updates
+      pendingScrollUpdate = false;
       constructor(view: EditorView) {
         // Initialize decorations to empty array so CodeMirror doesn't crash.
         this.decorations = RangeSet.of([]);
@@ -146,13 +152,22 @@ export const json1PresenceDisplay = ({
               true,
             );
-            // This dispatch triggers the re-rendering of decorations.
-            // It now correctly runs after a deletion.
-            setTimeout(() => {
-              view.dispatch({
-                annotations: [presenceAnnotation.of(true)],
+            // Safely dispatch decoration updates without causing race conditions
+            // Use requestAnimationFrame to ensure we're not in the middle of an update
+            if (!this.pendingUpdate) {
+              this.pendingUpdate = true;
+              requestAnimationFrame(() => {
+                this.pendingUpdate = false;
+                // Check if view is still valid and not currently updating
+                if (view.state && view.dom.isConnected) {
+                  view.dispatch({
+                    annotations: [
+                      presenceAnnotation.of(true),
+                    ],
+                  });
+                }
               });
-            }, 0);
+            }
             if (enableAutoFollowRef.current) {
               this.scrollToCursor(view);
@@ -162,12 +177,25 @@ export const json1PresenceDisplay = ({
       }
       // Method to scroll the view to keep the cursor in view
       scrollToCursor(view) {
-        for (const id in this.cursorPosition) {
-          //getting the cursor position of the other cursor
-          const cursorPos = this.cursorPosition[id];
-          view.dispatch({
-            //if the other person's cursor has jumped off screen, we will follow it by scrolling there directly.
-            effects: EditorView.scrollIntoView(cursorPos),
+        // Debounce scroll updates to prevent conflicts with typing
+        if (!this.pendingScrollUpdate) {
+          this.pendingScrollUpdate = true;
+          requestAnimationFrame(() => {
+            this.pendingScrollUpdate = false;
+            // Check if view is still valid
+            if (view.state && view.dom.isConnected) {
+              for (const id in this.cursorPosition) {
+                //getting the cursor position of the other cursor
+                const cursorPos = this.cursorPosition[id];
+                view.dispatch({
+                  //if the other person's cursor has jumped off screen, we will follow it by scrolling there directly.
+                  effects:
+                    EditorView.scrollIntoView(cursorPos),
+                });
+                // Only scroll to the first cursor to avoid multiple dispatches
+                break;
+              }
+            }
           });
         }
       }

package/src/client/VZRight.tsx CHANGED Viewed

@@ -1,14 +1,76 @@
-// 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,
+  useRef,
+} 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;
 export const VZRight = () => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const runtimeRef = useRef<VizHubRuntime | null>(null);
+  const isFirstRunRef = useRef(true);
+  // 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 (!runtimeRef.current && iframeRef.current) {
+      const worker = new BuildWorker();
+      runtimeRef.current = createRuntime({
+        iframe: iframeRef.current,
+        worker,
+        setBuildErrorMessage: (error) => {
+          if (error) {
+            console.error('Build error:', error);
+          }
+        },
+      });
+    }
+    // Run code in the iframe
+    if (isFirstRunRef.current || isInteracting) {
+      runtimeRef.current?.run({
+        files,
+        enableHotReloading: true,
+        enableSourcemap: true,
+        vizId: 'example-viz',
+      });
+      isFirstRunRef.current = 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 ref={iframeRef}></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,39 +1,43 @@
-import { useRef, useEffect } from 'react';
+import {
+  useRef,
+  useEffect,
+  useCallback,
+  memo,
+} from 'react';
 import { Message } from './Message';
-import { StreamingMessage } from './StreamingMessage';
 import { TypingIndicator } from './TypingIndicator';
+import { VizChatMessage } from '@vizhub/viz-types';
-interface MessageData {
-  id: string;
-  role: 'user' | 'assistant';
-  content: string;
-  timestamp: number;
-}
-interface MessageListProps {
-  messages: MessageData[];
-  aiScratchpad?: string;
-  aiStatus?: string;
-  isLoading: boolean;
-}
-export const MessageList = ({
+const MessageListComponent = ({
   messages,
-  aiScratchpad,
   aiStatus,
   isLoading,
-}: MessageListProps) => {
+}: {
+  messages: VizChatMessage[];
+  aiStatus?: string;
+  isLoading: boolean;
+}) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
-  const scrollToBottom = () => {
+  const scrollToBottom = useCallback(() => {
     messagesEndRef.current?.scrollIntoView({
       behavior: 'smooth',
     });
-  };
+  }, []);
   useEffect(() => {
     scrollToBottom();
-  }, [messages, aiScratchpad]);
+  }, [messages]);
+  // Check if AI generation has started (last message is from assistant)
+  const lastMessage = messages[messages.length - 1];
+  const aiGenerationStarted =
+    lastMessage?.role === 'assistant' &&
+    lastMessage.content !== '';
+  // Show typing indicator only when loading and AI generation hasn't started yet
+  const showTypingIndicator =
+    isLoading && !aiGenerationStarted;
   return (
     <div className="ai-chat-messages">
@@ -47,16 +51,10 @@ export const MessageList = ({
         />
       ))}
-      {/* Show streaming content if available */}
-      {aiScratchpad && (
-        <StreamingMessage
-          content={aiScratchpad}
-          status={aiStatus}
-        />
-      )}
-      {isLoading && !aiScratchpad && <TypingIndicator />}
+      {showTypingIndicator && <TypingIndicator />}
       <div ref={messagesEndRef} />
     </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';
@@ -22,14 +27,17 @@ export const AIChat = () => {
   // Get current chat data from content
   const currentChat = content?.chats?.[currentChatId];
   const rawMessages = currentChat?.messages || [];
-  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,13 +74,18 @@ export const AIChat = () => {
     } finally {
       setIsLoading(false);
     }
-  }, [message, isLoading, currentChatId]);
+  }, [
+    message,
+    isLoading,
+    aiChatEndpoint,
+    aiChatOptions,
+    currentChatId,
+  ]);
   return (
     <div className="ai-chat-container">
       <MessageList
         messages={messages}
-        aiScratchpad={aiScratchpad}
         aiStatus={aiStatus}
         isLoading={isLoading}
       />

package/src/client/VZSidebar/aiCopyPaste.ts CHANGED Viewed

@@ -17,7 +17,14 @@ export const createAICopyPasteHandlers = (
 ) => {
   // Copy for AI - formats all files and copies to clipboard
   const handleCopyForAI = async () => {
-    if (!files) return;
+    if (!files || Object.keys(files).length === 0) {
+      setCopyButtonText('No files to copy');
+      setTimeout(
+        () => setCopyButtonText('Copy for AI'),
+        2000,
+      );
+      return;
+    }
     try {
       const fileCollection =

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

@@ -546,15 +546,17 @@ export const VZSidebar = ({
           )}
         </div>
       </div>
-      {!isAIChatOpen && !isSearchOpen && filesExist && (
+      {!isAIChatOpen && !isSearchOpen && (
         <div className="ai-buttons">
-          <button
-            className="ai-button copy-button"
-            onClick={handleCopyForAI}
-            title="Copy files formatted for AI"
-          >
-            {copyButtonText}
-          </button>
+          {filesExist && (
+            <button
+              className="ai-button copy-button"
+              onClick={handleCopyForAI}
+              title="Copy files formatted for AI"
+            >
+              {copyButtonText}
+            </button>
+          )}
           <button
             className="ai-button paste-button"
             onClick={handlePasteForAI}

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();