diff --git a/lab/chatbot/client/ChatbotMessageRenderer.ts b/lab/chatbot/client/ChatbotMessageRenderer.ts index 90d7357e003930d3434c4f9597e4a682e62202f3..bae8512e5522ab236ed0033a962faa1875f53ba2 100644 --- a/lab/chatbot/client/ChatbotMessageRenderer.ts +++ b/lab/chatbot/client/ChatbotMessageRenderer.ts @@ -1,5 +1,6 @@ import { stateful, useMemo, useState } from '@adornis/functional-lit/stateful.js'; import { html, nothing } from 'lit'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import { sendForm } from '../api/sendForm.js'; import { type Message, ChatbotMessage, TextMessage } from '../db/Message.js'; import { renderChatbotIcon, renderUserIcon } from './ChatbotComponents.js'; @@ -19,20 +20,22 @@ export const renderMessage = stateful( allMessages, onSendMessage, botProfileImage, + allowHTML, }: { message: Message; index: number; allMessages: Message[]; onSendMessage: (text: string) => void; botProfileImage?: string; + allowHTML?: boolean; }) => { const isBotMessage = message instanceof ChatbotMessage; const isUserMessage = !isBotMessage; const isLastMessage = index === allMessages.length - 1; const text = (() => { - if (message instanceof TextMessage) return message.text; - if (message instanceof ChatbotMessage) return message.text; + if (message instanceof ChatbotMessage || message instanceof TextMessage) + return allowHTML ? unsafeHTML(message.text) : message.text; return null; })(); diff --git a/lab/chatbot/client/ChatbotTypes.ts b/lab/chatbot/client/ChatbotTypes.ts index 631f351edbdf42052f73b3111d90db73ab23efae..50c94f0d322f3ef3c3b8d079693ab30042618f91 100644 --- a/lab/chatbot/client/ChatbotTypes.ts +++ b/lab/chatbot/client/ChatbotTypes.ts @@ -10,6 +10,7 @@ export interface ChatbotConfig { buttonImageUrl?: string; buttonHTML?: string; botProfileImage?: string; + allowHTML?: boolean; } // Standard-Konfiguration @@ -23,4 +24,5 @@ export const DEFAULT_CONFIG: ChatbotConfig = { tooltipText: 'Haben Sie eine Frage? Unser virtueller Assistent hilft Ihnen gerne weiter!', buttonImageUrl: '', botProfileImage: '', + allowHTML: false, }; diff --git a/lab/chatbot/client/x-chatbot.ts b/lab/chatbot/client/x-chatbot.ts index dbf3dd7ede7d24104bc82563483c2dbf8f89776a..1e48a4e974b98642b93cdb93c5aabb07fe3dfc99 100644 --- a/lab/chatbot/client/x-chatbot.ts +++ b/lab/chatbot/client/x-chatbot.ts @@ -63,6 +63,7 @@ export const XChatbot = webcomponent( buttonImageUrl: (element.buttonImageUrl as unknown as string) || DEFAULT_CONFIG.buttonImageUrl, botProfileImage: (element.botProfileImage as unknown as string) || DEFAULT_CONFIG.botProfileImage, buttonHTML: element.buttonHTML as unknown as string | undefined, + allowHTML: element.allowHTML as unknown as boolean | undefined, }; }; @@ -249,6 +250,7 @@ export const XChatbot = webcomponent( allMessages: messages, onSendMessage: text => sendMessage(text), botProfileImage: getConfig().botProfileImage, + allowHTML: getConfig().allowHTML, }), )} `; @@ -470,6 +472,7 @@ export const XChatbot = webcomponent( tooltipText: { type: String, attribute: 'tooltip-text' }, buttonImageUrl: { type: String, attribute: 'button-image-url' }, buttonHTML: { type: String, attribute: 'button-html' }, + allowHTML: { type: Boolean, attribute: 'allow-html' }, }, connectedCallback: () => { // Setup initial state