kai-chatbot-sdk

Theming the React widget

ChatBotWidget accepts a theme prop that merges with the built-in defaults so you can restyle the widget without touching CSS.

``tsx
import { ChatBotWidget, defaultChatTheme } from "kai-chat-bot/react";

const customTheme = {
...defaultChatTheme,
primaryColor: "#4b2c5a",
secondaryColor: "#f3e8ff",
primaryButtonColor: "#8f5cf3",
chatButton: {
background: "#8f5cf3",
color: "#fff",
text: "💠",
},
header: {
logo: "/brand/logo.svg",
title: { text: "Lilac AI", color: "#4b2c5a" },
},
suggestions: {
heading: "Need inspiration?",
items: ["Plan a purple wedding", "Share budget tips"],
},
};

export function App() {
return (
accessToken="..."
orgToken="..."
userId="user-123"
theme={customTheme}
/>
);
}
`

You can provide only the keys you want to override; the widget deep-merges them with the default theme. See src/react/types/theme.ts for the full list of customizable fields.

$3

- Core palette (required): primaryColor, secondaryColor, primaryButtonColor, primaryTextColor (plus optional secondaryButtonColor, secondaryTextColor).
- Header: logo (image URL), title.text, title.color, wrapperBackground.
- Top section: topSection.maintext.text/color, topSection.subtext.text/color.
- Suggestions carousel: suggestions.heading, suggestions.headingColor, suggestions.items, suggestions.color, suggestions.cardBackground, suggestions.cardShadow.
- User/bot bubbles: userBubble.wrapperBackground, userBubble.spanBackground, userBubble.wrapperBorder; botBubble.background, botBubble.color, botBubble.border, botBubble.accentColor.
- Action prompts: actionButtonPrompts.border, actionButtonPrompts.background, actionButtonPrompts.textcolor.
- Date picker: datePicker.navButtons, headerLabel, dayLabels, dates.background.{selected/notSelected}, dates.color.*, button.{border,activeBG,color}.
- Option actions: optionActions.backgroundActive, borderActive, color, and nested confirmButton (border, background, color).
- Chat button: chatButton.background, chatButton.color, chatButton.text.
- Main wrapper: mainWrapper.background plus mainWrapper.aiThinking (color, background, border`).