npm - @8wave/ai-elements - Versions diffs - 0.84.0 → 0.85.0 - Mend

@8wave/ai-elements 0.84.0 → 0.85.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (459) hide show

package/dist-vue/_chunks/{PkChatbotInput-CsazCkTA.js.map → PkChatbotInput-Dn4KFNfx.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PkChatbotInput-CsazCkTA.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 :loading=\"att.state === 'uploading'\"\n :error=\"att.state === 'error' ? att.error : undefined\"\n :removable=\"att.state !== 'uploading'\"\n @remove=\"removeAttachment(att.id)\" />\n </div>\n <div class=\"pk-chatbot-input__fieldset\">\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 gap: var(--spacing-4);\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 :loading=\"att.state === 'uploading'\"\n :error=\"att.state === 'error' ? att.error : undefined\"\n :removable=\"att.state !== 'uploading'\"\n @remove=\"removeAttachment(att.id)\" />\n </div>\n <div class=\"pk-chatbot-input__fieldset\">\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 gap: var(--spacing-4);\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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"}
1	+ {"version":3,"file":"PkChatbotInput-Dn4KFNfx.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 :loading=\"att.state === 'uploading'\"\n :error=\"att.state === 'error' ? att.error : undefined\"\n :removable=\"att.state !== 'uploading'\"\n @remove=\"removeAttachment(att.id)\" />\n </div>\n <div class=\"pk-chatbot-input__fieldset\">\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 gap: var(--spacing-4);\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 :loading=\"att.state === 'uploading'\"\n :error=\"att.state === 'error' ? att.error : undefined\"\n :removable=\"att.state !== 'uploading'\"\n @remove=\"removeAttachment(att.id)\" />\n </div>\n <div class=\"pk-chatbot-input__fieldset\">\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 gap: var(--spacing-4);\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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"}

package/dist-vue/_chunks/{PkChatbotMessages-BDziUgck.js → PkChatbotMessages-DUOrit9Y.js} RENAMED Viewed

@@ -1,37 +1,39 @@
 import { t as e } from "./PkChatbotError-CN_PPVAc.js";
-import { c as t, f as n, o as r, p as i, u as a } from "./src-EtGd6cRz.js";
+import { d as t, l as n, m as r, o as i, p as a } from "./src-DW4YojFN.js";
 import { t as o } from "./PkRelativeTime-WZ2aPcp_.js";
-import { t as s } from "./PkStreamingMarkdown-BUiAi-qv.js";
-import { t as c } from "./PkChatbotFilePreview-0N9ASbIp.js";
-import { t as l } from "./PkChatbotFeedbackForm-BiVUo4kv.js";
-import { a as u, n as d, o as f, r as p, s as m, t as h } from "./utils-CRojvghU.js";
+import { t as s } from "./PkStreamingMarkdown-BDtjktHX.js";
+import { t as c } from "./PkChatbotFilePreview-7hRouK9o.js";
+import { t as l } from "./PkChatbotFeedbackForm-Dy2ojy2E.js";
+import { a as u, n as d, o as f, r as p, s as m, t as h } from "./utils-UX35fb5C.js";
 import { VvButton as g, VvButtonGroup as _, VvIcon as v } from "@volverjs/ui-vue/components";
 import { Fragment as y, Transition as b, computed as x, createBlock as S, createCommentVNode as C, createElementBlock as w, createElementVNode as T, createTextVNode as E, createVNode as D, defineAsyncComponent as O, defineComponent as k, mergeProps as ee, nextTick as A, normalizeClass as j, normalizeStyle as M, onBeforeUnmount as N, onMounted as P, openBlock as F, ref as I, renderList as te, renderSlot as ne, resolveDynamicComponent as re, toDisplayString as L, unref as R, useSlots as ie, useTemplateRef as ae, watch as z, withCtx as B, withModifiers as V } from "vue";
 import { useI18n as oe } from "vue-i18n";
 //#region ../../packages/components/src/chat/toolComponentMap.ts
 var H = {
-	requestConfirm: O(() => import("./PkToolRequestConfirm-BsHpoI-c.js").then((e) => e.n)),
-	requestOAuthConnection: O(() => import("./PkToolRequestOAuthConnection-shcJXxtk.js").then((e) => e.n)),
-	showArtifact: O(() => import("./PkToolShowArtifact-D4BVWuMi.js").then((e) => e.n)),
-	showCalendarEvent: O(() => import("./PkToolShowCalendarEvent-Q_2-tXmC.js").then((e) => e.n)),
-	showComparison: O(() => import("./PkToolShowComparison-BpYZb-z5.js").then((e) => e.n)),
-	showContactForm: O(() => import("./PkToolShowContactForm-DuOeYoCU.js").then((e) => e.n)),
-	showEmail: O(() => import("./PkToolShowEmail-CDR-Cw-s.js").then((e) => e.n)),
-	showImageGallery: O(() => import("./PkToolShowImageGallery-DhGmTPMP.js").then((e) => e.n)),
-	showLocation: O(() => import("./PkToolShowLocation-DBHdxOFr.js").then((e) => e.n)),
-	showMessage: O(() => import("./PkToolShowMessage-Cqb0WP-x.js").then((e) => e.n)),
-	showMultipleChoice: O(() => import("./PkToolShowMultipleChoice-x7hNm6I2.js").then((e) => e.n)),
-	showProductList: O(() => import("./PkToolShowProductList-CMFBvHAY.js").then((e) => e.n)),
-	showQrCode: O(() => import("./PkToolShowQrCode-LFCfdWyu.js").then((e) => e.n)),
-	showSources: O(() => import("./PkToolShowSources-D0wbYpTR.js").then((e) => e.n)),
-	showSuggestedReply: O(() => import("./PkToolShowSuggestedReply-CIP1xfB1.js").then((e) => e.n)),
-	showWeather: O(() => import("./PkToolShowWeather-zT-4E-aX.js")),
-	showWebPages: O(() => import("./PkToolShowWebPages-DLc-5nE0.js").then((e) => e.n))
+	requestConfirm: O(() => import("./PkToolRequestConfirm-BcZ10rMb.js")),
+	requestOAuthConnection: O(() => import("./PkToolRequestOAuthConnection-CIrFBhxL.js")),
+	showArtifact: O(() => import("./PkToolShowArtifact-BVFPfZT8.js").then((e) => e.n)),
+	showCalendarEvent: O(() => import("./PkToolShowCalendarEvent-9jaBqWBJ.js").then((e) => e.n)),
+	showComparison: O(() => import("./PkToolShowComparison-D1YHzvyy.js").then((e) => e.n)),
+	showContactForm: O(() => import("./PkToolShowContactForm-BVtuQVGs.js").then((e) => e.n)),
+	showDiagram: O(() => import("./PkToolShowDiagram-CLyYku9I.js")),
+	showEmail: O(() => import("./PkToolShowEmail-BZzv2-6y.js").then((e) => e.n)),
+	showImageGallery: O(() => import("./PkToolShowImageGallery-Bt7QNtGe.js").then((e) => e.n)),
+	showLocation: O(() => import("./PkToolShowLocation-DAg9HeYq.js").then((e) => e.n)),
+	showMessage: O(() => import("./PkToolShowMessage-DvnO4DDb.js").then((e) => e.n)),
+	showMultipleChoice: O(() => import("./PkToolShowMultipleChoice-BEWDze3p.js").then((e) => e.n)),
+	showProductList: O(() => import("./PkToolShowProductList-Cyh_fdTh.js").then((e) => e.n)),
+	showQrCode: O(() => import("./PkToolShowQrCode-Dz3HlJGs.js").then((e) => e.n)),
+	showSources: O(() => import("./PkToolShowSources-cFvwqgDz.js").then((e) => e.n)),
+	showSuggestedReply: O(() => import("./PkToolShowSuggestedReply-DIrmkOUq.js").then((e) => e.n)),
+	showWeather: O(() => import("./PkToolShowWeather-CKFmoP6M.js")),
+	showWebPages: O(() => import("./PkToolShowWebPages-DDsErkru.js").then((e) => e.n))
 }, se = /* @__PURE__ */ k({
 	__name: "PkStreamingMarkdownAutoscroll",
 	props: {
 		markdown: {},
-		innerClass: {}
+		innerClass: {},
+		isDark: { type: Boolean }
 	},
 	setup(e) {
 		let t = e, n = I(), r = I(0), i = I(!1), a = () => {
@@ -48,8 +50,13 @@ var H = {
 			onScroll: a
 		}, [D(s, {
 			markdown: e.markdown,
+			"is-dark": e.isDark,
 			class: j(e.innerClass)
-		}, null, 8, ["markdown", "class"])], 544));
+		}, null, 8, [
+			"markdown",
+			"is-dark",
+			"class"
+		])], 544));
 	}
 }), U = 30, W = 50, G = 500;
 function ce(e) {
@@ -146,6 +153,7 @@ var le = { class: "pk-chatbot-messages__wrapper" }, ue = {
 		showMessageDateTime: { type: Boolean },
 		showMessageTokensCount: { type: Boolean },
 		showAllMessageParts: { type: Boolean },
+		isDark: { type: Boolean },
 		feedbackMessageId: {},
 		feedbackLoading: { type: Boolean },
 		feedbackSubmitted: { type: Boolean },
@@ -195,7 +203,7 @@ var le = { class: "pk-chatbot-messages__wrapper" }, ue = {
 			return h(e);
 		}), je = (e) => N.messages?.findIndex((t) => t.id === e), Z = (e) => e === void 0 || !N.messages ? !1 : e === (N.messages?.length ?? 0) - 1, Me = (e) => Z(e) && N.status === "ready" && N.actions?.includes("regenerate"), Q = (e, t) => (Z(t) && N.status === "ready" || !Z(t)) && N.actions?.includes(e), Ne = (e) => {
 			let t = e.parts[e.parts.length - 1];
-			return n(t);
+			return a(t);
 		}, $ = (e) => e.role === "assistant", Pe = (e) => e.role === "user", Fe = (e) => N.messages?.slice(0, e).reverse().find((e) => $(e)), Ie = (e) => N.messages?.slice(e + 1).find((e) => $(e)), Le = (e) => {
 			let t = Fe(e), n = Ie(e);
 			if (!t?.metadata?.createdAt || !n?.metadata?.createdAt) return !1;
@@ -234,7 +242,7 @@ var le = { class: "pk-chatbot-messages__wrapper" }, ue = {
 					class: j(["pk-chatbot-message", [`pk-chatbot-message--${e.role}`, { "pk-chatbot-message--loading": X.value && Z(g) && $(e) }]]),
 					style: M({ minHeight: Z(g) && $(e) && !Oe.value ? `${K.value}px` : void 0 })
 				}, [
-					(F(!0), w(y, null, te(De(e), (o, l) => (F(), w(y, { key: l }, [R(n)(o) && o.text.trim() ? (F(), S(b, {
+					(F(!0), w(y, null, te(De(e), (o, l) => (F(), w(y, { key: l }, [R(a)(o) && o.text.trim() ? (F(), S(b, {
 						key: 0,
 						appear: "",
 						name: "pk-chatbot-part"
@@ -248,10 +256,15 @@ var le = { class: "pk-chatbot-messages__wrapper" }, ue = {
 							key: 0,
 							class: "wysiwyg",
 							markdown: o.text,
+							"is-dark": O.isDark,
 							loading: g === (O.messages?.length ?? 0) - 1 && O.status === "streaming"
-						}, null, 8, ["markdown", "loading"])) : (F(), w(y, { key: 1 }, [E(L(o.text), 1)], 64))])])]),
+						}, null, 8, [
+							"markdown",
+							"is-dark",
+							"loading"
+						])) : (F(), w(y, { key: 1 }, [E(L(o.text), 1)], 64))])])]),
 						_: 2
-					}, 1024)) : R(a)(o) ? (F(), S(b, {
+					}, 1024)) : R(t)(o) ? (F(), S(b, {
 						key: 1,
 						appear: "",
 						name: "pk-chatbot-part"
@@ -266,12 +279,12 @@ var le = { class: "pk-chatbot-messages__wrapper" }, ue = {
 							"filename"
 						])]),
 						_: 2
-					}, 1024)) : R(i)(o) && !R(u)(o) && (R(H)[R(t)(o)] || R(W)[o.type] || O.showAllMessageParts) ? (F(), S(b, {
+					}, 1024)) : R(r)(o) && !R(u)(o) && (R(H)[R(n)(o)] || R(W)[o.type] || O.showAllMessageParts) ? (F(), S(b, {
 						key: 2,
 						appear: "",
 						name: "pk-chatbot-part"
 					}, {
-						default: B(() => [!R(W)[o.type] && R(H)[R(t)(o)] ? (F(), S(re(R(H)[R(t)(o)]), {
+						default: B(() => [!R(W)[o.type] && R(H)[R(n)(o)] ? (F(), S(re(R(H)[R(n)(o)]), {
 							key: `component-${l}-${R(d)(o)}`,
 							part: o
 						}, null, 8, ["part"])) : ne(f.$slots, o.type, ee({
@@ -286,7 +299,7 @@ var le = { class: "pk-chatbot-messages__wrapper" }, ue = {
 							key: 0,
 							name: R(h)(o),
 							class: "shrink-0"
-						}, null, 8, ["name"])) : C("", !0), T("code", he, L(R(r)(o.type)), 1)])])) : C("", !0)])]),
+						}, null, 8, ["name"])) : C("", !0), T("code", he, L(R(i)(o.type)), 1)])])) : C("", !0)])]),
 						_: 2
 					}, 1024)) : C("", !0)], 64))), 128)),
 					D(b, {
@@ -320,9 +333,10 @@ var le = { class: "pk-chatbot-messages__wrapper" }, ue = {
 							default: B(() => [Y.value && "text" in Y.value && Y.value.text.trim() ? (F(), S(se, {
 								key: 0,
 								markdown: Y.value.text,
+								"is-dark": O.isDark,
 								"inner-class": "wysiwyg",
 								class: "border border-surface-4 rounded p-4 mt-8 bg-surface-1 max-h-64 text-10 w-full"
-							}, null, 8, ["markdown"])) : C("", !0)]),
+							}, null, 8, ["markdown", "is-dark"])) : C("", !0)]),
 							_: 1
 						})])) : C("", !0)]),
 						_: 2
@@ -470,4 +484,4 @@ var le = { class: "pk-chatbot-messages__wrapper" }, ue = {
 //#endregion
 export { se as n, xe as t };
-//# sourceMappingURL=PkChatbotMessages-BDziUgck.js.map
+//# sourceMappingURL=PkChatbotMessages-DUOrit9Y.js.map