From 65578af828825af26acb4de338ddaa10dea9663e Mon Sep 17 00:00:00 2001 From: Devansh Date: Mon, 2 Dec 2024 00:21:32 +0530 Subject: [PATCH 1/7] Fix the issue of mentioning the user in the file description --- .../src/views/AttachmentHandler/Attachment.js | 5 +- .../AttachmentHandler/AttachmentMetadata.js | 7 +-- .../views/AttachmentHandler/Attachments.js | 3 +- .../AttachmentHandler/AudioAttachment.js | 5 +- .../AttachmentHandler/ImageAttachment.js | 2 + .../AttachmentHandler/VideoAttachment.js | 2 + .../AttachmentPreview/AttachmentPreview.js | 46 ++++++++++++++++--- packages/react/src/views/Markdown/Markdown.js | 6 +-- packages/react/src/views/Message/Message.js | 4 +- 9 files changed, 62 insertions(+), 18 deletions(-) diff --git a/packages/react/src/views/AttachmentHandler/Attachment.js b/packages/react/src/views/AttachmentHandler/Attachment.js index 594bfa7d7..ec752e9bc 100644 --- a/packages/react/src/views/AttachmentHandler/Attachment.js +++ b/packages/react/src/views/AttachmentHandler/Attachment.js @@ -7,7 +7,7 @@ import AudioAttachment from './AudioAttachment'; import VideoAttachment from './VideoAttachment'; import TextAttachment from './TextAttachment'; -const Attachment = ({ attachment, host, type, variantStyles = {} }) => { +const Attachment = ({ attachment, host, type, variantStyles = {}, msg }) => { const author = { authorIcon: attachment?.author_icon, authorName: attachment?.author_name, @@ -19,6 +19,7 @@ const Attachment = ({ attachment, host, type, variantStyles = {} }) => { host={host} author={author} variantStyles={variantStyles} + msg={msg} /> ); } @@ -29,6 +30,7 @@ const Attachment = ({ attachment, host, type, variantStyles = {} }) => { host={host} author={author} variantStyles={variantStyles} + msg={msg} /> ); } @@ -39,6 +41,7 @@ const Attachment = ({ attachment, host, type, variantStyles = {} }) => { host={host} author={author} variantStyles={variantStyles} + msg={msg} /> ); } diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js index 428342ba1..3a3b901d2 100644 --- a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js +++ b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js @@ -1,8 +1,9 @@ import React from 'react'; import { css } from '@emotion/react'; import { ActionButton, Box } from '@embeddedchat/ui-elements'; +import { Markdown } from '../Markdown'; -const AttachmentMetadata = ({ attachment, url, variantStyles = {} }) => { +const AttachmentMetadata = ({ attachment, url, variantStyles = {}, msg }) => { const handleDownload = async () => { try { const response = await fetch(url); @@ -35,11 +36,11 @@ const AttachmentMetadata = ({ attachment, url, variantStyles = {} }) => {

- {attachment.description} +

{ +const Attachments = ({ attachments, type, variantStyles = {}, msg }) => { const { RCInstance } = useContext(RCContext); let host = RCInstance.getHost(); host = host.replace(/\/$/, ''); @@ -15,6 +15,7 @@ const Attachments = ({ attachments, type, variantStyles = {} }) => { host={host} variantStyles={variantStyles} type={type} + msg={msg} /> )); }; diff --git a/packages/react/src/views/AttachmentHandler/AudioAttachment.js b/packages/react/src/views/AttachmentHandler/AudioAttachment.js index 0f5824aa0..43cd5a1a1 100644 --- a/packages/react/src/views/AttachmentHandler/AudioAttachment.js +++ b/packages/react/src/views/AttachmentHandler/AudioAttachment.js @@ -5,7 +5,7 @@ import { Box, Avatar, useTheme } from '@embeddedchat/ui-elements'; import AttachmentMetadata from './AttachmentMetadata'; import RCContext from '../../context/RCInstance'; -const AudioAttachment = ({ attachment, host, type, author, variantStyles }) => { +const AudioAttachment = ({ attachment, host, type, author, variantStyles, msg }) => { const { RCInstance } = useContext(RCContext); const { theme } = useTheme(); const getUserAvatarUrl = (icon) => { @@ -58,8 +58,9 @@ const AudioAttachment = ({ attachment, host, type, author, variantStyles }) => { attachment={attachment} url={host + (attachment.title_url || attachment.audio_url)} variantStyles={variantStyles} + msg={msg} /> - @@ -101,13 +124,24 @@ const AttachmentPreview = () => { > File description + {showMembersList && ( + + )} { handleFileDescription(e); }} - value={fileDescription} css={styles.input} placeholder="Description" + ref={messageRef} /> diff --git a/packages/react/src/views/Markdown/Markdown.js b/packages/react/src/views/Markdown/Markdown.js index d9ee6b2ad..4e85a2c82 100644 --- a/packages/react/src/views/Markdown/Markdown.js +++ b/packages/react/src/views/Markdown/Markdown.js @@ -6,7 +6,7 @@ import { Markup, MarkupInteractionContext } from '@embeddedchat/markups'; import EmojiReaction from '../EmojiReaction/EmojiReaction'; import { useMemberStore, useUserStore } from '../../store'; -const Markdown = ({ body, isReaction = false }) => { +const Markdown = ({ body, md, isReaction = false }) => { const members = useMemberStore((state) => state.members); const username = useUserStore((state) => state.username); const value = useMemo(() => ({ members, username }), [members, username]); @@ -23,12 +23,12 @@ const Markdown = ({ body, isReaction = false }) => { ); } - if (!body || !body.md) return <>; + if (!body || !md) return <>; return ( - + ); diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js index e460adad0..b5de6baed 100644 --- a/packages/react/src/views/Message/Message.js +++ b/packages/react/src/views/Message/Message.js @@ -184,14 +184,14 @@ const Message = ({ > {message.attachments && message.attachments.length > 0 ? ( <> - ) : ( - + )} {message.blocks && ( From fa238acc3a302f93471ecb16f34c3289a9311ffc Mon Sep 17 00:00:00 2001 From: Devansh Date: Fri, 6 Dec 2024 22:22:22 +0530 Subject: [PATCH 2/7] Removed all unwanted warnings --- .../react/src/views/AttachmentHandler/AttachmentMetadata.js | 4 ++-- .../react/src/views/AttachmentPreview/AttachmentPreview.js | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js index 3a3b901d2..6475571b8 100644 --- a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js +++ b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js @@ -33,7 +33,7 @@ const AttachmentMetadata = ({ attachment, url, variantStyles = {}, msg }) => { variantStyles.attachmentMetaContainer, ]} > -

{ ]} > -

+ { ); toggle(); setData(null); - setIsPending(false); + if(isPending) { + setIsPending(false); + } }; return ( From 7c9023262624c5fa71b436e605052521b1020657 Mon Sep 17 00:00:00 2001 From: Devansh Date: Fri, 6 Dec 2024 22:26:27 +0530 Subject: [PATCH 3/7] Formatted with prettier --- packages/react/src/views/AttachmentPreview/AttachmentPreview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js index 9ae2fb5d3..93fb05f86 100644 --- a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js +++ b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js @@ -61,7 +61,7 @@ const AttachmentPreview = () => { ); toggle(); setData(null); - if(isPending) { + if (isPending) { setIsPending(false); } }; From 90df9f3ef668c4d4480c0b45a9315356b30a6a00 Mon Sep 17 00:00:00 2001 From: Devansh Date: Mon, 16 Dec 2024 13:05:16 +0530 Subject: [PATCH 4/7] Adjusted the width of the mentions preview in the file description --- .../AttachmentHandler/AudioAttachment.js | 11 ++++- .../AttachmentHandler/ImageAttachment.js | 2 +- .../AttachmentHandler/VideoAttachment.js | 2 +- .../AttachmentPreview/AttachmentPreview.js | 41 +++++++++++-------- .../AttachmentPreview.styles.js | 6 ++- .../react/src/views/ChatInput/ChatInput.js | 29 +++++++------ .../src/views/Mentions/MembersList.styles.js | 2 +- 7 files changed, 57 insertions(+), 36 deletions(-) diff --git a/packages/react/src/views/AttachmentHandler/AudioAttachment.js b/packages/react/src/views/AttachmentHandler/AudioAttachment.js index 43cd5a1a1..b88d0a41d 100644 --- a/packages/react/src/views/AttachmentHandler/AudioAttachment.js +++ b/packages/react/src/views/AttachmentHandler/AudioAttachment.js @@ -5,7 +5,14 @@ import { Box, Avatar, useTheme } from '@embeddedchat/ui-elements'; import AttachmentMetadata from './AttachmentMetadata'; import RCContext from '../../context/RCInstance'; -const AudioAttachment = ({ attachment, host, type, author, variantStyles, msg }) => { +const AudioAttachment = ({ + attachment, + host, + type, + author, + variantStyles, + msg, +}) => { const { RCInstance } = useContext(RCContext); const { theme } = useTheme(); const getUserAvatarUrl = (icon) => { @@ -60,7 +67,7 @@ const AudioAttachment = ({ attachment, host, type, author, variantStyles, msg }) variantStyles={variantStyles} msg={msg} /> - - {showMembersList && ( - + {showMembersList && ( + + )} + { + handleFileDescription(e); + }} + css={styles.input} + placeholder="Description" + ref={messageRef} /> - )} - { - handleFileDescription(e); - }} - css={styles.input} - placeholder="Description" - ref={messageRef} - /> + diff --git a/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js b/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js index 44729be84..1c498bc0d 100644 --- a/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js +++ b/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js @@ -11,7 +11,7 @@ const getAttachmentPreviewStyles = () => { `, input: css` - width: 95.5%; + width: 100%; `, modalContent: css` @@ -19,6 +19,10 @@ const getAttachmentPreviewStyles = () => { overflow-x: hidden; max-height: 350px; `, + + fileDescription: css` + width: 100%; + `, }; return styles; diff --git a/packages/react/src/views/ChatInput/ChatInput.js b/packages/react/src/views/ChatInput/ChatInput.js index 581cbf0d2..5cfcd657d 100644 --- a/packages/react/src/views/ChatInput/ChatInput.js +++ b/packages/react/src/views/ChatInput/ChatInput.js @@ -468,18 +468,23 @@ const ChatInput = ({ scrollToBottom }) => { } /> ) : null} - - {showMembersList && ( - - )} + + {showMembersList && ( + + )} + {showCommandList && ( { const styles = { main: css` - margin: 0.2rem 2rem; + margin: 0.2rem 0rem; display: block; overflow: auto; max-height: 10rem; From 186b0cfc7ae86c352ae693986c593c4627ed8042 Mon Sep 17 00:00:00 2001 From: Devansh Date: Mon, 16 Dec 2024 13:54:14 +0530 Subject: [PATCH 5/7] fixed the position of mentions preview such that it does not affect the height of file upload modal --- .../AttachmentPreview/AttachmentPreview.js | 30 ++++++++++--------- .../AttachmentPreview.styles.js | 12 ++++++++ 2 files changed, 28 insertions(+), 14 deletions(-) diff --git a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js index 80c51f9e0..2c007f1a7 100644 --- a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js +++ b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js @@ -127,20 +127,22 @@ const AttachmentPreview = () => { File description - {showMembersList && ( - - )} + + {showMembersList && ( + + )} + { handleFileDescription(e); diff --git a/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js b/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js index 1c498bc0d..45f8cf455 100644 --- a/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js +++ b/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js @@ -22,6 +22,18 @@ const getAttachmentPreviewStyles = () => { fileDescription: css` width: 100%; + position: relative; + z-index: 1300; + `, + + mentionListContainer: css` + position: absolute; + top: -100px; + width: 100%; + max-height: 100px; + overflow-y: auto; + background: white; + z-index: 1400; `, }; From fbe9c7b32dba2fe7617f6b74bc23f91655066402 Mon Sep 17 00:00:00 2001 From: Devansh Date: Mon, 16 Dec 2024 20:01:49 +0530 Subject: [PATCH 6/7] Fixed all the inconsistencies --- .../AttachmentHandler/AttachmentMetadata.js | 22 ++++++++++++++----- packages/react/src/views/Message/Message.js | 5 +++++ 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js index 6475571b8..9a9ddd1be 100644 --- a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js +++ b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js @@ -34,13 +34,23 @@ const AttachmentMetadata = ({ attachment, url, variantStyles = {}, msg }) => { ]} >
- + {msg ? ( + + ) : ( + attachment.description + )}
{message.attachments && message.attachments.length > 0 ? ( <> + Date: Tue, 24 Dec 2024 00:17:50 +0530 Subject: [PATCH 7/7] Fixed minor design inconsistency --- .../AttachmentHandler/AttachmentMetadata.js | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js index 9a9ddd1be..5bd249ce5 100644 --- a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js +++ b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js @@ -60,11 +60,21 @@ const AttachmentMetadata = ({ attachment, url, variantStyles = {}, msg }) => { `} >

{attachment.title}