npm - @8wave/ai-elements - Versions diffs - 0.84.0 → 0.85.0 - Mend

@8wave/ai-elements 0.84.0 → 0.85.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 (459) hide show

package/dist-vue/_chunks/PkChatbotMessages-DUOrit9Y.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PkChatbotMessages-DUOrit9Y.js","names":["$d","$emit","$n"],"sources":["../../../../packages/components/src/chat/toolComponentMap.ts","../../../../packages/components/src/chat/PkStreamingMarkdownAutoscroll.vue","../../../../packages/components/src/chat/PkStreamingMarkdownAutoscroll.vue","../../../../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 showMultipleChoice: defineAsyncComponent(\n () => import('./PkToolShowMultipleChoice.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","<script lang=\"ts\" setup>\n import { nextTick, ref, watch } from 'vue'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n const props = defineProps<{\n markdown?: string\n innerClass?: string\n isDark?: boolean\n }>()\n\n const scrollEl = ref<HTMLDivElement>()\n const lastScrollTop = ref<number>(0)\n const stopAutoScroll = ref<boolean>(false)\n\n const handleScroll = () => {\n if (!scrollEl.value) {\n return\n }\n const currentScrollTop = scrollEl.value.scrollTop\n if (currentScrollTop < lastScrollTop.value) {\n const delta = lastScrollTop.value - currentScrollTop\n if (delta < 50) {\n stopAutoScroll.value = true\n }\n }\n if (currentScrollTop > lastScrollTop.value) {\n if (\n currentScrollTop ===\n scrollEl.value.scrollHeight - scrollEl.value.clientHeight\n ) {\n stopAutoScroll.value = false\n }\n }\n lastScrollTop.value = currentScrollTop\n }\n\n watch(\n () => props.markdown,\n async () => {\n await nextTick()\n if (scrollEl.value && !stopAutoScroll.value) {\n scrollEl.value.scrollTop = scrollEl.value.scrollHeight\n }\n },\n { immediate: true },\n )\n</script>\n\n<template>\n <div\n ref=\"scrollEl\"\n class=\"overflow-auto light-scrollbar\"\n @scroll=\"handleScroll\">\n <PkStreamingMarkdown :markdown :is-dark :class=\"innerClass\" />\n </div>\n</template>\n","<script lang=\"ts\" setup>\n import { nextTick, ref, watch } from 'vue'\n import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n const props = defineProps<{\n markdown?: string\n innerClass?: string\n isDark?: boolean\n }>()\n\n const scrollEl = ref<HTMLDivElement>()\n const lastScrollTop = ref<number>(0)\n const stopAutoScroll = ref<boolean>(false)\n\n const handleScroll = () => {\n if (!scrollEl.value) {\n return\n }\n const currentScrollTop = scrollEl.value.scrollTop\n if (currentScrollTop < lastScrollTop.value) {\n const delta = lastScrollTop.value - currentScrollTop\n if (delta < 50) {\n stopAutoScroll.value = true\n }\n }\n if (currentScrollTop > lastScrollTop.value) {\n if (\n currentScrollTop ===\n scrollEl.value.scrollHeight - scrollEl.value.clientHeight\n ) {\n stopAutoScroll.value = false\n }\n }\n lastScrollTop.value = currentScrollTop\n }\n\n watch(\n () => props.markdown,\n async () => {\n await nextTick()\n if (scrollEl.value && !stopAutoScroll.value) {\n scrollEl.value.scrollTop = scrollEl.value.scrollHeight\n }\n },\n { immediate: true },\n )\n</script>\n\n<template>\n <div\n ref=\"scrollEl\"\n class=\"overflow-auto light-scrollbar\"\n @scroll=\"handleScroll\">\n <PkStreamingMarkdown :markdown :is-dark :class=\"innerClass\" />\n </div>\n</template>\n","import type { Ref, ShallowRef } from 'vue'\nimport { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'\n\nconst NEAR_BOTTOM_THRESHOLD = 30\nconst SCROLL_UP_THRESHOLD = 50\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 onScrollUp?: () => void\n onScrollDown?: () => void\n}\n\nexport function useChatScroll(options: UseChatScrollOptions) {\n const {\n scrollEl,\n status,\n messagesLength,\n lastMessageRole,\n onScrollUp,\n onScrollDown,\n } = options\n\n const userScrolledUp = ref(false)\n let isAutoScrolling = false\n let mutationObserver: MutationObserver | null = null\n let resizeObserver: ResizeObserver | null = null\n let initMutationObserver: MutationObserver | 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\n const handleScroll = () => {\n if (!scrollEl.value) {\n return\n }\n const currentScrollTop = scrollEl.value.scrollTop\n if (isAutoScrolling) {\n lastScrollTop = currentScrollTop\n return\n }\n\n if (currentScrollTop < lastScrollTop) {\n if (lastScrollTop - currentScrollTop < SCROLL_UP_THRESHOLD) {\n userScrolledUp.value = true\n }\n onScrollUp?.()\n }\n\n if (currentScrollTop > lastScrollTop) {\n const { scrollHeight, clientHeight } = scrollEl.value\n if (\n scrollHeight - clientHeight - currentScrollTop <\n NEAR_BOTTOM_THRESHOLD\n ) {\n userScrolledUp.value = false\n }\n onScrollDown?.()\n }\n\n lastScrollTop = currentScrollTop\n }\n\n // --- Streaming auto-scroll ---\n\n const startMutationScroll = () => {\n if (mutationObserver || !scrollEl.value) {\n return\n }\n mutationObserver = new MutationObserver(() => {\n if (isAutoScrolling || userScrolledUp.value || !scrollEl.value) {\n return\n }\n isAutoScrolling = true\n scrollEl.value.scrollTop = scrollEl.value.scrollHeight\n requestAnimationFrame(() => {\n isAutoScrolling = false\n })\n })\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 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 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 tryInitialScroll()\n })\n\n onBeforeUnmount(() => {\n stopMutationScroll()\n cleanupInitialObservers()\n })\n\n return {\n handleScroll,\n scrollToBottom,\n userScrolledUp,\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 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 {\n resolveContrastColor,\n getPartState,\n isTextPart,\n isFilePart,\n isToolPart,\n isStreamingPart,\n getPartIcon,\n getToolPartLabel,\n mergeConsecutiveTextParts,\n } from './utils'\n import { getToolPartName, toKebabCase } from 'utils'\n import PkStreamingMarkdownAutoscroll from './PkStreamingMarkdownAutoscroll.vue'\n import { useChatScroll } from './useChatScroll'\n\n const props = defineProps<{\n status?: 'submitted' | 'streaming' | 'ready' | 'error'\n messages?: UIChatMessage[]\n logo?: string\n name?: string\n error?: Error\n actions?: ChatMessageActions[]\n mainColor?: string\n textColor?: 'auto' | 'white' | 'black'\n revisedAnswers?: RevisedAnswer[]\n messageFeedbacks?: MessageFeedback[]\n disableHeightAdjustment?: boolean\n showMessageDateTime?: boolean\n showMessageTokensCount?: boolean\n showAllMessageParts?: boolean\n isDark?: 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 { t: $t } = useI18n({\n useScope: 'global',\n })\n\n const slots = useSlots()\n\n const scrollEl = useTemplateRef<HTMLDivElement>('scrollEl')\n const contrastColor = computed(() =>\n resolveContrastColor(props.textColor, props.mainColor),\n )\n\n // --- Scroll ---\n\n const { handleScroll, scrollToBottom } = useChatScroll({\n scrollEl,\n status: () => props.status,\n messagesLength: () => props.messages?.length,\n lastMessageRole: () =>\n props.messages?.[props.messages.length - 1]?.role,\n onScrollUp: () => emit('scroll-up'),\n onScrollDown: () => emit('scroll-down'),\n })\n\n // --- Height adjustment ---\n\n const messagesElRefs = useTemplateRef<HTMLDivElement[]>('messagesEl')\n const height = ref<number>(0)\n\n watch(\n () => props.messages,\n async (messages) => {\n if (!messages?.length || props.disableHeightAdjustment) {\n return\n }\n await nextTick()\n const scrollElHeight = (scrollEl.value?.clientHeight ?? 0) - 48\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) {\n height.value = newHeight\n }\n },\n { deep: true },\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 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 ?? 0) - 1\n }\n const isMessageRegenerateButtonVisible = (index: number) => {\n return (\n isLastMessage(index) &&\n props.status === 'ready' &&\n props.actions?.includes('regenerate')\n )\n }\n const isActionButtonVisible = (\n action: ChatMessageActions,\n index: number,\n ) => {\n return (\n ((isLastMessage(index) && props.status === 'ready') ||\n !isLastMessage(index)) &&\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 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 const isDayChanged = (index: number) => {\n const previousAssistantMessage = getPreviousAssistantMessage(index)\n const nextAssistantMessage = getNextAssistantMessage(index)\n if (\n !previousAssistantMessage?.metadata?.createdAt ||\n !nextAssistantMessage?.metadata?.createdAt\n ) {\n return false\n }\n const currentDate = new Date(\n previousAssistantMessage.metadata.createdAt,\n )\n const previousDate = new Date(nextAssistantMessage.metadata.createdAt)\n return (\n currentDate.getFullYear() !== previousDate.getFullYear() ||\n currentDate.getMonth() !== previousDate.getMonth() ||\n currentDate.getDate() !== previousDate.getDate()\n )\n }\n const showMessageFooter = (message: UIChatMessage, index: number) => {\n if (index === 0 || message.role !== 'assistant') {\n return false\n }\n return (\n props.actions?.length ||\n (props.showMessageDateTime &&\n message.metadata?.createdAt !== undefined) ||\n (props.showMessageTokensCount &&\n message.metadata?.totalTokens !== undefined)\n )\n }\n // feedback message auto scroll\n const feedbackMessageEl = ref<(typeof PkChatbotFeedbackForm)[]>()\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 :style=\"{\n '--chatbot-main-color': mainColor,\n '--chatbot-contrast-color': contrastColor,\n }\"\n @scroll=\"handleScroll\">\n <div class=\"pk-chatbot-messages__wrapper\">\n <template v-for=\"(message, index) in messages\" :key=\"message.id\">\n <div\n v-if=\"index > 0 && isUser(message) && isDayChanged(index)\"\n class=\"pk-chatbot-divider\">\n <span class=\"pk-chatbot-divider__label\">\n {{\n $d(\n new Date(\n getNextAssistantMessage(index)?.metadata\n ?.createdAt ?? '',\n ),\n 'short',\n )\n }}\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 <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 index ===\n (messages?.length ?? 0) - 1 &&\n status === 'streaming'\n \" />\n <template v-else>\n {{ part.text }}\n </template>\n </slot>\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 </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-10\">\n {{ toKebabCase(part.type) }}\n </code>\n </div>\n </div>\n </slot>\n </transition>\n </template>\n <transition name=\"pk-chatbot-fade\" mode=\"out-in\">\n <div\n v-if=\"\n isLoading &&\n isLastMessage(index) &&\n !isLastTextPart(message) &&\n isAssistant(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-10\">\n {{ activeMessageLastPartLabel }}\n </span>\n </transition>\n </div>\n <transition 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-10 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 modifiers=\"compact\" class=\"mr-auto\">\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 @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 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 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 isActionButtonVisible(\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 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 isActionButtonVisible(\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 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 isActionButtonVisible(\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 modifiers=\"action-quiet-small\"\n @click.stop=\"\n $emit('feedback', message)\n \" />\n </transition>\n </VvButtonGroup>\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 name=\"ri:ai-generate-2-line\" />\n {{\n $n(message.metadata.totalTokens, 'integer')\n }}\n {{ $t('label.tokens') }}\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\" />\n {{\n $d(\n new Date(message.metadata?.createdAt),\n 'date-time',\n )\n }}\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 name=\"ri:hourglass-line\" />\n <PkRelativeTime\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 :style=\"{ minHeight: `${height}px` }\"></div>\n </div>\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(--spacing-14);\n\n scrollbar-width: thin;\n scrollbar-gutter: auto;\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 &__divider {\n border-bottom: 1px solid var(--color-surface-3);\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\n &__text {\n color: var(--color-word-2);\n line-height: var(--leading-normal);\n border-width: var(--spacing-px);\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 &__loading-info {\n line-height: var(--leading-normal);\n border-width: var(--spacing-px);\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 &--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-width: var(--spacing-px);\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 display: flex;\n min-width: 0;\n flex-direction: column;\n gap: var(--spacing-16);\n overflow: hidden;\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-width: var(--spacing-px);\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 .pk-chatbot-fade-enter-active,\n .pk-chatbot-fade-leave-active {\n transition: opacity 0.2s ease;\n }\n\n .pk-chatbot-fade-enter-from,\n .pk-chatbot-fade-leave-to {\n opacity: 0;\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 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 {\n resolveContrastColor,\n getPartState,\n isTextPart,\n isFilePart,\n isToolPart,\n isStreamingPart,\n getPartIcon,\n getToolPartLabel,\n mergeConsecutiveTextParts,\n } from './utils'\n import { getToolPartName, toKebabCase } from 'utils'\n import PkStreamingMarkdownAutoscroll from './PkStreamingMarkdownAutoscroll.vue'\n import { useChatScroll } from './useChatScroll'\n\n const props = defineProps<{\n status?: 'submitted' | 'streaming' | 'ready' | 'error'\n messages?: UIChatMessage[]\n logo?: string\n name?: string\n error?: Error\n actions?: ChatMessageActions[]\n mainColor?: string\n textColor?: 'auto' | 'white' | 'black'\n revisedAnswers?: RevisedAnswer[]\n messageFeedbacks?: MessageFeedback[]\n disableHeightAdjustment?: boolean\n showMessageDateTime?: boolean\n showMessageTokensCount?: boolean\n showAllMessageParts?: boolean\n isDark?: 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 { t: $t } = useI18n({\n useScope: 'global',\n })\n\n const slots = useSlots()\n\n const scrollEl = useTemplateRef<HTMLDivElement>('scrollEl')\n const contrastColor = computed(() =>\n resolveContrastColor(props.textColor, props.mainColor),\n )\n\n // --- Scroll ---\n\n const { handleScroll, scrollToBottom } = useChatScroll({\n scrollEl,\n status: () => props.status,\n messagesLength: () => props.messages?.length,\n lastMessageRole: () =>\n props.messages?.[props.messages.length - 1]?.role,\n onScrollUp: () => emit('scroll-up'),\n onScrollDown: () => emit('scroll-down'),\n })\n\n // --- Height adjustment ---\n\n const messagesElRefs = useTemplateRef<HTMLDivElement[]>('messagesEl')\n const height = ref<number>(0)\n\n watch(\n () => props.messages,\n async (messages) => {\n if (!messages?.length || props.disableHeightAdjustment) {\n return\n }\n await nextTick()\n const scrollElHeight = (scrollEl.value?.clientHeight ?? 0) - 48\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) {\n height.value = newHeight\n }\n },\n { deep: true },\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 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 ?? 0) - 1\n }\n const isMessageRegenerateButtonVisible = (index: number) => {\n return (\n isLastMessage(index) &&\n props.status === 'ready' &&\n props.actions?.includes('regenerate')\n )\n }\n const isActionButtonVisible = (\n action: ChatMessageActions,\n index: number,\n ) => {\n return (\n ((isLastMessage(index) && props.status === 'ready') ||\n !isLastMessage(index)) &&\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 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 const isDayChanged = (index: number) => {\n const previousAssistantMessage = getPreviousAssistantMessage(index)\n const nextAssistantMessage = getNextAssistantMessage(index)\n if (\n !previousAssistantMessage?.metadata?.createdAt ||\n !nextAssistantMessage?.metadata?.createdAt\n ) {\n return false\n }\n const currentDate = new Date(\n previousAssistantMessage.metadata.createdAt,\n )\n const previousDate = new Date(nextAssistantMessage.metadata.createdAt)\n return (\n currentDate.getFullYear() !== previousDate.getFullYear() ||\n currentDate.getMonth() !== previousDate.getMonth() ||\n currentDate.getDate() !== previousDate.getDate()\n )\n }\n const showMessageFooter = (message: UIChatMessage, index: number) => {\n if (index === 0 || message.role !== 'assistant') {\n return false\n }\n return (\n props.actions?.length ||\n (props.showMessageDateTime &&\n message.metadata?.createdAt !== undefined) ||\n (props.showMessageTokensCount &&\n message.metadata?.totalTokens !== undefined)\n )\n }\n // feedback message auto scroll\n const feedbackMessageEl = ref<(typeof PkChatbotFeedbackForm)[]>()\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 :style=\"{\n '--chatbot-main-color': mainColor,\n '--chatbot-contrast-color': contrastColor,\n }\"\n @scroll=\"handleScroll\">\n <div class=\"pk-chatbot-messages__wrapper\">\n <template v-for=\"(message, index) in messages\" :key=\"message.id\">\n <div\n v-if=\"index > 0 && isUser(message) && isDayChanged(index)\"\n class=\"pk-chatbot-divider\">\n <span class=\"pk-chatbot-divider__label\">\n {{\n $d(\n new Date(\n getNextAssistantMessage(index)?.metadata\n ?.createdAt ?? '',\n ),\n 'short',\n )\n }}\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 <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 index ===\n (messages?.length ?? 0) - 1 &&\n status === 'streaming'\n \" />\n <template v-else>\n {{ part.text }}\n </template>\n </slot>\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 </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-10\">\n {{ toKebabCase(part.type) }}\n </code>\n </div>\n </div>\n </slot>\n </transition>\n </template>\n <transition name=\"pk-chatbot-fade\" mode=\"out-in\">\n <div\n v-if=\"\n isLoading &&\n isLastMessage(index) &&\n !isLastTextPart(message) &&\n isAssistant(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-10\">\n {{ activeMessageLastPartLabel }}\n </span>\n </transition>\n </div>\n <transition 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-10 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 modifiers=\"compact\" class=\"mr-auto\">\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 @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 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 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 isActionButtonVisible(\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 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 isActionButtonVisible(\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 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 isActionButtonVisible(\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 modifiers=\"action-quiet-small\"\n @click.stop=\"\n $emit('feedback', message)\n \" />\n </transition>\n </VvButtonGroup>\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 name=\"ri:ai-generate-2-line\" />\n {{\n $n(message.metadata.totalTokens, 'integer')\n }}\n {{ $t('label.tokens') }}\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\" />\n {{\n $d(\n new Date(message.metadata?.createdAt),\n 'date-time',\n )\n }}\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 name=\"ri:hourglass-line\" />\n <PkRelativeTime\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 :style=\"{ minHeight: `${height}px` }\"></div>\n </div>\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(--spacing-14);\n\n scrollbar-width: thin;\n scrollbar-gutter: auto;\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 &__divider {\n border-bottom: 1px solid var(--color-surface-3);\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\n &__text {\n color: var(--color-word-2);\n line-height: var(--leading-normal);\n border-width: var(--spacing-px);\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 &__loading-info {\n line-height: var(--leading-normal);\n border-width: var(--spacing-px);\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 &--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-width: var(--spacing-px);\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 display: flex;\n min-width: 0;\n flex-direction: column;\n gap: var(--spacing-16);\n overflow: hidden;\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-width: var(--spacing-px);\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 .pk-chatbot-fade-enter-active,\n .pk-chatbot-fade-leave-active {\n transition: opacity 0.2s ease;\n }\n\n .pk-chatbot-fade-enter-from,\n .pk-chatbot-fade-leave-to {\n opacity: 0;\n }\n</style>\n"],"mappings":"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"}

package/dist-vue/_chunks/PkChatbotViewChat-BgH9Op_G.js ADDED Viewed

@@ -0,0 +1,225 @@
+import { t as e } from "./useChatbotStore-DCCWlutT.js";
+import { t } from "./useLocalizedString-CW0dVF2K.js";
+import { t as n } from "./PkChatbotMessages-DUOrit9Y.js";
+import { t as r } from "./PkChatbotInput-Dn4KFNfx.js";
+import { VvIcon as i } from "@volverjs/ui-vue/components";
+import { Transition as a, computed as o, createBlock as ee, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineAsyncComponent as d, defineComponent as f, isRef as p, normalizeClass as te, openBlock as m, toDisplayString as h, unref as g, useTemplateRef as _, withCtx as v } from "vue";
+import { useDropZone as y } from "@vueuse/core";
+import { storeToRefs as b } from "pinia";
+//#region ../../packages/components/src/chat/PkChatbotViewChat.vue?vue&type=script&setup=true&lang.ts
+var x = {
+	key: 0,
+	class: "p-md border-t border-surface-3 text-center text-12 text-danger-darken-2 bg-surface-danger"
+}, ne = {
+	key: 0,
+	class: "pk-chatbot-view-chat__drop-overlay"
+}, S = /* @__PURE__ */ f({
+	__name: "PkChatbotViewChat",
+	props: { agentId: {} },
+	emits: ["show-info", "revise"],
+	setup(f, { emit: S }) {
+		let re = d(() => import("./PkToolShowMultipleChoice-BEWDze3p.js").then((e) => e.n)), ie = d(() => import("./PkToolRequestConfirm-BcZ10rMb.js")), ae = d(() => import("./PkToolShowContactForm-BVtuQVGs.js").then((e) => e.n)), oe = d(() => import("./PkToolShowSuggestedReply-DIrmkOUq.js").then((e) => e.n)), se = d(() => import("./PkToolShowSources-cFvwqgDz.js").then((e) => e.n)), ce = d(() => import("./PkToolRequestGeolocation-DXSqWFTR.js")), le = d(() => import("./PkToolRequestOAuthConnection-CIrFBhxL.js")), ue = d(() => import("./PkToolShowLocation-DAg9HeYq.js").then((e) => e.n)), C = d(() => import("./PkToolShowDiagram-CLyYku9I.js")), w = f, T = S, E = e(w.agentId), { name: D, agentInterface: O, agentFileUpload: k, agentTools: A, actions: j, revisedAnswers: M, messages: N, chat: P, messageFeedbacks: F, feedbackDialogMessage: I, isFeedbackSubmitting: L, isFeedbackSubmitted: R, feedbackSubmitError: z, isLeadSubmitted: B, isLoadingSubmitLead: V, submitLeadError: de, input: H, inputMessagePlaceholder: fe, isConversationBlocked: pe, baseUrl: me, pendingAttachments: U, apiClient: W, isDark: G } = b(E), { handleSubmit: K, stopGeneration: he, regenerate: q, onUpvote: ge, onDownvote: _e, onFeedback: ve, onFeedbackSubmit: J, onLeadSubmit: ye, startNewChat: be, addToolOutput: Y, handleFileSelect: X } = E, Z = t(() => O.value?.dismissableNotice), Q = _("chatViewEl"), xe = async (e) => (await W.value.expandSourceContext(w.agentId, e.documentId, e.chunkIndex)).content, Se = async (e) => {
+			let t = await W.value.downloadSourceDocument(w.agentId, e);
+			window.open(t.downloadUrl, "_blank");
+		}, { isOverDropZone: $ } = y(Q, {
+			dataTypes: o(() => k.value?.allowedMimeTypes ?? []),
+			onDrop: (e) => {
+				if (!(!k.value?.enabled || !e)) for (let t of e) X(t);
+			}
+		});
+		return (e, t) => {
+			let o = i;
+			return m(), c("div", {
+				ref_key: "chatViewEl",
+				ref: Q,
+				class: te(["pk-chatbot-view-chat", { "pk-chatbot-view-chat--dragover": g($) && g(k)?.enabled }])
+			}, [
+				u(n, {
+					class: "flex flex-col flex-1 min-h-0 p-md overflow-y-auto",
+					name: g(D),
+					messages: g(N),
+					status: g(P).status,
+					error: g(P).error,
+					"main-color": g(O)?.mainColor,
+					"text-color": g(O)?.textColor,
+					"revised-answers": g(M),
+					actions: g(j),
+					logo: g(O)?.logo,
+					"message-feedbacks": g(F),
+					"feedback-message-id": g(I)?.id,
+					"feedback-loading": g(L),
+					"feedback-submitted": g(R),
+					"feedback-error": g(z),
+					"is-dark": g(G),
+					onFeedbackSubmit: t[1] ||= (e) => g(J)(e),
+					onFeedbackClose: t[2] ||= (e) => I.value = void 0,
+					onRegenerate: g(q),
+					onAutoRetry: g(q),
+					onResetChat: g(be),
+					onShowInfo: t[3] ||= (e) => T("show-info", e),
+					onRevise: t[4] ||= (e) => T("revise", e),
+					onUpvote: g(ge),
+					onDownvote: g(_e),
+					onFeedback: g(ve)
+				}, {
+					"tool-showContactForm": v(({ part: e }) => [u(g(ae), {
+						part: e,
+						readonly: !g(me),
+						submitted: g(B),
+						loading: g(V),
+						error: g(de),
+						"privacy-policy-notice": g(O)?.privacyPolicyNotice,
+						onSubmit: g(ye)
+					}, null, 8, [
+						"part",
+						"readonly",
+						"submitted",
+						"loading",
+						"error",
+						"privacy-policy-notice",
+						"onSubmit"
+					])]),
+					"tool-showSuggestedReply": v(({ part: e }) => [u(g(oe), {
+						part: e,
+						onSelect: t[0] ||= (e) => {
+							H.value = e, g(K)();
+						}
+					}, null, 8, ["part"])]),
+					"tool-showSources": v(({ part: e }) => [u(g(se), {
+						part: e,
+						"on-expand-context": xe,
+						"on-download": Se
+					}, null, 8, ["part"])]),
+					"tool-showMultipleChoice": v(({ part: e }) => [u(a, { mode: "out-in" }, {
+						default: v(() => [u(g(re), {
+							part: e,
+							"allow-custom-answer": g(A)?.showMultipleChoice?.allowCustomAnswer,
+							onSelect: (t) => g(Y)({
+								tool: "showMultipleChoice",
+								toolCallId: e.toolCallId,
+								output: t
+							})
+						}, null, 8, [
+							"part",
+							"allow-custom-answer",
+							"onSelect"
+						])]),
+						_: 2
+					}, 1024)]),
+					"tool-requestConfirm": v(({ part: e }) => [u(g(ie), {
+						part: e,
+						onConfirm: (t) => g(Y)({
+							tool: "requestConfirm",
+							toolCallId: e.toolCallId,
+							output: t ? "confirmed" : "cancelled"
+						})
+					}, null, 8, ["part", "onConfirm"])]),
+					"tool-requestOAuthConnection": v(({ part: e }) => [u(g(le), {
+						part: e,
+						"resolve-connection": (e) => g(W).getOAuthAuthorizeUrl(w.agentId, e),
+						onConnected: (t) => g(Y)({
+							tool: "requestOAuthConnection",
+							toolCallId: e.toolCallId,
+							output: {
+								connected: !0,
+								mcpServerId: t
+							}
+						})
+					}, null, 8, [
+						"part",
+						"resolve-connection",
+						"onConnected"
+					])]),
+					"tool-requestGeolocation": v(({ part: e }) => [u(g(ce), {
+						part: e,
+						"reverse-geocode": (e, t) => g(W).reverseGeocode(e, t),
+						onResult: (t) => g(Y)({
+							tool: "requestGeolocation",
+							toolCallId: e.toolCallId,
+							output: t
+						})
+					}, null, 8, [
+						"part",
+						"reverse-geocode",
+						"onResult"
+					])]),
+					"tool-showLocation": v(({ part: e }) => [u(g(ue), {
+						part: e,
+						"is-dark": g(G),
+						"main-color": g(O)?.mainColor,
+						"forward-geocode": (e, t) => g(W).forwardGeocode(e, t)
+					}, null, 8, [
+						"part",
+						"is-dark",
+						"main-color",
+						"forward-geocode"
+					])]),
+					"tool-showDiagram": v(({ part: e }) => [u(g(C), {
+						part: e,
+						"is-dark": g(G)
+					}, null, 8, ["part", "is-dark"])]),
+					_: 1
+				}, 8, [
+					"name",
+					"messages",
+					"status",
+					"error",
+					"main-color",
+					"text-color",
+					"revised-answers",
+					"actions",
+					"logo",
+					"message-feedbacks",
+					"feedback-message-id",
+					"feedback-loading",
+					"feedback-submitted",
+					"feedback-error",
+					"is-dark",
+					"onRegenerate",
+					"onAutoRetry",
+					"onResetChat",
+					"onUpvote",
+					"onDownvote",
+					"onFeedback"
+				]),
+				g(pe) ? (m(), c("div", x, h(e.$t("message.chatErrorConversationBlocked")), 1)) : (m(), ee(r, {
+					key: 1,
+					modelValue: g(H),
+					"onUpdate:modelValue": t[5] ||= (e) => p(H) ? H.value = e : null,
+					"pending-attachments": g(U),
+					"onUpdate:pendingAttachments": t[6] ||= (e) => p(U) ? U.value = e : null,
+					placeholder: g(fe),
+					"dismissable-notice": g(Z) && g(P).messages.length <= 1 ? g(Z) : void 0,
+					status: g(P).status,
+					"max-message-length": g(O)?.maxMessageLength,
+					"file-upload": g(k),
+					onStopGeneration: g(he),
+					onSubmit: g(K),
+					onFileSelect: g(X)
+				}, null, 8, [
+					"modelValue",
+					"pending-attachments",
+					"placeholder",
+					"dismissable-notice",
+					"status",
+					"max-message-length",
+					"file-upload",
+					"onStopGeneration",
+					"onSubmit",
+					"onFileSelect"
+				])),
+				u(a, null, {
+					default: v(() => [g($) && g(k)?.enabled ? (m(), c("div", ne, [u(o, {
+						name: "ri:upload-cloud-2-line",
+						class: "pk-chatbot-view-chat__drop-overlay-icon"
+					}), l("span", null, h(e.$t("action.dropFile")), 1)])) : s("", !0)]),
+					_: 1
+				})
+			], 2);
+		};
+	}
+});
+//#endregion
+export { S as t };
+//# sourceMappingURL=PkChatbotViewChat-BgH9Op_G.js.map

package/dist-vue/_chunks/PkChatbotViewChat-BgH9Op_G.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PkChatbotViewChat-BgH9Op_G.js","names":["$t"],"sources":["../../../../packages/components/src/chat/PkChatbotViewChat.vue","../../../../packages/components/src/chat/PkChatbotViewChat.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed, useTemplateRef, defineAsyncComponent } from 'vue'\n import { useDropZone } from '@vueuse/core'\n import { storeToRefs } from 'pinia'\n import PkChatbotMessages from './PkChatbotMessages.vue'\n import PkChatbotInput from './PkChatbotInput.vue'\n import { useChatbotStore, useLocalizedString } from 'composables'\n import type { UIChatMessage } from 'models'\n\n const PkToolShowMultipleChoice = defineAsyncComponent(\n () => import('./PkToolShowMultipleChoice.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<{ agentId: string }>()\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 name,\n agentInterface,\n agentFileUpload,\n agentTools,\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 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 }\">\n \n <PkChatbotMessages\n class=\"flex flex-col flex-1 min-h-0 p-md overflow-y-auto\"\n :name=\"name\"\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 :logo=\"agentInterface?.logo\"\n :message-feedbacks=\"messageFeedbacks\"\n :feedback-message-id=\"feedbackDialogMessage?.id\"\n :feedback-loading=\"isFeedbackSubmitting\"\n :feedback-submitted=\"isFeedbackSubmitted\"\n :feedback-error=\"feedbackSubmitError\"\n :is-dark=\"isDark\"\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=\"agentInterface?.privacyPolicyNotice\"\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-showMultipleChoice=\"{ part }\">\n <transition mode=\"out-in\">\n <PkToolShowMultipleChoice\n :part\n :allow-custom-answer=\"\n agentTools?.showMultipleChoice?.allowCustomAnswer\n \"\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: { connected: true, mcpServerId: $event },\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 \n\n \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 <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 &__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 PkChatbotMessages from './PkChatbotMessages.vue'\n import PkChatbotInput from './PkChatbotInput.vue'\n import { useChatbotStore, useLocalizedString } from 'composables'\n import type { UIChatMessage } from 'models'\n\n const PkToolShowMultipleChoice = defineAsyncComponent(\n () => import('./PkToolShowMultipleChoice.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<{ agentId: string }>()\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 name,\n agentInterface,\n agentFileUpload,\n agentTools,\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 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 }\">\n \n <PkChatbotMessages\n class=\"flex flex-col flex-1 min-h-0 p-md overflow-y-auto\"\n :name=\"name\"\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 :logo=\"agentInterface?.logo\"\n :message-feedbacks=\"messageFeedbacks\"\n :feedback-message-id=\"feedbackDialogMessage?.id\"\n :feedback-loading=\"isFeedbackSubmitting\"\n :feedback-submitted=\"isFeedbackSubmitted\"\n :feedback-error=\"feedbackSubmitError\"\n :is-dark=\"isDark\"\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=\"agentInterface?.privacyPolicyNotice\"\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-showMultipleChoice=\"{ part }\">\n <transition mode=\"out-in\">\n <PkToolShowMultipleChoice\n :part\n :allow-custom-answer=\"\n agentTools?.showMultipleChoice?.allowCustomAnswer\n \"\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: { connected: true, mcpServerId: $event },\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 \n\n \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 <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 &__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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"}

package/dist-vue/_chunks/{PkChatbotViewConversations-kIc1reZT.js → PkChatbotViewConversations-B9KC-0ir.js} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { t as e } from "./useChatbotStore-BXi-Gx7b.js";
-import { m as t, s as n } from "./src-EtGd6cRz.js";
+import { t as e } from "./useChatbotStore-DCCWlutT.js";
+import { c as t, h as n } from "./src-DW4YojFN.js";
 import { t as r } from "./PkRelativeTime-WZ2aPcp_.js";
 import { VvButton as i, VvButtonGroup as a, VvDialog as o, VvDropdown as s, VvDropdownAction as c, VvIcon as l, VvInputText as u } from "@volverjs/ui-vue/components";
 import { Fragment as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, h as v, mergeProps as y, nextTick as b, normalizeClass as x, openBlock as S, ref as C, renderList as w, toDisplayString as T, unref as E, vModelText as D, withCtx as O, withDirectives as k, withKeys as A, withModifiers as j } from "vue";
@@ -88,8 +88,8 @@ var N = C(!1), P = C(), F = C(), I = C(), L = C(!1), R = C(), z = C(), B = () =>
 	setup(a) {
 		let o = a, { t: u } = M({ useScope: "global" }), _ = e(o.agentId), { conversations: v, localChatId: N } = ee(_), { navigate: P, startNewChat: F, renameChatTitle: I, deleteChat: L } = _, R = C(null), z = C(""), B = C(), Z = (e) => {
 			R.value || (N.value = e, P("chat"));
-		}, te = (e) => N.value === e.id, Q = (e, r) => t(n(e.filter((e) => e.role === r).slice(-1)[0]) || ""), ne = (e) => {
-			R.value = e.id, z.value = t(e.title) || Q(e.messages, "assistant") || "", b(() => {
+		}, te = (e) => N.value === e.id, Q = (e, r) => n(t(e.filter((e) => e.role === r).slice(-1)[0]) || ""), ne = (e) => {
+			R.value = e.id, z.value = n(e.title) || Q(e.messages, "assistant") || "", b(() => {
 				B.value?.[0] && (B.value?.[0]?.focus(), B.value?.[0]?.select());
 			});
 		}, $ = async (e) => {
@@ -105,7 +105,7 @@ var N = C(!1), P = C(), F = C(), I = C(), L = C(!1), R = C(), z = C(), B = () =>
 				await L(e);
 			} catch {}
 		};
-		return (e, n) => {
+		return (e, t) => {
 			let a = i, o = l, _ = c, b = s;
 			return S(), p("div", H, [E(v).length === 0 ? (S(), p("div", U, T(E(u)("message.noConversations")), 1)) : (S(), p("ul", W, [(S(!0), p(d, null, w(E(v), (e) => (S(), p("li", { key: e.id }, [m("button", {
 				type: "button",
@@ -115,24 +115,24 @@ var N = C(!1), P = C(), F = C(), I = C(), L = C(!1), R = C(), z = C(), B = () =>
 				ref_for: !0,
 				ref_key: "renameInputEl",
 				ref: B,
-				"onUpdate:modelValue": n[0] ||= (e) => z.value = e,
+				"onUpdate:modelValue": t[0] ||= (e) => z.value = e,
 				class: "flex-1 placeholder:text-word-4 leading-none",
 				placeholder: E(u)("placeholder.insert"),
 				maxlength: 255,
-				onClick: n[1] ||= j(() => {}, ["stop"]),
-				onKeydown: [A(j((t) => $(e.id), ["prevent"]), ["enter"]), n[2] ||= A(j((e) => re(), ["prevent"]), ["esc"])]
+				onClick: t[1] ||= j(() => {}, ["stop"]),
+				onKeydown: [A(j((t) => $(e.id), ["prevent"]), ["enter"]), t[2] ||= A(j((e) => re(), ["prevent"]), ["esc"])]
 			}, null, 40, q), [[D, z.value]]), g(a, {
 				icon: "ri:save-line",
 				label: E(u)("action.save"),
 				modifiers: "action-small",
 				onClick: j((t) => $(e.id), ["stop"])
 			}, null, 8, ["label", "onClick"])], 64)) : (S(), p(d, { key: 1 }, [
-				m("strong", J, T(E(t)(e.title) || Q(e.messages, "assistant")), 1),
+				m("strong", J, T(E(n)(e.title) || Q(e.messages, "assistant")), 1),
 				g(r, {
 					class: "text-word-4 text-smaller shrink-0",
 					date: e.lastMessageAt
 				}, null, 8, ["date"]),
-				m("div", { onClick: n[3] ||= j(() => {}, ["stop"]) }, [g(b, y({ ref_for: !0 }, {
+				m("div", { onClick: t[3] ||= j(() => {}, ["stop"]) }, [g(b, y({ ref_for: !0 }, {
 					placement: "bottom-end",
 					modifiers: "menu",
 					flip: !0,
@@ -153,11 +153,11 @@ var N = C(!1), P = C(), F = C(), I = C(), L = C(!1), R = C(), z = C(), B = () =>
 					}, null, 8, ["title"])]),
 					_: 2
 				}, 1040)])
-			], 64))]), R.value === e.id ? f("", !0) : (S(), p("span", Y, T(E(t)(e.summary) || Q(e.messages, "user")), 1))], 10, G)]))), 128))])), m("div", X, [g(a, {
+			], 64))]), R.value === e.id ? f("", !0) : (S(), p("span", Y, T(E(n)(e.summary) || Q(e.messages, "user")), 1))], 10, G)]))), 128))])), m("div", X, [g(a, {
 				class: "text-14",
 				modifiers: "rounded",
 				label: E(u)("action.startNewChat"),
-				onClick: n[4] ||= j((e) => E(F)(), ["stop"])
+				onClick: t[4] ||= j((e) => E(F)(), ["stop"])
 			}, null, 8, ["label"])])]);
 		};
 	}
@@ -165,4 +165,4 @@ var N = C(!1), P = C(), F = C(), I = C(), L = C(!1), R = C(), z = C(), B = () =>
 //#endregion
 export { V as n, Z as t };
-//# sourceMappingURL=PkChatbotViewConversations-kIc1reZT.js.map
+//# sourceMappingURL=PkChatbotViewConversations-B9KC-0ir.js.map