@alpaca-editor/core 1.0.4063 → 1.0.4064

package/src/editor/ai/AgentTerminal.tsx

@@ -1,5 +1,17 @@
 import React, { useEffect, useState, useRef, useCallback } from "react";
-import { Send, Bot, AlertCircle, Loader2, User } from "lucide-react";
+import {
+  Send,
+  Bot,
+  AlertCircle,
+  Loader2,
+  User,
+  X,
+  FileText,
+  Puzzle,
+  Type,
+  Plus,
+  MessageSquare,
+} from "lucide-react";
 import { DancingDots } from "./DancingDots";
 import {
   AgentChatMessage,
@@ -10,6 +22,8 @@ import {
   StartAgentRequest,
   Agent,
   AgentDetails,
+  updateAgentMetadata,
+  AgentMetadata,
 } from "../services/agentService";
 import { useEditContext } from "../client/editContext";
 import { Textarea } from "../../components/ui/textarea";
@@ -17,6 +31,8 @@ import { Button } from "../../components/ui/button";
 import { AiResponseMessage } from "./AiResponseMessage";
 import { AgentCostDisplay } from "./AgentCostDisplay";
 import { Message } from "./AiTerminal";
+import { getComponentById } from "../componentTreeHelper";
+import { Comment } from "../../types";
 
 // Simple user message component
 const UserMessage = ({ message }: { message: AgentChatMessage }) => {
@@ -160,7 +176,19 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
   const [isLoading, setIsLoading] = useState(false);
   const [isConnecting, setIsConnecting] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [agentMetadata, setAgentMetadata] = useState<AgentMetadata | null>(
+    null,
+  );
   const [isWaitingForResponse, setIsWaitingForResponse] = useState(false);
+  const [resolvedPageName, setResolvedPageName] = useState<string | undefined>(
+    undefined,
+  );
+  const [resolvedComponentName, setResolvedComponentName] = useState<
+    string | undefined
+  >(undefined);
+  const [resolvedFieldName, setResolvedFieldName] = useState<
+    string | undefined
+  >(undefined);
   const [promptHistory, setPromptHistory] = useState<string[]>(() => {
     if (typeof window !== "undefined") {
       return JSON.parse(
@@ -732,6 +760,37 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
         setMessages([]);
         setError(null);
         setIsLoading(false);
+
+        // Initialize local context for a brand-new agent (not yet persisted)
+        const item = editContext?.currentItemDescriptor;
+        const initialLocalContext: AgentMetadata | null = item
+          ? {
+              additionalData: {
+                context: {
+                  pages: [
+                    {
+                      id: item.id,
+                      language: item.language,
+                      version: item.version,
+                      name: editContext?.contentEditorItem?.name,
+                    },
+                  ],
+                  componentIds: editContext?.selection?.length
+                    ? editContext.selection
+                    : undefined,
+                  field:
+                    editContext?.focusedField &&
+                    editContext.currentItemDescriptor
+                      ? {
+                          fieldId: editContext.focusedField.fieldId,
+                          itemId: editContext.focusedField.item.id,
+                        }
+                      : undefined,
+                },
+              },
+            }
+          : null;
+        if (initialLocalContext) setAgentMetadata(initialLocalContext);
         return;
       }
 
@@ -743,6 +802,20 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
       setAgent(agentData);
       setMessages(agentData.messages || []);
 
+      // Parse metadata from DB if present (do not seed for existing agents)
+      const parsedMeta: AgentMetadata | null = (() => {
+        try {
+          return agentData.metadata
+            ? (JSON.parse(agentData.metadata) as AgentMetadata)
+            : null;
+        } catch {
+          return null;
+        }
+      })();
+
+      // For existing agents, use database metadata or none
+      setAgentMetadata(parsedMeta);
+
       // Connect to stream if agent is running (handle both string and numeric status)
       const isRunning =
         agentData.status === "running" || (agentData.status as any) === 1;
@@ -846,14 +919,32 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
 
       setMessages((prev) => [...prev, userMessage]);
 
+      const metaCtx = (agentMetadata as any)?.additionalData?.context as
+        | { componentIds?: string[] }
+        | undefined;
+      const selectionFromCtx = metaCtx?.componentIds?.length
+        ? metaCtx.componentIds
+        : undefined;
+      const effectiveSelection = selectionFromCtx?.length
+        ? selectionFromCtx
+        : editContext.selection && editContext.selection.length > 0
+          ? editContext.selection
+          : undefined;
+
       const request: StartAgentRequest = {
         agentId: agent.id,
         message: prompt.trim(),
         sessionId: editContext.sessionId,
         profileId: "default", // TODO: Get from context or settings
+        profile: "default",
         itemid: editContext.currentItemDescriptor?.id || "",
         language: editContext.currentItemDescriptor?.language || "en",
         version: editContext.currentItemDescriptor?.version || 1,
+        selection: effectiveSelection,
+        selectedText: editContext.selectedRange?.text || undefined,
+        addSelectedComponents: !!effectiveSelection?.length,
+        addContextContent: false,
+        addAllContent: false,
       };
 
       console.log("Starting agent:", request);
@@ -940,6 +1031,311 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
     }
   };
 
+  // Context info bar helpers - must be declared before any early returns to keep hooks order stable
+  const removeContextKey = useCallback(
+    async (
+      key: "pages" | "componentIds" | "field" | "comment",
+      index?: number,
+    ) => {
+      if (!agent?.id) return;
+      const current = agentMetadata || {};
+      const next: AgentMetadata = {
+        ...current,
+        additionalData: {
+          ...(current.additionalData || {}),
+          context: {
+            ...((current.additionalData &&
+              (current.additionalData as any).context) ||
+              {}),
+          },
+        },
+      } as AgentMetadata;
+
+      if (next.additionalData && (next.additionalData as any).context) {
+        const ctx = (next.additionalData as any).context;
+        if (key === "pages" && typeof index === "number" && ctx.pages) {
+          ctx.pages.splice(index, 1);
+          if (ctx.pages.length === 0) delete ctx.pages;
+        } else if (
+          key === "componentIds" &&
+          typeof index === "number" &&
+          ctx.componentIds
+        ) {
+          ctx.componentIds.splice(index, 1);
+          if (ctx.componentIds.length === 0) delete ctx.componentIds;
+        } else if (key === "field") {
+          delete ctx.field;
+        } else if (key === "comment") {
+          delete ctx.comment;
+        }
+      }
+
+      try {
+        // For new (not yet persisted) agents, only update local state
+        if (agent.status === "new") {
+          setAgentMetadata(next);
+          return;
+        }
+
+        // Persisted agents: update server and local cache
+        await updateAgentMetadata(agent.id, next);
+        setAgentMetadata(next);
+        setAgent((prev) =>
+          prev ? { ...prev, metadata: JSON.stringify(next) } : prev,
+        );
+      } catch (e) {
+        console.error("Failed to update agent metadata", e);
+      }
+    },
+    [agent?.id, agentMetadata],
+  );
+
+  const addPagesToContext = async () => {
+    if (!agent?.id || !editContext?.currentItemDescriptor) return;
+
+    // Add the current page (currentItemDescriptor represents the current page)
+    // Note: Currently only supports adding the current page. To support multiple pages,
+    // we'd need a page selection mechanism in the UI (e.g., a page picker dialog)
+    const item = editContext.currentItemDescriptor;
+    const pageToAdd = {
+      id: item.id,
+      language: item.language,
+      version: item.version,
+      name: editContext.contentEditorItem?.name,
+      path: agent?.itemPath,
+    };
+
+    const current = agentMetadata || {};
+    const currentPages =
+      ((current.additionalData as any)?.context?.pages as Array<any>) || [];
+
+    // Check if this page is already in context
+    const existingPageIds = new Set(
+      currentPages.map((p: any) => `${p.id}-${p.language}-${p.version}`),
+    );
+
+    if (
+      existingPageIds.has(
+        `${pageToAdd.id}-${pageToAdd.language}-${pageToAdd.version}`,
+      )
+    ) {
+      return; // Page already exists
+    }
+
+    const next: AgentMetadata = {
+      ...current,
+      additionalData: {
+        ...(current.additionalData || {}),
+        context: {
+          ...((current.additionalData &&
+            (current.additionalData as any).context) ||
+            {}),
+          pages: [...currentPages, pageToAdd],
+        },
+      },
+    } as AgentMetadata;
+
+    try {
+      if (agent.status === "new") {
+        setAgentMetadata(next);
+        return;
+      }
+      await updateAgentMetadata(agent.id, next);
+      setAgentMetadata(next);
+      setAgent((prev) =>
+        prev ? { ...prev, metadata: JSON.stringify(next) } : prev,
+      );
+    } catch (e) {
+      console.error("Failed to update agent metadata (add pages)", e);
+    }
+  };
+
+  const addSelectedComponentsToContext = async () => {
+    if (!agent?.id || !editContext?.selection?.length) return;
+
+    const current = agentMetadata || {};
+    const currentComponentIds =
+      ((current.additionalData as any)?.context?.componentIds as string[]) ||
+      [];
+
+    // Merge with existing components, avoiding duplicates
+    const existingIds = new Set(currentComponentIds);
+    const newComponentIds = editContext.selection.filter(
+      (id) => !existingIds.has(id),
+    );
+
+    if (newComponentIds.length === 0) return; // No new components to add
+
+    const next: AgentMetadata = {
+      ...current,
+      additionalData: {
+        ...(current.additionalData || {}),
+        context: {
+          ...((current.additionalData &&
+            (current.additionalData as any).context) ||
+            {}),
+          componentIds: [...currentComponentIds, ...newComponentIds],
+        },
+      },
+    } as AgentMetadata;
+
+    try {
+      if (agent.status === "new") {
+        setAgentMetadata(next);
+        return;
+      }
+      await updateAgentMetadata(agent.id, next);
+      setAgentMetadata(next);
+      setAgent((prev) =>
+        prev ? { ...prev, metadata: JSON.stringify(next) } : prev,
+      );
+    } catch (e) {
+      console.error("Failed to update agent metadata (add components)", e);
+    }
+  };
+
+  const addCommentToContext = async (comment: Comment) => {
+    if (!agent?.id) return;
+
+    const selectedText = (() => {
+      if (
+        typeof comment.rangeStart === "number" &&
+        typeof comment.rangeEnd === "number" &&
+        comment.fieldValue
+      ) {
+        try {
+          return comment.fieldValue.substring(
+            Math.max(0, comment.rangeStart),
+            Math.max(comment.rangeStart, comment.rangeEnd),
+          );
+        } catch {
+          return undefined;
+        }
+      }
+      return undefined;
+    })();
+
+    const current = agentMetadata || {};
+    const next: AgentMetadata = {
+      ...current,
+      additionalData: {
+        ...(current.additionalData || {}),
+        context: {
+          ...((current.additionalData &&
+            (current.additionalData as any).context) ||
+            {}),
+          comment: {
+            id: comment.id,
+            text: comment.text,
+            fieldName: comment.fieldName,
+            itemName: comment.itemName,
+            author: comment.author,
+            selectedText,
+            rangeStart: comment.rangeStart,
+            rangeEnd: comment.rangeEnd,
+          },
+        },
+      },
+    } as AgentMetadata;
+
+    try {
+      if (agent.status === "new") {
+        setAgentMetadata(next);
+        return;
+      }
+      await updateAgentMetadata(agent.id, next);
+      setAgentMetadata(next);
+      setAgent((prev) =>
+        prev ? { ...prev, metadata: JSON.stringify(next) } : prev,
+      );
+    } catch (e) {
+      console.error("Failed to update agent metadata (add comment)", e);
+    }
+  };
+
+  // Resolve display names when metadata or editor state changes
+  useEffect(() => {
+    const metaCtx = (agentMetadata as any)?.additionalData?.context as
+      | {
+          pages?: Array<{
+            id: string;
+            language: string;
+            version: number;
+            name?: string;
+          }>;
+          componentIds?: string[];
+          field?: { fieldId: string; itemId: string };
+        }
+      | undefined;
+    if (!metaCtx) {
+      setResolvedPageName(undefined);
+      setResolvedComponentName(undefined);
+      setResolvedFieldName(undefined);
+      return;
+    }
+
+    // Page names (for now, just resolve the first page)
+    if (metaCtx.pages?.length) {
+      const firstPage = metaCtx.pages[0];
+      if (firstPage) {
+        let name: string | undefined = firstPage.name;
+        if (
+          !name &&
+          editContext?.contentEditorItem?.descriptor.id === firstPage.id &&
+          editContext?.contentEditorItem?.name
+        ) {
+          name = editContext.contentEditorItem.name;
+        } else if (!name && agent?.itemPath) {
+          name = agent.itemPath.split("/").pop() || undefined;
+        }
+        setResolvedPageName(name);
+      } else {
+        setResolvedPageName(undefined);
+      }
+    } else setResolvedPageName(undefined);
+
+    // Component names (for now, just resolve the first component)
+    if (metaCtx.componentIds?.length && editContext?.page) {
+      const firstComponentId = metaCtx.componentIds[0];
+      if (firstComponentId) {
+        try {
+          const comp = getComponentById(firstComponentId, editContext.page);
+          setResolvedComponentName(comp?.name);
+        } catch {
+          setResolvedComponentName(undefined);
+        }
+      } else {
+        setResolvedComponentName(undefined);
+      }
+    } else setResolvedComponentName(undefined);
+
+    // Field name (async)
+    (async () => {
+      if (metaCtx.field && editContext?.itemsRepository) {
+        try {
+          const field = await editContext.itemsRepository.getField({
+            item: {
+              id: metaCtx.field.itemId,
+              language: editContext.currentItemDescriptor?.language || "en",
+              version: editContext.currentItemDescriptor?.version || 0,
+            },
+            fieldId: metaCtx.field.fieldId,
+          });
+          setResolvedFieldName(field?.name);
+        } catch {
+          setResolvedFieldName(undefined);
+        }
+      } else setResolvedFieldName(undefined);
+    })();
+  }, [
+    agentMetadata,
+    editContext?.page,
+    editContext?.contentEditorItem,
+    agent?.itemPath,
+    editContext?.currentItemDescriptor,
+    editContext?.itemsRepository,
+  ]);
+
   if (isLoading) {
     return (
       <div className="flex h-full items-center justify-center">
@@ -954,6 +1350,161 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
   // Calculate total token usage for cost display
   const totalTokens = calculateTotalTokens(messages);
 
+  const renderContextInfoBar = () => {
+    const ctx = (agentMetadata as any)?.additionalData?.context as
+      | {
+          pages?: Array<{
+            id: string;
+            language: string;
+            version: number;
+            path?: string;
+            name?: string;
+          }>;
+          componentIds?: string[];
+          field?: { fieldId: string; itemId: string; name?: string };
+        }
+      | undefined;
+
+    // Check if we have context chips or add buttons to show
+    const hasContext =
+      ctx && (ctx.pages?.length || ctx.componentIds?.length || ctx.field);
+
+    // Check if current page is already in context
+    const currentPageAlreadyAdded =
+      editContext?.currentItemDescriptor &&
+      ctx?.pages?.some(
+        (page) =>
+          page.id === editContext.currentItemDescriptor?.id &&
+          page.language === editContext.currentItemDescriptor?.language &&
+          page.version === editContext.currentItemDescriptor?.version,
+      );
+
+    // Check if current selection components are already in context
+    const selectedComponentsAlreadyAdded =
+      editContext?.selection?.length &&
+      editContext.selection.every((selectedId) =>
+        ctx?.componentIds?.includes(selectedId),
+      );
+
+    const canAddPage =
+      !!editContext?.currentItemDescriptor && !currentPageAlreadyAdded;
+    const canAddSelection =
+      !!editContext?.selection?.length && !selectedComponentsAlreadyAdded;
+
+    if (!hasContext && !canAddPage && !canAddSelection) return null;
+
+    const Chip = ({
+      icon,
+      label,
+      onRemove,
+    }: {
+      icon: React.ReactNode;
+      label: string;
+      onRemove: () => void;
+    }) => (
+      <span className="inline-flex items-center gap-1 rounded-full border border-gray-200 bg-gray-100 px-2 py-0.5 text-xs text-gray-700">
+        {icon}
+        <span className="max-w-[240px] truncate" title={label}>
+          {label}
+        </span>
+        <button
+          onClick={onRemove}
+          className="ml-0.5 rounded p-0.5 hover:bg-gray-200"
+          aria-label="Remove context"
+        >
+          <X className="h-3 w-3" strokeWidth={1} />
+        </button>
+      </span>
+    );
+
+    const chips: React.ReactNode[] = [];
+
+    // Render page chips
+    if (ctx?.pages?.length) {
+      ctx.pages.forEach((page, index) => {
+        const pageLabelName =
+          page.name ||
+          resolvedPageName ||
+          (agent?.itemPath ? agent.itemPath.split("/").pop() : undefined);
+        const pageLabel = `${pageLabelName || page.path || page.id} (${page.language}/${page.version})`;
+        chips.push(
+          <Chip
+            key={`page-${index}`}
+            icon={
+              <FileText className="h-3 w-3 text-gray-500" strokeWidth={1} />
+            }
+            label={`Page: ${pageLabel}`}
+            onRemove={() => removeContextKey("pages", index)}
+          />,
+        );
+      });
+    }
+
+    // Render component chips
+    if (ctx?.componentIds?.length) {
+      ctx.componentIds.forEach((componentId, index) => {
+        let compLabel = componentId;
+        if (index === 0 && resolvedComponentName) {
+          compLabel = resolvedComponentName;
+        } else if (editContext?.page) {
+          try {
+            const comp = getComponentById(componentId, editContext.page);
+            compLabel = comp?.name || componentId;
+          } catch {
+            // Keep componentId as fallback
+          }
+        }
+        chips.push(
+          <Chip
+            key={`component-${index}`}
+            icon={<Puzzle className="h-3 w-3 text-gray-500" strokeWidth={1} />}
+            label={`Component: ${compLabel}`}
+            onRemove={() => removeContextKey("componentIds", index)}
+          />,
+        );
+      });
+    }
+
+    // Render field chip
+    if (ctx?.field) {
+      const fieldLabel = `${ctx.field.name || resolvedFieldName || ctx.field.fieldId}`;
+      chips.push(
+        <Chip
+          key="field"
+          icon={<Type className="h-3 w-3 text-gray-500" strokeWidth={1} />}
+          label={`Field: ${fieldLabel}`}
+          onRemove={() => removeContextKey("field")}
+        />,
+      );
+    }
+
+    return (
+      <div className="border-t border-gray-100 px-4 py-2">
+        <div className="flex items-center justify-between text-xs text-gray-600">
+          <div className="flex flex-wrap items-center gap-2">{chips}</div>
+          <div className="ml-2 flex flex-wrap items-center gap-2">
+            {canAddPage && (
+              <Button size="sm" variant="outline" onClick={addPagesToContext}>
+                <Plus className="mr-1 h-3 w-3" strokeWidth={1} /> Add current
+                item
+              </Button>
+            )}
+            {canAddSelection && (
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={addSelectedComponentsToContext}
+              >
+                <Plus className="mr-1 h-3 w-3" strokeWidth={1} /> Add selected
+                components
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <div className="flex h-full flex-col">
       {/* Messages */}
@@ -1052,6 +1603,9 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
         </div>
       )}
 
+      {/* Context Info Bar */}
+      {renderContextInfoBar()}
+
       {/* Input */}
       <div className="border-t border-gray-200 p-4">
         <div className="flex items-stretch gap-2">