vzcode 1.59.0 → 1.61.0

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

@@ -1,237 +1,34 @@
 import {
-  Context,
-  createContext,
   useCallback,
+  useMemo,
   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,
-    options?: Record<string, 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;
-    handleSendMessage?: (
-      messageToSend?: string,
-      options?: Record<string, string>,
-    ) => void;
-  }>;
-};
-
-export const VZCodeProvider = ({
+export const useVZCodeState = ({
   content,
   shareDBDoc,
   submitOperation,
@@ -239,7 +36,6 @@ export const VZCodeProvider = ({
   docPresence,
   prettierWorker,
   initialUsername,
-  children,
   codeError = null,
   connected,
   pending,
@@ -256,44 +52,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,
@@ -313,6 +76,8 @@ export const VZCodeProvider = ({
 
   const codeEditorRef = useRef(null);
 
+  const iframeRef = useRef(null);
+
   // The error message shows errors in order of priority:
   // * `runtimeError` - errors from runtime execution, highest priority
   // * `prettierError` - errors from Prettier, client-side only
@@ -336,14 +101,13 @@ export const VZCodeProvider = ({
   );
 
   // Unpack state.
-  // print the state object to see what it contains
-  // console.log('state: ', state);
   const {
     pane,
     activePaneId,
     theme,
     search,
     isSearchOpen,
+    isVisualEditorOpen,
     isAIChatOpen,
     aiChatFocused,
     isSettingsOpen,
@@ -355,7 +119,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');
@@ -376,6 +140,7 @@ export const VZCodeProvider = ({
     setSearchLineVisibility,
     setSearchFocusedIndex,
     toggleSearchFocused,
+    setIsVisualEditorOpen,
     setIsAIChatOpen,
     toggleAIChatFocused,
     setAIChatMode,
@@ -400,12 +165,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);
@@ -467,13 +231,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,
@@ -488,12 +249,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,
@@ -502,7 +260,6 @@ export const VZCodeProvider = ({
   });
 
   // Livekit Voice Chat Modal
-
   const [voiceChatModalOpen, setVoiceChatModalOpen] =
     useState(false);
 
@@ -510,12 +267,72 @@ export const VZCodeProvider = ({
 
   const DEBUG = false;
 
-  const [isLoading, setIsLoading] = useState(false);
+  // Compute isLoading based on the current chat's aiStatus
   const [currentChatId] = useState(() => uuidv4());
+  const currentChat = content?.chats?.[currentChatId];
+  const isLoading = currentChat?.aiStatus === 'generating';
+
+  // Message history for up/down arrow navigation - using ShareDB document data
+  const messageHistory = useMemo(() => {
+    if (!currentChat?.messages) return [];
+    // Extract user messages in chronological order for history navigation
+    return currentChat.messages
+      .filter((msg) => msg.role === 'user')
+      .map((msg) => msg.content);
+  }, [currentChat?.messages]);
+
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  const [currentDraft, setCurrentDraft] = useState('');
+
   const [aiErrorMessage, setAIErrorMessage] = useState<
     string | null
   >(null);
 
+  // Message history navigation functions
+  const navigateMessageHistoryUp = useCallback(() => {
+    if (messageHistory.length === 0) return;
+
+    // If we're not navigating history, save current draft
+    if (historyIndex === -1) {
+      setCurrentDraft(aiChatMessage);
+    }
+
+    const newIndex =
+      historyIndex < messageHistory.length - 1
+        ? historyIndex + 1
+        : historyIndex;
+    setHistoryIndex(newIndex);
+    setAIChatMessage(
+      messageHistory[messageHistory.length - 1 - newIndex],
+    );
+  }, [messageHistory, historyIndex, aiChatMessage]);
+
+  const navigateMessageHistoryDown = useCallback(() => {
+    if (historyIndex === -1) return;
+
+    const newIndex = historyIndex - 1;
+    if (newIndex === -1) {
+      // Return to draft
+      setHistoryIndex(-1);
+      setAIChatMessage(currentDraft);
+      setCurrentDraft('');
+    } else {
+      setHistoryIndex(newIndex);
+      setAIChatMessage(
+        messageHistory[
+          messageHistory.length - 1 - newIndex
+        ],
+      );
+    }
+  }, [messageHistory, historyIndex, currentDraft]);
+
+  const resetMessageHistoryNavigation = useCallback(() => {
+    if (historyIndex !== -1) {
+      setHistoryIndex(-1);
+      setCurrentDraft('');
+    }
+  }, [historyIndex]);
+
   const handleSendMessage = useCallback(
     async (
       messageToSend?: string,
@@ -541,11 +358,14 @@ export const VZCodeProvider = ({
 
       const currentPrompt = aiChatMessage.trim();
       setAIChatMessage('');
-      setIsLoading(true);
+
+      // Reset history navigation when sending a message
+      setHistoryIndex(-1);
+      setCurrentDraft('');
+
       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',
@@ -579,7 +399,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
@@ -600,18 +420,17 @@ export const VZCodeProvider = ({
           }
 
           // For other errors, show the error message
-          setAIErrorMessage(aiErrorMessage);
+          setAIErrorMessage(errorMessage);
           return;
         }
 
         // The backend handles all ShareDB operations for successful responses
+        // The loading state is now managed via ShareDB aiStatus
       } catch (error) {
         console.error('Error getting AI response:', error);
         setAIErrorMessage(
           'Failed to send message. Please try again.',
         );
-      } finally {
-        setIsLoading(false);
       }
     },
     [
@@ -625,8 +444,8 @@ export const VZCodeProvider = ({
     ],
   );
 
-  // The value provided by this context.
-  const value: VZCodeContextValue = {
+  // Return the context value
+  return {
     content,
     shareDBDoc,
     submitOperation,
@@ -664,6 +483,9 @@ export const VZCodeProvider = ({
     setSearchFocusedIndex,
     toggleSearchFocused,
 
+    isVisualEditorOpen,
+    setIsVisualEditorOpen,
+
     isAIChatOpen,
     setIsAIChatOpen,
     aiChatFocused,
@@ -712,6 +534,7 @@ export const VZCodeProvider = ({
     runCodeRef,
     sidebarRef,
     codeEditorRef,
+    iframeRef,
 
     connected,
     pending,
@@ -736,12 +559,16 @@ export const VZCodeProvider = ({
     aiChatMessage,
     setAIChatMessage,
     isLoading,
-    setIsLoading,
     currentChatId,
     aiErrorMessage,
     setAIErrorMessage,
     handleSendMessage,
 
+    // Message history navigation
+    navigateMessageHistoryUp,
+    navigateMessageHistoryDown,
+    resetMessageHistoryNavigation,
+
     // Auto-fork functions for VizHub integration
     autoForkAndRetryAI,
     clearStoredAIPrompt,
@@ -750,10 +577,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/VZRight.tsx

@@ -23,7 +23,6 @@ type ExtendedVizContent = VizContent & {
 const enableIframe = true;
 
 export const VZRight = () => {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
   const runtimeRef = useRef<VizHubRuntime | null>(null);
   const isFirstRunRef = useRef(true);
   const lastRunIdRef = useRef<string | undefined>(
@@ -31,8 +30,12 @@ export const VZRight = () => {
   );
 
   // Get access to the current files.
-  const { content, handleRuntimeError, clearRuntimeError } =
-    useContext(VZCodeContext);
+  const {
+    content,
+    handleRuntimeError,
+    clearRuntimeError,
+    iframeRef,
+  } = useContext(VZCodeContext);
 
   const files = useMemo(
     () =>

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

@@ -20,6 +20,9 @@ interface ChatInputProps {
   focused: boolean;
   aiChatMode: 'ask' | 'edit';
   setAIChatMode: (mode: 'ask' | 'edit') => void;
+  navigateMessageHistoryUp: () => void;
+  navigateMessageHistoryDown: () => void;
+  resetMessageHistoryNavigation: () => void;
 }
 
 const ChatInputComponent = ({
@@ -30,6 +33,9 @@ const ChatInputComponent = ({
   focused,
   aiChatMode,
   setAIChatMode,
+  navigateMessageHistoryUp,
+  navigateMessageHistoryDown,
+  resetMessageHistoryNavigation,
 }: ChatInputProps) => {
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
@@ -45,9 +51,44 @@ const ChatInputComponent = ({
       if (event.key === 'Enter' && !event.shiftKey) {
         event.preventDefault();
         onSendMessage();
+      } else if (event.key === 'ArrowUp') {
+        // Only navigate history if cursor is at the beginning of the first line
+        const textarea =
+          event.target as HTMLTextAreaElement;
+        const { selectionStart, value } = textarea;
+        const lines = value
+          .substring(0, selectionStart)
+          .split('\n');
+
+        // Check if we're at the beginning of the first line
+        if (lines.length === 1 && selectionStart === 0) {
+          event.preventDefault();
+          navigateMessageHistoryUp();
+        }
+      } else if (event.key === 'ArrowDown') {
+        // Only navigate history if cursor is at the end of the last line
+        const textarea =
+          event.target as HTMLTextAreaElement;
+        const { selectionStart, value } = textarea;
+        const remainingText =
+          value.substring(selectionStart);
+        const remainingLines = remainingText.split('\n');
+
+        // Check if we're at the end of the last line
+        if (
+          remainingLines.length === 1 &&
+          remainingLines[0] === ''
+        ) {
+          event.preventDefault();
+          navigateMessageHistoryDown();
+        }
       }
     },
-    [onSendMessage],
+    [
+      onSendMessage,
+      navigateMessageHistoryUp,
+      navigateMessageHistoryDown,
+    ],
   );
 
   const handleSendClick = useCallback(() => {
@@ -57,8 +98,10 @@ const ChatInputComponent = ({
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLTextAreaElement>) => {
       setAIChatMessage(event.target.value);
+      // Reset history navigation when user starts typing
+      resetMessageHistoryNavigation();
     },
-    [setAIChatMessage],
+    [setAIChatMessage, resetMessageHistoryNavigation],
   );
 
   return (

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

@@ -15,11 +15,13 @@ const MessageListComponent = ({
   isLoading,
   chatId, // Add chatId prop
   aiScratchpad, // Add aiScratchpad prop
+  aiStatus, // Add aiStatus prop
 }: {
   messages: VizChatMessage[];
   isLoading: boolean;
   chatId?: string; // Add chatId to the type
   aiScratchpad?: string; // Add aiScratchpad to the type
+  aiStatus?: string; // Add aiStatus to the type
 }) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const messagesContainerRef = useRef<HTMLDivElement>(null);