vzcode 1.44.0 → 1.46.0

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,17 +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}
+    <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

@@ -13,7 +13,9 @@ import './styles.scss';
 const defaultAIChatEndpoint = '/ai-chat-message';
 
 export const AIChat = () => {
-  const [message, setMessage] = useState('');
+  const { aiChatMessage, setAIChatMessage } =
+    useContext(VZCodeContext);
+
   const [isLoading, setIsLoading] = useState(false);
   const [currentChatId] = useState(() => uuidv4());
 
@@ -22,12 +24,15 @@ export const AIChat = () => {
     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(
@@ -39,10 +44,13 @@ 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 (!message.trim() || isLoading) return;
+    if (!aiChatMessage.trim() || isLoading) return;
 
-    setMessage('');
+    setAIChatMessage('');
     setIsLoading(true);
 
     // Call backend endpoint for AI response
@@ -55,8 +63,9 @@ export const AIChat = () => {
         },
         body: JSON.stringify({
           ...aiChatOptions,
-          content: message.trim(),
+          content: aiChatMessage.trim(),
           chatId: currentChatId,
+          mode: aiChatMode,
         }),
       });
 
@@ -75,7 +84,7 @@ export const AIChat = () => {
       setIsLoading(false);
     }
   }, [
-    message,
+    aiChatMessage,
     isLoading,
     aiChatEndpoint,
     aiChatOptions,
@@ -84,18 +93,147 @@ export const AIChat = () => {
 
   return (
     <div className="ai-chat-container">
-      <MessageList
-        messages={messages}
-        aiStatus={aiStatus}
-        isLoading={isLoading}
-      />
-      <ChatInput
-        message={message}
-        setMessage={setMessage}
-        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}
+          />
+        )}
+        <ChatInput
+          aiChatMessage={aiChatMessage}
+          setAIChatMessage={setAIChatMessage}
+          onSendMessage={handleSendMessage}
+          isLoading={isLoading}
+          focused={aiChatFocused}
+          aiChatMode={aiChatMode}
+          setAIChatMode={setAIChatMode}
+        />
+      </div>
     </div>
   );
 };

package/src/client/VZSidebar/AIChat/styles.scss

@@ -2,7 +2,84 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding: 10px;
+  padding: 0;
+}
+
+.ai-chat-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 20px;
+  overflow-y: auto;
+
+  .ai-chat-empty-icon {
+    font-size: 42px;
+    margin-bottom: 15px;
+  }
+
+  .ai-chat-empty-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--vh-color-neutral-04);
+    margin-bottom: 15px;
+  }
+
+  .ai-chat-empty-text {
+    font-size: 14px;
+    color: var(--vh-color-neutral-04);
+    margin-bottom: 20px;
+    line-height: 1.5;
+  }
+
+  .ai-chat-empty-examples {
+    background: var(--vh-color-neutral-02);
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 20px;
+    text-align: left;
+    width: 100%;
+
+    h4 {
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--vh-color-neutral-04);
+      margin-bottom: 10px;
+    }
+
+    .ai-chat-suggested-prompts {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin: 0;
+
+      .ai-chat-suggested-prompt {
+        background: var(--vh-color-neutral-03);
+        border: 1px solid var(--vh-color-neutral-04);
+        border-radius: 6px;
+        padding: 8px 12px;
+        font-size: 13px;
+        color: var(--vh-color-neutral-04);
+        text-align: left;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        line-height: 1.4;
+
+        &:hover {
+          background: var(--vh-color-neutral-04);
+          color: var(--vh-color-neutral-01);
+          border-color: var(--vh-color-primary-01);
+        }
+
+        &:active {
+          background: var(--vh-color-primary-01);
+          color: white;
+          border-color: var(--vh-color-primary-01);
+        }
+      }
+    }
+  }
 }
 
 .ai-chat-messages {
@@ -10,6 +87,7 @@
   overflow-y: auto;
   margin-bottom: 10px;
   padding-right: 5px;
+  scroll-behavior: smooth;
 
   &::-webkit-scrollbar {
     width: 6px;
@@ -199,8 +277,57 @@
   padding-top: 10px;
 }
 
+.ai-chat-mode-toggle {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  .btn-group {
+    justify-content: center;
+  }
+
+  .btn-group .btn {
+    font-size: 12px;
+    font-weight: 500;
+    padding: 4px 12px;
+    border: 1px solid var(--vh-color-neutral-03);
+    background: var(--vh-color-neutral-02);
+    color: var(--vh-color-neutral-04);
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: var(--vh-color-neutral-03);
+      border-color: var(--vh-color-neutral-04);
+    }
+
+    &.btn-primary {
+      background: var(--vh-color-primary-01);
+      border-color: var(--vh-color-primary-01);
+      color: white;
+
+      &:hover {
+        background: var(--vh-color-primary-02);
+        border-color: var(--vh-color-primary-02);
+      }
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+
+  .ai-chat-mode-description {
+    font-size: 11px;
+    color: var(--vh-color-neutral-03);
+    text-align: center;
+    font-style: italic;
+  }
+}
+
 .ai-chat-input-group {
   display: flex;
+  flex-direction: column;
   gap: 8px;
   margin-bottom: 0;
 
@@ -233,6 +360,18 @@
     }
   }
 
+  .ai-chat-input-info {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: var(--vh-color-neutral-03);
+    margin-bottom: 6px;
+
+    .ai-chat-hint {
+      font-style: italic;
+    }
+  }
+
   .ai-chat-send-button {
     background: var(--vh-color-primary-01);
     border: none;
@@ -243,6 +382,8 @@
     font-weight: 500;
     cursor: pointer;
     transition: background-color 0.2s ease;
+    align-self: flex-end;
+    min-width: 80px;
 
     &:hover:not(:disabled) {
       background: var(--vh-color-primary-02);
@@ -254,3 +395,84 @@
     }
   }
 }
+
+// Thinking scratchpad styles
+.thinking-scratchpad {
+  background: var(--vh-color-neutral-02);
+  border: 1px solid var(--vh-color-neutral-03);
+  border-radius: 8px;
+  margin: 10px 0;
+  padding: 0;
+  overflow: hidden;
+  font-size: 13px;
+
+  .thinking-scratchpad-header {
+    background: var(--vh-color-neutral-03);
+    color: var(--vh-color-neutral-04);
+    padding: 8px 12px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .thinking-scratchpad-icon {
+      font-size: 16px;
+    }
+
+    .thinking-scratchpad-title {
+      font-size: 13px;
+    }
+  }
+
+  .thinking-scratchpad-content {
+    padding: 12px;
+    max-height: 200px;
+    overflow-y: auto;
+    background: var(--vh-color-neutral-02);
+
+    // Style markdown content in thinking scratchpad
+    p {
+      margin: 0 0 8px 0;
+      line-height: 1.4;
+      color: var(--vh-color-neutral-04);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    code {
+      background: rgba(0, 0, 0, 0.3);
+      color: #e6e6e6;
+      padding: 1px 4px;
+      border-radius: 3px;
+      font-size: 12px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    ul,
+    ol {
+      margin: 0 0 8px 0;
+      padding-left: 20px;
+
+      li {
+        margin-bottom: 4px;
+        color: var(--vh-color-neutral-04);
+      }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin: 8px 0 6px 0;
+      color: var(--vh-color-neutral-04);
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+}