@buni.ai/chatbot-react

React adapter for BuniAI Chat Widget - provides React hooks and components for seamless chatbot integration.

Features

• ⚛️ React Native - Built specifically for React applications
• 🪝 Hooks API - Modern React hooks for state management
• 🧩 Components - Pre-built React components ready to use
• 📦 TypeScript Ready - Full type definitions included
• 🎯 Context Provider - Easy widget sharing across components
• 🔄 Reactive State - Automatic UI updates with widget state changes

Installation

npm install @buni.ai/chatbot-react

Quick Start

Using the Hook

import React from 'react';
import { useBuniChat, BuniChatWidget } from '@buni.ai/chatbot-react';

function App() {
  const { isOpen, toggle, setCustomerData } = useBuniChat({
    token: 'your-embed-token',
    config: {
      theme: 'default',
      position: 'bottom-right'
    }
  });

  const handleCustomerLogin = () => {
    setCustomerData({
      name: 'John Doe',
      email: '[email protected]',
      userId: 'user123'
    });
  };

  return (
    <div>
      <h1>My App</h1>
      <button onClick={toggle}>
        {isOpen ? 'Close Chat' : 'Open Chat'}
      </button>
      <button onClick={handleCustomerLogin}>
        Set Customer Data
      </button>
      <BuniChatWidget />
    </div>
  );
}

Using the Provider

import React from 'react';
import { BuniChatProvider, BuniChatWidget, BuniChatButton } from '@buni.ai/chatbot-react';

function App() {
  return (
    <BuniChatProvider
      options={{
        token: 'your-embed-token',
        config: {
          theme: 'default',
          position: 'bottom-right'
        }
      }}
    >
      <MyAppContent />
    </BuniChatProvider>
  );
}

function MyAppContent() {
  return (
    <div>
      <h1>My App</h1>
      <BuniChatButton>Chat with Support</BuniChatButton>
      <BuniChatWidget />
    </div>
  );
}

Components

BuniChatWidget

The main widget component that renders the chat interface.

<BuniChatWidget 
  className="custom-widget" 
  style={{ zIndex: 1000 }}
/>

BuniChatButton

A button to trigger the chat widget.

<BuniChatButton 
  onClick={() => console.log('Chat opened')}
  className="chat-trigger"
  showUnreadCount={true}
>
  Need Help?
</BuniChatButton>

BuniChatFloatingButton

A pre-styled floating action button for the chat widget.

<BuniChatFloatingButton 
  position="bottom-right"
  size="medium"
  theme="default"
/>

Hooks

useBuniChat

Main hook for widget interaction.

const {
  // State
  isOpen,
  isLoaded,
  isMinimized,
  unreadCount,
  isReady,
  
  // Actions
  show,
  hide,
  toggle,
  minimize,
  maximize,
  setCustomerData,
  setSessionVariables,
  sendMessage,
  
  // Widget instance
  widget
} = useBuniChat(options);

useWidgetEvents

Hook for event handling.

const { on, off } = useWidgetEvents();

useEffect(() => {
  const handleNewMessage = (data) => {
    console.log('New message:', data.message);
  };
  
  on('new_message', handleNewMessage);
  
  return () => off('new_message', handleNewMessage);
}, [on, off]);

useCustomerData

Hook for customer data management.

const { customerData, setCustomerData, getCustomerData } = useCustomerData();

const handleLogin = () => {
  setCustomerData({
    name: 'John Doe',
    email: '[email protected]'
  });
};

Advanced Usage

Custom Event Handling

function ChatEventHandler() {
  const { widget } = useBuniChat();
  
  useEffect(() => {
    if (widget) {
      const handleTyping = (data) => {
        console.log('Typing indicator:', data.isBot);
      };
      
      widget.on('typing_start', handleTyping);
      widget.on('typing_stop', handleTyping);
      
      return () => {
        widget.off('typing_start', handleTyping);
        widget.off('typing_stop', handleTyping);
      };
    }
  }, [widget]);
  
  return null;
}

Conditional Rendering

function ConditionalChat() {
  const { isReady, isOpen } = useBuniChat({
    token: 'your-token'
  });
  
  if (!isReady) {
    return <div>Loading chat...</div>;
  }
  
  return (
    <div>
      {isOpen && <div>Chat is open!</div>}
      <BuniChatWidget />
    </div>
  );
}

TypeScript Support

Full TypeScript support with comprehensive type definitions:

import { 
  BuniChatConfig,
  BuniChatOptions,
  CustomerData,
  SessionVariables 
} from '@buni.ai/chatbot-react';

const config: BuniChatConfig = {
  theme: 'dark',
  position: 'bottom-left',
  primaryColor: '#007bff'
};

Requirements

• React >= 16.8.0
• React DOM >= 16.8.0

License

MIT © BuniAI Team