Angular Chat - Render Images

To render an image in a Chat, set the message type to "image" and specify the src field with the image URL. In the following example, AI sends a message with the "imageResponse" type, which is then converted into an image in Chat.

NOTE
Chat displays either images or text in a single message. Specify messageTemplate to display custom messages.
jQuery
index.js
const chat = $("#chatContainer").dxChat("instance");
const handleAIResponse() {
    if (aiResponse.type === "imageResponse") {
        chat.renderMessage({
            type: "image",
            src: aiResponse.imageUrl,
            author: "bot"
        });
    }
}
Angular
app.component.ts
export class AppComponent {
    handleAIResponse() {
        if (aiResponse.type === "imageResponse") {
            const imageMessage = ({
                type: "image",
                src: aiResponse.imageUrl,
                author: "bot"
            });
        }
        this.messages = [...this.messages, imageMessage];
    }
}
Vue
App.vue
function handleAIResponse() {
    if (aiResponse.type === "imageResponse") {
        const imageMessage = ({
            type: "image",
            src: aiResponse.imageUrl,
            author: "bot"
        });
    }
    messages.value = [...messages.value, imageMessage];
}
React
App.tsx
export default function App() {
    const handleAIResponse() => {
        if (aiResponse.type === "imageResponse") {
            const imageMessage = ({
                type: "image",
                src: aiResponse.imageUrl,
                author: "bot"
            });
        }
        setMessages((prevMessages) => [...prevMessages, imageMessage]);
    };

}