Edit Generated Content

Name

Also known as (comma separated)

Brief definition AI-produced content.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "content", "type": "text", "label": "Content", "default": "This summary was drafted from the last twelve support tickets and highlights the three most common causes of login failure." }, { "id": "contentType", "type": "select", "label": "Content type", "default": "summary", "options": [ "text", "summary", "code" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#D9C8F0", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showProvenance", "type": "toggle", "label": "Show provenance label", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"generated-content\" style=\"--accent:{{accent}};\">\n {{#if showProvenance}}\n <div class=\"generated-content__provenance\">\n <span class=\"generated-content__dot\" aria-hidden=\"true\"></span>\n Generated by AI\n </div>\n {{/if}}\n <div class=\"generated-content__type\">{{contentType}}</div>\n <div class=\"generated-content__body generated-content__body--{{contentType}}\">{{content}}</div>\n</div>\n<style>\n.generated-content { max-width: 520px; padding: 16px 18px; border-radius: 12px; background: #FAF7F2; color: #241430; border: 1px solid #24143020; box-sizing: border-box; font: 15px/1.55 system-ui, sans-serif; }\n.generated-content__provenance { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-bottom: 10px; }\n.generated-content__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }\n.generated-content__type { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #24143080; margin-bottom: 6px; }\n.generated-content__body { margin: 0; }\n.generated-content__body--code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: #24143010; padding: 12px; border-radius: 8px; white-space: pre-wrap; }\n.generated-content__body--summary { font-style: italic; padding-left: 12px; border-left: 3px solid var(--accent); }\n.generated-content__body--text { padding: 0; }\n</style>", "tailwind": "<div class=\"generated-content-tw max-w-lg p-4 rounded-xl bg-[#FAF7F2] text-[#241430] border border-[#24143020] box-border font-sans text-[15px] leading-[1.55]\" style=\"--accent:{{accent}};\">\n {{#if showProvenance}}\n <div class=\"inline-flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wide mb-2.5\" style=\"color:var(--accent);\">\n <span class=\"w-1.5 h-1.5 rounded-full\" style=\"background:var(--accent);\" aria-hidden=\"true\"></span>\n Generated by AI\n </div>\n {{/if}}\n <div class=\"text-[11px] font-semibold uppercase tracking-wide text-[#24143080] mb-1.5\">{{contentType}}</div>\n <div class=\"generated-content-tw__body generated-content-tw__body--{{contentType}} m-0\">{{content}}</div>\n</div>\n<style>\n.generated-content-tw__body--code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: #24143010; padding: 12px; border-radius: 8px; white-space: pre-wrap; }\n.generated-content-tw__body--summary { font-style: italic; padding-left: 12px; border-left: 3px solid var(--accent); }\n</style>", "react": "export function GeneratedContent({\n content = \"{{content}}\",\n contentType = \"{{contentType}}\",\n accent = \"{{accent}}\",\n showProvenance = {{showProvenance}},\n}) {\n const bodyStyle = {\n code: { fontFamily: \"ui-monospace, SFMono-Regular, Menlo, monospace\", fontSize: 13, background: \"#24143010\", padding: 12, borderRadius: 8, whiteSpace: \"pre-wrap\", margin: 0 },\n summary: { fontStyle: \"italic\", paddingLeft: 12, borderLeft: `3px solid ${accent}`, margin: 0 },\n text: { margin: 0 },\n }[contentType] ?? { margin: 0 };\n return (\n <div style={{ maxWidth: 520, padding: \"16px 18px\", borderRadius: 12, background: \"#FAF7F2\", color: \"#241430\", border: \"1px solid #24143020\", boxSizing: \"border-box\", font: \"15px/1.55 system-ui, sans-serif\" }}>\n {showProvenance && (\n <div style={{ display: \"inline-flex\", alignItems: \"center\", gap: 6, fontSize: 11, fontWeight: 700, textTransform: \"uppercase\", letterSpacing: \".05em\", color: accent, marginBottom: 10 }}>\n <span aria-hidden=\"true\" style={{ width: 6, height: 6, borderRadius: \"50%\", background: accent, flex: \"none\" }} />\n Generated by AI\n </div>\n )}\n <div style={{ fontSize: 11, fontWeight: 600, textTransform: \"uppercase\", letterSpacing: \".05em\", color: \"#24143080\", marginBottom: 6 }}>{contentType}</div>\n <div style={bodyStyle}>{content}</div>\n </div>\n );\n}" }