@ant-design/agentic-ui 2.0.0

package/dist/Bubble/MessagesContent/MarkdownPreview.js

@@ -0,0 +1,166 @@
+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/Bubble/MessagesContent/MarkdownPreview.tsx
+import { Popover, theme } from "antd";
+import React, { useContext, useEffect, useMemo } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import {
+  MarkdownEditor,
+  parserMdToSchema
+} from "../../";
+import { BubbleConfigContext } from "../BubbleConfigProvide";
+import { MessagesContext } from "./BubbleContext";
+var MarkdownPreview = (props) => {
+  const {
+    content,
+    extra,
+    typing,
+    htmlRef,
+    fncProps,
+    docListNode,
+    isFinished,
+    beforeContent,
+    afterContent
+  } = props;
+  const MarkdownEditorRef = React.useRef(
+    void 0
+  );
+  const { hidePadding } = useContext(MessagesContext) || {};
+  const { locale, standalone } = useContext(BubbleConfigContext) || {};
+  const { token } = theme.useToken();
+  useEffect(() => {
+    var _a;
+    if (isFinished) {
+      (_a = MarkdownEditorRef.current) == null ? void 0 : _a.store.setMDContent(content);
+      return;
+    }
+  }, [isFinished]);
+  const isPaddingHidden = useMemo(() => {
+    return !!extra;
+  }, [extra, typing]);
+  useEffect(() => {
+    var _a;
+    const schema = parserMdToSchema(content).schema;
+    (_a = MarkdownEditorRef.current) == null ? void 0 : _a.store.updateNodeList(schema);
+  }, [content]);
+  const markdown = useMemo(() => {
+    var _a, _b, _c, _d;
+    const minWidth = ((_a = content == null ? void 0 : content.includes) == null ? void 0 : _a.call(content, "chartType")) ? standalone ? Math.max((((_b = htmlRef == null ? void 0 : htmlRef.current) == null ? void 0 : _b.clientWidth) || 600) - 23, 500) : Math.min((((_c = htmlRef == null ? void 0 : htmlRef.current) == null ? void 0 : _c.clientWidth) || 600) - 128, 500) : void 0;
+    return /* @__PURE__ */ React.createElement(
+      MarkdownEditor,
+      __spreadProps(__spreadValues({}, props.markdownRenderConfig || {}), {
+        fncProps,
+        editorRef: MarkdownEditorRef,
+        initValue: content,
+        toc: false,
+        width: "100%",
+        height: "auto",
+        contentStyle: props.style,
+        tableConfig: __spreadValues({
+          actions: {
+            fullScreen: "modal"
+          }
+        }, ((_d = props.markdownRenderConfig) == null ? void 0 : _d.tableConfig) || {}),
+        rootContainer: htmlRef,
+        editorStyle: {
+          fontSize: 14
+        },
+        typewriter: typing,
+        style: {
+          minWidth: minWidth ? `min(${minWidth}px,100%)` : void 0,
+          maxWidth: standalone ? "100%" : void 0,
+          padding: isPaddingHidden ? 0 : void 0,
+          margin: isPaddingHidden ? 0 : void 0
+        },
+        readonly: true
+      })
+    );
+  }, [hidePadding, typing, isPaddingHidden, content]);
+  const errorDom = /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        padding: "var(--padding-5x)",
+        background: " #FFFFFF",
+        color: token.colorError,
+        borderRadius: "16px 16px 2px 16px",
+        border: "1px solid " + token.colorErrorBorder
+      }
+    },
+    (locale == null ? void 0 : locale["error.unexpected"]) || "出现点意外情况，请重新发送"
+  );
+  if (props.placement !== "right") {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          minWidth: 0,
+          maxWidth: "100%"
+        }
+      },
+      /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: errorDom }, beforeContent, markdown, docListNode, afterContent),
+      extra
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      align: {
+        points: ["tr", "br"],
+        offset: [0, -12]
+      },
+      content: extra,
+      styles: {
+        root: {
+          padding: 0,
+          borderRadius: "var(--radius-control-sm)",
+          background: "var(--color-primary-bg-page)",
+          boxShadow: "var(--shadow-control-base)"
+        },
+        body: {
+          padding: "var(--padding-0-5x)",
+          borderRadius: "var(--radius-control-sm)",
+          background: "var(--color-primary-bg-page)",
+          boxShadow: "var(--shadow-control-base)"
+        }
+      },
+      arrow: false,
+      placement: "bottomRight"
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          minWidth: 0,
+          maxWidth: "100%"
+        }
+      },
+      /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: errorDom }, beforeContent, markdown, docListNode, afterContent)
+    )
+  );
+};
+export {
+  MarkdownPreview
+};

package/dist/Bubble/MessagesContent/VoiceButton/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { UseSpeechAdapter } from './types';
+export type { UseSpeechAdapter, UseSpeechSynthesisOptions, UseSpeechSynthesisResult, } from './types';
+export type VoiceButtonProps = {
+    /** 朗读文本 */
+    text: string;
+    /** 初始倍速，默认 1 */
+    defaultRate?: number;
+    /** 可选倍速，默认 [1.5, 1.25, 1, 0.75] */
+    rateOptions?: number[];
+    /**
+     * 外部语音适配器（可替换默认 Web Speech 实现）
+     * - 提供后组件一律视为“支持语音播报”，按钮将可用
+     * - 适配器需实现 start/stop/pause/resume 与倍速控制（必要时内部重启）
+     */
+    useSpeech?: UseSpeechAdapter;
+};
+export declare const VoiceButton: React.FC<VoiceButtonProps>;
+export default VoiceButton;

package/dist/Bubble/MessagesContent/VoiceButton/index.js

@@ -0,0 +1,130 @@
+// src/Bubble/MessagesContent/VoiceButton/index.tsx
+import { ChevronDown, Pause, Play } from "@sofa-design/icons";
+import { ConfigProvider, Dropdown, Flex, Tooltip } from "antd";
+import classNames from "classnames";
+import React, { useMemo, useState } from "react";
+import { useSpeechSynthesis } from "../../../hooks/useSpeechSynthesis";
+import VoicePlayLottie from "../../../icons/animated/VoicePlayLottie";
+import VoicingLottie from "../../../icons/animated/VoicingLottie";
+import { useStyle } from "./style";
+var VoiceButton = ({
+  text,
+  defaultRate = 1,
+  rateOptions = [1.5, 1.25, 1, 0.75],
+  useSpeech
+}) => {
+  const configContext = React.useContext(ConfigProvider.ConfigContext);
+  const prefixCls = (configContext == null ? void 0 : configContext.getPrefixCls(`agent-voice-button`)) || "agent-voice-button";
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+  const [isPlayHover, setIsPlayHover] = useState(false);
+  const [isPlayingHovered, setIsPlayingHovered] = useState(false);
+  const speechAdapter = useMemo(() => useSpeech || useSpeechSynthesis, []);
+  const { isSupported, isPlaying, rate, setRate, start, stop, pause, resume } = speechAdapter({
+    text,
+    defaultRate
+  });
+  const isFeatureSupported = useMemo(
+    () => speechAdapter !== useSpeechSynthesis || isSupported,
+    [speechAdapter, isSupported]
+  );
+  const handleClick = () => {
+    if (!isFeatureSupported || !text)
+      return;
+    if (!isPlaying) {
+      start();
+      return;
+    }
+    stop();
+  };
+  const handleStop = () => {
+    setIsPlayingHovered(false);
+    setIsPlayHover(false);
+    stop();
+  };
+  const handlePlayingMouseEnter = () => {
+    setIsPlayingHovered(true);
+    if (isPlaying) {
+      pause();
+    }
+  };
+  const handlePlayingMouseLeave = () => {
+    setIsPlayingHovered(false);
+    if (isPlaying) {
+      resume();
+    }
+  };
+  const tooltipText = useMemo(() => {
+    if (!isFeatureSupported)
+      return "当前环境不支持语音播报";
+    return isPlaying ? "停止播报" : "语音播报";
+  }, [isFeatureSupported, isPlaying]);
+  const normalizedRateOptions = useMemo(() => {
+    const set = /* @__PURE__ */ new Set([...rateOptions, 1]);
+    return Array.from(set).sort((a, b) => b - a);
+  }, [rateOptions]);
+  const menuItems = useMemo(
+    () => normalizedRateOptions.map((r) => ({
+      key: String(r),
+      label: /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-rateItem`, hashId) }, /* @__PURE__ */ React.createElement("span", null, `${r}x`), r === rate ? /* @__PURE__ */ React.createElement("span", null, "✓") : null)
+    })),
+    [normalizedRateOptions, rate, prefixCls, hashId]
+  );
+  const rateDisplay = useMemo(() => `${rate}x`, [rate]);
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 8
+        }
+      },
+      !isPlaying ? /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          onMouseEnter: () => setIsPlayHover(true),
+          onMouseLeave: () => setIsPlayHover(false),
+          onClick: handleClick,
+          className: classNames(`${prefixCls}-playBox`, hashId),
+          role: "button",
+          tabIndex: 0,
+          "aria-label": "语音播报",
+          "aria-disabled": !isFeatureSupported || !text
+        },
+        /* @__PURE__ */ React.createElement(Tooltip, { title: tooltipText, mouseEnterDelay: 0.1 }, /* @__PURE__ */ React.createElement(Flex, { align: "center", justify: "center" }, isPlayHover ? /* @__PURE__ */ React.createElement(VoicePlayLottie, { size: 16, autoplay: true, loop: false }) : /* @__PURE__ */ React.createElement(Play, { fontSize: 14 })))
+      ) : /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-playingWrap`, hashId) }, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(`${prefixCls}-playingBox`, hashId),
+          onMouseEnter: handlePlayingMouseEnter,
+          onMouseLeave: handlePlayingMouseLeave,
+          onClick: handleStop,
+          role: "button",
+          tabIndex: 0,
+          "aria-label": "停止播报"
+        },
+        /* @__PURE__ */ React.createElement(Tooltip, { title: tooltipText, mouseEnterDelay: 0.1 }, /* @__PURE__ */ React.createElement(Flex, { align: "center", justify: "center" }, isPlayingHovered ? /* @__PURE__ */ React.createElement(Pause, { fontSize: 14 }) : /* @__PURE__ */ React.createElement(VoicingLottie, { size: 16 })))
+      ), /* @__PURE__ */ React.createElement(
+        Dropdown,
+        {
+          trigger: ["click"],
+          menu: {
+            items: menuItems,
+            onClick: (info) => {
+              const v = Number(info.key);
+              if (!Number.isNaN(v))
+                setRate(v);
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-rateBox`, hashId) }, /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12 } }, rate === 1 ? "倍速" : rateDisplay), /* @__PURE__ */ React.createElement(ChevronDown, { fontSize: 14 }))
+      ))
+    )
+  );
+};
+var VoiceButton_default = VoiceButton;
+export {
+  VoiceButton,
+  VoiceButton_default as default
+};

package/dist/Bubble/MessagesContent/VoiceButton/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/Bubble/MessagesContent/VoiceButton/style.js

@@ -0,0 +1,106 @@
+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/Bubble/MessagesContent/VoiceButton/style.ts
+import {
+  resetComponent,
+  useEditorStyleRegister
+} from "../../../hooks/useStyle";
+var genStyle = (token) => {
+  const playBoxSize = 28;
+  const innerBoxSize = 24;
+  return {
+    [token.componentCls]: {
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+      "&-playBox": {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: playBoxSize,
+        // 28
+        height: playBoxSize,
+        cursor: "pointer",
+        borderRadius: 6,
+        boxSizing: "border-box"
+      },
+      "&-playBox:hover": {
+        background: "rgba(0, 28, 57, 0.0353)"
+      },
+      "&-playingWrap": {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderRadius: 6,
+        background: "#FFFFFF",
+        boxShadow: "var(--shadow-control-base)",
+        width: 86,
+        height: 28,
+        padding: "2px"
+      },
+      "&-playingBox": {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: innerBoxSize,
+        // 24
+        height: innerBoxSize,
+        // 24
+        borderRadius: 6,
+        cursor: "pointer"
+      },
+      "&-playingBox:hover": {
+        background: "rgba(0, 28, 57, 0.0353)"
+      },
+      "&-rateBox": {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "6px 8px",
+        width: 56,
+        height: innerBoxSize,
+        // 24
+        gap: 2,
+        cursor: "pointer",
+        borderRadius: 6
+      },
+      "&-rateBox:hover": {
+        background: "rgba(0, 28, 57, 0.0353)"
+      },
+      "&-rateItem": {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: 90
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("VoiceButton", (token) => {
+    const cls = prefixCls ? `.${prefixCls}` : `${token.chatCls}-voice-button`;
+    const proChatToken = __spreadProps(__spreadValues({}, token), { componentCls: cls });
+    return [resetComponent(proChatToken), genStyle(proChatToken)];
+  });
+}
+export {
+  useStyle
+};

package/dist/Bubble/MessagesContent/VoiceButton/types.d.ts

@@ -0,0 +1,42 @@
+/**
+ * 语音播报参数
+ * - 由内置 `useSpeechSynthesis` 或外部传入的 `useSpeech` 适配器消费
+ */
+export type UseSpeechSynthesisOptions = {
+    /** 朗读文本内容 */
+    text: string;
+    /** 初始倍速，默认 1（范围建议 0.5~2） */
+    defaultRate?: number;
+};
+/**
+ * 语音播报结果（适配器统一返回结构）
+ */
+export type UseSpeechSynthesisResult = {
+    /**
+     * 是否支持当前环境的语音播报
+     * - 外部提供 `useSpeech` 适配器时，可不返回或忽略该字段
+     * - 仅默认实现（Web Speech）用于环境探测
+     */
+    isSupported?: boolean;
+    /** 是否正在播放 */
+    isPlaying: boolean;
+    /** 当前倍速 */
+    rate: number;
+    /** 设置倍速（如正在播报，调用方可在内部重启以生效） */
+    setRate: (value: number) => void;
+    /** 开始播报（应为幂等：重复调用不产生副作用） */
+    start: () => void;
+    /** 停止/取消播报（应清理内部资源与回调） */
+    stop: () => void;
+    /** 暂停播报（如不支持可为 no-op） */
+    pause: () => void;
+    /** 恢复播报（如不支持可为 no-op） */
+    resume: () => void;
+};
+/**
+ * 通用语音适配器接口
+ * - 用于接入除 Web Speech 外的任意 TTS 能力
+ * - 返回结构需满足 `UseSpeechSynthesisResult`
+ * - 当提供该适配器时，`VoiceButton` 将视语音能力为“可用”，不再受浏览器支持度限制
+ */
+export type UseSpeechAdapter = (options: UseSpeechSynthesisOptions) => UseSpeechSynthesisResult;

package/dist/Bubble/MessagesContent/docInfoStyle.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ * Probubble
+ * @param prefixCls
+ * @returns
+ */
+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/Bubble/MessagesContent/docInfoStyle.js

@@ -0,0 +1,95 @@
+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/Bubble/MessagesContent/docInfoStyle.ts
+import {
+  resetComponent,
+  useEditorStyleRegister
+} from "../../hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      display: "flex",
+      gap: 4,
+      flexWrap: "wrap",
+      flexDirection: "column",
+      padding: "4px 20px 4px",
+      "&&-compact": {
+        padding: "4px 12px 4px"
+      },
+      "&-label": {
+        display: "flex",
+        color: "rgba(0,0,0,0.85)",
+        fontSize: "1em",
+        width: "100%",
+        gap: 4,
+        alignItems: "center",
+        justifyContent: "space-between"
+      },
+      "&-list": {
+        alignItems: "center",
+        flexDirection: "column",
+        borderRadius: 16,
+        display: "flex",
+        flexWrap: "nowrap",
+        gap: 4,
+        padding: "0px",
+        overflow: "hidden",
+        "&-item": {
+          display: "flex",
+          gap: 4,
+          borderRadius: 8,
+          padding: "2px 8px",
+          fontSize: 12,
+          lineHeight: "14px",
+          width: "100%",
+          justifyContent: "space-between",
+          alignItems: "center",
+          color: "rgba(0,0,0,0.65)",
+          "&:hover": {
+            backgroundColor: "rgba(0,0,0,0.02)"
+          },
+          "&-title": {
+            display: "flex",
+            maxWidth: "100%",
+            gap: 4,
+            width: "100%"
+          },
+          "&-icon": {
+            borderRadius: 4,
+            width: 16,
+            height: 16
+          }
+        }
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("DocInfo", (token) => {
+    const proChatToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [resetComponent(proChatToken), genStyle(proChatToken)];
+  });
+}
+export {
+  useStyle
+};

package/dist/Bubble/MessagesContent/icons.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+/**
+ * ReloadIcon 组件 - 重新加载图标组件
+ *
+ * 该组件显示一个重新加载图标，支持点击时的旋转动画效果。
+ * 主要用于表示刷新、重新加载或重试功能的 UI 元素。
+ *
+ * @component
+ * @description 重新加载图标组件，支持点击旋转动画
+ * @param {React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>} props - SVG 属性
+ *
+ * @example
+ * ```tsx
+ * import { ReloadIcon } from '@sofa-design/icons'
+ *
+ * // 基本用法
+ * <ReloadIcon onClick={handleReload} />
+ *
+ * // 自定义样式
+ * <ReloadIcon
+ *   onClick={handleReload}
+ *   style={{ color: 'blue' }}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的重新加载图标组件
+ *
+ * @remarks
+ * - 使用 1em x 1em 的尺寸
+ * - 支持所有标准的 SVG 属性
+ * - 使用 13x13 的 viewBox
+ * - 使用 currentColor 继承父元素颜色
+ * - 点击时自动旋转 360 度
+ * - 旋转动画持续 0.5 秒，使用 ease-in-out 缓动
+ */
+export declare const ReloadIcon: (props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) => React.JSX.Element;