Add Feedback Buttons Dynamically to All AI Responses in Chat Component

[Nithiya2223]

Hi ,
I have just gone through the docs. I could see that the feedback buttons can be added to the demo chat like

ngAfterViewInit(){
if (this.chatElementRef?.nativeElement) {
this.chatElementRef.nativeElement.demo = {
response: {
html: <div class="feedback"> <img class="feedback-icon feedback-icon-positive" src="path-to-svg.svg"> <img class="feedback-icon feedback-icon-negative" src="path-to-svg.svg"> </div>,
},
};
this.chatElementRef.nativeElement.htmlClassUtilities = {
feedback: {styles: {default: {display: 'flex'}}},
'feedback-text': {styles: {default: {width: 'calc(100% - 42px)', paddingTop: '2px'}}},
'feedback-icon': {
styles: {
default: {width: '20px', height: '20px', cursor: 'pointer', borderRadius: '5px'},
hover: {backgroundColor: '#d1d1d1'},
},
},
'feedback-icon-positive': {events: {click: () => console.log('positive response')}},
'feedback-icon-negative': {
events: {click: () => console.log('negative response')},
styles: {default: {transform: 'rotate(180deg)', marginLeft: '3px'}},
},
};
}
} this adds feedback button for demo responses
When connected to a server how to add those feedback button to all the messages from ai .
I'm using angular framework.

[OvidijusParsiunas]

Hi @Nithiya2223.
If you are asking about how to wrap ai response text into messages that have the feedback button - you can go about it in many ways:

• The natural way is to simply get your server to respond with the html property as:

{
    html: `
      <div class="feedback">
        <div class="feedback-text">Your text here.</div>
        <img class="feedback-icon feedback-icon-positive" src="path-to-svg.svg">
        <img class="feedback-icon feedback-icon-negative" src="path-to-svg.svg">
      </div>`
  }
}

• If you cannot change your server responses, then you can use the responseInterceptor and augment the returned message to the syntax above.
• If you are using a handler function, you should once again use the response signals with the syntax above.

Let me know if this helps. Thanks!