@unif/react-native-chat 0.1.1 → 0.2.0

package/lib/commonjs/bubble/Bubble.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _tokens = require("../theme/tokens");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Bubble — 消息气泡容器
+ *
+ * 根据 role 自动镜像布局：
+ * - user → 右对齐浅色气泡 + 不对称圆角
+ * - assistant → 左侧 Avatar + 名称 + 内容
+ */
+
+const Bubble = ({
+  role,
+  avatar,
+  name,
+  children,
+  footer,
+  style,
+  styles: semanticStyles,
+  testID
+}) => {
+  if (role === 'user') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [defaultStyles.userRow, semanticStyles?.root, style],
+      testID: testID ?? 'bubble-user',
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: defaultStyles.userBubble,
+        children: typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: defaultStyles.userText,
+          children: children
+        }) : children
+      }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [defaultStyles.footer, semanticStyles?.footer],
+        children: footer
+      })]
+    });
+  }
+
+  // assistant / system
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [defaultStyles.assistantRow, semanticStyles?.root, style],
+    testID: testID ?? 'bubble-assistant',
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: defaultStyles.headerRow,
+      children: [avatar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [defaultStyles.avatarContainer, semanticStyles?.avatar],
+        children: avatar
+      }), name && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [defaultStyles.assistantName, semanticStyles?.name],
+        children: name
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [defaultStyles.contentArea, semanticStyles?.content],
+      children: children
+    }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [defaultStyles.footer, semanticStyles?.footer],
+      children: footer
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: defaultStyles.separator
+    })]
+  });
+};
+const defaultStyles = _reactNative.StyleSheet.create({
+  // Assistant
+  assistantRow: {
+    paddingHorizontal: _tokens.chatTokens.spaceMd,
+    paddingVertical: _tokens.chatTokens.spaceSm,
+    marginBottom: 12
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 6
+  },
+  avatarContainer: {
+    marginRight: 8
+  },
+  assistantName: {
+    fontSize: 13,
+    fontWeight: '500',
+    color: _tokens.chatTokens.colorTextSecondary
+  },
+  contentArea: {
+    paddingLeft: 36
+  },
+  separator: {
+    marginTop: 12,
+    marginLeft: 36,
+    height: _reactNative.StyleSheet.hairlineWidth,
+    backgroundColor: _tokens.chatTokens.colorBorder,
+    opacity: 0.5
+  },
+  footer: {
+    paddingLeft: 36,
+    marginTop: 4
+  },
+  // User
+  userRow: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    flexWrap: 'wrap',
+    paddingHorizontal: _tokens.chatTokens.spaceMd,
+    paddingVertical: _tokens.chatTokens.spaceSm,
+    marginBottom: _tokens.chatTokens.spaceSm
+  },
+  userBubble: {
+    backgroundColor: _tokens.chatTokens.colorBgUserMsg,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 6,
+    paddingHorizontal: _tokens.chatTokens.spaceMd,
+    paddingVertical: _tokens.chatTokens.space,
+    maxWidth: '75%'
+  },
+  userText: {
+    fontSize: _tokens.chatTokens.fontSize,
+    color: _tokens.chatTokens.colorText,
+    lineHeight: _tokens.chatTokens.lineHeight
+  }
+});
+var _default = exports.default = /*#__PURE__*/_react.default.memo(Bubble);
+//# sourceMappingURL=Bubble.js.map

package/lib/commonjs/bubble/Bubble.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_tokens","_jsxRuntime","e","__esModule","default","Bubble","role","avatar","name","children","footer","style","styles","semanticStyles","testID","jsxs","View","defaultStyles","userRow","root","jsx","userBubble","Text","userText","assistantRow","headerRow","avatarContainer","assistantName","contentArea","content","separator","StyleSheet","create","paddingHorizontal","chatTokens","spaceMd","paddingVertical","spaceSm","marginBottom","flexDirection","alignItems","marginRight","fontSize","fontWeight","color","colorTextSecondary","paddingLeft","marginTop","marginLeft","height","hairlineWidth","backgroundColor","colorBorder","opacity","justifyContent","flexWrap","colorBgUserMsg","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","space","maxWidth","colorText","lineHeight","_default","exports","React","memo"],"sourceRoot":"../../../src","sources":["bubble/Bubble.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/bubble/BubbleList.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Bubble.List — 消息列表
+ * 封装 inverted FlatList，自动滚动到底部
+ */
+
+function BubbleListInner(props) {
+  const {
+    items,
+    renderBubble,
+    keyExtractor,
+    onEndReached,
+    header,
+    footer,
+    style,
+    testID = 'bubble-list'
+  } = props;
+  const renderItem = (0, _react.useCallback)(({
+    item
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: renderBubble(item)
+  }), [renderBubble]);
+  const defaultKeyExtractor = (0, _react.useCallback)((item, index) => {
+    if (keyExtractor) return keyExtractor(item);
+    const record = item;
+    return record['id'] ?? String(index);
+  }, [keyExtractor]);
+  if (items.length === 0 && header) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [defaultStyles.container, style],
+      testID: testID,
+      children: header
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+    data: items,
+    renderItem: renderItem,
+    keyExtractor: defaultKeyExtractor,
+    inverted: true,
+    style: [defaultStyles.list, style],
+    contentContainerStyle: defaultStyles.contentContainer,
+    onEndReached: onEndReached,
+    onEndReachedThreshold: 0.3,
+    ListFooterComponent: footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: footer
+    }) : null,
+    showsVerticalScrollIndicator: false,
+    testID: testID
+  });
+}
+const defaultStyles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  list: {
+    flex: 1
+  },
+  contentContainer: {
+    paddingVertical: 8
+  }
+});
+const BubbleList = /*#__PURE__*/_react.default.memo(BubbleListInner);
+var _default = exports.default = BubbleList;
+//# sourceMappingURL=BubbleList.js.map

package/lib/commonjs/bubble/BubbleList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BubbleListInner","props","items","renderBubble","keyExtractor","onEndReached","header","footer","style","testID","renderItem","useCallback","item","jsx","Fragment","children","defaultKeyExtractor","index","record","String","length","View","defaultStyles","container","FlatList","data","inverted","list","contentContainerStyle","contentContainer","onEndReachedThreshold","ListFooterComponent","showsVerticalScrollIndicator","StyleSheet","create","flex","paddingVertical","BubbleList","React","memo","_default","exports"],"sourceRoot":"../../../src","sources":["bubble/BubbleList.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/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/lib/commonjs/card-wrapper/CardWrapper.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _tokens = require("../theme/tokens");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * CardWrapper — 通用卡片路由容器
+ * registry 通过 props 注入（而非全局 import），更灵活
+ */
+
+const CardWrapper = ({
+  cardType,
+  data,
+  actions,
+  registry = {},
+  fallback,
+  style,
+  testID
+}) => {
+  const CardComponent = registry[cardType];
+  if (!CardComponent) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [defaultStyles.container, style],
+      testID: testID,
+      children: fallback ?? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: defaultStyles.fallback,
+        children: ["\u4E0D\u652F\u6301\u7684\u5361\u7247\u7C7B\u578B: ", cardType]
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [defaultStyles.container, style],
+    testID: testID ?? `card-${cardType}`,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CardComponent, {
+      data: data,
+      actions: actions
+    })
+  });
+};
+const defaultStyles = _reactNative.StyleSheet.create({
+  container: {
+    backgroundColor: _tokens.chatTokens.colorBgElevated,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: _tokens.chatTokens.colorBorder,
+    marginLeft: 8,
+    marginRight: 40,
+    marginBottom: 4,
+    overflow: 'hidden',
+    maxWidth: '85%'
+  },
+  fallback: {
+    padding: 12,
+    fontSize: 13,
+    color: _tokens.chatTokens.colorTextSecondary
+  }
+});
+var _default = exports.default = /*#__PURE__*/_react.default.memo(CardWrapper);
+//# sourceMappingURL=CardWrapper.js.map

package/lib/commonjs/card-wrapper/CardWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_tokens","_jsxRuntime","e","__esModule","default","CardWrapper","cardType","data","actions","registry","fallback","style","testID","CardComponent","jsx","View","defaultStyles","container","children","jsxs","Text","StyleSheet","create","backgroundColor","chatTokens","colorBgElevated","borderRadius","borderWidth","borderColor","colorBorder","marginLeft","marginRight","marginBottom","overflow","maxWidth","padding","fontSize","color","colorTextSecondary","_default","exports","React","memo"],"sourceRoot":"../../../src","sources":["card-wrapper/CardWrapper.tsx"],"mappings":";;;;;;AAKA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAA2C,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAP3C;AACA;AACA;AACA;;AAqBA,MAAMG,WAAuC,GAAGA,CAAC;EAC/CC,QAAQ;EACRC,IAAI;EACJC,OAAO;EACPC,QAAQ,GAAG,CAAC,CAAC;EACbC,QAAQ;EACRC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,MAAMC,aAAa,GAAGJ,QAAQ,CAACH,QAAQ,CAAC;EAExC,IAAI,CAACO,aAAa,EAAE;IAClB,oBACE,IAAAZ,WAAA,CAAAa,GAAA,EAACf,YAAA,CAAAgB,IAAI;MAACJ,KAAK,EAAE,CAACK,aAAa,CAACC,SAAS,EAAEN,KAAK,CAAE;MAACC,MAAM,EAAEA,MAAO;MAAAM,QAAA,EAC3DR,QAAQ,iBACP,IAAAT,WAAA,CAAAkB,IAAA,EAACpB,YAAA,CAAAqB,IAAI;QAACT,KAAK,EAAEK,aAAa,CAACN,QAAS;QAAAQ,QAAA,GAAC,oDACzB,EAACZ,QAAQ;MAAA,CACf;IACP,CACG,CAAC;EAEX;EAEA,oBACE,IAAAL,WAAA,CAAAa,GAAA,EAACf,YAAA,CAAAgB,IAAI;IACHJ,KAAK,EAAE,CAACK,aAAa,CAACC,SAAS,EAAEN,KAAK,CAAE;IACxCC,MAAM,EAAEA,MAAM,IAAI,QAAQN,QAAQ,EAAG;IAAAY,QAAA,eACrC,IAAAjB,WAAA,CAAAa,GAAA,EAACD,aAAa;MAACN,IAAI,EAAEA,IAAK;MAACC,OAAO,EAAEA;IAAQ,CAAE;EAAC,CAC3C,CAAC;AAEX,CAAC;AAED,MAAMQ,aAAa,GAAGK,uBAAU,CAACC,MAAM,CAAC;EACtCL,SAAS,EAAE;IACTM,eAAe,EAAEC,kBAAU,CAACC,eAAe;IAC3CC,YAAY,EAAE,EAAE;IAChBC,WAAW,EAAE,CAAC;IACdC,WAAW,EAAEJ,kBAAU,CAACK,WAAW;IACnCC,UAAU,EAAE,CAAC;IACbC,WAAW,EAAE,EAAE;IACfC,YAAY,EAAE,CAAC;IACfC,QAAQ,EAAE,QAAQ;IAClBC,QAAQ,EAAE;EACZ,CAAC;EACDxB,QAAQ,EAAE;IACRyB,OAAO,EAAE,EAAE;IACXC,QAAQ,EAAE,EAAE;IACZC,KAAK,EAAEb,kBAAU,CAACc;EACpB;AACF,CAAC,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApC,OAAA,gBAEYqC,cAAK,CAACC,IAAI,CAACrC,WAAW,CAAC","ignoreList":[]}

package/lib/commonjs/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[];
+}>;
+```

package/lib/commonjs/conversations/Conversations.js

@@ -0,0 +1,184 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _tokens = require("../theme/tokens");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Conversations — 会话列表
+ *
+ * SectionList + 日期分组（今天/昨天/更早）
+ * 基于 ListItem 模式渲染
+ */
+
+function groupByDate(sessions) {
+  const now = new Date();
+  const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+  const yesterdayStart = todayStart - 86400000;
+  const groups = [];
+  const today = [];
+  const yesterday = [];
+  const earlier = [];
+  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 = ({
+  items,
+  activeId,
+  onSelect,
+  onDelete,
+  onNew,
+  groupByDate: shouldGroup = true,
+  header,
+  style,
+  styles: semanticStyles,
+  testID = 'conversations'
+}) => {
+  const sections = (0, _react.useMemo)(() => {
+    if (shouldGroup) {
+      return groupByDate(items);
+    }
+    return [{
+      title: '',
+      data: items
+    }];
+  }, [items, shouldGroup]);
+  const handleDelete = (0, _react.useCallback)(item => {
+    if (!onDelete) return;
+    _reactNative.Alert.alert('删除会话', `确定删除"${item.title}"？`, [{
+      text: '取消',
+      style: 'cancel'
+    }, {
+      text: '删除',
+      style: 'destructive',
+      onPress: () => onDelete(item.id)
+    }]);
+  }, [onDelete]);
+  const renderItem = (0, _react.useCallback)(({
+    item
+  }) => {
+    const isActive = item.id === activeId;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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}`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: defaultStyles.sessionTitle,
+        numberOfLines: 1,
+        children: item.title
+      })
+    });
+  }, [activeId, onSelect, handleDelete, semanticStyles, testID]);
+  const renderSectionHeader = (0, _react.useCallback)(({
+    section
+  }) => {
+    if (!section.title) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [defaultStyles.sectionHeader, semanticStyles?.sectionHeader],
+      children: section.title
+    });
+  }, [semanticStyles]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [defaultStyles.container, semanticStyles?.root, style],
+    testID: testID,
+    children: [header, onNew && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: defaultStyles.newButtonWrapper,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: [defaultStyles.newButton, semanticStyles?.newButton],
+        onPress: onNew,
+        testID: `${testID}-new`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: defaultStyles.newButtonText,
+          children: "\uFF0B \u65B0\u5EFA\u4F1A\u8BDD"
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.SectionList, {
+      sections: sections,
+      keyExtractor: item => item.id,
+      renderItem: renderItem,
+      renderSectionHeader: renderSectionHeader,
+      style: defaultStyles.list,
+      showsVerticalScrollIndicator: false,
+      stickySectionHeadersEnabled: false
+    })]
+  });
+};
+const defaultStyles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  newButtonWrapper: {
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 20
+  },
+  newButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '80%',
+    paddingVertical: 10,
+    borderRadius: _tokens.chatTokens.radiusFull,
+    borderWidth: 1,
+    borderColor: _tokens.chatTokens.colorPrimary
+  },
+  newButtonText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: _tokens.chatTokens.colorPrimary
+  },
+  sectionHeader: {
+    fontSize: 12,
+    color: _tokens.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: _tokens.chatTokens.colorText
+  },
+  list: {
+    flex: 1
+  }
+});
+var _default = exports.default = /*#__PURE__*/_react.default.memo(Conversations);
+//# sourceMappingURL=Conversations.js.map