vzcode 1.58.0 → 1.60.0

package/src/client/{VZCodeContext.tsx → VZCodeContext/useVZCodeState.ts}

@@ -1,230 +1,33 @@
 import {
-  Context,
-  createContext,
   useCallback,
   useReducer,
   useRef,
   useState,
 } from 'react';
+import { VizContent } from '@vizhub/viz-types';
+import { defaultTheme, useDynamicTheme } from '../themes';
+import { useActions } from '../useActions';
+import { useEditorCache } from '../useEditorCache';
+import { useFileCRUD } from '../useFileCRUD';
+import { useKeyboardShortcuts } from '../useKeyboardShortcuts';
+import { useOpenDirectories } from '../useOpenDirectories';
+import { usePrettier } from '../usePrettier';
+import { useRunCode } from '../useRunCode';
+import { useRuntimeError } from '../useRuntimeError';
+import { useURLSync } from '../useURLSync';
 import {
-  ItemId,
-  LeafPane,
-  Pane,
-  PaneId,
-  PresenceIndicator,
-  SearchFileVisibility,
-  SearchResults,
-  ShareDBDoc,
-  SubmitOperation,
-  TabState,
-  Username,
-} from '../types';
-import { VizFiles, VizContent } from '@vizhub/viz-types';
-import {
-  ThemeLabel,
-  defaultTheme,
-  useDynamicTheme,
-} from './themes';
-import { useActions } from './useActions';
-import {
-  EditorCache,
-  useEditorCache,
-} from './useEditorCache';
-import { useFileCRUD } from './useFileCRUD';
-import { useKeyboardShortcuts } from './useKeyboardShortcuts';
-import { useOpenDirectories } from './useOpenDirectories';
-import { usePrettier } from './usePrettier';
-import { useRunCode } from './useRunCode';
-import { useRuntimeError } from './useRuntimeError';
-import { useURLSync } from './useURLSync';
-import { createInitialState, vzReducer } from './vzReducer';
-import { findPane } from './vzReducer/findPane';
-import { usePresenceAutoFollow } from './usePresenceAutoFollow';
+  createInitialState,
+  vzReducer,
+} from '../vzReducer';
+import { findPane } from '../vzReducer/findPane';
+import { usePresenceAutoFollow } from '../usePresenceAutoFollow';
 import { v4 as uuidv4 } from 'uuid';
+import {
+  VZCodeContextValue,
+  VZCodeProviderProps,
+} from './types';
 
-// This context centralizes all the "smart" logic
-// to do with the application state. This includes
-//  * Accessing and manipulating ShareDB data
-//  * Centralized application state
-export const VZCodeContext =
-  createContext<VZCodeContextValue>(null);
-
-// The type of the object provided by this context.
-export type VZCodeContextValue = {
-  content: VizContent | null;
-  shareDBDoc: ShareDBDoc<VizContent> | null;
-  submitOperation: (
-    next: (content: VizContent) => VizContent,
-  ) => void;
-  // TODO pull in this type from ShareDB if possible
-  localPresence: any;
-  // TODO pull in this type from ShareDB if possible
-  docPresence: any;
-
-  files: VizFiles | null;
-  createFile: (fileName: string, text?: string) => void;
-  renameFile: (fileId: string, fileName: string) => void;
-  deleteFile: (fileId: string) => void;
-  createDirectory: (
-    fileName: string,
-    text?: string,
-  ) => void;
-  renameDirectory: (
-    directoryId: string,
-    directoryOldName: string,
-    directoryName: string,
-  ) => void;
-  deleteDirectory: (directoryId: string) => void;
-
-  setActiveFileId: (fileId: string | null) => void;
-  setActiveFileLeft: () => void;
-  setActiveFileRight: () => void;
-
-  activePaneId: PaneId;
-  pane: Pane;
-  activePane: LeafPane;
-
-  openTab: (tabState: TabState) => void;
-  closeTabs: (fileIds: string[]) => void;
-
-  isSettingsOpen: boolean;
-  setIsSettingsOpen: (isSettingsOpen: boolean) => void;
-  closeSettings: () => void;
-
-  isDocOpen: boolean;
-  setIsDocOpen: (isDocOpen: boolean) => void;
-  closeDoc: () => void;
-
-  theme: ThemeLabel;
-  setTheme: (theme: ThemeLabel) => void;
-
-  username: Username;
-  setUsername: (username: Username) => void;
-
-  isDirectoryOpen: (path: string) => boolean;
-  toggleDirectory: (path: string) => void;
-
-  editorCache: EditorCache;
-
-  // Whether the editor should be focused.
-  editorWantsFocus: boolean;
-  // Signals that the editor no longer wants focus.
-  editorNoLongerWantsFocus: () => void;
-
-  errorMessage: string | null;
-
-  // Runtime error handling
-  handleRuntimeError: (
-    formattedErrorMessage: string,
-  ) => void;
-  clearRuntimeError: () => void;
-
-  search: SearchResults;
-  isSearchOpen: boolean;
-  setIsSearchOpen: (isSearchOpen: boolean) => void;
-  setSearch: (pattern: string) => void;
-
-  isAIChatOpen: boolean;
-  setIsAIChatOpen: (isAIChatOpen: boolean) => void;
-  aiChatFocused: boolean;
-  toggleAIChatFocused: () => void;
-  aiChatMode: 'ask' | 'edit';
-  setAIChatMode: (mode: 'ask' | 'edit') => void;
-  aiChatEndpoint?: string;
-  aiChatUndoEndpoint?: string;
-  aiChatOptions?: { [key: string]: any };
-  setSearchResults: (files: ShareDBDoc<VizContent>) => void;
-  setSearchFileVisibility: (
-    files: ShareDBDoc<VizContent>,
-    id: string,
-    visibility: SearchFileVisibility,
-  ) => void;
-  setSearchLineVisibility: (
-    files: ShareDBDoc<VizContent>,
-    id: string,
-    line: number,
-  ) => void;
-  setSearchFocusedIndex: (
-    focusedIndex: number,
-    childIndex: number,
-  ) => void;
-  toggleSearchFocused: () => void;
-
-  isCreateFileModalOpen: boolean;
-  handleOpenCreateFileModal: () => void;
-  handleCloseCreateFileModal: () => void;
-  handleCreateFileClick: (newFileName: string) => void;
-
-  isCreateDirModalOpen: boolean;
-  handleOpenCreateDirModal: () => void;
-  handleCloseCreateDirModal: () => void;
-  handleCreateDirClick: (newFileName: string) => void;
-
-  runPrettierRef: React.MutableRefObject<
-    null | (() => void)
-  >;
-  runCodeRef: React.MutableRefObject<
-    null | ((hardRerun?: boolean) => void)
-  >;
-
-  sidebarRef: React.RefObject<HTMLDivElement>;
-
-  codeEditorRef: React.RefObject<HTMLDivElement>;
-
-  connected: boolean;
-  pending: boolean;
-
-  hoveredItemId: ItemId | null;
-  setHoveredItemId: (itemId: ItemId | null) => void;
-
-  enableAutoFollow: boolean;
-  toggleAutoFollow: () => void;
-
-  updatePresenceIndicator: (
-    presenceIndicator: PresenceIndicator,
-  ) => void;
-
-  sidebarPresenceIndicators: Array<PresenceIndicator>;
-  splitCurrentPane: () => void;
-
-  liveKitToken: string;
-  setLiveKitToken: (state: string) => void;
-  liveKitRoomName: string;
-  setLiveKitRoom: (state: string) => void;
-  liveKitConnection: boolean;
-  setLiveKitConnection: (state: boolean) => void;
-  voiceChatModalOpen: boolean;
-  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?: (
-    prompt: string,
-    modelName: string,
-    commitId?: string,
-  ) => Promise<void>;
-  clearStoredAIPrompt?: () => void;
-  getStoredAIPrompt?: () => {
-    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 = ({
+export const useVZCodeState = ({
   content,
   shareDBDoc,
   submitOperation,
@@ -232,7 +35,6 @@ export const VZCodeProvider = ({
   docPresence,
   prettierWorker,
   initialUsername,
-  children,
   codeError = null,
   connected,
   pending,
@@ -249,44 +51,11 @@ export const VZCodeProvider = ({
   clearStoredAIPrompt,
   getStoredAIPrompt,
   additionalWidgets,
-}: {
-  content: VizContent;
-  shareDBDoc: ShareDBDoc<VizContent>;
-  submitOperation: SubmitOperation;
-  localPresence: any;
-  docPresence: any;
-  prettierWorker: Worker;
-  initialUsername: Username;
-  children: React.ReactNode;
-  codeError?: string | null;
-  connected?: boolean;
-  pending?: boolean;
-  liveKitToken?: string | undefined;
-  setLiveKitToken?: (state: string) => void;
-  liveKitRoomName?: string | undefined;
-  setLiveKitRoom?: (state: string) => void;
-  liveKitConnection?: boolean;
-  setLiveKitConnection?: (state: boolean) => void;
-  aiChatEndpoint?: string;
-  aiChatUndoEndpoint?: string;
-  aiChatOptions?: { [key: string]: any };
-  autoForkAndRetryAI?: (
-    prompt: string,
-    modelName: string,
-    commitId?: string,
-  ) => Promise<void>;
-  clearStoredAIPrompt?: () => void;
-  getStoredAIPrompt?: () => {
-    prompt: string;
-    modelName: string;
-  } | null;
-  additionalWidgets?: React.ComponentType<{
-    messageId: string;
-    chatId: string;
-    canUndo: boolean;
-  }>;
-}) => {
-  // Auto-run Pretter after local changes.
+}: Omit<
+  VZCodeProviderProps,
+  'children'
+>): VZCodeContextValue => {
+  // Auto-run Prettier after local changes.
   const { prettierError, runPrettierRef } = usePrettier({
     shareDBDoc,
     submitOperation,
@@ -329,8 +98,6 @@ export const VZCodeProvider = ({
   );
 
   // Unpack state.
-  // print the state object to see what it contains
-  // console.log('state: ', state);
   const {
     pane,
     activePaneId,
@@ -348,7 +115,7 @@ export const VZCodeProvider = ({
     aiChatMode,
   } = state;
 
-  const activePane: Pane = findPane(pane, activePaneId);
+  const activePane = findPane(pane, activePaneId);
   if (activePane.type !== 'leafPane') {
     // Should never happen
     throw new Error('Expected leafPane');
@@ -393,12 +160,11 @@ export const VZCodeProvider = ({
   });
 
   // The set of open directories.
-  // TODO move this into reducer/useActions
   const { isDirectoryOpen, toggleDirectory } =
     useOpenDirectories({ activePane, content });
 
   // Cache of CodeMirror editors by file id.
-  const editorCache: EditorCache = useEditorCache();
+  const editorCache = useEditorCache();
 
   // Handle dynamic theme changes.
   useDynamicTheme(editorCache, theme);
@@ -460,13 +226,10 @@ export const VZCodeProvider = ({
   );
 
   // Isolate the files object from the document.
-  const files: VizFiles | null = content
-    ? content.files
-    : null;
+  const files = content ? content.files : null;
 
   useKeyboardShortcuts({
     closeTabs,
-    // TODO verify that this makes sense
     activeFileId: activePane.activeFileId,
     activePaneId,
     handleOpenCreateFileModal,
@@ -481,12 +244,9 @@ export const VZCodeProvider = ({
   });
 
   // Track the currently hovered file id.
-  const [hoveredItemId, setHoveredItemId] =
-    useState<ItemId | null>(null);
+  const [hoveredItemId, setHoveredItemId] = useState(null);
 
   // Handle presence-based auto-following
-  // This hook manages opening tabs when presence is received on files
-  // that are not currently open, independent of CodeMirror extensions
   usePresenceAutoFollow({
     docPresence,
     enableAutoFollow,
@@ -495,7 +255,6 @@ export const VZCodeProvider = ({
   });
 
   // Livekit Voice Chat Modal
-
   const [voiceChatModalOpen, setVoiceChatModalOpen] =
     useState(false);
 
@@ -510,7 +269,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:',
@@ -535,7 +297,6 @@ export const VZCodeProvider = ({
       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',
@@ -544,10 +305,10 @@ export const VZCodeProvider = ({
           },
           body: JSON.stringify({
             ...aiChatOptions,
-            vizId: aiChatOptions.vizId,
             content: messageContent.trim(),
             chatId: currentChatId,
             mode: aiChatMode,
+            ...options,
           }),
         });
 
@@ -569,7 +330,7 @@ export const VZCodeProvider = ({
 
           // Check if this is the specific permission error that should trigger auto-fork
           if (
-            aiErrorMessage ===
+            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
@@ -590,7 +351,7 @@ export const VZCodeProvider = ({
           }
 
           // For other errors, show the error message
-          setAIErrorMessage(aiErrorMessage);
+          setAIErrorMessage(errorMessage);
           return;
         }
 
@@ -615,8 +376,8 @@ export const VZCodeProvider = ({
     ],
   );
 
-  // The value provided by this context.
-  const value: VZCodeContextValue = {
+  // Return the context value
+  return {
     content,
     shareDBDoc,
     submitOperation,
@@ -740,10 +501,4 @@ export const VZCodeProvider = ({
     // Additional widgets that can be rendered in AI chat messages
     additionalWidgets,
   };
-
-  return (
-    <VZCodeContext.Provider value={value}>
-      {children}
-    </VZCodeContext.Provider>
-  );
 };

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

@@ -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

@@ -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

@@ -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

@@ -1,40 +1,27 @@
-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;
+const showSuggestedRequests = false;
 
 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

@@ -17,6 +17,8 @@
   overflow-y: auto;
   padding: 10px;
   padding-bottom: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .ai-chat-input-fixed {
@@ -182,6 +184,7 @@
   .undo-button-container {
     display: flex;
     justify-content: flex-end;
+    gap: 8px;
     margin-top: 16px;
   }
 
@@ -560,6 +563,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 {