Sidebar Chat (React)

Overview

A "sidebar chat" is a chat UI that is displayed in a sidebar on the either the left or right side of the page and is resizable.

You may want to add a sidebar chat directly into your application for a copilot-like experience. Allowing users to chat with the AI assistant directly in your application without needing to leave the context of your application can help them get answers to their questions faster.

Quick Start

Install the component library

npm install @inkeep/cxkit-react

yarn add @inkeep/cxkit-react

Define the component

import {
  InkeepSidebarChat,
  type InkeepSidebarChatProps,
} from "@inkeep/cxkit-react";
 
const config: InkeepSidebarChatProps = {
  baseSettings: {
    apiKey: "YOUR_API_KEY",
  },
  aiChatSettings: {
    exampleQuestions: ["How do I get started?"],
  },
};
 
const App = () => {
  return (
    <div className="app">
      <div className="page">
        <button data-inkeep-sidebar-chat-trigger="">Toggle Sidebar</button>
      </div>
      <div className="sidebar">
        <InkeepSidebarChat {...config} />
      </div>
    </div>
  );
};

This type represents the configuration for the Inkeep sidebar chat widget.

Prop	Type	Required	Description
`baseSettings`	`object`	Yes	Core configuration settings. See Base Settings for details.
`aiChatSettings`	`object`	No	AI chat configuration settings. See AI Chat Settings for details.
`position`	`'left' \| 'right'`	No	The position of the sidebar. Defaults to `'right'`.
`triggerSelector`	`string`	No	The selector for the trigger element that opens the sidebar. Defaults to `'[data-inkeep-sidebar-chat-trigger]'`.
`minWidth`	`number`	No	The minimum width of the sidebar chat. Defaults to `250`.
`maxWidth`	`number`	No	The maximum width of the sidebar chat. Defaults to `600`.
`defaultWidth`	`number`	No	The default width of the sidebar chat. Defaults to `420`.
`defaultOpen`	`boolean`	No	Whether the sidebar chat is open by default. Defaults to `false`.
`autoCloseThreshold`	`number`	No	The threshold for auto-closing the sidebar chat when resizing. When dragging below `minWidth \* autoCloseThreshold`, the sidebar will auto-close. Defaults to `0.7` (70% of minimum width).

Examples

const App = () => {
  const config: InkeepSidebarChatProps = {
    // ... other config
    position: "left",
  };
 
  return (
    <div className="app">
      <div className="page" />
      <div className="sidebar">
        <InkeepSidebarChat {...config} />
      </div>
    </div>
  );
};

With AI Chat Settings

const App = () => {
  const config: InkeepSidebarChatProps = {
    // ... other config
    aiChatSettings: {
      aiAssistantName: "Support Assistant",
      introMessage: "👋 Hi! How can I help you today?",
    },
  };
 
  return (
    <div className="app">
      <div className="page" />
      <div className="sidebar">
        <InkeepSidebarChat {...config} />
      </div>
    </div>
  );
};

Accessing Component Methods

The aiChatSettings config accepts a chatFunctionsRef prop that allows you to access the chat methods.

const App = () => {
  import type { AIChatFunctions } from "@inkeep/cxkit-types";
 
  const chatFunctionsRef = useRef<AIChatFunctions | null>(null);
 
  const config: InkeepSidebarChatProps = {
    // ... other config
    aiChatSettings: {
      chatFunctionsRef,
    },
  };
 
  const clearChat = () => {
    chatFunctionsRef.current?.clearChat();
  };
 
  const submitMessage = () => {
    chatFunctionsRef.current?.submitMessage("Hello!");
  };
 
  return (
    <div className="app">
      <div className="page">
        <button onClick={clearChat}>Clear Chat</button>
        <button onClick={submitMessage}>Send Message</button>
      </div>
      <div className="sidebar">
        <InkeepSidebarChat {...config} />
      </div>
    </div>
  );
};

Method	Description
`submitMessage(message?: string)`	Programmatically sends a message in chat. If message is omitted, sends the current input value.
`updateInputMessage(message: string)`	Updates the text in chat input field
`clearChat()`	Resets the chat to its initial state
`openForm(formSettings: FormSettings)`	Displays a form overlay in chat interface
`focusInput()`	Sets focus to the chat input field

Refer to the Form Settings reference docs for more details on the available properties for the openForm method.

Sidebar Chat (React)

Overview

Scenarios

Quick Start

Install the component library

Define the component

Sidebar Chat Props

Examples

Change the sidebar position

With AI Chat Settings

Accessing Component Methods

FAQ

On this page