npm - vzcode - Versions diffs - 1.57.0 → 1.59.0 - Mend

vzcode 1.57.0 → 1.59.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 (18) hide show

package/dist/assets/{buildWorker-C_tGhWXG.js → buildWorker-Dsx6rOdK.js} +1 -1
package/dist/assets/{index-DqIc-0Gp.js → index-BJI4JLx9.js} +120 -120
package/dist/assets/{index-CE_xP06t.css → index-afP-wJTZ.css} +1 -1
package/dist/assets/{worker-BrwN8AXx.js → worker-BSzbM0Uo.js} +180 -180
package/dist/assets/{worker-CekYspLa.js → worker-y5jhqCTR.js} +1 -1
package/dist/index.html +2 -2
package/package.json +7 -7
package/src/client/CodeEditor/getOrCreateEditor.tsx +7 -7
package/src/client/CodeEditor/index.tsx +2 -0
package/src/client/VZCodeContext.tsx +155 -0
package/src/client/VZSidebar/AIChat/Message.tsx +22 -4
package/src/client/VZSidebar/AIChat/MessageList.tsx +0 -2
package/src/client/VZSidebar/AIChat/ThinkingScratchpad.tsx +121 -2
package/src/client/VZSidebar/AIChat/index.tsx +12 -138
package/src/client/VZSidebar/AIChat/styles.scss +16 -0
package/src/server/aiChatHandler/chatOperations.ts +4 -2
package/src/server/aiChatHandler/index.ts +12 -1
package/src/server/aiChatHandler/llmStreaming.ts +26 -10

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-DqIc-0Gp.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CE_xP06t.css">
+    <script type="module" crossorigin src="/assets/index-BJI4JLx9.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-afP-wJTZ.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "1.57.0",
+  "version": "1.59.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "test": "vitest run",
-    "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",
+    "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\"",
@@ -117,8 +117,8 @@
     "@codemirror/state": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.38.1",
-    "@langchain/core": "^0.3.66",
-    "@langchain/openai": "^0.6.3",
+    "@langchain/core": "^0.3.67",
+    "@langchain/openai": "^0.6.4",
     "@lezer/highlight": "^1.2.1",
     "@livekit/components-react": "^2.9.14",
     "@replit/codemirror-indentation-markers": "^6.5.3",
@@ -179,17 +179,17 @@
     "@tauri-apps/cli": "^2.7.1",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-react": "^5.0.0",
     "concurrently": "^9.2.0",
     "cross-env": "^10.0.0",
     "eslint": "^9.32.0",
     "globals": "^16.3.0",
     "npm-check-updates": "^18.0.2",
     "prettier": "^3.6.2",
-    "sass": "^1.89.2",
+    "sass": "^1.90.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.2",
-    "vite": "^7.0.6",
+    "vite": "^7.1.0",
     "vitest": "^3.2.4"
   },
   "optionalDependencies": {

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

@@ -74,6 +74,7 @@ import { getFileExtension } from '../utils/fileExtension';
 import { SparklesSVG } from '../Icons/SparklesSVG';
 import { VZCodeContext } from '../VZCodeContext';
 import { useContext, useMemo } from 'react';
+import { handleAIChatMessage } from '../../server/aiChatHandler';
 const DEBUG = false;
@@ -194,6 +195,7 @@ export const getOrCreateEditor = async ({
   rainbowBracketsEnabled = true,
   setIsAIChatOpen,
   setAIChatMessage,
+  handleSendMessage,
 }: {
   // TODO pass this in from the outside
   paneId?: PaneId;
@@ -229,8 +231,9 @@ export const getOrCreateEditor = async ({
     view: EditorView,
   ) => Promise<readonly Diagnostic[]>;
   rainbowBracketsEnabled?: boolean; // New parameter type
-  setIsAIChatOpen: any; // TODO fix types
-  setAIChatMessage: any; // TODO fix types
+  setIsAIChatOpen: (isAIChatOpen: boolean) => void;
+  setAIChatMessage: (message: string) => void;
+  handleSendMessage: any; // TODO fix types
 }): Promise<ExtendedEditorCacheValue> => {
   // Cache hit
@@ -500,12 +503,9 @@ export const getOrCreateEditor = async ({
         root.render(
           <div
             onClick={() => {
-              console.log(
-                'TODO set the chat prompt to "Implement the TODO"',
-              );
               setIsAIChatOpen(true);
-              setAIChatMessage('Implement the TODO');
-              // submitAIChatMessage()
+              // setAIChatMessage('Implement the TODO');
+              handleSendMessage('Implement the TODO');
             }}
           >
             <SparklesSVG width={14} height={14} />

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

@@ -45,6 +45,7 @@ export const CodeEditor = ({
     enableAutoFollow,
     setIsAIChatOpen,
     setAIChatMessage,
+    handleSendMessage,
   } = useContext(VZCodeContext);
   // Set `doc.data.isInteracting` to `true` when the user is interacting
@@ -116,6 +117,7 @@ export const CodeEditor = ({
         esLintSource,
         setIsAIChatOpen,
         setAIChatMessage,
+        handleSendMessage,
       });
       if (isMounted) {

package/src/client/VZCodeContext.tsx CHANGED Viewed

@@ -1,4 +1,5 @@
 import {
+  Context,
   createContext,
   useCallback,
   useReducer,
@@ -39,6 +40,7 @@ import { useURLSync } from './useURLSync';
 import { createInitialState, vzReducer } from './vzReducer';
 import { findPane } from './vzReducer/findPane';
 import { usePresenceAutoFollow } from './usePresenceAutoFollow';
+import { v4 as uuidv4 } from 'uuid';
 // This context centralizes all the "smart" logic
 // to do with the application state. This includes
@@ -195,6 +197,15 @@ export type VZCodeContextValue = {
   setVoiceChatModalOpen: (state: boolean) => void;
   aiChatMessage: string;
   setAIChatMessage: (message: string) => void;
+  isLoading: boolean;
+  setIsLoading: (state: boolean) => void;
+  currentChatId: string;
+  aiErrorMessage: string | null;
+  setAIErrorMessage: (state: string | null) => void;
+  handleSendMessage: (
+    messageToSend?: string,
+    options?: Record<string, string>,
+  ) => void;
   // Auto-fork functions for VizHub integration
   autoForkAndRetryAI?: (
@@ -207,6 +218,17 @@ export type VZCodeContextValue = {
     prompt: string;
     modelName: string;
   } | null;
+  // Additional widgets that can be rendered in AI chat messages
+  additionalWidgets?: React.ComponentType<{
+    messageId: string;
+    chatId: string;
+    canUndo: boolean;
+    handleSendMessage?: (
+      messageToSend?: string,
+      options?: Record<string, string>,
+    ) => void;
+  }>;
 };
 export const VZCodeProvider = ({
@@ -233,6 +255,7 @@ export const VZCodeProvider = ({
   autoForkAndRetryAI,
   clearStoredAIPrompt,
   getStoredAIPrompt,
+  additionalWidgets,
 }: {
   content: VizContent;
   shareDBDoc: ShareDBDoc<VizContent>;
@@ -264,6 +287,11 @@ export const VZCodeProvider = ({
     prompt: string;
     modelName: string;
   } | null;
+  additionalWidgets?: React.ComponentType<{
+    messageId: string;
+    chatId: string;
+    canUndo: boolean;
+  }>;
 }) => {
   // Auto-run Pretter after local changes.
   const { prettierError, runPrettierRef } = usePrettier({
@@ -324,6 +352,7 @@ export const VZCodeProvider = ({
     username,
     enableAutoFollow,
     sidebarPresenceIndicators,
+    aiChatMode,
   } = state;
   const activePane: Pane = findPane(pane, activePaneId);
@@ -479,6 +508,123 @@ export const VZCodeProvider = ({
   const [aiChatMessage, setAIChatMessage] = useState('');
+  const DEBUG = false;
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentChatId] = useState(() => uuidv4());
+  const [aiErrorMessage, setAIErrorMessage] = useState<
+    string | null
+  >(null);
+  const handleSendMessage = useCallback(
+    async (
+      messageToSend?: string,
+      options?: Record<string, string>,
+    ) => {
+      DEBUG &&
+        console.log(
+          'AIChat: handleSendMessage called with:',
+          messageToSend,
+          'aiChatMessage:',
+          aiChatMessage,
+        );
+      const messageContent = messageToSend || aiChatMessage;
+      if (
+        !messageContent ||
+        typeof messageContent !== 'string' ||
+        !messageContent.trim() ||
+        isLoading
+      ) {
+        return;
+      }
+      const currentPrompt = aiChatMessage.trim();
+      setAIChatMessage('');
+      setIsLoading(true);
+      setAIErrorMessage(null); // Clear any previous errors
+      // Call backend endpoint for AI response
+      // The server will handle all ShareDB operations including adding the user message
+      try {
+        const response = await fetch(aiChatEndpoint, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            ...aiChatOptions,
+            content: messageContent.trim(),
+            chatId: currentChatId,
+            mode: aiChatMode,
+            ...options,
+          }),
+        });
+        if (!response.ok) {
+          throw new Error(
+            `HTTP error! status: ${response.status}`,
+          );
+        }
+        // Parse the response to check for errors
+        const responseData = await response.json();
+        // Check if the response contains a VizHub error
+        if (
+          responseData.outcome === 'failure' &&
+          responseData.error
+        ) {
+          const errorMessage = responseData.error.message;
+          // Check if this is the specific permission error that should trigger auto-fork
+          if (
+            aiErrorMessage ===
+            'You do not have permission to use AI chat on this visualization. Only users with edit access can use this feature. Fork the viz to edit it.'
+          ) {
+            // Trigger auto-fork instead of showing error
+            try {
+              await autoForkAndRetryAI?.(
+                currentPrompt,
+                aiChatMode,
+              );
+              // If we reach here, the fork was successful and redirect should happen
+              return;
+            } catch (forkError) {
+              console.error('Auto-fork failed:', forkError);
+              setAIErrorMessage(
+                'Failed to fork visualization. Please try forking manually.',
+              );
+              return;
+            }
+          }
+          // For other errors, show the error message
+          setAIErrorMessage(aiErrorMessage);
+          return;
+        }
+        // The backend handles all ShareDB operations for successful responses
+      } catch (error) {
+        console.error('Error getting AI response:', error);
+        setAIErrorMessage(
+          'Failed to send message. Please try again.',
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [
+      aiChatMessage,
+      isLoading,
+      aiChatEndpoint,
+      aiChatOptions,
+      currentChatId,
+      aiChatMode,
+      autoForkAndRetryAI,
+    ],
+  );
   // The value provided by this context.
   const value: VZCodeContextValue = {
     content,
@@ -589,11 +735,20 @@ export const VZCodeProvider = ({
     aiChatMessage,
     setAIChatMessage,
+    isLoading,
+    setIsLoading,
+    currentChatId,
+    aiErrorMessage,
+    setAIErrorMessage,
+    handleSendMessage,
     // Auto-fork functions for VizHub integration
     autoForkAndRetryAI,
     clearStoredAIPrompt,
     getStoredAIPrompt,
+    // Additional widgets that can be rendered in AI chat messages
+    additionalWidgets,
   };
   return (

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

@@ -1,7 +1,12 @@
 import { timestampToDate } from '@vizhub/viz-utils';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { useMemo, memo, useState, useContext } from 'react';
+import React, {
+  useMemo,
+  memo,
+  useState,
+  useContext,
+} from 'react';
 import { DiffView } from './DiffView';
 import { UnifiedFilesDiff } from '../../../utils/fileDiff';
 import { enableDiffView } from '../../featureFlags';
@@ -31,8 +36,12 @@ const MessageComponent = ({
   canUndo,
 }: MessageProps) => {
   const [isUndoing, setIsUndoing] = useState(false);
-  const { aiChatUndoEndpoint, aiChatOptions = {} } =
-    useContext(VZCodeContext);
+  const {
+    aiChatUndoEndpoint,
+    aiChatOptions = {},
+    additionalWidgets,
+    handleSendMessage,
+  } = useContext(VZCodeContext);
   // Memoize date formatting to avoid repeated computation
   const formattedTime = useMemo(() => {
@@ -102,7 +111,16 @@ const MessageComponent = ({
           Object.keys(diffData).length > 0 && (
             <DiffView diffData={diffData} />
           )}
-        {canUndo && beforeFiles && (
+        {additionalWidgets &&
+          canUndo &&
+          chatId &&
+          React.createElement(additionalWidgets, {
+            messageId: id,
+            chatId: chatId,
+            canUndo: canUndo,
+            handleSendMessage,
+          })}
+        {!additionalWidgets && canUndo && beforeFiles && (
           <div className="undo-button-container">
             <button
               className="undo-button"

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

@@ -12,13 +12,11 @@ import { VizChatMessage } from '@vizhub/viz-types';
 const MessageListComponent = ({
   messages,
-  aiStatus,
   isLoading,
   chatId, // Add chatId prop
   aiScratchpad, // Add aiScratchpad prop
 }: {
   messages: VizChatMessage[];
-  aiStatus?: string;
   isLoading: boolean;
   chatId?: string; // Add chatId to the type
   aiScratchpad?: string; // Add aiScratchpad to the type

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

@@ -1,4 +1,10 @@
-import { memo } from 'react';
+import {
+  memo,
+  useRef,
+  useEffect,
+  useCallback,
+  useState,
+} from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -11,6 +17,115 @@ const ThinkingScratchpadComponent = ({
   content,
   isVisible,
 }: ThinkingScratchpadProps) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [isUserScrolled, setIsUserScrolled] =
+    useState(false);
+  const [autoScrollEnabled, setAutoScrollEnabled] =
+    useState(true);
+  const scrollTimeoutRef =
+    useRef<ReturnType<typeof setTimeout>>();
+  // Check if the user is scrolled to the bottom
+  const isScrolledToBottom = useCallback(() => {
+    const container = contentRef.current;
+    if (!container) return true;
+    const threshold = 10; // Allow 10px tolerance for "at bottom"
+    const { scrollTop, scrollHeight, clientHeight } =
+      container;
+    return (
+      scrollHeight - scrollTop - clientHeight < threshold
+    );
+  }, []);
+  // Smooth scroll to bottom
+  const scrollToBottom = useCallback(() => {
+    if (!autoScrollEnabled) return;
+    const container = contentRef.current;
+    if (container) {
+      container.scrollTo({
+        top: container.scrollHeight,
+        behavior: 'smooth',
+      });
+    }
+  }, [autoScrollEnabled]);
+  // Handle scroll events to detect user manual scrolling
+  const handleScroll = useCallback(() => {
+    const container = contentRef.current;
+    if (!container) return;
+    const isAtBottom = isScrolledToBottom();
+    // Clear any existing timeout
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current);
+    }
+    // If user scrolled up from bottom, disable auto-scroll
+    if (!isAtBottom && !isUserScrolled) {
+      setIsUserScrolled(true);
+      setAutoScrollEnabled(false);
+    }
+    // If user scrolled back to bottom, re-enable auto-scroll after a brief delay
+    if (isAtBottom && isUserScrolled) {
+      scrollTimeoutRef.current = setTimeout(() => {
+        setIsUserScrolled(false);
+        setAutoScrollEnabled(true);
+      }, 300); // 300ms delay to prevent flickering
+    }
+  }, [isUserScrolled, isScrolledToBottom]);
+  // Auto-scroll when content changes, but only if auto-scroll is enabled
+  useEffect(() => {
+    if (
+      autoScrollEnabled &&
+      !isUserScrolled &&
+      isVisible &&
+      content
+    ) {
+      // Use a short debounce to prevent multiple scroll calls during rapid updates
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+      scrollTimeoutRef.current = setTimeout(() => {
+        scrollToBottom();
+      }, 50); // 50ms debounce
+    }
+    return () => {
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, [
+    content,
+    autoScrollEnabled,
+    isUserScrolled,
+    isVisible,
+    scrollToBottom,
+  ]);
+  // Clean up timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, []);
+  // Reset scroll state when component becomes visible
+  useEffect(() => {
+    if (isVisible) {
+      setIsUserScrolled(false);
+      setAutoScrollEnabled(true);
+    }
+  }, [isVisible]);
   if (!isVisible || !content) {
     return null;
   }
@@ -23,7 +138,11 @@ const ThinkingScratchpadComponent = ({
           AI is thinking...
         </span>
       </div>
-      <div className="thinking-scratchpad-content">
+      <div
+        className="thinking-scratchpad-content"
+        ref={contentRef}
+        onScroll={handleScroll}
+      >
         <Markdown remarkPlugins={[remarkGfm]}>
           {content}
         </Markdown>