adding new css classes to allow manual overrides of grouped message s…

…tyles
OvidijusParsiunas · Oct 29, 2024 · f02b71b · f02b71b
1 parent ae7f762
commit f02b71b
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 2 deletions.
diff --git a/component/src/views/chat/messages/messageUtils.ts b/component/src/views/chat/messages/messageUtils.ts
@@ -11,6 +11,9 @@ export class MessageUtils {
   public static readonly AI_ROLE = 'ai';
   public static readonly USER_ROLE = 'user';
   private static readonly EMPTY_MESSAGE_CLASS = 'empty-message';
+  private static readonly POSITION_TOP_MESSAGE_CLASS = 'deep-chat-top-message';
+  private static readonly POSITION_MIDDLE_MESSAGE_CLASS = 'deep-chat-middle-message';
+  private static readonly POSITION_BOTTOM_MESSAGE_CLASS = 'deep-chat-bottom-message';
 
   public static getLastElementsByClass(messagesElements: MessageElements[], classes: string[], avoidedClasses?: string[]) {
     for (let i = messagesElements.length - 1; i >= 0; i -= 1) {
@@ -116,4 +119,45 @@ export class MessageUtils {
       arr.push(item);
     }
   }
+
+  public static buildRoleContainerClass(role: string) {
+    return `deep-chat-${role}-container`;
+  }
+
+  private static addNewPositionClasses(messageEls: MessageElements, classes: string[]) {
+    messageEls.outerContainer.classList.remove(
+      MessageUtils.POSITION_TOP_MESSAGE_CLASS,
+      MessageUtils.POSITION_MIDDLE_MESSAGE_CLASS,
+      MessageUtils.POSITION_BOTTOM_MESSAGE_CLASS
+    );
+    messageEls.outerContainer.classList.add(...classes);
+  }
+
+  public static classifyMessages(role: string, messageElementRefs: MessageElements[]) {
+    const currentRole = MessageUtils.buildRoleContainerClass(role);
+    messageElementRefs.forEach((messageEls, index) => {
+      const hasCurrentRole = messageEls.outerContainer.classList.contains(currentRole);
+
+      const prevMessageEls = messageElementRefs[index - 1];
+      const nextMessageEls = messageElementRefs[index + 1];
+
+      const hasPrevRole = prevMessageEls?.outerContainer.classList.contains(currentRole);
+      const hasNextRole = nextMessageEls?.outerContainer.classList.contains(currentRole);
+
+      if (hasCurrentRole) {
+        if (!hasPrevRole && hasNextRole) {
+          MessageUtils.addNewPositionClasses(messageEls, [MessageUtils.POSITION_TOP_MESSAGE_CLASS]);
+        } else if (hasPrevRole && hasNextRole) {
+          MessageUtils.addNewPositionClasses(messageEls, [MessageUtils.POSITION_MIDDLE_MESSAGE_CLASS]);
+        } else if (hasPrevRole && !hasNextRole) {
+          MessageUtils.addNewPositionClasses(messageEls, [MessageUtils.POSITION_BOTTOM_MESSAGE_CLASS]);
+        } else if (!hasPrevRole && !hasNextRole) {
+          MessageUtils.addNewPositionClasses(messageEls, [
+            MessageUtils.POSITION_TOP_MESSAGE_CLASS,
+            MessageUtils.POSITION_BOTTOM_MESSAGE_CLASS,
+          ]);
+        }
+      }
+    });
+  }
 }
diff --git a/component/src/views/chat/messages/messagesBase.ts b/component/src/views/chat/messages/messagesBase.ts
@@ -135,20 +135,22 @@ export class MessagesBase {
   }
 
   public createMessageElements(text: string, role: string, isTop = false) {
-    const messageElements = MessagesBase.createBaseElements();
+    const messageElements = MessagesBase.createBaseElements(role);
     const {outerContainer, innerContainer, bubbleElement} = messageElements;
     outerContainer.appendChild(innerContainer);
     this.addInnerContainerElements(bubbleElement, text, role);
     MessageUtils.updateRefArr(this.messageElementRefs, messageElements, isTop);
+    MessageUtils.classifyMessages(role, this.messageElementRefs);
     return messageElements;
   }
 
-  protected static createBaseElements(): MessageElements {
+  protected static createBaseElements(role: string): MessageElements {
     const outerContainer = document.createElement('div');
     const innerContainer = document.createElement('div');
     innerContainer.classList.add('inner-message-container');
     outerContainer.appendChild(innerContainer);
     outerContainer.classList.add('outer-message-container');
+    outerContainer.classList.add(MessageUtils.buildRoleContainerClass(role));
     const bubbleElement = document.createElement('div');
     bubbleElement.classList.add('message-bubble');
     innerContainer.appendChild(bubbleElement);