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

# Response Footer

> Learn how to customize the C1 chat experience by adding a component to the footer of a response.

A response footer is a component that can be displayed at the bottom of a response after it has finished streaming.
This is useful for adding actions like regenerating a response, copying the content to the clipboard, or providing feedback (thumbs up/down).

The `@thesysai/genui-sdk` package provides a way to add a response footer via the `C1Chat` component. You can use the pre-built components that come with the SDK for common actions.

Here's how to add a response footer using the pre-built components:

<Steps>
  <Step title="Create a response footer component">
    The SDK provides a set of pre-built components that you can use to quickly create a response footer. These components are available under the `ResponseFooter` export.

    First, create a new component that will wrap your footer elements. This component must be of type `ResponseFooterComponent`, which will provide it with `threadId` and `messageId` props. Then, use `ResponseFooter.Container` as a wrapper and add the desired buttons inside it.

    <Tip>
      The `ResponseFooter` component is meant for convenience. If you need more control over the footer, you can create your own component. As long as your
      component adheres to the `ResponseFooterComponent` type, it can be passed to the `C1Chat` component.
    </Tip>

    Here's an example of how to use the pre-built `ShareButton`, `ThumbsUpButton`, and `ThumbsDownButton`:

    ```tsx FooterComponent.tsx theme={null}
    import {
      ResponseFooter,
      type ResponseFooterComponent,
    } from "@thesysai/genui-sdk";

    const FooterComponent: ResponseFooterComponent = ({ messageId, threadId }) => {
      return (
        <ResponseFooter.Container>
          <ResponseFooter.ShareButton
            generateShareLink={async (message) => {
              // The 'message' object is available here
              // call an api to generate a share link for the provided message
              const shareableLink = await generateShareLink(message);
              return shareableLink;
            }}
          />
          <ResponseFooter.ThumbsUpButton
            onClick={() => {
              // you can call an api to send feedback to your server here using messageId

              console.log(
                `Thumbs up for message: ${messageId} in thread: ${threadId}`
              );
            }}
          />
          <ResponseFooter.ThumbsDownButton
            onClick={() => {
              // you can call an api to send feedback to your server here using messageId

              console.log(
                `Thumbs down for message: ${messageId} in thread: ${threadId}`
              );
            }}
          />
        </ResponseFooter.Container>
      );
    };

    export default FooterComponent;
    ```

    The `ResponseFooterComponent` receives `messageId` and `threadId`, which you can use in your click handlers and backend API calls.
  </Step>

  <Step title="Pass the custom component to C1Chat">
    Next, pass your `FooterComponent` to the `C1Chat` component via the `customizeC1` prop.

    <CodeGroup>
      ```tsx App.tsx focus={8} theme={null}
      import { C1Chat } from '@thesysai/genui-sdk';
      import FooterComponent from './FooterComponent';

      export default function App() {
        return (
          <C1Chat
            apiUrl="/api/chat"
            customizeC1={{ responseFooterComponent: FooterComponent }}
          />
        );
      }
      ```
    </CodeGroup>
  </Step>

  <Step title="Customize the pre-built components (optional)">
    The pre-built `ResponseFooter` components accept props to customize their behavior.

    #### `ResponseFooter.Container`

    This is a simple container component that you can use to wrap your footer buttons. It provides basic styling and layout. It accepts `className` and `animate` props.

    <ResponseField name="animate" type="boolean" default={true}>
      Whether to animate the footer when it is shown.
    </ResponseField>

    <ResponseField name="className" type="string">
      Takes class names as a string to modify the default styling.
    </ResponseField>

    #### `ResponseFooter.ShareButton`

    <ResponseField name="generateShareLink" type="(message: Message) => Promise<string>">
      A function that is called when the "Generate Link" button is clicked in the
      share modal. It receives the full `message` object and should return a promise
      that resolves to a shareable URL. The button handles the UI for copying the
      link to the clipboard and shows a confirmation.
    </ResponseField>

    #### `ResponseFooter.ThumbsUpButton` & `ResponseFooter.ThumbsDownButton`

    Both buttons use Crayon's `IconButton` component with `tertiary` as the default variant. For details on all the props that they accept, refer to Crayon's
    [IconButton](https://crayonai.org/ui/?path=/docs/components-iconbutton--docs) documentation.
  </Step>

  <Step title="Test it out">
    You should now see the response footer with the share and feedback buttons displayed below the agent's messages.

    <Frame>
      <img src="https://mintcdn.com/thesys/C1mGp0p_ygBsZ7UI/images/response-footer-component.gif?s=9c927f819de6533bf7174b1e3e19b67b" alt="Response footer with pre-built components sample image" width="1920" height="1080" data-path="images/response-footer-component.gif" />
    </Frame>
  </Step>
</Steps>