'init'

app/components/DialogAttachment/AttachAvatar.tsx

@@ -0,0 +1,60 @@
+import { Box, Flex, Paper, Text } from "@mantine/core";
+import { IconLock, IconX } from "@tabler/icons-react";
+import { DialogAttachmentProps } from "./DialogAttachment";
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { useDialog } from "@/app/providers/DialogProvider/useDialog";
+import { useGroups } from "@/app/providers/DialogProvider/useGroups";
+
+
+export function AttachAvatar (props : DialogAttachmentProps) {
+    const colors = useRosettaColors();
+    const {dialog} = useDialog();
+    const {hasGroup} = useGroups();
+
+    return (
+        <Paper withBorder p={'sm'} style={{
+            width: '100%',
+            position: 'relative'
+        }}
+         key={props.attach.id}>
+            <Flex gap={'xs'}>
+                <img style={{
+                    width: 60,
+                    height: 60,
+                    borderRadius: '50%',
+                    userSelect: 'none'
+                }} src={props.attach.blob}>
+                </img>
+                <Flex direction={"column"} justify={"center"}>
+                    <Flex direction={"row"} align={"center"} gap={5}>
+                        <Text fw={500} fz={'sm'}>{hasGroup(dialog) ? 'Group' : 'Your'} avatar</Text>
+                        <IconLock size={14} stroke={2} color={colors.success}></IconLock>
+                    </Flex>
+                    <Text fz={'xs'} c={'dimmed'}>
+                        This avatar will be visible {hasGroup(dialog) ? 'to the group' : 'to your opponent'}.
+                        All avatars are end-to-end encrypted.
+                    </Text>
+                </Flex>
+            </Flex>
+            {props.onRemove && 
+                <Box bg={colors.error} style={{
+                    position: 'absolute',
+                    top: -5,
+                    right: -5,
+                    borderRadius: '50%',
+                    cursor: 'pointer',
+                    height: 18,
+                    width: 18,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+                onClick={() => {
+                    props.onRemove && props.onRemove(props.attach);
+                }}>
+                    <IconX size={13} stroke={2} color="white"></IconX>
+                </Box>
+            }
+        </Paper>        
+    );
+}

app/components/DialogAttachment/AttachFile.tsx

@@ -0,0 +1,85 @@
+import { Box, Flex, Text } from "@mantine/core";
+import { DialogAttachmentProps } from "./DialogAttachment";
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { IconFile, IconFileTypeJpg, IconFileTypeJs, IconFileTypePng, IconFileTypeZip, IconX } from "@tabler/icons-react";
+import { dotCenterIfNeeded, humanFilesize } from "@/app/utils/utils";
+
+export function AttachFile(props : DialogAttachmentProps) {
+    const colors = useRosettaColors();
+    const filesize = parseInt(props.attach.preview.split("::")[0]);
+    const filename = props.attach.preview.split("::")[1];
+    const filetype = filename.split(".")[filename.split(".").length - 1];
+
+    const getIconByFiletype = (type : string) : React.ReactNode => {
+        type = type.trim().toLocaleLowerCase();
+        const iconAttributes = {
+            size: 23,
+            color: colors.chevrons.active
+        }
+        switch(type){
+            case 'js':
+                return <IconFileTypeJs {...iconAttributes}></IconFileTypeJs>
+            case 'jpeg':
+                return <IconFileTypeJpg {...iconAttributes}></IconFileTypeJpg>
+            case 'jpg':
+                return <IconFileTypeJpg {...iconAttributes}></IconFileTypeJpg>
+            case 'png':
+                return <IconFileTypePng {...iconAttributes}></IconFileTypePng>
+            case 'zip':
+                return <IconFileTypeZip {...iconAttributes}></IconFileTypeZip>
+            case '7z':
+                return <IconFileTypeZip {...iconAttributes}></IconFileTypeZip>
+            default:
+                return <IconFile {...iconAttributes}></IconFile>
+        }
+    }
+
+    const icon = getIconByFiletype(filetype);
+
+    return (
+        <Box style={{
+            minWidth: 100,
+            minHeight: 70,
+            position: 'relative',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            border: '1px solid ' + colors.borderColor,
+            borderRadius: 8,
+            backgroundColor: colors.boxColor,
+            flexDirection: 'row',
+            gap: 4
+        }}
+         key={props.attach.id}>
+            {icon}
+            <Flex direction={'column'} gap={4}>
+                <Text size={'xs'} c={colors.chevrons.active}>
+                    {dotCenterIfNeeded(filename, 10)}
+                </Text>                
+                <Text size={'xs'} c={colors.chevrons.active}>
+                    {humanFilesize(filesize)}
+                </Text>
+            </Flex>
+            
+            {props.onRemove && 
+                <Box bg={colors.brandColor} style={{
+                    position: 'absolute',
+                    top: -5,
+                    right: -5,
+                    borderRadius: '50%',
+                    cursor: 'pointer',
+                    height: 18,
+                    width: 18,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+                onClick={() => {
+                    props.onRemove && props.onRemove(props.attach);
+                }}>
+                    <IconX size={13} stroke={2} color="white"></IconX>
+                </Box>
+            }
+        </Box>  
+    );
+}

app/components/DialogAttachment/AttachImage.tsx

@@ -0,0 +1,44 @@
+import { Box } from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
+import { DialogAttachmentProps } from "./DialogAttachment";
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+
+
+export function AttachImage (props : DialogAttachmentProps) {
+    const colors = useRosettaColors();
+    return (
+        <Box style={{
+            maxWidth: 100,
+            maxHeight: 70,
+            position: 'relative'
+        }}
+         key={props.attach.id}>
+            <img style={{
+                maxWidth: 100,
+                maxHeight: 70,
+                borderRadius: 8,
+                userSelect: 'none'
+            }} src={props.attach.blob}>
+            </img>
+            {props.onRemove && 
+                <Box bg={colors.error} style={{
+                    position: 'absolute',
+                    top: -5,
+                    right: -5,
+                    borderRadius: '50%',
+                    cursor: 'pointer',
+                    height: 18,
+                    width: 18,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+                onClick={() => {
+                    props.onRemove && props.onRemove(props.attach);
+                }}>
+                    <IconX size={13} stroke={2} color="white"></IconX>
+                </Box>
+            }
+        </Box>        
+    );
+}

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>
+    )
+}

app/components/DialogAttachment/DialogAttachment.tsx

@@ -0,0 +1,29 @@
+import { Attachment, AttachmentType } from "@/app/providers/ProtocolProvider/protocol/packets/packet.message";
+import { AttachImage } from "./AttachImage";
+import { AttachMessages } from "./AttachMessages";
+import { AttachFile } from "./AttachFile";
+import { AttachAvatar } from "./AttachAvatar";
+
+export interface DialogAttachmentProps {
+    attach: Attachment;
+    onRemove?: (attach: Attachment) => void;
+}
+
+export function DialogAttachment(props : DialogAttachmentProps) {
+    return (
+        <>
+            {props.attach.type == AttachmentType.IMAGE && 
+                <AttachImage attach={props.attach} onRemove={props.onRemove}></AttachImage> 
+            }
+            {props.attach.type == AttachmentType.MESSAGES && 
+                <AttachMessages attach={props.attach} onRemove={props.onRemove}></AttachMessages>
+            }
+            {props.attach.type == AttachmentType.FILE && 
+                <AttachFile attach={props.attach} onRemove={props.onRemove}></AttachFile>
+            }
+            {props.attach.type == AttachmentType.AVATAR && 
+                <AttachAvatar attach={props.attach} onRemove={props.onRemove}></AttachAvatar>
+            }
+        </>
+    )
+}