Skip to main content
Version: v4

New Attachment Option

In this guide, we will demonstrate how to add a custom option to the action sheet of the MessageComposer component. This guide is meant to showcase how custom features can be built on top of the existing codebase, enabling developers to tailor the user experience to their specific requirements.

info

We recommend that you read the Key Concepts , follow the guidelines, and also take the time to familiarise yourself with the library's components.

In the example below, we are going to simulate a video recorder when user clicks on the custom option.

Custom Option​

The first step is to create the custom option that will be populated on the action sheet of the message composer. CometChatMessageComposerAction is part of the resources package and is of the following structure.

export class CometChatMessageComposerAction {
  id: string;
  iconURL: string;
  title?: string;
  iconTint?: string;
  titleFont?: string;
  titleColor?: string;
  background?: string;
  borderRadius?: string;
  onClick: (() => void) | null = null;
}

Click handler​

We'll launch a video recorder component when user clicks on the custom option.

startCamera(): void {

  navigator.mediaDevices.getUserMedia({ video: true })
    .then((stream: MediaStream) => {
      this.mediaStream = stream;
      this.videoElement.nativeElement.srcObject = stream;
      this.videoElement.nativeElement.play();
    })
      .catch((error: any) => {
      console.error('Error accessing camera:', error);
    });
}

clickHandler = () => {
  // do something custom
  this.startCamera();
}

const videoRecordOption = new CometChatMessageComposerAction({
  id: "videoRecord",
  title: "Record a video clip",
  iconURL: "./assets/video.svg",
  onClick: clickHandler
})

The video record option is then pushed to the default set of attachment options supported by the Angular UI Kit. The default options are fetched using the CometChatUIKit class.

let options: CometChatMessageComposerAction[] =
  CometChatUIKit.getDataSource().getAttachmentOptions(
    undefined,
    item instanceof CometChat.User ? item : undefined,
    item instanceof CometChat.Group ? item : undefined,
    ComposerId
  );

options.push(videoRecordOption);

The attachment options are then passed to the ConversationsWithMessages component as a prop using MessageComposerConfguration.

this.messagesConfiguration.messageComposerConfiguration.attachmentOptions = (
  item: CometChat.User | CometChat.Group,
  ComposerId: ComposerId
) => options;

Implementation​

With the completion of each individual piece, we can now integrate all the code snippets to form the final code example.

Code​

<cometchat-conversations-with-messages
  [messagesConfiguration]="messagesConfiguration"
></cometchat-conversations-with-messages>

<div class="screenRecorder" *ngIf="showScreen">
  <div class="video-frame">
    <div class="video-container">
      <button (click)="stopCamera()" class="close-btn">Close Camera</button>
      <video #videoElement *ngIf="!showPreview"></video>
      <video #previewElement *ngIf="showPreview" controls></video>
    </div>
    <div class="buttons">
      <div *ngIf="isRecording" class="recording-icon-wrapper">
        <i class="recording-icon"></i>
        <span class="timer"> {{ recordingTime | date: 'mm:ss' : 'UTC' }}</span>
      </div>
      <button (click)="toggleRecording()">
        {{ showPreview ? "send recording" : isRecording ? 'Stop Recording' :
        'Start Recording' }}
      </button>
    </div>
  </div>
</div>

Result​

Image