diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
index b552fd7ec..61d1c653d 100644
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -1,69 +1,161 @@
 <script setup>
 import { computed } from 'vue';
+
+import {
+  MESSAGE_TYPES,
+  MESSAGE_VARIANTS,
+  SENDER_TYPES,
+  ORIENTATION,
+} from './constants';
+
 import TextBubble from './bubbles/Text.vue';
 import Avatar from 'next/avatar/Avatar.vue';
 import Icon from 'next/icon/Icon.vue';
 
+// id: 5272,
+// content: 'Hey, how are ya, I had a few questions about Chatwoot?',
+// inbox_id: 475,
+// conversation_id: 43,
+// message_type: 0,
+// content_type: 'text',
+// status: 'sent',
+// content_attributes: {
+//   in_reply_to: null,
+// },
+// created_at: 1732195656,
+// private: false,
+// source_id: null,
+// sender: {
+//   additional_attributes: {},
+//   custom_attributes: {},
+//   email: 'hey@example.com',
+//   id: 597,
+//   identifier: null,
+//   name: 'hey',
+//   phone_number: null,
+//   thumbnail: '',
+//   type: 'contact',
+// },
+//
+
 const props = defineProps({
-  variant: {
+  id: { type: Number, required: true },
+  messageType: {
+    type: Number,
+    required: true,
+    validator: value => Object.values(MESSAGE_TYPES).includes(value),
+  },
+  status: {
     type: String,
     required: true,
-    validator: value => ['user', 'agent', 'system', 'private'].includes(value),
+    validator: value => ['sent', 'delivered', 'read', 'failed'].includes(value),
   },
-  orientation: {
+  private: {
+    type: Boolean,
+    default: false,
+  },
+  createdAt: {
+    type: Number,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: null,
+  },
+  senderId: {
+    type: Number,
+    default: null,
+  },
+  senderType: {
     type: String,
-    default: 'left',
-    validator: value => ['left', 'right', 'center'].includes(value),
+    default: null,
   },
-  text: {
+  content: {
     type: String,
-    default: 'Hello World',
+    required: true,
   },
-  user: {
-    type: String,
-    default: '',
+  currentUserId: {
+    type: Number,
+    required: true,
   },
 });
 
+const variant = computed(() => {
+  if (props.private) {
+    return MESSAGE_VARIANTS.PRIVATE;
+  }
+
+  if (props.messageType === MESSAGE_TYPES.INCOMING) {
+    return MESSAGE_VARIANTS.USER;
+  }
+
+  if (props.messageType === MESSAGE_TYPES.ACTIVITY) {
+    return MESSAGE_VARIANTS.ACTIVITY;
+  }
+
+  if (props.messageType === MESSAGE_TYPES.OUTGOING) {
+    return MESSAGE_VARIANTS.AGENT;
+  }
+
+  if (props.messageType === MESSAGE_TYPES.TEMPLATE) {
+    return MESSAGE_VARIANTS.TEMPLATE;
+  }
+
+  return MESSAGE_VARIANTS.USER;
+});
+
+const orientation = computed(() => {
+  if (
+    props.senderType === SENDER_TYPES.USER &&
+    props.currentUserId === props.senderId
+  ) {
+    return ORIENTATION.RIGHT;
+  }
+
+  if (props.messageType === MESSAGE_TYPES.ACTIVITY) return ORIENTATION.CENTER;
+
+  return ORIENTATION.LEFT;
+});
+
 const flexOrientationClass = computed(() => {
   const map = {
-    left: 'justify-start',
-    right: 'justify-end',
-    center: 'justify-center',
+    [ORIENTATION.LEFT]: 'justify-start',
+    [ORIENTATION.RIGHT]: 'justify-end',
+    [ORIENTATION.CENTER]: 'justify-center',
   };
 
-  return map[props.orientation];
+  return map[orientation.value];
 });
 
 const gridClass = computed(() => {
   const map = {
-    left: 'grid grid-cols-[24px_1fr]',
-    right: 'grid grid-cols-[1fr_24px]',
+    [ORIENTATION.LEFT]: 'grid grid-cols-[24px_1fr]',
+    [ORIENTATION.RIGHT]: 'grid grid-cols-[1fr_24px]',
   };
 
-  return map[props.orientation];
+  return map[orientation.value];
 });
 
 const gridTemplate = computed(() => {
   const map = {
-    left: `
+    [ORIENTATION.LEFT]: `
       "avatar bubble"
       "spacer meta"
     `,
-    right: `
+    [ORIENTATION.RIGHT]: `
       "bubble avatar"
       "meta spacer"
     `,
   };
 
-  return map[props.orientation];
+  return map[orientation.value];
 });
 </script>
 
 <template>
   <div class="flex w-full" :class="flexOrientationClass">
-    <div v-if="variant === 'system'">
-      <TextBubble v-bind="props" />
+    <div v-if="variant === MESSAGE_VARIANTS.ACTIVITY">
+      <TextBubble v-bind="props" :variant :orientation />
     </div>
     <div
       v-else
@@ -71,21 +163,24 @@ const gridTemplate = computed(() => {
       class="gap-x-3 gap-y-2 grid-area"
       :style="{
         gridTemplateAreas: gridTemplate,
-        gridTemplateColumns:
-          props.orientation === 'center' ? '1fr' : 'auto 1fr',
       }"
     >
       <div class="[grid-area:avatar] flex items-end">
-        <Avatar :name="user" src="" size="24" />
+        <Avatar :name="sender ? sender.name : ''" src="" :size="24" />
       </div>
-      <TextBubble v-bind="props" class="[grid-area:bubble]" />
+      <TextBubble
+        v-bind="props"
+        :variant
+        :orientation
+        class="[grid-area:bubble]"
+      />
       <div
         class="[grid-area:meta] text-xs text-n-slate-11 flex items-center gap-1.5"
         :class="flexOrientationClass"
       >
-        <span>{{ user }} {{ '• 1m ago' }}</span>
+        <span>{{ sender ? sender.name : '' }} {{ '• 1m ago' }}</span>
         <Icon
-          v-if="variant === 'private'"
+          v-if="variant === MESSAGE_VARIANTS.PRIVATE"
           icon="i-lucide-lock-keyhole"
           class="text-n-slate-10 size-3"
         />
diff --git a/app/javascript/dashboard/components-next/message/Messages.story.vue b/app/javascript/dashboard/components-next/message/Messages.story.vue
index 7d0d9bc82..605c1614a 100644
--- a/app/javascript/dashboard/components-next/message/Messages.story.vue
+++ b/app/javascript/dashboard/components-next/message/Messages.story.vue
@@ -1,55 +1,714 @@
 <script setup>
 import Message from './Message.vue';
+import camelcaseKeys from 'camelcase-keys';
 
 const messages = [
   {
-    variant: 'user',
-    user: 'Elizabeth',
-    text: 'Hey, the usual things I order is out of stock.',
-    orientation: 'left',
+    id: 5272,
+    content: 'Hey, how are ya, I had a few questions about Chatwoot?',
+    inbox_id: 475,
+    conversation_id: 43,
+    message_type: 0,
+    content_type: 'text',
+    status: 'sent',
+    content_attributes: {
+      in_reply_to: null,
+    },
+    created_at: 1732195656,
+    private: false,
+    source_id: null,
+    sender: {
+      additional_attributes: {},
+      custom_attributes: {},
+      email: 'hey@example.com',
+      id: 597,
+      identifier: null,
+      name: 'hey',
+      phone_number: null,
+      thumbnail: '',
+      type: 'contact',
+    },
   },
   {
-    variant: 'system',
-    text: 'Conversation auto-assigned to Stanley',
-    orientation: 'center',
+    id: 5273,
+    content: 'Give the team a way to reach you.',
+    inbox_id: 475,
+    conversation_id: 43,
+    message_type: 3,
+    content_type: 'text',
+    status: 'read',
+    content_attributes: {},
+    created_at: 1732195656,
+    private: false,
+    source_id: null,
   },
   {
-    variant: 'agent',
-    user: 'Stanley',
-    text: 'Hello Elizabeth, there was a recent change in our office supplies.',
-    orientation: 'right',
+    id: 5274,
+    content: 'Get notified by email',
+    account_id: 1,
+    inbox_id: 475,
+    conversation_id: 43,
+    message_type: 3,
+    created_at: 1732195656,
+    updated_at: '2024-11-21T13:27:53.612Z',
+    private: false,
+    status: 'read',
+    source_id: null,
+    content_type: 'input_email',
+    content_attributes: {
+      submitted_email: 'hey@example.com',
+    },
+    sender_type: null,
+    sender_id: null,
+    external_source_ids: {},
+    additional_attributes: {},
+    processed_message_content: 'Get notified by email',
+    sentiment: {},
+    conversation: {
+      assignee_id: null,
+      unread_count: 1,
+      last_activity_at: 1732195656,
+      contact_inbox: {
+        source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+      },
+    },
   },
   {
-    variant: 'private',
-    user: 'Stanley',
-    text: 'Should we give her a premium discount?',
-    orientation: 'right',
+    id: 5275,
+    content:
+      'Does the Startup plan include the two users from the Free plan, or do I have to buy those separately?',
+    account_id: 1,
+    inbox_id: 475,
+    conversation_id: 43,
+    message_type: 0,
+    created_at: 1732195735,
+    updated_at: '2024-11-21T13:28:55.508Z',
+    private: false,
+    status: 'sent',
+    source_id: null,
+    content_type: 'text',
+    content_attributes: {
+      in_reply_to: null,
+    },
+    sender_type: 'Contact',
+    sender_id: 597,
+    external_source_ids: {},
+    additional_attributes: {},
+    processed_message_content:
+      'Does the Startup plan include the two users from the Free plan, or do I have to buy those separately?',
+    sentiment: {},
+    conversation: {
+      assignee_id: null,
+      unread_count: 1,
+      last_activity_at: 1732195735,
+      contact_inbox: {
+        source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+      },
+    },
+    sender: {
+      additional_attributes: {},
+      custom_attributes: {},
+      email: 'hey@example.com',
+      id: 597,
+      identifier: null,
+      name: 'hey',
+      phone_number: null,
+      thumbnail: '',
+      type: 'contact',
+    },
   },
   {
-    variant: 'private',
-    user: 'Jim',
-    text: 'They have placed multiple orders already, can go ahead. @Michael thoughts?',
-    orientation: 'left',
+    conversation_id: 43,
+    status: 'read',
+    content_type: 'text',
+    processed_message_content: 'John self-assigned this conversation',
+    id: 5276,
+    content: 'John self-assigned this conversation',
+    account_id: 1,
+    inbox_id: 475,
+    message_type: 2,
+    created_at: 1732195741,
+    updated_at: '2024-11-21T13:30:26.788Z',
+    private: false,
+    source_id: null,
+    content_attributes: {},
+    sender_type: null,
+    sender_id: null,
+    external_source_ids: {},
+    additional_attributes: {},
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 0,
+      last_activity_at: 1732195826,
+      contact_inbox: {
+        source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+      },
+    },
+    previous_changes: {
+      updated_at: ['2024-11-21T13:29:01.570Z', '2024-11-21T13:30:26.788Z'],
+      status: ['sent', 'read'],
+    },
   },
   {
-    variant: 'private',
-    user: 'Michael',
-    text: 'Yes, let’s offer her a 20% discount',
-    orientation: 'left',
+    conversation_id: 43,
+    status: 'read',
+    content_type: 'text',
+    processed_message_content:
+      'Hey thanks for your interest in upgrading, no, the seats are not included, you will have to purchase them alongside the rest. How many seats are you planning to upgrade to?',
+    id: 5277,
+    content:
+      'Hey thanks for your interest in upgrading, no, the seats are not included, you will have to purchase them alongside the rest. How many seats are you planning to upgrade to?',
+    account_id: 1,
+    inbox_id: 475,
+    message_type: 1,
+    created_at: 1732195826,
+    updated_at: '2024-11-21T13:30:26.837Z',
+    private: false,
+    source_id: null,
+    content_attributes: {},
+    sender_type: 'User',
+    sender_id: 1,
+    external_source_ids: {},
+    additional_attributes: {},
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 0,
+      last_activity_at: 1732195826,
+      contact_inbox: {
+        source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+      },
+    },
+    sender: {
+      id: 1,
+      name: 'John',
+      available_name: 'John',
+      avatar_url:
+        'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      type: 'user',
+      availability_status: null,
+      thumbnail:
+        'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+    },
+    previous_changes: {
+      updated_at: ['2024-11-21T13:30:26.149Z', '2024-11-21T13:30:26.837Z'],
+      status: ['sent', 'read'],
+    },
   },
   {
-    variant: 'agent',
-    user: 'Stanley',
-    text: 'If you want to buy our premium supplies, we can offer you a 20% discount! They come with indices and laser beams! ⚡',
-    orientation: 'right',
+    id: 5278,
+    content: "Oh, that's unfortunate",
+    account_id: 1,
+    inbox_id: 475,
+    conversation_id: 43,
+    message_type: 0,
+    created_at: 1732195838,
+    updated_at: '2024-11-21T13:30:38.070Z',
+    private: false,
+    status: 'sent',
+    source_id: null,
+    content_type: 'text',
+    content_attributes: {
+      in_reply_to: null,
+    },
+    sender_type: 'Contact',
+    sender_id: 597,
+    external_source_ids: {},
+    additional_attributes: {},
+    processed_message_content: "Oh, that's unfortunate",
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 1,
+      last_activity_at: 1732195838,
+      contact_inbox: {
+        source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+      },
+    },
+    sender: {
+      additional_attributes: {},
+      custom_attributes: {},
+      email: 'hey@example.com',
+      id: 597,
+      identifier: null,
+      name: 'hey',
+      phone_number: null,
+      thumbnail: '',
+      type: 'contact',
+    },
   },
   {
-    variant: 'user',
-    user: 'Elizabeth',
-    text: 'That’s great!',
-    orientation: 'left',
+    id: 5279,
+    content:
+      'I plan to upgrade to 4 agents for now, but will grow to 6 in the next three months. ',
+    account_id: 1,
+    inbox_id: 475,
+    conversation_id: 43,
+    message_type: 0,
+    created_at: 1732195865,
+    updated_at: '2024-11-21T13:31:05.284Z',
+    private: false,
+    status: 'sent',
+    source_id: null,
+    content_type: 'text',
+    content_attributes: {
+      in_reply_to: null,
+    },
+    sender_type: 'Contact',
+    sender_id: 597,
+    external_source_ids: {},
+    additional_attributes: {},
+    processed_message_content:
+      'I plan to upgrade to 4 agents for now, but will grow to 6 in the next three months. ',
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 1,
+      last_activity_at: 1732195865,
+      contact_inbox: {
+        source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+      },
+    },
+    sender: {
+      additional_attributes: {},
+      custom_attributes: {},
+      email: 'hey@example.com',
+      id: 597,
+      identifier: null,
+      name: 'hey',
+      phone_number: null,
+      thumbnail: '',
+      type: 'contact',
+    },
   },
-];
+
+  {
+    id: 5280,
+    content: 'Is it possible to get a discount?',
+    account_id: 1,
+    inbox_id: 475,
+    conversation_id: 43,
+    message_type: 0,
+    created_at: 1732195872,
+    updated_at: '2024-11-21T13:31:12.545Z',
+    private: false,
+    status: 'sent',
+    source_id: null,
+    content_type: 'text',
+    content_attributes: {
+      in_reply_to: null,
+    },
+    sender_type: 'Contact',
+    sender_id: 597,
+    external_source_ids: {},
+    additional_attributes: {},
+    processed_message_content: 'Is it possible to get a discount?',
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 1,
+      last_activity_at: 1732195872,
+      contact_inbox: {
+        source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+      },
+    },
+    sender: {
+      additional_attributes: {},
+      custom_attributes: {},
+      email: 'hey@example.com',
+      id: 597,
+      identifier: null,
+      name: 'hey',
+      phone_number: null,
+      thumbnail: '',
+      type: 'contact',
+    },
+  },
+  {
+    conversation_id: 43,
+    status: 'read',
+    content_type: 'text',
+    processed_message_content:
+      '[@Bruce](mention://user/30/Bruce) should we offer them a discount',
+    id: 5281,
+    content:
+      '[@Bruce](mention://user/30/Bruce) should we offer them a discount',
+    account_id: 1,
+    inbox_id: 475,
+    message_type: 1,
+    created_at: 1732195887,
+    updated_at: '2024-11-21T13:32:59.863Z',
+    private: true,
+    source_id: null,
+    content_attributes: {},
+    sender_type: 'User',
+    sender_id: 1,
+    external_source_ids: {},
+    additional_attributes: {},
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 0,
+      last_activity_at: 1732195972,
+      contact_inbox: {
+        source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+      },
+    },
+    sender: {
+      id: 1,
+      name: 'John',
+      available_name: 'John',
+      avatar_url:
+        'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      type: 'user',
+      availability_status: null,
+      thumbnail:
+        'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+    },
+    previous_changes: {
+      updated_at: ['2024-11-21T13:31:27.914Z', '2024-11-21T13:32:59.863Z'],
+      status: ['sent', 'read'],
+    },
+  },
+  {
+    conversation_id: 43,
+    status: 'read',
+    content_type: 'text',
+    processed_message_content:
+      'Sure, you can use the discount code KQS3242A at the checkout to get 30% off on your yearly subscription. This coupon only applies for a year, I hope this helps',
+    id: 5282,
+    content:
+      'Sure, you can use the discount code KQS3242A at the checkout to get 30% off on your yearly subscription. This coupon only applies for a year, I hope this helps',
+    account_id: 1,
+    inbox_id: 475,
+    message_type: 1,
+    created_at: 1732195972,
+    updated_at: '2024-11-21T13:32:59.902Z',
+    private: false,
+    source_id: null,
+    content_attributes: {},
+    sender_type: 'User',
+    sender_id: 1,
+    external_source_ids: {},
+    additional_attributes: {},
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 0,
+      last_activity_at: 1732195972,
+      contact_inbox: {
+        source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+      },
+    },
+    sender: {
+      id: 1,
+      name: 'John',
+      available_name: 'John',
+      avatar_url:
+        'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      type: 'user',
+      availability_status: null,
+      thumbnail:
+        'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+    },
+    previous_changes: {
+      updated_at: ['2024-11-21T13:32:52.722Z', '2024-11-21T13:32:59.902Z'],
+      status: ['sent', 'read'],
+    },
+  },
+  {
+    id: 5283,
+    content: 'Great, thanks',
+    account_id: 1,
+    inbox_id: 475,
+    conversation_id: 43,
+    message_type: 0,
+    created_at: 1732195982,
+    updated_at: '2024-11-21T13:33:02.142Z',
+    private: false,
+    status: 'sent',
+    source_id: null,
+    content_type: 'text',
+    content_attributes: {
+      in_reply_to: null,
+    },
+    sender_type: 'Contact',
+    sender_id: 597,
+    external_source_ids: {},
+    additional_attributes: {},
+    processed_message_content: 'Great, thanks',
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 1,
+      last_activity_at: 1732195982,
+      contact_inbox: {
+        source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+      },
+    },
+    sender: {
+      additional_attributes: {},
+      custom_attributes: {},
+      email: 'hey@example.com',
+      id: 597,
+      identifier: null,
+      name: 'hey',
+      phone_number: null,
+      thumbnail: '',
+      type: 'contact',
+    },
+  },
+
+  {
+    id: 5284,
+    content: 'Really appreciate it',
+    account_id: 1,
+    inbox_id: 475,
+    conversation_id: 43,
+    message_type: 0,
+    created_at: 1732195984,
+    updated_at: '2024-11-21T13:33:04.856Z',
+    private: false,
+    status: 'sent',
+    source_id: null,
+    content_type: 'text',
+    content_attributes: {
+      in_reply_to: null,
+    },
+    sender_type: 'Contact',
+    sender_id: 597,
+    external_source_ids: {},
+    additional_attributes: {},
+    processed_message_content: 'Really appreciate it',
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 1,
+      last_activity_at: 1732195984,
+      contact_inbox: {
+        source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+      },
+    },
+    sender: {
+      additional_attributes: {},
+      custom_attributes: {},
+      email: 'hey@example.com',
+      id: 597,
+      identifier: null,
+      name: 'hey',
+      phone_number: null,
+      thumbnail: '',
+      type: 'contact',
+    },
+  },
+  {
+    conversation_id: 43,
+    status: 'read',
+    content_type: 'text',
+    processed_message_content: ' Happy to help :)',
+    id: 5285,
+    content: ' Happy to help :)',
+    account_id: 1,
+    inbox_id: 475,
+    message_type: 1,
+    created_at: 1732195991,
+    updated_at: '2024-11-21T13:33:12.229Z',
+    private: false,
+    source_id: null,
+    content_attributes: {},
+    sender_type: 'User',
+    sender_id: 1,
+    external_source_ids: {},
+    additional_attributes: {},
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 0,
+      last_activity_at: 1732195991,
+      contact_inbox: {
+        source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+      },
+    },
+    sender: {
+      id: 1,
+      name: 'John',
+      available_name: 'John',
+      avatar_url:
+        'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      type: 'user',
+      availability_status: null,
+      thumbnail:
+        'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+    },
+    previous_changes: {
+      updated_at: ['2024-11-21T13:33:11.667Z', '2024-11-21T13:33:12.229Z'],
+      status: ['sent', 'read'],
+    },
+  },
+  {
+    conversation_id: 43,
+    status: 'read',
+    content_type: 'text',
+    processed_message_content:
+      "Let us know if you have any questions, I'll close this conversation for now",
+    id: 5286,
+    content:
+      "Let us know if you have any questions, I'll close this conversation for now",
+    account_id: 1,
+    inbox_id: 475,
+    message_type: 1,
+    created_at: 1732196013,
+    updated_at: '2024-11-21T13:33:33.879Z',
+    private: false,
+    source_id: null,
+    content_attributes: {},
+    sender_type: 'User',
+    sender_id: 1,
+    external_source_ids: {},
+    additional_attributes: {},
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 0,
+      last_activity_at: 1732196013,
+      contact_inbox: {
+        source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+      },
+    },
+    sender: {
+      id: 1,
+      name: 'John',
+      available_name: 'John',
+      avatar_url:
+        'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      type: 'user',
+      availability_status: null,
+      thumbnail:
+        'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+    },
+    previous_changes: {
+      updated_at: ['2024-11-21T13:33:33.511Z', '2024-11-21T13:33:33.879Z'],
+      status: ['sent', 'read'],
+    },
+  },
+  {
+    id: 5287,
+    content: 'John set the priority to urgent',
+    account_id: 1,
+    inbox_id: 475,
+    conversation_id: 43,
+    message_type: 2,
+    created_at: 1732196017,
+    updated_at: '2024-11-21T13:33:37.569Z',
+    private: false,
+    status: 'sent',
+    source_id: null,
+    content_type: 'text',
+    content_attributes: {},
+    sender_type: null,
+    sender_id: null,
+    external_source_ids: {},
+    additional_attributes: {},
+    processed_message_content: 'John set the priority to urgent',
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 0,
+      last_activity_at: 1732196017,
+      contact_inbox: {
+        source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+      },
+    },
+  },
+  {
+    id: 5288,
+    content: 'John added billing',
+    account_id: 1,
+    inbox_id: 475,
+    conversation_id: 43,
+    message_type: 2,
+    created_at: 1732196020,
+    updated_at: '2024-11-21T13:33:40.207Z',
+    private: false,
+    status: 'sent',
+    source_id: null,
+    content_type: 'text',
+    content_attributes: {},
+    sender_type: null,
+    sender_id: null,
+    external_source_ids: {},
+    additional_attributes: {},
+    processed_message_content: 'John added billing',
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 0,
+      last_activity_at: 1732196020,
+      contact_inbox: {
+        source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+      },
+    },
+  },
+  {
+    id: 5289,
+    content: 'John added delivery',
+    account_id: 1,
+    inbox_id: 475,
+    conversation_id: 43,
+    message_type: 2,
+    created_at: 1732196020,
+    updated_at: '2024-11-21T13:33:40.822Z',
+    private: false,
+    status: 'sent',
+    source_id: null,
+    content_type: 'text',
+    content_attributes: {},
+    sender_type: null,
+    sender_id: null,
+    external_source_ids: {},
+    additional_attributes: {},
+    processed_message_content: 'John added delivery',
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 0,
+      last_activity_at: 1732196020,
+      contact_inbox: {
+        source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+      },
+    },
+  },
+  {
+    id: 5290,
+    content: 'Conversation was marked resolved by John',
+    account_id: 1,
+    inbox_id: 475,
+    conversation_id: 43,
+    message_type: 2,
+    created_at: 1732196029,
+    updated_at: '2024-11-21T13:33:49.059Z',
+    private: false,
+    status: 'sent',
+    source_id: null,
+    content_type: 'text',
+    content_attributes: {},
+    sender_type: null,
+    sender_id: null,
+    external_source_ids: {},
+    additional_attributes: {},
+    processed_message_content: 'Conversation was marked resolved by John',
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 0,
+      last_activity_at: 1732196029,
+      contact_inbox: {
+        source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+      },
+    },
+  },
+].map(camelcaseKeys);
 </script>
 
 <template>
@@ -58,7 +717,9 @@ const messages = [
     :layout="{ type: 'grid', width: '800' }"
   >
     <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid gap-4">
-      <Message v-for="message in messages" v-bind="message" />
+      <template v-for="message in messages" :key="message.id">
+        <Message :current-user-id="1" v-bind="message" />
+      </template>
     </div>
   </Story>
 </template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Text.vue b/app/javascript/dashboard/components-next/message/bubbles/Text.vue
index 49bc2650c..4451786e3 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Text.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Text.vue
@@ -1,27 +1,32 @@
 <script setup>
 import { computed } from 'vue';
+import { MESSAGE_VARIANTS, ORIENTATION } from '../constants';
+
 const props = defineProps({
   variant: {
     type: String,
     required: true,
-    validator: value => ['user', 'agent', 'system', 'private'].includes(value),
+    validator: value => Object.values(MESSAGE_VARIANTS).includes(value),
   },
   orientation: {
     type: String,
-    default: 'left',
-    validator: value => ['left', 'right', 'center'].includes(value),
+    required: true,
+    validator: value => Object.values(ORIENTATION).includes(value),
   },
-  text: {
+  content: {
     type: String,
-    default: 'Hello World',
+    required: true,
   },
 });
 
 const varaintBaseMap = {
-  agent: 'bg-n-solid-blue p-3 text-n-slate-12',
-  private: 'bg-n-solid-amber p-3 text-n-amber-12',
-  user: 'bg-n-slate-4 p-3 text-n-slate-12',
-  system: 'bg-n-alpha-1 px-2 py-0.5 text-n-slate-11 text-sm',
+  [MESSAGE_VARIANTS.AGENT]: 'bg-n-solid-blue p-3 text-n-slate-12',
+  [MESSAGE_VARIANTS.PRIVATE]: 'bg-n-solid-amber p-3 text-n-amber-12',
+  [MESSAGE_VARIANTS.USER]: 'bg-n-slate-4 p-3 text-n-slate-12',
+  [MESSAGE_VARIANTS.ACTIVITY]:
+    'bg-n-alpha-1 px-2 py-0.5 text-n-slate-11 text-sm',
+  [MESSAGE_VARIANTS.BOT]: 'bg-n-teal-5 p-3 text-n-slate-12',
+  [MESSAGE_VARIANTS.TEMPLATE]: 'bg-n-teal-5 p-3 text-n-slate-12',
 };
 
 const orientationMap = {
@@ -44,6 +49,6 @@ const messageClass = computed(() => {
 
 <template>
   <div class="max-w-md text-sm" :class="messageClass">
-    {{ text }}
+    {{ content }}
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/message/constants.js b/app/javascript/dashboard/components-next/message/constants.js
new file mode 100644
index 000000000..9cbe49671
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/constants.js
@@ -0,0 +1,26 @@
+export const MESSAGE_TYPES = {
+  INCOMING: 0,
+  OUTGOING: 1,
+  ACTIVITY: 2,
+  TEMPLATE: 3,
+};
+
+export const MESSAGE_VARIANTS = {
+  USER: 'user',
+  AGENT: 'agent',
+  ACTIVITY: 'activity',
+  PRIVATE: 'private',
+  BOT: 'bot',
+  TEMPLATE: 'template',
+};
+
+export const SENDER_TYPES = {
+  CONTACT: 'Contact',
+  USER: 'User',
+};
+
+export const ORIENTATION = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  CENTER: 'center',
+};