44 lines
1.8 KiB
TypeScript
44 lines
1.8 KiB
TypeScript
import { Flex, Text } from "@mantine/core";
|
|
import { DialogAttachmentProps } from "./DialogAttachment";
|
|
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
|
import { IconX } from "@tabler/icons-react";
|
|
import { useReplyMessages } from "@/app/providers/DialogProvider/useReplyMessages";
|
|
import { dotMessageIfNeeded } from "@/app/utils/utils";
|
|
import { TextParser } from "../TextParser/TextParser";
|
|
|
|
export function AttachMessages(props : DialogAttachmentProps) {
|
|
const colors = useRosettaColors();
|
|
const {deselectAllMessages} = useReplyMessages();
|
|
|
|
const onClickCancel = () => {
|
|
deselectAllMessages();
|
|
props.onRemove && props.onRemove(props.attach);
|
|
}
|
|
|
|
const jsonMessages = JSON.parse(props.attach.blob);
|
|
|
|
return (
|
|
<Flex style={{
|
|
borderLeft: '2px solid ' + colors.brandColor,
|
|
paddingLeft: 8,
|
|
borderRadius: 1,
|
|
}} w={'100%'} justify={'space-between'} align={'center'} gap={8} key={props.attach.id}>
|
|
<Flex direction={'column'} gap={4}>
|
|
<Text fz={13} c={colors.brandColor} fw={'bold'}>Reply messages</Text>
|
|
<Text fz={12} c={'dimmed'} lineClamp={3}>
|
|
{jsonMessages.length > 1 && <>
|
|
Reply to {jsonMessages.length} messages
|
|
</>}
|
|
{jsonMessages.length == 1 && <>
|
|
{jsonMessages[0].message.trim().length > 0 ? <TextParser noHydrate text={dotMessageIfNeeded(jsonMessages[0].message.trim(), 40)}></TextParser> : 'Attachment'}
|
|
</>}
|
|
</Text>
|
|
</Flex>
|
|
<Flex onClick={onClickCancel} style={{
|
|
cursor: 'pointer'
|
|
}}>
|
|
<IconX size={17} stroke={1.1}></IconX>
|
|
</Flex>
|
|
</Flex>
|
|
)
|
|
} |