@unif/react-native-chat 0.1.0

package/src/conversations/Conversations.tsx

@@ -0,0 +1,236 @@
+/**
+ * Conversations — 会话列表
+ *
+ * SectionList + 日期分组（今天/昨天/更早）
+ * 基于 ListItem 模式渲染
+ */
+
+import React, {useCallback, useMemo} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Alert,
+  SectionList,
+  StyleSheet,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import {chatTokens} from '../theme/tokens';
+
+export interface ConversationItem {
+  id: string;
+  title: string;
+  lastMessage?: string;
+  timestamp: number;
+  messageCount?: number;
+}
+
+export interface ConversationsSemanticStyles {
+  root?: ViewStyle;
+  newButton?: ViewStyle;
+  sectionHeader?: TextStyle;
+  item?: ViewStyle;
+  itemActive?: ViewStyle;
+}
+
+export interface ConversationsProps {
+  items: ConversationItem[];
+  activeId?: string;
+  onSelect: (id: string) => void;
+  onDelete?: (id: string) => void;
+  onNew?: () => void;
+  groupByDate?: boolean;
+  header?: React.ReactNode;
+  style?: ViewStyle;
+  styles?: Partial<ConversationsSemanticStyles>;
+  testID?: string;
+}
+
+function groupByDate(sessions: ConversationItem[]) {
+  const now = new Date();
+  const todayStart = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate()
+  ).getTime();
+  const yesterdayStart = todayStart - 86400000;
+
+  const groups: { title: string; data: ConversationItem[] }[] = [];
+  const today: ConversationItem[] = [];
+  const yesterday: ConversationItem[] = [];
+  const earlier: ConversationItem[] = [];
+
+  for (const s of sessions) {
+    if (s.timestamp >= todayStart) {
+      today.push(s);
+    } else if (s.timestamp >= yesterdayStart) {
+      yesterday.push(s);
+    } else {
+      earlier.push(s);
+    }
+  }
+
+  if (today.length > 0) groups.push({ title: '今天', data: today });
+  if (yesterday.length > 0) groups.push({ title: '昨天', data: yesterday });
+  if (earlier.length > 0) groups.push({ title: '更早', data: earlier });
+
+  return groups;
+}
+
+const Conversations: React.FC<ConversationsProps> = ({
+  items,
+  activeId,
+  onSelect,
+  onDelete,
+  onNew,
+  groupByDate: shouldGroup = true,
+  header,
+  style,
+  styles: semanticStyles,
+  testID = 'conversations',
+}) => {
+  const sections = useMemo(() => {
+    if (shouldGroup) {
+      return groupByDate(items);
+    }
+    return [{ title: '', data: items }];
+  }, [items, shouldGroup]);
+
+  const handleDelete = useCallback(
+    (item: ConversationItem) => {
+      if (!onDelete) return;
+      Alert.alert('删除会话', `确定删除"${item.title}"？`, [
+        { text: '取消', style: 'cancel' },
+        {
+          text: '删除',
+          style: 'destructive',
+          onPress: () => onDelete(item.id),
+        },
+      ]);
+    },
+    [onDelete]
+  );
+
+  const renderItem = useCallback(
+    ({ item }: { item: ConversationItem }) => {
+      const isActive = item.id === activeId;
+      return (
+        <TouchableOpacity
+          style={[
+            defaultStyles.sessionItem,
+            semanticStyles?.item,
+            isActive && defaultStyles.sessionItemActive,
+            isActive && semanticStyles?.itemActive,
+          ]}
+          onPress={() => onSelect(item.id)}
+          onLongPress={() => handleDelete(item)}
+          activeOpacity={0.7}
+          testID={`${testID}-item-${item.id}`}>
+          <Text style={defaultStyles.sessionTitle} numberOfLines={1}>
+            {item.title}
+          </Text>
+        </TouchableOpacity>
+      );
+    },
+    [activeId, onSelect, handleDelete, semanticStyles, testID]
+  );
+
+  const renderSectionHeader = useCallback(
+    ({ section }: { section: { title: string } }) => {
+      if (!section.title) return null;
+      return (
+        <Text
+          style={[
+            defaultStyles.sectionHeader,
+            semanticStyles?.sectionHeader,
+          ]}>
+          {section.title}
+        </Text>
+      );
+    },
+    [semanticStyles]
+  );
+
+  return (
+    <View
+      style={[defaultStyles.container, semanticStyles?.root, style]}
+      testID={testID}>
+      {header}
+
+      {onNew && (
+        <View style={defaultStyles.newButtonWrapper}>
+          <TouchableOpacity
+            style={[defaultStyles.newButton, semanticStyles?.newButton]}
+            onPress={onNew}
+            testID={`${testID}-new`}>
+            <Text style={defaultStyles.newButtonText}>＋ 新建会话</Text>
+          </TouchableOpacity>
+        </View>
+      )}
+
+      <SectionList
+        sections={sections}
+        keyExtractor={(item) => item.id}
+        renderItem={renderItem}
+        renderSectionHeader={renderSectionHeader}
+        style={defaultStyles.list}
+        showsVerticalScrollIndicator={false}
+        stickySectionHeadersEnabled={false}
+      />
+    </View>
+  );
+};
+
+const defaultStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  newButtonWrapper: {
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+  },
+  newButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '80%',
+    paddingVertical: 10,
+    borderRadius: chatTokens.radiusFull,
+    borderWidth: 1,
+    borderColor: chatTokens.colorPrimary,
+  },
+  newButtonText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: chatTokens.colorPrimary,
+  },
+  sectionHeader: {
+    fontSize: 12,
+    color: chatTokens.colorTextSecondary,
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    paddingBottom: 6,
+  },
+  sessionItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+  },
+  sessionItemActive: {
+    backgroundColor: '#F3F4F6',
+  },
+  sessionTitle: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: '500',
+    color: chatTokens.colorText,
+  },
+  list: {
+    flex: 1,
+  },
+});
+
+export default React.memo(Conversations);

package/src/conversations/index.md

@@ -0,0 +1,90 @@
+---
+title: Conversations 会话列表
+nav:
+  title: 组件
+  path: /components
+---
+
+# Conversations 会话列表
+
+按日期分组的会话列表组件，支持新建、选中、删除操作。
+
+## 何时使用
+
+- 展示聊天历史会话列表
+- 需要按日期分组（今天/昨天/更早）
+- 侧边栏会话管理
+
+## 代码示例
+
+### 基本用法
+
+```tsx
+import { Conversations } from '@unif/react-native-chat';
+
+<Conversations
+  items={sessions}
+  activeId={currentSessionId}
+  onSelect={(id) => switchSession(id)}
+  onDelete={(id) => deleteSession(id)}
+  onNew={() => createNewSession()}
+/>
+```
+
+### 不分组
+
+```tsx
+<Conversations
+  items={sessions}
+  activeId={currentSessionId}
+  onSelect={handleSelect}
+  groupByDate={false}
+/>
+```
+
+### 自定义头部
+
+```tsx
+<Conversations
+  items={sessions}
+  onSelect={handleSelect}
+  header={<DrawerHeader />}
+/>
+```
+
+## API
+
+### ConversationsProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| items | 会话列表数据 | `ConversationItem[]` | - |
+| activeId | 当前选中会话 ID | `string` | - |
+| onSelect | 选中会话回调 | `(id: string) => void` | - |
+| onDelete | 删除会话回调（长按触发） | `(id: string) => void` | - |
+| onNew | 新建会话回调 | `() => void` | - |
+| groupByDate | 按日期分组 | `boolean` | `true` |
+| header | 列表顶部内容 | `ReactNode` | - |
+| style | 容器样式 | `ViewStyle` | - |
+| styles | 语义样式 | `Partial<ConversationsSemanticStyles>` | - |
+| testID | 测试标识 | `string` | `'conversations'` |
+
+### ConversationItem
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| id | 唯一标识 | `string` |
+| title | 会话标题 | `string` |
+| lastMessage | 最后一条消息 | `string` |
+| timestamp | 时间戳（毫秒） | `number` |
+| messageCount | 消息数量 | `number` |
+
+### ConversationsSemanticStyles
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| root | 外层容器 | `ViewStyle` |
+| newButton | 新建按钮 | `ViewStyle` |
+| sectionHeader | 分组标题 | `TextStyle` |
+| item | 会话项 | `ViewStyle` |
+| itemActive | 选中态会话项 | `ViewStyle` |

package/src/index.tsx

@@ -0,0 +1,41 @@
+/**
+ * @unif/react-native-chat
+ * AI 聊天 UI 组件库 — Bubble、Sender、Conversations、Prompts、Welcome、CardWrapper
+ */
+
+// Bubble
+export {default as Bubble} from './bubble/Bubble';
+export type {BubbleProps, BubbleSemanticStyles} from './bubble/Bubble';
+export {default as BubbleList} from './bubble/BubbleList';
+export type {BubbleListProps} from './bubble/BubbleList';
+
+// Sender
+export {default as Sender} from './sender/Sender';
+export type {SenderProps, SenderSemanticStyles, ActionSheetOption} from './sender/Sender';
+
+// Conversations
+export {default as Conversations} from './conversations/Conversations';
+export type {
+  ConversationsProps,
+  ConversationsSemanticStyles,
+  ConversationItem,
+} from './conversations/Conversations';
+
+// Prompts
+export {default as Prompts} from './prompts/Prompts';
+export type {PromptsProps, PromptsSemanticStyles, PromptItem} from './prompts/Prompts';
+
+// Welcome
+export {default as Welcome} from './welcome/Welcome';
+export type {
+  WelcomeProps,
+  WelcomeSemanticStyles,
+  WelcomeQuickStart,
+} from './welcome/Welcome';
+
+// CardWrapper
+export {default as CardWrapper} from './card-wrapper/CardWrapper';
+export type {CardWrapperProps, CardComponentType} from './card-wrapper/CardWrapper';
+
+// Theme
+export {chatTokens} from './theme/tokens';

package/src/prompts/Prompts.tsx

@@ -0,0 +1,123 @@
+/**
+ * Prompts — 建议提示
+ * 水平 ScrollView + Chip 列表
+ */
+
+import React from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import {chatTokens} from '../theme/tokens';
+
+export interface PromptItem {
+  id: string;
+  label: string;
+}
+
+export interface PromptsSemanticStyles {
+  root?: ViewStyle;
+  chip?: ViewStyle;
+  chipText?: TextStyle;
+}
+
+export interface PromptsProps {
+  items: PromptItem[];
+  onSelect: (item: PromptItem) => void;
+  disabled?: boolean;
+  wrap?: boolean;
+  style?: ViewStyle;
+  styles?: Partial<PromptsSemanticStyles>;
+  testID?: string;
+}
+
+const Prompts: React.FC<PromptsProps> = ({
+  items,
+  onSelect,
+  disabled = false,
+  wrap = false,
+  style,
+  styles: semanticStyles,
+  testID = 'prompts',
+}) => {
+  if (items.length === 0) return null;
+
+  const renderChips = () =>
+    items.map((item) => (
+      <TouchableOpacity
+        key={item.id}
+        style={[defaultStyles.chip, semanticStyles?.chip]}
+        onPress={() => !disabled && onSelect(item)}
+        activeOpacity={disabled ? 1 : 0.7}
+        disabled={disabled}
+        testID={`${testID}-${item.id}`}>
+        <Text
+          style={[
+            defaultStyles.chipText,
+            semanticStyles?.chipText,
+            disabled && defaultStyles.chipTextDisabled,
+          ]}
+          numberOfLines={1}>
+          {item.label}
+        </Text>
+      </TouchableOpacity>
+    ));
+
+  if (wrap) {
+    return (
+      <View
+        style={[defaultStyles.container, defaultStyles.wrapContainer, semanticStyles?.root, style]}
+        testID={testID}>
+        {renderChips()}
+      </View>
+    );
+  }
+
+  return (
+    <View style={[defaultStyles.container, semanticStyles?.root, style]} testID={testID}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={defaultStyles.scrollContent}>
+        {renderChips()}
+      </ScrollView>
+    </View>
+  );
+};
+
+const defaultStyles = StyleSheet.create({
+  container: {
+    paddingVertical: 8,
+    backgroundColor: 'transparent',
+  },
+  scrollContent: {
+    paddingHorizontal: 12,
+    gap: 8,
+  },
+  wrapContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingHorizontal: 12,
+    gap: 8,
+  },
+  chip: {
+    backgroundColor: '#F3F4F6',
+    borderRadius: 16,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+  },
+  chipText: {
+    fontSize: 13,
+    color: chatTokens.colorText,
+  },
+  chipTextDisabled: {
+    color: chatTokens.colorTextPlaceholder,
+  },
+});
+
+export default React.memo(Prompts);

package/src/prompts/index.md

@@ -0,0 +1,81 @@
+---
+title: Prompts 建议提示
+nav:
+  title: 组件
+  path: /components
+---
+
+# Prompts 建议提示
+
+水平滚动的建议提示 Chip 列表，可选换行模式。
+
+## 何时使用
+
+- AI 回复后展示后续建议问题
+- 欢迎页展示快捷提问入口
+
+## 代码示例
+
+### 水平滚动
+
+```tsx
+import { Prompts } from '@unif/react-native-chat';
+
+<Prompts
+  items={[
+    { id: '1', label: '查询余额' },
+    { id: '2', label: '转账汇款' },
+    { id: '3', label: '理财推荐' },
+  ]}
+  onSelect={(item) => console.log(item.label)}
+/>
+```
+
+### 换行模式
+
+```tsx
+<Prompts
+  items={suggestions}
+  onSelect={handleSelect}
+  wrap={true}
+/>
+```
+
+### 禁用状态
+
+```tsx
+<Prompts
+  items={suggestions}
+  onSelect={handleSelect}
+  disabled={isRequesting}
+/>
+```
+
+## API
+
+### PromptsProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| items | 建议项列表 | `PromptItem[]` | - |
+| onSelect | 选中回调 | `(item: PromptItem) => void` | - |
+| disabled | 禁用状态 | `boolean` | `false` |
+| wrap | 换行模式（FlexWrap） | `boolean` | `false` |
+| style | 容器样式 | `ViewStyle` | - |
+| styles | 语义样式 | `Partial<PromptsSemanticStyles>` | - |
+| testID | 测试标识 | `string` | `'prompts'` |
+
+### PromptItem
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| id | 唯一标识 | `string` |
+| label | 显示文字 | `string` |
+
+### PromptsSemanticStyles
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| root | 外层容器 | `ViewStyle` |
+| chip | Chip 样式 | `ViewStyle` |
+| chipText | Chip 文字 | `TextStyle` |