feat: add MessageBouncePrompt styling

Author: MartinCupela

examples/vite/src/stream-imports-layout.scss

@@ -28,7 +28,7 @@
 @use 'stream-chat-react/dist/scss/v2/Location/Location-layout';
 //@use 'stream-chat-react/dist/scss/v2/Message/Message-layout';
 //@use 'stream-chat-react/dist/scss/v2/MessageActionsBox/MessageActionsBox-layout';
-@use 'stream-chat-react/dist/scss/v2/MessageBouncePrompt/MessageBouncePrompt-layout';
+//@use 'stream-chat-react/dist/scss/v2/MessageBouncePrompt/MessageBouncePrompt-layout';
 //@use 'stream-chat-react/dist/scss/v2/MessageInput/MessageInput-layout'; // X
 @use 'stream-chat-react/dist/scss/v2/MessageList/MessageList-layout';
 @use 'stream-chat-react/dist/scss/v2/MessageList/VirtualizedMessageList-layout';

examples/vite/src/stream-imports-theme.scss

@@ -23,7 +23,7 @@
 @use 'stream-chat-react/dist/scss/v2/Location/Location-theme';
 //@use 'stream-chat-react/dist/scss/v2/Message/Message-theme';
 //@use 'stream-chat-react/dist/scss/v2/MessageActionsBox/MessageActionsBox-theme';
-@use 'stream-chat-react/dist/scss/v2/MessageBouncePrompt/MessageBouncePrompt-theme';
+//@use 'stream-chat-react/dist/scss/v2/MessageBouncePrompt/MessageBouncePrompt-theme';
 @use 'stream-chat-react/dist/scss/v2/MessageList/MessageList-theme';
 @use 'stream-chat-react/dist/scss/v2/MessageList/VirtualizedMessageList-theme';
 // @use 'stream-chat-react/dist/scss/v2/MessageReactions/MessageReactions-theme';

src/components/MessageActions/hooks/useBaseMessageActionSetFilter.ts

@@ -43,6 +43,7 @@ export const useBaseMessageActionSetFilter = (
 
     // filter out all actions if any of these are true
     if (
+      isBounced ||
       isInitialMessage || // not sure whether this thing even works anymore
       !message.type ||
       message.type === 'system' ||
@@ -57,7 +58,7 @@ export const useBaseMessageActionSetFilter = (
         return false;
 
       // failed message menu has special treatment
-      if (isBounced || message.error) {
+      if (message.error) {
         return (
           (type === 'resendMessage' && canSendMessage && (allowRetry || isBounced)) ||
           (type === 'edit' && canEdit && isBounced) ||

src/components/MessageBounce/MessageBouncePrompt.tsx

@@ -4,6 +4,10 @@ import { useMessageBounceContext, useTranslationContext } from '../../context';
 import type { MouseEventHandler, PropsWithChildren } from 'react';
 
 import type { ModalProps } from '../Modal';
+import { Button } from '../Button';
+import clsx from 'clsx';
+import { IconExclamationCircle } from '../Icons';
+import { Prompt } from '../Dialog/base/Prompt';
 
 export type MessageBouncePromptProps = PropsWithChildren<Pick<ModalProps, 'onClose'>>;
 
@@ -22,34 +26,58 @@ export function MessageBouncePrompt({ children, onClose }: MessageBouncePromptPr
   }
 
   return (
-    <div className='str-chat__message-bounce-prompt' data-testid='message-bounce-prompt'>
-      <div className='str-chat__message-bounce-prompt-header'>
-        {children ?? t('This message did not meet our content guidelines')}
-      </div>
-      <div className='str-chat__message-bounce-actions'>
-        <button
-          className='str-chat__message-bounce-edit'
+    <Prompt.Root
+      className='str-chat__message-bounce-prompt'
+      data-testid='message-bounce-prompt'
+    >
+      <Prompt.Header
+        className='str-chat__message-bounce-prompt-header'
+        Icon={IconExclamationCircle}
+        title={
+          !children ? t('This message did not meet our content guidelines') : undefined
+        }
+      >
+        {children}
+      </Prompt.Header>
+      <Prompt.Actions className={'str-chat__message-bounce-actions'}>
+        <Button
+          className={clsx(
+            'str-chat__message-bounce-delete',
+            'str-chat__button--outline',
+            'str-chat__button--destructive',
+            'str-chat__button--size-md',
+          )}
+          data-testid='message-bounce-delete'
+          onClick={createHandler(handleDelete)}
+        >
+          {t('Delete')}
+        </Button>
+        <Button
+          className={clsx(
+            'str-chat__message-bounce-edit',
+            'str-chat__button--outline',
+            'str-chat__button--secondary',
+            'str-chat__button--size-md',
+          )}
           data-testid='message-bounce-edit'
           onClick={createHandler(handleEdit)}
           type='button'
         >
           {t('Edit Message')}
-        </button>
-        <button
-          className='str-chat__message-bounce-send'
+        </Button>
+        <Button
+          className={clsx(
+            'str-chat__message-bounce-send',
+            'str-chat__button--outline',
+            'str-chat__button--secondary',
+            'str-chat__button--size-md',
+          )}
           data-testid='message-bounce-send'
           onClick={createHandler(handleRetry)}
         >
           {t('Send Anyway')}
-        </button>
-        <button
-          className='str-chat__message-bounce-delete'
-          data-testid='message-bounce-delete'
-          onClick={createHandler(handleDelete)}
-        >
-          {t('Delete')}
-        </button>
-      </div>
-    </div>
+        </Button>
+      </Prompt.Actions>
+    </Prompt.Root>
   );
 }

src/components/MessageBounce/styling/MessageBouncePrompt.scss

@@ -0,0 +1,9 @@
+@use '../../../styling/utils';
+
+.str-chat__message-bounce-prompt {
+  max-width: 300px;
+
+  .str-chat__prompt-header svg.str-chat__icon--exclamation-circle {
+    color: var(--text-tertiary);
+  }
+}

src/components/MessageBounce/styling/index.scss

@@ -0,0 +1 @@
+@use "MessageBouncePrompt";

src/styling/_global-theme-variables.scss

@@ -41,6 +41,10 @@
     var(--typography-font-size-xs) / var(--typography-line-height-tight)
     var(--str-chat__font-family);
 
+  --str-chat__caption-default-text: normal var(--typography-font-weight-regular)
+  var(--typography-font-size-sm) / var(--typography-line-height-normal)
+  var(--str-chat__font-family);
+
   --str-chat__caption-emphasis-text: normal var(--typography-font-weight-semi-bold)
     var(--typography-font-size-sm) / var(--typography-line-height-tight)
     var(--str-chat__font-family);

src/styling/index.scss

@@ -33,6 +33,7 @@
 @use '../components/MediaRecorder/AudioRecorder/styling' as AudioRecorder;
 @use '../components/Message/styling' as Message;
 @use '../components/MessageActions/styling' as MessageActions;
+@use '../components/MessageBounce/styling' as MessageBounce;
 @use '../components/MessageInput/styling' as MessageComposer;
 @use '../components/Poll/styling' as Poll;
 @use '../components/Reactions/styling/ReactionList' as ReactionList;