import { Frame } from "@/components";
The useCopilotAction hook accepts a render method. Whatever is returned from this method will be rendered in the copilot chat window.
In the example below, we take one of the actions we added in the Todo List Copilot Tutorial and add a generative UI element to it:
useCopilotAction({
name: "deleteTask",
description: "Deletes a task from the todo list",
parameters: [
{
name: "id",
type: "number",
description: "The id of the task",
required: true,
},
],
handler: ({ id }) => {
deleteTask(id);
},
render: ({ status, args }) => (
<div className="flex justify-center items-center text-sm">
{status !== "complete" && <p>Deleting task with ID {args.id}...</p>}
<div className="flex gap-2">
<span>✅</span>
<span className="font-semibold">Task with ID {args.id} deleted.</span>
</div>
</div>
),
});
Rendering a Waiting Message
Sometimes, you might want to display a simple text message to let the user know that the action is in progress. To do this, simply return a string from the render method. For example:
```tsx
useCopilotAction({
...,
render: "Processing..."
});
```
