68 Enable conversation starters

packages/css/themes/src/common/components/ConversationStarters.css

@@ -14,6 +14,11 @@
         > .nlux-comp-conversationStarter {
             font-family: var(--nlux-chtr--fnFm), sans-serif;
 
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 0.75rem;
+
             width: 150px;
             height: 100px;
             overflow: hidden;

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

packages/react/core/src/components/ConversationStarters/ConversationStarters.tsx

@@ -1,20 +1,32 @@
-import {ConversationStartersProps} from './props';
+import { ConversationStarter } from "../../types/conversationStarter";
+import { ConversationStartersProps } from "./props";
 
 export const ConversationStarters = (props: ConversationStartersProps) => {
-    const {onConversationStarterSelected} = props;
-    return (
-        <div className="nlux-comp-conversationStarters">
-            {props.items.map((conversationStarter, index) => (
-                <button
-                    key={index}
-                    className="nlux-comp-conversationStarter"
-                    onClick={() => onConversationStarterSelected(conversationStarter)}
-                >
-                    <span className="nlux-comp-conversationStarter-prompt">
-                        {conversationStarter.prompt}
-                    </span>
-                </button>
-            ))}
-        </div>
-    );
+  const { onConversationStarterSelected } = props;
+  return (
+    <div className="nlux-comp-conversationStarters">
+      {props.items.map((conversationStarter, index) => (
+        <button
+          key={index}
+          className="nlux-comp-conversationStarter"
+          onClick={() => onConversationStarterSelected(conversationStarter)}
+        >
+          <ConversationStarterIcon icon={conversationStarter.icon} />
+          <span className="nlux-comp-conversationStarter-prompt">
+            {conversationStarter.prompt}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+const ConversationStarterIcon = ({
+  icon,
+}: {
+  icon: ConversationStarter["icon"];
+}) => {
+  if (!icon) return null;
+  if (typeof icon === "string") return <img src={icon} width={20} />;
+  return icon;
 };