diff --git a/packages/js/core/src/sections/chat/conversationStarters/utils/createConversationStartersDom.ts b/packages/js/core/src/sections/chat/conversationStarters/utils/createConversationStartersDom.ts index 8f53386b..a17680b2 100644 --- a/packages/js/core/src/sections/chat/conversationStarters/utils/createConversationStartersDom.ts +++ b/packages/js/core/src/sections/chat/conversationStarters/utils/createConversationStartersDom.ts @@ -1,20 +1,40 @@ -import {ConversationStarter} from '../../../../types/conversationStarter'; +import { ConversationStarter } from "../../../../types/conversationStarter"; -export const createConversationStartersDom = (conversationStarters: ConversationStarter[]): HTMLElement => { - const conversationStartersContainer = document.createElement('div'); - conversationStartersContainer.classList.add('nlux-comp-conversationStarters'); +export const createConversationStartersDom = ( + conversationStarters: ConversationStarter[] +): HTMLElement => { + const conversationStartersContainer = document.createElement("div"); + conversationStartersContainer.classList.add("nlux-comp-conversationStarters"); - conversationStarters.forEach((item, index) => { - const conversationStarter = document.createElement('button'); - conversationStarter.classList.add('nlux-comp-conversationStarter'); + conversationStarters.forEach((item, index) => { + const conversationStarter = document.createElement("button"); + conversationStarter.classList.add("nlux-comp-conversationStarter"); - const conversationStarterText = document.createElement('span'); - conversationStarterText.classList.add('nlux-comp-conversationStarter-prompt'); - conversationStarterText.textContent = item.prompt; + // start with empty html tag + let conversationStarterIcon: HTMLElement = document.createElement("div"); + if (item.icon) { + // if icon is specified + // check if it is a string + if (typeof item.icon === "string") { + conversationStarterIcon = document.createElement("img"); + conversationStarterIcon.setAttribute("src", item.icon); + conversationStarterIcon.setAttribute("width", "20px"); + } else { + // if not, icon must be a html element + conversationStarterIcon = item.icon; + } + } - conversationStarter.appendChild(conversationStarterText); - conversationStartersContainer.appendChild(conversationStarter); - }); + const conversationStarterText = document.createElement("span"); + conversationStarterText.classList.add( + "nlux-comp-conversationStarter-prompt" + ); + conversationStarterText.textContent = item.prompt; - return conversationStartersContainer; + conversationStarter.appendChild(conversationStarterIcon); + conversationStarter.appendChild(conversationStarterText); + conversationStartersContainer.appendChild(conversationStarter); + }); + + return conversationStartersContainer; };