Merge pull request #357 from GetStream/pin-messages

Pin messages

Author: szuperaz

docusaurus/docs/Angular/assets/pin-action-screenshot.png

@@ -0,0 +1,75 @@
+---
+id: pin-messages
+title: Pin messages
+---
+
+import PinActionScreenshot from "../assets/pin-action-screenshot.png";
+import PinnedMessageScreenshot from "../assets/pinned-message-screenshot.png";
+
+Pinning messages can be a useful feature inside your chat application, `stream-chat-angular` supports this feature, but you have to provide the UI template for the pinned messages. This guide shows you how you can set up this functionality.
+
+## Pin and unpin actions
+
+The default message action box contains the pin/unpin action, this action marks a message as pinned/unpinned.
+
+<img src={PinActionScreenshot} width="500" />
+
+:::note
+If you don't see the action, you might have [authorize the pin action](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript).
+:::
+
+## Pinned messages stream
+
+The [`activeChannelPinnedMessages$`](../services/ChannelService.mdx/#activechannelpinnedmessages) stream of the [`ChannelService`](../services/ChannelService.mdx) emits the list of currently pinned messages inside the active channel.
+
+```typescript
+this.channelService.activeChannelPinnedMessages$.subscribe(console.log);
+```
+
+- The initial value is retrived from the [channel query response](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript&q=pin#channelstate-response)
+- After that, all pin and unpin actions are reflected in the emitted list
+
+## Pinned messages UI
+
+Once we know the list of pinned messages, we should display them somewhere users can easily spot them. You can display pinned messages anywhere you want to, however a common place could be the top/bottom of the message list, this example will display pinned messages at the bottom of the message list.
+
+You have to provide the template for the pinned messages:
+
+```html
+<stream-notification-list></stream-notification-list>
+<div
+  style="padding: 8px; background: #e1f5fe"
+  *ngFor="
+          let message of channelService.activeChannelPinnedMessages$ | async
+        "
+>
+  {{ message.text }}
+</div>
+<stream-message-input></stream-message-input>
+```
+
+The `message` variable has [`StreamMessage`](../types/stream-message.mdx) type, so you can access all fields defined there inside your template.
+
+<img src={PinnedMessageScreenshot} width="500" />
+
+## Jump to a pinned message
+
+Let's add a click event handler to the pinned message, and jump to the message (works for channel and thread messages as well):
+
+```typescript
+jumpToMessage(message: StreamMessage) {
+  this.channelService.jumpToMessage(message.id, message.parent_id);
+}
+```
+
+```html
+<div
+  style="padding: 8px; background: #e1f5fe"
+  *ngFor="
+          let message of channelService.activeChannelPinnedMessages$ | async
+        "
+  (click)="jumpToMessage(message)"
+>
+  {{ message.text }}
+</div>
+```

docusaurus/docs/Angular/assets/pinned-message-screenshot.png

@@ -36,6 +36,8 @@ export class CustomMessageComponent {
 
 ## Customization
 
+You can use the [`AttachmentConfigurationService`](../services/AttachmentConfigurationService.mdx) to override certain attributes of attachments.
+
 You can provide your own attachment list component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
 
 [//]: # "Start of generated content"

docusaurus/docs/Angular/code-examples/pin-messages.mdx

@@ -117,7 +117,7 @@
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "3.0.0-theming2.6",
+    "@stream-io/stream-chat-css": "3.0.0-theming2.8",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "^1.4.0",
     "dayjs": "^1.10.7",

docusaurus/docs/Angular/components/AttachmentListComponent.mdx

@@ -37,6 +37,7 @@ export const en = {
     'Message has been successfully flagged':
       'Message has been successfully flagged',
     'Message pinned': 'Message pinned',
+    'Message unpinned': 'Message unpinned',
     Mute: 'Mute',
     New: 'New',
     'New Messages!': 'New Messages!',
@@ -95,6 +96,7 @@ export const en = {
     "You can't send thread replies in this channel":
       "You can't send thread replies in this channel",
     'Unsupported file type: {{type}}': 'Unsupported file type: {{type}}',
+    'Message not found': 'Message not found',
     'No chats here yet…': 'No chats here yet…',
     'user is typing': '{{ user }} is typing',
     'users are typing': '{{ users }} are typing',

package-lock.json

@@ -0,0 +1,201 @@
+import { TestBed } from '@angular/core/testing';
+import { Attachment } from 'stream-chat';
+import { AttachmentConfigurationService } from './attachment-configuration.service';
+
+describe('AttachmentConfigurationService', () => {
+  let service: AttachmentConfigurationService;
+
+  beforeEach(() => {
+    service = TestBed.inject(AttachmentConfigurationService);
+  });
+
+  it('should provide the correct configuration for image attachments', () => {
+    let attachment: Attachment = {
+      img_url: 'url/to/img',
+      thumb_url: 'different/url',
+    };
+
+    expect(
+      service.getImageAttachmentConfiguration(attachment, 'single')
+    ).toEqual({
+      url: 'url/to/img',
+      height: '300px',
+      width: '',
+    });
+
+    attachment = {
+      thumb_url: 'url/to/img',
+    };
+
+    expect(
+      service.getImageAttachmentConfiguration(attachment, 'single')
+    ).toEqual({
+      url: 'url/to/img',
+      height: '300px',
+      width: '',
+    });
+
+    attachment = {
+      image_url: 'url/to/img',
+    };
+
+    expect(
+      service.getImageAttachmentConfiguration(attachment, 'single')
+    ).toEqual({
+      url: 'url/to/img',
+      height: '300px',
+      width: '',
+    });
+  });
+
+  it('should call #customImageAttachmentConfigurationHandler, if provided', () => {
+    const spy = jasmine.createSpy();
+    service.customImageAttachmentConfigurationHandler = spy;
+    const attachment: Attachment = {
+      img_url: 'url/to/img',
+      thumb_url: 'different/url',
+    };
+    service.getImageAttachmentConfiguration(attachment, 'carousel');
+
+    expect(spy).toHaveBeenCalledWith(attachment, 'carousel');
+  });
+
+  it('should provide the correct configuration for gallery image attachments', () => {
+    const attachment: Attachment = {
+      img_url: 'url/to/img',
+    };
+
+    expect(
+      service.getImageAttachmentConfiguration(attachment, 'gallery')
+    ).toEqual({
+      url: 'url/to/img',
+      height: '',
+      width: '',
+    });
+  });
+
+  it('should provide the correct configuration for image attachments inside the carousel', () => {
+    const attachment: Attachment = {
+      img_url: 'url/to/img',
+    };
+
+    expect(
+      service.getImageAttachmentConfiguration(attachment, 'carousel')
+    ).toEqual({
+      url: 'url/to/img',
+      height: '',
+      width: '',
+    });
+  });
+
+  it('should provide the correct configuration for video attachments', () => {
+    const attachment: Attachment = {
+      asset_url: 'url/to/video',
+    };
+
+    expect(service.getVideoAttachmentConfiguration(attachment)).toEqual({
+      url: 'url/to/video',
+      height: '100%',
+      width: '100%',
+    });
+  });
+
+  it('should call #customVideoAttachmentConfigurationHandler, if provided', () => {
+    const spy = jasmine.createSpy();
+    service.customVideoAttachmentConfigurationHandler = spy;
+    const attachment: Attachment = {
+      img_url: 'url/to/video',
+      thumb_url: 'different/url',
+    };
+    service.getVideoAttachmentConfiguration(attachment);
+
+    expect(spy).toHaveBeenCalledWith(attachment);
+  });
+
+  it('should provide the correct configuration for GIFs', () => {
+    let attachment: Attachment = {
+      image_url: 'link/to/GIF',
+    };
+
+    expect(service.getGiphyAttachmentConfiguration(attachment)).toEqual({
+      url: 'link/to/GIF',
+      height: '300px',
+      width: '',
+    });
+
+    /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+    attachment = {
+      image_url: 'link/to/GIF',
+      giphy: {
+        fixed_height_downsampled: {
+          height: '200',
+          width: '400',
+          url: 'link/to/smaller/GIF',
+        },
+      } as any,
+    };
+    /* eslint-enable @typescript-eslint/no-unsafe-assignment */
+
+    expect(service.getGiphyAttachmentConfiguration(attachment)).toEqual({
+      url: 'link/to/smaller/GIF',
+      height: '200px',
+      width: '400px',
+    });
+  });
+
+  it('should call #customGiphyAttachmentConfigurationHandler, if provided', () => {
+    const spy = jasmine.createSpy();
+    service.customGiphyAttachmentConfigurationHandler = spy;
+
+    /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+    const attachment = {
+      image_url: 'link/to/GIF',
+      giphy: {
+        fixed_height_downsampled: {
+          height: '200',
+          width: '400',
+          url: 'link/to/smaller/GIF',
+        },
+      } as any,
+    };
+    /* eslint-enable @typescript-eslint/no-unsafe-assignment */
+
+    service.getGiphyAttachmentConfiguration(attachment);
+
+    expect(spy).toHaveBeenCalledWith(attachment);
+  });
+
+  it('should provide correct configuration for scraped images', () => {
+    let attachment: Attachment = {
+      image_url: 'url/to/img',
+      thumb_url: 'different/url',
+    };
+
+    expect(service.getScrapedImageAttachmentConfiguration(attachment)).toEqual({
+      url: 'url/to/img',
+      width: '',
+      height: '',
+    });
+
+    attachment = {
+      thumb_url: 'different/url',
+    };
+
+    expect(service.getScrapedImageAttachmentConfiguration(attachment)).toEqual({
+      url: 'different/url',
+      width: '',
+      height: '',
+    });
+  });
+
+  it('should call #customScrapedImageAttachmentConfigurationHandler, if provided', () => {
+    const spy = jasmine.createSpy();
+    service.customScrapedImageAttachmentConfigurationHandler = spy;
+    const attachment = {
+      image_url: 'link/to/url',
+    };
+    service.getScrapedImageAttachmentConfiguration(attachment);
+
+    expect(spy).toHaveBeenCalledWith(attachment);
+  });
+});