I have a simple use
useCopilotAction({
name: "setBackgroundColor",
available: "frontend",
description: "Sets the background color of the main page area.",
parameters: [
{
name: "backgroundColor",
type: "string",
description: "The background color to set (e.g., 'lightblue', '#FF0000'). Pick visually appealing colors.",
required: true,
},
],
handler: async ({ backgroundColor }) => {
console.log(`Frontend Action: Setting background to ${backgroundColor}`);
setBackgroundColor(backgroundColor);
},
render: ({ status, args }) => {
if (status === "executing") {
return <div className="text-md italic text-gray-600 p-2">Applying color {args.backgroundColor}...</div>;
}
if (status === "complete") {
return <div className="text-md bg-green-100 text-green-800 p-2 rounded-lg my-2">Background set to {args.backgroundColor}!</div>;
}
return <></>;
}
});
On agent backend, I emit these events to trigger the action hook in frontend.
events_to_queue.append({"type": RuntimeEventTypes.ACTION_EXECUTION_START, "actionExecutionId": frontend_action_execution_id, "actionName": action_name, "parentMessageId": None})
events_to_queue.append({"type": RuntimeEventTypes.ACTION_EXECUTION_ARGS, "actionExecutionId": frontend_action_execution_id, "args": json.dumps(action_args)})
events_to_queue.append({"type": RuntimeEventTypes.ACTION_EXECUTION_END, "actionExecutionId": frontend_action_execution_id})
events_to_queue.append({"type": RuntimeEventTypes.ACTION_EXECUTION_RESULT, "actionExecutionId": frontend_action_execution_id, "actionName": action_name, "result": json.dumps({'BackendResult': 'Execution done'})})
On frontend the hook do execute the render method but does not execute the handler method, why so ?
When render and handler executes ?