mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Alem Tuzlak
36e0e24f94
Calculator pill rendered the layout but no button responded. Root cause:
Gemini's default emit for the calculator widget used `<form>` /
`<button type="submit">` for clicks — the iframe runs with
`sandbox="allow-scripts"` only, so the browser silently blocks form
submission before any handler fires. The buttons drew, nothing happened.
Expand the `generateSandboxedUi` guidance in `_INSTRUCTION` with the same
sandbox-iframe contract `_OPEN_GEN_UI_ADVANCED_INSTRUCTION` already
spells out:
- Forms and submit-type buttons are blocked silently.
- Use `<button type="button" data-key="…">` plus a single delegated
`document.addEventListener('click', e => …)` that reads
`e.target.dataset.key` / `data-value`. Keyboard input via a `keydown`
listener that checks `e.key === 'Enter'`.
- All handler code in a `<script>` tag inside `html`.
Verified: the calculator widget Gemini now produces wires every key /
metric-shortcut button with delegated click handlers; clicks update the
calculator display end-to-end. Matches the LangGraph-Python output.
(The instruction nudge for generateSandboxedUi itself shipped in #4837.
This change is purely about teaching Gemini the sandbox restrictions so
the generated HTML stays interactive.)