@alpaca-editor/core 1.0.4027 → 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

@@ -18,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;
@@ -39,12 +41,13 @@ function convertAgentMessagesToTerminalMessages(
         name: msg.name,
         role: msg.role,
         tool_calls:
-          msg.toolCalls?.map((toolCall) => ({
+          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,
@@ -77,6 +80,16 @@ 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(() => {
@@ -86,27 +99,43 @@ export function Agents({
   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);
+      const inactiveAgentsResult = await getChatHistory(
+        context,
+        "completed",
+        20,
+      );
 
-      if (activeAgentsResult.type === "success" && activeAgentsResult.data) {
-        const activeAgents = activeAgentsResult.data;
+      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,
+              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,
@@ -116,16 +145,15 @@ export function Agents({
           }),
         );
 
-        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]);
@@ -134,11 +162,8 @@ export function Agents({
         }
       }
 
-      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);
@@ -160,9 +185,10 @@ export function Agents({
     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);
@@ -181,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
@@ -218,7 +255,17 @@ export function Agents({
       id: `agent-${agent.id}`,
       title: agent.name,
       agentId: agent.id,
-      options: initialOptions,
+      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)
         : [],
@@ -347,6 +394,8 @@ export function Agents({
                 ...terminal.options,
                 // Pass the pre-loaded messages to the terminal
                 initialMessages: terminal.messages,
+                // Pass the agentId to maintain continuity
+                agentId: terminal.agentId,
               }}
               onAgentNameUpdate={(name) => {
                 // Update the terminal title when agent name is updated

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>
+  );
+}