@nocobase/portal-template-default 1.0.0 → 1.0.2

package/registry/nocobase-ai/components/tools/sub-agent-renderer.tsx

@@ -0,0 +1,67 @@
+import { cn } from "@/lib/utils";
+import { Bot, ChevronDown, LoaderCircle } from "lucide-react";
+import { useState } from "react";
+import { useAI } from "../../providers";
+import { AIEmployeeAvatar } from "../chat/ai-employee-avatar";
+import { getNocoBaseToolCallMetadata } from "../chat/tool-call-card";
+import type { AIToolRendererProps } from "./tool-renderer-provider";
+import { asRecord, asString } from "./tool-renderer-utils";
+
+export function SubAgentRenderer({ part }: AIToolRendererProps) {
+  const { employees } = useAI();
+  const input = asRecord(part.input);
+  const username = asString(input.username);
+  const employee = employees.find((item) => item.username === username);
+  const fallbackName = username
+    ? `${username.charAt(0).toUpperCase()}${username.slice(1)}`
+    : "AI employee";
+  const [expanded, setExpanded] = useState(false);
+  const question = asString(input.question);
+  const metadata = getNocoBaseToolCallMetadata(part);
+  const generating =
+    part.state !== "output-available" &&
+    part.state !== "output-error" &&
+    !["done", "confirmed"].includes(metadata?.invokeStatus ?? "");
+
+  return (
+    <button
+      type="button"
+      className="w-full rounded-lg bg-muted/50 p-2.5 text-left"
+      onClick={() => question && setExpanded((value) => !value)}
+    >
+      <div className="flex items-center gap-2.5">
+        {employee ? (
+          <AIEmployeeAvatar employee={employee} className="size-8" />
+        ) : (
+          <span className="flex size-8 items-center justify-center rounded-full border bg-background">
+            <Bot className="size-4" />
+          </span>
+        )}
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-sm font-medium">
+            @{employee?.nickname || fallbackName}
+          </div>
+          <div className="truncate text-xs text-muted-foreground">
+            {employee?.position || "Working on a delegated task"}
+          </div>
+        </div>
+        {question ? (
+          <ChevronDown
+            className={cn(
+              "size-4 text-muted-foreground transition-transform",
+              expanded && "rotate-180"
+            )}
+          />
+        ) : null}
+        {generating ? (
+          <LoaderCircle className="size-4 shrink-0 animate-spin text-muted-foreground" />
+        ) : null}
+      </div>
+      {expanded ? (
+        <p className="mt-2 border-t pt-2 text-xs leading-5 text-muted-foreground">
+          {question}
+        </p>
+      ) : null}
+    </button>
+  );
+}

package/registry/nocobase-ai/components/tools/suggestions-renderer.tsx

@@ -0,0 +1,59 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+import { getNocoBaseToolCallMetadata } from "../chat/tool-call-card";
+import type { AIToolRendererProps } from "./tool-renderer-provider";
+import { asRecord, parseArray } from "./tool-renderer-utils";
+
+export function SuggestionsRenderer({
+  part,
+  disabled,
+  onEdit,
+}: AIToolRendererProps) {
+  const input = asRecord(part.input);
+  const metadata = getNocoBaseToolCallMetadata(part);
+  const options = parseArray(input.options).filter(
+    (option): option is string => typeof option === "string"
+  );
+  const [selected, setSelected] = useState<string>();
+  const persistedSelection = metadata?.selectedSuggestion;
+  const hasSelected =
+    selected !== undefined || persistedSelection !== undefined;
+  const canSelect =
+    metadata?.invokeStatus === undefined ||
+    metadata.invokeStatus === "interrupted";
+
+  if (!options.length) {
+    return (
+      <p className="text-xs text-muted-foreground">Generating suggestions…</p>
+    );
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {options.map((option) => (
+        <Button
+          key={option}
+          variant="outline"
+          size="sm"
+          className={cn(
+            "h-auto min-h-8 whitespace-normal text-left",
+            (selected === option || persistedSelection === option) &&
+              "border-2 border-dashed bg-muted"
+          )}
+          disabled={disabled || hasSelected || !canSelect}
+          onClick={() => {
+            setSelected(option);
+            void Promise.resolve(onEdit({ ...input, option })).catch(() => {
+              setSelected((current) =>
+                current === option ? undefined : current
+              );
+            });
+          }}
+        >
+          {option}
+        </Button>
+      ))}
+    </div>
+  );
+}

package/registry/nocobase-ai/components/tools/tool-renderer-provider.tsx

@@ -0,0 +1,55 @@
+import {
+  createContext,
+  useContext,
+  useMemo,
+  type ComponentType,
+  type PropsWithChildren,
+} from "react";
+import type { ToolCallPart } from "../chat/tool-call-card";
+import { builtInToolRenderers } from "./builtin-tool-renderers";
+import { BusinessReportDialogProvider } from "./business-report-dialog";
+
+export type AIToolRendererProps = {
+  part: ToolCallPart;
+  disabled: boolean;
+  onEdit: (input: unknown) => void | Promise<void>;
+  onApprove: () => void | Promise<void>;
+  onReject: (message?: string) => void | Promise<void>;
+  onRevise: () => void;
+};
+
+export type AIToolRenderer = ComponentType<AIToolRendererProps>;
+export type AIToolRendererDefinition = {
+  component: AIToolRenderer;
+  handlesApproval?: boolean;
+  standalone?: boolean;
+};
+export type AIToolRendererEntry = AIToolRenderer | AIToolRendererDefinition;
+export type AIToolRendererMap = Record<string, AIToolRendererEntry>;
+
+const AIToolRendererContext =
+  createContext<AIToolRendererMap>(builtInToolRenderers);
+
+export function AIToolRendererProvider({
+  renderers,
+  children,
+}: PropsWithChildren<{ renderers?: AIToolRendererMap }>) {
+  const value = useMemo(
+    () => ({ ...builtInToolRenderers, ...renderers }),
+    [renderers]
+  );
+
+  return (
+    <BusinessReportDialogProvider>
+      <AIToolRendererContext.Provider value={value}>
+        {children}
+      </AIToolRendererContext.Provider>
+    </BusinessReportDialogProvider>
+  );
+}
+
+export function useAIToolRenderer(toolName: string) {
+  const entry = useContext(AIToolRendererContext)[toolName];
+  if (!entry) return undefined;
+  return typeof entry === "function" ? { component: entry } : entry;
+}

package/registry/nocobase-ai/components/tools/tool-renderer-utils.ts

@@ -0,0 +1,18 @@
+export const asRecord = (value: unknown): Record<string, unknown> =>
+  value && typeof value === "object" && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {};
+
+export const asString = (value: unknown) =>
+  typeof value === "string" ? value : "";
+
+export const parseArray = (value: unknown): unknown[] => {
+  if (Array.isArray(value)) return value;
+  if (typeof value !== "string") return [];
+  try {
+    const parsed = JSON.parse(value) as unknown;
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+};

package/registry/nocobase-ai/components/tools/workflow-renderer.tsx

@@ -0,0 +1,108 @@
+import { Button } from "@/components/ui/button";
+import { CheckCircle2, GitBranch } from "lucide-react";
+import { useState } from "react";
+import { MarkdownMessage } from "../chat/markdown-message";
+import { getNocoBaseToolCallMetadata } from "../chat/tool-call-card";
+import type { AIToolRendererProps } from "./tool-renderer-provider";
+import { asRecord, asString } from "./tool-renderer-utils";
+
+export function WorkflowRenderer({
+  part,
+  disabled,
+  onApprove,
+  onReject,
+  onRevise,
+}: AIToolRendererProps) {
+  const input = asRecord(part.input);
+  const metadata = getNocoBaseToolCallMetadata(part);
+  const entries = Object.entries(asRecord(input.result));
+  const [action, setAction] = useState<"approve" | "reject" | "revise">();
+  const [decided, setDecided] = useState(false);
+  const canDecide =
+    metadata?.invokeStatus === undefined ||
+    metadata.invokeStatus === "interrupted";
+  const actionDisabled =
+    disabled || action !== undefined || decided || !canDecide;
+
+  const runAction = async (
+    nextAction: "approve" | "reject",
+    callback: () => void | Promise<void>
+  ) => {
+    setAction(nextAction);
+    try {
+      await callback();
+      setDecided(true);
+    } finally {
+      setAction(undefined);
+    }
+  };
+
+  return (
+    <div className="rounded-lg border bg-background p-3">
+      <div className="flex items-center gap-2 text-sm font-medium">
+        <GitBranch className="size-4" />
+        {asString(input.workflowTitle) || "Workflow task"}
+      </div>
+      <div className="mt-3 grid gap-2 sm:grid-cols-2">
+        {entries.map(([key, value]) => (
+          <div key={key} className="rounded-md bg-muted/40 px-2.5 py-2">
+            <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
+              {key}
+            </div>
+            <div className="mt-0.5 overflow-x-auto text-xs font-medium">
+              {typeof value === "string" ||
+              typeof value === "number" ||
+              typeof value === "boolean" ? (
+                <MarkdownMessage>{String(value)}</MarkdownMessage>
+              ) : (
+                <pre className="whitespace-pre-wrap break-words font-mono text-[11px] leading-5">
+                  {JSON.stringify(value, null, 2)}
+                </pre>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+      {!entries.length ? (
+        <div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
+          <CheckCircle2 className="size-3.5" /> Ready for review
+        </div>
+      ) : null}
+      <div className="mt-3 flex flex-wrap justify-end gap-2 border-t pt-3">
+        <Button
+          variant="ghost"
+          size="sm"
+          disabled={actionDisabled}
+          onClick={() =>
+            void runAction("reject", () =>
+              onReject(
+                "The user rejected this workflow node. Stop. Do not continue, do not reply about the task result, and do not call this tool again. Only state that you understand."
+              )
+            )
+          }
+        >
+          {action === "reject" ? "Rejecting…" : "Reject"}
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={actionDisabled}
+          onClick={() => {
+            setAction("revise");
+            onRevise();
+            setAction(undefined);
+          }}
+        >
+          Revise
+        </Button>
+        <Button
+          size="sm"
+          disabled={actionDisabled}
+          onClick={() => void runAction("approve", onApprove)}
+        >
+          {action === "approve" ? "Approving…" : "Approve"}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/registry/nocobase-ai/components/triggers/ai-chat-floating-trigger.tsx

@@ -0,0 +1,73 @@
+import nocobaseAIChatIcon from "../../assets/nocobase-ai-chat.svg";
+import { cn } from "@/lib/utils";
+import {
+  useAI,
+  useAIChatControllerState,
+  useGlobalAIChatController,
+} from "../../providers";
+import type { AIChatController } from "../../providers";
+
+export type AIChatFloatingTriggerProps = {
+  aiEmployee?: string;
+  controller?: AIChatController;
+  unreadCount?: number;
+  position?: "fixed" | "absolute";
+  hideWhenOpen?: boolean;
+  className?: string;
+};
+
+export function AIChatFloatingTrigger({
+  aiEmployee,
+  controller: providedController,
+  unreadCount = 0,
+  position = "fixed",
+  hideWhenOpen = true,
+  className,
+}: AIChatFloatingTriggerProps) {
+  const ai = useAI();
+  const globalController = useGlobalAIChatController();
+  const controller = providedController ?? globalController;
+  const { open } = useAIChatControllerState(controller);
+
+  if (hideWhenOpen && open) return null;
+
+  const openChat = () => {
+    const employee = aiEmployee ?? ai.employees[0]?.username;
+    if (employee) {
+      controller.triggerTask({ aiEmployee: employee, open: true });
+      return;
+    }
+    controller.open();
+  };
+
+  return (
+    <button
+      type="button"
+      aria-label="Open AI chat"
+      className={cn(
+        "group/ai-floating z-40 flex items-center rounded-l-full border bg-background py-2.5 pr-5 pl-3 shadow-lg transition-[transform,opacity,box-shadow] duration-300 hover:translate-x-0 hover:opacity-100 hover:shadow-xl focus-visible:translate-x-0 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+        position === "fixed"
+          ? "fixed right-0 bottom-10"
+          : "absolute right-0 bottom-8",
+        "translate-x-2 opacity-80",
+        className
+      )}
+      onClick={openChat}
+    >
+      <span className="relative flex size-[42px] items-center justify-center">
+        <span className="flex size-full overflow-hidden rounded-lg">
+          <img
+            src={nocobaseAIChatIcon}
+            alt=""
+            className="size-full object-contain"
+          />
+        </span>
+        {unreadCount > 0 ? (
+          <span className="absolute -top-1.5 -right-1.5 z-10 flex min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] leading-4 font-semibold text-white ring-2 ring-background">
+            {unreadCount > 99 ? "99+" : unreadCount}
+          </span>
+        ) : null}
+      </span>
+    </button>
+  );
+}

package/registry/nocobase-ai/components/triggers/ai-employee-shortcut.tsx

@@ -0,0 +1,149 @@
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import {
+  useAI,
+  useAIPageContextScope,
+  useGlobalAIChatController,
+  type AIChatController,
+  type AIEmployee,
+  type AIEmployeeTask,
+  type AIWorkContextItem,
+} from "../../providers";
+import { AIEmployeeAvatar } from "../chat/ai-employee-avatar";
+import { Send, TextCursorInput } from "lucide-react";
+import { useState } from "react";
+
+export type AIEmployeeShortcutProps = {
+  aiEmployee: string | AIEmployee;
+  tasks?: AIEmployeeTask[];
+  context?: AIWorkContextItem[];
+  target?: AIChatController;
+  auto?: boolean;
+  size?: number;
+  label?: string;
+  showNotice?: boolean;
+  className?: string;
+  onTrigger?: (task?: AIEmployeeTask) => void;
+};
+
+export function AIEmployeeShortcut({
+  aiEmployee,
+  tasks = [],
+  context,
+  target,
+  auto,
+  size = 48,
+  label,
+  showNotice = false,
+  className,
+  onTrigger,
+}: AIEmployeeShortcutProps) {
+  const ai = useAI();
+  const [focused, setFocused] = useState(false);
+  const globalController = useGlobalAIChatController();
+  const inheritedContext = useAIPageContextScope();
+  const controller = target ?? globalController;
+  const employee =
+    typeof aiEmployee === "string"
+      ? ai.employees.find((item) => item.username === aiEmployee)
+      : ai.employees.find((item) => item.username === aiEmployee.username) ??
+        aiEmployee;
+
+  if (!employee) return null;
+
+  const trigger = (task?: AIEmployeeTask) => {
+    onTrigger?.(task);
+    controller.triggerTask({
+      aiEmployee: employee,
+      task,
+      tasks: task ? undefined : tasks,
+      context: context?.length ? context : inheritedContext,
+      auto,
+      open: true,
+    });
+  };
+
+  const visibleTasks = tasks.filter((task) => task.title);
+
+  return (
+    <HoverCard>
+      <HoverCardTrigger
+        render={
+          <button
+            type="button"
+            className={cn(
+              "group/ai-shortcut relative inline-flex items-center gap-2 rounded-full outline-none transition-transform hover:scale-[1.04] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              label && "border bg-background pr-3 shadow-sm",
+              className
+            )}
+            onClick={() => trigger()}
+            onMouseEnter={() => setFocused(true)}
+            onMouseLeave={() => setFocused(false)}
+          />
+        }
+      >
+        <AIEmployeeAvatar
+          employee={employee}
+          flip={focused || showNotice}
+          className="transition-[filter] group-hover/ai-shortcut:brightness-105"
+          style={{ width: size, height: size }}
+        />
+        {label ? <span className="text-sm font-medium">{label}</span> : null}
+        {showNotice ? (
+          <span className="absolute top-0 right-0 size-2.5 rounded-full border-2 border-background bg-foreground" />
+        ) : null}
+      </HoverCardTrigger>
+      <HoverCardContent side="top" align="start" className="w-72 p-3">
+        <div className="flex items-center gap-3">
+          <AIEmployeeAvatar employee={employee} className="size-10" />
+          <div className="min-w-0">
+            <div className="truncate text-sm font-medium">
+              {employee.nickname}
+            </div>
+            {employee.position ? (
+              <div className="truncate text-xs text-muted-foreground">
+                {employee.position}
+              </div>
+            ) : null}
+          </div>
+        </div>
+        {employee.bio ?? employee.description ? (
+          <p className="mt-3 border-t pt-3 text-xs leading-5 text-muted-foreground">
+            {employee.bio ?? employee.description}
+          </p>
+        ) : null}
+        {visibleTasks.length ? (
+          <div className="mt-3 flex flex-wrap gap-1.5 border-t pt-3">
+            {visibleTasks.map((task, index) => (
+              <Button
+                key={`${task.title}-${index}`}
+                variant="secondary"
+                size="sm"
+                className="h-auto min-h-7 whitespace-normal py-1 text-left"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  trigger(task);
+                }}
+              >
+                {task.autoSend ? (
+                  <Send className="size-3.5" />
+                ) : (
+                  <TextCursorInput className="size-3.5" />
+                )}
+                <span>{task.title}</span>
+                <span className="text-[10px] text-muted-foreground">
+                  {task.autoSend ? "Auto send" : "Fill composer"}
+                </span>
+              </Button>
+            ))}
+          </div>
+        ) : null}
+      </HoverCardContent>
+    </HoverCard>
+  );
+}

package/registry/nocobase-ai/demo/configuration-gate.tsx

@@ -0,0 +1,49 @@
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { LoadingState } from "@/components/app-shell/loading-state";
+import { useAI } from "../providers";
+import { CircleAlert } from "lucide-react";
+import type { ReactNode } from "react";
+
+export function AIConfigurationGate({ children }: { children: ReactNode }) {
+  const {
+    configurationStatus,
+    configurationError,
+    modelConfigurationError,
+    hasEnabledModels,
+  } = useAI();
+
+  if (configurationStatus === "ready" && hasEnabledModels) return children;
+
+  const loading = configurationStatus === "loading";
+  const error = configurationError ?? modelConfigurationError;
+
+  if (loading) return <LoadingState className="min-h-80" />;
+
+  return (
+    <div className="space-y-6 pb-12">
+      <section className="border-b pb-8">
+        <div className="flex items-center gap-2">
+          <Badge variant="secondary">AI Components</Badge>
+          <Badge variant="outline">Live API</Badge>
+        </div>
+        <h1 className="mt-4 text-3xl font-semibold tracking-[-0.035em]">
+          NocoBase AI
+        </h1>
+        <p className="mt-3 max-w-3xl text-sm leading-6 text-muted-foreground">
+          Conversations use the AI employees and enabled models configured in
+          the connected NocoBase application.
+        </p>
+      </section>
+
+      <Alert variant="destructive">
+        <CircleAlert />
+        <AlertTitle>NocoBase AI is not available</AlertTitle>
+        <AlertDescription>
+          {error?.message ??
+            "Check the NocoBase connection and the AI employees available to the current user."}
+        </AlertDescription>
+      </Alert>
+    </div>
+  );
+}