@ant-design/agentic-ui 2.0.0

package/dist/ThoughtChainList/style.js

@@ -0,0 +1,247 @@
+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/style.ts
+import {
+  resetComponent,
+  useEditorStyleRegister
+} from "../hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      "*": {
+        boxSizing: "border-box"
+      },
+      width: "100%",
+      borderRadius: "6px 12px 12px 12px",
+      marginBottom: 8,
+      boxShadow: "0px 1px 3px 0px rgba(25, 33, 61, 0.1)",
+      overflow: "hidden",
+      minWidth: 320,
+      position: "relative",
+      maxWidth: "100%",
+      ".empty": {
+        display: "none"
+      },
+      "&-container": {
+        width: "100%",
+        borderRadius: "6px 12px 0px 0px",
+        overflow: "hidden",
+        position: "relative",
+        transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+        "&&-loading": {
+          padding: 2,
+          "&:before": {
+            content: "''",
+            position: "absolute",
+            top: "-2px",
+            left: "-2px",
+            filter: "blur(24px)",
+            width: "calc(100% + 4px)",
+            height: "calc(100% + 4px)",
+            zIndex: 1,
+            backgroundSize: "150%",
+            backgroundPosition: "0 0",
+            backgroundImage: `conic-gradient(
+    from var(--angle) at 50% 50%,
+    rgba(46, 255, 127, 0.7) 0deg,
+    rgba(120, 133, 255, 1) 90deg,
+    rgba(255, 0, 153, 0.4) 180deg,
+    rgba(0, 221, 255, 0.62) 270deg,
+    rgba(46, 255, 127, 0.7) 360deg
+  )`,
+            animationName: "spin",
+            animationDuration: "2s",
+            animationTimingFunction: "linear",
+            animationIterationCount: "infinite"
+          }
+        }
+      },
+      "&-title": {
+        backgroundImage: "url(https://mdn.alipayobjects.com/huamei_ptjqan/afts/img/A*9adeRKwfQrEAAAAAAAAAAAAADkN6AQ/original)",
+        backgroundSize: "100% 100%",
+        height: "100%",
+        width: "100%",
+        zIndex: 2,
+        backgroundColor: "var(--color-gray-bg-card-white)",
+        fontWeight: 500,
+        color: "var(--color-gray-text-default)",
+        padding: "var(--padding-3x)",
+        overflow: "hidden",
+        display: "flex",
+        gap: 12,
+        justifyContent: "space-between",
+        alignItems: "center",
+        position: "relative",
+        fontSize: "1em",
+        borderTopLeftRadius: 6,
+        borderTopRightRadius: 12,
+        "&&-collapse": {
+          borderRadius: "6px 12px 12px 12px"
+        },
+        "&&-compact": {
+          padding: 8,
+          minHeight: 24
+        },
+        "&-progress": {
+          fontSize: "1em",
+          textWrap: "nowrap",
+          textOverflow: "ellipsis",
+          overflow: "hidden",
+          lineHeight: 1
+        },
+        "&&-extra": {
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          flex: 1,
+          fontSize: "1em",
+          justifyContent: "flex-end"
+        },
+        "> div": {
+          maxWidth: "min(860px,calc(100% - 42px))",
+          display: "flex",
+          width: "100%",
+          gap: 8,
+          alignItems: "center",
+          flex: 1
+        }
+      },
+      "&-content": {
+        backgroundColor: "var(--color-gray-bg-card-white)",
+        borderRadius: "0px 0px 12px 12px",
+        maxHeight: "566px",
+        padding: "12px 12px",
+        transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+        overflow: "auto",
+        "&&-compact": {
+          padding: 8
+        },
+        "&&-collapse": {
+          maxHeight: "0px",
+          padding: "0",
+          opacity: 0
+        },
+        "&-list": {
+          display: "flex",
+          flexDirection: "column",
+          gap: 8,
+          "&-item": {
+            lineHeight: "2em",
+            color: "var(--color-gray-a9)",
+            display: "flex",
+            transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+            fontSize: "1em",
+            width: "100%",
+            gap: 8,
+            "*:last-child": {
+              margin: 0
+            },
+            pre: {
+              backgroundColor: "var(--color-gray-control-fill-secondary)",
+              borderRadius: 12,
+              padding: "4px 8px"
+            },
+            "&:hover": {
+              [`${token.componentCls}-content-list-item-info-action`]: {
+                opacity: 1
+              }
+            },
+            '& code[class*="language-"], pre[class*="language-"]': {
+              whiteSpace: "break-spaces!important",
+              color: "rgb(102, 111, 141)",
+              fontFamily: "SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Segoe UI-MONOSPACE"
+            },
+            "&-info": {
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              gap: "6px",
+              borderRadius: "12px",
+              height: "2em",
+              fontSize: "1em",
+              wordBreak: "break-all",
+              wordWrap: "break-word",
+              maxWidth: "100%",
+              flexWrap: "wrap",
+              "&-tag": {
+                padding: "0px 6px",
+                background: "radial-gradient(22% 66% at 96% 113%, rgba(255, 255, 245, 0.52) 0%, rgba(230, 238, 255, 0) 100%), radial-gradient(14% 234% at 100% 50%, rgba(162, 255, 255, 0.28) 0%, rgba(153, 202, 255, 0.1193) 13%, rgba(229, 189, 255, 0.0826) 38%, rgba(235, 255, 245, 0) 100%), #FFFFFF",
+                border: "1px solid rgba(227, 230, 234, 0.65)",
+                lineHeight: "26px"
+              },
+              "&-tag-text": {
+                overflow: "hidden",
+                textWrap: "nowrap",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                lineHeight: "26px"
+              },
+              "&-title": {
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "flex-start",
+                gap: "4px",
+                fontSize: "1em",
+                fontWeight: "normal",
+                lineHeight: "2em",
+                flexWrap: "wrap",
+                letterSpacing: "0px",
+                color: "rgba(0, 0, 0, 0.85)"
+              },
+              "&-action": {
+                opacity: 0,
+                transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
+              }
+            },
+            "&-icon": {
+              width: "28px",
+              height: "28px",
+              minWidth: "28px",
+              overflow: "hidden",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              fontSize: "1.2em",
+              "&-success": {
+                color: "var(--color-green-text-default)"
+              },
+              "&-loading": {
+                color: "var(--color-orange-text-default)"
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("ThoughtChainList", (token) => {
+    const proChatToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [resetComponent(proChatToken), genStyle(proChatToken)];
+  });
+}
+export {
+  useStyle
+};

package/dist/ThoughtChainList/types.d.ts

@@ -0,0 +1,159 @@
+/// <reference types="react" />
+import { MarkdownEditorProps } from '../MarkdownEditor';
+export interface WhiteBoxProcessInterface {
+    /** 分类类型
+     * @example "TableSql"
+     */
+    category?: 'TableSql' | 'ToolCall' | 'RagRetrieval' | 'DeepThink' | 'WebSearch' | 'other';
+    isLoading?: boolean;
+    /** 信息描述
+     * @example "正在查询用户表数据"
+     */
+    info?: string;
+    /** 执行耗时（毫秒）
+     * @example 1500
+     */
+    costMillis?: number;
+    input?: {
+        /** SQL 查询语句
+         * @example "SELECT * FROM users WHERE id = 1"
+         */
+        sql?: string;
+        inputArgs?: {
+            /** 请求体数据
+             * @example { "name": "张三", "age": 25 }
+             */
+            requestBody?: Record<string, any>;
+            /** URL 路径参数
+             * @example { "id": "123", "type": "user" }
+             */
+            parameters?: Record<string, any>;
+            /** URL 查询参数
+             * @example { "page": 1, "size": 10 }
+             */
+            params?: Record<string, any>;
+        };
+        /** 搜索关键词列表
+         * @example ["用户管理", "账户信息"]
+         */
+        searchQueries?: string[];
+    };
+    meta?: {
+        /** 工具描述
+         * @example "查询用户信息的接口"
+         */
+        description?: string;
+        /** HTTP 请求方法
+         * @example "GET"
+         */
+        method?: string;
+        /** 工具名称
+         * @example "getUserInfo"
+         */
+        name?: string;
+        /** 接口路径
+         * @example "/api/user/info"
+         */
+        path?: string;
+        /** 请求数据
+         * @example { "userId": 123 }
+         */
+        data?: Record<string, any>;
+        /** 请求参数字符串
+         * @example "userId=123&type=full"
+         */
+        requestParams?: string;
+        /** 响应体
+         * @example "{'code': 200, 'data': {...}}"
+         */
+        responseBody?: string;
+        /** 响应状态
+         * @example "success"
+         */
+        status?: string;
+        /** 工具集唯一标识
+         * @example "tool-set-001"
+         */
+        toolSetUuid?: string;
+        /** 工具集版本号
+         * @example 1
+         */
+        toolSetVersion?: number;
+        /** 工具实例唯一标识
+         * @example "tool-instance-001"
+         */
+        uuid?: string;
+    };
+    /**
+     * 任务的 id，用于标识任务
+     */
+    runId?: string;
+    output?: {
+        type?: 'TOKEN' | 'TABLE' | 'CHUNK' | 'ERROR' | 'END' | 'RUNNING';
+        data?: string;
+        /** 错误信息
+         * @example "查询失败：数据库连接超时"
+         */
+        errorMsg?: string;
+        /** API 响应数据
+         * @example { "status": "success", "data": { "id": 1, "name": "张三" } }
+         */
+        response?: Record<string, any>;
+        /** 文档块数组
+         * @example [{ "content": "产品介绍", "docMeta": { "doc_name": "产品手册" } }]
+         */
+        chunks?: Chunk[];
+        /** 表格数据
+         * @example { name: ['Tom', 'Jim', 'Lucy'],age: ['18', '20', '22'], address: ['Shanghai', 'Beijing', 'Hangzhou'] }
+         */
+        tableData?: Record<string, any>;
+        /** 表格列名
+         * @example ["id", "name", "age"]
+         */
+        columns?: string[];
+    };
+}
+export interface Chunk {
+    docMeta: DocMeta;
+    content: string;
+    originUrl: string;
+}
+export interface DocMeta {
+    type?: string;
+    doc_id?: string;
+    upload_time?: string;
+    doc_name?: string;
+    origin_text?: string;
+    answer?: string;
+}
+export interface ThoughtChainListProps {
+    titleRender?: (props: ThoughtChainListProps, defaultDom: React.ReactNode) => React.ReactNode;
+    thoughtChainList: WhiteBoxProcessInterface[];
+    loading?: boolean;
+    bubble?: {
+        isFinished?: boolean;
+        endTime?: number;
+        createAt?: number;
+        isAborted?: boolean;
+    };
+    className?: string;
+    style?: React.CSSProperties;
+    compact?: boolean;
+    markdownRenderProps?: MarkdownEditorProps;
+    finishAutoCollapse?: boolean;
+    locale?: {
+        thinking?: string;
+        taskFinished?: string;
+        taskCost?: string;
+        taskAborted?: string;
+        totalTimeUsed?: string;
+        taskComplete?: string;
+    };
+    titleExtraRender?: (props: ThoughtChainListProps, defaultDom: React.ReactNode) => React.ReactNode;
+    thoughtChainItemRender?: {
+        titleExtraRender?: (item: WhiteBoxProcessInterface, defaultDom: React.ReactNode) => React.ReactNode;
+        titleRender?: (item: WhiteBoxProcessInterface, defaultDom: React.ReactNode) => React.ReactNode;
+        contentRender?: (item: WhiteBoxProcessInterface, defaultDom: React.ReactNode) => React.ReactNode;
+    };
+    onDocMetaClick?: (docMeta: DocMeta | null) => void;
+}

package/dist/ToolUseBar/ToolUseBarItem.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export interface ToolCall {
+    id: string;
+    toolName: React.ReactNode;
+    toolTarget: React.ReactNode;
+    time?: React.ReactNode;
+    icon?: React.ReactNode;
+    errorMessage?: string;
+    type?: 'summary' | 'normal' | string;
+    content?: React.ReactNode;
+    status?: 'idle' | 'loading' | 'success' | 'error';
+    testId?: string;
+}
+export interface ToolUseBarItemProps {
+    tool: ToolCall;
+    prefixCls: string;
+    hashId: string;
+    onClick?: (id: string) => void;
+    isActive?: boolean;
+    onActiveChange?: (id: string, active: boolean) => void;
+    isExpanded?: boolean;
+    onExpandedChange?: (id: string, expanded: boolean) => void;
+    defaultExpanded?: boolean;
+    light?: boolean;
+}
+export declare const ToolUseBarItem: React.FC<ToolUseBarItemProps>;

package/dist/ToolUseBar/ToolUseBarItem.js

@@ -0,0 +1,209 @@
+// src/ToolUseBar/ToolUseBarItem.tsx
+import { Api, ChevronUp, X } from "@sofa-design/icons";
+import classnames from "classnames";
+import { motion } from "framer-motion";
+import { useMergedState } from "rc-util";
+import React, { useMemo } from "react";
+var ToolUseBarItem = ({
+  tool,
+  prefixCls,
+  hashId,
+  onClick,
+  isActive,
+  onActiveChange,
+  isExpanded,
+  onExpandedChange,
+  defaultExpanded,
+  light = false
+}) => {
+  var _a, _b;
+  const [expanded, setExpanded] = useMergedState(defaultExpanded != null ? defaultExpanded : false, {
+    value: isExpanded,
+    onChange: onExpandedChange ? (value) => onExpandedChange(tool.id, value) : void 0
+  });
+  const errorDom = useMemo(() => {
+    return tool.status === "error" && tool.errorMessage ? /* @__PURE__ */ React.createElement("div", { className: classnames(`${prefixCls}-tool-content-error`, hashId) }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classnames(`${prefixCls}-tool-content-error-icon`, hashId)
+      },
+      /* @__PURE__ */ React.createElement(X, null)
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classnames(`${prefixCls}-tool-content-error-text`, hashId)
+      },
+      tool.errorMessage
+    )) : null;
+  }, [tool.status, tool.errorMessage, prefixCls, hashId]);
+  const contentDom = useMemo(() => {
+    return tool.content ? /* @__PURE__ */ React.createElement("div", { className: classnames(`${prefixCls}-tool-content`, hashId) }, tool.content) : null;
+  }, [tool.content, prefixCls, hashId]);
+  const showContent = useMemo(() => {
+    return !!errorDom || !!contentDom;
+  }, [errorDom, contentDom]);
+  const handleClick = (e) => {
+    onClick == null ? void 0 : onClick(tool.id);
+    if (onActiveChange && !showContent) {
+      onActiveChange(tool.id, !isActive);
+    }
+    if (!showContent)
+      return;
+    if (e.target instanceof Element) {
+      const tag = e.target.tagName.toLowerCase();
+      if (["a", "button", "input", "textarea", "select", "label"].includes(tag))
+        return;
+    }
+    setExpanded((prev) => !prev);
+  };
+  const handleExpandClick = (e) => {
+    e.stopPropagation();
+    setExpanded((prev) => !prev);
+  };
+  if (tool.type === "summary") {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classnames(`${prefixCls}-tool-container`, hashId),
+        "data-testid": "tool-user-item-tool-container "
+      },
+      contentDom
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: tool.id,
+      "data-testid": "ToolUserItem",
+      className: classnames(`${prefixCls}-tool ${hashId}`, {
+        [`${prefixCls}-tool-success`]: tool.status === "success",
+        [`${prefixCls}-tool-loading`]: tool.status === "loading",
+        [`${prefixCls}-tool-loading-light`]: tool.status === "loading" && light,
+        [`${prefixCls}-tool-error`]: tool.status === "error",
+        [`${prefixCls}-tool-idle`]: tool.status === "idle",
+        [`${prefixCls}-tool-active`]: isActive && !expanded,
+        [`${prefixCls}-tool-expanded`]: expanded,
+        [`${prefixCls}-tool-light`]: light
+      })
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classnames(`${prefixCls}-tool-bar`, hashId),
+        "data-testid": "tool-user-item-tool-bar",
+        onClick: (e) => {
+          handleClick(e);
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classnames(`${prefixCls}-tool-header`, hashId),
+          "data-testid": "tool-user-item-tool-header"
+        },
+        /* @__PURE__ */ React.createElement(
+          motion.div,
+          {
+            className: classnames(`${prefixCls}-tool-image-wrapper`, hashId, {
+              [`${prefixCls}-tool-image-wrapper-rotating`]: tool.status === "loading",
+              [`${prefixCls}-tool-image-wrapper-loading`]: tool.status === "loading"
+            }),
+            animate: tool.status === "loading" ? {
+              "--rotate": ["0deg", "360deg"]
+            } : {},
+            transition: tool.status === "loading" ? {
+              "--rotate": {
+                duration: 1,
+                repeat: Infinity,
+                ease: "linear"
+              }
+            } : {},
+            style: {
+              "--rotation": tool.status === "loading" ? "360deg" : "0deg"
+            }
+          },
+          /* @__PURE__ */ React.createElement("div", { className: classnames(`${prefixCls}-tool-image`, hashId) }, tool.icon ? tool.icon : /* @__PURE__ */ React.createElement(Api, null))
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        motion.div,
+        {
+          className: classnames(
+            `${prefixCls}-tool-header-right`,
+            {
+              [`${prefixCls}-tool-header-right-light`]: light
+            },
+            hashId
+          ),
+          animate: tool.status === "loading" ? {
+            maskImage: [
+              "linear-gradient(to right, rgba(0,0,0,0.99)  -50%, rgba(0,0,0,0.15)   -50%,rgba(0,0,0,0.99)  150%)",
+              "linear-gradient(to right, rgba(0,0,0,0.99)  -50%,  rgba(0,0,0,0.15)  150%,rgba(0,0,0,0.99)  150%)"
+            ]
+          } : {},
+          transition: tool.status === "loading" ? {
+            maskImage: {
+              duration: 1,
+              repeat: Infinity,
+              ease: "linear"
+            }
+          } : {},
+          style: {
+            maskImage: tool.status === "loading" ? "linear-gradient(to right, rgba(0,0,0,0.99) -30%, rgba(0,0,0,0.15) -50%, rgba(0,0,0,0.99) 120%)" : void 0
+          }
+        },
+        tool.toolName && /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classnames(`${prefixCls}-tool-name`, hashId, {
+              [`${prefixCls}-tool-name-loading`]: tool.status === "loading"
+            })
+          },
+          tool.toolName
+        ),
+        tool.toolTarget && /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classnames(`${prefixCls}-tool-target`, hashId, {
+              [`${prefixCls}-tool-target-loading`]: tool.status === "loading",
+              [`${prefixCls}-tool-target-light`]: light
+            }),
+            title: (_b = (_a = tool.toolTarget) == null ? void 0 : _a.toString()) != null ? _b : void 0
+          },
+          tool.toolTarget
+        )
+      ),
+      tool.time && /* @__PURE__ */ React.createElement("div", { className: classnames(`${prefixCls}-tool-time`, hashId) }, tool.time),
+      showContent && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classnames(`${prefixCls}-tool-expand`, hashId),
+          onClick: handleExpandClick
+        },
+        /* @__PURE__ */ React.createElement(
+          ChevronUp,
+          {
+            style: {
+              transition: "transform 0.3s ease-in-out",
+              transform: expanded ? "rotate(180deg)" : "rotate(0deg)"
+            }
+          }
+        )
+      )
+    ),
+    showContent && expanded ? /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classnames(`${prefixCls}-tool-container`, hashId, {
+          [`${prefixCls}-tool-container-light`]: light
+        }),
+        "data-testid": "tool-user-item-tool-container "
+      },
+      contentDom,
+      errorDom
+    ) : null
+  );
+};
+export {
+  ToolUseBarItem
+};

package/dist/ToolUseBar/ToolUseBarThink.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+export interface ToolUseBarThinkProps {
+    toolName: React.ReactNode;
+    toolTarget?: React.ReactNode;
+    time?: React.ReactNode;
+    icon?: React.ReactNode;
+    thinkContent?: React.ReactNode;
+    testId?: string;
+    status?: 'loading' | 'success' | 'error';
+    expanded?: boolean;
+    light?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    floatingExpanded?: boolean;
+    defaultFloatingExpanded?: boolean;
+    onFloatingExpandedChange?: (floatingExpanded: boolean) => void;
+    classNames?: {
+        root?: string;
+        bar?: string;
+        header?: string;
+        headerLeft?: string;
+        imageWrapper?: string;
+        image?: string;
+        name?: string;
+        target?: string;
+        time?: string;
+        expand?: string;
+        container?: string;
+        content?: string;
+        floatingExpand?: string;
+    };
+    styles?: {
+        root?: React.CSSProperties;
+        bar?: React.CSSProperties;
+        header?: React.CSSProperties;
+        headerLeft?: React.CSSProperties;
+        imageWrapper?: React.CSSProperties;
+        image?: React.CSSProperties;
+        name?: React.CSSProperties;
+        target?: React.CSSProperties;
+        time?: React.CSSProperties;
+        expand?: React.CSSProperties;
+        container?: React.CSSProperties;
+        content?: React.CSSProperties;
+        floatingExpand?: React.CSSProperties;
+    };
+}
+export declare const ToolUseBarThink: React.FC<ToolUseBarThinkProps>;