@8wave/ai-elements 0.90.0 → 0.91.0

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

@@ -1 +0,0 @@
-{"version":3,"file":"PkChatbotFilePreview-DG887KhT.js","names":["$t","$emit"],"sources":["../../../../packages/components/src/composables/useLightbox.ts","../../../../packages/components/src/chat/PkChatbotFilePreview.vue","../../../../packages/components/src/chat/PkChatbotFilePreview.vue"],"sourcesContent":["import {\n    onBeforeUnmount,\n    ref,\n    shallowRef,\n    type Ref,\n    type ShallowRef,\n} from 'vue'\nimport type PhotoSwipeLightbox from 'photoswipe/lightbox'\nimport type PhotoSwipe from 'photoswipe'\nimport { loadCdnCss } from 'utils'\n\nconst PHOTOSWIPE_CSS =\n    'https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css'\n\nconst DEFAULT_IMAGE_SIZE = { width: 1200, height: 800 }\n\nexport interface LightboxImage {\n    url: string\n    caption?: string\n    alt?: string\n    /** Natural width in px — used by PhotoSwipe for proper sizing. */\n    width?: number\n    /** Natural height in px — used by PhotoSwipe for proper sizing. */\n    height?: number\n}\n\nexport interface LightboxOptions {\n    /** Container element whose child anchors are the gallery items */\n    gallery: Ref<HTMLElement | undefined>\n    /** CSS selector for gallery items inside the container (default: `'a[data-pswp-src]'`) */\n    children?: string\n    loop?: boolean\n    /** Show a download button in the lightbox toolbar */\n    downloadable?: boolean\n    /** Show an open-in-new-tab button in the lightbox toolbar */\n    openInNewTab?: boolean\n}\n\nexport interface UseLightboxReturn {\n    lightbox: ShallowRef<PhotoSwipeLightbox | null>\n    /** Initialises PhotoSwipe. Call this inside `onMounted`. */\n    init: () => Promise<void>\n}\n\n/**\n * Encapsulates PhotoSwipe 5 initialisation, toolbar customisation, and lifecycle cleanup.\n * CSS is injected into `document.head` so the overlay works in both regular DOM and Shadow DOM.\n *\n * Usage:\n * ```ts\n * const { init } = useLightbox({ gallery: galleryRef, downloadable: true })\n * onMounted(init)\n * ```\n */\nexport function useLightbox(options: LightboxOptions): UseLightboxReturn {\n    const {\n        gallery,\n        children = 'a[data-pswp-src]',\n        loop = true,\n        downloadable = true,\n        openInNewTab = true,\n    } = options\n\n    const lightbox = shallowRef<PhotoSwipeLightbox | null>(null)\n\n    const init = async () => {\n        if (!gallery.value) {\n            return\n        }\n\n        // PhotoSwipe renders its overlay into document.body, so CSS must be in\n        // document.head — not inside a shadow root.\n        loadCdnCss(PHOTOSWIPE_CSS)\n        injectPhotoSwipeOverrides()\n\n        const { default: PhotoSwipeLightbox } =\n            await import('photoswipe/lightbox')\n\n        lightbox.value = new PhotoSwipeLightbox({\n            gallery: gallery.value,\n            children,\n            pswpModule: () => import('photoswipe'),\n            loop,\n            arrowPrevSVG:\n                '<svg aria-hidden=\"true\" class=\"pswp__icn\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#ffffff\" d=\"m10.828 12l4.95 4.95l-1.414 1.415L8 12l6.364-6.364l1.414 1.414z\"/></svg>',\n            arrowNextSVG:\n                '<svg aria-hidden=\"true\" class=\"pswp__icn\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#ffffff\" d=\"m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z\"/></svg>',\n            closeSVG:\n                '<svg aria-hidden=\"true\" class=\"pswp__icn\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#ffffff\" d=\"m12 10.587l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.949 4.95l-1.414-1.415l4.95-4.95l-4.95-4.95L7.05 5.638z\"/></svg>',\n            zoomSVG:\n                '<svg aria-hidden=\"true\" class=\"pswp__icn\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><g class=\"pswp__icn--zoom-in\"><path fill=\"#ffffff\" d=\"m18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617m-2.006-.742A6.98 6.98 0 0 0 18 11c0-3.867-3.133-7-7-7s-7 3.133-7 7s3.133 7 7 7a6.98 6.98 0 0 0 4.875-1.975zM10 10V7h2v3h3v2h-3v3h-2v-3H7v-2z\"/></g><g class=\"pswp__icn--zoom-out\"><path fill=\"#ffffff\" d=\"m18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617m-2.006-.742A6.98 6.98 0 0 0 18 11c0-3.867-3.133-7-7-7s-7 3.133-7 7s3.133 7 7 7a6.98 6.98 0 0 0 4.875-1.975zM7 10h8v2H7z\"/></g></svg>',\n        })\n\n        if (openInNewTab || downloadable) {\n            lightbox.value.on('uiRegister', () => {\n                const ui = lightbox.value!.pswp?.ui\n                if (!ui) {\n                    return\n                }\n\n                if (openInNewTab) {\n                    ui.registerElement({\n                        name: 'open-in-new-tab-button',\n                        order: 8,\n                        isButton: true,\n                        html: '<svg aria-hidden=\"true\" class=\"pswp__icn\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#ffffff\" d=\"M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3z\"/></svg>',\n                        title: 'Open in new tab',\n                        onClick: (_, __, pswp) => {\n                            const url = getCurrentSlideUrl(pswp)\n                            if (url) {\n                                window.open(\n                                    url,\n                                    '_blank',\n                                    'noopener,noreferrer',\n                                )\n                            }\n                        },\n                    })\n                }\n\n                if (downloadable) {\n                    ui.registerElement({\n                        name: 'download-button',\n                        order: 9,\n                        isButton: true,\n                        html: '<svg aria-hidden=\"true\" class=\"pswp__icn\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#ffffff\" d=\"M3 19h18v2H3zm10-5.828L19.071 7.1l1.414 1.414L12 17L3.515 8.515L4.929 7.1L11 13.173V2h2z\"/></svg>',\n                        title: 'Download',\n                        onClick: (_, __, pswp) => {\n                            const url = getCurrentSlideUrl(pswp)\n                            if (url) {\n                                downloadImage(url)\n                            }\n                        },\n                    })\n                }\n            })\n        }\n\n        lightbox.value.init()\n    }\n\n    onBeforeUnmount(() => {\n        lightbox.value?.destroy()\n        lightbox.value = null\n    })\n\n    return { lightbox, init }\n}\n\n// ---------------------------------------------------------------------------\n// Image size preloading\n// ---------------------------------------------------------------------------\n\nexport interface UseImageSizesReturn {\n    preload: (\n        images: Array<{ url: string; width?: number; height?: number }>,\n    ) => void\n    getSize: (url: string) => { width: number; height: number }\n}\n\n/**\n * Preloads natural image dimensions so PhotoSwipe can size its slides correctly.\n * When `width`/`height` are already provided they are used as-is;\n * otherwise the image is loaded in the background to read `naturalWidth`/`naturalHeight`.\n */\nexport function useImageSizes(): UseImageSizesReturn {\n    const sizes = ref(new Map<string, { width: number; height: number }>())\n\n    const preload = (\n        images: Array<{ url: string; width?: number; height?: number }>,\n    ) => {\n        for (const image of images) {\n            if (image.width && image.height) {\n                sizes.value.set(image.url, {\n                    width: image.width,\n                    height: image.height,\n                })\n                continue\n            }\n            const img = new Image()\n            img.onload = () => {\n                sizes.value.set(image.url, {\n                    width: img.naturalWidth,\n                    height: img.naturalHeight,\n                })\n            }\n            img.src = image.url\n        }\n    }\n\n    const getSize = (url: string) => sizes.value.get(url) ?? DEFAULT_IMAGE_SIZE\n\n    return { preload, getSize }\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getCurrentSlideUrl(pswp: PhotoSwipe): string | undefined {\n    return (\n        pswp.currSlide?.data?.src ??\n        pswp.currSlide?.data?.element\n            ?.querySelector('img')\n            ?.getAttribute('src') ??\n        pswp.currSlide?.data?.element\n            ?.querySelector('source')\n            ?.getAttribute('srcset') ??\n        pswp.currSlide?.data?.element?.getAttribute('src') ??\n        undefined\n    )\n}\n\n/**\n * Triggers a client-side download for an image URL.\n *\n * For backend media URLs (.../media/:file/view), navigates to the\n * corresponding /download endpoint which redirects to an Azure SAS URL\n * with `Content-Disposition: attachment` — no CORS issues.\n *\n * For blob: URLs (in-session uploads), uses the fetch → blob approach.\n *\n * For data: URLs (inline SVGs, etc.), use the download attribute.\n *\n * Falls back to opening in a new tab for all other cases.\n */\nfunction downloadImage(url: string): void {\n    const downloadUrl = toDownloadUrl(url)\n\n    const anchor = document.createElement('a')\n    anchor.href = downloadUrl\n    anchor.target = '_blank'\n    anchor.rel = 'noopener noreferrer'\n    // `download` attribute works for same-origin, data: and blob: URLs; for\n    // cross-origin it is ignored but the browser still follows Content-Disposition.\n    anchor.download = getFilenameFromUrl(url)\n    document.body.appendChild(anchor)\n    anchor.click()\n    document.body.removeChild(anchor)\n}\n\n/**\n * Converts a `/view` media URL to its `/download` counterpart.\n * Leaves blob:, data: and all other URLs untouched.\n */\nfunction toDownloadUrl(url: string): string {\n    return url.replace(/\\/view(\\?|$)/, '/download$1')\n}\n\nfunction getFilenameFromUrl(url: string): string {\n    if (url.startsWith('data:image/svg+xml')) {\n        return 'diagram.svg'\n    }\n    if (url.startsWith('data:')) {\n        const mime = url.split(':')[1].split(';')[0]\n        const ext = mime.split('/')[1] || 'bin'\n        return `image.${ext}`\n    }\n    try {\n        const pathname = new URL(url).pathname\n        const name = pathname.split('/').pop()\n        return name && name.includes('.') ? name : 'image'\n    } catch {\n        return 'image'\n    }\n}\n\nlet overridesInjected = false\n\n/**\n * Injects a one-time `<style>` into `document.head` that raises\n * PhotoSwipe's z-index above any host UI (e.g. floating chat widgets\n * that use `z-index: 2147483647`).\n */\nfunction injectPhotoSwipeOverrides(): void {\n    if (overridesInjected) {\n        return\n    }\n    overridesInjected = true\n    const style = document.createElement('style')\n    style.textContent = [\n        '.pswp__counter { font-family: sans-serif; }',\n        '.pswp { z-index: 2147483647 !important; }',\n        '.pswp__icn { width: 20px; height: 20px; }',\n        '.pswp__button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }',\n        '.pswp__icn--zoom-out { display: none; }',\n        '.pswp--zoomed-in .pswp__icn--zoom-in { display: none; }',\n        '.pswp--zoomed-in .pswp__icn--zoom-out { display: block; }',\n        '.pswp__button--arrow .pswp__icn {left: auto; right: auto; width: 40px; height: 40px; transform: none; margin-top: -20px; }',\n    ].join(' ')\n    document.head.appendChild(style)\n}\n","<script lang=\"ts\" setup>\n    import { computed, ref, onMounted } from 'vue'\n    import { useLightbox, useImageSizes } 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    // Natural pixel dimensions, captured once the thumbnail decodes.\n    const dimensions = ref<{ width: number; height: number }>()\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    }\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    const galleryRef = ref<HTMLElement>()\n    const { preload, getSize } = useImageSizes()\n    const { init } = useLightbox({ gallery: galleryRef, loop: false })\n\n    onMounted(async () => {\n        if (!isImage.value) {\n            return\n        }\n        preload([{ url: props.url }])\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=\"getSize(url).width\"\n                :data-pswp-height=\"getSize(url).height\"\n                :data-pswp-caption=\"filename ?? ''\"\n                class=\"pk-chatbot-file-preview__thumb-link\"\n                :aria-label=\"filename ?? $t('label.file')\">\n                <img\n                    :src=\"url\"\n                    :alt=\"filename\"\n                    class=\"pk-chatbot-file-preview__thumb\"\n                    @load=\"onImageLoad\" />\n            </a>\n            <span\n                v-if=\"loading\"\n                class=\"pk-chatbot-file-preview__status pk-chatbot-file-preview__status--overlay\">\n                <VvIcon name=\"line-md:loading-loop\" />\n            </span>\n        </div>\n        <figcaption\n            v-if=\"!compact && (filename || imageMeta.length)\"\n            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 v-if=\"imageMeta.length\" 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            overflow: hidden;\n            margin: 0;\n        }\n\n        &__thumb-wrap {\n            position: relative;\n            display: flex;\n        }\n\n        &__thumb-link {\n            display: flex;\n            cursor: pointer;\n            // Subtle outline keeps the image edge crisp on any surface;\n            // pure black at low alpha avoids the \"dirty edge\" of tinted greys.\n            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n        }\n\n        &__thumb {\n            display: block;\n            width: 100%;\n            max-width: 280px;\n            max-height: 200px;\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-12);\n            color: var(--color-word-3);\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            &--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\n        // --- Remove button (input context) ---\n        &__remove {\n            position: absolute;\n            top: var(--spacing-4);\n            right: var(--spacing-4);\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__thumb {\n                width: 100%;\n                height: 100%;\n                max-width: none;\n                max-height: none;\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, useImageSizes } 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    // Natural pixel dimensions, captured once the thumbnail decodes.\n    const dimensions = ref<{ width: number; height: number }>()\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    }\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    const galleryRef = ref<HTMLElement>()\n    const { preload, getSize } = useImageSizes()\n    const { init } = useLightbox({ gallery: galleryRef, loop: false })\n\n    onMounted(async () => {\n        if (!isImage.value) {\n            return\n        }\n        preload([{ url: props.url }])\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=\"getSize(url).width\"\n                :data-pswp-height=\"getSize(url).height\"\n                :data-pswp-caption=\"filename ?? ''\"\n                class=\"pk-chatbot-file-preview__thumb-link\"\n                :aria-label=\"filename ?? $t('label.file')\">\n                <img\n                    :src=\"url\"\n                    :alt=\"filename\"\n                    class=\"pk-chatbot-file-preview__thumb\"\n                    @load=\"onImageLoad\" />\n            </a>\n            <span\n                v-if=\"loading\"\n                class=\"pk-chatbot-file-preview__status pk-chatbot-file-preview__status--overlay\">\n                <VvIcon name=\"line-md:loading-loop\" />\n            </span>\n        </div>\n        <figcaption\n            v-if=\"!compact && (filename || imageMeta.length)\"\n            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 v-if=\"imageMeta.length\" 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            overflow: hidden;\n            margin: 0;\n        }\n\n        &__thumb-wrap {\n            position: relative;\n            display: flex;\n        }\n\n        &__thumb-link {\n            display: flex;\n            cursor: pointer;\n            // Subtle outline keeps the image edge crisp on any surface;\n            // pure black at low alpha avoids the \"dirty edge\" of tinted greys.\n            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n        }\n\n        &__thumb {\n            display: block;\n            width: 100%;\n            max-width: 280px;\n            max-height: 200px;\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-12);\n            color: var(--color-word-3);\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            &--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\n        // --- Remove button (input context) ---\n        &__remove {\n            position: absolute;\n            top: var(--spacing-4);\n            right: var(--spacing-4);\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__thumb {\n                width: 100%;\n                height: 100%;\n                max-width: none;\n                max-height: none;\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-BTszEUj2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PkChatbotInput-BTszEUj2.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    }>()\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    }>()\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    const onFileChange = (event: Event) => {\n        const input = event.target as HTMLInputElement\n        const file = input.files?.[0]\n        if (file) {\n            emit('file-select', file)\n        }\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        for (const file of files) {\n            emit('file-select', file)\n        }\n    }\n\n    const { isOverDropZone } = useDropZone(formEl, {\n        dataTypes: computed(() => props.fileUpload?.allowedMimeTypes ?? []),\n        onDrop: handleDrop,\n    })\n\n    // --- Dismissable notice ---\n\n    const isDismissableNoticeVisible = ref(true)\n    const closeDismissableNotice = () => {\n        isDismissableNoticeVisible.value = false\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=\"dismissableNotice && isDismissableNoticeVisible\"\n            class=\"pk-chatbot-input-dismissable-notice\">\n            <PkStreamingMarkdown\n                :markdown=\"dismissableNotice\"\n                class=\"wysiwyg\" />\n            <VvButton\n                v-if=\"dismissableNotice\"\n                :title=\"$t('action.close')\"\n                modifiers=\"action-quiet\"\n                icon=\"ri:close-line\"\n                class=\"w-18 h-18\"\n                @click=\"closeDismissableNotice\" />\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=\"isInputDisabled\"\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=\"isInputDisabled\"\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\"\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                    :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        &-dismissable-notice {\n            position: relative;\n            padding: var(--spacing-sm);\n            display: flex;\n            align-items: flex-start;\n            justify-content: space-between;\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-14);\n            color: var(--color-word-2);\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: var(--color-surface-1);\n                z-index: 1;\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    }>()\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    }>()\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    const onFileChange = (event: Event) => {\n        const input = event.target as HTMLInputElement\n        const file = input.files?.[0]\n        if (file) {\n            emit('file-select', file)\n        }\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        for (const file of files) {\n            emit('file-select', file)\n        }\n    }\n\n    const { isOverDropZone } = useDropZone(formEl, {\n        dataTypes: computed(() => props.fileUpload?.allowedMimeTypes ?? []),\n        onDrop: handleDrop,\n    })\n\n    // --- Dismissable notice ---\n\n    const isDismissableNoticeVisible = ref(true)\n    const closeDismissableNotice = () => {\n        isDismissableNoticeVisible.value = false\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=\"dismissableNotice && isDismissableNoticeVisible\"\n            class=\"pk-chatbot-input-dismissable-notice\">\n            <PkStreamingMarkdown\n                :markdown=\"dismissableNotice\"\n                class=\"wysiwyg\" />\n            <VvButton\n                v-if=\"dismissableNotice\"\n                :title=\"$t('action.close')\"\n                modifiers=\"action-quiet\"\n                icon=\"ri:close-line\"\n                class=\"w-18 h-18\"\n                @click=\"closeDismissableNotice\" />\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=\"isInputDisabled\"\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=\"isInputDisabled\"\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\"\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                    :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        &-dismissable-notice {\n            position: relative;\n            padding: var(--spacing-sm);\n            display: flex;\n            align-items: flex-start;\n            justify-content: space-between;\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-14);\n            color: var(--color-word-2);\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: var(--color-surface-1);\n                z-index: 1;\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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"}