Genr React Chat Widget 🚀

A customizable chat widget for integrating AI-powered chatbots into your React applications.

📦 Installation

To install the package, run:

npm install genr-react-chat-widget-alpha
🛠️ Import and Usage
Add the chat widget to your React application:

import React from "react";
import ChatApp from "genr-react-chat-widget-alpha";

const App = () => {
  return (
    <ChatApp
      apiUrl={"https://genrEndPoint/api/query"}
      instanceName={"fsdfff"}
      welcomeMessage={
        "Hello, I’m your Virtual Assistant. How can I help you today?"
      }
      footerMessage={`This is a sample chatbot generated with the help of Genr AI application`}
      responseIcon={
        "https://tse3.mm.bing.net/th?id=OIP.NJMu_dmcLZcvdrIegdFkmgHaHa&pid=Api&P=0&h=180"
      }
      showMic={false}
      showFileAttachmentIcon={false}
      showCaseIconImgUrl={
        "https://tse3.mm.bing.net/th?id=OIP.NJMu_dmcLZcvdrIegdFkmgHaHa&pid=Api&P=0&h=180"
      }
      showCaseIconImgStyle={{
        borderRadius: "60px",
        width: "60px",
        height: "60px",
      }}
      showCaseIconImgWidth={50}
      showCaseIconImgHeight={50}
      inputMsgPlaceholder={"Ask me anything"}
      userName={"DhanShekhar"}
      headerStyle={{ color: "black", backgroundColor: "#11b67a" }}
      userIcon={
        "https://tse3.mm.bing.net/th?id=OIP.e2y09TFSgn5qK8FmayD4pgHaHa&pid=Api&P=0&h=180"
      }
      chatterIcon={
        "https://tse3.mm.bing.net/th?id=OIP.NJMu_dmcLZcvdrIegdFkmgHaHa&pid=Api&P=0&h=180"
      }
      attachIcon={
        "https://tse2.mm.bing.net/th?id=OIP.0ULX-waARB3T1oO40CnO3gHaFm&pid=Api&P=0&h=180"
      }
      sendIcon={
        "https://tse2.mm.bing.net/th?id=OIP._HCqv2W2JZarfgfLjOCIcAHaHa&pid=Api&P=0&h=180"
      }
      uploadFileUrl={
        "https://va-nodejs-app-855220130399.us-central1.run.app/upload"
      }
    />
  );
};

export default App;
⚙️ Props Configuration


Prop	                Type	            Description
apiUrl	                string	        API endpoint for handling chat queries
instanceName	        string	        Unique identifier for the chat instance
welcomeMessage	        string	        Initial message shown in the chat
footerMessage	        string	        Message displayed at the bottom of the chat
responseIcon	        string	        URL of the chatbot's response icon
showMic	                boolean	        Enable/Disable voice input
showFileAttachmentIcon	boolean	        Enable/Disable file attachments
showCaseIconImgUrl	    string	        URL for the floating chat icon
showCaseIconImgStyle	object	        CSS styles for chat icon customization
showCaseIconImgWidth	number	        Width of the chat icon
showCaseIconImgHeight	number	        Height of the chat icon
inputMsgPlaceholder	    string	        Placeholder text in the input field
userName	            string	        Name of the user
headerStyle	            object	        CSS styles for chat header
userIcon	            string	        URL of the user's profile picture
chatterIcon	            string	        URL of the chatbot's icon
attachIcon	            string	        URL of the attachment icon
sendIcon	            string      	URL of the send button icon
uploadFileUrl       	string	        API endpoint for file uploads



🌟 Features
✅ Customizable UI
✅ Supports Text, Images, and File Attachments
✅ API Integration for Chatbot Responses
✅ Responsive & Lightweight
✅ Easy to Use in Any React App

🛠️ How It Works
Install the package using npm install genr-react-chat-widget-alpha.
Import the ChatApp component and include it in your React application.
Customize the chatbot using the available props.
The chatbot communicates with the API and displays responses in real-time.
📌 License
This project is licensed under the MIT License.