Conversation

Sequence of user/AI messages.

html

<div class="conversation conversation--rounded" style="--accent:#F5C2E0;">
  <div class="conversation__turn conversation__turn--user">
    <span class="conversation__avatar conversation__avatar--user" aria-hidden="true">U</span>
    <p class="conversation__bubble conversation__bubble--user">What is a context window?</p>
  </div>
  <div class="conversation__turn conversation__turn--ai">
    <span class="conversation__avatar conversation__avatar--ai" aria-hidden="true">AI</span>
    <p class="conversation__bubble conversation__bubble--ai">It is the amount of text the model can consider at once.</p>
  </div>
</div>
<style>
.conversation { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 380px; padding: 16px; border-radius: 14px; box-sizing: border-box; }
.conversation__turn { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 10px; }
.conversation__turn:last-child { margin-bottom: 0; }
.conversation__turn--user { flex-direction: row-reverse; }
.conversation__avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 10px/1 system-ui, sans-serif; color: #FAF7F2; }
.conversation__avatar--user { background: #241430; }
.conversation__avatar--ai { background: var(--accent); color: #241430; }
.conversation__bubble { margin: 0; padding: 10px 14px; max-width: 78%; box-sizing: border-box; }
.conversation__bubble--user { background: var(--accent); color: #241430; }
.conversation__bubble--ai { background: #24143010; }
.conversation--rounded .conversation__bubble { border-radius: 14px; }
.conversation--sharp .conversation__bubble { border-radius: 4px; }
.conversation--pill .conversation__bubble { border-radius: 999px; }
</style>

tailwind

<div class="conversation-tw conversation-tw--rounded font-sans text-sm leading-relaxed text-[#241430] bg-[#FAF7F2] max-w-[380px] p-4 rounded-2xl box-border" style="--accent:#F5C2E0;">
  <div class="flex items-end gap-2 mb-2.5 flex-row-reverse">
    <span class="flex-none w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-[#FAF7F2]" style="background:#241430" aria-hidden="true">U</span>
    <p class="conversation-tw__bubble m-0 px-3.5 py-2.5 max-w-[78%] box-border" style="background:var(--accent);color:#241430;">What is a context window?</p>
  </div>
  <div class="flex items-end gap-2">
    <span class="flex-none w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold" style="background:var(--accent);color:#241430;" aria-hidden="true">AI</span>
    <p class="conversation-tw__bubble m-0 px-3.5 py-2.5 max-w-[78%] bg-[#24143010] box-border">It is the amount of text the model can consider at once.</p>
  </div>
</div>
<style>
.conversation-tw--rounded .conversation-tw__bubble { border-radius: 14px; }
.conversation-tw--sharp .conversation-tw__bubble { border-radius: 4px; }
.conversation-tw--pill .conversation-tw__bubble { border-radius: 999px; }
</style>

react

export function Conversation({
  userText = "What is a context window?",
  aiText = "It is the amount of text the model can consider at once.",
  accent = "#F5C2E0",
  bubbleShape = "rounded",
  showAvatars = true,
}) {
  const radius = { rounded: 14, sharp: 4, pill: 999 }[bubbleShape] ?? 14;
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, lineHeight: 1.5, color: "#241430",
      background: "#FAF7F2", maxWidth: 380, padding: 16, borderRadius: 14, boxSizing: "border-box" }}>
      <div style={{ display: "flex", alignItems: "flex-end", gap: 8, marginBottom: 10, flexDirection: "row-reverse" }}>
        {showAvatars && <span aria-hidden="true" style={{ flex: "none", width: 24, height: 24, borderRadius: "50%",
          display: "flex", alignItems: "center", justifyContent: "center", fontSize: 10, fontWeight: 700, color: "#FAF7F2", background: "#241430" }}>U</span>}
        <p style={{ margin: 0, padding: "10px 14px", maxWidth: "78%", borderRadius: radius, background: accent, color: "#241430", boxSizing: "border-box" }}>{userText}</p>
      </div>
      <div style={{ display: "flex", alignItems: "flex-end", gap: 8 }}>
        {showAvatars && <span aria-hidden="true" style={{ flex: "none", width: 24, height: 24, borderRadius: "50%",
          display: "flex", alignItems: "center", justifyContent: "center", fontSize: 10, fontWeight: 700, color: "#241430", background: accent }}>AI</span>}
        <p style={{ margin: 0, padding: "10px 14px", maxWidth: "78%", borderRadius: radius, background: "#24143010", boxSizing: "border-box" }}>{aiText}</p>
      </div>
    </div>
  );
}