💬 Chat Widget (React Component)

A customizable and interactive chat widget built with React and Tailwind CSS, designed for easy integration into any web application.

✨ Features

• Customizable Appearance: Easily adjust primary colors, logos, and titles.
• Toggleable Chat Status: Open and close the chat interface programmatically.
• Maintenance Mode: Display an offline or maintenance message when needed.
• Conversation Flow: Manages and displays chat messages.
• Styling via Props: Provides flexibility to apply custom styles directly.
• Integration with you ai: Integrate with different llms to interact on your chat.

🚀 Installation

You'd typically install this component library via npm or yarn:

npm install gb-chat-widget # Replace with your actual package name
# or
yarn add gb-chat-widget # Replace with your actual package name

Note: This component uses Tailwind CSS. Ensure your consuming project is set up to process Tailwind classes.

📦 Usage

The Chat component is designed to be self-contained, requiring specific props to control its behavior and appearance.

import React, { useState } from 'react';
import { Chat } from 'gb-chat-widget'; // Adjust import path as needed
import type { ClientMessage, ChatStatusType } from 'gb-chat-widget'; // Import types

function MyApp() {
  const [conversation, setConversation] = useState<ClientMessage[]>([]);
  const [chatStatus, setChatStatus] = useState<ChatStatusType>("closed");
  const [isMaintenance, setIsMaintenance] = useState(false);
  const [isOffline, setIsOffline] = useState(false);

  // Function to handle sending a message and receiving a response
  // Replace this with your actual AI/backend integration
  const handleContinueConversation = async (newMessage: string) => {
    const newUserMessage: ClientMessage = { id: Date.now().toString(), role: "user", display: newMessage };
    setConversation(prev => [...prev, newUserMessage]);

    // Simulate an AI response after a delay
    await new Promise(resolve => setTimeout(resolve, 1000));
    const botResponse: ClientMessage = { id: (Date.now() + 1).toString(), role: "assistant", display: `Echo: ${newMessage}` };
    setConversation(prev => [...prev, botResponse]);
  };

  return (
    <div style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <h1>My Application</h1>
      <button onClick={() => setChatStatus(chatStatus === "open" ? "closed" : "open")}>
        Toggle Chat
      </button>
      <button onClick={() => setIsMaintenance(!isMaintenance)}>
        Toggle Maintenance Mode
      </button>
      <button onClick={() => setIsOffline(!isOffline)}>
        Toggle Offline Mode
      </button>

      <Chat
        primaryColor="blue" // Example: "red", "green", "yellow", "black", "purple", "gray"
        headerTitle="My Company Chat"
        headerLogo="[https://via.placeholder.com/40](https://via.placeholder.com/40)" // URL to your header logo
        bodyLogo="[https://via.placeholder.com/60](https://via.placeholder.com/60)"   // URL to your chat body logo
        bodyTitle="Welcome to Our Support!"
        bodySubtitle="How can I help you today?"
        conversation={conversation}
        uiChatStatus={chatStatus}
        continueConversation={handleContinueConversation}
        setConversation={setConversation}
        isOffline={isOffline}
        isMaintananceMode={isMaintenance}
        containerStyle={{
          // Optional: custom inline styles for the chat container
          border: '2px solid #ccc',
          boxShadow: '0 4px 10px rgba(0,0,0,0.1)'
        }}
        handleChatStatus={setChatStatus} // Function to change chat status
      />
    </div>
  );
}

export default MyApp;****