vzcode 2.18.0 → 2.22.0

package/src/llm-streaming-ui/components/FileEditingIndicator.tsx

@@ -0,0 +1,89 @@
+import { Spinner } from '../../client/AIAssist/Spinner';
+
+interface AIEditingStatusIndicatorProps {
+  status: string;
+  fileName?: string;
+  additionalWidgets?: React.ReactNode;
+}
+
+export const AIEditingStatusIndicator: React.FC<
+  AIEditingStatusIndicatorProps
+> = ({ status, fileName, additionalWidgets }) => {
+  const getStatusDisplay = (status: string) => {
+    switch (status) {
+      case 'Analyzing request...':
+        return (
+          <>
+            🔍 <span>Analyzing request...</span>
+          </>
+        );
+      case 'Formulating a plan...':
+        return (
+          <>
+            💭 <span>Formulating a plan...</span>
+          </>
+        );
+      case 'Describing changes...':
+        return (
+          <>
+            📝 <span>Describing changes...</span>
+          </>
+        );
+      case 'Thinking...':
+        return (
+          <>
+            🤔 <span>Thinking...</span>
+          </>
+        );
+      case 'Done':
+        return (
+          <div className="file-editing-done-container">
+            <div className="file-editing-done-status">
+              ✅ <span>Done</span>
+            </div>
+            {additionalWidgets && (
+              <div className="file-editing-done-widgets">
+                {additionalWidgets}
+              </div>
+            )}
+          </div>
+        );
+      default:
+        // Handle file editing status (e.g., "Editing filename.js...")
+        if (status.startsWith('Editing ') && fileName) {
+          return (
+            <>
+              ✏️{' '}
+              <span>
+                Editing <code>{fileName}</code>...
+              </span>
+            </>
+          );
+        } else if (status.startsWith('Editing ')) {
+          return (
+            <>
+              ✏️ <span>{status}</span>
+            </>
+          );
+        }
+        return <span>{status}</span>;
+    }
+  };
+
+  const showSpinner = status !== 'Done';
+
+  return (
+    <div className="file-editing-indicator">
+      <div className="file-editing-header">
+        {showSpinner && (
+          <div className="file-editing-icon">
+            <Spinner height={16} fadeIn={false} />
+          </div>
+        )}
+        <div className="file-editing-text">
+          {getStatusDisplay(status)}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/llm-streaming-ui/components/IndividualFileDiff.tsx

@@ -0,0 +1,86 @@
+import React, { useMemo } from 'react';
+import * as Diff2Html from 'diff2html';
+import 'diff2html/bundles/css/diff2html.min.css';
+import './DiffView.scss';
+import { generateFileUnifiedDiff } from '../../utils/fileDiff';
+
+interface IndividualFileDiffProps {
+  fileName: string;
+  beforeContent: string;
+  afterContent: string;
+}
+
+export const IndividualFileDiff: React.FC<
+  IndividualFileDiffProps
+> = ({ fileName, beforeContent, afterContent }) => {
+  // Generate unified diff for this single file
+  const unifiedDiff = useMemo(() => {
+    return generateFileUnifiedDiff(
+      'temp-id',
+      fileName,
+      beforeContent,
+      afterContent,
+    );
+  }, [fileName, beforeContent, afterContent]);
+
+  // Convert to HTML using diff2html
+  const diffHtml = useMemo(() => {
+    if (!unifiedDiff) return '';
+
+    return Diff2Html.html(unifiedDiff, {
+      drawFileList: false,
+      matching: 'words',
+      diffStyle: 'word',
+      outputFormat: 'line-by-line',
+    });
+  }, [unifiedDiff]);
+
+  // Calculate simple stats
+  const stats = useMemo(() => {
+    const lines = unifiedDiff.split('\n');
+    let additions = 0;
+    let deletions = 0;
+
+    lines.forEach((line) => {
+      if (line.startsWith('+') && !line.startsWith('+++')) {
+        additions++;
+      } else if (
+        line.startsWith('-') &&
+        !line.startsWith('---')
+      ) {
+        deletions++;
+      }
+    });
+
+    return { additions, deletions };
+  }, [unifiedDiff]);
+
+  if (!unifiedDiff) {
+    return null;
+  }
+
+  return (
+    <div className="diff-view" data-file={fileName}>
+      <div className="diff-summary">
+        <div className="diff-stats">
+          <span className="files-changed">{fileName}</span>
+          {stats.additions > 0 && (
+            <span className="additions">
+              +{stats.additions}
+            </span>
+          )}
+          {stats.deletions > 0 && (
+            <span className="deletions">
+              -{stats.deletions}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div
+        className="diff-files"
+        dangerouslySetInnerHTML={{ __html: diffHtml }}
+      />
+    </div>
+  );
+};

package/src/llm-streaming-ui/components/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/llm-streaming-ui/components/Message.tsx

@@ -0,0 +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 { StreamingEvent } from '../../types.js';
+import { IndividualFileDiff } from './IndividualFileDiff';
+import { VZCodeContext } from '../../client/VZCodeContext';
+import { DiffView, DiffViewRef } from './DiffView';
+import { UnifiedFilesDiff } from '../../utils/fileDiff';
+import { enableDiffView } from '../../client/featureFlags';
+
+const DEBUG = false;
+
+interface MessageProps {
+  id: string;
+  role: 'user' | 'assistant';
+  content?: string; // For non-streaming messages
+  timestamp: number;
+  events?: StreamingEvent[]; // For streaming messages
+  isActive?: boolean; // Is this the currently streaming message?
+  chatId?: string;
+  showAdditionalWidgets?: boolean;
+  isStreaming?: boolean;
+  diffData?: UnifiedFilesDiff;
+}
+
+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);
+
+    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]);
+
+    return (
+      <div className={messageClassName}>
+        <div className="ai-chat-message-content">
+          {/* Render regular content for non-streaming messages */}
+          {content && (
+            <Markdown remarkPlugins={[remarkGfm]}>
+              {content}
+            </Markdown>
+          )}
+
+          {/* 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>
+    );
+  },
+);
+
+Message.displayName = 'Message';

package/src/llm-streaming-ui/components/MessageList.tsx

@@ -0,0 +1,241 @@
+import {
+  useRef,
+  useEffect,
+  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 '../../client/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 diffViewRef = useRef<DiffViewRef>(null);
+
+  // Get additional widgets from context
+  const { additionalWidgets, handleSendMessage } =
+    useContext(VZCodeContext);
+
+  // Track previous loading state to detect when AI generation completes
+  const [prevIsLoading, setPrevIsLoading] =
+    useState(isLoading);
+
+  // Auto-scroll when messages change
+  useEffect(() => {
+    // 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();
+    }
+
+    // Trigger auto-scroll if enabled
+    onNewEvent(targetElement);
+
+    // 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, force scroll to bottom
+    if (prevIsLoading && !isLoading) {
+      // Force jump to latest regardless of current auto-scroll state
+      onJumpToLatest();
+    }
+
+    setPrevIsLoading(isLoading);
+  }, [isLoading, prevIsLoading, onJumpToLatest]);
+
+  // Check if AI generation has started (last message is from assistant)
+  const lastMessage = messages[messages.length - 1];
+  const aiGenerationStarted =
+    lastMessage?.role === 'assistant' &&
+    lastMessage.content !== '';
+
+  // Show typing indicator only when loading and AI generation hasn't started yet
+  const showTypingIndicator =
+    isLoading && !aiGenerationStarted;
+
+  // Show thinking scratchpad when AI is thinking (has scratchpad content)
+  const showThinkingScratchpad = Boolean(
+    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))
+    .filter((i) => i !== -1)
+    .pop();
+
+  return (
+    <div
+      className="ai-chat-messages"
+      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={
+              isStreamingMessage ? undefined : msg.content
+            }
+            timestamp={msg.timestamp}
+            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>
+        );
+      })}
+
+      <div ref={messagesEndRef} />
+    </div>
+  );
+};
+
+export const MessageList = memo(MessageListComponent);

package/src/llm-streaming-ui/components/ThinkingScratchpad.tsx

@@ -0,0 +1,42 @@
+import { memo } from 'react';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+interface ThinkingScratchpadProps {
+  content: string;
+  isVisible: boolean;
+}
+
+const ThinkingScratchpadComponent = ({
+  content,
+  isVisible,
+}: ThinkingScratchpadProps) => {
+  if (!isVisible || !content) {
+    return null;
+  }
+
+  return (
+    <div className="thinking-scratchpad">
+      <div className="thinking-scratchpad-header">
+        <span className="thinking-scratchpad-icon">🧠</span>
+        <span className="thinking-scratchpad-title">
+          AI is thinking...
+        </span>
+      </div>
+      <div
+        className="thinking-scratchpad-content"
+        role="log"
+        aria-live="polite"
+        aria-relevant="additions"
+      >
+        <Markdown remarkPlugins={[remarkGfm]}>
+          {content}
+        </Markdown>
+      </div>
+    </div>
+  );
+};
+
+export const ThinkingScratchpad = memo(
+  ThinkingScratchpadComponent,
+);

package/src/llm-streaming-ui/components/TypingIndicator.tsx

@@ -0,0 +1,19 @@
+import { memo } from 'react';
+
+const TypingIndicatorComponent = () => {
+  return (
+    <div className="ai-chat-message assistant">
+      <div className="ai-chat-message-content">
+        <div className="ai-chat-typing">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const TypingIndicator = memo(
+  TypingIndicatorComponent,
+);