@ant-design/agentic-ui 2.0.0

package/dist/Bubble/type.d.ts

@@ -0,0 +1,502 @@
+import { TooltipProps } from 'antd';
+import { ReactNode } from 'react';
+import { MarkdownEditorProps } from '../MarkdownEditor/types';
+import { AttachmentFile } from '../MarkdownInputField/AttachmentButton/types';
+import { WhiteBoxProcessInterface } from '../ThoughtChainList/types';
+import type { UseSpeechAdapter } from './MessagesContent/VoiceButton';
+import { BubbleExtraProps } from './types/BubbleExtra';
+import { DocInfoListProps } from './types/DocInfo';
+/**
+ * 基础样式属性
+ */
+export interface BubbleStyleProps {
+    /**
+     * 自定义 CSS 类名
+     */
+    className?: string;
+    /**
+     * 自定义 CSS 样式
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * 气泡项样式属性
+ */
+export interface BubbleItemStyleProps extends BubbleStyleProps {
+    styles?: {
+        /**
+         * 气泡根容器的自定义样式
+         */
+        bubbleStyle?: React.CSSProperties;
+        /**
+         * 头像标题区域的自定义样式
+         */
+        bubbleAvatarTitleStyle?: React.CSSProperties;
+        /**
+         * 主容器的自定义样式
+         */
+        bubbleContainerStyle?: React.CSSProperties;
+        /**
+         * 加载图标的自定义样式
+         */
+        bubbleLoadingIconStyle?: React.CSSProperties;
+        /**
+         * 名称区域的自定义样式
+         */
+        bubbleNameStyle?: React.CSSProperties;
+        /**
+         * 内容的自定义样式
+         */
+        bubbleListItemContentStyle?: React.CSSProperties;
+        /**
+         * 内容前置区域的自定义样式
+         */
+        bubbleListItemBeforeStyle?: React.CSSProperties;
+        /**
+         * 内容后置区域的自定义样式
+         */
+        bubbleListItemAfterStyle?: React.CSSProperties;
+        /**
+         * 标题的自定义样式
+         */
+        bubbleListItemTitleStyle?: React.CSSProperties;
+        /**
+         * 头像的自定义样式
+         */
+        bubbleListItemAvatarStyle?: React.CSSProperties;
+        /**
+         * 额外内容的自定义样式
+         */
+        bubbleListItemExtraStyle?: React.CSSProperties;
+    };
+    classNames?: {
+        /**
+         * 气泡根容器的自定义类名
+         */
+        bubbleClassName?: string;
+        /**
+         * 头像标题区域的自定义类名
+         */
+        bubbleAvatarTitleClassName?: string;
+        /**
+         * 主容器的自定义类名
+         */
+        bubbleContainerClassName?: string;
+        /**
+         * 加载图标的自定义类名
+         */
+        bubbleLoadingIconClassName?: string;
+        /**
+         * 名称区域的自定义类名
+         */
+        bubbleNameClassName?: string;
+        /**
+         * 内容的自定义类名
+         */
+        bubbleListItemContentClassName?: string;
+        /**
+         * 内容前置区域的自定义类名
+         */
+        bubbleListItemBeforeClassName?: string;
+        /**
+         * 内容后置区域的自定义类名
+         */
+        bubbleListItemAfterClassName?: string;
+        /**
+         * 标题的自定义类名
+         */
+        bubbleListItemTitleClassName?: string;
+        /**
+         * 头像的自定义类名
+         */
+        bubbleListItemAvatarClassName?: string;
+        bubbleListItemExtraClassName?: string;
+    };
+}
+/**
+ * 气泡元数据
+ */
+export interface BubbleMetaData {
+    /**
+     * 角色头像
+     */
+    avatar?: string;
+    /**
+     * 背景色
+     */
+    backgroundColor?: string;
+    /**
+     * 名称
+     */
+    title?: string;
+    /**
+     * 其他元数据
+     */
+    [key: string]: any;
+}
+/**
+ * 消息数据
+ */
+export interface MessageBubbleData<T extends Record<string, any> = Record<string, any>> {
+    /**
+     * @title 内容
+     * @description 消息的显示内容，可以是React元素
+     * @example <div>Hello, world!</div>
+     */
+    content?: React.ReactNode;
+    /**
+     * @title 原始内容
+     * @description 消息的原始文本内容，通常用于存储未经处理的文本
+     * @example "Hello, world!"
+     */
+    originContent?: string;
+    /**
+     * @title 错误信息
+     * @description 消息处理过程中可能出现的错误
+     * @example { code: "ERROR_CODE", message: "发生了错误" }
+     */
+    error?: any;
+    /**
+     * @title 模型标识
+     * @description 生成此消息的AI模型标识符
+     * @example "gpt-4"
+     */
+    model?: string;
+    /**
+     * @title 名称
+     * @description 消息发送者的名称
+     * @example "用户小明"
+     */
+    name?: string;
+    /**
+     * @title 父消息ID
+     * @description 当前消息回复的消息ID，用于构建消息树结构
+     * @example "msg_123456"
+     */
+    parentId?: string;
+    /**
+     * @title 角色
+     * @description 消息发送者的角色，如用户、助手等
+     * @example "user" 或 "assistant"
+     */
+    role: 'user' | 'system' | 'assistant' | 'agent' | 'bot';
+    /**
+     * @title 创建时间
+     * @description 消息创建的时间戳（毫秒）
+     * @example 1625097600000
+     */
+    createAt: number;
+    /**
+     * @title 消息结束时间
+     * @description 消息生成或接收完成的时间戳（毫秒）
+     * @example 1625097605000
+     */
+    endTime?: number;
+    /**
+     * @title 唯一标识
+     * @description 消息的唯一标识符
+     * @example "msg_abcdef123456"
+     */
+    id: string;
+    /**
+     * @title 修改时间
+     * @description 消息最后修改的时间戳（毫秒）
+     * @example 1625097610000
+     */
+    updateAt: number;
+    /**
+     * @title 附加数据
+     * @description 消息的额外信息，可以包含多种自定义数据
+     */
+    extra?: T & {
+        /**
+         * @title 白盒处理过程
+         * @description 模型处理过程的可解释性数据
+         */
+        white_box_process?: WhiteBoxProcessInterface[] | WhiteBoxProcessInterface;
+        /**
+         * @title 聊天跟踪ID
+         * @description 用于追踪整个对话流程的ID
+         * @example "trace_xyz789"
+         */
+        chat_trace_id?: string;
+        /**
+         * @title 会话ID
+         * @description 当前会话的唯一标识符
+         * @example "session_123abc"
+         */
+        sessionId?: string;
+        /**
+         * @title 消息UUID
+         * @description 消息的全局唯一标识符
+         * @example "uuid_456def"
+         */
+        uuid?: string;
+        /**
+         * @title 客户端ID
+         * @description 问答对的客户端标识符
+         * @example "client_789ghi"
+         */
+        clientId?: string;
+        /**
+         * @title 标签列表
+         * @description 消息的分类标签
+         * @example ["NORMAL", "ABOUT_YOU"]
+         */
+        tags?: ('REJECT_TO_ANSWER' | 'ABOUT_YOU' | 'NORMAL')[];
+    };
+    /**
+     * @title 模型元数据
+     * @description 有关生成此消息的模型的额外信息
+     * @example { model: "gpt-4", temperature: 0.7, tokens: { total: 150, prompt: 50, completion: 100 } }
+     */
+    meta?: BubbleMetaData;
+    /**
+     * @title 是否完成
+     * @description 标识消息是否已完全生成或接收完成
+     * @example true
+     */
+    isFinished?: boolean;
+    /**
+     * @title 是否被终止
+     * @description 标识消息生成是否被中途终止
+     * @example false
+     */
+    isAborted?: boolean;
+    /**
+     * @title 用户反馈
+     * @description 用户对消息的评价反馈
+     * - thumbsUp: 点赞，表示满意
+     * - thumbsDown: 点踩，表示不满意
+     * - none: 无反馈
+     * @example "thumbsUp"
+     */
+    feedback?: 'thumbsUp' | 'thumbsDown' | 'none';
+    /**
+     * @title 是否重试
+     * @description 标识当前消息是否是之前消息的重试
+     * @example false
+     */
+    isRetry?: boolean;
+    /**
+     * @title 文件映射
+     * @description 消息相关的附件文件映射
+     * @example new Map([["file1", { name: "示例.pdf", size: 1024, type: "application/pdf" }]])
+     */
+    fileMap?: Map<string, AttachmentFile>;
+    /**
+     * @deprecated 已废弃，请使用 isLast 代替
+     * @description 已废弃，请使用 isLast 代替
+     * @example true
+     */
+    isLatest?: boolean;
+    /**
+     * @title 是否为最后一个节点
+     * @description 用于标识当前消息是否为对话中的最新消息
+     * @default false
+     * @optional
+     */
+    isLast?: boolean;
+}
+/**
+ * 自定义配置
+ */
+export interface CustomConfig {
+    /**
+     * 提示框配置
+     */
+    TooltipProps?: TooltipProps;
+    /**
+     * 弹出框配置
+     */
+    PopoverProps?: {
+        titleStyle?: React.CSSProperties;
+        contentStyle?: React.CSSProperties;
+    };
+}
+export type WithFalse<T> = T | false;
+/**
+ * 气泡渲染配置
+ */
+export interface BubbleRenderConfig<T = Record<string, any>> {
+    titleRender?: WithFalse<(props: BubbleProps<T>, defaultDom: ReactNode) => ReactNode>;
+    contentRender?: WithFalse<(props: BubbleProps<T>, defaultDom: ReactNode) => ReactNode>;
+    contentAfterRender?: WithFalse<(props: BubbleProps<T>, defaultDom: ReactNode) => ReactNode>;
+    contentBeforeRender?: WithFalse<(props: BubbleProps<T>, defaultDom: ReactNode) => ReactNode>;
+    /**
+     * afterContent 的 render 方法
+     * @description 用于渲染在 content 后面的内容
+     */
+    afterMessageRender?: WithFalse<(props: BubbleProps<T>, defaultDom: ReactNode) => ReactNode>;
+    /**
+     * beforeContent 的 render 方法
+     * @description 用于渲染在 content 前面的内容
+     */
+    beforeMessageRender?: WithFalse<(props: BubbleProps<T>, defaultDom: ReactNode) => ReactNode>;
+    avatarRender?: WithFalse<(props: BubbleProps<T>, defaultDom: ReactNode) => ReactNode>;
+    customConfig?: CustomConfig;
+    render?: WithFalse<(props: BubbleProps<T>, domsMap: {
+        avatar: ReactNode;
+        title: ReactNode;
+        header: ReactNode;
+        messageContent: ReactNode;
+        itemDom: ReactNode;
+        extra: ReactNode;
+    }, defaultDom: ReactNode) => ReactNode>;
+    extraRender?: BubbleExtraProps['render'];
+    extraRightRender?: BubbleExtraProps['rightRender'];
+}
+/**
+ * 气泡组件属性
+ */
+export interface BubbleProps<T = Record<string, any>> extends BubbleItemStyleProps {
+    time?: number;
+    /**
+     * 头像元数据
+     */
+    avatar?: BubbleMetaData;
+    /**
+     * 是否启用纯净模式
+     */
+    pure?: boolean;
+    /**
+     * 渲染配置
+     */
+    bubbleRenderConfig?: BubbleRenderConfig<T>;
+    /**
+     * 头像点击事件
+     */
+    onAvatarClick?: () => void;
+    /**
+     * 双击事件
+     */
+    onDoubleClick?: () => void;
+    /**
+     * 放置位置
+     */
+    placement?: 'left' | 'right';
+    /**
+     * 原始数据
+     */
+    originData?: T & MessageBubbleData;
+    /**
+     * 消息ID
+     */
+    id?: string;
+    /**
+     * 列表引用
+     */
+    bubbleListRef?: any;
+    /**
+     * 是否只读
+     */
+    readonly?: boolean;
+    /**
+     * Markdown 渲染配置
+     */
+    markdownRenderConfig?: MarkdownEditorProps;
+    /**
+     * 自定义配置
+     */
+    customConfig?: CustomConfig;
+    /**
+     * 依赖项数组
+     */
+    deps?: any[];
+    /**
+     * 不喜欢回调
+     */
+    onDisLike?: (bubble: MessageBubbleData<Record<string, any>>) => Promise<void> | void;
+    /**
+     * 喜欢回调
+     */
+    onLike?: (bubble: MessageBubbleData<Record<string, any>>) => Promise<void> | void;
+    /**
+     * 取消点赞的回调函数
+     * @description 当用户点击取消点赞按钮时触发
+     * @callback
+     * @optional
+     */
+    onCancelLike?: (bubble: MessageBubbleData<Record<string, any>>) => void;
+    /**
+     * 回复回调
+     */
+    onReply?: (message: string) => void;
+    /**
+     * 文档列表配置
+     */
+    docListProps?: DocInfoListProps & {
+        enable?: boolean;
+    };
+    /**
+     * 气泡引用
+     */
+    bubbleRef?: any;
+    /**
+     * 控制复制按钮的显示
+     * @description 控制复制按钮是否显示的函数或布尔值
+     * - 如果传入函数，则调用函数判断是否显示，函数接收 bubble 作为参数
+     * - 如果传入布尔值，则直接使用该值控制显示
+     * - 如果未传入（undefined），则使用默认逻辑判断
+     * @param bubble - 聊天项的数据对象
+     * @returns 是否显示复制按钮
+     * @optional
+     */
+    shouldShowCopy?: boolean | ((bubble: BubbleExtraProps['bubble']) => boolean);
+    /**
+     * 控制语音按钮的显示
+     * @description 控制语音按钮是否显示
+     */
+    shouldShowVoice?: boolean;
+    /**
+     * 外部语音适配器
+     * @description 替换默认 Web Speech 实现，接入自定义 TTS 能力
+     */
+    useSpeech?: UseSpeechAdapter;
+    /**
+     * 预加载消息
+     */
+    preMessage?: MessageBubbleData;
+    /**
+     * 自定义“更多”操作渲染 DOM
+     */
+    renderFileMoreAction?: (file: AttachmentFile) => React.ReactNode;
+    /**
+     * 文件视图事件（新）
+     * @description 与示例中的 fileViewEvents 对齐：通过回调拿到默认 handlers，并可返回局部覆盖实现
+     */
+    fileViewEvents?: (handlers: {
+        onPreview: (file: AttachmentFile) => void;
+        onDownload: (file: AttachmentFile) => void;
+        onViewAll: (files: AttachmentFile[]) => void;
+    }) => Partial<{
+        onPreview: (file: AttachmentFile) => void;
+        onDownload: (file: AttachmentFile) => void;
+        onViewAll: (files: AttachmentFile[]) => void;
+    }> | void;
+    /**
+     * 文件视图配置（新）
+     * @description 与示例中的 fileViewConfig 对齐：控制样式与更多按钮、数量等
+     */
+    fileViewConfig?: {
+        /** 是否展示每个文件项的“更多”按钮 */
+        showMoreButton?: boolean;
+        /** 自定义根容器 className */
+        className?: string;
+        /** 自定义根容器样式 */
+        style?: React.CSSProperties;
+        /** 最大展示条目数（默认 3） */
+        maxDisplayCount?: number;
+        /** 自定义悬浮动作区 */
+        customSlot?: React.ReactNode | ((file: AttachmentFile) => React.ReactNode);
+        /**
+         * 自定义更多操作渲染
+         * 兼容以下几种写法：
+         * - (file) => ReactNode
+         * - () => (file) => ReactNode
+         * - () => ReactNode
+         * - 直接传 ReactNode
+         */
+        renderFileMoreAction?: React.ReactNode | ((file: AttachmentFile) => React.ReactNode) | (() => React.ReactNode) | (() => (file: AttachmentFile) => React.ReactNode);
+    };
+}

package/dist/Bubble/types/BubbleExtra.d.ts

@@ -0,0 +1,165 @@
+import React from 'react';
+export type WithFalse<T> = T | false;
+export interface MessageBubbleData<T = Record<string, any>> {
+    content?: React.ReactNode;
+    originContent?: string;
+    error?: any;
+    model?: string;
+    name?: string;
+    parentId?: string;
+    role: 'user' | 'system' | 'assistant' | 'agent' | 'bot';
+    createAt: number;
+    endTime?: number;
+    id: string;
+    updateAt: number;
+    extra?: T;
+    isFinished?: boolean;
+    isAborted?: boolean;
+    feedback?: 'thumbsUp' | 'thumbsDown' | 'none';
+    isRetry?: boolean;
+    isLatest?: boolean;
+}
+export interface SimpleBubbleProps<T = Record<string, any>> {
+    originData?: T & MessageBubbleData;
+    [key: string]: any;
+}
+/**
+ * 聊天项额外操作组件的属性接口
+ * @interface BubbleExtraProps
+ */
+export type BubbleExtraProps = {
+    /**
+     * 回复消息的回调函数
+     * @description 当用户点击回复按钮时触发，传入要回复的消息内容
+     * @param message - 要回复的消息内容
+     * @callback
+     * @optional
+     */
+    onReply?: (message: string) => void;
+    /**
+     * 点踩的回调函数
+     * @description 当用户点击点踩按钮时触发
+     * @callback
+     * @optional
+     */
+    onDisLike?: () => void;
+    /**
+     * 点赞的回调函数
+     * @description 当用户点击点赞按钮时触发
+     * @callback
+     * @optional
+     */
+    onLike?: () => void;
+    /**
+     * 取消点赞的回调函数
+     * @description 当用户点击取消点赞按钮时触发
+     * @callback
+     * @optional
+     */
+    onCancelLike?: (bubble: MessageBubbleData<Record<string, any>>) => void;
+    /**
+     * 控制复制按钮的显示
+     * @description 控制复制按钮是否显示的函数或布尔值
+     * - 如果传入函数，则调用函数判断是否显示，函数接收 bubble 作为参数
+     * - 如果传入布尔值，则直接使用该值控制显示
+     * - 如果未传入（undefined），则使用默认逻辑判断
+     * @param bubble - 聊天项的数据对象
+     * @returns 是否显示复制按钮
+     * @optional
+     */
+    shouldShowCopy?: boolean | ((bubble: BubbleExtraProps['bubble']) => boolean);
+    /**
+     * 控制语音按钮的显示
+     * @description 控制语音按钮是否显示
+     */
+    shouldShowVoice?: boolean;
+    /**
+     * 外部语音适配器
+     * @description 传入播报适配器替换默认播报
+     */
+    useSpeech?: any;
+    /**
+     * 额外操作组件的自定义样式
+     * @description 用于自定义额外操作区域的样式
+     * @optional
+     */
+    style?: React.CSSProperties;
+    /**
+     * 是否为只读模式
+     * @description 当设置为 true 时，所有操作按钮将被禁用
+     * @default false
+     * @optional
+     */
+    readonly?: boolean;
+    /**
+     * 聊天项的数据
+     * @description 包含聊天消息的完整信息
+     */
+    bubble: SimpleBubbleProps<{
+        /**
+         * 聊天内容
+         * @description 消息的具体文本内容
+         */
+        content: string;
+        /**
+         * 聊天项的唯一标识
+         * @description 用于唯一标识一条消息
+         */
+        uuid: number;
+        /**
+         * 额外信息
+         * @description 包含消息相关的额外数据
+         */
+        extra: {
+            /**
+             * 预设消息
+             * @description 用于快速回复的预设消息内容
+             */
+            preMessage: {
+                /**
+                 * 预设消息的内容
+                 * @description 预设消息的具体文本内容
+                 */
+                content: string;
+            };
+        };
+    }>;
+    /**
+     * 额外内容为空时的回调函数
+     * @description 当额外内容为空时触发，用于通知父组件
+     * @param isNull - 是否为空
+     * @callback
+     * @optional
+     */
+    onRenderExtraNull?: (isNull: boolean) => void;
+    /**
+     * 自定义渲染函数
+     * @description 用于完全自定义额外操作区域的渲染
+     * @param props - 当前组件的所有属性
+     * @param defaultDoms - 默认的操作按钮 DOM 节点
+     * @returns 自定义的额外操作区域 React 节点
+     * @optional
+     * @deprecated 此属性当前未被使用，extraRender 功能在 MessagesContent 层级处理
+     */
+    render?: WithFalse<(props: SimpleBubbleProps<Record<string, any>>, defaultDoms: React.ReactNode) => React.ReactNode>;
+    pure?: boolean;
+    rightRender?: WithFalse<(props: BubbleExtraProps, defaultDoms: {
+        /**
+         * 点赞按钮的 DOM 节点
+         */
+        like: React.ReactNode;
+        /**
+         * 点踩按钮的 DOM 节点
+         */
+        disLike: React.ReactNode;
+        /**
+         * 复制按钮的 DOM 节点
+         */
+        copy: React.ReactNode;
+        /**
+         * 回复按钮的 DOM 节点
+         */
+        reply: React.ReactNode;
+    }) => React.ReactNode>;
+    placement?: 'left' | 'right';
+};

package/dist/Bubble/types/DocInfo.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Chunk } from '../../ThoughtChainList/types';
+/**
+ * 文档信息列表的属性接口
+ *
+ * @interface DocInfoListProps
+ * @property {any[]} reference_url_info_list - 引用URL信息列表数组
+ * @property {function} [render] - 自定义渲染函数，接收chunk项和默认DOM，返回React节点
+ * @property {function} [onOriginUrlClick] - 原始URL点击处理函数
+ * @property {Chunk[]} [options] - 可选的Chunk数组配置项
+ */
+export interface DocInfoListProps {
+    reference_url_info_list?: any[];
+    render?: (item: Chunk, defaultDom: React.ReactNode) => React.ReactNode;
+    onOriginUrlClick?: (url: string) => void;
+    options?: Chunk[];
+}

package/dist/ChatBoot/ButtonTab.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface ButtonTabProps {
+    /** 按钮文本 */
+    children?: React.ReactNode;
+    /** 是否选中 */
+    selected?: boolean;
+    /** 点击回调 */
+    onClick?: () => void;
+    /** 图标点击回调 */
+    onIconClick?: () => void;
+    /** 自定义类名 */
+    className?: string;
+    /** 左侧图标 */
+    icon?: React.ReactNode;
+    /** 前缀类名 */
+    prefixCls?: string;
+}
+declare const ButtonTab: React.FC<ButtonTabProps>;
+export default ButtonTab;