PromptInputexperimental

<script lang="ts">
  import { PromptInput, SparklesIcon } from '@urbicon-ui/blocks';

  type Msg = { id: string; role: 'user' | 'assistant'; text: string };

  let draft = $state('');
  let busy = $state(false);
  let messages = $state<Msg[]>([]);
  let timer: ReturnType<typeof setTimeout> | undefined;

  function send(text: string) {
    messages = [...messages, { id: crypto.randomUUID(), role: 'user', text }];
    busy = true;
    // Simulate a streaming response; the Send button becomes a Stop button
    // while `busy` is true, and Enter no longer submits.
    timer = setTimeout(() => {
      messages = [
        ...messages,
        { id: crypto.randomUUID(), role: 'assistant', text: 'Here is a reply to: ' + text }
      ];
      busy = false;
    }, 2200);
  }

  function stop() {
    clearTimeout(timer);
    busy = false;
    messages = [...messages, { id: crypto.randomUUID(), role: 'assistant', text: '(stopped)' }];
  }
</script>

<div class="mx-auto flex max-w-xl flex-col gap-3">
  {#if messages.length > 0}
    <div class="flex flex-col gap-2">
      {#each messages as msg (msg.id)}
        {#if msg.role === 'user'}
          <div
            class="bg-primary text-text-on-primary ml-auto max-w-[80%] rounded-2xl px-3 py-2 text-sm"
          >
            {msg.text}
          </div>
        {:else}
          <div class="text-text-secondary flex max-w-[85%] items-start gap-2 text-sm">
            <SparklesIcon class="text-primary mt-0.5 size-4 shrink-0" />
            <span>{msg.text}</span>
          </div>
        {/if}
      {/each}
    </div>
  {/if}

  <PromptInput
    bind:value={draft}
    {busy}
    placeholder="Message the assistant…"
    onSubmit={({ text }) => send(text)}
    onStop={stop}
  >
    {#snippet hint()}
      <span>Enter to send · Shift+Enter for a new line</span>
    {/snippet}
  </PromptInput>
</div>

<script lang="ts">
  import { PromptInput, Alert } from '@urbicon-ui/blocks';
  import type { FileIntakeEntry, FileIntakeRejection } from '@urbicon-ui/blocks';

  let draft = $state('');
  let attachments = $state<FileIntakeEntry[]>([]);
  let rejections = $state<FileIntakeRejection[]>([]);
  let lastSent = $state<string | null>(null);

  function handleSubmit(payload: { text: string; attachments: FileIntakeEntry[] }) {
    const names = payload.attachments.map((a) => a.file.name);
    lastSent =
      `"${payload.text}"` +
      (names.length ? ` with ${names.length} file(s): ${names.join(', ')}` : ' (no files)');
    rejections = [];
  }
</script>

<div class="mx-auto flex max-w-xl flex-col gap-3">
  {#if rejections.length > 0}
    <Alert intent="danger" title="Some files were rejected">
      <ul class="list-outside list-disc pl-5 text-sm">
        {#each rejections as r (r.file.name)}
          <li>{r.file.name} — {r.errors[0]?.message}</li>
        {/each}
      </ul>
    </Alert>
  {/if}

  {#if lastSent}
    <p class="text-text-secondary text-sm">Sent: {lastSent}</p>
  {/if}

  <PromptInput
    bind:value={draft}
    bind:attachments
    allowAttachments
    accept="image/*"
    maxFiles={3}
    maxFileSize={2 * 1024 * 1024}
    placeholder="Add up to 3 images (≤ 2 MB each) and describe them…"
    onSubmit={handleSubmit}
    onAttachmentReject={(r) => (rejections = r)}
  >
    {#snippet hint()}
      <span>Attach via the paperclip, drag-and-drop, or paste a screenshot.</span>
    {/snippet}
  </PromptInput>
</div>

<script lang="ts">
  import { PromptInput, Select } from '@urbicon-ui/blocks';

  let draft = $state('');
  let model = $state('sonnet');
  let lastSent = $state<string | null>(null);

  const models = [
    { label: 'Haiku — fast', value: 'haiku' },
    { label: 'Sonnet — balanced', value: 'sonnet' },
    { label: 'Opus — deep', value: 'opus' }
  ];
</script>

<div class="mx-auto flex max-w-xl flex-col gap-3">
  {#if lastSent}
    <p class="text-text-secondary text-sm">Sent to <strong>{model}</strong>: {lastSent}</p>
  {/if}

  <PromptInput
    bind:value={draft}
    placeholder="Ask anything…"
    onSubmit={({ text }) => (lastSent = text)}
  >
    {#snippet trailing()}
      <Select size="xs" options={models} bind:value={model} aria-label="Model" class="w-40" />
    {/snippet}
  </PromptInput>
</div>