stream-chat-angular 3.1.0 → 3.2.2

package/fesm2015/stream-chat-angular.js

@@ -17,7 +17,7 @@ import transliterate from '@stream-io/transliterate';
 import * as i7 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '3.1.0';
+const version = '3.2.2';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -327,7 +327,7 @@ class ChannelService {
             this.latestMessageDateByUserByChannelsSubject.asObservable();
     }
     /**
-     * Sets the given `channel` as active.
+     * Sets the given `channel` as active and marks it as read.
      * @param channel
      */
     setAsActiveChannel(channel) {
@@ -427,7 +427,7 @@ class ChannelService {
         });
     }
     /**
-     * Queries the channels with the given filters, sorts and options. More info about [channel querying](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript) can be found in the platform documentation.
+     * Queries the channels with the given filters, sorts and options. More info about [channel querying](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript) can be found in the platform documentation. By default the first channel in the list will be set as active channel and will be marked as read.
      * @param filters
      * @param sort
      * @param options
@@ -2529,6 +2529,10 @@ class MessageInputComponent {
         return !!this.message;
     }
     initTextarea() {
+        // cleanup previously built textarea
+        if (!this.canSendMessages) {
+            this.textareaRef = undefined;
+        }
         if (!this.canSendMessages || this.textareaRef || !this.textareaAnchor) {
             return;
         }
@@ -2906,6 +2910,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: ChannelService }]; } });
 
+const listUsers = (users) => {
+    let outStr = '';
+    const slicedArr = users.map((item) => item.name || item.id).slice(0, 5);
+    const restLength = users.length - slicedArr.length;
+    const commaSeparatedUsers = slicedArr.join(', ');
+    outStr = commaSeparatedUsers;
+    if (restLength > 0) {
+        outStr += ` +${restLength}`;
+    }
+    return outStr;
+};
+
+const getChannelDisplayText = (channel, currentUser) => {
+    var _a;
+    if ((_a = channel.data) === null || _a === void 0 ? void 0 : _a.name) {
+        return channel.data.name;
+    }
+    if (channel.state.members && Object.keys(channel.state.members).length > 0) {
+        const members = Object.values(channel.state.members)
+            .map((m) => m.user || { id: m.user_id })
+            .filter((m) => m.id !== currentUser.id);
+        return listUsers(members);
+    }
+    return channel.id;
+};
+
 const getDeviceWidth = () => {
     const width = window.innerWidth;
     if (width < 768)
@@ -2990,11 +3020,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * 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)
  */
 class ChannelHeaderComponent {
-    constructor(channelService, channelListToggleService, customTemplatesService, cdRef) {
+    constructor(channelService, channelListToggleService, customTemplatesService, cdRef, chatClientService) {
         this.channelService = channelService;
         this.channelListToggleService = channelListToggleService;
         this.customTemplatesService = customTemplatesService;
         this.cdRef = cdRef;
+        this.chatClientService = chatClientService;
         this.subscriptions = [];
         this.channelService.activeChannel$.subscribe((c) => {
             var _a, _b;
@@ -3031,9 +3062,26 @@ class ChannelHeaderComponent {
         var _a, _b;
         return { watcherCount: ((_b = (_a = this.activeChannel) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.watcher_count) || 0 };
     }
+    get displayText() {
+        if (!this.activeChannel) {
+            return '';
+        }
+        return getChannelDisplayText(this.activeChannel, this.chatClientService.chatClient.user);
+    }
+    get avatarName() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if ((_b = (_a = this.activeChannel) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.name) {
+            return (_d = (_c = this.activeChannel) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.name;
+        }
+        const otherMembers = Object.values(((_e = this.activeChannel) === null || _e === void 0 ? void 0 : _e.state.members) || {}).filter((m) => m.user_id !== this.chatClientService.chatClient.user.id);
+        if (otherMembers.length === 1) {
+            return ((_f = otherMembers[0].user) === null || _f === void 0 ? void 0 : _f.name) || ((_g = otherMembers[0].user) === null || _g === void 0 ? void 0 : _g.name);
+        }
+        return '#';
+    }
 }
-ChannelHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelHeaderComponent, deps: [{ token: ChannelService }, { token: ChannelListToggleService }, { token: CustomTemplatesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ChannelHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0, template: "<div class=\"str-chat__header-livestream\">\n  <div\n    class=\"str-chat__header-hamburger\"\n    (click)=\"toggleMenu($event)\"\n    (keyup.enter)=\"toggleMenu($event)\"\n  >\n    <stream-icon-placeholder icon=\"menu\"></stream-icon-placeholder>\n  </div>\n  <stream-avatar-placeholder\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ activeChannel?.data?.name }}\"\n  ></stream-avatar-placeholder>\n  <div class=\"str-chat__header-livestream-left\">\n    <p data-testid=\"name\" class=\"str-chat__header-livestream-left--title\">\n      {{ activeChannel?.data?.name }}\n    </p>\n    <p data-testid=\"info\" class=\"str-chat__header-livestream-left--members\">\n      {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n      {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n      translate:watcherCountParam) : ''}}\n    </p>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: getChannelActionsContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i9.TranslatePipe } });
+ChannelHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelHeaderComponent, deps: [{ token: ChannelService }, { token: ChannelListToggleService }, { token: CustomTemplatesService }, { token: i0.ChangeDetectorRef }, { token: ChatClientService }], target: i0.ɵɵFactoryTarget.Component });
+ChannelHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0, template: "<div class=\"str-chat__header-livestream\">\n  <div\n    class=\"str-chat__header-hamburger\"\n    (click)=\"toggleMenu($event)\"\n    (keyup.enter)=\"toggleMenu($event)\"\n  >\n    <stream-icon-placeholder icon=\"menu\"></stream-icon-placeholder>\n  </div>\n  <stream-avatar-placeholder\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ avatarName }}\"\n  ></stream-avatar-placeholder>\n  <div class=\"str-chat__header-livestream-left\">\n    <p data-testid=\"name\" class=\"str-chat__header-livestream-left--title\">\n      {{ displayText }}\n    </p>\n    <p data-testid=\"info\" class=\"str-chat__header-livestream-left--members\">\n      {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n      {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n      translate:watcherCountParam) : ''}}\n    </p>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: getChannelActionsContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i9.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -3041,18 +3089,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                     templateUrl: './channel-header.component.html',
                     styles: [],
                 }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChannelListToggleService }, { type: CustomTemplatesService }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChannelListToggleService }, { type: CustomTemplatesService }, { type: i0.ChangeDetectorRef }, { type: ChatClientService }]; } });
 
 /**
  * The `ChannelPreview` component displays a channel preview in the channel list, it consists of the image, name and latest message of the channel.
  */
 class ChannelPreviewComponent {
-    constructor(channelService, ngZone) {
+    constructor(channelService, ngZone, chatClientService) {
         this.channelService = channelService;
         this.ngZone = ngZone;
+        this.chatClientService = chatClientService;
         this.isActive = false;
         this.isUnread = false;
-        this.latestMessage = 'Nothing yet...';
+        this.latestMessage = 'streamChat.Nothing yet...';
         this.subscriptions = [];
         this.canSendReadEvents = true;
     }
@@ -3083,12 +3132,21 @@ class ChannelPreviewComponent {
         return (_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.image;
     }
     get avatarName() {
-        var _a, _b;
-        return (_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.name;
+        var _a, _b, _c, _d, _e, _f, _g;
+        if ((_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.name) {
+            return (_d = (_c = this.channel) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.name;
+        }
+        const otherMembers = Object.values(((_e = this.channel) === null || _e === void 0 ? void 0 : _e.state.members) || {}).filter((m) => m.user_id !== this.chatClientService.chatClient.user.id);
+        if (otherMembers.length === 1) {
+            return ((_f = otherMembers[0].user) === null || _f === void 0 ? void 0 : _f.name) || ((_g = otherMembers[0].user) === null || _g === void 0 ? void 0 : _g.name);
+        }
+        return '#';
     }
     get title() {
-        var _a, _b;
-        return (_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.name;
+        if (!this.channel) {
+            return '';
+        }
+        return getChannelDisplayText(this.channel, this.chatClientService.chatClient.user);
     }
     setAsActiveChannel() {
         void this.channelService.setAsActiveChannel(this.channel);
@@ -3097,7 +3155,7 @@ class ChannelPreviewComponent {
         this.ngZone.run(() => {
             var _a, _b, _c;
             if (((_a = this.channel) === null || _a === void 0 ? void 0 : _a.state.messages.length) === 0) {
-                this.latestMessage = 'Nothing yet...';
+                this.latestMessage = 'streamChat.Nothing yet...';
                 return;
             }
             if (!event.message ||
@@ -3120,8 +3178,8 @@ class ChannelPreviewComponent {
         }
     }
 }
-ChannelPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelPreviewComponent, deps: [{ token: ChannelService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChannelPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0, template: "<button\n  class=\"str-chat__channel-preview-messenger\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n  (click)=\"setAsActiveChannel()\"\n  data-testid=\"channel-preview-container\"\n>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar-placeholder\n      imageUrl=\"{{ avatarImage }}\"\n      name=\"{{ avatarName }}\"\n      [size]=\"40\"\n    ></stream-avatar-placeholder>\n  </div>\n  <div class=\"str-chat__channel-preview-messenger--right\">\n    <div class=\"str-chat__channel-preview-messenger--name\">\n      <span data-testid=\"channel-preview-title\">{{ title }}</span>\n    </div>\n    <div\n      data-testid=\"latest-message\"\n      class=\"str-chat__channel-preview-messenger--last-message\"\n    >\n      {{ latestMessage | translate }}\n    </div>\n  </div>\n</button>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }], pipes: { "translate": i9.TranslatePipe } });
+ChannelPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelPreviewComponent, deps: [{ token: ChannelService }, { token: i0.NgZone }, { token: ChatClientService }], target: i0.ɵɵFactoryTarget.Component });
+ChannelPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0, template: "<button\n  class=\"str-chat__channel-preview-messenger\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n  (click)=\"setAsActiveChannel()\"\n  data-testid=\"channel-preview-container\"\n>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar-placeholder\n      imageUrl=\"{{ avatarImage }}\"\n      name=\"{{ avatarName }}\"\n      [size]=\"40\"\n    ></stream-avatar-placeholder>\n  </div>\n  <div class=\"str-chat__channel-preview-messenger--right\">\n    <div\n      style=\"position: relative\"\n      class=\"str-chat__channel-preview-messenger--name\"\n    >\n      <span data-testid=\"channel-preview-title\">{{ title }}</span>\n    </div>\n    <div\n      data-testid=\"latest-message\"\n      class=\"str-chat__channel-preview-messenger--last-message\"\n    >\n      {{ latestMessage | translate }}\n    </div>\n  </div>\n</button>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }], pipes: { "translate": i9.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelPreviewComponent, decorators: [{
             type: Component,
             args: [{
@@ -3129,7 +3187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                     templateUrl: './channel-preview.component.html',
                     styles: [],
                 }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: i0.NgZone }]; }, propDecorators: { channel: [{
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: i0.NgZone }, { type: ChatClientService }]; }, propDecorators: { channel: [{
                 type: Input
             }] } });
 
@@ -3195,35 +3253,6 @@ const parseDate = (date) => {
     return parsedTime.calendar();
 };
 
-const getReadByText = (users) => {
-    let outStr = '';
-    const slicedArr = users.map((item) => item.name || item.id).slice(0, 5);
-    const restLength = users.length - slicedArr.length;
-    if (slicedArr.length === 1) {
-        outStr = `${slicedArr[0]} `;
-    }
-    else if (slicedArr.length === 2) {
-        // joins all with "and" but =no commas
-        // example: "bob and sam"
-        outStr = `${slicedArr[0]} and ${slicedArr[1]}`;
-    }
-    else if (slicedArr.length > 2) {
-        // joins all with commas, but last one gets ", and" (oxford comma!)
-        // example: "bob, joe, sam and 4 more"
-        if (restLength === 0) {
-            // mutate slicedArr to remove last user to display it separately
-            const lastUser = slicedArr.splice(slicedArr.length - 2, 1)[0];
-            const commaSeparatedUsers = slicedArr.join(', ');
-            outStr = `${commaSeparatedUsers}, and ${lastUser}`;
-        }
-        else {
-            const commaSeparatedUsers = slicedArr.join(', ');
-            outStr = `${commaSeparatedUsers} and ${restLength} more`;
-        }
-    }
-    return outStr;
-};
-
 const emojiReactionsMapping = {
     like: '👍',
     angry: '😠',
@@ -3421,7 +3450,7 @@ class MessageComponent {
         return ((_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.id) === ((_c = this.user) === null || _c === void 0 ? void 0 : _c.id);
     }
     get readByText() {
-        return getReadByText(this.message.readBy);
+        return listUsers(this.message.readBy);
     }
     get lastReadUser() {
         var _a;
@@ -4424,5 +4453,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AttachmentListComponent, AttachmentPreviewListComponent, AttachmentService, AutocompleteTextareaComponent, AvatarComponent, AvatarPlaceholderComponent, ChannelComponent, ChannelHeaderComponent, ChannelListComponent, ChannelListToggleService, ChannelPreviewComponent, ChannelService, ChatClientService, CustomTemplatesService, EmojiInputService, IconComponent, IconPlaceholderComponent, ImageLoadService, LoadingIndicatorComponent, LoadingIndicatorPlaceholderComponent, MessageActionsBoxComponent, MessageComponent, MessageInputComponent, MessageInputConfigService, MessageListComponent, MessageReactionsComponent, ModalComponent, NotificationComponent, NotificationListComponent, NotificationService, StreamAutocompleteTextareaModule, StreamAvatarModule, StreamChatModule, StreamI18nService, StreamTextareaModule, TextareaComponent, TextareaDirective, ThemeService, ThreadComponent, TransliterationService, createMessagePreview, getDeviceWidth, getGroupStyles, getReadBy, getReadByText, isImageAttachment, isImageFile, parseDate, textareaInjectionToken };
+export { AttachmentListComponent, AttachmentPreviewListComponent, AttachmentService, AutocompleteTextareaComponent, AvatarComponent, AvatarPlaceholderComponent, ChannelComponent, ChannelHeaderComponent, ChannelListComponent, ChannelListToggleService, ChannelPreviewComponent, ChannelService, ChatClientService, CustomTemplatesService, EmojiInputService, IconComponent, IconPlaceholderComponent, ImageLoadService, LoadingIndicatorComponent, LoadingIndicatorPlaceholderComponent, MessageActionsBoxComponent, MessageComponent, MessageInputComponent, MessageInputConfigService, MessageListComponent, MessageReactionsComponent, ModalComponent, NotificationComponent, NotificationListComponent, NotificationService, StreamAutocompleteTextareaModule, StreamAvatarModule, StreamChatModule, StreamI18nService, StreamTextareaModule, TextareaComponent, TextareaDirective, ThemeService, ThreadComponent, TransliterationService, createMessagePreview, getDeviceWidth, getGroupStyles, getReadBy, isImageAttachment, isImageFile, listUsers, parseDate, textareaInjectionToken };
 //# sourceMappingURL=stream-chat-angular.js.map