Prompt History

Previous prompts.

html

<div class="ph ph--comfortable">
  <h3 class="ph__heading">Previous prompts</h3>
  <ul class="ph__list">
    <li class="ph__item ph__item--current" style="border-color:#BFD9F2;">
      <span class="ph__dot" style="background:#BFD9F2;" aria-hidden="true"></span>
      <span class="ph__text">Summarise this quarter&#39;s support tickets</span>
      <span class="ph__time">just now</span>
    </li>
    <li class="ph__item">
      <span class="ph__dot" aria-hidden="true"></span>
      <span class="ph__text">Draft a reply to the billing escalation</span>
      <span class="ph__time">14:02</span>
    </li>
    <li class="ph__item">
      <span class="ph__dot" aria-hidden="true"></span>
      <span class="ph__text">List open pull requests for this repo</span>
      <span class="ph__time">Yesterday</span>
    </li>
  </ul>
</div>
<style>
.ph { font: 14px/1.5 system-ui, sans-serif; max-width: 420px; color: #241430; background: #FAF7F2; }
.ph__heading { margin: 0 0 10px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #241430b3; }
.ph__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ph__item { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; }
.ph--compact .ph__item { padding: 6px 10px; }
.ph__item--current { background: #24143008; border-color: currentColor; }
.ph__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #24143033; align-self: center; }
.ph__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph__time { flex: none; font-size: 12px; color: #24143080; }
</style>

tailwind

<div class="ph-tw ph-tw--comfortable max-w-md font-sans text-[#241430] bg-[#FAF7F2]">
  <h3 class="m-0 mb-2.5 text-[13px] font-semibold uppercase tracking-wide text-[#241430]/70">Previous prompts</h3>
  <ul class="list-none m-0 p-0 flex flex-col gap-1">
    <li class="flex items-baseline gap-2.5 px-3 py-2.5 rounded-lg border" style="background:#24143008;border-color:#BFD9F2;">
      <span class="flex-none w-1.5 h-1.5 rounded-full self-center" style="background:#BFD9F2;" aria-hidden="true"></span>
      <span class="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">Summarise this quarter&#39;s support tickets</span>
      <span class="flex-none text-xs text-[#241430]/50">just now</span>
    </li>
    <li class="flex items-baseline gap-2.5 px-3 py-2.5 rounded-lg border border-transparent">
      <span class="flex-none w-1.5 h-1.5 rounded-full self-center bg-[#241430]/20" aria-hidden="true"></span>
      <span class="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">Draft a reply to the billing escalation</span>
      <span class="flex-none text-xs text-[#241430]/50">14:02</span>
    </li>
    <li class="flex items-baseline gap-2.5 px-3 py-2.5 rounded-lg border border-transparent">
      <span class="flex-none w-1.5 h-1.5 rounded-full self-center bg-[#241430]/20" aria-hidden="true"></span>
      <span class="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">List open pull requests for this repo</span>
      <span class="flex-none text-xs text-[#241430]/50">Yesterday</span>
    </li>
  </ul>
</div>
<style>
.ph-tw--compact li { padding-top: 6px; padding-bottom: 6px; }
</style>

react

export function PromptHistory({
  latestPrompt = "Summarise this quarter's support tickets",
  accent = "#BFD9F2",
  showTimestamps = true,
  density = "comfortable",
}) {
  const itemPad = density === "compact" ? "6px 10px" : "10px 12px";
  const older = [
    { text: "Draft a reply to the billing escalation", time: "14:02" },
    { text: "List open pull requests for this repo", time: "Yesterday" },
  ];
  return (
    <div style={{ maxWidth: 420, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2" }}>
      <h3 style={{ margin: "0 0 10px", fontSize: 13, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".04em", color: "#241430b3" }}>
        Previous prompts
      </h3>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 4 }}>
        <li style={{ display: "flex", alignItems: "baseline", gap: 10, padding: itemPad, borderRadius: 8, border: "1px solid", borderColor: accent, background: "#24143008" }}>
          <span aria-hidden="true" style={{ flex: "none", width: 6, height: 6, borderRadius: "50%", background: accent, alignSelf: "center" }} />
          <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{latestPrompt}</span>
          {showTimestamps && <span style={{ flex: "none", fontSize: 12, color: "#24143080" }}>just now</span>}
        </li>
        {older.map((item) => (
          <li key={item.text} style={{ display: "flex", alignItems: "baseline", gap: 10, padding: itemPad, borderRadius: 8, border: "1px solid transparent" }}>
            <span aria-hidden="true" style={{ flex: "none", width: 6, height: 6, borderRadius: "50%", background: "#24143033", alignSelf: "center" }} />
            <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{item.text}</span>
            {showTimestamps && <span style={{ flex: "none", fontSize: 12, color: "#24143080" }}>{item.time}</span>}
          </li>
        ))}
      </ul>
    </div>
  );
}