vzcode 2.2.0 → 2.4.0

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

@@ -1,4 +1,9 @@
-import { useContext, useMemo, useEffect } from 'react';
+import {
+  useContext,
+  useMemo,
+  useEffect,
+  useCallback,
+} from 'react';
 import { VZCodeContext } from '../../VZCodeContext';
 import { MessageList } from './MessageList';
 import { ChatInput } from './ChatInput';
@@ -8,6 +13,35 @@ const DEBUG = false;
 
 const showSuggestedRequests = 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,
@@ -16,6 +50,8 @@ export const AIChat = () => {
     aiChatMessage,
     isLoading,
     currentChatId,
+    selectedChatId,
+    setSelectedChatId,
     aiErrorMessage,
     setAIChatMode,
     clearStoredAIPrompt,
@@ -28,8 +64,12 @@ export const AIChat = () => {
     resetMessageHistoryNavigation,
   } = useContext(VZCodeContext);
 
-  // Get current chat data from content
-  const currentChat = content?.chats?.[currentChatId];
+  // 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 = currentChat?.messages || [];
   const aiStatus = currentChat?.aiStatus;
   const aiScratchpad = currentChat?.aiScratchpad;
@@ -44,8 +84,44 @@ export const AIChat = () => {
     [rawMessages],
   );
 
-  // Check if this is the first time opening the chat (no messages)
-  const isEmptyState = rawMessages.length === 0;
+  // 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)
   useEffect(() => {
@@ -108,6 +184,14 @@ export const AIChat = () => {
               <div className="ai-chat-empty-text">
                 How can I help you?
               </div>
+              {hasExistingChats && (
+                <ChatList
+                  chats={existingChats}
+                  selectedChatId={selectedChatId}
+                  onSelectChat={setSelectedChatId}
+                  getChatTitle={getChatTitle}
+                />
+              )}
               {showSuggestedRequests && (
                 <div className="ai-chat-empty-examples">
                   {aiChatMode === 'ask' ? (
@@ -223,7 +307,7 @@ export const AIChat = () => {
               messages={messages}
               aiStatus={aiStatus}
               isLoading={isLoading}
-              chatId={currentChatId}
+              chatId={selectedChatId || currentChatId}
               aiScratchpad={aiScratchpad}
             />
           )}
@@ -252,7 +336,7 @@ export const AIChat = () => {
         <ChatInput
           aiChatMessage={aiChatMessage}
           setAIChatMessage={setAIChatMessage}
-          onSendMessage={handleSendMessage}
+          onSendMessage={handleSendMessageWithSelection}
           isLoading={isLoading}
           focused={aiChatFocused}
           aiChatMode={aiChatMode}

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

@@ -100,11 +100,30 @@
           color: white;
           border-color: var(--vh-color-primary-01);
         }
+
+        &.selected {
+          background: var(--vh-color-primary-01);
+          color: white;
+          border-color: var(--vh-color-primary-01);
+        }
       }
     }
   }
 }
 
+.ai-chat-list {
+  margin-top: 20px;
+
+  .ai-chat-list-header {
+    h4 {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--vh-color-neutral-04);
+      margin-bottom: 10px;
+    }
+  }
+}
+
 .ai-chat-messages {
   flex: 1;
   overflow-y: auto;

package/src/server/aiChatHandler/aiEditing.ts

@@ -147,6 +147,5 @@ export const performAIEditing = async ({
     content: result.content,
     generationId: result.generationId,
     diffData,
-    beforeFiles, // Store the snapshot for undo functionality
   };
 };

package/src/server/aiChatHandler/chatOperations.ts

@@ -278,7 +278,6 @@ export const addDiffToAIMessage = (
   shareDBDoc: ShareDBDoc<VizContent>,
   chatId: VizChatId,
   diffData: any,
-  beforeFiles?: VizFiles, // Optional snapshot for undo functionality (legacy)
   beforeCommitId?: string, // Commit ID before AI changes for VizHub integration
 ) => {
   const chat = shareDBDoc.data.chats[chatId];
@@ -293,7 +292,6 @@ export const addDiffToAIMessage = (
     const newMessage = {
       ...messages[lastAIMessageIndex],
       diffData,
-      ...(beforeFiles && { beforeFiles }), // Add beforeFiles only if provided (legacy)
       ...(beforeCommitId && { beforeCommitId }), // Add beforeCommitId for VizHub integration
     };
     // Use type assertion to extend the message with diffData
@@ -476,35 +474,3 @@ export const appendLineToFile = (
 
   shareDBDoc.submitOp(diff(shareDBDoc.data, newDocState));
 };
-
-/**
- * Undoes the last AI edit by restoring files and removing the AI message
- */
-export const undoAIEdit = (
-  shareDBDoc: ShareDBDoc<VizContent>,
-  chatId: VizChatId,
-  messageId: string,
-  beforeFiles: VizFiles,
-) => {
-  const chat = shareDBDoc.data.chats[chatId];
-  const messages = chat.messages.filter(
-    (msg) => msg.id !== messageId,
-  );
-
-  const op = diff(shareDBDoc.data, {
-    ...shareDBDoc.data,
-    files: beforeFiles,
-    chats: {
-      ...shareDBDoc.data.chats,
-      [chatId]: {
-        ...chat,
-        messages,
-        updatedAt: dateToTimestamp(new Date()),
-      },
-    },
-    // Trigger a re-run
-    runId: generateRunId(),
-  });
-
-  shareDBDoc.submitOp(op);
-};

package/src/server/aiChatHandler/index.ts

@@ -163,7 +163,6 @@ const processAIRequestAsync = async ({
         shareDBDoc,
         chatId,
         editResult.diffData,
-        (editResult as any).beforeFiles, // Pass the beforeFiles snapshot for undo (legacy)
         beforeCommitId, // Pass the commit ID before AI changes (for VizHub integration)
       );
     }

package/src/server/aiChatHandler/llmStreaming.ts

@@ -77,9 +77,9 @@ export const createLLMFunction = ({
 
     // Create OpenRouter client for reasoning token support
     const openRouterClient = new OpenAI({
-      apiKey: process.env.VIZHUB_EDIT_WITH_AI_API_KEY,
+      apiKey: process.env.VZCODE_EDIT_WITH_AI_API_KEY,
       baseURL:
-        process.env.VIZHUB_EDIT_WITH_AI_BASE_URL ||
+        process.env.VZCODE_EDIT_WITH_AI_BASE_URL ||
         'https://openrouter.ai/api/v1',
       defaultHeaders: {
         'HTTP-Referer': 'https://vizhub.com',
@@ -256,7 +256,7 @@ export const createLLMFunction = ({
     // Stream the response with reasoning tokens
     const modelName =
       model ||
-      process.env.VIZHUB_EDIT_WITH_AI_MODEL_NAME ||
+      process.env.VZCODE_EDIT_WITH_AI_MODEL_NAME ||
       'anthropic/claude-3.5-sonnet';
 
     // Configure reasoning tokens based on enableReasoningTokens flag

package/src/server/index.ts

@@ -14,7 +14,7 @@ import { computeInitialDocument } from './computeInitialDocument.js';
 import { handleAIAssist } from './handleAIAssist.js';
 import { handleAICopilot } from './handleAICopilot.js';
 import { handleAIChatMessage } from './handleAIChatMessage.js';
-import { handleAIChatUndo } from './handleAIChatUndo.js';
+
 import { isDirectory } from './isDirectory.js';
 import { createToken } from './livekit.js';
 import './setupEnv.js';
@@ -142,15 +142,6 @@ app.post(
   }),
 );
 
-// Handle AI Chat Undo requests.
-app.post(
-  '/ai-chat-undo',
-  bodyParser.json(),
-  handleAIChatUndo({
-    shareDBDoc,
-  }),
-);
-
 // Livekit Token Generator
 app.get('/livekit-token', async (req, res) => {
   const { room, username } = req.query;

package/src/server/aiChatHandler/undoHandler.ts

@@ -1,97 +0,0 @@
-import { undoAIEdit } from './chatOperations.js';
-import { handleError } from './errorHandling.js';
-import { ShareDBDoc } from '../../types.js';
-import { VizContent } from '@vizhub/viz-types';
-
-const DEBUG = false;
-
-/**
- * Validates incoming request data for AI chat undo
- */
-const validateUndoRequest = (req, res) => {
-  const { chatId, messageId } = req.body;
-
-  if (!chatId || typeof chatId !== 'string') {
-    res.status(400).json({
-      error:
-        'Invalid request: chatId is required and must be a string',
-    });
-    return false;
-  }
-
-  if (!messageId || typeof messageId !== 'string') {
-    res.status(400).json({
-      error:
-        'Invalid request: messageId is required and must be a string',
-    });
-    return false;
-  }
-
-  return true;
-};
-
-export const handleAIChatUndo =
-  ({
-    shareDBDoc,
-  }: {
-    shareDBDoc: ShareDBDoc<VizContent>;
-  }) =>
-  async (req: any, res: any) => {
-    const { chatId, messageId } = req.body;
-
-    if (DEBUG) {
-      console.log(
-        '[handleAIChatUndo] chatId:',
-        chatId,
-        'messageId:',
-        messageId,
-        'shareDBDoc:',
-        shareDBDoc,
-      );
-    }
-
-    // Validate request
-    if (!validateUndoRequest(req, res)) {
-      return;
-    }
-
-    try {
-      const chat = shareDBDoc.data.chats?.[chatId];
-      if (!chat) {
-        res.status(404).json({
-          error: 'Chat not found',
-        });
-        return;
-      }
-
-      const message = chat.messages.find(
-        (msg) => msg.id === messageId,
-      );
-
-      if (
-        !message ||
-        message.role !== 'assistant' ||
-        !(message as any).beforeFiles
-      ) {
-        res.status(400).json({
-          error: 'Invalid message for undo',
-        });
-        return;
-      }
-
-      // Perform the undo operation
-      undoAIEdit(
-        shareDBDoc,
-        chatId,
-        messageId,
-        (message as any).beforeFiles,
-      );
-
-      res.status(200).json({ success: true });
-    } catch (error) {
-      if (DEBUG) {
-        console.error('[handleAIChatUndo] Error:', error);
-      }
-      handleError(shareDBDoc, chatId, error, res);
-    }
-  };

package/src/server/handleAIChatUndo.ts

@@ -1,2 +0,0 @@
-// Re-export the handleAIChatUndo from the new modular structure
-export { handleAIChatUndo } from './aiChatHandler/undoHandler.js';