@ant-design/agentic-ui 2.0.0

package/dist/components/LayoutHeader/index.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import type { LayoutHeaderProps } from './types';
+/**
+ * LayoutHeader 组件 - 布局头部组件
+ *
+ * 该组件提供了一个通用的布局头部区域，包含标题、左侧折叠按钮、分享按钮和右侧折叠按钮。
+ * 支持自定义左侧和右侧的额外内容，以及受控和非受控模式。
+ *
+ * @component
+ * @description 布局头部组件，提供完整的头部布局和交互功能
+ * @param {LayoutHeaderProps} props - 组件属性
+ *
+ * @example
+ * ```tsx
+ * import { LayoutHeader } from './LayoutHeader';
+ *
+ * // 基本用法
+ * <LayoutHeader
+ *   title="AI 助手"
+ *   onLeftCollapse={() => console.log('左侧折叠')}
+ *   onRightCollapse={() => console.log('右侧折叠')}
+ *   onShare={() => console.log('分享')}
+ * />
+ *
+ * // 受控模式 - 折叠状态
+ * <LayoutHeader
+ *   title="AI 助手"
+ *   leftCollapsed={leftCollapsed}
+ *   rightCollapsed={rightCollapsed}
+ *   onLeftCollapse={setLeftCollapsed}
+ *   onRightCollapse={setRightCollapsed}
+ * />
+ *
+ * // 非受控模式 - 默认折叠状态
+ * <LayoutHeader
+ *   title="AI 助手"
+ *   leftDefaultCollapsed={true}
+ *   rightDefaultCollapsed={false}
+ *   onLeftCollapse={(collapsed) => console.log('左侧折叠状态:', collapsed)}
+ *   onRightCollapse={(collapsed) => console.log('右侧折叠状态:', collapsed)}
+ * />
+ *
+ * // 自定义内容
+ * <LayoutHeader
+ *   title="AI 助手"
+ *   leftExtra={<div>自定义左侧内容</div>}
+ *   rightExtra={<div>自定义右侧内容</div>}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的头部组件
+ */
+declare const LayoutHeader: React.FC<LayoutHeaderProps>;
+export type { LayoutHeaderConfig, LayoutHeaderProps } from './types';
+export { LayoutHeader };

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.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const useLayoutHeaderStyle: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

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/LayoutHeader/types.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+/**
+ * 布局头部配置接口
+ */
+export interface LayoutHeaderConfig {
+    /** 标题文本 */
+    title?: string;
+    /** 是否显示分享按钮 */
+    showShare?: boolean;
+    /** 左侧是否可折叠 */
+    leftCollapsible?: boolean;
+    /** 右侧是否可折叠 */
+    rightCollapsible?: boolean;
+    /** 左侧折叠状态（受控） */
+    leftCollapsed?: boolean;
+    /** 右侧折叠状态（受控） */
+    rightCollapsed?: boolean;
+    /** 左侧默认折叠状态（非受控时使用） */
+    leftDefaultCollapsed?: boolean;
+    /** 右侧默认折叠状态（非受控时使用） */
+    rightDefaultCollapsed?: boolean;
+    /** 左侧折叠按钮点击事件 */
+    onLeftCollapse?: (collapsed: boolean) => void;
+    /** 右侧折叠按钮点击事件 */
+    onRightCollapse?: (collapsed: boolean) => void;
+    /** 分享按钮点击事件 */
+    onShare?: () => void;
+    /** 自定义左侧内容 */
+    leftExtra?: ReactNode;
+    /** 自定义右侧内容 */
+    rightExtra?: ReactNode;
+    /** 自定义类名 */
+    className?: string;
+}
+/**
+ * 布局头部组件属性接口
+ */
+export interface LayoutHeaderProps extends LayoutHeaderConfig {
+    /** 自定义类名 */
+    className?: string;
+}

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;

package/dist/components/Loading/index.js

@@ -0,0 +1,184 @@
+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/Loading/index.tsx
+import { ConfigProvider } from "antd";
+import classNames from "classnames";
+import { motion } from "framer-motion";
+import React, { useContext } from "react";
+import { useStyle } from "./style";
+var Loading = (props) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("loading-container");
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadValues({
+        className: classNames(prefixCls, hashId),
+        "data-testid": "loading-container"
+      }, props),
+      /* @__PURE__ */ React.createElement("svg", { width: "0", height: "0", style: { position: "absolute" } }, /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "gradient", x1: "60%", y1: "0%", x2: "0%", y2: "100%" }, /* @__PURE__ */ React.createElement("stop", { offset: "0%", stopColor: "#5EF050", stopOpacity: "1" }), /* @__PURE__ */ React.createElement("stop", { offset: "20%", stopColor: "#37ABFF", stopOpacity: "1" }), /* @__PURE__ */ React.createElement("stop", { offset: "55%", stopColor: "#D7B9FF", stopOpacity: "0.95" }), /* @__PURE__ */ React.createElement("stop", { offset: "75%", stopColor: "#D7B9FF", stopOpacity: "1" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "gradient1", x1: "60%", y1: "0%", x2: "0%", y2: "100%" }, /* @__PURE__ */ React.createElement("stop", { offset: "0%", stopColor: "#5EF050", stopOpacity: "1" }), /* @__PURE__ */ React.createElement("stop", { offset: "20%", stopColor: "#37ABFF", stopOpacity: "1" }), /* @__PURE__ */ React.createElement("stop", { offset: "55%", stopColor: "#D7B9FF", stopOpacity: "0.95" }), /* @__PURE__ */ React.createElement("stop", { offset: "75%", stopColor: "#D7B9FF", stopOpacity: "0.05" })))),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: __spreadProps(__spreadValues({}, props.style), {
+            width: "1em",
+            height: "1em"
+          })
+        },
+        /* @__PURE__ */ React.createElement(
+          motion.svg,
+          {
+            width: "1em",
+            height: "1em",
+            viewBox: "0 0 100 100",
+            style: { position: "absolute" },
+            animate: {
+              rotate: [-360, 0]
+              // wrapper2 逆时针旋转渐变
+            },
+            transition: {
+              duration: 3,
+              ease: "linear",
+              repeat: Infinity,
+              repeatType: "loop"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            motion.ellipse,
+            {
+              cx: "50",
+              cy: "50",
+              fill: "none",
+              stroke: "url(#gradient1)",
+              strokeWidth: "10",
+              style: { transformOrigin: "center center" },
+              animate: {
+                // 旋转动画：rotation: 300 → (300-25-90=185) → (185+180=365) → (365-25-40=300)
+                rotate: [300, 185, 365, 300],
+                // rx 动画：12 → 0 → 16 → 0 → 8 → 0 → 28 → 0 → 12
+                rx: [12, 0, 16, 0, 8, 0, 28, 0, 12],
+                ry: 32
+                // 保持固定
+              },
+              transition: {
+                rotate: {
+                  duration: 3,
+                  ease: "linear",
+                  times: [0, 0.4167, 0.7667, 1],
+                  // 1.25/3, 2.3/3, 1
+                  repeat: Infinity,
+                  repeatType: "loop"
+                },
+                rx: {
+                  duration: 3,
+                  ease: "linear",
+                  times: [
+                    0,
+                    0.15,
+                    0.2567,
+                    0.4167,
+                    0.5,
+                    0.5333,
+                    0.6667,
+                    0.7667,
+                    1
+                  ],
+                  repeat: Infinity,
+                  repeatType: "loop"
+                }
+              }
+            }
+          )
+        ),
+        /* @__PURE__ */ React.createElement(
+          motion.svg,
+          {
+            width: "1em",
+            height: "1em",
+            viewBox: "0 0 100 100",
+            style: { position: "absolute" },
+            animate: {
+              rotate: [0, -360]
+              // wrapper1 顺时针旋转渐变
+            },
+            transition: {
+              duration: 3,
+              ease: "linear",
+              repeat: Infinity,
+              repeatType: "loop"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            motion.ellipse,
+            {
+              cx: "50",
+              cy: "50",
+              fill: "none",
+              stroke: "url(#gradient)",
+              strokeWidth: "10",
+              style: { transformOrigin: "center center" },
+              animate: {
+                // 旋转动画：rotation: 30 → (30-30-30-15-90-45=-180) → (-180+30+30+30+120=30)
+                rotate: [30, -280, 30],
+                // rx 动画：32 → 0 → 8 → 0 → 24 → 0 → 16 → 0 → 30 → 32
+                rx: [32, 0, 8, 0, 24, 0, 16, 0, 30, 32],
+                ry: 32
+                // 保持固定
+              },
+              transition: {
+                rotate: {
+                  duration: 3,
+                  ease: "linear",
+                  times: [0, 0.5267, 1],
+                  // 1.58/3, 1
+                  repeat: Infinity,
+                  repeatType: "loop"
+                },
+                rx: {
+                  duration: 3,
+                  ease: "linear",
+                  times: [
+                    0,
+                    0.2567,
+                    0.3467,
+                    0.38,
+                    0.4867,
+                    0.5967,
+                    0.7067,
+                    0.8167,
+                    0.9433,
+                    1
+                  ],
+                  repeat: Infinity,
+                  repeatType: "loop"
+                }
+              }
+            }
+          )
+        )
+      )
+    )
+  );
+};
+export {
+  Loading
+};

package/dist/components/Loading/style.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function useStyle(prefixCls?: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

package/dist/components/Loading/style.js

@@ -0,0 +1,46 @@
+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/Loading/style.ts
+import {
+  useEditorStyleRegister
+} from "../../hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      position: "relative",
+      zIndex: 0
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("loading", (token) => {
+    const loadingToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genStyle(loadingToken)];
+  });
+}
+export {
+  useStyle
+};

package/dist/components/Robot/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export * from './lotties';
+export type RobotStatus = 'default' | 'running';
+export interface RobotProps {
+    /** 机器人状态 */
+    status?: RobotStatus;
+    /** 机器人大小 */
+    size?: number;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    icon?: React.ReactNode;
+}
+declare const _default: React.NamedExoticComponent<RobotProps>;
+export default _default;

package/dist/components/Robot/index.js

@@ -0,0 +1,66 @@
+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/Robot/index.tsx
+import classNames from "classnames";
+import { isString } from "lodash-es";
+import React from "react";
+import { DazingLottie, ThinkingLottie } from "./lotties";
+export * from "./lotties";
+var Robot = ({
+  icon,
+  size = 42,
+  status,
+  className,
+  style
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(className),
+      style: React.isValidElement(icon) ? __spreadValues({
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative"
+      }, style) : __spreadValues({
+        width: size,
+        height: size,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative"
+      }, style)
+    },
+    React.isValidElement(icon) ? icon : icon && isString(icon) ? /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        style: {
+          width: "100%",
+          height: "100%"
+        },
+        src: icon
+      }
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, status === "running" ? /* @__PURE__ */ React.createElement(ThinkingLottie, { size }) : /* @__PURE__ */ React.createElement(DazingLottie, { size }))
+  );
+};
+var Robot_default = React.memo(Robot);
+export {
+  Robot_default as default
+};