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

npm install aquaculture-chatbot-widget

Usage

1. As a React Component

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

'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

<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

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

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

# 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]