Новый тип вложений - Attachment.CALL с активными звонками

app/components/MessageAttachments/MessageAttachments.tsx

@@ -8,6 +8,7 @@ import { ErrorBoundaryProvider } from "@/app/providers/ErrorBoundaryProvider/Err
 import { AttachmentError } from "../AttachmentError/AttachmentError";
 import { MessageAvatar } from "./MessageAvatar";
 import { MessageProps } from "../Messages/Message";
+import { MessageCall } from "./MessageCall";
 
 export interface MessageAttachmentsProps {
     attachments: Attachment[];
@@ -51,6 +52,8 @@ export function MessageAttachments(props: MessageAttachmentsProps) {
                             return <MessageFile {...attachProps} key={index}></MessageFile>
                         case AttachmentType.AVATAR:
                             return <MessageAvatar {...attachProps} key={index}></MessageAvatar>
+                        case AttachmentType.CALL:
+                            return <MessageCall {...attachProps} key={index}></MessageCall>
                         default:
                             return <AttachmentError key={index}></AttachmentError>;
                     }

app/components/MessageAttachments/MessageCall.tsx

@@ -0,0 +1,62 @@
+import { useAttachment } from "@/app/providers/AttachmentProvider/useAttachment";
+import { AttachmentProps } from "./MessageAttachments";
+import { Avatar, Box, Flex, Text } from "@mantine/core";
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { IconPhoneOutgoing, IconX } from "@tabler/icons-react";
+import { translateDurationToTime } from "@/app/providers/CallProvider/translateDurationTime";
+
+export function MessageCall(props: AttachmentProps) {
+    const {
+        getPreview,
+        } = 
+        useAttachment(
+            props.attachment, 
+            props.parent, 
+        );
+    const preview = getPreview();
+    const callerRole = preview.split("::")[0];
+    const duration = parseInt(preview.split("::")[1]);
+    const colors = useRosettaColors();
+    const error = duration == 0;
+    
+    return (
+        <Box p={'sm'} style={{
+            background: colors.mainColor,
+            border: '1px solid ' + colors.borderColor,
+            borderRadius: 8,
+            minWidth: 200,
+            minHeight: 60
+        }}>
+            <Flex gap={'sm'} direction={'row'}>
+                <Avatar bg={error ? colors.error : colors.brandColor} size={40}>
+                    {!error && <>
+                        {callerRole == "0" && (
+                            <IconPhoneOutgoing color={'white'} size={22}></IconPhoneOutgoing>
+                        )}
+                        {callerRole == "1" && (
+                            <IconPhoneOutgoing color={'white'} size={22} style={{
+                                transform: 'rotate(180deg)'
+                            }}></IconPhoneOutgoing>
+                        )}
+                    </>}
+                    {error && <>
+                       <IconX color={'white'} size={22}></IconX> 
+                    </>}
+                </Avatar>
+                <Flex direction={'column'} gap={5}>
+                    <Text size={'sm'}>{
+                        error ? (callerRole == "0" ? "Missed call" : "Rejected call") : (callerRole == "0" ? "Incoming call" : "Outgoing call")
+                    }</Text>
+                    {!error && 
+                        <Text size={'xs'} c={colors.chevrons.active}>
+                            {translateDurationToTime(duration)}
+                        </Text>
+                    }
+                    {error && <Text size={'xs'} c={colors.error}>
+                        Call was not answered or was rejected
+                    </Text>}
+                </Flex>
+            </Flex>
+        </Box>        
+    );
+}