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

vzcode 1.38.0 → 1.39.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 (21) hide show

package/dist/assets/{index-Cw7RI1uP.js → index-0y6ZxgSv.js} +91 -91
package/dist/index.html +1 -1
package/package.json +6 -5
package/src/client/CodeEditor/getOrCreateEditor.ts +0 -3
package/src/client/CodeEditor/index.tsx +0 -1
package/src/client/CodeEditor/json1PresenceDisplay.ts +4 -18
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 +86 -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.js +32 -30
package/src/server/aiChatHandler/chatOperations.js +132 -7
package/src/server/aiChatHandler/index.js +17 -23
package/src/server/aiChatHandler/llmStreaming.js +144 -32
package/src/server/index.js +19 -9
package/src/submitOperation.js +16 -0
package/src/submitOperation.ts +25 -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-0y6ZxgSv.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DKLiE98a.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "1.38.0",
+  "version": "1.39.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -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,11 +169,14 @@
     "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",

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 = true;
-// 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 {
@@ -68,7 +60,7 @@ export const json1PresenceDisplay = ({
         docPresence.on(
           'receive',
           (id: PresenceId, presence: Presence) => {
-            if (debug) {
+            if (DEBUG) {
               console.log(
                 `Received presence for id ${id}`,
                 presence,
@@ -94,14 +86,8 @@ export const json1PresenceDisplay = ({
               // Otherwise, delete the presence state.
               delete presenceState[id];
-              // 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,
-                });
-              }
+              // Note: Auto-follow tab opening is now handled by usePresenceAutoFollow hook
+              // in VZCodeContext, which works independently of CodeMirror extensions
             }
             // Update decorations to reflect new presence state.
             // TODO consider mutating this rather than recomputing it on each change.

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,86 @@
+import { useContext, useEffect, useRef } from 'react';
+import { VZCodeContext } from './VZCodeContext';
+import { Presence, PresenceId, TabState } from '../types';
+import { VizFileId } from '@vizhub/viz-types';
+const DEBUG = true;
+/**
+ * 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.js CHANGED Viewed

@@ -1,42 +1,44 @@
-import { performAiEdit } from 'editcodewithai';
 import {
-  clearAIScratchpadAndStatus,
-  updateFiles,
-  setIsInteracting,
-} from './chatOperations.js';
+  assembleFullPrompt,
+  prepareFilesForPrompt,
+} from 'editcodewithai';
+import { formatMarkdownFiles } from 'llm-code-format';
 /**
- * Performs AI editing operations on the files
+ * Performs AI editing operations using streaming with incremental OT operations
  */
-export const performAIEditing = async (
+export const performAIEditing = async ({
+  prompt,
   shareDBDoc,
-  chatId,
-  content,
-  files,
   llmFunction,
-) => {
-  const editResult = await performAiEdit({
-    prompt: content,
-    files,
-    llmFunction,
-    apiKey: process.env.VIZHUB_EDIT_WITH_AI_API_KEY,
-  });
-  // Clear the scratchpad and update status
-  clearAIScratchpadAndStatus(
-    shareDBDoc,
-    chatId,
-    'Done editing with AI.',
+  runCode,
+}) => {
+  const preparedFiles = prepareFilesForPrompt(
+    shareDBDoc.data.files,
   );
+  const filesContext = formatMarkdownFiles(preparedFiles);
-  // Apply AI edits to files
-  updateFiles(shareDBDoc, editResult.changedFiles);
+  // 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);
-  // Wait for propagation
-  await new Promise((resolve) => setTimeout(resolve, 100));
+  // Clear the scratchpad and update status
+  // clearAIScratchpadAndStatus(
+  //   shareDBDoc,
+  //   chatId,
+  //   'Done editing with AI.',
+  // );
-  // Unset isInteracting
-  setIsInteracting(shareDBDoc, false);
+  runCode();
-  return editResult;
+  return {
+    content: result.content,
+    generationId: result.generationId,
+  };
 };