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

package/README.md

@@ -332,6 +332,7 @@ createApp(App).use(createPinia()).use(i18n).mount('#app')
 ```
 
 > **Note:** `@volverjs/ui-vue` must also be registered via `app.use(VolverPlugin, { ... })` with the icon collections and any component defaults you need.
+> The collections are not optional: pass both `normal` (from `@volverjs/ui-vue/icons`) and the workspace `icons` package, which carries the two icons these components name directly: `loading-loop`, the spinner of every waiting state, and `wifi-off`, the one the offline screen shows precisely when nothing can be fetched. An icon whose collection is missing renders nothing at all, without an error, because Iconify reads a bare `loading-loop` as the icon `loop` of a set called `loading`.
 
 ### Usage
 

package/dist/_chunks/{PkToolRequestGeolocation-CEVpl50q.js → PkToolRequestGeolocation-OokLeTf1.js}

@@ -57,7 +57,7 @@ var v = { class: "flex items-center gap-6 text-12 text-word-3 border border-surf
 				style: "unit",
 				unit: "meter"
 			})) + ") ", 1)], 64))])], 64)) : T.value ? (n(), f(c, { key: 2 }, [t[0] ||= l("span", { class: "i-vv-alert-circle text-16 shrink-0 text-danger" }, null, -1), l("span", null, i(T.value.error === "permission_denied" ? s(y)("message.geolocationPermissionDenied") : s(y)("message.geolocationUnavailable")), 1)], 64)) : a("", !0) : (n(), f(c, { key: 0 }, [p(r, {
-				name: "line-md:loading-loop",
+				name: "loading-loop",
 				class: "text-16"
 			}), l("span", null, i(s(y)("messagePart.requestGeolocation")), 1)], 64))]);
 		};
@@ -66,4 +66,4 @@ var v = { class: "flex items-center gap-6 text-12 text-word-3 border border-surf
 //#endregion
 export { y as default };
 
-//# sourceMappingURL=PkToolRequestGeolocation-CEVpl50q.js.map
+//# sourceMappingURL=PkToolRequestGeolocation-OokLeTf1.js.map

package/dist/_chunks/PkToolRequestGeolocation-OokLeTf1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PkToolRequestGeolocation-OokLeTf1.js","names":["$n"],"sources":["../../../../packages/components/src/chat/PkToolRequestGeolocation.vue","../../../../packages/components/src/chat/PkToolRequestGeolocation.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { computed, onMounted } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { isVoiceRenderAck } from 'models'\n\n    import type { ReverseGeocodeFn } from 'utils/src/device-context'\n\n    type GeolocationOutput =\n        | {\n              latitude: number\n              longitude: number\n              accuracy?: number\n              city?: string\n          }\n        | { error: 'permission_denied' | 'position_unavailable' | 'timeout' }\n\n    const props = defineProps<{\n        part: unknown\n        reverseGeocode?: ReverseGeocodeFn\n        /**\n         * Whether a voice call is on the line right now. A request drawn\n         * during a call arrives already resolved with the render ack, and the\n         * browser prompt must fire only while the caller who was asked is\n         * still there: reopening the conversation later must not ask again.\n         */\n        callLive?: boolean\n    }>()\n\n    const emit = defineEmits<{\n        result: [output: GeolocationOutput]\n    }>()\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    const toolPart = computed(() => {\n        return props.part as {\n            state?: string\n            input?: { reason?: string }\n            /** The position, or the voice render ack (a string). */\n            output?: GeolocationOutput | string\n        }\n    })\n\n    const state = computed(() => toolPart.value.state ?? 'unknown')\n\n    /**\n     * The ack is not a position: it only says the card was drawn during a\n     * call (see `isVoiceRenderAck`, same rule as the forms). Besides gating\n     * the prompt below, it must be kept away from the output parsing: `in`\n     * on a string throws, which broke this card on every spoken turn.\n     */\n    const isRenderAck = computed(() => isVoiceRenderAck(toolPart.value.output))\n\n    const isOutputAvailable = computed(\n        () => state.value === 'output-available' && !isRenderAck.value,\n    )\n\n    const successOutput = computed(() => {\n        const out = toolPart.value.output\n        if (!out || typeof out === 'string' || 'error' in out) {\n            return undefined\n        }\n        return out\n    })\n\n    const errorOutput = computed(() => {\n        const out = toolPart.value.output\n        if (!out || typeof out === 'string' || !('error' in out)) {\n            return undefined\n        }\n        return out\n    })\n\n    /** Maps GeolocationPositionError.code to a typed string */\n    function mapGeolocationError(\n        code: number,\n    ): 'permission_denied' | 'position_unavailable' | 'timeout' {\n        if (code === 1) {\n            return 'permission_denied'\n        }\n        if (code === 3) {\n            return 'timeout'\n        }\n        return 'position_unavailable'\n    }\n\n    onMounted(() => {\n        const isAwaitingPosition =\n            state.value === 'input-available' ||\n            (isRenderAck.value && props.callLive === true)\n        if (!isAwaitingPosition) {\n            return\n        }\n\n        if (!navigator.geolocation) {\n            emit('result', { error: 'position_unavailable' })\n            return\n        }\n\n        navigator.geolocation.getCurrentPosition(\n            async (position) => {\n                const { latitude, longitude, accuracy } = position.coords\n                const city = props.reverseGeocode\n                    ? await props\n                          .reverseGeocode(latitude, longitude)\n                          .catch(() => undefined)\n                    : undefined\n                emit('result', { latitude, longitude, accuracy, city })\n            },\n            (error) => {\n                emit('result', { error: mapGeolocationError(error.code) })\n            },\n            { timeout: 15000 },\n        )\n    })\n</script>\n\n<template>\n    <div\n        class=\"flex items-center gap-6 text-12 text-word-3 border border-surface-3 rounded-xl px-sm py-10\">\n        <!-- Loading state -->\n        <template v-if=\"!isOutputAvailable\">\n            <VvIcon name=\"loading-loop\" class=\"text-16\" />\n            <span>{{ $t('messagePart.requestGeolocation') }}</span>\n        </template>\n\n        <!-- Success state -->\n        <template v-else-if=\"successOutput\">\n            <VvIcon name=\"ri:map-pin-line\" class=\"text-16\" />\n            <span>\n                {{\n                    $n(successOutput.latitude, {\n                        style: 'decimal',\n                        minimumFractionDigits: 5,\n                        maximumFractionDigits: 5,\n                    })\n                }},\n                {{\n                    $n(successOutput.longitude, {\n                        style: 'decimal',\n                        minimumFractionDigits: 5,\n                        maximumFractionDigits: 5,\n                    })\n                }}\n                <template v-if=\"successOutput.accuracy !== undefined\">\n                    (±{{\n                        $n(successOutput.accuracy, {\n                            style: 'unit',\n                            unit: 'meter',\n                        })\n                    }})\n                </template>\n            </span>\n        </template>\n\n        <!-- Error state -->\n        <template v-else-if=\"errorOutput\">\n            <span class=\"i-vv-alert-circle text-16 shrink-0 text-danger\" />\n            <span>\n                {{\n                    errorOutput.error === 'permission_denied'\n                        ? $t('message.geolocationPermissionDenied')\n                        : $t('message.geolocationUnavailable')\n                }}\n            </span>\n        </template>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import { computed, onMounted } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { isVoiceRenderAck } from 'models'\n\n    import type { ReverseGeocodeFn } from 'utils/src/device-context'\n\n    type GeolocationOutput =\n        | {\n              latitude: number\n              longitude: number\n              accuracy?: number\n              city?: string\n          }\n        | { error: 'permission_denied' | 'position_unavailable' | 'timeout' }\n\n    const props = defineProps<{\n        part: unknown\n        reverseGeocode?: ReverseGeocodeFn\n        /**\n         * Whether a voice call is on the line right now. A request drawn\n         * during a call arrives already resolved with the render ack, and the\n         * browser prompt must fire only while the caller who was asked is\n         * still there: reopening the conversation later must not ask again.\n         */\n        callLive?: boolean\n    }>()\n\n    const emit = defineEmits<{\n        result: [output: GeolocationOutput]\n    }>()\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    const toolPart = computed(() => {\n        return props.part as {\n            state?: string\n            input?: { reason?: string }\n            /** The position, or the voice render ack (a string). */\n            output?: GeolocationOutput | string\n        }\n    })\n\n    const state = computed(() => toolPart.value.state ?? 'unknown')\n\n    /**\n     * The ack is not a position: it only says the card was drawn during a\n     * call (see `isVoiceRenderAck`, same rule as the forms). Besides gating\n     * the prompt below, it must be kept away from the output parsing: `in`\n     * on a string throws, which broke this card on every spoken turn.\n     */\n    const isRenderAck = computed(() => isVoiceRenderAck(toolPart.value.output))\n\n    const isOutputAvailable = computed(\n        () => state.value === 'output-available' && !isRenderAck.value,\n    )\n\n    const successOutput = computed(() => {\n        const out = toolPart.value.output\n        if (!out || typeof out === 'string' || 'error' in out) {\n            return undefined\n        }\n        return out\n    })\n\n    const errorOutput = computed(() => {\n        const out = toolPart.value.output\n        if (!out || typeof out === 'string' || !('error' in out)) {\n            return undefined\n        }\n        return out\n    })\n\n    /** Maps GeolocationPositionError.code to a typed string */\n    function mapGeolocationError(\n        code: number,\n    ): 'permission_denied' | 'position_unavailable' | 'timeout' {\n        if (code === 1) {\n            return 'permission_denied'\n        }\n        if (code === 3) {\n            return 'timeout'\n        }\n        return 'position_unavailable'\n    }\n\n    onMounted(() => {\n        const isAwaitingPosition =\n            state.value === 'input-available' ||\n            (isRenderAck.value && props.callLive === true)\n        if (!isAwaitingPosition) {\n            return\n        }\n\n        if (!navigator.geolocation) {\n            emit('result', { error: 'position_unavailable' })\n            return\n        }\n\n        navigator.geolocation.getCurrentPosition(\n            async (position) => {\n                const { latitude, longitude, accuracy } = position.coords\n                const city = props.reverseGeocode\n                    ? await props\n                          .reverseGeocode(latitude, longitude)\n                          .catch(() => undefined)\n                    : undefined\n                emit('result', { latitude, longitude, accuracy, city })\n            },\n            (error) => {\n                emit('result', { error: mapGeolocationError(error.code) })\n            },\n            { timeout: 15000 },\n        )\n    })\n</script>\n\n<template>\n    <div\n        class=\"flex items-center gap-6 text-12 text-word-3 border border-surface-3 rounded-xl px-sm py-10\">\n        <!-- Loading state -->\n        <template v-if=\"!isOutputAvailable\">\n            <VvIcon name=\"loading-loop\" class=\"text-16\" />\n            <span>{{ $t('messagePart.requestGeolocation') }}</span>\n        </template>\n\n        <!-- Success state -->\n        <template v-else-if=\"successOutput\">\n            <VvIcon name=\"ri:map-pin-line\" class=\"text-16\" />\n            <span>\n                {{\n                    $n(successOutput.latitude, {\n                        style: 'decimal',\n                        minimumFractionDigits: 5,\n                        maximumFractionDigits: 5,\n                    })\n                }},\n                {{\n                    $n(successOutput.longitude, {\n                        style: 'decimal',\n                        minimumFractionDigits: 5,\n                        maximumFractionDigits: 5,\n                    })\n                }}\n                <template v-if=\"successOutput.accuracy !== undefined\">\n                    (±{{\n                        $n(successOutput.accuracy, {\n                            style: 'unit',\n                            unit: 'meter',\n                        })\n                    }})\n                </template>\n            </span>\n        </template>\n\n        <!-- Error state -->\n        <template v-else-if=\"errorOutput\">\n            <span class=\"i-vv-alert-circle text-16 shrink-0 text-danger\" />\n            <span>\n                {{\n                    errorOutput.error === 'permission_denied'\n                        ? $t('message.geolocationPermissionDenied')\n                        : $t('message.geolocationUnavailable')\n                }}\n            </span>\n        </template>\n    </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAgBI,IAAM,IAAQ,GAYR,IAAO,GAIP,EAAE,GAAG,MAAO,EAAQ,EAAE,UAAU,SAAS,CAAC,GAE1C,IAAW,QACN,EAAM,IAMhB,GAEK,IAAQ,QAAe,EAAS,MAAM,SAAS,SAAS,GAQxD,IAAc,QAAe,EAAiB,EAAS,MAAM,MAAM,CAAC,GAEpE,IAAoB,QAChB,EAAM,UAAU,sBAAsB,CAAC,EAAY,KAC7D,GAEM,IAAgB,QAAe;GACjC,IAAM,IAAM,EAAS,MAAM;GACvB,OAAC,KAAO,OAAO,KAAQ,YAAY,WAAW,IAGlD,OAAO;EACX,CAAC,GAEK,IAAc,QAAe;GAC/B,IAAM,IAAM,EAAS,MAAM;GACvB,IAAC,KAAO,OAAO,KAAQ,YAAc,WAAW,GAGpD,OAAO;EACX,CAAC;EAGD,SAAS,EACL,GACwD;GAOxD,OANI,MAAS,IACF,sBAEP,MAAS,IACF,YAEJ;EACX;SAEA,QAAgB;GAER,MAAM,UAAU,qBACf,EAAY,SAAS,EAAM,aAAa,IAK7C;QAAI,CAAC,UAAU,aAAa;KACxB,EAAK,UAAU,EAAE,OAAO,uBAAuB,CAAC;KAChD;IACJ;IAEA,UAAU,YAAY,mBAClB,OAAO,MAAa;KAChB,IAAM,EAAE,aAAU,cAAW,gBAAa,EAAS,QAC7C,IAAO,EAAM,iBACb,MAAM,EACD,eAAe,GAAU,CAAS,CAAA,CAClC,YAAY,KAAA,CAAS,IAC1B,KAAA;KACN,EAAK,UAAU;MAAE;MAAU;MAAW;MAAU;KAAK,CAAC;IAC1D,IACC,MAAU;KACP,EAAK,UAAU,EAAE,OAAO,EAAoB,EAAM,IAAI,EAAE,CAAC;IAC7D,GACA,EAAE,SAAS,KAAM,CACrB;GAhBA;EAiBJ,CAAC;;GAID,OAAA,EAAA,GAAA,EAgDM,OAhDN,GAgDM,CA7Ce,EAAA,QAMI,EAAA,SAArB,EAAA,GAAA,EA0BW,GAAA,EAAA,KAAA,EAAA,GAAA,CAzBP,EAAiD,GAAA;IAAzC,MAAK;IAAkB,OAAM;GACrC,CAAA,GAAA,EAuBO,QAAA,MAAA,CArBCA,EAAAA,EAAAA,EAAAA,GAAG,EAAA,MAAc,UAAQ;;;;GAK3B,CAAA,CAAA,IAAA,OACF,EACIA,EAAAA,GAAG,EAAA,MAAc,WAAS;;;;GAK5B,CAAA,CAAA,IAAA,KACF,CAAA,GAAgB,EAAA,MAAc,aAAa,KAAA,IAO3C,EAAA,IAAA,EAAA,KAPA,EAAA,GAAA,EAOW,GAAA,EAAA,KAAA,EAAA,GAAA,CAP2C,EAAA,QAChD,EACEA,EAAAA,GAAG,EAAA,MAAc,UAAQ;;;GAI3B,CAAA,CAAA,IAAA,MACN,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,EAAA,KAKa,EAAA,SAArB,EAAA,GAAA,EASW,GAAA,EAAA,KAAA,EAAA,GAAA,CARP,AAAA,EAAA,OAAA,EAA+D,QAAA,EAAzD,OAAM,iDAAgD,GAAA,MAAA,EAAA,GAC5D,EAMO,QAAA,MAAA,EAJC,EAAA,MAAY,UAAK,sBAAmD,EAAA,CAAA,CAAE,CAAA,qCAAA,IAAkE,EAAA,CAAA,CAAE,CAAA,gCAAA,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA,KAvCtJ,EAAA,GAAA,EAGW,GAAA,EAAA,KAAA,EAAA,GAAA,CAFP,EAA8C,GAAA;IAAtC,MAAK;IAAe,OAAM;GAClC,CAAA,GAAA,EAAuD,QAAA,MAAA,EAA9C,EAAA,CAAA,CAAE,CAAA,gCAAA,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,EAqCuI,CAAA"}

package/dist/_chunks/{PkToolRequestOAuthConnection-CncDU-Kl.js → PkToolRequestOAuthConnection-CtqKG6Yb.js}

@@ -98,7 +98,7 @@ var x = { class: "border border-surface-3 rounded-xl w-full overflow-hidden bg-s
 			}), u("strong", C, a(I.value), 1)]), u("div", ee, [W.value ? (r(), m("div", w, [h(n, {
 				name: "ri:check-line",
 				class: "text-16 text-word-3"
-			}), u("strong", T, a(s(N)("messagePart.requestOAuthConnectionSuccess", { name: I.value })), 1)])) : H.value ? (r(), m("div", E, [h(n, { name: "line-md:loading-loop" }), u("span", D, a(s(N)("messagePart.requestOAuthConnection")), 1)])) : U.value ? (r(), m("div", te, [u("div", ne, [h(n, {
+			}), u("strong", T, a(s(N)("messagePart.requestOAuthConnectionSuccess", { name: I.value })), 1)])) : H.value ? (r(), m("div", E, [h(n, { name: "loading-loop" }), u("span", D, a(s(N)("messagePart.requestOAuthConnection")), 1)])) : U.value ? (r(), m("div", te, [u("div", ne, [h(n, {
 				name: "ri:close-line",
 				class: "text-danger"
 			}), u("strong", re, a(U.value), 1)]), G.value ? (r(), l(i, {
@@ -119,4 +119,4 @@ var x = { class: "border border-surface-3 rounded-xl w-full overflow-hidden bg-s
 //#endregion
 export { N as default };
 
-//# sourceMappingURL=PkToolRequestOAuthConnection-CncDU-Kl.js.map
+//# sourceMappingURL=PkToolRequestOAuthConnection-CtqKG6Yb.js.map

package/dist/_chunks/PkToolRequestOAuthConnection-CtqKG6Yb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PkToolRequestOAuthConnection-CtqKG6Yb.js","names":[],"sources":["../../../../packages/components/src/chat/PkToolRequestOAuthConnection.vue","../../../../packages/components/src/chat/PkToolRequestOAuthConnection.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { computed, onMounted, onUnmounted, ref } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { isVoiceRenderAck } from 'models'\n\n    const props = defineProps<{\n        part: unknown\n        resolveConnection?: (\n            serverName: string,\n        ) => Promise<{ mcpServerId: string; authorizeUrl: string }>\n        checkConnection?: (\n            serverName: string,\n        ) => Promise<{ mcpServerId: string; connected: boolean }>\n    }>()\n\n    const emit = defineEmits<{\n        connected: [mcpServerId: string]\n    }>()\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    /** How often the connection is re-read while the sign-in window is out. */\n    const POLL_INTERVAL_MS = 2000\n    /**\n     * How long we keep asking. The only end to a sign-in nobody finishes:\n     * `popup.closed` cannot be that signal, because the browser disowns the\n     * handle when the provider severs the opener (that is what\n     * `Cross-Origin-Opener-Policy` does), so it reads as closed from the first\n     * check of the very flow this watch exists for. Long enough for a password\n     * manager and a second factor.\n     */\n    const POLL_TIMEOUT_MS = 5 * 60 * 1000\n\n    const toolPart = computed(() => {\n        return props.part as {\n            state?: string\n            toolCallId?: string\n            input?: { serverName: string }\n            output?: unknown\n        }\n    })\n\n    const state = computed(() => toolPart.value.state ?? 'unknown')\n    const serverName = computed(() => toolPart.value.input?.serverName)\n\n    /**\n     * A card drawn during a CALL arrives already \"answered\": the turn could\n     * not wait for the connection, so the backend closed the tool with a note\n     * saying the card was drawn (see `isVoiceRenderAck`, same rule as the\n     * forms). That note is not a connection, and without this the card\n     * rendered its inert fallback: the caller was told to connect the account\n     * and given nothing to click (measured 2026-08-07).\n     */\n    const isRenderAck = computed(() => isVoiceRenderAck(toolPart.value.output))\n\n    /** The output this card wrote itself once the connection went through. */\n    const isConnectedByOutput = computed(\n        () =>\n            (toolPart.value.output as { connected?: unknown } | undefined)\n                ?.connected === true,\n    )\n\n    const isAwaitingConnection = computed(\n        () => state.value === 'input-available' || isRenderAck.value,\n    )\n\n    const mcpServerId = ref<string | null>(null)\n    /**\n     * Set once THIS card's sign-in went through, and never from a plain read of\n     * the connection: a card still asking is the turn saying it could not use\n     * that integration, and a token row can outlive its usefulness (a refresh\n     * that failed transiently keeps the row, so the turn sees no usable token\n     * while a status read still sees one). Trusting the read there would have\n     * left the card claiming success, with no button, on a turn still waiting.\n     * It doubles as the guard that resumes the turn exactly once, whichever\n     * channel got there first.\n     */\n    const hasConnected = ref(false)\n    /** A sign-in window we opened is still out there. */\n    const isSigningIn = ref(false)\n    const oauthError = ref<string | null>(null)\n\n    const isDone = computed(\n        () => hasConnected.value || isConnectedByOutput.value,\n    )\n    const canConnect = computed(\n        () => Boolean(serverName.value) && Boolean(props.resolveConnection),\n    )\n\n    /**\n     * Whether the server says this user has connected, asked without minting\n     * anything: no OAuth `state` is burned by looking.\n     */\n    async function isConnectedNow(): Promise<boolean> {\n        if (!serverName.value || !props.checkConnection) {\n            return false\n        }\n        try {\n            const status = await props.checkConnection(serverName.value)\n            mcpServerId.value = status.mcpServerId\n            return status.connected\n        } catch {\n            // Not knowing is not an error to show: the sign-in window is still\n            // out there and the next read may well answer.\n            return false\n        }\n    }\n\n    let pollTimer: ReturnType<typeof setTimeout> | undefined\n    /**\n     * Which sign-in a running tick belongs to. A tick suspended on its read\n     * outlives the attempt that scheduled it: without this it woke up inside\n     * the NEXT attempt, restarted its own chain over that one's timer and then\n     * stopped it on its own older deadline.\n     */\n    let signInAttempt = 0\n    /** The window this attempt opened, the only sender we accept a report from. */\n    let signInWindow: Window | null = null\n\n    function stopWatching() {\n        if (pollTimer !== undefined) {\n            clearTimeout(pollTimer)\n            pollTimer = undefined\n        }\n        signInAttempt += 1\n        signInWindow = null\n        isSigningIn.value = false\n    }\n\n    function settleConnected(connectedServerId: string) {\n        stopWatching()\n        if (hasConnected.value) {\n            return\n        }\n        hasConnected.value = true\n        mcpServerId.value = connectedServerId\n        oauthError.value = null\n        emit('connected', connectedServerId)\n    }\n\n    /**\n     * Watches the connection from THIS window while the sign-in window is away.\n     *\n     * The callback page reports through `window.opener`, and a provider that\n     * sends `Cross-Origin-Opener-Policy` anywhere in its redirect chain takes\n     * that opener away: the connection then succeeds with nobody listening, the\n     * card stays on its button and the suspended turn is never resumed\n     * (reported 2026-08-27). This channel never goes through that window, so it\n     * survives whatever the provider does to it. Chained rather than periodic:\n     * a read slower than the interval would otherwise overlap the next one.\n     */\n    function watchForConnection(popup: Window) {\n        stopWatching()\n        const attempt = signInAttempt\n        signInWindow = popup\n        isSigningIn.value = true\n        const deadline = Date.now() + POLL_TIMEOUT_MS\n        const tick = async () => {\n            if (attempt !== signInAttempt || Date.now() > deadline) {\n                if (attempt === signInAttempt) {\n                    stopWatching()\n                }\n                return\n            }\n            const connected = await isConnectedNow()\n            if (attempt !== signInAttempt) {\n                return\n            }\n            if (connected && mcpServerId.value) {\n                settleConnected(mcpServerId.value)\n                return\n            }\n            pollTimer = setTimeout(tick, POLL_INTERVAL_MS)\n        }\n        pollTimer = setTimeout(tick, POLL_INTERVAL_MS)\n    }\n\n    /**\n     * The callback page's own report, when the browser let it through: faster\n     * than the poll, and the only channel carrying the failure reason.\n     *\n     * Accepted only from the window this card opened, and only while that\n     * sign-in is out: the listener stays up for as long as the card is on\n     * screen, and nothing else with a handle on this page may resume a turn by\n     * posting a message at it.\n     */\n    function onMessage(event: MessageEvent) {\n        if (\n            event.data?.type !== 'mcp-oauth-complete' ||\n            !isSigningIn.value ||\n            event.source !== signInWindow\n        ) {\n            return\n        }\n        const reportedServerId = event.data.mcpServerId as string | undefined\n        if (\n            reportedServerId &&\n            mcpServerId.value &&\n            reportedServerId !== mcpServerId.value\n        ) {\n            return\n        }\n        if (!event.data.success) {\n            // A failure carries no server id: the callback never got that far.\n            stopWatching()\n            oauthError.value = event.data.error ?? 'Unknown error'\n            return\n        }\n        const connectedServerId = reportedServerId ?? mcpServerId.value\n        if (connectedServerId) {\n            settleConnected(connectedServerId)\n        }\n    }\n\n    /**\n     * Opens the provider's sign-in, on an authorize URL minted NOW.\n     *\n     * The URL carries an OAuth `state` that lives ten minutes server-side.\n     * Minted when the card rendered, it was routinely expired by the time\n     * anyone clicked, and the callback then failed on a sign-in the user had\n     * just completed. The window is opened blank first, synchronously, or the\n     * popup blocker kills it while we wait for the URL.\n     */\n    async function openAuthWindow() {\n        if (\n            !serverName.value ||\n            !props.resolveConnection ||\n            isSigningIn.value\n        ) {\n            return\n        }\n        oauthError.value = null\n        const popup = window.open(\n            '',\n            'mcp_oauth',\n            'width=600,height=700,menubar=no,toolbar=no',\n        )\n        if (!popup) {\n            oauthError.value = $t('auth.popupBlocked')\n            return\n        }\n        watchForConnection(popup)\n        try {\n            const connection = await props.resolveConnection(serverName.value)\n            mcpServerId.value = connection.mcpServerId\n            popup.location.href = connection.authorizeUrl\n        } catch (err) {\n            stopWatching()\n            popup.close()\n            oauthError.value =\n                err instanceof Error ? err.message : 'Failed to resolve OAuth'\n        }\n    }\n\n    // For the card's whole life, not just between the click and the answer: a\n    // card that re-renders while the sign-in window is away used to lose the\n    // listener with it, and the completion landed on nobody.\n    onMounted(() => window.addEventListener('message', onMessage))\n    onUnmounted(() => {\n        window.removeEventListener('message', onMessage)\n        stopWatching()\n    })\n</script>\n\n<template>\n    <!-- The same frame and header as the other tool cards: this was the only\n         one drawing itself as a tinted box (DESIGN.md). -->\n    <div\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface text-12\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n            <VvIcon name=\"ri:link-m\" class=\"text-16 shrink-0\" />\n            <strong class=\"truncate\">{{ serverName }}</strong>\n        </div>\n        <div class=\"p-sm\">\n            <!-- Connected: just now, or by this card on an earlier visit -->\n            <template v-if=\"isDone\">\n                <div class=\"flex items-center gap-8\">\n                    <VvIcon name=\"ri:check-line\" class=\"text-16 text-word-3\" />\n                    <strong class=\"font-medium text-word-1\">\n                        {{\n                            $t('messagePart.requestOAuthConnectionSuccess', {\n                                name: serverName,\n                            })\n                        }}\n                    </strong>\n                </div>\n            </template>\n\n            <!-- Signing in: the window is out and we are watching for it -->\n            <template v-else-if=\"isSigningIn\">\n                <div class=\"flex items-center gap-8 text-word-3\">\n                    <VvIcon name=\"loading-loop\" />\n                    <span class=\"text-10\">{{\n                        $t('messagePart.requestOAuthConnection')\n                    }}</span>\n                </div>\n            </template>\n\n            <!-- OAuth error -->\n            <template v-else-if=\"oauthError\">\n                <div class=\"flex flex-col gap-xs\">\n                    <div class=\"flex items-center gap-8 text-word-3\">\n                        <VvIcon name=\"ri:close-line\" class=\"text-danger\" />\n                        <strong class=\"text-10\">\n                            {{ oauthError }}\n                        </strong>\n                    </div>\n                    <VvButton\n                        v-if=\"canConnect\"\n                        modifiers=\"primary-small\"\n                        icon=\"ri:external-link-line\"\n                        :label=\"\n                            $t('messagePart.requestOAuthConnectionButton', {\n                                name: serverName,\n                            })\n                        \"\n                        @click=\"openAuthWindow\" />\n                </div>\n            </template>\n\n            <!-- Waiting on the user: show the connect button -->\n            <template v-else-if=\"isAwaitingConnection && canConnect\">\n                <div class=\"flex items-center gap-6 text-word-3 mb-xs\">\n                    <span>\n                        {{\n                            $t('messagePart.requestOAuthConnectionPrompt', {\n                                name: serverName,\n                            })\n                        }}\n                    </span>\n                </div>\n                <VvButton\n                    modifiers=\"primary-small\"\n                    icon=\"ri:external-link-line\"\n                    :label=\"\n                        $t('messagePart.requestOAuthConnectionButton', {\n                            name: serverName,\n                        })\n                    \"\n                    @click=\"openAuthWindow\" />\n            </template>\n            <!-- Fallback for unknown state -->\n            <template v-else>\n                <div class=\"flex items-center gap-8 text-word-3\">\n                    <VvIcon name=\"ri:link-m\" />\n                    <span class=\"text-10\">\n                        {{\n                            $t('messagePart.requestOAuthConnectionInfo', {\n                                name: serverName,\n                            })\n                        }}\n                    </span>\n                </div>\n            </template>\n        </div>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import { computed, onMounted, onUnmounted, ref } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { isVoiceRenderAck } from 'models'\n\n    const props = defineProps<{\n        part: unknown\n        resolveConnection?: (\n            serverName: string,\n        ) => Promise<{ mcpServerId: string; authorizeUrl: string }>\n        checkConnection?: (\n            serverName: string,\n        ) => Promise<{ mcpServerId: string; connected: boolean }>\n    }>()\n\n    const emit = defineEmits<{\n        connected: [mcpServerId: string]\n    }>()\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    /** How often the connection is re-read while the sign-in window is out. */\n    const POLL_INTERVAL_MS = 2000\n    /**\n     * How long we keep asking. The only end to a sign-in nobody finishes:\n     * `popup.closed` cannot be that signal, because the browser disowns the\n     * handle when the provider severs the opener (that is what\n     * `Cross-Origin-Opener-Policy` does), so it reads as closed from the first\n     * check of the very flow this watch exists for. Long enough for a password\n     * manager and a second factor.\n     */\n    const POLL_TIMEOUT_MS = 5 * 60 * 1000\n\n    const toolPart = computed(() => {\n        return props.part as {\n            state?: string\n            toolCallId?: string\n            input?: { serverName: string }\n            output?: unknown\n        }\n    })\n\n    const state = computed(() => toolPart.value.state ?? 'unknown')\n    const serverName = computed(() => toolPart.value.input?.serverName)\n\n    /**\n     * A card drawn during a CALL arrives already \"answered\": the turn could\n     * not wait for the connection, so the backend closed the tool with a note\n     * saying the card was drawn (see `isVoiceRenderAck`, same rule as the\n     * forms). That note is not a connection, and without this the card\n     * rendered its inert fallback: the caller was told to connect the account\n     * and given nothing to click (measured 2026-08-07).\n     */\n    const isRenderAck = computed(() => isVoiceRenderAck(toolPart.value.output))\n\n    /** The output this card wrote itself once the connection went through. */\n    const isConnectedByOutput = computed(\n        () =>\n            (toolPart.value.output as { connected?: unknown } | undefined)\n                ?.connected === true,\n    )\n\n    const isAwaitingConnection = computed(\n        () => state.value === 'input-available' || isRenderAck.value,\n    )\n\n    const mcpServerId = ref<string | null>(null)\n    /**\n     * Set once THIS card's sign-in went through, and never from a plain read of\n     * the connection: a card still asking is the turn saying it could not use\n     * that integration, and a token row can outlive its usefulness (a refresh\n     * that failed transiently keeps the row, so the turn sees no usable token\n     * while a status read still sees one). Trusting the read there would have\n     * left the card claiming success, with no button, on a turn still waiting.\n     * It doubles as the guard that resumes the turn exactly once, whichever\n     * channel got there first.\n     */\n    const hasConnected = ref(false)\n    /** A sign-in window we opened is still out there. */\n    const isSigningIn = ref(false)\n    const oauthError = ref<string | null>(null)\n\n    const isDone = computed(\n        () => hasConnected.value || isConnectedByOutput.value,\n    )\n    const canConnect = computed(\n        () => Boolean(serverName.value) && Boolean(props.resolveConnection),\n    )\n\n    /**\n     * Whether the server says this user has connected, asked without minting\n     * anything: no OAuth `state` is burned by looking.\n     */\n    async function isConnectedNow(): Promise<boolean> {\n        if (!serverName.value || !props.checkConnection) {\n            return false\n        }\n        try {\n            const status = await props.checkConnection(serverName.value)\n            mcpServerId.value = status.mcpServerId\n            return status.connected\n        } catch {\n            // Not knowing is not an error to show: the sign-in window is still\n            // out there and the next read may well answer.\n            return false\n        }\n    }\n\n    let pollTimer: ReturnType<typeof setTimeout> | undefined\n    /**\n     * Which sign-in a running tick belongs to. A tick suspended on its read\n     * outlives the attempt that scheduled it: without this it woke up inside\n     * the NEXT attempt, restarted its own chain over that one's timer and then\n     * stopped it on its own older deadline.\n     */\n    let signInAttempt = 0\n    /** The window this attempt opened, the only sender we accept a report from. */\n    let signInWindow: Window | null = null\n\n    function stopWatching() {\n        if (pollTimer !== undefined) {\n            clearTimeout(pollTimer)\n            pollTimer = undefined\n        }\n        signInAttempt += 1\n        signInWindow = null\n        isSigningIn.value = false\n    }\n\n    function settleConnected(connectedServerId: string) {\n        stopWatching()\n        if (hasConnected.value) {\n            return\n        }\n        hasConnected.value = true\n        mcpServerId.value = connectedServerId\n        oauthError.value = null\n        emit('connected', connectedServerId)\n    }\n\n    /**\n     * Watches the connection from THIS window while the sign-in window is away.\n     *\n     * The callback page reports through `window.opener`, and a provider that\n     * sends `Cross-Origin-Opener-Policy` anywhere in its redirect chain takes\n     * that opener away: the connection then succeeds with nobody listening, the\n     * card stays on its button and the suspended turn is never resumed\n     * (reported 2026-08-27). This channel never goes through that window, so it\n     * survives whatever the provider does to it. Chained rather than periodic:\n     * a read slower than the interval would otherwise overlap the next one.\n     */\n    function watchForConnection(popup: Window) {\n        stopWatching()\n        const attempt = signInAttempt\n        signInWindow = popup\n        isSigningIn.value = true\n        const deadline = Date.now() + POLL_TIMEOUT_MS\n        const tick = async () => {\n            if (attempt !== signInAttempt || Date.now() > deadline) {\n                if (attempt === signInAttempt) {\n                    stopWatching()\n                }\n                return\n            }\n            const connected = await isConnectedNow()\n            if (attempt !== signInAttempt) {\n                return\n            }\n            if (connected && mcpServerId.value) {\n                settleConnected(mcpServerId.value)\n                return\n            }\n            pollTimer = setTimeout(tick, POLL_INTERVAL_MS)\n        }\n        pollTimer = setTimeout(tick, POLL_INTERVAL_MS)\n    }\n\n    /**\n     * The callback page's own report, when the browser let it through: faster\n     * than the poll, and the only channel carrying the failure reason.\n     *\n     * Accepted only from the window this card opened, and only while that\n     * sign-in is out: the listener stays up for as long as the card is on\n     * screen, and nothing else with a handle on this page may resume a turn by\n     * posting a message at it.\n     */\n    function onMessage(event: MessageEvent) {\n        if (\n            event.data?.type !== 'mcp-oauth-complete' ||\n            !isSigningIn.value ||\n            event.source !== signInWindow\n        ) {\n            return\n        }\n        const reportedServerId = event.data.mcpServerId as string | undefined\n        if (\n            reportedServerId &&\n            mcpServerId.value &&\n            reportedServerId !== mcpServerId.value\n        ) {\n            return\n        }\n        if (!event.data.success) {\n            // A failure carries no server id: the callback never got that far.\n            stopWatching()\n            oauthError.value = event.data.error ?? 'Unknown error'\n            return\n        }\n        const connectedServerId = reportedServerId ?? mcpServerId.value\n        if (connectedServerId) {\n            settleConnected(connectedServerId)\n        }\n    }\n\n    /**\n     * Opens the provider's sign-in, on an authorize URL minted NOW.\n     *\n     * The URL carries an OAuth `state` that lives ten minutes server-side.\n     * Minted when the card rendered, it was routinely expired by the time\n     * anyone clicked, and the callback then failed on a sign-in the user had\n     * just completed. The window is opened blank first, synchronously, or the\n     * popup blocker kills it while we wait for the URL.\n     */\n    async function openAuthWindow() {\n        if (\n            !serverName.value ||\n            !props.resolveConnection ||\n            isSigningIn.value\n        ) {\n            return\n        }\n        oauthError.value = null\n        const popup = window.open(\n            '',\n            'mcp_oauth',\n            'width=600,height=700,menubar=no,toolbar=no',\n        )\n        if (!popup) {\n            oauthError.value = $t('auth.popupBlocked')\n            return\n        }\n        watchForConnection(popup)\n        try {\n            const connection = await props.resolveConnection(serverName.value)\n            mcpServerId.value = connection.mcpServerId\n            popup.location.href = connection.authorizeUrl\n        } catch (err) {\n            stopWatching()\n            popup.close()\n            oauthError.value =\n                err instanceof Error ? err.message : 'Failed to resolve OAuth'\n        }\n    }\n\n    // For the card's whole life, not just between the click and the answer: a\n    // card that re-renders while the sign-in window is away used to lose the\n    // listener with it, and the completion landed on nobody.\n    onMounted(() => window.addEventListener('message', onMessage))\n    onUnmounted(() => {\n        window.removeEventListener('message', onMessage)\n        stopWatching()\n    })\n</script>\n\n<template>\n    <!-- The same frame and header as the other tool cards: this was the only\n         one drawing itself as a tinted box (DESIGN.md). -->\n    <div\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface text-12\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n            <VvIcon name=\"ri:link-m\" class=\"text-16 shrink-0\" />\n            <strong class=\"truncate\">{{ serverName }}</strong>\n        </div>\n        <div class=\"p-sm\">\n            <!-- Connected: just now, or by this card on an earlier visit -->\n            <template v-if=\"isDone\">\n                <div class=\"flex items-center gap-8\">\n                    <VvIcon name=\"ri:check-line\" class=\"text-16 text-word-3\" />\n                    <strong class=\"font-medium text-word-1\">\n                        {{\n                            $t('messagePart.requestOAuthConnectionSuccess', {\n                                name: serverName,\n                            })\n                        }}\n                    </strong>\n                </div>\n            </template>\n\n            <!-- Signing in: the window is out and we are watching for it -->\n            <template v-else-if=\"isSigningIn\">\n                <div class=\"flex items-center gap-8 text-word-3\">\n                    <VvIcon name=\"loading-loop\" />\n                    <span class=\"text-10\">{{\n                        $t('messagePart.requestOAuthConnection')\n                    }}</span>\n                </div>\n            </template>\n\n            <!-- OAuth error -->\n            <template v-else-if=\"oauthError\">\n                <div class=\"flex flex-col gap-xs\">\n                    <div class=\"flex items-center gap-8 text-word-3\">\n                        <VvIcon name=\"ri:close-line\" class=\"text-danger\" />\n                        <strong class=\"text-10\">\n                            {{ oauthError }}\n                        </strong>\n                    </div>\n                    <VvButton\n                        v-if=\"canConnect\"\n                        modifiers=\"primary-small\"\n                        icon=\"ri:external-link-line\"\n                        :label=\"\n                            $t('messagePart.requestOAuthConnectionButton', {\n                                name: serverName,\n                            })\n                        \"\n                        @click=\"openAuthWindow\" />\n                </div>\n            </template>\n\n            <!-- Waiting on the user: show the connect button -->\n            <template v-else-if=\"isAwaitingConnection && canConnect\">\n                <div class=\"flex items-center gap-6 text-word-3 mb-xs\">\n                    <span>\n                        {{\n                            $t('messagePart.requestOAuthConnectionPrompt', {\n                                name: serverName,\n                            })\n                        }}\n                    </span>\n                </div>\n                <VvButton\n                    modifiers=\"primary-small\"\n                    icon=\"ri:external-link-line\"\n                    :label=\"\n                        $t('messagePart.requestOAuthConnectionButton', {\n                            name: serverName,\n                        })\n                    \"\n                    @click=\"openAuthWindow\" />\n            </template>\n            <!-- Fallback for unknown state -->\n            <template v-else>\n                <div class=\"flex items-center gap-8 text-word-3\">\n                    <VvIcon name=\"ri:link-m\" />\n                    <span class=\"text-10\">\n                        {{\n                            $t('messagePart.requestOAuthConnectionInfo', {\n                                name: serverName,\n                            })\n                        }}\n                    </span>\n                </div>\n            </template>\n        </div>\n    </div>\n</template>\n"],"mappings":"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"}

package/dist/_chunks/{PkToolShowDiagram-Hy9qh68O.js → PkToolShowDiagram-BdmG9gm8.js}

@@ -226,7 +226,7 @@ var M = {
 					svg: D.value,
 					title: v.value.input?.title
 				}, null, 8, ["svg", "title"])) : (r(), _("div", L, [y(i, {
-					name: "line-md:loading-loop",
+					name: "loading-loop",
 					class: "w-24 h-24 text-word-5"
 				})])),
 				v.value.input.caption ? (r(), _("div", R, o(v.value.input.caption), 1)) : c("", !0)
@@ -237,4 +237,4 @@ var M = {
 //#endregion
 export { B as default };
 
-//# sourceMappingURL=PkToolShowDiagram-Hy9qh68O.js.map
+//# sourceMappingURL=PkToolShowDiagram-BdmG9gm8.js.map

package/dist/_chunks/{PkToolShowDiagram-Hy9qh68O.js.map → PkToolShowDiagram-BdmG9gm8.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkToolShowDiagram-Hy9qh68O.js","names":[],"sources":["../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/chat/PkToolShowDiagram.vue","../../../../packages/components/src/chat/PkToolShowDiagram.vue","../../../../packages/components/src/chat/PkToolShowDiagram.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { ref, onMounted, computed, watch } from 'vue'\n    import { useLightbox } from './composables/useLightbox'\n    import { useI18n } from 'vue-i18n'\n\n    const props = defineProps<{\n        svg?: string\n        title?: string\n    }>()\n\n    const { t: $t } = useI18n()\n\n    const svgRef = ref<HTMLDivElement | null>(null)\n    const galleryRef = ref<HTMLElement>()\n\n    const scale = ref(1)\n    const translateX = ref(0)\n    const translateY = ref(0)\n    const startX = ref(0)\n    const startY = ref(0)\n\n    // PhotoSwipe integration\n    const svgDataUrl = ref('')\n    const svgWidth = ref(0)\n    const svgHeight = ref(0)\n\n    const { lightbox, init } = useLightbox({\n        gallery: galleryRef,\n        downloadable: true,\n        openInNewTab: false,\n    })\n\n    const svgStyle = computed(() => ({\n        transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,\n    }))\n\n    const zoomIn = () => {\n        scale.value = Math.min(scale.value * 1.2, 10)\n    }\n\n    const zoomOut = () => {\n        scale.value = Math.max(scale.value / 1.2, 0.1)\n    }\n\n    const reset = () => {\n        scale.value = 1\n        translateX.value = 0\n        translateY.value = 0\n    }\n\n    const openLightbox = () => {\n        if (svgDataUrl.value) {\n            lightbox.value?.loadAndOpen(0)\n        }\n    }\n\n    const isDragging = ref(false)\n\n    // Pan logic\n    const onMouseDown = (e: MouseEvent) => {\n        e.preventDefault()\n        isDragging.value = true\n        startX.value = e.clientX - translateX.value\n        startY.value = e.clientY - translateY.value\n    }\n\n    const onMouseMove = (e: MouseEvent) => {\n        if (!isDragging.value) return\n        translateX.value = e.clientX - startX.value\n        translateY.value = e.clientY - startY.value\n    }\n\n    const onMouseUp = () => {\n        isDragging.value = false\n    }\n\n    function serializeSvg(): string | null {\n        const svg = svgRef.value?.querySelector('svg')\n        if (!svg) return null\n        return new XMLSerializer().serializeToString(svg)\n    }\n\n    function updateSvgExport() {\n        const svg = svgRef.value?.querySelector('svg')\n        const serialized = serializeSvg()\n        if (!svg || !serialized) return\n\n        const viewBox = svg.viewBox?.baseVal\n        svgWidth.value =\n            viewBox?.width || svg.getBoundingClientRect().width || 1200\n        svgHeight.value =\n            viewBox?.height || svg.getBoundingClientRect().height || 800\n        svgDataUrl.value = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`\n    }\n\n    watch(\n        () => props.svg,\n        () => {\n            if (props.svg && svgRef.value) {\n                svgRef.value.innerHTML = props.svg\n                updateSvgExport()\n            }\n        },\n    )\n\n    onMounted(async () => {\n        if (props.svg && svgRef.value) {\n            svgRef.value.innerHTML = props.svg\n            updateSvgExport()\n        }\n        await init()\n    })\n</script>\n\n<template>\n    <div\n        class=\"pk-svg-viewer\"\n        :class=\"{\n            'pk-svg-viewer--dragging': isDragging,\n        }\">\n        <!-- Hidden Gallery for Lightbox -->\n        <div ref=\"galleryRef\" class=\"hidden\">\n            <a\n                v-if=\"svgDataUrl\"\n                :href=\"svgDataUrl\"\n                :data-pswp-src=\"svgDataUrl\"\n                :data-pswp-width=\"svgWidth\"\n                :data-pswp-height=\"svgHeight\"\n                :title=\"title\" />\n        </div>\n\n        <!-- SVG Stage -->\n        <div\n            class=\"pk-svg-viewer__stage\"\n            @mousedown=\"onMouseDown\"\n            @mousemove=\"onMouseMove\"\n            @mouseup=\"onMouseUp\"\n            @mouseleave=\"onMouseUp\">\n            <div\n                ref=\"svgRef\"\n                :style=\"svgStyle\"\n                class=\"pk-svg-viewer__content\" />\n        </div>\n\n        <!-- Floating Toolbar -->\n        <div class=\"pk-svg-viewer__toolbar\">\n            <VvButtonGroup\n                modifiers=\"compact\"\n                class=\"bg-surface-1 shadow-md overflow-hidden\">\n                <transition name=\"fade\">\n                    <VvButton\n                        key=\"reset\"\n                        modifiers=\"action-small\"\n                        :disabled=\"\n                            scale === 1 && translateX === 0 && translateY === 0\n                        \"\n                        icon=\"ri:aspect-ratio-line\"\n                        :title=\"$t('action.reset')\"\n                        @click=\"reset\" />\n                </transition>\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-out-line\"\n                    :title=\"$t('action.zoomOut')\"\n                    @click=\"zoomOut\" />\n                <VvButton\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-in-line\"\n                    :title=\"$t('action.zoomIn')\"\n                    @click=\"zoomIn\" />\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:fullscreen-line\"\n                    :title=\"$t('action.expand')\"\n                    @click=\"openLightbox\" />\n            </VvButtonGroup>\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-svg-viewer {\n        position: relative;\n        overflow: hidden;\n        background-color: var(--color-surface-2);\n        width: 100%;\n        height: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        &__content {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: grab;\n            transition: transform 0.3s ease-out;\n            transform-origin: center center;\n\n            svg {\n                max-width: 100%;\n                max-height: 100%;\n                height: auto;\n                width: auto;\n            }\n        }\n\n        &__toolbar {\n            position: absolute;\n            top: var(--spacing-8);\n            right: var(--spacing-8);\n            z-index: var(--z-dropdown);\n            opacity: 0;\n            transition: var(--transition-opacity);\n        }\n\n        &__stage {\n            width: 100%;\n            height: auto;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            user-select: none;\n        }\n\n        &:hover {\n            .pk-svg-viewer__toolbar {\n                opacity: 1;\n            }\n        }\n\n        &--dragging {\n            .pk-svg-viewer__toolbar {\n                opacity: 0.5 !important;\n                pointer-events: none;\n\n                & * {\n                    pointer-events: none;\n                }\n            }\n\n            .pk-svg-viewer__content {\n                cursor: grabbing !important;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { ref, onMounted, computed, watch } from 'vue'\n    import { useLightbox } from './composables/useLightbox'\n    import { useI18n } from 'vue-i18n'\n\n    const props = defineProps<{\n        svg?: string\n        title?: string\n    }>()\n\n    const { t: $t } = useI18n()\n\n    const svgRef = ref<HTMLDivElement | null>(null)\n    const galleryRef = ref<HTMLElement>()\n\n    const scale = ref(1)\n    const translateX = ref(0)\n    const translateY = ref(0)\n    const startX = ref(0)\n    const startY = ref(0)\n\n    // PhotoSwipe integration\n    const svgDataUrl = ref('')\n    const svgWidth = ref(0)\n    const svgHeight = ref(0)\n\n    const { lightbox, init } = useLightbox({\n        gallery: galleryRef,\n        downloadable: true,\n        openInNewTab: false,\n    })\n\n    const svgStyle = computed(() => ({\n        transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,\n    }))\n\n    const zoomIn = () => {\n        scale.value = Math.min(scale.value * 1.2, 10)\n    }\n\n    const zoomOut = () => {\n        scale.value = Math.max(scale.value / 1.2, 0.1)\n    }\n\n    const reset = () => {\n        scale.value = 1\n        translateX.value = 0\n        translateY.value = 0\n    }\n\n    const openLightbox = () => {\n        if (svgDataUrl.value) {\n            lightbox.value?.loadAndOpen(0)\n        }\n    }\n\n    const isDragging = ref(false)\n\n    // Pan logic\n    const onMouseDown = (e: MouseEvent) => {\n        e.preventDefault()\n        isDragging.value = true\n        startX.value = e.clientX - translateX.value\n        startY.value = e.clientY - translateY.value\n    }\n\n    const onMouseMove = (e: MouseEvent) => {\n        if (!isDragging.value) return\n        translateX.value = e.clientX - startX.value\n        translateY.value = e.clientY - startY.value\n    }\n\n    const onMouseUp = () => {\n        isDragging.value = false\n    }\n\n    function serializeSvg(): string | null {\n        const svg = svgRef.value?.querySelector('svg')\n        if (!svg) return null\n        return new XMLSerializer().serializeToString(svg)\n    }\n\n    function updateSvgExport() {\n        const svg = svgRef.value?.querySelector('svg')\n        const serialized = serializeSvg()\n        if (!svg || !serialized) return\n\n        const viewBox = svg.viewBox?.baseVal\n        svgWidth.value =\n            viewBox?.width || svg.getBoundingClientRect().width || 1200\n        svgHeight.value =\n            viewBox?.height || svg.getBoundingClientRect().height || 800\n        svgDataUrl.value = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`\n    }\n\n    watch(\n        () => props.svg,\n        () => {\n            if (props.svg && svgRef.value) {\n                svgRef.value.innerHTML = props.svg\n                updateSvgExport()\n            }\n        },\n    )\n\n    onMounted(async () => {\n        if (props.svg && svgRef.value) {\n            svgRef.value.innerHTML = props.svg\n            updateSvgExport()\n        }\n        await init()\n    })\n</script>\n\n<template>\n    <div\n        class=\"pk-svg-viewer\"\n        :class=\"{\n            'pk-svg-viewer--dragging': isDragging,\n        }\">\n        <!-- Hidden Gallery for Lightbox -->\n        <div ref=\"galleryRef\" class=\"hidden\">\n            <a\n                v-if=\"svgDataUrl\"\n                :href=\"svgDataUrl\"\n                :data-pswp-src=\"svgDataUrl\"\n                :data-pswp-width=\"svgWidth\"\n                :data-pswp-height=\"svgHeight\"\n                :title=\"title\" />\n        </div>\n\n        <!-- SVG Stage -->\n        <div\n            class=\"pk-svg-viewer__stage\"\n            @mousedown=\"onMouseDown\"\n            @mousemove=\"onMouseMove\"\n            @mouseup=\"onMouseUp\"\n            @mouseleave=\"onMouseUp\">\n            <div\n                ref=\"svgRef\"\n                :style=\"svgStyle\"\n                class=\"pk-svg-viewer__content\" />\n        </div>\n\n        <!-- Floating Toolbar -->\n        <div class=\"pk-svg-viewer__toolbar\">\n            <VvButtonGroup\n                modifiers=\"compact\"\n                class=\"bg-surface-1 shadow-md overflow-hidden\">\n                <transition name=\"fade\">\n                    <VvButton\n                        key=\"reset\"\n                        modifiers=\"action-small\"\n                        :disabled=\"\n                            scale === 1 && translateX === 0 && translateY === 0\n                        \"\n                        icon=\"ri:aspect-ratio-line\"\n                        :title=\"$t('action.reset')\"\n                        @click=\"reset\" />\n                </transition>\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-out-line\"\n                    :title=\"$t('action.zoomOut')\"\n                    @click=\"zoomOut\" />\n                <VvButton\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-in-line\"\n                    :title=\"$t('action.zoomIn')\"\n                    @click=\"zoomIn\" />\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:fullscreen-line\"\n                    :title=\"$t('action.expand')\"\n                    @click=\"openLightbox\" />\n            </VvButtonGroup>\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-svg-viewer {\n        position: relative;\n        overflow: hidden;\n        background-color: var(--color-surface-2);\n        width: 100%;\n        height: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        &__content {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: grab;\n            transition: transform 0.3s ease-out;\n            transform-origin: center center;\n\n            svg {\n                max-width: 100%;\n                max-height: 100%;\n                height: auto;\n                width: auto;\n            }\n        }\n\n        &__toolbar {\n            position: absolute;\n            top: var(--spacing-8);\n            right: var(--spacing-8);\n            z-index: var(--z-dropdown);\n            opacity: 0;\n            transition: var(--transition-opacity);\n        }\n\n        &__stage {\n            width: 100%;\n            height: auto;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            user-select: none;\n        }\n\n        &:hover {\n            .pk-svg-viewer__toolbar {\n                opacity: 1;\n            }\n        }\n\n        &--dragging {\n            .pk-svg-viewer__toolbar {\n                opacity: 0.5 !important;\n                pointer-events: none;\n\n                & * {\n                    pointer-events: none;\n                }\n            }\n\n            .pk-svg-viewer__content {\n                cursor: grabbing !important;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { ref, onMounted, computed, watch } from 'vue'\n    import { useLightbox } from './composables/useLightbox'\n    import { useI18n } from 'vue-i18n'\n\n    const props = defineProps<{\n        svg?: string\n        title?: string\n    }>()\n\n    const { t: $t } = useI18n()\n\n    const svgRef = ref<HTMLDivElement | null>(null)\n    const galleryRef = ref<HTMLElement>()\n\n    const scale = ref(1)\n    const translateX = ref(0)\n    const translateY = ref(0)\n    const startX = ref(0)\n    const startY = ref(0)\n\n    // PhotoSwipe integration\n    const svgDataUrl = ref('')\n    const svgWidth = ref(0)\n    const svgHeight = ref(0)\n\n    const { lightbox, init } = useLightbox({\n        gallery: galleryRef,\n        downloadable: true,\n        openInNewTab: false,\n    })\n\n    const svgStyle = computed(() => ({\n        transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,\n    }))\n\n    const zoomIn = () => {\n        scale.value = Math.min(scale.value * 1.2, 10)\n    }\n\n    const zoomOut = () => {\n        scale.value = Math.max(scale.value / 1.2, 0.1)\n    }\n\n    const reset = () => {\n        scale.value = 1\n        translateX.value = 0\n        translateY.value = 0\n    }\n\n    const openLightbox = () => {\n        if (svgDataUrl.value) {\n            lightbox.value?.loadAndOpen(0)\n        }\n    }\n\n    const isDragging = ref(false)\n\n    // Pan logic\n    const onMouseDown = (e: MouseEvent) => {\n        e.preventDefault()\n        isDragging.value = true\n        startX.value = e.clientX - translateX.value\n        startY.value = e.clientY - translateY.value\n    }\n\n    const onMouseMove = (e: MouseEvent) => {\n        if (!isDragging.value) return\n        translateX.value = e.clientX - startX.value\n        translateY.value = e.clientY - startY.value\n    }\n\n    const onMouseUp = () => {\n        isDragging.value = false\n    }\n\n    function serializeSvg(): string | null {\n        const svg = svgRef.value?.querySelector('svg')\n        if (!svg) return null\n        return new XMLSerializer().serializeToString(svg)\n    }\n\n    function updateSvgExport() {\n        const svg = svgRef.value?.querySelector('svg')\n        const serialized = serializeSvg()\n        if (!svg || !serialized) return\n\n        const viewBox = svg.viewBox?.baseVal\n        svgWidth.value =\n            viewBox?.width || svg.getBoundingClientRect().width || 1200\n        svgHeight.value =\n            viewBox?.height || svg.getBoundingClientRect().height || 800\n        svgDataUrl.value = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`\n    }\n\n    watch(\n        () => props.svg,\n        () => {\n            if (props.svg && svgRef.value) {\n                svgRef.value.innerHTML = props.svg\n                updateSvgExport()\n            }\n        },\n    )\n\n    onMounted(async () => {\n        if (props.svg && svgRef.value) {\n            svgRef.value.innerHTML = props.svg\n            updateSvgExport()\n        }\n        await init()\n    })\n</script>\n\n<template>\n    <div\n        class=\"pk-svg-viewer\"\n        :class=\"{\n            'pk-svg-viewer--dragging': isDragging,\n        }\">\n        <!-- Hidden Gallery for Lightbox -->\n        <div ref=\"galleryRef\" class=\"hidden\">\n            <a\n                v-if=\"svgDataUrl\"\n                :href=\"svgDataUrl\"\n                :data-pswp-src=\"svgDataUrl\"\n                :data-pswp-width=\"svgWidth\"\n                :data-pswp-height=\"svgHeight\"\n                :title=\"title\" />\n        </div>\n\n        <!-- SVG Stage -->\n        <div\n            class=\"pk-svg-viewer__stage\"\n            @mousedown=\"onMouseDown\"\n            @mousemove=\"onMouseMove\"\n            @mouseup=\"onMouseUp\"\n            @mouseleave=\"onMouseUp\">\n            <div\n                ref=\"svgRef\"\n                :style=\"svgStyle\"\n                class=\"pk-svg-viewer__content\" />\n        </div>\n\n        <!-- Floating Toolbar -->\n        <div class=\"pk-svg-viewer__toolbar\">\n            <VvButtonGroup\n                modifiers=\"compact\"\n                class=\"bg-surface-1 shadow-md overflow-hidden\">\n                <transition name=\"fade\">\n                    <VvButton\n                        key=\"reset\"\n                        modifiers=\"action-small\"\n                        :disabled=\"\n                            scale === 1 && translateX === 0 && translateY === 0\n                        \"\n                        icon=\"ri:aspect-ratio-line\"\n                        :title=\"$t('action.reset')\"\n                        @click=\"reset\" />\n                </transition>\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-out-line\"\n                    :title=\"$t('action.zoomOut')\"\n                    @click=\"zoomOut\" />\n                <VvButton\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-in-line\"\n                    :title=\"$t('action.zoomIn')\"\n                    @click=\"zoomIn\" />\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:fullscreen-line\"\n                    :title=\"$t('action.expand')\"\n                    @click=\"openLightbox\" />\n            </VvButtonGroup>\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-svg-viewer {\n        position: relative;\n        overflow: hidden;\n        background-color: var(--color-surface-2);\n        width: 100%;\n        height: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        &__content {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: grab;\n            transition: transform 0.3s ease-out;\n            transform-origin: center center;\n\n            svg {\n                max-width: 100%;\n                max-height: 100%;\n                height: auto;\n                width: auto;\n            }\n        }\n\n        &__toolbar {\n            position: absolute;\n            top: var(--spacing-8);\n            right: var(--spacing-8);\n            z-index: var(--z-dropdown);\n            opacity: 0;\n            transition: var(--transition-opacity);\n        }\n\n        &__stage {\n            width: 100%;\n            height: auto;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            user-select: none;\n        }\n\n        &:hover {\n            .pk-svg-viewer__toolbar {\n                opacity: 1;\n            }\n        }\n\n        &--dragging {\n            .pk-svg-viewer__toolbar {\n                opacity: 0.5 !important;\n                pointer-events: none;\n\n                & * {\n                    pointer-events: none;\n                }\n            }\n\n            .pk-svg-viewer__content {\n                cursor: grabbing !important;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { computed, onMounted, ref, watch } from 'vue'\n    import { useClipboard } from '@vueuse/core'\n    import { useI18n } from 'vue-i18n'\n    import { toSnakeCase } from 'utils'\n    import PkSvgViewer from '../PkSvgViewer.vue'\n\n    const props = defineProps<{\n        part: unknown\n        isDark?: boolean\n    }>()\n\n    const { t: $t, te: $te } = useI18n({\n        useScope: 'global',\n    })\n\n    const { copy, copied } = useClipboard()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            input?: {\n                code: string\n                title?: string\n                caption?: string\n            }\n        }\n        return part\n    })\n\n    const svgError = ref(false)\n\n    // Serialized SVG content\n    const svgContent = ref('')\n\n    enum DiagramType {\n        Sequence = 'sequenceDiagram',\n        Class = 'classDiagram',\n        State = 'stateDiagram',\n        ER = 'erDiagram',\n        XYChart = 'xychart',\n        Flowchart = 'flowchart',\n        Graph = 'graph',\n    }\n\n    const diagramType = computed<DiagramType | undefined>(() => {\n        const code = toolPart.value.input?.code?.trimStart()\n        if (!code) {\n            return undefined\n        }\n        const firstWord = code.match(/^[A-Za-z-]+/)?.[0]\n        switch (firstWord) {\n            case 'sequenceDiagram':\n                return DiagramType.Sequence\n            case 'classDiagram':\n                return DiagramType.Class\n            case 'stateDiagram':\n                return DiagramType.State\n            case 'erDiagram':\n                return DiagramType.ER\n            case 'xychart-beta':\n                return DiagramType.XYChart\n            case 'flowchart':\n                return DiagramType.Flowchart\n            case 'graph':\n                return DiagramType.Graph\n            default:\n                return undefined\n        }\n    })\n\n    const diagramTypeLabel = computed(() => {\n        if (!diagramType.value) {\n            return ''\n        }\n        return $te(`diagram.${diagramType.value}`)\n            ? $t(`diagram.${diagramType.value}`)\n            : diagramType.value\n    })\n\n    const diagramTypeIcon = computed(() => {\n        switch (diagramType.value) {\n            case DiagramType.Sequence:\n                return 'ri:timeline-view'\n            case DiagramType.Class:\n                return 'ri:organization-chart'\n            case DiagramType.State:\n                return 'ri:organization-chart'\n            case DiagramType.ER:\n                return 'ri:organization-chart'\n            case DiagramType.XYChart:\n                return 'ri:line-chart-line'\n            case DiagramType.Flowchart:\n                return 'ri:flow-chart'\n            case DiagramType.Graph:\n                return 'ri:flow-chart'\n            default:\n                return 'ri:flow-chart'\n        }\n    })\n\n    async function renderDiagram() {\n        const code = toolPart.value.input?.code\n        if (!code) return\n\n        svgError.value = false\n        try {\n            const { renderMermaidSVG, THEMES } =\n                await import('beautiful-mermaid')\n            const theme = props.isDark\n                ? THEMES['github-dark']\n                : THEMES['github-light']\n            svgContent.value = renderMermaidSVG(code, theme)\n        } catch {\n            svgError.value = true\n        }\n    }\n\n    watch([() => toolPart.value.input?.code, () => props.isDark], renderDiagram)\n    onMounted(async () => {\n        await renderDiagram()\n    })\n\n    const downloadSvg = () => {\n        if (!svgContent.value) {\n            return\n        }\n        const blob = new Blob([svgContent.value], {\n            type: 'image/svg+xml;charset=utf-8',\n        })\n        const url = URL.createObjectURL(blob)\n        const anchor = document.createElement('a')\n        anchor.href = url\n        anchor.download = `${toSnakeCase(toolPart.value.input?.title || 'diagram')}.svg`\n        document.body.appendChild(anchor)\n        anchor.click()\n        document.body.removeChild(anchor)\n        URL.revokeObjectURL(url)\n    }\n\n    const copyCode = () => {\n        const code = toolPart.value.input?.code\n        if (code) {\n            copy(code)\n        }\n    }\n</script>\n\n<template>\n    <div\n        v-if=\"toolPart?.input?.code\"\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n            <VvIcon :name=\"diagramTypeIcon\" class=\"text-16\" />\n            <div class=\"flex flex-col items-start gap-2\">\n                <strong class=\"font-bold\">{{\n                    diagramTypeLabel ?? $t('label.diagram')\n                }}</strong>\n            </div>\n            <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n                <VvButton\n                    modifiers=\"action-quiet-small\"\n                    :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n                    :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n                    @click=\"copyCode\" />\n                <VvButton\n                    v-if=\"svgContent\"\n                    modifiers=\"action-quiet-small\"\n                    icon=\"ri:download-line\"\n                    :label=\"$t('action.download')\"\n                    @click=\"downloadSvg\" />\n            </VvButtonGroup>\n        </div>\n        <div v-if=\"svgError\" class=\"text-12 text-danger py-8 px-sm\">\n            {{ $t('message.diagramRenderError') }}\n        </div>\n        <PkSvgViewer\n            v-else-if=\"svgContent\"\n            class=\"pk-tool-show-diagram__stage\"\n            :svg=\"svgContent\"\n            :title=\"toolPart.input?.title\" />\n        <div\n            v-else\n            class=\"pk-tool-show-diagram__stage flex justify-center items-center\">\n            <VvIcon name=\"line-md:loading-loop\" class=\"w-24 h-24 text-word-5\" />\n        </div>\n        <div\n            v-if=\"toolPart.input.caption\"\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-t border-surface-3 text-word-3\">\n            {{ toolPart.input.caption }}\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-tool-show-diagram {\n        // Fixed stage height: the diagram renders lazily (async chunk +\n        // dynamic mermaid import), so the loader and the rendered SVG must\n        // occupy the same space or the chat scroll position jumps around.\n        // The SVG scales to fit; zoom/pan and the lightbox cover the rest.\n        &__stage {\n            height: 384px;\n\n            .pk-svg-viewer__stage,\n            .pk-svg-viewer__content {\n                height: 100%;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { computed, onMounted, ref, watch } from 'vue'\n    import { useClipboard } from '@vueuse/core'\n    import { useI18n } from 'vue-i18n'\n    import { toSnakeCase } from 'utils'\n    import PkSvgViewer from '../PkSvgViewer.vue'\n\n    const props = defineProps<{\n        part: unknown\n        isDark?: boolean\n    }>()\n\n    const { t: $t, te: $te } = useI18n({\n        useScope: 'global',\n    })\n\n    const { copy, copied } = useClipboard()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            input?: {\n                code: string\n                title?: string\n                caption?: string\n            }\n        }\n        return part\n    })\n\n    const svgError = ref(false)\n\n    // Serialized SVG content\n    const svgContent = ref('')\n\n    enum DiagramType {\n        Sequence = 'sequenceDiagram',\n        Class = 'classDiagram',\n        State = 'stateDiagram',\n        ER = 'erDiagram',\n        XYChart = 'xychart',\n        Flowchart = 'flowchart',\n        Graph = 'graph',\n    }\n\n    const diagramType = computed<DiagramType | undefined>(() => {\n        const code = toolPart.value.input?.code?.trimStart()\n        if (!code) {\n            return undefined\n        }\n        const firstWord = code.match(/^[A-Za-z-]+/)?.[0]\n        switch (firstWord) {\n            case 'sequenceDiagram':\n                return DiagramType.Sequence\n            case 'classDiagram':\n                return DiagramType.Class\n            case 'stateDiagram':\n                return DiagramType.State\n            case 'erDiagram':\n                return DiagramType.ER\n            case 'xychart-beta':\n                return DiagramType.XYChart\n            case 'flowchart':\n                return DiagramType.Flowchart\n            case 'graph':\n                return DiagramType.Graph\n            default:\n                return undefined\n        }\n    })\n\n    const diagramTypeLabel = computed(() => {\n        if (!diagramType.value) {\n            return ''\n        }\n        return $te(`diagram.${diagramType.value}`)\n            ? $t(`diagram.${diagramType.value}`)\n            : diagramType.value\n    })\n\n    const diagramTypeIcon = computed(() => {\n        switch (diagramType.value) {\n            case DiagramType.Sequence:\n                return 'ri:timeline-view'\n            case DiagramType.Class:\n                return 'ri:organization-chart'\n            case DiagramType.State:\n                return 'ri:organization-chart'\n            case DiagramType.ER:\n                return 'ri:organization-chart'\n            case DiagramType.XYChart:\n                return 'ri:line-chart-line'\n            case DiagramType.Flowchart:\n                return 'ri:flow-chart'\n            case DiagramType.Graph:\n                return 'ri:flow-chart'\n            default:\n                return 'ri:flow-chart'\n        }\n    })\n\n    async function renderDiagram() {\n        const code = toolPart.value.input?.code\n        if (!code) return\n\n        svgError.value = false\n        try {\n            const { renderMermaidSVG, THEMES } =\n                await import('beautiful-mermaid')\n            const theme = props.isDark\n                ? THEMES['github-dark']\n                : THEMES['github-light']\n            svgContent.value = renderMermaidSVG(code, theme)\n        } catch {\n            svgError.value = true\n        }\n    }\n\n    watch([() => toolPart.value.input?.code, () => props.isDark], renderDiagram)\n    onMounted(async () => {\n        await renderDiagram()\n    })\n\n    const downloadSvg = () => {\n        if (!svgContent.value) {\n            return\n        }\n        const blob = new Blob([svgContent.value], {\n            type: 'image/svg+xml;charset=utf-8',\n        })\n        const url = URL.createObjectURL(blob)\n        const anchor = document.createElement('a')\n        anchor.href = url\n        anchor.download = `${toSnakeCase(toolPart.value.input?.title || 'diagram')}.svg`\n        document.body.appendChild(anchor)\n        anchor.click()\n        document.body.removeChild(anchor)\n        URL.revokeObjectURL(url)\n    }\n\n    const copyCode = () => {\n        const code = toolPart.value.input?.code\n        if (code) {\n            copy(code)\n        }\n    }\n</script>\n\n<template>\n    <div\n        v-if=\"toolPart?.input?.code\"\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n            <VvIcon :name=\"diagramTypeIcon\" class=\"text-16\" />\n            <div class=\"flex flex-col items-start gap-2\">\n                <strong class=\"font-bold\">{{\n                    diagramTypeLabel ?? $t('label.diagram')\n                }}</strong>\n            </div>\n            <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n                <VvButton\n                    modifiers=\"action-quiet-small\"\n                    :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n                    :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n                    @click=\"copyCode\" />\n                <VvButton\n                    v-if=\"svgContent\"\n                    modifiers=\"action-quiet-small\"\n                    icon=\"ri:download-line\"\n                    :label=\"$t('action.download')\"\n                    @click=\"downloadSvg\" />\n            </VvButtonGroup>\n        </div>\n        <div v-if=\"svgError\" class=\"text-12 text-danger py-8 px-sm\">\n            {{ $t('message.diagramRenderError') }}\n        </div>\n        <PkSvgViewer\n            v-else-if=\"svgContent\"\n            class=\"pk-tool-show-diagram__stage\"\n            :svg=\"svgContent\"\n            :title=\"toolPart.input?.title\" />\n        <div\n            v-else\n            class=\"pk-tool-show-diagram__stage flex justify-center items-center\">\n            <VvIcon name=\"line-md:loading-loop\" class=\"w-24 h-24 text-word-5\" />\n        </div>\n        <div\n            v-if=\"toolPart.input.caption\"\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-t border-surface-3 text-word-3\">\n            {{ toolPart.input.caption }}\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-tool-show-diagram {\n        // Fixed stage height: the diagram renders lazily (async chunk +\n        // dynamic mermaid import), so the loader and the rendered SVG must\n        // occupy the same space or the chat scroll position jumps around.\n        // The SVG scales to fit; zoom/pan and the lightbox cover the rest.\n        &__stage {\n            height: 384px;\n\n            .pk-svg-viewer__stage,\n            .pk-svg-viewer__content {\n                height: 100%;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { computed, onMounted, ref, watch } from 'vue'\n    import { useClipboard } from '@vueuse/core'\n    import { useI18n } from 'vue-i18n'\n    import { toSnakeCase } from 'utils'\n    import PkSvgViewer from '../PkSvgViewer.vue'\n\n    const props = defineProps<{\n        part: unknown\n        isDark?: boolean\n    }>()\n\n    const { t: $t, te: $te } = useI18n({\n        useScope: 'global',\n    })\n\n    const { copy, copied } = useClipboard()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            input?: {\n                code: string\n                title?: string\n                caption?: string\n            }\n        }\n        return part\n    })\n\n    const svgError = ref(false)\n\n    // Serialized SVG content\n    const svgContent = ref('')\n\n    enum DiagramType {\n        Sequence = 'sequenceDiagram',\n        Class = 'classDiagram',\n        State = 'stateDiagram',\n        ER = 'erDiagram',\n        XYChart = 'xychart',\n        Flowchart = 'flowchart',\n        Graph = 'graph',\n    }\n\n    const diagramType = computed<DiagramType | undefined>(() => {\n        const code = toolPart.value.input?.code?.trimStart()\n        if (!code) {\n            return undefined\n        }\n        const firstWord = code.match(/^[A-Za-z-]+/)?.[0]\n        switch (firstWord) {\n            case 'sequenceDiagram':\n                return DiagramType.Sequence\n            case 'classDiagram':\n                return DiagramType.Class\n            case 'stateDiagram':\n                return DiagramType.State\n            case 'erDiagram':\n                return DiagramType.ER\n            case 'xychart-beta':\n                return DiagramType.XYChart\n            case 'flowchart':\n                return DiagramType.Flowchart\n            case 'graph':\n                return DiagramType.Graph\n            default:\n                return undefined\n        }\n    })\n\n    const diagramTypeLabel = computed(() => {\n        if (!diagramType.value) {\n            return ''\n        }\n        return $te(`diagram.${diagramType.value}`)\n            ? $t(`diagram.${diagramType.value}`)\n            : diagramType.value\n    })\n\n    const diagramTypeIcon = computed(() => {\n        switch (diagramType.value) {\n            case DiagramType.Sequence:\n                return 'ri:timeline-view'\n            case DiagramType.Class:\n                return 'ri:organization-chart'\n            case DiagramType.State:\n                return 'ri:organization-chart'\n            case DiagramType.ER:\n                return 'ri:organization-chart'\n            case DiagramType.XYChart:\n                return 'ri:line-chart-line'\n            case DiagramType.Flowchart:\n                return 'ri:flow-chart'\n            case DiagramType.Graph:\n                return 'ri:flow-chart'\n            default:\n                return 'ri:flow-chart'\n        }\n    })\n\n    async function renderDiagram() {\n        const code = toolPart.value.input?.code\n        if (!code) return\n\n        svgError.value = false\n        try {\n            const { renderMermaidSVG, THEMES } =\n                await import('beautiful-mermaid')\n            const theme = props.isDark\n                ? THEMES['github-dark']\n                : THEMES['github-light']\n            svgContent.value = renderMermaidSVG(code, theme)\n        } catch {\n            svgError.value = true\n        }\n    }\n\n    watch([() => toolPart.value.input?.code, () => props.isDark], renderDiagram)\n    onMounted(async () => {\n        await renderDiagram()\n    })\n\n    const downloadSvg = () => {\n        if (!svgContent.value) {\n            return\n        }\n        const blob = new Blob([svgContent.value], {\n            type: 'image/svg+xml;charset=utf-8',\n        })\n        const url = URL.createObjectURL(blob)\n        const anchor = document.createElement('a')\n        anchor.href = url\n        anchor.download = `${toSnakeCase(toolPart.value.input?.title || 'diagram')}.svg`\n        document.body.appendChild(anchor)\n        anchor.click()\n        document.body.removeChild(anchor)\n        URL.revokeObjectURL(url)\n    }\n\n    const copyCode = () => {\n        const code = toolPart.value.input?.code\n        if (code) {\n            copy(code)\n        }\n    }\n</script>\n\n<template>\n    <div\n        v-if=\"toolPart?.input?.code\"\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n            <VvIcon :name=\"diagramTypeIcon\" class=\"text-16\" />\n            <div class=\"flex flex-col items-start gap-2\">\n                <strong class=\"font-bold\">{{\n                    diagramTypeLabel ?? $t('label.diagram')\n                }}</strong>\n            </div>\n            <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n                <VvButton\n                    modifiers=\"action-quiet-small\"\n                    :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n                    :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n                    @click=\"copyCode\" />\n                <VvButton\n                    v-if=\"svgContent\"\n                    modifiers=\"action-quiet-small\"\n                    icon=\"ri:download-line\"\n                    :label=\"$t('action.download')\"\n                    @click=\"downloadSvg\" />\n            </VvButtonGroup>\n        </div>\n        <div v-if=\"svgError\" class=\"text-12 text-danger py-8 px-sm\">\n            {{ $t('message.diagramRenderError') }}\n        </div>\n        <PkSvgViewer\n            v-else-if=\"svgContent\"\n            class=\"pk-tool-show-diagram__stage\"\n            :svg=\"svgContent\"\n            :title=\"toolPart.input?.title\" />\n        <div\n            v-else\n            class=\"pk-tool-show-diagram__stage flex justify-center items-center\">\n            <VvIcon name=\"line-md:loading-loop\" class=\"w-24 h-24 text-word-5\" />\n        </div>\n        <div\n            v-if=\"toolPart.input.caption\"\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-t border-surface-3 text-word-3\">\n            {{ toolPart.input.caption }}\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-tool-show-diagram {\n        // Fixed stage height: the diagram renders lazily (async chunk +\n        // dynamic mermaid import), so the loader and the rendered SVG must\n        // occupy the same space or the chat scroll position jumps around.\n        // The SVG scales to fit; zoom/pan and the lightbox cover the rest.\n        &__stage {\n            height: 384px;\n\n            .pk-svg-viewer__stage,\n            .pk-svg-viewer__content {\n                height: 100%;\n            }\n        }\n    }\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"PkToolShowDiagram-BdmG9gm8.js","names":[],"sources":["../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/chat/PkToolShowDiagram.vue","../../../../packages/components/src/chat/PkToolShowDiagram.vue","../../../../packages/components/src/chat/PkToolShowDiagram.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { ref, onMounted, computed, watch } from 'vue'\n    import { useLightbox } from './composables/useLightbox'\n    import { useI18n } from 'vue-i18n'\n\n    const props = defineProps<{\n        svg?: string\n        title?: string\n    }>()\n\n    const { t: $t } = useI18n()\n\n    const svgRef = ref<HTMLDivElement | null>(null)\n    const galleryRef = ref<HTMLElement>()\n\n    const scale = ref(1)\n    const translateX = ref(0)\n    const translateY = ref(0)\n    const startX = ref(0)\n    const startY = ref(0)\n\n    // PhotoSwipe integration\n    const svgDataUrl = ref('')\n    const svgWidth = ref(0)\n    const svgHeight = ref(0)\n\n    const { lightbox, init } = useLightbox({\n        gallery: galleryRef,\n        downloadable: true,\n        openInNewTab: false,\n    })\n\n    const svgStyle = computed(() => ({\n        transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,\n    }))\n\n    const zoomIn = () => {\n        scale.value = Math.min(scale.value * 1.2, 10)\n    }\n\n    const zoomOut = () => {\n        scale.value = Math.max(scale.value / 1.2, 0.1)\n    }\n\n    const reset = () => {\n        scale.value = 1\n        translateX.value = 0\n        translateY.value = 0\n    }\n\n    const openLightbox = () => {\n        if (svgDataUrl.value) {\n            lightbox.value?.loadAndOpen(0)\n        }\n    }\n\n    const isDragging = ref(false)\n\n    // Pan logic\n    const onMouseDown = (e: MouseEvent) => {\n        e.preventDefault()\n        isDragging.value = true\n        startX.value = e.clientX - translateX.value\n        startY.value = e.clientY - translateY.value\n    }\n\n    const onMouseMove = (e: MouseEvent) => {\n        if (!isDragging.value) return\n        translateX.value = e.clientX - startX.value\n        translateY.value = e.clientY - startY.value\n    }\n\n    const onMouseUp = () => {\n        isDragging.value = false\n    }\n\n    function serializeSvg(): string | null {\n        const svg = svgRef.value?.querySelector('svg')\n        if (!svg) return null\n        return new XMLSerializer().serializeToString(svg)\n    }\n\n    function updateSvgExport() {\n        const svg = svgRef.value?.querySelector('svg')\n        const serialized = serializeSvg()\n        if (!svg || !serialized) return\n\n        const viewBox = svg.viewBox?.baseVal\n        svgWidth.value =\n            viewBox?.width || svg.getBoundingClientRect().width || 1200\n        svgHeight.value =\n            viewBox?.height || svg.getBoundingClientRect().height || 800\n        svgDataUrl.value = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`\n    }\n\n    watch(\n        () => props.svg,\n        () => {\n            if (props.svg && svgRef.value) {\n                svgRef.value.innerHTML = props.svg\n                updateSvgExport()\n            }\n        },\n    )\n\n    onMounted(async () => {\n        if (props.svg && svgRef.value) {\n            svgRef.value.innerHTML = props.svg\n            updateSvgExport()\n        }\n        await init()\n    })\n</script>\n\n<template>\n    <div\n        class=\"pk-svg-viewer\"\n        :class=\"{\n            'pk-svg-viewer--dragging': isDragging,\n        }\">\n        <!-- Hidden Gallery for Lightbox -->\n        <div ref=\"galleryRef\" class=\"hidden\">\n            <a\n                v-if=\"svgDataUrl\"\n                :href=\"svgDataUrl\"\n                :data-pswp-src=\"svgDataUrl\"\n                :data-pswp-width=\"svgWidth\"\n                :data-pswp-height=\"svgHeight\"\n                :title=\"title\" />\n        </div>\n\n        <!-- SVG Stage -->\n        <div\n            class=\"pk-svg-viewer__stage\"\n            @mousedown=\"onMouseDown\"\n            @mousemove=\"onMouseMove\"\n            @mouseup=\"onMouseUp\"\n            @mouseleave=\"onMouseUp\">\n            <div\n                ref=\"svgRef\"\n                :style=\"svgStyle\"\n                class=\"pk-svg-viewer__content\" />\n        </div>\n\n        <!-- Floating Toolbar -->\n        <div class=\"pk-svg-viewer__toolbar\">\n            <VvButtonGroup\n                modifiers=\"compact\"\n                class=\"bg-surface-1 shadow-md overflow-hidden\">\n                <transition name=\"fade\">\n                    <VvButton\n                        key=\"reset\"\n                        modifiers=\"action-small\"\n                        :disabled=\"\n                            scale === 1 && translateX === 0 && translateY === 0\n                        \"\n                        icon=\"ri:aspect-ratio-line\"\n                        :title=\"$t('action.reset')\"\n                        @click=\"reset\" />\n                </transition>\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-out-line\"\n                    :title=\"$t('action.zoomOut')\"\n                    @click=\"zoomOut\" />\n                <VvButton\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-in-line\"\n                    :title=\"$t('action.zoomIn')\"\n                    @click=\"zoomIn\" />\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:fullscreen-line\"\n                    :title=\"$t('action.expand')\"\n                    @click=\"openLightbox\" />\n            </VvButtonGroup>\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-svg-viewer {\n        position: relative;\n        overflow: hidden;\n        background-color: var(--color-surface-2);\n        width: 100%;\n        height: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        &__content {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: grab;\n            transition: transform 0.3s ease-out;\n            transform-origin: center center;\n\n            svg {\n                max-width: 100%;\n                max-height: 100%;\n                height: auto;\n                width: auto;\n            }\n        }\n\n        &__toolbar {\n            position: absolute;\n            top: var(--spacing-8);\n            right: var(--spacing-8);\n            z-index: var(--z-dropdown);\n            opacity: 0;\n            transition: var(--transition-opacity);\n        }\n\n        &__stage {\n            width: 100%;\n            height: auto;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            user-select: none;\n        }\n\n        &:hover {\n            .pk-svg-viewer__toolbar {\n                opacity: 1;\n            }\n        }\n\n        &--dragging {\n            .pk-svg-viewer__toolbar {\n                opacity: 0.5 !important;\n                pointer-events: none;\n\n                & * {\n                    pointer-events: none;\n                }\n            }\n\n            .pk-svg-viewer__content {\n                cursor: grabbing !important;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { ref, onMounted, computed, watch } from 'vue'\n    import { useLightbox } from './composables/useLightbox'\n    import { useI18n } from 'vue-i18n'\n\n    const props = defineProps<{\n        svg?: string\n        title?: string\n    }>()\n\n    const { t: $t } = useI18n()\n\n    const svgRef = ref<HTMLDivElement | null>(null)\n    const galleryRef = ref<HTMLElement>()\n\n    const scale = ref(1)\n    const translateX = ref(0)\n    const translateY = ref(0)\n    const startX = ref(0)\n    const startY = ref(0)\n\n    // PhotoSwipe integration\n    const svgDataUrl = ref('')\n    const svgWidth = ref(0)\n    const svgHeight = ref(0)\n\n    const { lightbox, init } = useLightbox({\n        gallery: galleryRef,\n        downloadable: true,\n        openInNewTab: false,\n    })\n\n    const svgStyle = computed(() => ({\n        transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,\n    }))\n\n    const zoomIn = () => {\n        scale.value = Math.min(scale.value * 1.2, 10)\n    }\n\n    const zoomOut = () => {\n        scale.value = Math.max(scale.value / 1.2, 0.1)\n    }\n\n    const reset = () => {\n        scale.value = 1\n        translateX.value = 0\n        translateY.value = 0\n    }\n\n    const openLightbox = () => {\n        if (svgDataUrl.value) {\n            lightbox.value?.loadAndOpen(0)\n        }\n    }\n\n    const isDragging = ref(false)\n\n    // Pan logic\n    const onMouseDown = (e: MouseEvent) => {\n        e.preventDefault()\n        isDragging.value = true\n        startX.value = e.clientX - translateX.value\n        startY.value = e.clientY - translateY.value\n    }\n\n    const onMouseMove = (e: MouseEvent) => {\n        if (!isDragging.value) return\n        translateX.value = e.clientX - startX.value\n        translateY.value = e.clientY - startY.value\n    }\n\n    const onMouseUp = () => {\n        isDragging.value = false\n    }\n\n    function serializeSvg(): string | null {\n        const svg = svgRef.value?.querySelector('svg')\n        if (!svg) return null\n        return new XMLSerializer().serializeToString(svg)\n    }\n\n    function updateSvgExport() {\n        const svg = svgRef.value?.querySelector('svg')\n        const serialized = serializeSvg()\n        if (!svg || !serialized) return\n\n        const viewBox = svg.viewBox?.baseVal\n        svgWidth.value =\n            viewBox?.width || svg.getBoundingClientRect().width || 1200\n        svgHeight.value =\n            viewBox?.height || svg.getBoundingClientRect().height || 800\n        svgDataUrl.value = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`\n    }\n\n    watch(\n        () => props.svg,\n        () => {\n            if (props.svg && svgRef.value) {\n                svgRef.value.innerHTML = props.svg\n                updateSvgExport()\n            }\n        },\n    )\n\n    onMounted(async () => {\n        if (props.svg && svgRef.value) {\n            svgRef.value.innerHTML = props.svg\n            updateSvgExport()\n        }\n        await init()\n    })\n</script>\n\n<template>\n    <div\n        class=\"pk-svg-viewer\"\n        :class=\"{\n            'pk-svg-viewer--dragging': isDragging,\n        }\">\n        <!-- Hidden Gallery for Lightbox -->\n        <div ref=\"galleryRef\" class=\"hidden\">\n            <a\n                v-if=\"svgDataUrl\"\n                :href=\"svgDataUrl\"\n                :data-pswp-src=\"svgDataUrl\"\n                :data-pswp-width=\"svgWidth\"\n                :data-pswp-height=\"svgHeight\"\n                :title=\"title\" />\n        </div>\n\n        <!-- SVG Stage -->\n        <div\n            class=\"pk-svg-viewer__stage\"\n            @mousedown=\"onMouseDown\"\n            @mousemove=\"onMouseMove\"\n            @mouseup=\"onMouseUp\"\n            @mouseleave=\"onMouseUp\">\n            <div\n                ref=\"svgRef\"\n                :style=\"svgStyle\"\n                class=\"pk-svg-viewer__content\" />\n        </div>\n\n        <!-- Floating Toolbar -->\n        <div class=\"pk-svg-viewer__toolbar\">\n            <VvButtonGroup\n                modifiers=\"compact\"\n                class=\"bg-surface-1 shadow-md overflow-hidden\">\n                <transition name=\"fade\">\n                    <VvButton\n                        key=\"reset\"\n                        modifiers=\"action-small\"\n                        :disabled=\"\n                            scale === 1 && translateX === 0 && translateY === 0\n                        \"\n                        icon=\"ri:aspect-ratio-line\"\n                        :title=\"$t('action.reset')\"\n                        @click=\"reset\" />\n                </transition>\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-out-line\"\n                    :title=\"$t('action.zoomOut')\"\n                    @click=\"zoomOut\" />\n                <VvButton\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-in-line\"\n                    :title=\"$t('action.zoomIn')\"\n                    @click=\"zoomIn\" />\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:fullscreen-line\"\n                    :title=\"$t('action.expand')\"\n                    @click=\"openLightbox\" />\n            </VvButtonGroup>\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-svg-viewer {\n        position: relative;\n        overflow: hidden;\n        background-color: var(--color-surface-2);\n        width: 100%;\n        height: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        &__content {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: grab;\n            transition: transform 0.3s ease-out;\n            transform-origin: center center;\n\n            svg {\n                max-width: 100%;\n                max-height: 100%;\n                height: auto;\n                width: auto;\n            }\n        }\n\n        &__toolbar {\n            position: absolute;\n            top: var(--spacing-8);\n            right: var(--spacing-8);\n            z-index: var(--z-dropdown);\n            opacity: 0;\n            transition: var(--transition-opacity);\n        }\n\n        &__stage {\n            width: 100%;\n            height: auto;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            user-select: none;\n        }\n\n        &:hover {\n            .pk-svg-viewer__toolbar {\n                opacity: 1;\n            }\n        }\n\n        &--dragging {\n            .pk-svg-viewer__toolbar {\n                opacity: 0.5 !important;\n                pointer-events: none;\n\n                & * {\n                    pointer-events: none;\n                }\n            }\n\n            .pk-svg-viewer__content {\n                cursor: grabbing !important;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { ref, onMounted, computed, watch } from 'vue'\n    import { useLightbox } from './composables/useLightbox'\n    import { useI18n } from 'vue-i18n'\n\n    const props = defineProps<{\n        svg?: string\n        title?: string\n    }>()\n\n    const { t: $t } = useI18n()\n\n    const svgRef = ref<HTMLDivElement | null>(null)\n    const galleryRef = ref<HTMLElement>()\n\n    const scale = ref(1)\n    const translateX = ref(0)\n    const translateY = ref(0)\n    const startX = ref(0)\n    const startY = ref(0)\n\n    // PhotoSwipe integration\n    const svgDataUrl = ref('')\n    const svgWidth = ref(0)\n    const svgHeight = ref(0)\n\n    const { lightbox, init } = useLightbox({\n        gallery: galleryRef,\n        downloadable: true,\n        openInNewTab: false,\n    })\n\n    const svgStyle = computed(() => ({\n        transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,\n    }))\n\n    const zoomIn = () => {\n        scale.value = Math.min(scale.value * 1.2, 10)\n    }\n\n    const zoomOut = () => {\n        scale.value = Math.max(scale.value / 1.2, 0.1)\n    }\n\n    const reset = () => {\n        scale.value = 1\n        translateX.value = 0\n        translateY.value = 0\n    }\n\n    const openLightbox = () => {\n        if (svgDataUrl.value) {\n            lightbox.value?.loadAndOpen(0)\n        }\n    }\n\n    const isDragging = ref(false)\n\n    // Pan logic\n    const onMouseDown = (e: MouseEvent) => {\n        e.preventDefault()\n        isDragging.value = true\n        startX.value = e.clientX - translateX.value\n        startY.value = e.clientY - translateY.value\n    }\n\n    const onMouseMove = (e: MouseEvent) => {\n        if (!isDragging.value) return\n        translateX.value = e.clientX - startX.value\n        translateY.value = e.clientY - startY.value\n    }\n\n    const onMouseUp = () => {\n        isDragging.value = false\n    }\n\n    function serializeSvg(): string | null {\n        const svg = svgRef.value?.querySelector('svg')\n        if (!svg) return null\n        return new XMLSerializer().serializeToString(svg)\n    }\n\n    function updateSvgExport() {\n        const svg = svgRef.value?.querySelector('svg')\n        const serialized = serializeSvg()\n        if (!svg || !serialized) return\n\n        const viewBox = svg.viewBox?.baseVal\n        svgWidth.value =\n            viewBox?.width || svg.getBoundingClientRect().width || 1200\n        svgHeight.value =\n            viewBox?.height || svg.getBoundingClientRect().height || 800\n        svgDataUrl.value = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`\n    }\n\n    watch(\n        () => props.svg,\n        () => {\n            if (props.svg && svgRef.value) {\n                svgRef.value.innerHTML = props.svg\n                updateSvgExport()\n            }\n        },\n    )\n\n    onMounted(async () => {\n        if (props.svg && svgRef.value) {\n            svgRef.value.innerHTML = props.svg\n            updateSvgExport()\n        }\n        await init()\n    })\n</script>\n\n<template>\n    <div\n        class=\"pk-svg-viewer\"\n        :class=\"{\n            'pk-svg-viewer--dragging': isDragging,\n        }\">\n        <!-- Hidden Gallery for Lightbox -->\n        <div ref=\"galleryRef\" class=\"hidden\">\n            <a\n                v-if=\"svgDataUrl\"\n                :href=\"svgDataUrl\"\n                :data-pswp-src=\"svgDataUrl\"\n                :data-pswp-width=\"svgWidth\"\n                :data-pswp-height=\"svgHeight\"\n                :title=\"title\" />\n        </div>\n\n        <!-- SVG Stage -->\n        <div\n            class=\"pk-svg-viewer__stage\"\n            @mousedown=\"onMouseDown\"\n            @mousemove=\"onMouseMove\"\n            @mouseup=\"onMouseUp\"\n            @mouseleave=\"onMouseUp\">\n            <div\n                ref=\"svgRef\"\n                :style=\"svgStyle\"\n                class=\"pk-svg-viewer__content\" />\n        </div>\n\n        <!-- Floating Toolbar -->\n        <div class=\"pk-svg-viewer__toolbar\">\n            <VvButtonGroup\n                modifiers=\"compact\"\n                class=\"bg-surface-1 shadow-md overflow-hidden\">\n                <transition name=\"fade\">\n                    <VvButton\n                        key=\"reset\"\n                        modifiers=\"action-small\"\n                        :disabled=\"\n                            scale === 1 && translateX === 0 && translateY === 0\n                        \"\n                        icon=\"ri:aspect-ratio-line\"\n                        :title=\"$t('action.reset')\"\n                        @click=\"reset\" />\n                </transition>\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-out-line\"\n                    :title=\"$t('action.zoomOut')\"\n                    @click=\"zoomOut\" />\n                <VvButton\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-in-line\"\n                    :title=\"$t('action.zoomIn')\"\n                    @click=\"zoomIn\" />\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:fullscreen-line\"\n                    :title=\"$t('action.expand')\"\n                    @click=\"openLightbox\" />\n            </VvButtonGroup>\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-svg-viewer {\n        position: relative;\n        overflow: hidden;\n        background-color: var(--color-surface-2);\n        width: 100%;\n        height: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        &__content {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: grab;\n            transition: transform 0.3s ease-out;\n            transform-origin: center center;\n\n            svg {\n                max-width: 100%;\n                max-height: 100%;\n                height: auto;\n                width: auto;\n            }\n        }\n\n        &__toolbar {\n            position: absolute;\n            top: var(--spacing-8);\n            right: var(--spacing-8);\n            z-index: var(--z-dropdown);\n            opacity: 0;\n            transition: var(--transition-opacity);\n        }\n\n        &__stage {\n            width: 100%;\n            height: auto;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            user-select: none;\n        }\n\n        &:hover {\n            .pk-svg-viewer__toolbar {\n                opacity: 1;\n            }\n        }\n\n        &--dragging {\n            .pk-svg-viewer__toolbar {\n                opacity: 0.5 !important;\n                pointer-events: none;\n\n                & * {\n                    pointer-events: none;\n                }\n            }\n\n            .pk-svg-viewer__content {\n                cursor: grabbing !important;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { computed, onMounted, ref, watch } from 'vue'\n    import { useClipboard } from '@vueuse/core'\n    import { useI18n } from 'vue-i18n'\n    import { toSnakeCase } from 'utils'\n    import PkSvgViewer from '../PkSvgViewer.vue'\n\n    const props = defineProps<{\n        part: unknown\n        isDark?: boolean\n    }>()\n\n    const { t: $t, te: $te } = useI18n({\n        useScope: 'global',\n    })\n\n    const { copy, copied } = useClipboard()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            input?: {\n                code: string\n                title?: string\n                caption?: string\n            }\n        }\n        return part\n    })\n\n    const svgError = ref(false)\n\n    // Serialized SVG content\n    const svgContent = ref('')\n\n    enum DiagramType {\n        Sequence = 'sequenceDiagram',\n        Class = 'classDiagram',\n        State = 'stateDiagram',\n        ER = 'erDiagram',\n        XYChart = 'xychart',\n        Flowchart = 'flowchart',\n        Graph = 'graph',\n    }\n\n    const diagramType = computed<DiagramType | undefined>(() => {\n        const code = toolPart.value.input?.code?.trimStart()\n        if (!code) {\n            return undefined\n        }\n        const firstWord = code.match(/^[A-Za-z-]+/)?.[0]\n        switch (firstWord) {\n            case 'sequenceDiagram':\n                return DiagramType.Sequence\n            case 'classDiagram':\n                return DiagramType.Class\n            case 'stateDiagram':\n                return DiagramType.State\n            case 'erDiagram':\n                return DiagramType.ER\n            case 'xychart-beta':\n                return DiagramType.XYChart\n            case 'flowchart':\n                return DiagramType.Flowchart\n            case 'graph':\n                return DiagramType.Graph\n            default:\n                return undefined\n        }\n    })\n\n    const diagramTypeLabel = computed(() => {\n        if (!diagramType.value) {\n            return ''\n        }\n        return $te(`diagram.${diagramType.value}`)\n            ? $t(`diagram.${diagramType.value}`)\n            : diagramType.value\n    })\n\n    const diagramTypeIcon = computed(() => {\n        switch (diagramType.value) {\n            case DiagramType.Sequence:\n                return 'ri:timeline-view'\n            case DiagramType.Class:\n                return 'ri:organization-chart'\n            case DiagramType.State:\n                return 'ri:organization-chart'\n            case DiagramType.ER:\n                return 'ri:organization-chart'\n            case DiagramType.XYChart:\n                return 'ri:line-chart-line'\n            case DiagramType.Flowchart:\n                return 'ri:flow-chart'\n            case DiagramType.Graph:\n                return 'ri:flow-chart'\n            default:\n                return 'ri:flow-chart'\n        }\n    })\n\n    async function renderDiagram() {\n        const code = toolPart.value.input?.code\n        if (!code) return\n\n        svgError.value = false\n        try {\n            const { renderMermaidSVG, THEMES } =\n                await import('beautiful-mermaid')\n            const theme = props.isDark\n                ? THEMES['github-dark']\n                : THEMES['github-light']\n            svgContent.value = renderMermaidSVG(code, theme)\n        } catch {\n            svgError.value = true\n        }\n    }\n\n    watch([() => toolPart.value.input?.code, () => props.isDark], renderDiagram)\n    onMounted(async () => {\n        await renderDiagram()\n    })\n\n    const downloadSvg = () => {\n        if (!svgContent.value) {\n            return\n        }\n        const blob = new Blob([svgContent.value], {\n            type: 'image/svg+xml;charset=utf-8',\n        })\n        const url = URL.createObjectURL(blob)\n        const anchor = document.createElement('a')\n        anchor.href = url\n        anchor.download = `${toSnakeCase(toolPart.value.input?.title || 'diagram')}.svg`\n        document.body.appendChild(anchor)\n        anchor.click()\n        document.body.removeChild(anchor)\n        URL.revokeObjectURL(url)\n    }\n\n    const copyCode = () => {\n        const code = toolPart.value.input?.code\n        if (code) {\n            copy(code)\n        }\n    }\n</script>\n\n<template>\n    <div\n        v-if=\"toolPart?.input?.code\"\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n            <VvIcon :name=\"diagramTypeIcon\" class=\"text-16\" />\n            <div class=\"flex flex-col items-start gap-2\">\n                <strong class=\"font-bold\">{{\n                    diagramTypeLabel ?? $t('label.diagram')\n                }}</strong>\n            </div>\n            <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n                <VvButton\n                    modifiers=\"action-quiet-small\"\n                    :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n                    :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n                    @click=\"copyCode\" />\n                <VvButton\n                    v-if=\"svgContent\"\n                    modifiers=\"action-quiet-small\"\n                    icon=\"ri:download-line\"\n                    :label=\"$t('action.download')\"\n                    @click=\"downloadSvg\" />\n            </VvButtonGroup>\n        </div>\n        <div v-if=\"svgError\" class=\"text-12 text-danger py-8 px-sm\">\n            {{ $t('message.diagramRenderError') }}\n        </div>\n        <PkSvgViewer\n            v-else-if=\"svgContent\"\n            class=\"pk-tool-show-diagram__stage\"\n            :svg=\"svgContent\"\n            :title=\"toolPart.input?.title\" />\n        <div\n            v-else\n            class=\"pk-tool-show-diagram__stage flex justify-center items-center\">\n            <VvIcon name=\"loading-loop\" class=\"w-24 h-24 text-word-5\" />\n        </div>\n        <div\n            v-if=\"toolPart.input.caption\"\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-t border-surface-3 text-word-3\">\n            {{ toolPart.input.caption }}\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-tool-show-diagram {\n        // Fixed stage height: the diagram renders lazily (async chunk +\n        // dynamic mermaid import), so the loader and the rendered SVG must\n        // occupy the same space or the chat scroll position jumps around.\n        // The SVG scales to fit; zoom/pan and the lightbox cover the rest.\n        &__stage {\n            height: 384px;\n\n            .pk-svg-viewer__stage,\n            .pk-svg-viewer__content {\n                height: 100%;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { computed, onMounted, ref, watch } from 'vue'\n    import { useClipboard } from '@vueuse/core'\n    import { useI18n } from 'vue-i18n'\n    import { toSnakeCase } from 'utils'\n    import PkSvgViewer from '../PkSvgViewer.vue'\n\n    const props = defineProps<{\n        part: unknown\n        isDark?: boolean\n    }>()\n\n    const { t: $t, te: $te } = useI18n({\n        useScope: 'global',\n    })\n\n    const { copy, copied } = useClipboard()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            input?: {\n                code: string\n                title?: string\n                caption?: string\n            }\n        }\n        return part\n    })\n\n    const svgError = ref(false)\n\n    // Serialized SVG content\n    const svgContent = ref('')\n\n    enum DiagramType {\n        Sequence = 'sequenceDiagram',\n        Class = 'classDiagram',\n        State = 'stateDiagram',\n        ER = 'erDiagram',\n        XYChart = 'xychart',\n        Flowchart = 'flowchart',\n        Graph = 'graph',\n    }\n\n    const diagramType = computed<DiagramType | undefined>(() => {\n        const code = toolPart.value.input?.code?.trimStart()\n        if (!code) {\n            return undefined\n        }\n        const firstWord = code.match(/^[A-Za-z-]+/)?.[0]\n        switch (firstWord) {\n            case 'sequenceDiagram':\n                return DiagramType.Sequence\n            case 'classDiagram':\n                return DiagramType.Class\n            case 'stateDiagram':\n                return DiagramType.State\n            case 'erDiagram':\n                return DiagramType.ER\n            case 'xychart-beta':\n                return DiagramType.XYChart\n            case 'flowchart':\n                return DiagramType.Flowchart\n            case 'graph':\n                return DiagramType.Graph\n            default:\n                return undefined\n        }\n    })\n\n    const diagramTypeLabel = computed(() => {\n        if (!diagramType.value) {\n            return ''\n        }\n        return $te(`diagram.${diagramType.value}`)\n            ? $t(`diagram.${diagramType.value}`)\n            : diagramType.value\n    })\n\n    const diagramTypeIcon = computed(() => {\n        switch (diagramType.value) {\n            case DiagramType.Sequence:\n                return 'ri:timeline-view'\n            case DiagramType.Class:\n                return 'ri:organization-chart'\n            case DiagramType.State:\n                return 'ri:organization-chart'\n            case DiagramType.ER:\n                return 'ri:organization-chart'\n            case DiagramType.XYChart:\n                return 'ri:line-chart-line'\n            case DiagramType.Flowchart:\n                return 'ri:flow-chart'\n            case DiagramType.Graph:\n                return 'ri:flow-chart'\n            default:\n                return 'ri:flow-chart'\n        }\n    })\n\n    async function renderDiagram() {\n        const code = toolPart.value.input?.code\n        if (!code) return\n\n        svgError.value = false\n        try {\n            const { renderMermaidSVG, THEMES } =\n                await import('beautiful-mermaid')\n            const theme = props.isDark\n                ? THEMES['github-dark']\n                : THEMES['github-light']\n            svgContent.value = renderMermaidSVG(code, theme)\n        } catch {\n            svgError.value = true\n        }\n    }\n\n    watch([() => toolPart.value.input?.code, () => props.isDark], renderDiagram)\n    onMounted(async () => {\n        await renderDiagram()\n    })\n\n    const downloadSvg = () => {\n        if (!svgContent.value) {\n            return\n        }\n        const blob = new Blob([svgContent.value], {\n            type: 'image/svg+xml;charset=utf-8',\n        })\n        const url = URL.createObjectURL(blob)\n        const anchor = document.createElement('a')\n        anchor.href = url\n        anchor.download = `${toSnakeCase(toolPart.value.input?.title || 'diagram')}.svg`\n        document.body.appendChild(anchor)\n        anchor.click()\n        document.body.removeChild(anchor)\n        URL.revokeObjectURL(url)\n    }\n\n    const copyCode = () => {\n        const code = toolPart.value.input?.code\n        if (code) {\n            copy(code)\n        }\n    }\n</script>\n\n<template>\n    <div\n        v-if=\"toolPart?.input?.code\"\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n            <VvIcon :name=\"diagramTypeIcon\" class=\"text-16\" />\n            <div class=\"flex flex-col items-start gap-2\">\n                <strong class=\"font-bold\">{{\n                    diagramTypeLabel ?? $t('label.diagram')\n                }}</strong>\n            </div>\n            <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n                <VvButton\n                    modifiers=\"action-quiet-small\"\n                    :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n                    :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n                    @click=\"copyCode\" />\n                <VvButton\n                    v-if=\"svgContent\"\n                    modifiers=\"action-quiet-small\"\n                    icon=\"ri:download-line\"\n                    :label=\"$t('action.download')\"\n                    @click=\"downloadSvg\" />\n            </VvButtonGroup>\n        </div>\n        <div v-if=\"svgError\" class=\"text-12 text-danger py-8 px-sm\">\n            {{ $t('message.diagramRenderError') }}\n        </div>\n        <PkSvgViewer\n            v-else-if=\"svgContent\"\n            class=\"pk-tool-show-diagram__stage\"\n            :svg=\"svgContent\"\n            :title=\"toolPart.input?.title\" />\n        <div\n            v-else\n            class=\"pk-tool-show-diagram__stage flex justify-center items-center\">\n            <VvIcon name=\"loading-loop\" class=\"w-24 h-24 text-word-5\" />\n        </div>\n        <div\n            v-if=\"toolPart.input.caption\"\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-t border-surface-3 text-word-3\">\n            {{ toolPart.input.caption }}\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-tool-show-diagram {\n        // Fixed stage height: the diagram renders lazily (async chunk +\n        // dynamic mermaid import), so the loader and the rendered SVG must\n        // occupy the same space or the chat scroll position jumps around.\n        // The SVG scales to fit; zoom/pan and the lightbox cover the rest.\n        &__stage {\n            height: 384px;\n\n            .pk-svg-viewer__stage,\n            .pk-svg-viewer__content {\n                height: 100%;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { computed, onMounted, ref, watch } from 'vue'\n    import { useClipboard } from '@vueuse/core'\n    import { useI18n } from 'vue-i18n'\n    import { toSnakeCase } from 'utils'\n    import PkSvgViewer from '../PkSvgViewer.vue'\n\n    const props = defineProps<{\n        part: unknown\n        isDark?: boolean\n    }>()\n\n    const { t: $t, te: $te } = useI18n({\n        useScope: 'global',\n    })\n\n    const { copy, copied } = useClipboard()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            input?: {\n                code: string\n                title?: string\n                caption?: string\n            }\n        }\n        return part\n    })\n\n    const svgError = ref(false)\n\n    // Serialized SVG content\n    const svgContent = ref('')\n\n    enum DiagramType {\n        Sequence = 'sequenceDiagram',\n        Class = 'classDiagram',\n        State = 'stateDiagram',\n        ER = 'erDiagram',\n        XYChart = 'xychart',\n        Flowchart = 'flowchart',\n        Graph = 'graph',\n    }\n\n    const diagramType = computed<DiagramType | undefined>(() => {\n        const code = toolPart.value.input?.code?.trimStart()\n        if (!code) {\n            return undefined\n        }\n        const firstWord = code.match(/^[A-Za-z-]+/)?.[0]\n        switch (firstWord) {\n            case 'sequenceDiagram':\n                return DiagramType.Sequence\n            case 'classDiagram':\n                return DiagramType.Class\n            case 'stateDiagram':\n                return DiagramType.State\n            case 'erDiagram':\n                return DiagramType.ER\n            case 'xychart-beta':\n                return DiagramType.XYChart\n            case 'flowchart':\n                return DiagramType.Flowchart\n            case 'graph':\n                return DiagramType.Graph\n            default:\n                return undefined\n        }\n    })\n\n    const diagramTypeLabel = computed(() => {\n        if (!diagramType.value) {\n            return ''\n        }\n        return $te(`diagram.${diagramType.value}`)\n            ? $t(`diagram.${diagramType.value}`)\n            : diagramType.value\n    })\n\n    const diagramTypeIcon = computed(() => {\n        switch (diagramType.value) {\n            case DiagramType.Sequence:\n                return 'ri:timeline-view'\n            case DiagramType.Class:\n                return 'ri:organization-chart'\n            case DiagramType.State:\n                return 'ri:organization-chart'\n            case DiagramType.ER:\n                return 'ri:organization-chart'\n            case DiagramType.XYChart:\n                return 'ri:line-chart-line'\n            case DiagramType.Flowchart:\n                return 'ri:flow-chart'\n            case DiagramType.Graph:\n                return 'ri:flow-chart'\n            default:\n                return 'ri:flow-chart'\n        }\n    })\n\n    async function renderDiagram() {\n        const code = toolPart.value.input?.code\n        if (!code) return\n\n        svgError.value = false\n        try {\n            const { renderMermaidSVG, THEMES } =\n                await import('beautiful-mermaid')\n            const theme = props.isDark\n                ? THEMES['github-dark']\n                : THEMES['github-light']\n            svgContent.value = renderMermaidSVG(code, theme)\n        } catch {\n            svgError.value = true\n        }\n    }\n\n    watch([() => toolPart.value.input?.code, () => props.isDark], renderDiagram)\n    onMounted(async () => {\n        await renderDiagram()\n    })\n\n    const downloadSvg = () => {\n        if (!svgContent.value) {\n            return\n        }\n        const blob = new Blob([svgContent.value], {\n            type: 'image/svg+xml;charset=utf-8',\n        })\n        const url = URL.createObjectURL(blob)\n        const anchor = document.createElement('a')\n        anchor.href = url\n        anchor.download = `${toSnakeCase(toolPart.value.input?.title || 'diagram')}.svg`\n        document.body.appendChild(anchor)\n        anchor.click()\n        document.body.removeChild(anchor)\n        URL.revokeObjectURL(url)\n    }\n\n    const copyCode = () => {\n        const code = toolPart.value.input?.code\n        if (code) {\n            copy(code)\n        }\n    }\n</script>\n\n<template>\n    <div\n        v-if=\"toolPart?.input?.code\"\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n            <VvIcon :name=\"diagramTypeIcon\" class=\"text-16\" />\n            <div class=\"flex flex-col items-start gap-2\">\n                <strong class=\"font-bold\">{{\n                    diagramTypeLabel ?? $t('label.diagram')\n                }}</strong>\n            </div>\n            <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n                <VvButton\n                    modifiers=\"action-quiet-small\"\n                    :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n                    :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n                    @click=\"copyCode\" />\n                <VvButton\n                    v-if=\"svgContent\"\n                    modifiers=\"action-quiet-small\"\n                    icon=\"ri:download-line\"\n                    :label=\"$t('action.download')\"\n                    @click=\"downloadSvg\" />\n            </VvButtonGroup>\n        </div>\n        <div v-if=\"svgError\" class=\"text-12 text-danger py-8 px-sm\">\n            {{ $t('message.diagramRenderError') }}\n        </div>\n        <PkSvgViewer\n            v-else-if=\"svgContent\"\n            class=\"pk-tool-show-diagram__stage\"\n            :svg=\"svgContent\"\n            :title=\"toolPart.input?.title\" />\n        <div\n            v-else\n            class=\"pk-tool-show-diagram__stage flex justify-center items-center\">\n            <VvIcon name=\"loading-loop\" class=\"w-24 h-24 text-word-5\" />\n        </div>\n        <div\n            v-if=\"toolPart.input.caption\"\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-t border-surface-3 text-word-3\">\n            {{ toolPart.input.caption }}\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-tool-show-diagram {\n        // Fixed stage height: the diagram renders lazily (async chunk +\n        // dynamic mermaid import), so the loader and the rendered SVG must\n        // occupy the same space or the chat scroll position jumps around.\n        // The SVG scales to fit; zoom/pan and the lightbox cover the rest.\n        &__stage {\n            height: 384px;\n\n            .pk-svg-viewer__stage,\n            .pk-svg-viewer__content {\n                height: 100%;\n            }\n        }\n    }\n</style>\n"],"mappings":"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"}

package/dist/_chunks/{PkToolShowSources-B69JmwbZ.js → PkToolShowSources-Dot-W0Mj.js}

@@ -197,7 +197,7 @@ var F = {
 						disabled: D.has(c.chunkId),
 						onClick: (e) => j(c)
 					}, [y(u, {
-						name: D.has(c.chunkId) ? "line-md:loading-loop" : "ri:expand-up-down-line",
+						name: D.has(c.chunkId) ? "loading-loop" : "ri:expand-up-down-line",
 						class: "text-12"
 					}, null, 8, ["name"]), s(" " + a(r.$t("label.expandContext")), 1)], 8, J)) : E.has(c.chunkId) ? (n(), v("button", {
 						key: 1,
@@ -241,4 +241,4 @@ var F = {
 //#endregion
 export { Q as default };
 
-//# sourceMappingURL=PkToolShowSources-B69JmwbZ.js.map
+//# sourceMappingURL=PkToolShowSources-Dot-W0Mj.js.map

package/dist/_chunks/PkToolShowSources-Dot-W0Mj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PkToolShowSources-Dot-W0Mj.js","names":["$t"],"sources":["../../../../packages/components/src/chat/PkChunkPreview.vue","../../../../packages/components/src/chat/PkChunkPreview.vue","../../../../packages/components/src/chat/PkDocumentHeader.vue","../../../../packages/components/src/chat/PkDocumentHeader.vue","../../../../packages/components/src/chat/PkToolShowSources.vue","../../../../packages/components/src/chat/PkToolShowSources.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { computed } from 'vue'\n    import { stripMarkdown } from 'utils'\n\n    const props = defineProps<{\n        content: string\n        similarity?: number\n        maxSimilarity?: number\n        expanded: boolean\n    }>()\n\n    const similarityPercent = computed(() => {\n        if (props.similarity == null) {\n            return null\n        }\n        const max =\n            props.maxSimilarity && props.maxSimilarity > 0\n                ? props.maxSimilarity\n                : 1\n        return Math.round((props.similarity / max) * 100)\n    })\n</script>\n\n<template>\n    <VvIcon name=\"ri:text-snippet\" class=\"shrink-0 text-12 text-word-4\" />\n    <span class=\"text-10 text-word-2 truncate flex-1\" :title=\"content\">\n        {{ stripMarkdown(content) }}\n    </span>\n    <span v-if=\"similarityPercent != null\" class=\"text-10 text-word-4 shrink-0\">\n        {{ similarityPercent }}%\n    </span>\n    <VvIcon\n        :name=\"expanded ? 'ri:arrow-up-s-line' : 'ri:arrow-down-s-line'\"\n        class=\"text-14 text-word-4 shrink-0\" />\n</template>\n","<script setup lang=\"ts\">\n    import { computed } from 'vue'\n    import { stripMarkdown } from 'utils'\n\n    const props = defineProps<{\n        content: string\n        similarity?: number\n        maxSimilarity?: number\n        expanded: boolean\n    }>()\n\n    const similarityPercent = computed(() => {\n        if (props.similarity == null) {\n            return null\n        }\n        const max =\n            props.maxSimilarity && props.maxSimilarity > 0\n                ? props.maxSimilarity\n                : 1\n        return Math.round((props.similarity / max) * 100)\n    })\n</script>\n\n<template>\n    <VvIcon name=\"ri:text-snippet\" class=\"shrink-0 text-12 text-word-4\" />\n    <span class=\"text-10 text-word-2 truncate flex-1\" :title=\"content\">\n        {{ stripMarkdown(content) }}\n    </span>\n    <span v-if=\"similarityPercent != null\" class=\"text-10 text-word-4 shrink-0\">\n        {{ similarityPercent }}%\n    </span>\n    <VvIcon\n        :name=\"expanded ? 'ri:arrow-up-s-line' : 'ri:arrow-down-s-line'\"\n        class=\"text-14 text-word-4 shrink-0\" />\n</template>\n","<script setup lang=\"ts\">\n    import type { DocumentType } from 'models'\n    import { getTypeIcon } from 'models'\n    import PkUrl from '../PkUrl.vue'\n\n    defineProps<{\n        type: string\n        name: string\n        url?: string\n        filename?: string\n    }>()\n</script>\n\n<template>\n    <VvIcon\n        :name=\"getTypeIcon(type as DocumentType)\"\n        class=\"shrink-0 text-14 text-word-3\" />\n    <div class=\"flex flex-col gap-2 min-w-0 flex-1\">\n        <strong class=\"font-bold text-12 text-word-1 truncate block\">\n            {{ name }}\n        </strong>\n        <span v-if=\"filename\" class=\"text-10 text-word-4 truncate\">\n            {{ filename }}\n        </span>\n        <span\n            v-if=\"url\"\n            class=\"text-10 text-word-4 truncate flex items-center gap-4\">\n            <VvIcon name=\"ri:link\" class=\"shrink-0 text-10\" />\n            <PkUrl :url=\"url\" />\n        </span>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import type { DocumentType } from 'models'\n    import { getTypeIcon } from 'models'\n    import PkUrl from '../PkUrl.vue'\n\n    defineProps<{\n        type: string\n        name: string\n        url?: string\n        filename?: string\n    }>()\n</script>\n\n<template>\n    <VvIcon\n        :name=\"getTypeIcon(type as DocumentType)\"\n        class=\"shrink-0 text-14 text-word-3\" />\n    <div class=\"flex flex-col gap-2 min-w-0 flex-1\">\n        <strong class=\"font-bold text-12 text-word-1 truncate block\">\n            {{ name }}\n        </strong>\n        <span v-if=\"filename\" class=\"text-10 text-word-4 truncate\">\n            {{ filename }}\n        </span>\n        <span\n            v-if=\"url\"\n            class=\"text-10 text-word-4 truncate flex items-center gap-4\">\n            <VvIcon name=\"ri:link\" class=\"shrink-0 text-10\" />\n            <PkUrl :url=\"url\" />\n        </span>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import { computed, ref, reactive } from 'vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import PkChunkPreview from './PkChunkPreview.vue'\n    import PkDocumentHeader from './PkDocumentHeader.vue'\n\n    interface SourceItem {\n        chunkId: string\n        documentId: string\n        documentName: string\n        documentType: string\n        language: string\n        content: string\n        chunkIndex?: number | null\n        similarity?: number\n        sourceUrl?: string\n        sourceFilename?: string\n        sourceDescription?: string\n        sourceImageUrl?: string\n    }\n\n    const props = defineProps<{\n        part: unknown\n        onExpandContext?: (payload: {\n            documentId: string\n            chunkIndex: number\n        }) => Promise<string>\n        onDownload?: (documentId: string) => void\n    }>()\n\n    const toolPart = computed(() => {\n        return props.part as {\n            input?: {\n                sources: SourceItem[]\n            }\n        }\n    })\n\n    const sources = computed(() => toolPart.value.input?.sources || [])\n\n    const groupedSources = computed(() => {\n        const groups = new Map<\n            string,\n            { document: SourceItem; chunks: SourceItem[] }\n        >()\n        for (const source of sources.value) {\n            const existing = groups.get(source.documentId)\n            if (existing) {\n                existing.chunks.push(source)\n            } else {\n                groups.set(source.documentId, {\n                    document: source,\n                    chunks: [source],\n                })\n            }\n        }\n        return [...groups.values()]\n    })\n\n    const maxSimilarity = computed(() => {\n        return Math.max(...sources.value.map((s) => s.similarity ?? 0), 0)\n    })\n\n    const expandedDocuments = reactive(new Set<string>())\n    const expandedChunks = reactive(new Set<string>())\n    const contextData = reactive(new Map<string, string>())\n    const loadingContext = reactive(new Set<string>())\n\n    const toggleDocument = (documentId: string) => {\n        if (expandedDocuments.has(documentId)) {\n            expandedDocuments.delete(documentId)\n        } else {\n            expandedDocuments.add(documentId)\n        }\n    }\n\n    const toggleChunk = (chunkId: string) => {\n        if (expandedChunks.has(chunkId)) {\n            expandedChunks.delete(chunkId)\n        } else {\n            expandedChunks.add(chunkId)\n        }\n    }\n\n    const handleExpandContext = async (source: SourceItem) => {\n        if (source.chunkIndex == null || !props.onExpandContext) {\n            return\n        }\n        loadingContext.add(source.chunkId)\n        try {\n            const content = await props.onExpandContext({\n                documentId: source.documentId,\n                chunkIndex: source.chunkIndex,\n            })\n            contextData.set(source.chunkId, content)\n        } finally {\n            loadingContext.delete(source.chunkId)\n        }\n    }\n\n    const clearContext = (chunkId: string) => {\n        contextData.delete(chunkId)\n    }\n\n    const showMore = ref(false)\n    const visibleGroups = computed(() => {\n        if (showMore.value) {\n            return groupedSources.value\n        }\n        return groupedSources.value.slice(0, 3)\n    })\n    const hasMore = computed(() => groupedSources.value.length > 3)\n</script>\n\n<template>\n    <div v-if=\"sources.length\" class=\"flex flex-col gap-xs w-full\">\n        <div class=\"flex items-center gap-4 text-12 text-word-3 font-semibold\">\n            <VvIcon name=\"ri:article-line\" class=\"text-14\" />\n            {{ $t('label.sources') }}\n            <span class=\"text-word-4 font-normal\">\n                ({{ groupedSources.length }})\n            </span>\n        </div>\n\n        <ul class=\"flex flex-col gap-xs\">\n            <li\n                v-for=\"group in visibleGroups\"\n                :key=\"group.document.documentId\"\n                class=\"border border-surface-3 rounded-xl overflow-hidden\">\n                <!-- Document header -->\n                <button\n                    class=\"flex items-center gap-8 p-8 w-full text-left hover:bg-surface-1 transition-colors cursor-pointer\"\n                    @click=\"toggleDocument(group.document.documentId)\">\n                    <PkDocumentHeader\n                        :type=\"group.document.documentType\"\n                        :name=\"group.document.documentName\"\n                        :url=\"group.document.sourceUrl\"\n                        :filename=\"group.document.sourceFilename\" />\n                    <div class=\"flex items-center gap-4 shrink-0\">\n                        <span\n                            v-if=\"group.chunks.length > 1\"\n                            class=\"text-10 text-word-4 bg-surface-2 rounded px-4 py-2\">\n                            {{ group.chunks.length }}\n                        </span>\n                        <span\n                            class=\"text-10 text-word-4 bg-surface-2 rounded px-4 py-2 uppercase\">\n                            {{ group.document.language }}\n                        </span>\n                        <VvIcon\n                            :name=\"\n                                expandedDocuments.has(group.document.documentId)\n                                    ? 'ri:arrow-up-s-line'\n                                    : 'ri:arrow-down-s-line'\n                            \"\n                            class=\"text-16 text-word-3\" />\n                    </div>\n                </button>\n\n                <!-- Expanded content -->\n                <div\n                    v-if=\"expandedDocuments.has(group.document.documentId)\"\n                    class=\"border-t border-surface-3\">\n                    <PkStreamingMarkdown\n                        v-if=\"group.document.sourceDescription\"\n                        :markdown=\"group.document.sourceDescription\"\n                        class=\"px-8 py-4 text-10 text-word-3 bg-surface-1 border-b border-surface-3\" />\n\n                    <!-- Chunk excerpts -->\n                    <div\n                        v-for=\"chunk in group.chunks\"\n                        :key=\"chunk.chunkId\"\n                        class=\"border-b border-surface-3 last:border-b-0\">\n                        <button\n                            class=\"flex items-center gap-8 px-8 py-6 w-full text-left hover:bg-surface-1 transition-colors cursor-pointer\"\n                            @click=\"toggleChunk(chunk.chunkId)\">\n                            <PkChunkPreview\n                                :content=\"chunk.content\"\n                                :similarity=\"chunk.similarity\"\n                                :max-similarity=\"maxSimilarity\"\n                                :expanded=\"expandedChunks.has(chunk.chunkId)\" />\n                        </button>\n\n                        <!-- Expanded chunk content -->\n                        <div\n                            v-if=\"expandedChunks.has(chunk.chunkId)\"\n                            class=\"bg-surface-1 border-t border-surface-3\">\n                            <div class=\"p-8 text-10 text-word-3\">\n                                <transition mode=\"out-in\">\n                                    <!-- Context expansion -->\n                                    <PkStreamingMarkdown\n                                        v-if=\"contextData.has(chunk.chunkId)\"\n                                        :markdown=\"\n                                            contextData.get(chunk.chunkId)!\n                                        \"\n                                        class=\"wysiwyg\" />\n\n                                    <!-- Chunk content -->\n                                    <PkStreamingMarkdown\n                                        v-else\n                                        :markdown=\"chunk.content\"\n                                        class=\"wysiwyg\" />\n                                </transition>\n                            </div>\n\n                            <!-- Actions bar -->\n                            <div\n                                class=\"flex items-center gap-8 px-8 py-6 border-t border-surface-3 bg-surface\">\n                                <!-- Expand / collapse context -->\n                                <button\n                                    v-if=\"\n                                        onExpandContext &&\n                                        chunk.chunkIndex != null &&\n                                        !contextData.has(chunk.chunkId)\n                                    \"\n                                    class=\"text-10 text-word-3 hover:text-word flex items-center gap-4 cursor-pointer\"\n                                    :disabled=\"\n                                        loadingContext.has(chunk.chunkId)\n                                    \"\n                                    @click=\"handleExpandContext(chunk)\">\n                                    <VvIcon\n                                        :name=\"\n                                            loadingContext.has(chunk.chunkId)\n                                                ? 'loading-loop'\n                                                : 'ri:expand-up-down-line'\n                                        \"\n                                        class=\"text-12\" />\n                                    {{ $t('label.expandContext') }}\n                                </button>\n                                <button\n                                    v-else-if=\"contextData.has(chunk.chunkId)\"\n                                    class=\"text-10 text-word-3 hover:text-word-1 flex items-center gap-4 cursor-pointer\"\n                                    @click=\"clearContext(chunk.chunkId)\">\n                                    <VvIcon\n                                        name=\"ri:collapse-vertical-line\"\n                                        class=\"text-12\" />\n                                    {{ $t('label.collapseContext') }}\n                                </button>\n\n                                <!-- Open source URL -->\n                                <a\n                                    v-if=\"chunk.sourceUrl\"\n                                    :href=\"chunk.sourceUrl\"\n                                    target=\"_blank\"\n                                    rel=\"noopener noreferrer\"\n                                    class=\"text-10 text-word-3 hover:text-word-1 flex items-center gap-4 ml-auto\">\n                                    <VvIcon\n                                        name=\"ri:external-link-line\"\n                                        class=\"text-12\" />\n                                    {{ $t('label.openSource') }}\n                                </a>\n\n                                <!-- Download file -->\n                                <button\n                                    v-if=\"\n                                        onDownload &&\n                                        chunk.documentType === 'file'\n                                    \"\n                                    class=\"text-10 text-word-3 hover:text-word-1 flex items-center gap-4 cursor-pointer\"\n                                    :class=\"{\n                                        'ml-auto': !chunk.sourceUrl,\n                                    }\"\n                                    @click=\"onDownload(chunk.documentId)\">\n                                    <VvIcon\n                                        name=\"ri:download-line\"\n                                        class=\"text-12\" />\n                                    {{ $t('label.downloadFile') }}\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </li>\n        </ul>\n\n        <!-- Show more -->\n        <button\n            v-if=\"hasMore\"\n            class=\"text-12 text-word-3 cursor-pointer hover:underline flex items-center gap-4 mx-auto\"\n            @click=\"showMore = !showMore\">\n            <VvIcon\n                :name=\"showMore ? 'ri:arrow-up-s-line' : 'ri:arrow-down-s-line'\"\n                class=\"text-16\" />\n            {{\n                showMore\n                    ? $t('action.showLess')\n                    : $t('action.showMore', {\n                          count: groupedSources.length - 3,\n                      })\n            }}\n        </button>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import { computed, ref, reactive } from 'vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n    import PkChunkPreview from './PkChunkPreview.vue'\n    import PkDocumentHeader from './PkDocumentHeader.vue'\n\n    interface SourceItem {\n        chunkId: string\n        documentId: string\n        documentName: string\n        documentType: string\n        language: string\n        content: string\n        chunkIndex?: number | null\n        similarity?: number\n        sourceUrl?: string\n        sourceFilename?: string\n        sourceDescription?: string\n        sourceImageUrl?: string\n    }\n\n    const props = defineProps<{\n        part: unknown\n        onExpandContext?: (payload: {\n            documentId: string\n            chunkIndex: number\n        }) => Promise<string>\n        onDownload?: (documentId: string) => void\n    }>()\n\n    const toolPart = computed(() => {\n        return props.part as {\n            input?: {\n                sources: SourceItem[]\n            }\n        }\n    })\n\n    const sources = computed(() => toolPart.value.input?.sources || [])\n\n    const groupedSources = computed(() => {\n        const groups = new Map<\n            string,\n            { document: SourceItem; chunks: SourceItem[] }\n        >()\n        for (const source of sources.value) {\n            const existing = groups.get(source.documentId)\n            if (existing) {\n                existing.chunks.push(source)\n            } else {\n                groups.set(source.documentId, {\n                    document: source,\n                    chunks: [source],\n                })\n            }\n        }\n        return [...groups.values()]\n    })\n\n    const maxSimilarity = computed(() => {\n        return Math.max(...sources.value.map((s) => s.similarity ?? 0), 0)\n    })\n\n    const expandedDocuments = reactive(new Set<string>())\n    const expandedChunks = reactive(new Set<string>())\n    const contextData = reactive(new Map<string, string>())\n    const loadingContext = reactive(new Set<string>())\n\n    const toggleDocument = (documentId: string) => {\n        if (expandedDocuments.has(documentId)) {\n            expandedDocuments.delete(documentId)\n        } else {\n            expandedDocuments.add(documentId)\n        }\n    }\n\n    const toggleChunk = (chunkId: string) => {\n        if (expandedChunks.has(chunkId)) {\n            expandedChunks.delete(chunkId)\n        } else {\n            expandedChunks.add(chunkId)\n        }\n    }\n\n    const handleExpandContext = async (source: SourceItem) => {\n        if (source.chunkIndex == null || !props.onExpandContext) {\n            return\n        }\n        loadingContext.add(source.chunkId)\n        try {\n            const content = await props.onExpandContext({\n                documentId: source.documentId,\n                chunkIndex: source.chunkIndex,\n            })\n            contextData.set(source.chunkId, content)\n        } finally {\n            loadingContext.delete(source.chunkId)\n        }\n    }\n\n    const clearContext = (chunkId: string) => {\n        contextData.delete(chunkId)\n    }\n\n    const showMore = ref(false)\n    const visibleGroups = computed(() => {\n        if (showMore.value) {\n            return groupedSources.value\n        }\n        return groupedSources.value.slice(0, 3)\n    })\n    const hasMore = computed(() => groupedSources.value.length > 3)\n</script>\n\n<template>\n    <div v-if=\"sources.length\" class=\"flex flex-col gap-xs w-full\">\n        <div class=\"flex items-center gap-4 text-12 text-word-3 font-semibold\">\n            <VvIcon name=\"ri:article-line\" class=\"text-14\" />\n            {{ $t('label.sources') }}\n            <span class=\"text-word-4 font-normal\">\n                ({{ groupedSources.length }})\n            </span>\n        </div>\n\n        <ul class=\"flex flex-col gap-xs\">\n            <li\n                v-for=\"group in visibleGroups\"\n                :key=\"group.document.documentId\"\n                class=\"border border-surface-3 rounded-xl overflow-hidden\">\n                <!-- Document header -->\n                <button\n                    class=\"flex items-center gap-8 p-8 w-full text-left hover:bg-surface-1 transition-colors cursor-pointer\"\n                    @click=\"toggleDocument(group.document.documentId)\">\n                    <PkDocumentHeader\n                        :type=\"group.document.documentType\"\n                        :name=\"group.document.documentName\"\n                        :url=\"group.document.sourceUrl\"\n                        :filename=\"group.document.sourceFilename\" />\n                    <div class=\"flex items-center gap-4 shrink-0\">\n                        <span\n                            v-if=\"group.chunks.length > 1\"\n                            class=\"text-10 text-word-4 bg-surface-2 rounded px-4 py-2\">\n                            {{ group.chunks.length }}\n                        </span>\n                        <span\n                            class=\"text-10 text-word-4 bg-surface-2 rounded px-4 py-2 uppercase\">\n                            {{ group.document.language }}\n                        </span>\n                        <VvIcon\n                            :name=\"\n                                expandedDocuments.has(group.document.documentId)\n                                    ? 'ri:arrow-up-s-line'\n                                    : 'ri:arrow-down-s-line'\n                            \"\n                            class=\"text-16 text-word-3\" />\n                    </div>\n                </button>\n\n                <!-- Expanded content -->\n                <div\n                    v-if=\"expandedDocuments.has(group.document.documentId)\"\n                    class=\"border-t border-surface-3\">\n                    <PkStreamingMarkdown\n                        v-if=\"group.document.sourceDescription\"\n                        :markdown=\"group.document.sourceDescription\"\n                        class=\"px-8 py-4 text-10 text-word-3 bg-surface-1 border-b border-surface-3\" />\n\n                    <!-- Chunk excerpts -->\n                    <div\n                        v-for=\"chunk in group.chunks\"\n                        :key=\"chunk.chunkId\"\n                        class=\"border-b border-surface-3 last:border-b-0\">\n                        <button\n                            class=\"flex items-center gap-8 px-8 py-6 w-full text-left hover:bg-surface-1 transition-colors cursor-pointer\"\n                            @click=\"toggleChunk(chunk.chunkId)\">\n                            <PkChunkPreview\n                                :content=\"chunk.content\"\n                                :similarity=\"chunk.similarity\"\n                                :max-similarity=\"maxSimilarity\"\n                                :expanded=\"expandedChunks.has(chunk.chunkId)\" />\n                        </button>\n\n                        <!-- Expanded chunk content -->\n                        <div\n                            v-if=\"expandedChunks.has(chunk.chunkId)\"\n                            class=\"bg-surface-1 border-t border-surface-3\">\n                            <div class=\"p-8 text-10 text-word-3\">\n                                <transition mode=\"out-in\">\n                                    <!-- Context expansion -->\n                                    <PkStreamingMarkdown\n                                        v-if=\"contextData.has(chunk.chunkId)\"\n                                        :markdown=\"\n                                            contextData.get(chunk.chunkId)!\n                                        \"\n                                        class=\"wysiwyg\" />\n\n                                    <!-- Chunk content -->\n                                    <PkStreamingMarkdown\n                                        v-else\n                                        :markdown=\"chunk.content\"\n                                        class=\"wysiwyg\" />\n                                </transition>\n                            </div>\n\n                            <!-- Actions bar -->\n                            <div\n                                class=\"flex items-center gap-8 px-8 py-6 border-t border-surface-3 bg-surface\">\n                                <!-- Expand / collapse context -->\n                                <button\n                                    v-if=\"\n                                        onExpandContext &&\n                                        chunk.chunkIndex != null &&\n                                        !contextData.has(chunk.chunkId)\n                                    \"\n                                    class=\"text-10 text-word-3 hover:text-word flex items-center gap-4 cursor-pointer\"\n                                    :disabled=\"\n                                        loadingContext.has(chunk.chunkId)\n                                    \"\n                                    @click=\"handleExpandContext(chunk)\">\n                                    <VvIcon\n                                        :name=\"\n                                            loadingContext.has(chunk.chunkId)\n                                                ? 'loading-loop'\n                                                : 'ri:expand-up-down-line'\n                                        \"\n                                        class=\"text-12\" />\n                                    {{ $t('label.expandContext') }}\n                                </button>\n                                <button\n                                    v-else-if=\"contextData.has(chunk.chunkId)\"\n                                    class=\"text-10 text-word-3 hover:text-word-1 flex items-center gap-4 cursor-pointer\"\n                                    @click=\"clearContext(chunk.chunkId)\">\n                                    <VvIcon\n                                        name=\"ri:collapse-vertical-line\"\n                                        class=\"text-12\" />\n                                    {{ $t('label.collapseContext') }}\n                                </button>\n\n                                <!-- Open source URL -->\n                                <a\n                                    v-if=\"chunk.sourceUrl\"\n                                    :href=\"chunk.sourceUrl\"\n                                    target=\"_blank\"\n                                    rel=\"noopener noreferrer\"\n                                    class=\"text-10 text-word-3 hover:text-word-1 flex items-center gap-4 ml-auto\">\n                                    <VvIcon\n                                        name=\"ri:external-link-line\"\n                                        class=\"text-12\" />\n                                    {{ $t('label.openSource') }}\n                                </a>\n\n                                <!-- Download file -->\n                                <button\n                                    v-if=\"\n                                        onDownload &&\n                                        chunk.documentType === 'file'\n                                    \"\n                                    class=\"text-10 text-word-3 hover:text-word-1 flex items-center gap-4 cursor-pointer\"\n                                    :class=\"{\n                                        'ml-auto': !chunk.sourceUrl,\n                                    }\"\n                                    @click=\"onDownload(chunk.documentId)\">\n                                    <VvIcon\n                                        name=\"ri:download-line\"\n                                        class=\"text-12\" />\n                                    {{ $t('label.downloadFile') }}\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </li>\n        </ul>\n\n        <!-- Show more -->\n        <button\n            v-if=\"hasMore\"\n            class=\"text-12 text-word-3 cursor-pointer hover:underline flex items-center gap-4 mx-auto\"\n            @click=\"showMore = !showMore\">\n            <VvIcon\n                :name=\"showMore ? 'ri:arrow-up-s-line' : 'ri:arrow-down-s-line'\"\n                class=\"text-16\" />\n            {{\n                showMore\n                    ? $t('action.showLess')\n                    : $t('action.showMore', {\n                          count: groupedSources.length - 3,\n                      })\n            }}\n        </button>\n    </div>\n</template>\n"],"mappings":"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"}