AI Prompt With Attachments

<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);
  "
>
  <form class="flex flex-col gap-3 p-4" onsubmit="return false">
    <label for="ai-prompt-attachments" class="sr-only">Enter your prompt</label>

    <!-- Attached files -->
    <div class="flex flex-wrap gap-2" aria-label="Attached files">
      <span
        class="inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-xs font-medium"
        style="
          border-color: var(--ws-ai-prompt-border);
          background: var(--ws-ai-prompt-input-bg);
          color: var(--ws-ai-prompt-text);
        "
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd" />
        </svg>
        report.pdf
        <button type="button" class="ml-0.5 rounded transition hover:opacity-70" aria-label="Remove report.pdf">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </span>
      <span
        class="inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-xs font-medium"
        style="
          border-color: var(--ws-ai-prompt-border);
          background: var(--ws-ai-prompt-input-bg);
          color: var(--ws-ai-prompt-text);
        "
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd" />
        </svg>
        screenshot.png
        <button type="button" class="ml-0.5 rounded transition hover:opacity-70" aria-label="Remove screenshot.png">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </span>
    </div>

    <!-- Input area -->
    <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-attachments"
        rows="3"
        placeholder="Ask anything about your files..."
        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">
        <div class="flex items-center gap-2">
          <button
            type="button"
            class="flex h-8 w-8 items-center justify-center rounded-lg border transition hover:opacity-80"
            style="border-color: var(--ws-ai-prompt-border); color: var(--ws-ai-prompt-text-soft)"
            aria-label="Attach file"
          >
            <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="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V5a1 1 0 112 0v6a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd" />
            </svg>
          </button>
          <p class="text-xs" style="color: var(--ws-ai-prompt-text-soft)">
            2 files attached
          </p>
        </div>
        <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>
</section>