import { ViewStyle, TextStyle, ImageStyle } from 'react-native'; export type MessageType = 'text' | 'image' | 'voice' | 'video' | 'file' | 'location' | 'system'; export type MessageStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed'; export type MessagePosition = 'left' | 'right' | 'center'; export interface ChatMessage { /** 消息ID */ id: string; /** 消息类型 */ type: MessageType; /** 消息内容(文本消息) */ content?: string; /** 图片URL(图片消息) */ imageUrl?: string; /** 语音时长,秒(语音消息) */ voiceDuration?: number; /** 语音URL(语音消息) */ voiceUrl?: string; /** 发送者ID */ senderId: string; /** 发送者名称 */ senderName?: string; /** 发送者头像 */ senderAvatar?: string; /** 发送时间 */ timestamp: Date | string | number; /** 消息状态 */ status?: MessageStatus; /** 是否是自己发送的 */ isSelf?: boolean; /** 引用/回复的消息 */ replyTo?: ChatMessage; /** 是否被撤回 */ isRevoked?: boolean; /** 自定义数据 */ extra?: any; } export interface DbChatMessageProps extends ChatMessage { /** 是否显示头像 */ showAvatar?: boolean; /** 是否显示时间 */ showTime?: boolean; /** 时间显示格式 */ timeFormat?: 'relative' | 'absolute' | 'full'; /** 是否显示已读状态 */ showReadStatus?: boolean; /** 是否显示发送状态(加载、失败等) */ showStatus?: boolean; /** 头像点击回调 */ onAvatarPress?: () => void; /** 消息长按回调 */ onLongPress?: () => void; /** 消息点击回调 */ onPress?: () => void; /** 重发回调 */ onResend?: () => void; /** 引用消息点击回调 */ onReplyPress?: () => void; /** 图片点击回调 */ onImagePress?: (url: string) => void; /** 语音点击回调 */ onVoicePress?: () => void; /** 自定义渲染气泡内容 */ renderBubble?: (message: ChatMessage) => React.ReactNode; /** 自定义渲染头像 */ renderAvatar?: () => React.ReactNode; /** 自定义渲染时间 */ renderTime?: (time: Date | string | number) => React.ReactNode; /** 样式 */ style?: ViewStyle; bubbleStyle?: ViewStyle; avatarStyle?: ImageStyle; contentTextStyle?: TextStyle; timeTextStyle?: TextStyle; statusTextStyle?: TextStyle; } export interface ChatMessageGroupProps { /** 消息列表 */ messages: ChatMessage[]; /** 当前用户ID */ currentUserId: string; /** 是否按时间分组显示 */ groupByTime?: boolean; /** 时间分组间隔(分钟) */ timeInterval?: number; /** 自定义渲染单条消息 */ renderMessage?: (message: ChatMessage, index: number) => React.ReactNode; /** 列表样式 */ style?: ViewStyle; /** 列表内容容器样式 */ contentContainerStyle?: ViewStyle; /** 是否倒序显示(最新消息在底部) */ inverted?: boolean; /** 滚动到底部回调 */ onScrollToBottom?: () => void; /** 加载更多历史消息回调 */ onLoadMore?: () => void; /** 是否还有更多历史消息 */ hasMore?: boolean; /** 是否加载中 */ loading?: boolean; }