@8wave/ai-elements 0.110.0 → 0.111.0-beta.11

package/dist-vue/_chunks/PkChatbotMessages-Bz5q8EtT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PkChatbotMessages-Bz5q8EtT.js","names":["$emit"],"sources":["../../../../packages/utils/src/text.ts","../../../../packages/components/src/chat/toolComponentMap.ts","../../../../packages/components/src/chat/PkToolApprovalPreviewMessage.vue","../../../../packages/components/src/chat/PkToolApprovalPreviewMessage.vue","../../../../packages/components/src/chat/toolApprovalPreviews.ts","../../../../packages/components/src/chat/PkToolApprovalCard.vue","../../../../packages/components/src/chat/PkToolApprovalCard.vue","../../../../packages/components/src/chat/useChatScroll.ts","../../../../packages/components/src/chat/PkChatbotMessages.vue","../../../../packages/components/src/chat/PkChatbotMessages.vue"],"sourcesContent":["export const removeAccents = (str: string) =>\n    str.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '')\n\nexport const toCamelCase = <T extends string>(str?: string): T => {\n    if (!str) {\n        return '' as unknown as T\n    }\n    return removeAccents(str)\n        .replace(/[^a-zA-Z0-9]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ''))\n        .replace(/^(.)/, (match) => match.toLowerCase()) as unknown as T\n}\n\nexport const fromCamelCase = (str?: string): string => {\n    if (!str) {\n        return ''\n    }\n    return str.replace(/([a-z0-9])([A-Z])/g, '$1 $2')\n}\n\nexport const fromAnyCase = (str?: string): string => {\n    if (!str) {\n        return ''\n    }\n    return str\n        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')\n        .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')\n        .replace(/[-_]+/g, ' ')\n}\n\nexport const toPascalCase = <T extends string>(str?: string): T => {\n    if (!str) {\n        return '' as unknown as T\n    }\n    return removeAccents(str)\n        .replace(/[^a-zA-Z0-9]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ''))\n        .replace(/^(.)/, (match) => match.toUpperCase()) as unknown as T\n}\n\nexport const toKebabCase = <T extends string>(str?: string): T => {\n    if (!str) {\n        return '' as unknown as T\n    }\n    return removeAccents(str)\n        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')\n        .replace(/[^a-zA-Z0-9]+/g, '-')\n        .toLowerCase() as unknown as T\n}\n\nexport const fromKebabCase = (str?: string): string => {\n    if (!str) {\n        return ''\n    }\n    return str.replace(/-/g, ' ')\n}\n\nexport const toSnakeCase = <T extends string>(str?: string): T => {\n    if (!str) {\n        return '' as unknown as T\n    }\n    return removeAccents(str)\n        .replace(/([a-z0-9])([A-Z])/g, '$1_$2')\n        .replace(/[^a-zA-Z0-9]+/g, '_')\n        .toLowerCase() as unknown as T\n}\n\nexport const capitalizeFirstLetter = (str?: string) => {\n    if (!str) {\n        return ''\n    }\n    return str.charAt(0).toUpperCase() + str.slice(1)\n}\n\nexport const lowercaseFirstLetter = (str?: string) => {\n    if (!str) {\n        return ''\n    }\n    return str.charAt(0).toLowerCase() + str.slice(1)\n}\n","import { defineAsyncComponent } from 'vue'\n\n/**\n * Maps tool `part.type` to the corresponding component for auto-rendering.\n * Only includes simple tools that accept only a `:part` prop.\n * Interactive tools (showContactForm, showSuggestedReply, showSources,\n * showMultipleChoice) must be wired explicitly in the parent with their\n * required callbacks/events. Consent requests (`requestConfirm` and the tool\n * calls suspended for approval) are not here either: `PkChatbotMessages`\n * renders them all with `PkToolApprovalCard`.\n */\nexport const toolComponentMap: Record<\n    string,\n    ReturnType<typeof defineAsyncComponent>\n> = {\n    requestOAuthConnection: defineAsyncComponent(\n        () => import('./PkToolRequestOAuthConnection.vue'),\n    ),\n    showArtifact: defineAsyncComponent(\n        () => import('./PkToolShowArtifact.vue'),\n    ),\n    showCalendarEvent: defineAsyncComponent(\n        () => import('./PkToolShowCalendarEvent.vue'),\n    ),\n    showComparison: defineAsyncComponent(\n        () => import('./PkToolShowComparison.vue'),\n    ),\n    showContactForm: defineAsyncComponent(\n        () => import('./PkToolShowContactForm.vue'),\n    ),\n    showDiagram: defineAsyncComponent(() => import('./PkToolShowDiagram.vue')),\n    showEmail: defineAsyncComponent(() => import('./PkToolShowEmail.vue')),\n    showImageGallery: defineAsyncComponent(\n        () => import('./PkToolShowImageGallery.vue'),\n    ),\n    showLocation: defineAsyncComponent(\n        () => import('./PkToolShowLocation.vue'),\n    ),\n    showMessage: defineAsyncComponent(() => import('./PkToolShowMessage.vue')),\n    showForm: defineAsyncComponent(() => import('./PkToolShowForm.vue')),\n    showMultipleChoice: defineAsyncComponent(\n        () => import('./PkToolShowForm.vue'),\n    ),\n    showProductList: defineAsyncComponent(\n        () => import('./PkToolShowProductList.vue'),\n    ),\n    showQrCode: defineAsyncComponent(() => import('./PkToolShowQrCode.vue')),\n    showSources: defineAsyncComponent(() => import('./PkToolShowSources.vue')),\n    showSuggestedReply: defineAsyncComponent(\n        () => import('./PkToolShowSuggestedReply.vue'),\n    ),\n    showVideo: defineAsyncComponent(() => import('./PkToolShowVideo.vue')),\n    showWeather: defineAsyncComponent(() => import('./PkToolShowWeather.vue')),\n    showWebPages: defineAsyncComponent(\n        () => import('./PkToolShowWebPages.vue'),\n    ),\n}\n","<script setup lang=\"ts\">\n    import { computed } from 'vue'\n\n    /**\n     * Preview for the tools whose input is already a sentence written for the\n     * user (`requestConfirm`): it is shown as-is, with no key/value framing.\n     */\n    const props = defineProps<{\n        input?: unknown\n    }>()\n\n    const message = computed(() => {\n        const input = props.input as { message?: unknown } | undefined\n        return typeof input?.message === 'string' ? input.message : ''\n    })\n</script>\n\n<template>\n    <p v-if=\"message\" class=\"text-12 text-word-3 m-0 mb-xs\">\n        {{ message }}\n    </p>\n</template>\n","<script setup lang=\"ts\">\n    import { computed } from 'vue'\n\n    /**\n     * Preview for the tools whose input is already a sentence written for the\n     * user (`requestConfirm`): it is shown as-is, with no key/value framing.\n     */\n    const props = defineProps<{\n        input?: unknown\n    }>()\n\n    const message = computed(() => {\n        const input = props.input as { message?: unknown } | undefined\n        return typeof input?.message === 'string' ? input.message : ''\n    })\n</script>\n\n<template>\n    <p v-if=\"message\" class=\"text-12 text-word-3 m-0 mb-xs\">\n        {{ message }}\n    </p>\n</template>\n","import type { Component } from 'vue'\nimport PkToolApprovalPreviewMessage from './PkToolApprovalPreviewMessage.vue'\nimport { CONFIRM_TOOL_NAME } from './utils'\n\n/**\n * Maps a tool name to the component that renders a human-readable preview of\n * its input inside `PkToolApprovalCard`. The preview receives the tool call\n * input as its `input` prop.\n *\n * Registering a preview needs no change to the card: tools with no entry here\n * show only the localized confirmation prompt (no raw echo of the call input).\n * Reuse the component that already renders that kind of payload when there is\n * one (e.g. `sendEmail` will reuse `PkToolShowEmail`).\n */\nexport const toolApprovalPreviews: Record<string, Component> = {\n    // The model already writes the sentence to confirm: show it verbatim.\n    [CONFIRM_TOOL_NAME]: PkToolApprovalPreviewMessage,\n}\n","<script setup lang=\"ts\">\n    import { computed } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { getToolPartName } from 'utils'\n    import { isVoiceRenderAck } from 'models'\n    import { CONFIRM_TOOL_NAME } from './utils'\n    import { toolApprovalPreviews } from './toolApprovalPreviews'\n\n    /**\n     * The single confirmation card of the chat. It renders two things that are\n     * the same question for the user:\n     *\n     * - **approval**: a tool call the backend suspended waiting for consent\n     *   (`approval-requested`), plus its resolved states so the decision stays\n     *   visible in the transcript;\n     * - **confirm**: a `requestConfirm` call, the client-side tool the model uses\n     *   to have an action it described approved. Same layout, its own wording\n     *   (Proceed / Cancel, as on the messaging channels).\n     *\n     * The body comes from `toolApprovalPreviews[toolName]` when the tool has a\n     * dedicated preview (localized, human copy: e.g. `sendEmail` will reuse the\n     * email renderer); tools without one show only the localized prompt, never\n     * a raw echo of the call input. Adding a preview never requires touching\n     * this component.\n     */\n    const props = defineProps<{\n        part: unknown\n        /**\n         * Whether the user can still answer. False in read-only views (chat\n         * logs) and, for approvals, once the conversation has moved past the\n         * request: the backend closes an abandoned approval as denied, so\n         * answering it later would not run the tool.\n         */\n        actionable?: boolean\n        /**\n         * The verdict given ON A CALL, when there is one. A confirm answered\n         * during a call travels back as a spoken message and its part stays\n         * on the render ack, so the outcome only exists client-side: this is\n         * what closes the card and names the outcome instead of leaving the\n         * buttons alive (or worse, showing the answer as \"expired\").\n         */\n        callVerdict?: boolean\n    }>()\n\n    const emit = defineEmits<{\n        respond: [approved: boolean]\n    }>()\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    const toolPart = computed(\n        () =>\n            props.part as {\n                type?: string\n                state?: string\n                toolCallId?: string\n                input?: unknown\n                output?: unknown\n                approval?: { id?: string; approved?: boolean; reason?: string }\n            },\n    )\n\n    const toolName = computed(() =>\n        getToolPartName(props.part as Parameters<typeof getToolPartName>[0]),\n    )\n\n    const isConfirm = computed(() => toolName.value === CONFIRM_TOOL_NAME)\n\n    /**\n     * True while the request still waits for an answer. A confirm drawn\n     * during a CALL arrives already resolved with the note that it was drawn\n     * (see `isVoiceRenderAck`, same rule as the forms): the note is not the\n     * user's verdict, so the card keeps its buttons.\n     */\n    const isOpen = computed(() =>\n        isConfirm.value\n            ? (toolPart.value.state === 'input-available' ||\n                  isVoiceRenderAck(toolPart.value.output)) &&\n              props.callVerdict === undefined\n            : toolPart.value.state === 'approval-requested',\n    )\n\n    /** Open and answerable: the only case where the buttons act. */\n    const isPending = computed(() => isOpen.value && props.actionable === true)\n\n    /** Open but not answerable: shown as an expired request. */\n    const isExpired = computed(() => isOpen.value && props.actionable !== true)\n\n    const isApproved = computed(() =>\n        isConfirm.value\n            ? toolPart.value.output === 'confirmed' ||\n              props.callVerdict === true\n            : toolPart.value.approval?.approved === true,\n    )\n\n    const isDenied = computed(() =>\n        isConfirm.value\n            ? toolPart.value.output === 'cancelled' ||\n              props.callVerdict === false\n            : toolPart.value.approval?.approved === false ||\n              toolPart.value.state === 'output-denied',\n    )\n\n    const preview = computed(() => toolApprovalPreviews[toolName.value])\n\n    /**\n     * Once the request is answered (or expired) the card slims down: prompt\n     * and buttons disappear and this single icon + text line tells the\n     * outcome. A confirm has its own wording (the model described an action,\n     * no tool ran on its behalf).\n     */\n    const outcome = computed(() => {\n        if (isExpired.value) {\n            return { icon: 'ri:time-line', message: $t('toolApproval.expired') }\n        }\n        if (isApproved.value) {\n            return {\n                icon: 'ri:check-line',\n                message: $t(\n                    isConfirm.value\n                        ? 'toolApproval.confirmed'\n                        : 'toolApproval.approved',\n                ),\n            }\n        }\n        if (isDenied.value) {\n            return {\n                icon: 'ri:close-line',\n                message: $t(\n                    isConfirm.value\n                        ? 'toolApproval.cancelled'\n                        : 'toolApproval.denied',\n                ),\n            }\n        }\n        return undefined\n    })\n\n    /**\n     * Resolved and nothing to preview: all the card would frame is the\n     * outcome line, so the frame goes too and only the line stays in the\n     * transcript.\n     */\n    const isBare = computed(() => Boolean(outcome.value) && !preview.value)\n</script>\n\n<template>\n    <!-- Plain block container, NOT flex-col: vv-button-group is inline-flex\n         with justify-content center, and a stretched flex child would center\n         the buttons instead of keeping them left like the original confirm\n         card. -->\n    <!-- transition-all eases the frame away (padding, border and background\n         to zero) when the resolved card goes bare. -->\n    <div\n        class=\"w-full overflow-hidden transition-all duration-300\"\n        :class=\"{\n            'bg-surface p-sm rounded-xl border border-surface-3': !isBare,\n        }\">\n        <!-- A confirm carries its own sentence from the model; an approval gets\n             a generic one. The operation itself is never named: the user sees\n             only what is about to happen (the preview), not how. -->\n        <!-- The ask reads wrong on a resolved request: once answered, the\n             outcome line alone carries the whole story. -->\n        <transition>\n            <p\n                v-if=\"!isConfirm && isOpen\"\n                class=\"text-12 text-word-3 m-0 mb-xs\">\n                {{ $t('toolApproval.prompt') }}\n            </p>\n        </transition>\n\n        <component :is=\"preview\" v-if=\"preview\" :part :input=\"toolPart.input\" />\n\n        <!-- Buttons only while the answer is still awaited (disabled while the\n             confirm input streams in). Once there is an outcome they leave the\n             card, so the transcript keeps a slim record instead of a dead\n             control. -->\n        <transition mode=\"out-in\">\n            <VvButtonGroup v-if=\"!outcome\">\n                <VvButton\n                    modifiers=\"primary-small\"\n                    :disabled=\"!isPending\"\n                    icon=\"ri:check-line\"\n                    :label=\"$t('action.proceed')\"\n                    @click.stop=\"emit('respond', true)\" />\n                <VvButton\n                    modifiers=\"action-quiet-small\"\n                    :disabled=\"!isPending\"\n                    icon=\"ri:close-line\"\n                    :label=\"$t('action.cancel')\"\n                    @click.stop=\"emit('respond', false)\" />\n            </VvButtonGroup>\n\n            <!-- The stored denial reason is model-facing copy (and English):\n                 the card always shows the localized message instead. -->\n            <p\n                v-else\n                class=\"flex items-center gap-4 text-12 text-word-3 m-0\"\n                :class=\"{ 'mt-xs': preview }\">\n                <VvIcon :name=\"outcome.icon\" class=\"shrink-0\" />\n                {{ outcome.message }}\n            </p>\n        </transition>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import { computed } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { getToolPartName } from 'utils'\n    import { isVoiceRenderAck } from 'models'\n    import { CONFIRM_TOOL_NAME } from './utils'\n    import { toolApprovalPreviews } from './toolApprovalPreviews'\n\n    /**\n     * The single confirmation card of the chat. It renders two things that are\n     * the same question for the user:\n     *\n     * - **approval**: a tool call the backend suspended waiting for consent\n     *   (`approval-requested`), plus its resolved states so the decision stays\n     *   visible in the transcript;\n     * - **confirm**: a `requestConfirm` call, the client-side tool the model uses\n     *   to have an action it described approved. Same layout, its own wording\n     *   (Proceed / Cancel, as on the messaging channels).\n     *\n     * The body comes from `toolApprovalPreviews[toolName]` when the tool has a\n     * dedicated preview (localized, human copy: e.g. `sendEmail` will reuse the\n     * email renderer); tools without one show only the localized prompt, never\n     * a raw echo of the call input. Adding a preview never requires touching\n     * this component.\n     */\n    const props = defineProps<{\n        part: unknown\n        /**\n         * Whether the user can still answer. False in read-only views (chat\n         * logs) and, for approvals, once the conversation has moved past the\n         * request: the backend closes an abandoned approval as denied, so\n         * answering it later would not run the tool.\n         */\n        actionable?: boolean\n        /**\n         * The verdict given ON A CALL, when there is one. A confirm answered\n         * during a call travels back as a spoken message and its part stays\n         * on the render ack, so the outcome only exists client-side: this is\n         * what closes the card and names the outcome instead of leaving the\n         * buttons alive (or worse, showing the answer as \"expired\").\n         */\n        callVerdict?: boolean\n    }>()\n\n    const emit = defineEmits<{\n        respond: [approved: boolean]\n    }>()\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    const toolPart = computed(\n        () =>\n            props.part as {\n                type?: string\n                state?: string\n                toolCallId?: string\n                input?: unknown\n                output?: unknown\n                approval?: { id?: string; approved?: boolean; reason?: string }\n            },\n    )\n\n    const toolName = computed(() =>\n        getToolPartName(props.part as Parameters<typeof getToolPartName>[0]),\n    )\n\n    const isConfirm = computed(() => toolName.value === CONFIRM_TOOL_NAME)\n\n    /**\n     * True while the request still waits for an answer. A confirm drawn\n     * during a CALL arrives already resolved with the note that it was drawn\n     * (see `isVoiceRenderAck`, same rule as the forms): the note is not the\n     * user's verdict, so the card keeps its buttons.\n     */\n    const isOpen = computed(() =>\n        isConfirm.value\n            ? (toolPart.value.state === 'input-available' ||\n                  isVoiceRenderAck(toolPart.value.output)) &&\n              props.callVerdict === undefined\n            : toolPart.value.state === 'approval-requested',\n    )\n\n    /** Open and answerable: the only case where the buttons act. */\n    const isPending = computed(() => isOpen.value && props.actionable === true)\n\n    /** Open but not answerable: shown as an expired request. */\n    const isExpired = computed(() => isOpen.value && props.actionable !== true)\n\n    const isApproved = computed(() =>\n        isConfirm.value\n            ? toolPart.value.output === 'confirmed' ||\n              props.callVerdict === true\n            : toolPart.value.approval?.approved === true,\n    )\n\n    const isDenied = computed(() =>\n        isConfirm.value\n            ? toolPart.value.output === 'cancelled' ||\n              props.callVerdict === false\n            : toolPart.value.approval?.approved === false ||\n              toolPart.value.state === 'output-denied',\n    )\n\n    const preview = computed(() => toolApprovalPreviews[toolName.value])\n\n    /**\n     * Once the request is answered (or expired) the card slims down: prompt\n     * and buttons disappear and this single icon + text line tells the\n     * outcome. A confirm has its own wording (the model described an action,\n     * no tool ran on its behalf).\n     */\n    const outcome = computed(() => {\n        if (isExpired.value) {\n            return { icon: 'ri:time-line', message: $t('toolApproval.expired') }\n        }\n        if (isApproved.value) {\n            return {\n                icon: 'ri:check-line',\n                message: $t(\n                    isConfirm.value\n                        ? 'toolApproval.confirmed'\n                        : 'toolApproval.approved',\n                ),\n            }\n        }\n        if (isDenied.value) {\n            return {\n                icon: 'ri:close-line',\n                message: $t(\n                    isConfirm.value\n                        ? 'toolApproval.cancelled'\n                        : 'toolApproval.denied',\n                ),\n            }\n        }\n        return undefined\n    })\n\n    /**\n     * Resolved and nothing to preview: all the card would frame is the\n     * outcome line, so the frame goes too and only the line stays in the\n     * transcript.\n     */\n    const isBare = computed(() => Boolean(outcome.value) && !preview.value)\n</script>\n\n<template>\n    <!-- Plain block container, NOT flex-col: vv-button-group is inline-flex\n         with justify-content center, and a stretched flex child would center\n         the buttons instead of keeping them left like the original confirm\n         card. -->\n    <!-- transition-all eases the frame away (padding, border and background\n         to zero) when the resolved card goes bare. -->\n    <div\n        class=\"w-full overflow-hidden transition-all duration-300\"\n        :class=\"{\n            'bg-surface p-sm rounded-xl border border-surface-3': !isBare,\n        }\">\n        <!-- A confirm carries its own sentence from the model; an approval gets\n             a generic one. The operation itself is never named: the user sees\n             only what is about to happen (the preview), not how. -->\n        <!-- The ask reads wrong on a resolved request: once answered, the\n             outcome line alone carries the whole story. -->\n        <transition>\n            <p\n                v-if=\"!isConfirm && isOpen\"\n                class=\"text-12 text-word-3 m-0 mb-xs\">\n                {{ $t('toolApproval.prompt') }}\n            </p>\n        </transition>\n\n        <component :is=\"preview\" v-if=\"preview\" :part :input=\"toolPart.input\" />\n\n        <!-- Buttons only while the answer is still awaited (disabled while the\n             confirm input streams in). Once there is an outcome they leave the\n             card, so the transcript keeps a slim record instead of a dead\n             control. -->\n        <transition mode=\"out-in\">\n            <VvButtonGroup v-if=\"!outcome\">\n                <VvButton\n                    modifiers=\"primary-small\"\n                    :disabled=\"!isPending\"\n                    icon=\"ri:check-line\"\n                    :label=\"$t('action.proceed')\"\n                    @click.stop=\"emit('respond', true)\" />\n                <VvButton\n                    modifiers=\"action-quiet-small\"\n                    :disabled=\"!isPending\"\n                    icon=\"ri:close-line\"\n                    :label=\"$t('action.cancel')\"\n                    @click.stop=\"emit('respond', false)\" />\n            </VvButtonGroup>\n\n            <!-- The stored denial reason is model-facing copy (and English):\n                 the card always shows the localized message instead. -->\n            <p\n                v-else\n                class=\"flex items-center gap-4 text-12 text-word-3 m-0\"\n                :class=\"{ 'mt-xs': preview }\">\n                <VvIcon :name=\"outcome.icon\" class=\"shrink-0\" />\n                {{ outcome.message }}\n            </p>\n        </transition>\n    </div>\n</template>\n","import type { Ref, ShallowRef } from 'vue'\nimport { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'\n\nconst NEAR_BOTTOM_THRESHOLD = 30\nconst SMOOTH_SCROLL_DURATION = 500\n\ninterface UseChatScrollOptions {\n    scrollEl:\n        | Readonly<ShallowRef<HTMLDivElement | null>>\n        | Ref<HTMLDivElement | undefined>\n    status: () => string | undefined\n    messagesLength: () => number | undefined\n    lastMessageRole: () => string | undefined\n    /**\n     * Element whose height tracks the content height, watched for late\n     * growth (lazy tool outputs). Defaults to the scroll element's first\n     * child.\n     */\n    contentEl?: () => HTMLElement | null\n    /**\n     * Awaited right before the new-exchange scroll. Lets the host apply the\n     * layout that changes the content height (the anchor spacer) first, so\n     * the scroll targets the final bottom instead of an intermediate one.\n     */\n    beforeNewMessageScroll?: () => void | Promise<void>\n    onScrollUp?: () => void\n    onScrollDown?: () => void\n}\n\nexport function useChatScroll(options: UseChatScrollOptions) {\n    const {\n        scrollEl,\n        status,\n        messagesLength,\n        lastMessageRole,\n        contentEl,\n        beforeNewMessageScroll,\n        onScrollUp,\n        onScrollDown,\n    } = options\n\n    const userScrolledUp = ref(false)\n    const isAtBottom = ref(true)\n    let isAutoScrolling = false\n    let mutationObserver: MutationObserver | null = null\n    let resizeObserver: ResizeObserver | null = null\n    let initMutationObserver: MutationObserver | null = null\n    let contentResizeObserver: ResizeObserver | null = null\n    let lastScrollTop = 0\n\n    // --- Core scroll ---\n\n    const scrollToBottom = (behavior: ScrollBehavior = 'smooth') => {\n        if (!scrollEl.value || userScrolledUp.value) {\n            // Callers may lock the auto-scroll before awaiting layout: release\n            // it here or the lock would mute the auto-follow forever\n            isAutoScrolling = false\n            return\n        }\n        isAutoScrolling = true\n        scrollEl.value.scrollTo({\n            top: scrollEl.value.scrollHeight,\n            behavior,\n        })\n        const unlockDelay = behavior === 'instant' ? 0 : SMOOTH_SCROLL_DURATION\n        setTimeout(() => {\n            isAutoScrolling = false\n        }, unlockDelay)\n    }\n\n    // --- User scroll detection ---\n    // Intent to scroll away comes from input events (wheel/touch): unlike\n    // scroll deltas they are never produced by programmatic scrolls, layout\n    // shifts or elastic overscroll bounces, so the auto-scroll never fights\n    // the user nor disables itself spuriously.\n\n    const onWheel = (event: WheelEvent) => {\n        if (event.deltaY < 0) {\n            userScrolledUp.value = true\n        }\n    }\n\n    let lastTouchY = 0\n    const onTouchStart = (event: TouchEvent) => {\n        lastTouchY = event.touches[0]?.clientY ?? 0\n    }\n    const onTouchMove = (event: TouchEvent) => {\n        const y = event.touches[0]?.clientY ?? 0\n        // Finger moving down drags the content up\n        if (y > lastTouchY) {\n            userScrolledUp.value = true\n        }\n        lastTouchY = y\n    }\n\n    const handleScroll = () => {\n        if (!scrollEl.value) {\n            return\n        }\n        const {\n            scrollTop: currentScrollTop,\n            scrollHeight,\n            clientHeight,\n        } = scrollEl.value\n        isAtBottom.value =\n            scrollHeight - clientHeight - currentScrollTop <\n            NEAR_BOTTOM_THRESHOLD\n        if (isAutoScrolling) {\n            lastScrollTop = currentScrollTop\n            return\n        }\n\n        if (currentScrollTop < lastScrollTop) {\n            onScrollUp?.()\n        }\n\n        if (currentScrollTop > lastScrollTop) {\n            // Back at the bottom: re-enable auto-scroll\n            if (isAtBottom.value) {\n                userScrolledUp.value = false\n            }\n            onScrollDown?.()\n        }\n\n        lastScrollTop = currentScrollTop\n    }\n\n    // --- Streaming auto-follow ---\n    // Tracks the growing content towards the bottom, never above the\n    // current position. While the answer fits the space reserved by the\n    // last-message spacer in PkChatbotMessages the content bottom does not\n    // move, so the freshly sent user message stays anchored at the top;\n    // once the answer overflows, the follow keeps the tail in view until\n    // the user scrolls away (wheel/touch sets `userScrolledUp`).\n    const autoFollow = () => {\n        if (isAutoScrolling || userScrolledUp.value || !scrollEl.value) {\n            return\n        }\n        const el = scrollEl.value\n        const bottom = el.scrollHeight - el.clientHeight\n        if (bottom <= el.scrollTop) {\n            return\n        }\n        isAtBottom.value = true\n        isAutoScrolling = true\n        el.scrollTop = bottom\n        requestAnimationFrame(() => {\n            isAutoScrolling = false\n        })\n    }\n\n    const startMutationScroll = () => {\n        if (mutationObserver || !scrollEl.value) {\n            return\n        }\n        mutationObserver = new MutationObserver(autoFollow)\n        mutationObserver.observe(scrollEl.value, {\n            childList: true,\n            subtree: true,\n            characterData: true,\n        })\n    }\n\n    const stopMutationScroll = () => {\n        mutationObserver?.disconnect()\n        mutationObserver = null\n    }\n\n    // --- Status watcher ---\n\n    watch(status, (newStatus, oldStatus) => {\n        if (newStatus === 'streaming' || newStatus === 'submitted') {\n            startMutationScroll()\n            return\n        }\n        if (newStatus === 'ready' && oldStatus === 'streaming') {\n            // Keep observer active to catch footer buttons rendering\n            return\n        }\n        stopMutationScroll()\n    })\n\n    // --- New message watcher ---\n\n    watch(messagesLength, async () => {\n        if (!messagesLength()) {\n            return\n        }\n        if (lastMessageRole() === 'assistant') {\n            return\n        }\n        // A user send ends the initial-load phase: on a chat whose content\n        // first overflows while the answer streams in, the initial observers\n        // would otherwise slam the scroll to the bottom past the anchor\n        cleanupInitialObservers()\n        userScrolledUp.value = false\n        // Lock while the layout settles: the anchor spacer growth would\n        // otherwise make the resize auto-follow jump before the real scroll\n        isAutoScrolling = true\n        try {\n            await nextTick()\n            // The spacer must be in place first: scrolling to a\n            // `scrollHeight` that still misses it lands short of the anchor\n            // and nothing brings the view back down (the resize auto-follow\n            // is locked out).\n            await beforeNewMessageScroll?.()\n            await nextTick()\n        } finally {\n            // Always reaches scrollToBottom: a throw above would otherwise\n            // leave the lock set and mute the auto-follow forever\n            scrollToBottom()\n        }\n    })\n\n    // --- Initial scroll ---\n\n    let initialScrollTimer: ReturnType<typeof setTimeout> | null = null\n    const INITIAL_SCROLL_SETTLE_MS = 300\n\n    const tryInitialScroll = () => {\n        if (!scrollEl.value) {\n            return\n        }\n        if (scrollEl.value.scrollHeight <= scrollEl.value.clientHeight) {\n            return\n        }\n        scrollEl.value.scrollTop = scrollEl.value.scrollHeight\n\n        // Reset the settle timer on each mutation — disconnect only after stability\n        if (initialScrollTimer) {\n            clearTimeout(initialScrollTimer)\n        }\n        initialScrollTimer = setTimeout(\n            cleanupInitialObservers,\n            INITIAL_SCROLL_SETTLE_MS,\n        )\n    }\n\n    const cleanupInitialObservers = () => {\n        resizeObserver?.disconnect()\n        resizeObserver = null\n        initMutationObserver?.disconnect()\n        initMutationObserver = null\n        if (initialScrollTimer) {\n            clearTimeout(initialScrollTimer)\n            initialScrollTimer = null\n        }\n    }\n\n    onMounted(() => {\n        if (!scrollEl.value) {\n            return\n        }\n        scrollEl.value.addEventListener('wheel', onWheel, { passive: true })\n        scrollEl.value.addEventListener('touchstart', onTouchStart, {\n            passive: true,\n        })\n        scrollEl.value.addEventListener('touchmove', onTouchMove, {\n            passive: true,\n        })\n\n        // Mounted mid-send (e.g. fullscreen first message: the messages view\n        // replaces the empty state after the message is already in) is not a\n        // history load: skip the initial bottom-jump and follow the stream\n        // from the anchored position instead.\n        const isSendInFlight =\n            status() === 'submitted' || status() === 'streaming'\n        if (isSendInFlight) {\n            startMutationScroll()\n        } else {\n            resizeObserver = new ResizeObserver(tryInitialScroll)\n            resizeObserver.observe(scrollEl.value)\n\n            initMutationObserver = new MutationObserver(tryInitialScroll)\n            initMutationObserver.observe(scrollEl.value, {\n                childList: true,\n                subtree: true,\n            })\n        }\n\n        // Late content growth: tool outputs render lazily (async chunks,\n        // dynamic imports: diagrams, images...) and can change the content\n        // height long after the initial scroll settled. The wrapper height\n        // tracks the content height (the scroll element itself never\n        // resizes with it).\n        const wrapper = contentEl?.() ?? scrollEl.value.firstElementChild\n        if (wrapper) {\n            contentResizeObserver = new ResizeObserver(autoFollow)\n            contentResizeObserver.observe(wrapper)\n        }\n\n        if (!isSendInFlight) {\n            tryInitialScroll()\n        }\n    })\n\n    onBeforeUnmount(() => {\n        scrollEl.value?.removeEventListener('wheel', onWheel)\n        scrollEl.value?.removeEventListener('touchstart', onTouchStart)\n        scrollEl.value?.removeEventListener('touchmove', onTouchMove)\n        contentResizeObserver?.disconnect()\n        contentResizeObserver = null\n        stopMutationScroll()\n        cleanupInitialObservers()\n    })\n\n    return {\n        handleScroll,\n        scrollToBottom,\n        userScrolledUp,\n        isAtBottom,\n    }\n}\n","<script lang=\"ts\" setup>\n    import type {\n        ChatMessageActions,\n        MessageFeedback,\n        RevisedAnswer,\n        UIChatMessage,\n    } from 'models'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import PkChatbotError from './PkChatbotError.vue'\n    import PkChatbotFeedbackForm from './PkChatbotFeedbackForm.vue'\n    import PkChatbotMessageFeedback from './PkChatbotMessageFeedback.vue'\n    import PkChatbotFilePreview from './PkChatbotFilePreview.vue'\n    import PkRelativeTime from '../PkRelativeTime.vue'\n    import { useI18n } from 'vue-i18n'\n    import {\n        useTemplateRef,\n        ref,\n        watch,\n        computed,\n        nextTick,\n        onMounted,\n        useSlots,\n    } from 'vue'\n    import { toolComponentMap } from './toolComponentMap'\n    import PkToolApprovalCard from './PkToolApprovalCard.vue'\n    import PkChatbotSteps from './PkChatbotSteps.vue'\n    import {\n        resolveContrastColor,\n        getPartState,\n        isTextPart,\n        isFilePart,\n        isToolPart,\n        isReasoningPart,\n        isStreamingPart,\n        isToolConfirmPart,\n        isConfirmationCardPart,\n        getToolApprovalId,\n        getPartIcon,\n        getToolPartLabel,\n        mergeConsecutiveTextParts,\n        formatDuration,\n        LIVE_REASONING_TAIL_LENGTH,\n    } from './utils'\n    import { getFilePartMedia, getToolPartName, toKebabCase } from 'utils'\n    import PkStreamingMarkdownAutoscroll from './PkStreamingMarkdownAutoscroll.vue'\n    import PkChatbotOutlineRail from './PkChatbotOutlineRail.vue'\n    import { useChatScroll } from './useChatScroll'\n\n    const props = defineProps<{\n        status?: 'submitted' | 'streaming' | 'ready' | 'error'\n        messages?: UIChatMessage[]\n        error?: Error\n        actions?: ChatMessageActions[]\n        mainColor?: string\n        textColor?: 'auto' | 'white' | 'black'\n        revisedAnswers?: RevisedAnswer[]\n        messageFeedbacks?: MessageFeedback[]\n        /**\n         * Render the vote/feedback action buttons as read-only state indicators\n         * (e.g. admin chat-logs view): icons reflect the user's feedback but the\n         * buttons are not interactive.\n         */\n        readonlyFeedback?: boolean\n        disableHeightAdjustment?: boolean\n        showMessageDateTime?: boolean\n        showMessageTokensCount?: boolean\n        showAllMessageParts?: boolean\n        /**\n         * Lets the user answer the tool requests rendered in the feed (approval\n         * and confirm cards). Off by default: the log viewers render the same\n         * messages read-only and have nothing to answer with.\n         */\n        interactive?: boolean\n        showExtendedSteps?: boolean\n        /**\n         * A call is waiting for its answer. The turn runs outside this client\n         * (the voice provider drives it), so `status` says nothing about it and\n         * the feed would sit still for the seconds it takes.\n         */\n        awaitingSpokenAnswer?: boolean\n        /**\n         * Verdicts given ON A CALL, by toolCallId. A confirm answered during a\n         * call goes back to the agent as a spoken message, so its part never\n         * leaves the render-ack state: without this the card kept its buttons\n         * after the answer, and every extra tap said \"Confermo\" again\n         * (measured 2026-08-07). Only successful sends are recorded, so a tap\n         * that never reached the provider leaves the card usable.\n         */\n        confirmVerdictsOnCall?: Map<string, boolean>\n        isDark?: boolean\n        /** Show a floating \"back to bottom\" button when the user scrolls up (fullscreen layout) */\n        showScrollToBottom?: boolean\n        // TODO: move feedback in a separate component to avoid passing these props\n        feedbackMessageId?: string\n        feedbackLoading?: boolean\n        feedbackSubmitted?: boolean\n        feedbackError?: string\n    }>()\n\n    const emit = defineEmits<{\n        (e: 'show-info', message: UIChatMessage): void\n        (e: 'regenerate'): void\n        (e: 'revise', message: UIChatMessage): void\n        (e: 'upvote', message: UIChatMessage): void\n        (e: 'downvote', message: UIChatMessage): void\n        (e: 'feedback', message: UIChatMessage): void\n        (e: 'feedback-submit', comment: string): void\n        (e: 'feedback-close'): void\n        (e: 'scroll-up'): void\n        (e: 'scroll-down'): void\n        (e: 'auto-retry'): void\n        (e: 'reset-chat'): void\n        (\n            e: 'approval-respond',\n            payload: { id: string; approved: boolean },\n        ): void\n        (\n            e: 'confirm-respond',\n            payload: { toolCallId: string; confirmed: boolean },\n        ): void\n    }>()\n\n    const {\n        t: $t,\n        d: $d,\n        n: $n,\n    } = useI18n({\n        useScope: 'global',\n    })\n\n    const slots = useSlots()\n\n    /**\n     * Forwards the user's verdict from the confirmation card. The two kinds of\n     * request travel back on different channels: an approval answers the SDK\n     * approval it carries the id of, a `requestConfirm` resolves as a client\n     * tool output. Without the id there is nothing to answer, so the click is\n     * dropped instead of sending an unmatchable response.\n     */\n    const onCardRespond = (\n        part: UIChatMessage['parts'][number],\n        approved: boolean,\n    ) => {\n        if (isToolConfirmPart(part)) {\n            const toolCallId = (part as { toolCallId?: string }).toolCallId\n            if (toolCallId) {\n                emit('confirm-respond', { toolCallId, confirmed: approved })\n            }\n            return\n        }\n        const id = getToolApprovalId(part)\n        if (!id) {\n            return\n        }\n        emit('approval-respond', { id, approved })\n    }\n\n    const scrollEl = useTemplateRef<HTMLDivElement>('scrollEl')\n    const wrapperEl = useTemplateRef<HTMLDivElement>('wrapperEl')\n    const contrastColor = computed(() =>\n        resolveContrastColor(props.textColor, props.mainColor),\n    )\n\n    // --- Scroll ---\n\n    const { handleScroll, scrollToBottom, userScrolledUp, isAtBottom } =\n        useChatScroll({\n            scrollEl,\n            status: () => props.status,\n            messagesLength: () => props.messages?.length,\n            lastMessageRole: () =>\n                props.messages?.[props.messages.length - 1]?.role,\n            contentEl: () => wrapperEl.value,\n            beforeNewMessageScroll: () => updateAnchorSpacer(),\n            onScrollUp: () => emit('scroll-up'),\n            onScrollDown: () => emit('scroll-down'),\n        })\n\n    const onScrollToBottomClick = () => {\n        // scrollToBottom() is a no-op while userScrolledUp is set\n        userScrolledUp.value = false\n        scrollToBottom()\n    }\n\n    // --- Conversation outline (fullscreen, desktop) ---\n\n    const outlineItems = computed(() =>\n        (props.messages ?? [])\n            .filter((message) => message.role === 'user')\n            .map((message) => ({\n                id: message.id,\n                preview:\n                    message.parts.find(isTextPart)?.text.trim().slice(0, 120) ||\n                    '…',\n            })),\n    )\n    const activeOutlineId = ref<string>()\n\n    // The rail entries map 1:1 onto the rendered user messages\n    const getUserMessageEls = () =>\n        scrollEl.value?.querySelectorAll('.pk-chatbot-message--user') ?? []\n\n    // Scroll-spy: active is the last user message above the middle of the\n    // viewport (the exchange currently being read)\n    const updateActiveOutline = () => {\n        const scroller = scrollEl.value\n        if (!scroller || !props.showScrollToBottom) {\n            return\n        }\n        const line =\n            scroller.getBoundingClientRect().top + scroller.clientHeight / 2\n        let active = outlineItems.value[0]?.id\n        getUserMessageEls().forEach((el, index) => {\n            if (el.getBoundingClientRect().top <= line) {\n                active = outlineItems.value[index]?.id\n            }\n        })\n        activeOutlineId.value = active\n    }\n\n    watch(outlineItems, async () => {\n        await nextTick()\n        updateActiveOutline()\n    })\n\n    const onScroll = () => {\n        handleScroll()\n        updateActiveOutline()\n    }\n\n    const scrollToUserMessage = (id: string) => {\n        const scroller = scrollEl.value\n        const index = outlineItems.value.findIndex((item) => item.id === id)\n        const messageEl = getUserMessageEls()[index]\n        if (!scroller || !messageEl) {\n            return\n        }\n        // Intentional jump away from the live tail: the wheel/touch intent\n        // detection cannot see programmatic scrolls, pause the auto-follow\n        // explicitly (reaching the bottom again re-enables it)\n        userScrolledUp.value = true\n        // Same resting line as a freshly sent message: top of the content area\n        scroller.scrollTo({\n            top:\n                scroller.scrollTop +\n                messageEl.getBoundingClientRect().top -\n                scroller.getBoundingClientRect().top -\n                Number.parseFloat(getComputedStyle(scroller).paddingTop),\n            behavior: 'smooth',\n        })\n    }\n\n    // --- Height adjustment ---\n\n    const height = ref<number>(0)\n    // The min-height transition only serves the release (see below): while the\n    // spacer grows it would hide the new height from the anchor scroll, which\n    // reads `scrollHeight` once and would land short of the anchor.\n    const isSpacerSettling = ref(false)\n\n    // Recalculate when a message is added or the conversation changes (the\n    // store recreates `messages` on every streamed token, so watching the\n    // array reference would re-run this on each character). The height only\n    // depends on the last user message height, which is stable while\n    // streaming. Idempotent: also called by the scroll composable right\n    // before the anchor scroll, so the spacer is always in place first.\n    const updateAnchorSpacer = async () => {\n        const messages = props.messages\n        if (!messages?.length || props.disableHeightAdjustment) {\n            return\n        }\n        // The spacer only serves the in-flight exchange, letting the\n        // fresh user message anchor at the top while the answer streams.\n        // On plain loads (e.g. opening an old conversation) it would\n        // just leave a large void after the last message.\n        const isExchangeInFlight =\n            messages[messages.length - 1].role === 'user' ||\n            props.status === 'submitted' ||\n            props.status === 'streaming'\n        if (!isExchangeInFlight) {\n            return\n        }\n        isSpacerSettling.value = false\n        await nextTick()\n        if (!scrollEl.value) {\n            return\n        }\n        // Spacer sized so the freshly sent user message rests at the top\n        // of the content area once scrolled to bottom: subtract both\n        // paddings (clientHeight includes them) so any extra top\n        // clearance (e.g. the fullscreen overlay header) is respected,\n        // and the wrapper row gap separating the message from the spacer\n        const { paddingTop, paddingBottom } = getComputedStyle(scrollEl.value)\n        const scrollElHeight =\n            scrollEl.value.clientHeight -\n            Number.parseFloat(paddingTop) -\n            Number.parseFloat(paddingBottom)\n        const wrapperGap = wrapperEl.value\n            ? Number.parseFloat(getComputedStyle(wrapperEl.value).rowGap) || 0\n            : 0\n        // Measured on the rendered DOM (same lookup as the outline rail):\n        // indexing the template-refs array with the `messages` index breaks\n        // as soon as a message renders nothing (`v-if` on empty parts), the\n        // refs array skips it and the heights shift by one.\n        const userMessageEls = getUserMessageEls()\n        const lastUserMessageHeight =\n            userMessageEls[userMessageEls.length - 1]?.clientHeight ?? 0\n        const newHeight = scrollElHeight - lastUserMessageHeight - wrapperGap\n        // A question taller than the content area leaves nothing to reserve:\n        // the spacer goes to zero, never back to the value of the previous\n        // exchange. A stale, larger spacer is the very failure the anchor\n        // exists to prevent, the scroll landing past the message. Skipped\n        // when the element measures nothing (rendered while hidden): there\n        // the height already in place is still the good one.\n        if (scrollElHeight > 0) {\n            height.value = Math.max(newHeight, 0)\n        }\n        await nextTick()\n    }\n\n    watch(\n        () => [\n            props.messages?.length,\n            props.messages?.[props.messages.length - 1]?.id,\n        ],\n        () => updateAnchorSpacer(),\n    )\n\n    // Mounted mid-send (fullscreen first message: the messages view replaces\n    // the empty state after the message is already in): the length watch\n    // never fires for that message, apply the anchor spacer now. A first\n    // spoken line mounts the same way and never moves `status`, hence the\n    // second guard. Plain history loads (mounted at 'ready', nothing in\n    // flight) stay untouched.\n    onMounted(() => {\n        if (\n            props.status === 'submitted' ||\n            props.status === 'streaming' ||\n            props.awaitingSpokenAnswer\n        ) {\n            updateAnchorSpacer()\n        }\n    })\n\n    // Release the spacer once the exchange is over: it would otherwise\n    // leave a large empty area after the last message. The min-height\n    // transition settles the layout smoothly (the browser clamps the\n    // scroll progressively when the viewport sat inside the removed area).\n    watch(\n        () => props.status,\n        (status) => {\n            if (status === 'ready' || status === 'error') {\n                isSpacerSettling.value = true\n                height.value = 0\n            }\n        },\n    )\n\n    const isRevised = (messageId: string) => {\n        return props.revisedAnswers?.some((r) => r.messageId === messageId)\n    }\n\n    const getMessageFeedback = (messageId: string) =>\n        props.messageFeedbacks?.find((f) => f.messageId === messageId)\n\n    // Interactive vote/feedback buttons. In read-only mode (admin chat-logs)\n    // the vote is shown on the message itself (coloured bubble border + an\n    // \"active\" thumb in the footer) and the comment, if any, below it.\n    const isFeedbackButtonVisible = (\n        kind: 'upvote' | 'downvote' | 'feedback',\n        index: number,\n    ) => !props.readonlyFeedback && isActionButtonVisible(kind, index)\n\n    // Read-only feedback for a message (drives the reaction chip anchored to\n    // the bubble). undefined when not in read-only mode.\n    const readonlyFeedbackOf = (messageId: string) =>\n        props.readonlyFeedback ? getMessageFeedback(messageId) : undefined\n    const feedbackVote = (messageId: string) =>\n        readonlyFeedbackOf(messageId)?.vote\n    // The real reaction glyph, shown ONLY for unmapped reactions (no vote):\n    // 👍/❤️/👎 keep the classic thumb icon, while e.g. WhatsApp \"😍\" shows the\n    // actual emoji. Platforms that send a type word (Teams \"like\") have a vote\n    // and therefore use the icon too.\n    const feedbackEmoji = (messageId: string) => {\n        const feedback = readonlyFeedbackOf(messageId)\n        if (feedback?.vote) {\n            return undefined\n        }\n        const raw = feedback?.metadata?.reactionEmoji\n        return typeof raw === 'string' && /\\p{Extended_Pictographic}/u.test(raw)\n            ? raw\n            : undefined\n    }\n    const hasReaction = (messageId: string) =>\n        Boolean(feedbackVote(messageId) || feedbackEmoji(messageId))\n    const reactionToneClass = (messageId: string) => {\n        // A real emoji carries its own colour → neutral pill. Only the\n        // thumb-icon fallback uses the sentiment colour.\n        if (feedbackEmoji(messageId)) {\n            return 'pk-chatbot-message__reaction--neutral'\n        }\n        const vote = feedbackVote(messageId)\n        if (vote === 'upvote') {\n            return 'pk-chatbot-message__reaction--positive'\n        }\n        if (vote === 'downvote') {\n            return 'pk-chatbot-message__reaction--negative'\n        }\n        return 'pk-chatbot-message__reaction--neutral'\n    }\n    const reactionTitle = (messageId: string) => {\n        const vote = feedbackVote(messageId)\n        if (vote === 'upvote') {\n            return $t('hint.userFeedbackPositive')\n        }\n        if (vote === 'downvote') {\n            return $t('hint.userFeedbackNegative')\n        }\n        return $t('hint.userFeedbackReaction')\n    }\n\n    // Index of the last text part: the reaction chip anchors to that bubble so\n    // it renders once even when the message has several text parts.\n    const lastTextPartIndex = (message: UIChatMessage) => {\n        const parts = getMergedParts(message)\n        for (let index = parts.length - 1; index >= 0; index -= 1) {\n            if (isTextPart(parts[index])) {\n                return index\n            }\n        }\n        return -1\n    }\n\n    const activeMessage = computed(() => {\n        return props.messages?.[props.messages.length - 1]\n    })\n    const activeMessageLastPart = computed(() => {\n        const active = activeMessage.value\n        if (!active) {\n            return null\n        }\n        return active.parts[active.parts.length - 1]\n    })\n\n    const mergedPartsMap = computed(() => {\n        const map = new Map<string, UIChatMessage['parts']>()\n        for (const message of props.messages ?? []) {\n            if (message.role === 'assistant') {\n                map.set(message.id, mergeConsecutiveTextParts(message.parts))\n            }\n        }\n        return map\n    })\n    const getMergedParts = (message: UIChatMessage) => {\n        return mergedPartsMap.value.get(message.id) ?? message.parts\n    }\n    const isLoading = computed(() => {\n        return props.status === 'submitted' || props.status === 'streaming'\n    })\n    const isError = computed(() => props.status === 'error')\n\n    /**\n     * The spoken wait shows only while nothing else is working: the wait\n     * survives the hang-up (the answer can be written minutes later) and the\n     * caller can type meanwhile, and two working indicators stacked would say\n     * the same thing twice. It comes back when the written turn is over.\n     */\n    const isSpokenWaitVisible = computed(\n        () => props.awaitingSpokenAnswer === true && !isLoading.value,\n    )\n\n    /**\n     * The wait indicator closes the feed, so it carries the anchor spacer\n     * itself, the way the streaming assistant message does. Rendering the\n     * standalone spacer as well would stack the two and push the question\n     * above the top of the content area, out of view.\n     *\n     * Only when it is the last thing in the feed: an error card, or an\n     * assistant answer already landed, keeps the spacer where it was.\n     */\n    const isSpokenWaitAnchored = computed(\n        () =>\n            isSpokenWaitVisible.value &&\n            activeMessage.value?.role === 'user' &&\n            !isError.value,\n    )\n\n    const activeMessageLastPartLabel = computed(() => {\n        const part = activeMessageLastPart.value\n        return getToolPartLabel($t, part)\n    })\n    const activeMessageLastPartIcon = computed(() => {\n        const part = activeMessageLastPart.value\n        return getPartIcon(part)\n    })\n\n    const getMessageIndexById = (messageId: string) => {\n        return props.messages?.findIndex((m) => m.id === messageId)\n    }\n    const isLastMessage = (index?: number) => {\n        if (index === undefined || !props.messages) {\n            return false\n        }\n        return index === props.messages.length - 1\n    }\n    const isMessageRegenerateButtonVisible = (index: number) => {\n        return (\n            isLastMessage(index) &&\n            props.status === 'ready' &&\n            !!props.actions?.includes('regenerate')\n        )\n    }\n    // On the last message the actions appear only once the answer is ready;\n    // on previous messages they are always available.\n    const isActionButtonVisible = (\n        action: ChatMessageActions,\n        index: number,\n    ) => {\n        return (\n            (!isLastMessage(index) || props.status === 'ready') &&\n            !!props.actions?.includes(action)\n        )\n    }\n    const isLastTextPart = (message: UIChatMessage) => {\n        const lastPart = message.parts[message.parts.length - 1]\n        return isTextPart(lastPart)\n    }\n    const messageHasSteps = (message: UIChatMessage) =>\n        message.parts.some((part) => isReasoningPart(part) || isToolPart(part))\n    // The extended steps timeline replaces the compact activity indicator as\n    // soon as the message has at least one step to show.\n    const showStepsTimeline = (message: UIChatMessage) =>\n        Boolean(props.showExtendedSteps) &&\n        isAssistant(message) &&\n        messageHasSteps(message)\n    const isAssistant = (message: UIChatMessage) => message.role === 'assistant'\n    const isUser = (message: UIChatMessage) => message.role === 'user'\n    const getPreviousAssistantMessage = (index: number) => {\n        return props.messages\n            ?.slice(0, index)\n            .reverse()\n            .find((message) => isAssistant(message))\n    }\n    const getNextAssistantMessage = (index: number) => {\n        return props.messages\n            ?.slice(index + 1)\n            .find((message) => isAssistant(message))\n    }\n    // Returns the date to show in the day divider before the message at\n    // `index`, or undefined when the surrounding assistant messages belong\n    // to the same (local) day.\n    const getDividerDate = (index: number) => {\n        const previousCreatedAt =\n            getPreviousAssistantMessage(index)?.metadata?.createdAt\n        const nextCreatedAt =\n            getNextAssistantMessage(index)?.metadata?.createdAt\n        if (!previousCreatedAt || !nextCreatedAt) {\n            return undefined\n        }\n        const previousDate = new Date(previousCreatedAt)\n        const nextDate = new Date(nextCreatedAt)\n        return previousDate.toDateString() !== nextDate.toDateString()\n            ? nextDate\n            : undefined\n    }\n    const showMessageFooter = (message: UIChatMessage, index: number) => {\n        if (index === 0 || message.role !== 'assistant') {\n            return false\n        }\n        return Boolean(\n            props.actions?.length ||\n            (props.showMessageDateTime &&\n                message.metadata?.createdAt !== undefined) ||\n            message.metadata?.completedAt !== undefined ||\n            (props.showMessageTokensCount &&\n                message.metadata?.totalTokens !== undefined),\n        )\n    }\n    // Hover-only metadata (time + duration), shown when the fixed variant\n    // (showMessageDateTime) is off.\n    const formatMessageTime = (createdAt: number) => {\n        const date = new Date(createdAt)\n        const isToday = date.toDateString() === new Date().toDateString()\n        return $d(date, isToday ? 'time' : 'date-time')\n    }\n    const getMessageDuration = (message: UIChatMessage) => {\n        const { createdAt, completedAt } = message.metadata ?? {}\n        if (!createdAt || !completedAt) {\n            return undefined\n        }\n        return formatDuration($n, completedAt - createdAt)\n    }\n    // feedback message auto scroll\n    const feedbackMessageEl =\n        useTemplateRef<InstanceType<typeof PkChatbotFeedbackForm>[]>(\n            'feedbackMessageEl',\n        )\n    watch(\n        () => props.feedbackMessageId,\n        async () => {\n            await nextTick()\n            if (!props.feedbackMessageId) {\n                return\n            }\n            const el = feedbackMessageEl.value?.[0]?.$el\n            if (!el) {\n                return\n            }\n            if (isLastMessage(getMessageIndexById(props.feedbackMessageId))) {\n                scrollToBottom()\n                return\n            }\n            el.scrollIntoView({ behavior: 'smooth', block: 'center' })\n        },\n    )\n</script>\n\n<template>\n    <div\n        ref=\"scrollEl\"\n        class=\"pk-chatbot-messages\"\n        :class=\"{ 'pk-chatbot-messages--settling': isSpacerSettling }\"\n        role=\"log\"\n        aria-live=\"polite\"\n        aria-relevant=\"additions text\"\n        :aria-busy=\"isLoading\"\n        :style=\"{\n            '--chatbot-main-color': mainColor,\n            '--chatbot-contrast-color': contrastColor,\n        }\"\n        @scroll=\"onScroll\">\n        <!-- First in flow (content top): its absolutely-positioned children\n         must never inflate the scrollable overflow past the real content -->\n        <div\n            v-if=\"showScrollToBottom && outlineItems.length > 1\"\n            class=\"pk-chatbot-messages__outline\">\n            <PkChatbotOutlineRail\n                :items=\"outlineItems\"\n                :active-id=\"activeOutlineId\"\n                @select=\"scrollToUserMessage\" />\n        </div>\n        <div ref=\"wrapperEl\" class=\"pk-chatbot-messages__wrapper\">\n            <template v-for=\"(message, index) in messages\" :key=\"message.id\">\n                <div\n                    v-if=\"isUser(message) && getDividerDate(index)\"\n                    class=\"pk-chatbot-divider\">\n                    <span class=\"pk-chatbot-divider__label\">\n                        {{ $d(getDividerDate(index)!, 'short') }}\n                    </span>\n                </div>\n                <div\n                    v-if=\"\n                        message.parts.length ||\n                        (isLastMessage(index) &&\n                            isLoading &&\n                            isAssistant(message))\n                    \"\n                    class=\"pk-chatbot-message\"\n                    :class=\"[\n                        `pk-chatbot-message--${message.role}`,\n                        {\n                            'pk-chatbot-message--loading':\n                                isLoading &&\n                                isLastMessage(index) &&\n                                isAssistant(message),\n                        },\n                    ]\"\n                    :style=\"{\n                        minHeight:\n                            isLastMessage(index) &&\n                            isAssistant(message) &&\n                            !isError\n                                ? `${height}px`\n                                : undefined,\n                    }\">\n                    <transition appear name=\"pk-chatbot-part\">\n                        <PkChatbotSteps\n                            v-if=\"showStepsTimeline(message)\"\n                            :message\n                            :is-streaming=\"isLoading && isLastMessage(index)\"\n                            :is-dark />\n                    </transition>\n                    <template\n                        v-for=\"(part, partIndex) in getMergedParts(message)\"\n                        :key=\"partIndex\">\n                        <transition\n                            v-if=\"isTextPart(part) && part.text.trim()\"\n                            appear\n                            name=\"pk-chatbot-part\">\n                            <div class=\"pk-chatbot-message__text\">\n                                <slot\n                                    v-bind=\"{\n                                        message,\n                                        part,\n                                        index,\n                                        isLoading,\n                                    }\"\n                                    name=\"text\">\n                                    <PkStreamingMarkdown\n                                        v-if=\"isAssistant(message)\"\n                                        class=\"wysiwyg\"\n                                        :markdown=\"part.text\"\n                                        :is-dark\n                                        :loading=\"\n                                            isLastMessage(index) &&\n                                            status === 'streaming'\n                                        \" />\n                                    <template v-else>\n                                        {{ part.text }}\n                                    </template>\n                                </slot>\n                                <!-- Read-only reaction chip overlapping the\n                                     bubble corner, like a messaging app. Hidden\n                                     when a comment is shown: the callout below\n                                     then carries the reaction glyph instead. -->\n                                <span\n                                    v-if=\"\n                                        hasReaction(message.id) &&\n                                        !getMessageFeedback(message.id)\n                                            ?.comment &&\n                                        partIndex === lastTextPartIndex(message)\n                                    \"\n                                    class=\"pk-chatbot-message__reaction\"\n                                    :class=\"reactionToneClass(message.id)\"\n                                    :title=\"reactionTitle(message.id)\">\n                                    <span\n                                        v-if=\"feedbackEmoji(message.id)\"\n                                        class=\"pk-chatbot-message__reaction-emoji\">\n                                        {{ feedbackEmoji(message.id) }}\n                                    </span>\n                                    <VvIcon\n                                        v-else\n                                        :name=\"\n                                            feedbackVote(message.id) ===\n                                            'downvote'\n                                                ? 'ri:thumb-down-fill'\n                                                : 'ri:thumb-up-fill'\n                                        \" />\n                                </span>\n                            </div>\n                        </transition>\n                        <transition\n                            v-else-if=\"isFilePart(part)\"\n                            appear\n                            name=\"pk-chatbot-part\">\n                            <PkChatbotFilePreview\n                                :media-type=\"part.mediaType\"\n                                :url=\"part.url\"\n                                :filename=\"part.filename\"\n                                :size=\"getFilePartMedia(part)?.bytesCount\" />\n                        </transition>\n                        <!-- Anything asking the user for consent (a suspended\n                             tool call or a `requestConfirm`) shares one card,\n                             ahead of the per-tool components. An approval stays\n                             answerable only in the trailing message: the backend\n                             closes the abandoned ones as denied, while a\n                             `requestConfirm` can still be resolved later. -->\n                        <transition\n                            v-else-if=\"\n                                isConfirmationCardPart(part) &&\n                                !isStreamingPart(part)\n                            \"\n                            appear\n                            name=\"pk-chatbot-part\">\n                            <!-- Key WITHOUT the part state: the card must stay\n                                 mounted across the approval lifecycle so its\n                                 inner transitions play once; remounting per\n                                 state replays the appear animation on every\n                                 hop (requested → responded → output). -->\n                            <PkToolApprovalCard\n                                :key=\"`approval-${partIndex}`\"\n                                :part\n                                :actionable=\"\n                                    interactive === true &&\n                                    (isToolConfirmPart(part) ||\n                                        isLastMessage(index))\n                                \"\n                                :call-verdict=\"\n                                    confirmVerdictsOnCall?.get(\n                                        (part as { toolCallId?: string })\n                                            .toolCallId ?? '',\n                                    )\n                                \"\n                                @respond=\"onCardRespond(part, $event)\" />\n                        </transition>\n                        <transition\n                            v-else-if=\"\n                                isToolPart(part) &&\n                                !isStreamingPart(part) &&\n                                (toolComponentMap[getToolPartName(part)] ||\n                                    slots[part.type] ||\n                                    showAllMessageParts)\n                            \"\n                            appear\n                            name=\"pk-chatbot-part\">\n                            <component\n                                :is=\"toolComponentMap[getToolPartName(part)]\"\n                                v-if=\"\n                                    !slots[part.type] &&\n                                    toolComponentMap[getToolPartName(part)]\n                                \"\n                                :key=\"`component-${partIndex}-${getPartState(part)}`\"\n                                :part />\n                            <slot\n                                v-else\n                                :name=\"part.type\"\n                                v-bind=\"{\n                                    message,\n                                    part,\n                                    index,\n                                    isLoading,\n                                }\">\n                                <div\n                                    v-if=\"showAllMessageParts\"\n                                    class=\"pk-chatbot-message__loading-info\">\n                                    <div class=\"flex gap-8 items-center\">\n                                        <VvIcon\n                                            v-if=\"getPartIcon(part)\"\n                                            :name=\"getPartIcon(part)!\"\n                                            class=\"shrink-0\" />\n                                        <code class=\"font-mono rounded text-12\">\n                                            {{ toKebabCase(part.type) }}\n                                        </code>\n                                    </div>\n                                </div>\n                            </slot>\n                        </transition>\n                        <!-- Read-only comment: anchored right after the message\n                             text (same bubble as the reaction chip) so the\n                             feedback stays attached to the message body. -->\n                        <transition mode=\"out-in\">\n                            <PkChatbotMessageFeedback\n                                v-if=\"\n                                    partIndex === lastTextPartIndex(message) &&\n                                    readonlyFeedback &&\n                                    getMessageFeedback(message.id)?.comment\n                                \"\n                                :feedback=\"getMessageFeedback(message.id)!\" />\n                        </transition>\n                    </template>\n                    <transition name=\"fade-in\" mode=\"out-in\">\n                        <div\n                            v-if=\"\n                                isLoading &&\n                                isLastMessage(index) &&\n                                !isLastTextPart(message) &&\n                                isAssistant(message) &&\n                                !showStepsTimeline(message)\n                            \"\n                            :key=\"`loading-info-${message.id}`\"\n                            class=\"pk-chatbot-message__loading-info\">\n                            <div class=\"flex gap-8 items-center\">\n                                <VvIcon name=\"loading-loop\" class=\"shrink-0\" />\n                                <transition mode=\"out-in\">\n                                    <VvIcon\n                                        v-if=\"activeMessageLastPartIcon\"\n                                        :key=\"activeMessageLastPartIcon\"\n                                        class=\"shrink-0\"\n                                        :name=\"activeMessageLastPartIcon\" />\n                                </transition>\n                                <transition mode=\"out-in\">\n                                    <span\n                                        v-if=\"activeMessageLastPartLabel\"\n                                        :key=\"activeMessageLastPartLabel\"\n                                        class=\"text-12\">\n                                        {{ activeMessageLastPartLabel }}\n                                    </span>\n                                </transition>\n                            </div>\n                            <transition name=\"fade-in\" mode=\"out-in\">\n                                <PkStreamingMarkdownAutoscroll\n                                    v-if=\"\n                                        activeMessageLastPart &&\n                                        'text' in activeMessageLastPart &&\n                                        activeMessageLastPart.text.trim()\n                                    \"\n                                    :markdown=\"activeMessageLastPart.text\"\n                                    :is-dark\n                                    :tail-length=\"LIVE_REASONING_TAIL_LENGTH\"\n                                    inner-class=\"wysiwyg\"\n                                    class=\"border border-surface-3 rounded-md p-4 mt-8 bg-surface-1 max-h-64 text-12 w-full\" />\n                            </transition>\n                        </div>\n                    </transition>\n                    <transition mode=\"out-in\">\n                        <div\n                            v-if=\"showMessageFooter(message, index)\"\n                            class=\"pk-chatbot-message__footer\">\n                            <VvButtonGroup\n                                modifiers=\"compact\"\n                                class=\"mr-auto shrink-0\">\n                                <transition mode=\"out-in\">\n                                    <VvButton\n                                        v-if=\"\n                                            isMessageRegenerateButtonVisible(\n                                                index,\n                                            )\n                                        \"\n                                        icon=\"ri:reset-right-line\"\n                                        modifiers=\"action-quiet-small\"\n                                        :title=\"$t('action.regenerate')\"\n                                        :aria-label=\"$t('action.regenerate')\"\n                                        @click.stop=\"$emit('regenerate')\" />\n                                </transition>\n                                <transition mode=\"out-in\">\n                                    <VvButton\n                                        v-if=\"\n                                            isActionButtonVisible(\n                                                'show-info',\n                                                index,\n                                            )\n                                        \"\n                                        icon=\"ri:information-line\"\n                                        :title=\"$t('action.getMoreInfo')\"\n                                        :aria-label=\"$t('action.getMoreInfo')\"\n                                        modifiers=\"action-quiet-small\"\n                                        @click.stop=\"\n                                            $emit('show-info', message)\n                                        \" />\n                                </transition>\n                                <transition mode=\"out-in\">\n                                    <VvButton\n                                        v-if=\"\n                                            isActionButtonVisible(\n                                                'revise',\n                                                index,\n                                            )\n                                        \"\n                                        :icon=\"\n                                            isRevised(message.id)\n                                                ? 'ri:file-edit-fill'\n                                                : 'ri:file-edit-line'\n                                        \"\n                                        :title=\"\n                                            isRevised(message.id)\n                                                ? $t('action.editRevise')\n                                                : $t('action.createRevise')\n                                        \"\n                                        :aria-label=\"\n                                            isRevised(message.id)\n                                                ? $t('action.editRevise')\n                                                : $t('action.createRevise')\n                                        \"\n                                        modifiers=\"action-quiet-small\"\n                                        :class=\"{\n                                            'text-brand': isRevised(message.id),\n                                        }\"\n                                        @click.stop=\"\n                                            $emit('revise', message)\n                                        \" />\n                                </transition>\n                                <transition mode=\"out-in\">\n                                    <VvButton\n                                        v-if=\"\n                                            isFeedbackButtonVisible(\n                                                'upvote',\n                                                index,\n                                            )\n                                        \"\n                                        :icon=\"\n                                            getMessageFeedback(message.id)\n                                                ?.vote === 'upvote'\n                                                ? 'ri:thumb-up-fill'\n                                                : 'ri:thumb-up-line'\n                                        \"\n                                        :title=\"$t('action.upvote')\"\n                                        :aria-label=\"$t('action.upvote')\"\n                                        modifiers=\"action-quiet-small\"\n                                        @click.stop=\"\n                                            $emit('upvote', message)\n                                        \" />\n                                </transition>\n                                <transition mode=\"out-in\">\n                                    <VvButton\n                                        v-if=\"\n                                            isFeedbackButtonVisible(\n                                                'downvote',\n                                                index,\n                                            )\n                                        \"\n                                        :icon=\"\n                                            getMessageFeedback(message.id)\n                                                ?.vote === 'downvote'\n                                                ? 'ri:thumb-down-fill'\n                                                : 'ri:thumb-down-line'\n                                        \"\n                                        :title=\"$t('action.downvote')\"\n                                        :aria-label=\"$t('action.downvote')\"\n                                        modifiers=\"action-quiet-small\"\n                                        @click.stop=\"\n                                            $emit('downvote', message)\n                                        \" />\n                                </transition>\n                                <transition mode=\"out-in\">\n                                    <VvButton\n                                        v-if=\"\n                                            isFeedbackButtonVisible(\n                                                'feedback',\n                                                index,\n                                            )\n                                        \"\n                                        :icon=\"\n                                            getMessageFeedback(message.id)\n                                                ?.comment\n                                                ? 'ri:feedback-fill'\n                                                : 'ri:feedback-line'\n                                        \"\n                                        :title=\"$t('action.feedback')\"\n                                        :aria-label=\"$t('action.feedback')\"\n                                        modifiers=\"action-quiet-small\"\n                                        @click.stop=\"\n                                            $emit('feedback', message)\n                                        \" />\n                                </transition>\n                            </VvButtonGroup>\n                            <div\n                                v-if=\"\n                                    !showMessageDateTime &&\n                                    message.metadata?.createdAt &&\n                                    message.metadata?.completedAt\n                                \"\n                                class=\"pk-chatbot-message__hover-meta\">\n                                <time\n                                    :datetime=\"\n                                        new Date(\n                                            message.metadata.createdAt,\n                                        ).toISOString()\n                                    \"\n                                    :title=\"\n                                        $d(\n                                            new Date(\n                                                message.metadata.createdAt,\n                                            ),\n                                            'date-time',\n                                        )\n                                    \"\n                                    class=\"flex items-center gap-4 min-w-0\">\n                                    <VvIcon\n                                        name=\"ri:time-line\"\n                                        class=\"shrink-0\" />\n                                    <span class=\"truncate\">{{\n                                        formatMessageTime(\n                                            message.metadata.createdAt,\n                                        )\n                                    }}</span>\n                                </time>\n                                <span\n                                    v-if=\"getMessageDuration(message)\"\n                                    class=\"flex items-center gap-4 min-w-0\">\n                                    <VvIcon\n                                        name=\"ri:hourglass-line\"\n                                        class=\"shrink-0\" />\n                                    <span class=\"truncate\">{{\n                                        getMessageDuration(message)\n                                    }}</span>\n                                </span>\n                            </div>\n                            <span\n                                v-if=\"\n                                    showMessageTokensCount &&\n                                    message.metadata?.totalTokens\n                                \"\n                                class=\"flex items-center gap-4 text-12 text-word-3\">\n                                <VvIcon\n                                    name=\"ri:ai-generate-2-line\"\n                                    class=\"shrink-0\" />\n                                <span class=\"truncate\"\n                                    >{{\n                                        $n(\n                                            message.metadata.totalTokens,\n                                            'integer',\n                                        )\n                                    }}\n                                    {{ $t('label.tokens') }}\n                                </span>\n                            </span>\n                            <time\n                                v-if=\"\n                                    showMessageDateTime &&\n                                    message.metadata?.createdAt\n                                \"\n                                :datetime=\"\n                                    new Date(\n                                        message.metadata?.createdAt,\n                                    ).toISOString()\n                                \"\n                                class=\"flex items-center gap-4 text-12 text-word-3\">\n                                <VvIcon name=\"ri:time-line\" class=\"shrink-0\" />\n                                <span class=\"truncate\">{{\n                                    $d(\n                                        new Date(message.metadata?.createdAt),\n                                        'date-time',\n                                    )\n                                }}</span>\n                            </time>\n                            <div\n                                v-if=\"\n                                    showMessageDateTime &&\n                                    message?.metadata?.completedAt &&\n                                    message?.metadata?.createdAt\n                                \"\n                                class=\"flex items-center gap-4 text-12 text-word-3\">\n                                <VvIcon\n                                    name=\"ri:hourglass-line\"\n                                    class=\"shrink-0\" />\n                                <PkRelativeTime\n                                    class=\"truncate\"\n                                    :date=\"message.metadata?.createdAt\"\n                                    :end-date=\"message.metadata?.completedAt\" />\n                            </div>\n                        </div>\n                    </transition>\n                    <transition mode=\"out-in\">\n                        <PkChatbotFeedbackForm\n                            v-if=\"message.id === feedbackMessageId\"\n                            ref=\"feedbackMessageEl\"\n                            :loading=\"feedbackLoading\"\n                            :submitted=\"feedbackSubmitted\"\n                            :error=\"feedbackError\"\n                            @submit=\"$emit('feedback-submit', $event)\"\n                            @close=\"$emit('feedback-close')\" />\n                    </transition>\n                </div>\n            </template>\n            <!-- A spoken turn streams to the provider, not here: nothing in\n                 this list moves between the question and the answer landing.\n                 Its own indicator, because the status-driven one hangs off an\n                 assistant message the SDK never creates for a call. When to\n                 show it and when it carries the anchor spacer: see\n                 `isSpokenWaitVisible` and `isSpokenWaitAnchored`. -->\n            <transition appear name=\"pk-chatbot-part\">\n                <div\n                    v-if=\"isSpokenWaitVisible\"\n                    class=\"pk-chatbot-message pk-chatbot-message--assistant pk-chatbot-message--loading\"\n                    :style=\"{\n                        minHeight: isSpokenWaitAnchored\n                            ? `${height}px`\n                            : undefined,\n                    }\">\n                    <div class=\"pk-chatbot-message__loading-info\">\n                        <div class=\"flex gap-8 items-center\">\n                            <VvIcon name=\"loading-loop\" class=\"shrink-0\" />\n                            <span class=\"text-12\">\n                                {{ $t('label.answeringOnTheCall') }}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n            </transition>\n            <transition appear name=\"pk-chatbot-part\">\n                <PkChatbotError\n                    v-if=\"isError\"\n                    :error\n                    @retry=\"$emit('auto-retry')\"\n                    @reset=\"$emit('reset-chat')\" />\n            </transition>\n            <div\n                v-if=\"\n                    (activeMessage?.role === 'user' && !isSpokenWaitAnchored) ||\n                    isError\n                \"\n                class=\"pk-chatbot-messages__spacer\"\n                :style=\"{ minHeight: `${height}px` }\"></div>\n        </div>\n        <Transition name=\"pk-chatbot-messages-fab\">\n            <button\n                v-if=\"showScrollToBottom && (userScrolledUp || !isAtBottom)\"\n                type=\"button\"\n                class=\"pk-chatbot-messages__scroll-to-bottom\"\n                :title=\"$t('action.scrollToBottom')\"\n                :aria-label=\"$t('action.scrollToBottom')\"\n                @click=\"onScrollToBottomClick\">\n                <VvIcon name=\"ri:arrow-down-line\" />\n            </button>\n        </Transition>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-messages {\n        overflow-y: auto;\n        flex: 1;\n        min-width: 0;\n        font-size: var(--text-14);\n\n        scrollbar-width: thin;\n        scrollbar-color: var(--color-word-5) var(--color-surface-1);\n\n        &__wrapper {\n            display: flex;\n            flex-direction: column;\n            gap: var(--spacing-16);\n            min-width: 0;\n        }\n\n        // Conversation outline rail: sticky shell pinned to the vertical\n        // middle of the scroll area, at the right edge. Zero-sized and\n        // first in flow so neither it nor its absolutely-positioned pieces\n        // inflate scrollHeight. Desktop only, like ChatGPT: in the widget and\n        // the panel the chat is as wide on a phone as on a desktop, so the\n        // viewport is the only thing that tells them apart. The fullscreen\n        // layout measures the chat itself instead (PkChatbot).\n        &__outline {\n            display: none;\n            position: sticky;\n            top: 50%;\n            z-index: 2;\n            flex: none;\n            align-self: flex-end;\n            height: 0;\n\n            @include media-breakpoint-up('md', $breakpoints) {\n                display: block;\n            }\n\n            .pk-chatbot-outline {\n                position: absolute;\n                top: 0;\n                right: 0;\n                transform: translateY(-50%);\n            }\n        }\n\n        // Placeholder while the answer has not started yet: settles like\n        // the message spacer when released. Only the release is animated\n        // (`--settling`): animating the growth would keep `scrollHeight`\n        // behind while the anchor scroll reads it, landing short of the\n        // anchor with no second chance to catch up.\n        &--settling {\n            .pk-chatbot-messages__spacer,\n            .pk-chatbot-message {\n                transition: min-height 300ms var(--ease-out);\n\n                @media (prefers-reduced-motion: reduce) {\n                    transition: none;\n                }\n            }\n        }\n\n        // Floating \"back to bottom\" button, sticky inside the scroll area\n        &__scroll-to-bottom {\n            position: sticky;\n            bottom: var(--spacing-8);\n            z-index: 2;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            // The scroll container is a flex column: without this the\n            // overflowing content shrinks the button, ignoring its height\n            flex: none;\n            width: var(--spacing-36);\n            height: var(--spacing-36);\n            // Net-zero layout contribution: mounting/unmounting the button\n            // must not change scrollHeight, or reaching the bottom (which\n            // hides it) would clamp scrollTop and cause a visible jump\n            margin-block-start: calc(-1 * var(--spacing-36));\n            margin-inline: auto;\n            border: 1px solid var(--color-surface-3);\n            border-radius: var(--rounded-full);\n            background-color: var(--color-surface-1);\n            box-shadow: var(--shadow-md);\n            color: var(--color-word-1);\n            cursor: pointer;\n            transition: var(--transition-colors);\n\n            &:hover {\n                background-color: var(--color-surface-2);\n            }\n        }\n    }\n\n    .pk-chatbot-messages-fab-enter-active,\n    .pk-chatbot-messages-fab-leave-active {\n        transition: opacity 150ms var(--ease-out);\n    }\n\n    .pk-chatbot-messages-fab-enter-from,\n    .pk-chatbot-messages-fab-leave-to {\n        opacity: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n        .pk-chatbot-messages-fab-enter-active,\n        .pk-chatbot-messages-fab-leave-active {\n            transition: none;\n        }\n    }\n\n    .pk-chatbot-divider {\n        position: relative;\n        border-bottom: 1px solid var(--color-surface-3);\n\n        &__label {\n            position: absolute;\n            padding-inline: var(--spacing-8);\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: var(--color-surface);\n            color: var(--color-word-4);\n            font-size: var(--text-12);\n        }\n    }\n\n    .pk-chatbot-message {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-sm);\n        min-width: 0;\n        align-items: flex-start;\n        // `clip` instead of `hidden` so the reaction chip, which deliberately\n        // overhangs the bubble's bottom edge, is not cut off. The margin has\n        // to cover half the chip plus its shadow.\n        overflow: clip;\n        overflow-clip-margin: var(--spacing-16);\n        max-width: 100%;\n        // The anchor spacer (inline min-height on the last assistant message)\n        // settles smoothly when released at the end of the stream: the\n        // transition lives on `.pk-chatbot-messages--settling` above\n\n        &__text {\n            position: relative;\n            color: var(--color-word-2);\n            background-color: var(--color-surface);\n            line-height: var(--leading-normal);\n            border-width: var(--spacing-px);\n            border-style: solid;\n            border-color: var(--color-surface-3);\n            padding: var(--spacing-sm);\n            border-radius: var(--rounded-xl) var(--rounded-xl) var(--rounded-xl)\n                0;\n            max-width: 100%;\n            text-overflow: ellipsis;\n            // Same reason as the block above: the chip is absolutely\n            // positioned against this bubble and hangs below its edge.\n            overflow: clip;\n            overflow-clip-margin: var(--spacing-16);\n        }\n\n        // Read-only feedback: a circular vote chip that overlaps the bubble's\n        // bottom-right corner (messaging-app style). White ring lifts it off\n        // the bubble; solid accent makes the rating unmistakable.\n        &__reaction {\n            position: absolute;\n            right: var(--spacing-8);\n            bottom: 0;\n            transform: translateY(50%);\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: var(--spacing-24);\n            height: var(--spacing-24);\n            border-radius: var(--rounded-full, 9999px);\n            color: var(--color-white, #fff);\n            font-size: var(--text-12);\n            box-shadow: var(--shadow-md);\n\n            &--positive {\n                background-color: var(--color-success);\n            }\n\n            &--negative {\n                background-color: var(--color-danger);\n            }\n\n            // Real emoji (e.g. WhatsApp): the glyph carries its own colour, so\n            // the chip stays a neutral surface pill.\n            &--neutral {\n                background-color: var(--color-surface-1);\n            }\n        }\n\n        &__reaction-emoji {\n            // Smaller than the chip so the glyph doesn't touch the ring.\n            font-size: var(--text-12);\n            line-height: 1;\n        }\n\n        &__loading-info {\n            line-height: var(--leading-normal);\n            border-width: var(--spacing-px);\n            border-style: solid;\n            border-color: var(--color-surface-3);\n            padding: var(--spacing-sm);\n            border-radius: var(--rounded-xl) var(--rounded-xl) var(--rounded-xl)\n                0;\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n            background-color: var(--color-surface);\n        }\n\n        &__footer {\n            width: 100%;\n            display: flex;\n            gap: var(--spacing-8);\n            align-items: center;\n        }\n\n        &__hover-meta {\n            display: flex;\n            min-width: 0;\n            align-items: center;\n            gap: var(--spacing-8);\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n            white-space: nowrap;\n            font-variant-numeric: tabular-nums;\n            opacity: 0;\n            transition: opacity 0.2s ease;\n        }\n\n        &:hover &__hover-meta,\n        &:focus-within &__hover-meta {\n            opacity: 1;\n        }\n\n        // Hover doesn't exist on touch devices: keep the metadata visible\n        @media (hover: none) {\n            &__hover-meta {\n                opacity: 1;\n            }\n        }\n\n        &--user {\n            align-items: flex-end;\n\n            .pk-chatbot-message__text {\n                background-color: var(\n                    --chatbot-main-color,\n                    var(--color-surface-1)\n                );\n                border-color: var(--chatbot-main-color, var(--color-surface-3));\n                color: var(--chatbot-contrast-color, var(--color-word-1));\n                border-radius: var(--rounded-xl) var(--rounded-xl) 0\n                    var(--rounded-xl);\n            }\n        }\n\n        &--assistant {\n            width: 100%;\n            gap: var(--spacing-16);\n\n            .pk-chatbot-message__text {\n                width: 100%;\n            }\n        }\n\n        &--system {\n            align-items: flex-end;\n\n            .pk-chatbot-message__text {\n                display: flex;\n                gap: var(--spacing-8);\n                font-size: var(--text-12);\n                padding: var(--spacing-8) var(--spacing-sm);\n                align-items: center;\n                border-color: var(--chatbot-main-color, var(--color-surface-3));\n                color: var(--chatbot-main-color, var(--color-word-1));\n                border-radius: var(--rounded-xl) var(--rounded-xl) 0\n                    var(--rounded-xl);\n            }\n        }\n    }\n\n    .pk-chatbot-part-enter-active {\n        transition:\n            opacity 0.25s ease,\n            transform 0.25s ease;\n    }\n\n    .pk-chatbot-part-enter-from {\n        opacity: 0;\n        transform: translateY(8px);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n        .pk-chatbot-part-enter-active {\n            transition: none;\n        }\n\n        .pk-chatbot-part-enter-from {\n            transform: none;\n        }\n    }\n</style>\n","<script lang=\"ts\" setup>\n    import type {\n        ChatMessageActions,\n        MessageFeedback,\n        RevisedAnswer,\n        UIChatMessage,\n    } from 'models'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import PkChatbotError from './PkChatbotError.vue'\n    import PkChatbotFeedbackForm from './PkChatbotFeedbackForm.vue'\n    import PkChatbotMessageFeedback from './PkChatbotMessageFeedback.vue'\n    import PkChatbotFilePreview from './PkChatbotFilePreview.vue'\n    import PkRelativeTime from '../PkRelativeTime.vue'\n    import { useI18n } from 'vue-i18n'\n    import {\n        useTemplateRef,\n        ref,\n        watch,\n        computed,\n        nextTick,\n        onMounted,\n        useSlots,\n    } from 'vue'\n    import { toolComponentMap } from './toolComponentMap'\n    import PkToolApprovalCard from './PkToolApprovalCard.vue'\n    import PkChatbotSteps from './PkChatbotSteps.vue'\n    import {\n        resolveContrastColor,\n        getPartState,\n        isTextPart,\n        isFilePart,\n        isToolPart,\n        isReasoningPart,\n        isStreamingPart,\n        isToolConfirmPart,\n        isConfirmationCardPart,\n        getToolApprovalId,\n        getPartIcon,\n        getToolPartLabel,\n        mergeConsecutiveTextParts,\n        formatDuration,\n        LIVE_REASONING_TAIL_LENGTH,\n    } from './utils'\n    import { getFilePartMedia, getToolPartName, toKebabCase } from 'utils'\n    import PkStreamingMarkdownAutoscroll from './PkStreamingMarkdownAutoscroll.vue'\n    import PkChatbotOutlineRail from './PkChatbotOutlineRail.vue'\n    import { useChatScroll } from './useChatScroll'\n\n    const props = defineProps<{\n        status?: 'submitted' | 'streaming' | 'ready' | 'error'\n        messages?: UIChatMessage[]\n        error?: Error\n        actions?: ChatMessageActions[]\n        mainColor?: string\n        textColor?: 'auto' | 'white' | 'black'\n        revisedAnswers?: RevisedAnswer[]\n        messageFeedbacks?: MessageFeedback[]\n        /**\n         * Render the vote/feedback action buttons as read-only state indicators\n         * (e.g. admin chat-logs view): icons reflect the user's feedback but the\n         * buttons are not interactive.\n         */\n        readonlyFeedback?: boolean\n        disableHeightAdjustment?: boolean\n        showMessageDateTime?: boolean\n        showMessageTokensCount?: boolean\n        showAllMessageParts?: boolean\n        /**\n         * Lets the user answer the tool requests rendered in the feed (approval\n         * and confirm cards). Off by default: the log viewers render the same\n         * messages read-only and have nothing to answer with.\n         */\n        interactive?: boolean\n        showExtendedSteps?: boolean\n        /**\n         * A call is waiting for its answer. The turn runs outside this client\n         * (the voice provider drives it), so `status` says nothing about it and\n         * the feed would sit still for the seconds it takes.\n         */\n        awaitingSpokenAnswer?: boolean\n        /**\n         * Verdicts given ON A CALL, by toolCallId. A confirm answered during a\n         * call goes back to the agent as a spoken message, so its part never\n         * leaves the render-ack state: without this the card kept its buttons\n         * after the answer, and every extra tap said \"Confermo\" again\n         * (measured 2026-08-07). Only successful sends are recorded, so a tap\n         * that never reached the provider leaves the card usable.\n         */\n        confirmVerdictsOnCall?: Map<string, boolean>\n        isDark?: boolean\n        /** Show a floating \"back to bottom\" button when the user scrolls up (fullscreen layout) */\n        showScrollToBottom?: boolean\n        // TODO: move feedback in a separate component to avoid passing these props\n        feedbackMessageId?: string\n        feedbackLoading?: boolean\n        feedbackSubmitted?: boolean\n        feedbackError?: string\n    }>()\n\n    const emit = defineEmits<{\n        (e: 'show-info', message: UIChatMessage): void\n        (e: 'regenerate'): void\n        (e: 'revise', message: UIChatMessage): void\n        (e: 'upvote', message: UIChatMessage): void\n        (e: 'downvote', message: UIChatMessage): void\n        (e: 'feedback', message: UIChatMessage): void\n        (e: 'feedback-submit', comment: string): void\n        (e: 'feedback-close'): void\n        (e: 'scroll-up'): void\n        (e: 'scroll-down'): void\n        (e: 'auto-retry'): void\n        (e: 'reset-chat'): void\n        (\n            e: 'approval-respond',\n            payload: { id: string; approved: boolean },\n        ): void\n        (\n            e: 'confirm-respond',\n            payload: { toolCallId: string; confirmed: boolean },\n        ): void\n    }>()\n\n    const {\n        t: $t,\n        d: $d,\n        n: $n,\n    } = useI18n({\n        useScope: 'global',\n    })\n\n    const slots = useSlots()\n\n    /**\n     * Forwards the user's verdict from the confirmation card. The two kinds of\n     * request travel back on different channels: an approval answers the SDK\n     * approval it carries the id of, a `requestConfirm` resolves as a client\n     * tool output. Without the id there is nothing to answer, so the click is\n     * dropped instead of sending an unmatchable response.\n     */\n    const onCardRespond = (\n        part: UIChatMessage['parts'][number],\n        approved: boolean,\n    ) => {\n        if (isToolConfirmPart(part)) {\n            const toolCallId = (part as { toolCallId?: string }).toolCallId\n            if (toolCallId) {\n                emit('confirm-respond', { toolCallId, confirmed: approved })\n            }\n            return\n        }\n        const id = getToolApprovalId(part)\n        if (!id) {\n            return\n        }\n        emit('approval-respond', { id, approved })\n    }\n\n    const scrollEl = useTemplateRef<HTMLDivElement>('scrollEl')\n    const wrapperEl = useTemplateRef<HTMLDivElement>('wrapperEl')\n    const contrastColor = computed(() =>\n        resolveContrastColor(props.textColor, props.mainColor),\n    )\n\n    // --- Scroll ---\n\n    const { handleScroll, scrollToBottom, userScrolledUp, isAtBottom } =\n        useChatScroll({\n            scrollEl,\n            status: () => props.status,\n            messagesLength: () => props.messages?.length,\n            lastMessageRole: () =>\n                props.messages?.[props.messages.length - 1]?.role,\n            contentEl: () => wrapperEl.value,\n            beforeNewMessageScroll: () => updateAnchorSpacer(),\n            onScrollUp: () => emit('scroll-up'),\n            onScrollDown: () => emit('scroll-down'),\n        })\n\n    const onScrollToBottomClick = () => {\n        // scrollToBottom() is a no-op while userScrolledUp is set\n        userScrolledUp.value = false\n        scrollToBottom()\n    }\n\n    // --- Conversation outline (fullscreen, desktop) ---\n\n    const outlineItems = computed(() =>\n        (props.messages ?? [])\n            .filter((message) => message.role === 'user')\n            .map((message) => ({\n                id: message.id,\n                preview:\n                    message.parts.find(isTextPart)?.text.trim().slice(0, 120) ||\n                    '…',\n            })),\n    )\n    const activeOutlineId = ref<string>()\n\n    // The rail entries map 1:1 onto the rendered user messages\n    const getUserMessageEls = () =>\n        scrollEl.value?.querySelectorAll('.pk-chatbot-message--user') ?? []\n\n    // Scroll-spy: active is the last user message above the middle of the\n    // viewport (the exchange currently being read)\n    const updateActiveOutline = () => {\n        const scroller = scrollEl.value\n        if (!scroller || !props.showScrollToBottom) {\n            return\n        }\n        const line =\n            scroller.getBoundingClientRect().top + scroller.clientHeight / 2\n        let active = outlineItems.value[0]?.id\n        getUserMessageEls().forEach((el, index) => {\n            if (el.getBoundingClientRect().top <= line) {\n                active = outlineItems.value[index]?.id\n            }\n        })\n        activeOutlineId.value = active\n    }\n\n    watch(outlineItems, async () => {\n        await nextTick()\n        updateActiveOutline()\n    })\n\n    const onScroll = () => {\n        handleScroll()\n        updateActiveOutline()\n    }\n\n    const scrollToUserMessage = (id: string) => {\n        const scroller = scrollEl.value\n        const index = outlineItems.value.findIndex((item) => item.id === id)\n        const messageEl = getUserMessageEls()[index]\n        if (!scroller || !messageEl) {\n            return\n        }\n        // Intentional jump away from the live tail: the wheel/touch intent\n        // detection cannot see programmatic scrolls, pause the auto-follow\n        // explicitly (reaching the bottom again re-enables it)\n        userScrolledUp.value = true\n        // Same resting line as a freshly sent message: top of the content area\n        scroller.scrollTo({\n            top:\n                scroller.scrollTop +\n                messageEl.getBoundingClientRect().top -\n                scroller.getBoundingClientRect().top -\n                Number.parseFloat(getComputedStyle(scroller).paddingTop),\n            behavior: 'smooth',\n        })\n    }\n\n    // --- Height adjustment ---\n\n    const height = ref<number>(0)\n    // The min-height transition only serves the release (see below): while the\n    // spacer grows it would hide the new height from the anchor scroll, which\n    // reads `scrollHeight` once and would land short of the anchor.\n    const isSpacerSettling = ref(false)\n\n    // Recalculate when a message is added or the conversation changes (the\n    // store recreates `messages` on every streamed token, so watching the\n    // array reference would re-run this on each character). The height only\n    // depends on the last user message height, which is stable while\n    // streaming. Idempotent: also called by the scroll composable right\n    // before the anchor scroll, so the spacer is always in place first.\n    const updateAnchorSpacer = async () => {\n        const messages = props.messages\n        if (!messages?.length || props.disableHeightAdjustment) {\n            return\n        }\n        // The spacer only serves the in-flight exchange, letting the\n        // fresh user message anchor at the top while the answer streams.\n        // On plain loads (e.g. opening an old conversation) it would\n        // just leave a large void after the last message.\n        const isExchangeInFlight =\n            messages[messages.length - 1].role === 'user' ||\n            props.status === 'submitted' ||\n            props.status === 'streaming'\n        if (!isExchangeInFlight) {\n            return\n        }\n        isSpacerSettling.value = false\n        await nextTick()\n        if (!scrollEl.value) {\n            return\n        }\n        // Spacer sized so the freshly sent user message rests at the top\n        // of the content area once scrolled to bottom: subtract both\n        // paddings (clientHeight includes them) so any extra top\n        // clearance (e.g. the fullscreen overlay header) is respected,\n        // and the wrapper row gap separating the message from the spacer\n        const { paddingTop, paddingBottom } = getComputedStyle(scrollEl.value)\n        const scrollElHeight =\n            scrollEl.value.clientHeight -\n            Number.parseFloat(paddingTop) -\n            Number.parseFloat(paddingBottom)\n        const wrapperGap = wrapperEl.value\n            ? Number.parseFloat(getComputedStyle(wrapperEl.value).rowGap) || 0\n            : 0\n        // Measured on the rendered DOM (same lookup as the outline rail):\n        // indexing the template-refs array with the `messages` index breaks\n        // as soon as a message renders nothing (`v-if` on empty parts), the\n        // refs array skips it and the heights shift by one.\n        const userMessageEls = getUserMessageEls()\n        const lastUserMessageHeight =\n            userMessageEls[userMessageEls.length - 1]?.clientHeight ?? 0\n        const newHeight = scrollElHeight - lastUserMessageHeight - wrapperGap\n        // A question taller than the content area leaves nothing to reserve:\n        // the spacer goes to zero, never back to the value of the previous\n        // exchange. A stale, larger spacer is the very failure the anchor\n        // exists to prevent, the scroll landing past the message. Skipped\n        // when the element measures nothing (rendered while hidden): there\n        // the height already in place is still the good one.\n        if (scrollElHeight > 0) {\n            height.value = Math.max(newHeight, 0)\n        }\n        await nextTick()\n    }\n\n    watch(\n        () => [\n            props.messages?.length,\n            props.messages?.[props.messages.length - 1]?.id,\n        ],\n        () => updateAnchorSpacer(),\n    )\n\n    // Mounted mid-send (fullscreen first message: the messages view replaces\n    // the empty state after the message is already in): the length watch\n    // never fires for that message, apply the anchor spacer now. A first\n    // spoken line mounts the same way and never moves `status`, hence the\n    // second guard. Plain history loads (mounted at 'ready', nothing in\n    // flight) stay untouched.\n    onMounted(() => {\n        if (\n            props.status === 'submitted' ||\n            props.status === 'streaming' ||\n            props.awaitingSpokenAnswer\n        ) {\n            updateAnchorSpacer()\n        }\n    })\n\n    // Release the spacer once the exchange is over: it would otherwise\n    // leave a large empty area after the last message. The min-height\n    // transition settles the layout smoothly (the browser clamps the\n    // scroll progressively when the viewport sat inside the removed area).\n    watch(\n        () => props.status,\n        (status) => {\n            if (status === 'ready' || status === 'error') {\n                isSpacerSettling.value = true\n                height.value = 0\n            }\n        },\n    )\n\n    const isRevised = (messageId: string) => {\n        return props.revisedAnswers?.some((r) => r.messageId === messageId)\n    }\n\n    const getMessageFeedback = (messageId: string) =>\n        props.messageFeedbacks?.find((f) => f.messageId === messageId)\n\n    // Interactive vote/feedback buttons. In read-only mode (admin chat-logs)\n    // the vote is shown on the message itself (coloured bubble border + an\n    // \"active\" thumb in the footer) and the comment, if any, below it.\n    const isFeedbackButtonVisible = (\n        kind: 'upvote' | 'downvote' | 'feedback',\n        index: number,\n    ) => !props.readonlyFeedback && isActionButtonVisible(kind, index)\n\n    // Read-only feedback for a message (drives the reaction chip anchored to\n    // the bubble). undefined when not in read-only mode.\n    const readonlyFeedbackOf = (messageId: string) =>\n        props.readonlyFeedback ? getMessageFeedback(messageId) : undefined\n    const feedbackVote = (messageId: string) =>\n        readonlyFeedbackOf(messageId)?.vote\n    // The real reaction glyph, shown ONLY for unmapped reactions (no vote):\n    // 👍/❤️/👎 keep the classic thumb icon, while e.g. WhatsApp \"😍\" shows the\n    // actual emoji. Platforms that send a type word (Teams \"like\") have a vote\n    // and therefore use the icon too.\n    const feedbackEmoji = (messageId: string) => {\n        const feedback = readonlyFeedbackOf(messageId)\n        if (feedback?.vote) {\n            return undefined\n        }\n        const raw = feedback?.metadata?.reactionEmoji\n        return typeof raw === 'string' && /\\p{Extended_Pictographic}/u.test(raw)\n            ? raw\n            : undefined\n    }\n    const hasReaction = (messageId: string) =>\n        Boolean(feedbackVote(messageId) || feedbackEmoji(messageId))\n    const reactionToneClass = (messageId: string) => {\n        // A real emoji carries its own colour → neutral pill. Only the\n        // thumb-icon fallback uses the sentiment colour.\n        if (feedbackEmoji(messageId)) {\n            return 'pk-chatbot-message__reaction--neutral'\n        }\n        const vote = feedbackVote(messageId)\n        if (vote === 'upvote') {\n            return 'pk-chatbot-message__reaction--positive'\n        }\n        if (vote === 'downvote') {\n            return 'pk-chatbot-message__reaction--negative'\n        }\n        return 'pk-chatbot-message__reaction--neutral'\n    }\n    const reactionTitle = (messageId: string) => {\n        const vote = feedbackVote(messageId)\n        if (vote === 'upvote') {\n            return $t('hint.userFeedbackPositive')\n        }\n        if (vote === 'downvote') {\n            return $t('hint.userFeedbackNegative')\n        }\n        return $t('hint.userFeedbackReaction')\n    }\n\n    // Index of the last text part: the reaction chip anchors to that bubble so\n    // it renders once even when the message has several text parts.\n    const lastTextPartIndex = (message: UIChatMessage) => {\n        const parts = getMergedParts(message)\n        for (let index = parts.length - 1; index >= 0; index -= 1) {\n            if (isTextPart(parts[index])) {\n                return index\n            }\n        }\n        return -1\n    }\n\n    const activeMessage = computed(() => {\n        return props.messages?.[props.messages.length - 1]\n    })\n    const activeMessageLastPart = computed(() => {\n        const active = activeMessage.value\n        if (!active) {\n            return null\n        }\n        return active.parts[active.parts.length - 1]\n    })\n\n    const mergedPartsMap = computed(() => {\n        const map = new Map<string, UIChatMessage['parts']>()\n        for (const message of props.messages ?? []) {\n            if (message.role === 'assistant') {\n                map.set(message.id, mergeConsecutiveTextParts(message.parts))\n            }\n        }\n        return map\n    })\n    const getMergedParts = (message: UIChatMessage) => {\n        return mergedPartsMap.value.get(message.id) ?? message.parts\n    }\n    const isLoading = computed(() => {\n        return props.status === 'submitted' || props.status === 'streaming'\n    })\n    const isError = computed(() => props.status === 'error')\n\n    /**\n     * The spoken wait shows only while nothing else is working: the wait\n     * survives the hang-up (the answer can be written minutes later) and the\n     * caller can type meanwhile, and two working indicators stacked would say\n     * the same thing twice. It comes back when the written turn is over.\n     */\n    const isSpokenWaitVisible = computed(\n        () => props.awaitingSpokenAnswer === true && !isLoading.value,\n    )\n\n    /**\n     * The wait indicator closes the feed, so it carries the anchor spacer\n     * itself, the way the streaming assistant message does. Rendering the\n     * standalone spacer as well would stack the two and push the question\n     * above the top of the content area, out of view.\n     *\n     * Only when it is the last thing in the feed: an error card, or an\n     * assistant answer already landed, keeps the spacer where it was.\n     */\n    const isSpokenWaitAnchored = computed(\n        () =>\n            isSpokenWaitVisible.value &&\n            activeMessage.value?.role === 'user' &&\n            !isError.value,\n    )\n\n    const activeMessageLastPartLabel = computed(() => {\n        const part = activeMessageLastPart.value\n        return getToolPartLabel($t, part)\n    })\n    const activeMessageLastPartIcon = computed(() => {\n        const part = activeMessageLastPart.value\n        return getPartIcon(part)\n    })\n\n    const getMessageIndexById = (messageId: string) => {\n        return props.messages?.findIndex((m) => m.id === messageId)\n    }\n    const isLastMessage = (index?: number) => {\n        if (index === undefined || !props.messages) {\n            return false\n        }\n        return index === props.messages.length - 1\n    }\n    const isMessageRegenerateButtonVisible = (index: number) => {\n        return (\n            isLastMessage(index) &&\n            props.status === 'ready' &&\n            !!props.actions?.includes('regenerate')\n        )\n    }\n    // On the last message the actions appear only once the answer is ready;\n    // on previous messages they are always available.\n    const isActionButtonVisible = (\n        action: ChatMessageActions,\n        index: number,\n    ) => {\n        return (\n            (!isLastMessage(index) || props.status === 'ready') &&\n            !!props.actions?.includes(action)\n        )\n    }\n    const isLastTextPart = (message: UIChatMessage) => {\n        const lastPart = message.parts[message.parts.length - 1]\n        return isTextPart(lastPart)\n    }\n    const messageHasSteps = (message: UIChatMessage) =>\n        message.parts.some((part) => isReasoningPart(part) || isToolPart(part))\n    // The extended steps timeline replaces the compact activity indicator as\n    // soon as the message has at least one step to show.\n    const showStepsTimeline = (message: UIChatMessage) =>\n        Boolean(props.showExtendedSteps) &&\n        isAssistant(message) &&\n        messageHasSteps(message)\n    const isAssistant = (message: UIChatMessage) => message.role === 'assistant'\n    const isUser = (message: UIChatMessage) => message.role === 'user'\n    const getPreviousAssistantMessage = (index: number) => {\n        return props.messages\n            ?.slice(0, index)\n            .reverse()\n            .find((message) => isAssistant(message))\n    }\n    const getNextAssistantMessage = (index: number) => {\n        return props.messages\n            ?.slice(index + 1)\n            .find((message) => isAssistant(message))\n    }\n    // Returns the date to show in the day divider before the message at\n    // `index`, or undefined when the surrounding assistant messages belong\n    // to the same (local) day.\n    const getDividerDate = (index: number) => {\n        const previousCreatedAt =\n            getPreviousAssistantMessage(index)?.metadata?.createdAt\n        const nextCreatedAt =\n            getNextAssistantMessage(index)?.metadata?.createdAt\n        if (!previousCreatedAt || !nextCreatedAt) {\n            return undefined\n        }\n        const previousDate = new Date(previousCreatedAt)\n        const nextDate = new Date(nextCreatedAt)\n        return previousDate.toDateString() !== nextDate.toDateString()\n            ? nextDate\n            : undefined\n    }\n    const showMessageFooter = (message: UIChatMessage, index: number) => {\n        if (index === 0 || message.role !== 'assistant') {\n            return false\n        }\n        return Boolean(\n            props.actions?.length ||\n            (props.showMessageDateTime &&\n                message.metadata?.createdAt !== undefined) ||\n            message.metadata?.completedAt !== undefined ||\n            (props.showMessageTokensCount &&\n                message.metadata?.totalTokens !== undefined),\n        )\n    }\n    // Hover-only metadata (time + duration), shown when the fixed variant\n    // (showMessageDateTime) is off.\n    const formatMessageTime = (createdAt: number) => {\n        const date = new Date(createdAt)\n        const isToday = date.toDateString() === new Date().toDateString()\n        return $d(date, isToday ? 'time' : 'date-time')\n    }\n    const getMessageDuration = (message: UIChatMessage) => {\n        const { createdAt, completedAt } = message.metadata ?? {}\n        if (!createdAt || !completedAt) {\n            return undefined\n        }\n        return formatDuration($n, completedAt - createdAt)\n    }\n    // feedback message auto scroll\n    const feedbackMessageEl =\n        useTemplateRef<InstanceType<typeof PkChatbotFeedbackForm>[]>(\n            'feedbackMessageEl',\n        )\n    watch(\n        () => props.feedbackMessageId,\n        async () => {\n            await nextTick()\n            if (!props.feedbackMessageId) {\n                return\n            }\n            const el = feedbackMessageEl.value?.[0]?.$el\n            if (!el) {\n                return\n            }\n            if (isLastMessage(getMessageIndexById(props.feedbackMessageId))) {\n                scrollToBottom()\n                return\n            }\n            el.scrollIntoView({ behavior: 'smooth', block: 'center' })\n        },\n    )\n</script>\n\n<template>\n    <div\n        ref=\"scrollEl\"\n        class=\"pk-chatbot-messages\"\n        :class=\"{ 'pk-chatbot-messages--settling': isSpacerSettling }\"\n        role=\"log\"\n        aria-live=\"polite\"\n        aria-relevant=\"additions text\"\n        :aria-busy=\"isLoading\"\n        :style=\"{\n            '--chatbot-main-color': mainColor,\n            '--chatbot-contrast-color': contrastColor,\n        }\"\n        @scroll=\"onScroll\">\n        <!-- First in flow (content top): its absolutely-positioned children\n         must never inflate the scrollable overflow past the real content -->\n        <div\n            v-if=\"showScrollToBottom && outlineItems.length > 1\"\n            class=\"pk-chatbot-messages__outline\">\n            <PkChatbotOutlineRail\n                :items=\"outlineItems\"\n                :active-id=\"activeOutlineId\"\n                @select=\"scrollToUserMessage\" />\n        </div>\n        <div ref=\"wrapperEl\" class=\"pk-chatbot-messages__wrapper\">\n            <template v-for=\"(message, index) in messages\" :key=\"message.id\">\n                <div\n                    v-if=\"isUser(message) && getDividerDate(index)\"\n                    class=\"pk-chatbot-divider\">\n                    <span class=\"pk-chatbot-divider__label\">\n                        {{ $d(getDividerDate(index)!, 'short') }}\n                    </span>\n                </div>\n                <div\n                    v-if=\"\n                        message.parts.length ||\n                        (isLastMessage(index) &&\n                            isLoading &&\n                            isAssistant(message))\n                    \"\n                    class=\"pk-chatbot-message\"\n                    :class=\"[\n                        `pk-chatbot-message--${message.role}`,\n                        {\n                            'pk-chatbot-message--loading':\n                                isLoading &&\n                                isLastMessage(index) &&\n                                isAssistant(message),\n                        },\n                    ]\"\n                    :style=\"{\n                        minHeight:\n                            isLastMessage(index) &&\n                            isAssistant(message) &&\n                            !isError\n                                ? `${height}px`\n                                : undefined,\n                    }\">\n                    <transition appear name=\"pk-chatbot-part\">\n                        <PkChatbotSteps\n                            v-if=\"showStepsTimeline(message)\"\n                            :message\n                            :is-streaming=\"isLoading && isLastMessage(index)\"\n                            :is-dark />\n                    </transition>\n                    <template\n                        v-for=\"(part, partIndex) in getMergedParts(message)\"\n                        :key=\"partIndex\">\n                        <transition\n                            v-if=\"isTextPart(part) && part.text.trim()\"\n                            appear\n                            name=\"pk-chatbot-part\">\n                            <div class=\"pk-chatbot-message__text\">\n                                <slot\n                                    v-bind=\"{\n                                        message,\n                                        part,\n                                        index,\n                                        isLoading,\n                                    }\"\n                                    name=\"text\">\n                                    <PkStreamingMarkdown\n                                        v-if=\"isAssistant(message)\"\n                                        class=\"wysiwyg\"\n                                        :markdown=\"part.text\"\n                                        :is-dark\n                                        :loading=\"\n                                            isLastMessage(index) &&\n                                            status === 'streaming'\n                                        \" />\n                                    <template v-else>\n                                        {{ part.text }}\n                                    </template>\n                                </slot>\n                                <!-- Read-only reaction chip overlapping the\n                                     bubble corner, like a messaging app. Hidden\n                                     when a comment is shown: the callout below\n                                     then carries the reaction glyph instead. -->\n                                <span\n                                    v-if=\"\n                                        hasReaction(message.id) &&\n                                        !getMessageFeedback(message.id)\n                                            ?.comment &&\n                                        partIndex === lastTextPartIndex(message)\n                                    \"\n                                    class=\"pk-chatbot-message__reaction\"\n                                    :class=\"reactionToneClass(message.id)\"\n                                    :title=\"reactionTitle(message.id)\">\n                                    <span\n                                        v-if=\"feedbackEmoji(message.id)\"\n                                        class=\"pk-chatbot-message__reaction-emoji\">\n                                        {{ feedbackEmoji(message.id) }}\n                                    </span>\n                                    <VvIcon\n                                        v-else\n                                        :name=\"\n                                            feedbackVote(message.id) ===\n                                            'downvote'\n                                                ? 'ri:thumb-down-fill'\n                                                : 'ri:thumb-up-fill'\n                                        \" />\n                                </span>\n                            </div>\n                        </transition>\n                        <transition\n                            v-else-if=\"isFilePart(part)\"\n                            appear\n                            name=\"pk-chatbot-part\">\n                            <PkChatbotFilePreview\n                                :media-type=\"part.mediaType\"\n                                :url=\"part.url\"\n                                :filename=\"part.filename\"\n                                :size=\"getFilePartMedia(part)?.bytesCount\" />\n                        </transition>\n                        <!-- Anything asking the user for consent (a suspended\n                             tool call or a `requestConfirm`) shares one card,\n                             ahead of the per-tool components. An approval stays\n                             answerable only in the trailing message: the backend\n                             closes the abandoned ones as denied, while a\n                             `requestConfirm` can still be resolved later. -->\n                        <transition\n                            v-else-if=\"\n                                isConfirmationCardPart(part) &&\n                                !isStreamingPart(part)\n                            \"\n                            appear\n                            name=\"pk-chatbot-part\">\n                            <!-- Key WITHOUT the part state: the card must stay\n                                 mounted across the approval lifecycle so its\n                                 inner transitions play once; remounting per\n                                 state replays the appear animation on every\n                                 hop (requested → responded → output). -->\n                            <PkToolApprovalCard\n                                :key=\"`approval-${partIndex}`\"\n                                :part\n                                :actionable=\"\n                                    interactive === true &&\n                                    (isToolConfirmPart(part) ||\n                                        isLastMessage(index))\n                                \"\n                                :call-verdict=\"\n                                    confirmVerdictsOnCall?.get(\n                                        (part as { toolCallId?: string })\n                                            .toolCallId ?? '',\n                                    )\n                                \"\n                                @respond=\"onCardRespond(part, $event)\" />\n                        </transition>\n                        <transition\n                            v-else-if=\"\n                                isToolPart(part) &&\n                                !isStreamingPart(part) &&\n                                (toolComponentMap[getToolPartName(part)] ||\n                                    slots[part.type] ||\n                                    showAllMessageParts)\n                            \"\n                            appear\n                            name=\"pk-chatbot-part\">\n                            <component\n                                :is=\"toolComponentMap[getToolPartName(part)]\"\n                                v-if=\"\n                                    !slots[part.type] &&\n                                    toolComponentMap[getToolPartName(part)]\n                                \"\n                                :key=\"`component-${partIndex}-${getPartState(part)}`\"\n                                :part />\n                            <slot\n                                v-else\n                                :name=\"part.type\"\n                                v-bind=\"{\n                                    message,\n                                    part,\n                                    index,\n                                    isLoading,\n                                }\">\n                                <div\n                                    v-if=\"showAllMessageParts\"\n                                    class=\"pk-chatbot-message__loading-info\">\n                                    <div class=\"flex gap-8 items-center\">\n                                        <VvIcon\n                                            v-if=\"getPartIcon(part)\"\n                                            :name=\"getPartIcon(part)!\"\n                                            class=\"shrink-0\" />\n                                        <code class=\"font-mono rounded text-12\">\n                                            {{ toKebabCase(part.type) }}\n                                        </code>\n                                    </div>\n                                </div>\n                            </slot>\n                        </transition>\n                        <!-- Read-only comment: anchored right after the message\n                             text (same bubble as the reaction chip) so the\n                             feedback stays attached to the message body. -->\n                        <transition mode=\"out-in\">\n                            <PkChatbotMessageFeedback\n                                v-if=\"\n                                    partIndex === lastTextPartIndex(message) &&\n                                    readonlyFeedback &&\n                                    getMessageFeedback(message.id)?.comment\n                                \"\n                                :feedback=\"getMessageFeedback(message.id)!\" />\n                        </transition>\n                    </template>\n                    <transition name=\"fade-in\" mode=\"out-in\">\n                        <div\n                            v-if=\"\n                                isLoading &&\n                                isLastMessage(index) &&\n                                !isLastTextPart(message) &&\n                                isAssistant(message) &&\n                                !showStepsTimeline(message)\n                            \"\n                            :key=\"`loading-info-${message.id}`\"\n                            class=\"pk-chatbot-message__loading-info\">\n                            <div class=\"flex gap-8 items-center\">\n                                <VvIcon name=\"loading-loop\" class=\"shrink-0\" />\n                                <transition mode=\"out-in\">\n                                    <VvIcon\n                                        v-if=\"activeMessageLastPartIcon\"\n                                        :key=\"activeMessageLastPartIcon\"\n                                        class=\"shrink-0\"\n                                        :name=\"activeMessageLastPartIcon\" />\n                                </transition>\n                                <transition mode=\"out-in\">\n                                    <span\n                                        v-if=\"activeMessageLastPartLabel\"\n                                        :key=\"activeMessageLastPartLabel\"\n                                        class=\"text-12\">\n                                        {{ activeMessageLastPartLabel }}\n                                    </span>\n                                </transition>\n                            </div>\n                            <transition name=\"fade-in\" mode=\"out-in\">\n                                <PkStreamingMarkdownAutoscroll\n                                    v-if=\"\n                                        activeMessageLastPart &&\n                                        'text' in activeMessageLastPart &&\n                                        activeMessageLastPart.text.trim()\n                                    \"\n                                    :markdown=\"activeMessageLastPart.text\"\n                                    :is-dark\n                                    :tail-length=\"LIVE_REASONING_TAIL_LENGTH\"\n                                    inner-class=\"wysiwyg\"\n                                    class=\"border border-surface-3 rounded-md p-4 mt-8 bg-surface-1 max-h-64 text-12 w-full\" />\n                            </transition>\n                        </div>\n                    </transition>\n                    <transition mode=\"out-in\">\n                        <div\n                            v-if=\"showMessageFooter(message, index)\"\n                            class=\"pk-chatbot-message__footer\">\n                            <VvButtonGroup\n                                modifiers=\"compact\"\n                                class=\"mr-auto shrink-0\">\n                                <transition mode=\"out-in\">\n                                    <VvButton\n                                        v-if=\"\n                                            isMessageRegenerateButtonVisible(\n                                                index,\n                                            )\n                                        \"\n                                        icon=\"ri:reset-right-line\"\n                                        modifiers=\"action-quiet-small\"\n                                        :title=\"$t('action.regenerate')\"\n                                        :aria-label=\"$t('action.regenerate')\"\n                                        @click.stop=\"$emit('regenerate')\" />\n                                </transition>\n                                <transition mode=\"out-in\">\n                                    <VvButton\n                                        v-if=\"\n                                            isActionButtonVisible(\n                                                'show-info',\n                                                index,\n                                            )\n                                        \"\n                                        icon=\"ri:information-line\"\n                                        :title=\"$t('action.getMoreInfo')\"\n                                        :aria-label=\"$t('action.getMoreInfo')\"\n                                        modifiers=\"action-quiet-small\"\n                                        @click.stop=\"\n                                            $emit('show-info', message)\n                                        \" />\n                                </transition>\n                                <transition mode=\"out-in\">\n                                    <VvButton\n                                        v-if=\"\n                                            isActionButtonVisible(\n                                                'revise',\n                                                index,\n                                            )\n                                        \"\n                                        :icon=\"\n                                            isRevised(message.id)\n                                                ? 'ri:file-edit-fill'\n                                                : 'ri:file-edit-line'\n                                        \"\n                                        :title=\"\n                                            isRevised(message.id)\n                                                ? $t('action.editRevise')\n                                                : $t('action.createRevise')\n                                        \"\n                                        :aria-label=\"\n                                            isRevised(message.id)\n                                                ? $t('action.editRevise')\n                                                : $t('action.createRevise')\n                                        \"\n                                        modifiers=\"action-quiet-small\"\n                                        :class=\"{\n                                            'text-brand': isRevised(message.id),\n                                        }\"\n                                        @click.stop=\"\n                                            $emit('revise', message)\n                                        \" />\n                                </transition>\n                                <transition mode=\"out-in\">\n                                    <VvButton\n                                        v-if=\"\n                                            isFeedbackButtonVisible(\n                                                'upvote',\n                                                index,\n                                            )\n                                        \"\n                                        :icon=\"\n                                            getMessageFeedback(message.id)\n                                                ?.vote === 'upvote'\n                                                ? 'ri:thumb-up-fill'\n                                                : 'ri:thumb-up-line'\n                                        \"\n                                        :title=\"$t('action.upvote')\"\n                                        :aria-label=\"$t('action.upvote')\"\n                                        modifiers=\"action-quiet-small\"\n                                        @click.stop=\"\n                                            $emit('upvote', message)\n                                        \" />\n                                </transition>\n                                <transition mode=\"out-in\">\n                                    <VvButton\n                                        v-if=\"\n                                            isFeedbackButtonVisible(\n                                                'downvote',\n                                                index,\n                                            )\n                                        \"\n                                        :icon=\"\n                                            getMessageFeedback(message.id)\n                                                ?.vote === 'downvote'\n                                                ? 'ri:thumb-down-fill'\n                                                : 'ri:thumb-down-line'\n                                        \"\n                                        :title=\"$t('action.downvote')\"\n                                        :aria-label=\"$t('action.downvote')\"\n                                        modifiers=\"action-quiet-small\"\n                                        @click.stop=\"\n                                            $emit('downvote', message)\n                                        \" />\n                                </transition>\n                                <transition mode=\"out-in\">\n                                    <VvButton\n                                        v-if=\"\n                                            isFeedbackButtonVisible(\n                                                'feedback',\n                                                index,\n                                            )\n                                        \"\n                                        :icon=\"\n                                            getMessageFeedback(message.id)\n                                                ?.comment\n                                                ? 'ri:feedback-fill'\n                                                : 'ri:feedback-line'\n                                        \"\n                                        :title=\"$t('action.feedback')\"\n                                        :aria-label=\"$t('action.feedback')\"\n                                        modifiers=\"action-quiet-small\"\n                                        @click.stop=\"\n                                            $emit('feedback', message)\n                                        \" />\n                                </transition>\n                            </VvButtonGroup>\n                            <div\n                                v-if=\"\n                                    !showMessageDateTime &&\n                                    message.metadata?.createdAt &&\n                                    message.metadata?.completedAt\n                                \"\n                                class=\"pk-chatbot-message__hover-meta\">\n                                <time\n                                    :datetime=\"\n                                        new Date(\n                                            message.metadata.createdAt,\n                                        ).toISOString()\n                                    \"\n                                    :title=\"\n                                        $d(\n                                            new Date(\n                                                message.metadata.createdAt,\n                                            ),\n                                            'date-time',\n                                        )\n                                    \"\n                                    class=\"flex items-center gap-4 min-w-0\">\n                                    <VvIcon\n                                        name=\"ri:time-line\"\n                                        class=\"shrink-0\" />\n                                    <span class=\"truncate\">{{\n                                        formatMessageTime(\n                                            message.metadata.createdAt,\n                                        )\n                                    }}</span>\n                                </time>\n                                <span\n                                    v-if=\"getMessageDuration(message)\"\n                                    class=\"flex items-center gap-4 min-w-0\">\n                                    <VvIcon\n                                        name=\"ri:hourglass-line\"\n                                        class=\"shrink-0\" />\n                                    <span class=\"truncate\">{{\n                                        getMessageDuration(message)\n                                    }}</span>\n                                </span>\n                            </div>\n                            <span\n                                v-if=\"\n                                    showMessageTokensCount &&\n                                    message.metadata?.totalTokens\n                                \"\n                                class=\"flex items-center gap-4 text-12 text-word-3\">\n                                <VvIcon\n                                    name=\"ri:ai-generate-2-line\"\n                                    class=\"shrink-0\" />\n                                <span class=\"truncate\"\n                                    >{{\n                                        $n(\n                                            message.metadata.totalTokens,\n                                            'integer',\n                                        )\n                                    }}\n                                    {{ $t('label.tokens') }}\n                                </span>\n                            </span>\n                            <time\n                                v-if=\"\n                                    showMessageDateTime &&\n                                    message.metadata?.createdAt\n                                \"\n                                :datetime=\"\n                                    new Date(\n                                        message.metadata?.createdAt,\n                                    ).toISOString()\n                                \"\n                                class=\"flex items-center gap-4 text-12 text-word-3\">\n                                <VvIcon name=\"ri:time-line\" class=\"shrink-0\" />\n                                <span class=\"truncate\">{{\n                                    $d(\n                                        new Date(message.metadata?.createdAt),\n                                        'date-time',\n                                    )\n                                }}</span>\n                            </time>\n                            <div\n                                v-if=\"\n                                    showMessageDateTime &&\n                                    message?.metadata?.completedAt &&\n                                    message?.metadata?.createdAt\n                                \"\n                                class=\"flex items-center gap-4 text-12 text-word-3\">\n                                <VvIcon\n                                    name=\"ri:hourglass-line\"\n                                    class=\"shrink-0\" />\n                                <PkRelativeTime\n                                    class=\"truncate\"\n                                    :date=\"message.metadata?.createdAt\"\n                                    :end-date=\"message.metadata?.completedAt\" />\n                            </div>\n                        </div>\n                    </transition>\n                    <transition mode=\"out-in\">\n                        <PkChatbotFeedbackForm\n                            v-if=\"message.id === feedbackMessageId\"\n                            ref=\"feedbackMessageEl\"\n                            :loading=\"feedbackLoading\"\n                            :submitted=\"feedbackSubmitted\"\n                            :error=\"feedbackError\"\n                            @submit=\"$emit('feedback-submit', $event)\"\n                            @close=\"$emit('feedback-close')\" />\n                    </transition>\n                </div>\n            </template>\n            <!-- A spoken turn streams to the provider, not here: nothing in\n                 this list moves between the question and the answer landing.\n                 Its own indicator, because the status-driven one hangs off an\n                 assistant message the SDK never creates for a call. When to\n                 show it and when it carries the anchor spacer: see\n                 `isSpokenWaitVisible` and `isSpokenWaitAnchored`. -->\n            <transition appear name=\"pk-chatbot-part\">\n                <div\n                    v-if=\"isSpokenWaitVisible\"\n                    class=\"pk-chatbot-message pk-chatbot-message--assistant pk-chatbot-message--loading\"\n                    :style=\"{\n                        minHeight: isSpokenWaitAnchored\n                            ? `${height}px`\n                            : undefined,\n                    }\">\n                    <div class=\"pk-chatbot-message__loading-info\">\n                        <div class=\"flex gap-8 items-center\">\n                            <VvIcon name=\"loading-loop\" class=\"shrink-0\" />\n                            <span class=\"text-12\">\n                                {{ $t('label.answeringOnTheCall') }}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n            </transition>\n            <transition appear name=\"pk-chatbot-part\">\n                <PkChatbotError\n                    v-if=\"isError\"\n                    :error\n                    @retry=\"$emit('auto-retry')\"\n                    @reset=\"$emit('reset-chat')\" />\n            </transition>\n            <div\n                v-if=\"\n                    (activeMessage?.role === 'user' && !isSpokenWaitAnchored) ||\n                    isError\n                \"\n                class=\"pk-chatbot-messages__spacer\"\n                :style=\"{ minHeight: `${height}px` }\"></div>\n        </div>\n        <Transition name=\"pk-chatbot-messages-fab\">\n            <button\n                v-if=\"showScrollToBottom && (userScrolledUp || !isAtBottom)\"\n                type=\"button\"\n                class=\"pk-chatbot-messages__scroll-to-bottom\"\n                :title=\"$t('action.scrollToBottom')\"\n                :aria-label=\"$t('action.scrollToBottom')\"\n                @click=\"onScrollToBottomClick\">\n                <VvIcon name=\"ri:arrow-down-line\" />\n            </button>\n        </Transition>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-messages {\n        overflow-y: auto;\n        flex: 1;\n        min-width: 0;\n        font-size: var(--text-14);\n\n        scrollbar-width: thin;\n        scrollbar-color: var(--color-word-5) var(--color-surface-1);\n\n        &__wrapper {\n            display: flex;\n            flex-direction: column;\n            gap: var(--spacing-16);\n            min-width: 0;\n        }\n\n        // Conversation outline rail: sticky shell pinned to the vertical\n        // middle of the scroll area, at the right edge. Zero-sized and\n        // first in flow so neither it nor its absolutely-positioned pieces\n        // inflate scrollHeight. Desktop only, like ChatGPT: in the widget and\n        // the panel the chat is as wide on a phone as on a desktop, so the\n        // viewport is the only thing that tells them apart. The fullscreen\n        // layout measures the chat itself instead (PkChatbot).\n        &__outline {\n            display: none;\n            position: sticky;\n            top: 50%;\n            z-index: 2;\n            flex: none;\n            align-self: flex-end;\n            height: 0;\n\n            @include media-breakpoint-up('md', $breakpoints) {\n                display: block;\n            }\n\n            .pk-chatbot-outline {\n                position: absolute;\n                top: 0;\n                right: 0;\n                transform: translateY(-50%);\n            }\n        }\n\n        // Placeholder while the answer has not started yet: settles like\n        // the message spacer when released. Only the release is animated\n        // (`--settling`): animating the growth would keep `scrollHeight`\n        // behind while the anchor scroll reads it, landing short of the\n        // anchor with no second chance to catch up.\n        &--settling {\n            .pk-chatbot-messages__spacer,\n            .pk-chatbot-message {\n                transition: min-height 300ms var(--ease-out);\n\n                @media (prefers-reduced-motion: reduce) {\n                    transition: none;\n                }\n            }\n        }\n\n        // Floating \"back to bottom\" button, sticky inside the scroll area\n        &__scroll-to-bottom {\n            position: sticky;\n            bottom: var(--spacing-8);\n            z-index: 2;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            // The scroll container is a flex column: without this the\n            // overflowing content shrinks the button, ignoring its height\n            flex: none;\n            width: var(--spacing-36);\n            height: var(--spacing-36);\n            // Net-zero layout contribution: mounting/unmounting the button\n            // must not change scrollHeight, or reaching the bottom (which\n            // hides it) would clamp scrollTop and cause a visible jump\n            margin-block-start: calc(-1 * var(--spacing-36));\n            margin-inline: auto;\n            border: 1px solid var(--color-surface-3);\n            border-radius: var(--rounded-full);\n            background-color: var(--color-surface-1);\n            box-shadow: var(--shadow-md);\n            color: var(--color-word-1);\n            cursor: pointer;\n            transition: var(--transition-colors);\n\n            &:hover {\n                background-color: var(--color-surface-2);\n            }\n        }\n    }\n\n    .pk-chatbot-messages-fab-enter-active,\n    .pk-chatbot-messages-fab-leave-active {\n        transition: opacity 150ms var(--ease-out);\n    }\n\n    .pk-chatbot-messages-fab-enter-from,\n    .pk-chatbot-messages-fab-leave-to {\n        opacity: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n        .pk-chatbot-messages-fab-enter-active,\n        .pk-chatbot-messages-fab-leave-active {\n            transition: none;\n        }\n    }\n\n    .pk-chatbot-divider {\n        position: relative;\n        border-bottom: 1px solid var(--color-surface-3);\n\n        &__label {\n            position: absolute;\n            padding-inline: var(--spacing-8);\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: var(--color-surface);\n            color: var(--color-word-4);\n            font-size: var(--text-12);\n        }\n    }\n\n    .pk-chatbot-message {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-sm);\n        min-width: 0;\n        align-items: flex-start;\n        // `clip` instead of `hidden` so the reaction chip, which deliberately\n        // overhangs the bubble's bottom edge, is not cut off. The margin has\n        // to cover half the chip plus its shadow.\n        overflow: clip;\n        overflow-clip-margin: var(--spacing-16);\n        max-width: 100%;\n        // The anchor spacer (inline min-height on the last assistant message)\n        // settles smoothly when released at the end of the stream: the\n        // transition lives on `.pk-chatbot-messages--settling` above\n\n        &__text {\n            position: relative;\n            color: var(--color-word-2);\n            background-color: var(--color-surface);\n            line-height: var(--leading-normal);\n            border-width: var(--spacing-px);\n            border-style: solid;\n            border-color: var(--color-surface-3);\n            padding: var(--spacing-sm);\n            border-radius: var(--rounded-xl) var(--rounded-xl) var(--rounded-xl)\n                0;\n            max-width: 100%;\n            text-overflow: ellipsis;\n            // Same reason as the block above: the chip is absolutely\n            // positioned against this bubble and hangs below its edge.\n            overflow: clip;\n            overflow-clip-margin: var(--spacing-16);\n        }\n\n        // Read-only feedback: a circular vote chip that overlaps the bubble's\n        // bottom-right corner (messaging-app style). White ring lifts it off\n        // the bubble; solid accent makes the rating unmistakable.\n        &__reaction {\n            position: absolute;\n            right: var(--spacing-8);\n            bottom: 0;\n            transform: translateY(50%);\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: var(--spacing-24);\n            height: var(--spacing-24);\n            border-radius: var(--rounded-full, 9999px);\n            color: var(--color-white, #fff);\n            font-size: var(--text-12);\n            box-shadow: var(--shadow-md);\n\n            &--positive {\n                background-color: var(--color-success);\n            }\n\n            &--negative {\n                background-color: var(--color-danger);\n            }\n\n            // Real emoji (e.g. WhatsApp): the glyph carries its own colour, so\n            // the chip stays a neutral surface pill.\n            &--neutral {\n                background-color: var(--color-surface-1);\n            }\n        }\n\n        &__reaction-emoji {\n            // Smaller than the chip so the glyph doesn't touch the ring.\n            font-size: var(--text-12);\n            line-height: 1;\n        }\n\n        &__loading-info {\n            line-height: var(--leading-normal);\n            border-width: var(--spacing-px);\n            border-style: solid;\n            border-color: var(--color-surface-3);\n            padding: var(--spacing-sm);\n            border-radius: var(--rounded-xl) var(--rounded-xl) var(--rounded-xl)\n                0;\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n            background-color: var(--color-surface);\n        }\n\n        &__footer {\n            width: 100%;\n            display: flex;\n            gap: var(--spacing-8);\n            align-items: center;\n        }\n\n        &__hover-meta {\n            display: flex;\n            min-width: 0;\n            align-items: center;\n            gap: var(--spacing-8);\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n            white-space: nowrap;\n            font-variant-numeric: tabular-nums;\n            opacity: 0;\n            transition: opacity 0.2s ease;\n        }\n\n        &:hover &__hover-meta,\n        &:focus-within &__hover-meta {\n            opacity: 1;\n        }\n\n        // Hover doesn't exist on touch devices: keep the metadata visible\n        @media (hover: none) {\n            &__hover-meta {\n                opacity: 1;\n            }\n        }\n\n        &--user {\n            align-items: flex-end;\n\n            .pk-chatbot-message__text {\n                background-color: var(\n                    --chatbot-main-color,\n                    var(--color-surface-1)\n                );\n                border-color: var(--chatbot-main-color, var(--color-surface-3));\n                color: var(--chatbot-contrast-color, var(--color-word-1));\n                border-radius: var(--rounded-xl) var(--rounded-xl) 0\n                    var(--rounded-xl);\n            }\n        }\n\n        &--assistant {\n            width: 100%;\n            gap: var(--spacing-16);\n\n            .pk-chatbot-message__text {\n                width: 100%;\n            }\n        }\n\n        &--system {\n            align-items: flex-end;\n\n            .pk-chatbot-message__text {\n                display: flex;\n                gap: var(--spacing-8);\n                font-size: var(--text-12);\n                padding: var(--spacing-8) var(--spacing-sm);\n                align-items: center;\n                border-color: var(--chatbot-main-color, var(--color-surface-3));\n                color: var(--chatbot-main-color, var(--color-word-1));\n                border-radius: var(--rounded-xl) var(--rounded-xl) 0\n                    var(--rounded-xl);\n            }\n        }\n    }\n\n    .pk-chatbot-part-enter-active {\n        transition:\n            opacity 0.25s ease,\n            transform 0.25s ease;\n    }\n\n    .pk-chatbot-part-enter-from {\n        opacity: 0;\n        transform: translateY(8px);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n        .pk-chatbot-part-enter-active {\n            transition: none;\n        }\n\n        .pk-chatbot-part-enter-from {\n            transform: none;\n        }\n    }\n</style>\n"],"mappings":"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"}

package/dist-vue/_chunks/{PkChatbotStepPayload-BH6piqOi.js → PkChatbotStepPayload-XW4gT9AZ.js}

@@ -1,4 +1,4 @@
-import { b as e } from "./utils-Coqik0XI.js";
+import { S as e } from "./utils-C1666_6C.js";
 import { VvIcon as t } from "@volverjs/ui-vue/components";
 import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, openBlock as u, reactive as d, ref as f, renderList as p, resolveDynamicComponent as m, toDisplayString as h, withCtx as g } from "vue";
 import { useI18n as _ } from "vue-i18n";
@@ -93,4 +93,4 @@ var v = {
 //#endregion
 export { O as t };
 
-//# sourceMappingURL=PkChatbotStepPayload-BH6piqOi.js.map
+//# sourceMappingURL=PkChatbotStepPayload-XW4gT9AZ.js.map

package/dist-vue/_chunks/{PkChatbotStepPayload-BH6piqOi.js.map → PkChatbotStepPayload-XW4gT9AZ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkChatbotStepPayload-BH6piqOi.js","names":[],"sources":["../../../../packages/components/src/chat/PkChatbotStepPayload.vue","../../../../packages/components/src/chat/PkChatbotStepPayload.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n    import { computed, reactive, ref } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { stringifyPayload } from './utils'\n\n    interface PayloadRow {\n        key: string\n        preview: string\n        full?: string\n    }\n\n    const props = defineProps<{\n        label: string\n        value: unknown\n    }>()\n\n    const { t: $t } = useI18n({\n        useScope: 'global',\n    })\n\n    // A preview stays on a single line: long enough to recognize the value,\n    // short enough to keep the payload readable without expanding anything.\n    const PREVIEW_LENGTH = 120\n\n    const stringify = (value: unknown, indent = 0): string | undefined => {\n        try {\n            return JSON.stringify(value, null, indent)\n        } catch {\n            return undefined\n        }\n    }\n\n    const toPreview = (value: unknown): string => {\n        if (value === undefined) {\n            return ''\n        }\n        const text =\n            typeof value === 'string' ? value : (stringify(value) ?? '')\n        const single = text.replace(/\\s+/g, ' ').trim()\n        return single.length > PREVIEW_LENGTH\n            ? `${single.slice(0, PREVIEW_LENGTH)}…`\n            : single\n    }\n\n    // Objects are listed by key, arrays by position: either way the payload\n    // becomes a list of short lines instead of one wall of JSON.\n    const entries = computed<[string, unknown][] | undefined>(() => {\n        const value = props.value\n        if (Array.isArray(value)) {\n            return value.length\n                ? value.map(\n                      (item, index) =>\n                          [`${index + 1}`, item] as [string, unknown],\n                  )\n                : undefined\n        }\n        if (value && typeof value === 'object') {\n            const own = Object.entries(value as Record<string, unknown>)\n            return own.length ? own : undefined\n        }\n        return undefined\n    })\n\n    const rows = computed<PayloadRow[] | undefined>(() =>\n        entries.value?.map(([key, value]) => {\n            const preview = toPreview(value)\n            const full = typeof value === 'string' ? value : stringify(value, 2)\n            return {\n                key,\n                preview: preview || '-',\n                // Only a value the preview had to cut (long, multiline or\n                // nested) is worth its own expandable block.\n                full: full && full.trim() !== preview ? full : undefined,\n            }\n        }),\n    )\n\n    // Scalars and strings have no rows: they fall back to the plain payload.\n    const text = computed(() =>\n        rows.value ? undefined : stringifyPayload(props.value),\n    )\n\n    const summary = computed(() => {\n        const list = rows.value\n        if (!list) {\n            return toPreview(props.value)\n        }\n        if (Array.isArray(props.value)) {\n            return $t('messagePart.stepItems', list.length)\n        }\n        if (list.length === 1) {\n            return `${list[0].key}: ${list[0].preview}`\n        }\n        return list.map((row) => row.key).join(' · ')\n    })\n\n    const isOpen = ref(false)\n    const expandedRows = reactive(new Set<string>())\n    const toggleRow = (key: string) => {\n        if (expandedRows.has(key)) {\n            expandedRows.delete(key)\n        } else {\n            expandedRows.add(key)\n        }\n    }\n</script>\n\n<template>\n    <div v-if=\"rows || text\" class=\"pk-chatbot-step-payload\">\n        <button\n            type=\"button\"\n            class=\"pk-chatbot-step-payload__header\"\n            :aria-expanded=\"isOpen\"\n            @click=\"isOpen = !isOpen\">\n            <span class=\"pk-chatbot-step-payload__label\">{{ label }}</span>\n            <span class=\"pk-chatbot-step-payload__summary\">\n                {{ summary }}\n            </span>\n            <VvIcon\n                :name=\"isOpen ? 'ri:arrow-up-s-line' : 'ri:arrow-down-s-line'\"\n                class=\"shrink-0\" />\n        </button>\n        <ul v-if=\"isOpen && rows\" class=\"pk-chatbot-step-payload__rows\">\n            <li v-for=\"row in rows\" :key=\"row.key\">\n                <component\n                    :is=\"row.full ? 'button' : 'div'\"\n                    :type=\"row.full ? 'button' : undefined\"\n                    class=\"pk-chatbot-step-payload__row\"\n                    :aria-expanded=\"\n                        row.full ? expandedRows.has(row.key) : undefined\n                    \"\n                    @click=\"row.full ? toggleRow(row.key) : undefined\">\n                    <span class=\"pk-chatbot-step-payload__key\">\n                        {{ row.key }}\n                    </span>\n                    <span class=\"pk-chatbot-step-payload__value\">\n                        {{ row.preview }}\n                    </span>\n                    <VvIcon\n                        v-if=\"row.full\"\n                        :name=\"\n                            expandedRows.has(row.key)\n                                ? 'ri:arrow-up-s-line'\n                                : 'ri:arrow-down-s-line'\n                        \"\n                        class=\"shrink-0\" />\n                </component>\n                <pre\n                    v-if=\"row.full && expandedRows.has(row.key)\"\n                    class=\"pk-chatbot-step-payload__full\"\n                    >{{ row.full }}</pre>\n            </li>\n        </ul>\n        <pre v-else-if=\"isOpen\" class=\"pk-chatbot-step-payload__full\">{{\n            text\n        }}</pre>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-step-payload {\n        border: var(--spacing-px) solid var(--color-surface-3);\n        border-radius: var(--rounded);\n        background-color: var(--color-surface-1);\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-28);\n            padding: var(--spacing-4) var(--spacing-8);\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        &__label {\n            flex-shrink: 0;\n            font-weight: 600;\n            font-size: var(--text-10);\n            text-transform: uppercase;\n            letter-spacing: 0.05em;\n            color: var(--color-word-3);\n        }\n\n        &__summary {\n            flex: 1 1 0;\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            font-family: var(--font-mono);\n            font-size: var(--text-10);\n            color: var(--color-word-4);\n        }\n\n        &__rows > li {\n            border-top: var(--spacing-px) solid var(--color-surface-3);\n        }\n\n        &__row {\n            display: flex;\n            align-items: baseline;\n            gap: var(--spacing-8);\n            width: 100%;\n            padding: var(--spacing-4) var(--spacing-8);\n            text-align: left;\n            font-size: var(--text-10);\n\n            &:is(button) {\n                cursor: pointer;\n                transition: background-color 0.2s ease;\n\n                &:hover {\n                    background-color: var(--color-surface-2);\n                }\n            }\n        }\n\n        &__key {\n            flex-shrink: 0;\n            max-width: 40%;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            font-family: var(--font-mono);\n            color: var(--color-word-4);\n        }\n\n        &__value {\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-2);\n        }\n\n        &__full {\n            padding: var(--spacing-8);\n            border-top: var(--spacing-px) solid var(--color-surface-3);\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            font-size: var(--text-10);\n            color: var(--color-word-3);\n        }\n    }\n</style>\n","<script lang=\"ts\" setup>\n    import { computed, reactive, ref } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { stringifyPayload } from './utils'\n\n    interface PayloadRow {\n        key: string\n        preview: string\n        full?: string\n    }\n\n    const props = defineProps<{\n        label: string\n        value: unknown\n    }>()\n\n    const { t: $t } = useI18n({\n        useScope: 'global',\n    })\n\n    // A preview stays on a single line: long enough to recognize the value,\n    // short enough to keep the payload readable without expanding anything.\n    const PREVIEW_LENGTH = 120\n\n    const stringify = (value: unknown, indent = 0): string | undefined => {\n        try {\n            return JSON.stringify(value, null, indent)\n        } catch {\n            return undefined\n        }\n    }\n\n    const toPreview = (value: unknown): string => {\n        if (value === undefined) {\n            return ''\n        }\n        const text =\n            typeof value === 'string' ? value : (stringify(value) ?? '')\n        const single = text.replace(/\\s+/g, ' ').trim()\n        return single.length > PREVIEW_LENGTH\n            ? `${single.slice(0, PREVIEW_LENGTH)}…`\n            : single\n    }\n\n    // Objects are listed by key, arrays by position: either way the payload\n    // becomes a list of short lines instead of one wall of JSON.\n    const entries = computed<[string, unknown][] | undefined>(() => {\n        const value = props.value\n        if (Array.isArray(value)) {\n            return value.length\n                ? value.map(\n                      (item, index) =>\n                          [`${index + 1}`, item] as [string, unknown],\n                  )\n                : undefined\n        }\n        if (value && typeof value === 'object') {\n            const own = Object.entries(value as Record<string, unknown>)\n            return own.length ? own : undefined\n        }\n        return undefined\n    })\n\n    const rows = computed<PayloadRow[] | undefined>(() =>\n        entries.value?.map(([key, value]) => {\n            const preview = toPreview(value)\n            const full = typeof value === 'string' ? value : stringify(value, 2)\n            return {\n                key,\n                preview: preview || '-',\n                // Only a value the preview had to cut (long, multiline or\n                // nested) is worth its own expandable block.\n                full: full && full.trim() !== preview ? full : undefined,\n            }\n        }),\n    )\n\n    // Scalars and strings have no rows: they fall back to the plain payload.\n    const text = computed(() =>\n        rows.value ? undefined : stringifyPayload(props.value),\n    )\n\n    const summary = computed(() => {\n        const list = rows.value\n        if (!list) {\n            return toPreview(props.value)\n        }\n        if (Array.isArray(props.value)) {\n            return $t('messagePart.stepItems', list.length)\n        }\n        if (list.length === 1) {\n            return `${list[0].key}: ${list[0].preview}`\n        }\n        return list.map((row) => row.key).join(' · ')\n    })\n\n    const isOpen = ref(false)\n    const expandedRows = reactive(new Set<string>())\n    const toggleRow = (key: string) => {\n        if (expandedRows.has(key)) {\n            expandedRows.delete(key)\n        } else {\n            expandedRows.add(key)\n        }\n    }\n</script>\n\n<template>\n    <div v-if=\"rows || text\" class=\"pk-chatbot-step-payload\">\n        <button\n            type=\"button\"\n            class=\"pk-chatbot-step-payload__header\"\n            :aria-expanded=\"isOpen\"\n            @click=\"isOpen = !isOpen\">\n            <span class=\"pk-chatbot-step-payload__label\">{{ label }}</span>\n            <span class=\"pk-chatbot-step-payload__summary\">\n                {{ summary }}\n            </span>\n            <VvIcon\n                :name=\"isOpen ? 'ri:arrow-up-s-line' : 'ri:arrow-down-s-line'\"\n                class=\"shrink-0\" />\n        </button>\n        <ul v-if=\"isOpen && rows\" class=\"pk-chatbot-step-payload__rows\">\n            <li v-for=\"row in rows\" :key=\"row.key\">\n                <component\n                    :is=\"row.full ? 'button' : 'div'\"\n                    :type=\"row.full ? 'button' : undefined\"\n                    class=\"pk-chatbot-step-payload__row\"\n                    :aria-expanded=\"\n                        row.full ? expandedRows.has(row.key) : undefined\n                    \"\n                    @click=\"row.full ? toggleRow(row.key) : undefined\">\n                    <span class=\"pk-chatbot-step-payload__key\">\n                        {{ row.key }}\n                    </span>\n                    <span class=\"pk-chatbot-step-payload__value\">\n                        {{ row.preview }}\n                    </span>\n                    <VvIcon\n                        v-if=\"row.full\"\n                        :name=\"\n                            expandedRows.has(row.key)\n                                ? 'ri:arrow-up-s-line'\n                                : 'ri:arrow-down-s-line'\n                        \"\n                        class=\"shrink-0\" />\n                </component>\n                <pre\n                    v-if=\"row.full && expandedRows.has(row.key)\"\n                    class=\"pk-chatbot-step-payload__full\"\n                    >{{ row.full }}</pre>\n            </li>\n        </ul>\n        <pre v-else-if=\"isOpen\" class=\"pk-chatbot-step-payload__full\">{{\n            text\n        }}</pre>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-step-payload {\n        border: var(--spacing-px) solid var(--color-surface-3);\n        border-radius: var(--rounded);\n        background-color: var(--color-surface-1);\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-28);\n            padding: var(--spacing-4) var(--spacing-8);\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        &__label {\n            flex-shrink: 0;\n            font-weight: 600;\n            font-size: var(--text-10);\n            text-transform: uppercase;\n            letter-spacing: 0.05em;\n            color: var(--color-word-3);\n        }\n\n        &__summary {\n            flex: 1 1 0;\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            font-family: var(--font-mono);\n            font-size: var(--text-10);\n            color: var(--color-word-4);\n        }\n\n        &__rows > li {\n            border-top: var(--spacing-px) solid var(--color-surface-3);\n        }\n\n        &__row {\n            display: flex;\n            align-items: baseline;\n            gap: var(--spacing-8);\n            width: 100%;\n            padding: var(--spacing-4) var(--spacing-8);\n            text-align: left;\n            font-size: var(--text-10);\n\n            &:is(button) {\n                cursor: pointer;\n                transition: background-color 0.2s ease;\n\n                &:hover {\n                    background-color: var(--color-surface-2);\n                }\n            }\n        }\n\n        &__key {\n            flex-shrink: 0;\n            max-width: 40%;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            font-family: var(--font-mono);\n            color: var(--color-word-4);\n        }\n\n        &__value {\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-2);\n        }\n\n        &__full {\n            padding: var(--spacing-8);\n            border-top: var(--spacing-px) solid var(--color-surface-3);\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            font-size: var(--text-10);\n            color: var(--color-word-3);\n        }\n    }\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;GAsBU,IAAiB;;;;;;;EAXvB,IAAM,IAAQ,GAKR,EAAE,GAAG,MAAO,EAAQ,EACtB,UAAU,SACd,CAAC,GAMK,KAAa,GAAgB,IAAS,MAA0B;GAClE,IAAI;IACA,OAAO,KAAK,UAAU,GAAO,MAAM,CAAM;GAC7C,QAAQ;IACJ;GACJ;EACJ,GAEM,KAAa,MAA2B;GAC1C,IAAI,MAAU,KAAA,GACV,OAAO;GAIX,IAAM,KADF,OAAO,KAAU,WAAW,IAAS,EAAU,CAAK,KAAK,GAAA,CACzC,QAAQ,QAAQ,GAAG,CAAC,CAAC,KAAK;GAC9C,OAAO,EAAO,SAAS,IACjB,GAAG,EAAO,MAAM,GAAG,CAAc,EAAE,KACnC;EACV,GAIM,IAAU,QAAgD;GAC5D,IAAM,IAAQ,EAAM;GACpB,IAAI,MAAM,QAAQ,CAAK,GACnB,OAAO,EAAM,SACP,EAAM,KACD,GAAM,MACH,CAAC,GAAG,IAAQ,KAAK,CAAI,CAC7B,IACA,KAAA;GAEV,IAAI,KAAS,OAAO,KAAU,UAAU;IACpC,IAAM,IAAM,OAAO,QAAQ,CAAgC;IAC3D,OAAO,EAAI,SAAS,IAAM,KAAA;GAC9B;EAEJ,CAAC,GAEK,IAAO,QACT,EAAQ,OAAO,KAAK,CAAC,GAAK,OAAW;GACjC,IAAM,IAAU,EAAU,CAAK,GACzB,IAAO,OAAO,KAAU,WAAW,IAAQ,EAAU,GAAO,CAAC;GACnE,OAAO;IACH;IACA,SAAS,KAAW;IAGpB,MAAM,KAAQ,EAAK,KAAK,MAAM,IAAU,IAAO,KAAA;GACnD;EACJ,CAAC,CACL,GAGM,IAAO,QACT,EAAK,QAAQ,KAAA,IAAY,EAAiB,EAAM,KAAK,CACzD,GAEM,IAAU,QAAe;GAC3B,IAAM,IAAO,EAAK;GAUlB,OATK,IAGD,MAAM,QAAQ,EAAM,KAAK,IAClB,EAAG,yBAAyB,EAAK,MAAM,IAE9C,EAAK,WAAW,IACT,GAAG,EAAK,EAAE,CAAC,IAAI,IAAI,EAAK,EAAE,CAAC,YAE/B,EAAK,KAAK,MAAQ,EAAI,GAAG,CAAC,CAAC,KAAK,KAAK,IARjC,EAAU,EAAM,KAAK;EASpC,CAAC,GAEK,IAAS,EAAI,EAAK,GAClB,IAAe,kBAAS,IAAI,IAAY,CAAC,GACzC,KAAa,MAAgB;GAC/B,AAAI,EAAa,IAAI,CAAG,IACpB,EAAa,OAAO,CAAG,IAEvB,EAAa,IAAI,CAAG;EAE5B;;;GAIW,OAAA,EAAA,SAAQ,EAAA,SAAnB,EAAA,GAAA,EAgDM,OAhDN,GAgDM,CA/CF,EAYS,UAAA;IAXL,MAAK;IACL,OAAM;IACL,iBAAe,EAAA;IACf,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAM,CAAI,EAAA;;IAClB,EAA+D,QAA/D,GAA+D,EAAf,EAAA,KAAK,GAAA,CAAA;IACrD,EAEO,QAFP,GAEO,EADA,EAAA,KAAO,GAAA,CAAA;IAEd,EAEuB,GAAA;KADlB,MAAM,EAAA,QAAM,uBAAA;KACb,OAAM;;GAEJ,GAAA,GAAA,CAAA,GAAA,EAAA,SAAU,EAAA,SAApB,EAAA,GAAA,EA8BK,MA9BL,GA8BK,EA7BD,EAAA,EAAA,GAAA,EA4BK,GAAA,MAAA,EA5Ba,EAAA,QAAP,OAAX,EAAA,GAAA,EA4BK,MAAA,EA5BoB,KAAK,EAAI,IAAA,GAAA,EAC9B,EAAA,GAAA,EAsBY,EArBH,EAAI,OAAI,WAAA,KAAA,GAAA;IACZ,MAAM,EAAI,OAAI,WAAc,KAAA;IAC7B,OAAM;IACL,iBAAwC,EAAI,OAAO,EAAa,IAAI,EAAI,GAAG,IAAI,KAAA;IAG/E,UAAK,MAAE,EAAI,OAAO,EAAU,EAAI,GAAG,IAAI,KAAA;;IACxC,SAAA,QAEO;KAFP,EAEO,QAFP,GAEO,EADA,EAAI,GAAG,GAAA,CAAA;KAEd,EAEO,QAFP,GAEO,EADA,EAAI,OAAO,GAAA,CAAA;KAGR,EAAI,QADd,EAAA,GAAA,EAOuB,GAAA;;MALlB,MAAmC,EAAa,IAAI,EAAI,GAAG,IAAA,uBAAA;MAK5D,OAAM;;;;;;;;GAGJ,CAAA,IAAA,EAAI,QAAQ,EAAa,IAAI,EAAI,GAAG,KAD9C,EAAA,GAAA,EAGyB,OAHzB,GAGyB,EAAjB,EAAI,IAAI,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,EAGR,GAAA,GAAA,EAAA,CAAA,KAAA,EAAA,SAAhB,EAAA,GAAA,EAEQ,OAFR,GAEQ,EADJ,EAAA,KAAI,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}
+{"version":3,"file":"PkChatbotStepPayload-XW4gT9AZ.js","names":[],"sources":["../../../../packages/components/src/chat/PkChatbotStepPayload.vue","../../../../packages/components/src/chat/PkChatbotStepPayload.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n    import { computed, reactive, ref } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { stringifyPayload } from './utils'\n\n    interface PayloadRow {\n        key: string\n        preview: string\n        full?: string\n    }\n\n    const props = defineProps<{\n        label: string\n        value: unknown\n    }>()\n\n    const { t: $t } = useI18n({\n        useScope: 'global',\n    })\n\n    // A preview stays on a single line: long enough to recognize the value,\n    // short enough to keep the payload readable without expanding anything.\n    const PREVIEW_LENGTH = 120\n\n    const stringify = (value: unknown, indent = 0): string | undefined => {\n        try {\n            return JSON.stringify(value, null, indent)\n        } catch {\n            return undefined\n        }\n    }\n\n    const toPreview = (value: unknown): string => {\n        if (value === undefined) {\n            return ''\n        }\n        const text =\n            typeof value === 'string' ? value : (stringify(value) ?? '')\n        const single = text.replace(/\\s+/g, ' ').trim()\n        return single.length > PREVIEW_LENGTH\n            ? `${single.slice(0, PREVIEW_LENGTH)}…`\n            : single\n    }\n\n    // Objects are listed by key, arrays by position: either way the payload\n    // becomes a list of short lines instead of one wall of JSON.\n    const entries = computed<[string, unknown][] | undefined>(() => {\n        const value = props.value\n        if (Array.isArray(value)) {\n            return value.length\n                ? value.map(\n                      (item, index) =>\n                          [`${index + 1}`, item] as [string, unknown],\n                  )\n                : undefined\n        }\n        if (value && typeof value === 'object') {\n            const own = Object.entries(value as Record<string, unknown>)\n            return own.length ? own : undefined\n        }\n        return undefined\n    })\n\n    const rows = computed<PayloadRow[] | undefined>(() =>\n        entries.value?.map(([key, value]) => {\n            const preview = toPreview(value)\n            const full = typeof value === 'string' ? value : stringify(value, 2)\n            return {\n                key,\n                preview: preview || '-',\n                // Only a value the preview had to cut (long, multiline or\n                // nested) is worth its own expandable block.\n                full: full && full.trim() !== preview ? full : undefined,\n            }\n        }),\n    )\n\n    // Scalars and strings have no rows: they fall back to the plain payload.\n    const text = computed(() =>\n        rows.value ? undefined : stringifyPayload(props.value),\n    )\n\n    const summary = computed(() => {\n        const list = rows.value\n        if (!list) {\n            return toPreview(props.value)\n        }\n        if (Array.isArray(props.value)) {\n            return $t('messagePart.stepItems', list.length)\n        }\n        if (list.length === 1) {\n            return `${list[0].key}: ${list[0].preview}`\n        }\n        return list.map((row) => row.key).join(' · ')\n    })\n\n    const isOpen = ref(false)\n    const expandedRows = reactive(new Set<string>())\n    const toggleRow = (key: string) => {\n        if (expandedRows.has(key)) {\n            expandedRows.delete(key)\n        } else {\n            expandedRows.add(key)\n        }\n    }\n</script>\n\n<template>\n    <div v-if=\"rows || text\" class=\"pk-chatbot-step-payload\">\n        <button\n            type=\"button\"\n            class=\"pk-chatbot-step-payload__header\"\n            :aria-expanded=\"isOpen\"\n            @click=\"isOpen = !isOpen\">\n            <span class=\"pk-chatbot-step-payload__label\">{{ label }}</span>\n            <span class=\"pk-chatbot-step-payload__summary\">\n                {{ summary }}\n            </span>\n            <VvIcon\n                :name=\"isOpen ? 'ri:arrow-up-s-line' : 'ri:arrow-down-s-line'\"\n                class=\"shrink-0\" />\n        </button>\n        <ul v-if=\"isOpen && rows\" class=\"pk-chatbot-step-payload__rows\">\n            <li v-for=\"row in rows\" :key=\"row.key\">\n                <component\n                    :is=\"row.full ? 'button' : 'div'\"\n                    :type=\"row.full ? 'button' : undefined\"\n                    class=\"pk-chatbot-step-payload__row\"\n                    :aria-expanded=\"\n                        row.full ? expandedRows.has(row.key) : undefined\n                    \"\n                    @click=\"row.full ? toggleRow(row.key) : undefined\">\n                    <span class=\"pk-chatbot-step-payload__key\">\n                        {{ row.key }}\n                    </span>\n                    <span class=\"pk-chatbot-step-payload__value\">\n                        {{ row.preview }}\n                    </span>\n                    <VvIcon\n                        v-if=\"row.full\"\n                        :name=\"\n                            expandedRows.has(row.key)\n                                ? 'ri:arrow-up-s-line'\n                                : 'ri:arrow-down-s-line'\n                        \"\n                        class=\"shrink-0\" />\n                </component>\n                <pre\n                    v-if=\"row.full && expandedRows.has(row.key)\"\n                    class=\"pk-chatbot-step-payload__full\"\n                    >{{ row.full }}</pre>\n            </li>\n        </ul>\n        <pre v-else-if=\"isOpen\" class=\"pk-chatbot-step-payload__full\">{{\n            text\n        }}</pre>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-step-payload {\n        border: var(--spacing-px) solid var(--color-surface-3);\n        border-radius: var(--rounded);\n        background-color: var(--color-surface-1);\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-28);\n            padding: var(--spacing-4) var(--spacing-8);\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        &__label {\n            flex-shrink: 0;\n            font-weight: 600;\n            font-size: var(--text-10);\n            text-transform: uppercase;\n            letter-spacing: 0.05em;\n            color: var(--color-word-3);\n        }\n\n        &__summary {\n            flex: 1 1 0;\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            font-family: var(--font-mono);\n            font-size: var(--text-10);\n            color: var(--color-word-4);\n        }\n\n        &__rows > li {\n            border-top: var(--spacing-px) solid var(--color-surface-3);\n        }\n\n        &__row {\n            display: flex;\n            align-items: baseline;\n            gap: var(--spacing-8);\n            width: 100%;\n            padding: var(--spacing-4) var(--spacing-8);\n            text-align: left;\n            font-size: var(--text-10);\n\n            &:is(button) {\n                cursor: pointer;\n                transition: background-color 0.2s ease;\n\n                &:hover {\n                    background-color: var(--color-surface-2);\n                }\n            }\n        }\n\n        &__key {\n            flex-shrink: 0;\n            max-width: 40%;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            font-family: var(--font-mono);\n            color: var(--color-word-4);\n        }\n\n        &__value {\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-2);\n        }\n\n        &__full {\n            padding: var(--spacing-8);\n            border-top: var(--spacing-px) solid var(--color-surface-3);\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            font-size: var(--text-10);\n            color: var(--color-word-3);\n        }\n    }\n</style>\n","<script lang=\"ts\" setup>\n    import { computed, reactive, ref } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { stringifyPayload } from './utils'\n\n    interface PayloadRow {\n        key: string\n        preview: string\n        full?: string\n    }\n\n    const props = defineProps<{\n        label: string\n        value: unknown\n    }>()\n\n    const { t: $t } = useI18n({\n        useScope: 'global',\n    })\n\n    // A preview stays on a single line: long enough to recognize the value,\n    // short enough to keep the payload readable without expanding anything.\n    const PREVIEW_LENGTH = 120\n\n    const stringify = (value: unknown, indent = 0): string | undefined => {\n        try {\n            return JSON.stringify(value, null, indent)\n        } catch {\n            return undefined\n        }\n    }\n\n    const toPreview = (value: unknown): string => {\n        if (value === undefined) {\n            return ''\n        }\n        const text =\n            typeof value === 'string' ? value : (stringify(value) ?? '')\n        const single = text.replace(/\\s+/g, ' ').trim()\n        return single.length > PREVIEW_LENGTH\n            ? `${single.slice(0, PREVIEW_LENGTH)}…`\n            : single\n    }\n\n    // Objects are listed by key, arrays by position: either way the payload\n    // becomes a list of short lines instead of one wall of JSON.\n    const entries = computed<[string, unknown][] | undefined>(() => {\n        const value = props.value\n        if (Array.isArray(value)) {\n            return value.length\n                ? value.map(\n                      (item, index) =>\n                          [`${index + 1}`, item] as [string, unknown],\n                  )\n                : undefined\n        }\n        if (value && typeof value === 'object') {\n            const own = Object.entries(value as Record<string, unknown>)\n            return own.length ? own : undefined\n        }\n        return undefined\n    })\n\n    const rows = computed<PayloadRow[] | undefined>(() =>\n        entries.value?.map(([key, value]) => {\n            const preview = toPreview(value)\n            const full = typeof value === 'string' ? value : stringify(value, 2)\n            return {\n                key,\n                preview: preview || '-',\n                // Only a value the preview had to cut (long, multiline or\n                // nested) is worth its own expandable block.\n                full: full && full.trim() !== preview ? full : undefined,\n            }\n        }),\n    )\n\n    // Scalars and strings have no rows: they fall back to the plain payload.\n    const text = computed(() =>\n        rows.value ? undefined : stringifyPayload(props.value),\n    )\n\n    const summary = computed(() => {\n        const list = rows.value\n        if (!list) {\n            return toPreview(props.value)\n        }\n        if (Array.isArray(props.value)) {\n            return $t('messagePart.stepItems', list.length)\n        }\n        if (list.length === 1) {\n            return `${list[0].key}: ${list[0].preview}`\n        }\n        return list.map((row) => row.key).join(' · ')\n    })\n\n    const isOpen = ref(false)\n    const expandedRows = reactive(new Set<string>())\n    const toggleRow = (key: string) => {\n        if (expandedRows.has(key)) {\n            expandedRows.delete(key)\n        } else {\n            expandedRows.add(key)\n        }\n    }\n</script>\n\n<template>\n    <div v-if=\"rows || text\" class=\"pk-chatbot-step-payload\">\n        <button\n            type=\"button\"\n            class=\"pk-chatbot-step-payload__header\"\n            :aria-expanded=\"isOpen\"\n            @click=\"isOpen = !isOpen\">\n            <span class=\"pk-chatbot-step-payload__label\">{{ label }}</span>\n            <span class=\"pk-chatbot-step-payload__summary\">\n                {{ summary }}\n            </span>\n            <VvIcon\n                :name=\"isOpen ? 'ri:arrow-up-s-line' : 'ri:arrow-down-s-line'\"\n                class=\"shrink-0\" />\n        </button>\n        <ul v-if=\"isOpen && rows\" class=\"pk-chatbot-step-payload__rows\">\n            <li v-for=\"row in rows\" :key=\"row.key\">\n                <component\n                    :is=\"row.full ? 'button' : 'div'\"\n                    :type=\"row.full ? 'button' : undefined\"\n                    class=\"pk-chatbot-step-payload__row\"\n                    :aria-expanded=\"\n                        row.full ? expandedRows.has(row.key) : undefined\n                    \"\n                    @click=\"row.full ? toggleRow(row.key) : undefined\">\n                    <span class=\"pk-chatbot-step-payload__key\">\n                        {{ row.key }}\n                    </span>\n                    <span class=\"pk-chatbot-step-payload__value\">\n                        {{ row.preview }}\n                    </span>\n                    <VvIcon\n                        v-if=\"row.full\"\n                        :name=\"\n                            expandedRows.has(row.key)\n                                ? 'ri:arrow-up-s-line'\n                                : 'ri:arrow-down-s-line'\n                        \"\n                        class=\"shrink-0\" />\n                </component>\n                <pre\n                    v-if=\"row.full && expandedRows.has(row.key)\"\n                    class=\"pk-chatbot-step-payload__full\"\n                    >{{ row.full }}</pre>\n            </li>\n        </ul>\n        <pre v-else-if=\"isOpen\" class=\"pk-chatbot-step-payload__full\">{{\n            text\n        }}</pre>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-step-payload {\n        border: var(--spacing-px) solid var(--color-surface-3);\n        border-radius: var(--rounded);\n        background-color: var(--color-surface-1);\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-28);\n            padding: var(--spacing-4) var(--spacing-8);\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        &__label {\n            flex-shrink: 0;\n            font-weight: 600;\n            font-size: var(--text-10);\n            text-transform: uppercase;\n            letter-spacing: 0.05em;\n            color: var(--color-word-3);\n        }\n\n        &__summary {\n            flex: 1 1 0;\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            font-family: var(--font-mono);\n            font-size: var(--text-10);\n            color: var(--color-word-4);\n        }\n\n        &__rows > li {\n            border-top: var(--spacing-px) solid var(--color-surface-3);\n        }\n\n        &__row {\n            display: flex;\n            align-items: baseline;\n            gap: var(--spacing-8);\n            width: 100%;\n            padding: var(--spacing-4) var(--spacing-8);\n            text-align: left;\n            font-size: var(--text-10);\n\n            &:is(button) {\n                cursor: pointer;\n                transition: background-color 0.2s ease;\n\n                &:hover {\n                    background-color: var(--color-surface-2);\n                }\n            }\n        }\n\n        &__key {\n            flex-shrink: 0;\n            max-width: 40%;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            font-family: var(--font-mono);\n            color: var(--color-word-4);\n        }\n\n        &__value {\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-2);\n        }\n\n        &__full {\n            padding: var(--spacing-8);\n            border-top: var(--spacing-px) solid var(--color-surface-3);\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            font-size: var(--text-10);\n            color: var(--color-word-3);\n        }\n    }\n</style>\n"],"mappings":"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"}