78 lines
3.1 KiB
TypeScript
78 lines
3.1 KiB
TypeScript
import MoreSvg from "@/assets/icons/svg/more.svg";
|
|
import { ContentPart, getMessageText, isMessageContainMedia } from "@/types/ask";
|
|
import { TFunction } from 'i18next';
|
|
import React from 'react';
|
|
import { Text, TouchableOpacity, View } from 'react-native';
|
|
import Loading from '../../ask/threeCircle';
|
|
import { ThemedText } from "../../ThemedText";
|
|
import MediaGrid from './MediaGrid';
|
|
|
|
interface MessageContentProps {
|
|
item: any;
|
|
isUser: boolean;
|
|
setModalVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, data: ContentPart }>>;
|
|
setCancel: React.Dispatch<React.SetStateAction<boolean>>;
|
|
cancel: boolean;
|
|
t: TFunction;
|
|
setSelectedImages: React.Dispatch<React.SetStateAction<string[]>>;
|
|
setModalDetailsVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, content: any }>>;
|
|
}
|
|
|
|
const MessageContent = ({
|
|
item,
|
|
isUser,
|
|
setModalVisible,
|
|
setCancel,
|
|
cancel,
|
|
t,
|
|
setSelectedImages,
|
|
setModalDetailsVisible
|
|
}: MessageContentProps) => {
|
|
return (
|
|
<View className={`${isUser ? 'bg-bgPrimary' : 'bg-aiBubble'}`}>
|
|
<Text className={`text-base ${isUser ? 'text-[#4C320C]' : 'text-black'} leading-6 font-semibold`}>
|
|
{!isUser
|
|
? getMessageText(item) == "keepSearchIng"
|
|
? <Loading />
|
|
: getMessageText(item)
|
|
: getMessageText(item)
|
|
}
|
|
</Text>
|
|
|
|
{isMessageContainMedia(item) && (
|
|
<View className="relative">
|
|
{item.content instanceof Array && (() => {
|
|
const mediaItems = item.content.filter((media: ContentPart) => media.type !== 'text');
|
|
|
|
return (
|
|
<View className="mt-2">
|
|
<MediaGrid
|
|
mediaItems={mediaItems}
|
|
setModalVisible={setModalVisible}
|
|
setCancel={setCancel}
|
|
cancel={cancel}
|
|
t={t}
|
|
/>
|
|
</View>
|
|
);
|
|
})()}
|
|
{
|
|
(item.content instanceof Array && item.content.length > 3)
|
|
&& <TouchableOpacity 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" onPress={() => {
|
|
setSelectedImages([])
|
|
setModalDetailsVisible({ visible: true, content: item.content });
|
|
}}>
|
|
<ThemedText className="!text-white font-semibold">{item.content.length}</ThemedText>
|
|
<View className="bg-white rounded-full p-2">
|
|
<MoreSvg />
|
|
</View>
|
|
</TouchableOpacity>
|
|
}
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default MessageContent;
|