vzcode 2.15.0 → 2.17.0

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

@@ -0,0 +1,64 @@
+import React, { useCallback } from 'react';
+
+/**
+ * Props for the JumpToLatestButton component
+ */
+interface JumpToLatestButtonProps {
+  /** Whether the button is visible */
+  visible: boolean;
+  /** Callback when button is clicked */
+  onClick: () => void;
+  /** Additional CSS class name */
+  className?: string;
+}
+
+/**
+ * Circular "down arrow" button that floats at the bottom center of scroll area
+ * Appears when auto-scroll is disabled and user is not at bottom
+ */
+export const JumpToLatestButton: React.FC<
+  JumpToLatestButtonProps
+> = ({ visible, onClick, className = '' }) => {
+  /**
+   * Handle button click
+   */
+  const handleClick = useCallback(() => {
+    onClick();
+  }, [onClick]);
+
+  /**
+   * Handle keyboard events for accessibility
+   */
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        onClick();
+      }
+    },
+    [onClick],
+  );
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <button
+      className={`jump-to-latest-button ${className}`.trim()}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      aria-label="Jump to latest"
+      tabIndex={0}
+      type="button"
+    >
+      {/* Down arrow icon using Unicode or can be replaced with SVG */}
+      <span
+        className="jump-to-latest-icon"
+        aria-hidden="true"
+      >
+        ▼
+      </span>
+    </button>
+  );
+};

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

@@ -1,77 +1,145 @@
+import React, {
+  useMemo,
+  useContext,
+  forwardRef,
+} from 'react';
 import { timestampToDate } from '@vizhub/viz-utils';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import React, { useMemo, memo, useContext } from 'react';
-import { DiffView } from './DiffView';
+import { StreamingEvent } from '../../../types.js';
+import { IndividualFileDiff } from './IndividualFileDiff';
+import { VZCodeContext } from '../../VZCodeContext';
+import { DiffView, DiffViewRef } from './DiffView';
 import { UnifiedFilesDiff } from '../../../utils/fileDiff';
 import { enableDiffView } from '../../featureFlags';
-import { VZCodeContext } from '../../VZCodeContext';
+
+const DEBUG = false;
 
 interface MessageProps {
   id: string;
   role: 'user' | 'assistant';
-  content: string;
+  content?: string; // For non-streaming messages
   timestamp: number;
-  isStreaming?: boolean;
-  diffData?: UnifiedFilesDiff;
+  events?: StreamingEvent[]; // For streaming messages
+  isActive?: boolean; // Is this the currently streaming message?
   chatId?: string;
   showAdditionalWidgets?: boolean;
+  isStreaming?: boolean;
+  diffData?: UnifiedFilesDiff;
 }
 
-const MessageComponent = ({
-  id,
-  role,
-  content,
-  timestamp,
-  isStreaming,
-  diffData,
-  chatId,
-  showAdditionalWidgets = false,
-}: MessageProps) => {
-  const { additionalWidgets, handleSendMessage } =
-    useContext(VZCodeContext);
+export const Message = forwardRef<
+  DiffViewRef,
+  React.PropsWithChildren<MessageProps>
+>(
+  (
+    {
+      id,
+      role,
+      content,
+      timestamp,
+      events = [],
+      isActive,
+      children,
+      chatId,
+      showAdditionalWidgets = false,
+      isStreaming = false,
+      diffData,
+    },
+    ref,
+  ) => {
+    const { additionalWidgets, handleSendMessage } =
+      useContext(VZCodeContext);
 
-  // Memoize date formatting to avoid repeated computation
-  const formattedTime = useMemo(() => {
-    return timestampToDate(timestamp).toLocaleTimeString(
-      [],
-      {
-        hour: '2-digit',
-        minute: '2-digit',
-      },
-    );
-  }, [timestamp]);
+    DEBUG &&
+      console.log(
+        'StreamingMessage: Rendered with events:',
+        events,
+      );
+
+    // Memoize date formatting to avoid repeated computation
+    const formattedTime = useMemo(() => {
+      return timestampToDate(timestamp).toLocaleTimeString(
+        [],
+        {
+          hour: '2-digit',
+          minute: '2-digit',
+        },
+      );
+    }, [timestamp]);
 
-  // Memoize the className string to avoid recreation
-  const messageClassName = useMemo(() => {
-    return `ai-chat-message ${role}${isStreaming ? ' streaming' : ''}`;
-  }, [role, isStreaming]);
+    // Memoize the className string to avoid recreation
+    const messageClassName = useMemo(() => {
+      return `ai-chat-message ${role}${isStreaming ? ' streaming' : ''}`;
+    }, [role, isStreaming]);
 
-  return (
-    <div className={messageClassName}>
-      <div className="ai-chat-message-content">
-        <Markdown remarkPlugins={[remarkGfm]}>
-          {content}
-        </Markdown>
-        {enableDiffView &&
-          diffData &&
-          Object.keys(diffData).length > 0 && (
-            <DiffView diffData={diffData} />
+    return (
+      <div className={messageClassName}>
+        <div className="ai-chat-message-content">
+          {/* Render regular content for non-streaming messages */}
+          {content && (
+            <Markdown remarkPlugins={[remarkGfm]}>
+              {content}
+            </Markdown>
           )}
-        {showAdditionalWidgets &&
-          additionalWidgets &&
-          chatId &&
-          additionalWidgets({
-            messageId: id,
-            chatId: chatId,
-            handleSendMessage,
+
+          {/* Render diff view if present */}
+          {enableDiffView &&
+            diffData &&
+            Object.keys(diffData).length > 0 && (
+              <DiffView diffData={diffData} ref={ref} />
+            )}
+
+          {/* Render events in order for streaming messages */}
+          {events.map((event, index) => {
+            switch (event.type) {
+              case 'text_chunk':
+                return (
+                  <div
+                    key={`text-${index}`}
+                    className="text-chunk"
+                  >
+                    <Markdown remarkPlugins={[remarkGfm]}>
+                      {event.content}
+                    </Markdown>
+                  </div>
+                );
+              case 'file_complete':
+                return (
+                  <IndividualFileDiff
+                    key={`file-${event.fileName}-${index}`}
+                    fileName={event.fileName}
+                    beforeContent={
+                      event.beforeContent || ''
+                    }
+                    afterContent={event.afterContent || ''}
+                  />
+                );
+              case 'file_start':
+                // File start events are now handled by centralized status logic in MessageList
+                return null;
+              default:
+                return null;
+            }
           })}
+          {/* Additional widgets are now shown within the "Done" status indicator */}
+          {showAdditionalWidgets &&
+            additionalWidgets &&
+            chatId &&
+            !isStreaming && // Only show here for non-streaming messages (completed messages)
+            additionalWidgets({
+              messageId: id,
+              chatId: chatId,
+              handleSendMessage,
+            })}
+          {isActive && children}
+        </div>
+        <div className="ai-chat-message-time">
+          {formattedTime}
+        </div>
       </div>
-      <div className="ai-chat-message-time">
-        {formattedTime}
-      </div>
-    </div>
-  );
-};
+    );
+  },
+);
 
-export const Message = memo(MessageComponent);
+Message.displayName = 'Message';

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

@@ -1,141 +1,84 @@
 import {
   useRef,
   useEffect,
-  useCallback,
   memo,
   useState,
+  useContext,
 } from 'react';
 import { Message } from './Message';
 import { TypingIndicator } from './TypingIndicator';
 import { ThinkingScratchpad } from './ThinkingScratchpad';
+import { AIEditingStatusIndicator } from './FileEditingIndicator';
 import { VizChatMessage } from '@vizhub/viz-types';
+import { ExtendedVizChatMessage } from '../../../types.js';
+import { DiffViewRef } from './DiffView.js';
+import { VZCodeContext } from '../../VZCodeContext';
 
 const MessageListComponent = ({
   messages,
   isLoading,
   chatId, // Add chatId prop
   aiScratchpad, // Add aiScratchpad prop
+  currentStatus, // Add current status prop
+  onNewEvent,
+  onJumpToLatest,
+  beforeRender,
+  afterRender,
 }: {
   messages: VizChatMessage[];
   isLoading: boolean;
   chatId?: string; // Add chatId to the type
   aiScratchpad?: string; // Add aiScratchpad to the type
+  currentStatus?: string; // Add current status to the type
+  onNewEvent: (targetElement?: HTMLElement) => void;
+  onJumpToLatest: (targetElement?: HTMLElement) => void;
+  beforeRender: () => number;
+  afterRender: (prevScrollHeight: number) => void;
 }) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
-  const messagesContainerRef = 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 = messagesContainerRef.current;
-    if (!container) return true;
-
-    const threshold = 50; // Allow 50px tolerance for "at bottom"
-    const { scrollTop, scrollHeight, clientHeight } =
-      container;
-    return (
-      scrollHeight - scrollTop - clientHeight < threshold
-    );
-  }, []);
-
-  // Smooth scroll to bottom with linear transition
-  const scrollToBottom = useCallback(() => {
-    if (!autoScrollEnabled) return;
-
-    messagesEndRef.current?.scrollIntoView({
-      behavior: 'smooth',
-      block: 'end',
-    });
-  }, [autoScrollEnabled]);
-
-  // Handle scroll events to detect user manual scrolling
-  const handleScroll = useCallback(() => {
-    const container = messagesContainerRef.current;
-    if (!container) return;
-
-    const isAtBottom = isScrolledToBottom();
-
-    // Clear any existing timeout
-    if (scrollTimeoutRef.current) {
-      clearTimeout(scrollTimeoutRef.current);
-    }
+  const diffViewRef = useRef<DiffViewRef>(null);
 
-    // If user scrolled up from bottom, disable auto-scroll
-    if (!isAtBottom && !isUserScrolled) {
-      setIsUserScrolled(true);
-      setAutoScrollEnabled(false);
-    }
+  // Get additional widgets from context
+  const { additionalWidgets, handleSendMessage } =
+    useContext(VZCodeContext);
 
-    // If user scrolled back to bottom, re-enable auto-scroll after a brief delay
-    if (isAtBottom && isUserScrolled) {
-      scrollTimeoutRef.current = setTimeout(() => {
-        setIsUserScrolled(false);
-        setAutoScrollEnabled(true);
-      }, 500); // 500ms delay to prevent flickering
-    }
-  }, [isUserScrolled, isScrolledToBottom]);
+  // Track previous loading state to detect when AI generation completes
+  const [prevIsLoading, setPrevIsLoading] =
+    useState(isLoading);
 
-  // Auto-scroll when messages change, but only if auto-scroll is enabled
+  // Auto-scroll when messages change
   useEffect(() => {
-    if (autoScrollEnabled && !isUserScrolled) {
-      // Use a short debounce to prevent multiple scroll calls during rapid updates
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-
-      scrollTimeoutRef.current = setTimeout(() => {
-        scrollToBottom();
-      }, 100); // 100ms debounce
+    // Get scroll height before render for anchoring
+    const prevScrollHeight = beforeRender();
+
+    // Determine if we should scroll to a specific diff or to the bottom
+    const lastMessageHasDiff =
+      messages.length > 0 &&
+      (messages[messages.length - 1] as any).diffData;
+
+    let targetElement: HTMLElement | null = null;
+    if (lastMessageHasDiff && diffViewRef.current) {
+      targetElement =
+        diffViewRef.current.getFirstHunkElement();
     }
 
-    return () => {
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-    };
-  }, [
-    messages,
-    autoScrollEnabled,
-    isUserScrolled,
-    scrollToBottom,
-  ]);
+    // Trigger auto-scroll if enabled
+    onNewEvent(targetElement);
 
-  // Track previous loading state to detect when AI generation completes
-  const [prevIsLoading, setPrevIsLoading] =
-    useState(isLoading);
+    // Adjust scroll position after render for anchoring
+    afterRender(prevScrollHeight);
+  }, [messages, onNewEvent, beforeRender, afterRender]);
 
   // Scroll to bottom when AI generation completes (loading changes from true to false)
   useEffect(() => {
-    // If AI was generating and now it's finished, scroll to bottom
+    // If AI was generating and now it's finished, force scroll to bottom
     if (prevIsLoading && !isLoading) {
-      // Force scroll to bottom regardless of user scroll state
-      // This ensures we always scroll to bottom when generation completes
-      messagesEndRef.current?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end',
-      });
-
-      // Re-enable auto-scroll for future messages
-      setIsUserScrolled(false);
-      setAutoScrollEnabled(true);
+      // Force jump to latest regardless of current auto-scroll state
+      onJumpToLatest();
     }
 
     setPrevIsLoading(isLoading);
-  }, [isLoading, prevIsLoading]);
-
-  // Clean up timeout on unmount
-  useEffect(() => {
-    return () => {
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-    };
-  }, []);
+  }, [isLoading, prevIsLoading, onJumpToLatest]);
 
   // Check if AI generation has started (last message is from assistant)
   const lastMessage = messages[messages.length - 1];
@@ -152,6 +95,56 @@ const MessageListComponent = ({
     aiScratchpad && aiScratchpad.trim(),
   );
 
+  // Determine the single, most relevant status to display with priority:
+  // 1. Active file editing status from streaming events
+  // 2. General AI status from currentStatus
+  const getConsolidatedStatus = () => {
+    // Check if there's an active streaming message with file editing
+    if (lastMessage && lastMessage.role === 'assistant') {
+      const extendedMsg =
+        lastMessage as ExtendedVizChatMessage;
+      if (
+        extendedMsg.streamingEvents &&
+        extendedMsg.streamingEvents.length > 0
+      ) {
+        // Look for active file editing (file_start without corresponding file_complete)
+        const fileStates = new Map<string, boolean>();
+
+        extendedMsg.streamingEvents.forEach((event) => {
+          if (event.type === 'file_start') {
+            fileStates.set(event.fileName, false); // Mark as editing
+          } else if (event.type === 'file_complete') {
+            fileStates.set(event.fileName, true); // Mark as complete
+          }
+        });
+
+        // Find the first file that's still being edited
+        for (const [fileName, isComplete] of fileStates) {
+          if (!isComplete) {
+            return {
+              status: `Editing ${fileName}...`,
+              fileName,
+            };
+          }
+        }
+      }
+    }
+
+    // Fall back to general AI status if no active file editing
+    if (currentStatus) {
+      return { status: currentStatus };
+    }
+
+    return null;
+  };
+
+  const consolidatedStatus = getConsolidatedStatus();
+
+  // Show consolidated status indicator when there's a status to display
+  const showConsolidatedStatusIndicator = Boolean(
+    consolidatedStatus,
+  );
+
   // Find the most recent assistant message index
   const lastAssistantMessageIndex = messages
     .map((m, i) => (m.role === 'assistant' ? i : -1))
@@ -161,37 +154,85 @@ const MessageListComponent = ({
   return (
     <div
       className="ai-chat-messages"
-      ref={messagesContainerRef}
-      onScroll={handleScroll}
+      role="log"
+      aria-live="polite"
+      aria-relevant="additions"
     >
       {messages.map((msg, index) => {
+        const isLastMessage = index === messages.length - 1;
+        // Cast to extended message to check for streaming events
+        const extendedMsg = msg as ExtendedVizChatMessage;
+
+        // Check if this is a streaming message
+        const isStreamingMessage =
+          !!extendedMsg.isProgressive;
+
         // Only show additionalWidgets for the most recent assistant message
         const showAdditionalWidgets =
           msg.role === 'assistant' &&
           index === lastAssistantMessageIndex;
 
+        // Use Message for all messages now
         return (
           <Message
             key={msg.id}
             id={msg.id}
             role={msg.role}
-            content={msg.content}
+            content={
+              isStreamingMessage ? undefined : msg.content
+            }
             timestamp={msg.timestamp}
-            diffData={(msg as any).diffData}
+            events={
+              isStreamingMessage
+                ? extendedMsg.streamingEvents || []
+                : []
+            }
+            isActive={index === lastAssistantMessageIndex}
             chatId={chatId}
             showAdditionalWidgets={showAdditionalWidgets}
-          />
+            isStreaming={isStreamingMessage}
+            diffData={(msg as any).diffData}
+            ref={
+              isLastMessage && (msg as any).diffData
+                ? diffViewRef
+                : null
+            }
+          >
+            {isStreamingMessage &&
+              showThinkingScratchpad && (
+                <ThinkingScratchpad
+                  content={aiScratchpad || ''}
+                  isVisible={showThinkingScratchpad}
+                />
+              )}
+
+            {isStreamingMessage &&
+              showConsolidatedStatusIndicator && (
+                <AIEditingStatusIndicator
+                  status={consolidatedStatus?.status || ''}
+                  fileName={consolidatedStatus?.fileName}
+                  additionalWidgets={
+                    consolidatedStatus?.status === 'Done' &&
+                    showAdditionalWidgets &&
+                    additionalWidgets &&
+                    chatId
+                      ? additionalWidgets({
+                          messageId: msg.id,
+                          chatId: chatId,
+                          handleSendMessage,
+                        })
+                      : undefined
+                  }
+                />
+              )}
+
+            {isStreamingMessage && showTypingIndicator && (
+              <TypingIndicator />
+            )}
+          </Message>
         );
       })}
 
-      {showThinkingScratchpad && (
-        <ThinkingScratchpad
-          content={aiScratchpad || ''}
-          isVisible={showThinkingScratchpad}
-        />
-      )}
-
-      {showTypingIndicator && <TypingIndicator />}
       <div ref={messagesEndRef} />
     </div>
   );