@nocobase/portal-template-default 1.0.1 → 1.0.3

package/src/extensions/nocobase-ai/demo/tool-cards.tsx

@@ -0,0 +1,530 @@
+import {
+  ToolCallCard,
+  type ToolCallPart,
+} from "../components/chat/tool-call-card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+
+const tools = {
+  suggestions: {
+    type: "dynamic-tool",
+    toolName: "suggestions",
+    toolCallId: "tool-demo-suggestions",
+    state: "input-available",
+    input: {
+      options: [
+        "Summarize the operational risks",
+        "Draft a weekly support report",
+        "Propose the next automation",
+      ],
+    },
+  },
+  report: {
+    type: "dynamic-tool",
+    toolName: "businessReportGenerator",
+    toolCallId: "tool-demo-report",
+    state: "output-available",
+    input: {
+      title: "Customer support operations · Weekly review",
+      summary:
+        "Ticket volume remained stable while SLA exposure concentrated in two queues.",
+      markdown: `# Weekly support review
+
+## Executive summary
+
+Ticket volume remained stable, but unresolved priority requests increased in the onboarding and billing queues.
+
+{{ chart:1 }}
+
+{{ chart:2 }}
+
+## Recommended actions
+
+- Reassign unowned priority tickets before the next shift.
+- Add an SLA warning automation for billing requests.
+- Review the onboarding knowledge-base gaps with the support lead.`,
+      charts: [
+        {
+          title: "Open tickets by queue",
+          options: {
+            xAxis: {
+              type: "category",
+              data: ["Billing", "Onboarding", "API", "General"],
+            },
+            yAxis: { type: "value" },
+            series: [{ type: "bar", data: [31, 26, 18, 14] }],
+          },
+        },
+        {
+          title: "SLA exposure trend",
+          options: {
+            xAxis: {
+              type: "category",
+              data: ["Mon", "Tue", "Wed", "Thu", "Fri"],
+            },
+            yAxis: { type: "value" },
+            series: [{ type: "line", smooth: true, data: [8, 11, 9, 15, 12] }],
+          },
+        },
+      ],
+    },
+    output: { ready: true },
+  },
+  chart: {
+    type: "dynamic-tool",
+    toolName: "chartGenerator",
+    toolCallId: "tool-demo-chart",
+    state: "output-available",
+    input: {
+      options: {
+        tooltip: { trigger: "axis" },
+        xAxis: {
+          type: "category",
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        yAxis: { type: "value" },
+        series: [
+          { type: "bar", name: "Tickets", data: [42, 64, 51, 78, 58, 86, 72] },
+        ],
+      },
+    },
+    output: { ready: true },
+  },
+  subAgent: {
+    type: "dynamic-tool",
+    toolName: "dispatch-sub-agent-task",
+    toolCallId: "tool-demo-sub-agent",
+    state: "input-available",
+    input: {
+      username: "dex",
+      question:
+        "Review the current ticket categories and identify where automation would remove the most repetitive work.",
+    },
+  },
+  workflow: {
+    type: "dynamic-tool",
+    toolName: "aiEmployeeWorkflowTaskOutput",
+    toolCallId: "tool-demo-workflow",
+    state: "input-available",
+    input: {
+      workflowTitle: "Publish weekly service review",
+      result: {
+        audience: "Support leadership",
+        format: "Markdown report",
+        records: 128,
+        delivery: "Team workspace",
+      },
+    },
+  },
+  approval: {
+    type: "dynamic-tool",
+    toolName: "updateRecords",
+    toolCallId: "tool-demo-approval",
+    state: "input-available",
+    input: {
+      collection: "tickets",
+      action: "Assign priority tickets to the on-call team",
+    },
+  },
+  preparing: {
+    type: "dynamic-tool",
+    toolName: "inspectWorkspace",
+    toolCallId: "tool-demo-preparing",
+    state: "input-streaming",
+    input: { scope: "support operations" },
+  },
+  running: {
+    type: "dynamic-tool",
+    toolName: "searchRecords",
+    toolCallId: "tool-demo-running",
+    state: "input-available",
+    input: { collection: "tickets", filter: { status: "open" } },
+  },
+  completed: {
+    type: "dynamic-tool",
+    toolName: "inspectWorkspace",
+    toolCallId: "tool-demo-completed",
+    state: "output-available",
+    input: { scope: "support operations" },
+    output: { reviewed: true },
+  },
+  failed: {
+    type: "dynamic-tool",
+    toolName: "publishReport",
+    toolCallId: "tool-demo-failed",
+    state: "output-error",
+    input: { destination: "leadership workspace" },
+    errorText: "The current role cannot publish to this workspace.",
+  },
+} satisfies Record<string, ToolCallPart>;
+
+const specializedCards = [
+  [
+    "Suggestions",
+    "Let the user choose how the AI should continue.",
+    tools.suggestions,
+  ],
+  [
+    "Business report",
+    "Open a generated report for preview and export.",
+    tools.report,
+  ],
+  [
+    "Chart",
+    "Render generated visualization options as an inline preview.",
+    tools.chart,
+  ],
+  [
+    "Sub-agent",
+    "Show delegated AI employee work without expanding the whole payload.",
+    tools.subAgent,
+  ],
+  [
+    "Workflow output",
+    "Present structured workflow results in a business-friendly card.",
+    tools.workflow,
+  ],
+] as const;
+
+export function ToolCardsPage() {
+  const [decision, setDecision] = useState("Waiting for a decision");
+  const [workflowDecision, setWorkflowDecision] = useState(
+    "Waiting for workflow review"
+  );
+
+  return (
+    <div className="space-y-10 pb-12">
+      <section className="flex flex-wrap items-start justify-between gap-5 border-b pb-8">
+        <div>
+          <div className="flex items-center gap-2">
+            <Badge variant="secondary">AI Components</Badge>
+            <Badge variant="outline">Tool renderers</Badge>
+          </div>
+          <h1 className="mt-4 text-3xl font-semibold tracking-[-0.035em]">
+            Tool Cards
+          </h1>
+          <p className="mt-3 max-w-3xl text-sm leading-6 text-muted-foreground">
+            Specialized tools render their complete business interaction.
+            Tools without a registered renderer fall back to the shared status,
+            approval, error, and input disclosure card.
+          </p>
+        </div>
+      </section>
+
+      <section className="space-y-5">
+        <SectionTitle
+          eyebrow="Specialized renderers"
+          title="Adapt NocoBase tool results to the job they represent"
+          description="These cards follow the original AI employee patterns while using the starter's shadcn and Base UI component system."
+        />
+        <div className="grid gap-4 lg:grid-cols-2">
+          {specializedCards.map(([title, description, part]) => (
+            <Card key={title} className="gap-0 py-0">
+              <CardHeader className="border-b py-4">
+                <CardTitle className="text-base">{title}</CardTitle>
+                <p className="text-xs leading-5 text-muted-foreground">
+                  {description}
+                </p>
+              </CardHeader>
+              <CardContent className="p-4">
+                <ToolCallCard
+                  part={part}
+                  approval={
+                    part.toolName === "aiEmployeeWorkflowTaskOutput"
+                      ? { required: true, status: "pending" }
+                      : undefined
+                  }
+                  onDecision={async (nextDecision) => {
+                    if (part.toolName !== "aiEmployeeWorkflowTaskOutput")
+                      return;
+                    setWorkflowDecision(
+                      nextDecision === "approve"
+                        ? "Workflow output approved"
+                        : nextDecision === "reject"
+                        ? "Workflow output rejected"
+                        : "Revision requested"
+                    );
+                  }}
+                />
+                {part.toolName === "aiEmployeeWorkflowTaskOutput" ? (
+                  <p className="mt-2 text-xs text-muted-foreground">
+                    {workflowDecision}
+                  </p>
+                ) : null}
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      <section className="space-y-5">
+        <SectionTitle
+          eyebrow="Default Tool Card"
+          title="One shared shell for every normal tool state"
+          description="Tools without a specialized renderer still use the same compact status, input disclosure, error, and permission behavior."
+        />
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {[
+            ["Preparing input", tools.preparing],
+            ["Running", tools.running],
+            ["Completed", tools.completed],
+            ["Failed", tools.failed],
+          ].map(([label, part]) => (
+            <Card key={label as string} className="gap-0 py-0">
+              <CardHeader className="border-b py-3">
+                <CardTitle className="text-sm">{label as string}</CardTitle>
+              </CardHeader>
+              <CardContent className="p-4">
+                <ToolCallCard part={part as ToolCallPart} />
+              </CardContent>
+            </Card>
+          ))}
+          <Card className="gap-0 py-0 md:col-span-2 xl:col-span-2">
+            <CardHeader className="border-b py-3">
+              <CardTitle className="text-sm">Approval required</CardTitle>
+            </CardHeader>
+            <CardContent className="p-4">
+              <ToolCallCard
+                part={tools.approval}
+                approval={{ required: true, status: "pending" }}
+                onDecision={async (nextDecision) => {
+                  setDecision(
+                    nextDecision === "approve"
+                      ? "The tool was allowed."
+                      : "The tool was denied."
+                  );
+                }}
+              />
+              <p className="mt-2 text-xs text-muted-foreground">{decision}</p>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+
+      <section className="space-y-5">
+        <SectionTitle
+          eyebrow="Code prompt"
+          title="Generate an implementation prompt for a specialized Tool Card"
+          description="Choose the nearest existing renderer and describe the business interaction. The generated prompt tells the coding agent exactly where and how to implement it."
+        />
+        <ToolCardCodePrompt />
+      </section>
+    </div>
+  );
+}
+
+type ReferenceRenderer =
+  | "suggestions"
+  | "business-report"
+  | "chart"
+  | "sub-agent"
+  | "workflow";
+
+const referenceRenderers: Record<
+  ReferenceRenderer,
+  { label: string; guidance: string }
+> = {
+  suggestions: {
+    label: "Suggestions",
+    guidance:
+      "Follow SuggestionsRenderer for selectable options that call onEdit with the user's choice.",
+  },
+  "business-report": {
+    label: "Business report",
+    guidance:
+      "Follow BusinessReportRenderer for an inline summary that opens a larger preview or export dialog.",
+  },
+  chart: {
+    label: "Chart",
+    guidance:
+      "Follow ChartRenderer for a compact visual preview derived from structured tool arguments.",
+  },
+  "sub-agent": {
+    label: "Sub-agent",
+    guidance:
+      "Follow SubAgentRenderer for a compact entity card with expandable task details.",
+  },
+  workflow: {
+    label: "Workflow output",
+    guidance:
+      "Follow WorkflowRenderer for structured results and card-owned Reject, Revise, and Approve actions.",
+  },
+};
+
+function ToolCardCodePrompt() {
+  const [toolName, setToolName] = useState("reviewSupportQueue");
+  const [reference, setReference] = useState<ReferenceRenderer>("workflow");
+  const [behavior, setBehavior] = useState(
+    "Show the affected support records, summarize the proposed changes, and let the user approve, request a revision, or reject the operation."
+  );
+  const [handlesApproval, setHandlesApproval] = useState(true);
+  const [copied, setCopied] = useState(false);
+  const referenceDefinition = referenceRenderers[reference];
+  const prompt = `Implement a specialized NocoBase AI Tool Card for the tool "${
+    toolName || "customTool"
+  }" in the shadcn Registry source at registry/nocobase-ai.
+
+Business interaction:
+${behavior || "Render the tool's business-specific interaction."}
+
+Reference implementation:
+- ${referenceDefinition.guidance}
+- Reuse the shared visual language from the existing specialized Tool Cards demo.
+
+Implementation requirements:
+- Create a focused renderer component under registry/nocobase-ai/components/tools. It renders the complete business-specific card.
+- Accept AIToolRendererProps: part, disabled, onEdit, onApprove, onReject, and onRevise.
+- Register the renderer for the exact tool name "${
+    toolName || "customTool"
+  }" in the built-in renderer map, or provide it through AIToolRendererProvider when it belongs to an external Registry package.
+- Set handlesApproval to ${handlesApproval}. ${
+    handlesApproval
+      ? "The specialized body must expose the complete decision UI and call onApprove, onReject, onEdit, or onRevise itself."
+      : "Leave approval, status, errors, and disclosure to the shared ToolCallCard shell."
+  }
+- Set standalone to true when the renderer replaces the Default Tool Card shell.
+- Do not add tool-name branches to ChatMessage or AIChatMessageList.
+- Do not render a separate raw Output section.
+- Preserve the actual message order: reasoning, assistant text, then the Tool Card in the position used by the NocoBase message renderer.
+- Use shadcn/Base UI components only; do not add Ant Design, Radix, or Zustand.
+- Add a fixed ToolCallPart example to registry/nocobase-ai/demo/tool-cards.tsx so every state and action can be reviewed without calling the backend.
+- Export any public renderer types or components from registry/nocobase-ai/components/index.ts when application code needs them.
+
+Verification:
+- Run pnpm registry:preview.
+- Run pnpm exec tsc --noEmit.
+- Run the scoped ESLint check and pnpm registry:build.
+- Verify the card in light and dark themes, narrow chat panels, expanded dialogs, pending approval, completed, and error states.`;
+
+  return (
+    <div className="grid items-start gap-5 xl:grid-cols-[380px_minmax(0,1fr)]">
+      <Card className="gap-0 py-0">
+        <CardHeader className="border-b py-4">
+          <CardTitle className="text-base">Describe the Tool Card</CardTitle>
+          <p className="text-xs leading-5 text-muted-foreground">
+            The examples above remain the visual reference; these values define
+            the implementation task.
+          </p>
+        </CardHeader>
+        <CardContent className="space-y-5 p-4">
+          <div className="space-y-2">
+            <label className="text-xs font-medium" htmlFor="tool-name">
+              Tool name
+            </label>
+            <Input
+              id="tool-name"
+              value={toolName}
+              onChange={(event) => setToolName(event.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <div className="text-xs font-medium">Closest example</div>
+            <Select
+              value={reference}
+              onValueChange={(value) => {
+                if (!value) return;
+                const nextReference = value as ReferenceRenderer;
+                setReference(nextReference);
+                setHandlesApproval(nextReference === "workflow");
+              }}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue>{referenceDefinition.label}</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {Object.entries(referenceRenderers).map(([value, option]) => (
+                  <SelectItem key={value} value={value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <label className="text-xs font-medium" htmlFor="tool-behavior">
+              Business interaction
+            </label>
+            <Textarea
+              id="tool-behavior"
+              className="min-h-28"
+              value={behavior}
+              onChange={(event) => setBehavior(event.target.value)}
+            />
+          </div>
+          <label className="flex items-center justify-between gap-4 border-t pt-4 text-sm">
+            <span>
+              <span className="block font-medium">Card owns approval UI</span>
+              <span className="block text-xs text-muted-foreground">
+                Enable for actions such as Approve, Revise, and Reject.
+              </span>
+            </span>
+            <Switch
+              size="sm"
+              checked={handlesApproval}
+              onCheckedChange={setHandlesApproval}
+            />
+          </label>
+        </CardContent>
+      </Card>
+      <Card className="gap-0 py-0">
+        <div className="flex items-center justify-between border-b px-4 py-3">
+          <div>
+            <div className="text-sm font-medium">Coding prompt</div>
+            <div className="text-xs text-muted-foreground">
+              Ready to paste into an implementation task.
+            </div>
+          </div>
+          <Button
+            size="sm"
+            onClick={async () => {
+              await navigator.clipboard.writeText(prompt);
+              setCopied(true);
+              window.setTimeout(() => setCopied(false), 1500);
+            }}
+          >
+            {copied ? <Check /> : <Copy />}
+            {copied ? "Copied" : "Copy prompt"}
+          </Button>
+        </div>
+        <pre className="max-h-[720px] min-h-[560px] overflow-auto whitespace-pre-wrap bg-muted/25 p-5 font-mono text-xs leading-5 text-muted-foreground">
+          {prompt}
+        </pre>
+      </Card>
+    </div>
+  );
+}
+
+function SectionTitle({
+  eyebrow,
+  title,
+  description,
+}: {
+  eyebrow: string;
+  title: string;
+  description: string;
+}) {
+  return (
+    <div>
+      <p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+        {eyebrow}
+      </p>
+      <h2 className="mt-2 text-xl font-semibold tracking-tight">{title}</h2>
+      <p className="mt-1.5 max-w-3xl text-sm leading-6 text-muted-foreground">
+        {description}
+      </p>
+    </div>
+  );
+}

package/src/extensions/nocobase-ai/extension.tsx

@@ -0,0 +1,158 @@
+import { NocoBaseAIExtensionProvider } from "./global-ai-chat";
+import type { AppExtension } from "@/app/extension";
+import { LoadingState } from "@/components/app-shell/loading-state";
+import {
+  Bot,
+  MessageSquare,
+  MousePointer2,
+  PanelRight,
+  Sparkles,
+  Wrench,
+} from "lucide-react";
+import { lazy, Suspense, type ReactNode } from "react";
+import { Outlet, Route } from "react-router";
+
+const AIChatPage = lazy(() =>
+  import("./demo").then((module) => ({ default: module.AIChatPage }))
+);
+const FloatingChatPage = lazy(() =>
+  import("./demo/floating").then((module) => ({
+    default: module.FloatingChatPage,
+  }))
+);
+const ShortcutPage = lazy(() =>
+  import("./demo/shortcut").then((module) => ({
+    default: module.ShortcutPage,
+  }))
+);
+const PageContextPage = lazy(() =>
+  import("./demo/page-context").then((module) => ({
+    default: module.PageContextPage,
+  }))
+);
+const ToolCardsPage = lazy(() =>
+  import("./demo/tool-cards").then((module) => ({
+    default: module.ToolCardsPage,
+  }))
+);
+
+function LazyDemoRoute({ children }: { children: ReactNode }) {
+  return (
+    <Suspense fallback={<LoadingState className="min-h-[320px]" />}>
+      {children}
+    </Suspense>
+  );
+}
+
+const nocobaseAIExtension: AppExtension = {
+  id: "nocobase-ai",
+  Provider: NocoBaseAIExtensionProvider,
+  resources: [
+    {
+      name: "ai-components",
+      meta: {
+        label: "AI Components",
+        icon: <Bot />,
+        acl: { type: "authenticated" },
+      },
+    },
+    {
+      name: "ai-chat-window",
+      list: "/ai-chat",
+      meta: {
+        parent: "ai-components",
+        label: "Chat window",
+        icon: <MessageSquare />,
+        description:
+          "Build freely with AI while NocoBase keeps the application reliable.",
+        acl: { type: "authenticated" },
+      },
+    },
+    {
+      name: "ai-floating-chat",
+      list: "/ai-chat/floating",
+      meta: {
+        parent: "ai-components",
+        label: "Floating chat",
+        icon: <PanelRight />,
+        acl: { type: "authenticated" },
+      },
+    },
+    {
+      name: "ai-employee-tasks",
+      list: "/ai-chat/shortcut",
+      meta: {
+        parent: "ai-components",
+        label: "Employee tasks",
+        icon: <Sparkles />,
+        acl: { type: "authenticated" },
+      },
+    },
+    {
+      name: "ai-page-context",
+      list: "/ai-chat/context",
+      meta: {
+        parent: "ai-components",
+        label: "Page context",
+        icon: <MousePointer2 />,
+        acl: { type: "authenticated" },
+      },
+    },
+    {
+      name: "ai-tool-cards",
+      list: "/ai-chat/tools",
+      meta: {
+        parent: "ai-components",
+        label: "Tool cards",
+        icon: <Wrench />,
+        acl: { type: "authenticated" },
+      },
+    },
+  ],
+  routes: (
+    <Route key="nocobase-ai" path="/ai-chat" element={<Outlet />}>
+      <Route
+        index
+        element={
+          <LazyDemoRoute>
+            <AIChatPage />
+          </LazyDemoRoute>
+        }
+      />
+      <Route
+        path="floating"
+        element={
+          <LazyDemoRoute>
+            <FloatingChatPage />
+          </LazyDemoRoute>
+        }
+      />
+      <Route
+        path="shortcut"
+        element={
+          <LazyDemoRoute>
+            <ShortcutPage />
+          </LazyDemoRoute>
+        }
+      />
+      <Route
+        path="context"
+        element={
+          <LazyDemoRoute>
+            <PageContextPage />
+          </LazyDemoRoute>
+        }
+      />
+      <Route
+        path="tools"
+        element={
+          <LazyDemoRoute>
+            <ToolCardsPage />
+          </LazyDemoRoute>
+        }
+      />
+    </Route>
+  ),
+};
+
+export default nocobaseAIExtension;