AI Copilot

AI assistant embedded within an existing workflow.

html

<details class="ai-copilot ai-copilot--right" style="--accent:#A8E6C1;" open>
  <summary class="ai-copilot__summary">Copilot &mdash; Editing invoice #4471</summary>
  <div class="ai-copilot__body">
    <p class="ai-copilot__suggestion">Line 3&#39;s tax rate looks off for this region. Apply 8.5% instead of 7%?</p>
    <div class="ai-copilot__actions">
      <button type="button" class="ai-copilot__btn ai-copilot__btn--apply">Apply suggestion</button>
      <button type="button" class="ai-copilot__btn ai-copilot__btn--dismiss">Dismiss</button>
    </div>
  </div>
</details>
<style>
.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; }
.ai-copilot--right { border-right: 4px solid var(--accent); border-radius: 10px 0 0 10px; }
.ai-copilot--left { border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; }
.ai-copilot--bottom { border-bottom: 4px solid var(--accent); border-radius: 10px 10px 0 0; }
.ai-copilot__summary { padding: 12px 14px; font-weight: 600; font-size: 13px; cursor: pointer; list-style: none; }
.ai-copilot__summary::-webkit-details-marker { display: none; }
.ai-copilot__summary::before { content: "\25B8"; display: inline-block; margin-right: 6px; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
.ai-copilot__summary::before { transition: transform .15s ease; }
}
.ai-copilot[open] .ai-copilot__summary::before { transform: rotate(90deg); }
.ai-copilot__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ai-copilot__body { padding: 0 14px 14px; }
.ai-copilot__suggestion { margin: 0 0 10px; font-size: 13px; color: #241430cc; }
.ai-copilot__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-copilot__btn { font: 600 12px system-ui, sans-serif; padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.ai-copilot__btn--apply { border: 1.5px solid var(--accent); background: var(--accent); color: #241430; }
.ai-copilot__btn--dismiss { border: 1.5px solid #24143033; background: transparent; color: #241430; }
.ai-copilot__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style>

tailwind

<details class="ai-copilot-tw ai-copilot-tw--right max-w-xs bg-[#FAF7F2] text-[#241430] font-sans border-[1.5px] border-[#24143022] box-border" style="--accent:#A8E6C1;" open>
  <summary class="px-3.5 py-3 font-semibold text-[13px] cursor-pointer list-none">Copilot &mdash; Editing invoice #4471</summary>
  <div class="px-3.5 pb-3.5">
    <p class="m-0 mb-2.5 text-[13px] text-[#241430]/80">Line 3&#39;s tax rate looks off for this region. Apply 8.5% instead of 7%?</p>
    <div class="flex gap-2 flex-wrap">
      <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>
      <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>
    </div>
  </div>
</details>
<style>
.ai-copilot-tw--right { border-right: 4px solid var(--accent); border-radius: 10px 0 0 10px; }
.ai-copilot-tw--left { border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; }
.ai-copilot-tw--bottom { border-bottom: 4px solid var(--accent); border-radius: 10px 10px 0 0; }
.ai-copilot-tw summary::-webkit-details-marker { display: none; }
.ai-copilot-tw summary::before { content: "\25B8"; display: inline-block; margin-right: 6px; color: var(--accent); }
.ai-copilot-tw[open] summary::before { transform: rotate(90deg); }
</style>

react

export function AiCopilot({
  context = "Editing invoice #4471",
  suggestion = "Line 3's tax rate looks off for this region. Apply 8.5% instead of 7%?",
  accent = "#A8E6C1",
  collapsed = false,
  position = "right",
}) {
  const dock = {
    right: { borderRight: `4px solid ${accent}`, borderRadius: "10px 0 0 10px" },
    left: { borderLeft: `4px solid ${accent}`, borderRadius: "0 10px 10px 0" },
    bottom: { borderBottom: `4px solid ${accent}`, borderRadius: "10px 10px 0 0" },
  }[position] ?? {};
  return (
    <details open={!collapsed} style={{ maxWidth: 320, background: "#FAF7F2", color: "#241430",
      border: "1.5px solid #24143022", boxSizing: "border-box", fontFamily: "system-ui, sans-serif", ...dock }}>
      <summary style={{ padding: "12px 14px", fontWeight: 600, fontSize: 13, cursor: "pointer", listStyle: "none" }}>
        Copilot &mdash; {context}
      </summary>
      <div style={{ padding: "0 14px 14px" }}>
        <p style={{ margin: "0 0 10px", fontSize: 13, color: "#241430cc" }}>{suggestion}</p>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          <button type="button" style={{ font: "600 12px system-ui, sans-serif", padding: "6px 12px", borderRadius: 7,
            cursor: "pointer", border: `1.5px solid ${accent}`, background: accent, color: "#241430" }}>Apply suggestion</button>
          <button type="button" style={{ font: "600 12px system-ui, sans-serif", padding: "6px 12px", borderRadius: 7,
            cursor: "pointer", border: "1.5px solid #24143033", background: "transparent", color: "#241430" }}>Dismiss</button>
        </div>
      </div>
    </details>
  );
}