-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #646 from GetStream/support-custom-attachments
feat: support custom attachments
- Loading branch information
Showing
64 changed files
with
1,221 additions
and
411 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import AttachmentsScreenshot from "../assets/attachments-screenshot.png"; | ||
| import VoiceRecordingScreenshot from "../assets/voice-recording-screenshot.png"; | ||
|
|
||
| - Images (including GIFs) are displayed inline | ||
| - Videos are displayed inline | ||
| - Voice recordings are displayed inline | ||
| - Other files can be downloaded | ||
| - Links in a message are enriched with built-in open graph URL scraping | ||
|
|
||
| **Example 1** - different type of attachments: | ||
|
|
||
| <img src={AttachmentsScreenshot} width="500" /> | ||
|
|
||
| **Example 2** - voice recording: | ||
|
|
||
| <img src={VoiceRecordingScreenshot} width="500" /> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
251 changes: 251 additions & 0 deletions
251
docusaurus/docs/Angular/code-examples/custom-attachments.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,251 @@ | ||
| --- | ||
| id: custom-attachments | ||
| title: Custom attachments | ||
| --- | ||
|
|
||
| import SupportedAttachments from "../_common/supported-attachments.mdx"; | ||
| import PaymentLink from "../assets/payment-link.png"; | ||
| import PaymentPreview from "../assets/payment-preview.png"; | ||
| import PaymentAttachment from "../assets/payment-attachment.png"; | ||
|
|
||
| The Stream API allows you to add any attachment to a message. The SDK supports some common types (such as images, videos, etc.) out-of-the-box, but you have to provide your own template to display others. | ||
|
|
||
| The Angular SDK has out-of-the-box support for the following types: | ||
|
|
||
| <SupportedAttachments /> | ||
|
|
||
| This guide will show you how to create custom attachments. In the example, we'll allow users to make payment links to send money to each other, but the same logic works for any attachment. | ||
|
|
||
| ## Creating the attachment | ||
|
|
||
| Let's add a button to the message input component to make a payment link. How we create the attachment doesn't matter; the important part is to create an `Attachment` object we can provide to the [`AttachmentService`](../../services/AttachmentService). | ||
|
|
||
| ```html showLineNumbers | ||
| <!-- Each message input component has it's own instance of the AttachmentService --> | ||
| <stream-message-input #input> | ||
| <button | ||
| message-input-start | ||
| (click)="createPaymentLink(input.attachmentService)" | ||
| > | ||
| Payment link | ||
| </button> | ||
| </stream-message-input> | ||
| ``` | ||
|
|
||
| ```typescript showLineNumbers {18-22} | ||
| // Optionally, you can define the shape of your custom attachments to get proper compile checks | ||
| type MyGenerics = DefaultStreamChatGenerics & { | ||
| attachmentType: { | ||
| type: 'custom'; | ||
| subtype: 'payment'; | ||
| value: string; | ||
| paymentLink: string; | ||
| }; | ||
| }; | ||
|
|
||
| createPaymentLink(attachmentService: AttachmentService) { | ||
| const attachment: Attachment<MyGenerics> = { | ||
| type: 'custom', | ||
| subtype: 'payment', | ||
| value: `${Math.ceil(Math.random() * 99)}$`, | ||
| paymentLink: 'pay/me/or/else', | ||
| }; | ||
| // Insert the attachment to the list of custom attachments | ||
| attachmentService.customAttachments$.next([ | ||
| ...attachmentService.customAttachments$.value, | ||
| attachment, | ||
| ]); | ||
| } | ||
| ``` | ||
|
|
||
| <img src={PaymentLink} width="500" /> | ||
|
|
||
| Clicking the "Payment link" will add the attachment to the message, but we don't yet have any visual indicator of this. | ||
|
|
||
| ## Custom attachment preview | ||
|
|
||
| Let's add a preview of the payment attachment. | ||
|
|
||
| To do this, we define the HTML template code for the preview that uses the `AttachmentService` to display the previews of the custom attachments: | ||
|
|
||
| ```html showLineNumbers | ||
| <ng-template #customAttachmentPreviews let-service="service"> | ||
| <div | ||
| style="padding: 8px; background-color: azure; border-radius: inherit" | ||
| class="custom-attachment-container" | ||
| *ngFor="let attachment of service.customAttachments$ | async" | ||
| > | ||
| <ng-container [ngSwitch]="attachment.subtype"> | ||
| <div *ngSwitchCase="'payment'" class="payment-link"> | ||
| 🤑 {{ attachment.value }} | ||
| </div> | ||
| </ng-container> | ||
| </div> | ||
| </ng-template> | ||
| ``` | ||
|
|
||
| If you have multiple different types of custom attachments, you can display them all here. | ||
|
|
||
| Next, we register the template for the `customAttachmentPreviewListTemplate$` field of the [`CustomTemplatesService`](../../services/CustomTemplatesService): | ||
|
|
||
| ```typescript showLineNumbers {8-10} | ||
| export class AppComponent implements AfterViewInit { | ||
| @ViewChild("customAttachmentPreviews") | ||
| customAttachmentPreviewsTemplate!: TemplateRef<CustomAttachmentPreviewListContext>; | ||
|
|
||
| constructor(private customTemplateService: CustomTemplatesService) {} | ||
|
|
||
| ngAfterViewInit(): void { | ||
| this.customTemplateService.customAttachmentPreviewListTemplate$.next( | ||
| this.customAttachmentPreviewsTemplate | ||
| ); | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| If we click the "Payment link" button, the preview is now visible: | ||
|
|
||
| <img src={PaymentPreview} width="500" /> | ||
|
|
||
| ## Delete attachment preview | ||
|
|
||
| Let's allow deleting a payment link by extending the template of the preview: | ||
|
|
||
| ```html showLineNumbers {10-11} | ||
| <ng-template #customAttachmentPreviews let-service="service"> | ||
| <div | ||
| style="padding: 8px; background-color: azure; border-radius: inherit" | ||
| class="custom-attachment-container" | ||
| *ngFor="let attachment of service.customAttachments$ | async" | ||
| > | ||
| <ng-container [ngSwitch]="attachment.subtype"> | ||
| <div *ngSwitchCase="'payment'" class="payment-link"> | ||
| 🤑 {{ attachment.value }} | ||
| <!-- Add a delete button --> | ||
| <button (click)="deletePaymentLink(attachment, service)">X</button> | ||
| </div> | ||
| </ng-container> | ||
| </div> | ||
| </ng-template> | ||
| ``` | ||
|
|
||
| This is the implementation of the delete payment attachment method: | ||
|
|
||
| ```typescript showLineNumbers {5-8} | ||
| deletePaymentLink( | ||
| attachment: Attachment<MyGenerics>, | ||
| attachmentService: AttachmentService<MyGenerics> | ||
| ) { | ||
| attachmentService.customAttachments$.next( | ||
| attachmentService.customAttachments$.value.filter( | ||
| (a) => a.paymentLink !== attachment.paymentLink | ||
| ) | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| ## Loading state | ||
|
|
||
| Sometimes, creating attachments happens asynchronously. If that's the case, you should disable message sending while the attachment is processing. | ||
|
|
||
| Here is how you can do that by extending the `createPaymentLink` method: | ||
|
|
||
| ```typescript showLineNumbers {2-5,23-26} | ||
| async createPaymentLink(attachmentService: AttachmentService) { | ||
| // Increment the upload counter to disable message send | ||
| attachmentService.attachmentUploadInProgressCounter$.next( | ||
| attachmentService.attachmentUploadInProgressCounter$.value + 1 | ||
| ); | ||
| const attachment: Attachment<MyGenerics> = { | ||
| type: 'custom', | ||
| subtype: 'payment', | ||
| value: `${Math.ceil(Math.random() * 99)}$`, | ||
| paymentLink: '', | ||
| }; | ||
| // simulate network call | ||
| await new Promise<void>((resolve) => { | ||
| setTimeout(() => { | ||
| attachment.paymentLink = 'pay/me/or/else'; | ||
| resolve(); | ||
| }, 2000); | ||
| }); | ||
| attachmentService.customAttachments$.next([ | ||
| ...attachmentService.customAttachments$.value, | ||
| attachment, | ||
| ]); | ||
| // Attachment is ready, decrease the upload counter | ||
| attachmentService.attachmentUploadInProgressCounter$.next( | ||
| attachmentService.attachmentUploadInProgressCounter$.value - 1 | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| ## Custom attachment inside the message list | ||
|
|
||
| The last missing step is to display the payment link inside the message list. This will be very similar to how we created the attachment preview. | ||
|
|
||
| First, let's define an HTML template: | ||
|
|
||
| ```html showLineNumbers | ||
| <ng-template #customAttachments let-attachments="attachments"> | ||
| <div | ||
| class="custom-attachment-container" | ||
| *ngFor="let attachment of attachments" | ||
| > | ||
| <ng-container [ngSwitch]="attachment.subtype"> | ||
| <div | ||
| style="margin-inline: 16px; margin-top: 8px" | ||
| *ngSwitchCase="'payment'" | ||
| class="payment-link" | ||
| > | ||
| 💵 | ||
| <a [href]="attachment.link" target="_blank">{{ attachment.value }}</a> | ||
| </div> | ||
| </ng-container> | ||
| </div> | ||
| </ng-template> | ||
| ``` | ||
|
|
||
| The `attachments` template variable will contain the list of custom attachments. | ||
|
|
||
| :::note | ||
| By default the SDK will treat all `image`, `file`, `giphy`, `video` and `voiceRecording` attachments as built-in. All other type of attachments are treated as custom attachments. | ||
|
|
||
| If you want to change the filtering logic, provide your own implementation using the `filterCustomAttachment` method of the [`MessageService`](../../services/MessageService/#filtercustomattachment). | ||
| ::: | ||
|
|
||
| Next, we register the template for the `customAttachmentListTemplate$` field of the [`CustomTemplatesService`](../../services/CustomTemplatesService): | ||
|
|
||
| ```typescript showLineNumbers {8-10} | ||
| export class AppComponent implements AfterViewInit { | ||
| @ViewChild("customAttachments") | ||
| customAttachmentsTemplate!: TemplateRef<CustomAttachmentListContext>; | ||
|
|
||
| constructor(private customTemplateService: CustomTemplatesService) {} | ||
|
|
||
| ngAfterViewInit(): void { | ||
| this.customTemplateService.customAttachmentListTemplate$.next( | ||
| this.customAttachmentsTemplate | ||
| ); | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| This is how the attachment looks like inside the message list: | ||
|
|
||
| <img src={PaymentAttachment} width="500" /> | ||
|
|
||
| If you need reference to the message ID (and parent message ID for thread replies) the attachments belong to, this is how you can access them: | ||
|
|
||
| ```html showLineNumbers {4-5} | ||
| <ng-template | ||
| #customAttachments | ||
| let-attachments="attachments" | ||
| let-messageId="messageId" | ||
| let-parentMessageId="parentMessageId" | ||
| > | ||
| <div *ngFor="let attachment of attachments"> | ||
| {{ messageId }} {{ parentMessageId }} {{ attachment | json }} | ||
| </div> | ||
| </ng-template> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.