npm - @8wave/ai-elements - Versions diffs - 0.103.0-beta.3 → 0.103.0-beta.4 - Mend

@8wave/ai-elements 0.103.0-beta.3 → 0.103.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (128) hide show

package/dist/_chunks/{PkToolShowForm-ztQFyFd9.js.map → PkToolShowForm-CzIfm5de.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PkToolShowForm-ztQFyFd9.js","names":[],"sources":["../../../../packages/components/src/PkEditorRadioButtons.vue","../../../../packages/components/src/PkEditorRadioButtons.vue","../../../../packages/components/src/PkEditorCheckboxButtons.vue","../../../../packages/components/src/PkEditorCheckboxButtons.vue","../../../../packages/components/src/chat/PkToolShowForm.vue","../../../../packages/components/src/chat/PkToolShowForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import type { Option } from '@volverjs/ui-vue'\n import { computed } from 'vue'\n\n const props = defineProps<{\n name: string\n required?: boolean\n options: Option[]\n readonly?: boolean\n disabled?: boolean\n modifiers?: string \| string[]\n }>()\n\n const modelValue = defineModel<\n string \| number \| boolean \| symbol \| unknown[] \| undefined\n >()\n\n const radioModifiers = computed(() => {\n const toReturn = props.modifiers\n ? Array.isArray(props.modifiers)\n ? props.modifiers\n : [props.modifiers]\n : []\n return [...toReturn, 'button']\n })\n</script>\n\n<template>\n <VvRadioGroup v-model=\"modelValue\" :name modifiers=\"buttons\">\n <VvRadio\n v-for=\"(option, key) in options\"\n :key\n :name\n :required\n :readonly\n :disabled\n :value=\"option.value\"\n :modifiers=\"radioModifiers\">\n <slot :name=\"option.value\" v-bind=\"{ option }\">\n {{ option.label }}\n </slot>\n </VvRadio>\n </VvRadioGroup>\n</template>\n","<script setup lang=\"ts\">\n import type { Option } from '@volverjs/ui-vue'\n import { computed } from 'vue'\n\n const props = defineProps<{\n name: string\n required?: boolean\n options: Option[]\n readonly?: boolean\n disabled?: boolean\n modifiers?: string \| string[]\n }>()\n\n const modelValue = defineModel<\n string \| number \| boolean \| symbol \| unknown[] \| undefined\n >()\n\n const radioModifiers = computed(() => {\n const toReturn = props.modifiers\n ? Array.isArray(props.modifiers)\n ? props.modifiers\n : [props.modifiers]\n : []\n return [...toReturn, 'button']\n })\n</script>\n\n<template>\n <VvRadioGroup v-model=\"modelValue\" :name modifiers=\"buttons\">\n <VvRadio\n v-for=\"(option, key) in options\"\n :key\n :name\n :required\n :readonly\n :disabled\n :value=\"option.value\"\n :modifiers=\"radioModifiers\">\n <slot :name=\"option.value\" v-bind=\"{ option }\">\n {{ option.label }}\n </slot>\n </VvRadio>\n </VvRadioGroup>\n</template>\n","<script setup lang=\"ts\">\n import type { Option } from '@volverjs/ui-vue'\n\n defineProps<{\n name: string\n required?: boolean\n options: Option[]\n readonly?: boolean\n disabled?: boolean\n }>()\n\n const modelValue = defineModel<unknown[] \| undefined>()\n</script>\n\n<template>\n <VvCheckboxGroup v-model=\"modelValue\" :name modifiers=\"buttons\">\n <VvCheckbox\n v-for=\"(option, key) in options\"\n :key\n :name\n :required\n :readonly\n :disabled\n :value=\"option.value\"\n modifiers=\"button\">\n <slot :name=\"String(option.value)\" v-bind=\"{ option }\">\n {{ option.label }}\n </slot>\n </VvCheckbox>\n </VvCheckboxGroup>\n</template>\n","<script setup lang=\"ts\">\n import type { Option } from '@volverjs/ui-vue'\n\n defineProps<{\n name: string\n required?: boolean\n options: Option[]\n readonly?: boolean\n disabled?: boolean\n }>()\n\n const modelValue = defineModel<unknown[] \| undefined>()\n</script>\n\n<template>\n <VvCheckboxGroup v-model=\"modelValue\" :name modifiers=\"buttons\">\n <VvCheckbox\n v-for=\"(option, key) in options\"\n :key\n :name\n :required\n :readonly\n :disabled\n :value=\"option.value\"\n modifiers=\"button\">\n <slot :name=\"String(option.value)\" v-bind=\"{ option }\">\n {{ option.label }}\n </slot>\n </VvCheckbox>\n </VvCheckboxGroup>\n</template>\n","<script setup lang=\"ts\">\n import { computed, ref, reactive, watch } from 'vue'\n import { useI18n } from 'vue-i18n'\n import { isVoiceRenderAck } from 'models'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n import PkEditorRadioButtons from '../PkEditorRadioButtons.vue'\n import PkEditorCheckboxButtons from '../PkEditorCheckboxButtons.vue'\n\n // --- Types ---\n\n interface FormOption {\n label: string\n description?: string\n }\n\n interface FormStep {\n id: string\n question: string\n message?: string\n type?: 'text' \| 'number' \| 'date'\n options?: FormOption[]\n multiSelect?: boolean\n allowFreeformInput?: boolean\n placeholder?: string\n }\n\n interface FormAnswer {\n id: string\n value: string \| string[] \| number \| null\n }\n\n interface ToolPartShape {\n state?: 'input-available' \| 'output-available'\n toolCallId?: string\n // AI SDK v5 encodes the tool name in `type` (e.g. 'tool-showMultipleChoice').\n // `toolName` is kept for backward compatibility but is normally absent.\n type?: string\n toolName?: string\n input?: {\n title?: string\n steps?: FormStep[]\n // Legacy showMultipleChoice fields\n question?: string\n options?: (string \| FormOption)[]\n }\n // The web card submits `{ answers: [...] }`; the platform channels\n // (Teams modal) submit a flat record keyed by step id.\n output?: string \| { answers: FormAnswer[] } \| Record<string, unknown>\n }\n\n type AnswerValue = string \| string[] \| number \| null\n\n // --- Props & Emits ---\n\n const props = defineProps<{\n part: unknown\n allowCustomAnswer?: boolean\n /*\n Answered during a call. Nothing in the part says so (the answer went\n * to the agent as speech, not to the tool call), so the surface that\n * sent it is the only one that knows, and without it the same form\n * could be submitted again and again.\n /\n answered?: boolean\n }>()\n\n const emit = defineEmits<{\n select: [answer: string \| { answers: FormAnswer[] }]\n }>()\n\n const { t: $t, d: $d } = useI18n({ useScope: 'global' })\n\n // --- Parsed tool part ---\n\n const toolPart = computed(\n () => JSON.parse(JSON.stringify(props.part)) as ToolPartShape,\n )\n\n const isLegacy = computed(\n () =>\n toolPart.value.toolName === 'showMultipleChoice' \|\|\n toolPart.value.type === 'tool-showMultipleChoice',\n )\n\n /\n A form drawn during a CALL is already \"answered\" as far as the tool loop\n * is concerned: the turn could not wait for it, so the backend closed it\n * with a note saying the widget was drawn (see `isVoiceRenderAck`). That\n * note is not an answer, and the caller still has to give one.\n /\n const isRenderAck = computed(() => isVoiceRenderAck(toolPart.value.output))\n\n const isInteractive = computed(\n () =>\n !props.answered &&\n (toolPart.value.state === 'input-available' \|\| isRenderAck.value),\n )\n\n /* Single-step with no custom-answer and no freeform → auto-submit on option pick /\n const isAutoSubmitStep = computed(() => {\n const step = currentStep.value\n if (!step) return false\n return (\n steps.value.length === 1 &&\n !step.allowFreeformInput &&\n !props.allowCustomAnswer\n )\n })\n\n /* Legacy tool should auto-submit on option pick regardless of allowCustomAnswer /\n const isLegacyAutoSubmit = computed(\n () =>\n isLegacy.value &&\n steps.value.length === 1 &&\n !currentStep.value?.multiSelect,\n )\n\n /\n True only for the steps that send themselves as soon as an option is\n * picked: the single case where the footer button would be redundant.\n * Every other shape needs it, single-step forms included: with\n * `allowFreeformInput` (or `allowCustomAnswer`) the radio pick no longer\n * auto-submits, so without the footer the user was left with a chosen\n * option and no way to send it.\n /\n const isSelfSubmitting = computed(\n () =>\n Boolean(currentStep.value?.options) &&\n !currentStep.value?.multiSelect &&\n (isAutoSubmitStep.value \|\| isLegacyAutoSubmit.value),\n )\n\n // --- Steps ---\n\n const steps = computed<FormStep[]>(() => {\n const input = toolPart.value.input\n if (input?.steps?.length) {\n return input.steps\n }\n // Legacy showMultipleChoice → normalize into a single step\n if (input?.question && input?.options) {\n return [\n {\n id: 'legacy',\n question: input.question,\n options: input.options.map((o) =>\n typeof o === 'string' ? { label: o } : o,\n ),\n },\n ]\n }\n return []\n })\n\n // --- Navigation state ---\n\n const currentStepIndex = ref(0)\n const currentStep = computed(() => steps.value[currentStepIndex.value])\n const canGoBack = computed(() => currentStepIndex.value > 0)\n const canGoNext = computed(\n () => currentStepIndex.value < steps.value.length - 1,\n )\n const isMultiStep = computed(() => steps.value.length > 1)\n\n const progress = computed(() => {\n if (!isMultiStep.value) return null\n return Math.round(\n ((currentStepIndex.value + 1) / steps.value.length) 100,\n )\n })\n\n // --- Answers ---\n\n const answers = reactive<Record<string, AnswerValue>>({})\n const customAnswer = ref('')\n\n // The freeform field belongs to the step showing it: text left behind\n // (unsubmitted, or arriving from a late input update) must not follow the\n // user to the next or previous question.\n watch(currentStepIndex, () => {\n customAnswer.value = ''\n })\n\n // Single scalar answer shared by radio buttons and freeform text/number/date inputs.\n const scalarValue = computed<string \| number \| undefined>({\n get: () => {\n const val = currentStep.value\n ? answers[currentStep.value.id]\n : undefined\n if (val == null \|\| Array.isArray(val)) return undefined\n return val\n },\n set: (val) => {\n if (currentStep.value) {\n answers[currentStep.value.id] = val ?? null\n }\n },\n })\n\n const activeCheckboxValue = computed<unknown[] \| undefined>({\n get: () => {\n const val = currentStep.value\n ? answers[currentStep.value.id]\n : undefined\n return Array.isArray(val) ? val : []\n },\n set: (val) => {\n if (currentStep.value) {\n answers[currentStep.value.id] = (val as string[]) ?? []\n }\n },\n })\n\n // --- Initialize answers from existing output ---\n\n /** The `{ answers: [...] }` list, when the output carries one. /\n function outputAnswers(output: ToolPartShape['output']) {\n if (!output \|\| typeof output === 'string') return undefined\n const list = (output as { answers?: unknown }).answers\n return Array.isArray(list) ? (list as FormAnswer[]) : undefined\n }\n\n watch(\n () => toolPart.value.output,\n (output) => {\n if (!output \|\| isVoiceRenderAck(output)) return\n if (typeof output === 'string') {\n if (steps.value.length === 1) {\n answers[steps.value[0].id] = output\n }\n return\n }\n const list = outputAnswers(output)\n if (list) {\n for (const a of list) {\n answers[a.id] = a.value\n }\n return\n }\n // Forms answered on a platform channel come back as a flat record\n // keyed by step id: without this the read-only summary showed every\n // answer as a placeholder.\n const record = output as Record<string, unknown>\n for (const step of steps.value) {\n const value = record[step.id]\n if (value !== undefined) {\n answers[step.id] = value as AnswerValue\n }\n }\n },\n { immediate: true },\n )\n\n // --- Restore custom answer from output when it doesn't match any option ---\n\n const normalizedOutput = computed(() => {\n const out = toolPart.value.output\n if (!out \|\| isVoiceRenderAck(out)) return undefined\n if (typeof out === 'string') return out\n const list = outputAnswers(out)\n if (list?.length === 1) {\n const val = list[0].value\n return Array.isArray(val) ? val.join(', ') : String(val)\n }\n return undefined\n })\n\n watch(\n normalizedOutput,\n (value) => {\n if (!value \|\| !currentStep.value) return\n const optionLabels = (currentStep.value.options ?? []).map(\n (o) => o.label,\n )\n if (!optionLabels.includes(value)) {\n customAnswer.value = value\n }\n },\n { immediate: true },\n )\n\n // --- Option mapping for radio/checkbox components ---\n\n const radioOptions = computed(() => {\n if (!currentStep.value?.options) return []\n return currentStep.value.options.map((option) => ({\n label: option.label,\n value: option.label,\n description: option.description,\n }))\n })\n\n // --- Navigation & Submission ---\n\n /* Footer button, and Enter on a pure freeform step. /\n function goNext() {\n // A typed freeform answer wins over the picked option: it is the more\n // recent intent, and the footer button is now the visible way to send\n // it (the freeform field only submits on Enter).\n if (customAnswer.value.trim()) {\n submitCustomAnswer()\n return\n }\n if (canGoNext.value) {\n currentStepIndex.value++\n } else {\n submitForm()\n }\n }\n\n function goBack() {\n if (canGoBack.value) {\n currentStepIndex.value--\n }\n }\n\n function submitForm() {\n if (!isInteractive.value) return\n\n const finalAnswers: FormAnswer[] = steps.value.map((step) => ({\n id: step.id,\n value: answers[step.id] ?? null,\n }))\n\n // Legacy backward compatibility: single-step, single-select → return plain string\n if (\n isLegacyAutoSubmit.value &&\n !currentStep.value?.allowFreeformInput\n ) {\n const val = finalAnswers[0].value\n emit('select', Array.isArray(val) ? val[0] : (val as string))\n } else {\n emit('select', { answers: finalAnswers })\n }\n }\n\n /* Enter inside the freeform field shown alongside the options. /\n function submitCustomAnswer() {\n const value = customAnswer.value.trim()\n if (!value) return\n\n answers[currentStep.value.id] = value\n // Cleared before navigating: `goNext()` reads it back to route a typed\n // answer here, so leaving it set would recurse.\n customAnswer.value = ''\n if (steps.value.length === 1) {\n submitForm()\n } else {\n goNext()\n }\n }\n\n function onRadioChange() {\n if (!isInteractive.value) return\n if (isAutoSubmitStep.value \|\| isLegacyAutoSubmit.value) {\n submitForm()\n }\n }\n\n // --- Summary helpers ---\n\n function getSummaryValue(step: FormStep) {\n const val = answers[step.id]\n if (val == null) return '—'\n if (Array.isArray(val)) return val.join(', ')\n if (step.type === 'date') return $d(new Date(val), 'short')\n return val\n }\n</script>\n\n<template>\n <div\n v-if=\"steps.length\"\n class=\"border border-surface-3 rounded-xl w-full overflow-hidden flex flex-col transition-all bg-surface\">\n <!-- Header -->\n <div\n v-if=\"toolPart.input?.title \|\| (isInteractive && steps.length > 1)\"\n class=\"text-12 border-b border-surface-3 text-word-3 bg-surface-1\">\n <div\n v-if=\"toolPart.input?.title\"\n class=\"px-sm py-10 font-bold\"\n :class=\"{\n 'border-b border-surface-3':\n isInteractive && steps.length > 1,\n }\">\n {{ toolPart.input?.title }}\n </div>\n <!-- Progress for multi-step -->\n <div\n v-if=\"isInteractive && steps.length > 1\"\n class=\"flex flex-col gap-4 p-sm\">\n <div class=\"flex justify-between text-10 text-word-3\">\n <span>\n {{\n $t('showForm.step', {\n current: currentStepIndex + 1,\n total: steps.length,\n })\n }}\n </span>\n <span>{{ progress }}%</span>\n </div>\n <div class=\"h-4 bg-surface-3 rounded-full overflow-hidden\">\n <div\n class=\"h-full bg-word-4 transition-all duration-300\"\n :style=\"{ width: `${progress}%` }\"></div>\n </div>\n </div>\n </div>\n\n <!-- Input Available State -->\n <template v-if=\"isInteractive\">\n <!-- Current Step Content -->\n <div class=\"px-sm py-16 flex flex-col gap-12\">\n <div class=\"leading-normal text-12\">\n <strong class=\"font-semibold\">\n {{ currentStep.question }}\n </strong>\n <PkStreamingMarkdown\n v-if=\"currentStep.message\"\n :markdown=\"currentStep.message\"\n class=\"text-word-2 mt-4\" />\n </div>\n\n <!-- Checkbox list for multi-select -->\n <PkEditorCheckboxButtons\n v-if=\"currentStep.options && currentStep.multiSelect\"\n v-model=\"activeCheckboxValue\"\n :name=\"currentStep.id\"\n :options=\"radioOptions\"\n :readonly=\"!isInteractive\"\n class=\"mb-0\"\n vertical>\n <template\n v-for=\"option in radioOptions\"\n :key=\"option.value\"\n #[option.value]>\n <!-- Shared option layout: label + optional description -->\n <div class=\"text-12\">\n <div class=\"font-semibold\">{{ option.label }}</div>\n <div v-if=\"option.description\" class=\"text-word-3\">\n {{ option.description }}\n </div>\n </div>\n </template>\n </PkEditorCheckboxButtons>\n\n <!-- Radio buttons for single-select -->\n <PkEditorRadioButtons\n v-else-if=\"currentStep.options && !currentStep.multiSelect\"\n v-model=\"scalarValue\"\n :name=\"currentStep.id\"\n :options=\"radioOptions\"\n :readonly=\"!isInteractive\"\n vertical\n class=\"mb-0\"\n @update:model-value=\"onRadioChange\">\n <template\n v-for=\"option in radioOptions\"\n :key=\"option.value\"\n #[option.value]>\n <!-- Shared option layout: label + optional description -->\n <div class=\"text-12\">\n <div class=\"font-semibold\">{{ option.label }}</div>\n <div v-if=\"option.description\" class=\"text-word-3\">\n {{ option.description }}\n </div>\n </div>\n </template>\n </PkEditorRadioButtons>\n\n <!-- Pure Freeform Input (text, number, date) -->\n <div\n v-else-if=\"!currentStep.options\"\n class=\"flex flex-col gap-6 w-full\">\n <VvInputText\n :key=\"currentStep.id\"\n v-model=\"scalarValue\"\n :placeholder=\"\n currentStep.placeholder \|\| $t('placeholder.insert')\n \"\n :type=\"currentStep.type\"\n class=\"w-full\"\n :name=\"currentStep.id\"\n modifiers=\"compact rounded\"\n :disabled=\"!isInteractive\"\n @keyup.enter=\"goNext\" />\n </div>\n </div>\n\n <!-- Custom footer freeform input (shown alongside options when allowFreeformInput) -->\n <div\n v-if=\"currentStep.allowFreeformInput && currentStep.options\"\n class=\"px-sm pb-sm border-t border-surface-3\">\n <form\n class=\"flex gap-xs pt-sm\"\n @submit.prevent=\"submitCustomAnswer\">\n <VvInputText\n :key=\"`${currentStep.id}-custom`\"\n v-model=\"customAnswer\"\n class=\"flex-1\"\n :name=\"`${currentStep.id}-custom`\"\n modifiers=\"compact rounded\"\n :disabled=\"!isInteractive\"\n :placeholder=\"\n currentStep.placeholder \|\|\n $t('showForm.otherPlaceholder')\n \" />\n </form>\n </div>\n\n <!-- Footer navigation: shown for every step that does not submit\n itself on option pick (see `isSelfSubmitting`). -->\n <div\n v-if=\"!isSelfSubmitting\"\n class=\"px-sm py-10 bg-surface border-t border-surface-3 flex justify-between gap-12\">\n <VvButton\n v-if=\"canGoBack\"\n modifiers=\"action-quiet\"\n icon=\"ri:arrow-left-s-line\"\n :label=\"$t('action.back')\"\n @click.stop=\"goBack\" />\n <div v-else></div>\n\n <VvButton\n :modifiers=\"canGoNext ? 'action-quiet' : 'action-primary'\"\n :icon=\"\n canGoNext\n ? 'ri:arrow-right-s-line'\n : 'ri:send-plane-2-line'\n \"\n icon-position=\"right\"\n :label=\"canGoNext ? $t('action.next') : $t('action.submit')\"\n @click.stop=\"goNext\" />\n </div>\n </template>\n\n <!-- Output Available State (Multi-step Summary) -->\n <template v-else>\n <div class=\"px-sm py-12 bg-surface space-y-10\">\n <ul class=\"flex flex-col gap-8\">\n <li\n v-for=\"step in steps\"\n :key=\"step.id\"\n class=\"leading-normal\">\n <div class=\"text-12 text-word-3\">\n {{ step.question }}\n </div>\n <span class=\"text-12 text-word-2 font-semibold\">\n {{ getSummaryValue(step) }}\n </span>\n </li>\n </ul>\n </div>\n <div\n class=\"px-sm py-12 bg-surface border-t border-surface-3 flex items-center gap-10\">\n <div\n class=\"w-20 h-20 rounded-full border border-success text-success flex items-center justify-center\">\n <VvIcon name=\"ri:check-line\" class=\"text-12\" />\n </div>\n <div class=\"flex flex-col\">\n <span\n class=\"font-semibold text-12 text-word-1 leading-tight\">\n {{ $t('showForm.completed') }}\n </span>\n </div>\n </div>\n </template>\n </div>\n</template>\n","<script setup lang=\"ts\">\n import { computed, ref, reactive, watch } from 'vue'\n import { useI18n } from 'vue-i18n'\n import { isVoiceRenderAck } from 'models'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n import PkEditorRadioButtons from '../PkEditorRadioButtons.vue'\n import PkEditorCheckboxButtons from '../PkEditorCheckboxButtons.vue'\n\n // --- Types ---\n\n interface FormOption {\n label: string\n description?: string\n }\n\n interface FormStep {\n id: string\n question: string\n message?: string\n type?: 'text' \| 'number' \| 'date'\n options?: FormOption[]\n multiSelect?: boolean\n allowFreeformInput?: boolean\n placeholder?: string\n }\n\n interface FormAnswer {\n id: string\n value: string \| string[] \| number \| null\n }\n\n interface ToolPartShape {\n state?: 'input-available' \| 'output-available'\n toolCallId?: string\n // AI SDK v5 encodes the tool name in `type` (e.g. 'tool-showMultipleChoice').\n // `toolName` is kept for backward compatibility but is normally absent.\n type?: string\n toolName?: string\n input?: {\n title?: string\n steps?: FormStep[]\n // Legacy showMultipleChoice fields\n question?: string\n options?: (string \| FormOption)[]\n }\n // The web card submits `{ answers: [...] }`; the platform channels\n // (Teams modal) submit a flat record keyed by step id.\n output?: string \| { answers: FormAnswer[] } \| Record<string, unknown>\n }\n\n type AnswerValue = string \| string[] \| number \| null\n\n // --- Props & Emits ---\n\n const props = defineProps<{\n part: unknown\n allowCustomAnswer?: boolean\n /\n Answered during a call. Nothing in the part says so (the answer went\n * to the agent as speech, not to the tool call), so the surface that\n * sent it is the only one that knows, and without it the same form\n * could be submitted again and again.\n /\n answered?: boolean\n }>()\n\n const emit = defineEmits<{\n select: [answer: string \| { answers: FormAnswer[] }]\n }>()\n\n const { t: $t, d: $d } = useI18n({ useScope: 'global' })\n\n // --- Parsed tool part ---\n\n const toolPart = computed(\n () => JSON.parse(JSON.stringify(props.part)) as ToolPartShape,\n )\n\n const isLegacy = computed(\n () =>\n toolPart.value.toolName === 'showMultipleChoice' \|\|\n toolPart.value.type === 'tool-showMultipleChoice',\n )\n\n /\n A form drawn during a CALL is already \"answered\" as far as the tool loop\n * is concerned: the turn could not wait for it, so the backend closed it\n * with a note saying the widget was drawn (see `isVoiceRenderAck`). That\n * note is not an answer, and the caller still has to give one.\n /\n const isRenderAck = computed(() => isVoiceRenderAck(toolPart.value.output))\n\n const isInteractive = computed(\n () =>\n !props.answered &&\n (toolPart.value.state === 'input-available' \|\| isRenderAck.value),\n )\n\n /* Single-step with no custom-answer and no freeform → auto-submit on option pick /\n const isAutoSubmitStep = computed(() => {\n const step = currentStep.value\n if (!step) return false\n return (\n steps.value.length === 1 &&\n !step.allowFreeformInput &&\n !props.allowCustomAnswer\n )\n })\n\n /* Legacy tool should auto-submit on option pick regardless of allowCustomAnswer /\n const isLegacyAutoSubmit = computed(\n () =>\n isLegacy.value &&\n steps.value.length === 1 &&\n !currentStep.value?.multiSelect,\n )\n\n /\n True only for the steps that send themselves as soon as an option is\n * picked: the single case where the footer button would be redundant.\n * Every other shape needs it, single-step forms included: with\n * `allowFreeformInput` (or `allowCustomAnswer`) the radio pick no longer\n * auto-submits, so without the footer the user was left with a chosen\n * option and no way to send it.\n /\n const isSelfSubmitting = computed(\n () =>\n Boolean(currentStep.value?.options) &&\n !currentStep.value?.multiSelect &&\n (isAutoSubmitStep.value \|\| isLegacyAutoSubmit.value),\n )\n\n // --- Steps ---\n\n const steps = computed<FormStep[]>(() => {\n const input = toolPart.value.input\n if (input?.steps?.length) {\n return input.steps\n }\n // Legacy showMultipleChoice → normalize into a single step\n if (input?.question && input?.options) {\n return [\n {\n id: 'legacy',\n question: input.question,\n options: input.options.map((o) =>\n typeof o === 'string' ? { label: o } : o,\n ),\n },\n ]\n }\n return []\n })\n\n // --- Navigation state ---\n\n const currentStepIndex = ref(0)\n const currentStep = computed(() => steps.value[currentStepIndex.value])\n const canGoBack = computed(() => currentStepIndex.value > 0)\n const canGoNext = computed(\n () => currentStepIndex.value < steps.value.length - 1,\n )\n const isMultiStep = computed(() => steps.value.length > 1)\n\n const progress = computed(() => {\n if (!isMultiStep.value) return null\n return Math.round(\n ((currentStepIndex.value + 1) / steps.value.length) 100,\n )\n })\n\n // --- Answers ---\n\n const answers = reactive<Record<string, AnswerValue>>({})\n const customAnswer = ref('')\n\n // The freeform field belongs to the step showing it: text left behind\n // (unsubmitted, or arriving from a late input update) must not follow the\n // user to the next or previous question.\n watch(currentStepIndex, () => {\n customAnswer.value = ''\n })\n\n // Single scalar answer shared by radio buttons and freeform text/number/date inputs.\n const scalarValue = computed<string \| number \| undefined>({\n get: () => {\n const val = currentStep.value\n ? answers[currentStep.value.id]\n : undefined\n if (val == null \|\| Array.isArray(val)) return undefined\n return val\n },\n set: (val) => {\n if (currentStep.value) {\n answers[currentStep.value.id] = val ?? null\n }\n },\n })\n\n const activeCheckboxValue = computed<unknown[] \| undefined>({\n get: () => {\n const val = currentStep.value\n ? answers[currentStep.value.id]\n : undefined\n return Array.isArray(val) ? val : []\n },\n set: (val) => {\n if (currentStep.value) {\n answers[currentStep.value.id] = (val as string[]) ?? []\n }\n },\n })\n\n // --- Initialize answers from existing output ---\n\n /** The `{ answers: [...] }` list, when the output carries one. /\n function outputAnswers(output: ToolPartShape['output']) {\n if (!output \|\| typeof output === 'string') return undefined\n const list = (output as { answers?: unknown }).answers\n return Array.isArray(list) ? (list as FormAnswer[]) : undefined\n }\n\n watch(\n () => toolPart.value.output,\n (output) => {\n if (!output \|\| isVoiceRenderAck(output)) return\n if (typeof output === 'string') {\n if (steps.value.length === 1) {\n answers[steps.value[0].id] = output\n }\n return\n }\n const list = outputAnswers(output)\n if (list) {\n for (const a of list) {\n answers[a.id] = a.value\n }\n return\n }\n // Forms answered on a platform channel come back as a flat record\n // keyed by step id: without this the read-only summary showed every\n // answer as a placeholder.\n const record = output as Record<string, unknown>\n for (const step of steps.value) {\n const value = record[step.id]\n if (value !== undefined) {\n answers[step.id] = value as AnswerValue\n }\n }\n },\n { immediate: true },\n )\n\n // --- Restore custom answer from output when it doesn't match any option ---\n\n const normalizedOutput = computed(() => {\n const out = toolPart.value.output\n if (!out \|\| isVoiceRenderAck(out)) return undefined\n if (typeof out === 'string') return out\n const list = outputAnswers(out)\n if (list?.length === 1) {\n const val = list[0].value\n return Array.isArray(val) ? val.join(', ') : String(val)\n }\n return undefined\n })\n\n watch(\n normalizedOutput,\n (value) => {\n if (!value \|\| !currentStep.value) return\n const optionLabels = (currentStep.value.options ?? []).map(\n (o) => o.label,\n )\n if (!optionLabels.includes(value)) {\n customAnswer.value = value\n }\n },\n { immediate: true },\n )\n\n // --- Option mapping for radio/checkbox components ---\n\n const radioOptions = computed(() => {\n if (!currentStep.value?.options) return []\n return currentStep.value.options.map((option) => ({\n label: option.label,\n value: option.label,\n description: option.description,\n }))\n })\n\n // --- Navigation & Submission ---\n\n /* Footer button, and Enter on a pure freeform step. /\n function goNext() {\n // A typed freeform answer wins over the picked option: it is the more\n // recent intent, and the footer button is now the visible way to send\n // it (the freeform field only submits on Enter).\n if (customAnswer.value.trim()) {\n submitCustomAnswer()\n return\n }\n if (canGoNext.value) {\n currentStepIndex.value++\n } else {\n submitForm()\n }\n }\n\n function goBack() {\n if (canGoBack.value) {\n currentStepIndex.value--\n }\n }\n\n function submitForm() {\n if (!isInteractive.value) return\n\n const finalAnswers: FormAnswer[] = steps.value.map((step) => ({\n id: step.id,\n value: answers[step.id] ?? null,\n }))\n\n // Legacy backward compatibility: single-step, single-select → return plain string\n if (\n isLegacyAutoSubmit.value &&\n !currentStep.value?.allowFreeformInput\n ) {\n const val = finalAnswers[0].value\n emit('select', Array.isArray(val) ? val[0] : (val as string))\n } else {\n emit('select', { answers: finalAnswers })\n }\n }\n\n /* Enter inside the freeform field shown alongside the options. */\n function submitCustomAnswer() {\n const value = customAnswer.value.trim()\n if (!value) return\n\n answers[currentStep.value.id] = value\n // Cleared before navigating: `goNext()` reads it back to route a typed\n // answer here, so leaving it set would recurse.\n customAnswer.value = ''\n if (steps.value.length === 1) {\n submitForm()\n } else {\n goNext()\n }\n }\n\n function onRadioChange() {\n if (!isInteractive.value) return\n if (isAutoSubmitStep.value \|\| isLegacyAutoSubmit.value) {\n submitForm()\n }\n }\n\n // --- Summary helpers ---\n\n function getSummaryValue(step: FormStep) {\n const val = answers[step.id]\n if (val == null) return '—'\n if (Array.isArray(val)) return val.join(', ')\n if (step.type === 'date') return $d(new Date(val), 'short')\n return val\n }\n</script>\n\n<template>\n <div\n v-if=\"steps.length\"\n class=\"border border-surface-3 rounded-xl w-full overflow-hidden flex flex-col transition-all bg-surface\">\n <!-- Header -->\n <div\n v-if=\"toolPart.input?.title \|\| (isInteractive && steps.length > 1)\"\n class=\"text-12 border-b border-surface-3 text-word-3 bg-surface-1\">\n <div\n v-if=\"toolPart.input?.title\"\n class=\"px-sm py-10 font-bold\"\n :class=\"{\n 'border-b border-surface-3':\n isInteractive && steps.length > 1,\n }\">\n {{ toolPart.input?.title }}\n </div>\n <!-- Progress for multi-step -->\n <div\n v-if=\"isInteractive && steps.length > 1\"\n class=\"flex flex-col gap-4 p-sm\">\n <div class=\"flex justify-between text-10 text-word-3\">\n <span>\n {{\n $t('showForm.step', {\n current: currentStepIndex + 1,\n total: steps.length,\n })\n }}\n </span>\n <span>{{ progress }}%</span>\n </div>\n <div class=\"h-4 bg-surface-3 rounded-full overflow-hidden\">\n <div\n class=\"h-full bg-word-4 transition-all duration-300\"\n :style=\"{ width: `${progress}%` }\"></div>\n </div>\n </div>\n </div>\n\n <!-- Input Available State -->\n <template v-if=\"isInteractive\">\n <!-- Current Step Content -->\n <div class=\"px-sm py-16 flex flex-col gap-12\">\n <div class=\"leading-normal text-12\">\n <strong class=\"font-semibold\">\n {{ currentStep.question }}\n </strong>\n <PkStreamingMarkdown\n v-if=\"currentStep.message\"\n :markdown=\"currentStep.message\"\n class=\"text-word-2 mt-4\" />\n </div>\n\n <!-- Checkbox list for multi-select -->\n <PkEditorCheckboxButtons\n v-if=\"currentStep.options && currentStep.multiSelect\"\n v-model=\"activeCheckboxValue\"\n :name=\"currentStep.id\"\n :options=\"radioOptions\"\n :readonly=\"!isInteractive\"\n class=\"mb-0\"\n vertical>\n <template\n v-for=\"option in radioOptions\"\n :key=\"option.value\"\n #[option.value]>\n <!-- Shared option layout: label + optional description -->\n <div class=\"text-12\">\n <div class=\"font-semibold\">{{ option.label }}</div>\n <div v-if=\"option.description\" class=\"text-word-3\">\n {{ option.description }}\n </div>\n </div>\n </template>\n </PkEditorCheckboxButtons>\n\n <!-- Radio buttons for single-select -->\n <PkEditorRadioButtons\n v-else-if=\"currentStep.options && !currentStep.multiSelect\"\n v-model=\"scalarValue\"\n :name=\"currentStep.id\"\n :options=\"radioOptions\"\n :readonly=\"!isInteractive\"\n vertical\n class=\"mb-0\"\n @update:model-value=\"onRadioChange\">\n <template\n v-for=\"option in radioOptions\"\n :key=\"option.value\"\n #[option.value]>\n <!-- Shared option layout: label + optional description -->\n <div class=\"text-12\">\n <div class=\"font-semibold\">{{ option.label }}</div>\n <div v-if=\"option.description\" class=\"text-word-3\">\n {{ option.description }}\n </div>\n </div>\n </template>\n </PkEditorRadioButtons>\n\n <!-- Pure Freeform Input (text, number, date) -->\n <div\n v-else-if=\"!currentStep.options\"\n class=\"flex flex-col gap-6 w-full\">\n <VvInputText\n :key=\"currentStep.id\"\n v-model=\"scalarValue\"\n :placeholder=\"\n currentStep.placeholder \|\| $t('placeholder.insert')\n \"\n :type=\"currentStep.type\"\n class=\"w-full\"\n :name=\"currentStep.id\"\n modifiers=\"compact rounded\"\n :disabled=\"!isInteractive\"\n @keyup.enter=\"goNext\" />\n </div>\n </div>\n\n <!-- Custom footer freeform input (shown alongside options when allowFreeformInput) -->\n <div\n v-if=\"currentStep.allowFreeformInput && currentStep.options\"\n class=\"px-sm pb-sm border-t border-surface-3\">\n <form\n class=\"flex gap-xs pt-sm\"\n @submit.prevent=\"submitCustomAnswer\">\n <VvInputText\n :key=\"`${currentStep.id}-custom`\"\n v-model=\"customAnswer\"\n class=\"flex-1\"\n :name=\"`${currentStep.id}-custom`\"\n modifiers=\"compact rounded\"\n :disabled=\"!isInteractive\"\n :placeholder=\"\n currentStep.placeholder \|\|\n $t('showForm.otherPlaceholder')\n \" />\n </form>\n </div>\n\n <!-- Footer navigation: shown for every step that does not submit\n itself on option pick (see `isSelfSubmitting`). -->\n <div\n v-if=\"!isSelfSubmitting\"\n class=\"px-sm py-10 bg-surface border-t border-surface-3 flex justify-between gap-12\">\n <VvButton\n v-if=\"canGoBack\"\n modifiers=\"action-quiet\"\n icon=\"ri:arrow-left-s-line\"\n :label=\"$t('action.back')\"\n @click.stop=\"goBack\" />\n <div v-else></div>\n\n <VvButton\n :modifiers=\"canGoNext ? 'action-quiet' : 'action-primary'\"\n :icon=\"\n canGoNext\n ? 'ri:arrow-right-s-line'\n : 'ri:send-plane-2-line'\n \"\n icon-position=\"right\"\n :label=\"canGoNext ? $t('action.next') : $t('action.submit')\"\n @click.stop=\"goNext\" />\n </div>\n </template>\n\n <!-- Output Available State (Multi-step Summary) -->\n <template v-else>\n <div class=\"px-sm py-12 bg-surface space-y-10\">\n <ul class=\"flex flex-col gap-8\">\n <li\n v-for=\"step in steps\"\n :key=\"step.id\"\n class=\"leading-normal\">\n <div class=\"text-12 text-word-3\">\n {{ step.question }}\n </div>\n <span class=\"text-12 text-word-2 font-semibold\">\n {{ getSummaryValue(step) }}\n </span>\n </li>\n </ul>\n </div>\n <div\n class=\"px-sm py-12 bg-surface border-t border-surface-3 flex items-center gap-10\">\n <div\n class=\"w-20 h-20 rounded-full border border-success text-success flex items-center justify-center\">\n <VvIcon name=\"ri:check-line\" class=\"text-12\" />\n </div>\n <div class=\"flex flex-col\">\n <span\n class=\"font-semibold text-12 text-word-1 leading-tight\">\n {{ $t('showForm.completed') }}\n </span>\n </div>\n </div>\n </template>\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"PkToolShowForm-CzIfm5de.js","names":[],"sources":["../../../../packages/components/src/PkEditorRadioButtons.vue","../../../../packages/components/src/PkEditorRadioButtons.vue","../../../../packages/components/src/PkEditorCheckboxButtons.vue","../../../../packages/components/src/PkEditorCheckboxButtons.vue","../../../../packages/components/src/chat/PkToolShowForm.vue","../../../../packages/components/src/chat/PkToolShowForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import type { Option } from '@volverjs/ui-vue'\n import { computed } from 'vue'\n\n const props = defineProps<{\n name: string\n required?: boolean\n options: Option[]\n readonly?: boolean\n disabled?: boolean\n modifiers?: string \| string[]\n }>()\n\n const modelValue = defineModel<\n string \| number \| boolean \| symbol \| unknown[] \| undefined\n >()\n\n const radioModifiers = computed(() => {\n const toReturn = props.modifiers\n ? Array.isArray(props.modifiers)\n ? props.modifiers\n : [props.modifiers]\n : []\n return [...toReturn, 'button']\n })\n</script>\n\n<template>\n <VvRadioGroup v-model=\"modelValue\" :name modifiers=\"buttons\">\n <VvRadio\n v-for=\"(option, key) in options\"\n :key\n :name\n :required\n :readonly\n :disabled\n :value=\"option.value\"\n :modifiers=\"radioModifiers\">\n <slot :name=\"option.value\" v-bind=\"{ option }\">\n {{ option.label }}\n </slot>\n </VvRadio>\n </VvRadioGroup>\n</template>\n","<script setup lang=\"ts\">\n import type { Option } from '@volverjs/ui-vue'\n import { computed } from 'vue'\n\n const props = defineProps<{\n name: string\n required?: boolean\n options: Option[]\n readonly?: boolean\n disabled?: boolean\n modifiers?: string \| string[]\n }>()\n\n const modelValue = defineModel<\n string \| number \| boolean \| symbol \| unknown[] \| undefined\n >()\n\n const radioModifiers = computed(() => {\n const toReturn = props.modifiers\n ? Array.isArray(props.modifiers)\n ? props.modifiers\n : [props.modifiers]\n : []\n return [...toReturn, 'button']\n })\n</script>\n\n<template>\n <VvRadioGroup v-model=\"modelValue\" :name modifiers=\"buttons\">\n <VvRadio\n v-for=\"(option, key) in options\"\n :key\n :name\n :required\n :readonly\n :disabled\n :value=\"option.value\"\n :modifiers=\"radioModifiers\">\n <slot :name=\"option.value\" v-bind=\"{ option }\">\n {{ option.label }}\n </slot>\n </VvRadio>\n </VvRadioGroup>\n</template>\n","<script setup lang=\"ts\">\n import type { Option } from '@volverjs/ui-vue'\n\n defineProps<{\n name: string\n required?: boolean\n options: Option[]\n readonly?: boolean\n disabled?: boolean\n }>()\n\n const modelValue = defineModel<unknown[] \| undefined>()\n</script>\n\n<template>\n <VvCheckboxGroup v-model=\"modelValue\" :name modifiers=\"buttons\">\n <VvCheckbox\n v-for=\"(option, key) in options\"\n :key\n :name\n :required\n :readonly\n :disabled\n :value=\"option.value\"\n modifiers=\"button\">\n <slot :name=\"String(option.value)\" v-bind=\"{ option }\">\n {{ option.label }}\n </slot>\n </VvCheckbox>\n </VvCheckboxGroup>\n</template>\n","<script setup lang=\"ts\">\n import type { Option } from '@volverjs/ui-vue'\n\n defineProps<{\n name: string\n required?: boolean\n options: Option[]\n readonly?: boolean\n disabled?: boolean\n }>()\n\n const modelValue = defineModel<unknown[] \| undefined>()\n</script>\n\n<template>\n <VvCheckboxGroup v-model=\"modelValue\" :name modifiers=\"buttons\">\n <VvCheckbox\n v-for=\"(option, key) in options\"\n :key\n :name\n :required\n :readonly\n :disabled\n :value=\"option.value\"\n modifiers=\"button\">\n <slot :name=\"String(option.value)\" v-bind=\"{ option }\">\n {{ option.label }}\n </slot>\n </VvCheckbox>\n </VvCheckboxGroup>\n</template>\n","<script setup lang=\"ts\">\n import { computed, ref, reactive, watch } from 'vue'\n import { useI18n } from 'vue-i18n'\n import { isVoiceRenderAck } from 'models'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n import PkEditorRadioButtons from '../PkEditorRadioButtons.vue'\n import PkEditorCheckboxButtons from '../PkEditorCheckboxButtons.vue'\n\n // --- Types ---\n\n interface FormOption {\n label: string\n description?: string\n }\n\n interface FormStep {\n id: string\n question: string\n message?: string\n type?: 'text' \| 'number' \| 'date'\n options?: FormOption[]\n multiSelect?: boolean\n allowFreeformInput?: boolean\n placeholder?: string\n }\n\n interface FormAnswer {\n id: string\n value: string \| string[] \| number \| null\n }\n\n interface ToolPartShape {\n state?: 'input-available' \| 'output-available'\n toolCallId?: string\n // AI SDK v5 encodes the tool name in `type` (e.g. 'tool-showMultipleChoice').\n // `toolName` is kept for backward compatibility but is normally absent.\n type?: string\n toolName?: string\n input?: {\n title?: string\n steps?: FormStep[]\n // Legacy showMultipleChoice fields\n question?: string\n options?: (string \| FormOption)[]\n }\n // The web card submits `{ answers: [...] }`; the platform channels\n // (Teams modal) submit a flat record keyed by step id.\n output?: string \| { answers: FormAnswer[] } \| Record<string, unknown>\n }\n\n type AnswerValue = string \| string[] \| number \| null\n\n // --- Props & Emits ---\n\n const props = defineProps<{\n part: unknown\n allowCustomAnswer?: boolean\n /*\n Answered during a call. Nothing in the part says so (the answer went\n * to the agent as speech, not to the tool call), so the surface that\n * sent it is the only one that knows, and without it the same form\n * could be submitted again and again.\n /\n answered?: boolean\n }>()\n\n const emit = defineEmits<{\n select: [answer: string \| { answers: FormAnswer[] }]\n }>()\n\n const { t: $t, d: $d } = useI18n({ useScope: 'global' })\n\n // --- Parsed tool part ---\n\n const toolPart = computed(\n () => JSON.parse(JSON.stringify(props.part)) as ToolPartShape,\n )\n\n const isLegacy = computed(\n () =>\n toolPart.value.toolName === 'showMultipleChoice' \|\|\n toolPart.value.type === 'tool-showMultipleChoice',\n )\n\n /\n A form drawn during a CALL is already \"answered\" as far as the tool loop\n * is concerned: the turn could not wait for it, so the backend closed it\n * with a note saying the widget was drawn (see `isVoiceRenderAck`). That\n * note is not an answer, and the caller still has to give one.\n /\n const isRenderAck = computed(() => isVoiceRenderAck(toolPart.value.output))\n\n const isInteractive = computed(\n () =>\n !props.answered &&\n (toolPart.value.state === 'input-available' \|\| isRenderAck.value),\n )\n\n /* Single-step with no custom-answer and no freeform → auto-submit on option pick /\n const isAutoSubmitStep = computed(() => {\n const step = currentStep.value\n if (!step) return false\n return (\n steps.value.length === 1 &&\n !step.allowFreeformInput &&\n !props.allowCustomAnswer\n )\n })\n\n /* Legacy tool should auto-submit on option pick regardless of allowCustomAnswer /\n const isLegacyAutoSubmit = computed(\n () =>\n isLegacy.value &&\n steps.value.length === 1 &&\n !currentStep.value?.multiSelect,\n )\n\n /\n True only for the steps that send themselves as soon as an option is\n * picked: the single case where the footer button would be redundant.\n * Every other shape needs it, single-step forms included: with\n * `allowFreeformInput` (or `allowCustomAnswer`) the radio pick no longer\n * auto-submits, so without the footer the user was left with a chosen\n * option and no way to send it.\n /\n const isSelfSubmitting = computed(\n () =>\n Boolean(currentStep.value?.options) &&\n !currentStep.value?.multiSelect &&\n (isAutoSubmitStep.value \|\| isLegacyAutoSubmit.value),\n )\n\n // --- Steps ---\n\n const steps = computed<FormStep[]>(() => {\n const input = toolPart.value.input\n if (input?.steps?.length) {\n return input.steps\n }\n // Legacy showMultipleChoice → normalize into a single step\n if (input?.question && input?.options) {\n return [\n {\n id: 'legacy',\n question: input.question,\n options: input.options.map((o) =>\n typeof o === 'string' ? { label: o } : o,\n ),\n },\n ]\n }\n return []\n })\n\n // --- Navigation state ---\n\n const currentStepIndex = ref(0)\n const currentStep = computed(() => steps.value[currentStepIndex.value])\n const canGoBack = computed(() => currentStepIndex.value > 0)\n const canGoNext = computed(\n () => currentStepIndex.value < steps.value.length - 1,\n )\n const isMultiStep = computed(() => steps.value.length > 1)\n\n const progress = computed(() => {\n if (!isMultiStep.value) return null\n return Math.round(\n ((currentStepIndex.value + 1) / steps.value.length) 100,\n )\n })\n\n // --- Answers ---\n\n const answers = reactive<Record<string, AnswerValue>>({})\n const customAnswer = ref('')\n\n // The freeform field belongs to the step showing it: text left behind\n // (unsubmitted, or arriving from a late input update) must not follow the\n // user to the next or previous question.\n watch(currentStepIndex, () => {\n customAnswer.value = ''\n })\n\n // Single scalar answer shared by radio buttons and freeform text/number/date inputs.\n const scalarValue = computed<string \| number \| undefined>({\n get: () => {\n const val = currentStep.value\n ? answers[currentStep.value.id]\n : undefined\n if (val == null \|\| Array.isArray(val)) return undefined\n return val\n },\n set: (val) => {\n if (currentStep.value) {\n answers[currentStep.value.id] = val ?? null\n }\n },\n })\n\n const activeCheckboxValue = computed<unknown[] \| undefined>({\n get: () => {\n const val = currentStep.value\n ? answers[currentStep.value.id]\n : undefined\n return Array.isArray(val) ? val : []\n },\n set: (val) => {\n if (currentStep.value) {\n answers[currentStep.value.id] = (val as string[]) ?? []\n }\n },\n })\n\n // --- Initialize answers from existing output ---\n\n /** The `{ answers: [...] }` list, when the output carries one. /\n function outputAnswers(output: ToolPartShape['output']) {\n if (!output \|\| typeof output === 'string') return undefined\n const list = (output as { answers?: unknown }).answers\n return Array.isArray(list) ? (list as FormAnswer[]) : undefined\n }\n\n watch(\n () => toolPart.value.output,\n (output) => {\n if (!output \|\| isVoiceRenderAck(output)) return\n if (typeof output === 'string') {\n if (steps.value.length === 1) {\n answers[steps.value[0].id] = output\n }\n return\n }\n const list = outputAnswers(output)\n if (list) {\n for (const a of list) {\n answers[a.id] = a.value\n }\n return\n }\n // Forms answered on a platform channel come back as a flat record\n // keyed by step id: without this the read-only summary showed every\n // answer as a placeholder.\n const record = output as Record<string, unknown>\n for (const step of steps.value) {\n const value = record[step.id]\n if (value !== undefined) {\n answers[step.id] = value as AnswerValue\n }\n }\n },\n { immediate: true },\n )\n\n // --- Restore custom answer from output when it doesn't match any option ---\n\n const normalizedOutput = computed(() => {\n const out = toolPart.value.output\n if (!out \|\| isVoiceRenderAck(out)) return undefined\n if (typeof out === 'string') return out\n const list = outputAnswers(out)\n if (list?.length === 1) {\n const val = list[0].value\n return Array.isArray(val) ? val.join(', ') : String(val)\n }\n return undefined\n })\n\n watch(\n normalizedOutput,\n (value) => {\n if (!value \|\| !currentStep.value) return\n const optionLabels = (currentStep.value.options ?? []).map(\n (o) => o.label,\n )\n if (!optionLabels.includes(value)) {\n customAnswer.value = value\n }\n },\n { immediate: true },\n )\n\n // --- Option mapping for radio/checkbox components ---\n\n const radioOptions = computed(() => {\n if (!currentStep.value?.options) return []\n return currentStep.value.options.map((option) => ({\n label: option.label,\n value: option.label,\n description: option.description,\n }))\n })\n\n // --- Navigation & Submission ---\n\n /* Footer button, and Enter on a pure freeform step. /\n function goNext() {\n // A typed freeform answer wins over the picked option: it is the more\n // recent intent, and the footer button is now the visible way to send\n // it (the freeform field only submits on Enter).\n if (customAnswer.value.trim()) {\n submitCustomAnswer()\n return\n }\n if (canGoNext.value) {\n currentStepIndex.value++\n } else {\n submitForm()\n }\n }\n\n function goBack() {\n if (canGoBack.value) {\n currentStepIndex.value--\n }\n }\n\n function submitForm() {\n if (!isInteractive.value) return\n\n const finalAnswers: FormAnswer[] = steps.value.map((step) => ({\n id: step.id,\n value: answers[step.id] ?? null,\n }))\n\n // Legacy backward compatibility: single-step, single-select → return plain string\n if (\n isLegacyAutoSubmit.value &&\n !currentStep.value?.allowFreeformInput\n ) {\n const val = finalAnswers[0].value\n emit('select', Array.isArray(val) ? val[0] : (val as string))\n } else {\n emit('select', { answers: finalAnswers })\n }\n }\n\n /* Enter inside the freeform field shown alongside the options. /\n function submitCustomAnswer() {\n const value = customAnswer.value.trim()\n if (!value) return\n\n answers[currentStep.value.id] = value\n // Cleared before navigating: `goNext()` reads it back to route a typed\n // answer here, so leaving it set would recurse.\n customAnswer.value = ''\n if (steps.value.length === 1) {\n submitForm()\n } else {\n goNext()\n }\n }\n\n function onRadioChange() {\n if (!isInteractive.value) return\n if (isAutoSubmitStep.value \|\| isLegacyAutoSubmit.value) {\n submitForm()\n }\n }\n\n // --- Summary helpers ---\n\n function getSummaryValue(step: FormStep) {\n const val = answers[step.id]\n if (val == null) return '—'\n if (Array.isArray(val)) return val.join(', ')\n if (step.type === 'date') return $d(new Date(val), 'short')\n return val\n }\n</script>\n\n<template>\n <div\n v-if=\"steps.length\"\n class=\"border border-surface-3 rounded-xl w-full overflow-hidden flex flex-col transition-all bg-surface\">\n <!-- Header -->\n <div\n v-if=\"toolPart.input?.title \|\| (isInteractive && steps.length > 1)\"\n class=\"text-12 border-b border-surface-3 text-word-3 bg-surface-1\">\n <div\n v-if=\"toolPart.input?.title\"\n class=\"px-sm py-10 font-bold\"\n :class=\"{\n 'border-b border-surface-3':\n isInteractive && steps.length > 1,\n }\">\n {{ toolPart.input?.title }}\n </div>\n <!-- Progress for multi-step -->\n <div\n v-if=\"isInteractive && steps.length > 1\"\n class=\"flex flex-col gap-4 p-sm\">\n <div class=\"flex justify-between text-10 text-word-3\">\n <span>\n {{\n $t('showForm.step', {\n current: currentStepIndex + 1,\n total: steps.length,\n })\n }}\n </span>\n <span>{{ progress }}%</span>\n </div>\n <div class=\"h-4 bg-surface-3 rounded-full overflow-hidden\">\n <div\n class=\"h-full bg-word-4 transition-all duration-300\"\n :style=\"{ width: `${progress}%` }\"></div>\n </div>\n </div>\n </div>\n\n <!-- Input Available State -->\n <template v-if=\"isInteractive\">\n <!-- Current Step Content -->\n <div class=\"px-sm py-16 flex flex-col gap-12\">\n <div class=\"leading-normal text-12\">\n <strong class=\"font-semibold\">\n {{ currentStep.question }}\n </strong>\n <PkStreamingMarkdown\n v-if=\"currentStep.message\"\n :markdown=\"currentStep.message\"\n class=\"text-word-2 mt-4\" />\n </div>\n\n <!-- Checkbox list for multi-select -->\n <PkEditorCheckboxButtons\n v-if=\"currentStep.options && currentStep.multiSelect\"\n v-model=\"activeCheckboxValue\"\n :name=\"currentStep.id\"\n :options=\"radioOptions\"\n :readonly=\"!isInteractive\"\n class=\"mb-0\"\n vertical>\n <template\n v-for=\"option in radioOptions\"\n :key=\"option.value\"\n #[option.value]>\n <!-- Shared option layout: label + optional description -->\n <div class=\"text-12\">\n <div class=\"font-semibold\">{{ option.label }}</div>\n <div v-if=\"option.description\" class=\"text-word-3\">\n {{ option.description }}\n </div>\n </div>\n </template>\n </PkEditorCheckboxButtons>\n\n <!-- Radio buttons for single-select -->\n <PkEditorRadioButtons\n v-else-if=\"currentStep.options && !currentStep.multiSelect\"\n v-model=\"scalarValue\"\n :name=\"currentStep.id\"\n :options=\"radioOptions\"\n :readonly=\"!isInteractive\"\n vertical\n class=\"mb-0\"\n @update:model-value=\"onRadioChange\">\n <template\n v-for=\"option in radioOptions\"\n :key=\"option.value\"\n #[option.value]>\n <!-- Shared option layout: label + optional description -->\n <div class=\"text-12\">\n <div class=\"font-semibold\">{{ option.label }}</div>\n <div v-if=\"option.description\" class=\"text-word-3\">\n {{ option.description }}\n </div>\n </div>\n </template>\n </PkEditorRadioButtons>\n\n <!-- Pure Freeform Input (text, number, date) -->\n <div\n v-else-if=\"!currentStep.options\"\n class=\"flex flex-col gap-6 w-full\">\n <VvInputText\n :key=\"currentStep.id\"\n v-model=\"scalarValue\"\n :placeholder=\"\n currentStep.placeholder \|\| $t('placeholder.insert')\n \"\n :type=\"currentStep.type\"\n class=\"w-full\"\n :name=\"currentStep.id\"\n modifiers=\"compact rounded\"\n :disabled=\"!isInteractive\"\n @keyup.enter=\"goNext\" />\n </div>\n </div>\n\n <!-- Custom footer freeform input (shown alongside options when allowFreeformInput) -->\n <div\n v-if=\"currentStep.allowFreeformInput && currentStep.options\"\n class=\"px-sm pb-sm border-t border-surface-3\">\n <form\n class=\"flex gap-xs pt-sm\"\n @submit.prevent=\"submitCustomAnswer\">\n <VvInputText\n :key=\"`${currentStep.id}-custom`\"\n v-model=\"customAnswer\"\n class=\"flex-1\"\n :name=\"`${currentStep.id}-custom`\"\n modifiers=\"compact rounded\"\n :disabled=\"!isInteractive\"\n :placeholder=\"\n currentStep.placeholder \|\|\n $t('showForm.otherPlaceholder')\n \" />\n </form>\n </div>\n\n <!-- Footer navigation: shown for every step that does not submit\n itself on option pick (see `isSelfSubmitting`). -->\n <div\n v-if=\"!isSelfSubmitting\"\n class=\"px-sm py-10 bg-surface border-t border-surface-3 flex justify-between gap-12\">\n <VvButton\n v-if=\"canGoBack\"\n modifiers=\"action-quiet\"\n icon=\"ri:arrow-left-s-line\"\n :label=\"$t('action.back')\"\n @click.stop=\"goBack\" />\n <div v-else></div>\n\n <VvButton\n :modifiers=\"canGoNext ? 'action-quiet' : 'action-primary'\"\n :icon=\"\n canGoNext\n ? 'ri:arrow-right-s-line'\n : 'ri:send-plane-2-line'\n \"\n icon-position=\"right\"\n :label=\"canGoNext ? $t('action.next') : $t('action.submit')\"\n @click.stop=\"goNext\" />\n </div>\n </template>\n\n <!-- Output Available State (Multi-step Summary) -->\n <template v-else>\n <div class=\"px-sm py-12 bg-surface space-y-10\">\n <ul class=\"flex flex-col gap-8\">\n <li\n v-for=\"step in steps\"\n :key=\"step.id\"\n class=\"leading-normal\">\n <div class=\"text-12 text-word-3\">\n {{ step.question }}\n </div>\n <span class=\"text-12 text-word-2 font-semibold\">\n {{ getSummaryValue(step) }}\n </span>\n </li>\n </ul>\n </div>\n <div\n class=\"px-sm py-12 bg-surface border-t border-surface-3 flex items-center gap-10\">\n <div\n class=\"w-20 h-20 rounded-full border border-success text-success flex items-center justify-center\">\n <VvIcon name=\"ri:check-line\" class=\"text-12\" />\n </div>\n <div class=\"flex flex-col\">\n <span\n class=\"font-semibold text-12 text-word-1 leading-tight\">\n {{ $t('showForm.completed') }}\n </span>\n </div>\n </div>\n </template>\n </div>\n</template>\n","<script setup lang=\"ts\">\n import { computed, ref, reactive, watch } from 'vue'\n import { useI18n } from 'vue-i18n'\n import { isVoiceRenderAck } from 'models'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n import PkEditorRadioButtons from '../PkEditorRadioButtons.vue'\n import PkEditorCheckboxButtons from '../PkEditorCheckboxButtons.vue'\n\n // --- Types ---\n\n interface FormOption {\n label: string\n description?: string\n }\n\n interface FormStep {\n id: string\n question: string\n message?: string\n type?: 'text' \| 'number' \| 'date'\n options?: FormOption[]\n multiSelect?: boolean\n allowFreeformInput?: boolean\n placeholder?: string\n }\n\n interface FormAnswer {\n id: string\n value: string \| string[] \| number \| null\n }\n\n interface ToolPartShape {\n state?: 'input-available' \| 'output-available'\n toolCallId?: string\n // AI SDK v5 encodes the tool name in `type` (e.g. 'tool-showMultipleChoice').\n // `toolName` is kept for backward compatibility but is normally absent.\n type?: string\n toolName?: string\n input?: {\n title?: string\n steps?: FormStep[]\n // Legacy showMultipleChoice fields\n question?: string\n options?: (string \| FormOption)[]\n }\n // The web card submits `{ answers: [...] }`; the platform channels\n // (Teams modal) submit a flat record keyed by step id.\n output?: string \| { answers: FormAnswer[] } \| Record<string, unknown>\n }\n\n type AnswerValue = string \| string[] \| number \| null\n\n // --- Props & Emits ---\n\n const props = defineProps<{\n part: unknown\n allowCustomAnswer?: boolean\n /\n Answered during a call. Nothing in the part says so (the answer went\n * to the agent as speech, not to the tool call), so the surface that\n * sent it is the only one that knows, and without it the same form\n * could be submitted again and again.\n /\n answered?: boolean\n }>()\n\n const emit = defineEmits<{\n select: [answer: string \| { answers: FormAnswer[] }]\n }>()\n\n const { t: $t, d: $d } = useI18n({ useScope: 'global' })\n\n // --- Parsed tool part ---\n\n const toolPart = computed(\n () => JSON.parse(JSON.stringify(props.part)) as ToolPartShape,\n )\n\n const isLegacy = computed(\n () =>\n toolPart.value.toolName === 'showMultipleChoice' \|\|\n toolPart.value.type === 'tool-showMultipleChoice',\n )\n\n /\n A form drawn during a CALL is already \"answered\" as far as the tool loop\n * is concerned: the turn could not wait for it, so the backend closed it\n * with a note saying the widget was drawn (see `isVoiceRenderAck`). That\n * note is not an answer, and the caller still has to give one.\n /\n const isRenderAck = computed(() => isVoiceRenderAck(toolPart.value.output))\n\n const isInteractive = computed(\n () =>\n !props.answered &&\n (toolPart.value.state === 'input-available' \|\| isRenderAck.value),\n )\n\n /* Single-step with no custom-answer and no freeform → auto-submit on option pick /\n const isAutoSubmitStep = computed(() => {\n const step = currentStep.value\n if (!step) return false\n return (\n steps.value.length === 1 &&\n !step.allowFreeformInput &&\n !props.allowCustomAnswer\n )\n })\n\n /* Legacy tool should auto-submit on option pick regardless of allowCustomAnswer /\n const isLegacyAutoSubmit = computed(\n () =>\n isLegacy.value &&\n steps.value.length === 1 &&\n !currentStep.value?.multiSelect,\n )\n\n /\n True only for the steps that send themselves as soon as an option is\n * picked: the single case where the footer button would be redundant.\n * Every other shape needs it, single-step forms included: with\n * `allowFreeformInput` (or `allowCustomAnswer`) the radio pick no longer\n * auto-submits, so without the footer the user was left with a chosen\n * option and no way to send it.\n /\n const isSelfSubmitting = computed(\n () =>\n Boolean(currentStep.value?.options) &&\n !currentStep.value?.multiSelect &&\n (isAutoSubmitStep.value \|\| isLegacyAutoSubmit.value),\n )\n\n // --- Steps ---\n\n const steps = computed<FormStep[]>(() => {\n const input = toolPart.value.input\n if (input?.steps?.length) {\n return input.steps\n }\n // Legacy showMultipleChoice → normalize into a single step\n if (input?.question && input?.options) {\n return [\n {\n id: 'legacy',\n question: input.question,\n options: input.options.map((o) =>\n typeof o === 'string' ? { label: o } : o,\n ),\n },\n ]\n }\n return []\n })\n\n // --- Navigation state ---\n\n const currentStepIndex = ref(0)\n const currentStep = computed(() => steps.value[currentStepIndex.value])\n const canGoBack = computed(() => currentStepIndex.value > 0)\n const canGoNext = computed(\n () => currentStepIndex.value < steps.value.length - 1,\n )\n const isMultiStep = computed(() => steps.value.length > 1)\n\n const progress = computed(() => {\n if (!isMultiStep.value) return null\n return Math.round(\n ((currentStepIndex.value + 1) / steps.value.length) 100,\n )\n })\n\n // --- Answers ---\n\n const answers = reactive<Record<string, AnswerValue>>({})\n const customAnswer = ref('')\n\n // The freeform field belongs to the step showing it: text left behind\n // (unsubmitted, or arriving from a late input update) must not follow the\n // user to the next or previous question.\n watch(currentStepIndex, () => {\n customAnswer.value = ''\n })\n\n // Single scalar answer shared by radio buttons and freeform text/number/date inputs.\n const scalarValue = computed<string \| number \| undefined>({\n get: () => {\n const val = currentStep.value\n ? answers[currentStep.value.id]\n : undefined\n if (val == null \|\| Array.isArray(val)) return undefined\n return val\n },\n set: (val) => {\n if (currentStep.value) {\n answers[currentStep.value.id] = val ?? null\n }\n },\n })\n\n const activeCheckboxValue = computed<unknown[] \| undefined>({\n get: () => {\n const val = currentStep.value\n ? answers[currentStep.value.id]\n : undefined\n return Array.isArray(val) ? val : []\n },\n set: (val) => {\n if (currentStep.value) {\n answers[currentStep.value.id] = (val as string[]) ?? []\n }\n },\n })\n\n // --- Initialize answers from existing output ---\n\n /** The `{ answers: [...] }` list, when the output carries one. /\n function outputAnswers(output: ToolPartShape['output']) {\n if (!output \|\| typeof output === 'string') return undefined\n const list = (output as { answers?: unknown }).answers\n return Array.isArray(list) ? (list as FormAnswer[]) : undefined\n }\n\n watch(\n () => toolPart.value.output,\n (output) => {\n if (!output \|\| isVoiceRenderAck(output)) return\n if (typeof output === 'string') {\n if (steps.value.length === 1) {\n answers[steps.value[0].id] = output\n }\n return\n }\n const list = outputAnswers(output)\n if (list) {\n for (const a of list) {\n answers[a.id] = a.value\n }\n return\n }\n // Forms answered on a platform channel come back as a flat record\n // keyed by step id: without this the read-only summary showed every\n // answer as a placeholder.\n const record = output as Record<string, unknown>\n for (const step of steps.value) {\n const value = record[step.id]\n if (value !== undefined) {\n answers[step.id] = value as AnswerValue\n }\n }\n },\n { immediate: true },\n )\n\n // --- Restore custom answer from output when it doesn't match any option ---\n\n const normalizedOutput = computed(() => {\n const out = toolPart.value.output\n if (!out \|\| isVoiceRenderAck(out)) return undefined\n if (typeof out === 'string') return out\n const list = outputAnswers(out)\n if (list?.length === 1) {\n const val = list[0].value\n return Array.isArray(val) ? val.join(', ') : String(val)\n }\n return undefined\n })\n\n watch(\n normalizedOutput,\n (value) => {\n if (!value \|\| !currentStep.value) return\n const optionLabels = (currentStep.value.options ?? []).map(\n (o) => o.label,\n )\n if (!optionLabels.includes(value)) {\n customAnswer.value = value\n }\n },\n { immediate: true },\n )\n\n // --- Option mapping for radio/checkbox components ---\n\n const radioOptions = computed(() => {\n if (!currentStep.value?.options) return []\n return currentStep.value.options.map((option) => ({\n label: option.label,\n value: option.label,\n description: option.description,\n }))\n })\n\n // --- Navigation & Submission ---\n\n /* Footer button, and Enter on a pure freeform step. /\n function goNext() {\n // A typed freeform answer wins over the picked option: it is the more\n // recent intent, and the footer button is now the visible way to send\n // it (the freeform field only submits on Enter).\n if (customAnswer.value.trim()) {\n submitCustomAnswer()\n return\n }\n if (canGoNext.value) {\n currentStepIndex.value++\n } else {\n submitForm()\n }\n }\n\n function goBack() {\n if (canGoBack.value) {\n currentStepIndex.value--\n }\n }\n\n function submitForm() {\n if (!isInteractive.value) return\n\n const finalAnswers: FormAnswer[] = steps.value.map((step) => ({\n id: step.id,\n value: answers[step.id] ?? null,\n }))\n\n // Legacy backward compatibility: single-step, single-select → return plain string\n if (\n isLegacyAutoSubmit.value &&\n !currentStep.value?.allowFreeformInput\n ) {\n const val = finalAnswers[0].value\n emit('select', Array.isArray(val) ? val[0] : (val as string))\n } else {\n emit('select', { answers: finalAnswers })\n }\n }\n\n /* Enter inside the freeform field shown alongside the options. */\n function submitCustomAnswer() {\n const value = customAnswer.value.trim()\n if (!value) return\n\n answers[currentStep.value.id] = value\n // Cleared before navigating: `goNext()` reads it back to route a typed\n // answer here, so leaving it set would recurse.\n customAnswer.value = ''\n if (steps.value.length === 1) {\n submitForm()\n } else {\n goNext()\n }\n }\n\n function onRadioChange() {\n if (!isInteractive.value) return\n if (isAutoSubmitStep.value \|\| isLegacyAutoSubmit.value) {\n submitForm()\n }\n }\n\n // --- Summary helpers ---\n\n function getSummaryValue(step: FormStep) {\n const val = answers[step.id]\n if (val == null) return '—'\n if (Array.isArray(val)) return val.join(', ')\n if (step.type === 'date') return $d(new Date(val), 'short')\n return val\n }\n</script>\n\n<template>\n <div\n v-if=\"steps.length\"\n class=\"border border-surface-3 rounded-xl w-full overflow-hidden flex flex-col transition-all bg-surface\">\n <!-- Header -->\n <div\n v-if=\"toolPart.input?.title \|\| (isInteractive && steps.length > 1)\"\n class=\"text-12 border-b border-surface-3 text-word-3 bg-surface-1\">\n <div\n v-if=\"toolPart.input?.title\"\n class=\"px-sm py-10 font-bold\"\n :class=\"{\n 'border-b border-surface-3':\n isInteractive && steps.length > 1,\n }\">\n {{ toolPart.input?.title }}\n </div>\n <!-- Progress for multi-step -->\n <div\n v-if=\"isInteractive && steps.length > 1\"\n class=\"flex flex-col gap-4 p-sm\">\n <div class=\"flex justify-between text-10 text-word-3\">\n <span>\n {{\n $t('showForm.step', {\n current: currentStepIndex + 1,\n total: steps.length,\n })\n }}\n </span>\n <span>{{ progress }}%</span>\n </div>\n <div class=\"h-4 bg-surface-3 rounded-full overflow-hidden\">\n <div\n class=\"h-full bg-word-4 transition-all duration-300\"\n :style=\"{ width: `${progress}%` }\"></div>\n </div>\n </div>\n </div>\n\n <!-- Input Available State -->\n <template v-if=\"isInteractive\">\n <!-- Current Step Content -->\n <div class=\"px-sm py-16 flex flex-col gap-12\">\n <div class=\"leading-normal text-12\">\n <strong class=\"font-semibold\">\n {{ currentStep.question }}\n </strong>\n <PkStreamingMarkdown\n v-if=\"currentStep.message\"\n :markdown=\"currentStep.message\"\n class=\"text-word-2 mt-4\" />\n </div>\n\n <!-- Checkbox list for multi-select -->\n <PkEditorCheckboxButtons\n v-if=\"currentStep.options && currentStep.multiSelect\"\n v-model=\"activeCheckboxValue\"\n :name=\"currentStep.id\"\n :options=\"radioOptions\"\n :readonly=\"!isInteractive\"\n class=\"mb-0\"\n vertical>\n <template\n v-for=\"option in radioOptions\"\n :key=\"option.value\"\n #[option.value]>\n <!-- Shared option layout: label + optional description -->\n <div class=\"text-12\">\n <div class=\"font-semibold\">{{ option.label }}</div>\n <div v-if=\"option.description\" class=\"text-word-3\">\n {{ option.description }}\n </div>\n </div>\n </template>\n </PkEditorCheckboxButtons>\n\n <!-- Radio buttons for single-select -->\n <PkEditorRadioButtons\n v-else-if=\"currentStep.options && !currentStep.multiSelect\"\n v-model=\"scalarValue\"\n :name=\"currentStep.id\"\n :options=\"radioOptions\"\n :readonly=\"!isInteractive\"\n vertical\n class=\"mb-0\"\n @update:model-value=\"onRadioChange\">\n <template\n v-for=\"option in radioOptions\"\n :key=\"option.value\"\n #[option.value]>\n <!-- Shared option layout: label + optional description -->\n <div class=\"text-12\">\n <div class=\"font-semibold\">{{ option.label }}</div>\n <div v-if=\"option.description\" class=\"text-word-3\">\n {{ option.description }}\n </div>\n </div>\n </template>\n </PkEditorRadioButtons>\n\n <!-- Pure Freeform Input (text, number, date) -->\n <div\n v-else-if=\"!currentStep.options\"\n class=\"flex flex-col gap-6 w-full\">\n <VvInputText\n :key=\"currentStep.id\"\n v-model=\"scalarValue\"\n :placeholder=\"\n currentStep.placeholder \|\| $t('placeholder.insert')\n \"\n :type=\"currentStep.type\"\n class=\"w-full\"\n :name=\"currentStep.id\"\n modifiers=\"compact rounded\"\n :disabled=\"!isInteractive\"\n @keyup.enter=\"goNext\" />\n </div>\n </div>\n\n <!-- Custom footer freeform input (shown alongside options when allowFreeformInput) -->\n <div\n v-if=\"currentStep.allowFreeformInput && currentStep.options\"\n class=\"px-sm pb-sm border-t border-surface-3\">\n <form\n class=\"flex gap-xs pt-sm\"\n @submit.prevent=\"submitCustomAnswer\">\n <VvInputText\n :key=\"`${currentStep.id}-custom`\"\n v-model=\"customAnswer\"\n class=\"flex-1\"\n :name=\"`${currentStep.id}-custom`\"\n modifiers=\"compact rounded\"\n :disabled=\"!isInteractive\"\n :placeholder=\"\n currentStep.placeholder \|\|\n $t('showForm.otherPlaceholder')\n \" />\n </form>\n </div>\n\n <!-- Footer navigation: shown for every step that does not submit\n itself on option pick (see `isSelfSubmitting`). -->\n <div\n v-if=\"!isSelfSubmitting\"\n class=\"px-sm py-10 bg-surface border-t border-surface-3 flex justify-between gap-12\">\n <VvButton\n v-if=\"canGoBack\"\n modifiers=\"action-quiet\"\n icon=\"ri:arrow-left-s-line\"\n :label=\"$t('action.back')\"\n @click.stop=\"goBack\" />\n <div v-else></div>\n\n <VvButton\n :modifiers=\"canGoNext ? 'action-quiet' : 'action-primary'\"\n :icon=\"\n canGoNext\n ? 'ri:arrow-right-s-line'\n : 'ri:send-plane-2-line'\n \"\n icon-position=\"right\"\n :label=\"canGoNext ? $t('action.next') : $t('action.submit')\"\n @click.stop=\"goNext\" />\n </div>\n </template>\n\n <!-- Output Available State (Multi-step Summary) -->\n <template v-else>\n <div class=\"px-sm py-12 bg-surface space-y-10\">\n <ul class=\"flex flex-col gap-8\">\n <li\n v-for=\"step in steps\"\n :key=\"step.id\"\n class=\"leading-normal\">\n <div class=\"text-12 text-word-3\">\n {{ step.question }}\n </div>\n <span class=\"text-12 text-word-2 font-semibold\">\n {{ getSummaryValue(step) }}\n </span>\n </li>\n </ul>\n </div>\n <div\n class=\"px-sm py-12 bg-surface border-t border-surface-3 flex items-center gap-10\">\n <div\n class=\"w-20 h-20 rounded-full border border-success text-success flex items-center justify-center\">\n <VvIcon name=\"ri:check-line\" class=\"text-12\" />\n </div>\n <div class=\"flex flex-col\">\n <span\n class=\"font-semibold text-12 text-word-1 leading-tight\">\n {{ $t('showForm.completed') }}\n </span>\n </div>\n </div>\n </template>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/_chunks/PkToolShowImageGallery-CSIiRuSC.js ADDED Viewed

@@ -0,0 +1,74 @@
+import { C as e, F as t, L as n, O as r, St as i, Tt as a, _ as o, bt as s, d as c, h as l, it as u, m as d, pt as f, v as p, x as m, xt as h, z as g } from "./vue.runtime.esm-bundler-B3bThTaf.js";
+import "./src-CIEdKLKO.js";
+import { n as _ } from "./url-validation-uLMZ5-AU.js";
+import { p as v } from "./index.es-gbmOq0Nu.js";
+import { t as y } from "./useImageFallback-BAsLRsyg.js";
+import { n as b, t as x } from "./useLightbox-Epg2fN87.js";
+r(), h(), u();
+var S = {
+	key: 0,
+	class: "border border-surface-3 rounded-xl w-full overflow-hidden bg-surface"
+}, C = { class: "px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8 min-h-40" }, w = { class: "font-bold" }, T = { class: "p-sm" }, E = [
+	"href",
+	"data-pswp-src",
+	"data-pswp-width",
+	"data-pswp-height",
+	"data-pswp-caption",
+	"title",
+	"target",
+	"rel"
+], D = [
+	"src",
+	"alt",
+	"onError"
+], O = {
+	key: 1,
+	class: "w-full h-full flex flex-col items-center justify-center gap-4 bg-surface-1 text-word-3"
+}, k = { class: "text-12" }, A = /* @__PURE__ */ e({
+	__name: "PkToolShowImageGallery",
+	props: { part: { type: null } },
+	setup(e) {
+		let r = e, u = d(() => r.part), h = f(), { preload: A, getSize: j } = x(), M = d(() => u.value.input?.images ?? []), { canShowImage: N, onImageError: P } = y(), F = d(() => {
+			let e = M.value.length;
+			return e === 1 ? "grid-cols-1 justify-items-center" : e === 2 ? "grid-cols-2" : "grid-cols-3";
+		}), { init: I } = b({ gallery: h });
+		return t(async () => {
+			A(M.value), await I();
+		}), (e, t) => {
+			let r = v;
+			return M.value.length ? (n(), p("div", S, [l("div", C, [m(r, {
+				name: "ri:image-line",
+				class: "text-16"
+			}), l("strong", w, a(e.$t("label.gallery", { count: M.value.length })), 1)]), l("div", T, [l("div", {
+				ref_key: "galleryRef",
+				ref: h,
+				class: i(["grid gap-8", F.value])
+			}, [(n(!0), p(c, null, g(M.value, (t) => (n(), p("a", {
+				key: t.url,
+				href: s(N)(t.url) ? t.url : void 0,
+				"data-pswp-src": s(N)(t.url) ? t.url : void 0,
+				"data-pswp-width": s(j)(t.url).width,
+				"data-pswp-height": s(j)(t.url).height,
+				"data-pswp-caption": t.caption ?? t.alt ?? "",
+				"data-cropped": !0,
+				class: i(["relative block aspect-square overflow-hidden rounded-xl group max-h-384", [{ "w-384 max-w-full": M.value.length === 1 }, s(N)(t.url) ? "cursor-pointer" : "pointer-events-none"]]),
+				title: t.caption ?? t.alt ?? "",
+				target: s(_)(t.url) ? void 0 : "_blank",
+				rel: s(_)(t.url) ? void 0 : "noopener noreferrer"
+			}, [s(N)(t.url) ? (n(), p("img", {
+				key: 0,
+				src: t.url,
+				alt: t.alt ?? t.caption ?? "",
+				class: "w-full h-full object-cover transition-opacity group-hover:opacity-80",
+				onError: (e) => s(P)(t.url)
+			}, null, 40, D)) : (n(), p("div", O, [m(r, {
+				name: "ri:camera-off-line",
+				class: "text-24"
+			}), l("span", k, a(e.$t("label.imageLoadError")), 1)]))], 10, E))), 128))], 2)])])) : o("", !0);
+		};
+	}
+});
+//#endregion
+export { A as default };
+//# sourceMappingURL=PkToolShowImageGallery-CSIiRuSC.js.map

package/dist/_chunks/{PkToolShowImageGallery-DiOR0vYa.js.map → PkToolShowImageGallery-CSIiRuSC.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PkToolShowImageGallery-DiOR0vYa.js","names":["$t"],"sources":["../../../../packages/components/src/chat/PkToolShowImageGallery.vue","../../../../packages/components/src/chat/PkToolShowImageGallery.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed, ref, onMounted } from 'vue'\n import { isSameSite } from 'utils'\n import { useImageFallback } from 'composables'\n import { useLightbox, useImageSizes } from '../composables/useLightbox'\n\n const props = defineProps<{\n part: unknown\n }>()\n\n const toolPart = computed(() => {\n const part = props.part as {\n input?: {\n images: Array<{\n url: string\n caption?: string\n alt?: string\n }>\n }\n }\n return part\n })\n\n const galleryRef = ref<HTMLElement>()\n const { preload, getSize } = useImageSizes()\n\n const images = computed(() => toolPart.value.input?.images ?? [])\n\n const { canShowImage, onImageError } = useImageFallback()\n\n const gridCols = computed(() => {\n const count = images.value.length\n if (count === 1) {\n return 'grid-cols-1 justify-items-center'\n }\n if (count === 2) {\n return 'grid-cols-2'\n }\n return 'grid-cols-3'\n })\n\n const { init } = useLightbox({ gallery: galleryRef })\n\n onMounted(async () => {\n preload(images.value)\n await init()\n })\n</script>\n\n<template>\n <div\n v-if=\"images.length\"\n class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8 min-h-40\">\n <VvIcon name=\"ri:image-line\" class=\"text-16\" />\n <strong class=\"font-bold\">\n {{ $t('label.gallery', { count: images.length }) }}\n </strong>\n </div>\n <div class=\"p-sm\">\n <div ref=\"galleryRef\" class=\"grid gap-8\" :class=\"gridCols\">\n <a\n v-for=\"image in images\"\n :key=\"image.url\"\n :href=\"canShowImage(image.url) ? image.url : undefined\"\n :data-pswp-src=\"\n canShowImage(image.url) ? image.url : undefined\n \"\n :data-pswp-width=\"getSize(image.url).width\"\n :data-pswp-height=\"getSize(image.url).height\"\n :data-pswp-caption=\"image.caption ?? image.alt ?? ''\"\n :data-cropped=\"true\"\n class=\"relative block aspect-square overflow-hidden rounded-xl group max-h-384\"\n :class=\"[\n { 'w-384 max-w-full': images.length === 1 },\n canShowImage(image.url)\n ? 'cursor-pointer'\n : 'pointer-events-none',\n ]\"\n :title=\"image.caption ?? image.alt ?? ''\"\n :target=\"isSameSite(image.url) ? undefined : '_blank'\"\n :rel=\"\n isSameSite(image.url)\n ? undefined\n : 'noopener noreferrer'\n \">\n <img\n v-if=\"canShowImage(image.url)\"\n :src=\"image.url\"\n :alt=\"image.alt ?? image.caption ?? ''\"\n class=\"w-full h-full object-cover transition-opacity group-hover:opacity-80\"\n @error=\"onImageError(image.url)\" />\n <div\n v-else\n class=\"w-full h-full flex flex-col items-center justify-center gap-4 bg-surface-1 text-word-3\">\n <VvIcon name=\"ri:camera-off-line\" class=\"text-24\" />\n <span class=\"text-12\">{{\n $t('label.imageLoadError')\n }}</span>\n </div>\n </a>\n </div>\n </div>\n </div>\n</template>\n","<script setup lang=\"ts\">\n import { computed, ref, onMounted } from 'vue'\n import { isSameSite } from 'utils'\n import { useImageFallback } from 'composables'\n import { useLightbox, useImageSizes } from '../composables/useLightbox'\n\n const props = defineProps<{\n part: unknown\n }>()\n\n const toolPart = computed(() => {\n const part = props.part as {\n input?: {\n images: Array<{\n url: string\n caption?: string\n alt?: string\n }>\n }\n }\n return part\n })\n\n const galleryRef = ref<HTMLElement>()\n const { preload, getSize } = useImageSizes()\n\n const images = computed(() => toolPart.value.input?.images ?? [])\n\n const { canShowImage, onImageError } = useImageFallback()\n\n const gridCols = computed(() => {\n const count = images.value.length\n if (count === 1) {\n return 'grid-cols-1 justify-items-center'\n }\n if (count === 2) {\n return 'grid-cols-2'\n }\n return 'grid-cols-3'\n })\n\n const { init } = useLightbox({ gallery: galleryRef })\n\n onMounted(async () => {\n preload(images.value)\n await init()\n })\n</script>\n\n<template>\n <div\n v-if=\"images.length\"\n class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8 min-h-40\">\n <VvIcon name=\"ri:image-line\" class=\"text-16\" />\n <strong class=\"font-bold\">\n {{ $t('label.gallery', { count: images.length }) }}\n </strong>\n </div>\n <div class=\"p-sm\">\n <div ref=\"galleryRef\" class=\"grid gap-8\" :class=\"gridCols\">\n <a\n v-for=\"image in images\"\n :key=\"image.url\"\n :href=\"canShowImage(image.url) ? image.url : undefined\"\n :data-pswp-src=\"\n canShowImage(image.url) ? image.url : undefined\n \"\n :data-pswp-width=\"getSize(image.url).width\"\n :data-pswp-height=\"getSize(image.url).height\"\n :data-pswp-caption=\"image.caption ?? image.alt ?? ''\"\n :data-cropped=\"true\"\n class=\"relative block aspect-square overflow-hidden rounded-xl group max-h-384\"\n :class=\"[\n { 'w-384 max-w-full': images.length === 1 },\n canShowImage(image.url)\n ? 'cursor-pointer'\n : 'pointer-events-none',\n ]\"\n :title=\"image.caption ?? image.alt ?? ''\"\n :target=\"isSameSite(image.url) ? undefined : '_blank'\"\n :rel=\"\n isSameSite(image.url)\n ? undefined\n : 'noopener noreferrer'\n \">\n <img\n v-if=\"canShowImage(image.url)\"\n :src=\"image.url\"\n :alt=\"image.alt ?? image.caption ?? ''\"\n class=\"w-full h-full object-cover transition-opacity group-hover:opacity-80\"\n @error=\"onImageError(image.url)\" />\n <div\n v-else\n class=\"w-full h-full flex flex-col items-center justify-center gap-4 bg-surface-1 text-word-3\">\n <VvIcon name=\"ri:camera-off-line\" class=\"text-24\" />\n <span class=\"text-12\">{{\n $t('label.imageLoadError')\n }}</span>\n </div>\n </a>\n </div>\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMI,IAAM,IAAQ,GAIR,IAAW,QACA,EAAM,IAUtB,GAEK,IAAa,EAAiB,GAC9B,EAAE,YAAS,eAAY,EAAc,GAErC,IAAS,QAAe,EAAS,MAAM,OAAO,UAAU,CAAC,CAAC,GAE1D,EAAE,iBAAc,oBAAiB,EAAiB,GAElD,IAAW,QAAe;GAC5B,IAAM,IAAQ,EAAO,MAAM;GAO3B,OANI,MAAU,IACH,qCAEP,MAAU,IACH,gBAEJ;EACX,CAAC,GAEK,EAAE,YAAS,EAAY,EAAE,SAAS,EAAW,CAAC;SAEpD,EAAU,YAAY;GAElB,AADA,EAAQ,EAAO,KAAK,GACpB,MAAM,EAAK;EACf,CAAC;;GAKS,OAAA,EAAA,MAAO,UADjB,EAAA,GAAA,EAsDM,OAtDN,GAsDM,CAnDF,EAMM,OANN,GAMM,CAJF,EAA+C,GAAA;IAAvC,MAAK;IAAgB,OAAM;GACnC,CAAA,GAAA,EAES,UAFT,GAES,EADFA,EAAAA,GAAE,iBAAA,EAAA,OAA2B,EAAA,MAAO,OAAM,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,GAGrD,EA2CM,OA3CN,GA2CM,CA1CF,EAyCM,OAAA;IAzCG,SAAA;IAAJ,KAAI;IAAa,OAAK,EAAA,CAAC,cAAqB,EAAA,KAAQ,CAAA;GACrD,GAAA,EAAA,EAAA,EAAA,GAAA,EAuCI,GAAA,MAAA,EAtCgB,EAAA,QAAT,OADX,EAAA,GAAA,EAuCI,KAAA;IArCC,KAAK,EAAM;IACX,MAAM,EAAA,CAAA,CAAY,CAAC,EAAM,GAAG,IAAI,EAAM,MAAM,KAAA;IAC5C,iBAAwC,EAAA,CAAA,CAAY,CAAC,EAAM,GAAG,IAAI,EAAM,MAAM,KAAA;IAG9E,mBAAiB,EAAA,CAAA,CAAO,CAAC,EAAM,GAAG,CAAA,CAAE;IACpC,oBAAkB,EAAA,CAAA,CAAO,CAAC,EAAM,GAAG,CAAA,CAAE;IACrC,qBAAmB,EAAM,WAAW,EAAM,OAAG;IAC7C,gBAAc;IACf,OAAK,EAAA,CAAC,2EAAyE,CACvB,EAAA,oBAAA,EAAA,MAAO,WAAM,EAAA,GAAkC,EAAA,CAAA,CAAY,CAAC,EAAM,GAAG,IAAA,mBAAA,qBAAA,CAAA,CAAA;IAM5H,OAAO,EAAM,WAAW,EAAM,OAAG;IACjC,QAAQ,EAAA,CAAA,CAAU,CAAC,EAAM,GAAG,IAAI,KAAA,IAAS;IACzC,KAA8B,EAAA,CAAA,CAAU,CAAC,EAAM,GAAG,IAAgC,KAAA,IAAA;GAMzE,GAAA,CAAA,EAAA,CAAA,CAAY,CAAC,EAAM,GAAG,KADhC,EAAA,GAAA,EAKuC,OAAA;;IAHlC,KAAK,EAAM;IACX,KAAK,EAAM,OAAO,EAAM,WAAO;IAChC,OAAM;IACL,UAAK,MAAE,EAAA,CAAA,CAAY,CAAC,EAAM,GAAG;GAClC,GAAA,MAAA,IAAA,CAAA,MAAA,EAAA,GAAA,EAOM,OAPN,GAOM,CAJF,EAAoD,GAAA;IAA5C,MAAK;IAAqB,OAAM;GACxC,CAAA,GAAA,EAES,QAFT,GAES,EADLA,EAAAA,GAAE,sBAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,GAAA,IAAA,CAAA"}
1	+ {"version":3,"file":"PkToolShowImageGallery-CSIiRuSC.js","names":["$t"],"sources":["../../../../packages/components/src/chat/PkToolShowImageGallery.vue","../../../../packages/components/src/chat/PkToolShowImageGallery.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed, ref, onMounted } from 'vue'\n import { isSameSite } from 'utils'\n import { useImageFallback } from 'composables'\n import { useLightbox, useImageSizes } from '../composables/useLightbox'\n\n const props = defineProps<{\n part: unknown\n }>()\n\n const toolPart = computed(() => {\n const part = props.part as {\n input?: {\n images: Array<{\n url: string\n caption?: string\n alt?: string\n }>\n }\n }\n return part\n })\n\n const galleryRef = ref<HTMLElement>()\n const { preload, getSize } = useImageSizes()\n\n const images = computed(() => toolPart.value.input?.images ?? [])\n\n const { canShowImage, onImageError } = useImageFallback()\n\n const gridCols = computed(() => {\n const count = images.value.length\n if (count === 1) {\n return 'grid-cols-1 justify-items-center'\n }\n if (count === 2) {\n return 'grid-cols-2'\n }\n return 'grid-cols-3'\n })\n\n const { init } = useLightbox({ gallery: galleryRef })\n\n onMounted(async () => {\n preload(images.value)\n await init()\n })\n</script>\n\n<template>\n <div\n v-if=\"images.length\"\n class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8 min-h-40\">\n <VvIcon name=\"ri:image-line\" class=\"text-16\" />\n <strong class=\"font-bold\">\n {{ $t('label.gallery', { count: images.length }) }}\n </strong>\n </div>\n <div class=\"p-sm\">\n <div ref=\"galleryRef\" class=\"grid gap-8\" :class=\"gridCols\">\n <a\n v-for=\"image in images\"\n :key=\"image.url\"\n :href=\"canShowImage(image.url) ? image.url : undefined\"\n :data-pswp-src=\"\n canShowImage(image.url) ? image.url : undefined\n \"\n :data-pswp-width=\"getSize(image.url).width\"\n :data-pswp-height=\"getSize(image.url).height\"\n :data-pswp-caption=\"image.caption ?? image.alt ?? ''\"\n :data-cropped=\"true\"\n class=\"relative block aspect-square overflow-hidden rounded-xl group max-h-384\"\n :class=\"[\n { 'w-384 max-w-full': images.length === 1 },\n canShowImage(image.url)\n ? 'cursor-pointer'\n : 'pointer-events-none',\n ]\"\n :title=\"image.caption ?? image.alt ?? ''\"\n :target=\"isSameSite(image.url) ? undefined : '_blank'\"\n :rel=\"\n isSameSite(image.url)\n ? undefined\n : 'noopener noreferrer'\n \">\n <img\n v-if=\"canShowImage(image.url)\"\n :src=\"image.url\"\n :alt=\"image.alt ?? image.caption ?? ''\"\n class=\"w-full h-full object-cover transition-opacity group-hover:opacity-80\"\n @error=\"onImageError(image.url)\" />\n <div\n v-else\n class=\"w-full h-full flex flex-col items-center justify-center gap-4 bg-surface-1 text-word-3\">\n <VvIcon name=\"ri:camera-off-line\" class=\"text-24\" />\n <span class=\"text-12\">{{\n $t('label.imageLoadError')\n }}</span>\n </div>\n </a>\n </div>\n </div>\n </div>\n</template>\n","<script setup lang=\"ts\">\n import { computed, ref, onMounted } from 'vue'\n import { isSameSite } from 'utils'\n import { useImageFallback } from 'composables'\n import { useLightbox, useImageSizes } from '../composables/useLightbox'\n\n const props = defineProps<{\n part: unknown\n }>()\n\n const toolPart = computed(() => {\n const part = props.part as {\n input?: {\n images: Array<{\n url: string\n caption?: string\n alt?: string\n }>\n }\n }\n return part\n })\n\n const galleryRef = ref<HTMLElement>()\n const { preload, getSize } = useImageSizes()\n\n const images = computed(() => toolPart.value.input?.images ?? [])\n\n const { canShowImage, onImageError } = useImageFallback()\n\n const gridCols = computed(() => {\n const count = images.value.length\n if (count === 1) {\n return 'grid-cols-1 justify-items-center'\n }\n if (count === 2) {\n return 'grid-cols-2'\n }\n return 'grid-cols-3'\n })\n\n const { init } = useLightbox({ gallery: galleryRef })\n\n onMounted(async () => {\n preload(images.value)\n await init()\n })\n</script>\n\n<template>\n <div\n v-if=\"images.length\"\n class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface\">\n <div\n class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8 min-h-40\">\n <VvIcon name=\"ri:image-line\" class=\"text-16\" />\n <strong class=\"font-bold\">\n {{ $t('label.gallery', { count: images.length }) }}\n </strong>\n </div>\n <div class=\"p-sm\">\n <div ref=\"galleryRef\" class=\"grid gap-8\" :class=\"gridCols\">\n <a\n v-for=\"image in images\"\n :key=\"image.url\"\n :href=\"canShowImage(image.url) ? image.url : undefined\"\n :data-pswp-src=\"\n canShowImage(image.url) ? image.url : undefined\n \"\n :data-pswp-width=\"getSize(image.url).width\"\n :data-pswp-height=\"getSize(image.url).height\"\n :data-pswp-caption=\"image.caption ?? image.alt ?? ''\"\n :data-cropped=\"true\"\n class=\"relative block aspect-square overflow-hidden rounded-xl group max-h-384\"\n :class=\"[\n { 'w-384 max-w-full': images.length === 1 },\n canShowImage(image.url)\n ? 'cursor-pointer'\n : 'pointer-events-none',\n ]\"\n :title=\"image.caption ?? image.alt ?? ''\"\n :target=\"isSameSite(image.url) ? undefined : '_blank'\"\n :rel=\"\n isSameSite(image.url)\n ? undefined\n : 'noopener noreferrer'\n \">\n <img\n v-if=\"canShowImage(image.url)\"\n :src=\"image.url\"\n :alt=\"image.alt ?? image.caption ?? ''\"\n class=\"w-full h-full object-cover transition-opacity group-hover:opacity-80\"\n @error=\"onImageError(image.url)\" />\n <div\n v-else\n class=\"w-full h-full flex flex-col items-center justify-center gap-4 bg-surface-1 text-word-3\">\n <VvIcon name=\"ri:camera-off-line\" class=\"text-24\" />\n <span class=\"text-12\">{{\n $t('label.imageLoadError')\n }}</span>\n </div>\n </a>\n </div>\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMI,IAAM,IAAQ,GAIR,IAAW,QACA,EAAM,IAUtB,GAEK,IAAa,EAAiB,GAC9B,EAAE,YAAS,eAAY,EAAc,GAErC,IAAS,QAAe,EAAS,MAAM,OAAO,UAAU,CAAC,CAAC,GAE1D,EAAE,iBAAc,oBAAiB,EAAiB,GAElD,IAAW,QAAe;GAC5B,IAAM,IAAQ,EAAO,MAAM;GAO3B,OANI,MAAU,IACH,qCAEP,MAAU,IACH,gBAEJ;EACX,CAAC,GAEK,EAAE,YAAS,EAAY,EAAE,SAAS,EAAW,CAAC;SAEpD,EAAU,YAAY;GAElB,AADA,EAAQ,EAAO,KAAK,GACpB,MAAM,EAAK;EACf,CAAC;;GAKS,OAAA,EAAA,MAAO,UADjB,EAAA,GAAA,EAsDM,OAtDN,GAsDM,CAnDF,EAMM,OANN,GAMM,CAJF,EAA+C,GAAA;IAAvC,MAAK;IAAgB,OAAM;GACnC,CAAA,GAAA,EAES,UAFT,GAES,EADFA,EAAAA,GAAE,iBAAA,EAAA,OAA2B,EAAA,MAAO,OAAM,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,GAGrD,EA2CM,OA3CN,GA2CM,CA1CF,EAyCM,OAAA;IAzCG,SAAA;IAAJ,KAAI;IAAa,OAAK,EAAA,CAAC,cAAqB,EAAA,KAAQ,CAAA;GACrD,GAAA,EAAA,EAAA,EAAA,GAAA,EAuCI,GAAA,MAAA,EAtCgB,EAAA,QAAT,OADX,EAAA,GAAA,EAuCI,KAAA;IArCC,KAAK,EAAM;IACX,MAAM,EAAA,CAAA,CAAY,CAAC,EAAM,GAAG,IAAI,EAAM,MAAM,KAAA;IAC5C,iBAAwC,EAAA,CAAA,CAAY,CAAC,EAAM,GAAG,IAAI,EAAM,MAAM,KAAA;IAG9E,mBAAiB,EAAA,CAAA,CAAO,CAAC,EAAM,GAAG,CAAA,CAAE;IACpC,oBAAkB,EAAA,CAAA,CAAO,CAAC,EAAM,GAAG,CAAA,CAAE;IACrC,qBAAmB,EAAM,WAAW,EAAM,OAAG;IAC7C,gBAAc;IACf,OAAK,EAAA,CAAC,2EAAyE,CACvB,EAAA,oBAAA,EAAA,MAAO,WAAM,EAAA,GAAkC,EAAA,CAAA,CAAY,CAAC,EAAM,GAAG,IAAA,mBAAA,qBAAA,CAAA,CAAA;IAM5H,OAAO,EAAM,WAAW,EAAM,OAAG;IACjC,QAAQ,EAAA,CAAA,CAAU,CAAC,EAAM,GAAG,IAAI,KAAA,IAAS;IACzC,KAA8B,EAAA,CAAA,CAAU,CAAC,EAAM,GAAG,IAAgC,KAAA,IAAA;GAMzE,GAAA,CAAA,EAAA,CAAA,CAAY,CAAC,EAAM,GAAG,KADhC,EAAA,GAAA,EAKuC,OAAA;;IAHlC,KAAK,EAAM;IACX,KAAK,EAAM,OAAO,EAAM,WAAO;IAChC,OAAM;IACL,UAAK,MAAE,EAAA,CAAA,CAAY,CAAC,EAAM,GAAG;GAClC,GAAA,MAAA,IAAA,CAAA,MAAA,EAAA,GAAA,EAOM,OAPN,GAOM,CAJF,EAAoD,GAAA;IAA5C,MAAK;IAAqB,OAAM;GACxC,CAAA,GAAA,EAES,QAFT,GAES,EADLA,EAAAA,GAAE,sBAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,GAAA,IAAA,CAAA"}