@alpaca-editor/core 1.0.4027 → 1.0.4031

package/src/editor/ai/AiTerminal.tsx

@@ -10,14 +10,24 @@ import { Dropdown } from "primereact/dropdown";
 
 import { WizardIcon } from "../ui/Icons";
 import { AiResponseMessage } from "./AiResponseMessage";
+import { AiProfile, loadAiProfiles } from "../services/aiService";
 import {
-  AiProfile,
-  loadAiProfiles,
-  executePrompt,
-} from "../services/aiService";
+  startAgent,
+  connectToAgentStream,
+  getAgentStatus,
+  getRunningAgents,
+  getAgent,
+  getAgents,
+  getChatHistory,
+  cancelAgent,
+  AgentStreamMessageType,
+  StartAgentRequest,
+  AgentStreamMessage,
+} from "../services/agentService";
 import { EditOperation } from "../../types";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { Settings } from "lucide-react";
+import { AgentCostDisplay } from "./AgentCostDisplay";
 
 type Response = {
   messages: Message[];
@@ -27,6 +37,14 @@ type Response = {
   numCachedTokens: number;
   state: string;
   agentName?: string; // Updated agent name (only sent when the agent name has been updated)
+  // Cost information from backend
+  totalCost?: number;
+  totalInputTokenCost?: number;
+  totalOutputTokenCost?: number;
+  totalCachedTokenCost?: number;
+  totalInputTokens?: number;
+  totalOutputTokens?: number;
+  totalCachedTokens?: number;
 };
 
 export type ToolCall = {
@@ -48,9 +66,22 @@ export type Message = {
   tool_call_id?: string; // For tool response messages
 };
 
+// Helper function to format message content
+function formatMessageContent(content: string): string {
+  return (
+    content
+      ?.trim()
+      ?.replaceAll("\n", "<br>")
+      ?.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>") // Bold markdown
+      ?.replace(
+        /\[([^\]]+)\]\(([^)]+)\)/g,
+        '<a href="$2" target="_blank" class="text-blue-500" rel="noopener noreferrer">$1</a>',
+      ) || "" // Links
+  );
+}
+
 export type AiContext = {
   promptData: any;
-  endpoint: string;
   callback?: (response: Response) => void;
 };
 
@@ -58,6 +89,15 @@ export type AiTerminalOptions = {
   initialPrompt?: string;
   hiddenSystemPrompt?: string;
   initialMessages?: Message[];
+  agentId?: string;
+  // Cost information for loaded agent sessions
+  totalCost?: number;
+  totalInputTokenCost?: number;
+  totalOutputTokenCost?: number;
+  totalCachedTokenCost?: number;
+  totalInputTokens?: number;
+  totalOutputTokens?: number;
+  totalCachedTokens?: number;
 };
 
 export function AiTerminal({
@@ -87,7 +127,9 @@ export function AiTerminal({
   const [profiles, setProfiles] = useState<AiProfile[]>([]);
   const [activeProfile, setActiveProfile] = useState<AiProfile>();
   const [initialPromptExecuted, setInitialPromptExecuted] = useState(false);
-  const [agentId, setAgentId] = useState<string>(() => crypto.randomUUID());
+  const [agentId, setAgentId] = useState<string>(
+    () => options?.agentId || crypto.randomUUID(),
+  );
   const selection = editContext.selection;
   const terminalRef = useRef<{ submit: () => void }>(null);
   const [responseMessages, setResponseMessages] = useState<Message[]>(
@@ -150,11 +192,7 @@ export function AiTerminal({
 
       // 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>") || "";
+        const formattedContent = formatMessageContent(message.content || "");
 
         return {
           ...message,
@@ -164,8 +202,6 @@ export function AiTerminal({
         };
       });
 
-      console.log("AiTerminal: Formatted messages", formattedMessages);
-
       // Update the internal message states
       setMessages(formattedMessages);
       setResponseMessages(formattedMessages);
@@ -174,13 +210,20 @@ export function AiTerminal({
       const initialResponse: Response = {
         messages: formattedMessages,
         editOperations: [],
-        numInputTokens: 0,
-        numOutputTokens: 0,
-        numCachedTokens: 0,
+        numInputTokens: options?.totalInputTokens || 0,
+        numOutputTokens: options?.totalOutputTokens || 0,
+        numCachedTokens: options?.totalCachedTokens || 0,
         state: "loaded",
+        // Include cost information from loaded agent session
+        totalCost: options?.totalCost,
+        totalInputTokenCost: options?.totalInputTokenCost,
+        totalOutputTokenCost: options?.totalOutputTokenCost,
+        totalCachedTokenCost: options?.totalCachedTokenCost,
+        totalInputTokens: options?.totalInputTokens,
+        totalOutputTokens: options?.totalOutputTokens,
+        totalCachedTokens: options?.totalCachedTokens,
       };
 
-      console.log("AiTerminal: Setting response", initialResponse);
       setResponse(initialResponse);
 
       // Create individual Terminal messages for each conversation message
@@ -280,11 +323,7 @@ export function AiTerminal({
     // Replace the conversation history with the authoritative response from AI
     if (updatedMessages && Array.isArray(updatedMessages)) {
       const formattedMessages = updatedMessages.map((message) => {
-        const formattedContent =
-          message.content
-            ?.trim()
-            ?.replaceAll("\n", "<br>")
-            ?.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>") || "";
+        const formattedContent = formatMessageContent(message.content || "");
 
         return {
           ...message,
@@ -333,7 +372,6 @@ export function AiTerminal({
 
     const context = createAiContext({ editContext });
 
-    let lastOpIndex = 0;
     const selectedText = editContext?.selectedRange?.text || null;
     if (!activeProfile || !model) return;
 
@@ -357,47 +395,418 @@ export function AiTerminal({
     setMessages((prevMessages) => [...prevMessages, userMessage]);
     setResponseMessages((prevMessages) => [...prevMessages, userMessage]);
 
-    const response = await executePrompt(
-      messages,
-      context,
-      {
+    try {
+      // Step 1: Start the agent execution
+      const startRequest: StartAgentRequest = {
+        agentId,
+        messages,
+        sessionId: editContext!.sessionId,
         profileId: activeProfile.id,
-        selection,
-        selectedText,
         model,
-        sessionId: editContext!.sessionId,
-        agentId,
+        itemid: context.promptData.itemid,
+        language: context.promptData.language,
+        version: context.promptData.version,
+        selection,
+        selectedText: selectedText || undefined,
+        allowedFunctions: context.promptData.allowedFunctions,
+        addContextContent: context.promptData.addContextContent,
+        addAllContent: context.promptData.addAllContent,
         addSelectedComponents: true,
-      },
-      undefined,
-      (response: any) => {
-        setResponse(response);
-        handleResponse(response, callback, false);
-      },
-    );
-
-    if (response) {
-      handleResponse(response, callback, true);
-
-      // Handle agent name update
-      if ((response as any).agentName && onAgentNameUpdate) {
-        onAgentNameUpdate((response as any).agentName);
-      }
-
-      if (context.callback) context.callback(response);
-      editContext?.requestRefresh("immediate");
-    }
+        profile: activeProfile.name,
+      };
 
-    // if (response?.responseText)
-    //   newMessages.push({
-    //     content: response.responseText,
-    //     role: "assistant",
-    //     name: "assistant",
-    //   });
+      const startResponse = await startAgent(startRequest, context);
+      console.log("Agent started:", startResponse);
 
-    setResponse(response ? response : undefined);
+      // Step 2: Connect to the agent stream for real-time updates
+      const abortController = new AbortController();
+      let accumulatedResponse: any = {
+        messages: [...messages],
+        editOperations: [],
+        numInputTokens: 0,
+        numOutputTokens: 0,
+        numCachedTokens: 0,
+        state: "running",
+      };
+      let completionProcessed = false;
+
+      try {
+        console.log("Connecting to agent stream");
+        await connectToAgentStream(
+          agentId,
+          context,
+          (streamMessage) => {
+            // console.log(
+            //   "Stream message:",
+            //   streamMessage,
+            //   new Date().toISOString(),
+            // );
+
+            // Message types are now normalized in agentService.ts
+            switch (streamMessage.type) {
+              case AgentStreamMessageType.StatusUpdate:
+                //console.log("Status update:", streamMessage.data);
+                break;
+
+              case AgentStreamMessageType.ContentChunk:
+                if (streamMessage.data) {
+                  // Handle incremental content updates
+                  if (
+                    streamMessage.data.isIncremental &&
+                    streamMessage.data.deltaContent
+                  ) {
+                    // Find the last assistant message to append delta content to
+                    const updatedMessages = [
+                      ...(accumulatedResponse.messages || []),
+                    ];
+                    let lastAssistantMessage = null;
+                    let lastAssistantIndex = -1;
+
+                    // Find the last assistant message
+                    for (let i = updatedMessages.length - 1; i >= 0; i--) {
+                      if (updatedMessages[i].role === "assistant") {
+                        lastAssistantMessage = updatedMessages[i];
+                        lastAssistantIndex = i;
+                        break;
+                      }
+                    }
+
+                    // If no assistant message exists, or the last one has tool calls, create a new one
+                    if (
+                      !lastAssistantMessage ||
+                      (lastAssistantMessage.tool_calls &&
+                        lastAssistantMessage.tool_calls.length > 0)
+                    ) {
+                      lastAssistantMessage = {
+                        id: crypto.randomUUID(),
+                        role: "assistant",
+                        name: "assistant",
+                        content: "",
+                        tool_calls: [],
+                      };
+                      updatedMessages.push(lastAssistantMessage);
+                      lastAssistantIndex = updatedMessages.length - 1;
+                    }
+
+                    // Append the delta content to build up the full message
+                    const currentContent = lastAssistantMessage.content || "";
+                    const newContent =
+                      currentContent + streamMessage.data.deltaContent;
+
+                    // Update the message with accumulated content
+                    updatedMessages[lastAssistantIndex] = {
+                      ...lastAssistantMessage,
+                      content: newContent,
+                    };
+
+                    // Update accumulated response with incremental content
+                    accumulatedResponse = {
+                      ...accumulatedResponse,
+                      ...streamMessage.data,
+                      messages: updatedMessages,
+                      editOperations:
+                        streamMessage.data.editOperations ||
+                        accumulatedResponse.editOperations,
+                    };
+                  } else {
+                    // Non-incremental update - use as provided
+                    accumulatedResponse = {
+                      ...accumulatedResponse,
+                      ...streamMessage.data,
+                      editOperations:
+                        streamMessage.data.editOperations ||
+                        accumulatedResponse.editOperations,
+                    };
+                  }
+
+                  // Always trigger UI update for content chunks
+                  handleResponse(accumulatedResponse, callback, false);
+                }
+                break;
+
+              case AgentStreamMessageType.ToolCall:
+                //  console.log("Tool call received:", streamMessage.data);
+                if (streamMessage.data) {
+                  // Find or create the assistant message that contains this tool call
+                  const updatedMessages = [
+                    ...(accumulatedResponse.messages || []),
+                  ];
+                  let lastAssistantMessage = null;
+                  let lastAssistantIndex = -1;
+
+                  // Find the last assistant message
+                  for (let i = updatedMessages.length - 1; i >= 0; i--) {
+                    if (updatedMessages[i].role === "assistant") {
+                      lastAssistantMessage = updatedMessages[i];
+                      lastAssistantIndex = i;
+                      break;
+                    }
+                  }
+
+                  // If no assistant message exists, create one
+                  if (!lastAssistantMessage) {
+                    lastAssistantMessage = {
+                      id: crypto.randomUUID(),
+                      role: "assistant",
+                      name: "assistant",
+                      content: "",
+                      tool_calls: [],
+                    };
+                    updatedMessages.push(lastAssistantMessage);
+                    lastAssistantIndex = updatedMessages.length - 1;
+                  }
+
+                  // Add or update the tool call
+                  const toolCall = {
+                    id: streamMessage.data.id,
+                    displayName: streamMessage.data.displayName,
+                    function: {
+                      name:
+                        streamMessage.data.function?.name ||
+                        streamMessage.data.name,
+                      arguments:
+                        streamMessage.data.function?.arguments ||
+                        streamMessage.data.arguments,
+                    },
+                  };
+
+                  // Update or add the tool call to the assistant message
+                  const existingToolCalls =
+                    lastAssistantMessage.tool_calls || [];
+                  const existingIndex = existingToolCalls.findIndex(
+                    (tc: any) => tc.id === toolCall.id,
+                  );
+
+                  let updatedToolCalls;
+                  if (existingIndex >= 0) {
+                    // Update existing tool call
+                    updatedToolCalls = [...existingToolCalls];
+                    updatedToolCalls[existingIndex] = toolCall;
+                  } else {
+                    // Add new tool call
+                    updatedToolCalls = [...existingToolCalls, toolCall];
+                  }
+
+                  // Update the assistant message with the tool call
+                  updatedMessages[lastAssistantIndex] = {
+                    ...lastAssistantMessage,
+                    tool_calls: updatedToolCalls,
+                  };
+
+                  // Update accumulated response
+                  accumulatedResponse = {
+                    ...accumulatedResponse,
+                    messages: updatedMessages,
+                  };
+
+                  // Trigger UI update to show the tool call
+                  handleResponse(accumulatedResponse, callback, false);
+                }
+                break;
+
+              case AgentStreamMessageType.ToolResult:
+                console.log("Tool result received:", streamMessage.data);
+                if (streamMessage.data) {
+                  // Find the assistant message and tool call to update with the result
+                  const updatedMessages = [
+                    ...(accumulatedResponse.messages || []),
+                  ];
+
+                  // Find the assistant message with the matching tool call ID
+                  for (let i = updatedMessages.length - 1; i >= 0; i--) {
+                    if (
+                      updatedMessages[i].role === "assistant" &&
+                      updatedMessages[i].tool_calls
+                    ) {
+                      const toolCalls = updatedMessages[i].tool_calls || [];
+                      const toolCallIndex = toolCalls.findIndex(
+                        (tc: any) => tc.id === streamMessage.data.toolCallId,
+                      );
+
+                      if (toolCallIndex >= 0) {
+                        // Update the tool call with the result
+                        const updatedToolCalls = [...toolCalls];
+                        updatedToolCalls[toolCallIndex] = {
+                          ...updatedToolCalls[toolCallIndex],
+                          function: {
+                            ...updatedToolCalls[toolCallIndex].function,
+                            result: streamMessage.data.result,
+                          },
+                        };
+
+                        // Update the message
+                        updatedMessages[i] = {
+                          ...updatedMessages[i],
+                          tool_calls: updatedToolCalls,
+                        };
+                        break;
+                      }
+                    }
+                  }
+
+                  // Update accumulated response
+                  accumulatedResponse = {
+                    ...accumulatedResponse,
+                    messages: updatedMessages,
+                  };
+
+                  // Trigger UI update to show the tool result
+                  handleResponse(accumulatedResponse, callback, false);
+                }
+                break;
+
+              case AgentStreamMessageType.Completed:
+                if (streamMessage.data) {
+                  // Final completion data
+                  const finalResponse = {
+                    messages:
+                      streamMessage.data.messages ||
+                      accumulatedResponse.messages,
+                    editOperations:
+                      streamMessage.data.editOperations ||
+                      accumulatedResponse.editOperations,
+                    numInputTokens:
+                      streamMessage.data.tokenUsage?.inputTokens ||
+                      accumulatedResponse.numInputTokens,
+                    numOutputTokens:
+                      streamMessage.data.tokenUsage?.outputTokens ||
+                      accumulatedResponse.numOutputTokens,
+                    numCachedTokens:
+                      streamMessage.data.tokenUsage?.cachedTokens ||
+                      accumulatedResponse.numCachedTokens,
+                    state: "completed",
+                    agentName: streamMessage.data.agentName,
+                    // Add cost fields from backend (try both tokenUsage object and direct properties)
+                    totalCost:
+                      streamMessage.data.totalCost ||
+                      streamMessage.data.tokenUsage?.totalCost,
+                    totalInputTokenCost:
+                      streamMessage.data.totalInputTokenCost ||
+                      streamMessage.data.tokenUsage?.inputTokenCost,
+                    totalOutputTokenCost:
+                      streamMessage.data.totalOutputTokenCost ||
+                      streamMessage.data.tokenUsage?.outputTokenCost,
+                    totalCachedTokenCost:
+                      streamMessage.data.totalCachedTokenCost ||
+                      streamMessage.data.tokenUsage?.cachedTokenCost,
+                    totalInputTokens:
+                      streamMessage.data.totalInputTokens ||
+                      streamMessage.data.tokenUsage?.inputTokens,
+                    totalOutputTokens:
+                      streamMessage.data.totalOutputTokens ||
+                      streamMessage.data.tokenUsage?.outputTokens,
+                    totalCachedTokens:
+                      streamMessage.data.totalCachedTokens ||
+                      streamMessage.data.tokenUsage?.cachedTokens,
+                  };
+
+                  completionProcessed = true;
+                  setResponse(finalResponse);
+
+                  // On completion, just update the internal state and call the final callback
+                  // Don't call handleResponse again as it would duplicate the message
+                  // The Terminal component will clear the streaming response and add it to the message history
+                  const formattedMessages = (finalResponse.messages || []).map(
+                    (message: any) => {
+                      const formattedContent = formatMessageContent(
+                        message.content || "",
+                      );
+
+                      return {
+                        ...message,
+                        content: message.content || "",
+                        formattedContent: formattedContent,
+                        tool_calls: message.tool_calls || [],
+                      };
+                    },
+                  );
+
+                  // Update internal state without triggering a new render via handleResponse
+                  setMessages([...formattedMessages]);
+                  setResponseMessages([...formattedMessages]);
+
+                  // Only call the terminal callback to mark completion (this will add to history)
+                  callback(
+                    <AiResponseMessage
+                      messages={formattedMessages}
+                      editOperations={finalResponse.editOperations}
+                      finished={true}
+                    />,
+                    true,
+                  );
+
+                  // Handle agent name update
+                  if (finalResponse.agentName && onAgentNameUpdate) {
+                    onAgentNameUpdate(finalResponse.agentName);
+                  }
+
+                  if (context.callback) context.callback(finalResponse);
+                  //editContext?.requestRefresh("immediate");
+                }
+                break;
+
+              case AgentStreamMessageType.Error:
+                console.error("Agent execution error:", streamMessage.error);
+                const errorResponse = {
+                  ...accumulatedResponse,
+                  state: "error",
+                  error: streamMessage.error,
+                };
+                setResponse(errorResponse);
+                handleResponse(errorResponse, callback, true);
+                break;
+
+              default:
+                console.log(
+                  "Unhandled stream message type:",
+                  streamMessage.type,
+                );
+                break;
+            }
+          },
+          abortController.signal,
+        );
 
-    // setMessages(newMessages);
+        // If we reach here, the stream ended without a Completed message
+        if (!completionProcessed) {
+          //    console.log("Stream ended without Completed message, cleaning up");
+          const finalResponse = {
+            ...accumulatedResponse,
+            state: "completed",
+          };
+          setResponse(finalResponse);
+          handleResponse(finalResponse, callback, true);
+        }
+      } catch (streamError) {
+        console.error("Stream connection error:", streamError);
+        const errorMessage =
+          streamError instanceof Error
+            ? streamError.message
+            : "Unknown stream error";
+        const errorResponse = {
+          ...accumulatedResponse,
+          state: "error",
+          error: errorMessage,
+        };
+        setResponse(errorResponse);
+        handleResponse(errorResponse, callback, true);
+      }
+    } catch (error) {
+      console.error("Error starting agent:", error);
+      const errorMessage =
+        error instanceof Error ? error.message : "Unknown error";
+      const errorResponse = {
+        messages: [...messages],
+        editOperations: [],
+        numInputTokens: 0,
+        numOutputTokens: 0,
+        numCachedTokens: 0,
+        state: "error",
+        error: errorMessage,
+      };
+      setResponse(errorResponse);
+      handleResponse(errorResponse, callback, true);
+    }
   }
 
   useEffect(() => {
@@ -428,19 +837,39 @@ export function AiTerminal({
             }}
             initialMessages={initialTerminalMessages}
             infobar={
-              response?.numInputTokens && response?.numInputTokens > 0 ? (
-                <div
-                  className="text-right text-gray-400"
-                  style={{ fontSize: "10px" }}
-                >
-                  Tokens in: {response?.numInputTokens?.toLocaleString()} out:{" "}
-                  {response?.numOutputTokens?.toLocaleString()}{" "}
-                  {response?.numCachedTokens
-                    ? `cached: ${response?.numCachedTokens?.toLocaleString()} `
-                    : ""}
-                  {response?.state}
-                </div>
-              ) : null
+              <AgentCostDisplay
+                response={
+                  response
+                    ? {
+                        numInputTokens: response.numInputTokens,
+                        numOutputTokens: response.numOutputTokens,
+                        numCachedTokens: response.numCachedTokens,
+                        totalCost: response.totalCost,
+                        inputCost: response.totalInputTokenCost,
+                        outputCost: response.totalOutputTokenCost,
+                        cachedCost: response.totalCachedTokenCost,
+                      }
+                    : null
+                }
+                totalTokens={
+                  response
+                    ? {
+                        input:
+                          response.totalInputTokens || response.numInputTokens,
+                        output:
+                          response.totalOutputTokens ||
+                          response.numOutputTokens,
+                        cached:
+                          response.totalCachedTokens ||
+                          response.numCachedTokens,
+                        totalCost: response.totalCost || 0,
+                        inputCost: response.totalInputTokenCost || 0,
+                        outputCost: response.totalOutputTokenCost || 0,
+                        cachedCost: response.totalCachedTokenCost || 0,
+                      }
+                    : undefined
+                }
+              />
             }
             prompt={prompt}
             setPrompt={setPrompt}
@@ -515,6 +944,8 @@ export function AiTerminal({
                           value={model}
                           onChange={(e) => setModel(e.value)}
                           options={activeProfile.models}
+                          optionLabel="name"
+                          optionValue="id"
                         />
                       </div>
                     )}

package/src/editor/ai/editorAiContext.ts

@@ -5,10 +5,7 @@ export function createEditorAiContext({
 }: {
   editContext: EditContextType;
 }) {
-  const aiPromptUrl = editContext.configuration.services.aiService.promptUrl;
-
   return {
-    endpoint: aiPromptUrl,
     promptData: {
       itemid: editContext.currentItemDescriptor?.id,
       language: editContext.currentItemDescriptor?.language,