@ant-design/agentic-ui 2.0.10 → 2.0.13

package/dist/Components/Button/ToggleButton/style.js

@@ -0,0 +1,277 @@
+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/Components/Button/ToggleButton/style.ts
+import {
+  useEditorStyleRegister
+} from "../../../Hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      // 基础按钮样式
+      borderRadius: "200px",
+      boxSizing: "border-box",
+      border: "1px solid var(--color-gray-border-light)",
+      height: "32px",
+      display: "flex",
+      alignItems: "center",
+      padding: "5px 12px",
+      cursor: "pointer",
+      fontFamily: "var(--font-family-base)",
+      fontSize: "var(--font-size-base, 14px)",
+      fontWeight: "var(--font-weight-medium, 500)",
+      lineHeight: "var(--line-height-base, 1.5)",
+      textAlign: "center",
+      textDecoration: "none",
+      transition: "all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)",
+      userSelect: "none",
+      outline: "none",
+      position: "relative",
+      overflow: "hidden",
+      backgroundColor: "transparent",
+      // Hover 状态
+      "&:hover:not(&-disabled)": {
+        background: "var(--color-gray-control-fill-hover)",
+        boxSizing: "border-box",
+        border: "1px solid var(--color-gray-border-light)"
+      },
+      // Active 状态
+      "&:active:not(&-disabled)": {
+        background: "var(--color-primary-bg-card-light)",
+        boxSizing: "border-box",
+        border: "1px solid var(--color-primary-border-light)"
+      },
+      // Active 属性状态
+      "&-active": {
+        background: "var(--color-primary-bg-card-light)",
+        boxSizing: "border-box",
+        border: "1px solid var(--color-primary-border-light)",
+        // Active 状态下的文字颜色
+        [`${token.componentCls}-text`]: {
+          color: "var(--color-blue-text-secondary)"
+        }
+      },
+      // 尺寸变体
+      "&-small": {
+        height: "var(--height-control-small, 28px)",
+        padding: "0 var(--padding-control-small, 12px)",
+        fontSize: "var(--font-size-small, 12px)",
+        minWidth: "var(--min-width-control-small, 60px)"
+      },
+      "&-large": {
+        height: "var(--height-control-large, 40px)",
+        padding: "0 var(--padding-control-large, 16px)",
+        fontSize: "var(--font-size-base, 14px)",
+        minWidth: "var(--min-width-control-large, 80px)"
+      },
+      // Primary 变体 - 主要按钮
+      "&-primary": {
+        backgroundColor: "var(--color-blue-primary, #1677ff)",
+        color: "var(--color-white, #ffffff)",
+        boxShadow: "var(--shadow-control-base, 0 1px 2px rgba(0, 0, 0, 0.1))",
+        "&:hover:not(&-disabled)": {
+          backgroundColor: "var(--color-blue-primary-hover, #4096ff)",
+          boxShadow: "var(--shadow-control-hover, 0 2px 4px rgba(0, 0, 0, 0.15))",
+          transform: "translateY(-1px)"
+        },
+        "&:active:not(&-disabled)": {
+          backgroundColor: "var(--color-blue-primary-active, #0958d9)",
+          boxShadow: "var(--shadow-control-active, 0 1px 2px rgba(0, 0, 0, 0.2))",
+          transform: "translateY(0)"
+        },
+        "&:focus-visible": {
+          boxShadow: "0 0 0 2px var(--color-blue-primary-light, #d6eeff)"
+        }
+      },
+      // Secondary 变体 - 次要按钮
+      "&-secondary": {
+        backgroundColor: "var(--color-gray-bg-card-white, #ffffff)",
+        color: "var(--color-gray-text-default, #343a45)",
+        border: "1px solid var(--color-gray-border, #e6ecf4)",
+        boxShadow: "var(--shadow-control-base, 0 1px 2px rgba(0, 0, 0, 0.1))",
+        "&:hover:not(&-disabled)": {
+          backgroundColor: "var(--color-gray-bg-card-light, #fbfcfd)",
+          borderColor: "var(--color-blue-primary, #1677ff)",
+          color: "var(--color-blue-primary, #1677ff)",
+          boxShadow: "var(--shadow-control-hover, 0 2px 4px rgba(0, 0, 0, 0.15))"
+        },
+        "&:active:not(&-disabled)": {
+          backgroundColor: "var(--color-gray-control-fill-active, #f0f0f0)",
+          borderColor: "var(--color-blue-primary-active, #0958d9)",
+          color: "var(--color-blue-primary-active, #0958d9)"
+        },
+        "&:focus-visible": {
+          boxShadow: "0 0 0 2px var(--color-blue-primary-light, #d6eeff)"
+        }
+      },
+      // Ghost 变体 - 幽灵按钮
+      "&-ghost": {
+        backgroundColor: "transparent",
+        color: "var(--color-gray-text-default, #343a45)",
+        border: "1px solid transparent",
+        "&:hover:not(&-disabled)": {
+          backgroundColor: "var(--color-gray-control-fill-hover, #f5f5f5)",
+          color: "var(--color-blue-primary, #1677ff)"
+        },
+        "&:active:not(&-disabled)": {
+          backgroundColor: "var(--color-gray-control-fill-active, #e6f7ff)",
+          color: "var(--color-blue-primary-active, #0958d9)"
+        },
+        "&:focus-visible": {
+          backgroundColor: "var(--color-gray-control-fill-hover, #f5f5f5)",
+          boxShadow: "0 0 0 2px var(--color-blue-primary-light, #d6eeff)"
+        }
+      },
+      // No-border 变体 - 无边框按钮
+      "&-no-border": {
+        backgroundColor: "transparent",
+        color: "var(--color-gray-text-default, #343a45)",
+        border: "none",
+        boxShadow: "none",
+        "&:hover:not(&-disabled)": {
+          backgroundColor: "var(--color-gray-control-fill-hover, #f5f5f5)",
+          color: "var(--color-blue-primary, #1677ff)"
+        },
+        "&:active:not(&-disabled)": {
+          backgroundColor: "var(--color-gray-control-fill-active, #e6f7ff)",
+          color: "var(--color-blue-primary-active, #0958d9)"
+        },
+        "&:focus-visible": {
+          backgroundColor: "var(--color-gray-control-fill-hover, #f5f5f5)",
+          boxShadow: "0 0 0 2px var(--color-blue-primary-light, #d6eeff)"
+        }
+      },
+      // Float 变体 - 浮动按钮
+      "&-float": {
+        backgroundColor: "var(--color-blue-primary, #1677ff)",
+        color: "var(--color-white, #ffffff)",
+        borderRadius: "50%",
+        width: "var(--height-control-large, 40px)",
+        height: "var(--height-control-large, 40px)",
+        padding: 0,
+        minWidth: "auto",
+        boxShadow: "var(--shadow-float, 0 4px 12px rgba(22, 119, 255, 0.4))",
+        "&:hover:not(&-disabled)": {
+          backgroundColor: "var(--color-blue-primary-hover, #4096ff)",
+          boxShadow: "var(--shadow-float-hover, 0 6px 16px rgba(22, 119, 255, 0.5))",
+          transform: "translateY(-2px) scale(1.05)"
+        },
+        "&:active:not(&-disabled)": {
+          backgroundColor: "var(--color-blue-primary-active, #0958d9)",
+          boxShadow: "var(--shadow-float-active, 0 2px 8px rgba(22, 119, 255, 0.3))",
+          transform: "translateY(0) scale(1)"
+        },
+        "&:focus-visible": {
+          boxShadow: "0 0 0 2px var(--color-blue-primary-light, #d6eeff)"
+        }
+      },
+      // CTA 变体 - 行动号召按钮
+      "&-cta": {
+        backgroundColor: "var(--color-green-success, #52c41a)",
+        color: "var(--color-white, #ffffff)",
+        fontWeight: "var(--font-weight-semibold, 600)",
+        boxShadow: "var(--shadow-cta, 0 2px 8px rgba(82, 196, 26, 0.3))",
+        position: "relative",
+        overflow: "hidden",
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          top: 0,
+          left: "-100%",
+          width: "100%",
+          height: "100%",
+          background: "linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent)",
+          transition: "left 0.5s cubic-bezier(0.645, 0.045, 0.355, 1)"
+        },
+        "&:hover:not(&-disabled)": {
+          backgroundColor: "var(--color-green-success-hover, #73d13d)",
+          boxShadow: "var(--shadow-cta-hover, 0 4px 12px rgba(82, 196, 26, 0.4))",
+          transform: "translateY(-1px)",
+          "&::before": {
+            left: "100%"
+          }
+        },
+        "&:active:not(&-disabled)": {
+          backgroundColor: "var(--color-green-success-active, #389e0d)",
+          boxShadow: "var(--shadow-cta-active, 0 1px 4px rgba(82, 196, 26, 0.2))",
+          transform: "translateY(0)"
+        },
+        "&:focus-visible": {
+          boxShadow: "0 0 0 2px var(--color-green-success-light, #f6ffed)"
+        }
+      },
+      // 禁用状态
+      "&-disabled": {
+        opacity: 0.5,
+        cursor: "not-allowed",
+        pointerEvents: "none",
+        transform: "none !important",
+        boxShadow: "none !important",
+        "&:hover": {
+          transform: "none !important",
+          boxShadow: "none !important"
+        },
+        "&:active": {
+          transform: "none !important",
+          boxShadow: "none !important"
+        }
+      },
+      // 图标样式
+      "&-icon": {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "inherit",
+        lineHeight: 1,
+        marginRight: "4px"
+      },
+      // 文字样式
+      "&-text": {
+        display: "inline-block",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        marginRight: "8px",
+        font: "var(--font-text-body-base)",
+        letterSpacing: "var(--letter-spacing-body-base, normal)",
+        color: "var(--color-gray-text-default)"
+      },
+      // 触发图标样式
+      "&-trigger-icon": {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "inherit",
+        lineHeight: 1
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("toggle-button", (token) => {
+    const buttonToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genStyle(buttonToken)];
+  });
+}
+export {
+  useStyle
+};

package/dist/Components/Button/index.js

@@ -0,0 +1,4 @@
+// src/Components/Button/index.ts
+export * from "./IconButton";
+export * from "./SwitchButton";
+export * from "./ToggleButton";

package/dist/Components/ImageList.js

@@ -0,0 +1,138 @@
+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;
+};
+
+// src/Components/ImageList.tsx
+import React from "react";
+var VisualList = ({
+  className,
+  style,
+  data = [],
+  filter = () => true,
+  emptyRender,
+  renderItem,
+  loading = false,
+  loadingRender,
+  itemStyle,
+  imageStyle,
+  linkStyle
+}) => {
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className,
+        style: __spreadValues({
+          display: "flex",
+          listStyle: "none",
+          margin: 0,
+          padding: 0,
+          flexFlow: "wrap"
+        }, style)
+      },
+      loadingRender ? loadingRender() : /* @__PURE__ */ React.createElement("span", null, "加载中...")
+    );
+  }
+  const displayList = data.filter(filter);
+  if (displayList.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className,
+        style: __spreadValues({
+          display: "flex",
+          listStyle: "none",
+          margin: 0,
+          padding: 0
+        }, style)
+      },
+      emptyRender ? emptyRender() : /* @__PURE__ */ React.createElement("span", null, "暂无数据")
+    );
+  }
+  const defaultRenderItem = (item, index) => /* @__PURE__ */ React.createElement(
+    "li",
+    {
+      key: item.id || index,
+      style: __spreadValues({
+        marginRight: 8,
+        marginBottom: 8,
+        borderRadius: 8,
+        boxSizing: "border-box",
+        overflow: "hidden",
+        border: "1px solid #ddd",
+        display: "flex"
+      }, itemStyle)
+    },
+    item.href ? /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        href: item.href,
+        style: __spreadValues({
+          display: "flex",
+          textDecoration: "none"
+        }, linkStyle)
+      },
+      /* @__PURE__ */ React.createElement(
+        "img",
+        {
+          width: 40,
+          height: 40,
+          src: item.src,
+          alt: item.alt || item.title || "",
+          title: item.title,
+          style: __spreadValues({
+            objectFit: "cover"
+          }, imageStyle)
+        }
+      )
+    ) : /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        width: 40,
+        height: 40,
+        src: item.src,
+        alt: item.alt || item.title || "",
+        title: item.title,
+        style: __spreadValues({
+          objectFit: "cover"
+        }, imageStyle)
+      }
+    )
+  );
+  return /* @__PURE__ */ React.createElement(
+    "ul",
+    {
+      className,
+      style: __spreadValues({
+        display: "flex",
+        boxSizing: "border-box",
+        listStyle: "none",
+        margin: 0,
+        padding: 0,
+        flexFlow: "wrap"
+      }, style)
+    },
+    displayList.map((item, index) => {
+      if (renderItem) {
+        return renderItem(item, index);
+      }
+      return defaultRenderItem(item, index);
+    })
+  );
+};
+export {
+  VisualList
+};

package/dist/Components/LayoutHeader/index.js

@@ -0,0 +1,94 @@
+// src/Components/LayoutHeader/index.tsx
+import {
+  AlignLeft,
+  LaptopMinimal,
+  SquareArrowOutUpRight
+} from "@sofa-design/icons";
+import { Button, ConfigProvider } from "antd";
+import classNames from "classnames";
+import { useMergedState } from "rc-util";
+import React, { useContext } from "react";
+import { I18nContext } from "../../I18n";
+import { ActionIconBox } from "../ActionIconBox";
+import { useLayoutHeaderStyle } from "./style";
+var LayoutHeader = ({
+  title = "AI 助手",
+  showShare = true,
+  leftCollapsible = true,
+  rightCollapsible = false,
+  leftCollapsed: controlledLeftCollapsed,
+  rightCollapsed: controlledRightCollapsed,
+  leftDefaultCollapsed = false,
+  rightDefaultCollapsed = false,
+  onLeftCollapse,
+  onRightCollapse,
+  onShare,
+  leftExtra,
+  rightExtra,
+  className
+}) => {
+  const { locale } = useContext(I18nContext);
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("layout-header");
+  const { wrapSSR, hashId } = useLayoutHeaderStyle(prefixCls);
+  const [leftCollapsed, setLeftCollapsed] = useMergedState(
+    leftDefaultCollapsed,
+    {
+      value: controlledLeftCollapsed,
+      onChange: onLeftCollapse
+    }
+  );
+  const [rightCollapsed, setRightCollapsed] = useMergedState(
+    rightDefaultCollapsed,
+    {
+      value: controlledRightCollapsed,
+      onChange: onRightCollapse
+    }
+  );
+  const handleLeftCollapse = () => {
+    if (leftCollapsible) {
+      setLeftCollapsed(!leftCollapsed);
+    }
+  };
+  const handleRightCollapse = () => {
+    if (rightCollapsible) {
+      setRightCollapsed(!rightCollapsed);
+    }
+  };
+  const handleShare = () => {
+    onShare == null ? void 0 : onShare();
+  };
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement("div", { className: classNames(prefixCls, hashId, className) }, /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-left`, hashId) }, leftCollapsible && /* @__PURE__ */ React.createElement(
+      ActionIconBox,
+      {
+        onClick: handleLeftCollapse,
+        "aria-label": (locale == null ? void 0 : locale["chatFlow.collapseLeft"]) || "折叠左侧边栏",
+        title: (locale == null ? void 0 : locale["chatFlow.collapseLeft"]) || "折叠左侧边栏"
+      },
+      /* @__PURE__ */ React.createElement(AlignLeft, null)
+    ), /* @__PURE__ */ React.createElement("h1", { className: classNames(`${prefixCls}-left-title`, hashId) }, title), leftExtra), /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-right`, hashId) }, showShare && /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        size: "small",
+        className: classNames(`${prefixCls}-right-share-btn`, hashId),
+        onClick: handleShare,
+        "aria-label": (locale == null ? void 0 : locale["chatFlow.shareDialog"]) || "分享对话",
+        icon: /* @__PURE__ */ React.createElement(SquareArrowOutUpRight, null),
+        color: "default"
+      },
+      (locale == null ? void 0 : locale["chatFlow.share"]) || "分享"
+    ), rightCollapsible && /* @__PURE__ */ React.createElement(
+      ActionIconBox,
+      {
+        onClick: handleRightCollapse,
+        "aria-label": (locale == null ? void 0 : locale["chatFlow.collapseRight"]) || "折叠右侧边栏",
+        title: (locale == null ? void 0 : locale["chatFlow.collapseRight"]) || "折叠右侧边栏"
+      },
+      /* @__PURE__ */ React.createElement(LaptopMinimal, null)
+    ), rightExtra))
+  );
+};
+export {
+  LayoutHeader
+};

package/dist/Components/LayoutHeader/style.js

@@ -0,0 +1,70 @@
+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/Components/LayoutHeader/style.ts
+import {
+  useEditorStyleRegister
+} from "../../Hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "0 var(--padding-4x)",
+      backgroundColor: "var(--color-gray-bg-page-light)",
+      minHeight: "48px",
+      flexShrink: 0,
+      zIndex: 10,
+      borderTopLeftRadius: "inherit",
+      borderTopRightRadius: "inherit",
+      // 左侧区域样式
+      [`${token.componentCls}-left`]: {
+        display: "flex",
+        alignItems: "center",
+        gap: "var(--margin-2x)",
+        "&-title": {
+          fontSize: "var(--font-size-lg)",
+          fontWeight: 600,
+          color: "var(--color-gray-text-default)",
+          margin: 0,
+          lineHeight: "1.4"
+        }
+      },
+      // 右侧区域样式
+      [`${token.componentCls}-right`]: {
+        display: "flex",
+        alignItems: "center",
+        gap: "var(--margin-2x)"
+      }
+    }
+  };
+};
+var useLayoutHeaderStyle = (prefixCls) => {
+  return useEditorStyleRegister("layout-header", (token) => {
+    const layoutHeaderToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genStyle(layoutHeaderToken)];
+  });
+};
+export {
+  useLayoutHeaderStyle
+};

package/dist/Components/Loading/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+/**
+ * Loading 组件 - 加载动画组件
+ *
+ * 该组件提供一个简单的加载动画效果，包含两个旋转的椭圆形。
+ * 主要用于在数据加载或处理过程中提供视觉反馈。
+ *
+ * @component
+ * @description 加载动画组件，显示两个旋转变形的椭圆
+ * @example
+ * ```tsx
+ * import { Loading } from './Components/Loading';
+ *
+ * function App() {
+ *   return (
+ *     <div>
+ *       <Loading />
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的加载动画组件
+ */
+export declare const Loading: (props: React.SVGProps<HTMLDivElement>) => React.JSX.Element;