82 lines
3.1 KiB
TypeScript
82 lines
3.1 KiB
TypeScript
import MoreSvg from "@/assets/icons/svg/more.svg";
|
|
import { ContentPart, getMessageText, isMessageContainMedia } from "@/types/ask";
|
|
import { MarkdownTextInput, parseExpensiMark } from '@expensify/react-native-live-markdown';
|
|
import { TFunction } from 'i18next';
|
|
import React from 'react';
|
|
import { 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'}`}>
|
|
{getMessageText(item) == "keepSearchIng" && !isUser ? (
|
|
<Loading />
|
|
) : (
|
|
<MarkdownTextInput
|
|
value={getMessageText(item)}
|
|
parser={parseExpensiMark}
|
|
/>
|
|
)}
|
|
|
|
|
|
{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 React.memo(MessageContent);
|