@8wave/ai-elements 0.110.0-beta.4 → 0.111.0-beta.11

package/dist-vue/_chunks/PkChatbot-CMajc7tE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PkChatbot-CMajc7tE.js","names":[],"sources":["../../../../packages/components/src/chat/PkChatbot.vue","../../../../packages/components/src/chat/PkChatbot.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import {\n        computed,\n        inject,\n        toRef,\n        useTemplateRef,\n        watch,\n        watchEffect,\n        useSlots,\n    } from 'vue'\n    import { useElementSize } from '@vueuse/core'\n    import { storeToRefs } from 'pinia'\n    import { useI18n } from 'vue-i18n'\n    import type {\n        AgentInterface,\n        AgentModel,\n        AgentFileUpload,\n        AgentGatewayOptions,\n        AgentVoiceCapability,\n        ChatMessageActions,\n        RevisedAnswer,\n        UIChatMessage,\n        AgentTools,\n    } from 'models'\n    import {\n        useChatbotStore,\n        useLocalizedString,\n        provideShortUrlResolver,\n    } from 'composables'\n    import PkAvatar from './PkAvatar.vue'\n    import PkChatbotViewChat from './PkChatbotViewChat.vue'\n    import PkChatbotViewConversations from './PkChatbotViewConversations.vue'\n    import PkChatbotViewFiles from './PkChatbotViewFiles.vue'\n    import PkChatbotViewProfile from './PkChatbotViewProfile.vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import { ChatbotProfileContextKey } from './chatbotProfileContext'\n    import { 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\n    /**\n     * How much room the chat has, measured on the chat and not on the window.\n     *\n     * The same chat renders in a phone page, in a 408px widget, in a docked\n     * panel and in a preview frame that the side panels squeeze to phone width\n     * on a desktop screen, so the viewport says nothing about the space the\n     * layout actually has. A CSS container query would read the same number\n     * with no JavaScript, but `container-type` makes the element a containing\n     * block for `position: fixed` descendants on every engine except Chrome\n     * 129 and later, which displaces every dropdown in the chat: see\n     * docs/agents/gotchas.md, \"The chat measures its own width, and not with a\n     * container query\".\n     *\n     * The thresholds carry the modifiers, so the CSS stays declarative:\n     * `--phone` has as much room as a phone page, `--tight` is too tight for\n     * the agent chip beside the field, `--wide` has room for the outline rail\n     * beside the reading column. Before the first measurement the width is 0\n     * and no modifier applies, which is the roomy layout the base CSS writes.\n     */\n    const chatbotEl = useTemplateRef<HTMLDivElement>('chatbotEl')\n    const { width: chatbotWidth } = useElementSize(chatbotEl)\n    const isPhoneWidth = computed(\n        () => chatbotWidth.value > 0 && chatbotWidth.value < 576,\n    )\n    const isTightWidth = computed(\n        () => chatbotWidth.value > 0 && chatbotWidth.value < 640,\n    )\n    const isWideWidth = computed(() => chatbotWidth.value >= 848)\n    const isReasoningAgent = computed(() => props.agentType === 'reasoning')\n    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        ref=\"chatbotEl\"\n        class=\"pk-chatbot\"\n        :class=\"[\n            themeClass,\n            {\n                'pk-chatbot--fullscreen': isFullscreen,\n                'pk-chatbot--panel': isPanel,\n                'pk-chatbot--phone': isPhoneWidth,\n                'pk-chatbot--tight': isTightWidth,\n                'pk-chatbot--wide': isWideWidth,\n            },\n        ]\">\n        <!-- #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-3);\n        }\n\n        &__header-start {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-sm);\n            min-width: 0;\n        }\n\n        &__nav-icon {\n            font-size: var(--text-18);\n        }\n\n        &__avatar {\n            width: var(--spacing-24);\n            height: var(--spacing-24);\n        }\n\n        &__title {\n            font-size: var(--text-16);\n            font-weight: var(--font-semibold);\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        &__header-end {\n            flex-shrink: 0;\n        }\n\n        &__warning-body {\n            padding: var(--spacing-md);\n            border-bottom: 1px solid var(--color-surface-3);\n        }\n\n        &__warning-header {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-4);\n            margin-bottom: var(--spacing-4);\n        }\n\n        &__warning-icon {\n            width: var(--spacing-16);\n            height: var(--spacing-16);\n        }\n\n        &__warning-title {\n            font-weight: 600;\n            font-size: var(--text-14);\n        }\n\n        &__warning-text {\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n        }\n\n        &__footer {\n            padding: var(--spacing-md);\n            border-top: 1px solid var(--color-surface-3);\n            text-align: center;\n            font-size: var(--text-12);\n            color: var(--color-word-2);\n        }\n\n        // Modifier: fullscreen — layout full-page (Gemini-style): nessun\n        // header interno, sfondo trasparente, input pill centrato.\n        // Il chrome (sidebar, navigazione) è gestito dalla pagina ospite.\n        &--fullscreen {\n            // The dock, 60px. Declared rather than taken from the agent chip,\n            // which the tight layout hides: the pill fell to 54px there and\n            // the call bar that takes its place stayed at 60. There is no 60\n            // in the spacing scale and a raw `60px` would stop following the\n            // root font size, which the labels inside do follow.\n            --pk-chat-fullscreen-dock-height: calc(\n                var(--spacing-56) + var(--spacing-4)\n            );\n            // The pill, the notice that tucks into its top corners and the\n            // call bar all round their ends on half of it.\n            --pk-chat-dock-radius: calc(\n                var(--pk-chat-fullscreen-dock-height) / 2\n            );\n\n            background-color: transparent;\n\n            .pk-chatbot__footer {\n                border-top: none;\n                padding: 0 var(--spacing-md) var(--spacing-sm) var(--spacing-md);\n            }\n\n            // Reading column aligned with the input (Gemini-style). The\n            // constraint lives on the inner wrapper so the scroll container\n            // spans the page and the scrollbar sits at its edge.\n            .pk-chatbot-messages {\n                // Symmetric gutters: a visible scrollbar would otherwise\n                // shrink the content box on one side only, shifting the\n                // column off the input axis\n                scrollbar-gutter: stable both-edges;\n                // Dissolve the content at both edges (works on any page\n                // background, dots included — a surface-colored fade band\n                // would cut through the pattern instead)\n                mask-image: linear-gradient(\n                    to bottom,\n                    transparent 0,\n                    #000 var(--spacing-40),\n                    #000 calc(100% - var(--spacing-40)),\n                    transparent 100%\n                );\n                // Resting clearance so the first/last lines sit inside the\n                // fully opaque zone\n                padding-block: var(--spacing-48);\n            }\n\n            .pk-chatbot-messages__wrapper {\n                width: 100%;\n                max-width: 768px;\n                margin-inline: auto;\n            }\n\n            // Outline rail: wide chats only, measured on the chat and not on\n            // the viewport, so a preview frame squeezed by side panels loses\n            // it like a phone does. The rail sits at the edge of the scroll\n            // area beside the reading column: below the `--wide` threshold\n            // (768px column plus a 40px rail on each side) it would cover the\n            // messages instead.\n            .pk-chatbot-messages__outline {\n                display: none;\n            }\n\n            &.pk-chatbot--wide .pk-chatbot-messages__outline {\n                display: block;\n            }\n\n            .pk-chatbot-file-preview {\n                background-color: var(--color-surface);\n            }\n\n            .pk-chatbot-input__notice {\n                background-color: var(--color-surface);\n                border-inline: 1px solid var(--color-surface-3);\n                border-top: 1px solid var(--color-surface-2);\n                padding: var(--spacing-10) var(--spacing-16);\n\n                // As deep as the pill's corners, or the page shows through\n                // where their curve leaves the side\n                &::after {\n                    background-color: var(--color-surface);\n                    border-inline: 1px solid var(--color-surface-2);\n                    bottom: calc(-1 * var(--pk-chat-dock-radius));\n                    height: var(--pk-chat-dock-radius);\n                    left: -1px;\n                    right: -1px;\n                }\n            }\n\n            .pk-chatbot-input {\n                width: calc(100% - var(--spacing-sm) * 2);\n                max-width: 768px;\n                margin-inline: auto;\n\n                &__form {\n                    // True semicircles at rest, concentric with the send\n                    // button, whose center sits 30px in. Not `rounded-full`:\n                    // once Shift+Enter grows the field the ends would swell\n                    // with it and cut into the first and last line.\n                    border-radius: var(--pk-chat-dock-radius);\n                    min-height: var(--pk-chat-fullscreen-dock-height);\n                    padding: var(--spacing-12) var(--spacing-16);\n                    background-color: var(--color-surface-1);\n                    border-color: var(--color-surface-2);\n                    box-shadow: none;\n                    transition:\n                        border-color var(--duration-200) var(--ease-in-out),\n                        box-shadow var(--duration-200) var(--ease-in-out);\n\n                    &:has(:focus-within) {\n                        border-color: var(--color-surface-4);\n                        box-shadow: var(--shadow-sm);\n                    }\n\n                    @media (prefers-reduced-motion: reduce) {\n                        transition: none;\n                    }\n                }\n\n                &__textarea {\n                    background-color: transparent;\n                }\n            }\n\n            // 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                --pk-chat-dock-height: var(--pk-chat-fullscreen-dock-height);\n                --pk-voice-orb-size: var(--spacing-40);\n                --pk-voice-orb-bars-height: var(--spacing-20);\n                --pk-voice-session-surface: var(--color-surface-1);\n                width: calc(100% - var(--spacing-sm) * 2);\n                max-width: 768px;\n                margin-inline: auto;\n                padding-inline: var(--spacing-16);\n                border-color: var(--color-surface-2);\n                border-radius: var(--pk-chat-dock-radius);\n                box-shadow: none;\n\n                &__timer {\n                    font-size: var(--text-14);\n                }\n            }\n        }\n\n        // Modifier: panel — compact chrome for a docked side panel: the host\n        // container owns background and border, the header slims down and\n        // drops its own surface so the chat blends into the panel.\n        &--panel {\n            background-color: transparent;\n\n            .pk-chatbot__header {\n                background-color: transparent;\n\n                // Fixed height so the panel header lines up with the host's\n                // own chrome. Custom properties inherit through the shadow\n                // root: an embedding host can override it to match its\n                // header (the default matches the platform header, 50px).\n                height: var(--pk-chatbot-panel-header-height, 50px);\n                align-items: center;\n                padding-block: 0;\n                padding-inline: var(--spacing-10);\n                border-bottom: 1px solid var(--color-surface-3);\n            }\n\n            .pk-chatbot__title {\n                font-size: var(--text-14);\n            }\n\n            .pk-chatbot__footer {\n                border-top: none;\n                padding: var(--spacing-6) var(--spacing-md);\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import {\n        computed,\n        inject,\n        toRef,\n        useTemplateRef,\n        watch,\n        watchEffect,\n        useSlots,\n    } from 'vue'\n    import { useElementSize } from '@vueuse/core'\n    import { storeToRefs } from 'pinia'\n    import { useI18n } from 'vue-i18n'\n    import type {\n        AgentInterface,\n        AgentModel,\n        AgentFileUpload,\n        AgentGatewayOptions,\n        AgentVoiceCapability,\n        ChatMessageActions,\n        RevisedAnswer,\n        UIChatMessage,\n        AgentTools,\n    } from 'models'\n    import {\n        useChatbotStore,\n        useLocalizedString,\n        provideShortUrlResolver,\n    } from 'composables'\n    import PkAvatar from './PkAvatar.vue'\n    import PkChatbotViewChat from './PkChatbotViewChat.vue'\n    import PkChatbotViewConversations from './PkChatbotViewConversations.vue'\n    import PkChatbotViewFiles from './PkChatbotViewFiles.vue'\n    import PkChatbotViewProfile from './PkChatbotViewProfile.vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import { ChatbotProfileContextKey } from './chatbotProfileContext'\n    import { 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\n    /**\n     * How much room the chat has, measured on the chat and not on the window.\n     *\n     * The same chat renders in a phone page, in a 408px widget, in a docked\n     * panel and in a preview frame that the side panels squeeze to phone width\n     * on a desktop screen, so the viewport says nothing about the space the\n     * layout actually has. A CSS container query would read the same number\n     * with no JavaScript, but `container-type` makes the element a containing\n     * block for `position: fixed` descendants on every engine except Chrome\n     * 129 and later, which displaces every dropdown in the chat: see\n     * docs/agents/gotchas.md, \"The chat measures its own width, and not with a\n     * container query\".\n     *\n     * The thresholds carry the modifiers, so the CSS stays declarative:\n     * `--phone` has as much room as a phone page, `--tight` is too tight for\n     * the agent chip beside the field, `--wide` has room for the outline rail\n     * beside the reading column. Before the first measurement the width is 0\n     * and no modifier applies, which is the roomy layout the base CSS writes.\n     */\n    const chatbotEl = useTemplateRef<HTMLDivElement>('chatbotEl')\n    const { width: chatbotWidth } = useElementSize(chatbotEl)\n    const isPhoneWidth = computed(\n        () => chatbotWidth.value > 0 && chatbotWidth.value < 576,\n    )\n    const isTightWidth = computed(\n        () => chatbotWidth.value > 0 && chatbotWidth.value < 640,\n    )\n    const isWideWidth = computed(() => chatbotWidth.value >= 848)\n    const isReasoningAgent = computed(() => props.agentType === 'reasoning')\n    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        ref=\"chatbotEl\"\n        class=\"pk-chatbot\"\n        :class=\"[\n            themeClass,\n            {\n                'pk-chatbot--fullscreen': isFullscreen,\n                'pk-chatbot--panel': isPanel,\n                'pk-chatbot--phone': isPhoneWidth,\n                'pk-chatbot--tight': isTightWidth,\n                'pk-chatbot--wide': isWideWidth,\n            },\n        ]\">\n        <!-- #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-3);\n        }\n\n        &__header-start {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-sm);\n            min-width: 0;\n        }\n\n        &__nav-icon {\n            font-size: var(--text-18);\n        }\n\n        &__avatar {\n            width: var(--spacing-24);\n            height: var(--spacing-24);\n        }\n\n        &__title {\n            font-size: var(--text-16);\n            font-weight: var(--font-semibold);\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        &__header-end {\n            flex-shrink: 0;\n        }\n\n        &__warning-body {\n            padding: var(--spacing-md);\n            border-bottom: 1px solid var(--color-surface-3);\n        }\n\n        &__warning-header {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-4);\n            margin-bottom: var(--spacing-4);\n        }\n\n        &__warning-icon {\n            width: var(--spacing-16);\n            height: var(--spacing-16);\n        }\n\n        &__warning-title {\n            font-weight: 600;\n            font-size: var(--text-14);\n        }\n\n        &__warning-text {\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n        }\n\n        &__footer {\n            padding: var(--spacing-md);\n            border-top: 1px solid var(--color-surface-3);\n            text-align: center;\n            font-size: var(--text-12);\n            color: var(--color-word-2);\n        }\n\n        // Modifier: fullscreen — layout full-page (Gemini-style): nessun\n        // header interno, sfondo trasparente, input pill centrato.\n        // Il chrome (sidebar, navigazione) è gestito dalla pagina ospite.\n        &--fullscreen {\n            // The dock, 60px. Declared rather than taken from the agent chip,\n            // which the tight layout hides: the pill fell to 54px there and\n            // the call bar that takes its place stayed at 60. There is no 60\n            // in the spacing scale and a raw `60px` would stop following the\n            // root font size, which the labels inside do follow.\n            --pk-chat-fullscreen-dock-height: calc(\n                var(--spacing-56) + var(--spacing-4)\n            );\n            // The pill, the notice that tucks into its top corners and the\n            // call bar all round their ends on half of it.\n            --pk-chat-dock-radius: calc(\n                var(--pk-chat-fullscreen-dock-height) / 2\n            );\n\n            background-color: transparent;\n\n            .pk-chatbot__footer {\n                border-top: none;\n                padding: 0 var(--spacing-md) var(--spacing-sm) var(--spacing-md);\n            }\n\n            // Reading column aligned with the input (Gemini-style). The\n            // constraint lives on the inner wrapper so the scroll container\n            // spans the page and the scrollbar sits at its edge.\n            .pk-chatbot-messages {\n                // Symmetric gutters: a visible scrollbar would otherwise\n                // shrink the content box on one side only, shifting the\n                // column off the input axis\n                scrollbar-gutter: stable both-edges;\n                // Dissolve the content at both edges (works on any page\n                // background, dots included — a surface-colored fade band\n                // would cut through the pattern instead)\n                mask-image: linear-gradient(\n                    to bottom,\n                    transparent 0,\n                    #000 var(--spacing-40),\n                    #000 calc(100% - var(--spacing-40)),\n                    transparent 100%\n                );\n                // Resting clearance so the first/last lines sit inside the\n                // fully opaque zone\n                padding-block: var(--spacing-48);\n            }\n\n            .pk-chatbot-messages__wrapper {\n                width: 100%;\n                max-width: 768px;\n                margin-inline: auto;\n            }\n\n            // Outline rail: wide chats only, measured on the chat and not on\n            // the viewport, so a preview frame squeezed by side panels loses\n            // it like a phone does. The rail sits at the edge of the scroll\n            // area beside the reading column: below the `--wide` threshold\n            // (768px column plus a 40px rail on each side) it would cover the\n            // messages instead.\n            .pk-chatbot-messages__outline {\n                display: none;\n            }\n\n            &.pk-chatbot--wide .pk-chatbot-messages__outline {\n                display: block;\n            }\n\n            .pk-chatbot-file-preview {\n                background-color: var(--color-surface);\n            }\n\n            .pk-chatbot-input__notice {\n                background-color: var(--color-surface);\n                border-inline: 1px solid var(--color-surface-3);\n                border-top: 1px solid var(--color-surface-2);\n                padding: var(--spacing-10) var(--spacing-16);\n\n                // As deep as the pill's corners, or the page shows through\n                // where their curve leaves the side\n                &::after {\n                    background-color: var(--color-surface);\n                    border-inline: 1px solid var(--color-surface-2);\n                    bottom: calc(-1 * var(--pk-chat-dock-radius));\n                    height: var(--pk-chat-dock-radius);\n                    left: -1px;\n                    right: -1px;\n                }\n            }\n\n            .pk-chatbot-input {\n                width: calc(100% - var(--spacing-sm) * 2);\n                max-width: 768px;\n                margin-inline: auto;\n\n                &__form {\n                    // True semicircles at rest, concentric with the send\n                    // button, whose center sits 30px in. Not `rounded-full`:\n                    // once Shift+Enter grows the field the ends would swell\n                    // with it and cut into the first and last line.\n                    border-radius: var(--pk-chat-dock-radius);\n                    min-height: var(--pk-chat-fullscreen-dock-height);\n                    padding: var(--spacing-12) var(--spacing-16);\n                    background-color: var(--color-surface-1);\n                    border-color: var(--color-surface-2);\n                    box-shadow: none;\n                    transition:\n                        border-color var(--duration-200) var(--ease-in-out),\n                        box-shadow var(--duration-200) var(--ease-in-out);\n\n                    &:has(:focus-within) {\n                        border-color: var(--color-surface-4);\n                        box-shadow: var(--shadow-sm);\n                    }\n\n                    @media (prefers-reduced-motion: reduce) {\n                        transition: none;\n                    }\n                }\n\n                &__textarea {\n                    background-color: transparent;\n                }\n            }\n\n            // 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                --pk-chat-dock-height: var(--pk-chat-fullscreen-dock-height);\n                --pk-voice-orb-size: var(--spacing-40);\n                --pk-voice-orb-bars-height: var(--spacing-20);\n                --pk-voice-session-surface: var(--color-surface-1);\n                width: calc(100% - var(--spacing-sm) * 2);\n                max-width: 768px;\n                margin-inline: auto;\n                padding-inline: var(--spacing-16);\n                border-color: var(--color-surface-2);\n                border-radius: var(--pk-chat-dock-radius);\n                box-shadow: none;\n\n                &__timer {\n                    font-size: var(--text-14);\n                }\n            }\n        }\n\n        // Modifier: panel — compact chrome for a docked side panel: the host\n        // container owns background and border, the header slims down and\n        // drops its own surface so the chat blends into the panel.\n        &--panel {\n            background-color: transparent;\n\n            .pk-chatbot__header {\n                background-color: transparent;\n\n                // Fixed height so the panel header lines up with the host's\n                // own chrome. Custom properties inherit through the shadow\n                // root: an embedding host can override it to match its\n                // header (the default matches the platform header, 50px).\n                height: var(--pk-chatbot-panel-header-height, 50px);\n                align-items: center;\n                padding-block: 0;\n                padding-inline: var(--spacing-10);\n                border-bottom: 1px solid var(--color-surface-3);\n            }\n\n            .pk-chatbot__title {\n                font-size: var(--text-14);\n            }\n\n            .pk-chatbot__footer {\n                border-top: none;\n                padding: var(--spacing-6) var(--spacing-md);\n            }\n        }\n    }\n</style>\n"],"mappings":"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"}

package/dist-vue/_chunks/{PkChatbotEmptyState-BvaeBxhx.js → PkChatbotEmptyState-BtzBYOHJ.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./PkStreamingMarkdown-D8_LwZMR.js";
+import { t as e } from "./PkStreamingMarkdown-D0IOaETI.js";
 import { t } from "./PkAvatar-paEJByEA.js";
 import { createBlock as n, createCommentVNode as r, createElementBlock as i, defineComponent as a, openBlock as o } from "vue";
 //#region ../../packages/components/src/chat/PkChatbotEmptyState.vue?vue&type=script&setup=true&lang.ts
@@ -27,4 +27,4 @@ var s = { class: "pk-chatbot-empty-state" }, c = /* @__PURE__ */ a({
 //#endregion
 export { c as t };
 
-//# sourceMappingURL=PkChatbotEmptyState-BvaeBxhx.js.map
+//# sourceMappingURL=PkChatbotEmptyState-BtzBYOHJ.js.map

package/dist-vue/_chunks/{PkChatbotEmptyState-BvaeBxhx.js.map → PkChatbotEmptyState-BtzBYOHJ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkChatbotEmptyState-BvaeBxhx.js","names":[],"sources":["../../../../packages/components/src/chat/PkChatbotEmptyState.vue","../../../../packages/components/src/chat/PkChatbotEmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import PkAvatar from './PkAvatar.vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n    defineProps<{\n        greeting?: string\n        /** Agent avatar shown above the greeting where the input chip is hidden (mobile) */\n        logo?: string | null\n        name?: string\n    }>()\n</script>\n\n<template>\n    <div class=\"pk-chatbot-empty-state\">\n        <PkAvatar\n            v-if=\"logo || name\"\n            class=\"pk-chatbot-empty-state__avatar\"\n            modifiers=\"surface\"\n            :img-src=\"logo\"\n            :name=\"name\" />\n        <PkStreamingMarkdown\n            v-if=\"greeting\"\n            :markdown=\"greeting\"\n            :animation=\"null\"\n            class=\"wysiwyg pk-chatbot-empty-state__greeting\" />\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-empty-state {\n        // Above the fullscreen ambient glow\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: var(--spacing-sm);\n        padding: var(--spacing-md);\n        text-align: center;\n\n        // Let the greeting wrap on a couple of lines (Gemini-like). Keyed on\n        // the chat's own width (`--phone`, measured in PkChatbot): a narrow\n        // preview frame on a desktop screen wraps like a phone\n        .pk-chatbot--phone & {\n            padding-inline: var(--spacing-56);\n        }\n\n        &__avatar {\n            width: var(--spacing-64);\n            height: var(--spacing-64);\n            font-size: var(--text-20);\n            border-radius: var(--rounded-full);\n\n            // The agent identity lives in the input chip when that is\n            // visible: the chip hides itself at `--tight`, so keying the\n            // avatar on the absence of that modifier shows exactly one of\n            // the two\n            .pk-chatbot:not(.pk-chatbot--tight) & {\n                display: none;\n            }\n        }\n\n        &__greeting {\n            font-size: var(--text-28);\n            font-weight: var(--font-light);\n            color: var(--color-word-1);\n            text-wrap: balance;\n\n            // Render the greeting markdown inline as a single heading line\n            :first-child {\n                margin-top: 0;\n            }\n\n            :last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        // Enters fading in from below, in sync with the glow ignition\n        &__avatar,\n        &__greeting {\n            animation: pk-chatbot-greeting-enter 600ms var(--ease-out) both;\n\n            @media (prefers-reduced-motion: reduce) {\n                animation: none;\n            }\n        }\n    }\n\n    @keyframes pk-chatbot-greeting-enter {\n        from {\n            opacity: 0;\n            transform: translateY(var(--spacing-16));\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import PkAvatar from './PkAvatar.vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n    defineProps<{\n        greeting?: string\n        /** Agent avatar shown above the greeting where the input chip is hidden (mobile) */\n        logo?: string | null\n        name?: string\n    }>()\n</script>\n\n<template>\n    <div class=\"pk-chatbot-empty-state\">\n        <PkAvatar\n            v-if=\"logo || name\"\n            class=\"pk-chatbot-empty-state__avatar\"\n            modifiers=\"surface\"\n            :img-src=\"logo\"\n            :name=\"name\" />\n        <PkStreamingMarkdown\n            v-if=\"greeting\"\n            :markdown=\"greeting\"\n            :animation=\"null\"\n            class=\"wysiwyg pk-chatbot-empty-state__greeting\" />\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-empty-state {\n        // Above the fullscreen ambient glow\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: var(--spacing-sm);\n        padding: var(--spacing-md);\n        text-align: center;\n\n        // Let the greeting wrap on a couple of lines (Gemini-like). Keyed on\n        // the chat's own width (`--phone`, measured in PkChatbot): a narrow\n        // preview frame on a desktop screen wraps like a phone\n        .pk-chatbot--phone & {\n            padding-inline: var(--spacing-56);\n        }\n\n        &__avatar {\n            width: var(--spacing-64);\n            height: var(--spacing-64);\n            font-size: var(--text-20);\n            border-radius: var(--rounded-full);\n\n            // The agent identity lives in the input chip when that is\n            // visible: the chip hides itself at `--tight`, so keying the\n            // avatar on the absence of that modifier shows exactly one of\n            // the two\n            .pk-chatbot:not(.pk-chatbot--tight) & {\n                display: none;\n            }\n        }\n\n        &__greeting {\n            font-size: var(--text-28);\n            font-weight: var(--font-light);\n            color: var(--color-word-1);\n            text-wrap: balance;\n\n            // Render the greeting markdown inline as a single heading line\n            :first-child {\n                margin-top: 0;\n            }\n\n            :last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        // Enters fading in from below, in sync with the glow ignition\n        &__avatar,\n        &__greeting {\n            animation: pk-chatbot-greeting-enter 600ms var(--ease-out) both;\n\n            @media (prefers-reduced-motion: reduce) {\n                animation: none;\n            }\n        }\n    }\n\n    @keyframes pk-chatbot-greeting-enter {\n        from {\n            opacity: 0;\n            transform: translateY(var(--spacing-16));\n        }\n    }\n</style>\n"],"mappings":";;;;;;;;;;;;oBAaI,EAAA,GAAA,EAYM,OAZN,GAYM,CAVQ,EAAA,QAAQ,EAAA,QADlB,EAAA,GAAA,EAKmB,GAAA;;GAHf,OAAM;GACN,WAAU;GACT,WAAS,EAAA;GACT,MAAM,EAAA;EAED,GAAA,MAAA,GAAA,CAAA,WAAA,MAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAAA,EAAA,YADV,EAAA,GAAA,EAIuD,GAAA;;GAFlD,UAAU,EAAA;GACV,WAAW;GACZ,OAAM"}
+{"version":3,"file":"PkChatbotEmptyState-BtzBYOHJ.js","names":[],"sources":["../../../../packages/components/src/chat/PkChatbotEmptyState.vue","../../../../packages/components/src/chat/PkChatbotEmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import PkAvatar from './PkAvatar.vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n    defineProps<{\n        greeting?: string\n        /** Agent avatar shown above the greeting where the input chip is hidden (mobile) */\n        logo?: string | null\n        name?: string\n    }>()\n</script>\n\n<template>\n    <div class=\"pk-chatbot-empty-state\">\n        <PkAvatar\n            v-if=\"logo || name\"\n            class=\"pk-chatbot-empty-state__avatar\"\n            modifiers=\"surface\"\n            :img-src=\"logo\"\n            :name=\"name\" />\n        <PkStreamingMarkdown\n            v-if=\"greeting\"\n            :markdown=\"greeting\"\n            :animation=\"null\"\n            class=\"wysiwyg pk-chatbot-empty-state__greeting\" />\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-empty-state {\n        // Above the fullscreen ambient glow\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: var(--spacing-sm);\n        padding: var(--spacing-md);\n        text-align: center;\n\n        // Let the greeting wrap on a couple of lines (Gemini-like). Keyed on\n        // the chat's own width (`--phone`, measured in PkChatbot): a narrow\n        // preview frame on a desktop screen wraps like a phone\n        .pk-chatbot--phone & {\n            padding-inline: var(--spacing-56);\n        }\n\n        &__avatar {\n            width: var(--spacing-64);\n            height: var(--spacing-64);\n            font-size: var(--text-20);\n            border-radius: var(--rounded-full);\n\n            // The agent identity lives in the input chip when that is\n            // visible: the chip hides itself at `--tight`, so keying the\n            // avatar on the absence of that modifier shows exactly one of\n            // the two\n            .pk-chatbot:not(.pk-chatbot--tight) & {\n                display: none;\n            }\n        }\n\n        &__greeting {\n            font-size: var(--text-28);\n            font-weight: var(--font-light);\n            color: var(--color-word-1);\n            text-wrap: balance;\n\n            // Render the greeting markdown inline as a single heading line\n            :first-child {\n                margin-top: 0;\n            }\n\n            :last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        // Enters fading in from below, in sync with the glow ignition\n        &__avatar,\n        &__greeting {\n            animation: pk-chatbot-greeting-enter 600ms var(--ease-out) both;\n\n            @media (prefers-reduced-motion: reduce) {\n                animation: none;\n            }\n        }\n    }\n\n    @keyframes pk-chatbot-greeting-enter {\n        from {\n            opacity: 0;\n            transform: translateY(var(--spacing-16));\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import PkAvatar from './PkAvatar.vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n    defineProps<{\n        greeting?: string\n        /** Agent avatar shown above the greeting where the input chip is hidden (mobile) */\n        logo?: string | null\n        name?: string\n    }>()\n</script>\n\n<template>\n    <div class=\"pk-chatbot-empty-state\">\n        <PkAvatar\n            v-if=\"logo || name\"\n            class=\"pk-chatbot-empty-state__avatar\"\n            modifiers=\"surface\"\n            :img-src=\"logo\"\n            :name=\"name\" />\n        <PkStreamingMarkdown\n            v-if=\"greeting\"\n            :markdown=\"greeting\"\n            :animation=\"null\"\n            class=\"wysiwyg pk-chatbot-empty-state__greeting\" />\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-empty-state {\n        // Above the fullscreen ambient glow\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: var(--spacing-sm);\n        padding: var(--spacing-md);\n        text-align: center;\n\n        // Let the greeting wrap on a couple of lines (Gemini-like). Keyed on\n        // the chat's own width (`--phone`, measured in PkChatbot): a narrow\n        // preview frame on a desktop screen wraps like a phone\n        .pk-chatbot--phone & {\n            padding-inline: var(--spacing-56);\n        }\n\n        &__avatar {\n            width: var(--spacing-64);\n            height: var(--spacing-64);\n            font-size: var(--text-20);\n            border-radius: var(--rounded-full);\n\n            // The agent identity lives in the input chip when that is\n            // visible: the chip hides itself at `--tight`, so keying the\n            // avatar on the absence of that modifier shows exactly one of\n            // the two\n            .pk-chatbot:not(.pk-chatbot--tight) & {\n                display: none;\n            }\n        }\n\n        &__greeting {\n            font-size: var(--text-28);\n            font-weight: var(--font-light);\n            color: var(--color-word-1);\n            text-wrap: balance;\n\n            // Render the greeting markdown inline as a single heading line\n            :first-child {\n                margin-top: 0;\n            }\n\n            :last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        // Enters fading in from below, in sync with the glow ignition\n        &__avatar,\n        &__greeting {\n            animation: pk-chatbot-greeting-enter 600ms var(--ease-out) both;\n\n            @media (prefers-reduced-motion: reduce) {\n                animation: none;\n            }\n        }\n    }\n\n    @keyframes pk-chatbot-greeting-enter {\n        from {\n            opacity: 0;\n            transform: translateY(var(--spacing-16));\n        }\n    }\n</style>\n"],"mappings":";;;;;;;;;;;;oBAaI,EAAA,GAAA,EAYM,OAZN,GAYM,CAVQ,EAAA,QAAQ,EAAA,QADlB,EAAA,GAAA,EAKmB,GAAA;;GAHf,OAAM;GACN,WAAU;GACT,WAAS,EAAA;GACT,MAAM,EAAA;EAED,GAAA,MAAA,GAAA,CAAA,WAAA,MAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAAA,EAAA,YADV,EAAA,GAAA,EAIuD,GAAA;;GAFlD,UAAU,EAAA;GACV,WAAW;GACZ,OAAM"}

package/dist-vue/_chunks/{PkChatbotError-CBP2mf-n.js → PkChatbotError-gvDpRcEz.js}

@@ -27,7 +27,7 @@ function b(e) {
 	return _(e?.message)?.payload;
 }
 function x(e) {
-	let t = n(() => y(f(e), "context_length_exceeded")), r = n(() => y(f(e), "entity-not-found")), i = n(() => y(f(e), "rate-limit-exceeded")), a = n(() => y(f(e), "origin-not-allowed")), o = n(() => y(f(e), "credit-exhausted")), s = n(() => y(f(e), "conversation-blocked")), c = n(() => y(f(e), "bad request")), l = n(() => y(f(e), "internal-server-error")), u = n(() => v(f(e)?.message, "GATEWAY_CONFIG"));
+	let t = n(() => y(f(e), "context_length_exceeded")), r = n(() => y(f(e), "entity-not-found")), i = n(() => y(f(e), "rate-limit-exceeded")), a = n(() => y(f(e), "origin-not-allowed")), o = n(() => y(f(e), "credit-exhausted")), s = n(() => y(f(e), "conversation-blocked")), c = n(() => y(f(e), "bad request")), l = n(() => y(f(e), "internal-server-error")), u = n(() => v(f(e)?.message, "GATEWAY_CONFIG")), d = n(() => y(f(e), "gateway-disabled")), p = n(() => y(f(e), "model-unavailable"));
 	return {
 		isContextWindowError: t,
 		isNotFoundError: r,
@@ -38,7 +38,9 @@ function x(e) {
 		isBadRequestError: c,
 		isInternalServerError: l,
 		isGatewayConfigError: u,
-		isRefreshableError: n(() => !t.value && !r.value && !a.value && !o.value && !s.value && !c.value && !l.value && !u.value)
+		isGatewayDisabledError: d,
+		isModelUnavailableError: p,
+		isRefreshableError: n(() => !t.value && !r.value && !a.value && !o.value && !s.value && !c.value && !l.value && !u.value && !d.value && !p.value)
 	};
 }
 //#endregion
@@ -48,51 +50,51 @@ var S = /* @__PURE__ */ s({
 	props: { error: {} },
 	emits: ["retry", "reset"],
 	setup(s, { emit: f }) {
-		let _ = s, v = f, { t: y } = g({ useScope: "global" }), { isContextWindowError: S, isNotFoundError: C, isRateLimitError: w, isOriginNotAllowedError: T, isCreditExhaustedError: E, isConversationBlockedError: D, isBadRequestError: O, isInternalServerError: k, isGatewayConfigError: A, isRefreshableError: j } = x(() => _.error), M = n(() => {
+		let _ = s, v = f, { t: y } = g({ useScope: "global" }), { isContextWindowError: S, isNotFoundError: C, isRateLimitError: w, isOriginNotAllowedError: T, isCreditExhaustedError: E, isConversationBlockedError: D, isBadRequestError: O, isInternalServerError: k, isGatewayConfigError: A, isGatewayDisabledError: j, isModelUnavailableError: M, isRefreshableError: N } = x(() => _.error), P = n(() => T.value || E.value || A.value || j.value || M.value), F = n(() => {
 			if (A.value) {
 				let e = b(_.error);
 				return e?.reason === "disallowPromptTraining" ? y("message.chatErrorGatewayPromptTraining", { model: e.model }) : e?.reason === "zeroDataRetention" ? y("message.chatErrorGatewayZdr", { model: e.model }) : y("message.chatErrorGeneric");
 			}
-			return S.value ? y("message.chatErrorContextWindow") : C.value ? y("message.chatErrorNotFound") : w.value ? y("message.chatErrorRateLimit", { seconds: N.value }) : T.value ? y("message.chatErrorOriginNotAllowed") : E.value ? y("message.chatErrorCreditExhausted") : D.value ? y("message.chatErrorConversationBlocked") : O.value ? y("message.chatErrorBadRequest") : k.value ? y("message.chatErrorInternalServer") : y("message.chatErrorGeneric", { seconds: N.value });
-		}), N = u(0), P = u();
+			return S.value ? y("message.chatErrorContextWindow") : C.value ? y("message.chatErrorNotFound") : w.value ? y("message.chatErrorRateLimit", { seconds: I.value }) : T.value ? y("message.chatErrorOriginNotAllowed") : E.value ? y("message.chatErrorCreditExhausted") : j.value ? y("message.chatErrorGatewayDisabled") : M.value ? y("message.chatErrorModelUnavailable") : D.value ? y("message.chatErrorConversationBlocked") : O.value ? y("message.chatErrorBadRequest") : k.value ? y("message.chatErrorInternalServer") : y("message.chatErrorGeneric", { seconds: I.value });
+		}), I = u(0), L = u();
 		return m(() => _.error, (e) => {
-			if (P.value && clearTimeout(P.value), e && j.value) {
-				N.value = 10;
+			if (L.value && clearTimeout(L.value), e && N.value) {
+				I.value = 10;
 				let e = () => {
-					if (N.value--, N.value <= 0) {
+					if (I.value--, I.value <= 0) {
 						v("retry");
 						return;
 					}
-					P.value = setTimeout(e, 1e3);
+					L.value = setTimeout(e, 1e3);
 				};
-				P.value = setTimeout(e, 1e3);
-			} else N.value = 0;
+				L.value = setTimeout(e, 1e3);
+			} else I.value = 0;
 		}, { immediate: !0 }), c(() => {
-			P.value && clearTimeout(P.value);
+			L.value && clearTimeout(L.value);
 		}), (n, s) => {
 			let c = t, u = e;
 			return l(), r(u, {
-				modifiers: p(j) ? "warning" : "danger",
+				modifiers: p(N) ? "warning" : "danger",
 				class: "rounded-lg"
 			}, a({
-				default: h(() => [o(d(M.value) + " ", 1)]),
+				default: h(() => [o(d(F.value) + " ", 1)]),
 				_: 2
-			}, [p(j) || !p(T) && !p(E) && !p(A) ? {
+			}, [p(N) || !P.value ? {
 				name: "footer",
-				fn: h(() => [p(j) ? (l(), r(c, {
+				fn: h(() => [p(N) ? (l(), r(c, {
 					key: 0,
 					icon: "ri:reset-right-line",
 					modifiers: "action",
 					class: "text-12",
 					label: p(y)("action.retryNow"),
 					onClick: s[0] ||= (e) => n.$emit("retry")
-				}, null, 8, ["label"])) : !p(T) && !p(E) && !p(A) ? (l(), r(c, {
+				}, null, 8, ["label"])) : P.value ? i("", !0) : (l(), r(c, {
 					key: 1,
 					icon: "reload",
 					modifiers: "action",
 					label: p(y)("label.newChat"),
 					onClick: s[1] ||= (e) => n.$emit("reset")
-				}, null, 8, ["label"])) : i("", !0)]),
+				}, null, 8, ["label"]))]),
 				key: "0"
 			} : void 0]), 1032, ["modifiers"]);
 		};
@@ -101,4 +103,4 @@ var S = /* @__PURE__ */ s({
 //#endregion
 export { S as t };
 
-//# sourceMappingURL=PkChatbotError-CBP2mf-n.js.map
+//# sourceMappingURL=PkChatbotError-gvDpRcEz.js.map

package/dist-vue/_chunks/PkChatbotError-gvDpRcEz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PkChatbotError-gvDpRcEz.js","names":["$emit"],"sources":["../../../../packages/models/src/schema/StreamError.ts","../../../../packages/composable/src/useChatbotError.ts","../../../../packages/components/src/chat/PkChatbotError.vue","../../../../packages/components/src/chat/PkChatbotError.vue"],"sourcesContent":["export const STREAM_ERROR_PREFIX = 'STREAM_ERROR:'\n\nexport const StreamErrorCode = {\n    GATEWAY_CONFIG: 'GATEWAY_CONFIG',\n} as const\n\nexport type StreamErrorCode =\n    (typeof StreamErrorCode)[keyof typeof StreamErrorCode]\n\nexport interface StreamErrorPayload {\n    reason: string\n    model?: string\n    [key: string]: unknown\n}\n\nexport function formatStreamError(\n    code: string,\n    payload: StreamErrorPayload,\n): string {\n    return `${STREAM_ERROR_PREFIX}${code}:${JSON.stringify(payload)}`\n}\n\nexport function parseStreamError(\n    message: string | undefined,\n): { code: string; payload: StreamErrorPayload } | undefined {\n    if (!message?.startsWith(STREAM_ERROR_PREFIX)) {\n        return undefined\n    }\n    const afterPrefix = message.slice(STREAM_ERROR_PREFIX.length)\n    const colonIndex = afterPrefix.indexOf(':')\n    if (colonIndex === -1) {\n        return undefined\n    }\n    const code = afterPrefix.slice(0, colonIndex)\n    try {\n        const payload = JSON.parse(\n            afterPrefix.slice(colonIndex + 1),\n        ) as StreamErrorPayload\n        return { code, payload }\n    } catch {\n        return undefined\n    }\n}\n\nexport function matchesStreamErrorCode(\n    message: string | undefined,\n    code: string,\n): boolean {\n    return message?.startsWith(`${STREAM_ERROR_PREFIX}${code}:`) ?? false\n}\n","import { computed, toValue, type MaybeRefOrGetter } from 'vue'\nimport {\n    matchesStreamErrorCode as matchesStreamCode,\n    parseStreamError,\n    type StreamErrorPayload,\n} from 'models'\n\nexport type { StreamErrorPayload }\n\ntype ErrorCode =\n    | 'context_length_exceeded'\n    | 'entity-not-found'\n    | 'rate-limit-exceeded'\n    | 'origin-not-allowed'\n    | 'credit-exhausted'\n    | 'conversation-blocked'\n    | 'bad request'\n    | 'internal-server-error'\n    | 'gateway-disabled'\n    | 'model-unavailable'\n\nfunction matchesCode(error: Error | undefined, code: ErrorCode): boolean {\n    return error?.message?.toLowerCase().includes(code) ?? false\n}\n\nexport function getStreamErrorPayload(\n    error: Error | undefined,\n): StreamErrorPayload | undefined {\n    return parseStreamError(error?.message)?.payload\n}\n\nexport function useChatbotError(error: MaybeRefOrGetter<Error | undefined>) {\n    const isContextWindowError = computed(() =>\n        matchesCode(toValue(error), 'context_length_exceeded'),\n    )\n    const isNotFoundError = computed(() =>\n        matchesCode(toValue(error), 'entity-not-found'),\n    )\n    const isRateLimitError = computed(() =>\n        matchesCode(toValue(error), 'rate-limit-exceeded'),\n    )\n    const isOriginNotAllowedError = computed(() =>\n        matchesCode(toValue(error), 'origin-not-allowed'),\n    )\n    const isCreditExhaustedError = computed(() =>\n        matchesCode(toValue(error), 'credit-exhausted'),\n    )\n    const isConversationBlockedError = computed(() =>\n        matchesCode(toValue(error), 'conversation-blocked'),\n    )\n    const isBadRequestError = computed(() =>\n        matchesCode(toValue(error), 'bad request'),\n    )\n    const isInternalServerError = computed(() =>\n        matchesCode(toValue(error), 'internal-server-error'),\n    )\n    const isGatewayConfigError = computed(() =>\n        matchesStreamCode(toValue(error)?.message, 'GATEWAY_CONFIG'),\n    )\n    /**\n     * The organization does not use the platform gateway and this agent's\n     * model is one of its. A decision, not a hiccup: retrying in ten seconds\n     * gets the same answer.\n     */\n    const isGatewayDisabledError = computed(() =>\n        matchesCode(toValue(error), 'gateway-disabled'),\n    )\n    /**\n     * The agent's model is on the organization's endpoint, which is off, gone\n     * or no longer serves it. It lasts until somebody changes the endpoint or\n     * the agent, so it is not retried either.\n     */\n    const isModelUnavailableError = computed(() =>\n        matchesCode(toValue(error), 'model-unavailable'),\n    )\n\n    /** Errors that trigger an automatic retry countdown */\n    const isRefreshableError = computed(\n        () =>\n            !isContextWindowError.value &&\n            !isNotFoundError.value &&\n            !isOriginNotAllowedError.value &&\n            !isCreditExhaustedError.value &&\n            !isConversationBlockedError.value &&\n            !isBadRequestError.value &&\n            !isInternalServerError.value &&\n            !isGatewayConfigError.value &&\n            !isGatewayDisabledError.value &&\n            !isModelUnavailableError.value,\n    )\n\n    return {\n        isContextWindowError,\n        isNotFoundError,\n        isRateLimitError,\n        isOriginNotAllowedError,\n        isCreditExhaustedError,\n        isConversationBlockedError,\n        isBadRequestError,\n        isInternalServerError,\n        isGatewayConfigError,\n        isGatewayDisabledError,\n        isModelUnavailableError,\n        isRefreshableError,\n    }\n}\n","<script lang=\"ts\" setup>\n    import { computed, onBeforeUnmount, ref, watch } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { useChatbotError, getStreamErrorPayload } from 'composables'\n\n    const props = defineProps<{\n        error?: Error\n    }>()\n\n    const emit = defineEmits<{\n        (e: 'retry'): void\n        (e: 'reset'): void\n    }>()\n\n    const { t: $t } = useI18n({\n        useScope: 'global',\n    })\n\n    const {\n        isContextWindowError,\n        isNotFoundError,\n        isRateLimitError,\n        isOriginNotAllowedError,\n        isCreditExhaustedError,\n        isConversationBlockedError,\n        isBadRequestError,\n        isInternalServerError,\n        isGatewayConfigError,\n        isGatewayDisabledError,\n        isModelUnavailableError,\n        isRefreshableError,\n    } = useChatbotError(() => props.error)\n\n    /**\n     * Nothing the user of the chat can do about: a new conversation meets the\n     * same answer, so the alert offers no button, as for exhausted credit.\n     */\n    const isOutOfUserReach = computed(\n        () =>\n            isOriginNotAllowedError.value ||\n            isCreditExhaustedError.value ||\n            isGatewayConfigError.value ||\n            isGatewayDisabledError.value ||\n            isModelUnavailableError.value,\n    )\n\n    const errorMessage = computed(() => {\n        if (isGatewayConfigError.value) {\n            const payload = getStreamErrorPayload(props.error)\n            if (payload?.reason === 'disallowPromptTraining') {\n                return $t('message.chatErrorGatewayPromptTraining', {\n                    model: payload.model,\n                })\n            }\n            if (payload?.reason === 'zeroDataRetention') {\n                return $t('message.chatErrorGatewayZdr', {\n                    model: payload.model,\n                })\n            }\n            return $t('message.chatErrorGeneric')\n        }\n        if (isContextWindowError.value) {\n            return $t('message.chatErrorContextWindow')\n        }\n        if (isNotFoundError.value) {\n            return $t('message.chatErrorNotFound')\n        }\n        if (isRateLimitError.value) {\n            return $t('message.chatErrorRateLimit', {\n                seconds: retryCountdown.value,\n            })\n        }\n        if (isOriginNotAllowedError.value) {\n            return $t('message.chatErrorOriginNotAllowed')\n        }\n        if (isCreditExhaustedError.value) {\n            return $t('message.chatErrorCreditExhausted')\n        }\n        if (isGatewayDisabledError.value) {\n            return $t('message.chatErrorGatewayDisabled')\n        }\n        if (isModelUnavailableError.value) {\n            return $t('message.chatErrorModelUnavailable')\n        }\n        if (isConversationBlockedError.value) {\n            return $t('message.chatErrorConversationBlocked')\n        }\n        if (isBadRequestError.value) {\n            return $t('message.chatErrorBadRequest')\n        }\n        if (isInternalServerError.value) {\n            return $t('message.chatErrorInternalServer')\n        }\n        return $t('message.chatErrorGeneric', { seconds: retryCountdown.value })\n    })\n\n    const retryCountdown = ref<number>(0)\n    const retryTimer = ref<ReturnType<typeof setTimeout>>()\n\n    watch(\n        () => props.error,\n        (error) => {\n            if (retryTimer.value) {\n                clearTimeout(retryTimer.value)\n            }\n\n            if (error && isRefreshableError.value) {\n                retryCountdown.value = 10\n                const tick = () => {\n                    retryCountdown.value--\n                    if (retryCountdown.value <= 0) {\n                        emit('retry')\n                        return\n                    }\n                    retryTimer.value = setTimeout(tick, 1000)\n                }\n                retryTimer.value = setTimeout(tick, 1000)\n            } else {\n                retryCountdown.value = 0\n            }\n        },\n        { immediate: true },\n    )\n\n    onBeforeUnmount(() => {\n        if (retryTimer.value) {\n            clearTimeout(retryTimer.value)\n        }\n    })\n</script>\n\n<template>\n    <VvAlert\n        :modifiers=\"isRefreshableError ? 'warning' : 'danger'\"\n        class=\"rounded-lg\">\n        <!-- The modifier already paints the alert and picks its icon: tinting\n             the content again, with a 32px glyph nothing else in the chat\n             matches, said the same thing three times (DESIGN.md). -->\n        {{ errorMessage }}\n        <template v-if=\"isRefreshableError || !isOutOfUserReach\" #footer>\n            <VvButton\n                v-if=\"isRefreshableError\"\n                icon=\"ri:reset-right-line\"\n                modifiers=\"action\"\n                class=\"text-12\"\n                :label=\"$t('action.retryNow')\"\n                @click=\"$emit('retry')\" />\n            <VvButton\n                v-else-if=\"!isOutOfUserReach\"\n                icon=\"reload\"\n                modifiers=\"action\"\n                :label=\"$t('label.newChat')\"\n                @click=\"$emit('reset')\" />\n        </template>\n    </VvAlert>\n</template>\n","<script lang=\"ts\" setup>\n    import { computed, onBeforeUnmount, ref, watch } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { useChatbotError, getStreamErrorPayload } from 'composables'\n\n    const props = defineProps<{\n        error?: Error\n    }>()\n\n    const emit = defineEmits<{\n        (e: 'retry'): void\n        (e: 'reset'): void\n    }>()\n\n    const { t: $t } = useI18n({\n        useScope: 'global',\n    })\n\n    const {\n        isContextWindowError,\n        isNotFoundError,\n        isRateLimitError,\n        isOriginNotAllowedError,\n        isCreditExhaustedError,\n        isConversationBlockedError,\n        isBadRequestError,\n        isInternalServerError,\n        isGatewayConfigError,\n        isGatewayDisabledError,\n        isModelUnavailableError,\n        isRefreshableError,\n    } = useChatbotError(() => props.error)\n\n    /**\n     * Nothing the user of the chat can do about: a new conversation meets the\n     * same answer, so the alert offers no button, as for exhausted credit.\n     */\n    const isOutOfUserReach = computed(\n        () =>\n            isOriginNotAllowedError.value ||\n            isCreditExhaustedError.value ||\n            isGatewayConfigError.value ||\n            isGatewayDisabledError.value ||\n            isModelUnavailableError.value,\n    )\n\n    const errorMessage = computed(() => {\n        if (isGatewayConfigError.value) {\n            const payload = getStreamErrorPayload(props.error)\n            if (payload?.reason === 'disallowPromptTraining') {\n                return $t('message.chatErrorGatewayPromptTraining', {\n                    model: payload.model,\n                })\n            }\n            if (payload?.reason === 'zeroDataRetention') {\n                return $t('message.chatErrorGatewayZdr', {\n                    model: payload.model,\n                })\n            }\n            return $t('message.chatErrorGeneric')\n        }\n        if (isContextWindowError.value) {\n            return $t('message.chatErrorContextWindow')\n        }\n        if (isNotFoundError.value) {\n            return $t('message.chatErrorNotFound')\n        }\n        if (isRateLimitError.value) {\n            return $t('message.chatErrorRateLimit', {\n                seconds: retryCountdown.value,\n            })\n        }\n        if (isOriginNotAllowedError.value) {\n            return $t('message.chatErrorOriginNotAllowed')\n        }\n        if (isCreditExhaustedError.value) {\n            return $t('message.chatErrorCreditExhausted')\n        }\n        if (isGatewayDisabledError.value) {\n            return $t('message.chatErrorGatewayDisabled')\n        }\n        if (isModelUnavailableError.value) {\n            return $t('message.chatErrorModelUnavailable')\n        }\n        if (isConversationBlockedError.value) {\n            return $t('message.chatErrorConversationBlocked')\n        }\n        if (isBadRequestError.value) {\n            return $t('message.chatErrorBadRequest')\n        }\n        if (isInternalServerError.value) {\n            return $t('message.chatErrorInternalServer')\n        }\n        return $t('message.chatErrorGeneric', { seconds: retryCountdown.value })\n    })\n\n    const retryCountdown = ref<number>(0)\n    const retryTimer = ref<ReturnType<typeof setTimeout>>()\n\n    watch(\n        () => props.error,\n        (error) => {\n            if (retryTimer.value) {\n                clearTimeout(retryTimer.value)\n            }\n\n            if (error && isRefreshableError.value) {\n                retryCountdown.value = 10\n                const tick = () => {\n                    retryCountdown.value--\n                    if (retryCountdown.value <= 0) {\n                        emit('retry')\n                        return\n                    }\n                    retryTimer.value = setTimeout(tick, 1000)\n                }\n                retryTimer.value = setTimeout(tick, 1000)\n            } else {\n                retryCountdown.value = 0\n            }\n        },\n        { immediate: true },\n    )\n\n    onBeforeUnmount(() => {\n        if (retryTimer.value) {\n            clearTimeout(retryTimer.value)\n        }\n    })\n</script>\n\n<template>\n    <VvAlert\n        :modifiers=\"isRefreshableError ? 'warning' : 'danger'\"\n        class=\"rounded-lg\">\n        <!-- The modifier already paints the alert and picks its icon: tinting\n             the content again, with a 32px glyph nothing else in the chat\n             matches, said the same thing three times (DESIGN.md). -->\n        {{ errorMessage }}\n        <template v-if=\"isRefreshableError || !isOutOfUserReach\" #footer>\n            <VvButton\n                v-if=\"isRefreshableError\"\n                icon=\"ri:reset-right-line\"\n                modifiers=\"action\"\n                class=\"text-12\"\n                :label=\"$t('action.retryNow')\"\n                @click=\"$emit('retry')\" />\n            <VvButton\n                v-else-if=\"!isOutOfUserReach\"\n                icon=\"reload\"\n                modifiers=\"action\"\n                :label=\"$t('label.newChat')\"\n                @click=\"$emit('reset')\" />\n        </template>\n    </VvAlert>\n</template>\n"],"mappings":";;;AAsBA,SAAgB,EACZ,GACyD;CACzD,IAAI,CAAC,GAAS,WAAA,eAA8B,GACxC;CAEJ,IAAM,IAAc,EAAQ,MAAM,EAA0B,GACtD,IAAa,EAAY,QAAQ,GAAG;CAC1C,IAAI,MAAe,IACf;CAEJ,IAAM,IAAO,EAAY,MAAM,GAAG,CAAU;CAC5C,IAAI;EAIA,OAAO;GAAE;GAAM,SAHC,KAAK,MACjB,EAAY,MAAM,IAAa,CAAC,CAErB;EAAQ;CAC3B,QAAQ;EACJ;CACJ;AACJ;AAEA,SAAgB,EACZ,GACA,GACO;CACP,OAAO,GAAS,WAAW,gBAAyB,EAAK,EAAE,KAAK;AACpE;;;AC5BA,SAAS,EAAY,GAA0B,GAA0B;CACrE,OAAO,GAAO,SAAS,YAAY,CAAC,CAAC,SAAS,CAAI,KAAK;AAC3D;AAEA,SAAgB,EACZ,GAC8B;CAC9B,OAAO,EAAiB,GAAO,OAAO,CAAC,EAAE;AAC7C;AAEA,SAAgB,EAAgB,GAA4C;CACxE,IAAM,IAAuB,QACzB,EAAY,EAAQ,CAAK,GAAG,yBAAyB,CACzD,GACM,IAAkB,QACpB,EAAY,EAAQ,CAAK,GAAG,kBAAkB,CAClD,GACM,IAAmB,QACrB,EAAY,EAAQ,CAAK,GAAG,qBAAqB,CACrD,GACM,IAA0B,QAC5B,EAAY,EAAQ,CAAK,GAAG,oBAAoB,CACpD,GACM,IAAyB,QAC3B,EAAY,EAAQ,CAAK,GAAG,kBAAkB,CAClD,GACM,IAA6B,QAC/B,EAAY,EAAQ,CAAK,GAAG,sBAAsB,CACtD,GACM,IAAoB,QACtB,EAAY,EAAQ,CAAK,GAAG,aAAa,CAC7C,GACM,IAAwB,QAC1B,EAAY,EAAQ,CAAK,GAAG,uBAAuB,CACvD,GACM,IAAuB,QACzB,EAAkB,EAAQ,CAAK,CAAC,EAAE,SAAS,gBAAgB,CAC/D,GAMM,IAAyB,QAC3B,EAAY,EAAQ,CAAK,GAAG,kBAAkB,CAClD,GAMM,IAA0B,QAC5B,EAAY,EAAQ,CAAK,GAAG,mBAAmB,CACnD;CAiBA,OAAO;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,oBA1BuB,QAEnB,CAAC,EAAqB,SACtB,CAAC,EAAgB,SACjB,CAAC,EAAwB,SACzB,CAAC,EAAuB,SACxB,CAAC,EAA2B,SAC5B,CAAC,EAAkB,SACnB,CAAC,EAAsB,SACvB,CAAC,EAAqB,SACtB,CAAC,EAAuB,SACxB,CAAC,EAAwB,KAe7B;CACJ;AACJ;;;;;;;;ECpGI,IAAM,IAAQ,GAIR,IAAO,GAKP,EAAE,GAAG,MAAO,EAAQ,EACtB,UAAU,SACd,CAAC,GAEK,EACF,yBACA,oBACA,qBACA,4BACA,2BACA,+BACA,sBACA,0BACA,yBACA,2BACA,4BACA,0BACA,QAAsB,EAAM,KAAK,GAM/B,IAAmB,QAEjB,EAAwB,SACxB,EAAuB,SACvB,EAAqB,SACrB,EAAuB,SACvB,EAAwB,KAChC,GAEM,IAAe,QAAe;GAChC,IAAI,EAAqB,OAAO;IAC5B,IAAM,IAAU,EAAsB,EAAM,KAAK;IAWjD,OAVI,GAAS,WAAW,2BACb,EAAG,0CAA0C,EAChD,OAAO,EAAQ,MACnB,CAAC,IAED,GAAS,WAAW,sBACb,EAAG,+BAA+B,EACrC,OAAO,EAAQ,MACnB,CAAC,IAEE,EAAG,0BAA0B;GACxC;GAiCA,OAhCI,EAAqB,QACd,EAAG,gCAAgC,IAE1C,EAAgB,QACT,EAAG,2BAA2B,IAErC,EAAiB,QACV,EAAG,8BAA8B,EACpC,SAAS,EAAe,MAC5B,CAAC,IAED,EAAwB,QACjB,EAAG,mCAAmC,IAE7C,EAAuB,QAChB,EAAG,kCAAkC,IAE5C,EAAuB,QAChB,EAAG,kCAAkC,IAE5C,EAAwB,QACjB,EAAG,mCAAmC,IAE7C,EAA2B,QACpB,EAAG,sCAAsC,IAEhD,EAAkB,QACX,EAAG,6BAA6B,IAEvC,EAAsB,QACf,EAAG,iCAAiC,IAExC,EAAG,4BAA4B,EAAE,SAAS,EAAe,MAAM,CAAC;EAC3E,CAAC,GAEK,IAAiB,EAAY,CAAC,GAC9B,IAAa,EAAmC;SAEtD,QACU,EAAM,QACX,MAAU;GAKP,IAJI,EAAW,SACX,aAAa,EAAW,KAAK,GAG7B,KAAS,EAAmB,OAAO;IACnC,EAAe,QAAQ;IACvB,IAAM,UAAa;KAEf,IADA,EAAe,SACX,EAAe,SAAS,GAAG;MAC3B,EAAK,OAAO;MACZ;KACJ;KACA,EAAW,QAAQ,WAAW,GAAM,GAAI;IAC5C;IACA,EAAW,QAAQ,WAAW,GAAM,GAAI;GAC5C,OACI,EAAe,QAAQ;EAE/B,GACA,EAAE,WAAW,GAAK,CACtB,GAEA,QAAsB;GAClB,AAAI,EAAW,SACX,aAAa,EAAW,KAAK;EAErC,CAAC;;GAID,OAAA,EAAA,GAAA,EAsBU,GAAA;IArBL,WAAW,EAAA,CAAA,IAAkB,YAAA;IAC9B,OAAM;;IAIN,SAAA,QAAkB,CAAf,EAAA,EAAA,EAAA,KAAY,IAAG,KAClB,CAAA,CAAA,CAAA;;GAAgB,GAAA,CAAA,EAAA,CAAA,KAAkB,CAAK,EAAA,QAAA;IAAmB,MAAA;IACtD,IAAA,QAM8B,CALpB,EAAA,CAAA,KADV,EAAA,GAAA,EAM8B,GAAA;;KAJ1B,MAAK;KACL,WAAU;KACV,OAAM;KACL,OAAO,EAAA,CAAA,CAAE,CAAA,iBAAA;KACT,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,OAAA;IAED,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,KAAA,EAAA,qBADhB,EAAA,GAAA,EAK8B,GAAA;;KAH1B,MAAK;KACL,WAAU;KACT,OAAO,EAAA,CAAA,CAAE,CAAA,eAAA;KACT,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,OAAA"}

package/dist-vue/_chunks/{PkChatbotFeedbackForm-DO1QIgmo.js → PkChatbotFeedbackForm-CxLOdwkm.js}

@@ -37,7 +37,7 @@ var x = { class: "border border-surface-3 rounded-xl w-full overflow-hidden bg-s
 			]), f(s, { mode: "out-in" }, {
 				default: v(() => [p.submitted ? (h(), u("div", D, [d("div", O, [f(n, {
 					name: "ri:check-line",
-					class: "text-16 text-word-3"
+					class: "text-16 text-success"
 				}), d("div", null, [d("strong", k, g(_(M)("message.feedbackSubmittedTitle")), 1), d("p", A, g(_(M)("message.feedbackSubmittedMessage")), 1)])])])) : (h(), u("div", w, [f(_(F), {
 					modelValue: _(L),
 					"onUpdate:modelValue": t[2] ||= (e) => m(L) ? L.value = e : null,
@@ -89,4 +89,4 @@ var x = { class: "border border-surface-3 rounded-xl w-full overflow-hidden bg-s
 //#endregion
 export { j as t };
 
-//# sourceMappingURL=PkChatbotFeedbackForm-DO1QIgmo.js.map
+//# sourceMappingURL=PkChatbotFeedbackForm-CxLOdwkm.js.map

package/dist-vue/_chunks/PkChatbotFeedbackForm-CxLOdwkm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PkChatbotFeedbackForm-CxLOdwkm.js","names":["$emit"],"sources":["../../../../packages/components/src/chat/PkChatbotFeedbackForm.vue","../../../../packages/components/src/chat/PkChatbotFeedbackForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { useI18n } from 'vue-i18n'\n    import { useForm } from '@volverjs/form-vue'\n    import * as z from 'zod'\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    defineProps<{\n        submitted?: boolean\n        loading?: boolean\n        error?: string\n    }>()\n\n    const emit = defineEmits<{\n        submit: [comment: string]\n        close: []\n    }>()\n\n    const FeedbackFormSchema = z.object({\n        comment: z.string().min(1).default(''),\n    })\n\n    const { VvForm, VvFormField, formData } = useForm(FeedbackFormSchema, {\n        lazyLoad: true,\n    })\n\n    const onSubmit = (data: { comment: string }) => {\n        emit('submit', data.comment)\n    }\n</script>\n\n<template>\n    <div\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8 min-h-40\">\n            <VvIcon name=\"ri:feedback-line\" class=\"text-16\" />\n            <strong class=\"font-bold\">{{ $t('action.feedback') }}</strong>\n            <VvButton\n                icon=\"ri:close-line\"\n                modifiers=\"action-quiet-small\"\n                :title=\"$t('action.close')\"\n                class=\"ml-auto\"\n                @click.stop=\"$emit('close')\" />\n        </div>\n        <Transition mode=\"out-in\">\n            <div v-if=\"!submitted\">\n                <VvForm v-model=\"formData\" @submit=\"onSubmit\">\n                    <div class=\"p-sm\">\n                        <VvAlert\n                            v-if=\"error\"\n                            modifiers=\"danger\"\n                            class=\"mb-sm\"\n                            :content=\"error\" />\n                        <VvFormField\n                            name=\"comment\"\n                            type=\"textarea\"\n                            rows=\"3\"\n                            :label=\"$t('label.comment')\"\n                            :placeholder=\"$t('placeholder.comment')\"\n                            modifiers=\"compact no-label\"\n                            class=\"mb-0\" />\n                    </div>\n                    <div\n                        class=\"flex justify-end border-t border-surface-3 px-sm py-10\">\n                        <VvButtonGroup>\n                            <VvButton\n                                type=\"button\"\n                                modifiers=\"action-quiet\"\n                                icon=\"ri:close-line\"\n                                icon-position=\"right\"\n                                :label=\"$t('action.close')\"\n                                @click=\"$emit('close')\" />\n                            <VvButton\n                                type=\"submit\"\n                                modifiers=\"action-primary\"\n                                icon=\"ri:send-plane-2-line\"\n                                icon-position=\"right\"\n                                :loading\n                                :disabled=\"loading\"\n                                :label=\"$t('action.submit')\" />\n                        </VvButtonGroup>\n                    </div>\n                </VvForm>\n            </div>\n            <div v-else class=\"p-sm\">\n                <!-- One confirmation row across every tool card: a green\n                     check, the title in weight, the body quiet. The check is\n                     the outcome, so it alone carries the colour (DESIGN.md). -->\n                <div class=\"flex items-center gap-sm\">\n                    <VvIcon name=\"ri:check-line\" class=\"text-16 text-success\" />\n                    <div>\n                        <strong class=\"font-medium block text-word-1\">\n                            {{ $t('message.feedbackSubmittedTitle') }}\n                        </strong>\n                        <p class=\"text-word-3\">\n                            {{ $t('message.feedbackSubmittedMessage') }}\n                        </p>\n                    </div>\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import { useI18n } from 'vue-i18n'\n    import { useForm } from '@volverjs/form-vue'\n    import * as z from 'zod'\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    defineProps<{\n        submitted?: boolean\n        loading?: boolean\n        error?: string\n    }>()\n\n    const emit = defineEmits<{\n        submit: [comment: string]\n        close: []\n    }>()\n\n    const FeedbackFormSchema = z.object({\n        comment: z.string().min(1).default(''),\n    })\n\n    const { VvForm, VvFormField, formData } = useForm(FeedbackFormSchema, {\n        lazyLoad: true,\n    })\n\n    const onSubmit = (data: { comment: string }) => {\n        emit('submit', data.comment)\n    }\n</script>\n\n<template>\n    <div\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8 min-h-40\">\n            <VvIcon name=\"ri:feedback-line\" class=\"text-16\" />\n            <strong class=\"font-bold\">{{ $t('action.feedback') }}</strong>\n            <VvButton\n                icon=\"ri:close-line\"\n                modifiers=\"action-quiet-small\"\n                :title=\"$t('action.close')\"\n                class=\"ml-auto\"\n                @click.stop=\"$emit('close')\" />\n        </div>\n        <Transition mode=\"out-in\">\n            <div v-if=\"!submitted\">\n                <VvForm v-model=\"formData\" @submit=\"onSubmit\">\n                    <div class=\"p-sm\">\n                        <VvAlert\n                            v-if=\"error\"\n                            modifiers=\"danger\"\n                            class=\"mb-sm\"\n                            :content=\"error\" />\n                        <VvFormField\n                            name=\"comment\"\n                            type=\"textarea\"\n                            rows=\"3\"\n                            :label=\"$t('label.comment')\"\n                            :placeholder=\"$t('placeholder.comment')\"\n                            modifiers=\"compact no-label\"\n                            class=\"mb-0\" />\n                    </div>\n                    <div\n                        class=\"flex justify-end border-t border-surface-3 px-sm py-10\">\n                        <VvButtonGroup>\n                            <VvButton\n                                type=\"button\"\n                                modifiers=\"action-quiet\"\n                                icon=\"ri:close-line\"\n                                icon-position=\"right\"\n                                :label=\"$t('action.close')\"\n                                @click=\"$emit('close')\" />\n                            <VvButton\n                                type=\"submit\"\n                                modifiers=\"action-primary\"\n                                icon=\"ri:send-plane-2-line\"\n                                icon-position=\"right\"\n                                :loading\n                                :disabled=\"loading\"\n                                :label=\"$t('action.submit')\" />\n                        </VvButtonGroup>\n                    </div>\n                </VvForm>\n            </div>\n            <div v-else class=\"p-sm\">\n                <!-- One confirmation row across every tool card: a green\n                     check, the title in weight, the body quiet. The check is\n                     the outcome, so it alone carries the colour (DESIGN.md). -->\n                <div class=\"flex items-center gap-sm\">\n                    <VvIcon name=\"ri:check-line\" class=\"text-16 text-success\" />\n                    <div>\n                        <strong class=\"font-medium block text-word-1\">\n                            {{ $t('message.feedbackSubmittedTitle') }}\n                        </strong>\n                        <p class=\"text-word-3\">\n                            {{ $t('message.feedbackSubmittedMessage') }}\n                        </p>\n                    </div>\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAKI,IAAM,EAAE,GAAG,MAAO,EAAQ,EAAE,UAAU,SAAS,CAAC,GAQ1C,IAAO,GAKP,IAAqB,EAAS,EAChC,SAAS,EAAS,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,EACzC,CAAC,GAEK,EAAE,WAAQ,gBAAa,gBAAa,EAAQ,GAAoB,EAClE,UAAU,GACd,CAAC,GAEK,KAAY,MAA8B;GAC5C,EAAK,UAAU,EAAK,OAAO;EAC/B;;;GAIA,OAAA,EAAA,GAAA,EAsEM,OAtEN,GAsEM,CApEF,EAUM,OAVN,GAUM;IARF,EAAkD,GAAA;KAA1C,MAAK;KAAmB,OAAM;;IACtC,EAA8D,UAA9D,GAA8D,EAAjC,EAAA,CAAA,CAAE,CAAA,iBAAA,CAAA,GAAA,CAAA;IAC/B,EAKmC,GAAA;KAJ/B,MAAK;KACL,WAAU;KACT,OAAO,EAAA,CAAA,CAAE,CAAA,cAAA;KACV,OAAM;KACL,SAAK,AAAA,EAAA,OAAA,GAAA,MAAOA,EAAAA,MAAK,OAAA,GAAA,CAAA,MAAA,CAAA;;GAE1B,CAAA,GAAA,EAwDa,GAAA,EAxDD,MAAK,SAAQ,GAAA;IACrB,SAAA,QAsCM,CAtCM,EAAA,aAuCZ,EAAA,GAAA,EAeM,OAfN,GAeM,CAXF,EAUM,OAVN,GAUM,CATF,EAA4D,GAAA;KAApD,MAAK;KAAgB,OAAM;IACnC,CAAA,GAAA,EAOM,OAAA,MAAA,CANF,EAES,UAFT,GAES,EADF,EAAA,CAAA,CAAE,CAAA,gCAAA,CAAA,GAAA,CAAA,GAET,EAEI,KAFJ,GAEI,EADG,EAAA,CAAA,CAAE,CAAA,kCAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAlDrB,EAAA,GAAA,EAsCM,OAAA,GAAA,CArCF,EAoCS,EAAA,CAAA,GAAA;KApCQ,YAAA,EAAA,CAAA;KAAA,uBAAA,AAAA,EAAA,QAAA,MAAA,EAAA,CAAA,IAAA,EAAQ,QAAA,IAAA;KAAW;;KAChC,SAAA,QAcM,CAdN,EAcM,OAdN,GAcM,CAZQ,EAAA,SADV,EAAA,GAAA,EAIuB,GAAA;;MAFnB,WAAU;MACV,OAAM;MACL,SAAS,EAAA;KACd,GAAA,MAAA,GAAA,CAAA,SAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAAA,EAOmB,EAAA,CAAA,GAAA;MANf,MAAK;MACL,MAAK;MACL,MAAK;MACJ,OAAO,EAAA,CAAA,CAAE,CAAA,eAAA;MACT,aAAa,EAAA,CAAA,CAAE,CAAA,qBAAA;MAChB,WAAU;MACV,OAAM;KAEd,GAAA,MAAA,GAAA,CAAA,SAAA,aAAA,CAAA,CAAA,CAAA,GAAA,EAmBM,OAnBN,GAmBM,CAjBF,EAgBgB,GAAA,MAAA;MAfZ,SAAA,QAM8B,CAN9B,EAM8B,GAAA;OAL1B,MAAK;OACL,WAAU;OACV,MAAK;OACL,iBAAc;OACb,OAAO,EAAA,CAAA,CAAE,CAAA,cAAA;OACT,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,OAAA;MACjB,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GAAA,EAOmC,GAAA;OAN/B,MAAK;OACL,WAAU;OACV,MAAK;OACL,iBAAc;OACb,SAAA,EAAA;OACA,UAAU,EAAA;OACV,OAAO,EAAA,CAAA,CAAE,CAAA,eAAA;;;;;;;;;IAK9B,GAAA,GAAA,CAAA,YAAA,CAAA,CAAA,CAAA,EAWqB,CAAA"}

package/dist-vue/_chunks/{PkChatbotFilePreview-DO1wZPPj.js → PkChatbotFilePreview-CwiVQDF2.js}

@@ -292,7 +292,7 @@ var ee = [
 					class: "pk-chatbot-file-preview__thumb",
 					onLoad: J,
 					onError: Y
-				}, null, 40, M), [[y, j.value === "loaded"]])], 8, ee), e.loading || j.value === "loading" ? (h(), o("span", N, [l(m, { name: "line-md:loading-loop" })])) : j.value === "error" ? (h(), o("span", P, [l(m, { name: "ri:image-2-line" })])) : a("", !0)], 512),
+				}, null, 40, M), [[y, j.value === "loaded"]])], 8, ee), e.loading || j.value === "loading" ? (h(), o("span", N, [l(m, { name: "loading-loop" })])) : j.value === "error" ? (h(), o("span", P, [l(m, { name: "ri:image-2-line" })])) : a("", !0)], 512),
 				e.compact ? a("", !0) : (h(), o("figcaption", F, [e.filename ? (h(), o("span", {
 					key: 0,
 					class: "pk-chatbot-file-preview__name",
@@ -322,7 +322,7 @@ var ee = [
 					style: f({ "--file-accent": T.value.accent })
 				}, [e.loading ? (h(), i(m, {
 					key: 0,
-					name: "line-md:loading-loop",
+					name: "loading-loop",
 					class: "pk-chatbot-file-preview__icon"
 				})) : (h(), i(m, {
 					key: 1,
@@ -362,4 +362,4 @@ var ee = [
 //#endregion
 export { T as n, w as r, q as t };
 
-//# sourceMappingURL=PkChatbotFilePreview-DO1wZPPj.js.map
+//# sourceMappingURL=PkChatbotFilePreview-CwiVQDF2.js.map