6.x.x rc

.github/workflows/workflow.yml

@@ -3,13 +3,11 @@ on:
   push:
     branches:
       - master
-      - angular-19
-      - test-update
-      - fix-voice-recording
+      - 6.x.x-rc
   pull_request:
     branches:
       - master
-      - 5.x.x-beta
+      - 6.x.x-rc
 jobs:
   workflow:
     runs-on: ubuntu-latest

package.json

@@ -1,6 +1,9 @@
 {
   "name": "stream-chat-angular",
   "version": "0.0.0",
+  "watch": {
+    "remove-stream-chat-augmentation": "dist/stream-chat-angular/stream-chat.d.ts.map"
+  },
   "scripts": {
     "prepare": "husky install",
     "postinstall": "npm run config:dev & npm run copy-css",
@@ -14,8 +17,14 @@
     "prestart:dev:customizations-example": "npm run config:dev",
     "start:dev:customizations-example": "rm -rf dist & npm run watch & (wait-on dist && ng serve customizations-example --host 0.0.0.0)",
     "build": "ng build stream-chat-angular",
+    "postbuild": "npm run remove-stream-chat-augmentation",
+    "delete-stream-chat-declaration": "rm -f dist/stream-chat-angular/stream-chat.d.ts",
+    "delete-stream-chat-declaration-map": "rm -f dist/stream-chat-angular/stream-chat.d.ts.map",
+    "remove-stream-chat-reference": "replace '/// <reference path=\"stream-chat.d.ts\" />' '' dist/stream-chat-angular/public-api.d.ts",
+    "remove-stream-chat-augmentation": "npm run delete-stream-chat-declaration && npm run delete-stream-chat-declaration-map && npm run remove-stream-chat-reference",
     "build:prod": "npm run copy-css && ng build stream-chat-angular --configuration production",
-    "watch": "ng build stream-chat-angular --watch --configuration development",
+    "postbuild:prod": "npm run remove-stream-chat-augmentation",
+    "watch": "ng build stream-chat-angular --watch --configuration development & npm-watch",
     "test": "rm -rf dist & npm run watch & (wait-on dist && ng run stream-chat-angular:test)",
     "test:ci": "ng run stream-chat-angular:test --browsers ChromeHeadlessCustom --watch false",
     "lint": "ng lint",
@@ -26,10 +35,10 @@
     "preanalyze:sample-app": "npm run build:sample-app",
     "analyze:sample-app": "webpack-bundle-analyzer dist/sample-app/stats.json",
     "copy-css": "rm -rf projects/stream-chat-angular/src/assets/styles && copyfiles --up 5 \"node_modules/@stream-io/stream-chat-css/dist/v2/**/*\" projects/stream-chat-angular/src/assets/styles && copyfiles --up 5 \"node_modules/@stream-io/stream-chat-css/dist/assets/**/*\" projects/stream-chat-angular/src/assets/assets",
-    "generate-docs": "npm run typedoc:services && npm run typedoc:components && npm run copy-docs:v5",
+    "generate-docs": "npm run typedoc:services && npm run typedoc:components && npm run copy-docs:v6",
     "typedoc:services": "typedoc --plugin typedoc-plugin-markdown --plugin typedoc-plugin-reference-excluder --cleanOutputDir true --excludeConstructors true --hideBreadcrumbs true --hideInPageTOC true --excludePrivate true --out temp-service-docs --exclude '!**/*service.ts' --excludeNotDocumented --tsconfig projects/stream-chat-angular/tsconfig.lib.json projects/stream-chat-angular/src/public-api.ts",
     "typedoc:components": "typedoc --plugin typedoc-plugin-markdown --plugin typedoc-plugin-reference-excluder --cleanOutputDir true --excludeConstructors true --sort source-order --hideBreadcrumbs true --hideInPageTOC true --excludePrivate true --excludeNotDocumented --out temp-component-docs --exclude '!**/*component.ts' --tsconfig projects/stream-chat-angular/tsconfig.lib.json projects/stream-chat-angular/src/public-api.ts",
-    "copy-docs:v5": "ts-node copy-generated-service-docs.ts ../docs/data/docs/chat-sdk/angular/v5-latest/06-services & (ts-node remove-generated-component-docs-content ../docs/data/docs/chat-sdk/angular/v5-latest/05-components && ts-node copy-generated-component-docs.ts ../docs/data/docs/chat-sdk/angular/v5-latest/05-components)"
+    "copy-docs:v6": "ts-node copy-generated-service-docs.ts ../docs/data/docs/chat-sdk/angular/06-services & (ts-node remove-generated-component-docs-content ../docs/data/docs/chat-sdk/angular/05-components && ts-node copy-generated-component-docs.ts ../docs/data/docs/chat-sdk/angular/05-components)"
   },
   "lint-staged": {
     "**/*": [
@@ -41,19 +50,9 @@
     "branches": [
       "master",
       {
-        "name": "test-update",
-        "prerelease": true,
-        "channel": "beta"
-      },
-      {
-        "name": "fix-voice-recording",
-        "prerelease": true,
-        "channel": "beta"
-      },
-      {
-        "name": "5.x.x-beta",
-        "prerelease": true,
-        "channel": "beta"
+        "name": "6.x.x-rc",
+        "prerelease": "rc",
+        "channel": "rc"
       }
     ],
     "dryRun": false,
@@ -125,10 +124,12 @@
     "emoji-regex": "^10.3.0",
     "fix-webm-duration": "^1.0.6",
     "ngx-float-ui": "^15.0.0",
+    "npm-watch": "^0.13.0",
     "pretty-bytes": "^6.1.1",
+    "replace": "^1.2.2",
     "rxjs": "~7.4.0",
     "starwars-names": "^1.6.0",
-    "stream-chat": "^8.60.0",
+    "stream-chat": "9.0.0",
     "ts-node": "^10.9.2",
     "tslib": "^2.3.0",
     "uuid": "^9.0.1",

projects/customizations-example/src/app/app.component.html

@@ -256,7 +256,7 @@
   let-latestMessageText="latestMessageText"
   let-latestMessage="latestMessage"
 >
-  <div>Channel title: {{ channel.title }}</div>
+  <div>Channel title: {{ channel.name }}</div>
   <div>Display title: {{ channelDisplayTitle }}</div>
   <div>Unread count: {{ unreadCount }}</div>
   <div>Latest message text: {{ latestMessageText }}</div>

projects/customizations-example/src/app/message-action/message-action.component.ts

@@ -1,6 +1,5 @@
 import { Component, Input } from '@angular/core';
 import {
-  DefaultStreamChatGenerics,
   MessageActionHandlerExtraParams,
   StreamMessage,
 } from 'stream-chat-angular';
@@ -13,9 +12,9 @@ import {
 export class MessageActionComponent {
   @Input() actionName!: 'quote' | 'pin' | 'flag' | 'edit' | 'delete';
   @Input() actionLabelOrTranslationKey!:
-    | ((m: StreamMessage<DefaultStreamChatGenerics>) => string)
+    | ((m: StreamMessage) => string)
     | string;
-  @Input() message!: StreamMessage<DefaultStreamChatGenerics>;
+  @Input() message!: StreamMessage;
   @Input() extraParams!: MessageActionHandlerExtraParams;
   @Input() actionHandler!: (
     message: StreamMessage,
@@ -36,9 +35,7 @@ export class MessageActionComponent {
   }
 
   getActionLabel(
-    actionLabelOrTranslationKey:
-      | ((m: StreamMessage<DefaultStreamChatGenerics>) => string)
-      | string
+    actionLabelOrTranslationKey: ((m: StreamMessage) => string) | string
   ) {
     return typeof actionLabelOrTranslationKey === 'string'
       ? actionLabelOrTranslationKey

projects/customizations-example/src/app/message-text/message-text.component.ts

@@ -1,17 +1,13 @@
 import { Component, Input } from '@angular/core';
-import { MessageResponseBase } from 'stream-chat';
-import { DefaultStreamChatGenerics, StreamMessage } from 'stream-chat-angular';
+import { StreamMessage } from 'stream-chat-angular';
 
 @Component({
   selector: 'app-message-text',
   templateUrl: './message-text.component.html',
   styleUrls: ['./message-text.component.scss'],
 })
 export class MessageTextComponent {
-  @Input() message:
-    | StreamMessage<DefaultStreamChatGenerics>
-    | undefined
-    | MessageResponseBase<DefaultStreamChatGenerics>;
+  @Input() message: StreamMessage | undefined | StreamMessage['quoted_message'];
   @Input() isQuoted: boolean = false;
   @Input() shouldTranslate: boolean = false;
   isExpanded = false;

projects/customizations-example/src/app/stream-chat.d.ts

@@ -0,0 +1,7 @@
+import { DefaultAttachmentData, DefaultChannelData } from 'stream-chat-angular';
+
+declare module 'stream-chat' {
+  interface CustomChannelData extends DefaultChannelData {}
+
+  interface CustomAttachmentData extends DefaultAttachmentData {}
+}

projects/stream-chat-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-angular",
-  "version": "5.14.0",
+  "version": "6.0.0-rc.8",
   "description": "Angular components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -20,9 +20,9 @@
     "@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "@breezystack/lamejs": "^1.2.7",
-    "@ngx-translate/core": "^14.0.0 || ^15.0.0",
+    "@ngx-translate/core": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "rxjs": "^7.4.0",
-    "stream-chat": "^8.60.0"
+    "stream-chat": "^9.0.0"
   },
   "peerDependenciesMeta": {
     "@breezystack/lamejs": {

projects/stream-chat-angular/src/assets/version.ts

@@ -1 +1 @@
-export const version = '5.14.0';
+export const version = '6.0.0-rc.8';

projects/stream-chat-angular/src/lib/attachment-configuration.service.spec.ts

@@ -70,7 +70,7 @@ describe('AttachmentConfigurationService', () => {
     const spy = jasmine.createSpy();
     service.customImageAttachmentConfigurationHandler = spy;
     const attachment: Attachment = {
-      img_url: 'http://url/to/img',
+      image_url: 'http://url/to/img',
       thumb_url: 'different/url',
     };
     const htmlElement = {
@@ -88,7 +88,7 @@ describe('AttachmentConfigurationService', () => {
 
   it('should provide the correct configuration for gallery image attachments', () => {
     const attachment: Attachment = {
-      img_url: 'http://url/to/img',
+      image_url: 'http://url/to/img',
     };
     const htmlElement = {
       'max-width': '300px',
@@ -112,7 +112,7 @@ describe('AttachmentConfigurationService', () => {
 
   it('should provide the correct configuration for image attachments inside the carousel', () => {
     const attachment: Attachment = {
-      img_url: 'http://url/to/img',
+      image_url: 'http://url/to/img',
     };
     const htmlElement = {
       'max-width': 'none',
@@ -191,7 +191,7 @@ describe('AttachmentConfigurationService', () => {
     const spy = jasmine.createSpy();
     service.customVideoAttachmentConfigurationHandler = spy;
     const attachment: Attachment = {
-      img_url: 'http://url/to/video',
+      image_url: 'http://url/to/video',
       thumb_url: 'different/url',
     };
     const htmlElement = {
@@ -348,7 +348,7 @@ describe('AttachmentConfigurationService', () => {
 
   it('should provide integer values for image resize and make sure that each dimension is at least the size restriction', () => {
     const attachment = {
-      img_url: 'http://url/to/img?ow=3534&oh=4417',
+      image_url: 'http://url/to/img?ow=3534&oh=4417',
     };
     const htmlElement = {
       'max-width': '300px',

projects/stream-chat-angular/src/lib/attachment-configuration.service.ts

@@ -2,7 +2,6 @@ import { Injectable } from '@angular/core';
 import { Attachment } from 'stream-chat';
 import {
   AttachmentConfigration,
-  DefaultStreamChatGenerics,
   ImageAttachmentConfiguration,
   VideoAttachmentConfiguration,
 } from './types';
@@ -13,35 +12,33 @@ import {
 @Injectable({
   providedIn: 'root',
 })
-export class AttachmentConfigurationService<
-  T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
-> {
+export class AttachmentConfigurationService {
   /**
    * A custom handler can be provided to override the default image attachment (images uploaded from files) configuration. By default the SDK uses fixed image height (a size that's known before image is loaded), if you override that with dynamic image height (for example: height: 100%) the scrolling logic inside the message list can break.
    */
   customImageAttachmentConfigurationHandler?: (
-    a: Attachment<T>,
+    a: Attachment,
     type: 'gallery' | 'single' | 'carousel',
     containerElement: HTMLElement
   ) => ImageAttachmentConfiguration;
   /**
    * A custom handler can be provided to override the default video attachment (videos uploaded from files) configuration. By default the SDK uses fixed height (a size that's known before video is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break.
    */
   customVideoAttachmentConfigurationHandler?: (
-    a: Attachment<T>,
+    a: Attachment,
     containerElement: HTMLElement
   ) => VideoAttachmentConfiguration;
   /**
    * A custom handler can be provided to override the default giphy attachment (GIFs sent with the /giphy command) configuration. By default the SDK uses fixed height (a size that's known before the GIF is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break.
    */
   customGiphyAttachmentConfigurationHandler?: (
-    a: Attachment<T>
+    a: Attachment
   ) => AttachmentConfigration;
   /**
    * A custom handler can be provided to override the default scraped image attachment (images found in links inside messages) configuration. By default the SDK uses fixed height (a size that's known before image is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break.
    */
   customScrapedImageAttachmentConfigurationHandler?: (
-    a: Attachment<T>
+    a: Attachment
   ) => AttachmentConfigration;
   /**
    * You can turn on/off thumbnail generation for video attachments
@@ -55,7 +52,7 @@ export class AttachmentConfigurationService<
    * @param element The default resizing logics reads the height/max-height and max-width propperties of this element and reduces file size based on the given values. File size reduction is done by Stream's CDN.
    */
   getImageAttachmentConfiguration(
-    attachment: Attachment<T>,
+    attachment: Attachment,
     location: 'gallery' | 'single' | 'carousel',
     element: HTMLElement
   ): ImageAttachmentConfiguration {
@@ -68,10 +65,8 @@ export class AttachmentConfigurationService<
     }
 
     const defaultOriginalDimension = 1000000;
-    const urlString = (attachment.img_url ||
-      attachment.thumb_url ||
-      attachment.image_url ||
-      '') as string;
+    const urlString =
+      attachment.img_url || attachment.thumb_url || attachment.image_url || '';
     let url: URL;
     try {
       url = new URL(urlString);
@@ -121,7 +116,7 @@ export class AttachmentConfigurationService<
    * @param element The default resizing logics reads the height/max-height and max-width propperties of this element and reduces file size based on the given values. File size reduction is done by Stream's CDN.
    */
   getVideoAttachmentConfiguration(
-    attachment: Attachment<T>,
+    attachment: Attachment,
     element: HTMLElement
   ): VideoAttachmentConfiguration {
     if (this.customVideoAttachmentConfigurationHandler) {
@@ -178,7 +173,7 @@ export class AttachmentConfigurationService<
    * @param attachment The attachment to configure
    */
   getGiphyAttachmentConfiguration(
-    attachment: Attachment<T>
+    attachment: Attachment
   ): AttachmentConfigration {
     if (this.customGiphyAttachmentConfigurationHandler) {
       return this.customGiphyAttachmentConfigurationHandler(attachment);
@@ -198,7 +193,7 @@ export class AttachmentConfigurationService<
    * @param attachment The attachment to configure
    */
   getScrapedImageAttachmentConfiguration(
-    attachment: Attachment<T>
+    attachment: Attachment
   ): AttachmentConfigration {
     if (this.customScrapedImageAttachmentConfigurationHandler) {
       return this.customScrapedImageAttachmentConfigurationHandler(attachment);

projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.html

@@ -21,7 +21,9 @@
         isVoiceMessage(attachment)
       "
       [class.str-chat__message-attachment-with-actions]="
-        attachment.actions && attachment.actions.length > 0
+        !isGalleryType(attachment) &&
+        attachment.actions &&
+        attachment.actions.length > 0
       "
       [class.str-chat__message-attachment--svg-image]="isSvg(attachment)"
     >
@@ -406,7 +408,13 @@
           </div>
         </ng-template>
       </ng-container>
-      <ng-container *ngIf="attachment.actions && attachment.actions.length > 0">
+      <ng-container
+        *ngIf="
+          !isGalleryType(attachment) &&
+          attachment.actions &&
+          attachment.actions.length > 0
+        "
+      >
         <ng-container
           *ngTemplateOutlet="
             (customTemplatesService.attachmentActionsTemplate$ | async) ||