{
  "protocol": "agentskit.chat.component",
  "version": 1,
  "type": "render",
  "componentKey": "approval-request",
  "instanceId": "approval-request-fixture",
  "props": {
    "title": "Approve send?",
    "description": "Send the email.",
    "approveLabel": "Approve",
    "denyLabel": "Deny"
  },
  "fallback": {
    "kind": "approval-request",
    "summary": "Approval required."
  }
}

import { ApprovalRequestComponent, defineComponentManifest, defineChat } from '@agentskit/chat'
import { AgentChat } from '@agentskit/chat/react'

const definition = defineChat({
  id: 'app',
  components: defineComponentManifest([ApprovalRequestComponent]),
  chat: { adapter },
})

export function App() {
  return (
    <AgentChat
      definition={definition}
      onComponentInteract={(event) => {
        // Always type: 'interact' — branch on event.event
        if (event.componentKey !== 'approval-request') return
        if (event.event === 'approve') {
          // host side-effect or confirmation.approve(token, sessionId)
        }
        if (event.event === 'deny') {
          // confirmation.reject(...) or cancel the proposed action
        }
      }}
    />
  )
}