Edit Streaming Response

Name

Also known as (comma separated)

Brief definition AI response displayed incrementally.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "text", "type": "text", "label": "Response text", "default": "Here's a summary of the changes in this release, focused on what shipped and what to watch for." }, { "id": "streaming", "type": "toggle", "label": "Streaming", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#D9C8F0", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "speed", "type": "select", "label": "Cursor speed", "default": "normal", "options": [ "slow", "normal", "fast" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"sr sr--{{speed}}\" role=\"status\" aria-live=\"polite\" style=\"--accent:{{accent}};\">\n <p class=\"sr__text\">{{text}}{{#if streaming}}<span class=\"sr__cursor\" aria-hidden=\"true\"></span>{{/if}}</p>\n {{#if streaming}}<span class=\"sr__srtext\">Response is streaming</span>{{/if}}\n</div>\n<style>\n.sr { font: 15px/1.6 system-ui, sans-serif; max-width: 480px; color: #241430; background: #FAF7F2; }\n.sr__text { margin: 0; }\n.sr__cursor { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: text-bottom;\n background: var(--accent); }\n@keyframes sr-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }\n@media (prefers-reduced-motion: no-preference) {\n .sr__cursor { animation: sr-blink 1s step-end infinite; }\n .sr--slow .sr__cursor { animation-duration: 1.4s; }\n .sr--normal .sr__cursor { animation-duration: 1s; }\n .sr--fast .sr__cursor { animation-duration: .6s; }\n}\n.sr__srtext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }\n</style>", "tailwind": "<div role=\"status\" aria-live=\"polite\" class=\"sr-tw sr-tw--{{speed}} max-w-md font-sans text-[15px] leading-relaxed text-[#241430] bg-[#FAF7F2]\" style=\"--accent:{{accent}};\">\n <p class=\"m-0\">{{text}}{{#if streaming}}<span aria-hidden=\"true\" class=\"sr-tw__cursor inline-block w-0.5 h-[1em] ml-0.5 align-text-bottom\" style=\"background:{{accent}}\"></span>{{/if}}</p>\n {{#if streaming}}<span class=\"sr-only\">Response is streaming</span>{{/if}}\n</div>\n<style>\n@keyframes sr-tw-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }\n@media (prefers-reduced-motion: no-preference) {\n .sr-tw__cursor { animation: sr-tw-blink 1s step-end infinite; }\n .sr-tw--slow .sr-tw__cursor { animation-duration: 1.4s; }\n .sr-tw--normal .sr-tw__cursor { animation-duration: 1s; }\n .sr-tw--fast .sr-tw__cursor { animation-duration: .6s; }\n}\n</style>", "react": "export function StreamingResponse({\n text = \"{{text}}\",\n streaming = {{streaming}},\n accent = \"{{accent}}\",\n speed = \"{{speed}}\",\n}) {\n const duration = { slow: \"1.4s\", normal: \"1s\", fast: \"0.6s\" }[speed] ?? \"1s\";\n return (\n <div role=\"status\" aria-live=\"polite\" style={{ maxWidth: 480, fontFamily: \"system-ui, sans-serif\",\n fontSize: 15, lineHeight: 1.6, color: \"#241430\", background: \"#FAF7F2\" }}>\n <p style={{ margin: 0 }}>\n {text}\n {streaming && (\n <span aria-hidden=\"true\" className=\"sr-cursor\" style={{ display: \"inline-block\", width: 2, height: \"1em\", marginLeft: 2,\n verticalAlign: \"text-bottom\", background: accent }} />\n )}\n </p>\n {streaming && (\n <span style={{ position: \"absolute\", width: 1, height: 1, overflow: \"hidden\", clip: \"rect(0 0 0 0)\" }}>\n Response is streaming\n </span>\n )}\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .sr-cursor { animation: sr-react-blink ${duration} step-end infinite; }\n @keyframes sr-react-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }\n }\n `}</style>\n </div>\n );\n}" }