Edit AI Confidence

Name

Also known as (comma separated)

Brief definition Indication of confidence in an AI result.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Label", "default": "Confidence" }, { "id": "level", "type": "select", "label": "Level", "default": "medium", "options": [ "high", "medium", "low" ] }, { "id": "score", "type": "number", "label": "Score", "default": 72, "min": 0, "max": 100, "step": 1 }, { "id": "showScore", "type": "toggle", "label": "Show score", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"ai-confidence ai-confidence--{{level}}\">\n <span class=\"ai-confidence__icon\" aria-hidden=\"true\">\n <span class=\"glyph glyph--high\">&#9650;</span>\n <span class=\"glyph glyph--medium\">&#9679;</span>\n <span class=\"glyph glyph--low\">&#9660;</span>\n </span>\n <p class=\"ai-confidence__text\">\n <span class=\"ai-confidence__label\">{{label}}:</span>\n <span class=\"ai-confidence__level\">{{level}}</span>\n {{#if showScore}}<span class=\"ai-confidence__score\">{{score}}%</span>{{/if}}\n </p>\n</div>\n<style>\n.ai-confidence { display: inline-flex; align-items: center; gap: 8px; font: 14px/1.4 system-ui, sans-serif; padding: 8px 12px; border-radius: 10px; background: #24143008; color: #241430; }\n.ai-confidence__icon { display: inline-flex; font-size: 13px; }\n.ai-confidence__icon .glyph { display: none; }\n.ai-confidence--high .glyph--high, .ai-confidence--medium .glyph--medium, .ai-confidence--low .glyph--low { display: inline; }\n.ai-confidence--high { border-left: 3px solid #241430; }\n.ai-confidence--high .ai-confidence__icon { color: #2F8F5B; }\n.ai-confidence--medium .ai-confidence__icon { color: #B4790A; }\n.ai-confidence--low .ai-confidence__icon { color: #B4432F; }\n.ai-confidence--high { box-shadow: inset 0 0 0 1.5px #2F8F5B55; }\n.ai-confidence--medium { box-shadow: inset 0 0 0 1.5px #B4790A55; }\n.ai-confidence--low { box-shadow: inset 0 0 0 1.5px #B4432F55; }\n.ai-confidence__text { margin: 0; }\n.ai-confidence__label { font-weight: 600; margin-right: 4px; }\n.ai-confidence__level { text-transform: capitalize; font-weight: 700; }\n.ai-confidence__score { margin-left: 6px; color: #24143099; }\n</style>", "tailwind": "<div class=\"ai-confidence-tw ai-confidence-tw--{{level}} inline-flex items-center gap-2 font-sans text-sm px-3 py-2 rounded-[10px] bg-[#24143008] text-[#241430]\">\n <span class=\"ai-confidence-tw__icon inline-flex text-[13px]\" aria-hidden=\"true\">\n <span class=\"glyph glyph--high\">&#9650;</span>\n <span class=\"glyph glyph--medium\">&#9679;</span>\n <span class=\"glyph glyph--low\">&#9660;</span>\n </span>\n <p class=\"m-0\">\n <span class=\"font-semibold mr-1\">{{label}}:</span>\n <span class=\"capitalize font-bold\">{{level}}</span>\n {{#if showScore}}<span class=\"ml-1.5 text-[#24143099]\">{{score}}%</span>{{/if}}\n </p>\n</div>\n<style>\n.ai-confidence-tw__icon .glyph { display: none; }\n.ai-confidence-tw--high .glyph--high, .ai-confidence-tw--medium .glyph--medium, .ai-confidence-tw--low .glyph--low { display: inline; }\n.ai-confidence-tw--high .ai-confidence-tw__icon { color: #2F8F5B; }\n.ai-confidence-tw--medium .ai-confidence-tw__icon { color: #B4790A; }\n.ai-confidence-tw--low .ai-confidence-tw__icon { color: #B4432F; }\n.ai-confidence-tw--high { box-shadow: inset 0 0 0 1.5px #2F8F5B55; }\n.ai-confidence-tw--medium { box-shadow: inset 0 0 0 1.5px #B4790A55; }\n.ai-confidence-tw--low { box-shadow: inset 0 0 0 1.5px #B4432F55; }\n</style>", "react": "export function AiConfidence({\n label = \"{{label}}\",\n level = \"{{level}}\",\n score = {{score}},\n showScore = {{showScore}},\n}) {\n const palette = {\n high: { icon: \"\\u25B2\", color: \"#2F8F5B\" },\n medium: { icon: \"\\u25CF\", color: \"#B4790A\" },\n low: { icon: \"\\u25BC\", color: \"#B4432F\" },\n }[level] ?? { icon: \"\\u25CF\", color: \"#B4790A\" };\n return (\n <div style={{ display: \"inline-flex\", alignItems: \"center\", gap: 8, fontSize: 14, padding: \"8px 12px\",\n borderRadius: 10, background: \"#24143008\", color: \"#241430\", boxShadow: `inset 0 0 0 1.5px ${palette.color}55`,\n fontFamily: \"system-ui, sans-serif\" }}>\n <span aria-hidden=\"true\" style={{ fontSize: 13, color: palette.color }}>{palette.icon}</span>\n <p style={{ margin: 0 }}>\n <span style={{ fontWeight: 600, marginRight: 4 }}>{label}:</span>\n <span style={{ textTransform: \"capitalize\", fontWeight: 700 }}>{level}</span>\n {showScore && <span style={{ marginLeft: 6, color: \"#24143099\" }}>{score}%</span>}\n </p>\n </div>\n );\n}" }