Edit AI Copilot

Name

Also known as (comma separated)

Brief definition AI assistant embedded within an existing workflow.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "context", "type": "text", "label": "Context", "default": "Editing invoice #4471" }, { "id": "suggestion", "type": "text", "label": "Suggestion", "default": "Line 3's tax rate looks off for this region. Apply 8.5% instead of 7%?" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "collapsed", "type": "toggle", "label": "Collapsed", "default": false }, { "id": "position", "type": "select", "label": "Dock position", "default": "right", "options": [ "right", "left", "bottom" ] } ]

Templates (JSON object keyed by format) { "html": "<details class=\"ai-copilot ai-copilot--{{position}}\" style=\"--accent:{{accent}};\" {{#unless collapsed}}open{{/unless}}>\n <summary class=\"ai-copilot__summary\">Copilot &mdash; {{context}}</summary>\n <div class=\"ai-copilot__body\">\n <p class=\"ai-copilot__suggestion\">{{suggestion}}</p>\n <div class=\"ai-copilot__actions\">\n <button type=\"button\" class=\"ai-copilot__btn ai-copilot__btn--apply\">Apply suggestion</button>\n <button type=\"button\" class=\"ai-copilot__btn ai-copilot__btn--dismiss\">Dismiss</button>\n </div>\n </div>\n</details>\n<style>\n.ai-copilot { font: 14px/1.5 system-ui, sans-serif; max-width: 320px; background: #FAF7F2; color: #241430; border: 1.5px solid #24143022; box-sizing: border-box; }\n.ai-copilot--right { border-right: 4px solid var(--accent); border-radius: 10px 0 0 10px; }\n.ai-copilot--left { border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; }\n.ai-copilot--bottom { border-bottom: 4px solid var(--accent); border-radius: 10px 10px 0 0; }\n.ai-copilot__summary { padding: 12px 14px; font-weight: 600; font-size: 13px; cursor: pointer; list-style: none; }\n.ai-copilot__summary::-webkit-details-marker { display: none; }\n.ai-copilot__summary::before { content: \"\\25B8\"; display: inline-block; margin-right: 6px; color: var(--accent); }\n@media (prefers-reduced-motion: no-preference) {\n.ai-copilot__summary::before { transition: transform .15s ease; }\n}\n.ai-copilot[open] .ai-copilot__summary::before { transform: rotate(90deg); }\n.ai-copilot__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }\n.ai-copilot__body { padding: 0 14px 14px; }\n.ai-copilot__suggestion { margin: 0 0 10px; font-size: 13px; color: #241430cc; }\n.ai-copilot__actions { display: flex; gap: 8px; flex-wrap: wrap; }\n.ai-copilot__btn { font: 600 12px system-ui, sans-serif; padding: 6px 12px; border-radius: 7px; cursor: pointer; }\n.ai-copilot__btn--apply { border: 1.5px solid var(--accent); background: var(--accent); color: #241430; }\n.ai-copilot__btn--dismiss { border: 1.5px solid #24143033; background: transparent; color: #241430; }\n.ai-copilot__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n</style>", "tailwind": "<details class=\"ai-copilot-tw ai-copilot-tw--{{position}} max-w-xs bg-[#FAF7F2] text-[#241430] font-sans border-[1.5px] border-[#24143022] box-border\" style=\"--accent:{{accent}};\" {{#unless collapsed}}open{{/unless}}>\n <summary class=\"px-3.5 py-3 font-semibold text-[13px] cursor-pointer list-none\">Copilot &mdash; {{context}}</summary>\n <div class=\"px-3.5 pb-3.5\">\n <p class=\"m-0 mb-2.5 text-[13px] text-[#241430]/80\">{{suggestion}}</p>\n <div class=\"flex gap-2 flex-wrap\">\n <button type=\"button\" class=\"font-semibold text-xs px-3 py-1.5 rounded-md cursor-pointer border-[1.5px]\" style=\"border-color:var(--accent);background:var(--accent);color:#241430\">Apply suggestion</button>\n <button type=\"button\" class=\"font-semibold text-xs px-3 py-1.5 rounded-md cursor-pointer border-[1.5px] bg-transparent border-[#24143033] text-[#241430]\">Dismiss</button>\n </div>\n </div>\n</details>\n<style>\n.ai-copilot-tw--right { border-right: 4px solid var(--accent); border-radius: 10px 0 0 10px; }\n.ai-copilot-tw--left { border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; }\n.ai-copilot-tw--bottom { border-bottom: 4px solid var(--accent); border-radius: 10px 10px 0 0; }\n.ai-copilot-tw summary::-webkit-details-marker { display: none; }\n.ai-copilot-tw summary::before { content: \"\\25B8\"; display: inline-block; margin-right: 6px; color: var(--accent); }\n.ai-copilot-tw[open] summary::before { transform: rotate(90deg); }\n</style>", "react": "export function AiCopilot({\n context = \"{{context}}\",\n suggestion = \"{{suggestion}}\",\n accent = \"{{accent}}\",\n collapsed = {{collapsed}},\n position = \"{{position}}\",\n}) {\n const dock = {\n right: { borderRight: `4px solid ${accent}`, borderRadius: \"10px 0 0 10px\" },\n left: { borderLeft: `4px solid ${accent}`, borderRadius: \"0 10px 10px 0\" },\n bottom: { borderBottom: `4px solid ${accent}`, borderRadius: \"10px 10px 0 0\" },\n }[position] ?? {};\n return (\n <details open={!collapsed} style={{ maxWidth: 320, background: \"#FAF7F2\", color: \"#241430\",\n border: \"1.5px solid #24143022\", boxSizing: \"border-box\", fontFamily: \"system-ui, sans-serif\", ...dock }}>\n <summary style={{ padding: \"12px 14px\", fontWeight: 600, fontSize: 13, cursor: \"pointer\", listStyle: \"none\" }}>\n Copilot &mdash; {context}\n </summary>\n <div style={{ padding: \"0 14px 14px\" }}>\n <p style={{ margin: \"0 0 10px\", fontSize: 13, color: \"#241430cc\" }}>{suggestion}</p>\n <div style={{ display: \"flex\", gap: 8, flexWrap: \"wrap\" }}>\n <button type=\"button\" style={{ font: \"600 12px system-ui, sans-serif\", padding: \"6px 12px\", borderRadius: 7,\n cursor: \"pointer\", border: `1.5px solid ${accent}`, background: accent, color: \"#241430\" }}>Apply suggestion</button>\n <button type=\"button\" style={{ font: \"600 12px system-ui, sans-serif\", padding: \"6px 12px\", borderRadius: 7,\n cursor: \"pointer\", border: \"1.5px solid #24143033\", background: \"transparent\", color: \"#241430\" }}>Dismiss</button>\n </div>\n </div>\n </details>\n );\n}" }