AI Prompt With Model Selector

<section
  class="ws-ai-prompt mx-auto max-w-2xl rounded-2xl border shadow-md"
  style="
    --ws-ai-prompt-bg: oklch(0.985 0.002 75);
    --ws-ai-prompt-text: oklch(0.205 0.015 75);
    --ws-ai-prompt-text-soft: oklch(0.556 0.01 75);
    --ws-ai-prompt-border: oklch(0.885 0.008 75);
    --ws-ai-prompt-accent: oklch(0.588 0.16 250);
    --ws-ai-prompt-input-bg: oklch(0.97 0.003 75);
    background: var(--ws-ai-prompt-bg);
    color: var(--ws-ai-prompt-text);
    border-color: var(--ws-ai-prompt-border);
  "
>
  <div class="flex flex-col gap-3 p-4">
    <!-- Model selector -->
    <div class="flex items-center justify-between">
      <button
        type="button"
        class="inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm font-medium transition hover:opacity-80"
        style="
          border-color: var(--ws-ai-prompt-border);
          background: var(--ws-ai-prompt-input-bg);
          color: var(--ws-ai-prompt-text);
        "
        aria-haspopup="listbox"
        aria-label="Select AI model"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" style="color: var(--ws-ai-prompt-accent)">
          <path d="M13 7H7v6h6V7z" />
          <path fill-rule="evenodd" d="M7 2a1 1 0 012 0v1h2V2a1 1 0 112 0v1h2a2 2 0 012 2v2h1a1 1 0 110 2h-1v2h1a1 1 0 110 2h-1v2a2 2 0 01-2 2h-2v1a1 1 0 11-2 0v-1H9v1a1 1 0 11-2 0v-1H5a2 2 0 01-2-2v-2H2a1 1 0 110-2h1V9H2a1 1 0 010-2h1V5a2 2 0 012-2h2V2zM5 5h10v10H5V5z" clip-rule="evenodd" />
        </svg>
        Claude Sonnet 4
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" style="color: var(--ws-ai-prompt-text-soft)">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <!-- Quick-action suggestion pills -->
    <div class="flex flex-wrap gap-2" role="group" aria-label="Quick actions">
      <button
        type="button"
        class="rounded-full border px-3 py-1 text-xs font-medium transition hover:opacity-80"
        style="
          border-color: var(--ws-ai-prompt-border);
          background: var(--ws-ai-prompt-input-bg);
          color: var(--ws-ai-prompt-text-soft);
        "
      >
        Summarize
      </button>
      <button
        type="button"
        class="rounded-full border px-3 py-1 text-xs font-medium transition hover:opacity-80"
        style="
          border-color: var(--ws-ai-prompt-border);
          background: var(--ws-ai-prompt-input-bg);
          color: var(--ws-ai-prompt-text-soft);
        "
      >
        Translate
      </button>
      <button
        type="button"
        class="rounded-full border px-3 py-1 text-xs font-medium transition hover:opacity-80"
        style="
          border-color: var(--ws-ai-prompt-border);
          background: var(--ws-ai-prompt-input-bg);
          color: var(--ws-ai-prompt-text-soft);
        "
      >
        Explain code
      </button>
    </div>

    <!-- Input area -->
    <form onsubmit="return false">
      <label for="ai-prompt-model" class="sr-only">Enter your prompt</label>
      <div
        class="rounded-xl border transition focus-within:ring-2"
        style="
          border-color: var(--ws-ai-prompt-border);
          background: var(--ws-ai-prompt-input-bg);
        "
      >
        <textarea
          id="ai-prompt-model"
          rows="3"
          placeholder="Ask anything..."
          class="w-full resize-none bg-transparent px-4 pt-3 pb-2 text-sm outline-none"
          style="color: var(--ws-ai-prompt-text)"
          aria-label="Prompt input"
        ></textarea>
        <div class="flex items-center justify-between px-4 pb-3">
          <p class="text-xs" style="color: var(--ws-ai-prompt-text-soft)">
            Press Enter to send
          </p>
          <button
            type="submit"
            class="flex h-8 w-8 items-center justify-center rounded-lg text-white transition hover:opacity-90"
            style="background: var(--ws-ai-prompt-accent)"
            aria-label="Send prompt"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a1 1 0 01-.707-.293l-7-7a1 1 0 011.414-1.414L9 14.586V3a1 1 0 112 0v11.586l5.293-5.293a1 1 0 011.414 1.414l-7 7A1 1 0 0110 18z" clip-rule="evenodd" transform="rotate(180 10 10)" />
            </svg>
          </button>
        </div>
      </div>
    </form>
  </div>
</section>