@8wave/ai-elements 0.103.0-beta.3 → 0.103.0-beta.4

package/dist-vue/PkChatbot.js

@@ -1,2 +1,2 @@
-import { t as e } from "./_chunks/PkChatbot-DZ6TaZHh.js";
+import { t as e } from "./_chunks/PkChatbot-Ch8FlZjC.js";
 export { e as default };

package/dist-vue/PkChatbotAuth.js

@@ -1,2 +1,2 @@
-import { t as e } from "./_chunks/PkChatbotAuth-CqwTN8ih.js";
+import { t as e } from "./_chunks/PkChatbotAuth-DvnmIukc.js";
 export { e as default };

package/dist-vue/PkChatbotFeedbackForm.js

@@ -1,2 +1,2 @@
-import { t as e } from "./_chunks/PkChatbotFeedbackForm-nEevDHmI.js";
+import { t as e } from "./_chunks/PkChatbotFeedbackForm-D0RNa7bE.js";
 export { e as default };

package/dist-vue/PkChatbotMessages.js

@@ -1,2 +1,2 @@
-import { t as e } from "./_chunks/PkChatbotMessages-BgsyN-mB.js";
+import { t as e } from "./_chunks/PkChatbotMessages-DGO0WIqx.js";
 export { e as default };

package/dist-vue/PkChatbotViewChat.js

@@ -1,2 +1,2 @@
-import { t as e } from "./_chunks/PkChatbotViewChat-0g30_sQH.js";
+import { t as e } from "./_chunks/PkChatbotViewChat-Dkz8dq8N.js";
 export { e as default };

package/dist-vue/_chunks/{PkChatbot-DZ6TaZHh.js → PkChatbot-Ch8FlZjC.js}

@@ -1,7 +1,7 @@
 import { n as e, t } from "./PkStreamingMarkdown-BBni7OTn.js";
 import { n } from "./useChatbotStore-DhWHlZwO.js";
 import { t as ee } from "./PkChatbotViewConversations-p72SEhU-.js";
-import { t as te } from "./PkChatbotViewChat-0g30_sQH.js";
+import { t as te } from "./PkChatbotViewChat-Dkz8dq8N.js";
 import { t as ne } from "./PkChatbotViewFiles-C2PUVFV2.js";
 import { t as r } from "./useLocalizedString-PfaKjIQY.js";
 import { t as re } from "./PkAvatar-paEJByEA.js";
@@ -261,4 +261,4 @@ var ve = { class: "pk-chatbot__header-start" }, ye = ["title"], be = { key: 1 },
 //#endregion
 export { k as t };
 
-//# sourceMappingURL=PkChatbot-DZ6TaZHh.js.map
+//# sourceMappingURL=PkChatbot-Ch8FlZjC.js.map

package/dist-vue/_chunks/{PkChatbot-DZ6TaZHh.js.map → PkChatbot-Ch8FlZjC.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkChatbot-DZ6TaZHh.js","names":[],"sources":["../../../../packages/components/src/chat/PkChatbot.vue","../../../../packages/components/src/chat/PkChatbot.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { computed, inject, toRef, watch, watchEffect, useSlots } from 'vue'\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 { 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    // 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    const isReasoningAgent = computed(() => props.agentType === 'reasoning')\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 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        class=\"pk-chatbot\"\n        :class=\"[\n            themeClass,\n            {\n                'pk-chatbot--fullscreen': isFullscreen,\n                'pk-chatbot--panel': isPanel,\n            },\n        ]\">\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=\"isReasoningAgent\">\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-4);\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-4);\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-4);\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            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            .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                &::after {\n                    background-color: var(--color-surface);\n                    border-inline: 1px solid var(--color-surface-2);\n                    bottom: calc(-1 * var(--spacing-20));\n                    height: var(--spacing-20);\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                    border-radius: var(--rounded-xxxl); // pill shape\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            // Touch target ≥44px: estende l'hit area dei pulsanti\n            // (icona 20px + padding 4px ≈ 28px) senza ingrandire l'icona.\n            // Vale per l'input e per la barra della chiamata, che montano\n            // lo stesso pulsante.\n            .pk-chat-button {\n                position: relative;\n\n                &::after {\n                    content: '';\n                    position: absolute;\n                    inset: calc(-1 * var(--spacing-8));\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                // 60px. There is no 60 in the spacing scale and a raw `60px`\n                // would stop following the root font size, which the label\n                // inside does follow.\n                --pk-chat-dock-height: calc(\n                    var(--spacing-56) + var(--spacing-4)\n                );\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(--rounded-xxxl); // pill shape\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</style>\n","<script setup lang=\"ts\">\n    import { computed, inject, toRef, watch, watchEffect, useSlots } from 'vue'\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 { 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    // 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    const isReasoningAgent = computed(() => props.agentType === 'reasoning')\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 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        class=\"pk-chatbot\"\n        :class=\"[\n            themeClass,\n            {\n                'pk-chatbot--fullscreen': isFullscreen,\n                'pk-chatbot--panel': isPanel,\n            },\n        ]\">\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=\"isReasoningAgent\">\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-4);\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-4);\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-4);\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            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            .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                &::after {\n                    background-color: var(--color-surface);\n                    border-inline: 1px solid var(--color-surface-2);\n                    bottom: calc(-1 * var(--spacing-20));\n                    height: var(--spacing-20);\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                    border-radius: var(--rounded-xxxl); // pill shape\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            // Touch target ≥44px: estende l'hit area dei pulsanti\n            // (icona 20px + padding 4px ≈ 28px) senza ingrandire l'icona.\n            // Vale per l'input e per la barra della chiamata, che montano\n            // lo stesso pulsante.\n            .pk-chat-button {\n                position: relative;\n\n                &::after {\n                    content: '';\n                    position: absolute;\n                    inset: calc(-1 * var(--spacing-8));\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                // 60px. There is no 60 in the spacing scale and a raw `60px`\n                // would stop following the root font size, which the label\n                // inside does follow.\n                --pk-chat-dock-height: calc(\n                    var(--spacing-56) + var(--spacing-4)\n                );\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(--rounded-xxxl); // pill shape\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</style>\n"],"mappings":"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"}
+{"version":3,"file":"PkChatbot-Ch8FlZjC.js","names":[],"sources":["../../../../packages/components/src/chat/PkChatbot.vue","../../../../packages/components/src/chat/PkChatbot.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { computed, inject, toRef, watch, watchEffect, useSlots } from 'vue'\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 { 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    // 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    const isReasoningAgent = computed(() => props.agentType === 'reasoning')\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 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        class=\"pk-chatbot\"\n        :class=\"[\n            themeClass,\n            {\n                'pk-chatbot--fullscreen': isFullscreen,\n                'pk-chatbot--panel': isPanel,\n            },\n        ]\">\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=\"isReasoningAgent\">\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-4);\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-4);\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-4);\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            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            .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                &::after {\n                    background-color: var(--color-surface);\n                    border-inline: 1px solid var(--color-surface-2);\n                    bottom: calc(-1 * var(--spacing-20));\n                    height: var(--spacing-20);\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                    border-radius: var(--rounded-xxxl); // pill shape\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            // Touch target ≥44px: estende l'hit area dei pulsanti\n            // (icona 20px + padding 4px ≈ 28px) senza ingrandire l'icona.\n            // Vale per l'input e per la barra della chiamata, che montano\n            // lo stesso pulsante.\n            .pk-chat-button {\n                position: relative;\n\n                &::after {\n                    content: '';\n                    position: absolute;\n                    inset: calc(-1 * var(--spacing-8));\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                // 60px. There is no 60 in the spacing scale and a raw `60px`\n                // would stop following the root font size, which the label\n                // inside does follow.\n                --pk-chat-dock-height: calc(\n                    var(--spacing-56) + var(--spacing-4)\n                );\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(--rounded-xxxl); // pill shape\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</style>\n","<script setup lang=\"ts\">\n    import { computed, inject, toRef, watch, watchEffect, useSlots } from 'vue'\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 { 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    // 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    const isReasoningAgent = computed(() => props.agentType === 'reasoning')\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 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        class=\"pk-chatbot\"\n        :class=\"[\n            themeClass,\n            {\n                'pk-chatbot--fullscreen': isFullscreen,\n                'pk-chatbot--panel': isPanel,\n            },\n        ]\">\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=\"isReasoningAgent\">\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-4);\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-4);\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-4);\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            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            .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                &::after {\n                    background-color: var(--color-surface);\n                    border-inline: 1px solid var(--color-surface-2);\n                    bottom: calc(-1 * var(--spacing-20));\n                    height: var(--spacing-20);\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                    border-radius: var(--rounded-xxxl); // pill shape\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            // Touch target ≥44px: estende l'hit area dei pulsanti\n            // (icona 20px + padding 4px ≈ 28px) senza ingrandire l'icona.\n            // Vale per l'input e per la barra della chiamata, che montano\n            // lo stesso pulsante.\n            .pk-chat-button {\n                position: relative;\n\n                &::after {\n                    content: '';\n                    position: absolute;\n                    inset: calc(-1 * var(--spacing-8));\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                // 60px. There is no 60 in the spacing scale and a raw `60px`\n                // would stop following the root font size, which the label\n                // inside does follow.\n                --pk-chat-dock-height: calc(\n                    var(--spacing-56) + var(--spacing-4)\n                );\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(--rounded-xxxl); // pill shape\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</style>\n"],"mappings":"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"}

package/dist-vue/_chunks/{PkChatbotAuth-CqwTN8ih.js → PkChatbotAuth-DvnmIukc.js}

@@ -1,7 +1,7 @@
 import { g as e, n as t, o as n, u as r, v as i } from "./schemas-COkEQ0wM.js";
 import { i as a, n as o } from "./Media-yi949VrV.js";
 import { t as s } from "./useImageFallback-5vQIO0pC.js";
-import { t as c } from "./index.es-BT6Jr2yi.js";
+import { t as c } from "./index.es-BKxzs6Sh.js";
 import { VvAlert as ee, VvButton as l, VvButtonGroup as te, VvIcon as ne } from "@volverjs/ui-vue/components";
 import { Fragment as u, Transition as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, mergeModels as b, openBlock as x, ref as S, resolveDynamicComponent as re, toDisplayString as C, unref as w, useModel as T, watch as E, withCtx as D } from "vue";
 import { useI18n as ie } from "vue-i18n";
@@ -346,4 +346,4 @@ var j = A.extend({
 //#endregion
 export { q as t };
 
-//# sourceMappingURL=PkChatbotAuth-CqwTN8ih.js.map
+//# sourceMappingURL=PkChatbotAuth-DvnmIukc.js.map