fix: additional colors

app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import BaseBubble from './Base.vue';
 import Icon from 'next/icon/Icon.vue';
 import { useMessageContext } from '../provider.js';
+import { MESSAGE_VARIANTS } from '../constants';
 
 defineProps({
   icon: { type: [String, Object], required: true },
@@ -20,12 +21,32 @@ defineProps({
   },
 });
 
-const { sender } = useMessageContext();
+const { sender, variant } = useMessageContext();
 const { t } = useI18n();
 
 const senderName = computed(() => {
   return sender?.value?.name || '';
 });
+
+const primaryTextClass = computed(() => {
+  const classMap = {
+    [MESSAGE_VARIANTS.AGENT]: 'text-[rgb(var(--bubble-agent-text))]',
+    [MESSAGE_VARIANTS.USER]: 'text-[rgb(var(--bubble-user-text))]',
+    [MESSAGE_VARIANTS.PRIVATE]: 'text-[rgb(var(--bubble-private-text))]',
+    [MESSAGE_VARIANTS.BOT]: 'text-[rgb(var(--bubble-bot-text))]',
+  };
+  return classMap[variant.value] || 'text-[rgb(var(--bubble-agent-text))]';
+});
+
+const secondaryTextClass = computed(() => {
+  const classMap = {
+    [MESSAGE_VARIANTS.AGENT]: 'text-[rgb(var(--bubble-agent-meta))]',
+    [MESSAGE_VARIANTS.USER]: 'text-[rgb(var(--bubble-user-meta))]',
+    [MESSAGE_VARIANTS.PRIVATE]: 'text-[rgb(var(--bubble-private-meta))]',
+    [MESSAGE_VARIANTS.BOT]: 'text-[rgb(var(--bubble-bot-meta))]',
+  };
+  return classMap[variant.value] || 'text-[rgb(var(--bubble-agent-meta))]';
+});
 </script>
 
 <template>
@@ -44,7 +65,11 @@ const senderName = computed(() => {
           </slot>
         </div>
         <div class="space-y-1 overflow-hidden">
-          <div v-if="senderName" class="text-n-slate-12 text-sm truncate">
+          <div
+            v-if="senderName"
+            class="text-sm truncate"
+            :class="primaryTextClass"
+          >
             {{
               t(senderTranslationKey, {
                 sender: senderName,
@@ -52,10 +77,18 @@ const senderName = computed(() => {
             }}
           </div>
           <slot>
-            <div v-if="title" class="truncate text-sm text-n-slate-12">
+            <div
+              v-if="title"
+              class="truncate text-sm"
+              :class="primaryTextClass"
+            >
               {{ title }}
             </div>
-            <div v-if="content" class="truncate text-sm text-n-slate-11">
+            <div
+              v-if="content"
+              class="truncate text-sm"
+              :class="secondaryTextClass"
+            >
               {{ content }}
             </div>
           </slot>