@8wave/ai-elements 0.73.0 → 0.75.0

package/dist-vue/_chunks/PkChatbotMessages-dsjB0-26.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PkChatbotMessages-dsjB0-26.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":";;;;;;;;;;;AASA,IAAa,IAGT;CACA,cAAc,QACJ,OAAO,oCAAA,MAAA,MAAA,EAAA,EAAA,CAChB;CACD,mBAAmB,QACT,OAAO,yCAAA,MAAA,MAAA,EAAA,EAAA,CAChB;CACD,gBAAgB,QACN,OAAO,sCAAA,MAAA,MAAA,EAAA,EAAA,CAChB;CACD,iBAAiB,QACP,OAAO,uCAAA,MAAA,MAAA,EAAA,EAAA,CAChB;CACD,WAAW,QAA2B,OAAO,iCAAA,MAAA,MAAA,EAAA,EAAA,CAAyB;CACtE,kBAAkB,QACR,OAAO,wCAAA,MAAA,MAAA,EAAA,EAAA,CAChB;CACD,cAAc,QACJ,OAAO,oCAAA,MAAA,MAAA,EAAA,EAAA,CAChB;CACD,aAAa,QAA2B,OAAO,mCAAA,MAAA,MAAA,EAAA,EAAA,CAA2B;CAC1E,oBAAoB,QACV,OAAO,0CAAA,MAAA,MAAA,EAAA,EAAA,CAChB;CACD,iBAAiB,QACP,OAAO,uCAAA,MAAA,MAAA,EAAA,EAAA,CAChB;CACD,YAAY,QAA2B,OAAO,kCAAA,MAAA,MAAA,EAAA,EAAA,CAA0B;CACxE,aAAa,QAA2B,OAAO,mCAAA,MAAA,MAAA,EAAA,EAAA,CAA2B;CAC1E,oBAAoB,QACV,OAAO,0CAAA,MAAA,MAAA,EAAA,EAAA,CAChB;CACD,aAAa,QAA2B,OAAO,mCAA2B;CAC1E,cAAc,QACJ,OAAO,oCAAA,MAAA,MAAA,EAAA,EAAA,CAChB;CACJ;;;;;;;EC5CG,IAAM,IAAQ,GAKR,IAAW,GAAoB,EAC/B,IAAgB,EAAY,EAAC,EAC7B,IAAiB,EAAa,GAAK,EAEnC,UAAqB;AACvB,OAAI,CAAC,EAAS,MACV;GAEJ,IAAM,IAAmB,EAAS,MAAM;AAexC,GAdI,IAAmB,EAAc,SACnB,EAAc,QAAQ,IACxB,OACR,EAAe,QAAQ,KAG3B,IAAmB,EAAc,SAE7B,MACA,EAAS,MAAM,eAAe,EAAS,MAAM,iBAE7C,EAAe,QAAQ,KAG/B,EAAc,QAAQ;;SAG1B,QACU,EAAM,UACZ,YAAY;AAER,GADA,MAAM,GAAS,EACX,EAAS,SAAS,CAAC,EAAe,UAClC,EAAS,MAAM,YAAY,EAAS,MAAM;KAGlD,EAAE,WAAW,IAAM,CACvB,kBAIA,EAKM,OAAA;YAJE;GAAJ,KAAI;GACJ,OAAM;GACL,UAAQ;MACT,EAAgE,IAAA;GAA1C,UAAU,EAAA;GAAW,OAAK,EAAE,EAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EEhBtD,IAAM,IAAQ,GAsBR,KAAO,GAeP,EAAE,GAAG,MAAO,GAAQ,EACtB,UAAU,UACb,CAAA,EAEK,KAAQ,IAAS,EAEjB,IAAW,GAA+B,WAAU,EACpD,IAAgB,GAAoB,EACpC,IAAgB,EAAY,EAAC,EAC7B,IAAiB,EAAa,GAAK,EACnC,KAAgB,QAClB,EAAqB,EAAM,WAAW,EAAM,UAAU,CAC1D,EAEM,WAAqB;AACvB,OAAI,CAAC,EAAS,MACV;GAEJ,IAAM,IAAmB,EAAS,MAAM;AAiBxC,GAhBI,IAAmB,EAAc,UACnB,EAAc,QAAQ,IACxB,OACR,EAAe,QAAQ,KAE3B,GAAK,YAAW,GAEhB,IAAmB,EAAc,UACjC,GAAK,cAAa,EAEd,MACA,EAAS,MAAM,eAAe,EAAS,MAAM,iBAE7C,EAAe,QAAQ,MAG/B,EAAc,QAAQ;KAGpB,UAA4B;AACzB,KAAS,UAGV,EAAc,SACd,aAAa,EAAc,MAAK,EAEhC,GAAe,UAGnB,EAAc,QAAQ,iBAAiB;AACnC,MAAS,OAAO,SAAS;KACrB,KAAK,EAAS,MAAM;KACpB,UAAU;KACb,CAAA;MACF,GAAE;;AAGT,UACU,EAAM,SACX,MAAc;AACX,GAAI,MAAc,WACd,GAAoB;IAGhC;EAEA,IAAM,KAAiB,GAAiC,aAAY,EAC9D,IAAS,EAAY,EAAC;AAkC5B,EAjCA,QACU,EAAM,UACZ,OAAO,MAAa;AAChB,OAAI,IAAW,EAAS,SAAS,IAAI,SAAS,aAAa;AACvD,MAAe,QAAQ;AACvB;;AAOJ,OAHA,MAAM,GAAS,EACf,GAAoB,EAEhB,EAAM,wBACN;GAGJ,IAAM,KAAkB,EAAS,OAAO,gBAAgB,KAAK,IAEvD,IAAuB,EACxB,KAAK,MAAY,EAAQ,KAAI,CAC7B,YAAY,OAAM,EAGjB,IAAY,KADd,GAAe,QAAQ,IAAuB,gBAAgB;AAElE,GAAI,MACA,EAAO,QAAQ;KAGvB,EACI,MAAM,IACT,CACL,EAEA,QAAgB;AACZ,MAAoB;IACvB;EAED,IAAM,KAAa,MACR,EAAM,gBAAgB,MAAM,MAAM,EAAE,cAAc,EAAS,EAGhE,KAAsB,MACxB,EAAM,kBAAkB,MAAM,MAAM,EAAE,cAAc,EAAS,EAE3D,KAAgB,QACX,EAAM,WAAW,EAAM,SAAS,SAAS,GACnD,EACK,IAAwB,QAAe;GACzC,IAAM,IAAS,GAAc;AAI7B,UAHK,IAGE,EAAO,MAAM,EAAO,MAAM,SAAS,KAF/B;IAGd,EACK,IAAY,QACP,EAAM,WAAW,eAAe,EAAM,WAAW,YAC3D,EACK,IAAU,QAAe,EAAM,WAAW,QAAO,EAEjD,IAA6B,QAAe;GAC9C,IAAM,IAAO,EAAsB;AACnC,UAAO,EAAiB,GAAI,EAAI;IACnC,EACK,IAA4B,QAAe;GAC7C,IAAM,IAAO,EAAsB;AACnC,UAAO,EAAY,EAAI;IAC1B,EAEK,MAAuB,MAClB,EAAM,UAAU,WAAW,MAAM,EAAE,OAAO,EAAS,EAExD,KAAiB,MACf,MAAU,KAAA,KAAa,CAAC,EAAM,WACvB,KAEJ,OAAW,EAAM,UAAU,UAAU,KAAK,GAE/C,MAAoC,MAElC,EAAc,EAAM,IACpB,EAAM,WAAW,WACjB,EAAM,SAAS,SAAS,aAAY,EAGtC,KACF,GACA,OAGM,EAAc,EAAM,IAAI,EAAM,WAAW,WACvC,CAAC,EAAc,EAAM,KACzB,EAAM,SAAS,SAAS,EAAM,EAGhC,MAAkB,MAA2B;GAC/C,IAAM,IAAW,EAAQ,MAAM,EAAQ,MAAM,SAAS;AACtD,UAAO,EAAW,EAAQ;KAExB,KAAe,MAA2B,EAAQ,SAAS,aAC3D,MAAU,MAA2B,EAAQ,SAAS,QACtD,MAA+B,MAC1B,EAAM,UACP,MAAM,GAAG,EAAK,CACf,SAAQ,CACR,MAAM,MAAY,EAAY,EAAQ,CAAA,EAEzC,MAA2B,MACtB,EAAM,UACP,MAAM,IAAQ,EAAC,CAChB,MAAM,MAAY,EAAY,EAAQ,CAAA,EAEzC,MAAgB,MAAkB;GACpC,IAAM,IAA2B,GAA4B,EAAK,EAC5D,IAAuB,GAAwB,EAAK;AAC1D,OACI,CAAC,GAA0B,UAAU,aACrC,CAAC,GAAsB,UAAU,UAEjC,QAAO;GAEX,IAAM,IAAc,IAAI,KACpB,EAAyB,SAAS,UACtC,EACM,IAAe,IAAI,KAAK,EAAqB,SAAS,UAAS;AACrE,UACI,EAAY,aAAa,KAAK,EAAa,aAAa,IACxD,EAAY,UAAU,KAAK,EAAa,UAAU,IAClD,EAAY,SAAS,KAAK,EAAa,SAAQ;KAGjD,MAAqB,GAAwB,MAC3C,MAAU,KAAK,EAAQ,SAAS,cACzB,KAGP,EAAM,SAAS,UACd,EAAM,uBACH,EAAQ,UAAU,cAAc,KAAA,KACnC,EAAM,0BACH,EAAQ,UAAU,gBAAgB,KAAA,GAIxC,IAAoB,GAAsC;SAChE,QACU,EAAM,mBACZ,YAAY;AAER,GADA,MAAM,GAAS,EACf,iBAAiB;AACb,QAAI,EAAM,qBACF,EAAkB,QAAQ,IAAI,KAAK;AACnC,SACI,EACI,GAAoB,EAAM,kBAAkB,CAChD,EACF;AACE,SAAoB;AACpB;;AAEJ,OAAkB,MAAM,GAAG,IAAI,eAAe;MAC1C,UAAU;MACV,OAAO;MACV,CAAA;;MAGV,GAAE;IAEb;;eAIA,EA+VM,OAAA;aA9VE;IAAJ,KAAI;IACJ,OAAM;IACL,OAAK,EAAA;6BAAwC,EAAA;iCAAmD,GAAA;;IAIhG,UAAQ;OACT,EAsVM,OAtVN,IAsVM;YArVF,EA4UW,GAAA,MAAA,GA5U0B,EAAA,WAAnB,GAAS,wBAA0B,EAAQ,IAAA,EAAA,CAE/C,IAAK,KAAQ,GAAO,EAAO,IAAK,GAAa,EAAK,IAAA,GAAA,EAD5D,EAcM,OAdN,IAcM,CAXF,EAUO,QAVP,IAUO,EARCA,EAAAA,GAAAA,IAAwC,KAA0C,GAAwB,EAAK,EAAG,UAAmD,aAAS,GAAA,EAAA,QAAA,CAAA,EAAA,EAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,EAWvJ,EAAQ,MAAM,UAAmC,EAAc,EAAK,IAAiC,EAAA,SAAyC,EAAY,EAAO,IAAA,GAAA,EADpM,EA2TM,OAAA;;;KApTF,KAAI;KACJ,OAAK,EAAA,CAAC,sBAAoB,CAAA,uBAC+B,EAAQ,QAAA,EAAA,+BAA6H,EAAA,SAA6C,EAAc,EAAK,IAAqC,EAAY,EAAO,EAAA,CAAA,CAAA,CAAA;KASrT,OAAK,EAAA,EAAA,WAAmE,EAAc,EAAK,IAAiC,EAAY,EAAO,IAAA,CAAkC,EAAA,QAAA,GAA6C,EAAA,MAAM,MAAuC,KAAA,GAAA,CAAA;;aAQ5Q,EAuEW,GAAA,MAAA,GAtEqB,EAAQ,QAA5B,GAAM,wBACR,GAAS,EAAA,CAEL,EAAA,EAAU,CAAC,EAAI,IAAK,EAAK,KAAK,MAAI,IAAA,GAAA,EAD5C,EAuBM,OAvBN,IAuBM,CApBF,GAmBO,EAAA,QAAA,QAnBP,EAmBO,EAAA,SAAA,IAAA,EAAA;MAlB2C;MAA6C;MAA0C;iBAA2C,EAAA;eAkB7K,CAVO,EAAY,EAAO,IAAA,GAAA,EAD7B,EAOQ,IAAA;;MALJ,OAAM;MACL,UAAU,EAAK;MACf,SAAkD,OAAW,EAAA,UAAU,UAAM,KAAA,KAAsD,EAAA,WAAM;mDAI9I,EAEW,GAAA,EAAA,KAAA,GAAA,EAAA,CAAA,EAAA,EADJ,EAAK,KAAI,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA,IAKT,EAAA,EAAU,CAAC,EAAI,IAAA,GAAA,EAD9B,EAIgC,IAAA;;MAF3B,cAAY,EAAK;MACjB,KAAK,EAAK;MACV,UAAU,EAAK;;;;;WAE4B,EAAA,EAAU,CAAC,EAAI,IAAA,CAAM,EAAA,GAAe,CAAC,EAAI,IAAA,GAAA,EADzF,EAsCW,GAAA,EAAA,KAAA,GAAA,EAAA,CAAA,CAhCyC,EAAA,GAAK,CAAC,EAAK,SAA6C,EAAA,EAAgB,CAAC,EAAA,EAAe,CAAC,EAAI,KAAA,GAAA,EAF7I,EAOY,GANH,EAAA,EAAgB,CAAC,EAAA,EAAe,CAAC,EAAI,EAAA,EAAA;MAKzC,KAAG,aAAe,EAAS,GAAI,EAAA,GAAY,CAAC,EAAI;MAChD;8BACL,GAyBO,EAAA,QAtBI,EAAK,MAHhB,EAyBO,EAvBF,KAAG,QAAU,EAAS,GAAI,EAAA,GAAY,CAAC,EAAI,IAAA,EAAA,EAAA,SAAA,IAAA,EAAA;MAEE;MAA6C;MAA0C;iBAA2C,EAAA;eAqB7K,CAfa,EAAA,uBAAA,GAAA,EACZ,EAYM,OAZN,IAYM,CAVF,EASM,OATN,IASM,CAPQ,EAAA,EAAW,CAAC,EAAI,IAAA,GAAA,EAD1B,EAGuB,GAAA;;MADlB,MAAM,EAAA,EAAW,CAAC,EAAI;MACvB,OAAM;yCACV,EAGO,QAHP,IAGO,EADA,EAAA,EAAW,CAAC,EAAK,KAAI,CAAA,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA,CAAA,EAAA,GAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,GAAA;KAQpD,EA0Ca,GAAA,EA1CD,MAAK,UAAQ,EAAA;uBAyCf,CAvCqC,EAAA,SAA6C,EAAc,EAAK,IAAA,CAAsC,GAAe,EAAO,IAAqC,EAAY,EAAO,IAAA,GAAA,EAD/N,EAwCM,OAAA;OAjCD,KAAG,gBAAkB,EAAQ;OAC9B,OAAM;UACN,EAmBM,OAnBN,IAmBM;OAlBF,EAEuB,GAAA;QADnB,MAAK;QACL,OAAM;;OACV,EAMa,GAAA,EAND,MAAK,UAAQ,EAAA;yBAKmB,CAH9B,EAAA,SAAA,GAAA,EADV,EAIwC,GAAA;SAFnC,KAAK,EAAA;SACN,OAAM;SACL,MAAM,EAAA;;;;OAEf,EAOa,GAAA,EAPD,MAAK,UAAQ,EAAA;yBAMd,CAJG,EAAA,SAAA,GAAA,EADV,EAKO,QAAA;SAHF,KAAK,EAAA;SACN,OAAM;aACH,EAAA,MAA0B,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;;;UAIzC,EAUa,GAAA,EAVD,MAAK,UAAQ,EAAA;wBASuE,CAPzC,EAAA,SAAA,UAA2E,EAAA,SAAiE,EAAA,MAAsB,KAAK,MAAI,IAAA,GAAA,EAD9N,EAQ4F,IAAA;;QAFvF,UAAU,EAAA,MAAsB;QACjC,eAAY;QACZ,OAAM;;;;;;KAItB,EAmKa,GAAA,EAnKD,MAAK,UAAQ,EAAA;uBAkKf,CAhKI,GAAkB,GAAS,EAAK,IAAA,GAAA,EAD1C,EAiKM,OAjKN,IAiKM;OA9JF,EAkHgB,GAAA;QAlHD,WAAU;QAAU,OAAM;;yBAYxB;SAXb,EAWa,GAAA,EAXD,MAAK,UAAQ,EAAA;2BAUmB,CARe,GAAkF,EAAA,IAAA,GAAA,EADzI,EASwC,GAAA;;WAHpC,MAAK;WACL,WAAU;WACT,OAAO,EAAA,EAAE,CAAA,oBAAA;WACT,SAAK,AAAA,EAAA,OAAA,GAAA,MAAOC,EAAAA,MAAK,aAAA,EAAA,CAAA,OAAA,CAAA;;;;SAE1B,EAca,GAAA,EAdD,MAAK,UAAQ,EAAA;2BAab,CAX+C,EAAA,aAAoI,EAAA,IAAA,GAAA,EAD3L,EAYQ,GAAA;;WALJ,MAAK;WACJ,OAAO,EAAA,EAAE,CAAA,qBAAA;WACV,WAAU;WACT,SAAK,GAAA,MAAoDA,EAAAA,MAAK,aAAc,EAAO,EAAA,CAAA,OAAA,CAAA;;;;SAI5F,EAyBa,GAAA,EAzBD,MAAK,UAAQ,EAAA;2BAwBb,CAtB+C,EAAA,UAAiI,EAAA,IAAA,GAAA,EADxL,EAuBQ,GAAA;;WAhBH,MAAmD,EAAU,EAAQ,GAAE,GAAA,sBAAA;WAKvE,OAAoD,EAAU,EAAQ,GAAE,GAAoD,EAAA,EAAE,CAAA,oBAAA,GAAwE,EAAA,EAAE,CAAA,sBAAA;WAKzM,WAAU;WACT,OAAK,EAAA,EAAA,cAA8D,EAAU,EAAQ,GAAE,EAAA,CAAA;WAGvF,SAAK,GAAA,MAAoDA,EAAAA,MAAK,UAAW,EAAO,EAAA,CAAA,OAAA,CAAA;;;;;;;;;SAIzF,EAmBa,GAAA,EAnBD,MAAK,UAAQ,EAAA;2BAkBb,CAhB+C,EAAA,UAAiI,EAAA,IAAA,GAAA,EADxL,EAiBQ,GAAA;;WAVH,MAAmD,EAAmB,EAAQ,GAAE,EAAoD,SAAI,WAAA,qBAAA;WAMxI,OAAO,EAAA,EAAE,CAAA,gBAAA;WACV,WAAU;WACT,SAAK,GAAA,MAAoDA,EAAAA,MAAK,UAAW,EAAO,EAAA,CAAA,OAAA,CAAA;;;;;;;;SAIzF,EAmBa,GAAA,EAnBD,MAAK,UAAQ,EAAA;2BAkBb,CAhB+C,EAAA,YAAmI,EAAA,IAAA,GAAA,EAD1L,EAiBQ,GAAA;;WAVH,MAAmD,EAAmB,EAAQ,GAAE,EAAoD,SAAI,aAAA,uBAAA;WAMxI,OAAO,EAAA,EAAE,CAAA,kBAAA;WACV,WAAU;WACT,SAAK,GAAA,MAAoDA,EAAAA,MAAK,YAAa,EAAO,EAAA,CAAA,OAAA,CAAA;;;;;;;;SAI3F,EAmBa,GAAA,EAnBD,MAAK,UAAQ,EAAA;2BAkBb,CAhB+C,EAAA,YAAmI,EAAA,IAAA,GAAA,EAD1L,EAiBQ,GAAA;;WAVH,MAAmD,EAAmB,EAAQ,GAAE,EAAoD,UAAA,qBAAA;WAMpI,OAAO,EAAA,EAAE,CAAA,kBAAA;WACV,WAAU;WACT,SAAK,GAAA,MAAoDA,EAAAA,MAAK,YAAa,EAAO,EAAA,CAAA,OAAA,CAAA;;;;;;;;;;;OAMhD,EAAA,0BAA8D,EAAQ,UAAU,eAAA,GAAA,EAD/H,EAWO,QAXP,IAWO,CALH,EAAuC,GAAA,EAA/B,MAAK,yBAAuB,CAAA,EAAA,EAAG,MACvC,EACIC,EAAAA,GAAG,EAAQ,SAAS,aAAW,UAAA,CAAA,GACjC,MACF,EAAG,EAAA,EAAE,CAAA,eAAA,CAAA,EAAA,EAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;OAGsC,EAAA,uBAA2D,EAAQ,UAAU,aAAA,GAAA,EAD5H,EAkBO,QAAA;;QAbF,UAAA,IAAmD,KAA8C,EAAQ,UAAU,UAAA,CAAiD,aAAW;QAKhL,OAAM;WACN,EAA8B,GAAA,EAAtB,MAAK,gBAAc,CAAA,EAAA,EAAG,MAC9B,EACIF,EAAAA,GAAAA,IAAgD,KAAK,EAAQ,UAAU,UAAS,EAAA,YAAA,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA,GAAA,IAAA,EAAA,IAAA,GAAA;OAOzC,EAAA,uBAA2D,GAAS,UAAU,eAAmD,GAAS,UAAU,aAAA,GAAA,EADnM,EAWM,OAXN,IAWM,CAJF,EAAmC,GAAA,EAA3B,MAAK,qBAAmB,CAAA,EAChC,EAEgD,GAAA;QAD3C,MAAM,EAAQ,UAAU;QACxB,YAAU,EAAQ,UAAU;;;;;KAI7C,EASa,GAAA,EATD,MAAK,UAAQ,EAAA;uBAQkB,CAN7B,EAAQ,OAAO,EAAA,qBAAA,GAAA,EADzB,EAOuC,GAAA;;;gBAL/B;OAAJ,KAAI;OACH,SAAS,EAAA;OACT,WAAW,EAAA;OACX,OAAO,EAAA;OACP,UAAM,AAAA,EAAA,QAAA,MAAEC,EAAAA,MAAK,mBAAoB,EAAM;OACvC,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,iBAAA;;;;;;;;;IAKnB,EAAA,SAAA,GAAA,EADV,EAImC,GAAA;;KAF9B,OAAA,EAAA;KACA,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,aAAA;KACZ,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,aAAA;;IAEP,GAAA,OAAe,SAAI,UAAe,EAAA,SAAA,GAAA,EAD5C,EAEgD,OAAA;;KAA3C,OAAK,EAAA,EAAA,WAAA,GAAkB,EAAA,MAAM,KAAA,CAAA"}

package/dist-vue/_chunks/{PkChatbotViewChat-wLCypxNG.js → PkChatbotViewChat-CjoezIyz.js}

@@ -1,11 +1,11 @@
-import { t as e } from "./PkToolShowSources-D5cBZxwQ.js";
-import { t } from "./useChatbotStore-Im8Xjwte.js";
-import { t as n } from "./PkChatbotMessages-CMLqkhmb.js";
-import { t as r } from "./PkChatbotInput-ODPhsqZt.js";
-import { t as i } from "./PkToolShowMultipleChoice-DW3m6VbJ.js";
-import { r as a, t as o } from "./PkToolShowContactForm-BzzbXuhh.js";
-import { t as s } from "./PkToolShowSuggestedReply-Dm3BTWYg.js";
-import { t as c } from "./PkToolShowLocation-McDIqI8y.js";
+import { t as e } from "./PkToolShowSources-DK2DCvU3.js";
+import { t } from "./useChatbotStore-CJlkoNn7.js";
+import { t as n } from "./PkChatbotMessages-dsjB0-26.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-r_GgO-ZX.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";
 import { VvIcon as T } from "@volverjs/ui-vue/components";
 import { useDropZone as ne } from "@vueuse/core";
@@ -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-wLCypxNG.js.map
+//# sourceMappingURL=PkChatbotViewChat-CjoezIyz.js.map

package/dist-vue/_chunks/{PkChatbotViewChat-wLCypxNG.js.map → PkChatbotViewChat-CjoezIyz.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkChatbotViewChat-wLCypxNG.js","names":["$n","$t"],"sources":["../../../../packages/components/src/chat/PkToolRequestGeolocation.vue","../../../../packages/components/src/chat/PkToolRequestGeolocation.vue","../../../../packages/components/src/chat/PkChatbotViewChat.vue","../../../../packages/components/src/chat/PkChatbotViewChat.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { computed, onMounted } from 'vue'\n    import { useI18n } from 'vue-i18n'\n\n    import type { ReverseGeocodeFn } from 'utils/src/device-context'\n\n    type GeolocationOutput =\n        | {\n              latitude: number\n              longitude: number\n              accuracy?: number\n              city?: string\n          }\n        | { error: 'permission_denied' | 'position_unavailable' | 'timeout' }\n\n    const props = defineProps<{\n        part: unknown\n        reverseGeocode?: ReverseGeocodeFn\n    }>()\n\n    const emit = defineEmits<{\n        result: [output: GeolocationOutput]\n    }>()\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    const toolPart = computed(() => {\n        return props.part as {\n            state?: string\n            input?: { reason?: string }\n            output?: GeolocationOutput\n        }\n    })\n\n    const state = computed(() => toolPart.value.state ?? 'unknown')\n\n    const isOutputAvailable = computed(() => state.value === 'output-available')\n\n    const successOutput = computed(() => {\n        const out = toolPart.value.output\n        if (!out || 'error' in out) {\n            return undefined\n        }\n        return out\n    })\n\n    const errorOutput = computed(() => {\n        const out = toolPart.value.output\n        if (!out || !('error' in out)) {\n            return undefined\n        }\n        return out\n    })\n\n    /** Maps GeolocationPositionError.code to a typed string */\n    function mapGeolocationError(\n        code: number,\n    ): 'permission_denied' | 'position_unavailable' | 'timeout' {\n        if (code === 1) {\n            return 'permission_denied'\n        }\n        if (code === 3) {\n            return 'timeout'\n        }\n        return 'position_unavailable'\n    }\n\n    onMounted(() => {\n        if (state.value !== 'input-available') {\n            return\n        }\n\n        if (!navigator.geolocation) {\n            emit('result', { error: 'position_unavailable' })\n            return\n        }\n\n        navigator.geolocation.getCurrentPosition(\n            async (position) => {\n                const { latitude, longitude, accuracy } = position.coords\n                const city = props.reverseGeocode\n                    ? await props\n                          .reverseGeocode(latitude, longitude)\n                          .catch(() => undefined)\n                    : undefined\n                emit('result', { latitude, longitude, accuracy, city })\n            },\n            (error) => {\n                emit('result', { error: mapGeolocationError(error.code) })\n            },\n            { timeout: 15000 },\n        )\n    })\n</script>\n\n<template>\n    <div\n        class=\"flex items-center gap-6 text-12 text-word-3 border border-surface-3 rounded-xl px-sm py-10\">\n        <!-- Loading state -->\n        <template v-if=\"!isOutputAvailable\">\n            <VvIcon name=\"line-md:loading-loop\" class=\"text-16\" />\n            <span>{{ $t('messagePart.requestGeolocation') }}</span>\n        </template>\n\n        <!-- Success state -->\n        <template v-else-if=\"successOutput\">\n            <VvIcon name=\"ri:map-pin-line\" class=\"text-16\" />\n            <span>\n                {{\n                    $n(successOutput.latitude, {\n                        style: 'decimal',\n                        minimumFractionDigits: 5,\n                        maximumFractionDigits: 5,\n                    })\n                }},\n                {{\n                    $n(successOutput.longitude, {\n                        style: 'decimal',\n                        minimumFractionDigits: 5,\n                        maximumFractionDigits: 5,\n                    })\n                }}\n                <template v-if=\"successOutput.accuracy !== undefined\">\n                    (±{{\n                        $n(successOutput.accuracy, {\n                            style: 'unit',\n                            unit: 'meter',\n                        })\n                    }})\n                </template>\n            </span>\n        </template>\n\n        <!-- Error state -->\n        <template v-else-if=\"errorOutput\">\n            <span class=\"i-vv-alert-circle text-16 shrink-0 text-danger\" />\n            <span>\n                {{\n                    errorOutput.error === 'permission_denied'\n                        ? $t('message.geolocationPermissionDenied')\n                        : $t('message.geolocationUnavailable')\n                }}\n            </span>\n        </template>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import { computed, onMounted } from 'vue'\n    import { useI18n } from 'vue-i18n'\n\n    import type { ReverseGeocodeFn } from 'utils/src/device-context'\n\n    type GeolocationOutput =\n        | {\n              latitude: number\n              longitude: number\n              accuracy?: number\n              city?: string\n          }\n        | { error: 'permission_denied' | 'position_unavailable' | 'timeout' }\n\n    const props = defineProps<{\n        part: unknown\n        reverseGeocode?: ReverseGeocodeFn\n    }>()\n\n    const emit = defineEmits<{\n        result: [output: GeolocationOutput]\n    }>()\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    const toolPart = computed(() => {\n        return props.part as {\n            state?: string\n            input?: { reason?: string }\n            output?: GeolocationOutput\n        }\n    })\n\n    const state = computed(() => toolPart.value.state ?? 'unknown')\n\n    const isOutputAvailable = computed(() => state.value === 'output-available')\n\n    const successOutput = computed(() => {\n        const out = toolPart.value.output\n        if (!out || 'error' in out) {\n            return undefined\n        }\n        return out\n    })\n\n    const errorOutput = computed(() => {\n        const out = toolPart.value.output\n        if (!out || !('error' in out)) {\n            return undefined\n        }\n        return out\n    })\n\n    /** Maps GeolocationPositionError.code to a typed string */\n    function mapGeolocationError(\n        code: number,\n    ): 'permission_denied' | 'position_unavailable' | 'timeout' {\n        if (code === 1) {\n            return 'permission_denied'\n        }\n        if (code === 3) {\n            return 'timeout'\n        }\n        return 'position_unavailable'\n    }\n\n    onMounted(() => {\n        if (state.value !== 'input-available') {\n            return\n        }\n\n        if (!navigator.geolocation) {\n            emit('result', { error: 'position_unavailable' })\n            return\n        }\n\n        navigator.geolocation.getCurrentPosition(\n            async (position) => {\n                const { latitude, longitude, accuracy } = position.coords\n                const city = props.reverseGeocode\n                    ? await props\n                          .reverseGeocode(latitude, longitude)\n                          .catch(() => undefined)\n                    : undefined\n                emit('result', { latitude, longitude, accuracy, city })\n            },\n            (error) => {\n                emit('result', { error: mapGeolocationError(error.code) })\n            },\n            { timeout: 15000 },\n        )\n    })\n</script>\n\n<template>\n    <div\n        class=\"flex items-center gap-6 text-12 text-word-3 border border-surface-3 rounded-xl px-sm py-10\">\n        <!-- Loading state -->\n        <template v-if=\"!isOutputAvailable\">\n            <VvIcon name=\"line-md:loading-loop\" class=\"text-16\" />\n            <span>{{ $t('messagePart.requestGeolocation') }}</span>\n        </template>\n\n        <!-- Success state -->\n        <template v-else-if=\"successOutput\">\n            <VvIcon name=\"ri:map-pin-line\" class=\"text-16\" />\n            <span>\n                {{\n                    $n(successOutput.latitude, {\n                        style: 'decimal',\n                        minimumFractionDigits: 5,\n                        maximumFractionDigits: 5,\n                    })\n                }},\n                {{\n                    $n(successOutput.longitude, {\n                        style: 'decimal',\n                        minimumFractionDigits: 5,\n                        maximumFractionDigits: 5,\n                    })\n                }}\n                <template v-if=\"successOutput.accuracy !== undefined\">\n                    (±{{\n                        $n(successOutput.accuracy, {\n                            style: 'unit',\n                            unit: 'meter',\n                        })\n                    }})\n                </template>\n            </span>\n        </template>\n\n        <!-- Error state -->\n        <template v-else-if=\"errorOutput\">\n            <span class=\"i-vv-alert-circle text-16 shrink-0 text-danger\" />\n            <span>\n                {{\n                    errorOutput.error === 'permission_denied'\n                        ? $t('message.geolocationPermissionDenied')\n                        : $t('message.geolocationUnavailable')\n                }}\n            </span>\n        </template>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import { computed, useTemplateRef } from 'vue'\n    import { useDropZone } from '@vueuse/core'\n    import { storeToRefs } from 'pinia'\n    import PkChatbotMessages from './PkChatbotMessages.vue'\n    import PkChatbotInput from './PkChatbotInput.vue'\n    import PkToolShowMultipleChoice from './PkToolShowMultipleChoice.vue'\n    import PkToolShowContactForm from './PkToolShowContactForm.vue'\n    import PkToolShowSuggestedReply from './PkToolShowSuggestedReply.vue'\n    import PkToolShowSources from './PkToolShowSources.vue'\n    import PkToolRequestGeolocation from './PkToolRequestGeolocation.vue'\n    import PkToolShowLocation from './PkToolShowLocation.vue'\n    import { useLocalizedString } from '../composables/useLocalizedString'\n    import { useChatbotStore } from 'composables'\n    import type { UIChatMessage } from 'models'\n\n    const props = defineProps<{ agentId: string }>()\n\n    const emit = defineEmits<{\n        'show-info': [message: UIChatMessage]\n        revise: [message: UIChatMessage]\n    }>()\n\n    const store = useChatbotStore(props.agentId)\n\n    const {\n        name,\n        agentInterface,\n        agentFileUpload,\n        actions,\n        revisedAnswers,\n        messages,\n        chat,\n        messageFeedbacks,\n        feedbackDialogMessage,\n        isFeedbackSubmitting,\n        isFeedbackSubmitted,\n        feedbackSubmitError,\n        isLeadSubmitted,\n        isLoadingSubmitLead,\n        submitLeadError,\n        input,\n        inputMessagePlaceholder,\n        isConversationBlocked,\n        baseUrl,\n        pendingAttachments,\n        apiClient,\n    } = storeToRefs(store)\n\n    const {\n        handleSubmit: storeHandleSubmit,\n        stopGeneration,\n        regenerate,\n        onUpvote,\n        onDownvote,\n        onFeedback,\n        onFeedbackSubmit,\n        onLeadSubmit,\n        startNewChat,\n        addToolOutput,\n        handleFileSelect,\n    } = store\n\n    const dismissableNotice = useLocalizedString(\n        () => agentInterface.value?.dismissableNotice,\n    )\n\n    const chatViewEl = useTemplateRef<HTMLDivElement>('chatViewEl')\n\n    const handleExpandSourceContext = async (payload: {\n        documentId: string\n        chunkIndex: number\n    }) => {\n        const result = await apiClient.value.expandSourceContext(\n            props.agentId,\n            payload.documentId,\n            payload.chunkIndex,\n        )\n        return result.content\n    }\n\n    const handleDownloadSource = async (documentId: string) => {\n        const result = await apiClient.value.downloadSourceDocument(\n            props.agentId,\n            documentId,\n        )\n        window.open(result.downloadUrl, '_blank')\n    }\n\n    const handleFileDrop = (files: File[] | null) => {\n        if (!agentFileUpload.value?.enabled || !files) {\n            return\n        }\n        for (const file of files) {\n            handleFileSelect(file)\n        }\n    }\n\n    const { isOverDropZone } = useDropZone(chatViewEl, {\n        dataTypes: computed(\n            () => agentFileUpload.value?.allowedMimeTypes ?? [],\n        ),\n        onDrop: handleFileDrop,\n    })\n</script>\n\n<template>\n    <div\n        ref=\"chatViewEl\"\n        class=\"pk-chatbot-view-chat\"\n        :class=\"{\n            'pk-chatbot-view-chat--dragover':\n                isOverDropZone && agentFileUpload?.enabled,\n        }\">\n        <!-- #region messages -->\n        <PkChatbotMessages\n            class=\"flex flex-col flex-1 min-h-0 p-md overflow-y-auto\"\n            :name=\"name\"\n            :messages=\"messages\"\n            :status=\"chat.status\"\n            :error=\"chat.error\"\n            :main-color=\"agentInterface?.mainColor\"\n            :text-color=\"agentInterface?.textColor\"\n            :revised-answers=\"revisedAnswers\"\n            :actions=\"actions\"\n            :logo=\"agentInterface?.logo\"\n            :message-feedbacks=\"messageFeedbacks\"\n            :feedback-message-id=\"feedbackDialogMessage?.id\"\n            :feedback-loading=\"isFeedbackSubmitting\"\n            :feedback-submitted=\"isFeedbackSubmitted\"\n            :feedback-error=\"feedbackSubmitError\"\n            @feedback-submit=\"onFeedbackSubmit($event)\"\n            @feedback-close=\"feedbackDialogMessage = undefined\"\n            @regenerate=\"regenerate\"\n            @auto-retry=\"regenerate\"\n            @reset-chat=\"startNewChat\"\n            @show-info=\"emit('show-info', $event)\"\n            @revise=\"emit('revise', $event)\"\n            @upvote=\"onUpvote\"\n            @downvote=\"onDownvote\"\n            @feedback=\"onFeedback\">\n            <template #tool-showContactForm=\"{ part }\">\n                <PkToolShowContactForm\n                    :part\n                    :readonly=\"!baseUrl\"\n                    :submitted=\"isLeadSubmitted\"\n                    :loading=\"isLoadingSubmitLead\"\n                    :error=\"submitLeadError\"\n                    :privacy-policy-notice=\"agentInterface?.privacyPolicyNotice\"\n                    @submit=\"onLeadSubmit\" />\n            </template>\n            <template #tool-showSuggestedReply=\"{ part }\">\n                <PkToolShowSuggestedReply\n                    :part\n                    @select=\"\n                        ($event) => {\n                            input = $event\n                            storeHandleSubmit()\n                        }\n                    \" />\n            </template>\n            <template #tool-showSources=\"{ part }\">\n                <PkToolShowSources\n                    :part\n                    :on-expand-context=\"handleExpandSourceContext\"\n                    :on-download=\"handleDownloadSource\" />\n            </template>\n            <template #tool-showMultipleChoice=\"{ part }\">\n                <transition mode=\"out-in\">\n                    <PkToolShowMultipleChoice\n                        :part\n                        @select=\"\n                            addToolOutput({\n                                tool: 'showMultipleChoice',\n                                toolCallId: (part as any).toolCallId,\n                                output: $event,\n                            })\n                        \" />\n                </transition>\n            </template>\n            <template #tool-requestGeolocation=\"{ part }\">\n                <PkToolRequestGeolocation\n                    :part\n                    :reverse-geocode=\"\n                        (lat: number, lon: number) =>\n                            apiClient.reverseGeocode(lat, lon)\n                    \"\n                    @result=\"\n                        addToolOutput({\n                            tool: 'requestGeolocation',\n                            toolCallId: (part as any).toolCallId,\n                            output: $event,\n                        })\n                    \" />\n            </template>\n            <template #tool-showLocation=\"{ part }\">\n                <PkToolShowLocation\n                    :part\n                    :forward-geocode=\"\n                        (query: string, lang?: string) =>\n                            apiClient.forwardGeocode(query, lang)\n                    \" />\n            </template>\n        </PkChatbotMessages>\n        <!-- #endregion -->\n\n        <!-- #region input -->\n        <div\n            v-if=\"isConversationBlocked\"\n            class=\"p-md border-t border-surface-3 text-center text-12 text-danger-darken-2 bg-surface-danger\">\n            {{ $t('message.chatErrorConversationBlocked') }}\n        </div>\n        <PkChatbotInput\n            v-else\n            v-model=\"input\"\n            v-model:pending-attachments=\"pendingAttachments\"\n            :placeholder=\"inputMessagePlaceholder\"\n            :dismissable-notice=\"\n                dismissableNotice && chat.messages.length <= 1\n                    ? dismissableNotice\n                    : undefined\n            \"\n            :status=\"chat.status\"\n            :max-message-length=\"agentInterface?.maxMessageLength\"\n            :file-upload=\"agentFileUpload\"\n            @stop-generation=\"stopGeneration\"\n            @submit=\"storeHandleSubmit\"\n            @file-select=\"handleFileSelect\" />\n        <!-- #endregion -->\n        <Transition>\n            <div\n                v-if=\"isOverDropZone && agentFileUpload?.enabled\"\n                class=\"pk-chatbot-view-chat__drop-overlay\">\n                <VvIcon\n                    name=\"ri:upload-cloud-2-line\"\n                    class=\"pk-chatbot-view-chat__drop-overlay-icon\" />\n                <span>{{ $t('action.dropFile') }}</span>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-view-chat {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        min-height: 0;\n\n        &__drop-overlay {\n            position: absolute;\n            inset: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm)\n                var(--spacing-sm);\n            z-index: 1;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            gap: var(--spacing-xs);\n            background-color: color-mix(\n                in srgb,\n                var(--color-surface) 85%,\n                transparent\n            );\n            border-radius: var(--rounded-xl);\n            border: var(--spacing-2) dashed var(--color-surface-5);\n            pointer-events: none;\n            color: var(--color-word-3);\n\n            &-icon {\n                font-size: var(--spacing-32);\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { computed, useTemplateRef } from 'vue'\n    import { useDropZone } from '@vueuse/core'\n    import { storeToRefs } from 'pinia'\n    import PkChatbotMessages from './PkChatbotMessages.vue'\n    import PkChatbotInput from './PkChatbotInput.vue'\n    import PkToolShowMultipleChoice from './PkToolShowMultipleChoice.vue'\n    import PkToolShowContactForm from './PkToolShowContactForm.vue'\n    import PkToolShowSuggestedReply from './PkToolShowSuggestedReply.vue'\n    import PkToolShowSources from './PkToolShowSources.vue'\n    import PkToolRequestGeolocation from './PkToolRequestGeolocation.vue'\n    import PkToolShowLocation from './PkToolShowLocation.vue'\n    import { useLocalizedString } from '../composables/useLocalizedString'\n    import { useChatbotStore } from 'composables'\n    import type { UIChatMessage } from 'models'\n\n    const props = defineProps<{ agentId: string }>()\n\n    const emit = defineEmits<{\n        'show-info': [message: UIChatMessage]\n        revise: [message: UIChatMessage]\n    }>()\n\n    const store = useChatbotStore(props.agentId)\n\n    const {\n        name,\n        agentInterface,\n        agentFileUpload,\n        actions,\n        revisedAnswers,\n        messages,\n        chat,\n        messageFeedbacks,\n        feedbackDialogMessage,\n        isFeedbackSubmitting,\n        isFeedbackSubmitted,\n        feedbackSubmitError,\n        isLeadSubmitted,\n        isLoadingSubmitLead,\n        submitLeadError,\n        input,\n        inputMessagePlaceholder,\n        isConversationBlocked,\n        baseUrl,\n        pendingAttachments,\n        apiClient,\n    } = storeToRefs(store)\n\n    const {\n        handleSubmit: storeHandleSubmit,\n        stopGeneration,\n        regenerate,\n        onUpvote,\n        onDownvote,\n        onFeedback,\n        onFeedbackSubmit,\n        onLeadSubmit,\n        startNewChat,\n        addToolOutput,\n        handleFileSelect,\n    } = store\n\n    const dismissableNotice = useLocalizedString(\n        () => agentInterface.value?.dismissableNotice,\n    )\n\n    const chatViewEl = useTemplateRef<HTMLDivElement>('chatViewEl')\n\n    const handleExpandSourceContext = async (payload: {\n        documentId: string\n        chunkIndex: number\n    }) => {\n        const result = await apiClient.value.expandSourceContext(\n            props.agentId,\n            payload.documentId,\n            payload.chunkIndex,\n        )\n        return result.content\n    }\n\n    const handleDownloadSource = async (documentId: string) => {\n        const result = await apiClient.value.downloadSourceDocument(\n            props.agentId,\n            documentId,\n        )\n        window.open(result.downloadUrl, '_blank')\n    }\n\n    const handleFileDrop = (files: File[] | null) => {\n        if (!agentFileUpload.value?.enabled || !files) {\n            return\n        }\n        for (const file of files) {\n            handleFileSelect(file)\n        }\n    }\n\n    const { isOverDropZone } = useDropZone(chatViewEl, {\n        dataTypes: computed(\n            () => agentFileUpload.value?.allowedMimeTypes ?? [],\n        ),\n        onDrop: handleFileDrop,\n    })\n</script>\n\n<template>\n    <div\n        ref=\"chatViewEl\"\n        class=\"pk-chatbot-view-chat\"\n        :class=\"{\n            'pk-chatbot-view-chat--dragover':\n                isOverDropZone && agentFileUpload?.enabled,\n        }\">\n        <!-- #region messages -->\n        <PkChatbotMessages\n            class=\"flex flex-col flex-1 min-h-0 p-md overflow-y-auto\"\n            :name=\"name\"\n            :messages=\"messages\"\n            :status=\"chat.status\"\n            :error=\"chat.error\"\n            :main-color=\"agentInterface?.mainColor\"\n            :text-color=\"agentInterface?.textColor\"\n            :revised-answers=\"revisedAnswers\"\n            :actions=\"actions\"\n            :logo=\"agentInterface?.logo\"\n            :message-feedbacks=\"messageFeedbacks\"\n            :feedback-message-id=\"feedbackDialogMessage?.id\"\n            :feedback-loading=\"isFeedbackSubmitting\"\n            :feedback-submitted=\"isFeedbackSubmitted\"\n            :feedback-error=\"feedbackSubmitError\"\n            @feedback-submit=\"onFeedbackSubmit($event)\"\n            @feedback-close=\"feedbackDialogMessage = undefined\"\n            @regenerate=\"regenerate\"\n            @auto-retry=\"regenerate\"\n            @reset-chat=\"startNewChat\"\n            @show-info=\"emit('show-info', $event)\"\n            @revise=\"emit('revise', $event)\"\n            @upvote=\"onUpvote\"\n            @downvote=\"onDownvote\"\n            @feedback=\"onFeedback\">\n            <template #tool-showContactForm=\"{ part }\">\n                <PkToolShowContactForm\n                    :part\n                    :readonly=\"!baseUrl\"\n                    :submitted=\"isLeadSubmitted\"\n                    :loading=\"isLoadingSubmitLead\"\n                    :error=\"submitLeadError\"\n                    :privacy-policy-notice=\"agentInterface?.privacyPolicyNotice\"\n                    @submit=\"onLeadSubmit\" />\n            </template>\n            <template #tool-showSuggestedReply=\"{ part }\">\n                <PkToolShowSuggestedReply\n                    :part\n                    @select=\"\n                        ($event) => {\n                            input = $event\n                            storeHandleSubmit()\n                        }\n                    \" />\n            </template>\n            <template #tool-showSources=\"{ part }\">\n                <PkToolShowSources\n                    :part\n                    :on-expand-context=\"handleExpandSourceContext\"\n                    :on-download=\"handleDownloadSource\" />\n            </template>\n            <template #tool-showMultipleChoice=\"{ part }\">\n                <transition mode=\"out-in\">\n                    <PkToolShowMultipleChoice\n                        :part\n                        @select=\"\n                            addToolOutput({\n                                tool: 'showMultipleChoice',\n                                toolCallId: (part as any).toolCallId,\n                                output: $event,\n                            })\n                        \" />\n                </transition>\n            </template>\n            <template #tool-requestGeolocation=\"{ part }\">\n                <PkToolRequestGeolocation\n                    :part\n                    :reverse-geocode=\"\n                        (lat: number, lon: number) =>\n                            apiClient.reverseGeocode(lat, lon)\n                    \"\n                    @result=\"\n                        addToolOutput({\n                            tool: 'requestGeolocation',\n                            toolCallId: (part as any).toolCallId,\n                            output: $event,\n                        })\n                    \" />\n            </template>\n            <template #tool-showLocation=\"{ part }\">\n                <PkToolShowLocation\n                    :part\n                    :forward-geocode=\"\n                        (query: string, lang?: string) =>\n                            apiClient.forwardGeocode(query, lang)\n                    \" />\n            </template>\n        </PkChatbotMessages>\n        <!-- #endregion -->\n\n        <!-- #region input -->\n        <div\n            v-if=\"isConversationBlocked\"\n            class=\"p-md border-t border-surface-3 text-center text-12 text-danger-darken-2 bg-surface-danger\">\n            {{ $t('message.chatErrorConversationBlocked') }}\n        </div>\n        <PkChatbotInput\n            v-else\n            v-model=\"input\"\n            v-model:pending-attachments=\"pendingAttachments\"\n            :placeholder=\"inputMessagePlaceholder\"\n            :dismissable-notice=\"\n                dismissableNotice && chat.messages.length <= 1\n                    ? dismissableNotice\n                    : undefined\n            \"\n            :status=\"chat.status\"\n            :max-message-length=\"agentInterface?.maxMessageLength\"\n            :file-upload=\"agentFileUpload\"\n            @stop-generation=\"stopGeneration\"\n            @submit=\"storeHandleSubmit\"\n            @file-select=\"handleFileSelect\" />\n        <!-- #endregion -->\n        <Transition>\n            <div\n                v-if=\"isOverDropZone && agentFileUpload?.enabled\"\n                class=\"pk-chatbot-view-chat__drop-overlay\">\n                <VvIcon\n                    name=\"ri:upload-cloud-2-line\"\n                    class=\"pk-chatbot-view-chat__drop-overlay-icon\" />\n                <span>{{ $t('action.dropFile') }}</span>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-view-chat {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        min-height: 0;\n\n        &__drop-overlay {\n            position: absolute;\n            inset: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm)\n                var(--spacing-sm);\n            z-index: 1;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            gap: var(--spacing-xs);\n            background-color: color-mix(\n                in srgb,\n                var(--color-surface) 85%,\n                transparent\n            );\n            border-radius: var(--rounded-xl);\n            border: var(--spacing-2) dashed var(--color-surface-5);\n            pointer-events: none;\n            color: var(--color-word-3);\n\n            &-icon {\n                font-size: var(--spacing-32);\n            }\n        }\n    }\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"PkChatbotViewChat-CjoezIyz.js","names":["$n","$t"],"sources":["../../../../packages/components/src/chat/PkToolRequestGeolocation.vue","../../../../packages/components/src/chat/PkToolRequestGeolocation.vue","../../../../packages/components/src/chat/PkChatbotViewChat.vue","../../../../packages/components/src/chat/PkChatbotViewChat.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { computed, onMounted } from 'vue'\n    import { useI18n } from 'vue-i18n'\n\n    import type { ReverseGeocodeFn } from 'utils/src/device-context'\n\n    type GeolocationOutput =\n        | {\n              latitude: number\n              longitude: number\n              accuracy?: number\n              city?: string\n          }\n        | { error: 'permission_denied' | 'position_unavailable' | 'timeout' }\n\n    const props = defineProps<{\n        part: unknown\n        reverseGeocode?: ReverseGeocodeFn\n    }>()\n\n    const emit = defineEmits<{\n        result: [output: GeolocationOutput]\n    }>()\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    const toolPart = computed(() => {\n        return props.part as {\n            state?: string\n            input?: { reason?: string }\n            output?: GeolocationOutput\n        }\n    })\n\n    const state = computed(() => toolPart.value.state ?? 'unknown')\n\n    const isOutputAvailable = computed(() => state.value === 'output-available')\n\n    const successOutput = computed(() => {\n        const out = toolPart.value.output\n        if (!out || 'error' in out) {\n            return undefined\n        }\n        return out\n    })\n\n    const errorOutput = computed(() => {\n        const out = toolPart.value.output\n        if (!out || !('error' in out)) {\n            return undefined\n        }\n        return out\n    })\n\n    /** Maps GeolocationPositionError.code to a typed string */\n    function mapGeolocationError(\n        code: number,\n    ): 'permission_denied' | 'position_unavailable' | 'timeout' {\n        if (code === 1) {\n            return 'permission_denied'\n        }\n        if (code === 3) {\n            return 'timeout'\n        }\n        return 'position_unavailable'\n    }\n\n    onMounted(() => {\n        if (state.value !== 'input-available') {\n            return\n        }\n\n        if (!navigator.geolocation) {\n            emit('result', { error: 'position_unavailable' })\n            return\n        }\n\n        navigator.geolocation.getCurrentPosition(\n            async (position) => {\n                const { latitude, longitude, accuracy } = position.coords\n                const city = props.reverseGeocode\n                    ? await props\n                          .reverseGeocode(latitude, longitude)\n                          .catch(() => undefined)\n                    : undefined\n                emit('result', { latitude, longitude, accuracy, city })\n            },\n            (error) => {\n                emit('result', { error: mapGeolocationError(error.code) })\n            },\n            { timeout: 15000 },\n        )\n    })\n</script>\n\n<template>\n    <div\n        class=\"flex items-center gap-6 text-12 text-word-3 border border-surface-3 rounded-xl px-sm py-10\">\n        <!-- Loading state -->\n        <template v-if=\"!isOutputAvailable\">\n            <VvIcon name=\"line-md:loading-loop\" class=\"text-16\" />\n            <span>{{ $t('messagePart.requestGeolocation') }}</span>\n        </template>\n\n        <!-- Success state -->\n        <template v-else-if=\"successOutput\">\n            <VvIcon name=\"ri:map-pin-line\" class=\"text-16\" />\n            <span>\n                {{\n                    $n(successOutput.latitude, {\n                        style: 'decimal',\n                        minimumFractionDigits: 5,\n                        maximumFractionDigits: 5,\n                    })\n                }},\n                {{\n                    $n(successOutput.longitude, {\n                        style: 'decimal',\n                        minimumFractionDigits: 5,\n                        maximumFractionDigits: 5,\n                    })\n                }}\n                <template v-if=\"successOutput.accuracy !== undefined\">\n                    (±{{\n                        $n(successOutput.accuracy, {\n                            style: 'unit',\n                            unit: 'meter',\n                        })\n                    }})\n                </template>\n            </span>\n        </template>\n\n        <!-- Error state -->\n        <template v-else-if=\"errorOutput\">\n            <span class=\"i-vv-alert-circle text-16 shrink-0 text-danger\" />\n            <span>\n                {{\n                    errorOutput.error === 'permission_denied'\n                        ? $t('message.geolocationPermissionDenied')\n                        : $t('message.geolocationUnavailable')\n                }}\n            </span>\n        </template>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import { computed, onMounted } from 'vue'\n    import { useI18n } from 'vue-i18n'\n\n    import type { ReverseGeocodeFn } from 'utils/src/device-context'\n\n    type GeolocationOutput =\n        | {\n              latitude: number\n              longitude: number\n              accuracy?: number\n              city?: string\n          }\n        | { error: 'permission_denied' | 'position_unavailable' | 'timeout' }\n\n    const props = defineProps<{\n        part: unknown\n        reverseGeocode?: ReverseGeocodeFn\n    }>()\n\n    const emit = defineEmits<{\n        result: [output: GeolocationOutput]\n    }>()\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    const toolPart = computed(() => {\n        return props.part as {\n            state?: string\n            input?: { reason?: string }\n            output?: GeolocationOutput\n        }\n    })\n\n    const state = computed(() => toolPart.value.state ?? 'unknown')\n\n    const isOutputAvailable = computed(() => state.value === 'output-available')\n\n    const successOutput = computed(() => {\n        const out = toolPart.value.output\n        if (!out || 'error' in out) {\n            return undefined\n        }\n        return out\n    })\n\n    const errorOutput = computed(() => {\n        const out = toolPart.value.output\n        if (!out || !('error' in out)) {\n            return undefined\n        }\n        return out\n    })\n\n    /** Maps GeolocationPositionError.code to a typed string */\n    function mapGeolocationError(\n        code: number,\n    ): 'permission_denied' | 'position_unavailable' | 'timeout' {\n        if (code === 1) {\n            return 'permission_denied'\n        }\n        if (code === 3) {\n            return 'timeout'\n        }\n        return 'position_unavailable'\n    }\n\n    onMounted(() => {\n        if (state.value !== 'input-available') {\n            return\n        }\n\n        if (!navigator.geolocation) {\n            emit('result', { error: 'position_unavailable' })\n            return\n        }\n\n        navigator.geolocation.getCurrentPosition(\n            async (position) => {\n                const { latitude, longitude, accuracy } = position.coords\n                const city = props.reverseGeocode\n                    ? await props\n                          .reverseGeocode(latitude, longitude)\n                          .catch(() => undefined)\n                    : undefined\n                emit('result', { latitude, longitude, accuracy, city })\n            },\n            (error) => {\n                emit('result', { error: mapGeolocationError(error.code) })\n            },\n            { timeout: 15000 },\n        )\n    })\n</script>\n\n<template>\n    <div\n        class=\"flex items-center gap-6 text-12 text-word-3 border border-surface-3 rounded-xl px-sm py-10\">\n        <!-- Loading state -->\n        <template v-if=\"!isOutputAvailable\">\n            <VvIcon name=\"line-md:loading-loop\" class=\"text-16\" />\n            <span>{{ $t('messagePart.requestGeolocation') }}</span>\n        </template>\n\n        <!-- Success state -->\n        <template v-else-if=\"successOutput\">\n            <VvIcon name=\"ri:map-pin-line\" class=\"text-16\" />\n            <span>\n                {{\n                    $n(successOutput.latitude, {\n                        style: 'decimal',\n                        minimumFractionDigits: 5,\n                        maximumFractionDigits: 5,\n                    })\n                }},\n                {{\n                    $n(successOutput.longitude, {\n                        style: 'decimal',\n                        minimumFractionDigits: 5,\n                        maximumFractionDigits: 5,\n                    })\n                }}\n                <template v-if=\"successOutput.accuracy !== undefined\">\n                    (±{{\n                        $n(successOutput.accuracy, {\n                            style: 'unit',\n                            unit: 'meter',\n                        })\n                    }})\n                </template>\n            </span>\n        </template>\n\n        <!-- Error state -->\n        <template v-else-if=\"errorOutput\">\n            <span class=\"i-vv-alert-circle text-16 shrink-0 text-danger\" />\n            <span>\n                {{\n                    errorOutput.error === 'permission_denied'\n                        ? $t('message.geolocationPermissionDenied')\n                        : $t('message.geolocationUnavailable')\n                }}\n            </span>\n        </template>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import { computed, useTemplateRef } from 'vue'\n    import { useDropZone } from '@vueuse/core'\n    import { storeToRefs } from 'pinia'\n    import PkChatbotMessages from './PkChatbotMessages.vue'\n    import PkChatbotInput from './PkChatbotInput.vue'\n    import PkToolShowMultipleChoice from './PkToolShowMultipleChoice.vue'\n    import PkToolShowContactForm from './PkToolShowContactForm.vue'\n    import PkToolShowSuggestedReply from './PkToolShowSuggestedReply.vue'\n    import PkToolShowSources from './PkToolShowSources.vue'\n    import PkToolRequestGeolocation from './PkToolRequestGeolocation.vue'\n    import PkToolShowLocation from './PkToolShowLocation.vue'\n    import { useLocalizedString } from '../composables/useLocalizedString'\n    import { useChatbotStore } from 'composables'\n    import type { UIChatMessage } from 'models'\n\n    const props = defineProps<{ agentId: string }>()\n\n    const emit = defineEmits<{\n        'show-info': [message: UIChatMessage]\n        revise: [message: UIChatMessage]\n    }>()\n\n    const store = useChatbotStore(props.agentId)\n\n    const {\n        name,\n        agentInterface,\n        agentFileUpload,\n        actions,\n        revisedAnswers,\n        messages,\n        chat,\n        messageFeedbacks,\n        feedbackDialogMessage,\n        isFeedbackSubmitting,\n        isFeedbackSubmitted,\n        feedbackSubmitError,\n        isLeadSubmitted,\n        isLoadingSubmitLead,\n        submitLeadError,\n        input,\n        inputMessagePlaceholder,\n        isConversationBlocked,\n        baseUrl,\n        pendingAttachments,\n        apiClient,\n    } = storeToRefs(store)\n\n    const {\n        handleSubmit: storeHandleSubmit,\n        stopGeneration,\n        regenerate,\n        onUpvote,\n        onDownvote,\n        onFeedback,\n        onFeedbackSubmit,\n        onLeadSubmit,\n        startNewChat,\n        addToolOutput,\n        handleFileSelect,\n    } = store\n\n    const dismissableNotice = useLocalizedString(\n        () => agentInterface.value?.dismissableNotice,\n    )\n\n    const chatViewEl = useTemplateRef<HTMLDivElement>('chatViewEl')\n\n    const handleExpandSourceContext = async (payload: {\n        documentId: string\n        chunkIndex: number\n    }) => {\n        const result = await apiClient.value.expandSourceContext(\n            props.agentId,\n            payload.documentId,\n            payload.chunkIndex,\n        )\n        return result.content\n    }\n\n    const handleDownloadSource = async (documentId: string) => {\n        const result = await apiClient.value.downloadSourceDocument(\n            props.agentId,\n            documentId,\n        )\n        window.open(result.downloadUrl, '_blank')\n    }\n\n    const handleFileDrop = (files: File[] | null) => {\n        if (!agentFileUpload.value?.enabled || !files) {\n            return\n        }\n        for (const file of files) {\n            handleFileSelect(file)\n        }\n    }\n\n    const { isOverDropZone } = useDropZone(chatViewEl, {\n        dataTypes: computed(\n            () => agentFileUpload.value?.allowedMimeTypes ?? [],\n        ),\n        onDrop: handleFileDrop,\n    })\n</script>\n\n<template>\n    <div\n        ref=\"chatViewEl\"\n        class=\"pk-chatbot-view-chat\"\n        :class=\"{\n            'pk-chatbot-view-chat--dragover':\n                isOverDropZone && agentFileUpload?.enabled,\n        }\">\n        <!-- #region messages -->\n        <PkChatbotMessages\n            class=\"flex flex-col flex-1 min-h-0 p-md overflow-y-auto\"\n            :name=\"name\"\n            :messages=\"messages\"\n            :status=\"chat.status\"\n            :error=\"chat.error\"\n            :main-color=\"agentInterface?.mainColor\"\n            :text-color=\"agentInterface?.textColor\"\n            :revised-answers=\"revisedAnswers\"\n            :actions=\"actions\"\n            :logo=\"agentInterface?.logo\"\n            :message-feedbacks=\"messageFeedbacks\"\n            :feedback-message-id=\"feedbackDialogMessage?.id\"\n            :feedback-loading=\"isFeedbackSubmitting\"\n            :feedback-submitted=\"isFeedbackSubmitted\"\n            :feedback-error=\"feedbackSubmitError\"\n            @feedback-submit=\"onFeedbackSubmit($event)\"\n            @feedback-close=\"feedbackDialogMessage = undefined\"\n            @regenerate=\"regenerate\"\n            @auto-retry=\"regenerate\"\n            @reset-chat=\"startNewChat\"\n            @show-info=\"emit('show-info', $event)\"\n            @revise=\"emit('revise', $event)\"\n            @upvote=\"onUpvote\"\n            @downvote=\"onDownvote\"\n            @feedback=\"onFeedback\">\n            <template #tool-showContactForm=\"{ part }\">\n                <PkToolShowContactForm\n                    :part\n                    :readonly=\"!baseUrl\"\n                    :submitted=\"isLeadSubmitted\"\n                    :loading=\"isLoadingSubmitLead\"\n                    :error=\"submitLeadError\"\n                    :privacy-policy-notice=\"agentInterface?.privacyPolicyNotice\"\n                    @submit=\"onLeadSubmit\" />\n            </template>\n            <template #tool-showSuggestedReply=\"{ part }\">\n                <PkToolShowSuggestedReply\n                    :part\n                    @select=\"\n                        ($event) => {\n                            input = $event\n                            storeHandleSubmit()\n                        }\n                    \" />\n            </template>\n            <template #tool-showSources=\"{ part }\">\n                <PkToolShowSources\n                    :part\n                    :on-expand-context=\"handleExpandSourceContext\"\n                    :on-download=\"handleDownloadSource\" />\n            </template>\n            <template #tool-showMultipleChoice=\"{ part }\">\n                <transition mode=\"out-in\">\n                    <PkToolShowMultipleChoice\n                        :part\n                        @select=\"\n                            addToolOutput({\n                                tool: 'showMultipleChoice',\n                                toolCallId: (part as any).toolCallId,\n                                output: $event,\n                            })\n                        \" />\n                </transition>\n            </template>\n            <template #tool-requestGeolocation=\"{ part }\">\n                <PkToolRequestGeolocation\n                    :part\n                    :reverse-geocode=\"\n                        (lat: number, lon: number) =>\n                            apiClient.reverseGeocode(lat, lon)\n                    \"\n                    @result=\"\n                        addToolOutput({\n                            tool: 'requestGeolocation',\n                            toolCallId: (part as any).toolCallId,\n                            output: $event,\n                        })\n                    \" />\n            </template>\n            <template #tool-showLocation=\"{ part }\">\n                <PkToolShowLocation\n                    :part\n                    :forward-geocode=\"\n                        (query: string, lang?: string) =>\n                            apiClient.forwardGeocode(query, lang)\n                    \" />\n            </template>\n        </PkChatbotMessages>\n        <!-- #endregion -->\n\n        <!-- #region input -->\n        <div\n            v-if=\"isConversationBlocked\"\n            class=\"p-md border-t border-surface-3 text-center text-12 text-danger-darken-2 bg-surface-danger\">\n            {{ $t('message.chatErrorConversationBlocked') }}\n        </div>\n        <PkChatbotInput\n            v-else\n            v-model=\"input\"\n            v-model:pending-attachments=\"pendingAttachments\"\n            :placeholder=\"inputMessagePlaceholder\"\n            :dismissable-notice=\"\n                dismissableNotice && chat.messages.length <= 1\n                    ? dismissableNotice\n                    : undefined\n            \"\n            :status=\"chat.status\"\n            :max-message-length=\"agentInterface?.maxMessageLength\"\n            :file-upload=\"agentFileUpload\"\n            @stop-generation=\"stopGeneration\"\n            @submit=\"storeHandleSubmit\"\n            @file-select=\"handleFileSelect\" />\n        <!-- #endregion -->\n        <Transition>\n            <div\n                v-if=\"isOverDropZone && agentFileUpload?.enabled\"\n                class=\"pk-chatbot-view-chat__drop-overlay\">\n                <VvIcon\n                    name=\"ri:upload-cloud-2-line\"\n                    class=\"pk-chatbot-view-chat__drop-overlay-icon\" />\n                <span>{{ $t('action.dropFile') }}</span>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-view-chat {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        min-height: 0;\n\n        &__drop-overlay {\n            position: absolute;\n            inset: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm)\n                var(--spacing-sm);\n            z-index: 1;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            gap: var(--spacing-xs);\n            background-color: color-mix(\n                in srgb,\n                var(--color-surface) 85%,\n                transparent\n            );\n            border-radius: var(--rounded-xl);\n            border: var(--spacing-2) dashed var(--color-surface-5);\n            pointer-events: none;\n            color: var(--color-word-3);\n\n            &-icon {\n                font-size: var(--spacing-32);\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { computed, useTemplateRef } from 'vue'\n    import { useDropZone } from '@vueuse/core'\n    import { storeToRefs } from 'pinia'\n    import PkChatbotMessages from './PkChatbotMessages.vue'\n    import PkChatbotInput from './PkChatbotInput.vue'\n    import PkToolShowMultipleChoice from './PkToolShowMultipleChoice.vue'\n    import PkToolShowContactForm from './PkToolShowContactForm.vue'\n    import PkToolShowSuggestedReply from './PkToolShowSuggestedReply.vue'\n    import PkToolShowSources from './PkToolShowSources.vue'\n    import PkToolRequestGeolocation from './PkToolRequestGeolocation.vue'\n    import PkToolShowLocation from './PkToolShowLocation.vue'\n    import { useLocalizedString } from '../composables/useLocalizedString'\n    import { useChatbotStore } from 'composables'\n    import type { UIChatMessage } from 'models'\n\n    const props = defineProps<{ agentId: string }>()\n\n    const emit = defineEmits<{\n        'show-info': [message: UIChatMessage]\n        revise: [message: UIChatMessage]\n    }>()\n\n    const store = useChatbotStore(props.agentId)\n\n    const {\n        name,\n        agentInterface,\n        agentFileUpload,\n        actions,\n        revisedAnswers,\n        messages,\n        chat,\n        messageFeedbacks,\n        feedbackDialogMessage,\n        isFeedbackSubmitting,\n        isFeedbackSubmitted,\n        feedbackSubmitError,\n        isLeadSubmitted,\n        isLoadingSubmitLead,\n        submitLeadError,\n        input,\n        inputMessagePlaceholder,\n        isConversationBlocked,\n        baseUrl,\n        pendingAttachments,\n        apiClient,\n    } = storeToRefs(store)\n\n    const {\n        handleSubmit: storeHandleSubmit,\n        stopGeneration,\n        regenerate,\n        onUpvote,\n        onDownvote,\n        onFeedback,\n        onFeedbackSubmit,\n        onLeadSubmit,\n        startNewChat,\n        addToolOutput,\n        handleFileSelect,\n    } = store\n\n    const dismissableNotice = useLocalizedString(\n        () => agentInterface.value?.dismissableNotice,\n    )\n\n    const chatViewEl = useTemplateRef<HTMLDivElement>('chatViewEl')\n\n    const handleExpandSourceContext = async (payload: {\n        documentId: string\n        chunkIndex: number\n    }) => {\n        const result = await apiClient.value.expandSourceContext(\n            props.agentId,\n            payload.documentId,\n            payload.chunkIndex,\n        )\n        return result.content\n    }\n\n    const handleDownloadSource = async (documentId: string) => {\n        const result = await apiClient.value.downloadSourceDocument(\n            props.agentId,\n            documentId,\n        )\n        window.open(result.downloadUrl, '_blank')\n    }\n\n    const handleFileDrop = (files: File[] | null) => {\n        if (!agentFileUpload.value?.enabled || !files) {\n            return\n        }\n        for (const file of files) {\n            handleFileSelect(file)\n        }\n    }\n\n    const { isOverDropZone } = useDropZone(chatViewEl, {\n        dataTypes: computed(\n            () => agentFileUpload.value?.allowedMimeTypes ?? [],\n        ),\n        onDrop: handleFileDrop,\n    })\n</script>\n\n<template>\n    <div\n        ref=\"chatViewEl\"\n        class=\"pk-chatbot-view-chat\"\n        :class=\"{\n            'pk-chatbot-view-chat--dragover':\n                isOverDropZone && agentFileUpload?.enabled,\n        }\">\n        <!-- #region messages -->\n        <PkChatbotMessages\n            class=\"flex flex-col flex-1 min-h-0 p-md overflow-y-auto\"\n            :name=\"name\"\n            :messages=\"messages\"\n            :status=\"chat.status\"\n            :error=\"chat.error\"\n            :main-color=\"agentInterface?.mainColor\"\n            :text-color=\"agentInterface?.textColor\"\n            :revised-answers=\"revisedAnswers\"\n            :actions=\"actions\"\n            :logo=\"agentInterface?.logo\"\n            :message-feedbacks=\"messageFeedbacks\"\n            :feedback-message-id=\"feedbackDialogMessage?.id\"\n            :feedback-loading=\"isFeedbackSubmitting\"\n            :feedback-submitted=\"isFeedbackSubmitted\"\n            :feedback-error=\"feedbackSubmitError\"\n            @feedback-submit=\"onFeedbackSubmit($event)\"\n            @feedback-close=\"feedbackDialogMessage = undefined\"\n            @regenerate=\"regenerate\"\n            @auto-retry=\"regenerate\"\n            @reset-chat=\"startNewChat\"\n            @show-info=\"emit('show-info', $event)\"\n            @revise=\"emit('revise', $event)\"\n            @upvote=\"onUpvote\"\n            @downvote=\"onDownvote\"\n            @feedback=\"onFeedback\">\n            <template #tool-showContactForm=\"{ part }\">\n                <PkToolShowContactForm\n                    :part\n                    :readonly=\"!baseUrl\"\n                    :submitted=\"isLeadSubmitted\"\n                    :loading=\"isLoadingSubmitLead\"\n                    :error=\"submitLeadError\"\n                    :privacy-policy-notice=\"agentInterface?.privacyPolicyNotice\"\n                    @submit=\"onLeadSubmit\" />\n            </template>\n            <template #tool-showSuggestedReply=\"{ part }\">\n                <PkToolShowSuggestedReply\n                    :part\n                    @select=\"\n                        ($event) => {\n                            input = $event\n                            storeHandleSubmit()\n                        }\n                    \" />\n            </template>\n            <template #tool-showSources=\"{ part }\">\n                <PkToolShowSources\n                    :part\n                    :on-expand-context=\"handleExpandSourceContext\"\n                    :on-download=\"handleDownloadSource\" />\n            </template>\n            <template #tool-showMultipleChoice=\"{ part }\">\n                <transition mode=\"out-in\">\n                    <PkToolShowMultipleChoice\n                        :part\n                        @select=\"\n                            addToolOutput({\n                                tool: 'showMultipleChoice',\n                                toolCallId: (part as any).toolCallId,\n                                output: $event,\n                            })\n                        \" />\n                </transition>\n            </template>\n            <template #tool-requestGeolocation=\"{ part }\">\n                <PkToolRequestGeolocation\n                    :part\n                    :reverse-geocode=\"\n                        (lat: number, lon: number) =>\n                            apiClient.reverseGeocode(lat, lon)\n                    \"\n                    @result=\"\n                        addToolOutput({\n                            tool: 'requestGeolocation',\n                            toolCallId: (part as any).toolCallId,\n                            output: $event,\n                        })\n                    \" />\n            </template>\n            <template #tool-showLocation=\"{ part }\">\n                <PkToolShowLocation\n                    :part\n                    :forward-geocode=\"\n                        (query: string, lang?: string) =>\n                            apiClient.forwardGeocode(query, lang)\n                    \" />\n            </template>\n        </PkChatbotMessages>\n        <!-- #endregion -->\n\n        <!-- #region input -->\n        <div\n            v-if=\"isConversationBlocked\"\n            class=\"p-md border-t border-surface-3 text-center text-12 text-danger-darken-2 bg-surface-danger\">\n            {{ $t('message.chatErrorConversationBlocked') }}\n        </div>\n        <PkChatbotInput\n            v-else\n            v-model=\"input\"\n            v-model:pending-attachments=\"pendingAttachments\"\n            :placeholder=\"inputMessagePlaceholder\"\n            :dismissable-notice=\"\n                dismissableNotice && chat.messages.length <= 1\n                    ? dismissableNotice\n                    : undefined\n            \"\n            :status=\"chat.status\"\n            :max-message-length=\"agentInterface?.maxMessageLength\"\n            :file-upload=\"agentFileUpload\"\n            @stop-generation=\"stopGeneration\"\n            @submit=\"storeHandleSubmit\"\n            @file-select=\"handleFileSelect\" />\n        <!-- #endregion -->\n        <Transition>\n            <div\n                v-if=\"isOverDropZone && agentFileUpload?.enabled\"\n                class=\"pk-chatbot-view-chat__drop-overlay\">\n                <VvIcon\n                    name=\"ri:upload-cloud-2-line\"\n                    class=\"pk-chatbot-view-chat__drop-overlay-icon\" />\n                <span>{{ $t('action.dropFile') }}</span>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-view-chat {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        min-height: 0;\n\n        &__drop-overlay {\n            position: absolute;\n            inset: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm)\n                var(--spacing-sm);\n            z-index: 1;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            gap: var(--spacing-xs);\n            background-color: color-mix(\n                in srgb,\n                var(--color-surface) 85%,\n                transparent\n            );\n            border-radius: var(--rounded-xl);\n            border: var(--spacing-2) dashed var(--color-surface-5);\n            pointer-events: none;\n            color: var(--color-word-3);\n\n            &-icon {\n                font-size: var(--spacing-32);\n            }\n        }\n    }\n</style>\n"],"mappings":"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"}

package/dist-vue/_chunks/PkChatbotViewConversations-DSQu6vY1.js

@@ -0,0 +1,163 @@
+import { m as e, s as t } from "./src-EtGd6cRz.js";
+import { t as n } from "./useChatbotStore-CJlkoNn7.js";
+import { t as r } from "./PkRelativeTime-WZ2aPcp_.js";
+import { Fragment as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, h as d, mergeProps as f, nextTick as p, normalizeClass as m, openBlock as h, ref as g, renderList as _, toDisplayString as v, unref as y, vModelText as ee, withCtx as b, withDirectives as te, withKeys as x, withModifiers as S } from "vue";
+import { VvButton as C, VvButtonGroup as w, VvDialog as T, VvDropdown as E, VvDropdownAction as D, VvIcon as O, VvInputText as k } from "@volverjs/ui-vue/components";
+import { useI18n as A } from "vue-i18n";
+import { storeToRefs as j } from "pinia";
+//#region ../../packages/composable/src/useDialog.ts
+var M = g(!1), N = g(), P = g(), F = g(), I = g(!1), L = g(), R = g(), z = () => {
+	let e = (e) => {
+		M.value = e;
+	}, t = () => {
+		N.value = void 0, P.value = void 0, F.value = void 0, I.value = void 0, L.value = void 0, R.value = void 0;
+	};
+	return {
+		PkGlobalDialog: u({
+			name: "PkGlobalDialog",
+			render: () => d(T, {
+				modelValue: M.value,
+				title: N.value,
+				transition: P.value,
+				size: F.value,
+				keepOpen: I.value,
+				role: L.value,
+				"onUpdate:modelValue": e,
+				onAfterLeave: t
+			}, R.value)
+		}),
+		openDialog: (e, t) => (N.value = e?.title, P.value = e?.transition, F.value = e?.size, I.value = e?.keepOpen ?? !1, L.value = e?.role, R.value = t, p(() => {
+			M.value = !0;
+		}), M),
+		isOpen: M
+	};
+}, B = () => {
+	let { openDialog: e } = z(), { t } = A({ useScope: "global" });
+	return { openDialogConfirm: ({ emitReject: n = !1, confirmLabel: r, cancelLabel: i, questionLabel: a, onlyConfirm: o = !1, passphrase: s, passphraseLabel: c, passphraseHint: l } = {}) => new Promise((u, f) => {
+		let p = g(), m = e({
+			role: "alertdialog",
+			size: "small",
+			keepOpen: !0
+		}, {
+			default: () => d("div", [d("div", { class: "mb-sm" }, a ?? t("message.confirm")), s ? d(k, {
+				modelValue: p.value,
+				"onUpdate:modelValue": (e) => {
+					p.value = e;
+				},
+				type: "text",
+				name: "passphrase",
+				class: "mb-0",
+				floating: !0,
+				label: c ?? t("label.passphrase"),
+				hintLabel: l ?? t("hint.passphrase", { passphrase: s })
+			}) : void 0]),
+			footer: () => d(w, () => {
+				let e = [];
+				return o || e.push(d(C, {
+					label: i ?? t("action.cancel"),
+					modifiers: "ghost",
+					onClick: () => {
+						n && f(), u(!1), m.value = !1;
+					}
+				})), e.push(d(C, {
+					label: r ?? t("action.proceed"),
+					disabled: s ? s !== p.value : !1,
+					onClick: () => {
+						u(!0), m.value = !1;
+					}
+				})), e;
+			})
+		});
+	}) };
+}, V = { class: "flex flex-col flex-1 min-h-0 overflow-y-auto p-md gap-sm relative" }, H = {
+	key: 0,
+	class: "flex justify-center p-lg text-word-3 text-sm"
+}, U = {
+	key: 1,
+	class: "flex flex-col min-h-0 gap-8 overflow-auto px-8 pb-8 light-scrollbar pb-64"
+}, W = ["onClick"], G = { class: "flex items-center gap-8" }, K = ["placeholder", "onKeydown"], q = { class: "font-bold truncate block flex-1" }, J = {
+	key: 0,
+	class: "text-12 text-word-4 line-clamp-2"
+}, Y = { class: "absolute bottom-0 left-0 right-0 flex justify-center px-16 pb-16 pt-32 bg-gradient-to-t" }, X = /* @__PURE__ */ u({
+	__name: "PkChatbotViewConversations",
+	props: { agentId: {} },
+	setup(u) {
+		let d = u, { t: w } = A({ useScope: "global" }), T = n(d.agentId), { conversations: k, localChatId: M } = j(T), { navigate: N, startNewChat: P, renameChatTitle: F, deleteChat: I } = T, L = g(null), R = g(""), z = g(), X = (e) => {
+			L.value || (M.value = e, N("chat"));
+		}, Z = (e) => M.value === e.id, Q = (n, r) => e(t(n.filter((e) => e.role === r).slice(-1)[0]) || ""), ne = (t) => {
+			L.value = t.id, R.value = e(t.title) || Q(t.messages, "assistant") || "", p(() => {
+				z.value?.[0] && (z.value?.[0]?.focus(), z.value?.[0]?.select());
+			});
+		}, $ = async (e) => {
+			let t = R.value.trim();
+			if (L.value = null, t && t.length <= 255) try {
+				await F(e, t);
+			} catch {}
+		}, re = () => {
+			L.value = null;
+		}, { openDialogConfirm: ie } = B(), ae = async (e) => {
+			try {
+				if (!await ie()) return;
+				await I(e);
+			} catch {}
+		};
+		return (t, n) => {
+			let u = C, d = O, p = D, g = E;
+			return h(), o("div", V, [y(k).length === 0 ? (h(), o("div", H, v(y(w)("message.noConversations")), 1)) : (h(), o("ul", U, [(h(!0), o(i, null, _(y(k), (t) => (h(), o("li", { key: t.id }, [s("button", {
+				type: "button",
+				class: m(["rounded-md border p-10 cursor-pointer block w-full transition-colors text-14 leading-relaxed border-b border-surface-3 hover:border-surface-5 hover:bg-surface-1 focus-within:border-word", { "bg-surface-2 border-surface-5": Z(t) }]),
+				onClick: (e) => X(t.id)
+			}, [s("div", G, [L.value === t.id ? (h(), o(i, { key: 0 }, [te(s("input", {
+				ref_for: !0,
+				ref_key: "renameInputEl",
+				ref: z,
+				"onUpdate:modelValue": n[0] ||= (e) => R.value = e,
+				class: "flex-1 placeholder:text-word-4 leading-none",
+				placeholder: y(w)("placeholder.insert"),
+				maxlength: 255,
+				onClick: n[1] ||= S(() => {}, ["stop"]),
+				onKeydown: [x(S((e) => $(t.id), ["prevent"]), ["enter"]), n[2] ||= x(S((e) => re(), ["prevent"]), ["esc"])]
+			}, null, 40, K), [[ee, R.value]]), l(u, {
+				icon: "ri:save-line",
+				label: y(w)("action.save"),
+				modifiers: "action-small",
+				onClick: S((e) => $(t.id), ["stop"])
+			}, null, 8, ["label", "onClick"])], 64)) : (h(), o(i, { key: 1 }, [
+				s("strong", q, v(y(e)(t.title) || Q(t.messages, "assistant")), 1),
+				l(r, {
+					class: "text-word-4 text-smaller shrink-0",
+					date: t.lastMessageAt
+				}, null, 8, ["date"]),
+				s("div", { onClick: n[3] ||= S(() => {}, ["stop"]) }, [l(g, f({ ref_for: !0 }, {
+					placement: "bottom-end",
+					modifiers: "menu",
+					flip: !0,
+					offset: 3
+				}), {
+					items: b(() => [l(p, { onClick: (e) => ne(t) }, {
+						default: b(() => [l(d, { name: "ri:pencil-line" }), c(" " + v(y(w)("action.renameChat")), 1)]),
+						_: 1
+					}, 8, ["onClick"]), l(p, { onClick: (e) => ae(t.id) }, {
+						default: b(() => [l(d, { name: "ri:delete-bin-line" }), c(" " + v(y(w)("action.delete")), 1)]),
+						_: 1
+					}, 8, ["onClick"])]),
+					default: b(() => [l(u, {
+						icon: "ri:more-2-fill",
+						title: y(w)("action.moreActions"),
+						modifiers: "action-quiet-small"
+					}, null, 8, ["title"])]),
+					_: 2
+				}, 1040)])
+			], 64))]), L.value === t.id ? a("", !0) : (h(), o("span", J, v(y(e)(t.summary) || Q(t.messages, "user")), 1))], 10, W)]))), 128))])), s("div", Y, [l(u, {
+				class: "text-14",
+				modifiers: "rounded",
+				label: y(w)("action.startNewChat"),
+				onClick: n[4] ||= S((e) => y(P)(), ["stop"])
+			}, null, 8, ["label"])])]);
+		};
+	}
+});
+//#endregion
+export { B as n, X as t };
+
+//# sourceMappingURL=PkChatbotViewConversations-DSQu6vY1.js.map