Chat Component - Thesys Documentation

The C1Chat component is a React component that allows you to build conversational AI interfaces with C1. It renders a full chat interface with a sidebar, composer, user and agent messages. You can customize the C1Chat component to your needs through the following props:

import { C1Chat } from "@thesysai/genui-sdk";

<C1Chat
  apiUrl="http://localhost:3000/api/chat"
  ...
/>

Props

string

The API endpoint URL that handles the API calls made with each user message. If provided, the C1Chat component automatically handles the API calls to the backend. If not provided, you will need to manually implement and pass the threadManager and threadListManager.

ThreadManager

Manager for handling thread-related operations and state. The easiest way to create this is through the useThreadManager hook.

ThreadListManager

Manager for handling thread list operations and state. The easiest way to create this is through the useThreadListManager hook.

(params: ProcessMessageParams) => Promise<Response>

Function to process messages and handle the conversation flow.

Show ProcessMessageParams

string

The unique identifier for the current thread.

Message[]

Array of messages in the conversation.

string

Unique identifier for the response being processed.

AbortController

Controller for aborting the message processing operation.

'copilot' | 'standalone'

Deprecated: Use formFactor instead. Defines the display type of the chat component.

'full-page' | 'side-panel' | 'bottom-tray'

Defines the form factor and layout of the chat component. Use 'full-page' for a fullscreen chat interface, 'side-panel' for a sidebar-style layout, or 'bottom-tray' for a collapsible tray at the bottom of the page.When formFactor is set to 'bottom-tray', the following additional props are available:

Show Bottom Tray Props

boolean

Control the open state of the bottom tray (controlled mode).

(isOpen: boolean) => void

Callback when the bottom tray open state changes.

boolean

Default open state for the bottom tray (uncontrolled mode).

ThemeProps

Deprecated: Wrap C1Chat with ThemeProvider instead of passing theme here.Theme configuration object for customizing the appearance of the chat component.

Show ThemeProps

ThemeMode

The theme mode for the chat component. This can be either ‘light’ or ‘dark’.

Theme

The main theme configuration object.

Theme

The dark theme configuration object used when in dark mode. If not provided, the theme object will be used.

string

The name of the AI agent that will be displayed in the chat interface.

string

URL for the agent’s logo image. This is displayed alongside the agent’s messages in the chat.

'once' | 'user-message-anchor' | 'always'

Controls the scrolling behavior of the chat interface. 'once' scrolls once per interaction, 'user-message-anchor' anchors to user messages, and 'always' maintains continuous scrolling.

CustomizeC1Props

Provide custom components and configuration to override the default behavior and components in the C1 UI.

Show CustomizeC1Props

Record<string, React.ComponentType<any>>

A library of custom components to use in the C1 UI, keyed by component name.

ThinkComponent

Custom React component to render the thinking state.

React.ComponentType<{ threadId: string; messageId: string }>

Custom React component rendered at the footer of each assistant response.

ArtifactViewMode

Controls how artifacts are displayed. Possible values are 'AUTO_OPEN', 'OPEN_ON_MOUNT', and 'OVERVIEW'.

React.ComponentType<{ artifactId: string; artifactType: string }>

Custom React component rendered as an action button on artifacts.

ExportFunction | undefined

Function to enable exporting artifacts as PDF. When provided, an export button is shown on artifacts.

boolean

Whether artifact editing is enabled. When true, users can edit artifacts inline.

boolean

When set to true, disables the built-in ThemeProvider wrapping. Useful when you are providing your own ThemeProvider higher up in the component tree.

Function that generates a shareable link for the current conversation thread. When provided, a share button is shown in the chat interface.

Function that generates a shareable link for a specific artifact. When provided, a share button is shown on artifacts.

(event: C1Action) => void

Callback invoked when a user triggers an action in the chat interface (e.g. clicking a button in a generated UI component).

Show C1Action

string

The type identifier for the action.

Record<string, any>

Parameters associated with the action.

string

A human-readable description of the action (legacy field).

string

A machine-readable description of the action sent to the LLM (legacy field).

WelcomeMessageConfig

Welcome message shown when the thread is empty.Can be either a props object with title, description, and optional image, or a custom React component that will be wrapped with WelcomeScreen for styling.

// Props-based configuration
welcomeMessage={{
  title: "Hi, I'm C1 Assistant",
  description: "I can help you with your questions.",
  image: { url: "/logo.png" },
}}

ConversationStartersConfig

Conversation starters shown when the thread is empty. Clickable prompts that help users begin a conversation with predefined options.

conversationStarters={{
  variant: "short", // "short" for pill buttons, "long" for list items
  options: [
    { displayText: "Help me get started", prompt: "Help me get started" },
    { displayText: "What can you do?", prompt: "What can you do?", icon: <Sparkles /> },
  ],
}}

​Props

Props