From d2634cb9a3dca8361c4540f0c06ea8f9246085b7 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 21 Nov 2024 19:44:30 +0530
Subject: [PATCH] feat: use realworld like data

---
 .../components-next/message/Message.vue       | 151 +++-
 .../message/Messages.story.vue                | 727 +++++++++++++++++-
 .../components-next/message/bubbles/Text.vue  |  25 +-
 .../components-next/message/constants.js      |  26 +
 4 files changed, 858 insertions(+), 71 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/message/constants.js

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',
+};