1151 lines
31 KiB
TypeScript
1151 lines
31 KiB
TypeScript
import { Image } from 'expo-image';
|
||
import { useLocalSearchParams } from 'expo-router';
|
||
import { Mic, Pause, Play, PlusCircle, Type, X } from 'lucide-react-native';
|
||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||
import type {
|
||
NativeSyntheticEvent,
|
||
TextInputContentSizeChangeEventData,
|
||
} from 'react-native';
|
||
import {
|
||
Alert,
|
||
Animated,
|
||
FlatList,
|
||
InteractionManager,
|
||
Keyboard,
|
||
KeyboardAvoidingView,
|
||
Platform,
|
||
Pressable,
|
||
StyleSheet,
|
||
Text as RNText,
|
||
TextInput,
|
||
View,
|
||
} from 'react-native';
|
||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||
import { useTranslation } from 'react-i18next';
|
||
|
||
import { Icon } from '@/components/ui/icon';
|
||
import { Text } from '@/components/ui/text';
|
||
import { ScreenHeader } from '@/components/screen-header';
|
||
import { useThemeColors } from '@/hooks/use-theme-colors';
|
||
import { useMessages, useRealtimeSession } from '@/features/conversation/hooks';
|
||
import type { MessageItem } from '@/features/conversation/types';
|
||
import { isVoiceMessage } from '@/features/conversation/types';
|
||
import { usePlayer } from '@/features/voice/hooks/use-player';
|
||
import { useRecorder } from '@/features/voice/hooks/use-recorder';
|
||
|
||
// Life-Echo chat colors (from HTML reference)
|
||
const CHAT_COLORS = {
|
||
background: '#F8F9FA',
|
||
surface: '#fbf8fd',
|
||
surfaceContainer: '#f5f3f7',
|
||
primary: '#8177A6',
|
||
primaryBorder: '#49416c',
|
||
onPrimary: '#ffffff',
|
||
onSurface: '#1b1b1f',
|
||
onSurfaceVariant: '#8D8C90',
|
||
outline: '#cac4cf',
|
||
secondaryContainer: '#edd4ff',
|
||
primaryFixed: '#e7deff',
|
||
errorRed: '#ba1a1a',
|
||
};
|
||
|
||
/** 后端用 [SPLIT] 分隔多条消息，需按块渲染为多个气泡 */
|
||
const SPLIT_DELIMITER = '[SPLIT]';
|
||
|
||
/** 聊天输入框：单行内容高度与最多约 4 行（与 lineHeight 对齐） */
|
||
const CHAT_INPUT_LINE_H = 22;
|
||
const CHAT_INPUT_MAX_H = CHAT_INPUT_LINE_H * 4;
|
||
|
||
function splitContent(content: string): string[] {
|
||
return content
|
||
.split(SPLIT_DELIMITER)
|
||
.map((s) => s.trim())
|
||
.filter((s) => s.length > 0);
|
||
}
|
||
|
||
const AGENT_AVATAR =
|
||
'https://lh3.googleusercontent.com/aida-public/AB6AXuC2cLdqTitOjFBnGTNsoJGh45K9zvV89vxB0EEHh0DT-YlbiOVyTuSmni5SO2eDOMC1HrW8cuhj29_KJJJFMV8aEPLHCwQgGA006Q9EfoDtEHP4GnzB4SEnT8bjCk6lQwjgh2Qp5dvq8oQTU5aQnKXtqOTAIIw1I3GWYlKimGa7Zqw4lnax84XRRGeYp6wj_1B9WsXuDvY7mNHIN7y_Tw0-TbRK1MGMHgd_nMNEqoqUCX6VAaDF2BjLB7BQnzIql8_8mw0TPaw1R3wO';
|
||
const USER_AVATAR =
|
||
'https://lh3.googleusercontent.com/aida-public/AB6AXuAMCjDBVhsUUXRAz9AGYejbTGoEYhzyiggYt_QIFqHCc3odRcBPNRhsE2Klg7gOeOV9V_qOy5qPqjU0GmpfgjGAWKGXZCizwRVz96N0n1IFMx4JH7QwV81zQsaVvCdJct_uABUBEawhncvQcbl0jUt_EUlNgzB-gIgUS_oLlT1TtRb8S5s7sAqwLRdGBa61yxL1X1iSWSFIn5N-WPIDs_vpCgS47q9SQjkT1q7VKvPzHzTiGF1bwVvjB7Bl2JgtaIUj6rkwlLbPG6xb';
|
||
|
||
type InputMode = 'text' | 'voice';
|
||
|
||
/** 展平消息列表：assistant 消息按 [SPLIT] 拆成多条，每条一个 listKey */
|
||
function flattenMessagesForList(
|
||
messages: MessageItem[],
|
||
): (MessageItem & { listKey: string })[] {
|
||
const result: (MessageItem & { listKey: string })[] = [];
|
||
for (const msg of messages) {
|
||
if (msg.senderType === 'user') {
|
||
result.push({ ...msg, listKey: msg.id });
|
||
} else {
|
||
const parts = splitContent(msg.content);
|
||
if (parts.length > 1) {
|
||
parts.forEach((part, i) => {
|
||
result.push({
|
||
...msg,
|
||
content: part,
|
||
listKey: `${msg.id}_part_${i}`,
|
||
});
|
||
});
|
||
} else {
|
||
result.push({ ...msg, listKey: msg.id });
|
||
}
|
||
}
|
||
}
|
||
return result;
|
||
}
|
||
|
||
function MessageBubble({
|
||
item,
|
||
agentName,
|
||
meLabel,
|
||
currentPlaybackUri,
|
||
playbackIsPlaying,
|
||
onPlayVoiceExclusive,
|
||
onPausePlayback,
|
||
}: {
|
||
item: MessageItem;
|
||
agentName: string;
|
||
meLabel: string;
|
||
currentPlaybackUri: string | null;
|
||
playbackIsPlaying: boolean;
|
||
onPlayVoiceExclusive: (uri: string) => void;
|
||
onPausePlayback: () => void;
|
||
}) {
|
||
const isUser = item.senderType === 'user';
|
||
const isVoice = isVoiceMessage(item);
|
||
|
||
return (
|
||
<View style={[styles.messageRow, isUser && styles.messageRowReverse]}>
|
||
<View
|
||
style={[
|
||
styles.avatarWrapper,
|
||
isUser ? styles.avatarWrapperUser : styles.avatarWrapperAgent,
|
||
]}
|
||
>
|
||
<Image
|
||
source={{ uri: isUser ? USER_AVATAR : AGENT_AVATAR }}
|
||
style={styles.avatarImage}
|
||
alt={isUser ? meLabel : agentName}
|
||
/>
|
||
</View>
|
||
<View style={[styles.bubbleColumn, isUser && styles.bubbleColumnEnd]}>
|
||
<Text
|
||
style={[
|
||
styles.nickname,
|
||
isUser ? styles.nicknameUser : styles.nicknameAgent,
|
||
]}
|
||
>
|
||
{isUser ? meLabel : agentName}
|
||
</Text>
|
||
{isVoice ? (
|
||
<View
|
||
style={[
|
||
styles.bubble,
|
||
isUser ? styles.bubbleUser : styles.bubbleAgent,
|
||
]}
|
||
>
|
||
<VoiceMessageBubble
|
||
durationSeconds={item.durationSeconds ?? 0}
|
||
audioUri={item.audioUri}
|
||
isUser={isUser}
|
||
isPlaying={
|
||
!!item.audioUri &&
|
||
playbackIsPlaying &&
|
||
currentPlaybackUri === item.audioUri
|
||
}
|
||
onPlayPress={() => {
|
||
if (!item.audioUri) return;
|
||
if (playbackIsPlaying && currentPlaybackUri === item.audioUri) {
|
||
onPausePlayback();
|
||
} else {
|
||
onPlayVoiceExclusive(item.audioUri);
|
||
}
|
||
}}
|
||
/>
|
||
</View>
|
||
) : (
|
||
<View
|
||
style={[
|
||
styles.bubble,
|
||
isUser ? styles.bubbleUser : styles.bubbleAgent,
|
||
]}
|
||
>
|
||
<Text
|
||
selectable
|
||
style={[
|
||
styles.bubbleText,
|
||
isUser ? styles.bubbleTextUser : styles.bubbleTextAgent,
|
||
]}
|
||
>
|
||
{item.content}
|
||
</Text>
|
||
</View>
|
||
)}
|
||
</View>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
function StreamingBubbles({
|
||
streamingText,
|
||
isComplete,
|
||
agentName,
|
||
}: {
|
||
streamingText: string;
|
||
isComplete: boolean;
|
||
agentName: string;
|
||
}) {
|
||
const parts = splitContent(streamingText);
|
||
const completedParts = parts.length > 1 ? parts.slice(0, -1) : [];
|
||
const streamingPart =
|
||
parts.length > 1 ? parts[parts.length - 1]! : (parts[0] ?? streamingText);
|
||
|
||
return (
|
||
<View>
|
||
{completedParts.map((part, i) => (
|
||
<View
|
||
key={`streaming_complete_${i}`}
|
||
style={[styles.messageRow, styles.streamingRow]}
|
||
>
|
||
<View style={[styles.avatarWrapper, styles.avatarWrapperAgent]}>
|
||
<Image
|
||
source={{ uri: AGENT_AVATAR }}
|
||
style={styles.avatarImage}
|
||
alt={agentName}
|
||
/>
|
||
</View>
|
||
<View style={[styles.bubbleColumn]}>
|
||
<Text style={[styles.nickname, styles.nicknameAgent]}>
|
||
{agentName}
|
||
</Text>
|
||
<View style={[styles.bubble, styles.bubbleAgent]}>
|
||
<Text
|
||
selectable
|
||
style={[styles.bubbleText, styles.bubbleTextAgent]}
|
||
>
|
||
{part}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
))}
|
||
<View style={[styles.messageRow, styles.streamingRow]}>
|
||
<View style={[styles.avatarWrapper, styles.avatarWrapperAgent]}>
|
||
<Image
|
||
source={{ uri: AGENT_AVATAR }}
|
||
style={styles.avatarImage}
|
||
alt={agentName}
|
||
/>
|
||
</View>
|
||
<View style={[styles.bubbleColumn]}>
|
||
<Text style={[styles.nickname, styles.nicknameAgent]}>
|
||
{agentName}
|
||
</Text>
|
||
<View style={[styles.bubble, styles.bubbleAgent]}>
|
||
<Text
|
||
selectable
|
||
style={[styles.bubbleText, styles.bubbleTextAgent]}
|
||
>
|
||
{streamingPart}
|
||
{!isComplete && '▌'}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
function formatRecordingDuration(seconds: number): string {
|
||
const s = Math.max(0, Math.floor(seconds));
|
||
const mins = Math.floor(s / 60);
|
||
const secs = s % 60;
|
||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||
}
|
||
|
||
function VoiceMessageBubble({
|
||
durationSeconds,
|
||
audioUri,
|
||
isUser,
|
||
isPlaying,
|
||
onPlayPress,
|
||
}: {
|
||
durationSeconds: number;
|
||
audioUri?: string;
|
||
isUser: boolean;
|
||
isPlaying: boolean;
|
||
onPlayPress: () => void;
|
||
}) {
|
||
const handlePlayPause = useCallback(() => {
|
||
onPlayPress();
|
||
}, [onPlayPress]);
|
||
|
||
return (
|
||
<View
|
||
style={[
|
||
styles.voiceMessageBubble,
|
||
isUser ? styles.voiceMessageBubbleUser : styles.voiceMessageBubbleAgent,
|
||
]}
|
||
>
|
||
<Pressable
|
||
onPress={handlePlayPause}
|
||
style={({ pressed }) => [
|
||
styles.voicePlayButton,
|
||
pressed && { opacity: 0.7 },
|
||
]}
|
||
disabled={!audioUri}
|
||
accessibilityLabel={isPlaying ? 'Pause' : 'Play'}
|
||
accessibilityRole="button"
|
||
>
|
||
<Icon
|
||
as={isPlaying ? Pause : Play}
|
||
size={24}
|
||
color={isUser ? CHAT_COLORS.onSurface : CHAT_COLORS.onPrimary}
|
||
/>
|
||
</Pressable>
|
||
<Text
|
||
style={[
|
||
styles.voiceDurationText,
|
||
isUser ? styles.voiceDurationTextUser : styles.voiceDurationTextAgent,
|
||
]}
|
||
>
|
||
{formatRecordingDuration(durationSeconds)}
|
||
</Text>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
function VoiceRecordButton({
|
||
isRecording,
|
||
recordingDuration,
|
||
onPress,
|
||
tapToStartLabel,
|
||
tapToEndLabel,
|
||
enabled,
|
||
}: {
|
||
isRecording: boolean;
|
||
recordingDuration: number;
|
||
onPress: () => void;
|
||
tapToStartLabel: string;
|
||
tapToEndLabel: string;
|
||
enabled: boolean;
|
||
}) {
|
||
const pulseAnim = useRef(new Animated.Value(0.85)).current;
|
||
|
||
useEffect(() => {
|
||
if (!isRecording) return;
|
||
const anim = Animated.loop(
|
||
Animated.sequence([
|
||
Animated.timing(pulseAnim, {
|
||
toValue: 1.15,
|
||
duration: 450,
|
||
useNativeDriver: true,
|
||
}),
|
||
Animated.timing(pulseAnim, {
|
||
toValue: 0.85,
|
||
duration: 450,
|
||
useNativeDriver: true,
|
||
}),
|
||
]),
|
||
);
|
||
anim.start();
|
||
return () => anim.stop();
|
||
}, [isRecording, pulseAnim]);
|
||
|
||
return (
|
||
<Pressable
|
||
onPress={onPress}
|
||
style={[
|
||
styles.voiceRecordCenter,
|
||
isRecording && styles.voiceRecordCenterRecording,
|
||
]}
|
||
disabled={!enabled}
|
||
>
|
||
{isRecording ? (
|
||
<View style={styles.voiceRecordLabelCenterWrap}>
|
||
<Text
|
||
style={[
|
||
styles.voiceRecordLabel,
|
||
styles.voiceRecordLabelCenter,
|
||
styles.voiceRecordLabelRecording,
|
||
!enabled && styles.voiceRecordLabelDisabled,
|
||
]}
|
||
numberOfLines={1}
|
||
>
|
||
{tapToEndLabel}
|
||
</Text>
|
||
</View>
|
||
) : (
|
||
<Text
|
||
style={[
|
||
styles.voiceRecordLabel,
|
||
!enabled && styles.voiceRecordLabelDisabled,
|
||
styles.voiceRecordLabelCenter,
|
||
]}
|
||
numberOfLines={1}
|
||
>
|
||
{tapToStartLabel}
|
||
</Text>
|
||
)}
|
||
{isRecording && (
|
||
<View style={styles.voiceRecordPill}>
|
||
<Animated.View
|
||
style={[
|
||
styles.voiceRecordPulseDot,
|
||
{ transform: [{ scale: pulseAnim }] },
|
||
]}
|
||
/>
|
||
<View style={styles.voiceRecordDurationWrap}>
|
||
<RNText
|
||
style={[
|
||
styles.voiceRecordDuration,
|
||
Platform.OS === 'android' && styles.voiceRecordDurationAndroid,
|
||
]}
|
||
{...(Platform.OS === 'android' && { includeFontPadding: false })}
|
||
>
|
||
{formatRecordingDuration(recordingDuration)}
|
||
</RNText>
|
||
</View>
|
||
</View>
|
||
)}
|
||
</Pressable>
|
||
);
|
||
}
|
||
|
||
function ChatInputBar({
|
||
value,
|
||
onChangeText,
|
||
onSend,
|
||
inputMode,
|
||
onInputModeToggle,
|
||
onAddPress,
|
||
onStartRecording,
|
||
onStopRecording,
|
||
onCancelRecording,
|
||
isRecording,
|
||
recordingDuration,
|
||
placeholder,
|
||
placeholderVoice,
|
||
addMoreLabel,
|
||
sendLabel,
|
||
switchToVoiceLabel,
|
||
switchToTextLabel,
|
||
tapToStartLabel,
|
||
tapToEndLabel,
|
||
cancelRecordingLabel,
|
||
disabled,
|
||
textInputKey = 0,
|
||
}: {
|
||
value: string;
|
||
onChangeText: (v: string) => void;
|
||
onSend: () => void;
|
||
inputMode: InputMode;
|
||
onInputModeToggle: () => void;
|
||
onAddPress: () => void;
|
||
onStartRecording: () => void;
|
||
onStopRecording: () => void;
|
||
onCancelRecording: () => void;
|
||
isRecording: boolean;
|
||
recordingDuration: number;
|
||
placeholder: string;
|
||
placeholderVoice: string;
|
||
addMoreLabel: string;
|
||
sendLabel: string;
|
||
switchToVoiceLabel: string;
|
||
switchToTextLabel: string;
|
||
tapToStartLabel: string;
|
||
tapToEndLabel: string;
|
||
cancelRecordingLabel: string;
|
||
disabled?: boolean;
|
||
/** 发送后递增，强制重建 TextInput，避免多行高度卡在 4 行 */
|
||
textInputKey?: number;
|
||
}) {
|
||
const colors = useThemeColors();
|
||
const [textHeight, setTextHeight] = useState(CHAT_INPUT_LINE_H);
|
||
/** 空串时立即单行高度，避免仅依赖 state 时发送后仍沿用 4 行测量值 */
|
||
const inputDisplayHeight = value === '' ? CHAT_INPUT_LINE_H : textHeight;
|
||
|
||
useEffect(() => {
|
||
if (value === '') {
|
||
setTextHeight(CHAT_INPUT_LINE_H);
|
||
}
|
||
}, [value]);
|
||
|
||
const onInputContentSizeChange = useCallback(
|
||
(e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
|
||
const h = e.nativeEvent.contentSize.height;
|
||
const next = Math.min(Math.max(h, CHAT_INPUT_LINE_H), CHAT_INPUT_MAX_H);
|
||
setTextHeight(next);
|
||
},
|
||
[],
|
||
);
|
||
|
||
const hasText = value.trim().length > 0;
|
||
const showSend = inputMode === 'text' && hasText;
|
||
|
||
// 右侧按钮：文字模式有内容->发送；语音模式录音中->取消；否则->更多
|
||
const trailingAction = showSend
|
||
? 'send'
|
||
: inputMode === 'voice' && isRecording
|
||
? 'cancel'
|
||
: 'add';
|
||
|
||
return (
|
||
<View style={styles.inputBar}>
|
||
{/* 左侧：麦克风/键盘切换 */}
|
||
<Pressable
|
||
onPress={onInputModeToggle}
|
||
style={({ pressed }) => [
|
||
styles.iconButton,
|
||
pressed && styles.iconButtonPressed,
|
||
]}
|
||
disabled={disabled && !isRecording}
|
||
accessibilityLabel={
|
||
inputMode === 'text' ? switchToVoiceLabel : switchToTextLabel
|
||
}
|
||
accessibilityRole="button"
|
||
>
|
||
<Icon
|
||
as={inputMode === 'text' ? Mic : Type}
|
||
size={22}
|
||
color={
|
||
disabled && !isRecording
|
||
? 'rgba(141, 140, 144, 0.56)'
|
||
: CHAT_COLORS.onSurfaceVariant
|
||
}
|
||
/>
|
||
</Pressable>
|
||
{/* 中间：文字输入 或 语音录制按钮 */}
|
||
{inputMode === 'text' ? (
|
||
<View style={styles.inputCenter}>
|
||
<TextInput
|
||
key={`chat-input-${textInputKey}`}
|
||
value={value}
|
||
onChangeText={onChangeText}
|
||
placeholder={placeholder}
|
||
placeholderTextColor={CHAT_COLORS.onSurfaceVariant}
|
||
style={[styles.textInput, { height: inputDisplayHeight }]}
|
||
multiline
|
||
scrollEnabled
|
||
textAlignVertical="top"
|
||
maxLength={2000}
|
||
editable={!disabled}
|
||
onContentSizeChange={onInputContentSizeChange}
|
||
onSubmitEditing={onSend}
|
||
returnKeyType="send"
|
||
/>
|
||
</View>
|
||
) : (
|
||
<View style={styles.inputCenterFlex}>
|
||
<VoiceRecordButton
|
||
isRecording={isRecording}
|
||
recordingDuration={recordingDuration}
|
||
onPress={isRecording ? onStopRecording : onStartRecording}
|
||
tapToStartLabel={tapToStartLabel}
|
||
tapToEndLabel={tapToEndLabel}
|
||
enabled={!disabled}
|
||
/>
|
||
</View>
|
||
)}
|
||
{/* 右侧：发送 / 取消录音 / 更多 */}
|
||
{trailingAction === 'send' ? (
|
||
<Pressable
|
||
onPress={onSend}
|
||
style={({ pressed }) => [
|
||
styles.sendButton,
|
||
{ backgroundColor: colors.primary },
|
||
disabled && styles.sendButtonDisabled,
|
||
pressed && !disabled && styles.sendButtonPressed,
|
||
]}
|
||
disabled={disabled}
|
||
accessibilityLabel={sendLabel}
|
||
accessibilityRole="button"
|
||
>
|
||
<Text
|
||
style={[styles.sendButtonText, { color: CHAT_COLORS.onSurface }]}
|
||
>
|
||
{sendLabel}
|
||
</Text>
|
||
</Pressable>
|
||
) : trailingAction === 'cancel' ? (
|
||
<Pressable
|
||
onPress={onCancelRecording}
|
||
style={({ pressed }) => [
|
||
styles.iconButton,
|
||
pressed && styles.iconButtonPressed,
|
||
]}
|
||
accessibilityLabel={cancelRecordingLabel}
|
||
accessibilityRole="button"
|
||
>
|
||
<Icon as={X} size={22} color={CHAT_COLORS.errorRed} />
|
||
</Pressable>
|
||
) : (
|
||
<Pressable
|
||
onPress={onAddPress}
|
||
style={({ pressed }) => [
|
||
styles.iconButton,
|
||
pressed && styles.iconButtonPressed,
|
||
]}
|
||
disabled={disabled && !isRecording}
|
||
accessibilityLabel={addMoreLabel}
|
||
accessibilityRole="button"
|
||
>
|
||
<Icon
|
||
as={PlusCircle}
|
||
size={22}
|
||
color={
|
||
disabled && !isRecording
|
||
? 'rgba(141, 140, 144, 0.56)'
|
||
: CHAT_COLORS.onSurfaceVariant
|
||
}
|
||
/>
|
||
</Pressable>
|
||
)}
|
||
</View>
|
||
);
|
||
}
|
||
|
||
export default function ConversationScreen() {
|
||
const { id } = useLocalSearchParams<{ id: string }>();
|
||
const insets = useSafeAreaInsets();
|
||
const { t } = useTranslation('conversation');
|
||
const { t: tApp } = useTranslation('app');
|
||
const { data: messages } = useMessages(id);
|
||
const {
|
||
enqueue,
|
||
enqueueExclusive,
|
||
stop,
|
||
status: playerStatus,
|
||
currentSource,
|
||
} = usePlayer();
|
||
|
||
const handleTtsSegment = useCallback(
|
||
(p: { audioBase64?: string; audioUrl?: string }) => {
|
||
if (p.audioBase64) {
|
||
void enqueue({
|
||
uri: `data:audio/mp3;base64,${p.audioBase64}`,
|
||
label: 'TTS',
|
||
});
|
||
} else if (p.audioUrl) {
|
||
void enqueue({ uri: p.audioUrl, label: 'TTS' });
|
||
}
|
||
},
|
||
[enqueue],
|
||
);
|
||
|
||
const handlePlayVoiceExclusive = useCallback(
|
||
(uri: string) => {
|
||
void enqueueExclusive({ uri, label: 'voice' });
|
||
},
|
||
[enqueueExclusive],
|
||
);
|
||
|
||
const handlePausePlayback = useCallback(() => {
|
||
void stop();
|
||
}, [stop]);
|
||
|
||
const { connectionState, streamingMessage, sendText, sendVoiceMessage } =
|
||
useRealtimeSession({
|
||
conversationId: id ?? '',
|
||
enabled: !!id,
|
||
onTtsSegment: handleTtsSegment,
|
||
});
|
||
|
||
const handleRecordingComplete = useCallback(
|
||
(uri: string, durationMs: number) => {
|
||
void sendVoiceMessage(uri, durationMs);
|
||
},
|
||
[sendVoiceMessage],
|
||
);
|
||
|
||
const {
|
||
status: recorderStatus,
|
||
durationMs: recordingDurationMs,
|
||
start: startRecording,
|
||
stop: stopRecording,
|
||
cancel: cancelRecording,
|
||
} = useRecorder(handleRecordingComplete);
|
||
|
||
const [input, setInput] = useState('');
|
||
const [inputResetKey, setInputResetKey] = useState(0);
|
||
const [inputMode, setInputMode] = useState<InputMode>('text');
|
||
const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
|
||
const [keyboardHeight, setKeyboardHeight] = useState(0);
|
||
const listRef = useRef<FlatList>(null);
|
||
|
||
useEffect(() => {
|
||
const onShow = (e: { endCoordinates: { height: number } }) => {
|
||
setIsKeyboardVisible(true);
|
||
setKeyboardHeight(e.endCoordinates.height);
|
||
InteractionManager.runAfterInteractions(() => {
|
||
listRef.current?.scrollToEnd({ animated: true });
|
||
});
|
||
};
|
||
const onHide = () => {
|
||
setIsKeyboardVisible(false);
|
||
setKeyboardHeight(0);
|
||
};
|
||
// iOS：Will* 与系统动画同步；KeyboardAvoidingView 在 iOS 上易与 safe area 叠出缝（见 RN #52626）
|
||
const showEvt =
|
||
Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
|
||
const hideEvt =
|
||
Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
|
||
const subShow = Keyboard.addListener(showEvt, onShow);
|
||
const subHide = Keyboard.addListener(hideEvt, onHide);
|
||
return () => {
|
||
subShow.remove();
|
||
subHide.remove();
|
||
};
|
||
}, [insets.bottom]);
|
||
|
||
const flattenedData = flattenMessagesForList(messages ?? []);
|
||
|
||
const isRecording = recorderStatus === 'recording';
|
||
const recordingDuration = Math.floor(recordingDurationMs / 1000);
|
||
|
||
const handleStartRecording = useCallback(async () => {
|
||
const ok = await startRecording();
|
||
if (!ok) {
|
||
Alert.alert(t('recordingPermissionDenied'));
|
||
}
|
||
}, [startRecording, t]);
|
||
|
||
const handleSend = () => {
|
||
const text = input.trim();
|
||
if (!text) return;
|
||
sendText(text);
|
||
setInput('');
|
||
setInputResetKey((k) => k + 1);
|
||
};
|
||
|
||
const connectionLabel =
|
||
connectionState === 'connected'
|
||
? t('connectionConnected')
|
||
: connectionState === 'connecting'
|
||
? t('connectionConnecting')
|
||
: t('connectionDisconnected');
|
||
|
||
/** iOS：用键盘高度直接顶起根布局，替代 KAV（避免与 safe area 叠出缝，见 RN #52626） */
|
||
const keyboardLift =
|
||
Platform.OS === 'ios' && inputMode === 'text' && isKeyboardVisible
|
||
? keyboardHeight
|
||
: 0;
|
||
const androidKavOn =
|
||
Platform.OS === 'android' && inputMode === 'text' && isKeyboardVisible;
|
||
|
||
const composerZeroBottomInset = isKeyboardVisible && inputMode === 'text';
|
||
|
||
const screen = (
|
||
<View style={styles.column}>
|
||
<ScreenHeader
|
||
variant="chat"
|
||
title={
|
||
<View style={styles.headerTitleBlock}>
|
||
<Text style={styles.headerTitle}>{tApp('name')}</Text>
|
||
<View
|
||
style={[
|
||
styles.statusBadge,
|
||
connectionState === 'connected' && styles.statusBadgeConnected,
|
||
]}
|
||
>
|
||
<Text
|
||
style={[
|
||
styles.statusBadgeText,
|
||
connectionState === 'connected' &&
|
||
styles.statusBadgeTextConnected,
|
||
]}
|
||
>
|
||
{connectionLabel}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
}
|
||
backAccessibilityLabel={t('chatTitle')}
|
||
/>
|
||
|
||
{/* Message list - flex 1, takes remaining space */}
|
||
<FlatList
|
||
ref={listRef}
|
||
style={styles.list}
|
||
contentContainerStyle={styles.listContent}
|
||
data={flattenedData}
|
||
keyboardShouldPersistTaps="handled"
|
||
keyboardDismissMode="on-drag"
|
||
keyExtractor={(item) => item.listKey}
|
||
renderItem={({ item }) => (
|
||
<MessageBubble
|
||
item={item}
|
||
agentName={t('agentName')}
|
||
meLabel={t('me')}
|
||
currentPlaybackUri={currentSource}
|
||
playbackIsPlaying={playerStatus === 'playing'}
|
||
onPlayVoiceExclusive={handlePlayVoiceExclusive}
|
||
onPausePlayback={handlePausePlayback}
|
||
/>
|
||
)}
|
||
onContentSizeChange={() =>
|
||
InteractionManager.runAfterInteractions(() => {
|
||
listRef.current?.scrollToEnd({ animated: true });
|
||
})
|
||
}
|
||
ListFooterComponent={
|
||
streamingMessage ? (
|
||
<StreamingBubbles
|
||
streamingText={streamingMessage.text}
|
||
isComplete={streamingMessage.isComplete}
|
||
agentName={t('agentName')}
|
||
/>
|
||
) : null
|
||
}
|
||
/>
|
||
|
||
{/* WeChat-style input bar - 贴在底部，非浮空 */}
|
||
<View
|
||
style={[
|
||
styles.inputBarWrapper,
|
||
{
|
||
paddingBottom: composerZeroBottomInset ? 0 : insets.bottom,
|
||
},
|
||
]}
|
||
>
|
||
<ChatInputBar
|
||
value={input}
|
||
onChangeText={setInput}
|
||
onSend={handleSend}
|
||
textInputKey={inputResetKey}
|
||
inputMode={inputMode}
|
||
onInputModeToggle={() => {
|
||
setInputMode((m) => {
|
||
if (m === 'text') {
|
||
Keyboard.dismiss();
|
||
}
|
||
return m === 'text' ? 'voice' : 'text';
|
||
});
|
||
}}
|
||
onAddPress={() => {}}
|
||
onStartRecording={handleStartRecording}
|
||
onStopRecording={() => void stopRecording()}
|
||
onCancelRecording={() => void cancelRecording()}
|
||
isRecording={isRecording}
|
||
recordingDuration={recordingDuration}
|
||
placeholder={t('inputPlaceholder')}
|
||
placeholderVoice={t('inputPlaceholderVoice')}
|
||
addMoreLabel={t('addMore')}
|
||
sendLabel={t('send')}
|
||
switchToVoiceLabel={t('switchToVoice')}
|
||
switchToTextLabel={t('switchToText')}
|
||
tapToStartLabel={t('tapToStartRecording')}
|
||
tapToEndLabel={t('tapToEndRecording')}
|
||
cancelRecordingLabel={t('cancelRecording')}
|
||
disabled={connectionState !== 'connected'}
|
||
/>
|
||
</View>
|
||
</View>
|
||
);
|
||
|
||
if (Platform.OS === 'ios') {
|
||
return (
|
||
<View style={[styles.container, { paddingBottom: keyboardLift }]}>
|
||
{screen}
|
||
</View>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<KeyboardAvoidingView
|
||
style={styles.container}
|
||
behavior={androidKavOn ? 'height' : undefined}
|
||
>
|
||
{screen}
|
||
</KeyboardAvoidingView>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
backgroundColor: CHAT_COLORS.background,
|
||
},
|
||
column: {
|
||
flex: 1,
|
||
flexDirection: 'column',
|
||
},
|
||
headerTitleBlock: {
|
||
flex: 1,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
gap: 10,
|
||
},
|
||
headerTitle: {
|
||
fontSize: 24,
|
||
fontWeight: '700',
|
||
color: CHAT_COLORS.primary,
|
||
letterSpacing: -0.5,
|
||
},
|
||
statusBadge: {
|
||
paddingHorizontal: 8,
|
||
paddingVertical: 2,
|
||
borderRadius: 4,
|
||
backgroundColor: 'rgba(141, 140, 144, 0.2)',
|
||
borderWidth: 1,
|
||
borderColor: 'rgba(141, 140, 144, 0.3)',
|
||
},
|
||
statusBadgeConnected: {
|
||
backgroundColor: 'rgba(34, 197, 94, 0.15)',
|
||
borderColor: 'rgba(34, 197, 94, 0.3)',
|
||
},
|
||
statusBadgeText: {
|
||
fontSize: 12,
|
||
fontFamily: 'monospace',
|
||
color: CHAT_COLORS.onSurfaceVariant,
|
||
},
|
||
statusBadgeTextConnected: {
|
||
color: '#16a34a',
|
||
},
|
||
list: {
|
||
flex: 1,
|
||
},
|
||
listContent: {
|
||
flexGrow: 1,
|
||
paddingHorizontal: 12,
|
||
paddingTop: 16,
|
||
paddingBottom: 12,
|
||
},
|
||
messageRow: {
|
||
flexDirection: 'row',
|
||
alignItems: 'flex-start',
|
||
gap: 10,
|
||
marginBottom: 16,
|
||
overflow: 'visible',
|
||
},
|
||
messageRowReverse: {
|
||
flexDirection: 'row-reverse',
|
||
},
|
||
streamingRow: {
|
||
marginBottom: 0,
|
||
},
|
||
avatarWrapper: {
|
||
width: 40,
|
||
height: 40,
|
||
flexShrink: 0,
|
||
borderWidth: 2,
|
||
overflow: 'hidden',
|
||
},
|
||
avatarWrapperAgent: {
|
||
backgroundColor: CHAT_COLORS.secondaryContainer,
|
||
borderColor: CHAT_COLORS.primary,
|
||
},
|
||
avatarWrapperUser: {
|
||
backgroundColor: CHAT_COLORS.primaryFixed,
|
||
borderColor: CHAT_COLORS.onSurfaceVariant,
|
||
},
|
||
avatarImage: {
|
||
width: '100%',
|
||
height: '100%',
|
||
},
|
||
bubbleColumn: {
|
||
maxWidth: '80%',
|
||
alignSelf: 'flex-start',
|
||
},
|
||
bubbleColumnEnd: {
|
||
alignItems: 'flex-end',
|
||
alignSelf: 'flex-end',
|
||
},
|
||
nickname: {
|
||
fontSize: 16,
|
||
fontWeight: '700',
|
||
marginBottom: 2,
|
||
},
|
||
nicknameAgent: {
|
||
color: CHAT_COLORS.primary,
|
||
},
|
||
nicknameUser: {
|
||
color: CHAT_COLORS.onSurfaceVariant,
|
||
},
|
||
bubble: {
|
||
padding: 12,
|
||
borderWidth: 2,
|
||
shadowOffset: { width: 4, height: 4 },
|
||
shadowOpacity: 1,
|
||
shadowRadius: 0,
|
||
},
|
||
bubbleAgent: {
|
||
backgroundColor: CHAT_COLORS.primary,
|
||
borderColor: CHAT_COLORS.primaryBorder,
|
||
shadowColor: CHAT_COLORS.primaryBorder,
|
||
},
|
||
bubbleUser: {
|
||
backgroundColor: '#ffffff',
|
||
borderColor: CHAT_COLORS.onSurfaceVariant,
|
||
shadowColor: CHAT_COLORS.outline,
|
||
},
|
||
bubbleText: {
|
||
fontSize: 22,
|
||
lineHeight: 34,
|
||
fontWeight: '400',
|
||
},
|
||
bubbleTextAgent: {
|
||
color: CHAT_COLORS.onPrimary,
|
||
},
|
||
bubbleTextUser: {
|
||
color: CHAT_COLORS.onSurface,
|
||
},
|
||
voiceMessageBubble: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
gap: 12,
|
||
paddingVertical: 4,
|
||
},
|
||
voiceMessageBubbleUser: {},
|
||
voiceMessageBubbleAgent: {},
|
||
voicePlayButton: {
|
||
width: 44,
|
||
height: 44,
|
||
borderRadius: 22,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
backgroundColor: 'rgba(255,255,255,0.2)',
|
||
},
|
||
voiceDurationText: {
|
||
fontSize: 18,
|
||
fontWeight: '500',
|
||
},
|
||
voiceDurationTextUser: {
|
||
color: CHAT_COLORS.onSurface,
|
||
},
|
||
voiceDurationTextAgent: {
|
||
color: CHAT_COLORS.onPrimary,
|
||
},
|
||
inputBarWrapper: {
|
||
backgroundColor: CHAT_COLORS.surface,
|
||
borderTopLeftRadius: 24,
|
||
borderTopRightRadius: 24,
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: -4 },
|
||
shadowOpacity: 0.08,
|
||
shadowRadius: 12,
|
||
elevation: 8,
|
||
},
|
||
inputBar: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
gap: 10,
|
||
paddingHorizontal: 14,
|
||
paddingVertical: 12,
|
||
},
|
||
iconButton: {
|
||
width: 44,
|
||
height: 44,
|
||
borderRadius: 22,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
iconButtonPressed: {
|
||
opacity: 0.7,
|
||
},
|
||
inputCenter: {
|
||
flex: 1,
|
||
minHeight: 48,
|
||
borderRadius: 16,
|
||
backgroundColor: 'rgba(141, 140, 144, 0.14)',
|
||
paddingHorizontal: 16,
|
||
paddingVertical: 11,
|
||
justifyContent: 'flex-start',
|
||
},
|
||
inputCenterFlex: {
|
||
flex: 1,
|
||
minHeight: 48,
|
||
},
|
||
voiceRecordCenter: {
|
||
flex: 1,
|
||
minHeight: 48,
|
||
borderRadius: 16,
|
||
backgroundColor: 'rgba(141, 140, 144, 0.14)',
|
||
paddingHorizontal: 16,
|
||
paddingVertical: 11,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
},
|
||
voiceRecordCenterRecording: {
|
||
backgroundColor: 'rgba(141, 140, 144, 0.20)',
|
||
},
|
||
voiceRecordLabel: {
|
||
fontSize: 16,
|
||
fontWeight: '500',
|
||
color: 'rgba(27, 27, 31, 0.72)',
|
||
flex: 1,
|
||
},
|
||
voiceRecordLabelCenter: {
|
||
textAlign: 'center',
|
||
},
|
||
voiceRecordLabelCenterWrap: {
|
||
flex: 1,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
},
|
||
voiceRecordLabelRecording: {
|
||
color: 'rgba(27, 27, 31, 0.92)',
|
||
},
|
||
voiceRecordLabelDisabled: {
|
||
color: 'rgba(141, 140, 144, 0.68)',
|
||
},
|
||
voiceRecordPill: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
gap: 6,
|
||
backgroundColor: 'rgba(255, 255, 255, 0.8)',
|
||
borderRadius: 999,
|
||
paddingHorizontal: 10,
|
||
paddingVertical: 5,
|
||
},
|
||
voiceRecordPulseDot: {
|
||
width: 7,
|
||
height: 7,
|
||
borderRadius: 3.5,
|
||
backgroundColor: CHAT_COLORS.errorRed,
|
||
},
|
||
voiceRecordDurationWrap: {
|
||
width: 32,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
voiceRecordDuration: {
|
||
fontSize: 12,
|
||
lineHeight: 12,
|
||
color: 'rgba(27, 27, 31, 0.86)',
|
||
textAlign: 'center',
|
||
},
|
||
voiceRecordDurationAndroid: {
|
||
textAlignVertical: 'center',
|
||
} as const,
|
||
textInput: {
|
||
fontSize: 16,
|
||
lineHeight: CHAT_INPUT_LINE_H,
|
||
color: CHAT_COLORS.onSurface,
|
||
padding: 0,
|
||
maxHeight: CHAT_INPUT_MAX_H,
|
||
width: '100%',
|
||
},
|
||
sendButton: {
|
||
height: 44,
|
||
paddingHorizontal: 16,
|
||
paddingVertical: 11,
|
||
borderRadius: 22,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
sendButtonPressed: {
|
||
opacity: 0.9,
|
||
},
|
||
sendButtonDisabled: {
|
||
opacity: 0.45,
|
||
},
|
||
sendButtonText: {
|
||
fontSize: 16,
|
||
fontWeight: '500',
|
||
},
|
||
});
|