@alpaca-editor/core 1.0.4026 → 1.0.4030

package/src/editor/ai/AgentCostDisplay.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
+import { useEditorSettings } from "../hooks/useEditorSettings";
+
+import { ExecutePromptResponse } from "../services/aiService";
+
+interface AgentCostDisplayProps {
+  /** Optional className for styling */
+  className?: string;
+  /** Current response data with token usage */
+  response?: {
+    numInputTokens: number;
+    numOutputTokens: number;
+    numCachedTokens: number;
+    totalCost?: number;
+    inputCost?: number;
+    outputCost?: number;
+    cachedCost?: number;
+  } | null;
+  /** Cumulative token usage across all messages in the session */
+  totalTokens?: {
+    input: number;
+    output: number;
+    cached: number;
+    totalCost: number;
+    inputCost: number;
+    outputCost: number;
+    cachedCost: number;
+  };
+}
+
+export function AgentCostDisplay({
+  className = "",
+  response,
+  totalTokens,
+}: AgentCostDisplayProps) {
+  const [showCostPopover, setShowCostPopover] = useState(false);
+  const costPopoverRef = useRef<HTMLDivElement>(null);
+  const editorSettings = useEditorSettings();
+  const currency = editorSettings?.currency || "USD";
+
+  // Handle click outside for cost popover
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        costPopoverRef.current &&
+        !costPopoverRef.current.contains(event.target as Node)
+      ) {
+        setShowCostPopover(false);
+      }
+    }
+
+    if (showCostPopover) {
+      document.addEventListener("click", handleClickOutside);
+      return () => {
+        document.removeEventListener("click", handleClickOutside);
+      };
+    }
+  }, [showCostPopover]);
+
+  // Calculate estimated cost based on typical pricing (rough estimates)
+  // Claude 3.5 Sonnet pricing: ~$3/MTok input, ~$15/MTok output
+  const calculateEstimatedCost = (
+    inputTokens: number,
+    outputTokens: number,
+    cachedTokens: number,
+  ) => {
+    const inputCost = (inputTokens / 1000000) * 3; // $3 per million tokens
+    const outputCost = (outputTokens / 1000000) * 15; // $15 per million tokens
+    const cachedCost = (cachedTokens / 1000000) * 0.3; // Cached tokens are typically much cheaper
+    return {
+      inputCost,
+      outputCost,
+      cachedCost,
+      totalCost: inputCost + outputCost + cachedCost,
+    };
+  };
+
+  // Use actual cost data if available, otherwise calculate estimates
+  const currentCost = response
+    ? response.totalCost !== undefined
+      ? {
+          inputCost: response.inputCost ?? 0,
+          outputCost: response.outputCost ?? 0,
+          cachedCost: response.cachedCost ?? 0,
+          totalCost: response.totalCost,
+        }
+      : calculateEstimatedCost(
+          response.numInputTokens,
+          response.numOutputTokens,
+          response.numCachedTokens,
+        )
+    : null;
+
+  const displayTotalCost =
+    totalTokens?.totalCost ?? currentCost?.totalCost ?? 0;
+  const hasTokenData =
+    response &&
+    (response.numInputTokens > 0 ||
+      response.numOutputTokens > 0 ||
+      response.numCachedTokens > 0);
+  const hasTotalData =
+    totalTokens &&
+    (totalTokens.input > 0 || totalTokens.output > 0 || totalTokens.cached > 0);
+  const hasCostData =
+    (response && response.totalCost && response.totalCost > 0) ||
+    (totalTokens && totalTokens.totalCost && totalTokens.totalCost > 0);
+
+  if (!hasTokenData && !hasTotalData && !hasCostData) {
+    return null;
+  }
+
+  return (
+    <div className={`relative ${className}`} ref={costPopoverRef}>
+      <Popover open={showCostPopover} onOpenChange={setShowCostPopover}>
+        <PopoverTrigger asChild>
+          <div
+            className="cursor-pointer text-right text-gray-400 hover:text-gray-600"
+            style={{ fontSize: "10px" }}
+            onClick={() => setShowCostPopover(!showCostPopover)}
+          >
+            Total Cost: {displayTotalCost.toFixed(2)} {currency}
+          </div>
+        </PopoverTrigger>
+        <PopoverContent className="w-80 p-4" align="end" side="bottom">
+          <div className="space-y-4">
+            <div className="border-b pb-2">
+              <h4 className="text-sm font-semibold">Cost Breakdown</h4>
+            </div>
+
+            <div className="space-y-3">
+              {/* Session Cost Breakdown */}
+              {(hasTotalData || hasTokenData) && (
+                <>
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-semibold text-gray-600">
+                      Session Cost:
+                    </span>
+                    <span className="text-sm font-semibold">
+                      {displayTotalCost.toFixed(2)} {currency}
+                    </span>
+                  </div>
+
+                  <div className="space-y-2 border-t pt-2">
+                    {hasTotalData ? (
+                      <>
+                        <div className="flex items-center justify-between">
+                          <span className="text-xs text-gray-500">
+                            Input tokens:
+                          </span>
+                          <span className="text-xs">
+                            {totalTokens.input.toLocaleString()} (
+                            {totalTokens.inputCost.toFixed(2)} {currency})
+                          </span>
+                        </div>
+
+                        <div className="flex items-center justify-between">
+                          <span className="text-xs text-gray-500">
+                            Output tokens:
+                          </span>
+                          <span className="text-xs">
+                            {totalTokens.output.toLocaleString()} (
+                            {totalTokens.outputCost.toFixed(2)} {currency})
+                          </span>
+                        </div>
+
+                        {totalTokens.cached > 0 && (
+                          <div className="flex items-center justify-between">
+                            <span className="text-xs text-gray-500">
+                              Cached tokens:
+                            </span>
+                            <span className="text-xs">
+                              {totalTokens.cached.toLocaleString()} (
+                              {totalTokens.cachedCost.toFixed(2)} {currency})
+                            </span>
+                          </div>
+                        )}
+                      </>
+                    ) : (
+                      response &&
+                      currentCost && (
+                        <>
+                          <div className="flex items-center justify-between">
+                            <span className="text-xs text-gray-500">
+                              Input tokens:
+                            </span>
+                            <span className="text-xs">
+                              {response.numInputTokens.toLocaleString()}(
+                              {currentCost.inputCost.toFixed(2)} {currency})
+                            </span>
+                          </div>
+
+                          <div className="flex items-center justify-between">
+                            <span className="text-xs text-gray-500">
+                              Output tokens:
+                            </span>
+                            <span className="text-xs">
+                              {response.numOutputTokens.toLocaleString()}(
+                              {currentCost.outputCost.toFixed(2)} {currency})
+                            </span>
+                          </div>
+
+                          {response.numCachedTokens > 0 && (
+                            <div className="flex items-center justify-between">
+                              <span className="text-xs text-gray-500">
+                                Cached tokens:
+                              </span>
+                              <span className="text-xs">
+                                {response.numCachedTokens.toLocaleString()}(
+                                {currentCost.cachedCost.toFixed(2)} {currency})
+                              </span>
+                            </div>
+                          )}
+
+                          <div className="mt-2 text-xs text-gray-400">
+                            * Estimated costs based on typical Claude 3.5
+                            pricing
+                          </div>
+                        </>
+                      )
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

package/src/editor/ai/Agents.tsx

@@ -4,7 +4,13 @@ import { EditorAiTerminal } from "./EditorAiTerminal";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { Plus, X, History } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { getAgents, getAgent, getChatHistory, AgentChat, AgentChatMessage } from "../services/agentService";
+import {
+  getAgents,
+  getAgent,
+  getChatHistory,
+  AgentChat,
+  AgentChatMessage,
+} from "../services/agentService";
 import { Message } from "./AiTerminal";
 import {
   Popover,
@@ -12,6 +18,8 @@ import {
   PopoverTrigger,
 } from "../../components/ui/popover";
 import { Button } from "../../components/ui/button";
+import { useEditContext } from "../client/editContext";
+import { AiContext } from "./AiTerminal";
 
 interface TerminalInstance {
   id: string;
@@ -21,32 +29,41 @@ interface TerminalInstance {
   messages?: Message[];
 }
 
-function convertAgentMessagesToTerminalMessages(agentMessages: AgentChatMessage[]): Message[] {
-  return agentMessages
-    // Keep all messages including tool results for complete conversation context
-    .map(msg => ({
-      id: msg.id,
-      content: msg.content,
-      name: msg.name,
-      role: msg.role,
-      tool_calls: msg.toolCalls?.map(toolCall => ({
-        id: toolCall.toolCallId,
-        displayName: toolCall.functionName,
-        function: {
-          name: toolCall.functionName,
-          arguments: toolCall.functionArguments || ""
-        }
-      })) || [],
-      tool_call_id: msg.toolCallId
-    }));
+function convertAgentMessagesToTerminalMessages(
+  agentMessages: AgentChatMessage[],
+): Message[] {
+  return (
+    agentMessages
+      // Keep all messages including tool results for complete conversation context
+      .map((msg) => ({
+        id: msg.id,
+        content: msg.content,
+        name: msg.name,
+        role: msg.role,
+        tool_calls:
+          msg.toolCalls?.map((toolCall: any) => ({
+            id: toolCall.toolCallId,
+            displayName: toolCall.functionName,
+            function: {
+              name: toolCall.functionName,
+              arguments: toolCall.functionArguments || "",
+              result: toolCall.functionResult,
+            },
+          })) || [],
+        tool_call_id: msg.toolCallId,
+      }))
+  );
 }
 
 function formatDateToLocalTime(dateString: string): string {
   // Ensure the date string is treated as UTC if it doesn't have timezone info
-  const normalizedDate = dateString.includes('Z') || dateString.includes('+') || dateString.includes('-', 19) 
-    ? dateString 
-    : dateString + 'Z';
-  
+  const normalizedDate =
+    dateString.includes("Z") ||
+    dateString.includes("+") ||
+    dateString.includes("-", 19)
+      ? dateString
+      : dateString + "Z";
+
   return new Date(normalizedDate).toLocaleString();
 }
 
@@ -63,53 +80,80 @@ export function Agents({
   const [historyPopoverOpen, setHistoryPopoverOpen] = useState(false);
   const [loadingAgents, setLoadingAgents] = useState(true);
   const nextTerminalNumber = useRef(1);
+  const editContext = useEditContext();
+
+  // Create AI context for service calls
+  const createAgentContext = (): AiContext => ({
+    promptData: {
+      itemid: editContext?.currentItemDescriptor?.id,
+      language: editContext?.currentItemDescriptor?.language || "en",
+      version: editContext?.currentItemDescriptor?.version || 1,
+    },
+  });
 
   // Load agents from backend on mount
   useEffect(() => {
     loadAgentsFromBackend();
   }, []);
 
-
-
   const loadAgentsFromBackend = async () => {
     try {
       setLoadingAgents(true);
-      
+      const context = createAgentContext();
+
       // Load active agents
-      const activeAgentsResult = await getAgents("active");
-      
+      const activeAgentsResult = await getAgents(context, "active");
+
       // Load inactive agents for history
-      const inactiveAgentsResult = await getChatHistory("completed", 20);
-      
-      if (activeAgentsResult.type === "success" && activeAgentsResult.data) {
-        const activeAgents = activeAgentsResult.data;
-        
+      const inactiveAgentsResult = await getChatHistory(
+        context,
+        "completed",
+        20,
+      );
+
+      if (activeAgentsResult && Array.isArray(activeAgentsResult)) {
+        const activeAgents = activeAgentsResult;
+
         // Create terminals for active agents
         const activeTerminals: TerminalInstance[] = await Promise.all(
-          activeAgents.map(async (agent, index) => {
+          activeAgents.map(async (agent: any, index: number) => {
             // Load messages for each active agent
             const agentWithMessages = await loadAgentMessages(agent.id);
-            
+
             return {
               id: `agent-${agent.id}`,
-              title: agent.name || `Agent ${index + 1}`,
+              title: agent.name || "New Agent",
               agentId: agent.id,
-              options: initialOptions,
-              messages: agentWithMessages?.messages ? convertAgentMessagesToTerminalMessages(agentWithMessages.messages) : []
+              options: {
+                ...initialOptions,
+                // Pass cost information from loaded agent
+                totalCost: agentWithMessages?.totalCost,
+                totalInputTokenCost: agentWithMessages?.totalInputTokenCost,
+                totalOutputTokenCost: agentWithMessages?.totalOutputTokenCost,
+                totalCachedTokenCost:
+                  agentWithMessages?.totalCachedInputTokenCost,
+                totalInputTokens: agentWithMessages?.totalInputTokens,
+                totalOutputTokens: agentWithMessages?.totalOutputTokens,
+                totalCachedTokens: agentWithMessages?.totalCachedInputTokens,
+              },
+              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) {
+          setTerminals(activeTerminals);
           setActiveTerminalId(activeTerminals[0]!.id);
         } else {
           // Create a default terminal if no active agents
           const defaultTerminal: TerminalInstance = {
             id: `terminal-${nextTerminalNumber.current}`,
-            title: `Agent ${nextTerminalNumber.current}`,
+            title: "New Agent",
             options: initialOptions,
           };
           setTerminals([defaultTerminal]);
@@ -117,11 +161,10 @@ export function Agents({
           nextTerminalNumber.current++;
         }
       }
-      
-      if (inactiveAgentsResult.type === "success" && inactiveAgentsResult.data) {
-        setInactiveAgents(inactiveAgentsResult.data);
+
+      if (inactiveAgentsResult && Array.isArray(inactiveAgentsResult)) {
+        setInactiveAgents(inactiveAgentsResult);
       }
-      
     } catch (error) {
       console.error("Failed to load agents:", error);
       // Create a default terminal on error
@@ -138,11 +181,14 @@ export function Agents({
     }
   };
 
-  const loadAgentMessages = async (agentId: string): Promise<AgentChat | null> => {
+  const loadAgentMessages = async (
+    agentId: string,
+  ): Promise<AgentChat | null> => {
     try {
-      const result = await getAgent(agentId);
-      if (result.type === "success" && result.data) {
-        return result.data;
+      const context = createAgentContext();
+      const result = await getAgent(agentId, context);
+      if (result && result.id) {
+        return result;
       }
     } catch (error) {
       console.error(`Failed to load messages for agent ${agentId}:`, error);
@@ -161,6 +207,17 @@ export function Agents({
     nextTerminalNumber.current++;
   };
 
+  const createNewAgent = (options: AiTerminalOptions) => {
+    const newTerminal: TerminalInstance = {
+      id: `terminal-${nextTerminalNumber.current}`,
+      title: `Agent ${nextTerminalNumber.current}`,
+      options: options,
+    };
+    setTerminals((prev) => [...prev, newTerminal]);
+    setActiveTerminalId(newTerminal.id);
+    nextTerminalNumber.current++;
+  };
+
   const closeTerminal = (terminalId: string) => {
     if (terminals.length <= 1) {
       // Don't close the last terminal
@@ -181,8 +238,8 @@ 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);
-    
+    const existingTerminal = terminals.find((t) => t.agentId === agent.id);
+
     if (existingTerminal) {
       // Switch to existing terminal
       setActiveTerminalId(existingTerminal.id);
@@ -192,14 +249,26 @@ export function Agents({
 
     // 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) : []
+      options: {
+        ...initialOptions,
+        // Pass cost information from loaded agent
+        totalCost: agentWithMessages?.totalCost,
+        totalInputTokenCost: agentWithMessages?.totalInputTokenCost,
+        totalOutputTokenCost: agentWithMessages?.totalOutputTokenCost,
+        totalCachedTokenCost: agentWithMessages?.totalCachedInputTokenCost,
+        totalInputTokens: agentWithMessages?.totalInputTokens,
+        totalOutputTokens: agentWithMessages?.totalOutputTokens,
+        totalCachedTokens: agentWithMessages?.totalCachedInputTokens,
+      },
+      messages: agentWithMessages?.messages
+        ? convertAgentMessagesToTerminalMessages(agentWithMessages.messages)
+        : [],
     };
 
     setTerminals((prev) => [...prev, newTerminal]);
@@ -249,7 +318,10 @@ export function Agents({
 
         {/* History Popover */}
         <div className="flex items-center px-1">
-          <Popover open={historyPopoverOpen} onOpenChange={setHistoryPopoverOpen}>
+          <Popover
+            open={historyPopoverOpen}
+            onOpenChange={setHistoryPopoverOpen}
+          >
             <PopoverTrigger asChild>
               <SimpleIconButton
                 onClick={() => {}}
@@ -259,7 +331,7 @@ export function Agents({
               />
             </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">
+              <div className="border-b border-gray-100 px-3 py-2 text-xs font-medium text-gray-500">
                 Agent History
               </div>
               <div className="max-h-80 overflow-y-auto">
@@ -271,16 +343,16 @@ export function Agents({
                   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"
+                      className="cursor-pointer border-b border-gray-50 px-3 py-2 text-xs hover:bg-gray-50"
                       onClick={() => openAgentFromHistory(agent)}
                     >
-                      <div className="font-medium text-gray-900 truncate">
+                      <div className="truncate font-medium text-gray-900">
                         {agent.name}
                       </div>
-                      <div className="text-gray-500 truncate">
+                      <div className="truncate text-gray-500">
                         {agent.profileName}
                       </div>
-                      <div className="text-gray-400 text-xs">
+                      <div className="text-xs text-gray-400">
                         {formatDateToLocalTime(agent.updatedDate)}
                       </div>
                     </div>
@@ -317,12 +389,22 @@ export function Agents({
               activeTerminalId === terminal.id ? "block" : "hidden",
             )}
           >
-            <EditorAiTerminal 
+            <EditorAiTerminal
               options={{
                 ...terminal.options,
                 // Pass the pre-loaded messages to the terminal
-                initialMessages: terminal.messages
-              }} 
+                initialMessages: terminal.messages,
+                // Pass the agentId to maintain continuity
+                agentId: terminal.agentId,
+              }}
+              onAgentNameUpdate={(name) => {
+                // Update the terminal title when agent name is updated
+                setTerminals((prev) =>
+                  prev.map((t) =>
+                    t.id === terminal.id ? { ...t, title: name } : t,
+                  ),
+                );
+              }}
             />
           </div>
         ))}