Merge pull request #552 from GetStream/message-bounce-flow

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) 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
 
@@ -25,7 +25,5 @@ The `Channel` component is a container component that displays the [`ChannelHead
 
 The `Channel` component doesn't do any settings, it's just displays its children components. The main purpose of this component is to provide the layout for the initial chat UI.
 
-If you want to create your own channel component check out our [customization guide](../concepts/customization.mdx) for more information.
-
 [//]: # "Start of generated content"
 [//]: # "End of generated content"

docusaurus/docs/Angular/components/ChannelComponent.mdx

@@ -0,0 +1,25 @@
+The edit message form displays a modal that's opened when a user edits a message. The component uses the [`MessageActionsService`](../../services/MessageActionsService) to know which message is being edited.
+
+By default this is displayed within the [`stream-channel` component](../../components/ChannelComponent).
+
+## Usage
+
+```typescript
+constructor(private messageActionsService: MessageActionsService) {
+  // Open the modal
+  this.messageActionsService.messageToEdit$(<stream message>);
+  // Close the modal
+  this.messageActionsService.messageToEdit$(undefined);
+}
+```
+
+```html
+<stream-edit-message-form></stream-edit-message-form>
+```
+
+## Customization
+
+You can provide your own custom component using the [`customTemplatesService.editMessageFormTemplate$` property](../../services/CustomTemplatesService/#editmessageformtemplate)
+
+[//]: # "Start of generated content"
+[//]: # "End of generated content"

docusaurus/docs/Angular/components/EditMessageFormComponent.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

@@ -0,0 +1 @@
+/Users/zitaszupera/.nvm/versions/node/v16.20.2/bin/../lib/node_modules/stream-chat-docusaurus-cli/shared

docusaurus/shared

@@ -117,7 +117,7 @@
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "4.7.2",
+    "@stream-io/stream-chat-css": "4.7.4",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "^1.4.0",
     "dayjs": "^1.10.7",

package-lock.json

@@ -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,