cs-tools-ai Package

Install

npm install cs-tools-ai

API key

Feel free to contact https://www.codestringers.com/

How to Use

import "./App.css";
import Home from "./Home";
import React, { useState } from "react";
import { BotV2 as Bot, themeConfig, QuestionBot } from "cs-tools-ai";

const configTheme = themeConfig.light;

// If you want to override color
/**
configTheme.color = {
  ...configTheme.color,
  primary: "red",
  background: "blue",
};

configTheme.borderRadius = {
  ...configTheme.borderRadius,
  small: "10px",
};
 */

function App() {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <div className="w-[100%] h-[100vh]">
      <Home />

      <div className="fixed bottom-0 right-0">
        <Bot
          isOpen={isOpen}
          themeConfig={configTheme}
          onClose={() => setIsOpen(false)}
          apiKey={"YOUR_API_KEY"}
          title="Bot"
          mRightHeader={100}
        />

        <QuestionBot
          isOpen={isOpen}
          themeConfig={configTheme}
          onClose={() => setIsOpen(false)}
          apiKey={"YOUR_API_KEY"}
          title="Bot"
          mRightHeader={100}
        />
      </div>
    </div>
  );
}

export default App;

Theme Configuration

const darktheme = {
  primary: "#00bcd4",
  secondary: "#f3f3f3",
  border: "#e0e0e0",
  text: "#fff",
  background: "#212121",
  indicator: "#FFCC00",
};

const lightTheme = {
  primary: "#338DFF",
  primaryLight: "#DBEAFE",
  secondary: "#eee",
  border: "#878787",
  borderLight: "#E5E7EB",
  text: "#000",
  textBold: "#005ACC",
  background: "#F9FAFB",
  indicator: "#D1D5DB",
  disabledBtn: "#D1D5DB",
};

const defaultTheme = {
  fontSize: {
    xs: "12px",
    sm: "14px",
    md: "16px",
    lg: "18px",
    xl: "20px",
    xxl: "24px",
  },
  borderRadius: {
    small: "5px",
    medium: "8px",
    large: "16px",
    extra: "55px",
    circle: "50%",
  },
};

const theme = {
  dark: {
    color: darktheme,
    ...defaultTheme,
  },
  light: {
    color: lightTheme,
    ...defaultTheme,
  },
};