Skip to main content
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:
1

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.
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.
Here’s an example of how to use the pre-built ShareButton, ThumbsUpButton, and ThumbsDownButton:
FooterComponent.tsx
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.
2

Pass the custom component to C1Chat

Next, pass your FooterComponent to the C1Chat component via the customizeC1 prop.
import { C1Chat } from '@thesysai/genui-sdk';
import FooterComponent from './FooterComponent';

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

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.
​
animate
boolean
default:true
Whether to animate the footer when it is shown.
​
className
string
Takes class names as a string to modify the default styling.

​
ResponseFooter.ShareButton

​
generateShareLink
(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.

​
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 documentation.
4

Test it out

You should now see the response footer with the share and feedback buttons displayed below the agent’s messages.
Response footer with pre-built components sample image