npm package: @farhanmp/ai-chatbot-widget
Description: AI Chatbot Widget untuk React/Next.js dengan Gemini AI
Latest version: 1.0.9

# 🤖 AI Chatbot Widget

AI Chatbot Widget untuk React/Next.js dengan Google Gemini AI. **Plug-and-play solution** untuk menambahkan chatbot ke website Anda.

> **⚠️ Important:** Package ini sedang dalam pengembangan aktif. Beberapa styling mungkin perlu adjustment manual.

## ✨ Features

- 🤖 **Powered by Google Gemini AI** - Conversational AI yang cerdas
- 🎨 **Customizable** - Nama bot, pesan, dan basic theming
- 📱 **Responsive** - Mobile & desktop friendly
- ⚡ **Easy Setup** - Minimal configuration required
- 🎯 **Floating Widget** - Non-intrusive chat button

## 🚀 Installation & Setup

### 1. Install Package

```bash
npm install @farhanmp/ai-chatbot-widget
```

### 2. Get Gemini API Key

1. Visit [Google AI Studio](https://makersuite.google.com/app/apikey)
2. Create new API key
3. Add to your environment variables

### 3. Environment Variables

```bash
# .env.local (Next.js) atau .env (React)
NEXT_PUBLIC_GEMINI_API_KEY=your_api_key_here
```

## 📋 Basic Usage

### React/Next.js App

```jsx
import ChatBot from "@farhanmp/ai-chatbot-widget";

function App() {
  return (
    <div>
      <h1>My Website</h1>

      {/* Chatbot floating button */}
      <ChatBot
        geminiApiKey={process.env.NEXT_PUBLIC_GEMINI_API_KEY}
        botName="Customer Service"
        companyInfo="Halo! Ada yang bisa saya bantu?"
      />
    </div>
  );
}
```

### Next.js with TypeScript

Jika menggunakan TypeScript, tambahkan file declaration:

```typescript
// types/chatbot.d.ts
declare module "@farhanmp/ai-chatbot-widget" {
  interface ChatBotProps {
    geminiApiKey: string;
    botName?: string;
    companyInfo?: string;
    primaryColor?: string;
    headerColor?: string;
    botMessageColor?: string;
    userMessageColor?: string;
    borderRadius?: string;
    width?: string;
  }

  const ChatBot: React.FC<ChatBotProps>;
  export default ChatBot;
}
```

## ⚙️ Configuration Options

| Prop               | Type   | Default      | Description               |
| ------------------ | ------ | ------------ | ------------------------- |
| `geminiApiKey`     | string | **Required** | Google Gemini API key     |
| `botName`          | string | "Assistant"  | Bot display name          |
| `companyInfo`      | string | Default text | Bot welcome message       |
| `primaryColor`     | string | "#051682"    | Main theme color          |
| `headerColor`      | string | "#051682"    | Header background color   |
| `botMessageColor`  | string | "#6d7ff5"    | Bot message bubble color  |
| `userMessageColor` | string | "#051682"    | User message bubble color |
| `borderRadius`     | string | "10px"       | Chat popup border radius  |
| `width`            | string | "380px"      | Chat popup width          |

## 🎨 Customization Example

```jsx
<ChatBot
  geminiApiKey={process.env.NEXT_PUBLIC_GEMINI_API_KEY}
  botName="CS Toko ABC"
  companyInfo={`Selamat datang di Toko ABC! 

Saya bisa membantu dengan:
• Informasi produk & harga
• Cara pemesanan & pembayaran
• Status pengiriman
• Layanan pelanggan

Silakan tanyakan apa saja! 😊`}
  primaryColor="#2563eb"
  headerColor="#1e40af"
  width="400px"
  borderRadius="16px"
/>
```

## 🔧 Troubleshooting

### Styling Issues

Jika styling tidak sesuai harapan, Anda bisa override dengan CSS:

```css
/* Override chatbot styles */
.chatbot-container {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
}

.chatbot-popup {
  width: 380px !important;
  height: 500px !important;
  border-radius: 16px !important;
}
```

### TypeScript Errors

Jika ada TypeScript errors, gunakan dynamic import:

```jsx
import dynamic from "next/dynamic";

const ChatBot = dynamic(() => import("@farhanmp/ai-chatbot-widget"), {
  ssr: false,
  loading: () => null,
});
```

### Mobile Layout Issues

Untuk responsive yang lebih baik, wrap dalam component:

```jsx
// components/MyChatbot.jsx
import { useEffect, useState } from "react";

export default function MyChatbot() {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return (
    <ChatBot
      geminiApiKey={process.env.NEXT_PUBLIC_GEMINI_API_KEY}
      botName="Assistant"
      companyInfo="Halo! Ada yang bisa dibantu?"
    />
  );
}
```

## 🌐 Live Demo

Lihat implementasi di portfolio: **[https://farhndv.me](https://farhndv.me)**

## 📦 What You Get

✅ Floating chat button  
✅ Popup chat interface  
✅ Message history  
✅ Typing indicator  
✅ Mobile responsive  
✅ Custom theming support  
✅ Gemini AI integration

## ⚠️ Known Issues

- CSS styling mungkin perlu manual override di beberapa kasus
- Mobile responsiveness sedang dalam perbaikan
- TypeScript support perlu declaration file tambahan

## 📧 Support

Untuk bug reports atau feature requests, silakan hubungi melalui:

- **Portfolio:** [https://farhndv.me](https://farhndv.me)
- **Email:** Contact via portfolio website

## 🎯 Roadmap

- [ ] Better CSS isolation
- [ ] Improved TypeScript support
- [ ] More theming options
- [ ] Position customization
- [ ] Animation improvements

---

**Made with ❤️ by [Farhan Maulana Pangestu](https://farhndv.me)**

_Package ini dibuat untuk memudahkan integrasi chatbot AI ke website React/Next.js. Feedback dan kontribusi sangat diterima!_