feat: Update conversation messages screen UI (#12975)

app/javascript/dashboard/components-next/button/Button.vue

@@ -133,7 +133,7 @@ const STYLE_CONFIG = {
     },
     slate: {
       solid:
-        'bg-n-solid-3 dark:hover:enabled:bg-n-solid-2 dark:focus-visible:bg-n-solid-2 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 text-n-slate-12 outline-n-container',
+        'bg-n-button-color dark:hover:enabled:bg-n-solid-2 dark:focus-visible:bg-n-solid-2 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 text-n-slate-12 outline-n-container',
       faded:
         'bg-n-slate-9/10 text-n-slate-12 hover:enabled:bg-n-slate-9/20 focus-visible:bg-n-slate-9/20 outline-transparent',
       outline:

app/javascript/dashboard/components-next/message/Message.vue

@@ -498,7 +498,7 @@ provideMessageContext({
           'w-full': variant === MESSAGE_VARIANTS.EMAIL,
         },
       ]"
-      class="gap-x-2"
+      class="gap-x-3"
       :style="{
         gridTemplateAreas: gridTemplate,
       }"
@@ -508,7 +508,7 @@ provideMessageContext({
         v-tooltip.left-end="avatarTooltip"
         class="[grid-area:avatar] flex items-end"
       >
-        <Avatar v-bind="avatarInfo" :size="24" />
+        <Avatar v-bind="avatarInfo" :size="24" rounded-full />
       </div>
       <div
         class="[grid-area:bubble] flex"

app/javascript/dashboard/components-next/message/MessageList.vue

@@ -112,7 +112,11 @@ const shouldGroupWithNext = (index, searchList) => {
     nextMessageType === MESSAGE_TYPES.TEMPLATE &&
     currentMessageType === MESSAGE_TYPES.TEMPLATE;
 
-  if (!hasSameSender || areBothTemplates) return false;
+  const areBothActivity =
+    nextMessageType === MESSAGE_TYPES.ACTIVITY &&
+    currentMessageType === MESSAGE_TYPES.ACTIVITY;
+
+  if (!hasSameSender || areBothTemplates || areBothActivity) return false;
 
   if (currentMessageType !== nextMessageType) return false;
 
@@ -157,6 +161,17 @@ const getInReplyToMessage = parentMessage => {
 
   return replyMessage ? useCamelCase(replyMessage) : null;
 };
+
+const getMessageSpacingClass = (message, messages, index) => {
+  // For non-activity messages, use groupWithNext logic
+  if (message.messageType !== MESSAGE_TYPES.ACTIVITY) {
+    return shouldGroupWithNext(index, messages) ? 'mb-1' : 'mb-6';
+  }
+
+  // For activity messages, check next message exists and is also an activity
+  const nextMessage = messages[index + 1];
+  return nextMessage?.messageType === MESSAGE_TYPES.ACTIVITY ? 'mb-2' : 'mb-6';
+};
 </script>
 
 <template>
@@ -175,6 +190,7 @@ const getInReplyToMessage = parentMessage => {
         :inbox-supports-reply-to="inboxSupportsReplyTo"
         :current-user-id="currentUserId"
         data-clarity-mask="True"
+        :class="getMessageSpacingClass(message, allMessages, index)"
         @retry="emit('retry', message)"
       />
     </template>

app/javascript/dashboard/components-next/message/MessageMeta.vue

@@ -123,10 +123,13 @@ const statusToShow = computed(() => {
 
 <template>
   <div class="text-xs flex items-center gap-1.5">
+    <div v-if="isPrivate" class="flex items-center gap-2 px-1">
+      <Icon icon="i-lucide-lock-keyhole" class="size-3" />
+      <div class="w-px h-2 rounded-lg bg-n-amber-text" />
+    </div>
     <div class="inline">
       <time class="inline">{{ readableTime }}</time>
     </div>
-    <Icon v-if="isPrivate" icon="i-lucide-lock-keyhole" class="size-3" />
     <MessageStatus v-if="showStatusIndicator" :status="statusToShow" />
   </div>
 </template>

app/javascript/dashboard/components-next/message/MessageStatus.vue

@@ -58,7 +58,7 @@ const statusColor = computed(() => {
   const statusIconMap = {
     [MESSAGE_STATUS.SENT]: 'text-n-slate-10',
     [MESSAGE_STATUS.DELIVERED]: 'text-n-slate-10',
-    [MESSAGE_STATUS.READ]: 'text-[#7EB6FF]',
+    [MESSAGE_STATUS.READ]: 'text-n-blue-11',
   };
 
   return statusIconMap[status];

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

@@ -18,14 +18,14 @@ const { variant, orientation, inReplyTo, shouldGroupWithNext } =
   useMessageContext();
 const { t } = useI18n();
 
-const varaintBaseMap = {
-  [MESSAGE_VARIANTS.AGENT]: 'bg-n-solid-blue text-n-slate-12',
+const variantBaseMap = {
+  [MESSAGE_VARIANTS.AGENT]: 'bg-n-solid-blue text-n-blue-text',
   [MESSAGE_VARIANTS.PRIVATE]:
-    'bg-n-solid-amber text-n-amber-12 [&_.prosemirror-mention-node]:font-semibold',
+    'bg-n-solid-amber text-n-amber-text [&_.prosemirror-mention-node]:font-semibold',
   [MESSAGE_VARIANTS.USER]: 'bg-n-slate-4 text-n-slate-12',
   [MESSAGE_VARIANTS.ACTIVITY]: 'bg-n-alpha-1 text-n-slate-11 text-sm',
-  [MESSAGE_VARIANTS.BOT]: 'bg-n-solid-iris text-n-slate-12',
-  [MESSAGE_VARIANTS.TEMPLATE]: 'bg-n-solid-iris text-n-slate-12',
+  [MESSAGE_VARIANTS.BOT]: 'bg-n-solid-purple text-n-purple-text',
+  [MESSAGE_VARIANTS.TEMPLATE]: 'bg-n-solid-purple text-n-purple-text',
   [MESSAGE_VARIANTS.ERROR]: 'bg-n-ruby-4 text-n-ruby-12',
   [MESSAGE_VARIANTS.EMAIL]: 'w-full',
   [MESSAGE_VARIANTS.UNSUPPORTED]:
@@ -51,7 +51,7 @@ const flexOrientationClass = computed(() => {
 });
 
 const messageClass = computed(() => {
-  const classToApply = [varaintBaseMap[variant.value]];
+  const classToApply = [variantBaseMap[variant.value]];
 
   if (variant.value !== MESSAGE_VARIANTS.ACTIVITY) {
     classToApply.push(orientationMap[orientation.value]);
@@ -118,7 +118,7 @@ const replyToPreview = computed(() => {
         flexOrientationClass,
         variant === MESSAGE_VARIANTS.EMAIL ? 'px-3 pb-3' : '',
         variant === MESSAGE_VARIANTS.PRIVATE
-          ? 'text-n-amber-12/50'
+          ? 'text-n-amber-text'
           : 'text-n-slate-11',
       ]"
       class="mt-2"