export { PureBubbleList } from './PureBubbleList'; import { MutableRefObject } from 'react'; import type { BubbleMetaData, BubbleProps, MessageBubbleData } from '../type'; import React from 'react'; export type BubbleListProps = { /** * 聊天消息列表 */ bubbleList: MessageBubbleData[]; readonly?: boolean; /** * 聊天列表的引用 */ bubbleListRef?: MutableRefObject; bubbleRef?: MutableRefObject; /** * @deprecated 请使用 isLoading 代替 * @description 已废弃,将在未来版本移除 */ loading?: boolean; /** * 加载状态 */ isLoading?: boolean; pure?: boolean; /** * 组件的类名 */ className?: string; /** * 聊天项的渲染配置 */ bubbleRenderConfig?: BubbleProps['bubbleRenderConfig']; /** * 组件的样式 */ style?: React.CSSProperties; /** * 用户元数据 */ userMeta?: BubbleMetaData; /** * 助手元数据 */ assistantMeta?: BubbleMetaData; styles?: { /** * 气泡根容器的自定义样式 */ bubbleStyle?: React.CSSProperties; /** * 头像标题区域的自定义样式 */ bubbleAvatarTitleStyle?: React.CSSProperties; /** * 主容器的自定义样式 */ bubbleContainerStyle?: React.CSSProperties; /** * 加载图标的自定义样式 */ bubbleLoadingIconStyle?: React.CSSProperties; /** * 名称区域的自定义样式 */ bubbleNameStyle?: React.CSSProperties; /** * 聊天项的样式 */ bubbleListItemStyle?: React.CSSProperties; /** * 聊天项内容的样式 */ bubbleListItemContentStyle?: React.CSSProperties; /** * 内容前置区域的自定义样式 */ bubbleListItemBeforeStyle?: React.CSSProperties; /** * 内容后置区域的自定义样式 */ bubbleListItemAfterStyle?: React.CSSProperties; /** * 聊天项左侧内容的样式 */ bubbleListLeftItemContentStyle?: React.CSSProperties; /** * 聊天项右侧内容的样式 */ bubbleListRightItemContentStyle?: React.CSSProperties; /** * 聊天项标题的样式 */ bubbleListItemTitleStyle?: React.CSSProperties; /** * 聊天项头像的样式 */ bubbleListItemAvatarStyle?: React.CSSProperties; /** * 聊天项额外内容的样式 */ bubbleListItemExtraStyle?: React.CSSProperties; }; classNames?: { /** * 气泡根容器的自定义类名 */ bubbleClassName?: string; /** * 头像标题区域的自定义类名 */ bubbleAvatarTitleClassName?: string; /** * 主容器的自定义类名 */ bubbleContainerClassName?: string; /** * 加载图标的自定义类名 */ bubbleLoadingIconClassName?: string; /** * 名称区域的自定义类名 */ bubbleNameClassName?: string; /** * 聊天项的类名 */ bubbleListItemClassName?: string; /** * 聊天项内容的类名 */ bubbleListItemContentClassName?: string; /** * 内容前置区域的自定义类名 */ bubbleListItemBeforeClassName?: string; /** * 内容后置区域的自定义类名 */ bubbleListItemAfterClassName?: string; /** * 聊天项标题的类名 */ bubbleListItemTitleClassName?: string; /** * 聊天项头像的类名 */ bubbleListItemAvatarClassName?: string; }; onDisLike?: BubbleProps['onDisLike']; onLike?: BubbleProps['onLike']; onCancelLike?: BubbleProps['onCancelLike']; onReply?: BubbleProps['onReply']; onAvatarClick?: BubbleProps['onAvatarClick']; onDoubleClick?: BubbleProps['onDoubleClick']; markdownRenderConfig?: BubbleProps['markdownRenderConfig']; docListProps?: BubbleProps['docListProps']; /** * 动态控制复制按钮的显隐 */ shouldShowCopy?: boolean | ((bubbleItem: any) => boolean); /** * 控制语音按钮的显示 * @description 控制语音按钮是否显示 */ shouldShowVoice?: boolean; /** * 滚动事件的回调 */ onScroll?: (e: React.UIEvent) => void; /** * 滚轮事件的回调 */ onWheel?: (e: React.WheelEvent, bubbleListRef: HTMLDivElement | null) => void; /** * 触摸移动事件的回调 */ onTouchMove?: (e: React.TouchEvent, bubbleListRef: HTMLDivElement | null) => void; }; /** * BubbleList 组件 - 聊天气泡列表组件 * * 该组件用于渲染聊天气泡列表,支持用户和助手的消息显示、加载状态、滚动事件等。 * 提供完整的聊天界面功能,包括消息渲染、交互操作、样式自定义等。 * * @component * @description 聊天气泡列表组件,渲染聊天消息列表 * @param {BubbleListProps} props - 组件属性 * @param {BubbleProps[]} [props.bubbleList=[]] - 气泡列表数据 * @param {React.RefObject} [props.bubbleListRef] - 气泡列表引用 * @param {boolean} [props.loading] - 是否显示加载状态 * @param {string} [props.className] - 自定义CSS类名 * @param {React.CSSProperties} [props.style] - 自定义样式 * @param {BubbleRenderConfig} [props.bubbleRenderConfig] - 气泡渲染配置 * @param {MarkdownRenderConfig} [props.markdownRenderConfig] - Markdown渲染配置 * @param {BubbleMetaData} [props.userMeta] - 用户头像元数据 * @param {BubbleMetaData} [props.assistantMeta] - 助手头像元数据 * @param {BubbleStyles} [props.styles] - 自定义样式配置 * @param {BubbleClassNames} [props.classNames] - 自定义类名配置 * @param {boolean} [props.readonly] - 是否只读模式 * @param {Function} [props.onScroll] - 滚动事件回调 * @param {Function} [props.onWheel] - 滚轮事件回调 * @param {Function} [props.onTouchMove] - 触摸移动事件回调 * @param {Function} [props.onLike] - 点赞事件回调 * @param {Function} [props.onDisLike] - 点踩事件回调 * @param {Function} [props.onReply] - 回复事件回调 * @param {Function} [props.onCancelLike] - 取消点赞事件回调 * @param {Function} [props.onAvatarClick] - 头像点击事件回调 * @param {Function} [props.onDoubleClick] - 双击事件回调 * @param {boolean|Function} [props.shouldShowCopy] - 是否显示复制按钮 * * @example * ```tsx * console.log('点赞:', message)} * onReply={(message) => console.log('回复:', message)} * onAvatarClick={() => console.log('点击了头像')} * onDoubleClick={() => console.log('双击了消息')} * /> * ``` * * @returns {React.ReactElement} 渲染的聊天气泡列表组件 * * @remarks * - 支持用户和助手消息的不同布局 * - 提供加载状态和骨架屏 * - 支持消息交互操作(点赞、点踩、回复等) * - 支持自定义样式和类名 * - 支持Markdown内容渲染 * - 支持滚动和触摸事件 * - 提供消息复制功能 */ export declare const BubbleList: React.FC; export default BubbleList;