ClarificationPrompt

A question + chip-style option picker with a free-text fallback, for an AI recognition flow that needs one more detail before it can finish (e.g. "Raw or cooked weight?").

Playground

One more thing

Raw or cooked weight?

options chips + free textfree text only

Click a chip, or type a free-text answer and submit — both simulate a ~900ms re-analysis call (disabling further interaction via loading) before the prompt resolves, same as the real select/submit round-trip a consumer wires up.

<script setup>
import { ClarificationPrompt } from 'yemek'

const answer = ref('')
const loading = ref(false)

async function onResolve(value) {
  loading.value = true
  await reAnalyzeWith(value) // the consumer's own AI re-analysis call
  loading.value = false
}
</script>

<template>
  <ClarificationPrompt
    v-if="clarificationNeeded"
    title="One more thing"
    question="Raw or cooked weight?"
    :options="['Raw', 'Cooked']"
    v-model="answer"
    :loading="loading"
    answer-placeholder="Or type an answer..."
    submit-label="Confirm"
    @select="onResolve"
    @submit="onResolve"
  />
</template>

Props

Prop	Type	Default	Description
title	string	—	Prompt heading.
question	string	—	The clarifying question text.
options	string[]	[]	Already-localized chip labels. Omit/empty for a free-text-only prompt.
modelValue	string	''	Free-text answer (v-model).
loading	boolean	false	Disables chip/submit interaction while the consumer's re-analysis call is in flight.
answerPlaceholder	string	''	Placeholder for the free-text input — already-localized.
submitLabel	string	'Submit'	Free-text submit button label — already-localized.

Events

Event	Payload	Fired when
update:modelValue	string	The free-text input changes (standard v-model).
select	string (the clicked option)	A chip is clicked. The consumer treats this the same as a free-text submit with that value.
submit	string (the current modelValue)	The free-text field is submitted (button click or Enter).

Behavior notes

• No AI/analysis logic lives in the component — selecting a chip or submitting free text just emits. The consumer makes the actual re-analysis call and decides when the prompt goes away (typically by removing it from the DOM once loading resolves into a result).
• Chips stagger in on appear (a per-chip animation delay) rather than all appearing at once.
• Clicking a chip pulses it immediately — feedback that the click registered before the consumer's network round-trip resolves and the whole prompt is removed.
• Set loading to true to disable further interaction while a re-analysis call is in flight.