Skip to content

Commit 45c8caa

Browse files
szuperazszuperaz
committed
feat: Implement message edit and delete #125 
1 parent 339416d commit 45c8caa

55 files changed

Lines changed: 2330 additions & 813 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docusaurus/docs/Angular/assets/attachment-preview-list-screenshot.png‎

126 KB
Loading

‎docusaurus/docs/Angular/components/attachment-preview-list.mdx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
id: attachment-preview-list
3+
sidebar_position: 3
4+
title: Attachment previews
5+
---
6+
7+
import Screenshot from "../assets/attachment-preview-list-screenshot.png";
8+
9+
The `AttachmentPreviewList` compontent displays a preview of the attachments uploaded to a message. Users can delete attachments using the preview component, or retry upload if it failed previously.
10+
11+
**Example 1** - attachment previews
12+
13+
<img src={Screenshot} width="1000" />
14+
15+
## Basic Usage
16+
17+
A typical use case for the `AttachmentPreviewList` component would be to use in your custom components that will completely override the message input component.
18+
19+
**Example 1** - a basic example:
20+
21+
```typescript
22+
@Component({
23+
selector: "app-custom-message-input",
24+
template: `
25+
<stream-attachment-preview-list></stream-attachment-list>
26+
<!-- Other parts of the custom message input component -->
27+
`,
28+
})
29+
export class CustomMessageInputComponent {}
30+
```
31+
32+
The `AttachmentPreviewList` uses the [`AttachmentService`](../services/attachment.mdx) to display the attachment previews.

‎docusaurus/docs/Angular/components/channel-header.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
id: channel-header
3-
sidebar_position: 4
3+
sidebar_position: 5
44
title: Channel header
55
---
66

‎docusaurus/docs/Angular/components/channel-list.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
id: channel_list
3-
sidebar_position: 5
3+
sidebar_position: 6
44
title: Channel list
55
---
66

‎docusaurus/docs/Angular/components/channel-preview.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
id: channel-preview
3-
sidebar_position: 6
3+
sidebar_position: 7
44
title: Channel preview
55
---
66

‎docusaurus/docs/Angular/components/channel.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
id: channel
3-
sidebar_position: 3
3+
sidebar_position: 4
44
title: Channel
55
---
66

‎docusaurus/docs/Angular/components/icons.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
id: icon
3-
sidebar_position: 7
3+
sidebar_position: 8
44
title: Icons
55
---
66

‎docusaurus/docs/Angular/components/loading-indicator.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
id: loading-indicator
3-
sidebar_position: 8
3+
sidebar_position: 9
44
title: Loading indicator
55
---
66

‎docusaurus/docs/Angular/components/message-actions.mdx‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
11
---
22
id: message-actions
3-
sidebar_position: 10
3+
sidebar_position: 11
44
title: Message actions
55
---
66

77
import MessageActionsScreenshot from "../assets/message-actions-screenshot.png";
88

9-
The `MessageActionsBox` component displays a list of message actions (i.e edit), that can be opened or closed. The following actions are supported: [flag](https://getstream.io/chat/docs/javascript/moderation/?language=javascript). The following actions are accepted by the component, but not yet implemented: edit, delete or pin message and mute sender.
9+
The `MessageActionsBox` component displays a list of message actions (i.e edit), that can be opened or closed. The following actions are supported:
10+
11+
| Name | Description | Necessary channel capability |
12+
| ------------ | ---------------------------------------------------------------------------------------------------- | ---------------------------------------- |
13+
| `flag` | [Flags](https://getstream.io/chat/docs/javascript/moderation/?language=javascript) the given message | flag-message |
14+
| `edit` | Edits a message that belongs to the user | update-own-message or update-any-message |
15+
| `edit-any` | Edits any message | update-any-message |
16+
| `delete` | Deletes a message that belongs to the user | delete-own-message or delete-any-message |
17+
| `delete-any` | Deletes any message | delete-any-message |
18+
| `pin` | Not yet impelemented | - |
19+
| `quoute` | Not yet impelemented | - |
20+
| `mute` | Not yet impelemented | - |
1021

1122
**Example 1** - example message actions with the message component:
1223

@@ -23,6 +34,7 @@ A typical use case for the `MessageActionsBox` component would be to use in your
2334
<stream-message-actions-box
2435
[isOpen]="isActionBoxOpen"
2536
[isMine]="isMessageSentByCurrentUser"
37+
[enabledActions]="actions"
2638
></stream-message-actions-box>
2739
<!-- Other parts of the custom message component -->
2840
`,
@@ -31,9 +43,18 @@ export class CustomMessageComponent {
3143
@Input() message: StreamMessage;
3244
isActionBoxOpen: boolean;
3345
isMessageSentByCurrentUser: boolean;
46+
actions = ["flag", "edit", "edit-any", "delete", "delete-any"];
3447
}
3548
```
3649

50+
:::important
51+
Currently it is not possible to provide a custom component for message edit.
52+
:::
53+
54+
:::important
55+
The `MessageActionBox` component doesn't check if the user has the necessary capabilities to perform a given aciton, it is done by the [`MessageList`](./message-list.mdx/#enabledmessageactions) component.
56+
:::
57+
3758
## Inputs
3859

3960
### <div class="label required basic">Required</div> message
@@ -65,3 +86,13 @@ The list of actions that are enabled. To disable all actions, provide an empty a
6586
| Type | Default |
6687
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
6788
| [`MessageAction`](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts)[] | [] |
89+
90+
## Outputs
91+
92+
### isEditing
93+
94+
An event which emits `true` if the edit message modal is open, and `false` when it is closed.
95+
96+
| Type |
97+
| ---------------------------------------------------------- |
98+
| [`EventEmitter`](https://angular.io/api/core/EventEmitter) |

‎docusaurus/docs/Angular/components/message-input.mdx‎

Lines changed: 60 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
22
id: message-input
3-
sidebar_position: 11
3+
sidebar_position: 12
44
title: Message input
55
---
66

7-
The `MessageInput` component displays an input where users can type their messages and upload files, and sends the message to the active channel.
7+
The `MessageInput` component displays an input where users can type their messages and upload files, and sends the message to the active channel. The component can be used to compose new messages or update existing ones.
88

99
## Customization
1010

@@ -20,7 +20,31 @@ If you want to create your own message input, here is how to use it:
2020
```
2121

2222
:::note
23-
If you want to create your own message input, you can use the [`ChannelService`](../services/channel.mdx) to send messages.
23+
If you want to create your own message input, you can use the following building blocks:
24+
25+
### Send and update messages
26+
27+
You can use [`ChannelService`](../services/channel.mdx) to send and update messages.
28+
29+
### File uploads
30+
31+
You can use the [`AttachmentService`](../services/attachment.mdx) to manage file uploads.
32+
33+
If more than one message input component can exist on your chat UI you should provide the `AttachmentService` on the component level:
34+
35+
```typescript
36+
@Component({
37+
selector: 'custom-message-input',
38+
templateUrl: './message-input.component.html',
39+
styles: [],
40+
providers: [AttachmentService],
41+
})
42+
```
43+
44+
:::
45+
46+
:::important
47+
Currently it is not possible to provide a custom component for message edit in the [`MessageActionsBox`](./message-actions.mdx) component. Please consider this limitation when creating your own custom message input.
2448
:::
2549

2650
## Inputs
@@ -29,22 +53,46 @@ If you want to create your own message input, you can use the [`ChannelService`]
2953

3054
If file upload is enabled, the user can open a file selector from the input. Please note that the user also needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
3155

32-
| Type | Default |
33-
| ------- | ------- |
34-
| boolean | true |
56+
If value not provided, it is set from the [`MessageInputConfigService`](../services/message-input-config.mdx).
57+
58+
| Type |
59+
| ------- |
60+
| boolean |
3561

3662
### acceptedFileTypes
3763

3864
You can narrow the accepted file types by providing the [accepted types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept). By default every file type is accepted.
3965

40-
| Type | Default |
41-
| ---------- | --------- |
42-
| `string[]` | undefined |
66+
If value not provided, it is set from the [`MessageInputConfigService`](../services/message-input-config.mdx).
67+
68+
| Type |
69+
| ---------- |
70+
| `string[]` |
4371

4472
### isMultipleFileUploadEnabled
4573

4674
If true, users can select multiple files to upload.
4775

48-
| Type | Default |
49-
| ------- | ------- |
50-
| boolean | true |
76+
If value not provided, it is set from the [`MessageInputConfigService`](../services/message-input-config.mdx).
77+
78+
| Type |
79+
| ------- |
80+
| boolean |
81+
82+
### message
83+
84+
The message to edit
85+
86+
| Type | Default |
87+
| ---------------------------------------------- | --------- |
88+
| [`StreamMessage`](../types/stream-message.mdx) | undefined |
89+
90+
## Outputs
91+
92+
### messageUpdate
93+
94+
Emits when a message was successfuly sent or updated
95+
96+
| Type |
97+
| ---------------------------------------------------------- |
98+
| [`EventEmitter`](https://angular.io/api/core/EventEmitter) |

0 commit comments

Comments
 (0)