Send a component as response

[OfficialMindAI]

Hi, I would like to ask how to send a jsx component as a response before the app make a request on the endpoint. I have made some changes in the code to achieve so:

• in the doSubmit function in the chat.tsx component i have added the following code:

  if (1=1){
      let botMessage: ChatMessage | undefined;
      botMessage = SYS_LIMIT
      console.log('bot', botMessage)
      
      return;
    }

• in the chat.ts component i have create the following variable:

export const SYS_LIMIT: ChatMessage = createMessage({
  role: "assistant",
  content: [
    {
      type: "html_component",
      html_component: React.createElement(ChatCard, { title: Locale.Store.SysLimit })
    }
  ]
});

• in the chat.ts component i have changed the interface MultimodalContent by adding the following snippet:

export interface MultimodalContent {
 type: "text" | "image_url" | "html_component";
 text?: string;
 image_url?: {
   url: string;
 };
 html_component?: JSX.Element | JSX.Element[]
}

But still it does not send the tsx component in the response. How can I make the bot send the component as a response ?