feat: refactor message menu UI

BREAKING CHANGE: You can find the list of breaking changes in the docs: - https://getstream.io/chat/docs/sdk/angular/5/basics/upgrade-v4/#new-message-menu-ui - https://getstream.io/chat/docs/sdk/angular/5/basics/upgrade-v4/#type-changes
GetStream · Jun 18, 2024 · 0706f72 · 0706f72
1 parent 4dc5f09
commit 0706f72
Show file tree

Hide file tree

Showing 68 changed files with 1,433 additions and 1,004 deletions.
diff --git a/docusaurus/angular_versioned_docs/version-5/assets/message-menu-after-desktop.png b/docusaurus/angular_versioned_docs/version-5/assets/message-menu-after-desktop.png
diff --git a/docusaurus/angular_versioned_docs/version-5/assets/message-menu-after-mobile.png b/docusaurus/angular_versioned_docs/version-5/assets/message-menu-after-mobile.png
diff --git a/docusaurus/angular_versioned_docs/version-5/assets/message-menu-before.png b/docusaurus/angular_versioned_docs/version-5/assets/message-menu-before.png
diff --git a/...gular_versioned_docs/version-5/assets/message-reactions-selector-screenshot.png b/...gular_versioned_docs/version-5/assets/message-reactions-selector-screenshot.png
diff --git a/docusaurus/angular_versioned_docs/version-5/basics/upgrade-v4.mdx b/docusaurus/angular_versioned_docs/version-5/basics/upgrade-v4.mdx
@@ -5,6 +5,10 @@ title: Upgrade from v4
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
+import MessageMenuBefore from "../assets/message-menu-before.png";
+import MessageMenuAfterDesktop from "../assets/message-menu-after-desktop.png";
+import MessageMenuAfterMobile from "../assets/message-menu-after-mobile.png";
+import ImageShowcase from "@site/src/components/ImageShowcase";
 
 ## Highlights
 
@@ -69,6 +73,49 @@ No futher action is required for customers who were already using theme-v2.
 
 Customers who used to use theme-v1 now need to use theme-v2. Updating from theme-v1 to theme-v2 will require to rewrite your custom CSS code as the new theme has a new variable system, and all the components were restructured. To help you get started please refer our [theming guide](../theming/introduction.mdx).
 
+### New message menu UI
+
+The old message menu UI caused usability issues on mobile devices. The new UI address these issues, and adds some other improvements as well.
+
+<ImageShowcase
+  border
+  items={[
+    {
+      image: MessageMenuBefore,
+      caption:
+        "Before (mobile) - Opening message menu or an image attachment used to take two taps",
+      alt: "Message menu - before",
+    },
+    {
+      image: MessageMenuAfterMobile,
+      caption:
+        "After (mobile) - Message menu is triggered by long press anywhere in the message bubble (attachment or the blue area), no more double tap required for opening image attachments",
+      alt: "Message menu - after",
+    },
+  ]}
+/>
+
+<ImageShowcase
+  border
+  items={[
+    {
+      image: MessageMenuBefore,
+      caption: "Before (desktop)",
+      alt: "Message menu - before",
+    },
+    {
+      image: MessageMenuAfterDesktop,
+      caption: "After (desktop)",
+      alt: "Message menu - after",
+    },
+  ]}
+/>
+
+With the new UI these component-level changes are introduced:
+
+- The [`MessageListComponent`](../../components/MessageListComponent) no longer supports the `messageOptionsTrigger` parameter as this was a workaround for mobile UX problems. On desktop devices the message menu will be triggered by hovering anywhere in the message area. On mobile devices the message menu will be triggered by a longpress insde the message bubble area.
+- The [`MessageReactionsComponent`](../../components/MessageReactionsComponent) was split into two components. The `MessageReactionsComponent` is only responsible for displaying the existing reactions, and with that the `isSelectorOpen` input and `isSelectorOpenChange` output was removed. The [`MessageReactionsSelector`](../../components/MessageReactionsSelectorComponent) is a new component, that's responsible for adding/removing message reactions.
+
 ### Removed deprecated features
 
 #### `MessageListComponent`
@@ -116,6 +163,8 @@ In previous versions if an error occured during channel load, the `channelServic
 
 - Event handlers with `Function` type are changed to `() => void`
 - Event handlers with `any` return types are changed to `void` return type
+- The action handler signature of (custom) message actions was changed from `(message: StreamMessage, isMine: boolean) => void` to `(message: StreamMessage, extraParams: MessageActionHandlerExtraParams) => void`. The `isMine` flag is part of the `MessageActionHandlerExtraParams` object.
+- The `MessageActionBoxItemContext` is changed, `isMine` is removed, and `params: MessageActionHandlerExtraParams` is added. The `isMine` flag is part of the `MessageActionHandlerExtraParams` object.
 
 ### Default reactions
 

diff --git a/docusaurus/angular_versioned_docs/version-5/components/AttachmentListComponent.mdx b/docusaurus/angular_versioned_docs/version-5/components/AttachmentListComponent.mdx
@@ -122,7 +122,7 @@ The id of the message the attachments belong to
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L39)
+[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L39)
 
 ---
 
@@ -134,7 +134,7 @@ The parent id of the message the attachments belong to
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L43)
+[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L43)
 
 ---
 
@@ -146,7 +146,7 @@ The attachments to display
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L47)
+[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L47)
 
 ---
 
@@ -158,6 +158,6 @@ Emits the state of the image carousel window
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L51)
+[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L51)
 
 [//]: # "End of generated content"
diff --git a/.../angular_versioned_docs/version-5/components/AttachmentPreviewListComponent.mdx b/.../angular_versioned_docs/version-5/components/AttachmentPreviewListComponent.mdx
@@ -47,7 +47,7 @@ A stream that emits the current file uploads and their states
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L17)
+[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L17)
 
 ---
 
@@ -59,7 +59,7 @@ An output to notify the parent component if the user tries to retry a failed upl
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L21)
+[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L21)
 
 ---
 
@@ -71,6 +71,6 @@ An output to notify the parent component if the user wants to delete a file
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L25)
+[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L25)
 
 [//]: # "End of generated content"
diff --git a/...s/angular_versioned_docs/version-5/components/AutocompleteTextareaComponent.mdx b/...s/angular_versioned_docs/version-5/components/AutocompleteTextareaComponent.mdx
@@ -51,7 +51,7 @@ TextareaInterface.value
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49)
 
 ---
 
@@ -67,7 +67,7 @@ TextareaInterface.placeholder
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53)
 
 ---
 
@@ -83,7 +83,7 @@ TextareaInterface.areMentionsEnabled
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57)
 
 ---
 
@@ -99,7 +99,7 @@ TextareaInterface.inputMode
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61)
 
 ---
 
@@ -115,7 +115,7 @@ TextareaInterface.mentionScope
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65)
 
 ---
 
@@ -131,7 +131,7 @@ TextareaInterface.autoFocus
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69)
 
 ---
 
@@ -147,7 +147,7 @@ TextareaInterface.valueChange
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73)
 
 ---
 
@@ -163,7 +163,7 @@ TextareaInterface.send
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77)
 
 ---
 
@@ -179,6 +179,6 @@ TextareaInterface.userMentions
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81)
 
 [//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-5/components/AvatarComponent.mdx b/docusaurus/angular_versioned_docs/version-5/components/AvatarComponent.mdx
@@ -71,7 +71,7 @@ An optional name of the image, used for fallback image or image title (if `image
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L35)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L35)
 
 ---
 
@@ -83,7 +83,7 @@ The URL of the image to be displayed. If the image can't be displayed the first
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L39)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L39)
 
 ---
 
@@ -95,7 +95,7 @@ The location the avatar will be displayed in
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L43)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L43)
 
 ---
 
@@ -107,7 +107,7 @@ The channel the avatar belongs to (if avatar of a channel is displayed)
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L47)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L47)
 
 ---
 
@@ -119,7 +119,7 @@ The user the avatar belongs to (if avatar of a user is displayed)
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L51)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L51)
 
 ---
 
@@ -131,7 +131,7 @@ The type of the avatar: channel if channel avatar is displayed, user if user ava
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L55)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L55)
 
 ---
 
@@ -143,7 +143,7 @@ If a channel avatar is displayed, and if the channel has exactly two members a g
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L59)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L59)
 
 ---
 
@@ -155,6 +155,6 @@ If channel/user image isn't provided the initials of the name of the channel/use
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/55bec1e16d44cb13904192a075905e7e4dcb08b3/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L63)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L63)
 
 [//]: # "End of generated content"