From 00baef5682d7dac465eb580a6cce6a69ac0df9ce Mon Sep 17 00:00:00 2001 From: abirc8010 Date: Wed, 18 Dec 2024 02:10:48 +0530 Subject: [PATCH 01/13] Fix chatFormatter Toolbar UI --- .../src/views/ChatInput/ChatInput.styles.js | 20 +- .../ChatInput/ChatInputFormattingToolbar.js | 180 +++++++++++++----- 2 files changed, 148 insertions(+), 52 deletions(-) diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js index 9123a4722b..84ff9cacbc 100644 --- a/packages/react/src/views/ChatInput/ChatInput.styles.js +++ b/packages/react/src/views/ChatInput/ChatInput.styles.js @@ -22,9 +22,6 @@ export const getChatInputStyles = (theme) => { justify-content: center; flex-direction: row; padding: 0.5rem; - @media (max-width: 383px) { - min-height: 100px; - } `, iconCursor: css` @@ -32,6 +29,7 @@ export const getChatInputStyles = (theme) => { `, textInput: css` + min-width: 0; flex: 1; word-wrap: break-word; white-space: pre-wrap; @@ -54,7 +52,7 @@ export const getChatInputStyles = (theme) => { &::placeholder { padding-left: 5px; } - @media (max-width: 383px) { + @media (min-width: 383px) { font-size: 18px; } `, @@ -80,10 +78,16 @@ export const getChatInputFormattingToolbarStyles = ({ theme, mode }) => { position: relative; gap: 0.1rem; border-radius: 0 0 ${theme.radius} ${theme.radius}; - @media (max-width: 383px) { - display: grid; - grid-template-columns: repeat(5, 0.2fr); - } + `, + popOverStyles: css` + position: absolute; + bottom: 4rem; + left: 0; + border: 1px solid ${theme.colors.border}; + z-index: 1000; + background-color: ${theme.colors.background}; + border-radius: 4px; + padding: 1rem; `, }; return styles; diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js index fd96f50363..aecd888bf3 100644 --- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js +++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useRef, useEffect } from 'react'; import { css } from '@emotion/react'; import { Box, @@ -40,6 +40,20 @@ const ChatInputFormattingToolbar = ({ ); const [isEmojiOpen, setEmojiOpen] = useState(false); + const [isPopoverOpen, setPopoverOpen] = useState(false); + const popoverRef = useRef(null); + useEffect(() => { + const handleClickOutside = (event) => { + if (popoverRef.current && !popoverRef.current.contains(event.target)) { + setPopoverOpen(false); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); const handleClickToOpenFiles = () => { inputRef.current.click(); @@ -54,72 +68,150 @@ const ChatInputFormattingToolbar = ({ triggerButton?.(null, message); }; + const handleFormatterClick = (item) => { + formatSelection(messageRef, item.pattern); + setPopoverOpen(false); + }; + const chatToolMap = { - emoji: ( - - { - setEmojiOpen(true); - }} - > - - - - ), audio: ( ), video: ( - + {}} + > - + ), file: ( - + + + + ), + }; + + return ( + + { + setEmojiOpen(true); + }} > - + - ), - formatter: formatters - .map((name) => formatter.find((item) => item.name === name)) - .map((item) => ( - + + + {formatters + .map((name) => formatter.find((item) => item.name === name)) + .map((item) => ( + + { + formatSelection(messageRef, item.pattern); + }} + > + + + + ))} + + {['audio', 'file', 'video'].map((key) => chatToolMap[key])} + + + + { - formatSelection(messageRef, item.pattern); - }} + disabled={isRecordingMessage} + onClick={() => setPopoverOpen(true)} > - + - )), - }; + - return ( - - {surfaceItems.map((key) => chatToolMap[key])} + {isPopoverOpen && ( + + {formatters + .map((name) => formatter.find((item) => item.name === name)) + .map((item) => ( + handleFormatterClick(item)} + css={css` + padding: 8px; + cursor: pointer; + `} + > + + + ))} + {['video', 'file'].map((key) => ( + + {chatToolMap[key]} + + ))} + + )} + + {surfaceItems.includes('audio') && chatToolMap.audio} {isEmojiOpen && ( )} From 1e07b9b48cb8a5a6b47305960723217e8f1bbab9 Mon Sep 17 00:00:00 2001 From: abirc8010 Date: Thu, 19 Dec 2024 10:59:13 +0530 Subject: [PATCH 02/13] make message box and popover menu occupy full width --- .../src/views/ChatInput/ChatInput.styles.js | 25 ++++-- .../ChatInput/ChatInputFormattingToolbar.js | 76 +++++++------------ .../views/QuoteMessage/QuoteMessage.styles.js | 3 +- 3 files changed, 46 insertions(+), 58 deletions(-) diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js index 84ff9cacbc..2f8718b19a 100644 --- a/packages/react/src/views/ChatInput/ChatInput.styles.js +++ b/packages/react/src/views/ChatInput/ChatInput.styles.js @@ -4,9 +4,10 @@ import { darken, lighten } from '@embeddedchat/ui-elements'; export const getChatInputStyles = (theme) => { const styles = { inputWithFormattingBox: css` + width: 100%; + margin-bottom: 5px; border: 1px solid ${theme.colors.border}; border-radius: ${theme.radius}; - margin: 0.5rem 2rem 1rem 2rem; &.focused { border: ${`1.5px solid ${theme.colors.ring}`}; } @@ -39,7 +40,6 @@ export const getChatInputStyles = (theme) => { border: none; outline: none; font-size: 14px; - &:focus { border: none; outline: none; @@ -81,13 +81,24 @@ export const getChatInputFormattingToolbarStyles = ({ theme, mode }) => { `, popOverStyles: css` position: absolute; - bottom: 4rem; + bottom: 3rem; left: 0; - border: 1px solid ${theme.colors.border}; - z-index: 1000; - background-color: ${theme.colors.background}; - border-radius: 4px; + width: 100%; + background: ${theme.colors.background}; + box-shadow: 0 -8px 10px ${mode === 'light' ? darken(theme.colors.background, 0.1) : lighten(theme.colors.background, 1)}; + border-radius: 8px; padding: 1rem; + display: flex; + flex-direction: column; + align-items: flex-start; + z-index: 100; + `, + popOverItemStyles: css` + display: flex; + gap: 0.5rem; + align-items: center; + cursor: pointer; + padding: 0.5rem; `, }; return styles; diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js index aecd888bf3..67b53ab127 100644 --- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js +++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js @@ -42,6 +42,7 @@ const ChatInputFormattingToolbar = ({ const [isEmojiOpen, setEmojiOpen] = useState(false); const [isPopoverOpen, setPopoverOpen] = useState(false); const popoverRef = useRef(null); + useEffect(() => { const handleClickOutside = (event) => { if (popoverRef.current && !popoverRef.current.contains(event.target)) { @@ -68,11 +69,6 @@ const ChatInputFormattingToolbar = ({ triggerButton?.(null, message); }; - const handleFormatterClick = (item) => { - formatSelection(messageRef, item.pattern); - setPopoverOpen(false); - }; - const chatToolMap = { audio: ( @@ -80,27 +76,29 @@ const ChatInputFormattingToolbar = ({ ), video: ( - {}} - > + - + ), file: ( - - - + + + + + ), }; + const handleFormatterClick = (item) => { + formatSelection(messageRef, item.pattern); + setPopoverOpen(false); + }; + return ( { - setEmojiOpen(true); - }} + onClick={() => setEmojiOpen(true)} > @@ -123,7 +119,7 @@ const ChatInputFormattingToolbar = ({ { - formatSelection(messageRef, item.pattern); - }} + onClick={() => formatSelection(messageRef, item.pattern)} > ))} - - {['audio', 'file', 'video'].map((key) => chatToolMap[key])} formatter.find((item) => item.name === name)) .map((item) => ( - handleFormatterClick(item)} - css={css` - padding: 8px; - cursor: pointer; - `} + css={styles.popOverItemStyles} > - + {item.name} + ))} - {['video', 'file'].map((key) => ( - - {chatToolMap[key]} - - ))} )} - {surfaceItems.includes('audio') && chatToolMap.audio} + {surfaceItems.map((key) => chatToolMap[key])} {isEmojiOpen && ( { const styles = { messageContainer: css` - margin: 0.2rem 2rem; position: relative; font-size: 0.85rem; background-color: ${theme.colors.background}; @@ -12,7 +11,7 @@ const getQuoteMessageStyles = (theme) => { z-index: 1200; border: 1px solid ${theme.colors.border}; border-radius: ${theme.radius}; - max-width: 100%; + width: 100%; box-sizing: border-box; `, From e3a962ac510867a771cdca962c45a099fa3a454a Mon Sep 17 00:00:00 2001 From: abirc8010 Date: Sat, 28 Dec 2024 17:38:31 +0530 Subject: [PATCH 03/13] make message composer configurable --- .../views/ChatInput/AudioMessageRecorder.js | 14 +- .../ChatInput/ChatInputFormattingToolbar.js | 263 ++++++++++++------ .../views/ChatInput/VideoMessageRecoder.js | 23 +- 3 files changed, 212 insertions(+), 88 deletions(-) diff --git a/packages/react/src/views/ChatInput/AudioMessageRecorder.js b/packages/react/src/views/ChatInput/AudioMessageRecorder.js index caef86e700..e0fe160279 100644 --- a/packages/react/src/views/ChatInput/AudioMessageRecorder.js +++ b/packages/react/src/views/ChatInput/AudioMessageRecorder.js @@ -11,7 +11,8 @@ import RCContext from '../../context/RCInstance'; import useMessageStore from '../../store/messageStore'; import { getCommonRecorderStyles } from './ChatInput.styles'; -const AudioMessageRecorder = () => { +const AudioMessageRecorder = (props) => { + const { displayName, popOverItemStyles } = props; const videoRef = useRef(null); const { theme } = useTheme(); const styles = getCommonRecorderStyles(theme); @@ -138,7 +139,16 @@ const AudioMessageRecorder = () => { }, [isRecorded, file]); if (state === 'idle') { - return ( + return displayName ? ( + + + {displayName} + + ) : ( diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js index 67b53ab127..eab1a793b7 100644 --- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js +++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js @@ -23,6 +23,14 @@ const ChatInputFormattingToolbar = ({ optionConfig = { surfaceItems: ['emoji', 'formatter', 'audio', 'video', 'file'], formatters: ['bold', 'italic', 'strike', 'code', 'multiline'], + smallScreenSurfaceItems: [ + 'emoji', + 'popoverItems', + 'audio', + 'video', + 'file', + ], + popOverItems: ['formatter'], }, }) => { const { classNames, styleOverrides, configOverrides } = useComponentOverrides( @@ -34,7 +42,11 @@ const ChatInputFormattingToolbar = ({ configOverrides.optionConfig?.surfaceItems || optionConfig.surfaceItems; const formatters = configOverrides.optionConfig?.formatters || optionConfig.formatters; - + const smallScreenSurfaceItems = + configOverrides.optionConfig?.smallScreenSurfaceItems || + optionConfig.smallScreenSurfaceItems; + const popOverItems = + configOverrides.optionConfig?.popOverItems || optionConfig.popOverItems; const isRecordingMessage = useMessageStore( (state) => state.isRecordingMessage ); @@ -59,7 +71,10 @@ const ChatInputFormattingToolbar = ({ const handleClickToOpenFiles = () => { inputRef.current.click(); }; - + const handleFormatterClick = (item) => { + formatSelection(messageRef, item.pattern); + setPopoverOpen(false); + }; const handleEmojiClick = (emojiEvent) => { const [emoji] = emojiEvent.names; const message = `${messageRef.current.value} :${emoji.replace( @@ -70,52 +85,141 @@ const ChatInputFormattingToolbar = ({ }; const chatToolMap = { + emoji: + isPopoverOpen && popOverItems.includes('emoji') ? ( + { + setEmojiOpen(true); + }} + > + + emoji + + ) : ( + + { + setEmojiOpen(true); + }} + > + + + + ), + audio: ( - + ), video: ( - + ), - file: ( - + file: + isPopoverOpen && popOverItems.includes('file') ? ( + + + file + + ) : ( + + + + + + ), + formatter: formatters + .map((name) => formatter.find((item) => item.name === name)) + .map((item) => + isPopoverOpen && popOverItems.includes('formatter') ? ( + <> + { + handleFormatterClick(item); + }} + css={styles.popOverItemStyles} + > + + {item.name} + + + ) : ( + + { + formatSelection(messageRef, item.pattern); + }} + > + + + + ) + ), + popoverItems: ( + setPopoverOpen(true)} > - + ), }; - const handleFormatterClick = (item) => { - formatSelection(messageRef, item.pattern); - setPopoverOpen(false); - }; - return ( - - setEmojiOpen(true)} - > - - - - - {formatters - .map((name) => formatter.find((item) => item.name === name)) - .map((item) => ( - - formatSelection(messageRef, item.pattern)} - > - - - - ))} + {surfaceItems.map((key) => chatToolMap[key])} + {isPopoverOpen && ( + + {popOverItems.map((name) => { + const itemInFormatter = formatter.find( + (item) => item.name === name + ); + if (itemInFormatter) { + return ( + handleFormatterClick(itemInFormatter)} + css={styles.popOverItemStyles} + > + + {itemInFormatter.name} + + ); + } + return chatToolMap[name]; + })} + + )} - - setPopoverOpen(true)} - > - - - - - - {isPopoverOpen && ( - - {formatters - .map((name) => formatter.find((item) => item.name === name)) - .map((item) => ( - handleFormatterClick(item)} - css={styles.popOverItemStyles} + {smallScreenSurfaceItems.map((name) => { + const itemInFormatter = formatter.find((item) => item.name === name); + if (itemInFormatter) { + return ( + - - {item.name} - - ))} - - )} - - {surfaceItems.map((key) => chatToolMap[key])} - + ghost + onClick={() => + formatSelection(messageRef, itemInFormatter.pattern) + } + > + + + + ); + } + return chatToolMap[name]; + })} + {isEmojiOpen && ( { +const VideoMessageRecorder = (props) => { + const { displayName, popOverItemStyles } = props; const videoRef = useRef(null); const { theme } = useTheme(); const styles = getCommonRecorderStyles(theme); @@ -154,11 +155,21 @@ const VideoMessageRecorder = () => { return ( <> - {state === 'idle' && ( - - - - )} + {state === 'idle' && + (displayName ? ( + + + {displayName} + + ) : ( + + + + ))} {state === 'recording' && ( <> From f6d80f70daee2bcd71767ecb4f0fe656f841a1b6 Mon Sep 17 00:00:00 2001 From: abirc8010 Date: Sun, 5 Jan 2025 00:43:50 +0530 Subject: [PATCH 04/13] zIndex fix --- packages/react/src/views/ChatInput/ChatInput.styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js index c4a7a9cdf9..aecbdb613b 100644 --- a/packages/react/src/views/ChatInput/ChatInput.styles.js +++ b/packages/react/src/views/ChatInput/ChatInput.styles.js @@ -91,7 +91,7 @@ export const getChatInputFormattingToolbarStyles = ({ theme, mode }) => { display: flex; flex-direction: column; align-items: flex-start; - z-index: 100; + z-index: 1300; `, popOverItemStyles: css` display: flex; From 149b253ec33a38469fcea1ca52fceda19383d052 Mon Sep 17 00:00:00 2001 From: abirc8010 Date: Mon, 6 Jan 2025 01:00:28 +0530 Subject: [PATCH 05/13] resolve conflict --- .../views/ChatInput/AudioMessageRecorder.js | 11 ++++++-- .../ChatInput/ChatInputFormattingToolbar.js | 27 +++++++++++++++---- .../views/ChatInput/VideoMessageRecoder.js | 11 ++++++-- 3 files changed, 40 insertions(+), 9 deletions(-) diff --git a/packages/react/src/views/ChatInput/AudioMessageRecorder.js b/packages/react/src/views/ChatInput/AudioMessageRecorder.js index d2146e11aa..cd46fe946c 100644 --- a/packages/react/src/views/ChatInput/AudioMessageRecorder.js +++ b/packages/react/src/views/ChatInput/AudioMessageRecorder.js @@ -6,7 +6,7 @@ import { getCommonRecorderStyles } from './ChatInput.styles'; import useAttachmentWindowStore from '../../store/attachmentwindow'; const AudioMessageRecorder = (props) => { - const { displayName, popOverItemStyles } = props; + const { disabled, displayName, popOverItemStyles } = props; const videoRef = useRef(null); const { theme } = useTheme(); const styles = getCommonRecorderStyles(theme); @@ -48,6 +48,7 @@ const AudioMessageRecorder = (props) => { }; const handleRecordButtonClick = () => { + if (disabled) return; setRecordState('recording'); try { start(); @@ -135,12 +136,18 @@ const AudioMessageRecorder = (props) => { key="audio" css={popOverItemStyles} onClick={handleRecordButtonClick} + disabled={disabled} > {displayName} ) : ( - + ); diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js index 8dee5b1fdf..5eb6696d1d 100644 --- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js +++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js @@ -110,6 +110,7 @@ const ChatInputFormattingToolbar = ({ css={styles.popOverItemStyles} disabled={isRecordingMessage} onClick={() => { + if (isRecordingMessage) return; setEmojiOpen(true); }} > @@ -123,6 +124,7 @@ const ChatInputFormattingToolbar = ({ ghost disabled={isRecordingMessage} onClick={() => { + if (isRecordingMessage) return; setEmojiOpen(true); }} > @@ -137,6 +139,7 @@ const ChatInputFormattingToolbar = ({ displayName={ isPopoverOpen && popOverItems.includes('audio') ? 'audio' : null } + disabled={isRecordingMessage} popOverItemStyles={styles.popOverItemStyles} /> @@ -148,6 +151,7 @@ const ChatInputFormattingToolbar = ({ isPopoverOpen && popOverItems.includes('video') ? 'video' : null } popOverItemStyles={styles.popOverItemStyles} + disabled={isRecordingMessage} /> ), @@ -157,7 +161,10 @@ const ChatInputFormattingToolbar = ({ key="file" css={styles.popOverItemStyles} disabled={isRecordingMessage} - onClick={handleClickToOpenFiles} + onClick={() => { + if (isRecordingMessage) return; + handleClickToOpenFiles(); + }} > file @@ -168,7 +175,10 @@ const ChatInputFormattingToolbar = ({ square ghost disabled={isRecordingMessage} - onClick={handleClickToOpenFiles} + onClick={() => { + if (isRecordingMessage) return; + handleClickToOpenFiles(); + }} > @@ -181,6 +191,7 @@ const ChatInputFormattingToolbar = ({ css={styles.popOverItemStyles} disabled={isRecordingMessage} onClick={() => { + if (isRecordingMessage) return; setInsertLinkOpen(true); }} > @@ -194,6 +205,7 @@ const ChatInputFormattingToolbar = ({ ghost disabled={isRecordingMessage} onClick={() => { + if (isRecordingMessage) return; setInsertLinkOpen(true); }} > @@ -210,6 +222,7 @@ const ChatInputFormattingToolbar = ({ key={item.name} disabled={isRecordingMessage} onClick={() => { + if (isRecordingMessage) return; handleFormatterClick(item); }} css={styles.popOverItemStyles} @@ -233,6 +246,7 @@ const ChatInputFormattingToolbar = ({ disabled={isRecordingMessage} ghost onClick={() => { + if (isRecordingMessage) return; formatSelection(messageRef, item.pattern); }} > @@ -251,7 +265,10 @@ const ChatInputFormattingToolbar = ({ square ghost disabled={isRecordingMessage} - onClick={() => setPopoverOpen(true)} + onClick={() => { + if (isRecordingMessage) return; + setPopoverOpen(true); + }} > @@ -268,7 +285,7 @@ const ChatInputFormattingToolbar = ({ { - const { displayName, popOverItemStyles } = props; const videoRef = useRef(null); + const { disabled, displayName, popOverItemStyles } = props; const { theme } = useTheme(); const styles = getCommonRecorderStyles(theme); @@ -56,6 +56,7 @@ const VideoMessageRecorder = (props) => { }; const handleRecordButtonClick = () => { + if (disabled) return; setRecordState('recording'); try { start(videoRef.current); @@ -151,12 +152,18 @@ const VideoMessageRecorder = (props) => { key="video" css={popOverItemStyles} onClick={handleRecordButtonClick} + disabled={disabled} > {displayName} ) : ( - + ))} From e75ce2a257bf0cb269a4b127b9ef57c18595b5fb Mon Sep 17 00:00:00 2001 From: abirc8010 Date: Wed, 15 Jan 2025 02:42:23 +0530 Subject: [PATCH 06/13] Place popoverMenu icon to the extreme right --- .../ChatInput/ChatInputFormattingToolbar.js | 51 ++++++------------- 1 file changed, 16 insertions(+), 35 deletions(-) diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js index 5eb6696d1d..55b669fc58 100644 --- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js +++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js @@ -24,13 +24,7 @@ const ChatInputFormattingToolbar = ({ optionConfig = { surfaceItems: ['emoji', 'formatter', 'link', 'audio', 'video', 'file'], formatters: ['bold', 'italic', 'strike', 'code', 'multiline'], - smallScreenSurfaceItems: [ - 'emoji', - 'popoverItems', - 'audio', - 'video', - 'file', - ], + smallScreenSurfaceItems: ['emoji', 'audio', 'video', 'file'], popOverItems: ['formatter', 'link'], }, }) => { @@ -57,19 +51,6 @@ const ChatInputFormattingToolbar = ({ const [isPopoverOpen, setPopoverOpen] = useState(false); const popoverRef = useRef(null); - useEffect(() => { - const handleClickOutside = (event) => { - if (popoverRef.current && !popoverRef.current.contains(event.target)) { - setPopoverOpen(false); - } - }; - - document.addEventListener('mousedown', handleClickOutside); - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, []); - const handleClickToOpenFiles = () => { inputRef.current.click(); }; @@ -259,21 +240,6 @@ const ChatInputFormattingToolbar = ({ ) ), - popoverItems: ( - - { - if (isRecordingMessage) return; - setPopoverOpen(true); - }} - > - - - - ), }; return ( @@ -355,6 +321,21 @@ const ChatInputFormattingToolbar = ({ } return chatToolMap[name]; })} + {popOverItems.length > 0 && ( + + { + if (isRecordingMessage) return; + setPopoverOpen(!isPopoverOpen); + }} + > + + + + )} {isEmojiOpen && ( Date: Mon, 27 Jan 2025 23:04:04 +0530 Subject: [PATCH 07/13] feat: Add 'Cancel Recording' and 'Finish Recording' tooltips for audio/video buttons (#812) --- .../views/ChatInput/AudioMessageRecorder.js | 42 ++++++++++++------- .../ChatInput/ChatInputFormattingToolbar.js | 34 +++++++-------- .../views/ChatInput/VideoMessageRecoder.js | 35 +++++++++------- 3 files changed, 63 insertions(+), 48 deletions(-) diff --git a/packages/react/src/views/ChatInput/AudioMessageRecorder.js b/packages/react/src/views/ChatInput/AudioMessageRecorder.js index cd46fe946c..53dbddf4bd 100644 --- a/packages/react/src/views/ChatInput/AudioMessageRecorder.js +++ b/packages/react/src/views/ChatInput/AudioMessageRecorder.js @@ -1,5 +1,11 @@ import React, { useState, useEffect, useCallback, useRef } from 'react'; -import { Box, Icon, ActionButton, useTheme } from '@embeddedchat/ui-elements'; +import { + Box, + Icon, + ActionButton, + Tooltip, + useTheme, +} from '@embeddedchat/ui-elements'; import { useMediaRecorder } from '../../hooks/useMediaRecorder'; import useMessageStore from '../../store/messageStore'; import { getCommonRecorderStyles } from './ChatInput.styles'; @@ -142,14 +148,16 @@ const AudioMessageRecorder = (props) => { {displayName} ) : ( - - - + + + + + ); } @@ -157,18 +165,22 @@ const AudioMessageRecorder = (props) => { {state === 'recording' && ( <> - - - + + + + + {time} - - - + + + + + )} diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js index 957eb3d93d..ed8cf193f0 100644 --- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js +++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js @@ -115,26 +115,22 @@ const ChatInputFormattingToolbar = ({ ), audio: ( - - - + ), video: ( - - - + ), file: isPopoverOpen && popOverItems.includes('file') ? ( @@ -218,7 +214,7 @@ const ChatInputFormattingToolbar = ({ ) : ( diff --git a/packages/react/src/views/ChatInput/VideoMessageRecoder.js b/packages/react/src/views/ChatInput/VideoMessageRecoder.js index 7ec8177317..814c2093aa 100644 --- a/packages/react/src/views/ChatInput/VideoMessageRecoder.js +++ b/packages/react/src/views/ChatInput/VideoMessageRecoder.js @@ -4,6 +4,7 @@ import { Box, Icon, ActionButton, + Tooltip, Modal, useTheme, } from '@embeddedchat/ui-elements'; @@ -158,14 +159,16 @@ const VideoMessageRecorder = (props) => { {displayName} ) : ( - - - + + + + + ))} {state === 'recording' && ( @@ -190,16 +193,20 @@ const VideoMessageRecorder = (props) => { `} /> - - - + + + + + {time} - - - + + + + + From b1edb03660e3fce8016b877527ad6fb28720069c Mon Sep 17 00:00:00 2001 From: abirc8010 Date: Tue, 28 Jan 2025 01:04:53 +0530 Subject: [PATCH 08/13] fix message box width and minor UI issues for chatinput formatters --- packages/react/src/views/ChatInput/ChatInput.js | 2 +- .../react/src/views/ChatInput/ChatInput.styles.js | 6 +++++- .../views/ChatInput/ChatInputFormattingToolbar.js | 12 ++++++++++++ .../src/views/QuoteMessage/QuoteMessage.styles.js | 8 +++++++- 4 files changed, 25 insertions(+), 3 deletions(-) diff --git a/packages/react/src/views/ChatInput/ChatInput.js b/packages/react/src/views/ChatInput/ChatInput.js index 33f40d7af3..34ebffb86f 100644 --- a/packages/react/src/views/ChatInput/ChatInput.js +++ b/packages/react/src/views/ChatInput/ChatInput.js @@ -524,7 +524,7 @@ const ChatInput = ({ scrollToBottom }) => { disabled={!isUserAuthenticated || !canSendMsg || isRecordingMessage} placeholder={ isUserAuthenticated && canSendMsg - ? `Message #${channelInfo.name}` + ? `Message ${channelInfo.name ? `#${channelInfo.name}` : ''}` : isUserAuthenticated ? 'This room is read only' : 'Sign in to chat' diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js index 8850f71298..1f4fb24318 100644 --- a/packages/react/src/views/ChatInput/ChatInput.styles.js +++ b/packages/react/src/views/ChatInput/ChatInput.styles.js @@ -4,13 +4,17 @@ import { darken, lighten } from '@embeddedchat/ui-elements'; export const getChatInputStyles = (theme) => { const styles = { inputWithFormattingBox: css` - width: 100%; margin-bottom: 5px; border: 1px solid ${theme.colors.border}; border-radius: ${theme.radius}; + margin: 0.5rem 2rem 1rem 2rem; &.focused { border: ${`1.5px solid ${theme.colors.ring}`}; } + @media (max-width: 500px) { + margin: 0; + width: 100%; + } `, editMessage: css` diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js index ed8cf193f0..d3bb12c840 100644 --- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js +++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js @@ -115,6 +115,8 @@ const ChatInputFormattingToolbar = ({ ), audio: ( + isPopoverOpen && popOverItems.includes('audio') ? 'audio' : null + ) ? ( + ) : ( + + + ), video: ( { const styles = { messageContainer: css` + margin: 0.2rem 2rem; position: relative; font-size: 0.85rem; background-color: ${theme.colors.background}; @@ -11,8 +12,13 @@ const getQuoteMessageStyles = (theme) => { z-index: 1200; border: 1px solid ${theme.colors.border}; border-radius: ${theme.radius}; - width: 100%; + max-width: 100%; box-sizing: border-box; + + @media (max-width: 500px) { + margin: 0; + width: 100%; + } `, avatarContainer: css` From 0ff4e98975b10b206ef5cfc4f8f8bf7271d06e4c Mon Sep 17 00:00:00 2001 From: abirc8010 Date: Tue, 28 Jan 2025 01:10:50 +0530 Subject: [PATCH 09/13] remove redundant tooltip --- .../ChatInput/ChatInputFormattingToolbar.js | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js index d3bb12c840..1c22fc8c4f 100644 --- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js +++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js @@ -24,8 +24,8 @@ const ChatInputFormattingToolbar = ({ optionConfig = { surfaceItems: ['emoji', 'formatter', 'link', 'audio', 'video', 'file'], formatters: ['bold', 'italic', 'strike', 'code', 'multiline'], - smallScreenSurfaceItems: ['emoji', 'audio', 'video', 'file'], - popOverItems: ['formatter', 'link'], + smallScreenSurfaceItems: ['emoji', 'video', 'file'], + popOverItems: ['formatter', 'link', 'audio'], }, }) => { const { classNames, styleOverrides, configOverrides } = useComponentOverrides( @@ -115,8 +115,6 @@ const ChatInputFormattingToolbar = ({ ), audio: ( - isPopoverOpen && popOverItems.includes('audio') ? 'audio' : null - ) ? ( - ) : ( - - - ), video: ( Date: Tue, 28 Jan 2025 10:35:13 +0530 Subject: [PATCH 10/13] remove audio from pop over menu --- .../react/src/views/ChatInput/ChatInputFormattingToolbar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js index 1c22fc8c4f..411b402846 100644 --- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js +++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js @@ -24,8 +24,8 @@ const ChatInputFormattingToolbar = ({ optionConfig = { surfaceItems: ['emoji', 'formatter', 'link', 'audio', 'video', 'file'], formatters: ['bold', 'italic', 'strike', 'code', 'multiline'], - smallScreenSurfaceItems: ['emoji', 'video', 'file'], - popOverItems: ['formatter', 'link', 'audio'], + smallScreenSurfaceItems: ['emoji', 'video','audio', 'file'], + popOverItems: ['formatter', 'link'], }, }) => { const { classNames, styleOverrides, configOverrides } = useComponentOverrides( From 8d9a555c8371dc57b35e9fff65c4ca516a7ae4b2 Mon Sep 17 00:00:00 2001 From: abirc8010 Date: Tue, 28 Jan 2025 19:49:39 +0530 Subject: [PATCH 11/13] run prettier --- .../react/src/views/ChatInput/ChatInputFormattingToolbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js index 411b402846..5d8c20a600 100644 --- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js +++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js @@ -24,7 +24,7 @@ const ChatInputFormattingToolbar = ({ optionConfig = { surfaceItems: ['emoji', 'formatter', 'link', 'audio', 'video', 'file'], formatters: ['bold', 'italic', 'strike', 'code', 'multiline'], - smallScreenSurfaceItems: ['emoji', 'video','audio', 'file'], + smallScreenSurfaceItems: ['emoji', 'video', 'audio', 'file'], popOverItems: ['formatter', 'link'], }, }) => { From fd3b6169e7fd670063f0d2c8aac8915df83f9a39 Mon Sep 17 00:00:00 2001 From: abirc8010 Date: Fri, 31 Jan 2025 00:36:54 +0530 Subject: [PATCH 12/13] fix audio issue --- packages/react/src/views/ChatInput/ChatInput.styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js index 1f4fb24318..59516fcaa1 100644 --- a/packages/react/src/views/ChatInput/ChatInput.styles.js +++ b/packages/react/src/views/ChatInput/ChatInput.styles.js @@ -120,8 +120,8 @@ export const getCommonRecorderStyles = (theme) => { `, controller: css` - display: flex; gap: 0.15rem; + display: inline-flex; `, timer: css` From de84394ebe1fc28866efd524ed05904bca748ad9 Mon Sep 17 00:00:00 2001 From: abirc8010 Date: Fri, 31 Jan 2025 00:43:42 +0530 Subject: [PATCH 13/13] change font size for chat input --- packages/react/src/views/ChatInput/ChatInput.styles.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js index 59516fcaa1..b193d06922 100644 --- a/packages/react/src/views/ChatInput/ChatInput.styles.js +++ b/packages/react/src/views/ChatInput/ChatInput.styles.js @@ -4,7 +4,6 @@ import { darken, lighten } from '@embeddedchat/ui-elements'; export const getChatInputStyles = (theme) => { const styles = { inputWithFormattingBox: css` - margin-bottom: 5px; border: 1px solid ${theme.colors.border}; border-radius: ${theme.radius}; margin: 0.5rem 2rem 1rem 2rem; @@ -27,6 +26,9 @@ export const getChatInputStyles = (theme) => { justify-content: center; flex-direction: row; padding: 0.5rem; + @media (max-width: 383px) { + min-height: 100px; + } `, iconCursor: css` @@ -34,7 +36,6 @@ export const getChatInputStyles = (theme) => { `, textInput: css` - min-width: 0; flex: 1; word-wrap: break-word; white-space: pre-wrap; @@ -44,6 +45,7 @@ export const getChatInputStyles = (theme) => { border: none; outline: none; font-size: 14px; + &:focus { border: none; outline: none; @@ -56,7 +58,7 @@ export const getChatInputStyles = (theme) => { &::placeholder { padding-left: 5px; } - @media (min-width: 383px) { + @media (max-width: 383px) { font-size: 18px; } `,