@forbespro/lead-agent-hook v1.0.14

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

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