npm - vzcode - Versions diffs - 1.44.0 → 1.46.0 - Mend

vzcode 1.44.0 → 1.46.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 (42) hide show

package/dist/assets/{buildWorker-CRLuRnCr.js → buildWorker-C_tGhWXG.js} +135 -74
package/dist/assets/index-CC0CUUDi.js +457 -0
package/dist/assets/{index-Beqaj63x.css → index-CQyHWTWE.css} +1 -1
package/dist/assets/worker-CekYspLa.js +453 -0
package/dist/index.html +2 -2
package/package.json +13 -7
package/src/client/CodeEditor/{getOrCreateEditor.ts → getOrCreateEditor.tsx} +129 -1
package/src/client/CodeEditor/index.tsx +11 -4
package/src/client/Icons/SparklesSVG.tsx +9 -3
package/src/client/RunCodeWidget/index.tsx +18 -15
package/src/client/SplitPaneResizeContext.tsx +26 -108
package/src/client/VZCodeContext.tsx +15 -1
package/src/client/VZRight.tsx +32 -4
package/src/client/VZSidebar/AIChat/ChatInput.tsx +80 -10
package/src/client/VZSidebar/AIChat/DiffView.scss +154 -0
package/src/client/VZSidebar/AIChat/DiffView.tsx +133 -0
package/src/client/VZSidebar/AIChat/Message.tsx +24 -0
package/src/client/VZSidebar/AIChat/MessageList.tsx +134 -12
package/src/client/VZSidebar/AIChat/ThinkingScratchpad.tsx +37 -0
package/src/client/VZSidebar/AIChat/index.tsx +155 -17
package/src/client/VZSidebar/AIChat/styles.scss +223 -1
package/src/client/VZSidebar/aiCopyPaste.ts +15 -2
package/src/client/VZSidebar/index.tsx +10 -2
package/src/client/bootstrap.ts +11 -1
package/src/client/featureFlags.ts +2 -0
package/src/client/useActions.ts +12 -0
package/src/client/usePrettier/index.ts +1 -3
package/src/client/vzReducer/aiChatReducer.ts +13 -0
package/src/client/vzReducer/createInitialState.ts +1 -0
package/src/client/vzReducer/index.ts +9 -0
package/src/client/vzReducer/searchReducer.test.ts +44 -2
package/src/runCode.ts +5 -17
package/src/server/aiChatHandler/aiEditing.ts +56 -0
package/src/server/aiChatHandler/chatOperations.ts +78 -1
package/src/server/aiChatHandler/index.ts +33 -9
package/src/server/aiChatHandler/llmStreaming.ts +101 -19
package/src/server/computeInitialDocument.ts +25 -6
package/src/server/generateAIResponse.ts +4 -0
package/src/server/index.ts +83 -2
package/src/utils/fileDiff.ts +114 -0
package/dist/assets/index-C46Hp5ym.js +0 -340
package/dist/assets/worker-DkYJN5WQ.js +0 -453

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-C46Hp5ym.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Beqaj63x.css">
+    <script type="module" crossorigin src="/assets/index-CC0CUUDi.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CQyHWTWE.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "1.44.0",
+  "version": "1.46.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -18,6 +18,9 @@
     "build": "vite build",
     "build-release": "vite build --mode release",
     "preview": "concurrently \"npm run test-interactive\" \"vite preview\"",
+    "tauri": "tauri",
+    "tauri:dev": "tauri dev",
+    "tauri:build": "tauri build",
     "prepublishOnly": "npm run build-release",
     "upgrade": "ncu -x react,react-dom,@types/react,@types/react-dom -u"
   },
@@ -109,7 +112,7 @@
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/lang-markdown": "^6.3.3",
+    "@codemirror/lang-markdown": "^6.3.4",
     "@codemirror/lint": "^6.8.5",
     "@codemirror/state": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.3",
@@ -134,9 +137,9 @@
     "@uiw/codemirror-theme-xcode": "^4.24.2",
     "@uiw/codemirror-themes": "^4.24.2",
     "@valtown/codemirror-ts": "^2.3.1",
-    "@vizhub/runtime": "^4.2.0",
-    "@vizhub/viz-types": "^0.3.0",
-    "@vizhub/viz-utils": "^1.3.0",
+    "@vizhub/runtime": "^4.3.0",
+    "@vizhub/viz-types": "^0.4.0",
+    "@vizhub/viz-utils": "^1.4.0",
     "body-parser": "^2.2.0",
     "codemirror": "^6.0.2",
     "codemirror-copilot": "^0.0.7",
@@ -144,7 +147,9 @@
     "color-hash": "^2.0.2",
     "comlink": "^4.4.2",
     "d3-array": "^3.2.4",
+    "diff": "^8.0.2",
     "diff-match-patch": "^1.0.5",
+    "diff2html": "^3.4.52",
     "dotenv": "^17.2.1",
     "editcodewithai": "^2.3.0",
     "eslint-linter-browserify": "^9.32.0",
@@ -154,7 +159,7 @@
     "jszip": "^3.10.1",
     "livekit-server-sdk": "^2.13.1",
     "llm-code-format": "^3.0.0",
-    "npm": "^11.5.1",
+    "npm": "^11.5.2",
     "open": "^10.2.0",
     "prettier-plugin-svelte": "^3.4.0",
     "react": "^18",
@@ -171,6 +176,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.32.0",
+    "@tauri-apps/cli": "^2.7.1",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@vitejs/plugin-react": "^4.7.0",
@@ -182,7 +188,7 @@
     "prettier": "^3.6.2",
     "sass": "^1.89.2",
     "ts-node": "^10.9.2",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.2",
     "vite": "^7.0.6",
     "vitest": "^3.2.4"
   },

package/src/client/CodeEditor/{getOrCreateEditor.ts → getOrCreateEditor.tsx} RENAMED Viewed

@@ -1,3 +1,4 @@
+import { createRoot } from 'react-dom/client';
 import { EditorView } from 'codemirror';
 import {
   Compartment,
@@ -43,7 +44,17 @@ import {
   EditorCacheValue,
 } from '../useEditorCache';
 import { ThemeLabel, themeOptionsByLabel } from '../themes';
-import { keymap } from '@codemirror/view';
+import {
+  keymap,
+  Decoration,
+  WidgetType,
+  ViewUpdate,
+  ViewPlugin,
+  DecorationSet,
+} from '@codemirror/view';
+import { Range } from '@codemirror/state';
+import { syntaxTree } from '@codemirror/language';
+import { RegExpCursor } from '@codemirror/search';
 import { basicSetup } from './basicSetup';
 import { InteractRule } from '@replit/codemirror-interact';
 import rainbowBrackets from './rainbowBrackets';
@@ -60,6 +71,9 @@ import {
   tsSyncWorker,
 } from '@valtown/codemirror-ts';
 import { getFileExtension } from '../utils/fileExtension';
+import { SparklesSVG } from '../Icons/SparklesSVG';
+import { VZCodeContext } from '../VZCodeContext';
+import { useContext, useMemo } from 'react';
 const DEBUG = false;
@@ -178,6 +192,8 @@ export const getOrCreateEditor = async ({
   aiCopilotEndpoint,
   esLintSource,
   rainbowBracketsEnabled = true,
+  setIsAIChatOpen,
+  setAIChatMessage,
 }: {
   // TODO pass this in from the outside
   paneId?: PaneId;
@@ -213,6 +229,8 @@ export const getOrCreateEditor = async ({
     view: EditorView,
   ) => Promise<readonly Diagnostic[]>;
   rainbowBracketsEnabled?: boolean; // New parameter type
+  setIsAIChatOpen: any; // TODO fix types
+  setAIChatMessage: any; // TODO fix types
 }): Promise<ExtendedEditorCacheValue> => {
   // Cache hit
@@ -454,6 +472,116 @@ export const getOrCreateEditor = async ({
     extensions.push(copilot({ aiCopilotEndpoint }));
   }
+  // const { setIsAIChatOpen } = useContext(VZCodeContext);
+  // Widget appears after instances of "todo" in code editor, allowing AI to implement todo tasks when clicked
+  function createToDoPlugin() {
+    // setIsAIChatOpen: (open: boolean) => void,
+    class ToDoWidget extends WidgetType {
+      constructor() {
+        super();
+      }
+      eq(other: ToDoWidget) {
+        return false;
+      }
+      toDOM() {
+        const wrap = document.createElement('i');
+        wrap.style.display = 'inline-flex'; // prevent block expansion
+        wrap.style.alignItems = 'center';
+        wrap.style.justifyContent = 'center';
+        wrap.className = 'icon-button icon-button-dark';
+        const reactContainer =
+          document.createElement('div');
+        wrap.appendChild(reactContainer);
+        const root = createRoot(reactContainer);
+        root.render(
+          <div
+            onClick={() => {
+              console.log(
+                'TODO set the chat prompt to "Implement the TODO"',
+              );
+              setIsAIChatOpen(true);
+              setAIChatMessage('Implement the TODO');
+              // submitAIChatMessage()
+            }}
+          >
+            <SparklesSVG width={14} height={14} />
+          </div>,
+        );
+        return wrap;
+      }
+      ignoreEvent() {
+        return false;
+      }
+    }
+    function toDoWidgets(editor: EditorView) {
+      const { state } = editor;
+      const tree = syntaxTree(state);
+      const findToDo = new RegExpCursor(state.doc, 'todo', {
+        ignoreCase: true,
+      });
+      const widgets: Range<Decoration>[] = [];
+      while (!findToDo.next().done) {
+        const { from, to } = findToDo.value;
+        const node = tree.resolve(from);
+        let inComment = false;
+        // Walk up the parents until we hit the root, looking for a comment node
+        for (let cur: any = node; cur; cur = cur.parent) {
+          if (
+            cur.type.is('Comment') || // grammars that group comments
+            cur.type.is('comment') || // generic lowercase group
+            /Comment$/.test(cur.type.name) // fallback for e.g. LineComment
+          ) {
+            inComment = true;
+            break;
+          }
+        }
+        if (!inComment) continue; // skip non-comment TODOs
+        const deco = Decoration.widget({
+          widget: new ToDoWidget(),
+          side: 1,
+        }).range(to);
+        widgets.push(deco);
+      }
+      return Decoration.set(widgets);
+    }
+    const todoPlugin = ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet;
+        constructor(view: EditorView) {
+          this.decorations = toDoWidgets(view);
+        }
+        update(update: ViewUpdate) {
+          if (
+            update.docChanged ||
+            update.viewportChanged ||
+            syntaxTree(update.startState) !==
+              syntaxTree(update.state)
+          )
+            this.decorations = toDoWidgets(update.view);
+        }
+      },
+      {
+        decorations: (v) => v.decorations,
+      },
+    );
+    return todoPlugin;
+  }
+  extensions.push(createToDoPlugin());
   const editor = new EditorView({
     state: EditorState.create({
       doc: text,

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

@@ -43,7 +43,8 @@ export const CodeEditor = ({
     theme,
     codeEditorRef,
     enableAutoFollow,
-    openTab,
+    setIsAIChatOpen,
+    setAIChatMessage,
   } = useContext(VZCodeContext);
   // Set `doc.data.isInteracting` to `true` when the user is interacting
@@ -61,13 +62,17 @@ export const CodeEditor = ({
       clearTimeout(interactTimeoutRef.current);
     }
-    // Set `isInteracting: undefined` after a delay.
+    // Set `isInteracting: undefined` after a delay,
+    // so that when the runId changes in the future,
+    // it will trigger a hard re-run, not a hot reload.
     interactTimeoutRef.current = setTimeout(() => {
       interactTimeoutRef.current = null;
-      // This logic deletes the `isInteracting` property from the document.
+      // This logic deletes the `isInteracting` property from the document
       submitOperation(
-        ({ isInteracting, ...newDocument }) => newDocument,
+        ({ isInteracting, ...newDocument }) => ({
+          ...newDocument,
+        }),
       );
     }, 800);
   }, [submitOperation]);
@@ -109,6 +114,8 @@ export const CodeEditor = ({
         enableAutoFollowRef,
         aiCopilotEndpoint,
         esLintSource,
+        setIsAIChatOpen,
+        setAIChatMessage,
       });
       if (isMounted) {

package/src/client/Icons/SparklesSVG.tsx CHANGED Viewed

@@ -1,8 +1,14 @@
-export const SparklesSVG = () => (
+export const SparklesSVG = ({
+  width = '32',
+  height = '32',
+}: {
+  width?: string | number;
+  height?: string | number;
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="32"
-    height="32"
+    width={width}
+    height={height}
     viewBox="0 0 24 24"
     fill="currentColor"
     stroke="currentColor"

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

@@ -28,24 +28,27 @@ export const RunCodeWidget = ({
     useContext(VZCodeContext);
   const [isRunning, setIsRunning] = useState(false);
-  const handleClick = useCallback(() => {
-    setIsRunning(true); // Set the running state to true
+  const handleClick = useCallback(
+    (event?: React.MouseEvent) => {
+      setIsRunning(true); // Set the running state to true
-    // Run Prettier
-    const runPrettier = runPrettierRef.current;
-    if (runPrettier !== null) {
-      runPrettier();
-    }
+      // Run Prettier
+      const runPrettier = runPrettierRef.current;
+      if (runPrettier !== null) {
+        runPrettier();
+      }
-    // Run the code
-    const runCode = runCodeRef.current;
-    if (runCode !== null) {
-      runCode();
-    }
+      // Run the code
+      const runCode = runCodeRef.current;
+      if (runCode !== null) {
+        runCode();
+      }
-    // Optional: reset the icon state after animation completes (e.g., 1 second)
-    setTimeout(() => setIsRunning(false), 1000);
-  }, [runCodeRef, runPrettierRef]);
+      // Optional: reset the icon state after animation completes (e.g., 1 second)
+      setTimeout(() => setIsRunning(false), 1000);
+    },
+    [runCodeRef, runPrettierRef],
+  );
   const handleSplitEditor = useCallback(() => {
     splitCurrentPane();

package/src/client/SplitPaneResizeContext.tsx CHANGED Viewed

@@ -2,9 +2,8 @@
 import {
   createContext,
   useReducer,
-  useEffect,
   useCallback,
-  useLayoutEffect,
+  useEffect,
 } from 'react';
 export type Side = 'left' | 'right';
@@ -16,63 +15,22 @@ export type SplitPaneResizeContextValue = {
   isDraggingRight: boolean;
   isDraggingLeft: boolean;
   setIsDragging: (a: boolean, side: Side) => void;
+  setSidebarView: (isAIChatOpen: boolean) => void;
 };
-// Feature flag for developers to use when testing.
-const enableLocalStorage = true;
-// The amount of time to wait idle before writing to localStorage.
-// This is to avoid writing to localStorage on every resize event.
-// MS = milliseconds
-const localStorageWriteDebounceMS = 800;
-// Properties in LocalStorage
-const sidebarWidthProperty = 'vzCodeSidebarWidth';
-const codeEditorWidthProperty = 'vzCodeCodeEditorWidth';
-const initialSidebarWidthDefault = 250;
-let initialSidebarWidth: number =
-  initialSidebarWidthDefault;
+// Default widths for different sidebar views
+const filesViewWidth = 300;
+const aiChatViewWidth = 600;
 const initialCodeEditorWidthDefault = 800;
-let initialCodeEditorWidth: number =
-  initialCodeEditorWidthDefault;
-// If no value is found in localStorage, we'll use the default.
-let needsInitialization = false;
-// If we're in the browser,
-if (typeof window !== 'undefined' && enableLocalStorage) {
-  //check localStorage for a previously stored width.
-  const sidebarWidthLocal: string | null =
-    window.localStorage.getItem(sidebarWidthProperty);
-  const codeEditorWidthLocal: string | null =
-    window.localStorage.getItem(codeEditorWidthProperty);
-  // If there is a previously stored width,
-  if (sidebarWidthLocal !== null) {
-    // use it as the initial width.
-    initialSidebarWidth = +sidebarWidthLocal;
-    needsInitialization = true;
-  }
-  if (codeEditorWidthLocal !== null) {
-    // use it as the initial width.
-    initialCodeEditorWidth = +codeEditorWidthLocal;
-    needsInitialization = true;
-  }
-} else {
-  // If we're not in the browser, use the default initial width.
-}
 const initialValue: SplitPaneResizeContextValue = {
-  codeEditorWidth: initialCodeEditorWidth,
-  sidebarWidth: initialSidebarWidth,
+  codeEditorWidth: initialCodeEditorWidthDefault,
+  sidebarWidth: filesViewWidth, // Default to files view
   moveSplitPane: () => {},
   isDraggingRight: false,
   isDraggingLeft: false,
   setIsDragging: () => {},
+  setSidebarView: () => {},
 };
 export const SplitPaneResizeContext =
@@ -84,30 +42,13 @@ type SplitPaneState = {
   codeEditorWidth: number;
   isDraggingLeft: boolean;
   isDraggingRight: boolean;
-  // False on first render
-  isInitialized: boolean;
 };
 const initialState: SplitPaneState = {
-  // sidebarWidth: initialSidebarWidth,
-  // codeEditorWidth: initialCodeEditorWidth,
-  // These need to match between SSR and the first
-  // client-side render (hydration), to avoid
-  // React hydration errors like this one:
-  //  * Warning: Prop `style` did not match.
-  //  * Server: "left:210px;width:20px"
-  //  * Client: "left:218px;width:20px"
-  sidebarWidth: initialSidebarWidthDefault,
+  sidebarWidth: filesViewWidth,
   codeEditorWidth: initialCodeEditorWidthDefault,
   isDraggingLeft: false,
   isDraggingRight: false,
-  // Solution for hydration errors: we set the value from localStorage
-  // in a layoutEffect that happens after first render.
-  isInitialized: false,
 };
 type SplitPaneAction =
@@ -122,7 +63,8 @@ type SplitPaneAction =
       isDragging: boolean;
     }
   | {
-      type: 'initialize';
+      type: 'setSidebarView';
+      isAIChatOpen: boolean;
     };
 const splitPaneReducer = (
@@ -130,13 +72,6 @@ const splitPaneReducer = (
   action: SplitPaneAction,
 ) => {
   switch (action.type) {
-    case 'initialize':
-      return {
-        ...state,
-        sidebarWidth: initialSidebarWidth,
-        codeEditorWidth: initialCodeEditorWidth,
-        isInitialized: true,
-      };
     case 'move':
       return action.side === 'left'
         ? {
@@ -160,6 +95,13 @@ const splitPaneReducer = (
             ...state,
             isDraggingRight: action.isDragging,
           };
+    case 'setSidebarView':
+      return {
+        ...state,
+        sidebarWidth: action.isAIChatOpen
+          ? aiChatViewWidth
+          : filesViewWidth,
+      };
     default:
       return state;
   }
@@ -185,45 +127,20 @@ export const SplitPaneResizeProvider = ({ children }) => {
     [dispatch],
   );
+  const setSidebarView = useCallback(
+    (isAIChatOpen: boolean) => {
+      dispatch({ type: 'setSidebarView', isAIChatOpen });
+    },
+    [dispatch],
+  );
   const {
     sidebarWidth,
     codeEditorWidth,
     isDraggingLeft,
     isDraggingRight,
-    isInitialized,
   } = state;
-  // Logic around initializing from localStorage.
-  // Only run this on the client.
-  if (typeof window !== 'undefined') {
-    useLayoutEffect(() => {
-      if (needsInitialization && !isInitialized) {
-        dispatch({ type: 'initialize' });
-      }
-    }, [isInitialized]);
-  }
-  // Logic around storing the values in localStorage.
-  useEffect(() => {
-    if (sidebarWidth !== initialSidebarWidth) {
-      setTimeout(() => {
-        window.localStorage.setItem(
-          sidebarWidthProperty,
-          '' + sidebarWidth,
-        );
-      }, localStorageWriteDebounceMS);
-    }
-    if (codeEditorWidth !== initialCodeEditorWidth) {
-      setTimeout(() => {
-        window.localStorage.setItem(
-          codeEditorWidthProperty,
-          '' + codeEditorWidth,
-        );
-      }, localStorageWriteDebounceMS);
-    }
-  }, [codeEditorWidth, sidebarWidth]);
   const value: SplitPaneResizeContextValue = {
     codeEditorWidth,
     sidebarWidth,
@@ -231,6 +148,7 @@ export const SplitPaneResizeProvider = ({ children }) => {
     isDraggingLeft,
     isDraggingRight,
     setIsDragging,
+    setSidebarView,
   };
   return (

package/src/client/VZCodeContext.tsx CHANGED Viewed

@@ -126,6 +126,8 @@ export type VZCodeContextValue = {
   setIsAIChatOpen: (isAIChatOpen: boolean) => void;
   aiChatFocused: boolean;
   toggleAIChatFocused: () => void;
+  aiChatMode: 'ask' | 'edit';
+  setAIChatMode: (mode: 'ask' | 'edit') => void;
   aiChatEndpoint?: string;
   aiChatOptions?: { [key: string]: any };
   setSearchResults: (files: ShareDBDoc<VizContent>) => void;
@@ -158,7 +160,9 @@ export type VZCodeContextValue = {
   runPrettierRef: React.MutableRefObject<
     null | (() => void)
   >;
-  runCodeRef: React.MutableRefObject<null | (() => void)>;
+  runCodeRef: React.MutableRefObject<
+    null | ((hardRerun?: boolean) => void)
+  >;
   sidebarRef: React.RefObject<HTMLDivElement>;
@@ -188,6 +192,8 @@ export type VZCodeContextValue = {
   setLiveKitConnection: (state: boolean) => void;
   voiceChatModalOpen: boolean;
   setVoiceChatModalOpen: (state: boolean) => void;
+  aiChatMessage: string;
+  setAIChatMessage: (message: string) => void;
 };
 export const VZCodeProvider = ({
@@ -315,6 +321,7 @@ export const VZCodeProvider = ({
     toggleSearchFocused,
     setIsAIChatOpen,
     toggleAIChatFocused,
+    setAIChatMode,
     setIsSettingsOpen,
     setIsDocOpen,
     closeSettings,
@@ -442,6 +449,8 @@ export const VZCodeProvider = ({
   const [voiceChatModalOpen, setVoiceChatModalOpen] =
     useState(false);
+  const [aiChatMessage, setAIChatMessage] = useState('');
   // The value provided by this context.
   const value: VZCodeContextValue = {
     content,
@@ -485,6 +494,8 @@ export const VZCodeProvider = ({
     setIsAIChatOpen,
     aiChatFocused,
     toggleAIChatFocused,
+    aiChatMode: state.aiChatMode,
+    setAIChatMode,
     aiChatEndpoint,
     aiChatOptions,
@@ -546,6 +557,9 @@ export const VZCodeProvider = ({
     setLiveKitConnection,
     voiceChatModalOpen,
     setVoiceChatModalOpen,
+    aiChatMessage,
+    setAIChatMessage,
   };
   return (