@alpaca-editor/core 1.0.4026 → 1.0.4030

package/src/editor/ai/AiPromptPopover.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { useState } from "react";
+import { Sparkles, Send } from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
+import { Button } from "../../components/ui/button";
+import { useEditContext } from "../client/editContext";
+import { AiTerminalOptions } from "./AiTerminal";
+import { Component } from "../pageModel";
+
+interface AiPromptPopoverProps {
+  children: React.ReactNode;
+  components?: Component[];
+}
+
+export function AiPromptPopover({
+  children,
+  components = [],
+}: AiPromptPopoverProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [prompt, setPrompt] = useState("");
+  const editContext = useEditContext();
+
+  const handleSubmit = async () => {
+    if (!prompt.trim()) return;
+
+    // Close the popover
+    setIsOpen(false);
+
+    // Create comprehensive AI options with component context
+    let finalPrompt = prompt.trim();
+    let hiddenSystemPrompt: string | undefined;
+
+    if (components.length > 0) {
+      // Create detailed component context for the agent
+      const componentInfo = components
+        .map((comp) => {
+          const componentType = comp.type || comp.name || "Unknown";
+          const componentId = comp.id;
+          const hasContent = comp.items && comp.items.length > 0;
+
+          return `- ${componentType} (ID: ${componentId})${hasContent ? " with data" : " (empty)"}`;
+        })
+        .join("\n");
+
+      finalPrompt = `I'm working with the following ${components.length === 1 ? "component" : "components"}:
+${componentInfo}
+
+User request: ${prompt.trim()}`;
+
+      // Add hidden system prompt with component details for agent context
+      const componentDetails = components.map((comp) => ({
+        id: comp.id,
+        name: comp.name,
+        type: comp.type,
+        renderingId: comp.rendering?.id,
+        items: comp.items?.length || 0,
+        placeholder: comp.parentPlaceholder?.name,
+        isShared: comp.isShared,
+      }));
+
+      hiddenSystemPrompt = `Working with components: ${JSON.stringify(componentDetails, null, 2)}`;
+    }
+
+    // Switch to agents view first
+    editContext?.switchView("agents");
+
+    try {
+      // Execute the prompt directly with a new agent
+      await executePromptDirectly(finalPrompt, hiddenSystemPrompt);
+    } catch (error) {
+      console.error("Failed to execute prompt with new agent:", error);
+      // Fallback to the old method if the new one fails
+      const aiOptions: AiTerminalOptions = {
+        initialPrompt: finalPrompt,
+        hiddenSystemPrompt,
+      };
+    }
+
+    // Reset the prompt
+    setPrompt("");
+  };
+
+  const executePromptDirectly = async (
+    initialPrompt: string,
+    hiddenSystemPrompt?: string,
+  ) => {
+    if (!editContext) return;
+
+    // Generate a new agent ID
+    const newAgentId = crypto.randomUUID();
+
+    // Create the user message
+    const userMessage = {
+      id: crypto.randomUUID(),
+      content: initialPrompt,
+      role: "user",
+      name: "user",
+    };
+
+    // Create messages array with optional hidden system prompt
+    const messages = [
+      ...(hiddenSystemPrompt
+        ? [
+            {
+              role: "system",
+              name: "system",
+              content: hiddenSystemPrompt,
+              id: crypto.randomUUID(),
+            },
+          ]
+        : []),
+      userMessage,
+    ];
+
+    // Import the required functions
+    const { executePrompt } = await import("../services/aiService");
+    const { createEditorAiContext } = await import("./editorAiContext");
+
+    // Create AI context
+    const aiContext = createEditorAiContext({ editContext });
+
+    // Execute the prompt with the new agent ID
+    await executePrompt(messages, aiContext, {
+      sessionId: editContext.sessionId,
+      agentId: newAgentId,
+      addSelectedComponents: true,
+      profileId: "Editor", // Default to Editor profile
+    });
+
+    // The agents list will refresh automatically via websockets or periodic refresh
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <Popover
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      enableIframeClickDetection={false}
+    >
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent
+        className="w-96 p-4"
+        side="bottom"
+        align="start"
+        onMouseDown={(e) => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="space-y-3">
+          <div className="flex items-center gap-2">
+            <Sparkles size={16} className="text-blue-500" />
+            <h3 className="font-medium">AI Assistant</h3>
+          </div>
+
+          <div className="space-y-2">
+            <label htmlFor="ai-prompt" className="text-sm text-gray-700">
+              What would you like AI to help you with?
+              {components.length > 0 && (
+                <span className="mt-1 block text-xs text-gray-500">
+                  Working with {components.length} selected component
+                  {components.length === 1 ? "" : "s"}
+                </span>
+              )}
+            </label>
+            <textarea
+              id="ai-prompt"
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Enter your prompt here..."
+              className="w-full resize-none rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none"
+              rows={3}
+              autoFocus
+            />
+          </div>
+
+          <div className="flex justify-end gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setIsOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              size="sm"
+              onClick={handleSubmit}
+              disabled={!prompt.trim()}
+              className="flex items-center gap-1"
+            >
+              <Send size={14} />
+              Start Agent
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/editor/ai/AiResponseMessage.tsx

@@ -1,12 +1,78 @@
-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";
 import { Message } from "./AiTerminal";
-import { AiToolCall } from "./AiToolCall";
-import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover";
+
+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;
+};
 
 export function AiResponseMessage({
   messages,
@@ -26,19 +92,26 @@ export function AiResponseMessage({
   );
 
   // Store tool calls to preserve them during streaming
-  const [preservedToolCalls, setPreservedToolCalls] = useState<{[messageIndex: number]: any[]}>({});
+  const [preservedToolCalls, setPreservedToolCalls] = useState<{
+    [messageIndex: number]: any[];
+  }>({});
+
+  // Track popover open state for each tool call
+  const [openPopovers, setOpenPopovers] = useState<{
+    [key: string]: boolean;
+  }>({});
 
   // Update preserved tool calls when messages change
   useEffect(() => {
-    const newPreservedToolCalls = {...preservedToolCalls};
-    
+    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]);
 
@@ -53,31 +126,92 @@ export function AiResponseMessage({
     ) === undefined;
 
   // Helper function to render JSON or text
-  const renderJsonOrText = (json: string) => {
+  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);
+
+    // Try to parse as JSON
     try {
-      const parsed = JSON.parse(json);
+      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 whitespace-pre-wrap">
-          <pre className="whitespace-pre-wrap break-words">
-            {JSON.stringify(parsed, null, 2)}
-          </pre>
+        <div className="font-mono text-xs" style={{ fontSize: "12px" }}>
+          <JsonView
+            data={parsed}
+            shouldExpandNode={(level) => level < 2}
+            style={defaultStyles}
+          />
         </div>
       );
     } catch (e) {
-      return <div className="whitespace-pre-wrap font-mono text-xs break-words">{json}</div>;
+      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="text-sm font-semibold text-gray-700 mb-1">Arguments:</div>
-            <div className="text-xs">{renderJsonOrText(toolCall.function.arguments)}</div>
+          <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>
         ),
       },
@@ -88,9 +222,10 @@ export function AiResponseMessage({
         id: `output-${toolCall.id}`,
         label: "Output",
         content: (
-          <div className="max-h-96 overflow-auto p-2">
-            <div className="text-sm font-semibold text-gray-700 mb-1">Result:</div>
-            <div className="text-xs">{renderJsonOrText(result.content || "")}</div>
+          <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>
         ),
       });
@@ -100,22 +235,38 @@ export function AiResponseMessage({
   };
 
   // Helper function to create tool call popover content
-  const ToolCallPopover = ({ toolCall, result }: { toolCall: any; result: Message | undefined }) => {
+  const ToolCallPopover = ({
+    toolCall,
+    result,
+    onClose,
+  }: {
+    toolCall: any;
+    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 pb-2 border-b border-gray-200">
-          <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}
           activeTab={activeTab}
           setActiveTab={setActiveTab}
-          className="border-b border-gray-200 mb-3"
+          className="mb-3 border-b border-gray-200"
           tabClassName="text-xs"
         />
       </div>
@@ -125,45 +276,81 @@ export function AiResponseMessage({
   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);
+          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] || []);
+          const toolCalls =
+            message.tool_calls && message.tool_calls.length > 0
+              ? 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="mt-2 flex flex-wrap gap-2">
+                <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}>
+                      <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 || 'tool call'}
+                              {toolCall?.displayName ||
+                                toolCall?.function?.name ||
+                                "tool call"}
                             </span>
                           </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={toolCall.result} />
-                          </div>
+                          <ToolCallPopover
+                            toolCall={toolCall}
+                            result={toolResult}
+                            onClose={() => {
+                              setOpenPopovers((prev) => ({
+                                ...prev,
+                                [popoverKey]: false,
+                              }));
+                            }}
+                          />
                         </PopoverContent>
                       </Popover>
                     );
@@ -208,7 +395,7 @@ export function AiResponseMessage({
                 setChangesRejected(true);
               }}
             >
-              <i className="pi pi-times" /> Reject
+              <X strokeWidth={1} size={14} /> Reject
             </div>
           )}
           {changesRejected && (