🧑‍💻 CS Chatbot UI Package - [Developed by Dharaneesh] 🤖

A customizable chatbot UI package built with TypeScript, TailwindCSS, and plain HTML/CSS/JS. It includes a floating button to toggle visibility and is highly customizable, with options to change the header color, sender message color, and chatbot name.

🚀 Features

• 🟣 Customizable Header Color
• 💬 Customizable Sender Message Color
• 🤖 Custom Chatbot Name
• 🔄 Interactive Chat Interface
• 🌐 Server Communication: Send and receive messages from your server
• 🎨 Built with TailwindCSS for easy styling
• 🖱 Floating toggle button to hide/show the chatbot

⚙️ Installation

1. Install via npm:
   Run the following command to install the package from npm:

   npm install cs-chatbot-client

2. Import the package:
   Import the package in your project:

   import { AssistantChatBox } from "cs-chatbot-client";

📦 Usage - Frontend [React]

To use the chatbot, call the AssistantChatBox function, passing in the required options such as headerColor, senderMessageColor, chatbotName, and the serverUrl to enable server communication.

Example Usage in a React App:

import React, { useEffect } from 'react';
import { AssistantChatBox } from 'cs-chatbot-client';

function App() {
  useEffect(() => {
     AssistantChatBox({
        headerColor: '#FF5733',        // Header color
        senderMessageColor: '#3498db', // Sender message color
        chatbotName: 'Rowdy Chat',     // Chatbot name
        serverUrl: 'http://localhost:8000/chatbot', // Your server URL for communication
     });
  }, []);

  return (
     <div className="App">
        <h1 className="text-2xl text-center mt-10">Welcome to My Vite App with Chatbot!</h1>
     </div>
  );
}

export default App;

🎨 Customization Options

• headerColor: Set a custom color for the chatbot's header (default: #4F46E5).
• senderMessageColor: Set a custom color for the user's messages (default: #10B981).
• chatbotName: Set a custom name for your chatbot (default: CS Chatbot).
• serverUrl: Set the URL for your server to handle user messages and respond.

🛠 Server-Side Integration

You can integrate your chatbot with either an Express.js server or a FastAPI backend to handle user messages and generate appropriate responses.

🐍 FastAPI Backend Example

Here's an example FastAPI backend that handles incoming chatbot messages and responds:

from fastapi import FastAPI
from pydantic import BaseModel
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
     CORSMiddleware,
     allow_origins=["*"],
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
)

class ChatRequest(BaseModel):
     message: str

@app.post("/chatbot")
async def get_chatbot_reply(request: ChatRequest):
     user_message = request.message.lower()
     
     # you can write your own chatbot/RAG logic here, I just added a simple if-else response for demo

     if "hello" in user_message:
          return {"reply": "Hi there! How can I help you today?"}
     elif "bye" in user_message:
          return {"reply": "Goodbye! Have a great day!"}
     else:
          return {"reply": "I didn't understand that!"}

Install dependencies:

pip install fastapi uvicorn

Run the FastAPI app:

uvicorn server:app --reload

This FastAPI backend will listen on http://localhost:8000/chatbot and respond to messages.

🌐 Express.js Backend Example

Here's a sample Express.js backend for handling chatbot communication:

const express = require('express');
const cors = require('cors');
const app = express();
const port = 8000;

app.use(cors());
app.use(express.json());

app.post('/chatbot', (req, res) => {
  const userMessage = req.body.message;

  // you can write your own chatbot/RAG logic here, I just added a simple if-else response for demo
  
  let botReply = 'I didn\'t understand that!';
  if (userMessage.toLowerCase().includes('hello')) {
     botReply = 'Hi there! How can I help you today?';
  } else if (userMessage.toLowerCase().includes('bye')) {
     botReply = 'Goodbye! Have a great day!';
  }

  res.json({ reply: botReply });
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

Install dependencies:

npm install express cors

Run the Express server:

node server.js

This Express backend will listen on http://localhost:8000/chatbot and respond to messages.

📄 License

This package is open-source and available under the MIT License.

🔑 Keywords

chatbot, chatbot-ui, chatbot-interface, react-chatbot, typescript-chatbot, tailwindcss-chatbot, npm-package, customizable-chatbot, ai-chatbot, user-chat-interface, chatbot-ui-library, chatbot-react, interactive-chatbot, web-chatbot, floating-chatbot, message-sender, message-receiver, server-chatbot-integration, chatbot-customization

📞 Contact

For any issues or feature requests, feel free to open an issue on the GitHub repository or contact me directly at [[email protected]].

Happy coding! ✨

Summary of Changes:

• FastAPI Backend Example: Added a FastAPI backend example that receives messages and sends a response.
• Express.js Backend Example: Included an Express.js backend example as before.
• Chatbot Package Usage: Detailed steps on how to use the chatbot UI in a React app with server integration.
• Installation and Development: Instructions for installing and setting up the development environment.

This README.md is now a complete guide with both backend examples, usage instructions, and other essential information for the package. Let me know if you need further modifications!