Prompt Input

Input used to provide instructions.

html

<form class="pi" style="--accent:#D9C8F0;">
  <textarea class="pi__field" rows="2" placeholder="Ask anything…"></textarea>
  <button type="button" class="pi__send pi__send--idle">
    <span class="pi__label pi__label--idle">Send</span>
    <span class="pi__label pi__label--sending">Sending…</span>
    <span class="pi__label pi__label--sent">Sent</span>
  </button>
</form>
<style>
.pi { font: 14px/1.4 system-ui, sans-serif; max-width: 480px; display: flex; align-items: flex-end; gap: 8px;
  padding: 10px; border: 1.5px solid #24143026; border-radius: 12px; background: #FAF7F2; color: #241430; }
.pi__field { flex: 1; resize: vertical; border: none; outline: none; background: transparent; color: inherit;
  font: inherit; min-height: 1.4em; }
.pi__field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.pi__send { flex: none; border: none; border-radius: 8px; padding: 8px 16px; font: 600 14px system-ui, sans-serif;
  cursor: pointer; background: var(--accent); color: #241430; }
.pi__send:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
.pi__label { display: none; }
.pi__send--idle .pi__label--idle { display: inline; }
.pi__send--sending { opacity: .55; cursor: progress; }
.pi__send--sending .pi__label--sending { display: inline; }
.pi__send--sent { background: #24143010; color: #241430; }
.pi__send--sent .pi__label--sent { display: inline; }
</style>

tailwind

<form class="pi-tw pi-tw--idle max-w-md flex items-end gap-2 p-2.5 rounded-xl border-[1.5px] border-[#24143026] bg-[#FAF7F2] text-[#241430] font-sans" style="--accent:#D9C8F0;">
  <textarea rows="2" placeholder="Ask anything…" class="flex-1 resize-y border-none outline-none bg-transparent text-inherit font-inherit min-h-[1.4em]"></textarea>
  <button type="button" class="pi-tw__send flex-none rounded-lg px-4 py-2 text-sm font-semibold border-none" style="background:var(--accent);color:#241430;">
    <span class="pi-tw__label pi-tw__label--idle">Send</span>
    <span class="pi-tw__label pi-tw__label--sending">Sending…</span>
    <span class="pi-tw__label pi-tw__label--sent">Sent</span>
  </button>
</form>
<style>
.pi-tw__label { display: none; }
.pi-tw--idle .pi-tw__label--idle { display: inline; }
.pi-tw--sending .pi-tw__label--sending { display: inline; }
.pi-tw--sending .pi-tw__send { opacity: .55; cursor: progress; }
.pi-tw--sent .pi-tw__label--sent { display: inline; }
.pi-tw--sent .pi-tw__send { background: #24143010 !important; }
</style>

react

export function PromptInput({
  placeholder = "Ask anything…",
  sendState = "idle",
  accent = "#D9C8F0",
  rows = 2,
}) {
  const label = { idle: "Send", sending: "Sending…", sent: "Sent" }[sendState] ?? "Send";
  const sendStyle = {
    idle: { background: accent, color: "#241430", opacity: 1, cursor: "pointer" },
    sending: { background: accent, color: "#241430", opacity: 0.55, cursor: "progress" },
    sent: { background: "#24143010", color: "#241430", opacity: 1, cursor: "pointer" },
  }[sendState];
  return (
    <form style={{ maxWidth: 480, display: "flex", alignItems: "flex-end", gap: 8, padding: 10,
      border: "1.5px solid #24143026", borderRadius: 12, background: "#FAF7F2", color: "#241430", fontFamily: "system-ui, sans-serif" }}>
      <textarea rows={rows} placeholder={placeholder} style={{ flex: 1, resize: "vertical", border: "none",
        outline: "none", background: "transparent", color: "inherit", font: "inherit", minHeight: "1.4em" }} />
      <button type="button" style={{ flex: "none", border: "none", borderRadius: 8, padding: "8px 16px",
        fontWeight: 600, fontSize: 14, fontFamily: "system-ui, sans-serif", cursor: sendStyle.cursor,
        background: sendStyle.background, color: sendStyle.color, opacity: sendStyle.opacity }}>
        {label}
      </button>
    </form>
  );
}