Gen-AI Chat BOT

Welcome to the future of communication! Gen-AI Chat BOT is a powerful, AI-driven chatbot designed to streamline communication, enhance productivity, and bring a touch of the future to your everyday tasks.

🚀 Installation

Getting started with Gen-AI Chat BOT is as easy as a Sunday morning. Just run the following command in your terminal:

npm install gen-ai-bot

And voila! You're ready to start chatting. To install the Gen-AI Chat BOT package, run the following command in your terminal:

🎁 Props

To make the most out of Gen-AI Chat BOT, you'll need to pass in some props:

• url: Use out Gen-AI tools to get your url. (required) - use any openai chat conpletion url
• header: Pass in a header to customize the look and feel of your chatbot.
• Style: Pass in a style to customize the look and feel of your chatbot.

🔧 Add the following code to the root of your project or the componet you are using:

    // create a file called BotConfig.ts
    // add types/index.d.ts and there add the following code
    // declare module 'gen-ai-bot'
    // index.d.ts
    declare module 'gen-ai-bot'
    // App.tsx
    import {Bot} from 'gen-ai-bot'
    import "gen-ai-bot/dist/style.css";
    import {config} from '../src/BotConfig'

📦 Exported Components

Gen-AI Chat BOT comes with a bunch of pre-made components that you can use right out of the box:

    export { default as Bot } from "./Bot";
    export { default as Chat } from "./Chat";
    export { default as ChatBubble } from "./ChatBubble";

Feel free to use them in your project! If you're looking for more customization, you can also change the botConfig.ts file to suit your needs:

// botConfig.ts file default values
    export interface BotConfig {
    url: string;
    header: string;
    style: {
        width: string;
        height: string;
    };
    auth_key?:string;
    selectedDocuments?: { uuid: string; file: string }[];
    chatButtonClassNames?:{
        chatButton : string; 
        chatIcon : string;   
    }; 
    selectedDocumentsClassNames?:{
        selectedDocumentsContainer : string; 
        selectedDocumentsList : string;   
        selectedDocumentsIcon : string;  
    };
    chatFooterClassNames?:{
        form: string;
        input: string;
        button: string;
        sendIcon: string;
    };
    inputPlaceholder?: string;
    cardContentClassNames?: {
        cardContent: string;
        noChatDataDiv: string;
        noChatDataSpan: string;
      };
    cardHeaderClassNames?: {
        card: string;
        cardHeader: string;
        cardDescription: string;
        cardTitle: string;
        chatIcon: string;
      };
   
}

export const config: BotConfig = {
    url: "https://www.gen-ai.com/",
    header: "Gen-AI Bot",
    style: { width: "25rem", height: "25rem" },
    auth_key:'botkey%23',
    selectedDocuments : [
        {
            uuid: "1",
            file: "https://www.someurl.com/"
        }
    ],
    chatButtonClassNames:{
        chatButton : "w-12 h-12  fixed bottom-10 right-6 bg-darkblue text-white rounded-full flex items-center justify-center shadow-md hover:bg-darkblue transform transition-transform hover:scale-105 cursor-pointer" ,
        chatIcon : "w-6 h-6 hover:transform transition-transform hover:scale-110 "  
    },
    selectedDocumentsClassNames:{
        selectedDocumentsContainer : "flex justify-start border-t-2 mt-2" ,
        selectedDocumentsList : "flex justify-center items-center  mt-2",
        selectedDocumentsIcon : "w-6 h-6 " 
    },
    cardHeaderClassNames: {
        card: "shadow-lg bg-gray-10 fixed bottom-24 right-6 z-50 rounded-2xl",
        cardHeader: "rounded-t-2xl bg-gradient-to-r bg-darkblue text-white transition-all duration-300",
        cardDescription: "flex justify-between",
        cardTitle: "text-xl font-thin",
        chatIcon: "w-8 h-8 fill-slate ml-2",
    },
    cardContentClassNames: {
        cardContent: "chat-content",
        noChatDataDiv: "flex justify-center items-center h-full min-w-md",
        noChatDataSpan: "text-gray-500 font-semibold py-20",
      },
    inputPlaceholder: "How can I help you?",
    chatFooterClassNames: {
        form: "w-full flex justify-center items-center gap-2",
        input: "relative bottom-0 rounded-2xl tracking-widest py-6",
        button: "text-darkblue flex items-center justify-center ml-2",
        sendIcon: "w-8 h-12 transform transition-transform hover:scale-150 cursor-pointer",
      },
};

📝 Example Usage

If you're wondering how to integrate Gen-AI Chat BOT into your project, here's a quick example:

import { Bot } from 'gen-ai-bot';

const App = () => {
  return (
    <Bot 
        url="https://gen-ai-bot.example.com/" // Pass in your url *(required)*
        header="Gen-AI Chat BOT" // Customize the header *(Optional)*
        style={{ width: "25rem", height: "25rem" }} // Adjust the size of your chatbot *(Optional)*
        config={config} // Pass in your config *(Required)*
    />
  );
}

And that's it! You're now a certified Gen-AI Chat BOT user. Happy chatting! 🎉