@forbespro/lead-agent-hook/README.md

Lead Chat Agent Hook React Provider

# 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

```bash:packages/LeadAgentHook/README.md
npm install @forbespro/lead-agent-hook
```

## Usage

### Provider Setup

Place the provider at the root of your application:

```tsx:packages/LeadAgentHook/README.md
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

```tsx
// 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