feat: optimistic updates for message updating proper queueing

isekovanic · isekovanic · commit 6db76b8a01c3 · 2026-04-02T16:42:35.000+02:00
diff --git a/package/src/__tests__/offline-support/optimistic-update.js b/package/src/__tests__/offline-support/optimistic-update.js
@@ -15,6 +15,7 @@ import { getOrCreateChannelApi } from '../../mock-builders/api/getOrCreateChanne
 import { sendMessageApi } from '../../mock-builders/api/sendMessage';
 import { sendReactionApi } from '../../mock-builders/api/sendReaction';
 import { useMockedApis } from '../../mock-builders/api/useMockedApis';
+import { generateFileReference } from '../../mock-builders/attachments';
 import dispatchConnectionChangedEvent from '../../mock-builders/event/connectionChanged';
 import { generateChannelResponse } from '../../mock-builders/generator/channel';
 import { generateMember } from '../../mock-builders/generator/member';
@@ -397,6 +398,182 @@ export const OptimisticUpdates = () => {
       });
     });
 
+    describe('edit message', () => {
+      it('should keep the optimistic edit in state and DB if the LLC queues the edit', async () => {
+        const message = channel.state.messages[0];
+        const editedText = 'edited while offline';
+
+        render(
+          <Chat client={chatClient} enableOfflineSupport>
+            <Channel
+              channel={channel}
+              doUpdateMessageRequest={async (_channelId, localMessage, options) => {
+                await chatClient.offlineDb.addPendingTask({
+                  channelId: channel.id,
+                  channelType: channel.type,
+                  messageId: message.id,
+                  payload: [localMessage, undefined, options],
+                  type: 'update-message',
+                });
+                return {
+                  message: {
+                    ...localMessage,
+                    message_text_updated_at: new Date(),
+                    updated_at: new Date(),
+                  },
+                };
+              }}
+            >
+              <CallbackEffectWithContext
+                callback={async ({ editMessage }) => {
+                  await editMessage({
+                    localMessage: {
+                      ...message,
+                      cid: channel.cid,
+                      text: editedText,
+                    },
+                    options: {},
+                  });
+                }}
+                context={MessageInputContext}
+              >
+                <View testID='children' />
+              </CallbackEffectWithContext>
+            </Channel>
+          </Chat>,
+        );
+
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
+
+        await waitFor(async () => {
+          const updatedMessage = channel.state.findMessage(message.id);
+          const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
+          const dbMessages = await BetterSqlite.selectFromTable('messages');
+          const dbMessage = dbMessages.find((row) => row.id === message.id);
+
+          expect(updatedMessage.text).toBe(editedText);
+          expect(updatedMessage.message_text_updated_at).toBeTruthy();
+          expect(pendingTasksRows).toHaveLength(1);
+          expect(pendingTasksRows[0].type).toBe('update-message');
+          expect(dbMessage.text).toBe(editedText);
+          expect(dbMessage.messageTextUpdatedAt).toBeTruthy();
+        });
+      });
+
+      it('should rollback the optimistic edit if the request fails and no replayable task exists', async () => {
+        const message = channel.state.messages[0];
+        const originalText = message.text;
+
+        render(
+          <Chat client={chatClient} enableOfflineSupport>
+            <Channel
+              channel={channel}
+              doUpdateMessageRequest={() => {
+                throw new Error('validation');
+              }}
+            >
+              <CallbackEffectWithContext
+                callback={async ({ editMessage }) => {
+                  try {
+                    await editMessage({
+                      localMessage: {
+                        ...message,
+                        cid: channel.cid,
+                        text: 'should rollback',
+                      },
+                      options: {},
+                    });
+                  } catch (e) {
+                    // do nothing
+                  }
+                }}
+                context={MessageInputContext}
+              >
+                <View testID='children' />
+              </CallbackEffectWithContext>
+            </Channel>
+          </Chat>,
+        );
+
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
+
+        await waitFor(async () => {
+          const updatedMessage = channel.state.findMessage(message.id);
+          const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
+          const dbMessages = await BetterSqlite.selectFromTable('messages');
+          const dbMessage = dbMessages.find((row) => row.id === message.id);
+
+          expect(updatedMessage.text).toBe(originalText);
+          expect(pendingTasksRows).toHaveLength(0);
+          expect(dbMessage.text).toBe(originalText);
+        });
+      });
+
+      it('should keep the optimistic edit for attachment updates without auto-queueing', async () => {
+        const message = channel.state.messages[0];
+        const editedText = 'edited attachment message';
+        const localUri = 'file://edited-attachment.png';
+
+        render(
+          <Chat client={chatClient} enableOfflineSupport>
+            <Channel
+              channel={channel}
+              doUpdateMessageRequest={() => {
+                throw new Error('offline');
+              }}
+            >
+              <CallbackEffectWithContext
+                callback={async ({ editMessage }) => {
+                  try {
+                    await editMessage({
+                      localMessage: {
+                        ...message,
+                        attachments: [
+                          {
+                            asset_url: localUri,
+                            originalFile: generateFileReference({
+                              name: 'edited-attachment.png',
+                              type: 'image/png',
+                              uri: localUri,
+                            }),
+                            type: 'file',
+                          },
+                        ],
+                        cid: channel.cid,
+                        text: editedText,
+                      },
+                      options: {},
+                    });
+                  } catch (e) {
+                    // do nothing
+                  }
+                }}
+                context={MessageInputContext}
+              >
+                <View testID='children' />
+              </CallbackEffectWithContext>
+            </Channel>
+          </Chat>,
+        );
+
+        await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
+
+        await waitFor(async () => {
+          const updatedMessage = channel.state.findMessage(message.id);
+          const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
+          const dbMessages = await BetterSqlite.selectFromTable('messages');
+          const dbMessage = dbMessages.find((row) => row.id === message.id);
+          const storedAttachments = JSON.parse(dbMessage.attachments);
+
+          expect(updatedMessage.text).toBe(editedText);
+          expect(updatedMessage.attachments[0].asset_url).toBe(localUri);
+          expect(pendingTasksRows).toHaveLength(0);
+          expect(dbMessage.text).toBe(editedText);
+          expect(storedAttachments[0].asset_url).toBe(localUri);
+        });
+      });
+    });
+
     describe('pending task execution', () => {
       it('pending task should be executed after connection is recovered', async () => {
         const message = channel.state.messages[0];
diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx
@@ -1560,10 +1560,53 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
   );
 
   const editMessage: InputMessageInputContextValue['editMessage'] = useStableCallback(
-    ({ localMessage, options }) =>
-      doUpdateMessageRequest
-        ? doUpdateMessageRequest(channel?.cid || '', localMessage, options)
-        : client.updateMessage(localMessage, undefined, options),
+    async ({ localMessage, options }) => {
+      if (!channel) {
+        throw new Error('Channel has not been initialized');
+      }
+
+      const cid = channel.cid;
+      const currentMessage = channel.state.findMessage(localMessage.id, localMessage.parent_id);
+      const optimisticEditedAt = new Date();
+      const optimisticEditedAtString = optimisticEditedAt.toISOString();
+      const optimisticMessage = {
+        ...currentMessage,
+        ...localMessage,
+        cid,
+        message_text_updated_at: optimisticEditedAtString,
+        updated_at: optimisticEditedAt,
+      } as unknown as LocalMessage;
+
+      updateMessage(optimisticMessage);
+      threadInstance?.updateParentMessageOrReplyLocally(
+        optimisticMessage as unknown as MessageResponse,
+      );
+      client.offlineDb?.executeQuerySafely(
+        (db) =>
+          db.updateMessage({
+            message: { ...optimisticMessage, cid },
+          }),
+        { method: 'updateMessage' },
+      );
+
+      const response = doUpdateMessageRequest
+        ? await doUpdateMessageRequest(cid, localMessage, options)
+        : await client.updateMessage(localMessage, undefined, options);
+
+      if (response?.message) {
+        updateMessage(response.message);
+        threadInstance?.updateParentMessageOrReplyLocally(response.message);
+        client.offlineDb?.executeQuerySafely(
+          (db) =>
+            db.updateMessage({
+              message: { ...response.message, cid },
+            }),
+          { method: 'updateMessage' },
+        );
+      }
+
+      return response;
+    },
   );
 
   /**
diff --git a/package/src/store/OfflineDB.ts b/package/src/store/OfflineDB.ts
@@ -67,6 +67,8 @@ export class OfflineDB extends AbstractOfflineDB {
 
   addPendingTask = api.addPendingTask;
 
+  updatePendingTask = api.updatePendingTask;
+
   deletePendingTask = api.deletePendingTask;
 
   deleteReaction = api.deleteReaction;
diff --git a/package/src/store/apis/__tests__/updatePendingTask.test.ts b/package/src/store/apis/__tests__/updatePendingTask.test.ts
@@ -0,0 +1,66 @@
+import { v4 as uuidv4 } from 'uuid';
+
+import { addPendingTask, getPendingTasks, updatePendingTask } from '..';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { BetterSqlite } from '../../../test-utils/BetterSqlite';
+import { SqliteClient } from '../../SqliteClient';
+
+describe('updatePendingTask', () => {
+  beforeEach(async () => {
+    await SqliteClient.initializeDatabase();
+    await BetterSqlite.openDB();
+  });
+
+  afterEach(() => {
+    BetterSqlite.dropAllTables();
+    BetterSqlite.closeDB();
+    jest.clearAllMocks();
+  });
+
+  it('should replace an existing pending task row by id without changing its createdAt ordering', async () => {
+    const channelId = uuidv4();
+    const originalMessage = generateMessage({
+      cid: `messaging:${channelId}`,
+      id: uuidv4(),
+      text: 'original text',
+    });
+
+    await addPendingTask({
+      channelId,
+      channelType: 'messaging',
+      messageId: originalMessage.id,
+      payload: [originalMessage, {}],
+      type: 'send-message',
+    });
+
+    const [originalRow] = await BetterSqlite.selectFromTable('pendingTasks');
+    const [originalTask] = await getPendingTasks({ messageId: originalMessage.id });
+
+    const editedMessage = {
+      ...originalMessage,
+      text: 'edited text',
+    };
+
+    await updatePendingTask({
+      id: originalTask.id,
+      task: {
+        channelId,
+        channelType: 'messaging',
+        messageId: originalMessage.id,
+        payload: [editedMessage, {}],
+        type: 'send-message',
+      },
+    });
+
+    const [updatedRow] = await BetterSqlite.selectFromTable('pendingTasks');
+    const [updatedTask] = await getPendingTasks({ messageId: originalMessage.id });
+
+    expect(updatedRow.id).toBe(originalRow.id);
+    expect(updatedRow.createdAt).toBe(originalRow.createdAt);
+    expect(updatedRow.type).toBe('send-message');
+    expect(JSON.parse(updatedRow.payload)[0].text).toBe('edited text');
+    expect(updatedTask.id).toBe(originalTask.id);
+    expect(updatedTask.type).toBe('send-message');
+    expect(updatedTask.payload[0].text).toBe('edited text');
+  });
+});
diff --git a/package/src/store/apis/index.ts b/package/src/store/apis/index.ts
@@ -13,6 +13,7 @@ export * from './getLastSyncedAt';
 export * from './getMembers';
 export * from './getReads';
 export * from './updateMessage';
+export * from './updatePendingTask';
 export * from './updateReaction';
 export * from './insertReaction';
 export * from './deleteReaction';
diff --git a/package/src/store/apis/updatePendingTask.ts b/package/src/store/apis/updatePendingTask.ts
@@ -0,0 +1,25 @@
+import type { DBUpdatePendingTaskType } from 'stream-chat';
+
+import { mapTaskToStorable } from '../mappers/mapTaskToStorable';
+import { createUpdateQuery } from '../sqlite-utils/createUpdateQuery';
+import { SqliteClient } from '../SqliteClient';
+
+export const updatePendingTask = async ({ id, task }: DBUpdatePendingTaskType) => {
+  const storableTask = mapTaskToStorable(task);
+  const { createdAt, id: taskId, ...nextTask } = storableTask;
+  void createdAt;
+  void taskId;
+
+  const query = createUpdateQuery('pendingTasks', nextTask, {
+    id,
+  });
+
+  SqliteClient.logger?.('info', 'updatePendingTask', {
+    id,
+    task: nextTask,
+  });
+
+  await SqliteClient.executeSql.apply(null, query);
+
+  return [query];
+};
