feat: Delete/File upload modal is now improved and Reaction emoji is added in message toolbar .

packages/react/src/views/AttachmentPreview/AttachmentPreview.js

@@ -1,6 +1,13 @@
 import React, { useContext, useState, useRef, useEffect } from 'react';
 import { css } from '@emotion/react';
-import { Box, Icon, Button, Input, Modal } from '@embeddedchat/ui-elements';
+import {
+  Box,
+  Icon,
+  Button,
+  Input,
+  Modal,
+  useTheme,
+} from '@embeddedchat/ui-elements';
 import useAttachmentWindowStore from '../../store/attachmentwindow';
 import CheckPreviewType from './CheckPreviewType';
 import RCContext from '../../context/RCInstance';
@@ -14,6 +21,7 @@ import useSearchMentionUser from '../../hooks/useSearchMentionUser';
 const AttachmentPreview = () => {
   const { RCInstance, ECOptions } = useContext(RCContext);
   const styles = getAttachmentPreviewStyles();
+  const { theme } = useTheme();
 
   const toggle = useAttachmentWindowStore((state) => state.toggle);
   const data = useAttachmentWindowStore((state) => state.data);
@@ -109,47 +117,74 @@ const AttachmentPreview = () => {
             css={css`
               text-align: center;
               margin-top: 1rem;
+              display: flex;
+              justify-content: center;
+              padding: 0 50px 0 50px;
             `}
           >
             <CheckPreviewType data={data} />
           </Box>
           <Box
             css={css`
-              margin: 30px;
+              margin: 10px;
             `}
           >
             <Box css={styles.inputContainer}>
-              <Box
-                is="span"
+              {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+              <label
+                htmlFor="file-name"
                 css={css`
                   font-weight: 550;
                   margin-bottom: 0.5rem;
+                  font-size: 0.8rem;
                 `}
               >
                 File name
-              </Box> 
+              </label>
               <Input
                 onChange={(e) => {
                   handleFileName(e);
                 }}
                 value={fileName}
+                id="file-name"
                 type="text"
-                css={styles.input}
                 placeholder="name"
+                css={css`
+                  ${styles.input}
+                  &:focus {
+                    border-color: ${fileName === ''
+                      ? theme.colors.destructive
+                      : theme.colors.ring};
+                    transition: border 0.1s ease-in;
+                  }
+                `}
               />
+              {fileName === '' && (
+                <Box
+                  css={css`
+                    color: red;
+                    margin-top: 0.5rem;
+                    font-size: 0.65rem;
+                  `}
+                >
+                  The field File name is required.
+                </Box>
+              )}
               <TypingUsers />
             </Box>
 
             <Box css={styles.inputContainer}>
-              <Box
-                is="span"
+              {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+              <label
+                htmlFor="file-description"
                 css={css`
                   font-weight: 550;
                   margin-bottom: 0.5rem;
+                  font-size: 0.8rem;
                 `}
               >
                 File description
-              </Box>
+              </label>
               <Box css={styles.fileDescription}>
                 <Box css={styles.mentionListContainer}>
                   {showMembersList && (
@@ -171,10 +206,17 @@ const AttachmentPreview = () => {
                   onChange={(e) => {
                     handleFileDescription(e);
                   }}
+                  id="file-description"
                   type="text"
-                  css={styles.input}
-                  placeholder="Description"
                   value={description}
+                  placeholder="Description"
+                  css={css`
+                    ${styles.input}
+                    &:focus {
+                      border: ${theme.colors.ring};
+                      transition: border 0.9s ease-in, border 0.9s ease-out;
+                    }
+                  `}
                   ref={messageRef}
                 />
               </Box>
@@ -185,16 +227,19 @@ const AttachmentPreview = () => {
 
       <Modal.Footer
         css={css`
-          margin-top: 1.5rem;
+          margin-bottom: 1rem;
+          padding-right: 1rem;
         `}
       >
         <Button type="secondary" onClick={toggle}>
           Cancel
         </Button>
         <Button
-          disabled={isPending}
+          disabled={isPending || fileName === ''}
           onClick={() => {
-            submit();
+            if (fileName !== '') {
+              submit();
+            }
           }}
         >
           {isPending ? 'Sending...' : 'Send'}

packages/react/src/views/Message/MessageHeader.js

@@ -13,6 +13,7 @@ import { useMemberStore, useUserStore } from '../../store';
 import { getMessageHeaderStyles } from './Message.styles';
 import useDisplayNameColor from '../../hooks/useDisplayNameColor';
 import { useRCContext } from '../../context/RCInstance';
+import useSetExclusiveState from '../../hooks/useSetExclusiveState';
 
 const MessageHeader = ({
   message,
@@ -99,6 +100,17 @@ const MessageHeader = ({
     }
   };
 
+  const setExclusiveState = useSetExclusiveState();
+  const { setShowCurrentUserInfo, setCurrentUser } = useUserStore((state) => ({
+    setShowCurrentUserInfo: state.setShowCurrentUserInfo,
+    setCurrentUser: state.setCurrentUser,
+  }));
+
+  const handleUsernameClick = () => {
+    setExclusiveState(setShowCurrentUserInfo);
+    setCurrentUser(message?.u);
+  };
+
   return (
     <Box
       css={styles.header}
@@ -108,13 +120,14 @@ const MessageHeader = ({
       {showDisplayName && showName && (
         <Box
           is="span"
-          css={styles.name}
+          css={[styles.name, { cursor: 'pointer' }]}
           className={appendClassNames('ec-message-header-name')}
           style={
             displayNameVariant === 'colorize'
               ? { color: getDisplayNameColor(message.u.username) }
               : null
           }
+          onClick={handleUsernameClick}
         >
           {message.u?._id === 'rocket.cat'
             ? message.u.username
@@ -124,13 +137,14 @@ const MessageHeader = ({
       {showDisplayName && showUsername && (
         <Box
           is="span"
-          css={styles.userName}
+          css={[styles.userName, { cursor: 'pointer' }]}
           className={appendClassNames('ec-message-header-username')}
           style={
             displayNameVariant === 'colorize'
               ? { color: getDisplayNameColor(message.u.username) }
               : null
           }
+          onClick={handleUsernameClick}
         >
           @{message.u.username}
         </Box>

packages/react/src/views/Message/MessageToolbox.js

@@ -9,6 +9,7 @@ import {
   appendClassNames,
   useTheme,
 } from '@embeddedchat/ui-elements';
+import { css } from '@emotion/react';
 import RCContext from '../../context/RCInstance';
 import { EmojiPicker } from '../EmojiPicker';
 import { getMessageToolboxStyles } from './Message.styles';
@@ -121,7 +122,7 @@ export const MessageToolbox = ({
         label: 'Add reaction',
         id: 'reaction',
         onClick: () => setEmojiOpen(true),
-        iconName: 'emoji',
+        iconName: 'reaction',
         visible: true,
       },
       pin: {
@@ -257,75 +258,46 @@ export const MessageToolbox = ({
       {showDeleteModal && (
         <Modal onClose={handleOnClose}>
           <Modal.Header>
-            <Modal.Title>
-              <Icon
-                name="trash"
-                size="1.25rem"
-                style={{ marginRight: '0.5rem' }}
-              />{' '}
-              Delete this message?
-            </Modal.Title>
+            <Box
+              css={css`
+                margin: 0.6rem 0px 0rem 0.45rem;
+              `}
+            >
+              <Modal.Title>
+                <Icon
+                  name="trash"
+                  size="1.35rem"
+                  style={{ marginRight: '0.2rem', color: 'red' }}
+                />
+                Are you sure?
+              </Modal.Title>
+            </Box>
             <Modal.Close onClick={handleOnClose} />
           </Modal.Header>
           <Modal.Content
             style={{
-              overflow: 'scroll',
               whiteSpace: 'wrap',
-              padding: '1rem',
               maxHeight: '50vh',
+              overflow: 'hidden',
             }}
           >
-            {message.file ? (
-              message.file.type.startsWith('image/') ? (
-                <div>
-                  <img
-                    src={`${instanceHost}/file-upload/${message.file._id}/${message.file.name}`}
-                    alt={message.file.name}
-                    style={{ maxWidth: '100px', maxHeight: '100px' }}
-                  />
-                  <div>{`${message.file.name} (${(
-                    message.file.size / 1024
-                  ).toFixed(2)} kB)`}</div>
-                </div>
-              ) : message.file.type.startsWith('video/') ? (
-                <video
-                  controls
-                  style={{ maxWidth: '100%', maxHeight: '200px' }}
-                >
-                  <source
-                    src={`${instanceHost}/file-upload/${message.file._id}/${message.file.name}`}
-                    type={message.file.type}
-                  />
-                  Your browser does not support the video tag.
-                </video>
-              ) : message.file.type.startsWith('audio/') ? (
-                <audio controls style={{ maxWidth: '100%' }}>
-                  <source
-                    src={`${instanceHost}/file-upload/${message.file._id}/${message.file.name}`}
-                    type={message.file.type}
-                  />
-                  Your browser does not support the audio element.
-                </audio>
-              ) : (
-                <Markdown body={message} md={message.md} isReaction={false} />
-              )
-            ) : (
-              <Markdown body={message} md={message.md} isReaction={false} />
-            )}
-            {message.attachments &&
-              message.attachments.length > 0 &&
-              message.msg &&
-              message.msg[0] === '[' &&
-              message.attachments.map((attachment, index) => (
-                <Attachment
-                  key={index}
-                  attachment={attachment}
-                  type={attachment.type}
-                  host={instanceHost}
-                />
-              ))}
+            <Box
+              css={css`
+                margin-top: 1.5rem;
+                font-size: 0.9rem;
+                margin-left: 1rem;
+                margin-down: 1rem;
+              `}
+            >
+              You will not be able to recover this message!
+            </Box>
           </Modal.Content>
-          <Modal.Footer>
+          <Modal.Footer
+            style={{
+              marginTop: '1rem',
+              padding: '0.5rem 1rem',
+            }}
+          >
             <Button type="secondary" onClick={handleOnClose}>
               Cancel
             </Button>
@@ -336,7 +308,7 @@ export const MessageToolbox = ({
                 handleOnClose();
               }}
             >
-              Delete message
+              Yes, delete
             </Button>
           </Modal.Footer>
         </Modal>