@convokitapp/vue-ui 0.2.1 → 0.2.2

package/dist/index.js

@@ -31,6 +31,10 @@ import { defineComponent, h } from "vue";
 
 // src/utils.ts
 import { clsx } from "clsx";
+var pendingMessageIdPrefix = "convokit-pending-";
+function isConvoKitPendingMessage(message) {
+  return message.id.startsWith(pendingMessageIdPrefix);
+}
 function cx(...values) {
   return clsx(values);
 }
@@ -73,11 +77,15 @@ function mergeMessages(current, incoming) {
   const byId = new Map(current.map((message) => [message.id, message]));
   for (const message of incoming) byId.set(message.id, message);
   return [...byId.values()].sort((left, right) => {
+    const leftPending = isConvoKitPendingMessage(left);
+    const rightPending = isConvoKitPendingMessage(right);
+    if (leftPending !== rightPending) return leftPending ? 1 : -1;
     const byTime = left.createdAt.getTime() - right.createdAt.getTime();
     return byTime === 0 ? left.id.localeCompare(right.id) : byTime;
   });
 }
 function readerIdsFor(message, readAtByUserId) {
+  if (isConvoKitPendingMessage(message)) return /* @__PURE__ */ new Set();
   return new Set([...readAtByUserId.entries()].filter(([userId, readAt]) => userId !== message.senderId && readAt.getTime() >= message.createdAt.getTime()).map(([userId]) => userId));
 }
 function partClass(part, appearance, defaultClass) {
@@ -506,7 +514,8 @@ var MessageListView = defineComponent2({
     const renderMessage = (message, index) => {
       const isCurrentUser = message.senderId === props.currentUserId;
       const sender = participants.value.get(message.senderId);
-      const readerIds = props.readersResolver ? props.readersResolver(message) : readerIdsFor(message, props.readAtByUserId);
+      const isPending = isConvoKitPendingMessage(message);
+      const readerIds = isPending ? /* @__PURE__ */ new Set() : props.readersResolver ? props.readersResolver(message) : readerIdsFor(message, props.readAtByUserId);
       const slotProps = { message, chronologicalIndex: index, isCurrentUser, sender, readerIds };
       const custom = slots.message?.(slotProps);
       if (custom) return h2("div", { key: message.id, role: "listitem" }, custom);
@@ -539,12 +548,12 @@ var MessageListView = defineComponent2({
             !isCurrentUser ? h2("strong", { class: "ckui-message-sender" }, sender?.name || message.senderId) : null,
             message.text ? h2("div", { class: "ckui-message-text" }, message.text) : null,
             ...mediaNodes,
-            h2("time", { class: "ckui-message-time", datetime: message.createdAt.toISOString() }, [
-              props.formatTime(message.createdAt),
-              isCurrentUser ? readerIds.size > 0 ? h2(CheckCheck, { size: 14, "aria-label": "Read" }) : h2(Check, { size: 14, "aria-label": "Delivered" }) : null
+            h2("span", { class: "ckui-message-time" }, [
+              isPending ? "Sending\u2026" : props.formatTime(message.createdAt),
+              isCurrentUser && !isPending ? readerIds.size > 0 ? h2(CheckCheck, { size: 14, "aria-label": "Read" }) : h2(Check, { size: 14, "aria-label": "Delivered" }) : null
             ])
           ]),
-          isCurrentUser ? slots["read-receipt"]?.(receiptSlotProps) ?? h2("div", {
+          isCurrentUser && !isPending ? slots["read-receipt"]?.(receiptSlotProps) ?? h2("div", {
             class: partClass("receipt", currentAppearance, "ckui-read-receipt"),
             style: partStyle("receipt", currentAppearance)
           }, readerIds.size > 0 ? `Read by ${readerIds.size}` : "Delivered") : null
@@ -1431,6 +1440,7 @@ export {
   defaultConvoKitTheme,
   defaultReadersResolver,
   formatFileSize,
+  isConvoKitPendingMessage,
   matchesConversation,
   mergeConversations,
   mergeMessages,