From 1b2599afceb704cd6a4c5ed138815835a3b7c5e0 Mon Sep 17 00:00:00 2001
From: gaurirathi <gaurionly11@gmail.com>
Date: Mon, 12 Jan 2026 19:53:13 +0530
Subject: [PATCH 1/2] 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 = ({
           <Box>
             {isMessageLoaded
               ? 'No messages'
-              : 'Ready to chat? Login now to join the fun.'}
+              : 'Ready to chat? Sign in to start the conversation.'}
           </Box>
         </Box>
       ) : (

From cdd6c3e8d14b2a59fdb412ad11d2c958e3574d8a Mon Sep 17 00:00:00 2001
From: gaurirathi <gaurionly11@gmail.com>
Date: Tue, 13 Jan 2026 20:15:45 +0530
Subject: [PATCH 2/2] 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)}
     >
+    <Box
+      css={{
+        position: 'absolute',
+        top: '12px',
+        right: '12px',
+        zIndex: 9999,
+        padding: '6px 12px',
+        background: mode === 'dark' ? '#fff' : '#000',
+        color: mode === 'dark' ? '#000' : '#fff',
+        border: mode==='dark' ? '1px solid black':'1px solid white',
+        borderRadius: '6px',
+        fontSize: '14px',
+        cursor: 'pointer',
+      }}
+      onClick={toggleTheme}
+    >
+      {mode === 'light' ? '🌙 Dark' : '☀️ Light'}
+    </Box>
       <Box css={styles.chatMain}>
         <ChatBody
           anonymousMode={anonymousMode}
@@ -114,7 +142,7 @@ const ChatLayout = () => {
           messageListRef={messageListRef}
           scrollToBottom={scrollToBottom}
         />
-        <ChatInput scrollToBottom={scrollToBottom} />
+        <ChatInput scrollToBottom={scrollToBottom} mode={mode} />
         <div id="emoji-popup" />
       </Box>
 
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 ? (
         <Box
           css={css`
             text-align: center;
             margin: auto;
           `}
         >
-          <Icon name="thread" size="2rem" />
-          <Box>
-            {isMessageLoaded
-              ? 'No messages'
-              : 'Ready to chat? Sign in to start the conversation.'}
-          </Box>
+          {!isUserAuthenticated ? (
+            <>
+              <Icon name="thread" size="2rem" />
+              <Box>Sign in to start the conversation.</Box>
+            </>
+          ) : !isMessageLoaded ? (
+            <>
+              <Throbber />
+              <Box mt="8px">Loading messages...</Box>
+            </>
+          ) : (
+            <>
+              <Icon name="thread" size="2rem" />
+              <Box>No messages yet</Box>
+            </>
+          )}
         </Box>
       ) : (
+
+
         <>
           {!hasMoreMessages && isUserAuthenticated && (
             <MessageBody