@nocobase/portal-template-default 1.0.3 → 1.0.4

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

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

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

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

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

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

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

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

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