feat: message bounce flow

Author: szuperaz

docusaurus/docs/Angular/assets/message-bounce-screenshot.png

@@ -1,4 +1,4 @@
-The `Channel` component is a container component that displays the [`ChannelHeader`](./ChannelHeaderComponent.mdx), [`MessageList`](./MessageListComponent.mdx), [`NotificationList`](./NotificationListComponent.mdx), [`EditMessageForm`](./EditMessageFormComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components. You can also provide the [`Thread`](./ThreadComponent.mdx) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
+The `Channel` component is a container component that displays the [`ChannelHeader`](./ChannelHeaderComponent.mdx), [`MessageList`](./MessageListComponent.mdx), [`NotificationList`](./NotificationListComponent.mdx), [`EditMessageForm`](./EditMessageFormComponent.mdx), [`MessageBouncePrompt`](./MessageBouncePromptComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components. You can also provide the [`Thread`](./ThreadComponent.mdx) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
 
 ## Usage
 

docusaurus/docs/Angular/components/ChannelComponent.mdx

@@ -0,0 +1,40 @@
+import Screenshot from "../assets/message-bounce-screenshot.png";
+
+The component watches for the [`channelService.bouncedMessage$` stream](../../services/ChannelService/#bouncedmessage) and opens the bounce modal if a message is emitted.
+
+To bounce messages, you need to set up [semantic filters for moderation](https://getstream.io/automated-moderation/docs/automod_configuration/?q=semantic%20filters).
+
+## Usage
+
+To bounce messages, you need to set up [semantic filters for moderation](https://getstream.io/automated-moderation/docs/automod_configuration/?q=semantic%20filters).
+
+When a user tries to send a message that voilates the content guidelines set up by the semantic filter the `StreamMessage` object will have the following format:
+
+- `type` will be `error`
+- the `moderation_details` property will contain the details of the error
+
+The built-in [message component](../../components/MessageComponent) will open the bounce prompt when a bounced message is clicked. If you have a custom UI, this is how you can do that:
+
+```typescript
+constructor(private channelService: ChannelService) {
+  // Open the modal
+  this.messageActionsService.bouncedMessage$(<stream message>);
+  // Close the modal
+  this.messageActionsService.bouncedMessage$(undefined);
+}
+```
+
+The built-in [channel component](../../components/ChannelComponent) displays the `stream-message-bounce-prompt` component. If you have a custom UI, this is how you can do that:
+
+```html
+<stream-message-bounce-prompt></stream-message-bounce-prompt>
+```
+
+<img src={Screenshot} width="1000" />
+
+## Customization
+
+You can provide your own custom component using the [`customTemplatesService.messageBouncePromptTemplate$` property](../../services/CustomTemplatesService/#messagebounceprompttemplate)
+
+[//]: # "Start of generated content"
+[//]: # "End of generated content"

docusaurus/docs/Angular/components/MessageBouncePromptComponent.mdx

@@ -12,7 +12,6 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart';
 import { MessageActionComponent } from './message-action/message-action.component';
 import { ThreadHeaderComponent } from './thread-header/thread-header.component';
 import { IconComponent } from './icon/icon.component';
-import { MessageActionsComponent } from './message-actions/message-actions.component';
 
 @NgModule({
   declarations: [
@@ -21,7 +20,6 @@ import { MessageActionsComponent } from './message-actions/message-actions.compo
     MessageActionComponent,
     ThreadHeaderComponent,
     IconComponent,
-    MessageActionsComponent,
   ],
   imports: [
     BrowserModule,

projects/customizations-example/src/app/app.module.ts

@@ -114,5 +114,8 @@ export const en = {
     'Unread messages': 'Unread messages',
     '{{count}} unread messages': '{{count}} unread messages',
     '{{count}} unread message': '{{count}} unread message',
+    'This message did not meet our content guidelines':
+      'This message did not meet our content guidelines',
+    'Send Anyway': 'Send Anyway',
   },
 };

projects/customizations-example/src/app/message-actions/message-actions.component.html

@@ -9,6 +9,7 @@ import {
   ChannelSort,
   Event,
   FormatMessageResponse,
+  Message,
   ReactionResponse,
   SendMessageAPIResponse,
   UserResponse,
@@ -1349,6 +1350,28 @@ describe('ChannelService', () => {
     expect(mockChatClient.updateMessage).toHaveBeenCalledWith(message);
   });
 
+  it('should resend instead of update if message was bounced', async () => {
+    await init();
+    const message = mockMessage();
+    const channel = service.activeChannel!;
+    spyOn(channel, 'sendMessage');
+    message.moderation_details = {
+      original_text: 'Ricciardo should retire',
+      action: 'MESSAGE_RESPONSE_ACTION_BOUNCE',
+      harms: [
+        {
+          name: 'hammurabi_filter',
+          phrase_list_ids: [139],
+        },
+      ],
+      error_msg: 'this message did not meet our content guidelines',
+    };
+    void service.updateMessage(message);
+
+    expect(mockChatClient.updateMessage).not.toHaveBeenCalledWith();
+    expect(channel.sendMessage).not.toHaveBeenCalledWith(message as Message);
+  });
+
   it('should update message - #beforeUpdateMessage is provided', async () => {
     const message = mockMessage();
     mockChatClient.updateMessage.and.resolveTo({ message });
@@ -1375,11 +1398,29 @@ describe('ChannelService', () => {
     expect(mockChatClient.updateMessage).toHaveBeenCalledWith(message);
   });
 
-  it('should delete message', () => {
+  it('should delete message', async () => {
+    await init();
+    const channel = service.activeChannel;
+    spyOn(channel!.state, 'removeMessage');
     const message = mockMessage();
     void service.deleteMessage(message);
 
     expect(mockChatClient.deleteMessage).toHaveBeenCalledWith(message.id);
+    expect(channel!.state.removeMessage).not.toHaveBeenCalled();
+  });
+
+  it('should delete message - local', async () => {
+    await init();
+    const message = mockMessage();
+    const channel = service.activeChannel;
+    spyOn(channel!.state, 'removeMessage');
+    void service.deleteMessage(message, true);
+
+    expect(mockChatClient.deleteMessage).not.toHaveBeenCalledWith();
+    expect(channel!.state.removeMessage).toHaveBeenCalledWith({
+      id: message.id,
+      parent_id: undefined,
+    });
   });
 
   it(`should call #messageDeleteConfirmationHandler is that's provided`, async () => {