Chat

Overview

The Chat component is a core UI component of the Shopping Assistant SDK that renders the complete chat interface, including conversation messages, initial prompts, loading states, and message rendering. It provides a fully functional chat experience with support for user messages, AI responses, product displays, and customizable styling.

Usage

// importing component
import { Chat } from "@unbxd-ui/react-shopping-assistant-components";

Code Example

import { UnbxdShoppingAssistantWrapper } from "@unbxd-ui/react-shopping-assistant-hooks";
import { Chat } from "@unbxd-ui/react-shopping-assistant-components";
 
function ShoppingAssistantApp() {
  return (
    <UnbxdShoppingAssistantWrapper 
      siteKey="YOUR_SITE_KEY" 
      apiKey="YOUR_API_KEY"
      convStorageType="LOCALSTORAGE"
    >
      <div className="chat-container">
        <Chat />
      </div>
    </UnbxdShoppingAssistantWrapper>
  );
}

⚠️

Note:

The Chat component must be used within the UnbxdShoppingAssistantWrapper to ensure that the component and the shopping assistant functionality work properly.

Props

InitialMessageComponent

optional

React Component

A custom component to display an initial welcome message when the chat loads.
This component appears above the chat messages and initial prompts.
Default Value:

const InitialMessageComponent = () => {
	return (
		<div className="initial-message-component">
			👋 Hi there! I'm your Furniture Shopping Assistant, ready to help you find exactly what you're looking for. ✨ — What would you like to shop for today?
			<br />
			<br />
			Ask me anything, or try one of these to get started:
		</div>
	);
};

InitialPromptsComponent

optional

React Component

A custom component that displays clickable prompt suggestions to help users get started with the shopping assistant.
Shows predefined example questions that users can click to automatically ask the AI agent.
Useful for onboarding new users and showcasing the types of queries the assistant can handle.
Each prompt is interactive and will trigger a conversation when clicked.
In props it receives prompts which are the questions received from the api through questions api.
Default Value:

const InitialPrompts = (props: InitialPromptsProps) => {
	const {
		onPromptClick = defaultInitialPromptsProps.onPromptClick,
		prompts=[]
	} = props;
 
	const { askAgent } = useShoppingAssistant();
 
	const handlePromptClick = (prompt: string) => {
		onPromptClick && onPromptClick(prompt);
		askAgent(prompt);
	};
 
	const renderInitialPrompts = () => {
		if (!prompts) return null;
		return prompts.map((prompt: string) => <InitialPrompt prompt={prompt} onPromptClick={() => handlePromptClick(prompt)} key={prompt} />);
	};
 
	return (
		<div className="initial-prompts-container">
			<div className="initial-prompts-label">{""}</div>
			<div className="initial-prompts-wrapper">{renderInitialPrompts()}</div>
		</div>
	);	
};

LoadingComponent

optional

React Component

A custom component to display while the AI is processing and generating responses.
Shows during API calls and conversation loading states.
Default Value:

const LoadingComponent = () => {
	return <div className="loading-component">Awaiting response...</div>;
};

UserIconComponent

optional

React Component

A custom icon component to display next to user messages.
Helps distinguish user messages in the conversation.
Default Value:

const UserIconComponent = () => {
	return <>Me</>;
};

AIIconComponent

optional

React Component

A custom icon component to display next to AI assistant messages.
Helps distinguish AI responses in the conversation.
Default Value:

const AIIconComponent = () => {
	return <>AI</>;
};

UserMessageComponent

optional

React Component

A custom component for rendering user messages in the chat.
Receives message, UserIconComponent, and optionally image as props. When visualAssistant is enabled in the wrapper, user messages can include an attached image (base64 string); pass image to show a preview or indicator in the message.
Default Value:

const UserMessage = ({ message, image, UserIconComponent }: UserMessageProps) => {
    return <div className="user-message-container">
        <div className="user-message-text">
            {message}
        </div>
        {image && <img src={image} alt="Attached" className="user-message-image" />}
        <div className="user-message-icon-wrapper">
            {UserIconComponent && <UserIconComponent />}
        </div>
    </div>;
};

AIMessageComponent

optional

React Component

A custom component for rendering AI assistant messages in the chat.
Receives response, AIIconComponent, and ResponseChatComponents (used internally to render message, filters, products, and any extra response keys).
Default Value: Built-in AIMessage component with product display support.

const AIMessage = ({ response, AIIconComponent, ResponseChatComponents }: AIMessageProps) => {
	const { message, products = [], filters = [] } = response;
	const {
		message: MessageComp = MessageComponent,
		filters: FiltersComponent = Filters,
		products: ProductsComponent = ProductCarousel,
	} = ResponseChatComponents ?? {};
	return (
		<div className="ai-message-container">
			<div className="ai-message-icon-wrapper">{AIIconComponent && <AIIconComponent />}</div>
			<div className="ai-message-wrapper">
				{message && <MessageComp message={message} />}
				{filters.length > 0 && filters.map((f) => <FiltersComponent key={f.field} field={f.field} options={f.options} onFilterClick={...} />)}
				{products.length > 0 && <ProductsComponent products={products} />}
			</div>
		</div>
	);
};

ResponseChatComponents

optional

object

An object of React components used to render parts of the AI response inside AIMessageComponent. Keys map response data to components: message (text), filters (filter chips), products (product list/carousel), and any other keys present in the API response (e.g. custom blocks).
Default Value: { message: MessageComponent, filters: Filters, products: ProductCarousel }

Shape:

{
  message?: React.ElementType;   // Renders the assistant text message
  filters?: React.ElementType;    // Renders filter options (field, options, onFilterClick)
  products?: React.ElementType;   // Renders product recommendations (products array)
  [key: string]: React.ElementType | undefined;  // Extra keys from API response
}

message: Component receives message (string). Renders the AI’s text.
filters: Component receives field, options, onFilterClick. Renders clickable filter options that call askAgent with the selected filter.
products: Component receives products (array). Renders a product carousel or list.
Any other keys on the response object can have a matching component in ResponseChatComponents; they will be rendered with the corresponding value as props.

Related Components

InputBar UnbxdShoppingAssistantWrapper

UnbxdShoppingAssistantWrapper ConversationsList