@8wave/ai-elements 0.71.0 → 0.74.0

package/dist-vue/PkChatbot.js

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

package/dist-vue/PkChatbotFeedbackForm.js

@@ -1,2 +1,2 @@
-import { t as e } from "./_chunks/PkChatbotFeedbackForm-CUnS-WyR.js";
+import { t as e } from "./_chunks/PkChatbotFeedbackForm-D-lx1URv.js";
 export { e as default };

package/dist-vue/PkChatbotFilePreview.js

@@ -1,2 +1,2 @@
-import { t as e } from "./_chunks/PkChatbotFilePreview-JSpi3pmN.js";
+import { t as e } from "./_chunks/PkChatbotFilePreview-DHzuGtz5.js";
 export { e as default };

package/dist-vue/PkChatbotInput.js

@@ -1,2 +1,2 @@
-import { t as e } from "./_chunks/PkChatbotInput-ODPhsqZt.js";
+import { t as e } from "./_chunks/PkChatbotInput-LHE0HZ9z.js";
 export { e as default };

package/dist-vue/PkChatbotMessages.js

@@ -1,2 +1,2 @@
-import { t as e } from "./_chunks/PkChatbotMessages-B5EK-qDo.js";
+import { t as e } from "./_chunks/PkChatbotMessages-BxTeEm3j.js";
 export { e as default };

package/dist-vue/PkChatbotViewChat.js

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

package/dist-vue/PkChatbotViewConversations.js

@@ -1,2 +1,2 @@
-import { t as e } from "./_chunks/PkChatbotViewConversations--vd3MWYy.js";
+import { t as e } from "./_chunks/PkChatbotViewConversations-DvVc1arX.js";
 export { e as default };

package/dist-vue/PkChatbotViewProfile.js

@@ -1,2 +1,2 @@
-import { t as e } from "./_chunks/PkChatbotViewProfile-Cafl_Jf8.js";
+import { t as e } from "./_chunks/PkChatbotViewProfile-Dev_6pki.js";
 export { e as default };

package/dist-vue/_chunks/PkChatbot-woRkjgP5.js

@@ -0,0 +1,190 @@
+import { t as e } from "./useChatbotStore-DGL81KJa.js";
+import { t } from "./PkChatbotViewConversations-DvVc1arX.js";
+import { t as n } from "./PkStreamingMarkdown-B4gnJ4hk.js";
+import { n as r, t as i } from "./PkChatbotViewProfile-Dev_6pki.js";
+import { o as a } from "./utils-BegUBK7s.js";
+import { r as o } from "./PkToolShowContactForm-CsDOqSJK.js";
+import { t as s } from "./PkChatbotViewChat-BoEfZeco.js";
+import { Fragment as ee, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as te, normalizeClass as ne, normalizeProps as y, normalizeStyle as b, openBlock as x, renderList as S, renderSlot as C, toDisplayString as w, toRef as T, unref as E, useModel as D, useSlots as O, watch as k, watchEffect as re, withCtx as A } from "vue";
+import { VvAlert as ie, VvButton as ae, VvButtonGroup as oe, VvDropdown as se, VvDropdownAction as ce, VvIcon as j } from "@volverjs/ui-vue/components";
+import { useI18n as le } from "vue-i18n";
+import { storeToRefs as ue } from "pinia";
+//#region ../../packages/components/src/chat/PkChatbot.vue?vue&type=script&setup=true&lang.ts
+var de = { class: "pk-chatbot__header-start" }, fe = ["title"], pe = { key: 0 }, me = { class: "pk-chatbot__warning-body" }, he = { class: "pk-chatbot__warning-header" }, ge = { class: "pk-chatbot__warning-title" }, _e = { class: "pk-chatbot__warning-text" }, M = {
+	key: 4,
+	class: "pk-chatbot__footer"
+}, N = /* @__PURE__ */ g({
+	__name: "PkChatbot",
+	props: /* @__PURE__ */ v({
+		baseUrl: {},
+		basePath: {},
+		agentId: {},
+		agentType: {},
+		userId: {},
+		name: {},
+		model: {},
+		agentModel: {},
+		agentTools: {},
+		agentInterface: {},
+		actions: {},
+		revisedAnswers: {},
+		headers: {},
+		systemTheme: {},
+		agentFileUpload: {},
+		fallbackModels: {},
+		gatewayOptions: {}
+	}, {
+		chatId: {
+			type: String,
+			default: void 0
+		},
+		chatIdModifiers: {}
+	}),
+	emits: /* @__PURE__ */ v([
+		"message-update",
+		"show-info",
+		"revise",
+		"error"
+	], ["update:chatId"]),
+	setup(g, { expose: v, emit: N }) {
+		let P = O(), { t: F } = le({ useScope: "global" }), I = g, L = N, R = D(g, "chatId"), z = e(I.agentId), { messages: B, chat: V, localChatId: H, activeView: U, chatError: ve } = ue(z), W = T(z, "agentId"), { startNewChat: G, stopGeneration: K, regenerate: ye, navigate: q } = z;
+		re(() => {
+			z.baseUrl = I.baseUrl, z.basePath = I.basePath, z.name = I.name, z.agentType = I.agentType, z.userId = I.userId, z.agentInterface = I.agentInterface, z.agentModel = I.agentModel, z.agentTools = I.agentTools, z.headers = I.headers, z.revisedAnswers = I.revisedAnswers, z.model = I.model, z.actionsInput = I.actions, z.agentFileUpload = I.agentFileUpload, z.fallbackModels = I.fallbackModels, z.gatewayOptions = I.gatewayOptions;
+		}), k(() => R.value, (e) => {
+			e && e !== z.localChatId && (z.localChatId = e);
+		}, { immediate: !0 }), k(H, (e) => {
+			R.value = e;
+		}), k(ve, (e) => {
+			if (e) try {
+				L("error", JSON.parse(e.message));
+			} catch {}
+		});
+		let J = c(() => I.agentType === "reasoning"), Y = c(() => I.agentInterface?.useColorsForAgentHeader), be = c(() => {
+			let e = I.agentInterface?.theme;
+			return (!e || e === "auto") && (e = I.systemTheme), e ? ["theme", `theme--${e}`] : ["theme"];
+		}), X = c(() => I.agentInterface?.mainColor), Z = c(() => a(I.agentInterface?.textColor, X.value)), Q = o(() => I.agentInterface?.footerMessage), $ = c(() => U.value === "conversations" ? F("label.conversations") : U.value === "profile" ? F("label.profile") : I.name), xe = c(() => V.value.status === "ready"), Se = c(() => B.value?.[B.value.length - 1]);
+		return v({
+			startNewChat: G,
+			regenerate: ye,
+			stopGeneration: K
+		}), k([W, H], async ([e, t]) => {
+			await z.initialize(e, t);
+		}, { immediate: !0 }), k(() => I.agentInterface?.initialMessage, () => {
+			V.value.messages.length === 1 && V.value.messages[0].role === "assistant" && (V.value.messages = []);
+		}, { deep: !0 }), k(U, (e) => {
+			e === "conversations" && z.loadConversations(W.value);
+		}), k(Se, (e) => {
+			e && L("message-update", e);
+		}, {
+			deep: !0,
+			immediate: !0
+		}), (e, a) => {
+			let o = ae, c = j, v = ce, T = se, D = oe, O = ie;
+			return x(), d("div", { class: ne(["pk-chatbot", be.value]) }, [
+				f("div", {
+					class: "pk-chatbot__header",
+					style: b(Y.value ? { backgroundColor: X.value } : void 0)
+				}, [f("div", de, [E(U) === "chat" ? (x(), l(r, {
+					key: 1,
+					modifiers: "surface ring shrink-0",
+					class: "pk-chatbot__avatar",
+					name: g.name,
+					"img-src": g.agentInterface?.logo
+				}, null, 8, ["name", "img-src"])) : (x(), d(ee, { key: 0 }, [h(o, te({
+					modifiers: Y.value ? `action-quiet-${Z.value}` : "action-quiet",
+					icon: "ri:arrow-left-s-line",
+					title: E(F)("action.goBack")
+				}, { onClick: a[0] ||= (e) => E(q)("chat") }), null, 16), h(c, {
+					name: "ri:history-line",
+					class: "pk-chatbot__nav-icon",
+					style: b(Y.value ? { color: Z.value } : void 0)
+				}, null, 8, ["style"])], 64)), f("strong", {
+					class: "pk-chatbot__title",
+					title: $.value,
+					style: b(Y.value ? { color: Z.value } : void 0)
+				}, w($.value), 13, fe)]), h(D, {
+					class: "pk-chatbot__header-end",
+					modifiers: "compact"
+				}, {
+					default: A(() => [
+						C(e.$slots, "header-actions", y(_({
+							mainColor: X.value,
+							useColorsForAgentHeader: Y.value,
+							contrastColor: Z.value,
+							startNewChat: E(G),
+							stopGeneration: E(K)
+						}))),
+						h(T, y(_({
+							placement: "bottom-end",
+							modifiers: "menu",
+							flip: !0,
+							offset: 3
+						})), {
+							items: A(() => [h(v, { onClick: a[1] ||= (e) => E(G)() }, {
+								default: A(() => [h(c, { name: "ri:edit-box-line" }), m(" " + w(E(F)("action.startNewChat")), 1)]),
+								_: 1
+							}), J.value ? u("", !0) : (x(), l(v, {
+								key: 0,
+								onClick: a[2] ||= (e) => E(q)("conversations")
+							}, {
+								default: A(() => [h(c, { name: "ri:history-line" }), m(" " + w(E(F)("action.viewRecentChats")), 1)]),
+								_: 1
+							}))]),
+							default: A(() => [h(o, y(_({
+								modifiers: Y.value ? `action-quiet-${Z.value}` : "action-quiet",
+								icon: "ri:more-2-fill",
+								disabled: !xe.value,
+								title: E(F)("action.moreActions")
+							})), null, 16)]),
+							_: 1
+						}, 16),
+						C(e.$slots, "actions", y(_({
+							mainColor: X.value,
+							useColorsForAgentHeader: Y.value,
+							contrastColor: Z.value,
+							startNewChat: E(G),
+							stopGeneration: E(K)
+						})))
+					]),
+					_: 3
+				})], 4),
+				J.value ? (x(), d("div", pe, [f("div", me, [h(O, { modifiers: "callout" }, {
+					default: A(() => [f("div", he, [h(c, {
+						name: "ri:alert-line",
+						class: "pk-chatbot__warning-icon"
+					}), f("strong", ge, w(E(F)("message.warning")), 1)]), f("p", _e, w(E(F)("message.reasoningAgent")), 1)]),
+					_: 1
+				})])])) : u("", !0),
+				E(U) === "chat" ? (x(), l(s, {
+					key: 1,
+					"agent-id": g.agentId,
+					onShowInfo: a[3] ||= (e) => L("show-info", e),
+					onRevise: a[4] ||= (e) => L("revise", e)
+				}, p({ _: 2 }, [S(Object.keys(E(P)), (t) => ({
+					name: t,
+					fn: A((n) => [C(e.$slots, t, y(_(n)))])
+				}))]), 1032, ["agent-id"])) : E(U) === "conversations" ? (x(), l(t, {
+					key: 2,
+					"agent-id": g.agentId
+				}, p({ _: 2 }, [S(Object.keys(E(P)), (t) => ({
+					name: t,
+					fn: A((n) => [C(e.$slots, t, y(_(n)))])
+				}))]), 1032, ["agent-id"])) : (x(), l(i, {
+					key: 3,
+					"agent-id": g.agentId
+				}, p({ _: 2 }, [S(Object.keys(E(P)), (t) => ({
+					name: t,
+					fn: A((n) => [C(e.$slots, t, y(_(n)))])
+				}))]), 1032, ["agent-id"])),
+				E(Q) ? (x(), d("div", M, [h(n, {
+					markdown: E(Q),
+					class: "wysiwyg"
+				}, null, 8, ["markdown"])])) : u("", !0)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { N as t };
+
+//# sourceMappingURL=PkChatbot-woRkjgP5.js.map

package/dist-vue/_chunks/{PkChatbot-CkxgCXC4.js.map → PkChatbot-woRkjgP5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkChatbot-CkxgCXC4.js","names":[],"sources":["../../../../packages/components/src/chat/PkChatbot.vue","../../../../packages/components/src/chat/PkChatbot.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { computed, toRef, watch, watchEffect, useSlots } from 'vue'\n    import { storeToRefs } from 'pinia'\n    import { useI18n } from 'vue-i18n'\n    import type {\n        AgentInterface,\n        AgentModel,\n        AgentFileUpload,\n        AgentGatewayOptions,\n        ChatMessageActions,\n        RevisedAnswer,\n        UIChatMessage,\n        AgentTools,\n    } from 'models'\n    import { useChatbotStore } from 'composables'\n    import PkAvatar from './PkAvatar.vue'\n    import PkChatbotViewChat from './PkChatbotViewChat.vue'\n    import PkChatbotViewConversations from './PkChatbotViewConversations.vue'\n    import PkChatbotViewProfile from './PkChatbotViewProfile.vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import { resolveContrastColor } from './utils'\n    import { useLocalizedString } from '../composables/useLocalizedString'\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        fallbackModels?: string[]\n        gatewayOptions?: Partial<AgentGatewayOptions>\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    const { messages, chat, localChatId, activeView, chatError } =\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 } = store\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.fallbackModels = props.fallbackModels\n        store.gatewayOptions = props.gatewayOptions\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 isReasoningAgent = computed(() => props.agentType === 'reasoning')\n    const useColorsForAgentHeader = computed(\n        () => props.agentInterface?.useColorsForAgentHeader,\n    )\n    const themeClass = computed(() => {\n        let theme = props.agentInterface?.theme\n        if (!theme || theme === 'auto') {\n            theme = props.systemTheme\n        }\n        if (!theme) {\n            return ['theme']\n        }\n        return ['theme', `theme--${theme}`]\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        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    })\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    // update initial message\n    watch(\n        () => props.agentInterface?.initialMessage,\n        () => {\n            if (\n                chat.value.messages.length === 1 &&\n                chat.value.messages[0].role === 'assistant'\n            ) {\n                chat.value.messages = []\n            }\n        },\n        { deep: true },\n    )\n    // load conversations when navigating to conversations view\n    watch(activeView, (newView) => {\n        if (newView === 'conversations') {\n            store.loadConversations(storeAgentId.value)\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 class=\"pk-chatbot\" :class=\"themeClass\">\n        <!-- #region title -->\n        <div\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=\"ri:history-line\"\n                        class=\"pk-chatbot__nav-icon\"\n                        :style=\"\n                            useColorsForAgentHeader\n                                ? {\n                                      color: contrastColor,\n                                  }\n                                : undefined\n                        \" />\n                </template>\n                <PkAvatar\n                    v-else\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                <VvDropdown\n                    v-bind=\"{\n                        placement: 'bottom-end',\n                        modifiers: 'menu',\n                        flip: true,\n                        offset: 3,\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 @click=\"startNewChat()\">\n                            <VvIcon name=\"ri:edit-box-line\" />\n                            {{ $t('action.startNewChat') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-if=\"!isReasoningAgent\"\n                            @click=\"navigate('conversations')\">\n                            <VvIcon name=\"ri:history-line\" />\n                            {{ $t('action.viewRecentChats') }}\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            @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        <PkChatbotViewProfile v-else :agent-id>\n            <template\n                v-for=\"slotName in Object.keys(slots)\"\n                #[slotName]=\"slotData\"\n                ><slot :name=\"slotName\" v-bind=\"slotData\"\n            /></template>\n        </PkChatbotViewProfile>\n        <!-- #endregion -->\n\n        <!-- #region footer -->\n        <div v-if=\"footerMessage\" class=\"pk-chatbot__footer\">\n            <PkStreamingMarkdown :markdown=\"footerMessage\" class=\"wysiwyg\" />\n        </div>\n        <!-- #endregion -->\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        height: 100%;\n        background-color: var(--color-surface);\n\n        &__header {\n            position: sticky;\n            top: 0;\n            z-index: 1;\n            display: flex;\n            justify-content: space-between;\n            gap: var(--spacing-14);\n            background-color: var(--color-surface-1);\n            padding: var(--spacing-14);\n            border-bottom: 1px solid var(--color-surface-4);\n        }\n\n        &__header-start {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-sm);\n            min-width: 0;\n        }\n\n        &__nav-icon {\n            font-size: var(--text-18);\n        }\n\n        &__avatar {\n            width: var(--spacing-24);\n            height: var(--spacing-24);\n        }\n\n        &__title {\n            font-size: var(--text-16);\n            font-weight: 700;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        &__header-end {\n            flex-shrink: 0;\n        }\n\n        &__warning-body {\n            padding: var(--spacing-md);\n            border-bottom: 1px solid var(--color-surface-4);\n        }\n\n        &__warning-header {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-4);\n            margin-bottom: var(--spacing-4);\n        }\n\n        &__warning-icon {\n            width: var(--spacing-16);\n            height: var(--spacing-16);\n        }\n\n        &__warning-title {\n            font-weight: 600;\n            font-size: var(--text-14);\n        }\n\n        &__warning-text {\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n        }\n\n        &__footer {\n            padding: var(--spacing-md);\n            border-top: 1px solid var(--color-surface-4);\n            text-align: center;\n            font-size: var(--text-12);\n            color: var(--color-word-2);\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { computed, toRef, watch, watchEffect, useSlots } from 'vue'\n    import { storeToRefs } from 'pinia'\n    import { useI18n } from 'vue-i18n'\n    import type {\n        AgentInterface,\n        AgentModel,\n        AgentFileUpload,\n        AgentGatewayOptions,\n        ChatMessageActions,\n        RevisedAnswer,\n        UIChatMessage,\n        AgentTools,\n    } from 'models'\n    import { useChatbotStore } from 'composables'\n    import PkAvatar from './PkAvatar.vue'\n    import PkChatbotViewChat from './PkChatbotViewChat.vue'\n    import PkChatbotViewConversations from './PkChatbotViewConversations.vue'\n    import PkChatbotViewProfile from './PkChatbotViewProfile.vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import { resolveContrastColor } from './utils'\n    import { useLocalizedString } from '../composables/useLocalizedString'\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        fallbackModels?: string[]\n        gatewayOptions?: Partial<AgentGatewayOptions>\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    const { messages, chat, localChatId, activeView, chatError } =\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 } = store\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.fallbackModels = props.fallbackModels\n        store.gatewayOptions = props.gatewayOptions\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 isReasoningAgent = computed(() => props.agentType === 'reasoning')\n    const useColorsForAgentHeader = computed(\n        () => props.agentInterface?.useColorsForAgentHeader,\n    )\n    const themeClass = computed(() => {\n        let theme = props.agentInterface?.theme\n        if (!theme || theme === 'auto') {\n            theme = props.systemTheme\n        }\n        if (!theme) {\n            return ['theme']\n        }\n        return ['theme', `theme--${theme}`]\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        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    })\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    // update initial message\n    watch(\n        () => props.agentInterface?.initialMessage,\n        () => {\n            if (\n                chat.value.messages.length === 1 &&\n                chat.value.messages[0].role === 'assistant'\n            ) {\n                chat.value.messages = []\n            }\n        },\n        { deep: true },\n    )\n    // load conversations when navigating to conversations view\n    watch(activeView, (newView) => {\n        if (newView === 'conversations') {\n            store.loadConversations(storeAgentId.value)\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 class=\"pk-chatbot\" :class=\"themeClass\">\n        <!-- #region title -->\n        <div\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=\"ri:history-line\"\n                        class=\"pk-chatbot__nav-icon\"\n                        :style=\"\n                            useColorsForAgentHeader\n                                ? {\n                                      color: contrastColor,\n                                  }\n                                : undefined\n                        \" />\n                </template>\n                <PkAvatar\n                    v-else\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                <VvDropdown\n                    v-bind=\"{\n                        placement: 'bottom-end',\n                        modifiers: 'menu',\n                        flip: true,\n                        offset: 3,\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 @click=\"startNewChat()\">\n                            <VvIcon name=\"ri:edit-box-line\" />\n                            {{ $t('action.startNewChat') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-if=\"!isReasoningAgent\"\n                            @click=\"navigate('conversations')\">\n                            <VvIcon name=\"ri:history-line\" />\n                            {{ $t('action.viewRecentChats') }}\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            @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        <PkChatbotViewProfile v-else :agent-id>\n            <template\n                v-for=\"slotName in Object.keys(slots)\"\n                #[slotName]=\"slotData\"\n                ><slot :name=\"slotName\" v-bind=\"slotData\"\n            /></template>\n        </PkChatbotViewProfile>\n        <!-- #endregion -->\n\n        <!-- #region footer -->\n        <div v-if=\"footerMessage\" class=\"pk-chatbot__footer\">\n            <PkStreamingMarkdown :markdown=\"footerMessage\" class=\"wysiwyg\" />\n        </div>\n        <!-- #endregion -->\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        height: 100%;\n        background-color: var(--color-surface);\n\n        &__header {\n            position: sticky;\n            top: 0;\n            z-index: 1;\n            display: flex;\n            justify-content: space-between;\n            gap: var(--spacing-14);\n            background-color: var(--color-surface-1);\n            padding: var(--spacing-14);\n            border-bottom: 1px solid var(--color-surface-4);\n        }\n\n        &__header-start {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-sm);\n            min-width: 0;\n        }\n\n        &__nav-icon {\n            font-size: var(--text-18);\n        }\n\n        &__avatar {\n            width: var(--spacing-24);\n            height: var(--spacing-24);\n        }\n\n        &__title {\n            font-size: var(--text-16);\n            font-weight: 700;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        &__header-end {\n            flex-shrink: 0;\n        }\n\n        &__warning-body {\n            padding: var(--spacing-md);\n            border-bottom: 1px solid var(--color-surface-4);\n        }\n\n        &__warning-header {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-4);\n            margin-bottom: var(--spacing-4);\n        }\n\n        &__warning-icon {\n            width: var(--spacing-16);\n            height: var(--spacing-16);\n        }\n\n        &__warning-title {\n            font-weight: 600;\n            font-size: var(--text-14);\n        }\n\n        &__warning-text {\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n        }\n\n        &__footer {\n            padding: var(--spacing-md);\n            border-top: 1px solid var(--color-surface-4);\n            text-align: center;\n            font-size: var(--text-12);\n            color: var(--color-word-2);\n        }\n    }\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"PkChatbot-woRkjgP5.js","names":[],"sources":["../../../../packages/components/src/chat/PkChatbot.vue","../../../../packages/components/src/chat/PkChatbot.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { computed, toRef, watch, watchEffect, useSlots } from 'vue'\n    import { storeToRefs } from 'pinia'\n    import { useI18n } from 'vue-i18n'\n    import type {\n        AgentInterface,\n        AgentModel,\n        AgentFileUpload,\n        AgentGatewayOptions,\n        ChatMessageActions,\n        RevisedAnswer,\n        UIChatMessage,\n        AgentTools,\n    } from 'models'\n    import { useChatbotStore } from 'composables'\n    import PkAvatar from './PkAvatar.vue'\n    import PkChatbotViewChat from './PkChatbotViewChat.vue'\n    import PkChatbotViewConversations from './PkChatbotViewConversations.vue'\n    import PkChatbotViewProfile from './PkChatbotViewProfile.vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import { resolveContrastColor } from './utils'\n    import { useLocalizedString } from '../composables/useLocalizedString'\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        fallbackModels?: string[]\n        gatewayOptions?: Partial<AgentGatewayOptions>\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    const { messages, chat, localChatId, activeView, chatError } =\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 } = store\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.fallbackModels = props.fallbackModels\n        store.gatewayOptions = props.gatewayOptions\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 isReasoningAgent = computed(() => props.agentType === 'reasoning')\n    const useColorsForAgentHeader = computed(\n        () => props.agentInterface?.useColorsForAgentHeader,\n    )\n    const themeClass = computed(() => {\n        let theme = props.agentInterface?.theme\n        if (!theme || theme === 'auto') {\n            theme = props.systemTheme\n        }\n        if (!theme) {\n            return ['theme']\n        }\n        return ['theme', `theme--${theme}`]\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        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    })\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    // update initial message\n    watch(\n        () => props.agentInterface?.initialMessage,\n        () => {\n            if (\n                chat.value.messages.length === 1 &&\n                chat.value.messages[0].role === 'assistant'\n            ) {\n                chat.value.messages = []\n            }\n        },\n        { deep: true },\n    )\n    // load conversations when navigating to conversations view\n    watch(activeView, (newView) => {\n        if (newView === 'conversations') {\n            store.loadConversations(storeAgentId.value)\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 class=\"pk-chatbot\" :class=\"themeClass\">\n        <!-- #region title -->\n        <div\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=\"ri:history-line\"\n                        class=\"pk-chatbot__nav-icon\"\n                        :style=\"\n                            useColorsForAgentHeader\n                                ? {\n                                      color: contrastColor,\n                                  }\n                                : undefined\n                        \" />\n                </template>\n                <PkAvatar\n                    v-else\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                <VvDropdown\n                    v-bind=\"{\n                        placement: 'bottom-end',\n                        modifiers: 'menu',\n                        flip: true,\n                        offset: 3,\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 @click=\"startNewChat()\">\n                            <VvIcon name=\"ri:edit-box-line\" />\n                            {{ $t('action.startNewChat') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-if=\"!isReasoningAgent\"\n                            @click=\"navigate('conversations')\">\n                            <VvIcon name=\"ri:history-line\" />\n                            {{ $t('action.viewRecentChats') }}\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            @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        <PkChatbotViewProfile v-else :agent-id>\n            <template\n                v-for=\"slotName in Object.keys(slots)\"\n                #[slotName]=\"slotData\"\n                ><slot :name=\"slotName\" v-bind=\"slotData\"\n            /></template>\n        </PkChatbotViewProfile>\n        <!-- #endregion -->\n\n        <!-- #region footer -->\n        <div v-if=\"footerMessage\" class=\"pk-chatbot__footer\">\n            <PkStreamingMarkdown :markdown=\"footerMessage\" class=\"wysiwyg\" />\n        </div>\n        <!-- #endregion -->\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        height: 100%;\n        background-color: var(--color-surface);\n\n        &__header {\n            position: sticky;\n            top: 0;\n            z-index: 1;\n            display: flex;\n            justify-content: space-between;\n            gap: var(--spacing-14);\n            background-color: var(--color-surface-1);\n            padding: var(--spacing-14);\n            border-bottom: 1px solid var(--color-surface-4);\n        }\n\n        &__header-start {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-sm);\n            min-width: 0;\n        }\n\n        &__nav-icon {\n            font-size: var(--text-18);\n        }\n\n        &__avatar {\n            width: var(--spacing-24);\n            height: var(--spacing-24);\n        }\n\n        &__title {\n            font-size: var(--text-16);\n            font-weight: 700;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        &__header-end {\n            flex-shrink: 0;\n        }\n\n        &__warning-body {\n            padding: var(--spacing-md);\n            border-bottom: 1px solid var(--color-surface-4);\n        }\n\n        &__warning-header {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-4);\n            margin-bottom: var(--spacing-4);\n        }\n\n        &__warning-icon {\n            width: var(--spacing-16);\n            height: var(--spacing-16);\n        }\n\n        &__warning-title {\n            font-weight: 600;\n            font-size: var(--text-14);\n        }\n\n        &__warning-text {\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n        }\n\n        &__footer {\n            padding: var(--spacing-md);\n            border-top: 1px solid var(--color-surface-4);\n            text-align: center;\n            font-size: var(--text-12);\n            color: var(--color-word-2);\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { computed, toRef, watch, watchEffect, useSlots } from 'vue'\n    import { storeToRefs } from 'pinia'\n    import { useI18n } from 'vue-i18n'\n    import type {\n        AgentInterface,\n        AgentModel,\n        AgentFileUpload,\n        AgentGatewayOptions,\n        ChatMessageActions,\n        RevisedAnswer,\n        UIChatMessage,\n        AgentTools,\n    } from 'models'\n    import { useChatbotStore } from 'composables'\n    import PkAvatar from './PkAvatar.vue'\n    import PkChatbotViewChat from './PkChatbotViewChat.vue'\n    import PkChatbotViewConversations from './PkChatbotViewConversations.vue'\n    import PkChatbotViewProfile from './PkChatbotViewProfile.vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import { resolveContrastColor } from './utils'\n    import { useLocalizedString } from '../composables/useLocalizedString'\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        fallbackModels?: string[]\n        gatewayOptions?: Partial<AgentGatewayOptions>\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    const { messages, chat, localChatId, activeView, chatError } =\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 } = store\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.fallbackModels = props.fallbackModels\n        store.gatewayOptions = props.gatewayOptions\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 isReasoningAgent = computed(() => props.agentType === 'reasoning')\n    const useColorsForAgentHeader = computed(\n        () => props.agentInterface?.useColorsForAgentHeader,\n    )\n    const themeClass = computed(() => {\n        let theme = props.agentInterface?.theme\n        if (!theme || theme === 'auto') {\n            theme = props.systemTheme\n        }\n        if (!theme) {\n            return ['theme']\n        }\n        return ['theme', `theme--${theme}`]\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        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    })\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    // update initial message\n    watch(\n        () => props.agentInterface?.initialMessage,\n        () => {\n            if (\n                chat.value.messages.length === 1 &&\n                chat.value.messages[0].role === 'assistant'\n            ) {\n                chat.value.messages = []\n            }\n        },\n        { deep: true },\n    )\n    // load conversations when navigating to conversations view\n    watch(activeView, (newView) => {\n        if (newView === 'conversations') {\n            store.loadConversations(storeAgentId.value)\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 class=\"pk-chatbot\" :class=\"themeClass\">\n        <!-- #region title -->\n        <div\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=\"ri:history-line\"\n                        class=\"pk-chatbot__nav-icon\"\n                        :style=\"\n                            useColorsForAgentHeader\n                                ? {\n                                      color: contrastColor,\n                                  }\n                                : undefined\n                        \" />\n                </template>\n                <PkAvatar\n                    v-else\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                <VvDropdown\n                    v-bind=\"{\n                        placement: 'bottom-end',\n                        modifiers: 'menu',\n                        flip: true,\n                        offset: 3,\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 @click=\"startNewChat()\">\n                            <VvIcon name=\"ri:edit-box-line\" />\n                            {{ $t('action.startNewChat') }}\n                        </VvDropdownAction>\n                        <VvDropdownAction\n                            v-if=\"!isReasoningAgent\"\n                            @click=\"navigate('conversations')\">\n                            <VvIcon name=\"ri:history-line\" />\n                            {{ $t('action.viewRecentChats') }}\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            @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        <PkChatbotViewProfile v-else :agent-id>\n            <template\n                v-for=\"slotName in Object.keys(slots)\"\n                #[slotName]=\"slotData\"\n                ><slot :name=\"slotName\" v-bind=\"slotData\"\n            /></template>\n        </PkChatbotViewProfile>\n        <!-- #endregion -->\n\n        <!-- #region footer -->\n        <div v-if=\"footerMessage\" class=\"pk-chatbot__footer\">\n            <PkStreamingMarkdown :markdown=\"footerMessage\" class=\"wysiwyg\" />\n        </div>\n        <!-- #endregion -->\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        height: 100%;\n        background-color: var(--color-surface);\n\n        &__header {\n            position: sticky;\n            top: 0;\n            z-index: 1;\n            display: flex;\n            justify-content: space-between;\n            gap: var(--spacing-14);\n            background-color: var(--color-surface-1);\n            padding: var(--spacing-14);\n            border-bottom: 1px solid var(--color-surface-4);\n        }\n\n        &__header-start {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-sm);\n            min-width: 0;\n        }\n\n        &__nav-icon {\n            font-size: var(--text-18);\n        }\n\n        &__avatar {\n            width: var(--spacing-24);\n            height: var(--spacing-24);\n        }\n\n        &__title {\n            font-size: var(--text-16);\n            font-weight: 700;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        &__header-end {\n            flex-shrink: 0;\n        }\n\n        &__warning-body {\n            padding: var(--spacing-md);\n            border-bottom: 1px solid var(--color-surface-4);\n        }\n\n        &__warning-header {\n            display: flex;\n            align-items: center;\n            gap: var(--spacing-4);\n            margin-bottom: var(--spacing-4);\n        }\n\n        &__warning-icon {\n            width: var(--spacing-16);\n            height: var(--spacing-16);\n        }\n\n        &__warning-title {\n            font-weight: 600;\n            font-size: var(--text-14);\n        }\n\n        &__warning-text {\n            font-size: var(--text-12);\n            color: var(--color-word-3);\n        }\n\n        &__footer {\n            padding: var(--spacing-md);\n            border-top: 1px solid var(--color-surface-4);\n            text-align: center;\n            font-size: var(--text-12);\n            color: var(--color-word-2);\n        }\n    }\n</style>\n"],"mappings":"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"}

package/dist-vue/_chunks/{PkChatbotFeedbackForm-CUnS-WyR.js → PkChatbotFeedbackForm-D-lx1URv.js}

@@ -1,5 +1,5 @@
 import { m as e, v as t } from "./schemas-sa2dDEGb.js";
-import { t as n } from "./index.es-BnOT0fHY.js";
+import { t as n } from "./index.es-CrPSzhoZ.js";
 import { Transition as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, isRef as u, openBlock as d, toDisplayString as f, unref as p, withCtx as m, withModifiers as h } from "vue";
 import { VvAlert as g, VvButton as _, VvButtonGroup as v, VvIcon as y } from "@volverjs/ui-vue/components";
 import { useI18n as b } from "vue-i18n";
@@ -88,4 +88,4 @@ var x = { class: "border border-surface-3 rounded-xl w-full overflow-hidden" },
 //#endregion
 export { A as t };
 
-//# sourceMappingURL=PkChatbotFeedbackForm-CUnS-WyR.js.map
+//# sourceMappingURL=PkChatbotFeedbackForm-D-lx1URv.js.map

package/dist-vue/_chunks/{PkChatbotFeedbackForm-CUnS-WyR.js.map → PkChatbotFeedbackForm-D-lx1URv.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkChatbotFeedbackForm-CUnS-WyR.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 class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 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\" class=\"p-sm\">\n                <VvAlert\n                    v-if=\"error\"\n                    modifiers=\"danger\"\n                    class=\"mb-sm\"\n                    :label=\"error\" />\n                <VvForm v-model=\"formData\" @submit=\"onSubmit\">\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-sm\" />\n                    <div class=\"flex justify-end\">\n                        <VvButtonGroup>\n                            <VvButton\n                                type=\"button\"\n                                modifiers=\"secondary\"\n                                :label=\"$t('action.close')\"\n                                @click=\"$emit('close')\" />\n                            <VvButton\n                                type=\"submit\"\n                                modifiers=\"primary\"\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                <div class=\"flex items-center gap-sm\">\n                    <VvIcon\n                        name=\"ri:checkbox-circle-line\"\n                        class=\"text-24 text-success\" />\n                    <div>\n                        <strong class=\"font-semibold block text-success\">\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 class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 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\" class=\"p-sm\">\n                <VvAlert\n                    v-if=\"error\"\n                    modifiers=\"danger\"\n                    class=\"mb-sm\"\n                    :label=\"error\" />\n                <VvForm v-model=\"formData\" @submit=\"onSubmit\">\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-sm\" />\n                    <div class=\"flex justify-end\">\n                        <VvButtonGroup>\n                            <VvButton\n                                type=\"button\"\n                                modifiers=\"secondary\"\n                                :label=\"$t('action.close')\"\n                                @click=\"$emit('close')\" />\n                            <VvButton\n                                type=\"submit\"\n                                modifiers=\"primary\"\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                <div class=\"flex items-center gap-sm\">\n                    <VvIcon\n                        name=\"ri:checkbox-circle-line\"\n                        class=\"text-24 text-success\" />\n                    <div>\n                        <strong class=\"font-semibold block text-success\">\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,UAAU,CAAA,EAQ1C,IAAO,GASP,EAAE,WAAQ,gBAAa,gBAAa,EAJf,EAAS,EAChC,SAAS,GAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,GAAG,EACzC,CAEiD,EAAoB,EAClE,UAAU,IACb,CAAA,EAEK,KAAY,MAA8B;AAC5C,KAAK,UAAU,EAAK,QAAO;;;;eAK/B,EA6DM,OA7DN,GA6DM,CA5DF,EAUM,OAVN,GAUM;IARF,EAAkD,GAAA;KAA1C,MAAK;KAAmB,OAAM;;IACtC,EAA8D,UAA9D,GAA8D,EAAjC,EAAA,EAAE,CAAA,kBAAA,CAAA,EAAA,EAAA;IAC/B,EAKmC,GAAA;KAJ/B,MAAK;KACL,WAAU;KACT,OAAO,EAAA,EAAE,CAAA,eAAA;KACV,OAAM;KACL,SAAK,AAAA,EAAA,OAAA,GAAA,MAAOA,EAAAA,MAAK,QAAA,EAAA,CAAA,OAAA,CAAA;;OAE1B,EAgDa,GAAA,EAhDD,MAAK,UAAQ,EAAA;qBAgCf,CA/BM,EAAA,kBAgCZ,EAcM,OAdN,GAcM,CAbF,EAYM,OAZN,GAYM,CAXF,EAEmC,GAAA;KAD/B,MAAK;KACL,OAAM;QACV,EAOM,OAAA,MAAA,CANF,EAES,UAFT,GAES,EADF,EAAA,EAAE,CAAA,iCAAA,CAAA,EAAA,EAAA,EAET,EAEI,KAFJ,GAEI,EADG,EAAA,EAAE,CAAA,mCAAA,CAAA,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KA1CT,GAAA,EAAZ,EA+BM,OA/BN,GA+BM,CA7BQ,EAAA,SAAA,GAAA,EADV,EAIqB,GAAA;;KAFjB,WAAU;KACV,OAAM;KACL,OAAO,EAAA;yCACZ,EAwBS,EAAA,EAAA,EAAA;iBAxBQ,EAAA,EAAQ;qDAAA,QAAA,IAAA;KAAW;;sBAQZ,CAPpB,EAOoB,EAAA,EAAA,EAAA;MANhB,MAAK;MACL,MAAK;MACL,MAAK;MACJ,OAAO,EAAA,EAAE,CAAA,gBAAA;MACT,aAAa,EAAA,EAAE,CAAA,sBAAA;MAChB,WAAU;MACV,OAAM;4CACV,EAcM,OAdN,GAcM,CAbF,EAYgB,GAAA,MAAA;uBAPkB,CAJ9B,EAI8B,GAAA;OAH1B,MAAK;OACL,WAAU;OACT,OAAO,EAAA,EAAE,CAAA,eAAA;OACT,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,QAAA;8BACjB,EAKmC,GAAA;OAJ/B,MAAK;OACL,WAAU;OACT,SAAA,EAAA;OACA,UAAU,EAAA;OACV,OAAO,EAAA,EAAE,CAAA,gBAAA;;;;;;;;;6BAeT,CAAA"}
+{"version":3,"file":"PkChatbotFeedbackForm-D-lx1URv.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 class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 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\" class=\"p-sm\">\n                <VvAlert\n                    v-if=\"error\"\n                    modifiers=\"danger\"\n                    class=\"mb-sm\"\n                    :label=\"error\" />\n                <VvForm v-model=\"formData\" @submit=\"onSubmit\">\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-sm\" />\n                    <div class=\"flex justify-end\">\n                        <VvButtonGroup>\n                            <VvButton\n                                type=\"button\"\n                                modifiers=\"secondary\"\n                                :label=\"$t('action.close')\"\n                                @click=\"$emit('close')\" />\n                            <VvButton\n                                type=\"submit\"\n                                modifiers=\"primary\"\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                <div class=\"flex items-center gap-sm\">\n                    <VvIcon\n                        name=\"ri:checkbox-circle-line\"\n                        class=\"text-24 text-success\" />\n                    <div>\n                        <strong class=\"font-semibold block text-success\">\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 class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 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\" class=\"p-sm\">\n                <VvAlert\n                    v-if=\"error\"\n                    modifiers=\"danger\"\n                    class=\"mb-sm\"\n                    :label=\"error\" />\n                <VvForm v-model=\"formData\" @submit=\"onSubmit\">\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-sm\" />\n                    <div class=\"flex justify-end\">\n                        <VvButtonGroup>\n                            <VvButton\n                                type=\"button\"\n                                modifiers=\"secondary\"\n                                :label=\"$t('action.close')\"\n                                @click=\"$emit('close')\" />\n                            <VvButton\n                                type=\"submit\"\n                                modifiers=\"primary\"\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                <div class=\"flex items-center gap-sm\">\n                    <VvIcon\n                        name=\"ri:checkbox-circle-line\"\n                        class=\"text-24 text-success\" />\n                    <div>\n                        <strong class=\"font-semibold block text-success\">\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,UAAU,CAAA,EAQ1C,IAAO,GASP,EAAE,WAAQ,gBAAa,gBAAa,EAJf,EAAS,EAChC,SAAS,GAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,GAAG,EACzC,CAEiD,EAAoB,EAClE,UAAU,IACb,CAAA,EAEK,KAAY,MAA8B;AAC5C,KAAK,UAAU,EAAK,QAAO;;;;eAK/B,EA6DM,OA7DN,GA6DM,CA5DF,EAUM,OAVN,GAUM;IARF,EAAkD,GAAA;KAA1C,MAAK;KAAmB,OAAM;;IACtC,EAA8D,UAA9D,GAA8D,EAAjC,EAAA,EAAE,CAAA,kBAAA,CAAA,EAAA,EAAA;IAC/B,EAKmC,GAAA;KAJ/B,MAAK;KACL,WAAU;KACT,OAAO,EAAA,EAAE,CAAA,eAAA;KACV,OAAM;KACL,SAAK,AAAA,EAAA,OAAA,GAAA,MAAOA,EAAAA,MAAK,QAAA,EAAA,CAAA,OAAA,CAAA;;OAE1B,EAgDa,GAAA,EAhDD,MAAK,UAAQ,EAAA;qBAgCf,CA/BM,EAAA,kBAgCZ,EAcM,OAdN,GAcM,CAbF,EAYM,OAZN,GAYM,CAXF,EAEmC,GAAA;KAD/B,MAAK;KACL,OAAM;QACV,EAOM,OAAA,MAAA,CANF,EAES,UAFT,GAES,EADF,EAAA,EAAE,CAAA,iCAAA,CAAA,EAAA,EAAA,EAET,EAEI,KAFJ,GAEI,EADG,EAAA,EAAE,CAAA,mCAAA,CAAA,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KA1CT,GAAA,EAAZ,EA+BM,OA/BN,GA+BM,CA7BQ,EAAA,SAAA,GAAA,EADV,EAIqB,GAAA;;KAFjB,WAAU;KACV,OAAM;KACL,OAAO,EAAA;yCACZ,EAwBS,EAAA,EAAA,EAAA;iBAxBQ,EAAA,EAAQ;qDAAA,QAAA,IAAA;KAAW;;sBAQZ,CAPpB,EAOoB,EAAA,EAAA,EAAA;MANhB,MAAK;MACL,MAAK;MACL,MAAK;MACJ,OAAO,EAAA,EAAE,CAAA,gBAAA;MACT,aAAa,EAAA,EAAE,CAAA,sBAAA;MAChB,WAAU;MACV,OAAM;4CACV,EAcM,OAdN,GAcM,CAbF,EAYgB,GAAA,MAAA;uBAPkB,CAJ9B,EAI8B,GAAA;OAH1B,MAAK;OACL,WAAU;OACT,OAAO,EAAA,EAAE,CAAA,eAAA;OACT,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,QAAA;8BACjB,EAKmC,GAAA;OAJ/B,MAAK;OACL,WAAU;OACT,SAAA,EAAA;OACA,UAAU,EAAA;OACV,OAAO,EAAA,EAAE,CAAA,gBAAA;;;;;;;;;6BAeT,CAAA"}

package/dist-vue/_chunks/{PkChatbotFilePreview-JSpi3pmN.js → PkChatbotFilePreview-DHzuGtz5.js}

@@ -1,4 +1,4 @@
-import { n as e, t } from "./useLightbox-BiZUwsmB.js";
+import { n as e, t } from "./useLightbox-1sB7fmFb.js";
 import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, onMounted as l, openBlock as u, ref as d, toDisplayString as f, unref as p } from "vue";
 import { VvIcon as m } from "@volverjs/ui-vue/components";
 //#region ../../packages/components/src/chat/PkChatbotFilePreview.vue?vue&type=script&setup=true&lang.ts
@@ -82,4 +82,4 @@ var h = { class: "pk-chatbot-file-preview" }, g = [
 //#endregion
 export { x as t };
 
-//# sourceMappingURL=PkChatbotFilePreview-JSpi3pmN.js.map
+//# sourceMappingURL=PkChatbotFilePreview-DHzuGtz5.js.map

package/dist-vue/_chunks/{PkChatbotFilePreview-JSpi3pmN.js.map → PkChatbotFilePreview-DHzuGtz5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkChatbotFilePreview-JSpi3pmN.js","names":["$t","$emit"],"sources":["../../../../packages/components/src/chat/PkChatbotFilePreview.vue","../../../../packages/components/src/chat/PkChatbotFilePreview.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n    import { computed, ref, onMounted } from 'vue'\n    import { useLightbox, useImageSizes } from '../composables/useLightbox'\n\n    const props = defineProps<{\n        mediaType: string\n        url: string\n        filename?: string\n        loading?: boolean\n        error?: string\n        removable?: boolean\n    }>()\n\n    defineEmits<{\n        remove: []\n    }>()\n\n    const isImage = computed(() => props.mediaType.startsWith('image/'))\n\n    const galleryRef = ref<HTMLElement>()\n    const { preload, getSize } = useImageSizes()\n    const { init } = useLightbox({ gallery: galleryRef, loop: false })\n\n    onMounted(async () => {\n        if (!isImage.value) {\n            return\n        }\n        preload([{ url: props.url }])\n        await init()\n    })\n</script>\n\n<template>\n    <div class=\"pk-chatbot-file-preview\">\n        <div v-if=\"isImage\" ref=\"galleryRef\">\n            <a\n                :href=\"url\"\n                :data-pswp-src=\"url\"\n                :data-pswp-width=\"getSize(url).width\"\n                :data-pswp-height=\"getSize(url).height\"\n                :data-pswp-caption=\"filename ?? ''\"\n                class=\"pk-chatbot-file-preview__thumb-link\">\n                <img\n                    :src=\"url\"\n                    :alt=\"filename\"\n                    class=\"pk-chatbot-file-preview__thumb\" />\n            </a>\n        </div>\n        <a\n            v-else\n            :href=\"url\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            class=\"pk-chatbot-file-preview__icon-link\">\n            <VvIcon name=\"ri:file-line\" class=\"pk-chatbot-file-preview__icon\" />\n        </a>\n        <span v-if=\"filename\" class=\"pk-chatbot-file-preview__name\">{{\n            filename\n        }}</span>\n        <VvIcon\n            v-if=\"loading\"\n            name=\"line-md:loading-loop\"\n            class=\"pk-chatbot-file-preview__loading\" />\n        <VvIcon\n            v-else-if=\"error\"\n            name=\"ri:error-warning-line\"\n            :title=\"error\"\n            class=\"pk-chatbot-file-preview__error\" />\n        <button\n            v-if=\"removable && !loading\"\n            type=\"button\"\n            class=\"pk-chatbot-file-preview__remove\"\n            :title=\"$t('action.remove')\"\n            @click=\"$emit('remove')\">\n            <VvIcon name=\"ri:close-line\" />\n        </button>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-file-preview {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--spacing-4);\n        max-width: 160px;\n        padding: var(--spacing-4) var(--spacing-xs);\n        background-color: var(--color-surface-1);\n        border: 1px solid var(--color-surface-3);\n        border-radius: var(--rounded-md);\n        font-size: var(--text-12);\n        color: var(--color-word-2);\n\n        &__thumb-link {\n            display: flex;\n            flex-shrink: 0;\n            cursor: pointer;\n        }\n\n        &__thumb {\n            width: var(--spacing-20);\n            height: var(--spacing-20);\n            object-fit: cover;\n            border-radius: var(--rounded-sm);\n            flex-shrink: 0;\n        }\n\n        &__icon-link {\n            display: flex;\n            flex-shrink: 0;\n            color: inherit;\n            text-decoration: none;\n        }\n\n        &__icon {\n            width: var(--spacing-16);\n            height: var(--spacing-16);\n            flex-shrink: 0;\n            color: var(--color-word-3);\n        }\n\n        &__name {\n            flex: 1;\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        &__loading,\n        &__error {\n            width: var(--spacing-14);\n            height: var(--spacing-14);\n            flex-shrink: 0;\n        }\n\n        &__error {\n            color: var(--color-danger);\n        }\n\n        &__remove {\n            background: none;\n            border: none;\n            cursor: pointer;\n            padding: 0;\n            color: var(--color-word-4);\n            flex-shrink: 0;\n            display: flex;\n            align-items: center;\n            line-height: 1;\n\n            &:hover {\n                color: var(--color-word-1);\n            }\n        }\n    }\n</style>\n","<script lang=\"ts\" setup>\n    import { computed, ref, onMounted } from 'vue'\n    import { useLightbox, useImageSizes } from '../composables/useLightbox'\n\n    const props = defineProps<{\n        mediaType: string\n        url: string\n        filename?: string\n        loading?: boolean\n        error?: string\n        removable?: boolean\n    }>()\n\n    defineEmits<{\n        remove: []\n    }>()\n\n    const isImage = computed(() => props.mediaType.startsWith('image/'))\n\n    const galleryRef = ref<HTMLElement>()\n    const { preload, getSize } = useImageSizes()\n    const { init } = useLightbox({ gallery: galleryRef, loop: false })\n\n    onMounted(async () => {\n        if (!isImage.value) {\n            return\n        }\n        preload([{ url: props.url }])\n        await init()\n    })\n</script>\n\n<template>\n    <div class=\"pk-chatbot-file-preview\">\n        <div v-if=\"isImage\" ref=\"galleryRef\">\n            <a\n                :href=\"url\"\n                :data-pswp-src=\"url\"\n                :data-pswp-width=\"getSize(url).width\"\n                :data-pswp-height=\"getSize(url).height\"\n                :data-pswp-caption=\"filename ?? ''\"\n                class=\"pk-chatbot-file-preview__thumb-link\">\n                <img\n                    :src=\"url\"\n                    :alt=\"filename\"\n                    class=\"pk-chatbot-file-preview__thumb\" />\n            </a>\n        </div>\n        <a\n            v-else\n            :href=\"url\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            class=\"pk-chatbot-file-preview__icon-link\">\n            <VvIcon name=\"ri:file-line\" class=\"pk-chatbot-file-preview__icon\" />\n        </a>\n        <span v-if=\"filename\" class=\"pk-chatbot-file-preview__name\">{{\n            filename\n        }}</span>\n        <VvIcon\n            v-if=\"loading\"\n            name=\"line-md:loading-loop\"\n            class=\"pk-chatbot-file-preview__loading\" />\n        <VvIcon\n            v-else-if=\"error\"\n            name=\"ri:error-warning-line\"\n            :title=\"error\"\n            class=\"pk-chatbot-file-preview__error\" />\n        <button\n            v-if=\"removable && !loading\"\n            type=\"button\"\n            class=\"pk-chatbot-file-preview__remove\"\n            :title=\"$t('action.remove')\"\n            @click=\"$emit('remove')\">\n            <VvIcon name=\"ri:close-line\" />\n        </button>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-file-preview {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--spacing-4);\n        max-width: 160px;\n        padding: var(--spacing-4) var(--spacing-xs);\n        background-color: var(--color-surface-1);\n        border: 1px solid var(--color-surface-3);\n        border-radius: var(--rounded-md);\n        font-size: var(--text-12);\n        color: var(--color-word-2);\n\n        &__thumb-link {\n            display: flex;\n            flex-shrink: 0;\n            cursor: pointer;\n        }\n\n        &__thumb {\n            width: var(--spacing-20);\n            height: var(--spacing-20);\n            object-fit: cover;\n            border-radius: var(--rounded-sm);\n            flex-shrink: 0;\n        }\n\n        &__icon-link {\n            display: flex;\n            flex-shrink: 0;\n            color: inherit;\n            text-decoration: none;\n        }\n\n        &__icon {\n            width: var(--spacing-16);\n            height: var(--spacing-16);\n            flex-shrink: 0;\n            color: var(--color-word-3);\n        }\n\n        &__name {\n            flex: 1;\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        &__loading,\n        &__error {\n            width: var(--spacing-14);\n            height: var(--spacing-14);\n            flex-shrink: 0;\n        }\n\n        &__error {\n            color: var(--color-danger);\n        }\n\n        &__remove {\n            background: none;\n            border: none;\n            cursor: pointer;\n            padding: 0;\n            color: var(--color-word-4);\n            flex-shrink: 0;\n            display: flex;\n            align-items: center;\n            line-height: 1;\n\n            &:hover {\n                color: var(--color-word-1);\n            }\n        }\n    }\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAII,IAAM,IAAQ,GAaR,IAAU,QAAe,EAAM,UAAU,WAAW,SAAS,CAAA,EAE7D,IAAa,GAAiB,EAC9B,EAAE,YAAS,eAAY,GAAc,EACrC,EAAE,YAAS,EAAY;GAAE,SAAS;GAAY,MAAM;GAAO,CAAA;SAEjE,EAAU,YAAY;AACb,KAAQ,UAGb,EAAQ,CAAC,EAAE,KAAK,EAAM,KAAK,CAAC,CAAA,EAC5B,MAAM,GAAK;IACd;;eAID,EA2CM,OA3CN,GA2CM;IA1CS,EAAA,SAAA,GAAA,EAAX,EAaM,OAAA;;cAbkB;KAAJ,KAAI;QACpB,EAWI,KAAA;KAVC,MAAM,EAAA;KACN,iBAAe,EAAA;KACf,mBAAiB,EAAA,EAAO,CAAC,EAAA,IAAG,CAAE;KAC9B,oBAAkB,EAAA,EAAO,CAAC,EAAA,IAAG,CAAE;KAC/B,qBAAmB,EAAA,YAAQ;KAC5B,OAAM;QACN,EAG6C,OAAA;KAFxC,KAAK,EAAA;KACL,KAAK,EAAA;KACN,OAAM;2CAGlB,EAOI,KAAA;;KALC,MAAM,EAAA;KACP,QAAO;KACP,KAAI;KACJ,OAAM;QACN,EAAoE,GAAA;KAA5D,MAAK;KAAe,OAAM;;IAE1B,EAAA,YAAA,GAAA,EAAZ,EAES,QAFT,GAES,EADL,EAAA,SAAQ,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAGF,EAAA,WAAA,GAAA,EADV,EAG+C,GAAA;;KAD3C,MAAK;KACL,OAAM;UAEK,EAAA,SAAA,GAAA,EADf,EAI6C,GAAA;;KAFzC,MAAK;KACJ,OAAO,EAAA;KACR,OAAM;;IAEA,EAAA,aAAS,CAAK,EAAA,WAAA,GAAA,EADxB,EAOS,UAAA;;KALL,MAAK;KACL,OAAM;KACL,OAAOA,EAAAA,GAAE,gBAAA;KACT,SAAK,AAAA,EAAA,QAAA,MAAEC,EAAAA,MAAK,SAAA;QACb,EAA+B,GAAA,EAAvB,MAAK,iBAAe,CAAA,CAAA,EAAA,GAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}
+{"version":3,"file":"PkChatbotFilePreview-DHzuGtz5.js","names":["$t","$emit"],"sources":["../../../../packages/components/src/chat/PkChatbotFilePreview.vue","../../../../packages/components/src/chat/PkChatbotFilePreview.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n    import { computed, ref, onMounted } from 'vue'\n    import { useLightbox, useImageSizes } from '../composables/useLightbox'\n\n    const props = defineProps<{\n        mediaType: string\n        url: string\n        filename?: string\n        loading?: boolean\n        error?: string\n        removable?: boolean\n    }>()\n\n    defineEmits<{\n        remove: []\n    }>()\n\n    const isImage = computed(() => props.mediaType.startsWith('image/'))\n\n    const galleryRef = ref<HTMLElement>()\n    const { preload, getSize } = useImageSizes()\n    const { init } = useLightbox({ gallery: galleryRef, loop: false })\n\n    onMounted(async () => {\n        if (!isImage.value) {\n            return\n        }\n        preload([{ url: props.url }])\n        await init()\n    })\n</script>\n\n<template>\n    <div class=\"pk-chatbot-file-preview\">\n        <div v-if=\"isImage\" ref=\"galleryRef\">\n            <a\n                :href=\"url\"\n                :data-pswp-src=\"url\"\n                :data-pswp-width=\"getSize(url).width\"\n                :data-pswp-height=\"getSize(url).height\"\n                :data-pswp-caption=\"filename ?? ''\"\n                class=\"pk-chatbot-file-preview__thumb-link\">\n                <img\n                    :src=\"url\"\n                    :alt=\"filename\"\n                    class=\"pk-chatbot-file-preview__thumb\" />\n            </a>\n        </div>\n        <a\n            v-else\n            :href=\"url\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            class=\"pk-chatbot-file-preview__icon-link\">\n            <VvIcon name=\"ri:file-line\" class=\"pk-chatbot-file-preview__icon\" />\n        </a>\n        <span v-if=\"filename\" class=\"pk-chatbot-file-preview__name\">{{\n            filename\n        }}</span>\n        <VvIcon\n            v-if=\"loading\"\n            name=\"line-md:loading-loop\"\n            class=\"pk-chatbot-file-preview__loading\" />\n        <VvIcon\n            v-else-if=\"error\"\n            name=\"ri:error-warning-line\"\n            :title=\"error\"\n            class=\"pk-chatbot-file-preview__error\" />\n        <button\n            v-if=\"removable && !loading\"\n            type=\"button\"\n            class=\"pk-chatbot-file-preview__remove\"\n            :title=\"$t('action.remove')\"\n            @click=\"$emit('remove')\">\n            <VvIcon name=\"ri:close-line\" />\n        </button>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-file-preview {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--spacing-4);\n        max-width: 160px;\n        padding: var(--spacing-4) var(--spacing-xs);\n        background-color: var(--color-surface-1);\n        border: 1px solid var(--color-surface-3);\n        border-radius: var(--rounded-md);\n        font-size: var(--text-12);\n        color: var(--color-word-2);\n\n        &__thumb-link {\n            display: flex;\n            flex-shrink: 0;\n            cursor: pointer;\n        }\n\n        &__thumb {\n            width: var(--spacing-20);\n            height: var(--spacing-20);\n            object-fit: cover;\n            border-radius: var(--rounded-sm);\n            flex-shrink: 0;\n        }\n\n        &__icon-link {\n            display: flex;\n            flex-shrink: 0;\n            color: inherit;\n            text-decoration: none;\n        }\n\n        &__icon {\n            width: var(--spacing-16);\n            height: var(--spacing-16);\n            flex-shrink: 0;\n            color: var(--color-word-3);\n        }\n\n        &__name {\n            flex: 1;\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        &__loading,\n        &__error {\n            width: var(--spacing-14);\n            height: var(--spacing-14);\n            flex-shrink: 0;\n        }\n\n        &__error {\n            color: var(--color-danger);\n        }\n\n        &__remove {\n            background: none;\n            border: none;\n            cursor: pointer;\n            padding: 0;\n            color: var(--color-word-4);\n            flex-shrink: 0;\n            display: flex;\n            align-items: center;\n            line-height: 1;\n\n            &:hover {\n                color: var(--color-word-1);\n            }\n        }\n    }\n</style>\n","<script lang=\"ts\" setup>\n    import { computed, ref, onMounted } from 'vue'\n    import { useLightbox, useImageSizes } from '../composables/useLightbox'\n\n    const props = defineProps<{\n        mediaType: string\n        url: string\n        filename?: string\n        loading?: boolean\n        error?: string\n        removable?: boolean\n    }>()\n\n    defineEmits<{\n        remove: []\n    }>()\n\n    const isImage = computed(() => props.mediaType.startsWith('image/'))\n\n    const galleryRef = ref<HTMLElement>()\n    const { preload, getSize } = useImageSizes()\n    const { init } = useLightbox({ gallery: galleryRef, loop: false })\n\n    onMounted(async () => {\n        if (!isImage.value) {\n            return\n        }\n        preload([{ url: props.url }])\n        await init()\n    })\n</script>\n\n<template>\n    <div class=\"pk-chatbot-file-preview\">\n        <div v-if=\"isImage\" ref=\"galleryRef\">\n            <a\n                :href=\"url\"\n                :data-pswp-src=\"url\"\n                :data-pswp-width=\"getSize(url).width\"\n                :data-pswp-height=\"getSize(url).height\"\n                :data-pswp-caption=\"filename ?? ''\"\n                class=\"pk-chatbot-file-preview__thumb-link\">\n                <img\n                    :src=\"url\"\n                    :alt=\"filename\"\n                    class=\"pk-chatbot-file-preview__thumb\" />\n            </a>\n        </div>\n        <a\n            v-else\n            :href=\"url\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            class=\"pk-chatbot-file-preview__icon-link\">\n            <VvIcon name=\"ri:file-line\" class=\"pk-chatbot-file-preview__icon\" />\n        </a>\n        <span v-if=\"filename\" class=\"pk-chatbot-file-preview__name\">{{\n            filename\n        }}</span>\n        <VvIcon\n            v-if=\"loading\"\n            name=\"line-md:loading-loop\"\n            class=\"pk-chatbot-file-preview__loading\" />\n        <VvIcon\n            v-else-if=\"error\"\n            name=\"ri:error-warning-line\"\n            :title=\"error\"\n            class=\"pk-chatbot-file-preview__error\" />\n        <button\n            v-if=\"removable && !loading\"\n            type=\"button\"\n            class=\"pk-chatbot-file-preview__remove\"\n            :title=\"$t('action.remove')\"\n            @click=\"$emit('remove')\">\n            <VvIcon name=\"ri:close-line\" />\n        </button>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-chatbot-file-preview {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--spacing-4);\n        max-width: 160px;\n        padding: var(--spacing-4) var(--spacing-xs);\n        background-color: var(--color-surface-1);\n        border: 1px solid var(--color-surface-3);\n        border-radius: var(--rounded-md);\n        font-size: var(--text-12);\n        color: var(--color-word-2);\n\n        &__thumb-link {\n            display: flex;\n            flex-shrink: 0;\n            cursor: pointer;\n        }\n\n        &__thumb {\n            width: var(--spacing-20);\n            height: var(--spacing-20);\n            object-fit: cover;\n            border-radius: var(--rounded-sm);\n            flex-shrink: 0;\n        }\n\n        &__icon-link {\n            display: flex;\n            flex-shrink: 0;\n            color: inherit;\n            text-decoration: none;\n        }\n\n        &__icon {\n            width: var(--spacing-16);\n            height: var(--spacing-16);\n            flex-shrink: 0;\n            color: var(--color-word-3);\n        }\n\n        &__name {\n            flex: 1;\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        &__loading,\n        &__error {\n            width: var(--spacing-14);\n            height: var(--spacing-14);\n            flex-shrink: 0;\n        }\n\n        &__error {\n            color: var(--color-danger);\n        }\n\n        &__remove {\n            background: none;\n            border: none;\n            cursor: pointer;\n            padding: 0;\n            color: var(--color-word-4);\n            flex-shrink: 0;\n            display: flex;\n            align-items: center;\n            line-height: 1;\n\n            &:hover {\n                color: var(--color-word-1);\n            }\n        }\n    }\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAII,IAAM,IAAQ,GAaR,IAAU,QAAe,EAAM,UAAU,WAAW,SAAS,CAAA,EAE7D,IAAa,GAAiB,EAC9B,EAAE,YAAS,eAAY,GAAc,EACrC,EAAE,YAAS,EAAY;GAAE,SAAS;GAAY,MAAM;GAAO,CAAA;SAEjE,EAAU,YAAY;AACb,KAAQ,UAGb,EAAQ,CAAC,EAAE,KAAK,EAAM,KAAK,CAAC,CAAA,EAC5B,MAAM,GAAK;IACd;;eAID,EA2CM,OA3CN,GA2CM;IA1CS,EAAA,SAAA,GAAA,EAAX,EAaM,OAAA;;cAbkB;KAAJ,KAAI;QACpB,EAWI,KAAA;KAVC,MAAM,EAAA;KACN,iBAAe,EAAA;KACf,mBAAiB,EAAA,EAAO,CAAC,EAAA,IAAG,CAAE;KAC9B,oBAAkB,EAAA,EAAO,CAAC,EAAA,IAAG,CAAE;KAC/B,qBAAmB,EAAA,YAAQ;KAC5B,OAAM;QACN,EAG6C,OAAA;KAFxC,KAAK,EAAA;KACL,KAAK,EAAA;KACN,OAAM;2CAGlB,EAOI,KAAA;;KALC,MAAM,EAAA;KACP,QAAO;KACP,KAAI;KACJ,OAAM;QACN,EAAoE,GAAA;KAA5D,MAAK;KAAe,OAAM;;IAE1B,EAAA,YAAA,GAAA,EAAZ,EAES,QAFT,GAES,EADL,EAAA,SAAQ,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAGF,EAAA,WAAA,GAAA,EADV,EAG+C,GAAA;;KAD3C,MAAK;KACL,OAAM;UAEK,EAAA,SAAA,GAAA,EADf,EAI6C,GAAA;;KAFzC,MAAK;KACJ,OAAO,EAAA;KACR,OAAM;;IAEA,EAAA,aAAS,CAAK,EAAA,WAAA,GAAA,EADxB,EAOS,UAAA;;KALL,MAAK;KACL,OAAM;KACL,OAAOA,EAAAA,GAAE,gBAAA;KACT,SAAK,AAAA,EAAA,QAAA,MAAEC,EAAAA,MAAK,SAAA;QACb,EAA+B,GAAA,EAAvB,MAAK,iBAAe,CAAA,CAAA,EAAA,GAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist-vue/_chunks/{PkChatbotInput-ODPhsqZt.js → PkChatbotInput-LHE0HZ9z.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./PkStreamingMarkdown-CtiMH6FD.js";
-import { t } from "./PkChatbotFilePreview-JSpi3pmN.js";
+import { t as e } from "./PkStreamingMarkdown-B4gnJ4hk.js";
+import { t } from "./PkChatbotFilePreview-DHzuGtz5.js";
 import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, nextTick as p, normalizeClass as ee, normalizeProps as te, onBeforeUnmount as m, onMounted as h, openBlock as g, ref as _, renderList as ne, renderSlot as re, toDisplayString as v, unref as y, useModel as b, useTemplateRef as x, vModelText as ie, withCtx as S, withDirectives as ae, withKeys as oe, withModifiers as C } from "vue";
 import { VvButton as se, VvDropdown as ce, VvDropdownAction as le, VvIcon as ue } from "@volverjs/ui-vue/components";
 import { useDropZone as de } from "@vueuse/core";
@@ -302,4 +302,4 @@ var O = D, fe = { class: "pk-chatbot-input" }, pe = {
 //#endregion
 export { L as t };
 
-//# sourceMappingURL=PkChatbotInput-ODPhsqZt.js.map
+//# sourceMappingURL=PkChatbotInput-LHE0HZ9z.js.map