@nocobase/portal-template-default 1.0.2 → 1.0.3

package/src/extensions/nocobase-ai/components/surfaces/chat-side-panel.tsx

@@ -0,0 +1,74 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { PanelLeftClose, PanelRightClose } from "lucide-react";
+import { useEffect, type CSSProperties, type PropsWithChildren } from "react";
+
+export type ChatSidePanelProps = PropsWithChildren<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  side?: "left" | "right";
+  width?: number | string;
+  closeOnEscape?: boolean;
+  showCloseHandle?: boolean;
+}>;
+
+export function ChatSidePanel({
+  open,
+  onOpenChange,
+  side = "right",
+  width = 450,
+  closeOnEscape = true,
+  showCloseHandle = true,
+  children,
+}: ChatSidePanelProps) {
+  useEffect(() => {
+    if (!open || !closeOnEscape) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      const openDialog = document.querySelector(
+        '[role="dialog"][data-state="open"], [role="alertdialog"][data-state="open"]'
+      );
+      if (openDialog) return;
+      onOpenChange(false);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [closeOnEscape, onOpenChange, open]);
+
+  if (!open) return null;
+
+  const panelWidth = typeof width === "number" ? `${width}px` : width;
+
+  return (
+    <aside
+      role="complementary"
+      aria-label="NocoBase AI employee"
+      data-side={side}
+      className={cn(
+        "fixed inset-y-0 z-50 max-w-full overscroll-contain bg-background shadow-2xl animate-in duration-200",
+        side === "right"
+          ? "right-0 border-l slide-in-from-right"
+          : "left-0 border-r slide-in-from-left"
+      )}
+      style={{ width: panelWidth } as CSSProperties}
+    >
+      {showCloseHandle ? (
+        <Button
+          variant="outline"
+          size="icon-sm"
+          className={cn(
+            "absolute top-1/2 z-40 size-9 -translate-y-1/2 rounded-full bg-background shadow-md before:absolute before:-inset-2",
+            side === "right"
+              ? "left-0 -translate-x-1/2"
+              : "right-0 translate-x-1/2"
+          )}
+          aria-label="Close side panel"
+          onClick={() => onOpenChange(false)}
+        >
+          {side === "right" ? <PanelRightClose /> : <PanelLeftClose />}
+        </Button>
+      ) : null}
+      {children}
+    </aside>
+  );
+}

package/src/extensions/nocobase-ai/components/surfaces/chat-surface-actions.tsx

@@ -0,0 +1,54 @@
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Maximize2, PanelRight, X } from "lucide-react";
+
+export function ChatSurfaceActions({
+  expanded,
+  onExpandedChange,
+  onClose,
+}: {
+  expanded: boolean;
+  onExpandedChange: (expanded: boolean) => void;
+  onClose: () => void;
+}) {
+  return (
+    <>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label={expanded ? "Collapse to side panel" : "Expand panel"}
+              onClick={() => onExpandedChange(!expanded)}
+            />
+          }
+        >
+          {expanded ? <PanelRight /> : <Maximize2 />}
+        </TooltipTrigger>
+        <TooltipContent>
+          {expanded ? "Collapse to side panel" : "Expand panel"}
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Close AI chat"
+              onClick={onClose}
+            />
+          }
+        >
+          <X />
+        </TooltipTrigger>
+        <TooltipContent>Close</TooltipContent>
+      </Tooltip>
+    </>
+  );
+}

package/src/extensions/nocobase-ai/components/tools/builtin-tool-renderers.tsx

@@ -0,0 +1,31 @@
+import type { AIToolRendererMap } from "./tool-renderer-provider";
+import { BusinessReportRenderer } from "./business-report-renderer";
+import { ChartRenderer } from "./chart-renderer";
+import { SubAgentRenderer } from "./sub-agent-renderer";
+import { SuggestionsRenderer } from "./suggestions-renderer";
+import { WorkflowRenderer } from "./workflow-renderer";
+
+export const builtInToolRenderers: AIToolRendererMap = {
+  suggestions: {
+    component: SuggestionsRenderer,
+    handlesApproval: true,
+    standalone: true,
+  },
+  businessReportGenerator: {
+    component: BusinessReportRenderer,
+    standalone: true,
+  },
+  chartGenerator: {
+    component: ChartRenderer,
+    standalone: true,
+  },
+  "dispatch-sub-agent-task": {
+    component: SubAgentRenderer,
+    standalone: true,
+  },
+  aiEmployeeWorkflowTaskOutput: {
+    component: WorkflowRenderer,
+    handlesApproval: true,
+    standalone: true,
+  },
+};

package/src/extensions/nocobase-ai/components/tools/business-report-dialog.tsx

@@ -0,0 +1,364 @@
+import { MarkdownMessage } from "../chat/markdown-message";
+import { LoadingState } from "@/components/app-shell/loading-state";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Download, FileCode2, LoaderCircle, Printer } from "lucide-react";
+import {
+  createContext,
+  lazy,
+  type PropsWithChildren,
+  Suspense,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import {
+  buildBusinessReportHtml,
+  buildBusinessReportMarkdown,
+  downloadBusinessReportFile,
+  getBusinessReportFileName,
+  printBusinessReport,
+  splitBusinessReportMarkdown,
+  type BusinessReportData,
+} from "./business-report-utils";
+
+type BusinessReportDialogSnapshot = {
+  open: boolean;
+  toolCallId?: string;
+  report?: BusinessReportData;
+  ready: boolean;
+};
+
+const closedSnapshot: BusinessReportDialogSnapshot = {
+  open: false,
+  ready: false,
+};
+const EChartsPreview = lazy(() => import("./echarts-preview"));
+
+const sameCharts = (
+  left: BusinessReportData["charts"],
+  right: BusinessReportData["charts"]
+) => left === right || JSON.stringify(left) === JSON.stringify(right);
+
+const sameReport = (
+  left: BusinessReportData | undefined,
+  right: BusinessReportData
+) =>
+  left?.title === right.title &&
+  left.summary === right.summary &&
+  left.markdown === right.markdown &&
+  left.fileName === right.fileName &&
+  sameCharts(left.charts, right.charts);
+
+type BusinessReportDialogController = {
+  open: (
+    toolCallId: string,
+    report: BusinessReportData,
+    ready: boolean
+  ) => void;
+  update: (
+    toolCallId: string,
+    report: BusinessReportData,
+    ready: boolean
+  ) => void;
+};
+
+const BusinessReportDialogContext =
+  createContext<BusinessReportDialogController | null>(null);
+
+export function useBusinessReportDialog() {
+  const value = useContext(BusinessReportDialogContext);
+  if (!value) {
+    throw new Error(
+      "useBusinessReportDialog must be used inside BusinessReportDialogProvider"
+    );
+  }
+  return value;
+}
+
+export function BusinessReportDialogProvider({ children }: PropsWithChildren) {
+  const [state, setState] = useState(closedSnapshot);
+  const open = useCallback(
+    (toolCallId: string, report: BusinessReportData, ready: boolean) =>
+      setState({ open: true, toolCallId, report, ready }),
+    []
+  );
+  const update = useCallback(
+    (toolCallId: string, report: BusinessReportData, ready: boolean) =>
+      setState((current) => {
+        if (current.toolCallId !== toolCallId) return current;
+        if (current.ready === ready && sameReport(current.report, report)) {
+          return current;
+        }
+        return { ...current, report, ready };
+      }),
+    []
+  );
+  const controller = useMemo(() => ({ open, update }), [open, update]);
+  return (
+    <BusinessReportDialogContext.Provider value={controller}>
+      {children}
+      <BusinessReportDialogHost
+        state={state}
+        onOpenChange={(nextOpen) =>
+          setState((current) =>
+            current.open === nextOpen ? current : { ...current, open: nextOpen }
+          )
+        }
+      />
+    </BusinessReportDialogContext.Provider>
+  );
+}
+
+function ChartPreview({ options }: { options: Record<string, unknown> }) {
+  return (
+    <Suspense fallback={<LoadingState className="h-[280px]" />}>
+      <EChartsPreview options={options} />
+    </Suspense>
+  );
+}
+
+function BusinessReportDialogHost({
+  state,
+  onOpenChange,
+}: {
+  state: BusinessReportDialogSnapshot;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const report = state.report;
+  const [activeTab, setActiveTab] = useState("preview");
+  const [htmlPreview, setHtmlPreview] = useState("");
+  const [htmlPreviewSignature, setHtmlPreviewSignature] = useState("");
+  const [htmlLoading, setHtmlLoading] = useState(false);
+  const [exporting, setExporting] = useState<"html" | "pdf">();
+  const [exportError, setExportError] = useState<string>();
+  const reportSignature = useMemo(
+    () => (state.ready && report ? JSON.stringify(report) : ""),
+    [report, state.ready]
+  );
+  const reportMarkdown = useMemo(
+    () =>
+      state.open && state.ready && report
+        ? buildBusinessReportMarkdown(report)
+        : "",
+    [report, state.open, state.ready]
+  );
+  const previewParts = useMemo(
+    () =>
+      activeTab === "preview" && reportMarkdown
+        ? splitBusinessReportMarkdown(reportMarkdown)
+        : [],
+    [activeTab, reportMarkdown]
+  );
+
+  useEffect(() => {
+    setActiveTab("preview");
+    setHtmlPreview("");
+    setHtmlPreviewSignature("");
+    setExportError(undefined);
+  }, [state.toolCallId]);
+
+  useEffect(() => {
+    if (
+      !state.open ||
+      activeTab !== "html" ||
+      !state.ready ||
+      !report?.markdown ||
+      (htmlPreview && htmlPreviewSignature === reportSignature)
+    ) {
+      return;
+    }
+    let active = true;
+    setHtmlLoading(true);
+    setHtmlPreview("");
+    void buildBusinessReportHtml(report)
+      .then((html) => {
+        if (!active) return;
+        setHtmlPreview(html);
+        setHtmlPreviewSignature(reportSignature);
+      })
+      .catch((error: unknown) => {
+        if (active) {
+          setExportError(
+            error instanceof Error ? error.message : "Unable to build HTML"
+          );
+        }
+      })
+      .finally(() => {
+        if (active) setHtmlLoading(false);
+      });
+    return () => {
+      active = false;
+    };
+  }, [
+    activeTab,
+    htmlPreview,
+    htmlPreviewSignature,
+    report,
+    reportSignature,
+    state.open,
+    state.ready,
+  ]);
+
+  if (!report) return null;
+  const summary =
+    report.summary || "Open the report to review the generated analysis.";
+  const fileName = getBusinessReportFileName(report);
+
+  return (
+    <Dialog open={state.open} onOpenChange={onOpenChange}>
+      <DialogContent className="h-[86svh] w-[min(980px,calc(100vw-2rem))] max-w-[980px] grid-rows-[auto_1fr_auto] overflow-hidden p-0 sm:max-w-[980px]">
+        <div className="border-b px-5 py-4">
+          <DialogTitle>{report.title}</DialogTitle>
+          <DialogDescription className="mt-1">{summary}</DialogDescription>
+        </div>
+        <Tabs
+          value={activeTab}
+          onValueChange={(value) => setActiveTab(String(value))}
+          className="min-h-0 overflow-hidden px-5 py-4"
+        >
+          <TabsList>
+            <TabsTrigger value="preview">Preview</TabsTrigger>
+            <TabsTrigger value="markdown">Markdown</TabsTrigger>
+            <TabsTrigger value="html">HTML</TabsTrigger>
+          </TabsList>
+          <TabsContent
+            value="preview"
+            className="mt-3 min-h-0 overflow-auto rounded-lg border bg-background p-5"
+          >
+            <div className="space-y-4">
+              {previewParts.map((item, index) =>
+                item.type === "markdown" ? (
+                  <div key={index} className="ai-markdown">
+                    <MarkdownMessage variant="document">
+                      {item.content}
+                    </MarkdownMessage>
+                  </div>
+                ) : (
+                  <div key={index} className="rounded-lg border p-3">
+                    <ChartPreview options={item.options} />
+                  </div>
+                )
+              )}
+            </div>
+          </TabsContent>
+          <TabsContent
+            value="markdown"
+            className="mt-3 min-h-0 overflow-auto rounded-lg bg-muted p-4"
+          >
+            <pre className="whitespace-pre-wrap break-words font-mono text-xs leading-5">
+              {reportMarkdown}
+            </pre>
+          </TabsContent>
+          <TabsContent
+            value="html"
+            className="mt-3 min-h-0 overflow-hidden rounded-lg border bg-background"
+          >
+            {htmlPreview ? (
+              <iframe
+                title={`${report.title} HTML preview`}
+                srcDoc={htmlPreview}
+                className="size-full min-h-[480px] border-0 bg-white"
+              />
+            ) : htmlLoading ? (
+              <LoadingState className="h-full min-h-[480px]" />
+            ) : (
+              <div className="flex h-full min-h-[480px] items-center justify-center gap-2 text-sm text-muted-foreground">
+                HTML is unavailable
+              </div>
+            )}
+          </TabsContent>
+        </Tabs>
+        <div className="flex flex-wrap items-center justify-end gap-2 border-t px-5 py-3">
+          {exportError ? (
+            <p className="mr-auto text-xs text-destructive">{exportError}</p>
+          ) : null}
+          <Button
+            variant="outline"
+            disabled={!report.markdown}
+            onClick={() =>
+              downloadBusinessReportFile(
+                `${fileName}.md`,
+                reportMarkdown,
+                "text/markdown;charset=utf-8"
+              )
+            }
+          >
+            <Download /> Download Markdown
+          </Button>
+          <Button
+            variant="outline"
+            disabled={!report.markdown || exporting !== undefined}
+            onClick={async () => {
+              setExportError(undefined);
+              setExporting("html");
+              try {
+                const html = await buildBusinessReportHtml(report, {
+                  printMode: true,
+                });
+                downloadBusinessReportFile(
+                  `${fileName}.html`,
+                  html,
+                  "text/html;charset=utf-8"
+                );
+              } catch (error) {
+                setExportError(
+                  error instanceof Error
+                    ? error.message
+                    : "Unable to export HTML"
+                );
+              } finally {
+                setExporting(undefined);
+              }
+            }}
+          >
+            {exporting === "html" ? (
+              <LoaderCircle className="animate-spin" />
+            ) : (
+              <FileCode2 />
+            )}
+            Download HTML
+          </Button>
+          <Button
+            disabled={!report.markdown || exporting !== undefined}
+            onClick={async () => {
+              setExportError(undefined);
+              setExporting("pdf");
+              try {
+                const opened = await printBusinessReport(report);
+                if (!opened) {
+                  setExportError(
+                    "Popup blocked. Allow popups and try printing again."
+                  );
+                }
+              } catch (error) {
+                setExportError(
+                  error instanceof Error
+                    ? error.message
+                    : "Unable to print report"
+                );
+              } finally {
+                setExporting(undefined);
+              }
+            }}
+          >
+            {exporting === "pdf" ? (
+              <LoaderCircle className="animate-spin" />
+            ) : (
+              <Printer />
+            )}
+            Print PDF
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/extensions/nocobase-ai/components/tools/business-report-renderer.tsx

@@ -0,0 +1,122 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import { FileText, LoaderCircle } from "lucide-react";
+import { useEffect, useMemo, useRef } from "react";
+import { getNocoBaseToolCallMetadata } from "../chat/tool-call-card";
+import type { AIToolRendererProps } from "./tool-renderer-provider";
+import {
+  normalizeBusinessReportCharts,
+  type BusinessReportData,
+} from "./business-report-utils";
+import {
+  useBusinessReportDialog,
+} from "./business-report-dialog";
+import { asRecord, asString } from "./tool-renderer-utils";
+
+function ReportGeneratingProgress() {
+  return (
+    <div
+      role="progressbar"
+      aria-label="Generating business report"
+      className="mt-3 h-1 w-full overflow-hidden rounded-full bg-muted"
+    >
+      <svg
+        viewBox="0 0 100 4"
+        preserveAspectRatio="none"
+        aria-hidden="true"
+        className="block size-full motion-reduce:hidden"
+      >
+        <rect x="-28" y="0" width="28" height="4" rx="2" className="fill-primary">
+          <animate
+            attributeName="x"
+            values="-28;100"
+            dur="1.35s"
+            repeatCount="indefinite"
+          />
+        </rect>
+      </svg>
+      <div className="hidden h-full w-2/3 rounded-full bg-primary motion-reduce:block" />
+    </div>
+  );
+}
+
+export function BusinessReportRenderer({ part }: AIToolRendererProps) {
+  const reportDialog = useBusinessReportDialog();
+  const input = asRecord(part.input);
+  const title = asString(input.title) || "Business analysis report";
+  const reportSummary = asString(input.summary);
+  const summary =
+    reportSummary || "Open the report to review the generated analysis.";
+  const charts = useMemo(
+    () => normalizeBusinessReportCharts(input.charts),
+    [input.charts]
+  );
+  const report = useMemo<BusinessReportData>(
+    () => ({
+      title,
+      summary: reportSummary || undefined,
+      markdown: asString(input.markdown),
+      charts,
+      fileName: asString(input.fileName) || undefined,
+    }),
+    [charts, input.fileName, input.markdown, reportSummary, title]
+  );
+  const metadata = getNocoBaseToolCallMetadata(part);
+  const ready =
+    part.state === "output-available" ||
+    (metadata?.status === "success" &&
+      ["done", "confirmed"].includes(metadata.invokeStatus ?? ""));
+  const generating = !ready && part.state !== "output-error";
+  const wasGenerating = useRef(false);
+
+  useEffect(() => {
+    reportDialog.update(part.toolCallId, report, ready);
+  }, [part.toolCallId, ready, report, reportDialog]);
+
+  useEffect(() => {
+    if (generating) {
+      wasGenerating.current = true;
+      return;
+    }
+    if (wasGenerating.current && ready) {
+      wasGenerating.current = false;
+      reportDialog.open(part.toolCallId, report, ready);
+    }
+  }, [generating, part.toolCallId, ready, report, reportDialog]);
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "w-full rounded-lg border bg-background p-3 text-left transition-colors",
+        ready && "hover:bg-muted/40"
+      )}
+      disabled={!ready}
+      onClick={() => reportDialog.open(part.toolCallId, report, ready)}
+    >
+      <div className="flex items-start gap-3">
+        <div className="flex size-9 shrink-0 items-center justify-center rounded-lg border bg-muted/30">
+          {generating ? (
+            <LoaderCircle className="size-4 animate-spin" />
+          ) : (
+            <FileText className="size-4" />
+          )}
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="font-medium">{title}</div>
+          <p className="mt-1 line-clamp-2 text-xs leading-5 text-muted-foreground">
+            {summary}
+          </p>
+          <div className="mt-2 flex flex-wrap gap-1.5">
+            <Badge variant="secondary">
+              {generating ? "Generating" : "Markdown"}
+            </Badge>
+            <Badge variant="outline">{charts.length} charts</Badge>
+            <Badge variant="outline">Preview and export</Badge>
+          </div>
+          {generating ? <ReportGeneratingProgress /> : null}
+        </div>
+      </div>
+    </button>
+  );
+}