63 lines
2.6 KiB
TypeScript
63 lines
2.6 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 {
|
|
View
|
|
} from 'react-native';
|
|
|
|
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.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>
|
|
)} */}
|
|
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default React.memo(MessageItem);
|
|
|