From 1b2599afceb704cd6a4c5ed138815835a3b7c5e0 Mon Sep 17 00:00:00 2001 From: gaurirathi Date: Mon, 12 Jan 2026 19:53:13 +0530 Subject: [PATCH 01/13] Improve empty state login message clarity --- packages/react/src/views/MessageList/MessageList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/views/MessageList/MessageList.js b/packages/react/src/views/MessageList/MessageList.js index 80379eb1a..fb0812e21 100644 --- a/packages/react/src/views/MessageList/MessageList.js +++ b/packages/react/src/views/MessageList/MessageList.js @@ -41,7 +41,7 @@ const MessageList = ({ {isMessageLoaded ? 'No messages' - : 'Ready to chat? Login now to join the fun.'} + : 'Ready to chat? Sign in to start the conversation.'} ) : ( From cdd6c3e8d14b2a59fdb412ad11d2c958e3574d8a Mon Sep 17 00:00:00 2001 From: gaurirathi Date: Tue, 13 Jan 2026 20:15:45 +0530 Subject: [PATCH 02/13] Added dark/light mode styling for chat input container --- .../react/src/views/ChatInput/ChatInput.js | 2 +- .../react/src/views/ChatLayout/ChatLayout.js | 30 ++++++++++++++++++- .../src/views/MessageList/MessageList.js | 29 +++++++++++++----- 3 files changed, 52 insertions(+), 9 deletions(-) diff --git a/packages/react/src/views/ChatInput/ChatInput.js b/packages/react/src/views/ChatInput/ChatInput.js index 998e9007c..db5472db3 100644 --- a/packages/react/src/views/ChatInput/ChatInput.js +++ b/packages/react/src/views/ChatInput/ChatInput.js @@ -35,7 +35,7 @@ import useSearchMentionUser from '../../hooks/useSearchMentionUser'; import formatSelection from '../../lib/formatSelection'; import { parseEmoji } from '../../lib/emoji'; -const ChatInput = ({ scrollToBottom }) => { +const ChatInput = ({ scrollToBottom}) => { const { styleOverrides, classNames } = useComponentOverrides('ChatInput'); const { RCInstance, ECOptions } = useRCContext(); const { theme } = useTheme(); diff --git a/packages/react/src/views/ChatLayout/ChatLayout.js b/packages/react/src/views/ChatLayout/ChatLayout.js index 60c935a36..26bf256ba 100644 --- a/packages/react/src/views/ChatLayout/ChatLayout.js +++ b/packages/react/src/views/ChatLayout/ChatLayout.js @@ -34,6 +34,12 @@ import UiKitContextualBar from '../ContextualBarBlock/uiKit/UiKitContextualBar'; import useUiKitStore from '../../store/uiKitStore'; const ChatLayout = () => { + + const [mode, setMode] = useState('light'); + const toggleTheme = () => { + setMode((prev) => (prev === 'light' ? 'dark' : 'light')); + }; + const messageListRef = useRef(null); const { classNames, styleOverrides } = useComponentOverrides('ChatBody'); const { RCInstance, ECOptions } = useRCContext(); @@ -102,11 +108,33 @@ const ChatLayout = () => { css={styles.layout} style={{ ...styleOverrides, + position:'relative', + backgroundColor: mode === 'light' ? '#000' : '#fff', + color: mode === 'light' ? '#fff' : '#000', + border: '1px solid black', }} className={`ec-chat-layout ${classNames}`} onDragOver={(e) => handleDrag(e)} onDrop={(e) => handleDragDrop(e)} > + + {mode === 'light' ? '🌙 Dark' : '☀️ Light'} + { messageListRef={messageListRef} scrollToBottom={scrollToBottom} /> - +
diff --git a/packages/react/src/views/MessageList/MessageList.js b/packages/react/src/views/MessageList/MessageList.js index fb0812e21..eeacc350a 100644 --- a/packages/react/src/views/MessageList/MessageList.js +++ b/packages/react/src/views/MessageList/MessageList.js @@ -19,6 +19,9 @@ const MessageList = ({ const showReportMessage = useMessageStore((state) => state.showReportMessage); const messageToReport = useMessageStore((state) => state.messageToReport); const isMessageLoaded = useMessageStore((state) => state.isMessageLoaded); + + + const { theme } = useTheme(); const isMessageNewDay = (current, previous) => @@ -30,21 +33,33 @@ const MessageList = ({ return ( <> - {filteredMessages.length === 0 ? ( + {filteredMessages.length === 0 ? ( - - - {isMessageLoaded - ? 'No messages' - : 'Ready to chat? Sign in to start the conversation.'} - + {!isUserAuthenticated ? ( + <> + + Sign in to start the conversation. + + ) : !isMessageLoaded ? ( + <> + + Loading messages... + + ) : ( + <> + + No messages yet + + )} ) : ( + + <> {!hasMoreMessages && isUserAuthenticated && ( Date: Thu, 15 Jan 2026 20:21:47 +0530 Subject: [PATCH 03/13] Update ChatInput.js --- packages/react/src/views/ChatInput/ChatInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/views/ChatInput/ChatInput.js b/packages/react/src/views/ChatInput/ChatInput.js index db5472db3..998e9007c 100644 --- a/packages/react/src/views/ChatInput/ChatInput.js +++ b/packages/react/src/views/ChatInput/ChatInput.js @@ -35,7 +35,7 @@ import useSearchMentionUser from '../../hooks/useSearchMentionUser'; import formatSelection from '../../lib/formatSelection'; import { parseEmoji } from '../../lib/emoji'; -const ChatInput = ({ scrollToBottom}) => { +const ChatInput = ({ scrollToBottom }) => { const { styleOverrides, classNames } = useComponentOverrides('ChatInput'); const { RCInstance, ECOptions } = useRCContext(); const { theme } = useTheme(); From adf3874114cf821938964e135afc30d1519bf0ef Mon Sep 17 00:00:00 2001 From: Gauri Rathi <153975346+gaurirathi@users.noreply.github.com> Date: Thu, 15 Jan 2026 20:22:33 +0530 Subject: [PATCH 04/13] Update MessageList.js --- packages/react/src/views/MessageList/MessageList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/views/MessageList/MessageList.js b/packages/react/src/views/MessageList/MessageList.js index eeacc350a..fcc4fb8a3 100644 --- a/packages/react/src/views/MessageList/MessageList.js +++ b/packages/react/src/views/MessageList/MessageList.js @@ -33,7 +33,7 @@ const MessageList = ({ return ( <> - {filteredMessages.length === 0 ? ( + {filteredMessages.length === 0 ? ( Date: Thu, 15 Jan 2026 20:23:17 +0530 Subject: [PATCH 05/13] Update MessageList.js --- packages/react/src/views/MessageList/MessageList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/views/MessageList/MessageList.js b/packages/react/src/views/MessageList/MessageList.js index fcc4fb8a3..58c547526 100644 --- a/packages/react/src/views/MessageList/MessageList.js +++ b/packages/react/src/views/MessageList/MessageList.js @@ -33,7 +33,7 @@ const MessageList = ({ return ( <> - {filteredMessages.length === 0 ? ( + {filteredMessages.length === 0 ? ( Date: Thu, 15 Jan 2026 20:23:54 +0530 Subject: [PATCH 06/13] Update MessageList.js --- packages/react/src/views/MessageList/MessageList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/views/MessageList/MessageList.js b/packages/react/src/views/MessageList/MessageList.js index 58c547526..eeacc350a 100644 --- a/packages/react/src/views/MessageList/MessageList.js +++ b/packages/react/src/views/MessageList/MessageList.js @@ -33,7 +33,7 @@ const MessageList = ({ return ( <> - {filteredMessages.length === 0 ? ( + {filteredMessages.length === 0 ? ( Date: Thu, 15 Jan 2026 20:24:53 +0530 Subject: [PATCH 07/13] Update MessageList.js --- packages/react/src/views/MessageList/MessageList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/views/MessageList/MessageList.js b/packages/react/src/views/MessageList/MessageList.js index eeacc350a..639b97be2 100644 --- a/packages/react/src/views/MessageList/MessageList.js +++ b/packages/react/src/views/MessageList/MessageList.js @@ -33,7 +33,7 @@ const MessageList = ({ return ( <> - {filteredMessages.length === 0 ? ( + {filteredMessages.length === 0 ? ( Date: Thu, 15 Jan 2026 20:25:17 +0530 Subject: [PATCH 08/13] Update MessageList.js --- packages/react/src/views/MessageList/MessageList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/views/MessageList/MessageList.js b/packages/react/src/views/MessageList/MessageList.js index 639b97be2..eb30fad31 100644 --- a/packages/react/src/views/MessageList/MessageList.js +++ b/packages/react/src/views/MessageList/MessageList.js @@ -33,7 +33,7 @@ const MessageList = ({ return ( <> - {filteredMessages.length === 0 ? ( + {filteredMessages.length === 0 ? ( Date: Thu, 15 Jan 2026 20:26:21 +0530 Subject: [PATCH 09/13] Update MessageList.js --- packages/react/src/views/MessageList/MessageList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/views/MessageList/MessageList.js b/packages/react/src/views/MessageList/MessageList.js index eb30fad31..58c547526 100644 --- a/packages/react/src/views/MessageList/MessageList.js +++ b/packages/react/src/views/MessageList/MessageList.js @@ -33,7 +33,7 @@ const MessageList = ({ return ( <> - {filteredMessages.length === 0 ? ( + {filteredMessages.length === 0 ? ( Date: Thu, 15 Jan 2026 20:26:55 +0530 Subject: [PATCH 10/13] Update MessageList.js --- packages/react/src/views/MessageList/MessageList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/views/MessageList/MessageList.js b/packages/react/src/views/MessageList/MessageList.js index 58c547526..8417e042c 100644 --- a/packages/react/src/views/MessageList/MessageList.js +++ b/packages/react/src/views/MessageList/MessageList.js @@ -33,7 +33,7 @@ const MessageList = ({ return ( <> - {filteredMessages.length === 0 ? ( + {filteredMessages.length === 0 ? ( Date: Thu, 15 Jan 2026 20:27:28 +0530 Subject: [PATCH 11/13] Update MessageList.js --- packages/react/src/views/MessageList/MessageList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/views/MessageList/MessageList.js b/packages/react/src/views/MessageList/MessageList.js index 8417e042c..fcc4fb8a3 100644 --- a/packages/react/src/views/MessageList/MessageList.js +++ b/packages/react/src/views/MessageList/MessageList.js @@ -33,7 +33,7 @@ const MessageList = ({ return ( <> - {filteredMessages.length === 0 ? ( + {filteredMessages.length === 0 ? ( Date: Thu, 15 Jan 2026 20:27:59 +0530 Subject: [PATCH 12/13] Update MessageList.js --- packages/react/src/views/MessageList/MessageList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/views/MessageList/MessageList.js b/packages/react/src/views/MessageList/MessageList.js index fcc4fb8a3..eeacc350a 100644 --- a/packages/react/src/views/MessageList/MessageList.js +++ b/packages/react/src/views/MessageList/MessageList.js @@ -33,7 +33,7 @@ const MessageList = ({ return ( <> - {filteredMessages.length === 0 ? ( + {filteredMessages.length === 0 ? ( Date: Thu, 15 Jan 2026 20:28:27 +0530 Subject: [PATCH 13/13] Update MessageList.js --- packages/react/src/views/MessageList/MessageList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/views/MessageList/MessageList.js b/packages/react/src/views/MessageList/MessageList.js index eeacc350a..9b361737c 100644 --- a/packages/react/src/views/MessageList/MessageList.js +++ b/packages/react/src/views/MessageList/MessageList.js @@ -33,7 +33,7 @@ const MessageList = ({ return ( <> - {filteredMessages.length === 0 ? ( + {filteredMessages.length === 0 ? (