@convokitapp/vue-ui 0.7.0 → 0.8.0

package/dist/index.js

@@ -26,6 +26,8 @@ function createConvoKitUiClient(client) {
     getMessages: (options) => client.getMessages(options),
     getMessage: (id) => client.getMessage(id),
     sendMessage: (input) => client.sendMessage(input),
+    editMessage: (messageId, input) => client.editMessage(messageId, input),
+    deleteMessage: (messageId) => client.deleteMessage(messageId),
     markConversationRead: (conversationId, options) => client.markConversationRead(conversationId, options),
     markConversationUnread: (conversationId) => client.markConversationUnread(conversationId),
     clearConversationUnread: (conversationId, options) => client.clearConversationUnread(conversationId, options),
@@ -186,12 +188,13 @@ var ConvoKitAvatar = defineComponent({
 });
 
 // src/components/conversation.ts
-import { ArrowLeft, LoaderCircle as LoaderCircle2, Paperclip, RefreshCw, Send } from "@lucide/vue";
+import { ArrowLeft, Check as Check2, LoaderCircle as LoaderCircle2, Paperclip, Pencil as Pencil2, RefreshCw, Send } from "@lucide/vue";
 import {
   defineComponent as defineComponent3,
   h as h3,
   onBeforeUnmount,
   ref as ref2,
+  watch as watch3,
   watchEffect
 } from "vue";
 
@@ -206,9 +209,31 @@ function version(message) {
 function hasContent(message) {
   return !!message.text?.trim() || message.media.length > 0;
 }
+function revisionOrder(left, right) {
+  const a = left.revision, b = right.revision;
+  if (typeof a !== "number" || typeof b !== "number" || a <= 0 && b <= 0) return void 0;
+  return a === b ? void 0 : a - b;
+}
+function older(candidate, reference) {
+  const byRevision = revisionOrder(candidate, reference);
+  return byRevision === void 0 ? version(candidate) < version(reference) : byRevision < 0;
+}
 function newest(current, incoming, incomingComplete = true) {
+  const byRevision = revisionOrder(current, incoming);
+  if (byRevision !== void 0) return byRevision > 0 ? current : incoming;
   return version(current) > version(incoming) || !incomingComplete && version(current) === version(incoming) ? current : incoming;
 }
+function isRevisionConflict(cause) {
+  if (typeof cause !== "object" || cause === null) return false;
+  const { code, status } = cause;
+  return code === "REVISION_CONFLICT" || code === void 0 && status === 409;
+}
+function isMessageMissing(cause) {
+  return typeof cause === "object" && cause !== null && cause.code === "MESSAGE_NOT_FOUND";
+}
+function localConflict() {
+  return Object.assign(new Error("Message was changed since it was loaded"), { code: "REVISION_CONFLICT" });
+}
 var compare = compareMessageOrder;
 function positionCursor(position) {
   return { createdAt: position.createdAt, id: position.messageId };
@@ -228,7 +253,7 @@ function isTargetMiss(cause) {
   const { code, status } = cause;
   return code === "MESSAGE_NOT_FOUND" || code === void 0 && status === 404;
 }
-function blank(currentUserId = "") {
+function blank(currentUserId = "", support = { edit: false, delete: false }) {
   return {
     conversation: null,
     messages: [],
@@ -242,7 +267,10 @@ function blank(currentUserId = "") {
     hasOlderMessages: true,
     hasLoaded: false,
     error: null,
-    currentUserId
+    currentUserId,
+    editingMessage: null,
+    canEditMessages: support.edit,
+    canDeleteMessages: support.delete
   };
 }
 var ConversationStore = class {
@@ -261,7 +289,8 @@ var ConversationStore = class {
     }
     this.owner = this.client.sessionIdentity;
     this.user = this.owner ? this.client.currentUserId : "";
-    this.state = blank(this.user);
+    this.support = { edit: typeof this.client.editMessage === "function", delete: typeof this.client.deleteMessage === "function" };
+    this.state = blank(this.user, this.support);
   }
   options;
   client;
@@ -288,6 +317,13 @@ var ConversationStore = class {
   visible = true;
   sendRevision;
   activeSend;
+  /** Adapter support for author edits/deletes, decided once like `listInbox`. */
+  support;
+  /** The id whose `saveEdit` request is in flight: its outcome (success or 409) decides the edit, so newer rows for
+   * it arriving meanwhile (its own UPDATE image, typically) are not reported as a local conflict while it lasts;
+   * `settleEditing` re-evaluates them once the request has settled any other way.
+   */
+  activeEdit;
   refreshQueued = false;
   typingTimers = /* @__PURE__ */ new Map();
   ownTypingTimer;
@@ -306,9 +342,33 @@ var ConversationStore = class {
       for (const message of patch.messages) this.confirmSend(message);
       if (this.activeSend.confirmed) patch.messages = patch.messages.filter((message) => message.id !== this.activeSend.pending.id);
     }
+    if (patch.messages) patch = this.trackEditing(patch);
     this.state = { ...this.state, ...patch };
     for (const listener of this.listeners) listener();
   }
+  /** Edit mode follows the edited row wherever a message list reaches the state: the row leaving the list (deletion,
+   * reconcile tombstone, eviction) ends it, and a row for it with a higher revision than the snapshot (UPDATE image,
+   * hydration, reconcile, refresh) is the local conflict: the snapshot is replaced and `error` carries the conflict
+   * code, without a request. A save in flight owns its own outcome (`activeEdit`) and re-checks when it settles
+   * (`settleEditing`).
+   */
+  trackEditing(patch) {
+    const editing = patch.editingMessage === void 0 ? this.state.editingMessage : patch.editingMessage;
+    if (!editing || !patch.messages) return patch;
+    const live = patch.messages.find((message) => message.id === editing.id);
+    if (!live) return { ...patch, editingMessage: null };
+    if (this.activeEdit === editing.id || !(live.revision > editing.revision)) return patch;
+    return { ...patch, editingMessage: live, error: localConflict() };
+  }
+  /** After a save for `id` has settled without deciding the edit (a failure, or a 409 whose reload failed), a newer
+   * row for it that arrived during the request is the local conflict after all: the snapshot is replaced and
+   * `error` carries the conflict code, so the next save carries the fresh revision without another round trip.
+   */
+  settleEditing(id) {
+    const editing = this.state.editingMessage;
+    const live = editing?.id === id ? this.state.messages.find((message) => message.id === id) : void 0;
+    if (editing && live && live.revision > editing.revision) this.patch({ editingMessage: live, error: localConflict() });
+  }
   alive(generation = this.generation) {
     return !this.disposed && generation === this.generation && this.owner !== null && this.client.sessionIdentity === this.owner;
   }
@@ -352,6 +412,7 @@ var ConversationStore = class {
     this.captured = capture();
     this.sendRevision = void 0;
     this.activeSend = void 0;
+    this.activeEdit = void 0;
     this.refreshQueued = false;
   }
   dispose = () => {
@@ -360,14 +421,14 @@ var ConversationStore = class {
     }
     this.disposed = true;
     this.clear();
-    this.patch(blank());
+    this.patch(blank("", this.support));
   };
   fail(cause, generation, history = false) {
     if (!this.alive(generation)) return;
     const status = typeof cause === "object" && cause !== null && "status" in cause ? cause.status : void 0;
     if (history && (status === 401 || status === 403 || status === 404)) {
       this.clear();
-      this.patch({ ...blank(this.user), error: cause, hasLoaded: true, hasOlderMessages: false });
+      this.patch({ ...blank(this.user, this.support), error: cause, hasLoaded: true, hasOlderMessages: false });
     } else this.patch({ error: cause });
   }
   attach(generation, data = true) {
@@ -439,7 +500,7 @@ var ConversationStore = class {
     if (!this.alive(generation) || type !== "insert" && type !== "update" || !this.validMessage(message) || this.deleted.has(message.id)) return;
     const existing = this.state.messages.find((item) => item.id === message.id);
     const known = existing ?? this.changes.get(message.id)?.message;
-    if (known && version(message) < version(known)) return;
+    if (known && older(message, known)) return;
     const insert = type === "insert" || this.changes.get(message.id)?.insert === true;
     if (!existing && !insert && type === "update" && !this.state.isInitialLoading && !this.state.isLoadingOlder && !this.state.isReconciling) return;
     const revision = ++this.revision;
@@ -452,7 +513,7 @@ var ConversationStore = class {
   }
   record(message, insert, revision, complete) {
     const existing = this.state.messages.find((item) => item.id === message.id);
-    if (existing && version(existing) > version(message)) return;
+    if (existing && older(message, existing)) return;
     if (this.confirmSend(message) && !complete && !message.media.length) {
       message = { ...message, media: this.activeSend.pending.media };
       this.confirmSend(message);
@@ -503,7 +564,7 @@ var ConversationStore = class {
       if (!this.currentHydration(job)) return;
       const full = await this.client.getMessage(id);
       if (!this.currentHydration(job)) return;
-      if (!this.validMessage(full) || full.id !== id || full.senderId !== job.message.senderId || version(full) < version(job.message)) {
+      if (!this.validMessage(full) || full.id !== id || full.senderId !== job.message.senderId || older(full, job.message)) {
         throw new Error("Complete message response does not match the observed resource/revision");
       }
       this.record(full, job.insert, job.revision, true);
@@ -583,7 +644,7 @@ var ConversationStore = class {
     if (!this.alive()) return;
     this.clear();
     const generation = this.generation;
-    this.patch({ ...blank(this.user), isInitialLoading: true });
+    this.patch({ ...blank(this.user, this.support), isInitialLoading: true });
     const revision = this.revision;
     try {
       this.attach(generation);
@@ -826,7 +887,8 @@ var ConversationStore = class {
       text: normalized || null,
       media: media ?? [],
       createdAt: /* @__PURE__ */ new Date(),
-      updatedAt: null
+      updatedAt: null,
+      revision: 0
     };
     const send = { pending };
     this.activeSend = send;
@@ -870,6 +932,132 @@ var ConversationStore = class {
       }
     }
   };
+  /** The caller's role in the open room when known (0.7 `membership`, else the caller's participant row). */
+  ownRole() {
+    const conversation = this.state.conversation;
+    return conversation?.membership?.role ?? conversation?.participants.find((participant) => participant.appUserId === this.user || participant.id === this.user)?.role;
+  }
+  /** A rendered, confirmed row of the caller's own that is not known to be gone. */
+  ownRow(messageId) {
+    const row = this.state.messages.find((message) => message.id === messageId);
+    return row && row.senderId === this.user && !isConvoKitPendingMessage(row) && !this.deleted.has(messageId) ? row : void 0;
+  }
+  /** Enter edit mode on one of the caller's own confirmed messages (0.8.0): the row as it stands now becomes the
+   * snapshot whose `revision` every save sends. A no-op unless the adapter implements `editMessage`, the row is
+   * rendered, own, confirmed, not tombstoned and the caller's role (when known) is not `READ`. Sends nothing.
+   */
+  startEditing = (messageId) => {
+    if (!this.alive() || !this.support.edit || this.ownRole() === "READ") return;
+    const row = this.ownRow(messageId);
+    if (row) this.patch({ editingMessage: row });
+  };
+  /** Leave edit mode without a request; the draft is the view's to restore. */
+  cancelEditing = () => {
+    if (this.state.editingMessage) this.patch({ editingMessage: null });
+  };
+  /** Save the edit in progress with the snapshot's revision (never the live row's), trimming the text and sending
+   * `null` for an empty caption. Resolves true when the server accepted the edit (the response is merged through the
+   * tombstone and precedence guards and edit mode ends); false when nothing was saved: a stale revision (409
+   * `REVISION_CONFLICT`) reloads the row once through `getMessage`, replaces the snapshot with it (the next save
+   * carries the fresh revision) and reports the conflict through `error`, keeping edit mode; a coded 404
+   * (`MESSAGE_NOT_FOUND`, on the save or on that reload) removes the row and ends edit mode; any other failure
+   * (403, 500, network, an uncoded 404 from a 0.7 backend) is reported through `error` without evicting anything and
+   * keeps edit mode; if a newer row for the message arrived during such a request, that row is then the local
+   * conflict (`settleEditing`). A text-only message cannot be saved empty (no request). Rejects when the adapter
+   * lacks `editMessage`.
+   */
+  saveEdit = async (text) => {
+    const client = this.client;
+    if (typeof client.editMessage !== "function") {
+      throw new TypeError("This ConvoKitUiClient adapter does not implement editMessage (0.8)");
+    }
+    const snapshot = this.state.editingMessage;
+    if (!this.alive() || !snapshot || this.activeEdit !== void 0) return false;
+    const trimmed = text.trim();
+    const normalized = trimmed === "" ? null : trimmed;
+    if (normalized === null && snapshot.media.length === 0) return false;
+    const generation = this.generation;
+    const id = snapshot.id;
+    this.activeEdit = id;
+    this.patch({ error: null });
+    try {
+      const message = await client.editMessage(id, { text: normalized, revision: snapshot.revision });
+      if (!this.alive(generation)) return false;
+      if (!this.validMessage(message) || message.id !== id || message.senderId !== this.user) {
+        throw new Error("Edit response belongs to a different message or sender");
+      }
+      if (this.state.editingMessage?.id === id) this.patch({ editingMessage: null });
+      this.applyRow(message);
+      return true;
+    } catch (cause) {
+      if (!this.alive(generation)) return false;
+      if (isRevisionConflict(cause)) await this.reloadConflict(id, cause, generation);
+      else if (isMessageMissing(cause)) {
+        this.removeMessage(id);
+        this.patch({ error: cause });
+      } else this.fail(cause, generation);
+      return false;
+    } finally {
+      if (this.alive(generation)) {
+        this.activeEdit = void 0;
+        this.settleEditing(id);
+      }
+    }
+  };
+  /** Merge a complete REST row for a known id through the live-row guards: a tombstoned id is dropped, and an older
+   * revision (or timestamp) never overwrites the newer row already recorded. Recorded as a non-insert change, so a
+   * reconcile keeps it only while the row is still in the fetched range.
+   */
+  applyRow(message) {
+    if (this.deleted.has(message.id)) return;
+    this.record(message, this.changes.get(message.id)?.insert === true, ++this.revision, true);
+  }
+  /** The 409 path: one `getMessage` shows the conflicting content. Its row is merged through the guards and becomes
+   * the new snapshot; a `MESSAGE_NOT_FOUND` answer removes the row and ends edit mode; another failure keeps the
+   * snapshot. `error` carries the conflict (or the reload failure).
+   */
+  async reloadConflict(id, conflict, generation) {
+    try {
+      const current = await this.client.getMessage(id);
+      if (!this.alive(generation)) return;
+      if (!this.validMessage(current) || current.id !== id) throw new Error("Complete message response does not match the edited message");
+      this.applyRow(current);
+      const row = this.state.messages.find((message) => message.id === id);
+      const editing = this.state.editingMessage?.id === id && row ? { editingMessage: row } : {};
+      this.patch({ ...editing, error: conflict });
+    } catch (cause) {
+      if (!this.alive(generation)) return;
+      if (isTargetMiss(cause)) this.removeMessage(id);
+      this.patch({ error: cause });
+    }
+  }
+  /** Delete one of the caller's own confirmed messages (0.8.0). The row stays until the server answers: on success,
+   * or when the server no longer knows it (`MESSAGE_NOT_FOUND`), it is tombstoned and removed (late responses, row
+   * images and hydrations for it are dropped, the acknowledgement target is re-resolved and edit mode on it ends)
+   * and the call resolves true; any other failure keeps the row, reports through `error` and resolves false. Rejects
+   * when the adapter lacks `deleteMessage`.
+   */
+  deleteMessage = async (messageId) => {
+    const client = this.client;
+    if (typeof client.deleteMessage !== "function") {
+      throw new TypeError("This ConvoKitUiClient adapter does not implement deleteMessage (0.8)");
+    }
+    if (!this.alive() || !this.ownRow(messageId)) return false;
+    const generation = this.generation;
+    this.patch({ error: null });
+    try {
+      await client.deleteMessage(messageId);
+    } catch (cause) {
+      if (!this.alive(generation)) return false;
+      if (!isMessageMissing(cause)) {
+        this.fail(cause, generation);
+        return false;
+      }
+    }
+    if (!this.alive(generation)) return false;
+    this.removeMessage(messageId);
+    return true;
+  };
   readerIdsFor = (message) => readerIdsFor(message, this.state.readAtByUserId, this.state.readPositionByUserId);
 };
 
@@ -923,11 +1111,18 @@ function useConversation(options) {
     hasLoaded: field("hasLoaded"),
     error: field("error"),
     currentUserId: field("currentUserId"),
+    editingMessage: field("editingMessage"),
+    canEditMessages: field("canEditMessages"),
+    canDeleteMessages: field("canDeleteMessages"),
     readerIdsFor: (message) => store.readerIdsFor(message),
     loadInitial: () => store.loadInitial(),
     refresh: () => store.refresh(),
     loadOlderMessages: () => store.loadOlderMessages(),
     sendMessage: (input) => store.sendMessage(input),
+    startEditing: (messageId) => store.startEditing(messageId),
+    cancelEditing: () => store.cancelEditing(),
+    saveEdit: (text) => store.saveEdit(text),
+    deleteMessage: (messageId) => store.deleteMessage(messageId),
     markRead: () => store.markRead(),
     updateTyping: (isTyping) => store.updateTyping(isTyping),
     setVisible: (value) => {
@@ -939,6 +1134,7 @@ function useConversation(options) {
 }
 
 // src/components/message-list.ts
+import { isEditedMessage } from "@convokitapp/sdk";
 import {
   Check,
   CheckCheck,
@@ -948,7 +1144,9 @@ import {
   ImageOff,
   LoaderCircle,
   MapPin,
-  MessageCircle
+  MessageCircle,
+  Pencil,
+  Trash2
 } from "@lucide/vue";
 import {
   computed as computed2,
@@ -1010,6 +1208,10 @@ var MessageListView = defineComponent2({
     isLoadingOlder: { type: Boolean, default: false },
     error: { type: null, required: false },
     onAttachmentClick: { type: Function, default: void 0 },
+    onEditMessage: { type: Function, default: void 0 },
+    onDeleteMessage: { type: Function, default: void 0 },
+    canEditMessage: { type: Function, default: void 0 },
+    confirmDelete: { type: Function, default: void 0 },
     scrollElement: { type: Object, default: void 0 },
     paginationThreshold: { type: Number, default: 240 },
     reverse: { type: Boolean, default: true },
@@ -1017,9 +1219,10 @@ var MessageListView = defineComponent2({
     formatTime: { type: Function, default: formatMessageTime },
     imageLoading: { type: String, default: "lazy" }
   },
-  emits: ["load-older", "attachment-click"],
+  emits: ["load-older", "attachment-click", "edit-message", "delete-message"],
   setup(props, { attrs, emit, slots }) {
     const internalElement = ref(null);
+    const confirming = ref(null);
     let requestInFlight = false;
     let lastRequestedLength = null;
     let previousMessageCount = 0;
@@ -1059,16 +1262,77 @@ var MessageListView = defineComponent2({
         }
       }
     }, { flush: "post", immediate: true });
+    const viewerRole = computed2(() => props.conversation.membership?.role ?? props.conversation.participants.find((participant) => participant.appUserId === props.currentUserId || participant.id === props.currentUserId)?.role);
+    const remove = async (message) => {
+      if (props.confirmDelete && !await props.confirmDelete(message)) return false;
+      return await props.onDeleteMessage?.(message) !== false;
+    };
     const renderMessage = (message, index) => {
       const isCurrentUser = message.senderId === props.currentUserId;
       const sender = participants.value.get(message.senderId);
       const isPending = isConvoKitPendingMessage(message);
       const readerIds = isPending ? /* @__PURE__ */ new Set() : props.readersResolver ? props.readersResolver(message) : readerIdsFor(message, props.readAtByUserId, props.readPositionByUserId);
-      const slotProps = { message, chronologicalIndex: index, isCurrentUser, sender, readerIds };
+      const isEdited = !isPending && isEditedMessage(message);
+      const eligible = !isPending && (props.canEditMessage ? props.canEditMessage(message) : isCurrentUser && viewerRole.value !== "READ");
+      const canEdit = eligible && !!props.onEditMessage;
+      const canDelete = eligible && !!props.onDeleteMessage;
+      const edit = () => {
+        props.onEditMessage?.(message);
+      };
+      const slotProps = {
+        message,
+        chronologicalIndex: index,
+        isCurrentUser,
+        sender,
+        readerIds,
+        isEdited,
+        canEdit,
+        canDelete,
+        ...canEdit ? { edit } : {},
+        ...canDelete ? { remove: () => remove(message) } : {}
+      };
       const custom = slots.message?.(slotProps);
       if (custom) return h2("div", { key: message.id, role: "listitem" }, custom);
       const currentAppearance = appearance();
       const messagePart = isCurrentUser ? "outgoingMessage" : "incomingMessage";
+      const iconButton = (label, onClick, icon) => h2("button", {
+        type: "button",
+        "aria-label": label,
+        onClick,
+        class: partClass("button", currentAppearance, "ckui-icon-button"),
+        style: partStyle("button", currentAppearance)
+      }, [icon]);
+      const actions = canEdit || canDelete ? h2("div", { class: "ckui-message-actions" }, [
+        ...canEdit ? [iconButton("Edit message", edit, h2(Pencil, { size: 16, "aria-hidden": "true" }))] : [],
+        ...canDelete ? [iconButton("Delete message", () => {
+          if (props.confirmDelete) void remove(message);
+          else confirming.value = message.id;
+        }, h2(Trash2, { size: 16, "aria-hidden": "true" }))] : []
+      ]) : null;
+      const confirm = canDelete && confirming.value === message.id ? h2("div", {
+        class: "ckui-message-confirm",
+        role: "group",
+        "aria-label": "Delete this message?"
+      }, [
+        h2("span", "Delete this message?"),
+        h2("button", {
+          type: "button",
+          class: "ckui-link-button",
+          "aria-label": "Confirm delete",
+          onClick: () => {
+            confirming.value = null;
+            void props.onDeleteMessage?.(message);
+          }
+        }, "Delete"),
+        h2("button", {
+          type: "button",
+          class: "ckui-link-button",
+          "aria-label": "Cancel delete",
+          onClick: () => {
+            confirming.value = null;
+          }
+        }, "Cancel")
+      ]) : null;
       const mediaNodes = message.media.map((media, mediaIndex) => {
         const open = props.onAttachmentClick ? () => {
           props.onAttachmentClick?.(media, message);
@@ -1092,15 +1356,19 @@ var MessageListView = defineComponent2({
           style: [props.styles?.message, props.styles?.[messagePart]],
           "data-message-id": message.id
         }, [
+          // Spread, not null: an absent action/label/prompt must not leave a comment node (0.7 markup stays byte-identical).
+          ...actions ? [actions] : [],
           h2("div", { class: "ckui-message-bubble" }, [
             !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("span", { class: "ckui-message-time" }, [
               isPending ? "Sending\u2026" : props.formatTime(message.createdAt),
+              ...isEdited ? [h2("span", { class: "ckui-message-edited", "aria-label": "Edited" }, "Edited")] : [],
               isCurrentUser && !isPending ? readerIds.size > 0 ? h2(CheckCheck, { size: 14, "aria-label": "Read" }) : h2(Check, { size: 14, "aria-label": "Sent" }) : null
             ])
           ]),
+          ...confirm ? [confirm] : [],
           isCurrentUser && !isPending ? slots["read-receipt"]?.(receiptSlotProps) ?? h2("div", {
             class: partClass("receipt", currentAppearance, "ckui-read-receipt"),
             style: partStyle("receipt", currentAppearance)
@@ -1189,6 +1457,13 @@ var viewProps = {
   onTypingChange: { type: Function, default: void 0 },
   onAddAttachment: { type: Function, default: void 0 },
   onAttachmentClick: { type: Function, default: void 0 },
+  editingMessage: { type: Object, default: null },
+  onEditMessage: { type: Function, default: void 0 },
+  onSaveEdit: { type: Function, default: void 0 },
+  onCancelEdit: { type: Function, default: void 0 },
+  onDeleteMessage: { type: Function, default: void 0 },
+  canEditMessage: { type: Function, default: void 0 },
+  confirmDelete: { type: Function, default: void 0 },
   isInitialLoading: { type: Boolean, default: false },
   isLoadingOlder: { type: Boolean, default: false },
   isSending: { type: Boolean, default: false },
@@ -1208,6 +1483,9 @@ var viewProps = {
   defaultDraft: { type: String, default: "" },
   onDraftChange: { type: Function, default: void 0 }
 };
+function editingSummary(message) {
+  return message.text?.trim() || (message.media.length === 1 ? "1 attachment" : `${message.media.length} attachments`);
+}
 function typingLabel(userIds, displayNameForUser) {
   const names = [...userIds].map(displayNameForUser);
   if (names.length === 0) return "";
@@ -1227,7 +1505,11 @@ var ConversationView = defineComponent3({
     "load-older",
     "add-attachment",
     "attachment-click",
-    "update:modelValue"
+    "update:modelValue",
+    "edit-message",
+    "save-edit",
+    "cancel-edit",
+    "delete-message"
   ],
   setup(props, { attrs, emit, slots }) {
     const internalDraft = ref2(props.defaultDraft);
@@ -1240,15 +1522,57 @@ var ConversationView = defineComponent3({
     });
     const draft = () => props.modelValue ?? internalDraft.value;
     let latestDraft = draft();
-    const setDraft = (value) => {
+    let stash;
+    let saving = false;
+    const setDraft = (value, typing = true) => {
       latestDraft = value;
       if (props.modelValue === void 0) internalDraft.value = value;
       props.onDraftChange?.(value);
       emit("update:modelValue", value);
-      const isTyping = value.trim().length > 0;
-      void props.onTypingChange?.(isTyping);
+      if (typing) void props.onTypingChange?.(value.trim().length > 0);
+    };
+    const enterEdit = (message) => {
+      if (stash === void 0) stash = draft();
+      setDraft(message.text ?? "", false);
+    };
+    const leaveEdit = (message, restore) => {
+      if (stash === void 0) return;
+      const saved = stash;
+      stash = void 0;
+      const current = draft();
+      if (restore === "always" || current.trim() === "" || current === (message.text ?? "")) setDraft(saved);
     };
+    watch3(() => props.editingMessage, (next, previous) => {
+      if (next && (!previous || previous.id !== next.id)) enterEdit(next);
+      else if (!next && previous && !saving) leaveEdit(previous, "unchanged");
+    }, { immediate: true });
+    const cancelEdit = () => {
+      const editing = props.editingMessage;
+      if (!editing) return;
+      leaveEdit(editing, "always");
+      props.onCancelEdit?.();
+    };
+    const canSave = (editing) => draft().trim().length > 0 || editing.media.length > 0;
     const submit = async () => {
+      const editing = props.editingMessage;
+      if (editing) {
+        const text2 = draft().trim();
+        if (!canSave(editing) || props.isSending || submitting.value) return;
+        submitting.value = true;
+        saving = true;
+        try {
+          const saved = await props.onSaveEdit?.(editing, text2);
+          if (saved === false) {
+            if (props.editingMessage === null) leaveEdit(editing, "unchanged");
+            return;
+          }
+          leaveEdit(editing, "always");
+        } finally {
+          saving = false;
+          submitting.value = false;
+        }
+        return;
+      }
       const originalDraft = draft();
       const text = originalDraft.trim();
       if (!text || props.isSending || submitting.value) return;
@@ -1317,6 +1641,7 @@ var ConversationView = defineComponent3({
       }, typingLabel(props.typingUserIds, nameForUser));
     };
     const renderComposer = () => {
+      const editing = props.editingMessage;
       const slotProps = {
         value: draft(),
         setValue: setDraft,
@@ -1324,16 +1649,27 @@ var ConversationView = defineComponent3({
         send: () => {
           void submit();
         },
-        ...props.onAddAttachment ? { addAttachment } : {}
+        ...props.onAddAttachment ? { addAttachment } : {},
+        ...editing ? { editing, cancelEdit } : {}
       };
+      const busy = props.isSending || submitting.value;
       return slots.composer?.(slotProps) ?? h3("form", {
-        class: partClass("composer", appearance(), "ckui-composer"),
+        class: cx(partClass("composer", appearance(), "ckui-composer"), editing && !props.unstyled && "ckui-composer--editing"),
         style: partStyle("composer", appearance()),
         onSubmit: (event) => {
           event.preventDefault();
           void submit();
         }
       }, [
+        // Spread, not null: outside edit mode the composer markup stays byte-identical to 0.7.
+        ...editing ? [h3("div", { class: "ckui-composer__editing", role: "status" }, [
+          h3(Pencil2, { size: 14, "aria-hidden": "true" }),
+          h3("span", { class: "ckui-composer__editing-body" }, [
+            h3("strong", "Editing message"),
+            h3("span", editingSummary(editing))
+          ]),
+          h3("button", { type: "button", class: "ckui-link-button", "aria-label": "Cancel editing", onClick: cancelEdit }, "Cancel")
+        ])] : [],
         props.onAddAttachment ? h3("button", {
           type: "button",
           "aria-label": "Add attachment",
@@ -1362,15 +1698,19 @@ var ConversationView = defineComponent3({
               event.preventDefault();
               void submit();
             }
+            if (event.key === "Escape" && props.editingMessage) {
+              event.preventDefault();
+              cancelEdit();
+            }
           }
         }),
         h3("button", {
           type: "submit",
-          "aria-label": "Send message",
-          disabled: !draft().trim() || props.isSending || submitting.value,
+          "aria-label": editing ? "Save message" : "Send message",
+          disabled: (editing ? !canSave(editing) : !draft().trim()) || busy,
           class: partClass("button", appearance(), "ckui-send-button"),
           style: partStyle("button", appearance())
-        }, [props.isSending || submitting.value ? h3(LoaderCircle2, { class: "ckui-spin", size: 18, "aria-hidden": "true" }) : h3(Send, { size: 18, "aria-hidden": "true" })])
+        }, [busy ? h3(LoaderCircle2, { class: "ckui-spin", size: 18, "aria-hidden": "true" }) : h3(editing ? Check2 : Send, { size: 18, "aria-hidden": "true" })])
       ]);
     };
     return () => {
@@ -1419,6 +1759,12 @@ var ConversationView = defineComponent3({
         ...props.onAttachmentClick ? { onAttachmentClick: (media, message) => {
           props.onAttachmentClick?.(media, message);
         } } : {},
+        ...props.onEditMessage ? { onEditMessage: (message) => {
+          props.onEditMessage?.(message);
+        } } : {},
+        ...props.onDeleteMessage ? { onDeleteMessage: (message) => props.onDeleteMessage?.(message) } : {},
+        ...props.canEditMessage ? { canEditMessage: props.canEditMessage } : {},
+        ...props.confirmDelete ? { confirmDelete: props.confirmDelete } : {},
         reverse: props.reverseMessages,
         stickToBottom: props.stickToBottom,
         paginationThreshold: props.paginationThreshold,
@@ -1449,6 +1795,11 @@ var Conversation = defineComponent3({
     messages: { type: Array, default: () => [] },
     currentUserId: { type: String, default: "" },
     onSendMessage: { type: Function, default: void 0 },
+    editingMessage: { type: Object, default: void 0 },
+    onEditMessage: { type: Function, default: void 0 },
+    onSaveEdit: { type: Function, default: void 0 },
+    onCancelEdit: { type: Function, default: void 0 },
+    onDeleteMessage: { type: Function, default: void 0 },
     client: { type: Object, required: true },
     conversationId: { type: String, required: true },
     messagePageSize: { type: Number, default: 30 },
@@ -1458,7 +1809,21 @@ var Conversation = defineComponent3({
     autoLoad: { type: Boolean, default: true },
     onControllerChange: { type: Function, default: void 0 }
   },
-  emits: ["controller-change", "send-message", "typing-change", "back", "refresh", "load-older", "add-attachment", "attachment-click", "update:modelValue"],
+  emits: [
+    "controller-change",
+    "send-message",
+    "typing-change",
+    "back",
+    "refresh",
+    "load-older",
+    "add-attachment",
+    "attachment-click",
+    "update:modelValue",
+    "edit-message",
+    "save-edit",
+    "cancel-edit",
+    "delete-message"
+  ],
   setup(props, { attrs, emit, expose, slots }) {
     const controller = useConversation({
       client: () => props.client,
@@ -1522,6 +1887,11 @@ var Conversation = defineComponent3({
         isSending: _isSending,
         hasOlderMessages: _hasOlderMessages,
         error: _error,
+        editingMessage: _editingMessage,
+        onEditMessage: _onEditMessage,
+        onSaveEdit: _onSaveEdit,
+        onCancelEdit: _onCancelEdit,
+        onDeleteMessage: _onDeleteMessage,
         ...forwarded
       } = props;
       return h3(ConversationView, {
@@ -1545,6 +1915,28 @@ var Conversation = defineComponent3({
         isSending: controller.isSending.value,
         hasOlderMessages: controller.hasOlderMessages.value,
         ...controller.error.value == null ? {} : { error: controller.error.value },
+        // Edit mode is the store's; the actions render only while the adapter supports them (0.8.0).
+        editingMessage: controller.editingMessage.value,
+        ...controller.canEditMessages.value ? {
+          onEditMessage: (message) => {
+            emit("edit-message", message);
+            controller.startEditing(message.id);
+          },
+          onSaveEdit: async (message, text) => {
+            emit("save-edit", message, text);
+            return controller.saveEdit(text);
+          },
+          onCancelEdit: () => {
+            emit("cancel-edit");
+            controller.cancelEditing();
+          }
+        } : {},
+        ...controller.canDeleteMessages.value ? {
+          onDeleteMessage: async (message) => {
+            emit("delete-message", message);
+            return controller.deleteMessage(message.id);
+          }
+        } : {},
         "onUpdate:modelValue": (value) => emit("update:modelValue", value),
         ...props.onBack ? { onBack: () => {
           props.onBack?.();
@@ -1573,7 +1965,7 @@ import {
 } from "vue";
 
 // src/composables/use-conversation-list.ts
-import { computed as computed3, getCurrentScope as getCurrentScope2, onScopeDispose as onScopeDispose2, shallowRef as shallowRef2, toValue as toValue2, watch as watch3 } from "vue";
+import { computed as computed3, getCurrentScope as getCurrentScope2, onScopeDispose as onScopeDispose2, shallowRef as shallowRef2, toValue as toValue2, watch as watch4 } from "vue";
 
 // src/conversation-list-store.ts
 var defaultActivityRefreshWindowMs = 500;
@@ -2031,7 +2423,7 @@ function useConversationList(options) {
   let store = createStore();
   const snapshot = shallowRef2(store.getSnapshot());
   let unsubscribe;
-  const stop = watch3(
+  const stop = watch4(
     () => [toValue2(options.client), toValue2(options.client).sessionIdentity],
     () => {
       store.dispose();