How to implement support for multiple dynamic model responses in deep-chat Angular?

enter image description hereI am working with the deep-chat library and am trying to support multiple models in my setup. Specifically, I want to handle multiple models inside the onMessage event by making manual fetch requests to dynamically selected models.

I'm using the handler function and getting the response from multiple models properly. However, the sender button of the message is still showing as "loading" even after the response is received. You can check the image as well.

I’ve attached a screenshot and included the relevant code I’m using to handle the multiple models:

this.chatRequest = {
"url": this.appService.basePath + "api/providers/cloudlyte/v1/chat/completions",
"method": "POST",
"stream": { simulation: 20 }
};

setTimeout(() => {
if (this.chatElementRef) {
const chatEl = this.chatElementRef.nativeElement;
chatEl.connect = {
handler: async (body, signals) => {
const modelsToCall = [...this.selectedModelList];
await Promise.all(modelsToCall.map(async (model) => {
const requestBody = {
model,
messages: [
{
role: 'user',
content: body.messages[0].text
}
]
};
const response = await fetch(this.appService.basePath + "api/providers/cloudlyte/v1/chat/completions", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${this.keyId}`
},

body: JSON.stringify(requestBody)
},)
const result = await response.json();
if (response.status === 401) {
chatEl.addMessage({
text: `${model}: ❌ Unauthorized – check API key.`,
role: 'ai'
});
} else {
const reply = result?.choices?.[0]?.message?.content || 'No reply received';
chatEl.addMessage({
text: `${model}: ${reply}`,
role: 'ai'
});
}
}))
}
}
}
});

<deep-chat
#elementRef
[introMessage]="introMessage"
[textInput]="textInput"
[responseInterceptor]="responseInterceptor"
[demo]="false"
[demoMessage]="null"
[submitButtonStyles]="submitButtonStyles"
[messageStyles]="messageStyles"
[avatars]="avatars"
[connect]="chatRequest"
stream='{"simulation": 6}'
style="
border-radius: 10px;
width: 100%;
height: calc(100vh - 100px);
max-height: 55%;
padding-top: 10px;
font-family: 'Plus Jakarta Sans';
font-size: 0.9rem;
background: #faf8f8;

box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
">
</deep-chat>

Continue reading...