@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/{chunk-JIU5UEOU.mjs → chunk-7B6XJBIJ.mjs}

@@ -1,27 +1,35 @@
 import {
   VirtualList
-} from "./chunk-HS4YQGZQ.mjs";
+} from "./chunk-SZO4WL42.mjs";
 import {
   Input
-} from "./chunk-POWDTOMF.mjs";
+} from "./chunk-DU5F2EE7.mjs";
 import {
   Empty
-} from "./chunk-SJINC5NF.mjs";
+} from "./chunk-X7UK3A6Z.mjs";
 import {
   Textarea
-} from "./chunk-3KAHJF7D.mjs";
-import {
-  Button
-} from "./chunk-YZBQ6IR7.mjs";
+} from "./chunk-ZQCKZXQI.mjs";
 import {
   Avatar
-} from "./chunk-ZFTRR3KW.mjs";
+} from "./chunk-OGXSLKXD.mjs";
+import {
+  Button
+} from "./chunk-4KIZXFFG.mjs";
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/ChatWindow.ts
-import { defineComponent, h, computed, ref, watch, onMounted } from "vue";
+import {
+  defineComponent,
+  h,
+  computed,
+  ref,
+  watch,
+  onMounted,
+  getCurrentInstance
+} from "vue";
 import {
   classNames,
   coerceClassValue,
@@ -32,26 +40,28 @@ import {
   mergeStyleValues,
   getChatWindowLabels,
   mergeTigerLocale,
-  resolveLocaleText
+  resolveLocaleText,
+  canSendChatMessage,
+  shouldSendChatOnEnter,
+  isChatScrollerNearBottom,
+  planChatScroll,
+  didChatPrepend,
+  getChatItemKey,
+  getChatMessageRowClasses,
+  getChatBubbleClasses,
+  chatWindowRootClasses,
+  chatMessageListClasses,
+  chatComposerClasses,
+  CHAT_VIRTUAL_ESTIMATED_ITEM_HEIGHT,
+  EMPTY_CHAT_MESSAGES
 } from "@expcat/tigercat-core";
-var CHAT_STICK_TO_BOTTOM_PX = 32;
-function resolveChatScroller(virtual, messageList, virtualWrapper) {
-  if (virtual) {
-    const wrapper = virtualWrapper;
-    return wrapper?.firstElementChild ?? wrapper;
-  }
-  return messageList;
-}
-function isChatScrollerNearBottom(scroller) {
-  return scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight <= CHAT_STICK_TO_BOTTOM_PX;
-}
 var ChatWindow = defineComponent({
   name: "TigerChatWindow",
   inheritAttrs: false,
   props: {
     messages: {
       type: Array,
-      default: () => []
+      default: void 0
     },
     modelValue: {
       type: String
@@ -145,7 +155,7 @@ var ChatWindow = defineComponent({
     },
     virtualItemHeight: {
       type: Number,
-      default: 88
+      default: CHAT_VIRTUAL_ESTIMATED_ITEM_HEIGHT
     },
     virtualHeight: {
       type: Number,
@@ -163,107 +173,136 @@ var ChatWindow = defineComponent({
     }
   },
   emits: {
-    "update:modelValue": null,
-    input: null,
-    change: null,
-    send: null
+    "update:modelValue": (_value) => true,
+    send: (_value) => true
   },
-  setup(props, { emit, attrs, slots }) {
+  setup(props, { emit, attrs, slots, expose }) {
+    const instance = getCurrentInstance();
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const labels = computed(() => getChatWindowLabels(mergedLocale.value, props.labels));
     const statusMap = computed(() => buildChatMessageStatusInfo(labels.value));
-    const localValue = ref(props.modelValue ?? props.defaultValue ?? "");
-    watch(
-      () => props.modelValue,
-      (nextValue) => {
-        if (nextValue !== void 0 && nextValue !== localValue.value) {
-          localValue.value = nextValue;
-        }
-      }
+    const messages = computed(() => props.messages ?? EMPTY_CHAT_MESSAGES);
+    const localValue = ref(props.defaultValue ?? "");
+    const lastSent = ref(null);
+    const stickToBottom = ref(true);
+    const messageListRef = ref(null);
+    const virtualListRef = ref(null);
+    const previousScrollHeight = ref(0);
+    const previousFirstId = ref(messages.value[0]?.id);
+    const previousLength = ref(messages.value.length);
+    const hasSendHandler = computed(
+      () => typeof instance?.vnode.props?.onSend === "function"
+    );
+    const inputValue = computed(
+      () => props.modelValue !== void 0 ? props.modelValue : localValue.value
+    );
+    const canSend = computed(
+      () => canSendChatMessage({
+        disabled: props.disabled,
+        allowEmpty: props.allowEmpty,
+        value: inputValue.value,
+        hasSendHandler: hasSendHandler.value,
+        lastSent: lastSent.value
+      })
     );
     const wrapperClasses = computed(
-      () => classNames(
-        "tiger-chat-window flex flex-col w-full rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-sm overflow-hidden transition-all duration-300",
-        props.className,
-        coerceClassValue(attrs.class)
-      )
+      () => classNames(chatWindowRootClasses, props.className, coerceClassValue(attrs.class))
     );
     const wrapperStyle = computed(() => mergeStyleValues(attrs.style, props.style));
-    const inputValue = computed(
-      () => props.modelValue !== void 0 ? props.modelValue : localValue.value
+    const listAriaLabel = computed(
+      () => props.messageListAriaLabel ?? labels.value.messageListAriaLabel
     );
-    const canSend = computed(() => {
-      if (props.disabled) return false;
-      if (props.allowEmpty) return true;
-      const raw = String(inputValue.value ?? "");
-      return raw.trim().length > 0;
-    });
-    const handleValueChange = (nextValue) => {
-      if (props.modelValue === void 0) {
-        localValue.value = nextValue;
-      }
-      emit("update:modelValue", nextValue);
-      emit("input", nextValue);
-      emit("change", nextValue);
-    };
-    const handleSend = () => {
-      if (!canSend.value) return;
-      const payload = String(inputValue.value ?? "");
-      emit("send", payload);
-      if (props.clearOnSend) {
-        handleValueChange("");
-      }
-    };
-    const handleKeydown = (event) => {
-      if (!props.sendOnEnter) return;
-      if (event.key !== "Enter") return;
-      if (props.inputType === "textarea" && props.allowShiftEnter && event.shiftKey) return;
-      event.preventDefault();
-      handleSend();
+    const resolveScroller = () => {
+      if (props.virtual) return virtualListRef.value?.getScrollElement() ?? null;
+      return messageListRef.value;
     };
-    const messageListRef = ref(null);
-    const virtualWrapperRef = ref(null);
-    const stickToBottom = ref(true);
-    const resolveScroller = () => resolveChatScroller(props.virtual, messageListRef.value, virtualWrapperRef.value);
     const syncStickToBottom = () => {
       const scroller = resolveScroller();
       if (!scroller) return;
       stickToBottom.value = isChatScrollerNearBottom(scroller);
     };
+    const applyScrollPlan = () => {
+      const scroller = resolveScroller();
+      if (!scroller) return;
+      const nextMessages = messages.value;
+      const prepended = didChatPrepend(
+        previousFirstId.value,
+        nextMessages[0]?.id,
+        previousLength.value,
+        nextMessages.length
+      );
+      const plan = planChatScroll({
+        stickToBottom: stickToBottom.value,
+        autoScrollToBottom: props.autoScrollToBottom,
+        prepended,
+        previousScrollHeight: previousScrollHeight.value,
+        nextScrollHeight: scroller.scrollHeight
+      });
+      if (plan.scrollTop != null) {
+        scroller.scrollTop = plan.scrollTop;
+        stickToBottom.value = true;
+      } else if (plan.compensate) {
+        scroller.scrollTop += plan.compensate;
+      }
+      previousScrollHeight.value = scroller.scrollHeight;
+      previousFirstId.value = nextMessages[0]?.id;
+      previousLength.value = nextMessages.length;
+    };
     const scrollToBottom = () => {
       if (!props.autoScrollToBottom) return;
       requestAnimationFrame(() => {
         const scroller = resolveScroller();
-        if (scroller) {
-          scroller.scrollTop = scroller.scrollHeight;
-          stickToBottom.value = true;
-        }
+        if (!scroller) return;
+        scroller.scrollTop = scroller.scrollHeight;
+        stickToBottom.value = true;
+        previousScrollHeight.value = scroller.scrollHeight;
       });
     };
+    const handleValueChange = (nextValue) => {
+      if (props.modelValue === void 0) localValue.value = nextValue;
+      if (lastSent.value != null && nextValue !== lastSent.value) lastSent.value = null;
+      emit("update:modelValue", nextValue);
+    };
+    const handleSend = () => {
+      if (!canSend.value) return;
+      const payload = String(inputValue.value ?? "");
+      lastSent.value = payload;
+      emit("send", payload);
+      if (props.clearOnSend) handleValueChange("");
+    };
+    const handleKeydown = (event) => {
+      if (!shouldSendChatOnEnter(event, {
+        sendOnEnter: props.sendOnEnter,
+        inputType: props.inputType,
+        allowShiftEnter: props.allowShiftEnter
+      })) {
+        return;
+      }
+      event.preventDefault();
+      handleSend();
+    };
     onMounted(scrollToBottom);
     watch(
-      () => props.messages.length,
+      () => [
+        messages.value.length,
+        messages.value[0]?.id,
+        messages.value[messages.value.length - 1]?.content
+      ],
       () => {
-        if (!resolveScroller() || stickToBottom.value) {
-          scrollToBottom();
-        }
+        requestAnimationFrame(applyScrollPlan);
       }
     );
     const renderMessageItem = (message, index) => {
       const isSelf = message.direction === "self";
       const statusInfo = message.status ? getChatMessageStatusInfo(message.status, statusMap.value) : void 0;
-      const timeText = props.showTime ? formatChatTime(message.time) : "";
-      const customContent = slots.message?.({ message, index });
+      const timeText = props.showTime ? formatChatTime(message.time, mergedLocale.value) : "";
+      const customContent = slots.bubble?.({ message, index }) ?? slots.message?.({ message, index });
       return h(
         "div",
         {
-          class: classNames(
-            "flex gap-3 items-start",
-            isSelf ? "flex-row-reverse" : "justify-start"
-          ),
+          class: getChatMessageRowClasses(isSelf),
           "data-tiger-chat-message": "",
-          role: "listitem",
           key: message.id ?? index
         },
         [
@@ -271,7 +310,8 @@ var ChatWindow = defineComponent({
             size: "sm",
             src: message.user.avatar,
             text: message.user.name,
-            className: "flex-shrink-0"
+            className: "flex-shrink-0",
+            "aria-hidden": props.showName && message.user.name ? true : void 0
           }) : null,
           h("div", { class: classNames("flex flex-col max-w-[75%]", isSelf && "items-end") }, [
             props.showName && message.user?.name ? h(
@@ -279,7 +319,7 @@ var ChatWindow = defineComponent({
               {
                 class: classNames(
                   "text-xs mb-1 text-[var(--tiger-text-muted,#6b7280)]",
-                  isSelf && "text-right"
+                  isSelf && "text-end"
                 )
               },
               message.user.name
@@ -287,10 +327,7 @@ var ChatWindow = defineComponent({
             h(
               "div",
               {
-                class: classNames(
-                  "rounded-[var(--tiger-radius-lg,0.75rem)] px-4 py-2.5 text-sm break-words shadow-sm transition-all",
-                  isSelf ? "bg-[var(--tiger-primary,#2563eb)] text-white rounded-tr-[var(--tiger-radius-sm,0.375rem)]" : "bg-[var(--tiger-surface,#ffffff)] border border-[var(--tiger-border,#e5e7eb)] text-[var(--tiger-text,#111827)] rounded-tl-[var(--tiger-radius-sm,0.375rem)]"
-                ),
+                class: getChatBubbleClasses(isSelf),
                 "data-tiger-chat-bubble": ""
               },
               customContent ?? message.content
@@ -322,6 +359,15 @@ var ChatWindow = defineComponent({
       }
       return h(Textarea, { ...commonProps, rows: props.inputRows });
     };
+    const listA11y = () => ({
+      role: "log",
+      "aria-live": "polite",
+      "aria-relevant": "additions text",
+      "aria-label": listAriaLabel.value
+    });
+    expose({
+      scrollToBottom
+    });
     return () => h(
       "div",
       {
@@ -331,43 +377,30 @@ var ChatWindow = defineComponent({
         "data-tiger-chat-window": ""
       },
       [
-        props.virtual && props.messages.length > 0 ? h(
-          "div",
+        props.virtual && messages.value.length > 0 ? h(
+          VirtualList,
           {
-            ref: virtualWrapperRef,
-            class: "flex-1 overflow-auto bg-[var(--tiger-surface-muted,#f9fafb)]",
-            role: "log",
-            "aria-live": "polite",
-            "aria-relevant": "additions text",
-            "aria-label": props.messageListAriaLabel ?? "Message list",
-            onScroll: syncStickToBottom
+            ref: virtualListRef,
+            className: chatMessageListClasses,
+            itemCount: messages.value.length,
+            estimatedItemHeight: props.virtualItemHeight,
+            height: props.virtualHeight,
+            getItemKey: (index) => getChatItemKey(messages.value, index),
+            onScroll: syncStickToBottom,
+            ...listA11y()
           },
-          [
-            h(
-              VirtualList,
-              {
-                itemCount: props.messages.length,
-                itemHeight: props.virtualItemHeight,
-                height: props.virtualHeight,
-                onScroll: syncStickToBottom
-              },
-              {
-                default: ({ index }) => renderMessageItem(props.messages[index], index)
-              }
-            )
-          ]
+          {
+            default: ({ index }) => renderMessageItem(messages.value[index], index)
+          }
         ) : h(
           "div",
           {
             ref: messageListRef,
-            class: "flex-1 overflow-auto p-5 space-y-4 bg-[var(--tiger-surface-muted,#f9fafb)]",
-            role: "log",
-            "aria-live": "polite",
-            "aria-relevant": "additions text",
-            "aria-label": props.messageListAriaLabel ?? "Message list",
+            class: chatMessageListClasses,
+            ...listA11y(),
             onScroll: syncStickToBottom
           },
-          props.messages.length === 0 ? [
+          messages.value.length === 0 ? [
             h(
               "div",
               {
@@ -379,33 +412,28 @@ var ChatWindow = defineComponent({
                 })
               ]
             )
-          ] : props.messages.map((message, index) => renderMessageItem(message, index))
+          ] : messages.value.map((message, index) => renderMessageItem(message, index))
         ),
         props.statusText ? h(
           "div",
           {
-            class: getChatStatusBarClasses(props.statusVariant)
+            class: getChatStatusBarClasses(props.statusVariant),
+            "aria-live": "polite"
           },
           props.statusText
         ) : null,
-        h(
-          "div",
-          {
-            class: "flex items-end gap-3 px-5 py-4 border-t border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] rounded-b-lg"
-          },
-          [
-            h("div", { class: "flex-1" }, [renderInput()]),
-            h(
-              Button,
-              {
-                disabled: !canSend.value,
-                onClick: handleSend,
-                "aria-label": props.sendAriaLabel ?? resolveLocaleText(labels.value.sendText, props.sendText)
-              },
-              () => resolveLocaleText(labels.value.sendText, props.sendText)
-            )
-          ]
-        )
+        h("div", { class: chatComposerClasses }, [
+          h("div", { class: "flex-1" }, [renderInput()]),
+          h(
+            Button,
+            {
+              disabled: !canSend.value,
+              onClick: handleSend,
+              "aria-label": props.sendAriaLabel ?? resolveLocaleText(labels.value.sendText, props.sendText)
+            },
+            () => resolveLocaleText(labels.value.sendText, props.sendText)
+          )
+        ])
       ]
     );
   }