feat: add "Voice message deleted" notification

src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx

@@ -1,9 +1,14 @@
 import { CheckSignIcon, LoadingIndicatorIcon } from '../../MessageComposer/icons';
 import { IconMicrophone, IconPause, IconTrashBin } from '../../Icons';
 import React from 'react';
-import { useMessageComposerContext } from '../../../context';
+import {
+  useChatContext,
+  useMessageComposerContext,
+  useTranslationContext,
+} from '../../../context';
 import { isRecording } from './recordingStateIdentity';
 import { Button } from '../../Button';
+import { addNotificationTargetTag, useNotificationTarget } from '../../Notifications';
 
 const ToggleRecordingButton = () => {
   const {
@@ -27,9 +32,13 @@ const ToggleRecordingButton = () => {
 };
 
 export const AudioRecorderRecordingControls = () => {
+  const { client } = useChatContext();
+  const { t } = useTranslationContext();
   const {
     recordingController: { completeRecording, recorder, recording, recordingState },
   } = useMessageComposerContext();
+  const panel = useNotificationTarget();
+
   const isUploadingFile = recording?.localMetadata?.uploadState === 'uploading';
 
   if (!recorder) return null;
@@ -43,7 +52,17 @@ export const AudioRecorderRecordingControls = () => {
           className='str-chat__audio_recorder__cancel-button'
           data-testid={'cancel-recording-audio-button'}
           disabled={isUploadingFile}
-          onClick={recorder.cancel}
+          onClick={() => {
+            recorder.cancel();
+            client.notifications.addInfo({
+              message: t('Voice message deleted'),
+              options: {
+                tags: addNotificationTargetTag(panel),
+                type: 'audioRecording:cancel:success',
+              },
+              origin: { emitter: 'AudioRecorder' },
+            });
+          }}
           size='sm'
           variant='secondary'
         >

src/components/Notifications/Notification.tsx

@@ -6,7 +6,6 @@ import { type Notification as NotificationType } from 'stream-chat';
 import {
   IconArrowRotateRightLeftRepeatRefresh,
   IconCheckmark2,
-  IconCircleInfoTooltip,
   IconCrossMedium,
   IconExclamationCircle,
   IconExclamationTriangle,
@@ -22,9 +21,9 @@ export type NotificationIconProps = {
   notification: NotificationType;
 };
 
-const IconsBySeverity: Record<NotificationSeverity, ComponentType> = {
+const IconsBySeverity: Record<NotificationSeverity, ComponentType | null> = {
   error: IconExclamationCircle,
-  info: IconCircleInfoTooltip,
+  info: null, // IconCircleInfoTooltip,
   loading: IconArrowRotateRightLeftRepeatRefresh,
   success: IconCheckmark2,
   warning: IconExclamationTriangle,
@@ -34,7 +33,13 @@ const DefaultNotificationIcon = ({ notification }: NotificationIconProps) => {
   if (!notification.severity) return null;
 
   const Icon = IconsBySeverity[notification.severity] ?? null;
-  return Icon && <Icon />;
+  return (
+    Icon && (
+      <div className='str-chat__notification-icon'>
+        <Icon />
+      </div>
+    )
+  );
 };
 
 export type NotificationProps = {
@@ -104,11 +109,7 @@ export const Notification = forwardRef<HTMLDivElement, NotificationProps>(
         ref={ref}
       >
         <div className='str-chat__notification-content'>
-          {Icon && (
-            <div className='str-chat__notification-icon'>
-              <Icon notification={notification} />
-            </div>
-          )}
+          {Icon && <Icon notification={notification} />}
           <div className='str-chat__notification-message'>{displayMessage}</div>
         </div>
         {notification.actions && notification.actions.length > 0 && (

src/components/Notifications/styling/Notification.scss

@@ -1,7 +1,7 @@
 .str-chat__notification {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xxs);
+  gap: var(--spacing-xs);
   min-height: 48px;
   min-width: 200px;
   max-width: 100%;
@@ -21,7 +21,6 @@
     display: flex;
     flex: 1 1 auto;
     gap: var(--spacing-xs);
-    min-width: 0;
 
     .str-chat__notification-icon {
       display: flex;
@@ -38,7 +37,8 @@
       flex: 1 1 auto;
       padding-block: var(--spacing-xxxs);
       font: var(--str-chat__caption-default-text);
-      min-width: 0;
+      text-align: center;
+      white-space: nowrap;
     }
   }
 

src/i18n/de.json

@@ -445,6 +445,7 @@
   "View translation": "Übersetzung anzeigen",
   "Voice message": "Sprachnachricht",
   "Voice message {{ duration }}": "Sprachnachricht {{ duration }}",
+  "Voice message deleted": "Sprachnachricht gelöscht",
   "voiceMessageCount_one": "Sprachnachricht",
   "voiceMessageCount_other": "{{ count }} sprachnachrichten",
   "Vote ended": "Abstimmung beendet",

src/i18n/en.json

@@ -445,6 +445,7 @@
   "View translation": "View translation",
   "Voice message": "Voice message",
   "Voice message {{ duration }}": "Voice message {{ duration }}",
+  "Voice message deleted": "Voice message deleted",
   "voiceMessageCount_one": "Voice message",
   "voiceMessageCount_other": "{{ count }} voice messages",
   "Vote ended": "Vote ended",

src/i18n/es.json

@@ -463,6 +463,7 @@
   "View translation": "Ver traducción",
   "Voice message": "Mensaje de voz",
   "Voice message {{ duration }}": "Mensaje de voz {{ duration }}",
+  "Voice message deleted": "Mensaje de voz eliminado",
   "voiceMessageCount_one": "Mensaje de voz",
   "voiceMessageCount_many": "{{ count }} mensajes de voz",
   "voiceMessageCount_other": "{{ count }} mensajes de voz",

src/i18n/fr.json

@@ -463,6 +463,7 @@
   "View translation": "Voir la traduction",
   "Voice message": "Message vocal",
   "Voice message {{ duration }}": "Message vocal {{ duration }}",
+  "Voice message deleted": "Message vocal supprimé",
   "voiceMessageCount_one": "Mémo vocal",
   "voiceMessageCount_many": "{{ count }} mémos vocaux",
   "voiceMessageCount_other": "{{ count }} mémos vocaux",

src/i18n/hi.json

@@ -446,6 +446,7 @@
   "View translation": "अनुवाद देखें",
   "Voice message": "आवाज संदेश",
   "Voice message {{ duration }}": "वॉइस संदेश {{ duration }}",
+  "Voice message deleted": "वॉइस संदेश हटा दिया गया",
   "voiceMessageCount_one": "1 ध्वनि संदेश",
   "voiceMessageCount_other": "{{ count }} ध्वनि संदेश",
   "Vote ended": "मतदान समाप्त",

src/i18n/it.json

@@ -463,6 +463,7 @@
   "View translation": "Visualizza traduzione",
   "Voice message": "Messaggio vocale",
   "Voice message {{ duration }}": "Messaggio vocale {{ duration }}",
+  "Voice message deleted": "Messaggio vocale eliminato",
   "voiceMessageCount_one": "Messaggio vocale",
   "voiceMessageCount_many": "{{ count }} messaggi vocali",
   "voiceMessageCount_other": "{{ count }} messaggi vocali",

src/i18n/ja.json

@@ -438,6 +438,7 @@
   "View translation": "翻訳を表示",
   "Voice message": "ボイスメッセージ",
   "Voice message {{ duration }}": "ボイスメッセージ {{ duration }}",
+  "Voice message deleted": "ボイスメッセージが削除されました",
   "voiceMessageCount_other": "{{ count }}件のボイスメッセージ",
   "Vote ended": "投票が終了しました",
   "Votes": "投票",

src/i18n/ko.json

@@ -438,6 +438,7 @@
   "View translation": "번역 보기",
   "Voice message": "음성 메시지",
   "Voice message {{ duration }}": "음성 메시지 {{ duration }}",
+  "Voice message deleted": "음성 메시지가 삭제됨",
   "voiceMessageCount_other": "음성 메시지 {{ count }}개",
   "Vote ended": "투표 종료",
   "Votes": "투표",

src/i18n/nl.json

@@ -447,6 +447,7 @@
   "View translation": "Vertaling bekijken",
   "Voice message": "Spraakbericht",
   "Voice message {{ duration }}": "Spraakbericht {{ duration }}",
+  "Voice message deleted": "Spraakbericht verwijderd",
   "voiceMessageCount_one": "Spraakbericht",
   "voiceMessageCount_other": "{{ count }} spraakberichten",
   "Vote ended": "Stemmen beëindigd",

src/i18n/pt.json

@@ -463,6 +463,7 @@
   "View translation": "Ver tradução",
   "Voice message": "Mensagem de voz",
   "Voice message {{ duration }}": "Mensagem de voz {{ duration }}",
+  "Voice message deleted": "Mensagem de voz excluída",
   "voiceMessageCount_one": "Mensagem de voz",
   "voiceMessageCount_many": "{{ count }} mensagens de voz",
   "voiceMessageCount_other": "{{ count }} mensagens de voz",

src/i18n/ru.json

@@ -485,6 +485,7 @@
   "View translation": "Показать перевод",
   "Voice message": "Голосовое сообщение",
   "Voice message {{ duration }}": "Голосовое сообщение {{ duration }}",
+  "Voice message deleted": "Голосовое сообщение удалено",
   "voiceMessageCount_one": "{{ count }} голосовое сообщение",
   "voiceMessageCount_few": "{{ count }} голосовых сообщения",
   "voiceMessageCount_many": "{{ count }} голосовых сообщений",

src/i18n/tr.json

@@ -445,6 +445,7 @@
   "View translation": "Çeviriyi görüntüle",
   "Voice message": "Sesli mesaj",
   "Voice message {{ duration }}": "Sesli mesaj {{ duration }}",
+  "Voice message deleted": "Sesli mesaj silindi",
   "voiceMessageCount_one": "Sesli mesaj",
   "voiceMessageCount_other": "{{ count }} sesli mesaj",
   "Vote ended": "Oylama sona erdi",