Skip to content

Commit

Permalink
Merge pull request #652 from GetStream/new-message-component-hooks
Browse files Browse the repository at this point in the history
New message component hooks
  • Loading branch information
szuperaz authored Oct 8, 2024
2 parents d65e2db + 46435a9 commit 0655ef7
Showing 5 changed files with 56 additions and 11 deletions.
3 changes: 2 additions & 1 deletion docusaurus/docs/Angular/code-examples/emoji-picker.mdx
Original file line number Diff line number Diff line change
@@ -150,7 +150,7 @@ The `emojiSelect` event is fired when a user selects an emoji, we emit the selec
title="Pick your emoji…"
emoji="point_up"
(emojiSelect)="emojiSelected($event)"
[darkMode]="(theme$ | async) === 'dark'"
[isNative]="true"
></emoji-mart>
</div>
```
@@ -304,6 +304,7 @@ And set the `darkMode` input on the `emoji-mart` component:
title="Pick your emoji…"
emoji="point_up"
(emojiSelect)="emojiSelected($event)"
[isNative]="true"
[darkMode]="(theme$ | async) === 'dark'"
></emoji-mart>
```
15 changes: 15 additions & 0 deletions projects/stream-chat-angular/src/lib/custom-templates.service.ts
Original file line number Diff line number Diff line change
@@ -32,6 +32,7 @@ import {
SendingStatusContext,
SystemMessageContext,
ThreadHeaderContext,
ThreadReplyButtonContext,
TypingIndicatorContext,
UnreadMessagesIndicatorContext,
UnreadMessagesNotificationContext,
@@ -343,6 +344,20 @@ export class CustomTemplatesService<
customAttachmentListTemplate$ = new BehaviorSubject<
TemplateRef<CustomAttachmentListContext> | undefined
>(undefined);
/**
* The template used to display the number of thread replies inside the [message component](../../components/MessageComponent.mdx)
*/
threadLinkButton$ = new BehaviorSubject<
TemplateRef<ThreadReplyButtonContext> | undefined
>(undefined);
/**
* Template to display custom metadata inside the message bubble of the [message component](../components/MessageComponent.mdx)
*
* To properly position your template you should override the `grid-template-areas` of the `.str-chat__message-inner` selector
*/
customMessageMetadataInsideBubbleTemplate$ = new BehaviorSubject<
TemplateRef<CustomMetadataContext> | undefined
>(undefined);

constructor() {}
}
Original file line number Diff line number Diff line change
@@ -452,7 +452,7 @@ export class MessageInputComponent
if (this.configService.customPasteEventHandler) {
this.configService.customPasteEventHandler(event, this);
} else {
if (event.clipboardData?.files) {
if (event.clipboardData?.files && event.clipboardData?.files.length > 0) {
event.preventDefault();
void this.filesSelected(event.clipboardData?.files);
}
Original file line number Diff line number Diff line change
@@ -69,6 +69,20 @@
</div>
</div>
</div>
<ng-container
*ngIf="
customTemplatesService.customMessageMetadataInsideBubbleTemplate$
| async
"
>
<ng-template
*ngTemplateOutlet="
(customTemplatesService.customMessageMetadataInsideBubbleTemplate$
| async)!;
context: { message: message }
"
></ng-template>
</ng-container>
<div class="str-chat__message-reactions-host">
<ng-template
#defaultMessageReactions
@@ -566,15 +580,24 @@
<div
class="str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper"
>
<button
*ngIf="shouldDisplayThreadLink"
class="str-chat__message-replies-count-button"
data-testid="reply-count-button"
(click)="setAsActiveParentMessage()"
>
{{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}
replies' | translate:replyCountParam)}}
</button>
<ng-container *ngIf="shouldDisplayThreadLink">
<ng-template
*ngTemplateOutlet="
(customTemplatesService.threadLinkButton$ | async) || defaultButton;
context: { message: message }
"
></ng-template>
</ng-container>
<ng-template #defaultButton let-message="message">
<button
class="str-chat__message-replies-count-button"
data-testid="reply-count-button"
(click)="setAsActiveParentMessage()"
>
{{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}
replies' | translate:replyCountParam)}}
</button>
</ng-template>
</div>
</ng-template>

6 changes: 6 additions & 0 deletions projects/stream-chat-angular/src/lib/types.ts
Original file line number Diff line number Diff line change
@@ -494,3 +494,9 @@ export type CustomAttachmentPreviewListContext<
> = {
attachmentService: AttachmentService<T>;
};

export type ThreadReplyButtonContext<
T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
> = {
message: StreamMessage<T>;
};

0 comments on commit 0655ef7

Please sign in to comment.