npm - @8wave/ai-elements - Versions diffs - 0.90.0 → 0.91.0 - Mend

@8wave/ai-elements 0.90.0 → 0.91.0

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 (188) hide show

package/dist-vue/_chunks/PkChatbotMessages-DLP7utmG.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"PkChatbotMessages-DLP7utmG.js","names":["$emit"],"sources":["../../../../packages/components/src/chat/toolComponentMap.ts","../../../../packages/components/src/chat/useChatScroll.ts","../../../../packages/components/src/chat/PkChatbotMessages.vue","../../../../packages/components/src/chat/PkChatbotMessages.vue"],"sourcesContent":["import { defineAsyncComponent } from 'vue'\n\n/**\n * Maps tool `part.type` to the corresponding component for auto-rendering.\n * Only includes simple tools that accept only a `:part` prop.\n * Interactive tools (requestConfirm, showContactForm, showSuggestedReply,\n * showSources, showMultipleChoice) must be wired explicitly in the parent\n * with their required callbacks/events.\n */\nexport const toolComponentMap: Record<\n string,\n ReturnType<typeof defineAsyncComponent>\n> = {\n requestConfirm: defineAsyncComponent(\n () => import('./PkToolRequestConfirm.vue'),\n ),\n requestOAuthConnection: defineAsyncComponent(\n () => import('./PkToolRequestOAuthConnection.vue'),\n ),\n showArtifact: defineAsyncComponent(\n () => import('./PkToolShowArtifact.vue'),\n ),\n showCalendarEvent: defineAsyncComponent(\n () => import('./PkToolShowCalendarEvent.vue'),\n ),\n showComparison: defineAsyncComponent(\n () => import('./PkToolShowComparison.vue'),\n ),\n showContactForm: defineAsyncComponent(\n () => import('./PkToolShowContactForm.vue'),\n ),\n showDiagram: defineAsyncComponent(() => import('./PkToolShowDiagram.vue')),\n showEmail: defineAsyncComponent(() => import('./PkToolShowEmail.vue')),\n showImageGallery: defineAsyncComponent(\n () => import('./PkToolShowImageGallery.vue'),\n ),\n showLocation: defineAsyncComponent(\n () => import('./PkToolShowLocation.vue'),\n ),\n showMessage: defineAsyncComponent(() => import('./PkToolShowMessage.vue')),\n showForm: defineAsyncComponent(() => import('./PkToolShowForm.vue')),\n showMultipleChoice: defineAsyncComponent(\n () => import('./PkToolShowForm.vue'),\n ),\n showProductList: defineAsyncComponent(\n () => import('./PkToolShowProductList.vue'),\n ),\n showQrCode: defineAsyncComponent(() => import('./PkToolShowQrCode.vue')),\n showSources: defineAsyncComponent(() => import('./PkToolShowSources.vue')),\n showSuggestedReply: defineAsyncComponent(\n () => import('./PkToolShowSuggestedReply.vue'),\n ),\n showWeather: defineAsyncComponent(() => import('./PkToolShowWeather.vue')),\n showWebPages: defineAsyncComponent(\n () => import('./PkToolShowWebPages.vue'),\n ),\n}\n","import type { Ref, ShallowRef } from 'vue'\nimport { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'\n\nconst NEAR_BOTTOM_THRESHOLD = 30\nconst SMOOTH_SCROLL_DURATION = 500\n\ninterface UseChatScrollOptions {\n scrollEl:\n | Readonly<ShallowRef<HTMLDivElement | null>>\n | Ref<HTMLDivElement | undefined>\n status: () => string | undefined\n messagesLength: () => number | undefined\n lastMessageRole: () => string | undefined\n /**\n * Max scrollTop the streaming auto-follow may reach (e.g. the freshly\n * sent user message resting at the top of the viewport). Scrolling past\n * it remains possible (user gesture or scrollToBottom), and once past it\n * the auto-follow tracks the bottom again.\n */\n autoScrollLimit?: () => number | undefined\n /**\n * Element whose height tracks the content height, watched for late\n * growth (lazy tool outputs). Defaults to the scroll element's first\n * child.\n */\n contentEl?: () => HTMLElement | null\n onScrollUp?: () => void\n onScrollDown?: () => void\n}\n\nexport function useChatScroll(options: UseChatScrollOptions) {\n const {\n scrollEl,\n status,\n messagesLength,\n lastMessageRole,\n autoScrollLimit,\n contentEl,\n onScrollUp,\n onScrollDown,\n } = options\n\n const userScrolledUp = ref(false)\n const isAtBottom = ref(true)\n let isAutoScrolling = false\n let mutationObserver: MutationObserver | null = null\n let resizeObserver: ResizeObserver | null = null\n let initMutationObserver: MutationObserver | null = null\n let contentResizeObserver: ResizeObserver | null = null\n let lastScrollTop = 0\n\n // --- Core scroll ---\n\n const scrollToBottom = (behavior: ScrollBehavior = 'smooth') => {\n if (!scrollEl.value || userScrolledUp.value) {\n return\n }\n isAutoScrolling = true\n scrollEl.value.scrollTo({\n top: scrollEl.value.scrollHeight,\n behavior,\n })\n const unlockDelay = behavior === 'instant' ? 0 : SMOOTH_SCROLL_DURATION\n setTimeout(() => {\n isAutoScrolling = false\n }, unlockDelay)\n }\n\n // --- User scroll detection ---\n // Intent to scroll away comes from input events (wheel/touch): unlike\n // scroll deltas they are never produced by programmatic scrolls, layout\n // shifts or elastic overscroll bounces, so the auto-scroll never fights\n // the user nor disables itself spuriously.\n\n const onWheel = (event: WheelEvent) => {\n if (event.deltaY < 0) {\n userScrolledUp.value = true\n }\n }\n\n let lastTouchY = 0\n const onTouchStart = (event: TouchEvent) => {\n lastTouchY = event.touches[0]?.clientY ?? 0\n }\n const onTouchMove = (event: TouchEvent) => {\n const y = event.touches[0]?.clientY ?? 0\n // Finger moving down drags the content up\n if (y > lastTouchY) {\n userScrolledUp.value = true\n }\n lastTouchY = y\n }\n\n const handleScroll = () => {\n if (!scrollEl.value) {\n return\n }\n const {\n scrollTop: currentScrollTop,\n scrollHeight,\n clientHeight,\n } = scrollEl.value\n isAtBottom.value =\n scrollHeight - clientHeight - currentScrollTop <\n NEAR_BOTTOM_THRESHOLD\n if (isAutoScrolling) {\n lastScrollTop = currentScrollTop\n return\n }\n\n if (currentScrollTop < lastScrollTop) {\n onScrollUp?.()\n }\n\n if (currentScrollTop > lastScrollTop) {\n // Back at the bottom: re-enable auto-scroll\n if (isAtBottom.value) {\n userScrolledUp.value = false\n }\n onScrollDown?.()\n }\n\n lastScrollTop = currentScrollTop\n }\n\n // --- Streaming auto-follow ---\n // Tracks the growing content towards the bottom, but never above the\n // current position nor past `autoScrollLimit` (the freshly sent user\n // message anchored at the top of the viewport — the counterpart of the\n // last-message spacer in PkChatbotMessages). Once the user moves past\n // the limit, the follow tracks the bottom again.\n const autoFollow = () => {\n if (isAutoScrolling || userScrolledUp.value || !scrollEl.value) {\n return\n }\n const el = scrollEl.value\n const bottom = el.scrollHeight - el.clientHeight\n const limit = autoScrollLimit?.()\n const target =\n limit !== undefined && el.scrollTop <= limit + 1\n ? Math.min(bottom, limit)\n : bottom\n isAtBottom.value = bottom - target < NEAR_BOTTOM_THRESHOLD\n if (target <= el.scrollTop) {\n return\n }\n isAutoScrolling = true\n el.scrollTop = target\n requestAnimationFrame(() => {\n isAutoScrolling = false\n })\n }\n\n const startMutationScroll = () => {\n if (mutationObserver || !scrollEl.value) {\n return\n }\n mutationObserver = new MutationObserver(autoFollow)\n mutationObserver.observe(scrollEl.value, {\n childList: true,\n subtree: true,\n characterData: true,\n })\n }\n\n const stopMutationScroll = () => {\n mutationObserver?.disconnect()\n mutationObserver = null\n }\n\n // --- Status watcher ---\n\n watch(status, (newStatus, oldStatus) => {\n if (newStatus === 'streaming' || newStatus === 'submitted') {\n startMutationScroll()\n return\n }\n if (newStatus === 'ready' && oldStatus === 'streaming') {\n // Keep observer active to catch footer buttons rendering\n return\n }\n stopMutationScroll()\n })\n\n // --- New message watcher ---\n\n watch(messagesLength, async () => {\n if (!messagesLength()) {\n return\n }\n if (lastMessageRole() === 'assistant') {\n return\n }\n // A user send ends the initial-load phase: on a chat whose content\n // first overflows while the answer streams in, the initial observers\n // would otherwise slam the scroll to the bottom past the anchor\n cleanupInitialObservers()\n userScrolledUp.value = false\n isAutoScrolling = true\n await nextTick()\n scrollToBottom()\n })\n\n // --- Initial scroll ---\n\n let initialScrollTimer: ReturnType<typeof setTimeout> | null = null\n const INITIAL_SCROLL_SETTLE_MS = 300\n\n const tryInitialScroll = () => {\n if (!scrollEl.value) {\n return\n }\n if (scrollEl.value.scrollHeight <= scrollEl.value.clientHeight) {\n return\n }\n scrollEl.value.scrollTop = scrollEl.value.scrollHeight\n\n // Reset the settle timer on each mutation — disconnect only after stability\n if (initialScrollTimer) {\n clearTimeout(initialScrollTimer)\n }\n initialScrollTimer = setTimeout(\n cleanupInitialObservers,\n INITIAL_SCROLL_SETTLE_MS,\n )\n }\n\n const cleanupInitialObservers = () => {\n resizeObserver?.disconnect()\n resizeObserver = null\n initMutationObserver?.disconnect()\n initMutationObserver = null\n if (initialScrollTimer) {\n clearTimeout(initialScrollTimer)\n initialScrollTimer = null\n }\n }\n\n onMounted(() => {\n if (!scrollEl.value) {\n return\n }\n scrollEl.value.addEventListener('wheel', onWheel, { passive: true })\n scrollEl.value.addEventListener('touchstart', onTouchStart, {\n passive: true,\n })\n scrollEl.value.addEventListener('touchmove', onTouchMove, {\n passive: true,\n })\n\n // Mounted mid-send (e.g. fullscreen first message: the messages view\n // replaces the empty state after the message is already in) is not a\n // history load: skip the initial bottom-jump and follow the stream\n // from the anchored position instead.\n const isSendInFlight =\n status() === 'submitted' || status() === 'streaming'\n if (isSendInFlight) {\n startMutationScroll()\n } else {\n resizeObserver = new ResizeObserver(tryInitialScroll)\n resizeObserver.observe(scrollEl.value)\n\n initMutationObserver = new MutationObserver(tryInitialScroll)\n initMutationObserver.observe(scrollEl.value, {\n childList: true,\n subtree: true,\n })\n }\n\n // Late content growth: tool outputs render lazily (async chunks,\n // dynamic imports: diagrams, images...) and can change the content\n // height long after the initial scroll settled. The wrapper height\n // tracks the content height (the scroll element itself never\n // resizes with it).\n const wrapper = contentEl?.() ?? scrollEl.value.firstElementChild\n if (wrapper) {\n contentResizeObserver = new ResizeObserver(autoFollow)\n contentResizeObserver.observe(wrapper)\n }\n\n if (!isSendInFlight) {\n tryInitialScroll()\n }\n })\n\n onBeforeUnmount(() => {\n scrollEl.value?.removeEventListener('wheel', onWheel)\n scrollEl.value?.removeEventListener('touchstart', onTouchStart)\n scrollEl.value?.removeEventListener('touchmove', onTouchMove)\n contentResizeObserver?.disconnect()\n contentResizeObserver = null\n stopMutationScroll()\n cleanupInitialObservers()\n })\n\n return {\n handleScroll,\n scrollToBottom,\n userScrolledUp,\n isAtBottom,\n }\n}\n","<script lang=\"ts\" setup>\n import type {\n ChatMessageActions,\n MessageFeedback,\n RevisedAnswer,\n UIChatMessage,\n } from 'models'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n import PkChatbotError from './PkChatbotError.vue'\n import PkChatbotFeedbackForm from './PkChatbotFeedbackForm.vue'\n import PkChatbotMessageFeedback from './PkChatbotMessageFeedback.vue'\n import PkChatbotFilePreview from './PkChatbotFilePreview.vue'\n import PkRelativeTime from '../PkRelativeTime.vue'\n import { useI18n } from 'vue-i18n'\n import {\n useTemplateRef,\n ref,\n watch,\n computed,\n nextTick,\n useSlots,\n } from 'vue'\n import { toolComponentMap } from './toolComponentMap'\n import PkChatbotSteps from './PkChatbotSteps.vue'\n import {\n resolveContrastColor,\n getPartState,\n isTextPart,\n isFilePart,\n isToolPart,\n isReasoningPart,\n isStreamingPart,\n getPartIcon,\n getToolPartLabel,\n mergeConsecutiveTextParts,\n formatDuration,\n } from './utils'\n import { getFilePartMedia, getToolPartName, toKebabCase } from 'utils'\n import PkStreamingMarkdownAutoscroll from './PkStreamingMarkdownAutoscroll.vue'\n import PkChatbotOutlineRail from './PkChatbotOutlineRail.vue'\n import { useChatScroll } from './useChatScroll'\n\n const props = defineProps<{\n status?: 'submitted' | 'streaming' | 'ready' | 'error'\n messages?: UIChatMessage[]\n error?: Error\n actions?: ChatMessageActions[]\n mainColor?: string\n textColor?: 'auto' | 'white' | 'black'\n revisedAnswers?: RevisedAnswer[]\n messageFeedbacks?: MessageFeedback[]\n /**\n * Render the vote/feedback action buttons as read-only state indicators\n * (e.g. admin chat-logs view): icons reflect the user's feedback but the\n * buttons are not interactive.\n */\n readonlyFeedback?: boolean\n disableHeightAdjustment?: boolean\n showMessageDateTime?: boolean\n showMessageTokensCount?: boolean\n showAllMessageParts?: boolean\n showExtendedSteps?: boolean\n isDark?: boolean\n /** Show a floating \"back to bottom\" button when the user scrolls up (fullscreen layout) */\n showScrollToBottom?: boolean\n // TODO: move feedback in a separate component to avoid passing these props\n feedbackMessageId?: string\n feedbackLoading?: boolean\n feedbackSubmitted?: boolean\n feedbackError?: string\n }>()\n\n const emit = defineEmits<{\n (e: 'show-info', message: UIChatMessage): void\n (e: 'regenerate'): void\n (e: 'revise', message: UIChatMessage): void\n (e: 'upvote', message: UIChatMessage): void\n (e: 'downvote', message: UIChatMessage): void\n (e: 'feedback', message: UIChatMessage): void\n (e: 'feedback-submit', comment: string): void\n (e: 'feedback-close'): void\n (e: 'scroll-up'): void\n (e: 'scroll-down'): void\n (e: 'auto-retry'): void\n (e: 'reset-chat'): void\n }>()\n\n const {\n t: $t,\n d: $d,\n n: $n,\n } = useI18n({\n useScope: 'global',\n })\n\n const slots = useSlots()\n\n const scrollEl = useTemplateRef<HTMLDivElement>('scrollEl')\n const wrapperEl = useTemplateRef<HTMLDivElement>('wrapperEl')\n const contrastColor = computed(() =>\n resolveContrastColor(props.textColor, props.mainColor),\n )\n\n // --- Scroll ---\n\n const messagesElRefs = useTemplateRef<HTMLDivElement[]>('messagesEl')\n\n // ScrollTop that rests the last user message at the top of the content\n // area: the streaming auto-follow stops there so the freshly sent\n // message never slides under the page header. Only applied when the\n // scroll-to-bottom button is available as the affordance to go past it.\n const lastUserMessageScrollLimit = () => {\n const scroller = scrollEl.value\n const lastUserMessageIndex = props.messages\n ?.map((message) => message.role)\n .lastIndexOf('user')\n const messageEl = messagesElRefs.value?.[lastUserMessageIndex ?? -1]\n if (!props.showScrollToBottom || !scroller || !messageEl) {\n return undefined\n }\n return (\n scroller.scrollTop +\n messageEl.getBoundingClientRect().top -\n scroller.getBoundingClientRect().top -\n Number.parseFloat(getComputedStyle(scroller).paddingTop)\n )\n }\n\n const { handleScroll, scrollToBottom, userScrolledUp, isAtBottom } =\n useChatScroll({\n scrollEl,\n status: () => props.status,\n messagesLength: () => props.messages?.length,\n lastMessageRole: () =>\n props.messages?.[props.messages.length - 1]?.role,\n autoScrollLimit: lastUserMessageScrollLimit,\n contentEl: () => wrapperEl.value,\n onScrollUp: () => emit('scroll-up'),\n onScrollDown: () => emit('scroll-down'),\n })\n\n const onScrollToBottomClick = () => {\n // scrollToBottom() is a no-op while userScrolledUp is set\n userScrolledUp.value = false\n scrollToBottom()\n }\n\n // --- Conversation outline (fullscreen, desktop) ---\n\n const outlineItems = computed(() =>\n (props.messages ?? [])\n .filter((message) => message.role === 'user')\n .map((message) => ({\n id: message.id,\n preview:\n message.parts.find(isTextPart)?.text.trim().slice(0, 120) ||\n '…',\n })),\n )\n const activeOutlineId = ref<string>()\n\n // The rail entries map 1:1 onto the rendered user messages\n const getUserMessageEls = () =>\n scrollEl.value?.querySelectorAll('.pk-chatbot-message--user') ?? []\n\n // Scroll-spy: active is the last user message above the middle of the\n // viewport (the exchange currently being read)\n const updateActiveOutline = () => {\n const scroller = scrollEl.value\n if (!scroller || !props.showScrollToBottom) {\n return\n }\n const line =\n scroller.getBoundingClientRect().top + scroller.clientHeight / 2\n let active = outlineItems.value[0]?.id\n getUserMessageEls().forEach((el, index) => {\n if (el.getBoundingClientRect().top <= line) {\n active = outlineItems.value[index]?.id\n }\n })\n activeOutlineId.value = active\n }\n\n watch(outlineItems, async () => {\n await nextTick()\n updateActiveOutline()\n })\n\n const onScroll = () => {\n handleScroll()\n updateActiveOutline()\n }\n\n const scrollToUserMessage = (id: string) => {\n const scroller = scrollEl.value\n const index = outlineItems.value.findIndex((item) => item.id === id)\n const messageEl = getUserMessageEls()[index]\n if (!scroller || !messageEl) {\n return\n }\n // Intentional jump away from the live tail: the wheel/touch intent\n // detection cannot see programmatic scrolls, pause the auto-follow\n // explicitly (reaching the bottom again re-enables it)\n userScrolledUp.value = true\n // Same resting line as a freshly sent message: top of the content area\n scroller.scrollTo({\n top:\n scroller.scrollTop +\n messageEl.getBoundingClientRect().top -\n scroller.getBoundingClientRect().top -\n Number.parseFloat(getComputedStyle(scroller).paddingTop),\n behavior: 'smooth',\n })\n }\n\n // --- Height adjustment ---\n\n const height = ref<number>(0)\n\n // Recalculate when a message is added or the conversation changes (the\n // store recreates `messages` on every streamed token, so watching the\n // array reference would re-run this on each character). The height only\n // depends on the last user message height, which is stable while\n // streaming.\n watch(\n () => [\n props.messages?.length,\n props.messages?.[props.messages.length - 1]?.id,\n ],\n async () => {\n const messages = props.messages\n if (!messages?.length || props.disableHeightAdjustment) {\n return\n }\n // The spacer only serves the in-flight exchange, letting the\n // fresh user message anchor at the top while the answer streams.\n // On plain loads (e.g. opening an old conversation) it would\n // just leave a large void after the last message.\n const isExchangeInFlight =\n messages[messages.length - 1].role === 'user' ||\n props.status === 'submitted' ||\n props.status === 'streaming'\n if (!isExchangeInFlight) {\n return\n }\n await nextTick()\n if (!scrollEl.value) {\n return\n }\n // Spacer sized so the freshly sent user message rests at the top\n // of the content area once scrolled to bottom: subtract both\n // paddings (clientHeight includes them) so any extra top\n // clearance (e.g. the fullscreen overlay header) is respected\n const { paddingTop, paddingBottom } = getComputedStyle(\n scrollEl.value,\n )\n const scrollElHeight =\n scrollEl.value.clientHeight -\n Number.parseFloat(paddingTop) -\n Number.parseFloat(paddingBottom)\n const lastUserMessageIndex = messages\n .map((message) => message.role)\n .lastIndexOf('user')\n const lastUserMessageHeight =\n messagesElRefs.value?.[lastUserMessageIndex]?.clientHeight ?? 0\n const newHeight = scrollElHeight - lastUserMessageHeight\n if (newHeight > 0) {\n height.value = newHeight\n }\n },\n )\n\n // Release the spacer once the exchange is over: it would otherwise\n // leave a large empty area after the last message. The min-height\n // transition settles the layout smoothly (the browser clamps the\n // scroll progressively when the viewport sat inside the removed area).\n watch(\n () => props.status,\n (status) => {\n if (status === 'ready' || status === 'error') {\n height.value = 0\n }\n },\n )\n\n const isRevised = (messageId: string) => {\n return props.revisedAnswers?.some((r) => r.messageId === messageId)\n }\n\n const getMessageFeedback = (messageId: string) =>\n props.messageFeedbacks?.find((f) => f.messageId === messageId)\n\n // Interactive vote/feedback buttons. In read-only mode (admin chat-logs)\n // the vote is shown on the message itself (coloured bubble border + an\n // \"active\" thumb in the footer) and the comment, if any, below it.\n const isFeedbackButtonVisible = (\n kind: 'upvote' | 'downvote' | 'feedback',\n index: number,\n ) => !props.readonlyFeedback && isActionButtonVisible(kind, index)\n\n // Read-only feedback for a message (drives the reaction chip anchored to\n // the bubble). undefined when not in read-only mode.\n const readonlyFeedbackOf = (messageId: string) =>\n props.readonlyFeedback ? getMessageFeedback(messageId) : undefined\n const feedbackVote = (messageId: string) =>\n readonlyFeedbackOf(messageId)?.vote\n // The real reaction glyph, shown ONLY for unmapped reactions (no vote):\n // 👍/❤️/👎 keep the classic thumb icon, while e.g. WhatsApp \"😍\" shows the\n // actual emoji. Platforms that send a type word (Teams \"like\") have a vote\n // and therefore use the icon too.\n const feedbackEmoji = (messageId: string) => {\n const feedback = readonlyFeedbackOf(messageId)\n if (feedback?.vote) {\n return undefined\n }\n const raw = feedback?.metadata?.reactionEmoji\n return typeof raw === 'string' && /\\p{Extended_Pictographic}/u.test(raw)\n ? raw\n : undefined\n }\n const hasReaction = (messageId: string) =>\n Boolean(feedbackVote(messageId) || feedbackEmoji(messageId))\n const reactionToneClass = (messageId: string) => {\n // A real emoji carries its own colour → neutral pill. Only the\n // thumb-icon fallback uses the sentiment colour.\n if (feedbackEmoji(messageId)) {\n return 'pk-chatbot-message__reaction--neutral'\n }\n const vote = feedbackVote(messageId)\n if (vote === 'upvote') {\n return 'pk-chatbot-message__reaction--positive'\n }\n if (vote === 'downvote') {\n return 'pk-chatbot-message__reaction--negative'\n }\n return 'pk-chatbot-message__reaction--neutral'\n }\n const reactionTitle = (messageId: string) => {\n const vote = feedbackVote(messageId)\n if (vote === 'upvote') {\n return $t('hint.userFeedbackPositive')\n }\n if (vote === 'downvote') {\n return $t('hint.userFeedbackNegative')\n }\n return $t('hint.userFeedbackReaction')\n }\n\n // Index of the last text part: the reaction chip anchors to that bubble so\n // it renders once even when the message has several text parts.\n const lastTextPartIndex = (message: UIChatMessage) => {\n const parts = getMergedParts(message)\n for (let index = parts.length - 1; index >= 0; index -= 1) {\n if (isTextPart(parts[index])) {\n return index\n }\n }\n return -1\n }\n\n const activeMessage = computed(() => {\n return props.messages?.[props.messages.length - 1]\n })\n const activeMessageLastPart = computed(() => {\n const active = activeMessage.value\n if (!active) {\n return null\n }\n return active.parts[active.parts.length - 1]\n })\n\n const mergedPartsMap = computed(() => {\n const map = new Map<string, UIChatMessage['parts']>()\n for (const message of props.messages ?? []) {\n if (message.role === 'assistant') {\n map.set(message.id, mergeConsecutiveTextParts(message.parts))\n }\n }\n return map\n })\n const getMergedParts = (message: UIChatMessage) => {\n return mergedPartsMap.value.get(message.id) ?? message.parts\n }\n const isLoading = computed(() => {\n return props.status === 'submitted' || props.status === 'streaming'\n })\n const isError = computed(() => props.status === 'error')\n\n const activeMessageLastPartLabel = computed(() => {\n const part = activeMessageLastPart.value\n return getToolPartLabel($t, part)\n })\n const activeMessageLastPartIcon = computed(() => {\n const part = activeMessageLastPart.value\n return getPartIcon(part)\n })\n\n const getMessageIndexById = (messageId: string) => {\n return props.messages?.findIndex((m) => m.id === messageId)\n }\n const isLastMessage = (index?: number) => {\n if (index === undefined || !props.messages) {\n return false\n }\n return index === props.messages.length - 1\n }\n const isMessageRegenerateButtonVisible = (index: number) => {\n return (\n isLastMessage(index) &&\n props.status === 'ready' &&\n !!props.actions?.includes('regenerate')\n )\n }\n // On the last message the actions appear only once the answer is ready;\n // on previous messages they are always available.\n const isActionButtonVisible = (\n action: ChatMessageActions,\n index: number,\n ) => {\n return (\n (!isLastMessage(index) || props.status === 'ready') &&\n !!props.actions?.includes(action)\n )\n }\n const isLastTextPart = (message: UIChatMessage) => {\n const lastPart = message.parts[message.parts.length - 1]\n return isTextPart(lastPart)\n }\n const messageHasSteps = (message: UIChatMessage) =>\n message.parts.some((part) => isReasoningPart(part) || isToolPart(part))\n // The extended steps timeline replaces the compact activity indicator as\n // soon as the message has at least one step to show.\n const showStepsTimeline = (message: UIChatMessage) =>\n Boolean(props.showExtendedSteps) &&\n isAssistant(message) &&\n messageHasSteps(message)\n const isAssistant = (message: UIChatMessage) => message.role === 'assistant'\n const isUser = (message: UIChatMessage) => message.role === 'user'\n const getPreviousAssistantMessage = (index: number) => {\n return props.messages\n ?.slice(0, index)\n .reverse()\n .find((message) => isAssistant(message))\n }\n const getNextAssistantMessage = (index: number) => {\n return props.messages\n ?.slice(index + 1)\n .find((message) => isAssistant(message))\n }\n // Returns the date to show in the day divider before the message at\n // `index`, or undefined when the surrounding assistant messages belong\n // to the same (local) day.\n const getDividerDate = (index: number) => {\n const previousCreatedAt =\n getPreviousAssistantMessage(index)?.metadata?.createdAt\n const nextCreatedAt =\n getNextAssistantMessage(index)?.metadata?.createdAt\n if (!previousCreatedAt || !nextCreatedAt) {\n return undefined\n }\n const previousDate = new Date(previousCreatedAt)\n const nextDate = new Date(nextCreatedAt)\n return previousDate.toDateString() !== nextDate.toDateString()\n ? nextDate\n : undefined\n }\n const showMessageFooter = (message: UIChatMessage, index: number) => {\n if (index === 0 || message.role !== 'assistant') {\n return false\n }\n return Boolean(\n props.actions?.length ||\n (props.showMessageDateTime &&\n message.metadata?.createdAt !== undefined) ||\n message.metadata?.completedAt !== undefined ||\n (props.showMessageTokensCount &&\n message.metadata?.totalTokens !== undefined),\n )\n }\n // Hover-only metadata (time + duration), shown when the fixed variant\n // (showMessageDateTime) is off.\n const formatMessageTime = (createdAt: number) => {\n const date = new Date(createdAt)\n const isToday = date.toDateString() === new Date().toDateString()\n return $d(date, isToday ? 'time' : 'date-time')\n }\n const getMessageDuration = (message: UIChatMessage) => {\n const { createdAt, completedAt } = message.metadata ?? {}\n if (!createdAt || !completedAt) {\n return undefined\n }\n return formatDuration($n, completedAt - createdAt)\n }\n // feedback message auto scroll\n const feedbackMessageEl =\n useTemplateRef<InstanceType<typeof PkChatbotFeedbackForm>[]>(\n 'feedbackMessageEl',\n )\n watch(\n () => props.feedbackMessageId,\n async () => {\n await nextTick()\n if (!props.feedbackMessageId) {\n return\n }\n const el = feedbackMessageEl.value?.[0]?.$el\n if (!el) {\n return\n }\n if (isLastMessage(getMessageIndexById(props.feedbackMessageId))) {\n scrollToBottom()\n return\n }\n el.scrollIntoView({ behavior: 'smooth', block: 'center' })\n },\n )\n</script>\n\n<template>\n <div\n ref=\"scrollEl\"\n class=\"pk-chatbot-messages\"\n role=\"log\"\n aria-live=\"polite\"\n aria-relevant=\"additions text\"\n :aria-busy=\"isLoading\"\n :style=\"{\n '--chatbot-main-color': mainColor,\n '--chatbot-contrast-color': contrastColor,\n }\"\n @scroll=\"onScroll\">\n \n <div\n v-if=\"showScrollToBottom && outlineItems.length > 1\"\n class=\"pk-chatbot-messages__outline\">\n <PkChatbotOutlineRail\n :items=\"outlineItems\"\n :active-id=\"activeOutlineId\"\n @select=\"scrollToUserMessage\" />\n </div>\n <div ref=\"wrapperEl\" class=\"pk-chatbot-messages__wrapper\">\n <template v-for=\"(message, index) in messages\" :key=\"message.id\">\n <div\n v-if=\"isUser(message) && getDividerDate(index)\"\n class=\"pk-chatbot-divider\">\n <span class=\"pk-chatbot-divider__label\">\n {{ $d(getDividerDate(index)!, 'short') }}\n </span>\n </div>\n <div\n v-if=\"\n message.parts.length ||\n (isLastMessage(index) &&\n isLoading &&\n isAssistant(message))\n \"\n ref=\"messagesEl\"\n class=\"pk-chatbot-message\"\n :class=\"[\n `pk-chatbot-message--${message.role}`,\n {\n 'pk-chatbot-message--loading':\n isLoading &&\n isLastMessage(index) &&\n isAssistant(message),\n },\n ]\"\n :style=\"{\n minHeight:\n isLastMessage(index) &&\n isAssistant(message) &&\n !isError\n ? `${height}px`\n : undefined,\n }\">\n <transition appear name=\"pk-chatbot-part\">\n <PkChatbotSteps\n v-if=\"showStepsTimeline(message)\"\n :message\n :is-streaming=\"isLoading && isLastMessage(index)\"\n :is-dark />\n </transition>\n <template\n v-for=\"(part, partIndex) in getMergedParts(message)\"\n :key=\"partIndex\">\n <transition\n v-if=\"isTextPart(part) && part.text.trim()\"\n appear\n name=\"pk-chatbot-part\">\n <div class=\"pk-chatbot-message__text\">\n <slot\n v-bind=\"{\n message,\n part,\n index,\n isLoading,\n }\"\n name=\"text\">\n <PkStreamingMarkdown\n v-if=\"isAssistant(message)\"\n class=\"wysiwyg\"\n :markdown=\"part.text\"\n :is-dark\n :loading=\"\n isLastMessage(index) &&\n status === 'streaming'\n \" />\n <template v-else>\n {{ part.text }}\n </template>\n </slot>\n \n <span\n v-if=\"\n hasReaction(message.id) &&\n !getMessageFeedback(message.id)\n ?.comment &&\n partIndex === lastTextPartIndex(message)\n \"\n class=\"pk-chatbot-message__reaction\"\n :class=\"reactionToneClass(message.id)\"\n :title=\"reactionTitle(message.id)\">\n <span\n v-if=\"feedbackEmoji(message.id)\"\n class=\"pk-chatbot-message__reaction-emoji\">\n {{ feedbackEmoji(message.id) }}\n </span>\n <VvIcon\n v-else\n :name=\"\n feedbackVote(message.id) ===\n 'downvote'\n ? 'ri:thumb-down-fill'\n : 'ri:thumb-up-fill'\n \" />\n </span>\n </div>\n </transition>\n <transition\n v-else-if=\"isFilePart(part)\"\n appear\n name=\"pk-chatbot-part\">\n <PkChatbotFilePreview\n :media-type=\"part.mediaType\"\n :url=\"part.url\"\n :filename=\"part.filename\"\n :size=\"getFilePartMedia(part)?.bytesCount\" />\n </transition>\n <transition\n v-else-if=\"\n isToolPart(part) &&\n !isStreamingPart(part) &&\n (toolComponentMap[getToolPartName(part)] ||\n slots[part.type] ||\n showAllMessageParts)\n \"\n appear\n name=\"pk-chatbot-part\">\n <component\n :is=\"toolComponentMap[getToolPartName(part)]\"\n v-if=\"\n !slots[part.type] &&\n toolComponentMap[getToolPartName(part)]\n \"\n :key=\"`component-${partIndex}-${getPartState(part)}`\"\n :part />\n <slot\n v-else\n :name=\"part.type\"\n v-bind=\"{\n message,\n part,\n index,\n isLoading,\n }\">\n <div\n v-if=\"showAllMessageParts\"\n class=\"pk-chatbot-message__loading-info\">\n <div class=\"flex gap-8 items-center\">\n <VvIcon\n v-if=\"getPartIcon(part)\"\n :name=\"getPartIcon(part)!\"\n class=\"shrink-0\" />\n <code class=\"font-mono rounded text-12\">\n {{ toKebabCase(part.type) }}\n </code>\n </div>\n </div>\n </slot>\n </transition>\n \n <transition mode=\"out-in\">\n <PkChatbotMessageFeedback\n v-if=\"\n partIndex === lastTextPartIndex(message) &&\n readonlyFeedback &&\n getMessageFeedback(message.id)?.comment\n \"\n :feedback=\"getMessageFeedback(message.id)!\" />\n </transition>\n </template>\n <transition name=\"fade-in\" mode=\"out-in\">\n <div\n v-if=\"\n isLoading &&\n isLastMessage(index) &&\n !isLastTextPart(message) &&\n isAssistant(message) &&\n !showStepsTimeline(message)\n \"\n :key=\"`loading-info-${message.id}`\"\n class=\"pk-chatbot-message__loading-info\">\n <div class=\"flex gap-8 items-center\">\n <VvIcon\n name=\"line-md:loading-loop\"\n class=\"shrink-0\" />\n <transition mode=\"out-in\">\n <VvIcon\n v-if=\"activeMessageLastPartIcon\"\n :key=\"activeMessageLastPartIcon\"\n class=\"shrink-0\"\n :name=\"activeMessageLastPartIcon\" />\n </transition>\n <transition mode=\"out-in\">\n <span\n v-if=\"activeMessageLastPartLabel\"\n :key=\"activeMessageLastPartLabel\"\n class=\"text-12\">\n {{ activeMessageLastPartLabel }}\n </span>\n </transition>\n </div>\n <transition name=\"fade-in\" mode=\"out-in\">\n <PkStreamingMarkdownAutoscroll\n v-if=\"\n activeMessageLastPart &&\n 'text' in activeMessageLastPart &&\n activeMessageLastPart.text.trim()\n \"\n :markdown=\"activeMessageLastPart.text\"\n :is-dark\n inner-class=\"wysiwyg\"\n class=\"border border-surface-4 rounded p-4 mt-8 bg-surface-1 max-h-64 text-12 w-full\" />\n </transition>\n </div>\n </transition>\n <transition mode=\"out-in\">\n <div\n v-if=\"showMessageFooter(message, index)\"\n class=\"pk-chatbot-message__footer\">\n <VvButtonGroup\n modifiers=\"compact\"\n class=\"mr-auto shrink-0\">\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isMessageRegenerateButtonVisible(\n index,\n )\n \"\n icon=\"ri:reset-right-line\"\n modifiers=\"action-quiet-small\"\n :title=\"$t('action.regenerate')\"\n :aria-label=\"$t('action.regenerate')\"\n @click.stop=\"$emit('regenerate')\" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isActionButtonVisible(\n 'show-info',\n index,\n )\n \"\n icon=\"ri:information-line\"\n :title=\"$t('action.getMoreInfo')\"\n :aria-label=\"$t('action.getMoreInfo')\"\n modifiers=\"action-quiet-small\"\n @click.stop=\"\n $emit('show-info', message)\n \" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isActionButtonVisible(\n 'revise',\n index,\n )\n \"\n :icon=\"\n isRevised(message.id)\n ? 'ri:file-edit-fill'\n : 'ri:file-edit-line'\n \"\n :title=\"\n isRevised(message.id)\n ? $t('action.editRevise')\n : $t('action.createRevise')\n \"\n :aria-label=\"\n isRevised(message.id)\n ? $t('action.editRevise')\n : $t('action.createRevise')\n \"\n modifiers=\"action-quiet-small\"\n :class=\"{\n 'text-brand': isRevised(message.id),\n }\"\n @click.stop=\"\n $emit('revise', message)\n \" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isFeedbackButtonVisible(\n 'upvote',\n index,\n )\n \"\n :icon=\"\n getMessageFeedback(message.id)\n ?.vote === 'upvote'\n ? 'ri:thumb-up-fill'\n : 'ri:thumb-up-line'\n \"\n :title=\"$t('action.upvote')\"\n :aria-label=\"$t('action.upvote')\"\n modifiers=\"action-quiet-small\"\n @click.stop=\"\n $emit('upvote', message)\n \" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isFeedbackButtonVisible(\n 'downvote',\n index,\n )\n \"\n :icon=\"\n getMessageFeedback(message.id)\n ?.vote === 'downvote'\n ? 'ri:thumb-down-fill'\n : 'ri:thumb-down-line'\n \"\n :title=\"$t('action.downvote')\"\n :aria-label=\"$t('action.downvote')\"\n modifiers=\"action-quiet-small\"\n @click.stop=\"\n $emit('downvote', message)\n \" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isFeedbackButtonVisible(\n 'feedback',\n index,\n )\n \"\n :icon=\"\n getMessageFeedback(message.id)\n ?.comment\n ? 'ri:feedback-fill'\n : 'ri:feedback-line'\n \"\n :title=\"$t('action.feedback')\"\n :aria-label=\"$t('action.feedback')\"\n modifiers=\"action-quiet-small\"\n @click.stop=\"\n $emit('feedback', message)\n \" />\n </transition>\n </VvButtonGroup>\n <div\n v-if=\"\n !showMessageDateTime &&\n message.metadata?.createdAt &&\n message.metadata?.completedAt\n \"\n class=\"pk-chatbot-message__hover-meta\">\n <time\n :datetime=\"\n new Date(\n message.metadata.createdAt,\n ).toISOString()\n \"\n :title=\"\n $d(\n new Date(\n message.metadata.createdAt,\n ),\n 'date-time',\n )\n \"\n class=\"flex items-center gap-4 min-w-0\">\n <VvIcon\n name=\"ri:time-line\"\n class=\"shrink-0\" />\n <span class=\"truncate\">{{\n formatMessageTime(\n message.metadata.createdAt,\n )\n }}</span>\n </time>\n <span\n v-if=\"getMessageDuration(message)\"\n class=\"flex items-center gap-4 min-w-0\">\n <VvIcon\n name=\"ri:hourglass-line\"\n class=\"shrink-0\" />\n <span class=\"truncate\">{{\n getMessageDuration(message)\n }}</span>\n </span>\n </div>\n <span\n v-if=\"\n showMessageTokensCount &&\n message.metadata?.totalTokens\n \"\n class=\"flex items-center gap-4 text-12 text-word-3\">\n <VvIcon\n name=\"ri:ai-generate-2-line\"\n class=\"shrink-0\" />\n <span class=\"truncate\"\n >{{\n $n(\n message.metadata.totalTokens,\n 'integer',\n )\n }}\n {{ $t('label.tokens') }}\n </span>\n </span>\n <time\n v-if=\"\n showMessageDateTime &&\n message.metadata?.createdAt\n \"\n :datetime=\"\n new Date(\n message.metadata?.createdAt,\n ).toISOString()\n \"\n class=\"flex items-center gap-4 text-12 text-word-3\">\n <VvIcon name=\"ri:time-line\" class=\"shrink-0\" />\n <span class=\"truncate\">{{\n $d(\n new Date(message.metadata?.createdAt),\n 'date-time',\n )\n }}</span>\n </time>\n <div\n v-if=\"\n showMessageDateTime &&\n message?.metadata?.completedAt &&\n message?.metadata?.createdAt\n \"\n class=\"flex items-center gap-4 text-12 text-word-3\">\n <VvIcon\n name=\"ri:hourglass-line\"\n class=\"shrink-0\" />\n <PkRelativeTime\n class=\"truncate\"\n :date=\"message.metadata?.createdAt\"\n :end-date=\"message.metadata?.completedAt\" />\n </div>\n </div>\n </transition>\n <transition mode=\"out-in\">\n <PkChatbotFeedbackForm\n v-if=\"message.id === feedbackMessageId\"\n ref=\"feedbackMessageEl\"\n :loading=\"feedbackLoading\"\n :submitted=\"feedbackSubmitted\"\n :error=\"feedbackError\"\n @submit=\"$emit('feedback-submit', $event)\"\n @close=\"$emit('feedback-close')\" />\n </transition>\n </div>\n </template>\n <transition appear name=\"pk-chatbot-part\">\n <PkChatbotError\n v-if=\"isError\"\n :error\n @retry=\"$emit('auto-retry')\"\n @reset=\"$emit('reset-chat')\" />\n </transition>\n <div\n v-if=\"activeMessage?.role === 'user' || isError\"\n class=\"pk-chatbot-messages__spacer\"\n :style=\"{ minHeight: `${height}px` }\"></div>\n </div>\n <Transition name=\"pk-chatbot-messages-fab\">\n <button\n v-if=\"showScrollToBottom && (userScrolledUp || !isAtBottom)\"\n type=\"button\"\n class=\"pk-chatbot-messages__scroll-to-bottom\"\n :title=\"$t('action.scrollToBottom')\"\n :aria-label=\"$t('action.scrollToBottom')\"\n @click=\"onScrollToBottomClick\">\n <VvIcon name=\"ri:arrow-down-line\" />\n </button>\n </Transition>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-chatbot-messages {\n overflow-y: auto;\n flex: 1;\n min-width: 0;\n font-size: var(--text-14);\n\n scrollbar-width: thin;\n scrollbar-color: var(--color-word-5) var(--color-surface-1);\n\n &__wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-16);\n min-width: 0;\n }\n\n // Conversation outline rail: sticky shell pinned to the vertical\n // middle of the scroll area, at the right edge. Zero-sized and\n // first in flow so neither it nor its absolutely-positioned pieces\n // inflate scrollHeight (desktop only, like ChatGPT)\n &__outline {\n display: none;\n position: sticky;\n top: 50%;\n z-index: 2;\n flex: none;\n align-self: flex-end;\n height: 0;\n\n @include media-breakpoint-up('md', $breakpoints) {\n display: block;\n }\n\n .pk-chatbot-outline {\n position: absolute;\n top: 0;\n right: 0;\n transform: translateY(-50%);\n }\n }\n\n // Placeholder while the answer has not started yet: settles like\n // the message spacer when released\n &__spacer {\n transition: min-height 300ms var(--ease-out);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n // Floating \"back to bottom\" button, sticky inside the scroll area\n &__scroll-to-bottom {\n position: sticky;\n bottom: var(--spacing-8);\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n // The scroll container is a flex column: without this the\n // overflowing content shrinks the button, ignoring its height\n flex: none;\n width: var(--spacing-36);\n height: var(--spacing-36);\n // Net-zero layout contribution: mounting/unmounting the button\n // must not change scrollHeight, or reaching the bottom (which\n // hides it) would clamp scrollTop and cause a visible jump\n margin-block-start: calc(-1 * var(--spacing-36));\n margin-inline: auto;\n border: 1px solid var(--color-surface-3);\n border-radius: var(--rounded-full);\n background-color: var(--color-surface-1);\n box-shadow: var(--shadow-md);\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 }\n\n .pk-chatbot-messages-fab-enter-active,\n .pk-chatbot-messages-fab-leave-active {\n transition: opacity 150ms var(--ease-out);\n }\n\n .pk-chatbot-messages-fab-enter-from,\n .pk-chatbot-messages-fab-leave-to {\n opacity: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .pk-chatbot-messages-fab-enter-active,\n .pk-chatbot-messages-fab-leave-active {\n transition: none;\n }\n }\n\n .pk-chatbot-divider {\n position: relative;\n border-bottom: 1px solid var(--color-surface-3);\n\n &__label {\n position: absolute;\n padding-inline: var(--spacing-8);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--color-surface);\n color: var(--color-word-4);\n font-size: var(--text-12);\n }\n }\n\n .pk-chatbot-message {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sm);\n min-width: 0;\n align-items: flex-start;\n overflow: hidden;\n max-width: 100%;\n background-color: var(--color-surface);\n // The anchor spacer (inline min-height on the last assistant\n // message) settles smoothly when released at the end of the stream\n transition: min-height 300ms var(--ease-out);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n\n &__text {\n position: relative;\n color: var(--color-word-2);\n line-height: var(--leading-normal);\n border-width: var(--spacing-px);\n border-style: solid;\n border-color: var(--color-surface-3);\n padding: var(--spacing-sm);\n border-radius: var(--rounded-xl) var(--rounded-xl) var(--rounded-xl)\n 0;\n }\n\n // Read-only feedback: a circular vote chip that overlaps the bubble's\n // bottom-right corner (messaging-app style). White ring lifts it off\n // the bubble; solid accent makes the rating unmistakable.\n &__reaction {\n position: absolute;\n right: var(--spacing-8);\n bottom: 0;\n transform: translateY(50%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--spacing-24);\n height: var(--spacing-24);\n border-radius: var(--rounded-full, 9999px);\n color: var(--color-white, #fff);\n font-size: var(--text-12);\n box-shadow: var(--shadow-md);\n\n &--positive {\n background-color: var(--color-success);\n }\n\n &--negative {\n background-color: var(--color-danger);\n }\n\n // Real emoji (e.g. WhatsApp): the glyph carries its own colour, so\n // the chip stays a neutral surface pill.\n &--neutral {\n background-color: var(--color-surface-1);\n }\n }\n\n &__reaction-emoji {\n // Smaller than the chip so the glyph doesn't touch the ring.\n font-size: var(--text-12);\n line-height: 1;\n }\n\n &__loading-info {\n line-height: var(--leading-normal);\n border-width: var(--spacing-px);\n border-style: solid;\n border-color: var(--color-surface-3);\n padding: var(--spacing-sm);\n border-radius: var(--rounded-xl) var(--rounded-xl) var(--rounded-xl)\n 0;\n font-size: var(--text-12);\n color: var(--color-word-3);\n }\n\n &__footer {\n width: 100%;\n display: flex;\n gap: var(--spacing-8);\n align-items: center;\n }\n\n &__hover-meta {\n display: flex;\n min-width: 0;\n align-items: center;\n gap: var(--spacing-8);\n font-size: var(--text-12);\n color: var(--color-word-3);\n white-space: nowrap;\n font-variant-numeric: tabular-nums;\n opacity: 0;\n transition: opacity 0.2s ease;\n }\n\n &:hover &__hover-meta,\n &:focus-within &__hover-meta {\n opacity: 1;\n }\n\n // Hover doesn't exist on touch devices: keep the metadata visible\n @media (hover: none) {\n &__hover-meta {\n opacity: 1;\n }\n }\n\n &--user {\n align-items: flex-end;\n\n .pk-chatbot-message__text {\n background-color: var(\n --chatbot-main-color,\n var(--color-surface-1)\n );\n border-color: var(--chatbot-main-color, var(--color-surface-4));\n color: var(--chatbot-contrast-color, var(--color-word-1));\n border-radius: var(--rounded-xl) var(--rounded-xl) 0\n var(--rounded-xl);\n }\n }\n\n &--assistant {\n width: 100%;\n gap: var(--spacing-16);\n\n .pk-chatbot-message__text {\n width: 100%;\n }\n }\n\n &--system {\n align-items: flex-end;\n\n .pk-chatbot-message__text {\n display: flex;\n gap: var(--spacing-8);\n font-size: var(--text-12);\n padding: var(--spacing-8) var(--spacing-sm);\n align-items: center;\n border-color: var(--chatbot-main-color, var(--color-surface-4));\n color: var(--chatbot-main-color, var(--color-word-1));\n border-radius: var(--rounded-xl) var(--rounded-xl) 0\n var(--rounded-xl);\n }\n }\n }\n\n .pk-chatbot-part-enter-active {\n transition:\n opacity 0.25s ease,\n transform 0.25s ease;\n }\n\n .pk-chatbot-part-enter-from {\n opacity: 0;\n transform: translateY(8px);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .pk-chatbot-part-enter-active {\n transition: none;\n }\n\n .pk-chatbot-part-enter-from {\n transform: none;\n }\n }\n</style>\n","<script lang=\"ts\" setup>\n import type {\n ChatMessageActions,\n MessageFeedback,\n RevisedAnswer,\n UIChatMessage,\n } from 'models'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n import PkChatbotError from './PkChatbotError.vue'\n import PkChatbotFeedbackForm from './PkChatbotFeedbackForm.vue'\n import PkChatbotMessageFeedback from './PkChatbotMessageFeedback.vue'\n import PkChatbotFilePreview from './PkChatbotFilePreview.vue'\n import PkRelativeTime from '../PkRelativeTime.vue'\n import { useI18n } from 'vue-i18n'\n import {\n useTemplateRef,\n ref,\n watch,\n computed,\n nextTick,\n useSlots,\n } from 'vue'\n import { toolComponentMap } from './toolComponentMap'\n import PkChatbotSteps from './PkChatbotSteps.vue'\n import {\n resolveContrastColor,\n getPartState,\n isTextPart,\n isFilePart,\n isToolPart,\n isReasoningPart,\n isStreamingPart,\n getPartIcon,\n getToolPartLabel,\n mergeConsecutiveTextParts,\n formatDuration,\n } from './utils'\n import { getFilePartMedia, getToolPartName, toKebabCase } from 'utils'\n import PkStreamingMarkdownAutoscroll from './PkStreamingMarkdownAutoscroll.vue'\n import PkChatbotOutlineRail from './PkChatbotOutlineRail.vue'\n import { useChatScroll } from './useChatScroll'\n\n const props = defineProps<{\n status?: 'submitted' | 'streaming' | 'ready' | 'error'\n messages?: UIChatMessage[]\n error?: Error\n actions?: ChatMessageActions[]\n mainColor?: string\n textColor?: 'auto' | 'white' | 'black'\n revisedAnswers?: RevisedAnswer[]\n messageFeedbacks?: MessageFeedback[]\n /**\n * Render the vote/feedback action buttons as read-only state indicators\n * (e.g. admin chat-logs view): icons reflect the user's feedback but the\n * buttons are not interactive.\n */\n readonlyFeedback?: boolean\n disableHeightAdjustment?: boolean\n showMessageDateTime?: boolean\n showMessageTokensCount?: boolean\n showAllMessageParts?: boolean\n showExtendedSteps?: boolean\n isDark?: boolean\n /** Show a floating \"back to bottom\" button when the user scrolls up (fullscreen layout) */\n showScrollToBottom?: boolean\n // TODO: move feedback in a separate component to avoid passing these props\n feedbackMessageId?: string\n feedbackLoading?: boolean\n feedbackSubmitted?: boolean\n feedbackError?: string\n }>()\n\n const emit = defineEmits<{\n (e: 'show-info', message: UIChatMessage): void\n (e: 'regenerate'): void\n (e: 'revise', message: UIChatMessage): void\n (e: 'upvote', message: UIChatMessage): void\n (e: 'downvote', message: UIChatMessage): void\n (e: 'feedback', message: UIChatMessage): void\n (e: 'feedback-submit', comment: string): void\n (e: 'feedback-close'): void\n (e: 'scroll-up'): void\n (e: 'scroll-down'): void\n (e: 'auto-retry'): void\n (e: 'reset-chat'): void\n }>()\n\n const {\n t: $t,\n d: $d,\n n: $n,\n } = useI18n({\n useScope: 'global',\n })\n\n const slots = useSlots()\n\n const scrollEl = useTemplateRef<HTMLDivElement>('scrollEl')\n const wrapperEl = useTemplateRef<HTMLDivElement>('wrapperEl')\n const contrastColor = computed(() =>\n resolveContrastColor(props.textColor, props.mainColor),\n )\n\n // --- Scroll ---\n\n const messagesElRefs = useTemplateRef<HTMLDivElement[]>('messagesEl')\n\n // ScrollTop that rests the last user message at the top of the content\n // area: the streaming auto-follow stops there so the freshly sent\n // message never slides under the page header. Only applied when the\n // scroll-to-bottom button is available as the affordance to go past it.\n const lastUserMessageScrollLimit = () => {\n const scroller = scrollEl.value\n const lastUserMessageIndex = props.messages\n ?.map((message) => message.role)\n .lastIndexOf('user')\n const messageEl = messagesElRefs.value?.[lastUserMessageIndex ?? -1]\n if (!props.showScrollToBottom || !scroller || !messageEl) {\n return undefined\n }\n return (\n scroller.scrollTop +\n messageEl.getBoundingClientRect().top -\n scroller.getBoundingClientRect().top -\n Number.parseFloat(getComputedStyle(scroller).paddingTop)\n )\n }\n\n const { handleScroll, scrollToBottom, userScrolledUp, isAtBottom } =\n useChatScroll({\n scrollEl,\n status: () => props.status,\n messagesLength: () => props.messages?.length,\n lastMessageRole: () =>\n props.messages?.[props.messages.length - 1]?.role,\n autoScrollLimit: lastUserMessageScrollLimit,\n contentEl: () => wrapperEl.value,\n onScrollUp: () => emit('scroll-up'),\n onScrollDown: () => emit('scroll-down'),\n })\n\n const onScrollToBottomClick = () => {\n // scrollToBottom() is a no-op while userScrolledUp is set\n userScrolledUp.value = false\n scrollToBottom()\n }\n\n // --- Conversation outline (fullscreen, desktop) ---\n\n const outlineItems = computed(() =>\n (props.messages ?? [])\n .filter((message) => message.role === 'user')\n .map((message) => ({\n id: message.id,\n preview:\n message.parts.find(isTextPart)?.text.trim().slice(0, 120) ||\n '…',\n })),\n )\n const activeOutlineId = ref<string>()\n\n // The rail entries map 1:1 onto the rendered user messages\n const getUserMessageEls = () =>\n scrollEl.value?.querySelectorAll('.pk-chatbot-message--user') ?? []\n\n // Scroll-spy: active is the last user message above the middle of the\n // viewport (the exchange currently being read)\n const updateActiveOutline = () => {\n const scroller = scrollEl.value\n if (!scroller || !props.showScrollToBottom) {\n return\n }\n const line =\n scroller.getBoundingClientRect().top + scroller.clientHeight / 2\n let active = outlineItems.value[0]?.id\n getUserMessageEls().forEach((el, index) => {\n if (el.getBoundingClientRect().top <= line) {\n active = outlineItems.value[index]?.id\n }\n })\n activeOutlineId.value = active\n }\n\n watch(outlineItems, async () => {\n await nextTick()\n updateActiveOutline()\n })\n\n const onScroll = () => {\n handleScroll()\n updateActiveOutline()\n }\n\n const scrollToUserMessage = (id: string) => {\n const scroller = scrollEl.value\n const index = outlineItems.value.findIndex((item) => item.id === id)\n const messageEl = getUserMessageEls()[index]\n if (!scroller || !messageEl) {\n return\n }\n // Intentional jump away from the live tail: the wheel/touch intent\n // detection cannot see programmatic scrolls, pause the auto-follow\n // explicitly (reaching the bottom again re-enables it)\n userScrolledUp.value = true\n // Same resting line as a freshly sent message: top of the content area\n scroller.scrollTo({\n top:\n scroller.scrollTop +\n messageEl.getBoundingClientRect().top -\n scroller.getBoundingClientRect().top -\n Number.parseFloat(getComputedStyle(scroller).paddingTop),\n behavior: 'smooth',\n })\n }\n\n // --- Height adjustment ---\n\n const height = ref<number>(0)\n\n // Recalculate when a message is added or the conversation changes (the\n // store recreates `messages` on every streamed token, so watching the\n // array reference would re-run this on each character). The height only\n // depends on the last user message height, which is stable while\n // streaming.\n watch(\n () => [\n props.messages?.length,\n props.messages?.[props.messages.length - 1]?.id,\n ],\n async () => {\n const messages = props.messages\n if (!messages?.length || props.disableHeightAdjustment) {\n return\n }\n // The spacer only serves the in-flight exchange, letting the\n // fresh user message anchor at the top while the answer streams.\n // On plain loads (e.g. opening an old conversation) it would\n // just leave a large void after the last message.\n const isExchangeInFlight =\n messages[messages.length - 1].role === 'user' ||\n props.status === 'submitted' ||\n props.status === 'streaming'\n if (!isExchangeInFlight) {\n return\n }\n await nextTick()\n if (!scrollEl.value) {\n return\n }\n // Spacer sized so the freshly sent user message rests at the top\n // of the content area once scrolled to bottom: subtract both\n // paddings (clientHeight includes them) so any extra top\n // clearance (e.g. the fullscreen overlay header) is respected\n const { paddingTop, paddingBottom } = getComputedStyle(\n scrollEl.value,\n )\n const scrollElHeight =\n scrollEl.value.clientHeight -\n Number.parseFloat(paddingTop) -\n Number.parseFloat(paddingBottom)\n const lastUserMessageIndex = messages\n .map((message) => message.role)\n .lastIndexOf('user')\n const lastUserMessageHeight =\n messagesElRefs.value?.[lastUserMessageIndex]?.clientHeight ?? 0\n const newHeight = scrollElHeight - lastUserMessageHeight\n if (newHeight > 0) {\n height.value = newHeight\n }\n },\n )\n\n // Release the spacer once the exchange is over: it would otherwise\n // leave a large empty area after the last message. The min-height\n // transition settles the layout smoothly (the browser clamps the\n // scroll progressively when the viewport sat inside the removed area).\n watch(\n () => props.status,\n (status) => {\n if (status === 'ready' || status === 'error') {\n height.value = 0\n }\n },\n )\n\n const isRevised = (messageId: string) => {\n return props.revisedAnswers?.some((r) => r.messageId === messageId)\n }\n\n const getMessageFeedback = (messageId: string) =>\n props.messageFeedbacks?.find((f) => f.messageId === messageId)\n\n // Interactive vote/feedback buttons. In read-only mode (admin chat-logs)\n // the vote is shown on the message itself (coloured bubble border + an\n // \"active\" thumb in the footer) and the comment, if any, below it.\n const isFeedbackButtonVisible = (\n kind: 'upvote' | 'downvote' | 'feedback',\n index: number,\n ) => !props.readonlyFeedback && isActionButtonVisible(kind, index)\n\n // Read-only feedback for a message (drives the reaction chip anchored to\n // the bubble). undefined when not in read-only mode.\n const readonlyFeedbackOf = (messageId: string) =>\n props.readonlyFeedback ? getMessageFeedback(messageId) : undefined\n const feedbackVote = (messageId: string) =>\n readonlyFeedbackOf(messageId)?.vote\n // The real reaction glyph, shown ONLY for unmapped reactions (no vote):\n // 👍/❤️/👎 keep the classic thumb icon, while e.g. WhatsApp \"😍\" shows the\n // actual emoji. Platforms that send a type word (Teams \"like\") have a vote\n // and therefore use the icon too.\n const feedbackEmoji = (messageId: string) => {\n const feedback = readonlyFeedbackOf(messageId)\n if (feedback?.vote) {\n return undefined\n }\n const raw = feedback?.metadata?.reactionEmoji\n return typeof raw === 'string' && /\\p{Extended_Pictographic}/u.test(raw)\n ? raw\n : undefined\n }\n const hasReaction = (messageId: string) =>\n Boolean(feedbackVote(messageId) || feedbackEmoji(messageId))\n const reactionToneClass = (messageId: string) => {\n // A real emoji carries its own colour → neutral pill. Only the\n // thumb-icon fallback uses the sentiment colour.\n if (feedbackEmoji(messageId)) {\n return 'pk-chatbot-message__reaction--neutral'\n }\n const vote = feedbackVote(messageId)\n if (vote === 'upvote') {\n return 'pk-chatbot-message__reaction--positive'\n }\n if (vote === 'downvote') {\n return 'pk-chatbot-message__reaction--negative'\n }\n return 'pk-chatbot-message__reaction--neutral'\n }\n const reactionTitle = (messageId: string) => {\n const vote = feedbackVote(messageId)\n if (vote === 'upvote') {\n return $t('hint.userFeedbackPositive')\n }\n if (vote === 'downvote') {\n return $t('hint.userFeedbackNegative')\n }\n return $t('hint.userFeedbackReaction')\n }\n\n // Index of the last text part: the reaction chip anchors to that bubble so\n // it renders once even when the message has several text parts.\n const lastTextPartIndex = (message: UIChatMessage) => {\n const parts = getMergedParts(message)\n for (let index = parts.length - 1; index >= 0; index -= 1) {\n if (isTextPart(parts[index])) {\n return index\n }\n }\n return -1\n }\n\n const activeMessage = computed(() => {\n return props.messages?.[props.messages.length - 1]\n })\n const activeMessageLastPart = computed(() => {\n const active = activeMessage.value\n if (!active) {\n return null\n }\n return active.parts[active.parts.length - 1]\n })\n\n const mergedPartsMap = computed(() => {\n const map = new Map<string, UIChatMessage['parts']>()\n for (const message of props.messages ?? []) {\n if (message.role === 'assistant') {\n map.set(message.id, mergeConsecutiveTextParts(message.parts))\n }\n }\n return map\n })\n const getMergedParts = (message: UIChatMessage) => {\n return mergedPartsMap.value.get(message.id) ?? message.parts\n }\n const isLoading = computed(() => {\n return props.status === 'submitted' || props.status === 'streaming'\n })\n const isError = computed(() => props.status === 'error')\n\n const activeMessageLastPartLabel = computed(() => {\n const part = activeMessageLastPart.value\n return getToolPartLabel($t, part)\n })\n const activeMessageLastPartIcon = computed(() => {\n const part = activeMessageLastPart.value\n return getPartIcon(part)\n })\n\n const getMessageIndexById = (messageId: string) => {\n return props.messages?.findIndex((m) => m.id === messageId)\n }\n const isLastMessage = (index?: number) => {\n if (index === undefined || !props.messages) {\n return false\n }\n return index === props.messages.length - 1\n }\n const isMessageRegenerateButtonVisible = (index: number) => {\n return (\n isLastMessage(index) &&\n props.status === 'ready' &&\n !!props.actions?.includes('regenerate')\n )\n }\n // On the last message the actions appear only once the answer is ready;\n // on previous messages they are always available.\n const isActionButtonVisible = (\n action: ChatMessageActions,\n index: number,\n ) => {\n return (\n (!isLastMessage(index) || props.status === 'ready') &&\n !!props.actions?.includes(action)\n )\n }\n const isLastTextPart = (message: UIChatMessage) => {\n const lastPart = message.parts[message.parts.length - 1]\n return isTextPart(lastPart)\n }\n const messageHasSteps = (message: UIChatMessage) =>\n message.parts.some((part) => isReasoningPart(part) || isToolPart(part))\n // The extended steps timeline replaces the compact activity indicator as\n // soon as the message has at least one step to show.\n const showStepsTimeline = (message: UIChatMessage) =>\n Boolean(props.showExtendedSteps) &&\n isAssistant(message) &&\n messageHasSteps(message)\n const isAssistant = (message: UIChatMessage) => message.role === 'assistant'\n const isUser = (message: UIChatMessage) => message.role === 'user'\n const getPreviousAssistantMessage = (index: number) => {\n return props.messages\n ?.slice(0, index)\n .reverse()\n .find((message) => isAssistant(message))\n }\n const getNextAssistantMessage = (index: number) => {\n return props.messages\n ?.slice(index + 1)\n .find((message) => isAssistant(message))\n }\n // Returns the date to show in the day divider before the message at\n // `index`, or undefined when the surrounding assistant messages belong\n // to the same (local) day.\n const getDividerDate = (index: number) => {\n const previousCreatedAt =\n getPreviousAssistantMessage(index)?.metadata?.createdAt\n const nextCreatedAt =\n getNextAssistantMessage(index)?.metadata?.createdAt\n if (!previousCreatedAt || !nextCreatedAt) {\n return undefined\n }\n const previousDate = new Date(previousCreatedAt)\n const nextDate = new Date(nextCreatedAt)\n return previousDate.toDateString() !== nextDate.toDateString()\n ? nextDate\n : undefined\n }\n const showMessageFooter = (message: UIChatMessage, index: number) => {\n if (index === 0 || message.role !== 'assistant') {\n return false\n }\n return Boolean(\n props.actions?.length ||\n (props.showMessageDateTime &&\n message.metadata?.createdAt !== undefined) ||\n message.metadata?.completedAt !== undefined ||\n (props.showMessageTokensCount &&\n message.metadata?.totalTokens !== undefined),\n )\n }\n // Hover-only metadata (time + duration), shown when the fixed variant\n // (showMessageDateTime) is off.\n const formatMessageTime = (createdAt: number) => {\n const date = new Date(createdAt)\n const isToday = date.toDateString() === new Date().toDateString()\n return $d(date, isToday ? 'time' : 'date-time')\n }\n const getMessageDuration = (message: UIChatMessage) => {\n const { createdAt, completedAt } = message.metadata ?? {}\n if (!createdAt || !completedAt) {\n return undefined\n }\n return formatDuration($n, completedAt - createdAt)\n }\n // feedback message auto scroll\n const feedbackMessageEl =\n useTemplateRef<InstanceType<typeof PkChatbotFeedbackForm>[]>(\n 'feedbackMessageEl',\n )\n watch(\n () => props.feedbackMessageId,\n async () => {\n await nextTick()\n if (!props.feedbackMessageId) {\n return\n }\n const el = feedbackMessageEl.value?.[0]?.$el\n if (!el) {\n return\n }\n if (isLastMessage(getMessageIndexById(props.feedbackMessageId))) {\n scrollToBottom()\n return\n }\n el.scrollIntoView({ behavior: 'smooth', block: 'center' })\n },\n )\n</script>\n\n<template>\n <div\n ref=\"scrollEl\"\n class=\"pk-chatbot-messages\"\n role=\"log\"\n aria-live=\"polite\"\n aria-relevant=\"additions text\"\n :aria-busy=\"isLoading\"\n :style=\"{\n '--chatbot-main-color': mainColor,\n '--chatbot-contrast-color': contrastColor,\n }\"\n @scroll=\"onScroll\">\n \n <div\n v-if=\"showScrollToBottom && outlineItems.length > 1\"\n class=\"pk-chatbot-messages__outline\">\n <PkChatbotOutlineRail\n :items=\"outlineItems\"\n :active-id=\"activeOutlineId\"\n @select=\"scrollToUserMessage\" />\n </div>\n <div ref=\"wrapperEl\" class=\"pk-chatbot-messages__wrapper\">\n <template v-for=\"(message, index) in messages\" :key=\"message.id\">\n <div\n v-if=\"isUser(message) && getDividerDate(index)\"\n class=\"pk-chatbot-divider\">\n <span class=\"pk-chatbot-divider__label\">\n {{ $d(getDividerDate(index)!, 'short') }}\n </span>\n </div>\n <div\n v-if=\"\n message.parts.length ||\n (isLastMessage(index) &&\n isLoading &&\n isAssistant(message))\n \"\n ref=\"messagesEl\"\n class=\"pk-chatbot-message\"\n :class=\"[\n `pk-chatbot-message--${message.role}`,\n {\n 'pk-chatbot-message--loading':\n isLoading &&\n isLastMessage(index) &&\n isAssistant(message),\n },\n ]\"\n :style=\"{\n minHeight:\n isLastMessage(index) &&\n isAssistant(message) &&\n !isError\n ? `${height}px`\n : undefined,\n }\">\n <transition appear name=\"pk-chatbot-part\">\n <PkChatbotSteps\n v-if=\"showStepsTimeline(message)\"\n :message\n :is-streaming=\"isLoading && isLastMessage(index)\"\n :is-dark />\n </transition>\n <template\n v-for=\"(part, partIndex) in getMergedParts(message)\"\n :key=\"partIndex\">\n <transition\n v-if=\"isTextPart(part) && part.text.trim()\"\n appear\n name=\"pk-chatbot-part\">\n <div class=\"pk-chatbot-message__text\">\n <slot\n v-bind=\"{\n message,\n part,\n index,\n isLoading,\n }\"\n name=\"text\">\n <PkStreamingMarkdown\n v-if=\"isAssistant(message)\"\n class=\"wysiwyg\"\n :markdown=\"part.text\"\n :is-dark\n :loading=\"\n isLastMessage(index) &&\n status === 'streaming'\n \" />\n <template v-else>\n {{ part.text }}\n </template>\n </slot>\n \n <span\n v-if=\"\n hasReaction(message.id) &&\n !getMessageFeedback(message.id)\n ?.comment &&\n partIndex === lastTextPartIndex(message)\n \"\n class=\"pk-chatbot-message__reaction\"\n :class=\"reactionToneClass(message.id)\"\n :title=\"reactionTitle(message.id)\">\n <span\n v-if=\"feedbackEmoji(message.id)\"\n class=\"pk-chatbot-message__reaction-emoji\">\n {{ feedbackEmoji(message.id) }}\n </span>\n <VvIcon\n v-else\n :name=\"\n feedbackVote(message.id) ===\n 'downvote'\n ? 'ri:thumb-down-fill'\n : 'ri:thumb-up-fill'\n \" />\n </span>\n </div>\n </transition>\n <transition\n v-else-if=\"isFilePart(part)\"\n appear\n name=\"pk-chatbot-part\">\n <PkChatbotFilePreview\n :media-type=\"part.mediaType\"\n :url=\"part.url\"\n :filename=\"part.filename\"\n :size=\"getFilePartMedia(part)?.bytesCount\" />\n </transition>\n <transition\n v-else-if=\"\n isToolPart(part) &&\n !isStreamingPart(part) &&\n (toolComponentMap[getToolPartName(part)] ||\n slots[part.type] ||\n showAllMessageParts)\n \"\n appear\n name=\"pk-chatbot-part\">\n <component\n :is=\"toolComponentMap[getToolPartName(part)]\"\n v-if=\"\n !slots[part.type] &&\n toolComponentMap[getToolPartName(part)]\n \"\n :key=\"`component-${partIndex}-${getPartState(part)}`\"\n :part />\n <slot\n v-else\n :name=\"part.type\"\n v-bind=\"{\n message,\n part,\n index,\n isLoading,\n }\">\n <div\n v-if=\"showAllMessageParts\"\n class=\"pk-chatbot-message__loading-info\">\n <div class=\"flex gap-8 items-center\">\n <VvIcon\n v-if=\"getPartIcon(part)\"\n :name=\"getPartIcon(part)!\"\n class=\"shrink-0\" />\n <code class=\"font-mono rounded text-12\">\n {{ toKebabCase(part.type) }}\n </code>\n </div>\n </div>\n </slot>\n </transition>\n \n <transition mode=\"out-in\">\n <PkChatbotMessageFeedback\n v-if=\"\n partIndex === lastTextPartIndex(message) &&\n readonlyFeedback &&\n getMessageFeedback(message.id)?.comment\n \"\n :feedback=\"getMessageFeedback(message.id)!\" />\n </transition>\n </template>\n <transition name=\"fade-in\" mode=\"out-in\">\n <div\n v-if=\"\n isLoading &&\n isLastMessage(index) &&\n !isLastTextPart(message) &&\n isAssistant(message) &&\n !showStepsTimeline(message)\n \"\n :key=\"`loading-info-${message.id}`\"\n class=\"pk-chatbot-message__loading-info\">\n <div class=\"flex gap-8 items-center\">\n <VvIcon\n name=\"line-md:loading-loop\"\n class=\"shrink-0\" />\n <transition mode=\"out-in\">\n <VvIcon\n v-if=\"activeMessageLastPartIcon\"\n :key=\"activeMessageLastPartIcon\"\n class=\"shrink-0\"\n :name=\"activeMessageLastPartIcon\" />\n </transition>\n <transition mode=\"out-in\">\n <span\n v-if=\"activeMessageLastPartLabel\"\n :key=\"activeMessageLastPartLabel\"\n class=\"text-12\">\n {{ activeMessageLastPartLabel }}\n </span>\n </transition>\n </div>\n <transition name=\"fade-in\" mode=\"out-in\">\n <PkStreamingMarkdownAutoscroll\n v-if=\"\n activeMessageLastPart &&\n 'text' in activeMessageLastPart &&\n activeMessageLastPart.text.trim()\n \"\n :markdown=\"activeMessageLastPart.text\"\n :is-dark\n inner-class=\"wysiwyg\"\n class=\"border border-surface-4 rounded p-4 mt-8 bg-surface-1 max-h-64 text-12 w-full\" />\n </transition>\n </div>\n </transition>\n <transition mode=\"out-in\">\n <div\n v-if=\"showMessageFooter(message, index)\"\n class=\"pk-chatbot-message__footer\">\n <VvButtonGroup\n modifiers=\"compact\"\n class=\"mr-auto shrink-0\">\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isMessageRegenerateButtonVisible(\n index,\n )\n \"\n icon=\"ri:reset-right-line\"\n modifiers=\"action-quiet-small\"\n :title=\"$t('action.regenerate')\"\n :aria-label=\"$t('action.regenerate')\"\n @click.stop=\"$emit('regenerate')\" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isActionButtonVisible(\n 'show-info',\n index,\n )\n \"\n icon=\"ri:information-line\"\n :title=\"$t('action.getMoreInfo')\"\n :aria-label=\"$t('action.getMoreInfo')\"\n modifiers=\"action-quiet-small\"\n @click.stop=\"\n $emit('show-info', message)\n \" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isActionButtonVisible(\n 'revise',\n index,\n )\n \"\n :icon=\"\n isRevised(message.id)\n ? 'ri:file-edit-fill'\n : 'ri:file-edit-line'\n \"\n :title=\"\n isRevised(message.id)\n ? $t('action.editRevise')\n : $t('action.createRevise')\n \"\n :aria-label=\"\n isRevised(message.id)\n ? $t('action.editRevise')\n : $t('action.createRevise')\n \"\n modifiers=\"action-quiet-small\"\n :class=\"{\n 'text-brand': isRevised(message.id),\n }\"\n @click.stop=\"\n $emit('revise', message)\n \" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isFeedbackButtonVisible(\n 'upvote',\n index,\n )\n \"\n :icon=\"\n getMessageFeedback(message.id)\n ?.vote === 'upvote'\n ? 'ri:thumb-up-fill'\n : 'ri:thumb-up-line'\n \"\n :title=\"$t('action.upvote')\"\n :aria-label=\"$t('action.upvote')\"\n modifiers=\"action-quiet-small\"\n @click.stop=\"\n $emit('upvote', message)\n \" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isFeedbackButtonVisible(\n 'downvote',\n index,\n )\n \"\n :icon=\"\n getMessageFeedback(message.id)\n ?.vote === 'downvote'\n ? 'ri:thumb-down-fill'\n : 'ri:thumb-down-line'\n \"\n :title=\"$t('action.downvote')\"\n :aria-label=\"$t('action.downvote')\"\n modifiers=\"action-quiet-small\"\n @click.stop=\"\n $emit('downvote', message)\n \" />\n </transition>\n <transition mode=\"out-in\">\n <VvButton\n v-if=\"\n isFeedbackButtonVisible(\n 'feedback',\n index,\n )\n \"\n :icon=\"\n getMessageFeedback(message.id)\n ?.comment\n ? 'ri:feedback-fill'\n : 'ri:feedback-line'\n \"\n :title=\"$t('action.feedback')\"\n :aria-label=\"$t('action.feedback')\"\n modifiers=\"action-quiet-small\"\n @click.stop=\"\n $emit('feedback', message)\n \" />\n </transition>\n </VvButtonGroup>\n <div\n v-if=\"\n !showMessageDateTime &&\n message.metadata?.createdAt &&\n message.metadata?.completedAt\n \"\n class=\"pk-chatbot-message__hover-meta\">\n <time\n :datetime=\"\n new Date(\n message.metadata.createdAt,\n ).toISOString()\n \"\n :title=\"\n $d(\n new Date(\n message.metadata.createdAt,\n ),\n 'date-time',\n )\n \"\n class=\"flex items-center gap-4 min-w-0\">\n <VvIcon\n name=\"ri:time-line\"\n class=\"shrink-0\" />\n <span class=\"truncate\">{{\n formatMessageTime(\n message.metadata.createdAt,\n )\n }}</span>\n </time>\n <span\n v-if=\"getMessageDuration(message)\"\n class=\"flex items-center gap-4 min-w-0\">\n <VvIcon\n name=\"ri:hourglass-line\"\n class=\"shrink-0\" />\n <span class=\"truncate\">{{\n getMessageDuration(message)\n }}</span>\n </span>\n </div>\n <span\n v-if=\"\n showMessageTokensCount &&\n message.metadata?.totalTokens\n \"\n class=\"flex items-center gap-4 text-12 text-word-3\">\n <VvIcon\n name=\"ri:ai-generate-2-line\"\n class=\"shrink-0\" />\n <span class=\"truncate\"\n >{{\n $n(\n message.metadata.totalTokens,\n 'integer',\n )\n }}\n {{ $t('label.tokens') }}\n </span>\n </span>\n <time\n v-if=\"\n showMessageDateTime &&\n message.metadata?.createdAt\n \"\n :datetime=\"\n new Date(\n message.metadata?.createdAt,\n ).toISOString()\n \"\n class=\"flex items-center gap-4 text-12 text-word-3\">\n <VvIcon name=\"ri:time-line\" class=\"shrink-0\" />\n <span class=\"truncate\">{{\n $d(\n new Date(message.metadata?.createdAt),\n 'date-time',\n )\n }}</span>\n </time>\n <div\n v-if=\"\n showMessageDateTime &&\n message?.metadata?.completedAt &&\n message?.metadata?.createdAt\n \"\n class=\"flex items-center gap-4 text-12 text-word-3\">\n <VvIcon\n name=\"ri:hourglass-line\"\n class=\"shrink-0\" />\n <PkRelativeTime\n class=\"truncate\"\n :date=\"message.metadata?.createdAt\"\n :end-date=\"message.metadata?.completedAt\" />\n </div>\n </div>\n </transition>\n <transition mode=\"out-in\">\n <PkChatbotFeedbackForm\n v-if=\"message.id === feedbackMessageId\"\n ref=\"feedbackMessageEl\"\n :loading=\"feedbackLoading\"\n :submitted=\"feedbackSubmitted\"\n :error=\"feedbackError\"\n @submit=\"$emit('feedback-submit', $event)\"\n @close=\"$emit('feedback-close')\" />\n </transition>\n </div>\n </template>\n <transition appear name=\"pk-chatbot-part\">\n <PkChatbotError\n v-if=\"isError\"\n :error\n @retry=\"$emit('auto-retry')\"\n @reset=\"$emit('reset-chat')\" />\n </transition>\n <div\n v-if=\"activeMessage?.role === 'user' || isError\"\n class=\"pk-chatbot-messages__spacer\"\n :style=\"{ minHeight: `${height}px` }\"></div>\n </div>\n <Transition name=\"pk-chatbot-messages-fab\">\n <button\n v-if=\"showScrollToBottom && (userScrolledUp || !isAtBottom)\"\n type=\"button\"\n class=\"pk-chatbot-messages__scroll-to-bottom\"\n :title=\"$t('action.scrollToBottom')\"\n :aria-label=\"$t('action.scrollToBottom')\"\n @click=\"onScrollToBottomClick\">\n <VvIcon name=\"ri:arrow-down-line\" />\n </button>\n </Transition>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-chatbot-messages {\n overflow-y: auto;\n flex: 1;\n min-width: 0;\n font-size: var(--text-14);\n\n scrollbar-width: thin;\n scrollbar-color: var(--color-word-5) var(--color-surface-1);\n\n &__wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-16);\n min-width: 0;\n }\n\n // Conversation outline rail: sticky shell pinned to the vertical\n // middle of the scroll area, at the right edge. Zero-sized and\n // first in flow so neither it nor its absolutely-positioned pieces\n // inflate scrollHeight (desktop only, like ChatGPT)\n &__outline {\n display: none;\n position: sticky;\n top: 50%;\n z-index: 2;\n flex: none;\n align-self: flex-end;\n height: 0;\n\n @include media-breakpoint-up('md', $breakpoints) {\n display: block;\n }\n\n .pk-chatbot-outline {\n position: absolute;\n top: 0;\n right: 0;\n transform: translateY(-50%);\n }\n }\n\n // Placeholder while the answer has not started yet: settles like\n // the message spacer when released\n &__spacer {\n transition: min-height 300ms var(--ease-out);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n // Floating \"back to bottom\" button, sticky inside the scroll area\n &__scroll-to-bottom {\n position: sticky;\n bottom: var(--spacing-8);\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n // The scroll container is a flex column: without this the\n // overflowing content shrinks the button, ignoring its height\n flex: none;\n width: var(--spacing-36);\n height: var(--spacing-36);\n // Net-zero layout contribution: mounting/unmounting the button\n // must not change scrollHeight, or reaching the bottom (which\n // hides it) would clamp scrollTop and cause a visible jump\n margin-block-start: calc(-1 * var(--spacing-36));\n margin-inline: auto;\n border: 1px solid var(--color-surface-3);\n border-radius: var(--rounded-full);\n background-color: var(--color-surface-1);\n box-shadow: var(--shadow-md);\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 }\n\n .pk-chatbot-messages-fab-enter-active,\n .pk-chatbot-messages-fab-leave-active {\n transition: opacity 150ms var(--ease-out);\n }\n\n .pk-chatbot-messages-fab-enter-from,\n .pk-chatbot-messages-fab-leave-to {\n opacity: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .pk-chatbot-messages-fab-enter-active,\n .pk-chatbot-messages-fab-leave-active {\n transition: none;\n }\n }\n\n .pk-chatbot-divider {\n position: relative;\n border-bottom: 1px solid var(--color-surface-3);\n\n &__label {\n position: absolute;\n padding-inline: var(--spacing-8);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--color-surface);\n color: var(--color-word-4);\n font-size: var(--text-12);\n }\n }\n\n .pk-chatbot-message {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sm);\n min-width: 0;\n align-items: flex-start;\n overflow: hidden;\n max-width: 100%;\n background-color: var(--color-surface);\n // The anchor spacer (inline min-height on the last assistant\n // message) settles smoothly when released at the end of the stream\n transition: min-height 300ms var(--ease-out);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n\n &__text {\n position: relative;\n color: var(--color-word-2);\n line-height: var(--leading-normal);\n border-width: var(--spacing-px);\n border-style: solid;\n border-color: var(--color-surface-3);\n padding: var(--spacing-sm);\n border-radius: var(--rounded-xl) var(--rounded-xl) var(--rounded-xl)\n 0;\n }\n\n // Read-only feedback: a circular vote chip that overlaps the bubble's\n // bottom-right corner (messaging-app style). White ring lifts it off\n // the bubble; solid accent makes the rating unmistakable.\n &__reaction {\n position: absolute;\n right: var(--spacing-8);\n bottom: 0;\n transform: translateY(50%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--spacing-24);\n height: var(--spacing-24);\n border-radius: var(--rounded-full, 9999px);\n color: var(--color-white, #fff);\n font-size: var(--text-12);\n box-shadow: var(--shadow-md);\n\n &--positive {\n background-color: var(--color-success);\n }\n\n &--negative {\n background-color: var(--color-danger);\n }\n\n // Real emoji (e.g. WhatsApp): the glyph carries its own colour, so\n // the chip stays a neutral surface pill.\n &--neutral {\n background-color: var(--color-surface-1);\n }\n }\n\n &__reaction-emoji {\n // Smaller than the chip so the glyph doesn't touch the ring.\n font-size: var(--text-12);\n line-height: 1;\n }\n\n &__loading-info {\n line-height: var(--leading-normal);\n border-width: var(--spacing-px);\n border-style: solid;\n border-color: var(--color-surface-3);\n padding: var(--spacing-sm);\n border-radius: var(--rounded-xl) var(--rounded-xl) var(--rounded-xl)\n 0;\n font-size: var(--text-12);\n color: var(--color-word-3);\n }\n\n &__footer {\n width: 100%;\n display: flex;\n gap: var(--spacing-8);\n align-items: center;\n }\n\n &__hover-meta {\n display: flex;\n min-width: 0;\n align-items: center;\n gap: var(--spacing-8);\n font-size: var(--text-12);\n color: var(--color-word-3);\n white-space: nowrap;\n font-variant-numeric: tabular-nums;\n opacity: 0;\n transition: opacity 0.2s ease;\n }\n\n &:hover &__hover-meta,\n &:focus-within &__hover-meta {\n opacity: 1;\n }\n\n // Hover doesn't exist on touch devices: keep the metadata visible\n @media (hover: none) {\n &__hover-meta {\n opacity: 1;\n }\n }\n\n &--user {\n align-items: flex-end;\n\n .pk-chatbot-message__text {\n background-color: var(\n --chatbot-main-color,\n var(--color-surface-1)\n );\n border-color: var(--chatbot-main-color, var(--color-surface-4));\n color: var(--chatbot-contrast-color, var(--color-word-1));\n border-radius: var(--rounded-xl) var(--rounded-xl) 0\n var(--rounded-xl);\n }\n }\n\n &--assistant {\n width: 100%;\n gap: var(--spacing-16);\n\n .pk-chatbot-message__text {\n width: 100%;\n }\n }\n\n &--system {\n align-items: flex-end;\n\n .pk-chatbot-message__text {\n display: flex;\n gap: var(--spacing-8);\n font-size: var(--text-12);\n padding: var(--spacing-8) var(--spacing-sm);\n align-items: center;\n border-color: var(--chatbot-main-color, var(--color-surface-4));\n color: var(--chatbot-main-color, var(--color-word-1));\n border-radius: var(--rounded-xl) var(--rounded-xl) 0\n var(--rounded-xl);\n }\n }\n }\n\n .pk-chatbot-part-enter-active {\n transition:\n opacity 0.25s ease,\n transform 0.25s ease;\n }\n\n .pk-chatbot-part-enter-from {\n opacity: 0;\n transform: translateY(8px);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .pk-chatbot-part-enter-active {\n transition: none;\n }\n\n .pk-chatbot-part-enter-from {\n transform: none;\n }\n }\n</style>\n"],"mappings":"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"}

package/dist-vue/_chunks/PkChatbotViewChat-BZ9IH-sz.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"PkChatbotViewChat-BZ9IH-sz.js","names":["$t"],"sources":["../../../../packages/composable/src/chatbot/useGreeting.ts","../../../../packages/components/src/chat/PkAuroraCanvas.vue","../../../../packages/components/src/chat/PkAuroraCanvas.vue","../../../../packages/components/src/chat/PkChatbotViewChat.vue","../../../../packages/components/src/chat/PkChatbotViewChat.vue"],"sourcesContent":["import { computed, toValue } from 'vue'\nimport type { ComputedRef, MaybeRefOrGetter } from 'vue'\nimport { useI18n } from 'vue-i18n'\nimport type { AgentInterface } from 'models'\n\n/**\n * Resolves the greeting shown in the fullscreen empty state.\n *\n * v1 behavior (docs/specs/public-chat-page.md): uses the first entry of the\n * `agentInterface.greeting` pool and supports only the `{name}` placeholder.\n * Fallback chain: `greeting[0]` → `initialMessage` → default welcome message.\n * Pool rotation and `{timeGreeting}` are planned follow-ups.\n */\nexport function useGreeting(\n agentInterface: MaybeRefOrGetter<AgentInterface | undefined>,\n userName: MaybeRefOrGetter<string | undefined>,\n): ComputedRef<string> {\n const { locale, t, te } = useI18n({ useScope: 'global' })\n\n return computed(() => {\n const ui = toValue(agentInterface)\n const template =\n ui?.greeting?.[0]?.[locale.value] ||\n ui?.initialMessage?.[locale.value] ||\n (te('message.defaultAgentWelcome')\n ? t('message.defaultAgentWelcome')\n : '')\n return resolveNamePlaceholder(template, toValue(userName))\n })\n}\n\nfunction resolveNamePlaceholder(template: string, name?: string): string {\n const result = name\n ? template.replace(/\\{name\\}/g, name)\n : // No name available: drop the placeholder along with any\n // adjacent punctuation (\", {name}!\" → \"\")\n template.replace(/[,\\s]*\\{name\\}[!?]?/g, '')\n return result.trim()\n}\n","<script setup lang=\"ts\">\n import {\n onBeforeUnmount,\n onMounted,\n onUnmounted,\n ref,\n useTemplateRef,\n } from 'vue'\n\n /**\n * Ambient animated \"aurora\" rendered with a raw WebGL fragment shader\n * (simplex noise blending two tints of the inherited `color`). No\n * dependencies; falls back to CSS blobs when WebGL is unavailable.\n * The accent comes from the CSS cascade: set `color` on the host.\n */\n\n const props = defineProps<{\n /** CSS selector (within the positioned parent) of the element the glow radiates from; defaults to the positioned parent box itself */\n sourceSelector?: string\n }>()\n\n const canvasEl = useTemplateRef<HTMLCanvasElement>('canvasEl')\n const failed = ref(false)\n\n const VERTEX_SHADER = `\nattribute vec2 a_position;\nvoid main() {\n gl_Position = vec4(a_position, 0.0, 1.0);\n}`\n\n // snoise: 2D simplex noise by Ian McEwan / Stefan Gustavson (MIT)\n const FRAGMENT_SHADER = `\nprecision mediump float;\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform vec3 u_color;\nuniform vec2 u_center;\nuniform vec2 u_half;\nuniform float u_spread;\n\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\n\nfloat snoise(vec2 v) {\n const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n -0.577350269189626, 0.024390243902439);\n vec2 i = floor(v + dot(v, C.yy));\n vec2 x0 = v - i + dot(i, C.xx);\n vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n vec4 x12 = x0.xyxy + C.xxzz;\n x12.xy -= i1;\n i = mod(i, 289.0);\n vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n + i.x + vec3(0.0, i1.x, 1.0));\n vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n dot(x12.zw, x12.zw)), 0.0);\n m = m * m;\n m = m * m;\n vec3 x = 2.0 * fract(p * C.www) - 1.0;\n vec3 h = abs(x) - 0.5;\n vec3 ox = floor(x + 0.5);\n vec3 a0 = x - ox;\n m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n vec3 g;\n g.x = a0.x * x0.x + h.x * x0.y;\n g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n return 130.0 * dot(m, g);\n}\n\nvoid main() {\n vec2 px = gl_FragCoord.xy;\n vec2 rel = px - u_center;\n\n // Ignition: the ellipse lights up expanding from the center on mount\n float intro = smoothstep(0.0, 1.4, u_time);\n\n // Breathing: size and brightness oscillate gently but visibly\n float breath = 1.0\n + 0.12 * sin(u_time * 0.55)\n + 0.06 * snoise(vec2(u_time * 0.1, 3.7));\n float pulse = 1.0 + 0.2 * sin(u_time * 0.55 + 1.3);\n\n // Keep it simple (Gemini-style): one huge soft elliptical glow\n // centered on the pill\n vec2 radii = vec2(u_half.x * 0.95, u_half.y * 6.5)\n * u_spread\n * breath\n * mix(0.15, 1.0, intro);\n float r = length(rel / max(radii, vec2(1.0)));\n float glow = exp(-r * r * 2.2);\n\n // Never cut hard against the canvas bounds\n vec2 m = min(px, u_resolution - px);\n glow *= smoothstep(0.0, 32.0, min(m.x, m.y));\n\n // Dither: breaks the 8-bit banding rings of the very soft gradient\n // (no CSS blur on the canvas, the noise must fully mask the bands)\n glow = max(glow + (snoise(px * 0.9) - 0.5) * 0.03, 0.0);\n\n float alpha = glow * 0.2 * pulse * intro;\n\n // Premultiplied alpha (default canvas compositing)\n gl_FragColor = vec4(u_color * alpha, alpha);\n}`\n\n let gl: WebGLRenderingContext | null = null\n let rafId = 0\n let resizeObserver: ResizeObserver | null = null\n let timeLocation: WebGLUniformLocation | null = null\n let resolutionLocation: WebGLUniformLocation | null = null\n let centerLocation: WebGLUniformLocation | null = null\n let halfLocation: WebGLUniformLocation | null = null\n let spreadLocation: WebGLUniformLocation | null = null\n const startTime = performance.now()\n\n const compile = (type: number, source: string): WebGLShader | null => {\n if (!gl) {\n return null\n }\n const shader = gl.createShader(type)\n if (!shader) {\n return null\n }\n gl.shaderSource(shader, source)\n gl.compileShader(shader)\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n return null\n }\n return shader\n }\n\n const parseInheritedColor = (): [number, number, number] | null => {\n if (!canvasEl.value) {\n return null\n }\n const raw = getComputedStyle(canvasEl.value).color\n const match = raw.match(/rgba?\\(([\\d.]+)[,\\s]+([\\d.]+)[,\\s]+([\\d.]+)/)\n if (!match) {\n return null\n }\n return [\n Number(match[1]) / 255,\n Number(match[2]) / 255,\n Number(match[3]) / 255,\n ]\n }\n\n const resize = () => {\n if (!gl || !canvasEl.value) {\n return\n }\n // The glow is blurred anyway: cap the DPR to keep the GPU cost low\n const dpr = Math.min(window.devicePixelRatio || 1, 1.5)\n const { clientWidth, clientHeight } = canvasEl.value\n canvasEl.value.width = Math.max(1, Math.round(clientWidth * dpr))\n canvasEl.value.height = Math.max(1, Math.round(clientHeight * dpr))\n gl.viewport(0, 0, canvasEl.value.width, canvasEl.value.height)\n\n // The glow radiates from the source element (by selector within the\n // positioned parent, or the parent box itself): measure it into\n // shader pixel coordinates (gl origin is bottom-left)\n const host = canvasEl.value.parentElement?.offsetParent\n const source =\n (props.sourceSelector\n ? host?.querySelector(props.sourceSelector)\n : host) ?? host\n const canvasRect = canvasEl.value.getBoundingClientRect()\n const sourceRect = source?.getBoundingClientRect()\n if (sourceRect && canvasRect.width > 0) {\n const scaleX = canvasEl.value.width / canvasRect.width\n const scaleY = canvasEl.value.height / canvasRect.height\n const centerX =\n (sourceRect.left + sourceRect.width / 2 - canvasRect.left) *\n scaleX\n const centerY =\n (canvasRect.bottom - (sourceRect.top + sourceRect.height / 2)) *\n scaleY\n const halfWidth = (sourceRect.width / 2) * scaleX\n const halfHeight = (sourceRect.height / 2) * scaleY\n gl.uniform2f(centerLocation, centerX, centerY)\n gl.uniform2f(halfLocation, halfWidth, halfHeight)\n // Optional responsive boost of the glow size (e.g. mobile)\n const spread = Number.parseFloat(\n getComputedStyle(canvasEl.value).getPropertyValue(\n '--aurora-spread',\n ),\n )\n gl.uniform1f(spreadLocation, Number.isNaN(spread) ? 1 : spread)\n }\n\n // Redraw before the next paint: setting the canvas size reallocates\n // the drawing buffer, and presenting it undrawn can flash as an\n // uninitialized (white) frame. With reduced motion (no loop) this\n // also keeps the settled static frame across resizes.\n drawFrame(prefersReducedMotion() ? 10 : undefined)\n }\n\n const prefersReducedMotion = () =>\n window.matchMedia('(prefers-reduced-motion: reduce)').matches\n\n const drawFrame = (timeSeconds?: number) => {\n if (!gl || !canvasEl.value) {\n return\n }\n gl.uniform1f(\n timeLocation,\n timeSeconds ?? (performance.now() - startTime) / 1000,\n )\n gl.uniform2f(\n resolutionLocation,\n canvasEl.value.width,\n canvasEl.value.height,\n )\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)\n }\n\n const loop = () => {\n drawFrame()\n rafId = requestAnimationFrame(loop)\n }\n\n onMounted(() => {\n const canvas = canvasEl.value\n gl = canvas?.getContext('webgl', { alpha: true }) ?? null\n const color = parseInheritedColor()\n if (!canvas || !gl || !color) {\n failed.value = true\n return\n }\n\n const vertex = compile(gl.VERTEX_SHADER, VERTEX_SHADER)\n const fragment = compile(gl.FRAGMENT_SHADER, FRAGMENT_SHADER)\n const program = gl.createProgram()\n if (!vertex || !fragment || !program) {\n failed.value = true\n return\n }\n gl.attachShader(program, vertex)\n gl.attachShader(program, fragment)\n gl.linkProgram(program)\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n failed.value = true\n return\n }\n gl.useProgram(program)\n\n // Fullscreen quad\n const buffer = gl.createBuffer()\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer)\n gl.bufferData(\n gl.ARRAY_BUFFER,\n new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n gl.STATIC_DRAW,\n )\n const positionLocation = gl.getAttribLocation(program, 'a_position')\n gl.enableVertexAttribArray(positionLocation)\n gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0)\n\n timeLocation = gl.getUniformLocation(program, 'u_time')\n resolutionLocation = gl.getUniformLocation(program, 'u_resolution')\n centerLocation = gl.getUniformLocation(program, 'u_center')\n halfLocation = gl.getUniformLocation(program, 'u_half')\n spreadLocation = gl.getUniformLocation(program, 'u_spread')\n gl.uniform3f(gl.getUniformLocation(program, 'u_color'), ...color)\n\n resizeObserver = new ResizeObserver(resize)\n resizeObserver.observe(canvas)\n resize()\n\n if (prefersReducedMotion()) {\n // Static frame: the color stays, the motion goes\n drawFrame(10)\n return\n }\n loop()\n })\n\n onBeforeUnmount(() => {\n cancelAnimationFrame(rafId)\n resizeObserver?.disconnect()\n })\n\n // Release the context (Chrome caps live WebGL contexts per page) only\n // after the compositor committed the removal: dropping the backing\n // buffer while the last frame is still on screen paints an undefined\n // (white) frame — a visible flash on the dark theme\n onUnmounted(() => {\n const context = gl\n gl = null\n setTimeout(() => {\n context?.getExtension('WEBGL_lose_context')?.loseContext()\n }, 150)\n })\n</script>\n\n<template>\n <div class=\"pk-aurora\" aria-hidden=\"true\">\n <canvas v-if=\"!failed\" ref=\"canvasEl\" class=\"pk-aurora__canvas\" />\n <div v-else class=\"pk-aurora__fallback\" />\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-aurora {\n position: absolute;\n inset: 0;\n // The accent resolved by the canvas (and the CSS fallback)\n color: var(--chat-page-accent, var(--color-brand));\n pointer-events: none;\n\n &__canvas {\n width: 100%;\n height: 100%;\n // No CSS filter on purpose: a filtered accelerated canvas gets\n // its own compositor surface, which Chrome can present\n // uninitialized (a white flash) when the layer is created or\n // torn down. The glow is smoothed in the shader instead.\n }\n\n // CSS blobs when WebGL is unavailable\n &__fallback {\n position: absolute;\n inset: 0;\n background:\n radial-gradient(\n 45% 65% at 32% 38%,\n color-mix(in srgb, currentColor 26%, transparent),\n transparent 70%\n ),\n radial-gradient(\n 40% 55% at 68% 62%,\n color-mix(in srgb, currentColor 16%, transparent),\n transparent 70%\n );\n filter: blur(48px);\n animation: pk-aurora-drift 14s var(--ease-in-out) infinite alternate;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n }\n }\n\n @keyframes pk-aurora-drift {\n from {\n transform: rotate(-10deg) scale(1);\n }\n\n to {\n transform: rotate(10deg) scale(1.2);\n }\n }\n</style>\n","<script setup lang=\"ts\">\n import {\n onBeforeUnmount,\n onMounted,\n onUnmounted,\n ref,\n useTemplateRef,\n } from 'vue'\n\n /**\n * Ambient animated \"aurora\" rendered with a raw WebGL fragment shader\n * (simplex noise blending two tints of the inherited `color`). No\n * dependencies; falls back to CSS blobs when WebGL is unavailable.\n * The accent comes from the CSS cascade: set `color` on the host.\n */\n\n const props = defineProps<{\n /** CSS selector (within the positioned parent) of the element the glow radiates from; defaults to the positioned parent box itself */\n sourceSelector?: string\n }>()\n\n const canvasEl = useTemplateRef<HTMLCanvasElement>('canvasEl')\n const failed = ref(false)\n\n const VERTEX_SHADER = `\nattribute vec2 a_position;\nvoid main() {\n gl_Position = vec4(a_position, 0.0, 1.0);\n}`\n\n // snoise: 2D simplex noise by Ian McEwan / Stefan Gustavson (MIT)\n const FRAGMENT_SHADER = `\nprecision mediump float;\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform vec3 u_color;\nuniform vec2 u_center;\nuniform vec2 u_half;\nuniform float u_spread;\n\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\n\nfloat snoise(vec2 v) {\n const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n -0.577350269189626, 0.024390243902439);\n vec2 i = floor(v + dot(v, C.yy));\n vec2 x0 = v - i + dot(i, C.xx);\n vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n vec4 x12 = x0.xyxy + C.xxzz;\n x12.xy -= i1;\n i = mod(i, 289.0);\n vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n + i.x + vec3(0.0, i1.x, 1.0));\n vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n dot(x12.zw, x12.zw)), 0.0);\n m = m * m;\n m = m * m;\n vec3 x = 2.0 * fract(p * C.www) - 1.0;\n vec3 h = abs(x) - 0.5;\n vec3 ox = floor(x + 0.5);\n vec3 a0 = x - ox;\n m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n vec3 g;\n g.x = a0.x * x0.x + h.x * x0.y;\n g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n return 130.0 * dot(m, g);\n}\n\nvoid main() {\n vec2 px = gl_FragCoord.xy;\n vec2 rel = px - u_center;\n\n // Ignition: the ellipse lights up expanding from the center on mount\n float intro = smoothstep(0.0, 1.4, u_time);\n\n // Breathing: size and brightness oscillate gently but visibly\n float breath = 1.0\n + 0.12 * sin(u_time * 0.55)\n + 0.06 * snoise(vec2(u_time * 0.1, 3.7));\n float pulse = 1.0 + 0.2 * sin(u_time * 0.55 + 1.3);\n\n // Keep it simple (Gemini-style): one huge soft elliptical glow\n // centered on the pill\n vec2 radii = vec2(u_half.x * 0.95, u_half.y * 6.5)\n * u_spread\n * breath\n * mix(0.15, 1.0, intro);\n float r = length(rel / max(radii, vec2(1.0)));\n float glow = exp(-r * r * 2.2);\n\n // Never cut hard against the canvas bounds\n vec2 m = min(px, u_resolution - px);\n glow *= smoothstep(0.0, 32.0, min(m.x, m.y));\n\n // Dither: breaks the 8-bit banding rings of the very soft gradient\n // (no CSS blur on the canvas, the noise must fully mask the bands)\n glow = max(glow + (snoise(px * 0.9) - 0.5) * 0.03, 0.0);\n\n float alpha = glow * 0.2 * pulse * intro;\n\n // Premultiplied alpha (default canvas compositing)\n gl_FragColor = vec4(u_color * alpha, alpha);\n}`\n\n let gl: WebGLRenderingContext | null = null\n let rafId = 0\n let resizeObserver: ResizeObserver | null = null\n let timeLocation: WebGLUniformLocation | null = null\n let resolutionLocation: WebGLUniformLocation | null = null\n let centerLocation: WebGLUniformLocation | null = null\n let halfLocation: WebGLUniformLocation | null = null\n let spreadLocation: WebGLUniformLocation | null = null\n const startTime = performance.now()\n\n const compile = (type: number, source: string): WebGLShader | null => {\n if (!gl) {\n return null\n }\n const shader = gl.createShader(type)\n if (!shader) {\n return null\n }\n gl.shaderSource(shader, source)\n gl.compileShader(shader)\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n return null\n }\n return shader\n }\n\n const parseInheritedColor = (): [number, number, number] | null => {\n if (!canvasEl.value) {\n return null\n }\n const raw = getComputedStyle(canvasEl.value).color\n const match = raw.match(/rgba?\\(([\\d.]+)[,\\s]+([\\d.]+)[,\\s]+([\\d.]+)/)\n if (!match) {\n return null\n }\n return [\n Number(match[1]) / 255,\n Number(match[2]) / 255,\n Number(match[3]) / 255,\n ]\n }\n\n const resize = () => {\n if (!gl || !canvasEl.value) {\n return\n }\n // The glow is blurred anyway: cap the DPR to keep the GPU cost low\n const dpr = Math.min(window.devicePixelRatio || 1, 1.5)\n const { clientWidth, clientHeight } = canvasEl.value\n canvasEl.value.width = Math.max(1, Math.round(clientWidth * dpr))\n canvasEl.value.height = Math.max(1, Math.round(clientHeight * dpr))\n gl.viewport(0, 0, canvasEl.value.width, canvasEl.value.height)\n\n // The glow radiates from the source element (by selector within the\n // positioned parent, or the parent box itself): measure it into\n // shader pixel coordinates (gl origin is bottom-left)\n const host = canvasEl.value.parentElement?.offsetParent\n const source =\n (props.sourceSelector\n ? host?.querySelector(props.sourceSelector)\n : host) ?? host\n const canvasRect = canvasEl.value.getBoundingClientRect()\n const sourceRect = source?.getBoundingClientRect()\n if (sourceRect && canvasRect.width > 0) {\n const scaleX = canvasEl.value.width / canvasRect.width\n const scaleY = canvasEl.value.height / canvasRect.height\n const centerX =\n (sourceRect.left + sourceRect.width / 2 - canvasRect.left) *\n scaleX\n const centerY =\n (canvasRect.bottom - (sourceRect.top + sourceRect.height / 2)) *\n scaleY\n const halfWidth = (sourceRect.width / 2) * scaleX\n const halfHeight = (sourceRect.height / 2) * scaleY\n gl.uniform2f(centerLocation, centerX, centerY)\n gl.uniform2f(halfLocation, halfWidth, halfHeight)\n // Optional responsive boost of the glow size (e.g. mobile)\n const spread = Number.parseFloat(\n getComputedStyle(canvasEl.value).getPropertyValue(\n '--aurora-spread',\n ),\n )\n gl.uniform1f(spreadLocation, Number.isNaN(spread) ? 1 : spread)\n }\n\n // Redraw before the next paint: setting the canvas size reallocates\n // the drawing buffer, and presenting it undrawn can flash as an\n // uninitialized (white) frame. With reduced motion (no loop) this\n // also keeps the settled static frame across resizes.\n drawFrame(prefersReducedMotion() ? 10 : undefined)\n }\n\n const prefersReducedMotion = () =>\n window.matchMedia('(prefers-reduced-motion: reduce)').matches\n\n const drawFrame = (timeSeconds?: number) => {\n if (!gl || !canvasEl.value) {\n return\n }\n gl.uniform1f(\n timeLocation,\n timeSeconds ?? (performance.now() - startTime) / 1000,\n )\n gl.uniform2f(\n resolutionLocation,\n canvasEl.value.width,\n canvasEl.value.height,\n )\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)\n }\n\n const loop = () => {\n drawFrame()\n rafId = requestAnimationFrame(loop)\n }\n\n onMounted(() => {\n const canvas = canvasEl.value\n gl = canvas?.getContext('webgl', { alpha: true }) ?? null\n const color = parseInheritedColor()\n if (!canvas || !gl || !color) {\n failed.value = true\n return\n }\n\n const vertex = compile(gl.VERTEX_SHADER, VERTEX_SHADER)\n const fragment = compile(gl.FRAGMENT_SHADER, FRAGMENT_SHADER)\n const program = gl.createProgram()\n if (!vertex || !fragment || !program) {\n failed.value = true\n return\n }\n gl.attachShader(program, vertex)\n gl.attachShader(program, fragment)\n gl.linkProgram(program)\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n failed.value = true\n return\n }\n gl.useProgram(program)\n\n // Fullscreen quad\n const buffer = gl.createBuffer()\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer)\n gl.bufferData(\n gl.ARRAY_BUFFER,\n new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n gl.STATIC_DRAW,\n )\n const positionLocation = gl.getAttribLocation(program, 'a_position')\n gl.enableVertexAttribArray(positionLocation)\n gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0)\n\n timeLocation = gl.getUniformLocation(program, 'u_time')\n resolutionLocation = gl.getUniformLocation(program, 'u_resolution')\n centerLocation = gl.getUniformLocation(program, 'u_center')\n halfLocation = gl.getUniformLocation(program, 'u_half')\n spreadLocation = gl.getUniformLocation(program, 'u_spread')\n gl.uniform3f(gl.getUniformLocation(program, 'u_color'), ...color)\n\n resizeObserver = new ResizeObserver(resize)\n resizeObserver.observe(canvas)\n resize()\n\n if (prefersReducedMotion()) {\n // Static frame: the color stays, the motion goes\n drawFrame(10)\n return\n }\n loop()\n })\n\n onBeforeUnmount(() => {\n cancelAnimationFrame(rafId)\n resizeObserver?.disconnect()\n })\n\n // Release the context (Chrome caps live WebGL contexts per page) only\n // after the compositor committed the removal: dropping the backing\n // buffer while the last frame is still on screen paints an undefined\n // (white) frame — a visible flash on the dark theme\n onUnmounted(() => {\n const context = gl\n gl = null\n setTimeout(() => {\n context?.getExtension('WEBGL_lose_context')?.loseContext()\n }, 150)\n })\n</script>\n\n<template>\n <div class=\"pk-aurora\" aria-hidden=\"true\">\n <canvas v-if=\"!failed\" ref=\"canvasEl\" class=\"pk-aurora__canvas\" />\n <div v-else class=\"pk-aurora__fallback\" />\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-aurora {\n position: absolute;\n inset: 0;\n // The accent resolved by the canvas (and the CSS fallback)\n color: var(--chat-page-accent, var(--color-brand));\n pointer-events: none;\n\n &__canvas {\n width: 100%;\n height: 100%;\n // No CSS filter on purpose: a filtered accelerated canvas gets\n // its own compositor surface, which Chrome can present\n // uninitialized (a white flash) when the layer is created or\n // torn down. The glow is smoothed in the shader instead.\n }\n\n // CSS blobs when WebGL is unavailable\n &__fallback {\n position: absolute;\n inset: 0;\n background:\n radial-gradient(\n 45% 65% at 32% 38%,\n color-mix(in srgb, currentColor 26%, transparent),\n transparent 70%\n ),\n radial-gradient(\n 40% 55% at 68% 62%,\n color-mix(in srgb, currentColor 16%, transparent),\n transparent 70%\n );\n filter: blur(48px);\n animation: pk-aurora-drift 14s var(--ease-in-out) infinite alternate;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n }\n }\n\n @keyframes pk-aurora-drift {\n from {\n transform: rotate(-10deg) scale(1);\n }\n\n to {\n transform: rotate(10deg) scale(1.2);\n }\n }\n</style>\n","<script setup lang=\"ts\">\n import { computed, useTemplateRef, defineAsyncComponent } from 'vue'\n import { useDropZone } from '@vueuse/core'\n import { storeToRefs } from 'pinia'\n import PkAuroraCanvas from './PkAuroraCanvas.vue'\n import PkAvatar from './PkAvatar.vue'\n import PkChatbotMessages from './PkChatbotMessages.vue'\n import PkChatbotInput from './PkChatbotInput.vue'\n import PkChatbotEmptyState from './PkChatbotEmptyState.vue'\n import {\n useChatbotStore,\n useLocalizedString,\n useGreeting,\n } from 'composables'\n import type { UIChatMessage } from 'models'\n\n const PkToolShowForm = defineAsyncComponent(\n () => import('./PkToolShowForm.vue'),\n )\n const PkToolRequestConfirm = defineAsyncComponent(\n () => import('./PkToolRequestConfirm.vue'),\n )\n const PkToolShowContactForm = defineAsyncComponent(\n () => import('./PkToolShowContactForm.vue'),\n )\n const PkToolShowSuggestedReply = defineAsyncComponent(\n () => import('./PkToolShowSuggestedReply.vue'),\n )\n const PkToolShowSources = defineAsyncComponent(\n () => import('./PkToolShowSources.vue'),\n )\n const PkToolRequestGeolocation = defineAsyncComponent(\n () => import('./PkToolRequestGeolocation.vue'),\n )\n const PkToolRequestOAuthConnection = defineAsyncComponent(\n () => import('./PkToolRequestOAuthConnection.vue'),\n )\n const PkToolShowLocation = defineAsyncComponent(\n () => import('./PkToolShowLocation.vue'),\n )\n const PkToolShowDiagram = defineAsyncComponent(\n () => import('./PkToolShowDiagram.vue'),\n )\n\n const props = defineProps<{\n agentId: string\n /** Mirrors the PkChatbot `modifier` prop: `fullscreen` shows a centered empty state (greeting) instead of the welcome message */\n modifier?: 'widget' | 'fullscreen'\n /** Display name of the current user, used for the `{name}` greeting placeholder */\n userName?: string\n }>()\n\n const emit = defineEmits<{\n 'show-info': [message: UIChatMessage]\n revise: [message: UIChatMessage]\n }>()\n\n const store = useChatbotStore(props.agentId)\n\n const {\n agentInterface,\n agentFileUpload,\n actions,\n revisedAnswers,\n messages,\n chat,\n messageFeedbacks,\n feedbackDialogMessage,\n isFeedbackSubmitting,\n isFeedbackSubmitted,\n feedbackSubmitError,\n isLeadSubmitted,\n isLoadingSubmitLead,\n submitLeadError,\n input,\n inputMessagePlaceholder,\n isConversationBlocked,\n baseUrl,\n pendingAttachments,\n apiClient,\n isDark,\n } = storeToRefs(store)\n\n const {\n handleSubmit: storeHandleSubmit,\n stopGeneration,\n regenerate,\n onUpvote,\n onDownvote,\n onFeedback,\n onFeedbackSubmit,\n onLeadSubmit,\n startNewChat,\n addToolOutput,\n handleFileSelect,\n } = store\n\n const dismissableNotice = useLocalizedString(\n () => agentInterface.value?.dismissableNotice,\n )\n\n // Fullscreen empty state: shown until the user sends the first message.\n // The synthetic welcome message is suppressed by the store in fullscreen\n // (`hideWelcomeMessage`), the greeting takes its place.\n const hasUserMessages = computed(() =>\n messages.value.some((message) => message.role === 'user'),\n )\n const showEmptyState = computed(\n () => props.modifier === 'fullscreen' && !hasUserMessages.value,\n )\n const greeting = useGreeting(agentInterface, () => props.userName)\n\n const chatViewEl = useTemplateRef<HTMLDivElement>('chatViewEl')\n\n const handleExpandSourceContext = async (payload: {\n documentId: string\n chunkIndex: number\n }) => {\n const result = await apiClient.value.expandSourceContext(\n props.agentId,\n payload.documentId,\n payload.chunkIndex,\n )\n return result.content\n }\n\n const handleDownloadSource = async (documentId: string) => {\n const result = await apiClient.value.downloadSourceDocument(\n props.agentId,\n documentId,\n )\n window.open(result.downloadUrl, '_blank')\n }\n\n const handleFileDrop = (files: File[] | null) => {\n if (!agentFileUpload.value?.enabled || !files) {\n return\n }\n for (const file of files) {\n handleFileSelect(file)\n }\n }\n\n const { isOverDropZone } = useDropZone(chatViewEl, {\n dataTypes: computed(\n () => agentFileUpload.value?.allowedMimeTypes ?? [],\n ),\n onDrop: handleFileDrop,\n })\n</script>\n\n<template>\n <div\n ref=\"chatViewEl\"\n class=\"pk-chatbot-view-chat\"\n :class=\"{\n 'pk-chatbot-view-chat--dragover':\n isOverDropZone && agentFileUpload?.enabled,\n 'pk-chatbot-view-chat--empty': showEmptyState,\n }\">\n \n <Transition name=\"pk-chatbot-view-chat-fade\" mode=\"out-in\">\n <PkChatbotEmptyState\n v-if=\"showEmptyState\"\n :greeting=\"greeting\"\n :logo=\"agentInterface?.logo\"\n :name=\"store.name\" />\n <PkChatbotMessages\n v-else\n class=\"flex flex-col flex-1 min-h-0 p-md overflow-y-auto\"\n :messages=\"messages\"\n :status=\"chat.status\"\n :error=\"chat.error\"\n :main-color=\"agentInterface?.mainColor\"\n :text-color=\"agentInterface?.textColor\"\n :revised-answers=\"revisedAnswers\"\n :actions=\"actions\"\n :message-feedbacks=\"messageFeedbacks\"\n :feedback-message-id=\"feedbackDialogMessage?.id\"\n :feedback-loading=\"isFeedbackSubmitting\"\n :feedback-submitted=\"isFeedbackSubmitted\"\n :feedback-error=\"feedbackSubmitError\"\n :show-extended-steps=\"agentInterface?.showExtendedSteps\"\n :is-dark=\"isDark\"\n :show-scroll-to-bottom=\"modifier === 'fullscreen'\"\n @feedback-submit=\"onFeedbackSubmit($event)\"\n @feedback-close=\"feedbackDialogMessage = undefined\"\n @regenerate=\"regenerate\"\n @auto-retry=\"regenerate\"\n @reset-chat=\"startNewChat\"\n @show-info=\"emit('show-info', $event)\"\n @revise=\"emit('revise', $event)\"\n @upvote=\"onUpvote\"\n @downvote=\"onDownvote\"\n @feedback=\"onFeedback\">\n <template #tool-showContactForm=\"{ part }\">\n <PkToolShowContactForm\n :part\n :readonly=\"!baseUrl\"\n :submitted=\"isLeadSubmitted\"\n :loading=\"isLoadingSubmitLead\"\n :error=\"submitLeadError\"\n :privacy-policy-notice=\"\n agentInterface?.privacyPolicyNotice\n \"\n @submit=\"onLeadSubmit\" />\n </template>\n <template #tool-showSuggestedReply=\"{ part }\">\n <PkToolShowSuggestedReply\n :part\n @select=\"\n ($event) => {\n input = $event\n storeHandleSubmit()\n }\n \" />\n </template>\n <template #tool-showSources=\"{ part }\">\n <PkToolShowSources\n :part\n :on-expand-context=\"handleExpandSourceContext\"\n :on-download=\"handleDownloadSource\" />\n </template>\n <template #tool-showForm=\"{ part }\">\n <transition mode=\"out-in\">\n <PkToolShowForm\n :part\n @select=\"\n addToolOutput({\n tool: 'showForm',\n toolCallId: (part as any).toolCallId,\n output: $event,\n })\n \" />\n </transition>\n </template>\n <template #tool-showMultipleChoice=\"{ part }\">\n <transition mode=\"out-in\">\n <PkToolShowForm\n :part\n allow-custom-answer\n @select=\"\n addToolOutput({\n tool: 'showMultipleChoice',\n toolCallId: (part as any).toolCallId,\n output: $event,\n })\n \" />\n </transition>\n </template>\n <template #tool-requestConfirm=\"{ part }\">\n <PkToolRequestConfirm\n :part\n @confirm=\"\n addToolOutput({\n tool: 'requestConfirm',\n toolCallId: (part as any).toolCallId,\n output: $event ? 'confirmed' : 'cancelled',\n })\n \" />\n </template>\n <template #tool-requestOAuthConnection=\"{ part }\">\n <PkToolRequestOAuthConnection\n :part\n :resolve-connection=\"\n (serverName: string) =>\n apiClient.getOAuthAuthorizeUrl(\n props.agentId,\n serverName,\n )\n \"\n @connected=\"\n addToolOutput({\n tool: 'requestOAuthConnection',\n toolCallId: (part as any).toolCallId,\n output: {\n connected: true,\n mcpServerId: $event,\n },\n })\n \" />\n </template>\n <template #tool-requestGeolocation=\"{ part }\">\n <PkToolRequestGeolocation\n :part\n :reverse-geocode=\"\n (lat: number, lon: number) =>\n apiClient.reverseGeocode(lat, lon)\n \"\n @result=\"\n addToolOutput({\n tool: 'requestGeolocation',\n toolCallId: (part as any).toolCallId,\n output: $event,\n })\n \" />\n </template>\n <template #tool-showLocation=\"{ part }\">\n <PkToolShowLocation\n :part\n :is-dark\n :main-color=\"agentInterface?.mainColor\"\n :forward-geocode=\"\n (query: string, lang?: string) =>\n apiClient.forwardGeocode(query, lang)\n \" />\n </template>\n <template #tool-showDiagram=\"{ part }\">\n <PkToolShowDiagram :part :is-dark />\n </template>\n </PkChatbotMessages>\n </Transition>\n \n\n \n <div class=\"pk-chatbot-view-chat__input-stage\">\n \n <Transition name=\"pk-chatbot-view-chat-fade\">\n <PkAuroraCanvas\n v-if=\"showEmptyState\"\n class=\"pk-chatbot-view-chat__aurora\"\n source-selector=\".pk-chatbot-input__form\" />\n </Transition>\n <div\n v-if=\"isConversationBlocked\"\n class=\"p-md border-t border-surface-3 text-center text-12 text-danger-darken-2 bg-surface-danger\">\n {{ $t('message.chatErrorConversationBlocked') }}\n </div>\n <PkChatbotInput\n v-else\n v-model=\"input\"\n v-model:pending-attachments=\"pendingAttachments\"\n :placeholder=\"inputMessagePlaceholder\"\n :dismissable-notice=\"\n dismissableNotice && chat.messages.length <= 1\n ? dismissableNotice\n : undefined\n \"\n :status=\"chat.status\"\n :max-message-length=\"agentInterface?.maxMessageLength\"\n :file-upload=\"agentFileUpload\"\n @stop-generation=\"stopGeneration\"\n @submit=\"storeHandleSubmit\"\n @file-select=\"handleFileSelect\">\n \n <template v-if=\"modifier === 'fullscreen'\" #prepend>\n <span class=\"pk-chatbot-view-chat__agent-chip\">\n <PkAvatar\n modifiers=\"surface\"\n class=\"pk-chatbot-view-chat__agent-chip-avatar\"\n :img-src=\"agentInterface?.logo\"\n :name=\"store.name\" />\n <strong\n v-if=\"store.name\"\n class=\"pk-chatbot-view-chat__agent-chip-name\">\n {{ store.name }}\n </strong>\n </span>\n </template>\n </PkChatbotInput>\n </div>\n \n <Transition>\n <div\n v-if=\"isOverDropZone && agentFileUpload?.enabled\"\n class=\"pk-chatbot-view-chat__drop-overlay\">\n <VvIcon\n name=\"ri:upload-cloud-2-line\"\n class=\"pk-chatbot-view-chat__drop-overlay-icon\" />\n <span>{{ $t('action.dropFile') }}</span>\n </div>\n </Transition>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-chatbot-view-chat {\n position: relative;\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n\n // Empty state (fullscreen): center the greeting + input block\n // vertically in the available space\n &--empty {\n justify-content: center;\n gap: var(--spacing-md);\n\n // On phones the input docks to the bottom edge instead\n // (Gemini-like), with the greeting centered in the space above\n @include media-breakpoint-down('xs', $breakpoints) {\n justify-content: flex-start;\n\n .pk-chatbot-empty-state {\n flex: 1;\n justify-content: center;\n }\n }\n }\n\n // Anchors the glow to the input pill\n &__input-stage {\n position: relative;\n }\n\n // Radiates outwards from the pill, biased upwards (the pill itself\n // paints above, being later in the DOM)\n &__input-stage &__aurora {\n inset: calc(-1 * var(--spacing-224)) calc(-1 * var(--spacing-96))\n calc(-1 * var(--spacing-160));\n\n // With the input docked at the bottom the glow becomes a wide\n // dome filling the lower part of the screen (Gemini-like)\n @include media-breakpoint-down('xs', $breakpoints) {\n --aurora-spread: 1.6;\n\n // Tall enough that the glow tail never meets the canvas\n // edge fade (it would draw a visible horizontal band)\n inset: calc(-1 * var(--spacing-384) - var(--spacing-128))\n calc(-1 * var(--spacing-96)) calc(-1 * var(--spacing-160));\n }\n }\n\n // Agent identity inside the input pill (fullscreen has no header)\n &__agent-chip {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-6);\n flex-shrink: 0;\n padding: var(--spacing-4) var(--spacing-10) var(--spacing-4)\n var(--spacing-4);\n border: 1px solid var(--color-surface-3);\n border-radius: var(--rounded-full);\n background-color: var(--color-surface);\n\n // Don't crowd the textarea on small screens\n @include media-breakpoint-down('md', $breakpoints) {\n display: none;\n }\n }\n\n &__agent-chip-avatar {\n width: var(--spacing-24);\n height: var(--spacing-24);\n font-size: var(--text-10);\n border-radius: var(--rounded-full);\n }\n\n &__agent-chip-name {\n font-size: var(--text-12);\n font-weight: var(--font-semibold);\n color: var(--color-word-2);\n white-space: nowrap;\n }\n\n // Crossfade empty state ↔ messages: exit faster than enter so the\n // switch never feels like a snap\n &-fade-enter-active {\n transition: opacity 250ms var(--ease-out);\n }\n\n &-fade-leave-active {\n transition: opacity 150ms var(--ease-out);\n }\n\n &-fade-enter-from,\n &-fade-leave-to {\n opacity: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n &-fade-enter-active,\n &-fade-leave-active {\n transition: none;\n }\n }\n\n &__drop-overlay {\n position: absolute;\n inset: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm)\n var(--spacing-sm);\n z-index: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-xs);\n background-color: color-mix(\n in srgb,\n var(--color-surface) 85%,\n transparent\n );\n border-radius: var(--rounded-xl);\n border: var(--spacing-2) dashed var(--color-surface-5);\n pointer-events: none;\n color: var(--color-word-3);\n\n &-icon {\n font-size: var(--spacing-32);\n }\n }\n }\n</style>\n","<script setup lang=\"ts\">\n import { computed, useTemplateRef, defineAsyncComponent } from 'vue'\n import { useDropZone } from '@vueuse/core'\n import { storeToRefs } from 'pinia'\n import PkAuroraCanvas from './PkAuroraCanvas.vue'\n import PkAvatar from './PkAvatar.vue'\n import PkChatbotMessages from './PkChatbotMessages.vue'\n import PkChatbotInput from './PkChatbotInput.vue'\n import PkChatbotEmptyState from './PkChatbotEmptyState.vue'\n import {\n useChatbotStore,\n useLocalizedString,\n useGreeting,\n } from 'composables'\n import type { UIChatMessage } from 'models'\n\n const PkToolShowForm = defineAsyncComponent(\n () => import('./PkToolShowForm.vue'),\n )\n const PkToolRequestConfirm = defineAsyncComponent(\n () => import('./PkToolRequestConfirm.vue'),\n )\n const PkToolShowContactForm = defineAsyncComponent(\n () => import('./PkToolShowContactForm.vue'),\n )\n const PkToolShowSuggestedReply = defineAsyncComponent(\n () => import('./PkToolShowSuggestedReply.vue'),\n )\n const PkToolShowSources = defineAsyncComponent(\n () => import('./PkToolShowSources.vue'),\n )\n const PkToolRequestGeolocation = defineAsyncComponent(\n () => import('./PkToolRequestGeolocation.vue'),\n )\n const PkToolRequestOAuthConnection = defineAsyncComponent(\n () => import('./PkToolRequestOAuthConnection.vue'),\n )\n const PkToolShowLocation = defineAsyncComponent(\n () => import('./PkToolShowLocation.vue'),\n )\n const PkToolShowDiagram = defineAsyncComponent(\n () => import('./PkToolShowDiagram.vue'),\n )\n\n const props = defineProps<{\n agentId: string\n /** Mirrors the PkChatbot `modifier` prop: `fullscreen` shows a centered empty state (greeting) instead of the welcome message */\n modifier?: 'widget' | 'fullscreen'\n /** Display name of the current user, used for the `{name}` greeting placeholder */\n userName?: string\n }>()\n\n const emit = defineEmits<{\n 'show-info': [message: UIChatMessage]\n revise: [message: UIChatMessage]\n }>()\n\n const store = useChatbotStore(props.agentId)\n\n const {\n agentInterface,\n agentFileUpload,\n actions,\n revisedAnswers,\n messages,\n chat,\n messageFeedbacks,\n feedbackDialogMessage,\n isFeedbackSubmitting,\n isFeedbackSubmitted,\n feedbackSubmitError,\n isLeadSubmitted,\n isLoadingSubmitLead,\n submitLeadError,\n input,\n inputMessagePlaceholder,\n isConversationBlocked,\n baseUrl,\n pendingAttachments,\n apiClient,\n isDark,\n } = storeToRefs(store)\n\n const {\n handleSubmit: storeHandleSubmit,\n stopGeneration,\n regenerate,\n onUpvote,\n onDownvote,\n onFeedback,\n onFeedbackSubmit,\n onLeadSubmit,\n startNewChat,\n addToolOutput,\n handleFileSelect,\n } = store\n\n const dismissableNotice = useLocalizedString(\n () => agentInterface.value?.dismissableNotice,\n )\n\n // Fullscreen empty state: shown until the user sends the first message.\n // The synthetic welcome message is suppressed by the store in fullscreen\n // (`hideWelcomeMessage`), the greeting takes its place.\n const hasUserMessages = computed(() =>\n messages.value.some((message) => message.role === 'user'),\n )\n const showEmptyState = computed(\n () => props.modifier === 'fullscreen' && !hasUserMessages.value,\n )\n const greeting = useGreeting(agentInterface, () => props.userName)\n\n const chatViewEl = useTemplateRef<HTMLDivElement>('chatViewEl')\n\n const handleExpandSourceContext = async (payload: {\n documentId: string\n chunkIndex: number\n }) => {\n const result = await apiClient.value.expandSourceContext(\n props.agentId,\n payload.documentId,\n payload.chunkIndex,\n )\n return result.content\n }\n\n const handleDownloadSource = async (documentId: string) => {\n const result = await apiClient.value.downloadSourceDocument(\n props.agentId,\n documentId,\n )\n window.open(result.downloadUrl, '_blank')\n }\n\n const handleFileDrop = (files: File[] | null) => {\n if (!agentFileUpload.value?.enabled || !files) {\n return\n }\n for (const file of files) {\n handleFileSelect(file)\n }\n }\n\n const { isOverDropZone } = useDropZone(chatViewEl, {\n dataTypes: computed(\n () => agentFileUpload.value?.allowedMimeTypes ?? [],\n ),\n onDrop: handleFileDrop,\n })\n</script>\n\n<template>\n <div\n ref=\"chatViewEl\"\n class=\"pk-chatbot-view-chat\"\n :class=\"{\n 'pk-chatbot-view-chat--dragover':\n isOverDropZone && agentFileUpload?.enabled,\n 'pk-chatbot-view-chat--empty': showEmptyState,\n }\">\n \n <Transition name=\"pk-chatbot-view-chat-fade\" mode=\"out-in\">\n <PkChatbotEmptyState\n v-if=\"showEmptyState\"\n :greeting=\"greeting\"\n :logo=\"agentInterface?.logo\"\n :name=\"store.name\" />\n <PkChatbotMessages\n v-else\n class=\"flex flex-col flex-1 min-h-0 p-md overflow-y-auto\"\n :messages=\"messages\"\n :status=\"chat.status\"\n :error=\"chat.error\"\n :main-color=\"agentInterface?.mainColor\"\n :text-color=\"agentInterface?.textColor\"\n :revised-answers=\"revisedAnswers\"\n :actions=\"actions\"\n :message-feedbacks=\"messageFeedbacks\"\n :feedback-message-id=\"feedbackDialogMessage?.id\"\n :feedback-loading=\"isFeedbackSubmitting\"\n :feedback-submitted=\"isFeedbackSubmitted\"\n :feedback-error=\"feedbackSubmitError\"\n :show-extended-steps=\"agentInterface?.showExtendedSteps\"\n :is-dark=\"isDark\"\n :show-scroll-to-bottom=\"modifier === 'fullscreen'\"\n @feedback-submit=\"onFeedbackSubmit($event)\"\n @feedback-close=\"feedbackDialogMessage = undefined\"\n @regenerate=\"regenerate\"\n @auto-retry=\"regenerate\"\n @reset-chat=\"startNewChat\"\n @show-info=\"emit('show-info', $event)\"\n @revise=\"emit('revise', $event)\"\n @upvote=\"onUpvote\"\n @downvote=\"onDownvote\"\n @feedback=\"onFeedback\">\n <template #tool-showContactForm=\"{ part }\">\n <PkToolShowContactForm\n :part\n :readonly=\"!baseUrl\"\n :submitted=\"isLeadSubmitted\"\n :loading=\"isLoadingSubmitLead\"\n :error=\"submitLeadError\"\n :privacy-policy-notice=\"\n agentInterface?.privacyPolicyNotice\n \"\n @submit=\"onLeadSubmit\" />\n </template>\n <template #tool-showSuggestedReply=\"{ part }\">\n <PkToolShowSuggestedReply\n :part\n @select=\"\n ($event) => {\n input = $event\n storeHandleSubmit()\n }\n \" />\n </template>\n <template #tool-showSources=\"{ part }\">\n <PkToolShowSources\n :part\n :on-expand-context=\"handleExpandSourceContext\"\n :on-download=\"handleDownloadSource\" />\n </template>\n <template #tool-showForm=\"{ part }\">\n <transition mode=\"out-in\">\n <PkToolShowForm\n :part\n @select=\"\n addToolOutput({\n tool: 'showForm',\n toolCallId: (part as any).toolCallId,\n output: $event,\n })\n \" />\n </transition>\n </template>\n <template #tool-showMultipleChoice=\"{ part }\">\n <transition mode=\"out-in\">\n <PkToolShowForm\n :part\n allow-custom-answer\n @select=\"\n addToolOutput({\n tool: 'showMultipleChoice',\n toolCallId: (part as any).toolCallId,\n output: $event,\n })\n \" />\n </transition>\n </template>\n <template #tool-requestConfirm=\"{ part }\">\n <PkToolRequestConfirm\n :part\n @confirm=\"\n addToolOutput({\n tool: 'requestConfirm',\n toolCallId: (part as any).toolCallId,\n output: $event ? 'confirmed' : 'cancelled',\n })\n \" />\n </template>\n <template #tool-requestOAuthConnection=\"{ part }\">\n <PkToolRequestOAuthConnection\n :part\n :resolve-connection=\"\n (serverName: string) =>\n apiClient.getOAuthAuthorizeUrl(\n props.agentId,\n serverName,\n )\n \"\n @connected=\"\n addToolOutput({\n tool: 'requestOAuthConnection',\n toolCallId: (part as any).toolCallId,\n output: {\n connected: true,\n mcpServerId: $event,\n },\n })\n \" />\n </template>\n <template #tool-requestGeolocation=\"{ part }\">\n <PkToolRequestGeolocation\n :part\n :reverse-geocode=\"\n (lat: number, lon: number) =>\n apiClient.reverseGeocode(lat, lon)\n \"\n @result=\"\n addToolOutput({\n tool: 'requestGeolocation',\n toolCallId: (part as any).toolCallId,\n output: $event,\n })\n \" />\n </template>\n <template #tool-showLocation=\"{ part }\">\n <PkToolShowLocation\n :part\n :is-dark\n :main-color=\"agentInterface?.mainColor\"\n :forward-geocode=\"\n (query: string, lang?: string) =>\n apiClient.forwardGeocode(query, lang)\n \" />\n </template>\n <template #tool-showDiagram=\"{ part }\">\n <PkToolShowDiagram :part :is-dark />\n </template>\n </PkChatbotMessages>\n </Transition>\n \n\n \n <div class=\"pk-chatbot-view-chat__input-stage\">\n \n <Transition name=\"pk-chatbot-view-chat-fade\">\n <PkAuroraCanvas\n v-if=\"showEmptyState\"\n class=\"pk-chatbot-view-chat__aurora\"\n source-selector=\".pk-chatbot-input__form\" />\n </Transition>\n <div\n v-if=\"isConversationBlocked\"\n class=\"p-md border-t border-surface-3 text-center text-12 text-danger-darken-2 bg-surface-danger\">\n {{ $t('message.chatErrorConversationBlocked') }}\n </div>\n <PkChatbotInput\n v-else\n v-model=\"input\"\n v-model:pending-attachments=\"pendingAttachments\"\n :placeholder=\"inputMessagePlaceholder\"\n :dismissable-notice=\"\n dismissableNotice && chat.messages.length <= 1\n ? dismissableNotice\n : undefined\n \"\n :status=\"chat.status\"\n :max-message-length=\"agentInterface?.maxMessageLength\"\n :file-upload=\"agentFileUpload\"\n @stop-generation=\"stopGeneration\"\n @submit=\"storeHandleSubmit\"\n @file-select=\"handleFileSelect\">\n \n <template v-if=\"modifier === 'fullscreen'\" #prepend>\n <span class=\"pk-chatbot-view-chat__agent-chip\">\n <PkAvatar\n modifiers=\"surface\"\n class=\"pk-chatbot-view-chat__agent-chip-avatar\"\n :img-src=\"agentInterface?.logo\"\n :name=\"store.name\" />\n <strong\n v-if=\"store.name\"\n class=\"pk-chatbot-view-chat__agent-chip-name\">\n {{ store.name }}\n </strong>\n </span>\n </template>\n </PkChatbotInput>\n </div>\n \n <Transition>\n <div\n v-if=\"isOverDropZone && agentFileUpload?.enabled\"\n class=\"pk-chatbot-view-chat__drop-overlay\">\n <VvIcon\n name=\"ri:upload-cloud-2-line\"\n class=\"pk-chatbot-view-chat__drop-overlay-icon\" />\n <span>{{ $t('action.dropFile') }}</span>\n </div>\n </Transition>\n </div>\n</template>\n\n<style lang=\"scss\">\n .pk-chatbot-view-chat {\n position: relative;\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n\n // Empty state (fullscreen): center the greeting + input block\n // vertically in the available space\n &--empty {\n justify-content: center;\n gap: var(--spacing-md);\n\n // On phones the input docks to the bottom edge instead\n // (Gemini-like), with the greeting centered in the space above\n @include media-breakpoint-down('xs', $breakpoints) {\n justify-content: flex-start;\n\n .pk-chatbot-empty-state {\n flex: 1;\n justify-content: center;\n }\n }\n }\n\n // Anchors the glow to the input pill\n &__input-stage {\n position: relative;\n }\n\n // Radiates outwards from the pill, biased upwards (the pill itself\n // paints above, being later in the DOM)\n &__input-stage &__aurora {\n inset: calc(-1 * var(--spacing-224)) calc(-1 * var(--spacing-96))\n calc(-1 * var(--spacing-160));\n\n // With the input docked at the bottom the glow becomes a wide\n // dome filling the lower part of the screen (Gemini-like)\n @include media-breakpoint-down('xs', $breakpoints) {\n --aurora-spread: 1.6;\n\n // Tall enough that the glow tail never meets the canvas\n // edge fade (it would draw a visible horizontal band)\n inset: calc(-1 * var(--spacing-384) - var(--spacing-128))\n calc(-1 * var(--spacing-96)) calc(-1 * var(--spacing-160));\n }\n }\n\n // Agent identity inside the input pill (fullscreen has no header)\n &__agent-chip {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-6);\n flex-shrink: 0;\n padding: var(--spacing-4) var(--spacing-10) var(--spacing-4)\n var(--spacing-4);\n border: 1px solid var(--color-surface-3);\n border-radius: var(--rounded-full);\n background-color: var(--color-surface);\n\n // Don't crowd the textarea on small screens\n @include media-breakpoint-down('md', $breakpoints) {\n display: none;\n }\n }\n\n &__agent-chip-avatar {\n width: var(--spacing-24);\n height: var(--spacing-24);\n font-size: var(--text-10);\n border-radius: var(--rounded-full);\n }\n\n &__agent-chip-name {\n font-size: var(--text-12);\n font-weight: var(--font-semibold);\n color: var(--color-word-2);\n white-space: nowrap;\n }\n\n // Crossfade empty state ↔ messages: exit faster than enter so the\n // switch never feels like a snap\n &-fade-enter-active {\n transition: opacity 250ms var(--ease-out);\n }\n\n &-fade-leave-active {\n transition: opacity 150ms var(--ease-out);\n }\n\n &-fade-enter-from,\n &-fade-leave-to {\n opacity: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n &-fade-enter-active,\n &-fade-leave-active {\n transition: none;\n }\n }\n\n &__drop-overlay {\n position: absolute;\n inset: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm)\n var(--spacing-sm);\n z-index: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-xs);\n background-color: color-mix(\n in srgb,\n var(--color-surface) 85%,\n transparent\n );\n border-radius: var(--rounded-xl);\n border: var(--spacing-2) dashed var(--color-surface-5);\n pointer-events: none;\n color: var(--color-word-3);\n\n &-icon {\n font-size: var(--spacing-32);\n }\n }\n }\n</style>\n"],"mappings":"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"}