vzcode 1.56.0 → 1.58.0

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

@@ -15,28 +15,27 @@ const defaultAIChatEndpoint = '/api/ai-chat/';
 
 const DEBUG = false;
 
-const showSuggestedRequests = false;
+const showSuggestedRequests = true;
 
 export const AIChat = () => {
-  const { aiChatMessage, setAIChatMessage } =
-    useContext(VZCodeContext);
-
-  const [isLoading, setIsLoading] = useState(false);
-  const [currentChatId] = useState(() => uuidv4());
-  const [errorMessage, setErrorMessage] = useState<
-    string | null
-  >(null);
-
   const {
     aiChatFocused,
     content,
     aiChatEndpoint = defaultAIChatEndpoint,
     aiChatOptions = {},
     aiChatMode,
+    aiChatMessage,
+    isLoading,
+    currentChatId,
+    aiErrorMessage,
     setAIChatMode,
     autoForkAndRetryAI,
     clearStoredAIPrompt,
     getStoredAIPrompt,
+    setAIChatMessage,
+    handleSendMessage,
+    setIsLoading,
+    setAIErrorMessage,
   } = useContext(VZCodeContext);
 
   // Get current chat data from content
@@ -58,112 +57,6 @@ export const AIChat = () => {
   // Check if this is the first time opening the chat (no messages)
   const isEmptyState = rawMessages.length === 0;
 
-  const handleSendMessage = useCallback(
-    async (messageToSend?: string) => {
-      DEBUG &&
-        console.log(
-          'AIChat: handleSendMessage called with:',
-          messageToSend,
-          'aiChatMessage:',
-          aiChatMessage,
-        );
-      const messageContent = messageToSend || aiChatMessage;
-
-      if (
-        !messageContent ||
-        typeof messageContent !== 'string' ||
-        !messageContent.trim() ||
-        isLoading
-      ) {
-        return;
-      }
-
-      const currentPrompt = aiChatMessage.trim();
-      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
-      try {
-        const response = await fetch(aiChatEndpoint, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            ...aiChatOptions,
-            vizId: aiChatOptions.vizId,
-            content: messageContent.trim(),
-            chatId: currentChatId,
-            mode: aiChatMode,
-          }),
-        });
-
-        if (!response.ok) {
-          throw new Error(
-            `HTTP error! status: ${response.status}`,
-          );
-        }
-
-        // 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
-        ) {
-          const errorMessage = responseData.error.message;
-
-          // Check if this is the specific permission error that should trigger auto-fork
-          if (
-            errorMessage ===
-            'You do not have permission to use AI chat on this visualization. Only users with edit access can use this feature. Fork the viz to edit it.'
-          ) {
-            // Trigger auto-fork instead of showing error
-            try {
-              await autoForkAndRetryAI?.(
-                currentPrompt,
-                aiChatMode,
-              );
-              // If we reach here, the fork was successful and redirect should happen
-              return;
-            } catch (forkError) {
-              console.error('Auto-fork failed:', forkError);
-              setErrorMessage(
-                'Failed to fork visualization. Please try forking manually.',
-              );
-              return;
-            }
-          }
-
-          // For other errors, show the error message
-          setErrorMessage(errorMessage);
-          return;
-        }
-
-        // The backend handles all ShareDB operations for successful responses
-      } catch (error) {
-        console.error('Error getting AI response:', error);
-        setErrorMessage(
-          'Failed to send message. Please try again.',
-        );
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [
-      aiChatMessage,
-      isLoading,
-      aiChatEndpoint,
-      aiChatOptions,
-      currentChatId,
-      aiChatMode,
-      autoForkAndRetryAI,
-    ],
-  );
-
   // Check for stored AI prompt on component mount (post-fork restoration)
   useEffect(() => {
     DEBUG &&
@@ -214,159 +107,158 @@ export const AIChat = () => {
 
   return (
     <div className="ai-chat-container">
-      <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">
-              Edit with AI
-            </h3>
-            <div className="ai-chat-empty-text">
-              How can I help you?
-            </div>
-            {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',
-                          )
-                        }
-                      >
-                        "Explain how this works"
-                      </button>
-                      <button
-                        className="ai-chat-suggested-prompt"
-                        onClick={() =>
-                          handleSendMessage(
-                            '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={() =>
-                          handleSendMessage(
-                            'What does this function do?',
-                          )
-                        }
-                      >
-                        "What does this function do?"
-                      </button>
-                      <button
-                        className="ai-chat-suggested-prompt"
-                        onClick={() =>
-                          handleSendMessage(
-                            '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={() =>
-                          handleSendMessage(
-                            'Change the circles to squares',
-                          )
-                        }
-                      >
-                        "Change the circles to squares"
-                      </button>
-                      <button
-                        className="ai-chat-suggested-prompt"
-                        onClick={() =>
-                          handleSendMessage(
-                            'Add a button that toggles the animation',
-                          )
-                        }
-                      >
-                        "Add a button that toggles the
-                        animation"
-                      </button>
-                      <button
-                        className="ai-chat-suggested-prompt"
-                        onClick={() =>
-                          handleSendMessage(
-                            'Fix the CSS so the layout is responsive',
-                          )
-                        }
-                      >
-                        "Fix the CSS so the layout is
-                        responsive"
-                      </button>
-                      <button
-                        className="ai-chat-suggested-prompt"
-                        onClick={() =>
-                          handleSendMessage(
-                            'Refactor this function to use async/await',
-                          )
-                        }
-                      >
-                        "Refactor this function to use
-                        async/await"
-                      </button>
-                    </div>
-                  </>
-                )}
-              </div>
-            )}
-            {showSuggestedRequests && (
+      <div className="ai-chat-content">
+        <div className="ai-chat-messages-container">
+          {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">
-                {aiChatMode === 'ask'
-                  ? 'Type your question below to get started!'
-                  : 'Type your edit request below to get started!'}
+                How can I help you?
               </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>
+              {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',
+                            )
+                          }
+                        >
+                          "Explain how this works"
+                        </button>
+                        <button
+                          className="ai-chat-suggested-prompt"
+                          onClick={() =>
+                            handleSendMessage(
+                              '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={() =>
+                            handleSendMessage(
+                              'What does this function do?',
+                            )
+                          }
+                        >
+                          "What does this function do?"
+                        </button>
+                        <button
+                          className="ai-chat-suggested-prompt"
+                          onClick={() =>
+                            handleSendMessage(
+                              '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={() =>
+                            handleSendMessage(
+                              'Change the circles to squares',
+                            )
+                          }
+                        >
+                          "Change the circles to squares"
+                        </button>
+                        <button
+                          className="ai-chat-suggested-prompt"
+                          onClick={() =>
+                            handleSendMessage(
+                              'Add a button that toggles the animation',
+                            )
+                          }
+                        >
+                          "Add a button that toggles the
+                          animation"
+                        </button>
+                        <button
+                          className="ai-chat-suggested-prompt"
+                          onClick={() =>
+                            handleSendMessage(
+                              'Fix the CSS so the layout is responsive',
+                            )
+                          }
+                        >
+                          "Fix the CSS so the layout is
+                          responsive"
+                        </button>
+                        <button
+                          className="ai-chat-suggested-prompt"
+                          onClick={() =>
+                            handleSendMessage(
+                              'Refactor this function to use async/await',
+                            )
+                          }
+                        >
+                          "Refactor this function to use
+                          async/await"
+                        </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>
-          </div>
-        )}
+          ) : (
+            <MessageList
+              messages={messages}
+              aiStatus={aiStatus}
+              isLoading={isLoading}
+              chatId={currentChatId}
+              aiScratchpad={aiScratchpad}
+            />
+          )}
+          {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>
+          )}
+        </div>
+      </div>
+      <div className="ai-chat-input-fixed">
         <ChatInput
           aiChatMessage={aiChatMessage}
           setAIChatMessage={setAIChatMessage}

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

@@ -5,6 +5,26 @@
   padding: 0;
 }
 
+.ai-chat-content {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.ai-chat-messages-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+  padding-bottom: 0;
+}
+
+.ai-chat-input-fixed {
+  flex-shrink: 0;
+  padding: 10px;
+  padding-top: 0;
+}
+
 .ai-chat-empty {
   flex: 1;
   display: flex;
@@ -365,6 +385,7 @@
 .ai-chat-input-container {
   border-top: 1px solid var(--vh-color-neutral-02);
   padding-top: 10px;
+  background: var(--vh-color-neutral-01);
 }
 
 .ai-chat-mode-toggle {
@@ -427,11 +448,12 @@
     border: 1px solid var(--vh-color-neutral-03) !important;
     color: var(--vh-color-neutral-04) !important;
     border-radius: 8px;
-    padding: 8px 10px;
+    padding: 10px 12px;
     font-size: 14px;
     font-family: var(--vzcode-font-family);
     resize: none;
-    min-height: 36px;
+    min-height: 48px;
+    line-height: 1.4;
 
     &:focus {
       outline: none !important;
@@ -450,37 +472,56 @@
     }
   }
 
-  .ai-chat-input-info {
+  .ai-chat-input-footer {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     font-size: 12px;
     color: var(--vh-color-neutral-03);
-    margin-bottom: 6px;
+    min-height: 40px; // Prevent layout jumping
 
     .ai-chat-hint {
       font-style: italic;
+      flex: 1;
     }
   }
 
   .ai-chat-send-button {
-    background: var(--vh-color-primary-01);
-    border: none;
-    color: white;
     border-radius: 8px;
     padding: 8px 16px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
-    transition: background-color 0.2s ease;
-    align-self: flex-end;
+    transition: all 0.2s ease;
     min-width: 80px;
+    flex-shrink: 0;
 
-    &:hover:not(:disabled) {
-      background: var(--vh-color-primary-02);
+    &.btn-primary {
+      background: var(--vh-color-primary-01);
+      border-color: var(--vh-color-primary-01);
+      color: white;
+
+      &:hover:not(:disabled) {
+        background: var(--vh-color-primary-02);
+        border-color: var(--vh-color-primary-02);
+      }
+    }
+
+    &.btn-outline-secondary {
+      background: transparent;
+      border-color: var(--vh-color-neutral-03);
+      color: var(--vh-color-neutral-03);
+
+      &:hover:not(:disabled) {
+        background: var(--vh-color-neutral-03);
+        color: var(--vh-color-neutral-01);
+      }
     }
 
     &:disabled {
       background: var(--vh-color-neutral-03);
+      border-color: var(--vh-color-neutral-03);
+      color: var(--vh-color-neutral-02);
       cursor: not-allowed;
     }
   }

package/src/server/aiChatHandler/chatOperations.ts

@@ -256,7 +256,8 @@ export const addDiffToAIMessage = (
   shareDBDoc: ShareDBDoc<VizContent>,
   chatId: VizChatId,
   diffData: any,
-  beforeFiles?: VizFiles, // Optional snapshot for undo functionality
+  beforeFiles?: VizFiles, // Optional snapshot for undo functionality (legacy)
+  beforeCommitId?: string, // Commit ID before AI changes for VizHub integration
 ) => {
   const chat = shareDBDoc.data.chats[chatId];
   const messages = [...chat.messages];
@@ -270,7 +271,8 @@ export const addDiffToAIMessage = (
     const newMessage = {
       ...messages[lastAIMessageIndex],
       diffData,
-      ...(beforeFiles && { beforeFiles }), // Add beforeFiles only if provided
+      ...(beforeFiles && { beforeFiles }), // Add beforeFiles only if provided (legacy)
+      ...(beforeCommitId && { beforeCommitId }), // Add beforeCommitId for VizHub integration
     };
     // Use type assertion to extend the message with diffData
     (messages[lastAIMessageIndex] as any) = newMessage;

package/src/server/aiChatHandler/index.ts

@@ -23,10 +23,12 @@ export const handleAIChatMessage =
     shareDBDoc,
     createAIEditLocalPresence,
     onCreditDeduction,
+    getCurrentCommitId,
   }: {
     shareDBDoc: ShareDBDoc<VizContent>;
     createAIEditLocalPresence: () => any;
     onCreditDeduction?: any;
+    getCurrentCommitId?: () => string | null;
   }) =>
   async (req: any, res: any) => {
     const { content, chatId, mode = 'edit' } = req.body;
@@ -52,6 +54,11 @@ export const handleAIChatMessage =
       ensureChatsExist(shareDBDoc);
       ensureChatExists(shareDBDoc, chatId);
 
+      // Capture the current commit ID before making changes (for VizHub integration)
+      const beforeCommitId = getCurrentCommitId
+        ? getCurrentCommitId()
+        : null;
+
       // Add user message to chat
       addUserMessage(shareDBDoc, chatId, content);
 
@@ -92,7 +99,8 @@ export const handleAIChatMessage =
           shareDBDoc,
           chatId,
           editResult.diffData,
-          (editResult as any).beforeFiles, // Pass the beforeFiles snapshot for undo (only available for edit mode)
+          (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

@@ -45,10 +45,15 @@ export const createLLMFunction = ({
   shareDBDoc,
   createAIEditLocalPresence,
   chatId,
+  // Feature flag to enable/disable reasoning tokens.
+  // When false, reasoning tokens are not requested from the API
+  // and reasoning content is not processed in the streaming response.
+  enableReasoningTokens = false,
 }: {
   shareDBDoc: ShareDBDoc<VizContent>;
   createAIEditLocalPresence: () => any;
   chatId: VizChatId;
+  enableReasoningTokens?: boolean;
 }) => {
   return async (fullPrompt: string) => {
     const localPresence = enableStreamingEditing
@@ -197,21 +202,29 @@ export const createLLMFunction = ({
     const modelName =
       process.env.VIZHUB_EDIT_WITH_AI_MODEL_NAME ||
       'anthropic/claude-3.5-sonnet';
-    const stream = await (
-      openRouterClient.chat.completions.create as any
-    )({
+
+    // Configure reasoning tokens based on enableReasoningTokens flag
+    const requestConfig: any = {
       model: modelName,
       messages: [{ role: 'user', content: fullPrompt }],
-      reasoning: {
-        effort: 'medium',
-        exclude: false,
-      },
       provider: {
-        sort: 'throughput',
+        sort: 'price',
       },
       usage: { include: true },
       stream: true,
-    });
+    };
+
+    // Only include reasoning configuration if reasoning tokens are enabled
+    if (enableReasoningTokens) {
+      requestConfig.reasoning = {
+        effort: 'low',
+        exclude: false,
+      };
+    }
+
+    const stream = await (
+      openRouterClient.chat.completions.create as any
+    )(requestConfig);
 
     let reasoningStarted = false;
     let contentStarted = false;
@@ -219,8 +232,8 @@ export const createLLMFunction = ({
     for await (const chunk of stream) {
       const delta = chunk.choices[0]?.delta as any; // Type assertion for OpenRouter-specific reasoning fields
 
-      if (delta?.reasoning) {
-        // Handle reasoning tokens (thinking)
+      if (delta?.reasoning && enableReasoningTokens) {
+        // Handle reasoning tokens (thinking) - only if enabled
         if (!reasoningStarted) {
           reasoningStarted = true;
           updateAIStatus(shareDBDoc, chatId, 'Thinking...');