@convokitapp/vue-ui 0.2.0 → 0.2.1

package/dist/index.js

@@ -165,6 +165,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 +190,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 +219,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 +259,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 +290,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 +311,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;
@@ -651,7 +681,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 +691,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 +791,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);