@unif/react-native-chat 0.2.0 → 0.2.2

package/src/bubble/Bubble.tsx

@@ -6,7 +6,7 @@
  * - assistant → 左侧 Avatar + 名称 + 内容
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   View,
   Text,
@@ -14,7 +14,8 @@ import {
   type ViewStyle,
   type TextStyle,
 } from 'react-native';
-import {chatTokens} from '../theme/tokens';
+import { useTokens } from '@unif/react-native-ui';
+import { chatTokens } from '../theme/tokens';
 
 export interface BubbleSemanticStyles {
   root?: ViewStyle;
@@ -45,22 +46,88 @@ const Bubble: React.FC<BubbleProps> = ({
   styles: semanticStyles,
   testID,
 }) => {
+  const t = useTokens();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        // Assistant
+        assistantRow: {
+          paddingHorizontal: t.spaceMd,
+          paddingVertical: t.spaceSm,
+          marginBottom: 12,
+        },
+        headerRow: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginBottom: 6,
+        },
+        avatarContainer: {
+          marginRight: 8,
+        },
+        assistantName: {
+          fontSize: 13,
+          fontWeight: '500',
+          color: t.colorTextSecondary,
+        },
+        contentArea: {
+          paddingLeft: 36,
+        },
+        separator: {
+          marginTop: 12,
+          marginLeft: 36,
+          height: StyleSheet.hairlineWidth,
+          backgroundColor: t.colorBorder,
+          opacity: 0.5,
+        },
+        footer: {
+          paddingLeft: 36,
+          marginTop: 4,
+        },
+
+        // User
+        userRow: {
+          flexDirection: 'row',
+          justifyContent: 'flex-end',
+          flexWrap: 'wrap',
+          paddingHorizontal: t.spaceMd,
+          paddingVertical: t.spaceSm,
+          marginBottom: t.spaceSm,
+        },
+        userBubble: {
+          backgroundColor: chatTokens.colorBgUserMsg,
+          borderTopLeftRadius: 20,
+          borderTopRightRadius: 20,
+          borderBottomLeftRadius: 20,
+          borderBottomRightRadius: 6,
+          paddingHorizontal: t.spaceMd,
+          paddingVertical: t.space,
+          maxWidth: '75%',
+        },
+        userText: {
+          fontSize: t.fontSize,
+          color: t.colorText,
+          lineHeight: t.lineHeight,
+        },
+      }),
+    [t]
+  );
+
   if (role === 'user') {
     return (
       <View
-        style={[defaultStyles.userRow, semanticStyles?.root, style]}
-        testID={testID ?? 'bubble-user'}>
-        <View style={defaultStyles.userBubble}>
+        style={[styles.userRow, semanticStyles?.root, style]}
+        testID={testID ?? 'bubble-user'}
+      >
+        <View style={styles.userBubble}>
           {typeof children === 'string' ? (
-            <Text style={defaultStyles.userText}>{children}</Text>
+            <Text style={styles.userText}>{children}</Text>
           ) : (
             children
           )}
         </View>
         {footer && (
-          <View style={[defaultStyles.footer, semanticStyles?.footer]}>
-            {footer}
-          </View>
+          <View style={[styles.footer, semanticStyles?.footer]}>{footer}</View>
         )}
       </View>
     );
@@ -69,92 +136,30 @@ const Bubble: React.FC<BubbleProps> = ({
   // assistant / system
   return (
     <View
-      style={[defaultStyles.assistantRow, semanticStyles?.root, style]}
-      testID={testID ?? 'bubble-assistant'}>
-      <View style={defaultStyles.headerRow}>
+      style={[styles.assistantRow, semanticStyles?.root, style]}
+      testID={testID ?? 'bubble-assistant'}
+    >
+      <View style={styles.headerRow}>
         {avatar && (
-          <View style={[defaultStyles.avatarContainer, semanticStyles?.avatar]}>
+          <View style={[styles.avatarContainer, semanticStyles?.avatar]}>
             {avatar}
           </View>
         )}
         {name && (
-          <Text style={[defaultStyles.assistantName, semanticStyles?.name]}>
+          <Text style={[styles.assistantName, semanticStyles?.name]}>
             {name}
           </Text>
         )}
       </View>
-      <View style={[defaultStyles.contentArea, semanticStyles?.content]}>
+      <View style={[styles.contentArea, semanticStyles?.content]}>
         {children}
       </View>
       {footer && (
-        <View style={[defaultStyles.footer, semanticStyles?.footer]}>
-          {footer}
-        </View>
+        <View style={[styles.footer, semanticStyles?.footer]}>{footer}</View>
       )}
-      <View style={defaultStyles.separator} />
+      <View style={styles.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/card-wrapper/CardWrapper.tsx

@@ -3,9 +3,9 @@
  * registry 通过 props 注入（而非全局 import），更灵活
  */
 
-import React from 'react';
-import {View, Text, StyleSheet, type ViewStyle} from 'react-native';
-import {chatTokens} from '../theme/tokens';
+import React, { useMemo } from 'react';
+import { View, Text, StyleSheet, type ViewStyle } from 'react-native';
+import { useTokens } from '@unif/react-native-ui';
 
 export type CardComponentType = React.ComponentType<{
   data: Record<string, unknown>;
@@ -31,46 +31,48 @@ const CardWrapper: React.FC<CardWrapperProps> = ({
   style,
   testID,
 }) => {
+  const t = useTokens();
+
+  const ds = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          backgroundColor: t.colorBgElevated,
+          borderRadius: 12,
+          borderWidth: 1,
+          borderColor: t.colorBorder,
+          marginLeft: 8,
+          marginRight: 40,
+          marginBottom: 4,
+          overflow: 'hidden',
+          maxWidth: '85%',
+        },
+        fallback: {
+          padding: 12,
+          fontSize: 13,
+          color: t.colorTextSecondary,
+        },
+      }),
+    [t]
+  );
+
   const CardComponent = registry[cardType];
 
   if (!CardComponent) {
     return (
-      <View style={[defaultStyles.container, style]} testID={testID}>
+      <View style={[ds.container, style]} testID={testID}>
         {fallback ?? (
-          <Text style={defaultStyles.fallback}>
-            不支持的卡片类型: {cardType}
-          </Text>
+          <Text style={ds.fallback}>不支持的卡片类型: {cardType}</Text>
         )}
       </View>
     );
   }
 
   return (
-    <View
-      style={[defaultStyles.container, style]}
-      testID={testID ?? `card-${cardType}`}>
+    <View style={[ds.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/conversations/Conversations.tsx

@@ -2,21 +2,21 @@
  * Conversations — 会话列表
  *
  * SectionList + 日期分组（今天/昨天/更早）
- * 基于 ListItem 模式渲染
+ * 长按弹出 Menu 菜单
  */
 
-import React, {useCallback, useMemo} from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import {
   View,
   Text,
   TouchableOpacity,
-  Alert,
   SectionList,
   StyleSheet,
   type ViewStyle,
   type TextStyle,
 } from 'react-native';
-import {chatTokens} from '../theme/tokens';
+import { useTokens, Menu } from '@unif/react-native-ui';
+import type { Action } from '@unif/react-native-ui';
 
 export interface ConversationItem {
   id: string;
@@ -38,16 +38,17 @@ export interface ConversationsProps {
   items: ConversationItem[];
   activeId?: string;
   onSelect: (id: string) => void;
-  onDelete?: (id: string) => void;
   onNew?: () => void;
   groupByDate?: boolean;
   header?: React.ReactNode;
+  menus?: Action[] | ((item: ConversationItem) => Action[]);
+  onMenuAction?: (action: Action, item: ConversationItem) => void;
   style?: ViewStyle;
   styles?: Partial<ConversationsSemanticStyles>;
   testID?: string;
 }
 
-function groupByDate(sessions: ConversationItem[]) {
+function groupByDateFn(sessions: ConversationItem[]) {
   const now = new Date();
   const todayStart = new Date(
     now.getFullYear(),
@@ -78,93 +79,202 @@ function groupByDate(sessions: ConversationItem[]) {
   return groups;
 }
 
+interface MenuState {
+  visible: boolean;
+  item: ConversationItem | null;
+  layout: { x: number; y: number; width: number; height: number };
+}
+
+const initialMenuState: MenuState = {
+  visible: false,
+  item: null,
+  layout: { x: 0, y: 0, width: 0, height: 0 },
+};
+
 const Conversations: React.FC<ConversationsProps> = ({
   items,
   activeId,
   onSelect,
-  onDelete,
   onNew,
   groupByDate: shouldGroup = true,
   header,
+  menus,
+  onMenuAction,
   style,
   styles: semanticStyles,
   testID = 'conversations',
 }) => {
+  const t = useTokens();
+  const [menuState, setMenuState] = useState<MenuState>(initialMenuState);
+  const itemRefs = useRef<Record<string, View | null>>({});
+
   const sections = useMemo(() => {
     if (shouldGroup) {
-      return groupByDate(items);
+      return groupByDateFn(items);
     }
     return [{ title: '', data: items }];
   }, [items, shouldGroup]);
 
-  const handleDelete = useCallback(
+  const closeMenu = useCallback(() => {
+    setMenuState(initialMenuState);
+  }, []);
+
+  const handleLongPress = useCallback(
     (item: ConversationItem) => {
-      if (!onDelete) return;
-      Alert.alert('删除会话', `确定删除"${item.title}"？`, [
-        { text: '取消', style: 'cancel' },
-        {
-          text: '删除',
-          style: 'destructive',
-          onPress: () => onDelete(item.id),
-        },
-      ]);
+      if (!menus) return;
+      const ref = itemRefs.current[item.id];
+      if (ref) {
+        ref.measureInWindow((x, y, width, height) => {
+          setMenuState({
+            visible: true,
+            item,
+            layout: { x, y, width, height },
+          });
+        });
+      }
+    },
+    [menus]
+  );
+
+  const handleMenuAction = useCallback(
+    (action: Action) => {
+      const item = menuState.item;
+      if (item && onMenuAction) {
+        onMenuAction(action, item);
+      }
+    },
+    [menuState.item, onMenuAction]
+  );
+
+  const setItemRef = useCallback(
+    (id: string) => (ref: View | null) => {
+      itemRefs.current[id] = ref;
     },
-    [onDelete]
+    []
+  );
+
+  const menuActions = useMemo(() => {
+    if (!menus || !menuState.item) return [];
+    if (typeof menus === 'function') {
+      return menus(menuState.item);
+    }
+    return menus;
+  }, [menus, menuState.item]);
+
+  const ds = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+        },
+        newButtonWrapper: {
+          alignItems: 'center',
+          paddingVertical: 12,
+          paddingHorizontal: 20,
+        },
+        newButton: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '80%',
+          paddingVertical: 10,
+          borderRadius: t.radiusFull,
+          borderWidth: 1,
+          borderColor: t.colorPrimary,
+        },
+        newButtonText: {
+          fontSize: 14,
+          fontWeight: '500',
+          color: t.colorPrimary,
+        },
+        sectionHeader: {
+          fontSize: 12,
+          color: t.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: t.colorText,
+        },
+        list: {
+          flex: 1,
+        },
+      }),
+    [t]
   );
 
   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>
+        <View ref={setItemRef(item.id)} collapsable={false}>
+          <TouchableOpacity
+            style={[
+              ds.sessionItem,
+              semanticStyles?.item,
+              isActive && ds.sessionItemActive,
+              isActive && semanticStyles?.itemActive,
+            ]}
+            onPress={() => onSelect(item.id)}
+            onLongPress={() => handleLongPress(item)}
+            activeOpacity={0.7}
+            testID={`${testID}-item-${item.id}`}
+          >
+            <Text style={ds.sessionTitle} numberOfLines={1}>
+              {item.title}
+            </Text>
+          </TouchableOpacity>
+        </View>
       );
     },
-    [activeId, onSelect, handleDelete, semanticStyles, testID]
+    [
+      activeId,
+      onSelect,
+      handleLongPress,
+      semanticStyles,
+      testID,
+      setItemRef,
+      ds,
+    ]
   );
 
   const renderSectionHeader = useCallback(
     ({ section }: { section: { title: string } }) => {
       if (!section.title) return null;
       return (
-        <Text
-          style={[
-            defaultStyles.sectionHeader,
-            semanticStyles?.sectionHeader,
-          ]}>
+        <Text style={[ds.sectionHeader, semanticStyles?.sectionHeader]}>
           {section.title}
         </Text>
       );
     },
-    [semanticStyles]
+    [semanticStyles, ds]
   );
 
   return (
-    <View
-      style={[defaultStyles.container, semanticStyles?.root, style]}
-      testID={testID}>
+    <View style={[ds.container, semanticStyles?.root, style]} testID={testID}>
       {header}
 
       {onNew && (
-        <View style={defaultStyles.newButtonWrapper}>
+        <View style={ds.newButtonWrapper}>
           <TouchableOpacity
-            style={[defaultStyles.newButton, semanticStyles?.newButton]}
+            style={[ds.newButton, semanticStyles?.newButton]}
             onPress={onNew}
-            testID={`${testID}-new`}>
-            <Text style={defaultStyles.newButtonText}>＋ 新建会话</Text>
+            testID={`${testID}-new`}
+          >
+            <Text style={ds.newButtonText}>＋ 新建会话</Text>
           </TouchableOpacity>
         </View>
       )}
@@ -174,63 +284,23 @@ const Conversations: React.FC<ConversationsProps> = ({
         keyExtractor={(item) => item.id}
         renderItem={renderItem}
         renderSectionHeader={renderSectionHeader}
-        style={defaultStyles.list}
+        style={ds.list}
         showsVerticalScrollIndicator={false}
         stickySectionHeadersEnabled={false}
       />
+
+      {menus && (
+        <Menu
+          visible={menuState.visible}
+          onClose={closeMenu}
+          anchorLayout={menuState.layout}
+          actions={menuActions}
+          onAction={handleMenuAction}
+          testID={`${testID}-menu`}
+        />
+      )}
     </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/index.tsx

@@ -49,4 +49,7 @@ export type {
 } from './card-wrapper/CardWrapper';
 
 // Theme
-export { chatTokens, configure } from './theme/tokens';
+export { chatTokens } from './theme/tokens';
+
+// Re-export Menu types from UI lib
+export type { Action } from '@unif/react-native-ui';