supporttor/README.md

A generic React chat widget component that supports any app with a knowledge base

# Chat Widget

A customizable chat widget component for React applications that provides live chat support and FAQ functionality.

## Features

- Live chat support with real-time messaging
- FAQ section with expandable categories and questions
- Customizable positioning (bottom-right, bottom-left, top-right, top-left)
- Theme customization
- Loading indicator customization
- Multi-language support
- Sign-in integration
- Responsive design

## Installation

```bash
npm install @your-org/chat-widget
```

## Usage

```tsx
import { ChatWidget } from '@your-org/chat-widget';

function App() {
  return (
    <ChatWidget
      domain_name="your-domain"
      userEmail="user@example.com"
      position="bottom-right"
      language="en"
      theme={{
        primaryColor: '#007AFF',
        backgroundColor: '#FFFFFF',
        textColor: '#000000',
        loadingColor: '#007AFF',
        errorColor: '#FF3B30'
      }}
      loadingIndicator={{
        type: 'dots',
        color: '#007AFF',
        size: 8
      }}
    />
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| domain_name | string | Yes | - | Your domain name for configuration |
| userEmail | string \| null | No | null | User's email address |
| position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | No | 'bottom-right' | Position of the chat widget |
| language | 'en' \| 'tr' \| 'de' \| 'es' \| 'pt' | No | 'en' | Language for chat and FAQ content |
| theme | object | No | See below | Custom theme configuration |
| loadingIndicator | object | No | See below | Loading indicator configuration |

### Theme Configuration

```tsx
theme: {
  primaryColor?: string;    // Default: '#007AFF'
  backgroundColor?: string; // Default: '#FFFFFF'
  textColor?: string;      // Default: '#000000'
  loadingColor?: string;   // Default: '#007AFF'
  errorColor?: string;     // Default: '#FF3B30'
}
```

### Loading Indicator Configuration

```tsx
loadingIndicator: {
  type?: 'dots' | 'spinner'; // Default: 'dots'
  color?: string;            // Default: '#007AFF'
  size?: number;             // Default: 8
}
```

## Language Support

The chat widget supports multiple languages for both chat and FAQ content. Available languages:

- English (en)
- Turkish (tr)
- German (de)
- Spanish (es)
- Portuguese (pt)

The language setting affects:
- Chat interface text
- FAQ content
- System messages
- Error messages

FAQ content is loaded from language-specific files:
```
https://your-storage-url/${domain_name}/faq-${language}.json
```

## FAQ Content Structure

The FAQ content should be provided in a JSON file with the following structure:

```json
{
  "categories": [
    {
      "name": "Category Name",
      "items": [
        {
          "question": "FAQ Question",
          "answer": "FAQ Answer"
        }
      ]
    }
  ]
}
```

## Development

```bash
# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build
```

## License

MIT