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

package/dist-vue/_chunks/PkChatbotFilePreview-DyrszALJ.js.map

@@ -1 +1 @@
-{"version":3,"file":"PkChatbotFilePreview-DyrszALJ.js","names":["$t","$emit"],"sources":["../../../../packages/components/src/chat/PkChatbotFilePreview.vue","../../../../packages/components/src/chat/PkChatbotFilePreview.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n    import { computed, ref, onMounted } from 'vue'\n    import { useLightbox } from '../composables/useLightbox'\n\n    const props = defineProps<{\n        mediaType: string\n        url: string\n        filename?: string\n        /** Size in bytes, when known (e.g. local uploads). */\n        size?: number\n        loading?: boolean\n        error?: string\n        removable?: boolean\n        /**\n         * Dense layout for the composer: a small square thumbnail / slim row,\n         * without the metadata caption. The full card is reserved for the\n         * message log where the details matter.\n         */\n        compact?: boolean\n    }>()\n\n    defineEmits<{\n        remove: []\n    }>()\n\n    const isImage = computed(() => props.mediaType.startsWith('image/'))\n\n    // --- File-type identity (icon + accent + human kind label) ---\n\n    const extension = computed(() => {\n        const name = props.filename ?? ''\n        const dot = name.lastIndexOf('.')\n        return dot > 0 ? name.slice(dot + 1).toLowerCase() : ''\n    })\n\n    // mediaType subtype, e.g. \"pdf\" from \"application/pdf\"\n    const subtype = computed(\n        () => props.mediaType.split('/')[1]?.split(';')[0] ?? '',\n    )\n\n    type FileKind = {\n        icon: string\n        // CSS color driving the icon glyph + tile tint\n        accent: string\n        label: string\n    }\n\n    const KINDS: Array<{ test: RegExp; kind: FileKind }> = [\n        {\n            test: /pdf/,\n            kind: {\n                icon: 'ri:file-pdf-2-line',\n                accent: '#e2483d',\n                label: 'PDF',\n            },\n        },\n        {\n            // Match Word specifically: the generic `document` substring also\n            // appears in the XLSX/PPTX OOXML mime types (…officedocument…), so\n            // matching it here would mis-label spreadsheets/decks as Word.\n            test: /msword|wordprocessingml/,\n            kind: {\n                icon: 'ri:file-word-2-line',\n                accent: '#2b7de9',\n                label: 'Word',\n            },\n        },\n        {\n            test: /sheet|excel|csv/,\n            kind: {\n                icon: 'ri:file-excel-2-line',\n                accent: '#1f9d57',\n                label: 'Spreadsheet',\n            },\n        },\n        {\n            test: /presentation|powerpoint/,\n            kind: {\n                icon: 'ri:file-ppt-2-line',\n                accent: '#d98324',\n                label: 'Presentation',\n            },\n        },\n        {\n            test: /zip|compressed|x-7z|x-rar|x-tar|gzip/,\n            kind: {\n                icon: 'ri:file-zip-line',\n                accent: '#c08a1e',\n                label: 'Archive',\n            },\n        },\n        {\n            test: /^audio\\//,\n            kind: {\n                icon: 'ri:file-music-line',\n                accent: '#8b5cf6',\n                label: 'Audio',\n            },\n        },\n        {\n            test: /^video\\//,\n            kind: {\n                icon: 'ri:film-line',\n                accent: '#6366f1',\n                label: 'Video',\n            },\n        },\n        {\n            test: /json|javascript|typescript|xml|html|x-sh|x-python/,\n            kind: {\n                icon: 'ri:file-code-line',\n                accent: '#0d9488',\n                label: 'Code',\n            },\n        },\n        {\n            test: /^text\\//,\n            kind: {\n                icon: 'ri:file-text-line',\n                accent: '#64748b',\n                label: 'Text',\n            },\n        },\n    ]\n\n    const fileKind = computed<FileKind>(() => {\n        const haystack = `${props.mediaType} ${extension.value}`\n        for (const { test, kind } of KINDS) {\n            if (test.test(haystack)) {\n                return kind\n            }\n        }\n        return {\n            icon: 'ri:file-line',\n            accent: '#64748b',\n            label: 'File',\n        }\n    })\n\n    // Short type tag shown in the meta line: prefer the real extension, fall\n    // back to the mime subtype, then the generic kind label.\n    const typeTag = computed(() =>\n        (\n            extension.value ||\n            subtype.value ||\n            fileKind.value.label\n        ).toUpperCase(),\n    )\n\n    // --- Size & dimensions ---\n\n    const formattedSize = computed(() => {\n        const bytes = props.size\n        if (bytes === undefined || bytes < 0) {\n            return undefined\n        }\n        if (bytes < 1024) {\n            return `${bytes} B`\n        }\n        const units = ['KB', 'MB', 'GB', 'TB']\n        let value = bytes / 1024\n        let unitIndex = 0\n        while (value >= 1024 && unitIndex < units.length - 1) {\n            value /= 1024\n            unitIndex += 1\n        }\n        return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unitIndex]}`\n    })\n\n    // Thumbnail load lifecycle. Driving the spinner and the error fallback\n    // off the real <img> events (not a second background fetch) means the\n    // image is requested exactly once and reuses the browser cache on any\n    // later re-render, instead of re-downloading every time the message list\n    // repaints.\n    type ThumbStatus = 'loading' | 'loaded' | 'error'\n\n    // Module-level, keyed by URL: survives component recreation. In polled\n    // views (e.g. admin chat-logs, refreshed every few seconds) the whole\n    // message array is replaced on each poll, so this component can be torn\n    // down and rebuilt. Seeding from the cache means a URL that already\n    // decoded starts in `loaded` (no spinner flash, no re-decode) instead of\n    // flickering back through `loading`. This is a client-side, per-session\n    // cache (no server/Redis involved); bounded to a max size so a long-lived\n    // session browsing many images can't grow it without limit — the oldest\n    // entry is evicted first (Map preserves insertion order).\n    type ThumbEntry = {\n        status: ThumbStatus\n        dimensions?: { width: number; height: number }\n    }\n    const THUMB_CACHE_MAX = 300\n    const thumbCache = new Map<string, ThumbEntry>()\n    const setThumbCache = (url: string, entry: ThumbEntry) => {\n        // Re-insert to mark as most-recently used, then trim from the front.\n        thumbCache.delete(url)\n        thumbCache.set(url, entry)\n        if (thumbCache.size > THUMB_CACHE_MAX) {\n            thumbCache.delete(thumbCache.keys().next().value as string)\n        }\n    }\n\n    const cached = thumbCache.get(props.url)\n    const thumbStatus = ref<ThumbStatus>(cached?.status ?? 'loading')\n\n    // Natural pixel dimensions, captured once the thumbnail decodes. Doubles\n    // as the size hint PhotoSwipe needs for its slide (falls back until known).\n    const dimensions = ref<{ width: number; height: number } | undefined>(\n        cached?.dimensions,\n    )\n    const onImageLoad = (event: Event) => {\n        const img = event.target as HTMLImageElement\n        if (img.naturalWidth && img.naturalHeight) {\n            dimensions.value = {\n                width: img.naturalWidth,\n                height: img.naturalHeight,\n            }\n        }\n        thumbStatus.value = 'loaded'\n        setThumbCache(props.url, {\n            status: 'loaded',\n            dimensions: dimensions.value,\n        })\n    }\n    const onImageError = () => {\n        thumbStatus.value = 'error'\n        setThumbCache(props.url, { status: 'error' })\n    }\n\n    const pswpSize = computed(() => dimensions.value ?? DEFAULT_PSWP_SIZE)\n\n    // Meta fragments joined with \" · \" for the caption / doc subtitle.\n    const imageMeta = computed(() =>\n        [\n            dimensions.value &&\n                `${dimensions.value.width}×${dimensions.value.height}`,\n            formattedSize.value,\n        ].filter(Boolean),\n    )\n    const docMeta = computed(() =>\n        [typeTag.value, formattedSize.value].filter(Boolean),\n    )\n\n    // --- Lightbox ---\n\n    // Slide size PhotoSwipe assumes before the real dimensions are known.\n    const DEFAULT_PSWP_SIZE = { width: 1200, height: 800 }\n\n    const galleryRef = ref<HTMLElement>()\n    const { init } = useLightbox({ gallery: galleryRef, loop: false })\n\n    onMounted(async () => {\n        if (!isImage.value) {\n            return\n        }\n        await init()\n    })\n</script>\n\n<template>\n    <!-- Image attachment: a thumbnail tile with a metadata caption -->\n    <figure\n        v-if=\"isImage\"\n        class=\"pk-chatbot-file-preview pk-chatbot-file-preview--image\"\n        :class=\"{ 'pk-chatbot-file-preview--compact': compact }\">\n        <div ref=\"galleryRef\" class=\"pk-chatbot-file-preview__thumb-wrap\">\n            <a\n                :href=\"url\"\n                :data-pswp-src=\"url\"\n                :data-pswp-width=\"pswpSize.width\"\n                :data-pswp-height=\"pswpSize.height\"\n                :data-pswp-caption=\"filename ?? ''\"\n                class=\"pk-chatbot-file-preview__thumb-link\"\n                :aria-label=\"filename ?? $t('label.file')\">\n                <img\n                    v-show=\"thumbStatus === 'loaded'\"\n                    :src=\"url\"\n                    :alt=\"filename\"\n                    decoding=\"async\"\n                    class=\"pk-chatbot-file-preview__thumb\"\n                    @load=\"onImageLoad\"\n                    @error=\"onImageError\" />\n            </a>\n            <!-- Spinner until the thumbnail decodes (or while an upload is in\n                 flight); a fixed box keeps this from shifting the layout. -->\n            <span\n                v-if=\"loading || thumbStatus === 'loading'\"\n                class=\"pk-chatbot-file-preview__status pk-chatbot-file-preview__status--overlay\">\n                <VvIcon name=\"line-md:loading-loop\" />\n            </span>\n            <!-- Failed to load: a quiet icon instead of the browser's broken\n                 image glyph. -->\n            <span\n                v-else-if=\"thumbStatus === 'error'\"\n                class=\"pk-chatbot-file-preview__status pk-chatbot-file-preview__status--overlay pk-chatbot-file-preview__status--error\">\n                <VvIcon name=\"ri:image-2-line\" />\n            </span>\n        </div>\n        <figcaption v-if=\"!compact\" class=\"pk-chatbot-file-preview__caption\">\n            <span\n                v-if=\"filename\"\n                class=\"pk-chatbot-file-preview__name\"\n                :title=\"filename\"\n                >{{ filename }}</span\n            >\n            <span class=\"pk-chatbot-file-preview__meta\">\n                <span\n                    v-if=\"error\"\n                    class=\"pk-chatbot-file-preview__error\"\n                    :title=\"error\">\n                    <VvIcon name=\"ri:error-warning-line\" />\n                    {{ error }}\n                </span>\n                <template v-else>{{ imageMeta.join(' · ') }}</template>\n            </span>\n        </figcaption>\n        <button\n            v-if=\"removable && !loading\"\n            type=\"button\"\n            class=\"pk-chatbot-file-preview__remove\"\n            :title=\"$t('action.remove')\"\n            :aria-label=\"$t('action.remove')\"\n            @click.prevent=\"$emit('remove')\">\n            <VvIcon name=\"ri:close-line\" />\n        </button>\n    </figure>\n\n    <!-- Document attachment: an icon tile + name + type · size -->\n    <div\n        v-else\n        class=\"pk-chatbot-file-preview pk-chatbot-file-preview--doc\"\n        :class=\"{\n            'pk-chatbot-file-preview--error': error,\n            'pk-chatbot-file-preview--compact': compact,\n        }\">\n        <span\n            class=\"pk-chatbot-file-preview__icon-tile\"\n            :style=\"{ '--file-accent': fileKind.accent }\">\n            <VvIcon\n                v-if=\"loading\"\n                name=\"line-md:loading-loop\"\n                class=\"pk-chatbot-file-preview__icon\" />\n            <VvIcon\n                v-else\n                :name=\"fileKind.icon\"\n                class=\"pk-chatbot-file-preview__icon\" />\n        </span>\n        <span class=\"pk-chatbot-file-preview__body\">\n            <span\n                v-if=\"filename\"\n                class=\"pk-chatbot-file-preview__name\"\n                :title=\"filename\"\n                >{{ filename }}</span\n            >\n            <span class=\"pk-chatbot-file-preview__meta\">\n                <span\n                    v-if=\"error\"\n                    class=\"pk-chatbot-file-preview__error\"\n                    :title=\"error\">\n                    <VvIcon name=\"ri:error-warning-line\" />\n                    {{ error }}\n                </span>\n                <template v-else>{{ docMeta.join(' · ') }}</template>\n            </span>\n        </span>\n        <a\n            v-if=\"!loading && !error && !compact\"\n            :href=\"url\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            class=\"pk-chatbot-file-preview__open\"\n            :title=\"$t('action.download')\"\n            :aria-label=\"`${$t('action.download')}${filename ? ` — ${filename}` : ''}`\">\n            <VvIcon name=\"ri:download-2-line\" />\n        </a>\n        <button\n            v-if=\"removable && !loading\"\n            type=\"button\"\n            class=\"pk-chatbot-file-preview__remove\"\n            :class=\"{ 'pk-chatbot-file-preview__remove--inline': !compact }\"\n            :title=\"$t('action.remove')\"\n            :aria-label=\"$t('action.remove')\"\n            @click=\"$emit('remove')\">\n            <VvIcon name=\"ri:close-line\" />\n        </button>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-file-preview {\n        // Concentric radii: outer card and inner tiles share an 8px step.\n        --file-radius: var(--rounded-lg, 12px);\n        position: relative;\n        max-width: 280px;\n        background-color: var(--color-surface-1);\n        border: 1px solid var(--color-surface-3);\n        border-radius: var(--file-radius);\n        color: var(--color-word-2);\n        font-size: var(--text-12);\n\n        &--error {\n            border-color: var(--color-danger);\n        }\n\n        // --- Document card ---\n        &--doc {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-8);\n            padding: var(--spacing-8);\n            min-width: 0;\n            transition:\n                border-color 0.18s var(--ease-out),\n                background-color 0.18s var(--ease-out),\n                box-shadow 0.18s var(--ease-out);\n\n            &:hover {\n                border-color: var(--color-surface-4);\n                background-color: var(--color-surface-2);\n                box-shadow: var(--shadow-sm);\n            }\n        }\n\n        &__icon-tile {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n            width: var(--spacing-36);\n            height: var(--spacing-36);\n            // One step down from the card radius keeps the nested tile concentric.\n            border-radius: var(--rounded-md, 6px);\n            // Tint derived from the file-type accent; glyph sits at full accent.\n            background-color: color-mix(\n                in srgb,\n                var(--file-accent) 14%,\n                transparent\n            );\n            color: var(--file-accent);\n        }\n\n        &__icon {\n            width: var(--spacing-20);\n            height: var(--spacing-20);\n        }\n\n        &__body {\n            display: flex;\n            flex-direction: column;\n            gap: 1px;\n            min-width: 0;\n            flex: 1;\n        }\n\n        &__open {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n            width: var(--spacing-28);\n            height: var(--spacing-28);\n            margin-inline-start: var(--spacing-4);\n            border-radius: var(--rounded);\n            color: var(--color-word-3);\n            text-decoration: none;\n            opacity: 0;\n            transition:\n                opacity 0.18s var(--ease-out),\n                color 0.18s var(--ease-out),\n                background-color 0.18s var(--ease-out);\n\n            &:hover {\n                background-color: var(--color-surface-3);\n                color: var(--color-word-1);\n            }\n        }\n\n        &--doc:hover &__open,\n        &--doc:focus-within &__open {\n            opacity: 1;\n        }\n\n        // Touch devices have no hover: keep the open affordance visible.\n        @media (hover: none) {\n            &--doc &__open {\n                opacity: 1;\n            }\n        }\n\n        // --- Image card ---\n        &--image {\n            display: inline-flex;\n            flex-direction: column;\n            margin: 0;\n        }\n\n        &__thumb-wrap {\n            position: relative;\n            display: flex;\n            // Fixed box: the card claims its final footprint before the\n            // image decodes, so the message log never shifts on load.\n            width: 280px;\n            max-width: 100%;\n            height: 200px;\n            background-color: var(--color-surface);\n            border-radius: var(--file-radius);\n            overflow: hidden;\n        }\n\n        &__thumb-link {\n            display: flex;\n            width: 100%;\n            height: 100%;\n            cursor: pointer;\n        }\n\n        &__thumb {\n            display: block;\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n        }\n\n        &__caption {\n            display: flex;\n            flex-direction: column;\n            gap: 1px;\n            padding: var(--spacing-8);\n            min-width: 0;\n        }\n\n        &__name {\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            font-weight: var(--font-medium, 500);\n            color: var(--color-word-1);\n        }\n\n        &__meta {\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            font-size: var(--text-10);\n            line-height: var(--leading-normal);\n            // Reserve the line even while empty: image dimensions arrive\n            // only after decode and must not grow the caption.\n            min-height: 1.4em;\n            color: var(--color-word-4);\n            // Stable column for the dimensions/size figures.\n            font-variant-numeric: tabular-nums;\n        }\n\n        &__error {\n            display: inline-flex;\n            align-items: center;\n            gap: var(--spacing-4);\n            color: var(--color-danger);\n\n            .vv-icon {\n                flex-shrink: 0;\n            }\n        }\n\n        &__status {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n\n            .vv-icon {\n                width: var(--spacing-32);\n                height: var(--spacing-32);\n            }\n\n            &--overlay {\n                position: absolute;\n                inset: 0;\n                background-color: color-mix(\n                    in srgb,\n                    var(--color-surface-1) 70%,\n                    transparent\n                );\n                color: var(--color-word-1);\n            }\n\n            &--error {\n                color: var(--color-word-4);\n            }\n        }\n\n        // --- Remove button (input context) ---\n        &__remove {\n            position: absolute;\n            top: 0;\n            right: 0;\n            transform: translate(50%, -50%);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            // Visible glyph is 18px but the hit area stays a comfortable 28px.\n            width: var(--spacing-28);\n            height: var(--spacing-28);\n            padding: 0;\n            border: none;\n            border-radius: var(--rounded-full, 9999px);\n            background-color: color-mix(\n                in srgb,\n                var(--color-surface-1) 85%,\n                transparent\n            );\n            color: var(--color-word-2);\n            cursor: pointer;\n            line-height: 1;\n            box-shadow: var(--shadow-sm);\n            transition:\n                background-color 0.18s var(--ease-out),\n                color 0.18s var(--ease-out),\n                scale 0.12s var(--ease-out);\n\n            &:hover {\n                background-color: var(--color-surface-2);\n                color: var(--color-word-1);\n            }\n\n            &:active {\n                scale: 0.96;\n            }\n\n            // Inside the document row the button rides inline, not overlaid\n            // (size is inherited from the base).\n            &--inline {\n                position: static;\n                flex-shrink: 0;\n                box-shadow: none;\n                background-color: transparent;\n                color: var(--color-word-4);\n\n                &:hover {\n                    background-color: var(--color-surface-3);\n                    color: var(--color-word-1);\n                }\n            }\n        }\n\n        // --- Compact (composer) chips ---\n        // ChatGPT/Gemini-style: every attachment is the SAME height and carries\n        // an always-visible round remove control in the top-right corner — no\n        // hover-revealed actions, no size mismatch between image and file chips.\n        &--compact {\n            // Shared chip height so image and file chips align in the row.\n            --chip-size: var(--spacing-56);\n            max-width: 240px;\n\n            &.pk-chatbot-file-preview--image {\n                width: var(--chip-size);\n                height: var(--chip-size);\n                border-radius: var(--rounded-md, 6px);\n            }\n\n            // Fill the square; the root's `overflow: hidden` rounds the corners.\n            .pk-chatbot-file-preview__thumb-wrap,\n            .pk-chatbot-file-preview__thumb-link {\n                width: 100%;\n                height: 100%;\n            }\n\n            &.pk-chatbot-file-preview--doc {\n                height: var(--chip-size);\n                gap: var(--spacing-8);\n                padding: var(--spacing-8);\n                // Reserve room so the corner remove button never overlaps the\n                // name/meta text.\n                padding-inline-end: var(--spacing-28);\n            }\n\n            // Square icon tile that fills the chip height, so file chips read at\n            // the same scale as image thumbnails.\n            .pk-chatbot-file-preview__icon-tile {\n                align-self: stretch;\n                width: auto;\n                height: auto;\n                aspect-ratio: 1;\n            }\n\n            .pk-chatbot-file-preview__icon {\n                width: var(--spacing-20);\n                height: var(--spacing-20);\n            }\n        }\n\n        // Always-visible round remove control in the top-right corner. Sits\n        // just inside the chip (an ancestor clips overflow), bigger than before,\n        // with an extended hit area for easy tapping.\n        &--compact &__remove {\n            top: var(--spacing-4);\n            right: var(--spacing-4);\n            width: var(--spacing-24);\n            height: var(--spacing-24);\n            border: 1px solid var(--color-surface-4);\n            background-color: var(--color-surface);\n            color: var(--color-word-1);\n            font-size: var(--text-16);\n            box-shadow: var(--shadow-sm);\n\n            // Comfortable touch/click target beyond the small visible glyph.\n            &::after {\n                content: '';\n                position: absolute;\n                inset: calc(-1 * var(--spacing-4));\n            }\n\n            &:hover {\n                background-color: var(--color-surface-2);\n                color: var(--color-word-1);\n            }\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n            &--doc,\n            &__open,\n            &__remove {\n                transition: none;\n            }\n        }\n    }\n</style>\n","<script lang=\"ts\" setup>\n    import { computed, ref, onMounted } from 'vue'\n    import { useLightbox } from '../composables/useLightbox'\n\n    const props = defineProps<{\n        mediaType: string\n        url: string\n        filename?: string\n        /** Size in bytes, when known (e.g. local uploads). */\n        size?: number\n        loading?: boolean\n        error?: string\n        removable?: boolean\n        /**\n         * Dense layout for the composer: a small square thumbnail / slim row,\n         * without the metadata caption. The full card is reserved for the\n         * message log where the details matter.\n         */\n        compact?: boolean\n    }>()\n\n    defineEmits<{\n        remove: []\n    }>()\n\n    const isImage = computed(() => props.mediaType.startsWith('image/'))\n\n    // --- File-type identity (icon + accent + human kind label) ---\n\n    const extension = computed(() => {\n        const name = props.filename ?? ''\n        const dot = name.lastIndexOf('.')\n        return dot > 0 ? name.slice(dot + 1).toLowerCase() : ''\n    })\n\n    // mediaType subtype, e.g. \"pdf\" from \"application/pdf\"\n    const subtype = computed(\n        () => props.mediaType.split('/')[1]?.split(';')[0] ?? '',\n    )\n\n    type FileKind = {\n        icon: string\n        // CSS color driving the icon glyph + tile tint\n        accent: string\n        label: string\n    }\n\n    const KINDS: Array<{ test: RegExp; kind: FileKind }> = [\n        {\n            test: /pdf/,\n            kind: {\n                icon: 'ri:file-pdf-2-line',\n                accent: '#e2483d',\n                label: 'PDF',\n            },\n        },\n        {\n            // Match Word specifically: the generic `document` substring also\n            // appears in the XLSX/PPTX OOXML mime types (…officedocument…), so\n            // matching it here would mis-label spreadsheets/decks as Word.\n            test: /msword|wordprocessingml/,\n            kind: {\n                icon: 'ri:file-word-2-line',\n                accent: '#2b7de9',\n                label: 'Word',\n            },\n        },\n        {\n            test: /sheet|excel|csv/,\n            kind: {\n                icon: 'ri:file-excel-2-line',\n                accent: '#1f9d57',\n                label: 'Spreadsheet',\n            },\n        },\n        {\n            test: /presentation|powerpoint/,\n            kind: {\n                icon: 'ri:file-ppt-2-line',\n                accent: '#d98324',\n                label: 'Presentation',\n            },\n        },\n        {\n            test: /zip|compressed|x-7z|x-rar|x-tar|gzip/,\n            kind: {\n                icon: 'ri:file-zip-line',\n                accent: '#c08a1e',\n                label: 'Archive',\n            },\n        },\n        {\n            test: /^audio\\//,\n            kind: {\n                icon: 'ri:file-music-line',\n                accent: '#8b5cf6',\n                label: 'Audio',\n            },\n        },\n        {\n            test: /^video\\//,\n            kind: {\n                icon: 'ri:film-line',\n                accent: '#6366f1',\n                label: 'Video',\n            },\n        },\n        {\n            test: /json|javascript|typescript|xml|html|x-sh|x-python/,\n            kind: {\n                icon: 'ri:file-code-line',\n                accent: '#0d9488',\n                label: 'Code',\n            },\n        },\n        {\n            test: /^text\\//,\n            kind: {\n                icon: 'ri:file-text-line',\n                accent: '#64748b',\n                label: 'Text',\n            },\n        },\n    ]\n\n    const fileKind = computed<FileKind>(() => {\n        const haystack = `${props.mediaType} ${extension.value}`\n        for (const { test, kind } of KINDS) {\n            if (test.test(haystack)) {\n                return kind\n            }\n        }\n        return {\n            icon: 'ri:file-line',\n            accent: '#64748b',\n            label: 'File',\n        }\n    })\n\n    // Short type tag shown in the meta line: prefer the real extension, fall\n    // back to the mime subtype, then the generic kind label.\n    const typeTag = computed(() =>\n        (\n            extension.value ||\n            subtype.value ||\n            fileKind.value.label\n        ).toUpperCase(),\n    )\n\n    // --- Size & dimensions ---\n\n    const formattedSize = computed(() => {\n        const bytes = props.size\n        if (bytes === undefined || bytes < 0) {\n            return undefined\n        }\n        if (bytes < 1024) {\n            return `${bytes} B`\n        }\n        const units = ['KB', 'MB', 'GB', 'TB']\n        let value = bytes / 1024\n        let unitIndex = 0\n        while (value >= 1024 && unitIndex < units.length - 1) {\n            value /= 1024\n            unitIndex += 1\n        }\n        return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unitIndex]}`\n    })\n\n    // Thumbnail load lifecycle. Driving the spinner and the error fallback\n    // off the real <img> events (not a second background fetch) means the\n    // image is requested exactly once and reuses the browser cache on any\n    // later re-render, instead of re-downloading every time the message list\n    // repaints.\n    type ThumbStatus = 'loading' | 'loaded' | 'error'\n\n    // Module-level, keyed by URL: survives component recreation. In polled\n    // views (e.g. admin chat-logs, refreshed every few seconds) the whole\n    // message array is replaced on each poll, so this component can be torn\n    // down and rebuilt. Seeding from the cache means a URL that already\n    // decoded starts in `loaded` (no spinner flash, no re-decode) instead of\n    // flickering back through `loading`. This is a client-side, per-session\n    // cache (no server/Redis involved); bounded to a max size so a long-lived\n    // session browsing many images can't grow it without limit — the oldest\n    // entry is evicted first (Map preserves insertion order).\n    type ThumbEntry = {\n        status: ThumbStatus\n        dimensions?: { width: number; height: number }\n    }\n    const THUMB_CACHE_MAX = 300\n    const thumbCache = new Map<string, ThumbEntry>()\n    const setThumbCache = (url: string, entry: ThumbEntry) => {\n        // Re-insert to mark as most-recently used, then trim from the front.\n        thumbCache.delete(url)\n        thumbCache.set(url, entry)\n        if (thumbCache.size > THUMB_CACHE_MAX) {\n            thumbCache.delete(thumbCache.keys().next().value as string)\n        }\n    }\n\n    const cached = thumbCache.get(props.url)\n    const thumbStatus = ref<ThumbStatus>(cached?.status ?? 'loading')\n\n    // Natural pixel dimensions, captured once the thumbnail decodes. Doubles\n    // as the size hint PhotoSwipe needs for its slide (falls back until known).\n    const dimensions = ref<{ width: number; height: number } | undefined>(\n        cached?.dimensions,\n    )\n    const onImageLoad = (event: Event) => {\n        const img = event.target as HTMLImageElement\n        if (img.naturalWidth && img.naturalHeight) {\n            dimensions.value = {\n                width: img.naturalWidth,\n                height: img.naturalHeight,\n            }\n        }\n        thumbStatus.value = 'loaded'\n        setThumbCache(props.url, {\n            status: 'loaded',\n            dimensions: dimensions.value,\n        })\n    }\n    const onImageError = () => {\n        thumbStatus.value = 'error'\n        setThumbCache(props.url, { status: 'error' })\n    }\n\n    const pswpSize = computed(() => dimensions.value ?? DEFAULT_PSWP_SIZE)\n\n    // Meta fragments joined with \" · \" for the caption / doc subtitle.\n    const imageMeta = computed(() =>\n        [\n            dimensions.value &&\n                `${dimensions.value.width}×${dimensions.value.height}`,\n            formattedSize.value,\n        ].filter(Boolean),\n    )\n    const docMeta = computed(() =>\n        [typeTag.value, formattedSize.value].filter(Boolean),\n    )\n\n    // --- Lightbox ---\n\n    // Slide size PhotoSwipe assumes before the real dimensions are known.\n    const DEFAULT_PSWP_SIZE = { width: 1200, height: 800 }\n\n    const galleryRef = ref<HTMLElement>()\n    const { init } = useLightbox({ gallery: galleryRef, loop: false })\n\n    onMounted(async () => {\n        if (!isImage.value) {\n            return\n        }\n        await init()\n    })\n</script>\n\n<template>\n    <!-- Image attachment: a thumbnail tile with a metadata caption -->\n    <figure\n        v-if=\"isImage\"\n        class=\"pk-chatbot-file-preview pk-chatbot-file-preview--image\"\n        :class=\"{ 'pk-chatbot-file-preview--compact': compact }\">\n        <div ref=\"galleryRef\" class=\"pk-chatbot-file-preview__thumb-wrap\">\n            <a\n                :href=\"url\"\n                :data-pswp-src=\"url\"\n                :data-pswp-width=\"pswpSize.width\"\n                :data-pswp-height=\"pswpSize.height\"\n                :data-pswp-caption=\"filename ?? ''\"\n                class=\"pk-chatbot-file-preview__thumb-link\"\n                :aria-label=\"filename ?? $t('label.file')\">\n                <img\n                    v-show=\"thumbStatus === 'loaded'\"\n                    :src=\"url\"\n                    :alt=\"filename\"\n                    decoding=\"async\"\n                    class=\"pk-chatbot-file-preview__thumb\"\n                    @load=\"onImageLoad\"\n                    @error=\"onImageError\" />\n            </a>\n            <!-- Spinner until the thumbnail decodes (or while an upload is in\n                 flight); a fixed box keeps this from shifting the layout. -->\n            <span\n                v-if=\"loading || thumbStatus === 'loading'\"\n                class=\"pk-chatbot-file-preview__status pk-chatbot-file-preview__status--overlay\">\n                <VvIcon name=\"line-md:loading-loop\" />\n            </span>\n            <!-- Failed to load: a quiet icon instead of the browser's broken\n                 image glyph. -->\n            <span\n                v-else-if=\"thumbStatus === 'error'\"\n                class=\"pk-chatbot-file-preview__status pk-chatbot-file-preview__status--overlay pk-chatbot-file-preview__status--error\">\n                <VvIcon name=\"ri:image-2-line\" />\n            </span>\n        </div>\n        <figcaption v-if=\"!compact\" class=\"pk-chatbot-file-preview__caption\">\n            <span\n                v-if=\"filename\"\n                class=\"pk-chatbot-file-preview__name\"\n                :title=\"filename\"\n                >{{ filename }}</span\n            >\n            <span class=\"pk-chatbot-file-preview__meta\">\n                <span\n                    v-if=\"error\"\n                    class=\"pk-chatbot-file-preview__error\"\n                    :title=\"error\">\n                    <VvIcon name=\"ri:error-warning-line\" />\n                    {{ error }}\n                </span>\n                <template v-else>{{ imageMeta.join(' · ') }}</template>\n            </span>\n        </figcaption>\n        <button\n            v-if=\"removable && !loading\"\n            type=\"button\"\n            class=\"pk-chatbot-file-preview__remove\"\n            :title=\"$t('action.remove')\"\n            :aria-label=\"$t('action.remove')\"\n            @click.prevent=\"$emit('remove')\">\n            <VvIcon name=\"ri:close-line\" />\n        </button>\n    </figure>\n\n    <!-- Document attachment: an icon tile + name + type · size -->\n    <div\n        v-else\n        class=\"pk-chatbot-file-preview pk-chatbot-file-preview--doc\"\n        :class=\"{\n            'pk-chatbot-file-preview--error': error,\n            'pk-chatbot-file-preview--compact': compact,\n        }\">\n        <span\n            class=\"pk-chatbot-file-preview__icon-tile\"\n            :style=\"{ '--file-accent': fileKind.accent }\">\n            <VvIcon\n                v-if=\"loading\"\n                name=\"line-md:loading-loop\"\n                class=\"pk-chatbot-file-preview__icon\" />\n            <VvIcon\n                v-else\n                :name=\"fileKind.icon\"\n                class=\"pk-chatbot-file-preview__icon\" />\n        </span>\n        <span class=\"pk-chatbot-file-preview__body\">\n            <span\n                v-if=\"filename\"\n                class=\"pk-chatbot-file-preview__name\"\n                :title=\"filename\"\n                >{{ filename }}</span\n            >\n            <span class=\"pk-chatbot-file-preview__meta\">\n                <span\n                    v-if=\"error\"\n                    class=\"pk-chatbot-file-preview__error\"\n                    :title=\"error\">\n                    <VvIcon name=\"ri:error-warning-line\" />\n                    {{ error }}\n                </span>\n                <template v-else>{{ docMeta.join(' · ') }}</template>\n            </span>\n        </span>\n        <a\n            v-if=\"!loading && !error && !compact\"\n            :href=\"url\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            class=\"pk-chatbot-file-preview__open\"\n            :title=\"$t('action.download')\"\n            :aria-label=\"`${$t('action.download')}${filename ? ` — ${filename}` : ''}`\">\n            <VvIcon name=\"ri:download-2-line\" />\n        </a>\n        <button\n            v-if=\"removable && !loading\"\n            type=\"button\"\n            class=\"pk-chatbot-file-preview__remove\"\n            :class=\"{ 'pk-chatbot-file-preview__remove--inline': !compact }\"\n            :title=\"$t('action.remove')\"\n            :aria-label=\"$t('action.remove')\"\n            @click=\"$emit('remove')\">\n            <VvIcon name=\"ri:close-line\" />\n        </button>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-file-preview {\n        // Concentric radii: outer card and inner tiles share an 8px step.\n        --file-radius: var(--rounded-lg, 12px);\n        position: relative;\n        max-width: 280px;\n        background-color: var(--color-surface-1);\n        border: 1px solid var(--color-surface-3);\n        border-radius: var(--file-radius);\n        color: var(--color-word-2);\n        font-size: var(--text-12);\n\n        &--error {\n            border-color: var(--color-danger);\n        }\n\n        // --- Document card ---\n        &--doc {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-8);\n            padding: var(--spacing-8);\n            min-width: 0;\n            transition:\n                border-color 0.18s var(--ease-out),\n                background-color 0.18s var(--ease-out),\n                box-shadow 0.18s var(--ease-out);\n\n            &:hover {\n                border-color: var(--color-surface-4);\n                background-color: var(--color-surface-2);\n                box-shadow: var(--shadow-sm);\n            }\n        }\n\n        &__icon-tile {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n            width: var(--spacing-36);\n            height: var(--spacing-36);\n            // One step down from the card radius keeps the nested tile concentric.\n            border-radius: var(--rounded-md, 6px);\n            // Tint derived from the file-type accent; glyph sits at full accent.\n            background-color: color-mix(\n                in srgb,\n                var(--file-accent) 14%,\n                transparent\n            );\n            color: var(--file-accent);\n        }\n\n        &__icon {\n            width: var(--spacing-20);\n            height: var(--spacing-20);\n        }\n\n        &__body {\n            display: flex;\n            flex-direction: column;\n            gap: 1px;\n            min-width: 0;\n            flex: 1;\n        }\n\n        &__open {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n            width: var(--spacing-28);\n            height: var(--spacing-28);\n            margin-inline-start: var(--spacing-4);\n            border-radius: var(--rounded);\n            color: var(--color-word-3);\n            text-decoration: none;\n            opacity: 0;\n            transition:\n                opacity 0.18s var(--ease-out),\n                color 0.18s var(--ease-out),\n                background-color 0.18s var(--ease-out);\n\n            &:hover {\n                background-color: var(--color-surface-3);\n                color: var(--color-word-1);\n            }\n        }\n\n        &--doc:hover &__open,\n        &--doc:focus-within &__open {\n            opacity: 1;\n        }\n\n        // Touch devices have no hover: keep the open affordance visible.\n        @media (hover: none) {\n            &--doc &__open {\n                opacity: 1;\n            }\n        }\n\n        // --- Image card ---\n        &--image {\n            display: inline-flex;\n            flex-direction: column;\n            margin: 0;\n        }\n\n        &__thumb-wrap {\n            position: relative;\n            display: flex;\n            // Fixed box: the card claims its final footprint before the\n            // image decodes, so the message log never shifts on load.\n            width: 280px;\n            max-width: 100%;\n            height: 200px;\n            background-color: var(--color-surface);\n            border-radius: var(--file-radius);\n            overflow: hidden;\n        }\n\n        &__thumb-link {\n            display: flex;\n            width: 100%;\n            height: 100%;\n            cursor: pointer;\n        }\n\n        &__thumb {\n            display: block;\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n        }\n\n        &__caption {\n            display: flex;\n            flex-direction: column;\n            gap: 1px;\n            padding: var(--spacing-8);\n            min-width: 0;\n        }\n\n        &__name {\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            font-weight: var(--font-medium, 500);\n            color: var(--color-word-1);\n        }\n\n        &__meta {\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            font-size: var(--text-10);\n            line-height: var(--leading-normal);\n            // Reserve the line even while empty: image dimensions arrive\n            // only after decode and must not grow the caption.\n            min-height: 1.4em;\n            color: var(--color-word-4);\n            // Stable column for the dimensions/size figures.\n            font-variant-numeric: tabular-nums;\n        }\n\n        &__error {\n            display: inline-flex;\n            align-items: center;\n            gap: var(--spacing-4);\n            color: var(--color-danger);\n\n            .vv-icon {\n                flex-shrink: 0;\n            }\n        }\n\n        &__status {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n\n            .vv-icon {\n                width: var(--spacing-32);\n                height: var(--spacing-32);\n            }\n\n            &--overlay {\n                position: absolute;\n                inset: 0;\n                background-color: color-mix(\n                    in srgb,\n                    var(--color-surface-1) 70%,\n                    transparent\n                );\n                color: var(--color-word-1);\n            }\n\n            &--error {\n                color: var(--color-word-4);\n            }\n        }\n\n        // --- Remove button (input context) ---\n        &__remove {\n            position: absolute;\n            top: 0;\n            right: 0;\n            transform: translate(50%, -50%);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            // Visible glyph is 18px but the hit area stays a comfortable 28px.\n            width: var(--spacing-28);\n            height: var(--spacing-28);\n            padding: 0;\n            border: none;\n            border-radius: var(--rounded-full, 9999px);\n            background-color: color-mix(\n                in srgb,\n                var(--color-surface-1) 85%,\n                transparent\n            );\n            color: var(--color-word-2);\n            cursor: pointer;\n            line-height: 1;\n            box-shadow: var(--shadow-sm);\n            transition:\n                background-color 0.18s var(--ease-out),\n                color 0.18s var(--ease-out),\n                scale 0.12s var(--ease-out);\n\n            &:hover {\n                background-color: var(--color-surface-2);\n                color: var(--color-word-1);\n            }\n\n            &:active {\n                scale: 0.96;\n            }\n\n            // Inside the document row the button rides inline, not overlaid\n            // (size is inherited from the base).\n            &--inline {\n                position: static;\n                flex-shrink: 0;\n                box-shadow: none;\n                background-color: transparent;\n                color: var(--color-word-4);\n\n                &:hover {\n                    background-color: var(--color-surface-3);\n                    color: var(--color-word-1);\n                }\n            }\n        }\n\n        // --- Compact (composer) chips ---\n        // ChatGPT/Gemini-style: every attachment is the SAME height and carries\n        // an always-visible round remove control in the top-right corner — no\n        // hover-revealed actions, no size mismatch between image and file chips.\n        &--compact {\n            // Shared chip height so image and file chips align in the row.\n            --chip-size: var(--spacing-56);\n            max-width: 240px;\n\n            &.pk-chatbot-file-preview--image {\n                width: var(--chip-size);\n                height: var(--chip-size);\n                border-radius: var(--rounded-md, 6px);\n            }\n\n            // Fill the square; the root's `overflow: hidden` rounds the corners.\n            .pk-chatbot-file-preview__thumb-wrap,\n            .pk-chatbot-file-preview__thumb-link {\n                width: 100%;\n                height: 100%;\n            }\n\n            &.pk-chatbot-file-preview--doc {\n                height: var(--chip-size);\n                gap: var(--spacing-8);\n                padding: var(--spacing-8);\n                // Reserve room so the corner remove button never overlaps the\n                // name/meta text.\n                padding-inline-end: var(--spacing-28);\n            }\n\n            // Square icon tile that fills the chip height, so file chips read at\n            // the same scale as image thumbnails.\n            .pk-chatbot-file-preview__icon-tile {\n                align-self: stretch;\n                width: auto;\n                height: auto;\n                aspect-ratio: 1;\n            }\n\n            .pk-chatbot-file-preview__icon {\n                width: var(--spacing-20);\n                height: var(--spacing-20);\n            }\n        }\n\n        // Always-visible round remove control in the top-right corner. Sits\n        // just inside the chip (an ancestor clips overflow), bigger than before,\n        // with an extended hit area for easy tapping.\n        &--compact &__remove {\n            top: var(--spacing-4);\n            right: var(--spacing-4);\n            width: var(--spacing-24);\n            height: var(--spacing-24);\n            border: 1px solid var(--color-surface-4);\n            background-color: var(--color-surface);\n            color: var(--color-word-1);\n            font-size: var(--text-16);\n            box-shadow: var(--shadow-sm);\n\n            // Comfortable touch/click target beyond the small visible glyph.\n            &::after {\n                content: '';\n                position: absolute;\n                inset: calc(-1 * var(--spacing-4));\n            }\n\n            &:hover {\n                background-color: var(--color-surface-2);\n                color: var(--color-word-1);\n            }\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n            &--doc,\n            &__open,\n            &__remove {\n                transition: none;\n            }\n        }\n    }\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;gCA6LU,IAAkB;;;;;;;;;;;;;;EAzLxB,IAAM,IAAQ,GAqBR,IAAU,QAAe,EAAM,UAAU,WAAW,QAAQ,CAAC,GAI7D,IAAY,QAAe;GAC7B,IAAM,IAAO,EAAM,YAAY,IACzB,IAAM,EAAK,YAAY,GAAG;GAChC,OAAO,IAAM,IAAI,EAAK,MAAM,IAAM,CAAC,CAAC,CAAC,YAAY,IAAI;EACzD,CAAC,GAGK,IAAU,QACN,EAAM,UAAU,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC,MAAM,EAC1D,GASM,IAAiD;GACnD;IACI,MAAM;IACN,MAAM;KACF,MAAM;KACN,QAAQ;KACR,OAAO;IACX;GACJ;GACA;IAII,MAAM;IACN,MAAM;KACF,MAAM;KACN,QAAQ;KACR,OAAO;IACX;GACJ;GACA;IACI,MAAM;IACN,MAAM;KACF,MAAM;KACN,QAAQ;KACR,OAAO;IACX;GACJ;GACA;IACI,MAAM;IACN,MAAM;KACF,MAAM;KACN,QAAQ;KACR,OAAO;IACX;GACJ;GACA;IACI,MAAM;IACN,MAAM;KACF,MAAM;KACN,QAAQ;KACR,OAAO;IACX;GACJ;GACA;IACI,MAAM;IACN,MAAM;KACF,MAAM;KACN,QAAQ;KACR,OAAO;IACX;GACJ;GACA;IACI,MAAM;IACN,MAAM;KACF,MAAM;KACN,QAAQ;KACR,OAAO;IACX;GACJ;GACA;IACI,MAAM;IACN,MAAM;KACF,MAAM;KACN,QAAQ;KACR,OAAO;IACX;GACJ;GACA;IACI,MAAM;IACN,MAAM;KACF,MAAM;KACN,QAAQ;KACR,OAAO;IACX;GACJ;EACJ,GAEM,IAAW,QAAyB;GACtC,IAAM,IAAW,GAAG,EAAM,UAAU,GAAG,EAAU;GACjD,KAAK,IAAM,EAAE,SAAM,aAAU,GACzB,IAAI,EAAK,KAAK,CAAQ,GAClB,OAAO;GAGf,OAAO;IACH,MAAM;IACN,QAAQ;IACR,OAAO;GACX;EACJ,CAAC,GAIK,IAAU,SAER,EAAU,SACV,EAAQ,SACR,EAAS,MAAM,MAAA,CACjB,YAAY,CAClB,GAIM,IAAgB,QAAe;GACjC,IAAM,IAAQ,EAAM;GACpB,IAAI,MAAU,KAAA,KAAa,IAAQ,GAC/B;GAEJ,IAAI,IAAQ,MACR,OAAO,GAAG,EAAM;GAEpB,IAAM,IAAQ;IAAC;IAAM;IAAM;IAAM;GAAI,GACjC,IAAQ,IAAQ,MAChB,IAAY;GAChB,OAAO,KAAS,QAAQ,IAAY,EAAM,SAAS,IAE/C,AADA,KAAS,MACT,KAAa;GAEjB,OAAO,GAAG,IAAQ,KAAK,EAAM,QAAQ,CAAC,IAAI,KAAK,MAAM,CAAK,EAAE,GAAG,EAAM;EACzE,CAAC,GAuBK,oBAAa,IAAI,IAAwB,GACzC,KAAiB,GAAa,MAAsB;GAItD,AAFA,EAAW,OAAO,CAAG,GACrB,EAAW,IAAI,GAAK,CAAK,GACrB,EAAW,OAAO,KAClB,EAAW,OAAO,EAAW,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAe;EAElE,GAEM,IAAS,EAAW,IAAI,EAAM,GAAG,GACjC,IAAc,EAAiB,GAAQ,UAAU,SAAS,GAI1D,IAAa,EACf,GAAQ,UACZ,GACM,KAAe,MAAiB;GAClC,IAAM,IAAM,EAAM;GAQlB,AAPI,EAAI,gBAAgB,EAAI,kBACxB,EAAW,QAAQ;IACf,OAAO,EAAI;IACX,QAAQ,EAAI;GAChB,IAEJ,EAAY,QAAQ,UACpB,EAAc,EAAM,KAAK;IACrB,QAAQ;IACR,YAAY,EAAW;GAC3B,CAAC;EACL,GACM,UAAqB;GAEvB,AADA,EAAY,QAAQ,SACpB,EAAc,EAAM,KAAK,EAAE,QAAQ,QAAQ,CAAC;EAChD,GAEM,IAAW,QAAe,EAAW,SAAS,EAAiB,GAG/D,IAAY,QACd,CACI,EAAW,SACP,GAAG,EAAW,MAAM,MAAM,GAAG,EAAW,MAAM,UAClD,EAAc,KAClB,CAAC,CAAC,OAAO,OAAO,CACpB,GACM,IAAU,QACZ,CAAC,EAAQ,OAAO,EAAc,KAAK,CAAC,CAAC,OAAO,OAAO,CACvD,GAKM,KAAoB;GAAE,OAAO;GAAM,QAAQ;EAAI,GAE/C,IAAa,EAAiB,GAC9B,EAAE,aAAS,EAAY;GAAE,SAAS;GAAY,MAAM;EAAM,CAAC;SAEjE,EAAU,YAAY;GACb,EAAQ,SAGb,MAAM,GAAK;EACf,CAAC;;UAMS,EAAA,SAAA,EAAA,GADV,EAgES,UAAA;;IA9DL,OAAK,EAAA,CAAC,0DAAwD,EAAA,oCAChB,EAAA,QAAO,CAAA,CAAA;;IACrD,EAgCM,OAAA;cAhCG;KAAJ,KAAI;KAAa,OAAM;QACxB,EAgBI,KAAA;KAfC,MAAM,EAAA;KACN,iBAAe,EAAA;KACf,mBAAiB,EAAA,MAAS;KAC1B,oBAAkB,EAAA,MAAS;KAC3B,qBAAmB,EAAA,YAAQ;KAC5B,OAAM;KACL,cAAY,EAAA,YAAYA,EAAAA,GAAE,YAAA;UAC3B,EAO4B,OAAA;KALvB,KAAK,EAAA;KACL,KAAK,EAAA;KACN,UAAS;KACT,OAAM;KACL,QAAM;KACN,SAAO;0BANA,EAAA,UAAW,QAAA,CAAA,CAAA,CAAA,GAAA,GAAA,CAAA,GAWjB,EAAA,WAAW,EAAA,UAAW,aAAA,EAAA,GADhC,EAIO,QAJP,GAIO,CADH,EAAsC,GAAA,EAA9B,MAAK,uBAAsB,CAAA,CAAA,CAAA,KAKxB,EAAA,UAAW,WAAA,EAAA,GAD1B,EAIO,QAJP,GAIO,CADH,EAAiC,GAAA,EAAzB,MAAK,kBAAiB,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,GAAA;IAGnB,EAAA,UAeuB,EAAA,IAAA,EAAA,KAfvB,EAAA,GAAnB,EAiBa,cAjBb,GAiBa,CAfC,EAAA,YAAA,EAAA,GADV,EAKC,QAAA;;KAHG,OAAM;KACL,OAAO,EAAA;SACJ,EAAA,QAAQ,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAEhB,EASO,QATP,GASO,CAPO,EAAA,SAAA,EAAA,GADV,EAMO,QAAA;;KAJH,OAAM;KACL,OAAO,EAAA;QACR,EAAuC,GAAA,EAA/B,MAAK,wBAAuB,CAAA,GAAA,EAAG,MACvC,EAAG,EAAA,KAAK,GAAA,CAAA,CAAA,GAAA,GAAA,CAAA,MAAA,EAAA,GAEZ,EAAuD,GAAA,EAAA,KAAA,EAAA,GAAA,CAAA,EAAA,EAAnC,EAAA,MAAU,KAAI,KAAA,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA,CAAA,CAAA;IAIhC,EAAA,aAAS,CAAK,EAAA,WAAA,EAAA,GADxB,EAQS,UAAA;;KANL,MAAK;KACL,OAAM;KACL,OAAOA,EAAAA,GAAE,eAAA;KACT,cAAYA,EAAAA,GAAE,eAAA;KACd,SAAK,AAAA,EAAA,OAAA,GAAA,MAAUC,EAAAA,MAAK,QAAA,GAAA,CAAA,SAAA,CAAA;QACrB,EAA+B,GAAA,EAAvB,MAAK,gBAAe,CAAA,CAAA,GAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA;kBAKpC,EAyDM,OAAA;;IAvDF,OAAK,EAAA,CAAC,wDAAsD;uCACJ,EAAA;yCAAuD,EAAA;;;IAI/G,EAWO,QAAA;KAVH,OAAM;KACL,OAAK,EAAA,EAAA,iBAAqB,EAAA,MAAS,OAAM,CAAA;QAEhC,EAAA,WAAA,EAAA,GADV,EAG4C,GAAA;;KADxC,MAAK;KACL,OAAM;gBACV,EAG4C,GAAA;;KADvC,MAAM,EAAA,MAAS;KAChB,OAAM;;IAEd,EAiBO,QAjBP,GAiBO,CAfO,EAAA,YAAA,EAAA,GADV,EAKC,QAAA;;KAHG,OAAM;KACL,OAAO,EAAA;SACJ,EAAA,QAAQ,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAEhB,EASO,QATP,GASO,CAPO,EAAA,SAAA,EAAA,GADV,EAMO,QAAA;;KAJH,OAAM;KACL,OAAO,EAAA;QACR,EAAuC,GAAA,EAA/B,MAAK,wBAAuB,CAAA,GAAA,EAAG,MACvC,EAAG,EAAA,KAAK,GAAA,CAAA,CAAA,GAAA,GAAA,CAAA,MAAA,EAAA,GAEZ,EAAqD,GAAA,EAAA,KAAA,EAAA,GAAA,CAAA,EAAA,EAAjC,EAAA,MAAQ,KAAI,KAAA,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA,CAAA,CAAA;KAI7B,EAAA,WAAO,CAAK,EAAA,SAAK,CAAK,EAAA,WAAA,EAAA,GADjC,EASI,KAAA;;KAPC,MAAM,EAAA;KACP,QAAO;KACP,KAAI;KACJ,OAAM;KACL,OAAOD,EAAAA,GAAE,iBAAA;KACT,cAAU,GAAKA,EAAAA,GAAE,iBAAA,IAAsB,EAAA,WAAQ,MAAS,EAAA,aAAQ;QACjE,EAAoC,GAAA,EAA5B,MAAK,qBAAoB,CAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAG3B,EAAA,aAAS,CAAK,EAAA,WAAA,EAAA,GADxB,EASS,UAAA;;KAPL,MAAK;KACL,OAAK,EAAA,CAAC,mCAAiC,EAAA,2CAAA,CACe,EAAA,QAAO,CAAA,CAAA;KAC5D,OAAOA,EAAAA,GAAE,eAAA;KACT,cAAYA,EAAAA,GAAE,eAAA;KACd,SAAK,AAAA,EAAA,QAAA,MAAEC,EAAAA,MAAK,QAAA;QACb,EAA+B,GAAA,EAAvB,MAAK,gBAAe,CAAA,CAAA,GAAA,IAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}
+{"version":3,"file":"PkChatbotFilePreview-DyrszALJ.js","names":["$t","$emit"],"sources":["../../../../packages/components/src/chat/PkChatbotFilePreview.vue","../../../../packages/components/src/chat/PkChatbotFilePreview.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n    import { computed, ref, onMounted } from 'vue'\n    import { useLightbox } from '../composables/useLightbox'\n\n    const props = defineProps<{\n        mediaType: string\n        url: string\n        filename?: string\n        /** Size in bytes, when known (e.g. local uploads). */\n        size?: number\n        loading?: boolean\n        error?: string\n        removable?: boolean\n        /**\n         * Dense layout for the composer: a small square thumbnail / slim row,\n         * without the metadata caption. The full card is reserved for the\n         * message log where the details matter.\n         */\n        compact?: boolean\n    }>()\n\n    defineEmits<{\n        remove: []\n    }>()\n\n    const isImage = computed(() => props.mediaType.startsWith('image/'))\n\n    // --- File-type identity (icon + accent + human kind label) ---\n\n    const extension = computed(() => {\n        const name = props.filename ?? ''\n        const dot = name.lastIndexOf('.')\n        return dot > 0 ? name.slice(dot + 1).toLowerCase() : ''\n    })\n\n    // mediaType subtype, e.g. \"pdf\" from \"application/pdf\"\n    const subtype = computed(\n        () => props.mediaType.split('/')[1]?.split(';')[0] ?? '',\n    )\n\n    type FileKind = {\n        icon: string\n        // CSS color driving the icon glyph + tile tint\n        accent: string\n        label: string\n    }\n\n    const KINDS: Array<{ test: RegExp; kind: FileKind }> = [\n        {\n            test: /pdf/,\n            kind: {\n                icon: 'ri:file-pdf-2-line',\n                accent: '#e2483d',\n                label: 'PDF',\n            },\n        },\n        {\n            // Match Word specifically: the generic `document` substring also\n            // appears in the XLSX/PPTX OOXML mime types (…officedocument…), so\n            // matching it here would mis-label spreadsheets/decks as Word.\n            test: /msword|wordprocessingml/,\n            kind: {\n                icon: 'ri:file-word-2-line',\n                accent: '#2b7de9',\n                label: 'Word',\n            },\n        },\n        {\n            test: /sheet|excel|csv/,\n            kind: {\n                icon: 'ri:file-excel-2-line',\n                accent: '#1f9d57',\n                label: 'Spreadsheet',\n            },\n        },\n        {\n            test: /presentation|powerpoint/,\n            kind: {\n                icon: 'ri:file-ppt-2-line',\n                accent: '#d98324',\n                label: 'Presentation',\n            },\n        },\n        {\n            test: /zip|compressed|x-7z|x-rar|x-tar|gzip/,\n            kind: {\n                icon: 'ri:file-zip-line',\n                accent: '#c08a1e',\n                label: 'Archive',\n            },\n        },\n        {\n            test: /^audio\\//,\n            kind: {\n                icon: 'ri:file-music-line',\n                accent: '#8b5cf6',\n                label: 'Audio',\n            },\n        },\n        {\n            test: /^video\\//,\n            kind: {\n                icon: 'ri:film-line',\n                accent: '#6366f1',\n                label: 'Video',\n            },\n        },\n        {\n            test: /json|javascript|typescript|xml|html|x-sh|x-python/,\n            kind: {\n                icon: 'ri:file-code-line',\n                accent: '#0d9488',\n                label: 'Code',\n            },\n        },\n        {\n            test: /^text\\//,\n            kind: {\n                icon: 'ri:file-text-line',\n                accent: '#64748b',\n                label: 'Text',\n            },\n        },\n    ]\n\n    const fileKind = computed<FileKind>(() => {\n        const haystack = `${props.mediaType} ${extension.value}`\n        for (const { test, kind } of KINDS) {\n            if (test.test(haystack)) {\n                return kind\n            }\n        }\n        return {\n            icon: 'ri:file-line',\n            accent: '#64748b',\n            label: 'File',\n        }\n    })\n\n    // Short type tag shown in the meta line: prefer the real extension, fall\n    // back to the mime subtype, then the generic kind label.\n    const typeTag = computed(() =>\n        (\n            extension.value ||\n            subtype.value ||\n            fileKind.value.label\n        ).toUpperCase(),\n    )\n\n    // --- Size & dimensions ---\n\n    const formattedSize = computed(() => {\n        const bytes = props.size\n        if (bytes === undefined || bytes < 0) {\n            return undefined\n        }\n        if (bytes < 1024) {\n            return `${bytes} B`\n        }\n        const units = ['KB', 'MB', 'GB', 'TB']\n        let value = bytes / 1024\n        let unitIndex = 0\n        while (value >= 1024 && unitIndex < units.length - 1) {\n            value /= 1024\n            unitIndex += 1\n        }\n        return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unitIndex]}`\n    })\n\n    // Thumbnail load lifecycle. Driving the spinner and the error fallback\n    // off the real <img> events (not a second background fetch) means the\n    // image is requested exactly once and reuses the browser cache on any\n    // later re-render, instead of re-downloading every time the message list\n    // repaints.\n    // Not `useImageFallback`: this tile also needs `loading` vs `loaded` and the\n    // decoded dimensions, cached across remounts, so the error flag is one field\n    // of a richer per-url entry rather than a standalone broken-url set.\n    type ThumbStatus = 'loading' | 'loaded' | 'error'\n\n    // Module-level, keyed by URL: survives component recreation. In polled\n    // views (e.g. admin chat-logs, refreshed every few seconds) the whole\n    // message array is replaced on each poll, so this component can be torn\n    // down and rebuilt. Seeding from the cache means a URL that already\n    // decoded starts in `loaded` (no spinner flash, no re-decode) instead of\n    // flickering back through `loading`. This is a client-side, per-session\n    // cache (no server/Redis involved); bounded to a max size so a long-lived\n    // session browsing many images can't grow it without limit — the oldest\n    // entry is evicted first (Map preserves insertion order).\n    type ThumbEntry = {\n        status: ThumbStatus\n        dimensions?: { width: number; height: number }\n    }\n    const THUMB_CACHE_MAX = 300\n    const thumbCache = new Map<string, ThumbEntry>()\n    const setThumbCache = (url: string, entry: ThumbEntry) => {\n        // Re-insert to mark as most-recently used, then trim from the front.\n        thumbCache.delete(url)\n        thumbCache.set(url, entry)\n        if (thumbCache.size > THUMB_CACHE_MAX) {\n            thumbCache.delete(thumbCache.keys().next().value as string)\n        }\n    }\n\n    const cached = thumbCache.get(props.url)\n    const thumbStatus = ref<ThumbStatus>(cached?.status ?? 'loading')\n\n    // Natural pixel dimensions, captured once the thumbnail decodes. Doubles\n    // as the size hint PhotoSwipe needs for its slide (falls back until known).\n    const dimensions = ref<{ width: number; height: number } | undefined>(\n        cached?.dimensions,\n    )\n    const onImageLoad = (event: Event) => {\n        const img = event.target as HTMLImageElement\n        if (img.naturalWidth && img.naturalHeight) {\n            dimensions.value = {\n                width: img.naturalWidth,\n                height: img.naturalHeight,\n            }\n        }\n        thumbStatus.value = 'loaded'\n        setThumbCache(props.url, {\n            status: 'loaded',\n            dimensions: dimensions.value,\n        })\n    }\n    const onImageError = () => {\n        thumbStatus.value = 'error'\n        setThumbCache(props.url, { status: 'error' })\n    }\n\n    const pswpSize = computed(() => dimensions.value ?? DEFAULT_PSWP_SIZE)\n\n    // Meta fragments joined with \" · \" for the caption / doc subtitle.\n    const imageMeta = computed(() =>\n        [\n            dimensions.value &&\n                `${dimensions.value.width}×${dimensions.value.height}`,\n            formattedSize.value,\n        ].filter(Boolean),\n    )\n    const docMeta = computed(() =>\n        [typeTag.value, formattedSize.value].filter(Boolean),\n    )\n\n    // --- Lightbox ---\n\n    // Slide size PhotoSwipe assumes before the real dimensions are known.\n    const DEFAULT_PSWP_SIZE = { width: 1200, height: 800 }\n\n    const galleryRef = ref<HTMLElement>()\n    const { init } = useLightbox({ gallery: galleryRef, loop: false })\n\n    onMounted(async () => {\n        if (!isImage.value) {\n            return\n        }\n        await init()\n    })\n</script>\n\n<template>\n    <!-- Image attachment: a thumbnail tile with a metadata caption -->\n    <figure\n        v-if=\"isImage\"\n        class=\"pk-chatbot-file-preview pk-chatbot-file-preview--image\"\n        :class=\"{ 'pk-chatbot-file-preview--compact': compact }\">\n        <div ref=\"galleryRef\" class=\"pk-chatbot-file-preview__thumb-wrap\">\n            <a\n                :href=\"url\"\n                :data-pswp-src=\"url\"\n                :data-pswp-width=\"pswpSize.width\"\n                :data-pswp-height=\"pswpSize.height\"\n                :data-pswp-caption=\"filename ?? ''\"\n                class=\"pk-chatbot-file-preview__thumb-link\"\n                :aria-label=\"filename ?? $t('label.file')\">\n                <img\n                    v-show=\"thumbStatus === 'loaded'\"\n                    :src=\"url\"\n                    :alt=\"filename\"\n                    decoding=\"async\"\n                    class=\"pk-chatbot-file-preview__thumb\"\n                    @load=\"onImageLoad\"\n                    @error=\"onImageError\" />\n            </a>\n            <!-- Spinner until the thumbnail decodes (or while an upload is in\n                 flight); a fixed box keeps this from shifting the layout. -->\n            <span\n                v-if=\"loading || thumbStatus === 'loading'\"\n                class=\"pk-chatbot-file-preview__status pk-chatbot-file-preview__status--overlay\">\n                <VvIcon name=\"line-md:loading-loop\" />\n            </span>\n            <!-- Failed to load: a quiet icon instead of the browser's broken\n                 image glyph. -->\n            <span\n                v-else-if=\"thumbStatus === 'error'\"\n                class=\"pk-chatbot-file-preview__status pk-chatbot-file-preview__status--overlay pk-chatbot-file-preview__status--error\">\n                <VvIcon name=\"ri:image-2-line\" />\n            </span>\n        </div>\n        <figcaption v-if=\"!compact\" class=\"pk-chatbot-file-preview__caption\">\n            <span\n                v-if=\"filename\"\n                class=\"pk-chatbot-file-preview__name\"\n                :title=\"filename\"\n                >{{ filename }}</span\n            >\n            <span class=\"pk-chatbot-file-preview__meta\">\n                <span\n                    v-if=\"error\"\n                    class=\"pk-chatbot-file-preview__error\"\n                    :title=\"error\">\n                    <VvIcon name=\"ri:error-warning-line\" />\n                    {{ error }}\n                </span>\n                <template v-else>{{ imageMeta.join(' · ') }}</template>\n            </span>\n        </figcaption>\n        <button\n            v-if=\"removable && !loading\"\n            type=\"button\"\n            class=\"pk-chatbot-file-preview__remove\"\n            :title=\"$t('action.remove')\"\n            :aria-label=\"$t('action.remove')\"\n            @click.prevent=\"$emit('remove')\">\n            <VvIcon name=\"ri:close-line\" />\n        </button>\n    </figure>\n\n    <!-- Document attachment: an icon tile + name + type · size -->\n    <div\n        v-else\n        class=\"pk-chatbot-file-preview pk-chatbot-file-preview--doc\"\n        :class=\"{\n            'pk-chatbot-file-preview--error': error,\n            'pk-chatbot-file-preview--compact': compact,\n        }\">\n        <span\n            class=\"pk-chatbot-file-preview__icon-tile\"\n            :style=\"{ '--file-accent': fileKind.accent }\">\n            <VvIcon\n                v-if=\"loading\"\n                name=\"line-md:loading-loop\"\n                class=\"pk-chatbot-file-preview__icon\" />\n            <VvIcon\n                v-else\n                :name=\"fileKind.icon\"\n                class=\"pk-chatbot-file-preview__icon\" />\n        </span>\n        <span class=\"pk-chatbot-file-preview__body\">\n            <span\n                v-if=\"filename\"\n                class=\"pk-chatbot-file-preview__name\"\n                :title=\"filename\"\n                >{{ filename }}</span\n            >\n            <span class=\"pk-chatbot-file-preview__meta\">\n                <span\n                    v-if=\"error\"\n                    class=\"pk-chatbot-file-preview__error\"\n                    :title=\"error\">\n                    <VvIcon name=\"ri:error-warning-line\" />\n                    {{ error }}\n                </span>\n                <template v-else>{{ docMeta.join(' · ') }}</template>\n            </span>\n        </span>\n        <a\n            v-if=\"!loading && !error && !compact\"\n            :href=\"url\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            class=\"pk-chatbot-file-preview__open\"\n            :title=\"$t('action.download')\"\n            :aria-label=\"`${$t('action.download')}${filename ? ` — ${filename}` : ''}`\">\n            <VvIcon name=\"ri:download-2-line\" />\n        </a>\n        <button\n            v-if=\"removable && !loading\"\n            type=\"button\"\n            class=\"pk-chatbot-file-preview__remove\"\n            :class=\"{ 'pk-chatbot-file-preview__remove--inline': !compact }\"\n            :title=\"$t('action.remove')\"\n            :aria-label=\"$t('action.remove')\"\n            @click=\"$emit('remove')\">\n            <VvIcon name=\"ri:close-line\" />\n        </button>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-file-preview {\n        // Concentric radii: outer card and inner tiles share an 8px step.\n        --file-radius: var(--rounded-lg, 12px);\n        position: relative;\n        max-width: 280px;\n        background-color: var(--color-surface-1);\n        border: 1px solid var(--color-surface-3);\n        border-radius: var(--file-radius);\n        color: var(--color-word-2);\n        font-size: var(--text-12);\n\n        &--error {\n            border-color: var(--color-danger);\n        }\n\n        // --- Document card ---\n        &--doc {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-8);\n            padding: var(--spacing-8);\n            min-width: 0;\n            transition:\n                border-color 0.18s var(--ease-out),\n                background-color 0.18s var(--ease-out),\n                box-shadow 0.18s var(--ease-out);\n\n            &:hover {\n                border-color: var(--color-surface-4);\n                background-color: var(--color-surface-2);\n                box-shadow: var(--shadow-sm);\n            }\n        }\n\n        &__icon-tile {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n            width: var(--spacing-36);\n            height: var(--spacing-36);\n            // One step down from the card radius keeps the nested tile concentric.\n            border-radius: var(--rounded-md, 6px);\n            // Tint derived from the file-type accent; glyph sits at full accent.\n            background-color: color-mix(\n                in srgb,\n                var(--file-accent) 14%,\n                transparent\n            );\n            color: var(--file-accent);\n        }\n\n        &__icon {\n            width: var(--spacing-20);\n            height: var(--spacing-20);\n        }\n\n        &__body {\n            display: flex;\n            flex-direction: column;\n            gap: 1px;\n            min-width: 0;\n            flex: 1;\n        }\n\n        &__open {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n            width: var(--spacing-28);\n            height: var(--spacing-28);\n            margin-inline-start: var(--spacing-4);\n            border-radius: var(--rounded);\n            color: var(--color-word-3);\n            text-decoration: none;\n            opacity: 0;\n            transition:\n                opacity 0.18s var(--ease-out),\n                color 0.18s var(--ease-out),\n                background-color 0.18s var(--ease-out);\n\n            &:hover {\n                background-color: var(--color-surface-3);\n                color: var(--color-word-1);\n            }\n        }\n\n        &--doc:hover &__open,\n        &--doc:focus-within &__open {\n            opacity: 1;\n        }\n\n        // Touch devices have no hover: keep the open affordance visible.\n        @media (hover: none) {\n            &--doc &__open {\n                opacity: 1;\n            }\n        }\n\n        // --- Image card ---\n        &--image {\n            display: inline-flex;\n            flex-direction: column;\n            margin: 0;\n        }\n\n        &__thumb-wrap {\n            position: relative;\n            display: flex;\n            // Fixed box: the card claims its final footprint before the\n            // image decodes, so the message log never shifts on load.\n            width: 280px;\n            max-width: 100%;\n            height: 200px;\n            background-color: var(--color-surface);\n            border-radius: var(--file-radius);\n            overflow: hidden;\n        }\n\n        &__thumb-link {\n            display: flex;\n            width: 100%;\n            height: 100%;\n            cursor: pointer;\n        }\n\n        &__thumb {\n            display: block;\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n        }\n\n        &__caption {\n            display: flex;\n            flex-direction: column;\n            gap: 1px;\n            padding: var(--spacing-8);\n            min-width: 0;\n        }\n\n        &__name {\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            font-weight: var(--font-medium, 500);\n            color: var(--color-word-1);\n        }\n\n        &__meta {\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            font-size: var(--text-10);\n            line-height: var(--leading-normal);\n            // Reserve the line even while empty: image dimensions arrive\n            // only after decode and must not grow the caption.\n            min-height: 1.4em;\n            color: var(--color-word-4);\n            // Stable column for the dimensions/size figures.\n            font-variant-numeric: tabular-nums;\n        }\n\n        &__error {\n            display: inline-flex;\n            align-items: center;\n            gap: var(--spacing-4);\n            color: var(--color-danger);\n\n            .vv-icon {\n                flex-shrink: 0;\n            }\n        }\n\n        &__status {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n\n            .vv-icon {\n                width: var(--spacing-32);\n                height: var(--spacing-32);\n            }\n\n            &--overlay {\n                position: absolute;\n                inset: 0;\n                background-color: color-mix(\n                    in srgb,\n                    var(--color-surface-1) 70%,\n                    transparent\n                );\n                color: var(--color-word-1);\n            }\n\n            &--error {\n                color: var(--color-word-4);\n            }\n        }\n\n        // --- Remove button (input context) ---\n        &__remove {\n            position: absolute;\n            top: 0;\n            right: 0;\n            transform: translate(50%, -50%);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            // Visible glyph is 18px but the hit area stays a comfortable 28px.\n            width: var(--spacing-28);\n            height: var(--spacing-28);\n            padding: 0;\n            border: none;\n            border-radius: var(--rounded-full, 9999px);\n            background-color: color-mix(\n                in srgb,\n                var(--color-surface-1) 85%,\n                transparent\n            );\n            color: var(--color-word-2);\n            cursor: pointer;\n            line-height: 1;\n            box-shadow: var(--shadow-sm);\n            transition:\n                background-color 0.18s var(--ease-out),\n                color 0.18s var(--ease-out),\n                scale 0.12s var(--ease-out);\n\n            &:hover {\n                background-color: var(--color-surface-2);\n                color: var(--color-word-1);\n            }\n\n            &:active {\n                scale: 0.96;\n            }\n\n            // Inside the document row the button rides inline, not overlaid\n            // (size is inherited from the base).\n            &--inline {\n                position: static;\n                flex-shrink: 0;\n                box-shadow: none;\n                background-color: transparent;\n                color: var(--color-word-4);\n\n                &:hover {\n                    background-color: var(--color-surface-3);\n                    color: var(--color-word-1);\n                }\n            }\n        }\n\n        // --- Compact (composer) chips ---\n        // ChatGPT/Gemini-style: every attachment is the SAME height and carries\n        // an always-visible round remove control in the top-right corner — no\n        // hover-revealed actions, no size mismatch between image and file chips.\n        &--compact {\n            // Shared chip height so image and file chips align in the row.\n            --chip-size: var(--spacing-56);\n            max-width: 240px;\n\n            &.pk-chatbot-file-preview--image {\n                width: var(--chip-size);\n                height: var(--chip-size);\n                border-radius: var(--rounded-md, 6px);\n            }\n\n            // Fill the square; the root's `overflow: hidden` rounds the corners.\n            .pk-chatbot-file-preview__thumb-wrap,\n            .pk-chatbot-file-preview__thumb-link {\n                width: 100%;\n                height: 100%;\n            }\n\n            &.pk-chatbot-file-preview--doc {\n                height: var(--chip-size);\n                gap: var(--spacing-8);\n                padding: var(--spacing-8);\n                // Reserve room so the corner remove button never overlaps the\n                // name/meta text.\n                padding-inline-end: var(--spacing-28);\n            }\n\n            // Square icon tile that fills the chip height, so file chips read at\n            // the same scale as image thumbnails.\n            .pk-chatbot-file-preview__icon-tile {\n                align-self: stretch;\n                width: auto;\n                height: auto;\n                aspect-ratio: 1;\n            }\n\n            .pk-chatbot-file-preview__icon {\n                width: var(--spacing-20);\n                height: var(--spacing-20);\n            }\n        }\n\n        // Always-visible round remove control in the top-right corner. Sits\n        // just inside the chip (an ancestor clips overflow), bigger than before,\n        // with an extended hit area for easy tapping.\n        &--compact &__remove {\n            top: var(--spacing-4);\n            right: var(--spacing-4);\n            width: var(--spacing-24);\n            height: var(--spacing-24);\n            border: 1px solid var(--color-surface-4);\n            background-color: var(--color-surface);\n            color: var(--color-word-1);\n            font-size: var(--text-16);\n            box-shadow: var(--shadow-sm);\n\n            // Comfortable touch/click target beyond the small visible glyph.\n            &::after {\n                content: '';\n                position: absolute;\n                inset: calc(-1 * var(--spacing-4));\n            }\n\n            &:hover {\n                background-color: var(--color-surface-2);\n                color: var(--color-word-1);\n            }\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n            &--doc,\n            &__open,\n            &__remove {\n                transition: none;\n            }\n        }\n    }\n</style>\n","<script lang=\"ts\" setup>\n    import { computed, ref, onMounted } from 'vue'\n    import { useLightbox } from '../composables/useLightbox'\n\n    const props = defineProps<{\n        mediaType: string\n        url: string\n        filename?: string\n        /** Size in bytes, when known (e.g. local uploads). */\n        size?: number\n        loading?: boolean\n        error?: string\n        removable?: boolean\n        /**\n         * Dense layout for the composer: a small square thumbnail / slim row,\n         * without the metadata caption. The full card is reserved for the\n         * message log where the details matter.\n         */\n        compact?: boolean\n    }>()\n\n    defineEmits<{\n        remove: []\n    }>()\n\n    const isImage = computed(() => props.mediaType.startsWith('image/'))\n\n    // --- File-type identity (icon + accent + human kind label) ---\n\n    const extension = computed(() => {\n        const name = props.filename ?? ''\n        const dot = name.lastIndexOf('.')\n        return dot > 0 ? name.slice(dot + 1).toLowerCase() : ''\n    })\n\n    // mediaType subtype, e.g. \"pdf\" from \"application/pdf\"\n    const subtype = computed(\n        () => props.mediaType.split('/')[1]?.split(';')[0] ?? '',\n    )\n\n    type FileKind = {\n        icon: string\n        // CSS color driving the icon glyph + tile tint\n        accent: string\n        label: string\n    }\n\n    const KINDS: Array<{ test: RegExp; kind: FileKind }> = [\n        {\n            test: /pdf/,\n            kind: {\n                icon: 'ri:file-pdf-2-line',\n                accent: '#e2483d',\n                label: 'PDF',\n            },\n        },\n        {\n            // Match Word specifically: the generic `document` substring also\n            // appears in the XLSX/PPTX OOXML mime types (…officedocument…), so\n            // matching it here would mis-label spreadsheets/decks as Word.\n            test: /msword|wordprocessingml/,\n            kind: {\n                icon: 'ri:file-word-2-line',\n                accent: '#2b7de9',\n                label: 'Word',\n            },\n        },\n        {\n            test: /sheet|excel|csv/,\n            kind: {\n                icon: 'ri:file-excel-2-line',\n                accent: '#1f9d57',\n                label: 'Spreadsheet',\n            },\n        },\n        {\n            test: /presentation|powerpoint/,\n            kind: {\n                icon: 'ri:file-ppt-2-line',\n                accent: '#d98324',\n                label: 'Presentation',\n            },\n        },\n        {\n            test: /zip|compressed|x-7z|x-rar|x-tar|gzip/,\n            kind: {\n                icon: 'ri:file-zip-line',\n                accent: '#c08a1e',\n                label: 'Archive',\n            },\n        },\n        {\n            test: /^audio\\//,\n            kind: {\n                icon: 'ri:file-music-line',\n                accent: '#8b5cf6',\n                label: 'Audio',\n            },\n        },\n        {\n            test: /^video\\//,\n            kind: {\n                icon: 'ri:film-line',\n                accent: '#6366f1',\n                label: 'Video',\n            },\n        },\n        {\n            test: /json|javascript|typescript|xml|html|x-sh|x-python/,\n            kind: {\n                icon: 'ri:file-code-line',\n                accent: '#0d9488',\n                label: 'Code',\n            },\n        },\n        {\n            test: /^text\\//,\n            kind: {\n                icon: 'ri:file-text-line',\n                accent: '#64748b',\n                label: 'Text',\n            },\n        },\n    ]\n\n    const fileKind = computed<FileKind>(() => {\n        const haystack = `${props.mediaType} ${extension.value}`\n        for (const { test, kind } of KINDS) {\n            if (test.test(haystack)) {\n                return kind\n            }\n        }\n        return {\n            icon: 'ri:file-line',\n            accent: '#64748b',\n            label: 'File',\n        }\n    })\n\n    // Short type tag shown in the meta line: prefer the real extension, fall\n    // back to the mime subtype, then the generic kind label.\n    const typeTag = computed(() =>\n        (\n            extension.value ||\n            subtype.value ||\n            fileKind.value.label\n        ).toUpperCase(),\n    )\n\n    // --- Size & dimensions ---\n\n    const formattedSize = computed(() => {\n        const bytes = props.size\n        if (bytes === undefined || bytes < 0) {\n            return undefined\n        }\n        if (bytes < 1024) {\n            return `${bytes} B`\n        }\n        const units = ['KB', 'MB', 'GB', 'TB']\n        let value = bytes / 1024\n        let unitIndex = 0\n        while (value >= 1024 && unitIndex < units.length - 1) {\n            value /= 1024\n            unitIndex += 1\n        }\n        return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unitIndex]}`\n    })\n\n    // Thumbnail load lifecycle. Driving the spinner and the error fallback\n    // off the real <img> events (not a second background fetch) means the\n    // image is requested exactly once and reuses the browser cache on any\n    // later re-render, instead of re-downloading every time the message list\n    // repaints.\n    // Not `useImageFallback`: this tile also needs `loading` vs `loaded` and the\n    // decoded dimensions, cached across remounts, so the error flag is one field\n    // of a richer per-url entry rather than a standalone broken-url set.\n    type ThumbStatus = 'loading' | 'loaded' | 'error'\n\n    // Module-level, keyed by URL: survives component recreation. In polled\n    // views (e.g. admin chat-logs, refreshed every few seconds) the whole\n    // message array is replaced on each poll, so this component can be torn\n    // down and rebuilt. Seeding from the cache means a URL that already\n    // decoded starts in `loaded` (no spinner flash, no re-decode) instead of\n    // flickering back through `loading`. This is a client-side, per-session\n    // cache (no server/Redis involved); bounded to a max size so a long-lived\n    // session browsing many images can't grow it without limit — the oldest\n    // entry is evicted first (Map preserves insertion order).\n    type ThumbEntry = {\n        status: ThumbStatus\n        dimensions?: { width: number; height: number }\n    }\n    const THUMB_CACHE_MAX = 300\n    const thumbCache = new Map<string, ThumbEntry>()\n    const setThumbCache = (url: string, entry: ThumbEntry) => {\n        // Re-insert to mark as most-recently used, then trim from the front.\n        thumbCache.delete(url)\n        thumbCache.set(url, entry)\n        if (thumbCache.size > THUMB_CACHE_MAX) {\n            thumbCache.delete(thumbCache.keys().next().value as string)\n        }\n    }\n\n    const cached = thumbCache.get(props.url)\n    const thumbStatus = ref<ThumbStatus>(cached?.status ?? 'loading')\n\n    // Natural pixel dimensions, captured once the thumbnail decodes. Doubles\n    // as the size hint PhotoSwipe needs for its slide (falls back until known).\n    const dimensions = ref<{ width: number; height: number } | undefined>(\n        cached?.dimensions,\n    )\n    const onImageLoad = (event: Event) => {\n        const img = event.target as HTMLImageElement\n        if (img.naturalWidth && img.naturalHeight) {\n            dimensions.value = {\n                width: img.naturalWidth,\n                height: img.naturalHeight,\n            }\n        }\n        thumbStatus.value = 'loaded'\n        setThumbCache(props.url, {\n            status: 'loaded',\n            dimensions: dimensions.value,\n        })\n    }\n    const onImageError = () => {\n        thumbStatus.value = 'error'\n        setThumbCache(props.url, { status: 'error' })\n    }\n\n    const pswpSize = computed(() => dimensions.value ?? DEFAULT_PSWP_SIZE)\n\n    // Meta fragments joined with \" · \" for the caption / doc subtitle.\n    const imageMeta = computed(() =>\n        [\n            dimensions.value &&\n                `${dimensions.value.width}×${dimensions.value.height}`,\n            formattedSize.value,\n        ].filter(Boolean),\n    )\n    const docMeta = computed(() =>\n        [typeTag.value, formattedSize.value].filter(Boolean),\n    )\n\n    // --- Lightbox ---\n\n    // Slide size PhotoSwipe assumes before the real dimensions are known.\n    const DEFAULT_PSWP_SIZE = { width: 1200, height: 800 }\n\n    const galleryRef = ref<HTMLElement>()\n    const { init } = useLightbox({ gallery: galleryRef, loop: false })\n\n    onMounted(async () => {\n        if (!isImage.value) {\n            return\n        }\n        await init()\n    })\n</script>\n\n<template>\n    <!-- Image attachment: a thumbnail tile with a metadata caption -->\n    <figure\n        v-if=\"isImage\"\n        class=\"pk-chatbot-file-preview pk-chatbot-file-preview--image\"\n        :class=\"{ 'pk-chatbot-file-preview--compact': compact }\">\n        <div ref=\"galleryRef\" class=\"pk-chatbot-file-preview__thumb-wrap\">\n            <a\n                :href=\"url\"\n                :data-pswp-src=\"url\"\n                :data-pswp-width=\"pswpSize.width\"\n                :data-pswp-height=\"pswpSize.height\"\n                :data-pswp-caption=\"filename ?? ''\"\n                class=\"pk-chatbot-file-preview__thumb-link\"\n                :aria-label=\"filename ?? $t('label.file')\">\n                <img\n                    v-show=\"thumbStatus === 'loaded'\"\n                    :src=\"url\"\n                    :alt=\"filename\"\n                    decoding=\"async\"\n                    class=\"pk-chatbot-file-preview__thumb\"\n                    @load=\"onImageLoad\"\n                    @error=\"onImageError\" />\n            </a>\n            <!-- Spinner until the thumbnail decodes (or while an upload is in\n                 flight); a fixed box keeps this from shifting the layout. -->\n            <span\n                v-if=\"loading || thumbStatus === 'loading'\"\n                class=\"pk-chatbot-file-preview__status pk-chatbot-file-preview__status--overlay\">\n                <VvIcon name=\"line-md:loading-loop\" />\n            </span>\n            <!-- Failed to load: a quiet icon instead of the browser's broken\n                 image glyph. -->\n            <span\n                v-else-if=\"thumbStatus === 'error'\"\n                class=\"pk-chatbot-file-preview__status pk-chatbot-file-preview__status--overlay pk-chatbot-file-preview__status--error\">\n                <VvIcon name=\"ri:image-2-line\" />\n            </span>\n        </div>\n        <figcaption v-if=\"!compact\" class=\"pk-chatbot-file-preview__caption\">\n            <span\n                v-if=\"filename\"\n                class=\"pk-chatbot-file-preview__name\"\n                :title=\"filename\"\n                >{{ filename }}</span\n            >\n            <span class=\"pk-chatbot-file-preview__meta\">\n                <span\n                    v-if=\"error\"\n                    class=\"pk-chatbot-file-preview__error\"\n                    :title=\"error\">\n                    <VvIcon name=\"ri:error-warning-line\" />\n                    {{ error }}\n                </span>\n                <template v-else>{{ imageMeta.join(' · ') }}</template>\n            </span>\n        </figcaption>\n        <button\n            v-if=\"removable && !loading\"\n            type=\"button\"\n            class=\"pk-chatbot-file-preview__remove\"\n            :title=\"$t('action.remove')\"\n            :aria-label=\"$t('action.remove')\"\n            @click.prevent=\"$emit('remove')\">\n            <VvIcon name=\"ri:close-line\" />\n        </button>\n    </figure>\n\n    <!-- Document attachment: an icon tile + name + type · size -->\n    <div\n        v-else\n        class=\"pk-chatbot-file-preview pk-chatbot-file-preview--doc\"\n        :class=\"{\n            'pk-chatbot-file-preview--error': error,\n            'pk-chatbot-file-preview--compact': compact,\n        }\">\n        <span\n            class=\"pk-chatbot-file-preview__icon-tile\"\n            :style=\"{ '--file-accent': fileKind.accent }\">\n            <VvIcon\n                v-if=\"loading\"\n                name=\"line-md:loading-loop\"\n                class=\"pk-chatbot-file-preview__icon\" />\n            <VvIcon\n                v-else\n                :name=\"fileKind.icon\"\n                class=\"pk-chatbot-file-preview__icon\" />\n        </span>\n        <span class=\"pk-chatbot-file-preview__body\">\n            <span\n                v-if=\"filename\"\n                class=\"pk-chatbot-file-preview__name\"\n                :title=\"filename\"\n                >{{ filename }}</span\n            >\n            <span class=\"pk-chatbot-file-preview__meta\">\n                <span\n                    v-if=\"error\"\n                    class=\"pk-chatbot-file-preview__error\"\n                    :title=\"error\">\n                    <VvIcon name=\"ri:error-warning-line\" />\n                    {{ error }}\n                </span>\n                <template v-else>{{ docMeta.join(' · ') }}</template>\n            </span>\n        </span>\n        <a\n            v-if=\"!loading && !error && !compact\"\n            :href=\"url\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            class=\"pk-chatbot-file-preview__open\"\n            :title=\"$t('action.download')\"\n            :aria-label=\"`${$t('action.download')}${filename ? ` — ${filename}` : ''}`\">\n            <VvIcon name=\"ri:download-2-line\" />\n        </a>\n        <button\n            v-if=\"removable && !loading\"\n            type=\"button\"\n            class=\"pk-chatbot-file-preview__remove\"\n            :class=\"{ 'pk-chatbot-file-preview__remove--inline': !compact }\"\n            :title=\"$t('action.remove')\"\n            :aria-label=\"$t('action.remove')\"\n            @click=\"$emit('remove')\">\n            <VvIcon name=\"ri:close-line\" />\n        </button>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-file-preview {\n        // Concentric radii: outer card and inner tiles share an 8px step.\n        --file-radius: var(--rounded-lg, 12px);\n        position: relative;\n        max-width: 280px;\n        background-color: var(--color-surface-1);\n        border: 1px solid var(--color-surface-3);\n        border-radius: var(--file-radius);\n        color: var(--color-word-2);\n        font-size: var(--text-12);\n\n        &--error {\n            border-color: var(--color-danger);\n        }\n\n        // --- Document card ---\n        &--doc {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-8);\n            padding: var(--spacing-8);\n            min-width: 0;\n            transition:\n                border-color 0.18s var(--ease-out),\n                background-color 0.18s var(--ease-out),\n                box-shadow 0.18s var(--ease-out);\n\n            &:hover {\n                border-color: var(--color-surface-4);\n                background-color: var(--color-surface-2);\n                box-shadow: var(--shadow-sm);\n            }\n        }\n\n        &__icon-tile {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n            width: var(--spacing-36);\n            height: var(--spacing-36);\n            // One step down from the card radius keeps the nested tile concentric.\n            border-radius: var(--rounded-md, 6px);\n            // Tint derived from the file-type accent; glyph sits at full accent.\n            background-color: color-mix(\n                in srgb,\n                var(--file-accent) 14%,\n                transparent\n            );\n            color: var(--file-accent);\n        }\n\n        &__icon {\n            width: var(--spacing-20);\n            height: var(--spacing-20);\n        }\n\n        &__body {\n            display: flex;\n            flex-direction: column;\n            gap: 1px;\n            min-width: 0;\n            flex: 1;\n        }\n\n        &__open {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n            width: var(--spacing-28);\n            height: var(--spacing-28);\n            margin-inline-start: var(--spacing-4);\n            border-radius: var(--rounded);\n            color: var(--color-word-3);\n            text-decoration: none;\n            opacity: 0;\n            transition:\n                opacity 0.18s var(--ease-out),\n                color 0.18s var(--ease-out),\n                background-color 0.18s var(--ease-out);\n\n            &:hover {\n                background-color: var(--color-surface-3);\n                color: var(--color-word-1);\n            }\n        }\n\n        &--doc:hover &__open,\n        &--doc:focus-within &__open {\n            opacity: 1;\n        }\n\n        // Touch devices have no hover: keep the open affordance visible.\n        @media (hover: none) {\n            &--doc &__open {\n                opacity: 1;\n            }\n        }\n\n        // --- Image card ---\n        &--image {\n            display: inline-flex;\n            flex-direction: column;\n            margin: 0;\n        }\n\n        &__thumb-wrap {\n            position: relative;\n            display: flex;\n            // Fixed box: the card claims its final footprint before the\n            // image decodes, so the message log never shifts on load.\n            width: 280px;\n            max-width: 100%;\n            height: 200px;\n            background-color: var(--color-surface);\n            border-radius: var(--file-radius);\n            overflow: hidden;\n        }\n\n        &__thumb-link {\n            display: flex;\n            width: 100%;\n            height: 100%;\n            cursor: pointer;\n        }\n\n        &__thumb {\n            display: block;\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n        }\n\n        &__caption {\n            display: flex;\n            flex-direction: column;\n            gap: 1px;\n            padding: var(--spacing-8);\n            min-width: 0;\n        }\n\n        &__name {\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            font-weight: var(--font-medium, 500);\n            color: var(--color-word-1);\n        }\n\n        &__meta {\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            font-size: var(--text-10);\n            line-height: var(--leading-normal);\n            // Reserve the line even while empty: image dimensions arrive\n            // only after decode and must not grow the caption.\n            min-height: 1.4em;\n            color: var(--color-word-4);\n            // Stable column for the dimensions/size figures.\n            font-variant-numeric: tabular-nums;\n        }\n\n        &__error {\n            display: inline-flex;\n            align-items: center;\n            gap: var(--spacing-4);\n            color: var(--color-danger);\n\n            .vv-icon {\n                flex-shrink: 0;\n            }\n        }\n\n        &__status {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n\n            .vv-icon {\n                width: var(--spacing-32);\n                height: var(--spacing-32);\n            }\n\n            &--overlay {\n                position: absolute;\n                inset: 0;\n                background-color: color-mix(\n                    in srgb,\n                    var(--color-surface-1) 70%,\n                    transparent\n                );\n                color: var(--color-word-1);\n            }\n\n            &--error {\n                color: var(--color-word-4);\n            }\n        }\n\n        // --- Remove button (input context) ---\n        &__remove {\n            position: absolute;\n            top: 0;\n            right: 0;\n            transform: translate(50%, -50%);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            // Visible glyph is 18px but the hit area stays a comfortable 28px.\n            width: var(--spacing-28);\n            height: var(--spacing-28);\n            padding: 0;\n            border: none;\n            border-radius: var(--rounded-full, 9999px);\n            background-color: color-mix(\n                in srgb,\n                var(--color-surface-1) 85%,\n                transparent\n            );\n            color: var(--color-word-2);\n            cursor: pointer;\n            line-height: 1;\n            box-shadow: var(--shadow-sm);\n            transition:\n                background-color 0.18s var(--ease-out),\n                color 0.18s var(--ease-out),\n                scale 0.12s var(--ease-out);\n\n            &:hover {\n                background-color: var(--color-surface-2);\n                color: var(--color-word-1);\n            }\n\n            &:active {\n                scale: 0.96;\n            }\n\n            // Inside the document row the button rides inline, not overlaid\n            // (size is inherited from the base).\n            &--inline {\n                position: static;\n                flex-shrink: 0;\n                box-shadow: none;\n                background-color: transparent;\n                color: var(--color-word-4);\n\n                &:hover {\n                    background-color: var(--color-surface-3);\n                    color: var(--color-word-1);\n                }\n            }\n        }\n\n        // --- Compact (composer) chips ---\n        // ChatGPT/Gemini-style: every attachment is the SAME height and carries\n        // an always-visible round remove control in the top-right corner — no\n        // hover-revealed actions, no size mismatch between image and file chips.\n        &--compact {\n            // Shared chip height so image and file chips align in the row.\n            --chip-size: var(--spacing-56);\n            max-width: 240px;\n\n            &.pk-chatbot-file-preview--image {\n                width: var(--chip-size);\n                height: var(--chip-size);\n                border-radius: var(--rounded-md, 6px);\n            }\n\n            // Fill the square; the root's `overflow: hidden` rounds the corners.\n            .pk-chatbot-file-preview__thumb-wrap,\n            .pk-chatbot-file-preview__thumb-link {\n                width: 100%;\n                height: 100%;\n            }\n\n            &.pk-chatbot-file-preview--doc {\n                height: var(--chip-size);\n                gap: var(--spacing-8);\n                padding: var(--spacing-8);\n                // Reserve room so the corner remove button never overlaps the\n                // name/meta text.\n                padding-inline-end: var(--spacing-28);\n            }\n\n            // Square icon tile that fills the chip height, so file chips read at\n            // the same scale as image thumbnails.\n            .pk-chatbot-file-preview__icon-tile {\n                align-self: stretch;\n                width: auto;\n                height: auto;\n                aspect-ratio: 1;\n            }\n\n            .pk-chatbot-file-preview__icon {\n                width: var(--spacing-20);\n                height: var(--spacing-20);\n            }\n        }\n\n        // Always-visible round remove control in the top-right corner. Sits\n        // just inside the chip (an ancestor clips overflow), bigger than before,\n        // with an extended hit area for easy tapping.\n        &--compact &__remove {\n            top: var(--spacing-4);\n            right: var(--spacing-4);\n            width: var(--spacing-24);\n            height: var(--spacing-24);\n            border: 1px solid var(--color-surface-4);\n            background-color: var(--color-surface);\n            color: var(--color-word-1);\n            font-size: var(--text-16);\n            box-shadow: var(--shadow-sm);\n\n            // Comfortable touch/click target beyond the small visible glyph.\n            &::after {\n                content: '';\n                position: absolute;\n                inset: calc(-1 * var(--spacing-4));\n            }\n\n            &:hover {\n                background-color: var(--color-surface-2);\n                color: var(--color-word-1);\n            }\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n            &--doc,\n            &__open,\n            &__remove {\n                transition: none;\n            }\n        }\n    }\n</style>\n"],"mappings":"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"}

package/dist-vue/_chunks/{PkChatbotInput-jvb0vuak.js → PkChatbotInput-BSm3BI7D.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./PkStreamingMarkdown-CjBMQ18U.js";
+import { t as e } from "./PkStreamingMarkdown-B3OallmC.js";
 import { t } from "./PkChatbotFilePreview-DyrszALJ.js";
 import { VvButton as n, VvDropdown as r, VvDropdownAction as i, VvIcon as a } from "@volverjs/ui-vue/components";
 import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, mergeProps as g, nextTick as _, normalizeClass as ee, normalizeProps as te, onBeforeUnmount as v, onMounted as y, openBlock as b, ref as x, renderList as ne, renderSlot as S, toDisplayString as C, unref as re, useModel as w, useTemplateRef as T, watch as ie, withCtx as E, withKeys as ae, withModifiers as D } from "vue";
@@ -344,4 +344,4 @@ var M = j, se = { class: "pk-chatbot-input" }, ce = {
 //#endregion
 export { N as t };
 
-//# sourceMappingURL=PkChatbotInput-jvb0vuak.js.map
+//# sourceMappingURL=PkChatbotInput-BSm3BI7D.js.map

package/dist-vue/_chunks/{PkChatbotInput-jvb0vuak.js.map → PkChatbotInput-BSm3BI7D.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkChatbotInput-jvb0vuak.js","names":["$t","$slots","$n"],"sources":["../../../../node_modules/.pnpm/autosize@6.0.1/node_modules/autosize/dist/autosize.esm.js","../../../../packages/components/src/chat/PkChatbotInput.vue","../../../../packages/components/src/chat/PkChatbotInput.vue"],"sourcesContent":["var e=new Map;function t(t){var o=e.get(t);o&&o.destroy()}function o(t){var o=e.get(t);o&&o.update()}var r=null;\"undefined\"==typeof window?((r=function(e){return e}).destroy=function(e){return e},r.update=function(e){return e}):((r=function(t,o){return t&&Array.prototype.forEach.call(t.length?t:[t],function(t){return function(t){if(t&&t.nodeName&&\"TEXTAREA\"===t.nodeName&&!e.has(t)){var o,r=null,n=window.getComputedStyle(t),i=(o=t.value,function(){a({testForHeightReduction:\"\"===o||!t.value.startsWith(o),restoreTextAlign:null}),o=t.value}),l=function(o){t.removeEventListener(\"autosize:destroy\",l),t.removeEventListener(\"autosize:update\",s),t.removeEventListener(\"input\",i),window.removeEventListener(\"resize\",s),Object.keys(o).forEach(function(e){return t.style[e]=o[e]}),e.delete(t)}.bind(t,{height:t.style.height,resize:t.style.resize,textAlign:t.style.textAlign,overflowY:t.style.overflowY,overflowX:t.style.overflowX,wordWrap:t.style.wordWrap});t.addEventListener(\"autosize:destroy\",l),t.addEventListener(\"autosize:update\",s),t.addEventListener(\"input\",i),window.addEventListener(\"resize\",s),t.style.overflowX=\"hidden\",t.style.wordWrap=\"break-word\",e.set(t,{destroy:l,update:s}),s()}function a(e){var o,i,l=e.restoreTextAlign,s=void 0===l?null:l,d=e.testForHeightReduction,u=void 0===d||d,c=n.overflowY;if(0!==t.scrollHeight&&(\"vertical\"===n.resize?t.style.resize=\"none\":\"both\"===n.resize&&(t.style.resize=\"horizontal\"),u&&(o=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push([e.parentNode,e.parentNode.scrollTop]),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0],o=e[1];t.style.scrollBehavior=\"auto\",t.scrollTop=o,t.style.scrollBehavior=null})}}(t),t.style.height=\"\"),i=\"content-box\"===n.boxSizing?t.scrollHeight-(parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)):t.scrollHeight+parseFloat(n.borderTopWidth)+parseFloat(n.borderBottomWidth),\"none\"!==n.maxHeight&&i>parseFloat(n.maxHeight)?(\"hidden\"===n.overflowY&&(t.style.overflow=\"scroll\"),i=parseFloat(n.maxHeight)):\"hidden\"!==n.overflowY&&(t.style.overflow=\"hidden\"),t.style.height=i+\"px\",s&&(t.style.textAlign=s),o&&o(),r!==i&&(t.dispatchEvent(new Event(\"autosize:resized\",{bubbles:!0})),r=i),c!==n.overflow&&!s)){var v=n.textAlign;\"hidden\"===n.overflow&&(t.style.textAlign=\"start\"===v?\"end\":\"start\"),a({restoreTextAlign:v,testForHeightReduction:!0})}}function s(){a({testForHeightReduction:!0,restoreTextAlign:null})}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},r.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e});var n=r;export default n;\n","<script setup lang=\"ts\">\n    // @ts-expect-error - no types for autosize\n    import autosize from 'autosize'\n    import {\n        computed,\n        nextTick,\n        onBeforeUnmount,\n        onMounted,\n        ref,\n        useTemplateRef,\n        watch,\n    } from 'vue'\n    import { useDropZone } from '@vueuse/core'\n    import type { AgentFileUpload } from 'models'\n    import type { PendingAttachment } from 'composables'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import PkChatbotFilePreview from './PkChatbotFilePreview.vue'\n\n    // --- Models & Props ---\n\n    const modelValue = defineModel<string>()\n    const pendingAttachments = defineModel<PendingAttachment[]>(\n        'pendingAttachments',\n        { default: () => [] },\n    )\n\n    const emit = defineEmits<{\n        submit: []\n        'stop-generation': []\n        'file-select': [file: File]\n        'dismiss-attachment-notice': []\n    }>()\n\n    const props = defineProps<{\n        placeholder?: string\n        dismissableNotice?: string\n        status?: 'submitted' | 'streaming' | 'ready' | 'error'\n        maxMessageLength?: number\n        fileUpload?: AgentFileUpload\n        enableDragDrop?: boolean\n        attachmentLimitReached?: boolean\n        attachmentNotice?: string\n    }>()\n\n    // --- Template refs ---\n\n    const textareaEl = useTemplateRef<HTMLTextAreaElement>('textareaEl')\n    const fileInputEl = useTemplateRef<HTMLInputElement>('fileInputEl')\n    const cameraInputEl = useTemplateRef<HTMLInputElement>('cameraInputEl')\n    const formEl = useTemplateRef<HTMLFormElement>('formEl')\n\n    // --- Input buffering (decouples typing from reactive model propagation) ---\n\n    const localValue = ref(modelValue.value ?? '')\n    let syncTimer: ReturnType<typeof setTimeout> | null = null\n\n    const cancelSync = () => {\n        if (syncTimer !== null) {\n            clearTimeout(syncTimer)\n            syncTimer = null\n        }\n    }\n\n    const flushSync = () => {\n        cancelSync()\n        modelValue.value = localValue.value\n    }\n\n    const scheduleSync = () => {\n        cancelSync()\n        syncTimer = setTimeout(() => {\n            modelValue.value = localValue.value\n            syncTimer = null\n        }, 300)\n    }\n\n    const onTextareaInput = () => {\n        localValue.value = textareaEl.value?.value ?? ''\n        scheduleSync()\n    }\n\n    watch(modelValue, (v) => {\n        if (v !== localValue.value) {\n            localValue.value = v ?? ''\n            nextTick(() => {\n                if (textareaEl.value) {\n                    autosize.update(textareaEl.value)\n                }\n            })\n        }\n    })\n\n    // --- Status computeds ---\n\n    const isStreaming = computed(() => props.status === 'streaming')\n    const isSubmitted = computed(() => props.status === 'submitted')\n    const isInputDisabled = computed(\n        () => isStreaming.value || isSubmitted.value,\n    )\n\n    // --- Validation ---\n\n    const currentLength = computed(() => localValue.value.length)\n\n    const isOverLimit = computed(\n        () =>\n            props.maxMessageLength !== undefined &&\n            currentLength.value > props.maxMessageLength,\n    )\n\n    const isUploadingAnyFile = computed(() =>\n        pendingAttachments.value.some((a) => a.state === 'uploading'),\n    )\n\n    const isSubmitEnabled = computed(() => {\n        if (\n            isInputDisabled.value ||\n            isUploadingAnyFile.value ||\n            isOverLimit.value\n        ) {\n            return false\n        }\n        return localValue.value.trim().length > 0\n    })\n\n    // --- File upload ---\n\n    const hasCaptureSupport = 'capture' in document.createElement('input')\n\n    const acceptMimeTypes = computed(\n        () => props.fileUpload?.allowedMimeTypes?.join(',') ?? '',\n    )\n\n    const acceptImageMimeTypes = computed(() =>\n        (props.fileUpload?.allowedMimeTypes ?? [])\n            .filter((m) => m.startsWith('image/'))\n            .join(','),\n    )\n\n    const showCameraOption = computed(\n        () => hasCaptureSupport && acceptImageMimeTypes.value.length > 0,\n    )\n\n    const openFilePicker = () => {\n        fileInputEl.value?.click()\n    }\n\n    const openCameraPicker = () => {\n        cameraInputEl.value?.click()\n    }\n\n    // The store owns the attachment limits and drops any overflow; the input\n    // just forwards every picked/dropped file.\n    const emitFiles = (files: File[]) => {\n        for (const file of files) {\n            emit('file-select', file)\n        }\n    }\n\n    const onFileChange = (event: Event) => {\n        const input = event.target as HTMLInputElement\n        emitFiles(Array.from(input.files ?? []))\n        input.value = ''\n    }\n\n    // --- Attachments ---\n\n    const removeAttachment = (id: string) => {\n        const att = pendingAttachments.value.find((a) => a.id === id)\n        if (att) {\n            URL.revokeObjectURL(att.localUrl)\n        }\n        pendingAttachments.value = pendingAttachments.value.filter(\n            (a) => a.id !== id,\n        )\n    }\n\n    // --- Drag & drop ---\n\n    const isDragDropEnabled = computed(\n        () => (props.enableDragDrop ?? true) && !!props.fileUpload?.enabled,\n    )\n\n    const handleDrop = (files: File[] | null) => {\n        if (!isDragDropEnabled.value || !files) {\n            return\n        }\n        emitFiles(files)\n    }\n\n    const { isOverDropZone } = useDropZone(formEl, {\n        dataTypes: computed(() => props.fileUpload?.allowedMimeTypes ?? []),\n        onDrop: handleDrop,\n    })\n\n    // --- Notice queue (single slot above the input, highest priority wins) ---\n\n    type InputNotice = {\n        id: string\n        text?: string\n        markdown?: string\n        icon?: string\n        dismiss?: () => void\n    }\n\n    const isDismissableNoticeVisible = ref(true)\n    const closeDismissableNotice = () => {\n        isDismissableNoticeVisible.value = false\n    }\n\n    const activeNotice = computed<InputNotice | null>(() => {\n        // Order = priority. The alert takes precedence over the notice.\n        if (props.attachmentNotice) {\n            return {\n                id: 'limit',\n                icon: 'ri:information-line',\n                text: props.attachmentNotice,\n                dismiss: () => emit('dismiss-attachment-notice'),\n            }\n        }\n        if (props.dismissableNotice && isDismissableNoticeVisible.value) {\n            return {\n                id: 'dismissable',\n                markdown: props.dismissableNotice,\n                dismiss: closeDismissableNotice,\n            }\n        }\n        return null\n    })\n\n    // --- Submit ---\n\n    const handleSubmit = () => {\n        if (!isSubmitEnabled.value) {\n            return\n        }\n        flushSync()\n        emit('submit')\n        localValue.value = ''\n        modelValue.value = ''\n        nextTick(() => {\n            if (textareaEl.value) {\n                textareaEl.value.value = ''\n                autosize.update(textareaEl.value)\n            }\n        })\n    }\n\n    // --- Lifecycle ---\n\n    onMounted(() => {\n        if (textareaEl.value) {\n            autosize(textareaEl.value)\n        }\n    })\n\n    onBeforeUnmount(() => {\n        cancelSync()\n        if (textareaEl.value) {\n            autosize.destroy(textareaEl.value)\n        }\n        for (const att of pendingAttachments.value) {\n            URL.revokeObjectURL(att.localUrl)\n        }\n    })\n</script>\n\n<template>\n    <div class=\"pk-chatbot-input\">\n        <div\n            v-if=\"activeNotice\"\n            :key=\"activeNotice.id\"\n            class=\"pk-chatbot-input__notice\"\n            role=\"status\">\n            <VvIcon\n                v-if=\"activeNotice.icon\"\n                :name=\"activeNotice.icon\"\n                class=\"pk-chatbot-input__notice-icon\" />\n            <PkStreamingMarkdown\n                v-if=\"activeNotice.markdown\"\n                :markdown=\"activeNotice.markdown\"\n                class=\"wysiwyg pk-chatbot-input__notice-text\" />\n            <span v-else class=\"pk-chatbot-input__notice-text\">\n                {{ activeNotice.text }}\n            </span>\n            <VvButton\n                v-if=\"activeNotice.dismiss\"\n                :title=\"$t('action.close')\"\n                modifiers=\"action-quiet\"\n                icon=\"ri:close-line\"\n                class=\"w-18 h-18\"\n                @click=\"activeNotice.dismiss()\" />\n        </div>\n        <form\n            ref=\"formEl\"\n            class=\"pk-chatbot-input__form\"\n            @submit.prevent=\"handleSubmit\">\n            <div\n                v-if=\"isOverDropZone && isDragDropEnabled\"\n                class=\"pk-chatbot-input__drop-overlay\">\n                <VvIcon\n                    name=\"ri:upload-cloud-2-line\"\n                    class=\"pk-chatbot-input__drop-overlay-icon\" />\n                <span>{{ $t('action.dropFile') }}</span>\n            </div>\n            <div\n                v-if=\"pendingAttachments.length\"\n                class=\"pk-chatbot-input__attachments\">\n                <PkChatbotFilePreview\n                    v-for=\"att in pendingAttachments\"\n                    :key=\"att.id\"\n                    :media-type=\"att.file.type\"\n                    :url=\"att.localUrl\"\n                    :filename=\"att.file.name\"\n                    :size=\"att.file.size\"\n                    :loading=\"att.state === 'uploading'\"\n                    :error=\"att.state === 'error' ? att.error : undefined\"\n                    :removable=\"att.state !== 'uploading'\"\n                    compact\n                    @remove=\"removeAttachment(att.id)\" />\n            </div>\n            <div class=\"pk-chatbot-input__fieldset\">\n                <slot name=\"prepend\" />\n                <VvDropdown\n                    v-if=\"\n                        fileUpload &&\n                        fileUpload.enabled &&\n                        (showCameraOption || $slots['additional-actions'])\n                    \"\n                    v-bind=\"{\n                        placement: 'top-start',\n                        modifiers: 'menu',\n                        flip: true,\n                        offset: 3,\n                    }\">\n                    <template #default=\"{ init, toggle, aria }\">\n                        <button\n                            :ref=\"(e: any) => init(e)\"\n                            v-bind=\"aria\"\n                            class=\"pk-chatbot-input__button\"\n                            type=\"button\"\n                            :title=\"$t('action.attachFile')\"\n                            :disabled=\"isInputDisabled\"\n                            @click=\"toggle\">\n                            <VvIcon\n                                name=\"ri:add-line\"\n                                class=\"pk-chatbot-input__button-icon\" />\n                        </button>\n                    </template>\n                    <template #items>\n                        <VvDropdownAction\n                            v-if=\"showCameraOption\"\n                            :disabled=\"\n                                isInputDisabled || attachmentLimitReached\n                            \"\n                            @click=\"openCameraPicker\">\n                            <VvIcon\n                                name=\"ri:camera-line\"\n                                class=\"pk-chatbot-input__dropdown-icon\" />\n                            {{ $t('action.takePhoto') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            :disabled=\"\n                                isInputDisabled || attachmentLimitReached\n                            \"\n                            @click=\"openFilePicker\">\n                            <VvIcon\n                                name=\"ri:attachment-line\"\n                                class=\"pk-chatbot-input__dropdown-icon\" />\n                            {{ $t('action.attachFile') }}\n                        </VvDropdownAction>\n                        <slot name=\"additional-actions\" />\n                    </template>\n                </VvDropdown>\n                <button\n                    v-else-if=\"fileUpload && fileUpload.enabled\"\n                    class=\"pk-chatbot-input__button\"\n                    type=\"button\"\n                    :title=\"$t('action.attachFile')\"\n                    :disabled=\"isInputDisabled || attachmentLimitReached\"\n                    @click=\"openFilePicker\">\n                    <VvIcon\n                        name=\"ri:add-line\"\n                        class=\"pk-chatbot-input__button-icon\" />\n                </button>\n                <input\n                    v-if=\"fileUpload && fileUpload.enabled\"\n                    ref=\"fileInputEl\"\n                    type=\"file\"\n                    hidden\n                    multiple\n                    :accept=\"acceptMimeTypes\"\n                    @change=\"onFileChange\" />\n                <input\n                    v-if=\"fileUpload && fileUpload.enabled && showCameraOption\"\n                    ref=\"cameraInputEl\"\n                    type=\"file\"\n                    capture=\"environment\"\n                    hidden\n                    :accept=\"acceptImageMimeTypes\"\n                    @change=\"onFileChange\" />\n                <div class=\"pk-chatbot-input__content\">\n                    <textarea\n                        ref=\"textareaEl\"\n                        :value=\"localValue\"\n                        class=\"pk-chatbot-input__textarea\"\n                        name=\"message\"\n                        rows=\"1\"\n                        :placeholder\n                        @input=\"onTextareaInput\"\n                        @keydown.enter.prevent=\"handleSubmit\"></textarea>\n                </div>\n                <div\n                    v-if=\"maxMessageLength\"\n                    class=\"pk-chatbot-input__counter\"\n                    :class=\"{ 'pk-chatbot-input__counter--over': isOverLimit }\">\n                    {{ $n(currentLength, 'integer') }}/<span\n                        class=\"opacity-60\"\n                        >{{ $n(maxMessageLength, 'integer') }}</span\n                    >\n                </div>\n                <button\n                    v-if=\"isStreaming\"\n                    class=\"pk-chatbot-input__button\"\n                    type=\"button\"\n                    :title=\"$t('action.stop')\"\n                    @click=\"emit('stop-generation')\">\n                    <VvIcon\n                        name=\"ri:stop-circle-line\"\n                        class=\"pk-chatbot-input__button-icon\" />\n                </button>\n                <button\n                    v-else\n                    class=\"pk-chatbot-input__button\"\n                    type=\"submit\"\n                    :title=\"\n                        isSubmitEnabled\n                            ? $t('action.submit')\n                            : $t('label.disabled')\n                    \"\n                    :disabled=\"!isSubmitEnabled\">\n                    <VvIcon\n                        :name=\"\n                            isSubmitted\n                                ? 'line-md:loading-loop'\n                                : isSubmitEnabled\n                                  ? 'ri:send-ins-fill'\n                                  : 'ri:send-ins-line'\n                        \"\n                        class=\"pk-chatbot-input__button-icon\" />\n                </button>\n            </div>\n        </form>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-input {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        margin-inline: var(--spacing-sm);\n        margin-bottom: var(--spacing-sm);\n\n        &__notice {\n            position: relative;\n            padding: var(--spacing-10) var(--spacing-sm);\n            display: flex;\n            align-items: flex-start;\n            gap: var(--spacing-sm);\n            background-color: var(--color-surface-1);\n            border-top-left-radius: var(--rounded-xl);\n            border-top-right-radius: var(--rounded-xl);\n            transition-property: var(--transition-property-all);\n            transition-duration: var(--duration-300);\n            transition-timing-function: var(--ease-in-out);\n            font-size: var(--text-12);\n            color: var(--color-word-4);\n\n            &::after {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                right: 0;\n                bottom: calc(-1 * var(--spacing-12));\n                height: var(--spacing-12);\n                background-color: var(--color-surface-1);\n                z-index: 1;\n            }\n\n            &-icon {\n                flex-shrink: 0;\n                width: var(--spacing-18);\n                height: var(--spacing-18);\n            }\n\n            &-text {\n                flex: 1;\n                min-width: 0;\n            }\n        }\n\n        &__form {\n            position: relative;\n            display: flex;\n            z-index: 1;\n            flex-direction: column;\n            border-radius: var(--rounded-xl);\n            border: 1px solid var(--color-surface-3);\n            background-color: var(--color-surface);\n            padding: var(--spacing-14);\n            box-shadow: var(--shadow-lg);\n            font-size: var(\n                --text-16\n            ); // prevent ios zoom on input focus by using a font size >= 16px\n            gap: var(--spacing-xs);\n            transition: border-color var(--duration-200) var(--ease-in-out);\n\n            @include media-breakpoint-up('sm', $breakpoints) {\n                font-size: var(--text-14);\n                padding: var(--spacing-10);\n            }\n\n            &:has(:focus-within) {\n                border-color: var(--color-word-5);\n            }\n        }\n\n        &__drop-overlay {\n            position: absolute;\n            inset: 0;\n            z-index: 10;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: var(--spacing-xs);\n            border-radius: var(--rounded-xl);\n            background-color: color-mix(\n                in srgb,\n                var(--color-surface) 85%,\n                transparent\n            );\n            pointer-events: none;\n        }\n\n        &__fieldset {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-xs);\n            flex: 1;\n        }\n\n        &__content {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            gap: var(--spacing-4);\n            min-width: 0;\n            overflow: hidden;\n        }\n\n        &__textarea {\n            display: block;\n            border: none;\n            outline: none;\n            resize: none;\n            width: 100%;\n            max-height: 200px;\n            color: var(--color-word-1);\n            background-color: var(--color-surface);\n\n            &::placeholder {\n                color: var(--color-word-4);\n            }\n        }\n\n        &__attachments {\n            display: flex;\n            flex-wrap: wrap;\n            // Roomy gap so the uniform-height chips breathe in the row.\n            gap: var(--spacing-12);\n            padding-bottom: var(--spacing-xs);\n            border-bottom: 1px solid var(--color-surface-2);\n        }\n\n        &__button {\n            background-color: transparent;\n            border: none;\n            cursor: pointer;\n            color: var(--color-word-1);\n            padding: var(--spacing-4);\n            flex-shrink: 0;\n            transition: var(--transition-colors);\n            border-radius: var(--rounded);\n\n            &:hover {\n                background-color: var(--color-surface-2);\n            }\n\n            &:focus-visible {\n                outline: 1px solid var(--color-surface-5);\n                outline-offset: 0;\n            }\n\n            &:disabled {\n                cursor: not-allowed;\n                opacity: 0.5;\n            }\n\n            &-icon {\n                display: block;\n                width: var(--spacing-20);\n                height: var(--spacing-20);\n            }\n        }\n\n        &__counter {\n            background-color: var(--color-surface-1);\n            border: 1px solid var(--color-surface-3);\n            border-radius: var(--rounded-md);\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n            line-height: 1;\n            padding-inline: var(--spacing-6);\n            padding-block: var(--spacing-4);\n            z-index: 1;\n            font-variant-numeric: tabular-nums;\n            font-family: var(--font-mono);\n            font-weight: var(--font-bold);\n\n            &--over {\n                color: var(--color-danger);\n                border-color: var(--color-danger-lighten-5);\n                font-weight: var(--font-bold);\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    // @ts-expect-error - no types for autosize\n    import autosize from 'autosize'\n    import {\n        computed,\n        nextTick,\n        onBeforeUnmount,\n        onMounted,\n        ref,\n        useTemplateRef,\n        watch,\n    } from 'vue'\n    import { useDropZone } from '@vueuse/core'\n    import type { AgentFileUpload } from 'models'\n    import type { PendingAttachment } from 'composables'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import PkChatbotFilePreview from './PkChatbotFilePreview.vue'\n\n    // --- Models & Props ---\n\n    const modelValue = defineModel<string>()\n    const pendingAttachments = defineModel<PendingAttachment[]>(\n        'pendingAttachments',\n        { default: () => [] },\n    )\n\n    const emit = defineEmits<{\n        submit: []\n        'stop-generation': []\n        'file-select': [file: File]\n        'dismiss-attachment-notice': []\n    }>()\n\n    const props = defineProps<{\n        placeholder?: string\n        dismissableNotice?: string\n        status?: 'submitted' | 'streaming' | 'ready' | 'error'\n        maxMessageLength?: number\n        fileUpload?: AgentFileUpload\n        enableDragDrop?: boolean\n        attachmentLimitReached?: boolean\n        attachmentNotice?: string\n    }>()\n\n    // --- Template refs ---\n\n    const textareaEl = useTemplateRef<HTMLTextAreaElement>('textareaEl')\n    const fileInputEl = useTemplateRef<HTMLInputElement>('fileInputEl')\n    const cameraInputEl = useTemplateRef<HTMLInputElement>('cameraInputEl')\n    const formEl = useTemplateRef<HTMLFormElement>('formEl')\n\n    // --- Input buffering (decouples typing from reactive model propagation) ---\n\n    const localValue = ref(modelValue.value ?? '')\n    let syncTimer: ReturnType<typeof setTimeout> | null = null\n\n    const cancelSync = () => {\n        if (syncTimer !== null) {\n            clearTimeout(syncTimer)\n            syncTimer = null\n        }\n    }\n\n    const flushSync = () => {\n        cancelSync()\n        modelValue.value = localValue.value\n    }\n\n    const scheduleSync = () => {\n        cancelSync()\n        syncTimer = setTimeout(() => {\n            modelValue.value = localValue.value\n            syncTimer = null\n        }, 300)\n    }\n\n    const onTextareaInput = () => {\n        localValue.value = textareaEl.value?.value ?? ''\n        scheduleSync()\n    }\n\n    watch(modelValue, (v) => {\n        if (v !== localValue.value) {\n            localValue.value = v ?? ''\n            nextTick(() => {\n                if (textareaEl.value) {\n                    autosize.update(textareaEl.value)\n                }\n            })\n        }\n    })\n\n    // --- Status computeds ---\n\n    const isStreaming = computed(() => props.status === 'streaming')\n    const isSubmitted = computed(() => props.status === 'submitted')\n    const isInputDisabled = computed(\n        () => isStreaming.value || isSubmitted.value,\n    )\n\n    // --- Validation ---\n\n    const currentLength = computed(() => localValue.value.length)\n\n    const isOverLimit = computed(\n        () =>\n            props.maxMessageLength !== undefined &&\n            currentLength.value > props.maxMessageLength,\n    )\n\n    const isUploadingAnyFile = computed(() =>\n        pendingAttachments.value.some((a) => a.state === 'uploading'),\n    )\n\n    const isSubmitEnabled = computed(() => {\n        if (\n            isInputDisabled.value ||\n            isUploadingAnyFile.value ||\n            isOverLimit.value\n        ) {\n            return false\n        }\n        return localValue.value.trim().length > 0\n    })\n\n    // --- File upload ---\n\n    const hasCaptureSupport = 'capture' in document.createElement('input')\n\n    const acceptMimeTypes = computed(\n        () => props.fileUpload?.allowedMimeTypes?.join(',') ?? '',\n    )\n\n    const acceptImageMimeTypes = computed(() =>\n        (props.fileUpload?.allowedMimeTypes ?? [])\n            .filter((m) => m.startsWith('image/'))\n            .join(','),\n    )\n\n    const showCameraOption = computed(\n        () => hasCaptureSupport && acceptImageMimeTypes.value.length > 0,\n    )\n\n    const openFilePicker = () => {\n        fileInputEl.value?.click()\n    }\n\n    const openCameraPicker = () => {\n        cameraInputEl.value?.click()\n    }\n\n    // The store owns the attachment limits and drops any overflow; the input\n    // just forwards every picked/dropped file.\n    const emitFiles = (files: File[]) => {\n        for (const file of files) {\n            emit('file-select', file)\n        }\n    }\n\n    const onFileChange = (event: Event) => {\n        const input = event.target as HTMLInputElement\n        emitFiles(Array.from(input.files ?? []))\n        input.value = ''\n    }\n\n    // --- Attachments ---\n\n    const removeAttachment = (id: string) => {\n        const att = pendingAttachments.value.find((a) => a.id === id)\n        if (att) {\n            URL.revokeObjectURL(att.localUrl)\n        }\n        pendingAttachments.value = pendingAttachments.value.filter(\n            (a) => a.id !== id,\n        )\n    }\n\n    // --- Drag & drop ---\n\n    const isDragDropEnabled = computed(\n        () => (props.enableDragDrop ?? true) && !!props.fileUpload?.enabled,\n    )\n\n    const handleDrop = (files: File[] | null) => {\n        if (!isDragDropEnabled.value || !files) {\n            return\n        }\n        emitFiles(files)\n    }\n\n    const { isOverDropZone } = useDropZone(formEl, {\n        dataTypes: computed(() => props.fileUpload?.allowedMimeTypes ?? []),\n        onDrop: handleDrop,\n    })\n\n    // --- Notice queue (single slot above the input, highest priority wins) ---\n\n    type InputNotice = {\n        id: string\n        text?: string\n        markdown?: string\n        icon?: string\n        dismiss?: () => void\n    }\n\n    const isDismissableNoticeVisible = ref(true)\n    const closeDismissableNotice = () => {\n        isDismissableNoticeVisible.value = false\n    }\n\n    const activeNotice = computed<InputNotice | null>(() => {\n        // Order = priority. The alert takes precedence over the notice.\n        if (props.attachmentNotice) {\n            return {\n                id: 'limit',\n                icon: 'ri:information-line',\n                text: props.attachmentNotice,\n                dismiss: () => emit('dismiss-attachment-notice'),\n            }\n        }\n        if (props.dismissableNotice && isDismissableNoticeVisible.value) {\n            return {\n                id: 'dismissable',\n                markdown: props.dismissableNotice,\n                dismiss: closeDismissableNotice,\n            }\n        }\n        return null\n    })\n\n    // --- Submit ---\n\n    const handleSubmit = () => {\n        if (!isSubmitEnabled.value) {\n            return\n        }\n        flushSync()\n        emit('submit')\n        localValue.value = ''\n        modelValue.value = ''\n        nextTick(() => {\n            if (textareaEl.value) {\n                textareaEl.value.value = ''\n                autosize.update(textareaEl.value)\n            }\n        })\n    }\n\n    // --- Lifecycle ---\n\n    onMounted(() => {\n        if (textareaEl.value) {\n            autosize(textareaEl.value)\n        }\n    })\n\n    onBeforeUnmount(() => {\n        cancelSync()\n        if (textareaEl.value) {\n            autosize.destroy(textareaEl.value)\n        }\n        for (const att of pendingAttachments.value) {\n            URL.revokeObjectURL(att.localUrl)\n        }\n    })\n</script>\n\n<template>\n    <div class=\"pk-chatbot-input\">\n        <div\n            v-if=\"activeNotice\"\n            :key=\"activeNotice.id\"\n            class=\"pk-chatbot-input__notice\"\n            role=\"status\">\n            <VvIcon\n                v-if=\"activeNotice.icon\"\n                :name=\"activeNotice.icon\"\n                class=\"pk-chatbot-input__notice-icon\" />\n            <PkStreamingMarkdown\n                v-if=\"activeNotice.markdown\"\n                :markdown=\"activeNotice.markdown\"\n                class=\"wysiwyg pk-chatbot-input__notice-text\" />\n            <span v-else class=\"pk-chatbot-input__notice-text\">\n                {{ activeNotice.text }}\n            </span>\n            <VvButton\n                v-if=\"activeNotice.dismiss\"\n                :title=\"$t('action.close')\"\n                modifiers=\"action-quiet\"\n                icon=\"ri:close-line\"\n                class=\"w-18 h-18\"\n                @click=\"activeNotice.dismiss()\" />\n        </div>\n        <form\n            ref=\"formEl\"\n            class=\"pk-chatbot-input__form\"\n            @submit.prevent=\"handleSubmit\">\n            <div\n                v-if=\"isOverDropZone && isDragDropEnabled\"\n                class=\"pk-chatbot-input__drop-overlay\">\n                <VvIcon\n                    name=\"ri:upload-cloud-2-line\"\n                    class=\"pk-chatbot-input__drop-overlay-icon\" />\n                <span>{{ $t('action.dropFile') }}</span>\n            </div>\n            <div\n                v-if=\"pendingAttachments.length\"\n                class=\"pk-chatbot-input__attachments\">\n                <PkChatbotFilePreview\n                    v-for=\"att in pendingAttachments\"\n                    :key=\"att.id\"\n                    :media-type=\"att.file.type\"\n                    :url=\"att.localUrl\"\n                    :filename=\"att.file.name\"\n                    :size=\"att.file.size\"\n                    :loading=\"att.state === 'uploading'\"\n                    :error=\"att.state === 'error' ? att.error : undefined\"\n                    :removable=\"att.state !== 'uploading'\"\n                    compact\n                    @remove=\"removeAttachment(att.id)\" />\n            </div>\n            <div class=\"pk-chatbot-input__fieldset\">\n                <slot name=\"prepend\" />\n                <VvDropdown\n                    v-if=\"\n                        fileUpload &&\n                        fileUpload.enabled &&\n                        (showCameraOption || $slots['additional-actions'])\n                    \"\n                    v-bind=\"{\n                        placement: 'top-start',\n                        modifiers: 'menu',\n                        flip: true,\n                        offset: 3,\n                    }\">\n                    <template #default=\"{ init, toggle, aria }\">\n                        <button\n                            :ref=\"(e: any) => init(e)\"\n                            v-bind=\"aria\"\n                            class=\"pk-chatbot-input__button\"\n                            type=\"button\"\n                            :title=\"$t('action.attachFile')\"\n                            :disabled=\"isInputDisabled\"\n                            @click=\"toggle\">\n                            <VvIcon\n                                name=\"ri:add-line\"\n                                class=\"pk-chatbot-input__button-icon\" />\n                        </button>\n                    </template>\n                    <template #items>\n                        <VvDropdownAction\n                            v-if=\"showCameraOption\"\n                            :disabled=\"\n                                isInputDisabled || attachmentLimitReached\n                            \"\n                            @click=\"openCameraPicker\">\n                            <VvIcon\n                                name=\"ri:camera-line\"\n                                class=\"pk-chatbot-input__dropdown-icon\" />\n                            {{ $t('action.takePhoto') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            :disabled=\"\n                                isInputDisabled || attachmentLimitReached\n                            \"\n                            @click=\"openFilePicker\">\n                            <VvIcon\n                                name=\"ri:attachment-line\"\n                                class=\"pk-chatbot-input__dropdown-icon\" />\n                            {{ $t('action.attachFile') }}\n                        </VvDropdownAction>\n                        <slot name=\"additional-actions\" />\n                    </template>\n                </VvDropdown>\n                <button\n                    v-else-if=\"fileUpload && fileUpload.enabled\"\n                    class=\"pk-chatbot-input__button\"\n                    type=\"button\"\n                    :title=\"$t('action.attachFile')\"\n                    :disabled=\"isInputDisabled || attachmentLimitReached\"\n                    @click=\"openFilePicker\">\n                    <VvIcon\n                        name=\"ri:add-line\"\n                        class=\"pk-chatbot-input__button-icon\" />\n                </button>\n                <input\n                    v-if=\"fileUpload && fileUpload.enabled\"\n                    ref=\"fileInputEl\"\n                    type=\"file\"\n                    hidden\n                    multiple\n                    :accept=\"acceptMimeTypes\"\n                    @change=\"onFileChange\" />\n                <input\n                    v-if=\"fileUpload && fileUpload.enabled && showCameraOption\"\n                    ref=\"cameraInputEl\"\n                    type=\"file\"\n                    capture=\"environment\"\n                    hidden\n                    :accept=\"acceptImageMimeTypes\"\n                    @change=\"onFileChange\" />\n                <div class=\"pk-chatbot-input__content\">\n                    <textarea\n                        ref=\"textareaEl\"\n                        :value=\"localValue\"\n                        class=\"pk-chatbot-input__textarea\"\n                        name=\"message\"\n                        rows=\"1\"\n                        :placeholder\n                        @input=\"onTextareaInput\"\n                        @keydown.enter.prevent=\"handleSubmit\"></textarea>\n                </div>\n                <div\n                    v-if=\"maxMessageLength\"\n                    class=\"pk-chatbot-input__counter\"\n                    :class=\"{ 'pk-chatbot-input__counter--over': isOverLimit }\">\n                    {{ $n(currentLength, 'integer') }}/<span\n                        class=\"opacity-60\"\n                        >{{ $n(maxMessageLength, 'integer') }}</span\n                    >\n                </div>\n                <button\n                    v-if=\"isStreaming\"\n                    class=\"pk-chatbot-input__button\"\n                    type=\"button\"\n                    :title=\"$t('action.stop')\"\n                    @click=\"emit('stop-generation')\">\n                    <VvIcon\n                        name=\"ri:stop-circle-line\"\n                        class=\"pk-chatbot-input__button-icon\" />\n                </button>\n                <button\n                    v-else\n                    class=\"pk-chatbot-input__button\"\n                    type=\"submit\"\n                    :title=\"\n                        isSubmitEnabled\n                            ? $t('action.submit')\n                            : $t('label.disabled')\n                    \"\n                    :disabled=\"!isSubmitEnabled\">\n                    <VvIcon\n                        :name=\"\n                            isSubmitted\n                                ? 'line-md:loading-loop'\n                                : isSubmitEnabled\n                                  ? 'ri:send-ins-fill'\n                                  : 'ri:send-ins-line'\n                        \"\n                        class=\"pk-chatbot-input__button-icon\" />\n                </button>\n            </div>\n        </form>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-input {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        margin-inline: var(--spacing-sm);\n        margin-bottom: var(--spacing-sm);\n\n        &__notice {\n            position: relative;\n            padding: var(--spacing-10) var(--spacing-sm);\n            display: flex;\n            align-items: flex-start;\n            gap: var(--spacing-sm);\n            background-color: var(--color-surface-1);\n            border-top-left-radius: var(--rounded-xl);\n            border-top-right-radius: var(--rounded-xl);\n            transition-property: var(--transition-property-all);\n            transition-duration: var(--duration-300);\n            transition-timing-function: var(--ease-in-out);\n            font-size: var(--text-12);\n            color: var(--color-word-4);\n\n            &::after {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                right: 0;\n                bottom: calc(-1 * var(--spacing-12));\n                height: var(--spacing-12);\n                background-color: var(--color-surface-1);\n                z-index: 1;\n            }\n\n            &-icon {\n                flex-shrink: 0;\n                width: var(--spacing-18);\n                height: var(--spacing-18);\n            }\n\n            &-text {\n                flex: 1;\n                min-width: 0;\n            }\n        }\n\n        &__form {\n            position: relative;\n            display: flex;\n            z-index: 1;\n            flex-direction: column;\n            border-radius: var(--rounded-xl);\n            border: 1px solid var(--color-surface-3);\n            background-color: var(--color-surface);\n            padding: var(--spacing-14);\n            box-shadow: var(--shadow-lg);\n            font-size: var(\n                --text-16\n            ); // prevent ios zoom on input focus by using a font size >= 16px\n            gap: var(--spacing-xs);\n            transition: border-color var(--duration-200) var(--ease-in-out);\n\n            @include media-breakpoint-up('sm', $breakpoints) {\n                font-size: var(--text-14);\n                padding: var(--spacing-10);\n            }\n\n            &:has(:focus-within) {\n                border-color: var(--color-word-5);\n            }\n        }\n\n        &__drop-overlay {\n            position: absolute;\n            inset: 0;\n            z-index: 10;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: var(--spacing-xs);\n            border-radius: var(--rounded-xl);\n            background-color: color-mix(\n                in srgb,\n                var(--color-surface) 85%,\n                transparent\n            );\n            pointer-events: none;\n        }\n\n        &__fieldset {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-xs);\n            flex: 1;\n        }\n\n        &__content {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            gap: var(--spacing-4);\n            min-width: 0;\n            overflow: hidden;\n        }\n\n        &__textarea {\n            display: block;\n            border: none;\n            outline: none;\n            resize: none;\n            width: 100%;\n            max-height: 200px;\n            color: var(--color-word-1);\n            background-color: var(--color-surface);\n\n            &::placeholder {\n                color: var(--color-word-4);\n            }\n        }\n\n        &__attachments {\n            display: flex;\n            flex-wrap: wrap;\n            // Roomy gap so the uniform-height chips breathe in the row.\n            gap: var(--spacing-12);\n            padding-bottom: var(--spacing-xs);\n            border-bottom: 1px solid var(--color-surface-2);\n        }\n\n        &__button {\n            background-color: transparent;\n            border: none;\n            cursor: pointer;\n            color: var(--color-word-1);\n            padding: var(--spacing-4);\n            flex-shrink: 0;\n            transition: var(--transition-colors);\n            border-radius: var(--rounded);\n\n            &:hover {\n                background-color: var(--color-surface-2);\n            }\n\n            &:focus-visible {\n                outline: 1px solid var(--color-surface-5);\n                outline-offset: 0;\n            }\n\n            &:disabled {\n                cursor: not-allowed;\n                opacity: 0.5;\n            }\n\n            &-icon {\n                display: block;\n                width: var(--spacing-20);\n                height: var(--spacing-20);\n            }\n        }\n\n        &__counter {\n            background-color: var(--color-surface-1);\n            border: 1px solid var(--color-surface-3);\n            border-radius: var(--rounded-md);\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n            line-height: 1;\n            padding-inline: var(--spacing-6);\n            padding-block: var(--spacing-4);\n            z-index: 1;\n            font-variant-numeric: tabular-nums;\n            font-family: var(--font-mono);\n            font-weight: var(--font-bold);\n\n            &--over {\n                color: var(--color-danger);\n                border-color: var(--color-danger-lighten-5);\n                font-weight: var(--font-bold);\n            }\n        }\n    }\n</style>\n"],"x_google_ignoreList":[0],"mappings":"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"}
+{"version":3,"file":"PkChatbotInput-BSm3BI7D.js","names":["$t","$slots","$n"],"sources":["../../../../node_modules/.pnpm/autosize@6.0.1/node_modules/autosize/dist/autosize.esm.js","../../../../packages/components/src/chat/PkChatbotInput.vue","../../../../packages/components/src/chat/PkChatbotInput.vue"],"sourcesContent":["var e=new Map;function t(t){var o=e.get(t);o&&o.destroy()}function o(t){var o=e.get(t);o&&o.update()}var r=null;\"undefined\"==typeof window?((r=function(e){return e}).destroy=function(e){return e},r.update=function(e){return e}):((r=function(t,o){return t&&Array.prototype.forEach.call(t.length?t:[t],function(t){return function(t){if(t&&t.nodeName&&\"TEXTAREA\"===t.nodeName&&!e.has(t)){var o,r=null,n=window.getComputedStyle(t),i=(o=t.value,function(){a({testForHeightReduction:\"\"===o||!t.value.startsWith(o),restoreTextAlign:null}),o=t.value}),l=function(o){t.removeEventListener(\"autosize:destroy\",l),t.removeEventListener(\"autosize:update\",s),t.removeEventListener(\"input\",i),window.removeEventListener(\"resize\",s),Object.keys(o).forEach(function(e){return t.style[e]=o[e]}),e.delete(t)}.bind(t,{height:t.style.height,resize:t.style.resize,textAlign:t.style.textAlign,overflowY:t.style.overflowY,overflowX:t.style.overflowX,wordWrap:t.style.wordWrap});t.addEventListener(\"autosize:destroy\",l),t.addEventListener(\"autosize:update\",s),t.addEventListener(\"input\",i),window.addEventListener(\"resize\",s),t.style.overflowX=\"hidden\",t.style.wordWrap=\"break-word\",e.set(t,{destroy:l,update:s}),s()}function a(e){var o,i,l=e.restoreTextAlign,s=void 0===l?null:l,d=e.testForHeightReduction,u=void 0===d||d,c=n.overflowY;if(0!==t.scrollHeight&&(\"vertical\"===n.resize?t.style.resize=\"none\":\"both\"===n.resize&&(t.style.resize=\"horizontal\"),u&&(o=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push([e.parentNode,e.parentNode.scrollTop]),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0],o=e[1];t.style.scrollBehavior=\"auto\",t.scrollTop=o,t.style.scrollBehavior=null})}}(t),t.style.height=\"\"),i=\"content-box\"===n.boxSizing?t.scrollHeight-(parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)):t.scrollHeight+parseFloat(n.borderTopWidth)+parseFloat(n.borderBottomWidth),\"none\"!==n.maxHeight&&i>parseFloat(n.maxHeight)?(\"hidden\"===n.overflowY&&(t.style.overflow=\"scroll\"),i=parseFloat(n.maxHeight)):\"hidden\"!==n.overflowY&&(t.style.overflow=\"hidden\"),t.style.height=i+\"px\",s&&(t.style.textAlign=s),o&&o(),r!==i&&(t.dispatchEvent(new Event(\"autosize:resized\",{bubbles:!0})),r=i),c!==n.overflow&&!s)){var v=n.textAlign;\"hidden\"===n.overflow&&(t.style.textAlign=\"start\"===v?\"end\":\"start\"),a({restoreTextAlign:v,testForHeightReduction:!0})}}function s(){a({testForHeightReduction:!0,restoreTextAlign:null})}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},r.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e});var n=r;export default n;\n","<script setup lang=\"ts\">\n    // @ts-expect-error - no types for autosize\n    import autosize from 'autosize'\n    import {\n        computed,\n        nextTick,\n        onBeforeUnmount,\n        onMounted,\n        ref,\n        useTemplateRef,\n        watch,\n    } from 'vue'\n    import { useDropZone } from '@vueuse/core'\n    import type { AgentFileUpload } from 'models'\n    import type { PendingAttachment } from 'composables'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import PkChatbotFilePreview from './PkChatbotFilePreview.vue'\n\n    // --- Models & Props ---\n\n    const modelValue = defineModel<string>()\n    const pendingAttachments = defineModel<PendingAttachment[]>(\n        'pendingAttachments',\n        { default: () => [] },\n    )\n\n    const emit = defineEmits<{\n        submit: []\n        'stop-generation': []\n        'file-select': [file: File]\n        'dismiss-attachment-notice': []\n    }>()\n\n    const props = defineProps<{\n        placeholder?: string\n        dismissableNotice?: string\n        status?: 'submitted' | 'streaming' | 'ready' | 'error'\n        maxMessageLength?: number\n        fileUpload?: AgentFileUpload\n        enableDragDrop?: boolean\n        attachmentLimitReached?: boolean\n        attachmentNotice?: string\n    }>()\n\n    // --- Template refs ---\n\n    const textareaEl = useTemplateRef<HTMLTextAreaElement>('textareaEl')\n    const fileInputEl = useTemplateRef<HTMLInputElement>('fileInputEl')\n    const cameraInputEl = useTemplateRef<HTMLInputElement>('cameraInputEl')\n    const formEl = useTemplateRef<HTMLFormElement>('formEl')\n\n    // --- Input buffering (decouples typing from reactive model propagation) ---\n\n    const localValue = ref(modelValue.value ?? '')\n    let syncTimer: ReturnType<typeof setTimeout> | null = null\n\n    const cancelSync = () => {\n        if (syncTimer !== null) {\n            clearTimeout(syncTimer)\n            syncTimer = null\n        }\n    }\n\n    const flushSync = () => {\n        cancelSync()\n        modelValue.value = localValue.value\n    }\n\n    const scheduleSync = () => {\n        cancelSync()\n        syncTimer = setTimeout(() => {\n            modelValue.value = localValue.value\n            syncTimer = null\n        }, 300)\n    }\n\n    const onTextareaInput = () => {\n        localValue.value = textareaEl.value?.value ?? ''\n        scheduleSync()\n    }\n\n    watch(modelValue, (v) => {\n        if (v !== localValue.value) {\n            localValue.value = v ?? ''\n            nextTick(() => {\n                if (textareaEl.value) {\n                    autosize.update(textareaEl.value)\n                }\n            })\n        }\n    })\n\n    // --- Status computeds ---\n\n    const isStreaming = computed(() => props.status === 'streaming')\n    const isSubmitted = computed(() => props.status === 'submitted')\n    const isInputDisabled = computed(\n        () => isStreaming.value || isSubmitted.value,\n    )\n\n    // --- Validation ---\n\n    const currentLength = computed(() => localValue.value.length)\n\n    const isOverLimit = computed(\n        () =>\n            props.maxMessageLength !== undefined &&\n            currentLength.value > props.maxMessageLength,\n    )\n\n    const isUploadingAnyFile = computed(() =>\n        pendingAttachments.value.some((a) => a.state === 'uploading'),\n    )\n\n    const isSubmitEnabled = computed(() => {\n        if (\n            isInputDisabled.value ||\n            isUploadingAnyFile.value ||\n            isOverLimit.value\n        ) {\n            return false\n        }\n        return localValue.value.trim().length > 0\n    })\n\n    // --- File upload ---\n\n    const hasCaptureSupport = 'capture' in document.createElement('input')\n\n    const acceptMimeTypes = computed(\n        () => props.fileUpload?.allowedMimeTypes?.join(',') ?? '',\n    )\n\n    const acceptImageMimeTypes = computed(() =>\n        (props.fileUpload?.allowedMimeTypes ?? [])\n            .filter((m) => m.startsWith('image/'))\n            .join(','),\n    )\n\n    const showCameraOption = computed(\n        () => hasCaptureSupport && acceptImageMimeTypes.value.length > 0,\n    )\n\n    const openFilePicker = () => {\n        fileInputEl.value?.click()\n    }\n\n    const openCameraPicker = () => {\n        cameraInputEl.value?.click()\n    }\n\n    // The store owns the attachment limits and drops any overflow; the input\n    // just forwards every picked/dropped file.\n    const emitFiles = (files: File[]) => {\n        for (const file of files) {\n            emit('file-select', file)\n        }\n    }\n\n    const onFileChange = (event: Event) => {\n        const input = event.target as HTMLInputElement\n        emitFiles(Array.from(input.files ?? []))\n        input.value = ''\n    }\n\n    // --- Attachments ---\n\n    const removeAttachment = (id: string) => {\n        const att = pendingAttachments.value.find((a) => a.id === id)\n        if (att) {\n            URL.revokeObjectURL(att.localUrl)\n        }\n        pendingAttachments.value = pendingAttachments.value.filter(\n            (a) => a.id !== id,\n        )\n    }\n\n    // --- Drag & drop ---\n\n    const isDragDropEnabled = computed(\n        () => (props.enableDragDrop ?? true) && !!props.fileUpload?.enabled,\n    )\n\n    const handleDrop = (files: File[] | null) => {\n        if (!isDragDropEnabled.value || !files) {\n            return\n        }\n        emitFiles(files)\n    }\n\n    const { isOverDropZone } = useDropZone(formEl, {\n        dataTypes: computed(() => props.fileUpload?.allowedMimeTypes ?? []),\n        onDrop: handleDrop,\n    })\n\n    // --- Notice queue (single slot above the input, highest priority wins) ---\n\n    type InputNotice = {\n        id: string\n        text?: string\n        markdown?: string\n        icon?: string\n        dismiss?: () => void\n    }\n\n    const isDismissableNoticeVisible = ref(true)\n    const closeDismissableNotice = () => {\n        isDismissableNoticeVisible.value = false\n    }\n\n    const activeNotice = computed<InputNotice | null>(() => {\n        // Order = priority. The alert takes precedence over the notice.\n        if (props.attachmentNotice) {\n            return {\n                id: 'limit',\n                icon: 'ri:information-line',\n                text: props.attachmentNotice,\n                dismiss: () => emit('dismiss-attachment-notice'),\n            }\n        }\n        if (props.dismissableNotice && isDismissableNoticeVisible.value) {\n            return {\n                id: 'dismissable',\n                markdown: props.dismissableNotice,\n                dismiss: closeDismissableNotice,\n            }\n        }\n        return null\n    })\n\n    // --- Submit ---\n\n    const handleSubmit = () => {\n        if (!isSubmitEnabled.value) {\n            return\n        }\n        flushSync()\n        emit('submit')\n        localValue.value = ''\n        modelValue.value = ''\n        nextTick(() => {\n            if (textareaEl.value) {\n                textareaEl.value.value = ''\n                autosize.update(textareaEl.value)\n            }\n        })\n    }\n\n    // --- Lifecycle ---\n\n    onMounted(() => {\n        if (textareaEl.value) {\n            autosize(textareaEl.value)\n        }\n    })\n\n    onBeforeUnmount(() => {\n        cancelSync()\n        if (textareaEl.value) {\n            autosize.destroy(textareaEl.value)\n        }\n        for (const att of pendingAttachments.value) {\n            URL.revokeObjectURL(att.localUrl)\n        }\n    })\n</script>\n\n<template>\n    <div class=\"pk-chatbot-input\">\n        <div\n            v-if=\"activeNotice\"\n            :key=\"activeNotice.id\"\n            class=\"pk-chatbot-input__notice\"\n            role=\"status\">\n            <VvIcon\n                v-if=\"activeNotice.icon\"\n                :name=\"activeNotice.icon\"\n                class=\"pk-chatbot-input__notice-icon\" />\n            <PkStreamingMarkdown\n                v-if=\"activeNotice.markdown\"\n                :markdown=\"activeNotice.markdown\"\n                class=\"wysiwyg pk-chatbot-input__notice-text\" />\n            <span v-else class=\"pk-chatbot-input__notice-text\">\n                {{ activeNotice.text }}\n            </span>\n            <VvButton\n                v-if=\"activeNotice.dismiss\"\n                :title=\"$t('action.close')\"\n                modifiers=\"action-quiet\"\n                icon=\"ri:close-line\"\n                class=\"w-18 h-18\"\n                @click=\"activeNotice.dismiss()\" />\n        </div>\n        <form\n            ref=\"formEl\"\n            class=\"pk-chatbot-input__form\"\n            @submit.prevent=\"handleSubmit\">\n            <div\n                v-if=\"isOverDropZone && isDragDropEnabled\"\n                class=\"pk-chatbot-input__drop-overlay\">\n                <VvIcon\n                    name=\"ri:upload-cloud-2-line\"\n                    class=\"pk-chatbot-input__drop-overlay-icon\" />\n                <span>{{ $t('action.dropFile') }}</span>\n            </div>\n            <div\n                v-if=\"pendingAttachments.length\"\n                class=\"pk-chatbot-input__attachments\">\n                <PkChatbotFilePreview\n                    v-for=\"att in pendingAttachments\"\n                    :key=\"att.id\"\n                    :media-type=\"att.file.type\"\n                    :url=\"att.localUrl\"\n                    :filename=\"att.file.name\"\n                    :size=\"att.file.size\"\n                    :loading=\"att.state === 'uploading'\"\n                    :error=\"att.state === 'error' ? att.error : undefined\"\n                    :removable=\"att.state !== 'uploading'\"\n                    compact\n                    @remove=\"removeAttachment(att.id)\" />\n            </div>\n            <div class=\"pk-chatbot-input__fieldset\">\n                <slot name=\"prepend\" />\n                <VvDropdown\n                    v-if=\"\n                        fileUpload &&\n                        fileUpload.enabled &&\n                        (showCameraOption || $slots['additional-actions'])\n                    \"\n                    v-bind=\"{\n                        placement: 'top-start',\n                        modifiers: 'menu',\n                        flip: true,\n                        offset: 3,\n                    }\">\n                    <template #default=\"{ init, toggle, aria }\">\n                        <button\n                            :ref=\"(e: any) => init(e)\"\n                            v-bind=\"aria\"\n                            class=\"pk-chatbot-input__button\"\n                            type=\"button\"\n                            :title=\"$t('action.attachFile')\"\n                            :disabled=\"isInputDisabled\"\n                            @click=\"toggle\">\n                            <VvIcon\n                                name=\"ri:add-line\"\n                                class=\"pk-chatbot-input__button-icon\" />\n                        </button>\n                    </template>\n                    <template #items>\n                        <VvDropdownAction\n                            v-if=\"showCameraOption\"\n                            :disabled=\"\n                                isInputDisabled || attachmentLimitReached\n                            \"\n                            @click=\"openCameraPicker\">\n                            <VvIcon\n                                name=\"ri:camera-line\"\n                                class=\"pk-chatbot-input__dropdown-icon\" />\n                            {{ $t('action.takePhoto') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            :disabled=\"\n                                isInputDisabled || attachmentLimitReached\n                            \"\n                            @click=\"openFilePicker\">\n                            <VvIcon\n                                name=\"ri:attachment-line\"\n                                class=\"pk-chatbot-input__dropdown-icon\" />\n                            {{ $t('action.attachFile') }}\n                        </VvDropdownAction>\n                        <slot name=\"additional-actions\" />\n                    </template>\n                </VvDropdown>\n                <button\n                    v-else-if=\"fileUpload && fileUpload.enabled\"\n                    class=\"pk-chatbot-input__button\"\n                    type=\"button\"\n                    :title=\"$t('action.attachFile')\"\n                    :disabled=\"isInputDisabled || attachmentLimitReached\"\n                    @click=\"openFilePicker\">\n                    <VvIcon\n                        name=\"ri:add-line\"\n                        class=\"pk-chatbot-input__button-icon\" />\n                </button>\n                <input\n                    v-if=\"fileUpload && fileUpload.enabled\"\n                    ref=\"fileInputEl\"\n                    type=\"file\"\n                    hidden\n                    multiple\n                    :accept=\"acceptMimeTypes\"\n                    @change=\"onFileChange\" />\n                <input\n                    v-if=\"fileUpload && fileUpload.enabled && showCameraOption\"\n                    ref=\"cameraInputEl\"\n                    type=\"file\"\n                    capture=\"environment\"\n                    hidden\n                    :accept=\"acceptImageMimeTypes\"\n                    @change=\"onFileChange\" />\n                <div class=\"pk-chatbot-input__content\">\n                    <textarea\n                        ref=\"textareaEl\"\n                        :value=\"localValue\"\n                        class=\"pk-chatbot-input__textarea\"\n                        name=\"message\"\n                        rows=\"1\"\n                        :placeholder\n                        @input=\"onTextareaInput\"\n                        @keydown.enter.prevent=\"handleSubmit\"></textarea>\n                </div>\n                <div\n                    v-if=\"maxMessageLength\"\n                    class=\"pk-chatbot-input__counter\"\n                    :class=\"{ 'pk-chatbot-input__counter--over': isOverLimit }\">\n                    {{ $n(currentLength, 'integer') }}/<span\n                        class=\"opacity-60\"\n                        >{{ $n(maxMessageLength, 'integer') }}</span\n                    >\n                </div>\n                <button\n                    v-if=\"isStreaming\"\n                    class=\"pk-chatbot-input__button\"\n                    type=\"button\"\n                    :title=\"$t('action.stop')\"\n                    @click=\"emit('stop-generation')\">\n                    <VvIcon\n                        name=\"ri:stop-circle-line\"\n                        class=\"pk-chatbot-input__button-icon\" />\n                </button>\n                <button\n                    v-else\n                    class=\"pk-chatbot-input__button\"\n                    type=\"submit\"\n                    :title=\"\n                        isSubmitEnabled\n                            ? $t('action.submit')\n                            : $t('label.disabled')\n                    \"\n                    :disabled=\"!isSubmitEnabled\">\n                    <VvIcon\n                        :name=\"\n                            isSubmitted\n                                ? 'line-md:loading-loop'\n                                : isSubmitEnabled\n                                  ? 'ri:send-ins-fill'\n                                  : 'ri:send-ins-line'\n                        \"\n                        class=\"pk-chatbot-input__button-icon\" />\n                </button>\n            </div>\n        </form>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-input {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        margin-inline: var(--spacing-sm);\n        margin-bottom: var(--spacing-sm);\n\n        &__notice {\n            position: relative;\n            padding: var(--spacing-10) var(--spacing-sm);\n            display: flex;\n            align-items: flex-start;\n            gap: var(--spacing-sm);\n            background-color: var(--color-surface-1);\n            border-top-left-radius: var(--rounded-xl);\n            border-top-right-radius: var(--rounded-xl);\n            transition-property: var(--transition-property-all);\n            transition-duration: var(--duration-300);\n            transition-timing-function: var(--ease-in-out);\n            font-size: var(--text-12);\n            color: var(--color-word-4);\n\n            &::after {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                right: 0;\n                bottom: calc(-1 * var(--spacing-12));\n                height: var(--spacing-12);\n                background-color: var(--color-surface-1);\n                z-index: 1;\n            }\n\n            &-icon {\n                flex-shrink: 0;\n                width: var(--spacing-18);\n                height: var(--spacing-18);\n            }\n\n            &-text {\n                flex: 1;\n                min-width: 0;\n            }\n        }\n\n        &__form {\n            position: relative;\n            display: flex;\n            z-index: 1;\n            flex-direction: column;\n            border-radius: var(--rounded-xl);\n            border: 1px solid var(--color-surface-3);\n            background-color: var(--color-surface);\n            padding: var(--spacing-14);\n            box-shadow: var(--shadow-lg);\n            font-size: var(\n                --text-16\n            ); // prevent ios zoom on input focus by using a font size >= 16px\n            gap: var(--spacing-xs);\n            transition: border-color var(--duration-200) var(--ease-in-out);\n\n            @include media-breakpoint-up('sm', $breakpoints) {\n                font-size: var(--text-14);\n                padding: var(--spacing-10);\n            }\n\n            &:has(:focus-within) {\n                border-color: var(--color-word-5);\n            }\n        }\n\n        &__drop-overlay {\n            position: absolute;\n            inset: 0;\n            z-index: 10;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: var(--spacing-xs);\n            border-radius: var(--rounded-xl);\n            background-color: color-mix(\n                in srgb,\n                var(--color-surface) 85%,\n                transparent\n            );\n            pointer-events: none;\n        }\n\n        &__fieldset {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-xs);\n            flex: 1;\n        }\n\n        &__content {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            gap: var(--spacing-4);\n            min-width: 0;\n            overflow: hidden;\n        }\n\n        &__textarea {\n            display: block;\n            border: none;\n            outline: none;\n            resize: none;\n            width: 100%;\n            max-height: 200px;\n            color: var(--color-word-1);\n            background-color: var(--color-surface);\n\n            &::placeholder {\n                color: var(--color-word-4);\n            }\n        }\n\n        &__attachments {\n            display: flex;\n            flex-wrap: wrap;\n            // Roomy gap so the uniform-height chips breathe in the row.\n            gap: var(--spacing-12);\n            padding-bottom: var(--spacing-xs);\n            border-bottom: 1px solid var(--color-surface-2);\n        }\n\n        &__button {\n            background-color: transparent;\n            border: none;\n            cursor: pointer;\n            color: var(--color-word-1);\n            padding: var(--spacing-4);\n            flex-shrink: 0;\n            transition: var(--transition-colors);\n            border-radius: var(--rounded);\n\n            &:hover {\n                background-color: var(--color-surface-2);\n            }\n\n            &:focus-visible {\n                outline: 1px solid var(--color-surface-5);\n                outline-offset: 0;\n            }\n\n            &:disabled {\n                cursor: not-allowed;\n                opacity: 0.5;\n            }\n\n            &-icon {\n                display: block;\n                width: var(--spacing-20);\n                height: var(--spacing-20);\n            }\n        }\n\n        &__counter {\n            background-color: var(--color-surface-1);\n            border: 1px solid var(--color-surface-3);\n            border-radius: var(--rounded-md);\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n            line-height: 1;\n            padding-inline: var(--spacing-6);\n            padding-block: var(--spacing-4);\n            z-index: 1;\n            font-variant-numeric: tabular-nums;\n            font-family: var(--font-mono);\n            font-weight: var(--font-bold);\n\n            &--over {\n                color: var(--color-danger);\n                border-color: var(--color-danger-lighten-5);\n                font-weight: var(--font-bold);\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    // @ts-expect-error - no types for autosize\n    import autosize from 'autosize'\n    import {\n        computed,\n        nextTick,\n        onBeforeUnmount,\n        onMounted,\n        ref,\n        useTemplateRef,\n        watch,\n    } from 'vue'\n    import { useDropZone } from '@vueuse/core'\n    import type { AgentFileUpload } from 'models'\n    import type { PendingAttachment } from 'composables'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import PkChatbotFilePreview from './PkChatbotFilePreview.vue'\n\n    // --- Models & Props ---\n\n    const modelValue = defineModel<string>()\n    const pendingAttachments = defineModel<PendingAttachment[]>(\n        'pendingAttachments',\n        { default: () => [] },\n    )\n\n    const emit = defineEmits<{\n        submit: []\n        'stop-generation': []\n        'file-select': [file: File]\n        'dismiss-attachment-notice': []\n    }>()\n\n    const props = defineProps<{\n        placeholder?: string\n        dismissableNotice?: string\n        status?: 'submitted' | 'streaming' | 'ready' | 'error'\n        maxMessageLength?: number\n        fileUpload?: AgentFileUpload\n        enableDragDrop?: boolean\n        attachmentLimitReached?: boolean\n        attachmentNotice?: string\n    }>()\n\n    // --- Template refs ---\n\n    const textareaEl = useTemplateRef<HTMLTextAreaElement>('textareaEl')\n    const fileInputEl = useTemplateRef<HTMLInputElement>('fileInputEl')\n    const cameraInputEl = useTemplateRef<HTMLInputElement>('cameraInputEl')\n    const formEl = useTemplateRef<HTMLFormElement>('formEl')\n\n    // --- Input buffering (decouples typing from reactive model propagation) ---\n\n    const localValue = ref(modelValue.value ?? '')\n    let syncTimer: ReturnType<typeof setTimeout> | null = null\n\n    const cancelSync = () => {\n        if (syncTimer !== null) {\n            clearTimeout(syncTimer)\n            syncTimer = null\n        }\n    }\n\n    const flushSync = () => {\n        cancelSync()\n        modelValue.value = localValue.value\n    }\n\n    const scheduleSync = () => {\n        cancelSync()\n        syncTimer = setTimeout(() => {\n            modelValue.value = localValue.value\n            syncTimer = null\n        }, 300)\n    }\n\n    const onTextareaInput = () => {\n        localValue.value = textareaEl.value?.value ?? ''\n        scheduleSync()\n    }\n\n    watch(modelValue, (v) => {\n        if (v !== localValue.value) {\n            localValue.value = v ?? ''\n            nextTick(() => {\n                if (textareaEl.value) {\n                    autosize.update(textareaEl.value)\n                }\n            })\n        }\n    })\n\n    // --- Status computeds ---\n\n    const isStreaming = computed(() => props.status === 'streaming')\n    const isSubmitted = computed(() => props.status === 'submitted')\n    const isInputDisabled = computed(\n        () => isStreaming.value || isSubmitted.value,\n    )\n\n    // --- Validation ---\n\n    const currentLength = computed(() => localValue.value.length)\n\n    const isOverLimit = computed(\n        () =>\n            props.maxMessageLength !== undefined &&\n            currentLength.value > props.maxMessageLength,\n    )\n\n    const isUploadingAnyFile = computed(() =>\n        pendingAttachments.value.some((a) => a.state === 'uploading'),\n    )\n\n    const isSubmitEnabled = computed(() => {\n        if (\n            isInputDisabled.value ||\n            isUploadingAnyFile.value ||\n            isOverLimit.value\n        ) {\n            return false\n        }\n        return localValue.value.trim().length > 0\n    })\n\n    // --- File upload ---\n\n    const hasCaptureSupport = 'capture' in document.createElement('input')\n\n    const acceptMimeTypes = computed(\n        () => props.fileUpload?.allowedMimeTypes?.join(',') ?? '',\n    )\n\n    const acceptImageMimeTypes = computed(() =>\n        (props.fileUpload?.allowedMimeTypes ?? [])\n            .filter((m) => m.startsWith('image/'))\n            .join(','),\n    )\n\n    const showCameraOption = computed(\n        () => hasCaptureSupport && acceptImageMimeTypes.value.length > 0,\n    )\n\n    const openFilePicker = () => {\n        fileInputEl.value?.click()\n    }\n\n    const openCameraPicker = () => {\n        cameraInputEl.value?.click()\n    }\n\n    // The store owns the attachment limits and drops any overflow; the input\n    // just forwards every picked/dropped file.\n    const emitFiles = (files: File[]) => {\n        for (const file of files) {\n            emit('file-select', file)\n        }\n    }\n\n    const onFileChange = (event: Event) => {\n        const input = event.target as HTMLInputElement\n        emitFiles(Array.from(input.files ?? []))\n        input.value = ''\n    }\n\n    // --- Attachments ---\n\n    const removeAttachment = (id: string) => {\n        const att = pendingAttachments.value.find((a) => a.id === id)\n        if (att) {\n            URL.revokeObjectURL(att.localUrl)\n        }\n        pendingAttachments.value = pendingAttachments.value.filter(\n            (a) => a.id !== id,\n        )\n    }\n\n    // --- Drag & drop ---\n\n    const isDragDropEnabled = computed(\n        () => (props.enableDragDrop ?? true) && !!props.fileUpload?.enabled,\n    )\n\n    const handleDrop = (files: File[] | null) => {\n        if (!isDragDropEnabled.value || !files) {\n            return\n        }\n        emitFiles(files)\n    }\n\n    const { isOverDropZone } = useDropZone(formEl, {\n        dataTypes: computed(() => props.fileUpload?.allowedMimeTypes ?? []),\n        onDrop: handleDrop,\n    })\n\n    // --- Notice queue (single slot above the input, highest priority wins) ---\n\n    type InputNotice = {\n        id: string\n        text?: string\n        markdown?: string\n        icon?: string\n        dismiss?: () => void\n    }\n\n    const isDismissableNoticeVisible = ref(true)\n    const closeDismissableNotice = () => {\n        isDismissableNoticeVisible.value = false\n    }\n\n    const activeNotice = computed<InputNotice | null>(() => {\n        // Order = priority. The alert takes precedence over the notice.\n        if (props.attachmentNotice) {\n            return {\n                id: 'limit',\n                icon: 'ri:information-line',\n                text: props.attachmentNotice,\n                dismiss: () => emit('dismiss-attachment-notice'),\n            }\n        }\n        if (props.dismissableNotice && isDismissableNoticeVisible.value) {\n            return {\n                id: 'dismissable',\n                markdown: props.dismissableNotice,\n                dismiss: closeDismissableNotice,\n            }\n        }\n        return null\n    })\n\n    // --- Submit ---\n\n    const handleSubmit = () => {\n        if (!isSubmitEnabled.value) {\n            return\n        }\n        flushSync()\n        emit('submit')\n        localValue.value = ''\n        modelValue.value = ''\n        nextTick(() => {\n            if (textareaEl.value) {\n                textareaEl.value.value = ''\n                autosize.update(textareaEl.value)\n            }\n        })\n    }\n\n    // --- Lifecycle ---\n\n    onMounted(() => {\n        if (textareaEl.value) {\n            autosize(textareaEl.value)\n        }\n    })\n\n    onBeforeUnmount(() => {\n        cancelSync()\n        if (textareaEl.value) {\n            autosize.destroy(textareaEl.value)\n        }\n        for (const att of pendingAttachments.value) {\n            URL.revokeObjectURL(att.localUrl)\n        }\n    })\n</script>\n\n<template>\n    <div class=\"pk-chatbot-input\">\n        <div\n            v-if=\"activeNotice\"\n            :key=\"activeNotice.id\"\n            class=\"pk-chatbot-input__notice\"\n            role=\"status\">\n            <VvIcon\n                v-if=\"activeNotice.icon\"\n                :name=\"activeNotice.icon\"\n                class=\"pk-chatbot-input__notice-icon\" />\n            <PkStreamingMarkdown\n                v-if=\"activeNotice.markdown\"\n                :markdown=\"activeNotice.markdown\"\n                class=\"wysiwyg pk-chatbot-input__notice-text\" />\n            <span v-else class=\"pk-chatbot-input__notice-text\">\n                {{ activeNotice.text }}\n            </span>\n            <VvButton\n                v-if=\"activeNotice.dismiss\"\n                :title=\"$t('action.close')\"\n                modifiers=\"action-quiet\"\n                icon=\"ri:close-line\"\n                class=\"w-18 h-18\"\n                @click=\"activeNotice.dismiss()\" />\n        </div>\n        <form\n            ref=\"formEl\"\n            class=\"pk-chatbot-input__form\"\n            @submit.prevent=\"handleSubmit\">\n            <div\n                v-if=\"isOverDropZone && isDragDropEnabled\"\n                class=\"pk-chatbot-input__drop-overlay\">\n                <VvIcon\n                    name=\"ri:upload-cloud-2-line\"\n                    class=\"pk-chatbot-input__drop-overlay-icon\" />\n                <span>{{ $t('action.dropFile') }}</span>\n            </div>\n            <div\n                v-if=\"pendingAttachments.length\"\n                class=\"pk-chatbot-input__attachments\">\n                <PkChatbotFilePreview\n                    v-for=\"att in pendingAttachments\"\n                    :key=\"att.id\"\n                    :media-type=\"att.file.type\"\n                    :url=\"att.localUrl\"\n                    :filename=\"att.file.name\"\n                    :size=\"att.file.size\"\n                    :loading=\"att.state === 'uploading'\"\n                    :error=\"att.state === 'error' ? att.error : undefined\"\n                    :removable=\"att.state !== 'uploading'\"\n                    compact\n                    @remove=\"removeAttachment(att.id)\" />\n            </div>\n            <div class=\"pk-chatbot-input__fieldset\">\n                <slot name=\"prepend\" />\n                <VvDropdown\n                    v-if=\"\n                        fileUpload &&\n                        fileUpload.enabled &&\n                        (showCameraOption || $slots['additional-actions'])\n                    \"\n                    v-bind=\"{\n                        placement: 'top-start',\n                        modifiers: 'menu',\n                        flip: true,\n                        offset: 3,\n                    }\">\n                    <template #default=\"{ init, toggle, aria }\">\n                        <button\n                            :ref=\"(e: any) => init(e)\"\n                            v-bind=\"aria\"\n                            class=\"pk-chatbot-input__button\"\n                            type=\"button\"\n                            :title=\"$t('action.attachFile')\"\n                            :disabled=\"isInputDisabled\"\n                            @click=\"toggle\">\n                            <VvIcon\n                                name=\"ri:add-line\"\n                                class=\"pk-chatbot-input__button-icon\" />\n                        </button>\n                    </template>\n                    <template #items>\n                        <VvDropdownAction\n                            v-if=\"showCameraOption\"\n                            :disabled=\"\n                                isInputDisabled || attachmentLimitReached\n                            \"\n                            @click=\"openCameraPicker\">\n                            <VvIcon\n                                name=\"ri:camera-line\"\n                                class=\"pk-chatbot-input__dropdown-icon\" />\n                            {{ $t('action.takePhoto') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            :disabled=\"\n                                isInputDisabled || attachmentLimitReached\n                            \"\n                            @click=\"openFilePicker\">\n                            <VvIcon\n                                name=\"ri:attachment-line\"\n                                class=\"pk-chatbot-input__dropdown-icon\" />\n                            {{ $t('action.attachFile') }}\n                        </VvDropdownAction>\n                        <slot name=\"additional-actions\" />\n                    </template>\n                </VvDropdown>\n                <button\n                    v-else-if=\"fileUpload && fileUpload.enabled\"\n                    class=\"pk-chatbot-input__button\"\n                    type=\"button\"\n                    :title=\"$t('action.attachFile')\"\n                    :disabled=\"isInputDisabled || attachmentLimitReached\"\n                    @click=\"openFilePicker\">\n                    <VvIcon\n                        name=\"ri:add-line\"\n                        class=\"pk-chatbot-input__button-icon\" />\n                </button>\n                <input\n                    v-if=\"fileUpload && fileUpload.enabled\"\n                    ref=\"fileInputEl\"\n                    type=\"file\"\n                    hidden\n                    multiple\n                    :accept=\"acceptMimeTypes\"\n                    @change=\"onFileChange\" />\n                <input\n                    v-if=\"fileUpload && fileUpload.enabled && showCameraOption\"\n                    ref=\"cameraInputEl\"\n                    type=\"file\"\n                    capture=\"environment\"\n                    hidden\n                    :accept=\"acceptImageMimeTypes\"\n                    @change=\"onFileChange\" />\n                <div class=\"pk-chatbot-input__content\">\n                    <textarea\n                        ref=\"textareaEl\"\n                        :value=\"localValue\"\n                        class=\"pk-chatbot-input__textarea\"\n                        name=\"message\"\n                        rows=\"1\"\n                        :placeholder\n                        @input=\"onTextareaInput\"\n                        @keydown.enter.prevent=\"handleSubmit\"></textarea>\n                </div>\n                <div\n                    v-if=\"maxMessageLength\"\n                    class=\"pk-chatbot-input__counter\"\n                    :class=\"{ 'pk-chatbot-input__counter--over': isOverLimit }\">\n                    {{ $n(currentLength, 'integer') }}/<span\n                        class=\"opacity-60\"\n                        >{{ $n(maxMessageLength, 'integer') }}</span\n                    >\n                </div>\n                <button\n                    v-if=\"isStreaming\"\n                    class=\"pk-chatbot-input__button\"\n                    type=\"button\"\n                    :title=\"$t('action.stop')\"\n                    @click=\"emit('stop-generation')\">\n                    <VvIcon\n                        name=\"ri:stop-circle-line\"\n                        class=\"pk-chatbot-input__button-icon\" />\n                </button>\n                <button\n                    v-else\n                    class=\"pk-chatbot-input__button\"\n                    type=\"submit\"\n                    :title=\"\n                        isSubmitEnabled\n                            ? $t('action.submit')\n                            : $t('label.disabled')\n                    \"\n                    :disabled=\"!isSubmitEnabled\">\n                    <VvIcon\n                        :name=\"\n                            isSubmitted\n                                ? 'line-md:loading-loop'\n                                : isSubmitEnabled\n                                  ? 'ri:send-ins-fill'\n                                  : 'ri:send-ins-line'\n                        \"\n                        class=\"pk-chatbot-input__button-icon\" />\n                </button>\n            </div>\n        </form>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-input {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        margin-inline: var(--spacing-sm);\n        margin-bottom: var(--spacing-sm);\n\n        &__notice {\n            position: relative;\n            padding: var(--spacing-10) var(--spacing-sm);\n            display: flex;\n            align-items: flex-start;\n            gap: var(--spacing-sm);\n            background-color: var(--color-surface-1);\n            border-top-left-radius: var(--rounded-xl);\n            border-top-right-radius: var(--rounded-xl);\n            transition-property: var(--transition-property-all);\n            transition-duration: var(--duration-300);\n            transition-timing-function: var(--ease-in-out);\n            font-size: var(--text-12);\n            color: var(--color-word-4);\n\n            &::after {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                right: 0;\n                bottom: calc(-1 * var(--spacing-12));\n                height: var(--spacing-12);\n                background-color: var(--color-surface-1);\n                z-index: 1;\n            }\n\n            &-icon {\n                flex-shrink: 0;\n                width: var(--spacing-18);\n                height: var(--spacing-18);\n            }\n\n            &-text {\n                flex: 1;\n                min-width: 0;\n            }\n        }\n\n        &__form {\n            position: relative;\n            display: flex;\n            z-index: 1;\n            flex-direction: column;\n            border-radius: var(--rounded-xl);\n            border: 1px solid var(--color-surface-3);\n            background-color: var(--color-surface);\n            padding: var(--spacing-14);\n            box-shadow: var(--shadow-lg);\n            font-size: var(\n                --text-16\n            ); // prevent ios zoom on input focus by using a font size >= 16px\n            gap: var(--spacing-xs);\n            transition: border-color var(--duration-200) var(--ease-in-out);\n\n            @include media-breakpoint-up('sm', $breakpoints) {\n                font-size: var(--text-14);\n                padding: var(--spacing-10);\n            }\n\n            &:has(:focus-within) {\n                border-color: var(--color-word-5);\n            }\n        }\n\n        &__drop-overlay {\n            position: absolute;\n            inset: 0;\n            z-index: 10;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: var(--spacing-xs);\n            border-radius: var(--rounded-xl);\n            background-color: color-mix(\n                in srgb,\n                var(--color-surface) 85%,\n                transparent\n            );\n            pointer-events: none;\n        }\n\n        &__fieldset {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-xs);\n            flex: 1;\n        }\n\n        &__content {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            gap: var(--spacing-4);\n            min-width: 0;\n            overflow: hidden;\n        }\n\n        &__textarea {\n            display: block;\n            border: none;\n            outline: none;\n            resize: none;\n            width: 100%;\n            max-height: 200px;\n            color: var(--color-word-1);\n            background-color: var(--color-surface);\n\n            &::placeholder {\n                color: var(--color-word-4);\n            }\n        }\n\n        &__attachments {\n            display: flex;\n            flex-wrap: wrap;\n            // Roomy gap so the uniform-height chips breathe in the row.\n            gap: var(--spacing-12);\n            padding-bottom: var(--spacing-xs);\n            border-bottom: 1px solid var(--color-surface-2);\n        }\n\n        &__button {\n            background-color: transparent;\n            border: none;\n            cursor: pointer;\n            color: var(--color-word-1);\n            padding: var(--spacing-4);\n            flex-shrink: 0;\n            transition: var(--transition-colors);\n            border-radius: var(--rounded);\n\n            &:hover {\n                background-color: var(--color-surface-2);\n            }\n\n            &:focus-visible {\n                outline: 1px solid var(--color-surface-5);\n                outline-offset: 0;\n            }\n\n            &:disabled {\n                cursor: not-allowed;\n                opacity: 0.5;\n            }\n\n            &-icon {\n                display: block;\n                width: var(--spacing-20);\n                height: var(--spacing-20);\n            }\n        }\n\n        &__counter {\n            background-color: var(--color-surface-1);\n            border: 1px solid var(--color-surface-3);\n            border-radius: var(--rounded-md);\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n            line-height: 1;\n            padding-inline: var(--spacing-6);\n            padding-block: var(--spacing-4);\n            z-index: 1;\n            font-variant-numeric: tabular-nums;\n            font-family: var(--font-mono);\n            font-weight: var(--font-bold);\n\n            &--over {\n                color: var(--color-danger);\n                border-color: var(--color-danger-lighten-5);\n                font-weight: var(--font-bold);\n            }\n        }\n    }\n</style>\n"],"x_google_ignoreList":[0],"mappings":"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"}