@convokitapp/vue-ui 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # 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.
+- Clear the composer immediately and restore its draft after a failed send when the user has not typed a replacement.
+
 ## 0.2.0
 
 - Require ConvoKit JavaScript SDK 0.2.x for private Realtime channels and publishable-key discovery.

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

@@ -54,6 +54,10 @@ Vite environment variables, or a shipped browser bundle.
 The core SDK uses ConvoKit's managed `https://api.convokit.app` endpoint. Set
 `backendUrl` only for local testing or a self-hosted deployment.
 
+SDK-backed conversations render an outgoing message immediately, reconcile it
+with the server response and realtime echo, and restore an unchanged draft if
+the send fails.
+
 ## Controlled components and slots
 
 `ConversationListView`, `MessageListView`, and `ConversationView` accept host
@@ -83,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) {
@@ -196,6 +205,8 @@ function useConversation(options) {
   let sentTyping = false;
   let typingTimer = null;
   let subscriptions = [];
+  const pendingIds = /* @__PURE__ */ new Set();
+  let pendingSequence = 0;
   const unsubscribe = async () => {
     const active = subscriptions;
     subscriptions = [];
@@ -219,7 +230,12 @@ function useConversation(options) {
     subscriptions = [
       client.onMessage(conversationId, (message) => {
         if (disposed || activeGeneration !== generation) return;
-        messages.value = mergeMessages(messages.value, [message]);
+        const pending = messages.value.find((candidate) => pendingIds.has(candidate.id) && message.senderId === client.currentUserId && candidate.text === message.text && candidate.media.length === message.media.length);
+        if (pending) pendingIds.delete(pending.id);
+        messages.value = mergeMessages(
+          pending ? messages.value.filter((candidate) => candidate.id !== pending.id) : messages.value,
+          [message]
+        );
         if ((options.markReadOnReceive ?? true) && message.senderId !== client.currentUserId) void markRead();
       }, report),
       client.onReadReceipt(conversationId, ({ userId, readAt }) => {
@@ -243,6 +259,7 @@ function useConversation(options) {
     await unsubscribe();
     if (disposed || activeGeneration !== generation) return;
     messages.value = [];
+    pendingIds.clear();
     conversation.value = null;
     typingUserIds.value = /* @__PURE__ */ new Set();
     readAtByUserId.value = /* @__PURE__ */ new Map();
@@ -282,7 +299,7 @@ function useConversation(options) {
       const page = await client.getMessages({
         conversationId,
         limit: messagePageSize,
-        offset: messages.value.length
+        offset: messages.value.filter((message) => !pendingIds.has(message.id)).length
       });
       if (disposed || activeGeneration !== generation) return;
       messages.value = mergeMessages(messages.value, page);
@@ -313,6 +330,18 @@ function useConversation(options) {
     const normalizedText = text?.trim();
     if (!normalizedText && (!media || media.length === 0)) return null;
     if (isSending.value) return null;
+    const pendingId = `convokit-pending-${Date.now()}-${++pendingSequence}`;
+    const pendingMessage = {
+      id: pendingId,
+      conversationId: (0, import_vue2.toValue)(options.conversationId),
+      senderId: (0, import_vue2.toValue)(options.client).currentUserId,
+      text: normalizedText ?? null,
+      media: media ?? [],
+      createdAt: /* @__PURE__ */ new Date(),
+      updatedAt: null
+    };
+    pendingIds.add(pendingId);
+    messages.value = mergeMessages(messages.value, [pendingMessage]);
     isSending.value = true;
     error.value = null;
     const activeGeneration = generation;
@@ -322,11 +351,21 @@ function useConversation(options) {
         ...normalizedText ? { text: normalizedText } : {},
         ...media?.length ? { media } : {}
       });
-      if (!disposed && activeGeneration === generation) messages.value = mergeMessages(messages.value, [message]);
+      pendingIds.delete(pendingId);
+      if (!disposed && activeGeneration === generation) {
+        messages.value = mergeMessages(
+          messages.value.filter((candidate) => candidate.id !== pendingId),
+          [message]
+        );
+      }
       await updateTyping(false);
       return message;
     } catch (cause) {
-      if (!disposed) error.value = cause;
+      pendingIds.delete(pendingId);
+      if (!disposed) {
+        messages.value = messages.value.filter((candidate) => candidate.id !== pendingId);
+        error.value = cause;
+      }
       return null;
     } finally {
       if (!disposed && activeGeneration === generation) isSending.value = false;
@@ -490,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);
@@ -523,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
@@ -665,7 +705,9 @@ var ConversationView = (0, import_vue6.defineComponent)({
       ...props.styles ? { styles: props.styles } : {}
     });
     const draft = () => props.modelValue ?? internalDraft.value;
+    let latestDraft = draft();
     const setDraft = (value) => {
+      latestDraft = value;
       if (props.modelValue === void 0) internalDraft.value = value;
       props.onDraftChange?.(value);
       emit("update:modelValue", value);
@@ -673,12 +715,14 @@ var ConversationView = (0, import_vue6.defineComponent)({
       void props.onTypingChange?.(isTyping);
     };
     const submit = async () => {
-      const text = draft().trim();
+      const originalDraft = draft();
+      const text = originalDraft.trim();
       if (!text || props.isSending || submitting.value) return;
       submitting.value = true;
+      setDraft("");
       try {
         const shouldClear = await props.onSendMessage(text);
-        if (shouldClear !== false) setDraft("");
+        if (shouldClear === false && latestDraft.length === 0) setDraft(originalDraft);
       } finally {
         submitting.value = false;
       }
@@ -771,7 +815,6 @@ var ConversationView = (0, import_vue6.defineComponent)({
           class: cx(!props.unstyled && "ckui-composer__input", props.classNames?.input, props.composerProps?.class),
           style: [props.styles?.input, props.composerProps?.style],
           value: draft(),
-          disabled: props.isSending || submitting.value,
           onInput: (event) => {
             const handler = props.composerProps?.onInput;
             if (typeof handler === "function") handler(event);
@@ -1394,6 +1437,7 @@ function useConvoKitTheme() {
   defaultConvoKitTheme,
   defaultReadersResolver,
   formatFileSize,
+  isConvoKitPendingMessage,
   matchesConversation,
   mergeConversations,
   mergeMessages,