Conversation History

Previous conversation content.

html

<nav class="conv-history" aria-label="Conversation history">
  
  <details class="conv-history__group" open>
    <summary>Today</summary>
    <ul class="conv-history__list conv-history__list--comfortable">
      <li class="conv-history__item conv-history__item--active" style="--accent:#BFD9F2;"><button type="button" class="conv-history__link">Renaming photos in bulk</button></li>
    </ul>
  </details>
  <details class="conv-history__group" open>
    <summary>Earlier</summary>
    <ul class="conv-history__list conv-history__list--comfortable">
      <li class="conv-history__item"><button type="button" class="conv-history__link">Trip itinerary draft</button></li>
      <li class="conv-history__item"><button type="button" class="conv-history__link">Newsletter subject lines</button></li>
    </ul>
  </details>
  
  
</nav>
<style>
.conv-history { max-width: 300px; font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 12px; border-radius: 12px; border: 1px solid #24143018; box-sizing: border-box; }
.conv-history__group { margin-bottom: 4px; }
.conv-history__group summary { cursor: pointer; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 4px; list-style: none; color: #24143099; }
.conv-history__group summary::-webkit-details-marker { display: none; }
.conv-history__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.conv-history__list--compact .conv-history__link { padding: 4px 8px; font-size: 13px; }
.conv-history__list--comfortable .conv-history__link { padding: 9px 10px; font-size: 14px; }
.conv-history__link { display: block; width: 100%; text-align: left; background: transparent; border: none; border-radius: 8px; font: inherit; color: inherit; cursor: pointer; }
.conv-history__item--active .conv-history__link { background: color-mix(in srgb, var(--accent) 24%, #FAF7F2); border-left: 3px solid var(--accent); font-weight: 600; }
.conv-history__link:hover, .conv-history__link:focus-visible { background: #24143012; outline: none; }
.conv-history__item--active .conv-history__link:hover { background: color-mix(in srgb, var(--accent) 32%, #FAF7F2); }
</style>

tailwind

<nav aria-label="Conversation history" class="conv-history-tw max-w-xs font-sans text-sm text-[#241430] bg-[#FAF7F2] p-3 rounded-xl border border-[#24143018] box-border">
  
  <details class="mb-1" open>
    <summary class="cursor-pointer font-semibold text-xs uppercase tracking-wide py-1.5 px-1 text-[#24143099] [&::-webkit-details-marker]:hidden">Today</summary>
    <ul class="conv-history-tw__list conv-history-tw__list--comfortable list-none m-0 p-0 flex flex-col">
      <li style="--accent:#BFD9F2;" class="conv-history-tw__item--active"><button type="button" class="conv-history-tw__link block w-full text-left bg-transparent border-0 rounded-lg font-inherit cursor-pointer">Renaming photos in bulk</button></li>
    </ul>
  </details>
  <details open>
    <summary class="cursor-pointer font-semibold text-xs uppercase tracking-wide py-1.5 px-1 text-[#24143099] [&::-webkit-details-marker]:hidden">Earlier</summary>
    <ul class="conv-history-tw__list conv-history-tw__list--comfortable list-none m-0 p-0 flex flex-col">
      <li><button type="button" class="conv-history-tw__link block w-full text-left bg-transparent border-0 rounded-lg font-inherit cursor-pointer">Trip itinerary draft</button></li>
      <li><button type="button" class="conv-history-tw__link block w-full text-left bg-transparent border-0 rounded-lg font-inherit cursor-pointer">Newsletter subject lines</button></li>
    </ul>
  </details>
  
  
</nav>
<style>
.conv-history-tw__list--compact .conv-history-tw__link { padding: 4px 8px; font-size: 13px; }
.conv-history-tw__list--comfortable .conv-history-tw__link { padding: 9px 10px; font-size: 14px; }
.conv-history-tw__item--active .conv-history-tw__link { background: color-mix(in srgb, var(--accent) 24%, #FAF7F2); border-left: 3px solid var(--accent); font-weight: 600; }
.conv-history-tw__link:hover, .conv-history-tw__link:focus-visible { background: #24143012; outline: none; }
</style>

react

export function ConversationHistory({
  activeTitle = "Renaming photos in bulk",
  accent = "#BFD9F2",
  grouped = true,
  density = "comfortable",
}) {
  const listStyle = { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column" };
  const linkPad = density === "compact" ? "4px 8px" : "9px 10px";
  const linkBase = { display: "block", width: "100%", textAlign: "left", background: "transparent", border: "none", borderRadius: 8, font: "inherit", color: "inherit", cursor: "pointer", padding: linkPad };
  const activeLink = { ...linkBase, background: `color-mix(in srgb, ${accent} 24%, #FAF7F2)`, borderLeft: `3px solid ${accent}`, fontWeight: 600 };
  const activeItem = <li><button type="button" style={activeLink}>{activeTitle}</button></li>;
  const otherItems = (
    <>
      <li><button type="button" style={linkBase}>Trip itinerary draft</button></li>
      <li><button type="button" style={linkBase}>Newsletter subject lines</button></li>
    </>
  );
  return (
    <nav aria-label="Conversation history" style={{ maxWidth: 300, font: "14px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 12, borderRadius: 12, border: "1px solid #24143018", boxSizing: "border-box" }}>
      {grouped ? (
        <>
          <details open style={{ marginBottom: 4 }}>
            <summary style={{ cursor: "pointer", fontWeight: 600, fontSize: 12, textTransform: "uppercase", letterSpacing: ".04em", padding: "6px 4px", color: "#24143099" }}>Today</summary>
            <ul style={listStyle}>{activeItem}</ul>
          </details>
          <details open>
            <summary style={{ cursor: "pointer", fontWeight: 600, fontSize: 12, textTransform: "uppercase", letterSpacing: ".04em", padding: "6px 4px", color: "#24143099" }}>Earlier</summary>
            <ul style={listStyle}>{otherItems}</ul>
          </details>
        </>
      ) : (
        <ul style={listStyle}>{activeItem}{otherItems}</ul>
      )}
    </nav>
  );
}