@unif/react-native-chat

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

安装

yarn add @unif/react-native-chat

peerDependencies

yarn add react react-native @unif/react-native-ui

核心组件

Message

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

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

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

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

| 属性 | 类型 | 说明 | |------|------|------| | placement | 'start' \| 'end' | 布局方向 | | avatar | ReactNode | 头像 | | header | ReactNode | 头部区域 | | children | ReactNode | 消息内容 | | footer | ReactNode | 底部区域 | | extra | ReactNode | 扩展区域 | | typing | boolean | 打字中（闪烁光标） | | messageStatus | MessageStatus | 消息状态（'loading' 显示加载动画） | | variant | 'filled' \| 'outlined' \| 'borderless' | 视觉变体 | | shape | MessageShape | 气泡形状 | | contentRender | (content, info) => ReactNode | 自定义内容渲染 | | styles | MessageSemanticStyles | 语义化样式 |

Message.List

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

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

Sender

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

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

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

| 属性 | 类型 | 说明 | |------|------|------| | 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: () => createSession()}}
  menu={menuActions}
  onMenuAction={handleMenuAction}
  groupable
/>

Suggestions

建议提示，支持水平滚动 / 垂直列表 / wrap 布局。

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

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

Welcome

欢迎页，纯展示组件。

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

<Welcome
  title="你好"
  description="智能助手，有什么可以帮你？"
  extra={<QuickStartGrid />}
/>

复合组件

以下组件均采用父组件 + Context 子组件的复合模式：

| 组件 | 子组件 | 说明 | |------|--------|------| | Tool | ToolHeader / ToolContent / ToolInput / ToolOutput | 工具调用展示 | | Sources | SourcesTrigger / SourcesContent / Source / InlineCitation | RAG 溯源引用 | | Artifact | ArtifactHeader / ArtifactTitle / ArtifactActions / ArtifactAction / ArtifactClose / ArtifactContent | 输出物容器 | | MessageBranch | MessageBranchSelector / MessageBranchPrevious / MessageBranchNext / MessageBranchPage | 消息分支切换 | | Task | TaskItem | Agent 任务列表 | | Plan | PlanAction / PlanContent / PlanFooter | 执行计划 | | Context | ContextTrigger / ContextContent | Token 用量 | | Confirmation | ConfirmationTitle / ConfirmationRequest / ConfirmationActions / ConfirmationAction | 执行确认 | | Agent | AgentHeader / AgentTools | Agent 信息展示 |

其他组件

| 组件 | 说明 | |------|------| | Reasoning | 思考过程折叠块（支持 status 三态 + blink 动画） | | ChainOfThought | 思考链步骤列表（垂直步骤可视化，支持折叠和状态指示） | | Actions | 操作按钮组（含 Actions.Copy 和 Actions.Feedback 子组件） |

Hooks

| Hook | 说明 | |------|------| | useChatTheme | 获取 { t, isDark }，封装 useTheme + useThemeMode | | useControllableValue | 受控 / 非受控状态统一管理 | | useCollapsible | 折叠展开状态管理（多 key 支持） | | useBlink | 闪烁动画 | | useFadeIn | 淡入动画 | | useMergedStyles | 合并语义样式与自定义样式 |

工具函数

| 函数 | 说明 | |------|------| | parseThinkTags | 解析文本中的 <think> 标签块 | | hasUnclosedThink | 检测未闭合的 <think> 标签（流式场景） |

许可证

MIT