Merge pull request #672 from GetStream/custom-autocompletes

feat: custom autocompletes

Author: szuperaz

README.md

@@ -52,6 +52,13 @@ Check out our current openings and apply via [Stream's website](https://getstrea
 
 ### Install with NPM
 
+Run this command if you are using **Angular 19**:
+
+```shell
+# Some SDK depedencies doesn't yet have official support for Angular 19, so we need to add --force flag until then
+npm install stream-chat-angular stream-chat @ngx-translate/core@15 ngx-float-ui@18 --force
+```
+
 Supported Angular versions: **Angular 15-18**
 
 Run this command if you are using **Angular 18**:

copy-generated-component-docs.ts

@@ -62,19 +62,19 @@ fs.readdir(generatedDocsPath, (err: any, files: string[]) => {
         const propertiesContent = extractProperties(generatedFileContent);
 
         fs.readFile(
-          `${componentDocsPath}/${file}x`,
+          `${componentDocsPath}/${file}`,
           'utf8',
           (err: any, docFile: any) => {
             if (err)
               throw new Error(
-                `${componentDocsPath}/${file}x couldn't be opened, error: ${err}, make sure that this file exists`
+                `${componentDocsPath}/${file} couldn't be opened, error: ${err}, make sure that this file exists`
               );
 
             if (file !== '_category_.json') {
               const result = insertGeneratedParts(docFile, propertiesContent);
 
               fs.writeFile(
-                `${componentDocsPath}/${file}x`,
+                `${componentDocsPath}/${file}`,
                 result,
                 'utf8',
                 (err: any) => {

copy-generated-service-docs.ts

@@ -31,18 +31,31 @@ fs.readdir(sourcePath, (err: any, files: string[]) => {
       }
 
       // Remove the thre prefix from the title
-      const result = data
-        .replace(/# Class:/g, '#')
-        .replace('<T\\>', '')
-        .replace('\\', '');
+      const result =
+        `---` +
+        `\n` +
+        `title: ${file.replace('.md', '')}` +
+        `\n` +
+        `slug: /chat/docs/sdk/angular/services/${file.replace('.md', '')}/` +
+        `\n` +
+        `---` +
+        '\n\n' +
+        data
+          .replace(`# Class: ${file.replace('.md', '')}`, '')
+          .replace(
+            /\b(?!README)(\w+)\.md\b/g,
+            '/chat/docs/sdk/angular/services/$1'
+          )
+          .replace('<T\\>', '')
+          .replace('\\', '');
 
       fs.writeFile(`${sourcePath}/${file}`, result, 'utf8', (err: any) => {
         if (err) {
           throw err;
         }
         fs.copyFile(
           `${sourcePath}/${file}`,
-          `${serviceDocsTargetPath}/${file}x`,
+          `${serviceDocsTargetPath}/${file}`,
           (err: any) => {
             if (err) {
               throw err;

package.json

@@ -25,7 +25,11 @@
     "build:sample-app": "npm run config:prod && ng build --stats-json --project sample-app",
     "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"
+    "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",
+    "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)"
   },
   "lint-staged": {
     "**/*": [

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

@@ -40,13 +40,13 @@ export class AttachmentService<
    */
   attachmentUploadInProgressCounter$ = new BehaviorSubject<number>(0);
   /**
-   * Emits the state of the uploads ([`AttachmentUpload[]`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts)), it adds a state (`success`, `error` or `uploading`) to each file the user selects for upload. It is used by the [`AttachmentPreviewList`](../components/AttachmentPreviewListComponent.mdx) to display the attachment previews.
+   * Emits the state of the uploads ([`AttachmentUpload[]`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts)), it adds a state (`success`, `error` or `uploading`) to each file the user selects for upload. It is used by the [`AttachmentPreviewList`](/chat/docs/sdk/angular/components/AttachmentPreviewListComponent/) to display the attachment previews.
    */
   attachmentUploads$: Observable<AttachmentUpload[]>;
   /**
    * You can get and set the list if uploaded custom attachments
    *
-   * By default the SDK components won't display these, but you can provide your own `customAttachmentPreviewListTemplate$` and `customAttachmentListTemplate$` for the [`CustomTemplatesService`](../../services/CustomTemplatesService).
+   * By default the SDK components won't display these, but you can provide your own `customAttachmentPreviewListTemplate$` and `customAttachmentListTemplate$` for the [`CustomTemplatesService`](/chat/docs/sdk/angular/services/CustomTemplatesService/).
    */
   customAttachments$ = new BehaviorSubject<Attachment<T>[]>([]);
   /**
@@ -210,7 +210,7 @@ export class AttachmentService<
   /**
    * You can add custom `image`, `video` and `file` attachments using this method.
    *
-   * Note: If you just want to use your own CDN for file uploads, you don't necessary need this method, you can just specify you own upload function in the [`ChannelService`](./ChannelService.mdx)
+   * Note: If you just want to use your own CDN for file uploads, you don't necessary need this method, you can just specify you own upload function in the [`ChannelService`](/chat/docs/sdk/angular/services/ChannelService/)
    * @param attachment
    */
   addAttachment(attachment: Attachment<T>) {

projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts

@@ -9,7 +9,7 @@ import {
 } from '../types';
 
 /**
- * The `AvatarPlaceholder` component displays the [default avatar](./AvatarComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it.
+ * The `AvatarPlaceholder` component displays the [default avatar](/chat/docs/sdk/angular/components/AvatarComponent/) unless a [custom template](/chat/docs/sdk/angular/services/CustomTemplatesService/) is provided. This component is used by the SDK internally, you likely won't need to use it.
  */
 @Component({
   selector: 'stream-avatar-placeholder',

projects/stream-chat-angular/src/lib/channel.service.ts

@@ -60,7 +60,7 @@ export class ChannelService<
    * Emits the currently loaded and [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel list.
    *
    * :::important
-   * If you want to subscribe to channel events, you need to manually reenter Angular's change detection zone, our [Change detection guide](../concepts/change-detection.mdx) explains this in detail.
+   * If you want to subscribe to channel events, you need to manually reenter Angular's change detection zone, our [Change detection guide](/chat/docs/sdk/angular/concepts/change-detection/) explains this in detail.
    * :::
    */
   channels$: Observable<Channel<T>[] | undefined>;
@@ -72,7 +72,7 @@ export class ChannelService<
    * Emits the currently active channel.
    *
    * :::important
-   * If you want to subscribe to channel events, you need to manually reenter Angular's change detection zone, our [Change detection guide](../concepts/change-detection.mdx) explains this in detail.
+   * If you want to subscribe to channel events, you need to manually reenter Angular's change detection zone, our [Change detection guide](/chat/docs/sdk/angular/concepts/change-detection/) explains this in detail.
    * :::
    *
    * The active channel will always be marked as read when a new message is received
@@ -121,7 +121,7 @@ export class ChannelService<
   /**
    * If you're using [semantic filters for moderation](https://getstream.io/automated-moderation/docs/automod_configuration/?q=semantic%20filters) you can set up rules for bouncing messages.
    *
-   * If a message is bounced, it will be emitted via this `Observable`. The built-in [`MessageBouncePrompt` component](../../components/MessageBouncePromptComponent) will display the bounce option to the user if a bounced message is clicked.
+   * If a message is bounced, it will be emitted via this `Observable`. The built-in [`MessageBouncePrompt` component](/chat/docs/sdk/angular/components/MessageBouncePromptComponent/) will display the bounce option to the user if a bounced message is clicked.
    */
   bouncedMessage$: BehaviorSubject<StreamMessage<T> | undefined>;
   /**
@@ -137,7 +137,7 @@ export class ChannelService<
    */
   activeChannelUnreadCount?: number;
   /**
-   * Custom event handler to call if a new message received from a channel that is not being watched, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
+   * Custom event handler to call if a new message received from a channel that is not being watched, provide an event handler if you want to override the [default channel list ordering](/chat/docs/sdk/angular/services/ChannelService/#channels/)
    *
    * If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
    */
@@ -149,7 +149,7 @@ export class ChannelService<
     ) => void
   ) => void;
   /**
-   * Custom event handler to call when the user is added to a channel, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels).
+   * Custom event handler to call when the user is added to a channel, provide an event handler if you want to override the [default channel list ordering](/chat/docs/sdk/angular/services/ChannelService/#channels/).
    *
    * If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
    */
@@ -161,7 +161,7 @@ export class ChannelService<
     ) => void
   ) => void;
   /**
-   * Custom event handler to call when the user is removed from a channel, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels).
+   * Custom event handler to call when the user is removed from a channel, provide an event handler if you want to override the [default channel list ordering](/chat/docs/sdk/angular/services/ChannelService/#channels/).
    *
    * If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
    */
@@ -173,7 +173,7 @@ export class ChannelService<
     ) => void
   ) => void;
   /**
-   * Custom event handler to call when a channel is deleted, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels).
+   * Custom event handler to call when a channel is deleted, provide an event handler if you want to override the [default channel list ordering](/chat/docs/sdk/angular/services/ChannelService/#channels/).
    *
    * If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
    */
@@ -189,7 +189,7 @@ export class ChannelService<
     parentMessageSetter: (message: StreamMessage<T> | undefined) => void
   ) => void;
   /**
-   * Custom event handler to call when a channel is updated, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels).
+   * Custom event handler to call when a channel is updated, provide an event handler if you want to override the [default channel list ordering](/chat/docs/sdk/angular/services/ChannelService/#channels/).
    *
    * If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
    */
@@ -205,7 +205,7 @@ export class ChannelService<
     parentMessageSetter: (message: StreamMessage | undefined) => void
   ) => void;
   /**
-   * Custom event handler to call when a channel is truncated, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels).
+   * Custom event handler to call when a channel is truncated, provide an event handler if you want to override the [default channel list ordering](/chat/docs/sdk/angular/services/ChannelService/#channels/).
    *
    * If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
    */
@@ -221,7 +221,7 @@ export class ChannelService<
     parentMessageSetter: (message: StreamMessage<T> | undefined) => void
   ) => void;
   /**
-   * Custom event handler to call when a channel becomes hidden, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels).
+   * Custom event handler to call when a channel becomes hidden, provide an event handler if you want to override the [default channel list ordering](/chat/docs/sdk/angular/services/ChannelService/#channels/).
    *
    * If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
    */
@@ -237,7 +237,7 @@ export class ChannelService<
     parentMessageSetter: (message: StreamMessage<T> | undefined) => void
   ) => void;
   /**
-   * Custom event handler to call when a channel becomes visible, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels).
+   * Custom event handler to call when a channel becomes visible, provide an event handler if you want to override the [default channel list ordering](/chat/docs/sdk/angular/services/ChannelService/#channels/).
    *
    * If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
    */
@@ -253,7 +253,7 @@ export class ChannelService<
     parentMessageSetter: (message: StreamMessage<T> | undefined) => void
   ) => void;
   /**
-   * Custom event handler to call if a new message received from a channel that is being watched, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels).
+   * Custom event handler to call if a new message received from a channel that is being watched, provide an event handler if you want to override the [default channel list ordering](/chat/docs/sdk/angular/services/ChannelService/#channels/).
    *
    * If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
    */
@@ -775,7 +775,7 @@ export class ChannelService<
   }
 
   /**
-   * Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observables. Useful when disconnecting a chat user, use in combination with [`disconnectUser`](./ChatClientService.mdx/#disconnectuser).
+   * Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observables. Useful when disconnecting a chat user, use in combination with [`disconnectUser`](/chat/docs/sdk/angular/services/ChatClientService/#disconnectuser/).
    */
   reset() {
     this.deselectActiveChannel();
@@ -961,7 +961,7 @@ export class ChannelService<
 
   /**
    * Uploads files to the channel. If you want to know more about [file uploads](https://getstream.io/chat/docs/javascript/file_uploads/?language=javascript) check out the platform documentation.
-   * @param uploads the attachments to upload (output of the [`AttachmentService`](./AttachmentService.mdx))
+   * @param uploads the attachments to upload (output of the [`AttachmentService`](/chat/docs/sdk/angular/services/AttachmentService/))
    * @returns the result of file upload requests
    */
   async uploadAttachments(
@@ -1042,7 +1042,7 @@ export class ChannelService<
 
   /**
    * Deletes an uploaded file by URL. If you want to know more about [file uploads](https://getstream.io/chat/docs/javascript/file_uploads/?language=javascript) check out the platform documentation
-   * @param attachmentUpload Attachment to be deleted (output of the [`AttachmentService`](./AttachmentService.mdx))
+   * @param attachmentUpload Attachment to be deleted (output of the [`AttachmentService`](/chat/docs/sdk/angular/services/AttachmentService/))
    */
   async deleteAttachment(attachmentUpload: AttachmentUpload) {
     const channel = this.activeChannelSubject.getValue()!;

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

@@ -6,7 +6,7 @@ import { ThemeService } from '../theme.service';
 import { CustomTemplatesService } from '../custom-templates.service';
 
 /**
- * The `Channel` component is a container component that displays the [`ChannelHeader`](./ChannelHeaderComponent.mdx), [`MessageList`](./MessageListComponent.mdx), [`NotificationList`](./NotificationListComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components. You can also provide the [`Thread`](./ThreadComponent.mdx) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
+ * The `Channel` component is a container component that displays the [`ChannelHeader`](/chat/docs/sdk/angular/components/ChannelHeaderComponent/), [`MessageList`](/chat/docs/sdk/angular/components/MessageListComponent), [`NotificationList`](/chat/docs/sdk/angular/components/NotificationListComponent/) and [`MessageInput`](/chat/docs/sdk/angular/components/MessageInputComponent/) components. You can also provide the [`Thread`](/chat/docs/sdk/angular/components/ThreadComponent/) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
  */
 @Component({
   selector: 'stream-channel',