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

apiUrl

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

ThreadManager

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

threadListManager

ThreadListManager

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

processMessage

(params: ProcessMessageParams) => Promise<Response>

Function to process messages and handle the conversation flow.

Show ProcessMessageParams

threadId

string

The unique identifier for the current thread.

messages

Message[]

Array of messages in the conversation.

responseId

string

Unique identifier for the response being processed.

abortController

AbortController

Controller for aborting the message processing operation.

type

'copilot' | 'standalone'

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

formFactor

'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

isOpen

boolean

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

onOpenChange

(isOpen: boolean) => void

Callback when the bottom tray open state changes.

defaultOpen

boolean

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

theme

ThemeProps

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

Show ThemeProps

mode

ThemeMode

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

theme

Theme

The main theme configuration object.

darkTheme

Theme

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

agentName

string

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

logoUrl

string

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

scrollVariant

'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.

customizeC1

CustomizeC1Props

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

Show CustomizeC1Props

customComponents

Record<string, React.ComponentType<any>>

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

thinkComponent

ThinkComponent

Custom React component to render the thinking state.

responseFooterComponent

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

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

artifactViewMode

ArtifactViewMode

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

artifactActionComponent

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

Custom React component rendered as an action button on artifacts.

exportAsPdf

ExportFunction | undefined

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

enableArtifactEdit

boolean

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

disableThemeProvider

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.

onAction

(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

type

string

The type identifier for the action.

params

Record<string, any>

Parameters associated with the action.

humanFriendlyMessage

string

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

llmFriendlyMessage

string

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

welcomeMessage

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" },
}}

conversationStarters

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 /> },
  ],
}}

API

React

SDK

​Props

Props