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

package/dist-vue/_chunks/PkChatbotInput-MSpF6SB6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PkChatbotInput-MSpF6SB6.js","names":["$t","$slots","$n"],"sources":["../../../../node_modules/.pnpm/autosize@6.0.1/node_modules/autosize/dist/autosize.esm.js","../../../../packages/components/src/chat/PkChatButton.vue","../../../../packages/components/src/chat/PkChatButton.vue","../../../../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 lang=\"ts\" setup>\n    /**\n     * The icon button of the chat dock: attach, send and stop in the input,\n     * mute and hang up in a live call. One component, because the call bar\n     * takes the place of the input and the two must not look like two\n     * different pieces of software.\n     *\n     * Native attributes fall through to the button, so `title`, `disabled` and\n     * `aria-pressed` are written by the caller as they would be on a `<button>`.\n     */\n    withDefaults(\n        defineProps<{\n            icon: string\n            /** Written next to the icon, for an action nobody should have to guess from a glyph. */\n            label?: string\n            type?: 'button' | 'submit'\n            /** `primary` is the filled circle of send and stop, the one action the dock is for. */\n            modifiers?: 'danger' | 'primary'\n        }>(),\n        { label: undefined, type: 'button', modifiers: undefined },\n    )\n</script>\n\n<template>\n    <button\n        class=\"pk-chat-button\"\n        :class=\"[\n            modifiers ? `pk-chat-button--${modifiers}` : undefined,\n            { 'pk-chat-button--labelled': label },\n        ]\"\n        :type=\"type\">\n        <VvIcon :name=\"icon\" class=\"pk-chat-button__icon\" />\n        <span v-if=\"label\" class=\"pk-chat-button__label\">{{ label }}</span>\n    </button>\n</template>\n\n<style lang=\"scss\">\n    .pk-chat-button {\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n        padding: var(--spacing-4);\n        border: none;\n        border-radius: var(--rounded);\n        background-color: transparent;\n        color: var(--color-word-1);\n        cursor: pointer;\n        transition: var(--transition-colors);\n\n        &:hover {\n            background-color: var(--color-surface-2);\n        }\n\n        // The fields' focus ring: a 1px surface-5 line measured 1.3:1 on the\n        // surface, under the 3:1 a focus indicator needs\n        &:focus-visible {\n            outline: var(--spacing-2) solid var(--input-focus-color);\n            outline-offset: 0;\n        }\n\n        &:disabled {\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n\n        // A toggle has to survive a glance: a crossed-out glyph alone changes\n        // too few pixels to notice mid-sentence.\n        &[aria-pressed='true'] {\n            background-color: var(--color-surface-3);\n            color: var(--color-word);\n        }\n\n        // A wash of the same red rather than a lighter red behind it: the\n        // `lighten-5` step lands close enough to the icon to leave it at about\n        // 2:1, which is a button that disappears exactly while it is being\n        // pointed at. The tint composites over whatever surface is behind, so\n        // it holds in the dark theme too.\n        &--danger {\n            color: var(--color-danger);\n\n            &:hover {\n                background-color: color-mix(\n                    in srgb,\n                    var(--color-danger) 12%,\n                    transparent\n                );\n            }\n        }\n\n        // Same 28px box as the ghost buttons, so the dock keeps its height,\n        // with a smaller glyph because a filled shape needs air around it.\n        // Its edge is visible, so it sits on the input's padding line just as\n        // the text does: a ghost glyph sat 6px further in and made the two\n        // sides of the input look unequal. Empty, it turns into a grey pad\n        // with the fields' disabled ink: a light arrow on that pad vanished,\n        // and with it the circle's edge, which is what squares the sides.\n        // The agent's color when the widget has one, like the user's bubble.\n        &--primary {\n            --pk-chat-button-fill: var(\n                --chatbot-main-color,\n                var(--color-word-1)\n            );\n\n            padding: var(--spacing-6);\n            border-radius: var(--rounded-full);\n            background-color: var(--pk-chat-button-fill);\n            color: var(--chatbot-contrast-color, var(--color-surface));\n\n            &:hover {\n                background-color: color-mix(\n                    in srgb,\n                    var(--pk-chat-button-fill) 85%,\n                    var(--color-surface)\n                );\n            }\n\n            // Off the disc, or a dark ring would sink into a dark fill\n            &:focus-visible {\n                outline-offset: var(--spacing-2);\n            }\n\n            &:disabled {\n                opacity: 1;\n                background-color: var(--color-surface-3);\n                color: var(--color-word-3);\n            }\n\n            .pk-chat-button__icon {\n                width: var(--spacing-16);\n                height: var(--spacing-16);\n            }\n        }\n\n        &--labelled {\n            gap: var(--spacing-4);\n            padding-inline: var(--spacing-8);\n            font-size: var(--text-12);\n        }\n\n        &__icon {\n            display: block;\n            width: var(--spacing-20);\n            height: var(--spacing-20);\n        }\n    }\n</style>\n","<script lang=\"ts\" setup>\n    /**\n     * The icon button of the chat dock: attach, send and stop in the input,\n     * mute and hang up in a live call. One component, because the call bar\n     * takes the place of the input and the two must not look like two\n     * different pieces of software.\n     *\n     * Native attributes fall through to the button, so `title`, `disabled` and\n     * `aria-pressed` are written by the caller as they would be on a `<button>`.\n     */\n    withDefaults(\n        defineProps<{\n            icon: string\n            /** Written next to the icon, for an action nobody should have to guess from a glyph. */\n            label?: string\n            type?: 'button' | 'submit'\n            /** `primary` is the filled circle of send and stop, the one action the dock is for. */\n            modifiers?: 'danger' | 'primary'\n        }>(),\n        { label: undefined, type: 'button', modifiers: undefined },\n    )\n</script>\n\n<template>\n    <button\n        class=\"pk-chat-button\"\n        :class=\"[\n            modifiers ? `pk-chat-button--${modifiers}` : undefined,\n            { 'pk-chat-button--labelled': label },\n        ]\"\n        :type=\"type\">\n        <VvIcon :name=\"icon\" class=\"pk-chat-button__icon\" />\n        <span v-if=\"label\" class=\"pk-chat-button__label\">{{ label }}</span>\n    </button>\n</template>\n\n<style lang=\"scss\">\n    .pk-chat-button {\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n        padding: var(--spacing-4);\n        border: none;\n        border-radius: var(--rounded);\n        background-color: transparent;\n        color: var(--color-word-1);\n        cursor: pointer;\n        transition: var(--transition-colors);\n\n        &:hover {\n            background-color: var(--color-surface-2);\n        }\n\n        // The fields' focus ring: a 1px surface-5 line measured 1.3:1 on the\n        // surface, under the 3:1 a focus indicator needs\n        &:focus-visible {\n            outline: var(--spacing-2) solid var(--input-focus-color);\n            outline-offset: 0;\n        }\n\n        &:disabled {\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n\n        // A toggle has to survive a glance: a crossed-out glyph alone changes\n        // too few pixels to notice mid-sentence.\n        &[aria-pressed='true'] {\n            background-color: var(--color-surface-3);\n            color: var(--color-word);\n        }\n\n        // A wash of the same red rather than a lighter red behind it: the\n        // `lighten-5` step lands close enough to the icon to leave it at about\n        // 2:1, which is a button that disappears exactly while it is being\n        // pointed at. The tint composites over whatever surface is behind, so\n        // it holds in the dark theme too.\n        &--danger {\n            color: var(--color-danger);\n\n            &:hover {\n                background-color: color-mix(\n                    in srgb,\n                    var(--color-danger) 12%,\n                    transparent\n                );\n            }\n        }\n\n        // Same 28px box as the ghost buttons, so the dock keeps its height,\n        // with a smaller glyph because a filled shape needs air around it.\n        // Its edge is visible, so it sits on the input's padding line just as\n        // the text does: a ghost glyph sat 6px further in and made the two\n        // sides of the input look unequal. Empty, it turns into a grey pad\n        // with the fields' disabled ink: a light arrow on that pad vanished,\n        // and with it the circle's edge, which is what squares the sides.\n        // The agent's color when the widget has one, like the user's bubble.\n        &--primary {\n            --pk-chat-button-fill: var(\n                --chatbot-main-color,\n                var(--color-word-1)\n            );\n\n            padding: var(--spacing-6);\n            border-radius: var(--rounded-full);\n            background-color: var(--pk-chat-button-fill);\n            color: var(--chatbot-contrast-color, var(--color-surface));\n\n            &:hover {\n                background-color: color-mix(\n                    in srgb,\n                    var(--pk-chat-button-fill) 85%,\n                    var(--color-surface)\n                );\n            }\n\n            // Off the disc, or a dark ring would sink into a dark fill\n            &:focus-visible {\n                outline-offset: var(--spacing-2);\n            }\n\n            &:disabled {\n                opacity: 1;\n                background-color: var(--color-surface-3);\n                color: var(--color-word-3);\n            }\n\n            .pk-chat-button__icon {\n                width: var(--spacing-16);\n                height: var(--spacing-16);\n            }\n        }\n\n        &--labelled {\n            gap: var(--spacing-4);\n            padding-inline: var(--spacing-8);\n            font-size: var(--text-12);\n        }\n\n        &__icon {\n            display: block;\n            width: var(--spacing-20);\n            height: var(--spacing-20);\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        useId,\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    import PkChatButton from './PkChatButton.vue'\n\n    // --- Models & Props ---\n\n    const modelValue = defineModel<string | undefined>({ default: undefined })\n    const pendingAttachments = defineModel<PendingAttachment[]>(\n        'pendingAttachments',\n        { default: () => [] },\n    )\n\n    const emit = defineEmits<{\n        submit: []\n        'stop-generation': []\n        'file-select': [file: File]\n        'dismiss-attachment-notice': []\n        'voice-start': []\n    }>()\n\n    const props = defineProps<{\n        placeholder?: string\n        dismissableNotice?: string\n        status?: 'submitted' | 'streaming' | 'ready' | 'error'\n        maxMessageLength?: number\n        fileUpload?: AgentFileUpload\n        enableDragDrop?: boolean\n        attachmentLimitReached?: boolean\n        attachmentNotice?: string\n        /** Show the talk button: the agent has voice enabled. */\n        voiceEnabled?: 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 counterId = useId()\n    const currentLength = computed(() => localValue.value.length)\n\n    const isOverLimit = computed(\n        () =>\n            props.maxMessageLength !== undefined &&\n            currentLength.value > props.maxMessageLength,\n    )\n\n    const isUploadingAnyFile = computed(() =>\n        pendingAttachments.value.some((a) => a.state === 'uploading'),\n    )\n\n    const isSubmitEnabled = computed(() => {\n        if (\n            isInputDisabled.value ||\n            isUploadingAnyFile.value ||\n            isOverLimit.value\n        ) {\n            return false\n        }\n        return localValue.value.trim().length > 0\n    })\n\n    // --- File upload ---\n\n    const hasCaptureSupport = 'capture' in document.createElement('input')\n\n    const acceptMimeTypes = computed(\n        () => props.fileUpload?.allowedMimeTypes?.join(',') ?? '',\n    )\n\n    const acceptImageMimeTypes = computed(() =>\n        (props.fileUpload?.allowedMimeTypes ?? [])\n            .filter((m) => m.startsWith('image/'))\n            .join(','),\n    )\n\n    const showCameraOption = computed(\n        () => hasCaptureSupport && acceptImageMimeTypes.value.length > 0,\n    )\n\n    const openFilePicker = () => {\n        fileInputEl.value?.click()\n    }\n\n    const openCameraPicker = () => {\n        cameraInputEl.value?.click()\n    }\n\n    // The store owns the attachment limits and drops any overflow; the input\n    // just forwards every picked/dropped file.\n    const emitFiles = (files: File[]) => {\n        for (const file of files) {\n            emit('file-select', file)\n        }\n    }\n\n    const onFileChange = (event: Event) => {\n        const input = event.target as HTMLInputElement\n        emitFiles(Array.from(input.files ?? []))\n        input.value = ''\n    }\n\n    // --- Attachments ---\n\n    const removeAttachment = (id: string) => {\n        const att = pendingAttachments.value.find((a) => a.id === id)\n        if (att) {\n            URL.revokeObjectURL(att.localUrl)\n        }\n        pendingAttachments.value = pendingAttachments.value.filter(\n            (a) => a.id !== id,\n        )\n    }\n\n    // --- Drag & drop ---\n\n    const isDragDropEnabled = computed(\n        () => (props.enableDragDrop ?? true) && !!props.fileUpload?.enabled,\n    )\n\n    const handleDrop = (files: File[] | null) => {\n        if (!isDragDropEnabled.value || !files) {\n            return\n        }\n        emitFiles(files)\n    }\n\n    const { isOverDropZone } = useDropZone(formEl, {\n        dataTypes: computed(() => props.fileUpload?.allowedMimeTypes ?? []),\n        onDrop: handleDrop,\n    })\n\n    // --- Notice queue (single slot above the input, highest priority wins) ---\n\n    type InputNotice = {\n        id: string\n        text?: string\n        markdown?: string\n        icon?: string\n        dismiss?: () => void\n    }\n\n    const isDismissableNoticeVisible = ref(true)\n    const closeDismissableNotice = () => {\n        isDismissableNoticeVisible.value = false\n    }\n\n    const activeNotice = computed<InputNotice | null>(() => {\n        // Order = priority. The alert takes precedence over the notice.\n        if (props.attachmentNotice) {\n            return {\n                id: 'limit',\n                icon: 'ri:information-line',\n                text: props.attachmentNotice,\n                dismiss: () => emit('dismiss-attachment-notice'),\n            }\n        }\n        if (props.dismissableNotice && isDismissableNoticeVisible.value) {\n            return {\n                id: 'dismissable',\n                markdown: props.dismissableNotice,\n                dismiss: closeDismissableNotice,\n            }\n        }\n        return null\n    })\n\n    // --- Submit ---\n\n    /**\n     * Send turns disabled and then gives way to stop, stop gives way to send:\n     * a keyboard user who pressed one would be left on the page body. Hand\n     * the focus to the textarea, but only after a keyboard press: a tap has no\n     * focus to keep, and focusing would bring the phone keyboard back up over\n     * the answer.\n     */\n    const keepKeyboardFocus = () => {\n        if (formEl.value?.querySelector('button:focus-visible')) {\n            textareaEl.value?.focus()\n        }\n    }\n\n    const stopGeneration = () => {\n        keepKeyboardFocus()\n        emit('stop-generation')\n    }\n\n    const handleSubmit = () => {\n        if (!isSubmitEnabled.value) {\n            return\n        }\n        keepKeyboardFocus()\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    /**\n     * Enter sends, Shift+Enter goes to a new line. The Enter that confirms an\n     * IME composition (Japanese, Chinese, Korean) belongs to the composition:\n     * Safari reports it with `isComposing` already false, hence the 229.\n     */\n    const onTextareaEnter = (event: KeyboardEvent) => {\n        if (event.shiftKey || event.isComposing || event.keyCode === 229) {\n            return\n        }\n        event.preventDefault()\n        handleSubmit()\n    }\n\n    // --- Lifecycle ---\n\n    onMounted(() => {\n        if (textareaEl.value) {\n            autosize(textareaEl.value)\n        }\n    })\n\n    onBeforeUnmount(() => {\n        cancelSync()\n        if (textareaEl.value) {\n            autosize.destroy(textareaEl.value)\n        }\n        for (const att of pendingAttachments.value) {\n            URL.revokeObjectURL(att.localUrl)\n        }\n    })\n</script>\n\n<template>\n    <div class=\"pk-chatbot-input\">\n        <div\n            v-if=\"activeNotice\"\n            :key=\"activeNotice.id\"\n            class=\"pk-chatbot-input__notice\"\n            role=\"status\">\n            <VvIcon\n                v-if=\"activeNotice.icon\"\n                :name=\"activeNotice.icon\"\n                class=\"pk-chatbot-input__notice-icon\" />\n            <PkStreamingMarkdown\n                v-if=\"activeNotice.markdown\"\n                :markdown=\"activeNotice.markdown\"\n                class=\"wysiwyg pk-chatbot-input__notice-text\" />\n            <span v-else class=\"pk-chatbot-input__notice-text\">\n                {{ activeNotice.text }}\n            </span>\n            <VvButton\n                v-if=\"activeNotice.dismiss\"\n                :title=\"$t('action.close')\"\n                modifiers=\"action-quiet\"\n                icon=\"ri:close-line\"\n                class=\"w-18 h-18\"\n                @click=\"activeNotice.dismiss()\" />\n        </div>\n        <form\n            ref=\"formEl\"\n            class=\"pk-chatbot-input__form\"\n            @submit.prevent=\"handleSubmit\">\n            <div\n                v-if=\"isOverDropZone && isDragDropEnabled\"\n                class=\"pk-chatbot-input__drop-overlay\">\n                <VvIcon\n                    name=\"ri:upload-cloud-2-line\"\n                    class=\"pk-chatbot-input__drop-overlay-icon\" />\n                <span>{{ $t('action.dropFile') }}</span>\n            </div>\n            <div\n                v-if=\"pendingAttachments.length\"\n                class=\"pk-chatbot-input__attachments\">\n                <PkChatbotFilePreview\n                    v-for=\"att in pendingAttachments\"\n                    :key=\"att.id\"\n                    :media-type=\"att.file.type\"\n                    :url=\"att.localUrl\"\n                    :filename=\"att.file.name\"\n                    :size=\"att.file.size\"\n                    :loading=\"att.state === 'uploading'\"\n                    :error=\"att.state === 'error' ? att.error : undefined\"\n                    :removable=\"att.state !== 'uploading'\"\n                    compact\n                    @remove=\"removeAttachment(att.id)\" />\n            </div>\n            <div class=\"pk-chatbot-input__fieldset\">\n                <slot name=\"prepend\" />\n                <VvDropdown\n                    v-if=\"\n                        fileUpload &&\n                        fileUpload.enabled &&\n                        (showCameraOption || $slots['additional-actions'])\n                    \"\n                    v-bind=\"{\n                        placement: 'top-start',\n                        modifiers: 'menu',\n                        flip: true,\n                        offset: 3,\n                    }\">\n                    <template #default=\"{ init, toggle, aria }\">\n                        <!-- The only one still written by hand: the dropdown\n                         anchors itself to whatever `init` receives, and that\n                         has to be the element, not a component instance -->\n                        <button\n                            :ref=\"(e: any) => init(e)\"\n                            v-bind=\"aria\"\n                            class=\"pk-chat-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-chat-button__icon\" />\n                        </button>\n                    </template>\n                    <template #items>\n                        <VvDropdownAction\n                            v-if=\"showCameraOption\"\n                            :disabled=\"\n                                isInputDisabled || attachmentLimitReached\n                            \"\n                            @click=\"openCameraPicker\">\n                            <VvIcon\n                                name=\"ri:camera-line\"\n                                class=\"pk-chatbot-input__dropdown-icon\" />\n                            {{ $t('action.takePhoto') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            :disabled=\"\n                                isInputDisabled || attachmentLimitReached\n                            \"\n                            @click=\"openFilePicker\">\n                            <VvIcon\n                                name=\"ri:attachment-line\"\n                                class=\"pk-chatbot-input__dropdown-icon\" />\n                            {{ $t('action.attachFile') }}\n                        </VvDropdownAction>\n                        <slot name=\"additional-actions\" />\n                    </template>\n                </VvDropdown>\n                <PkChatButton\n                    v-else-if=\"fileUpload && fileUpload.enabled\"\n                    icon=\"ri:add-line\"\n                    :title=\"$t('action.attachFile')\"\n                    :disabled=\"isInputDisabled || attachmentLimitReached\"\n                    @click=\"openFilePicker\" />\n                <input\n                    v-if=\"fileUpload && fileUpload.enabled\"\n                    ref=\"fileInputEl\"\n                    type=\"file\"\n                    hidden\n                    multiple\n                    :accept=\"acceptMimeTypes\"\n                    @change=\"onFileChange\" />\n                <input\n                    v-if=\"fileUpload && fileUpload.enabled && showCameraOption\"\n                    ref=\"cameraInputEl\"\n                    type=\"file\"\n                    capture=\"environment\"\n                    hidden\n                    :accept=\"acceptImageMimeTypes\"\n                    @change=\"onFileChange\" />\n                <div class=\"pk-chatbot-input__content\">\n                    <textarea\n                        ref=\"textareaEl\"\n                        :value=\"localValue\"\n                        class=\"pk-chatbot-input__textarea\"\n                        name=\"message\"\n                        rows=\"1\"\n                        enterkeyhint=\"send\"\n                        :aria-label=\"$t('label.message')\"\n                        :aria-describedby=\"\n                            maxMessageLength ? counterId : undefined\n                        \"\n                        :aria-invalid=\"isOverLimit || undefined\"\n                        :placeholder\n                        @input=\"onTextareaInput\"\n                        @keydown.enter=\"onTextareaEnter\"></textarea>\n                </div>\n                <div\n                    v-if=\"maxMessageLength\"\n                    :id=\"counterId\"\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                <PkChatButton\n                    v-if=\"voiceEnabled && !isStreaming\"\n                    icon=\"ri:mic-line\"\n                    :title=\"$t('action.talk')\"\n                    :disabled=\"isInputDisabled\"\n                    @click=\"emit('voice-start')\" />\n                <PkChatButton\n                    v-if=\"isStreaming\"\n                    icon=\"ri:stop-fill\"\n                    modifiers=\"primary\"\n                    :title=\"$t('action.stop')\"\n                    @click=\"stopGeneration\" />\n                <PkChatButton\n                    v-else\n                    type=\"submit\"\n                    modifiers=\"primary\"\n                    :icon=\"isSubmitted ? 'loading-loop' : 'ri:arrow-up-line'\"\n                    :title=\"$t('action.submit')\"\n                    :disabled=\"!isSubmitEnabled\" />\n            </div>\n        </form>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-input {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        margin-inline: var(--spacing-sm);\n        margin-bottom: var(--spacing-sm);\n\n        &__notice {\n            position: relative;\n            padding: var(--spacing-10) var(--spacing-sm);\n            display: flex;\n            align-items: flex-start;\n            gap: var(--spacing-sm);\n            background-color: var(--color-surface-1);\n            border-top-left-radius: var(--rounded-xl);\n            border-top-right-radius: var(--rounded-xl);\n            transition-property: var(--transition-property-all);\n            transition-duration: var(--duration-300);\n            transition-timing-function: var(--ease-in-out);\n            font-size: var(--text-12);\n            color: var(--color-word-4);\n\n            &::after {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                right: 0;\n                bottom: calc(-1 * var(--spacing-12));\n                height: var(--spacing-12);\n                background-color: var(--color-surface-1);\n                z-index: 1;\n            }\n\n            &-icon {\n                flex-shrink: 0;\n                width: var(--spacing-18);\n                height: var(--spacing-18);\n            }\n\n            &-text {\n                flex: 1;\n                min-width: 0;\n            }\n        }\n\n        &__form {\n            position: relative;\n            display: flex;\n            z-index: 1;\n            flex-direction: column;\n\n            // The composer is a field too: same border and focus ring as the\n            // form fields, on top of the shadow and the 12px radius that make\n            // it the container (12) of its 8px buttons\n            border-radius: var(--rounded-xl);\n            border: 1px solid var(--input-border-color);\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: var(--input-transition);\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(--input-focus-color);\n                box-shadow: var(--shadow-lg), var(--input-focus-ring);\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        &__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        useId,\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    import PkChatButton from './PkChatButton.vue'\n\n    // --- Models & Props ---\n\n    const modelValue = defineModel<string | undefined>({ default: undefined })\n    const pendingAttachments = defineModel<PendingAttachment[]>(\n        'pendingAttachments',\n        { default: () => [] },\n    )\n\n    const emit = defineEmits<{\n        submit: []\n        'stop-generation': []\n        'file-select': [file: File]\n        'dismiss-attachment-notice': []\n        'voice-start': []\n    }>()\n\n    const props = defineProps<{\n        placeholder?: string\n        dismissableNotice?: string\n        status?: 'submitted' | 'streaming' | 'ready' | 'error'\n        maxMessageLength?: number\n        fileUpload?: AgentFileUpload\n        enableDragDrop?: boolean\n        attachmentLimitReached?: boolean\n        attachmentNotice?: string\n        /** Show the talk button: the agent has voice enabled. */\n        voiceEnabled?: 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 counterId = useId()\n    const currentLength = computed(() => localValue.value.length)\n\n    const isOverLimit = computed(\n        () =>\n            props.maxMessageLength !== undefined &&\n            currentLength.value > props.maxMessageLength,\n    )\n\n    const isUploadingAnyFile = computed(() =>\n        pendingAttachments.value.some((a) => a.state === 'uploading'),\n    )\n\n    const isSubmitEnabled = computed(() => {\n        if (\n            isInputDisabled.value ||\n            isUploadingAnyFile.value ||\n            isOverLimit.value\n        ) {\n            return false\n        }\n        return localValue.value.trim().length > 0\n    })\n\n    // --- File upload ---\n\n    const hasCaptureSupport = 'capture' in document.createElement('input')\n\n    const acceptMimeTypes = computed(\n        () => props.fileUpload?.allowedMimeTypes?.join(',') ?? '',\n    )\n\n    const acceptImageMimeTypes = computed(() =>\n        (props.fileUpload?.allowedMimeTypes ?? [])\n            .filter((m) => m.startsWith('image/'))\n            .join(','),\n    )\n\n    const showCameraOption = computed(\n        () => hasCaptureSupport && acceptImageMimeTypes.value.length > 0,\n    )\n\n    const openFilePicker = () => {\n        fileInputEl.value?.click()\n    }\n\n    const openCameraPicker = () => {\n        cameraInputEl.value?.click()\n    }\n\n    // The store owns the attachment limits and drops any overflow; the input\n    // just forwards every picked/dropped file.\n    const emitFiles = (files: File[]) => {\n        for (const file of files) {\n            emit('file-select', file)\n        }\n    }\n\n    const onFileChange = (event: Event) => {\n        const input = event.target as HTMLInputElement\n        emitFiles(Array.from(input.files ?? []))\n        input.value = ''\n    }\n\n    // --- Attachments ---\n\n    const removeAttachment = (id: string) => {\n        const att = pendingAttachments.value.find((a) => a.id === id)\n        if (att) {\n            URL.revokeObjectURL(att.localUrl)\n        }\n        pendingAttachments.value = pendingAttachments.value.filter(\n            (a) => a.id !== id,\n        )\n    }\n\n    // --- Drag & drop ---\n\n    const isDragDropEnabled = computed(\n        () => (props.enableDragDrop ?? true) && !!props.fileUpload?.enabled,\n    )\n\n    const handleDrop = (files: File[] | null) => {\n        if (!isDragDropEnabled.value || !files) {\n            return\n        }\n        emitFiles(files)\n    }\n\n    const { isOverDropZone } = useDropZone(formEl, {\n        dataTypes: computed(() => props.fileUpload?.allowedMimeTypes ?? []),\n        onDrop: handleDrop,\n    })\n\n    // --- Notice queue (single slot above the input, highest priority wins) ---\n\n    type InputNotice = {\n        id: string\n        text?: string\n        markdown?: string\n        icon?: string\n        dismiss?: () => void\n    }\n\n    const isDismissableNoticeVisible = ref(true)\n    const closeDismissableNotice = () => {\n        isDismissableNoticeVisible.value = false\n    }\n\n    const activeNotice = computed<InputNotice | null>(() => {\n        // Order = priority. The alert takes precedence over the notice.\n        if (props.attachmentNotice) {\n            return {\n                id: 'limit',\n                icon: 'ri:information-line',\n                text: props.attachmentNotice,\n                dismiss: () => emit('dismiss-attachment-notice'),\n            }\n        }\n        if (props.dismissableNotice && isDismissableNoticeVisible.value) {\n            return {\n                id: 'dismissable',\n                markdown: props.dismissableNotice,\n                dismiss: closeDismissableNotice,\n            }\n        }\n        return null\n    })\n\n    // --- Submit ---\n\n    /**\n     * Send turns disabled and then gives way to stop, stop gives way to send:\n     * a keyboard user who pressed one would be left on the page body. Hand\n     * the focus to the textarea, but only after a keyboard press: a tap has no\n     * focus to keep, and focusing would bring the phone keyboard back up over\n     * the answer.\n     */\n    const keepKeyboardFocus = () => {\n        if (formEl.value?.querySelector('button:focus-visible')) {\n            textareaEl.value?.focus()\n        }\n    }\n\n    const stopGeneration = () => {\n        keepKeyboardFocus()\n        emit('stop-generation')\n    }\n\n    const handleSubmit = () => {\n        if (!isSubmitEnabled.value) {\n            return\n        }\n        keepKeyboardFocus()\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    /**\n     * Enter sends, Shift+Enter goes to a new line. The Enter that confirms an\n     * IME composition (Japanese, Chinese, Korean) belongs to the composition:\n     * Safari reports it with `isComposing` already false, hence the 229.\n     */\n    const onTextareaEnter = (event: KeyboardEvent) => {\n        if (event.shiftKey || event.isComposing || event.keyCode === 229) {\n            return\n        }\n        event.preventDefault()\n        handleSubmit()\n    }\n\n    // --- Lifecycle ---\n\n    onMounted(() => {\n        if (textareaEl.value) {\n            autosize(textareaEl.value)\n        }\n    })\n\n    onBeforeUnmount(() => {\n        cancelSync()\n        if (textareaEl.value) {\n            autosize.destroy(textareaEl.value)\n        }\n        for (const att of pendingAttachments.value) {\n            URL.revokeObjectURL(att.localUrl)\n        }\n    })\n</script>\n\n<template>\n    <div class=\"pk-chatbot-input\">\n        <div\n            v-if=\"activeNotice\"\n            :key=\"activeNotice.id\"\n            class=\"pk-chatbot-input__notice\"\n            role=\"status\">\n            <VvIcon\n                v-if=\"activeNotice.icon\"\n                :name=\"activeNotice.icon\"\n                class=\"pk-chatbot-input__notice-icon\" />\n            <PkStreamingMarkdown\n                v-if=\"activeNotice.markdown\"\n                :markdown=\"activeNotice.markdown\"\n                class=\"wysiwyg pk-chatbot-input__notice-text\" />\n            <span v-else class=\"pk-chatbot-input__notice-text\">\n                {{ activeNotice.text }}\n            </span>\n            <VvButton\n                v-if=\"activeNotice.dismiss\"\n                :title=\"$t('action.close')\"\n                modifiers=\"action-quiet\"\n                icon=\"ri:close-line\"\n                class=\"w-18 h-18\"\n                @click=\"activeNotice.dismiss()\" />\n        </div>\n        <form\n            ref=\"formEl\"\n            class=\"pk-chatbot-input__form\"\n            @submit.prevent=\"handleSubmit\">\n            <div\n                v-if=\"isOverDropZone && isDragDropEnabled\"\n                class=\"pk-chatbot-input__drop-overlay\">\n                <VvIcon\n                    name=\"ri:upload-cloud-2-line\"\n                    class=\"pk-chatbot-input__drop-overlay-icon\" />\n                <span>{{ $t('action.dropFile') }}</span>\n            </div>\n            <div\n                v-if=\"pendingAttachments.length\"\n                class=\"pk-chatbot-input__attachments\">\n                <PkChatbotFilePreview\n                    v-for=\"att in pendingAttachments\"\n                    :key=\"att.id\"\n                    :media-type=\"att.file.type\"\n                    :url=\"att.localUrl\"\n                    :filename=\"att.file.name\"\n                    :size=\"att.file.size\"\n                    :loading=\"att.state === 'uploading'\"\n                    :error=\"att.state === 'error' ? att.error : undefined\"\n                    :removable=\"att.state !== 'uploading'\"\n                    compact\n                    @remove=\"removeAttachment(att.id)\" />\n            </div>\n            <div class=\"pk-chatbot-input__fieldset\">\n                <slot name=\"prepend\" />\n                <VvDropdown\n                    v-if=\"\n                        fileUpload &&\n                        fileUpload.enabled &&\n                        (showCameraOption || $slots['additional-actions'])\n                    \"\n                    v-bind=\"{\n                        placement: 'top-start',\n                        modifiers: 'menu',\n                        flip: true,\n                        offset: 3,\n                    }\">\n                    <template #default=\"{ init, toggle, aria }\">\n                        <!-- The only one still written by hand: the dropdown\n                         anchors itself to whatever `init` receives, and that\n                         has to be the element, not a component instance -->\n                        <button\n                            :ref=\"(e: any) => init(e)\"\n                            v-bind=\"aria\"\n                            class=\"pk-chat-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-chat-button__icon\" />\n                        </button>\n                    </template>\n                    <template #items>\n                        <VvDropdownAction\n                            v-if=\"showCameraOption\"\n                            :disabled=\"\n                                isInputDisabled || attachmentLimitReached\n                            \"\n                            @click=\"openCameraPicker\">\n                            <VvIcon\n                                name=\"ri:camera-line\"\n                                class=\"pk-chatbot-input__dropdown-icon\" />\n                            {{ $t('action.takePhoto') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            :disabled=\"\n                                isInputDisabled || attachmentLimitReached\n                            \"\n                            @click=\"openFilePicker\">\n                            <VvIcon\n                                name=\"ri:attachment-line\"\n                                class=\"pk-chatbot-input__dropdown-icon\" />\n                            {{ $t('action.attachFile') }}\n                        </VvDropdownAction>\n                        <slot name=\"additional-actions\" />\n                    </template>\n                </VvDropdown>\n                <PkChatButton\n                    v-else-if=\"fileUpload && fileUpload.enabled\"\n                    icon=\"ri:add-line\"\n                    :title=\"$t('action.attachFile')\"\n                    :disabled=\"isInputDisabled || attachmentLimitReached\"\n                    @click=\"openFilePicker\" />\n                <input\n                    v-if=\"fileUpload && fileUpload.enabled\"\n                    ref=\"fileInputEl\"\n                    type=\"file\"\n                    hidden\n                    multiple\n                    :accept=\"acceptMimeTypes\"\n                    @change=\"onFileChange\" />\n                <input\n                    v-if=\"fileUpload && fileUpload.enabled && showCameraOption\"\n                    ref=\"cameraInputEl\"\n                    type=\"file\"\n                    capture=\"environment\"\n                    hidden\n                    :accept=\"acceptImageMimeTypes\"\n                    @change=\"onFileChange\" />\n                <div class=\"pk-chatbot-input__content\">\n                    <textarea\n                        ref=\"textareaEl\"\n                        :value=\"localValue\"\n                        class=\"pk-chatbot-input__textarea\"\n                        name=\"message\"\n                        rows=\"1\"\n                        enterkeyhint=\"send\"\n                        :aria-label=\"$t('label.message')\"\n                        :aria-describedby=\"\n                            maxMessageLength ? counterId : undefined\n                        \"\n                        :aria-invalid=\"isOverLimit || undefined\"\n                        :placeholder\n                        @input=\"onTextareaInput\"\n                        @keydown.enter=\"onTextareaEnter\"></textarea>\n                </div>\n                <div\n                    v-if=\"maxMessageLength\"\n                    :id=\"counterId\"\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                <PkChatButton\n                    v-if=\"voiceEnabled && !isStreaming\"\n                    icon=\"ri:mic-line\"\n                    :title=\"$t('action.talk')\"\n                    :disabled=\"isInputDisabled\"\n                    @click=\"emit('voice-start')\" />\n                <PkChatButton\n                    v-if=\"isStreaming\"\n                    icon=\"ri:stop-fill\"\n                    modifiers=\"primary\"\n                    :title=\"$t('action.stop')\"\n                    @click=\"stopGeneration\" />\n                <PkChatButton\n                    v-else\n                    type=\"submit\"\n                    modifiers=\"primary\"\n                    :icon=\"isSubmitted ? 'loading-loop' : 'ri:arrow-up-line'\"\n                    :title=\"$t('action.submit')\"\n                    :disabled=\"!isSubmitEnabled\" />\n            </div>\n        </form>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-input {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        margin-inline: var(--spacing-sm);\n        margin-bottom: var(--spacing-sm);\n\n        &__notice {\n            position: relative;\n            padding: var(--spacing-10) var(--spacing-sm);\n            display: flex;\n            align-items: flex-start;\n            gap: var(--spacing-sm);\n            background-color: var(--color-surface-1);\n            border-top-left-radius: var(--rounded-xl);\n            border-top-right-radius: var(--rounded-xl);\n            transition-property: var(--transition-property-all);\n            transition-duration: var(--duration-300);\n            transition-timing-function: var(--ease-in-out);\n            font-size: var(--text-12);\n            color: var(--color-word-4);\n\n            &::after {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                right: 0;\n                bottom: calc(-1 * var(--spacing-12));\n                height: var(--spacing-12);\n                background-color: var(--color-surface-1);\n                z-index: 1;\n            }\n\n            &-icon {\n                flex-shrink: 0;\n                width: var(--spacing-18);\n                height: var(--spacing-18);\n            }\n\n            &-text {\n                flex: 1;\n                min-width: 0;\n            }\n        }\n\n        &__form {\n            position: relative;\n            display: flex;\n            z-index: 1;\n            flex-direction: column;\n\n            // The composer is a field too: same border and focus ring as the\n            // form fields, on top of the shadow and the 12px radius that make\n            // it the container (12) of its 8px buttons\n            border-radius: var(--rounded-xl);\n            border: 1px solid var(--input-border-color);\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: var(--input-transition);\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(--input-focus-color);\n                box-shadow: var(--shadow-lg), var(--input-focus-ring);\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        &__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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"}