@meistrari/chat-nuxt 4.2.0-rc.7 → 4.2.0

package/dist/module.json

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

package/dist/runtime/embed/components/chat-embed-inner.vue

@@ -1100,6 +1100,7 @@ async function handleDelete() {
                 </template>
 
                 <ChatMessageList
+                    :key="currentConversation?.id ?? 'draft'"
                     :messages="messages"
                     :events="displayConversationEvents"
                     :streaming-active-message-id="streamingActiveMessageId"
@@ -1314,6 +1315,7 @@ async function handleDelete() {
                 :variant="compact ? 'widget' : 'page'"
             >
                 <ChatMessageList
+                    :key="currentConversation?.id ?? 'draft'"
                     :messages="messages"
                     :events="displayConversationEvents"
                     :streaming-active-message-id="streamingActiveMessageId"

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

@@ -21,8 +21,10 @@ type __VLS_Slots = {
     }) => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
-    isPinned: any;
-    scrollToBottom: any;
+    isPinned: import("vue").Ref<boolean, boolean>;
+    scrollToBottom: (options?: {
+        smooth?: boolean;
+    }) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     retry: (messageId: string) => any;
     openConversation: (conversationId: string) => any;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { useStickToBottom } from "markstream-vue/utils";
+import { useStickToBottom } from "../composables/use-stick-to-bottom";
 import { mergeConversationTimeline } from "../conversation-timeline";
 const props = defineProps({
   messages: { type: Array, required: true },
@@ -32,6 +32,8 @@ const scrollRoot = computed(() => conversationElements.value?.scroll ?? null);
 const contentRoot = computed(() => conversationElements.value?.content ?? null);
 const {
   bottomPinned: isPinned,
+  hasRoomBelow,
+  detach,
   scheduleScrollToBottom,
   scrollToBottom
 } = useStickToBottom(scrollRoot, contentRoot);
@@ -61,6 +63,17 @@ watch(latestOutputSignal, async () => {
   await nextTick();
   scheduleScrollToBottom();
 }, { flush: "post" });
+watch(() => props.streamingActiveMessageId, async (messageId, previousMessageId) => {
+  if (!messageId || messageId === previousMessageId)
+    return;
+  const streamingMessage = props.messages.find((message) => message.id === messageId);
+  if (!streamingMessage || streamingMessage.content)
+    return;
+  await nextTick();
+  if (isPinned.value)
+    scrollToBottom();
+  detach();
+}, { flush: "post" });
 defineExpose({
   isPinned,
   scrollToBottom
@@ -134,14 +147,14 @@ defineExpose({
 
         <Transition name="jump-to-latest">
             <button
-                v-if="!isPinned"
+                v-if="!isPinned && hasRoomBelow"
                 type="button"
                 class="chat-message-list__jump"
-                bg
+                bg="white/55"
                 b=".5px border-default"
                 aria-label="Ir para a mensagem mais recente"
                 title="Ir para a mensagem mais recente"
-                @click="scrollToBottom"
+                @click="scrollToBottom({ smooth: true })"
             >
                 <TelaIcon name="i-ph-arrow-down" size="16px" color="icon-secondary" />
             </button>
@@ -150,5 +163,5 @@ defineExpose({
 </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)}
+.chat-message-list>:deep([data-chat-conversation]){flex:1 1 0%;min-height:0;overflow-y:auto}.chat-message-list__jump{align-items:center;backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);border-radius:999px;bottom:calc(var(--chat-input-height, 0px) + 40px);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

@@ -21,8 +21,10 @@ type __VLS_Slots = {
     }) => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
-    isPinned: any;
-    scrollToBottom: any;
+    isPinned: import("vue").Ref<boolean, boolean>;
+    scrollToBottom: (options?: {
+        smooth?: boolean;
+    }) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     retry: (messageId: string) => any;
     openConversation: (conversationId: string) => any;

package/dist/runtime/messages/composables/use-stick-to-bottom.d.ts

@@ -0,0 +1,28 @@
+import type { Ref } from 'vue';
+interface ScrollMetrics {
+    scrollTop: number;
+    scrollHeight: number;
+    clientHeight: number;
+}
+interface ScrollSnapshot {
+    scrollTop: number;
+    scrollHeight: number;
+}
+/**
+ * Only the user changes the pinned state: moving up detaches, moving down into
+ * the bottom zone reattaches. Layout changes that shift the bottom under a
+ * stationary viewport leave the state untouched. A position drop that comes
+ * with a shorter document is the browser clamping after content shrank, not the
+ * user reading upwards, so it keeps whatever state was in place.
+ */
+export declare function resolvePinnedAfterScroll(pinned: boolean, previous: ScrollSnapshot, { scrollTop, scrollHeight, clientHeight }: ScrollMetrics, threshold: number): boolean;
+export declare function useStickToBottom(scrollRoot: Ref<HTMLElement | null>, contentRoot: Ref<HTMLElement | null>): {
+    bottomPinned: Ref<boolean, boolean>;
+    hasRoomBelow: Ref<boolean, boolean>;
+    detach: () => void;
+    scheduleScrollToBottom: () => void;
+    scrollToBottom: (options?: {
+        smooth?: boolean;
+    }) => void;
+};
+export {};

package/dist/runtime/messages/composables/use-stick-to-bottom.js

@@ -0,0 +1,136 @@
+import { getCurrentScope, onMounted, onScopeDispose, ref, watch } from "vue";
+const PIN_THRESHOLD_PX = 64;
+const AT_BOTTOM_EPSILON_PX = 1;
+const ROOM_BELOW_MIN_PX = 30;
+export function resolvePinnedAfterScroll(pinned, previous, { scrollTop, scrollHeight, clientHeight }, threshold) {
+  const distanceToBottom = scrollHeight - clientHeight - scrollTop;
+  const movedDown = scrollTop > previous.scrollTop + AT_BOTTOM_EPSILON_PX;
+  const movedUp = scrollTop < previous.scrollTop - AT_BOTTOM_EPSILON_PX;
+  if (distanceToBottom <= AT_BOTTOM_EPSILON_PX)
+    return pinned || movedDown;
+  if (movedUp)
+    return scrollHeight < previous.scrollHeight ? pinned : false;
+  if (movedDown && distanceToBottom <= threshold)
+    return true;
+  return pinned;
+}
+export function useStickToBottom(scrollRoot, contentRoot) {
+  const bottomPinned = ref(true);
+  const hasRoomBelow = ref(false);
+  let last = { scrollTop: 0, scrollHeight: 0 };
+  let frame = 0;
+  let touchStartY = null;
+  let resizeObserver = null;
+  let unbindScroll = null;
+  function scrollToBottom(options = {}) {
+    const element = scrollRoot.value;
+    if (!element)
+      return;
+    bottomPinned.value = true;
+    element.scrollTo({ top: element.scrollHeight, behavior: options.smooth ? "smooth" : "auto" });
+    remember(element);
+  }
+  function scheduleScrollToBottom() {
+    if (!bottomPinned.value || frame || typeof requestAnimationFrame === "undefined")
+      return;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      if (bottomPinned.value)
+        scrollToBottom();
+    });
+  }
+  function unpin() {
+    bottomPinned.value = false;
+  }
+  function remember(element) {
+    last = { scrollTop: element.scrollTop, scrollHeight: element.scrollHeight };
+    hasRoomBelow.value = element.scrollHeight - element.clientHeight - element.scrollTop >= ROOM_BELOW_MIN_PX;
+  }
+  function handleContentResize() {
+    const element = scrollRoot.value;
+    if (element)
+      remember(element);
+    scheduleScrollToBottom();
+  }
+  function handleScroll() {
+    const element = scrollRoot.value;
+    if (!element)
+      return;
+    bottomPinned.value = resolvePinnedAfterScroll(bottomPinned.value, last, element, PIN_THRESHOLD_PX);
+    remember(element);
+  }
+  function handleWheel(event) {
+    if (event.deltaY < 0 && (scrollRoot.value?.scrollTop ?? 0) > 0)
+      unpin();
+  }
+  function handleKeyDown(event) {
+    const target = event.target;
+    if (event.defaultPrevented)
+      return;
+    if (target instanceof Element && target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])'))
+      return;
+    if (event.key === "ArrowUp" || event.key === "PageUp" || event.key === "Home")
+      unpin();
+  }
+  function handleTouchStart(event) {
+    touchStartY = event.touches[0]?.clientY ?? null;
+  }
+  function handleTouchMove(event) {
+    const currentY = event.touches[0]?.clientY ?? null;
+    if (touchStartY != null && currentY != null && currentY - touchStartY >= 6)
+      unpin();
+  }
+  function handleTouchEnd() {
+    touchStartY = null;
+  }
+  function bindScroll(element) {
+    unbindScroll?.();
+    unbindScroll = null;
+    if (!element)
+      return;
+    remember(element);
+    element.addEventListener("scroll", handleScroll, { passive: true });
+    element.addEventListener("wheel", handleWheel, { passive: true });
+    element.addEventListener("keydown", handleKeyDown);
+    element.addEventListener("touchstart", handleTouchStart, { passive: true });
+    element.addEventListener("touchmove", handleTouchMove, { passive: true });
+    element.addEventListener("touchend", handleTouchEnd, { passive: true });
+    unbindScroll = () => {
+      element.removeEventListener("scroll", handleScroll);
+      element.removeEventListener("wheel", handleWheel);
+      element.removeEventListener("keydown", handleKeyDown);
+      element.removeEventListener("touchstart", handleTouchStart);
+      element.removeEventListener("touchmove", handleTouchMove);
+      element.removeEventListener("touchend", handleTouchEnd);
+    };
+  }
+  function observeContent(element) {
+    resizeObserver?.disconnect();
+    resizeObserver = null;
+    if (!element || typeof ResizeObserver === "undefined")
+      return;
+    resizeObserver = new ResizeObserver(handleContentResize);
+    resizeObserver.observe(element);
+  }
+  onMounted(() => {
+    bindScroll(scrollRoot.value);
+    observeContent(contentRoot.value);
+    scheduleScrollToBottom();
+  });
+  const stopScrollWatch = watch(scrollRoot, bindScroll);
+  const stopContentWatch = watch(contentRoot, observeContent);
+  if (getCurrentScope()) {
+    onScopeDispose(() => {
+      stopScrollWatch();
+      stopContentWatch();
+      if (frame && typeof cancelAnimationFrame !== "undefined")
+        cancelAnimationFrame(frame);
+      frame = 0;
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+      unbindScroll?.();
+      unbindScroll = null;
+    });
+  }
+  return { bottomPinned, hasRoomBelow, detach: unpin, scheduleScrollToBottom, scrollToBottom };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/chat-nuxt",
-  "version": "4.2.0-rc.7",
+  "version": "4.2.0",
   "type": "module",
   "exports": {
     ".": {