@unif/react-native-chat 0.1.0

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@unif/react-native-chat",
+  "version": "0.1.0",
+  "description": "UNIF React Native Chat — AI 聊天 UI 组件（Bubble、Sender、Conversations 等）",
+  "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", "ui", "bubble", "sender"],
+  "author": "qq382724935 <liulijun@pec.com.cn>",
+  "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      ["module", { "esm": true }],
+      ["typescript", { "project": "tsconfig.build.json" }]
+    ]
+  }
+}

package/src/bubble/Bubble.tsx

@@ -0,0 +1,160 @@
+/**
+ * Bubble — 消息气泡容器
+ *
+ * 根据 role 自动镜像布局：
+ * - user → 右对齐浅色气泡 + 不对称圆角
+ * - assistant → 左侧 Avatar + 名称 + 内容
+ */
+
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import {chatTokens} from '../theme/tokens';
+
+export interface BubbleSemanticStyles {
+  root?: ViewStyle;
+  avatar?: ViewStyle;
+  name?: TextStyle;
+  content?: ViewStyle;
+  footer?: ViewStyle;
+}
+
+export interface BubbleProps {
+  role: 'user' | 'assistant' | 'system';
+  avatar?: React.ReactNode;
+  name?: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  style?: ViewStyle;
+  styles?: Partial<BubbleSemanticStyles>;
+  testID?: string;
+}
+
+const Bubble: React.FC<BubbleProps> = ({
+  role,
+  avatar,
+  name,
+  children,
+  footer,
+  style,
+  styles: semanticStyles,
+  testID,
+}) => {
+  if (role === 'user') {
+    return (
+      <View
+        style={[defaultStyles.userRow, semanticStyles?.root, style]}
+        testID={testID ?? 'bubble-user'}>
+        <View style={defaultStyles.userBubble}>
+          {typeof children === 'string' ? (
+            <Text style={defaultStyles.userText}>{children}</Text>
+          ) : (
+            children
+          )}
+        </View>
+        {footer && (
+          <View style={[defaultStyles.footer, semanticStyles?.footer]}>
+            {footer}
+          </View>
+        )}
+      </View>
+    );
+  }
+
+  // assistant / system
+  return (
+    <View
+      style={[defaultStyles.assistantRow, semanticStyles?.root, style]}
+      testID={testID ?? 'bubble-assistant'}>
+      <View style={defaultStyles.headerRow}>
+        {avatar && (
+          <View style={[defaultStyles.avatarContainer, semanticStyles?.avatar]}>
+            {avatar}
+          </View>
+        )}
+        {name && (
+          <Text style={[defaultStyles.assistantName, semanticStyles?.name]}>
+            {name}
+          </Text>
+        )}
+      </View>
+      <View style={[defaultStyles.contentArea, semanticStyles?.content]}>
+        {children}
+      </View>
+      {footer && (
+        <View style={[defaultStyles.footer, semanticStyles?.footer]}>
+          {footer}
+        </View>
+      )}
+      <View style={defaultStyles.separator} />
+    </View>
+  );
+};
+
+const defaultStyles = StyleSheet.create({
+  // Assistant
+  assistantRow: {
+    paddingHorizontal: chatTokens.spaceMd,
+    paddingVertical: chatTokens.spaceSm,
+    marginBottom: 12,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 6,
+  },
+  avatarContainer: {
+    marginRight: 8,
+  },
+  assistantName: {
+    fontSize: 13,
+    fontWeight: '500',
+    color: chatTokens.colorTextSecondary,
+  },
+  contentArea: {
+    paddingLeft: 36,
+  },
+  separator: {
+    marginTop: 12,
+    marginLeft: 36,
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: chatTokens.colorBorder,
+    opacity: 0.5,
+  },
+  footer: {
+    paddingLeft: 36,
+    marginTop: 4,
+  },
+
+  // User
+  userRow: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    flexWrap: 'wrap',
+    paddingHorizontal: chatTokens.spaceMd,
+    paddingVertical: chatTokens.spaceSm,
+    marginBottom: chatTokens.spaceSm,
+  },
+  userBubble: {
+    backgroundColor: chatTokens.colorBgUserMsg,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 6,
+    paddingHorizontal: chatTokens.spaceMd,
+    paddingVertical: chatTokens.space,
+    maxWidth: '75%',
+  },
+  userText: {
+    fontSize: chatTokens.fontSize,
+    color: chatTokens.colorText,
+    lineHeight: chatTokens.lineHeight,
+  },
+});
+
+export default React.memo(Bubble);

package/src/bubble/BubbleList.tsx

@@ -0,0 +1,84 @@
+/**
+ * Bubble.List — 消息列表
+ * 封装 inverted FlatList，自动滚动到底部
+ */
+
+import React, {useCallback} from 'react';
+import {FlatList, View, StyleSheet, type ViewStyle} from 'react-native';
+
+export interface BubbleListProps<T = unknown> {
+  items: T[];
+  renderBubble: (item: T) => React.ReactNode;
+  keyExtractor?: (item: T) => string;
+  onEndReached?: () => void;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+function BubbleListInner<T>(props: BubbleListProps<T>) {
+  const {
+    items,
+    renderBubble,
+    keyExtractor,
+    onEndReached,
+    header,
+    footer,
+    style,
+    testID = 'bubble-list',
+  } = props;
+
+  const renderItem = useCallback(
+    ({item}: {item: T}) => <>{renderBubble(item)}</>,
+    [renderBubble]
+  );
+
+  const defaultKeyExtractor = useCallback(
+    (item: T, index: number) => {
+      if (keyExtractor) return keyExtractor(item);
+      const record = item as Record<string, unknown>;
+      return (record['id'] as string) ?? String(index);
+    },
+    [keyExtractor]
+  );
+
+  if (items.length === 0 && header) {
+    return (
+      <View style={[defaultStyles.container, style]} testID={testID}>
+        {header}
+      </View>
+    );
+  }
+
+  return (
+    <FlatList
+      data={items}
+      renderItem={renderItem}
+      keyExtractor={defaultKeyExtractor}
+      inverted
+      style={[defaultStyles.list, style]}
+      contentContainerStyle={defaultStyles.contentContainer}
+      onEndReached={onEndReached}
+      onEndReachedThreshold={0.3}
+      ListFooterComponent={footer ? <>{footer}</> : null}
+      showsVerticalScrollIndicator={false}
+      testID={testID}
+    />
+  );
+}
+
+const defaultStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  list: {
+    flex: 1,
+  },
+  contentContainer: {
+    paddingVertical: 8,
+  },
+});
+
+const BubbleList = React.memo(BubbleListInner) as typeof BubbleListInner;
+export default BubbleList;

package/src/bubble/index.md

@@ -0,0 +1,111 @@
+---
+title: Bubble 消息气泡
+nav:
+  title: 组件
+  path: /components
+---
+
+# Bubble 消息气泡
+
+消息气泡容器，根据 `role` 自动镜像布局。
+
+## 何时使用
+
+- 展示聊天消息（用户消息、AI 回复、系统消息）
+- 需要根据角色自动区分左右布局
+
+## 代码示例
+
+### 基本用法
+
+```tsx
+import { Bubble } from '@unif/react-native-chat';
+
+// 用户消息（右对齐）
+<Bubble role="user">你好，请帮我查询订单</Bubble>
+
+// AI 回复（左对齐）
+<Bubble role="assistant" name="小U" avatar={<Avatar name="AI" />}>
+  好的，正在为您查询...
+</Bubble>
+```
+
+### 自定义底部区域
+
+```tsx
+<Bubble role="assistant" footer={<Text>14:30</Text>}>
+  这是消息内容
+</Bubble>
+```
+
+### 语义样式覆盖
+
+```tsx
+<Bubble
+  role="user"
+  styles={{
+    root: { paddingHorizontal: 20 },
+    content: { backgroundColor: '#E8F0FE' },
+  }}
+>
+  自定义样式的消息
+</Bubble>
+```
+
+## API
+
+### BubbleProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| role | 消息角色 | `'user' \| 'assistant' \| 'system'` | - |
+| avatar | 头像（assistant/system 角色显示） | `ReactNode` | - |
+| name | 发送者名称 | `string` | - |
+| children | 消息内容 | `ReactNode` | - |
+| footer | 底部区域（时间戳、操作等） | `ReactNode` | - |
+| style | 外层容器样式 | `ViewStyle` | - |
+| styles | 语义样式覆盖 | `Partial<BubbleSemanticStyles>` | - |
+| testID | 测试标识 | `string` | - |
+
+### BubbleSemanticStyles
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| root | 外层容器 | `ViewStyle` |
+| avatar | 头像容器 | `ViewStyle` |
+| name | 名称文字 | `TextStyle` |
+| content | 内容区域 | `ViewStyle` |
+| footer | 底部区域 | `ViewStyle` |
+
+## Bubble.List 消息列表
+
+封装 inverted FlatList，消息从底部向上排列，支持泛型。
+
+### 基本用法
+
+```tsx
+import { Bubble } from '@unif/react-native-chat';
+
+<Bubble.List
+  items={messages}
+  header={<Welcome />}
+  renderBubble={(msg) => (
+    <Bubble role={msg.message.role}>
+      {msg.message.text}
+    </Bubble>
+  )}
+/>
+```
+
+### BubbleListProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| items | 消息数据 | `T[]` | - |
+| renderBubble | 渲染单条消息 | `(item: T) => ReactNode` | - |
+| keyExtractor | 自定义 key 提取 | `(item: T) => string` | 使用 `item.id` |
+| onEndReached | 滚动到底部回调（加载更多） | `() => void` | - |
+| header | 列表为空时的顶部占位 | `ReactNode` | - |
+| footer | 列表底部内容 | `ReactNode` | - |
+| style | 容器样式 | `ViewStyle` | - |
+| testID | 测试标识 | `string` | `'bubble-list'` |

package/src/card-wrapper/CardWrapper.tsx

@@ -0,0 +1,76 @@
+/**
+ * CardWrapper — 通用卡片路由容器
+ * registry 通过 props 注入（而非全局 import），更灵活
+ */
+
+import React from 'react';
+import {View, Text, StyleSheet, type ViewStyle} from 'react-native';
+import {chatTokens} from '../theme/tokens';
+
+export type CardComponentType = React.ComponentType<{
+  data: Record<string, unknown>;
+  actions: string[];
+}>;
+
+export interface CardWrapperProps {
+  cardType: string;
+  data: Record<string, unknown>;
+  actions: string[];
+  registry?: Record<string, CardComponentType>;
+  fallback?: React.ReactNode;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+const CardWrapper: React.FC<CardWrapperProps> = ({
+  cardType,
+  data,
+  actions,
+  registry = {},
+  fallback,
+  style,
+  testID,
+}) => {
+  const CardComponent = registry[cardType];
+
+  if (!CardComponent) {
+    return (
+      <View style={[defaultStyles.container, style]} testID={testID}>
+        {fallback ?? (
+          <Text style={defaultStyles.fallback}>
+            不支持的卡片类型: {cardType}
+          </Text>
+        )}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[defaultStyles.container, style]}
+      testID={testID ?? `card-${cardType}`}>
+      <CardComponent data={data} actions={actions} />
+    </View>
+  );
+};
+
+const defaultStyles = StyleSheet.create({
+  container: {
+    backgroundColor: chatTokens.colorBgElevated,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: chatTokens.colorBorder,
+    marginLeft: 8,
+    marginRight: 40,
+    marginBottom: 4,
+    overflow: 'hidden',
+    maxWidth: '85%',
+  },
+  fallback: {
+    padding: 12,
+    fontSize: 13,
+    color: chatTokens.colorTextSecondary,
+  },
+});
+
+export default React.memo(CardWrapper);

package/src/card-wrapper/index.md

@@ -0,0 +1,78 @@
+---
+title: CardWrapper 卡片容器
+nav:
+  title: 组件
+  path: /components
+---
+
+# CardWrapper 卡片容器
+
+通用卡片路由容器，通过 `registry` props 注入实现卡片类型到组件的映射。
+
+## 何时使用
+
+- AI 回复中包含结构化卡片内容（产品列表、表单、图表等）
+- 需要根据 `cardType` 动态渲染不同业务组件
+
+## 代码示例
+
+### 基本用法
+
+```tsx
+import { CardWrapper, type CardComponentType } from '@unif/react-native-chat';
+
+// 定义业务卡片
+const ProductCard: CardComponentType = ({ data, actions }) => (
+  <View>
+    <Text>{data.productName as string}</Text>
+    <Text>{data.price as string}</Text>
+  </View>
+);
+
+// 注册卡片
+const registry = {
+  product_list: ProductCard,
+};
+
+<CardWrapper
+  cardType="product_list"
+  data={{ productName: '基金A', price: '1.2345' }}
+  actions={['buy', 'detail']}
+  registry={registry}
+/>
+```
+
+### 自定义 fallback
+
+```tsx
+<CardWrapper
+  cardType="unknown_type"
+  data={{}}
+  actions={[]}
+  registry={registry}
+  fallback={<Text>暂不支持此类型</Text>}
+/>
+```
+
+## API
+
+### CardWrapperProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| cardType | 卡片类型标识 | `string` | - |
+| data | 卡片数据 | `Record<string, unknown>` | - |
+| actions | 可用操作列表 | `string[]` | - |
+| registry | 卡片注册表 | `Record<string, CardComponentType>` | `{}` |
+| fallback | 未知卡片类型的 fallback | `ReactNode` | 默认错误提示 |
+| style | 容器样式 | `ViewStyle` | - |
+| testID | 测试标识 | `string` | - |
+
+### CardComponentType
+
+```typescript
+type CardComponentType = React.ComponentType<{
+  data: Record<string, unknown>;
+  actions: string[];
+}>;
+```