@ant-design/agentic-ui 2.0.0

package/dist/ThoughtChainList/TableSql.js

@@ -0,0 +1,497 @@
+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));
+
+// src/ThoughtChainList/TableSql.tsx
+import { CloseCircleFilled, EditOutlined } from "@ant-design/icons";
+import { Copy } from "@sofa-design/icons";
+import { Button, Table, Typography } from "antd";
+import copy from "copy-to-clipboard";
+import React, { useContext, useMemo } from "react";
+import { I18nContext } from "../i18n";
+import { ActionIconBox } from "../index";
+import {
+  MarkdownEditor,
+  parserSlateNodeToMarkdown
+} from "../MarkdownEditor";
+import { CostMillis } from "./CostMillis";
+var TableSql = (props) => {
+  var _a;
+  const { locale } = useContext(I18nContext);
+  const [editor, setEditor] = React.useState(false);
+  const editorRef = React.useRef(void 0);
+  return useMemo(() => {
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    if (editor) {
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          "data-testid": props["data-testid"],
+          style: {
+            display: "flex",
+            gap: "10px",
+            flexDirection: "column"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              padding: "8px 12px",
+              gap: "10px",
+              alignSelf: "stretch",
+              wordBreak: "break-all",
+              wordWrap: "break-word",
+              background: "#FBFCFD",
+              zIndex: 1,
+              borderRadius: "12px"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "row",
+                gap: "10px",
+                alignItems: "center",
+                justifyContent: "space-between"
+              }
+            },
+            locale == null ? void 0 : locale.executeSQL
+          ),
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                display: "flex",
+                borderRadius: "12px",
+                alignSelf: "stretch",
+                background: "#FFFFFF"
+              },
+              className: "code-view"
+            },
+            /* @__PURE__ */ React.createElement(
+              MarkdownEditor,
+              __spreadProps(__spreadValues({
+                style: {
+                  padding: 0,
+                  width: "100%"
+                }
+              }, props.markdownRenderProps), {
+                toc: false,
+                editorRef,
+                contentStyle: {
+                  padding: 0,
+                  width: "100%"
+                },
+                initValue: `\`\`\`sql
+${(_b = (_a2 = props.input) == null ? void 0 : _a2.sql) == null ? void 0 : _b.trim()}
+\`\`\``.trim()
+              })
+            )
+          )
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              gap: 12,
+              display: "flex",
+              alignItems: "flex-end",
+              justifyContent: "flex-end",
+              width: "100%"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            Button,
+            {
+              style: {
+                border: "1px solid #F0F2F5",
+                background: "#FFFFFF",
+                padding: "4px 24px",
+                borderRadius: "12px 12px 12px 12px"
+              },
+              onClick: () => {
+                var _a3, _b2, _c2, _d2;
+                setEditor(false);
+                (_d2 = (_a3 = editorRef.current) == null ? void 0 : _a3.store) == null ? void 0 : _d2.setMDContent(
+                  `\`\`\`sql
+${(_c2 = (_b2 = props.input) == null ? void 0 : _b2.sql) == null ? void 0 : _c2.trim()}
+\`\`\``
+                );
+              }
+            },
+            locale == null ? void 0 : locale.cancel
+          ),
+          /* @__PURE__ */ React.createElement(
+            Button,
+            {
+              style: {
+                border: "1px solid #F0F2F5",
+                padding: "4px 24px",
+                borderRadius: "12px 12px 12px 12px"
+              },
+              type: "primary",
+              onClick: () => {
+                var _a3, _b2, _c2, _d2;
+                setEditor(false);
+                const schema = (_b2 = (_a3 = editorRef == null ? void 0 : editorRef.current) == null ? void 0 : _a3.store.editor) == null ? void 0 : _b2.children;
+                const value = (_c2 = parserSlateNodeToMarkdown(schema || [])) == null ? void 0 : _c2.replaceAll("```sql\n", "").replaceAll("\n```", "").replaceAll("<!--{}-->\n", "");
+                (_d2 = props.onChangeItem) == null ? void 0 : _d2.call(props, props, {
+                  feedbackContent: value || "",
+                  feedbackType: "sql",
+                  feedbackRunId: props.runId || ""
+                });
+              }
+            },
+            locale == null ? void 0 : locale.retry
+          )
+        )
+      );
+    }
+    const sourceData = (_c = props.output) == null ? void 0 : _c.tableData;
+    const keys = Object.keys(sourceData || {});
+    let fistKey = keys[0];
+    const dataSource = (_d = sourceData == null ? void 0 : sourceData[fistKey]) == null ? void 0 : _d.map(
+      (_, index) => {
+        return keys == null ? void 0 : keys.reduce((prev, key) => {
+          return __spreadProps(__spreadValues({}, prev), {
+            [key]: sourceData[key][index]
+          });
+        }, {});
+      }
+    );
+    const columns = ((_e = props.output) == null ? void 0 : _e.columns) || Object.keys((dataSource == null ? void 0 : dataSource.at(0)) || {});
+    const errorMsg = ((_f = props.output) == null ? void 0 : _f.errorMsg) || ((_h = (_g = props.output) == null ? void 0 : _g.response) == null ? void 0 : _h.errorMsg);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "data-testid": props["data-testid"],
+        style: {
+          display: "flex",
+          gap: "10px",
+          flexDirection: "column"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            padding: "8px 12px",
+            gap: "10px",
+            alignSelf: "stretch",
+            wordBreak: "break-all",
+            wordWrap: "break-word",
+            background: "#FBFCFD",
+            zIndex: 1,
+            borderRadius: "12px"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              gap: "10px",
+              alignItems: "center",
+              justifyContent: "space-between"
+            }
+          },
+          locale == null ? void 0 : locale.executeSQL,
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "row",
+                gap: "10px",
+                alignItems: "center"
+              }
+            },
+            props.costMillis ? /* @__PURE__ */ React.createElement(CostMillis, { costMillis: props.costMillis }) : null,
+            /* @__PURE__ */ React.createElement(
+              ActionIconBox,
+              {
+                title: locale == null ? void 0 : locale.copy,
+                onClick: () => {
+                  var _a3;
+                  try {
+                    copy(((_a3 = props.input) == null ? void 0 : _a3.sql) || "");
+                  } catch (error) {
+                    console.error("复制失败:", error);
+                  }
+                }
+              },
+              /* @__PURE__ */ React.createElement(Copy, null)
+            ),
+            props.onChangeItem ? /* @__PURE__ */ React.createElement(
+              ActionIconBox,
+              {
+                title: locale == null ? void 0 : locale.edit,
+                onClick: () => {
+                  setEditor(true);
+                }
+              },
+              /* @__PURE__ */ React.createElement(EditOutlined, null)
+            ) : null
+          )
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              display: "flex",
+              borderRadius: "12px",
+              alignSelf: "stretch",
+              background: "#FFFFFF"
+            },
+            className: "code-view"
+          },
+          /* @__PURE__ */ React.createElement(
+            MarkdownEditor,
+            __spreadProps(__spreadValues({
+              style: {
+                padding: 0,
+                width: "100%"
+              }
+            }, props.markdownRenderProps), {
+              toc: false,
+              readonly: true,
+              contentStyle: {
+                padding: 0,
+                width: "100%"
+              },
+              initValue: `\`\`\`sql
+${(_j = (_i = props.input) == null ? void 0 : _i.sql) == null ? void 0 : _j.trim()}
+\`\`\``.trim()
+            })
+          )
+        )
+      ),
+      !props.isFinished ? /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "row",
+            gap: "10px",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "8px 12px",
+            alignSelf: "stretch",
+            wordBreak: "break-all",
+            wordWrap: "break-word",
+            background: "#FBFCFD",
+            zIndex: 1,
+            borderRadius: "12px"
+          }
+        },
+        locale == null ? void 0 : locale.executing
+      ) : null,
+      props.isFinished && !errorMsg ? /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "10px",
+            padding: "8px 12px",
+            alignSelf: "stretch",
+            wordBreak: "break-all",
+            wordWrap: "break-word",
+            background: "#FBFCFD",
+            zIndex: 1,
+            borderRadius: "12px"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              gap: "10px",
+              alignItems: "center",
+              justifyContent: "space-between"
+            }
+          },
+          locale == null ? void 0 : locale.queryResults,
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "row",
+                gap: "10px",
+                alignItems: "center"
+              }
+            },
+            /* @__PURE__ */ React.createElement(
+              ActionIconBox,
+              {
+                title: locale == null ? void 0 : locale.copy,
+                onClick: () => {
+                  var _a3;
+                  try {
+                    copy(
+                      JSON.stringify(
+                        ((_a3 = props.output) == null ? void 0 : _a3.tableData) || {},
+                        null,
+                        2
+                      )
+                    );
+                  } catch (error) {
+                    console.error("复制失败:", error);
+                  }
+                }
+              },
+              /* @__PURE__ */ React.createElement(Copy, null)
+            )
+          )
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              display: "flex",
+              borderRadius: "12px",
+              alignSelf: "stretch",
+              background: "#FFFFFF"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            Table,
+            {
+              style: {
+                width: "100%"
+              },
+              size: "small",
+              pagination: false,
+              rowKey: (row) => Object.values(row || {}).join("-"),
+              dataSource,
+              columns: columns == null ? void 0 : columns.map((item) => ({
+                title: item,
+                dataIndex: item,
+                key: item
+              }))
+            }
+          )
+        )
+      ) : null,
+      props.isFinished && errorMsg ? /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "10px",
+            padding: "8px 12px",
+            alignSelf: "stretch",
+            wordBreak: "break-all",
+            wordWrap: "break-word",
+            background: "#FBFCFD",
+            zIndex: 1,
+            borderRadius: "12px"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              gap: "10px",
+              alignItems: "center",
+              justifyContent: "space-between"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "row",
+                gap: "10px",
+                alignItems: "center"
+              }
+            },
+            /* @__PURE__ */ React.createElement(CloseCircleFilled, { style: { color: "#ff4d4f" } }),
+            locale == null ? void 0 : locale.queryFailed
+          ),
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "row",
+                gap: "10px",
+                alignItems: "center"
+              }
+            },
+            /* @__PURE__ */ React.createElement(
+              ActionIconBox,
+              {
+                title: locale == null ? void 0 : locale.copy,
+                onClick: () => {
+                  try {
+                    copy(errorMsg);
+                  } catch (error) {
+                    console.error("复制失败:", error);
+                  }
+                }
+              },
+              /* @__PURE__ */ React.createElement(Copy, null)
+            )
+          )
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              display: "flex",
+              borderRadius: "12px",
+              alignSelf: "stretch",
+              background: "#FFFFFF"
+            }
+          },
+          /* @__PURE__ */ React.createElement(Typography.Text, { type: "danger" }, errorMsg)
+        )
+      ) : null
+    ));
+  }, [
+    editor,
+    (_a = props.input) == null ? void 0 : _a.sql,
+    props.output,
+    props.isFinished,
+    props.costMillis
+  ]);
+};
+export {
+  TableSql
+};

package/dist/ThoughtChainList/ThoughtChainListItem.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import { MarkdownEditorProps } from '../MarkdownEditor/types';
+import { DocMeta, ThoughtChainListProps, WhiteBoxProcessInterface } from './types';
+/**
+ * ThoughtChainListItem 组件 - 思维链列表项组件
+ *
+ * 该组件用于显示单个思维链项，包括标题、内容、图标、状态等信息。
+ * 支持折叠/展开、文档元数据显示、自定义渲染等功能。
+ *
+ * @component
+ * @description 思维链列表项组件，显示单个思维链项
+ * @param {Object} props - 组件属性
+ * @param {Object} [props.bubble] - 气泡数据
+ * @param {boolean} [props.bubble.isFinished] - 是否已完成
+ * @param {number} [props.bubble.endTime] - 结束时间
+ * @param {number} [props.bubble.createAt] - 创建时间
+ * @param {string} props.hashId - 哈希ID
+ * @param {string} props.prefixCls - 前缀类名
+ * @param {number} props.index - 索引
+ * @param {WhiteBoxProcessInterface & {icon: React.ReactNode}} props.thoughtChainListItem - 思维链项数据
+ * @param {boolean} [props.isFinished] - 是否已完成
+ * @param {(meta: Partial<DocMeta>) => void} props.setDocMeta - 设置文档元数据
+ * @param {MarkdownEditorProps} [props.markdownRenderProps] - Markdown渲染配置
+ * @param {Function} [props.titleExtraRender] - 标题额外渲染函数
+ * @param {Function} [props.contentRender] - 内容渲染函数
+ *
+ * @example
+ * ```tsx
+ * <ThoughtChainListItem
+ *   thoughtChainListItem={itemData}
+ *   index={0}
+ *   prefixCls="thought-chain"
+ *   hashId="hash123"
+ *   setDocMeta={(meta) => setDocMeta(meta)}
+ *   isFinished={true}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的思维链列表项组件
+ *
+ * @remarks
+ * - 显示思维链项标题和内容
+ * - 支持折叠/展开功能
+ * - 提供状态指示
+ * - 支持文档元数据显示
+ * - 提供自定义渲染
+ * - 支持动画效果
+ * - 显示耗时信息
+ * - 支持图标显示
+ */
+export declare const ThoughtChainListItem: React.FC<{
+    bubble?: {
+        isFinished?: boolean;
+        endTime?: number;
+        createAt?: number;
+    };
+    hashId: string;
+    prefixCls: string;
+    index: number;
+    thoughtChainListItem: WhiteBoxProcessInterface & {
+        icon: React.ReactNode;
+    };
+    isFinished?: boolean;
+    setDocMeta: (meta: Partial<DocMeta>) => void;
+    markdownRenderProps?: MarkdownEditorProps;
+} & ThoughtChainListProps['thoughtChainItemRender']>;