AI Assistant

UI for interacting with an AI system.

Ada

Online

Here is a summary of your request.

Happy to help! Here's what I found.

Certainly. Please find the requested summary below.

html

<div class="ai-assistant" style="--accent:#D9C8F0;">
  <div class="ai-assistant__header">
    <span class="ai-assistant__avatar ai-assistant__avatar--circle" aria-hidden="true">Ada</span>
    <div class="ai-assistant__who">
      <p class="ai-assistant__name">Ada</p>
      <p class="ai-assistant__presence">
        <span class="ai-assistant__dot ai-assistant__dot--true" aria-hidden="true"></span>
        <span>Online</span>
        
      </p>
    </div>
  </div>
  <div class="ai-assistant__reply ai-assistant__reply--friendly">
    <p class="reply reply--neutral">Here is a summary of your request.</p>
    <p class="reply reply--friendly">Happy to help! Here's what I found.</p>
    <p class="reply reply--formal">Certainly. Please find the requested summary below.</p>
  </div>
  <div class="ai-assistant__input">
    <input type="text" class="ai-assistant__field" placeholder="Ask Ada something" />
    <button type="button" class="ai-assistant__send">Send</button>
  </div>
</div>
<style>
.ai-assistant { font: 15px/1.5 system-ui, sans-serif; max-width: 380px; padding: 18px; background: #FAF7F2; color: #241430; border: 1.5px solid #24143022; border-radius: 14px; box-sizing: border-box; }
.ai-assistant__header { display: flex; align-items: center; gap: 10px; }
.ai-assistant__avatar { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--accent); color: #241430; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.ai-assistant__avatar--circle { border-radius: 50%; }
.ai-assistant__avatar--rounded { border-radius: 10px; }
.ai-assistant__avatar--square { border-radius: 0; }
.ai-assistant__name { margin: 0; font-weight: 600; font-size: 14px; }
.ai-assistant__presence { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #24143099; }
.ai-assistant__dot { width: 8px; height: 8px; border-radius: 50%; background: #24143044; }
.ai-assistant__dot--true { background: var(--accent); }
.ai-assistant__reply { margin: 14px 0; padding: 10px 12px; background: #24143008; border-radius: 10px; border-left: 3px solid var(--accent); }
.ai-assistant__reply .reply { margin: 0; font-size: 13px; }
.ai-assistant__reply--neutral .reply--friendly, .ai-assistant__reply--neutral .reply--formal { display: none; }
.ai-assistant__reply--friendly .reply--neutral, .ai-assistant__reply--friendly .reply--formal { display: none; }
.ai-assistant__reply--formal .reply--neutral, .ai-assistant__reply--formal .reply--friendly { display: none; }
.ai-assistant__input { display: flex; gap: 8px; }
.ai-assistant__field { flex: 1; min-width: 0; padding: 8px 10px; border: 1.5px solid #24143033; border-radius: 8px; font: 13px system-ui, sans-serif; background: #FAF7F2; color: #241430; box-sizing: border-box; }
.ai-assistant__field:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ai-assistant__send { padding: 8px 14px; border-radius: 8px; border: none; background: var(--accent); color: #241430; font: 600 13px system-ui, sans-serif; cursor: pointer; }
.ai-assistant__send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style>

tailwind

<div class="max-w-sm p-4.5 bg-[#FAF7F2] text-[#241430] font-sans border-[1.5px] border-[#24143022] rounded-2xl box-border" style="--accent:#D9C8F0;">
  <div class="flex items-center gap-2.5">
    <span class="ai-assistant-tw__avatar ai-assistant-tw__avatar--circle flex items-center justify-center w-9 h-9 font-bold text-[13px] flex-shrink-0" style="background:var(--accent)" aria-hidden="true">Ada</span>
    <div>
      <p class="m-0 font-semibold text-sm">Ada</p>
      <p class="m-0 mt-0.5 flex items-center gap-1.5 text-xs text-[#24143099]">
        <span class="ai-assistant-tw__dot ai-assistant-tw__dot--true w-2 h-2 rounded-full" aria-hidden="true"></span>
        <span>Online</span>
        
      </p>
    </div>
  </div>
  <div class="ai-assistant-tw__reply ai-assistant-tw__reply--friendly my-3.5 px-3 py-2.5 bg-[#24143008] rounded-[10px]" style="border-left:3px solid var(--accent)">
    <p class="reply reply--neutral m-0 text-[13px]">Here is a summary of your request.</p>
    <p class="reply reply--friendly m-0 text-[13px]">Happy to help! Here's what I found.</p>
    <p class="reply reply--formal m-0 text-[13px]">Certainly. Please find the requested summary below.</p>
  </div>
  <div class="flex gap-2">
    <input type="text" class="flex-1 min-w-0 px-2.5 py-2 border-[1.5px] border-[#24143033] rounded-lg text-[13px] bg-[#FAF7F2] text-[#241430] box-border" placeholder="Ask Ada something" />
    <button type="button" class="px-3.5 py-2 rounded-lg border-none font-semibold text-[13px] cursor-pointer text-[#241430]" style="background:var(--accent)">Send</button>
  </div>
</div>
<style>
.ai-assistant-tw__avatar--circle { border-radius: 50%; }
.ai-assistant-tw__avatar--rounded { border-radius: 10px; }
.ai-assistant-tw__avatar--square { border-radius: 0; }
.ai-assistant-tw__dot { background: #24143044; }
.ai-assistant-tw__dot--true { background: var(--accent); }
.ai-assistant-tw__reply--neutral .reply--friendly, .ai-assistant-tw__reply--neutral .reply--formal { display: none; }
.ai-assistant-tw__reply--friendly .reply--neutral, .ai-assistant-tw__reply--friendly .reply--formal { display: none; }
.ai-assistant-tw__reply--formal .reply--neutral, .ai-assistant-tw__reply--formal .reply--friendly { display: none; }
</style>

react

export function AiAssistant({
  name = "Ada",
  tone = "friendly",
  accent = "#D9C8F0",
  avatarShape = "circle",
  online = true,
}) {
  const avatarRadius = { circle: "50%", rounded: 10, square: 0 }[avatarShape] ?? "50%";
  const replies = {
    neutral: "Here is a summary of your request.",
    friendly: "Happy to help! Here's what I found.",
    formal: "Certainly. Please find the requested summary below.",
  };
  return (
    <div style={{ maxWidth: 380, padding: 18, background: "#FAF7F2", color: "#241430", border: "1.5px solid #24143022",
      borderRadius: 14, boxSizing: "border-box", fontFamily: "system-ui, sans-serif" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span aria-hidden="true" style={{ display: "flex", alignItems: "center", justifyContent: "center", width: 36,
          height: 36, background: accent, color: "#241430", fontWeight: 700, fontSize: 13, flexShrink: 0, borderRadius: avatarRadius }}>{name}</span>
        <div>
          <p style={{ margin: 0, fontWeight: 600, fontSize: 14 }}>{name}</p>
          <p style={{ margin: "2px 0 0", display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: "#24143099" }}>
            <span aria-hidden="true" style={{ width: 8, height: 8, borderRadius: "50%", background: online ? accent : "#24143044" }} />
            {online ? "Online" : "Offline"}
          </p>
        </div>
      </div>
      <div style={{ margin: "14px 0", padding: "10px 12px", background: "#24143008", borderRadius: 10, borderLeft: `3px solid ${accent}` }}>
        <p style={{ margin: 0, fontSize: 13 }}>{replies[tone] ?? replies.neutral}</p>
      </div>
      <div style={{ display: "flex", gap: 8 }}>
        <input type="text" placeholder={`Ask ${name} something`} style={{ flex: 1, minWidth: 0, padding: "8px 10px",
          border: "1.5px solid #24143033", borderRadius: 8, fontSize: 13, background: "#FAF7F2", color: "#241430", boxSizing: "border-box" }} />
        <button type="button" style={{ padding: "8px 14px", borderRadius: 8, border: "none", background: accent,
          color: "#241430", fontWeight: 600, fontSize: 13, cursor: "pointer" }}>Send</button>
      </div>
    </div>
  );
}