@convokitapp/vue-ui 0.2.0 → 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) {
@@ -165,6 +173,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 = [];
@@ -188,7 +198,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 }) => {
@@ -212,6 +227,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();
@@ -251,7 +267,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);
@@ -282,6 +298,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: toValue(options.conversationId),
+      senderId: 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;
@@ -291,11 +319,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;
@@ -476,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);
@@ -509,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
@@ -651,7 +690,9 @@ var ConversationView = defineComponent3({
       ...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);
@@ -659,12 +700,14 @@ var ConversationView = defineComponent3({
       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;
       }
@@ -757,7 +800,6 @@ var ConversationView = defineComponent3({
           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);
@@ -1398,6 +1440,7 @@ export {
   defaultConvoKitTheme,
   defaultReadersResolver,
   formatFileSize,
+  isConvoKitPendingMessage,
   matchesConversation,
   mergeConversations,
   mergeMessages,