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

vzcode 1.58.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 (15) hide show

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-CtGus8Qk.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.58.0",
+  "version": "1.59.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -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,7 +179,7 @@
     "@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",
@@ -189,7 +189,7 @@
     "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/VZCodeContext.tsx CHANGED Viewed

@@ -202,7 +202,10 @@ export type VZCodeContextValue = {
   currentChatId: string;
   aiErrorMessage: string | null;
   setAIErrorMessage: (state: string | null) => void;
-  handleSendMessage: (messageToSend?: string) => void;
+  handleSendMessage: (
+    messageToSend?: string,
+    options?: Record<string, string>,
+  ) => void;
   // Auto-fork functions for VizHub integration
   autoForkAndRetryAI?: (
@@ -221,6 +224,10 @@ export type VZCodeContextValue = {
     messageId: string;
     chatId: string;
     canUndo: boolean;
+    handleSendMessage?: (
+      messageToSend?: string,
+      options?: Record<string, string>,
+    ) => void;
   }>;
 };
@@ -510,7 +517,10 @@ export const VZCodeProvider = ({
   >(null);
   const handleSendMessage = useCallback(
-    async (messageToSend?: string) => {
+    async (
+      messageToSend?: string,
+      options?: Record<string, string>,
+    ) => {
       DEBUG &&
         console.log(
           'AIChat: handleSendMessage called with:',
@@ -544,10 +554,10 @@ export const VZCodeProvider = ({
           },
           body: JSON.stringify({
             ...aiChatOptions,
-            vizId: aiChatOptions.vizId,
             content: messageContent.trim(),
             chatId: currentChatId,
             mode: aiChatMode,
+            ...options,
           }),
         });

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

@@ -40,6 +40,7 @@ const MessageComponent = ({
     aiChatUndoEndpoint,
     aiChatOptions = {},
     additionalWidgets,
+    handleSendMessage,
   } = useContext(VZCodeContext);
   // Memoize date formatting to avoid repeated computation
@@ -117,6 +118,7 @@ const MessageComponent = ({
             messageId: id,
             chatId: chatId,
             canUndo: canUndo,
+            handleSendMessage,
           })}
         {!additionalWidgets && canUndo && beforeFiles && (
           <div className="undo-button-container">

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>

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

@@ -1,18 +1,9 @@
-import {
-  useContext,
-  useState,
-  useCallback,
-  useMemo,
-  useEffect,
-} from 'react';
+import { useContext, useMemo, useEffect } from 'react';
 import { VZCodeContext } from '../../VZCodeContext';
-import { v4 as uuidv4 } from 'uuid';
 import { MessageList } from './MessageList';
 import { ChatInput } from './ChatInput';
 import './styles.scss';
-const defaultAIChatEndpoint = '/api/ai-chat/';
 const DEBUG = false;
 const showSuggestedRequests = true;
@@ -21,20 +12,16 @@ export const AIChat = () => {
   const {
     aiChatFocused,
     content,
-    aiChatEndpoint = defaultAIChatEndpoint,
-    aiChatOptions = {},
     aiChatMode,
     aiChatMessage,
     isLoading,
     currentChatId,
     aiErrorMessage,
     setAIChatMode,
-    autoForkAndRetryAI,
     clearStoredAIPrompt,
     getStoredAIPrompt,
     setAIChatMessage,
     handleSendMessage,
-    setIsLoading,
     setAIErrorMessage,
   } = useContext(VZCodeContext);

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

@@ -182,6 +182,7 @@
   .undo-button-container {
     display: flex;
     justify-content: flex-end;
+    gap: 8px;
     margin-top: 16px;
   }
@@ -560,6 +561,21 @@
     max-height: 200px;
     overflow-y: auto;
     background: var(--vh-color-neutral-02);
+    scroll-behavior: smooth;
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+    &::-webkit-scrollbar-track {
+      background: var(--vh-color-neutral-02);
+      border-radius: 3px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: var(--vh-color-neutral-04);
+      border-radius: 3px;
+    }
     // Style markdown content in thinking scratchpad
     p {

package/src/server/aiChatHandler/index.ts CHANGED Viewed

@@ -24,11 +24,13 @@ export const handleAIChatMessage =
     createAIEditLocalPresence,
     onCreditDeduction,
     getCurrentCommitId,
+    model,
   }: {
     shareDBDoc: ShareDBDoc<VizContent>;
     createAIEditLocalPresence: () => any;
     onCreditDeduction?: any;
     getCurrentCommitId?: () => string | null;
+    model?: string;
   }) =>
   async (req: any, res: any) => {
     const { content, chatId, mode = 'edit' } = req.body;
@@ -67,6 +69,7 @@ export const handleAIChatMessage =
         shareDBDoc,
         createAIEditLocalPresence,
         chatId,
+        model,
       });
       // Create server-side runCode function using shareDBDoc

package/src/server/aiChatHandler/llmStreaming.ts CHANGED Viewed

@@ -49,11 +49,13 @@ export const createLLMFunction = ({
   // When false, reasoning tokens are not requested from the API
   // and reasoning content is not processed in the streaming response.
   enableReasoningTokens = false,
+  model,
 }: {
   shareDBDoc: ShareDBDoc<VizContent>;
   createAIEditLocalPresence: () => any;
   chatId: VizChatId;
   enableReasoningTokens?: boolean;
+  model?: string;
 }) => {
   return async (fullPrompt: string) => {
     const localPresence = enableStreamingEditing
@@ -200,6 +202,7 @@ export const createLLMFunction = ({
     // Stream the response with reasoning tokens
     const modelName =
+      model ||
       process.env.VIZHUB_EDIT_WITH_AI_MODEL_NAME ||
       'anthropic/claude-3.5-sonnet';