dishui 0.0.46 → 0.0.48

package/dist/components/pro/Flow/nodes/DataNodeView.js

@@ -0,0 +1,217 @@
+import { usePivotExtension as y } from "../../DataTable/pivotExtension.js";
+import k, { createColumn as F } from "../../../../data-table.js";
+import A from "../../../Chart/Chart.js";
+import { areaY as C, barX as R, barY as T, defineChart as u, dot as M, lineY as N } from "../../../../chart.js";
+import { DATA_CHART_PALETTE as w, labelFor as v } from "./dataUtils.js";
+import { useLayoutEffect as P, useMemo as b, useRef as S, useState as z } from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { scaleBand as g } from "@tanstack/charts/scales/band";
+import { scaleLinear as m } from "@tanstack/charts/scales/linear";
+import { scalePoint as x } from "@tanstack/charts/scales/point";
+import { pie as D, polar as E, radialArc as V } from "@tanstack/charts/polar";
+function B({ config: e }) {
+  const l = b(() => e.columns.map((n) => F(n.key, n.label ?? n.key, { enableSorting: !0 })), [e.columns]), i = b(() => e.columns.map((n) => ({
+    field: n.key,
+    label: n.label ?? n.key,
+    numeric: n.type === "number"
+  })), [e.columns]), t = e.pivot, s = JSON.stringify({
+    e: !!t?.enabled,
+    r: t?.rowFields ?? [],
+    c: t?.colFields ?? [],
+    v: t?.values ?? []
+  });
+  return /* @__PURE__ */ c("div", {
+    className: "flow-data-table",
+    children: /* @__PURE__ */ c(L, {
+      config: e,
+      columns: l,
+      pivotFields: i
+    }, s)
+  });
+}
+function L({ config: e, columns: l, pivotFields: i }) {
+  const t = e.pivot, s = y({
+    fields: i,
+    initialActive: !!t?.enabled,
+    initialRowFields: t?.rowFields ?? [],
+    initialColFields: t?.colFields ?? [],
+    initialValues: t?.values ?? [],
+    panelPlacement: t?.panelPlacement ?? "top",
+    lang: "zh",
+    hideModeToggle: !0
+  });
+  return /* @__PURE__ */ c(k, {
+    data: e.rows,
+    columns: l,
+    enableSorting: !0,
+    enablePagination: e.rows.length > 50,
+    pageSize: 50,
+    extensions: [s]
+  });
+}
+function O(e) {
+  return b(() => {
+    const l = e.chart;
+    if (!l) return null;
+    const i = l.xField, t = (l.yFields ?? []).filter(Boolean);
+    if (!i || t.length === 0) return null;
+    const s = e.rows, n = (r, a) => l.seriesColors?.[r] ?? w[a % w.length];
+    switch (l.type) {
+      case "line":
+        return u({
+          x: { scale: () => x().padding(0.35) },
+          y: {
+            scale: m,
+            nice: !0,
+            grid: !0
+          },
+          marks: t.map((r, a) => N(s, {
+            id: r,
+            x: i,
+            y: r,
+            stroke: n(r, a),
+            points: !0
+          }))
+        });
+      case "area":
+        return u({
+          x: { scale: () => x().padding(0.35) },
+          y: {
+            scale: m,
+            nice: !0,
+            grid: !0
+          },
+          marks: t.map((r, a) => C(s, {
+            id: r,
+            x: i,
+            y: r,
+            fill: n(r, a),
+            fillOpacity: 0.35,
+            stroke: n(r, a)
+          }))
+        });
+      case "scatter":
+        return u({
+          x: {
+            scale: m,
+            nice: !0,
+            grid: !0
+          },
+          y: {
+            scale: m,
+            nice: !0,
+            grid: !0
+          },
+          marks: [M(s, {
+            id: "points",
+            x: i,
+            y: t[0],
+            r: 6,
+            fill: n(t[0], 0)
+          })]
+        });
+      case "pie": {
+        const r = t[0], a = /* @__PURE__ */ new Map();
+        for (const o of s) {
+          const f = String(o[i] ?? "");
+          a.set(f, (a.get(f) ?? 0) + (Number(o[r]) || 0));
+        }
+        const p = Array.from(a, ([o, f]) => ({
+          cat: o,
+          value: f
+        })), h = D(p, { value: "value" }), d = l.palette?.length ? l.palette : w;
+        return u({
+          marks: [E({ marks: [V(h, {
+            startAngle: "startAngle",
+            endAngle: "endAngle",
+            padAngle: "padAngle",
+            innerRadius: 0,
+            color: "cat",
+            key: "cat"
+          })] })],
+          color: {
+            domain: p.map((o) => o.cat),
+            range: d
+          }
+        });
+      }
+      case "barHorizontal":
+        return u({
+          y: { scale: () => g().padding(0.25) },
+          x: {
+            scale: m,
+            nice: !0,
+            grid: !0
+          },
+          marks: t.map((r, a) => R(s, {
+            id: r,
+            y: i,
+            x: r,
+            fill: n(r, a),
+            radius: 4
+          }))
+        });
+      default:
+        return u({
+          x: { scale: () => g().padding(0.25) },
+          y: {
+            scale: m,
+            nice: !0,
+            grid: !0
+          },
+          marks: t.map((r, a) => T(s, {
+            id: r,
+            x: i,
+            y: r,
+            fill: n(r, a),
+            radius: 4
+          }))
+        });
+    }
+  }, [e]);
+}
+function Y({ config: e }) {
+  const l = O(e), i = e.chart, t = S(null), [s, n] = z({
+    w: 0,
+    h: 0
+  });
+  if (P(() => {
+    const a = t.current;
+    if (!a) return;
+    const p = () => {
+      const d = a.getBoundingClientRect(), o = d.width && a.offsetWidth ? d.width / a.offsetWidth : 1;
+      n({
+        w: Math.max(1, Math.round(d.width / (o || 1))),
+        h: Math.max(1, Math.round(d.height / (o || 1)))
+      });
+    };
+    p();
+    const h = new ResizeObserver(p);
+    return h.observe(a), () => h.disconnect();
+  }, []), !l) return /* @__PURE__ */ c("div", {
+    className: "flow-data-empty",
+    children: e.columns.length === 0 ? "尚无数据，请在属性面板上传或填写数据" : "请在属性面板选择 X 轴与至少一个数值字段"
+  });
+  const r = i && i.xField ? `${v(e.columns, i.xField)} · ${(i.yFields ?? []).map((a) => v(e.columns, a)).join(", ")}` : "Chart";
+  return /* @__PURE__ */ c("div", {
+    className: "flow-data-chart",
+    ref: t,
+    children: s.h > 0 && /* @__PURE__ */ c(A, {
+      definition: l,
+      "aria-label": r,
+      height: s.h
+    })
+  });
+}
+function U({ config: e }) {
+  return !e || e.columns.length === 0 ? /* @__PURE__ */ c("div", {
+    className: "flow-data-empty",
+    children: "尚无数据，请在属性面板上传或填写数据"
+  }) : e.view === "chart" ? /* @__PURE__ */ c(Y, { config: e }) : /* @__PURE__ */ c(B, { config: e });
+}
+export {
+  U as DataNodeView,
+  U as default
+};
+
+//# sourceMappingURL=DataNodeView.js.map

package/dist/components/pro/Flow/nodes/DataNodeView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataNodeView.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/DataNodeView.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState, useLayoutEffect } from 'react';\nimport Chart, {\n  areaY,\n  barX,\n  barY,\n  defineChart,\n  dot,\n  lineY,\n} from '../../../Chart';\nimport { scaleBand } from '@tanstack/charts/scales/band';\nimport { scaleLinear } from '@tanstack/charts/scales/linear';\nimport { scalePoint } from '@tanstack/charts/scales/point';\nimport { polar, pie, radialArc } from '@tanstack/charts/polar';\nimport DataTable, {\n  createColumn,\n  usePivotExtension,\n  type ColumnDef,\n  type PivotField,\n  type PivotValue,\n} from '../../DataTable';\nimport type { FlowDataConfig } from '../types';\nimport { DATA_CHART_PALETTE, labelFor } from './dataUtils';\n\n/** Renders the table (optionally pivoted) surface of a Data node. */\nfunction DataTableView({ config }: { config: FlowDataConfig }) {\n  const columns = useMemo<ColumnDef<Record<string, unknown>>[]>(\n    () =>\n      config.columns.map((col) =>\n        createColumn<Record<string, unknown>>(col.key, col.label ?? col.key, {\n          enableSorting: true,\n        }),\n      ),\n    [config.columns],\n  );\n\n  const pivotFields = useMemo<PivotField[]>(\n    () =>\n      config.columns.map((col) => ({\n        field: col.key,\n        label: col.label ?? col.key,\n        numeric: col.type === 'number',\n      })),\n    [config.columns],\n  );\n\n  const pivot = config.pivot;\n  // Remount the pivot extension when the inspector-controlled bits change, so\n  // the enabled toggle / initial fields take effect (the extension keeps its\n  // own interactive state otherwise). Panel placement stays reactive.\n  const pivotKey = JSON.stringify({\n    e: !!pivot?.enabled,\n    r: pivot?.rowFields ?? [],\n    c: pivot?.colFields ?? [],\n    v: pivot?.values ?? [],\n  });\n\n  return (\n    <div className=\"flow-data-table\">\n      <PivotableTable\n        key={pivotKey}\n        config={config}\n        columns={columns}\n        pivotFields={pivotFields}\n      />\n    </div>\n  );\n}\n\nfunction PivotableTable({\n  config,\n  columns,\n  pivotFields,\n}: {\n  config: FlowDataConfig;\n  columns: ColumnDef<Record<string, unknown>>[];\n  pivotFields: PivotField[];\n}) {\n  const pivot = config.pivot;\n  const pivotExtension = usePivotExtension<Record<string, unknown>>({\n    fields: pivotFields,\n    initialActive: !!pivot?.enabled,\n    initialRowFields: pivot?.rowFields ?? [],\n    initialColFields: pivot?.colFields ?? [],\n    initialValues: (pivot?.values as PivotValue[] | undefined) ?? [],\n    panelPlacement: pivot?.panelPlacement ?? 'top',\n    lang: 'zh',\n    // 透视开关由 Inspector 统一控制，节点内不再渲染开关，避免占用空间。\n    hideModeToggle: true,\n  });\n\n  return (\n    <DataTable<Record<string, unknown>>\n      data={config.rows}\n      columns={columns}\n      enableSorting\n      enablePagination={config.rows.length > 50}\n      pageSize={50}\n      extensions={[pivotExtension]}\n    />\n  );\n}\n\n/** Builds a TanStack Charts definition from the Data node's chart config. */\nfunction useChartDefinition(config: FlowDataConfig) {\n  return useMemo(() => {\n    const chart = config.chart;\n    if (!chart) return null;\n    const xField = chart.xField;\n    const yFields = (chart.yFields ?? []).filter(Boolean);\n    if (!xField || yFields.length === 0) return null;\n\n    const rows = config.rows as any[];\n    const seriesColor = (field: string, i: number) =>\n      chart.seriesColors?.[field] ?? DATA_CHART_PALETTE[i % DATA_CHART_PALETTE.length];\n\n    switch (chart.type) {\n      case 'line':\n        return defineChart({\n          x: { scale: () => scalePoint<string>().padding(0.35) },\n          y: { scale: scaleLinear, nice: true, grid: true },\n          marks: yFields.map((yf, i) =>\n            lineY(rows, { id: yf, x: xField, y: yf, stroke: seriesColor(yf, i), points: true }),\n          ),\n        });\n\n      case 'area':\n        return defineChart({\n          x: { scale: () => scalePoint<string>().padding(0.35) },\n          y: { scale: scaleLinear, nice: true, grid: true },\n          marks: yFields.map((yf, i) =>\n            areaY(rows, {\n              id: yf,\n              x: xField,\n              y: yf,\n              fill: seriesColor(yf, i),\n              fillOpacity: 0.35,\n              stroke: seriesColor(yf, i),\n            }),\n          ),\n        });\n\n      case 'scatter':\n        // Scatter uses the first two numeric fields as x/y.\n        return defineChart({\n          x: { scale: scaleLinear, nice: true, grid: true },\n          y: { scale: scaleLinear, nice: true, grid: true },\n          marks: [\n            dot(rows, {\n              id: 'points',\n              x: xField,\n              y: yFields[0],\n              r: 6,\n              fill: seriesColor(yFields[0], 0),\n            }),\n          ],\n        });\n\n      case 'pie': {\n        // Part-to-whole via a polar pie over the first measure. Duplicate\n        // categories are aggregated (summed) so slices are unique.\n        const yf = yFields[0];\n        const totals = new Map<string, number>();\n        for (const r of rows) {\n          const k = String(r[xField] ?? '');\n          totals.set(k, (totals.get(k) ?? 0) + (Number(r[yf]) || 0));\n        }\n        const pieRows = Array.from(totals, ([cat, value]) => ({ cat, value }));\n        const arranged = pie(pieRows, { value: 'value' });\n        const range = chart.palette?.length ? chart.palette : DATA_CHART_PALETTE;\n        return defineChart({\n          marks: [\n            polar({\n              marks: [\n                radialArc(arranged, {\n                  startAngle: 'startAngle',\n                  endAngle: 'endAngle',\n                  padAngle: 'padAngle',\n                  innerRadius: 0,\n                  color: 'cat',\n                  key: 'cat',\n                }),\n              ],\n            }),\n          ],\n          color: { domain: pieRows.map((d) => d.cat), range },\n        });\n      }\n\n      case 'barHorizontal':\n        return defineChart({\n          y: { scale: () => scaleBand<string>().padding(0.25) },\n          x: { scale: scaleLinear, nice: true, grid: true },\n          marks: yFields.map((yf, i) =>\n            barX(rows, { id: yf, y: xField, x: yf, fill: seriesColor(yf, i), radius: 4 }),\n          ),\n        });\n\n      case 'bar':\n      default:\n        return defineChart({\n          x: { scale: () => scaleBand<string>().padding(0.25) },\n          y: { scale: scaleLinear, nice: true, grid: true },\n          marks: yFields.map((yf, i) =>\n            barY(rows, { id: yf, x: xField, y: yf, fill: seriesColor(yf, i), radius: 4 }),\n          ),\n        });\n    }\n  }, [config]);\n}\n\n/** Renders the chart surface of a Data node. */\nfunction DataChartView({ config }: { config: FlowDataConfig }) {\n  const definition = useChartDefinition(config);\n  const chart = config.chart;\n\n  // TanStack Charts needs a concrete pixel height; inside the media overlay the\n  // node box is a fixed size but percentage heights don't always resolve before\n  // first paint (esp. in read-only / preview renders), leaving the chart blank.\n  // Measure the container and pass an explicit height.\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const [size, setSize] = useState<{ w: number; h: number }>({ w: 0, h: 0 });\n  useLayoutEffect(() => {\n    const el = wrapRef.current;\n    if (!el) return;\n    const measure = () => {\n      const rect = el.getBoundingClientRect();\n      // getBoundingClientRect includes the overlay's zoom scale; divide it out\n      // so the chart is laid out in unscaled (world) pixels.\n      const scale = rect.width && el.offsetWidth ? rect.width / el.offsetWidth : 1;\n      setSize({\n        w: Math.max(1, Math.round(rect.width / (scale || 1))),\n        h: Math.max(1, Math.round(rect.height / (scale || 1))),\n      });\n    };\n    measure();\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  if (!definition) {\n    return (\n      <div className=\"flow-data-empty\">\n        {config.columns.length === 0\n          ? '尚无数据，请在属性面板上传或填写数据'\n          : '请在属性面板选择 X 轴与至少一个数值字段'}\n      </div>\n    );\n  }\n\n  const label =\n    chart && chart.xField\n      ? `${labelFor(config.columns, chart.xField)} · ${(chart.yFields ?? [])\n          .map((f) => labelFor(config.columns, f))\n          .join(', ')}`\n      : 'Chart';\n\n  return (\n    <div className=\"flow-data-chart\" ref={wrapRef}>\n      {size.h > 0 && (\n        <Chart\n          definition={definition as any}\n          aria-label={label}\n          height={size.h}\n        />\n      )}\n    </div>\n  );\n}\n\n/** Dispatches to the table or chart surface based on the node's view. */\nexport function DataNodeView({ config }: { config: FlowDataConfig }) {\n  if (!config || config.columns.length === 0) {\n    return <div className=\"flow-data-empty\">尚无数据，请在属性面板上传或填写数据</div>;\n  }\n  return config.view === 'chart' ? (\n    <DataChartView config={config} />\n  ) : (\n    <DataTableView config={config} />\n  );\n}\n\nexport default DataNodeView;\n"],"mappings":"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"}

package/dist/components/pro/Flow/nodes/MediaContent.js

@@ -1,231 +1,260 @@
-import A from "../../../Markdown/Markdown.js";
-import { streamAIChat as V } from "./aiClient.js";
-import { Model3DView as z } from "./Model3DView.js";
-import { useEffect as b, useMemo as D, useRef as M, useState as u } from "react";
-import { jsx as e, jsxs as v } from "react/jsx-runtime";
-import R from "mermaid";
+import z from "../../../Markdown/Markdown.js";
+import { resolveThemeColor as A, resolveThemeColorCss as D } from "../utils/themeColor.js";
+import { streamAIChat as T } from "./aiClient.js";
+import { Model3DView as $ } from "./Model3DView.js";
+import H, { useEffect as v, useMemo as R, useRef as N, useState as f } from "react";
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import V from "mermaid";
 import "katex/dist/katex.min.css";
-import T from "katex";
-var I = !1;
-function H() {
-  I || (R.initialize({
+import K from "katex";
+var L = H.lazy(() => import("./DataNodeView.js").then((e) => ({ default: e.DataNodeView }))), I = !1;
+function _() {
+  I || (V.initialize({
     startOnLoad: !1,
     theme: "default",
     securityLevel: "loose",
     fontFamily: "inherit"
   }), I = !0);
 }
-function K({ content: t, color: r }) {
-  const [i, l] = u(""), [n, s] = u(null), f = M(`flow-mermaid-${Math.random().toString(36).slice(2)}`);
-  return b(() => {
-    let c = !1;
-    H();
-    const m = t.trim();
-    if (!m) {
-      l(""), s(null);
+function P({ content: e, color: r }) {
+  const [s, a] = f(""), [o, i] = f(null), u = N(`flow-mermaid-${Math.random().toString(36).slice(2)}`);
+  return v(() => {
+    let m = !1;
+    _();
+    const c = e.trim();
+    if (!c) {
+      a(""), i(null);
       return;
     }
-    return R.render(f.current, m).then(({ svg: d }) => {
-      c || (l(d), s(null));
+    return V.render(u.current, c).then(({ svg: d }) => {
+      m || (a(d), i(null));
     }).catch((d) => {
-      c || s(d?.message ?? "Mermaid error");
+      m || i(d?.message ?? "Mermaid error");
     }), () => {
-      c = !0;
+      m = !0;
     };
-  }, [t]), n ? /* @__PURE__ */ e("div", {
+  }, [e]), o ? /* @__PURE__ */ t("div", {
     className: "flow-media-error",
-    children: n
-  }) : /* @__PURE__ */ e("div", {
+    children: o
+  }) : /* @__PURE__ */ t("div", {
     className: "flow-media-mermaid",
     style: { color: r },
-    dangerouslySetInnerHTML: { __html: i }
+    dangerouslySetInnerHTML: { __html: s }
   });
 }
-function L({ content: t, color: r, fontSize: i }) {
-  const l = D(() => {
+function j({ content: e, color: r, fontSize: s }) {
+  const a = R(() => {
     try {
-      return T.renderToString(t.trim() || "\\;", {
+      return K.renderToString(e.trim() || "\\;", {
         displayMode: !0,
         throwOnError: !1
       });
-    } catch (n) {
-      return `<span class="flow-media-error">${n?.message ?? "KaTeX error"}</span>`;
+    } catch (o) {
+      return `<span class="flow-media-error">${o?.message ?? "KaTeX error"}</span>`;
     }
-  }, [t]);
-  return /* @__PURE__ */ e("div", {
+  }, [e]);
+  return /* @__PURE__ */ t("div", {
     className: "flow-media-math",
     style: {
       color: r,
-      fontSize: i
+      fontSize: s
     },
-    dangerouslySetInnerHTML: { __html: l }
+    dangerouslySetInnerHTML: { __html: a }
   });
 }
-function _({ content: t, interactive: r }) {
-  return /* @__PURE__ */ e("iframe", {
+function F({ content: e, interactive: r, color: s, fontSize: a }) {
+  const o = R(() => `<!doctype html><html><head><meta charset="utf-8"><style>
+      :root { color-scheme: light dark; }
+      html, body { margin: 0; background: transparent; }
+      body {
+        color: ${s ?? "#111827"};
+        font-size: ${a ?? 13}px;
+        font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+        line-height: 1.5;
+        padding: 0;
+      }
+      a { color: inherit; }
+    </style></head><body>${e}</body></html>`, [
+    e,
+    s,
+    a
+  ]);
+  return /* @__PURE__ */ t("iframe", {
     title: "html-media",
     className: "flow-media-iframe",
     style: { pointerEvents: r ? "auto" : "none" },
     sandbox: "allow-scripts allow-same-origin allow-popups allow-forms",
-    srcDoc: t
+    srcDoc: o
   });
 }
-function $({ content: t }) {
-  const r = t.trim();
-  return r ? /* @__PURE__ */ e("img", {
+function O({ content: e }) {
+  const r = e.trim();
+  return r ? /* @__PURE__ */ t("img", {
     className: "flow-media-image",
     src: r,
     alt: "",
     draggable: !1,
     referrerPolicy: "no-referrer"
-  }) : /* @__PURE__ */ e("div", {
+  }) : /* @__PURE__ */ t("div", {
     className: "flow-media-image-empty",
     children: "输入图片链接，或直接粘贴图片"
   });
 }
-function P({ node: t, config: r, interactive: i, color: l }) {
-  const [n, s] = u([]), [f, c] = u(""), [m, d] = u(!1), [N, S] = u(null), h = M(null), g = M(null);
-  b(() => {
-    g.current?.scrollTo({ top: g.current.scrollHeight });
-  }, [n, m]), b(() => () => h.current?.abort(), []);
-  const k = !!r?.gateway && !!r?.model && !m, C = async () => {
-    const a = f.trim();
-    if (!a || !r?.gateway) return;
-    S(null);
-    const p = [...n.filter((o) => !(o.role === "assistant" && o.content.trim() === "")), {
+function q({ node: e, config: r, interactive: s, color: a }) {
+  const [o, i] = f([]), [u, m] = f(""), [c, d] = f(!1), [C, M] = f(null), w = N(null), y = N(null);
+  v(() => {
+    y.current?.scrollTo({ top: y.current.scrollHeight });
+  }, [o, c]), v(() => () => w.current?.abort(), []);
+  const S = !!r?.gateway && !!r?.model && !c, k = async () => {
+    const l = u.trim();
+    if (!l || !r?.gateway) return;
+    M(null);
+    const p = [...o.filter((n) => !(n.role === "assistant" && n.content.trim() === "")), {
       role: "user",
-      content: a
+      content: l
     }];
-    s(p), c(""), d(!0);
+    i(p), m(""), d(!0);
     const x = new AbortController();
-    h.current = x;
+    w.current = x;
     let E = "";
-    s((o) => [...o, {
+    i((n) => [...n, {
       role: "assistant",
       content: ""
     }]);
     try {
-      for await (const o of V(r, p, x.signal))
-        E += o, s((w) => {
-          const y = w.slice();
-          return y[y.length - 1] = {
+      for await (const n of T(r, p, x.signal))
+        E += n, i((h) => {
+          const g = h.slice();
+          return g[g.length - 1] = {
             role: "assistant",
             content: E
-          }, y;
+          }, g;
         });
-    } catch (o) {
-      o?.name !== "AbortError" && S(o?.message ?? "Request failed");
+    } catch (n) {
+      n?.name !== "AbortError" && M(n?.message ?? "Request failed");
     } finally {
-      s((o) => {
-        const w = o[o.length - 1];
-        return w && w.role === "assistant" && w.content.trim() === "" ? o.slice(0, -1) : o;
-      }), d(!1), h.current = null;
+      i((n) => {
+        const h = n[n.length - 1];
+        return h && h.role === "assistant" && h.content.trim() === "" ? n.slice(0, -1) : n;
+      }), d(!1), w.current = null;
     }
   };
-  return /* @__PURE__ */ v("div", {
+  return /* @__PURE__ */ b("div", {
     className: "flow-media-ai",
-    style: { color: l },
+    style: { color: a },
     children: [
-      /* @__PURE__ */ e("div", {
+      /* @__PURE__ */ t("div", {
         className: "flow-media-ai-header",
-        children: r?.model ? `AI · ${r.model}` : t.data.label || "AI"
+        children: r?.model ? `AI · ${r.model}` : e.data.label || "AI"
       }),
-      /* @__PURE__ */ v("div", {
+      /* @__PURE__ */ b("div", {
         className: "flow-media-ai-log",
-        ref: g,
+        ref: y,
         children: [
-          n.length === 0 && /* @__PURE__ */ e("div", {
+          o.length === 0 && /* @__PURE__ */ t("div", {
             className: "flow-media-ai-empty",
             children: r?.gateway ? "开始对话…" : "请在属性面板配置 AI 接口"
           }),
-          n.map((a, p) => /* @__PURE__ */ e("div", {
-            className: `flow-media-ai-msg flow-media-ai-msg--${a.role}`,
-            children: a.role === "assistant" ? /* @__PURE__ */ e(A, {
-              content: a.content || "…",
+          o.map((l, p) => /* @__PURE__ */ t("div", {
+            className: `flow-media-ai-msg flow-media-ai-msg--${l.role}`,
+            children: l.role === "assistant" ? /* @__PURE__ */ t(z, {
+              content: l.content || "…",
               enableMermaid: !1,
               enableMarkmap: !1
-            }) : /* @__PURE__ */ e("span", { children: a.content })
+            }) : /* @__PURE__ */ t("span", { children: l.content })
           }, p)),
-          N && /* @__PURE__ */ e("div", {
+          C && /* @__PURE__ */ t("div", {
             className: "flow-media-error",
-            children: N
+            children: C
           })
         ]
       }),
-      /* @__PURE__ */ v("div", {
+      /* @__PURE__ */ b("div", {
         className: "flow-media-ai-input",
-        style: { pointerEvents: i ? "auto" : "none" },
-        children: [/* @__PURE__ */ e("textarea", {
-          value: f,
+        style: { pointerEvents: s ? "auto" : "none" },
+        children: [/* @__PURE__ */ t("textarea", {
+          value: u,
           placeholder: "输入消息，Enter 发送",
-          onChange: (a) => c(a.target.value),
-          onKeyDown: (a) => {
-            a.key === "Enter" && !a.shiftKey && (a.preventDefault(), k && C());
+          onChange: (l) => m(l.target.value),
+          onKeyDown: (l) => {
+            l.key === "Enter" && !l.shiftKey && (l.preventDefault(), S && k());
           },
-          onPointerDown: (a) => a.stopPropagation()
-        }), m ? /* @__PURE__ */ e("button", {
+          onPointerDown: (l) => l.stopPropagation()
+        }), c ? /* @__PURE__ */ t("button", {
           type: "button",
-          onClick: () => h.current?.abort(),
+          onClick: () => w.current?.abort(),
           children: "停止"
-        }) : /* @__PURE__ */ e("button", {
+        }) : /* @__PURE__ */ t("button", {
           type: "button",
-          disabled: !k || !f.trim(),
-          onClick: C,
+          disabled: !S || !u.trim(),
+          onClick: k,
           children: "发送"
         })]
       })
     ]
   });
 }
-function U({ node: t, interactive: r }) {
-  const i = t.data.mediaKind ?? "markdown", l = t.data.mediaContent ?? "", n = t.data.labelColor ?? t.data.color;
-  switch (i) {
+function ee({ node: e, interactive: r }) {
+  const s = e.data.mediaKind ?? "markdown", a = e.data.mediaContent ?? "", o = D(e.data.labelColor ?? e.data.color, "#111827");
+  switch (s) {
     case "markdown":
-      return /* @__PURE__ */ e("div", {
+      return /* @__PURE__ */ t("div", {
         className: "flow-media-markdown",
         style: {
-          color: n,
-          fontSize: t.data.fontSize
+          color: o,
+          fontSize: e.data.fontSize
         },
-        children: /* @__PURE__ */ e(A, { content: l })
+        children: /* @__PURE__ */ t(z, { content: a })
       });
     case "html":
-      return /* @__PURE__ */ e(_, {
-        content: l,
-        interactive: r
+      return /* @__PURE__ */ t(F, {
+        content: a,
+        interactive: r,
+        color: A(e.data.labelColor ?? e.data.color, "#111827"),
+        fontSize: e.data.fontSize
       });
     case "mermaid":
-      return /* @__PURE__ */ e(K, {
-        content: l,
-        color: n
+      return /* @__PURE__ */ t(P, {
+        content: a,
+        color: o
       });
     case "math":
-      return /* @__PURE__ */ e(L, {
-        content: l,
-        color: n,
-        fontSize: t.data.fontSize
+      return /* @__PURE__ */ t(j, {
+        content: a,
+        color: o,
+        fontSize: e.data.fontSize
       });
     case "image":
-      return /* @__PURE__ */ e($, { content: l });
+      return /* @__PURE__ */ t(O, { content: a });
     case "model3d":
-      return /* @__PURE__ */ e(z, {
-        content: l,
-        format: t.data.modelFormat ?? "stl",
+      return /* @__PURE__ */ t($, {
+        content: a,
+        format: e.data.modelFormat ?? "stl",
         interactive: r
       });
     case "ai":
-      return /* @__PURE__ */ e(P, {
-        node: t,
-        config: t.data.aiConfig,
+      return /* @__PURE__ */ t(q, {
+        node: e,
+        config: e.data.aiConfig,
         interactive: r,
-        color: n
+        color: o
+      });
+    case "data":
+      return /* @__PURE__ */ t("div", {
+        className: "flow-media-data",
+        style: { pointerEvents: r ? "auto" : "none" },
+        children: /* @__PURE__ */ t(L, { config: e.data.dataConfig ?? {
+          columns: [],
+          rows: [],
+          view: "table"
+        } })
       });
     default:
       return null;
   }
 }
 export {
-  U as MediaContent
+  ee as MediaContent
 };
 
 //# sourceMappingURL=MediaContent.js.map