vzcode 1.45.0 → 1.47.0

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

@@ -13,14 +13,21 @@ interface MessageProps {
   timestamp: number;
   isStreaming?: boolean;
   diffData?: UnifiedFilesDiff;
+  beforeFiles?: any;
+  chatId?: string;
+  canUndo?: boolean;
 }
 
 const MessageComponent = ({
+  id,
   role,
   content,
   timestamp,
   isStreaming,
   diffData,
+  beforeFiles,
+  chatId,
+  canUndo,
 }: MessageProps) => {
   // Memoize date formatting to avoid repeated computation
   const formattedTime = useMemo(() => {
@@ -47,7 +54,13 @@ const MessageComponent = ({
         {enableDiffView &&
           diffData &&
           Object.keys(diffData).length > 0 && (
-            <DiffView diffData={diffData} />
+            <DiffView
+              diffData={diffData}
+              messageId={id}
+              chatId={chatId}
+              beforeFiles={beforeFiles}
+              canUndo={canUndo}
+            />
           )}
       </div>
       <div className="ai-chat-message-time">

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

@@ -3,31 +3,118 @@ import {
   useEffect,
   useCallback,
   memo,
+  useState,
 } from 'react';
 import { Message } from './Message';
 import { TypingIndicator } from './TypingIndicator';
+import { ThinkingScratchpad } from './ThinkingScratchpad';
 import { VizChatMessage } from '@vizhub/viz-types';
 
 const MessageListComponent = ({
   messages,
   aiStatus,
   isLoading,
+  chatId, // Add chatId prop
+  aiScratchpad, // Add aiScratchpad prop
 }: {
   messages: VizChatMessage[];
   aiStatus?: string;
   isLoading: boolean;
+  chatId?: string; // Add chatId to the type
+  aiScratchpad?: string; // Add aiScratchpad to the type
 }) => {
   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);
+    }
+
+    // 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]);
 
+  // Auto-scroll when messages change, but only if auto-scroll is enabled
   useEffect(() => {
-    scrollToBottom();
-  }, [messages]);
+    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
+    }
+
+    return () => {
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, [
+    messages,
+    autoScrollEnabled,
+    isUserScrolled,
+    scrollToBottom,
+  ]);
+
+  // Clean up timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, []);
 
   // Check if AI generation has started (last message is from assistant)
   const lastMessage = messages[messages.length - 1];
@@ -39,18 +126,52 @@ const MessageListComponent = ({
   const showTypingIndicator =
     isLoading && !aiGenerationStarted;
 
+  // Show thinking scratchpad when AI is thinking (has scratchpad content)
+  const showThinkingScratchpad = Boolean(
+    aiScratchpad && aiScratchpad.trim(),
+  );
+
   return (
-    <div className="ai-chat-messages">
-      {messages.map((msg) => (
-        <Message
-          key={msg.id}
-          id={msg.id}
-          role={msg.role}
-          content={msg.content}
-          timestamp={msg.timestamp}
-          diffData={(msg as any).diffData}
+    <div
+      className="ai-chat-messages"
+      ref={messagesContainerRef}
+      onScroll={handleScroll}
+    >
+      {messages.map((msg, index) => {
+        // Only the most recent assistant message with diffData can be undone
+        const isLastAssistantMessage =
+          msg.role === 'assistant' &&
+          index === messages.length - 1 &&
+          !isLoading; // Can't undo while AI is still generating
+
+        const canUndo =
+          isLastAssistantMessage &&
+          (msg as any).diffData &&
+          (msg as any).beforeFiles &&
+          Object.keys((msg as any).diffData || {}).length >
+            0;
+
+        return (
+          <Message
+            key={msg.id}
+            id={msg.id}
+            role={msg.role}
+            content={msg.content}
+            timestamp={msg.timestamp}
+            diffData={(msg as any).diffData}
+            beforeFiles={(msg as any).beforeFiles}
+            chatId={chatId}
+            canUndo={canUndo}
+          />
+        );
+      })}
+
+      {showThinkingScratchpad && (
+        <ThinkingScratchpad
+          content={aiScratchpad || ''}
+          isVisible={showThinkingScratchpad}
         />
-      ))}
+      )}
 
       {showTypingIndicator && <TypingIndicator />}
       <div ref={messagesEndRef} />

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

@@ -0,0 +1,37 @@
+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">
+          VizBot is thinking...
+        </span>
+      </div>
+      <div className="thinking-scratchpad-content">
+        <Markdown remarkPlugins={[remarkGfm]}>
+          {content}
+        </Markdown>
+      </div>
+    </div>
+  );
+};
+
+export const ThinkingScratchpad = memo(
+  ThinkingScratchpadComponent,
+);

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

@@ -10,7 +10,7 @@ import { MessageList } from './MessageList';
 import { ChatInput } from './ChatInput';
 import './styles.scss';
 
-const defaultAIChatEndpoint = '/ai-chat-message';
+const defaultAIChatEndpoint = '/api/ai-chat/';
 
 export const AIChat = () => {
   const { aiChatMessage, setAIChatMessage } =
@@ -18,18 +18,24 @@ export const AIChat = () => {
 
   const [isLoading, setIsLoading] = useState(false);
   const [currentChatId] = useState(() => uuidv4());
+  const [errorMessage, setErrorMessage] = useState<
+    string | null
+  >(null);
 
   const {
     aiChatFocused,
     content,
     aiChatEndpoint = defaultAIChatEndpoint,
     aiChatOptions = {},
+    aiChatMode,
+    setAIChatMode,
   } = useContext(VZCodeContext);
 
   // Get current chat data from content
   const currentChat = content?.chats?.[currentChatId];
   const rawMessages = currentChat?.messages || [];
   const aiStatus = currentChat?.aiStatus;
+  const aiScratchpad = currentChat?.aiScratchpad;
 
   // Transform messages to ensure they have required id field - memoized to avoid recreation
   const messages = useMemo(
@@ -41,11 +47,15 @@ export const AIChat = () => {
     [rawMessages],
   );
 
+  // Check if this is the first time opening the chat (no messages)
+  const isEmptyState = rawMessages.length === 0;
+
   const handleSendMessage = useCallback(async () => {
     if (!aiChatMessage.trim() || isLoading) return;
 
     setAIChatMessage('');
     setIsLoading(true);
+    setErrorMessage(null); // Clear any previous errors
 
     // Call backend endpoint for AI response
     // The server will handle all ShareDB operations including adding the user message
@@ -57,8 +67,10 @@ export const AIChat = () => {
         },
         body: JSON.stringify({
           ...aiChatOptions,
+          vizId: aiChatOptions.vizId,
           content: aiChatMessage.trim(),
           chatId: currentChatId,
+          mode: aiChatMode,
         }),
       });
 
@@ -68,11 +80,24 @@ export const AIChat = () => {
         );
       }
 
-      // The backend handles all ShareDB operations
-      await response.json();
+      // Parse the response to check for errors
+      const responseData = await response.json();
+
+      // Check if the response contains a VizHub error
+      if (
+        responseData.outcome === 'failure' &&
+        responseData.error
+      ) {
+        setErrorMessage(responseData.error.message);
+        return;
+      }
+
+      // The backend handles all ShareDB operations for successful responses
     } catch (error) {
       console.error('Error getting AI response:', error);
-      // Server will handle error messages too
+      setErrorMessage(
+        'Failed to send message. Please try again.',
+      );
     } finally {
       setIsLoading(false);
     }
@@ -86,18 +111,164 @@ export const AIChat = () => {
 
   return (
     <div className="ai-chat-container">
-      <MessageList
-        messages={messages}
-        aiStatus={aiStatus}
-        isLoading={isLoading}
-      />
-      <ChatInput
-        aiChatMessage={aiChatMessage}
-        setAIChatMessage={setAIChatMessage}
-        onSendMessage={handleSendMessage}
-        isLoading={isLoading}
-        focused={aiChatFocused}
-      />
+      <div
+        style={{
+          padding: '10px',
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {isEmptyState ? (
+          <div className="ai-chat-empty">
+            <div className="ai-chat-empty-icon">✨</div>
+            <h3 className="ai-chat-empty-title">
+              Hi, I'm VizBot!
+            </h3>
+            <div className="ai-chat-empty-text">
+              How can I help you?
+            </div>
+            <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={() =>
+                        setAIChatMessage(
+                          'Explain how this works',
+                        )
+                      }
+                    >
+                      "Explain how this works"
+                    </button>
+                    <button
+                      className="ai-chat-suggested-prompt"
+                      onClick={() =>
+                        setAIChatMessage(
+                          'How could I change it so that the circles are bigger?',
+                        )
+                      }
+                    >
+                      "How could I change it so that the
+                      circles are bigger?"
+                    </button>
+                    <button
+                      className="ai-chat-suggested-prompt"
+                      onClick={() =>
+                        setAIChatMessage(
+                          'What does this function do?',
+                        )
+                      }
+                    >
+                      "What does this function do?"
+                    </button>
+                    <button
+                      className="ai-chat-suggested-prompt"
+                      onClick={() =>
+                        setAIChatMessage(
+                          'How can I make this more accessible?',
+                        )
+                      }
+                    >
+                      "How can I make this more accessible?"
+                    </button>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <h4>Try edit requests like these:</h4>
+                  <div className="ai-chat-suggested-prompts">
+                    <button
+                      className="ai-chat-suggested-prompt"
+                      onClick={() =>
+                        setAIChatMessage(
+                          'Change the circles to squares',
+                        )
+                      }
+                    >
+                      "Change the circles to squares"
+                    </button>
+                    <button
+                      className="ai-chat-suggested-prompt"
+                      onClick={() =>
+                        setAIChatMessage(
+                          'Add a button that toggles the animation',
+                        )
+                      }
+                    >
+                      "Add a button that toggles the
+                      animation"
+                    </button>
+                    <button
+                      className="ai-chat-suggested-prompt"
+                      onClick={() =>
+                        setAIChatMessage(
+                          'Fix the CSS so the layout is responsive',
+                        )
+                      }
+                    >
+                      "Fix the CSS so the layout is
+                      responsive"
+                    </button>
+                    <button
+                      className="ai-chat-suggested-prompt"
+                      onClick={() =>
+                        setAIChatMessage(
+                          'Refactor this function to use async/await',
+                        )
+                      }
+                    >
+                      "Refactor this function to use
+                      async/await"
+                    </button>
+                  </div>
+                </>
+              )}
+            </div>
+            <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}
+            aiStatus={aiStatus}
+            isLoading={isLoading}
+            chatId={currentChatId}
+            aiScratchpad={aiScratchpad}
+          />
+        )}
+        {errorMessage && (
+          <div className="ai-chat-error">
+            <div className="ai-chat-error-content">
+              <span className="ai-chat-error-icon">⚠️</span>
+              <span className="ai-chat-error-message">
+                {errorMessage}
+              </span>
+              <button
+                className="ai-chat-error-dismiss"
+                onClick={() => setErrorMessage(null)}
+                aria-label="Dismiss error"
+              >
+                ×
+              </button>
+            </div>
+          </div>
+        )}
+        <ChatInput
+          aiChatMessage={aiChatMessage}
+          setAIChatMessage={setAIChatMessage}
+          onSendMessage={handleSendMessage}
+          isLoading={isLoading}
+          focused={aiChatFocused}
+          aiChatMode={aiChatMode}
+          setAIChatMode={setAIChatMode}
+        />
+      </div>
     </div>
   );
 };