nextjs-chatbot-ui 1.0.0

package/components/Chatbot.tsx

@@ -0,0 +1,465 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { ChatbotConfig, Message } from '../types';
+import clsx from 'clsx';
+
+interface ChatbotProps {
+  config: ChatbotConfig;
+}
+
+const Chatbot: React.FC<ChatbotProps> = ({ config }) => {
+  const [isOpen, setIsOpen] = useState(config.autoOpen || false);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const labels = {
+    title: config.labels?.title || 'Chat Support',
+    placeholder: config.labels?.placeholder || 'Type your message...',
+    sendButton: config.labels?.sendButton || 'Send',
+    typingIndicator: config.labels?.typingIndicator || 'Typing...',
+    welcomeMessage: config.labels?.welcomeMessage || 'Hello! How can I help you today?',
+    errorMessage: config.labels?.errorMessage || 'Sorry, something went wrong. Please try again.',
+  };
+
+  const position = config.position || 'bottom-right';
+
+  useEffect(() => {
+    if (isOpen && messages.length === 0) {
+      // Add welcome message
+      const welcomeMsg: Message = {
+        id: 'welcome-1',
+        text: labels.welcomeMessage,
+        sender: 'bot',
+        timestamp: new Date(),
+        avatar: config.botInfo?.avatar,
+      };
+      setMessages([welcomeMsg]);
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  const sendMessage = async (messageText?: string) => {
+    const textToSend = messageText || inputValue;
+    if (!textToSend.trim() || isLoading) return;
+
+    const userMessage: Message = {
+      id: `user-${Date.now()}`,
+      text: textToSend,
+      sender: 'user',
+      timestamp: new Date(),
+      avatar: config.userInfo?.avatar,
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
+    if (!messageText) {
+      setInputValue('');
+    }
+    setIsLoading(true);
+
+    try {
+      const response = await fetch(config.backendUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          message: textToSend,
+          userInfo: config.userInfo,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to send message');
+      }
+
+      const data = await response.json();
+      
+      const botMessage: Message = {
+        id: `bot-${Date.now()}`,
+        text: data.message || data.response || labels.errorMessage,
+        sender: 'bot',
+        timestamp: new Date(),
+        avatar: config.botInfo?.avatar,
+        suggestedReplies: data.suggestedReplies || data.suggestions || undefined,
+      };
+
+      setMessages((prev) => [...prev, botMessage]);
+    } catch (error) {
+      const errorMessage: Message = {
+        id: `error-${Date.now()}`,
+        text: labels.errorMessage,
+        sender: 'bot',
+        timestamp: new Date(),
+        avatar: config.botInfo?.avatar,
+      };
+      setMessages((prev) => [...prev, errorMessage]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+
+  const formatTime = (date: Date) => {
+    return new Intl.DateTimeFormat('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+    }).format(date);
+  };
+
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat('en-US', {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+    }).format(date);
+  };
+
+  const shouldShowDateSeparator = (currentIndex: number) => {
+    if (!config.showDateSeparator) return false;
+    if (currentIndex === 0) return true;
+    
+    const currentMsg = messages[currentIndex];
+    const prevMsg = messages[currentIndex - 1];
+    
+    const currentDate = new Date(currentMsg.timestamp).toDateString();
+    const prevDate = new Date(prevMsg.timestamp).toDateString();
+    
+    return currentDate !== prevDate;
+  };
+
+  const handleSuggestedReply = (reply: string) => {
+    sendMessage(reply);
+  };
+
+  const positionClasses = {
+    'bottom-right': 'bottom-4 right-4',
+    'bottom-left': 'bottom-4 left-4',
+    'top-right': 'top-4 right-4',
+    'top-left': 'top-4 left-4',
+  };
+
+  const primaryColor = config.primaryColor || '#6B46C1'; // Default purple like Sendbird
+
+  return (
+    <div className={clsx('fixed z-50', positionClasses[position])}>
+      {!isOpen ? (
+        <button
+          onClick={() => setIsOpen(true)}
+          className="rounded-full p-4 shadow-lg transition-all duration-300 hover:scale-110"
+          style={{
+            backgroundColor: primaryColor,
+          }}
+          aria-label="Open chat"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-6 w-6 text-white"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+            />
+          </svg>
+        </button>
+      ) : (
+        <div className="bg-white rounded-lg shadow-2xl w-96 h-[600px] flex flex-col border border-gray-200 overflow-hidden">
+          {/* Header - Light gray like Sendbird */}
+          <div className="bg-gray-50 border-b border-gray-200 px-4 py-3 flex items-center justify-between">
+            <div>
+              <h3 className="font-semibold text-base text-gray-900">
+                {config.botInfo?.name || labels.title}
+              </h3>
+              <p className="text-xs text-gray-500">Online</p>
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => {
+                  setMessages([]);
+                  setIsOpen(false);
+                  setIsOpen(true);
+                }}
+                className="text-gray-500 hover:text-gray-700 transition-colors p-1"
+                aria-label="Restart chat"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                  />
+                </svg>
+              </button>
+              <button
+                className="text-gray-500 hover:text-gray-700 transition-colors p-1"
+                aria-label="Expand chat"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
+                  />
+                </svg>
+              </button>
+              <button
+                onClick={() => setIsOpen(false)}
+                className="text-gray-500 hover:text-gray-700 transition-colors p-1"
+                aria-label="Close chat"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          {/* Messages */}
+          <div
+            className="flex-1 overflow-y-auto px-4 py-4 space-y-4"
+            style={{
+              backgroundColor: config.backgroundColor || '#ffffff',
+            }}
+          >
+            {messages.map((message, index) => (
+              <React.Fragment key={message.id}>
+                {shouldShowDateSeparator(index) && (
+                  <div className="flex items-center justify-center my-4">
+                    <span className="text-xs text-gray-500 bg-white px-3 py-1 rounded-full border border-gray-200">
+                      {formatDate(message.timestamp)}
+                    </span>
+                  </div>
+                )}
+                <div
+                  className={clsx(
+                    'flex',
+                    message.sender === 'user' ? 'justify-end' : 'justify-start'
+                  )}
+                >
+                  <div className="flex flex-col gap-1 max-w-[75%]">
+                    <div className="relative">
+                      {/* Bubble tail for bot messages */}
+                      {message.sender === 'bot' && (
+                        <div
+                          className="absolute -left-2 bottom-0 w-0 h-0 z-0"
+                          style={{
+                            borderTop: '6px solid transparent',
+                            borderBottom: '6px solid transparent',
+                            borderRight: '8px solid #F3F4F6',
+                          }}
+                        />
+                      )}
+                      {/* Bubble tail for user messages */}
+                      {message.sender === 'user' && (
+                        <div
+                          className="absolute -right-2 bottom-0 w-0 h-0 z-0"
+                          style={{
+                            borderTop: '6px solid transparent',
+                            borderBottom: '6px solid transparent',
+                            borderLeft: `8px solid ${primaryColor}`,
+                          }}
+                        />
+                      )}
+                      <div
+                        className={clsx(
+                          'rounded-2xl px-4 py-2.5 relative',
+                          message.sender === 'user'
+                            ? 'text-white rounded-br-sm'
+                            : 'bg-gray-100 text-gray-900 rounded-bl-sm'
+                        )}
+                        style={{
+                          backgroundColor:
+                            message.sender === 'user'
+                              ? primaryColor
+                              : undefined,
+                        }}
+                      >
+                        <p className="text-sm whitespace-pre-wrap break-words leading-relaxed">
+                          {message.text}
+                        </p>
+                        {config.showTimestamp && (
+                          <p
+                            className={clsx(
+                              'text-xs mt-1.5',
+                              message.sender === 'user'
+                                ? 'text-white/70'
+                                : 'text-gray-500'
+                            )}
+                          >
+                            {formatTime(message.timestamp)}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                    {/* Suggested Replies */}
+                    {message.sender === 'bot' && message.suggestedReplies && message.suggestedReplies.length > 0 && (
+                      <div className="flex flex-col gap-2 mt-1">
+                        {message.suggestedReplies.map((reply, idx) => (
+                          <button
+                            key={idx}
+                            onClick={() => handleSuggestedReply(reply)}
+                            className="text-left rounded-xl px-4 py-2.5 text-sm font-medium transition-all hover:scale-[1.02] border border-gray-200 hover:border-gray-300 bg-white shadow-sm hover:shadow"
+                            style={{
+                              color: primaryColor,
+                              borderColor: `${primaryColor}40`,
+                            }}
+                          >
+                            {reply}
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </React.Fragment>
+            ))}
+            {isLoading && (
+              <div className="flex justify-start">
+                <div className="bg-gray-100 rounded-2xl rounded-bl-sm px-4 py-2.5 relative">
+                  <div className="absolute -left-2 bottom-0 w-0 h-0 z-0" style={{
+                    borderTop: '6px solid transparent',
+                    borderBottom: '6px solid transparent',
+                    borderRight: '8px solid #F3F4F6',
+                  }} />
+                  <div className="flex gap-1 relative z-10">
+                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
+                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
+                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
+                  </div>
+                </div>
+              </div>
+            )}
+            <div ref={messagesEndRef} />
+          </div>
+
+          {/* Footer - Powered by */}
+          {config.poweredByText && (
+            <div className="border-t border-gray-200 px-4 py-2 bg-gray-50">
+              <p className="text-xs text-gray-500 text-center">
+                {config.poweredByText}
+              </p>
+            </div>
+          )}
+
+          {/* Input */}
+          <div className="border-t border-gray-200 bg-white">
+            <div className="p-3">
+              <div className="flex items-end gap-2 bg-gray-50 rounded-2xl px-4 py-2.5 border border-gray-200 focus-within:border-gray-300 focus-within:bg-white transition-colors">
+                <textarea
+                  ref={inputRef}
+                  value={inputValue}
+                  onChange={(e) => {
+                    setInputValue(e.target.value);
+                    // Auto-resize textarea
+                    e.target.style.height = 'auto';
+                    e.target.style.height = `${Math.min(e.target.scrollHeight, 120)}px`;
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                      e.preventDefault();
+                      sendMessage();
+                    }
+                  }}
+                  placeholder={labels.placeholder}
+                  disabled={isLoading}
+                  rows={1}
+                  className="flex-1 resize-none bg-transparent border-0 focus:outline-none disabled:cursor-not-allowed text-sm text-gray-900 placeholder:text-gray-500 max-h-[120px] overflow-y-auto"
+                />
+                <button
+                  onClick={() => sendMessage()}
+                  disabled={!inputValue.trim() || isLoading}
+                  className="flex-shrink-0 rounded-full p-2 transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center"
+                  style={{
+                    backgroundColor: inputValue.trim() ? primaryColor : 'transparent',
+                    color: inputValue.trim() ? 'white' : '#9CA3AF',
+                  }}
+                  aria-label="Send message"
+                >
+                  {inputValue.trim() ? (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-5 w-5"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2.5}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
+                      />
+                    </svg>
+                  ) : (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-5 w-5"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
+                      />
+                    </svg>
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Chatbot;

package/index.tsx

@@ -0,0 +1,5 @@
+export { default as Chatbot } from './components/Chatbot';
+export type { ChatbotConfig, Message, ChatbotProps } from './types';
+
+export { default as AdminSetup } from './components/AdminSetup';
+export type { DatabaseType, DatabaseConnection, ColumnSelection, DatabaseConfig, AdminSetupProps } from './types/admin';

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "nextjs-chatbot-ui",
+  
+  "version": "1.0.0",
+  "description": "A configurable chatbot UI component for Next.js with Tailwind CSS",
+  "main": "./index.tsx",
+  "types": "./types/index.ts",
+  "exports": {
+    ".": {
+      "import": "./index.tsx",
+      "require": "./index.tsx",
+      "types": "./types/index.ts"
+    },
+    "./components/Chatbot": {
+      "import": "./components/Chatbot.tsx",
+      "require": "./components/Chatbot.tsx"
+    },
+    "./types": {
+      "import": "./types/index.ts",
+      "require": "./types/index.ts",
+      "types": "./types/index.ts"
+    }
+  },
+  "files": [
+    "components",
+    "types",
+    "index.tsx",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "echo 'Package is ready to use. Source files are included.'",
+    "dev": "next dev",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "chatbot",
+    "ui",
+    "component",
+    "nextjs",
+    "tailwind",
+    "react"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "next": "^14.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.3.3"
+  }
+}

package/types/admin.ts

@@ -0,0 +1,29 @@
+export type DatabaseType = 'mongodb' | 'postgres';
+
+export interface DatabaseConnection {
+  type: DatabaseType;
+  host: string;
+  port: number;
+  database: string;
+  username?: string;
+  password?: string;
+  connectionString?: string; // For MongoDB connection string
+  ssl?: boolean;
+}
+
+export interface ColumnSelection {
+  embeddingColumns: string[];
+  llmColumns: string[];
+  chromaColumns: string[];
+}
+
+export interface DatabaseConfig {
+  connection: DatabaseConnection;
+  columnSelection: ColumnSelection;
+}
+
+export interface AdminSetupProps {
+  onSave?: (config: DatabaseConfig) => void;
+  onTestConnection?: (connection: DatabaseConnection) => Promise<boolean>;
+  onFetchColumns?: (connection: DatabaseConnection) => Promise<string[]>;
+}

package/types/index.ts

@@ -0,0 +1,51 @@
+export interface ChatbotConfig {
+  // Backend configuration
+  backendUrl: string;
+  
+  // UI Labels
+  labels?: {
+    title?: string;
+    placeholder?: string;
+    sendButton?: string;
+    typingIndicator?: string;
+    welcomeMessage?: string;
+    errorMessage?: string;
+  };
+  
+  // Position configuration
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  
+  // User/Bot information
+  userInfo?: {
+    name?: string;
+    avatar?: string;
+  };
+  
+  botInfo?: {
+    name?: string;
+    avatar?: string;
+  };
+  
+  // Styling
+  primaryColor?: string;
+  backgroundColor?: string;
+  
+  // Behavior
+  autoOpen?: boolean;
+  showTimestamp?: boolean;
+  showDateSeparator?: boolean;
+  poweredByText?: string; // Footer text like "Powered by sendbird"
+}
+
+export interface Message {
+  id: string;
+  text: string;
+  sender: 'user' | 'bot';
+  timestamp: Date;
+  avatar?: string;
+  suggestedReplies?: string[]; // Suggested reply buttons
+}
+
+export interface ChatbotProps {
+  config: ChatbotConfig;
+}