@alpaca-editor/core 1.0.4049 → 1.0.4053

package/src/editor/ai/AiPromptPopover.tsx

@@ -117,7 +117,7 @@ User request: ${prompt.trim()}`;
 
     const startRequest: StartAgentRequest = {
       agentId: newAgentId,
-      messages,
+      message: initialPrompt,
       sessionId: editContext.sessionId,
       profileId: "Editor",
       itemid: editContext.currentItemDescriptor.id,
@@ -128,7 +128,7 @@ User request: ${prompt.trim()}`;
       profile: "Editor",
     };
 
-    await startAgent(startRequest, aiContext);
+    await startAgent(startRequest);
     // Agents view will reflect the new agent via its own refresh mechanisms
   };
 

package/src/editor/ai/AiResponseMessage.tsx

@@ -1,78 +1,11 @@
 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";
 import { Message } from "./AiTerminal";
+import { ToolCallDisplay } from "./ToolCallDisplay";
 
-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 {
-  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;
-};
+import { X, Bot, Loader2 } from "lucide-react";
 
 export function AiResponseMessage({
   messages,
@@ -95,7 +28,7 @@ export function AiResponseMessage({
 
   // Store tool calls to preserve them during streaming
   const [preservedToolCalls, setPreservedToolCalls] = useState<{
-    [messageIndex: number]: any[];
+    [messageId: string]: any[];
   }>({});
 
   // Track popover open state for each tool call
@@ -107,10 +40,10 @@ export function AiResponseMessage({
   useEffect(() => {
     const newPreservedToolCalls = { ...preservedToolCalls };
 
-    messages.forEach((message, index) => {
+    messages.forEach((message) => {
       if (message.tool_calls && message.tool_calls.length > 0) {
         // Store non-empty tool calls
-        newPreservedToolCalls[index] = message.tool_calls;
+        newPreservedToolCalls[message.id] = message.tool_calls;
       }
     });
 
@@ -127,312 +60,98 @@ export function AiResponseMessage({
         !editContext.editHistory[index]?.canUndo,
     ) === undefined;
 
-  // Helper function to render JSON or text
-  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" style={{ fontSize: "12px" }}>
-          <JsonView
-            data={json}
-            shouldExpandNode={(level) => level < 2}
-            style={defaultStyles}
-          />
-        </div>
-      );
-    }
-
-    // Convert to string if not already
-    const jsonString = typeof json === "string" ? json : String(json);
+  // Calculate if we're currently streaming (for loading indicator)
+  const isStreaming = !finished && messages.length > 0;
 
-    // Try to parse as JSON
-    try {
-      let parsed = JSON.parse(jsonString);
+  // Get the last message for timestamp
+  const lastMessage = messages[messages.length - 1];
 
-      // 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" style={{ fontSize: "12px" }}>
-          <JsonView
-            data={parsed}
-            shouldExpandNode={(level) => level < 2}
-            style={defaultStyles}
-          />
+  return (
+    <div className="flex gap-3 p-4">
+      <div className="flex-shrink-0">
+        <Bot className="h-6 w-6 text-green-600" strokeWidth={1} />
+      </div>
+      <div className="min-w-0 flex-1 select-text">
+        <div className="mb-1 flex items-center gap-2">
+          <span className="text-sm font-medium text-gray-900">Agent</span>
+
+          {lastMessage && (
+            <span className="text-xs text-gray-400">
+              {new Date().toLocaleTimeString()}
+            </span>
+          )}
         </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: 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)}
+        {error && (
+          <div
+            className="mb-3 rounded-lg border-l-4 border-red-500 bg-red-50 p-3"
+            data-testid="agent-error"
+          >
+            <div className="flex items-start">
+              <div className="flex-shrink-0">
+                <X className="h-5 w-5 text-red-400" strokeWidth={1} />
+              </div>
+              <div className="ml-3">
+                <p className="text-sm font-medium text-red-800">Agent Error</p>
+                <p className="mt-1 text-sm text-red-700">{error}</p>
+              </div>
             </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>
+        )}
+
+        {messages
+          .filter((x) => x.role !== "tool" && x.role !== "user")
+          .map((message, filteredIndex) => {
+            // 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[message.id] || [];
+
+            return (
+              <div
+                key={filteredIndex}
+                className={toolCalls.length > 0 ? "mb-2" : ""}
+              >
+                <div
+                  className="prose prose-sm max-w-none text-sm text-gray-700 select-text"
+                  dangerouslySetInnerHTML={{
+                    __html: message.formattedContent || message.content || "",
+                  }}
+                />
+                <ToolCallDisplay
+                  toolCalls={toolCalls}
+                  finished={finished}
+                  openPopovers={openPopovers}
+                  setOpenPopovers={setOpenPopovers}
+                  messageId={message.id}
+                />
               </div>
-            ) : (
-              <div className="text-xs">{renderJsonOrText(result || "")}</div>
-            )}
-          </div>
-        ),
-      });
-    }
-
-    return tabs;
-  };
-
-  // Helper function to create tool call popover content
-  const ToolCallPopover = ({
-    toolCall,
-    result,
-    onClose,
-  }: {
-    toolCall: any;
-    result?: string;
-    onClose: () => void;
-  }) => {
-    const [activeTab, setActiveTab] = useState(0);
-    const tabs = createToolCallTabs(toolCall, result || "");
-
-    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>
-          <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"
-        />
-      </div>
-    );
-  };
+            );
+          })}
 
-  return (
-    <div>
-      {error && (
-        <div
-          className="mb-3 rounded-lg border-l-4 border-red-500 bg-red-50 p-3"
-          data-testid="agent-error"
-        >
-          <div className="flex items-start">
-            <div className="flex-shrink-0">
-              <X className="h-5 w-5 text-red-400" strokeWidth={1} />
-            </div>
-            <div className="ml-3">
-              <p className="text-sm font-medium text-red-800">Agent Error</p>
-              <p className="mt-1 text-sm text-red-700">{error}</p>
+        {finished && editOperations.length > 0 && (
+          <div className="my-2 flex items-center gap-2">
+            <div className="tour-ai-response-message-changes text-xs">
+              {editOperations.length} changes
             </div>
-          </div>
-        </div>
-      )}
-      {messages
-        .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);
-          // 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}
-              className={toolCalls.length > 0 ? "mb-2" : ""}
-            >
+            {canReject && !changesRejected && (
               <div
-                dangerouslySetInnerHTML={{
-                  __html: message.formattedContent || message.content || "",
+                className="flex cursor-pointer items-center gap-1 text-xs text-red-500"
+                onClick={async () => {
+                  await editContext?.operations.undo(editOperations.length);
+                  setChangesRejected(true);
                 }}
-              />
-              {toolCalls.length > 0 && (
-                <div className="mt-2 flex flex-col gap-2">
-                  {toolCalls.map((toolCall, toolIndex) => {
-                    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">
-                            {toolResult || toolCall.function?.error ? (
-                              <div
-                                className={`flex items-center ${toolCall.function?.error ? "text-red-500" : ""}`}
-                              >
-                                {getToolIcon(toolCall?.function?.name || "")}
-                              </div>
-                            ) : finished ? (
-                              <div className="flex items-center opacity-50">
-                                {getToolIcon(toolCall?.function?.name || "")}
-                              </div>
-                            ) : (
-                              <Spinner size="xs" />
-                            )}
-                            <span
-                              className={
-                                toolCall.function?.error ? "text-red-500" : ""
-                              }
-                            >
-                              {toolCall?.displayName ||
-                                toolCall?.function?.name ||
-                                "tool call"}
-                              {toolCall.function?.error && " (error)"}
-                            </span>
-                          </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>
-                    );
-                  })}
-                </div>
-              )}
-            </div>
-          );
-        })}
-      {/* <div
-        dangerouslySetInnerHTML={{
-          __html: responseText.replaceAll("\\n", "<br>"),
-        }}
-      />
-      {toolcalls.length > 0 && (
-        <div
-          className="mt-1 flex cursor-pointer items-center gap-1 text-xs text-gray-400"
-          onClick={() => setShowFunctions(!showFunctions)}
-        >
-          <i className="pi pi-wrench text-xs" /> Tool calls
-        </div>
-      )} */}
-
-      {/* {showFunctions && (
-        <div className="text-xs text-gray-400">
-          {toolcalls.map((x, index) => (
-            <AiToolCall toolCall={x} key={index} />
-          ))}
-        </div>
-      )} */}
-
-      {finished && editOperations.length > 0 && (
-        <div className="my-2 flex items-center gap-2">
-          <div className="tour-ai-response-message-changes text-xs">
-            {editOperations.length} changes
+              >
+                <X strokeWidth={1} size={14} /> Reject
+              </div>
+            )}
+            {changesRejected && (
+              <div className="text-xs text-red-500">rejected</div>
+            )}
           </div>
-          {canReject && !changesRejected && (
-            <div
-              className="flex cursor-pointer items-center gap-1 text-xs text-red-500"
-              onClick={async () => {
-                await editContext?.operations.undo(editOperations.length);
-                setChangesRejected(true);
-              }}
-            >
-              <X strokeWidth={1} size={14} /> Reject
-            </div>
-          )}
-          {changesRejected && (
-            <div className="text-xs text-red-500">rejected</div>
-          )}
-        </div>
-      )}
+        )}
+      </div>
     </div>
   );
 }