> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thesys.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Chat Component

> React component for building conversational AI interfaces with C1's chat functionality.

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:

```tsx theme={null}
import { C1Chat } from "@thesysai/genui-sdk";

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

## Props

<ResponseField name="apiUrl" type="string" post={["optional"]}>
  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`.
</ResponseField>

<ResponseField name="threadManager" type="ThreadManager" post={["optional"]}>
  Manager for handling thread-related operations and state. The easiest way to
  create this is through the `useThreadManager` hook.
</ResponseField>

<ResponseField name="threadListManager" type="ThreadListManager" post={["optional"]}>
  Manager for handling thread list operations and state. The easiest way to
  create this is through the `useThreadListManager` hook.
</ResponseField>

<ResponseField name="processMessage" type="(params: ProcessMessageParams) => Promise<Response>" post={["optional"]}>
  Function to process messages and handle the conversation flow.

  <Expandable title="ProcessMessageParams">
    <ResponseField name="threadId" type="string">
      The unique identifier for the current thread.
    </ResponseField>

    <ResponseField name="messages" type="Message[]">
      Array of messages in the conversation.
    </ResponseField>

    <ResponseField name="responseId" type="string">
      Unique identifier for the response being processed.
    </ResponseField>

    <ResponseField name="abortController" type="AbortController">
      Controller for aborting the message processing operation.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="type" type="'copilot' | 'standalone'" post={["optional", "deprecated"]}>
  **Deprecated**: Use `formFactor` instead. Defines the display type of the chat
  component.
</ResponseField>

<ResponseField name="formFactor" type="'full-page' | 'side-panel' | 'bottom-tray'" post={["optional"]}>
  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:

  <Expandable title="Bottom Tray Props">
    <ResponseField name="isOpen" type="boolean" post={["optional"]}>
      Control the open state of the bottom tray (controlled mode).
    </ResponseField>

    <ResponseField name="onOpenChange" type="(isOpen: boolean) => void" post={["optional"]}>
      Callback when the bottom tray open state changes.
    </ResponseField>

    <ResponseField name="defaultOpen" type="boolean" post={["optional"]}>
      Default open state for the bottom tray (uncontrolled mode).
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="theme" type="ThemeProps" post={["optional", "deprecated"]}>
  **Deprecated**: Wrap `C1Chat` with `ThemeProvider` instead of passing theme here.

  Theme configuration object for customizing the appearance of the chat component.

  <Expandable title="ThemeProps">
    <ResponseField name="mode" type="ThemeMode" post={["optional"]}>
      The theme mode for the chat component. This can be either 'light' or 'dark'.
    </ResponseField>

    <ResponseField name="theme" type="Theme" post={["optional"]}>
      The main theme configuration object.
    </ResponseField>

    <ResponseField name="darkTheme" type="Theme" post={["optional"]}>
      The dark theme configuration object used when in dark mode. If not provided,
      the `theme` object will be used.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="agentName" type="string" post={["optional"]}>
  The name of the AI agent that will be displayed in the chat interface.
</ResponseField>

<ResponseField name="logoUrl" type="string" post={["optional"]}>
  URL for the agent's logo image. This is displayed alongside the agent's
  messages in the chat.
</ResponseField>

<ResponseField name="scrollVariant" type="'once' | 'user-message-anchor' | 'always'" post={["optional"]}>
  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.
</ResponseField>

<ResponseField name="customizeC1" type="CustomizeC1Props" post={["optional"]}>
  Provide custom components and configuration to override the default behavior and components in the C1 UI.

  <Expandable title="CustomizeC1Props">
    <ResponseField name="customComponents" type="Record<string, React.ComponentType<any>>" post={["optional"]}>
      A library of custom components to use in the C1 UI, keyed by component name.
    </ResponseField>

    <ResponseField name="thinkComponent" type="ThinkComponent" post={["optional"]}>
      Custom React component to render the thinking state.
    </ResponseField>

    <ResponseField name="responseFooterComponent" type="React.ComponentType<{ threadId: string; messageId: string }>" post={["optional"]}>
      Custom React component rendered at the footer of each assistant response.
    </ResponseField>

    <ResponseField name="artifactViewMode" type="ArtifactViewMode" post={["optional"]}>
      Controls how artifacts are displayed. Possible values are `'AUTO_OPEN'`, `'OPEN_ON_MOUNT'`, and `'OVERVIEW'`.
    </ResponseField>

    <ResponseField name="artifactActionComponent" type="React.ComponentType<{ artifactId: string; artifactType: string }>" post={["optional"]}>
      Custom React component rendered as an action button on artifacts.
    </ResponseField>

    <ResponseField name="exportAsPdf" type="ExportFunction | undefined" post={["optional"]}>
      Function to enable exporting artifacts as PDF. When provided, an export button is shown on artifacts.
    </ResponseField>

    <ResponseField name="enableArtifactEdit" type="boolean" post={["optional"]}>
      Whether artifact editing is enabled. When `true`, users can edit artifacts inline.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="disableThemeProvider" type="boolean" post={["optional"]}>
  When set to `true`, disables the built-in `ThemeProvider` wrapping. Useful when you are
  providing your own `ThemeProvider` higher up in the component tree.
</ResponseField>

<ResponseField name="generateShareLink" type="(messages: Message[]) => Promise<string>" post={["optional"]}>
  Function that generates a shareable link for the current conversation thread.
  When provided, a share button is shown in the chat interface.
</ResponseField>

<ResponseField name="generateArtifactShareLink" type="(artifactId: string, artifactType: string, message: Message, threadId: string) => Promise<string>" post={["optional"]}>
  Function that generates a shareable link for a specific artifact.
  When provided, a share button is shown on artifacts.
</ResponseField>

<ResponseField name="onAction" type="(event: C1Action) => void" post={["optional"]}>
  Callback invoked when a user triggers an action in the chat interface (e.g. clicking a button in a generated UI component).

  <Expandable title="C1Action">
    <ResponseField name="type" type="string" post={["optional"]}>
      The type identifier for the action.
    </ResponseField>

    <ResponseField name="params" type="Record<string, any>" post={["optional"]}>
      Parameters associated with the action.
    </ResponseField>

    <ResponseField name="humanFriendlyMessage" type="string">
      A human-readable description of the action (legacy field).
    </ResponseField>

    <ResponseField name="llmFriendlyMessage" type="string">
      A machine-readable description of the action sent to the LLM (legacy field).
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="welcomeMessage" type="WelcomeMessageConfig" post={["optional"]}>
  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.

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

<ResponseField name="conversationStarters" type="ConversationStartersConfig" post={["optional"]}>
  Conversation starters shown when the thread is empty. Clickable prompts that
  help users begin a conversation with predefined options.

  ```tsx theme={null}
  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 /> },
    ],
  }}
  ```
</ResponseField>