npm - @8wave/ai-elements - Versions diffs - 0.98.0 → 0.99.0-beta.1 - Mend

@8wave/ai-elements 0.98.0 → 0.99.0-beta.1

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 (76) hide show

package/dist-vue/_chunks/{PkChatbotSteps-BpqdFhsG.js.map → PkChatbotSteps-Dv9NkYER.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PkChatbotSteps-BpqdFhsG.js","names":[],"sources":["../../../../packages/components/src/chat/PkStreamingMarkdownAutoscroll.vue","../../../../packages/components/src/chat/PkStreamingMarkdownAutoscroll.vue","../../../../packages/components/src/chat/PkChatbotSteps.vue","../../../../packages/components/src/chat/PkChatbotSteps.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import { nextTick, ref, watch } from 'vue'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n const props = defineProps<{\n markdown?: string\n innerClass?: string\n isDark?: boolean\n }>()\n\n const scrollEl = ref<HTMLDivElement>()\n const lastScrollTop = ref<number>(0)\n const stopAutoScroll = ref<boolean>(false)\n\n const handleScroll = () => {\n if (!scrollEl.value) {\n return\n }\n const currentScrollTop = scrollEl.value.scrollTop\n if (currentScrollTop < lastScrollTop.value) {\n const delta = lastScrollTop.value - currentScrollTop\n if (delta < 50) {\n stopAutoScroll.value = true\n }\n }\n if (currentScrollTop > lastScrollTop.value) {\n if (\n currentScrollTop ===\n scrollEl.value.scrollHeight - scrollEl.value.clientHeight\n ) {\n stopAutoScroll.value = false\n }\n }\n lastScrollTop.value = currentScrollTop\n }\n\n watch(\n () => props.markdown,\n async () => {\n await nextTick()\n if (scrollEl.value && !stopAutoScroll.value) {\n scrollEl.value.scrollTop = scrollEl.value.scrollHeight\n }\n },\n { immediate: true },\n )\n</script>\n\n<template>\n <div\n ref=\"scrollEl\"\n class=\"overflow-auto light-scrollbar\"\n @scroll=\"handleScroll\">\n <PkStreamingMarkdown :markdown :is-dark :class=\"innerClass\" />\n </div>\n</template>\n","<script lang=\"ts\" setup>\n import { nextTick, ref, watch } from 'vue'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n const props = defineProps<{\n markdown?: string\n innerClass?: string\n isDark?: boolean\n }>()\n\n const scrollEl = ref<HTMLDivElement>()\n const lastScrollTop = ref<number>(0)\n const stopAutoScroll = ref<boolean>(false)\n\n const handleScroll = () => {\n if (!scrollEl.value) {\n return\n }\n const currentScrollTop = scrollEl.value.scrollTop\n if (currentScrollTop < lastScrollTop.value) {\n const delta = lastScrollTop.value - currentScrollTop\n if (delta < 50) {\n stopAutoScroll.value = true\n }\n }\n if (currentScrollTop > lastScrollTop.value) {\n if (\n currentScrollTop ===\n scrollEl.value.scrollHeight - scrollEl.value.clientHeight\n ) {\n stopAutoScroll.value = false\n }\n }\n lastScrollTop.value = currentScrollTop\n }\n\n watch(\n () => props.markdown,\n async () => {\n await nextTick()\n if (scrollEl.value && !stopAutoScroll.value) {\n scrollEl.value.scrollTop = scrollEl.value.scrollHeight\n }\n },\n { immediate: true },\n )\n</script>\n\n<template>\n <div\n ref=\"scrollEl\"\n class=\"overflow-auto light-scrollbar\"\n @scroll=\"handleScroll\">\n <PkStreamingMarkdown :markdown :is-dark :class=\"innerClass\" />\n </div>\n</template>\n","<script lang=\"ts\" setup>\n import { computed, reactive, ref, watch } from 'vue'\n import { useI18n } from 'vue-i18n'\n import type { UIChatMessage } from 'models'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n import PkStreamingMarkdownAutoscroll from './PkStreamingMarkdownAutoscroll.vue'\n import PkChatbotStepToolDetail from './PkChatbotStepToolDetail.vue'\n import {\n isReasoningPart,\n isToolPart,\n getPartIcon,\n getPartState,\n getToolPartLabel,\n getToolPartSummary,\n hasRichToolDetail,\n stringifyPayload,\n formatDuration as formatDurationWith,\n } from './utils'\n\n const props = defineProps<{\n message: UIChatMessage\n isStreaming?: boolean\n isDark?: boolean\n }>()\n\n const { t: $t, n: $n } = useI18n({\n useScope: 'global',\n })\n\n type MessagePart = UIChatMessage['parts'][number]\n\n interface Step {\n key: string\n part: MessagePart\n icon?: string\n label?: string\n summary?: string\n durationMs?: number\n isActive: boolean\n text?: string\n toolInput?: unknown\n toolOutput?: unknown\n }\n\n const steps = computed<Step[]>(() => {\n const parts = props.message.parts\n const partTimings = props.message.metadata?.partTimings\n const result: Step[] = []\n for (const [index, part] of parts.entries()) {\n const isReasoning = isReasoningPart(part)\n const isTool = isToolPart(part)\n if (!isReasoning && !isTool) {\n continue\n }\n const toolCallId =\n 'toolCallId' in part ? (part.toolCallId as string) : undefined\n result.push({\n key: toolCallId ?? `${part.type}-${index}`,\n part,\n icon: getPartIcon(part),\n label: getToolPartLabel($t, part),\n summary: getToolPartSummary(part),\n durationMs: toolCallId ? partTimings?.[toolCallId] : undefined,\n isActive:\n Boolean(props.isStreaming) && index === parts.length - 1,\n text: isReasoning && part.text.trim() ? part.text : undefined,\n toolInput: isTool && 'input' in part ? part.input : undefined,\n toolOutput:\n isTool && 'output' in part ? part.output : undefined,\n })\n }\n return result\n })\n\n const totalDurationMs = computed(() => {\n const { createdAt, completedAt } = props.message.metadata ?? {}\n if (!createdAt \|\| !completedAt) {\n return undefined\n }\n return completedAt - createdAt\n })\n\n const formatDuration = (ms?: number) => formatDurationWith($n, ms)\n\n const getStepError = (step: Step) =>\n getPartState(step.part) === 'output-error' &&\n 'errorText' in step.part &&\n typeof step.part.errorText === 'string'\n ? step.part.errorText\n : undefined\n\n const hasBody = (step: Step) => {\n if (step.text \|\| getStepError(step)) {\n return true\n }\n if (hasRichToolDetail(step.part)) {\n return step.toolInput !== undefined \|\| step.toolOutput !== undefined\n }\n return Boolean(\n stringifyPayload(step.toolInput) ??\n stringifyPayload(step.toolOutput),\n )\n }\n\n // --- Expand / collapse ---\n // The active (streaming) step is auto-expanded; a manual toggle always\n // wins over the automatic behavior.\n const manualSteps = reactive(new Map<string, boolean>())\n const isStepExpanded = (step: Step) =>\n manualSteps.get(step.key) ?? step.isActive\n const toggleStep = (step: Step) => {\n manualSteps.set(step.key, !isStepExpanded(step))\n }\n\n // The group is open while streaming and collapses to its header once the\n // answer is complete, unless the user toggled it manually.\n const manualGroup = ref<boolean \| undefined>(undefined)\n const isGroupExpanded = computed(\n () => manualGroup.value ?? Boolean(props.isStreaming),\n )\n // Reset the manual override when a new stream starts so the timeline\n // opens again on regenerate.\n watch(\n () => props.isStreaming,\n (streaming) => {\n if (streaming) {\n manualGroup.value = undefined\n manualSteps.clear()\n }\n },\n )\n</script>\n\n<template>\n <div v-if=\"steps.length\" class=\"pk-chatbot-steps\">\n <button\n type=\"button\"\n class=\"pk-chatbot-steps__header\"\n :aria-expanded=\"isGroupExpanded\"\n @click=\"manualGroup = !isGroupExpanded\">\n <VvIcon\n v-if=\"isStreaming\"\n name=\"line-md:loading-loop\"\n class=\"shrink-0\" />\n <VvIcon v-else name=\"ri:route-line\" class=\"shrink-0\" />\n <span class=\"pk-chatbot-steps__title\">\n {{ $t('messagePart.steps') }}\n </span>\n <span class=\"pk-chatbot-steps__meta\">\n {{ $t('messagePart.stepCount', steps.length) }}\n <template v-if=\"formatDuration(totalDurationMs)\">\n · {{ formatDuration(totalDurationMs) }}\n </template>\n </span>\n <VvIcon\n :name=\"\n isGroupExpanded\n ? 'ri:arrow-up-s-line'\n : 'ri:arrow-down-s-line'\n \"\n class=\"pk-chatbot-steps__chevron shrink-0 ml-auto\" />\n </button>\n <ol v-if=\"isGroupExpanded\" class=\"pk-chatbot-steps__list\">\n <li\n v-for=\"step in steps\"\n :key=\"step.key\"\n class=\"pk-chatbot-steps__step\"\n :class=\"{\n 'pk-chatbot-steps__step--active': step.isActive,\n }\">\n <component\n :is=\"hasBody(step) ? 'button' : 'div'\"\n :type=\"hasBody(step) ? 'button' : undefined\"\n class=\"pk-chatbot-steps__step-header\"\n :aria-expanded=\"\n hasBody(step) ? isStepExpanded(step) : undefined\n \"\n @click=\"hasBody(step) ? toggleStep(step) : undefined\">\n <span\n class=\"pk-chatbot-steps-marker\"\n :class=\"{\n 'pk-chatbot-steps-marker--active': step.isActive,\n }\">\n <VvIcon\n v-if=\"step.isActive\"\n name=\"line-md:loading-loop\" />\n <VvIcon v-else-if=\"step.icon\" :name=\"step.icon\" />\n </span>\n <span class=\"pk-chatbot-steps__step-label\">\n {{ step.label }}\n </span>\n <span class=\"pk-chatbot-steps__step-summary\">\n {{ step.summary }}\n </span>\n <span\n v-if=\"formatDuration(step.durationMs)\"\n class=\"pk-chatbot-steps__step-duration\">\n {{ formatDuration(step.durationMs) }}\n </span>\n <VvIcon\n v-if=\"hasBody(step)\"\n :name=\"\n isStepExpanded(step)\n ? 'ri:arrow-up-s-line'\n : 'ri:arrow-down-s-line'\n \"\n class=\"pk-chatbot-steps__chevron shrink-0 ml-auto\" />\n </component>\n <div\n v-if=\"hasBody(step) && isStepExpanded(step)\"\n class=\"pk-chatbot-steps__step-body\">\n <PkStreamingMarkdownAutoscroll\n v-if=\"step.text && step.isActive\"\n :markdown=\"step.text\"\n :is-dark\n inner-class=\"wysiwyg\"\n class=\"pk-chatbot-steps__step-content pk-chatbot-steps__step-content--scroll\" />\n <PkStreamingMarkdown\n v-else-if=\"step.text\"\n :markdown=\"step.text\"\n :is-dark\n class=\"wysiwyg pk-chatbot-steps__step-content\" />\n <div\n v-else-if=\"getStepError(step)\"\n class=\"pk-chatbot-steps__step-payload pk-chatbot-steps__step-payload--error\">\n <span class=\"pk-chatbot-steps__step-payload-label\">\n {{ $t('messagePart.stepError') }}\n </span>\n <pre>{{ getStepError(step) }}</pre>\n </div>\n <PkChatbotStepToolDetail\n v-else-if=\"hasRichToolDetail(step.part)\"\n :part=\"step.part\" />\n <template v-else>\n <div\n v-if=\"stringifyPayload(step.toolInput)\"\n class=\"pk-chatbot-steps__step-payload\">\n <span class=\"pk-chatbot-steps__step-payload-label\">\n {{ $t('messagePart.stepInput') }}\n </span>\n <pre>{{ stringifyPayload(step.toolInput) }}</pre>\n </div>\n <div\n v-if=\"stringifyPayload(step.toolOutput)\"\n class=\"pk-chatbot-steps__step-payload\">\n <span class=\"pk-chatbot-steps__step-payload-label\">\n {{ $t('messagePart.stepOutput') }}\n </span>\n <pre>{{ stringifyPayload(step.toolOutput) }}</pre>\n </div>\n </template>\n </div>\n </li>\n </ol>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-chatbot-steps {\n width: 100%;\n border: var(--spacing-px) solid var(--color-surface-3);\n border-radius: var(--rounded-lg);\n background-color: var(--color-surface-1);\n font-size: var(--text-12);\n color: var(--color-word-3);\n overflow: hidden;\n\n &__header {\n display: flex;\n align-items: center;\n gap: var(--spacing-8);\n width: 100%;\n min-height: var(--spacing-40);\n padding: var(--spacing-8) var(--spacing-sm);\n text-align: left;\n cursor: pointer;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: var(--color-surface-2);\n }\n }\n\n &__chevron {\n font-size: var(--text-16);\n }\n\n &__title {\n font-weight: 600;\n color: var(--color-word-2);\n flex-grow: 1;\n }\n\n &__meta {\n color: var(--color-word-4);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n }\n\n &__list {\n background-color: var(--color-surface);\n border-top: var(--spacing-px) solid var(--color-surface-3);\n padding: var(--spacing-8) var(--spacing-sm);\n display: flex;\n flex-direction: column;\n }\n\n &__step {\n position: relative;\n\n // Vertical connector between step markers\n &:not(:last-child)::before {\n content: '';\n position: absolute;\n left: var(--spacing-10);\n top: var(--spacing-28);\n bottom: calc(var(--spacing-8) * -1);\n width: var(--spacing-px);\n background-color: var(--color-surface-4);\n }\n }\n\n &__step-header {\n display: flex;\n align-items: center;\n gap: var(--spacing-8);\n width: calc(100% + var(--spacing-16));\n min-height: var(--spacing-36);\n margin-inline: calc(var(--spacing-8) * -1);\n padding: var(--spacing-4) var(--spacing-8);\n text-align: left;\n\n &:is(button) {\n cursor: pointer;\n border-radius: var(--rounded);\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: var(--color-surface-2);\n }\n }\n }\n\n &-marker {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--spacing-20);\n height: var(--spacing-20);\n flex-shrink: 0;\n position: relative;\n z-index: 1;\n background-color: var(--color-surface-1);\n border-radius: var(--rounded-full);\n border: var(--spacing-px) solid var(--color-surface-4);\n\n &--active {\n background-color: var(\n --chatbot-main-color,\n var(--color-surface-4)\n );\n border-color: transparent;\n color: var(--chatbot-contrast-color, var(--color-word-1));\n }\n }\n\n &__step-label {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--color-word-2);\n }\n\n &__step-summary {\n flex: 1 1 0;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--color-word-4);\n }\n\n &__step-duration {\n color: var(--color-word-4);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n }\n\n &__step--active &__step-label {\n color: var(--color-word-1);\n }\n\n &__step-body {\n margin-left: var(--spacing-28);\n margin-block: var(--spacing-4) var(--spacing-8);\n }\n\n &__step-content {\n border: var(--spacing-px) solid var(--color-surface-4);\n border-radius: var(--rounded);\n padding: var(--spacing-8);\n background-color: var(--color-surface-1);\n\n &--scroll {\n max-height: var(--spacing-256);\n }\n }\n\n &__step-payload {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n\n & + & {\n margin-top: var(--spacing-8);\n }\n\n pre {\n border: var(--spacing-px) solid var(--color-surface-4);\n border-radius: var(--rounded);\n padding: var(--spacing-8);\n font-size: var(--text-10);\n max-height: var(--spacing-160);\n overflow: auto;\n white-space: pre-wrap;\n word-break: break-word;\n font-family: var(--font-mono);\n background-color: var(--color-surface-1);\n }\n }\n\n &__step-payload-label {\n font-weight: 600;\n color: var(--color-word-3);\n text-transform: uppercase;\n font-size: var(--text-10);\n letter-spacing: 0.05em;\n }\n\n &__step-payload--error {\n .pk-chatbot-steps__step-payload-label,\n pre {\n color: var(--color-danger);\n }\n\n pre {\n border-color: var(--color-danger-lighten-5);\n }\n }\n }\n</style>\n","<script lang=\"ts\" setup>\n import { computed, reactive, ref, watch } from 'vue'\n import { useI18n } from 'vue-i18n'\n import type { UIChatMessage } from 'models'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n import PkStreamingMarkdownAutoscroll from './PkStreamingMarkdownAutoscroll.vue'\n import PkChatbotStepToolDetail from './PkChatbotStepToolDetail.vue'\n import {\n isReasoningPart,\n isToolPart,\n getPartIcon,\n getPartState,\n getToolPartLabel,\n getToolPartSummary,\n hasRichToolDetail,\n stringifyPayload,\n formatDuration as formatDurationWith,\n } from './utils'\n\n const props = defineProps<{\n message: UIChatMessage\n isStreaming?: boolean\n isDark?: boolean\n }>()\n\n const { t: $t, n: $n } = useI18n({\n useScope: 'global',\n })\n\n type MessagePart = UIChatMessage['parts'][number]\n\n interface Step {\n key: string\n part: MessagePart\n icon?: string\n label?: string\n summary?: string\n durationMs?: number\n isActive: boolean\n text?: string\n toolInput?: unknown\n toolOutput?: unknown\n }\n\n const steps = computed<Step[]>(() => {\n const parts = props.message.parts\n const partTimings = props.message.metadata?.partTimings\n const result: Step[] = []\n for (const [index, part] of parts.entries()) {\n const isReasoning = isReasoningPart(part)\n const isTool = isToolPart(part)\n if (!isReasoning && !isTool) {\n continue\n }\n const toolCallId =\n 'toolCallId' in part ? (part.toolCallId as string) : undefined\n result.push({\n key: toolCallId ?? `${part.type}-${index}`,\n part,\n icon: getPartIcon(part),\n label: getToolPartLabel($t, part),\n summary: getToolPartSummary(part),\n durationMs: toolCallId ? partTimings?.[toolCallId] : undefined,\n isActive:\n Boolean(props.isStreaming) && index === parts.length - 1,\n text: isReasoning && part.text.trim() ? part.text : undefined,\n toolInput: isTool && 'input' in part ? part.input : undefined,\n toolOutput:\n isTool && 'output' in part ? part.output : undefined,\n })\n }\n return result\n })\n\n const totalDurationMs = computed(() => {\n const { createdAt, completedAt } = props.message.metadata ?? {}\n if (!createdAt \|\| !completedAt) {\n return undefined\n }\n return completedAt - createdAt\n })\n\n const formatDuration = (ms?: number) => formatDurationWith($n, ms)\n\n const getStepError = (step: Step) =>\n getPartState(step.part) === 'output-error' &&\n 'errorText' in step.part &&\n typeof step.part.errorText === 'string'\n ? step.part.errorText\n : undefined\n\n const hasBody = (step: Step) => {\n if (step.text \|\| getStepError(step)) {\n return true\n }\n if (hasRichToolDetail(step.part)) {\n return step.toolInput !== undefined \|\| step.toolOutput !== undefined\n }\n return Boolean(\n stringifyPayload(step.toolInput) ??\n stringifyPayload(step.toolOutput),\n )\n }\n\n // --- Expand / collapse ---\n // The active (streaming) step is auto-expanded; a manual toggle always\n // wins over the automatic behavior.\n const manualSteps = reactive(new Map<string, boolean>())\n const isStepExpanded = (step: Step) =>\n manualSteps.get(step.key) ?? step.isActive\n const toggleStep = (step: Step) => {\n manualSteps.set(step.key, !isStepExpanded(step))\n }\n\n // The group is open while streaming and collapses to its header once the\n // answer is complete, unless the user toggled it manually.\n const manualGroup = ref<boolean \| undefined>(undefined)\n const isGroupExpanded = computed(\n () => manualGroup.value ?? Boolean(props.isStreaming),\n )\n // Reset the manual override when a new stream starts so the timeline\n // opens again on regenerate.\n watch(\n () => props.isStreaming,\n (streaming) => {\n if (streaming) {\n manualGroup.value = undefined\n manualSteps.clear()\n }\n },\n )\n</script>\n\n<template>\n <div v-if=\"steps.length\" class=\"pk-chatbot-steps\">\n <button\n type=\"button\"\n class=\"pk-chatbot-steps__header\"\n :aria-expanded=\"isGroupExpanded\"\n @click=\"manualGroup = !isGroupExpanded\">\n <VvIcon\n v-if=\"isStreaming\"\n name=\"line-md:loading-loop\"\n class=\"shrink-0\" />\n <VvIcon v-else name=\"ri:route-line\" class=\"shrink-0\" />\n <span class=\"pk-chatbot-steps__title\">\n {{ $t('messagePart.steps') }}\n </span>\n <span class=\"pk-chatbot-steps__meta\">\n {{ $t('messagePart.stepCount', steps.length) }}\n <template v-if=\"formatDuration(totalDurationMs)\">\n · {{ formatDuration(totalDurationMs) }}\n </template>\n </span>\n <VvIcon\n :name=\"\n isGroupExpanded\n ? 'ri:arrow-up-s-line'\n : 'ri:arrow-down-s-line'\n \"\n class=\"pk-chatbot-steps__chevron shrink-0 ml-auto\" />\n </button>\n <ol v-if=\"isGroupExpanded\" class=\"pk-chatbot-steps__list\">\n <li\n v-for=\"step in steps\"\n :key=\"step.key\"\n class=\"pk-chatbot-steps__step\"\n :class=\"{\n 'pk-chatbot-steps__step--active': step.isActive,\n }\">\n <component\n :is=\"hasBody(step) ? 'button' : 'div'\"\n :type=\"hasBody(step) ? 'button' : undefined\"\n class=\"pk-chatbot-steps__step-header\"\n :aria-expanded=\"\n hasBody(step) ? isStepExpanded(step) : undefined\n \"\n @click=\"hasBody(step) ? toggleStep(step) : undefined\">\n <span\n class=\"pk-chatbot-steps-marker\"\n :class=\"{\n 'pk-chatbot-steps-marker--active': step.isActive,\n }\">\n <VvIcon\n v-if=\"step.isActive\"\n name=\"line-md:loading-loop\" />\n <VvIcon v-else-if=\"step.icon\" :name=\"step.icon\" />\n </span>\n <span class=\"pk-chatbot-steps__step-label\">\n {{ step.label }}\n </span>\n <span class=\"pk-chatbot-steps__step-summary\">\n {{ step.summary }}\n </span>\n <span\n v-if=\"formatDuration(step.durationMs)\"\n class=\"pk-chatbot-steps__step-duration\">\n {{ formatDuration(step.durationMs) }}\n </span>\n <VvIcon\n v-if=\"hasBody(step)\"\n :name=\"\n isStepExpanded(step)\n ? 'ri:arrow-up-s-line'\n : 'ri:arrow-down-s-line'\n \"\n class=\"pk-chatbot-steps__chevron shrink-0 ml-auto\" />\n </component>\n <div\n v-if=\"hasBody(step) && isStepExpanded(step)\"\n class=\"pk-chatbot-steps__step-body\">\n <PkStreamingMarkdownAutoscroll\n v-if=\"step.text && step.isActive\"\n :markdown=\"step.text\"\n :is-dark\n inner-class=\"wysiwyg\"\n class=\"pk-chatbot-steps__step-content pk-chatbot-steps__step-content--scroll\" />\n <PkStreamingMarkdown\n v-else-if=\"step.text\"\n :markdown=\"step.text\"\n :is-dark\n class=\"wysiwyg pk-chatbot-steps__step-content\" />\n <div\n v-else-if=\"getStepError(step)\"\n class=\"pk-chatbot-steps__step-payload pk-chatbot-steps__step-payload--error\">\n <span class=\"pk-chatbot-steps__step-payload-label\">\n {{ $t('messagePart.stepError') }}\n </span>\n <pre>{{ getStepError(step) }}</pre>\n </div>\n <PkChatbotStepToolDetail\n v-else-if=\"hasRichToolDetail(step.part)\"\n :part=\"step.part\" />\n <template v-else>\n <div\n v-if=\"stringifyPayload(step.toolInput)\"\n class=\"pk-chatbot-steps__step-payload\">\n <span class=\"pk-chatbot-steps__step-payload-label\">\n {{ $t('messagePart.stepInput') }}\n </span>\n <pre>{{ stringifyPayload(step.toolInput) }}</pre>\n </div>\n <div\n v-if=\"stringifyPayload(step.toolOutput)\"\n class=\"pk-chatbot-steps__step-payload\">\n <span class=\"pk-chatbot-steps__step-payload-label\">\n {{ $t('messagePart.stepOutput') }}\n </span>\n <pre>{{ stringifyPayload(step.toolOutput) }}</pre>\n </div>\n </template>\n </div>\n </li>\n </ol>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-chatbot-steps {\n width: 100%;\n border: var(--spacing-px) solid var(--color-surface-3);\n border-radius: var(--rounded-lg);\n background-color: var(--color-surface-1);\n font-size: var(--text-12);\n color: var(--color-word-3);\n overflow: hidden;\n\n &__header {\n display: flex;\n align-items: center;\n gap: var(--spacing-8);\n width: 100%;\n min-height: var(--spacing-40);\n padding: var(--spacing-8) var(--spacing-sm);\n text-align: left;\n cursor: pointer;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: var(--color-surface-2);\n }\n }\n\n &__chevron {\n font-size: var(--text-16);\n }\n\n &__title {\n font-weight: 600;\n color: var(--color-word-2);\n flex-grow: 1;\n }\n\n &__meta {\n color: var(--color-word-4);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n }\n\n &__list {\n background-color: var(--color-surface);\n border-top: var(--spacing-px) solid var(--color-surface-3);\n padding: var(--spacing-8) var(--spacing-sm);\n display: flex;\n flex-direction: column;\n }\n\n &__step {\n position: relative;\n\n // Vertical connector between step markers\n &:not(:last-child)::before {\n content: '';\n position: absolute;\n left: var(--spacing-10);\n top: var(--spacing-28);\n bottom: calc(var(--spacing-8) * -1);\n width: var(--spacing-px);\n background-color: var(--color-surface-4);\n }\n }\n\n &__step-header {\n display: flex;\n align-items: center;\n gap: var(--spacing-8);\n width: calc(100% + var(--spacing-16));\n min-height: var(--spacing-36);\n margin-inline: calc(var(--spacing-8) * -1);\n padding: var(--spacing-4) var(--spacing-8);\n text-align: left;\n\n &:is(button) {\n cursor: pointer;\n border-radius: var(--rounded);\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: var(--color-surface-2);\n }\n }\n }\n\n &-marker {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--spacing-20);\n height: var(--spacing-20);\n flex-shrink: 0;\n position: relative;\n z-index: 1;\n background-color: var(--color-surface-1);\n border-radius: var(--rounded-full);\n border: var(--spacing-px) solid var(--color-surface-4);\n\n &--active {\n background-color: var(\n --chatbot-main-color,\n var(--color-surface-4)\n );\n border-color: transparent;\n color: var(--chatbot-contrast-color, var(--color-word-1));\n }\n }\n\n &__step-label {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--color-word-2);\n }\n\n &__step-summary {\n flex: 1 1 0;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--color-word-4);\n }\n\n &__step-duration {\n color: var(--color-word-4);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n }\n\n &__step--active &__step-label {\n color: var(--color-word-1);\n }\n\n &__step-body {\n margin-left: var(--spacing-28);\n margin-block: var(--spacing-4) var(--spacing-8);\n }\n\n &__step-content {\n border: var(--spacing-px) solid var(--color-surface-4);\n border-radius: var(--rounded);\n padding: var(--spacing-8);\n background-color: var(--color-surface-1);\n\n &--scroll {\n max-height: var(--spacing-256);\n }\n }\n\n &__step-payload {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n\n & + & {\n margin-top: var(--spacing-8);\n }\n\n pre {\n border: var(--spacing-px) solid var(--color-surface-4);\n border-radius: var(--rounded);\n padding: var(--spacing-8);\n font-size: var(--text-10);\n max-height: var(--spacing-160);\n overflow: auto;\n white-space: pre-wrap;\n word-break: break-word;\n font-family: var(--font-mono);\n background-color: var(--color-surface-1);\n }\n }\n\n &__step-payload-label {\n font-weight: 600;\n color: var(--color-word-3);\n text-transform: uppercase;\n font-size: var(--text-10);\n letter-spacing: 0.05em;\n }\n\n &__step-payload--error {\n .pk-chatbot-steps__step-payload-label,\n pre {\n color: var(--color-danger);\n }\n\n pre {\n border-color: var(--color-danger-lighten-5);\n }\n }\n }\n</style>\n"],"mappings":"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"}
1	+ {"version":3,"file":"PkChatbotSteps-Dv9NkYER.js","names":[],"sources":["../../../../packages/components/src/chat/PkStreamingMarkdownAutoscroll.vue","../../../../packages/components/src/chat/PkStreamingMarkdownAutoscroll.vue","../../../../packages/components/src/chat/PkChatbotSteps.vue","../../../../packages/components/src/chat/PkChatbotSteps.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n import { nextTick, ref, watch } from 'vue'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n const props = defineProps<{\n markdown?: string\n innerClass?: string\n isDark?: boolean\n }>()\n\n const scrollEl = ref<HTMLDivElement>()\n const lastScrollTop = ref<number>(0)\n const stopAutoScroll = ref<boolean>(false)\n\n const handleScroll = () => {\n if (!scrollEl.value) {\n return\n }\n const currentScrollTop = scrollEl.value.scrollTop\n if (currentScrollTop < lastScrollTop.value) {\n const delta = lastScrollTop.value - currentScrollTop\n if (delta < 50) {\n stopAutoScroll.value = true\n }\n }\n if (currentScrollTop > lastScrollTop.value) {\n if (\n currentScrollTop ===\n scrollEl.value.scrollHeight - scrollEl.value.clientHeight\n ) {\n stopAutoScroll.value = false\n }\n }\n lastScrollTop.value = currentScrollTop\n }\n\n watch(\n () => props.markdown,\n async () => {\n await nextTick()\n if (scrollEl.value && !stopAutoScroll.value) {\n scrollEl.value.scrollTop = scrollEl.value.scrollHeight\n }\n },\n { immediate: true },\n )\n</script>\n\n<template>\n <div\n ref=\"scrollEl\"\n class=\"overflow-auto light-scrollbar\"\n @scroll=\"handleScroll\">\n <PkStreamingMarkdown :markdown :is-dark :class=\"innerClass\" />\n </div>\n</template>\n","<script lang=\"ts\" setup>\n import { nextTick, ref, watch } from 'vue'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n const props = defineProps<{\n markdown?: string\n innerClass?: string\n isDark?: boolean\n }>()\n\n const scrollEl = ref<HTMLDivElement>()\n const lastScrollTop = ref<number>(0)\n const stopAutoScroll = ref<boolean>(false)\n\n const handleScroll = () => {\n if (!scrollEl.value) {\n return\n }\n const currentScrollTop = scrollEl.value.scrollTop\n if (currentScrollTop < lastScrollTop.value) {\n const delta = lastScrollTop.value - currentScrollTop\n if (delta < 50) {\n stopAutoScroll.value = true\n }\n }\n if (currentScrollTop > lastScrollTop.value) {\n if (\n currentScrollTop ===\n scrollEl.value.scrollHeight - scrollEl.value.clientHeight\n ) {\n stopAutoScroll.value = false\n }\n }\n lastScrollTop.value = currentScrollTop\n }\n\n watch(\n () => props.markdown,\n async () => {\n await nextTick()\n if (scrollEl.value && !stopAutoScroll.value) {\n scrollEl.value.scrollTop = scrollEl.value.scrollHeight\n }\n },\n { immediate: true },\n )\n</script>\n\n<template>\n <div\n ref=\"scrollEl\"\n class=\"overflow-auto light-scrollbar\"\n @scroll=\"handleScroll\">\n <PkStreamingMarkdown :markdown :is-dark :class=\"innerClass\" />\n </div>\n</template>\n","<script lang=\"ts\" setup>\n import { computed, reactive, ref, watch } from 'vue'\n import { useI18n } from 'vue-i18n'\n import type { UIChatMessage } from 'models'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n import PkStreamingMarkdownAutoscroll from './PkStreamingMarkdownAutoscroll.vue'\n import PkChatbotStepToolDetail from './PkChatbotStepToolDetail.vue'\n import {\n isReasoningPart,\n isToolPart,\n getPartIcon,\n getPartState,\n getToolPartLabel,\n getToolPartSummary,\n hasRichToolDetail,\n stringifyPayload,\n formatDuration as formatDurationWith,\n } from './utils'\n\n const props = defineProps<{\n message: UIChatMessage\n isStreaming?: boolean\n isDark?: boolean\n }>()\n\n const { t: $t, n: $n } = useI18n({\n useScope: 'global',\n })\n\n type MessagePart = UIChatMessage['parts'][number]\n\n interface Step {\n key: string\n part: MessagePart\n icon?: string\n label?: string\n summary?: string\n durationMs?: number\n isActive: boolean\n text?: string\n toolInput?: unknown\n toolOutput?: unknown\n }\n\n const steps = computed<Step[]>(() => {\n const parts = props.message.parts\n const partTimings = props.message.metadata?.partTimings\n const result: Step[] = []\n for (const [index, part] of parts.entries()) {\n const isReasoning = isReasoningPart(part)\n const isTool = isToolPart(part)\n if (!isReasoning && !isTool) {\n continue\n }\n const toolCallId =\n 'toolCallId' in part ? (part.toolCallId as string) : undefined\n result.push({\n key: toolCallId ?? `${part.type}-${index}`,\n part,\n icon: getPartIcon(part),\n label: getToolPartLabel($t, part),\n summary: getToolPartSummary(part),\n durationMs: toolCallId ? partTimings?.[toolCallId] : undefined,\n isActive:\n Boolean(props.isStreaming) && index === parts.length - 1,\n text: isReasoning && part.text.trim() ? part.text : undefined,\n toolInput: isTool && 'input' in part ? part.input : undefined,\n toolOutput:\n isTool && 'output' in part ? part.output : undefined,\n })\n }\n return result\n })\n\n const totalDurationMs = computed(() => {\n const { createdAt, completedAt } = props.message.metadata ?? {}\n if (!createdAt \|\| !completedAt) {\n return undefined\n }\n return completedAt - createdAt\n })\n\n const formatDuration = (ms?: number) => formatDurationWith($n, ms)\n\n const getStepError = (step: Step) =>\n getPartState(step.part) === 'output-error' &&\n 'errorText' in step.part &&\n typeof step.part.errorText === 'string'\n ? step.part.errorText\n : undefined\n\n const hasBody = (step: Step) => {\n if (step.text \|\| getStepError(step)) {\n return true\n }\n if (hasRichToolDetail(step.part)) {\n return step.toolInput !== undefined \|\| step.toolOutput !== undefined\n }\n return Boolean(\n stringifyPayload(step.toolInput) ??\n stringifyPayload(step.toolOutput),\n )\n }\n\n // --- Expand / collapse ---\n // The active (streaming) step is auto-expanded; a manual toggle always\n // wins over the automatic behavior.\n const manualSteps = reactive(new Map<string, boolean>())\n const isStepExpanded = (step: Step) =>\n manualSteps.get(step.key) ?? step.isActive\n const toggleStep = (step: Step) => {\n manualSteps.set(step.key, !isStepExpanded(step))\n }\n\n // The group is open while streaming and collapses to its header once the\n // answer is complete, unless the user toggled it manually.\n const manualGroup = ref<boolean \| undefined>(undefined)\n const isGroupExpanded = computed(\n () => manualGroup.value ?? Boolean(props.isStreaming),\n )\n // Reset the manual override when a new stream starts so the timeline\n // opens again on regenerate.\n watch(\n () => props.isStreaming,\n (streaming) => {\n if (streaming) {\n manualGroup.value = undefined\n manualSteps.clear()\n }\n },\n )\n</script>\n\n<template>\n <div v-if=\"steps.length\" class=\"pk-chatbot-steps\">\n <button\n type=\"button\"\n class=\"pk-chatbot-steps__header\"\n :aria-expanded=\"isGroupExpanded\"\n @click=\"manualGroup = !isGroupExpanded\">\n <VvIcon\n v-if=\"isStreaming\"\n name=\"line-md:loading-loop\"\n class=\"shrink-0\" />\n <VvIcon v-else name=\"ri:route-line\" class=\"shrink-0\" />\n <span class=\"pk-chatbot-steps__title\">\n {{ $t('messagePart.steps') }}\n </span>\n <span class=\"pk-chatbot-steps__meta\">\n {{ $t('messagePart.stepCount', steps.length) }}\n <template v-if=\"formatDuration(totalDurationMs)\">\n · {{ formatDuration(totalDurationMs) }}\n </template>\n </span>\n <VvIcon\n :name=\"\n isGroupExpanded\n ? 'ri:arrow-up-s-line'\n : 'ri:arrow-down-s-line'\n \"\n class=\"pk-chatbot-steps__chevron shrink-0 ml-auto\" />\n </button>\n <ol v-if=\"isGroupExpanded\" class=\"pk-chatbot-steps__list\">\n <li\n v-for=\"step in steps\"\n :key=\"step.key\"\n class=\"pk-chatbot-steps__step\"\n :class=\"{\n 'pk-chatbot-steps__step--active': step.isActive,\n }\">\n <component\n :is=\"hasBody(step) ? 'button' : 'div'\"\n :type=\"hasBody(step) ? 'button' : undefined\"\n class=\"pk-chatbot-steps__step-header\"\n :aria-expanded=\"\n hasBody(step) ? isStepExpanded(step) : undefined\n \"\n @click=\"hasBody(step) ? toggleStep(step) : undefined\">\n <span\n class=\"pk-chatbot-steps-marker\"\n :class=\"{\n 'pk-chatbot-steps-marker--active': step.isActive,\n }\">\n <VvIcon\n v-if=\"step.isActive\"\n name=\"line-md:loading-loop\" />\n <VvIcon v-else-if=\"step.icon\" :name=\"step.icon\" />\n </span>\n <span class=\"pk-chatbot-steps__step-label\">\n {{ step.label }}\n </span>\n <span class=\"pk-chatbot-steps__step-summary\">\n {{ step.summary }}\n </span>\n <span\n v-if=\"formatDuration(step.durationMs)\"\n class=\"pk-chatbot-steps__step-duration\">\n {{ formatDuration(step.durationMs) }}\n </span>\n <VvIcon\n v-if=\"hasBody(step)\"\n :name=\"\n isStepExpanded(step)\n ? 'ri:arrow-up-s-line'\n : 'ri:arrow-down-s-line'\n \"\n class=\"pk-chatbot-steps__chevron shrink-0 ml-auto\" />\n </component>\n <div\n v-if=\"hasBody(step) && isStepExpanded(step)\"\n class=\"pk-chatbot-steps__step-body\">\n <PkStreamingMarkdownAutoscroll\n v-if=\"step.text && step.isActive\"\n :markdown=\"step.text\"\n :is-dark\n inner-class=\"wysiwyg\"\n class=\"pk-chatbot-steps__step-content pk-chatbot-steps__step-content--scroll\" />\n <PkStreamingMarkdown\n v-else-if=\"step.text\"\n :markdown=\"step.text\"\n :is-dark\n class=\"wysiwyg pk-chatbot-steps__step-content\" />\n <div\n v-else-if=\"getStepError(step)\"\n class=\"pk-chatbot-steps__step-payload pk-chatbot-steps__step-payload--error\">\n <span class=\"pk-chatbot-steps__step-payload-label\">\n {{ $t('messagePart.stepError') }}\n </span>\n <pre>{{ getStepError(step) }}</pre>\n </div>\n <PkChatbotStepToolDetail\n v-else-if=\"hasRichToolDetail(step.part)\"\n :part=\"step.part\" />\n <template v-else>\n <div\n v-if=\"stringifyPayload(step.toolInput)\"\n class=\"pk-chatbot-steps__step-payload\">\n <span class=\"pk-chatbot-steps__step-payload-label\">\n {{ $t('messagePart.stepInput') }}\n </span>\n <pre>{{ stringifyPayload(step.toolInput) }}</pre>\n </div>\n <div\n v-if=\"stringifyPayload(step.toolOutput)\"\n class=\"pk-chatbot-steps__step-payload\">\n <span class=\"pk-chatbot-steps__step-payload-label\">\n {{ $t('messagePart.stepOutput') }}\n </span>\n <pre>{{ stringifyPayload(step.toolOutput) }}</pre>\n </div>\n </template>\n </div>\n </li>\n </ol>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-chatbot-steps {\n width: 100%;\n border: var(--spacing-px) solid var(--color-surface-3);\n border-radius: var(--rounded-lg);\n background-color: var(--color-surface-1);\n font-size: var(--text-12);\n color: var(--color-word-3);\n overflow: hidden;\n\n &__header {\n display: flex;\n align-items: center;\n gap: var(--spacing-8);\n width: 100%;\n min-height: var(--spacing-40);\n padding: var(--spacing-8) var(--spacing-sm);\n text-align: left;\n cursor: pointer;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: var(--color-surface-2);\n }\n }\n\n &__chevron {\n font-size: var(--text-16);\n }\n\n &__title {\n font-weight: 600;\n color: var(--color-word-2);\n flex-grow: 1;\n }\n\n &__meta {\n color: var(--color-word-4);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n }\n\n &__list {\n background-color: var(--color-surface);\n border-top: var(--spacing-px) solid var(--color-surface-3);\n padding: var(--spacing-8) var(--spacing-sm);\n display: flex;\n flex-direction: column;\n }\n\n &__step {\n position: relative;\n\n // Vertical connector between step markers\n &:not(:last-child)::before {\n content: '';\n position: absolute;\n left: var(--spacing-10);\n top: var(--spacing-28);\n bottom: calc(var(--spacing-8) * -1);\n width: var(--spacing-px);\n background-color: var(--color-surface-4);\n }\n }\n\n &__step-header {\n display: flex;\n align-items: center;\n gap: var(--spacing-8);\n width: calc(100% + var(--spacing-16));\n min-height: var(--spacing-36);\n margin-inline: calc(var(--spacing-8) * -1);\n padding: var(--spacing-4) var(--spacing-8);\n text-align: left;\n\n &:is(button) {\n cursor: pointer;\n border-radius: var(--rounded);\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: var(--color-surface-2);\n }\n }\n }\n\n &-marker {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--spacing-20);\n height: var(--spacing-20);\n flex-shrink: 0;\n position: relative;\n z-index: 1;\n background-color: var(--color-surface-1);\n border-radius: var(--rounded-full);\n border: var(--spacing-px) solid var(--color-surface-4);\n\n &--active {\n background-color: var(\n --chatbot-main-color,\n var(--color-surface-4)\n );\n border-color: transparent;\n color: var(--chatbot-contrast-color, var(--color-word-1));\n }\n }\n\n &__step-label {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--color-word-2);\n }\n\n &__step-summary {\n flex: 1 1 0;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--color-word-4);\n }\n\n &__step-duration {\n color: var(--color-word-4);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n }\n\n &__step--active &__step-label {\n color: var(--color-word-1);\n }\n\n &__step-body {\n margin-left: var(--spacing-28);\n margin-block: var(--spacing-4) var(--spacing-8);\n }\n\n &__step-content {\n border: var(--spacing-px) solid var(--color-surface-4);\n border-radius: var(--rounded);\n padding: var(--spacing-8);\n background-color: var(--color-surface-1);\n\n &--scroll {\n max-height: var(--spacing-256);\n }\n }\n\n &__step-payload {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n\n & + & {\n margin-top: var(--spacing-8);\n }\n\n pre {\n border: var(--spacing-px) solid var(--color-surface-4);\n border-radius: var(--rounded);\n padding: var(--spacing-8);\n font-size: var(--text-10);\n max-height: var(--spacing-160);\n overflow: auto;\n white-space: pre-wrap;\n word-break: break-word;\n font-family: var(--font-mono);\n background-color: var(--color-surface-1);\n }\n }\n\n &__step-payload-label {\n font-weight: 600;\n color: var(--color-word-3);\n text-transform: uppercase;\n font-size: var(--text-10);\n letter-spacing: 0.05em;\n }\n\n &__step-payload--error {\n .pk-chatbot-steps__step-payload-label,\n pre {\n color: var(--color-danger);\n }\n\n pre {\n border-color: var(--color-danger-lighten-5);\n }\n }\n }\n</style>\n","<script lang=\"ts\" setup>\n import { computed, reactive, ref, watch } from 'vue'\n import { useI18n } from 'vue-i18n'\n import type { UIChatMessage } from 'models'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n import PkStreamingMarkdownAutoscroll from './PkStreamingMarkdownAutoscroll.vue'\n import PkChatbotStepToolDetail from './PkChatbotStepToolDetail.vue'\n import {\n isReasoningPart,\n isToolPart,\n getPartIcon,\n getPartState,\n getToolPartLabel,\n getToolPartSummary,\n hasRichToolDetail,\n stringifyPayload,\n formatDuration as formatDurationWith,\n } from './utils'\n\n const props = defineProps<{\n message: UIChatMessage\n isStreaming?: boolean\n isDark?: boolean\n }>()\n\n const { t: $t, n: $n } = useI18n({\n useScope: 'global',\n })\n\n type MessagePart = UIChatMessage['parts'][number]\n\n interface Step {\n key: string\n part: MessagePart\n icon?: string\n label?: string\n summary?: string\n durationMs?: number\n isActive: boolean\n text?: string\n toolInput?: unknown\n toolOutput?: unknown\n }\n\n const steps = computed<Step[]>(() => {\n const parts = props.message.parts\n const partTimings = props.message.metadata?.partTimings\n const result: Step[] = []\n for (const [index, part] of parts.entries()) {\n const isReasoning = isReasoningPart(part)\n const isTool = isToolPart(part)\n if (!isReasoning && !isTool) {\n continue\n }\n const toolCallId =\n 'toolCallId' in part ? (part.toolCallId as string) : undefined\n result.push({\n key: toolCallId ?? `${part.type}-${index}`,\n part,\n icon: getPartIcon(part),\n label: getToolPartLabel($t, part),\n summary: getToolPartSummary(part),\n durationMs: toolCallId ? partTimings?.[toolCallId] : undefined,\n isActive:\n Boolean(props.isStreaming) && index === parts.length - 1,\n text: isReasoning && part.text.trim() ? part.text : undefined,\n toolInput: isTool && 'input' in part ? part.input : undefined,\n toolOutput:\n isTool && 'output' in part ? part.output : undefined,\n })\n }\n return result\n })\n\n const totalDurationMs = computed(() => {\n const { createdAt, completedAt } = props.message.metadata ?? {}\n if (!createdAt \|\| !completedAt) {\n return undefined\n }\n return completedAt - createdAt\n })\n\n const formatDuration = (ms?: number) => formatDurationWith($n, ms)\n\n const getStepError = (step: Step) =>\n getPartState(step.part) === 'output-error' &&\n 'errorText' in step.part &&\n typeof step.part.errorText === 'string'\n ? step.part.errorText\n : undefined\n\n const hasBody = (step: Step) => {\n if (step.text \|\| getStepError(step)) {\n return true\n }\n if (hasRichToolDetail(step.part)) {\n return step.toolInput !== undefined \|\| step.toolOutput !== undefined\n }\n return Boolean(\n stringifyPayload(step.toolInput) ??\n stringifyPayload(step.toolOutput),\n )\n }\n\n // --- Expand / collapse ---\n // The active (streaming) step is auto-expanded; a manual toggle always\n // wins over the automatic behavior.\n const manualSteps = reactive(new Map<string, boolean>())\n const isStepExpanded = (step: Step) =>\n manualSteps.get(step.key) ?? step.isActive\n const toggleStep = (step: Step) => {\n manualSteps.set(step.key, !isStepExpanded(step))\n }\n\n // The group is open while streaming and collapses to its header once the\n // answer is complete, unless the user toggled it manually.\n const manualGroup = ref<boolean \| undefined>(undefined)\n const isGroupExpanded = computed(\n () => manualGroup.value ?? Boolean(props.isStreaming),\n )\n // Reset the manual override when a new stream starts so the timeline\n // opens again on regenerate.\n watch(\n () => props.isStreaming,\n (streaming) => {\n if (streaming) {\n manualGroup.value = undefined\n manualSteps.clear()\n }\n },\n )\n</script>\n\n<template>\n <div v-if=\"steps.length\" class=\"pk-chatbot-steps\">\n <button\n type=\"button\"\n class=\"pk-chatbot-steps__header\"\n :aria-expanded=\"isGroupExpanded\"\n @click=\"manualGroup = !isGroupExpanded\">\n <VvIcon\n v-if=\"isStreaming\"\n name=\"line-md:loading-loop\"\n class=\"shrink-0\" />\n <VvIcon v-else name=\"ri:route-line\" class=\"shrink-0\" />\n <span class=\"pk-chatbot-steps__title\">\n {{ $t('messagePart.steps') }}\n </span>\n <span class=\"pk-chatbot-steps__meta\">\n {{ $t('messagePart.stepCount', steps.length) }}\n <template v-if=\"formatDuration(totalDurationMs)\">\n · {{ formatDuration(totalDurationMs) }}\n </template>\n </span>\n <VvIcon\n :name=\"\n isGroupExpanded\n ? 'ri:arrow-up-s-line'\n : 'ri:arrow-down-s-line'\n \"\n class=\"pk-chatbot-steps__chevron shrink-0 ml-auto\" />\n </button>\n <ol v-if=\"isGroupExpanded\" class=\"pk-chatbot-steps__list\">\n <li\n v-for=\"step in steps\"\n :key=\"step.key\"\n class=\"pk-chatbot-steps__step\"\n :class=\"{\n 'pk-chatbot-steps__step--active': step.isActive,\n }\">\n <component\n :is=\"hasBody(step) ? 'button' : 'div'\"\n :type=\"hasBody(step) ? 'button' : undefined\"\n class=\"pk-chatbot-steps__step-header\"\n :aria-expanded=\"\n hasBody(step) ? isStepExpanded(step) : undefined\n \"\n @click=\"hasBody(step) ? toggleStep(step) : undefined\">\n <span\n class=\"pk-chatbot-steps-marker\"\n :class=\"{\n 'pk-chatbot-steps-marker--active': step.isActive,\n }\">\n <VvIcon\n v-if=\"step.isActive\"\n name=\"line-md:loading-loop\" />\n <VvIcon v-else-if=\"step.icon\" :name=\"step.icon\" />\n </span>\n <span class=\"pk-chatbot-steps__step-label\">\n {{ step.label }}\n </span>\n <span class=\"pk-chatbot-steps__step-summary\">\n {{ step.summary }}\n </span>\n <span\n v-if=\"formatDuration(step.durationMs)\"\n class=\"pk-chatbot-steps__step-duration\">\n {{ formatDuration(step.durationMs) }}\n </span>\n <VvIcon\n v-if=\"hasBody(step)\"\n :name=\"\n isStepExpanded(step)\n ? 'ri:arrow-up-s-line'\n : 'ri:arrow-down-s-line'\n \"\n class=\"pk-chatbot-steps__chevron shrink-0 ml-auto\" />\n </component>\n <div\n v-if=\"hasBody(step) && isStepExpanded(step)\"\n class=\"pk-chatbot-steps__step-body\">\n <PkStreamingMarkdownAutoscroll\n v-if=\"step.text && step.isActive\"\n :markdown=\"step.text\"\n :is-dark\n inner-class=\"wysiwyg\"\n class=\"pk-chatbot-steps__step-content pk-chatbot-steps__step-content--scroll\" />\n <PkStreamingMarkdown\n v-else-if=\"step.text\"\n :markdown=\"step.text\"\n :is-dark\n class=\"wysiwyg pk-chatbot-steps__step-content\" />\n <div\n v-else-if=\"getStepError(step)\"\n class=\"pk-chatbot-steps__step-payload pk-chatbot-steps__step-payload--error\">\n <span class=\"pk-chatbot-steps__step-payload-label\">\n {{ $t('messagePart.stepError') }}\n </span>\n <pre>{{ getStepError(step) }}</pre>\n </div>\n <PkChatbotStepToolDetail\n v-else-if=\"hasRichToolDetail(step.part)\"\n :part=\"step.part\" />\n <template v-else>\n <div\n v-if=\"stringifyPayload(step.toolInput)\"\n class=\"pk-chatbot-steps__step-payload\">\n <span class=\"pk-chatbot-steps__step-payload-label\">\n {{ $t('messagePart.stepInput') }}\n </span>\n <pre>{{ stringifyPayload(step.toolInput) }}</pre>\n </div>\n <div\n v-if=\"stringifyPayload(step.toolOutput)\"\n class=\"pk-chatbot-steps__step-payload\">\n <span class=\"pk-chatbot-steps__step-payload-label\">\n {{ $t('messagePart.stepOutput') }}\n </span>\n <pre>{{ stringifyPayload(step.toolOutput) }}</pre>\n </div>\n </template>\n </div>\n </li>\n </ol>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-chatbot-steps {\n width: 100%;\n border: var(--spacing-px) solid var(--color-surface-3);\n border-radius: var(--rounded-lg);\n background-color: var(--color-surface-1);\n font-size: var(--text-12);\n color: var(--color-word-3);\n overflow: hidden;\n\n &__header {\n display: flex;\n align-items: center;\n gap: var(--spacing-8);\n width: 100%;\n min-height: var(--spacing-40);\n padding: var(--spacing-8) var(--spacing-sm);\n text-align: left;\n cursor: pointer;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: var(--color-surface-2);\n }\n }\n\n &__chevron {\n font-size: var(--text-16);\n }\n\n &__title {\n font-weight: 600;\n color: var(--color-word-2);\n flex-grow: 1;\n }\n\n &__meta {\n color: var(--color-word-4);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n }\n\n &__list {\n background-color: var(--color-surface);\n border-top: var(--spacing-px) solid var(--color-surface-3);\n padding: var(--spacing-8) var(--spacing-sm);\n display: flex;\n flex-direction: column;\n }\n\n &__step {\n position: relative;\n\n // Vertical connector between step markers\n &:not(:last-child)::before {\n content: '';\n position: absolute;\n left: var(--spacing-10);\n top: var(--spacing-28);\n bottom: calc(var(--spacing-8) * -1);\n width: var(--spacing-px);\n background-color: var(--color-surface-4);\n }\n }\n\n &__step-header {\n display: flex;\n align-items: center;\n gap: var(--spacing-8);\n width: calc(100% + var(--spacing-16));\n min-height: var(--spacing-36);\n margin-inline: calc(var(--spacing-8) * -1);\n padding: var(--spacing-4) var(--spacing-8);\n text-align: left;\n\n &:is(button) {\n cursor: pointer;\n border-radius: var(--rounded);\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: var(--color-surface-2);\n }\n }\n }\n\n &-marker {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--spacing-20);\n height: var(--spacing-20);\n flex-shrink: 0;\n position: relative;\n z-index: 1;\n background-color: var(--color-surface-1);\n border-radius: var(--rounded-full);\n border: var(--spacing-px) solid var(--color-surface-4);\n\n &--active {\n background-color: var(\n --chatbot-main-color,\n var(--color-surface-4)\n );\n border-color: transparent;\n color: var(--chatbot-contrast-color, var(--color-word-1));\n }\n }\n\n &__step-label {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--color-word-2);\n }\n\n &__step-summary {\n flex: 1 1 0;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--color-word-4);\n }\n\n &__step-duration {\n color: var(--color-word-4);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n }\n\n &__step--active &__step-label {\n color: var(--color-word-1);\n }\n\n &__step-body {\n margin-left: var(--spacing-28);\n margin-block: var(--spacing-4) var(--spacing-8);\n }\n\n &__step-content {\n border: var(--spacing-px) solid var(--color-surface-4);\n border-radius: var(--rounded);\n padding: var(--spacing-8);\n background-color: var(--color-surface-1);\n\n &--scroll {\n max-height: var(--spacing-256);\n }\n }\n\n &__step-payload {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2);\n\n & + & {\n margin-top: var(--spacing-8);\n }\n\n pre {\n border: var(--spacing-px) solid var(--color-surface-4);\n border-radius: var(--rounded);\n padding: var(--spacing-8);\n font-size: var(--text-10);\n max-height: var(--spacing-160);\n overflow: auto;\n white-space: pre-wrap;\n word-break: break-word;\n font-family: var(--font-mono);\n background-color: var(--color-surface-1);\n }\n }\n\n &__step-payload-label {\n font-weight: 600;\n color: var(--color-word-3);\n text-transform: uppercase;\n font-size: var(--text-10);\n letter-spacing: 0.05em;\n }\n\n &__step-payload--error {\n .pk-chatbot-steps__step-payload-label,\n pre {\n color: var(--color-danger);\n }\n\n pre {\n border-color: var(--color-danger-lighten-5);\n }\n }\n }\n</style>\n"],"mappings":"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"}

package/dist-vue/_chunks/{PkChatbotViewChat-C08TsXiL.js → PkChatbotViewChat-CAqvbbfN.js} RENAMED Viewed

@@ -1,7 +1,7 @@
-import { t as e } from "./useChatbotStore-BJ-EDmND.js";
+import { t as e } from "./useChatbotStore-DZiorgLW.js";
 import { t } from "./useLocalizedString-PfaKjIQY.js";
 import { t as n } from "./PkAvatar-CyIgsndA.js";
-import { t as r } from "./PkChatbotMessages-B4qfTNOJ.js";
+import { t as r } from "./PkChatbotMessages-BrufA7o1.js";
 import { t as i } from "./PkChatbotInput-DTazYlPd.js";
 import { t as a } from "./PkChatbotEmptyState-BGOC6vxr.js";
 import { VvIcon as o } from "@volverjs/ui-vue/components";
@@ -28,7 +28,7 @@ var j = {
 }, M = {
 	key: 1,
 	class: "pk-aurora__fallback"
-}, N = "\nattribute vec2 a_position;\nvoid main() {\n    gl_Position = vec4(a_position, 0.0, 1.0);\n}", P = "\nprecision mediump float;\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform vec3 u_color;\nuniform vec2 u_center;\nuniform vec2 u_half;\nuniform float u_spread;\n\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\n\nfloat snoise(vec2 v) {\n    const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n        -0.577350269189626, 0.024390243902439);\n    vec2 i = floor(v + dot(v, C.yy));\n    vec2 x0 = v - i + dot(i, C.xx);\n    vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n    vec4 x12 = x0.xyxy + C.xxzz;\n    x12.xy -= i1;\n    i = mod(i, 289.0);\n    vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n        + i.x + vec3(0.0, i1.x, 1.0));\n    vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n        dot(x12.zw, x12.zw)), 0.0);\n    m = m * m;\n    m = m * m;\n    vec3 x = 2.0 * fract(p * C.www) - 1.0;\n    vec3 h = abs(x) - 0.5;\n    vec3 ox = floor(x + 0.5);\n    vec3 a0 = x - ox;\n    m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n    vec3 g;\n    g.x = a0.x * x0.x + h.x * x0.y;\n    g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n    return 130.0 * dot(m, g);\n}\n\nvoid main() {\n    vec2 px = gl_FragCoord.xy;\n    vec2 rel = px - u_center;\n\n    // Ignition: the ellipse lights up expanding from the center on mount\n    float intro = smoothstep(0.0, 1.4, u_time);\n\n    // Breathing: size and brightness oscillate gently but visibly\n    float breath = 1.0\n        + 0.12 * sin(u_time * 0.55)\n        + 0.06 * snoise(vec2(u_time * 0.1, 3.7));\n    float pulse = 1.0 + 0.2 * sin(u_time * 0.55 + 1.3);\n\n    // Keep it simple (Gemini-style): one huge soft elliptical glow\n    // centered on the pill\n    vec2 radii = vec2(u_half.x * 0.95, u_half.y * 6.5)\n        * u_spread\n        * breath\n        * mix(0.15, 1.0, intro);\n    float r = length(rel / max(radii, vec2(1.0)));\n    float glow = exp(-r * r * 2.2);\n\n    // Never cut hard against the canvas bounds\n    vec2 m = min(px, u_resolution - px);\n    glow *= smoothstep(0.0, 32.0, min(m.x, m.y));\n\n    // Dither: breaks the 8-bit banding rings of the very soft gradient\n    // (no CSS blur on the canvas, the noise must fully mask the bands)\n    glow = max(glow + (snoise(px * 0.9) - 0.5) * 0.03, 0.0);\n\n    float alpha = glow * 0.2 * pulse * intro;\n\n    // Premultiplied alpha (default canvas compositing)\n    gl_FragColor = vec4(u_color * alpha, alpha);\n}", re = /* @__PURE__ */ g({
+}, N = "\nattribute vec2 a_position;\nvoid main() {\n    gl_Position = vec4(a_position, 0.0, 1.0);\n}", P = "\nprecision mediump float;\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform vec3 u_color;\nuniform vec2 u_center;\nuniform vec2 u_half;\nuniform float u_spread;\n\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\n\nfloat snoise(vec2 v) {\n    const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n        -0.577350269189626, 0.024390243902439);\n    vec2 i = floor(v + dot(v, C.yy));\n    vec2 x0 = v - i + dot(i, C.xx);\n    vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n    vec4 x12 = x0.xyxy + C.xxzz;\n    x12.xy -= i1;\n    i = mod(i, 289.0);\n    vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n        + i.x + vec3(0.0, i1.x, 1.0));\n    vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n        dot(x12.zw, x12.zw)), 0.0);\n    m = m * m;\n    m = m * m;\n    vec3 x = 2.0 * fract(p * C.www) - 1.0;\n    vec3 h = abs(x) - 0.5;\n    vec3 ox = floor(x + 0.5);\n    vec3 a0 = x - ox;\n    m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n    vec3 g;\n    g.x = a0.x * x0.x + h.x * x0.y;\n    g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n    return 130.0 * dot(m, g);\n}\n\nvoid main() {\n    vec2 px = gl_FragCoord.xy;\n    vec2 rel = px - u_center;\n\n    // Ignition: the ellipse lights up expanding from the center on mount\n    float intro = smoothstep(0.0, 1.4, u_time);\n\n    // Breathing: size and brightness oscillate gently but visibly\n    float breath = 1.0\n        + 0.12 * sin(u_time * 0.55)\n        + 0.06 * snoise(vec2(u_time * 0.1, 3.7));\n    float pulse = 1.0 + 0.2 * sin(u_time * 0.55 + 1.3);\n\n    // Keep it simple (Gemini-style): one huge soft elliptical glow\n    // centered on the pill\n    vec2 radii = vec2(u_half.x * 0.95, u_half.y * 6.5)\n        * u_spread\n        * breath\n        * mix(0.15, 1.0, intro);\n    float r = length(rel / max(radii, vec2(1.0)));\n    float glow = exp(-r * r * 2.2);\n\n    // Never cut hard against the canvas bounds\n    vec2 m = min(px, u_resolution - px);\n    glow *= smoothstep(0.0, 32.0, min(m.x, m.y));\n\n    // Dither: breaks the 8-bit banding rings of the very soft gradient\n    // (no CSS blur on the canvas, the noise must fully mask the bands)\n    glow = max(glow + (snoise(px * 0.9) - 0.5) * 0.03, 0.0);\n\n    float alpha = glow * 0.2 * pulse * intro;\n\n    // Premultiplied alpha (default canvas compositing)\n    gl_FragColor = vec4(u_color * alpha, alpha);\n}", F = /* @__PURE__ */ g({
 	__name: "PkAuroraCanvas",
 	props: { sourceSelector: {} },
 	setup(e) {
@@ -110,16 +110,16 @@ var j = {
 			class: "pk-aurora__canvas"
 		}, null, 512))]));
 	}
-}), ie = { class: "pk-chatbot-view-chat__input-stage" }, ae = {
+}), re = { class: "pk-chatbot-view-chat__input-stage" }, ie = {
 	key: 0,
 	class: "p-md border-t border-surface-3 text-center text-12 text-danger-darken-2 bg-surface-danger"
-}, oe = { class: "pk-chatbot-view-chat__agent-chip" }, se = {
+}, ae = { class: "pk-chatbot-view-chat__agent-chip" }, oe = {
 	key: 0,
 	class: "pk-chatbot-view-chat__agent-chip-name"
-}, ce = {
+}, se = {
 	key: 0,
 	class: "pk-chatbot-view-chat__drop-overlay"
-}, F = /* @__PURE__ */ g({
+}, I = /* @__PURE__ */ g({
 	__name: "PkChatbotViewChat",
 	props: {
 		agentId: {},
@@ -128,13 +128,13 @@ var j = {
 	},
 	emits: ["show-info", "revise"],
 	setup(g, { emit: y }) {
-		let b = h(() => import("./PkToolShowForm-C-mWyeka.js").then((e) => e.n)), x = h(() => import("./PkToolRequestConfirm-CQNa3seA.js")), C = h(() => import("./PkToolShowContactForm-B6-MsExL.js").then((e) => e.n)), T = h(() => import("./PkToolShowSuggestedReply-DoCHIEzz.js").then((e) => e.n)), A = h(() => import("./PkToolShowSources-CFh-i60o.js").then((e) => e.n)), j = h(() => import("./PkToolRequestGeolocation-aw2-ecEn.js")), M = h(() => import("./PkToolRequestOAuthConnection-lo7hCSBC.js")), N = h(() => import("./PkToolShowLocation-5G8p9mED.js").then((e) => e.n)), P = h(() => import("./PkToolShowDiagram-G0hdi_Vf.js")), F = g, I = y, L = e(F.agentId), { agentInterface: R, agentFileUpload: z, actions: le, revisedAnswers: ue, messages: B, chat: V, messageFeedbacks: de, feedbackDialogMessage: H, isFeedbackSubmitting: fe, isFeedbackSubmitted: pe, feedbackSubmitError: me, isLeadSubmitted: he, isLoadingSubmitLead: ge, submitLeadError: _e, input: U, inputMessagePlaceholder: ve, isConversationBlocked: ye, baseUrl: be, pendingAttachments: W, isAttachmentLimitReached: xe, fileLimitError: Se, apiClient: G, isDark: K } = te(L), { handleSubmit: q, stopGeneration: Ce, regenerate: J, onUpvote: we, onDownvote: Te, onFeedback: Ee, onFeedbackSubmit: De, onLeadSubmit: Oe, startNewChat: ke, addToolOutput: Y, handleFileSelect: X, clearFileLimitError: Ae } = L, { t: Z } = k({ useScope: "global" }), je = c(() => {
-			let e = Se.value;
+		let b = h(() => import("./PkToolShowForm-CQuX08lk.js").then((e) => e.n)), x = h(() => import("./PkToolShowContactForm-B6-MsExL.js").then((e) => e.n)), C = h(() => import("./PkToolShowSuggestedReply-DoCHIEzz.js").then((e) => e.n)), T = h(() => import("./PkToolShowSources-CFh-i60o.js").then((e) => e.n)), A = h(() => import("./PkToolRequestGeolocation-aw2-ecEn.js")), j = h(() => import("./PkToolRequestOAuthConnection-lo7hCSBC.js")), M = h(() => import("./PkToolShowLocation-5G8p9mED.js").then((e) => e.n)), N = h(() => import("./PkToolShowDiagram-G0hdi_Vf.js")), P = g, I = y, L = e(P.agentId), { agentInterface: R, agentFileUpload: z, actions: ce, revisedAnswers: le, messages: B, chat: V, messageFeedbacks: ue, feedbackDialogMessage: H, isFeedbackSubmitting: de, isFeedbackSubmitted: fe, feedbackSubmitError: pe, isLeadSubmitted: me, isLoadingSubmitLead: he, submitLeadError: ge, input: U, inputMessagePlaceholder: _e, isConversationBlocked: ve, baseUrl: ye, pendingAttachments: W, isAttachmentLimitReached: be, fileLimitError: xe, apiClient: G, isDark: K } = te(L), { handleSubmit: q, stopGeneration: Se, regenerate: J, onUpvote: Ce, onDownvote: we, onFeedback: Te, onFeedbackSubmit: Ee, onLeadSubmit: De, startNewChat: Oe, addToolOutput: Y, addToolApprovalResponse: ke, handleFileSelect: X, clearFileLimitError: Ae } = L, { t: Z } = k({ useScope: "global" }), je = c(() => {
+			let e = xe.value;
 			if (e) return e.reason === "per-chat" ? Z("message.fileLimitPerChat", { max: e.max }) : Z("message.fileLimitPerMessage", { max: e.max });
-		}), Me = t(() => R.value?.dismissableNotice), Ne = c(() => B.value.some((e) => e.role === "user")), Q = c(() => F.modifier === "fullscreen" && !Ne.value), Pe = ne(R, () => F.userName), Fe = D("chatViewEl"), Ie = async (e) => (await G.value.expandSourceContext(F.agentId, e.documentId, e.chunkIndex)).content, Le = async (e) => {
-			let t = await G.value.downloadSourceDocument(F.agentId, e);
+		}), Q = t(() => R.value?.dismissableNotice), Me = c(() => B.value.some((e) => e.role === "user")), $ = c(() => P.modifier === "fullscreen" && !Me.value), Ne = ne(R, () => P.userName), Pe = D("chatViewEl"), Fe = async (e) => (await G.value.expandSourceContext(P.agentId, e.documentId, e.chunkIndex)).content, Ie = async (e) => {
+			let t = await G.value.downloadSourceDocument(P.agentId, e);
 			window.open(t.downloadUrl, "_blank");
-		}, { isOverDropZone: $ } = ee(Fe, {
+		}, { isOverDropZone: Le } = ee(Pe, {
 			dataTypes: c(() => z.value?.allowedMimeTypes ?? []),
 			onDrop: (e) => {
 				if (!(!z.value?.enabled || !e)) for (let t of e) X(t);
@@ -144,19 +144,19 @@ var j = {
 			let c = o;
 			return S(), d("div", {
 				ref_key: "chatViewEl",
-				ref: Fe,
+				ref: Pe,
 				class: v(["pk-chatbot-view-chat", {
-					"pk-chatbot-view-chat--dragover": E($) && E(z)?.enabled,
-					"pk-chatbot-view-chat--empty": Q.value
+					"pk-chatbot-view-chat--dragover": E(Le) && E(z)?.enabled,
+					"pk-chatbot-view-chat--empty": $.value
 				}])
 			}, [
 				m(s, {
 					name: "pk-chatbot-view-chat-fade",
 					mode: "out-in"
 				}, {
-					default: O(() => [Q.value ? (S(), l(a, {
+					default: O(() => [$.value ? (S(), l(a, {
 						key: 0,
-						greeting: E(Pe),
+						greeting: E(Ne),
 						logo: E(R)?.logo,
 						name: E(L).name
 					}, null, 8, [
@@ -166,40 +166,47 @@ var j = {
 					])) : (S(), l(r, {
 						key: 1,
 						class: "flex flex-col flex-1 min-h-0 p-md overflow-y-auto",
+						interactive: "",
 						messages: E(B),
 						status: E(V).status,
 						error: E(V).error,
 						"main-color": E(R)?.mainColor,
 						"text-color": E(R)?.textColor,
-						"revised-answers": E(ue),
-						actions: E(le),
-						"message-feedbacks": E(de),
+						"revised-answers": E(le),
+						actions: E(ce),
+						"message-feedbacks": E(ue),
 						"feedback-message-id": E(H)?.id,
-						"feedback-loading": E(fe),
-						"feedback-submitted": E(pe),
-						"feedback-error": E(me),
+						"feedback-loading": E(de),
+						"feedback-submitted": E(fe),
+						"feedback-error": E(pe),
 						"show-extended-steps": E(R)?.showExtendedSteps,
 						"is-dark": E(K),
 						"show-scroll-to-bottom": g.modifier === "fullscreen",
-						onFeedbackSubmit: t[1] ||= (e) => E(De)(e),
+						onFeedbackSubmit: t[1] ||= (e) => E(Ee)(e),
 						onFeedbackClose: t[2] ||= (e) => H.value = void 0,
 						onRegenerate: E(J),
 						onAutoRetry: E(J),
-						onResetChat: E(ke),
+						onResetChat: E(Oe),
 						onShowInfo: t[3] ||= (e) => I("show-info", e),
 						onRevise: t[4] ||= (e) => I("revise", e),
-						onUpvote: E(we),
-						onDownvote: E(Te),
-						onFeedback: E(Ee)
+						onUpvote: E(Ce),
+						onDownvote: E(we),
+						onFeedback: E(Te),
+						onApprovalRespond: E(ke),
+						onConfirmRespond: t[5] ||= ({ toolCallId: e, confirmed: t }) => E(Y)({
+							tool: "requestConfirm",
+							toolCallId: e,
+							output: t ? "confirmed" : "cancelled"
+						})
 					}, {
-						"tool-showContactForm": O(({ part: e }) => [m(E(C), {
+						"tool-showContactForm": O(({ part: e }) => [m(E(x), {
 							part: e,
-							readonly: !E(be),
-							submitted: E(he),
-							loading: E(ge),
-							error: E(_e),
+							readonly: !E(ye),
+							submitted: E(me),
+							loading: E(he),
+							error: E(ge),
 							"privacy-policy-notice": E(R)?.privacyPolicyNotice,
-							onSubmit: E(Oe)
+							onSubmit: E(De)
 						}, null, 8, [
 							"part",
 							"readonly",
@@ -209,16 +216,16 @@ var j = {
 							"privacy-policy-notice",
 							"onSubmit"
 						])]),
-						"tool-showSuggestedReply": O(({ part: e }) => [m(E(T), {
+						"tool-showSuggestedReply": O(({ part: e }) => [m(E(C), {
 							part: e,
 							onSelect: t[0] ||= (e) => {
 								U.value = e, E(q)();
 							}
 						}, null, 8, ["part"])]),
-						"tool-showSources": O(({ part: e }) => [m(E(A), {
+						"tool-showSources": O(({ part: e }) => [m(E(T), {
 							part: e,
-							"on-expand-context": Ie,
-							"on-download": Le
+							"on-expand-context": Fe,
+							"on-download": Ie
 						}, null, 8, ["part"])]),
 						"tool-showForm": O(({ part: e }) => [m(s, { mode: "out-in" }, {
 							default: O(() => [m(E(b), {
@@ -243,17 +250,9 @@ var j = {
 							}, null, 8, ["part", "onSelect"])]),
 							_: 2
 						}, 1024)]),
-						"tool-requestConfirm": O(({ part: e }) => [m(E(x), {
+						"tool-requestOAuthConnection": O(({ part: e }) => [m(E(j), {
 							part: e,
-							onConfirm: (t) => E(Y)({
-								tool: "requestConfirm",
-								toolCallId: e.toolCallId,
-								output: t ? "confirmed" : "cancelled"
-							})
-						}, null, 8, ["part", "onConfirm"])]),
-						"tool-requestOAuthConnection": O(({ part: e }) => [m(E(M), {
-							part: e,
-							"resolve-connection": (e) => E(G).getOAuthAuthorizeUrl(F.agentId, e),
+							"resolve-connection": (e) => E(G).getOAuthAuthorizeUrl(P.agentId, e),
 							onConnected: (t) => E(Y)({
 								tool: "requestOAuthConnection",
 								toolCallId: e.toolCallId,
@@ -267,7 +266,7 @@ var j = {
 							"resolve-connection",
 							"onConnected"
 						])]),
-						"tool-requestGeolocation": O(({ part: e }) => [m(E(j), {
+						"tool-requestGeolocation": O(({ part: e }) => [m(E(A), {
 							part: e,
 							"reverse-geocode": (e, t) => E(G).reverseGeocode(e, t),
 							onResult: (t) => E(Y)({
@@ -280,7 +279,7 @@ var j = {
 							"reverse-geocode",
 							"onResult"
 						])]),
-						"tool-showLocation": O(({ part: e }) => [m(E(N), {
+						"tool-showLocation": O(({ part: e }) => [m(E(M), {
 							part: e,
 							"is-dark": E(K),
 							"main-color": E(R)?.mainColor,
@@ -291,7 +290,7 @@ var j = {
 							"main-color",
 							"forward-geocode"
 						])]),
-						"tool-showDiagram": O(({ part: e }) => [m(E(P), {
+						"tool-showDiagram": O(({ part: e }) => [m(E(N), {
 							part: e,
 							"is-dark": E(K)
 						}, null, 8, ["part", "is-dark"])]),
@@ -317,42 +316,43 @@ var j = {
 						"onResetChat",
 						"onUpvote",
 						"onDownvote",
-						"onFeedback"
+						"onFeedback",
+						"onApprovalRespond"
 					]))]),
 					_: 1
 				}),
-				f("div", ie, [m(s, { name: "pk-chatbot-view-chat-fade" }, {
-					default: O(() => [Q.value ? (S(), l(re, {
+				f("div", re, [m(s, { name: "pk-chatbot-view-chat-fade" }, {
+					default: O(() => [$.value ? (S(), l(F, {
 						key: 0,
 						class: "pk-chatbot-view-chat__aurora",
 						"source-selector": ".pk-chatbot-input__form"
 					})) : u("", !0)]),
 					_: 1
-				}), E(ye) ? (S(), d("div", ae, w(E(Z)("message.chatErrorConversationBlocked")), 1)) : (S(), l(i, {
+				}), E(ve) ? (S(), d("div", ie, w(E(Z)("message.chatErrorConversationBlocked")), 1)) : (S(), l(i, {
 					key: 1,
 					modelValue: E(U),
-					"onUpdate:modelValue": t[5] ||= (e) => _(U) ? U.value = e : null,
+					"onUpdate:modelValue": t[6] ||= (e) => _(U) ? U.value = e : null,
 					"pending-attachments": E(W),
-					"onUpdate:pendingAttachments": t[6] ||= (e) => _(W) ? W.value = e : null,
-					placeholder: E(ve),
-					"dismissable-notice": E(Me) && E(V).messages.length <= 1 ? E(Me) : void 0,
+					"onUpdate:pendingAttachments": t[7] ||= (e) => _(W) ? W.value = e : null,
+					placeholder: E(_e),
+					"dismissable-notice": E(Q) && E(V).messages.length <= 1 ? E(Q) : void 0,
 					status: E(V).status,
 					"max-message-length": E(R)?.maxMessageLength,
 					"file-upload": E(z),
-					"attachment-limit-reached": E(xe),
+					"attachment-limit-reached": E(be),
 					"attachment-notice": je.value,
-					onStopGeneration: E(Ce),
+					onStopGeneration: E(Se),
 					onSubmit: E(q),
 					onFileSelect: E(X),
 					onDismissAttachmentNotice: E(Ae)
 				}, p({ _: 2 }, [g.modifier === "fullscreen" ? {
 					name: "prepend",
-					fn: O(() => [f("span", oe, [m(n, {
+					fn: O(() => [f("span", ae, [m(n, {
 						modifiers: "surface",
 						class: "pk-chatbot-view-chat__agent-chip-avatar",
 						"img-src": E(R)?.logo,
 						name: E(L).name
-					}, null, 8, ["img-src", "name"]), E(L).name ? (S(), d("strong", se, w(E(L).name), 1)) : u("", !0)])]),
+					}, null, 8, ["img-src", "name"]), E(L).name ? (S(), d("strong", oe, w(E(L).name), 1)) : u("", !0)])]),
 					key: "0"
 				} : void 0]), 1032, [
 					"modelValue",
@@ -370,7 +370,7 @@ var j = {
 					"onDismissAttachmentNotice"
 				]))]),
 				m(s, null, {
-					default: O(() => [E($) && E(z)?.enabled ? (S(), d("div", ce, [m(c, {
+					default: O(() => [E(Le) && E(z)?.enabled ? (S(), d("div", se, [m(c, {
 						name: "ri:upload-cloud-2-line",
 						class: "pk-chatbot-view-chat__drop-overlay-icon"
 					}), f("span", null, w(E(Z)("action.dropFile")), 1)])) : u("", !0)]),
@@ -381,6 +381,6 @@ var j = {
 	}
 });
 //#endregion
-export { re as n, F as t };
+export { F as n, I as t };
-//# sourceMappingURL=PkChatbotViewChat-C08TsXiL.js.map
+//# sourceMappingURL=PkChatbotViewChat-CAqvbbfN.js.map