@unif/react-native-chat 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +156 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
# @unif/react-native-chat
|
|
2
|
+
|
|
3
|
+
AI 聊天 UI 组件库，基于 `@unif/react-native-ui` 构建，参考 [Ant Design X](https://ant-design-x.antgroup.com/) 架构设计。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
yarn add @unif/react-native-chat
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
### peerDependencies
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
yarn add react react-native
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## 组件
|
|
18
|
+
|
|
19
|
+
### Bubble
|
|
20
|
+
|
|
21
|
+
消息气泡容器，根据 `role` 自动镜像布局。
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import {Bubble} from '@unif/react-native-chat';
|
|
25
|
+
|
|
26
|
+
<Bubble role="user">你好</Bubble>
|
|
27
|
+
|
|
28
|
+
<Bubble role="assistant" avatar={<Avatar />} name="小U">
|
|
29
|
+
<MarkdownBubble text={message.text} />
|
|
30
|
+
</Bubble>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
| 属性 | 类型 | 说明 |
|
|
34
|
+
|------|------|------|
|
|
35
|
+
| role | `'user' \| 'assistant' \| 'system'` | 消息角色 |
|
|
36
|
+
| avatar | `ReactNode` | 头像 |
|
|
37
|
+
| name | `string` | 发送者名称 |
|
|
38
|
+
| children | `ReactNode` | 消息内容 |
|
|
39
|
+
| footer | `ReactNode` | 底部区域 |
|
|
40
|
+
| styles | `BubbleSemanticStyles` | 语义化样式 |
|
|
41
|
+
|
|
42
|
+
### BubbleList
|
|
43
|
+
|
|
44
|
+
消息列表，封装 inverted FlatList，空状态自动渲染 header。
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
import {BubbleList} from '@unif/react-native-chat';
|
|
48
|
+
|
|
49
|
+
<BubbleList
|
|
50
|
+
items={messages}
|
|
51
|
+
renderBubble={(item) => <Bubble role={item.role}>{item.text}</Bubble>}
|
|
52
|
+
header={<Welcome />}
|
|
53
|
+
/>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
| 属性 | 类型 | 说明 |
|
|
57
|
+
|------|------|------|
|
|
58
|
+
| items | `T[]` | 消息数组 |
|
|
59
|
+
| renderBubble | `(item: T) => ReactNode` | 渲染函数 |
|
|
60
|
+
| keyExtractor | `(item: T) => string` | key 提取 |
|
|
61
|
+
| header | `ReactNode` | 空状态占位（如 Welcome） |
|
|
62
|
+
| onEndReached | `() => void` | 加载更多 |
|
|
63
|
+
|
|
64
|
+
### Sender
|
|
65
|
+
|
|
66
|
+
输入发送器，包含文本/语音/录音三态状态机。
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
import {Sender} from '@unif/react-native-chat';
|
|
70
|
+
|
|
71
|
+
<Sender
|
|
72
|
+
onSend={(text) => handleSend(text)}
|
|
73
|
+
onStop={abort}
|
|
74
|
+
isRequesting={requesting}
|
|
75
|
+
/>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
| 属性 | 类型 | 说明 |
|
|
79
|
+
|------|------|------|
|
|
80
|
+
| onSend | `(text: string) => void` | 发送回调 |
|
|
81
|
+
| onStop | `() => void` | 中止请求 |
|
|
82
|
+
| isRequesting | `boolean` | 是否请求中 |
|
|
83
|
+
| placeholder | `string` | 占位文本 |
|
|
84
|
+
| maxLength | `number` | 最大字数（默认 2000） |
|
|
85
|
+
| actions | `ActionSheetOption[]` | + 面板选项 |
|
|
86
|
+
|
|
87
|
+
### Conversations
|
|
88
|
+
|
|
89
|
+
会话列表，SectionList + 日期分组（今天/昨天/更早）。
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
import {Conversations} from '@unif/react-native-chat';
|
|
93
|
+
|
|
94
|
+
<Conversations
|
|
95
|
+
items={sessions}
|
|
96
|
+
activeId={currentId}
|
|
97
|
+
onSelect={(id) => switchSession(id)}
|
|
98
|
+
onDelete={(id) => deleteSession(id)}
|
|
99
|
+
onNew={() => newSession()}
|
|
100
|
+
/>
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### Prompts
|
|
104
|
+
|
|
105
|
+
建议提示，水平滚动 Chip 列表。
|
|
106
|
+
|
|
107
|
+
```tsx
|
|
108
|
+
import {Prompts} from '@unif/react-native-chat';
|
|
109
|
+
|
|
110
|
+
<Prompts
|
|
111
|
+
items={[{id: '1', label: '帮我搜商品'}]}
|
|
112
|
+
onSelect={(item) => sendMessage(item.label)}
|
|
113
|
+
/>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### Welcome
|
|
117
|
+
|
|
118
|
+
欢迎页，渐变背景 + 快捷入口卡片网格。
|
|
119
|
+
|
|
120
|
+
```tsx
|
|
121
|
+
import {Welcome} from '@unif/react-native-chat';
|
|
122
|
+
|
|
123
|
+
<Welcome
|
|
124
|
+
subtitle="智能助手，有什么可以帮你？"
|
|
125
|
+
quickStarts={QUICK_STARTERS}
|
|
126
|
+
onQuickStart={(key) => handleQuickStart(key)}
|
|
127
|
+
renderIcon={renderIcon}
|
|
128
|
+
renderGradient={renderGradient}
|
|
129
|
+
/>
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### CardWrapper
|
|
133
|
+
|
|
134
|
+
卡片路由容器，通过 registry 注入业务卡片。
|
|
135
|
+
|
|
136
|
+
```tsx
|
|
137
|
+
import {CardWrapper} from '@unif/react-native-chat';
|
|
138
|
+
|
|
139
|
+
<CardWrapper
|
|
140
|
+
cardType="product-list"
|
|
141
|
+
data={cardData}
|
|
142
|
+
actions={['add_to_order']}
|
|
143
|
+
registry={CARD_REGISTRY}
|
|
144
|
+
/>
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
## 兼容性
|
|
148
|
+
|
|
149
|
+
| @unif/react-native-chat | React Native | React | 状态 |
|
|
150
|
+
|-------------------------|-------------|-------|------|
|
|
151
|
+
| 0.1.x | >= 0.71 | >= 18 | ✅ |
|
|
152
|
+
| 0.1.x | 0.74.x | 18.x | ✅ 已验证（PECPortal） |
|
|
153
|
+
|
|
154
|
+
## 许可证
|
|
155
|
+
|
|
156
|
+
MIT
|