@alpaca-editor/core 1.0.4018 → 1.0.4027

package/src/editor/ai/Agents.tsx

@@ -4,7 +4,13 @@ import { EditorAiTerminal } from "./EditorAiTerminal";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { Plus, X, History } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { getAgents, getAgent, getChatHistory, AgentChat, AgentChatMessage } from "../services/agentService";
+import {
+  getAgents,
+  getAgent,
+  getChatHistory,
+  AgentChat,
+  AgentChatMessage,
+} from "../services/agentService";
 import { Message } from "./AiTerminal";
 import {
   Popover,
@@ -21,22 +27,41 @@ interface TerminalInstance {
   messages?: Message[];
 }
 
-function convertAgentMessagesToTerminalMessages(agentMessages: AgentChatMessage[]): Message[] {
-  return agentMessages.map(msg => ({
-    id: msg.id,
-    content: msg.content,
-    name: msg.name,
-    role: msg.role,
-    tool_calls: msg.functionName ? [{
-      id: msg.toolCallId || msg.id,
-      displayName: msg.functionName,
-      function: {
-        name: msg.functionName,
-        arguments: msg.functionArguments || ""
-      }
-    }] : [],
-    tool_call_id: msg.toolCallId
-  }));
+function convertAgentMessagesToTerminalMessages(
+  agentMessages: AgentChatMessage[],
+): Message[] {
+  return (
+    agentMessages
+      // Keep all messages including tool results for complete conversation context
+      .map((msg) => ({
+        id: msg.id,
+        content: msg.content,
+        name: msg.name,
+        role: msg.role,
+        tool_calls:
+          msg.toolCalls?.map((toolCall) => ({
+            id: toolCall.toolCallId,
+            displayName: toolCall.functionName,
+            function: {
+              name: toolCall.functionName,
+              arguments: toolCall.functionArguments || "",
+            },
+          })) || [],
+        tool_call_id: msg.toolCallId,
+      }))
+  );
+}
+
+function formatDateToLocalTime(dateString: string): string {
+  // Ensure the date string is treated as UTC if it doesn't have timezone info
+  const normalizedDate =
+    dateString.includes("Z") ||
+    dateString.includes("+") ||
+    dateString.includes("-", 19)
+      ? dateString
+      : dateString + "Z";
+
+  return new Date(normalizedDate).toLocaleString();
 }
 
 export function Agents({
@@ -58,39 +83,41 @@ export function Agents({
     loadAgentsFromBackend();
   }, []);
 
-
-
   const loadAgentsFromBackend = async () => {
     try {
       setLoadingAgents(true);
-      
+
       // Load active agents
       const activeAgentsResult = await getAgents("active");
-      
+
       // Load inactive agents for history
       const inactiveAgentsResult = await getChatHistory("completed", 20);
-      
+
       if (activeAgentsResult.type === "success" && activeAgentsResult.data) {
         const activeAgents = activeAgentsResult.data;
-        
+
         // Create terminals for active agents
         const activeTerminals: TerminalInstance[] = await Promise.all(
           activeAgents.map(async (agent, index) => {
             // Load messages for each active agent
             const agentWithMessages = await loadAgentMessages(agent.id);
-            
+
             return {
               id: `agent-${agent.id}`,
               title: agent.name || `Agent ${index + 1}`,
               agentId: agent.id,
               options: initialOptions,
-              messages: agentWithMessages?.messages ? convertAgentMessagesToTerminalMessages(agentWithMessages.messages) : []
+              messages: agentWithMessages?.messages
+                ? convertAgentMessagesToTerminalMessages(
+                    agentWithMessages.messages,
+                  )
+                : [],
             };
-          })
+          }),
         );
-        
+
         setTerminals(activeTerminals);
-        
+
         // Set the first active terminal as active, or create a new one if none exist
         if (activeTerminals.length > 0) {
           setActiveTerminalId(activeTerminals[0]!.id);
@@ -106,11 +133,13 @@ export function Agents({
           nextTerminalNumber.current++;
         }
       }
-      
-      if (inactiveAgentsResult.type === "success" && inactiveAgentsResult.data) {
+
+      if (
+        inactiveAgentsResult.type === "success" &&
+        inactiveAgentsResult.data
+      ) {
         setInactiveAgents(inactiveAgentsResult.data);
       }
-      
     } catch (error) {
       console.error("Failed to load agents:", error);
       // Create a default terminal on error
@@ -127,7 +156,9 @@ export function Agents({
     }
   };
 
-  const loadAgentMessages = async (agentId: string): Promise<AgentChat | null> => {
+  const loadAgentMessages = async (
+    agentId: string,
+  ): Promise<AgentChat | null> => {
     try {
       const result = await getAgent(agentId);
       if (result.type === "success" && result.data) {
@@ -170,8 +201,8 @@ export function Agents({
 
   const openAgentFromHistory = async (agent: AgentChat) => {
     // Check if this agent is already open as a terminal
-    const existingTerminal = terminals.find(t => t.agentId === agent.id);
-    
+    const existingTerminal = terminals.find((t) => t.agentId === agent.id);
+
     if (existingTerminal) {
       // Switch to existing terminal
       setActiveTerminalId(existingTerminal.id);
@@ -181,14 +212,16 @@ export function Agents({
 
     // Load the agent with messages
     const agentWithMessages = await loadAgentMessages(agent.id);
-    
+
     // Create new terminal for this agent
     const newTerminal: TerminalInstance = {
       id: `agent-${agent.id}`,
       title: agent.name,
       agentId: agent.id,
       options: initialOptions,
-      messages: agentWithMessages?.messages ? convertAgentMessagesToTerminalMessages(agentWithMessages.messages) : []
+      messages: agentWithMessages?.messages
+        ? convertAgentMessagesToTerminalMessages(agentWithMessages.messages)
+        : [],
     };
 
     setTerminals((prev) => [...prev, newTerminal]);
@@ -238,7 +271,10 @@ export function Agents({
 
         {/* History Popover */}
         <div className="flex items-center px-1">
-          <Popover open={historyPopoverOpen} onOpenChange={setHistoryPopoverOpen}>
+          <Popover
+            open={historyPopoverOpen}
+            onOpenChange={setHistoryPopoverOpen}
+          >
             <PopoverTrigger asChild>
               <SimpleIconButton
                 onClick={() => {}}
@@ -248,7 +284,7 @@ export function Agents({
               />
             </PopoverTrigger>
             <PopoverContent className="w-64 p-0" align="end">
-              <div className="px-3 py-2 text-xs font-medium text-gray-500 border-b border-gray-100">
+              <div className="border-b border-gray-100 px-3 py-2 text-xs font-medium text-gray-500">
                 Agent History
               </div>
               <div className="max-h-80 overflow-y-auto">
@@ -260,17 +296,17 @@ export function Agents({
                   inactiveAgents.map((agent) => (
                     <div
                       key={agent.id}
-                      className="cursor-pointer px-3 py-2 text-xs hover:bg-gray-50 border-b border-gray-50"
+                      className="cursor-pointer border-b border-gray-50 px-3 py-2 text-xs hover:bg-gray-50"
                       onClick={() => openAgentFromHistory(agent)}
                     >
-                      <div className="font-medium text-gray-900 truncate">
+                      <div className="truncate font-medium text-gray-900">
                         {agent.name}
                       </div>
-                      <div className="text-gray-500 truncate">
+                      <div className="truncate text-gray-500">
                         {agent.profileName}
                       </div>
-                      <div className="text-gray-400 text-xs">
-                        {new Date(agent.updatedDate).toLocaleString()}
+                      <div className="text-xs text-gray-400">
+                        {formatDateToLocalTime(agent.updatedDate)}
                       </div>
                     </div>
                   ))
@@ -306,12 +342,20 @@ export function Agents({
               activeTerminalId === terminal.id ? "block" : "hidden",
             )}
           >
-            <EditorAiTerminal 
+            <EditorAiTerminal
               options={{
                 ...terminal.options,
                 // Pass the pre-loaded messages to the terminal
-                initialMessages: terminal.messages
-              }} 
+                initialMessages: terminal.messages,
+              }}
+              onAgentNameUpdate={(name) => {
+                // Update the terminal title when agent name is updated
+                setTerminals((prev) =>
+                  prev.map((t) =>
+                    t.id === terminal.id ? { ...t, title: name } : t,
+                  ),
+                );
+              }}
             />
           </div>
         ))}

package/src/editor/ai/AiResponseMessage.tsx

@@ -1,9 +1,16 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import JSONPretty from "react-json-pretty";
 
 import { useEditContext } from "../client/editContext";
 import { EditOperation } from "../../types";
 import { Message } from "./AiTerminal";
-import { AiToolCall } from "./AiToolCall";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
+import { SimpleTabs, Tab } from "../ui/SimpleTabs";
 
 export function AiResponseMessage({
   messages,
@@ -22,6 +29,27 @@ export function AiResponseMessage({
     undefined,
   );
 
+  // Store tool calls to preserve them during streaming
+  const [preservedToolCalls, setPreservedToolCalls] = useState<{
+    [messageIndex: number]: any[];
+  }>({});
+
+  console.log(messages);
+
+  // Update preserved tool calls when messages change
+  useEffect(() => {
+    const newPreservedToolCalls = { ...preservedToolCalls };
+
+    messages.forEach((message, index) => {
+      if (message.tool_calls && message.tool_calls.length > 0) {
+        // Store non-empty tool calls
+        newPreservedToolCalls[index] = message.tool_calls;
+      }
+    });
+
+    setPreservedToolCalls(newPreservedToolCalls);
+  }, [messages]);
+
   const reversedEditOperations = [...editOperations].reverse();
 
   const canReject =
@@ -32,32 +60,165 @@ export function AiResponseMessage({
         !editContext.editHistory[index]?.canUndo,
     ) === undefined;
 
+  // Helper function to render JSON or text
+  const renderJsonOrText = (json: string) => {
+    try {
+      const parsed = JSON.parse(json);
+      return (
+        <div className="font-mono text-xs whitespace-pre-wrap">
+          <pre className="break-words whitespace-pre-wrap">
+            {JSON.stringify(parsed, null, 2)}
+          </pre>
+        </div>
+      );
+    } catch (e) {
+      return (
+        <div className="font-mono text-xs break-words whitespace-pre-wrap">
+          {json}
+        </div>
+      );
+    }
+  };
+
+  // Helper function to create tabs for a tool call
+  const createToolCallTabs = (
+    toolCall: any,
+    result: Message | undefined,
+  ): Tab[] => {
+    const tabs: Tab[] = [
+      {
+        id: `input-${toolCall.id}`,
+        label: "Input",
+        content: (
+          <div className="max-h-96 overflow-auto p-2">
+            <div className="mb-1 text-sm font-semibold text-gray-700">
+              Arguments:
+            </div>
+            <div className="text-xs">
+              {renderJsonOrText(toolCall.function.arguments)}
+            </div>
+          </div>
+        ),
+      },
+    ];
+
+    if (result) {
+      tabs.push({
+        id: `output-${toolCall.id}`,
+        label: "Output",
+        content: (
+          <div className="max-h-96 overflow-auto p-2">
+            <div className="mb-1 text-sm font-semibold text-gray-700">
+              Result:
+            </div>
+            <div className="text-xs">
+              {renderJsonOrText(result.content || "")}
+            </div>
+          </div>
+        ),
+      });
+    }
+
+    return tabs;
+  };
+
+  // Helper function to create tool call popover content
+  const ToolCallPopover = ({
+    toolCall,
+    result,
+  }: {
+    toolCall: any;
+    result: Message | undefined;
+  }) => {
+    const [activeTab, setActiveTab] = useState(0);
+    const tabs = createToolCallTabs(toolCall, result);
+
+    return (
+      <div className="w-96">
+        <div className="mb-3 border-b border-gray-200 pb-2">
+          <div className="text-sm font-semibold text-gray-800">
+            {toolCall.displayName || toolCall.function.name}
+          </div>
+        </div>
+        <SimpleTabs
+          tabs={tabs}
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          className="mb-3 border-b border-gray-200"
+          tabClassName="text-xs"
+        />
+      </div>
+    );
+  };
+
+  // Helper function to find tool result by tool call id
+  const findToolResult = (toolCallId: string): Message | undefined => {
+    return messages.find(
+      (msg) => msg.role === "tool" && msg.tool_call_id === toolCallId,
+    );
+  };
+
   return (
     <div>
       {messages
         .filter((x) => x.role !== "tool")
-        .map((message, index) => (
-          <div key={index}>
-            <div
-              dangerouslySetInnerHTML={{
-                __html: message.formattedContent || message.content || "",
-              }}
-            />
-            {message.tool_calls && message.tool_calls.length > 0 && (
-              <div className="text-xs text-gray-400">
-                {message.tool_calls.map((x, index) => (
-                  <AiToolCall
-                    toolCall={x}
-                    key={index}
-                    result={messages.find(
-                      (m) => m.role === "tool" && m.tool_call_id === x.id,
-                    )}
-                  />
-                ))}
-              </div>
-            )}
-          </div>
-        ))}
+        .map((message, filteredIndex) => {
+          // Find the original index of this message in the unfiltered array
+          const originalIndex = messages.findIndex((m) => m.id === message.id);
+          // Use preserved tool calls if current message has empty tool calls
+          const toolCalls =
+            message.tool_calls && message.tool_calls.length > 0
+              ? message.tool_calls
+              : preservedToolCalls[originalIndex] || [];
+          return (
+            <div key={filteredIndex}>
+              {toolCalls.length > 0 && (
+                <div className="mb-2 flex flex-wrap gap-2">
+                  {toolCalls.map((toolCall, toolIndex) => {
+                    const toolResult = findToolResult(toolCall.id);
+                    return (
+                      <Popover
+                        key={toolIndex}
+                        enableIframeClickDetection={false}
+                      >
+                        <PopoverTrigger asChild>
+                          <div className="inline-flex cursor-pointer items-center gap-1 text-xs text-gray-500 hover:text-gray-700">
+                            <i className="pi pi-wrench text-xs" />
+                            <span>
+                              {toolCall?.displayName ||
+                                toolCall?.function?.name ||
+                                "tool call"}
+                            </span>
+                          </div>
+                        </PopoverTrigger>
+                        <PopoverContent
+                          className="p-3"
+                          align="start"
+                          side="bottom"
+                          sideOffset={8}
+                          onMouseDown={(e) => e.stopPropagation()}
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <div className="max-h-[500px] overflow-hidden">
+                            <ToolCallPopover
+                              toolCall={toolCall}
+                              result={toolResult}
+                            />
+                          </div>
+                        </PopoverContent>
+                      </Popover>
+                    );
+                  })}
+                </div>
+              )}
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: message.formattedContent || message.content || "",
+                }}
+              />
+            </div>
+          );
+        })}
       {/* <div
         dangerouslySetInnerHTML={{
           __html: responseText.replaceAll("\\n", "<br>"),