stream-chat-angular 2.13.1 → 2.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/version.d.ts +1 -1
- package/bundles/stream-chat-angular.umd.js +472 -134
- package/bundles/stream-chat-angular.umd.js.map +1 -1
- package/esm2015/assets/version.js +2 -2
- package/esm2015/lib/attachment-list/attachment-list.component.js +7 -1
- package/esm2015/lib/attachment-preview-list/attachment-preview-list.component.js +4 -1
- package/esm2015/lib/attachment.service.js +1 -1
- package/esm2015/lib/avatar/avatar.component.js +7 -1
- package/esm2015/lib/channel/channel.component.js +4 -1
- package/esm2015/lib/channel-header/channel-header.component.js +4 -1
- package/esm2015/lib/channel-list/channel-list.component.js +4 -1
- package/esm2015/lib/channel-preview/channel-preview.component.js +4 -1
- package/esm2015/lib/channel.service.js +89 -3
- package/esm2015/lib/icon/icon.component.js +4 -1
- package/esm2015/lib/loading-indicator/loading-indicator.component.js +10 -1
- package/esm2015/lib/message/message.component.js +10 -1
- package/esm2015/lib/message-actions-box/message-actions-box.component.js +19 -1
- package/esm2015/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.js +22 -1
- package/esm2015/lib/message-input/emoji-input.service.js +3 -3
- package/esm2015/lib/message-input/message-input-config.service.js +2 -2
- package/esm2015/lib/message-input/message-input.component.js +74 -10
- package/esm2015/lib/message-input/textarea/textarea.component.js +13 -1
- package/esm2015/lib/message-list/message-list.component.js +26 -7
- package/esm2015/lib/message-reactions/message-reactions.component.js +22 -4
- package/esm2015/lib/modal/modal.component.js +10 -1
- package/esm2015/lib/notification/notification.component.js +4 -1
- package/esm2015/lib/notification-list/notification-list.component.js +4 -1
- package/esm2015/lib/notification.service.js +2 -2
- package/esm2015/lib/thread/thread.component.js +4 -1
- package/fesm2015/stream-chat-angular.js +339 -37
- package/fesm2015/stream-chat-angular.js.map +1 -1
- package/lib/attachment-list/attachment-list.component.d.ts +9 -0
- package/lib/attachment-preview-list/attachment-preview-list.component.d.ts +3 -0
- package/lib/attachment.service.d.ts +1 -1
- package/lib/avatar/avatar.component.d.ts +12 -0
- package/lib/channel/channel.component.d.ts +3 -0
- package/lib/channel-header/channel-header.component.d.ts +3 -0
- package/lib/channel-list/channel-list.component.d.ts +6 -0
- package/lib/channel-preview/channel-preview.component.d.ts +6 -0
- package/lib/channel.service.d.ts +34 -1
- package/lib/icon/icon.component.d.ts +9 -0
- package/lib/loading-indicator/loading-indicator.component.d.ts +9 -0
- package/lib/message/message.component.d.ts +27 -3
- package/lib/message-actions-box/message-actions-box.component.d.ts +24 -0
- package/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.d.ts +27 -0
- package/lib/message-input/emoji-input.service.d.ts +2 -2
- package/lib/message-input/message-input-config.service.d.ts +1 -1
- package/lib/message-input/message-input.component.d.ts +44 -2
- package/lib/message-input/textarea/textarea.component.d.ts +12 -0
- package/lib/message-list/message-list.component.d.ts +30 -4
- package/lib/message-reactions/message-reactions.component.d.ts +22 -1
- package/lib/modal/modal.component.d.ts +9 -0
- package/lib/notification/notification.component.d.ts +6 -0
- package/lib/notification-list/notification-list.component.d.ts +3 -0
- package/lib/notification.service.d.ts +1 -1
- package/lib/thread/thread.component.d.ts +3 -0
- package/package.json +1 -1
- package/src/assets/version.ts +1 -1
|
@@ -4,10 +4,19 @@ import { ImageLoadService } from '../message-list/image-load.service';
|
|
|
4
4
|
import { DefaultAttachmentType } from '../types';
|
|
5
5
|
import { ChannelService } from '../channel.service';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
|
+
/**
|
|
8
|
+
* The `AttachmentList` compontent displays the attachments of a message
|
|
9
|
+
*/
|
|
7
10
|
export declare class AttachmentListComponent implements OnChanges {
|
|
8
11
|
private imageLoadService;
|
|
9
12
|
private channelService;
|
|
13
|
+
/**
|
|
14
|
+
* The id of the message the attachments belong to
|
|
15
|
+
*/
|
|
10
16
|
messageId: string | undefined;
|
|
17
|
+
/**
|
|
18
|
+
* The attachments to display
|
|
19
|
+
*/
|
|
11
20
|
attachments: Attachment<DefaultAttachmentType>[];
|
|
12
21
|
orderedAttachments: Attachment<DefaultAttachmentType>[];
|
|
13
22
|
constructor(imageLoadService: ImageLoadService, channelService: ChannelService);
|
|
@@ -2,6 +2,9 @@ import { Observable } from 'rxjs';
|
|
|
2
2
|
import { AttachmentService } from '../attachment.service';
|
|
3
3
|
import { AttachmentUpload } from '../types';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
|
+
/**
|
|
6
|
+
* 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.
|
|
7
|
+
*/
|
|
5
8
|
export declare class AttachmentPreviewListComponent {
|
|
6
9
|
private attachmentService;
|
|
7
10
|
attachmentUploads$: Observable<AttachmentUpload[]>;
|
|
@@ -15,7 +15,7 @@ export declare class AttachmentService {
|
|
|
15
15
|
*/
|
|
16
16
|
attachmentUploadInProgressCounter$: Observable<number>;
|
|
17
17
|
/**
|
|
18
|
-
* Emits the state of the uploads ([`AttachmentUpload[]`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts)), it adds a state (`success`, `error` or `uploading`) to each file the user selects for upload. It is used by the [`AttachmentPreviewList`](../components/
|
|
18
|
+
* Emits the state of the uploads ([`AttachmentUpload[]`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts)), it adds a state (`success`, `error` or `uploading`) to each file the user selects for upload. It is used by the [`AttachmentPreviewList`](../components/AttachmentPreviewListComponent.mdx) to display the attachment previews.
|
|
19
19
|
*/
|
|
20
20
|
attachmentUploads$: Observable<AttachmentUpload[]>;
|
|
21
21
|
private attachmentUploadInProgressCounterSubject;
|
|
@@ -1,7 +1,19 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
|
+
/**
|
|
3
|
+
* The `Avatar` component displays the provided image, with fallback to the first letter of the optional name input.
|
|
4
|
+
*/
|
|
2
5
|
export declare class AvatarComponent {
|
|
6
|
+
/**
|
|
7
|
+
* An optional name of the image, used for fallback image or image title (if `imageUrl` is provided)
|
|
8
|
+
*/
|
|
3
9
|
name: string | undefined;
|
|
10
|
+
/**
|
|
11
|
+
* The URL of the image to be displayed. If the image can't be displayed the first letter of the name input is displayed.
|
|
12
|
+
*/
|
|
4
13
|
imageUrl: string | undefined;
|
|
14
|
+
/**
|
|
15
|
+
* The size in pixels of the avatar image.
|
|
16
|
+
*/
|
|
5
17
|
size: number;
|
|
6
18
|
isLoaded: boolean;
|
|
7
19
|
isError: boolean;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { Observable, Subscription } from 'rxjs';
|
|
2
2
|
import { ChannelService } from '../channel.service';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
|
+
/**
|
|
5
|
+
* 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).
|
|
6
|
+
*/
|
|
4
7
|
export declare class ChannelComponent {
|
|
5
8
|
private channelService;
|
|
6
9
|
isError$: Observable<boolean>;
|
|
@@ -2,6 +2,9 @@ import { Channel } from 'stream-chat';
|
|
|
2
2
|
import { ChannelListToggleService } from '../channel-list/channel-list-toggle.service';
|
|
3
3
|
import { ChannelService } from '../channel.service';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
|
+
/**
|
|
6
|
+
* The `ChannelHeader` component displays the avatar and name of the currently active channel along with member and watcher information. You can read about [the difference between members and watchers](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript#watchers-vs-members) in the platform documentation. Please note that number of watchers is only displayed if the user has [`connect-events` capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript)
|
|
7
|
+
*/
|
|
5
8
|
export declare class ChannelHeaderComponent {
|
|
6
9
|
private channelService;
|
|
7
10
|
private channelListToggleService;
|
|
@@ -4,9 +4,15 @@ import { Channel } from 'stream-chat';
|
|
|
4
4
|
import { ChannelService } from '../channel.service';
|
|
5
5
|
import { ChannelListToggleService } from './channel-list-toggle.service';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
|
+
/**
|
|
8
|
+
* The `ChannelList` component renders the list of channels.
|
|
9
|
+
*/
|
|
7
10
|
export declare class ChannelListComponent implements AfterViewInit {
|
|
8
11
|
private channelService;
|
|
9
12
|
private channelListToggleService;
|
|
13
|
+
/**
|
|
14
|
+
* By default, the [default preview component](./ChannelPreviewComponent.mdx) is used. To change the contents of the channel list, [provide your own custom template](./ChannelPreviewComponent.mdx/#customization).
|
|
15
|
+
*/
|
|
10
16
|
customChannelPreviewTemplate: TemplateRef<any> | undefined;
|
|
11
17
|
channels$: Observable<Channel[] | undefined>;
|
|
12
18
|
isError$: Observable<boolean>;
|
|
@@ -2,9 +2,15 @@ import { NgZone, OnDestroy, OnInit } from '@angular/core';
|
|
|
2
2
|
import { Channel } from 'stream-chat';
|
|
3
3
|
import { ChannelService } from '../channel.service';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
|
+
/**
|
|
6
|
+
* The `ChannelPreview` component displays a channel preview in the channel list, it consists of the image, name and latest message of the channel.
|
|
7
|
+
*/
|
|
5
8
|
export declare class ChannelPreviewComponent implements OnInit, OnDestroy {
|
|
6
9
|
private channelService;
|
|
7
10
|
private ngZone;
|
|
11
|
+
/**
|
|
12
|
+
* The channel to be displayed
|
|
13
|
+
*/
|
|
8
14
|
channel: Channel | undefined;
|
|
9
15
|
isActive: boolean;
|
|
10
16
|
isUnread: boolean;
|
package/lib/channel.service.d.ts
CHANGED
|
@@ -65,7 +65,24 @@ export declare class ChannelService {
|
|
|
65
65
|
* Emits the currently selected parent message. If no message is selected, it emits undefined.
|
|
66
66
|
*/
|
|
67
67
|
activeParentMessage$: Observable<StreamMessage | undefined>;
|
|
68
|
+
/**
|
|
69
|
+
* Emits the currently selected message to quote
|
|
70
|
+
*/
|
|
68
71
|
messageToQuote$: Observable<StreamMessage | undefined>;
|
|
72
|
+
/**
|
|
73
|
+
* Emits the list of users that are currently typing in the channel (current user is not included)
|
|
74
|
+
*/
|
|
75
|
+
usersTypingInChannel$: Observable<UserResponse[]>;
|
|
76
|
+
/**
|
|
77
|
+
* Emits the list of users that are currently typing in the active thread (current user is not included)
|
|
78
|
+
*/
|
|
79
|
+
usersTypingInThread$: Observable<UserResponse[]>;
|
|
80
|
+
/**
|
|
81
|
+
* Emits a map that contains the date of the latest message sent by the current user by channels (this is used to detect is slow mode countdown should be started)
|
|
82
|
+
*/
|
|
83
|
+
latestMessageDateByUserByChannels$: Observable<{
|
|
84
|
+
[key: string]: Date;
|
|
85
|
+
}>;
|
|
69
86
|
/**
|
|
70
87
|
* Custom event handler to call if a new message received from a channel that is not being watched, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
|
|
71
88
|
*/
|
|
@@ -109,11 +126,14 @@ export declare class ChannelService {
|
|
|
109
126
|
private activeChannelSubscriptions;
|
|
110
127
|
private activeParentMessageIdSubject;
|
|
111
128
|
private activeThreadMessagesSubject;
|
|
129
|
+
private latestMessageDateByUserByChannelsSubject;
|
|
112
130
|
private filters;
|
|
113
131
|
private sort;
|
|
114
132
|
private options;
|
|
115
133
|
private readonly messagePageSize;
|
|
116
134
|
private messageToQuoteSubject;
|
|
135
|
+
private usersTypingInChannelSubject;
|
|
136
|
+
private usersTypingInThreadSubject;
|
|
117
137
|
private channelListSetter;
|
|
118
138
|
private messageListSetter;
|
|
119
139
|
private threadListSetter;
|
|
@@ -145,7 +165,7 @@ export declare class ChannelService {
|
|
|
145
165
|
*/
|
|
146
166
|
init(filters: ChannelFilters, sort?: ChannelSort, options?: ChannelOptions): Promise<void>;
|
|
147
167
|
/**
|
|
148
|
-
* Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observables. Useful when disconnecting a chat user, use in combination with [`disconnectUser`](./
|
|
168
|
+
* Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observables. Useful when disconnecting a chat user, use in combination with [`disconnectUser`](./ChatClientService.mdx/#disconnectuser).
|
|
149
169
|
*/
|
|
150
170
|
reset(): void;
|
|
151
171
|
/**
|
|
@@ -224,6 +244,16 @@ export declare class ChannelService {
|
|
|
224
244
|
private addChannelFromNotification;
|
|
225
245
|
private removeFromChannelList;
|
|
226
246
|
private watchForActiveChannelEvents;
|
|
247
|
+
/**
|
|
248
|
+
* Call this method if user started typing in the active channel
|
|
249
|
+
* @param parentId The id of the parent message, if user is typing in a thread
|
|
250
|
+
*/
|
|
251
|
+
typingStarted(parentId?: string): Promise<void>;
|
|
252
|
+
/**
|
|
253
|
+
* Call this method if user stopped typing in the active channel
|
|
254
|
+
* @param parentId The id of the parent message, if user were typing in a thread
|
|
255
|
+
*/
|
|
256
|
+
typingStopped(parentId?: string): Promise<void>;
|
|
227
257
|
private messageUpdated;
|
|
228
258
|
private messageReactionEventReceived;
|
|
229
259
|
private formatMessage;
|
|
@@ -241,6 +271,9 @@ export declare class ChannelService {
|
|
|
241
271
|
private get channels();
|
|
242
272
|
private get canSendReadEvents();
|
|
243
273
|
private transformToStreamMessage;
|
|
274
|
+
private handleTypingStartEvent;
|
|
275
|
+
private handleTypingStopEvent;
|
|
276
|
+
private updateLatestMessages;
|
|
244
277
|
static ɵfac: i0.ɵɵFactoryDeclaration<ChannelService, never>;
|
|
245
278
|
static ɵprov: i0.ɵɵInjectableDeclaration<ChannelService>;
|
|
246
279
|
}
|
|
@@ -1,7 +1,16 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
2
|
export declare type Icon = 'action-icon' | 'delivered-icon' | 'reaction-icon' | 'connection-error' | 'send' | 'file-upload' | 'retry' | 'close' | 'file' | 'reply' | 'close-no-outline' | 'reply-in-thread';
|
|
3
|
+
/**
|
|
4
|
+
* The `Icon` component can be used to display different icons (i. e. message delivered icon).
|
|
5
|
+
*/
|
|
3
6
|
export declare class IconComponent {
|
|
7
|
+
/**
|
|
8
|
+
* The icon to display, the list of [supported icons](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/icon/icon.component.ts) can be found on GitHub.
|
|
9
|
+
*/
|
|
4
10
|
icon: Icon | undefined;
|
|
11
|
+
/**
|
|
12
|
+
* The size of the icon (in pixels)
|
|
13
|
+
*/
|
|
5
14
|
size: number | undefined;
|
|
6
15
|
constructor();
|
|
7
16
|
static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
|
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
|
+
/**
|
|
3
|
+
* The `LoadingIndicator` component displays a spinner to indicate that an action is in progress.
|
|
4
|
+
*/
|
|
2
5
|
export declare class LoadingIndicatorComponent {
|
|
6
|
+
/**
|
|
7
|
+
* The size of the indicator (in pixels)
|
|
8
|
+
*/
|
|
3
9
|
size: number;
|
|
10
|
+
/**
|
|
11
|
+
* The color of the indicator
|
|
12
|
+
*/
|
|
4
13
|
color: string;
|
|
5
14
|
constructor();
|
|
6
15
|
static ɵfac: i0.ɵɵFactoryDeclaration<LoadingIndicatorComponent, never>;
|
|
@@ -9,26 +9,50 @@ declare type MessagePart = {
|
|
|
9
9
|
type: 'text' | 'mention';
|
|
10
10
|
user?: UserResponse;
|
|
11
11
|
};
|
|
12
|
+
/**
|
|
13
|
+
* The `Message` component displays a message with additional information such as sender and date, and enables [interaction with the message (i.e. edit or react)](../concepts/message-interactions.mdx).
|
|
14
|
+
*/
|
|
12
15
|
export declare class MessageComponent implements OnChanges {
|
|
13
16
|
private chatClientService;
|
|
14
17
|
private channelService;
|
|
18
|
+
/**
|
|
19
|
+
* The input used for message edit. By default, the [default message input component](./MessageInputComponent.mdx) is used. To change the input for message edit, provide [your own custom template](./MessageInputComponent.mdx/#customization).
|
|
20
|
+
*/
|
|
15
21
|
messageInputTemplate: TemplateRef<any> | undefined;
|
|
22
|
+
/**
|
|
23
|
+
* The template used to display a mention in a message. It receives the mentioned user in a variable called `user` with the type [`UserResponse`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts). You can provide your own template if you want to [add actions to mentions](../code-examples/mention-actions.mdx).
|
|
24
|
+
*/
|
|
16
25
|
mentionTemplate: TemplateRef<any> | undefined;
|
|
26
|
+
/**
|
|
27
|
+
* The message to be displayed
|
|
28
|
+
*/
|
|
17
29
|
message: StreamMessage | undefined;
|
|
30
|
+
/**
|
|
31
|
+
* The list of [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) that are enabled for the current user, the list of [supported interactions](../concepts/message-interactions.mdx) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI. The [`MessageList`](./MessageListComponent.mdx) component automatically sets this based on [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
|
|
32
|
+
*/
|
|
18
33
|
enabledMessageActions: string[];
|
|
19
34
|
/**
|
|
20
|
-
*
|
|
35
|
+
* If true, the message reactions are displayed. If you use the default chat UI you can also set this using the [`MessageList`](./MessageListComponent.mdx) component.
|
|
36
|
+
* @deprecated use [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) instead
|
|
21
37
|
*/
|
|
22
38
|
areReactionsEnabled: boolean | undefined;
|
|
23
39
|
/**
|
|
24
|
-
*
|
|
40
|
+
* If true, the user can add reactions to the message. The [`MessageList`](./MessageListComponent.mdx) component automatically sets this based on [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
|
|
41
|
+
* @deprecated use [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) instead
|
|
25
42
|
*/
|
|
26
43
|
canReactToMessage: boolean | undefined;
|
|
44
|
+
/**
|
|
45
|
+
* If `true`, the message status (sending, sent, who read the message) is displayed.
|
|
46
|
+
*/
|
|
27
47
|
isLastSentMessage: boolean | undefined;
|
|
28
48
|
/**
|
|
29
|
-
*
|
|
49
|
+
* If true, the read indicator is displayed. The [`MessageList`](./MessageListComponent.mdx) component automatically sets this based on [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
|
|
50
|
+
* @deprecated use [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) instead
|
|
30
51
|
*/
|
|
31
52
|
canReceiveReadEvents: boolean | undefined;
|
|
53
|
+
/**
|
|
54
|
+
* Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
|
|
55
|
+
*/
|
|
32
56
|
mode: 'thread' | 'main';
|
|
33
57
|
isEditing: boolean | undefined;
|
|
34
58
|
isActionBoxOpen: boolean;
|
|
@@ -8,16 +8,40 @@ import * as i0 from "@angular/core";
|
|
|
8
8
|
* @deprecated https://getstream.io/chat/docs/sdk/angular/components/message-actions/#required-enabledactions
|
|
9
9
|
*/
|
|
10
10
|
export declare type MessageActions = 'edit' | 'delete' | 'edit-any' | 'delete-any' | 'pin' | 'quote' | 'flag' | 'mute';
|
|
11
|
+
/**
|
|
12
|
+
* The `MessageActionsBox` component displays a list of message actions (i.e edit), that can be opened or closed. You can find the [list of the supported actions](../concepts/message-interactions.mdx) in the message interaction guide.
|
|
13
|
+
*/
|
|
11
14
|
export declare class MessageActionsBoxComponent implements OnChanges {
|
|
12
15
|
private chatClientService;
|
|
13
16
|
private notificationService;
|
|
14
17
|
private channelService;
|
|
18
|
+
/**
|
|
19
|
+
* The input used for message edit. By default, the [default message input component](./MessageInputComponent.mdx) is used. To change the input for message edit, provide [your own custom template](./MessageInputComponent.mdx/#customization).
|
|
20
|
+
*/
|
|
15
21
|
messageInputTemplate: TemplateRef<any> | undefined;
|
|
22
|
+
/**
|
|
23
|
+
* Indicates if the list should be opened or closed. Adding a UI element to open and close the list is the parent's component responsibility.
|
|
24
|
+
*/
|
|
16
25
|
isOpen: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Indicates if the message actions are belonging to a message that was sent by the current user or not.
|
|
28
|
+
*/
|
|
17
29
|
isMine: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* The message the actions will be executed on
|
|
32
|
+
*/
|
|
18
33
|
message: StreamMessage | undefined;
|
|
34
|
+
/**
|
|
35
|
+
* The list of [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) that are enabled for the current user, the list of [supported interactions](../concepts/message-interactions.mdx) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI.
|
|
36
|
+
*/
|
|
19
37
|
enabledActions: string[];
|
|
38
|
+
/**
|
|
39
|
+
* The number of authorized actions (it can be less or equal than the number of enabled actions)
|
|
40
|
+
*/
|
|
20
41
|
readonly displayedActionsCount: EventEmitter<number>;
|
|
42
|
+
/**
|
|
43
|
+
* An event which emits `true` if the edit message modal is open, and `false` when it is closed.
|
|
44
|
+
*/
|
|
21
45
|
readonly isEditing: EventEmitter<boolean>;
|
|
22
46
|
isEditModalOpen: boolean;
|
|
23
47
|
private messageInput;
|
|
@@ -8,19 +8,46 @@ import { ChatClientService } from '../../chat-client.service';
|
|
|
8
8
|
import { TransliterationService } from '../../transliteration.service';
|
|
9
9
|
import { EmojiInputService } from '../emoji-input.service';
|
|
10
10
|
import * as i0 from "@angular/core";
|
|
11
|
+
/**
|
|
12
|
+
* The `AutocompleteTextarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
|
|
13
|
+
*/
|
|
11
14
|
export declare class AutocompleteTextareaComponent implements TextareaInterface, OnChanges {
|
|
12
15
|
private channelService;
|
|
13
16
|
private chatClientService;
|
|
14
17
|
private transliterationService;
|
|
15
18
|
private emojiInputService;
|
|
16
19
|
class: string;
|
|
20
|
+
/**
|
|
21
|
+
* The value of the input HTML element.
|
|
22
|
+
*/
|
|
17
23
|
value: string;
|
|
24
|
+
/**
|
|
25
|
+
* If true, users can mention other users in messages. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
|
|
26
|
+
*/
|
|
18
27
|
areMentionsEnabled: boolean | undefined;
|
|
28
|
+
/**
|
|
29
|
+
* You can provide your own template for the autocomplete list for user mentions. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
|
|
30
|
+
*/
|
|
19
31
|
mentionAutocompleteItemTemplate: TemplateRef<MentionAutcompleteListItemContext> | undefined;
|
|
32
|
+
/**
|
|
33
|
+
* You can provide your own template for the autocomplete list for commands. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
|
|
34
|
+
*/
|
|
20
35
|
commandAutocompleteItemTemplate: TemplateRef<CommandAutocompleteListItemContext> | undefined;
|
|
36
|
+
/**
|
|
37
|
+
* The scope for user mentions, either members of the current channel of members of the application. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
|
|
38
|
+
*/
|
|
21
39
|
mentionScope: 'channel' | 'application';
|
|
40
|
+
/**
|
|
41
|
+
* Emits the current value of the input element when a user types.
|
|
42
|
+
*/
|
|
22
43
|
readonly valueChange: EventEmitter<string>;
|
|
44
|
+
/**
|
|
45
|
+
* Emits when a user triggers a message send event (this happens when they hit the `Enter` key).
|
|
46
|
+
*/
|
|
23
47
|
readonly send: EventEmitter<void>;
|
|
48
|
+
/**
|
|
49
|
+
* Emits the array of users that are mentioned in the message, it is updated when a user mentions a new user or deletes a mention.
|
|
50
|
+
*/
|
|
24
51
|
readonly userMentions: EventEmitter<UserResponse<import("stream-chat").UR>[]>;
|
|
25
52
|
private readonly autocompleteKey;
|
|
26
53
|
private readonly mentionTriggerChar;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { Subject } from 'rxjs';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
4
|
+
* If you have an emoji picker in your application, you can propagate the selected emoji to the textarea using this service, more info can be found in [custom emoji picker guide](../code-examples/emoji-picker.mdx)
|
|
5
5
|
*/
|
|
6
6
|
export declare class EmojiInputService {
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
8
|
+
* If you have an emoji picker in your application, you can propagate the selected emoji to the textarea using this Subject, more info can be found in [custom emoji picker guide](../code-examples/emoji-picker.mdx)
|
|
9
9
|
*/
|
|
10
10
|
emojiInput$: Subject<string>;
|
|
11
11
|
constructor();
|
|
@@ -2,7 +2,7 @@ import { TemplateRef } from '@angular/core';
|
|
|
2
2
|
import { CommandAutocompleteListItemContext, MentionAutcompleteListItemContext } from '../types';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
/**
|
|
5
|
-
* The `MessageInputConfigService` is used to keep a consistent configuration among the different [`MessageInput`](../components/
|
|
5
|
+
* The `MessageInputConfigService` is used to keep a consistent configuration among the different [`MessageInput`](../components/MessageInputComponent.mdx) components if your UI has more than one input component.
|
|
6
6
|
*/
|
|
7
7
|
export declare class MessageInputConfigService {
|
|
8
8
|
/**
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { AfterViewInit, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges, TemplateRef, Type } from '@angular/core';
|
|
2
2
|
import { ChatClientService } from '../chat-client.service';
|
|
3
|
-
import { Observable } from 'rxjs';
|
|
3
|
+
import { Observable, Subject } from 'rxjs';
|
|
4
4
|
import { UserResponse } from 'stream-chat';
|
|
5
5
|
import { AttachmentService } from '../attachment.service';
|
|
6
6
|
import { ChannelService } from '../channel.service';
|
|
@@ -10,6 +10,9 @@ import { MessageInputConfigService } from './message-input-config.service';
|
|
|
10
10
|
import { TextareaInterface } from './textarea.interface';
|
|
11
11
|
import { EmojiInputService } from './emoji-input.service';
|
|
12
12
|
import * as i0 from "@angular/core";
|
|
13
|
+
/**
|
|
14
|
+
* 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. To send messages, the chat user needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
|
|
15
|
+
*/
|
|
13
16
|
export declare class MessageInputComponent implements OnChanges, OnDestroy, AfterViewInit {
|
|
14
17
|
private channelService;
|
|
15
18
|
private notificationService;
|
|
@@ -20,19 +23,51 @@ export declare class MessageInputComponent implements OnChanges, OnDestroy, Afte
|
|
|
20
23
|
private cdRef;
|
|
21
24
|
private chatClient;
|
|
22
25
|
emojiInputService: EmojiInputService;
|
|
26
|
+
/**
|
|
27
|
+
* 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). If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
|
|
28
|
+
*/
|
|
23
29
|
isFileUploadEnabled: boolean | undefined;
|
|
30
|
+
/**
|
|
31
|
+
* If true, users can mention other users in messages. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecture.mdx) for this feature to work. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
|
|
32
|
+
*/
|
|
24
33
|
areMentionsEnabled: boolean | undefined;
|
|
34
|
+
/**
|
|
35
|
+
* The scope for user mentions, either members of the current channel of members of the application. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
|
|
36
|
+
*/
|
|
25
37
|
mentionScope: 'channel' | 'application' | undefined;
|
|
38
|
+
/**
|
|
39
|
+
* You can provide your own template for the autocomplete list for user mentions. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecture.mdx) for this feature to work. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
|
|
40
|
+
*/
|
|
26
41
|
mentionAutocompleteItemTemplate: TemplateRef<MentionAutcompleteListItemContext> | undefined;
|
|
42
|
+
/**
|
|
43
|
+
* You can provide your own template for the autocomplete list for commands. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecture.mdx) for this feature to work. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
|
|
44
|
+
*/
|
|
27
45
|
commandAutocompleteItemTemplate: TemplateRef<CommandAutocompleteListItemContext> | undefined;
|
|
46
|
+
/**
|
|
47
|
+
* You can add an emoji picker by [providing your own emoji picker template](../code-examples/emoji-picker.mdx)
|
|
48
|
+
*/
|
|
28
49
|
emojiPickerTemplate: TemplateRef<void> | undefined;
|
|
50
|
+
/**
|
|
51
|
+
* Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
|
|
52
|
+
*/
|
|
29
53
|
mode: 'thread' | 'main';
|
|
30
54
|
/**
|
|
31
|
-
*
|
|
55
|
+
* 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.
|
|
56
|
+
* If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
|
|
57
|
+
* @deprecated use [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript#file-uploads) instead
|
|
32
58
|
*/
|
|
33
59
|
acceptedFileTypes: string[] | undefined;
|
|
60
|
+
/**
|
|
61
|
+
* If true, users can select multiple files to upload. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
|
|
62
|
+
*/
|
|
34
63
|
isMultipleFileUploadEnabled: boolean | undefined;
|
|
64
|
+
/**
|
|
65
|
+
* The message to edit
|
|
66
|
+
*/
|
|
35
67
|
message: StreamMessage | undefined;
|
|
68
|
+
/**
|
|
69
|
+
* Emits when a message was successfuly sent or updated
|
|
70
|
+
*/
|
|
36
71
|
readonly messageUpdate: EventEmitter<void>;
|
|
37
72
|
isFileUploadAuthorized: boolean | undefined;
|
|
38
73
|
canSendLinks: boolean | undefined;
|
|
@@ -42,6 +77,9 @@ export declare class MessageInputComponent implements OnChanges, OnDestroy, Afte
|
|
|
42
77
|
textareaRef: ComponentRef<TextareaInterface> | undefined;
|
|
43
78
|
mentionedUsers: UserResponse[];
|
|
44
79
|
quotedMessage: undefined | StreamMessage;
|
|
80
|
+
typingStart$: Subject<void>;
|
|
81
|
+
cooldown$: Observable<number> | undefined;
|
|
82
|
+
isCooldownInProgress: boolean;
|
|
45
83
|
private fileInput;
|
|
46
84
|
private textareaAnchor;
|
|
47
85
|
private subscriptions;
|
|
@@ -57,6 +95,7 @@ export declare class MessageInputComponent implements OnChanges, OnDestroy, Afte
|
|
|
57
95
|
get containsLinks(): boolean;
|
|
58
96
|
get accept(): string;
|
|
59
97
|
get quotedMessageAttachments(): import("stream-chat").Attachment<import("../types").DefaultAttachmentType>[];
|
|
98
|
+
get disabledTextareaText(): "" | "streamChat.You can't send thread replies in this channel" | "streamChat.You can't send messages in this channel" | "streamChat.Slow Mode ON";
|
|
60
99
|
filesSelected(fileList: FileList | null): Promise<void>;
|
|
61
100
|
deselectMessageToQuote(): void;
|
|
62
101
|
private clearFileInput;
|
|
@@ -64,6 +103,9 @@ export declare class MessageInputComponent implements OnChanges, OnDestroy, Afte
|
|
|
64
103
|
private initTextarea;
|
|
65
104
|
private areAttachemntsValid;
|
|
66
105
|
private setCanSendMessages;
|
|
106
|
+
private get parentMessageId();
|
|
107
|
+
private startCooldown;
|
|
108
|
+
private stopCooldown;
|
|
67
109
|
static ɵfac: i0.ɵɵFactoryDeclaration<MessageInputComponent, never>;
|
|
68
110
|
static ɵcmp: i0.ɵɵComponentDeclaration<MessageInputComponent, "stream-message-input", never, { "isFileUploadEnabled": "isFileUploadEnabled"; "areMentionsEnabled": "areMentionsEnabled"; "mentionScope": "mentionScope"; "mentionAutocompleteItemTemplate": "mentionAutocompleteItemTemplate"; "commandAutocompleteItemTemplate": "commandAutocompleteItemTemplate"; "emojiPickerTemplate": "emojiPickerTemplate"; "mode": "mode"; "acceptedFileTypes": "acceptedFileTypes"; "isMultipleFileUploadEnabled": "isMultipleFileUploadEnabled"; "message": "message"; }, { "messageUpdate": "messageUpdate"; }, never, never>;
|
|
69
111
|
}
|
|
@@ -2,11 +2,23 @@ import { EventEmitter, OnChanges, OnDestroy } from '@angular/core';
|
|
|
2
2
|
import { EmojiInputService } from '../emoji-input.service';
|
|
3
3
|
import { TextareaInterface } from '../textarea.interface';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
|
+
/**
|
|
6
|
+
* The `Textarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
|
|
7
|
+
*/
|
|
5
8
|
export declare class TextareaComponent implements TextareaInterface, OnChanges, OnDestroy {
|
|
6
9
|
private emojiInputService;
|
|
7
10
|
class: string;
|
|
11
|
+
/**
|
|
12
|
+
* The value of the input HTML element.
|
|
13
|
+
*/
|
|
8
14
|
value: string;
|
|
15
|
+
/**
|
|
16
|
+
* Emits the current value of the input element when a user types.
|
|
17
|
+
*/
|
|
9
18
|
readonly valueChange: EventEmitter<string>;
|
|
19
|
+
/**
|
|
20
|
+
* Emits when a user triggers a message send event (this happens when they hit the `Enter` key).
|
|
21
|
+
*/
|
|
10
22
|
readonly send: EventEmitter<void>;
|
|
11
23
|
private messageInput;
|
|
12
24
|
private subscriptions;
|
|
@@ -1,26 +1,48 @@
|
|
|
1
1
|
import { AfterViewChecked, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
|
|
2
2
|
import { ChannelService } from '../channel.service';
|
|
3
3
|
import { Observable } from 'rxjs';
|
|
4
|
-
import { StreamMessage } from '../types';
|
|
4
|
+
import { DefaultUserType, StreamMessage } from '../types';
|
|
5
5
|
import { ChatClientService } from '../chat-client.service';
|
|
6
6
|
import { GroupStyle } from './group-styles';
|
|
7
7
|
import { ImageLoadService } from './image-load.service';
|
|
8
|
+
import { UserResponse } from 'stream-chat';
|
|
8
9
|
import * as i0 from "@angular/core";
|
|
10
|
+
/**
|
|
11
|
+
* The `MessageList` component renders a scrollable list of messages.
|
|
12
|
+
*/
|
|
9
13
|
export declare class MessageListComponent implements AfterViewChecked, OnChanges, OnInit, OnDestroy {
|
|
10
14
|
private channelService;
|
|
11
15
|
private chatClientService;
|
|
12
16
|
private imageLoadService;
|
|
17
|
+
/**
|
|
18
|
+
* By default, the [default message component](./MessageComponent.mdx) is used. To change the contents of the message, provide [your own custom message template](./MessageComponent.mdx/#customization).
|
|
19
|
+
*/
|
|
13
20
|
messageTemplate: TemplateRef<any> | undefined;
|
|
21
|
+
/**
|
|
22
|
+
* The input used for message edit. By default, the [default message input component](./MessageInputComponent.mdx) is used. To change the input for message edit, provide [your own custom template](./MessageInputComponent.mdx/#customization).
|
|
23
|
+
*/
|
|
14
24
|
messageInputTemplate: TemplateRef<any> | undefined;
|
|
25
|
+
/**
|
|
26
|
+
* The template used to display a mention in a message. It receives the mentioned user in a variable called `user` with the type [`UserResponse`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts). You can provide your own template if you want to [add actions to mentions](../code-examples/mention-actions.mdx).
|
|
27
|
+
*/
|
|
15
28
|
mentionTemplate: TemplateRef<any> | undefined;
|
|
16
29
|
/**
|
|
17
|
-
*
|
|
30
|
+
* You can provide your own typing indicator template instead of the default one.
|
|
31
|
+
*/
|
|
32
|
+
typingIndicatorTemplate: TemplateRef<{
|
|
33
|
+
usersTyping$: Observable<UserResponse<DefaultUserType>[]>;
|
|
34
|
+
}> | undefined;
|
|
35
|
+
/**
|
|
36
|
+
* @deprecated use [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) instead. If true, the message reactions are displayed. Users can also react to messages if they have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
|
|
18
37
|
*/
|
|
19
38
|
areReactionsEnabled: boolean | undefined;
|
|
20
39
|
/**
|
|
21
|
-
* @deprecated https://getstream.io/chat/docs/
|
|
40
|
+
* @deprecated use [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) instead. The list of [actions that are enabled](./MessageActionsBoxComponent.mdx), please note that the user also has to have the necessary [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) for actions to work. Unathorized actions won't be displayed on the UI. The `MessgaeList` component makes the necessary checks before passing the actions to the `Message` component.
|
|
22
41
|
*/
|
|
23
42
|
enabledMessageActionsInput: string[] | undefined;
|
|
43
|
+
/**
|
|
44
|
+
* Determines if the message list should display channel messages or [thread messages](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
|
|
45
|
+
*/
|
|
24
46
|
mode: 'main' | 'thread';
|
|
25
47
|
messages$: Observable<StreamMessage[]>;
|
|
26
48
|
canReactToMessage: boolean | undefined;
|
|
@@ -44,12 +66,16 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
|
|
|
44
66
|
private readonly isUserScrolledUpThreshold;
|
|
45
67
|
private subscriptions;
|
|
46
68
|
private prevScrollTop;
|
|
69
|
+
private usersTypingInChannel$;
|
|
70
|
+
private usersTypingInThread$;
|
|
47
71
|
constructor(channelService: ChannelService, chatClientService: ChatClientService, imageLoadService: ImageLoadService);
|
|
48
72
|
ngOnInit(): void;
|
|
49
73
|
ngOnChanges(changes: SimpleChanges): void;
|
|
50
74
|
ngAfterViewChecked(): void;
|
|
51
75
|
ngOnDestroy(): void;
|
|
76
|
+
get usersTyping$(): Observable<UserResponse<DefaultUserType<import("../types").DefaultUserTypeInternal>>[]>;
|
|
52
77
|
trackByMessageId(index: number, item: StreamMessage): string;
|
|
78
|
+
trackByUserId(index: number, user: UserResponse): string;
|
|
53
79
|
scrollToBottom(): void;
|
|
54
80
|
scrolled(): void;
|
|
55
81
|
private preserveScrollbarPosition;
|
|
@@ -57,5 +83,5 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
|
|
|
57
83
|
private setMessages$;
|
|
58
84
|
private resetScrollState;
|
|
59
85
|
static ɵfac: i0.ɵɵFactoryDeclaration<MessageListComponent, never>;
|
|
60
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "stream-message-list", never, { "messageTemplate": "messageTemplate"; "messageInputTemplate": "messageInputTemplate"; "mentionTemplate": "mentionTemplate"; "areReactionsEnabled": "areReactionsEnabled"; "enabledMessageActionsInput": "enabledMessageActions"; "mode": "mode"; }, {}, never, never>;
|
|
86
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "stream-message-list", never, { "messageTemplate": "messageTemplate"; "messageInputTemplate": "messageInputTemplate"; "mentionTemplate": "mentionTemplate"; "typingIndicatorTemplate": "typingIndicatorTemplate"; "areReactionsEnabled": "areReactionsEnabled"; "enabledMessageActionsInput": "enabledMessageActions"; "mode": "mode"; }, {}, never, never>;
|
|
61
87
|
}
|