gpt-chatbot

Do you need a chatbot for your website that answers all the questions related to your company. Here is a chatbot that is powered by chatgpt that acts as your assistant.

Installation

npm install gpt-chatbot

Usage

This library comes with customisable components where you can customise it according to your needs.

import { Bot, Header, ChatContainer } from "gpt-chatbot";
function App() {
  const theme = {
    palette: {
      primary: {
        main: "#ca0714",
        light: "#fec9c9",
      },
      secondary: {
        main: "#ddd",
      },
    },
  };
  return (
    <Bot
      header={<Header title="Canva" />}
      chatContainer={<ChatContainer />}
      companyDetails={{
        name: "canva",
        website: "https://www.canva.com/",
      }}
      chatTheme={theme}
      apiKey={import.meta.env.VITE_OPENAI_API_KEY}
    />
  );
}

Props List of Bot Component

Props	Example
header	Header
companyDetails	{name:/Your CompanyName/,website: /Your Company Website/}
chatTheme	theme
apiKey	pass your openAi key
inputStyle	style for input
buttonStyle	style for button

Header

Props	Explanation
title	your chatbot name
containerStyle	style for header container
textStyle	text style

Example

<Header
  title="canva"
  textStyle={{fontWeight:'bold',fontFamily:'Calibri'}}
  containerStyle={{backgroundColor:'blue'}}
>

theme

The library is providing customised theming options for you to change theme of your bot that contemplates with your website primary.main - main color primary.light - bot message color secondary.main - user message color

const theme = {
    palette: {
      primary: {
        main: "#ca0714",
        light: "#fec9c9",
      },
      secondary: {
        main: "#ddd",
      },
    },
  };