@nocobase/portal-template-default 1.0.3 → 1.0.5

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

@@ -1,74 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,364 +0,0 @@
-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

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