82 lines
3.1 KiB
TypeScript
82 lines
3.1 KiB
TypeScript
import ChatSvg from "@/assets/icons/svg/chat.svg";
|
|
import { ContentPart, Message, User } from "@/types/ask";
|
|
import { TFunction } from "i18next";
|
|
import React from 'react';
|
|
import {
|
|
StyleSheet,
|
|
View
|
|
} from 'react-native';
|
|
|
|
import { Fonts } from "@/constants/Fonts";
|
|
import MessageRow from './MessageRow';
|
|
|
|
interface RenderMessageProps {
|
|
insets: { top: number };
|
|
item: Message;
|
|
sessionId: string;
|
|
setModalVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, data: ContentPart }>>;
|
|
modalVisible: { visible: boolean, data: ContentPart };
|
|
setModalDetailsVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, content: any }>>;
|
|
modalDetailsVisible: { visible: boolean, content: any };
|
|
setSelectedImages: React.Dispatch<React.SetStateAction<string[]>>;
|
|
selectedImages: string[];
|
|
t: TFunction;
|
|
setCancel: React.Dispatch<React.SetStateAction<boolean>>;
|
|
cancel: boolean;
|
|
}
|
|
|
|
const MessageItem = ({ setCancel, cancel = true, t, insets, item, sessionId, setModalVisible, modalVisible, setModalDetailsVisible, modalDetailsVisible, setSelectedImages, selectedImages }: RenderMessageProps) => {
|
|
const isUser = item.role === User;
|
|
|
|
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-[85%] mb-[1rem] flex flex-col gap-2">
|
|
<MessageRow
|
|
item={item}
|
|
isUser={isUser}
|
|
setModalVisible={setModalVisible}
|
|
setCancel={setCancel}
|
|
cancel={cancel}
|
|
t={t}
|
|
setSelectedImages={setSelectedImages}
|
|
setModalDetailsVisible={setModalDetailsVisible}
|
|
/>
|
|
{/* {item.content instanceof Array && item.content.filter((media: ContentPart) => media.type !== 'text').length > 0 && (
|
|
<View style={styles.tips}>
|
|
<TouchableOpacity style={[styles.tip, { borderRadius: 16 }]} onPress={() => {
|
|
|
|
}}>
|
|
<ThemedText style={styles.tipText}>Help me create a warm, cozy video.</ThemedText>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={[styles.tip, { borderTopLeftRadius: 16, borderTopRightRadius: 16, borderBottomLeftRadius: 24, borderBottomRightRadius: 24 }]}>
|
|
<ThemedText style={styles.tipText}>Help me find materials for subsequent operations.</ThemedText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)} */}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
tips: {
|
|
flexDirection: 'column',
|
|
gap: 5,
|
|
marginRight: 10,
|
|
},
|
|
tip: {
|
|
backgroundColor: '#FFF8DE',
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 8,
|
|
},
|
|
tipText: {
|
|
color: '#4C320C',
|
|
fontSize: 14,
|
|
fontFamily: Fonts['inter']
|
|
}
|
|
});
|
|
|
|
export default React.memo(MessageItem);
|
|
|