🤖 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

npm install @farhanmp/ai-chatbot-widget

2. Get Gemini API Key

1. Visit Google AI Studio
2. Create new API key
3. Add to your environment variables

3. Environment Variables

# .env.local (Next.js) atau .env (React)
NEXT_PUBLIC_GEMINI_API_KEY=your_api_key_here

📋 Basic Usage

React/Next.js App

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:

// 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

<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:

/* 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:

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:

// 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

📦 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
• 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

Package ini dibuat untuk memudahkan integrasi chatbot AI ke website React/Next.js. Feedback dan kontribusi sangat diterima!