@unif/react-native-chat-markdown 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 +103 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
# @unif/react-native-chat-markdown
|
|
2
|
+
|
|
3
|
+
Markdown 渲染组件库 — ThinkBlock 思考折叠、StreamingBubble 流式气泡、MarkdownBubble Markdown 渲染。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
yarn add @unif/react-native-chat-markdown
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
### peerDependencies
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
yarn add react react-native @ronradtke/react-native-markdown-display
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## 组件
|
|
18
|
+
|
|
19
|
+
### MarkdownBubble
|
|
20
|
+
|
|
21
|
+
Markdown 渲染气泡，自动解析 `<think>` 标签为 ThinkBlock。
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import {MarkdownBubble} from '@unif/react-native-chat-markdown';
|
|
25
|
+
|
|
26
|
+
<MarkdownBubble text="**加粗** 和 `代码`" />
|
|
27
|
+
|
|
28
|
+
// 包含思考内容
|
|
29
|
+
<MarkdownBubble text="<think>让我想想...</think>答案是 42" />
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
| 属性 | 类型 | 说明 |
|
|
33
|
+
|------|------|------|
|
|
34
|
+
| text | `string` | Markdown 文本 |
|
|
35
|
+
| markdownStyles | `Record<string, any>` | 覆盖默认样式 |
|
|
36
|
+
| style | `ViewStyle` | 容器样式 |
|
|
37
|
+
|
|
38
|
+
### StreamingBubble
|
|
39
|
+
|
|
40
|
+
流式气泡，文本 + 闪烁光标动画。
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import {StreamingBubble} from '@unif/react-native-chat-markdown';
|
|
44
|
+
|
|
45
|
+
<StreamingBubble text={streamingText} />
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
| 属性 | 类型 | 说明 |
|
|
49
|
+
|------|------|------|
|
|
50
|
+
| text | `string` | 当前累积文本 |
|
|
51
|
+
| cursorColor | `string` | 光标颜色 |
|
|
52
|
+
| cursorChar | `string` | 光标字符（默认 `▌`） |
|
|
53
|
+
|
|
54
|
+
### ThinkBlock
|
|
55
|
+
|
|
56
|
+
思考折叠块，可展开/收起。
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
import {ThinkBlock} from '@unif/react-native-chat-markdown';
|
|
60
|
+
|
|
61
|
+
<ThinkBlock content="这是 AI 的思考过程..." />
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
| 属性 | 类型 | 说明 |
|
|
65
|
+
|------|------|------|
|
|
66
|
+
| content | `string` | 思考内容 |
|
|
67
|
+
| defaultExpanded | `boolean` | 默认展开（默认 false） |
|
|
68
|
+
| label | `string` | 标签文字（默认 '深度思考'） |
|
|
69
|
+
|
|
70
|
+
## 工具函数
|
|
71
|
+
|
|
72
|
+
### parseThinkTags
|
|
73
|
+
|
|
74
|
+
解析 `<think>` 标签，拆分为思考内容和正文。
|
|
75
|
+
|
|
76
|
+
```typescript
|
|
77
|
+
import {parseThinkTags} from '@unif/react-native-chat-markdown';
|
|
78
|
+
|
|
79
|
+
const result = parseThinkTags('<think>思考中</think>正文内容');
|
|
80
|
+
// result.sections = [{type: 'think', content: '思考中'}, {type: 'text', content: '正文内容'}]
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### hasUnclosedThink
|
|
84
|
+
|
|
85
|
+
检测是否有未关闭的 `<think>` 标签（用于流式渲染判断）。
|
|
86
|
+
|
|
87
|
+
```typescript
|
|
88
|
+
import {hasUnclosedThink} from '@unif/react-native-chat-markdown';
|
|
89
|
+
|
|
90
|
+
hasUnclosedThink('<think>还在思考'); // true
|
|
91
|
+
hasUnclosedThink('<think>完成</think>'); // false
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## 兼容性
|
|
95
|
+
|
|
96
|
+
| @unif/react-native-chat-markdown | React Native | React | 状态 |
|
|
97
|
+
|----------------------------------|-------------|-------|------|
|
|
98
|
+
| 0.1.x | >= 0.71 | >= 18 | ✅ |
|
|
99
|
+
| 0.1.x | 0.74.x | 18.x | ✅ 已验证（PECPortal） |
|
|
100
|
+
|
|
101
|
+
## 许可证
|
|
102
|
+
|
|
103
|
+
MIT
|