From b54edaae2e5426aa4d5cdd2f7289f7ee1304250b Mon Sep 17 00:00:00 2001
From: Leire Aguirre <leire@argilla.io>
Date: Thu, 12 Sep 2024 13:27:59 +0200
Subject: [PATCH] ui qa

---
 .../container/fields/chat-field/ChatField.vue | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue b/argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue
index 3c06606999..8c2b22d4ee 100644
--- a/argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue
@@ -1,12 +1,16 @@
 <template>
-  <div class="chat" :key="title">
+  <div
+    class="chat"
+    :key="title"
+    :class="checkIfAreLessThanTwoRoles ? '--simple' : '--multiple'"
+  >
     <span class="chat__title" v-text="title" />
 
     <div v-for="({ role, content: text }, index) in content" :key="index">
       <span
         :class="[
           'chat__item',
-          role === 'user' || (checkIfAreLessThanTwoRoles && index === 0)
+          checkIfAreLessThanTwoRoles && index === 0
             ? 'chat__item--right'
             : 'chat__item--left',
         ]"
@@ -16,16 +20,14 @@
           v-if="role !== content[index - 1]?.role"
           v-text="role"
           :style="{
-            color: $color.generate([...role].reverse()).palette.dark,
+            color: getColorForRole(role),
           }"
         />
 
         <div
           class="chat__bubble"
           :style="{
-            borderColor: `hsl(from ${
-              $color.generate([...role].reverse()).palette.dark
-            } h s l / 20%)`,
+            borderColor: `hsl(from ${getColorForRole(role)} h s l / 20%)`,
           }"
         >
           <MarkdownRenderer v-if="useMarkdown" :markdown="text" />
@@ -65,6 +67,20 @@ export default {
     checkIfAreLessThanTwoRoles() {
       return this.getAllUniqueRolesNames.length <= 2;
     },
+    colorForRole() {
+      return [
+        "hsl(117, 47%, 58%)",
+        "hsl(288, 47%, 58%)",
+        "hsl(189, 47%, 58%)",
+        "hsl(0, 47%, 58%)",
+        "hsl(50, 47%, 58%)",
+      ];
+    },
+  },
+  methods: {
+    getColorForRole(role) {
+      return this.colorForRole[this.getAllUniqueRolesNames.indexOf(role)];
+    },
   },
 };
 </script>
@@ -107,6 +123,9 @@ export default {
     border-width: 1px;
     @include font-size(16px);
     @include line-height(24px);
+    .--simple & {
+      border-color: var(--bg-opacity-2) !important;
+    }
   }
 
   &__role {