Lead Agent Hook

The useLeadAgent hook provides state management for the Lead Agent chat widget. It allows controlling the chat widget from anywhere in your application.

Installation

npm install @forbespro/lead-agent-hook

Usage

Provider Setup

Place the provider at the root of your application:

import { LeadAgentProvider } from '@forbespro/lead-agent-hook';

function App() {
  return (
    <LeadAgentProvider>
      <YourComponent />
      {/* All components using the hook must be inside this provider */}
    </LeadAgentProvider>
  );
}

Using the Hook

// In your component
import { useLeadAgent } from '@forbespro/lead-agent-hook';
import { LeadAgent } from '@forbespro/lead-agent';

function YourComponent() {
  const { isOpen, openChat, closeChat, toggleChat } = useLeadAgent();
  
  return (
    <>
      <button onClick={toggleChat}>Toggle Chat</button>
      
      {/* The LeadAgent component uses the same context */}
      <LeadAgent 
        initialMessages={[]} 
        initialChatId="123"
      />
    </>
  );
}

API

| Property | Type | Description | |----------|------|-------------| | isOpen | boolean | Current open state of the chat widget | | openChat | () => void | Function to open the chat widget | | closeChat | () => void | Function to close the chat widget | | toggleChat | () => void | Function to toggle the chat widget state |

Troubleshooting

If the widget only opens but doesn't close:

1. Ensure you have only ONE LeadAgentProvider at the app root
2. Make sure all components using the hook are rendered inside this provider
3. Check that your close button is using closeChat from the hook
4. Verify you're not overriding the state with props