npm - @8wave/ai-elements - Versions diffs - 0.74.0 → 0.77.0 - Mend

@8wave/ai-elements 0.74.0 → 0.77.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 (159) hide show

package/dist-vue/_chunks/{PkChatbotInput-LHE0HZ9z.js.map → PkChatbotInput-C5QSmt21.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PkChatbotInput-LHE0HZ9z.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 } 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 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 const isDismissableNoticeVisible = ref<boolean>(true)\n const closeDismissableNotice = () => {\n isDismissableNoticeVisible.value = false\n }\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 const hasCaptureSupport = 'capture' in document.createElement('input')\n\n onMounted(() => {\n try {\n if (textareaEl.value) {\n autosize(textareaEl.value)\n }\n } catch {\n // autosize initialization failed, textarea remains functional\n }\n })\n\n onBeforeUnmount(() => {\n try {\n if (textareaEl.value) {\n autosize.destroy(textareaEl.value)\n }\n } catch {\n // ignore cleanup errors\n }\n for (const att of pendingAttachments.value) {\n URL.revokeObjectURL(att.localUrl)\n }\n })\n\n const isStreaming = computed(() => {\n return props.status === 'streaming'\n })\n const isSubmitted = computed(() => {\n return props.status === 'submitted'\n })\n\n const currentLength = computed(() => modelValue.value?.length ?? 0)\n\n const isOverLimit = computed(() => {\n return (\n props.maxMessageLength !== undefined &&\n currentLength.value > props.maxMessageLength\n )\n })\n\n const isUploadingAnyFile = computed(() =>\n pendingAttachments.value.some((a) => a.state === 'uploading'),\n )\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 isSubmitEnabled = computed(() => {\n if (isStreaming.value \|\| isSubmitted.value) {\n return false\n }\n if (isUploadingAnyFile.value) {\n return false\n }\n if (isOverLimit.value) {\n return false\n }\n return (modelValue.value?.trim().length ?? 0) > 0\n })\n\n const autosizeTextarea = () => {\n if (textareaEl.value) {\n autosize.update(textareaEl.value)\n }\n }\n\n const handleSubmit = () => {\n if (isSubmitEnabled.value) {\n emit('submit')\n nextTick(() => {\n autosizeTextarea()\n textareaEl.value?.blur()\n })\n }\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 // Reset so the same file can be selected again\n input.value = ''\n }\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 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</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=\"isStreaming \|\| isSubmitted\"\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=\"isStreaming \|\| isSubmitted\"\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=\"isStreaming \|\| isSubmitted\"\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=\"isStreaming \|\| isSubmitted\"\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 v-model=\"modelValue\"\n class=\"pk-chatbot-input__textarea\"\n name=\"message\"\n rows=\"1\"\n :placeholder\n @focus=\"autosizeTextarea\"\n @blur=\"autosizeTextarea\"\n @paste=\"nextTick(autosizeTextarea)\"\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 color: var(--color-word-1);\n background-color: var(--color-surface);\n overflow: hidden;\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 } 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 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 const isDismissableNoticeVisible = ref<boolean>(true)\n const closeDismissableNotice = () => {\n isDismissableNoticeVisible.value = false\n }\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 const hasCaptureSupport = 'capture' in document.createElement('input')\n\n onMounted(() => {\n try {\n if (textareaEl.value) {\n autosize(textareaEl.value)\n }\n } catch {\n // autosize initialization failed, textarea remains functional\n }\n })\n\n onBeforeUnmount(() => {\n try {\n if (textareaEl.value) {\n autosize.destroy(textareaEl.value)\n }\n } catch {\n // ignore cleanup errors\n }\n for (const att of pendingAttachments.value) {\n URL.revokeObjectURL(att.localUrl)\n }\n })\n\n const isStreaming = computed(() => {\n return props.status === 'streaming'\n })\n const isSubmitted = computed(() => {\n return props.status === 'submitted'\n })\n\n const currentLength = computed(() => modelValue.value?.length ?? 0)\n\n const isOverLimit = computed(() => {\n return (\n props.maxMessageLength !== undefined &&\n currentLength.value > props.maxMessageLength\n )\n })\n\n const isUploadingAnyFile = computed(() =>\n pendingAttachments.value.some((a) => a.state === 'uploading'),\n )\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 isSubmitEnabled = computed(() => {\n if (isStreaming.value \|\| isSubmitted.value) {\n return false\n }\n if (isUploadingAnyFile.value) {\n return false\n }\n if (isOverLimit.value) {\n return false\n }\n return (modelValue.value?.trim().length ?? 0) > 0\n })\n\n const autosizeTextarea = () => {\n if (textareaEl.value) {\n autosize.update(textareaEl.value)\n }\n }\n\n const handleSubmit = () => {\n if (isSubmitEnabled.value) {\n emit('submit')\n nextTick(() => {\n autosizeTextarea()\n textareaEl.value?.blur()\n })\n }\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 // Reset so the same file can be selected again\n input.value = ''\n }\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 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</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=\"isStreaming \|\| isSubmitted\"\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=\"isStreaming \|\| isSubmitted\"\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=\"isStreaming \|\| isSubmitted\"\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=\"isStreaming \|\| isSubmitted\"\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 v-model=\"modelValue\"\n class=\"pk-chatbot-input__textarea\"\n name=\"message\"\n rows=\"1\"\n :placeholder\n @focus=\"autosizeTextarea\"\n @blur=\"autosizeTextarea\"\n @paste=\"nextTick(autosizeTextarea)\"\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 color: var(--color-word-1);\n background-color: var(--color-surface);\n overflow: hidden;\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":";;;;;;AAAA,IAAI,oBAAE,IAAI,KAAG;AAAC,SAAS,EAAE,GAAE;CAAC,IAAI,IAAE,EAAE,IAAI,EAAE;AAAC,MAAG,EAAE,SAAS;;AAAC,SAAS,EAAE,GAAE;CAAC,IAAI,IAAE,EAAE,IAAI,EAAE;AAAC,MAAG,EAAE,QAAQ;;AAAC,IAAI,IAAE;AAAkB,OAAO,SAApB,OAA4B,CAAC,IAAE,SAAS,GAAE;AAAC,QAAO;GAAI,UAAQ,SAAS,GAAE;AAAC,QAAO;GAAG,EAAE,SAAO,SAAS,GAAE;AAAC,QAAO;MAAK,CAAC,IAAE,SAAS,GAAE,GAAE;AAAC,QAAO,KAAG,MAAM,UAAU,QAAQ,KAAK,EAAE,SAAO,IAAE,CAAC,EAAE,EAAC,SAAS,GAAE;AAAC,SAAO,SAAS,GAAE;AAAC,OAAG,KAAG,EAAE,YAAuB,EAAE,aAAf,cAAyB,CAAC,EAAE,IAAI,EAAE,EAAC;IAAC,IAAI,GAAE,IAAE,MAAK,IAAE,OAAO,iBAAiB,EAAE,EAAC,KAAG,IAAE,EAAE,OAAM,WAAU;AAAC,OAAE;MAAC,wBAA4B,MAAL,MAAQ,CAAC,EAAE,MAAM,WAAW,EAAE;MAAC,kBAAiB;MAAK,CAAC,EAAC,IAAE,EAAE;QAAQ,IAAE,SAAS,GAAE;AAAC,OAAE,oBAAoB,oBAAmB,EAAE,EAAC,EAAE,oBAAoB,mBAAkB,EAAE,EAAC,EAAE,oBAAoB,SAAQ,EAAE,EAAC,OAAO,oBAAoB,UAAS,EAAE,EAAC,OAAO,KAAK,EAAE,CAAC,QAAQ,SAAS,GAAE;AAAC,aAAO,EAAE,MAAM,KAAG,EAAE;OAAI,EAAC,EAAE,OAAO,EAAE;MAAE,KAAK,GAAE;KAAC,QAAO,EAAE,MAAM;KAAO,QAAO,EAAE,MAAM;KAAO,WAAU,EAAE,MAAM;KAAU,WAAU,EAAE,MAAM;KAAU,WAAU,EAAE,MAAM;KAAU,UAAS,EAAE,MAAM;KAAS,CAAC;AAAC,MAAE,iBAAiB,oBAAmB,EAAE,EAAC,EAAE,iBAAiB,mBAAkB,EAAE,EAAC,EAAE,iBAAiB,SAAQ,EAAE,EAAC,OAAO,iBAAiB,UAAS,EAAE,EAAC,EAAE,MAAM,YAAU,UAAS,EAAE,MAAM,WAAS,cAAa,EAAE,IAAI,GAAE;KAAC,SAAQ;KAAE,QAAO;KAAE,CAAC,EAAC,GAAG;;GAAC,SAAS,EAAE,GAAE;IAAC,IAAI,GAAE,GAAE,IAAE,EAAE,kBAAiB,IAAW,MAAT,KAAK,IAAM,OAAK,GAAE,IAAE,EAAE,wBAAuB,IAAW,MAAT,KAAK,KAAO,GAAE,IAAE,EAAE;AAAU,QAAO,EAAE,iBAAN,MAAkC,EAAE,WAAf,aAAsB,EAAE,MAAM,SAAO,SAAgB,EAAE,WAAX,WAAoB,EAAE,MAAM,SAAO,eAAc,MAAI,IAAE,SAAS,GAAE;AAAC,UAAI,IAAI,IAAE,EAAE,EAAC,KAAG,EAAE,cAAY,EAAE,sBAAsB,SAAS,GAAE,WAAW,aAAW,EAAE,KAAK,CAAC,EAAE,YAAW,EAAE,WAAW,UAAU,CAAC,EAAC,IAAE,EAAE;AAAW,YAAO,WAAU;AAAC,aAAO,EAAE,QAAQ,SAAS,GAAE;OAAC,IAAI,IAAE,EAAE,IAAG,IAAE,EAAE;AAAG,SAAE,MAAM,iBAAe,QAAO,EAAE,YAAU,GAAE,EAAE,MAAM,iBAAe;QAAM;;MAAG,EAAE,EAAC,EAAE,MAAM,SAAO,KAAI,IAAkB,EAAE,cAAlB,gBAA4B,EAAE,gBAAc,WAAW,EAAE,WAAW,GAAC,WAAW,EAAE,cAAc,IAAE,EAAE,eAAa,WAAW,EAAE,eAAe,GAAC,WAAW,EAAE,kBAAkB,EAAU,EAAE,cAAX,UAAsB,IAAE,WAAW,EAAE,UAAU,IAAa,EAAE,cAAb,aAAyB,EAAE,MAAM,WAAS,WAAU,IAAE,WAAW,EAAE,UAAU,IAAa,EAAE,cAAb,aAAyB,EAAE,MAAM,WAAS,WAAU,EAAE,MAAM,SAAO,IAAE,MAAK,MAAI,EAAE,MAAM,YAAU,IAAG,KAAG,GAAG,EAAC,MAAI,MAAI,EAAE,cAAc,IAAI,MAAM,oBAAmB,EAAC,SAAQ,CAAC,GAAE,CAAC,CAAC,EAAC,IAAE,IAAG,MAAI,EAAE,YAAU,CAAC,IAAG;KAAC,IAAI,IAAE,EAAE;AAAU,KAAW,EAAE,aAAb,aAAwB,EAAE,MAAM,YAAoB,MAAV,UAAY,QAAM,UAAS,EAAE;MAAC,kBAAiB;MAAE,wBAAuB,CAAC;MAAE,CAAC;;;GAAE,SAAS,IAAG;AAAC,MAAE;KAAC,wBAAuB,CAAC;KAAE,kBAAiB;KAAK,CAAC;;IAAG,EAAE;GAAE,EAAC;GAAI,UAAQ,SAAS,GAAE;AAAC,QAAO,KAAG,MAAM,UAAU,QAAQ,KAAK,EAAE,SAAO,IAAE,CAAC,EAAE,EAAC,EAAE,EAAC;GAAG,EAAE,SAAO,SAAS,GAAE;AAAC,QAAO,KAAG,MAAM,UAAU,QAAQ,KAAK,EAAE,SAAO,IAAE,CAAC,EAAE,EAAC,EAAE,EAAC;;AAAI,IAAI,IAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECiBjlF,IAAM,IAAa,EAAmB,GAAA,aAAC,EACjC,IAAqB,EACxB,GAAC,qBAEJ,EAEM,IAAO,GAMP,IAAQ,GASR,IAA6B,EAAa,GAAI,EAC9C,WAA+B;AACjC,KAA2B,QAAQ;KAGjC,IAAa,EAAoC,aAAY,EAC7D,IAAc,EAAiC,cAAa,EAC5D,IAAgB,EAAiC,gBAAe,EAChE,IAAS,EAAgC,SAAQ,EAEjD,KAAoB,aAAa,SAAS,cAAc,QAAO;AAYrE,EAVA,QAAgB;AACZ,OAAI;AACA,IAAI,EAAW,SACX,EAAS,EAAW,MAAK;WAEzB;IAGX,EAED,QAAsB;AAClB,OAAI;AACA,IAAI,EAAW,SACX,EAAS,QAAQ,EAAW,MAAK;WAEjC;AAGR,QAAK,IAAM,KAAO,EAAmB,MACjC,KAAI,gBAAgB,EAAI,SAAQ;IAEvC;EAED,IAAM,IAAc,QACT,EAAM,WAAW,YAC3B,EACK,IAAc,QACT,EAAM,WAAW,YAC3B,EAEK,IAAgB,QAAe,EAAW,OAAO,UAAU,EAAC,EAE5D,IAAc,QAEZ,EAAM,qBAAqB,KAAA,KAC3B,EAAc,QAAQ,EAAM,iBAEnC,EAEK,KAAqB,QACvB,EAAmB,MAAM,MAAM,MAAM,EAAE,UAAU,YAAY,CACjE,EAEM,KAAkB,QACd,EAAM,YAAY,kBAAkB,KAAK,IAAI,IAAI,GAC3D,EAEM,IAAuB,SACxB,EAAM,YAAY,oBAAoB,EAAE,EACpC,QAAQ,MAAM,EAAE,WAAW,SAAS,CAAA,CACpC,KAAK,IAAI,CAClB,EAEM,IAAmB,QACf,MAAqB,EAAqB,MAAM,SAAS,EACnE,EAEM,IAAkB,QAChB,EAAY,SAAS,EAAY,SAGjC,GAAmB,SAGnB,EAAY,QACL,MAEH,EAAW,OAAO,MAAM,CAAC,UAAU,KAAK,EACnD,EAEK,UAAyB;AAC3B,GAAI,EAAW,SACX,EAAS,OAAO,EAAW,MAAK;KAIlC,UAAqB;AACvB,GAAI,EAAgB,UAChB,EAAK,SAAQ,EACb,QAAe;AAEX,IADA,GAAiB,EACjB,EAAW,OAAO,MAAK;KAC1B;KAIH,UAAuB;AACzB,KAAY,OAAO,OAAM;KAGvB,WAAyB;AAC3B,KAAc,OAAO,OAAM;KAGzB,KAAgB,MAAiB;GACnC,IAAM,IAAQ,EAAM,QACd,IAAO,EAAM,QAAQ;AAK3B,GAJI,KACA,EAAK,eAAe,EAAI,EAG5B,EAAM,QAAQ;KAGZ,MAAoB,MAAe;GACrC,IAAM,IAAM,EAAmB,MAAM,MAAM,MAAM,EAAE,OAAO,EAAE;AAI5D,GAHI,KACA,IAAI,gBAAgB,EAAI,SAAQ,EAEpC,EAAmB,QAAQ,EAAmB,MAAM,QAC/C,MAAM,EAAE,OAAO,EACpB;KAGE,IAAoB,SACf,EAAM,kBAAkB,OAAS,CAAC,CAAC,EAAM,YAAY,QAChE,EAWM,EAAE,uBAAmB,GAAY,GAAQ;GAC3C,WAAW,QAAe,EAAM,YAAY,oBAAoB,EAAE,CAAC;GACnE,SAXgB,MAAyB;AACrC,WAAC,EAAkB,SAAS,CAAC,GAGjC,MAAK,IAAM,KAAQ,EACf,GAAK,eAAe,EAAI;;GAO/B,CAAA;;;eAID,EAyKM,OAzKN,IAyKM,CAvKQ,EAAA,qBAAqB,EAAA,SAAA,GAAA,EAD/B,EAaM,OAbN,IAaM,CAVF,EAEsB,GAAA;IADjB,UAAU,EAAA;IACX,OAAM;8BAEA,EAAA,qBAAA,GAAA,EADV,EAMsC,GAAA;;IAJjC,OAAOA,EAAAA,GAAE,eAAA;IACV,WAAU;IACV,MAAK;IACL,OAAM;IACL,SAAO;uDAEhB,EAyJO,QAAA;aAxJC;IAAJ,KAAI;IACJ,OAAM;IACL,UAAM,EAAU,GAAY,CAAA,UAAA,CAAA;;IAEnB,EAAA,GAAc,IAAI,EAAA,SAAA,GAAA,EAD5B,EAOM,OAPN,IAOM,CAJF,EAEkD,GAAA;KAD9C,MAAK;KACL,OAAM;QACV,EAAwC,QAAA,MAAA,EAA/BA,EAAAA,GAAE,kBAAA,CAAA,EAAA,EAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;IAGL,EAAA,MAAmB,UAAA,GAAA,EAD7B,EAaM,OAbN,IAaM,EAAA,EAAA,GAAA,EAVF,EASyC,GAAA,MAAA,GARvB,EAAA,QAAP,YADX,EASyC,GAAA;KAPpC,KAAK,EAAI;KACT,cAAY,EAAI,KAAK;KACrB,KAAK,EAAI;KACT,UAAU,EAAI,KAAK;KACnB,SAAS,EAAI,UAAK;KAClB,OAAO,EAAI,UAAK,UAAe,EAAI,QAAQ,KAAA;KAC3C,WAAW,EAAI,UAAK;KACpB,WAAM,MAAE,GAAiB,EAAI,GAAA;;;;;;;;;;IAEtC,EA8HM,OA9HN,IA8HM;KA5HiC,EAAA,cAAsC,EAAA,WAAW,YAAoC,EAAA,SAAoBC,EAAAA,OAAM,0BAAA,GAAA,EADlJ,EA8Ca,GAAA,GAAA,EAAA,EAAA,KAAA,GAAA,EAxCD;;;;;MAKP,CAAA,CAAA,EAAA;MACU,SAAO,GAYL,EAZS,SAAM,WAAQ,cAAI,CACpC,EAWS,UAXT,EAWS,EAVJ,MAAM,MAAW,EAAK,EAAC,EAAA,EAChB,GAAI;OACZ,OAAM;OACN,MAAK;OACJ,OAAOD,EAAAA,GAAE,oBAAA;OACT,UAAU,EAAA,SAAe,EAAA;OACzB,SAAO;WACR,EAE4C,GAAA;OADxC,MAAK;OACL,OAAM;;MAGP,OAAK,QASO;OAPT,EAAA,SAAA,GAAA,EADV,EAQmB,GAAA;;QANd,UAAU,EAAA,SAAe,EAAA;QACzB,SAAO;;yBAGsC,CAF9C,EAE8C,GAAA;SAD1C,MAAK;SACL,OAAM;cAAoC,MAC9C,EAAGA,EAAAA,GAAE,mBAAA,CAAA,EAAA,EAAA,CAAA,CAAA;;;OAET,EAOmB,GAAA;QANd,UAAU,EAAA,SAAe,EAAA;QACzB,SAAO;;yBAGsC,CAF9C,EAE8C,GAAA;SAD1C,MAAK;SACL,OAAM;cAAoC,MAC9C,EAAGA,EAAAA,GAAE,oBAAA,CAAA,EAAA,EAAA,CAAA,CAAA;;;OAET,GAAkC,EAAA,QAAA,qBAAA;;;eAI3B,EAAA,cAAc,EAAA,WAAW,WAAA,GAAA,EADxC,EAUS,UAAA;;MARL,OAAM;MACN,MAAK;MACJ,OAAOA,EAAAA,GAAE,oBAAA;MACT,UAAU,EAAA,SAAe,EAAA;MACzB,SAAO;SACR,EAE4C,GAAA;MADxC,MAAK;MACL,OAAM;;KAGJ,EAAA,cAAc,EAAA,WAAW,WAAA,GAAA,EADnC,EAM6B,SAAA;;eAJrB;MAAJ,KAAI;MACJ,MAAK;MACL,QAAA;MACC,QAAQ,GAAA;MACR,UAAQ;;KAEH,EAAA,cAAc,EAAA,WAAW,WAAW,EAAA,SAAA,GAAA,EAD9C,EAO6B,SAAA;;eALrB;MAAJ,KAAI;MACJ,MAAK;MACL,SAAQ;MACR,QAAA;MACC,QAAQ,EAAA;MACR,UAAQ;;KACb,EAYM,OAZN,GAYM,CAAA,GAXF,EAUqD,YAAA;eAT7C;MAAJ,KAAI;+CACe,QAAA;MACnB,OAAM;MACN,MAAK;MACL,MAAK;MACJ,aAAA,EAAA;MACA,SAAO;MACP,QAAM;MACN,SAAK,AAAA,EAAA,QAAA,MAAE,EAAS,EAAgB;MAChC,WAAO,GAAA,EAAgB,GAAY,CAAA,UAAA,CAAA,EAAA,CAAA,QAAA,CAAA;4BAR3B,EAAA,MAAU,CAAA,CAAA,CAAA,CAAA;KAWjB,EAAA,oBAAA,GAAA,EADV,EAQM,OAAA;;MANF,OAAK,GAAA,CAAC,6BAA2B,EAAA,mCACY,EAAA,OAAW,CAAA,CAAA;aACrDE,EAAAA,GAAG,EAAA,OAAa,UAAA,CAAA,GAAe,KAAC,EAAA,EAAA,EAGlC,QAHkC,GAGlC,EADOA,EAAAA,GAAG,EAAA,kBAAgB,UAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;KAIrB,EAAA,SAAA,GAAA,EADV,EASS,UAAA;;MAPL,OAAM;MACN,MAAK;MACJ,OAAOF,EAAAA,GAAE,cAAA;MACT,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,kBAAA;SACZ,EAE4C,GAAA;MADxC,MAAK;MACL,OAAM;yBAEd,EAmBS,UAAA;;MAjBL,OAAM;MACN,MAAK;MACJ,OAAgC,EAAA,QAA8CA,EAAAA,GAAE,gBAAA,GAAgDA,EAAAA,GAAE,iBAAA;MAKlI,UAAQ,CAAG,EAAA;SACZ,EAQ4C,GAAA;MAPvC,MAAmC,EAAA,QAAA,yBAAuG,EAAA,QAAA,qBAAA;MAO3I,OAAM"}
1	+ {"version":3,"file":"PkChatbotInput-C5QSmt21.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 } 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 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 const isDismissableNoticeVisible = ref<boolean>(true)\n const closeDismissableNotice = () => {\n isDismissableNoticeVisible.value = false\n }\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 const hasCaptureSupport = 'capture' in document.createElement('input')\n\n onMounted(() => {\n try {\n if (textareaEl.value) {\n autosize(textareaEl.value)\n }\n } catch {\n // autosize initialization failed, textarea remains functional\n }\n })\n\n onBeforeUnmount(() => {\n try {\n if (textareaEl.value) {\n autosize.destroy(textareaEl.value)\n }\n } catch {\n // ignore cleanup errors\n }\n for (const att of pendingAttachments.value) {\n URL.revokeObjectURL(att.localUrl)\n }\n })\n\n const isStreaming = computed(() => {\n return props.status === 'streaming'\n })\n const isSubmitted = computed(() => {\n return props.status === 'submitted'\n })\n\n const currentLength = computed(() => modelValue.value?.length ?? 0)\n\n const isOverLimit = computed(() => {\n return (\n props.maxMessageLength !== undefined &&\n currentLength.value > props.maxMessageLength\n )\n })\n\n const isUploadingAnyFile = computed(() =>\n pendingAttachments.value.some((a) => a.state === 'uploading'),\n )\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 isSubmitEnabled = computed(() => {\n if (isStreaming.value \|\| isSubmitted.value) {\n return false\n }\n if (isUploadingAnyFile.value) {\n return false\n }\n if (isOverLimit.value) {\n return false\n }\n return (modelValue.value?.trim().length ?? 0) > 0\n })\n\n const autosizeTextarea = () => {\n if (textareaEl.value) {\n autosize.update(textareaEl.value)\n }\n }\n\n const handleSubmit = () => {\n if (isSubmitEnabled.value) {\n emit('submit')\n nextTick(() => {\n autosizeTextarea()\n textareaEl.value?.blur()\n })\n }\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 // Reset so the same file can be selected again\n input.value = ''\n }\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 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</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=\"isStreaming \|\| isSubmitted\"\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=\"isStreaming \|\| isSubmitted\"\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=\"isStreaming \|\| isSubmitted\"\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=\"isStreaming \|\| isSubmitted\"\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 v-model=\"modelValue\"\n class=\"pk-chatbot-input__textarea\"\n name=\"message\"\n rows=\"1\"\n :placeholder\n @focus=\"autosizeTextarea\"\n @blur=\"autosizeTextarea\"\n @paste=\"nextTick(autosizeTextarea)\"\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 color: var(--color-word-1);\n background-color: var(--color-surface);\n overflow: hidden;\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 } 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 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 const isDismissableNoticeVisible = ref<boolean>(true)\n const closeDismissableNotice = () => {\n isDismissableNoticeVisible.value = false\n }\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 const hasCaptureSupport = 'capture' in document.createElement('input')\n\n onMounted(() => {\n try {\n if (textareaEl.value) {\n autosize(textareaEl.value)\n }\n } catch {\n // autosize initialization failed, textarea remains functional\n }\n })\n\n onBeforeUnmount(() => {\n try {\n if (textareaEl.value) {\n autosize.destroy(textareaEl.value)\n }\n } catch {\n // ignore cleanup errors\n }\n for (const att of pendingAttachments.value) {\n URL.revokeObjectURL(att.localUrl)\n }\n })\n\n const isStreaming = computed(() => {\n return props.status === 'streaming'\n })\n const isSubmitted = computed(() => {\n return props.status === 'submitted'\n })\n\n const currentLength = computed(() => modelValue.value?.length ?? 0)\n\n const isOverLimit = computed(() => {\n return (\n props.maxMessageLength !== undefined &&\n currentLength.value > props.maxMessageLength\n )\n })\n\n const isUploadingAnyFile = computed(() =>\n pendingAttachments.value.some((a) => a.state === 'uploading'),\n )\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 isSubmitEnabled = computed(() => {\n if (isStreaming.value \|\| isSubmitted.value) {\n return false\n }\n if (isUploadingAnyFile.value) {\n return false\n }\n if (isOverLimit.value) {\n return false\n }\n return (modelValue.value?.trim().length ?? 0) > 0\n })\n\n const autosizeTextarea = () => {\n if (textareaEl.value) {\n autosize.update(textareaEl.value)\n }\n }\n\n const handleSubmit = () => {\n if (isSubmitEnabled.value) {\n emit('submit')\n nextTick(() => {\n autosizeTextarea()\n textareaEl.value?.blur()\n })\n }\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 // Reset so the same file can be selected again\n input.value = ''\n }\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 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</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=\"isStreaming \|\| isSubmitted\"\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=\"isStreaming \|\| isSubmitted\"\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=\"isStreaming \|\| isSubmitted\"\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=\"isStreaming \|\| isSubmitted\"\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 v-model=\"modelValue\"\n class=\"pk-chatbot-input__textarea\"\n name=\"message\"\n rows=\"1\"\n :placeholder\n @focus=\"autosizeTextarea\"\n @blur=\"autosizeTextarea\"\n @paste=\"nextTick(autosizeTextarea)\"\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 color: var(--color-word-1);\n background-color: var(--color-surface);\n overflow: hidden;\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-BxTeEm3j.js → PkChatbotMessages-DOeUT6YL.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 import { t as e } from "./PkChatbotError-CvZxHGlI.js";
 import { c as t, f as n, o as r, p as i, u as a } from "./src-EtGd6cRz.js";
 import { t as o } from "./PkRelativeTime-WZ2aPcp_.js";
-import { t as ee } from "./PkStreamingMarkdown-B4gnJ4hk.js";
-import { t as s } from "./PkChatbotFeedbackForm-D-lx1URv.js";
+import { t as ee } from "./PkStreamingMarkdown-BAhC3uGK.js";
+import { t as s } from "./PkChatbotFeedbackForm-lj9CHdhn.js";
 import { t as te } from "./PkChatbotFilePreview-DHzuGtz5.js";
 import { a as ne, n as re, o as c, r as l, t as u } from "./utils-BegUBK7s.js";
 import { Fragment as d, Transition as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, defineAsyncComponent as b, defineComponent as x, mergeProps as S, nextTick as C, normalizeClass as w, normalizeStyle as T, onMounted as E, openBlock as D, ref as O, renderList as ie, renderSlot as ae, resolveDynamicComponent as oe, toDisplayString as k, unref as A, useSlots as se, useTemplateRef as ce, watch as j, withCtx as M, withModifiers as N } from "vue";
@@ -10,10 +10,10 @@ import { VvButton as le, VvButtonGroup as ue, VvIcon as de } from "@volverjs/ui-
 import { useI18n as fe } from "vue-i18n";
 //#region ../../packages/components/src/chat/toolComponentMap.ts
 var P = {
-	showArtifact: b(() => import("./PkToolShowArtifact-EvbUZSOf.js").then((e) => e.n)),
+	showArtifact: b(() => import("./PkToolShowArtifact-RzrDPcEQ.js").then((e) => e.n)),
 	showCalendarEvent: b(() => import("./PkToolShowCalendarEvent-DXRAzzKm.js").then((e) => e.n)),
 	showComparison: b(() => import("./PkToolShowComparison-CqN_pqBW.js").then((e) => e.n)),
-	showContactForm: b(() => import("./PkToolShowContactForm-CsDOqSJK.js").then((e) => e.n)),
+	showContactForm: b(() => import("./PkToolShowContactForm-5H4jfq1F.js").then((e) => e.n)),
 	showEmail: b(() => import("./PkToolShowEmail-B7YiliCE.js").then((e) => e.n)),
 	showImageGallery: b(() => import("./PkToolShowImageGallery-B7Bt6ZGv.js").then((e) => e.n)),
 	showLocation: b(() => import("./PkToolShowLocation-DteWf0Cs.js").then((e) => e.n)),
@@ -21,7 +21,7 @@ var P = {
 	showMultipleChoice: b(() => import("./PkToolShowMultipleChoice-DZXfWtQp.js").then((e) => e.n)),
 	showProductList: b(() => import("./PkToolShowProductList-CtqWK0x4.js").then((e) => e.n)),
 	showQrCode: b(() => import("./PkToolShowQrCode-B4ex3m8i.js").then((e) => e.n)),
-	showSources: b(() => import("./PkToolShowSources-ZtXFkIHt.js").then((e) => e.n)),
+	showSources: b(() => import("./PkToolShowSources-Dv0uuvqS.js").then((e) => e.n)),
 	showSuggestedReply: b(() => import("./PkToolShowSuggestedReply-30m9yWDL.js").then((e) => e.n)),
 	showWeather: b(() => import("./PkToolShowWeather-Coq6H0iv.js")),
 	showWebPages: b(() => import("./PkToolShowWebPages-DZIdrdWs.js").then((e) => e.n))
@@ -181,7 +181,7 @@ var P = {
 					class: w(["pk-chatbot-message", [`pk-chatbot-message--${e.role}`, { "pk-chatbot-message--loading": K.value && X(E) && Q(e) }]]),
 					style: T({ minHeight: X(E) && Q(e) && !q.value ? `${H.value}px` : void 0 })
 				}, [
-					(D(!0), g(d, null, ie(e.parts, (o, s) => (D(), g(d, { key: s }, [A(n)(o) ? (D(), g("div", _e, [ae(c.$slots, "text", S({ ref_for: !0 }, {
+					(D(!0), g(d, null, ie(e.parts, (o, s) => (D(), g(d, { key: s }, [A(n)(o) && o.text.trim() ? (D(), g("div", _e, [ae(c.$slots, "text", S({ ref_for: !0 }, {
 						message: e,
 						part: o,
 						index: E,
@@ -385,4 +385,4 @@ var P = {
 //#endregion
 export { pe as n, F as t };
-//# sourceMappingURL=PkChatbotMessages-BxTeEm3j.js.map
+//# sourceMappingURL=PkChatbotMessages-DOeUT6YL.js.map

package/dist-vue/_chunks/PkChatbotMessages-DOeUT6YL.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PkChatbotMessages-DOeUT6YL.js","names":["$d","$emit","$n"],"sources":["../../../../packages/components/src/chat/toolComponentMap.ts","../../../../packages/components/src/chat/PkStreamingMarkdownAutoscroll.vue","../../../../packages/components/src/chat/PkStreamingMarkdownAutoscroll.vue","../../../../packages/components/src/chat/PkChatbotMessages.vue","../../../../packages/components/src/chat/PkChatbotMessages.vue"],"sourcesContent":["import { defineAsyncComponent } from 'vue'\n\n/**\n * Maps tool `part.type` to the corresponding component for auto-rendering.\n * Only includes simple tools that accept only a `:part` prop.\n * Interactive tools (showContactForm, showSuggestedReply, showSources,\n * showMultipleChoice) must be wired explicitly in the parent with their\n * required callbacks/events.\n */\nexport const toolComponentMap: Record<\n string,\n ReturnType<typeof defineAsyncComponent>\n> = {\n showArtifact: defineAsyncComponent(\n () => import('./PkToolShowArtifact.vue'),\n ),\n showCalendarEvent: defineAsyncComponent(\n () => import('./PkToolShowCalendarEvent.vue'),\n ),\n showComparison: defineAsyncComponent(\n () => import('./PkToolShowComparison.vue'),\n ),\n showContactForm: defineAsyncComponent(\n () => import('./PkToolShowContactForm.vue'),\n ),\n showEmail: defineAsyncComponent(() => import('./PkToolShowEmail.vue')),\n showImageGallery: defineAsyncComponent(\n () => import('./PkToolShowImageGallery.vue'),\n ),\n showLocation: defineAsyncComponent(\n () => import('./PkToolShowLocation.vue'),\n ),\n showMessage: defineAsyncComponent(() => import('./PkToolShowMessage.vue')),\n showMultipleChoice: defineAsyncComponent(\n () => import('./PkToolShowMultipleChoice.vue'),\n ),\n showProductList: defineAsyncComponent(\n () => import('./PkToolShowProductList.vue'),\n ),\n showQrCode: defineAsyncComponent(() => import('./PkToolShowQrCode.vue')),\n showSources: defineAsyncComponent(() => import('./PkToolShowSources.vue')),\n showSuggestedReply: defineAsyncComponent(\n () => import('./PkToolShowSuggestedReply.vue'),\n ),\n showWeather: defineAsyncComponent(() => import('./PkToolShowWeather.vue')),\n showWebPages: defineAsyncComponent(\n () => import('./PkToolShowWebPages.vue'),\n ),\n}\n","<script lang=\"ts\" setup>\n import { nextTick, ref, watch } from 'vue'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n const props = defineProps<{\n markdown?: string\n innerClass?: string\n }>()\n\n const scrollEl = ref<HTMLDivElement>()\n const lastScrollTop = ref<number>(0)\n const stopAutoScroll = ref<boolean>(false)\n\n const handleScroll = () => {\n if (!scrollEl.value) {\n return\n }\n const currentScrollTop = scrollEl.value.scrollTop\n if (currentScrollTop < lastScrollTop.value) {\n const delta = lastScrollTop.value - currentScrollTop\n if (delta < 50) {\n stopAutoScroll.value = true\n }\n }\n if (currentScrollTop > lastScrollTop.value) {\n if (\n currentScrollTop ===\n scrollEl.value.scrollHeight - scrollEl.value.clientHeight\n ) {\n stopAutoScroll.value = false\n }\n }\n lastScrollTop.value = currentScrollTop\n }\n\n watch(\n () => props.markdown,\n async () => {\n await nextTick()\n if (scrollEl.value && !stopAutoScroll.value) {\n scrollEl.value.scrollTop = scrollEl.value.scrollHeight\n }\n },\n { immediate: true },\n )\n</script>\n\n<template>\n <div\n ref=\"scrollEl\"\n class=\"overflow-auto light-scrollbar\"\n @scroll=\"handleScroll\">\n <PkStreamingMarkdown :markdown=\"markdown\" :class=\"innerClass\" />\n </div>\n</template>\n","<script lang=\"ts\" setup>\n import { nextTick, ref, watch } from 'vue'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n const props = defineProps<{\n markdown?: string\n innerClass?: string\n }>()\n\n const scrollEl = ref<HTMLDivElement>()\n const lastScrollTop = ref<number>(0)\n const stopAutoScroll = ref<boolean>(false)\n\n const handleScroll = () => {\n if (!scrollEl.value) {\n return\n }\n const currentScrollTop = scrollEl.value.scrollTop\n if (currentScrollTop < lastScrollTop.value) {\n const delta = lastScrollTop.value - currentScrollTop\n if (delta < 50) {\n stopAutoScroll.value = true\n }\n }\n if (currentScrollTop > lastScrollTop.value) {\n if (\n currentScrollTop ===\n scrollEl.value.scrollHeight - scrollEl.value.clientHeight\n ) {\n stopAutoScroll.value = false\n }\n }\n lastScrollTop.value = currentScrollTop\n }\n\n watch(\n () => props.markdown,\n async () => {\n await nextTick()\n if (scrollEl.value && !stopAutoScroll.value) {\n scrollEl.value.scrollTop = scrollEl.value.scrollHeight\n }\n },\n { immediate: true },\n )\n</script>\n\n<template>\n <div\n ref=\"scrollEl\"\n class=\"overflow-auto light-scrollbar\"\n @scroll=\"handleScroll\">\n <PkStreamingMarkdown :markdown=\"markdown\" :class=\"innerClass\" />\n </div>\n</template>\n","<script lang=\"ts\" setup>\n import type {\n ChatMessageActions,\n MessageFeedback,\n RevisedAnswer,\n UIChatMessage,\n } from 'models'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n import PkChatbotError from './PkChatbotError.vue'\n import PkChatbotFeedbackForm from './PkChatbotFeedbackForm.vue'\n import PkChatbotFilePreview from './PkChatbotFilePreview.vue'\n import PkRelativeTime from '../PkRelativeTime.vue'\n import { useI18n } from 'vue-i18n'\n import {\n useTemplateRef,\n ref,\n watch,\n onMounted,\n computed,\n nextTick,\n useSlots,\n } from 'vue'\n import { toolComponentMap } from './toolComponentMap'\n import {\n resolveContrastColor,\n getPartState,\n isTextPart,\n isFilePart,\n isToolPart,\n isStreamingPart,\n getPartIcon,\n getToolPartLabel,\n } from './utils'\n import { getToolPartName, toKebabCase } from 'utils'\n import PkStreamingMarkdownAutoscroll from './PkStreamingMarkdownAutoscroll.vue'\n\n const props = defineProps<{\n status?: 'submitted' | 'streaming' | 'ready' | 'error'\n messages?: UIChatMessage[]\n logo?: string\n name?: string\n error?: Error\n actions?: ChatMessageActions[]\n mainColor?: string\n textColor?: 'auto' | 'white' | 'black'\n revisedAnswers?: RevisedAnswer[]\n messageFeedbacks?: MessageFeedback[]\n disableHeightAdjustment?: boolean\n showMessageDateTime?: boolean\n showMessageTokensCount?: boolean\n showAllMessageParts?: boolean\n // TODO: move feedback in a separate component to avoid passing these props\n feedbackMessageId?: string\n feedbackLoading?: boolean\n feedbackSubmitted?: boolean\n feedbackError?: string\n }>()\n\n const emit = defineEmits<{\n (e: 'show-info', message: UIChatMessage): void\n (e: 'regenerate'): void\n (e: 'revise', message: UIChatMessage): void\n (e: 'upvote', message: UIChatMessage): void\n (e: 'downvote', message: UIChatMessage): void\n (e: 'feedback', message: UIChatMessage): void\n (e: 'feedback-submit', comment: string): void\n (e: 'feedback-close'): void\n (e: 'scroll-up'): void\n (e: 'scroll-down'): void\n (e: 'auto-retry'): void\n (e: 'reset-chat'): void\n }>()\n\n const { t: $t } = useI18n({\n useScope: 'global',\n })\n\n const slots = useSlots()\n\n const scrollEl = useTemplateRef<HTMLDivElement>('scrollEl')\n const scrollTimeout = ref<NodeJS.Timeout>()\n const lastScrollTop = ref<number>(0)\n const stopAutoScroll = ref<boolean>(false)\n const contrastColor = computed(() =>\n resolveContrastColor(props.textColor, props.mainColor),\n )\n\n const handleScroll = () => {\n if (!scrollEl.value) {\n return\n }\n const currentScrollTop = scrollEl.value.scrollTop\n if (currentScrollTop < lastScrollTop.value) {\n const delta = lastScrollTop.value - currentScrollTop\n if (delta < 50) {\n stopAutoScroll.value = true\n }\n emit('scroll-up')\n }\n if (currentScrollTop > lastScrollTop.value) {\n emit('scroll-down')\n if (\n currentScrollTop ===\n scrollEl.value.scrollHeight - scrollEl.value.clientHeight\n ) {\n stopAutoScroll.value = false\n }\n }\n lastScrollTop.value = currentScrollTop\n }\n\n const smootScrollToBottom = () => {\n if (!scrollEl.value) {\n return\n }\n if (scrollTimeout.value) {\n clearTimeout(scrollTimeout.value)\n }\n if (stopAutoScroll.value) {\n return\n }\n scrollTimeout.value = setTimeout(() => {\n scrollEl.value?.scrollTo({\n top: scrollEl.value.scrollHeight,\n behavior: 'smooth',\n })\n }, 10)\n }\n\n watch(\n () => props.status,\n (newStatus) => {\n if (newStatus === 'ready') {\n smootScrollToBottom()\n }\n },\n )\n\n const messagesElRefs = useTemplateRef<HTMLDivElement[]>('messagesEl')\n const height = ref<number>(0)\n watch(\n () => props.messages,\n async (messages) => {\n if (messages?.[messages.length - 1]?.role !== 'assistant') {\n stopAutoScroll.value = false\n return\n }\n\n // Wait for DOM to update before calculating heights\n await nextTick()\n smootScrollToBottom()\n\n if (props.disableHeightAdjustment) {\n return\n }\n\n const scrollElHeight = (scrollEl.value?.clientHeight ?? 0) - 48\n // last user message index\n const lastUserMessageIndex = messages\n .map((message) => message.role)\n .lastIndexOf('user')\n const lastUserMessageHeight =\n messagesElRefs.value?.[lastUserMessageIndex]?.clientHeight ?? 0\n const newHeight = scrollElHeight - lastUserMessageHeight\n if (newHeight) {\n height.value = newHeight\n }\n },\n {\n deep: true,\n },\n )\n\n onMounted(() => {\n smootScrollToBottom()\n })\n\n const isRevised = (messageId: string) => {\n return props.revisedAnswers?.some((r) => r.messageId === messageId)\n }\n\n const getMessageFeedback = (messageId: string) =>\n props.messageFeedbacks?.find((f) => f.messageId === messageId)\n\n const activeMessage = computed(() => {\n return props.messages?.[props.messages.length - 1]\n })\n const activeMessageLastPart = computed(() => {\n const active = activeMessage.value\n if (!active) {\n return null\n }\n return active.parts[active.parts.length - 1]\n })\n const isLoading = computed(() => {\n return props.status === 'submitted' || props.status === 'streaming'\n })\n const isError = computed(() => props.status === 'error')\n\n const activeMessageLastPartLabel = computed(() => {\n const part = activeMessageLastPart.value\n return getToolPartLabel($t, part)\n })\n const activeMessageLastPartIcon = computed(() => {\n const part = activeMessageLastPart.value\n return getPartIcon(part)\n })\n\n const getMessageIndexById = (messageId: string) => {\n return props.messages?.findIndex((m) => m.id === messageId)\n }\n const isLastMessage = (index?: number) => {\n if (index === undefined || !props.messages) {\n return false\n }\n return index === (props.messages?.length ?? 0) - 1\n }\n const isMessageRegenerateButtonVisible = (index: number) => {\n return (\n isLastMessage(index) &&\n props.status === 'ready' &&\n props.actions?.includes('regenerate')\n )\n }\n const isActionButtonVisible = (\n action: ChatMessageActions,\n index: number,\n ) => {\n return (\n ((isLastMessage(index) && props.status === 'ready') ||\n !isLastMessage(index)) &&\n props.actions?.includes(action)\n )\n }\n const isLastTextPart = (message: UIChatMessage) => {\n const lastPart = message.parts[message.parts.length - 1]\n return isTextPart(lastPart)\n }\n const isAssistant = (message: UIChatMessage) => message.role === 'assistant'\n const isUser = (message: UIChatMessage) => message.role === 'user'\n const getPreviousAssistantMessage = (index: number) => {\n return props.messages\n ?.slice(0, index)\n .reverse()\n .find((message) => isAssistant(message))\n }\n const getNextAssistantMessage = (index: number) => {\n return props.messages\n ?.slice(index + 1)\n .find((message) => isAssistant(message))\n }\n const isDayChanged = (index: number) => {\n const previousAssistantMessage = getPreviousAssistantMessage(index)\n const nextAssistantMessage = getNextAssistantMessage(index)\n if (\n !previousAssistantMessage?.metadata?.createdAt ||\n !nextAssistantMessage?.metadata?.createdAt\n ) {\n return false\n }\n const currentDate = new Date(\n previousAssistantMessage.metadata.createdAt,\n )\n const previousDate = new Date(nextAssistantMessage.metadata.createdAt)\n return (\n currentDate.getFullYear() !== previousDate.getFullYear() ||\n currentDate.getMonth() !== previousDate.getMonth() ||\n currentDate.getDate() !== previousDate.getDate()\n )\n }\n const showMessageFooter = (message: UIChatMessage, index: number) => {\n if (index === 0 || message.role !== 'assistant') {\n return false\n }\n return (\n props.actions?.length ||\n (props.showMessageDateTime &&\n message.metadata?.createdAt !== undefined) ||\n (props.showMessageTokensCount &&\n message.metadata?.totalTokens !== undefined)\n )\n }\n // feedback message auto scroll\n const feedbackMessageEl = ref<(typeof PkChatbotFeedbackForm)[]>()\n watch(\n () => props.feedbackMessageId,\n async () => {\n await nextTick()\n setTimeout(() => {\n if (props.feedbackMessageId) {\n if (feedbackMessageEl.value?.[0]?.$el) {\n if (\n isLastMessage(\n getMessageIndexById(props.feedbackMessageId),\n )\n ) {\n smootScrollToBottom()\n return\n }\n feedbackMessageEl.value[0].$el.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n })\n }\n }\n }, 10)\n },\n )\n</script>\n\n<template>\n <div\n ref=\"scrollEl\"\n class=\"pk-chatbot-messages\"\n :style=\"{\n '--chatbot-main-color': mainColor,\n '--chatbot-contrast-color': contrastColor,\n }\"\n @scroll=\"handleScroll\">\n <div class=\"pk-chatbot-messages__wrapper\">\n <template v-for=\"(message, index) in messages\" :key=\"message.id\">\n <div\n v-if=\"index > 0 && isUser(message) && isDayChanged(index)\"\n class=\"pk-chatbot-divider\">\n <span class=\"pk-chatbot-divider__label\">\n {{\n $d(\n new Date(\n getNextAssistantMessage(index)?.metadata\n ?.createdAt ?? '',\n ),\n 'short',\n )\n }}\n </span>\n </div>\n <div\n v-if=\"\n message.parts.length ||\n (isLastMessage(index) &&\n isLoading &&\n isAssistant(message))\n \"\n ref=\"messagesEl\"\n class=\"pk-chatbot-message\"\n :class=\"[\n `pk-chatbot-message--${message.role}`,\n {\n 'pk-chatbot-message--loading':\n isLoading &&\n isLastMessage(index) &&\n isAssistant(message),\n },\n ]\"\n :style=\"{\n minHeight:\n isLastMessage(index) &&\n isAssistant(message) &&\n !isError\n ? `${height}px`\n : undefined,\n }\">\n <template\n v-for=\"(part, partIndex) in message.parts\"\n :key=\"partIndex\">\n <div\n v-if=\"isTextPart(part) && part.text.trim()\"\n class=\"pk-chatbot-message__text\">\n <slot\n v-bind=\"{\n message,\n part,\n index,\n isLoading,\n }\"\n name=\"text\">\n <PkStreamingMarkdown\n v-if=\"isAssistant(message)\"\n class=\"wysiwyg\"\n :markdown=\"part.text\"\n :loading=\"\n index === (messages?.length ?? 0) - 1 &&\n status === 'streaming'\n \" />\n <template v-else>\n {{ part.text }}\n </template>\n </slot>\n </div>\n <PkChatbotFilePreview\n v-else-if=\"isFilePart(part)\"\n :media-type=\"part.mediaType\"\n :url=\"part.url\"\n :filename=\"part.filename\" />\n <template\n v-else-if=\"\n isToolPart(part) && !isStreamingPart(part)\n \">\n <component\n :is=\"toolComponentMap[getToolPartName(part)]\"\n v-if=\"\n !slots[part.type] &&\n toolComponentMap[getToolPartName(part)]\n \"\n :key=\"`component-${partIndex}-${getPartState(part)}`\"\n :part />\n <slot\n v-else\n :key=\"`slot-${partIndex}-${getPartState(part)}`\"\n :name=\"part.type\"\n v-bind=\"{\n message,\n part,\n index,\n isLoading,\n }\">\n <template v-if=\"showAllMessageParts\">\n <div\n class=\"pk-chatbot-message__loading-info\">\n <div class=\"flex gap-8 items-center\">\n <VvIcon\n v-if=\"getPartIcon(part)\"\n :name=\"getPartIcon(part)!\"\n class=\"shrink-0\" />\n <code\n class=\"font-mono rounded text-10\">\n {{ toKebabCase(part.type) }}\n </code>\n </div>\n </div>\n </template>\n </slot>\n </template>\n </template>\n <transition mode=\"out-in\">\n <div\n v-if=\"\n isLoading &&\n isLastMessage(index) &&\n !isLastTextPart(message) &&\n isAssistant(message)\n \"\n :key=\"`loading-info-${message.id}`\"\n class=\"pk-chatbot-message__loading-info\">\n <div class=\"flex gap-8 items-center\">\n <VvIcon\n name=\"line-md:loading-loop\"\n class=\"shrink-0\" />\n <transition mode=\"out-in\">\n <VvIcon\n v-if=\"activeMessageLastPartIcon\"\n :key=\"activeMessageLastPartIcon\"\n class=\"shrink-0\"\n :name=\"activeMessageLastPartIcon\" />\n </transition>\n <transition mode=\"out-in\">\n <span\n v-if=\"activeMessageLastPartLabel\"\n :key=\"activeMessageLastPartLabel\"\n class=\"text-10\">\n {{ activeMessageLastPartLabel }}\n </span>\n </transition>\n </div>\n <transition mode=\"out-in\">\n <PkStreamingMarkdownAutoscroll\n v-if=\"\n activeMessageLastPart &&\n 'text' in activeMessageLastPart &&\n activeMessageLastPart.text.trim()\n \"\n :markdown=\"activeMessageLastPart.text\"\n inner-class=\"wysiwyg\"\n class=\"border border-surface-4 rounded p-4 mt-8 bg-surface-1 max-h-64 text-10 w-full\" />\n </transition>\n </div>\n </transition>\n <transition mode=\"out-in\">\n <div\n v-if=\"showMessageFooter(message, index)\"\n class=\"pk-chatbot-message__footer\">\n <VvButtonGroup modifiers=\"compact\" class=\"mr-auto\">\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isMessageRegenerateButtonVisible(\n index,\n )\n \"\n icon=\"ri:reset-right-line\"\n modifiers=\"action-quiet-small\"\n :title=\"$t('action.regenerate')\"\n @click.stop=\"$emit('regenerate')\" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isActionButtonVisible(\n 'show-info',\n index,\n )\n \"\n icon=\"ri:information-line\"\n :title=\"$t('action.getMoreInfo')\"\n modifiers=\"action-quiet-small\"\n @click.stop=\"\n $emit('show-info', message)\n \" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isActionButtonVisible(\n 'revise',\n index,\n )\n \"\n :icon=\"\n isRevised(message.id)\n ? 'ri:file-edit-fill'\n : 'ri:file-edit-line'\n \"\n :title=\"\n isRevised(message.id)\n ? $t('action.editRevise')\n : $t('action.createRevise')\n \"\n modifiers=\"action-quiet-small\"\n :class=\"{\n 'text-brand': isRevised(message.id),\n }\"\n @click.stop=\"\n $emit('revise', message)\n \" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isActionButtonVisible(\n 'upvote',\n index,\n )\n \"\n :icon=\"\n getMessageFeedback(message.id)\n ?.vote === 'upvote'\n ? 'ri:thumb-up-fill'\n : 'ri:thumb-up-line'\n \"\n :title=\"$t('action.upvote')\"\n modifiers=\"action-quiet-small\"\n @click.stop=\"\n $emit('upvote', message)\n \" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isActionButtonVisible(\n 'downvote',\n index,\n )\n \"\n :icon=\"\n getMessageFeedback(message.id)\n ?.vote === 'downvote'\n ? 'ri:thumb-down-fill'\n : 'ri:thumb-down-line'\n \"\n :title=\"$t('action.downvote')\"\n modifiers=\"action-quiet-small\"\n @click.stop=\"\n $emit('downvote', message)\n \" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isActionButtonVisible(\n 'feedback',\n index,\n )\n \"\n :icon=\"\n getMessageFeedback(message.id)\n ?.comment\n ? 'ri:feedback-fill'\n : 'ri:feedback-line'\n \"\n :title=\"$t('action.feedback')\"\n modifiers=\"action-quiet-small\"\n @click.stop=\"\n $emit('feedback', message)\n \" />\n </transition>\n </VvButtonGroup>\n <span\n v-if=\"\n showMessageTokensCount &&\n message.metadata?.totalTokens\n \"\n class=\"flex items-center gap-4 text-12 text-word-3\">\n <VvIcon name=\"ri:ai-generate-2-line\" />\n {{\n $n(message.metadata.totalTokens, 'integer')\n }}\n {{ $t('label.tokens') }}\n </span>\n <time\n v-if=\"\n showMessageDateTime &&\n message.metadata?.createdAt\n \"\n :datetime=\"\n new Date(\n message.metadata?.createdAt,\n ).toISOString()\n \"\n class=\"flex items-center gap-4 text-12 text-word-3\">\n <VvIcon name=\"ri:time-line\" />\n {{\n $d(\n new Date(message.metadata?.createdAt),\n 'date-time',\n )\n }}\n </time>\n <div\n v-if=\"\n showMessageDateTime &&\n message?.metadata?.completedAt &&\n message?.metadata?.createdAt\n \"\n class=\"flex items-center gap-4 text-12 text-word-3\">\n <VvIcon name=\"ri:hourglass-line\" />\n <PkRelativeTime\n :date=\"message.metadata?.createdAt\"\n :end-date=\"message.metadata?.completedAt\" />\n </div>\n </div>\n </transition>\n <transition mode=\"out-in\">\n <PkChatbotFeedbackForm\n v-if=\"message.id === feedbackMessageId\"\n ref=\"feedbackMessageEl\"\n :loading=\"feedbackLoading\"\n :submitted=\"feedbackSubmitted\"\n :error=\"feedbackError\"\n @submit=\"$emit('feedback-submit', $event)\"\n @close=\"$emit('feedback-close')\" />\n </transition>\n </div>\n </template>\n <PkChatbotError\n v-if=\"isError\"\n :error\n @retry=\"$emit('auto-retry')\"\n @reset=\"$emit('reset-chat')\" />\n <div\n v-if=\"activeMessage?.role === 'user' || isError\"\n :style=\"{ minHeight: `${height}px` }\"></div>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-chatbot-messages {\n overflow-y: auto;\n flex: 1;\n min-width: 0;\n font-size: var(--spacing-14);\n\n scrollbar-width: thin;\n scrollbar-gutter: auto;\n scrollbar-color: var(--color-word-5) var(--color-surface-1);\n\n &__wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-16);\n min-width: 0;\n }\n\n &__divider {\n border-bottom: 1px solid var(--color-surface-3);\n }\n }\n\n .pk-chatbot-divider {\n position: relative;\n border-bottom: 1px solid var(--color-surface-3);\n\n &__label {\n position: absolute;\n padding-inline: var(--spacing-8);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--color-surface);\n color: var(--color-word-4);\n font-size: var(--text-12);\n }\n }\n\n .pk-chatbot-message {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sm);\n min-width: 0;\n align-items: flex-start;\n\n &__text {\n color: var(--color-word-2);\n line-height: var(--leading-normal);\n border-width: var(--spacing-px);\n border-color: var(--color-surface-3);\n padding: var(--spacing-sm);\n border-radius: var(--rounded-xl) var(--rounded-xl) var(--rounded-xl)\n 0;\n }\n\n &__loading-info {\n line-height: var(--leading-normal);\n border-width: var(--spacing-px);\n border-color: var(--color-surface-3);\n padding: var(--spacing-sm);\n border-radius: var(--rounded-xl) var(--rounded-xl) var(--rounded-xl)\n 0;\n font-size: var(--text-12);\n color: var(--color-word-3);\n }\n\n &__footer {\n width: 100%;\n display: flex;\n gap: var(--spacing-8);\n align-items: center;\n }\n\n &--user {\n align-items: flex-end;\n\n .pk-chatbot-message__text {\n background-color: var(\n --chatbot-main-color,\n var(--color-surface-1)\n );\n border-width: var(--spacing-px);\n border-color: var(--chatbot-main-color, var(--color-surface-4));\n color: var(--chatbot-contrast-color, var(--color-word-1));\n border-radius: var(--rounded-xl) var(--rounded-xl) 0\n var(--rounded-xl);\n }\n }\n\n &--assistant {\n width: 100%;\n display: flex;\n min-width: 0;\n flex-direction: column;\n gap: var(--spacing-16);\n overflow: hidden;\n\n .pk-chatbot-message__text {\n width: 100%;\n }\n }\n\n &--system {\n align-items: flex-end;\n\n .pk-chatbot-message__text {\n display: flex;\n gap: var(--spacing-8);\n font-size: var(--text-12);\n padding: var(--spacing-8) var(--spacing-sm);\n align-items: center;\n border-width: var(--spacing-px);\n border-color: var(--chatbot-main-color, var(--color-surface-4));\n color: var(--chatbot-main-color, var(--color-word-1));\n border-radius: var(--rounded-xl) var(--rounded-xl) 0\n var(--rounded-xl);\n }\n }\n }\n</style>\n","<script lang=\"ts\" setup>\n import type {\n ChatMessageActions,\n MessageFeedback,\n RevisedAnswer,\n UIChatMessage,\n } from 'models'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n import PkChatbotError from './PkChatbotError.vue'\n import PkChatbotFeedbackForm from './PkChatbotFeedbackForm.vue'\n import PkChatbotFilePreview from './PkChatbotFilePreview.vue'\n import PkRelativeTime from '../PkRelativeTime.vue'\n import { useI18n } from 'vue-i18n'\n import {\n useTemplateRef,\n ref,\n watch,\n onMounted,\n computed,\n nextTick,\n useSlots,\n } from 'vue'\n import { toolComponentMap } from './toolComponentMap'\n import {\n resolveContrastColor,\n getPartState,\n isTextPart,\n isFilePart,\n isToolPart,\n isStreamingPart,\n getPartIcon,\n getToolPartLabel,\n } from './utils'\n import { getToolPartName, toKebabCase } from 'utils'\n import PkStreamingMarkdownAutoscroll from './PkStreamingMarkdownAutoscroll.vue'\n\n const props = defineProps<{\n status?: 'submitted' | 'streaming' | 'ready' | 'error'\n messages?: UIChatMessage[]\n logo?: string\n name?: string\n error?: Error\n actions?: ChatMessageActions[]\n mainColor?: string\n textColor?: 'auto' | 'white' | 'black'\n revisedAnswers?: RevisedAnswer[]\n messageFeedbacks?: MessageFeedback[]\n disableHeightAdjustment?: boolean\n showMessageDateTime?: boolean\n showMessageTokensCount?: boolean\n showAllMessageParts?: boolean\n // TODO: move feedback in a separate component to avoid passing these props\n feedbackMessageId?: string\n feedbackLoading?: boolean\n feedbackSubmitted?: boolean\n feedbackError?: string\n }>()\n\n const emit = defineEmits<{\n (e: 'show-info', message: UIChatMessage): void\n (e: 'regenerate'): void\n (e: 'revise', message: UIChatMessage): void\n (e: 'upvote', message: UIChatMessage): void\n (e: 'downvote', message: UIChatMessage): void\n (e: 'feedback', message: UIChatMessage): void\n (e: 'feedback-submit', comment: string): void\n (e: 'feedback-close'): void\n (e: 'scroll-up'): void\n (e: 'scroll-down'): void\n (e: 'auto-retry'): void\n (e: 'reset-chat'): void\n }>()\n\n const { t: $t } = useI18n({\n useScope: 'global',\n })\n\n const slots = useSlots()\n\n const scrollEl = useTemplateRef<HTMLDivElement>('scrollEl')\n const scrollTimeout = ref<NodeJS.Timeout>()\n const lastScrollTop = ref<number>(0)\n const stopAutoScroll = ref<boolean>(false)\n const contrastColor = computed(() =>\n resolveContrastColor(props.textColor, props.mainColor),\n )\n\n const handleScroll = () => {\n if (!scrollEl.value) {\n return\n }\n const currentScrollTop = scrollEl.value.scrollTop\n if (currentScrollTop < lastScrollTop.value) {\n const delta = lastScrollTop.value - currentScrollTop\n if (delta < 50) {\n stopAutoScroll.value = true\n }\n emit('scroll-up')\n }\n if (currentScrollTop > lastScrollTop.value) {\n emit('scroll-down')\n if (\n currentScrollTop ===\n scrollEl.value.scrollHeight - scrollEl.value.clientHeight\n ) {\n stopAutoScroll.value = false\n }\n }\n lastScrollTop.value = currentScrollTop\n }\n\n const smootScrollToBottom = () => {\n if (!scrollEl.value) {\n return\n }\n if (scrollTimeout.value) {\n clearTimeout(scrollTimeout.value)\n }\n if (stopAutoScroll.value) {\n return\n }\n scrollTimeout.value = setTimeout(() => {\n scrollEl.value?.scrollTo({\n top: scrollEl.value.scrollHeight,\n behavior: 'smooth',\n })\n }, 10)\n }\n\n watch(\n () => props.status,\n (newStatus) => {\n if (newStatus === 'ready') {\n smootScrollToBottom()\n }\n },\n )\n\n const messagesElRefs = useTemplateRef<HTMLDivElement[]>('messagesEl')\n const height = ref<number>(0)\n watch(\n () => props.messages,\n async (messages) => {\n if (messages?.[messages.length - 1]?.role !== 'assistant') {\n stopAutoScroll.value = false\n return\n }\n\n // Wait for DOM to update before calculating heights\n await nextTick()\n smootScrollToBottom()\n\n if (props.disableHeightAdjustment) {\n return\n }\n\n const scrollElHeight = (scrollEl.value?.clientHeight ?? 0) - 48\n // last user message index\n const lastUserMessageIndex = messages\n .map((message) => message.role)\n .lastIndexOf('user')\n const lastUserMessageHeight =\n messagesElRefs.value?.[lastUserMessageIndex]?.clientHeight ?? 0\n const newHeight = scrollElHeight - lastUserMessageHeight\n if (newHeight) {\n height.value = newHeight\n }\n },\n {\n deep: true,\n },\n )\n\n onMounted(() => {\n smootScrollToBottom()\n })\n\n const isRevised = (messageId: string) => {\n return props.revisedAnswers?.some((r) => r.messageId === messageId)\n }\n\n const getMessageFeedback = (messageId: string) =>\n props.messageFeedbacks?.find((f) => f.messageId === messageId)\n\n const activeMessage = computed(() => {\n return props.messages?.[props.messages.length - 1]\n })\n const activeMessageLastPart = computed(() => {\n const active = activeMessage.value\n if (!active) {\n return null\n }\n return active.parts[active.parts.length - 1]\n })\n const isLoading = computed(() => {\n return props.status === 'submitted' || props.status === 'streaming'\n })\n const isError = computed(() => props.status === 'error')\n\n const activeMessageLastPartLabel = computed(() => {\n const part = activeMessageLastPart.value\n return getToolPartLabel($t, part)\n })\n const activeMessageLastPartIcon = computed(() => {\n const part = activeMessageLastPart.value\n return getPartIcon(part)\n })\n\n const getMessageIndexById = (messageId: string) => {\n return props.messages?.findIndex((m) => m.id === messageId)\n }\n const isLastMessage = (index?: number) => {\n if (index === undefined || !props.messages) {\n return false\n }\n return index === (props.messages?.length ?? 0) - 1\n }\n const isMessageRegenerateButtonVisible = (index: number) => {\n return (\n isLastMessage(index) &&\n props.status === 'ready' &&\n props.actions?.includes('regenerate')\n )\n }\n const isActionButtonVisible = (\n action: ChatMessageActions,\n index: number,\n ) => {\n return (\n ((isLastMessage(index) && props.status === 'ready') ||\n !isLastMessage(index)) &&\n props.actions?.includes(action)\n )\n }\n const isLastTextPart = (message: UIChatMessage) => {\n const lastPart = message.parts[message.parts.length - 1]\n return isTextPart(lastPart)\n }\n const isAssistant = (message: UIChatMessage) => message.role === 'assistant'\n const isUser = (message: UIChatMessage) => message.role === 'user'\n const getPreviousAssistantMessage = (index: number) => {\n return props.messages\n ?.slice(0, index)\n .reverse()\n .find((message) => isAssistant(message))\n }\n const getNextAssistantMessage = (index: number) => {\n return props.messages\n ?.slice(index + 1)\n .find((message) => isAssistant(message))\n }\n const isDayChanged = (index: number) => {\n const previousAssistantMessage = getPreviousAssistantMessage(index)\n const nextAssistantMessage = getNextAssistantMessage(index)\n if (\n !previousAssistantMessage?.metadata?.createdAt ||\n !nextAssistantMessage?.metadata?.createdAt\n ) {\n return false\n }\n const currentDate = new Date(\n previousAssistantMessage.metadata.createdAt,\n )\n const previousDate = new Date(nextAssistantMessage.metadata.createdAt)\n return (\n currentDate.getFullYear() !== previousDate.getFullYear() ||\n currentDate.getMonth() !== previousDate.getMonth() ||\n currentDate.getDate() !== previousDate.getDate()\n )\n }\n const showMessageFooter = (message: UIChatMessage, index: number) => {\n if (index === 0 || message.role !== 'assistant') {\n return false\n }\n return (\n props.actions?.length ||\n (props.showMessageDateTime &&\n message.metadata?.createdAt !== undefined) ||\n (props.showMessageTokensCount &&\n message.metadata?.totalTokens !== undefined)\n )\n }\n // feedback message auto scroll\n const feedbackMessageEl = ref<(typeof PkChatbotFeedbackForm)[]>()\n watch(\n () => props.feedbackMessageId,\n async () => {\n await nextTick()\n setTimeout(() => {\n if (props.feedbackMessageId) {\n if (feedbackMessageEl.value?.[0]?.$el) {\n if (\n isLastMessage(\n getMessageIndexById(props.feedbackMessageId),\n )\n ) {\n smootScrollToBottom()\n return\n }\n feedbackMessageEl.value[0].$el.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n })\n }\n }\n }, 10)\n },\n )\n</script>\n\n<template>\n <div\n ref=\"scrollEl\"\n class=\"pk-chatbot-messages\"\n :style=\"{\n '--chatbot-main-color': mainColor,\n '--chatbot-contrast-color': contrastColor,\n }\"\n @scroll=\"handleScroll\">\n <div class=\"pk-chatbot-messages__wrapper\">\n <template v-for=\"(message, index) in messages\" :key=\"message.id\">\n <div\n v-if=\"index > 0 && isUser(message) && isDayChanged(index)\"\n class=\"pk-chatbot-divider\">\n <span class=\"pk-chatbot-divider__label\">\n {{\n $d(\n new Date(\n getNextAssistantMessage(index)?.metadata\n ?.createdAt ?? '',\n ),\n 'short',\n )\n }}\n </span>\n </div>\n <div\n v-if=\"\n message.parts.length ||\n (isLastMessage(index) &&\n isLoading &&\n isAssistant(message))\n \"\n ref=\"messagesEl\"\n class=\"pk-chatbot-message\"\n :class=\"[\n `pk-chatbot-message--${message.role}`,\n {\n 'pk-chatbot-message--loading':\n isLoading &&\n isLastMessage(index) &&\n isAssistant(message),\n },\n ]\"\n :style=\"{\n minHeight:\n isLastMessage(index) &&\n isAssistant(message) &&\n !isError\n ? `${height}px`\n : undefined,\n }\">\n <template\n v-for=\"(part, partIndex) in message.parts\"\n :key=\"partIndex\">\n <div\n v-if=\"isTextPart(part) && part.text.trim()\"\n class=\"pk-chatbot-message__text\">\n <slot\n v-bind=\"{\n message,\n part,\n index,\n isLoading,\n }\"\n name=\"text\">\n <PkStreamingMarkdown\n v-if=\"isAssistant(message)\"\n class=\"wysiwyg\"\n :markdown=\"part.text\"\n :loading=\"\n index === (messages?.length ?? 0) - 1 &&\n status === 'streaming'\n \" />\n <template v-else>\n {{ part.text }}\n </template>\n </slot>\n </div>\n <PkChatbotFilePreview\n v-else-if=\"isFilePart(part)\"\n :media-type=\"part.mediaType\"\n :url=\"part.url\"\n :filename=\"part.filename\" />\n <template\n v-else-if=\"\n isToolPart(part) && !isStreamingPart(part)\n \">\n <component\n :is=\"toolComponentMap[getToolPartName(part)]\"\n v-if=\"\n !slots[part.type] &&\n toolComponentMap[getToolPartName(part)]\n \"\n :key=\"`component-${partIndex}-${getPartState(part)}`\"\n :part />\n <slot\n v-else\n :key=\"`slot-${partIndex}-${getPartState(part)}`\"\n :name=\"part.type\"\n v-bind=\"{\n message,\n part,\n index,\n isLoading,\n }\">\n <template v-if=\"showAllMessageParts\">\n <div\n class=\"pk-chatbot-message__loading-info\">\n <div class=\"flex gap-8 items-center\">\n <VvIcon\n v-if=\"getPartIcon(part)\"\n :name=\"getPartIcon(part)!\"\n class=\"shrink-0\" />\n <code\n class=\"font-mono rounded text-10\">\n {{ toKebabCase(part.type) }}\n </code>\n </div>\n </div>\n </template>\n </slot>\n </template>\n </template>\n <transition mode=\"out-in\">\n <div\n v-if=\"\n isLoading &&\n isLastMessage(index) &&\n !isLastTextPart(message) &&\n isAssistant(message)\n \"\n :key=\"`loading-info-${message.id}`\"\n class=\"pk-chatbot-message__loading-info\">\n <div class=\"flex gap-8 items-center\">\n <VvIcon\n name=\"line-md:loading-loop\"\n class=\"shrink-0\" />\n <transition mode=\"out-in\">\n <VvIcon\n v-if=\"activeMessageLastPartIcon\"\n :key=\"activeMessageLastPartIcon\"\n class=\"shrink-0\"\n :name=\"activeMessageLastPartIcon\" />\n </transition>\n <transition mode=\"out-in\">\n <span\n v-if=\"activeMessageLastPartLabel\"\n :key=\"activeMessageLastPartLabel\"\n class=\"text-10\">\n {{ activeMessageLastPartLabel }}\n </span>\n </transition>\n </div>\n <transition mode=\"out-in\">\n <PkStreamingMarkdownAutoscroll\n v-if=\"\n activeMessageLastPart &&\n 'text' in activeMessageLastPart &&\n activeMessageLastPart.text.trim()\n \"\n :markdown=\"activeMessageLastPart.text\"\n inner-class=\"wysiwyg\"\n class=\"border border-surface-4 rounded p-4 mt-8 bg-surface-1 max-h-64 text-10 w-full\" />\n </transition>\n </div>\n </transition>\n <transition mode=\"out-in\">\n <div\n v-if=\"showMessageFooter(message, index)\"\n class=\"pk-chatbot-message__footer\">\n <VvButtonGroup modifiers=\"compact\" class=\"mr-auto\">\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isMessageRegenerateButtonVisible(\n index,\n )\n \"\n icon=\"ri:reset-right-line\"\n modifiers=\"action-quiet-small\"\n :title=\"$t('action.regenerate')\"\n @click.stop=\"$emit('regenerate')\" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isActionButtonVisible(\n 'show-info',\n index,\n )\n \"\n icon=\"ri:information-line\"\n :title=\"$t('action.getMoreInfo')\"\n modifiers=\"action-quiet-small\"\n @click.stop=\"\n $emit('show-info', message)\n \" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isActionButtonVisible(\n 'revise',\n index,\n )\n \"\n :icon=\"\n isRevised(message.id)\n ? 'ri:file-edit-fill'\n : 'ri:file-edit-line'\n \"\n :title=\"\n isRevised(message.id)\n ? $t('action.editRevise')\n : $t('action.createRevise')\n \"\n modifiers=\"action-quiet-small\"\n :class=\"{\n 'text-brand': isRevised(message.id),\n }\"\n @click.stop=\"\n $emit('revise', message)\n \" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isActionButtonVisible(\n 'upvote',\n index,\n )\n \"\n :icon=\"\n getMessageFeedback(message.id)\n ?.vote === 'upvote'\n ? 'ri:thumb-up-fill'\n : 'ri:thumb-up-line'\n \"\n :title=\"$t('action.upvote')\"\n modifiers=\"action-quiet-small\"\n @click.stop=\"\n $emit('upvote', message)\n \" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isActionButtonVisible(\n 'downvote',\n index,\n )\n \"\n :icon=\"\n getMessageFeedback(message.id)\n ?.vote === 'downvote'\n ? 'ri:thumb-down-fill'\n : 'ri:thumb-down-line'\n \"\n :title=\"$t('action.downvote')\"\n modifiers=\"action-quiet-small\"\n @click.stop=\"\n $emit('downvote', message)\n \" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isActionButtonVisible(\n 'feedback',\n index,\n )\n \"\n :icon=\"\n getMessageFeedback(message.id)\n ?.comment\n ? 'ri:feedback-fill'\n : 'ri:feedback-line'\n \"\n :title=\"$t('action.feedback')\"\n modifiers=\"action-quiet-small\"\n @click.stop=\"\n $emit('feedback', message)\n \" />\n </transition>\n </VvButtonGroup>\n <span\n v-if=\"\n showMessageTokensCount &&\n message.metadata?.totalTokens\n \"\n class=\"flex items-center gap-4 text-12 text-word-3\">\n <VvIcon name=\"ri:ai-generate-2-line\" />\n {{\n $n(message.metadata.totalTokens, 'integer')\n }}\n {{ $t('label.tokens') }}\n </span>\n <time\n v-if=\"\n showMessageDateTime &&\n message.metadata?.createdAt\n \"\n :datetime=\"\n new Date(\n message.metadata?.createdAt,\n ).toISOString()\n \"\n class=\"flex items-center gap-4 text-12 text-word-3\">\n <VvIcon name=\"ri:time-line\" />\n {{\n $d(\n new Date(message.metadata?.createdAt),\n 'date-time',\n )\n }}\n </time>\n <div\n v-if=\"\n showMessageDateTime &&\n message?.metadata?.completedAt &&\n message?.metadata?.createdAt\n \"\n class=\"flex items-center gap-4 text-12 text-word-3\">\n <VvIcon name=\"ri:hourglass-line\" />\n <PkRelativeTime\n :date=\"message.metadata?.createdAt\"\n :end-date=\"message.metadata?.completedAt\" />\n </div>\n </div>\n </transition>\n <transition mode=\"out-in\">\n <PkChatbotFeedbackForm\n v-if=\"message.id === feedbackMessageId\"\n ref=\"feedbackMessageEl\"\n :loading=\"feedbackLoading\"\n :submitted=\"feedbackSubmitted\"\n :error=\"feedbackError\"\n @submit=\"$emit('feedback-submit', $event)\"\n @close=\"$emit('feedback-close')\" />\n </transition>\n </div>\n </template>\n <PkChatbotError\n v-if=\"isError\"\n :error\n @retry=\"$emit('auto-retry')\"\n @reset=\"$emit('reset-chat')\" />\n <div\n v-if=\"activeMessage?.role === 'user' || isError\"\n :style=\"{ minHeight: `${height}px` }\"></div>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-chatbot-messages {\n overflow-y: auto;\n flex: 1;\n min-width: 0;\n font-size: var(--spacing-14);\n\n scrollbar-width: thin;\n scrollbar-gutter: auto;\n scrollbar-color: var(--color-word-5) var(--color-surface-1);\n\n &__wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-16);\n min-width: 0;\n }\n\n &__divider {\n border-bottom: 1px solid var(--color-surface-3);\n }\n }\n\n .pk-chatbot-divider {\n position: relative;\n border-bottom: 1px solid var(--color-surface-3);\n\n &__label {\n position: absolute;\n padding-inline: var(--spacing-8);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--color-surface);\n color: var(--color-word-4);\n font-size: var(--text-12);\n }\n }\n\n .pk-chatbot-message {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sm);\n min-width: 0;\n align-items: flex-start;\n\n &__text {\n color: var(--color-word-2);\n line-height: var(--leading-normal);\n border-width: var(--spacing-px);\n border-color: var(--color-surface-3);\n padding: var(--spacing-sm);\n border-radius: var(--rounded-xl) var(--rounded-xl) var(--rounded-xl)\n 0;\n }\n\n &__loading-info {\n line-height: var(--leading-normal);\n border-width: var(--spacing-px);\n border-color: var(--color-surface-3);\n padding: var(--spacing-sm);\n border-radius: var(--rounded-xl) var(--rounded-xl) var(--rounded-xl)\n 0;\n font-size: var(--text-12);\n color: var(--color-word-3);\n }\n\n &__footer {\n width: 100%;\n display: flex;\n gap: var(--spacing-8);\n align-items: center;\n }\n\n &--user {\n align-items: flex-end;\n\n .pk-chatbot-message__text {\n background-color: var(\n --chatbot-main-color,\n var(--color-surface-1)\n );\n border-width: var(--spacing-px);\n border-color: var(--chatbot-main-color, var(--color-surface-4));\n color: var(--chatbot-contrast-color, var(--color-word-1));\n border-radius: var(--rounded-xl) var(--rounded-xl) 0\n var(--rounded-xl);\n }\n }\n\n &--assistant {\n width: 100%;\n display: flex;\n min-width: 0;\n flex-direction: column;\n gap: var(--spacing-16);\n overflow: hidden;\n\n .pk-chatbot-message__text {\n width: 100%;\n }\n }\n\n &--system {\n align-items: flex-end;\n\n .pk-chatbot-message__text {\n display: flex;\n gap: var(--spacing-8);\n font-size: var(--text-12);\n padding: var(--spacing-8) var(--spacing-sm);\n align-items: center;\n border-width: var(--spacing-px);\n border-color: var(--chatbot-main-color, var(--color-surface-4));\n color: var(--chatbot-main-color, var(--color-word-1));\n border-radius: var(--rounded-xl) var(--rounded-xl) 0\n var(--rounded-xl);\n }\n }\n }\n</style>\n"],"mappings":"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"}

package/dist-vue/_chunks/{PkChatbotViewChat-BoEfZeco.js → PkChatbotViewChat-C2FuDayB.js} RENAMED Viewed

@@ -1,9 +1,9 @@
-import { t as e } from "./PkToolShowSources-ZtXFkIHt.js";
-import { t } from "./useChatbotStore-DGL81KJa.js";
-import { t as n } from "./PkChatbotMessages-BxTeEm3j.js";
-import { t as r } from "./PkChatbotInput-LHE0HZ9z.js";
+import { t as e } from "./PkToolShowSources-Dv0uuvqS.js";
+import { t } from "./useChatbotStore-DMDbzuub.js";
+import { t as n } from "./PkChatbotMessages-DOeUT6YL.js";
+import { t as r } from "./PkChatbotInput-C5QSmt21.js";
 import { t as i } from "./PkToolShowMultipleChoice-DZXfWtQp.js";
-import { r as a, t as o } from "./PkToolShowContactForm-CsDOqSJK.js";
+import { r as a, t as o } from "./PkToolShowContactForm-5H4jfq1F.js";
 import { t as s } from "./PkToolShowSuggestedReply-30m9yWDL.js";
 import { t as c } from "./PkToolShowLocation-DteWf0Cs.js";
 import { Fragment as l, Transition as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, isRef as y, normalizeClass as ee, onMounted as b, openBlock as x, toDisplayString as S, unref as C, useTemplateRef as te, withCtx as w } from "vue";
@@ -243,4 +243,4 @@ var D = { class: "flex items-center gap-6 text-12 text-word-3 border border-surf
 //#endregion
 export { A as t };
-//# sourceMappingURL=PkChatbotViewChat-BoEfZeco.js.map
+//# sourceMappingURL=PkChatbotViewChat-C2FuDayB.js.map