@unif/react-native-chat 0.1.0

package/src/sender/Sender.tsx

@@ -0,0 +1,435 @@
+/**
+ * Sender — 输入发送器
+ *
+ * 完整状态机：collapsed → expanded → recording
+ * 基于 UI 库 Input + ActionSheet + WaveAnimation + Button 构建
+ */
+
+import React, {useState, useCallback, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Platform,
+  PanResponder,
+  type ViewStyle,
+} from 'react-native';
+import {chatTokens} from '../theme/tokens';
+
+export interface ActionSheetOption {
+  key: string;
+  label: string;
+  icon?: React.ReactNode;
+}
+
+export interface SenderSemanticStyles {
+  root?: ViewStyle;
+  collapsed?: ViewStyle;
+  expanded?: ViewStyle;
+  recording?: ViewStyle;
+  toolbar?: ViewStyle;
+}
+
+export interface SenderProps {
+  onSend: (text: string) => void;
+  onStop?: () => void;
+  onVoiceSend?: (audioUri: string) => void;
+  isRequesting?: boolean;
+  placeholder?: string;
+  maxLength?: number;
+  voiceEnabled?: boolean;
+  actionsEnabled?: boolean;
+  actions?: ActionSheetOption[];
+  onActionSelect?: (key: string) => void;
+  disabled?: boolean;
+  style?: ViewStyle;
+  styles?: Partial<SenderSemanticStyles>;
+  testID?: string;
+  // 渲染注入点（允许使用方注入 UI 库组件）
+  renderInput?: (props: {
+    value: string;
+    onChangeText: (text: string) => void;
+    onSubmitEditing: () => void;
+    onBlur: () => void;
+    toolbar: React.ReactNode;
+    autoFocus: boolean;
+  }) => React.ReactNode;
+  renderActionSheet?: (props: {
+    visible: boolean;
+    onClose: () => void;
+    options: ActionSheetOption[];
+    onSelect: (key: string) => void;
+  }) => React.ReactNode;
+  renderWaveAnimation?: (props: {
+    active: boolean;
+    color: string;
+  }) => React.ReactNode;
+}
+
+const CANCEL_THRESHOLD = 80;
+
+const Sender: React.FC<SenderProps> = ({
+  onSend,
+  onStop,
+  isRequesting = false,
+  placeholder = '发消息',
+  maxLength = 2000,
+  voiceEnabled = true,
+  actionsEnabled = true,
+  actions = [],
+  onActionSelect,
+  disabled = false,
+  style,
+  styles: semanticStyles,
+  testID = 'sender',
+  renderInput,
+  renderActionSheet,
+  renderWaveAnimation,
+}) => {
+  const [mode, setMode] = useState<'text' | 'voice'>('text');
+  const [expanded, setExpanded] = useState(false);
+  const [text, setText] = useState('');
+  const [showActions, setShowActions] = useState(false);
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordingCancelled, setRecordingCancelled] = useState(false);
+  const startY = useRef(0);
+
+  const handleToggleMode = useCallback(() => {
+    setMode((prev) => (prev === 'text' ? 'voice' : 'text'));
+    setExpanded(false);
+  }, []);
+
+  const handleExpand = useCallback(() => {
+    setExpanded(true);
+  }, []);
+
+  const handleCollapse = useCallback(() => {
+    if (!text.trim()) {
+      setExpanded(false);
+    }
+  }, [text]);
+
+  const handleSend = useCallback(() => {
+    const trimmed = text.trim();
+    if (trimmed && !disabled) {
+      onSend(trimmed);
+      setText('');
+      setExpanded(false);
+    }
+  }, [text, onSend, disabled]);
+
+  const handleActionSelect = useCallback(
+    (key: string) => {
+      setShowActions(false);
+      onActionSelect?.(key);
+    },
+    [onActionSelect]
+  );
+
+  // 录音手势
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        startY.current = 0;
+        setIsRecording(true);
+        setRecordingCancelled(false);
+      },
+      onPanResponderMove: (_, gestureState) => {
+        if (gestureState.dy < -CANCEL_THRESHOLD) {
+          setRecordingCancelled(true);
+        } else {
+          setRecordingCancelled(false);
+        }
+      },
+      onPanResponderRelease: () => {
+        setIsRecording(false);
+        setRecordingCancelled(false);
+      },
+    })
+  ).current;
+
+  const hasText = text.trim().length > 0;
+
+  // === 录音态 ===
+  if (isRecording && voiceEnabled) {
+    const bgColor = recordingCancelled
+      ? chatTokens.colorError
+      : chatTokens.colorPrimary;
+    const hintText = recordingCancelled ? '松手取消' : '松开发送，上划取消';
+
+    return (
+      <View style={[defaultStyles.container, semanticStyles?.root, style]}>
+        <View
+          style={[
+            defaultStyles.recordingBar,
+            {backgroundColor: bgColor},
+            semanticStyles?.recording,
+          ]}
+          {...panResponder.panHandlers}
+          testID={`${testID}-recording`}>
+          <Text style={defaultStyles.recordingHint}>{hintText}</Text>
+          {renderWaveAnimation?.({active: true, color: '#FFFFFF'})}
+        </View>
+      </View>
+    );
+  }
+
+  // === 展开态 ===
+  if (expanded && mode === 'text') {
+    const toolbar = (
+      <View style={[defaultStyles.toolbar, semanticStyles?.toolbar]}>
+        {voiceEnabled && (
+          <TouchableOpacity
+            onPress={handleToggleMode}
+            style={defaultStyles.toolButton}
+            testID={`${testID}-toggle-mode`}>
+            <Text style={defaultStyles.iconText}>🎤</Text>
+          </TouchableOpacity>
+        )}
+
+        <View style={defaultStyles.toolbarSpacer} />
+
+        {actionsEnabled && (
+          <TouchableOpacity
+            onPress={() => setShowActions(true)}
+            style={defaultStyles.toolButton}
+            testID={`${testID}-actions`}>
+            <Text style={defaultStyles.iconText}>＋</Text>
+          </TouchableOpacity>
+        )}
+
+        {isRequesting ? (
+          <TouchableOpacity
+            testID={`${testID}-stop`}
+            style={defaultStyles.sendButton}
+            onPress={onStop}
+            activeOpacity={0.7}>
+            <View
+              style={[
+                defaultStyles.sendCircle,
+                {backgroundColor: chatTokens.colorError},
+              ]}>
+              <Text style={defaultStyles.sendIcon}>⏹</Text>
+            </View>
+          </TouchableOpacity>
+        ) : hasText ? (
+          <TouchableOpacity
+            testID={`${testID}-send`}
+            style={defaultStyles.sendButton}
+            onPress={handleSend}
+            activeOpacity={0.7}>
+            <View style={defaultStyles.sendCircle}>
+              <Text style={defaultStyles.sendIcon}>↑</Text>
+            </View>
+          </TouchableOpacity>
+        ) : null}
+      </View>
+    );
+
+    return (
+      <View style={[defaultStyles.container, semanticStyles?.root, style]}>
+        {renderInput ? (
+          renderInput({
+            value: text,
+            onChangeText: setText,
+            onSubmitEditing: handleSend,
+            onBlur: handleCollapse,
+            toolbar,
+            autoFocus: true,
+          })
+        ) : (
+          <View style={defaultStyles.expandedFallback}>
+            {/* 无 UI 库 Input 时的 fallback: 使用原生 TextInput */}
+            <View style={defaultStyles.expandedInputArea}>
+              <Text style={defaultStyles.expandedText}>
+                {text || placeholder}
+              </Text>
+            </View>
+            {toolbar}
+          </View>
+        )}
+        {renderActionSheet?.({
+          visible: showActions,
+          onClose: () => setShowActions(false),
+          options: actions,
+          onSelect: handleActionSelect,
+        })}
+      </View>
+    );
+  }
+
+  // === 收起态 ===
+  const isVoice = mode === 'voice';
+
+  return (
+    <View style={[defaultStyles.container, semanticStyles?.root, style]}>
+      <View
+        style={[defaultStyles.collapsedBar, semanticStyles?.collapsed]}>
+        {voiceEnabled && (
+          <TouchableOpacity
+            onPress={handleToggleMode}
+            style={defaultStyles.modeButton}
+            testID={`${testID}-toggle-mode`}>
+            <Text style={defaultStyles.iconText}>
+              {isVoice ? '⌨' : '🎤'}
+            </Text>
+          </TouchableOpacity>
+        )}
+
+        {isVoice ? (
+          <TouchableOpacity
+            style={defaultStyles.voiceArea}
+            onPressIn={() => {
+              startY.current = 0;
+              setIsRecording(true);
+              setRecordingCancelled(false);
+            }}
+            onPressOut={() => {
+              setIsRecording(false);
+              setRecordingCancelled(false);
+            }}
+            activeOpacity={0.7}
+            testID={`${testID}-voice-hold`}>
+            <Text style={defaultStyles.voiceText}>按住说话</Text>
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity
+            style={defaultStyles.placeholderArea}
+            onPress={handleExpand}
+            activeOpacity={0.7}
+            testID={`${testID}-expand`}>
+            <Text style={defaultStyles.placeholderText}>{placeholder}</Text>
+          </TouchableOpacity>
+        )}
+
+        {actionsEnabled && (
+          <TouchableOpacity
+            onPress={() => setShowActions(true)}
+            style={defaultStyles.plusButton}
+            testID={`${testID}-plus`}>
+            <Text style={defaultStyles.iconText}>＋</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {renderActionSheet?.({
+        visible: showActions,
+        onClose: () => setShowActions(false),
+        options: actions,
+        onSelect: handleActionSelect,
+      })}
+    </View>
+  );
+};
+
+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',
+  },
+  sendIcon: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+
+  // 录音态
+  recordingBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: 46,
+    borderRadius: chatTokens.radiusXl,
+    paddingHorizontal: 16,
+  },
+  recordingHint: {
+    fontSize: 14,
+    color: '#FFFFFF',
+    fontWeight: '500',
+  },
+
+  // 通用
+  iconText: {
+    fontSize: 22,
+    color: chatTokens.colorTextSecondary,
+  },
+});
+
+export default React.memo(Sender);

package/src/sender/index.md

@@ -0,0 +1,131 @@
+---
+title: Sender 输入发送器
+nav:
+  title: 组件
+  path: /components
+---
+
+# Sender 输入发送器
+
+完整的聊天输入组件，包含文本输入、语音录制、附件面板三种模式。
+
+## 何时使用
+
+- 需要完整的聊天输入体验
+- 需要文本/语音双模式切换
+- 需要附件或扩展操作面板
+
+## 状态机
+
+```
+collapsed (收起态)
+  ├── 点击输入区 → expanded (展开态)
+  ├── 按住说话按钮 → recording (录音态)
+  └── 点击 + → ActionSheet
+expanded (展开态)
+  ├── 输入文本 + 发送 → collapsed
+  └── 失焦且无文本 → collapsed
+recording (录音态)
+  ├── 松手 → 发送录音 → collapsed
+  └── 上划超过阈值 → 取消录音 → collapsed
+```
+
+## 代码示例
+
+### 基本用法
+
+```tsx
+import { Sender } from '@unif/react-native-chat';
+
+<Sender
+  onSend={(text) => console.log('发送:', text)}
+  placeholder="输入消息..."
+/>
+```
+
+### 带停止按钮
+
+```tsx
+<Sender
+  onSend={handleSend}
+  onStop={handleAbort}
+  isRequesting={true}
+/>
+```
+
+### 注入 UI 库组件
+
+```tsx
+import { Input, ActionSheet, WaveAnimation } from '@unif/react-native-ui';
+
+<Sender
+  onSend={handleSend}
+  actions={[
+    { key: 'camera', label: '拍照' },
+    { key: 'album', label: '相册' },
+  ]}
+  onActionSelect={handleAction}
+  renderInput={(props) => (
+    <Input
+      value={props.value}
+      onChangeText={props.onChangeText}
+      onSubmitEditing={props.onSubmitEditing}
+      toolbar={props.toolbar}
+      autoFocus={props.autoFocus}
+    />
+  )}
+  renderActionSheet={(props) => (
+    <ActionSheet
+      visible={props.visible}
+      onClose={props.onClose}
+      options={props.options}
+      onSelect={props.onSelect}
+    />
+  )}
+  renderWaveAnimation={(props) => (
+    <WaveAnimation active={props.active} color={props.color} />
+  )}
+/>
+```
+
+## API
+
+### SenderProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| onSend | 发送文本回调 | `(text: string) => void` | - |
+| onStop | 中止请求回调 | `() => void` | - |
+| onVoiceSend | 语音发送回调 | `(audioUri: string) => void` | - |
+| isRequesting | 是否正在请求中 | `boolean` | `false` |
+| placeholder | 占位文字 | `string` | `'发消息'` |
+| maxLength | 最大字数 | `number` | `2000` |
+| voiceEnabled | 启用语音按钮 | `boolean` | `true` |
+| actionsEnabled | 启用 + 按钮 | `boolean` | `true` |
+| actions | 操作面板选项 | `ActionSheetOption[]` | `[]` |
+| onActionSelect | 操作面板选中回调 | `(key: string) => void` | - |
+| disabled | 禁用 | `boolean` | `false` |
+| style | 容器样式 | `ViewStyle` | - |
+| styles | 语义样式 | `Partial<SenderSemanticStyles>` | - |
+| testID | 测试标识 | `string` | `'sender'` |
+| renderInput | 自定义输入框渲染 | `(props) => ReactNode` | - |
+| renderActionSheet | 自定义操作面板渲染 | `(props) => ReactNode` | - |
+| renderWaveAnimation | 自定义波形动画渲染 | `(props) => ReactNode` | - |
+
+### SenderSemanticStyles
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| root | 外层容器 | `ViewStyle` |
+| collapsed | 收起态 | `ViewStyle` |
+| expanded | 展开态 | `ViewStyle` |
+| recording | 录音态 | `ViewStyle` |
+| toolbar | 工具栏 | `ViewStyle` |
+
+### ActionSheetOption
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| key | 唯一标识 | `string` |
+| label | 显示文字 | `string` |
+| icon | 图标 | `ReactNode` |

package/src/theme/tokens.ts

@@ -0,0 +1,61 @@
+/**
+ * Chat 专属 Design Tokens
+ * 仅定义 Chat 特有的 token，通用 token 从 @unif/react-native-ui 引用
+ */
+
+export const chatTokens = {
+  // 气泡
+  colorBgUserMsg: '#E8F0FE',
+  colorBgAssistantMsg: 'transparent',
+
+  // 欢迎页渐变
+  colorBgWelcomeStart: '#E8F4FD',
+  colorBgWelcomeMid: '#F0E6FF',
+  colorBgWelcomeEnd: '#F5F5F5',
+
+  // 录音
+  colorRecording: '#FF3B30',
+
+  // 通用
+  colorPrimary: '#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,
+  },
+};