Back to Copilotkit

bind

showcase/shell-docs/src/content/reference/channels/functions/bind.mdx

1.64.21.0 KB
Original Source

bind(handler, args) returns a click handler that replaces ctx.action.value with args.

Signature

ts
function bind(handler: ClickHandler, args: unknown): ClickHandler;
tsx
import { Actions, Button, bind } from "@copilotkit/channels/ui";
import type { InteractionContext } from "@copilotkit/channels/ui";

async function assign({ thread, action }: InteractionContext) {
  if (typeof action.value !== "string") return;
  await assignments.assign(action.value);
  await thread.post(`Assigned ${action.value}.`);
}

export function IssueActions({ issueId }: { issueId: string }) {
  return (
    <Actions>
      <Button onClick={bind(assign, issueId)}>Assign to me</Button>
    </Actions>
  );
}

For a one-off button, the value prop is usually clearer:

tsx
<Button value={issueId} onClick={assign}>
  Assign to me
</Button>

Bound values and registered component props must be JSON-serializable if the callback must survive a restart. Register the named component and configure a durable StateStore.