stream-chat-angular 2.20.2 → 3.0.0-beta.10

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.
Files changed (127) hide show
  1. package/README.md +44 -12
  2. package/assets/version.d.ts +1 -1
  3. package/bundles/stream-chat-angular.umd.js +780 -534
  4. package/bundles/stream-chat-angular.umd.js.map +1 -1
  5. package/esm2015/assets/version.js +2 -2
  6. package/esm2015/lib/attachment-list/attachment-list.component.js +27 -15
  7. package/esm2015/lib/attachment-preview-list/attachment-preview-list.component.js +28 -22
  8. package/esm2015/lib/attachment.service.js +11 -5
  9. package/esm2015/lib/avatar-placeholder/avatar-placeholder.component.js +41 -0
  10. package/esm2015/lib/channel-header/channel-header.component.js +26 -12
  11. package/esm2015/lib/channel-list/channel-list.component.js +23 -13
  12. package/esm2015/lib/channel-preview/channel-preview.component.js +3 -3
  13. package/esm2015/lib/channel.service.js +28 -35
  14. package/esm2015/lib/chat-client.service.js +5 -4
  15. package/esm2015/lib/custom-templates.service.js +139 -0
  16. package/esm2015/lib/icon-placeholder/icon-placeholder.component.js +34 -0
  17. package/esm2015/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.js +42 -0
  18. package/esm2015/lib/message/message.component.js +74 -29
  19. package/esm2015/lib/message-actions-box/message-actions-box.component.js +114 -99
  20. package/esm2015/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.js +13 -13
  21. package/esm2015/lib/message-input/message-input-config.service.js +1 -1
  22. package/esm2015/lib/message-input/message-input.component.js +56 -45
  23. package/esm2015/lib/message-input/textarea.directive.js +2 -18
  24. package/esm2015/lib/message-input/textarea.interface.js +1 -1
  25. package/esm2015/lib/message-list/message-list.component.js +32 -93
  26. package/esm2015/lib/message-preview.js +4 -17
  27. package/esm2015/lib/message-reactions/message-reactions.component.js +3 -3
  28. package/esm2015/lib/modal/modal.component.js +9 -6
  29. package/esm2015/lib/notification/notification.component.js +5 -2
  30. package/esm2015/lib/notification-list/notification-list.component.js +12 -10
  31. package/esm2015/lib/read-by.js +1 -1
  32. package/esm2015/lib/stream-avatar.module.js +5 -4
  33. package/esm2015/lib/stream-chat.module.js +13 -3
  34. package/esm2015/lib/thread/thread.component.js +19 -11
  35. package/esm2015/lib/types.js +1 -1
  36. package/esm2015/public-api.js +5 -1
  37. package/fesm2015/stream-chat-angular.js +723 -449
  38. package/fesm2015/stream-chat-angular.js.map +1 -1
  39. package/lib/attachment-list/attachment-list.component.d.ts +12 -8
  40. package/lib/attachment-preview-list/attachment-preview-list.component.d.ts +17 -7
  41. package/lib/attachment.service.d.ts +1 -1
  42. package/lib/avatar-placeholder/avatar-placeholder.component.d.ts +25 -0
  43. package/lib/channel-header/channel-header.component.d.ts +15 -12
  44. package/lib/channel-list/channel-list.component.d.ts +14 -11
  45. package/lib/channel-preview/channel-preview.component.d.ts +3 -2
  46. package/lib/channel.service.d.ts +32 -31
  47. package/lib/chat-client.service.d.ts +12 -11
  48. package/lib/custom-templates.service.d.ts +132 -0
  49. package/lib/icon-placeholder/icon-placeholder.component.d.ts +22 -0
  50. package/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.d.ts +21 -0
  51. package/lib/message/message.component.d.ts +42 -30
  52. package/lib/message-actions-box/message-actions-box.component.d.ts +22 -26
  53. package/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.d.ts +7 -11
  54. package/lib/message-input/message-input-config.service.d.ts +0 -19
  55. package/lib/message-input/message-input.component.d.ts +40 -26
  56. package/lib/message-input/textarea.directive.d.ts +3 -6
  57. package/lib/message-input/textarea.interface.d.ts +1 -4
  58. package/lib/message-list/group-styles.d.ts +1 -1
  59. package/lib/message-list/message-list.component.d.ts +10 -34
  60. package/lib/message-preview.d.ts +2 -1
  61. package/lib/message-reactions/message-reactions.component.d.ts +4 -5
  62. package/lib/modal/modal.component.d.ts +7 -3
  63. package/lib/notification/notification.component.d.ts +6 -1
  64. package/lib/notification-list/notification-list.component.d.ts +4 -2
  65. package/lib/read-by.d.ts +2 -1
  66. package/lib/stream-avatar.module.d.ts +4 -3
  67. package/lib/stream-chat.module.d.ts +6 -4
  68. package/lib/thread/thread.component.d.ts +6 -3
  69. package/lib/types.d.ts +115 -9
  70. package/package.json +2 -3
  71. package/public-api.d.ts +4 -0
  72. package/src/assets/styles/assets/EmojiOneColor.woff2 +0 -0
  73. package/src/assets/styles/assets/NotoColorEmoji-flags.woff2 +0 -0
  74. package/src/assets/styles/assets/Poweredby_100px-White_VertText.png +0 -0
  75. package/src/assets/styles/assets/str-chat__reaction-list-sprite@1x.png +0 -0
  76. package/src/assets/styles/assets/str-chat__reaction-list-sprite@2x.png +0 -0
  77. package/src/assets/styles/assets/str-chat__reaction-list-sprite@3x.png +0 -0
  78. package/src/assets/styles/css/index.css +1 -0
  79. package/src/assets/styles/css/index.css.map +1 -0
  80. package/src/assets/styles/scss/ActionsBox.scss +56 -0
  81. package/src/assets/styles/scss/Attachment.scss +227 -0
  82. package/src/assets/styles/scss/AttachmentActions.scss +44 -0
  83. package/src/assets/styles/scss/Audio.scss +112 -0
  84. package/src/assets/styles/scss/Avatar.scss +79 -0
  85. package/src/assets/styles/scss/Card.scss +100 -0
  86. package/src/assets/styles/scss/ChannelHeader.scss +284 -0
  87. package/src/assets/styles/scss/ChannelList.scss +117 -0
  88. package/src/assets/styles/scss/ChannelListMessenger.scss +9 -0
  89. package/src/assets/styles/scss/ChannelPreview.scss +108 -0
  90. package/src/assets/styles/scss/ChannelSearch.scss +111 -0
  91. package/src/assets/styles/scss/ChatDown.scss +15 -0
  92. package/src/assets/styles/scss/DateSeparator.scss +51 -0
  93. package/src/assets/styles/scss/EditMessageForm.scss +112 -0
  94. package/src/assets/styles/scss/EventComponent.scss +48 -0
  95. package/src/assets/styles/scss/Gallery.scss +135 -0
  96. package/src/assets/styles/scss/InfiniteScrollPaginator.scss +6 -0
  97. package/src/assets/styles/scss/LoadMoreButton.scss +44 -0
  98. package/src/assets/styles/scss/LoadingChannels.scss +70 -0
  99. package/src/assets/styles/scss/LoadingIndicator.scss +38 -0
  100. package/src/assets/styles/scss/Message.scss +1261 -0
  101. package/src/assets/styles/scss/MessageActions.scss +112 -0
  102. package/src/assets/styles/scss/MessageCommerce.scss +564 -0
  103. package/src/assets/styles/scss/MessageInput.scss +385 -0
  104. package/src/assets/styles/scss/MessageInputFlat.scss +305 -0
  105. package/src/assets/styles/scss/MessageList.scss +203 -0
  106. package/src/assets/styles/scss/MessageLivestream.scss +325 -0
  107. package/src/assets/styles/scss/MessageNotification.scss +49 -0
  108. package/src/assets/styles/scss/MessageRepliesCountButton.scss +33 -0
  109. package/src/assets/styles/scss/MessageTeam.scss +617 -0
  110. package/src/assets/styles/scss/Modal.scss +77 -0
  111. package/src/assets/styles/scss/ReactionList.scss +183 -0
  112. package/src/assets/styles/scss/ReactionSelector.scss +212 -0
  113. package/src/assets/styles/scss/SendButton.scss +14 -0
  114. package/src/assets/styles/scss/SimpleReactionsList.scss +76 -0
  115. package/src/assets/styles/scss/SmallMessageInput.scss +172 -0
  116. package/src/assets/styles/scss/Thread.scss +306 -0
  117. package/src/assets/styles/scss/Tooltip.scss +38 -0
  118. package/src/assets/styles/scss/TypingIndicator.scss +75 -0
  119. package/src/assets/styles/scss/VirtualMessage.scss +291 -0
  120. package/src/assets/styles/scss/_base.scss +206 -0
  121. package/src/assets/styles/scss/_variables.scss +158 -0
  122. package/src/assets/styles/scss/index.scss +50 -0
  123. package/src/assets/styles/scss/vendor/emoji-mart.scss +495 -0
  124. package/src/assets/styles/scss/vendor/mml-react.scss +1749 -0
  125. package/src/assets/styles/scss/vendor/react-file-utils.scss +378 -0
  126. package/src/assets/styles/scss/vendor/react-image-gallery.scss +224 -0
  127. package/src/assets/version.ts +1 -1
@@ -1,23 +1,20 @@
1
- import { ComponentRef, EventEmitter, OnChanges, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
1
+ import { ComponentRef, EventEmitter, OnChanges, SimpleChanges, ViewContainerRef } from '@angular/core';
2
2
  import { UserResponse } from 'stream-chat';
3
- import { CommandAutocompleteListItemContext, MentionAutcompleteListItemContext } from '../types';
4
3
  import { TextareaInterface } from './textarea.interface';
5
4
  import * as i0 from "@angular/core";
6
5
  export declare class TextareaDirective implements OnChanges {
7
6
  viewContainerRef: ViewContainerRef;
8
7
  componentRef: ComponentRef<TextareaInterface> | undefined;
9
8
  areMentionsEnabled: boolean | undefined;
10
- mentionAutocompleteItemTemplate: TemplateRef<MentionAutcompleteListItemContext> | undefined;
11
9
  mentionScope?: 'channel' | 'application';
12
- commandAutocompleteItemTemplate: TemplateRef<CommandAutocompleteListItemContext> | undefined;
13
10
  value: string;
14
11
  readonly valueChange: EventEmitter<string>;
15
12
  readonly send: EventEmitter<void>;
16
- readonly userMentions: EventEmitter<UserResponse<import("stream-chat").UR>[]>;
13
+ readonly userMentions: EventEmitter<UserResponse<import("stream-chat").DefaultGenerics>[]>;
17
14
  private subscriptions;
18
15
  private unpropagatedChanges;
19
16
  constructor(viewContainerRef: ViewContainerRef);
20
17
  ngOnChanges(changes: SimpleChanges): void;
21
18
  static ɵfac: i0.ɵɵFactoryDeclaration<TextareaDirective, never>;
22
- static ɵdir: i0.ɵɵDirectiveDeclaration<TextareaDirective, "[streamTextarea]", never, { "componentRef": "componentRef"; "areMentionsEnabled": "areMentionsEnabled"; "mentionAutocompleteItemTemplate": "mentionAutocompleteItemTemplate"; "mentionScope": "mentionScope"; "commandAutocompleteItemTemplate": "commandAutocompleteItemTemplate"; "value": "value"; }, { "valueChange": "valueChange"; "send": "send"; "userMentions": "userMentions"; }, never>;
19
+ static ɵdir: i0.ɵɵDirectiveDeclaration<TextareaDirective, "[streamTextarea]", never, { "componentRef": "componentRef"; "areMentionsEnabled": "areMentionsEnabled"; "mentionScope": "mentionScope"; "value": "value"; }, { "valueChange": "valueChange"; "send": "send"; "userMentions": "userMentions"; }, never>;
23
20
  }
@@ -1,13 +1,10 @@
1
- import { EventEmitter, OnChanges, TemplateRef } from '@angular/core';
1
+ import { EventEmitter, OnChanges } from '@angular/core';
2
2
  import { UserResponse } from 'stream-chat';
3
- import { CommandAutocompleteListItemContext, MentionAutcompleteListItemContext } from '../types';
4
3
  export interface TextareaInterface extends OnChanges {
5
4
  value: string;
6
5
  valueChange: EventEmitter<string>;
7
6
  send: EventEmitter<void>;
8
7
  userMentions?: EventEmitter<UserResponse[]>;
9
8
  areMentionsEnabled?: boolean;
10
- mentionAutocompleteItemTemplate?: TemplateRef<MentionAutcompleteListItemContext> | undefined;
11
- commandAutocompleteItemTemplate?: TemplateRef<CommandAutocompleteListItemContext> | undefined;
12
9
  mentionScope?: 'channel' | 'application';
13
10
  }
@@ -1,3 +1,3 @@
1
1
  import { StreamMessage } from '../types';
2
2
  export declare type GroupStyle = '' | 'middle' | 'top' | 'bottom' | 'single';
3
- export declare const getGroupStyles: (message: StreamMessage, previousMessage?: StreamMessage<import("../types").DefaultAttachmentType, import("../types").DefaultChannelType, import("stream-chat").LiteralStringForUnion, import("../types").DefaultMessageType, import("../types").UnknownType, import("../types").DefaultUserType<import("../types").DefaultUserTypeInternal>> | undefined, nextMessage?: StreamMessage<import("../types").DefaultAttachmentType, import("../types").DefaultChannelType, import("stream-chat").LiteralStringForUnion, import("../types").DefaultMessageType, import("../types").UnknownType, import("../types").DefaultUserType<import("../types").DefaultUserTypeInternal>> | undefined, noGroupByUser?: boolean) => GroupStyle;
3
+ export declare const getGroupStyles: (message: StreamMessage, previousMessage?: StreamMessage<import("../types").DefaultStreamChatGenerics> | undefined, nextMessage?: StreamMessage<import("../types").DefaultStreamChatGenerics> | undefined, noGroupByUser?: boolean) => GroupStyle;
@@ -1,11 +1,12 @@
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 { DefaultUserType, StreamMessage } from '../types';
4
+ import { MessageContext, StreamMessage, TypingIndicatorContext } 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
8
  import { UserResponse } from 'stream-chat';
9
+ import { CustomTemplatesService } from '../custom-templates.service';
9
10
  import * as i0 from "@angular/core";
10
11
  /**
11
12
  * The `MessageList` component renders a scrollable list of messages.
@@ -14,39 +15,14 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
14
15
  private channelService;
15
16
  private chatClientService;
16
17
  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
- */
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
- */
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
- */
28
- mentionTemplate: TemplateRef<any> | undefined;
29
- /**
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).
37
- */
38
- areReactionsEnabled: boolean | undefined;
39
- /**
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.
41
- */
42
- enabledMessageActionsInput: string[] | undefined;
18
+ private customTemplatesService;
43
19
  /**
44
20
  * Determines if the message list should display channel messages or [thread messages](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
45
21
  */
46
22
  mode: 'main' | 'thread';
23
+ typingIndicatorTemplate: TemplateRef<TypingIndicatorContext> | undefined;
24
+ messageTemplate: TemplateRef<MessageContext> | undefined;
47
25
  messages$: Observable<StreamMessage[]>;
48
- canReactToMessage: boolean | undefined;
49
- canReceiveReadEvents: boolean | undefined;
50
26
  enabledMessageActions: string[];
51
27
  private class;
52
28
  unreadMessageCount: number;
@@ -62,26 +38,26 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
62
38
  private oldestMessageDate;
63
39
  private olderMassagesLoaded;
64
40
  private isNewMessageSentByUser;
65
- private authorizedMessageActions;
66
41
  private readonly isUserScrolledUpThreshold;
67
42
  private subscriptions;
68
43
  private prevScrollTop;
69
44
  private usersTypingInChannel$;
70
45
  private usersTypingInThread$;
71
- constructor(channelService: ChannelService, chatClientService: ChatClientService, imageLoadService: ImageLoadService);
46
+ constructor(channelService: ChannelService, chatClientService: ChatClientService, imageLoadService: ImageLoadService, customTemplatesService: CustomTemplatesService);
72
47
  ngOnInit(): void;
73
48
  ngOnChanges(changes: SimpleChanges): void;
74
49
  ngAfterViewChecked(): void;
75
50
  ngOnDestroy(): void;
76
- get usersTyping$(): Observable<UserResponse<DefaultUserType<import("../types").DefaultUserTypeInternal>>[]>;
77
51
  trackByMessageId(index: number, item: StreamMessage): string;
78
52
  trackByUserId(index: number, user: UserResponse): string;
79
53
  scrollToBottom(): void;
80
54
  scrolled(): void;
55
+ getTypingIndicatorContext(): TypingIndicatorContext;
56
+ getMessageContext(message: StreamMessage): MessageContext;
81
57
  private preserveScrollbarPosition;
82
- private setEnabledActions;
83
58
  private setMessages$;
84
59
  private resetScrollState;
60
+ private get usersTyping$();
85
61
  static ɵfac: i0.ɵɵFactoryDeclaration<MessageListComponent, 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>;
62
+ static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "stream-message-list", never, { "mode": "mode"; }, {}, never, never>;
87
63
  }
@@ -1,2 +1,3 @@
1
1
  import { Attachment, MessageResponse, UserResponse } from 'stream-chat';
2
- export declare const createMessagePreview: (user: UserResponse, text: string, attachments?: Attachment[], mentionedUsers?: UserResponse[], parentId?: undefined | string, quotedMessageId?: undefined | string) => MessageResponse<import("stream-chat").UR, import("stream-chat").UR, import("stream-chat").LiteralStringForUnion, import("stream-chat").UR, import("stream-chat").UR, import("stream-chat").UR>;
2
+ import { DefaultStreamChatGenerics } from './types';
3
+ export declare const createMessagePreview: <T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(user: UserResponse, text: string, attachments: Attachment<T>[] | undefined, mentionedUsers: UserResponse<T>[] | undefined, parentId: undefined | string, quotedMessageId: undefined | string, customData: Partial<T["messageType"]> | undefined) => MessageResponse<T>;
@@ -1,9 +1,8 @@
1
1
  import { AfterViewChecked, ChangeDetectorRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
2
2
  import { ReactionResponse } from 'stream-chat';
3
3
  import { ChannelService } from '../channel.service';
4
- import { DefaultReactionType, DefaultUserType } from '../types';
4
+ import { MessageReactionType, DefaultStreamChatGenerics } from '../types';
5
5
  import * as i0 from "@angular/core";
6
- export declare type MessageReactionType = 'angry' | 'haha' | 'like' | 'love' | 'sad' | 'wow';
7
6
  /**
8
7
  * The `MessageReactions` component displays the reactions of a message, the current user can add and remove reactions. You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation.
9
8
  */
@@ -27,11 +26,11 @@ export declare class MessageReactionsComponent implements AfterViewChecked, OnCh
27
26
  /**
28
27
  * List of reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
29
28
  */
30
- latestReactions: ReactionResponse<DefaultReactionType, DefaultUserType>[];
29
+ latestReactions: ReactionResponse<DefaultStreamChatGenerics>[];
31
30
  /**
32
31
  * List of the user's own reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
33
32
  */
34
- ownReactions: ReactionResponse<DefaultReactionType, DefaultUserType>[];
33
+ ownReactions: ReactionResponse<DefaultStreamChatGenerics>[];
35
34
  /**
36
35
  * Indicates if the selector should be opened or closed. Adding a UI element to open and close the selector is the parent's component responsibility.
37
36
  */
@@ -50,7 +49,7 @@ export declare class MessageReactionsComponent implements AfterViewChecked, OnCh
50
49
  get existingReactions(): MessageReactionType[];
51
50
  get reactionsCount(): number;
52
51
  get reactionOptions(): MessageReactionType[];
53
- getLatestUserByReaction(reactionType: MessageReactionType): import("stream-chat").UserResponse<DefaultUserType<import("../types").DefaultUserTypeInternal>> | null | undefined;
52
+ getLatestUserByReaction(reactionType: MessageReactionType): import("stream-chat").UserResponse<DefaultStreamChatGenerics> | null | undefined;
54
53
  getEmojiByReaction(reactionType: MessageReactionType): string;
55
54
  getUsersByReaction(reactionType: MessageReactionType): string;
56
55
  showTooltip(event: Event, reactionType: MessageReactionType): void;
@@ -1,4 +1,4 @@
1
- import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
1
+ import { EventEmitter, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
3
  /**
4
4
  * The `Modal` component displays its content in an overlay. The modal can be closed with a close button, if the user clicks outside of the modal content, or if the escape button is pressed. The modal can also be closed from outside.
@@ -8,11 +8,15 @@ export declare class ModalComponent implements OnChanges {
8
8
  * If `true` the modal will be displayed, if `false` the modal will be hidden
9
9
  */
10
10
  isOpen: boolean;
11
+ /**
12
+ * The content of the modal (can also be provided using `ng-content`)
13
+ */
14
+ content: TemplateRef<void> | undefined;
11
15
  /**
12
16
  * Emits `true` if the modal becomes visible, and `false` if the modal is closed.
13
17
  */
14
18
  readonly isOpenChange: EventEmitter<boolean>;
15
- private content;
19
+ private innerContainer;
16
20
  constructor();
17
21
  ngOnChanges(changes: SimpleChanges): void;
18
22
  close(): void;
@@ -21,5 +25,5 @@ export declare class ModalComponent implements OnChanges {
21
25
  private watchForOutsideClicks;
22
26
  private stopWatchForOutsideClicks;
23
27
  static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, never>;
24
- static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "stream-modal", never, { "isOpen": "isOpen"; }, { "isOpenChange": "isOpenChange"; }, never, ["*"]>;
28
+ static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "stream-modal", never, { "isOpen": "isOpen"; "content": "content"; }, { "isOpenChange": "isOpenChange"; }, never, ["*"]>;
25
29
  }
@@ -1,3 +1,4 @@
1
+ import { TemplateRef } from '@angular/core';
1
2
  import { NotificationType } from '../types';
2
3
  import * as i0 from "@angular/core";
3
4
  /**
@@ -8,7 +9,11 @@ export declare class NotificationComponent {
8
9
  * The type of the notification
9
10
  */
10
11
  type: NotificationType | undefined;
12
+ /**
13
+ * The content of the notification (can also be provided using `ng-content`)
14
+ */
15
+ content: TemplateRef<void> | undefined;
11
16
  constructor();
12
17
  static ɵfac: i0.ɵɵFactoryDeclaration<NotificationComponent, never>;
13
- static ɵcmp: i0.ɵɵComponentDeclaration<NotificationComponent, "stream-notification", never, { "type": "type"; }, {}, never, ["*"]>;
18
+ static ɵcmp: i0.ɵɵComponentDeclaration<NotificationComponent, "stream-notification", never, { "type": "type"; "content": "content"; }, {}, never, ["*"]>;
14
19
  }
@@ -1,4 +1,5 @@
1
1
  import { Observable } from 'rxjs';
2
+ import { CustomTemplatesService } from '../custom-templates.service';
2
3
  import { NotificationService } from '../notification.service';
3
4
  import { NotificationPayload } from '../types';
4
5
  import * as i0 from "@angular/core";
@@ -6,11 +7,12 @@ import * as i0 from "@angular/core";
6
7
  * The `NotificationList` component displays the list of active notifications.
7
8
  */
8
9
  export declare class NotificationListComponent {
10
+ readonly customTemplatesService: CustomTemplatesService;
9
11
  private notificationService;
10
12
  notifications$: Observable<NotificationPayload[]>;
11
- constructor(notificationService: NotificationService);
13
+ constructor(customTemplatesService: CustomTemplatesService, notificationService: NotificationService);
12
14
  trackById(_: number, item: NotificationPayload): string;
13
- getTemplateContext(notification: NotificationPayload): {
15
+ getNotificationContentContext(notification: NotificationPayload): {
14
16
  dismissFn: Function;
15
17
  };
16
18
  static ɵfac: i0.ɵɵFactoryDeclaration<NotificationListComponent, never>;
package/lib/read-by.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  import { Channel, FormatMessageResponse, UserResponse } from 'stream-chat';
2
- export declare const getReadBy: (message: FormatMessageResponse, channel: Channel) => UserResponse<import("stream-chat").UR>[];
2
+ import { DefaultStreamChatGenerics } from './types';
3
+ export declare const getReadBy: <T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: FormatMessageResponse<T>, channel: Channel<T>) => UserResponse<import("stream-chat").DefaultGenerics>[];
@@ -1,9 +1,10 @@
1
1
  import * as i0 from "@angular/core";
2
2
  import * as i1 from "./avatar/avatar.component";
3
- import * as i2 from "@angular/common";
4
- import * as i3 from "@ngx-translate/core";
3
+ import * as i2 from "./avatar-placeholder/avatar-placeholder.component";
4
+ import * as i3 from "@angular/common";
5
+ import * as i4 from "@ngx-translate/core";
5
6
  export declare class StreamAvatarModule {
6
7
  static ɵfac: i0.ɵɵFactoryDeclaration<StreamAvatarModule, never>;
7
- static ɵmod: i0.ɵɵNgModuleDeclaration<StreamAvatarModule, [typeof i1.AvatarComponent], [typeof i2.CommonModule, typeof i3.TranslateModule], [typeof i1.AvatarComponent]>;
8
+ static ɵmod: i0.ɵɵNgModuleDeclaration<StreamAvatarModule, [typeof i1.AvatarComponent, typeof i2.AvatarPlaceholderComponent], [typeof i3.CommonModule, typeof i4.TranslateModule], [typeof i1.AvatarComponent, typeof i2.AvatarPlaceholderComponent]>;
8
9
  static ɵinj: i0.ɵɵInjectorDeclaration<StreamAvatarModule>;
9
10
  }
@@ -17,11 +17,13 @@ import * as i15 from "./attachment-preview-list/attachment-preview-list.componen
17
17
  import * as i16 from "./modal/modal.component";
18
18
  import * as i17 from "./message-input/textarea.directive";
19
19
  import * as i18 from "./thread/thread.component";
20
- import * as i19 from "@angular/common";
21
- import * as i20 from "@ngx-translate/core";
22
- import * as i21 from "./stream-avatar.module";
20
+ import * as i19 from "./icon-placeholder/icon-placeholder.component";
21
+ import * as i20 from "./loading-indicator-placeholder/loading-indicator-placeholder.component";
22
+ import * as i21 from "@angular/common";
23
+ import * as i22 from "@ngx-translate/core";
24
+ import * as i23 from "./stream-avatar.module";
23
25
  export declare class StreamChatModule {
24
26
  static ɵfac: i0.ɵɵFactoryDeclaration<StreamChatModule, never>;
25
- static ɵmod: i0.ɵɵNgModuleDeclaration<StreamChatModule, [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i17.TextareaDirective, typeof i18.ThreadComponent], [typeof i19.CommonModule, typeof i20.TranslateModule, typeof i21.StreamAvatarModule], [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i21.StreamAvatarModule, typeof i18.ThreadComponent]>;
27
+ static ɵmod: i0.ɵɵNgModuleDeclaration<StreamChatModule, [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i17.TextareaDirective, typeof i18.ThreadComponent, typeof i19.IconPlaceholderComponent, typeof i20.LoadingIndicatorPlaceholderComponent], [typeof i21.CommonModule, typeof i22.TranslateModule, typeof i23.StreamAvatarModule], [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i23.StreamAvatarModule, typeof i18.ThreadComponent, typeof i19.IconPlaceholderComponent, typeof i20.LoadingIndicatorPlaceholderComponent]>;
26
28
  static ɵinj: i0.ɵɵInjectorDeclaration<StreamChatModule>;
27
29
  }
@@ -1,18 +1,21 @@
1
1
  import { OnDestroy } from '@angular/core';
2
2
  import { ChannelService } from '../channel.service';
3
- import { StreamMessage } from '../types';
3
+ import { CustomTemplatesService } from '../custom-templates.service';
4
+ import { StreamMessage, ThreadHeaderContext } from '../types';
4
5
  import * as i0 from "@angular/core";
5
6
  /**
6
7
  * The `Thread` component represents a [message thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript), it is a container component that displays a thread with a header, [`MessageList`](./MessageListComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components.
7
8
  */
8
9
  export declare class ThreadComponent implements OnDestroy {
10
+ customTemplatesService: CustomTemplatesService;
9
11
  private channelService;
10
12
  private class;
11
13
  parentMessage: StreamMessage | undefined;
12
14
  private subscriptions;
13
- constructor(channelService: ChannelService);
15
+ constructor(customTemplatesService: CustomTemplatesService, channelService: ChannelService);
14
16
  ngOnDestroy(): void;
15
- get replyCountParam(): {
17
+ getThreadHeaderContext(): ThreadHeaderContext;
18
+ getReplyCountParam(parentMessage: StreamMessage | undefined): {
16
19
  replyCount: number | undefined;
17
20
  };
18
21
  closeThread(): void;
package/lib/types.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import { TemplateRef } from '@angular/core';
2
- import type { Attachment, ChannelMemberResponse, CommandResponse, Event, FormatMessageResponse, LiteralStringForUnion, Mute, UserResponse } from 'stream-chat';
2
+ import { Observable, Subject } from 'rxjs';
3
+ import type { Attachment, Channel, ChannelMemberResponse, CommandResponse, Event, ExtendableGenerics, FormatMessageResponse, LiteralStringForUnion, Mute, ReactionResponse, UserResponse } from 'stream-chat';
4
+ import { Icon } from './icon/icon.component';
3
5
  export declare type UnknownType = Record<string, unknown>;
4
6
  export declare type CustomTrigger = {
5
7
  [key: string]: {
@@ -7,10 +9,19 @@ export declare type CustomTrigger = {
7
9
  data: UnknownType;
8
10
  };
9
11
  };
12
+ export declare type DefaultStreamChatGenerics = ExtendableGenerics & {
13
+ attachmentType: DefaultAttachmentType;
14
+ channelType: DefaultChannelType;
15
+ commandType: LiteralStringForUnion;
16
+ eventType: UnknownType;
17
+ messageType: DefaultMessageType;
18
+ reactionType: UnknownType;
19
+ userType: DefaultUserType;
20
+ };
10
21
  export declare type DefaultAttachmentType = UnknownType & {
11
22
  asset_url?: string;
12
23
  id?: string;
13
- images?: Array<Attachment<DefaultAttachmentType>>;
24
+ images?: Array<Attachment<DefaultStreamChatGenerics>>;
14
25
  mime_type?: string;
15
26
  };
16
27
  export declare type DefaultChannelType = UnknownType & {
@@ -19,24 +30,22 @@ export declare type DefaultChannelType = UnknownType & {
19
30
  subtitle?: string;
20
31
  };
21
32
  export declare type DefaultCommandType = LiteralStringForUnion;
22
- export declare type DefaultEventType = UnknownType;
23
33
  export declare type DefaultMessageType = UnknownType & {
24
34
  customType?: 'channel.intro' | 'message.date';
25
35
  date?: string | Date;
26
36
  errorStatusCode?: number;
27
- event?: Event<DefaultAttachmentType, DefaultChannelType, DefaultCommandType, DefaultEventType, DefaultMessageType, DefaultReactionType, DefaultUserType>;
37
+ event?: Event<DefaultStreamChatGenerics>;
28
38
  unread?: boolean;
29
- readBy: UserResponse<DefaultUserType>[];
39
+ readBy: UserResponse<DefaultStreamChatGenerics>[];
30
40
  };
31
- export declare type DefaultReactionType = UnknownType;
32
41
  export declare type DefaultUserTypeInternal = {
33
42
  image?: string;
34
43
  status?: string;
35
44
  };
36
- export declare type DefaultUserType<UserType extends DefaultUserTypeInternal = DefaultUserTypeInternal> = UnknownType & DefaultUserTypeInternal & {
37
- mutes?: Array<Mute<UserType>>;
45
+ export declare type DefaultUserType = UnknownType & DefaultUserTypeInternal & {
46
+ mutes?: Array<Mute<DefaultStreamChatGenerics>>;
38
47
  };
39
- export declare type StreamMessage<At extends DefaultAttachmentType = DefaultAttachmentType, Ch extends DefaultChannelType = DefaultChannelType, Co extends DefaultCommandType = DefaultCommandType, Me extends DefaultMessageType = DefaultMessageType, Re extends DefaultReactionType = DefaultReactionType, Us extends DefaultUserType<Us> = DefaultUserType> = FormatMessageResponse<At, Ch, Co, Me, Re, Us>;
48
+ export declare type StreamMessage<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = FormatMessageResponse<T>;
40
49
  export declare type AttachmentUpload = {
41
50
  file: File;
42
51
  state: 'error' | 'success' | 'uploading';
@@ -66,3 +75,100 @@ export declare type NotificationPayload<T = {}> = {
66
75
  templateContext?: T;
67
76
  dismissFn: Function;
68
77
  };
78
+ export declare type ChannelPreviewContext<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
79
+ channel: Channel<T>;
80
+ };
81
+ export declare type MessageInputContext = {
82
+ isFileUploadEnabled: boolean | undefined;
83
+ areMentionsEnabled: boolean | undefined;
84
+ mentionScope: 'channel' | 'application' | undefined;
85
+ mode: 'thread' | 'main' | undefined;
86
+ isMultipleFileUploadEnabled: boolean | undefined;
87
+ message: StreamMessage | undefined;
88
+ messageUpdateHandler: Function | undefined;
89
+ sendMessage$: Observable<void>;
90
+ };
91
+ export declare type MentionTemplateContext = {
92
+ content: string;
93
+ user: UserResponse;
94
+ };
95
+ export declare type EmojiPickerContext = {
96
+ emojiInput$: Subject<string>;
97
+ };
98
+ export declare type TypingIndicatorContext = {
99
+ usersTyping$: Observable<UserResponse<DefaultStreamChatGenerics>[]>;
100
+ };
101
+ export declare type MessageContext = {
102
+ message: StreamMessage | undefined;
103
+ enabledMessageActions: string[];
104
+ isLastSentMessage: boolean | undefined;
105
+ mode: 'thread' | 'main';
106
+ };
107
+ export declare type ChannelActionsContext<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
108
+ channel: Channel<T>;
109
+ };
110
+ export declare type AttachmentListContext = {
111
+ messageId: string;
112
+ attachments: Attachment<DefaultStreamChatGenerics>[];
113
+ };
114
+ export declare type AvatarContext = {
115
+ name: string | undefined;
116
+ imageUrl: string | undefined;
117
+ size: number | undefined;
118
+ };
119
+ export declare type AttachmentPreviewListContext = {
120
+ attachmentUploads$: Observable<AttachmentUpload[]> | undefined;
121
+ retryUploadHandler: (f: File) => any;
122
+ deleteUploadHandler: (u: AttachmentUpload) => any;
123
+ };
124
+ export declare type IconContext = {
125
+ icon: Icon | undefined;
126
+ size: number | undefined;
127
+ };
128
+ export declare type LoadingIndicatorContext = {
129
+ size: number | undefined;
130
+ color: string | undefined;
131
+ };
132
+ export declare type MessageActionsBoxContext = {
133
+ isOpen: boolean;
134
+ isMine: boolean;
135
+ message: StreamMessage | undefined;
136
+ enabledActions: string[];
137
+ displayedActionsCountChaneHanler: (count: number) => any;
138
+ isEditingChangeHandler: (isEditing: boolean) => any;
139
+ };
140
+ export declare type MessageActionBoxItemContext = {
141
+ actionName: 'quote' | 'pin' | 'flag' | 'edit' | 'delete';
142
+ actionLabelOrTranslationKey: (() => string) | string;
143
+ actionHandler: () => any;
144
+ };
145
+ export declare type MessageActionItem = {
146
+ actionName: 'quote' | 'pin' | 'flag' | 'edit' | 'delete';
147
+ actionLabelOrTranslationKey: (() => string) | string;
148
+ isVisible: (enabledActions: string[], isMine: boolean, message: StreamMessage) => boolean;
149
+ actionHandler: (message: StreamMessage, isMine: boolean) => any;
150
+ };
151
+ export declare type MessageReactionsContext = {
152
+ messageId: string | undefined;
153
+ messageReactionCounts: {
154
+ [key in MessageReactionType]?: number;
155
+ };
156
+ isSelectorOpen: boolean;
157
+ latestReactions: ReactionResponse<DefaultStreamChatGenerics>[];
158
+ ownReactions: ReactionResponse<DefaultStreamChatGenerics>[];
159
+ isSelectorOpenChangeHandler: (isOpen: boolean) => any;
160
+ };
161
+ export declare type ModalContext = {
162
+ isOpen: boolean;
163
+ isOpenChangeHandler: (isOpen: boolean) => any;
164
+ content: TemplateRef<void>;
165
+ };
166
+ export declare type NotificationContext = {
167
+ type: NotificationType | undefined;
168
+ content: TemplateRef<void> | undefined;
169
+ };
170
+ export declare type ThreadHeaderContext = {
171
+ parentMessage: StreamMessage | undefined;
172
+ closeThreadHandler: Function;
173
+ };
174
+ export declare type MessageReactionType = 'angry' | 'haha' | 'like' | 'love' | 'sad' | 'wow';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "stream-chat-angular",
3
- "version": "2.20.2",
3
+ "version": "3.0.0-beta.10",
4
4
  "description": "Angular components to create chat conversations or livestream style chat",
5
5
  "author": "GetStream",
6
6
  "homepage": "https://getstream.io/chat/",
@@ -12,8 +12,7 @@
12
12
  "@angular/common": "^12.2.0 || ^13.0.0",
13
13
  "@angular/core": "^12.2.0 || ^13.0.0",
14
14
  "@ngx-translate/core": "^13.0.0 || ^14.0.0",
15
- "stream-chat": "^4.3.0 || ^5.0.0",
16
- "@stream-io/stream-chat-css": "2.6.0"
15
+ "stream-chat": "^6.3.0"
17
16
  },
18
17
  "dependencies": {
19
18
  "angular-mentions": "^1.4.0",
package/public-api.d.ts CHANGED
@@ -4,8 +4,11 @@ export * from './lib/theme.service';
4
4
  export * from './lib/attachment.service';
5
5
  export * from './lib/stream-i18n.service';
6
6
  export * from './lib/avatar/avatar.component';
7
+ export * from './lib/avatar-placeholder/avatar-placeholder.component';
7
8
  export * from './lib/icon/icon.component';
9
+ export * from './lib/icon-placeholder/icon-placeholder.component';
8
10
  export * from './lib/loading-indicator/loading-indicator.component';
11
+ export * from './lib/loading-indicator-placeholder/loading-indicator-placeholder.component';
9
12
  export * from './lib/message-actions-box/message-actions-box.component';
10
13
  export * from './lib/channel/channel.component';
11
14
  export * from './lib/channel-header/channel-header.component';
@@ -44,4 +47,5 @@ export * from './lib/stream-avatar.module';
44
47
  export * from './lib/stream-autocomplete-textarea.module';
45
48
  export * from './lib/stream-textarea.module';
46
49
  export * from './lib/injection-tokens';
50
+ export * from './lib/custom-templates.service';
47
51
  export * from './lib/types';