62 lines
2.6 KiB
TypeScript
62 lines
2.6 KiB
TypeScript
import { Alert, Flex, Skeleton, Text } from "@mantine/core";
|
|
import { AttachmentProps } from "./MessageAttachments";
|
|
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
|
import { ReplyedMessage } from "../ReplyedMessage/ReplyedMessage";
|
|
import { IconX } from "@tabler/icons-react";
|
|
import { useSetting } from "@/app/providers/SettingsProvider/useSetting";
|
|
import { modals } from "@mantine/modals";
|
|
|
|
export function MessageReplyMessages(props: AttachmentProps) {
|
|
const colors = useRosettaColors();
|
|
const [showAlertInReplyMessages, setShowAlertInReplyMessages] = useSetting<boolean>
|
|
('showAlertInReplyMessages', true);
|
|
const [bgInReplyMessages] = useSetting<string>
|
|
('bgInReplyMessages', '');
|
|
const reply = JSON.parse(props.attachment.blob);
|
|
|
|
//console.info("Mreply", reply);
|
|
|
|
const closeAlert = () => {
|
|
modals.openConfirmModal({
|
|
title: 'Disable Warning',
|
|
centered: true,
|
|
children: (
|
|
<Text size="sm">
|
|
Are you sure you want to disable the warning about forged messages in replies?
|
|
</Text>
|
|
),
|
|
labels: { confirm: 'Yes, disable', cancel: 'No, keep it' },
|
|
|
|
onCancel: () => {},
|
|
onConfirm: () => setShowAlertInReplyMessages(false),
|
|
});
|
|
}
|
|
|
|
return (
|
|
<Flex maw={'100%'} direction={'column'} bg={bgInReplyMessages != "" ? `var(--mantine-color-${bgInReplyMessages}-light)` : undefined} p={0} mb={'xs'} style={{
|
|
borderLeft: '2px solid ' + (bgInReplyMessages != "" ? `var(--mantine-color-${bgInReplyMessages}-6)` : colors.error),
|
|
borderRadius: 2
|
|
}}>
|
|
{reply.length <= 0 &&
|
|
<Skeleton h={50} w={'100%'}></Skeleton>
|
|
}
|
|
{reply.map((msg, index) => (
|
|
<ReplyedMessage parent={props.parent} chacha_key_plain={props.chacha_key_plain} key={index} messageReply={msg}></ReplyedMessage>
|
|
))}
|
|
{showAlertInReplyMessages && <Alert style={{
|
|
borderTopLeftRadius: 0,
|
|
borderTopRightRadius: 0,
|
|
borderBottomLeftRadius: 0,
|
|
borderBottomRightRadius: 4,
|
|
}} variant="light" p={5} color={'red'}>
|
|
<Flex align={'center'} gap={'sm'}>
|
|
<Text c={'red'} fz={8}>
|
|
Due to the use of encryption, these messages may be forged by the sender
|
|
</Text>
|
|
<IconX size={11} color={'red'} onClick={closeAlert}></IconX>
|
|
</Flex>
|
|
</Alert>}
|
|
</Flex>
|
|
);
|
|
}
|