@alpaca-editor/core 1.0.4013 → 1.0.4014

package/src/editor/ai/Agents.tsx

@@ -1,14 +1,42 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { AiTerminalOptions } from "./AiTerminal";
 import { EditorAiTerminal } from "./EditorAiTerminal";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { Plus, X } from "lucide-react";
+import { Plus, X, History } from "lucide-react";
 import { cn } from "../../lib/utils";
+import { getAgents, getAgent, getChatHistory, AgentChat, AgentChatMessage } from "../services/agentService";
+import { Message } from "./AiTerminal";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
+import { Button } from "../../components/ui/button";
 
 interface TerminalInstance {
   id: string;
   title: string;
+  agentId?: string;
   options?: AiTerminalOptions;
+  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
+  }));
 }
 
 export function Agents({
@@ -18,16 +46,98 @@ export function Agents({
   closeButton?: React.ReactNode;
   initialOptions?: AiTerminalOptions;
 }) {
-  const [terminals, setTerminals] = useState<TerminalInstance[]>([
-    {
-      id: "terminal-1",
-      title: "Agent 1",
-      options: initialOptions,
-    },
-  ]);
-  const [activeTerminalId, setActiveTerminalId] =
-    useState<string>("terminal-1");
-  const nextTerminalNumber = useRef(2);
+  const [terminals, setTerminals] = useState<TerminalInstance[]>([]);
+  const [activeTerminalId, setActiveTerminalId] = useState<string | null>(null);
+  const [inactiveAgents, setInactiveAgents] = useState<AgentChat[]>([]);
+  const [historyPopoverOpen, setHistoryPopoverOpen] = useState(false);
+  const [loadingAgents, setLoadingAgents] = useState(true);
+  const nextTerminalNumber = useRef(1);
+
+  // Load agents from backend on mount
+  useEffect(() => {
+    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) : []
+            };
+          })
+        );
+        
+        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);
+        } else {
+          // Create a default terminal if no active agents
+          const defaultTerminal: TerminalInstance = {
+            id: `terminal-${nextTerminalNumber.current}`,
+            title: `Agent ${nextTerminalNumber.current}`,
+            options: initialOptions,
+          };
+          setTerminals([defaultTerminal]);
+          setActiveTerminalId(defaultTerminal.id);
+          nextTerminalNumber.current++;
+        }
+      }
+      
+      if (inactiveAgentsResult.type === "success" && inactiveAgentsResult.data) {
+        setInactiveAgents(inactiveAgentsResult.data);
+      }
+      
+    } catch (error) {
+      console.error("Failed to load agents:", error);
+      // Create a default terminal on error
+      const defaultTerminal: TerminalInstance = {
+        id: `terminal-${nextTerminalNumber.current}`,
+        title: `Agent ${nextTerminalNumber.current}`,
+        options: initialOptions,
+      };
+      setTerminals([defaultTerminal]);
+      setActiveTerminalId(defaultTerminal.id);
+      nextTerminalNumber.current++;
+    } finally {
+      setLoadingAgents(false);
+    }
+  };
+
+  const loadAgentMessages = async (agentId: string): Promise<AgentChat | null> => {
+    try {
+      const result = await getAgent(agentId);
+      if (result.type === "success" && result.data) {
+        return result.data;
+      }
+    } catch (error) {
+      console.error(`Failed to load messages for agent ${agentId}:`, error);
+    }
+    return null;
+  };
 
   const addTerminal = () => {
     const newTerminal: TerminalInstance = {
@@ -58,6 +168,42 @@ 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);
+    
+    if (existingTerminal) {
+      // Switch to existing terminal
+      setActiveTerminalId(existingTerminal.id);
+      setHistoryPopoverOpen(false);
+      return;
+    }
+
+    // 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) : []
+    };
+
+    setTerminals((prev) => [...prev, newTerminal]);
+    setActiveTerminalId(newTerminal.id);
+    setHistoryPopoverOpen(false);
+  };
+
+  if (loadingAgents) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="text-sm text-gray-500">Loading agents...</div>
+      </div>
+    );
+  }
+
   return (
     <div className="flex h-full flex-col">
       {/* Tab Header */}
@@ -67,7 +213,7 @@ export function Agents({
             <div
               key={terminal.id}
               className={cn(
-                "flex min-w-0 cursor-pointer items-center gap-1 border-r border-gray-200 px-3 py-2 text-sm",
+                "flex min-w-0 cursor-pointer items-center gap-1 border-r border-gray-200 px-3 py-2 text-xs",
                 activeTerminalId === terminal.id
                   ? "border-b-white bg-white"
                   : "hover:bg-gray-100",
@@ -81,7 +227,7 @@ export function Agents({
                     e.stopPropagation();
                     closeTerminal(terminal.id);
                   }}
-                  icon={<X className="size-3" />}
+                  icon={<X className="size-2" />}
                   label="Close"
                   className="ml-1 opacity-60 hover:opacity-100"
                 />
@@ -90,8 +236,52 @@ export function Agents({
           ))}
         </div>
 
+        {/* History Popover */}
+        <div className="flex items-center px-1">
+          <Popover open={historyPopoverOpen} onOpenChange={setHistoryPopoverOpen}>
+            <PopoverTrigger asChild>
+              <SimpleIconButton
+                onClick={() => {}}
+                icon={<History className="size-4" />}
+                label="Agent History"
+                className="text-gray-600 hover:text-gray-800"
+              />
+            </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">
+                Agent History
+              </div>
+              <div className="max-h-80 overflow-y-auto">
+                {inactiveAgents.length === 0 ? (
+                  <div className="px-3 py-2 text-xs text-gray-500">
+                    No previous agents found
+                  </div>
+                ) : (
+                  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"
+                      onClick={() => openAgentFromHistory(agent)}
+                    >
+                      <div className="font-medium text-gray-900 truncate">
+                        {agent.name}
+                      </div>
+                      <div className="text-gray-500 truncate">
+                        {agent.profileName}
+                      </div>
+                      <div className="text-gray-400 text-xs">
+                        {new Date(agent.updatedDate).toLocaleString()}
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </PopoverContent>
+          </Popover>
+        </div>
+
         {/* Add Terminal Button */}
-        <div className="flex items-center px-2">
+        <div className="flex items-center px-1">
           <SimpleIconButton
             onClick={addTerminal}
             icon={<Plus className="size-4" />}
@@ -116,7 +306,13 @@ export function Agents({
               activeTerminalId === terminal.id ? "block" : "hidden",
             )}
           >
-            <EditorAiTerminal options={terminal.options} />
+            <EditorAiTerminal 
+              options={{
+                ...terminal.options,
+                // Pass the pre-loaded messages to the terminal
+                initialMessages: terminal.messages
+              }} 
+            />
           </div>
         ))}
       </div>

package/src/editor/ai/AiTerminal.tsx

@@ -8,10 +8,13 @@ import { Terminal } from "../Terminal";
 import { useEditContext } from "../client/editContext";
 import { Dropdown } from "primereact/dropdown";
 
-import Cookies from "universal-cookie";
 import { WizardIcon } from "../ui/Icons";
 import { AiResponseMessage } from "./AiResponseMessage";
-import { AiProfile, loadAiProfiles } from "../services/aiService";
+import {
+  AiProfile,
+  loadAiProfiles,
+  executePrompt,
+} from "../services/aiService";
 import { EditOperation } from "../../types";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { Settings } from "lucide-react";
@@ -35,7 +38,7 @@ export type ToolCall = {
 };
 
 export type Message = {
-  id: number;
+  id: string; // Changed from number to string for UUID support
   content: string;
   formattedContent?: string;
   name: string;
@@ -53,6 +56,7 @@ export type AiContext = {
 export type AiTerminalOptions = {
   initialPrompt?: string;
   hiddenSystemPrompt?: string;
+  initialMessages?: Message[];
 };
 
 export function AiTerminal({
@@ -71,7 +75,7 @@ export function AiTerminal({
 
   if (!editContext) return null;
 
-  const [messages, setMessages] = useState<Message[]>([]);
+  const [messages, setMessages] = useState<Message[]>(options?.initialMessages || []);
   const [response, setResponse] = useState<Response>();
   const [model, setModel] = useState<string>();
   const [prompt, setPrompt] = useState("");
@@ -81,7 +85,7 @@ export function AiTerminal({
   const [agentId] = useState<string>(() => crypto.randomUUID());
   const selection = editContext.selection;
   const terminalRef = useRef<{ submit: () => void }>(null);
-  const [responseMessages, setResponseMessages] = useState<Message[]>([]);
+  const [responseMessages, setResponseMessages] = useState<Message[]>(options?.initialMessages || []);
   const [showSettings, setShowSettings] = useState(false);
   const settingsRef = useRef<HTMLDivElement>(null);
 
@@ -120,6 +124,91 @@ export function AiTerminal({
     messagesRef.current = responseMessages;
   }, [responseMessages]);
 
+  // State for initial messages to pass to Terminal
+  type TerminalMessage = {text: React.ReactNode, type: "command" | "response"};
+  const [initialTerminalMessages, setInitialTerminalMessages] = useState<TerminalMessage[] | undefined>(undefined);
+
+  // Effect to set up initial messages for display  
+  useEffect(() => {
+    if (options?.initialMessages && options.initialMessages.length > 0) {
+      console.log("AiTerminal: Loading initial messages", options.initialMessages);
+      
+      // Format the initial messages for display
+      const formattedMessages = options.initialMessages.map((message) => {
+        const formattedContent = message.content
+          ?.trim()
+          ?.replaceAll("\n", "<br>")
+          ?.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>") || "";
+
+        return {
+          ...message,
+          content: message.content || "",
+          formattedContent: formattedContent,
+          tool_calls: message.tool_calls || [],
+        };
+      });
+
+      console.log("AiTerminal: Formatted messages", formattedMessages);
+
+      // Update the internal message states
+      setMessages(formattedMessages);
+      setResponseMessages(formattedMessages);
+      
+      // Create a response object for internal state
+      const initialResponse: Response = {
+        messages: formattedMessages,
+        editOperations: [],
+        numInputTokens: 0,
+        numOutputTokens: 0,
+        numCachedTokens: 0,
+        state: "loaded"
+      };
+      
+      console.log("AiTerminal: Setting response", initialResponse);
+      setResponse(initialResponse);
+      
+      // Create individual Terminal messages for each conversation message
+      const terminalMessages: TerminalMessage[] = [];
+      
+      formattedMessages.forEach((message) => {
+        if (message.role === "user") {
+          // User messages appear as commands
+          terminalMessages.push({
+            type: "command",
+            text: message.content
+          });
+        } else if (message.role === "assistant") {
+          // Assistant messages appear as responses
+          terminalMessages.push({
+            type: "response",
+            text: (
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: message.formattedContent || message.content || "",
+                }}
+              />
+            )
+          });
+        }
+        // Add tool calls if present
+        if (message.tool_calls && message.tool_calls.length > 0) {
+          message.tool_calls.forEach((toolCall) => {
+            terminalMessages.push({
+              type: "response",
+              text: (
+                <div className="text-xs text-gray-400">
+                  🔧 {toolCall.displayName}
+                </div>
+              )
+            });
+          });
+        }
+      });
+      
+      setInitialTerminalMessages(terminalMessages);
+    }
+  }, [options?.initialMessages]);
+
   // Handle click outside for settings popover
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
@@ -150,13 +239,13 @@ export function AiTerminal({
     if (updatedMessages && Array.isArray(updatedMessages)) {
       const formattedMessages = updatedMessages.map((message) => {
         const formattedContent = message.content
-          .trim()
-          .replaceAll("\n", "<br>")
-          ?.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
+          ?.trim()
+          ?.replaceAll("\n", "<br>")
+          ?.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>") || "";
 
         return {
           ...message,
-          content: message.content,
+          content: message.content || "",
           formattedContent: formattedContent,
           tool_calls: message.tool_calls || [],
         };
@@ -192,7 +281,7 @@ export function AiTerminal({
     callback: (text: React.ReactNode, finished: boolean) => void,
   ) {
     const userMessage = {
-      id: Date.now(), // Add unique id
+      id: crypto.randomUUID(), // Add unique id
       content: text,
       role: "user",
       name: "user",
@@ -214,7 +303,7 @@ export function AiTerminal({
               role: "system",
               name: "system",
               content: options.hiddenSystemPrompt,
-              id: 0, // System message id
+              id: crypto.randomUUID(), // Use UUID instead of hardcoded 0
               toolCalls: [],
             },
           ]
@@ -223,72 +312,21 @@ export function AiTerminal({
     ];
 
     const response = await executePrompt(
-      activeProfile.id,
       messages,
-      selection,
-      editContext!.sessionId,
-      model,
-      selectedText,
       context,
-      agentId,
+      {
+        profileId: activeProfile.id,
+        selection,
+        selectedText,
+        model,
+        sessionId: editContext!.sessionId,
+        agentId,
+        addSelectedComponents: true,
+      },
+      undefined,
       (response: any) => {
         setResponse(response);
         handleResponse(response, callback, false);
-        // if (response.editOperations.length) {
-        //   if (!editContext) return;
-
-        //   const newOps = response.editOperations.slice(lastOpIndex);
-
-        //   if (newOps.length === 0) return;
-
-        //   const isEditTextFieldOp = (op: EditOperation) => {
-        //     if (op.type !== "edit-field") return false;
-        //     const editFieldOp = op as EditFieldOperation;
-        //     return (
-        //       editFieldOp.fieldType &&
-        //       editFieldOp.fieldType.indexOf("text") !== -1
-        //     );
-        //   };
-
-        //   const isEditTextField = isEditTextFieldOp(newOps[newOps.length - 1]);
-
-        //   if (isEditTextField) lastOpIndex = response.editOperations.length - 1;
-        //   else lastOpIndex = response.editOperations.length;
-
-        //   newOps.forEach((op: EditOperation) => {
-        //     if (isEditTextFieldOp(op)) {
-        //       const editFieldOp = op as EditFieldOperation;
-
-        //       if (editFieldOp.itemId) {
-        //         const fieldDescriptor = {
-        //           item: {
-        //             ...editFieldOp.mainItem,
-        //             id: editFieldOp.itemId,
-        //           },
-        //           fieldId: editFieldOp.fieldId,
-        //         };
-        //         editContext.itemsRepository.updateFieldValue(
-        //           fieldDescriptor,
-        //           editFieldOp.user ?? { name: "unknown", ai: false },
-        //           false,
-        //           editFieldOp.value,
-        //         );
-
-        //         editContext.select([editFieldOp.itemId]);
-        //         editContext.setScrollIntoView(editFieldOp.itemId);
-
-        //         editContext?.setFocusedField(fieldDescriptor, false);
-        //       }
-        //     } else {
-        //       const addOp = op as AddComponentOperation;
-        //       if (op.type === "add-component" && addOp.componentId) {
-        //         const newComponentId = addOp.componentId;
-        //         editContext.select([newComponentId]);
-        //         editContext.setScrollIntoView(newComponentId);
-        //       }
-        //     }
-        //   });
-        // }
       },
     );
 
@@ -320,7 +358,7 @@ export function AiTerminal({
 
   return (
     <div
-      className="relative flex h-full flex-1 flex-col pl-1.5"
+      className="relative flex h-full flex-1 flex-col"
       data-testid="ai-terminal"
     >
       <div className="relative flex-1">
@@ -332,7 +370,9 @@ export function AiTerminal({
               setMessages([]);
               setResponseMessages([]);
               setResponse(undefined);
+              setInitialTerminalMessages(undefined);
             }}
+            initialMessages={initialTerminalMessages}
             infobar={
               response?.numInputTokens && (
                 <div
@@ -448,103 +488,3 @@ export function AiTerminal({
     </div>
   );
 }
-
-async function executePrompt(
-  profileId: string,
-  messages: Message[],
-  selection: string[],
-  session: string | null,
-  model: string | null,
-  selectedText: string | null,
-  context: AiContext,
-  agentId: string,
-  callback: (response: any) => void,
-): Promise<Response | null> {
-  const response = await fetch(context.endpoint, {
-    method: "POST",
-    body: JSON.stringify({
-      ...context.promptData,
-      profileId,
-      messages,
-      selection,
-      addSelectedComponents: true,
-      selectedText,
-      model,
-      sessionId: session,
-      agentId,
-    }),
-    credentials: "include",
-    headers: {
-      "Content-Type": "application/json",
-      Cookie: new Cookies().getAll(),
-    },
-  });
-
-  if (!response.ok) {
-    const text = await response.text();
-    return {
-      messages: [
-        {
-          content: "There was an error processing your request: " + text,
-          id: 0,
-          name: "assistant",
-          role: "assistant",
-        },
-      ],
-      editOperations: [],
-      numInputTokens: 0,
-      numOutputTokens: 0,
-      numCachedTokens: 0,
-      state: "error",
-    };
-  }
-
-  if (!response?.body) return null;
-
-  const reader = response.body.getReader();
-  const decoder = new TextDecoder();
-  let buffer = "";
-
-  let result = null;
-
-  while (true) {
-    const { done, value } = await reader.read();
-
-    if (done) {
-      break;
-    }
-
-    buffer += decoder.decode(value, { stream: true }); // 'stream: true' ensures that any incomplete multi-byte characters aren't malformed.
-
-    // Split the buffer by newline and keep the last partial line for the next iteration.
-    const lines = buffer.split("\n");
-
-    if (lines.length > 0) {
-      buffer = lines.pop() || ""; // Incomplete line (if any) is kept for the next iteration.
-
-      for (let line of lines) {
-        if (line.trim() === "") continue; // Skip empty lines if any.
-
-        try {
-          const jsonData = JSON.parse(line);
-          callback(jsonData);
-          result = jsonData;
-        } catch (e) {
-          console.error("Error parsing line:" + line, e);
-        }
-      }
-    }
-  }
-
-  // If there's any remaining content in the buffer after processing all chunks, try to process it.
-  if (buffer.trim() !== "") {
-    try {
-      const jsonData = JSON.parse(buffer);
-      result = jsonData;
-    } catch (e) {
-      console.error("Error parsing the final buffer content:", e);
-    }
-  }
-
-  return result;
-}

package/src/editor/ai/GhostWriter.tsx_

@@ -267,16 +267,16 @@ export function GhostWriter() {
 
             role: "user",
             name: "user",
+            id: Date.now(),
           },
         ],
-        editContext,
-        createEditorAiContext,
+        { editContext, createAiContext: createEditorAiContext },
         {
           addAllContent: true,
           profile: "ghostwriter",
+          model: "gpt-4.1",
         },
         undefined,
-        "gpt-4.1",
         handleAiResponse,
       );
 

package/src/editor/media-selector/AiImageSearch.tsx

@@ -61,10 +61,10 @@ export function AiImageSearch({
                 "Reply with search terms only!",
               name: "user",
               role: "user",
+              id: crypto.randomUUID(), // Use proper UUID instead of Date.now()
             },
           ],
-          editContext,
-          createEditorAiContext,
+          { editContext, createAiContext: createEditorAiContext },
           { allowedFunctions: ["get-content"], addContextContent: true },
           { signal: abortController.signal },
         );