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

# Actions

> Handling user interactions

Actions represent any user interaction, like a button click or form submission. They are the foundation of interactivity in C1.

C1 supports two categories of actions:

* **Built-in Actions**: Common, predefined behaviors for tasks like submitting data or opening links.
* **Custom Actions**: Application-specific logic that you can define and trigger from the C1 UI.

### The `onAction` Handler

To handle actions, you pass a callback function to the `onAction` property of the `<C1Component>`. This function is called every time a user performs an action that requires a response from application.

```tsx theme={null}
<C1Component
  c1Response={c1Response}
  onAction={(event) => {
    // This function will run for any action.
    console.log("Action triggered:", event);
    handleAction(event);
  }}
/>
```

The `event` object passed to your handler contains all the information about the interaction:

* **`type`** (string): The type of action that was triggered (e.g., `'continue_conversation'`).
* **`params`** (object): A payload containing data specific to the action (e.g., `{ url: '...' }` or `{ llmFriendlyMessage: '...' }`).

### Handling Built-in Actions

Built-in actions cover the most common use cases for an interactive UI.

#### Handling in `<C1Chat>`

For conversational applications, the `<C1Chat>` component automatically handles built-in actions like form submissions (`continue_conversation`) and opening URLs (`open_url`). For more details, see the [Conversational UI](/guides/conversational) section.

#### Handling in `<C1Component>`

When using `<C1Component>` directly, you can use a `switch` statement on the `event.type` to handle different actions.

```tsx theme={null}
<C1Component
  c1Response={c1Response}
  isStreaming={isLoading}
  onAction={(event) => {
    console.log("Action event:", JSON.stringify(event, null, 2));

    switch (event.type) {
      case "open_url":
        // Handle client-side actions like opening a link.
        window.open(event.params.url, "_blank", "noopener,noreferrer");
        break;

      case "continue_conversation":
      default:
        // Handle the generative loop.
        const { llmFriendlyMessage, humanFriendlyMessage } = event.params;
        // Optionally display the user-friendly message in the UI.
        pushUserMessageToChat(humanFriendlyMessage); 
        // Send the detailed message to the backend.
        callApi(llmFriendlyMessage);
        break;
    }
  }}
/>
```

In the `continue_conversation` case, the `params` object contains two important messages:

* **`llmFriendlyMessage`**: A detailed, context-rich prompt designed to be sent to your backend for the LLM. If a form was submitted, this string will contain the form's values.
* **`humanFriendlyMessage`**: A concise, human-readable label for the action. In a chat UI, this is what you would display as the user's message.

### Custom Actions

Custom actions allow you to trigger your application's specific logic directly from the C1-generated UI, creating a seamless bridge between the generative interface and your existing application code.

Examples of what you can build with custom actions include:

* Implementing a "Download Report" button.
* Opening a product-specific checkout modal.
* Triggering a copilot action that performs a task within your application.

For more details, see the [Custom Actions](/guides/custom-actions) section.

### Actions in Custom Components

To add handling for actions in custom components, you can use the `useOnAction` hook. See [Custom Components](/guides/custom-components) for more details.