npm - @8wave/ai-elements - Versions diffs - 0.110.0-beta.4 → 0.111.0-beta.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
     "name": "@8wave/ai-elements",
     "private": false,
-    "version": "0.110.0-beta.4",
+    "version": "0.111.0-beta.3",
     "type": "module",
     "scripts": {
         "dev": "vite --port 8082 --open --host",

package/dist/_chunks/PkToolRequestGeolocation-CEVpl50q.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"PkToolRequestGeolocation-CEVpl50q.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 \n <template v-if=\"!isOutputAvailable\">\n <VvIcon name=\"line-md:loading-loop\" class=\"text-16\" />\n <span>{{ $t('messagePart.requestGeolocation') }}</span>\n </template>\n\n \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 \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 \n <template v-if=\"!isOutputAvailable\">\n <VvIcon name=\"line-md:loading-loop\" class=\"text-16\" />\n <span>{{ $t('messagePart.requestGeolocation') }}</span>\n </template>\n\n \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 \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,EAAsD,GAAA;IAA9C,MAAK;IAAuB,OAAM;GAC1C,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.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"PkToolRequestOAuthConnection-CncDU-Kl.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 \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 \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 \n <template v-else-if=\"isSigningIn\">\n <div class=\"flex items-center gap-8 text-word-3\">\n <VvIcon name=\"line-md:loading-loop\" />\n <span class=\"text-10\">{{\n $t('messagePart.requestOAuthConnection')\n }}</span>\n </div>\n </template>\n\n \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 \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 \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 \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 \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 \n <template v-else-if=\"isSigningIn\">\n <div class=\"flex items-center gap-8 text-word-3\">\n <VvIcon name=\"line-md:loading-loop\" />\n <span class=\"text-10\">{{\n $t('messagePart.requestOAuthConnection')\n }}</span>\n </div>\n </template>\n\n \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 \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 \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/PkToolShowSources-B69JmwbZ.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"PkToolShowSources-B69JmwbZ.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 \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 \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 \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 \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 \n <PkStreamingMarkdown\n v-if=\"contextData.has(chunk.chunkId)\"\n :markdown=\"\n contextData.get(chunk.chunkId)!\n \"\n class=\"wysiwyg\" />\n\n \n <PkStreamingMarkdown\n v-else\n :markdown=\"chunk.content\"\n class=\"wysiwyg\" />\n </transition>\n </div>\n\n \n <div\n class=\"flex items-center gap-8 px-8 py-6 border-t border-surface-3 bg-surface\">\n \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 ? 'line-md: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 \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 \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 \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 \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 \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 \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 \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 \n <PkStreamingMarkdown\n v-if=\"contextData.has(chunk.chunkId)\"\n :markdown=\"\n contextData.get(chunk.chunkId)!\n \"\n class=\"wysiwyg\" />\n\n \n <PkStreamingMarkdown\n v-else\n :markdown=\"chunk.content\"\n class=\"wysiwyg\" />\n </transition>\n </div>\n\n \n <div\n class=\"flex items-center gap-8 px-8 py-6 border-t border-surface-3 bg-surface\">\n \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 ? 'line-md: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 \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 \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 \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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"}

package/dist-vue/_chunks/PkChatbotFilePreview-DO1wZPPj.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"PkChatbotFilePreview-DO1wZPPj.js","names":["$t","$emit"],"sources":["../../../../packages/components/src/composables/useLightbox.ts","../../../../packages/components/src/chat/PkChatbotFilePreview.vue","../../../../packages/components/src/chat/PkChatbotFilePreview.vue"],"sourcesContent":["import {\n onBeforeUnmount,\n ref,\n shallowRef,\n type Ref,\n type ShallowRef,\n} from 'vue'\nimport type PhotoSwipeLightbox from 'photoswipe/lightbox'\nimport type PhotoSwipe from 'photoswipe'\nimport { loadCdnCss } from 'utils'\n\nconst PHOTOSWIPE_CSS =\n 'https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css'\n\nconst DEFAULT_IMAGE_SIZE = { width: 1200, height: 800 }\n\nexport interface LightboxImage {\n url: string\n caption?: string\n alt?: string\n /** Natural width in px — used by PhotoSwipe for proper sizing. */\n width?: number\n /** Natural height in px — used by PhotoSwipe for proper sizing. */\n height?: number\n}\n\nexport interface LightboxOptions {\n /** Container element whose child anchors are the gallery items */\n gallery: Ref<HTMLElement | undefined>\n /** CSS selector for gallery items inside the container (default: `'a[data-pswp-src]'`) */\n children?: string\n loop?: boolean\n /** Show a download button in the lightbox toolbar */\n downloadable?: boolean\n /** Show an open-in-new-tab button in the lightbox toolbar */\n openInNewTab?: boolean\n}\n\nexport interface UseLightboxReturn {\n lightbox: ShallowRef<PhotoSwipeLightbox | null>\n /** Initialises PhotoSwipe. Call this inside `onMounted`. */\n init: () => Promise<void>\n}\n\n/**\n * Encapsulates PhotoSwipe 5 initialisation, toolbar customisation, and lifecycle cleanup.\n * CSS is injected into `document.head` so the overlay works in both regular DOM and Shadow DOM.\n *\n * Usage:\n * ```ts\n * const { init } = useLightbox({ gallery: galleryRef, downloadable: true })\n * onMounted(init)\n * ```\n */\nexport function useLightbox(options: LightboxOptions): UseLightboxReturn {\n const {\n gallery,\n children = 'a[data-pswp-src]',\n loop = true,\n downloadable = true,\n openInNewTab = true,\n } = options\n\n const lightbox = shallowRef<PhotoSwipeLightbox | null>(null)\n\n const init = async () => {\n if (!gallery.value) {\n return\n }\n\n // PhotoSwipe renders its overlay into document.body, so CSS must be in\n // document.head — not inside a shadow root.\n loadCdnCss(PHOTOSWIPE_CSS)\n injectPhotoSwipeOverrides()\n\n const { default: PhotoSwipeLightbox } =\n await import('photoswipe/lightbox')\n\n lightbox.value = new PhotoSwipeLightbox({\n gallery: gallery.value,\n children,\n pswpModule: () => import('photoswipe'),\n loop,\n arrowPrevSVG:\n '<svg aria-hidden=\"true\" class=\"pswp__icn\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#ffffff\" d=\"m10.828 12l4.95 4.95l-1.414 1.415L8 12l6.364-6.364l1.414 1.414z\"/></svg>',\n arrowNextSVG:\n '<svg aria-hidden=\"true\" class=\"pswp__icn\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#ffffff\" d=\"m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z\"/></svg>',\n closeSVG:\n '<svg aria-hidden=\"true\" class=\"pswp__icn\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#ffffff\" d=\"m12 10.587l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.949 4.95l-1.414-1.415l4.95-4.95l-4.95-4.95L7.05 5.638z\"/></svg>',\n zoomSVG:\n '<svg aria-hidden=\"true\" class=\"pswp__icn\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><g class=\"pswp__icn--zoom-in\"><path fill=\"#ffffff\" d=\"m18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617m-2.006-.742A6.98 6.98 0 0 0 18 11c0-3.867-3.133-7-7-7s-7 3.133-7 7s3.133 7 7 7a6.98 6.98 0 0 0 4.875-1.975zM10 10V7h2v3h3v2h-3v3h-2v-3H7v-2z\"/></g><g class=\"pswp__icn--zoom-out\"><path fill=\"#ffffff\" d=\"m18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617m-2.006-.742A6.98 6.98 0 0 0 18 11c0-3.867-3.133-7-7-7s-7 3.133-7 7s3.133 7 7 7a6.98 6.98 0 0 0 4.875-1.975zM7 10h8v2H7z\"/></g></svg>',\n })\n\n if (openInNewTab || downloadable) {\n lightbox.value.on('uiRegister', () => {\n const ui = lightbox.value!.pswp?.ui\n if (!ui) {\n return\n }\n\n if (openInNewTab) {\n ui.registerElement({\n name: 'open-in-new-tab-button',\n order: 8,\n isButton: true,\n html: '<svg aria-hidden=\"true\" class=\"pswp__icn\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#ffffff\" d=\"M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3z\"/></svg>',\n title: 'Open in new tab',\n onClick: (_, __, pswp) => {\n const url = getCurrentSlideUrl(pswp)\n if (url) {\n window.open(\n url,\n '_blank',\n 'noopener,noreferrer',\n )\n }\n },\n })\n }\n\n if (downloadable) {\n ui.registerElement({\n name: 'download-button',\n order: 9,\n isButton: true,\n html: '<svg aria-hidden=\"true\" class=\"pswp__icn\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#ffffff\" d=\"M3 19h18v2H3zm10-5.828L19.071 7.1l1.414 1.414L12 17L3.515 8.515L4.929 7.1L11 13.173V2h2z\"/></svg>',\n title: 'Download',\n onClick: (_, __, pswp) => {\n const url = getCurrentSlideUrl(pswp)\n if (url) {\n downloadImage(url)\n }\n },\n })\n }\n })\n }\n\n lightbox.value.init()\n }\n\n onBeforeUnmount(() => {\n lightbox.value?.destroy()\n lightbox.value = null\n })\n\n return { lightbox, init }\n}\n\n// ---------------------------------------------------------------------------\n// Image size preloading\n// ---------------------------------------------------------------------------\n\nexport interface UseImageSizesReturn {\n preload: (\n images: Array<{ url: string; width?: number; height?: number }>,\n ) => void\n getSize: (url: string) => { width: number; height: number }\n}\n\n/**\n * Preloads natural image dimensions so PhotoSwipe can size its slides correctly.\n * When `width`/`height` are already provided they are used as-is;\n * otherwise the image is loaded in the background to read `naturalWidth`/`naturalHeight`.\n */\nexport function useImageSizes(): UseImageSizesReturn {\n const sizes = ref(new Map<string, { width: number; height: number }>())\n\n const preload = (\n images: Array<{ url: string; width?: number; height?: number }>,\n ) => {\n for (const image of images) {\n if (image.width && image.height) {\n sizes.value.set(image.url, {\n width: image.width,\n height: image.height,\n })\n continue\n }\n const img = new Image()\n img.onload = () => {\n sizes.value.set(image.url, {\n width: img.naturalWidth,\n height: img.naturalHeight,\n })\n }\n img.src = image.url\n }\n }\n\n const getSize = (url: string) => sizes.value.get(url) ?? DEFAULT_IMAGE_SIZE\n\n return { preload, getSize }\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getCurrentSlideUrl(pswp: PhotoSwipe): string | undefined {\n return (\n pswp.currSlide?.data?.src ??\n pswp.currSlide?.data?.element\n ?.querySelector('img')\n ?.getAttribute('src') ??\n pswp.currSlide?.data?.element\n ?.querySelector('source')\n ?.getAttribute('srcset') ??\n pswp.currSlide?.data?.element?.getAttribute('src') ??\n undefined\n )\n}\n\n/**\n * Triggers a client-side download for an image URL.\n *\n * For backend media URLs (.../media/:file/view), navigates to the\n * corresponding /download endpoint which redirects to an Azure SAS URL\n * with `Content-Disposition: attachment` — no CORS issues.\n *\n * For blob: URLs (in-session uploads), uses the fetch → blob approach.\n *\n * For data: URLs (inline SVGs, etc.), use the download attribute.\n *\n * Falls back to opening in a new tab for all other cases.\n */\nfunction downloadImage(url: string): void {\n const downloadUrl = toDownloadUrl(url)\n\n const anchor = document.createElement('a')\n anchor.href = downloadUrl\n anchor.target = '_blank'\n anchor.rel = 'noopener noreferrer'\n // `download` attribute works for same-origin, data: and blob: URLs; for\n // cross-origin it is ignored but the browser still follows Content-Disposition.\n anchor.download = getFilenameFromUrl(url)\n document.body.appendChild(anchor)\n anchor.click()\n document.body.removeChild(anchor)\n}\n\n/**\n * Converts a `/view` media URL to its `/download` counterpart.\n * Leaves blob:, data: and all other URLs untouched.\n */\nfunction toDownloadUrl(url: string): string {\n return url.replace(/\\/view(\\?|$)/, '/download$1')\n}\n\nfunction getFilenameFromUrl(url: string): string {\n if (url.startsWith('data:image/svg+xml')) {\n return 'diagram.svg'\n }\n if (url.startsWith('data:')) {\n const mime = url.split(':')[1].split(';')[0]\n const ext = mime.split('/')[1] || 'bin'\n return `image.${ext}`\n }\n try {\n const pathname = new URL(url).pathname\n const name = pathname.split('/').pop()\n return name && name.includes('.') ? name : 'image'\n } catch {\n return 'image'\n }\n}\n\nlet overridesInjected = false\n\n/**\n * Injects a one-time `<style>` into `document.head` that raises\n * PhotoSwipe's z-index above any host UI (e.g. floating chat widgets\n * that use `z-index: 2147483647`).\n */\nfunction injectPhotoSwipeOverrides(): void {\n if (overridesInjected) {\n return\n }\n overridesInjected = true\n const style = document.createElement('style')\n style.textContent = [\n '.pswp__counter { font-family: sans-serif; }',\n '.pswp { z-index: 2147483647 !important; }',\n '.pswp__icn { width: 20px; height: 20px; }',\n '.pswp__button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }',\n '.pswp__icn--zoom-out { display: none; }',\n '.pswp--zoomed-in .pswp__icn--zoom-in { display: none; }',\n '.pswp--zoomed-in .pswp__icn--zoom-out { display: block; }',\n '.pswp__button--arrow .pswp__icn {left: auto; right: auto; width: 40px; height: 40px; transform: none; margin-top: -20px; }',\n ].join(' ')\n document.head.appendChild(style)\n}\n","<script lang=\"ts\" setup>\n import { computed, ref, onMounted } from 'vue'\n import { useLightbox } from '../composables/useLightbox'\n\n const props = defineProps<{\n mediaType: string\n url: string\n filename?: string\n /** Size in bytes, when known (e.g. local uploads). */\n size?: number\n loading?: boolean\n error?: string\n removable?: boolean\n /**\n * Dense layout for the composer: a small square thumbnail / slim row,\n * without the metadata caption. The full card is reserved for the\n * message log where the details matter.\n */\n compact?: boolean\n }>()\n\n defineEmits<{\n remove: []\n }>()\n\n const isImage = computed(() => props.mediaType.startsWith('image/'))\n\n // --- File-type identity (icon + accent + human kind label) ---\n\n const extension = computed(() => {\n const name = props.filename ?? ''\n const dot = name.lastIndexOf('.')\n return dot > 0 ? name.slice(dot + 1).toLowerCase() : ''\n })\n\n // mediaType subtype, e.g. \"pdf\" from \"application/pdf\"\n const subtype = computed(\n () => props.mediaType.split('/')[1]?.split(';')[0] ?? '',\n )\n\n type FileKind = {\n icon: string\n // CSS color driving the icon glyph + tile tint\n accent: string\n label: string\n }\n\n const KINDS: Array<{ test: RegExp; kind: FileKind }> = [\n {\n test: /pdf/,\n kind: {\n icon: 'ri:file-pdf-2-line',\n accent: '#e2483d',\n label: 'PDF',\n },\n },\n {\n // Match Word specifically: the generic `document` substring also\n // appears in the XLSX/PPTX OOXML mime types (…officedocument…), so\n // matching it here would mis-label spreadsheets/decks as Word.\n test: /msword|wordprocessingml/,\n kind: {\n icon: 'ri:file-word-2-line',\n accent: '#2b7de9',\n label: 'Word',\n },\n },\n {\n test: /sheet|excel|csv/,\n kind: {\n icon: 'ri:file-excel-2-line',\n accent: '#1f9d57',\n label: 'Spreadsheet',\n },\n },\n {\n test: /presentation|powerpoint/,\n kind: {\n icon: 'ri:file-ppt-2-line',\n accent: '#d98324',\n label: 'Presentation',\n },\n },\n {\n test: /zip|compressed|x-7z|x-rar|x-tar|gzip/,\n kind: {\n icon: 'ri:file-zip-line',\n accent: '#c08a1e',\n label: 'Archive',\n },\n },\n {\n test: /^audio\\//,\n kind: {\n icon: 'ri:file-music-line',\n accent: '#8b5cf6',\n label: 'Audio',\n },\n },\n {\n test: /^video\\//,\n kind: {\n icon: 'ri:film-line',\n accent: '#6366f1',\n label: 'Video',\n },\n },\n {\n test: /json|javascript|typescript|xml|html|x-sh|x-python/,\n kind: {\n icon: 'ri:file-code-line',\n accent: '#0d9488',\n label: 'Code',\n },\n },\n {\n test: /^text\\//,\n kind: {\n icon: 'ri:file-text-line',\n accent: '#64748b',\n label: 'Text',\n },\n },\n ]\n\n const fileKind = computed<FileKind>(() => {\n const haystack = `${props.mediaType} ${extension.value}`\n for (const { test, kind } of KINDS) {\n if (test.test(haystack)) {\n return kind\n }\n }\n return {\n icon: 'ri:file-line',\n accent: '#64748b',\n label: 'File',\n }\n })\n\n // Short type tag shown in the meta line: prefer the real extension, fall\n // back to the mime subtype, then the generic kind label.\n const typeTag = computed(() =>\n (\n extension.value ||\n subtype.value ||\n fileKind.value.label\n ).toUpperCase(),\n )\n\n // --- Size & dimensions ---\n\n const formattedSize = computed(() => {\n const bytes = props.size\n if (bytes === undefined || bytes < 0) {\n return undefined\n }\n if (bytes < 1024) {\n return `${bytes} B`\n }\n const units = ['KB', 'MB', 'GB', 'TB']\n let value = bytes / 1024\n let unitIndex = 0\n while (value >= 1024 && unitIndex < units.length - 1) {\n value /= 1024\n unitIndex += 1\n }\n return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unitIndex]}`\n })\n\n // Thumbnail load lifecycle. Driving the spinner and the error fallback\n // off the real <img> events (not a second background fetch) means the\n // image is requested exactly once and reuses the browser cache on any\n // later re-render, instead of re-downloading every time the message list\n // repaints.\n // Not `useImageFallback`: this tile also needs `loading` vs `loaded` and the\n // decoded dimensions, cached across remounts, so the error flag is one field\n // of a richer per-url entry rather than a standalone broken-url set.\n type ThumbStatus = 'loading' | 'loaded' | 'error'\n\n // Module-level, keyed by URL: survives component recreation. In polled\n // views (e.g. admin chat-logs, refreshed every few seconds) the whole\n // message array is replaced on each poll, so this component can be torn\n // down and rebuilt. Seeding from the cache means a URL that already\n // decoded starts in `loaded` (no spinner flash, no re-decode) instead of\n // flickering back through `loading`. This is a client-side, per-session\n // cache (no server/Redis involved); bounded to a max size so a long-lived\n // session browsing many images can't grow it without limit — the oldest\n // entry is evicted first (Map preserves insertion order).\n type ThumbEntry = {\n status: ThumbStatus\n dimensions?: { width: number; height: number }\n }\n const THUMB_CACHE_MAX = 300\n const thumbCache = new Map<string, ThumbEntry>()\n const setThumbCache = (url: string, entry: ThumbEntry) => {\n // Re-insert to mark as most-recently used, then trim from the front.\n thumbCache.delete(url)\n thumbCache.set(url, entry)\n if (thumbCache.size > THUMB_CACHE_MAX) {\n thumbCache.delete(thumbCache.keys().next().value as string)\n }\n }\n\n const cached = thumbCache.get(props.url)\n const thumbStatus = ref<ThumbStatus>(cached?.status ?? 'loading')\n\n // Natural pixel dimensions, captured once the thumbnail decodes. Doubles\n // as the size hint PhotoSwipe needs for its slide (falls back until known).\n const dimensions = ref<{ width: number; height: number } | undefined>(\n cached?.dimensions,\n )\n const onImageLoad = (event: Event) => {\n const img = event.target as HTMLImageElement\n if (img.naturalWidth && img.naturalHeight) {\n dimensions.value = {\n width: img.naturalWidth,\n height: img.naturalHeight,\n }\n }\n thumbStatus.value = 'loaded'\n setThumbCache(props.url, {\n status: 'loaded',\n dimensions: dimensions.value,\n })\n }\n const onImageError = () => {\n thumbStatus.value = 'error'\n setThumbCache(props.url, { status: 'error' })\n }\n\n const pswpSize = computed(() => dimensions.value ?? DEFAULT_PSWP_SIZE)\n\n // Meta fragments joined with \" · \" for the caption / doc subtitle.\n const imageMeta = computed(() =>\n [\n dimensions.value &&\n `${dimensions.value.width}×${dimensions.value.height}`,\n formattedSize.value,\n ].filter(Boolean),\n )\n const docMeta = computed(() =>\n [typeTag.value, formattedSize.value].filter(Boolean),\n )\n\n // --- Lightbox ---\n\n // Slide size PhotoSwipe assumes before the real dimensions are known.\n const DEFAULT_PSWP_SIZE = { width: 1200, height: 800 }\n\n const galleryRef = ref<HTMLElement>()\n const { init } = useLightbox({ gallery: galleryRef, loop: false })\n\n onMounted(async () => {\n if (!isImage.value) {\n return\n }\n await init()\n })\n</script>\n\n<template>\n \n <figure\n v-if=\"isImage\"\n class=\"pk-chatbot-file-preview pk-chatbot-file-preview--image\"\n :class=\"{ 'pk-chatbot-file-preview--compact': compact }\">\n <div ref=\"galleryRef\" class=\"pk-chatbot-file-preview__thumb-wrap\">\n <a\n :href=\"url\"\n :data-pswp-src=\"url\"\n :data-pswp-width=\"pswpSize.width\"\n :data-pswp-height=\"pswpSize.height\"\n :data-pswp-caption=\"filename ?? ''\"\n class=\"pk-chatbot-file-preview__thumb-link\"\n :aria-label=\"filename ?? $t('label.file')\">\n <img\n v-show=\"thumbStatus === 'loaded'\"\n :src=\"url\"\n :alt=\"filename\"\n decoding=\"async\"\n class=\"pk-chatbot-file-preview__thumb\"\n @load=\"onImageLoad\"\n @error=\"onImageError\" />\n </a>\n \n <span\n v-if=\"loading || thumbStatus === 'loading'\"\n class=\"pk-chatbot-file-preview__status pk-chatbot-file-preview__status--overlay\">\n <VvIcon name=\"line-md:loading-loop\" />\n </span>\n \n <span\n v-else-if=\"thumbStatus === 'error'\"\n class=\"pk-chatbot-file-preview__status pk-chatbot-file-preview__status--overlay pk-chatbot-file-preview__status--error\">\n <VvIcon name=\"ri:image-2-line\" />\n </span>\n </div>\n <figcaption v-if=\"!compact\" class=\"pk-chatbot-file-preview__caption\">\n <span\n v-if=\"filename\"\n class=\"pk-chatbot-file-preview__name\"\n :title=\"filename\"\n >{{ filename }}</span\n >\n <span class=\"pk-chatbot-file-preview__meta\">\n <span\n v-if=\"error\"\n class=\"pk-chatbot-file-preview__error\"\n :title=\"error\">\n <VvIcon name=\"ri:error-warning-line\" />\n {{ error }}\n </span>\n <template v-else>{{ imageMeta.join(' · ') }}</template>\n </span>\n </figcaption>\n <button\n v-if=\"removable && !loading\"\n type=\"button\"\n class=\"pk-chatbot-file-preview__remove\"\n :title=\"$t('action.remove')\"\n :aria-label=\"$t('action.remove')\"\n @click.prevent=\"$emit('remove')\">\n <VvIcon name=\"ri:close-line\" />\n </button>\n </figure>\n\n \n <div\n v-else\n class=\"pk-chatbot-file-preview pk-chatbot-file-preview--doc\"\n :class=\"{\n 'pk-chatbot-file-preview--error': error,\n 'pk-chatbot-file-preview--compact': compact,\n }\">\n <span\n class=\"pk-chatbot-file-preview__icon-tile\"\n :style=\"{ '--file-accent': fileKind.accent }\">\n <VvIcon\n v-if=\"loading\"\n name=\"line-md:loading-loop\"\n class=\"pk-chatbot-file-preview__icon\" />\n <VvIcon\n v-else\n :name=\"fileKind.icon\"\n class=\"pk-chatbot-file-preview__icon\" />\n </span>\n <span class=\"pk-chatbot-file-preview__body\">\n <span\n v-if=\"filename\"\n class=\"pk-chatbot-file-preview__name\"\n :title=\"filename\"\n >{{ filename }}</span\n >\n <span class=\"pk-chatbot-file-preview__meta\">\n <span\n v-if=\"error\"\n class=\"pk-chatbot-file-preview__error\"\n :title=\"error\">\n <VvIcon name=\"ri:error-warning-line\" />\n {{ error }}\n </span>\n <template v-else>{{ docMeta.join(' · ') }}</template>\n </span>\n </span>\n <a\n v-if=\"!loading && !error && !compact\"\n :href=\"url\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"pk-chatbot-file-preview__open\"\n :title=\"$t('action.download')\"\n :aria-label=\"`${$t('action.download')}${filename ? ` — ${filename}` : ''}`\">\n <VvIcon name=\"ri:download-2-line\" />\n </a>\n <button\n v-if=\"removable && !loading\"\n type=\"button\"\n class=\"pk-chatbot-file-preview__remove\"\n :class=\"{ 'pk-chatbot-file-preview__remove--inline': !compact }\"\n :title=\"$t('action.remove')\"\n :aria-label=\"$t('action.remove')\"\n @click=\"$emit('remove')\">\n <VvIcon name=\"ri:close-line\" />\n </button>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-chatbot-file-preview {\n // Concentric radii: outer card and inner tiles share an 8px step.\n --file-radius: var(--rounded-lg, 12px);\n position: relative;\n max-width: 280px;\n background-color: var(--color-surface-1);\n border: 1px solid var(--color-surface-3);\n border-radius: var(--file-radius);\n color: var(--color-word-2);\n font-size: var(--text-12);\n\n &--error {\n border-color: var(--color-danger);\n }\n\n // --- Document card ---\n &--doc {\n display: flex;\n align-items: center;\n gap: var(--spacing-8);\n padding: var(--spacing-8);\n min-width: 0;\n transition:\n border-color 0.18s var(--ease-out),\n background-color 0.18s var(--ease-out),\n box-shadow 0.18s var(--ease-out);\n\n &:hover {\n border-color: var(--color-surface-4);\n background-color: var(--color-surface-2);\n box-shadow: var(--shadow-sm);\n }\n }\n\n &__icon-tile {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--spacing-36);\n height: var(--spacing-36);\n // One step down from the card radius keeps the nested tile concentric.\n border-radius: var(--rounded-md, 6px);\n // Tint derived from the file-type accent; glyph sits at full accent.\n background-color: color-mix(\n in srgb,\n var(--file-accent) 14%,\n transparent\n );\n color: var(--file-accent);\n }\n\n &__icon {\n width: var(--spacing-20);\n height: var(--spacing-20);\n }\n\n &__body {\n display: flex;\n flex-direction: column;\n gap: 1px;\n min-width: 0;\n flex: 1;\n }\n\n &__open {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--spacing-28);\n height: var(--spacing-28);\n margin-inline-start: var(--spacing-4);\n border-radius: var(--rounded);\n color: var(--color-word-3);\n text-decoration: none;\n opacity: 0;\n transition:\n opacity 0.18s var(--ease-out),\n color 0.18s var(--ease-out),\n background-color 0.18s var(--ease-out);\n\n &:hover {\n background-color: var(--color-surface-3);\n color: var(--color-word-1);\n }\n }\n\n &--doc:hover &__open,\n &--doc:focus-within &__open {\n opacity: 1;\n }\n\n // Touch devices have no hover: keep the open affordance visible.\n @media (hover: none) {\n &--doc &__open {\n opacity: 1;\n }\n }\n\n // --- Image card ---\n &--image {\n display: inline-flex;\n flex-direction: column;\n margin: 0;\n }\n\n &__thumb-wrap {\n position: relative;\n display: flex;\n // Fixed box: the card claims its final footprint before the\n // image decodes, so the message log never shifts on load.\n width: 280px;\n max-width: 100%;\n height: 200px;\n background-color: var(--color-surface);\n border-radius: var(--file-radius);\n overflow: hidden;\n }\n\n &__thumb-link {\n display: flex;\n width: 100%;\n height: 100%;\n cursor: pointer;\n }\n\n &__thumb {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n &__caption {\n display: flex;\n flex-direction: column;\n gap: 1px;\n padding: var(--spacing-8);\n min-width: 0;\n }\n\n &__name {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: var(--font-medium, 500);\n color: var(--color-word-1);\n }\n\n &__meta {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: var(--text-10);\n line-height: var(--leading-normal);\n // Reserve the line even while empty: image dimensions arrive\n // only after decode and must not grow the caption.\n min-height: 1.4em;\n color: var(--color-word-4);\n // Stable column for the dimensions/size figures.\n font-variant-numeric: tabular-nums;\n }\n\n &__error {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-4);\n color: var(--color-danger);\n\n .vv-icon {\n flex-shrink: 0;\n }\n }\n\n &__status {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n .vv-icon {\n width: var(--spacing-32);\n height: var(--spacing-32);\n }\n\n &--overlay {\n position: absolute;\n inset: 0;\n background-color: color-mix(\n in srgb,\n var(--color-surface-1) 70%,\n transparent\n );\n color: var(--color-word-1);\n }\n\n &--error {\n color: var(--color-word-4);\n }\n }\n\n // --- Remove button (input context) ---\n &__remove {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n display: flex;\n align-items: center;\n justify-content: center;\n // Visible glyph is 18px but the hit area stays a comfortable 28px.\n width: var(--spacing-28);\n height: var(--spacing-28);\n padding: 0;\n border: none;\n border-radius: var(--rounded-full, 9999px);\n background-color: color-mix(\n in srgb,\n var(--color-surface-1) 85%,\n transparent\n );\n color: var(--color-word-2);\n cursor: pointer;\n line-height: 1;\n box-shadow: var(--shadow-sm);\n transition:\n background-color 0.18s var(--ease-out),\n color 0.18s var(--ease-out),\n scale 0.12s var(--ease-out);\n\n &:hover {\n background-color: var(--color-surface-2);\n color: var(--color-word-1);\n }\n\n &:active {\n scale: 0.96;\n }\n\n // Inside the document row the button rides inline, not overlaid\n // (size is inherited from the base).\n &--inline {\n position: static;\n flex-shrink: 0;\n box-shadow: none;\n background-color: transparent;\n color: var(--color-word-4);\n\n &:hover {\n background-color: var(--color-surface-3);\n color: var(--color-word-1);\n }\n }\n }\n\n // --- Compact (composer) chips ---\n // ChatGPT/Gemini-style: every attachment is the SAME height and carries\n // an always-visible round remove control in the top-right corner — no\n // hover-revealed actions, no size mismatch between image and file chips.\n &--compact {\n // Shared chip height so image and file chips align in the row.\n --chip-size: var(--spacing-56);\n max-width: 240px;\n\n &.pk-chatbot-file-preview--image {\n width: var(--chip-size);\n height: var(--chip-size);\n border-radius: var(--rounded-md, 6px);\n }\n\n // Fill the square; the root's `overflow: hidden` rounds the corners.\n .pk-chatbot-file-preview__thumb-wrap,\n .pk-chatbot-file-preview__thumb-link {\n width: 100%;\n height: 100%;\n }\n\n &.pk-chatbot-file-preview--doc {\n height: var(--chip-size);\n gap: var(--spacing-8);\n padding: var(--spacing-8);\n // Reserve room so the corner remove button never overlaps the\n // name/meta text.\n padding-inline-end: var(--spacing-28);\n }\n\n // Square icon tile that fills the chip height, so file chips read at\n // the same scale as image thumbnails.\n .pk-chatbot-file-preview__icon-tile {\n align-self: stretch;\n width: auto;\n height: auto;\n aspect-ratio: 1;\n }\n\n .pk-chatbot-file-preview__icon {\n width: var(--spacing-20);\n height: var(--spacing-20);\n }\n }\n\n // Always-visible round remove control in the top-right corner. Sits\n // just inside the chip (an ancestor clips overflow), bigger than before,\n // with an extended hit area for easy tapping.\n &--compact &__remove {\n top: var(--spacing-4);\n right: var(--spacing-4);\n width: var(--spacing-24);\n height: var(--spacing-24);\n border: 1px solid var(--color-surface-4);\n background-color: var(--color-surface);\n color: var(--color-word-1);\n font-size: var(--text-16);\n box-shadow: var(--shadow-sm);\n\n // Comfortable touch/click target beyond the small visible glyph.\n &::after {\n content: '';\n position: absolute;\n inset: calc(-1 * var(--spacing-4));\n }\n\n &:hover {\n background-color: var(--color-surface-2);\n color: var(--color-word-1);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n &--doc,\n &__open,\n &__remove {\n transition: none;\n }\n }\n }\n</style>\n","<script lang=\"ts\" setup>\n import { computed, ref, onMounted } from 'vue'\n import { useLightbox } from '../composables/useLightbox'\n\n const props = defineProps<{\n mediaType: string\n url: string\n filename?: string\n /** Size in bytes, when known (e.g. local uploads). */\n size?: number\n loading?: boolean\n error?: string\n removable?: boolean\n /**\n * Dense layout for the composer: a small square thumbnail / slim row,\n * without the metadata caption. The full card is reserved for the\n * message log where the details matter.\n */\n compact?: boolean\n }>()\n\n defineEmits<{\n remove: []\n }>()\n\n const isImage = computed(() => props.mediaType.startsWith('image/'))\n\n // --- File-type identity (icon + accent + human kind label) ---\n\n const extension = computed(() => {\n const name = props.filename ?? ''\n const dot = name.lastIndexOf('.')\n return dot > 0 ? name.slice(dot + 1).toLowerCase() : ''\n })\n\n // mediaType subtype, e.g. \"pdf\" from \"application/pdf\"\n const subtype = computed(\n () => props.mediaType.split('/')[1]?.split(';')[0] ?? '',\n )\n\n type FileKind = {\n icon: string\n // CSS color driving the icon glyph + tile tint\n accent: string\n label: string\n }\n\n const KINDS: Array<{ test: RegExp; kind: FileKind }> = [\n {\n test: /pdf/,\n kind: {\n icon: 'ri:file-pdf-2-line',\n accent: '#e2483d',\n label: 'PDF',\n },\n },\n {\n // Match Word specifically: the generic `document` substring also\n // appears in the XLSX/PPTX OOXML mime types (…officedocument…), so\n // matching it here would mis-label spreadsheets/decks as Word.\n test: /msword|wordprocessingml/,\n kind: {\n icon: 'ri:file-word-2-line',\n accent: '#2b7de9',\n label: 'Word',\n },\n },\n {\n test: /sheet|excel|csv/,\n kind: {\n icon: 'ri:file-excel-2-line',\n accent: '#1f9d57',\n label: 'Spreadsheet',\n },\n },\n {\n test: /presentation|powerpoint/,\n kind: {\n icon: 'ri:file-ppt-2-line',\n accent: '#d98324',\n label: 'Presentation',\n },\n },\n {\n test: /zip|compressed|x-7z|x-rar|x-tar|gzip/,\n kind: {\n icon: 'ri:file-zip-line',\n accent: '#c08a1e',\n label: 'Archive',\n },\n },\n {\n test: /^audio\\//,\n kind: {\n icon: 'ri:file-music-line',\n accent: '#8b5cf6',\n label: 'Audio',\n },\n },\n {\n test: /^video\\//,\n kind: {\n icon: 'ri:film-line',\n accent: '#6366f1',\n label: 'Video',\n },\n },\n {\n test: /json|javascript|typescript|xml|html|x-sh|x-python/,\n kind: {\n icon: 'ri:file-code-line',\n accent: '#0d9488',\n label: 'Code',\n },\n },\n {\n test: /^text\\//,\n kind: {\n icon: 'ri:file-text-line',\n accent: '#64748b',\n label: 'Text',\n },\n },\n ]\n\n const fileKind = computed<FileKind>(() => {\n const haystack = `${props.mediaType} ${extension.value}`\n for (const { test, kind } of KINDS) {\n if (test.test(haystack)) {\n return kind\n }\n }\n return {\n icon: 'ri:file-line',\n accent: '#64748b',\n label: 'File',\n }\n })\n\n // Short type tag shown in the meta line: prefer the real extension, fall\n // back to the mime subtype, then the generic kind label.\n const typeTag = computed(() =>\n (\n extension.value ||\n subtype.value ||\n fileKind.value.label\n ).toUpperCase(),\n )\n\n // --- Size & dimensions ---\n\n const formattedSize = computed(() => {\n const bytes = props.size\n if (bytes === undefined || bytes < 0) {\n return undefined\n }\n if (bytes < 1024) {\n return `${bytes} B`\n }\n const units = ['KB', 'MB', 'GB', 'TB']\n let value = bytes / 1024\n let unitIndex = 0\n while (value >= 1024 && unitIndex < units.length - 1) {\n value /= 1024\n unitIndex += 1\n }\n return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unitIndex]}`\n })\n\n // Thumbnail load lifecycle. Driving the spinner and the error fallback\n // off the real <img> events (not a second background fetch) means the\n // image is requested exactly once and reuses the browser cache on any\n // later re-render, instead of re-downloading every time the message list\n // repaints.\n // Not `useImageFallback`: this tile also needs `loading` vs `loaded` and the\n // decoded dimensions, cached across remounts, so the error flag is one field\n // of a richer per-url entry rather than a standalone broken-url set.\n type ThumbStatus = 'loading' | 'loaded' | 'error'\n\n // Module-level, keyed by URL: survives component recreation. In polled\n // views (e.g. admin chat-logs, refreshed every few seconds) the whole\n // message array is replaced on each poll, so this component can be torn\n // down and rebuilt. Seeding from the cache means a URL that already\n // decoded starts in `loaded` (no spinner flash, no re-decode) instead of\n // flickering back through `loading`. This is a client-side, per-session\n // cache (no server/Redis involved); bounded to a max size so a long-lived\n // session browsing many images can't grow it without limit — the oldest\n // entry is evicted first (Map preserves insertion order).\n type ThumbEntry = {\n status: ThumbStatus\n dimensions?: { width: number; height: number }\n }\n const THUMB_CACHE_MAX = 300\n const thumbCache = new Map<string, ThumbEntry>()\n const setThumbCache = (url: string, entry: ThumbEntry) => {\n // Re-insert to mark as most-recently used, then trim from the front.\n thumbCache.delete(url)\n thumbCache.set(url, entry)\n if (thumbCache.size > THUMB_CACHE_MAX) {\n thumbCache.delete(thumbCache.keys().next().value as string)\n }\n }\n\n const cached = thumbCache.get(props.url)\n const thumbStatus = ref<ThumbStatus>(cached?.status ?? 'loading')\n\n // Natural pixel dimensions, captured once the thumbnail decodes. Doubles\n // as the size hint PhotoSwipe needs for its slide (falls back until known).\n const dimensions = ref<{ width: number; height: number } | undefined>(\n cached?.dimensions,\n )\n const onImageLoad = (event: Event) => {\n const img = event.target as HTMLImageElement\n if (img.naturalWidth && img.naturalHeight) {\n dimensions.value = {\n width: img.naturalWidth,\n height: img.naturalHeight,\n }\n }\n thumbStatus.value = 'loaded'\n setThumbCache(props.url, {\n status: 'loaded',\n dimensions: dimensions.value,\n })\n }\n const onImageError = () => {\n thumbStatus.value = 'error'\n setThumbCache(props.url, { status: 'error' })\n }\n\n const pswpSize = computed(() => dimensions.value ?? DEFAULT_PSWP_SIZE)\n\n // Meta fragments joined with \" · \" for the caption / doc subtitle.\n const imageMeta = computed(() =>\n [\n dimensions.value &&\n `${dimensions.value.width}×${dimensions.value.height}`,\n formattedSize.value,\n ].filter(Boolean),\n )\n const docMeta = computed(() =>\n [typeTag.value, formattedSize.value].filter(Boolean),\n )\n\n // --- Lightbox ---\n\n // Slide size PhotoSwipe assumes before the real dimensions are known.\n const DEFAULT_PSWP_SIZE = { width: 1200, height: 800 }\n\n const galleryRef = ref<HTMLElement>()\n const { init } = useLightbox({ gallery: galleryRef, loop: false })\n\n onMounted(async () => {\n if (!isImage.value) {\n return\n }\n await init()\n })\n</script>\n\n<template>\n \n <figure\n v-if=\"isImage\"\n class=\"pk-chatbot-file-preview pk-chatbot-file-preview--image\"\n :class=\"{ 'pk-chatbot-file-preview--compact': compact }\">\n <div ref=\"galleryRef\" class=\"pk-chatbot-file-preview__thumb-wrap\">\n <a\n :href=\"url\"\n :data-pswp-src=\"url\"\n :data-pswp-width=\"pswpSize.width\"\n :data-pswp-height=\"pswpSize.height\"\n :data-pswp-caption=\"filename ?? ''\"\n class=\"pk-chatbot-file-preview__thumb-link\"\n :aria-label=\"filename ?? $t('label.file')\">\n <img\n v-show=\"thumbStatus === 'loaded'\"\n :src=\"url\"\n :alt=\"filename\"\n decoding=\"async\"\n class=\"pk-chatbot-file-preview__thumb\"\n @load=\"onImageLoad\"\n @error=\"onImageError\" />\n </a>\n \n <span\n v-if=\"loading || thumbStatus === 'loading'\"\n class=\"pk-chatbot-file-preview__status pk-chatbot-file-preview__status--overlay\">\n <VvIcon name=\"line-md:loading-loop\" />\n </span>\n \n <span\n v-else-if=\"thumbStatus === 'error'\"\n class=\"pk-chatbot-file-preview__status pk-chatbot-file-preview__status--overlay pk-chatbot-file-preview__status--error\">\n <VvIcon name=\"ri:image-2-line\" />\n </span>\n </div>\n <figcaption v-if=\"!compact\" class=\"pk-chatbot-file-preview__caption\">\n <span\n v-if=\"filename\"\n class=\"pk-chatbot-file-preview__name\"\n :title=\"filename\"\n >{{ filename }}</span\n >\n <span class=\"pk-chatbot-file-preview__meta\">\n <span\n v-if=\"error\"\n class=\"pk-chatbot-file-preview__error\"\n :title=\"error\">\n <VvIcon name=\"ri:error-warning-line\" />\n {{ error }}\n </span>\n <template v-else>{{ imageMeta.join(' · ') }}</template>\n </span>\n </figcaption>\n <button\n v-if=\"removable && !loading\"\n type=\"button\"\n class=\"pk-chatbot-file-preview__remove\"\n :title=\"$t('action.remove')\"\n :aria-label=\"$t('action.remove')\"\n @click.prevent=\"$emit('remove')\">\n <VvIcon name=\"ri:close-line\" />\n </button>\n </figure>\n\n \n <div\n v-else\n class=\"pk-chatbot-file-preview pk-chatbot-file-preview--doc\"\n :class=\"{\n 'pk-chatbot-file-preview--error': error,\n 'pk-chatbot-file-preview--compact': compact,\n }\">\n <span\n class=\"pk-chatbot-file-preview__icon-tile\"\n :style=\"{ '--file-accent': fileKind.accent }\">\n <VvIcon\n v-if=\"loading\"\n name=\"line-md:loading-loop\"\n class=\"pk-chatbot-file-preview__icon\" />\n <VvIcon\n v-else\n :name=\"fileKind.icon\"\n class=\"pk-chatbot-file-preview__icon\" />\n </span>\n <span class=\"pk-chatbot-file-preview__body\">\n <span\n v-if=\"filename\"\n class=\"pk-chatbot-file-preview__name\"\n :title=\"filename\"\n >{{ filename }}</span\n >\n <span class=\"pk-chatbot-file-preview__meta\">\n <span\n v-if=\"error\"\n class=\"pk-chatbot-file-preview__error\"\n :title=\"error\">\n <VvIcon name=\"ri:error-warning-line\" />\n {{ error }}\n </span>\n <template v-else>{{ docMeta.join(' · ') }}</template>\n </span>\n </span>\n <a\n v-if=\"!loading && !error && !compact\"\n :href=\"url\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"pk-chatbot-file-preview__open\"\n :title=\"$t('action.download')\"\n :aria-label=\"`${$t('action.download')}${filename ? ` — ${filename}` : ''}`\">\n <VvIcon name=\"ri:download-2-line\" />\n </a>\n <button\n v-if=\"removable && !loading\"\n type=\"button\"\n class=\"pk-chatbot-file-preview__remove\"\n :class=\"{ 'pk-chatbot-file-preview__remove--inline': !compact }\"\n :title=\"$t('action.remove')\"\n :aria-label=\"$t('action.remove')\"\n @click=\"$emit('remove')\">\n <VvIcon name=\"ri:close-line\" />\n </button>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-chatbot-file-preview {\n // Concentric radii: outer card and inner tiles share an 8px step.\n --file-radius: var(--rounded-lg, 12px);\n position: relative;\n max-width: 280px;\n background-color: var(--color-surface-1);\n border: 1px solid var(--color-surface-3);\n border-radius: var(--file-radius);\n color: var(--color-word-2);\n font-size: var(--text-12);\n\n &--error {\n border-color: var(--color-danger);\n }\n\n // --- Document card ---\n &--doc {\n display: flex;\n align-items: center;\n gap: var(--spacing-8);\n padding: var(--spacing-8);\n min-width: 0;\n transition:\n border-color 0.18s var(--ease-out),\n background-color 0.18s var(--ease-out),\n box-shadow 0.18s var(--ease-out);\n\n &:hover {\n border-color: var(--color-surface-4);\n background-color: var(--color-surface-2);\n box-shadow: var(--shadow-sm);\n }\n }\n\n &__icon-tile {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--spacing-36);\n height: var(--spacing-36);\n // One step down from the card radius keeps the nested tile concentric.\n border-radius: var(--rounded-md, 6px);\n // Tint derived from the file-type accent; glyph sits at full accent.\n background-color: color-mix(\n in srgb,\n var(--file-accent) 14%,\n transparent\n );\n color: var(--file-accent);\n }\n\n &__icon {\n width: var(--spacing-20);\n height: var(--spacing-20);\n }\n\n &__body {\n display: flex;\n flex-direction: column;\n gap: 1px;\n min-width: 0;\n flex: 1;\n }\n\n &__open {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--spacing-28);\n height: var(--spacing-28);\n margin-inline-start: var(--spacing-4);\n border-radius: var(--rounded);\n color: var(--color-word-3);\n text-decoration: none;\n opacity: 0;\n transition:\n opacity 0.18s var(--ease-out),\n color 0.18s var(--ease-out),\n background-color 0.18s var(--ease-out);\n\n &:hover {\n background-color: var(--color-surface-3);\n color: var(--color-word-1);\n }\n }\n\n &--doc:hover &__open,\n &--doc:focus-within &__open {\n opacity: 1;\n }\n\n // Touch devices have no hover: keep the open affordance visible.\n @media (hover: none) {\n &--doc &__open {\n opacity: 1;\n }\n }\n\n // --- Image card ---\n &--image {\n display: inline-flex;\n flex-direction: column;\n margin: 0;\n }\n\n &__thumb-wrap {\n position: relative;\n display: flex;\n // Fixed box: the card claims its final footprint before the\n // image decodes, so the message log never shifts on load.\n width: 280px;\n max-width: 100%;\n height: 200px;\n background-color: var(--color-surface);\n border-radius: var(--file-radius);\n overflow: hidden;\n }\n\n &__thumb-link {\n display: flex;\n width: 100%;\n height: 100%;\n cursor: pointer;\n }\n\n &__thumb {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n &__caption {\n display: flex;\n flex-direction: column;\n gap: 1px;\n padding: var(--spacing-8);\n min-width: 0;\n }\n\n &__name {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: var(--font-medium, 500);\n color: var(--color-word-1);\n }\n\n &__meta {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: var(--text-10);\n line-height: var(--leading-normal);\n // Reserve the line even while empty: image dimensions arrive\n // only after decode and must not grow the caption.\n min-height: 1.4em;\n color: var(--color-word-4);\n // Stable column for the dimensions/size figures.\n font-variant-numeric: tabular-nums;\n }\n\n &__error {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-4);\n color: var(--color-danger);\n\n .vv-icon {\n flex-shrink: 0;\n }\n }\n\n &__status {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n .vv-icon {\n width: var(--spacing-32);\n height: var(--spacing-32);\n }\n\n &--overlay {\n position: absolute;\n inset: 0;\n background-color: color-mix(\n in srgb,\n var(--color-surface-1) 70%,\n transparent\n );\n color: var(--color-word-1);\n }\n\n &--error {\n color: var(--color-word-4);\n }\n }\n\n // --- Remove button (input context) ---\n &__remove {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n display: flex;\n align-items: center;\n justify-content: center;\n // Visible glyph is 18px but the hit area stays a comfortable 28px.\n width: var(--spacing-28);\n height: var(--spacing-28);\n padding: 0;\n border: none;\n border-radius: var(--rounded-full, 9999px);\n background-color: color-mix(\n in srgb,\n var(--color-surface-1) 85%,\n transparent\n );\n color: var(--color-word-2);\n cursor: pointer;\n line-height: 1;\n box-shadow: var(--shadow-sm);\n transition:\n background-color 0.18s var(--ease-out),\n color 0.18s var(--ease-out),\n scale 0.12s var(--ease-out);\n\n &:hover {\n background-color: var(--color-surface-2);\n color: var(--color-word-1);\n }\n\n &:active {\n scale: 0.96;\n }\n\n // Inside the document row the button rides inline, not overlaid\n // (size is inherited from the base).\n &--inline {\n position: static;\n flex-shrink: 0;\n box-shadow: none;\n background-color: transparent;\n color: var(--color-word-4);\n\n &:hover {\n background-color: var(--color-surface-3);\n color: var(--color-word-1);\n }\n }\n }\n\n // --- Compact (composer) chips ---\n // ChatGPT/Gemini-style: every attachment is the SAME height and carries\n // an always-visible round remove control in the top-right corner — no\n // hover-revealed actions, no size mismatch between image and file chips.\n &--compact {\n // Shared chip height so image and file chips align in the row.\n --chip-size: var(--spacing-56);\n max-width: 240px;\n\n &.pk-chatbot-file-preview--image {\n width: var(--chip-size);\n height: var(--chip-size);\n border-radius: var(--rounded-md, 6px);\n }\n\n // Fill the square; the root's `overflow: hidden` rounds the corners.\n .pk-chatbot-file-preview__thumb-wrap,\n .pk-chatbot-file-preview__thumb-link {\n width: 100%;\n height: 100%;\n }\n\n &.pk-chatbot-file-preview--doc {\n height: var(--chip-size);\n gap: var(--spacing-8);\n padding: var(--spacing-8);\n // Reserve room so the corner remove button never overlaps the\n // name/meta text.\n padding-inline-end: var(--spacing-28);\n }\n\n // Square icon tile that fills the chip height, so file chips read at\n // the same scale as image thumbnails.\n .pk-chatbot-file-preview__icon-tile {\n align-self: stretch;\n width: auto;\n height: auto;\n aspect-ratio: 1;\n }\n\n .pk-chatbot-file-preview__icon {\n width: var(--spacing-20);\n height: var(--spacing-20);\n }\n }\n\n // Always-visible round remove control in the top-right corner. Sits\n // just inside the chip (an ancestor clips overflow), bigger than before,\n // with an extended hit area for easy tapping.\n &--compact &__remove {\n top: var(--spacing-4);\n right: var(--spacing-4);\n width: var(--spacing-24);\n height: var(--spacing-24);\n border: 1px solid var(--color-surface-4);\n background-color: var(--color-surface);\n color: var(--color-word-1);\n font-size: var(--text-16);\n box-shadow: var(--shadow-sm);\n\n // Comfortable touch/click target beyond the small visible glyph.\n &::after {\n content: '';\n position: absolute;\n inset: calc(-1 * var(--spacing-4));\n }\n\n &:hover {\n background-color: var(--color-surface-2);\n color: var(--color-word-1);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n &--doc,\n &__open,\n &__remove {\n transition: none;\n }\n }\n }\n</style>\n"],"mappings":"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"}

package/dist-vue/_chunks/PkChatbotInput-D8x52cVm.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"PkChatbotInput-D8x52cVm.js","names":["$t","$slots","$n"],"sources":["../../../../node_modules/.pnpm/autosize@6.0.1/node_modules/autosize/dist/autosize.esm.js","../../../../packages/components/src/chat/PkChatButton.vue","../../../../packages/components/src/chat/PkChatButton.vue","../../../../packages/components/src/chat/PkChatbotInput.vue","../../../../packages/components/src/chat/PkChatbotInput.vue"],"sourcesContent":["var e=new Map;function t(t){var o=e.get(t);o&&o.destroy()}function o(t){var o=e.get(t);o&&o.update()}var r=null;\"undefined\"==typeof window?((r=function(e){return e}).destroy=function(e){return e},r.update=function(e){return e}):((r=function(t,o){return t&&Array.prototype.forEach.call(t.length?t:[t],function(t){return function(t){if(t&&t.nodeName&&\"TEXTAREA\"===t.nodeName&&!e.has(t)){var o,r=null,n=window.getComputedStyle(t),i=(o=t.value,function(){a({testForHeightReduction:\"\"===o||!t.value.startsWith(o),restoreTextAlign:null}),o=t.value}),l=function(o){t.removeEventListener(\"autosize:destroy\",l),t.removeEventListener(\"autosize:update\",s),t.removeEventListener(\"input\",i),window.removeEventListener(\"resize\",s),Object.keys(o).forEach(function(e){return t.style[e]=o[e]}),e.delete(t)}.bind(t,{height:t.style.height,resize:t.style.resize,textAlign:t.style.textAlign,overflowY:t.style.overflowY,overflowX:t.style.overflowX,wordWrap:t.style.wordWrap});t.addEventListener(\"autosize:destroy\",l),t.addEventListener(\"autosize:update\",s),t.addEventListener(\"input\",i),window.addEventListener(\"resize\",s),t.style.overflowX=\"hidden\",t.style.wordWrap=\"break-word\",e.set(t,{destroy:l,update:s}),s()}function a(e){var o,i,l=e.restoreTextAlign,s=void 0===l?null:l,d=e.testForHeightReduction,u=void 0===d||d,c=n.overflowY;if(0!==t.scrollHeight&&(\"vertical\"===n.resize?t.style.resize=\"none\":\"both\"===n.resize&&(t.style.resize=\"horizontal\"),u&&(o=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push([e.parentNode,e.parentNode.scrollTop]),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0],o=e[1];t.style.scrollBehavior=\"auto\",t.scrollTop=o,t.style.scrollBehavior=null})}}(t),t.style.height=\"\"),i=\"content-box\"===n.boxSizing?t.scrollHeight-(parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)):t.scrollHeight+parseFloat(n.borderTopWidth)+parseFloat(n.borderBottomWidth),\"none\"!==n.maxHeight&&i>parseFloat(n.maxHeight)?(\"hidden\"===n.overflowY&&(t.style.overflow=\"scroll\"),i=parseFloat(n.maxHeight)):\"hidden\"!==n.overflowY&&(t.style.overflow=\"hidden\"),t.style.height=i+\"px\",s&&(t.style.textAlign=s),o&&o(),r!==i&&(t.dispatchEvent(new Event(\"autosize:resized\",{bubbles:!0})),r=i),c!==n.overflow&&!s)){var v=n.textAlign;\"hidden\"===n.overflow&&(t.style.textAlign=\"start\"===v?\"end\":\"start\"),a({restoreTextAlign:v,testForHeightReduction:!0})}}function s(){a({testForHeightReduction:!0,restoreTextAlign:null})}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},r.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e});var n=r;export default n;\n","<script lang=\"ts\" setup>\n /**\n * The icon button of the chat dock: attach, send and stop in the input,\n * mute and hang up in a live call. One component, because the call bar\n * takes the place of the input and the two must not look like two\n * different pieces of software.\n *\n * Native attributes fall through to the button, so `title`, `disabled` and\n * `aria-pressed` are written by the caller as they would be on a `<button>`.\n */\n withDefaults(\n defineProps<{\n icon: string\n /** Written next to the icon, for an action nobody should have to guess from a glyph. */\n label?: string\n type?: 'button' | 'submit'\n modifiers?: 'danger'\n }>(),\n { label: undefined, type: 'button', modifiers: undefined },\n )\n</script>\n\n<template>\n <button\n class=\"pk-chat-button\"\n :class=\"[\n modifiers ? `pk-chat-button--${modifiers}` : undefined,\n { 'pk-chat-button--labelled': label },\n ]\"\n :type=\"type\">\n <VvIcon :name=\"icon\" class=\"pk-chat-button__icon\" />\n <span v-if=\"label\" class=\"pk-chat-button__label\">{{ label }}</span>\n </button>\n</template>\n\n<style lang=\"scss\">\n .pk-chat-button {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n padding: var(--spacing-4);\n border: none;\n border-radius: var(--rounded);\n background-color: transparent;\n color: var(--color-word-1);\n cursor: pointer;\n transition: var(--transition-colors);\n\n &:hover {\n background-color: var(--color-surface-2);\n }\n\n &:focus-visible {\n outline: 1px solid var(--color-surface-5);\n outline-offset: 0;\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n // A toggle has to survive a glance: a crossed-out glyph alone changes\n // too few pixels to notice mid-sentence.\n &[aria-pressed='true'] {\n background-color: var(--color-surface-3);\n color: var(--color-word);\n }\n\n // A wash of the same red rather than a lighter red behind it: the\n // `lighten-5` step lands close enough to the icon to leave it at about\n // 2:1, which is a button that disappears exactly while it is being\n // pointed at. The tint composites over whatever surface is behind, so\n // it holds in the dark theme too.\n &--danger {\n color: var(--color-danger);\n\n &:hover {\n background-color: color-mix(\n in srgb,\n var(--color-danger) 12%,\n transparent\n );\n }\n }\n\n &--labelled {\n gap: var(--spacing-4);\n padding-inline: var(--spacing-8);\n font-size: var(--text-12);\n }\n\n &__icon {\n display: block;\n width: var(--spacing-20);\n height: var(--spacing-20);\n }\n }\n</style>\n","<script lang=\"ts\" setup>\n /**\n * The icon button of the chat dock: attach, send and stop in the input,\n * mute and hang up in a live call. One component, because the call bar\n * takes the place of the input and the two must not look like two\n * different pieces of software.\n *\n * Native attributes fall through to the button, so `title`, `disabled` and\n * `aria-pressed` are written by the caller as they would be on a `<button>`.\n */\n withDefaults(\n defineProps<{\n icon: string\n /** Written next to the icon, for an action nobody should have to guess from a glyph. */\n label?: string\n type?: 'button' | 'submit'\n modifiers?: 'danger'\n }>(),\n { label: undefined, type: 'button', modifiers: undefined },\n )\n</script>\n\n<template>\n <button\n class=\"pk-chat-button\"\n :class=\"[\n modifiers ? `pk-chat-button--${modifiers}` : undefined,\n { 'pk-chat-button--labelled': label },\n ]\"\n :type=\"type\">\n <VvIcon :name=\"icon\" class=\"pk-chat-button__icon\" />\n <span v-if=\"label\" class=\"pk-chat-button__label\">{{ label }}</span>\n </button>\n</template>\n\n<style lang=\"scss\">\n .pk-chat-button {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n padding: var(--spacing-4);\n border: none;\n border-radius: var(--rounded);\n background-color: transparent;\n color: var(--color-word-1);\n cursor: pointer;\n transition: var(--transition-colors);\n\n &:hover {\n background-color: var(--color-surface-2);\n }\n\n &:focus-visible {\n outline: 1px solid var(--color-surface-5);\n outline-offset: 0;\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n // A toggle has to survive a glance: a crossed-out glyph alone changes\n // too few pixels to notice mid-sentence.\n &[aria-pressed='true'] {\n background-color: var(--color-surface-3);\n color: var(--color-word);\n }\n\n // A wash of the same red rather than a lighter red behind it: the\n // `lighten-5` step lands close enough to the icon to leave it at about\n // 2:1, which is a button that disappears exactly while it is being\n // pointed at. The tint composites over whatever surface is behind, so\n // it holds in the dark theme too.\n &--danger {\n color: var(--color-danger);\n\n &:hover {\n background-color: color-mix(\n in srgb,\n var(--color-danger) 12%,\n transparent\n );\n }\n }\n\n &--labelled {\n gap: var(--spacing-4);\n padding-inline: var(--spacing-8);\n font-size: var(--text-12);\n }\n\n &__icon {\n display: block;\n width: var(--spacing-20);\n height: var(--spacing-20);\n }\n }\n</style>\n","<script setup lang=\"ts\">\n // @ts-expect-error - no types for autosize\n import autosize from 'autosize'\n import {\n computed,\n nextTick,\n onBeforeUnmount,\n onMounted,\n ref,\n useTemplateRef,\n watch,\n } from 'vue'\n import { useDropZone } from '@vueuse/core'\n import type { AgentFileUpload } from 'models'\n import type { PendingAttachment } from 'composables'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n import PkChatbotFilePreview from './PkChatbotFilePreview.vue'\n import PkChatButton from './PkChatButton.vue'\n\n // --- Models & Props ---\n\n const modelValue = defineModel<string | undefined>({ default: undefined })\n const pendingAttachments = defineModel<PendingAttachment[]>(\n 'pendingAttachments',\n { default: () => [] },\n )\n\n const emit = defineEmits<{\n submit: []\n 'stop-generation': []\n 'file-select': [file: File]\n 'dismiss-attachment-notice': []\n 'voice-start': []\n }>()\n\n const props = defineProps<{\n placeholder?: string\n dismissableNotice?: string\n status?: 'submitted' | 'streaming' | 'ready' | 'error'\n maxMessageLength?: number\n fileUpload?: AgentFileUpload\n enableDragDrop?: boolean\n attachmentLimitReached?: boolean\n attachmentNotice?: string\n /** Show the talk button: the agent has voice enabled. */\n voiceEnabled?: boolean\n }>()\n\n // --- Template refs ---\n\n const textareaEl = useTemplateRef<HTMLTextAreaElement>('textareaEl')\n const fileInputEl = useTemplateRef<HTMLInputElement>('fileInputEl')\n const cameraInputEl = useTemplateRef<HTMLInputElement>('cameraInputEl')\n const formEl = useTemplateRef<HTMLFormElement>('formEl')\n\n // --- Input buffering (decouples typing from reactive model propagation) ---\n\n const localValue = ref(modelValue.value ?? '')\n let syncTimer: ReturnType<typeof setTimeout> | null = null\n\n const cancelSync = () => {\n if (syncTimer !== null) {\n clearTimeout(syncTimer)\n syncTimer = null\n }\n }\n\n const flushSync = () => {\n cancelSync()\n modelValue.value = localValue.value\n }\n\n const scheduleSync = () => {\n cancelSync()\n syncTimer = setTimeout(() => {\n modelValue.value = localValue.value\n syncTimer = null\n }, 300)\n }\n\n const onTextareaInput = () => {\n localValue.value = textareaEl.value?.value ?? ''\n scheduleSync()\n }\n\n watch(modelValue, (v) => {\n if (v !== localValue.value) {\n localValue.value = v ?? ''\n nextTick(() => {\n if (textareaEl.value) {\n autosize.update(textareaEl.value)\n }\n })\n }\n })\n\n // --- Status computeds ---\n\n const isStreaming = computed(() => props.status === 'streaming')\n const isSubmitted = computed(() => props.status === 'submitted')\n const isInputDisabled = computed(\n () => isStreaming.value || isSubmitted.value,\n )\n\n // --- Validation ---\n\n const currentLength = computed(() => localValue.value.length)\n\n const isOverLimit = computed(\n () =>\n props.maxMessageLength !== undefined &&\n currentLength.value > props.maxMessageLength,\n )\n\n const isUploadingAnyFile = computed(() =>\n pendingAttachments.value.some((a) => a.state === 'uploading'),\n )\n\n const isSubmitEnabled = computed(() => {\n if (\n isInputDisabled.value ||\n isUploadingAnyFile.value ||\n isOverLimit.value\n ) {\n return false\n }\n return localValue.value.trim().length > 0\n })\n\n // --- File upload ---\n\n const hasCaptureSupport = 'capture' in document.createElement('input')\n\n const acceptMimeTypes = computed(\n () => props.fileUpload?.allowedMimeTypes?.join(',') ?? '',\n )\n\n const acceptImageMimeTypes = computed(() =>\n (props.fileUpload?.allowedMimeTypes ?? [])\n .filter((m) => m.startsWith('image/'))\n .join(','),\n )\n\n const showCameraOption = computed(\n () => hasCaptureSupport && acceptImageMimeTypes.value.length > 0,\n )\n\n const openFilePicker = () => {\n fileInputEl.value?.click()\n }\n\n const openCameraPicker = () => {\n cameraInputEl.value?.click()\n }\n\n // The store owns the attachment limits and drops any overflow; the input\n // just forwards every picked/dropped file.\n const emitFiles = (files: File[]) => {\n for (const file of files) {\n emit('file-select', file)\n }\n }\n\n const onFileChange = (event: Event) => {\n const input = event.target as HTMLInputElement\n emitFiles(Array.from(input.files ?? []))\n input.value = ''\n }\n\n // --- Attachments ---\n\n const removeAttachment = (id: string) => {\n const att = pendingAttachments.value.find((a) => a.id === id)\n if (att) {\n URL.revokeObjectURL(att.localUrl)\n }\n pendingAttachments.value = pendingAttachments.value.filter(\n (a) => a.id !== id,\n )\n }\n\n // --- Drag & drop ---\n\n const isDragDropEnabled = computed(\n () => (props.enableDragDrop ?? true) && !!props.fileUpload?.enabled,\n )\n\n const handleDrop = (files: File[] | null) => {\n if (!isDragDropEnabled.value || !files) {\n return\n }\n emitFiles(files)\n }\n\n const { isOverDropZone } = useDropZone(formEl, {\n dataTypes: computed(() => props.fileUpload?.allowedMimeTypes ?? []),\n onDrop: handleDrop,\n })\n\n // --- Notice queue (single slot above the input, highest priority wins) ---\n\n type InputNotice = {\n id: string\n text?: string\n markdown?: string\n icon?: string\n dismiss?: () => void\n }\n\n const isDismissableNoticeVisible = ref(true)\n const closeDismissableNotice = () => {\n isDismissableNoticeVisible.value = false\n }\n\n const activeNotice = computed<InputNotice | null>(() => {\n // Order = priority. The alert takes precedence over the notice.\n if (props.attachmentNotice) {\n return {\n id: 'limit',\n icon: 'ri:information-line',\n text: props.attachmentNotice,\n dismiss: () => emit('dismiss-attachment-notice'),\n }\n }\n if (props.dismissableNotice && isDismissableNoticeVisible.value) {\n return {\n id: 'dismissable',\n markdown: props.dismissableNotice,\n dismiss: closeDismissableNotice,\n }\n }\n return null\n })\n\n // --- Submit ---\n\n const handleSubmit = () => {\n if (!isSubmitEnabled.value) {\n return\n }\n flushSync()\n emit('submit')\n localValue.value = ''\n modelValue.value = ''\n nextTick(() => {\n if (textareaEl.value) {\n textareaEl.value.value = ''\n autosize.update(textareaEl.value)\n }\n })\n }\n\n // --- Lifecycle ---\n\n onMounted(() => {\n if (textareaEl.value) {\n autosize(textareaEl.value)\n }\n })\n\n onBeforeUnmount(() => {\n cancelSync()\n if (textareaEl.value) {\n autosize.destroy(textareaEl.value)\n }\n for (const att of pendingAttachments.value) {\n URL.revokeObjectURL(att.localUrl)\n }\n })\n</script>\n\n<template>\n <div class=\"pk-chatbot-input\">\n <div\n v-if=\"activeNotice\"\n :key=\"activeNotice.id\"\n class=\"pk-chatbot-input__notice\"\n role=\"status\">\n <VvIcon\n v-if=\"activeNotice.icon\"\n :name=\"activeNotice.icon\"\n class=\"pk-chatbot-input__notice-icon\" />\n <PkStreamingMarkdown\n v-if=\"activeNotice.markdown\"\n :markdown=\"activeNotice.markdown\"\n class=\"wysiwyg pk-chatbot-input__notice-text\" />\n <span v-else class=\"pk-chatbot-input__notice-text\">\n {{ activeNotice.text }}\n </span>\n <VvButton\n v-if=\"activeNotice.dismiss\"\n :title=\"$t('action.close')\"\n modifiers=\"action-quiet\"\n icon=\"ri:close-line\"\n class=\"w-18 h-18\"\n @click=\"activeNotice.dismiss()\" />\n </div>\n <form\n ref=\"formEl\"\n class=\"pk-chatbot-input__form\"\n @submit.prevent=\"handleSubmit\">\n <div\n v-if=\"isOverDropZone && isDragDropEnabled\"\n class=\"pk-chatbot-input__drop-overlay\">\n <VvIcon\n name=\"ri:upload-cloud-2-line\"\n class=\"pk-chatbot-input__drop-overlay-icon\" />\n <span>{{ $t('action.dropFile') }}</span>\n </div>\n <div\n v-if=\"pendingAttachments.length\"\n class=\"pk-chatbot-input__attachments\">\n <PkChatbotFilePreview\n v-for=\"att in pendingAttachments\"\n :key=\"att.id\"\n :media-type=\"att.file.type\"\n :url=\"att.localUrl\"\n :filename=\"att.file.name\"\n :size=\"att.file.size\"\n :loading=\"att.state === 'uploading'\"\n :error=\"att.state === 'error' ? att.error : undefined\"\n :removable=\"att.state !== 'uploading'\"\n compact\n @remove=\"removeAttachment(att.id)\" />\n </div>\n <div class=\"pk-chatbot-input__fieldset\">\n <slot name=\"prepend\" />\n <VvDropdown\n v-if=\"\n fileUpload &&\n fileUpload.enabled &&\n (showCameraOption || $slots['additional-actions'])\n \"\n v-bind=\"{\n placement: 'top-start',\n modifiers: 'menu',\n flip: true,\n offset: 3,\n }\">\n <template #default=\"{ init, toggle, aria }\">\n \n <button\n :ref=\"(e: any) => init(e)\"\n v-bind=\"aria\"\n class=\"pk-chat-button\"\n type=\"button\"\n :title=\"$t('action.attachFile')\"\n :disabled=\"isInputDisabled\"\n @click=\"toggle\">\n <VvIcon\n name=\"ri:add-line\"\n class=\"pk-chat-button__icon\" />\n </button>\n </template>\n <template #items>\n <VvDropdownAction\n v-if=\"showCameraOption\"\n :disabled=\"\n isInputDisabled || attachmentLimitReached\n \"\n @click=\"openCameraPicker\">\n <VvIcon\n name=\"ri:camera-line\"\n class=\"pk-chatbot-input__dropdown-icon\" />\n {{ $t('action.takePhoto') }}\n </VvDropdownAction>\n <VvDropdownAction\n :disabled=\"\n isInputDisabled || attachmentLimitReached\n \"\n @click=\"openFilePicker\">\n <VvIcon\n name=\"ri:attachment-line\"\n class=\"pk-chatbot-input__dropdown-icon\" />\n {{ $t('action.attachFile') }}\n </VvDropdownAction>\n <slot name=\"additional-actions\" />\n </template>\n </VvDropdown>\n <PkChatButton\n v-else-if=\"fileUpload && fileUpload.enabled\"\n icon=\"ri:add-line\"\n :title=\"$t('action.attachFile')\"\n :disabled=\"isInputDisabled || attachmentLimitReached\"\n @click=\"openFilePicker\" />\n <input\n v-if=\"fileUpload && fileUpload.enabled\"\n ref=\"fileInputEl\"\n type=\"file\"\n hidden\n multiple\n :accept=\"acceptMimeTypes\"\n @change=\"onFileChange\" />\n <input\n v-if=\"fileUpload && fileUpload.enabled && showCameraOption\"\n ref=\"cameraInputEl\"\n type=\"file\"\n capture=\"environment\"\n hidden\n :accept=\"acceptImageMimeTypes\"\n @change=\"onFileChange\" />\n <div class=\"pk-chatbot-input__content\">\n <textarea\n ref=\"textareaEl\"\n :value=\"localValue\"\n class=\"pk-chatbot-input__textarea\"\n name=\"message\"\n rows=\"1\"\n :placeholder\n @input=\"onTextareaInput\"\n @keydown.enter.prevent=\"handleSubmit\"></textarea>\n </div>\n <div\n v-if=\"maxMessageLength\"\n class=\"pk-chatbot-input__counter\"\n :class=\"{ 'pk-chatbot-input__counter--over': isOverLimit }\">\n {{ $n(currentLength, 'integer') }}/<span\n class=\"opacity-60\"\n >{{ $n(maxMessageLength, 'integer') }}</span\n >\n </div>\n <PkChatButton\n v-if=\"voiceEnabled && !isStreaming\"\n icon=\"ri:mic-line\"\n :title=\"$t('action.talk')\"\n :disabled=\"isInputDisabled\"\n @click=\"emit('voice-start')\" />\n <PkChatButton\n v-if=\"isStreaming\"\n icon=\"ri:stop-circle-line\"\n :title=\"$t('action.stop')\"\n @click=\"emit('stop-generation')\" />\n <PkChatButton\n v-else\n type=\"submit\"\n :icon=\"\n isSubmitted\n ? 'line-md:loading-loop'\n : isSubmitEnabled\n ? 'ri:send-ins-fill'\n : 'ri:send-ins-line'\n \"\n :title=\"\n isSubmitEnabled\n ? $t('action.submit')\n : $t('label.disabled')\n \"\n :disabled=\"!isSubmitEnabled\" />\n </div>\n </form>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-chatbot-input {\n position: relative;\n display: flex;\n flex-direction: column;\n margin-inline: var(--spacing-sm);\n margin-bottom: var(--spacing-sm);\n\n &__notice {\n position: relative;\n padding: var(--spacing-10) var(--spacing-sm);\n display: flex;\n align-items: flex-start;\n gap: var(--spacing-sm);\n background-color: var(--color-surface-1);\n border-top-left-radius: var(--rounded-xl);\n border-top-right-radius: var(--rounded-xl);\n transition-property: var(--transition-property-all);\n transition-duration: var(--duration-300);\n transition-timing-function: var(--ease-in-out);\n font-size: var(--text-12);\n color: var(--color-word-4);\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n left: 0;\n right: 0;\n bottom: calc(-1 * var(--spacing-12));\n height: var(--spacing-12);\n background-color: var(--color-surface-1);\n z-index: 1;\n }\n\n &-icon {\n flex-shrink: 0;\n width: var(--spacing-18);\n height: var(--spacing-18);\n }\n\n &-text {\n flex: 1;\n min-width: 0;\n }\n }\n\n &__form {\n position: relative;\n display: flex;\n z-index: 1;\n flex-direction: column;\n\n // The composer is a field too: same border and focus ring as the\n // form fields, on top of the shadow and the 12px radius that make\n // it the container (12) of its 8px buttons\n border-radius: var(--rounded-xl);\n border: 1px solid var(--input-border-color);\n background-color: var(--color-surface);\n padding: var(--spacing-14);\n box-shadow: var(--shadow-lg);\n font-size: var(\n --text-16\n ); // prevent ios zoom on input focus by using a font size >= 16px\n gap: var(--spacing-xs);\n transition: var(--input-transition);\n\n @include media-breakpoint-up('sm', $breakpoints) {\n font-size: var(--text-14);\n padding: var(--spacing-10);\n }\n\n &:has(:focus-within) {\n border-color: var(--input-focus-color);\n box-shadow: var(--shadow-lg), var(--input-focus-ring);\n }\n }\n\n &__drop-overlay {\n position: absolute;\n inset: 0;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-xs);\n border-radius: var(--rounded-xl);\n background-color: color-mix(\n in srgb,\n var(--color-surface) 85%,\n transparent\n );\n pointer-events: none;\n }\n\n &__fieldset {\n display: flex;\n align-items: center;\n gap: var(--spacing-xs);\n flex: 1;\n }\n\n &__content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-4);\n min-width: 0;\n overflow: hidden;\n }\n\n &__textarea {\n display: block;\n border: none;\n outline: none;\n resize: none;\n width: 100%;\n max-height: 200px;\n color: var(--color-word-1);\n background-color: var(--color-surface);\n\n &::placeholder {\n color: var(--color-word-4);\n }\n }\n\n &__attachments {\n display: flex;\n flex-wrap: wrap;\n // Roomy gap so the uniform-height chips breathe in the row.\n gap: var(--spacing-12);\n padding-bottom: var(--spacing-xs);\n border-bottom: 1px solid var(--color-surface-2);\n }\n\n &__counter {\n background-color: var(--color-surface-1);\n border: 1px solid var(--color-surface-3);\n border-radius: var(--rounded-md);\n font-size: var(--text-12);\n color: var(--color-word-3);\n line-height: 1;\n padding-inline: var(--spacing-6);\n padding-block: var(--spacing-4);\n z-index: 1;\n font-variant-numeric: tabular-nums;\n font-family: var(--font-mono);\n font-weight: var(--font-bold);\n\n &--over {\n color: var(--color-danger);\n border-color: var(--color-danger-lighten-5);\n font-weight: var(--font-bold);\n }\n }\n }\n</style>\n","<script setup lang=\"ts\">\n // @ts-expect-error - no types for autosize\n import autosize from 'autosize'\n import {\n computed,\n nextTick,\n onBeforeUnmount,\n onMounted,\n ref,\n useTemplateRef,\n watch,\n } from 'vue'\n import { useDropZone } from '@vueuse/core'\n import type { AgentFileUpload } from 'models'\n import type { PendingAttachment } from 'composables'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n import PkChatbotFilePreview from './PkChatbotFilePreview.vue'\n import PkChatButton from './PkChatButton.vue'\n\n // --- Models & Props ---\n\n const modelValue = defineModel<string | undefined>({ default: undefined })\n const pendingAttachments = defineModel<PendingAttachment[]>(\n 'pendingAttachments',\n { default: () => [] },\n )\n\n const emit = defineEmits<{\n submit: []\n 'stop-generation': []\n 'file-select': [file: File]\n 'dismiss-attachment-notice': []\n 'voice-start': []\n }>()\n\n const props = defineProps<{\n placeholder?: string\n dismissableNotice?: string\n status?: 'submitted' | 'streaming' | 'ready' | 'error'\n maxMessageLength?: number\n fileUpload?: AgentFileUpload\n enableDragDrop?: boolean\n attachmentLimitReached?: boolean\n attachmentNotice?: string\n /** Show the talk button: the agent has voice enabled. */\n voiceEnabled?: boolean\n }>()\n\n // --- Template refs ---\n\n const textareaEl = useTemplateRef<HTMLTextAreaElement>('textareaEl')\n const fileInputEl = useTemplateRef<HTMLInputElement>('fileInputEl')\n const cameraInputEl = useTemplateRef<HTMLInputElement>('cameraInputEl')\n const formEl = useTemplateRef<HTMLFormElement>('formEl')\n\n // --- Input buffering (decouples typing from reactive model propagation) ---\n\n const localValue = ref(modelValue.value ?? '')\n let syncTimer: ReturnType<typeof setTimeout> | null = null\n\n const cancelSync = () => {\n if (syncTimer !== null) {\n clearTimeout(syncTimer)\n syncTimer = null\n }\n }\n\n const flushSync = () => {\n cancelSync()\n modelValue.value = localValue.value\n }\n\n const scheduleSync = () => {\n cancelSync()\n syncTimer = setTimeout(() => {\n modelValue.value = localValue.value\n syncTimer = null\n }, 300)\n }\n\n const onTextareaInput = () => {\n localValue.value = textareaEl.value?.value ?? ''\n scheduleSync()\n }\n\n watch(modelValue, (v) => {\n if (v !== localValue.value) {\n localValue.value = v ?? ''\n nextTick(() => {\n if (textareaEl.value) {\n autosize.update(textareaEl.value)\n }\n })\n }\n })\n\n // --- Status computeds ---\n\n const isStreaming = computed(() => props.status === 'streaming')\n const isSubmitted = computed(() => props.status === 'submitted')\n const isInputDisabled = computed(\n () => isStreaming.value || isSubmitted.value,\n )\n\n // --- Validation ---\n\n const currentLength = computed(() => localValue.value.length)\n\n const isOverLimit = computed(\n () =>\n props.maxMessageLength !== undefined &&\n currentLength.value > props.maxMessageLength,\n )\n\n const isUploadingAnyFile = computed(() =>\n pendingAttachments.value.some((a) => a.state === 'uploading'),\n )\n\n const isSubmitEnabled = computed(() => {\n if (\n isInputDisabled.value ||\n isUploadingAnyFile.value ||\n isOverLimit.value\n ) {\n return false\n }\n return localValue.value.trim().length > 0\n })\n\n // --- File upload ---\n\n const hasCaptureSupport = 'capture' in document.createElement('input')\n\n const acceptMimeTypes = computed(\n () => props.fileUpload?.allowedMimeTypes?.join(',') ?? '',\n )\n\n const acceptImageMimeTypes = computed(() =>\n (props.fileUpload?.allowedMimeTypes ?? [])\n .filter((m) => m.startsWith('image/'))\n .join(','),\n )\n\n const showCameraOption = computed(\n () => hasCaptureSupport && acceptImageMimeTypes.value.length > 0,\n )\n\n const openFilePicker = () => {\n fileInputEl.value?.click()\n }\n\n const openCameraPicker = () => {\n cameraInputEl.value?.click()\n }\n\n // The store owns the attachment limits and drops any overflow; the input\n // just forwards every picked/dropped file.\n const emitFiles = (files: File[]) => {\n for (const file of files) {\n emit('file-select', file)\n }\n }\n\n const onFileChange = (event: Event) => {\n const input = event.target as HTMLInputElement\n emitFiles(Array.from(input.files ?? []))\n input.value = ''\n }\n\n // --- Attachments ---\n\n const removeAttachment = (id: string) => {\n const att = pendingAttachments.value.find((a) => a.id === id)\n if (att) {\n URL.revokeObjectURL(att.localUrl)\n }\n pendingAttachments.value = pendingAttachments.value.filter(\n (a) => a.id !== id,\n )\n }\n\n // --- Drag & drop ---\n\n const isDragDropEnabled = computed(\n () => (props.enableDragDrop ?? true) && !!props.fileUpload?.enabled,\n )\n\n const handleDrop = (files: File[] | null) => {\n if (!isDragDropEnabled.value || !files) {\n return\n }\n emitFiles(files)\n }\n\n const { isOverDropZone } = useDropZone(formEl, {\n dataTypes: computed(() => props.fileUpload?.allowedMimeTypes ?? []),\n onDrop: handleDrop,\n })\n\n // --- Notice queue (single slot above the input, highest priority wins) ---\n\n type InputNotice = {\n id: string\n text?: string\n markdown?: string\n icon?: string\n dismiss?: () => void\n }\n\n const isDismissableNoticeVisible = ref(true)\n const closeDismissableNotice = () => {\n isDismissableNoticeVisible.value = false\n }\n\n const activeNotice = computed<InputNotice | null>(() => {\n // Order = priority. The alert takes precedence over the notice.\n if (props.attachmentNotice) {\n return {\n id: 'limit',\n icon: 'ri:information-line',\n text: props.attachmentNotice,\n dismiss: () => emit('dismiss-attachment-notice'),\n }\n }\n if (props.dismissableNotice && isDismissableNoticeVisible.value) {\n return {\n id: 'dismissable',\n markdown: props.dismissableNotice,\n dismiss: closeDismissableNotice,\n }\n }\n return null\n })\n\n // --- Submit ---\n\n const handleSubmit = () => {\n if (!isSubmitEnabled.value) {\n return\n }\n flushSync()\n emit('submit')\n localValue.value = ''\n modelValue.value = ''\n nextTick(() => {\n if (textareaEl.value) {\n textareaEl.value.value = ''\n autosize.update(textareaEl.value)\n }\n })\n }\n\n // --- Lifecycle ---\n\n onMounted(() => {\n if (textareaEl.value) {\n autosize(textareaEl.value)\n }\n })\n\n onBeforeUnmount(() => {\n cancelSync()\n if (textareaEl.value) {\n autosize.destroy(textareaEl.value)\n }\n for (const att of pendingAttachments.value) {\n URL.revokeObjectURL(att.localUrl)\n }\n })\n</script>\n\n<template>\n <div class=\"pk-chatbot-input\">\n <div\n v-if=\"activeNotice\"\n :key=\"activeNotice.id\"\n class=\"pk-chatbot-input__notice\"\n role=\"status\">\n <VvIcon\n v-if=\"activeNotice.icon\"\n :name=\"activeNotice.icon\"\n class=\"pk-chatbot-input__notice-icon\" />\n <PkStreamingMarkdown\n v-if=\"activeNotice.markdown\"\n :markdown=\"activeNotice.markdown\"\n class=\"wysiwyg pk-chatbot-input__notice-text\" />\n <span v-else class=\"pk-chatbot-input__notice-text\">\n {{ activeNotice.text }}\n </span>\n <VvButton\n v-if=\"activeNotice.dismiss\"\n :title=\"$t('action.close')\"\n modifiers=\"action-quiet\"\n icon=\"ri:close-line\"\n class=\"w-18 h-18\"\n @click=\"activeNotice.dismiss()\" />\n </div>\n <form\n ref=\"formEl\"\n class=\"pk-chatbot-input__form\"\n @submit.prevent=\"handleSubmit\">\n <div\n v-if=\"isOverDropZone && isDragDropEnabled\"\n class=\"pk-chatbot-input__drop-overlay\">\n <VvIcon\n name=\"ri:upload-cloud-2-line\"\n class=\"pk-chatbot-input__drop-overlay-icon\" />\n <span>{{ $t('action.dropFile') }}</span>\n </div>\n <div\n v-if=\"pendingAttachments.length\"\n class=\"pk-chatbot-input__attachments\">\n <PkChatbotFilePreview\n v-for=\"att in pendingAttachments\"\n :key=\"att.id\"\n :media-type=\"att.file.type\"\n :url=\"att.localUrl\"\n :filename=\"att.file.name\"\n :size=\"att.file.size\"\n :loading=\"att.state === 'uploading'\"\n :error=\"att.state === 'error' ? att.error : undefined\"\n :removable=\"att.state !== 'uploading'\"\n compact\n @remove=\"removeAttachment(att.id)\" />\n </div>\n <div class=\"pk-chatbot-input__fieldset\">\n <slot name=\"prepend\" />\n <VvDropdown\n v-if=\"\n fileUpload &&\n fileUpload.enabled &&\n (showCameraOption || $slots['additional-actions'])\n \"\n v-bind=\"{\n placement: 'top-start',\n modifiers: 'menu',\n flip: true,\n offset: 3,\n }\">\n <template #default=\"{ init, toggle, aria }\">\n \n <button\n :ref=\"(e: any) => init(e)\"\n v-bind=\"aria\"\n class=\"pk-chat-button\"\n type=\"button\"\n :title=\"$t('action.attachFile')\"\n :disabled=\"isInputDisabled\"\n @click=\"toggle\">\n <VvIcon\n name=\"ri:add-line\"\n class=\"pk-chat-button__icon\" />\n </button>\n </template>\n <template #items>\n <VvDropdownAction\n v-if=\"showCameraOption\"\n :disabled=\"\n isInputDisabled || attachmentLimitReached\n \"\n @click=\"openCameraPicker\">\n <VvIcon\n name=\"ri:camera-line\"\n class=\"pk-chatbot-input__dropdown-icon\" />\n {{ $t('action.takePhoto') }}\n </VvDropdownAction>\n <VvDropdownAction\n :disabled=\"\n isInputDisabled || attachmentLimitReached\n \"\n @click=\"openFilePicker\">\n <VvIcon\n name=\"ri:attachment-line\"\n class=\"pk-chatbot-input__dropdown-icon\" />\n {{ $t('action.attachFile') }}\n </VvDropdownAction>\n <slot name=\"additional-actions\" />\n </template>\n </VvDropdown>\n <PkChatButton\n v-else-if=\"fileUpload && fileUpload.enabled\"\n icon=\"ri:add-line\"\n :title=\"$t('action.attachFile')\"\n :disabled=\"isInputDisabled || attachmentLimitReached\"\n @click=\"openFilePicker\" />\n <input\n v-if=\"fileUpload && fileUpload.enabled\"\n ref=\"fileInputEl\"\n type=\"file\"\n hidden\n multiple\n :accept=\"acceptMimeTypes\"\n @change=\"onFileChange\" />\n <input\n v-if=\"fileUpload && fileUpload.enabled && showCameraOption\"\n ref=\"cameraInputEl\"\n type=\"file\"\n capture=\"environment\"\n hidden\n :accept=\"acceptImageMimeTypes\"\n @change=\"onFileChange\" />\n <div class=\"pk-chatbot-input__content\">\n <textarea\n ref=\"textareaEl\"\n :value=\"localValue\"\n class=\"pk-chatbot-input__textarea\"\n name=\"message\"\n rows=\"1\"\n :placeholder\n @input=\"onTextareaInput\"\n @keydown.enter.prevent=\"handleSubmit\"></textarea>\n </div>\n <div\n v-if=\"maxMessageLength\"\n class=\"pk-chatbot-input__counter\"\n :class=\"{ 'pk-chatbot-input__counter--over': isOverLimit }\">\n {{ $n(currentLength, 'integer') }}/<span\n class=\"opacity-60\"\n >{{ $n(maxMessageLength, 'integer') }}</span\n >\n </div>\n <PkChatButton\n v-if=\"voiceEnabled && !isStreaming\"\n icon=\"ri:mic-line\"\n :title=\"$t('action.talk')\"\n :disabled=\"isInputDisabled\"\n @click=\"emit('voice-start')\" />\n <PkChatButton\n v-if=\"isStreaming\"\n icon=\"ri:stop-circle-line\"\n :title=\"$t('action.stop')\"\n @click=\"emit('stop-generation')\" />\n <PkChatButton\n v-else\n type=\"submit\"\n :icon=\"\n isSubmitted\n ? 'line-md:loading-loop'\n : isSubmitEnabled\n ? 'ri:send-ins-fill'\n : 'ri:send-ins-line'\n \"\n :title=\"\n isSubmitEnabled\n ? $t('action.submit')\n : $t('label.disabled')\n \"\n :disabled=\"!isSubmitEnabled\" />\n </div>\n </form>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-chatbot-input {\n position: relative;\n display: flex;\n flex-direction: column;\n margin-inline: var(--spacing-sm);\n margin-bottom: var(--spacing-sm);\n\n &__notice {\n position: relative;\n padding: var(--spacing-10) var(--spacing-sm);\n display: flex;\n align-items: flex-start;\n gap: var(--spacing-sm);\n background-color: var(--color-surface-1);\n border-top-left-radius: var(--rounded-xl);\n border-top-right-radius: var(--rounded-xl);\n transition-property: var(--transition-property-all);\n transition-duration: var(--duration-300);\n transition-timing-function: var(--ease-in-out);\n font-size: var(--text-12);\n color: var(--color-word-4);\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n left: 0;\n right: 0;\n bottom: calc(-1 * var(--spacing-12));\n height: var(--spacing-12);\n background-color: var(--color-surface-1);\n z-index: 1;\n }\n\n &-icon {\n flex-shrink: 0;\n width: var(--spacing-18);\n height: var(--spacing-18);\n }\n\n &-text {\n flex: 1;\n min-width: 0;\n }\n }\n\n &__form {\n position: relative;\n display: flex;\n z-index: 1;\n flex-direction: column;\n\n // The composer is a field too: same border and focus ring as the\n // form fields, on top of the shadow and the 12px radius that make\n // it the container (12) of its 8px buttons\n border-radius: var(--rounded-xl);\n border: 1px solid var(--input-border-color);\n background-color: var(--color-surface);\n padding: var(--spacing-14);\n box-shadow: var(--shadow-lg);\n font-size: var(\n --text-16\n ); // prevent ios zoom on input focus by using a font size >= 16px\n gap: var(--spacing-xs);\n transition: var(--input-transition);\n\n @include media-breakpoint-up('sm', $breakpoints) {\n font-size: var(--text-14);\n padding: var(--spacing-10);\n }\n\n &:has(:focus-within) {\n border-color: var(--input-focus-color);\n box-shadow: var(--shadow-lg), var(--input-focus-ring);\n }\n }\n\n &__drop-overlay {\n position: absolute;\n inset: 0;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-xs);\n border-radius: var(--rounded-xl);\n background-color: color-mix(\n in srgb,\n var(--color-surface) 85%,\n transparent\n );\n pointer-events: none;\n }\n\n &__fieldset {\n display: flex;\n align-items: center;\n gap: var(--spacing-xs);\n flex: 1;\n }\n\n &__content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-4);\n min-width: 0;\n overflow: hidden;\n }\n\n &__textarea {\n display: block;\n border: none;\n outline: none;\n resize: none;\n width: 100%;\n max-height: 200px;\n color: var(--color-word-1);\n background-color: var(--color-surface);\n\n &::placeholder {\n color: var(--color-word-4);\n }\n }\n\n &__attachments {\n display: flex;\n flex-wrap: wrap;\n // Roomy gap so the uniform-height chips breathe in the row.\n gap: var(--spacing-12);\n padding-bottom: var(--spacing-xs);\n border-bottom: 1px solid var(--color-surface-2);\n }\n\n &__counter {\n background-color: var(--color-surface-1);\n border: 1px solid var(--color-surface-3);\n border-radius: var(--rounded-md);\n font-size: var(--text-12);\n color: var(--color-word-3);\n line-height: 1;\n padding-inline: var(--spacing-6);\n padding-block: var(--spacing-4);\n z-index: 1;\n font-variant-numeric: tabular-nums;\n font-family: var(--font-mono);\n font-weight: var(--font-bold);\n\n &--over {\n color: var(--color-danger);\n border-color: var(--color-danger-lighten-5);\n font-weight: var(--font-bold);\n }\n }\n }\n</style>\n"],"x_google_ignoreList":[0],"mappings":"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"}