added icon component to ConversationStarters component

nlkitai · Jun 19, 2024 · 377c2be · 377c2be
1 parent 9f9f44c
commit 377c2be
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 17 deletions.
diff --git a/packages/css/themes/src/common/components/ConversationStarters.css b/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;

diff --git a/packages/react/core/src/components/ConversationStarters/ConversationStarters.tsx b/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;
 };