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

vzcode 1.41.0 → 1.43.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 (27) hide show

package/dist/assets/{index-DPAeYEiH.js → index-B83lKfVG.js} +86 -86
package/dist/assets/{index-DKLiE98a.css → index-CP9o_hN5.css} +1 -1
package/dist/assets/worker-BeBZGG1n.js +136 -0
package/dist/index.html +2 -2
package/package.json +6 -6
package/src/client/App/style.scss +2 -2
package/src/client/CodeEditor/json1PresenceDisplay.ts +40 -12
package/src/client/VZRight.tsx +17 -16
package/src/client/VZSidebar/AIChat/MessageList.tsx +18 -27
package/src/client/VZSidebar/AIChat/index.tsx +0 -2
package/src/client/VZSidebar/aiCopyPaste.ts +8 -1
package/src/client/VZSidebar/index.tsx +10 -8
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 +76 -40
package/src/submitOperation.ts +1 -1
package/dist/assets/worker-CkHcCP1n.js +0 -136
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-DPAeYEiH.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DKLiE98a.css">
+    <script type="module" crossorigin src="/assets/index-B83lKfVG.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.41.0",
+  "version": "1.43.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -140,14 +140,14 @@
     "body-parser": "^2.2.0",
     "codemirror": "^6.0.2",
     "codemirror-copilot": "^0.0.7",
-    "codemirror-ot": "^4.6.0",
+    "codemirror-ot": "^4.7.0",
     "color-hash": "^2.0.2",
     "comlink": "^4.4.2",
     "d3-array": "^3.2.4",
     "diff-match-patch": "^1.0.5",
     "dotenv": "^17.2.1",
     "editcodewithai": "^2.3.0",
-    "eslint-linter-browserify": "^9.31.0",
+    "eslint-linter-browserify": "^9.32.0",
     "express": "^5.1.0",
     "ignore": "^7.0.5",
     "json0-ot-diff": "^1.1.2",
@@ -175,7 +175,7 @@
     "@types/react-dom": "^18",
     "@vitejs/plugin-react": "^4.7.0",
     "concurrently": "^9.2.0",
-    "cross-env": "^7.0.3",
+    "cross-env": "^10.0.0",
     "eslint": "^9.32.0",
     "globals": "^16.3.0",
     "npm-check-updates": "^18.0.2",
@@ -187,7 +187,7 @@
     "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/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,4 +1,9 @@
-import { useContext, useEffect, useMemo } from 'react';
+import {
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 import {
   createRuntime,
   VizHubRuntime,
@@ -9,12 +14,11 @@ 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 = () => {
+  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);
@@ -32,13 +36,10 @@ export const VZRight = () => {
     if (!files) return;
     // Initialize the runtime only once
-    if (!runtime) {
+    if (!runtimeRef.current && iframeRef.current) {
       const worker = new BuildWorker();
-      const iframe = document.getElementById(
-        'viz-iframe',
-      ) as HTMLIFrameElement;
-      runtime = createRuntime({
-        iframe,
+      runtimeRef.current = createRuntime({
+        iframe: iframeRef.current,
         worker,
         setBuildErrorMessage: (error) => {
           if (error) {
@@ -49,14 +50,14 @@ export const VZRight = () => {
     }
     // Run code in the iframe
-    if (isFirstRun || isInteracting) {
-      runtime.run({
+    if (isFirstRunRef.current || isInteracting) {
+      runtimeRef.current?.run({
         files,
         enableHotReloading: true,
         enableSourcemap: true,
         vizId: 'example-viz',
       });
-      isFirstRun = false;
+      isFirstRunRef.current = false;
     }
     // TODO use refs, and cleanup on unmount
@@ -69,7 +70,7 @@ export const VZRight = () => {
   return (
     <div className="right">
       {enableIframe ? (
-        <iframe id="viz-iframe"></iframe>
+        <iframe ref={iframeRef}></iframe>
       ) : null}
     </div>
   );

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

@@ -5,29 +5,18 @@ import {
   memo,
 } from 'react';
 import { Message } from './Message';
-import { StreamingMessage } from './StreamingMessage';
 import { TypingIndicator } from './TypingIndicator';
-interface MessageData {
-  id: string;
-  role: 'user' | 'assistant';
-  content: string;
-  timestamp: number;
-}
-interface MessageListProps {
-  messages: MessageData[];
-  aiScratchpad?: string;
-  aiStatus?: string;
-  isLoading: boolean;
-}
+import { VizChatMessage } from '@vizhub/viz-types';
 const MessageListComponent = ({
   messages,
-  aiScratchpad,
   aiStatus,
   isLoading,
-}: MessageListProps) => {
+}: {
+  messages: VizChatMessage[];
+  aiStatus?: string;
+  isLoading: boolean;
+}) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const scrollToBottom = useCallback(() => {
@@ -38,7 +27,17 @@ const MessageListComponent = ({
   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">
@@ -52,15 +51,7 @@ const MessageListComponent = ({
         />
       ))}
-      {/* Show streaming content if available */}
-      {aiScratchpad && (
-        <StreamingMessage
-          content={aiScratchpad}
-          status={aiStatus}
-        />
-      )}
-      {isLoading && !aiScratchpad && <TypingIndicator />}
+      {showTypingIndicator && <TypingIndicator />}
       <div ref={messagesEndRef} />
     </div>
   );

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

@@ -27,7 +27,6 @@ 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 - memoized to avoid recreation
@@ -87,7 +86,6 @@ export const AIChat = () => {
     <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/vzReducer/searchReducer.test.ts ADDED Viewed

@@ -0,0 +1,250 @@
+import { describe, expect, it } from 'vitest';
+import { setSearchResultsReducer } from './searchReducer';
+import { VZAction, VZState, createInitialState } from '.';
+import { defaultTheme } from '../themes';
+// Mock ShareDBDoc for testing
+const createMockShareDBDoc = (files: any) => ({
+  data: { files },
+});
+const initialState: VZState = createInitialState({
+  defaultTheme,
+});
+describe('searchReducer', () => {
+  describe('setSearchResultsReducer', () => {
+    it('should find case-insensitive matches', () => {
+      const mockFiles = {
+        'file1.js': {
+          name: 'file1.js',
+          text: 'const Hello = "world";\nconst goodbye = "HELLO";',
+        },
+        'file2.js': {
+          name: 'file2.js',
+          text: 'function hello() {\n  return "Hello World";\n}',
+        },
+      };
+      const stateWithSearch = {
+        ...initialState,
+        search: {
+          ...initialState.search,
+          pattern: 'hello', // lowercase search pattern
+        },
+      };
+      const action: VZAction = {
+        type: 'set_search_results',
+        files: createMockShareDBDoc(mockFiles),
+      };
+      const newState = setSearchResultsReducer(
+        stateWithSearch,
+        action,
+      );
+      // Should find matches in both files despite different cases
+      expect(
+        Object.keys(newState.search.results),
+      ).toHaveLength(2);
+      // Check file1.js results
+      const file1Results =
+        newState.search.results['file1.js'];
+      expect(file1Results).toBeDefined();
+      expect(file1Results.matches).toHaveLength(2); // "Hello" and "HELLO"
+      expect(file1Results.matches[0].line).toBe(1);
+      expect(file1Results.matches[0].index).toBe(6); // position of "Hello"
+      expect(file1Results.matches[1].line).toBe(2);
+      expect(file1Results.matches[1].index).toBe(18); // position of "HELLO"
+      // Check file2.js results
+      const file2Results =
+        newState.search.results['file2.js'];
+      expect(file2Results).toBeDefined();
+      expect(file2Results.matches).toHaveLength(2); // "hello" and "Hello"
+      expect(file2Results.matches[0].line).toBe(1);
+      expect(file2Results.matches[0].index).toBe(9); // position of "hello"
+      expect(file2Results.matches[1].line).toBe(2);
+      expect(file2Results.matches[1].index).toBe(10); // position of "Hello"
+    });
+    it('should find exact case matches', () => {
+      const mockFiles = {
+        'file1.js': {
+          name: 'file1.js',
+          text: 'const hello = "world";',
+        },
+      };
+      const stateWithSearch = {
+        ...initialState,
+        search: {
+          ...initialState.search,
+          pattern: 'hello', // exact case match
+        },
+      };
+      const action: VZAction = {
+        type: 'set_search_results',
+        files: createMockShareDBDoc(mockFiles),
+      };
+      const newState = setSearchResultsReducer(
+        stateWithSearch,
+        action,
+      );
+      expect(
+        Object.keys(newState.search.results),
+      ).toHaveLength(1);
+      const file1Results =
+        newState.search.results['file1.js'];
+      expect(file1Results.matches).toHaveLength(1);
+      expect(file1Results.matches[0].line).toBe(1);
+      expect(file1Results.matches[0].index).toBe(6);
+    });
+    it('should not find matches when pattern does not exist', () => {
+      const mockFiles = {
+        'file1.js': {
+          name: 'file1.js',
+          text: 'const world = "test";',
+        },
+      };
+      const stateWithSearch = {
+        ...initialState,
+        search: {
+          ...initialState.search,
+          pattern: 'hello',
+        },
+      };
+      const action: VZAction = {
+        type: 'set_search_results',
+        files: createMockShareDBDoc(mockFiles),
+      };
+      const newState = setSearchResultsReducer(
+        stateWithSearch,
+        action,
+      );
+      expect(
+        Object.keys(newState.search.results),
+      ).toHaveLength(0);
+    });
+    it('should handle uppercase search pattern', () => {
+      const mockFiles = {
+        'file1.js': {
+          name: 'file1.js',
+          text: 'const Hello = "world";\nfunction hello() {}',
+        },
+      };
+      const stateWithSearch = {
+        ...initialState,
+        search: {
+          ...initialState.search,
+          pattern: 'HELLO', // uppercase search pattern
+        },
+      };
+      const action: VZAction = {
+        type: 'set_search_results',
+        files: createMockShareDBDoc(mockFiles),
+      };
+      const newState = setSearchResultsReducer(
+        stateWithSearch,
+        action,
+      );
+      expect(
+        Object.keys(newState.search.results),
+      ).toHaveLength(1);
+      const file1Results =
+        newState.search.results['file1.js'];
+      expect(file1Results.matches).toHaveLength(2); // Should find both "Hello" and "hello"
+    });
+    it('should handle mixed case search pattern', () => {
+      const mockFiles = {
+        'file1.js': {
+          name: 'file1.js',
+          text: 'const HeLLo = "world";\nconst hello = "test";\nconst HELLO = "end";',
+        },
+      };
+      const stateWithSearch = {
+        ...initialState,
+        search: {
+          ...initialState.search,
+          pattern: 'HeLLo', // mixed case search pattern
+        },
+      };
+      const action: VZAction = {
+        type: 'set_search_results',
+        files: createMockShareDBDoc(mockFiles),
+      };
+      const newState = setSearchResultsReducer(
+        stateWithSearch,
+        action,
+      );
+      expect(
+        Object.keys(newState.search.results),
+      ).toHaveLength(1);
+      const file1Results =
+        newState.search.results['file1.js'];
+      expect(file1Results.matches).toHaveLength(3); // Should find all three variations
+    });
+    it('should skip files without text content', () => {
+      const mockFiles = {
+        'file1.js': {
+          name: 'file1.js',
+          text: 'const hello = "world";',
+        },
+        'file2.js': {
+          name: 'file2.js',
+          // no text property
+        },
+      };
+      const stateWithSearch = {
+        ...initialState,
+        search: {
+          ...initialState.search,
+          pattern: 'hello',
+        },
+      };
+      const action: VZAction = {
+        type: 'set_search_results',
+        files: createMockShareDBDoc(mockFiles),
+      };
+      const newState = setSearchResultsReducer(
+        stateWithSearch,
+        action,
+      );
+      // Should only find results in file1.js
+      expect(
+        Object.keys(newState.search.results),
+      ).toHaveLength(1);
+      expect(
+        newState.search.results['file1.js'],
+      ).toBeDefined();
+      expect(
+        newState.search.results['file2.js'],
+      ).toBeUndefined();
+    });
+  });
+});

package/src/client/vzReducer/searchReducer.ts CHANGED Viewed

@@ -24,7 +24,9 @@ function searchPattern(
       const matches = [];
       for (let j = 0; j < lines.length; j++) {
-        const index = lines[j].indexOf(pattern);
+        const index = lines[j]
+          .toLowerCase()
+          .indexOf(pattern.toLowerCase());
         if (index !== -1) {
           matches.push({

package/src/{ot.js → ot.ts} RENAMED Viewed

@@ -2,6 +2,8 @@
 // This file is the central point where the OT types are imported.
 // Localized to one file so it's easy to change it in future.
 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;
@@ -11,3 +13,12 @@ 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,
+  );

package/src/runCode.ts CHANGED Viewed

@@ -1,31 +1,14 @@
 import { SubmitOperation } from './types';
 import { VizContent } from '@vizhub/viz-types';
-import { createSubmitOperation } from './submitOperation';
 /**
  * Creates a runCode function that triggers code execution by flashing `isInteracting` to `true`.
  * This works for both client-side (with submitOperation) and server-side (with ShareDB document).
  */
 export const createRunCodeFunction = (
-  submitOperationOrDoc:
-    | SubmitOperation
-    | { data: any; submitOp: (ops: any) => void },
+  submitOperation: SubmitOperation,
 ) => {
   return () => {
-    let submitOperation: SubmitOperation;
-    // Check if this is a client-side submitOperation or server-side ShareDB document
-    if (typeof submitOperationOrDoc === 'function') {
-      // Client-side: already a submitOperation function
-      submitOperation =
-        submitOperationOrDoc as SubmitOperation;
-    } else {
-      // Server-side: create submitOperation from ShareDB document
-      submitOperation = createSubmitOperation(
-        submitOperationOrDoc,
-      );
-    }
     // Use the unified submitOperation approach for both client and server
     submitOperation((content: VizContent) => ({
       ...content,
@@ -39,7 +22,7 @@ export const createRunCodeFunction = (
       submitOperation(
         ({ isInteracting, ...newDocument }) => newDocument,
       );
-    }, 0);
+    }, 100);
   };
 };
@@ -48,11 +31,9 @@ export const createRunCodeFunction = (
  * This is useful for maintaining compatibility with existing code that expects a ref.
  */
 export const createRunCodeRef = (
-  submitOperationOrDoc:
-    | SubmitOperation
-    | { data: any; submitOp: (ops: any) => void },
+  submitOperation: SubmitOperation,
 ) => {
   return {
-    current: createRunCodeFunction(submitOperationOrDoc),
+    current: createRunCodeFunction(submitOperation),
   };
 };