@ant-design/agentic-ui 2.0.0

package/dist/plugins/chart/index.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { RenderElementProps } from 'slate-react';
+export { ChartAttrToolBar } from './ChartAttrToolBar';
+export * from './ChartMark';
+export { ChartRender } from './ChartRender';
+export { default as AreaChart } from './AreaChart';
+export { default as BarChart } from './BarChart';
+export { default as ChartStatistic } from './ChartStatistic';
+export { default as DonutChart } from './DonutChart';
+export { default as FunnelChart } from './FunnelChart';
+export { default as LineChart } from './LineChart';
+export { default as RadarChart } from './RadarChart';
+export { default as ScatterChart } from './ScatterChart';
+export type { AreaChartConfigItem, AreaChartDataItem, AreaChartProps, } from './AreaChart';
+export type { BarChartConfigItem, BarChartDataItem, BarChartProps, } from './BarChart';
+export type { ChartStatisticProps } from './ChartStatistic';
+export type { DonutChartConfig, DonutChartData, DonutChartProps, } from './DonutChart';
+export type { FunnelChartDataItem, FunnelChartProps } from './FunnelChart';
+export type { LineChartConfigItem, LineChartDataItem, LineChartProps, } from './LineChart';
+export type { RadarChartDataItem } from './RadarChart';
+export type { ScatterChartDataItem, ScatterChartProps } from './ScatterChart';
+export { defaultColorList } from './const';
+export { debounce as chartDebounce, stringFormatNumber } from './utils';
+export { ChartFilter, ChartToolBar, downloadChart } from './components';
+export type { ChartFilterProps, ChartToolBarProps, FilterOption, RegionOption, } from './components';
+/**
+ * ChartElement 组件 - 图表元素组件
+ *
+ * 该组件用于在Markdown编辑器中渲染图表，支持多种图表类型和数据处理。
+ * 提供图表配置、数据转换、错误处理等功能。
+ *
+ * @component
+ * @description 图表元素组件，在编辑器中渲染各种类型的图表
+ * @param {RenderElementProps} props - 组件属性
+ * @param {Object} props.element - 图表元素数据
+ * @param {Object} props.attributes - 元素属性
+ * @param {React.ReactNode} props.children - 子元素
+ *
+ * @example
+ * ```tsx
+ * <ChartElement
+ *   element={chartElement}
+ *   attributes={attributes}
+ *   children={children}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的图表元素组件
+ *
+ * @remarks
+ * - 支持多种图表类型（饼图、柱状图、折线图、面积图等）
+ * - 提供数据格式转换功能
+ * - 支持日期和数字格式化
+ * - 使用ErrorBoundary处理渲染错误
+ * - 提供拖拽手柄功能
+ * - 支持图表配置和自定义
+ * - 集成编辑器状态管理
+ * - 提供响应式布局
+ */
+export declare const ChartElement: (props: RenderElementProps) => React.JSX.Element;

package/dist/plugins/chart/index.js

@@ -0,0 +1,375 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/plugins/chart/index.tsx
+import dayjs from "dayjs";
+import React, { useEffect, useMemo } from "react";
+import { useSlate } from "slate-react";
+import { ErrorBoundary } from "../../MarkdownEditor/editor/elements/ErrorBoundary";
+import { useEditorStore } from "../../MarkdownEditor/editor/store";
+import { DragHandle } from "../../MarkdownEditor/editor/tools/DragHandle";
+import { ChartRender } from "./ChartRender";
+import { ChartAttrToolBar } from "./ChartAttrToolBar";
+export * from "./ChartMark";
+import { ChartRender as ChartRender2 } from "./ChartRender";
+import { default as default2 } from "./AreaChart";
+import { default as default3 } from "./BarChart";
+import { default as default4 } from "./ChartStatistic";
+import { default as default5 } from "./DonutChart";
+import { default as default6 } from "./FunnelChart";
+import { default as default7 } from "./LineChart";
+import { default as default8 } from "./RadarChart";
+import { default as default9 } from "./ScatterChart";
+import { defaultColorList } from "./const";
+import { debounce, stringFormatNumber } from "./utils";
+import { ChartFilter, ChartToolBar, downloadChart } from "./components";
+function reverseFormatNumber(val, locale) {
+  let group = new Intl.NumberFormat(locale).format(1111).replace(/1/g, "");
+  let decimal = new Intl.NumberFormat(locale).format(1.1).replace(/1/g, "");
+  let reversedVal = val.replace(new RegExp("\\" + group, "g"), "");
+  reversedVal = reversedVal.replace(new RegExp("\\" + decimal, "g"), ".");
+  return Number.isNaN(reversedVal) ? NaN : Number(reversedVal);
+}
+function isValidDate(dateString) {
+  const defaultDateFormats = [
+    "YYYY-MM-DD",
+    "YYYY-MM-DD HH:mm:ss",
+    "YYYY/MM/DD",
+    "YYYY/MM/DD HH:mm:ss",
+    "DD/MM/YYYY",
+    "DD/MM/YYYY HH:mm:ss",
+    "MMMM D, YYYY",
+    "MMMM D, YYYY h:mm A",
+    "MMM D, YYYY",
+    "MMM D, YYYY h:mm A",
+    "ddd, MMM D, YYYY h:mm A"
+  ];
+  for (let i = 0; i < defaultDateFormats.length; i++) {
+    if (dayjs(dateString, defaultDateFormats[i]).isValid()) {
+      return dayjs(dateString).format(defaultDateFormats[i]);
+    }
+  }
+  if (dayjs(dateString).isValid()) {
+    return dayjs(dateString).format("YYYY-MM-DD");
+  }
+  return dateString;
+}
+var numberString = (value) => {
+  if (!value)
+    return value;
+  try {
+    if (typeof value === "number")
+      return value;
+    if (typeof value === "string") {
+      const formattedValue = reverseFormatNumber(value, "en-US");
+      if (!isNaN(formattedValue))
+        return formattedValue;
+      return isValidDate(value);
+    }
+    return value;
+  } catch (error) {
+    return value;
+  }
+};
+var groupByCategory = (data, key) => {
+  return data.reduce((group, product) => {
+    var _a;
+    const category = product[key];
+    group[category] = (_a = group[category]) != null ? _a : [];
+    group[category].push(product);
+    return group;
+  }, {});
+};
+var ChartElement = (props) => {
+  var _a, _b, _c;
+  const { store, readonly, markdownContainerRef, rootContainer } = useEditorStore();
+  const editor = useSlate();
+  const { element: node, attributes, children } = props;
+  let chartData = useMemo(() => {
+    var _a2, _b2;
+    return ((_b2 = (_a2 = node.otherProps) == null ? void 0 : _a2.dataSource) == null ? void 0 : _b2.map((item) => {
+      return __spreadProps(__spreadValues({}, item), {
+        column_list: Object.keys(item)
+      });
+    })) || [];
+  }, [(_a = node.otherProps) == null ? void 0 : _a.dataSource]);
+  const columns = ((_b = node.otherProps) == null ? void 0 : _b.columns) || [];
+  const [columnLength, setColumnLength] = React.useState(2);
+  const config = [((_c = node.otherProps) == null ? void 0 : _c.config) || node.otherProps].flat(1);
+  const htmlRef = React.useRef(null);
+  const [minWidth, setMinWidth] = React.useState(256);
+  useEffect(() => {
+    var _a2, _b2, _c2;
+    const width = Math.max(
+      ((_a2 = rootContainer == null ? void 0 : rootContainer.current) == null ? void 0 : _a2.clientWidth) || ((_c2 = (_b2 = htmlRef.current) == null ? void 0 : _b2.parentElement) == null ? void 0 : _c2.clientWidth) || 256,
+      256
+    );
+    setMinWidth(width || 256);
+    setColumnLength(Math.min(Math.floor(width / 256), config.length));
+  }, []);
+  return useMemo(
+    () => /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadProps(__spreadValues({
+        className: "ant-md-editor-drag-el"
+      }, attributes), {
+        "data-be": "chart",
+        style: {
+          flex: 1,
+          minWidth: `min(${Math.min(minWidth, 856)}px, 100%)`,
+          maxWidth: "100%",
+          margin: "1em 0"
+        },
+        ref: htmlRef,
+        onDragStart: (e) => store.dragStart(e, markdownContainerRef.current)
+      }),
+      /* @__PURE__ */ React.createElement(DragHandle, null),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "ant-md-editor-chart-box",
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            borderRadius: "0.5em"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          ErrorBoundary,
+          {
+            fallback: /* @__PURE__ */ React.createElement("table", null, /* @__PURE__ */ React.createElement("tbody", null, children))
+          },
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                position: "relative"
+              }
+            },
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  zIndex: 1,
+                  width: "100%",
+                  opacity: 0,
+                  height: "100%",
+                  overflow: "hidden",
+                  pointerEvents: "none"
+                }
+              },
+              children
+            ),
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flexWrap: "wrap",
+                  flexDirection: minWidth < 400 ? "column" : "row",
+                  gap: 8,
+                  userSelect: "none"
+                },
+                contentEditable: false,
+                onClick: (e) => {
+                  e.stopPropagation();
+                },
+                onKeyDown: (e) => {
+                  e.stopPropagation();
+                }
+              },
+              config.map((_a2, index) => {
+                var _b2 = _a2, { chartType, x, y } = _b2, rest = __objRest(_b2, ["chartType", "x", "y"]);
+                var _a3;
+                const height = Math.min(
+                  400,
+                  ((_a3 = htmlRef.current) == null ? void 0 : _a3.clientWidth) || 400
+                );
+                if (typeof window === "undefined" || typeof document === "undefined") {
+                  return /* @__PURE__ */ React.createElement(
+                    "div",
+                    {
+                      key: index,
+                      style: {
+                        margin: "auto",
+                        position: "relative",
+                        zIndex: 9
+                      }
+                    }
+                  );
+                }
+                chartData = chartData.map((item) => {
+                  return __spreadProps(__spreadValues({}, item), {
+                    [x]: numberString(item[x]),
+                    [y]: numberString(item[y])
+                  });
+                }).sort((a, b) => {
+                  if (dayjs(a[x]).isValid() && dayjs(b[x]).isValid()) {
+                    return dayjs(a[x]).valueOf() - dayjs(b[x]).valueOf();
+                  }
+                  return 0;
+                });
+                const subgraphBy = rest == null ? void 0 : rest.subgraphBy;
+                if (subgraphBy) {
+                  const groupData = groupByCategory(chartData, subgraphBy);
+                  return Object.keys(groupData).map((key, subIndex) => {
+                    const group = groupData[key];
+                    if (!Array.isArray(group) || group.length < 1) {
+                      return null;
+                    }
+                    const dom = /* @__PURE__ */ React.createElement(
+                      ChartRender,
+                      {
+                        chartType,
+                        chartData: group,
+                        columnLength,
+                        onColumnLengthChange: setColumnLength,
+                        isChartList: true,
+                        config: {
+                          height,
+                          x,
+                          y,
+                          columns,
+                          index: index * 10 + subIndex,
+                          rest
+                        },
+                        title: key,
+                        dataTime: rest == null ? void 0 : rest.dataTime,
+                        groupBy: rest == null ? void 0 : rest.groupBy,
+                        filterBy: rest == null ? void 0 : rest.filterBy,
+                        colorLegend: rest == null ? void 0 : rest.colorLegend
+                      }
+                    );
+                    return dom;
+                  });
+                }
+                return /* @__PURE__ */ React.createElement(
+                  ChartRender,
+                  {
+                    key: index,
+                    columnLength,
+                    onColumnLengthChange: setColumnLength,
+                    chartType,
+                    chartData,
+                    title: rest == null ? void 0 : rest.title,
+                    dataTime: rest == null ? void 0 : rest.dataTime,
+                    groupBy: rest == null ? void 0 : rest.groupBy,
+                    filterBy: rest == null ? void 0 : rest.filterBy,
+                    colorLegend: rest == null ? void 0 : rest.colorLegend,
+                    config: {
+                      height,
+                      x,
+                      y,
+                      columns,
+                      index,
+                      rest
+                    }
+                  }
+                );
+              }).map((itemList, index) => {
+                if (Array.isArray(itemList)) {
+                  return itemList == null ? void 0 : itemList.map((item, subIndex) => {
+                    if (!item)
+                      return null;
+                    return /* @__PURE__ */ React.createElement(
+                      "div",
+                      {
+                        key: index + subIndex,
+                        style: {
+                          margin: "auto",
+                          minWidth: `max(calc(${100 / columnLength}% - 16px), 600px)`,
+                          flex: 1,
+                          userSelect: "none"
+                        },
+                        contentEditable: false
+                      },
+                      item
+                    );
+                  });
+                }
+                return /* @__PURE__ */ React.createElement(
+                  "div",
+                  {
+                    key: index,
+                    contentEditable: false,
+                    style: {
+                      userSelect: "none",
+                      margin: "auto",
+                      minWidth: `max(calc(${100 / columnLength}% - 16px), 600px)`,
+                      flex: 1
+                    },
+                    onClick: (e) => {
+                      e.stopPropagation();
+                    }
+                  },
+                  itemList
+                );
+              })
+            )
+          )
+        )
+      )
+    ),
+    [
+      attributes,
+      JSON.stringify(node.otherProps),
+      editor,
+      columnLength,
+      readonly,
+      minWidth
+    ]
+  );
+};
+export {
+  default2 as AreaChart,
+  default3 as BarChart,
+  ChartAttrToolBar,
+  ChartElement,
+  ChartFilter,
+  ChartRender2 as ChartRender,
+  default4 as ChartStatistic,
+  ChartToolBar,
+  default5 as DonutChart,
+  default6 as FunnelChart,
+  default7 as LineChart,
+  default8 as RadarChart,
+  default9 as ScatterChart,
+  debounce as chartDebounce,
+  defaultColorList,
+  downloadChart,
+  stringFormatNumber
+};

package/dist/plugins/chart/utils.d.ts

@@ -0,0 +1,83 @@
+/**
+ * 将数字或字符串格式化为字符串。
+ *
+ * @param value - 要格式化的值，可以是字符串或数字。
+ * @returns 格式化后的字符串。如果输入值为字符串，则直接返回该字符串；
+ *          如果输入值为数字，则使用 `intl.format` 方法格式化后返回；
+ *          如果输入值为空或格式化过程中发生错误，则返回原始值。
+ */
+export declare const stringFormatNumber: (value: string | number) => string | number;
+export declare function debounce(func: {
+    (): void;
+    apply?: any;
+}, delay: number | undefined): {
+    (): void;
+    flush(): void;
+    cancel(): void;
+};
+/**
+ * 数据项接口，用于图表数据处理
+ */
+export interface ChartDataItem {
+    /** 数据类别 */
+    category?: string;
+    /** 数据类型 */
+    type?: string;
+    /** X轴值 */
+    x: number | string;
+    /** Y轴值 */
+    y: number | string;
+    /** X轴标题 */
+    xtitle?: string;
+    /** Y轴标题 */
+    ytitle?: string;
+    /** 筛选标签 */
+    filterLabel?: string;
+}
+/**
+ * 归一化 x 轴值，将字符串数字转换为数字，避免重复标签
+ * @param value - 原始 x 轴值
+ * @returns 归一化后的值
+ */
+export declare const normalizeXValue: (value: number | string) => number | string;
+/**
+ * 比较两个 x 轴值的大小，用于排序
+ * @param a - 第一个值
+ * @param b - 第二个值
+ * @returns 比较结果
+ */
+export declare const compareXValues: (a: number | string, b: number | string) => number;
+/**
+ * 检查两个 x 轴值是否相等
+ * @param a - 第一个值
+ * @param b - 第二个值
+ * @returns 是否相等
+ */
+export declare const isXValueEqual: (a: number | string, b: number | string) => boolean;
+/**
+ * 从数据中提取并排序 x 轴值
+ * @param data - 图表数据数组
+ * @returns 排序后的唯一 x 轴值数组
+ */
+export declare const extractAndSortXValues: (data: ChartDataItem[]) => Array<number | string>;
+/**
+ * 根据 x 轴值查找对应的数据点
+ * @param data - 数据数组
+ * @param type - 数据类型
+ * @param xValue - x 轴值
+ * @returns 匹配的数据点，如果未找到返回 undefined
+ */
+export declare const findDataPointByXValue: (data: ChartDataItem[], xValue: number | string, type?: string) => ChartDataItem | undefined;
+/**
+ * 将值转换为数字
+ * @param val - 要转换的值
+ * @param fallback - 转换失败时的默认值
+ * @returns 转换后的数字
+ */
+export declare const toNumber: (val: any, fallback: number) => number;
+/**
+ * 检查值是否不为空
+ * @param val - 要检查的值
+ * @returns 是否不为空
+ */
+export declare const isNotEmpty: (val: any) => boolean;

package/dist/plugins/chart/utils.js

@@ -0,0 +1,98 @@
+// src/plugins/chart/utils.ts
+var intl = new Intl.NumberFormat("en-US", {
+  style: "decimal"
+});
+var stringFormatNumber = (value) => {
+  if (!value)
+    return value;
+  try {
+    if (typeof value === "string")
+      return value;
+    if (typeof value === "number") {
+      return intl.format(Number(value));
+    }
+    return value;
+  } catch (error) {
+    return value;
+  }
+};
+function debounce(func, delay) {
+  let timer = null;
+  const fn = function() {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(this, arguments);
+    }, delay);
+  };
+  fn.flush = function() {
+    clearTimeout(timer);
+    func.apply(this, arguments);
+  };
+  fn.cancel = function() {
+    clearTimeout(timer);
+  };
+  return fn;
+}
+var normalizeXValue = (value) => {
+  if (typeof value === "number")
+    return value;
+  const s = String(value).trim();
+  if (s === "")
+    return value;
+  const n = Number(s);
+  return Number.isFinite(n) ? n : value;
+};
+var compareXValues = (a, b) => {
+  const normalizedA = normalizeXValue(a);
+  const normalizedB = normalizeXValue(b);
+  if (typeof normalizedA === "number" && typeof normalizedB === "number") {
+    return normalizedA - normalizedB;
+  }
+  if (typeof normalizedA === "number" && typeof normalizedB === "string") {
+    return -1;
+  }
+  if (typeof normalizedA === "string" && typeof normalizedB === "number") {
+    return 1;
+  }
+  return String(normalizedA).localeCompare(String(normalizedB));
+};
+var isXValueEqual = (a, b) => {
+  const normalizedA = normalizeXValue(a);
+  const normalizedB = normalizeXValue(b);
+  if (typeof normalizedA === "number" && typeof normalizedB === "number") {
+    return normalizedA === normalizedB;
+  }
+  return String(normalizedA) === String(normalizedB);
+};
+var extractAndSortXValues = (data) => {
+  const normalizedValues = data.map((item) => normalizeXValue(item.x));
+  const uniqueValues = [...new Set(normalizedValues)];
+  return uniqueValues.sort(compareXValues);
+};
+var findDataPointByXValue = (data, xValue, type) => {
+  if (!type)
+    return data.find((item) => isXValueEqual(item.x, xValue));
+  return data.find(
+    (item) => item.type === type && isXValueEqual(item.x, xValue)
+  );
+};
+var toNumber = (val, fallback) => {
+  if (typeof val === "number" && !Number.isNaN(val))
+    return val;
+  const n = Number(val);
+  return Number.isFinite(n) ? n : fallback;
+};
+var isNotEmpty = (val) => {
+  return val !== null && val !== void 0;
+};
+export {
+  compareXValues,
+  debounce,
+  extractAndSortXValues,
+  findDataPointByXValue,
+  isNotEmpty,
+  isXValueEqual,
+  normalizeXValue,
+  stringFormatNumber,
+  toNumber
+};

package/dist/plugins/code/CodeUI/Katex/Katex.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CodeNode } from '../../../../MarkdownEditor/el';
+import './katex.min.css';
+export declare const Katex: (props: {
+    el?: CodeNode;
+}) => React.JSX.Element;

package/dist/plugins/code/CodeUI/Katex/Katex.js

@@ -0,0 +1,75 @@
+// src/plugins/code/CodeUI/Katex/Katex.tsx
+import classNames from "classnames";
+import katex from "katex";
+import React, { useEffect, useRef } from "react";
+import { useGetSetState } from "react-use";
+import "./katex.min.css";
+var Katex = (props) => {
+  const [state, setState] = useGetSetState({
+    code: "",
+    error: ""
+  });
+  const divRef = useRef(null);
+  const timer = useRef(0);
+  const safeEl = props.el || { value: "", type: "code", language: "katex" };
+  useEffect(() => {
+    const code = safeEl.value || "";
+    clearTimeout(timer.current);
+    timer.current = window.setTimeout(
+      () => {
+        setState({
+          code
+        });
+        if (state().code) {
+          try {
+            if (divRef.current) {
+              katex.render(state().code, divRef.current, {
+                strict: false,
+                output: "htmlAndMathml",
+                throwOnError: false,
+                displayMode: true,
+                macros: {
+                  "\\f": "#1f(#2)"
+                }
+              });
+            }
+          } catch (e) {
+          }
+        } else {
+          setState({ error: "" });
+        }
+      },
+      !state().code ? 0 : 300
+    );
+    return () => window.clearTimeout(timer.current);
+  }, [safeEl]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        marginBottom: "0.75em",
+        cursor: "default",
+        userSelect: "none",
+        textAlign: "center",
+        backgroundColor: "rgba(107, 114, 128, 0.05)",
+        paddingTop: "1em",
+        paddingBottom: "1em",
+        borderRadius: "0.25em"
+      },
+      contentEditable: false
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: divRef,
+        className: classNames("katex-container", {
+          hidden: !state().code.trim()
+        })
+      }
+    ),
+    !state().code.trim() && /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", color: "#6B7280" } }, "Formula")
+  );
+};
+export {
+  Katex
+};