updated conversationStarter dom to support icons

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;
 };