@ant-design/agentic-ui 2.0.0

package/dist/History/components/HistoryItem.d.ts

@@ -0,0 +1,92 @@
+import React from 'react';
+import { HistoryDataType } from '../types/HistoryData';
+/**
+ * 历史记录项组件的属性接口
+ */
+interface HistoryItemProps {
+    /** 历史记录数据项 */
+    item: HistoryDataType;
+    /** 当前选中的历史记录ID列表 */
+    selectedIds: string[];
+    /** 选择状态变化回调函数 */
+    onSelectionChange: (sessionId: string, checked: boolean) => void;
+    /** 点击历史记录项的回调函数 */
+    onClick: (sessionId: string, item: HistoryDataType) => void;
+    /** 删除历史记录项的回调函数 */
+    onDeleteItem?: (sessionId: string) => Promise<void>;
+    /** 收藏/取消收藏的回调函数 */
+    onFavorite?: (sessionId: string, isFavorite: boolean) => void;
+    /** 智能代理相关配置和回调 */
+    agent?: {
+        /** 是否启用智能代理功能 */
+        enabled?: boolean;
+        /** 搜索关键词回调 */
+        onSearch?: (keyword: string) => void;
+        /** 智能代理收藏回调 */
+        onFavorite?: (sessionId: string, isFavorite: boolean) => void;
+        /** 智能代理选择变化回调 */
+        onSelectionChange?: (selectedIds: string[]) => void;
+        /** 加载更多数据回调 */
+        onLoadMore?: () => void;
+        /** 是否正在加载更多数据 */
+        loadingMore?: boolean;
+    };
+    /** 额外的渲染内容，接收历史记录项作为参数 */
+    extra?: (item: HistoryDataType) => React.ReactElement;
+    /** 自定义操作区域 */
+    customOperationExtra?: React.ReactNode;
+    /** 历史记录类型：聊天记录或任务记录 */
+    type?: 'chat' | 'task';
+    /** 正在运行的记录ID列表，这些记录将显示运行图标 */
+    runningId?: string[];
+    /** 格式化Item右下角日期函数 */
+    itemDateFormatter?: (date: number | string | Date) => string;
+}
+/**
+ * 历史记录项组件 - 根据条件选择单行或多行模式
+ *
+ * 这是一个智能组件，会根据传入的属性自动选择合适的显示模式：
+ * - 单行模式：适用于简单的聊天记录，只显示标题和时间
+ * - 多行模式：适用于复杂的任务记录，显示图标、标题、描述和时间
+ *
+ * 自动选择逻辑：
+ * - 当 type 为 'task' 时，自动使用多行模式
+ * - 当同时存在 icon 和 description 时，自动使用多行模式
+ * - 其他情况使用单行模式
+ *
+ * @param props - 组件属性
+ * @param props.item - 历史记录数据项
+ * @param props.selectedIds - 当前选中的历史记录ID列表
+ * @param props.onSelectionChange - 选择状态变化回调函数
+ * @param props.onClick - 点击历史记录项的回调函数
+ * @param props.onFavorite - 收藏/取消收藏的回调函数
+ * @param props.onDeleteItem - 删除历史记录项的回调函数
+ * @param props.agent - 智能代理相关配置和回调
+ * @param props.extra - 额外的渲染内容
+ * @param props.type - 历史记录类型，影响显示模式的选择
+ *
+ * @returns 根据条件渲染的单行或多行历史记录项组件
+ *
+ * @example
+ * ```tsx
+ * // 单行模式示例
+ * <HistoryItem
+ *   item={chatItem}
+ *   selectedIds={selectedIds}
+ *   onSelectionChange={handleSelectionChange}
+ *   onClick={handleClick}
+ *   type="chat"
+ * />
+ *
+ * // 多行模式示例
+ * <HistoryItem
+ *   item={taskItem}
+ *   selectedIds={selectedIds}
+ *   onSelectionChange={handleSelectionChange}
+ *   onClick={handleClick}
+ *   type="task"
+ * />
+ * ```
+ */
+export declare const HistoryItem: React.NamedExoticComponent<HistoryItemProps>;
+export {};

package/dist/History/components/HistoryItem.js

@@ -0,0 +1,507 @@
+var __defProp = Object.defineProperty;
+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 __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/History/components/HistoryItem.tsx
+import {
+  CloseCircleFill,
+  FileCheckFill,
+  WarningFill
+} from "@sofa-design/icons";
+import { Checkbox, ConfigProvider, Divider, Tooltip } from "antd";
+import React, { useContext } from "react";
+import { I18nContext } from "../../i18n";
+import { useStyle } from "../style";
+import {
+  TaskStatusData
+} from "../types/HistoryData";
+import { formatTime } from "../utils";
+import { HistoryActionsBox } from "./HistoryActionsBox";
+import { HistoryRunningIcon } from "./HistoryRunningIcon";
+var TaskIconMap = (prefixCls, hashId) => {
+  return {
+    success: /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-task-icon ${hashId}` }, /* @__PURE__ */ React.createElement(FileCheckFill, null)),
+    error: /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-task-icon ${hashId}` }, /* @__PURE__ */ React.createElement(WarningFill, null)),
+    cancel: /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-task-icon ${hashId}` }, /* @__PURE__ */ React.createElement(CloseCircleFill, null))
+  };
+};
+var FADE_OUT_GRADIENT = "linear-gradient(to left, transparent, black 20%)";
+var getMaskStyle = (isOverflow) => ({
+  WebkitMaskImage: isOverflow ? FADE_OUT_GRADIENT : "none",
+  maskImage: isOverflow ? FADE_OUT_GRADIENT : "none"
+});
+var EXTRA_SCROLL_OFFSET = 100;
+var isValidCustomOperation = (extra) => {
+  if (!extra)
+    return false;
+  if (React.isValidElement(extra))
+    return true;
+  if (typeof extra === "string" && extra.trim())
+    return true;
+  if (Array.isArray(extra) && extra.some((item) => isValidCustomOperation(item)))
+    return true;
+  return false;
+};
+var useTextOverflow = (text) => {
+  const textRef = React.useRef(null);
+  const [isTextOverflow, setIsTextOverflow] = React.useState(false);
+  React.useLayoutEffect(() => {
+    const el = textRef.current;
+    if (!el)
+      return;
+    const isOverflow = el.scrollWidth > el.clientWidth;
+    setIsTextOverflow((prev) => prev === isOverflow ? prev : isOverflow);
+    el.setAttribute("data-overflow", String(isOverflow));
+    if (isOverflow) {
+      const scrollDistance = -(el.scrollWidth - el.clientWidth + EXTRA_SCROLL_OFFSET);
+      el.style.setProperty("--scroll-width", `${scrollDistance}px`);
+    }
+  }, [text]);
+  return { textRef, isTextOverflow };
+};
+var HistoryItemSingle = React.memo(
+  ({
+    item,
+    selectedIds,
+    onSelectionChange,
+    onClick,
+    onFavorite,
+    onDeleteItem,
+    agent,
+    extra,
+    runningId,
+    customOperationExtra,
+    itemDateFormatter
+  }) => {
+    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+    const prefixCls = getPrefixCls("agent-chat-history-menu");
+    const { hashId } = useStyle(prefixCls);
+    const { textRef, isTextOverflow } = useTextOverflow(item.sessionTitle);
+    const isRunning = React.useMemo(
+      () => runningId == null ? void 0 : runningId.includes(String(item.id || "")),
+      [runningId, item.id]
+    );
+    const isSelected = React.useMemo(
+      () => selectedIds.includes(item.sessionId),
+      [selectedIds, item.sessionId]
+    );
+    const handleClick = React.useCallback(
+      (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onClick(item.sessionId, item);
+      },
+      [onClick, item]
+    );
+    const handleCheckboxChange = React.useCallback(
+      (e) => {
+        e.stopPropagation();
+        onSelectionChange(item.sessionId, e.target.checked);
+      },
+      [onSelectionChange, item.sessionId]
+    );
+    const handleDelete = React.useCallback(() => __async(void 0, null, function* () {
+      if (onDeleteItem) {
+        yield onDeleteItem(item.sessionId);
+      }
+    }), [onDeleteItem, item.sessionId]);
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          gap: 8,
+          minWidth: 140,
+          alignItems: "center",
+          width: "100%"
+        },
+        onClick: handleClick
+      },
+      (agent == null ? void 0 : agent.onSelectionChange) && /* @__PURE__ */ React.createElement(Checkbox, { checked: isSelected, onChange: handleCheckboxChange }),
+      isRunning && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            flexShrink: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          HistoryRunningIcon,
+          {
+            width: 16,
+            height: 16,
+            animated: true,
+            duration: 2
+          }
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            flex: 1,
+            minWidth: 0,
+            gap: 8
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              flex: 1,
+              minWidth: 0,
+              overflow: "hidden"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              ref: textRef,
+              style: __spreadValues({
+                position: "relative",
+                width: "calc(100% - 10px)",
+                overflow: "hidden"
+              }, getMaskStyle(isTextOverflow))
+            },
+            /* @__PURE__ */ React.createElement(
+              Tooltip,
+              {
+                title: isTextOverflow ? item.sessionTitle : null,
+                mouseEnterDelay: 0.3,
+                open: isTextOverflow ? void 0 : false
+              },
+              /* @__PURE__ */ React.createElement(
+                "div",
+                {
+                  style: {
+                    whiteSpace: "nowrap",
+                    font: isSelected ? "var(--font-text-h6-base)" : "var(--font-text-body-base)",
+                    letterSpacing: "var(--letter-spacing-body-base, normal)",
+                    color: "var(--color-gray-text-default)"
+                  }
+                },
+                item.sessionTitle
+              )
+            )
+          )
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            flexShrink: 0,
+            display: "flex",
+            alignItems: "center",
+            gap: 4
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          HistoryActionsBox,
+          {
+            onDeleteItem: onDeleteItem ? handleDelete : void 0,
+            agent,
+            item,
+            onFavorite
+          },
+          itemDateFormatter ? itemDateFormatter(item.gmtCreate) : formatTime(item.gmtCreate)
+        ),
+        isValidCustomOperation(customOperationExtra) && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-extra-actions ${hashId}` }, customOperationExtra)
+      ),
+      extra == null ? void 0 : extra(item)
+    );
+  }
+);
+HistoryItemSingle.displayName = "HistoryItemSingle";
+var HistoryItemMulti = React.memo(
+  ({
+    item,
+    selectedIds,
+    onSelectionChange,
+    onClick,
+    onFavorite,
+    onDeleteItem,
+    agent,
+    extra,
+    type,
+    runningId,
+    customOperationExtra,
+    itemDateFormatter
+  }) => {
+    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+    const prefixCls = getPrefixCls("agent-chat-history-menu");
+    const { hashId } = useStyle(prefixCls);
+    const { textRef, isTextOverflow } = useTextOverflow(item.sessionTitle);
+    const isTask = React.useMemo(() => type === "task", [type]);
+    const { locale } = React.useContext(I18nContext);
+    const shouldShowIcon = React.useMemo(
+      () => isTask && (!!item.icon || TaskStatusData.includes(item.status)),
+      [isTask, item.icon, item.status]
+    );
+    const shouldShowDescription = React.useMemo(
+      () => isTask && !!item.description,
+      [isTask, item.description]
+    );
+    const isRunning = React.useMemo(
+      () => runningId == null ? void 0 : runningId.includes(String(item.id || "")),
+      [runningId, item.id]
+    );
+    const isSelected = React.useMemo(
+      () => selectedIds.includes(item.sessionId),
+      [selectedIds, item.sessionId]
+    );
+    const handleClick = React.useCallback(
+      (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onClick(item.sessionId, item);
+      },
+      [onClick, item]
+    );
+    const handleCheckboxChange = React.useCallback(
+      (e) => {
+        e.stopPropagation();
+        onSelectionChange(item.sessionId, e.target.checked);
+      },
+      [onSelectionChange, item.sessionId]
+    );
+    const handleDelete = React.useCallback(() => __async(void 0, null, function* () {
+      if (onDeleteItem) {
+        yield onDeleteItem(item.sessionId);
+      }
+    }), [onDeleteItem, item.sessionId]);
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          gap: 8,
+          minWidth: 140,
+          alignItems: "center",
+          width: "100%"
+        },
+        onClick: handleClick
+      },
+      (agent == null ? void 0 : agent.onSelectionChange) && /* @__PURE__ */ React.createElement(
+        Checkbox,
+        {
+          checked: isSelected,
+          onChange: handleCheckboxChange,
+          style: { marginTop: 4 }
+        }
+      ),
+      (shouldShowIcon || isRunning) && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            flexShrink: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }
+        },
+        isRunning ? /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-task-icon ${hashId}` }, /* @__PURE__ */ React.createElement(
+          HistoryRunningIcon,
+          {
+            width: 16,
+            height: 16,
+            animated: true,
+            duration: 2,
+            color: "var(--color-primary-text-secondary)"
+          }
+        )) : React.isValidElement(item.icon) ? item.icon : item.icon ? /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-task-icon ${hashId}` }, item.icon || (isTask ? TaskIconMap(prefixCls, hashId)[item.status] : "📄")) : TaskIconMap(prefixCls, hashId)[item.status]
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "flex-start",
+            flex: 1,
+            minWidth: 0,
+            gap: 8
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              flex: 1,
+              minWidth: 0,
+              overflow: "hidden",
+              display: "flex",
+              flexDirection: "column"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              ref: textRef,
+              style: __spreadValues({
+                position: "relative",
+                maxWidth: "calc(100% - 10px)",
+                overflow: "hidden"
+              }, getMaskStyle(isTextOverflow))
+            },
+            /* @__PURE__ */ React.createElement(
+              Tooltip,
+              {
+                title: isTextOverflow ? item.sessionTitle : null,
+                mouseEnterDelay: 0.3,
+                open: isTextOverflow ? void 0 : false
+              },
+              /* @__PURE__ */ React.createElement(
+                "div",
+                {
+                  style: {
+                    whiteSpace: "nowrap",
+                    font: isSelected ? "var(--font-text-h6-base)" : "var(--font-text-body-base)",
+                    color: "var(--color-gray-text-default)"
+                  }
+                },
+                item.sessionTitle
+              )
+            )
+          ),
+          shouldShowDescription && (item.description || isTask) && /* @__PURE__ */ React.createElement(
+            Tooltip,
+            {
+              open: typeof item.description === "string" && item.description.length > 20 ? void 0 : false,
+              title: item.description || (isTask ? (locale == null ? void 0 : locale["task.default"]) || "任务" : "")
+            },
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  font: "var(--font-text-body-xs)",
+                  color: "var(--color-gray-text-secondary)",
+                  letterSpacing: "var(--letter-spacing-body-xs, normal)"
+                }
+              },
+              /* @__PURE__ */ React.createElement(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  }
+                },
+                item.description || (isTask ? (locale == null ? void 0 : locale["task.default"]) || "任务" : "")
+              ),
+              /* @__PURE__ */ React.createElement(Divider, { type: "vertical" }),
+              /* @__PURE__ */ React.createElement("span", { style: { minWidth: 26 } }, itemDateFormatter ? itemDateFormatter(item.gmtCreate) : formatTime(item.gmtCreate))
+            )
+          )
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            flexShrink: 0,
+            display: "flex",
+            alignItems: "center",
+            gap: 4
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          HistoryActionsBox,
+          {
+            onDeleteItem: onDeleteItem ? handleDelete : void 0,
+            agent,
+            item,
+            onFavorite
+          },
+          itemDateFormatter ? itemDateFormatter(item.gmtCreate) : formatTime(item.gmtCreate)
+        ),
+        isValidCustomOperation(customOperationExtra) && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-extra-actions ${hashId}` }, customOperationExtra)
+      ),
+      extra == null ? void 0 : extra(item)
+    );
+  }
+);
+HistoryItemMulti.displayName = "HistoryItemMulti";
+var HistoryItem = React.memo(
+  ({
+    item,
+    selectedIds,
+    onSelectionChange,
+    onClick,
+    onFavorite,
+    onDeleteItem,
+    agent,
+    extra,
+    type,
+    runningId,
+    customOperationExtra,
+    itemDateFormatter
+  }) => {
+    const isTask = type === "task";
+    const shouldShowIcon = isTask && (!!item.icon || TaskStatusData.includes(item.status));
+    const shouldShowDescription = isTask && !!item.description;
+    const isMultiMode = isTask || shouldShowIcon && shouldShowDescription;
+    const props = {
+      item,
+      selectedIds,
+      onSelectionChange,
+      onClick,
+      onFavorite,
+      onDeleteItem,
+      agent,
+      extra,
+      type,
+      runningId,
+      customOperationExtra,
+      itemDateFormatter
+    };
+    return isMultiMode ? /* @__PURE__ */ React.createElement(HistoryItemMulti, __spreadValues({}, props)) : /* @__PURE__ */ React.createElement(HistoryItemSingle, __spreadValues({}, props));
+  }
+);
+HistoryItem.displayName = "HistoryItem";
+export {
+  HistoryItem
+};

package/dist/History/components/HistoryList.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import { HistoryListConfig } from '../types/HistoryList';
+/**
+ * 生成历史记录菜单项
+ *
+ * 该函数将历史记录数据转换为菜单项格式，支持分组、排序、自定义格式化等功能。
+ *
+ * @function
+ * @description 生成历史记录菜单项，支持分组和排序
+ * @param {HistoryListConfig} config - 配置参数
+ * @param {HistoryDataType[]} config.filteredList - 过滤后的历史记录列表
+ * @param {string[]} config.selectedIds - 选中的记录ID列表
+ * @param {Function} config.onSelectionChange - 选择状态变化回调
+ * @param {Function} config.onSelected - 选择记录回调
+ * @param {Function} [config.onDeleteItem] - 删除记录回调
+ * @param {Function} [config.onFavorite] - 收藏记录回调
+ * @param {Object} [config.agent] - Agent配置
+ * @param {Function} [config.extra] - 额外渲染函数
+ * @param {Function} [config.customDateFormatter] - 自定义日期格式化函数
+ * @param {Function} [config.groupBy] - 自定义分组函数
+ * @param {Function|boolean} [config.sessionSort] - 自定义排序函数
+ * @param {string[]} [config.runningId] - 正在运行的记录ID列表
+ *
+ * @example
+ * ```tsx
+ * const menuItems = generateHistoryItems({
+ *   filteredList: historyData,
+ *   selectedIds: selectedIds,
+ *   onSelectionChange: handleSelectionChange,
+ *   onSelected: handleSelected,
+ *   onDeleteItem: handleDelete,
+ *   onFavorite: handleFavorite,
+ *   agent: { enabled: true },
+ *   customDateFormatter: (date) => dayjs(date).format('YYYY-MM-DD'),
+ *   runningId: ['task-1', 'task-2']
+ * });
+ * ```
+ *
+ * @returns {Array} 生成的菜单项数组
+ *
+ * @remarks
+ * - 支持按日期自动分组
+ * - 支持自定义分组逻辑
+ * - 支持自定义排序规则
+ * - 支持自定义日期格式化
+ * - 集成HistoryItem组件渲染
+ * - 支持多选和收藏功能
+ * - 支持运行状态图标显示
+ */
+export declare const generateHistoryItems: ({ filteredList, selectedIds, onSelectionChange, onClick, onDeleteItem, agent, onFavorite, extra, customDateFormatter, groupBy, sessionSort, groupLabelRender, type, runningId, customOperationExtra, itemDateFormatter, }: HistoryListConfig) => {
+    key: string;
+    type: "group";
+    label: React.ReactNode;
+    children: {
+        key: string;
+        type: "item";
+        label: React.JSX.Element;
+    }[];
+}[];