@unif/react-native-chat

AI 聊天 UI 组件库，基于 @unif/react-native-ui 构建。

安装

yarn add @unif/react-native-chat

peerDependencies

yarn add react react-native

组件

Bubble

消息气泡容器，根据 placement 自动镜像布局。

import {Bubble} from '@unif/react-native-chat';

<Bubble placement="end">你好</Bubble>

<Bubble placement="start" avatar={<Avatar />} header={<Text>小U</Text>}>
  <Markdown text={message.text} />
</Bubble>

| 属性 | 类型 | 说明 | |------|------|------| | placement | 'start' \| 'end' | 布局方向 | | avatar | ReactNode | 头像 | | header | ReactNode | 头部区域（名称等） | | children | ReactNode | 消息内容 | | footer | ReactNode | 底部区域 | | typing | boolean | 打字中（闪烁光标） | | loading | boolean | 加载态 | | loadingRender | () => ReactNode | 自定义加载内容 | | variant | 'filled' \| 'borderless' | 视觉变体 | | styles | BubbleSemanticStyles | 语义化样式 |

Bubble.List

消息列表，封装 inverted FlatList，空状态自动渲染 header。

import {Bubble} from '@unif/react-native-chat';

<Bubble.List
  items={messages}
  renderBubble={(item) => (
    <Bubble placement={item.role === 'user' ? 'end' : 'start'}>
      {item.text}
    </Bubble>
  )}
  header={<Welcome />}
/>

| 属性 | 类型 | 说明 | |------|------|------| | items | T[] | 消息数组 | | renderBubble | (item: T) => ReactNode | 渲染函数 | | keyExtractor | (item: T) => string | key 提取 | | header | ReactNode | 空状态占位（如 Welcome） | | footer | ReactNode | 底部内容 | | onEndReached | () => void | 加载更多 |

Sender

输入发送器，包含文本/语音/录音三态状态机。

import {Sender} from '@unif/react-native-chat';

<Sender
  onSubmit={(text) => handleSend(text)}
  onCancel={abort}
  loading={requesting}
/>

| 属性 | 类型 | 说明 | |------|------|------| | onSubmit | (text: string) => void | 发送回调 | | onCancel | () => void | 中止请求 | | loading | boolean | 是否请求中 | | placeholder | string | 占位文本 | | maxLength | number | 最大字数（默认 2000） | | actions | ActionItem[] | 操作项 | | onActionSelect | (key: string) => void | 操作项选中回调 | | components | { input?: ComponentType<InputComponentProps> } | 组件替换 |

Conversations

会话列表，支持分组与长按菜单。

import {Conversations} from '@unif/react-native-chat';

<Conversations
  items={sessions}
  activeKey={currentKey}
  onActiveChange={(key) => switchSession(key)}
  creation={{onPress: () => newSession()}}
  menu={menuActions}
  onMenuAction={handleMenuAction}
  groupable
/>

Prompts

建议提示，水平滚动 Chip 列表。

import {Prompts} from '@unif/react-native-chat';

<Prompts
  items={[{key: '1', label: '帮我搜商品'}]}
  onItemClick={({data}) => sendMessage(String(data.label))}
/>

Welcome

欢迎页，渐变背景 + extra 自定义插槽。

import {Welcome} from '@unif/react-native-chat';

<Welcome
  description="智能助手，有什么可以帮你？"
  extra={<QuickStartGrid items={quickStarts} onPress={handleQuickStart} />}
  renderGradient={renderGradient}
/>

兼容性

| @unif/react-native-chat | React Native | React | 状态 | |-------------------------|-------------|-------|------| | 0.3.x | >= 0.71 | >= 18 | ✅ | | 0.3.x | 0.74.x | 18.x | ✅ 已验证（PECPortal） |

许可证

MIT