jinyaqiu
11b0c051d1
All checks were successful
Dev Deploy / Explore-Gitea-Actions (push) Successful in 15s
279 lines
12 KiB
TypeScript
279 lines
12 KiB
TypeScript
import ChatSvg from "@/assets/icons/svg/chat.svg";
|
|
import MoreSvg from "@/assets/icons/svg/more.svg";
|
|
import { Message, Video } from "@/types/ask";
|
|
import { MaterialItem } from "@/types/personal-info";
|
|
import { useVideoPlayer, VideoView } from 'expo-video';
|
|
import React from 'react';
|
|
import {
|
|
Image,
|
|
Modal,
|
|
Pressable,
|
|
StyleProp,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
View,
|
|
ViewStyle
|
|
} from 'react-native';
|
|
import { ThemedText } from "../ThemedText";
|
|
import TypewriterText from "./typewriterText";
|
|
import { mergeArrays } from "./utils";
|
|
|
|
interface RenderMessageProps {
|
|
item: Message;
|
|
sessionId: string;
|
|
setModalVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, data: Video | MaterialItem }>>;
|
|
modalVisible: { visible: boolean, data: Video | MaterialItem };
|
|
}
|
|
|
|
const renderMessage = ({ item, sessionId, setModalVisible, modalVisible }: RenderMessageProps) => {
|
|
const isUser = item.role === 'User';
|
|
const isVideo = (data: Video | MaterialItem): data is Video => {
|
|
return 'video' in data;
|
|
};
|
|
|
|
// 创建一个新的 VideoPlayer 组件
|
|
const VideoPlayer = ({
|
|
videoUrl,
|
|
style,
|
|
onPress
|
|
}: {
|
|
videoUrl: string;
|
|
style?: StyleProp<ViewStyle>;
|
|
onPress?: () => void;
|
|
}) => {
|
|
const player = useVideoPlayer(videoUrl, (player) => {
|
|
player.loop = true;
|
|
player.play();
|
|
});
|
|
|
|
return (
|
|
<Pressable
|
|
style={[{
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
}, style]}
|
|
onPress={onPress}
|
|
>
|
|
<VideoView
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
backgroundColor: '#000', // 添加背景色
|
|
}}
|
|
player={player}
|
|
allowsFullscreen
|
|
allowsPictureInPicture
|
|
/>
|
|
</Pressable>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<View className={`flex-row items-start gap-2 w-full ${isUser ? 'justify-end' : 'justify-start'}`}>
|
|
{!isUser && <ChatSvg width={36} height={36} />}
|
|
<View className="max-w-[90%] mb-[1rem] flex flex-col gap-2">
|
|
<View
|
|
style={[
|
|
styles.messageBubble,
|
|
isUser ? styles.userBubble : styles.aiBubble
|
|
]}
|
|
className={`${isUser ? '!bg-bgPrimary ml-10 rounded-full' : '!bg-aiBubble mr-10 rounded-2xl'} border-0 ${!isUser && (item.content.video_material_infos && item.content.video_material_infos.length > 0 || item.content.image_material_infos && item.content.image_material_infos.length > 0) ? '!rounded-t-3xl !rounded-b-2xl' : '!rounded-3xl'}`}
|
|
>
|
|
<View className={`${isUser ? 'bg-bgPrimary' : 'bg-aiBubble'}`}>
|
|
<Text style={isUser ? styles.userText : styles.aiText}>
|
|
{!isUser
|
|
?
|
|
sessionId ? item.content.text : <TypewriterText text={item.content.text} speed={100} loop={item.content.text == "正在寻找，请稍等..."} />
|
|
: item.content.text
|
|
}
|
|
</Text>
|
|
|
|
{(item.content.image_material_infos && item.content.image_material_infos.length > 0 || item.content.video_material_infos && item.content.video_material_infos.length > 0) && (
|
|
<View className="relative">
|
|
<View className="mt-2 flex flex-row gap-2 w-full">
|
|
{mergeArrays(item.content.image_material_infos || [], item.content.video_material_infos || [])?.slice(0, 3)?.map((image, index, array) => (
|
|
<Pressable
|
|
key={`${image.role}-${image.timestamp}`}
|
|
onPress={() => {
|
|
setModalVisible({ visible: true, data: image });
|
|
}}
|
|
style={({ pressed }) => [
|
|
array.length === 1 ? styles.fullWidthImage : styles.gridImage,
|
|
array.length === 2 && { width: '49%' },
|
|
array.length >= 3 && { width: '32%' },
|
|
{ opacity: pressed ? 0.8 : 1 } // 添加按下效果
|
|
]}
|
|
>
|
|
<Image
|
|
source={{ uri: image?.preview_file_info?.url || image.video?.preview_file_info?.url }}
|
|
className="rounded-xl w-full h-full"
|
|
resizeMode="cover"
|
|
/>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
{
|
|
((item.content.video_material_infos?.length || 0) + (item.content.image_material_infos?.length || 0)) > 3
|
|
&& <View className="absolute top-1/2 -translate-y-1/2 -right-4 translate-x-1/2 bg-bgPrimary flex flex-row items-center gap-2 p-1 pl-2 rounded-full">
|
|
<ThemedText className="!text-white font-semibold">{((item.content.video_material_infos?.length || 0) + (item.content.image_material_infos?.length || 0))}</ThemedText>
|
|
<View className="bg-white rounded-full p-2">
|
|
<MoreSvg />
|
|
</View>
|
|
</View>
|
|
}
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
{/* {item.askAgain && item.askAgain.length > 0 && (
|
|
<View className={`mr-10`}>
|
|
{item.askAgain.map((suggestion, index, array) => (
|
|
<TouchableOpacity
|
|
key={suggestion.id}
|
|
className={`bg-yellow-50 rounded-xl px-4 py-2 border border-yellow-200 border-0 mb-2 ${index === array.length - 1 ? 'mb-0 rounded-b-3xl rounded-t-2xl' : 'rounded-2xl'}`}
|
|
>
|
|
<Text className="text-gray-700">{suggestion.text}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
)} */}
|
|
<Modal
|
|
animationType="fade"
|
|
transparent={true}
|
|
visible={modalVisible.visible}
|
|
onRequestClose={() => {
|
|
setModalVisible({ visible: false, data: {} as Video | MaterialItem });
|
|
}}>
|
|
<View style={styles.centeredView}>
|
|
<TouchableOpacity
|
|
style={styles.background}
|
|
onPress={() => {
|
|
setModalVisible({ visible: false, data: {} as Video | MaterialItem })
|
|
}}
|
|
/>
|
|
<TouchableOpacity style={styles.modalView} onPress={() => setModalVisible({ visible: false, data: {} as Video | MaterialItem })}>
|
|
{isVideo(modalVisible.data) ? (
|
|
// 视频播放器
|
|
<TouchableOpacity
|
|
activeOpacity={1}
|
|
style={{
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
maxHeight: "60%",
|
|
}}
|
|
onPress={() => setModalVisible({ visible: false, data: {} as Video | MaterialItem })}
|
|
>
|
|
<VideoPlayer
|
|
videoUrl={modalVisible.data.video.file_info.url}
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
alignSelf: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
onPress={() => setModalVisible({ visible: false, data: {} as Video | MaterialItem })}
|
|
/>
|
|
</TouchableOpacity>
|
|
) : (
|
|
// 图片预览
|
|
<TouchableOpacity
|
|
activeOpacity={1}
|
|
onPress={() => setModalVisible({ visible: false, data: {} as Video | MaterialItem })}
|
|
style={styles.imageContainer}
|
|
>
|
|
<Image
|
|
source={{ uri: modalVisible.data.preview_file_info?.url }}
|
|
style={styles.fullWidthImage}
|
|
resizeMode="contain"
|
|
/>
|
|
</TouchableOpacity>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</Modal>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default renderMessage;
|
|
|
|
const styles = StyleSheet.create({
|
|
video: {
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
imageContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
maxHeight: '60%',
|
|
},
|
|
fullWidthImage: {
|
|
width: '100%',
|
|
height: "54%",
|
|
marginBottom: 8,
|
|
},
|
|
gridImage: {
|
|
aspectRatio: 1,
|
|
marginBottom: 8,
|
|
},
|
|
background: {
|
|
...StyleSheet.absoluteFillObject,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.5)', // 添加半透明黑色背景
|
|
},
|
|
centeredView: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
modalView: {
|
|
borderRadius: 20,
|
|
alignItems: 'center',
|
|
height: '100%',
|
|
width: "100%",
|
|
justifyContent: 'center',
|
|
alignSelf: 'center',
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#f5f5f5',
|
|
},
|
|
userAvatar: {
|
|
width: 30,
|
|
height: 30,
|
|
borderRadius: 15,
|
|
},
|
|
messageList: {
|
|
padding: 16,
|
|
},
|
|
messageBubble: {
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
fontWeight: "600"
|
|
},
|
|
userBubble: {
|
|
alignSelf: 'flex-end',
|
|
backgroundColor: '#FFB645',
|
|
marginLeft: '20%',
|
|
},
|
|
aiBubble: {
|
|
alignSelf: 'flex-start',
|
|
backgroundColor: '#fff',
|
|
marginRight: '20%',
|
|
borderWidth: 1,
|
|
borderColor: '#e5e5ea',
|
|
},
|
|
userText: {
|
|
color: '#4C320C',
|
|
fontSize: 16,
|
|
},
|
|
aiText: {
|
|
color: '#000',
|
|
fontSize: 16,
|
|
},
|
|
}); |