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

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

package/dist/assets/{index-DqIc-0Gp.js → index-CtGus8Qk.js} +124 -124
package/dist/index.html +1 -1
package/package.json +3 -3
package/src/client/CodeEditor/getOrCreateEditor.tsx +7 -7
package/src/client/CodeEditor/index.tsx +2 -0
package/src/client/VZCodeContext.tsx +145 -0
package/src/client/VZSidebar/AIChat/Message.tsx +20 -4
package/src/client/VZSidebar/AIChat/index.tsx +12 -125
package/src/server/aiChatHandler/chatOperations.ts +4 -2
package/src/server/aiChatHandler/index.ts +9 -1
package/src/server/aiChatHandler/llmStreaming.ts +23 -10

package/dist/index.html CHANGED Viewed

@@ -20,7 +20,7 @@
       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>
+    <script type="module" crossorigin src="/assets/index-CtGus8Qk.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-CE_xP06t.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "1.57.0",
+  "version": "1.58.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\"",
@@ -186,7 +186,7 @@
     "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",

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,12 @@ 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) => void;
   // Auto-fork functions for VizHub integration
   autoForkAndRetryAI?: (
@@ -207,6 +215,13 @@ 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;
+  }>;
 };
 export const VZCodeProvider = ({
@@ -233,6 +248,7 @@ export const VZCodeProvider = ({
   autoForkAndRetryAI,
   clearStoredAIPrompt,
   getStoredAIPrompt,
+  additionalWidgets,
 }: {
   content: VizContent;
   shareDBDoc: ShareDBDoc<VizContent>;
@@ -264,6 +280,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 +345,7 @@ export const VZCodeProvider = ({
     username,
     enableAutoFollow,
     sidebarPresenceIndicators,
+    aiChatMode,
   } = state;
   const activePane: Pane = findPane(pane, activePaneId);
@@ -479,6 +501,120 @@ 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) => {
+      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,
+            vizId: aiChatOptions.vizId,
+            content: messageContent.trim(),
+            chatId: currentChatId,
+            mode: aiChatMode,
+          }),
+        });
+        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 +725,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,11 @@ const MessageComponent = ({
   canUndo,
 }: MessageProps) => {
   const [isUndoing, setIsUndoing] = useState(false);
-  const { aiChatUndoEndpoint, aiChatOptions = {} } =
-    useContext(VZCodeContext);
+  const {
+    aiChatUndoEndpoint,
+    aiChatOptions = {},
+    additionalWidgets,
+  } = useContext(VZCodeContext);
   // Memoize date formatting to avoid repeated computation
   const formattedTime = useMemo(() => {
@@ -102,7 +110,15 @@ const MessageComponent = ({
           Object.keys(diffData).length > 0 && (
             <DiffView diffData={diffData} />
           )}
-        {canUndo && beforeFiles && (
+        {additionalWidgets &&
+          canUndo &&
+          chatId &&
+          React.createElement(additionalWidgets, {
+            messageId: id,
+            chatId: chatId,
+            canUndo: canUndo,
+          })}
+        {!additionalWidgets && canUndo && beforeFiles && (
           <div className="undo-button-container">
             <button
               className="undo-button"

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

@@ -15,28 +15,27 @@ const defaultAIChatEndpoint = '/api/ai-chat/';
 const DEBUG = false;
-const showSuggestedRequests = false;
+const showSuggestedRequests = true;
 export const AIChat = () => {
-  const { aiChatMessage, setAIChatMessage } =
-    useContext(VZCodeContext);
-  const [isLoading, setIsLoading] = useState(false);
-  const [currentChatId] = useState(() => uuidv4());
-  const [errorMessage, setErrorMessage] = useState<
-    string | null
-  >(null);
   const {
     aiChatFocused,
     content,
     aiChatEndpoint = defaultAIChatEndpoint,
     aiChatOptions = {},
     aiChatMode,
+    aiChatMessage,
+    isLoading,
+    currentChatId,
+    aiErrorMessage,
     setAIChatMode,
     autoForkAndRetryAI,
     clearStoredAIPrompt,
     getStoredAIPrompt,
+    setAIChatMessage,
+    handleSendMessage,
+    setIsLoading,
+    setAIErrorMessage,
   } = useContext(VZCodeContext);
   // Get current chat data from content
@@ -58,118 +57,6 @@ export const AIChat = () => {
   // Check if this is the first time opening the chat (no messages)
   const isEmptyState = rawMessages.length === 0;
-  const handleSendMessage = useCallback(
-    async (messageToSend?: 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);
-      setErrorMessage(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,
-            vizId: aiChatOptions.vizId,
-            content: messageContent.trim(),
-            chatId: currentChatId,
-            mode: aiChatMode,
-          }),
-        });
-        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 (
-            errorMessage ===
-            '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);
-              setErrorMessage(
-                'Failed to fork visualization. Please try forking manually.',
-              );
-              return;
-            }
-          }
-          // For other errors, show the error message
-          setErrorMessage(errorMessage);
-          return;
-        }
-        // The backend handles all ShareDB operations for successful responses
-      } catch (error) {
-        console.error('Error getting AI response:', error);
-        // Fail silently in case of timeout,
-        // which happens frequently with the longer running LLM calls.
-        // TODO refactor this so that the network request to the server
-        // always returns immediately, and we track the `isLoading` state
-        // within the ShareDB document itself.
-        //
-        // setErrorMessage(
-        //   'Failed to send message. Please try again.',
-        // );
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [
-      aiChatMessage,
-      isLoading,
-      aiChatEndpoint,
-      aiChatOptions,
-      currentChatId,
-      aiChatMode,
-      autoForkAndRetryAI,
-    ],
-  );
   // Check for stored AI prompt on component mount (post-fork restoration)
   useEffect(() => {
     DEBUG &&
@@ -350,18 +237,18 @@ export const AIChat = () => {
               aiScratchpad={aiScratchpad}
             />
           )}
-          {errorMessage && (
+          {aiErrorMessage && (
             <div className="ai-chat-error">
               <div className="ai-chat-error-content">
                 <span className="ai-chat-error-icon">
                   ⚠️
                 </span>
                 <span className="ai-chat-error-message">
-                  {errorMessage}
+                  {aiErrorMessage}
                 </span>
                 <button
                   className="ai-chat-error-dismiss"
-                  onClick={() => setErrorMessage(null)}
+                  onClick={() => setAIErrorMessage(null)}
                   aria-label="Dismiss error"
                 >
                   ×

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

@@ -256,7 +256,8 @@ export const addDiffToAIMessage = (
   shareDBDoc: ShareDBDoc<VizContent>,
   chatId: VizChatId,
   diffData: any,
-  beforeFiles?: VizFiles, // Optional snapshot for undo functionality
+  beforeFiles?: VizFiles, // Optional snapshot for undo functionality (legacy)
+  beforeCommitId?: string, // Commit ID before AI changes for VizHub integration
 ) => {
   const chat = shareDBDoc.data.chats[chatId];
   const messages = [...chat.messages];
@@ -270,7 +271,8 @@ export const addDiffToAIMessage = (
     const newMessage = {
       ...messages[lastAIMessageIndex],
       diffData,
-      ...(beforeFiles && { beforeFiles }), // Add beforeFiles only if provided
+      ...(beforeFiles && { beforeFiles }), // Add beforeFiles only if provided (legacy)
+      ...(beforeCommitId && { beforeCommitId }), // Add beforeCommitId for VizHub integration
     };
     // Use type assertion to extend the message with diffData
     (messages[lastAIMessageIndex] as any) = newMessage;

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

@@ -23,10 +23,12 @@ export const handleAIChatMessage =
     shareDBDoc,
     createAIEditLocalPresence,
     onCreditDeduction,
+    getCurrentCommitId,
   }: {
     shareDBDoc: ShareDBDoc<VizContent>;
     createAIEditLocalPresence: () => any;
     onCreditDeduction?: any;
+    getCurrentCommitId?: () => string | null;
   }) =>
   async (req: any, res: any) => {
     const { content, chatId, mode = 'edit' } = req.body;
@@ -52,6 +54,11 @@ export const handleAIChatMessage =
       ensureChatsExist(shareDBDoc);
       ensureChatExists(shareDBDoc, chatId);
+      // Capture the current commit ID before making changes (for VizHub integration)
+      const beforeCommitId = getCurrentCommitId
+        ? getCurrentCommitId()
+        : null;
       // Add user message to chat
       addUserMessage(shareDBDoc, chatId, content);
@@ -92,7 +99,8 @@ export const handleAIChatMessage =
           shareDBDoc,
           chatId,
           editResult.diffData,
-          (editResult as any).beforeFiles, // Pass the beforeFiles snapshot for undo (only available for edit mode)
+          (editResult as any).beforeFiles, // Pass the beforeFiles snapshot for undo (legacy)
+          beforeCommitId, // Pass the commit ID before AI changes (for VizHub integration)
         );
       }

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

@@ -45,10 +45,15 @@ export const createLLMFunction = ({
   shareDBDoc,
   createAIEditLocalPresence,
   chatId,
+  // Feature flag to enable/disable reasoning tokens.
+  // When false, reasoning tokens are not requested from the API
+  // and reasoning content is not processed in the streaming response.
+  enableReasoningTokens = false,
 }: {
   shareDBDoc: ShareDBDoc<VizContent>;
   createAIEditLocalPresence: () => any;
   chatId: VizChatId;
+  enableReasoningTokens?: boolean;
 }) => {
   return async (fullPrompt: string) => {
     const localPresence = enableStreamingEditing
@@ -197,21 +202,29 @@ export const createLLMFunction = ({
     const modelName =
       process.env.VIZHUB_EDIT_WITH_AI_MODEL_NAME ||
       'anthropic/claude-3.5-sonnet';
-    const stream = await (
-      openRouterClient.chat.completions.create as any
-    )({
+    // Configure reasoning tokens based on enableReasoningTokens flag
+    const requestConfig: any = {
       model: modelName,
       messages: [{ role: 'user', content: fullPrompt }],
-      reasoning: {
-        effort: 'low',
-        exclude: false,
-      },
       provider: {
         sort: 'price',
       },
       usage: { include: true },
       stream: true,
-    });
+    };
+    // Only include reasoning configuration if reasoning tokens are enabled
+    if (enableReasoningTokens) {
+      requestConfig.reasoning = {
+        effort: 'low',
+        exclude: false,
+      };
+    }
+    const stream = await (
+      openRouterClient.chat.completions.create as any
+    )(requestConfig);
     let reasoningStarted = false;
     let contentStarted = false;
@@ -219,8 +232,8 @@ export const createLLMFunction = ({
     for await (const chunk of stream) {
       const delta = chunk.choices[0]?.delta as any; // Type assertion for OpenRouter-specific reasoning fields
-      if (delta?.reasoning) {
-        // Handle reasoning tokens (thinking)
+      if (delta?.reasoning && enableReasoningTokens) {
+        // Handle reasoning tokens (thinking) - only if enabled
         if (!reasoningStarted) {
           reasoningStarted = true;
           updateAIStatus(shareDBDoc, chatId, 'Thinking...');