NerdAgent Chat Widget for React

A customizable chat widget component for React applications.

Installation

npm install nerdagent-chat-widget-react

Usage

import React from 'react';
import { NerdChatWidget } from 'nerdagent-chat-widget-react';

function App() {
  return (
    <div className="App">
      <NerdChatWidget
        apiKey="your-api-key"
        agentId="your-agent-id"
        agentName="Support Agent"
        agentRole="Customer Support"
        primaryColor="#2d3e50"
        accentColor="#4e8cff"
        welcomeMessage="Hi! How can I help you today?"
        placeholderText="Type your message..."
        position="bottom-right"
        width="350"
        height="500"
        showMinimizeButton={true}
        showTimestamps={true}
        enableFileUpload={false}
        enableSpeech={false}
        showPoweredBy={true}
        onMessageSent={(event) => console.log('Message sent:', event)}
        onWidgetOpened={() => console.log('Widget opened')}
        onWidgetClosed={() => console.log('Widget closed')}
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiKey | string | - | API key for authentication | | agentId | string | - | Agent ID to connect to | | token | string | - | JWT token for authentication | | agentName | string | 'Support Agent' | Name of the support agent | | agentRole | string | 'Customer Support' | Role/title of the agent | | primaryColor | string | '#2d3e50' | Primary color theme | | accentColor | string | '#4e8cff' | Accent color theme | | welcomeMessage | string | 'Hi! How can I help?' | Initial welcome message | | placeholderText | string | 'Type your message...' | Input placeholder text | | position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | 'bottom-right' | Widget position on screen | | width | string | '350' | Widget width in pixels | | height | string | '500' | Widget height in pixels | | showMinimizeButton | boolean | true | Show minimize/maximize button | | showTimestamps | boolean | true | Show message timestamps | | enableFileUpload | boolean | false | Enable file upload feature | | enableSpeech | boolean | false | Enable speech recognition | | showPoweredBy | boolean | true | Show "Powered by" branding |

Events

| Event | Type | Description | |-------|------|-------------| | onMessageSent | (event: { message: string; timestamp: Date }) => void | Called when user sends a message | | onWidgetOpened | () => void | Called when widget is opened | | onWidgetClosed | () => void | Called when widget is closed |

TypeScript Support

Full TypeScript definitions are included:

import { NerdChatWidget, WidgetPosition, ChatWidgetProps } from 'nerdagent-chat-widget-react';

License

MIT