Chat

// This is a sample code for above example. 
// Please go through the entire documentation for understanding different usecases and update as per your needs.
import { UnbxdShoppingAssistantWrapper } from "@unbxd-ui/react-shopping-assistant-hooks";
import { Chat } from "@unbxd-ui/react-shopping-assistant-components";
 
const MessageComponent = ({ message }: { message: string }) => {
	return (
		<div className="ai-message-container">
			<div className="ai-message-icon-wrapper">
				<img src="/logo.png" alt="ai-icon" />
			</div>
			<div className="ai-message-wrapper">
				<div className="ai-message-text">{message}</div>
			</div>
		</div>
	);
};
 
const ShoppingAssistantApp = () => {
	return <UnbxdShoppingAssistantWrapper>
		...
		<Chat ResponseChatComponents={{ message: MessageComponent }} />
		...
	</UnbxdShoppingAssistantWrapper>
};
 
export default ShoppingAssistantApp;

// This is a sample code for above example. 
// Please go through the entire documentation for understanding different usecases and update as per your needs.
import { UnbxdShoppingAssistantWrapper } from "@unbxd-ui/react-shopping-assistant-hooks";
import { Chat } from "@unbxd-ui/react-shopping-assistant-components";
 
const FiltersComponent = ({ field, options = [] }: { field: string, options: string[] }) => {
	const { askAgent } = useShoppingAssistant();
 
	const handleFilterClick = (option: string) => {
		askAgent(option, { field, options: [option] });
	};
 
	const renderFilters = () => {
		return options.map((option) => (
			<div className="filter-option" key={option} onClick={() => handleFilterClick(option)}>
				{option}
			</div>
		));
	};
 
	return (
		<div className="filters-container">
			{renderFilters()}
		</div>
	);
};
 
const ShoppingAssistantApp = () => {
	return <UnbxdShoppingAssistantWrapper>
		...
		<Chat ResponseChatComponents={{ filters: FiltersComponent }} />
		...
	</UnbxdShoppingAssistantWrapper>
};
 
export default ShoppingAssistantApp;

// This is a sample code for above example. 
// Please go through the entire documentation for understanding different usecases and update as per your needs.
import { UnbxdShoppingAssistantWrapper } from "@unbxd-ui/react-shopping-assistant-hooks";
import { Chat } from "@unbxd-ui/react-shopping-assistant-components";
import { ProductCard } from "./components/ProductCard";
 
const ProductsComponent = ({ products }: { products: any[] }) => {
	return <div className="products-container">
		{products.map((product) => <ProductCard product={product} />)}
	</div>;
};
 
const ShoppingAssistantApp = () => {
	return <UnbxdShoppingAssistantWrapper>
		...
		<Chat ResponseChatComponents={{ products: ProductsComponent }} />
		...
	</UnbxdShoppingAssistantWrapper>
};
 
export default ShoppingAssistantApp;

// This is a sample code for above example. 
// Please go through the entire documentation for understanding different usecases and update as per your needs.
import { UnbxdShoppingAssistantWrapper } from "@unbxd-ui/react-shopping-assistant-hooks";
import { Chat } from "@unbxd-ui/react-shopping-assistant-components";
import ProductComparison from "./components/ProductComparison";
 
const TableInfoComponent = (props: any) => {
	const { data = [] } = props;
	const { type } = data[0];
 
	switch (type) {
		case "comparison":
			return <ProductComparison products={data[0]?.data} title={data[0]?.title} />;
		default:
			return null;
	}
};
 
const ShoppingAssistantApp = () => {
	return <UnbxdShoppingAssistantWrapper>
		...
		<Chat ResponseChatComponents={{ table_info: TableInfoComponent }} />
		...
	</UnbxdShoppingAssistantWrapper>
};
 
export default ShoppingAssistantApp;