feat: redesign EmptyStateIndicator for channel message list

src/components/Channel/styling/Channel.scss

@@ -21,17 +21,6 @@
   }
 }
 
-.str-chat__empty-channel {
-  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 136);
-  @include utils.empty-layout;
-  position: relative;
-
-  .str-chat__empty-channel-notifications {
-    position: absolute;
-    inset-block-end: var(--str-chat__spacing-2);
-  }
-}
-
 .str-chat__loading-channel {
   $text-height: calc(var(--str-chat__spacing-px) * 16);
   height: 100%;
@@ -169,9 +158,6 @@
   /* The icon color used when no channel is selected */
   --str-chat__channel-empty-indicator-color: var(--str-chat__disabled-color);
 
-  /* The text color used when no channel is selected */
-  --str-chat__channel-empty-color: var(--str-chat__text-low-emphasis-color);
-
   /* The color of the loading indicator */
   --str-chat__channel-loading-state-color: var(--str-chat__disabled-color);
 }
@@ -180,16 +166,6 @@
   @include utils.component-layer-overrides('channel');
 }
 
-.str-chat__empty-channel {
-  --str-chat-icon-color: var(--str-chat__channel-empty-color);
-  @include utils.component-layer-overrides('channel');
-  @include utils.empty-theme('channel');
-
-  .str-chat__empty-channel-text {
-    color: var(--str-chat__channel-empty-color);
-  }
-}
-
 .str-chat__loading-channel {
   @include utils.loading-animation;
 

src/components/EmptyStateIndicator/EmptyStateIndicator.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { useTranslationContext } from '../../context/TranslationContext';
 import { ChatBubble } from './icons';
+import { IconBubble3ChatMessage } from '../Icons';
 
 export type EmptyStateIndicatorProps = {
   /** List Type: channel | message */
@@ -28,10 +29,10 @@ 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 />
+        <IconBubble3ChatMessage />
         <p className='str-chat__empty-channel-text' role='listitem'>
           {text}
         </p>

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,38 @@
+@use '../../../styling/utils';
+
+.str-chat {
+  /* The text color used when no channel is selected */
+  --str-chat__channel-empty-color: var(--text-secondary);
+}
+
+.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(--spacing-md);
+  position: relative;
+  gap: var(--spacing-xs);
+  text-align: center;
+  @include utils.component-layer-overrides('channel');
+  color: var(--text-secondary);
+  font: var(--str-chat__caption-default-text);
+
+  svg {
+    width: 32px;
+    height: 32px;
+    color: var(--str-chat-icon-color);
+  }
+
+  .str-chat__empty-channel-notifications {
+    position: absolute;
+    inset-block-end: var(--str-chat__spacing-2);
+  }
+
+  .str-chat__empty-channel-text {
+    margin: 0;
+    max-width: 160px;
+  }
+}

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

@@ -250,6 +250,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": "Senden Sie eine Nachricht, um die Unterhaltung zu beginnen",
   "Send Anyway": "Trotzdem senden",
   "Send message request failed": "Senden der Nachrichtenanfrage fehlgeschlagen",
   "Send poll": "Umfrage senden",

src/i18n/en.json

@@ -250,6 +250,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

@@ -259,6 +259,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

@@ -259,6 +259,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",

src/i18n/hi.json

@@ -251,6 +251,7 @@
   "Select up to {{count}}_one": "अधिकतम {{count}} तक चुनें",
   "Select up to {{count}}_other": "अधिकतम {{count}} तक चुनें",
   "Send": "भेजे",
+  "Send a message to start the conversation": "बातचीत शुरू करने के लिए संदेश भेजें",
   "Send Anyway": "वैसे भी भेजें",
   "Send message request failed": "संदेश भेजने का अनुरोध विफल रहा",
   "Send poll": "पोल भेजें",

src/i18n/it.json

@@ -259,6 +259,7 @@
   "Select up to {{count}}_many": "Seleziona fino a {{count}}",
   "Select up to {{count}}_other": "Seleziona fino a {{count}}",
   "Send": "Invia",
+  "Send a message to start the conversation": "Invia un messaggio per iniziare la conversazione",
   "Send Anyway": "Invia comunque",
   "Send message request failed": "Richiesta di invio messaggio non riuscita",
   "Send poll": "Invia sondaggio",

src/i18n/ja.json

@@ -250,6 +250,7 @@
   "Select up to {{count}}_one": "最大{{count}}まで選択",
   "Select up to {{count}}_other": "最大{{count}}まで選択",
   "Send": "送信",
+  "Send a message to start the conversation": "メッセージを送って会話を始めましょう",
   "Send Anyway": "とにかく送信する",
   "Send message request failed": "メッセージ送信リクエストが失敗しました",
   "Send poll": "アンケートを送信",

src/i18n/ko.json

@@ -250,6 +250,7 @@
   "Select up to {{count}}_one": "{{count}}개까지 선택",
   "Select up to {{count}}_other": "{{count}}개까지 선택",
   "Send": "보내다",
+  "Send a message to start the conversation": "대화를 시작하려면 메시지를 보내세요",
   "Send Anyway": "어쨌든 보내기",
   "Send message request failed": "메시지 보내기 요청 실패",
   "Send poll": "투표 보내기",

src/i18n/nl.json

@@ -250,6 +250,7 @@
   "Select up to {{count}}_one": "Selecteer tot {{count}}",
   "Select up to {{count}}_other": "Selecteer tot {{count}}",
   "Send": "Verstuur",
+  "Send a message to start the conversation": "Stuur een bericht om het gesprek te beginnen",
   "Send Anyway": "Toch versturen",
   "Send message request failed": "Verzoek om bericht te verzenden mislukt",
   "Send poll": "Peiling versturen",

src/i18n/pt.json

@@ -259,6 +259,7 @@
   "Select up to {{count}}_many": "Selecionar até {{count}}",
   "Select up to {{count}}_other": "Selecionar até {{count}}",
   "Send": "Enviar",
+  "Send a message to start the conversation": "Envie uma mensagem para iniciar a conversa",
   "Send Anyway": "Enviar de qualquer forma",
   "Send message request failed": "O pedido de envio da mensagem falhou",
   "Send poll": "Enviar enquete",

src/i18n/ru.json

@@ -268,6 +268,7 @@
   "Select up to {{count}}_many": "Выберите до {{count}}",
   "Select up to {{count}}_other": "Выберите до {{count}}",
   "Send": "Отправить",
+  "Send a message to start the conversation": "Отправьте сообщение, чтобы начать разговор",
   "Send Anyway": "Мне всё равно, отправить",
   "Send message request failed": "Не удалось отправить запрос на отправку сообщения",
   "Send poll": "Отправить опрос",

src/i18n/tr.json

@@ -250,6 +250,7 @@
   "Select up to {{count}}_one": "En fazla {{count}}'yi seçin",
   "Select up to {{count}}_other": "En fazla {{count}}'yi seçin",
   "Send": "Gönder",
+  "Send a message to start the conversation": "Sohbete başlamak için bir mesaj gönderin",
   "Send Anyway": "Yine de gönder",
   "Send message request failed": "Mesaj gönderme isteği başarısız oldu",
   "Send poll": "Anketi gönder",

src/styling/index.scss

@@ -28,6 +28,7 @@
 @use '../components/Channel/styling' as Channel;
 @use '../components/ChatView/styling' as ChatView;
 @use '../components/DateSeparator/styling' as DateSeparator;
+@use '../components/EmptyStateIndicator/styling' as EmptyStateIndicator;
 @use '../components/Gallery/styling' as Gallery;
 @use '../components/MediaRecorder/AudioRecorder/styling' as AudioRecorder;
 @use '../components/Message/styling' as Message;