​
Component

The BotStacksChatProvider component must wrap all chat related components. It is used to setup the store and API.

​
Theming

The UI Kit allows you to define both a light and a dark theme. You can pass both to the themes prop and utilize the darkMode prop to toggle which theme is used. If you do not pass any themes to the theme prop, the default themes will be used.

​
Default Themes

The default themes are defined below:

{
  "light": {
    "100": {
      "background": "#ffffff",
      "foreground": "#202020"
    },
    "200": {
      "background": "#ffffff",
      "foreground": "#727377"
    },
    "300": {
      "background": "#e7e7e7",
      "foreground": "#727377"
    },
    "400": {
      "background": "#f7f7f7",
      "foreground": "#202020",
      "muted": "#9fa0a5"
    },
    "primary": {
      "background": "#4e8bd2",
      "foreground": "#ffffff"
    },
    "secondary": {
      "background": "#727377",
      "foreground": "#ffffff",
      "muted": "#e8e8e8"
    },
    "bubble": {
      "background": "#e7e7e7",
      "foreground": "#202020"
    },
    "botBubble": {
      "background": "#4e8bd2",
      "foreground": "#f3f3f3"
    }
    "border": "#ededed"
  },
  "dark": {
    "100": {
      "background": "#f3f3f3",
      "foreground": "#202020"
    },
    "200": {
      "background": "#9fa0a5",
      "foreground": "#727377"
    },
    "300": {
      "background": "#ffffff",
      "foreground": "#727377"
    },
    "400": {
      "background": "#282828",
      "foreground": "#f3f3f3",
      "muted": "#7a7a7a"
    },
    "primary": {
      "background": "#4e8bd2",
      "foreground": "#ffffff"
    },
    "secondary": {
      "background": "#9fa0a5",
      "foreground": "#2c2c2c",
      "muted": "#e8e8e8"
    },
    "bubble": {
      "background": "#2c2c2c",
      "foreground": "#f3f3f3"
    },
    "botBubble": {
      "background": "#4e8bd2",
      "foreground": "#f3f3f3"
    }
    "border": "#2b2b2b"
  },
  "borderRadius: "12px"
}

​
Dark mode

If you wish to use only dark theme, you can define it as such:

<BotStacksChatProvider
  apiKey={API_KEY}
  darkMode={true}
  themes={{
    dark: { ... }
  }}
>
  {children}
</BotStacksChatProvider>

​
useChat

Any component wrapped by the BotStacksChatProvider component has access to the store. To create a reference in your component, you can use the useChat function. For more details on the store and how to use it, check out the SDK documentation.

​
Import

import { useChat } from "@botstacks/chat-react";

​
Usage

const MyComponent = observer(() => {
  const chat = useChat();
  return <></>;
});

Was this page helpful?

CustomizationTypes