@alpaca-editor/core 1.0.4027 → 1.0.4031

package/src/editor/ai/AiResponseMessage.tsx

@@ -1,5 +1,6 @@
-import { useState, useEffect } from "react";
-import JSONPretty from "react-json-pretty";
+import React, { useState, useEffect } from "react";
+import { JsonView, defaultStyles } from "react-json-view-lite";
+import "react-json-view-lite/dist/index.css";
 
 import { useEditContext } from "../client/editContext";
 import { EditOperation } from "../../types";
@@ -11,6 +12,67 @@ import {
   PopoverTrigger,
 } from "../../components/ui/popover";
 import { SimpleTabs, Tab } from "../ui/SimpleTabs";
+import { Spinner } from "../ui/Spinner";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import {
+  X,
+  FileText,
+  Search,
+  Code,
+  Terminal,
+  FolderOpen,
+  FileSearch,
+  Trash2,
+  Globe,
+  Brain,
+  CheckSquare,
+  Edit,
+  FileEdit,
+  Wrench,
+} from "lucide-react";
+
+// Function to get the appropriate icon for each tool
+const getToolIcon = (toolName: string) => {
+  const iconMap: { [key: string]: React.ReactElement } = {
+    // Content operations
+    "get-content": <FileText strokeWidth={1} size={14} />,
+    "edit-field": <Edit strokeWidth={1} size={14} />,
+    "suggest-field-edit": <Edit strokeWidth={1} size={14} />,
+
+    // Item operations
+    "create-item": <FileEdit strokeWidth={1} size={14} />,
+    "load-item": <FileText strokeWidth={1} size={14} />,
+    "get-items": <FolderOpen strokeWidth={1} size={14} />,
+    "get-children": <FolderOpen strokeWidth={1} size={14} />,
+    "get-insertoptions": <FolderOpen strokeWidth={1} size={14} />,
+
+    // Component operations
+    "add-component": <Code strokeWidth={1} size={14} />,
+    "remove-component": <Trash2 strokeWidth={1} size={14} />,
+    "move-components": <Edit strokeWidth={1} size={14} />,
+    "get-placeholders": <Code strokeWidth={1} size={14} />,
+    "get-component-props-and-placeholders": <Code strokeWidth={1} size={14} />,
+
+    // Search operations
+    "search-content": <Search strokeWidth={1} size={14} />,
+    "search-images": <FileSearch strokeWidth={1} size={14} />,
+    "google-search": <Globe strokeWidth={1} size={14} />,
+
+    // Image operations
+    "edit-image": <FileEdit strokeWidth={1} size={14} />,
+    "get-picture-description": <FileText strokeWidth={1} size={14} />,
+
+    // Comments and suggestions
+    "add-comment": <CheckSquare strokeWidth={1} size={14} />,
+    "get-comments": <CheckSquare strokeWidth={1} size={14} />,
+    "get-suggestions": <Brain strokeWidth={1} size={14} />,
+
+    // Default fallback
+    default: <Wrench strokeWidth={1} size={14} />,
+  };
+
+  return iconMap[toolName] || iconMap.default;
+};
 
 export function AiResponseMessage({
   messages,
@@ -34,7 +96,10 @@ export function AiResponseMessage({
     [messageIndex: number]: any[];
   }>({});
 
-  console.log(messages);
+  // Track popover open state for each tool call
+  const [openPopovers, setOpenPopovers] = useState<{
+    [key: string]: boolean;
+  }>({});
 
   // Update preserved tool calls when messages change
   useEffect(() => {
@@ -61,41 +126,91 @@ export function AiResponseMessage({
     ) === undefined;
 
   // Helper function to render JSON or text
-  const renderJsonOrText = (json: string) => {
-    try {
-      const parsed = JSON.parse(json);
+  const renderJsonOrText = (json: string | object) => {
+    // If it's already an object, use it directly
+    if (typeof json === "object" && json !== null) {
       return (
-        <div className="font-mono text-xs whitespace-pre-wrap">
-          <pre className="break-words whitespace-pre-wrap">
-            {JSON.stringify(parsed, null, 2)}
-          </pre>
+        <div className="font-mono text-xs" style={{ fontSize: "12px" }}>
+          <JsonView
+            data={json}
+            shouldExpandNode={(level) => level < 2}
+            style={defaultStyles}
+          />
         </div>
       );
-    } catch (e) {
+    }
+
+    // Convert to string if not already
+    const jsonString = typeof json === "string" ? json : String(json);
+
+    // Try to parse as JSON
+    try {
+      let parsed = JSON.parse(jsonString);
+
+      // If the result is still a string that looks like JSON, parse it again
+      if (
+        typeof parsed === "string" &&
+        (parsed.startsWith("{") || parsed.startsWith("["))
+      ) {
+        try {
+          parsed = JSON.parse(parsed);
+        } catch (e2) {
+          console.log("Second parse failed, using first result");
+        }
+      }
+
       return (
-        <div className="font-mono text-xs break-words whitespace-pre-wrap">
-          {json}
+        <div className="font-mono text-xs" style={{ fontSize: "12px" }}>
+          <JsonView
+            data={parsed}
+            shouldExpandNode={(level) => level < 2}
+            style={defaultStyles}
+          />
         </div>
       );
+    } catch (e) {
+      console.log("JSON parse failed:", e, "Trying to handle as string...");
+
+      // Try to handle double-escaped JSON
+      try {
+        const unescaped = jsonString
+          .replace(/\\"/g, '"')
+          .replace(/\\\\/g, "\\");
+        const parsed = JSON.parse(unescaped);
+
+        return (
+          <div className="font-mono text-xs" style={{ fontSize: "12px" }}>
+            <JsonView
+              data={parsed}
+              shouldExpandNode={(level) => level < 2}
+              style={defaultStyles}
+            />
+          </div>
+        );
+      } catch (e2) {
+        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">
+            {jsonString}
+          </div>
+        );
+      }
     }
   };
 
   // Helper function to create tabs for a tool call
-  const createToolCallTabs = (
-    toolCall: any,
-    result: Message | undefined,
-  ): Tab[] => {
+  const createToolCallTabs = (toolCall: any, result: string): 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 className="relative h-full w-full p-2">
+            <div className="absolute inset-2 overflow-auto">
+              <div className="text-xs">
+                {renderJsonOrText(toolCall.function.arguments)}
+              </div>
             </div>
           </div>
         ),
@@ -107,12 +222,9 @@ export function AiResponseMessage({
         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 className="relative h-full w-full p-2">
+            <div className="absolute inset-2 overflow-y-auto">
+              <div className="text-xs">{renderJsonOrText(result || "")}</div>
             </div>
           </div>
         ),
@@ -126,19 +238,29 @@ export function AiResponseMessage({
   const ToolCallPopover = ({
     toolCall,
     result,
+    onClose,
   }: {
     toolCall: any;
-    result: Message | undefined;
+    result?: string;
+    onClose: () => void;
   }) => {
     const [activeTab, setActiveTab] = useState(0);
-    const tabs = createToolCallTabs(toolCall, result);
+    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 className="h-[400px]">
+        <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>
+          <SimpleIconButton
+            onClick={onClose}
+            icon={<X strokeWidth={1} size={16} />}
+            label="Close"
+            showTooltip={false}
+            size="small"
+          />
         </div>
         <SimpleTabs
           tabs={tabs}
@@ -151,17 +273,10 @@ export function AiResponseMessage({
     );
   };
 
-  // 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")
+        .filter((x) => x.role !== "tool" && x.role !== "user")
         .map((message, filteredIndex) => {
           // Find the original index of this message in the unfiltered array
           const originalIndex = messages.findIndex((m) => m.id === message.id);
@@ -171,19 +286,46 @@ export function AiResponseMessage({
               ? message.tool_calls
               : preservedToolCalls[originalIndex] || [];
           return (
-            <div key={filteredIndex}>
+            <div
+              key={filteredIndex}
+              className={toolCalls.length > 0 ? "mb-2" : ""}
+            >
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: message.formattedContent || message.content || "",
+                }}
+              />
               {toolCalls.length > 0 && (
-                <div className="mb-2 flex flex-wrap gap-2">
+                <div className="mt-2 flex flex-col gap-2">
                   {toolCalls.map((toolCall, toolIndex) => {
-                    const toolResult = findToolResult(toolCall.id);
+                    const toolResult = toolCall.function.result;
+                    const popoverKey = `${originalIndex}-${toolIndex}`;
+
                     return (
                       <Popover
                         key={toolIndex}
                         enableIframeClickDetection={false}
+                        open={openPopovers[popoverKey] || false}
+                        onOpenChange={(open) => {
+                          setOpenPopovers((prev) => ({
+                            ...prev,
+                            [popoverKey]: open,
+                          }));
+                        }}
                       >
                         <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" />
+                            {toolResult ? (
+                              <div className="flex items-center">
+                                {getToolIcon(toolCall?.function?.name || "")}
+                              </div>
+                            ) : finished ? (
+                              <div className="flex items-center opacity-50">
+                                {getToolIcon(toolCall?.function?.name || "")}
+                              </div>
+                            ) : (
+                              <Spinner size="xs" />
+                            )}
                             <span>
                               {toolCall?.displayName ||
                                 toolCall?.function?.name ||
@@ -192,30 +334,29 @@ export function AiResponseMessage({
                           </div>
                         </PopoverTrigger>
                         <PopoverContent
-                          className="p-3"
+                          className="w-[400px] 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>
+                          <ToolCallPopover
+                            toolCall={toolCall}
+                            result={toolResult}
+                            onClose={() => {
+                              setOpenPopovers((prev) => ({
+                                ...prev,
+                                [popoverKey]: false,
+                              }));
+                            }}
+                          />
                         </PopoverContent>
                       </Popover>
                     );
                   })}
                 </div>
               )}
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: message.formattedContent || message.content || "",
-                }}
-              />
             </div>
           );
         })}
@@ -254,7 +395,7 @@ export function AiResponseMessage({
                 setChangesRejected(true);
               }}
             >
-              <i className="pi pi-times" /> Reject
+              <X strokeWidth={1} size={14} /> Reject
             </div>
           )}
           {changesRejected && (