feat(EmptyStateIndicator): apply Figma design to str-chat__empty-channel

- Add EmptyStateIndicator/styling with Figma styles (tertiary color, caption typography, 12px gap)
- Update copy to 'Send a message to start the conversation' and i18n (all locales)
- Register styling in index.scss; leave str-chat__channel-list-empty unchanged

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: MartinCupela

src/components/EmptyStateIndicator/EmptyStateIndicator.tsx

@@ -28,7 +28,7 @@ const UnMemoizedEmptyStateIndicator = (props: EmptyStateIndicatorProps) => {
   }
 
   if (listType === 'message') {
-    const text = t('No chats here yet…');
+    const text = t('Send a message to start the conversation');
     return (
       <div className='str-chat__empty-channel'>
         <ChatBubble />

src/components/EmptyStateIndicator/__tests__/EmptyStateIndicator.test.js

@@ -22,7 +22,9 @@ describe('EmptyStateIndicator', () => {
 
   it('should display correct text when listType is message', () => {
     render(<EmptyStateIndicator listType='message' />);
-    expect(screen.queryByText('No chats here yet…')).toBeInTheDocument();
+    expect(
+      screen.queryByText('Send a message to start the conversation'),
+    ).toBeInTheDocument();
   });
 
   it('should display correct text when listType is channel', () => {

src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss

@@ -0,0 +1,33 @@
+// Figma design: empty channel only (str-chat__empty-channel). str-chat__channel-list-empty unchanged.
+.str-chat__empty-channel {
+  --str-chat-icon-color: var(--text-tertiary);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--str-chat__spacing-4);
+  position: relative;
+  gap: var(--str-chat__spacing-3); // 12px – Figma spacing/sm
+  text-align: center;
+
+  svg {
+    width: calc(var(--str-chat__spacing-px) * 136);
+    height: calc(var(--str-chat__spacing-px) * 136);
+
+    path {
+      fill: var(--text-tertiary);
+    }
+  }
+
+  .str-chat__empty-channel-notifications {
+    position: absolute;
+    inset-block-end: var(--str-chat__spacing-2);
+  }
+
+  .str-chat__empty-channel-text {
+    font: 400 14px / 20px var(--str-chat__font-family); // Figma caption/default
+    color: var(--text-tertiary);
+    margin: 0;
+  }
+}

src/components/EmptyStateIndicator/styling/index.scss

@@ -0,0 +1 @@
+@use 'EmptyStateIndicator';

src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap

@@ -47,7 +47,7 @@ exports[`VirtualizedMessageList should render the list without any message 1`] =
                   class="str-chat__empty-channel-text"
                   role="listitem"
                 >
-                  No chats here yet…
+                  Send a message to start the conversation
                 </p>
               </div>
             </div>

src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageListComponents.test.js.snap

@@ -42,7 +42,7 @@ exports[`VirtualizedMessageComponents EmptyPlaceholder should render for main me
       class="str-chat__empty-channel-text"
       role="listitem"
     >
-      No chats here yet…
+      Send a message to start the conversation
     </p>
   </div>
 </div>

src/i18n/de.json

@@ -244,6 +244,7 @@
   "Select up to {{count}}_one": "Bis zu {{count}} auswählen",
   "Select up to {{count}}_other": "Bis zu {{count}} auswählen",
   "Send": "Senden",
+  "Send a message to start the conversation": "Sende eine Nachricht, um die Unterhaltung zu starten",
   "Send Anyway": "Trotzdem senden",
   "Send message request failed": "Senden der Nachrichtenanfrage fehlgeschlagen",
   "Send poll": "Umfrage senden",

src/i18n/en.json

@@ -244,6 +244,7 @@
   "Select up to {{count}}_one": "Select up to {{count}}",
   "Select up to {{count}}_other": "Select up to {{count}}",
   "Send": "Send",
+  "Send a message to start the conversation": "Send a message to start the conversation",
   "Send Anyway": "Send Anyway",
   "Send message request failed": "Send message request failed",
   "Send poll": "Send poll",

src/i18n/es.json

@@ -253,6 +253,7 @@
   "Select up to {{count}}_many": "Selecciona hasta {{count}}",
   "Select up to {{count}}_other": "Selecciona hasta {{count}}",
   "Send": "Enviar",
+  "Send a message to start the conversation": "Envía un mensaje para iniciar la conversación",
   "Send Anyway": "Enviar de todos modos",
   "Send message request failed": "Error al enviar la solicitud de mensaje",
   "Send poll": "Enviar encuesta",

src/i18n/fr.json

@@ -253,6 +253,7 @@
   "Select up to {{count}}_many": "Sélectionner jusqu'à {{count}}",
   "Select up to {{count}}_other": "Sélectionner jusqu'à {{count}}",
   "Send": "Envoyer",
+  "Send a message to start the conversation": "Envoyez un message pour commencer la conversation",
   "Send Anyway": "Envoyer quand même",
   "Send message request failed": "Échec de la demande d'envoi de message",
   "Send poll": "Envoyer le sondage",