Improve empty state login message clarity

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 clearUnreadDividerRef = useRef(null);
   const { classNames, styleOverrides } = useComponentOverrides('ChatBody');
@@ -103,11 +109,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}

packages/react/src/views/MessageList/MessageList.js

@@ -21,6 +21,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) =>
@@ -39,14 +42,26 @@ const MessageList = ({
             margin: auto;
           `}
         >
-          <Icon name="thread" size="2rem" />
-          <Box>
-            {isMessageLoaded
-              ? 'No messages'
-              : 'Ready to chat? Login now to join the fun.'}
-          </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