@convokitapp/vue-ui 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # Changelog
 
+## 0.7.0
+
+- Private mark unread. `useConversationList` / `ConversationListController`
+  gain `markUnread(conversationId)` and
+  `clearUnread(conversationId, { ifVersion? })`; the latter resolves to the
+  response's `cleared` ("this request removed the marker"). On any 200 (a mark,
+  or a clear whether `cleared` is true or false) the row's current summary
+  takes the response's `unreadMarkedAt` and `privateStateVersion` as one unit,
+  only while the response is not older than the stored version, and
+  `isUnread` is recomputed as
+  `unreadCount > 0 || unreadCountCapped || unreadMarkedAt !== null`; a lower
+  version is ignored so a delayed response never resurrects a marker a newer
+  action removed. Both methods reject when the adapter lacks the new members
+  or the store is disposed or session-ended (nothing is sent); request
+  failures are reported through `error` without evicting rows and reject.
+  Other devices learn of the change through `inbox_activity`, which the
+  backend now also sends for the caller's own marker changes.
+- Rows. The unread predicate (bold title, `data-unread`) is
+  `summary.isUnread || summary.unreadCount > 0 || summary.unreadCountCapped`,
+  so consumer-built summaries that omit `isUnread` keep their badges. A count
+  (or a capped count) keeps the numeric badge unchanged; `isUnread` without
+  one renders a numberless dot, `.ckui-unread-badge.ckui-unread-badge--dot`
+  (`role="img"`, accessible name `Unread`, never `0 unread`), in the `badge`
+  colour. It is spread into the row's meta span, so rows without a badge no
+  longer carry an empty comment vnode. `#conversation-item` slots receive the
+  same `summary` with its three new fields; no signature changes.
+- Rooms. The store captures `conversation.membership.privateStateVersion` (and
+  whether `membership.unreadMarkedAt` was set) once per open, the first time
+  its `conversation` goes from null to a DTO: on `loadInitial`, or on the
+  reconcile that follows a transient first-load failure; a refresh that
+  replaces an existing DTO never recaptures, and the capture is dropped
+  whenever `conversation` returns to null (reload, dispose, authoritative
+  401/403/404). Every targeted acknowledgement of that open sends
+  `{ throughMessageId, privateStateVersion }`; a DTO without `membership`
+  (0.6 backend) sends the 0.6 body. An automatic acknowledgement for a row
+  received before the DTO (during the load, or while a transient first-load
+  failure stands) waits for the capture, like it waits while hidden, and is
+  issued with the version once the open captures. A room opened with a
+  marker that renders no non-pending, acknowledgeable row calls
+  `clearConversationUnread(conversationId, { ifVersion: captured })` once per
+  open under the load-acknowledgement triggers and visibility gating (also on
+  an explicit `markRead()`, never once a row is rendered); `cleared: false`
+  is not an error. The store still never sends an acknowledgement without a
+  target, fabricates no read state and holds no marker state.
+- Adapter: optional `markConversationUnread?(conversationId)` and
+  `clearConversationUnread?(conversationId, { ifVersion? })`; the default
+  adapter implements both. `markConversationRead` options may now carry
+  `privateStateVersion`: custom adapters must forward the options object
+  unchanged, or acknowledgements advance the position but never clear the
+  marker. Adapters without `clearConversationUnread` leave the marker in
+  empty rooms.
+- Requires core SDK 0.7.x (`markConversationUnread`, `clearConversationUnread`,
+  `Conversation.membership`, the required `InboxSummary` members `isUnread`,
+  `unreadMarkedAt` and `privateStateVersion`) and the coordinated backend.
+  Consumer-built `InboxSummary` literals gain those three members. Mixed
+  fleet: against a 0.6 backend the new adapter members fail with a 404
+  (`HTTP_ERROR`), acknowledgements carry no version and lists show no dots.
+
 ## 0.6.0
 
 - Inbox previews and unread counts. SDK-backed lists page `listInbox` by

package/PARITY.md

@@ -20,6 +20,11 @@ while using Vue-native composition patterns.
 | Row replacements receive `summary` / `currentUserId` | `rowBuilder` | Render props | `#conversation-item` slot |
 | `inbox_activity` throttle (`activityRefreshWindowMs`) | Yes | Yes | Yes |
 | Adapter `listInbox` / `onInboxActivity` | Required | Optional | Optional |
+| List `markUnread` / `clearUnread` (0.7.0) | Controller | `useConversationList` | `useConversationList` |
+| Numberless unread dot (`isUnread`, count 0, name `Unread`) | `ConvoKitUnreadDot` | `.ckui-badge--dot` | `.ckui-unread-badge--dot` |
+| Acknowledgements carry the version captured at open | Yes | Yes | Yes |
+| Empty marked room clears through `clearConversationUnread` | Yes | Yes | Yes |
+| Adapter `markConversationUnread` / `clearConversationUnread` | Required | Optional | Optional |
 | Inbox 404 fallback to the offset path | Yes | Yes | Yes |
 | Search, archived, participant, predicate, sort filters | Yes | Yes | Yes |
 | Realtime messages, typing, reads | Yes | Yes | Yes |
@@ -68,3 +73,21 @@ unread badge (`99+` above 99 or when capped; accessible name
 A 404 from the inbox route falls back to the offset path for the store's life
 without evicting rows. The parity script checks API presence only; the store,
 rendered-view and actual-SDK protocol tests verify behavior.
+
+## Mark-unread parity (0.7.0)
+
+Every UI keeps the marker private to the caller, exposes list-level
+`markUnread` / `clearUnread` (the latter returning the response's `cleared`),
+applies a mutation response to the current summary only when its
+`privateStateVersion` is not older than the stored one, and recomputes
+`isUnread` as `unreadCount > 0 || unreadCountCapped || unreadMarkedAt != null`.
+Rows keep the numeric badge for a count and render a numberless dot named
+`Unread` for a marker without one. Room stores capture the opened
+`membership.privateStateVersion` once per open and send it with every
+targeted acknowledgement; a room opened with a marker that renders nothing
+clears it once through `clearConversationUnread(id, { ifVersion })`, never
+through an untargeted acknowledgement. The adapter additions are optional in
+the TypeScript UIs and required in the Dart and Kotlin ones (a breaking
+change for custom implementers there, like `listInbox` in 0.6.0). The parity
+script checks API presence only; the store, rendered-view and actual-SDK
+protocol tests verify behavior.

package/README.md

@@ -11,6 +11,68 @@ React package: system typography, separated rows, subtle borders, compact
 actions, and restrained radii. It remains framework-CSS independent and does
 not require Tailwind in the host application.
 
+## 0.7.0 private mark unread
+
+This release requires JavaScript SDK 0.7.x (`markConversationUnread`,
+`clearConversationUnread`, `Conversation.membership`, the `InboxSummary`
+members `isUnread`, `unreadMarkedAt` and `privateStateVersion`) and the
+coordinated backend (`POST`/`DELETE /api/v1/conversations/:id/unread`, the
+`privateStateVersion` acknowledgement field, the `membership` sibling on
+`GET /api/v1/conversations/:id`).
+
+- The marker is private: other members, webhooks and `read` events never see
+  it. `useConversationList` and the `ConversationList` controller gain
+  `markUnread(conversationId)` and `clearUnread(conversationId, { ifVersion? })`.
+  Wire them through `#conversation-item` (a row action or menu) or
+  `@controller-change`; the default row adds no affordance. `clearUnread`
+  resolves to the response's `cleared` ("this request removed the marker",
+  not "the room is read"). Both reject from a disposed or session-ended
+  controller without sending anything.
+- Summaries carry `isUnread`
+  (`unreadCount > 0 || unreadCountCapped || unreadMarkedAt !== null`),
+  `unreadMarkedAt` and `privateStateVersion`. After a mark or a clear the
+  row's summary takes the response only while it is not older than what the
+  row already holds; a delayed response never resurrects a marker a newer
+  action removed. Other devices refresh through `inbox_activity`, which the
+  backend also sends for your own marker changes; `activityRefreshWindowMs`
+  applies as before.
+- Dot rule: a count (or a capped count) keeps the numeric badge (`5`, `99+`,
+  accessible name `<count> unread`); `isUnread` without one renders a
+  numberless dot with the accessible name `Unread`, never `0 unread`
+  (`.ckui-unread-badge.ckui-unread-badge--dot`, `badge` colour). The title is
+  bold and `data-unread` is set in both cases; rows without a summary are
+  unchanged.
+- Capture at open: the room store captures
+  `conversation.membership.privateStateVersion` once per open (the first time
+  its `conversation` goes from null to a DTO: on load, or on the reconcile
+  after a transient first-load failure) and sends it with every targeted
+  acknowledgement of that open. A refresh never recaptures, so a mark made
+  elsewhere while the room is open survives its acknowledgements until the
+  room is reopened; a DTO without `membership` (0.6 backend) sends no version.
+  An automatic acknowledgement for a row that arrives before the DTO (during
+  the load, or while a transient first-load failure stands) waits for the
+  capture, like it waits while hidden, so it too carries the version.
+- Empty rooms: when the opened membership carries a marker and nothing
+  non-pending is rendered, the store calls
+  `clearConversationUnread(conversationId, { ifVersion })` once per open under
+  the same triggers and visibility gating as the load acknowledgement (and on
+  an explicit `markRead()`); once a row is rendered its acknowledgement clears
+  the marker instead. The UI still never sends an acknowledgement without a
+  target. `cleared: false` is not an error.
+- Adapter additions: `ConvoKitUiClient.markConversationUnread?(conversationId)`
+  and `clearConversationUnread?(conversationId, { ifVersion? })` are optional;
+  the default adapter implements both. Custom adapters without them make
+  `markUnread` / `clearUnread` reject and leave the marker in empty rooms.
+  (The Flutter and Android UIs make the same members, and the
+  `privateStateVersion` acknowledgement parameter, required on their
+  `ConvoKitUiClient`: a breaking change for custom implementers there, like
+  `listInbox` in 0.6.0.)
+  `markConversationRead` options now carry `privateStateVersion`; forward the
+  options object unchanged, or acknowledgements advance the position but never
+  clear the marker.
+- Mixed fleet: 0.6 lists ignore `isUnread`; against a 0.6 backend the new
+  adapter members fail with a 404 (`HTTP_ERROR`) and no dots render.
+
 ## 0.6.0 inbox previews and unread counts
 
 This release requires JavaScript SDK 0.6.x (`listInbox`, `onInboxActivity`)
@@ -248,8 +310,10 @@ Available slots include `conversation-item`, `separator`, `header`, `message`,
 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.
-`useConversationList` also exposes `summaries` and `currentUserId` and accepts
-`activityRefreshWindowMs`; `ConversationList` forwards the same option.
+`useConversationList` also exposes `summaries` and `currentUserId`, accepts
+`activityRefreshWindowMs` (`ConversationList` forwards the same option), and
+offers `markUnread(conversationId)` / `clearUnread(conversationId, options?)`
+for a host-built row action.
 `useConversation` also exposes `readPositionByUserId`, `readerIdsFor(message)`,
 `markRead()` and `setVisible(visible)`; call `setVisible(false)` while your own
 surface hides the room so automatic acknowledgements wait until it is shown.
@@ -261,7 +325,7 @@ use `isConvoKitPendingMessage(message)` to present the same state.
 ## Appearance
 
 Wrap any subtree with `ConvoKitThemeProvider` (tokens include `badge` for the
-unread counter), set `density="compact"`, or use
+unread counter and dot), set `density="compact"`, or use
 the per-part `classNames` and `styles` maps. `unstyled` removes package classes
 from the configurable parts for a fully host-owned presentation.
 

package/dist/index.cjs

@@ -73,6 +73,8 @@ function createConvoKitUiClient(client) {
     getMessage: (id) => client.getMessage(id),
     sendMessage: (input) => client.sendMessage(input),
     markConversationRead: (conversationId, options) => client.markConversationRead(conversationId, options),
+    markConversationUnread: (conversationId) => client.markConversationUnread(conversationId),
+    clearConversationUnread: (conversationId, options) => client.clearConversationUnread(conversationId, options),
     sendTyping: (input) => client.sendTyping(input),
     onMessage: (conversationId, handler, onError) => client.realtime.onMessage(conversationId, {
       onEvent: handler,
@@ -257,6 +259,10 @@ function readEntry(participant) {
 function acknowledgement() {
   return { inFlight: void 0, followUp: false, suppressed: false, target: void 0, acknowledged: void 0, unacknowledgeable: /* @__PURE__ */ new Set() };
 }
+function capture(conversation) {
+  const membership = conversation?.membership;
+  return { version: membership?.privateStateVersion, clearPending: membership?.unreadMarkedAt != null };
+}
 function isTargetMiss(cause) {
   if (typeof cause !== "object" || cause === null) return false;
   const { code, status } = cause;
@@ -317,6 +323,7 @@ var ConversationStore = class {
   // Keep tombstones until an explicit reload/session change, including across refreshes.
   deleted = /* @__PURE__ */ new Set();
   ack = acknowledgement();
+  captured = capture();
   // Visible until the platform reports otherwise; unknown/prerender/no document count as visible.
   visible = true;
   sendRevision;
@@ -382,6 +389,7 @@ var ConversationStore = class {
     this.hydrationPool.queued.clear();
     this.deleted.clear();
     this.ack = acknowledgement();
+    this.captured = capture();
     this.sendRevision = void 0;
     this.activeSend = void 0;
     this.refreshQueued = false;
@@ -626,9 +634,13 @@ var ConversationStore = class {
       this.validatePage(page);
       this.cursor = page.at(-1);
       this.patch({ conversation, messages: this.overlay(page, revision), hasOlderMessages: page.length === this.pageSize });
+      this.captured = capture(conversation);
       this.mergeReads(conversation.participants.map(readEntry));
       this.prune(revision);
-      if (this.options.markReadOnLoad ?? true) await this.acknowledge(true);
+      if ((this.options.markReadOnLoad ?? true) || this.ack.suppressed) {
+        this.ack.suppressed = false;
+        await this.acknowledge(true);
+      }
     } catch (cause) {
       this.fail(cause, generation, true);
     } finally {
@@ -685,9 +697,12 @@ var ConversationStore = class {
       const survivingIds = new Set(reconciled.map((message) => message.id));
       const known = this.state.messages.filter((message) => !isConvoKitPendingMessage(message)).map((message) => message.id).concat([...this.changes].filter(([, change]) => change.insert && change.revision <= revision).map(([id]) => id));
       for (const id of known) if (!survivingIds.has(id)) this.forget(id);
+      const opening = this.state.conversation === null;
       this.patch({ conversation, messages: reconciled, hasOlderMessages: hasOlder });
+      if (opening) this.captured = capture(conversation);
       this.mergeReads(conversation.participants.map(readEntry));
       this.prune(revision);
+      if (opening) void this.resumeAcknowledgement();
     } catch (cause) {
       this.fail(cause, generation, true);
     } finally {
@@ -721,15 +736,22 @@ var ConversationStore = class {
       }
     }
   };
-  /** Acknowledge through the newest rendered row now, regardless of visibility; no request without a target. */
+  /** Acknowledge through the newest rendered row now, regardless of visibility; no acknowledgement without a
+   * target (a room opened with a marker that renders nothing clears the marker instead, once).
+   */
   markRead = () => this.alive() ? this.acknowledge(false) : Promise.resolve();
   /** Automatic acknowledgements wait while hidden and are re-issued (once) on becoming visible. */
   setVisible = (visible) => {
     this.visible = visible;
-    if (!visible || !this.ack.suppressed || !this.alive()) return;
-    this.ack.suppressed = false;
-    void this.acknowledge(true);
+    if (!visible || !this.alive()) return;
+    void this.resumeAcknowledgement();
   };
+  /** Re-issue (once) the automatic acknowledgement that waited while hidden or before this open's DTO, if any. */
+  resumeAcknowledgement() {
+    if (!this.ack.suppressed) return Promise.resolve();
+    this.ack.suppressed = false;
+    return this.acknowledge(true);
+  }
   /** The newest non-pending rendered row by (createdAt, id), never by list index and never a raw realtime
    * row; rows the server does not know are skipped, and nothing at or before the accepted target is re-sent.
    */
@@ -744,7 +766,7 @@ var ConversationStore = class {
   /** Resolves when the request this call issued or joined settles; a follow-up is issued, not awaited. */
   acknowledge(automatic) {
     const ack = this.ack;
-    if (automatic && !this.visible) {
+    if (automatic && (!this.visible || this.state.conversation === null)) {
       ack.suppressed = true;
       return Promise.resolve();
     }
@@ -757,9 +779,10 @@ var ConversationStore = class {
   issue(ack, generation) {
     ack.followUp = false;
     const target = this.ackTarget(ack);
-    if (!target) return void 0;
-    ack.target = target.id;
-    ack.inFlight = this.send(ack, generation, target).finally(() => {
+    const request = target ? this.send(ack, generation, target) : this.clearMarker(ack, generation);
+    if (!request) return void 0;
+    ack.target = target?.id;
+    ack.inFlight = request.finally(() => {
       ack.inFlight = void 0;
       ack.target = void 0;
       if (!this.alive(generation) || !ack.followUp) return;
@@ -770,9 +793,31 @@ var ConversationStore = class {
     });
     return ack.inFlight;
   }
+  /** A room opened with the caller's unread marker that renders no non-pending, acknowledgeable row cannot clear
+   * it through a targeted acknowledgement, so it asks the adapter to clear the marker conditionally on the captured
+   * version, once per open, under the acknowledgement triggers and visibility gating. Rows rendered later clear it
+   * through their acknowledgements; adapters without the member leave it; `cleared: false` is not an error.
+   */
+  clearMarker(ack, generation) {
+    const captured = this.captured;
+    if (!captured.clearPending || captured.version === void 0 || typeof this.client.clearConversationUnread !== "function" || this.state.messages.some((message) => !isConvoKitPendingMessage(message) && !ack.unacknowledgeable.has(message.id))) return void 0;
+    captured.clearPending = false;
+    return this.clearUnread(captured.version, generation);
+  }
+  async clearUnread(version2, generation) {
+    try {
+      await this.client.clearConversationUnread(this.room, { ifVersion: version2 });
+    } catch (cause) {
+      if (this.alive(generation)) this.fail(cause, generation);
+    }
+  }
   async send(ack, generation, target) {
     try {
-      await this.client.markConversationRead(this.room, { throughMessageId: target.id });
+      const version2 = this.captured.version;
+      await this.client.markConversationRead(this.room, {
+        throughMessageId: target.id,
+        ...version2 === void 0 ? {} : { privateStateVersion: version2 }
+      });
       if (!this.alive(generation)) return;
       if (!ack.acknowledged || compare(target, ack.acknowledged) > 0) ack.acknowledged = target;
     } catch (cause) {
@@ -1936,6 +1981,66 @@ var ConversationListStore = class {
     else if (!this.state.conversations.length && this.state.hasMore) await this.loadMore();
   };
   setQuery = (query) => this.setFilter({ ...this.state.filter, query });
+  /** Mark a room unread for the viewer only; the row's summary takes the response (D10). Rejects when the adapter
+   * lacks `markConversationUnread` or the store is not active; a request failure is reported through `error`
+   * without evicting rows and rejects.
+   */
+  markUnread = async (conversationId) => {
+    const client = this.options.client;
+    if (typeof client.markConversationUnread !== "function") {
+      throw new TypeError("markUnread requires a ConvoKitUiClient adapter with markConversationUnread (core SDK 0.7)");
+    }
+    this.assertActive();
+    this.applyPrivateState(conversationId, await this.mutate(client.markConversationUnread(conversationId)));
+  };
+  /** Remove the viewer's marker (conditionally on `options.ifVersion`); resolves to the response's `cleared` ("this
+   * request removed the marker", not "the room is read") and patches the summary on true and false alike (D10).
+   * Rejects when the adapter lacks `clearConversationUnread` or the store is not active; failures are reported like
+   * `markUnread`.
+   */
+  clearUnread = async (conversationId, options) => {
+    const client = this.options.client;
+    if (typeof client.clearConversationUnread !== "function") {
+      throw new TypeError("clearUnread requires a ConvoKitUiClient adapter with clearConversationUnread (core SDK 0.7)");
+    }
+    this.assertActive();
+    const result = await this.mutate(client.clearConversationUnread(conversationId, options));
+    this.applyPrivateState(conversationId, result);
+    return result.cleared;
+  };
+  /** A disposed or session-evicted store never sends a private-state mutation: on a shared client it could go out
+   * under a replacement login. Rejected without touching `error` (there is no live snapshot to report into).
+   */
+  assertActive() {
+    if (!this.alive()) throw new Error("ConversationListStore is not active");
+  }
+  async mutate(request) {
+    try {
+      return await request;
+    } catch (cause) {
+      if (this.alive()) this.patch({ error: cause });
+      throw cause;
+    }
+  }
+  /** Apply a mark/clear response to the row's CURRENT summary (a refresh may have swapped it) as one unit, only while
+   * the store is alive and the response is not older than the stored version: a delayed response never resurrects a
+   * marker a newer action removed (equal versions are an idempotent no-op). `isUnread` is recomputed from the stored
+   * counts and the response marker. Other devices learn of the change through `inbox_activity`.
+   */
+  applyPrivateState(conversationId, state) {
+    if (!this.alive()) return;
+    const current = this.entries.find((entry) => entry.conversation.id === conversationId);
+    if (!current || state.privateStateVersion < current.privateStateVersion) return;
+    const { unreadMarkedAt, privateStateVersion } = state;
+    const patched = {
+      ...current,
+      unreadMarkedAt,
+      privateStateVersion,
+      isUnread: current.unreadCount > 0 || current.unreadCountCapped || unreadMarkedAt !== null
+    };
+    this.entries = this.entries.map((entry) => entry === current ? patched : entry);
+    this.patch({ summaries: new Map(this.entries.map((entry) => [entry.conversation.id, summaryOf(entry)])) });
+  }
 };
 
 // src/composables/use-conversation-list.ts
@@ -1983,6 +2088,8 @@ function useConversationList(options) {
     loadMore: () => store.loadMore(),
     setFilter: (filter) => store.setFilter(filter),
     setQuery: (query) => store.setQuery(query),
+    markUnread: (conversationId) => store.markUnread(conversationId),
+    clearUnread: (conversationId, options2) => store.clearUnread(conversationId, options2),
     dispose
   };
 }
@@ -2059,13 +2166,16 @@ var ConversationListView = (0, import_vue10.defineComponent)({
       return void 0;
     };
     const unreadBadge = (summary) => {
-      if (summary.unreadCount <= 0 && !summary.unreadCountCapped) return null;
-      const capped = summary.unreadCountCapped || summary.unreadCount > 99;
-      return (0, import_vue10.h)("span", {
-        class: "ckui-unread-badge",
-        role: "img",
-        "aria-label": `${summary.unreadCountCapped ? "99+" : summary.unreadCount} unread`
-      }, [(0, import_vue10.h)("span", { "aria-hidden": "true" }, capped ? "99+" : String(summary.unreadCount))]);
+      if (summary.unreadCount > 0 || summary.unreadCountCapped) {
+        const capped = summary.unreadCountCapped || summary.unreadCount > 99;
+        return [(0, import_vue10.h)("span", {
+          class: "ckui-unread-badge",
+          role: "img",
+          "aria-label": `${summary.unreadCountCapped ? "99+" : summary.unreadCount} unread`
+        }, [(0, import_vue10.h)("span", { "aria-hidden": "true" }, capped ? "99+" : String(summary.unreadCount))])];
+      }
+      if (summary.isUnread) return [(0, import_vue10.h)("span", { class: "ckui-unread-badge ckui-unread-badge--dot", role: "img", "aria-label": "Unread" })];
+      return [];
     };
     const renderContent = () => {
       const currentAppearance = appearance();
@@ -2108,7 +2218,7 @@ var ConversationListView = (0, import_vue10.defineComponent)({
           ...props.currentUserId === void 0 ? {} : { currentUserId: props.currentUserId }
         };
         const preview = inboxPreview(conversation, summary, props.currentUserId);
-        const unread = summary !== void 0 && (summary.unreadCount > 0 || summary.unreadCountCapped);
+        const unread = summary !== void 0 && (summary.isUnread || summary.unreadCount > 0 || summary.unreadCountCapped);
         const item = slots["conversation-item"]?.(slotProps) ?? (0, import_vue10.h)("button", {
           type: "button",
           "data-selected": selected || void 0,
@@ -2132,7 +2242,7 @@ var ConversationListView = (0, import_vue10.defineComponent)({
           // summary must keep 0.5's exact markup.
           ...summary ? [(0, import_vue10.h)("span", { class: "ckui-conversation-item__meta" }, [
             (0, import_vue10.h)("time", { class: "ckui-conversation-item__time", datetime: summary.activityAt.toISOString() }, formatMessageTime(summary.activityAt)),
-            unreadBadge(summary)
+            ...unreadBadge(summary)
           ])] : [],
           (0, import_vue10.h)(import_vue9.ChevronRight, { size: 18, "aria-hidden": "true" })
         ]);