fix(chat): stabilize message identities

src/app/chat/chat-screen.tsx

@@ -89,7 +89,10 @@ export function ChatScreen() {
     () =>
       imageMessageId
         ? visibleMessages.find(
-            (item) => item.id === imageMessageId && item.imageUrl,
+            (item) =>
+              (item.displayId === imageMessageId ||
+                item.remoteId === imageMessageId) &&
+              item.imageUrl,
           ) ?? null
         : null,
     [imageMessageId, visibleMessages],
@@ -175,24 +178,46 @@ export function ChatScreen() {
     state.characterErrorCode,
   ]);
 
-  function handleUnlockPrivateMessage(messageId: string): void {
-    unlockCoordinator.requestMessageUnlock(messageId, "private");
-  }
-
-  function handleUnlockVoiceMessage(messageId: string): void {
-    unlockCoordinator.requestMessageUnlock(messageId, "voice");
-  }
-
-  function handleUnlockImageMessage(messageId: string): void {
-    unlockCoordinator.requestMessageUnlock(messageId, "image");
-  }
-
-  function handleOpenImage(messageId: string): void {
-    router.push(buildChatImageOverlayUrl(messageId, characterRoutes.chat), {
-      scroll: false,
+  function handleUnlockPrivateMessage(
+    displayMessageId: string,
+    remoteMessageId?: string,
+  ): void {
+    unlockCoordinator.requestMessageUnlock({
+      displayMessageId,
+      remoteMessageId,
+      kind: "private",
     });
   }
 
+  function handleUnlockVoiceMessage(
+    displayMessageId: string,
+    remoteMessageId?: string,
+  ): void {
+    unlockCoordinator.requestMessageUnlock({
+      displayMessageId,
+      remoteMessageId,
+      kind: "voice",
+    });
+  }
+
+  function handleUnlockImageMessage(
+    displayMessageId: string,
+    remoteMessageId?: string,
+  ): void {
+    unlockCoordinator.requestMessageUnlock({
+      displayMessageId,
+      remoteMessageId,
+      kind: "image",
+    });
+  }
+
+  function handleOpenImage(displayMessageId: string): void {
+    router.push(
+      buildChatImageOverlayUrl(displayMessageId, characterRoutes.chat),
+      { scroll: false },
+    );
+  }
+
   function handleCloseImageViewer(): void {
     router.replace(
       buildChatWithoutImageOverlayUrl(searchParams, characterRoutes.chat),
@@ -201,8 +226,12 @@ export function ChatScreen() {
   }
 
   function handleUnlockImagePaywall(): void {
-    if (!imageMessageId) return;
-    unlockCoordinator.requestMessageUnlock(imageMessageId, "image");
+    if (!selectedImageMessage) return;
+    unlockCoordinator.requestMessageUnlock({
+      displayMessageId: selectedImageMessage.displayId,
+      remoteMessageId: selectedImageMessage.remoteId,
+      kind: "image",
+    });
   }
 
   return (
@@ -279,12 +308,12 @@ export function ChatScreen() {
         {selectedImageMessage?.imageUrl ? (
           <FullscreenImageViewer
             characterId={state.characterId}
-            messageId={selectedImageMessage.id}
+            remoteMessageId={selectedImageMessage.remoteId}
             imageUrl={selectedImageMessage.imageUrl}
             imagePaywalled={selectedImageMessage.imagePaywalled === true}
             isUnlockingImagePaywall={
               state.isUnlockingMessage &&
-              state.unlockingMessageId === selectedImageMessage.id
+              state.unlockingMessageId === selectedImageMessage.displayId
             }
             onUnlockImagePaywall={handleUnlockImagePaywall}
             onClose={handleCloseImageViewer}