@8wave/ai-elements 0.97.0 → 0.98.0-beta.2

package/dist-vue/_chunks/{PkChatbotSteps-BhqYCNWy.js → PkChatbotSteps-BpqdFhsG.js}

@@ -1,5 +1,5 @@
 import { c as e, o as t } from "./message-RohfrdWS.js";
-import { t as n } from "./PkStreamingMarkdown-CNLdk20r.js";
+import { t as n } from "./PkStreamingMarkdown-DEhbK-3c.js";
 import { a as r, f as i, i as a, n as o, o as ee, r as s, s as c } from "./utils-BMa8jwJS.js";
 import { t as l } from "./PkChatbotStepToolDetail-ldThv0t5.js";
 import { VvIcon as u } from "@volverjs/ui-vue/components";
@@ -169,4 +169,4 @@ var j = /* @__PURE__ */ y({
 //#endregion
 export { j as n, U as t };
 
-//# sourceMappingURL=PkChatbotSteps-BhqYCNWy.js.map
+//# sourceMappingURL=PkChatbotSteps-BpqdFhsG.js.map

package/dist-vue/_chunks/{PkChatbotSteps-BhqYCNWy.js.map → PkChatbotSteps-BpqdFhsG.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkChatbotSteps-BhqYCNWy.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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"}
+{"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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"}

package/dist-vue/_chunks/{PkChatbotViewChat-Cc8bZfAr.js → PkChatbotViewChat-C7Xv2Oer.js}

@@ -1,9 +1,9 @@
-import { t as e } from "./useChatbotStore-bbenzuMe.js";
+import { t as e } from "./useChatbotStore-Cfx-qlC4.js";
 import { t } from "./useLocalizedString-PfaKjIQY.js";
 import { t as n } from "./PkAvatar-CyIgsndA.js";
-import { t as r } from "./PkChatbotMessages-Cbn8okze.js";
-import { t as i } from "./PkChatbotInput-Be3J_Fgz.js";
-import { t as a } from "./PkChatbotEmptyState-BGTSWFSS.js";
+import { t as r } from "./PkChatbotMessages-DEzcxcqc.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";
 import { Transition as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createVNode as m, defineAsyncComponent as h, defineComponent as g, isRef as _, normalizeClass as v, onBeforeUnmount as y, onMounted as b, onUnmounted as x, openBlock as S, ref as C, toDisplayString as w, toValue as T, unref as E, useTemplateRef as D, withCtx as O } from "vue";
 import { useI18n as k } from "vue-i18n";
@@ -128,7 +128,7 @@ var j = {
 	},
 	emits: ["show-info", "revise"],
 	setup(g, { emit: y }) {
-		let b = h(() => import("./PkToolShowForm-DnzUxm2o.js").then((e) => e.n)), x = h(() => import("./PkToolRequestConfirm-CQNa3seA.js")), C = h(() => import("./PkToolShowContactForm-C3CXe6sh.js").then((e) => e.n)), T = h(() => import("./PkToolShowSuggestedReply-DoCHIEzz.js").then((e) => e.n)), A = h(() => import("./PkToolShowSources-BF2-VGSg.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 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-rGZz65c2.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;
 			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) => {
@@ -383,4 +383,4 @@ var j = {
 //#endregion
 export { re as n, F as t };
 
-//# sourceMappingURL=PkChatbotViewChat-Cc8bZfAr.js.map
+//# sourceMappingURL=PkChatbotViewChat-C7Xv2Oer.js.map