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

vzcode 1.56.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 (17) hide show

package/dist/assets/{index-COSAnnol.css → index-CE_xP06t.css} +1 -1
package/dist/assets/{index-Cp6YlJo2.js → index-CtGus8Qk.js} +124 -123
package/dist/index.html +2 -2
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/ChatInput.tsx +20 -21
package/src/client/VZSidebar/AIChat/DiffView.scss +8 -0
package/src/client/VZSidebar/AIChat/DiffView.tsx +105 -1
package/src/client/VZSidebar/AIChat/Message.tsx +20 -4
package/src/client/VZSidebar/AIChat/StreamingMessage.tsx +1 -1
package/src/client/VZSidebar/AIChat/index.tsx +158 -266
package/src/client/VZSidebar/AIChat/styles.scss +52 -11
package/src/server/aiChatHandler/chatOperations.ts +4 -2
package/src/server/aiChatHandler/index.ts +9 -1
package/src/server/aiChatHandler/llmStreaming.ts +24 -11

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-Cp6YlJo2.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-COSAnnol.css">
+    <script type="module" crossorigin src="/assets/index-CtGus8Qk.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CE_xP06t.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "1.56.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/ChatInput.tsx CHANGED Viewed

@@ -112,7 +112,7 @@ const ChatInputComponent = ({
       <Form.Group className="ai-chat-input-group">
         <Form.Control
           as="textarea"
-          rows={2}
+          rows={5}
           value={aiChatMessage}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
@@ -126,26 +126,25 @@ const ChatInputComponent = ({
           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={handleSendClick}
-          disabled={!aiChatMessage.trim() || isLoading}
-          className="ai-chat-send-button"
-          aria-label="Send message"
-          title="Send message (Enter)"
-        >
-          Send
-        </Button>
+        <div className="ai-chat-input-footer">
+          <span className="ai-chat-hint">
+            {aiChatMessage ? 'Press Enter to send' : ''}
+          </span>
+          <Button
+            variant={
+              aiChatMessage.trim()
+                ? 'primary'
+                : 'outline-secondary'
+            }
+            onClick={handleSendClick}
+            disabled={!aiChatMessage.trim() || isLoading}
+            className="ai-chat-send-button"
+            aria-label="Send message"
+            title="Send message (Enter)"
+          >
+            Send
+          </Button>
+        </div>
       </Form.Group>
     </div>
   );

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

@@ -119,6 +119,14 @@
       border-color: var(--d2h-ins-border-color) !important;
     }
+    // Style clickable file names
+    .d2h-file-name {
+      &:hover {
+        text-decoration: underline !important;
+        opacity: 0.8;
+      }
+    }
     // Fix wrapper border
     .d2h-file-wrapper {
       border: 1px solid var(--d2h-border-color) !important;

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

@@ -1,4 +1,9 @@
-import React from 'react';
+import React, {
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 import {
   UnifiedFilesDiff,
   parseUnifiedDiffStats,
@@ -7,6 +12,8 @@ import {
 import * as Diff2Html from 'diff2html';
 import 'diff2html/bundles/css/diff2html.min.css';
 import './DiffView.scss';
+import { VZCodeContext } from '../../VZCodeContext';
+import { VizFileId, VizFiles } from '@vizhub/viz-types';
 interface DiffViewProps {
   diffData: UnifiedFilesDiff;
@@ -15,6 +22,10 @@ interface DiffViewProps {
 export const DiffView: React.FC<DiffViewProps> = ({
   diffData,
 }) => {
+  const { content, openTab, setIsAIChatOpen } =
+    useContext(VZCodeContext);
+  const diffContainerRef = useRef<HTMLDivElement>(null);
   const unifiedDiffs = Object.values(diffData).filter(
     (diff) => diff.length > 0,
   );
@@ -42,6 +53,98 @@ export const DiffView: React.FC<DiffViewProps> = ({
     outputFormat: 'line-by-line',
   });
+  // Create a mapping from file name to file ID for click handling
+  const fileNameToIdMap = useMemo(() => {
+    const map = new Map<string, VizFileId>();
+    Object.entries(diffData).forEach(([fileId, diff]) => {
+      // Extract file name from the unified diff
+      // The diff contains lines like "--- a/filename" and "+++ b/filename"
+      const lines = diff.split('\n');
+      for (const line of lines) {
+        if (
+          line.startsWith('--- a/') ||
+          line.startsWith('+++ b/')
+        ) {
+          const fileName = line.substring(6); // Remove "--- a/" or "+++ b/"
+          map.set(fileName, fileId as VizFileId);
+          break;
+        }
+      }
+    });
+    return map;
+  }, [diffData]);
+  // Add click handlers to file names after HTML is rendered
+  useEffect(() => {
+    if (!diffContainerRef.current) return;
+    const handleFileNameClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (target.classList.contains('d2h-file-name')) {
+        event.preventDefault();
+        event.stopPropagation();
+        console.log('File name clicked');
+        const fileName = target.textContent?.trim();
+        console.log('Clicked file name:', fileName);
+        if (fileName) {
+          const files: VizFiles = content?.files;
+          if (files) {
+            //             export type VizFiles = {
+            //     [fileId: VizFileId]: VizFile;
+            // };
+            // export type VizFileId = string;
+            // export type VizFile = {
+            //     name: string;
+            //     text: string;
+            // };
+            // TODO get fileId from content.files
+            const fileId = Object.entries(files).find(
+              ([id, file]) => file.name === fileName,
+            )?.[0];
+            console.log('Mapped file ID:', fileId);
+            if (fileId) {
+              // Open the file tab and switch to files view
+              openTab({ fileId, isTransient: false });
+              setIsAIChatOpen(false);
+            }
+          }
+        }
+      }
+    };
+    const container = diffContainerRef.current;
+    const fileNameElements = container.querySelectorAll(
+      '.d2h-file-name',
+    );
+    // Add click event listeners and cursor pointer style
+    fileNameElements.forEach((element) => {
+      element.addEventListener(
+        'click',
+        handleFileNameClick,
+      );
+      (element as HTMLElement).style.cursor = 'pointer';
+      (element as HTMLElement).style.textDecoration =
+        'underline';
+      (element as HTMLElement).style.color = '#58a6ff'; // GitHub blue link color
+    });
+    return () => {
+      // Cleanup event listeners
+      fileNameElements.forEach((element) => {
+        element.removeEventListener(
+          'click',
+          handleFileNameClick,
+        );
+      });
+    };
+  }, [diffHtml, content, openTab, setIsAIChatOpen]);
   return (
     <div className="diff-view">
       <div className="diff-summary">
@@ -65,6 +168,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
       <div
         className="diff-files"
+        ref={diffContainerRef}
         dangerouslySetInnerHTML={{ __html: diffHtml }}
       />
     </div>

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/StreamingMessage.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ const StreamingMessageComponent = ({
   status,
 }: StreamingMessageProps) => {
   // Don't render if there's no content and no status
-  if (!content.trim() && !status) {
+  if (!content.trim()) {
     return null;
   }