vzcode 2.15.0 → 2.16.0

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

@@ -1,8 +1,13 @@
 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 React, {
+  useMemo,
+  memo,
+  useContext,
+  forwardRef,
+} from 'react';
+import { DiffView, DiffViewRef } from './DiffView';
 import { UnifiedFilesDiff } from '../../../utils/fileDiff';
 import { enableDiffView } from '../../featureFlags';
 import { VZCodeContext } from '../../VZCodeContext';
@@ -18,60 +23,70 @@ interface MessageProps {
   showAdditionalWidgets?: boolean;
 }
 
-const MessageComponent = ({
-  id,
-  role,
-  content,
-  timestamp,
-  isStreaming,
-  diffData,
-  chatId,
-  showAdditionalWidgets = false,
-}: MessageProps) => {
-  const { additionalWidgets, handleSendMessage } =
-    useContext(VZCodeContext);
+const MessageComponent = forwardRef<
+  DiffViewRef,
+  MessageProps
+>(
+  (
+    {
+      id,
+      role,
+      content,
+      timestamp,
+      isStreaming,
+      diffData,
+      chatId,
+      showAdditionalWidgets = false,
+    },
+    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]);
+    // 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} />
-          )}
-        {showAdditionalWidgets &&
-          additionalWidgets &&
-          chatId &&
-          additionalWidgets({
-            messageId: id,
-            chatId: chatId,
-            handleSendMessage,
-          })}
-      </div>
-      <div className="ai-chat-message-time">
-        {formattedTime}
+    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} ref={ref} />
+            )}
+          {showAdditionalWidgets &&
+            additionalWidgets &&
+            chatId &&
+            additionalWidgets({
+              messageId: id,
+              chatId: chatId,
+              handleSendMessage,
+            })}
+        </div>
+        <div className="ai-chat-message-time">
+          {formattedTime}
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  },
+);
+
+MessageComponent.displayName = 'MessageComponent';
 
 export const Message = memo(MessageComponent);

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

@@ -1,141 +1,74 @@
-import {
-  useRef,
-  useEffect,
-  useCallback,
-  memo,
-  useState,
-} from 'react';
+import { useRef, useEffect, memo, useState } from 'react';
 import { Message } from './Message';
+import { StreamingMessage } from './StreamingMessage';
 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';
 
 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);
-    }
-
-    // If user scrolled up from bottom, disable auto-scroll
-    if (!isAtBottom && !isUserScrolled) {
-      setIsUserScrolled(true);
-      setAutoScrollEnabled(false);
-    }
+  const diffViewRef = useRef<DiffViewRef>(null);
 
-    // 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 +85,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,15 +144,56 @@ 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 StreamingMessage for assistant messages with streaming events
+        if (
+          msg.role === 'assistant' &&
+          isStreamingMessage
+        ) {
+          return (
+            <StreamingMessage
+              key={msg.id}
+              timestamp={msg.timestamp}
+              events={extendedMsg.streamingEvents || []}
+              isActive={index === lastAssistantMessageIndex}
+            >
+              {showThinkingScratchpad && (
+                <ThinkingScratchpad
+                  content={aiScratchpad || ''}
+                  isVisible={showThinkingScratchpad}
+                />
+              )}
+
+              {showConsolidatedStatusIndicator && (
+                <AIEditingStatusIndicator
+                  status={consolidatedStatus?.status || ''}
+                  fileName={consolidatedStatus?.fileName}
+                />
+              )}
+
+              {showTypingIndicator && <TypingIndicator />}
+            </StreamingMessage>
+          );
+        }
+
+        // Use regular Message component for user messages and non-streaming assistant messages
         return (
           <Message
             key={msg.id}
@@ -180,18 +204,15 @@ const MessageListComponent = ({
             diffData={(msg as any).diffData}
             chatId={chatId}
             showAdditionalWidgets={showAdditionalWidgets}
+            ref={
+              isLastMessage && (msg as any).diffData
+                ? diffViewRef
+                : null
+            }
           />
         );
       })}
 
-      {showThinkingScratchpad && (
-        <ThinkingScratchpad
-          content={aiScratchpad || ''}
-          isVisible={showThinkingScratchpad}
-        />
-      )}
-
-      {showTypingIndicator && <TypingIndicator />}
       <div ref={messagesEndRef} />
     </div>
   );

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

@@ -1,35 +1,77 @@
+import React, { useMemo } from 'react';
+import { timestampToDate } from '@vizhub/viz-utils';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { memo } from 'react';
+import { StreamingEvent } from '../../../types.js';
+import { IndividualFileDiff } from './IndividualFileDiff';
+
+const DEBUG = false;
 
 interface StreamingMessageProps {
-  content: string;
-  status?: string;
+  timestamp: number;
+  events: StreamingEvent[];
+  isActive?: boolean; // Is this the currently streaming message?
+  children?: React.ReactNode;
 }
 
-const StreamingMessageComponent = ({
-  content,
-  status,
-}: StreamingMessageProps) => {
-  // Don't render if there's no content and no status
-  if (!content.trim()) {
-    return null;
-  }
+export const StreamingMessage: React.FC<
+  StreamingMessageProps
+> = ({ timestamp, events, isActive, children }) => {
+  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]);
 
   return (
     <div className="ai-chat-message assistant streaming">
-      {status && (
-        <div className="ai-chat-status">{status}</div>
-      )}
       <div className="ai-chat-message-content">
-        <Markdown remarkPlugins={[remarkGfm]}>
-          {content}
-        </Markdown>
+        {/* Render events in order */}
+        {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;
+          }
+        })}
+        {isActive && children}
+      </div>
+      <div className="ai-chat-message-time">
+        {formattedTime}
       </div>
     </div>
   );
 };
-
-export const StreamingMessage = memo(
-  StreamingMessageComponent,
-);