@unif/react-native-chat 0.1.1 → 0.2.0

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 } from 'react';
 import {
   View,
   Text,
@@ -15,7 +15,8 @@ import {
   PanResponder,
   type ViewStyle,
 } from 'react-native';
-import {chatTokens} from '../theme/tokens';
+import { chatTokens } from '../theme/tokens';
+import Icon from 'react-native-vector-icons/Ionicons';
 
 export interface ActionSheetOption {
   key: string;
@@ -54,6 +55,7 @@ export interface SenderProps {
     onBlur: () => void;
     toolbar: React.ReactNode;
     autoFocus: boolean;
+    maxLength: number;
   }) => React.ReactNode;
   renderActionSheet?: (props: {
     visible: boolean;
@@ -75,7 +77,7 @@ const Sender: React.FC<SenderProps> = ({
   isRequesting = false,
   placeholder = '发消息',
   maxLength = 2000,
-  voiceEnabled = true,
+  voiceEnabled = false,
   actionsEnabled = true,
   actions = [],
   onActionSelect,
@@ -165,13 +167,14 @@ const Sender: React.FC<SenderProps> = ({
         <View
           style={[
             defaultStyles.recordingBar,
-            {backgroundColor: bgColor},
+            { backgroundColor: bgColor },
             semanticStyles?.recording,
           ]}
           {...panResponder.panHandlers}
-          testID={`${testID}-recording`}>
+          testID={`${testID}-recording`}
+        >
           <Text style={defaultStyles.recordingHint}>{hintText}</Text>
-          {renderWaveAnimation?.({active: true, color: '#FFFFFF'})}
+          {renderWaveAnimation?.({ active: true, color: '#FFFFFF' })}
         </View>
       </View>
     );
@@ -185,8 +188,13 @@ const Sender: React.FC<SenderProps> = ({
           <TouchableOpacity
             onPress={handleToggleMode}
             style={defaultStyles.toolButton}
-            testID={`${testID}-toggle-mode`}>
-            <Text style={defaultStyles.iconText}>🎤</Text>
+            testID={`${testID}-toggle-mode`}
+          >
+            <Icon
+              name="search-outline"
+              size={22}
+              color={chatTokens.colorTextSecondary}
+            />
           </TouchableOpacity>
         )}
 
@@ -196,8 +204,9 @@ const Sender: React.FC<SenderProps> = ({
           <TouchableOpacity
             onPress={() => setShowActions(true)}
             style={defaultStyles.toolButton}
-            testID={`${testID}-actions`}>
-            <Text style={defaultStyles.iconText}>＋</Text>
+            testID={`${testID}-actions`}
+          >
+            <Icon name="add" size={22} color={chatTokens.colorTextSecondary} />
           </TouchableOpacity>
         )}
 
@@ -206,13 +215,15 @@ const Sender: React.FC<SenderProps> = ({
             testID={`${testID}-stop`}
             style={defaultStyles.sendButton}
             onPress={onStop}
-            activeOpacity={0.7}>
+            activeOpacity={0.7}
+          >
             <View
               style={[
                 defaultStyles.sendCircle,
-                {backgroundColor: chatTokens.colorError},
-              ]}>
-              <Text style={defaultStyles.sendIcon}>⏹</Text>
+                { backgroundColor: chatTokens.colorError },
+              ]}
+            >
+              <Icon name="stop" size={14} color="#FFFFFF" />
             </View>
           </TouchableOpacity>
         ) : hasText ? (
@@ -220,9 +231,10 @@ const Sender: React.FC<SenderProps> = ({
             testID={`${testID}-send`}
             style={defaultStyles.sendButton}
             onPress={handleSend}
-            activeOpacity={0.7}>
+            activeOpacity={0.7}
+          >
             <View style={defaultStyles.sendCircle}>
-              <Text style={defaultStyles.sendIcon}>↑</Text>
+              <Icon name="arrow-up" size={18} color="#FFFFFF" />
             </View>
           </TouchableOpacity>
         ) : null}
@@ -239,6 +251,7 @@ const Sender: React.FC<SenderProps> = ({
             onBlur: handleCollapse,
             toolbar,
             autoFocus: true,
+            maxLength,
           })
         ) : (
           <View style={defaultStyles.expandedFallback}>
@@ -266,16 +279,18 @@ const Sender: React.FC<SenderProps> = ({
 
   return (
     <View style={[defaultStyles.container, semanticStyles?.root, style]}>
-      <View
-        style={[defaultStyles.collapsedBar, semanticStyles?.collapsed]}>
+      <View style={[defaultStyles.collapsedBar, semanticStyles?.collapsed]}>
         {voiceEnabled && (
           <TouchableOpacity
             onPress={handleToggleMode}
             style={defaultStyles.modeButton}
-            testID={`${testID}-toggle-mode`}>
-            <Text style={defaultStyles.iconText}>
-              {isVoice ? '⌨' : '🎤'}
-            </Text>
+            testID={`${testID}-toggle-mode`}
+          >
+            <Icon
+              name={isVoice ? 'keypad-outline' : 'search-outline'}
+              size={22}
+              color={chatTokens.colorTextSecondary}
+            />
           </TouchableOpacity>
         )}
 
@@ -292,7 +307,8 @@ const Sender: React.FC<SenderProps> = ({
               setRecordingCancelled(false);
             }}
             activeOpacity={0.7}
-            testID={`${testID}-voice-hold`}>
+            testID={`${testID}-voice-hold`}
+          >
             <Text style={defaultStyles.voiceText}>按住说话</Text>
           </TouchableOpacity>
         ) : (
@@ -300,7 +316,8 @@ const Sender: React.FC<SenderProps> = ({
             style={defaultStyles.placeholderArea}
             onPress={handleExpand}
             activeOpacity={0.7}
-            testID={`${testID}-expand`}>
+            testID={`${testID}-expand`}
+          >
             <Text style={defaultStyles.placeholderText}>{placeholder}</Text>
           </TouchableOpacity>
         )}
@@ -309,8 +326,9 @@ const Sender: React.FC<SenderProps> = ({
           <TouchableOpacity
             onPress={() => setShowActions(true)}
             style={defaultStyles.plusButton}
-            testID={`${testID}-plus`}>
-            <Text style={defaultStyles.iconText}>＋</Text>
+            testID={`${testID}-plus`}
+          >
+            <Icon name="add" size={22} color={chatTokens.colorTextSecondary} />
           </TouchableOpacity>
         )}
       </View>
@@ -329,7 +347,8 @@ const defaultStyles = StyleSheet.create({
   container: {
     paddingHorizontal: chatTokens.space,
     paddingTop: chatTokens.spaceSm,
-    paddingBottom: Platform.OS === 'ios' ? chatTokens.spaceSm : chatTokens.space,
+    paddingBottom:
+      Platform.OS === 'ios' ? chatTokens.spaceSm : chatTokens.space,
   },
 
   // 收起态
@@ -404,11 +423,6 @@ const defaultStyles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  sendIcon: {
-    color: '#FFFFFF',
-    fontSize: 16,
-    fontWeight: '600',
-  },
 
   // 录音态
   recordingBar: {
@@ -424,12 +438,6 @@ const defaultStyles = StyleSheet.create({
     color: '#FFFFFF',
     fontWeight: '500',
   },
-
-  // 通用
-  iconText: {
-    fontSize: 22,
-    color: chatTokens.colorTextSecondary,
-  },
 });
 
 export default React.memo(Sender);

package/src/theme/tokens.ts

@@ -3,6 +3,16 @@
  * 仅定义 Chat 特有的 token，通用 token 从 @unif/react-native-ui 引用
  */
 
+interface ChatThemeConfig {
+  primaryColor?: string;
+}
+
+let _chatConfig: ChatThemeConfig = {};
+
+export function configure(options: ChatThemeConfig): void {
+  _chatConfig = { ..._chatConfig, ...options };
+}
+
 export const chatTokens = {
   // 气泡
   colorBgUserMsg: '#E8F0FE',
@@ -16,8 +26,10 @@ export const chatTokens = {
   // 录音
   colorRecording: '#FF3B30',
 
-  // 通用
-  colorPrimary: '#1677FF',
+  // 通用（colorPrimary 支持运行时注入）
+  get colorPrimary() {
+    return _chatConfig.primaryColor || '#1677FF';
+  },
   colorError: '#FF3B30',
   colorText: '#1F2937',
   colorTextSecondary: '#6B7280',

package/src/types/react-native-vector-icons.d.ts

@@ -0,0 +1,12 @@
+declare module 'react-native-vector-icons/Ionicons' {
+  import type { Component } from 'react';
+  import type { TextProps } from 'react-native';
+
+  interface IconProps extends TextProps {
+    name: string;
+    size?: number;
+    color?: string;
+  }
+
+  export default class Icon extends Component<IconProps> {}
+}