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

vzcode 1.37.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 (25) hide show

package/dist/assets/{index-BRU-VQpy.js → index-0y6ZxgSv.js} +171 -107
package/dist/assets/{index-lvLw6dCW.css → index-DKLiE98a.css} +1 -1
package/dist/index.html +2 -2
package/package.json +8 -7
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/aiCopyPaste.ts +124 -0
package/src/client/VZSidebar/index.tsx +44 -12
package/src/client/VZSidebar/styles.scss +49 -0
package/src/client/index.ts +1 -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,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-BRU-VQpy.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-lvLw6dCW.css">
+    <script type="module" crossorigin src="/assets/index-0y6ZxgSv.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DKLiE98a.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "1.37.0",
+  "version": "1.39.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -114,7 +114,7 @@
     "@codemirror/state": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.38.1",
-    "@langchain/core": "^0.3.65",
+    "@langchain/core": "^0.3.66",
     "@langchain/openai": "^0.6.2",
     "@lezer/highlight": "^1.2.1",
     "@livekit/components-react": "^2.9.14",
@@ -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.0.0",
-    "eslint": "^9.31.0",
+    "editcodewithai": "^2.2.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/aiCopyPaste.ts ADDED Viewed

@@ -0,0 +1,124 @@
+import {
+  formatMarkdownFiles,
+  parseMarkdownFiles,
+} from 'llm-code-format';
+import {
+  FORMAT_INSTRUCTIONS,
+  mergeFileChanges,
+} from 'editcodewithai';
+import { VizFiles } from '@vizhub/viz-types';
+import { vizFilesToFileCollection } from '@vizhub/viz-utils';
+export const createAICopyPasteHandlers = (
+  files: VizFiles,
+  submitOperation: any,
+  setCopyButtonText: (text: string) => void,
+  setPasteButtonText: (text: string) => void,
+) => {
+  // Copy for AI - formats all files and copies to clipboard
+  const handleCopyForAI = async () => {
+    if (!files) return;
+    try {
+      const fileCollection =
+        vizFilesToFileCollection(files);
+      // Format files for AI consumption
+      const formattedFiles =
+        formatMarkdownFiles(fileCollection) +
+        '\n\n' +
+        FORMAT_INSTRUCTIONS.whole;
+      // Copy to clipboard
+      await navigator.clipboard.writeText(formattedFiles);
+      // Show success feedback
+      setCopyButtonText('Copied!');
+      setTimeout(
+        () => setCopyButtonText('Copy for AI'),
+        2000,
+      );
+    } catch (error) {
+      console.error('Failed to copy files for AI:', error);
+      setCopyButtonText('Error');
+      setTimeout(
+        () => setCopyButtonText('Copy for AI'),
+        2000,
+      );
+    }
+  };
+  // Paste for AI - parses clipboard content and updates files
+  const handlePasteForAI = async () => {
+    if (!submitOperation) return;
+    try {
+      // Read from clipboard
+      const clipboardText =
+        await navigator.clipboard.readText();
+      // Handle various line endings
+      const normalized = clipboardText.replace(
+        /\r\n?/g,
+        '\n',
+      );
+      if (!normalized.trim()) {
+        setPasteButtonText('Empty clipboard');
+        setTimeout(
+          () => setPasteButtonText('Paste for AI'),
+          2000,
+        );
+        return;
+      }
+      // Parse the markdown files format
+      const parsed = parseMarkdownFiles(normalized, 'bold');
+      if (
+        parsed.files &&
+        Object.keys(parsed.files).length > 0
+      ) {
+        // Use mergeFileChanges utility from editcodewithai
+        const mergedFiles = mergeFileChanges(
+          files,
+          parsed.files,
+        );
+        // Update files using the submit operation
+        submitOperation((document) => ({
+          ...document,
+          files: mergedFiles,
+        }));
+        const fileCount = Object.keys(parsed.files).length;
+        setPasteButtonText('Pasted!');
+        setTimeout(
+          () => setPasteButtonText('Paste for AI'),
+          2000,
+        );
+      } else {
+        setPasteButtonText('No files found');
+        setTimeout(
+          () => setPasteButtonText('Paste for AI'),
+          2000,
+        );
+      }
+    } catch (error) {
+      console.error(
+        'Failed to paste files from AI:',
+        error,
+      );
+      setPasteButtonText('Error');
+      setTimeout(
+        () => setPasteButtonText('Paste for AI'),
+        2000,
+      );
+    }
+  };
+  return {
+    handleCopyForAI,
+    handlePasteForAI,
+  };
+};

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

@@ -35,15 +35,13 @@ import { AIChat } from './AIChat';
 import { Listing } from './Listing';
 import { Search } from './Search';
 import { useDragAndDrop } from './useDragAndDrop';
+import { createAICopyPasteHandlers } from './aiCopyPaste';
 import {
   enableLiveKit,
   enableAIChat,
 } from '../featureFlags';
 import './styles.scss';
-// TODO turn this UI back on when we are actually detecting
-// the connection status.
-// See https://github.com/vizhub-core/vzcode/issues/456
 const enableConnectionStatus = true;
 export const VZSidebar = ({
@@ -146,10 +144,8 @@ export const VZSidebar = ({
     toggleAutoFollow,
     docPresence,
     updatePresenceIndicator,
-    sidebarPresenceIndicators,
-    liveKitConnection,
-    setLiveKitConnection,
     setVoiceChatModalOpen,
+    submitOperation,
   } = useContext(VZCodeContext);
   const fileTree = useMemo(
@@ -163,6 +159,24 @@ export const VZSidebar = ({
     setIsSettingsOpen(true);
   }, []);
+  // State for AI operation feedback
+  const [copyButtonText, setCopyButtonText] =
+    useState('Copy for AI');
+  const [pasteButtonText, setPasteButtonText] =
+    useState('Paste for AI');
+  // Create AI copy/paste handlers
+  const { handleCopyForAI, handlePasteForAI } = useMemo(
+    () =>
+      createAICopyPasteHandlers(
+        files,
+        submitOperation,
+        setCopyButtonText,
+        setPasteButtonText,
+      ),
+    [files, submitOperation],
+  );
   const { sidebarWidth } = useContext(
     SplitPaneResizeContext,
   );
@@ -210,17 +224,17 @@ 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,
         };
-        // console.log('Got presence!');
-        // // console.log({presenceId,update})
-        // console.log(
-        //   JSON.stringify(presenceIndicator, null, 2),
-        // );
         updatePresenceIndicator(presenceIndicator);
       };
@@ -532,6 +546,24 @@ export const VZSidebar = ({
           )}
         </div>
       </div>
+      {!isAIChatOpen && !isSearchOpen && filesExist && (
+        <div className="ai-buttons">
+          <button
+            className="ai-button copy-button"
+            onClick={handleCopyForAI}
+            title="Copy files formatted for AI"
+          >
+            {copyButtonText}
+          </button>
+          <button
+            className="ai-button paste-button"
+            onClick={handlePasteForAI}
+            title="Paste files from AI"
+          >
+            {pasteButtonText}
+          </button>
+        </div>
+      )}
       {enableConnectionStatus && (
         <div className="connection-status">
           {isConnecting

package/src/client/VZSidebar/styles.scss CHANGED Viewed

@@ -297,6 +297,55 @@
       }
     }
   }
+  .ai-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 10px 10px 0 10px;
+    border-top: 1px solid var(--vh-color-neutral-02);
+    .ai-button {
+      padding: 8px 12px;
+      border: 1px solid var(--vh-color-neutral-03);
+      border-radius: 6px;
+      background: var(--vh-color-neutral-01);
+      color: var(--vh-color-neutral-04);
+      font-size: 12px;
+      font-weight: 500;
+      font-family: var(--vzcode-font-family);
+      cursor: pointer;
+      transition: all 0.2s ease;
+      &:hover {
+        background: var(--vh-color-hover-dark);
+        border-color: var(--vh-color-neutral-04);
+      }
+      &:active {
+        background: var(--vh-color-neutral-03);
+      }
+      &.copy-button {
+        border-color: var(--vh-color-primary-03);
+        &:hover {
+          background: var(--vh-color-hover-dark);
+          border-color: var(--vh-color-primary-04);
+        }
+      }
+      &.paste-button {
+        border-color: var(--vh-color-success-03);
+        &:hover {
+          background: var(--vh-color-hover-dark);
+          border-color: var(--vh-color-success-04);
+        }
+      }
+    }
+  }
   .name {
     display: flex;
     align-items: center;

package/src/client/index.ts CHANGED Viewed

@@ -14,5 +14,6 @@ export {
 } from './SplitPaneResizeContext';
 export { useSubmitOperation } from './useSubmitOperation';
 export { shouldTriggerRun } from './shouldTriggerRun';
+export { mergeFileChanges } from 'editcodewithai';
 export * from './Icons';

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),
+  };
+};