ChatPrompt.vue

<script setup lang="ts">
import { ref } from 'vue'

const basicValue = ref('')
const autoresizeValue = ref('')
const disabledValue = ref('Agent session terminated — no further input accepted.')
const footerValue = ref('')
const headerValue = ref('')

const variants = ['outline', 'soft', 'subtle', 'none'] as const
const variantValues = Object.fromEntries(
  ['outline', 'soft', 'subtle', 'none'].map(v => [v, ref('')])
) as Record<string, ReturnType<typeof ref<string>>>

const submitLog = ref<string[]>([])

function handleSubmit(label: string, value: string) {
  if (value.trim()) {
    submitLog.value.unshift(`[${label}] ${value.trim()}`)
    if (submitLog.value.length > 4) submitLog.value.pop()
  }
}
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Basic">
      <div class="w-full max-w-xl">
        <UChatPrompt
          v-model="basicValue"
          placeholder="Dispatch an agent job…"
          @submit="handleSubmit('basic', basicValue); basicValue = ''"
        />
      </div>
    </GallerySection>

    <GallerySection title="Variants">
      <div class="flex w-full max-w-xl flex-col gap-4">
        <div v-for="v in variants" :key="v">
          <p class="mb-1 text-xs text-[var(--ui-text-muted)] capitalize">{{ v }}</p>
          <UChatPrompt
            :variant="v"
            :placeholder="`Variant: ${v} — describe your runtime task…`"
          />
        </div>
      </div>
    </GallerySection>

    <GallerySection title="With header slot">
      <div class="w-full max-w-xl">
        <UChatPrompt
          v-model="headerValue"
          placeholder="Ask the agent runtime anything…"
          @submit="handleSubmit('header', headerValue); headerValue = ''"
        >
          <template #header>
            <div class="flex items-center gap-2 px-1 pb-2">
              <UIcon name="i-material-symbols-smart-toy-outline" class="text-[var(--ui-primary)]" />
              <span class="text-xs font-medium text-[var(--ui-text-muted)]">Session · <code class="font-mono">ses_7f3a9c</code></span>
              <UBadge color="success" variant="soft" size="xs" label="Connected" />
            </div>
          </template>
        </UChatPrompt>
      </div>
    </GallerySection>

    <GallerySection title="With footer slot">
      <div class="w-full max-w-xl">
        <UChatPrompt
          v-model="footerValue"
          placeholder="Describe the job to dispatch…"
          @submit="handleSubmit('footer', footerValue); footerValue = ''"
        >
          <template #footer>
            <div class="flex items-center justify-between px-1 pt-2">
              <div class="flex items-center gap-2">
                <UIcon name="i-material-symbols-info-outline" class="text-[var(--ui-text-dimmed)] text-sm" />
                <span class="text-xs text-[var(--ui-text-dimmed)]">Enter to submit · Shift+Enter for newline</span>
              </div>
              <UChatPromptSubmit />
            </div>
          </template>
        </UChatPrompt>
      </div>
    </GallerySection>

    <GallerySection title="With icon">
      <div class="w-full max-w-xl">
        <UChatPrompt
          icon="i-material-symbols-terminal"
          placeholder="Run a runtime command…"
        />
      </div>
    </GallerySection>

    <GallerySection title="Loading state">
      <div class="w-full max-w-xl">
        <UChatPrompt
          :loading="true"
          placeholder="Agent is processing your request…"
          model-value="Summarise all trace events for job job_a4b2 in the last hour."
        />
      </div>
    </GallerySection>

    <GallerySection title="Disabled state">
      <div class="w-full max-w-xl">
        <UChatPrompt
          :disabled="true"
          v-model="disabledValue"
        />
      </div>
    </GallerySection>

    <GallerySection title="Error state">
      <div class="w-full max-w-xl">
        <UChatPrompt
          :error="new Error('Runtime rejected the job: lease expired')"
          placeholder="Retry your agent prompt…"
        />
        <p class="mt-2 text-xs text-[var(--ui-error)]">
          <UIcon name="i-material-symbols-error-outline" class="align-middle" />
          Runtime rejected the job: lease expired
        </p>
      </div>
    </GallerySection>

    <GallerySection title="Autoresize">
      <div class="w-full max-w-xl">
        <UChatPrompt
          v-model="autoresizeValue"
          :autoresize="true"
          :maxrows="6"
          placeholder="Paste a multi-line agent plan here — the prompt expands as you type…"
          @submit="handleSubmit('autoresize', autoresizeValue); autoresizeValue = ''"
        />
      </div>
    </GallerySection>

    <GallerySection title="Realistic usage — Agent dispatcher">
      <div class="w-full max-w-xl rounded-lg border border-[var(--ui-border)] bg-[var(--ui-bg-elevated)] p-4 flex flex-col gap-3">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-2">
            <UIcon name="i-material-symbols-hub-outline" class="text-[var(--ui-primary)]" />
            <span class="text-sm font-semibold">ARCP Agent Dispatcher</span>
          </div>
          <UBadge color="success" variant="soft" size="xs">
            <UIcon name="i-material-symbols-circle" class="text-xs mr-1" />
            Runtime online
          </UBadge>
        </div>

        <div v-if="submitLog.length" class="rounded-md bg-[var(--ui-bg)] p-3 flex flex-col gap-1">
          <p class="text-xs font-medium text-[var(--ui-text-muted)] mb-1">Recent dispatches</p>
          <p v-for="(entry, i) in submitLog" :key="i" class="text-xs text-[var(--ui-text-dimmed)] font-mono truncate">
            {{ entry }}
          </p>
        </div>

        <UChatPrompt
          v-model="footerValue"
          placeholder="Describe a job for the agent runtime…"
          @submit="handleSubmit('dispatcher', footerValue); footerValue = ''"
        >
          <template #footer>
            <div class="flex items-center justify-between pt-2 px-1">
              <div class="flex gap-1">
                <UButton size="xs" variant="ghost" color="neutral" icon="i-material-symbols-attach-file" />
                <UButton size="xs" variant="ghost" color="neutral" icon="i-material-symbols-code-blocks-outline" />
              </div>
              <UChatPromptSubmit
                icon="i-material-symbols-rocket-launch-outline"
                color="primary"
                variant="solid"
              />
            </div>
          </template>
        </UChatPrompt>
      </div>
    </GallerySection>
  </div>
</template>