@convokitapp/vue-ui 0.2.1 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.2.2
+
+- Show `Sending…` for optimistic messages instead of a device-clock timestamp that can jump after acknowledgement.
+- Keep pending messages after canonical history and exclude them from read receipts.
+- Continue displaying acknowledged server timestamps in the viewer's local timezone.
+
 ## 0.2.1
 
 - Show outgoing messages immediately while the request completes, then reconcile the server response and realtime echo without duplicates.

package/PARITY.md

@@ -16,6 +16,7 @@ while using Vue-native composition patterns.
 | Offset pagination and de-duplication | Yes | Yes | Yes |
 | Search, archived, participant, predicate, sort filters | Yes | Yes | Yes |
 | Realtime messages, typing, reads | Yes | Yes | Yes |
+| Pending state without provisional timestamps or receipts | Yes | Yes | Yes |
 | Read markers and reader resolution | Yes | Yes | Yes |
 | Mark read on load/receive | Yes | Yes | Yes |
 | Typing idle timeout | Yes | Yes | Yes |

package/README.md

@@ -87,6 +87,10 @@ Use `useConversationList` and `useConversation` when you want ConvoKit's
 pagination, de-duplication, realtime, typing, and read state without the
 default UI. Both return readonly Vue refs plus actions and a `dispose()` method.
 
+Optimistic rows display `Sending…` until acknowledgement. The final server
+timestamp is formatted in the viewer's local timezone. Custom message slots can
+use `isConvoKitPendingMessage(message)` to present the same state.
+
 ## Appearance
 
 Wrap any subtree with `ConvoKitThemeProvider`, set `density="compact"`, or use

package/dist/index.cjs

@@ -32,6 +32,7 @@ __export(index_exports, {
   defaultConvoKitTheme: () => defaultConvoKitTheme,
   defaultReadersResolver: () => defaultReadersResolver,
   formatFileSize: () => formatFileSize,
+  isConvoKitPendingMessage: () => isConvoKitPendingMessage,
   matchesConversation: () => matchesConversation,
   mergeConversations: () => mergeConversations,
   mergeMessages: () => mergeMessages,
@@ -75,6 +76,10 @@ var import_vue = require("vue");
 
 // src/utils.ts
 var import_clsx = require("clsx");
+var pendingMessageIdPrefix = "convokit-pending-";
+function isConvoKitPendingMessage(message) {
+  return message.id.startsWith(pendingMessageIdPrefix);
+}
 function cx(...values) {
   return (0, import_clsx.clsx)(values);
 }
@@ -117,11 +122,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) {
@@ -520,7 +529,8 @@ var MessageListView = (0, import_vue4.defineComponent)({
     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 (0, import_vue4.h)("div", { key: message.id, role: "listitem" }, custom);
@@ -553,12 +563,12 @@ var MessageListView = (0, import_vue4.defineComponent)({
             !isCurrentUser ? (0, import_vue4.h)("strong", { class: "ckui-message-sender" }, sender?.name || message.senderId) : null,
             message.text ? (0, import_vue4.h)("div", { class: "ckui-message-text" }, message.text) : null,
             ...mediaNodes,
-            (0, import_vue4.h)("time", { class: "ckui-message-time", datetime: message.createdAt.toISOString() }, [
-              props.formatTime(message.createdAt),
-              isCurrentUser ? readerIds.size > 0 ? (0, import_vue4.h)(import_vue3.CheckCheck, { size: 14, "aria-label": "Read" }) : (0, import_vue4.h)(import_vue3.Check, { size: 14, "aria-label": "Delivered" }) : null
+            (0, import_vue4.h)("span", { class: "ckui-message-time" }, [
+              isPending ? "Sending\u2026" : props.formatTime(message.createdAt),
+              isCurrentUser && !isPending ? readerIds.size > 0 ? (0, import_vue4.h)(import_vue3.CheckCheck, { size: 14, "aria-label": "Read" }) : (0, import_vue4.h)(import_vue3.Check, { size: 14, "aria-label": "Delivered" }) : null
             ])
           ]),
-          isCurrentUser ? slots["read-receipt"]?.(receiptSlotProps) ?? (0, import_vue4.h)("div", {
+          isCurrentUser && !isPending ? slots["read-receipt"]?.(receiptSlotProps) ?? (0, import_vue4.h)("div", {
             class: partClass("receipt", currentAppearance, "ckui-read-receipt"),
             style: partStyle("receipt", currentAppearance)
           }, readerIds.size > 0 ? `Read by ${readerIds.size}` : "Delivered") : null
@@ -1427,6 +1437,7 @@ function useConvoKitTheme() {
   defaultConvoKitTheme,
   defaultReadersResolver,
   formatFileSize,
+  isConvoKitPendingMessage,
   matchesConversation,
   mergeConversations,
   mergeMessages,