UnbxdShoppingAssistantWrapper

Overview

The UnbxdShoppingAssistantWrapper is a foundational wrapper component that provides context and state management for all Shopping Assistant functionality. It acts as the core provider that enables AI-powered conversational shopping experiences by managing chat state, conversation history, API communication, and user interactions. All Shopping Assistant components and hooks must be wrapped within this component to function properly.

Usage

// This is a sample example. 
// Please go through the entire documentation for understanding different use cases and update as per your needs.
import { UnbxdShoppingAssistantWrapper } from "@unbxd-ui/react-shopping-assistant-hooks";
 
<UnbxdShoppingAssistantWrapper
	siteKey="YOUR_SITE_KEY"
	apiKey="YOUR_API_KEY"
	storageType="LOCALSTORAGE"
	headers={{
		uId: "user123",
		deviceType: "desktop"
	}}
	extraParams={{
		customParam: "value"
	}}
>
	<ChatComponent />
</UnbxdShoppingAssistantWrapper>

Props

• This is the unique Site Key assigned by Unbxd to every site created in the console dashboard.
• Required for authenticating API requests to the Shopping Assistant service.
• Refer to this section for steps on how to get the Site Key for your account.

• This is the unique API Key assigned to every site created in the console dashboard.
• Used for authenticating Shopping Assistant API calls.
• Refer to this section for steps on how to get the API Key for your account.

• Determines where the conversation ID should be stored for persistence across browser sessions.
• LOCALSTORAGE: The conversation id will be stored in Local Storage and the conversation persists across browser sessions until manually cleared .
• SESSIONSTORAGE: The conversation id will be stored in Session Storage and the conversation only persists for the current browser session .
• "": When left empty the conversation id will not be stored anywhere.
• Default value:: ``

• Tells if all conversations need to be fetched or not.
• Default value:: false

• Specifies the endpoint to be used for the API call.

• Specifies the metadata to be attached to the API call.

• Custom headers to be sent with Shopping Assistant API requests.
• Can include both static values and dynamic functions that return values.
• Default value:: {}

//Example implementation
headers={{
	deviceType: "desktop",
	sessionId: () => getSessionId(), // Dynamic function
	customHeader: "value"
}}

• Additional parameters to be included in Shopping Assistant API requests.
• Supports both static values and dynamic functions.
• Useful for passing custom filters, metadata, or configuration.
• Passing uId is mandatory in the extraParams for the sdk to work properly.
• Default value:: {}

//Example implementation
extraParams={{
	uId: "user123",
	category: "electronics",
	brand: "apple",
	priceRange: () => getCurrentPriceFilter(),
	customParam: "value"
}}

• A function which helps in capturing events and errors during shopping assistant interactions. Users can further run additional pieces of code like error handling, event tracking, or analytics.

• In parameters it receives:

  • type: The type of event like CONVERSATION_STARTED, MESSAGE_SENT, AGENT_RESPONSE_RECEIVED etc.
  • message: The message for the corresponding event.
  • value: The value for the corresponding event (conversation ID, message content, etc.).
  • state: Current state values like conversation history, loading states, conversation ID etc.

• Checkout the full list of events below:

• Default Value:

const onEvent = ({ type, message, value, state }) => {
	if (message) console.log(`${type}:`, message);
	else console.log(type);
};

• Example Usage:

// This is sample code, update it according to your requirement.
const onEvent = ({ type, message, value, state }) => {
	switch (type) {
		case 'CONVERSATION_STARTED':
			console.log('New conversation started:', value);
			// Track conversation start in analytics
			analytics.track('conversation_started', { conversationId: value });
			break;
 
		case 'MESSAGE_SENT':
			console.log('User message sent:', value);
			// Track user engagement
			analytics.track('user_message_sent', { message: value });
			break;
 
		case 'AGENT_RESPONSE_RECEIVED':
			console.log('AI response received:', value);
			// Track AI interaction
			analytics.track('ai_response_received', { response: value });
			break;
 
		case 'ERROR':
			console.error('Shopping assistant error:', value);
			// Send error to monitoring service
			errorTracking.captureException(value);
			break;
 
		case 'LOADING_STARTED':
			// Show loading indicator
			setLoadingState(true);
			break;
 
		case 'LOADING_FINISHED':
			// Hide loading indicator
			setLoadingState(false);
			break;
 
		default:
			console.log(`Event: ${type}`, { message, value });
	}
};