0.1.0 • Published 1 year ago

gpt-chatbot v0.1.0

Weekly downloads
-
License
-
Repository
-
Last release
1 year ago

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

PropsExample
headerHeader
companyDetails{name:/Your CompanyName/,website: /Your Company Website/}
chatThemetheme
apiKeypass your openAi key
inputStylestyle for input
buttonStylestyle for button

Header

PropsExplanation
titleyour chatbot name
containerStylestyle for header container
textStyletext 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",
      },
    },
  };