From f57a9292a247e5339d0573eab8224ef85dbd4b06 Mon Sep 17 00:00:00 2001 From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in> Date: Thu, 16 Jan 2025 01:36:38 +0530 Subject: [PATCH 1/8] initial commit --- packages/react/src/views/Message/MessageToolbox.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/react/src/views/Message/MessageToolbox.js b/packages/react/src/views/Message/MessageToolbox.js index 34752872eb..cdf8f2f145 100644 --- a/packages/react/src/views/Message/MessageToolbox.js +++ b/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'; @@ -261,14 +262,22 @@ export const MessageToolbox = ({ {showDeleteModal && ( + {' '} - Delete this message? + Are you sure? + Date: Thu, 16 Jan 2025 17:03:20 +0530 Subject: [PATCH 2/8] add Reaction Emoji --- .../react/src/views/Message/MessageToolbox.js | 102 ++++++------------ .../src/components/Icon/icons/Reaction.js | 15 +++ .../src/components/Icon/icons/index.js | 2 + packages/ui-elements/tools/icons-generator.js | 1 + 4 files changed, 51 insertions(+), 69 deletions(-) create mode 100644 packages/ui-elements/src/components/Icon/icons/Reaction.js diff --git a/packages/react/src/views/Message/MessageToolbox.js b/packages/react/src/views/Message/MessageToolbox.js index cdf8f2f145..c41009890d 100644 --- a/packages/react/src/views/Message/MessageToolbox.js +++ b/packages/react/src/views/Message/MessageToolbox.js @@ -126,7 +126,7 @@ export const MessageToolbox = ({ label: 'Add reaction', id: 'reaction', onClick: () => setEmojiOpen(true), - iconName: 'emoji', + iconName: 'reaction', visible: true, }, pin: { @@ -262,83 +262,47 @@ export const MessageToolbox = ({ {showDeleteModal && ( - - - {' '} - Are you sure? - + + + + Are you sure? + - {message.file ? ( - message.file.type.startsWith('image/') ? ( -
- {message.file.name} -
{`${message.file.name} (${( - message.file.size / 1024 - ).toFixed(2)} kB)`}
-
- ) : message.file.type.startsWith('video/') ? ( - - ) : message.file.type.startsWith('audio/') ? ( - - ) : ( - - ) - ) : ( - - )} - {message.attachments && - message.attachments.length > 0 && - message.msg && - message.msg[0] === '[' && - message.attachments.map((attachment, index) => ( - - ))} + + + You will not be able to recover this message! +
- + @@ -349,7 +313,7 @@ export const MessageToolbox = ({ handleOnClose(); }} > - Delete message + Yes, delete
diff --git a/packages/ui-elements/src/components/Icon/icons/Reaction.js b/packages/ui-elements/src/components/Icon/icons/Reaction.js new file mode 100644 index 0000000000..d327ea48ca --- /dev/null +++ b/packages/ui-elements/src/components/Icon/icons/Reaction.js @@ -0,0 +1,15 @@ +import React from 'react'; + +const Pin = (props) => ( + + + +); + +export default Pin; diff --git a/packages/ui-elements/src/components/Icon/icons/index.js b/packages/ui-elements/src/components/Icon/icons/index.js index 3e23f0667d..7f2aae6ced 100644 --- a/packages/ui-elements/src/components/Icon/icons/index.js +++ b/packages/ui-elements/src/components/Icon/icons/index.js @@ -2,6 +2,7 @@ import File from './File'; import Mobile from './Mobile'; import Star from './Star'; import Pin from './Pin'; +import Reaction from './Reaction'; import ReplyDirectly from './ReplyDirectly'; import Hash from './Hash'; import HashLock from './HashLock'; @@ -69,6 +70,7 @@ const icons = { mobile: Mobile, star: Star, pin: Pin, + reaction: Reaction, 'reply-directly': ReplyDirectly, hash: Hash, hash_lock: HashLock, diff --git a/packages/ui-elements/tools/icons-generator.js b/packages/ui-elements/tools/icons-generator.js index 4b2b2e6ca1..edf31eb2b4 100644 --- a/packages/ui-elements/tools/icons-generator.js +++ b/packages/ui-elements/tools/icons-generator.js @@ -17,6 +17,7 @@ const iconsList = [ 'circle-check', 'send', 'emoji', + 'reaction', 'plus', 'thread', 'user', From e94ccb2098bd77ca62cfe24e01d7169f78040a50 Mon Sep 17 00:00:00 2001 From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in> Date: Thu, 16 Jan 2025 17:18:45 +0530 Subject: [PATCH 3/8] format --- packages/react/src/views/Message/MessageToolbox.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/views/Message/MessageToolbox.js b/packages/react/src/views/Message/MessageToolbox.js index c41009890d..581708e50c 100644 --- a/packages/react/src/views/Message/MessageToolbox.js +++ b/packages/react/src/views/Message/MessageToolbox.js @@ -285,7 +285,6 @@ export const MessageToolbox = ({ overflow: 'hidden', }} > - Date: Sat, 8 Feb 2025 11:29:19 +0530 Subject: [PATCH 4/8] enhance file uploadModal --- .../AttachmentPreview/AttachmentPreview.js | 73 +++++++++++++++---- 1 file changed, 58 insertions(+), 15 deletions(-) diff --git a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js index 2c007f1a71..cc161e66a0 100644 --- a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js +++ b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js @@ -1,6 +1,13 @@ import React, { useContext, useState, useRef } 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); @@ -86,46 +94,72 @@ const AttachmentPreview = () => { css={css` text-align: center; margin-top: 1rem; + display: flex; + justify-content: center; + padding: 0 50px 0 50px; `} > - File name - + { handleFileName(e); }} value={fileName} - css={styles.input} - placeholder="name" + id="file-name" + css={css` + ${styles.input} + &:focus { + border-color: ${fileName === '' + ? theme.colors.destructive + : theme.colors.ring}; + transition: border 0.1s ease-in; + } + `} /> + {fileName === '' && ( + + The field File name is required. + + )} - File description - + {showMembersList && ( @@ -147,8 +181,14 @@ const AttachmentPreview = () => { onChange={(e) => { handleFileDescription(e); }} - css={styles.input} - placeholder="Description" + id="file-description" + css={css` + ${styles.input} + &:focus { + border: ${theme.colors.ring}; + transition: border 0.9s ease-in, border 0.9s ease-out; + } + `} ref={messageRef} /> @@ -159,16 +199,19 @@ const AttachmentPreview = () => {