@convokitapp/vue-ui 0.1.3 → 0.2.1

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Changelog
+
+## 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.
+- Preserve the existing Vue component and configuration API.

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

package/dist/index.cjs

@@ -196,6 +196,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 +221,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 +250,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 +290,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 +321,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 +342,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;
@@ -665,7 +695,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 +705,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 +805,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);