@nocobase/portal-template-default 1.0.2 → 1.0.3

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

@@ -0,0 +1,282 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+export type BusinessReportChart = {
+  title?: string;
+  summary?: string;
+  options: Record<string, unknown>;
+};
+
+export type BusinessReportData = {
+  title: string;
+  summary?: string;
+  markdown?: string;
+  charts: BusinessReportChart[];
+  fileName?: string;
+};
+
+export type BusinessReportMarkdownPart =
+  | { type: "markdown"; content: string }
+  | { type: "chart"; options: Record<string, unknown> };
+
+const chartTagPattern = /<echarts>([\s\S]*?)<\/echarts>/gi;
+const chartPlaceholderPattern = /\{\{\s*chart\s*:\s*(\d+)\s*\}\}/gi;
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  Boolean(value) && typeof value === "object" && !Array.isArray(value);
+
+export function normalizeBusinessReportCharts(
+  value: unknown
+): BusinessReportChart[] {
+  let charts = value;
+  if (typeof value === "string") {
+    try {
+      charts = JSON.parse(value) as unknown;
+    } catch {
+      return [];
+    }
+  }
+  if (!Array.isArray(charts)) return [];
+  return charts.flatMap((item) => {
+    if (!isRecord(item) || !isRecord(item.options)) return [];
+    return [
+      {
+        title: typeof item.title === "string" ? item.title : undefined,
+        summary: typeof item.summary === "string" ? item.summary : undefined,
+        options: item.options,
+      },
+    ];
+  });
+}
+
+const buildChartMarkdownBlock = (
+  chart: BusinessReportChart,
+  index: number
+) => {
+  const parts = [`## ${chart.title || `Chart ${index + 1}`}`];
+  if (chart.summary) parts.push(chart.summary);
+  parts.push(`<echarts>${JSON.stringify(chart.options, null, 2)}</echarts>`);
+  return parts.join("\n\n");
+};
+
+export function buildBusinessReportMarkdown(report: BusinessReportData) {
+  const usedIndexes = new Set<number>();
+  const body = (report.markdown ?? "").replace(
+    chartPlaceholderPattern,
+    (placeholder, rawIndex: string) => {
+      const index = Number(rawIndex) - 1;
+      const chart = report.charts[index];
+      if (!chart) return placeholder;
+      usedIndexes.add(index);
+      return buildChartMarkdownBlock(chart, index);
+    }
+  );
+  const sections = [`# ${report.title}`];
+  if (report.summary) sections.push(`> ${report.summary}`);
+  if (body.trim()) sections.push(body.trim());
+  report.charts.forEach((chart, index) => {
+    if (!usedIndexes.has(index)) {
+      sections.push(buildChartMarkdownBlock(chart, index));
+    }
+  });
+  return sections.join("\n\n");
+}
+
+export function splitBusinessReportMarkdown(
+  markdown: string
+): BusinessReportMarkdownPart[] {
+  const result: BusinessReportMarkdownPart[] = [];
+  let offset = 0;
+  for (const match of markdown.matchAll(chartTagPattern)) {
+    const index = match.index ?? 0;
+    const before = markdown.slice(offset, index);
+    if (before.trim()) result.push({ type: "markdown", content: before });
+    try {
+      const options = JSON.parse(match[1]) as unknown;
+      if (isRecord(options)) result.push({ type: "chart", options });
+    } catch {
+      result.push({ type: "markdown", content: match[0] });
+    }
+    offset = index + match[0].length;
+  }
+  const remainder = markdown.slice(offset);
+  if (remainder.trim()) result.push({ type: "markdown", content: remainder });
+  return result;
+}
+
+export function getBusinessReportFileName(report: BusinessReportData) {
+  return (report.fileName || report.title || "business-analysis-report")
+    .replace(/[\\/:*?"<>|]+/g, "-")
+    .trim();
+}
+
+export function downloadBusinessReportFile(
+  filename: string,
+  content: string,
+  mimeType: string
+) {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.click();
+  window.setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+
+export async function renderBusinessReportMarkdownToHtml(markdown: string) {
+  // Static rendering is intentionally loaded only for HTML export/preview.
+  // Rendering through a temporary client root can lose a section when the
+  // root is unmounted immediately after a synchronous render.
+  const { prerender } = await import("react-dom/static.browser");
+  const { prelude } = await prerender(
+    <ReactMarkdown remarkPlugins={[remarkGfm]}>{markdown}</ReactMarkdown>
+  );
+  return new Response(prelude as unknown as BodyInit).text();
+}
+
+const nextFrame = () =>
+  new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+
+async function renderChartImage(options: Record<string, unknown>) {
+  const { prepareEChartsRuntime } = await import("./echarts-runtime");
+  const echarts = await prepareEChartsRuntime(options);
+  const host = document.createElement("div");
+  host.style.position = "fixed";
+  host.style.left = "-100000px";
+  host.style.top = "0";
+  host.style.width = "900px";
+  host.style.height = "360px";
+  host.style.pointerEvents = "none";
+  document.body.appendChild(host);
+  let chart: ReturnType<typeof echarts.init> | undefined;
+  try {
+    chart = echarts.init(host, "default", { renderer: "canvas" });
+    chart.setOption(
+      {
+        ...options,
+        animation: false,
+        backgroundColor: "#ffffff",
+        toolbox: { show: false },
+      },
+      true
+    );
+    await nextFrame();
+    await nextFrame();
+    const source = chart.getDataURL({
+      type: "png",
+      pixelRatio: 2,
+      backgroundColor: "#ffffff",
+      excludeComponents: ["toolbox"],
+    });
+    return source;
+  } finally {
+    chart?.dispose();
+    host.remove();
+  }
+}
+
+const escapeHtml = (value: string) =>
+  value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+
+export async function buildBusinessReportHtml(
+  report: BusinessReportData,
+  options: { autoPrint?: boolean; printMode?: boolean } = {}
+) {
+  const markdown = buildBusinessReportMarkdown(report);
+  const parts = splitBusinessReportMarkdown(markdown);
+  const body: string[] = [];
+  for (const part of parts) {
+    if (part.type === "markdown") {
+      body.push(await renderBusinessReportMarkdownToHtml(part.content));
+      continue;
+    }
+    try {
+      const source = await renderChartImage(part.options);
+      body.push(`<img class="report-chart" src="${source}" alt="" />`);
+    } catch (error) {
+      body.push(
+        `<pre class="chart-error">${escapeHtml(
+          error instanceof Error ? error.message : "Unable to render chart"
+        )}</pre>`
+      );
+    }
+  }
+  const printMode = options.printMode === true;
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${escapeHtml(report.title)}</title>
+    <style>
+      * { box-sizing: border-box; }
+      html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+      body { margin: 0; color: #1f2937; background: ${
+        printMode ? "#fff" : "#f5f5f5"
+      }; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+      .report-shell { max-width: ${
+        printMode ? "190mm" : "960px"
+      }; margin: 0 auto; padding: ${printMode ? "0" : "32px 24px 64px"}; }
+      .report-paper { background: #fff; border: ${
+        printMode ? "0" : "1px solid #d4d4d4"
+      }; border-radius: ${printMode ? "0" : "16px"}; padding: ${
+        printMode ? "0" : "40px 48px"
+      }; }
+      h1, h2, h3 { color: #171717; break-after: avoid-page; }
+      h1 { margin-top: 0; font-size: 32px; }
+      p, li { line-height: 1.7; }
+      blockquote { margin: 16px 0; padding: 12px 16px; border-left: 4px solid #525252; background: #f5f5f5; color: #525252; }
+      table { width: 100%; border-collapse: collapse; }
+      th, td { border: 1px solid #d4d4d4; padding: 10px 12px; text-align: left; }
+      pre { overflow: auto; white-space: pre-wrap; word-break: break-word; }
+      .report-chart { display: block; width: 100%; height: auto; margin: 24px 0 32px; border: 1px solid #d4d4d4; break-inside: avoid; }
+      .chart-error { color: #b91c1c; }
+      @page { size: A4; margin: 12mm; }
+      @media print { body { background: #fff; } .report-shell { max-width: none; padding: 0; } .report-paper { border: 0; padding: 0; } }
+    </style>
+  </head>
+  <body>
+    <main class="report-shell"><article class="report-paper">${body.join(
+      ""
+    )}</article></main>
+    ${
+      options.autoPrint
+        ? `<script>
+      window.addEventListener('load', async () => {
+        if (document.fonts?.ready) {
+          try {
+            await document.fonts.ready;
+          } catch {}
+        }
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => window.print());
+        });
+      });
+    </script>`
+        : ""
+    }
+  </body>
+</html>`;
+}
+
+export async function printBusinessReport(report: BusinessReportData) {
+  const html = await buildBusinessReportHtml(report, {
+    autoPrint: true,
+    printMode: true,
+  });
+  const blob = new Blob([html], { type: "text/html;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const opened = window.open(url, "_blank", "noopener,noreferrer");
+  if (!opened) {
+    URL.revokeObjectURL(url);
+    return false;
+  }
+  window.setTimeout(() => URL.revokeObjectURL(url), 60_000);
+  return true;
+}

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

@@ -0,0 +1,99 @@
+import { Button } from "@/components/ui/button";
+import { LoadingState } from "@/components/app-shell/loading-state";
+import { CheckCircle2, Copy, LoaderCircle } from "lucide-react";
+import { Component, lazy, Suspense, useState, type ReactNode } from "react";
+import type { AIToolRendererProps } from "./tool-renderer-provider";
+import { asRecord } from "./tool-renderer-utils";
+
+const EChartsPreview = lazy(() => import("./echarts-preview"));
+
+class ChartErrorBoundary extends Component<
+  {
+    children: ReactNode;
+    fallback: (error: Error) => ReactNode;
+    resetKey: unknown;
+  },
+  { error: Error | null; resetKey: unknown }
+> {
+  state = { error: null, resetKey: this.props.resetKey } as {
+    error: Error | null;
+    resetKey: unknown;
+  };
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  static getDerivedStateFromProps(
+    props: { resetKey: unknown },
+    state: { error: Error | null; resetKey: unknown }
+  ) {
+    return props.resetKey !== state.resetKey
+      ? { error: null, resetKey: props.resetKey }
+      : null;
+  }
+
+  render() {
+    return this.state.error
+      ? this.props.fallback(this.state.error)
+      : this.props.children;
+  }
+}
+
+function ChartError({ error }: { error: Error }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-xs text-destructive">
+      <div className="font-medium">Invalid chart options</div>
+      <div className="mt-1 flex items-start justify-between gap-3">
+        <span className="break-all leading-5">{error.message}</span>
+        <Button
+          variant="ghost"
+          size="icon-xs"
+          aria-label="Copy chart error"
+          onClick={async () => {
+            await navigator.clipboard.writeText(error.message);
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1200);
+          }}
+        >
+          {copied ? <CheckCircle2 /> : <Copy />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function ChartPreview({
+  options,
+}: {
+  options: Record<string, unknown>;
+}) {
+  return (
+    <Suspense fallback={<LoadingState className="h-[280px]" />}>
+      <EChartsPreview options={options} />
+    </Suspense>
+  );
+}
+
+export function ChartRenderer({ part }: AIToolRendererProps) {
+  const input = asRecord(part.input);
+  const options = asRecord(input.options);
+  if (!Object.keys(options).length) {
+    return (
+      <div className="flex items-center gap-2 py-2 text-xs text-muted-foreground">
+        <LoaderCircle className="size-4 animate-spin" /> Generating chart…
+      </div>
+    );
+  }
+  return (
+    <ChartErrorBoundary
+      resetKey={part.input}
+      fallback={(error) => <ChartError error={error} />}
+    >
+      <div className="rounded-lg border bg-background p-3">
+        <ChartPreview options={options} />
+      </div>
+    </ChartErrorBoundary>
+  );
+}

package/src/extensions/nocobase-ai/components/tools/echarts-preview.tsx

@@ -0,0 +1,59 @@
+import ReactEChartsCore from "echarts-for-react/lib/core";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { LoadingState } from "@/components/app-shell/loading-state";
+import echarts, {
+  getEChartsRuntimeSignature,
+  prepareEChartsRuntime,
+} from "./echarts-runtime";
+
+export default function EChartsPreview({
+  options,
+}: {
+  options: Record<string, unknown>;
+}) {
+  const { resolvedTheme } = useTheme();
+  const signature = getEChartsRuntimeSignature(options);
+  const [preparedSignature, setPreparedSignature] = useState<string>();
+  const [error, setError] = useState<unknown>();
+
+  useEffect(() => {
+    let active = true;
+    setError(undefined);
+    void prepareEChartsRuntime(options)
+      .then(() => {
+        if (active) setPreparedSignature(signature);
+      })
+      .catch((runtimeError: unknown) => {
+        if (active) setError(runtimeError);
+      });
+    return () => {
+      active = false;
+    };
+  }, [options, signature]);
+
+  if (error) throw error;
+  if (preparedSignature !== signature) {
+    return <LoadingState className="h-[280px]" />;
+  }
+
+  return (
+    <ReactEChartsCore
+      echarts={echarts}
+      option={{
+        ...options,
+        animation: false,
+        backgroundColor: options.backgroundColor ?? "transparent",
+        toolbox: {
+          show: true,
+          feature: {
+            saveAsImage: { title: "Save as image" },
+          },
+        },
+      }}
+      theme={resolvedTheme === "dark" ? "nocobase-dark" : undefined}
+      notMerge
+      style={{ height: 280, width: "100%" }}
+    />
+  );
+}

package/src/extensions/nocobase-ai/components/tools/echarts-runtime-advanced.ts

@@ -0,0 +1,18 @@
+import {
+  CustomChart,
+  HeatmapChart,
+  LinesChart,
+  MapChart,
+  ParallelChart,
+  ThemeRiverChart,
+} from "echarts/charts";
+import { use as registerEChartsModules } from "echarts/core";
+
+registerEChartsModules([
+  CustomChart,
+  HeatmapChart,
+  LinesChart,
+  MapChart,
+  ParallelChart,
+  ThemeRiverChart,
+]);

package/src/extensions/nocobase-ai/components/tools/echarts-runtime-common.ts

@@ -0,0 +1,20 @@
+import {
+  BarChart,
+  BoxplotChart,
+  CandlestickChart,
+  EffectScatterChart,
+  LineChart,
+  PictorialBarChart,
+  ScatterChart,
+} from "echarts/charts";
+import { use as registerEChartsModules } from "echarts/core";
+
+registerEChartsModules([
+  BarChart,
+  BoxplotChart,
+  CandlestickChart,
+  EffectScatterChart,
+  LineChart,
+  PictorialBarChart,
+  ScatterChart,
+]);

package/src/extensions/nocobase-ai/components/tools/echarts-runtime-components.ts

@@ -0,0 +1,34 @@
+import {
+  BrushComponent,
+  CalendarComponent,
+  DataZoomComponent,
+  GeoComponent,
+  GraphicComponent,
+  MarkAreaComponent,
+  MarkLineComponent,
+  MarkPointComponent,
+  ParallelComponent,
+  PolarComponent,
+  RadarComponent,
+  SingleAxisComponent,
+  TimelineComponent,
+  VisualMapComponent,
+} from "echarts/components";
+import { use as registerEChartsModules } from "echarts/core";
+
+registerEChartsModules([
+  BrushComponent,
+  CalendarComponent,
+  DataZoomComponent,
+  GeoComponent,
+  GraphicComponent,
+  MarkAreaComponent,
+  MarkLineComponent,
+  MarkPointComponent,
+  ParallelComponent,
+  PolarComponent,
+  RadarComponent,
+  SingleAxisComponent,
+  TimelineComponent,
+  VisualMapComponent,
+]);

package/src/extensions/nocobase-ai/components/tools/echarts-runtime-hierarchy.ts

@@ -0,0 +1,24 @@
+import {
+  FunnelChart,
+  GaugeChart,
+  GraphChart,
+  PieChart,
+  RadarChart,
+  SankeyChart,
+  SunburstChart,
+  TreeChart,
+  TreemapChart,
+} from "echarts/charts";
+import { use as registerEChartsModules } from "echarts/core";
+
+registerEChartsModules([
+  FunnelChart,
+  GaugeChart,
+  GraphChart,
+  PieChart,
+  RadarChart,
+  SankeyChart,
+  SunburstChart,
+  TreeChart,
+  TreemapChart,
+]);

package/src/extensions/nocobase-ai/components/tools/echarts-runtime.ts

@@ -0,0 +1,138 @@
+import {
+  AriaComponent,
+  DatasetComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  TransformComponent,
+} from "echarts/components";
+import * as echarts from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+
+echarts.use([
+  AriaComponent,
+  DatasetComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  TransformComponent,
+  CanvasRenderer,
+]);
+
+echarts.registerTheme("nocobase-dark", {
+  darkMode: true,
+  backgroundColor: "transparent",
+  textStyle: { color: "#d4d4d8" },
+  title: { textStyle: { color: "#f4f4f5" } },
+  legend: { textStyle: { color: "#d4d4d8" } },
+  categoryAxis: {
+    axisLine: { lineStyle: { color: "#52525b" } },
+    axisLabel: { color: "#a1a1aa" },
+    splitLine: { lineStyle: { color: "#27272a" } },
+  },
+  valueAxis: {
+    axisLine: { lineStyle: { color: "#52525b" } },
+    axisLabel: { color: "#a1a1aa" },
+    splitLine: { lineStyle: { color: "#27272a" } },
+  },
+});
+
+const commonChartTypes = new Set([
+  "bar",
+  "boxplot",
+  "candlestick",
+  "effectScatter",
+  "line",
+  "pictorialBar",
+  "scatter",
+]);
+const hierarchyChartTypes = new Set([
+  "funnel",
+  "gauge",
+  "graph",
+  "pie",
+  "radar",
+  "sankey",
+  "sunburst",
+  "tree",
+  "treemap",
+]);
+const advancedChartTypes = new Set([
+  "custom",
+  "heatmap",
+  "lines",
+  "map",
+  "parallel",
+  "themeRiver",
+]);
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  Boolean(value) && typeof value === "object" && !Array.isArray(value);
+
+const getSeries = (options: Record<string, unknown>) => {
+  const value = options.series;
+  if (Array.isArray(value)) return value.filter(isRecord);
+  return isRecord(value) ? [value] : [];
+};
+
+const getRequiredGroups = (options: Record<string, unknown>) => {
+  const groups = new Set<string>();
+  const series = getSeries(options);
+  for (const item of series) {
+    const type = typeof item.type === "string" ? item.type : "line";
+    if (commonChartTypes.has(type)) groups.add("common");
+    else if (hierarchyChartTypes.has(type)) groups.add("hierarchy");
+    else if (advancedChartTypes.has(type)) groups.add("advanced");
+  }
+  const needsOptionalComponents =
+    [
+      "brush",
+      "calendar",
+      "dataZoom",
+      "geo",
+      "graphic",
+      "parallel",
+      "polar",
+      "radar",
+      "singleAxis",
+      "timeline",
+      "visualMap",
+    ].some((key) => options[key] !== undefined) ||
+    series.some(
+      (item) =>
+        ["lines", "map", "parallel", "radar"].includes(
+          typeof item.type === "string" ? item.type : ""
+        ) ||
+        item.markArea !== undefined ||
+        item.markLine !== undefined ||
+        item.markPoint !== undefined
+    );
+  if (needsOptionalComponents) groups.add("components");
+  return [...groups].sort();
+};
+
+const groupLoaders: Record<string, () => Promise<unknown>> = {
+  common: () => import("./echarts-runtime-common"),
+  hierarchy: () => import("./echarts-runtime-hierarchy"),
+  advanced: () => import("./echarts-runtime-advanced"),
+  components: () => import("./echarts-runtime-components"),
+};
+
+export const getEChartsRuntimeSignature = (
+  options: Record<string, unknown>
+) => getRequiredGroups(options).join(":");
+
+export async function prepareEChartsRuntime(
+  options: Record<string, unknown>
+) {
+  await Promise.all(
+    getRequiredGroups(options).map((group) => groupLoaders[group]())
+  );
+  return echarts;
+}
+
+export default echarts;