@nocobase/portal-template-default 1.0.2 → 1.0.3

package/src/extensions/nocobase-ai/components/chat/sub-agent-conversation.tsx

@@ -0,0 +1,142 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { ChevronDown, ChevronRight, LoaderCircle } from "lucide-react";
+import { useState } from "react";
+import {
+  useAI,
+  type AISubAgentConversation as AISubAgentConversationType,
+  type AIToolCallDecision,
+} from "../../providers";
+import { AIEmployeeAvatar } from "./ai-employee-avatar";
+import { MarkdownMessage } from "./markdown-message";
+import { ReasoningPanel } from "./reasoning-panel";
+import {
+  getToolCallName,
+  isToolCallPart,
+  ToolCallCard,
+} from "./tool-call-card";
+
+export function SubAgentConversation({
+  conversation,
+  onToolCallDecision,
+  status = "ready",
+  decideToolCall,
+  focusComposer,
+}: {
+  conversation: AISubAgentConversationType;
+  onToolCallDecision?: (decision: AIToolCallDecision) => void | Promise<void>;
+  status?: "submitted" | "streaming" | "ready" | "error";
+  decideToolCall?: (decision: AIToolCallDecision) => Promise<void>;
+  focusComposer?: () => void;
+}) {
+  const ai = useAI();
+  const completed = conversation.status === "completed";
+  const [expanded, setExpanded] = useState(true);
+  const employee = ai.employees.find(
+    (item) => item.username === conversation.username
+  ) ?? {
+    username: conversation.username,
+    nickname: conversation.username,
+  };
+  const messages =
+    conversation.messages[0]?.role === "user"
+      ? conversation.messages.slice(1)
+      : conversation.messages;
+  const interactionPending = status === "streaming" || status === "submitted";
+
+  return (
+    <section className="rounded-xl border border-dashed bg-muted/15">
+      <Button
+        type="button"
+        variant="ghost"
+        className="h-auto w-full justify-start rounded-xl px-3 py-2 text-left"
+        onClick={() => setExpanded((current) => !current)}
+      >
+        {expanded ? (
+          <ChevronDown className="size-4 shrink-0" />
+        ) : (
+          <ChevronRight className="size-4 shrink-0" />
+        )}
+        <AIEmployeeAvatar employee={employee} className="size-6" />
+        <span className="min-w-0 flex-1 truncate text-sm font-medium">
+          {employee.nickname}
+        </span>
+        <span className="flex shrink-0 items-center gap-1.5 text-xs font-normal text-muted-foreground">
+          {!completed ? <LoaderCircle className="size-3 animate-spin" /> : null}
+          {completed ? "Completed" : "Working"}
+        </span>
+      </Button>
+      {expanded ? (
+        <div className="space-y-3 border-t border-dashed px-3 py-3">
+          {messages.flatMap((message) =>
+            message.parts.map((part, index) => {
+              if (part.type === "reasoning") {
+                return (
+                  <ReasoningPanel
+                    key={`${message.id}-reasoning-${index}`}
+                    streaming={part.state === "streaming"}
+                  >
+                    {part.text}
+                  </ReasoningPanel>
+                );
+              }
+              if (part.type === "text") {
+                return (
+                  <div
+                    key={`${message.id}-text-${index}`}
+                    className="ai-markdown text-sm leading-6 text-foreground"
+                  >
+                    <MarkdownMessage>{part.text}</MarkdownMessage>
+                  </div>
+                );
+              }
+              if (part.type === "data-subAgent") {
+                return (
+                  <SubAgentConversation
+                    key={part.id ?? part.data.sessionId}
+                    conversation={part.data}
+                    onToolCallDecision={onToolCallDecision}
+                    status={status}
+                    decideToolCall={decideToolCall}
+                    focusComposer={focusComposer}
+                  />
+                );
+              }
+              if (!isToolCallPart(part)) return [];
+              return (
+                <ToolCallCard
+                  key={part.toolCallId}
+                  part={part}
+                  approval={message.metadata?.toolApprovals?.[part.toolCallId]}
+                  disabled={interactionPending}
+                  onRevise={focusComposer}
+                  onDecision={async (decision, input) => {
+                    const toolDecision = {
+                      messageId: message.id,
+                      toolCallId: part.toolCallId,
+                      toolName: getToolCallName(part),
+                      decision,
+                      input,
+                    } satisfies AIToolCallDecision;
+                    await decideToolCall?.(toolDecision);
+                    await onToolCallDecision?.(toolDecision);
+                  }}
+                />
+              );
+            })
+          )}
+          {!messages.length ? (
+            <div
+              className={cn(
+                "text-xs text-muted-foreground",
+                !completed && "animate-pulse"
+              )}
+            >
+              {completed ? "No visible output." : "Starting delegated work…"}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </section>
+  );
+}

package/src/extensions/nocobase-ai/components/chat/tool-call-card.tsx

@@ -0,0 +1,316 @@
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { AIChatMessage, AIToolCallApproval } from "../../providers";
+import {
+  Check,
+  ChevronDown,
+  CircleAlert,
+  LoaderCircle,
+  Wrench,
+} from "lucide-react";
+import { useEffect, useState, type ReactNode } from "react";
+import { useAIToolRenderer } from "../tools/tool-renderer-provider";
+
+export type ToolCallPart = Extract<
+  AIChatMessage["parts"][number],
+  { type: `tool-${string}` | "dynamic-tool" }
+>;
+
+export function isToolCallPart(
+  part: AIChatMessage["parts"][number]
+): part is ToolCallPart {
+  return part.type === "dynamic-tool" || part.type.startsWith("tool-");
+}
+
+export const getToolCallName = (part: ToolCallPart) =>
+  part.type === "dynamic-tool" ? part.toolName : part.type.slice(5);
+
+const toolLabel = (part: ToolCallPart) =>
+  getToolCallName(part)
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .replace(/[-_]+/g, " ")
+    .replace(/^./, (character) => character.toUpperCase());
+
+const formatValue = (value: unknown) => {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2) ?? String(value);
+  } catch {
+    return String(value);
+  }
+};
+
+const getStatus = (part: ToolCallPart) => {
+  switch (part.state) {
+    case "input-streaming":
+      return {
+        label: "Preparing",
+        icon: LoaderCircle,
+        tone: "text-muted-foreground",
+      };
+    case "input-available":
+      return {
+        label: "Running",
+        icon: LoaderCircle,
+        tone: "text-muted-foreground",
+      };
+    case "output-error":
+      return {
+        label: "Failed",
+        icon: CircleAlert,
+        tone: "text-destructive",
+      };
+    case "output-available":
+      return {
+        label: "Completed",
+        icon: Check,
+        tone: "text-foreground",
+      };
+  }
+};
+
+const approvalFromPart = (
+  part: ToolCallPart
+): AIToolCallApproval | undefined => {
+  if (!("callProviderMetadata" in part)) return undefined;
+  const metadata = part.callProviderMetadata?.nocobase;
+  if (!metadata || typeof metadata !== "object") return undefined;
+  const requiresApproval = (metadata as { requiresApproval?: unknown })
+    .requiresApproval;
+  return requiresApproval === true
+    ? { required: true, status: "pending" }
+    : undefined;
+};
+
+export type NocoBaseToolCallMetadata = {
+  autoApprove?: boolean;
+  invokeStatus?: string;
+  messageId?: string;
+  requiresApproval?: boolean;
+  selectedSuggestion?: string;
+  status?: string;
+};
+
+export const getNocoBaseToolCallMetadata = (part: ToolCallPart) => {
+  if (!("callProviderMetadata" in part)) return undefined;
+  const metadata = part.callProviderMetadata?.nocobase;
+  return metadata && typeof metadata === "object"
+    ? (metadata as NocoBaseToolCallMetadata)
+    : undefined;
+};
+
+type ToolCallCardProps = {
+  part: ToolCallPart;
+  approval?: AIToolCallApproval;
+  onDecision?: (
+    decision: "approve" | "reject" | "edit",
+    input?: unknown
+  ) => void | Promise<void>;
+  onRevise?: () => void;
+  inlineActions?: ReactNode;
+  disabled?: boolean;
+};
+
+export function ToolCallCard({
+  part,
+  approval,
+  onDecision,
+  onRevise,
+  inlineActions,
+  disabled = false,
+}: ToolCallCardProps) {
+  const resolvedApproval = approval ?? approvalFromPart(part);
+  const [approvalStatus, setApprovalStatus] = useState(
+    resolvedApproval?.status ?? "pending"
+  );
+  const [deciding, setDeciding] = useState(false);
+  const renderer = useAIToolRenderer(getToolCallName(part));
+  const Renderer = renderer?.component;
+  const [open, setOpen] = useState(
+    part.state === "output-error" || Boolean(Renderer)
+  );
+  const toolStatus = getStatus(part);
+  const approvalRequired =
+    resolvedApproval?.required === true && approvalStatus === "pending";
+  const status = approvalRequired
+    ? { label: "Approval required", icon: CircleAlert, tone: "text-foreground" }
+    : approvalStatus === "rejected"
+    ? { label: "Denied", icon: CircleAlert, tone: "text-muted-foreground" }
+    : approvalStatus === "approved" && part.state === "input-available"
+    ? { label: "Allowed", icon: Check, tone: "text-foreground" }
+    : toolStatus;
+  const StatusIcon = status.icon;
+  const hasInput = part.input !== undefined;
+  const hasError = part.state === "output-error";
+
+  useEffect(() => {
+    setApprovalStatus(resolvedApproval?.status ?? "pending");
+  }, [resolvedApproval?.status]);
+
+  useEffect(() => {
+    if (part.state === "output-error") {
+      setOpen(true);
+    }
+  }, [part.state]);
+
+  const decide = async (
+    decision: "approve" | "reject" | "edit",
+    input?: unknown
+  ) => {
+    if (disabled) return;
+    setDeciding(true);
+    try {
+      await onDecision?.(decision, input);
+      setApprovalStatus(decision === "reject" ? "rejected" : "approved");
+    } finally {
+      setDeciding(false);
+    }
+  };
+
+  if (Renderer && renderer?.standalone) {
+    const specializedDisabled =
+      disabled ||
+      approvalStatus === "rejected" ||
+      (resolvedApproval?.required === true && approvalStatus !== "pending");
+    return (
+      <div>
+        <Renderer
+          part={part}
+          disabled={specializedDisabled}
+          onEdit={(input) => onDecision?.("edit", input)}
+          onApprove={() => onDecision?.("approve")}
+          onReject={(message) => onDecision?.("reject", message)}
+          onRevise={() => onRevise?.()}
+        />
+        {part.state === "output-error" ? (
+          <div className="mt-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive">
+            {part.errorText}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+
+  return (
+    <Collapsible
+      open={open}
+      onOpenChange={setOpen}
+      className="overflow-hidden rounded-lg border border-border/70 bg-muted/30"
+    >
+      <div className="flex items-center">
+        <CollapsibleTrigger className="group/tool-call flex min-w-0 flex-1 items-center gap-2 px-3 py-2 text-left text-xs font-medium text-muted-foreground outline-none hover:bg-muted/40 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset">
+          <Wrench className="size-3.5 shrink-0" />
+          <span className="min-w-0 flex-1 truncate">{toolLabel(part)}</span>
+          <span
+            className={cn(
+              "flex shrink-0 items-center gap-1.5 font-normal",
+              status.tone
+            )}
+          >
+            <StatusIcon
+              className={cn(
+                "size-3.5",
+                (deciding ||
+                  (!approvalRequired &&
+                    approvalStatus === "pending" &&
+                    (part.state === "input-streaming" ||
+                      part.state === "input-available"))) &&
+                  "animate-spin"
+              )}
+            />
+            {deciding ? "Applying…" : status.label}
+          </span>
+          <ChevronDown className="size-3.5 shrink-0 transition-transform group-data-panel-open/tool-call:rotate-180" />
+        </CollapsibleTrigger>
+        {inlineActions ? (
+          <div className="flex shrink-0 items-center pr-2">{inlineActions}</div>
+        ) : null}
+      </div>
+      {approvalRequired && !renderer?.handlesApproval ? (
+        <div className="flex items-center justify-between gap-3 border-t px-3 py-2.5">
+          <p className="text-xs text-muted-foreground">
+            This tool needs permission before it can run.
+          </p>
+          <div className="flex shrink-0 items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              disabled={disabled || deciding}
+              onClick={() => void decide("reject")}
+            >
+              Deny
+            </Button>
+            <Button
+              size="sm"
+              disabled={disabled || deciding}
+              onClick={() => void decide("approve")}
+            >
+              Allow
+            </Button>
+          </div>
+        </div>
+      ) : null}
+      <CollapsibleContent className="border-t">
+        {Renderer ? (
+          <div className="p-3">
+            <Renderer
+              part={part}
+              disabled={
+                disabled ||
+                deciding ||
+                approvalStatus === "rejected" ||
+                (resolvedApproval?.required === true &&
+                  approvalStatus !== "pending")
+              }
+              onEdit={(input) => decide("edit", input)}
+              onApprove={() => decide("approve")}
+              onReject={() => decide("reject")}
+              onRevise={() => onRevise?.()}
+            />
+          </div>
+        ) : hasInput ? (
+          <ToolCallValue label="Input" value={part.input} />
+        ) : null}
+        {part.state === "output-error" ? (
+          <ToolCallValue label="Error" value={part.errorText} error />
+        ) : null}
+        {!Renderer && !hasInput && !hasError ? (
+          <p className="px-3 py-3 text-xs text-muted-foreground">
+            Waiting for tool input…
+          </p>
+        ) : null}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+function ToolCallValue({
+  label,
+  value,
+  error = false,
+}: {
+  label: string;
+  value: unknown;
+  error?: boolean;
+}) {
+  return (
+    <div className="border-b px-3 py-3 last:border-b-0">
+      <div className="mb-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+        {label}
+      </div>
+      <pre
+        className={cn(
+          "max-h-48 overflow-auto whitespace-pre-wrap break-words rounded-lg bg-background p-2.5 font-mono text-xs leading-5",
+          error && "text-destructive"
+        )}
+      >
+        {formatValue(value)}
+      </pre>
+    </div>
+  );
+}

package/src/extensions/nocobase-ai/components/chat/user-prompt-editor.tsx

@@ -0,0 +1,99 @@
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { MessageSquareText } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useAIChatBase } from "../../providers";
+
+export function UserPromptEditor() {
+  const { currentEmployee, saveUserPrompt } = useAIChatBase();
+  const [open, setOpen] = useState(false);
+  const [prompt, setPrompt] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string>();
+
+  useEffect(() => {
+    if (!open) return;
+    setPrompt(currentEmployee.userConfig?.prompt ?? "");
+    setError(undefined);
+  }, [currentEmployee.userConfig?.prompt, currentEmployee.username, open]);
+
+  const save = async () => {
+    setSaving(true);
+    setError(undefined);
+    try {
+      await saveUserPrompt(prompt);
+      setOpen(false);
+    } catch (saveError) {
+      setError(
+        saveError instanceof Error ? saveError.message : "Unable to save prompt"
+      );
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <PopoverTrigger
+              render={
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label="Personalized prompt"
+                />
+              }
+            />
+          }
+        >
+          <MessageSquareText />
+        </TooltipTrigger>
+        <TooltipContent>Personalized prompt</TooltipContent>
+      </Tooltip>
+      <PopoverContent
+        align="end"
+        sideOffset={8}
+        className="w-[380px] gap-3 p-4"
+      >
+        <PopoverHeader>
+          <PopoverTitle>Personalized prompt</PopoverTitle>
+          <PopoverDescription>
+            Add instructions that this AI employee should follow when working
+            with you.
+          </PopoverDescription>
+        </PopoverHeader>
+        <Textarea
+          value={prompt}
+          onChange={(event) => setPrompt(event.target.value)}
+          rows={5}
+          className="max-h-52 min-h-28 resize-y"
+          placeholder="For example: Keep answers concise and ask before changing data."
+        />
+        {error ? <p className="text-xs text-destructive">{error}</p> : null}
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" size="sm" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button size="sm" disabled={saving} onClick={() => void save()}>
+            {saving ? "Saving…" : "Save"}
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/extensions/nocobase-ai/components/chat/work-context-chip.tsx

@@ -0,0 +1,114 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import { MousePointer2, X } from "lucide-react";
+import { useMemo, useState } from "react";
+import type { AIWorkContextItem } from "../../providers";
+
+const formatContextContent = (content: unknown) => {
+  if (content === undefined) return "No context payload";
+  if (typeof content === "string") return content;
+  try {
+    return JSON.stringify(content, null, 2);
+  } catch {
+    return String(content);
+  }
+};
+
+export function WorkContextChip({
+  item,
+  onRemove,
+  className,
+}: {
+  item: AIWorkContextItem;
+  onRemove?: () => void;
+  className?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const title = item.title ?? "Page element";
+  const kind = typeof item.kind === "string" ? item.kind : undefined;
+  const content = useMemo(
+    () => formatContextContent(item.content),
+    [item.content]
+  );
+
+  return (
+    <>
+      <span
+        className={cn(
+          "flex min-w-0 max-w-full items-center rounded-md border bg-muted/40 text-xs text-muted-foreground",
+          className
+        )}
+      >
+        <button
+          type="button"
+          className="flex min-w-0 items-center gap-1.5 rounded-l-md px-2 py-1 text-left hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          aria-label={`View context: ${title}`}
+          onClick={() => setOpen(true)}
+        >
+          <MousePointer2 className="size-3.5 shrink-0" />
+          <span className="truncate">{title}</span>
+        </button>
+        {onRemove ? (
+          <button
+            type="button"
+            className="mr-1 rounded-sm p-0.5 hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-label={`Remove ${title}`}
+            onClick={onRemove}
+          >
+            <X className="size-3" />
+          </button>
+        ) : null}
+      </span>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-xl">
+          <DialogHeader className="pr-8">
+            <DialogTitle>{title}</DialogTitle>
+            <DialogDescription>
+              This is the page context included with the message sent to the AI
+              employee.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex flex-wrap gap-2 text-xs">
+            <span className="rounded-md border bg-muted/40 px-2 py-1">
+              Type: {item.type}
+            </span>
+            {kind ? (
+              <span className="rounded-md border bg-muted/40 px-2 py-1">
+                Kind: {kind}
+              </span>
+            ) : null}
+            {item.id ? (
+              <span className="max-w-full truncate rounded-md border bg-muted/40 px-2 py-1">
+                ID: {item.id}
+              </span>
+            ) : null}
+          </div>
+
+          <div className="space-y-2">
+            <div className="text-xs font-medium text-muted-foreground">
+              Context payload
+            </div>
+            <pre className="max-h-[55vh] overflow-auto rounded-lg border bg-muted/30 p-3 text-xs leading-5 whitespace-pre-wrap break-words">
+              {content}
+            </pre>
+          </div>
+
+          <div className="flex justify-end">
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              Close
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}