Merge pull request #250 from GetStream/stream-chat-v6

Stream chat v6

Author: szuperaz

docusaurus/docs/Angular/basics/upgrade-v2.mdx

@@ -3,6 +3,15 @@ id: upgrade-v2
 title: Upgrade from v2
 ---
 
+## About v3
+
+This version's main focus was to enhance the customizability of the SDK, the two main features are:
+
+- there are many new customization points where you can provide your own template to override the default UI - our [customization guide](../concepts/customization.mdx) covers this topic in detail
+- you can take advantage of TypeScript generics to define custom fields for messages, message reactions, attachments, commands, channels or events - our [generics guide](../concepts/generics.mdx) explain this topic in more details
+
+Below you can find the list of breaking changes and instructions on how to update your code.
+
 ## Peer dependencies
 
 ### stream-chat-css
@@ -19,6 +28,21 @@ Or this if you were using CSS:
 
 It's still possible to individually import stylesheets you just have to replace the `~@stream-io/stream-chat-css/dist` prefix with `~stream-chat-angular/src/assets/styles`.
 
+### stream-chat
+
+Upgrade to stream-chat `^6.2.0`.
+
+You might need to update your code if you created custom components/services that used `stream-chat` in your application.
+
+The biggest change is that generic parameters were refactored into a single generic parameter, this has two major implications:
+
+- If you used generic parameters for handling messages, message reactions, attachments, commands, channels or events you have to change those generic parameters, the SDK uses the [`DefaultStreamChatGenerics`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) parameter instead of the individual `DefaultAttachmentType`, `DefaultChannelType`, `DefaultCommandType`, `DefaultEventType` `DefaultMessageType`, `DefaultReactionType` and `DefaultUserType` parameters.
+- If you are interacting with the `ChannelService` or `ChatClientService` you'll have to provide the [`DefaultStreamChatGenerics`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) parameter (or a descended) for message reactions, attachments, commands, channels or events (you don't need to provide it for messages as it's already part of the [`StreamMessage`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) class)
+
+Our [generics guide](../concepts/generics.mdx) explains this topic in more details.
+
+You can find the full list of breaking changes in stream-chat [v5](https://github.com/GetStream/stream-chat-js/releases/tag/v5.0.0) and [v6](https://github.com/GetStream/stream-chat-js/releases/tag/v6.0.0) on GitHub.
+
 ## Inputs removed in favor of channel capabilities
 
 The following inputs are removed:

docusaurus/docs/Angular/concepts/generics.mdx

@@ -0,0 +1,96 @@
+---
+id: generics
+title: Generics
+---
+
+The [`stream-chat-js`](https://github.com/GetStream/stream-chat-js) library takes advantage of [TypeScript generics](https://www.typescriptlang.org/docs/handbook/2/generics.html) to make it possible to define custom fileds on the following entities:
+
+1. [`Attachment`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
+2. [`ChannelResponse`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
+3. [`CommandVariants`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
+4. [`Event`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
+5. [`MessageBase`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
+6. [`Reaction`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
+7. [`User`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
+
+Those 7 overrides are combined to a single generic parameter called [`DefaultGenerics`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts).
+
+The Angular SDK extends the `DefaultGenerics` with custom fields creating the [`DefaultStreamChatGenerics`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) type.
+
+You can further extend the `DefaultStreamChatGenerics` type with your own custom fields, both the [`ChatClientService`](../services/ChatClientService.mdx) and [`ChannelService`](../services/ChannelService.mdx) accepts a generic parameter.
+
+Here is an example about custom fields with generics:
+
+```typescript
+import { Component, OnInit } from "@angular/core";
+import {
+  ChatClientService,
+  ChannelService,
+  StreamI18nService,
+  DefaultStreamChatGenerics,
+} from "stream-chat-angular";
+import { environment } from "../environments/environment";
+
+type MyStreamGenerics = DefaultStreamChatGenerics & {
+  attachmentType: { lat?: string; lon?: string };
+  channelType: {
+    color: string;
+    topic: "gardening" | "cats" | "f1";
+  };
+  userType: {
+    nickname: string;
+  };
+  messageType: {
+    isSecret: boolean;
+  };
+  reactionType: {
+    onlyVisibleToSender: boolean;
+  };
+};
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.scss"],
+})
+export class AppComponent implements OnInit {
+  constructor(
+    private chatService: ChatClientService<MyStreamGenerics>,
+    private channelService: ChannelService<MyStreamGenerics>,
+    private streamI18nService: StreamI18nService
+  ) {
+    void this.chatService.init(
+      environment.apiKey,
+      { id: environment.userId, nickname: "Zizi" },
+      environment.userToken
+    );
+    this.streamI18nService.setTranslation();
+  }
+
+  async ngOnInit() {
+    await this.channelService.init({
+      type: "messaging",
+      topic: "cats",
+    });
+    const channel = this.chatService.chatClient.channel(
+      "messaging",
+      "cat-photos",
+      { color: "blue", topic: "cats", name: "The bes cat photos" }
+    );
+
+    await channel.create();
+    await this.channelService.sendMessage(
+      "This is a secret message",
+      [{ type: "geolocation", lat: "40.7128", lon: "74.0060" }],
+      [],
+      undefined,
+      undefined,
+      { isSecret: true }
+    );
+    const message = channel.state.messages[0];
+    this.channelService.addReaction(message.id, "like", {
+      onlyVisibleToSender: true,
+    });
+  }
+}
+```

package-lock.json

@@ -101,7 +101,7 @@
     "emoji-regex": "^10.0.0",
     "pretty-bytes": "^5.6.0",
     "rxjs": "~6.6.0",
-    "stream-chat": "^5.6.0",
+    "stream-chat": "^6.2.0",
     "ts-node": "^10.2.1",
     "tslib": "^2.3.0",
     "uuidv4": "^6.2.12",

package.json

@@ -12,7 +12,7 @@
     "@angular/common": "^12.2.0 || ^13.0.0",
     "@angular/core": "^12.2.0 || ^13.0.0",
     "@ngx-translate/core": "^13.0.0 || ^14.0.0",
-    "stream-chat": "^4.3.0 || ^5.0.0"
+    "stream-chat": "^6.2.0"
   },
   "dependencies": {
     "angular-mentions": "^1.4.0",

projects/stream-chat-angular/package.json

@@ -6,6 +6,8 @@ import { ChannelService } from '../channel.service';
 import { ImageLoadService } from '../message-list/image-load.service';
 import { StreamI18nService } from '../stream-i18n.service';
 import { AttachmentListComponent } from './attachment-list.component';
+import { Attachment } from 'stream-chat';
+import { DefaultStreamChatGenerics } from '../types';
 
 describe('AttachmentListComponent', () => {
   let component: AttachmentListComponent;
@@ -285,7 +287,7 @@ describe('AttachmentListComponent', () => {
           frames: '6',
         },
       },
-    };
+    } as any as Attachment<DefaultStreamChatGenerics>;
     component.attachments = [attachment];
     component.ngOnChanges();
     fixture.detectChanges();
@@ -337,7 +339,7 @@ describe('AttachmentListComponent', () => {
           frames: '6',
         },
       },
-    };
+    } as any as Attachment<DefaultStreamChatGenerics>;
     component.messageId = 'message-id';
     component.attachments = [attachment];
     component.ngOnChanges();

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

@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 import { Action, Attachment } from 'stream-chat';
 import { ImageLoadService } from '../message-list/image-load.service';
-import { DefaultAttachmentType, ModalContext } from '../types';
+import { ModalContext, DefaultStreamChatGenerics } from '../types';
 import prettybytes from 'pretty-bytes';
 import { isImageAttachment } from '../is-image-attachment';
 import { ChannelService } from '../channel.service';
@@ -29,9 +29,9 @@ export class AttachmentListComponent implements OnChanges {
   /**
    * The attachments to display
    */
-  @Input() attachments: Attachment<DefaultAttachmentType>[] = [];
-  orderedAttachments: Attachment<DefaultAttachmentType>[] = [];
-  imagesToView: Attachment<DefaultAttachmentType>[] = [];
+  @Input() attachments: Attachment<DefaultStreamChatGenerics>[] = [];
+  orderedAttachments: Attachment<DefaultStreamChatGenerics>[] = [];
+  imagesToView: Attachment<DefaultStreamChatGenerics>[] = [];
   imagesToViewCurrentIndex = 0;
   @ViewChild('modalContent', { static: true })
   private modalContent!: TemplateRef<void>;
@@ -80,13 +80,13 @@ export class AttachmentListComponent implements OnChanges {
     this.imageLoadService.imageLoad$.next();
   }
 
-  hasFileSize(attachment: Attachment<DefaultAttachmentType>) {
+  hasFileSize(attachment: Attachment<DefaultStreamChatGenerics>) {
     return (
       attachment.file_size && Number.isFinite(Number(attachment.file_size))
     );
   }
 
-  getFileSize(attachment: Attachment<DefaultAttachmentType>) {
+  getFileSize(attachment: Attachment<DefaultStreamChatGenerics>) {
     return prettybytes(Number(attachment.file_size!));
   }
 

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

@@ -10,7 +10,7 @@ import { Channel } from 'stream-chat';
 import { ChannelListToggleService } from '../channel-list/channel-list-toggle.service';
 import { ChannelService } from '../channel.service';
 import { CustomTemplatesService } from '../custom-templates.service';
-import { ChannelActionsContext } from '../types';
+import { ChannelActionsContext, DefaultStreamChatGenerics } from '../types';
 
 /**
  * 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)
@@ -22,7 +22,7 @@ import { ChannelActionsContext } from '../types';
 })
 export class ChannelHeaderComponent implements OnInit, OnDestroy {
   channelActionsTemplate?: TemplateRef<ChannelActionsContext>;
-  activeChannel: Channel | undefined;
+  activeChannel: Channel<DefaultStreamChatGenerics> | undefined;
   canReceiveConnectEvents: boolean | undefined;
   private subscriptions: Subscription[] = [];
 

projects/stream-chat-angular/src/lib/channel-header/channel-header.component.ts

@@ -11,7 +11,7 @@ import { catchError, map, startWith } from 'rxjs/operators';
 import { Channel } from 'stream-chat';
 import { ChannelService } from '../channel.service';
 import { CustomTemplatesService } from '../custom-templates.service';
-import { ChannelPreviewContext } from '../types';
+import { ChannelPreviewContext, DefaultStreamChatGenerics } from '../types';
 import { ChannelListToggleService } from './channel-list-toggle.service';
 
 /**
@@ -23,7 +23,7 @@ import { ChannelListToggleService } from './channel-list-toggle.service';
   styles: [],
 })
 export class ChannelListComponent implements AfterViewInit, OnDestroy {
-  channels$: Observable<Channel[] | undefined>;
+  channels$: Observable<Channel<DefaultStreamChatGenerics>[] | undefined>;
   isError$: Observable<boolean>;
   isInitializing$: Observable<boolean>;
   isLoadingMoreChannels = false;
@@ -70,15 +70,17 @@ export class ChannelListComponent implements AfterViewInit, OnDestroy {
     this.isLoadingMoreChannels = false;
   }
 
-  trackByChannelId(index: number, item: Channel) {
+  trackByChannelId(index: number, item: Channel<DefaultStreamChatGenerics>) {
     return item.cid;
   }
 
   channelSelected() {
     this.channelListToggleService.channelSelected();
   }
 
-  getChannelPreviewContext(channel: Channel): ChannelPreviewContext {
+  getChannelPreviewContext(
+    channel: Channel<DefaultStreamChatGenerics>
+  ): ChannelPreviewContext<DefaultStreamChatGenerics> {
     return {
       channel,
     };

projects/stream-chat-angular/src/lib/channel-list/channel-list.component.ts

@@ -7,6 +7,7 @@ import {
   MessageResponse,
 } from 'stream-chat';
 import { ChannelService } from '../channel.service';
+import { DefaultStreamChatGenerics } from '../types';
 
 /**
  * The `ChannelPreview` component displays a channel preview in the channel list, it consists of the image, name and latest message of the channel.
@@ -20,7 +21,7 @@ export class ChannelPreviewComponent implements OnInit, OnDestroy {
   /**
    * The channel to be displayed
    */
-  @Input() channel: Channel | undefined;
+  @Input() channel: Channel<DefaultStreamChatGenerics> | undefined;
   isActive = false;
   isUnread = false;
   latestMessage: string = 'Nothing yet...';