Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3610 | Rev 3635 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3605 stevensc 1 
import React from 'react';
3634 stevensc 2 
import { Box, Avatar, Typography } from '@mui/material';
3 
import { Report } from '@mui/icons-material';
3599 stevensc 4 
 
3634 stevensc 5 
import { Menu } from '@shared/components';
6 
import colors from '@styles/config/colors';
7 
 
3610 stevensc 8 
export const MessageItem = ({ message, onReport }) => {
3599 stevensc 9 
  const renderMessageContent = () => {
10 
    switch (message.type) {
11 
      case 'text':
12 
        return (
13 
          <Typography variant='body2' sx={{ wordBreak: 'break-word' }}>
14 
            {message.message}
15 
          </Typography>
16 
        );
17 
      case 'image':
18 
        return (
19 
          <Box sx={{ maxWidth: '250px', maxHeight: '250px' }}>
20 
            <img
21 
              src={message.filename}
22 
              alt='Mensaje de imagen'
23 
              style={{
24 
                width: '100%',
25 
                height: 'auto',
26 
                borderRadius: '8px',
27 
                objectFit: 'cover'
28 
              }}
29 
            />
30 
          </Box>
31 
        );
32 
      case 'document':
33 
        return (
34 
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
35 
            <img
36 
              src='/images/extension/pdf.png'
37 
              alt='Documento'
38 
              style={{ width: '24px', height: '24px' }}
39 
            />
40 
            <Typography variant='body2' component='a' href={message.filename} download>
41 
              Descargar documento
42 
            </Typography>
43 
          </Box>
44 
        );
45 
      default:
46 
        return (
47 
          <Typography variant='body2' sx={{ wordBreak: 'break-word' }}>
48 
            {message.message || 'Contenido no disponible'}
49 
          </Typography>
50 
        );
51 
    }
52 
  };
53 
 
54 
  return (
55 
    <Box
56 
      sx={{
57 
        display: 'flex',
58 
        justifyContent: message.side === 'right' ? 'flex-end' : 'flex-start',
59 
        mb: 1,
60 
        px: 1
61 
      }}
62 
    >
63 
      <Box
64 
        sx={{
65 
          display: 'flex',
66 
          flexDirection: 'column',
67 
          maxWidth: '70%',
68 
          position: 'relative'
69 
        }}
70 
      >
71 
        {message.side === 'left' && (
72 
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
73 
            <Avatar
74 
              src={message.sender_image}
75 
              alt={message.sender_name}
76 
              sx={{ width: 24, height: 24 }}
77 
            />
78 
            <Typography variant='caption' color='text.secondary'>
79 
              {message.sender_name}
80 
            </Typography>
81 
          </Box>
82 
        )}
83 
 
84 
        <Box
85 
          sx={{
3634 stevensc 86 
            backgroundColor:
87 
              message.side === 'right'
88 
                ? colors.button.background.primary
89 
                : colors.button.background.secondary,
90 
            color:
91 
              message.side === 'right' ? colors.button.text.primary : colors.button.text.secondary,
3599 stevensc 92 
            borderRadius: message.side === 'right' ? '12px 12px 4px 12px' : '12px 12px 12px 4px',
3634 stevensc 93 
            padding: 0.625,
3599 stevensc 94 
            position: 'relative',
95 
            '&:hover .message-actions': {
96 
              opacity: 1
97 
            }
98 
          }}
99 
        >
100 
          {renderMessageContent()}
101 
 
3634 stevensc 102 
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, marginTop: 1 }}>
103 
            <Typography variant='caption'>{message.date}</Typography>
3599 stevensc 104 
 
3634 stevensc 105 
            {message.abuse_report_url && (
106 
              <Menu className='message-actions'>
107 
                <Menu.Item onClick={() => onReport(message.abuse_report_url)}>
108 
                  <Report sx={{ mr: 1 }} />
109 
                  Reportar mensaje
110 
                </Menu.Item>
111 
              </Menu>
3599 stevensc 112 
            )}
113 
          </Box>
114 
        </Box>
115 
      </Box>
116 
    </Box>
117 
  );
118 
};