InputBar

The InputBar component provides a text input interface for users to send messages to the AI shopping assistant. It integrates with the useShoppingAssistant hook to send queries and automatically handles user input, submission, and clearing.

Overview

The InputBar is a simple yet essential component that enables users to interact with the shopping assistant through text input. It features a text field with customizable placeholder text and a send button with support for both click and Enter key submission.

Usage

import { UnbxdShoppingAssistantWrapper } from "@unbxd-ui/react-shopping-assistant-hooks";
import { InputBar } from "@unbxd-ui/react-shopping-assistant-components";
 
function ShoppingAssistantApp() {
  return (
    <UnbxdShoppingAssistantWrapper 
      siteKey="YOUR_SITE_KEY" 
      apiKey="YOUR_API_KEY"
    >
      <div className="chat-interface">
        <InputBar placeholder="Ask about our products..." />
      </div>
    </UnbxdShoppingAssistantWrapper>
  );
}

Props

• The placeholder text displayed in the input field when it's empty.
• Default Value: "Ask me anything"

• A custom component to render as the send button.
• Default Value:

const ButtonComponent = () => {
	return <>Send</>;
};

• Callback function called when a message is sent (on button click or Enter key press).
• Receives the message string as a parameter for custom handling like analytics or validation.
• The message is automatically sent to the AI assistant regardless of this callback.
• Default Value:

(message: string) => {
		// console.log(message);
}

• The default value to populate in the input field when the component loads.
• Useful for pre-filling the input with a suggested query or continuation.
• Default Value: ""

Related Components