diff --git a/packages/css/themes/src/common/components/ConversationStarters.css b/packages/css/themes/src/common/components/ConversationStarters.css index c5e5b8a5..f04f8c6b 100644 --- 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 index cad1b0a9..da06963d 100644 --- 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 ( -
- {props.items.map((conversationStarter, index) => ( - - ))} -
- ); + const { onConversationStarterSelected } = props; + return ( +
+ {props.items.map((conversationStarter, index) => ( + + ))} +
+ ); +}; + +const ConversationStarterIcon = ({ + icon, +}: { + icon: ConversationStarter["icon"]; +}) => { + if (!icon) return null; + if (typeof icon === "string") return ; + return icon; };