@unif/react-native-chat 0.2.1 → 0.2.3

package/src/prompts/Prompts.tsx

@@ -3,7 +3,7 @@
  * 水平 ScrollView + Chip 列表
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   View,
   Text,
@@ -13,7 +13,7 @@ import {
   type ViewStyle,
   type TextStyle,
 } from 'react-native';
-import {chatTokens} from '../theme/tokens';
+import { useTokens } from '@unif/react-native-ui';
 
 export interface PromptItem {
   id: string;
@@ -45,24 +45,62 @@ const Prompts: React.FC<PromptsProps> = ({
   styles: semanticStyles,
   testID = 'prompts',
 }) => {
+  const t = useTokens();
+
+  const ds = useMemo(
+    () =>
+      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: t.colorText,
+        },
+        chipTextDisabled: {
+          color: t.colorTextPlaceholder,
+        },
+      }),
+    [t]
+  );
+
   if (items.length === 0) return null;
 
   const renderChips = () =>
     items.map((item) => (
       <TouchableOpacity
         key={item.id}
-        style={[defaultStyles.chip, semanticStyles?.chip]}
+        style={[ds.chip, semanticStyles?.chip]}
         onPress={() => !disabled && onSelect(item)}
         activeOpacity={disabled ? 1 : 0.7}
         disabled={disabled}
-        testID={`${testID}-${item.id}`}>
+        testID={`${testID}-${item.id}`}
+      >
         <Text
           style={[
-            defaultStyles.chipText,
+            ds.chipText,
             semanticStyles?.chipText,
-            disabled && defaultStyles.chipTextDisabled,
+            disabled && ds.chipTextDisabled,
           ]}
-          numberOfLines={1}>
+          numberOfLines={1}
+        >
           {item.label}
         </Text>
       </TouchableOpacity>
@@ -71,53 +109,25 @@ const Prompts: React.FC<PromptsProps> = ({
   if (wrap) {
     return (
       <View
-        style={[defaultStyles.container, defaultStyles.wrapContainer, semanticStyles?.root, style]}
-        testID={testID}>
+        style={[ds.container, ds.wrapContainer, semanticStyles?.root, style]}
+        testID={testID}
+      >
         {renderChips()}
       </View>
     );
   }
 
   return (
-    <View style={[defaultStyles.container, semanticStyles?.root, style]} testID={testID}>
+    <View style={[ds.container, semanticStyles?.root, style]} testID={testID}>
       <ScrollView
         horizontal
         showsHorizontalScrollIndicator={false}
-        contentContainerStyle={defaultStyles.scrollContent}>
+        contentContainerStyle={ds.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/sender/Sender.tsx

@@ -5,7 +5,7 @@
  * 基于 UI 库 Input + ActionSheet + WaveAnimation + Button 构建
  */
 
-import React, { useState, useCallback, useRef } from 'react';
+import React, { useState, useCallback, useRef, useMemo } from 'react';
 import {
   View,
   Text,
@@ -15,7 +15,7 @@ import {
   PanResponder,
   type ViewStyle,
 } from 'react-native';
-import { chatTokens } from '../theme/tokens';
+import { useTokens } from '@unif/react-native-ui';
 import Icon from 'react-native-vector-icons/Ionicons';
 
 export interface ActionSheetOption {
@@ -47,7 +47,6 @@ export interface SenderProps {
   style?: ViewStyle;
   styles?: Partial<SenderSemanticStyles>;
   testID?: string;
-  // 渲染注入点（允许使用方注入 UI 库组件）
   renderInput?: (props: {
     value: string;
     onChangeText: (text: string) => void;
@@ -89,6 +88,7 @@ const Sender: React.FC<SenderProps> = ({
   renderActionSheet,
   renderWaveAnimation,
 }) => {
+  const t = useTokens();
   const [mode, setMode] = useState<'text' | 'voice'>('text');
   const [expanded, setExpanded] = useState(false);
   const [text, setText] = useState('');
@@ -155,25 +155,117 @@ const Sender: React.FC<SenderProps> = ({
 
   const hasText = text.trim().length > 0;
 
+  const ds = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          paddingHorizontal: t.space,
+          paddingTop: t.spaceSm,
+          paddingBottom: Platform.OS === 'ios' ? t.spaceSm : t.space,
+        },
+        collapsedBar: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          backgroundColor: t.colorBgElevated,
+          borderRadius: t.radiusXl,
+          height: 46,
+          paddingHorizontal: 12,
+          ...t.shadow,
+        },
+        modeButton: {
+          padding: 4,
+        },
+        placeholderArea: {
+          flex: 1,
+          justifyContent: 'center',
+          paddingLeft: 8,
+        },
+        placeholderText: {
+          fontSize: t.fontSize,
+          color: t.colorTextPlaceholder,
+        },
+        voiceArea: {
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
+        voiceText: {
+          fontSize: t.fontSize,
+          fontWeight: '500',
+          color: t.colorText,
+        },
+        plusButton: {
+          padding: 4,
+        },
+        expandedFallback: {
+          backgroundColor: t.colorBgElevated,
+          borderRadius: 12,
+          padding: 12,
+          ...t.shadow,
+        },
+        expandedInputArea: {
+          minHeight: 40,
+          maxHeight: 100,
+        },
+        expandedText: {
+          fontSize: t.fontSize,
+          color: t.colorText,
+        },
+        toolbar: {
+          flexDirection: 'row',
+          alignItems: 'center',
+        },
+        toolButton: {
+          padding: 4,
+        },
+        toolbarSpacer: {
+          flex: 1,
+        },
+        sendButton: {
+          marginLeft: 8,
+        },
+        sendCircle: {
+          width: 32,
+          height: 32,
+          borderRadius: 16,
+          backgroundColor: t.colorPrimary,
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
+        recordingBar: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          height: 46,
+          borderRadius: t.radiusXl,
+          paddingHorizontal: 16,
+        },
+        recordingHint: {
+          fontSize: 14,
+          color: '#FFFFFF',
+          fontWeight: '500',
+        },
+      }),
+    [t]
+  );
+
   // === 录音态 ===
   if (isRecording && voiceEnabled) {
-    const bgColor = recordingCancelled
-      ? chatTokens.colorError
-      : chatTokens.colorPrimary;
+    const bgColor = recordingCancelled ? t.colorError : t.colorPrimary;
     const hintText = recordingCancelled ? '松手取消' : '松开发送，上划取消';
 
     return (
-      <View style={[defaultStyles.container, semanticStyles?.root, style]}>
+      <View style={[ds.container, semanticStyles?.root, style]}>
         <View
           style={[
-            defaultStyles.recordingBar,
+            ds.recordingBar,
             { backgroundColor: bgColor },
             semanticStyles?.recording,
           ]}
           {...panResponder.panHandlers}
           testID={`${testID}-recording`}
         >
-          <Text style={defaultStyles.recordingHint}>{hintText}</Text>
+          <Text style={ds.recordingHint}>{hintText}</Text>
           {renderWaveAnimation?.({ active: true, color: '#FFFFFF' })}
         </View>
       </View>
@@ -183,57 +275,52 @@ const Sender: React.FC<SenderProps> = ({
   // === 展开态 ===
   if (expanded && mode === 'text') {
     const toolbar = (
-      <View style={[defaultStyles.toolbar, semanticStyles?.toolbar]}>
+      <View style={[ds.toolbar, semanticStyles?.toolbar]}>
         {voiceEnabled && (
           <TouchableOpacity
             onPress={handleToggleMode}
-            style={defaultStyles.toolButton}
+            style={ds.toolButton}
             testID={`${testID}-toggle-mode`}
           >
             <Icon
               name="search-outline"
               size={22}
-              color={chatTokens.colorTextSecondary}
+              color={t.colorTextSecondary}
             />
           </TouchableOpacity>
         )}
 
-        <View style={defaultStyles.toolbarSpacer} />
+        <View style={ds.toolbarSpacer} />
 
         {actionsEnabled && (
           <TouchableOpacity
             onPress={() => setShowActions(true)}
-            style={defaultStyles.toolButton}
+            style={ds.toolButton}
             testID={`${testID}-actions`}
           >
-            <Icon name="add" size={22} color={chatTokens.colorTextSecondary} />
+            <Icon name="add" size={22} color={t.colorTextSecondary} />
           </TouchableOpacity>
         )}
 
         {isRequesting ? (
           <TouchableOpacity
             testID={`${testID}-stop`}
-            style={defaultStyles.sendButton}
+            style={ds.sendButton}
             onPress={onStop}
             activeOpacity={0.7}
           >
-            <View
-              style={[
-                defaultStyles.sendCircle,
-                { backgroundColor: chatTokens.colorError },
-              ]}
-            >
+            <View style={[ds.sendCircle, { backgroundColor: t.colorError }]}>
               <Icon name="stop" size={14} color="#FFFFFF" />
             </View>
           </TouchableOpacity>
         ) : hasText ? (
           <TouchableOpacity
             testID={`${testID}-send`}
-            style={defaultStyles.sendButton}
+            style={ds.sendButton}
             onPress={handleSend}
             activeOpacity={0.7}
           >
-            <View style={defaultStyles.sendCircle}>
+            <View style={ds.sendCircle}>
               <Icon name="arrow-up" size={18} color="#FFFFFF" />
             </View>
           </TouchableOpacity>
@@ -242,7 +329,7 @@ const Sender: React.FC<SenderProps> = ({
     );
 
     return (
-      <View style={[defaultStyles.container, semanticStyles?.root, style]}>
+      <View style={[ds.container, semanticStyles?.root, style]}>
         {renderInput ? (
           renderInput({
             value: text,
@@ -254,12 +341,9 @@ const Sender: React.FC<SenderProps> = ({
             maxLength,
           })
         ) : (
-          <View style={defaultStyles.expandedFallback}>
-            {/* 无 UI 库 Input 时的 fallback: 使用原生 TextInput */}
-            <View style={defaultStyles.expandedInputArea}>
-              <Text style={defaultStyles.expandedText}>
-                {text || placeholder}
-              </Text>
+          <View style={ds.expandedFallback}>
+            <View style={ds.expandedInputArea}>
+              <Text style={ds.expandedText}>{text || placeholder}</Text>
             </View>
             {toolbar}
           </View>
@@ -278,25 +362,25 @@ const Sender: React.FC<SenderProps> = ({
   const isVoice = mode === 'voice';
 
   return (
-    <View style={[defaultStyles.container, semanticStyles?.root, style]}>
-      <View style={[defaultStyles.collapsedBar, semanticStyles?.collapsed]}>
+    <View style={[ds.container, semanticStyles?.root, style]}>
+      <View style={[ds.collapsedBar, semanticStyles?.collapsed]}>
         {voiceEnabled && (
           <TouchableOpacity
             onPress={handleToggleMode}
-            style={defaultStyles.modeButton}
+            style={ds.modeButton}
             testID={`${testID}-toggle-mode`}
           >
             <Icon
               name={isVoice ? 'keypad-outline' : 'search-outline'}
               size={22}
-              color={chatTokens.colorTextSecondary}
+              color={t.colorTextSecondary}
             />
           </TouchableOpacity>
         )}
 
         {isVoice ? (
           <TouchableOpacity
-            style={defaultStyles.voiceArea}
+            style={ds.voiceArea}
             onPressIn={() => {
               startY.current = 0;
               setIsRecording(true);
@@ -309,26 +393,26 @@ const Sender: React.FC<SenderProps> = ({
             activeOpacity={0.7}
             testID={`${testID}-voice-hold`}
           >
-            <Text style={defaultStyles.voiceText}>按住说话</Text>
+            <Text style={ds.voiceText}>按住说话</Text>
           </TouchableOpacity>
         ) : (
           <TouchableOpacity
-            style={defaultStyles.placeholderArea}
+            style={ds.placeholderArea}
             onPress={handleExpand}
             activeOpacity={0.7}
             testID={`${testID}-expand`}
           >
-            <Text style={defaultStyles.placeholderText}>{placeholder}</Text>
+            <Text style={ds.placeholderText}>{placeholder}</Text>
           </TouchableOpacity>
         )}
 
         {actionsEnabled && (
           <TouchableOpacity
             onPress={() => setShowActions(true)}
-            style={defaultStyles.plusButton}
+            style={ds.plusButton}
             testID={`${testID}-plus`}
           >
-            <Icon name="add" size={22} color={chatTokens.colorTextSecondary} />
+            <Icon name="add" size={22} color={t.colorTextSecondary} />
           </TouchableOpacity>
         )}
       </View>
@@ -343,101 +427,4 @@ const Sender: React.FC<SenderProps> = ({
   );
 };
 
-const defaultStyles = StyleSheet.create({
-  container: {
-    paddingHorizontal: chatTokens.space,
-    paddingTop: chatTokens.spaceSm,
-    paddingBottom:
-      Platform.OS === 'ios' ? chatTokens.spaceSm : chatTokens.space,
-  },
-
-  // 收起态
-  collapsedBar: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: chatTokens.colorBgElevated,
-    borderRadius: chatTokens.radiusXl,
-    height: 46,
-    paddingHorizontal: 12,
-    ...chatTokens.shadow,
-  },
-  modeButton: {
-    padding: 4,
-  },
-  placeholderArea: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingLeft: 8,
-  },
-  placeholderText: {
-    fontSize: chatTokens.fontSize,
-    color: chatTokens.colorTextPlaceholder,
-  },
-  voiceArea: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  voiceText: {
-    fontSize: chatTokens.fontSize,
-    fontWeight: '500',
-    color: chatTokens.colorText,
-  },
-  plusButton: {
-    padding: 4,
-  },
-
-  // 展开态
-  expandedFallback: {
-    backgroundColor: chatTokens.colorBgElevated,
-    borderRadius: chatTokens.radiusMd,
-    padding: 12,
-    ...chatTokens.shadow,
-  },
-  expandedInputArea: {
-    minHeight: 40,
-    maxHeight: 100,
-  },
-  expandedText: {
-    fontSize: chatTokens.fontSize,
-    color: chatTokens.colorText,
-  },
-  toolbar: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  toolButton: {
-    padding: 4,
-  },
-  toolbarSpacer: {
-    flex: 1,
-  },
-  sendButton: {
-    marginLeft: 8,
-  },
-  sendCircle: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    backgroundColor: chatTokens.colorPrimary,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-
-  // 录音态
-  recordingBar: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    height: 46,
-    borderRadius: chatTokens.radiusXl,
-    paddingHorizontal: 16,
-  },
-  recordingHint: {
-    fontSize: 14,
-    color: '#FFFFFF',
-    fontWeight: '500',
-  },
-});
-
 export default React.memo(Sender);

package/src/theme/tokens.ts

@@ -1,18 +1,8 @@
 /**
  * Chat 专属 Design Tokens
- * 仅定义 Chat 特有的 token，通用 token 从 @unif/react-native-ui 引用
+ * 仅定义 Chat 特有的 token，通用 token 从 @unif/react-native-ui 的 useTokens() 获取
  */
 
-interface ChatThemeConfig {
-  primaryColor?: string;
-}
-
-let _chatConfig: ChatThemeConfig = {};
-
-export function configure(options: ChatThemeConfig): void {
-  _chatConfig = { ..._chatConfig, ...options };
-}
-
 export const chatTokens = {
   // 气泡
   colorBgUserMsg: '#E8F0FE',
@@ -25,49 +15,4 @@ export const chatTokens = {
 
   // 录音
   colorRecording: '#FF3B30',
-
-  // 通用（colorPrimary 支持运行时注入）
-  get colorPrimary() {
-    return _chatConfig.primaryColor || '#1677FF';
-  },
-  colorError: '#FF3B30',
-  colorText: '#1F2937',
-  colorTextSecondary: '#6B7280',
-  colorTextPlaceholder: '#9CA3AF',
-  colorBgElevated: '#FFFFFF',
-  colorBorder: '#E5E7EB',
-  colorLink: '#1677FF',
-
-  // 间距
-  spaceXs: 4,
-  spaceSm: 8,
-  space: 12,
-  spaceMd: 16,
-
-  // 字体
-  fontSize: 15,
-  fontSizeSm: 13,
-  lineHeight: 22,
-
-  // 圆角
-  radiusSm: 6,
-  radiusMd: 12,
-  radiusXl: 23,
-  radiusFull: 999,
-
-  // 阴影
-  shadow: {
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 3,
-    elevation: 2,
-  },
-  shadowSm: {
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.03,
-    shadowRadius: 2,
-    elevation: 1,
-  },
 };