@8wave/ai-elements 0.119.0-beta.20 → 0.119.0-beta.26

package/dist-vue/PkChatbot.js

@@ -1 +1 @@
-export { t as default } from "./_chunks/PkChatbot-CM9ST43I.js";
+export { t as default } from "./_chunks/PkChatbot-536vsOfp.js";

package/dist-vue/PkChatbotMessages.js

@@ -1 +1 @@
-export { t as default } from "./_chunks/PkChatbotMessages-D9uf0NMI.js";
+export { t as default } from "./_chunks/PkChatbotMessages-CnI3e9wF.js";

package/dist-vue/PkChatbotViewChat.js

@@ -1 +1 @@
-export { t as default } from "./_chunks/PkChatbotViewChat-B_7IdZIz.js";
+export { t as default } from "./_chunks/PkChatbotViewChat-CVT6OUIv.js";

package/dist-vue/_chunks/{PkChatbot-CM9ST43I.js → PkChatbot-536vsOfp.js}

@@ -1,7 +1,7 @@
 import { n as e, t } from "./PkStreamingMarkdown-C55Fi0Pd.js";
 import { n } from "./useChatbotStore-rtl-oKqU.js";
 import { t as ee } from "./PkChatbotViewConversations-DHeFtAfN.js";
-import { t as te } from "./PkChatbotViewChat-B_7IdZIz.js";
+import { t as te } from "./PkChatbotViewChat-CVT6OUIv.js";
 import { t as r } from "./useShortUrlResolver-DI8ycJiO.js";
 import { t as ne } from "./PkChatbotViewFiles-CA20TBFY.js";
 import { t as i } from "./useLocalizedString-PfaKjIQY.js";
@@ -273,4 +273,4 @@ var Se = { class: "pk-chatbot__header-start" }, Ce = ["title"], we = { key: 1 },
 //#endregion
 export { k as t };
 
-//# sourceMappingURL=PkChatbot-CM9ST43I.js.map
+//# sourceMappingURL=PkChatbot-536vsOfp.js.map

package/dist-vue/_chunks/{PkChatbot-CM9ST43I.js.map → PkChatbot-536vsOfp.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkChatbot-CM9ST43I.js","names":["_useModel","__unplugin_components_0","__unplugin_components_1","__unplugin_components_2","__unplugin_components_3","__unplugin_components_4","__unplugin_components_5","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_createElementVNode","_unref","_Fragment","_createVNode","_mergeProps","_createBlock","PkAvatar","_createCommentVNode","_toDisplayString","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createTextVNode","PkChatbotViewChat","_createSlots","_renderList","PkChatbotViewConversations","PkChatbotViewFiles","PkChatbotViewProfile","PkStreamingMarkdown","_sfc_main","provideChatImagePolicy","PkChatbotViewConversations_default","PkChatbotViewChat_default","provideShortUrlResolver","PkChatbotViewFiles_default","useLocalizedString","resolveContrastColor","agentThemeStyle","PkAvatar_default","ChatbotProfileContextKey","PkChatbotViewProfile_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","PkChatbot_default","defineComponent","\"chatId\"","\"chatIdModifiers\"","__expose","__emit","slots","useSlots","$t","useI18n","props","__props","emit","chatId","useModel","store","useChatbotStore","hashes","storeToRefs","storeAgentId","toRef","profile","inject","canManageProfile","computed","canSignIn","watch","canManage","activeView","navigate","watchEffect","id","localChatId","chatError","error","parsedError","isFullscreen","isPanel","chatbotEl","useTemplateRef","chatbotWidth","useElementSize","isPhoneWidth","isTightWidth","isWideWidth","isReasoningAgent","showReasoningNotice","messages","message","useColorsForAgentHeader","showHeaderMenu","themeClass","isDark","mainColor","contrastColor","themeStyle","footerMessage","title","isReady","chat","activeMessage","newAgentId","newChatId","newView","_component_VvButton","VvButton","_component_VvIcon","VvIcon","_component_VvDropdownAction","VvDropdownAction","_component_VvDropdown","VvDropdown","_component_VvButtonGroup","VvButtonGroup","_component_VvAlert","VvAlert","openBlock","createElementBlock","normalizeClass","normalizeStyle","createCommentVNode","createElementVNode","unref","createBlock","Fragment","createVNode","mergeProps","_cache","toDisplayString","withCtx","renderSlot","_ctx","normalizeProps","guardReactiveProps","startNewChat","stopGeneration","createTextVNode","$event","createSlots","renderList","slotName","slotData","PkStreamingMarkdown_default"],"sources":["../../../../packages/components/src/chat/PkChatbot.vue","../../../../packages/components/src/chat/PkChatbot.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import {\n        computed,\n        inject,\n        toRef,\n        useTemplateRef,\n        watch,\n        watchEffect,\n        useSlots,\n    } from 'vue'\n    import { useElementSize } from '@vueuse/core'\n    import { storeToRefs } from 'pinia'\n    import { useI18n } from 'vue-i18n'\n    import type {\n        AgentInterface,\n        AgentModel,\n        AgentFileUpload,\n        AgentGatewayOptions,\n        AgentVoiceCapability,\n        ChatMessageActions,\n        RevisedAnswer,\n        UIChatMessage,\n        AgentTools,\n    } from 'models'\n    import {\n        useChatbotStore,\n        useLocalizedString,\n        provideShortUrlResolver,\n    } from 'composables'\n    import PkAvatar from './PkAvatar.vue'\n    import PkChatbotViewChat from './PkChatbotViewChat.vue'\n    import PkChatbotViewConversations from './PkChatbotViewConversations.vue'\n    import PkChatbotViewFiles from './PkChatbotViewFiles.vue'\n    import PkChatbotViewProfile from './PkChatbotViewProfile.vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import { ChatbotProfileContextKey } from './chatbotProfileContext'\n    import { provideChatImagePolicy } from './chatImagePolicy'\n    import { agentThemeStyle, resolveContrastColor } from './utils'\n\n    // Captured in script setup to avoid TS7022 circular inference in template\n    const slots = useSlots()\n\n    const { t: $t } = useI18n({\n        useScope: 'global',\n    })\n\n    const props = defineProps<{\n        baseUrl: string\n        basePath?: string\n        agentId: string\n        agentType?: 'reasoning' | 'chat'\n        userId?: string\n        name?: string\n        model?: string\n        agentModel?: AgentModel\n        agentTools?: AgentTools\n        agentInterface?: AgentInterface\n        actions?: ChatMessageActions[]\n        revisedAnswers?: RevisedAnswer[]\n        headers?: Record<string, string>\n        systemTheme?: 'light' | 'dark'\n        agentFileUpload?: AgentFileUpload\n        /** Voice configuration from the agent settings: enables the talk button. */\n        voice?: AgentVoiceCapability\n        fallbackModels?: string[]\n        gatewayOptions?: Partial<AgentGatewayOptions>\n        externalContext?: Record<string, unknown>\n        /** Layout modifier: `widget` (default) keeps the contained layout with header, `fullscreen` removes header/background for full-page usage (the page provides the chrome), `panel` keeps the header but slims it down for a docked side panel (the host provides background and border) */\n        modifier?: 'widget' | 'fullscreen' | 'panel'\n        /** Display name of the current user, used for the `{name}` placeholder in the fullscreen greeting */\n        userName?: string\n        /** Show the \"Files in this chat\" menu for hosts that don't provide the\n         * profile context but whose user is authenticated (e.g. the backoffice\n         * playground). The widget host relies on `canManageProfile` instead. */\n        userFilesEnabled?: boolean\n    }>()\n    const emit = defineEmits<{\n        'message-update': [message: UIChatMessage]\n        'show-info': [message: UIChatMessage]\n        revise: [message: UIChatMessage]\n        error: [error: { type: string; title: string; status: number }]\n    }>()\n\n    const chatId = defineModel<string | undefined>('chatId', {\n        type: String,\n        default: undefined,\n    })\n\n    const store = useChatbotStore(props.agentId)\n\n    // Resolve backend short-urls (`/api/r/<hash>`) back to their real target\n    // for display in tool components. Batched + cached across the chat tree.\n    provideShortUrlResolver((hashes) =>\n        store.apiClient.resolveShortUrls(hashes),\n    )\n\n    const { messages, chat, localChatId, activeView, chatError, isDark } =\n        storeToRefs(store)\n\n    // Ref to store.agentId for watchers (avoids duplicate-key with agentId prop)\n    const storeAgentId = toRef(store, 'agentId')\n\n    const { startNewChat, stopGeneration, regenerate, navigate, sendMessage } =\n        store\n\n    // Images in the answers and the tool cards load by themselves only from\n    // the backend this chat talks to and from the hosts the agent lists.\n    provideChatImagePolicy(\n        () => props.agentInterface?.imageHosts,\n        () => props.baseUrl,\n    )\n\n    // Optional profile-management context provided by the host widget.\n    // Present only for authenticated, non-anonymous sessions.\n    const profile = inject(ChatbotProfileContextKey, undefined)\n    const canManageProfile = computed(\n        () => profile?.canManageProfile.value ?? false,\n    )\n    // Anonymous users get a \"Sign in\" entry instead of the profile one,\n    // provided the host filled the `view-auth` slot and the agent has at\n    // least one auth method enabled.\n    const canSignIn = computed(\n        () =>\n            !canManageProfile.value &&\n            (profile?.canSignIn?.value ?? false) &&\n            slots['view-auth'] !== undefined,\n    )\n\n    // Once the sign-in completes (the session becomes non-anonymous) leave\n    // the auth view and return to the conversation.\n    watch(canManageProfile, (canManage) => {\n        if (canManage && activeView.value === 'auth') {\n            navigate('chat')\n        }\n    })\n\n    // Sync props → store reactively\n    watchEffect(() => {\n        store.baseUrl = props.baseUrl\n        store.basePath = props.basePath\n        store.name = props.name\n        store.agentType = props.agentType\n        store.userId = props.userId\n        store.agentInterface = props.agentInterface\n        store.agentModel = props.agentModel\n        store.agentTools = props.agentTools\n        store.headers = props.headers\n        store.revisedAnswers = props.revisedAnswers\n        store.model = props.model\n        store.actionsInput = props.actions\n        store.agentFileUpload = props.agentFileUpload\n        store.agentVoice = props.voice\n        store.fallbackModels = props.fallbackModels\n        store.gatewayOptions = props.gatewayOptions\n        store.externalContext = props.externalContext\n        store.systemTheme = props.systemTheme\n        store.hideWelcomeMessage = props.modifier === 'fullscreen'\n    })\n\n    // Sync chatId v-model ↔ store (bidirectional)\n    // Parent → store: if the parent provides an external chatId, push it into\n    // the store so the Chat instance picks it up.\n    watch(\n        () => chatId.value,\n        (id) => {\n            if (id && id !== store.localChatId) {\n                store.localChatId = id\n            }\n        },\n        { immediate: true },\n    )\n    // Store → parent: keep the v-model in sync whenever the store changes\n    // the chatId internally (e.g. startNewChat).\n    watch(localChatId, (id) => {\n        chatId.value = id\n    })\n\n    // Emit structured errors from chat to the parent component\n    watch(chatError, (error) => {\n        if (!error) {\n            return\n        }\n        try {\n            const parsedError = JSON.parse(error.message) as {\n                type: string\n                title: string\n                status: number\n            }\n            emit('error', parsedError)\n        } catch {\n            // ignore non-JSON errors\n        }\n    })\n\n    // ui\n    const isFullscreen = computed(() => props.modifier === 'fullscreen')\n    const isPanel = computed(() => props.modifier === 'panel')\n\n    /**\n     * How much room the chat has, measured on the chat and not on the window.\n     *\n     * The same chat renders in a phone page, in a 408px widget, in a docked\n     * panel and in a preview frame that the side panels squeeze to phone width\n     * on a desktop screen, so the viewport says nothing about the space the\n     * layout actually has. A CSS container query would read the same number\n     * with no JavaScript, but `container-type` makes the element a containing\n     * block for `position: fixed` descendants on every engine except Chrome\n     * 129 and later, which displaces every dropdown in the chat: see\n     * docs/agents/gotchas.md, \"The chat measures its own width, and not with a\n     * container query\".\n     *\n     * The thresholds carry the modifiers, so the CSS stays declarative:\n     * `--phone` has as much room as a phone page, `--tight` is too tight for\n     * the agent chip beside the field, `--wide` has room for the outline rail\n     * beside the reading column. Before the first measurement the width is 0\n     * and no modifier applies, which is the roomy layout the base CSS writes.\n     */\n    const chatbotEl = useTemplateRef<HTMLDivElement>('chatbotEl')\n    const { width: chatbotWidth } = useElementSize(chatbotEl)\n    const isPhoneWidth = computed(\n        () => chatbotWidth.value > 0 && chatbotWidth.value < 576,\n    )\n    const isTightWidth = computed(\n        () => chatbotWidth.value > 0 && chatbotWidth.value < 640,\n    )\n    const isWideWidth = computed(() => chatbotWidth.value >= 848)\n    const isReasoningAgent = computed(() => props.agentType === 'reasoning')\n    // The notice says how a reasoning agent reads a message: it stands before\n    // the first one, then leaves the room to the answers (pinned, it took a\n    // third of a phone screen in the reasoning playground)\n    const showReasoningNotice = computed(\n        () =>\n            isReasoningAgent.value &&\n            !messages.value.some((message) => message.role === 'user'),\n    )\n    const useColorsForAgentHeader = computed(\n        () => props.agentInterface?.useColorsForAgentHeader,\n    )\n    // Panel mode promotes the everyday actions (new chat, history) from the\n    // dropdown to direct header buttons: the dropdown then only remains for\n    // the secondary entries (files, profile, sign-in) and disappears when\n    // none of them applies.\n    const showHeaderMenu = computed(\n        () =>\n            !isPanel.value ||\n            canManageProfile.value ||\n            canSignIn.value ||\n            (!!props.userFilesEnabled && !!localChatId.value),\n    )\n    const themeClass = computed(() => [\n        'theme',\n        `theme--${isDark.value ? 'dark' : 'light'}`,\n    ])\n    const mainColor = computed(() => props.agentInterface?.mainColor)\n    const contrastColor = computed(() =>\n        resolveContrastColor(props.agentInterface?.textColor, mainColor.value),\n    )\n    const themeStyle = computed(() =>\n        agentThemeStyle(mainColor.value, contrastColor.value),\n    )\n    const footerMessage = useLocalizedString(\n        () => props.agentInterface?.footerMessage,\n    )\n    const title = computed(() => {\n        if (activeView.value === 'conversations') {\n            return $t('label.conversations')\n        }\n        if (activeView.value === 'profile') {\n            return $t('label.profile')\n        }\n        if (activeView.value === 'auth') {\n            return $t('label.authentication')\n        }\n        if (activeView.value === 'files') {\n            return $t('userFiles.chatFilesTitle')\n        }\n        return props.name\n    })\n\n    // state\n    const isReady = computed(() => chat.value.status === 'ready')\n    const activeMessage = computed(() => {\n        return messages.value?.[messages.value.length - 1]\n    })\n\n    // expose\n    defineExpose({\n        startNewChat,\n        regenerate,\n        stopGeneration,\n        sendMessage,\n    })\n\n    // load chat, conversations and feedbacks on agent or chat change\n    watch(\n        [storeAgentId, localChatId],\n        async ([newAgentId, newChatId]) => {\n            await store.initialize(newAgentId, newChatId)\n        },\n        {\n            immediate: true,\n        },\n    )\n    // load conversations when navigating to conversations view\n    watch(activeView, (newView) => {\n        if (newView === 'conversations') {\n            store.loadConversations(storeAgentId.value)\n        } else if (newView === 'files') {\n            store.loadChatFiles()\n        }\n    })\n    // emit message updates for up-to-date context in parent components\n    watch(\n        activeMessage,\n        (message) => {\n            if (message) {\n                emit('message-update', message)\n            }\n        },\n        {\n            deep: true,\n            immediate: true,\n        },\n    )\n</script>\n\n<template>\n    <div\n        ref=\"chatbotEl\"\n        class=\"pk-chatbot\"\n        :class=\"[\n            themeClass,\n            {\n                'pk-chatbot--fullscreen': isFullscreen,\n                'pk-chatbot--panel': isPanel,\n                'pk-chatbot--phone': isPhoneWidth,\n                'pk-chatbot--tight': isTightWidth,\n                'pk-chatbot--wide': isWideWidth,\n            },\n        ]\"\n        :style=\"themeStyle\">\n        <!-- #region title -->\n        <div\n            v-if=\"!isFullscreen\"\n            class=\"pk-chatbot__header\"\n            :style=\"\n                useColorsForAgentHeader\n                    ? {\n                          backgroundColor: mainColor,\n                      }\n                    : undefined\n            \">\n            <div class=\"pk-chatbot__header-start\">\n                <template v-if=\"activeView !== 'chat'\">\n                    <VvButton\n                        v-bind=\"{\n                            modifiers: useColorsForAgentHeader\n                                ? `action-quiet-${contrastColor}`\n                                : 'action-quiet',\n                            icon: 'ri:arrow-left-s-line',\n                            title: $t('action.goBack'),\n                        }\"\n                        @click=\"navigate('chat')\" />\n                    <VvIcon\n                        :name=\"\n                            activeView === 'conversations'\n                                ? 'ri:history-line'\n                                : activeView === 'files'\n                                  ? 'ri:attachment-2'\n                                  : 'ri:user-line'\n                        \"\n                        class=\"pk-chatbot__nav-icon\"\n                        :style=\"\n                            useColorsForAgentHeader\n                                ? {\n                                      color: contrastColor,\n                                  }\n                                : undefined\n                        \" />\n                </template>\n                <!-- Panel mode: no avatar, the docked panel identifies the\n                     agent with the title alone -->\n                <PkAvatar\n                    v-else-if=\"!isPanel\"\n                    modifiers=\"surface ring shrink-0\"\n                    class=\"pk-chatbot__avatar\"\n                    :name\n                    :img-src=\"agentInterface?.logo\" />\n                <strong\n                    class=\"pk-chatbot__title\"\n                    :title=\"title\"\n                    :style=\"\n                        useColorsForAgentHeader\n                            ? {\n                                  color: contrastColor,\n                              }\n                            : undefined\n                    \">\n                    {{ title }}\n                </strong>\n            </div>\n            <VvButtonGroup class=\"pk-chatbot__header-end\" modifiers=\"compact\">\n                <slot\n                    name=\"header-actions\"\n                    v-bind=\"{\n                        mainColor,\n                        useColorsForAgentHeader,\n                        contrastColor,\n                        startNewChat,\n                        stopGeneration,\n                    }\" />\n                <template v-if=\"isPanel\">\n                    <VvButton\n                        :modifiers=\"\n                            useColorsForAgentHeader\n                                ? `action-quiet-${contrastColor}`\n                                : 'action-quiet'\n                        \"\n                        icon=\"ri:edit-box-line\"\n                        :disabled=\"!isReady\"\n                        :title=\"$t('action.startNewChat')\"\n                        @click=\"startNewChat()\" />\n                    <VvButton\n                        v-if=\"!isReasoningAgent\"\n                        :modifiers=\"\n                            useColorsForAgentHeader\n                                ? `action-quiet-${contrastColor}`\n                                : 'action-quiet'\n                        \"\n                        icon=\"ri:history-line\"\n                        :disabled=\"!isReady\"\n                        :title=\"$t('action.viewRecentChats')\"\n                        @click=\"navigate('conversations')\" />\n                </template>\n                <VvDropdown\n                    v-if=\"showHeaderMenu\"\n                    v-bind=\"{\n                        placement: 'bottom-end',\n                        modifiers: 'menu',\n                        flip: true,\n                        offset: 3,\n                        strategy: 'fixed',\n                    }\">\n                    <VvButton\n                        v-bind=\"{\n                            modifiers: useColorsForAgentHeader\n                                ? `action-quiet-${contrastColor}`\n                                : 'action-quiet',\n                            icon: 'ri:more-2-fill',\n                            disabled: !isReady,\n                            title: $t('action.moreActions'),\n                        }\" />\n                    <template #items>\n                        <VvDropdownAction\n                            v-if=\"!isPanel\"\n                            @click=\"startNewChat()\">\n                            <VvIcon name=\"ri:edit-box-line\" />\n                            {{ $t('action.startNewChat') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-if=\"!isReasoningAgent && !isPanel\"\n                            @click=\"navigate('conversations')\">\n                            <VvIcon name=\"ri:history-line\" />\n                            {{ $t('action.viewRecentChats') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-if=\"\n                                (canManageProfile || userFilesEnabled) &&\n                                localChatId\n                            \"\n                            @click=\"navigate('files')\">\n                            <VvIcon name=\"ri:attachment-2\" />\n                            {{ $t('userFiles.chatFilesTitle') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-if=\"canManageProfile\"\n                            @click=\"navigate('profile')\">\n                            <VvIcon name=\"ri:user-line\" />\n                            {{ $t('label.profile') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-else-if=\"canSignIn\"\n                            @click=\"navigate('auth')\">\n                            <VvIcon name=\"ri:account-circle-line\" />\n                            {{ $t('action.signIn') }}\n                        </VvDropdownAction>\n                    </template>\n                </VvDropdown>\n                <slot\n                    name=\"actions\"\n                    v-bind=\"{\n                        mainColor,\n                        useColorsForAgentHeader,\n                        contrastColor,\n                        startNewChat,\n                        stopGeneration,\n                    }\" />\n            </VvButtonGroup>\n        </div>\n        <!-- #endregion -->\n\n        <div v-if=\"showReasoningNotice\">\n            <div class=\"pk-chatbot__warning-body\">\n                <VvAlert modifiers=\"callout\">\n                    <div class=\"pk-chatbot__warning-header\">\n                        <VvIcon\n                            name=\"ri:alert-line\"\n                            class=\"pk-chatbot__warning-icon\" />\n                        <strong class=\"pk-chatbot__warning-title\">\n                            {{ $t('message.warning') }}\n                        </strong>\n                    </div>\n                    <p class=\"pk-chatbot__warning-text\">\n                        {{ $t('message.reasoningAgent') }}\n                    </p>\n                </VvAlert>\n            </div>\n        </div>\n\n        <!-- #region views -->\n        <PkChatbotViewChat\n            v-if=\"activeView === 'chat'\"\n            :agent-id\n            :modifier\n            :user-name\n            @show-info=\"emit('show-info', $event)\"\n            @revise=\"emit('revise', $event)\">\n            <template\n                v-for=\"slotName in Object.keys(slots)\"\n                #[slotName]=\"slotData\"\n                ><slot :name=\"slotName\" v-bind=\"slotData\"\n            /></template>\n        </PkChatbotViewChat>\n        <PkChatbotViewConversations\n            v-else-if=\"activeView === 'conversations'\"\n            :agent-id>\n            <template\n                v-for=\"slotName in Object.keys(slots)\"\n                #[slotName]=\"slotData\"\n                ><slot :name=\"slotName\" v-bind=\"slotData\"\n            /></template>\n        </PkChatbotViewConversations>\n        <PkChatbotViewFiles v-else-if=\"activeView === 'files'\" :agent-id />\n        <div\n            v-else-if=\"activeView === 'auth'\"\n            class=\"pk-chatbot__view-auth flex-1 min-h-0 overflow-y-auto\">\n            <!-- Sign-in form provided by the host widget (owns the auth client) -->\n            <slot name=\"view-auth\" />\n        </div>\n        <PkChatbotViewProfile v-else :agent-id>\n            <template\n                v-for=\"slotName in Object.keys(slots)\"\n                #[slotName]=\"slotData\"\n                ><slot :name=\"slotName\" v-bind=\"slotData\"\n            /></template>\n        </PkChatbotViewProfile>\n        <!-- #endregion -->\n\n        <!-- #region footer -->\n        <div v-if=\"footerMessage\" class=\"pk-chatbot__footer\">\n            <PkStreamingMarkdown :markdown=\"footerMessage\" class=\"wysiwyg\" />\n        </div>\n        <!-- #endregion -->\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        height: 100%;\n        background-color: var(--color-surface);\n\n        &__header {\n            position: sticky;\n            top: 0;\n            z-index: 1;\n            display: flex;\n            justify-content: space-between;\n            gap: var(--spacing-14);\n            background-color: var(--color-surface-1);\n            padding: var(--spacing-14);\n            border-bottom: 1px solid var(--color-surface-3);\n        }\n\n        &__header-start {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-sm);\n            min-width: 0;\n        }\n\n        &__nav-icon {\n            font-size: var(--text-18);\n        }\n\n        &__avatar {\n            width: var(--spacing-24);\n            height: var(--spacing-24);\n        }\n\n        &__title {\n            font-size: var(--text-16);\n            font-weight: var(--font-semibold);\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        &__header-end {\n            flex-shrink: 0;\n        }\n\n        &__warning-body {\n            padding: var(--spacing-md);\n            border-bottom: 1px solid var(--color-surface-3);\n        }\n\n        &__warning-header {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-4);\n            margin-bottom: var(--spacing-4);\n        }\n\n        &__warning-icon {\n            width: var(--spacing-16);\n            height: var(--spacing-16);\n        }\n\n        &__warning-title {\n            font-weight: 600;\n            font-size: var(--text-14);\n        }\n\n        &__warning-text {\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n        }\n\n        &__footer {\n            padding: var(--spacing-md);\n            border-top: 1px solid var(--color-surface-3);\n            text-align: center;\n            font-size: var(--text-12);\n            color: var(--color-word-2);\n        }\n\n        // Modifier: fullscreen — layout full-page (Gemini-style): nessun\n        // header interno, sfondo trasparente, input pill centrato.\n        // Il chrome (sidebar, navigazione) è gestito dalla pagina ospite.\n        &--fullscreen {\n            // The dock, 60px. Declared rather than taken from the agent chip,\n            // which the tight layout hides: the pill fell to 54px there and\n            // the call bar that takes its place stayed at 60. There is no 60\n            // in the spacing scale and a raw `60px` would stop following the\n            // root font size, which the labels inside do follow.\n            --pk-chat-fullscreen-dock-height: calc(\n                var(--spacing-56) + var(--spacing-4)\n            );\n            // The pill, the notice that tucks into its top corners and the\n            // call bar all round their ends on half of it.\n            --pk-chat-dock-radius: calc(\n                var(--pk-chat-fullscreen-dock-height) / 2\n            );\n\n            background-color: transparent;\n\n            .pk-chatbot__footer {\n                border-top: none;\n                padding: 0 var(--spacing-md) var(--spacing-sm) var(--spacing-md);\n            }\n\n            // Reading column aligned with the input (Gemini-style). The\n            // constraint lives on the inner wrapper so the scroll container\n            // spans the page and the scrollbar sits at its edge.\n            .pk-chatbot-messages {\n                // Symmetric gutters: a visible scrollbar would otherwise\n                // shrink the content box on one side only, shifting the\n                // column off the input axis\n                scrollbar-gutter: stable both-edges;\n                // Dissolve the content at both edges (works on any page\n                // background, dots included — a surface-colored fade band\n                // would cut through the pattern instead)\n                mask-image: linear-gradient(\n                    to bottom,\n                    transparent 0,\n                    #000 var(--spacing-40),\n                    #000 calc(100% - var(--spacing-40)),\n                    transparent 100%\n                );\n                // Resting clearance so the first/last lines sit inside the\n                // fully opaque zone\n                padding-block: var(--spacing-48);\n            }\n\n            .pk-chatbot-messages__wrapper {\n                width: 100%;\n                max-width: 768px;\n                margin-inline: auto;\n            }\n\n            // Outline rail: wide chats only, measured on the chat and not on\n            // the viewport, so a preview frame squeezed by side panels loses\n            // it like a phone does. The rail sits at the edge of the scroll\n            // area beside the reading column: below the `--wide` threshold\n            // (768px column plus a 40px rail on each side) it would cover the\n            // messages instead.\n            .pk-chatbot-messages__outline {\n                display: none;\n            }\n\n            &.pk-chatbot--wide .pk-chatbot-messages__outline {\n                display: block;\n            }\n\n            .pk-chatbot-file-preview {\n                background-color: var(--color-surface);\n            }\n\n            .pk-chatbot-input__notice {\n                background-color: var(--color-surface);\n                border-inline: 1px solid var(--color-surface-3);\n                border-top: 1px solid var(--color-surface-2);\n                padding: var(--spacing-10) var(--spacing-16);\n\n                // As deep as the pill's corners, or the page shows through\n                // where their curve leaves the side\n                &::after {\n                    background-color: var(--color-surface);\n                    border-inline: 1px solid var(--color-surface-2);\n                    bottom: calc(-1 * var(--pk-chat-dock-radius));\n                    height: var(--pk-chat-dock-radius);\n                    left: -1px;\n                    right: -1px;\n                }\n            }\n\n            .pk-chatbot-input {\n                width: calc(100% - var(--spacing-sm) * 2);\n                max-width: 768px;\n                margin-inline: auto;\n\n                &__form {\n                    // True semicircles at rest, concentric with the send\n                    // button, whose center sits 30px in. Not `rounded-full`:\n                    // once Shift+Enter grows the field the ends would swell\n                    // with it and cut into the first and last line.\n                    border-radius: var(--pk-chat-dock-radius);\n                    min-height: var(--pk-chat-fullscreen-dock-height);\n                    padding: var(--spacing-12) var(--spacing-16);\n                    background-color: var(--color-surface-1);\n                    border-color: var(--color-surface-2);\n                    box-shadow: none;\n                    transition:\n                        border-color var(--duration-200) var(--ease-in-out),\n                        box-shadow var(--duration-200) var(--ease-in-out);\n\n                    &:has(:focus-within) {\n                        border-color: var(--color-surface-4);\n                        box-shadow: var(--shadow-sm);\n                    }\n\n                    @media (prefers-reduced-motion: reduce) {\n                        transition: none;\n                    }\n                }\n\n                &__textarea {\n                    background-color: transparent;\n                }\n            }\n\n            // A live call takes the place of the input, so it takes its shape,\n            // its column and its height: full-bleed here would break the\n            // reading axis, and a different height would make the dock jump\n            // the moment the call starts.\n            .pk-voice-session {\n                --pk-chat-dock-height: var(--pk-chat-fullscreen-dock-height);\n                --pk-voice-orb-size: var(--spacing-40);\n                --pk-voice-orb-bars-height: var(--spacing-20);\n                --pk-voice-session-surface: var(--color-surface-1);\n                width: calc(100% - var(--spacing-sm) * 2);\n                max-width: 768px;\n                margin-inline: auto;\n                padding-inline: var(--spacing-16);\n                border-color: var(--color-surface-2);\n                border-radius: var(--pk-chat-dock-radius);\n                box-shadow: none;\n\n                &__timer {\n                    font-size: var(--text-14);\n                }\n            }\n        }\n\n        // Modifier: panel — compact chrome for a docked side panel: the host\n        // container owns background and border, the header slims down and\n        // drops its own surface so the chat blends into the panel.\n        &--panel {\n            background-color: transparent;\n\n            .pk-chatbot__header {\n                background-color: transparent;\n\n                // Fixed height so the panel header lines up with the host's\n                // own chrome. Custom properties inherit through the shadow\n                // root: an embedding host can override it to match its\n                // header (the default matches the platform header, 50px).\n                height: var(--pk-chatbot-panel-header-height, 50px);\n                align-items: center;\n                padding-block: 0;\n                padding-inline: var(--spacing-10);\n                border-bottom: 1px solid var(--color-surface-3);\n            }\n\n            .pk-chatbot__title {\n                font-size: var(--text-14);\n            }\n\n            .pk-chatbot__footer {\n                border-top: none;\n                padding: var(--spacing-6) var(--spacing-md);\n            }\n        }\n\n        // A chat given a whole page without the fullscreen layout (the page\n        // an iframe embeds, a widget its host lets fill the screen) keeps the\n        // reading column of the fullscreen one: at 1440px an answer ran\n        // 1408px wide, some two hundred characters a line. Measured on the\n        // chat, like `--wide` itself, so a narrow frame is left alone.\n        &--wide:not(.pk-chatbot--fullscreen) {\n            .pk-chatbot-messages__wrapper,\n            .pk-chatbot-input {\n                width: 100%;\n                max-width: 768px;\n                margin-inline: auto;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import {\n        computed,\n        inject,\n        toRef,\n        useTemplateRef,\n        watch,\n        watchEffect,\n        useSlots,\n    } from 'vue'\n    import { useElementSize } from '@vueuse/core'\n    import { storeToRefs } from 'pinia'\n    import { useI18n } from 'vue-i18n'\n    import type {\n        AgentInterface,\n        AgentModel,\n        AgentFileUpload,\n        AgentGatewayOptions,\n        AgentVoiceCapability,\n        ChatMessageActions,\n        RevisedAnswer,\n        UIChatMessage,\n        AgentTools,\n    } from 'models'\n    import {\n        useChatbotStore,\n        useLocalizedString,\n        provideShortUrlResolver,\n    } from 'composables'\n    import PkAvatar from './PkAvatar.vue'\n    import PkChatbotViewChat from './PkChatbotViewChat.vue'\n    import PkChatbotViewConversations from './PkChatbotViewConversations.vue'\n    import PkChatbotViewFiles from './PkChatbotViewFiles.vue'\n    import PkChatbotViewProfile from './PkChatbotViewProfile.vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import { ChatbotProfileContextKey } from './chatbotProfileContext'\n    import { provideChatImagePolicy } from './chatImagePolicy'\n    import { agentThemeStyle, resolveContrastColor } from './utils'\n\n    // Captured in script setup to avoid TS7022 circular inference in template\n    const slots = useSlots()\n\n    const { t: $t } = useI18n({\n        useScope: 'global',\n    })\n\n    const props = defineProps<{\n        baseUrl: string\n        basePath?: string\n        agentId: string\n        agentType?: 'reasoning' | 'chat'\n        userId?: string\n        name?: string\n        model?: string\n        agentModel?: AgentModel\n        agentTools?: AgentTools\n        agentInterface?: AgentInterface\n        actions?: ChatMessageActions[]\n        revisedAnswers?: RevisedAnswer[]\n        headers?: Record<string, string>\n        systemTheme?: 'light' | 'dark'\n        agentFileUpload?: AgentFileUpload\n        /** Voice configuration from the agent settings: enables the talk button. */\n        voice?: AgentVoiceCapability\n        fallbackModels?: string[]\n        gatewayOptions?: Partial<AgentGatewayOptions>\n        externalContext?: Record<string, unknown>\n        /** Layout modifier: `widget` (default) keeps the contained layout with header, `fullscreen` removes header/background for full-page usage (the page provides the chrome), `panel` keeps the header but slims it down for a docked side panel (the host provides background and border) */\n        modifier?: 'widget' | 'fullscreen' | 'panel'\n        /** Display name of the current user, used for the `{name}` placeholder in the fullscreen greeting */\n        userName?: string\n        /** Show the \"Files in this chat\" menu for hosts that don't provide the\n         * profile context but whose user is authenticated (e.g. the backoffice\n         * playground). The widget host relies on `canManageProfile` instead. */\n        userFilesEnabled?: boolean\n    }>()\n    const emit = defineEmits<{\n        'message-update': [message: UIChatMessage]\n        'show-info': [message: UIChatMessage]\n        revise: [message: UIChatMessage]\n        error: [error: { type: string; title: string; status: number }]\n    }>()\n\n    const chatId = defineModel<string | undefined>('chatId', {\n        type: String,\n        default: undefined,\n    })\n\n    const store = useChatbotStore(props.agentId)\n\n    // Resolve backend short-urls (`/api/r/<hash>`) back to their real target\n    // for display in tool components. Batched + cached across the chat tree.\n    provideShortUrlResolver((hashes) =>\n        store.apiClient.resolveShortUrls(hashes),\n    )\n\n    const { messages, chat, localChatId, activeView, chatError, isDark } =\n        storeToRefs(store)\n\n    // Ref to store.agentId for watchers (avoids duplicate-key with agentId prop)\n    const storeAgentId = toRef(store, 'agentId')\n\n    const { startNewChat, stopGeneration, regenerate, navigate, sendMessage } =\n        store\n\n    // Images in the answers and the tool cards load by themselves only from\n    // the backend this chat talks to and from the hosts the agent lists.\n    provideChatImagePolicy(\n        () => props.agentInterface?.imageHosts,\n        () => props.baseUrl,\n    )\n\n    // Optional profile-management context provided by the host widget.\n    // Present only for authenticated, non-anonymous sessions.\n    const profile = inject(ChatbotProfileContextKey, undefined)\n    const canManageProfile = computed(\n        () => profile?.canManageProfile.value ?? false,\n    )\n    // Anonymous users get a \"Sign in\" entry instead of the profile one,\n    // provided the host filled the `view-auth` slot and the agent has at\n    // least one auth method enabled.\n    const canSignIn = computed(\n        () =>\n            !canManageProfile.value &&\n            (profile?.canSignIn?.value ?? false) &&\n            slots['view-auth'] !== undefined,\n    )\n\n    // Once the sign-in completes (the session becomes non-anonymous) leave\n    // the auth view and return to the conversation.\n    watch(canManageProfile, (canManage) => {\n        if (canManage && activeView.value === 'auth') {\n            navigate('chat')\n        }\n    })\n\n    // Sync props → store reactively\n    watchEffect(() => {\n        store.baseUrl = props.baseUrl\n        store.basePath = props.basePath\n        store.name = props.name\n        store.agentType = props.agentType\n        store.userId = props.userId\n        store.agentInterface = props.agentInterface\n        store.agentModel = props.agentModel\n        store.agentTools = props.agentTools\n        store.headers = props.headers\n        store.revisedAnswers = props.revisedAnswers\n        store.model = props.model\n        store.actionsInput = props.actions\n        store.agentFileUpload = props.agentFileUpload\n        store.agentVoice = props.voice\n        store.fallbackModels = props.fallbackModels\n        store.gatewayOptions = props.gatewayOptions\n        store.externalContext = props.externalContext\n        store.systemTheme = props.systemTheme\n        store.hideWelcomeMessage = props.modifier === 'fullscreen'\n    })\n\n    // Sync chatId v-model ↔ store (bidirectional)\n    // Parent → store: if the parent provides an external chatId, push it into\n    // the store so the Chat instance picks it up.\n    watch(\n        () => chatId.value,\n        (id) => {\n            if (id && id !== store.localChatId) {\n                store.localChatId = id\n            }\n        },\n        { immediate: true },\n    )\n    // Store → parent: keep the v-model in sync whenever the store changes\n    // the chatId internally (e.g. startNewChat).\n    watch(localChatId, (id) => {\n        chatId.value = id\n    })\n\n    // Emit structured errors from chat to the parent component\n    watch(chatError, (error) => {\n        if (!error) {\n            return\n        }\n        try {\n            const parsedError = JSON.parse(error.message) as {\n                type: string\n                title: string\n                status: number\n            }\n            emit('error', parsedError)\n        } catch {\n            // ignore non-JSON errors\n        }\n    })\n\n    // ui\n    const isFullscreen = computed(() => props.modifier === 'fullscreen')\n    const isPanel = computed(() => props.modifier === 'panel')\n\n    /**\n     * How much room the chat has, measured on the chat and not on the window.\n     *\n     * The same chat renders in a phone page, in a 408px widget, in a docked\n     * panel and in a preview frame that the side panels squeeze to phone width\n     * on a desktop screen, so the viewport says nothing about the space the\n     * layout actually has. A CSS container query would read the same number\n     * with no JavaScript, but `container-type` makes the element a containing\n     * block for `position: fixed` descendants on every engine except Chrome\n     * 129 and later, which displaces every dropdown in the chat: see\n     * docs/agents/gotchas.md, \"The chat measures its own width, and not with a\n     * container query\".\n     *\n     * The thresholds carry the modifiers, so the CSS stays declarative:\n     * `--phone` has as much room as a phone page, `--tight` is too tight for\n     * the agent chip beside the field, `--wide` has room for the outline rail\n     * beside the reading column. Before the first measurement the width is 0\n     * and no modifier applies, which is the roomy layout the base CSS writes.\n     */\n    const chatbotEl = useTemplateRef<HTMLDivElement>('chatbotEl')\n    const { width: chatbotWidth } = useElementSize(chatbotEl)\n    const isPhoneWidth = computed(\n        () => chatbotWidth.value > 0 && chatbotWidth.value < 576,\n    )\n    const isTightWidth = computed(\n        () => chatbotWidth.value > 0 && chatbotWidth.value < 640,\n    )\n    const isWideWidth = computed(() => chatbotWidth.value >= 848)\n    const isReasoningAgent = computed(() => props.agentType === 'reasoning')\n    // The notice says how a reasoning agent reads a message: it stands before\n    // the first one, then leaves the room to the answers (pinned, it took a\n    // third of a phone screen in the reasoning playground)\n    const showReasoningNotice = computed(\n        () =>\n            isReasoningAgent.value &&\n            !messages.value.some((message) => message.role === 'user'),\n    )\n    const useColorsForAgentHeader = computed(\n        () => props.agentInterface?.useColorsForAgentHeader,\n    )\n    // Panel mode promotes the everyday actions (new chat, history) from the\n    // dropdown to direct header buttons: the dropdown then only remains for\n    // the secondary entries (files, profile, sign-in) and disappears when\n    // none of them applies.\n    const showHeaderMenu = computed(\n        () =>\n            !isPanel.value ||\n            canManageProfile.value ||\n            canSignIn.value ||\n            (!!props.userFilesEnabled && !!localChatId.value),\n    )\n    const themeClass = computed(() => [\n        'theme',\n        `theme--${isDark.value ? 'dark' : 'light'}`,\n    ])\n    const mainColor = computed(() => props.agentInterface?.mainColor)\n    const contrastColor = computed(() =>\n        resolveContrastColor(props.agentInterface?.textColor, mainColor.value),\n    )\n    const themeStyle = computed(() =>\n        agentThemeStyle(mainColor.value, contrastColor.value),\n    )\n    const footerMessage = useLocalizedString(\n        () => props.agentInterface?.footerMessage,\n    )\n    const title = computed(() => {\n        if (activeView.value === 'conversations') {\n            return $t('label.conversations')\n        }\n        if (activeView.value === 'profile') {\n            return $t('label.profile')\n        }\n        if (activeView.value === 'auth') {\n            return $t('label.authentication')\n        }\n        if (activeView.value === 'files') {\n            return $t('userFiles.chatFilesTitle')\n        }\n        return props.name\n    })\n\n    // state\n    const isReady = computed(() => chat.value.status === 'ready')\n    const activeMessage = computed(() => {\n        return messages.value?.[messages.value.length - 1]\n    })\n\n    // expose\n    defineExpose({\n        startNewChat,\n        regenerate,\n        stopGeneration,\n        sendMessage,\n    })\n\n    // load chat, conversations and feedbacks on agent or chat change\n    watch(\n        [storeAgentId, localChatId],\n        async ([newAgentId, newChatId]) => {\n            await store.initialize(newAgentId, newChatId)\n        },\n        {\n            immediate: true,\n        },\n    )\n    // load conversations when navigating to conversations view\n    watch(activeView, (newView) => {\n        if (newView === 'conversations') {\n            store.loadConversations(storeAgentId.value)\n        } else if (newView === 'files') {\n            store.loadChatFiles()\n        }\n    })\n    // emit message updates for up-to-date context in parent components\n    watch(\n        activeMessage,\n        (message) => {\n            if (message) {\n                emit('message-update', message)\n            }\n        },\n        {\n            deep: true,\n            immediate: true,\n        },\n    )\n</script>\n\n<template>\n    <div\n        ref=\"chatbotEl\"\n        class=\"pk-chatbot\"\n        :class=\"[\n            themeClass,\n            {\n                'pk-chatbot--fullscreen': isFullscreen,\n                'pk-chatbot--panel': isPanel,\n                'pk-chatbot--phone': isPhoneWidth,\n                'pk-chatbot--tight': isTightWidth,\n                'pk-chatbot--wide': isWideWidth,\n            },\n        ]\"\n        :style=\"themeStyle\">\n        <!-- #region title -->\n        <div\n            v-if=\"!isFullscreen\"\n            class=\"pk-chatbot__header\"\n            :style=\"\n                useColorsForAgentHeader\n                    ? {\n                          backgroundColor: mainColor,\n                      }\n                    : undefined\n            \">\n            <div class=\"pk-chatbot__header-start\">\n                <template v-if=\"activeView !== 'chat'\">\n                    <VvButton\n                        v-bind=\"{\n                            modifiers: useColorsForAgentHeader\n                                ? `action-quiet-${contrastColor}`\n                                : 'action-quiet',\n                            icon: 'ri:arrow-left-s-line',\n                            title: $t('action.goBack'),\n                        }\"\n                        @click=\"navigate('chat')\" />\n                    <VvIcon\n                        :name=\"\n                            activeView === 'conversations'\n                                ? 'ri:history-line'\n                                : activeView === 'files'\n                                  ? 'ri:attachment-2'\n                                  : 'ri:user-line'\n                        \"\n                        class=\"pk-chatbot__nav-icon\"\n                        :style=\"\n                            useColorsForAgentHeader\n                                ? {\n                                      color: contrastColor,\n                                  }\n                                : undefined\n                        \" />\n                </template>\n                <!-- Panel mode: no avatar, the docked panel identifies the\n                     agent with the title alone -->\n                <PkAvatar\n                    v-else-if=\"!isPanel\"\n                    modifiers=\"surface ring shrink-0\"\n                    class=\"pk-chatbot__avatar\"\n                    :name\n                    :img-src=\"agentInterface?.logo\" />\n                <strong\n                    class=\"pk-chatbot__title\"\n                    :title=\"title\"\n                    :style=\"\n                        useColorsForAgentHeader\n                            ? {\n                                  color: contrastColor,\n                              }\n                            : undefined\n                    \">\n                    {{ title }}\n                </strong>\n            </div>\n            <VvButtonGroup class=\"pk-chatbot__header-end\" modifiers=\"compact\">\n                <slot\n                    name=\"header-actions\"\n                    v-bind=\"{\n                        mainColor,\n                        useColorsForAgentHeader,\n                        contrastColor,\n                        startNewChat,\n                        stopGeneration,\n                    }\" />\n                <template v-if=\"isPanel\">\n                    <VvButton\n                        :modifiers=\"\n                            useColorsForAgentHeader\n                                ? `action-quiet-${contrastColor}`\n                                : 'action-quiet'\n                        \"\n                        icon=\"ri:edit-box-line\"\n                        :disabled=\"!isReady\"\n                        :title=\"$t('action.startNewChat')\"\n                        @click=\"startNewChat()\" />\n                    <VvButton\n                        v-if=\"!isReasoningAgent\"\n                        :modifiers=\"\n                            useColorsForAgentHeader\n                                ? `action-quiet-${contrastColor}`\n                                : 'action-quiet'\n                        \"\n                        icon=\"ri:history-line\"\n                        :disabled=\"!isReady\"\n                        :title=\"$t('action.viewRecentChats')\"\n                        @click=\"navigate('conversations')\" />\n                </template>\n                <VvDropdown\n                    v-if=\"showHeaderMenu\"\n                    v-bind=\"{\n                        placement: 'bottom-end',\n                        modifiers: 'menu',\n                        flip: true,\n                        offset: 3,\n                        strategy: 'fixed',\n                    }\">\n                    <VvButton\n                        v-bind=\"{\n                            modifiers: useColorsForAgentHeader\n                                ? `action-quiet-${contrastColor}`\n                                : 'action-quiet',\n                            icon: 'ri:more-2-fill',\n                            disabled: !isReady,\n                            title: $t('action.moreActions'),\n                        }\" />\n                    <template #items>\n                        <VvDropdownAction\n                            v-if=\"!isPanel\"\n                            @click=\"startNewChat()\">\n                            <VvIcon name=\"ri:edit-box-line\" />\n                            {{ $t('action.startNewChat') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-if=\"!isReasoningAgent && !isPanel\"\n                            @click=\"navigate('conversations')\">\n                            <VvIcon name=\"ri:history-line\" />\n                            {{ $t('action.viewRecentChats') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-if=\"\n                                (canManageProfile || userFilesEnabled) &&\n                                localChatId\n                            \"\n                            @click=\"navigate('files')\">\n                            <VvIcon name=\"ri:attachment-2\" />\n                            {{ $t('userFiles.chatFilesTitle') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-if=\"canManageProfile\"\n                            @click=\"navigate('profile')\">\n                            <VvIcon name=\"ri:user-line\" />\n                            {{ $t('label.profile') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-else-if=\"canSignIn\"\n                            @click=\"navigate('auth')\">\n                            <VvIcon name=\"ri:account-circle-line\" />\n                            {{ $t('action.signIn') }}\n                        </VvDropdownAction>\n                    </template>\n                </VvDropdown>\n                <slot\n                    name=\"actions\"\n                    v-bind=\"{\n                        mainColor,\n                        useColorsForAgentHeader,\n                        contrastColor,\n                        startNewChat,\n                        stopGeneration,\n                    }\" />\n            </VvButtonGroup>\n        </div>\n        <!-- #endregion -->\n\n        <div v-if=\"showReasoningNotice\">\n            <div class=\"pk-chatbot__warning-body\">\n                <VvAlert modifiers=\"callout\">\n                    <div class=\"pk-chatbot__warning-header\">\n                        <VvIcon\n                            name=\"ri:alert-line\"\n                            class=\"pk-chatbot__warning-icon\" />\n                        <strong class=\"pk-chatbot__warning-title\">\n                            {{ $t('message.warning') }}\n                        </strong>\n                    </div>\n                    <p class=\"pk-chatbot__warning-text\">\n                        {{ $t('message.reasoningAgent') }}\n                    </p>\n                </VvAlert>\n            </div>\n        </div>\n\n        <!-- #region views -->\n        <PkChatbotViewChat\n            v-if=\"activeView === 'chat'\"\n            :agent-id\n            :modifier\n            :user-name\n            @show-info=\"emit('show-info', $event)\"\n            @revise=\"emit('revise', $event)\">\n            <template\n                v-for=\"slotName in Object.keys(slots)\"\n                #[slotName]=\"slotData\"\n                ><slot :name=\"slotName\" v-bind=\"slotData\"\n            /></template>\n        </PkChatbotViewChat>\n        <PkChatbotViewConversations\n            v-else-if=\"activeView === 'conversations'\"\n            :agent-id>\n            <template\n                v-for=\"slotName in Object.keys(slots)\"\n                #[slotName]=\"slotData\"\n                ><slot :name=\"slotName\" v-bind=\"slotData\"\n            /></template>\n        </PkChatbotViewConversations>\n        <PkChatbotViewFiles v-else-if=\"activeView === 'files'\" :agent-id />\n        <div\n            v-else-if=\"activeView === 'auth'\"\n            class=\"pk-chatbot__view-auth flex-1 min-h-0 overflow-y-auto\">\n            <!-- Sign-in form provided by the host widget (owns the auth client) -->\n            <slot name=\"view-auth\" />\n        </div>\n        <PkChatbotViewProfile v-else :agent-id>\n            <template\n                v-for=\"slotName in Object.keys(slots)\"\n                #[slotName]=\"slotData\"\n                ><slot :name=\"slotName\" v-bind=\"slotData\"\n            /></template>\n        </PkChatbotViewProfile>\n        <!-- #endregion -->\n\n        <!-- #region footer -->\n        <div v-if=\"footerMessage\" class=\"pk-chatbot__footer\">\n            <PkStreamingMarkdown :markdown=\"footerMessage\" class=\"wysiwyg\" />\n        </div>\n        <!-- #endregion -->\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        height: 100%;\n        background-color: var(--color-surface);\n\n        &__header {\n            position: sticky;\n            top: 0;\n            z-index: 1;\n            display: flex;\n            justify-content: space-between;\n            gap: var(--spacing-14);\n            background-color: var(--color-surface-1);\n            padding: var(--spacing-14);\n            border-bottom: 1px solid var(--color-surface-3);\n        }\n\n        &__header-start {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-sm);\n            min-width: 0;\n        }\n\n        &__nav-icon {\n            font-size: var(--text-18);\n        }\n\n        &__avatar {\n            width: var(--spacing-24);\n            height: var(--spacing-24);\n        }\n\n        &__title {\n            font-size: var(--text-16);\n            font-weight: var(--font-semibold);\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        &__header-end {\n            flex-shrink: 0;\n        }\n\n        &__warning-body {\n            padding: var(--spacing-md);\n            border-bottom: 1px solid var(--color-surface-3);\n        }\n\n        &__warning-header {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-4);\n            margin-bottom: var(--spacing-4);\n        }\n\n        &__warning-icon {\n            width: var(--spacing-16);\n            height: var(--spacing-16);\n        }\n\n        &__warning-title {\n            font-weight: 600;\n            font-size: var(--text-14);\n        }\n\n        &__warning-text {\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n        }\n\n        &__footer {\n            padding: var(--spacing-md);\n            border-top: 1px solid var(--color-surface-3);\n            text-align: center;\n            font-size: var(--text-12);\n            color: var(--color-word-2);\n        }\n\n        // Modifier: fullscreen — layout full-page (Gemini-style): nessun\n        // header interno, sfondo trasparente, input pill centrato.\n        // Il chrome (sidebar, navigazione) è gestito dalla pagina ospite.\n        &--fullscreen {\n            // The dock, 60px. Declared rather than taken from the agent chip,\n            // which the tight layout hides: the pill fell to 54px there and\n            // the call bar that takes its place stayed at 60. There is no 60\n            // in the spacing scale and a raw `60px` would stop following the\n            // root font size, which the labels inside do follow.\n            --pk-chat-fullscreen-dock-height: calc(\n                var(--spacing-56) + var(--spacing-4)\n            );\n            // The pill, the notice that tucks into its top corners and the\n            // call bar all round their ends on half of it.\n            --pk-chat-dock-radius: calc(\n                var(--pk-chat-fullscreen-dock-height) / 2\n            );\n\n            background-color: transparent;\n\n            .pk-chatbot__footer {\n                border-top: none;\n                padding: 0 var(--spacing-md) var(--spacing-sm) var(--spacing-md);\n            }\n\n            // Reading column aligned with the input (Gemini-style). The\n            // constraint lives on the inner wrapper so the scroll container\n            // spans the page and the scrollbar sits at its edge.\n            .pk-chatbot-messages {\n                // Symmetric gutters: a visible scrollbar would otherwise\n                // shrink the content box on one side only, shifting the\n                // column off the input axis\n                scrollbar-gutter: stable both-edges;\n                // Dissolve the content at both edges (works on any page\n                // background, dots included — a surface-colored fade band\n                // would cut through the pattern instead)\n                mask-image: linear-gradient(\n                    to bottom,\n                    transparent 0,\n                    #000 var(--spacing-40),\n                    #000 calc(100% - var(--spacing-40)),\n                    transparent 100%\n                );\n                // Resting clearance so the first/last lines sit inside the\n                // fully opaque zone\n                padding-block: var(--spacing-48);\n            }\n\n            .pk-chatbot-messages__wrapper {\n                width: 100%;\n                max-width: 768px;\n                margin-inline: auto;\n            }\n\n            // Outline rail: wide chats only, measured on the chat and not on\n            // the viewport, so a preview frame squeezed by side panels loses\n            // it like a phone does. The rail sits at the edge of the scroll\n            // area beside the reading column: below the `--wide` threshold\n            // (768px column plus a 40px rail on each side) it would cover the\n            // messages instead.\n            .pk-chatbot-messages__outline {\n                display: none;\n            }\n\n            &.pk-chatbot--wide .pk-chatbot-messages__outline {\n                display: block;\n            }\n\n            .pk-chatbot-file-preview {\n                background-color: var(--color-surface);\n            }\n\n            .pk-chatbot-input__notice {\n                background-color: var(--color-surface);\n                border-inline: 1px solid var(--color-surface-3);\n                border-top: 1px solid var(--color-surface-2);\n                padding: var(--spacing-10) var(--spacing-16);\n\n                // As deep as the pill's corners, or the page shows through\n                // where their curve leaves the side\n                &::after {\n                    background-color: var(--color-surface);\n                    border-inline: 1px solid var(--color-surface-2);\n                    bottom: calc(-1 * var(--pk-chat-dock-radius));\n                    height: var(--pk-chat-dock-radius);\n                    left: -1px;\n                    right: -1px;\n                }\n            }\n\n            .pk-chatbot-input {\n                width: calc(100% - var(--spacing-sm) * 2);\n                max-width: 768px;\n                margin-inline: auto;\n\n                &__form {\n                    // True semicircles at rest, concentric with the send\n                    // button, whose center sits 30px in. Not `rounded-full`:\n                    // once Shift+Enter grows the field the ends would swell\n                    // with it and cut into the first and last line.\n                    border-radius: var(--pk-chat-dock-radius);\n                    min-height: var(--pk-chat-fullscreen-dock-height);\n                    padding: var(--spacing-12) var(--spacing-16);\n                    background-color: var(--color-surface-1);\n                    border-color: var(--color-surface-2);\n                    box-shadow: none;\n                    transition:\n                        border-color var(--duration-200) var(--ease-in-out),\n                        box-shadow var(--duration-200) var(--ease-in-out);\n\n                    &:has(:focus-within) {\n                        border-color: var(--color-surface-4);\n                        box-shadow: var(--shadow-sm);\n                    }\n\n                    @media (prefers-reduced-motion: reduce) {\n                        transition: none;\n                    }\n                }\n\n                &__textarea {\n                    background-color: transparent;\n                }\n            }\n\n            // A live call takes the place of the input, so it takes its shape,\n            // its column and its height: full-bleed here would break the\n            // reading axis, and a different height would make the dock jump\n            // the moment the call starts.\n            .pk-voice-session {\n                --pk-chat-dock-height: var(--pk-chat-fullscreen-dock-height);\n                --pk-voice-orb-size: var(--spacing-40);\n                --pk-voice-orb-bars-height: var(--spacing-20);\n                --pk-voice-session-surface: var(--color-surface-1);\n                width: calc(100% - var(--spacing-sm) * 2);\n                max-width: 768px;\n                margin-inline: auto;\n                padding-inline: var(--spacing-16);\n                border-color: var(--color-surface-2);\n                border-radius: var(--pk-chat-dock-radius);\n                box-shadow: none;\n\n                &__timer {\n                    font-size: var(--text-14);\n                }\n            }\n        }\n\n        // Modifier: panel — compact chrome for a docked side panel: the host\n        // container owns background and border, the header slims down and\n        // drops its own surface so the chat blends into the panel.\n        &--panel {\n            background-color: transparent;\n\n            .pk-chatbot__header {\n                background-color: transparent;\n\n                // Fixed height so the panel header lines up with the host's\n                // own chrome. Custom properties inherit through the shadow\n                // root: an embedding host can override it to match its\n                // header (the default matches the platform header, 50px).\n                height: var(--pk-chatbot-panel-header-height, 50px);\n                align-items: center;\n                padding-block: 0;\n                padding-inline: var(--spacing-10);\n                border-bottom: 1px solid var(--color-surface-3);\n            }\n\n            .pk-chatbot__title {\n                font-size: var(--text-14);\n            }\n\n            .pk-chatbot__footer {\n                border-top: none;\n                padding: var(--spacing-6) var(--spacing-md);\n            }\n        }\n\n        // A chat given a whole page without the fullscreen layout (the page\n        // an iframe embeds, a widget its host lets fill the screen) keeps the\n        // reading column of the fullscreen one: at 1440px an answer ran\n        // 1408px wide, some two hundred characters a line. Measured on the\n        // chat, like `--wide` itself, so a narrow frame is left alone.\n        &--wide:not(.pk-chatbot--fullscreen) {\n            .pk-chatbot-messages__wrapper,\n            .pk-chatbot-input {\n                width: 100%;\n                max-width: 768px;\n                margin-inline: auto;\n            }\n        }\n    }\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"PkChatbot-536vsOfp.js","names":["_useModel","__unplugin_components_0","__unplugin_components_1","__unplugin_components_2","__unplugin_components_3","__unplugin_components_4","__unplugin_components_5","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_createElementVNode","_unref","_Fragment","_createVNode","_mergeProps","_createBlock","PkAvatar","_createCommentVNode","_toDisplayString","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createTextVNode","PkChatbotViewChat","_createSlots","_renderList","PkChatbotViewConversations","PkChatbotViewFiles","PkChatbotViewProfile","PkStreamingMarkdown","_sfc_main","provideChatImagePolicy","PkChatbotViewConversations_default","PkChatbotViewChat_default","provideShortUrlResolver","PkChatbotViewFiles_default","useLocalizedString","resolveContrastColor","agentThemeStyle","PkAvatar_default","ChatbotProfileContextKey","PkChatbotViewProfile_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","PkChatbot_default","defineComponent","\"chatId\"","\"chatIdModifiers\"","__expose","__emit","slots","useSlots","$t","useI18n","props","__props","emit","chatId","useModel","store","useChatbotStore","hashes","storeToRefs","storeAgentId","toRef","profile","inject","canManageProfile","computed","canSignIn","watch","canManage","activeView","navigate","watchEffect","id","localChatId","chatError","error","parsedError","isFullscreen","isPanel","chatbotEl","useTemplateRef","chatbotWidth","useElementSize","isPhoneWidth","isTightWidth","isWideWidth","isReasoningAgent","showReasoningNotice","messages","message","useColorsForAgentHeader","showHeaderMenu","themeClass","isDark","mainColor","contrastColor","themeStyle","footerMessage","title","isReady","chat","activeMessage","newAgentId","newChatId","newView","_component_VvButton","VvButton","_component_VvIcon","VvIcon","_component_VvDropdownAction","VvDropdownAction","_component_VvDropdown","VvDropdown","_component_VvButtonGroup","VvButtonGroup","_component_VvAlert","VvAlert","openBlock","createElementBlock","normalizeClass","normalizeStyle","createCommentVNode","createElementVNode","unref","createBlock","Fragment","createVNode","mergeProps","_cache","toDisplayString","withCtx","renderSlot","_ctx","normalizeProps","guardReactiveProps","startNewChat","stopGeneration","createTextVNode","$event","createSlots","renderList","slotName","slotData","PkStreamingMarkdown_default"],"sources":["../../../../packages/components/src/chat/PkChatbot.vue","../../../../packages/components/src/chat/PkChatbot.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import {\n        computed,\n        inject,\n        toRef,\n        useTemplateRef,\n        watch,\n        watchEffect,\n        useSlots,\n    } from 'vue'\n    import { useElementSize } from '@vueuse/core'\n    import { storeToRefs } from 'pinia'\n    import { useI18n } from 'vue-i18n'\n    import type {\n        AgentInterface,\n        AgentModel,\n        AgentFileUpload,\n        AgentGatewayOptions,\n        AgentVoiceCapability,\n        ChatMessageActions,\n        RevisedAnswer,\n        UIChatMessage,\n        AgentTools,\n    } from 'models'\n    import {\n        useChatbotStore,\n        useLocalizedString,\n        provideShortUrlResolver,\n    } from 'composables'\n    import PkAvatar from './PkAvatar.vue'\n    import PkChatbotViewChat from './PkChatbotViewChat.vue'\n    import PkChatbotViewConversations from './PkChatbotViewConversations.vue'\n    import PkChatbotViewFiles from './PkChatbotViewFiles.vue'\n    import PkChatbotViewProfile from './PkChatbotViewProfile.vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import { ChatbotProfileContextKey } from './chatbotProfileContext'\n    import { provideChatImagePolicy } from './chatImagePolicy'\n    import { agentThemeStyle, resolveContrastColor } from './utils'\n\n    // Captured in script setup to avoid TS7022 circular inference in template\n    const slots = useSlots()\n\n    const { t: $t } = useI18n({\n        useScope: 'global',\n    })\n\n    const props = defineProps<{\n        baseUrl: string\n        basePath?: string\n        agentId: string\n        agentType?: 'reasoning' | 'chat'\n        userId?: string\n        name?: string\n        model?: string\n        agentModel?: AgentModel\n        agentTools?: AgentTools\n        agentInterface?: AgentInterface\n        actions?: ChatMessageActions[]\n        revisedAnswers?: RevisedAnswer[]\n        headers?: Record<string, string>\n        systemTheme?: 'light' | 'dark'\n        agentFileUpload?: AgentFileUpload\n        /** Voice configuration from the agent settings: enables the talk button. */\n        voice?: AgentVoiceCapability\n        fallbackModels?: string[]\n        gatewayOptions?: Partial<AgentGatewayOptions>\n        externalContext?: Record<string, unknown>\n        /** Layout modifier: `widget` (default) keeps the contained layout with header, `fullscreen` removes header/background for full-page usage (the page provides the chrome), `panel` keeps the header but slims it down for a docked side panel (the host provides background and border) */\n        modifier?: 'widget' | 'fullscreen' | 'panel'\n        /** Display name of the current user, used for the `{name}` placeholder in the fullscreen greeting */\n        userName?: string\n        /** Show the \"Files in this chat\" menu for hosts that don't provide the\n         * profile context but whose user is authenticated (e.g. the backoffice\n         * playground). The widget host relies on `canManageProfile` instead. */\n        userFilesEnabled?: boolean\n    }>()\n    const emit = defineEmits<{\n        'message-update': [message: UIChatMessage]\n        'show-info': [message: UIChatMessage]\n        revise: [message: UIChatMessage]\n        error: [error: { type: string; title: string; status: number }]\n    }>()\n\n    const chatId = defineModel<string | undefined>('chatId', {\n        type: String,\n        default: undefined,\n    })\n\n    const store = useChatbotStore(props.agentId)\n\n    // Resolve backend short-urls (`/api/r/<hash>`) back to their real target\n    // for display in tool components. Batched + cached across the chat tree.\n    provideShortUrlResolver((hashes) =>\n        store.apiClient.resolveShortUrls(hashes),\n    )\n\n    const { messages, chat, localChatId, activeView, chatError, isDark } =\n        storeToRefs(store)\n\n    // Ref to store.agentId for watchers (avoids duplicate-key with agentId prop)\n    const storeAgentId = toRef(store, 'agentId')\n\n    const { startNewChat, stopGeneration, regenerate, navigate, sendMessage } =\n        store\n\n    // Images in the answers and the tool cards load by themselves only from\n    // the backend this chat talks to and from the hosts the agent lists.\n    provideChatImagePolicy(\n        () => props.agentInterface?.imageHosts,\n        () => props.baseUrl,\n    )\n\n    // Optional profile-management context provided by the host widget.\n    // Present only for authenticated, non-anonymous sessions.\n    const profile = inject(ChatbotProfileContextKey, undefined)\n    const canManageProfile = computed(\n        () => profile?.canManageProfile.value ?? false,\n    )\n    // Anonymous users get a \"Sign in\" entry instead of the profile one,\n    // provided the host filled the `view-auth` slot and the agent has at\n    // least one auth method enabled.\n    const canSignIn = computed(\n        () =>\n            !canManageProfile.value &&\n            (profile?.canSignIn?.value ?? false) &&\n            slots['view-auth'] !== undefined,\n    )\n\n    // Once the sign-in completes (the session becomes non-anonymous) leave\n    // the auth view and return to the conversation.\n    watch(canManageProfile, (canManage) => {\n        if (canManage && activeView.value === 'auth') {\n            navigate('chat')\n        }\n    })\n\n    // Sync props → store reactively\n    watchEffect(() => {\n        store.baseUrl = props.baseUrl\n        store.basePath = props.basePath\n        store.name = props.name\n        store.agentType = props.agentType\n        store.userId = props.userId\n        store.agentInterface = props.agentInterface\n        store.agentModel = props.agentModel\n        store.agentTools = props.agentTools\n        store.headers = props.headers\n        store.revisedAnswers = props.revisedAnswers\n        store.model = props.model\n        store.actionsInput = props.actions\n        store.agentFileUpload = props.agentFileUpload\n        store.agentVoice = props.voice\n        store.fallbackModels = props.fallbackModels\n        store.gatewayOptions = props.gatewayOptions\n        store.externalContext = props.externalContext\n        store.systemTheme = props.systemTheme\n        store.hideWelcomeMessage = props.modifier === 'fullscreen'\n    })\n\n    // Sync chatId v-model ↔ store (bidirectional)\n    // Parent → store: if the parent provides an external chatId, push it into\n    // the store so the Chat instance picks it up.\n    watch(\n        () => chatId.value,\n        (id) => {\n            if (id && id !== store.localChatId) {\n                store.localChatId = id\n            }\n        },\n        { immediate: true },\n    )\n    // Store → parent: keep the v-model in sync whenever the store changes\n    // the chatId internally (e.g. startNewChat).\n    watch(localChatId, (id) => {\n        chatId.value = id\n    })\n\n    // Emit structured errors from chat to the parent component\n    watch(chatError, (error) => {\n        if (!error) {\n            return\n        }\n        try {\n            const parsedError = JSON.parse(error.message) as {\n                type: string\n                title: string\n                status: number\n            }\n            emit('error', parsedError)\n        } catch {\n            // ignore non-JSON errors\n        }\n    })\n\n    // ui\n    const isFullscreen = computed(() => props.modifier === 'fullscreen')\n    const isPanel = computed(() => props.modifier === 'panel')\n\n    /**\n     * How much room the chat has, measured on the chat and not on the window.\n     *\n     * The same chat renders in a phone page, in a 408px widget, in a docked\n     * panel and in a preview frame that the side panels squeeze to phone width\n     * on a desktop screen, so the viewport says nothing about the space the\n     * layout actually has. A CSS container query would read the same number\n     * with no JavaScript, but `container-type` makes the element a containing\n     * block for `position: fixed` descendants on every engine except Chrome\n     * 129 and later, which displaces every dropdown in the chat: see\n     * docs/agents/gotchas.md, \"The chat measures its own width, and not with a\n     * container query\".\n     *\n     * The thresholds carry the modifiers, so the CSS stays declarative:\n     * `--phone` has as much room as a phone page, `--tight` is too tight for\n     * the agent chip beside the field, `--wide` has room for the outline rail\n     * beside the reading column. Before the first measurement the width is 0\n     * and no modifier applies, which is the roomy layout the base CSS writes.\n     */\n    const chatbotEl = useTemplateRef<HTMLDivElement>('chatbotEl')\n    const { width: chatbotWidth } = useElementSize(chatbotEl)\n    const isPhoneWidth = computed(\n        () => chatbotWidth.value > 0 && chatbotWidth.value < 576,\n    )\n    const isTightWidth = computed(\n        () => chatbotWidth.value > 0 && chatbotWidth.value < 640,\n    )\n    const isWideWidth = computed(() => chatbotWidth.value >= 848)\n    const isReasoningAgent = computed(() => props.agentType === 'reasoning')\n    // The notice says how a reasoning agent reads a message: it stands before\n    // the first one, then leaves the room to the answers (pinned, it took a\n    // third of a phone screen in the reasoning playground)\n    const showReasoningNotice = computed(\n        () =>\n            isReasoningAgent.value &&\n            !messages.value.some((message) => message.role === 'user'),\n    )\n    const useColorsForAgentHeader = computed(\n        () => props.agentInterface?.useColorsForAgentHeader,\n    )\n    // Panel mode promotes the everyday actions (new chat, history) from the\n    // dropdown to direct header buttons: the dropdown then only remains for\n    // the secondary entries (files, profile, sign-in) and disappears when\n    // none of them applies.\n    const showHeaderMenu = computed(\n        () =>\n            !isPanel.value ||\n            canManageProfile.value ||\n            canSignIn.value ||\n            (!!props.userFilesEnabled && !!localChatId.value),\n    )\n    const themeClass = computed(() => [\n        'theme',\n        `theme--${isDark.value ? 'dark' : 'light'}`,\n    ])\n    const mainColor = computed(() => props.agentInterface?.mainColor)\n    const contrastColor = computed(() =>\n        resolveContrastColor(props.agentInterface?.textColor, mainColor.value),\n    )\n    const themeStyle = computed(() =>\n        agentThemeStyle(mainColor.value, contrastColor.value),\n    )\n    const footerMessage = useLocalizedString(\n        () => props.agentInterface?.footerMessage,\n    )\n    const title = computed(() => {\n        if (activeView.value === 'conversations') {\n            return $t('label.conversations')\n        }\n        if (activeView.value === 'profile') {\n            return $t('label.profile')\n        }\n        if (activeView.value === 'auth') {\n            return $t('label.authentication')\n        }\n        if (activeView.value === 'files') {\n            return $t('userFiles.chatFilesTitle')\n        }\n        return props.name\n    })\n\n    // state\n    const isReady = computed(() => chat.value.status === 'ready')\n    const activeMessage = computed(() => {\n        return messages.value?.[messages.value.length - 1]\n    })\n\n    // expose\n    defineExpose({\n        startNewChat,\n        regenerate,\n        stopGeneration,\n        sendMessage,\n    })\n\n    // load chat, conversations and feedbacks on agent or chat change\n    watch(\n        [storeAgentId, localChatId],\n        async ([newAgentId, newChatId]) => {\n            await store.initialize(newAgentId, newChatId)\n        },\n        {\n            immediate: true,\n        },\n    )\n    // load conversations when navigating to conversations view\n    watch(activeView, (newView) => {\n        if (newView === 'conversations') {\n            store.loadConversations(storeAgentId.value)\n        } else if (newView === 'files') {\n            store.loadChatFiles()\n        }\n    })\n    // emit message updates for up-to-date context in parent components\n    watch(\n        activeMessage,\n        (message) => {\n            if (message) {\n                emit('message-update', message)\n            }\n        },\n        {\n            deep: true,\n            immediate: true,\n        },\n    )\n</script>\n\n<template>\n    <div\n        ref=\"chatbotEl\"\n        class=\"pk-chatbot\"\n        :class=\"[\n            themeClass,\n            {\n                'pk-chatbot--fullscreen': isFullscreen,\n                'pk-chatbot--panel': isPanel,\n                'pk-chatbot--phone': isPhoneWidth,\n                'pk-chatbot--tight': isTightWidth,\n                'pk-chatbot--wide': isWideWidth,\n            },\n        ]\"\n        :style=\"themeStyle\">\n        <!-- #region title -->\n        <div\n            v-if=\"!isFullscreen\"\n            class=\"pk-chatbot__header\"\n            :style=\"\n                useColorsForAgentHeader\n                    ? {\n                          backgroundColor: mainColor,\n                      }\n                    : undefined\n            \">\n            <div class=\"pk-chatbot__header-start\">\n                <template v-if=\"activeView !== 'chat'\">\n                    <VvButton\n                        v-bind=\"{\n                            modifiers: useColorsForAgentHeader\n                                ? `action-quiet-${contrastColor}`\n                                : 'action-quiet',\n                            icon: 'ri:arrow-left-s-line',\n                            title: $t('action.goBack'),\n                        }\"\n                        @click=\"navigate('chat')\" />\n                    <VvIcon\n                        :name=\"\n                            activeView === 'conversations'\n                                ? 'ri:history-line'\n                                : activeView === 'files'\n                                  ? 'ri:attachment-2'\n                                  : 'ri:user-line'\n                        \"\n                        class=\"pk-chatbot__nav-icon\"\n                        :style=\"\n                            useColorsForAgentHeader\n                                ? {\n                                      color: contrastColor,\n                                  }\n                                : undefined\n                        \" />\n                </template>\n                <!-- Panel mode: no avatar, the docked panel identifies the\n                     agent with the title alone -->\n                <PkAvatar\n                    v-else-if=\"!isPanel\"\n                    modifiers=\"surface ring shrink-0\"\n                    class=\"pk-chatbot__avatar\"\n                    :name\n                    :img-src=\"agentInterface?.logo\" />\n                <strong\n                    class=\"pk-chatbot__title\"\n                    :title=\"title\"\n                    :style=\"\n                        useColorsForAgentHeader\n                            ? {\n                                  color: contrastColor,\n                              }\n                            : undefined\n                    \">\n                    {{ title }}\n                </strong>\n            </div>\n            <VvButtonGroup class=\"pk-chatbot__header-end\" modifiers=\"compact\">\n                <slot\n                    name=\"header-actions\"\n                    v-bind=\"{\n                        mainColor,\n                        useColorsForAgentHeader,\n                        contrastColor,\n                        startNewChat,\n                        stopGeneration,\n                    }\" />\n                <template v-if=\"isPanel\">\n                    <VvButton\n                        :modifiers=\"\n                            useColorsForAgentHeader\n                                ? `action-quiet-${contrastColor}`\n                                : 'action-quiet'\n                        \"\n                        icon=\"ri:edit-box-line\"\n                        :disabled=\"!isReady\"\n                        :title=\"$t('action.startNewChat')\"\n                        @click=\"startNewChat()\" />\n                    <VvButton\n                        v-if=\"!isReasoningAgent\"\n                        :modifiers=\"\n                            useColorsForAgentHeader\n                                ? `action-quiet-${contrastColor}`\n                                : 'action-quiet'\n                        \"\n                        icon=\"ri:history-line\"\n                        :disabled=\"!isReady\"\n                        :title=\"$t('action.viewRecentChats')\"\n                        @click=\"navigate('conversations')\" />\n                </template>\n                <VvDropdown\n                    v-if=\"showHeaderMenu\"\n                    v-bind=\"{\n                        placement: 'bottom-end',\n                        modifiers: 'menu',\n                        flip: true,\n                        offset: 3,\n                        strategy: 'fixed',\n                    }\">\n                    <VvButton\n                        v-bind=\"{\n                            modifiers: useColorsForAgentHeader\n                                ? `action-quiet-${contrastColor}`\n                                : 'action-quiet',\n                            icon: 'ri:more-2-fill',\n                            disabled: !isReady,\n                            title: $t('action.moreActions'),\n                        }\" />\n                    <template #items>\n                        <VvDropdownAction\n                            v-if=\"!isPanel\"\n                            @click=\"startNewChat()\">\n                            <VvIcon name=\"ri:edit-box-line\" />\n                            {{ $t('action.startNewChat') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-if=\"!isReasoningAgent && !isPanel\"\n                            @click=\"navigate('conversations')\">\n                            <VvIcon name=\"ri:history-line\" />\n                            {{ $t('action.viewRecentChats') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-if=\"\n                                (canManageProfile || userFilesEnabled) &&\n                                localChatId\n                            \"\n                            @click=\"navigate('files')\">\n                            <VvIcon name=\"ri:attachment-2\" />\n                            {{ $t('userFiles.chatFilesTitle') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-if=\"canManageProfile\"\n                            @click=\"navigate('profile')\">\n                            <VvIcon name=\"ri:user-line\" />\n                            {{ $t('label.profile') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-else-if=\"canSignIn\"\n                            @click=\"navigate('auth')\">\n                            <VvIcon name=\"ri:account-circle-line\" />\n                            {{ $t('action.signIn') }}\n                        </VvDropdownAction>\n                    </template>\n                </VvDropdown>\n                <slot\n                    name=\"actions\"\n                    v-bind=\"{\n                        mainColor,\n                        useColorsForAgentHeader,\n                        contrastColor,\n                        startNewChat,\n                        stopGeneration,\n                    }\" />\n            </VvButtonGroup>\n        </div>\n        <!-- #endregion -->\n\n        <div v-if=\"showReasoningNotice\">\n            <div class=\"pk-chatbot__warning-body\">\n                <VvAlert modifiers=\"callout\">\n                    <div class=\"pk-chatbot__warning-header\">\n                        <VvIcon\n                            name=\"ri:alert-line\"\n                            class=\"pk-chatbot__warning-icon\" />\n                        <strong class=\"pk-chatbot__warning-title\">\n                            {{ $t('message.warning') }}\n                        </strong>\n                    </div>\n                    <p class=\"pk-chatbot__warning-text\">\n                        {{ $t('message.reasoningAgent') }}\n                    </p>\n                </VvAlert>\n            </div>\n        </div>\n\n        <!-- #region views -->\n        <PkChatbotViewChat\n            v-if=\"activeView === 'chat'\"\n            :agent-id\n            :modifier\n            :user-name\n            @show-info=\"emit('show-info', $event)\"\n            @revise=\"emit('revise', $event)\">\n            <template\n                v-for=\"slotName in Object.keys(slots)\"\n                #[slotName]=\"slotData\"\n                ><slot :name=\"slotName\" v-bind=\"slotData\"\n            /></template>\n        </PkChatbotViewChat>\n        <PkChatbotViewConversations\n            v-else-if=\"activeView === 'conversations'\"\n            :agent-id>\n            <template\n                v-for=\"slotName in Object.keys(slots)\"\n                #[slotName]=\"slotData\"\n                ><slot :name=\"slotName\" v-bind=\"slotData\"\n            /></template>\n        </PkChatbotViewConversations>\n        <PkChatbotViewFiles v-else-if=\"activeView === 'files'\" :agent-id />\n        <div\n            v-else-if=\"activeView === 'auth'\"\n            class=\"pk-chatbot__view-auth flex-1 min-h-0 overflow-y-auto\">\n            <!-- Sign-in form provided by the host widget (owns the auth client) -->\n            <slot name=\"view-auth\" />\n        </div>\n        <PkChatbotViewProfile v-else :agent-id>\n            <template\n                v-for=\"slotName in Object.keys(slots)\"\n                #[slotName]=\"slotData\"\n                ><slot :name=\"slotName\" v-bind=\"slotData\"\n            /></template>\n        </PkChatbotViewProfile>\n        <!-- #endregion -->\n\n        <!-- #region footer -->\n        <div v-if=\"footerMessage\" class=\"pk-chatbot__footer\">\n            <PkStreamingMarkdown :markdown=\"footerMessage\" class=\"wysiwyg\" />\n        </div>\n        <!-- #endregion -->\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        height: 100%;\n        background-color: var(--color-surface);\n\n        &__header {\n            position: sticky;\n            top: 0;\n            z-index: 1;\n            display: flex;\n            justify-content: space-between;\n            gap: var(--spacing-14);\n            background-color: var(--color-surface-1);\n            padding: var(--spacing-14);\n            border-bottom: 1px solid var(--color-surface-3);\n        }\n\n        &__header-start {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-sm);\n            min-width: 0;\n        }\n\n        &__nav-icon {\n            font-size: var(--text-18);\n        }\n\n        &__avatar {\n            width: var(--spacing-24);\n            height: var(--spacing-24);\n        }\n\n        &__title {\n            font-size: var(--text-16);\n            font-weight: var(--font-semibold);\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        &__header-end {\n            flex-shrink: 0;\n        }\n\n        &__warning-body {\n            padding: var(--spacing-md);\n            border-bottom: 1px solid var(--color-surface-3);\n        }\n\n        &__warning-header {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-4);\n            margin-bottom: var(--spacing-4);\n        }\n\n        &__warning-icon {\n            width: var(--spacing-16);\n            height: var(--spacing-16);\n        }\n\n        &__warning-title {\n            font-weight: 600;\n            font-size: var(--text-14);\n        }\n\n        &__warning-text {\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n        }\n\n        &__footer {\n            padding: var(--spacing-md);\n            border-top: 1px solid var(--color-surface-3);\n            text-align: center;\n            font-size: var(--text-12);\n            color: var(--color-word-2);\n        }\n\n        // Modifier: fullscreen — layout full-page (Gemini-style): nessun\n        // header interno, sfondo trasparente, input pill centrato.\n        // Il chrome (sidebar, navigazione) è gestito dalla pagina ospite.\n        &--fullscreen {\n            // The dock, 60px. Declared rather than taken from the agent chip,\n            // which the tight layout hides: the pill fell to 54px there and\n            // the call bar that takes its place stayed at 60. There is no 60\n            // in the spacing scale and a raw `60px` would stop following the\n            // root font size, which the labels inside do follow.\n            --pk-chat-fullscreen-dock-height: calc(\n                var(--spacing-56) + var(--spacing-4)\n            );\n            // The pill, the notice that tucks into its top corners and the\n            // call bar all round their ends on half of it.\n            --pk-chat-dock-radius: calc(\n                var(--pk-chat-fullscreen-dock-height) / 2\n            );\n\n            background-color: transparent;\n\n            .pk-chatbot__footer {\n                border-top: none;\n                padding: 0 var(--spacing-md) var(--spacing-sm) var(--spacing-md);\n            }\n\n            // Reading column aligned with the input (Gemini-style). The\n            // constraint lives on the inner wrapper so the scroll container\n            // spans the page and the scrollbar sits at its edge.\n            .pk-chatbot-messages {\n                // Symmetric gutters: a visible scrollbar would otherwise\n                // shrink the content box on one side only, shifting the\n                // column off the input axis\n                scrollbar-gutter: stable both-edges;\n                // Dissolve the content at both edges (works on any page\n                // background, dots included — a surface-colored fade band\n                // would cut through the pattern instead)\n                mask-image: linear-gradient(\n                    to bottom,\n                    transparent 0,\n                    #000 var(--spacing-40),\n                    #000 calc(100% - var(--spacing-40)),\n                    transparent 100%\n                );\n                // Resting clearance so the first/last lines sit inside the\n                // fully opaque zone\n                padding-block: var(--spacing-48);\n            }\n\n            .pk-chatbot-messages__wrapper {\n                width: 100%;\n                max-width: 768px;\n                margin-inline: auto;\n            }\n\n            // Outline rail: wide chats only, measured on the chat and not on\n            // the viewport, so a preview frame squeezed by side panels loses\n            // it like a phone does. The rail sits at the edge of the scroll\n            // area beside the reading column: below the `--wide` threshold\n            // (768px column plus a 40px rail on each side) it would cover the\n            // messages instead.\n            .pk-chatbot-messages__outline {\n                display: none;\n            }\n\n            &.pk-chatbot--wide .pk-chatbot-messages__outline {\n                display: block;\n            }\n\n            .pk-chatbot-file-preview {\n                background-color: var(--color-surface);\n            }\n\n            .pk-chatbot-input__notice {\n                background-color: var(--color-surface);\n                border-inline: 1px solid var(--color-surface-3);\n                border-top: 1px solid var(--color-surface-2);\n                padding: var(--spacing-10) var(--spacing-16);\n\n                // As deep as the pill's corners, or the page shows through\n                // where their curve leaves the side\n                &::after {\n                    background-color: var(--color-surface);\n                    border-inline: 1px solid var(--color-surface-2);\n                    bottom: calc(-1 * var(--pk-chat-dock-radius));\n                    height: var(--pk-chat-dock-radius);\n                    left: -1px;\n                    right: -1px;\n                }\n            }\n\n            .pk-chatbot-input {\n                width: calc(100% - var(--spacing-sm) * 2);\n                max-width: 768px;\n                margin-inline: auto;\n\n                &__form {\n                    // True semicircles at rest, concentric with the send\n                    // button, whose center sits 30px in. Not `rounded-full`:\n                    // once Shift+Enter grows the field the ends would swell\n                    // with it and cut into the first and last line.\n                    border-radius: var(--pk-chat-dock-radius);\n                    min-height: var(--pk-chat-fullscreen-dock-height);\n                    padding: var(--spacing-12) var(--spacing-16);\n                    background-color: var(--color-surface-1);\n                    border-color: var(--color-surface-2);\n                    box-shadow: none;\n                    transition:\n                        border-color var(--duration-200) var(--ease-in-out),\n                        box-shadow var(--duration-200) var(--ease-in-out);\n\n                    &:has(:focus-within) {\n                        border-color: var(--color-surface-4);\n                        box-shadow: var(--shadow-sm);\n                    }\n\n                    @media (prefers-reduced-motion: reduce) {\n                        transition: none;\n                    }\n                }\n\n                &__textarea {\n                    background-color: transparent;\n                }\n            }\n\n            // A live call takes the place of the input, so it takes its shape,\n            // its column and its height: full-bleed here would break the\n            // reading axis, and a different height would make the dock jump\n            // the moment the call starts.\n            .pk-voice-session {\n                --pk-chat-dock-height: var(--pk-chat-fullscreen-dock-height);\n                --pk-voice-orb-size: var(--spacing-40);\n                --pk-voice-orb-bars-height: var(--spacing-20);\n                --pk-voice-session-surface: var(--color-surface-1);\n                width: calc(100% - var(--spacing-sm) * 2);\n                max-width: 768px;\n                margin-inline: auto;\n                padding-inline: var(--spacing-16);\n                border-color: var(--color-surface-2);\n                border-radius: var(--pk-chat-dock-radius);\n                box-shadow: none;\n\n                &__timer {\n                    font-size: var(--text-14);\n                }\n            }\n        }\n\n        // Modifier: panel — compact chrome for a docked side panel: the host\n        // container owns background and border, the header slims down and\n        // drops its own surface so the chat blends into the panel.\n        &--panel {\n            background-color: transparent;\n\n            .pk-chatbot__header {\n                background-color: transparent;\n\n                // Fixed height so the panel header lines up with the host's\n                // own chrome. Custom properties inherit through the shadow\n                // root: an embedding host can override it to match its\n                // header (the default matches the platform header, 50px).\n                height: var(--pk-chatbot-panel-header-height, 50px);\n                align-items: center;\n                padding-block: 0;\n                padding-inline: var(--spacing-10);\n                border-bottom: 1px solid var(--color-surface-3);\n            }\n\n            .pk-chatbot__title {\n                font-size: var(--text-14);\n            }\n\n            .pk-chatbot__footer {\n                border-top: none;\n                padding: var(--spacing-6) var(--spacing-md);\n            }\n        }\n\n        // A chat given a whole page without the fullscreen layout (the page\n        // an iframe embeds, a widget its host lets fill the screen) keeps the\n        // reading column of the fullscreen one: at 1440px an answer ran\n        // 1408px wide, some two hundred characters a line. Measured on the\n        // chat, like `--wide` itself, so a narrow frame is left alone.\n        &--wide:not(.pk-chatbot--fullscreen) {\n            .pk-chatbot-messages__wrapper,\n            .pk-chatbot-input {\n                width: 100%;\n                max-width: 768px;\n                margin-inline: auto;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import {\n        computed,\n        inject,\n        toRef,\n        useTemplateRef,\n        watch,\n        watchEffect,\n        useSlots,\n    } from 'vue'\n    import { useElementSize } from '@vueuse/core'\n    import { storeToRefs } from 'pinia'\n    import { useI18n } from 'vue-i18n'\n    import type {\n        AgentInterface,\n        AgentModel,\n        AgentFileUpload,\n        AgentGatewayOptions,\n        AgentVoiceCapability,\n        ChatMessageActions,\n        RevisedAnswer,\n        UIChatMessage,\n        AgentTools,\n    } from 'models'\n    import {\n        useChatbotStore,\n        useLocalizedString,\n        provideShortUrlResolver,\n    } from 'composables'\n    import PkAvatar from './PkAvatar.vue'\n    import PkChatbotViewChat from './PkChatbotViewChat.vue'\n    import PkChatbotViewConversations from './PkChatbotViewConversations.vue'\n    import PkChatbotViewFiles from './PkChatbotViewFiles.vue'\n    import PkChatbotViewProfile from './PkChatbotViewProfile.vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import { ChatbotProfileContextKey } from './chatbotProfileContext'\n    import { provideChatImagePolicy } from './chatImagePolicy'\n    import { agentThemeStyle, resolveContrastColor } from './utils'\n\n    // Captured in script setup to avoid TS7022 circular inference in template\n    const slots = useSlots()\n\n    const { t: $t } = useI18n({\n        useScope: 'global',\n    })\n\n    const props = defineProps<{\n        baseUrl: string\n        basePath?: string\n        agentId: string\n        agentType?: 'reasoning' | 'chat'\n        userId?: string\n        name?: string\n        model?: string\n        agentModel?: AgentModel\n        agentTools?: AgentTools\n        agentInterface?: AgentInterface\n        actions?: ChatMessageActions[]\n        revisedAnswers?: RevisedAnswer[]\n        headers?: Record<string, string>\n        systemTheme?: 'light' | 'dark'\n        agentFileUpload?: AgentFileUpload\n        /** Voice configuration from the agent settings: enables the talk button. */\n        voice?: AgentVoiceCapability\n        fallbackModels?: string[]\n        gatewayOptions?: Partial<AgentGatewayOptions>\n        externalContext?: Record<string, unknown>\n        /** Layout modifier: `widget` (default) keeps the contained layout with header, `fullscreen` removes header/background for full-page usage (the page provides the chrome), `panel` keeps the header but slims it down for a docked side panel (the host provides background and border) */\n        modifier?: 'widget' | 'fullscreen' | 'panel'\n        /** Display name of the current user, used for the `{name}` placeholder in the fullscreen greeting */\n        userName?: string\n        /** Show the \"Files in this chat\" menu for hosts that don't provide the\n         * profile context but whose user is authenticated (e.g. the backoffice\n         * playground). The widget host relies on `canManageProfile` instead. */\n        userFilesEnabled?: boolean\n    }>()\n    const emit = defineEmits<{\n        'message-update': [message: UIChatMessage]\n        'show-info': [message: UIChatMessage]\n        revise: [message: UIChatMessage]\n        error: [error: { type: string; title: string; status: number }]\n    }>()\n\n    const chatId = defineModel<string | undefined>('chatId', {\n        type: String,\n        default: undefined,\n    })\n\n    const store = useChatbotStore(props.agentId)\n\n    // Resolve backend short-urls (`/api/r/<hash>`) back to their real target\n    // for display in tool components. Batched + cached across the chat tree.\n    provideShortUrlResolver((hashes) =>\n        store.apiClient.resolveShortUrls(hashes),\n    )\n\n    const { messages, chat, localChatId, activeView, chatError, isDark } =\n        storeToRefs(store)\n\n    // Ref to store.agentId for watchers (avoids duplicate-key with agentId prop)\n    const storeAgentId = toRef(store, 'agentId')\n\n    const { startNewChat, stopGeneration, regenerate, navigate, sendMessage } =\n        store\n\n    // Images in the answers and the tool cards load by themselves only from\n    // the backend this chat talks to and from the hosts the agent lists.\n    provideChatImagePolicy(\n        () => props.agentInterface?.imageHosts,\n        () => props.baseUrl,\n    )\n\n    // Optional profile-management context provided by the host widget.\n    // Present only for authenticated, non-anonymous sessions.\n    const profile = inject(ChatbotProfileContextKey, undefined)\n    const canManageProfile = computed(\n        () => profile?.canManageProfile.value ?? false,\n    )\n    // Anonymous users get a \"Sign in\" entry instead of the profile one,\n    // provided the host filled the `view-auth` slot and the agent has at\n    // least one auth method enabled.\n    const canSignIn = computed(\n        () =>\n            !canManageProfile.value &&\n            (profile?.canSignIn?.value ?? false) &&\n            slots['view-auth'] !== undefined,\n    )\n\n    // Once the sign-in completes (the session becomes non-anonymous) leave\n    // the auth view and return to the conversation.\n    watch(canManageProfile, (canManage) => {\n        if (canManage && activeView.value === 'auth') {\n            navigate('chat')\n        }\n    })\n\n    // Sync props → store reactively\n    watchEffect(() => {\n        store.baseUrl = props.baseUrl\n        store.basePath = props.basePath\n        store.name = props.name\n        store.agentType = props.agentType\n        store.userId = props.userId\n        store.agentInterface = props.agentInterface\n        store.agentModel = props.agentModel\n        store.agentTools = props.agentTools\n        store.headers = props.headers\n        store.revisedAnswers = props.revisedAnswers\n        store.model = props.model\n        store.actionsInput = props.actions\n        store.agentFileUpload = props.agentFileUpload\n        store.agentVoice = props.voice\n        store.fallbackModels = props.fallbackModels\n        store.gatewayOptions = props.gatewayOptions\n        store.externalContext = props.externalContext\n        store.systemTheme = props.systemTheme\n        store.hideWelcomeMessage = props.modifier === 'fullscreen'\n    })\n\n    // Sync chatId v-model ↔ store (bidirectional)\n    // Parent → store: if the parent provides an external chatId, push it into\n    // the store so the Chat instance picks it up.\n    watch(\n        () => chatId.value,\n        (id) => {\n            if (id && id !== store.localChatId) {\n                store.localChatId = id\n            }\n        },\n        { immediate: true },\n    )\n    // Store → parent: keep the v-model in sync whenever the store changes\n    // the chatId internally (e.g. startNewChat).\n    watch(localChatId, (id) => {\n        chatId.value = id\n    })\n\n    // Emit structured errors from chat to the parent component\n    watch(chatError, (error) => {\n        if (!error) {\n            return\n        }\n        try {\n            const parsedError = JSON.parse(error.message) as {\n                type: string\n                title: string\n                status: number\n            }\n            emit('error', parsedError)\n        } catch {\n            // ignore non-JSON errors\n        }\n    })\n\n    // ui\n    const isFullscreen = computed(() => props.modifier === 'fullscreen')\n    const isPanel = computed(() => props.modifier === 'panel')\n\n    /**\n     * How much room the chat has, measured on the chat and not on the window.\n     *\n     * The same chat renders in a phone page, in a 408px widget, in a docked\n     * panel and in a preview frame that the side panels squeeze to phone width\n     * on a desktop screen, so the viewport says nothing about the space the\n     * layout actually has. A CSS container query would read the same number\n     * with no JavaScript, but `container-type` makes the element a containing\n     * block for `position: fixed` descendants on every engine except Chrome\n     * 129 and later, which displaces every dropdown in the chat: see\n     * docs/agents/gotchas.md, \"The chat measures its own width, and not with a\n     * container query\".\n     *\n     * The thresholds carry the modifiers, so the CSS stays declarative:\n     * `--phone` has as much room as a phone page, `--tight` is too tight for\n     * the agent chip beside the field, `--wide` has room for the outline rail\n     * beside the reading column. Before the first measurement the width is 0\n     * and no modifier applies, which is the roomy layout the base CSS writes.\n     */\n    const chatbotEl = useTemplateRef<HTMLDivElement>('chatbotEl')\n    const { width: chatbotWidth } = useElementSize(chatbotEl)\n    const isPhoneWidth = computed(\n        () => chatbotWidth.value > 0 && chatbotWidth.value < 576,\n    )\n    const isTightWidth = computed(\n        () => chatbotWidth.value > 0 && chatbotWidth.value < 640,\n    )\n    const isWideWidth = computed(() => chatbotWidth.value >= 848)\n    const isReasoningAgent = computed(() => props.agentType === 'reasoning')\n    // The notice says how a reasoning agent reads a message: it stands before\n    // the first one, then leaves the room to the answers (pinned, it took a\n    // third of a phone screen in the reasoning playground)\n    const showReasoningNotice = computed(\n        () =>\n            isReasoningAgent.value &&\n            !messages.value.some((message) => message.role === 'user'),\n    )\n    const useColorsForAgentHeader = computed(\n        () => props.agentInterface?.useColorsForAgentHeader,\n    )\n    // Panel mode promotes the everyday actions (new chat, history) from the\n    // dropdown to direct header buttons: the dropdown then only remains for\n    // the secondary entries (files, profile, sign-in) and disappears when\n    // none of them applies.\n    const showHeaderMenu = computed(\n        () =>\n            !isPanel.value ||\n            canManageProfile.value ||\n            canSignIn.value ||\n            (!!props.userFilesEnabled && !!localChatId.value),\n    )\n    const themeClass = computed(() => [\n        'theme',\n        `theme--${isDark.value ? 'dark' : 'light'}`,\n    ])\n    const mainColor = computed(() => props.agentInterface?.mainColor)\n    const contrastColor = computed(() =>\n        resolveContrastColor(props.agentInterface?.textColor, mainColor.value),\n    )\n    const themeStyle = computed(() =>\n        agentThemeStyle(mainColor.value, contrastColor.value),\n    )\n    const footerMessage = useLocalizedString(\n        () => props.agentInterface?.footerMessage,\n    )\n    const title = computed(() => {\n        if (activeView.value === 'conversations') {\n            return $t('label.conversations')\n        }\n        if (activeView.value === 'profile') {\n            return $t('label.profile')\n        }\n        if (activeView.value === 'auth') {\n            return $t('label.authentication')\n        }\n        if (activeView.value === 'files') {\n            return $t('userFiles.chatFilesTitle')\n        }\n        return props.name\n    })\n\n    // state\n    const isReady = computed(() => chat.value.status === 'ready')\n    const activeMessage = computed(() => {\n        return messages.value?.[messages.value.length - 1]\n    })\n\n    // expose\n    defineExpose({\n        startNewChat,\n        regenerate,\n        stopGeneration,\n        sendMessage,\n    })\n\n    // load chat, conversations and feedbacks on agent or chat change\n    watch(\n        [storeAgentId, localChatId],\n        async ([newAgentId, newChatId]) => {\n            await store.initialize(newAgentId, newChatId)\n        },\n        {\n            immediate: true,\n        },\n    )\n    // load conversations when navigating to conversations view\n    watch(activeView, (newView) => {\n        if (newView === 'conversations') {\n            store.loadConversations(storeAgentId.value)\n        } else if (newView === 'files') {\n            store.loadChatFiles()\n        }\n    })\n    // emit message updates for up-to-date context in parent components\n    watch(\n        activeMessage,\n        (message) => {\n            if (message) {\n                emit('message-update', message)\n            }\n        },\n        {\n            deep: true,\n            immediate: true,\n        },\n    )\n</script>\n\n<template>\n    <div\n        ref=\"chatbotEl\"\n        class=\"pk-chatbot\"\n        :class=\"[\n            themeClass,\n            {\n                'pk-chatbot--fullscreen': isFullscreen,\n                'pk-chatbot--panel': isPanel,\n                'pk-chatbot--phone': isPhoneWidth,\n                'pk-chatbot--tight': isTightWidth,\n                'pk-chatbot--wide': isWideWidth,\n            },\n        ]\"\n        :style=\"themeStyle\">\n        <!-- #region title -->\n        <div\n            v-if=\"!isFullscreen\"\n            class=\"pk-chatbot__header\"\n            :style=\"\n                useColorsForAgentHeader\n                    ? {\n                          backgroundColor: mainColor,\n                      }\n                    : undefined\n            \">\n            <div class=\"pk-chatbot__header-start\">\n                <template v-if=\"activeView !== 'chat'\">\n                    <VvButton\n                        v-bind=\"{\n                            modifiers: useColorsForAgentHeader\n                                ? `action-quiet-${contrastColor}`\n                                : 'action-quiet',\n                            icon: 'ri:arrow-left-s-line',\n                            title: $t('action.goBack'),\n                        }\"\n                        @click=\"navigate('chat')\" />\n                    <VvIcon\n                        :name=\"\n                            activeView === 'conversations'\n                                ? 'ri:history-line'\n                                : activeView === 'files'\n                                  ? 'ri:attachment-2'\n                                  : 'ri:user-line'\n                        \"\n                        class=\"pk-chatbot__nav-icon\"\n                        :style=\"\n                            useColorsForAgentHeader\n                                ? {\n                                      color: contrastColor,\n                                  }\n                                : undefined\n                        \" />\n                </template>\n                <!-- Panel mode: no avatar, the docked panel identifies the\n                     agent with the title alone -->\n                <PkAvatar\n                    v-else-if=\"!isPanel\"\n                    modifiers=\"surface ring shrink-0\"\n                    class=\"pk-chatbot__avatar\"\n                    :name\n                    :img-src=\"agentInterface?.logo\" />\n                <strong\n                    class=\"pk-chatbot__title\"\n                    :title=\"title\"\n                    :style=\"\n                        useColorsForAgentHeader\n                            ? {\n                                  color: contrastColor,\n                              }\n                            : undefined\n                    \">\n                    {{ title }}\n                </strong>\n            </div>\n            <VvButtonGroup class=\"pk-chatbot__header-end\" modifiers=\"compact\">\n                <slot\n                    name=\"header-actions\"\n                    v-bind=\"{\n                        mainColor,\n                        useColorsForAgentHeader,\n                        contrastColor,\n                        startNewChat,\n                        stopGeneration,\n                    }\" />\n                <template v-if=\"isPanel\">\n                    <VvButton\n                        :modifiers=\"\n                            useColorsForAgentHeader\n                                ? `action-quiet-${contrastColor}`\n                                : 'action-quiet'\n                        \"\n                        icon=\"ri:edit-box-line\"\n                        :disabled=\"!isReady\"\n                        :title=\"$t('action.startNewChat')\"\n                        @click=\"startNewChat()\" />\n                    <VvButton\n                        v-if=\"!isReasoningAgent\"\n                        :modifiers=\"\n                            useColorsForAgentHeader\n                                ? `action-quiet-${contrastColor}`\n                                : 'action-quiet'\n                        \"\n                        icon=\"ri:history-line\"\n                        :disabled=\"!isReady\"\n                        :title=\"$t('action.viewRecentChats')\"\n                        @click=\"navigate('conversations')\" />\n                </template>\n                <VvDropdown\n                    v-if=\"showHeaderMenu\"\n                    v-bind=\"{\n                        placement: 'bottom-end',\n                        modifiers: 'menu',\n                        flip: true,\n                        offset: 3,\n                        strategy: 'fixed',\n                    }\">\n                    <VvButton\n                        v-bind=\"{\n                            modifiers: useColorsForAgentHeader\n                                ? `action-quiet-${contrastColor}`\n                                : 'action-quiet',\n                            icon: 'ri:more-2-fill',\n                            disabled: !isReady,\n                            title: $t('action.moreActions'),\n                        }\" />\n                    <template #items>\n                        <VvDropdownAction\n                            v-if=\"!isPanel\"\n                            @click=\"startNewChat()\">\n                            <VvIcon name=\"ri:edit-box-line\" />\n                            {{ $t('action.startNewChat') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-if=\"!isReasoningAgent && !isPanel\"\n                            @click=\"navigate('conversations')\">\n                            <VvIcon name=\"ri:history-line\" />\n                            {{ $t('action.viewRecentChats') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-if=\"\n                                (canManageProfile || userFilesEnabled) &&\n                                localChatId\n                            \"\n                            @click=\"navigate('files')\">\n                            <VvIcon name=\"ri:attachment-2\" />\n                            {{ $t('userFiles.chatFilesTitle') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-if=\"canManageProfile\"\n                            @click=\"navigate('profile')\">\n                            <VvIcon name=\"ri:user-line\" />\n                            {{ $t('label.profile') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-else-if=\"canSignIn\"\n                            @click=\"navigate('auth')\">\n                            <VvIcon name=\"ri:account-circle-line\" />\n                            {{ $t('action.signIn') }}\n                        </VvDropdownAction>\n                    </template>\n                </VvDropdown>\n                <slot\n                    name=\"actions\"\n                    v-bind=\"{\n                        mainColor,\n                        useColorsForAgentHeader,\n                        contrastColor,\n                        startNewChat,\n                        stopGeneration,\n                    }\" />\n            </VvButtonGroup>\n        </div>\n        <!-- #endregion -->\n\n        <div v-if=\"showReasoningNotice\">\n            <div class=\"pk-chatbot__warning-body\">\n                <VvAlert modifiers=\"callout\">\n                    <div class=\"pk-chatbot__warning-header\">\n                        <VvIcon\n                            name=\"ri:alert-line\"\n                            class=\"pk-chatbot__warning-icon\" />\n                        <strong class=\"pk-chatbot__warning-title\">\n                            {{ $t('message.warning') }}\n                        </strong>\n                    </div>\n                    <p class=\"pk-chatbot__warning-text\">\n                        {{ $t('message.reasoningAgent') }}\n                    </p>\n                </VvAlert>\n            </div>\n        </div>\n\n        <!-- #region views -->\n        <PkChatbotViewChat\n            v-if=\"activeView === 'chat'\"\n            :agent-id\n            :modifier\n            :user-name\n            @show-info=\"emit('show-info', $event)\"\n            @revise=\"emit('revise', $event)\">\n            <template\n                v-for=\"slotName in Object.keys(slots)\"\n                #[slotName]=\"slotData\"\n                ><slot :name=\"slotName\" v-bind=\"slotData\"\n            /></template>\n        </PkChatbotViewChat>\n        <PkChatbotViewConversations\n            v-else-if=\"activeView === 'conversations'\"\n            :agent-id>\n            <template\n                v-for=\"slotName in Object.keys(slots)\"\n                #[slotName]=\"slotData\"\n                ><slot :name=\"slotName\" v-bind=\"slotData\"\n            /></template>\n        </PkChatbotViewConversations>\n        <PkChatbotViewFiles v-else-if=\"activeView === 'files'\" :agent-id />\n        <div\n            v-else-if=\"activeView === 'auth'\"\n            class=\"pk-chatbot__view-auth flex-1 min-h-0 overflow-y-auto\">\n            <!-- Sign-in form provided by the host widget (owns the auth client) -->\n            <slot name=\"view-auth\" />\n        </div>\n        <PkChatbotViewProfile v-else :agent-id>\n            <template\n                v-for=\"slotName in Object.keys(slots)\"\n                #[slotName]=\"slotData\"\n                ><slot :name=\"slotName\" v-bind=\"slotData\"\n            /></template>\n        </PkChatbotViewProfile>\n        <!-- #endregion -->\n\n        <!-- #region footer -->\n        <div v-if=\"footerMessage\" class=\"pk-chatbot__footer\">\n            <PkStreamingMarkdown :markdown=\"footerMessage\" class=\"wysiwyg\" />\n        </div>\n        <!-- #endregion -->\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        height: 100%;\n        background-color: var(--color-surface);\n\n        &__header {\n            position: sticky;\n            top: 0;\n            z-index: 1;\n            display: flex;\n            justify-content: space-between;\n            gap: var(--spacing-14);\n            background-color: var(--color-surface-1);\n            padding: var(--spacing-14);\n            border-bottom: 1px solid var(--color-surface-3);\n        }\n\n        &__header-start {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-sm);\n            min-width: 0;\n        }\n\n        &__nav-icon {\n            font-size: var(--text-18);\n        }\n\n        &__avatar {\n            width: var(--spacing-24);\n            height: var(--spacing-24);\n        }\n\n        &__title {\n            font-size: var(--text-16);\n            font-weight: var(--font-semibold);\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        &__header-end {\n            flex-shrink: 0;\n        }\n\n        &__warning-body {\n            padding: var(--spacing-md);\n            border-bottom: 1px solid var(--color-surface-3);\n        }\n\n        &__warning-header {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-4);\n            margin-bottom: var(--spacing-4);\n        }\n\n        &__warning-icon {\n            width: var(--spacing-16);\n            height: var(--spacing-16);\n        }\n\n        &__warning-title {\n            font-weight: 600;\n            font-size: var(--text-14);\n        }\n\n        &__warning-text {\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n        }\n\n        &__footer {\n            padding: var(--spacing-md);\n            border-top: 1px solid var(--color-surface-3);\n            text-align: center;\n            font-size: var(--text-12);\n            color: var(--color-word-2);\n        }\n\n        // Modifier: fullscreen — layout full-page (Gemini-style): nessun\n        // header interno, sfondo trasparente, input pill centrato.\n        // Il chrome (sidebar, navigazione) è gestito dalla pagina ospite.\n        &--fullscreen {\n            // The dock, 60px. Declared rather than taken from the agent chip,\n            // which the tight layout hides: the pill fell to 54px there and\n            // the call bar that takes its place stayed at 60. There is no 60\n            // in the spacing scale and a raw `60px` would stop following the\n            // root font size, which the labels inside do follow.\n            --pk-chat-fullscreen-dock-height: calc(\n                var(--spacing-56) + var(--spacing-4)\n            );\n            // The pill, the notice that tucks into its top corners and the\n            // call bar all round their ends on half of it.\n            --pk-chat-dock-radius: calc(\n                var(--pk-chat-fullscreen-dock-height) / 2\n            );\n\n            background-color: transparent;\n\n            .pk-chatbot__footer {\n                border-top: none;\n                padding: 0 var(--spacing-md) var(--spacing-sm) var(--spacing-md);\n            }\n\n            // Reading column aligned with the input (Gemini-style). The\n            // constraint lives on the inner wrapper so the scroll container\n            // spans the page and the scrollbar sits at its edge.\n            .pk-chatbot-messages {\n                // Symmetric gutters: a visible scrollbar would otherwise\n                // shrink the content box on one side only, shifting the\n                // column off the input axis\n                scrollbar-gutter: stable both-edges;\n                // Dissolve the content at both edges (works on any page\n                // background, dots included — a surface-colored fade band\n                // would cut through the pattern instead)\n                mask-image: linear-gradient(\n                    to bottom,\n                    transparent 0,\n                    #000 var(--spacing-40),\n                    #000 calc(100% - var(--spacing-40)),\n                    transparent 100%\n                );\n                // Resting clearance so the first/last lines sit inside the\n                // fully opaque zone\n                padding-block: var(--spacing-48);\n            }\n\n            .pk-chatbot-messages__wrapper {\n                width: 100%;\n                max-width: 768px;\n                margin-inline: auto;\n            }\n\n            // Outline rail: wide chats only, measured on the chat and not on\n            // the viewport, so a preview frame squeezed by side panels loses\n            // it like a phone does. The rail sits at the edge of the scroll\n            // area beside the reading column: below the `--wide` threshold\n            // (768px column plus a 40px rail on each side) it would cover the\n            // messages instead.\n            .pk-chatbot-messages__outline {\n                display: none;\n            }\n\n            &.pk-chatbot--wide .pk-chatbot-messages__outline {\n                display: block;\n            }\n\n            .pk-chatbot-file-preview {\n                background-color: var(--color-surface);\n            }\n\n            .pk-chatbot-input__notice {\n                background-color: var(--color-surface);\n                border-inline: 1px solid var(--color-surface-3);\n                border-top: 1px solid var(--color-surface-2);\n                padding: var(--spacing-10) var(--spacing-16);\n\n                // As deep as the pill's corners, or the page shows through\n                // where their curve leaves the side\n                &::after {\n                    background-color: var(--color-surface);\n                    border-inline: 1px solid var(--color-surface-2);\n                    bottom: calc(-1 * var(--pk-chat-dock-radius));\n                    height: var(--pk-chat-dock-radius);\n                    left: -1px;\n                    right: -1px;\n                }\n            }\n\n            .pk-chatbot-input {\n                width: calc(100% - var(--spacing-sm) * 2);\n                max-width: 768px;\n                margin-inline: auto;\n\n                &__form {\n                    // True semicircles at rest, concentric with the send\n                    // button, whose center sits 30px in. Not `rounded-full`:\n                    // once Shift+Enter grows the field the ends would swell\n                    // with it and cut into the first and last line.\n                    border-radius: var(--pk-chat-dock-radius);\n                    min-height: var(--pk-chat-fullscreen-dock-height);\n                    padding: var(--spacing-12) var(--spacing-16);\n                    background-color: var(--color-surface-1);\n                    border-color: var(--color-surface-2);\n                    box-shadow: none;\n                    transition:\n                        border-color var(--duration-200) var(--ease-in-out),\n                        box-shadow var(--duration-200) var(--ease-in-out);\n\n                    &:has(:focus-within) {\n                        border-color: var(--color-surface-4);\n                        box-shadow: var(--shadow-sm);\n                    }\n\n                    @media (prefers-reduced-motion: reduce) {\n                        transition: none;\n                    }\n                }\n\n                &__textarea {\n                    background-color: transparent;\n                }\n            }\n\n            // A live call takes the place of the input, so it takes its shape,\n            // its column and its height: full-bleed here would break the\n            // reading axis, and a different height would make the dock jump\n            // the moment the call starts.\n            .pk-voice-session {\n                --pk-chat-dock-height: var(--pk-chat-fullscreen-dock-height);\n                --pk-voice-orb-size: var(--spacing-40);\n                --pk-voice-orb-bars-height: var(--spacing-20);\n                --pk-voice-session-surface: var(--color-surface-1);\n                width: calc(100% - var(--spacing-sm) * 2);\n                max-width: 768px;\n                margin-inline: auto;\n                padding-inline: var(--spacing-16);\n                border-color: var(--color-surface-2);\n                border-radius: var(--pk-chat-dock-radius);\n                box-shadow: none;\n\n                &__timer {\n                    font-size: var(--text-14);\n                }\n            }\n        }\n\n        // Modifier: panel — compact chrome for a docked side panel: the host\n        // container owns background and border, the header slims down and\n        // drops its own surface so the chat blends into the panel.\n        &--panel {\n            background-color: transparent;\n\n            .pk-chatbot__header {\n                background-color: transparent;\n\n                // Fixed height so the panel header lines up with the host's\n                // own chrome. Custom properties inherit through the shadow\n                // root: an embedding host can override it to match its\n                // header (the default matches the platform header, 50px).\n                height: var(--pk-chatbot-panel-header-height, 50px);\n                align-items: center;\n                padding-block: 0;\n                padding-inline: var(--spacing-10);\n                border-bottom: 1px solid var(--color-surface-3);\n            }\n\n            .pk-chatbot__title {\n                font-size: var(--text-14);\n            }\n\n            .pk-chatbot__footer {\n                border-top: none;\n                padding: var(--spacing-6) var(--spacing-md);\n            }\n        }\n\n        // A chat given a whole page without the fullscreen layout (the page\n        // an iframe embeds, a widget its host lets fill the screen) keeps the\n        // reading column of the fullscreen one: at 1440px an answer ran\n        // 1408px wide, some two hundred characters a line. Measured on the\n        // chat, like `--wide` itself, so a narrow frame is left alone.\n        &--wide:not(.pk-chatbot--fullscreen) {\n            .pk-chatbot-messages__wrapper,\n            .pk-chatbot-input {\n                width: 100%;\n                max-width: 768px;\n                margin-inline: auto;\n            }\n        }\n    }\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCI,IAAM2D,IAAQC,GAAS,GAEjB,EAAE,GAAGC,MAAOC,GAAQ,EACtB,UAAU,SACd,CAAC,GAEKC,IAAQC,GA8BRC,IAAOP,GAOPQ,IAASlE,GAA+BgE,GAAC,QAG9C,GAEKI,IAAQC,EAAgBN,EAAM,OAAO;EAI3C,GAAyB,MACrBK,EAAM,UAAU,iBAAiBE,CAAM,CAC3C;EAEA,IAAM,EAAE,aAAU,UAAM,gBAAa,eAAY,eAAW,eACxDC,GAAYH,CAAK,GAGfI,IAAeC,GAAML,GAAO,SAAS,GAErC,EAAE,iBAAc,mBAAgB,gBAAY,aAAU,oBACxDA;EAIJ,QACUL,EAAM,gBAAgB,kBACtBA,EAAM,OAChB;EAIA,IAAMW,IAAUC,GAAOjC,GAA0B,KAAA,CAAS,GACpDkC,IAAmBC,QACfH,GAAS,iBAAiB,SAAS,EAC7C,GAIMI,IAAYD,QAEV,CAACD,EAAiB,UACjBF,GAAS,WAAW,SAAS,OAC9Bf,EAAM,iBAAiB,KAAA,CAC/B;EAoDA,AAhDAoB,EAAMH,IAAmB,MAAc;GACnC,AAAII,KAAaC,EAAW,UAAU,UAClCC,EAAS,MAAM;EAEvB,CAAC,GAGDC,SAAkB;GAmBd,AAlBA,EAAM,UAAUpB,EAAM,SACtB,EAAM,WAAWA,EAAM,UACvB,EAAM,OAAOA,EAAM,MACnB,EAAM,YAAYA,EAAM,WACxB,EAAM,SAASA,EAAM,QACrB,EAAM,iBAAiBA,EAAM,gBAC7B,EAAM,aAAaA,EAAM,YACzB,EAAM,aAAaA,EAAM,YACzB,EAAM,UAAUA,EAAM,SACtB,EAAM,iBAAiBA,EAAM,gBAC7B,EAAM,QAAQA,EAAM,OACpB,EAAM,eAAeA,EAAM,SAC3B,EAAM,kBAAkBA,EAAM,iBAC9B,EAAM,aAAaA,EAAM,OACzB,EAAM,iBAAiBA,EAAM,gBAC7B,EAAM,iBAAiBA,EAAM,gBAC7B,EAAM,kBAAkBA,EAAM,iBAC9B,EAAM,cAAcA,EAAM,aAC1B,EAAM,qBAAqBA,EAAM,aAAa;EAClD,CAAC,GAKDgB,QACUb,EAAO,QACZ,MAAO;GACJ,AAAIkB,KAAMA,MAAOhB,EAAM,gBACnB,EAAM,cAAcgB;EAE5B,GACA,EAAE,WAAW,GAAK,CACtB,GAGAL,EAAMM,IAAc,MAAO;GACvB,EAAO,QAAQD;EACnB,CAAC,GAGDL,EAAMO,KAAY,MAAU;GACxB,IAAKC,GAGL,IAAI;IACA,IAAMC,IAAc,KAAK,MAAMD,EAAM,OAAO;IAK5C,EAAK,SAASC,CAAW;GAC7B,QAAQ,CAER;EACJ,CAAC;EAGD,IAAMC,KAAeZ,QAAed,EAAM,aAAa,YAAY,GAC7D2B,IAAUb,QAAed,EAAM,aAAa,OAAO,GAqBnD4B,IAAYC,GAA+B,WAAW,GACtD,EAAE,OAAOC,MAAiBC,GAAeH,CAAS,GAClDI,KAAelB,QACXgB,EAAa,QAAQ,KAAKA,EAAa,QAAQ,GACzD,GACMG,KAAenB,QACXgB,EAAa,QAAQ,KAAKA,EAAa,QAAQ,GACzD,GACMI,KAAcpB,QAAegB,EAAa,SAAS,GAAG,GACtDK,IAAmBrB,QAAed,EAAM,cAAc,WAAW,GAIjEoC,KAAsBtB,QAEpBqB,EAAiB,SACjB,CAACE,EAAS,MAAM,MAAM,MAAYC,EAAQ,SAAS,MAAM,CACjE,GACMC,IAA0BzB,QACtBd,EAAM,gBAAgB,uBAChC,GAKMwC,KAAiB1B,QAEf,CAACa,EAAQ,SACTd,EAAiB,SACjBE,EAAU,SACT,CAAC,CAACf,EAAM,oBAAoB,CAAC,CAACsB,EAAY,KACnD,GACMmB,KAAa3B,QAAe,CAC9B,SACA,UAAU4B,GAAO,QAAQ,SAAS,SACtC,CAAC,GACKC,IAAY7B,QAAed,EAAM,gBAAgB,SAAS,GAC1D4C,IAAgB9B,QAClBtC,EAAqBwB,EAAM,gBAAgB,WAAW2C,EAAU,KAAK,CACzE,GACME,KAAa/B,QACfrC,GAAgBkE,EAAU,OAAOC,EAAc,KAAK,CACxD,GACME,KAAgBvE,QACZyB,EAAM,gBAAgB,aAChC,GACM+C,KAAQjC,QACNI,EAAW,UAAU,kBACdpB,EAAG,qBAAqB,IAE/BoB,EAAW,UAAU,YACdpB,EAAG,eAAe,IAEzBoB,EAAW,UAAU,SACdpB,EAAG,sBAAsB,IAEhCoB,EAAW,UAAU,UACdpB,EAAG,0BAA0B,IAEjCE,EAAM,IAChB,GAGKgD,IAAUlC,QAAemC,GAAK,MAAM,WAAW,OAAO,GACtDC,KAAgBpC,QACXuB,EAAS,QAAQA,EAAS,MAAM,SAAS,EACnD;SAGD3C,EAAa;GACT;GACA;GACA;GACA;EACJ,CAAC,GAGDsB,EACI,CAACP,GAAca,CAAW,GAC1B,OAAO,CAAC6B,GAAYC,OAAe;GAC/B,MAAM/C,EAAM,WAAW8C,GAAYC,CAAS;EAChD,GACA,EACI,WAAW,GACf,CACJ,GAEApC,EAAME,IAAa,MAAY;GAC3B,AAAImC,MAAY,kBACZhD,EAAM,kBAAkBI,EAAa,KAAK,IACnC4C,MAAY,WACnBhD,EAAM,cAAc;EAE5B,CAAC,GAEDW,EACIkC,KACC,MAAY;GACT,AAAIZ,KACApC,EAAK,kBAAkBoC,CAAO;EAEtC,GACA;GACI,MAAM;GACN,WAAW;EACf,CACJ;;GAIA,OAAA9F,EAAA,GAAAC,EA4OM,OAAA;IA3OE,SAAA;IAAJ,KAAImF;IACJ,OAAKlF,GAAA,CAAC,cAAY,CACI+F,GAAA,OAAA;KAAoE,0BAAAf,GAAA;KAAmD,qBAAAC,EAAA;KAA8C,qBAAAK,GAAA;KAAmD,qBAAAC,GAAA;KAAkD,oBAAAC,GAAA;;IAU/R,OAAKvF,EAAEkG,GAAA,KAAU;;IAGPnB,GAAA,qBADXlF,EAAA,GAAAC,EA4JM,OAAA;;KA1JF,OAAM;KACL,OAAKE,EAAmB4F,EAAA,QAAA,EAA2F,iBAAAI,EAAA,MAAA,IAAyD,KAAA,CAAA;IAO7K/F,GAAAA,CAAAA,EAgDM,OAhDNiC,IAgDM,CA/CchC,EAAAqE,CAAA,MAAU,SA8BVS,EAAA,QAKhB/E,EAAAA,IAAAA,EAAAA,KANAJ,EAAA,GAAAS,EAKsCC,IAAA;;KAHlC,WAAU;KACV,OAAM;KACL,MAAA+C,EAAA;KACA,WAASA,EAAA,gBAAgB;IAC9BrD,GAAAA,MAAAA,GAAAA,CAAAA,QAAAA,SAAAA,CAAAA,MAnCAJ,EAAA,GAAAC,EA0BWK,GAAA,EAAA,KAAA,EAAA,GAAA,CAzBPC,EAQgCuG,GARhCtG,EAQgC;KAPqB,WAAAuF,EAAA,QAA0E,gBAAAK,EAAA,UAAA;;KAA+J,OAAA/F,EAAAiD,CAAA,CAAE,CAAA,eAAA;IAO3R,GAAA,EAAA,SAAK,AAAA+E,EAAA,QAAA,MAAEhI,EAAAsE,CAAA,CAAQ,CAAA,MAAA,EAAA,CAAA,GAAA,MAAA,EAAA,GACpBpE,EAeQyG,GAAA;KAdH,MAAmC3G,EAAAqE,CAAA,MAAU,kBAAA,oBAA2GrE,EAAAqE,CAAA,MAAU,UAAA,oBAAA;KAOnK,OAAM;KACL,OAAKvE,EAA+B4F,EAAA,QAAA,EAAyG,OAAAK,EAAA,MAAA,IAAqF,KAAA,CAAA;IAW3N,GAAA,MAAA,GAAA,CAAA,QAAA,OAAA,CAAA,CAAA,GAAA,EAAA,IAKhBhG,EAWS,UAAA;KAVL,OAAM;KACL,OAAOmG,GAAA;KACP,OAAKpG,EAA2B4F,EAAA,QAAA,EAAiG,OAAAK,EAAA,MAAA,IAA6E,KAAA,CAAA;IAO5M,GAAAxF,EAAA2F,GAAA,KAAK,GAAA,IAAAjE,EAAA,CAAA,CAAA,GAGhB/B,EAgGgB+G,GAAA;KAhGD,OAAM;KAAyB,WAAU;;KACpD,SAAAzG,QAQS;MARTC,EAQS2H,EAAA,QAAA,kBAAA1H,EAAAC,EAAA;OAN6B,WAAAmF,EAAA;OAAmC,yBAAAJ,EAAA;OAAiD,eAAAK,EAAA;OAAuC,cAAA/F,EAAAuI,CAAA;OAAsC,gBAAAvI,EAAAwI,CAAA;;MAOvL1D,EAAA,SAAhBnF,EAAA,GAAAC,EAsBWK,GAAA,EAAA,KAAA,EAAA,GAAA,CArBPC,EAS8BuG,GAAA;OARzB,WAAwCf,EAAA,QAA0E,gBAAAK,EAAA,UAAA;OAKnH,MAAK;OACJ,UAAQ,CAAGI,EAAA;OACX,OAAOnG,EAAAiD,CAAA,CAAE,CAAA,qBAAA;OACT,SAAK,AAAA+E,EAAA,QAAA,MAAEhI,EAAAuI,CAAA,CAAY,CAAA;;;;;MAEb,CAAA,GAAAjD,EAAA,qBADX3F,EAAA,GAAAS,EAUyCqG,GAAA;;OARpC,WAAwCf,EAAA,QAA0E,gBAAAK,EAAA,UAAA;OAKnH,MAAK;OACJ,UAAQ,CAAGI,EAAA;OACX,OAAOnG,EAAAiD,CAAA,CAAE,CAAA,wBAAA;OACT,SAAK,AAAA+E,EAAA,QAAA,MAAEhI,EAAAsE,CAAA,CAAQ,CAAA,eAAA;;;;;;MAGdqB,GAAA,SADVhG,EAAA,GAAAS,EAqDa2G,IAAArG,EAAAP,EAAA,EAAA,KAAA,EAAA,GAnDD;;;;;;MAMP,CAAA,CAAA,GAAA;OAUU,OAAKK,QAMO;QAJRsE,EAAA,qBADXnF,EAAA,GAAAS,EAKmByG,GAAA;;SAHd,SAAK,AAAAmB,EAAA,QAAA,MAAEhI,EAAAuI,CAAA,CAAY,CAAA;;SACpB,SAAA/H,QAAkC,CAAlCN,EAAkCyG,GAAA,EAA1B,MAAK,mBAAkB,CAAA,GAAG/F,EAAA,MAClCL,EAAGP,EAAAiD,CAAA,CAAE,CAAA,qBAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;;QAGE,CAAAqC,EAAA,SAAgB,CAAKR,EAAA,SADhCnF,EAAA,GAAAS,EAKmByG,GAAA;;SAHd,SAAK,AAAAmB,EAAA,QAAA,MAAEhI,EAAAsE,CAAA,CAAQ,CAAA,eAAA;;SAChB,SAAA9D,QAAiC,CAAjCN,EAAiCyG,GAAA,EAAzB,MAAK,kBAAiB,CAAA,GAAG/F,EAAA,MACjCL,EAAGP,EAAAiD,CAAA,CAAE,CAAA,wBAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;;SAGmCe,EAAA,SAAoBZ,EAAA,qBAAqDpD,EAAAyE,CAAA,KADrH9E,EAAA,GAAAS,EAQmByG,GAAA;;SAHd,SAAK,AAAAmB,EAAA,QAAA,MAAEhI,EAAAsE,CAAA,CAAQ,CAAA,OAAA;;SAChB,SAAA9D,QAAiC,CAAjCN,EAAiCyG,GAAA,EAAzB,MAAK,kBAAiB,CAAA,GAAG/F,EAAA,MACjCL,EAAGP,EAAAiD,CAAA,CAAE,CAAA,0BAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;;QAGCe,EAAA,SADVrE,EAAA,GAAAS,EAKmByG,GAAA;;SAHd,SAAK,AAAAmB,EAAA,QAAA,MAAEhI,EAAAsE,CAAA,CAAQ,CAAA,SAAA;;SAChB,SAAA9D,QAA8B,CAA9BN,EAA8ByG,GAAA,EAAtB,MAAK,eAAc,CAAA,GAAG/F,EAAA,MAC9BL,EAAGP,EAAAiD,CAAA,CAAE,CAAA,eAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;QAGM,CAAA,KAAAiB,EAAA,SADfvE,EAAA,GAAAS,EAKmByG,GAAA;;SAHd,SAAK,AAAAmB,EAAA,QAAA,MAAEhI,EAAAsE,CAAA,CAAQ,CAAA,MAAA;;SAChB,SAAA9D,QAAwC,CAAxCN,EAAwCyG,GAAA,EAAhC,MAAK,yBAAwB,CAAA,GAAG/F,EAAA,MACxCL,EAAGP,EAAAiD,CAAA,CAAE,CAAA,eAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;;;OAzCb,SAAAzC,QAQS,CARTN,EAQSuG,GAAA/F,EAAAC,EAAA;QAP4C,WAAA+E,EAAA,QAA0E,gBAAAK,EAAA,UAAA;;QAA6J,UAAA,CAAAI,EAAA;QAA4C,OAAAnG,EAAAiD,CAAA,CAAE,CAAA,oBAAA;;;;MA4C9UxC,EAQS2H,EAAA,QAAA,WAAA1H,EAAAC,EAAA;OAN6B,WAAAmF,EAAA;OAAmC,yBAAAJ,EAAA;OAAiD,eAAAK,EAAA;OAAuC,cAAA/F,EAAAuI,CAAA;OAAsC,gBAAAvI,EAAAwI,CAAA;;;;;IAWpMjD,GAAA,SAAX5F,EAAA,GAAAC,EAgBM,OAAAsC,IAAA,CAfFnC,EAcM,OAdNoC,IAcM,CAbFjC,EAYUiH,GAAA,EAZD,WAAU,UAAS,GAAA;KACxB,SAAA3G,QAOM,CAPNT,EAOM,OAPNqC,IAOM,CANFlC,EAEuCyG,GAAA;MADnC,MAAK;MACL,OAAM;KACV5G,CAAAA,GAAAA,EAES,UAFTsC,IAES9B,EADFP,EAAAiD,CAAA,CAAE,CAAA,iBAAA,CAAA,GAAA,CAAA,CAAA,CAAA,GAGblD,EAEI,KAFJuC,IAEI/B,EADGP,EAAAiD,CAAA,CAAE,CAAA,wBAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;;IAQXjD,EAAAqE,CAAA,MAAU,UADpB1E,EAAA,GAAAS,EAYoBS,IAAA;;KAVf,YAAAuC,EAAA;KACA,UAAAA,EAAA;KACA,aAAAA,EAAA;KACA,YAAS,AAAA4E,EAAA,QAAA,MAAE3E,EAAI,aAAcqF,CAAM;KACnC,UAAM,AAAAV,EAAA,QAAA,MAAE3E,EAAI,UAAWqF,CAAM;IAEP3H,GAAAA,EAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,EAAA,OAAO,KAAKf,EAAA+C,CAAA,CAAK,IAA7B;KACN,MAAA8F;KACA,IAAArI,GADY,MAAQ,CACpBC,EACH2H,EAAA,QADgBS,GAAQnI,EAAAC,EAAUmI,CAAQ,CAAA,CAAA,CAAA,CAAA;;;;;IAIjC9I,CAAAA,KAAAA,EAAAqE,CAAA,MAAU,mBADzB1E,EAAA,GAAAS,EAQ6BY,IAAA;;KANxB,YAAAoC,EAAA;IAEsBrC,GAAAA,EAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,EAAA,OAAO,KAAKf,EAAA+C,CAAA,CAAK,IAA7B;KACN,MAAA8F;KACA,IAAArI,GADY,MAAQ,CACpBC,EACH2H,EAAA,QADgBS,GAAQnI,EAAAC,EAAUmI,CAAQ,CAAA,CAAA,CAAA,CAAA;MAGjB9I,CAAAA,CAAAA,GAAAA,MAAAA,CAAAA,UAAAA,CAAAA,KAAAA,EAAAqE,CAAA,MAAU,WAAzC1E,EAAA,GAAAS,EAAmEa,IAAA;;KAAX,YAAAmC,EAAA;IAEzCpD,GAAAA,MAAAA,GAAAA,CAAAA,UAAAA,CAAAA,KAAAA,EAAAqE,CAAA,MAAU,UADzB1E,EAAA,GAAAC,EAKM,OALN2C,IAKM,CADF9B,EAAyB2H,EAAA,QAAA,WAAA,CAAA,CAAA,MAE7BzI,EAAA,GAAAS,EAMuBc,IAAA;;KANO,YAAAkC,EAAA;IAEHrC,GAAAA,EAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,EAAA,OAAO,KAAKf,EAAA+C,CAAA,CAAK,IAA7B;KACN,MAAA8F;KACA,IAAArI,GADY,MAAQ,CACpBC,EACH2H,EAAA,QADgBS,GAAQnI,EAAAC,EAAUmI,CAAQ,CAAA,CAAA,CAAA,CAAA;;IAMrC9I,EAAAiG,EAAA,KAAXtG,EAAA,GAAAC,EAEM,OAFN4C,IAEM,CADFtC,EAAiEiB,GAAA;KAA3C,UAAUnB,EAAAiG,EAAA;KAAe,OAAM"}

package/dist-vue/_chunks/{PkChatbotMessages-D9uf0NMI.js → PkChatbotMessages-CnI3e9wF.js}

@@ -58,7 +58,7 @@ var H = (e) => e.state, Re = (e) => e.type.startsWith("tool-") ? e.type.slice(5)
 	showCalendarEvent: j(() => import("./PkToolShowCalendarEvent-Dv_rss26.js").then((e) => e.n)),
 	showComparison: j(() => import("./PkToolShowComparison-DQs3E6-k.js").then((e) => e.n)),
 	showContactForm: j(() => import("./PkToolShowContactForm-Y0lrHXhr.js").then((e) => e.n)),
-	showDiagram: j(() => import("./PkToolShowDiagram-BJ_ryTsD.js")),
+	showDiagram: j(() => import("./PkToolShowDiagram-7WxDObZ6.js")),
 	showEmail: j(() => import("./PkToolShowEmail-C591LR5N.js").then((e) => e.n)),
 	showImageGallery: j(() => import("./PkToolShowImageGallery-CkfXP_lD.js").then((e) => e.n)),
 	showLocation: j(() => import("./PkToolShowLocation-Dyz6h_0n.js").then((e) => e.n)),
@@ -70,7 +70,7 @@ var H = (e) => e.state, Re = (e) => e.type.startsWith("tool-") ? e.type.slice(5)
 	showSources: j(() => import("./PkToolShowSources-CSN7S0zo.js").then((e) => e.n)),
 	showSuggestedReply: j(() => import("./PkToolShowSuggestedReply-DjutyiEi.js").then((e) => e.n)),
 	showVideo: j(() => import("./PkToolShowVideo-B_Q93E2y.js")),
-	showWeather: j(() => import("./PkToolShowWeather-BH-FtLpk.js")),
+	showWeather: j(() => import("./PkToolShowWeather-BOuNrvY2.js")),
 	showWebPages: j(() => import("./PkToolShowWebPages-D3CdjJUc.js").then((e) => e.n))
 }, Ge = {
 	key: 0,
@@ -866,4 +866,4 @@ var Ze = ["aria-busy"], Qe = {
 //#endregion
 export { U as a, Ue as i, W as n, He as r, J as t };
 
-//# sourceMappingURL=PkChatbotMessages-D9uf0NMI.js.map
+//# sourceMappingURL=PkChatbotMessages-CnI3e9wF.js.map