bug fix: changing and regenerating variations should update the ui

src/components/message/ChatBoxMessage.tsx

@@ -56,6 +56,7 @@ export const ChatBoxMessage = observer(
     if (!message.showVariations) {
       return (
         <MessageOrEditedMessage
+          key={message.selectedVariation.id}
           message={message}
           {...props}
           messageVariant={message.selectedVariation}

src/containers/ChatBox.tsx

@@ -77,12 +77,12 @@ const ChatBox = observer(() => {
         {chat.messages.length > 0 ? (
           chat.messages.map(message => (
             <ChatBoxMessage
-              key={message.id}
+              key={message.selectedVariation.id}
               message={message}
               disableRegeneration={isGettingData}
               disableEditing={isEditingMessage}
               shouldDimMessage={isEditingMessage}
-              shouldScrollIntoView={message.id === lightboxMessageId}
+              shouldScrollIntoView={message.selectedVariation.id === lightboxMessageId}
               variationIdToEdit={variationIdToEdit}
             />
           ))

src/core/chat/ChatViewModel.ts

@@ -1,4 +1,4 @@
-import { makeAutoObservable } from 'mobx'
+import { isObservable, makeAutoObservable } from 'mobx'
 import _ from 'lodash'
 
 import EntityCache from '~/utils/EntityCache'
@@ -28,11 +28,11 @@ export class ChatViewModel {
   }
 
   async fetchMessages() {
-    messageTable
-      .findByIds(this.source.messageIds)
-      .then(loadedMessages =>
-        loadedMessages.forEach(message => this.messageViewModelCache.put(message)),
-      )
+    messageTable.findByIds(this.source.messageIds).then(loadedMessages =>
+      loadedMessages.forEach(message => {
+        return this.messageViewModelCache.put(message, false)
+      }),
+    )
   }
 
   get id() {

src/core/message/MessageViewModel.ts

@@ -107,7 +107,7 @@ export class MessageViewModel {
   }
 
   async setVariation(variation?: MessageViewModel) {
-    return messageTable.put({ ...this.source, selectedVariationId: variation?.id })
+    return await messageTable.put({ ...this.source, selectedVariationId: variation?.id })
   }
 
   async removeVariation(variation: MessageViewModel) {
@@ -127,14 +127,13 @@ export class MessageViewModel {
   async addVariation(variation: MessageModel) {
     const variationIds = this.source.variationIds.concat(variation.id)
 
-    // add variation
-    await messageTable.put(variation)
+    // add variation to cache
+    const viewModel = this.variationViewModelCache.put(variation)
 
     // update message with variation id
     await messageTable.put({ ...this.source, selectedVariationId: variation.id, variationIds })
 
-    // add variation to cache
-    return this.variationViewModelCache.put(variation)
+    return viewModel
   }
 
   async addImages(imageDatums?: string[]) {
@@ -156,11 +155,11 @@ export class MessageViewModel {
   }
 
   async selectPreviousVariation() {
-    return this.update({ selectedVariationId: this.selectedVariationHandler.previousVariation?.id })
+    return await this.setVariation(this.selectedVariationHandler.previousVariation)
   }
 
   async selectNextVariation() {
     console.log('selecting next variation: ', this.selectedVariationHandler.nextVariation?.id)
-    return this.update({ selectedVariationId: this.selectedVariationHandler.nextVariation?.id })
+    return await this.setVariation(this.selectedVariationHandler.nextVariation)
   }
 }