How to Overwrite Chat Messages

[jpeng-ms]

If you are using CallwithChat Composite and you would like to access messages sending out and modify it with some custom logic, then this tutorial is right for you!

In this tutorial we will be creating a custom logic first, embed it as options when creating chat client, then create call with chat adapter as how you normally do.

First of all, we need to create a new policy and you can think of it as a vessel that contains our custom logic:

const policy = 
{
    name: 'policy',
    async modifyMessageRequest(request: PipelineRequest, next: SendRequest): Promise<PipelineResponse> {
      if (request.method === 'POST' && request.url.includes('/messages')) {
         // you can access request body like this: const json = await JSON.parse(request.body as string);
         // and access message content like this: console.log(json.content)
         // or message type: console.log(json.type)
      }
      return await next(request);
    }
  };

Noticing how a policy consists of two parts - name and a function call back. The callback function that you provided would be triggered for each request going out. And here is where we need to provide our logic to.

Since we want to eliminate noises and only want to check requests that send messages, we need the if (request.method === 'POST' && request.url.includes('/messages')) to locate sendMessage requests sent from the Chat SDK (@azure/communication-chat) and the endpoint that handles sendMessage requests is <endpointURL>/chat/thread/<threadID>/messages

Then, we will have access to the requst.body which contains the chat message that's about to be sent out.

Next, we need to wrap the policy as part of chatClientOptions:

const statefulChatClientOptions = 
{
  chatClientOptions: {
    additionalPolicies: [
      {
        policy: policy,
        position: 'perCall'
      }
    ]
  }
}

Noticing we have a new property named position and we need to set it to perCall so our logic (aka. "policy") would be trigger for each call.

In order to let Chat client know we have these options, we need to create chat client like this:

const chatClient = createStatefulChatClient(
  {
    userId,
    displayName,
    endpoint,
    credential
  },
  statefulChatClientOptions
);
const chatThreadClient = chatClient.getChatThreadClient(threadId);

Noticing the statefulChatClientOptions is the same object we just created that contains our policy.

Now we can go ahead to create our adapter:

const adapter = await createAzureCommunicationCallWithChatAdapterFromClients({
  callClient,
  callAgent,
  callLocator,
  chatClient,
  chatThreadClient
});

Noticing the chatClient that we provided here is the same chatClient we just created with our policy.

That's it! Now you know how you can overwrite message content, feel free to give a try and let us know if you have any issues.