@nocobase/portal-template-default 1.0.3 → 1.0.5

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

@@ -1,67 +0,0 @@
-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/src/extensions/nocobase-ai/components/tools/suggestions-renderer.tsx

@@ -1,59 +0,0 @@
-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/src/extensions/nocobase-ai/components/tools/tool-renderer-provider.tsx

@@ -1,55 +0,0 @@
-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/src/extensions/nocobase-ai/components/tools/tool-renderer-utils.ts

@@ -1,18 +0,0 @@
-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/src/extensions/nocobase-ai/components/tools/workflow-renderer.tsx

@@ -1,108 +0,0 @@
-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/src/extensions/nocobase-ai/components/triggers/ai-chat-floating-trigger.tsx

@@ -1,73 +0,0 @@
-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/src/extensions/nocobase-ai/components/triggers/ai-employee-shortcut.tsx

@@ -1,149 +0,0 @@
-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/src/extensions/nocobase-ai/demo/configuration-gate.tsx

@@ -1,49 +0,0 @@
-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>
-  );
-}