vzcode 2.22.0 → 2.25.0

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

@@ -1,241 +0,0 @@
-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 '../../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/client/VZSidebar/AIChat/ThinkingScratchpad.tsx

@@ -1,42 +0,0 @@
-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/client/VZSidebar/AIChat/TypingIndicator.tsx

@@ -1,19 +0,0 @@
-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,
-);

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

@@ -1,388 +0,0 @@
-import {
-  useContext,
-  useMemo,
-  useEffect,
-  useCallback,
-} from 'react';
-import { VZCodeContext } from '../../VZCodeContext';
-import { MessageList } from './MessageList';
-import { ChatInput } from './ChatInput';
-import { ExtendedVizChat } from '../../../types.js';
-import { useAutoScroll } from '../../hooks/useAutoScroll';
-import { JumpToLatestButton } from './JumpToLatestButton';
-import './styles.scss';
-
-const DEBUG = false;
-
-const showSuggestedRequests = false;
-
-const showPreviousChats = false;
-
-// Component for displaying the list of existing chats
-const ChatList = ({
-  chats,
-  selectedChatId,
-  onSelectChat,
-  getChatTitle,
-}) => {
-  return (
-    <div className="ai-chat-list">
-      <div className="ai-chat-list-header">
-        <h4>Previous Chats</h4>
-      </div>
-      <div className="ai-chat-suggested-prompts">
-        {chats.map((chat) => (
-          <button
-            key={chat.id}
-            className={`ai-chat-suggested-prompt ${
-              selectedChatId === chat.id ? 'selected' : ''
-            }`}
-            onClick={() => onSelectChat(chat.id)}
-          >
-            {getChatTitle(chat)}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export const AIChat = () => {
-  const {
-    aiChatFocused,
-    content,
-    aiChatMode,
-    aiChatMessage,
-    currentChatId,
-    selectedChatId,
-    setSelectedChatId,
-    aiErrorMessage,
-    setAIChatMode,
-    getStoredAIPrompt,
-    setAIChatMessage,
-    handleSendMessage,
-    setAIErrorMessage,
-    navigateMessageHistoryUp,
-    navigateMessageHistoryDown,
-    resetMessageHistoryNavigation,
-    enableMinimalEditFlow,
-  } = useContext(VZCodeContext);
-
-  // Use the new simplified auto-scroll hook
-  const {
-    containerRef: messagesContainerRef,
-    showJumpButton,
-    onNewEvent,
-    onJumpToLatest,
-    beforeRender,
-    afterRender,
-  } = useAutoScroll({ threshold: 24 });
-
-  // Get the active chat ID and chat data
-  // If selectedChatId is set, use it; otherwise, if no chat selected, don't default to currentChatId
-  const activeChatId = selectedChatId;
-  const currentChat = activeChatId
-    ? content?.chats?.[activeChatId]
-    : null;
-  const rawMessages = useMemo(
-    () => currentChat?.messages || [],
-    [currentChat?.messages],
-  );
-  const aiStatus = currentChat?.aiStatus;
-  const aiScratchpad = currentChat?.aiScratchpad;
-  const currentStatus = (currentChat as ExtendedVizChat)
-    ?.currentStatus;
-
-  // Debug logging for AI status
-  DEBUG && console.log('AIChat: currentChat:', currentChat);
-  DEBUG && console.log('AIChat: aiStatus:', aiStatus);
-  DEBUG &&
-    console.log(
-      'AIChat: enableMinimalEditFlow:',
-      enableMinimalEditFlow,
-    );
-
-  // Transform messages to ensure they have required id field - memoized to avoid recreation
-  const messages = useMemo(
-    () =>
-      rawMessages.map((msg, index) => ({
-        ...msg,
-        id: msg.id || `msg-${index}`,
-      })),
-    [rawMessages],
-  );
-
-  // Check if this is the first time opening the chat (no messages) or no chat selected
-  const isEmptyState =
-    !selectedChatId || rawMessages.length === 0;
-
-  // Get all existing chats
-  const allChats = content?.chats || {};
-  const existingChats = Object.values(allChats).filter(
-    (chat) => chat.messages.length > 0,
-  );
-  const hasExistingChats = existingChats.length > 0;
-
-  // Generate title for a chat (first 50 characters of first user message)
-  const getChatTitle = (chat) => {
-    const firstUserMessage = chat.messages.find(
-      (msg) => msg.role === 'user',
-    );
-    if (!firstUserMessage) return 'New Chat';
-    return (
-      firstUserMessage.content.slice(0, 50) +
-      (firstUserMessage.content.length > 50 ? '...' : '')
-    );
-  };
-
-  // Wrapper for handleSendMessage to automatically select the chat when sending
-  const handleSendMessageWithSelection = useCallback(() => {
-    // If no chat is selected, select the currentChatId when sending a message
-    if (!selectedChatId) {
-      setSelectedChatId(currentChatId);
-    }
-
-    // Call the original handleSendMessage without parameters
-    return handleSendMessage();
-  }, [
-    selectedChatId,
-    setSelectedChatId,
-    currentChatId,
-    handleSendMessage,
-  ]);
-
-  // Check for stored AI prompt on component mount (post-fork restoration)
-  // This logic is now handled by the AutoSendAIMessage component in VizHub
-  // to ensure proper timing and coordination with editor opening
-  useEffect(() => {
-    DEBUG &&
-      console.log('AIChat: Checking for stored AI prompt');
-    if (getStoredAIPrompt) {
-      const storedPrompt = getStoredAIPrompt();
-      DEBUG &&
-        console.log(
-          'AIChat: Stored prompt result:',
-          storedPrompt,
-        );
-      if (storedPrompt) {
-        // Only restore the prompt and mode, but don't auto-send
-        // The AutoSendAIMessage component will handle the sending
-        DEBUG &&
-          console.log(
-            'AIChat: Restoring prompt and mode only',
-          );
-        setAIChatMessage(storedPrompt.prompt);
-        setAIChatMode(
-          storedPrompt.modelName === 'ask' ? 'ask' : 'edit',
-        );
-
-        // Don't clear the stored prompt here - let AutoSendAIMessage handle it
-        // Don't auto-submit here - let AutoSendAIMessage handle the timing
-        DEBUG &&
-          console.log(
-            'AIChat: Prompt restored, waiting for AutoSendAIMessage to handle sending',
-          );
-      } else {
-        DEBUG &&
-          console.log('AIChat: No stored prompt found');
-      }
-    }
-  }, [getStoredAIPrompt, setAIChatMessage, setAIChatMode]);
-
-  return (
-    <div className="ai-chat-container">
-      <div className="ai-chat-content">
-        <div
-          className="ai-chat-messages-container"
-          ref={messagesContainerRef}
-        >
-          {isEmptyState ? (
-            <div className="ai-chat-empty">
-              <div className="ai-chat-empty-icon">✨</div>
-              <h3 className="ai-chat-empty-title">
-                Edit with AI
-              </h3>
-              <div className="ai-chat-empty-text">
-                How can I help you?
-              </div>
-              {hasExistingChats && showPreviousChats && (
-                <ChatList
-                  chats={existingChats}
-                  selectedChatId={selectedChatId}
-                  onSelectChat={setSelectedChatId}
-                  getChatTitle={getChatTitle}
-                />
-              )}
-              {showSuggestedRequests && (
-                <div className="ai-chat-empty-examples">
-                  {aiChatMode === 'ask' ? (
-                    <>
-                      <h4>Try asking questions like:</h4>
-                      <div className="ai-chat-suggested-prompts">
-                        <button
-                          className="ai-chat-suggested-prompt"
-                          onClick={() =>
-                            handleSendMessage(
-                              'Explain how this works',
-                            )
-                          }
-                        >
-                          &quot;Explain how this works&quot;
-                        </button>
-                        <button
-                          className="ai-chat-suggested-prompt"
-                          onClick={() =>
-                            handleSendMessage(
-                              'How could I change it so that the circles are bigger?',
-                            )
-                          }
-                        >
-                          &quot;How could I change it so
-                          that the circles are bigger?&quot;
-                        </button>
-                        <button
-                          className="ai-chat-suggested-prompt"
-                          onClick={() =>
-                            handleSendMessage(
-                              'What does this function do?',
-                            )
-                          }
-                        >
-                          &quot;What does this function
-                          do?&quot;
-                        </button>
-                        <button
-                          className="ai-chat-suggested-prompt"
-                          onClick={() =>
-                            handleSendMessage(
-                              'How can I make this more accessible?',
-                            )
-                          }
-                        >
-                          &quot;How can I make this more
-                          accessible?&quot;
-                        </button>
-                      </div>
-                    </>
-                  ) : (
-                    <>
-                      <h4>Try edit requests like these:</h4>
-                      <div className="ai-chat-suggested-prompts">
-                        <button
-                          className="ai-chat-suggested-prompt"
-                          onClick={() =>
-                            handleSendMessage(
-                              'Change the circles to squares',
-                            )
-                          }
-                        >
-                          &quot;Change the circles to
-                          squares&quot;
-                        </button>
-                        <button
-                          className="ai-chat-suggested-prompt"
-                          onClick={() =>
-                            handleSendMessage(
-                              'Add a button that toggles the animation',
-                            )
-                          }
-                        >
-                          &quot;Add a button that toggles
-                          the animation&quot;
-                        </button>
-                        <button
-                          className="ai-chat-suggested-prompt"
-                          onClick={() =>
-                            handleSendMessage(
-                              'Fix the CSS so the layout is responsive',
-                            )
-                          }
-                        >
-                          &quot;Fix the CSS so the layout is
-                          responsive&quot;
-                        </button>
-                        <button
-                          className="ai-chat-suggested-prompt"
-                          onClick={() =>
-                            handleSendMessage(
-                              'Refactor this function to use async/await',
-                            )
-                          }
-                        >
-                          &quot;Refactor this function to
-                          use async/await&quot;
-                        </button>
-                      </div>
-                    </>
-                  )}
-                </div>
-              )}
-              {showSuggestedRequests && (
-                <div className="ai-chat-empty-text">
-                  {aiChatMode === 'ask'
-                    ? 'Type your question below to get started!'
-                    : 'Type your edit request below to get started!'}
-                </div>
-              )}
-            </div>
-          ) : (
-            <MessageList
-              messages={messages}
-              isLoading={false}
-              chatId={selectedChatId || currentChatId}
-              aiScratchpad={aiScratchpad}
-              currentStatus={currentStatus}
-              onNewEvent={onNewEvent}
-              onJumpToLatest={onJumpToLatest}
-              beforeRender={beforeRender}
-              afterRender={afterRender}
-            />
-          )}
-          {aiErrorMessage && (
-            <div className="ai-chat-error">
-              <div className="ai-chat-error-content">
-                <span className="ai-chat-error-icon">
-                  ⚠️
-                </span>
-                <span className="ai-chat-error-message">
-                  {aiErrorMessage}
-                </span>
-                <button
-                  className="ai-chat-error-dismiss"
-                  onClick={() => setAIErrorMessage(null)}
-                  aria-label="Dismiss error"
-                >
-                  ×
-                </button>
-              </div>
-            </div>
-          )}
-          {/* Jump to Latest Button */}
-          <JumpToLatestButton
-            visible={showJumpButton}
-            onClick={onJumpToLatest}
-          />
-        </div>
-      </div>
-      <div className="ai-chat-input-fixed">
-        <ChatInput
-          aiChatMessage={aiChatMessage}
-          setAIChatMessage={setAIChatMessage}
-          onSendMessage={handleSendMessageWithSelection}
-          focused={aiChatFocused}
-          aiChatMode={aiChatMode}
-          setAIChatMode={setAIChatMode}
-          navigateMessageHistoryUp={
-            navigateMessageHistoryUp
-          }
-          navigateMessageHistoryDown={
-            navigateMessageHistoryDown
-          }
-          resetMessageHistoryNavigation={
-            resetMessageHistoryNavigation
-          }
-        />
-      </div>
-    </div>
-  );
-};