Conversations Component
Overview
The Conversations component is a UI component of the Shopping Assistant SDK that displays and manages multiple conversation sessions. It allows users to view their conversation history, switch between different chat sessions, and navigate through previous interactions with the AI shopping assistant. This component is essential for applications that need to support multiple conversation threads and conversation persistence.
Usage
// importing component
import { Conversations } from "@unbxd-ui/react-shopping-assistant-components";⚠️
Note:
The Conversations component must be used within the UnbxdShoppingAssistantWrapper to ensure that the component and the shopping assistant functionality work properly.
Code Usage
// This is a sample 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 { Conversations, Chat } from "@unbxd-ui/react-shopping-assistant-components";
function ShoppingAssistantApp() {
return (
<UnbxdShoppingAssistantWrapper
siteKey="YOUR_SITE_KEY"
apiKey="YOUR_API_KEY"
...
>
<div className="shopping-assistant-layout">
<div className="sidebar">
<Conversations />
</div>
<div className="main-chat">
<Chat />
</div>
</div>
</UnbxdShoppingAssistantWrapper>
);
}Props
- A custom component to display as the header of the conversations list.
- This component appears at the top of the conversations panel.
- Default Value:
const ConversationHeaderComponent = ({}) => {
return <div className="conversation-header-component">Conversations</div>;
};- A custom component for rendering individual conversation items in the list.
- Receives conversation data, index, current conversationId, and updateConversationId function as props.
- Default Value:
const ConversationItemComponent = ({
conversation,
index,
conversationId,
updateConversationId,
}: {
conversation: any;
index: number;
conversationId: string;
updateConversationId: (conversationId: string) => void;
}) => {
return (
<div
key={conversation?.conversation_id}
className={`conversation-list-item ${conversationId === conversation?.conversation_id ? "selected" : ""}`}
data-index={index}
onClick={() => updateConversationId(conversation?.conversation_id)}>
{conversation?.conversation_id}
</div>
);
};