aquaculture-chatbot-widget/README.md

A customizable chatbot widget for aquaculture consultation

# Aquaculture Chatbot Widget

A customizable chatbot widget for aquaculture consultation, built with React and TypeScript.

## Features

- 🤖 AI-powered aquaculture consultation
- 💬 Real-time chat with stream responses
- 🎨 Customizable theme and styling
- 📱 Responsive design
- 🔒 Secure API key handling
- 💾 Local storage for chat history
- 🌐 Easy to embed in any website

## Installation

```bash
npm install aquaculture-chatbot-widget
```

## Usage

### 1. As a React Component

```tsx
import { ChatWidget } from 'aquaculture-chatbot-widget';

function App() {
  return (
    <ChatWidget
      theme={{
        primaryColor: '#007bff',
        secondaryColor: '#f0f0f0',
        fontFamily: 'Arial, sans-serif',
      }}
      position={{
        bottom: '20px',
        right: '20px',
      }}
      defaultIsExpanded={false}
      persistChat={true}
    />
  );
}
```

### 2. With Next.js

```tsx
'use client';

import dynamic from 'next/dynamic';

const ChatWidget = dynamic(
  () => import('aquaculture-chatbot-widget').then((mod) => mod.ChatWidget),
  { ssr: false }
);

export default function App() {
  return (
    <ChatWidget
      theme={{
        primaryColor: '#007bff',
        secondaryColor: '#f0f0f0',
        fontFamily: 'Arial, sans-serif',
      }}
      position={{
        bottom: '20px',
        right: '20px',
      }}
      defaultIsExpanded={false}
      persistChat={true}
    />
  );
}
```

### 3. As a Standalone Widget

```html
<script src="https://unpkg.com/aquaculture-chatbot-widget"></script>
<script>
  const chatbot = new ChatbotWidget({
    theme: {
      primaryColor: '#007bff',
      secondaryColor: '#f0f0f0',
      fontFamily: 'Arial, sans-serif'
    },
    position: {
      bottom: '20px',
      right: '20px'
    }
  });
  chatbot.mount();
</script>
```

## Configuration

### Theme Options

```typescript
interface Theme {
  primaryColor?: string;   // Main color for buttons and accents
  secondaryColor?: string; // Background color for messages
  fontFamily?: string;     // Font family for the widget
}
```

### Position Options

```typescript
interface Position {
  bottom?: string; // Distance from bottom
  right?: string;  // Distance from right
}
```

### Other Options

- `defaultIsExpanded`: Boolean to control initial expanded state
- `persistChat`: Boolean to enable/disable chat history persistence

## API Key Setup

1. Create a `.env` file in your project root
2. Add your DeepSeek API key:
```
VITE_DEEPSEEK_API_KEY=your-api-key
```

## Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run linting
npm run lint
```

## License

MIT © [Your Name]