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

vzcode 1.45.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 (33) hide show

package/dist/assets/{index-C1lTrzOZ.js → index-CC0CUUDi.js} +113 -113
package/dist/assets/{index-DeeOcIzw.css → index-CQyHWTWE.css} +1 -1
package/dist/index.html +2 -2
package/package.json +7 -3
package/src/client/CodeEditor/index.tsx +7 -4
package/src/client/RunCodeWidget/index.tsx +18 -15
package/src/client/SplitPaneResizeContext.tsx +26 -108
package/src/client/VZCodeContext.tsx +8 -1
package/src/client/VZRight.tsx +32 -4
package/src/client/VZSidebar/AIChat/ChatInput.tsx +72 -2
package/src/client/VZSidebar/AIChat/DiffView.scss +29 -0
package/src/client/VZSidebar/AIChat/DiffView.tsx +62 -1
package/src/client/VZSidebar/AIChat/Message.tsx +14 -1
package/src/client/VZSidebar/AIChat/MessageList.tsx +134 -13
package/src/client/VZSidebar/AIChat/ThinkingScratchpad.tsx +37 -0
package/src/client/VZSidebar/AIChat/index.tsx +148 -12
package/src/client/VZSidebar/AIChat/styles.scss +223 -1
package/src/client/VZSidebar/aiCopyPaste.ts +6 -1
package/src/client/VZSidebar/index.tsx +10 -2
package/src/client/bootstrap.ts +11 -1
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 +37 -0
package/src/server/aiChatHandler/chatOperations.ts +38 -1
package/src/server/aiChatHandler/index.ts +20 -9
package/src/server/aiChatHandler/llmStreaming.ts +101 -19
package/src/server/generateAIResponse.ts +4 -0
package/src/server/index.ts +52 -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-C1lTrzOZ.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DeeOcIzw.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.45.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"
   },
@@ -135,8 +138,8 @@
     "@uiw/codemirror-themes": "^4.24.2",
     "@valtown/codemirror-ts": "^2.3.1",
     "@vizhub/runtime": "^4.3.0",
-    "@vizhub/viz-types": "^0.3.0",
-    "@vizhub/viz-utils": "^1.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",
@@ -173,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",

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

@@ -43,7 +43,6 @@ export const CodeEditor = ({
     theme,
     codeEditorRef,
     enableAutoFollow,
-    openTab,
     setIsAIChatOpen,
     setAIChatMessage,
   } = useContext(VZCodeContext);
@@ -63,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]);

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>;
@@ -317,6 +321,7 @@ export const VZCodeProvider = ({
     toggleSearchFocused,
     setIsAIChatOpen,
     toggleAIChatFocused,
+    setAIChatMode,
     setIsSettingsOpen,
     setIsDocOpen,
     closeSettings,
@@ -489,6 +494,8 @@ export const VZCodeProvider = ({
     setIsAIChatOpen,
     aiChatFocused,
     toggleAIChatFocused,
+    aiChatMode: state.aiChatMode,
+    setAIChatMode,
     aiChatEndpoint,
     aiChatOptions,

package/src/client/VZRight.tsx CHANGED Viewed

@@ -11,6 +11,14 @@ import {
 import BuildWorker from './buildWorker?worker';
 import { VZCodeContext } from './VZCodeContext';
 import { vizFilesToFileCollection } from '@vizhub/viz-utils';
+import { VizContent } from '@vizhub/viz-types';
+// Extend VizContent type to include hardRerun property
+type ExtendedVizContent = VizContent & {
+  // TODO remove this, use the runId property from VizContent instead.
+  // If `VizContent.runId` changes, it will trigger a hard rerun.
+  hardRerun?: boolean;
+};
 const enableIframe = true;
@@ -18,6 +26,9 @@ export const VZRight = () => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const runtimeRef = useRef<VizHubRuntime | null>(null);
   const isFirstRunRef = useRef(true);
+  const lastRunIdRef = useRef<string | undefined>(
+    undefined,
+  );
   // Get access to the current files.
   const { content, handleRuntimeError, clearRuntimeError } =
@@ -32,6 +43,15 @@ export const VZRight = () => {
   );
   const isInteracting = content?.isInteracting || false;
+  const runId = content?.runId;
+  const hardRerun =
+    (content as ExtendedVizContent)?.hardRerun || false;
+  // Check if runId has changed
+  const runIdChanged = runId !== lastRunIdRef.current;
+  if (runIdChanged) {
+    lastRunIdRef.current = runId;
+  }
   useEffect(() => {
     if (!files) return;
@@ -51,14 +71,22 @@ export const VZRight = () => {
       });
     }
-    // Run code in the iframe
-    if (isFirstRunRef.current || isInteracting) {
+    // Run code in the iframe when:
+    // 1. First run
+    // 2. User is interacting with widgets
+    // 3. runId changed (indicating AI finished or other trigger)
+    if (
+      isFirstRunRef.current ||
+      isInteracting ||
+      runIdChanged
+    ) {
       // Clear runtime errors when new code runs
       clearRuntimeError();
       runtimeRef.current?.run({
         files,
-        enableHotReloading: !isFirstRunRef.current,
+        // Enable hot reloading when interacting, disable when runId changed without interaction
+        enableHotReloading: isInteracting,
         enableSourcemap: true,
         vizId: 'example-viz',
       });
@@ -70,7 +98,7 @@ export const VZRight = () => {
     //   runtime.cleanup();
     //   worker.terminate();
     // };
-  }, [files, isInteracting]);
+  }, [files, isInteracting, runIdChanged, hardRerun]);
   return (
     <div className="right">

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

@@ -4,7 +4,12 @@ import {
   useCallback,
   memo,
 } from 'react';
-import { Form, Button } from '../../bootstrap';
+import {
+  Form,
+  Button,
+  ButtonGroup,
+  ToggleButton,
+} from '../../bootstrap';
 interface ChatInputProps {
   aiChatMessage: string;
@@ -12,6 +17,8 @@ interface ChatInputProps {
   onSendMessage: () => void;
   isLoading: boolean;
   focused: boolean;
+  aiChatMode: 'ask' | 'edit';
+  setAIChatMode: (mode: 'ask' | 'edit') => void;
 }
 const ChatInputComponent = ({
@@ -20,6 +27,8 @@ const ChatInputComponent = ({
   onSendMessage,
   isLoading,
   focused,
+  aiChatMode,
+  setAIChatMode,
 }: ChatInputProps) => {
   const inputRef = useRef<HTMLTextAreaElement>(null);
@@ -49,6 +58,50 @@ const ChatInputComponent = ({
   return (
     <div className="ai-chat-input-container">
+      <div
+        className="ai-chat-mode-toggle"
+        style={{ marginBottom: '8px' }}
+      >
+        <ButtonGroup size="sm">
+          <ToggleButton
+            id="ai-chat-mode-ask"
+            type="radio"
+            variant={
+              aiChatMode === 'ask'
+                ? 'primary'
+                : 'outline-primary'
+            }
+            name="ai-chat-mode"
+            value="ask"
+            checked={aiChatMode === 'ask'}
+            onChange={() => setAIChatMode('ask')}
+            disabled={isLoading}
+          >
+            💬 Ask
+          </ToggleButton>
+          <ToggleButton
+            id="ai-chat-mode-edit"
+            type="radio"
+            variant={
+              aiChatMode === 'edit'
+                ? 'primary'
+                : 'outline-primary'
+            }
+            name="ai-chat-mode"
+            value="edit"
+            checked={aiChatMode === 'edit'}
+            onChange={() => setAIChatMode('edit')}
+            disabled={isLoading}
+          >
+            ✏️ Edit
+          </ToggleButton>
+        </ButtonGroup>
+        <div className="ai-chat-mode-description">
+          {aiChatMode === 'ask'
+            ? 'Ask questions without editing files'
+            : 'Get answers and code edits'}
+        </div>
+      </div>
       <Form.Group className="ai-chat-input-group">
         <Form.Control
           as="textarea"
@@ -57,15 +110,32 @@ const ChatInputComponent = ({
           onChange={handleChange}
           onKeyDown={handleKeyDown}
           ref={inputRef}
-          placeholder="Describe what you'd like me to change in your code..."
+          placeholder={
+            aiChatMode === 'edit'
+              ? 'Ask me to make code changes...'
+              : 'Ask me anything about your code...'
+          }
           spellCheck="false"
           disabled={isLoading}
+          aria-label="Chat message input"
         />
+        {aiChatMessage && (
+          <div className="ai-chat-input-info">
+            <span className="ai-chat-hint">
+              Shift+Enter for new line
+            </span>
+            <span className="ai-chat-hint">
+              Press Enter to send
+            </span>
+          </div>
+        )}
         <Button
           variant="primary"
           onClick={onSendMessage}
           disabled={!aiChatMessage.trim() || isLoading}
           className="ai-chat-send-button"
+          aria-label="Send message"
+          title="Send message (Enter)"
         >
           Send
         </Button>

package/src/client/VZSidebar/AIChat/DiffView.scss CHANGED Viewed

@@ -3,6 +3,9 @@
   .diff-summary {
     margin-bottom: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     .diff-stats {
       display: flex;
@@ -28,6 +31,32 @@
     }
   }
+  .undo-button-container {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 16px;
+  }
+  .undo-button {
+    background-color: #dc3545;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 4px 8px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    &:hover:not(:disabled) {
+      background-color: #c82333;
+    }
+    &:disabled {
+      background-color: #6c757d;
+      cursor: not-allowed;
+    }
+  }
   .diff-files {
     display: flex;
     flex-direction: column;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   UnifiedFilesDiff,
   parseUnifiedDiffStats,
@@ -10,11 +10,21 @@ import './DiffView.scss';
 interface DiffViewProps {
   diffData: UnifiedFilesDiff;
+  messageId?: string;
+  chatId?: string;
+  beforeFiles?: any;
+  canUndo?: boolean;
 }
 export const DiffView: React.FC<DiffViewProps> = ({
   diffData,
+  messageId,
+  chatId,
+  beforeFiles,
+  canUndo = false,
 }) => {
+  const [isUndoing, setIsUndoing] = useState(false);
   const unifiedDiffs = Object.values(diffData).filter(
     (diff) => diff.length > 0,
   );
@@ -23,6 +33,45 @@ export const DiffView: React.FC<DiffViewProps> = ({
     return null;
   }
+  const handleUndo = async () => {
+    if (
+      !messageId ||
+      !chatId ||
+      !beforeFiles ||
+      isUndoing
+    ) {
+      return;
+    }
+    setIsUndoing(true);
+    try {
+      const response = await fetch('/ai-chat-undo', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          chatId,
+          messageId,
+        }),
+      });
+      if (!response.ok) {
+        throw new Error(
+          `HTTP error! status: ${response.status}`,
+        );
+      }
+      // The server will handle the ShareDB operations to undo the changes
+      // The UI will update automatically via ShareDB
+    } catch (error) {
+      console.error('Error undoing AI edit:', error);
+      // TODO: Show user-friendly error message
+    } finally {
+      setIsUndoing(false);
+    }
+  };
   // Calculate statistics from all unified diffs
   let totalAdditions = 0;
   let totalDeletions = 0;
@@ -67,6 +116,18 @@ export const DiffView: React.FC<DiffViewProps> = ({
         className="diff-files"
         dangerouslySetInnerHTML={{ __html: diffHtml }}
       />
+      {canUndo && beforeFiles && (
+        <div className="undo-button-container">
+          <button
+            className="undo-button"
+            onClick={handleUndo}
+            disabled={isUndoing}
+            title="Undo this AI edit"
+          >
+            {isUndoing ? 'Undoing...' : 'Undo'}
+          </button>
+        </div>
+      )}
     </div>
   );
 };