refactor(coach): 重构教练组件，统一导入并简化UI实现与类型定义
This commit is contained in:
richarjiang
246
components/coach/ChatComposer.tsx
Normal file
246
components/coach/ChatComposer.tsx
Normal file
@@ -0,0 +1,246 @@
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import { Image } from 'expo-image';
|
||||
import React from 'react';
|
||||
import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
|
||||
import QuickChips from './QuickChips';
|
||||
import { QuickChip, SelectedImage } from './types';
|
||||
|
||||
interface ChatComposerProps {
|
||||
input: string;
|
||||
onInputChange: (text: string) => void;
|
||||
onSend: () => void;
|
||||
onPickImages: () => void;
|
||||
onCancelRequest: () => void;
|
||||
selectedImages: SelectedImage[];
|
||||
onRemoveImage: (id: string) => void;
|
||||
onPreviewImage: (uri: string) => void;
|
||||
isSending: boolean;
|
||||
isStreaming: boolean;
|
||||
chips: QuickChip[];
|
||||
}
|
||||
|
||||
const ChatComposer: React.FC<ChatComposerProps> = ({
|
||||
input,
|
||||
onInputChange,
|
||||
onSend,
|
||||
onPickImages,
|
||||
onCancelRequest,
|
||||
selectedImages,
|
||||
onRemoveImage,
|
||||
onPreviewImage,
|
||||
isSending,
|
||||
isStreaming,
|
||||
chips
|
||||
}) => {
|
||||
const colorScheme = useColorScheme();
|
||||
const theme = Colors[colorScheme ?? 'light'];
|
||||
|
||||
const hasContent = input.trim() || selectedImages.length > 0;
|
||||
const isActive = isSending || isStreaming;
|
||||
|
||||
return (
|
||||
<BlurView intensity={95} tint={colorScheme} style={styles.composerWrap}>
|
||||
{/* 快捷操作按钮 */}
|
||||
<QuickChips chips={chips} />
|
||||
|
||||
{/* 选中的图片预览 */}
|
||||
{selectedImages.length > 0 && (
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
style={styles.imagesRow}
|
||||
contentContainerStyle={styles.imagesRowContent}
|
||||
>
|
||||
{selectedImages.map((img) => (
|
||||
<View key={img.id} style={styles.imageThumbWrap}>
|
||||
<TouchableOpacity
|
||||
onPress={() => onPreviewImage(img.localUri)}
|
||||
style={styles.imageThumb}
|
||||
>
|
||||
<Image
|
||||
source={{ uri: img.localUri }}
|
||||
style={styles.imageThumb}
|
||||
contentFit="cover"
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* 上传进度 */}
|
||||
{img.progress > 0 && img.progress < 1 && (
|
||||
<View style={styles.imageProgressOverlay}>
|
||||
<Text style={styles.imageProgressText}>
|
||||
{Math.round(img.progress * 100)}%
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 上传错误 */}
|
||||
{img.error && (
|
||||
<View style={styles.imageErrorOverlay}>
|
||||
<TouchableOpacity
|
||||
onPress={() => {/* 重试上传逻辑 */ }}
|
||||
style={styles.imageRetryBtn}
|
||||
>
|
||||
<Ionicons name="refresh" size={12} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 删除按钮 */}
|
||||
<TouchableOpacity
|
||||
onPress={() => onRemoveImage(img.id)}
|
||||
style={styles.imageRemoveBtn}
|
||||
>
|
||||
<Ionicons name="close" size={12} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
)}
|
||||
|
||||
{/* 输入区域 */}
|
||||
<View style={styles.inputRow}>
|
||||
<TouchableOpacity
|
||||
onPress={onPickImages}
|
||||
style={[styles.mediaBtn, { backgroundColor: `${theme.primary}20` }]}
|
||||
>
|
||||
<Ionicons name="image-outline" size={18} color={theme.text} />
|
||||
</TouchableOpacity>
|
||||
|
||||
<TextInput
|
||||
placeholder="问我任何健康相关的问题，如营养、健身、生活管理等..."
|
||||
placeholderTextColor={theme.textMuted}
|
||||
style={[styles.input, { color: theme.text }]}
|
||||
value={input}
|
||||
onChangeText={onInputChange}
|
||||
multiline
|
||||
onSubmitEditing={onSend}
|
||||
submitBehavior="blurAndSubmit"
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
disabled={!hasContent && !isActive}
|
||||
onPress={isActive ? onCancelRequest : onSend}
|
||||
style={[
|
||||
styles.sendBtn,
|
||||
{
|
||||
backgroundColor: isActive ? theme.danger : theme.primary,
|
||||
opacity: (hasContent || isActive) ? 1 : 0.5
|
||||
}
|
||||
]}
|
||||
>
|
||||
{isActive ? (
|
||||
<Ionicons name="stop" size={18} color="#fff" />
|
||||
) : (
|
||||
<Ionicons name="arrow-up" size={18} color={theme.onPrimary} />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</BlurView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
composerWrap: {
|
||||
paddingTop: 8,
|
||||
paddingHorizontal: 10,
|
||||
borderTopWidth: 0,
|
||||
},
|
||||
imagesRow: {
|
||||
maxHeight: 92,
|
||||
marginBottom: 8,
|
||||
},
|
||||
imagesRowContent: {
|
||||
gap: 8,
|
||||
paddingHorizontal: 6,
|
||||
},
|
||||
imageThumbWrap: {
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: 12,
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
backgroundColor: 'rgba(122,90,248,0.08)',
|
||||
},
|
||||
imageThumb: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
imageRemoveBtn: {
|
||||
position: 'absolute',
|
||||
right: 4,
|
||||
top: 4,
|
||||
width: 20,
|
||||
height: 20,
|
||||
borderRadius: 10,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(0,0,0,0.45)',
|
||||
},
|
||||
imageProgressOverlay: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
imageProgressText: {
|
||||
color: '#fff',
|
||||
fontWeight: '700',
|
||||
fontSize: 12,
|
||||
},
|
||||
imageErrorOverlay: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(255,0,0,0.35)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
imageRetryBtn: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||
},
|
||||
inputRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 8,
|
||||
},
|
||||
mediaBtn: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 6,
|
||||
},
|
||||
input: {
|
||||
flex: 1,
|
||||
fontSize: 15,
|
||||
maxHeight: 120,
|
||||
minHeight: 40,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 6,
|
||||
textAlignVertical: 'center',
|
||||
},
|
||||
sendBtn: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
export default ChatComposer;
|
||||
Reference in New Issue
Block a user