@unif/react-native-chat-markdown 0.1.0

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@unif/react-native-chat-markdown",
+  "version": "0.1.0",
+  "description": "UNIF React Native Chat Markdown — Markdown 渲染、ThinkBlock、流式气泡",
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./src/index.tsx",
+      "default": "./src/index.tsx"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "clean": "del-cli lib",
+    "typecheck": "tsc"
+  },
+  "keywords": ["react-native", "chat", "markdown", "streaming"],
+  "author": "qq382724935 <liulijun@pec.com.cn>",
+  "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "@ronradtke/react-native-markdown-display": ">=7.0.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      ["module", { "esm": true }],
+      ["typescript", { "project": "tsconfig.build.json" }]
+    ]
+  }
+}

package/src/index.tsx

@@ -0,0 +1,16 @@
+/**
+ * @unif/react-native-chat-markdown
+ * Markdown 渲染、ThinkBlock、流式气泡
+ */
+
+export {default as ThinkBlock} from './think-block/ThinkBlock';
+export type {ThinkBlockProps, ThinkBlockSemanticStyles} from './think-block/ThinkBlock';
+
+export {default as StreamingBubble} from './streaming-bubble/StreamingBubble';
+export type {StreamingBubbleProps} from './streaming-bubble/StreamingBubble';
+
+export {default as MarkdownBubble} from './markdown-bubble/MarkdownBubble';
+export type {MarkdownBubbleProps} from './markdown-bubble/MarkdownBubble';
+
+export {parseThinkTags, hasUnclosedThink} from './utils/thinkTagParser';
+export type {ParsedContent} from './utils/thinkTagParser';

package/src/markdown-bubble/MarkdownBubble.tsx

@@ -0,0 +1,90 @@
+/**
+ * MarkdownBubble — Markdown 渲染气泡
+ * 完成的消息用 Markdown 渲染 + think 折叠
+ */
+
+import React, {useMemo} from 'react';
+import {View, StyleSheet, type ViewStyle} from 'react-native';
+import Markdown from '@ronradtke/react-native-markdown-display';
+import {parseThinkTags} from '../utils/thinkTagParser';
+import ThinkBlock from '../think-block/ThinkBlock';
+
+export interface MarkdownBubbleProps {
+  text: string;
+  markdownStyles?: Record<string, unknown>;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+const defaultMarkdownStyles = {
+  body: {
+    fontSize: 15,
+    color: '#1F2937',
+    lineHeight: 22,
+  },
+  paragraph: {
+    marginTop: 0,
+    marginBottom: 6,
+  },
+  code_inline: {
+    backgroundColor: '#F5F5F5',
+    borderRadius: 3,
+    paddingHorizontal: 4,
+    fontSize: 13,
+    color: '#E8550A',
+  },
+  fence: {
+    backgroundColor: '#F5F5F5',
+    borderRadius: 6,
+    padding: 10,
+    fontSize: 13,
+  },
+  link: {
+    color: '#1677FF',
+  },
+  strong: {
+    fontWeight: '600' as const,
+  },
+  list_item: {
+    marginBottom: 4,
+  },
+  blockquote: {
+    borderLeftWidth: 3,
+    borderLeftColor: '#E5E7EB',
+    paddingLeft: 10,
+    marginLeft: 0,
+  },
+};
+
+const MarkdownBubble: React.FC<MarkdownBubbleProps> = ({
+  text,
+  markdownStyles,
+  style,
+  testID = 'markdown-bubble',
+}) => {
+  const {body, thinks} = useMemo(() => parseThinkTags(text), [text]);
+
+  const mergedStyles = useMemo(
+    () => ({...defaultMarkdownStyles, ...markdownStyles}),
+    [markdownStyles]
+  );
+
+  return (
+    <View style={[defaultContainerStyles.container, style]} testID={testID}>
+      {thinks.map((think, index) => (
+        <ThinkBlock key={index} content={think} />
+      ))}
+      {body.length > 0 && (
+        <Markdown style={mergedStyles}>{body}</Markdown>
+      )}
+    </View>
+  );
+};
+
+const defaultContainerStyles = StyleSheet.create({
+  container: {
+    paddingVertical: 4,
+  },
+});
+
+export default React.memo(MarkdownBubble);

package/src/markdown-bubble/index.md

@@ -0,0 +1,61 @@
+---
+title: MarkdownBubble Markdown 渲染
+nav:
+  title: 组件
+  path: /components
+---
+
+# MarkdownBubble Markdown 渲染
+
+完整的 Markdown 渲染气泡，自动解析 `<think>` 标签并渲染为 ThinkBlock。
+
+## 何时使用
+
+- AI 回复完成后（status === 'success'）渲染完整内容
+- 内容包含 Markdown 格式（标题、代码、链接、列表等）
+- 内容包含 `<think>` 标签需要折叠展示
+
+## 代码示例
+
+### 基本用法
+
+```tsx
+import { MarkdownBubble } from '@unif/react-native-chat-markdown';
+
+<MarkdownBubble text="**加粗** 和 `代码` 以及[链接](https://example.com)" />
+```
+
+### 包含思考内容
+
+```tsx
+<MarkdownBubble
+  text="<think>分析用户意图...</think>根据您的需求，推荐以下方案..."
+/>
+```
+
+### 自定义 Markdown 样式
+
+```tsx
+<MarkdownBubble
+  text={messageText}
+  markdownStyles={{
+    body: { fontSize: 16, color: '#333' },
+    code_inline: { backgroundColor: '#F0F0F0' },
+  }}
+/>
+```
+
+## API
+
+### MarkdownBubbleProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| text | Markdown 文本 | `string` | - |
+| markdownStyles | 覆盖默认 Markdown 样式 | `Record<string, unknown>` | 内置样式 |
+| style | 容器样式 | `ViewStyle` | - |
+| testID | 测试标识 | `string` | `'markdown-bubble'` |
+
+### 依赖
+
+- `@ronradtke/react-native-markdown-display` — Markdown 渲染引擎

package/src/streaming-bubble/StreamingBubble.tsx

@@ -0,0 +1,74 @@
+/**
+ * StreamingBubble — 流式文本气泡
+ * 显示正在流入的文本 + 呼吸动画光标
+ */
+
+import React, {useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  Animated,
+  StyleSheet,
+  type ViewStyle,
+} from 'react-native';
+
+export interface StreamingBubbleProps {
+  text: string;
+  cursorColor?: string;
+  cursorChar?: string;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+const StreamingBubble: React.FC<StreamingBubbleProps> = ({
+  text,
+  cursorColor = '#1677FF',
+  cursorChar = '▌',
+  style,
+  testID = 'streaming-bubble',
+}) => {
+  const opacity = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: 400,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 400,
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [opacity]);
+
+  return (
+    <View style={[defaultStyles.container, style]} testID={testID}>
+      <Text style={defaultStyles.text}>
+        {text}
+        <Animated.Text style={[{color: cursorColor}, {opacity}]}>
+          {cursorChar}
+        </Animated.Text>
+      </Text>
+    </View>
+  );
+};
+
+const defaultStyles = StyleSheet.create({
+  container: {
+    paddingVertical: 4,
+  },
+  text: {
+    fontSize: 15,
+    color: '#1F2937',
+    lineHeight: 22,
+  },
+});
+
+export default React.memo(StreamingBubble);

package/src/streaming-bubble/index.md

@@ -0,0 +1,47 @@
+---
+title: StreamingBubble 流式气泡
+nav:
+  title: 组件
+  path: /components
+---
+
+# StreamingBubble 流式气泡
+
+展示正在流入的文本内容，附带闪烁光标动画。
+
+## 何时使用
+
+- AI 正在流式输出回复时（status === 'updating'）
+- 需要视觉上表示内容仍在生成中
+
+## 代码示例
+
+### 基本用法
+
+```tsx
+import { StreamingBubble } from '@unif/react-native-chat-markdown';
+
+<StreamingBubble text="正在生成的文本内容..." />
+```
+
+### 自定义光标
+
+```tsx
+<StreamingBubble
+  text={streamingText}
+  cursorColor="#FF6B00"
+  cursorChar="●"
+/>
+```
+
+## API
+
+### StreamingBubbleProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| text | 当前流式文本 | `string` | - |
+| cursorColor | 光标颜色 | `string` | `'#1677FF'` |
+| cursorChar | 光标字符 | `string` | `'▌'` |
+| style | 容器样式 | `ViewStyle` | - |
+| testID | 测试标识 | `string` | `'streaming-bubble'` |

package/src/think-block/ThinkBlock.tsx

@@ -0,0 +1,111 @@
+/**
+ * ThinkBlock — 思考折叠块
+ * 卡片式，圆角 12px
+ * 标题：🧠 已深度思考(展开) ▾
+ */
+
+import React, {useState} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+
+export interface ThinkBlockSemanticStyles {
+  root?: ViewStyle;
+  header?: ViewStyle;
+  label?: TextStyle;
+  content?: TextStyle;
+}
+
+export interface ThinkBlockProps {
+  content: string;
+  defaultExpanded?: boolean;
+  label?: string;
+  style?: ViewStyle;
+  styles?: Partial<ThinkBlockSemanticStyles>;
+  testID?: string;
+}
+
+const ThinkBlock: React.FC<ThinkBlockProps> = ({
+  content,
+  defaultExpanded = false,
+  label = '深度思考',
+  style,
+  styles: semanticStyles,
+  testID = 'think-block',
+}) => {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+
+  return (
+    <View style={[defaultStyles.container, semanticStyles?.root, style]}>
+      <TouchableOpacity
+        style={[defaultStyles.header, semanticStyles?.header]}
+        onPress={() => setExpanded(!expanded)}
+        activeOpacity={0.7}
+        testID={`${testID}-toggle`}>
+        <View style={defaultStyles.titleRow}>
+          <Text style={defaultStyles.brainIcon}>🧠</Text>
+          <Text
+            style={[defaultStyles.label, semanticStyles?.label]}>
+            已{label}{expanded ? '(展开)' : '(收起)'}
+          </Text>
+        </View>
+        <Text style={defaultStyles.chevron}>
+          {expanded ? '▲' : '▼'}
+        </Text>
+      </TouchableOpacity>
+      {expanded && (
+        <Text
+          style={[defaultStyles.content, semanticStyles?.content]}
+          testID={`${testID}-content`}>
+          {content}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const defaultStyles = StyleSheet.create({
+  container: {
+    backgroundColor: '#F9FAFB',
+    borderRadius: 12,
+    marginBottom: 8,
+    overflow: 'hidden',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+  },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  brainIcon: {
+    fontSize: 14,
+  },
+  label: {
+    marginLeft: 6,
+    fontSize: 12,
+    color: '#6B7280',
+  },
+  chevron: {
+    fontSize: 10,
+    color: '#6B7280',
+  },
+  content: {
+    fontSize: 12,
+    color: '#6B7280',
+    lineHeight: 20,
+    paddingHorizontal: 14,
+    paddingBottom: 12,
+  },
+});
+
+export default React.memo(ThinkBlock);

package/src/think-block/index.md

@@ -0,0 +1,57 @@
+---
+title: ThinkBlock 思考折叠块
+nav:
+  title: 组件
+  path: /components
+---
+
+# ThinkBlock 思考折叠块
+
+展示 AI 的思考过程，可折叠/展开。
+
+## 何时使用
+
+- AI 回复中包含 `<think>` 标签的思考内容
+- 需要可折叠展示推理过程（如 DeepSeek 的 reasoning_content）
+
+## 代码示例
+
+### 基本用法
+
+```tsx
+import { ThinkBlock } from '@unif/react-native-chat-markdown';
+
+<ThinkBlock content="用户询问的是账户余额，需要调用查询接口..." />
+```
+
+### 默认展开
+
+```tsx
+<ThinkBlock
+  content="分析用户意图..."
+  defaultExpanded={true}
+  label="思考过程"
+/>
+```
+
+## API
+
+### ThinkBlockProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| content | 思考内容 | `string` | - |
+| defaultExpanded | 默认展开 | `boolean` | `false` |
+| label | 标题文字 | `string` | `'深度思考'` |
+| style | 容器样式 | `ViewStyle` | - |
+| styles | 语义样式 | `Partial<ThinkBlockSemanticStyles>` | - |
+| testID | 测试标识 | `string` | `'think-block'` |
+
+### ThinkBlockSemanticStyles
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| root | 外层容器 | `ViewStyle` |
+| header | 标题栏 | `ViewStyle` |
+| label | 标题文字 | `TextStyle` |
+| content | 内容文字 | `TextStyle` |

package/src/utils/thinkTagParser.ts

@@ -0,0 +1,41 @@
+/**
+ * <think> 标签解析器
+ * 将文本中的 <think>...</think> 提取出来，分离为普通内容和思考内容
+ */
+
+export interface ParsedContent {
+  /** 去除 think 标签后的正文 */
+  body: string;
+  /** think 标签内的内容（可能多段） */
+  thinks: string[];
+}
+
+const THINK_REGEX = /<think>([\s\S]*?)<\/think>/g;
+
+/**
+ * 解析文本中的 <think> 标签
+ * 支持多个 <think> 块，返回分离后的正文和思考内容
+ */
+export function parseThinkTags(text: string): ParsedContent {
+  const thinks: string[] = [];
+  const body = text
+    .replace(THINK_REGEX, (_match, content: string) => {
+      const trimmed = content.trim();
+      if (trimmed) {
+        thinks.push(trimmed);
+      }
+      return '';
+    })
+    .trim();
+
+  return {body, thinks};
+}
+
+/**
+ * 检查文本中是否包含未闭合的 <think> 标签（流式场景）
+ */
+export function hasUnclosedThink(text: string): boolean {
+  const opens = (text.match(/<think>/g) || []).length;
+  const closes = (text.match(/<\/think>/g) || []).length;
+  return opens > closes;
+}