'init'

app/components/DialogAttachment/AttachMessages.tsx

@@ -0,0 +1,44 @@
+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>
+    )
+}