@alpaca-editor/core 1.0.4135 → 1.0.4140

package/src/editor/ai/ToolCallDisplay.tsx

@@ -2,22 +2,40 @@ import React, { useState } from "react";
 import { JsonView, defaultStyles } from "react-json-view-lite";
 import "react-json-view-lite/dist/index.css";
 
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "../../components/ui/popover";
-import { SimpleTabs, Tab } from "../ui/SimpleTabs";
 import { Spinner } from "../ui/Spinner";
-import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { Button } from "../../components/ui/button";
 import { approveToolCall, rejectToolCall } from "../services/agentService";
+
+// Custom dark theme styles for JSON view
+const darkJsonStyles = {
+  ...defaultStyles,
+  container: "dark-json-container",
+  label: "dark-json-label",
+  punctuation: "dark-json-punctuation",
+  stringValue: "dark-json-string",
+  numberValue: "dark-json-number",
+  booleanValue: "dark-json-boolean",
+  nullValue: "dark-json-null",
+  undefinedValue: "dark-json-undefined",
+};
+
+// JSON view light theme CSS
+const JsonLightThemeStyles = () => (
+  <style>{`
+    .dark-json-container { color: #1f2937; }
+    .dark-json-label { color: #2563eb; font-weight: 500; }
+    .dark-json-punctuation { color: #6b7280; }
+    .dark-json-string { color: #059669; }
+    .dark-json-number { color: #d97706; }
+    .dark-json-boolean { color: #7c3aed; }
+    .dark-json-null { color: #dc2626; }
+    .dark-json-undefined { color: #dc2626; }
+  `}</style>
+);
 import {
-  X,
   FileText,
   Search,
   Code,
-  Terminal,
   FolderOpen,
   FileSearch,
   Trash2,
@@ -27,6 +45,8 @@ import {
   Edit,
   FileEdit,
   Wrench,
+  ChevronDown,
+  ChevronRight,
 } from "lucide-react";
 
 // Function to get the appropriate icon for each tool
@@ -94,7 +114,8 @@ export interface BaseToolCall {
 
 export interface AgentToolCall {
   id: string;
-  messageId: string;
+  messageId: string; // UI message ID (for display association)
+  dbMessageId?: string; // Database message ID (for approval/rejection)
   toolCallId: string;
   functionName: string;
   functionArguments: string;
@@ -144,10 +165,11 @@ const renderJsonOrText = (json: string | object) => {
   if (typeof json === "object" && json !== null) {
     return (
       <div className="font-mono text-xs" style={{ fontSize: "12px" }}>
+        <JsonLightThemeStyles />
         <JsonView
           data={json}
           shouldExpandNode={(level) => level < 2}
-          style={defaultStyles}
+          style={darkJsonStyles}
         />
       </div>
     );
@@ -174,10 +196,11 @@ const renderJsonOrText = (json: string | object) => {
 
     return (
       <div className="font-mono text-xs" style={{ fontSize: "12px" }}>
+        <JsonLightThemeStyles />
         <JsonView
           data={parsed}
           shouldExpandNode={(level) => level < 2}
-          style={defaultStyles}
+          style={darkJsonStyles}
         />
       </div>
     );
@@ -191,10 +214,11 @@ const renderJsonOrText = (json: string | object) => {
 
       return (
         <div className="font-mono text-xs" style={{ fontSize: "12px" }}>
+          <JsonLightThemeStyles />
           <JsonView
             data={parsed}
             shouldExpandNode={(level) => level < 2}
-            style={defaultStyles}
+            style={darkJsonStyles}
           />
         </div>
       );
@@ -202,7 +226,7 @@ const renderJsonOrText = (json: string | object) => {
       console.log("Unescaping also failed:", e2);
       // If all parsing fails, display as plain text
       return (
-        <div className="font-mono text-xs break-words whitespace-pre-wrap">
+        <div className="font-mono text-xs break-words whitespace-pre-wrap text-gray-700">
           {jsonString}
         </div>
       );
@@ -210,81 +234,84 @@ const renderJsonOrText = (json: string | object) => {
   }
 };
 
-// Helper function to create tabs for a tool call
-const createToolCallTabs = (toolCall: BaseToolCall, result: string): Tab[] => {
-  const tabs: Tab[] = [
-    {
-      id: `input-${toolCall.id}`,
-      label: "Input",
-      content: (
-        <div className="h-[250px] w-full overflow-auto p-2">
-          <div className="text-xs">
-            {renderJsonOrText(toolCall.function?.arguments || "")}
-          </div>
-        </div>
-      ),
-    },
-  ];
-
-  // Add output tab if there's a result or error
-  if (result || toolCall.function?.error) {
-    const hasError = toolCall.function?.error;
-    tabs.push({
-      id: `output-${toolCall.id}`,
-      label: hasError ? "Error" : "Output",
-      content: (
-        <div className="h-[250px] w-full overflow-auto p-2">
-          {hasError ? (
-            <div className="rounded border-l-4 border-red-500 bg-red-50 p-3 text-xs text-red-600">
-              <div className="mb-1 font-medium">Tool Error:</div>
-              <div>{toolCall.function?.error}</div>
-            </div>
-          ) : (
-            <div className="text-xs">{renderJsonOrText(result || "")}</div>
-          )}
-        </div>
-      ),
-    });
-  }
+// Expandable panel component
+const ExpandablePanel = ({
+  title,
+  children,
+  defaultExpanded = false,
+}: {
+  title: string;
+  children: React.ReactNode;
+  defaultExpanded?: boolean;
+}) => {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
-  return tabs;
+  return (
+    <div className="border-b border-gray-200/60 last:border-b-0">
+      <div
+        className="flex cursor-pointer items-center gap-2 px-4 py-2.5 transition-colors hover:bg-white/60"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        {isExpanded ? (
+          <ChevronDown
+            size={14}
+            strokeWidth={1.5}
+            className="text-gray-500 transition-transform"
+          />
+        ) : (
+          <ChevronRight
+            size={14}
+            strokeWidth={1.5}
+            className="text-gray-500 transition-transform"
+          />
+        )}
+        <span className="text-xs font-semibold tracking-wide text-gray-600 uppercase">
+          {title}
+        </span>
+      </div>
+      {isExpanded && (
+        <div className="w-full overflow-auto px-4 pt-1 pb-4">{children}</div>
+      )}
+    </div>
+  );
 };
 
-// Helper function to create tool call popover content
-const ToolCallPopover = ({
+// Helper function to create expandable tool call details
+const ToolCallDetails = ({
   toolCall,
   result,
-  onClose,
 }: {
   toolCall: BaseToolCall;
   result?: string;
-  onClose: () => void;
 }) => {
-  const [activeTab, setActiveTab] = useState(0);
-  const tabs = createToolCallTabs(toolCall, result || "");
+  const hasError = toolCall.function?.error;
+  const hasOutput = result || hasError;
 
   return (
-    <div className="flex flex-col p-3">
-      <div className="mb-3 flex items-center justify-between border-b border-gray-200 px-2 pb-1">
-        <div className="flex items-center gap-2 text-sm font-semibold text-gray-800">
-          {getToolIcon(toolCall?.function?.name || "")}
-          <span>{toolCall.displayName || toolCall.function?.name}</span>
+    <div className="mt-2 ml-4 overflow-hidden rounded-lg border border-gray-200/80 bg-gradient-to-br from-gray-50 to-gray-50/30 shadow-sm">
+      <ExpandablePanel title="Input" defaultExpanded={!hasOutput}>
+        <div className="rounded-md border border-gray-200 bg-white p-3 text-xs shadow-sm">
+          {renderJsonOrText(toolCall.function?.arguments || "")}
         </div>
-        <SimpleIconButton
-          onClick={onClose}
-          icon={<X strokeWidth={1} size={16} />}
-          label="Close"
-          showTooltip={false}
-          size="small"
-        />
-      </div>
-      <SimpleTabs
-        tabs={tabs}
-        activeTab={activeTab}
-        setActiveTab={setActiveTab}
-        className="mb-3 border-b border-gray-200"
-        tabClassName="text-xs"
-      />
+      </ExpandablePanel>
+
+      {hasOutput && (
+        <ExpandablePanel
+          title={hasError ? "Error" : "Output"}
+          defaultExpanded={true}
+        >
+          {hasError ? (
+            <div className="rounded-md border-l-4 border-red-500 bg-red-50/80 p-3 text-xs text-red-700 shadow-sm">
+              <div className="mb-1.5 font-semibold">Tool Error:</div>
+              <div className="text-red-600">{toolCall.function?.error}</div>
+            </div>
+          ) : (
+            <div className="rounded-md border border-gray-200 bg-white p-3 text-xs shadow-sm">
+              {renderJsonOrText(result || "")}
+            </div>
+          )}
+        </ExpandablePanel>
+      )}
     </div>
   );
 };
@@ -301,7 +328,7 @@ export function ToolCallDisplay({
   }
 
   return (
-    <div className="mt-2 flex flex-col gap-2">
+    <div className="flex flex-col">
       {toolCalls.map((originalToolCall, toolIndex) => {
         const toolCall = normalizeToolCall(originalToolCall);
         const toolResult = toolCall.function?.result;
@@ -333,140 +360,146 @@ export function ToolCallDisplay({
 
         // Debug logging removed for performance
 
+        const isExpanded = openPopovers[popoverKey] || false;
+
         return (
           <div key={toolIndex}>
-            <Popover
-              enableIframeClickDetection={false}
-              open={openPopovers[popoverKey] || false}
-              onOpenChange={(open) => {
+            <div
+              className="group flex cursor-pointer items-center gap-1.5 rounded-md px-1 py-1 text-xs text-gray-600 transition-all hover:bg-gray-100/60 hover:text-gray-800"
+              onClick={() => {
                 setOpenPopovers((prev) => ({
                   ...prev,
-                  [popoverKey]: open,
+                  [popoverKey]: !prev[popoverKey],
                 }));
               }}
             >
-              <PopoverTrigger asChild>
-                <div className="flex items-center gap-2 text-xs text-gray-500">
-                  {isCompleted ? (
-                    <div
-                      className={`flex items-center ${toolCall.function?.error ? "text-red-500" : ""}`}
-                    >
-                      {getToolIcon(toolCall?.function?.name || "")}
-                    </div>
-                  ) : finalApprovalInfo && !hasApprovalStatus ? (
-                    <div className="flex items-center text-amber-600">
-                      {getToolIcon(toolCall?.function?.name || "")}
-                    </div>
-                  ) : finished ? (
-                    <div className="flex items-center opacity-50">
-                      {getToolIcon(toolCall?.function?.name || "")}
-                    </div>
-                  ) : (
-                    <Spinner size="xs" />
+              <div className="flex items-center transition-transform group-hover:scale-110">
+                {isExpanded ? (
+                  <ChevronDown
+                    size={14}
+                    strokeWidth={1.5}
+                    className="text-gray-500"
+                  />
+                ) : (
+                  <ChevronRight
+                    size={14}
+                    strokeWidth={1.5}
+                    className="text-gray-500"
+                  />
+                )}
+              </div>
+              {isCompleted ? (
+                <div
+                  className={`flex items-center transition-all ${toolCall.function?.error ? "text-red-500" : "text-green-600"}`}
+                >
+                  {getToolIcon(toolCall?.function?.name || "")}
+                </div>
+              ) : finalApprovalInfo && !hasApprovalStatus ? (
+                <div className="flex items-center text-amber-600 transition-all">
+                  {getToolIcon(toolCall?.function?.name || "")}
+                </div>
+              ) : finished ? (
+                <div className="flex items-center text-gray-400 opacity-60 transition-all">
+                  {getToolIcon(toolCall?.function?.name || "")}
+                </div>
+              ) : (
+                <Spinner size="xs" />
+              )}
+              <div className="inline-flex flex-1 items-center gap-2">
+                <span
+                  className={`font-medium transition-colors ${toolCall.function?.error ? "text-red-600" : ""}`}
+                >
+                  {/* Show clean function name without approval suffix */}
+                  {(
+                    originalFunctionName ||
+                    toolCall?.function?.name ||
+                    "tool call"
+                  )
+                    .replace(" (approved)", "")
+                    .replace(" (rejected)", "")
+                    .replace(" (pending approval)", "")}
+                  {toolCall.function?.error && (
+                    <span className="ml-1 text-red-500">(error)</span>
                   )}
-                  <div className="inline-flex items-center gap-2">
-                    <span
-                      className={`${toolCall.function?.error ? "text-red-500" : "hover:text-gray-700"} cursor-pointer`}
-                    >
-                      {/* Show clean function name without approval suffix */}
-                      {(
-                        originalFunctionName ||
-                        toolCall?.function?.name ||
-                        "tool call"
-                      )
-                        .replace(" (approved)", "")
-                        .replace(" (rejected)", "")
-                        .replace(" (pending approval)", "")}
-                      {toolCall.function?.error && " (error)"}
-                      {finalApprovalInfo && isApproved && (
-                        <span className="ml-2 text-xs font-medium text-green-600">
-                          ✓ Approved
-                        </span>
-                      )}
-                      {finalApprovalInfo && isRejected && (
-                        <span className="ml-2 text-xs font-medium text-red-600">
-                          ✗ Rejected
-                        </span>
-                      )}
-                      {finalApprovalInfo && isPending && (
-                        <span className="ml-2 text-xs font-medium text-amber-600">
-                          ⏸ Pending approval
-                        </span>
-                      )}
+                  {finalApprovalInfo && isApproved && (
+                    <span className="ml-2 inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-semibold text-green-700">
+                      <span>✓</span> Approved
                     </span>
-                  </div>
-                </div>
-              </PopoverTrigger>
-              <PopoverContent
-                className="w-[450px] p-0"
-                align="start"
-                side="bottom"
-                sideOffset={8}
-                onMouseDown={(e) => e.stopPropagation()}
-                onClick={(e) => e.stopPropagation()}
-              >
-                <ToolCallPopover
-                  toolCall={toolCall}
-                  result={toolResult}
-                  onClose={() => {
-                    setOpenPopovers((prev) => ({
-                      ...prev,
-                      [popoverKey]: false,
-                    }));
-                  }}
-                />
-              </PopoverContent>
-            </Popover>
+                  )}
+                  {finalApprovalInfo && isRejected && (
+                    <span className="ml-2 inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-0.5 text-[10px] font-semibold text-red-700">
+                      <span>✗</span> Rejected
+                    </span>
+                  )}
+                  {finalApprovalInfo && isPending && (
+                    <span className="ml-2 inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold text-amber-700">
+                      <span>⏸</span> Pending approval
+                    </span>
+                  )}
+                </span>
+              </div>
+            </div>
+            {isExpanded && (
+              <ToolCallDetails toolCall={toolCall} result={toolResult} />
+            )}
             {!isCompleted && finalApprovalInfo && !hasApprovalStatus && (
-              <div className="mt-2 rounded border">
-                <div className="border-b bg-amber-50 p-3">
-                  <div className="flex items-start gap-2">
+              <div className="mt-2 overflow-hidden rounded-lg border border-amber-200 bg-gradient-to-br from-amber-50 to-amber-50/30 shadow-sm">
+                <div className="border-b border-amber-200/60 bg-amber-50/80 p-3">
+                  <div className="flex items-start gap-3">
                     <div
-                      className={`mt-1.5 h-2 w-2 rounded-full ${
+                      className={`mt-1 h-2.5 w-2.5 rounded-full shadow-sm ${
                         finalApprovalInfo.riskLevel === "high"
-                          ? "bg-red-500"
+                          ? "bg-red-500 ring-2 ring-red-200"
                           : finalApprovalInfo.riskLevel === "medium"
-                            ? "bg-amber-500"
-                            : "bg-green-500"
+                            ? "bg-amber-500 ring-2 ring-amber-200"
+                            : "bg-green-500 ring-2 ring-green-200"
                       }`}
                     />
-                    <div>
-                      <div className="mb-1 text-xs font-medium text-gray-900">
+                    <div className="flex-1">
+                      <div className="mb-1.5 text-xs font-semibold text-gray-900">
                         Action requires approval
                       </div>
-                      <div className="text-xs text-gray-700">
+                      <div className="text-xs leading-relaxed text-gray-700">
                         {finalApprovalInfo.summary}
                       </div>
                       {finalApprovalInfo.riskLevel && (
                         <div
-                          className={`mt-1 text-xs font-medium ${
+                          className={`mt-2 inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-[10px] font-semibold ${
                             finalApprovalInfo.riskLevel === "high"
-                              ? "text-red-600"
+                              ? "bg-red-100 text-red-700"
                               : finalApprovalInfo.riskLevel === "medium"
-                                ? "text-amber-600"
-                                : "text-green-600"
+                                ? "bg-amber-100 text-amber-700"
+                                : "bg-green-100 text-green-700"
                           }`}
                         >
-                          Risk level: {finalApprovalInfo.riskLevel}
+                          <span className="font-normal">Risk:</span>
+                          <span className="uppercase">
+                            {finalApprovalInfo.riskLevel}
+                          </span>
                         </div>
                       )}
                     </div>
                   </div>
                 </div>
-                <div className="flex items-center justify-end gap-2 p-2">
+                <div className="flex items-center justify-end gap-2 bg-white/60 p-3">
                   <Button
                     size="sm"
                     variant="secondary"
                     onClick={async () => {
+                      // Use the dbMessageId from AgentToolCall if available, otherwise fall back to messageId or prop
+                      const actualMessageId = isAgentToolCall
+                        ? originalToolCall.dbMessageId ||
+                          originalToolCall.messageId
+                        : messageId;
                       console.log("🚫 Rejecting tool call:", {
                         agentId: (window as any)?.currentAgentId,
-                        messageId: messageId,
+                        messageId: actualMessageId,
                         toolCallId: toolCall.id,
                       });
                       try {
                         const result = await rejectToolCall({
                           agentId: (window as any)?.currentAgentId,
-                          messageId: messageId,
+                          messageId: actualMessageId,
                           toolCallId: toolCall.id,
                         });
                         console.log("✅ Reject successful:", result);
@@ -474,7 +507,7 @@ export function ToolCallDisplay({
                           "agent:toolApprovalResolved",
                           {
                             detail: {
-                              messageId: messageId,
+                              messageId: actualMessageId,
                               toolCallId: toolCall.id,
                               approved: false,
                             },
@@ -491,15 +524,20 @@ export function ToolCallDisplay({
                   <Button
                     size="sm"
                     onClick={async () => {
+                      // Use the dbMessageId from AgentToolCall if available, otherwise fall back to messageId or prop
+                      const actualMessageId = isAgentToolCall
+                        ? originalToolCall.dbMessageId ||
+                          originalToolCall.messageId
+                        : messageId;
                       console.log("✅ Approving tool call:", {
                         agentId: (window as any)?.currentAgentId,
-                        messageId: messageId,
+                        messageId: actualMessageId,
                         toolCallId: toolCall.id,
                       });
                       try {
                         const result = await approveToolCall({
                           agentId: (window as any)?.currentAgentId,
-                          messageId: messageId,
+                          messageId: actualMessageId,
                           toolCallId: toolCall.id,
                         });
                         console.log("✅ Approve successful:", result);
@@ -507,15 +545,18 @@ export function ToolCallDisplay({
                           "agent:toolApprovalResolved",
                           {
                             detail: {
-                              messageId: messageId,
+                              messageId: actualMessageId,
                               toolCallId: toolCall.id,
                               approved: true,
                             },
                           } as any,
                         );
                         window.dispatchEvent(ev);
-                      } catch (error) {
+                      } catch (error: any) {
                         console.error("❌ Approve failed:", error);
+                        alert(
+                          `Failed to approve: ${error?.message || "Unknown error"}`,
+                        );
                       }
                     }}
                   >