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

vzcode 1.38.0 → 1.40.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/{index-Cw7RI1uP.js → index-ubSLcdJf.js} +91 -91
package/dist/index.html +1 -1
package/package.json +9 -7
package/src/client/CodeEditor/getOrCreateEditor.ts +0 -3
package/src/client/CodeEditor/index.tsx +0 -1
package/src/client/CodeEditor/json1PresenceDisplay.ts +28 -58
package/src/client/VZCodeContext.tsx +11 -0
package/src/client/VZSidebar/index.tsx +6 -0
package/src/client/useKeyboardShortcuts.ts +7 -1
package/src/client/usePresenceAutoFollow.ts +85 -0
package/src/client/useRunCode.tsx +2 -16
package/src/client/useSubmitOperation.ts +4 -11
package/src/runCode.js +48 -0
package/src/runCode.ts +58 -0
package/src/server/aiChatHandler/aiEditing.ts +44 -0
package/src/server/aiChatHandler/{chatOperations.js → chatOperations.ts} +135 -7
package/src/server/aiChatHandler/{index.js → index.ts} +34 -30
package/src/server/aiChatHandler/llmStreaming.ts +223 -0
package/src/server/{generateAIResponse.js → generateAIResponse.ts} +3 -2
package/src/server/{handleAIAssist.js → handleAIAssist.ts} +11 -4
package/src/server/{index.js → index.ts} +31 -27
package/src/submitOperation.js +16 -0
package/src/submitOperation.ts +25 -0
package/src/server/aiChatHandler/aiEditing.js +0 -42
package/src/server/aiChatHandler/llmStreaming.js +0 -105
/package/src/server/aiChatHandler/{errorHandling.js → errorHandling.ts} +0 -0
/package/src/server/aiChatHandler/{validation.js → validation.ts} +0 -0
/package/src/server/{computeInitialDocument.js → computeInitialDocument.ts} +0 -0
/package/src/server/{config.js → config.ts} +0 -0
/package/src/server/{featureFlags.js → featureFlags.ts} +0 -0
/package/src/server/{handleAIChatMessage.js → handleAIChatMessage.ts} +0 -0
/package/src/server/{handleAICopilot.js → handleAICopilot.ts} +0 -0
/package/src/server/{isDirectory.js → isDirectory.ts} +0 -0
/package/src/server/{livekit.js → livekit.ts} +0 -0
/package/src/server/{setupEnv.js → setupEnv.ts} +0 -0

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-Cw7RI1uP.js"></script>
+    <script type="module" crossorigin src="/assets/index-ubSLcdJf.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.38.0",
+  "version": "1.40.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\"",
@@ -139,21 +139,19 @@
     "body-parser": "^2.2.0",
     "codemirror": "^6.0.2",
     "codemirror-copilot": "^0.0.7",
-    "codemirror-ot": "^4.4.0",
+    "codemirror-ot": "^4.5.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": "^9.31.0",
     "eslint-linter-browserify": "^9.31.0",
     "express": "^5.1.0",
-    "globals": "^16.3.0",
     "ignore": "^7.0.5",
     "json0-ot-diff": "^1.1.2",
     "livekit-server-sdk": "^2.13.1",
-    "llm-code-format": "^2.0.1",
+    "llm-code-format": "^2.1.0",
     "ngrok": "^5.0.0-beta.2",
     "npm": "^11.4.2",
     "open": "^10.2.0",
@@ -171,14 +169,18 @@
     "ws": "^8.18.3"
   },
   "devDependencies": {
+    "@eslint/js": "^9.31.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",
+    "globals": "^16.3.0",
     "npm-check-updates": "^18.0.1",
     "prettier": "^3.6.2",
     "sass": "^1.89.2",
+    "ts-node": "^10.9.2",
     "typescript": "^5.8.3",
     "vite": "^7.0.5",
     "vitest": "^3.2.4"

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

@@ -176,7 +176,6 @@ export const getOrCreateEditor = async ({
   usernameRef,
   customInteractRules,
   enableAutoFollowRef,
-  openTab,
   aiCopilotEndpoint,
   esLintSource,
   rainbowBracketsEnabled = true,
@@ -213,7 +212,6 @@ export const getOrCreateEditor = async ({
   // Ref to a boolean that determines whether to
   // enable auto-following the cursors of remote users.
   enableAutoFollowRef: React.MutableRefObject<boolean>;
-  openTab: (tabState: TabState) => void;
   aiCopilotEndpoint?: string;
   esLintSource: (
     view: EditorView,
@@ -285,7 +283,6 @@ export const getOrCreateEditor = async ({
           path: textPath,
           docPresence,
           enableAutoFollowRef,
-          openTab,
         }),
       );
     }

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

@@ -107,7 +107,6 @@ export const CodeEditor = ({
         usernameRef,
         customInteractRules,
         enableAutoFollowRef,
-        openTab,
         aiCopilotEndpoint,
         esLintSource,
       });

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

@@ -6,20 +6,14 @@ import {
 } from '@codemirror/view';
 import { Annotation, RangeSet } from '@codemirror/state';
 import { assignUserColor } from '../presenceColor';
-import { VizFileId } from '@vizhub/viz-types';
 import {
   Presence,
   PresenceId,
-  TabState,
   Username,
 } from '../../types';
-const debug = false;
+const DEBUG = false;
-// export let enableAutoFollow = false;
-// export const toggleAutoFollowButton = () => {
-//   enableAutoFollow = !enableAutoFollow;
-// };
 // Deals with receiving the broadcasted presence cursor locations
 // from other clients and displaying them.
 //
@@ -32,12 +26,10 @@ export const json1PresenceDisplay = ({
   path,
   docPresence,
   enableAutoFollowRef,
-  openTab,
 }: {
   path: Array<string>;
   docPresence: any;
   enableAutoFollowRef: React.MutableRefObject<boolean>;
-  openTab: (tabState: TabState) => void;
 }) => [
   ViewPlugin.fromClass(
     class {
@@ -65,50 +57,43 @@ export const json1PresenceDisplay = ({
         //   this.scrollToCursor(view);
         // });
         // Receive remote presence changes.
+        // Receive remote presence changes.
         docPresence.on(
           'receive',
           (id: PresenceId, presence: Presence) => {
-            if (debug) {
+            if (DEBUG) {
               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,
+              );
-              // If auto-follow is enabled, and the presence is NOT
-              // in the current file, then open the tab of the other user.
-              if (enableAutoFollowRef.current) {
-                openTab({
-                  fileId: presence.start[1] as VizFileId,
-                  isTransient: true,
-                });
+              // 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;
@@ -118,7 +103,7 @@ export const json1PresenceDisplay = ({
                 presence.username,
               );
               const { username } = presence;
-              //console.log("File User Color:" + assignUserColor(presence.username));
               presenceDecorations.push({
                 from,
                 to: from,
@@ -126,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,
@@ -137,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,
@@ -156,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/VZCodeContext.tsx CHANGED Viewed

@@ -37,6 +37,7 @@ import { useRunCode } from './useRunCode';
 import { useURLSync } from './useURLSync';
 import { createInitialState, vzReducer } from './vzReducer';
 import { findPane } from './vzReducer/findPane';
+import { usePresenceAutoFollow } from './usePresenceAutoFollow';
 // This context centralizes all the "smart" logic
 // to do with the application state. This includes
@@ -408,6 +409,16 @@ export const VZCodeProvider = ({
   const [hoveredItemId, setHoveredItemId] =
     useState<ItemId | null>(null);
+  // Handle presence-based auto-following
+  // This hook manages opening tabs when presence is received on files
+  // that are not currently open, independent of CodeMirror extensions
+  usePresenceAutoFollow({
+    docPresence,
+    enableAutoFollow,
+    openTab,
+    activePane,
+  });
   // Livekit Voice Chat Modal
   const [voiceChatModalOpen, setVoiceChatModalOpen] =

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

@@ -224,6 +224,12 @@ export const VZSidebar = ({
         presenceId: PresenceId,
         update: Presence,
       ) => {
+        // Sometimes this can be null, so we check.
+        // This can happen when the user disconnects.
+        // If this happens, we do not update the presence indicator.
+        // TODO test removal of presence indicator.
+        if (!update) return;
         const presenceIndicator: PresenceIndicator = {
           username: update.username,
           fileId: update.start[1] as VizFileId,

package/src/client/useKeyboardShortcuts.ts CHANGED Viewed

@@ -378,7 +378,13 @@ export const useKeyboardShortcuts = ({
         return;
       }
-      const position: number = editor.posAtDOM(element);
+      let position: number;
+      try {
+        position = editor.posAtDOM(element);
+      } catch (error) {
+        // Element is not within the current editor's document
+        return;
+      }
       const identifier: SyntaxNode = tree.resolveInner(
         position,
         1,

package/src/client/usePresenceAutoFollow.ts ADDED Viewed

@@ -0,0 +1,85 @@
+import { useEffect, useRef } from 'react';
+import { Presence, PresenceId } from '../types';
+import { VizFileId } from '@vizhub/viz-types';
+const DEBUG = false;
+/**
+ * Custom hook that handles auto-following users by opening tabs when presence
+ * is received on files that are not currently open. This logic is independent
+ * of CodeMirror extensions and works regardless of editor cache state.
+ */
+export const usePresenceAutoFollow = ({
+  docPresence,
+  enableAutoFollow,
+  openTab,
+  activePane,
+}) => {
+  // Track enableAutoFollow on a ref for use in event handlers
+  const enableAutoFollowRef = useRef(enableAutoFollow);
+  useEffect(() => {
+    enableAutoFollowRef.current = enableAutoFollow;
+  }, [enableAutoFollow]);
+  // Track active file for comparison
+  const activeFileIdRef = useRef(activePane?.activeFileId);
+  useEffect(() => {
+    activeFileIdRef.current = activePane?.activeFileId;
+  }, [activePane?.activeFileId]);
+  useEffect(() => {
+    if (!docPresence) return;
+    const handlePresenceReceive = (
+      id: PresenceId,
+      presence: Presence,
+    ) => {
+      if (DEBUG) {
+        console.log(
+          `[usePresenceAutoFollow] Received presence for id ${id}`,
+          presence,
+        );
+      }
+      // If presence is null, the user has disconnected
+      if (!presence) {
+        return;
+      }
+      // If auto-follow is not enabled, do nothing
+      if (!enableAutoFollowRef.current) {
+        return;
+      }
+      // Extract the file ID from the presence path
+      // Presence path structure: [path, to, file, fileId, position]
+      // We want the fileId which should be at index 1 for files
+      const presenceFileId = presence.start[1] as VizFileId;
+      // If the presence is for the currently active file, do nothing
+      // (the CodeMirror extension will handle displaying the cursor)
+      if (presenceFileId === activeFileIdRef.current) {
+        return;
+      }
+      // If the presence is for a different file, open that tab
+      DEBUG &&
+        console.log(
+          `[usePresenceAutoFollow] Auto-opening tab for ${presence.username} in file ${presenceFileId}`,
+        );
+      openTab({
+        fileId: presenceFileId,
+        isTransient: true,
+      });
+    };
+    // Subscribe to presence changes
+    docPresence.on('receive', handlePresenceReceive);
+    // Cleanup subscription on unmount
+    return () => {
+      docPresence.off('receive', handlePresenceReceive);
+    };
+  }, [docPresence, openTab]);
+};

package/src/client/useRunCode.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { SubmitOperation } from '../types';
-import { VizContent } from '@vizhub/viz-types';
+import { createRunCodeFunction } from '../runCode';
 // Runs the code by flashing `isInteracting` to `true`.
 export const useRunCode = (
@@ -8,21 +8,7 @@ export const useRunCode = (
 ) => {
   const runCodeRef = useRef(null);
   useEffect(() => {
-    const runCode = () => {
-      submitOperation((content: VizContent) => ({
-        ...content,
-        isInteracting: true,
-      }));
-      setTimeout(() => {
-        // This somewhat cryptic logic
-        // deletes the `isInteracting` property
-        // from the document.
-        submitOperation(
-          ({ isInteracting, ...newDocument }) =>
-            newDocument,
-        );
-      }, 0);
-    };
+    const runCode = createRunCodeFunction(submitOperation);
     runCodeRef.current = runCode;
   }, [submitOperation]);
   return runCodeRef;

package/src/client/useSubmitOperation.ts CHANGED Viewed

@@ -1,22 +1,15 @@
 import { useCallback } from 'react';
 import { ShareDBDoc } from '../types'; // Assuming ShareDBDoc is already generic
-import { diff } from './diff';
+import { createSubmitOperation } from '../submitOperation';
 // A generic helper function to submit diff-based operations to ShareDB
 export const useSubmitOperation = <T>(
   shareDBDoc: ShareDBDoc<T>,
 ): ((next: (data: T) => T) => void) => {
   const submitOperation: (next: (data: T) => T) => void =
-    useCallback(
-      (next) => {
-        const data: T = shareDBDoc.data;
-        const op = diff(data, next(data));
-        if (op && shareDBDoc) {
-          shareDBDoc.submitOp(op);
-        }
-      },
-      [shareDBDoc],
-    );
+    useCallback(() => {
+      return createSubmitOperation(shareDBDoc);
+    }, [shareDBDoc])();
   return submitOperation;
 };

package/src/runCode.js ADDED Viewed

@@ -0,0 +1,48 @@
+import { createSubmitOperation } from './submitOperation.js';
+// TODO migrate the server-side code to use TypeScript,
+// and delete this file once the migration is complete (use src/runCode.ts instead).
+/**
+ * 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,
+) => {
+  return () => {
+    let 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;
+    } else {
+      // Server-side: create submitOperation from ShareDB document
+      submitOperation = createSubmitOperation(
+        submitOperationOrDoc,
+      );
+    }
+    // Use the unified submitOperation approach for both client and server
+    submitOperation((content) => ({
+      ...content,
+      isInteracting: true,
+    }));
+    setTimeout(() => {
+      submitOperation((content) => ({
+        ...content,
+        isInteracting: false,
+      }));
+    }, 0);
+  };
+};
+/**
+ * Creates a runCodeRef object compatible with React refs.
+ * This is useful for maintaining compatibility with existing code that expects a ref.
+ */
+export const createRunCodeRef = (submitOperationOrDoc) => {
+  return {
+    current: createRunCodeFunction(submitOperationOrDoc),
+  };
+};

package/src/runCode.ts ADDED Viewed

@@ -0,0 +1,58 @@
+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 },
+) => {
+  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,
+      isInteracting: true,
+    }));
+    setTimeout(() => {
+      // This somewhat cryptic logic
+      // deletes the `isInteracting` property
+      // from the document.
+      submitOperation(
+        ({ isInteracting, ...newDocument }) => newDocument,
+      );
+    }, 0);
+  };
+};
+/**
+ * Creates a runCodeRef object compatible with React refs.
+ * This is useful for maintaining compatibility with existing code that expects a ref.
+ */
+export const createRunCodeRef = (
+  submitOperationOrDoc:
+    | SubmitOperation
+    | { data: any; submitOp: (ops: any) => void },
+) => {
+  return {
+    current: createRunCodeFunction(submitOperationOrDoc),
+  };
+};

package/src/server/aiChatHandler/aiEditing.ts ADDED Viewed

@@ -0,0 +1,44 @@
+import {
+  assembleFullPrompt,
+  prepareFilesForPrompt,
+} from 'editcodewithai';
+import { formatMarkdownFiles } from 'llm-code-format';
+/**
+ * Performs AI editing operations using streaming with incremental OT operations
+ */
+export const performAIEditing = async ({
+  prompt,
+  shareDBDoc,
+  llmFunction,
+  runCode,
+}) => {
+  const preparedFiles = prepareFilesForPrompt(
+    shareDBDoc.data.files,
+  );
+  const filesContext = formatMarkdownFiles(preparedFiles);
+  // 2. Assemble the final prompt
+  const fullPrompt = assembleFullPrompt({
+    filesContext,
+    prompt,
+    editFormat: 'whole',
+  });
+  // Call the LLM function which will handle streaming and incremental file updates
+  const result = await llmFunction(fullPrompt);
+  // Clear the scratchpad and update status
+  // clearAIScratchpadAndStatus(
+  //   shareDBDoc,
+  //   chatId,
+  //   'Done editing with AI.',
+  // );
+  runCode();
+  return {
+    content: result.content,
+    generationId: result.generationId,
+  };
+};