fix for displaying avatar and name when temporary html element is bei…

…ng removed
OvidijusParsiunas · Sep 8, 2024 · d591ebf · d591ebf
1 parent 7898ff5
commit d591ebf
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/component/src/views/chat/messages/messageUtils.ts b/component/src/views/chat/messages/messageUtils.ts
@@ -104,6 +104,11 @@ export class MessageUtils {
     if (names) Name.hide(innerContainer);
   }
 
+  public static revealRoleElements(innerContainer: HTMLElement, avatars?: Avatars, names?: Names) {
+    if (avatars) Avatar.reveal(innerContainer);
+    if (names) Name.reveal(innerContainer);
+  }
+
   public static updateRefArr<T>(arr: Array<T>, item: T, isTop: boolean) {
     if (isTop) {
       arr.unshift(item);

diff --git a/component/src/views/chat/messages/messagesBase.ts b/component/src/views/chat/messages/messagesBase.ts
@@ -109,12 +109,27 @@ export class MessagesBase {
     const lastMessageElements = this.messageElementRefs[this.messageElementRefs.length - 1];
     LoadingHistory.changeFullViewToSmall(this, lastMessageElements);
     if (MessagesBase.isTemporaryElement(lastMessageElements)) {
+      this.revealRoleElementsIfTempRemoved(lastMessageElements, role);
       lastMessageElements.outerContainer.remove();
       this.messageElementRefs.pop();
     }
     return this.createMessageElements(text, role, isTop);
   }
 
+  // this can be tested by having an ai message, then a temp ai message with html that submits new user message:
+  // https://github.com/OvidijusParsiunas/deep-chat/issues/258
+  // prettier-ignore
+  private revealRoleElementsIfTempRemoved(tempElements: MessageElements, newRole: string) {
+    if ((this._avatars || this._names) && HTMLDeepChatElements.isElementTemporary(tempElements)) {
+      // if prev message before temp has a different role to the new one, make sure its avatar is revealed
+      const prevMessageElements = this.messageElementRefs[this.messageElementRefs.length - 2];
+      if (prevMessageElements && this.messages[this.messages.length - 1]
+          && !tempElements.bubbleElement.classList.contains(MessageUtils.getRoleClass(newRole))) {
+        MessageUtils.revealRoleElements(prevMessageElements.innerContainer, this._avatars, this._names);
+      }
+    }
+  }
+
   protected static isTemporaryElement(elements: MessageElements) {
     return MessagesBase.isLoadingMessage(elements) || HTMLDeepChatElements.isElementTemporary(elements);
   }