@meistrari/chat-nuxt 3.14.0-rc.2 → 3.14.0-rc.4

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@meistrari/chat-nuxt",
   "configKey": "chatNuxt",
-  "version": "3.14.0-rc.2",
+  "version": "3.14.0-rc.4",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/assets/css/markstream.css

@@ -1 +1 @@
-.markstream-vue{color:#171717;font-family:Inter,"Inter Fallback: Arial",sans-serif;font-size:16px;font-weight:400;letter-spacing:-.15px;line-height:24px;--list-item-marker:#a3a3a3;--list-item-counter-marker:#262626}.markstream-vue code,.markstream-vue kbd,.markstream-vue pre,.markstream-vue samp{font-family:Geist Mono Variable,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:13px;font-variation-settings:normal;line-height:1.5}.markstream-vue ol,.markstream-vue ul{margin:8px 0;padding-left:1.5em}.markstream-vue .hr-node{border-color:#e5e5e5;border-top-width:.5px;margin-bottom:24px;margin-top:24px}.markstream-vue .strong-node{font-weight:580}.markstream-vue .list-node.list-node{margin-bottom:8px;margin-left:4px;margin-top:8px;padding-left:1em}.markstream-vue ul{list-style:disc;list-style-position:outside}.markstream-vue ol{list-style:decimal;list-style-position:outside}.markstream-vue li{margin:4px 0}.markstream-vue .paragraph-node{margin:0}.markstream-vue .my-8{margin-bottom:8px;margin-top:8px}.markstream-vue .heading-node.heading-1,.markstream-vue h1{font-size:24px;font-weight:540;letter-spacing:-.8px;line-height:28px;margin:24px 0 16px}.markstream-vue .heading-node.heading-2,.markstream-vue h2{font-size:20px;font-weight:540;letter-spacing:-.5px;line-height:24px;margin:20px 0 12px}.markstream-vue .heading-node.heading-3,.markstream-vue h3{font-size:20px;font-weight:540;letter-spacing:-.5px;line-height:24px;margin:16px 0 8px}.markstream-vue .heading-node.heading-4,.markstream-vue h4{font-size:16px;font-weight:540;letter-spacing:-.2px;line-height:20px;margin:12px 0 6px}.markstream-vue .heading-node.heading-5,.markstream-vue h5{font-size:14px;font-weight:540;letter-spacing:-.15px;line-height:16px;margin:8px 0 4px}.markstream-vue .heading-node.heading-6,.markstream-vue h6{font-size:12px;font-weight:540;letter-spacing:-.1px;line-height:14px;margin:8px 0 4px}.markstream-vue [class*=tooltip],[class*=tooltip-element]{background-color:var(--neutral-900,#1a1a1a)!important;border-radius:4px;color:#fff!important;font-size:12px;padding:4px 8px}.mention-tag{align-items:center;border-radius:9999px;display:inline-flex;font-size:.875em;font-weight:500;gap:4px;padding:2px 8px;vertical-align:middle;white-space:nowrap}.mention-tag-file{background-color:rgba(127,189,247,.12);color:#7fbdf7}.mention-tag-skill{background-color:rgba(155,111,222,.12);color:#9b6fde}.mention-tag-canvas{background-color:rgba(234,161,65,.12);color:#d4882e}.mention-tag>span[class*=i-ph]{flex-shrink:0}
+.markstream-vue{color:#171717;font-family:Inter,"Inter Fallback: Arial",sans-serif;font-size:16px;font-weight:400;letter-spacing:-.15px;line-height:24px;--list-item-marker:#a3a3a3;--list-item-counter-marker:#262626}.markstream-vue code,.markstream-vue kbd,.markstream-vue pre,.markstream-vue samp{font-family:Geist Mono Variable,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:13px;font-variation-settings:normal;line-height:1.5}.markstream-vue ol,.markstream-vue ul{margin:8px 0;padding-left:1.5em}.markstream-vue .hr-node{border-color:#e5e5e5;border-top-width:.5px;margin-bottom:24px;margin-top:24px}.markstream-vue .strong-node{font-weight:580}.markstream-vue .list-node.list-node{margin-bottom:8px;margin-left:4px;margin-top:8px;padding-left:1em}.markstream-vue ul{list-style:disc;list-style-position:outside}.markstream-vue ol{list-style:decimal;list-style-position:outside}.markstream-vue li{margin:4px 0}.markstream-vue .paragraph-node{margin:0}.markstream-vue>.node-slot[data-node-type=paragraph]:not(:first-child){margin-top:12px}.markstream-vue .my-8{margin-bottom:8px;margin-top:8px}.markstream-vue .heading-node.heading-1,.markstream-vue h1{font-size:24px;font-weight:540;letter-spacing:-.8px;line-height:28px;margin:24px 0 16px}.markstream-vue .heading-node.heading-2,.markstream-vue h2{font-size:20px;font-weight:540;letter-spacing:-.5px;line-height:24px;margin:20px 0 12px}.markstream-vue .heading-node.heading-3,.markstream-vue h3{font-size:20px;font-weight:540;letter-spacing:-.5px;line-height:24px;margin:16px 0 8px}.markstream-vue .heading-node.heading-4,.markstream-vue h4{font-size:16px;font-weight:540;letter-spacing:-.2px;line-height:20px;margin:12px 0 6px}.markstream-vue .heading-node.heading-5,.markstream-vue h5{font-size:14px;font-weight:540;letter-spacing:-.15px;line-height:16px;margin:8px 0 4px}.markstream-vue .heading-node.heading-6,.markstream-vue h6{font-size:12px;font-weight:540;letter-spacing:-.1px;line-height:14px;margin:8px 0 4px}.markstream-vue [class*=tooltip],[class*=tooltip-element]{background-color:var(--neutral-900,#1a1a1a)!important;border-radius:4px;color:#fff!important;font-size:12px;padding:4px 8px}.mention-tag{align-items:center;border-radius:9999px;display:inline-flex;font-size:.875em;font-weight:500;gap:4px;padding:2px 8px;vertical-align:middle;white-space:nowrap}.mention-tag-file{background-color:rgba(127,189,247,.12);color:#7fbdf7}.mention-tag-skill{background-color:rgba(155,111,222,.12);color:#9b6fde}.mention-tag-canvas{background-color:rgba(234,161,65,.12);color:#d4882e}.mention-tag>span[class*=i-ph]{flex-shrink:0}

package/dist/runtime/citations/components/chat-url-citation.d.vue.ts

@@ -0,0 +1,7 @@
+import type { UrlCitationPreview } from '../url-citation.js';
+type __VLS_Props = {
+    citation: UrlCitationPreview;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/citations/components/chat-url-citation.vue

@@ -0,0 +1,74 @@
+<script setup>
+const props = defineProps({
+  citation: { type: Object, required: true }
+});
+const faviconFailed = ref(false);
+const shouldLoadFavicon = ref(false);
+function activatePreviewAssets() {
+  shouldLoadFavicon.value = true;
+}
+const accessibleLabel = computed(() => `${props.citation.sourceLabel}: ${props.citation.title}`);
+</script>
+
+<template>
+    <TelaHoverCard
+        align="start"
+        side="top"
+        :side-offset="8"
+        :open-delay="160"
+        :close-delay="100"
+    >
+        <a
+            :href="citation.href"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="url-citation-pill"
+            body-11-medium
+            :aria-label="accessibleLabel"
+            @pointerenter="activatePreviewAssets"
+            @focus="activatePreviewAssets"
+        >
+            <img
+                v-if="shouldLoadFavicon && !faviconFailed"
+                :src="citation.faviconUrl"
+                alt=""
+                class="url-citation-favicon"
+                referrerpolicy="no-referrer"
+                @error="faviconFailed = true"
+            >
+            <span v-else i-ph-globe-simple class="url-citation-fallback" aria-hidden="true" />
+            <span>{{ citation.sourceLabel }}</span>
+        </a>
+
+        <template #content>
+            <div class="url-citation-card" bg-white flex="~ col" gap-10px p-12px>
+                <div flex items-center gap-7px min-w-0>
+                    <img
+                        v-if="shouldLoadFavicon && !faviconFailed"
+                        :src="citation.faviconUrl"
+                        alt=""
+                        class="url-citation-card__favicon"
+                        referrerpolicy="no-referrer"
+                        @error="faviconFailed = true"
+                    >
+                    <span v-else i-ph-globe-simple class="url-citation-card__fallback" aria-hidden="true" />
+                    <span body-12-medium text-secondary truncate>
+                        {{ citation.sourceLabel }}
+                    </span>
+                </div>
+
+                <p body-14-medium text-primary m-0 class="url-citation-card__title">
+                    {{ citation.title }}
+                </p>
+
+                <p body-11-regular text-tertiary m-0 truncate>
+                    {{ citation.displayUrl }}
+                </p>
+            </div>
+        </template>
+    </TelaHoverCard>
+</template>
+
+<style scoped>
+.url-citation-pill{align-items:center;background:#f5f5f5;border-radius:999px;box-shadow:inset 0 0 0 .5px rgb(0 0 0/8%);box-sizing:border-box;color:#404040;display:inline-flex;gap:4px;height:20px;line-height:1;padding:1px 7px 1px 5px;text-decoration:none;transition:background-color .15s ease,transform .12s cubic-bezier(.2,0,0,1);vertical-align:middle;white-space:nowrap}.url-citation-pill:hover{background:#e5e5e5}.url-citation-pill:active{transform:scale(.98)}.url-citation-pill:focus-visible{outline:2px solid rgba(59,130,246,.55);outline-offset:2px}.url-citation-fallback,.url-citation-favicon{border-radius:50%;flex:0 0 12px;height:12px;width:12px}.url-citation-favicon{background:#fff;-o-object-fit:contain;object-fit:contain}.url-citation-fallback{color:#737373}.url-citation-card{border-radius:12px;box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 12px 32px rgba(0,0,0,.12),0 2px 6px rgb(0 0 0/6%);width:min(320px,calc(100vw - 16px))}.url-citation-card__fallback,.url-citation-card__favicon{border-radius:50%;flex:0 0 18px;height:18px;width:18px}.url-citation-card__favicon{-o-object-fit:contain;object-fit:contain}.url-citation-card__fallback{color:#737373}.url-citation-card__title{text-wrap:balance}
+</style>

package/dist/runtime/citations/components/chat-url-citation.vue.d.ts

@@ -0,0 +1,7 @@
+import type { UrlCitationPreview } from '../url-citation.js';
+type __VLS_Props = {
+    citation: UrlCitationPreview;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/citations/url-citation.d.ts

@@ -0,0 +1,8 @@
+export interface UrlCitationPreview {
+    href: string;
+    faviconUrl: string;
+    sourceLabel: string;
+    title: string;
+    displayUrl: string;
+}
+export declare function parseUrlCitation(href: string, label: string, markdownTitle?: string | null): UrlCitationPreview | null;

package/dist/runtime/citations/url-citation.js

@@ -0,0 +1,32 @@
+const URL_CITATION_MARKER = "#citation";
+const FAVICON_PROXY_PATH = "/api/citation-favicon";
+function titleCase(value) {
+  return value.replace(/[-_]+/g, " ").replace(/\b\p{L}/gu, (letter) => letter.toLocaleUpperCase());
+}
+function sourceLabelFor(hostname) {
+  const parts = hostname.replace(/^www\./i, "").split(".");
+  const compoundSuffix = parts.slice(-2).join(".");
+  const suffixParts = (/* @__PURE__ */ new Set(["co.uk", "com.au", "com.br", "com.mx", "com.tr", "co.jp"])).has(compoundSuffix) ? 2 : 1;
+  const brandIndex = Math.max(0, parts.length - suffixParts - 1);
+  return titleCase(parts[brandIndex] || hostname);
+}
+export function parseUrlCitation(href, label, markdownTitle) {
+  if (!href.endsWith(URL_CITATION_MARKER))
+    return null;
+  const cleanHref = href.slice(0, -URL_CITATION_MARKER.length);
+  let url;
+  try {
+    url = new URL(cleanHref);
+  } catch {
+    return null;
+  }
+  if (url.protocol !== "http:" && url.protocol !== "https:")
+    return null;
+  return {
+    href: url.href,
+    faviconUrl: `${FAVICON_PROXY_PATH}?domain=${encodeURIComponent(url.hostname)}`,
+    sourceLabel: sourceLabelFor(url.hostname),
+    title: markdownTitle?.trim() || label.trim() || url.hostname,
+    displayUrl: `${url.hostname}${url.pathname}${url.search}${url.hash}`
+  };
+}

package/dist/runtime/files/components/chat-vault-link.vue

@@ -1,5 +1,7 @@
 <script setup>
 import { parseCitationUrl } from "../../citations/citation-links";
+import ChatUrlCitation from "../../citations/components/chat-url-citation.vue";
+import { parseUrlCitation } from "../../citations/url-citation";
 import { useEmbedConfig } from "../../embed/composables/embed-config";
 import { detectFileFromUrl } from "../content-detection";
 const props = defineProps({
@@ -9,17 +11,18 @@ const props = defineProps({
 });
 const embedConfig = useEmbedConfig();
 const detectedFile = computed(() => detectFileFromUrl(props.node.href));
-const detectedCitation = computed(() => {
-  if (!embedConfig?.citations.value)
-    return null;
-  return parseCitationUrl(props.node.href);
-});
 const linkText = computed(() => {
   if (props.node.children?.length > 0) {
     return props.node.children.map((c) => c.raw).join("");
   }
   return props.node.text || props.node.href;
 });
+const detectedCitation = computed(() => {
+  if (!embedConfig?.citations.value)
+    return null;
+  return parseCitationUrl(props.node.href);
+});
+const detectedUrlCitation = computed(() => parseUrlCitation(props.node.href, linkText.value, props.node.title));
 </script>
 
 <template>
@@ -36,6 +39,10 @@ const linkText = computed(() => {
         :citation="detectedCitation"
         :label="linkText"
     />
+    <ChatUrlCitation
+        v-else-if="detectedUrlCitation"
+        :citation="detectedUrlCitation"
+    />
     <a
         v-else
         :href="node.href"

package/dist/runtime/messages/components/chat-debug-workbench.vue

@@ -6,6 +6,7 @@ import { useChatDebugDiagnostics } from "../debug/use-chat-debug-diagnostics";
 import { formatChatDebugTime as formatTime, useChatDebugPlayback } from "../debug/use-chat-debug-playback";
 const scenarios = createChatDebugScenarios();
 const viewportWidth = ref("default");
+const conversationVariant = ref("widget");
 const showBounds = ref(false);
 const rootRef = ref(null);
 const stageRef = ref(null);
@@ -66,6 +67,10 @@ const viewportOptions = [
   { id: "default", label: "Default" },
   { id: "wide", label: "Wide" }
 ];
+const conversationVariantOptions = [
+  { id: "widget", label: "Widget" },
+  { id: "page", label: "Page" }
+];
 function eventToneClass(tone) {
   return {
     neutral: "bg-gray-400",
@@ -144,6 +149,19 @@ function eventToneClass(tone) {
                     <span>{{ playbackState.messages.length }} messages</span>
                 </div>
                 <div flex items-center gap-12px>
+                    <div flex items-center gap-10px>
+                        <button
+                            v-for="option in conversationVariantOptions"
+                            :key="option.id"
+                            type="button"
+                            body-11-regular
+                            :class="conversationVariant === option.id ? 'text-primary' : 'text-tertiary hover:text-secondary'"
+                            transition-colors
+                            @click="conversationVariant = option.id"
+                        >
+                            {{ option.label }}
+                        </button>
+                    </div>
                     <div flex items-center gap-10px>
                         <button
                             v-for="option in viewportOptions"
@@ -177,13 +195,13 @@ function eventToneClass(tone) {
   showBounds && 'chat-under-test--bounded'
 ]"
                 >
-                    <TelaChatBody variant="widget" h-full>
+                    <TelaChatBody :key="conversationVariant" :variant="conversationVariant" h-full>
                         <ChatMessageList
                             :messages="playbackState.messages"
                             :loading="playbackState.loading"
                             :streaming-active-message-id="playbackState.streamingActiveMessageId"
                             :preparing-steps="playbackState.preparingSteps"
-                            variant="widget"
+                            :variant="conversationVariant"
                             @retry="stepEvent(-1)"
                         />
                     </TelaChatBody>

package/dist/runtime/messages/components/chat-message-bubble.vue

@@ -188,7 +188,6 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
             <ChatReasoningThought
                 v-if="hasReasoning || preparingSteps?.length && !message.content || isPending && !streamActive"
                 :reasoning-data="message.reasoningData ?? []"
-                :animate="wasEverPending"
                 :completed="!isPending"
                 :preparing-steps="preparingSteps"
                 :created-at="message.createdAt"
@@ -196,7 +195,7 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
             />
 
             <div
-                v-if="!isPending && message.content || isPending && streamActive"
+                v-if="message.content && (!isPending || streamActive)"
                 max-w-prose
                 :class="[
   isFailed ? 'flex gap-12px items-start bg-subtle border border-solid rounded-12px w-full' : 'rounded-12px code-theme'

package/dist/runtime/messages/components/chat-message-list.d.vue.ts

@@ -12,7 +12,10 @@ type __VLS_Props = {
     preparingSteps?: readonly string[] | null;
     showTtft?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    isPinned: import("vue").Ref<boolean, boolean>;
+    scrollToBottom: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     retry: (messageId: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRetry?: ((messageId: string) => any) | undefined;

package/dist/runtime/messages/components/chat-message-list.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useChatScrollStickiness } from "../composables/chat-scroll-stickiness";
 const props = defineProps({
   messages: { type: Array, required: true },
   loading: { type: Boolean, required: false },
@@ -9,60 +10,94 @@ const props = defineProps({
 });
 const emit = defineEmits(["retry"]);
 const conversationRef = ref(null);
+const { isPinned, scrollToBottom } = useChatScrollStickiness(conversationRef);
 const skeletonMessages = [
   { id: "user-1", align: "end", width: "58%", height: "44px" },
   { id: "assistant-1", align: "start", width: "92%", height: "116px" },
   { id: "user-2", align: "end", width: "46%", height: "44px" },
   { id: "assistant-2", align: "start", width: "84%", height: "92px" }
 ];
-function scrollToBottom() {
-  conversationRef.value?.scrollToBottom();
-}
-watch(
-  () => [props.messages.length, props.messages.at(-1)?.content.length ?? 0],
+let knownMessageIds = new Set(props.messages.map((message) => message.id));
+watch(() => props.messages.map((message) => `${message.id}:${message.role}`).join("|"), () => {
+  const hasNewUserMessage = props.messages.some(
+    (message) => message.role === "user" && !knownMessageIds.has(message.id)
+  );
+  knownMessageIds = new Set(props.messages.map((message) => message.id));
+  if (hasNewUserMessage)
+    scrollToBottom();
+});
+defineExpose({
+  isPinned,
   scrollToBottom
-);
-onMounted(scrollToBottom);
+});
 </script>
 
 <template>
-    <TelaChatConversation
-        ref="conversationRef"
-        :class="{
+    <div
+        class="chat-message-list"
+        :data-variant="variant ?? 'page'"
+        flex="~ col"
+        flex-1
+        min-h-0
+        relative
+    >
+        <TelaChatConversation
+            ref="conversationRef"
+            :class="{
   'pt-72px!': (variant ?? 'page') === 'page',
   'pt-72px pb-24px px-16px': variant === 'mobile'
 }"
-    >
-        <TelaChatConversationContent class="max-w-700px! min-h-full">
-            <template v-if="loading">
-                <div
-                    v-for="message in skeletonMessages"
-                    :key="message.id"
-                    flex
-                    :class="message.align === 'end' ? 'justify-end' : 'justify-start'"
-                >
-                    <TelaSkeleton :style="{ width: message.width, height: message.height }" />
-                </div>
-            </template>
+        >
+            <TelaChatConversationContent class="max-w-700px! min-h-full">
+                <template v-if="loading">
+                    <div
+                        v-for="message in skeletonMessages"
+                        :key="message.id"
+                        flex
+                        :class="message.align === 'end' ? 'justify-end' : 'justify-start'"
+                    >
+                        <TelaSkeleton :style="{ width: message.width, height: message.height }" />
+                    </div>
+                </template>
+
+                <template v-else>
+                    <ChatMessageBubble
+                        v-for="message in messages"
+                        :key="message.id"
+                        :message="message"
+                        :stream-active="message.id === streamingActiveMessageId"
+                        :preparing-steps="message.role === 'assistant' && message.status === 'pending' ? preparingSteps : null"
+                        :show-ttft="showTtft"
+                        @retry="emit('retry', $event)"
+                    />
+                    <p
+                        v-if="messages.length > 0"
+                        mt-auto mb--6px
+                        text-center body-11-regular text-tertiary
+                    >
+                        As respostas podem conter erros. Verifique documentos originais.
+                    </p>
+                </template>
+            </TelaChatConversationContent>
+        </TelaChatConversation>
 
-            <template v-else>
-                <ChatMessageBubble
-                    v-for="message in messages"
-                    :key="message.id"
-                    :message="message"
-                    :stream-active="message.id === streamingActiveMessageId"
-                    :preparing-steps="message.role === 'assistant' && message.status === 'pending' ? preparingSteps : null"
-                    :show-ttft="showTtft"
-                    @retry="emit('retry', $event)"
-                />
-                <p
-                    v-if="messages.length > 0"
-                    mt-auto mb--6px
-                    text-center body-11-regular text-tertiary
-                >
-                    As respostas podem conter erros. Verifique documentos originais.
-                </p>
-            </template>
-        </TelaChatConversationContent>
-    </TelaChatConversation>
+        <Transition name="jump-to-latest">
+            <button
+                v-if="!isPinned"
+                type="button"
+                class="chat-message-list__jump"
+                bg
+                b=".5px border-default"
+                aria-label="Ir para a mensagem mais recente"
+                title="Ir para a mensagem mais recente"
+                @click="scrollToBottom"
+            >
+                <TelaIcon name="i-ph-arrow-down" size="16px" color="icon-secondary" />
+            </button>
+        </Transition>
+    </div>
 </template>
+
+<style scoped>
+.chat-message-list>:deep([data-chat-conversation]){flex:1 1 0%;min-height:0;overflow-y:auto}.chat-message-list__jump{align-items:center;border-radius:999px;bottom:16px;box-shadow:0 3px 12px rgba(0,0,0,.1);cursor:pointer;display:inline-flex;height:32px;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:32px;z-index:2}.jump-to-latest-enter-active,.jump-to-latest-leave-active{transition:opacity .12s ease,transform .12s ease}.jump-to-latest-enter-from,.jump-to-latest-leave-to{opacity:0;transform:translateX(-50%) translateY(4px)}
+</style>

package/dist/runtime/messages/components/chat-message-list.vue.d.ts

@@ -12,7 +12,10 @@ type __VLS_Props = {
     preparingSteps?: readonly string[] | null;
     showTtft?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    isPinned: import("vue").Ref<boolean, boolean>;
+    scrollToBottom: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     retry: (messageId: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRetry?: ((messageId: string) => any) | undefined;

package/dist/runtime/messages/components/reasoning/chat-reasoning-collapsible-content.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    open: boolean;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/messages/components/reasoning/chat-reasoning-collapsible-content.vue

@@ -0,0 +1,25 @@
+<script setup>
+defineProps({
+  open: { type: Boolean, required: true }
+});
+</script>
+
+<template>
+    <div
+        class="chat-reasoning-collapsible-content"
+        :data-state="open ? 'open' : 'closed'"
+        data-chat-disclosure-motion
+    >
+        <TelaCollapsibleContent
+            :force-mount="true"
+            :inert="open ? void 0 : true"
+            :aria-hidden="!open"
+        >
+            <slot />
+        </TelaCollapsibleContent>
+    </div>
+</template>
+
+<style>
+.chat-reasoning-collapsible-content{display:grid;grid-template-rows:1fr;transition:grid-template-rows .2s cubic-bezier(.2,0,0,1)}.chat-reasoning-collapsible-content[data-state=closed]{grid-template-rows:0fr}.chat-reasoning-collapsible-content>[data-collapsible-content]{animation:none!important;height:auto;min-height:0;overflow:hidden}.chat-reasoning-collapsible-content [data-collapsible-content]>div{opacity:1;transform:translateY(0);transition:opacity .14s cubic-bezier(.2,0,0,1) 40ms,transform .18s cubic-bezier(.2,0,0,1);will-change:opacity,transform}.chat-reasoning-collapsible-content[data-state=closed] [data-collapsible-content]>div{opacity:0;transform:translateY(-2px);transition:opacity .1s cubic-bezier(.2,0,0,1),transform .16s cubic-bezier(.2,0,0,1)}@media (prefers-reduced-motion:reduce){.chat-reasoning-collapsible-content,.chat-reasoning-collapsible-content [data-collapsible-content]>div{transition-delay:0s;transition-duration:0s}}
+</style>

package/dist/runtime/messages/components/reasoning/chat-reasoning-collapsible-content.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    open: boolean;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/messages/components/reasoning/chat-reasoning-message.d.vue.ts

@@ -1,11 +1,7 @@
 import type { ReasoningStep } from '../../reasoning.js';
 type __VLS_Props = {
     step: ReasoningStep;
-    stepNumber: number;
-    isFirst?: boolean;
-    isLast?: boolean;
     isActive?: boolean;
-    isPreviewMode?: boolean;
     completed?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;