chore: refactor

https://github.com/bkeepers/dotenv/pull/468

Renames Dotenv::Railtie => Dotenv::Rails

Co-authored-by: Sojan Jose <sojan@pepalo.com>

.circleci/config.yml

@@ -74,7 +74,7 @@ jobs:
             source ~/.rvm/scripts/rvm
             rvm install "3.3.3"
             rvm use 3.3.3 --default
-            gem install bundler
+            gem install bundler -v 2.5.16
 
       - run:
           name: Install Application Dependencies

.github/workflows/publish_foss_docker.yml

@@ -12,6 +12,7 @@ on:
       - master
     tags:
       - v*
+# pull_request:
   workflow_dispatch:
 
 jobs:
@@ -40,7 +41,9 @@ jobs:
 
       - name: set docker tag
         run: |
-          echo "DOCKER_TAG=chatwoot/chatwoot:$GIT_REF-ce" >> $GITHUB_ENV
+          # Replace forward slashes with hyphens in the ref name
+          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
+          echo "DOCKER_TAG=chatwoot/chatwoot:$SANITIZED_REF-ce" >> $GITHUB_ENV
 
       - name: replace docker tag if master
         if: github.ref_name == 'master'
@@ -48,6 +51,7 @@ jobs:
           echo "DOCKER_TAG=chatwoot/chatwoot:latest-ce" >> $GITHUB_ENV
 
       - name: Login to DockerHub
+        if: github.event_name == 'push' || github.event_name == 'workflow_dispatch'
         uses: docker/login-action@v1
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
@@ -58,6 +62,6 @@ jobs:
         with:
           context: .
           file: docker/Dockerfile
-          platforms: linux/amd64
-          push: true
+          platforms: linux/amd64, linux/arm64
+          push: ${{ github.event_name == 'push' || github.event_name == 'workflow_dispatch' }}
           tags: ${{ env.DOCKER_TAG }}

Gemfile.lock

@@ -33,70 +33,70 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actioncable (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activejob (= 7.0.8.5)
-      activerecord (= 7.0.8.5)
-      activestorage (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actionmailbox (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activejob (= 7.0.8.7)
+      activerecord (= 7.0.8.7)
+      activestorage (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       mail (>= 2.7.1)
       net-imap
       net-pop
       net-smtp
-    actionmailer (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      actionview (= 7.0.8.5)
-      activejob (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actionmailer (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      actionview (= 7.0.8.7)
+      activejob (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       mail (~> 2.5, >= 2.5.4)
       net-imap
       net-pop
       net-smtp
       rails-dom-testing (~> 2.0)
-    actionpack (7.0.8.5)
-      actionview (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actionpack (7.0.8.7)
+      actionview (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       rack (~> 2.0, >= 2.2.4)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activerecord (= 7.0.8.5)
-      activestorage (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actiontext (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activerecord (= 7.0.8.7)
+      activestorage (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actionview (7.0.8.7)
+      activesupport (= 7.0.8.7)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
     active_record_query_trace (1.8)
-    activejob (7.0.8.5)
-      activesupport (= 7.0.8.5)
+    activejob (7.0.8.7)
+      activesupport (= 7.0.8.7)
       globalid (>= 0.3.6)
-    activemodel (7.0.8.5)
-      activesupport (= 7.0.8.5)
-    activerecord (7.0.8.5)
-      activemodel (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    activemodel (7.0.8.7)
+      activesupport (= 7.0.8.7)
+    activerecord (7.0.8.7)
+      activemodel (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
     activerecord-import (1.4.1)
       activerecord (>= 4.2)
-    activestorage (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activejob (= 7.0.8.5)
-      activerecord (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    activestorage (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activejob (= 7.0.8.7)
+      activerecord (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       marcel (~> 1.0)
       mini_mime (>= 1.1.0)
-    activesupport (7.0.8.5)
+    activesupport (7.0.8.7)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -472,7 +472,7 @@ GEM
     mini_magick (4.12.0)
     mini_mime (1.1.5)
     mini_portile2 (2.8.8)
-    minitest (5.25.1)
+    minitest (5.25.4)
     mock_redis (0.36.0)
       ruby2_keywords
     msgpack (1.7.0)
@@ -502,14 +502,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.16.8)
+    nokogiri (1.17.1)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.16.8-arm64-darwin)
+    nokogiri (1.17.1-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.8-x86_64-darwin)
+    nokogiri (1.17.1-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.8-x86_64-linux)
+    nokogiri (1.17.1-x86_64-linux)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
@@ -581,20 +581,20 @@ GEM
     rack-test (2.1.0)
       rack (>= 1.3)
     rack-timeout (0.6.3)
-    rails (7.0.8.5)
-      actioncable (= 7.0.8.5)
-      actionmailbox (= 7.0.8.5)
-      actionmailer (= 7.0.8.5)
-      actionpack (= 7.0.8.5)
-      actiontext (= 7.0.8.5)
-      actionview (= 7.0.8.5)
-      activejob (= 7.0.8.5)
-      activemodel (= 7.0.8.5)
-      activerecord (= 7.0.8.5)
-      activestorage (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    rails (7.0.8.7)
+      actioncable (= 7.0.8.7)
+      actionmailbox (= 7.0.8.7)
+      actionmailer (= 7.0.8.7)
+      actionpack (= 7.0.8.7)
+      actiontext (= 7.0.8.7)
+      actionview (= 7.0.8.7)
+      activejob (= 7.0.8.7)
+      activemodel (= 7.0.8.7)
+      activerecord (= 7.0.8.7)
+      activestorage (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       bundler (>= 1.15.0)
-      railties (= 7.0.8.5)
+      railties (= 7.0.8.7)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
@@ -602,9 +602,9 @@ GEM
     rails-html-sanitizer (1.6.1)
       loofah (~> 2.21)
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
-    railties (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    railties (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       method_source
       rake (>= 12.2)
       thor (~> 1.0)

Procfile

@@ -1,3 +1,4 @@
 release: POSTGRES_STATEMENT_TIMEOUT=600s bundle exec rails db:chatwoot_prepare && echo $SOURCE_VERSION > .git_sha
 web: bundle exec rails ip_lookup:setup && bin/rails server -p $PORT -e $RAILS_ENV
-worker: bundle exec rails ip_lookup:setup && bundle exec sidekiq -C config/sidekiq.yml
+default_worker: bundle exec rails ip_lookup:setup && bundle exec sidekiq -C config/sidekiq/default.yml
+quarantine_worker: bundle exec rails ip_lookup:setup && bundle exec sidekiq -C config/sidekiq/quarantine.yml

app/controllers/api/v1/accounts/contacts_controller.rb

@@ -14,7 +14,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   before_action :check_authorization
   before_action :set_current_page, only: [:index, :active, :search, :filter]
   before_action :fetch_contact, only: [:show, :update, :destroy, :avatar, :contactable_inboxes, :destroy_custom_attributes]
-  before_action :set_include_contact_inboxes, only: [:index, :search, :filter]
+  before_action :set_include_contact_inboxes, only: [:index, :search, :filter, :show, :update]
 
   def index
     @contacts_count = resolved_contacts.count
@@ -68,6 +68,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
     @contacts = fetch_contacts(contacts)
   rescue CustomExceptions::CustomFilter::InvalidAttribute,
          CustomExceptions::CustomFilter::InvalidOperator,
+         CustomExceptions::CustomFilter::InvalidQueryOperator,
          CustomExceptions::CustomFilter::InvalidValue => e
     render_could_not_create_error(e.message)
   end

app/controllers/api/v1/accounts/conversations_controller.rb

@@ -46,6 +46,7 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     @conversations_count = result[:count]
   rescue CustomExceptions::CustomFilter::InvalidAttribute,
          CustomExceptions::CustomFilter::InvalidOperator,
+         CustomExceptions::CustomFilter::InvalidQueryOperator,
          CustomExceptions::CustomFilter::InvalidValue => e
     render_could_not_create_error(e.message)
   end

app/controllers/api/v1/accounts/integrations/captain_controller.rb

@@ -2,10 +2,22 @@ class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::Ba
   before_action :hook
 
   def proxy
+    request_url = build_request_url(request_path)
     response = HTTParty.send(request_method, request_url, body: permitted_params[:body].to_json, headers: headers)
     render plain: response.body, status: response.code
   end
 
+  def copilot
+    request_url = build_request_url(build_request_path("/assistants/#{hook.settings['assistant_id']}/copilot"))
+    params = {
+      previous_messages: copilot_params[:previous_messages],
+      conversation_history: conversation_history,
+      message: copilot_params[:message]
+    }
+    response = HTTParty.send(:post, request_url, body: params.to_json, headers: headers)
+    render plain: response.body, status: response.code
+  end
+
   private
 
   def headers
@@ -17,15 +29,19 @@ class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::Ba
     }
   end
 
+  def build_request_path(route)
+    "api/accounts/#{hook.settings['account_id']}#{route}"
+  end
+
   def request_path
     request_route = with_leading_hash_on_route(params[:route])
 
     return 'api/sessions/profile' if request_route == '/sessions/profile'
 
-    "api/accounts/#{hook.settings['account_id']}#{request_route}"
+    build_request_path(request_route)
   end
 
-  def request_url
+  def build_request_url(request_path)
     base_url = InstallationConfig.find_by(name: 'CAPTAIN_API_URL').value
     URI.join(base_url, request_path).to_s
   end
@@ -47,6 +63,15 @@ class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::Ba
     request_route.start_with?('/') ? request_route : "/#{request_route}"
   end
 
+  def conversation_history
+    conversation = Current.account.conversations.find_by!(display_id: copilot_params[:conversation_id])
+    conversation.to_llm_text
+  end
+
+  def copilot_params
+    params.permit(:previous_messages, :conversation_id, :message)
+  end
+
   def permitted_params
     params.permit(:method, :route, body: {})
   end

app/controllers/api/v1/profiles_controller.rb

@@ -17,7 +17,7 @@ class Api::V1::ProfilesController < Api::BaseController
 
   def avatar
     @user.avatar.attachment.destroy! if @user.avatar.attached?
-    head :ok
+    @user.reload
   end
 
   def auto_offline

app/helpers/filter_helper.rb

@@ -81,4 +81,12 @@ module FilterHelper
   def default_filter(query_hash, filter_operator_value)
     "#{filter_config[:table_name]}.#{query_hash[:attribute_key]} #{filter_operator_value} #{query_hash[:query_operator]}"
   end
+
+  def validate_single_condition(condition)
+    return if condition['query_operator'].nil?
+    return if condition['query_operator'].empty?
+
+    operator = condition['query_operator'].upcase
+    raise CustomExceptions::CustomFilter::InvalidQueryOperator.new({}) unless %w[AND OR].include?(operator)
+  end
 end

app/javascript/dashboard/api/contacts.js

@@ -27,6 +27,14 @@ class ContactAPI extends ApiClient {
     return axios.get(requestURL);
   }
 
+  show(id) {
+    return axios.get(`${this.url}/${id}?include_contact_inboxes=false`);
+  }
+
+  update(id, data) {
+    return axios.patch(`${this.url}/${id}?include_contact_inboxes=false`, data);
+  }
+
   getConversations(contactId) {
     return axios.get(`${this.url}/${contactId}/conversations`);
   }

app/javascript/dashboard/api/integrations.js

@@ -36,6 +36,10 @@ class IntegrationsAPI extends ApiClient {
   requestCaptain(body) {
     return axios.post(`${this.baseUrl()}/integrations/captain/proxy`, body);
   }
+
+  requestCaptainCopilot(body) {
+    return axios.post(`${this.baseUrl()}/integrations/captain/copilot`, body);
+  }
 }
 
 export default new IntegrationsAPI();

app/javascript/dashboard/assets/scss/_woot.scss

@@ -72,6 +72,19 @@
     --slate-11: 96 100 108;
     --slate-12: 28 32 36;
 
+    --iris-1: 253 253 255;
+    --iris-2: 248 248 255;
+    --iris-3: 240 241 254;
+    --iris-4: 230 231 255;
+    --iris-5: 218 220 255;
+    --iris-6: 203 205 255;
+    --iris-7: 184 186 248;
+    --iris-8: 155 158 240;
+    --iris-9: 91 91 214;
+    --iris-10: 81 81 205;
+    --iris-11: 87 83 198;
+    --iris-12: 39 41 98;
+
     --ruby-1: 255 252 253;
     --ruby-2: 255 247 248;
     --ruby-3: 254 234 237;
@@ -122,6 +135,7 @@
     --solid-active: 255 255 255;
     --solid-amber: 252 232 193;
     --solid-blue: 218 236 255;
+    --solid-iris: 230 231 255;
 
     --alpha-1: 67, 67, 67, 0.06;
     --alpha-2: 201, 202, 207, 0.15;
@@ -129,10 +143,10 @@
     --black-alpha-1: 0, 0, 0, 0.12;
     --black-alpha-2: 0, 0, 0, 0.04;
     --border-blue: 39, 129, 246, 0.5;
-    --white-alpha: 255, 255, 255, 0.1;
+    --white-alpha: 255, 255, 255, 0.8;
   }
 
-  body.dark {
+  .dark {
     /* slate */
     --slate-1: 17 17 19;
     --slate-2: 24 25 27;
@@ -147,6 +161,19 @@
     --slate-11: 176 180 186;
     --slate-12: 237 238 240;
 
+    --iris-1: 19 19 30;
+    --iris-2: 23 22 37;
+    --iris-3: 32 34 72;
+    --iris-4: 38 42 101;
+    --iris-5: 48 51 116;
+    --iris-6: 61 62 130;
+    --iris-7: 74 74 149;
+    --iris-8: 89 88 177;
+    --iris-9: 91 91 214;
+    --iris-10: 84 114 228;
+    --iris-11: 158 177 255;
+    --iris-12: 224 223 254;
+
     --ruby-1: 25 17 19;
     --ruby-2: 30 21 23;
     --ruby-3: 58 20 30;
@@ -195,6 +222,7 @@
     --solid-active: 53 57 66;
     --solid-amber: 42 37 30;
     --solid-blue: 16 49 91;
+    --solid-iris: 38 42 101;
     --text-blue: 126 182 255;
 
     --alpha-1: 36, 36, 36, 0.8;
@@ -204,7 +232,7 @@
     --black-alpha-2: 0, 0, 0, 0.2;
     --border-blue: 39, 129, 246, 0.5;
     --border-container: 236, 236, 236, 0;
-    --white-alpha: 255, 255, 255, 0.1;
+    --white-alpha: 255, 255, 255, 0.8;
   }
   /* NEXT COLORS END */
 

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -6,6 +6,14 @@
   @apply border-b border-slate-50 dark:border-slate-800/50;
 }
 
+.tabs--container--compact.tab--chat-type {
+  .tabs-title {
+    a {
+      @apply py-2 text-sm;
+    }
+  }
+}
+
 .tabs {
   @apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4 list-none mb-0;
 }

app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue

@@ -18,6 +18,11 @@ const route = useRoute();
 
 const showDropdown = ref(false);
 
+// Store the currently hovered label's ID
+// Using JS state management instead of CSS :hover / group hover
+// This will solve the flickering issue when hovering over the last label item
+const hoveredLabel = ref(null);
+
 const allLabels = useMapGetter('labels/getLabels');
 const contactLabels = useMapGetter('contactLabels/getContactLabels');
 
@@ -37,7 +42,7 @@ const labelMenuItems = computed(() => {
       isSelected: savedLabels.value.some(
         savedLabel => savedLabel.id === label.id
       ),
-      action: 'addLabel',
+      action: 'contactLabel',
     }))
     .toSorted((a, b) => Number(a.isSelected) - Number(b.isSelected));
 });
@@ -49,7 +54,7 @@ const fetchLabels = async contactId => {
   store.dispatch('contactLabels/get', contactId);
 };
 
-const handleLabelAction = async ({ action, value }) => {
+const handleLabelAction = async ({ value }) => {
   try {
     // Get current label titles
     const currentLabels = savedLabels.value.map(label => label.title);
@@ -59,16 +64,15 @@ const handleLabelAction = async ({ action, value }) => {
     if (!selectedLabel) return;
 
     let updatedLabels;
-    if (action === 'addLabel') {
-      // If label is already selected, remove it (toggle behavior)
-      if (currentLabels.includes(selectedLabel.title)) {
-        updatedLabels = currentLabels.filter(
-          labelTitle => labelTitle !== selectedLabel.title
-        );
-      } else {
-        // Add the new label
-        updatedLabels = [...currentLabels, selectedLabel.title];
-      }
+
+    // If label is already selected, remove it (toggle behavior)
+    if (currentLabels.includes(selectedLabel.title)) {
+      updatedLabels = currentLabels.filter(
+        labelTitle => labelTitle !== selectedLabel.title
+      );
+    } else {
+      // Add the new label
+      updatedLabels = [...currentLabels, selectedLabel.title];
     }
 
     await store.dispatch('contactLabels/update', {
@@ -82,6 +86,10 @@ const handleLabelAction = async ({ action, value }) => {
   }
 };
 
+const handleRemoveLabel = labelId => {
+  return handleLabelAction({ value: labelId });
+};
+
 watch(
   () => props.contactId,
   (newVal, oldVal) => {
@@ -95,11 +103,31 @@ onMounted(() => {
     fetchLabels(route.params.contactId);
   }
 });
+
+const handleMouseLeave = () => {
+  // Reset hover state when mouse leaves the container
+  // This ensures all labels return to their default state
+  hoveredLabel.value = null;
+};
+
+const handleLabelHover = labelId => {
+  // Added this to prevent flickering on when showing remove button on hover
+  // If the label item is at end of the line, it will show the remove button
+  // when hovering over the last label item
+  hoveredLabel.value = labelId;
+};
 </script>
 
 <template>
-  <div class="flex flex-wrap items-center gap-2">
-    <LabelItem v-for="label in savedLabels" :key="label.id" :label="label" />
+  <div class="flex flex-wrap items-center gap-2" @mouseleave="handleMouseLeave">
+    <LabelItem
+      v-for="label in savedLabels"
+      :key="label.id"
+      :label="label"
+      :is-hovered="hoveredLabel === label.id"
+      @remove="handleRemoveLabel"
+      @hover="handleLabelHover(label.id)"
+    />
     <AddLabel
       :label-menu-items="labelMenuItems"
       @update-label="handleLabelAction"

app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue

@@ -6,6 +6,7 @@ import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Flag from 'dashboard/components-next/flag/Flag.vue';
 import countries from 'shared/constants/countries';
 
 const props = defineProps({
@@ -56,13 +57,19 @@ const countryDetails = computed(() => {
 
   if (!activeCountry) return null;
 
-  const parts = [
-    activeCountry.emoji,
-    city ? `${city},` : null,
-    activeCountry.name,
-  ].filter(Boolean);
+  return {
+    countryCode: activeCountry.id,
+    city: city ? `${city},` : null,
+    name: activeCountry.name,
+  };
+});
 
-  return parts.length ? parts.join(' ') : null;
+const formattedLocation = computed(() => {
+  if (!countryDetails.value) return '';
+
+  return [countryDetails.value.city, countryDetails.value.name]
+    .filter(Boolean)
+    .join(' ');
 });
 
 const handleFormUpdate = updatedData => {
@@ -114,8 +121,12 @@ const onClickViewDetails = () => emit('showContact', props.id);
             {{ phoneNumber }}
           </span>
           <div v-if="phoneNumber" class="w-px h-3 truncate bg-n-slate-6" />
-          <span v-if="countryDetails" class="text-sm truncate text-n-slate-11">
-            {{ countryDetails }}
+          <span
+            v-if="countryDetails"
+            class="inline-flex items-center gap-2 text-sm truncate text-n-slate-11"
+          >
+            <Flag :country="countryDetails.countryCode" class="size-3.5" />
+            {{ formattedLocation }}
           </span>
           <div v-if="countryDetails" class="w-px h-3 truncate bg-n-slate-6" />
           <Button

app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue

@@ -1,28 +1,30 @@
 <script setup>
 import { computed, useSlots } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 
-// import Button from 'dashboard/components-next/button/Button.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
+import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
 
 const props = defineProps({
-  // buttonLabel: {
-  //   type: String,
-  //   default: '',
-  // },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
   selectedContact: {
     type: Object,
     default: () => ({}),
   },
 });
 
-const emit = defineEmits([
-  // 'message',
-  'goToContactsList',
-]);
+const emit = defineEmits(['goToContactsList']);
 
 const { t } = useI18n();
 const slots = useSlots();
+const route = useRoute();
+
+const contactId = computed(() => route.params.contactId);
 
 const selectedContactName = computed(() => {
   return props.selectedContact?.name;
@@ -50,7 +52,7 @@ const handleBreadcrumbClick = () => {
 
 <template>
   <section
-    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-background"
+    class="flex w-full h-full overflow-hidden justify-evenly bg-n-background"
   >
     <div
       class="flex flex-col w-full h-full transition-all duration-300 ltr:2xl:ml-56 rtl:2xl:mr-56"
@@ -62,7 +64,11 @@ const handleBreadcrumbClick = () => {
               :items="breadcrumbItems"
               @click="handleBreadcrumbClick"
             />
-            <!-- <Button :label="buttonLabel" size="sm" @click="emit('message')" /> -->
+            <ComposeConversation :contact-id="contactId">
+              <template #trigger="{ toggle }">
+                <Button :label="buttonLabel" size="sm" @click="toggle" />
+              </template>
+            </ComposeConversation>
           </div>
         </div>
       </header>

app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue

@@ -41,11 +41,11 @@ const FORM_CONFIG = {
 };
 
 const SOCIAL_CONFIG = {
-  FACEBOOK: 'i-ri-facebook-circle-fill',
-  GITHUB: 'i-ri-github-fill',
-  INSTAGRAM: 'i-ri-instagram-line',
   LINKEDIN: 'i-ri-linkedin-box-fill',
+  FACEBOOK: 'i-ri-facebook-circle-fill',
+  INSTAGRAM: 'i-ri-instagram-line',
   TWITTER: 'i-ri-twitter-x-fill',
+  GITHUB: 'i-ri-github-fill',
 };
 
 const defaultState = {
@@ -94,7 +94,7 @@ const prepareStateBasedOnProps = () => {
     phoneNumber,
     additionalAttributes = {},
   } = props.contactData || {};
-  const { firstName, lastName } = splitName(name);
+  const { firstName, lastName } = splitName(name || '');
   const {
     description = '',
     companyName = '',

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue

@@ -4,6 +4,7 @@ import Input from 'dashboard/components-next/input/Input.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import ContactSortMenu from './components/ContactSortMenu.vue';
 import ContactMoreActions from './components/ContactMoreActions.vue';
+import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
 
 defineProps({
   showSearch: {
@@ -18,10 +19,10 @@ defineProps({
     type: String,
     required: true,
   },
-  //   buttonLabel: {
-  //     type: String,
-  //     default: '',
-  //   },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
   activeSort: {
     type: String,
     default: 'last_activity_at',
@@ -48,7 +49,6 @@ const emit = defineEmits([
   'search',
   'filter',
   'update:sort',
-  //   'message',
   'add',
   'import',
   'export',
@@ -93,7 +93,7 @@ const emit = defineEmits([
               "
               color="slate"
               size="sm"
-              class="relative"
+              class="relative w-8"
               variant="ghost"
               @click="emit('filter')"
             >
@@ -109,7 +109,6 @@ const emit = defineEmits([
             icon="i-lucide-save"
             color="slate"
             size="sm"
-            class="relative"
             variant="ghost"
             @click="emit('createSegment')"
           />
@@ -118,7 +117,6 @@ const emit = defineEmits([
             icon="i-lucide-trash"
             color="slate"
             size="sm"
-            class="relative"
             variant="ghost"
             @click="emit('deleteSegment')"
           />
@@ -133,9 +131,12 @@ const emit = defineEmits([
             @export="emit('export')"
           />
         </div>
-        <!-- TODO: Add this when we enabling message feature -->
-        <!-- <div class="w-px h-4 bg-n-strong" /> -->
-        <!-- <Button :label="buttonLabel" size="sm" @click="emit('message')" /> -->
+        <div class="w-px h-4 bg-n-strong" />
+        <ComposeConversation>
+          <template #trigger="{ toggle }">
+            <Button :label="buttonLabel" size="sm" @click="toggle" />
+          </template>
+        </ComposeConversation>
       </div>
     </div>
   </header>

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue

@@ -106,10 +106,15 @@ const onImport = async file => {
   try {
     await store.dispatch('contacts/import', file);
     contactImportDialogRef.value?.dialogRef.close();
-    useAlert(t('IMPORT_CONTACTS.SUCCESS_MESSAGE'));
+    useAlert(
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.SUCCESS_MESSAGE')
+    );
     useTrack(CONTACTS_EVENTS.IMPORT_SUCCESS);
   } catch (error) {
-    useAlert(error.message ?? t('IMPORT_CONTACTS.ERROR_MESSAGE'));
+    useAlert(
+      error.message ??
+        t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.ERROR_MESSAGE')
+    );
     useTrack(CONTACTS_EVENTS.IMPORT_FAILURE);
   }
 };

app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue

@@ -55,7 +55,7 @@ const handleContactAction = ({ action }) => {
     <DropdownMenu
       v-if="showActionsDropdown"
       :menu-items="contactMenuItems"
-      class="right-0 mt-1 w-52 top-full"
+      class="ltr:right-0 rtl:left-0 mt-1 w-52 top-full"
       @action="handleContactAction($event)"
     />
   </div>

app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue

@@ -109,7 +109,7 @@ const handleOrderChange = value => {
     <div
       v-if="isMenuOpen"
       v-on-clickaway="() => (isMenuOpen = false)"
-      class="absolute top-full mt-1 right-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
+      class="absolute top-full mt-1 ltr:right-0 rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
     >
       <div class="flex items-center justify-between gap-2">
         <span class="text-sm text-n-slate-12">

app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue

@@ -1,28 +1,67 @@
 <script setup>
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 import { useMapGetter } from 'dashboard/composables/store';
+import { useCamelCase } from 'dashboard/composables/useTransformKeys';
 
 import ActiveFilterPreview from 'dashboard/components-next/filter/ActiveFilterPreview.vue';
 
+const props = defineProps({
+  activeSegment: { type: Object, default: null },
+});
+
 const emit = defineEmits(['clearFilters', 'openFilter']);
 
 const { t } = useI18n();
+const route = useRoute();
 
 const appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4');
+const activeSegmentId = computed(() => route.params.segmentId);
+
+const activeSegmentQuery = computed(() => {
+  const query = props.activeSegment?.query?.payload;
+  if (!Array.isArray(query)) return [];
+
+  const newFilters = query.map(filter => {
+    const transformed = useCamelCase(filter);
+    return {
+      attributeKey: transformed.attributeKey,
+      attributeModel: transformed.attributeModel,
+      customAttributeType: transformed.customAttributeType,
+      filterOperator: transformed.filterOperator,
+      queryOperator: transformed.queryOperator ?? 'and',
+      values: transformed.values,
+    };
+  });
+
+  return newFilters;
+});
+
+const hasActiveSegments = computed(
+  () => props.activeSegment && activeSegmentId.value !== 0
+);
+
+const activeFilterQueryData = computed(() => {
+  return hasActiveSegments.value
+    ? activeSegmentQuery.value
+    : appliedFilters.value;
+});
 </script>
 
 <template>
   <ActiveFilterPreview
-    :applied-filters="appliedFilters"
+    :applied-filters="activeFilterQueryData"
     :max-visible-filters="2"
     :more-filters-label="
       t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.MORE_FILTERS', {
-        count: appliedFilters.length - 2,
+        count: activeFilterQueryData.length - 2,
       })
     "
     :clear-button-label="
       t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')
     "
+    :show-clear-button="!hasActiveSegments"
     class="max-w-[960px] px-6"
     @open-filter="emit('openFilter')"
     @clear-filters="emit('clearFilters')"

app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue

@@ -7,50 +7,18 @@ import ContactsActiveFiltersPreview from 'dashboard/components-next/Contacts/Con
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 
 defineProps({
-  searchValue: {
-    type: String,
-    default: '',
-  },
-  headerTitle: {
-    type: String,
-    default: '',
-  },
-  showPaginationFooter: {
-    type: Boolean,
-    default: true,
-  },
-  currentPage: {
-    type: Number,
-    default: 1,
-  },
-  totalItems: {
-    type: Number,
-    default: 100,
-  },
-  itemsPerPage: {
-    type: Number,
-    default: 15,
-  },
-  activeSort: {
-    type: String,
-    default: '',
-  },
-  activeOrdering: {
-    type: String,
-    default: '',
-  },
-  activeSegment: {
-    type: Object,
-    default: null,
-  },
-  segmentsId: {
-    type: [String, Number],
-    default: 0,
-  },
-  hasAppliedFilters: {
-    type: Boolean,
-    default: false,
-  },
+  searchValue: { type: String, default: '' },
+  headerTitle: { type: String, default: '' },
+  showPaginationFooter: { type: Boolean, default: true },
+  currentPage: { type: Number, default: 1 },
+  totalItems: { type: Number, default: 100 },
+  itemsPerPage: { type: Number, default: 15 },
+  activeSort: { type: String, default: '' },
+  activeOrdering: { type: String, default: '' },
+  activeSegment: { type: Object, default: null },
+  segmentsId: { type: [String, Number], default: 0 },
+  hasAppliedFilters: { type: Boolean, default: false },
+  isFetchingList: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -106,7 +74,12 @@ const openFilter = () => {
       <main class="flex-1 overflow-y-auto">
         <div class="w-full mx-auto max-w-[960px]">
           <ContactsActiveFiltersPreview
-            v-if="hasAppliedFilters && isNotSegmentView"
+            v-if="
+              (hasAppliedFilters || !isNotSegmentView) &&
+              !isFetchingList &&
+              !isLabelView
+            "
+            :active-segment="activeSegment"
             @clear-filters="emit('clearFilters')"
             @open-filter="openFilter"
           />

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue

@@ -16,10 +16,7 @@ const { t } = useI18n();
 
 const searchQuery = ref('');
 
-const contactAttributes = computed(() => {
-  const attributes = useMapGetter('attributes/getAttributesByModelType');
-  return attributes.value('contact_attribute') || [];
-});
+const contactAttributes = useMapGetter('attributes/getContactAttributes') || [];
 
 const hasContactAttributes = computed(
   () => contactAttributes.value?.length > 0

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue

@@ -34,22 +34,19 @@ const contactConversations = computed(() =>
   >
     <Spinner />
   </div>
-  <div v-else-if="contactConversations.length > 0" class="flex flex-col py-6">
-    <div
+  <div
+    v-else-if="contactConversations.length > 0"
+    class="px-6 py-4 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
+  >
+    <ConversationCard
       v-for="conversation in contactConversations"
       :key="conversation.id"
-      class="border-b border-n-strong"
-    >
-      <ConversationCard
-        v-if="conversation"
-        :key="conversation.id"
-        :conversation="conversation"
-        :contact="contactsById(conversation.meta.sender.id)"
-        :state-inbox="stateInbox(conversation.inboxId)"
-        :account-labels="accountLabelsValue"
-        class="px-6 !rounded-none dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
-      />
-    </div>
+      :conversation="conversation"
+      :contact="contactsById(conversation.meta.sender.id)"
+      :state-inbox="stateInbox(conversation.inboxId)"
+      :account-labels="accountLabelsValue"
+      class="rounded-none hover:rounded-xl hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3"
+    />
   </div>
   <p v-else class="px-6 py-10 text-sm leading-6 text-center text-n-slate-11">
     {{ t('CONTACTS_LAYOUT.SIDEBAR.HISTORY.EMPTY_STATE') }}

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue

@@ -20,7 +20,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['goToContactsList']);
+const emit = defineEmits(['goToContactsList', 'resetTab']);
 
 const { t } = useI18n();
 const store = useStore();
@@ -74,6 +74,9 @@ const onContactSearch = debounce(
 );
 
 const resetState = () => {
+  if (state.primaryContactId === null) {
+    emit('resetTab');
+  }
   state.primaryContactId = null;
   searchResults.value = [];
   isSearching.value = false;

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue

@@ -28,7 +28,7 @@ const handleDelete = () => {
 
 <template>
   <div
-    class="flex flex-col gap-2 px-6 py-2 border-b border-n-strong group/note"
+    class="flex flex-col gap-2 py-2 mx-6 border-b border-n-strong group/note"
   >
     <div class="flex items-center justify-between">
       <div class="flex items-center gap-1.5 py-2.5 min-w-0">

app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue

@@ -68,7 +68,12 @@ const handleFormUpdate = updatedData => {
 
 const updateContact = async () => {
   try {
-    await store.dispatch('contacts/update', contactData.value);
+    const { customAttributes, ...basicContactData } = contactData.value;
+    await store.dispatch('contacts/update', basicContactData);
+    await store.dispatch(
+      'contacts/fetchContactableInbox',
+      props.selectedContact.id
+    );
     useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.SUCCESS_MESSAGE'));
   } catch (error) {
     useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.ERROR_MESSAGE'));
@@ -129,15 +134,28 @@ const handleAvatarDelete = async () => {
         <h3 class="text-base font-medium text-n-slate-12">
           {{ selectedContact?.name }}
         </h3>
-        <span class="text-sm text-n-slate-11">
-          {{ $t('CONTACTS_LAYOUT.DETAILS.CREATED_AT', { date: createdAt }) }}
-          •
-          {{
-            $t('CONTACTS_LAYOUT.DETAILS.LAST_ACTIVITY', {
-              date: lastActivityAt,
-            })
-          }}
-        </span>
+        <div class="flex flex-col gap-1.5">
+          <span
+            v-if="selectedContact?.identifier"
+            class="inline-flex items-center gap-1 text-sm text-n-slate-11"
+          >
+            <span class="i-ph-user-gear text-n-slate-10 size-4" />
+            {{ selectedContact?.identifier }}
+          </span>
+          <span class="inline-flex items-center gap-1 text-sm text-n-slate-11">
+            <span
+              v-if="selectedContact?.identifier"
+              class="i-ph-activity text-n-slate-10 size-4"
+            />
+            {{ $t('CONTACTS_LAYOUT.DETAILS.CREATED_AT', { date: createdAt }) }}
+            •
+            {{
+              $t('CONTACTS_LAYOUT.DETAILS.LAST_ACTIVITY', {
+                date: lastActivityAt,
+              })
+            }}
+          </span>
+        </div>
       </div>
       <ContactLabels :contact-id="selectedContact?.id" />
     </div>

app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue

@@ -82,7 +82,7 @@ const onCardClick = e => {
 
 <template>
   <div
-    class="flex w-full gap-3 px-3 py-4 transition-colors duration-300 ease-in-out cursor-pointer rounded-xl"
+    class="flex w-full gap-3 px-3 py-4 transition-all duration-300 ease-in-out cursor-pointer"
     @click="onCardClick"
   >
     <Avatar

app/javascript/dashboard/components-next/Editor/Editor.vue

@@ -169,7 +169,7 @@ watch(
           @apply m-0 !important;
 
           &::before {
-            @apply text-n-slate-10 dark:text-n-slate-10 !important;
+            @apply text-n-slate-11 dark:text-n-slate-11;
           }
         }
       }

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue

@@ -111,7 +111,7 @@ onMounted(() => {
             custom-label-class="min-w-[120px]"
           />
         </div>
-        <div class="flex justify-between w-full gap-2 py-2">
+        <div class="flex justify-between w-full gap-3 py-2">
           <label
             class="text-sm font-medium whitespace-nowrap min-w-[120px] text-slate-900 dark:text-slate-50"
           >

app/javascript/dashboard/components-next/Label/LabelItem.vue

@@ -1,22 +1,56 @@
 <script setup>
-defineProps({
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
   label: {
     type: Object,
     default: null,
   },
+  isHovered: {
+    type: Boolean,
+    default: false,
+  },
 });
+
+const emit = defineEmits(['remove', 'hover']);
+
+const handleRemoveLabel = () => {
+  emit('remove', props.label?.id);
+};
+
+const handleMouseEnter = () => {
+  // Notify parent component when this label is hovered
+  // Added this to show the remove button with transition when hovering over the label
+  // This will solve the flickering issue when hovering over the last label item
+  emit('hover', props.label?.id);
+};
 </script>
 
 <template>
   <div
-    class="bg-n-alpha-2 rounded-md flex items-center h-7 w-fit py-1 ltr:pl-1 rtl:pr-1 ltr:pr-1.5 rtl:pl-1.5"
+    class="flex items-center px-1 py-1 overflow-hidden transition-all duration-300 ease-out rounded-md bg-n-alpha-2 h-7"
+    @mouseenter="handleMouseEnter"
   >
     <div
       class="w-2 h-2 m-1 rounded-sm"
       :style="{ backgroundColor: label.color }"
     />
-    <span class="text-sm text-n-slate-12">
+    <span class="text-sm text-n-slate-12 ltr:mr-px rtl:ml-px">
       {{ label.title }}
     </span>
+    <div
+      class="w-0 flex relative ltr:left-1 rtl:right-1 flex-shrink-0 overflow-hidden transition-[width] duration-300 ease-out"
+      :class="{ 'w-6': isHovered }"
+    >
+      <Button
+        class="transition-opacity duration-200 !h-7 ltr:rounded-r-md rtl:rounded-l-md ltr:rounded-l-none rtl:rounded-r-none w-6 bg-transparent"
+        :class="{ 'opacity-0': !isHovered, 'opacity-100': isHovered }"
+        slate
+        xs
+        faded
+        icon="i-lucide-x"
+        @click="handleRemoveLabel"
+      />
+    </div>
   </div>
 </template>

app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue

@@ -0,0 +1,214 @@
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import { vOnClickOutside } from '@vueuse/components';
+import { useAlert } from 'dashboard/composables';
+import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
+import { debounce } from '@chatwoot/utils';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import {
+  searchContacts,
+  createNewContact,
+  fetchContactableInboxes,
+  processContactableInboxes,
+} from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
+
+import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue';
+
+const props = defineProps({
+  alignPosition: {
+    type: String,
+    default: 'left',
+  },
+  contactId: {
+    type: String,
+    default: null,
+  },
+});
+
+const store = useStore();
+const { t } = useI18n();
+
+const contacts = ref([]);
+const selectedContact = ref(null);
+const targetInbox = ref(null);
+const isCreatingContact = ref(false);
+const isFetchingInboxes = ref(false);
+const isSearching = ref(false);
+const showComposeNewConversation = ref(false);
+
+const contactById = useMapGetter('contacts/getContactById');
+const contactsUiFlags = useMapGetter('contacts/getUIFlags');
+const currentUser = useMapGetter('getCurrentUser');
+const globalConfig = useMapGetter('globalConfig/get');
+const uiFlags = useMapGetter('contactConversations/getUIFlags');
+
+const directUploadsEnabled = computed(
+  () => globalConfig.value.directUploadsEnabled
+);
+
+const activeContact = computed(() => contactById.value(props.contactId));
+
+const composePopoverClass = computed(() => {
+  return props.alignPosition === 'right'
+    ? 'absolute ltr:left-0 ltr:right-[unset] rtl:right-0 rtl:left-[unset]'
+    : 'absolute rtl:left-0 rtl:right-[unset] ltr:right-0 ltr:left-[unset]';
+});
+
+const onContactSearch = debounce(
+  async query => {
+    isSearching.value = true;
+    contacts.value = [];
+    try {
+      contacts.value = await searchContacts(query);
+      isSearching.value = false;
+    } catch (error) {
+      useAlert(t('COMPOSE_NEW_CONVERSATION.CONTACT_SEARCH.ERROR_MESSAGE'));
+    } finally {
+      isSearching.value = false;
+    }
+  },
+  300,
+  false
+);
+
+const resetContacts = () => {
+  contacts.value = [];
+};
+
+const handleSelectedContact = async ({ value, action, ...rest }) => {
+  let contact;
+  if (action === 'create') {
+    isCreatingContact.value = true;
+    try {
+      contact = await createNewContact(value);
+      isCreatingContact.value = false;
+    } catch (error) {
+      isCreatingContact.value = false;
+      return;
+    }
+  } else {
+    contact = rest;
+  }
+  selectedContact.value = contact;
+  if (contact?.id) {
+    isFetchingInboxes.value = true;
+    try {
+      const contactableInboxes = await fetchContactableInboxes(contact.id);
+      selectedContact.value.contactInboxes = contactableInboxes;
+      isFetchingInboxes.value = false;
+    } catch (error) {
+      isFetchingInboxes.value = false;
+    }
+  }
+};
+
+const handleTargetInbox = inbox => {
+  targetInbox.value = inbox;
+  resetContacts();
+};
+
+const clearSelectedContact = () => {
+  selectedContact.value = null;
+  targetInbox.value = null;
+};
+
+const closeCompose = () => {
+  showComposeNewConversation.value = false;
+  selectedContact.value = null;
+  targetInbox.value = null;
+  resetContacts();
+};
+
+const createConversation = async ({ payload, isFromWhatsApp }) => {
+  try {
+    const data = await store.dispatch('contactConversations/create', {
+      params: payload,
+      isFromWhatsApp,
+    });
+    const action = {
+      type: 'link',
+      to: `/app/accounts/${data.account_id}/conversations/${data.id}`,
+      message: t('COMPOSE_NEW_CONVERSATION.FORM.GO_TO_CONVERSATION'),
+    };
+    closeCompose();
+    useAlert(t('COMPOSE_NEW_CONVERSATION.FORM.SUCCESS_MESSAGE'), action);
+    return true; // Return success
+  } catch (error) {
+    useAlert(
+      error instanceof ExceptionWithMessage
+        ? error.data
+        : t('COMPOSE_NEW_CONVERSATION.FORM.ERROR_MESSAGE')
+    );
+    return false; // Return failure
+  }
+};
+
+const toggle = () => {
+  showComposeNewConversation.value = !showComposeNewConversation.value;
+};
+
+watch(
+  activeContact,
+  () => {
+    if (activeContact.value && props.contactId) {
+      const contactInboxes = activeContact.value?.contactInboxes || [];
+      selectedContact.value = {
+        ...activeContact.value,
+        contactInboxes: processContactableInboxes(contactInboxes),
+      };
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+onMounted(() => resetContacts());
+
+const keyboardEvents = {
+  Escape: {
+    action: () => {
+      if (showComposeNewConversation.value) {
+        showComposeNewConversation.value = false;
+      }
+    },
+  },
+};
+
+useKeyboardEvents(keyboardEvents);
+</script>
+
+<template>
+  <div
+    v-on-click-outside="() => (showComposeNewConversation = false)"
+    class="relative z-40"
+  >
+    <slot
+      name="trigger"
+      :is-open="showComposeNewConversation"
+      :toggle="toggle"
+    />
+    <ComposeNewConversationForm
+      v-if="showComposeNewConversation"
+      :contacts="contacts"
+      :contact-id="contactId"
+      :is-loading="isSearching"
+      :current-user="currentUser"
+      :selected-contact="selectedContact"
+      :target-inbox="targetInbox"
+      :is-creating-contact="isCreatingContact"
+      :is-fetching-inboxes="isFetchingInboxes"
+      :is-direct-uploads-enabled="directUploadsEnabled"
+      :contact-conversations-ui-flags="uiFlags"
+      :contacts-ui-flags="contactsUiFlags"
+      :class="composePopoverClass"
+      @search-contacts="onContactSearch"
+      @reset-contact-search="resetContacts"
+      @update-selected-contact="handleSelectedContact"
+      @update-target-inbox="handleTargetInbox"
+      @clear-selected-contact="clearSelectedContact"
+      @create-conversation="createConversation"
+      @discard="closeCompose"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue

@@ -0,0 +1,251 @@
+<script setup>
+import { defineAsyncComponent, ref, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useFileUpload } from 'dashboard/composables/useFileUpload';
+import { vOnClickOutside } from '@vueuse/components';
+import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import FileUpload from 'vue-upload-component';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import WhatsAppOptions from './WhatsAppOptions.vue';
+
+const props = defineProps({
+  attachedFiles: {
+    type: Array,
+    default: () => [],
+  },
+  isWhatsappInbox: {
+    type: Boolean,
+    default: false,
+  },
+  isEmailOrWebWidgetInbox: {
+    type: Boolean,
+    default: false,
+  },
+  isTwilioSmsInbox: {
+    type: Boolean,
+    default: false,
+  },
+  messageTemplates: {
+    type: Array,
+    default: () => [],
+  },
+  channelType: {
+    type: String,
+    default: '',
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  disableSendButton: {
+    type: Boolean,
+    default: false,
+  },
+  hasNoInbox: {
+    type: Boolean,
+    default: false,
+  },
+  isDropdownActive: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'discard',
+  'sendMessage',
+  'sendWhatsappMessage',
+  'insertEmoji',
+  'addSignature',
+  'removeSignature',
+  'attachFile',
+]);
+
+const { t } = useI18n();
+
+const uploadAttachment = ref(null);
+const isEmojiPickerOpen = ref(false);
+
+const EmojiInput = defineAsyncComponent(
+  () => import('shared/components/emoji/EmojiInput.vue')
+);
+
+const messageSignature = useMapGetter('getMessageSignature');
+const signatureToApply = computed(() => messageSignature.value);
+
+const {
+  fetchSignatureFlagFromUISettings,
+  setSignatureFlagForInbox,
+  isEditorHotKeyEnabled,
+} = useUISettings();
+
+const sendWithSignature = computed(() => {
+  return fetchSignatureFlagFromUISettings(props.channelType);
+});
+
+const isSignatureEnabledForInbox = computed(() => {
+  return props.isEmailOrWebWidgetInbox && sendWithSignature.value;
+});
+
+const setSignature = () => {
+  if (signatureToApply.value) {
+    if (isSignatureEnabledForInbox.value) {
+      emit('addSignature', signatureToApply.value);
+    } else {
+      emit('removeSignature', signatureToApply.value);
+    }
+  }
+};
+
+const toggleMessageSignature = () => {
+  setSignatureFlagForInbox(props.channelType, !sendWithSignature.value);
+  setSignature();
+};
+
+const onClickInsertEmoji = emoji => {
+  emit('insertEmoji', emoji);
+};
+
+const { onFileUpload } = useFileUpload({
+  isATwilioSMSChannel: props.isTwilioSmsInbox,
+  attachFile: ({ blob, file }) => {
+    if (!file) return;
+    const reader = new FileReader();
+    reader.readAsDataURL(file.file);
+    reader.onloadend = () => {
+      const newFile = {
+        resource: blob || file,
+        isPrivate: false,
+        thumb: reader.result,
+        blobSignedId: blob?.signed_id,
+      };
+      emit('attachFile', [...props.attachedFiles, newFile]);
+    };
+  },
+});
+
+const sendButtonLabel = computed(() => {
+  const keyCode = isEditorHotKeyEnabled('cmd_enter') ? '⌘ + ↵' : '↵';
+  return t('COMPOSE_NEW_CONVERSATION.FORM.ACTION_BUTTONS.SEND', {
+    keyCode,
+  });
+});
+
+const keyboardEvents = {
+  Enter: {
+    action: () => {
+      if (
+        isEditorHotKeyEnabled('enter') &&
+        !props.isWhatsappInbox &&
+        !props.isDropdownActive
+      ) {
+        emit('sendMessage');
+      }
+    },
+  },
+  '$mod+Enter': {
+    action: () => {
+      if (
+        isEditorHotKeyEnabled('cmd_enter') &&
+        !props.isWhatsappInbox &&
+        !props.isDropdownActive
+      ) {
+        emit('sendMessage');
+      }
+    },
+  },
+};
+useKeyboardEvents(keyboardEvents);
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between w-full h-[52px] gap-2 px-4 py-3"
+  >
+    <div class="flex items-center gap-2">
+      <WhatsAppOptions
+        v-if="isWhatsappInbox"
+        :message-templates="messageTemplates"
+        @send-message="emit('sendWhatsappMessage', $event)"
+      />
+      <div
+        v-if="!isWhatsappInbox && !hasNoInbox"
+        v-on-click-outside="() => (isEmojiPickerOpen = false)"
+        class="relative"
+      >
+        <Button
+          icon="i-lucide-smile-plus"
+          color="slate"
+          size="sm"
+          class="!w-10"
+          @click="isEmojiPickerOpen = !isEmojiPickerOpen"
+        />
+        <EmojiInput
+          v-if="isEmojiPickerOpen"
+          class="left-0 top-full mt-1.5"
+          :on-click="onClickInsertEmoji"
+        />
+      </div>
+      <FileUpload
+        v-if="isEmailOrWebWidgetInbox"
+        ref="uploadAttachment"
+        input-id="composeNewConversationAttachment"
+        :size="4096 * 4096"
+        :accept="ALLOWED_FILE_TYPES"
+        multiple
+        :drop-directory="false"
+        :data="{
+          direct_upload_url: '/rails/active_storage/direct_uploads',
+          direct_upload: true,
+        }"
+        class="p-px"
+        @input-file="onFileUpload"
+      >
+        <Button
+          icon="i-lucide-plus"
+          color="slate"
+          size="sm"
+          class="!w-10 relative"
+        />
+      </FileUpload>
+      <Button
+        v-if="isEmailOrWebWidgetInbox"
+        icon="i-lucide-signature"
+        color="slate"
+        size="sm"
+        class="!w-10"
+        @click="toggleMessageSignature"
+      />
+    </div>
+
+    <div class="flex items-center gap-2">
+      <Button
+        :label="t('COMPOSE_NEW_CONVERSATION.FORM.ACTION_BUTTONS.DISCARD')"
+        variant="faded"
+        color="slate"
+        size="sm"
+        class="!text-xs font-medium"
+        @click="emit('discard')"
+      />
+      <Button
+        v-if="!isWhatsappInbox"
+        :label="sendButtonLabel"
+        size="sm"
+        class="!text-xs font-medium"
+        :disabled="isLoading || disableSendButton"
+        :is-loading="isLoading"
+        @click="emit('sendMessage')"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.emoji-dialog::before {
+  @apply hidden;
+}
+</style>

app/javascript/dashboard/components-next/NewConversation/components/AttachmentPreviews.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { computed } from 'vue';
+import { fileNameWithEllipsis } from '@chatwoot/utils';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:attachments']);
+
+const isTypeImage = file => {
+  const type = file.content_type || file.type;
+  return type.includes('image');
+};
+
+const filteredImageAttachments = computed(() => {
+  return props.attachments.filter(attachment =>
+    isTypeImage(attachment.resource)
+  );
+});
+
+const filteredNonImageAttachments = computed(() => {
+  return props.attachments.filter(
+    attachment => !isTypeImage(attachment.resource)
+  );
+});
+
+const removeAttachment = id => {
+  const updatedAttachments = props.attachments.filter(
+    attachment => attachment.resource.id !== id
+  );
+  emit('update:attachments', updatedAttachments);
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <div
+      v-if="filteredImageAttachments.length > 0"
+      class="flex flex-wrap gap-3"
+    >
+      <div
+        v-for="attachment in filteredImageAttachments"
+        :key="attachment.id"
+        class="relative group/image w-[72px] h-[72px]"
+      >
+        <img
+          class="object-cover w-[72px] h-[72px] rounded-lg"
+          :src="attachment.thumb"
+        />
+        <Button
+          variant="ghost"
+          icon="i-lucide-trash"
+          color="slate"
+          class="absolute top-1 right-1 !w-5 !h-5 transition-opacity duration-150 ease-in-out opacity-0 group-hover/image:opacity-100"
+          @click="removeAttachment(attachment.resource.id)"
+        />
+      </div>
+    </div>
+    <div
+      v-if="filteredNonImageAttachments.length > 0"
+      class="flex flex-wrap gap-3"
+    >
+      <div
+        v-for="attachment in filteredNonImageAttachments"
+        :key="attachment.id"
+        class="max-w-[300px] inline-flex items-center h-8 min-w-0 bg-n-alpha-2 dark:bg-n-solid-3 rounded-lg gap-3 ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2"
+      >
+        <span class="text-sm font-medium text-n-slate-11">
+          {{ fileNameWithEllipsis(attachment.resource) }}
+        </span>
+        <Button
+          variant="ghost"
+          icon="i-lucide-x"
+          color="slate"
+          size="xs"
+          class="shrink-0 !h-5 !w-5"
+          @click="removeAttachment(attachment.resource.id)"
+        />
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue

@@ -0,0 +1,336 @@
+<script setup>
+import { reactive, ref, computed } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { required, requiredIf } from '@vuelidate/validators';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import {
+  appendSignature,
+  removeSignature,
+} from 'dashboard/helper/editorHelper';
+import {
+  buildContactableInboxesList,
+  prepareNewMessagePayload,
+  prepareWhatsAppMessagePayload,
+} from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper.js';
+
+import ContactSelector from './ContactSelector.vue';
+import InboxSelector from './InboxSelector.vue';
+import EmailOptions from './EmailOptions.vue';
+import MessageEditor from './MessageEditor.vue';
+import ActionButtons from './ActionButtons.vue';
+import InboxEmptyState from './InboxEmptyState.vue';
+import AttachmentPreviews from './AttachmentPreviews.vue';
+
+const props = defineProps({
+  contacts: { type: Array, default: () => [] },
+  contactId: { type: String, default: null },
+  selectedContact: { type: Object, default: null },
+  targetInbox: { type: Object, default: null },
+  currentUser: { type: Object, default: null },
+  isCreatingContact: { type: Boolean, default: false },
+  isFetchingInboxes: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  isDirectUploadsEnabled: { type: Boolean, default: false },
+  contactConversationsUiFlags: { type: Object, default: null },
+  contactsUiFlags: { type: Object, default: null },
+});
+
+const emit = defineEmits([
+  'searchContacts',
+  'discard',
+  'updateSelectedContact',
+  'updateTargetInbox',
+  'clearSelectedContact',
+  'createConversation',
+]);
+
+const showContactsDropdown = ref(false);
+const showInboxesDropdown = ref(false);
+const showCcEmailsDropdown = ref(false);
+const showBccEmailsDropdown = ref(false);
+
+const isCreating = computed(() => props.contactConversationsUiFlags.isCreating);
+
+const state = reactive({
+  message: '',
+  subject: '',
+  ccEmails: '',
+  bccEmails: '',
+  attachedFiles: [],
+});
+
+const inboxTypes = computed(() => ({
+  isEmail: props.targetInbox?.channelType === INBOX_TYPES.EMAIL,
+  isTwilio: props.targetInbox?.channelType === INBOX_TYPES.TWILIO,
+  isWhatsapp: props.targetInbox?.channelType === INBOX_TYPES.WHATSAPP,
+  isWebWidget: props.targetInbox?.channelType === INBOX_TYPES.WEB,
+  isApi: props.targetInbox?.channelType === INBOX_TYPES.API,
+  isEmailOrWebWidget:
+    props.targetInbox?.channelType === INBOX_TYPES.EMAIL ||
+    props.targetInbox?.channelType === INBOX_TYPES.WEB,
+  isTwilioSMS:
+    props.targetInbox?.channelType === INBOX_TYPES.TWILIO &&
+    props.targetInbox?.medium === 'sms',
+}));
+
+const whatsappMessageTemplates = computed(() =>
+  Object.keys(props.targetInbox?.messageTemplates || {}).length
+    ? props.targetInbox.messageTemplates
+    : []
+);
+
+const inboxChannelType = computed(() => props.targetInbox?.channelType || '');
+
+const validationRules = computed(() => ({
+  selectedContact: { required },
+  targetInbox: { required },
+  message: { required: requiredIf(!inboxTypes.value.isWhatsapp) },
+  subject: { required: requiredIf(inboxTypes.value.isEmail) },
+}));
+
+const v$ = useVuelidate(validationRules, {
+  selectedContact: computed(() => props.selectedContact),
+  targetInbox: computed(() => props.targetInbox),
+  message: computed(() => state.message),
+  subject: computed(() => state.subject),
+});
+
+const validationStates = computed(() => ({
+  isContactInvalid:
+    v$.value.selectedContact.$dirty && v$.value.selectedContact.$invalid,
+  isInboxInvalid: v$.value.targetInbox.$dirty && v$.value.targetInbox.$invalid,
+  isSubjectInvalid: v$.value.subject.$dirty && v$.value.subject.$invalid,
+  isMessageInvalid: v$.value.message.$dirty && v$.value.message.$invalid,
+}));
+
+const newMessagePayload = () => {
+  const { message, subject, ccEmails, bccEmails, attachedFiles } = state;
+  return prepareNewMessagePayload({
+    targetInbox: props.targetInbox,
+    selectedContact: props.selectedContact,
+    message,
+    subject,
+    ccEmails,
+    bccEmails,
+    currentUser: props.currentUser,
+    attachedFiles,
+    directUploadsEnabled: props.isDirectUploadsEnabled,
+  });
+};
+
+const contactableInboxesList = computed(() => {
+  return buildContactableInboxesList(props.selectedContact?.contactInboxes);
+});
+
+const showNoInboxAlert = computed(() => {
+  return (
+    props.selectedContact &&
+    contactableInboxesList.value.length === 0 &&
+    !props.contactsUiFlags.isFetchingInboxes &&
+    !props.isFetchingInboxes
+  );
+});
+
+const isAnyDropdownActive = computed(() => {
+  return (
+    showContactsDropdown.value ||
+    showInboxesDropdown.value ||
+    showCcEmailsDropdown.value ||
+    showBccEmailsDropdown.value
+  );
+});
+
+const handleContactSearch = value => {
+  showContactsDropdown.value = true;
+  emit('searchContacts', {
+    keys: ['email', 'phone_number', 'name'],
+    query: value,
+  });
+};
+
+const handleDropdownUpdate = (type, value) => {
+  if (type === 'cc') {
+    showCcEmailsDropdown.value = value;
+  } else if (type === 'bcc') {
+    showBccEmailsDropdown.value = value;
+  } else {
+    showContactsDropdown.value = value;
+  }
+};
+
+const searchCcEmails = value => {
+  showCcEmailsDropdown.value = true;
+  emit('searchContacts', { keys: ['email'], query: value });
+};
+
+const searchBccEmails = value => {
+  showBccEmailsDropdown.value = true;
+  emit('searchContacts', { keys: ['email'], query: value });
+};
+
+const setSelectedContact = async ({ value, action, ...rest }) => {
+  v$.value.$reset();
+  emit('updateSelectedContact', { value, action, ...rest });
+  showContactsDropdown.value = false;
+  showInboxesDropdown.value = true;
+};
+
+const handleInboxAction = ({ value, action, ...rest }) => {
+  v$.value.$reset();
+  emit('updateTargetInbox', { ...rest });
+  showInboxesDropdown.value = false;
+  state.attachedFiles = [];
+};
+
+const removeTargetInbox = value => {
+  v$.value.$reset();
+  emit('updateTargetInbox', value);
+  state.attachedFiles = [];
+};
+
+const clearSelectedContact = () => {
+  emit('clearSelectedContact');
+  state.attachedFiles = [];
+};
+
+const onClickInsertEmoji = emoji => {
+  state.message += emoji;
+};
+
+const handleAddSignature = signature => {
+  state.message = appendSignature(state.message, signature);
+};
+
+const handleRemoveSignature = signature => {
+  state.message = removeSignature(state.message, signature);
+};
+
+const handleAttachFile = files => {
+  state.attachedFiles = files;
+};
+
+const clearForm = () => {
+  Object.assign(state, {
+    message: '',
+    subject: '',
+    ccEmails: '',
+    bccEmails: '',
+    attachedFiles: [],
+  });
+  v$.value.$reset();
+};
+
+const handleSendMessage = async () => {
+  const isValid = await v$.value.$validate();
+  if (!isValid) return;
+
+  try {
+    const success = await emit('createConversation', {
+      payload: newMessagePayload(),
+      isFromWhatsApp: false,
+    });
+    if (success) {
+      clearForm();
+    }
+  } catch (error) {
+    // Form will not be cleared if conversation creation fails
+  }
+};
+
+const handleSendWhatsappMessage = async ({ message, templateParams }) => {
+  const whatsappMessagePayload = prepareWhatsAppMessagePayload({
+    targetInbox: props.targetInbox,
+    selectedContact: props.selectedContact,
+    message,
+    templateParams,
+    currentUser: props.currentUser,
+  });
+  await emit('createConversation', {
+    payload: whatsappMessagePayload,
+    isFromWhatsApp: true,
+  });
+};
+</script>
+
+<template>
+  <div
+    class="w-[670px] mt-2 divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
+  >
+    <ContactSelector
+      :contacts="contacts"
+      :selected-contact="selectedContact"
+      :show-contacts-dropdown="showContactsDropdown"
+      :is-loading="isLoading"
+      :is-creating-contact="isCreatingContact"
+      :contact-id="contactId"
+      :contactable-inboxes-list="contactableInboxesList"
+      :show-inboxes-dropdown="showInboxesDropdown"
+      :has-errors="validationStates.isContactInvalid"
+      @search-contacts="handleContactSearch"
+      @set-selected-contact="setSelectedContact"
+      @clear-selected-contact="clearSelectedContact"
+      @update-dropdown="handleDropdownUpdate"
+    />
+    <InboxEmptyState v-if="showNoInboxAlert" />
+    <InboxSelector
+      v-else
+      :target-inbox="targetInbox"
+      :selected-contact="selectedContact"
+      :show-inboxes-dropdown="showInboxesDropdown"
+      :contactable-inboxes-list="contactableInboxesList"
+      :has-errors="validationStates.isInboxInvalid"
+      @update-inbox="removeTargetInbox"
+      @toggle-dropdown="showInboxesDropdown = $event"
+      @handle-inbox-action="handleInboxAction"
+    />
+
+    <EmailOptions
+      v-if="inboxTypes.isEmail"
+      v-model:cc-emails="state.ccEmails"
+      v-model:bcc-emails="state.bccEmails"
+      v-model:subject="state.subject"
+      :contacts="contacts"
+      :show-cc-emails-dropdown="showCcEmailsDropdown"
+      :show-bcc-emails-dropdown="showBccEmailsDropdown"
+      :is-loading="isLoading"
+      :has-errors="validationStates.isSubjectInvalid"
+      @search-cc-emails="searchCcEmails"
+      @search-bcc-emails="searchBccEmails"
+      @update-dropdown="handleDropdownUpdate"
+    />
+
+    <MessageEditor
+      v-if="!inboxTypes.isWhatsapp && !showNoInboxAlert"
+      v-model="state.message"
+      :is-email-or-web-widget-inbox="inboxTypes.isEmailOrWebWidget"
+      :has-errors="validationStates.isMessageInvalid"
+      :has-attachments="state.attachedFiles.length > 0"
+    />
+
+    <AttachmentPreviews
+      v-if="state.attachedFiles.length > 0"
+      :attachments="state.attachedFiles"
+      @update:attachments="state.attachedFiles = $event"
+    />
+
+    <ActionButtons
+      :attached-files="state.attachedFiles"
+      :is-whatsapp-inbox="inboxTypes.isWhatsapp"
+      :is-email-or-web-widget-inbox="inboxTypes.isEmailOrWebWidget"
+      :is-twilio-sms-inbox="inboxTypes.isTwilioSMS"
+      :message-templates="whatsappMessageTemplates"
+      :channel-type="inboxChannelType"
+      :is-loading="isCreating"
+      :disable-send-button="isCreating"
+      :has-no-inbox="showNoInboxAlert"
+      :is-dropdown-active="isAnyDropdownActive"
+      @insert-emoji="onClickInsertEmoji"
+      @add-signature="handleAddSignature"
+      @remove-signature="handleRemoveSignature"
+      @attach-file="handleAttachFile"
+      @discard="$emit('discard')"
+      @send-message="handleSendMessage"
+      @send-whatsapp-message="handleSendWhatsappMessage"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue

@@ -0,0 +1,154 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { INPUT_TYPES } from 'dashboard/components-next/taginput/helper/tagInputHelper.js';
+
+import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  contacts: {
+    type: Array,
+    required: true,
+  },
+  selectedContact: {
+    type: Object,
+    default: null,
+  },
+  showContactsDropdown: {
+    type: Boolean,
+    required: true,
+  },
+  isLoading: {
+    type: Boolean,
+    required: true,
+  },
+  isCreatingContact: {
+    type: Boolean,
+    required: true,
+  },
+  contactId: {
+    type: String,
+    default: null,
+  },
+  contactableInboxesList: {
+    type: Array,
+    default: () => [],
+  },
+  showInboxesDropdown: {
+    type: Boolean,
+    required: true,
+  },
+  hasErrors: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'searchContacts',
+  'setSelectedContact',
+  'clearSelectedContact',
+  'updateDropdown',
+]);
+
+const i18nPrefix = 'COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR';
+const { t } = useI18n();
+
+const inputType = ref(INPUT_TYPES.EMAIL);
+
+const contactsList = computed(() => {
+  return props.contacts?.map(({ name, id, thumbnail, email, ...rest }) => ({
+    id,
+    label: email ? `${name} (${email})` : name,
+    value: id,
+    thumbnail: { name, src: thumbnail },
+    ...rest,
+    name,
+    email,
+    action: 'contact',
+  }));
+});
+
+const selectedContactLabel = computed(() => {
+  const { name, email = '', phoneNumber = '' } = props.selectedContact || {};
+  if (email) {
+    return `${name} (${email})`;
+  }
+  if (phoneNumber) {
+    return `${name} (${phoneNumber})`;
+  }
+  return name || '';
+});
+
+const errorClass = computed(() => {
+  return props.hasErrors
+    ? '[&_input]:placeholder:!text-n-ruby-9 [&_input]:dark:placeholder:!text-n-ruby-9'
+    : '';
+});
+
+const handleInput = value => {
+  // Update input type based on whether input starts with '+'
+  // If it does, set input type to 'tel'
+  // Otherwise, set input type to 'email'
+  inputType.value = value.startsWith('+') ? INPUT_TYPES.TEL : INPUT_TYPES.EMAIL;
+  emit('searchContacts', value);
+};
+</script>
+
+<template>
+  <div class="relative flex-1 px-4 py-3 overflow-y-visible">
+    <div class="flex items-baseline w-full gap-3 min-h-7">
+      <label class="text-sm font-medium text-n-slate-11 whitespace-nowrap">
+        {{ t(`${i18nPrefix}.LABEL`) }}
+      </label>
+
+      <div
+        v-if="isCreatingContact"
+        class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 px-3 min-h-7 min-w-0"
+      >
+        <span class="text-sm truncate text-n-slate-12">
+          {{ t(`${i18nPrefix}.CONTACT_CREATING`) }}
+        </span>
+      </div>
+      <div
+        v-else-if="selectedContact"
+        class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 px-3 min-h-7 min-w-0"
+      >
+        <span class="text-sm truncate text-n-slate-12">
+          {{
+            isCreatingContact
+              ? t(`${i18nPrefix}.CONTACT_CREATING`)
+              : selectedContactLabel
+          }}
+        </span>
+        <Button
+          variant="ghost"
+          icon="i-lucide-x"
+          color="slate"
+          :disabled="contactId"
+          size="xs"
+          @click="emit('clearSelectedContact')"
+        />
+      </div>
+      <TagInput
+        v-else
+        :placeholder="t(`${i18nPrefix}.TAG_INPUT_PLACEHOLDER`)"
+        mode="single"
+        :menu-items="contactsList"
+        :show-dropdown="showContactsDropdown"
+        :is-loading="isLoading"
+        :disabled="contactableInboxesList?.length > 0 && showInboxesDropdown"
+        allow-create
+        :type="inputType"
+        class="flex-1 min-h-7"
+        :class="errorClass"
+        focus-on-mount
+        @input="handleInput"
+        @on-click-outside="emit('updateDropdown', 'contacts', false)"
+        @add="emit('setSelectedContact', $event)"
+        @remove="emit('clearSelectedContact')"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
+
+const props = defineProps({
+  contacts: { type: Array, required: true },
+  showCcEmailsDropdown: { type: Boolean, required: false },
+  showBccEmailsDropdown: { type: Boolean, required: false },
+  isLoading: { type: Boolean, default: false },
+  hasErrors: { type: Boolean, default: false },
+});
+
+const emit = defineEmits([
+  'searchCcEmails',
+  'searchBccEmails',
+  'updateDropdown',
+]);
+
+const i18nPrefix = `COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS`;
+
+const showBccInput = ref(false);
+
+const toggleBccInput = () => {
+  showBccInput.value = !showBccInput.value;
+};
+
+const subject = defineModel('subject', { type: String, default: '' });
+const ccEmails = defineModel('ccEmails', { type: String, default: '' });
+const bccEmails = defineModel('bccEmails', { type: String, default: '' });
+
+const { t } = useI18n();
+
+// Convert string to array for TagInput
+const ccEmailsArray = computed(() =>
+  props.ccEmails ? props.ccEmails.split(',').map(email => email.trim()) : []
+);
+
+const bccEmailsArray = computed(() =>
+  props.bccEmails ? props.bccEmails.split(',').map(email => email.trim()) : []
+);
+
+const contactEmailsList = computed(() => {
+  return props.contacts?.map(({ name, id, email }) => ({
+    id,
+    label: email,
+    email,
+    thumbnail: { name: name, src: '' },
+    value: id,
+    action: 'email',
+  }));
+});
+
+// Handle updates from TagInput and convert array back to string
+const handleCcUpdate = value => {
+  ccEmails.value = value.join(',');
+};
+
+const handleBccUpdate = value => {
+  bccEmails.value = value.join(',');
+};
+
+const inputClass = computed(() => {
+  return props.hasErrors
+    ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
+    : '';
+});
+</script>
+
+<template>
+  <div class="flex flex-col divide-y divide-n-strong">
+    <div class="flex items-baseline flex-1 w-full h-8 gap-3 px-4 py-3">
+      <InlineInput
+        v-model="subject"
+        :placeholder="t(`${i18nPrefix}.SUBJECT_PLACEHOLDER`)"
+        :label="t(`${i18nPrefix}.SUBJECT_LABEL`)"
+        focus-on-mount
+        :custom-input-class="inputClass"
+      />
+    </div>
+    <div class="flex items-baseline flex-1 w-full gap-3 px-4 py-3 min-h-8">
+      <label
+        class="mb-0.5 text-sm font-medium whitespace-nowrap text-n-slate-11"
+      >
+        {{ t(`${i18nPrefix}.CC_LABEL`) }}
+      </label>
+      <div class="flex items-center w-full gap-3 min-h-7">
+        <TagInput
+          :model-value="ccEmailsArray"
+          :placeholder="t(`${i18nPrefix}.CC_PLACEHOLDER`)"
+          :menu-items="contactEmailsList"
+          :show-dropdown="showCcEmailsDropdown"
+          :is-loading="isLoading"
+          type="email"
+          class="flex-1 min-h-7"
+          @focus="emit('updateDropdown', 'cc', true)"
+          @input="emit('searchCcEmails', $event)"
+          @on-click-outside="emit('updateDropdown', 'cc', false)"
+          @update:model-value="handleCcUpdate"
+        />
+        <Button
+          :label="t(`${i18nPrefix}.BCC_BUTTON`)"
+          variant="ghost"
+          size="sm"
+          color="slate"
+          class="flex-shrink-0"
+          @click="toggleBccInput"
+        />
+      </div>
+    </div>
+    <div
+      v-if="showBccInput"
+      class="flex items-baseline flex-1 w-full gap-3 px-4 py-3 min-h-8"
+    >
+      <label
+        class="mb-0.5 text-sm font-medium whitespace-nowrap text-n-slate-11"
+      >
+        {{ t(`${i18nPrefix}.BCC_LABEL`) }}
+      </label>
+      <TagInput
+        :model-value="bccEmailsArray"
+        :placeholder="t(`${i18nPrefix}.BCC_PLACEHOLDER`)"
+        :menu-items="contactEmailsList"
+        :show-dropdown="showBccEmailsDropdown"
+        :is-loading="isLoading"
+        type="email"
+        class="flex-1 min-h-7"
+        focus-on-mount
+        @focus="emit('updateDropdown', 'bcc', true)"
+        @input="emit('searchBccEmails', $event)"
+        @on-click-outside="emit('updateDropdown', 'bcc', false)"
+        @update:model-value="handleBccUpdate"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/NewConversation/components/InboxEmptyState.vue

@@ -0,0 +1,9 @@
+<template>
+  <div
+    class="flex items-center w-full px-4 py-3 dark:bg-n-amber-11/15 bg-n-amber-3"
+  >
+    <span class="text-sm dark:text-n-amber-11 text-n-amber-11">
+      {{ $t('COMPOSE_NEW_CONVERSATION.FORM.NO_INBOX_ALERT') }}
+    </span>
+  </div>
+</template>

app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { vOnClickOutside } from '@vueuse/components';
+import { generateLabelForContactableInboxesList } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper.js';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  targetInbox: {
+    type: Object,
+    default: null,
+  },
+  selectedContact: {
+    type: Object,
+    default: null,
+  },
+  showInboxesDropdown: {
+    type: Boolean,
+    required: true,
+  },
+  contactableInboxesList: {
+    type: Array,
+    default: () => [],
+  },
+  hasErrors: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'updateInbox',
+  'toggleDropdown',
+  'handleInboxAction',
+]);
+
+const { t } = useI18n();
+
+const targetInboxLabel = computed(() => {
+  return generateLabelForContactableInboxesList(props.targetInbox);
+});
+</script>
+
+<template>
+  <div
+    class="flex items-center flex-1 w-full gap-3 px-4 py-3 overflow-y-visible"
+  >
+    <label class="mb-0.5 text-sm font-medium text-n-slate-11 whitespace-nowrap">
+      {{ t('COMPOSE_NEW_CONVERSATION.FORM.INBOX_SELECTOR.LABEL') }}
+    </label>
+    <div
+      v-if="targetInbox"
+      class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 truncate px-3 h-7 min-w-0"
+    >
+      <span class="text-sm truncate text-n-slate-12">
+        {{ targetInboxLabel }}
+      </span>
+      <Button
+        variant="ghost"
+        icon="i-lucide-x"
+        color="slate"
+        size="xs"
+        class="flex-shrink-0"
+        @click="emit('updateInbox', null)"
+      />
+    </div>
+    <div
+      v-else
+      v-on-click-outside="() => emit('toggleDropdown', false)"
+      class="relative flex items-center h-7"
+    >
+      <Button
+        :label="t('COMPOSE_NEW_CONVERSATION.FORM.INBOX_SELECTOR.BUTTON')"
+        variant="link"
+        size="sm"
+        :color="hasErrors ? 'ruby' : 'slate'"
+        :disabled="!selectedContact"
+        class="hover:!no-underline"
+        @click="emit('toggleDropdown', !showInboxesDropdown)"
+      />
+      <DropdownMenu
+        v-if="contactableInboxesList?.length > 0 && showInboxesDropdown"
+        :menu-items="contactableInboxesList"
+        class="left-0 z-[100] top-8 overflow-y-auto max-h-60 w-fit max-w-sm dark:!outline-n-slate-5"
+        @action="emit('handleInboxAction', $event)"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+
+defineProps({
+  isEmailOrWebWidgetInbox: {
+    type: Boolean,
+    required: true,
+  },
+  hasErrors: {
+    type: Boolean,
+    default: false,
+  },
+  hasAttachments: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { t } = useI18n();
+
+const modelValue = defineModel({
+  type: String,
+  default: '',
+});
+</script>
+
+<template>
+  <div
+    v-if="isEmailOrWebWidgetInbox"
+    class="flex-1 h-full"
+    :class="!hasAttachments && 'min-h-[200px]'"
+  >
+    <Editor
+      v-model="modelValue"
+      :placeholder="
+        t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
+      "
+      class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[200px]"
+      :class="
+        hasErrors
+          ? '[&_.empty-node]:before:!text-n-ruby-9 [&_.empty-node]:dark:before:!text-n-ruby-9'
+          : ''
+      "
+      :show-character-count="false"
+    />
+  </div>
+  <div v-else class="flex-1 h-full" :class="!hasAttachments && 'min-h-[200px]'">
+    <TextArea
+      v-model="modelValue"
+      :placeholder="
+        t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
+      "
+      class="!px-0 [&>div]:!px-4 [&>div]:!border-transparent [&>div]:!bg-transparent"
+      auto-height
+      :custom-text-area-class="
+        hasErrors
+          ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
+          : ''
+      "
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import WhatsappTemplateParser from './WhatsappTemplateParser.vue';
+
+const props = defineProps({
+  messageTemplates: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['sendMessage']);
+
+const { t } = useI18n();
+
+// TODO: Remove this when we support all formats
+const formatsToRemove = ['DOCUMENT', 'IMAGE', 'VIDEO'];
+
+const searchQuery = ref('');
+const selectedTemplate = ref(null);
+
+const showTemplatesMenu = ref(false);
+
+const whatsAppTemplateMessages = computed(() => {
+  // Add null check and ensure it's an array
+  const templates = Array.isArray(props.messageTemplates)
+    ? props.messageTemplates
+    : [];
+
+  // TODO: Remove the last filter when we support all formats
+  return templates
+    .filter(template => template?.status?.toLowerCase() === 'approved')
+    .filter(template => {
+      return template?.components?.every(component => {
+        return !formatsToRemove.includes(component.format);
+      });
+    });
+});
+
+const filteredTemplates = computed(() => {
+  return whatsAppTemplateMessages.value.filter(template =>
+    template.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+  );
+});
+
+const getTemplateBody = template => {
+  return template.components.find(component => component.type === 'BODY').text;
+};
+
+const handleTriggerClick = () => {
+  searchQuery.value = '';
+  showTemplatesMenu.value = !showTemplatesMenu.value;
+};
+
+const handleTemplateClick = template => {
+  selectedTemplate.value = template;
+  showTemplatesMenu.value = false;
+};
+
+const handleBack = () => {
+  selectedTemplate.value = null;
+  showTemplatesMenu.value = true;
+};
+
+const handleSendMessage = template => {
+  emit('sendMessage', template);
+  selectedTemplate.value = null;
+};
+</script>
+
+<template>
+  <div class="relative">
+    <Button
+      icon="i-ri-whatsapp-line"
+      :label="t('COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.LABEL')"
+      color="slate"
+      size="sm"
+      :disabled="selectedTemplate"
+      class="!text-xs font-medium"
+      @click="handleTriggerClick"
+    />
+    <div
+      v-if="showTemplatesMenu"
+      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto left-0 flex flex-col gap-2 p-4 items-center w-[350px] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+    >
+      <div class="relative w-full">
+        <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
+        <input
+          v-model="searchQuery"
+          type="search"
+          :placeholder="
+            t(
+              'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.SEARCH_PLACEHOLDER'
+            )
+          "
+          class="w-full h-8 py-2 pl-10 pr-2 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+        />
+      </div>
+      <div
+        v-for="template in filteredTemplates"
+        :key="template.id"
+        class="flex flex-col w-full gap-2 p-2 rounded-lg cursor-pointer dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
+        @click="handleTemplateClick(template)"
+      >
+        <span class="text-sm text-n-slate-12">{{ template.name }}</span>
+        <p class="mb-0 text-xs leading-5 text-n-slate-11 line-clamp-2">
+          {{ getTemplateBody(template) }}
+        </p>
+      </div>
+      <template v-if="filteredTemplates.length === 0">
+        <p class="w-full pt-2 text-sm text-n-slate-11">
+          {{ t('COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.EMPTY_STATE') }}
+        </p>
+      </template>
+    </div>
+    <WhatsappTemplateParser
+      v-if="selectedTemplate"
+      :template="selectedTemplate"
+      @send-message="handleSendMessage"
+      @back="handleBack"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue

@@ -0,0 +1,176 @@
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { requiredIf } from '@vuelidate/validators';
+import { useI18n } from 'vue-i18n';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  template: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['sendMessage', 'back']);
+
+const { t } = useI18n();
+
+const processedParams = ref({});
+
+const templateName = computed(() => {
+  return props.template?.name || '';
+});
+
+const templateString = computed(() => {
+  return props.template?.components?.find(
+    component => component.type === 'BODY'
+  ).text;
+});
+
+const processVariable = str => {
+  return str.replace(/{{|}}/g, '');
+};
+
+const processedString = computed(() => {
+  return templateString.value.replace(/{{([^}]+)}}/g, (match, variable) => {
+    const variableKey = processVariable(variable);
+    return processedParams.value[variableKey] || `{{${variable}}}`;
+  });
+});
+
+const processedStringWithVariableHighlight = computed(() => {
+  const variables = templateString.value.match(/{{([^}]+)}}/g) || [];
+
+  return variables.reduce((result, variable) => {
+    const variableKey = processVariable(variable);
+    const value = processedParams.value[variableKey] || variable;
+    return result.replace(
+      variable,
+      `<span class="break-all text-n-slate-12">${value}</span>`
+    );
+  }, templateString.value);
+});
+
+const rules = computed(() => {
+  const paramRules = {};
+  Object.keys(processedParams.value).forEach(key => {
+    paramRules[key] = { required: requiredIf(true) };
+  });
+  return {
+    processedParams: paramRules,
+  };
+});
+
+const v$ = useVuelidate(rules, { processedParams });
+
+const getFieldErrorType = key => {
+  if (!v$.value.processedParams[key]?.$error) return 'info';
+  return 'error';
+};
+
+const generateVariables = () => {
+  const matchedVariables = templateString.value.match(/{{([^}]+)}}/g);
+  if (!matchedVariables) return;
+
+  const finalVars = matchedVariables.map(i => processVariable(i));
+  processedParams.value = finalVars.reduce((acc, variable) => {
+    acc[variable] = '';
+    return acc;
+  }, {});
+};
+
+const sendMessage = async () => {
+  const isValid = await v$.value.$validate();
+  if (!isValid) return;
+
+  const payload = {
+    message: processedString.value,
+    templateParams: {
+      name: props.template.name,
+      category: props.template.category,
+      language: props.template.language,
+      namespace: props.template.namespace,
+      processed_params: processedParams.value,
+    },
+  };
+  emit('sendMessage', payload);
+};
+
+onMounted(() => {
+  generateVariables();
+});
+</script>
+
+<template>
+  <div
+    class="absolute top-full mt-1.5 max-h-[500px] overflow-y-auto left-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[460px] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+  >
+    <span class="text-sm text-n-slate-12">
+      {{
+        t(
+          'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.TEMPLATE_NAME',
+          { templateName: templateName }
+        )
+      }}
+    </span>
+    <p
+      class="mb-0 text-sm text-n-slate-11"
+      v-html="processedStringWithVariableHighlight"
+    />
+
+    <span
+      v-if="Object.keys(processedParams).length"
+      class="text-sm font-medium text-n-slate-12"
+    >
+      {{
+        t(
+          'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.VARIABLES'
+        )
+      }}
+    </span>
+
+    <div
+      v-for="(variable, key) in processedParams"
+      :key="key"
+      class="flex items-center w-full gap-2"
+    >
+      <span
+        class="flex items-center h-8 text-sm min-w-6 ltr:text-left rtl:text-right text-n-slate-10"
+      >
+        {{ key }}
+      </span>
+      <Input
+        v-model="processedParams[key]"
+        custom-input-class="!h-8 w-full !bg-transparent"
+        class="w-full"
+        :message-type="getFieldErrorType(key)"
+      />
+    </div>
+
+    <div class="flex items-end justify-between w-full gap-3 h-14">
+      <Button
+        :label="
+          t(
+            'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.BACK'
+          )
+        "
+        color="slate"
+        variant="faded"
+        class="w-full font-medium"
+        @click="emit('back')"
+      />
+      <Button
+        :label="
+          t(
+            'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.SEND_MESSAGE'
+          )
+        "
+        class="w-full font-medium"
+        @click="sendMessage"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/NewConversation/components/story/ComposeNewConversationForm.story.vue

@@ -0,0 +1,92 @@
+<script setup>
+import { ref } from 'vue';
+import { contacts, activeContact, emailInbox, currentUser } from './fixtures';
+import ComposeNewConversationForm from '../ComposeNewConversationForm.vue';
+
+const selectedContact = ref(activeContact);
+const targetInbox = ref(emailInbox);
+
+// Event handlers
+const onSearchContacts = query => {
+  console.log('Searching contacts:', query);
+};
+
+const onUpdateSelectedContact = contact => {
+  console.log('Selected contact updated:', contact);
+};
+
+const onUpdateTargetInbox = inbox => {
+  console.log('Target inbox updated:', inbox);
+  targetInbox.value = inbox;
+  console.log('Target inbox updated:', inbox);
+};
+
+const onClearSelectedContact = () => {
+  console.log('Contact cleared');
+};
+
+const onCreateConversation = payload => {
+  console.log('Creating conversation:', payload);
+};
+
+const onDiscard = () => {
+  console.log('Form discarded');
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Compose/ComposeNewConversationForm"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="With all props">
+      <div class="h-[600px] w-full relative">
+        <ComposeNewConversationForm
+          :contacts="contacts"
+          contact-id=""
+          :is-loading="false"
+          :current-user="currentUser"
+          :selected-contact="selectedContact"
+          :target-inbox="targetInbox"
+          :is-creating-contact="false"
+          is-fetching-inboxes
+          is-direct-uploads-enabled
+          :contact-conversations-ui-flags="{ isCreating: false }"
+          :contacts-ui-flags="{ isFetching: false }"
+          class="!top-0"
+          @search-contacts="onSearchContacts"
+          @update-selected-contact="onUpdateSelectedContact"
+          @update-target-inbox="onUpdateTargetInbox"
+          @clear-selected-contact="onClearSelectedContact"
+          @create-conversation="onCreateConversation"
+          @discard="onDiscard"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With no target inbox">
+      <div class="h-[200px] w-full relative">
+        <ComposeNewConversationForm
+          :contacts="contacts"
+          contact-id=""
+          :is-loading="false"
+          :current-user="currentUser"
+          :selected-contact="{ ...selectedContact, contactInboxes: [] }"
+          :target-inbox="null"
+          :is-creating-contact="false"
+          :is-fetching-inboxes="false"
+          is-direct-uploads-enabled
+          :contact-conversations-ui-flags="{ isCreating: false }"
+          :contacts-ui-flags="{ isFetching: false }"
+          class="!top-0"
+          @search-contacts="onSearchContacts"
+          @update-selected-contact="onUpdateSelectedContact"
+          @update-target-inbox="onUpdateTargetInbox"
+          @clear-selected-contact="onClearSelectedContact"
+          @create-conversation="onCreateConversation"
+          @discard="onDiscard"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/NewConversation/components/story/fixtures.js

@@ -0,0 +1,168 @@
+export const contacts = [
+  {
+    additionalAttributes: {
+      city: 'kerala',
+      country: 'India',
+      description: 'Curious about the web. ',
+      companyName: 'Chatwoot',
+      countryCode: '',
+      socialProfiles: {
+        github: 'abozler',
+        twitter: 'ozler',
+        facebook: 'abozler',
+        linkedin: 'abozler',
+        instagram: 'ozler',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'ozler@chatwoot.com',
+    id: 29,
+    name: 'Abraham Ozlers',
+    phoneNumber: '+246232222222',
+    identifier: null,
+    thumbnail:
+      'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBc0FCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--c20b627b384f5981112e949b8414cd4d3e5912ee/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/Avatar%201.20.41%E2%80%AFAM.png',
+    customAttributes: {
+      dateContact: '2024-02-01T00:00:00.000Z',
+      linkContact: 'https://staging.chatwoot.com/app/accounts/3/contacts-new',
+      listContact: 'Not spam',
+      numberContact: '12',
+    },
+    lastActivityAt: 1712127410,
+    createdAt: 1712127389,
+  },
+];
+
+export const activeContact = {
+  email: 'ozler@chatwoot.com',
+  id: 29,
+  label: 'Abraham Ozlers (ozler@chatwoot.com)',
+  name: 'Abraham Ozlers',
+  thumbnail: {
+    name: 'Abraham Ozlers',
+    src: 'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBc0FCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--c20b627b384f5981112e949b8414cd4d3e5912ee/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/Avatar%201.20.41%E2%80%AFAM.png',
+  },
+  contactInboxes: [
+    {
+      id: 7,
+      label: 'PaperLayer Email (testba@paperlayer.test)',
+      name: 'PaperLayer Email',
+      email: 'testba@paperlayer.test',
+      channelType: 'Channel::Email',
+    },
+    {
+      id: 8,
+      label: 'PaperLayer WhatsApp',
+      name: 'PaperLayer WhatsApp',
+      sourceId: '123456',
+      phoneNumber: '+1223233434',
+      channelType: 'Channel::Whatsapp',
+      messageTemplates: [
+        {
+          id: '1',
+          name: 'shipment_confirmation',
+          status: 'APPROVED',
+          category: 'UTILITY',
+          language: 'en_US',
+          components: [
+            {
+              text: '{{1}}, great news! Your order {{2}} has shipped.\n\nTracking #: {{3}}\nEstimated delivery: {{4}}\n\nWe will provide updates until delivery.',
+              type: 'BODY',
+              example: {
+                bodyText: [['John', '#12345', 'ZK4539O2311J', 'Jan 1, 2024']],
+              },
+            },
+            {
+              type: 'BUTTONS',
+              buttons: [
+                {
+                  url: 'https://www.example.com/',
+                  text: 'Track shipment',
+                  type: 'URL',
+                },
+              ],
+            },
+          ],
+          parameterFormat: 'POSITIONAL',
+          libraryTemplateName: 'shipment_confirmation_2',
+        },
+        {
+          id: '2',
+          name: 'otp_test',
+          status: 'APPROVED',
+          category: 'AUTHENTICATION',
+          language: 'en_US',
+          components: [
+            {
+              text: 'Use code *{{1}}* to authorize your transaction.',
+              type: 'BODY',
+              example: {
+                bodyText: [['123456']],
+              },
+            },
+            {
+              type: 'BUTTONS',
+              buttons: [
+                {
+                  url: 'https://www.example.com/otp/code/?otp_type=ZERO_TAP&cta_display_name=Autofill&package_name=com.app&signature_hash=weew&code=otp{{1}}',
+                  text: 'Copy code',
+                  type: 'URL',
+                  example: [
+                    'https://www.example.com/otp/code/?otp_type=ZERO_TAP&cta_display_name=Autofill&package_name=com.app&signature_hash=weew&code=otp123456',
+                  ],
+                },
+              ],
+            },
+          ],
+          parameterFormat: 'POSITIONAL',
+          libraryTemplateName: 'verify_transaction_1',
+          messageSendTtlSeconds: 900,
+        },
+        {
+          id: '3',
+          name: 'hello_world',
+          status: 'APPROVED',
+          category: 'UTILITY',
+          language: 'en_US',
+          components: [
+            {
+              text: 'Hello World',
+              type: 'HEADER',
+              format: 'TEXT',
+            },
+            {
+              text: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
+              type: 'BODY',
+            },
+            {
+              text: 'WhatsApp Business Platform sample message',
+              type: 'FOOTER',
+            },
+          ],
+          parameterFormat: 'POSITIONAL',
+        },
+      ],
+    },
+    {
+      id: 9,
+      label: 'PaperLayer API',
+      name: 'PaperLayer API',
+      email: '',
+      channelType: 'Channel::Api',
+    },
+  ],
+};
+
+export const emailInbox = {
+  id: 7,
+  label: 'PaperLayer Email (testba@paperlayer.test)',
+  name: 'PaperLayer Email',
+  email: 'testba@paperlayer.test',
+  channelType: 'Channel::Email',
+};
+
+export const currentUser = {
+  id: 1,
+  name: 'John Doe',
+  email: 'john@example.com',
+};

app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js

@@ -0,0 +1,221 @@
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import { getInboxIconByType } from 'dashboard/helper/inbox';
+import camelcaseKeys from 'camelcase-keys';
+import ContactAPI from 'dashboard/api/contacts';
+
+const CHANNEL_PRIORITY = {
+  'Channel::Email': 1,
+  'Channel::Whatsapp': 2,
+  'Channel::Sms': 3,
+  'Channel::TwilioSms': 4,
+  'Channel::WebWidget': 5,
+  'Channel::Api': 6,
+};
+
+export const generateLabelForContactableInboxesList = ({
+  name,
+  email,
+  channelType,
+  phoneNumber,
+}) => {
+  if (channelType === INBOX_TYPES.EMAIL) {
+    return `${name} (${email})`;
+  }
+  if (
+    channelType === INBOX_TYPES.TWILIO ||
+    channelType === INBOX_TYPES.WHATSAPP
+  ) {
+    return `${name} (${phoneNumber})`;
+  }
+  return name;
+};
+
+const transformInbox = ({
+  name,
+  id,
+  email,
+  channelType,
+  phoneNumber,
+  ...rest
+}) => ({
+  id,
+  icon: getInboxIconByType(channelType, phoneNumber, 'line'),
+  label: generateLabelForContactableInboxesList({
+    name,
+    email,
+    channelType,
+    phoneNumber,
+  }),
+  action: 'inbox',
+  value: id,
+  name,
+  email,
+  phoneNumber,
+  channelType,
+  ...rest,
+});
+
+export const compareInboxes = (a, b) => {
+  // Channels that have no priority defined should come at the end.
+  const priorityA = CHANNEL_PRIORITY[a.channelType] || 999;
+  const priorityB = CHANNEL_PRIORITY[b.channelType] || 999;
+
+  if (priorityA !== priorityB) {
+    return priorityA - priorityB;
+  }
+
+  const nameA = a.name || '';
+  const nameB = b.name || '';
+  return nameA.localeCompare(nameB);
+};
+
+export const buildContactableInboxesList = contactInboxes => {
+  if (!contactInboxes) return [];
+
+  return contactInboxes.map(transformInbox).sort(compareInboxes);
+};
+
+export const getCapitalizedNameFromEmail = email => {
+  const name = email.match(/^([^@]*)@/)?.[1] || email.split('@')[0];
+  return name.charAt(0).toUpperCase() + name.slice(1);
+};
+
+export const processContactableInboxes = inboxes => {
+  return inboxes.map(inbox => ({
+    ...inbox.inbox,
+    sourceId: inbox.sourceId,
+  }));
+};
+
+export const prepareAttachmentPayload = (
+  attachedFiles,
+  directUploadsEnabled
+) => {
+  const files = [];
+  attachedFiles.forEach(attachment => {
+    if (directUploadsEnabled) {
+      files.push(attachment.blobSignedId);
+    } else {
+      files.push(attachment.resource.file);
+    }
+  });
+  return files;
+};
+
+export const prepareNewMessagePayload = ({
+  targetInbox,
+  selectedContact,
+  message,
+  subject,
+  ccEmails,
+  bccEmails,
+  currentUser,
+  attachedFiles = [],
+  directUploadsEnabled = false,
+}) => {
+  const payload = {
+    inboxId: targetInbox.id,
+    sourceId: targetInbox.sourceId,
+    contactId: Number(selectedContact.id),
+    message: { content: message },
+    assigneeId: currentUser.id,
+  };
+
+  if (attachedFiles?.length) {
+    payload.files = prepareAttachmentPayload(
+      attachedFiles,
+      directUploadsEnabled
+    );
+  }
+
+  if (subject) {
+    payload.mailSubject = subject;
+  }
+
+  if (ccEmails) {
+    payload.message.cc_emails = ccEmails;
+  }
+
+  if (bccEmails) {
+    payload.message.bcc_emails = bccEmails;
+  }
+
+  return payload;
+};
+
+export const prepareWhatsAppMessagePayload = ({
+  targetInbox,
+  selectedContact,
+  message,
+  templateParams,
+  currentUser,
+}) => {
+  return {
+    inboxId: targetInbox.id,
+    sourceId: targetInbox.sourceId,
+    contactId: selectedContact.id,
+    message: { content: message, template_params: templateParams },
+    assigneeId: currentUser.id,
+  };
+};
+
+export const generateContactQuery = ({ keys = ['email'], query }) => {
+  return {
+    payload: keys.map(key => {
+      const filterPayload = {
+        attribute_key: key,
+        filter_operator: 'contains',
+        values: [query],
+        attribute_model: 'standard',
+      };
+      if (keys.findIndex(k => k === key) !== keys.length - 1) {
+        filterPayload.query_operator = 'or';
+      }
+      return filterPayload;
+    }),
+  };
+};
+
+// API Calls
+export const searchContacts = async ({ keys, query }) => {
+  const {
+    data: { payload },
+  } = await ContactAPI.filter(
+    undefined,
+    'name',
+    generateContactQuery({ keys, query })
+  );
+  const camelCasedPayload = camelcaseKeys(payload, { deep: true });
+  // Filter contacts that have either phone_number or email
+  const filteredPayload = camelCasedPayload?.filter(
+    contact => contact.phoneNumber || contact.email
+  );
+  return filteredPayload || [];
+};
+
+export const createNewContact = async input => {
+  const payload = {
+    name: input.startsWith('+')
+      ? input.slice(1) // Remove the '+' prefix if it exists
+      : getCapitalizedNameFromEmail(input),
+    ...(input.startsWith('+') ? { phone_number: input } : { email: input }),
+  };
+
+  const {
+    data: {
+      payload: { contact: newContact },
+    },
+  } = await ContactAPI.create(payload);
+
+  return camelcaseKeys(newContact, { deep: true });
+};
+
+export const fetchContactableInboxes = async contactId => {
+  const {
+    data: { payload: inboxes = [] },
+  } = await ContactAPI.getContactableInboxes(contactId);
+
+  const convertInboxesToCamelKeys = camelcaseKeys(inboxes, { deep: true });
+
+  return processContactableInboxes(convertInboxesToCamelKeys);
+};

app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js

@@ -0,0 +1,558 @@
+import { describe, it, expect, vi } from 'vitest';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import ContactAPI from 'dashboard/api/contacts';
+import * as helpers from '../composeConversationHelper';
+
+vi.mock('dashboard/api/contacts');
+
+describe('composeConversationHelper', () => {
+  describe('generateLabelForContactableInboxesList', () => {
+    const contact = {
+      name: 'John Doe',
+      email: 'john@example.com',
+      phoneNumber: '+1234567890',
+    };
+
+    it('generates label for email inbox', () => {
+      expect(
+        helpers.generateLabelForContactableInboxesList({
+          ...contact,
+          channelType: INBOX_TYPES.EMAIL,
+        })
+      ).toBe('John Doe (john@example.com)');
+    });
+
+    it('generates label for twilio inbox', () => {
+      expect(
+        helpers.generateLabelForContactableInboxesList({
+          ...contact,
+          channelType: INBOX_TYPES.TWILIO,
+        })
+      ).toBe('John Doe (+1234567890)');
+    });
+
+    it('generates label for whatsapp inbox', () => {
+      expect(
+        helpers.generateLabelForContactableInboxesList({
+          ...contact,
+          channelType: INBOX_TYPES.WHATSAPP,
+        })
+      ).toBe('John Doe (+1234567890)');
+    });
+
+    it('generates label for other inbox types', () => {
+      expect(
+        helpers.generateLabelForContactableInboxesList({
+          ...contact,
+          channelType: 'Channel::Api',
+        })
+      ).toBe('John Doe');
+    });
+  });
+
+  describe('buildContactableInboxesList', () => {
+    it('returns empty array if no contact inboxes', () => {
+      expect(helpers.buildContactableInboxesList(null)).toEqual([]);
+      expect(helpers.buildContactableInboxesList(undefined)).toEqual([]);
+    });
+
+    it('builds list of contactable inboxes with correct format', () => {
+      const inboxes = [
+        {
+          id: 1,
+          name: 'Email Inbox',
+          email: 'support@example.com',
+          channelType: INBOX_TYPES.EMAIL,
+          phoneNumber: null,
+        },
+      ];
+
+      const result = helpers.buildContactableInboxesList(inboxes);
+      expect(result[0]).toMatchObject({
+        id: 1,
+        icon: 'i-ri-mail-line',
+        label: 'Email Inbox (support@example.com)',
+        action: 'inbox',
+        value: 1,
+        name: 'Email Inbox',
+        email: 'support@example.com',
+        channelType: INBOX_TYPES.EMAIL,
+      });
+    });
+  });
+
+  describe('getCapitalizedNameFromEmail', () => {
+    it('extracts and capitalizes name from email', () => {
+      expect(helpers.getCapitalizedNameFromEmail('john.doe@example.com')).toBe(
+        'John.doe'
+      );
+      expect(helpers.getCapitalizedNameFromEmail('jane@example.com')).toBe(
+        'Jane'
+      );
+    });
+  });
+
+  describe('processContactableInboxes', () => {
+    it('processes inboxes with correct structure', () => {
+      const inboxes = [
+        {
+          inbox: { id: 1, name: 'Inbox 1' },
+          sourceId: 'source1',
+        },
+      ];
+
+      const result = helpers.processContactableInboxes(inboxes);
+      expect(result[0]).toEqual({
+        id: 1,
+        name: 'Inbox 1',
+        sourceId: 'source1',
+      });
+    });
+  });
+
+  describe('prepareAttachmentPayload', () => {
+    it('prepares direct upload files', () => {
+      const files = [{ blobSignedId: 'signed1' }];
+      expect(helpers.prepareAttachmentPayload(files, true)).toEqual([
+        'signed1',
+      ]);
+    });
+
+    it('prepares regular files', () => {
+      const files = [{ resource: { file: 'file1' } }];
+      expect(helpers.prepareAttachmentPayload(files, false)).toEqual(['file1']);
+    });
+  });
+
+  describe('prepareNewMessagePayload', () => {
+    const baseParams = {
+      targetInbox: { id: 1, sourceId: 'source1' },
+      selectedContact: { id: '2' },
+      message: 'Hello',
+      currentUser: { id: 3 },
+    };
+
+    it('prepares basic message payload', () => {
+      const result = helpers.prepareNewMessagePayload(baseParams);
+      expect(result).toEqual({
+        inboxId: 1,
+        sourceId: 'source1',
+        contactId: 2,
+        message: { content: 'Hello' },
+        assigneeId: 3,
+      });
+    });
+
+    it('includes optional fields when provided', () => {
+      const result = helpers.prepareNewMessagePayload({
+        ...baseParams,
+        subject: 'Test',
+        ccEmails: 'cc@test.com',
+        bccEmails: 'bcc@test.com',
+        attachedFiles: [{ blobSignedId: 'file1' }],
+        directUploadsEnabled: true,
+      });
+
+      expect(result).toMatchObject({
+        mailSubject: 'Test',
+        message: {
+          content: 'Hello',
+          cc_emails: 'cc@test.com',
+          bcc_emails: 'bcc@test.com',
+        },
+        files: ['file1'],
+      });
+    });
+  });
+
+  describe('prepareWhatsAppMessagePayload', () => {
+    it('prepares whatsapp message payload', () => {
+      const params = {
+        targetInbox: { id: 1, sourceId: 'source1' },
+        selectedContact: { id: 2 },
+        message: 'Hello',
+        templateParams: { param1: 'value1' },
+        currentUser: { id: 3 },
+      };
+
+      const result = helpers.prepareWhatsAppMessagePayload(params);
+      expect(result).toEqual({
+        inboxId: 1,
+        sourceId: 'source1',
+        contactId: 2,
+        message: {
+          content: 'Hello',
+          template_params: { param1: 'value1' },
+        },
+        assigneeId: 3,
+      });
+    });
+  });
+
+  describe('generateContactQuery', () => {
+    it('generates correct query structure for contact search', () => {
+      const query = 'test@example.com';
+      const expected = {
+        payload: [
+          {
+            attribute_key: 'email',
+            filter_operator: 'contains',
+            values: [query],
+            attribute_model: 'standard',
+          },
+        ],
+      };
+
+      expect(helpers.generateContactQuery({ keys: ['email'], query })).toEqual(
+        expected
+      );
+    });
+
+    it('handles empty query', () => {
+      const expected = {
+        payload: [
+          {
+            attribute_key: 'email',
+            filter_operator: 'contains',
+            values: [''],
+            attribute_model: 'standard',
+          },
+        ],
+      };
+
+      expect(
+        helpers.generateContactQuery({ keys: ['email'], query: '' })
+      ).toEqual(expected);
+    });
+
+    it('handles mutliple keys', () => {
+      const expected = {
+        payload: [
+          {
+            attribute_key: 'email',
+            filter_operator: 'contains',
+            values: ['john'],
+            attribute_model: 'standard',
+            query_operator: 'or',
+          },
+          {
+            attribute_key: 'phone_number',
+            filter_operator: 'contains',
+            values: ['john'],
+            attribute_model: 'standard',
+          },
+        ],
+      };
+
+      expect(
+        helpers.generateContactQuery({
+          keys: ['email', 'phone_number'],
+          query: 'john',
+        })
+      ).toEqual(expected);
+    });
+  });
+
+  describe('API calls', () => {
+    describe('searchContacts', () => {
+      it('searches contacts and returns camelCase results', async () => {
+        const mockPayload = [
+          {
+            id: 1,
+            name: 'John Doe',
+            email: 'john@example.com',
+            phone_number: '+1234567890',
+            created_at: '2023-01-01',
+          },
+        ];
+
+        ContactAPI.filter.mockResolvedValue({
+          data: { payload: mockPayload },
+        });
+
+        const result = await helpers.searchContacts({
+          keys: ['email'],
+          query: 'john',
+        });
+
+        expect(result).toEqual([
+          {
+            id: 1,
+            name: 'John Doe',
+            email: 'john@example.com',
+            phoneNumber: '+1234567890',
+            createdAt: '2023-01-01',
+          },
+        ]);
+
+        expect(ContactAPI.filter).toHaveBeenCalledWith(undefined, 'name', {
+          payload: [
+            {
+              attribute_key: 'email',
+              filter_operator: 'contains',
+              values: ['john'],
+              attribute_model: 'standard',
+            },
+          ],
+        });
+      });
+
+      it('searches contacts and returns only contacts with email or phone number', async () => {
+        const mockPayload = [
+          {
+            id: 1,
+            name: 'John Doe',
+            email: 'john@example.com',
+            phone_number: '+1234567890',
+            created_at: '2023-01-01',
+          },
+          {
+            id: 2,
+            name: 'Jane Doe',
+            email: null,
+            phone_number: null,
+            created_at: '2023-01-01',
+          },
+          {
+            id: 3,
+            name: 'Bob Smith',
+            email: 'bob@example.com',
+            phone_number: null,
+            created_at: '2023-01-01',
+          },
+        ];
+
+        ContactAPI.filter.mockResolvedValue({
+          data: { payload: mockPayload },
+        });
+
+        const result = await helpers.searchContacts({
+          keys: ['email'],
+          query: 'john',
+        });
+
+        // Should only return contacts with either email or phone number
+        expect(result).toEqual([
+          {
+            id: 1,
+            name: 'John Doe',
+            email: 'john@example.com',
+            phoneNumber: '+1234567890',
+            createdAt: '2023-01-01',
+          },
+          {
+            id: 3,
+            name: 'Bob Smith',
+            email: 'bob@example.com',
+            phoneNumber: null,
+            createdAt: '2023-01-01',
+          },
+        ]);
+
+        expect(ContactAPI.filter).toHaveBeenCalledWith(undefined, 'name', {
+          payload: [
+            {
+              attribute_key: 'email',
+              filter_operator: 'contains',
+              values: ['john'],
+              attribute_model: 'standard',
+            },
+          ],
+        });
+      });
+
+      it('handles empty search results', async () => {
+        ContactAPI.filter.mockResolvedValue({
+          data: { payload: [] },
+        });
+
+        const result = await helpers.searchContacts('nonexistent');
+        expect(result).toEqual([]);
+      });
+
+      it('transforms nested objects to camelCase', async () => {
+        const mockPayload = [
+          {
+            id: 1,
+            name: 'John Doe',
+            phone_number: '+1234567890',
+            contact_inboxes: [
+              {
+                inbox_id: 1,
+                source_id: 'source1',
+                created_at: '2023-01-01',
+              },
+            ],
+            custom_attributes: {
+              custom_field_name: 'value',
+            },
+          },
+        ];
+
+        ContactAPI.filter.mockResolvedValue({
+          data: { payload: mockPayload },
+        });
+
+        const result = await helpers.searchContacts('test');
+
+        expect(result).toEqual([
+          {
+            id: 1,
+            name: 'John Doe',
+            phoneNumber: '+1234567890',
+            contactInboxes: [
+              {
+                inboxId: 1,
+                sourceId: 'source1',
+                createdAt: '2023-01-01',
+              },
+            ],
+            customAttributes: {
+              customFieldName: 'value',
+            },
+          },
+        ]);
+      });
+    });
+
+    describe('createNewContact', () => {
+      it('creates new contact with capitalized name', async () => {
+        const mockContact = { id: 1, name: 'John', email: 'john@example.com' };
+        ContactAPI.create.mockResolvedValue({
+          data: { payload: { contact: mockContact } },
+        });
+
+        const result = await helpers.createNewContact('john@example.com');
+        expect(result).toEqual(mockContact);
+        expect(ContactAPI.create).toHaveBeenCalledWith({
+          name: 'John',
+          email: 'john@example.com',
+        });
+      });
+
+      it('creates new contact with phone number', async () => {
+        const mockContact = {
+          id: 1,
+          name: '919999999999',
+          phone_number: '+919999999999',
+        };
+        ContactAPI.create.mockResolvedValue({
+          data: { payload: { contact: mockContact } },
+        });
+
+        const result = await helpers.createNewContact('+919999999999');
+        expect(result).toEqual({
+          id: 1,
+          name: '919999999999',
+          phoneNumber: '+919999999999',
+        });
+        expect(ContactAPI.create).toHaveBeenCalledWith({
+          name: '919999999999',
+          phone_number: '+919999999999',
+        });
+      });
+    });
+
+    describe('fetchContactableInboxes', () => {
+      it('fetches and processes contactable inboxes', async () => {
+        const mockInboxes = [
+          {
+            inbox: { id: 1, name: 'Inbox 1' },
+            sourceId: 'source1',
+          },
+        ];
+        ContactAPI.getContactableInboxes.mockResolvedValue({
+          data: { payload: mockInboxes },
+        });
+
+        const result = await helpers.fetchContactableInboxes(1);
+        expect(result[0]).toEqual({
+          id: 1,
+          name: 'Inbox 1',
+          sourceId: 'source1',
+        });
+        expect(ContactAPI.getContactableInboxes).toHaveBeenCalledWith(1);
+      });
+
+      it('returns empty array when no inboxes found', async () => {
+        ContactAPI.getContactableInboxes.mockResolvedValue({
+          data: { payload: [] },
+        });
+
+        const result = await helpers.fetchContactableInboxes(1);
+        expect(result).toEqual([]);
+      });
+    });
+  });
+});
+
+describe('compareInboxes', () => {
+  it('should sort inboxes by channel priority', () => {
+    const inboxes = [
+      { channelType: 'Channel::Api', name: 'API Inbox' },
+      { channelType: 'Channel::Email', name: 'Email Inbox' },
+      { channelType: 'Channel::WebWidget', name: 'Widget' },
+      { channelType: 'Channel::Whatsapp', name: 'WhatsApp' },
+    ];
+
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+
+    expect(sorted[0].channelType).toBe('Channel::Email');
+    expect(sorted[1].channelType).toBe('Channel::Whatsapp');
+    expect(sorted[2].channelType).toBe('Channel::WebWidget');
+    expect(sorted[3].channelType).toBe('Channel::Api');
+  });
+
+  it('should sort SMS channels correctly', () => {
+    const inboxes = [
+      { channelType: 'Channel::TwilioSms', name: 'Twilio' },
+      { channelType: 'Channel::Sms', name: 'Regular SMS' },
+    ];
+
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+
+    expect(sorted[0].channelType).toBe('Channel::Sms');
+    expect(sorted[1].channelType).toBe('Channel::TwilioSms');
+  });
+
+  it('should sort by name when channel types are same', () => {
+    const inboxes = [
+      { channelType: 'Channel::Email', name: 'Support' },
+      { channelType: 'Channel::Email', name: 'Marketing' },
+      { channelType: 'Channel::Email', name: 'Billing' },
+    ];
+
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+
+    expect(sorted.map(inbox => inbox.name)).toEqual([
+      'Billing',
+      'Marketing',
+      'Support',
+    ]);
+  });
+
+  it('should put channels without priority at the end', () => {
+    const inboxes = [
+      { channelType: 'Channel::Unknown', name: 'Unknown' },
+      { channelType: 'Channel::Email', name: 'Email' },
+      { channelType: 'Channel::LineChannel', name: 'Line' },
+      { channelType: 'Channel::Whatsapp', name: 'WhatsApp' },
+    ];
+
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+
+    expect(sorted.map(i => i.channelType)).toEqual([
+      'Channel::Email',
+      'Channel::Whatsapp',
+
+      'Channel::LineChannel',
+      'Channel::Unknown',
+    ]);
+  });
+
+  it('should handle empty array', () => {
+    const inboxes = [];
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+    expect(sorted).toEqual([]);
+  });
+});

app/javascript/dashboard/components-next/avatar/Avatar.vue

@@ -132,7 +132,7 @@ const iconStyles = computed(() => ({
 }));
 
 const initialsStyles = computed(() => ({
-  fontSize: `${props.size > 32 ? 16 : props.size / 2}px`,
+  fontSize: `${Math.min(props.size / 2.5, 24)}px`,
 }));
 
 const invalidateCurrentImage = () => {

app/javascript/dashboard/components-next/copilot/Copilot.story.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { ref } from 'vue';
+import Copilot from './Copilot.vue';
+
+const supportAgent = {
+  available_name: 'Pranav Raj',
+  avatar_url:
+    'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBd3FodGc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--d218a325af0ef45061eefd352f8efb9ac84275e8/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lKYW5CbFp3WTZCa1ZVT2hOeVpYTnBlbVZmZEc5ZlptbHNiRnNIYVFINk1BPT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--533c3ad7218e24c4b0e8f8959dc1953ce1d279b9/1707423736896.jpeg',
+};
+
+const messages = ref([
+  {
+    id: 1,
+    role: 'user',
+    content: 'Hi there! How can I help you today?',
+  },
+  {
+    id: 2,
+    role: 'assistant',
+    content:
+      "Hello! I'm the AI assistant. I'll be helping the support team today.",
+  },
+]);
+
+const isCaptainTyping = ref(false);
+
+const sendMessage = message => {
+  // Add user message
+  messages.value.push({
+    id: messages.value.length + 1,
+    role: 'user',
+    content: message,
+  });
+
+  // Simulate AI response
+  isCaptainTyping.value = true;
+  setTimeout(() => {
+    isCaptainTyping.value = false;
+    messages.value.push({
+      id: messages.value.length + 1,
+      role: 'assistant',
+      content: 'This is a simulated AI response.',
+    });
+  }, 2000);
+};
+</script>
+
+<template>
+  <Story
+    title="Captain/Copilot"
+    :layout="{ type: 'grid', width: '400px', height: '800px' }"
+  >
+    <Copilot
+      :support-agent="supportAgent"
+      :messages="messages"
+      :is-captain-typing="isCaptainTyping"
+      @send-message="sendMessage"
+    />
+  </Story>
+</template>

app/javascript/dashboard/components-next/copilot/Copilot.vue

@@ -0,0 +1,73 @@
+<script setup>
+import CopilotInput from './CopilotInput.vue';
+import CopilotLoader from './CopilotLoader.vue';
+import CopilotAgentMessage from './CopilotAgentMessage.vue';
+import CopilotAssistantMessage from './CopilotAssistantMessage.vue';
+import { nextTick, ref, watch } from 'vue';
+
+const props = defineProps({
+  supportAgent: {
+    type: Object,
+    default: () => ({}),
+  },
+  messages: {
+    type: Array,
+    default: () => [],
+  },
+  isCaptainTyping: {
+    type: Boolean,
+    default: false,
+  },
+  conversationInboxType: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['sendMessage']);
+
+const COPILOT_USER_ROLES = ['assistant', 'system'];
+
+const sendMessage = message => {
+  emit('sendMessage', message);
+};
+const chatContainer = ref(null);
+
+const scrollToBottom = async () => {
+  await nextTick();
+  if (chatContainer.value) {
+    chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
+  }
+};
+
+watch(
+  [() => props.messages, () => props.isCaptainTyping],
+  () => {
+    scrollToBottom();
+  },
+  { deep: true }
+);
+</script>
+
+<template>
+  <div class="flex flex-col ]mx-auto h-full text-sm leading-6 tracking-tight">
+    <div ref="chatContainer" class="flex-1 px-4 py-4 space-y-6 overflow-y-auto">
+      <template v-for="message in messages" :key="message.id">
+        <CopilotAgentMessage
+          v-if="message.role === 'user'"
+          :support-agent="supportAgent"
+          :message="message"
+        />
+        <CopilotAssistantMessage
+          v-else-if="COPILOT_USER_ROLES.includes(message.role)"
+          :message="message"
+          :conversation-inbox-type="conversationInboxType"
+        />
+      </template>
+
+      <CopilotLoader v-if="isCaptainTyping" />
+    </div>
+
+    <CopilotInput class="mx-3 mt-px mb-4" @send="sendMessage" />
+  </div>
+</template>

app/javascript/dashboard/components-next/copilot/CopilotAgentMessage.vue

@@ -0,0 +1,31 @@
+<script setup>
+import Avatar from '../avatar/Avatar.vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+  supportAgent: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-row gap-2">
+    <Avatar
+      :name="supportAgent.available_name"
+      :src="supportAgent.avatar_url"
+      :size="24"
+      rounded-full
+    />
+    <div class="space-y-1 text-n-slate-12">
+      <div class="font-medium">{{ $t('CAPTAIN.COPILOT.YOU') }}</div>
+      <div class="break-words">
+        {{ message.content }}
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { computed } from 'vue';
+import { emitter } from 'shared/helpers/mitt';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Avatar from '../avatar/Avatar.vue';
+
+const props = defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+  conversationInboxType: {
+    type: String,
+    required: true,
+  },
+});
+
+const insertIntoRichEditor = computed(() => {
+  return [INBOX_TYPES.WEB, INBOX_TYPES.EMAIL].includes(
+    props.conversationInboxType
+  );
+});
+
+const useCopilotResponse = () => {
+  if (insertIntoRichEditor.value) {
+    emitter.emit(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, props.message?.content);
+  } else {
+    emitter.emit(BUS_EVENTS.INSERT_INTO_NORMAL_EDITOR, props.message?.content);
+  }
+};
+</script>
+
+<template>
+  <div class="flex flex-row gap-2">
+    <Avatar
+      name="Captain Copilot"
+      icon-name="i-woot-captain"
+      :size="24"
+      rounded-full
+    />
+    <div class="flex flex-col gap-1 text-n-slate-12">
+      <div class="font-medium">{{ $t('CAPTAIN.NAME') }}</div>
+      <div class="break-words">
+        {{ message.content }}
+      </div>
+      <div class="flex flex-row mt-1">
+        <Button
+          :label="$t('CAPTAIN.COPILOT.USE')"
+          faded
+          sm
+          slate
+          @click="useCopilotResponse"
+        />
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/copilot/CopilotInput.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { ref } from 'vue';
+
+const emit = defineEmits(['send']);
+const message = ref('');
+
+const sendMessage = () => {
+  if (message.value.trim()) {
+    emit('send', message.value);
+    message.value = '';
+  }
+};
+</script>
+
+<template>
+  <form
+    class="border border-n-weak bg-n-alpha-3 rounded-lg h-12 flex"
+    @submit.prevent="sendMessage"
+  >
+    <input
+      v-model="message"
+      type="text"
+      :placeholder="$t('CAPTAIN.COPILOT.SEND_MESSAGE')"
+      class="w-full reset-base bg-transparent px-4 py-3 text-n-slate-11 text-sm"
+      @keyup.enter="sendMessage"
+    />
+    <button
+      class="h-auto w-12 flex items-center justify-center text-n-slate-11"
+      type="submit"
+    >
+      <i class="i-ph-arrow-up" />
+    </button>
+  </form>
+</template>

app/javascript/dashboard/components-next/copilot/CopilotLoader.story.vue

@@ -0,0 +1,12 @@
+<script setup>
+import CopilotLoader from './CopilotLoader.vue';
+</script>
+
+<template>
+  <Story
+    title="Captain/CopilotLoader"
+    :layout="{ type: 'grid', width: '400px', height: '800px' }"
+  >
+    <CopilotLoader />
+  </Story>
+</template>

app/javascript/dashboard/components-next/copilot/CopilotLoader.vue

@@ -0,0 +1,22 @@
+<script>
+// Copilot Loader Component
+</script>
+
+<template>
+  <div class="flex justify-start">
+    <div class="flex items-center space-x-2">
+      <span class="text-n-iris-11 font-medium">
+        {{ $t('CAPTAIN.COPILOT.LOADER') }}
+      </span>
+      <div class="flex space-x-1">
+        <div
+          class="w-2 h-2 rounded-full bg-n-iris-9 animate-bounce [animation-delay:-0.3s]"
+        />
+        <div
+          class="w-2 h-2 rounded-full bg-n-iris-9 animate-bounce [animation-delay:-0.15s]"
+        />
+        <div class="w-2 h-2 rounded-full bg-n-iris-9 animate-bounce" />
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue

@@ -25,6 +25,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  isSearching: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['action']);
@@ -71,8 +75,8 @@ onMounted(() => {
       />
     </div>
     <button
-      v-for="item in filteredMenuItems"
-      :key="item.action"
+      v-for="(item, index) in filteredMenuItems"
+      :key="index"
       class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 transition-all duration-200 ease-in-out border-0 rounded-lg z-60 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
       :class="{
         'bg-n-alpha-1 dark:bg-n-solid-active': item.isSelected,
@@ -81,7 +85,6 @@ onMounted(() => {
       }"
       :disabled="item.disabled"
       @click="handleAction(item)"
-      @keydown.enter="handleAction(item)"
     >
       <slot name="thumbnail" :item="item">
         <Avatar
@@ -92,7 +95,7 @@ onMounted(() => {
           rounded-full
         />
       </slot>
-      <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0" />
+      <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0 size-3.5" />
       <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
       <span v-if="item.label" class="min-w-0 text-sm truncate">{{
         item.label
@@ -102,7 +105,11 @@ onMounted(() => {
       v-if="filteredMenuItems.length === 0"
       class="text-sm text-n-slate-11 px-2 py-1.5"
     >
-      {{ t('DROPDOWN_MENU.EMPTY_STATE') }}
+      {{
+        isSearching
+          ? t('DROPDOWN_MENU.SEARCHING')
+          : t('DROPDOWN_MENU.EMPTY_STATE')
+      }}
     </div>
   </div>
 </template>

app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue

@@ -21,9 +21,9 @@ provideDropdownContext({
 </script>
 
 <template>
-  <div class="relative space-y-2">
+  <div v-on-click-outside="closeMenu" class="relative space-y-2">
     <slot name="trigger" :is-open :toggle="() => toggle()" />
-    <div v-if="isOpen" v-on-click-outside="closeMenu" class="absolute">
+    <div v-if="isOpen" class="absolute">
       <slot />
     </div>
   </div>

app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue

@@ -6,7 +6,8 @@ import { useDropdownContext } from './provider.js';
 const props = defineProps({
   label: { type: String, default: '' },
   icon: { type: [String, Object, Function], default: '' },
-  link: { type: String, default: '' },
+  link: { type: [String, Object], default: '' },
+  nativeLink: { type: Boolean, default: false },
   click: { type: Function, default: null },
   preserveOpen: { type: Boolean, default: false },
 });
@@ -18,7 +19,13 @@ defineOptions({
 const { closeMenu } = useDropdownContext();
 
 const componentIs = computed(() => {
-  if (props.link) return 'router-link';
+  if (props.link) {
+    if (props.nativeLink && typeof props.link === 'string') {
+      return 'a';
+    }
+
+    return 'router-link';
+  }
   if (props.click) return 'button';
 
   return 'div';
@@ -41,7 +48,8 @@ const triggerClick = () => {
       :class="{
         'hover:bg-n-alpha-2 rounded-lg w-full gap-3': !$slots.default,
       }"
-      :href="props.link || null"
+      :href="componentIs === 'a' ? props.link : null"
+      :to="componentIs === 'router-link' ? props.link : null"
       @click="triggerClick"
     >
       <slot>

app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue

@@ -4,22 +4,11 @@ import { replaceUnderscoreWithSpace } from './helper/filterHelper.js';
 import Button from 'dashboard/components-next/button/Button.vue';
 
 defineProps({
-  appliedFilters: {
-    type: Array,
-    default: () => [],
-  },
-  maxVisibleFilters: {
-    type: Number,
-    default: 2,
-  },
-  clearButtonLabel: {
-    type: String,
-    default: '',
-  },
-  moreFiltersLabel: {
-    type: String,
-    default: '',
-  },
+  appliedFilters: { type: Array, default: () => [] },
+  maxVisibleFilters: { type: Number, default: 2 },
+  clearButtonLabel: { type: String, default: '' },
+  moreFiltersLabel: { type: String, default: '' },
+  showClearButton: { type: Boolean, default: true },
 });
 
 const emit = defineEmits(['clearFilters', 'openFilter']);
@@ -46,6 +35,9 @@ const formatOperatorLabel = operator => {
 
 const formatFilterValue = value => {
   if (!value) return '';
+  if (Array.isArray(value)) {
+    return value.join(', ');
+  }
   if (typeof value === 'object' && value.name) {
     return value.name;
   }
@@ -55,10 +47,7 @@ const formatFilterValue = value => {
 
 <template>
   <div class="flex flex-wrap items-center w-full gap-2 mx-auto">
-    <template
-      v-for="(filter, index) in appliedFilters"
-      :key="filter.attributeKey"
-    >
+    <template v-for="(filter, index) in appliedFilters" :key="index">
       <div
         v-if="index < maxVisibleFilters"
         class="inline-flex items-center gap-2 h-7"
@@ -107,8 +96,9 @@ const formatFilterValue = value => {
     >
       {{ moreFiltersLabel }}
     </div>
-    <div class="w-px h-3 rounded-lg bg-n-strong" />
+    <div v-if="showClearButton" class="w-px h-3 rounded-lg bg-n-strong" />
     <Button
+      v-if="showClearButton"
       :label="clearButtonLabel"
       size="xs"
       class="!px-1"

app/javascript/dashboard/components-next/flag/Flag.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { h, defineProps } from 'vue';
+
+const props = defineProps({
+  country: { type: String, required: true },
+  squared: { type: Boolean, default: false },
+});
+
+const renderFlag = () => {
+  const classes = ['fi', `fi-${props.country.toLowerCase()}`, 'flex-shrink-0'];
+  if (props.squared) {
+    classes.push('fis');
+  }
+  return h('span', { class: classes });
+};
+</script>
+
+<template>
+  <component :is="renderFlag" />
+</template>
+
+<style>
+@import 'flag-icons/css/flag-icons.min.css';
+</style>

app/javascript/dashboard/components-next/flag/story/Flag.story.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { ref } from 'vue';
+import Flag from '../Flag.vue';
+import countries from 'shared/constants/countries';
+
+const BasicTemplate = {
+  components: { Flag },
+  props: {
+    country: {
+      type: String,
+      default: 'us',
+    },
+    squared: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  template: `
+    <div class="flex items-center gap-4 p-4 border rounded border-n-weak">
+      <Flag :country="country" :squared="squared" />
+    </div>
+  `,
+};
+
+const SizeVariants = {
+  components: { Flag },
+  setup() {
+    const isSquared = ref(false);
+    return { isSquared };
+  },
+  template: `
+    <div class="flex flex-col gap-4">
+      <label class="flex items-center gap-2">
+        <input type="checkbox" v-model="isSquared">
+        Squared flags
+      </label>
+      <div class="flex items-center gap-4 p-4 border rounded border-n-weak">
+        <Flag country="in" class="!size-4" :squared="isSquared" />
+        <Flag country="in" class="!size-6" :squared="isSquared" />
+        <Flag country="in" class="!size-8" :squared="isSquared" />
+        <Flag country="in" class="!size-10" :squared="isSquared" />
+      </div>
+    </div>
+  `,
+};
+
+const AllFlags = {
+  components: { Flag },
+  setup() {
+    const isSquared = ref(false);
+    return { countries, isSquared };
+  },
+  template: `
+    <div class="flex flex-col gap-4">
+      <label class="flex items-center gap-2">
+        <input type="checkbox" v-model="isSquared">
+        Squared flags
+      </label>
+
+      <div class="grid grid-cols-2 gap-4 p-4 border rounded border-n-strong md:grid-cols-3 lg:grid-cols-4">
+        <div 
+          v-for="country in countries" 
+          :key="country.id"
+          class="flex items-center gap-2 px-4 py-2 border rounded border-n-strong"
+        >
+          <Flag 
+            :country="country.id" 
+            :squared="isSquared"
+            class="size-6" 
+          />
+          <span class="text-sm">{{ country.name }}</span>
+        </div>
+      </div>
+    </div>
+  `,
+};
+</script>
+
+<template>
+  <Story title="Components/Flag">
+    <Variant title="Basic Usage">
+      <BasicTemplate country="us" :squared="false" />
+    </Variant>
+
+    <Variant title="Size Variants">
+      <SizeVariants />
+    </Variant>
+
+    <Variant title="All Flags">
+      <AllFlags />
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/icon/FileIcon.story.vue

@@ -0,0 +1,36 @@
+<script setup>
+import FileIcon from './FileIcon.vue';
+const files = [
+  { name: 'file.7z', type: '7z' },
+  { name: 'file.zip', type: 'zip' },
+  { name: 'file.rar', type: 'rar' },
+  { name: 'file.tar', type: 'tar' },
+  { name: 'file.csv', type: 'csv' },
+  { name: 'file.docx', type: 'docx' },
+  { name: 'file.doc', type: 'doc' },
+  { name: 'file.odt', type: 'odt' },
+  { name: 'file.pdf', type: 'pdf' },
+  { name: 'file.ppt', type: 'ppt' },
+  { name: 'file.pptx', type: 'pptx' },
+  { name: 'file.rtf', type: 'rtf' },
+  { name: 'file.json', type: 'json' },
+  { name: 'file.txt', type: 'txt' },
+  { name: 'file.xls', type: 'xls' },
+  { name: 'file.xlsx', type: 'xlsx' },
+];
+</script>
+
+<template>
+  <Story title="Components/Icons/FileIcon">
+    <div class="grid grid-cols-4 gap-5">
+      <div
+        v-for="file in files"
+        :key="file.type"
+        class="flex items-center gap-2"
+      >
+        <FileIcon :file-type="file.type" class="size-6" />
+        <p>{{ file.name }}</p>
+      </div>
+    </div>
+  </Story>
+</template>

app/javascript/dashboard/components-next/icon/FileIcon.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { computed } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+
+const { fileType } = defineProps({
+  fileType: {
+    type: String,
+    required: true,
+  },
+});
+
+const fileTypeIcon = computed(() => {
+  const fileIconMap = {
+    '7z': 'i-woot-file-zip',
+    csv: 'i-woot-file-csv',
+    doc: 'i-woot-file-doc',
+    docx: 'i-woot-file-doc',
+    json: 'i-woot-file-txt',
+    odt: 'i-woot-file-doc',
+    pdf: 'i-woot-file-pdf',
+    ppt: 'i-woot-file-ppt',
+    pptx: 'i-woot-file-ppt',
+    rar: 'i-woot-file-zip',
+    rtf: 'i-woot-file-doc',
+    tar: 'i-woot-file-zip',
+    txt: 'i-woot-file-txt',
+    xls: 'i-woot-file-xls',
+    xlsx: 'i-woot-file-xls',
+    zip: 'i-woot-file-zip',
+  };
+
+  return fileIconMap[fileType] || 'i-teenyicons-text-document-solid';
+});
+</script>
+
+<template>
+  <Icon :icon="fileTypeIcon" />
+</template>

app/javascript/dashboard/components-next/inline-input/InlineInput.vue

@@ -1,9 +1,7 @@
 <script setup>
-defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
+import { ref, onMounted, nextTick } from 'vue';
+
+const props = defineProps({
   type: {
     type: String,
     default: 'text',
@@ -32,13 +30,49 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  focusOnMount: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(['update:modelValue', 'enterPress']);
+const emit = defineEmits(['enterPress', 'input', 'blur', 'focus']);
+
+const modelValue = defineModel({
+  type: [String, Number],
+  default: '',
+});
+
+const inlineInputRef = ref(null);
 
 const onEnterPress = () => {
   emit('enterPress');
 };
+
+const handleInput = event => {
+  emit('input', event.target.value);
+  modelValue.value = event.target.value;
+};
+
+const handleBlur = event => {
+  emit('blur', event.target.value);
+};
+
+const handleFocus = event => {
+  emit('focus', event.target.value);
+};
+
+onMounted(() => {
+  nextTick(() => {
+    if (props.focusOnMount) {
+      inlineInputRef.value?.focus();
+    }
+  });
+});
+
+defineExpose({
+  focus: () => inlineInputRef.value?.focus(),
+});
 </script>
 
 <template>
@@ -49,7 +83,7 @@ const onEnterPress = () => {
       v-if="label"
       :for="id"
       :class="customLabelClass"
-      class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50"
+      class="mb-0.5 text-sm font-medium text-n-slate-11"
     >
       {{ label }}
     </label>
@@ -57,13 +91,16 @@ const onEnterPress = () => {
     <slot name="prefix" />
     <input
       :id="id"
-      :value="modelValue"
+      ref="inlineInputRef"
+      v-model="modelValue"
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled"
       :class="customInputClass"
-      class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-lg bg-transparent dark:bg-transparent placeholder:text-slate-200 dark:placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 text-slate-900 dark:text-white transition-all duration-500 ease-in-out"
-      @input="$emit('update:modelValue', $event.target.value)"
+      class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-none bg-transparent dark:bg-transparent placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 dark:text-n-slate-12 transition-all duration-500 ease-in-out"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
       @keydown.enter.prevent="onEnterPress"
     />
   </div>

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

@@ -0,0 +1,352 @@
+<script setup>
+import { computed, defineAsyncComponent } from 'vue';
+import { provideMessageContext } from './provider.js';
+import {
+  MESSAGE_TYPES,
+  ATTACHMENT_TYPES,
+  MESSAGE_VARIANTS,
+  SENDER_TYPES,
+  ORIENTATION,
+  MESSAGE_STATUS,
+} from './constants';
+
+import Avatar from 'next/avatar/Avatar.vue';
+
+import TextBubble from './bubbles/Text/Index.vue';
+import ActivityBubble from './bubbles/Activity.vue';
+import ImageBubble from './bubbles/Image.vue';
+import FileBubble from './bubbles/File.vue';
+import AudioBubble from './bubbles/Audio.vue';
+import VideoBubble from './bubbles/Video.vue';
+import InstagramStoryBubble from './bubbles/InstagramStory.vue';
+import AttachmentsBubble from './bubbles/Attachments.vue';
+import EmailBubble from './bubbles/Email/Index.vue';
+import UnsupportedBubble from './bubbles/Unsupported.vue';
+import ContactBubble from './bubbles/Contact.vue';
+import DyteBubble from './bubbles/Dyte.vue';
+const LocationBubble = defineAsyncComponent(
+  () => import('./bubbles/Location.vue')
+);
+
+import MessageError from './MessageError.vue';
+import MessageMeta from './MessageMeta.vue';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Sender
+ * @property {Object} additional_attributes - Additional attributes of the sender
+ * @property {Object} custom_attributes - Custom attributes of the sender
+ * @property {string} email - Email of the sender
+ * @property {number} id - ID of the sender
+ * @property {string|null} identifier - Identifier of the sender
+ * @property {string} name - Name of the sender
+ * @property {string|null} phone_number - Phone number of the sender
+ * @property {string} thumbnail - Thumbnail URL of the sender
+ * @property {string} type - Type of sender
+ */
+
+/**
+ * @typedef {Object} ContentAttributes
+ * @property {string} externalError - an error message to be shown if the message failed to send
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {('sent'|'delivered'|'read'|'failed')} status - The delivery status of the message
+ * @property {ContentAttributes} [contentAttributes={}] - Additional attributes of the message content
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ * @property {Sender|null} [sender=null] - The sender information
+ * @property {boolean} [private=false] - Whether the message is private
+ * @property {number|null} [senderId=null] - The ID of the sender
+ * @property {number} createdAt - Timestamp when the message was created
+ * @property {number} currentUserId - The ID of the current user
+ * @property {number} id - The unique identifier for the message
+ * @property {number} messageType - The type of message (must be one of MESSAGE_TYPES)
+ * @property {string|null} [error=null] - Error message if the message failed to send
+ * @property {string|null} [senderType=null] - The type of the sender
+ * @property {string} content - The message content
+ */
+
+// eslint-disable-next-line vue/define-macros-order
+const props = defineProps({
+  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 => Object.values(MESSAGE_STATUS).includes(value),
+  },
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+  private: {
+    type: Boolean,
+    default: false,
+  },
+  createdAt: {
+    type: Number,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: null,
+  },
+  senderId: {
+    type: Number,
+    default: null,
+  },
+  senderType: {
+    type: String,
+    default: null,
+  },
+  content: {
+    type: String,
+    required: true,
+  },
+  contentAttributes: {
+    type: Object,
+    default: () => {},
+  },
+  currentUserId: {
+    type: Number,
+    required: true,
+  },
+  groupWithNext: {
+    type: Boolean,
+    default: false,
+  },
+  inReplyTo: {
+    type: Object,
+    default: null,
+  },
+  isEmailInbox: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/**
+ * Computes the message variant based on props
+ * @type {import('vue').ComputedRef<'user'|'agent'|'activity'|'private'|'bot'|'template'>}
+ */
+const variant = computed(() => {
+  if (props.private) return MESSAGE_VARIANTS.PRIVATE;
+  if (props.isEmailInbox) {
+    const emailInboxTypes = [MESSAGE_TYPES.INCOMING, MESSAGE_TYPES.OUTGOING];
+    if (emailInboxTypes.includes(props.messageType)) {
+      return MESSAGE_VARIANTS.EMAIL;
+    }
+  }
+  if (props.status === MESSAGE_STATUS.FAILED) return MESSAGE_VARIANTS.ERROR;
+  if (props.contentAttributes.isUnsupported)
+    return MESSAGE_VARIANTS.UNSUPPORTED;
+
+  const variants = {
+    [MESSAGE_TYPES.INCOMING]: MESSAGE_VARIANTS.USER,
+    [MESSAGE_TYPES.ACTIVITY]: MESSAGE_VARIANTS.ACTIVITY,
+    [MESSAGE_TYPES.OUTGOING]: MESSAGE_VARIANTS.AGENT,
+    [MESSAGE_TYPES.TEMPLATE]: MESSAGE_VARIANTS.TEMPLATE,
+  };
+
+  return variants[props.messageType] || MESSAGE_VARIANTS.USER;
+});
+
+const isMyMessage = computed(() => {
+  const senderId = props.senderId ?? props.sender?.id;
+  const senderType = props.senderType ?? props.sender?.type;
+
+  if (!senderType || !senderId) return false;
+
+  return (
+    senderType.toLowerCase() === SENDER_TYPES.USER.toLowerCase() &&
+    props.currentUserId === senderId
+  );
+});
+
+/**
+ * Computes the message orientation based on sender type and message type
+ * @returns {import('vue').ComputedRef<'left'|'right'|'center'>} The computed orientation
+ */
+const orientation = computed(() => {
+  if (isMyMessage.value) {
+    return ORIENTATION.RIGHT;
+  }
+
+  if (props.messageType === MESSAGE_TYPES.ACTIVITY) return ORIENTATION.CENTER;
+
+  return ORIENTATION.LEFT;
+});
+
+const flexOrientationClass = computed(() => {
+  const map = {
+    [ORIENTATION.LEFT]: 'justify-start',
+    [ORIENTATION.RIGHT]: 'justify-end',
+    [ORIENTATION.CENTER]: 'justify-center',
+  };
+
+  return map[orientation.value];
+});
+
+const gridClass = computed(() => {
+  const map = {
+    [ORIENTATION.LEFT]: 'grid grid-cols-[24px_1fr]',
+    [ORIENTATION.RIGHT]: 'grid grid-cols-1fr',
+  };
+
+  return map[orientation.value];
+});
+
+const gridTemplate = computed(() => {
+  const map = {
+    [ORIENTATION.LEFT]: `
+      "avatar bubble"
+      "spacer meta"
+    `,
+    [ORIENTATION.RIGHT]: `
+      "bubble"
+      "meta"
+    `,
+  };
+
+  return map[orientation.value];
+});
+
+const shouldGroupWithNext = computed(() => {
+  if (props.status === MESSAGE_STATUS.FAILED) return false;
+
+  return props.groupWithNext;
+});
+
+const shouldShowAvatar = computed(() => {
+  if (props.messageType === MESSAGE_TYPES.ACTIVITY) return false;
+  if (orientation.value === ORIENTATION.RIGHT) return false;
+
+  return true;
+});
+
+const componentToRender = computed(() => {
+  if (props.isEmailInbox && !props.private) {
+    const emailInboxTypes = [MESSAGE_TYPES.INCOMING, MESSAGE_TYPES.OUTGOING];
+    if (emailInboxTypes.includes(props.messageType)) return EmailBubble;
+  }
+
+  if (props.contentAttributes.isUnsupported) {
+    return UnsupportedBubble;
+  }
+
+  if (props.contentAttributes.type === 'dyte') {
+    return DyteBubble;
+  }
+
+  if (props.contentAttributes.imageType === 'story_mention') {
+    return InstagramStoryBubble;
+  }
+
+  if (props.attachments.length === 1) {
+    const fileType = props.attachments[0].fileType;
+
+    if (!props.content) {
+      if (fileType === ATTACHMENT_TYPES.IMAGE) return ImageBubble;
+      if (fileType === ATTACHMENT_TYPES.FILE) return FileBubble;
+      if (fileType === ATTACHMENT_TYPES.AUDIO) return AudioBubble;
+      if (fileType === ATTACHMENT_TYPES.VIDEO) return VideoBubble;
+      if (fileType === ATTACHMENT_TYPES.IG_REEL) return VideoBubble;
+      if (fileType === ATTACHMENT_TYPES.LOCATION) return LocationBubble;
+    }
+    // Attachment content is the name of the contact
+    if (fileType === ATTACHMENT_TYPES.CONTACT) return ContactBubble;
+  }
+
+  if (props.attachments.length > 1 && !props.content) {
+    return AttachmentsBubble;
+  }
+
+  return TextBubble;
+});
+
+provideMessageContext({
+  variant,
+  inReplyTo: props.inReplyTo,
+  orientation,
+  isMyMessage,
+});
+</script>
+
+<template>
+  <div
+    class="flex w-full"
+    :data-message-id="props.id"
+    :class="[flexOrientationClass, shouldGroupWithNext ? 'mb-2' : 'mb-4']"
+  >
+    <div v-if="variant === MESSAGE_VARIANTS.ACTIVITY">
+      <ActivityBubble :content="content" />
+    </div>
+    <div
+      v-else
+      :class="[
+        gridClass,
+        {
+          'gap-y-2': !shouldGroupWithNext,
+          'w-full': variant === MESSAGE_VARIANTS.EMAIL,
+        },
+      ]"
+      class="gap-x-3"
+      :style="{
+        gridTemplateAreas: gridTemplate,
+      }"
+    >
+      <div
+        v-if="!shouldGroupWithNext && shouldShowAvatar"
+        class="[grid-area:avatar] flex items-end"
+      >
+        <Avatar
+          :name="sender ? sender.name : ''"
+          :src="sender?.thumbnail"
+          :size="24"
+        />
+      </div>
+      <div
+        class="[grid-area:bubble]"
+        :class="{
+          'pl-9': ORIENTATION.RIGHT === orientation,
+        }"
+      >
+        <Component :is="componentToRender" v-bind="props" />
+      </div>
+      <MessageError
+        v-if="contentAttributes.externalError"
+        class="[grid-area:meta]"
+        :class="flexOrientationClass"
+        :error="contentAttributes.externalError"
+      />
+      <MessageMeta
+        v-else-if="!shouldGroupWithNext"
+        class="[grid-area:meta]"
+        :class="flexOrientationClass"
+        :sender="props.sender"
+        :status="props.status"
+        :private="props.private"
+        :is-my-message="isMyMessage"
+        :created-at="props.createdAt"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,31 @@
+<script setup>
+import Icon from 'next/icon/Icon.vue';
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+  error: { type: String, required: true },
+});
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="text-xs text-n-ruby-11 flex items-center gap-1.5">
+    <span>{{ t('CHAT_LIST.FAILED_TO_SEND') }}</span>
+    <div class="relative group">
+      <div
+        class="bg-n-alpha-2 rounded-md size-5 grid place-content-center cursor-pointer"
+      >
+        <Icon
+          icon="i-lucide-alert-triangle"
+          class="text-n-ruby-11 size-[14px]"
+        />
+      </div>
+      <div
+        class="absolute bg-n-alpha-3 px-4 py-3 border rounded-xl border-n-strong text-n-slate-12 bottom-6 w-52 right-0 text-xs backdrop-blur-[100px] shadow-[0px_0px_24px_0px_rgba(0,0,0,0.12)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all"
+      >
+        {{ error }}
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,77 @@
+<script setup>
+import { computed } from 'vue';
+import { messageTimestamp } from 'shared/helpers/timeHelper';
+
+import MessageStatus from './MessageStatus.vue';
+import Icon from 'next/icon/Icon.vue';
+
+import { MESSAGE_STATUS } from './constants';
+
+/**
+ * @typedef {Object} Sender
+ * @property {Object} additional_attributes - Additional attributes of the sender
+ * @property {Object} custom_attributes - Custom attributes of the sender
+ * @property {string} email - Email of the sender
+ * @property {number} id - ID of the sender
+ * @property {string|null} identifier - Identifier of the sender
+ * @property {string} name - Name of the sender
+ * @property {string|null} phone_number - Phone number of the sender
+ * @property {string} thumbnail - Thumbnail URL of the sender
+ * @property {string} type - Type of sender
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {('sent'|'delivered'|'read'|'failed')} status - The delivery status of the message
+ * @property {boolean} [private=false] - Whether the message is private
+ * @property {isMyMessage} [private=false] - Whether the message is sent by the current user or not
+ * @property {number} createdAt - Timestamp when the message was created
+ * @property {Sender|null} [sender=null] - The sender information
+ */
+
+const props = defineProps({
+  sender: {
+    type: Object,
+    required: true,
+  },
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
+  private: {
+    type: Boolean,
+    default: false,
+  },
+  isMyMessage: {
+    type: Boolean,
+    default: false,
+  },
+  createdAt: {
+    type: Number,
+    required: true,
+  },
+});
+
+const readableTime = computed(() =>
+  messageTimestamp(props.createdAt, 'LLL d, h:mm a')
+);
+
+const showSender = computed(() => !props.isMyMessage && props.sender);
+</script>
+
+<template>
+  <div class="text-xs text-n-slate-11 flex items-center gap-1.5">
+    <div class="inline">
+      <span v-if="showSender" class="inline capitalize">{{ sender.name }}</span>
+      <span v-if="showSender && readableTime" class="inline"> • </span>
+      <span class="inline">{{ readableTime }}</span>
+    </div>
+    <Icon
+      v-if="props.private"
+      icon="i-lucide-lock-keyhole"
+      class="text-n-slate-10 size-3"
+    />
+    <MessageStatus v-if="props.isMyMessage" :status />
+  </div>
+</template>

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

@@ -0,0 +1,93 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useIntervalFn } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import { MESSAGE_STATUS } from './constants';
+
+import Icon from 'next/icon/Icon.vue';
+
+const { status } = defineProps({
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
+});
+
+const { t } = useI18n();
+
+const progresIconSequence = [
+  'i-lucide-clock-1',
+  'i-lucide-clock-2',
+  'i-lucide-clock-3',
+  'i-lucide-clock-4',
+  'i-lucide-clock-5',
+  'i-lucide-clock-6',
+  'i-lucide-clock-7',
+  'i-lucide-clock-8',
+  'i-lucide-clock-9',
+  'i-lucide-clock-10',
+  'i-lucide-clock-11',
+  'i-lucide-clock-12',
+];
+
+const progessIcon = ref(progresIconSequence[0]);
+
+const rotateIcon = () => {
+  const currentIndex = progresIconSequence.indexOf(progessIcon.value);
+  const nextIndex = (currentIndex + 1) % progresIconSequence.length;
+  progessIcon.value = progresIconSequence[nextIndex];
+};
+
+useIntervalFn(rotateIcon, 500, {
+  immediate: status === MESSAGE_STATUS.PROGRESS,
+  immediateCallback: false,
+});
+
+const statusIcon = computed(() => {
+  const statusIconMap = {
+    [MESSAGE_STATUS.SENT]: 'i-lucide-check',
+    [MESSAGE_STATUS.DELIVERED]: 'i-lucide-check-check',
+    [MESSAGE_STATUS.READ]: 'i-lucide-check-check',
+  };
+
+  return statusIconMap[status];
+});
+
+const statusColor = computed(() => {
+  const statusIconMap = {
+    [MESSAGE_STATUS.SENT]: 'text-n-slate-10',
+    [MESSAGE_STATUS.DELIVERED]: 'text-n-slate-10',
+    [MESSAGE_STATUS.READ]: 'text-[#7EB6FF]',
+  };
+
+  return statusIconMap[status];
+});
+
+const tooltipText = computed(() => {
+  const statusTextMap = {
+    [MESSAGE_STATUS.SENT]: t('CHAT_LIST.SENT'),
+    [MESSAGE_STATUS.DELIVERED]: t('CHAT_LIST.DELIVERED'),
+    [MESSAGE_STATUS.READ]: t('CHAT_LIST.MESSAGE_READ'),
+    [MESSAGE_STATUS.PROGRESS]: t('CHAT_LIST.SENDING'),
+  };
+
+  return statusTextMap[status];
+});
+</script>
+
+<template>
+  <Icon
+    v-if="status === MESSAGE_STATUS.PROGRESS"
+    v-tooltip.top-start="tooltipText"
+    :icon="progessIcon"
+    class="text-n-slate-10"
+  />
+  <Icon
+    v-else
+    v-tooltip.top-start="tooltipText"
+    :icon="statusIcon"
+    :class="statusColor"
+    class="size-[14px]"
+  />
+</template>

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

@@ -0,0 +1,16 @@
+<script setup>
+import BaseBubble from './Base.vue';
+
+defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <BaseBubble class="px-2 py-0.5" data-bubble-name="activity">
+    <span v-dompurify-html="content" />
+  </BaseBubble>
+</template>

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

@@ -0,0 +1,30 @@
+<script setup>
+import BaseBubble from 'next/message/bubbles/Base.vue';
+import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+defineProps({
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+
+<template>
+  <BaseBubble class="grid gap-2 bg-transparent" data-bubble-name="attachments">
+    <AttachmentChips :attachments="attachments" class="gap-1" />
+  </BaseBubble>
+</template>

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

@@ -0,0 +1,44 @@
+<script setup>
+import { computed } from 'vue';
+import BaseBubble from './Base.vue';
+import AudioChip from 'next/message/chips/Audio.vue';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ */
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    required: true,
+  },
+});
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+</script>
+
+<template>
+  <BaseBubble class="bg-transparent" data-bubble-name="audio">
+    <AudioChip
+      :attachment="attachment"
+      class="p-2 text-n-slate-12 bg-n-alpha-3"
+    />
+  </BaseBubble>
+</template>

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

@@ -0,0 +1,90 @@
+<script setup>
+import { computed } from 'vue';
+
+import { emitter } from 'shared/helpers/mitt';
+import { useMessageContext } from '../provider.js';
+import { useI18n } from 'vue-i18n';
+
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { MESSAGE_VARIANTS, ORIENTATION } from '../constants';
+
+const { variant, orientation, inReplyTo } = useMessageContext();
+const { t } = useI18n();
+
+const varaintBaseMap = {
+  [MESSAGE_VARIANTS.AGENT]: 'bg-n-solid-blue text-n-slate-12',
+  [MESSAGE_VARIANTS.PRIVATE]:
+    'bg-n-solid-amber text-n-amber-12 [&_.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.ERROR]: 'bg-n-ruby-4 text-n-ruby-12',
+  [MESSAGE_VARIANTS.EMAIL]: 'bg-n-alpha-2 w-full',
+  [MESSAGE_VARIANTS.UNSUPPORTED]:
+    'bg-n-solid-amber/70 border border-dashed border-n-amber-12 text-n-amber-12',
+};
+
+const orientationMap = {
+  [ORIENTATION.LEFT]: 'rounded-xl rounded-bl-sm',
+  [ORIENTATION.RIGHT]: 'rounded-xl rounded-br-sm',
+  [ORIENTATION.CENTER]: 'rounded-md',
+};
+
+const messageClass = computed(() => {
+  const classToApply = [varaintBaseMap[variant.value]];
+
+  if (variant.value !== MESSAGE_VARIANTS.ACTIVITY) {
+    classToApply.push(orientationMap[orientation.value]);
+  } else {
+    classToApply.push('rounded-lg');
+  }
+
+  return classToApply;
+});
+
+const scrollToMessage = () => {
+  emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE, {
+    messageId: this.message.id,
+  });
+};
+
+const previewMessage = computed(() => {
+  if (!inReplyTo) return '';
+
+  const { content, attachments } = inReplyTo;
+
+  if (content) return content;
+  if (attachments?.length) {
+    const firstAttachment = attachments[0];
+    const fileType = firstAttachment.fileType ?? firstAttachment.file_type;
+
+    return t(`CHAT_LIST.ATTACHMENTS.${fileType}.CONTENT`);
+  }
+
+  return t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND');
+});
+</script>
+
+<template>
+  <div
+    class="text-sm min-w-32 break-words"
+    :class="[
+      messageClass,
+      {
+        'max-w-md': variant !== MESSAGE_VARIANTS.EMAIL,
+      },
+    ]"
+  >
+    <div
+      v-if="inReplyTo"
+      class="bg-n-alpha-black1 rounded-lg p-2"
+      @click="scrollToMessage"
+    >
+      <span class="line-clamp-2">
+        {{ previewMessage }}
+      </span>
+    </div>
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,78 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import BaseBubble from './Base.vue';
+import Icon from 'next/icon/Icon.vue';
+
+const props = defineProps({
+  icon: { type: [String, Object], required: true },
+  iconBgColor: { type: String, default: 'bg-n-alpha-3' },
+  sender: { type: Object, default: () => ({}) },
+  senderTranslationKey: { type: String, required: true },
+  content: { type: String, required: true },
+  action: {
+    type: Object,
+    required: true,
+    validator: action => {
+      return action.label && (action.href || action.onClick);
+    },
+  },
+});
+
+const { t } = useI18n();
+
+const senderName = computed(() => {
+  return props.sender.name;
+});
+</script>
+
+<template>
+  <BaseBubble
+    class="overflow-hidden grid gap-4 min-w-64 p-0"
+    data-bubble-name="attachment"
+  >
+    <slot name="before" />
+    <div class="grid gap-3 px-3 pt-3 z-20">
+      <div
+        class="size-8 rounded-lg grid place-content-center"
+        :class="iconBgColor"
+      >
+        <slot name="icon">
+          <Icon :icon="icon" class="text-white size-4" />
+        </slot>
+      </div>
+      <div class="space-y-1">
+        <div v-if="senderName" class="text-n-slate-12 text-sm truncate">
+          {{
+            t(senderTranslationKey, {
+              sender: senderName,
+            })
+          }}
+        </div>
+        <slot>
+          <div v-if="content" class="truncate text-sm text-n-slate-11">
+            {{ content }}
+          </div>
+        </slot>
+      </div>
+    </div>
+    <div v-if="action" class="px-3 pb-3">
+      <a
+        v-if="action.href"
+        :href="action.href"
+        rel="noreferrer noopener nofollow"
+        target="_blank"
+        class="w-full block bg-n-solid-3 px-4 py-2 rounded-lg text-sm text-center"
+      >
+        {{ action.label }}
+      </a>
+      <button
+        v-else
+        class="w-full bg-n-solid-3 px-4 py-2 rounded-lg text-sm"
+        @click="action.onClick"
+      >
+        {{ action.label }}
+      </button>
+    </div>
+  </BaseBubble>
+</template>

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

@@ -0,0 +1,137 @@
+<script setup>
+import { computed } from 'vue';
+import { useAlert } from 'dashboard/composables';
+import { useStore } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import BaseAttachmentBubble from './BaseAttachment.vue';
+
+import {
+  DuplicateContactException,
+  ExceptionWithMessage,
+} from 'shared/helpers/CustomErrors';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ */
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+  attachments: {
+    type: Array,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const $store = useStore();
+const { t } = useI18n();
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+
+const phoneNumber = computed(() => {
+  return attachment.value.fallbackTitle;
+});
+
+const formattedPhoneNumber = computed(() => {
+  return phoneNumber.value.replace(/\s|-|[A-Za-z]/g, '');
+});
+
+const rawPhoneNumber = computed(() => {
+  return phoneNumber.value.replace(/\D/g, '');
+});
+
+const name = computed(() => {
+  return props.content;
+});
+
+function getContactObject() {
+  const contactItem = {
+    name: name.value,
+    phone_number: `+${rawPhoneNumber.value}`,
+  };
+  return contactItem;
+}
+
+async function filterContactByNumber(searchCandidate) {
+  const query = {
+    attribute_key: 'phone_number',
+    filter_operator: 'equal_to',
+    values: [searchCandidate],
+    attribute_model: 'standard',
+    custom_attribute_type: '',
+  };
+
+  const queryPayload = { payload: [query] };
+  const contacts = await $store.dispatch('contacts/filter', {
+    queryPayload,
+    resetState: false,
+  });
+  return contacts.shift();
+}
+
+function openContactNewTab(contactId) {
+  const accountId = window.location.pathname.split('/')[3];
+  const url = `/app/accounts/${accountId}/contacts/${contactId}`;
+  window.open(url, '_blank');
+}
+
+async function addContact() {
+  try {
+    let contact = await filterContactByNumber(rawPhoneNumber);
+    if (!contact) {
+      contact = await $store.dispatch('contacts/create', getContactObject());
+      useAlert(t('CONTACT_FORM.SUCCESS_MESSAGE'));
+    }
+    openContactNewTab(contact.id);
+  } catch (error) {
+    if (error instanceof DuplicateContactException) {
+      if (error.data.includes('phone_number')) {
+        useAlert(t('CONTACT_FORM.FORM.PHONE_NUMBER.DUPLICATE'));
+      }
+    } else if (error instanceof ExceptionWithMessage) {
+      useAlert(error.data);
+    } else {
+      useAlert(t('CONTACT_FORM.ERROR_MESSAGE'));
+    }
+  }
+}
+
+const action = computed(() => ({
+  label: t('CONVERSATION.SAVE_CONTACT'),
+  onClick: addContact,
+}));
+</script>
+
+<template>
+  <BaseAttachmentBubble
+    icon="i-teenyicons-user-circle-solid"
+    icon-bg-color="bg-[#D6409F]"
+    :sender="sender"
+    sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.CONTACT"
+    :content="phoneNumber"
+    :action="formattedPhoneNumber ? action : null"
+  />
+</template>

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

@@ -0,0 +1,109 @@
+<script setup>
+import { computed, ref } from 'vue';
+import DyteAPI from 'dashboard/api/integrations/dyte';
+import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
+import { useCamelCase } from 'dashboard/composables/useTransformKeys';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import BaseAttachmentBubble from './BaseAttachment.vue';
+
+const props = defineProps({
+  contentAttributes: {
+    type: String,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+
+const meetingData = computed(() => {
+  return useCamelCase(props.contentAttributes.data);
+});
+
+const isLoading = ref(false);
+const dyteAuthToken = ref('');
+
+const meetingLink = computed(() => {
+  return buildDyteURL(meetingData.value.roomName, dyteAuthToken.value);
+});
+
+const joinTheCall = async () => {
+  isLoading.value = true;
+  try {
+    const { data: { authResponse: { authToken } = {} } = {} } =
+      await DyteAPI.addParticipantToMeeting(meetingData.value.messageId);
+    dyteAuthToken.value = authToken;
+  } catch (err) {
+    useAlert(t('INTEGRATION_SETTINGS.DYTE.JOIN_ERROR'));
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const leaveTheRoom = () => {
+  this.dyteAuthToken = '';
+};
+const action = computed(() => ({
+  label: t('INTEGRATION_SETTINGS.DYTE.CLICK_HERE_TO_JOIN'),
+  onClick: joinTheCall,
+}));
+</script>
+
+<template>
+  <BaseAttachmentBubble
+    icon="i-ph-video-camera-fill"
+    icon-bg-color="bg-[#2781F6]"
+    :sender="sender"
+    sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.MEETING"
+    :action="action"
+  >
+    <div v-if="dyteAuthToken" class="video-call--container">
+      <iframe
+        :src="meetingLink"
+        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
+      />
+      <button
+        class="bg-n-solid-3 px-4 py-2 rounded-lg text-sm"
+        @click="leaveTheRoom"
+      >
+        {{ $t('INTEGRATION_SETTINGS.DYTE.LEAVE_THE_ROOM') }}
+      </button>
+    </div>
+    <div v-else>
+      {{ '' }}
+    </div>
+  </BaseAttachmentBubble>
+</template>
+
+<style lang="scss">
+.join-call-button {
+  margin: var(--space-small) 0;
+}
+
+.video-call--container {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--z-index-high);
+  padding: var(--space-smaller);
+  background: var(--b-800);
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+
+  button {
+    position: absolute;
+    top: var(--space-smaller);
+    right: 10rem;
+  }
+}
+</style>

app/javascript/dashboard/components-next/message/bubbles/Email/EmailMeta.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { computed } from 'vue';
+import { MESSAGE_STATUS } from '../../constants';
+
+const props = defineProps({
+  contentAttributes: {
+    type: Object,
+    default: () => ({}),
+  },
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const hasError = computed(() => {
+  return props.status === MESSAGE_STATUS.FAILED;
+});
+
+const fromEmail = computed(() => {
+  return props.contentAttributes?.email?.from ?? [];
+});
+
+const toEmail = computed(() => {
+  return props.contentAttributes?.email?.to ?? [];
+});
+
+const ccEmail = computed(() => {
+  return (
+    props.contentAttributes?.ccEmails ??
+    props.contentAttributes?.email?.cc ??
+    []
+  );
+});
+
+const senderName = computed(() => {
+  return props.sender.name ?? '';
+});
+
+const bccEmail = computed(() => {
+  return (
+    props.contentAttributes?.bccEmails ??
+    props.contentAttributes?.email?.bcc ??
+    []
+  );
+});
+
+const subject = computed(() => {
+  return props.contentAttributes?.email?.subject ?? '';
+});
+
+const showMeta = computed(() => {
+  return (
+    fromEmail.value[0] ||
+    toEmail.value.length ||
+    ccEmail.value.length ||
+    bccEmail.value.length ||
+    subject.value
+  );
+});
+</script>
+
+<template>
+  <section
+    v-show="showMeta"
+    class="p-4 space-y-1 pr-9 border-b border-n-strong"
+    :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-11'"
+  >
+    <template v-if="showMeta">
+      <div v-if="fromEmail[0]">
+        <span :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-12'">
+          {{ senderName }}
+        </span>
+        &lt;{{ fromEmail[0] }}&gt;
+      </div>
+      <div v-if="toEmail.length">
+        {{ $t('EMAIL_HEADER.TO') }}: {{ toEmail.join(', ') }}
+      </div>
+      <div v-if="ccEmail.length">
+        {{ $t('EMAIL_HEADER.CC') }}:
+        {{ ccEmail.join(', ') }}
+      </div>
+      <div v-if="bccEmail.length">
+        {{ $t('EMAIL_HEADER.BCC') }}:
+        {{ bccEmail.join(', ') }}
+      </div>
+      <div v-if="subject">
+        {{ $t('EMAIL_HEADER.SUBJECT') }}:
+        {{ subject }}
+      </div>
+    </template>
+  </section>
+</template>

app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue

@@ -0,0 +1,133 @@
+<script setup>
+import { computed, useTemplateRef, ref, onMounted } from 'vue';
+import { Letter } from 'vue-letter';
+
+import Icon from 'next/icon/Icon.vue';
+import { EmailQuoteExtractor } from './removeReply.js';
+import BaseBubble from 'next/message/bubbles/Base.vue';
+import FormattedContent from 'next/message/bubbles/Text/FormattedContent.vue';
+import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
+
+import EmailMeta from './EmailMeta.vue';
+import { MESSAGE_STATUS, MESSAGE_TYPES } from '../../constants';
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+  contentAttributes: {
+    type: Object,
+    default: () => ({}),
+  },
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+  messageType: {
+    type: Number,
+    required: true,
+  },
+});
+
+const isExpandable = ref(false);
+const isExpanded = ref(false);
+const showQuotedMessage = ref(false);
+const contentContainer = useTemplateRef('contentContainer');
+
+onMounted(() => {
+  isExpandable.value = contentContainer.value.scrollHeight > 400;
+});
+
+const isOutgoing = computed(() => {
+  return props.messageType === MESSAGE_TYPES.OUTGOING;
+});
+
+const fullHTML = computed(() => {
+  return props.contentAttributes?.email?.htmlContent?.full ?? props.content;
+});
+
+const unquotedHTML = computed(() => {
+  return EmailQuoteExtractor.extractQuotes(fullHTML.value);
+});
+
+const hasQuotedMessage = computed(() => {
+  return EmailQuoteExtractor.hasQuotes(fullHTML.value);
+});
+
+const textToShow = computed(() => {
+  const text =
+    props.contentAttributes?.email?.textContent?.full ?? props.content;
+  return text.replace(/\n/g, '<br>');
+});
+</script>
+
+<template>
+  <BaseBubble class="w-full overflow-hidden" data-bubble-name="email">
+    <EmailMeta :status :sender :content-attributes />
+    <section
+      ref="contentContainer"
+      class="p-4"
+      :class="{
+        'max-h-[400px] overflow-hidden relative': !isExpanded && isExpandable,
+      }"
+    >
+      <div
+        v-if="isExpandable && !isExpanded"
+        class="absolute left-0 right-0 bottom-0 h-40 p-8 flex items-end bg-gradient-to-t dark:from-[#24252b] from-[#F5F5F6] dark:via-[rgba(36,37,43,0.5)] via-[rgba(245,245,246,0.50)] dark:to-transparent to-[rgba(245,245,246,0.00)]"
+      >
+        <button
+          class="text-n-slate-12 py-2 px-8 mx-auto text-center flex items-center gap-2"
+          @click="isExpanded = true"
+        >
+          <Icon icon="i-lucide-maximize-2" />
+          {{ $t('EMAIL_HEADER.EXPAND') }}
+        </button>
+      </div>
+      <FormattedContent v-if="isOutgoing && content" :content="content" />
+      <template v-else>
+        <Letter
+          v-if="showQuotedMessage"
+          class-name="prose prose-email !max-w-none"
+          :html="fullHTML"
+          :text="textToShow"
+        />
+        <Letter
+          v-else
+          class-name="prose prose-email !max-w-none"
+          :html="unquotedHTML"
+          :text="textToShow"
+        />
+      </template>
+      <button
+        v-if="hasQuotedMessage"
+        class="text-n-slate-11 px-1 leading-none text-sm bg-n-alpha-black2 text-center flex items-center gap-1 mt-2"
+        @click="showQuotedMessage = !showQuotedMessage"
+      >
+        <template v-if="showQuotedMessage">
+          {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
+        </template>
+        <template v-else>
+          {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
+        </template>
+        <Icon
+          :icon="
+            showQuotedMessage ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'
+          "
+        />
+      </button>
+    </section>
+    <section v-if="attachments.length" class="px-4 pb-4 space-y-2">
+      <AttachmentChips :attachments="attachments" class="gap-1" />
+    </section>
+  </BaseBubble>
+</template>

app/javascript/dashboard/components-next/message/bubbles/Email/removeReply.js

@@ -0,0 +1,126 @@
+// Quote detection strategies
+const QUOTE_INDICATORS = [
+  '.gmail_quote_container',
+  '.gmail_quote',
+  '.OutlookQuote',
+  '.email-quote',
+  '.quoted-text',
+  '.quote',
+  '[class*="quote"]',
+  '[class*="Quote"]',
+];
+
+// Regex patterns for quote identification
+const QUOTE_PATTERNS = [
+  /On .* wrote:/i,
+  /-----Original Message-----/i,
+  /Sent: /i,
+  /From: /i,
+];
+
+export class EmailQuoteExtractor {
+  /**
+   * Remove quotes from email HTML and return cleaned HTML
+   * @param {string} htmlContent - Full HTML content of the email
+   * @returns {string} HTML content with quotes removed
+   */
+  static extractQuotes(htmlContent) {
+    // Create a temporary DOM element to parse HTML
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlContent;
+
+    // Remove elements matching class selectors
+    QUOTE_INDICATORS.forEach(selector => {
+      tempDiv.querySelectorAll(selector).forEach(el => {
+        el.remove();
+      });
+    });
+
+    // Remove text-based quotes
+    const textNodeQuotes = this.findTextNodeQuotes(tempDiv);
+    textNodeQuotes.forEach(el => {
+      el.remove();
+    });
+
+    return tempDiv.innerHTML;
+  }
+
+  /**
+   * Check if HTML content contains any quotes
+   * @param {string} htmlContent - Full HTML content of the email
+   * @returns {boolean} True if quotes are detected, false otherwise
+   */
+  static hasQuotes(htmlContent) {
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlContent;
+
+    // Check for class-based quotes
+    // eslint-disable-next-line no-restricted-syntax
+    for (const selector of QUOTE_INDICATORS) {
+      if (tempDiv.querySelector(selector)) {
+        return true;
+      }
+    }
+
+    // Check for text-based quotes
+    const textNodeQuotes = this.findTextNodeQuotes(tempDiv);
+    return textNodeQuotes.length > 0;
+  }
+
+  /**
+   * Find text nodes that match quote patterns
+   * @param {Element} rootElement - Root element to search
+   * @returns {Element[]} Array of parent block elements containing quote-like text
+   */
+  static findTextNodeQuotes(rootElement) {
+    const quoteBlocks = [];
+    const treeWalker = document.createTreeWalker(
+      rootElement,
+      NodeFilter.SHOW_TEXT,
+      null,
+      false
+    );
+
+    for (
+      let currentNode = treeWalker.nextNode();
+      currentNode !== null;
+      currentNode = treeWalker.nextNode()
+    ) {
+      const isQuoteLike = QUOTE_PATTERNS.some(pattern =>
+        pattern.test(currentNode.textContent)
+      );
+
+      if (isQuoteLike) {
+        const parentBlock = this.findParentBlock(currentNode);
+        if (parentBlock && !quoteBlocks.includes(parentBlock)) {
+          quoteBlocks.push(parentBlock);
+        }
+      }
+    }
+
+    return quoteBlocks;
+  }
+
+  /**
+   * Find the closest block-level parent element by recursively traversing up the DOM tree.
+   * This method searches for common block-level elements like DIV, P, BLOCKQUOTE, and SECTION
+   * that contain the text node. It's used to identify and remove entire block-level elements
+   * that contain quote-like text, rather than just removing the text node itself. This ensures
+   * proper structural removal of quoted content while maintaining HTML integrity.
+   * @param {Node} node - Starting node to find parent
+   * @returns {Element|null} Block-level parent element
+   */
+  static findParentBlock(node) {
+    const blockElements = ['DIV', 'P', 'BLOCKQUOTE', 'SECTION'];
+    let current = node.parentElement;
+
+    while (current) {
+      if (blockElements.includes(current.tagName)) {
+        return current;
+      }
+      current = current.parentElement;
+    }
+
+    return null;
+  }
+}

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

@@ -0,0 +1,73 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import BaseAttachmentBubble from './BaseAttachment.vue';
+import FileIcon from 'next/icon/FileIcon.vue';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ */
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+
+const url = computed(() => {
+  return props.attachments[0].dataUrl;
+});
+
+const fileName = computed(() => {
+  if (url.value) {
+    const filename = url.value.substring(url.value.lastIndexOf('/') + 1);
+    return filename || t('CONVERSATION.UNKNOWN_FILE_TYPE');
+  }
+  return t('CONVERSATION.UNKNOWN_FILE_TYPE');
+});
+
+const fileType = computed(() => {
+  return fileName.value.split('.').pop();
+});
+</script>
+
+<template>
+  <BaseAttachmentBubble
+    icon="i-teenyicons-user-circle-solid"
+    icon-bg-color="bg-n-alpha-3 dark:bg-n-alpha-white"
+    :sender="sender"
+    sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.FILE"
+    :content="decodeURI(fileName)"
+    :action="{
+      href: url,
+      label: $t('CONVERSATION.DOWNLOAD'),
+    }"
+  >
+    <template #icon>
+      <FileIcon :file-type="fileType" class="size-4" />
+    </template>
+  </BaseAttachmentBubble>
+</template>

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

@@ -0,0 +1,111 @@
+<script setup>
+import { ref, computed } from 'vue';
+import BaseBubble from './Base.vue';
+import Button from 'next/button/Button.vue';
+import Icon from 'next/icon/Icon.vue';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { useMessageContext } from 'next/message/provider.js';
+import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ */
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['error']);
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+
+const hasError = ref(false);
+const showGallery = ref(false);
+const { filteredCurrentChatAttachments } = useMessageContext();
+
+const handleError = () => {
+  hasError.value = true;
+  emit('error');
+};
+
+const downloadAttachment = async () => {
+  const response = await fetch(attachment.value.dataUrl);
+  const blob = await response.blob();
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `attachment${attachment.value.extension || ''}`;
+  document.body.appendChild(a);
+  a.click();
+  window.URL.revokeObjectURL(url);
+  document.body.removeChild(a);
+};
+</script>
+
+<template>
+  <BaseBubble
+    class="overflow-hidden relative group border-[4px] border-n-weak"
+    data-bubble-name="image"
+    @click="showGallery = true"
+  >
+    <div
+      v-if="hasError"
+      class="flex items-center gap-1 px-5 py-4 text-center rounded-lg bg-n-alpha-1"
+    >
+      <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
+      <p class="mb-0 text-n-slate-11">
+        {{ $t('COMPONENTS.MEDIA.IMAGE_UNAVAILABLE') }}
+      </p>
+    </div>
+    <template v-else>
+      <img
+        :src="attachment.dataUrl"
+        :width="attachment.width"
+        :height="attachment.height"
+        @click="onClick"
+        @error="handleError"
+      />
+      <div
+        class="inset-0 p-2 absolute bg-gradient-to-tl from-n-slate-12/30 dark:from-n-slate-1/50 via-transparent to-transparent hidden group-hover:flex items-end justify-end gap-1.5"
+      >
+        <Button xs solid slate icon="i-lucide-expand" class="opacity-60" />
+        <Button
+          xs
+          solid
+          slate
+          icon="i-lucide-download"
+          class="opacity-60"
+          @click="downloadAttachment"
+        />
+      </div>
+    </template>
+  </BaseBubble>
+  <GalleryView
+    v-if="showGallery"
+    v-model:show="showGallery"
+    :attachment="useSnakeCase(attachment)"
+    :all-attachments="filteredCurrentChatAttachments"
+    @error="handleError"
+    @close="() => (showGallery = false)"
+  />
+</template>

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

@@ -0,0 +1,89 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useMessageContext } from '../provider.js';
+import Icon from 'next/icon/Icon.vue';
+import BaseBubble from 'next/message/bubbles/Base.vue';
+
+import MessageFormatter from 'shared/helpers/MessageFormatter.js';
+import { MESSAGE_VARIANTS } from '../constants';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['error']);
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+
+const { variant } = useMessageContext();
+const hasImgStoryError = ref(false);
+const hasVideoStoryError = ref(false);
+
+const formattedContent = computed(() => {
+  if (variant.value === MESSAGE_VARIANTS.ACTIVITY) {
+    return props.content;
+  }
+
+  return new MessageFormatter(props.content).formattedMessage;
+});
+
+const onImageLoadError = () => {
+  hasImgStoryError.value = true;
+  emit('error');
+};
+
+const onVideoLoadError = () => {
+  hasVideoStoryError.value = true;
+  emit('error');
+};
+</script>
+
+<template>
+  <BaseBubble class="p-3 overflow-hidden" data-bubble-name="ig-story">
+    <div v-if="content" class="mb-2" v-html="formattedContent" />
+    <img
+      v-if="!hasImgStoryError"
+      class="rounded-lg max-w-80"
+      :src="attachment.dataUrl"
+      @error="onImageLoadError"
+    />
+    <video
+      v-else-if="!hasVideoStoryError"
+      class="rounded-lg max-w-80"
+      controls
+      :src="attachment.dataUrl"
+      @error="onVideoLoadError"
+    />
+    <div
+      v-else
+      class="flex items-center gap-1 px-5 py-4 text-center rounded-lg bg-n-alpha-1"
+    >
+      <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
+      <p class="mb-0 text-n-slate-11">
+        {{ $t('COMPONENTS.FILE_BUBBLE.INSTAGRAM_STORY_UNAVAILABLE') }}
+      </p>
+    </div>
+  </BaseBubble>
+</template>

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

@@ -0,0 +1,108 @@
+<script setup>
+import { computed, onMounted, nextTick, useTemplateRef } from 'vue';
+import BaseAttachmentBubble from './BaseAttachment.vue';
+import { useI18n } from 'vue-i18n';
+import maplibregl from 'maplibre-gl';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ */
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+
+const lat = computed(() => {
+  return attachment.value.coordinatesLat;
+});
+const long = computed(() => {
+  return attachment.value.coordinatesLong;
+});
+
+const title = computed(() => {
+  return attachment.value.fallbackTitle;
+});
+
+const mapUrl = computed(
+  () => `https://maps.google.com/?q=${lat.value},${long.value}`
+);
+
+const mapContainer = useTemplateRef('mapContainer');
+
+const setupMap = () => {
+  const map = new maplibregl.Map({
+    style: 'https://tiles.openfreemap.org/styles/positron',
+    center: [long.value, lat.value],
+    zoom: 9.5,
+    container: mapContainer.value,
+    attributionControl: false,
+    dragPan: false,
+    dragRotate: false,
+    scrollZoom: false,
+    touchZoom: false,
+    touchRotate: false,
+    keyboard: false,
+    doubleClickZoom: false,
+  });
+
+  return map;
+};
+
+onMounted(async () => {
+  await nextTick();
+  setupMap();
+});
+</script>
+
+<template>
+  <BaseAttachmentBubble
+    icon="i-ph-navigation-arrow-fill"
+    icon-bg-color="bg-[#0D9B8A]"
+    :sender="sender"
+    sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.LOCATION"
+    :content="title"
+    :action="{
+      label: t('COMPONENTS.LOCATION_BUBBLE.SEE_ON_MAP'),
+      href: mapUrl,
+    }"
+  >
+    <template #before>
+      <div
+        ref="mapContainer"
+        class="z-10 w-full max-w-md -mb-12 min-w-64 h-28"
+      />
+    </template>
+  </BaseAttachmentBubble>
+</template>
+
+<style>
+@import 'maplibre-gl/dist/maplibre-gl.css';
+</style>

app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { computed } from 'vue';
+import { useMessageContext } from '../../provider.js';
+
+import MessageFormatter from 'shared/helpers/MessageFormatter.js';
+import { MESSAGE_VARIANTS } from '../../constants';
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+});
+
+const { variant } = useMessageContext();
+
+const formattedContent = computed(() => {
+  if (variant.value === MESSAGE_VARIANTS.ACTIVITY) {
+    return props.content;
+  }
+
+  return new MessageFormatter(props.content).formattedMessage;
+});
+</script>
+
+<template>
+  <span
+    v-dompurify-html="formattedContent"
+    class="[&>p:last-child]:mb-0 [&>ul]:list-inside"
+  />
+</template>

app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { computed } from 'vue';
+import BaseBubble from 'next/message/bubbles/Base.vue';
+import FormattedContent from './FormattedContent.vue';
+import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
+import { MESSAGE_TYPES } from '../../constants';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+  contentAttributes: {
+    type: Object,
+    default: () => ({}),
+  },
+  messageType: {
+    type: Number,
+    required: true,
+    validator: value => Object.values(MESSAGE_TYPES).includes(value),
+  },
+});
+
+const isTemplate = computed(() => {
+  return props.messageType === MESSAGE_TYPES.TEMPLATE;
+});
+</script>
+
+<template>
+  <BaseBubble class="flex flex-col gap-3 px-4 py-3" data-bubble-name="text">
+    <FormattedContent v-if="content" :content="content" />
+    <AttachmentChips :attachments="attachments" class="gap-2" />
+    <template v-if="isTemplate">
+      <div
+        v-if="contentAttributes.submittedEmail"
+        class="px-2 py-1 rounded-lg bg-n-alpha-3"
+      >
+        {{ contentAttributes.submittedEmail }}
+      </div>
+    </template>
+  </BaseBubble>
+</template>
+
+<style>
+p:last-child {
+  margin-bottom: 0;
+}
+</style>

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

@@ -0,0 +1,9 @@
+<script setup>
+import BaseBubble from './Base.vue';
+</script>
+
+<template>
+  <BaseBubble class="px-4 py-3 text-sm" data-bubble-name="unsupported">
+    {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
+  </BaseBubble>
+</template>

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

@@ -0,0 +1,84 @@
+<script setup>
+import { ref, computed } from 'vue';
+import BaseBubble from './Base.vue';
+import Icon from 'next/icon/Icon.vue';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { useMessageContext } from 'next/message/provider.js';
+import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
+import { ATTACHMENT_TYPES } from '../constants';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ */
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    required: true,
+  },
+});
+const emit = defineEmits(['error']);
+const hasError = ref(false);
+const showGallery = ref(false);
+const { filteredCurrentChatAttachments } = useMessageContext();
+
+const handleError = () => {
+  hasError.value = true;
+  emit('error');
+};
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+
+const isReel = computed(() => {
+  return attachment.value.fileType === ATTACHMENT_TYPES.IG_REEL;
+});
+</script>
+
+<template>
+  <BaseBubble
+    class="overflow-hidden relative group border-[4px] border-n-weak"
+    data-bubble-name="video"
+    @click="showGallery = true"
+  >
+    <div
+      v-if="isReel"
+      class="absolute p-2 flex items-start justify-end size-12 bg-gradient-to-bl from-n-alpha-black1 to-transparent right-0"
+    >
+      <Icon icon="i-lucide-instagram" class="text-white" />
+    </div>
+    <video
+      controls
+      :src="attachment.dataUrl"
+      :class="{
+        'max-w-48': isReel,
+        'max-w-full': !isReel,
+      }"
+      @error="handleError"
+    />
+  </BaseBubble>
+  <GalleryView
+    v-if="showGallery"
+    v-model:show="showGallery"
+    :attachment="useSnakeCase(attachment)"
+    :all-attachments="filteredCurrentChatAttachments"
+    @error="onError"
+    @close="() => (showGallery = false)"
+  />
+</template>

app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { computed, defineOptions, useAttrs } from 'vue';
+
+import ImageChip from 'next/message/chips/Image.vue';
+import VideoChip from 'next/message/chips/Video.vue';
+import AudioChip from 'next/message/chips/Audio.vue';
+import FileChip from 'next/message/chips/File.vue';
+import { useMessageContext } from '../provider.js';
+
+import { ATTACHMENT_TYPES } from '../constants';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+const props = defineProps({
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const attrs = useAttrs();
+const { orientation } = useMessageContext();
+
+const classToApply = computed(() => {
+  const baseClasses = [attrs.class, 'flex', 'flex-wrap'];
+
+  if (orientation.value === 'right') {
+    baseClasses.push('justify-end');
+  }
+
+  return baseClasses;
+});
+
+const allAttachments = computed(() => {
+  return Array.isArray(props.attachments) ? props.attachments : [];
+});
+
+const mediaAttachments = computed(() => {
+  const allowedTypes = [ATTACHMENT_TYPES.IMAGE, ATTACHMENT_TYPES.VIDEO];
+  const mediaTypes = allAttachments.value.filter(attachment =>
+    allowedTypes.includes(attachment.fileType)
+  );
+
+  return mediaTypes.sort(
+    (a, b) =>
+      allowedTypes.indexOf(a.fileType) - allowedTypes.indexOf(b.fileType)
+  );
+});
+
+const recordings = computed(() => {
+  return allAttachments.value.filter(
+    attachment => attachment.fileType === ATTACHMENT_TYPES.AUDIO
+  );
+});
+
+const files = computed(() => {
+  return allAttachments.value.filter(
+    attachment => attachment.fileType === ATTACHMENT_TYPES.FILE
+  );
+});
+</script>
+
+<template>
+  <div v-if="mediaAttachments.length" :class="classToApply">
+    <template v-for="attachment in mediaAttachments" :key="attachment.id">
+      <ImageChip
+        v-if="attachment.fileType === ATTACHMENT_TYPES.IMAGE"
+        :attachment="attachment"
+      />
+      <VideoChip
+        v-else-if="attachment.fileType === ATTACHMENT_TYPES.VIDEO"
+        :attachment="attachment"
+      />
+    </template>
+  </div>
+  <div v-if="recordings.length" :class="classToApply">
+    <div v-for="attachment in recordings" :key="attachment.id">
+      <AudioChip
+        class="bg-n-alpha-3 dark:bg-n-alpha-2 text-n-slate-12"
+        :attachment="attachment"
+      />
+    </div>
+  </div>
+  <div v-if="files.length" :class="classToApply">
+    <FileChip
+      v-for="attachment in files"
+      :key="attachment.id"
+      :attachment="attachment"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/message/chips/Audio.vue

@@ -0,0 +1,133 @@
+<script setup>
+import { computed, useTemplateRef, ref } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+import { timeStampAppendedURL } from 'dashboard/helper/URLHelper';
+
+const { attachment } = defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const timeStampURL = computed(() => {
+  return timeStampAppendedURL(attachment.dataUrl);
+});
+
+const audioPlayer = useTemplateRef('audioPlayer');
+
+const isPlaying = ref(false);
+const isMuted = ref(false);
+const currentTime = ref(0);
+const duration = ref(0);
+
+const onLoadedMetadata = () => {
+  duration.value = audioPlayer.value.duration;
+};
+
+const formatTime = time => {
+  const minutes = Math.floor(time / 60);
+  const seconds = Math.floor(time % 60);
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+};
+
+const toggleMute = () => {
+  audioPlayer.value.muted = !audioPlayer.value.muted;
+  isMuted.value = audioPlayer.value.muted;
+};
+
+const onTimeUpdate = () => {
+  currentTime.value = audioPlayer.value.currentTime;
+};
+
+const seek = event => {
+  const time = Number(event.target.value);
+  audioPlayer.value.currentTime = time;
+  currentTime.value = time;
+};
+
+const playOrPause = () => {
+  if (isPlaying.value) {
+    audioPlayer.value.pause();
+    isPlaying.value = false;
+  } else {
+    audioPlayer.value.play();
+    isPlaying.value = true;
+  }
+};
+
+const onEnd = () => {
+  isPlaying.value = false;
+  currentTime.value = 0;
+};
+
+const downloadAudio = async () => {
+  const response = await fetch(timeStampURL.value);
+  const blob = await response.blob();
+  const url = window.URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  const filename = timeStampURL.value.split('/').pop().split('?')[0] || 'audio';
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  window.URL.revokeObjectURL(url);
+  document.body.removeChild(anchor);
+};
+</script>
+
+<template>
+  <audio
+    ref="audioPlayer"
+    controls
+    class="hidden"
+    @loadedmetadata="onLoadedMetadata"
+    @timeupdate="onTimeUpdate"
+    @ended="onEnd"
+  >
+    <source :src="timeStampURL" />
+  </audio>
+  <div
+    v-bind="$attrs"
+    class="rounded-xl w-full gap-1 p-1.5 bg-n-alpha-white flex items-center border border-n-container shadow-[0px_2px_8px_0px_rgba(94,94,94,0.06)]"
+  >
+    <button class="p-0 border-0 size-8" @click="playOrPause">
+      <Icon
+        v-if="isPlaying"
+        class="size-8"
+        icon="i-teenyicons-pause-small-solid"
+      />
+      <Icon v-else class="size-8" icon="i-teenyicons-play-small-solid" />
+    </button>
+    <div class="tabular-nums text-xs">
+      {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+    </div>
+    <div class="flex items-center px-2">
+      <input
+        type="range"
+        min="0"
+        :max="duration"
+        :value="currentTime"
+        class="w-full h-1 bg-n-slate-12/40 rounded-lg appearance-none cursor-pointer accent-current"
+        @input="seek"
+      />
+    </div>
+    <button
+      class="p-0 border-0 size-8 grid place-content-center"
+      @click="toggleMute"
+    >
+      <Icon v-if="isMuted" class="size-4" icon="i-lucide-volume-off" />
+      <Icon v-else class="size-4" icon="i-lucide-volume-2" />
+    </button>
+    <button
+      class="p-0 border-0 size-8 grid place-content-center"
+      @click="downloadAudio"
+    >
+      <Icon class="size-4" icon="i-lucide-download" />
+    </button>
+  </div>
+</template>

app/javascript/dashboard/components-next/message/chips/File.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FileIcon from 'next/icon/FileIcon.vue';
+import Icon from 'next/icon/Icon.vue';
+
+const { attachment } = defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const fileName = computed(() => {
+  const url = attachment.dataUrl;
+  if (url) {
+    const filename = url.substring(url.lastIndexOf('/') + 1);
+    return filename || t('CONVERSATION.UNKNOWN_FILE_TYPE');
+  }
+  return t('CONVERSATION.UNKNOWN_FILE_TYPE');
+});
+
+const fileType = computed(() => {
+  return fileName.value.split('.').pop();
+});
+
+const textColorClass = computed(() => {
+  const colorMap = {
+    '7z': 'dark:text-[#EDEEF0] text-[#2F265F]',
+    csv: 'text-amber-12',
+    doc: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
+    docx: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
+    json: 'text-n-slate-12',
+    odt: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
+    pdf: 'text-n-ruby-12',
+    ppt: 'dark:text-[#FFE0C2] text-[#582D1D]',
+    pptx: 'dark:text-[#FFE0C2] text-[#582D1D]',
+    rar: 'dark:text-[#EDEEF0] text-[#2F265F]',
+    rtf: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
+    tar: 'dark:text-[#EDEEF0] text-[#2F265F]',
+    txt: 'text-n-slate-12',
+    xls: 'text-n-teal-12',
+    xlsx: 'text-n-teal-12',
+    zip: 'dark:text-[#EDEEF0] text-[#2F265F]',
+  };
+
+  return colorMap[fileType.value] || 'text-n-slate-12';
+});
+</script>
+
+<template>
+  <div
+    class="h-9 bg-n-alpha-white gap-2 items-center flex px-2 rounded-lg border border-n-strong"
+  >
+    <FileIcon class="flex-shrink-0" :file-type="fileType" />
+    <span class="mr-1 max-w-32 truncate" :class="textColorClass">
+      {{ fileName }}
+    </span>
+    <a
+      v-tooltip="t('CONVERSATION.DOWNLOAD')"
+      class="flex-shrink-0 h-9 grid place-content-center cursor-pointer text-n-slate-11"
+      :href="url"
+      rel="noreferrer noopener nofollow"
+      target="_blank"
+    >
+      <Icon icon="i-lucide-download" />
+    </a>
+  </div>
+</template>

app/javascript/dashboard/components-next/message/chips/Image.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { useMessageContext } from '../provider.js';
+
+import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
+
+defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+const hasError = ref(false);
+const showGallery = ref(false);
+
+const { filteredCurrentChatAttachments } = useMessageContext();
+
+const handleError = () => {
+  hasError.value = true;
+};
+</script>
+
+<template>
+  <div
+    class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer"
+    @click="showGallery = true"
+  >
+    <div
+      v-if="hasError"
+      class="flex flex-col items-center justify-center gap-1 text-xs text-center rounded-lg size-full bg-n-alpha-1 text-n-slate-11"
+    >
+      <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
+      {{ $t('COMPONENTS.MEDIA.LOADING_FAILED') }}
+    </div>
+    <img
+      v-else
+      class="object-cover w-full h-full"
+      :src="attachment.dataUrl"
+      @error="handleError"
+    />
+  </div>
+  <GalleryView
+    v-if="showGallery"
+    v-model:show="showGallery"
+    :attachment="useSnakeCase(attachment)"
+    :all-attachments="filteredCurrentChatAttachments"
+    @error="handleError"
+    @close="() => (showGallery = false)"
+  />
+</template>

app/javascript/dashboard/components-next/message/chips/Video.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { useMessageContext } from '../provider.js';
+import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
+
+defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+
+const showGallery = ref(false);
+
+const { filteredCurrentChatAttachments } = useMessageContext();
+</script>
+
+<template>
+  <div
+    class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer relative group"
+    @click="showGallery = true"
+  >
+    <video
+      :src="attachment.dataUrl"
+      class="w-full h-full object-cover"
+      muted
+      playsInline
+    />
+    <div
+      class="absolute w-full h-full inset-0 p-1 flex items-center justify-center"
+    >
+      <div
+        class="size-7 bg-n-slate-1/60 backdrop-blur-sm rounded-full overflow-hidden shadow-[0_5px_15px_rgba(0,0,0,0.4)]"
+      >
+        <Icon
+          icon="i-teenyicons-play-small-solid"
+          class="size-7 text-n-slate-12/80 backdrop-blur"
+        />
+      </div>
+    </div>
+  </div>
+  <GalleryView
+    v-if="showGallery"
+    v-model:show="showGallery"
+    :attachment="useSnakeCase(attachment)"
+    :all-attachments="filteredCurrentChatAttachments"
+    @error="onError"
+    @close="() => (showGallery = false)"
+  />
+</template>

app/javascript/dashboard/components-next/message/constants.js

@@ -0,0 +1,72 @@
+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',
+  ERROR: 'error',
+  TEMPLATE: 'template',
+  EMAIL: 'email',
+  UNSUPPORTED: 'unsupported',
+};
+
+export const SENDER_TYPES = {
+  CONTACT: 'Contact',
+  USER: 'User',
+};
+
+export const ORIENTATION = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  CENTER: 'center',
+};
+
+export const MESSAGE_STATUS = {
+  SENT: 'sent',
+  DELIVERED: 'delivered',
+  READ: 'read',
+  FAILED: 'failed',
+  PROGRESS: 'progress',
+};
+
+export const ATTACHMENT_TYPES = {
+  IMAGE: 'image',
+  AUDIO: 'audio',
+  VIDEO: 'video',
+  FILE: 'file',
+  LOCATION: 'location',
+  FALLBACK: 'fallback',
+  SHARE: 'share',
+  STORY_MENTION: 'story_mention',
+  CONTACT: 'contact',
+  IG_REEL: 'ig_reel',
+};
+
+export const CONTENT_TYPES = {
+  TEXT: 'text',
+  INPUT_TEXT: 'input_text',
+  INPUT_TEXTAREA: 'input_textarea',
+  INPUT_EMAIL: 'input_email',
+  INPUT_SELECT: 'input_select',
+  CARDS: 'cards',
+  FORM: 'form',
+  ARTICLE: 'article',
+  INCOMING_EMAIL: 'incoming_email',
+  INPUT_CSAT: 'input_csat',
+  INTEGRATIONS: 'integrations',
+  STICKER: 'sticker',
+};
+
+export const MEDIA_TYPES = [
+  ATTACHMENT_TYPES.IMAGE,
+  ATTACHMENT_TYPES.VIDEO,
+  ATTACHMENT_TYPES.AUDIO,
+  ATTACHMENT_TYPES.IG_REEL,
+];

app/javascript/dashboard/components-next/message/fixtures/emailConversation.js

@@ -0,0 +1,382 @@
+import camelcaseKeys from 'camelcase-keys';
+
+export default camelcaseKeys(
+  [
+    {
+      id: 60913,
+      content:
+        'Dear Sam,\n\nWe are looking for high-quality cotton fabric for our T-shirt production.\nPlease find attached a document with our specifications and requirements.\nCould you provide us with a quotation and lead time?\n\nLooking forward to your response.\n\nBest regards,\nAlex\nT-Shirt Co.',
+      inbox_id: 992,
+      conversation_id: 134,
+      message_type: 0,
+      content_type: 'incoming_email',
+      status: 'sent',
+      content_attributes: {
+        email: {
+          bcc: null,
+          cc: null,
+          content_type:
+            'multipart/mixed; boundary=00000000000098e88e0628704c8b',
+          date: '2024-12-04T17:13:53+05:30',
+          from: ['alex@paperlayer.test'],
+          html_content: {
+            full: '<div dir="ltr"><p>Dear Sam,</p><p>We are looking for high-quality cotton fabric for our T-shirt production. Please find attached a document with our specifications and requirements. Could you provide us with a quotation and lead time?</p><p>Looking forward to your response.</p><p>Best regards,<br>Alex<br>T-Shirt Co.</p></div>\n',
+            reply:
+              'Dear Sam,\n\nWe are looking for high-quality cotton fabric for our T-shirt production. Please find attached a document with our specifications and requirements. Could you provide us with a quotation and lead time?\n\nLooking forward to your response.\n\nBest regards,\nAlex\nT-Shirt Co.',
+            quoted:
+              'Dear Sam,\n\nWe are looking for high-quality cotton fabric for our T-shirt production. Please find attached a document with our specifications and requirements. Could you provide us with a quotation and lead time?\n\nLooking forward to your response.\n\nBest regards,\nAlex\nT-Shirt Co.',
+          },
+          in_reply_to: null,
+          message_id:
+            'CAM_Qp+-tdJ2Muy4XZmQfYKOPzsFwrH5H=6j=snsFZEDw@mail.gmail.com',
+          multipart: true,
+          number_of_attachments: 2,
+          subject: 'Inquiry and Quotation for Cotton Fabric',
+          text_content: {
+            full: 'Dear Sam,\n\nWe are looking for high-quality cotton fabric for our T-shirt production.\nPlease find attached a document with our specifications and requirements.\nCould you provide us with a quotation and lead time?\n\nLooking forward to your response.\n\nBest regards,\nAlex\nT-Shirt Co.\n',
+            reply:
+              'Dear Sam,\n\nWe are looking for high-quality cotton fabric for our T-shirt production.\nPlease find attached a document with our specifications and requirements.\nCould you provide us with a quotation and lead time?\n\nLooking forward to your response.\n\nBest regards,\nAlex\nT-Shirt Co.',
+            quoted:
+              'Dear Sam,\n\nWe are looking for high-quality cotton fabric for our T-shirt production.\nPlease find attached a document with our specifications and requirements.\nCould you provide us with a quotation and lead time?\n\nLooking forward to your response.\n\nBest regards,\nAlex\nT-Shirt Co.',
+          },
+          to: ['sam@cottonmart.test'],
+        },
+        cc_email: null,
+        bcc_email: null,
+      },
+      created_at: 1733312661,
+      private: false,
+      source_id: 'CAM_Qp+-tdJ2Muy4XZmQfYKOPzsFwrH5H=6j=snsFZEDw@mail.gmail.com',
+      sender: {
+        additional_attributes: {
+          source_id: 'email:CAM_Qp+8beyon41DA@mail.gmail.com',
+        },
+        custom_attributes: {},
+        email: 'alex@paperlayer.test',
+        id: 111256,
+        identifier: null,
+        name: 'Alex',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 826,
+          message_id: 60913,
+          file_type: 'file',
+          account_id: 51,
+          extension: null,
+          data_url:
+            'https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdFdKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--10170e22f42401a9259e17eba6e59877127353d0/requirements.pdf',
+          thumb_url:
+            'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdFdKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--10170e22f42401a9259e17eba6e59877127353d0/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--31a6ed995cc4ac2dd2fa023068ee23b23efa1efb/requirements.pdf',
+          file_size: 841909,
+          width: null,
+          height: null,
+        },
+        {
+          id: 18,
+          message_id: 5307,
+          file_type: 'file',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUVLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4f7e671db635b73d12ee004e87608bc098ef6b3b/quantity-requirements.xls',
+          thumb_url:
+            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUVLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4f7e671db635b73d12ee004e87608bc098ef6b3b/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--5c454d5f03daf1f9f4068cb242cf9885cc1815b6/all-files.zip',
+          file_size: 99844,
+          width: null,
+          height: null,
+        },
+      ],
+    },
+    {
+      id: 60914,
+      content:
+        'Dear Alex,\r\n\r\nThank you for your inquiry. Please find attached our quotation based on your requirements. Let us know if you need further details or wish to discuss specific customizations.\r\n\r\nBest regards,  \r\nSam  \r\nFabricMart',
+      account_id: 51,
+      inbox_id: 992,
+      conversation_id: 134,
+      message_type: 1,
+      created_at: 1733312726,
+      updated_at: '2024-12-04T11:45:34.451Z',
+      private: false,
+      status: 'sent',
+      source_id:
+        'conversation/758d1f24-dc76-4abc-9c41-255ed8974f8e/messages/60914@reply.chatwoot.dev',
+      content_type: 'text',
+      content_attributes: {
+        cc_emails: [],
+        bcc_emails: [],
+        to_emails: [],
+      },
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'Dear Alex,\r\n\r\nThank you for your inquiry. Please find attached our quotation based on your requirements. Let us know if you need further details or wish to discuss specific customizations.\r\n\r\nBest regards,  \r\nSam  \r\nFabricMart',
+      sentiment: {},
+      conversation: {
+        assignee_id: 110,
+        unread_count: 0,
+        last_activity_at: 1733312726,
+        contact_inbox: {
+          source_id: 'alex@paperlayer.test',
+        },
+      },
+      attachments: [
+        {
+          id: 827,
+          message_id: 60914,
+          file_type: 'file',
+          account_id: 51,
+          extension: null,
+          data_url:
+            'https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGFKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--940f9c3df19ce042ef3447809c9c451cfa4e905b/quotation.pdf',
+          thumb_url:
+            'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGFKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--940f9c3df19ce042ef3447809c9c451cfa4e905b/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--31a6ed995cc4ac2dd2fa023068ee23b23efa1efb/quotation.pdf',
+          file_size: 841909,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        id: 110,
+        name: 'Alex',
+        available_name: 'Alex',
+        avatar_url:
+          'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbktJIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--25806e8b52810484d3d6cb53af9e2a1c0cf1b43d/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--988d66f5e450207265d5c21bb0edb3facb890a43/slick-deploy.png',
+        type: 'user',
+        availability_status: 'online',
+        thumbnail:
+          'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbktJIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--25806e8b52810484d3d6cb53af9e2a1c0cf1b43d/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--988d66f5e450207265d5c21bb0edb3facb890a43/slick-deploy.png',
+      },
+    },
+    {
+      id: 60915,
+      content:
+        'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the\nfabric for us to review before proceeding?\n\nBest,\nAlex\n\nOn Wed, 4 Dec 2024 at 17:15, Sam from CottonMart <sam@cottonmart.test> wrote:\n\n> Dear Alex,\n>\n> Thank you for your inquiry. Please find attached our quotation based on\n> your requirements. Let us know if you need further details or wish to\n> discuss specific customizations.\n>\n> Best regards,\n> Sam\n> FabricMart\n> attachment [click here to view\n> <https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGFKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--940f9c3df19ce042ef3447809c9c451cfa4e905b/quotation.pdf>]\n>',
+      account_id: 51,
+      inbox_id: 992,
+      conversation_id: 134,
+      message_type: 0,
+      created_at: 1733312835,
+      updated_at: '2024-12-04T11:47:15.876Z',
+      private: false,
+      status: 'sent',
+      source_id: 'CAM_Qp+_70EiYJ_nKMgJ6MZaD58Tq3E57QERcZgnd10g@mail.gmail.com',
+      content_type: 'incoming_email',
+      content_attributes: {
+        email: {
+          bcc: null,
+          cc: null,
+          content_type:
+            'multipart/alternative; boundary=0000000000007191be06287054c4',
+          date: '2024-12-04T17:16:07+05:30',
+          from: ['alex@paperlayer.test'],
+          html_content: {
+            full: '<div dir="ltr"><p>Dear Sam,</p><p>Thank you for the quotation. Could you share images or samples of the fabric for us to review before proceeding?</p><p>Best,<br>Alex</p></div><br><div class="gmail_quote gmail_quote_container"><div dir="ltr" class="gmail_attr">On Wed, 4 Dec 2024 at 17:15, Sam from CottonMart &lt;<a href="mailto:sam@cottonmart.test">sam@cottonmart.test</a>&gt; wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">  <p>Dear Alex,</p>\n<p>Thank you for your inquiry. Please find attached our quotation based on your requirements. Let us know if you need further details or wish to discuss specific customizations.</p>\n<p>Best regards,<br>\nSam<br>\nFabricMart</p>\n\n    attachment [<a href="https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGFKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--940f9c3df19ce042ef3447809c9c451cfa4e905b/quotation.pdf" target="_blank">click here to view</a>]\n</blockquote></div>\n',
+            reply:
+              'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the fabric for us to review before proceeding?\n\nBest,\nAlex\n\nOn Wed, 4 Dec 2024 at 17:15, Sam from CottonMart <sam@cottonmart.test> wrote:\n>',
+            quoted:
+              'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the fabric for us to review before proceeding?\n\nBest,\nAlex',
+          },
+          in_reply_to:
+            'conversation/758d1f24-dc76-4abc-9c41-255ed8974f8e/messages/60914@reply.chatwoot.dev',
+          message_id:
+            'CAM_Qp+_70EiYJ_nKMgJ6MZaD58Tq3E57QERcZgnd10g@mail.gmail.com',
+          multipart: true,
+          number_of_attachments: 0,
+          subject: 'Re: Inquiry and Quotation for Cotton Fabric',
+          text_content: {
+            full: 'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the\nfabric for us to review before proceeding?\n\nBest,\nAlex\n\nOn Wed, 4 Dec 2024 at 17:15, Sam from CottonMart <sam@cottonmart.test>\nwrote:\n\n> Dear Alex,\n>\n> Thank you for your inquiry. Please find attached our quotation based on\n> your requirements. Let us know if you need further details or wish to\n> discuss specific customizations.\n>\n> Best regards,\n> Sam\n> FabricMart\n> attachment [click here to view\n> <https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGFKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--940f9c3df19ce042ef3447809c9c451cfa4e905b/quotation.pdf>]\n>\n',
+            reply:
+              'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the\nfabric for us to review before proceeding?\n\nBest,\nAlex\n\nOn Wed, 4 Dec 2024 at 17:15, Sam from CottonMart <sam@cottonmart.test> wrote:\n\n> Dear Alex,\n>\n> Thank you for your inquiry. Please find attached our quotation based on\n> your requirements. Let us know if you need further details or wish to\n> discuss specific customizations.\n>\n> Best regards,\n> Sam\n> FabricMart\n> attachment [click here to view\n> <https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGFKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--940f9c3df19ce042ef3447809c9c451cfa4e905b/quotation.pdf>]\n>',
+            quoted:
+              'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the\nfabric for us to review before proceeding?\n\nBest,\nAlex',
+          },
+          to: ['sam@cottonmart.test'],
+        },
+        cc_email: null,
+        bcc_email: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 111256,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the\nfabric for us to review before proceeding?\n\nBest,\nAlex',
+      sentiment: {},
+      conversation: {
+        assignee_id: 110,
+        unread_count: 1,
+        last_activity_at: 1733312835,
+        contact_inbox: {
+          source_id: 'alex@paperlayer.test',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          source_id: 'email:CAM_Qp+8beyon41DA@mail.gmail.com',
+        },
+        custom_attributes: {},
+        email: 'alex@paperlayer.test',
+        id: 111256,
+        identifier: null,
+        name: 'Alex',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      message_type: 1,
+      content_type: 'text',
+      source_id:
+        'conversation/758d1f24-dc76-4abc-9c41-255ed8974f8e/messages/60916@reply.chatwoot.dev',
+      processed_message_content:
+        "Dear Alex,\r\n\r\nPlease find attached images of our cotton fabric samples. Let us know if you'd like physical samples sent to you. \r\n\r\nWarm regards,  \r\nSam",
+      id: 60916,
+      content:
+        "Dear Alex,\r\n\r\nPlease find attached images of our cotton fabric samples. Let us know if you'd like physical samples sent to you. \r\n\r\nWarm regards,  \r\nSam",
+      account_id: 51,
+      inbox_id: 992,
+      conversation_id: 134,
+      created_at: 1733312866,
+      updated_at: '2024-12-04T11:47:53.564Z',
+      private: false,
+      status: 'sent',
+      content_attributes: {
+        cc_emails: [],
+        bcc_emails: [],
+        to_emails: [],
+      },
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 110,
+        unread_count: 0,
+        last_activity_at: 1733312866,
+        contact_inbox: {
+          source_id: 'alex@paperlayer.test',
+        },
+      },
+      attachments: [
+        {
+          id: 828,
+          message_id: 60916,
+          file_type: 'image',
+          account_id: 51,
+          extension: null,
+          data_url:
+            'https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGVKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62ee3b99421bfe7d8db85959ae99ab03a899f351/image.png',
+          thumb_url:
+            'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGVKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62ee3b99421bfe7d8db85959ae99ab03a899f351/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--988d66f5e450207265d5c21bb0edb3facb890a43/image.png',
+          file_size: 1617507,
+          width: 1600,
+          height: 900,
+        },
+      ],
+      sender: {
+        id: 110,
+        name: 'Alex',
+        available_name: 'Alex',
+        avatar_url:
+          'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbktJIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--25806e8b52810484d3d6cb53af9e2a1c0cf1b43d/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--988d66f5e450207265d5c21bb0edb3facb890a43/slick-deploy.png',
+        type: 'user',
+        availability_status: 'online',
+        thumbnail:
+          'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbktJIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--25806e8b52810484d3d6cb53af9e2a1c0cf1b43d/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--988d66f5e450207265d5c21bb0edb3facb890a43/slick-deploy.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-12-04T11:47:46.879Z', '2024-12-04T11:47:53.564Z'],
+        source_id: [
+          null,
+          'conversation/758d1f24-dc76-4abc-9c41-255ed8974f8e/messages/60916@reply.chatwoot.dev',
+        ],
+      },
+    },
+    {
+      id: 60917,
+      content:
+        "Great we were looking for something in a different finish see image attached\n\n[image: image.png]\n\nLet me know if you have different finish options?\n\nBest Regards\n\nOn Wed, 4 Dec 2024 at 17:17, Sam from CottonMart <sam@cottonmart.test> wrote:\n\n> Dear Alex,\n>\n> Please find attached images of our cotton fabric samples. Let us know if\n> you'd like physical samples sent to you.\n>\n> Warm regards,\n> Sam\n> attachment [click here to view\n> <https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGVKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62ee3b99421bfe7d8db85959ae99ab03a899f351/image.png>]\n>",
+      account_id: 51,
+      inbox_id: 992,
+      conversation_id: 134,
+      message_type: 0,
+      created_at: 1733312969,
+      updated_at: '2024-12-04T11:49:29.337Z',
+      private: false,
+      status: 'sent',
+      source_id: 'CAM_Qp+8LuzLTWZXkecjzJAgmb9RAQGm+qTmg@mail.gmail.com',
+      content_type: 'incoming_email',
+      content_attributes: {
+        email: {
+          bcc: null,
+          cc: null,
+          content_type:
+            'multipart/related; boundary=0000000000007701030628705e31',
+          date: '2024-12-04T17:18:54+05:30',
+          from: ['alex@paperlayer.test'],
+          html_content: {
+            full: '<div dir="ltr">Great we were looking for something in a different finish see image attached<br><br><img src="https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGlKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--408309fa40f1cfea87ee3320a062a5d16ce09d4e/image.png" alt="image.png" width="472" height="305"><br><div><br></div><div>Let me know if you have different finish options?<br><br>Best Regards</div></div><br><div class="gmail_quote gmail_quote_container"><div dir="ltr" class="gmail_attr">On Wed, 4 Dec 2024 at 17:17, Sam from CottonMart &lt;<a href="mailto:sam@cottonmart.test">sam@cottonmart.test</a>&gt; wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">  <p>Dear Alex,</p>\n<p>Please find attached images of our cotton fabric samples. Let us know if you&#39;d like physical samples sent to you.</p>\n<p>Warm regards,<br>\nSam</p>\n\n    attachment [<a href="https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGVKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62ee3b99421bfe7d8db85959ae99ab03a899f351/image.png" target="_blank">click here to view</a>]\n</blockquote></div>\n',
+            reply:
+              'Great we were looking for something in a different finish see image attached\n\n[image.png]\n\nLet me know if you have different finish options?\n\nBest Regards\n\nOn Wed, 4 Dec 2024 at 17:17, Sam from CottonMart <sam@cottonmart.test> wrote:\n>',
+            quoted:
+              'Great we were looking for something in a different finish see image attached\n\n[image.png]\n\nLet me know if you have different finish options?\n\nBest Regards',
+          },
+          in_reply_to:
+            'conversation/758d1f24-dc76-4abc-9c41-255ed8974f8e/messages/60916@reply.chatwoot.dev',
+          message_id: 'CAM_Qp+8LuzLTWZXkecjzJAgmb9RAQGm+qTmg@mail.gmail.com',
+          multipart: true,
+          number_of_attachments: 1,
+          subject: 'Re: Inquiry and Quotation for Cotton Fabric',
+          text_content: {
+            full: "Great we were looking for something in a different finish see image attached\n\n[image: image.png]\n\nLet me know if you have different finish options?\n\nBest Regards\n\nOn Wed, 4 Dec 2024 at 17:17, Sam from CottonMart <sam@cottonmart.test> wrote:\n\n> Dear Alex,\n>\n> Please find attached images of our cotton fabric samples. Let us know if\n> you'd like physical samples sent to you.\n>\n> Warm regards,\n> Sam\n> attachment [click here to view\n> <https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGVKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62ee3b99421bfe7d8db85959ae99ab03a899f351/image.png>]\n>",
+            reply:
+              "Great we were looking for something in a different finish see image attached\n\n[image: image.png]\n\nLet me know if you have different finish options?\n\nBest Regards\n\nOn Wed, 4 Dec 2024 at 17:17, Sam from CottonMart <sam@cottonmart.test> wrote:\n\n> Dear Alex,\n>\n> Please find attached images of our cotton fabric samples. Let us know if\n> you'd like physical samples sent to you.\n>\n> Warm regards,\n> Sam\n> attachment [click here to view\n> <https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGVKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62ee3b99421bfe7d8db85959ae99ab03a899f351/image.png>]\n>",
+            quoted:
+              'Great we were looking for something in a different finish see image attached\n\n[image: image.png]\n\nLet me know if you have different finish options?\n\nBest Regards',
+          },
+          to: ['sam@cottonmart.test'],
+        },
+        cc_email: null,
+        bcc_email: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 111256,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'Great we were looking for something in a different finish see image attached\n\n[image: image.png]\n\nLet me know if you have different finish options?\n\nBest Regards',
+      sentiment: {},
+      conversation: {
+        assignee_id: 110,
+        unread_count: 1,
+        last_activity_at: 1733312969,
+        contact_inbox: {
+          source_id: 'alex@paperlayer.test',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          source_id: 'email:CAM_Qp+8beyon41DA@mail.gmail.com',
+        },
+        custom_attributes: {},
+        email: 'alex@paperlayer.test',
+        id: 111256,
+        identifier: null,
+        name: 'Alex',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+  ],
+  { deep: true }
+);

app/javascript/dashboard/components-next/message/fixtures/simpleEmail.js

@@ -0,0 +1,85 @@
+import camelcaseKeys from 'camelcase-keys';
+
+export default camelcaseKeys(
+  [
+    {
+      id: 60716,
+      content:
+        "Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding\nour integration with *Chatwoot* and outline some key features we’ve\nexplored.\n------------------------------\nKey Updates\n\n   1.\n\n   *Integration Status*:\n   The initial integration with Chatwoot has been successful. We've tested:\n   - API connectivity\n      - Multi-channel messaging\n      - Real-time chat updates\n   2.\n\n   *Upcoming Tasks*:\n   - Streamlining notification workflows\n      - Enhancing webhook reliability\n      - Testing team collaboration features\n\n*Note:*\nDon’t forget to check out the automation capabilities in Chatwoot for\nhandling repetitive queries. It can save a ton of time!\n\n------------------------------\nFeatures We Love\n\nHere’s what stood out so far:\n\n   - *Unified Inbox*: All customer conversations in one place.\n   - *Customizable Workflows*: Tailored to our team’s unique needs.\n   - *Integrations*: Works seamlessly with CRM and Slack.\n\n------------------------------\nAction Items For Next Week:\n\n   1. Implement the webhook for *ticket prioritization*.\n   2. Test *CSAT surveys* post-chat sessions.\n   3. Review *analytics dashboard* insights.\n\n------------------------------\nData Snapshot\n\nHere’s a quick overview of our conversation stats this week:\nMetric Value Change (%)\nTotal Conversations 350 +25%\nAverage Response Time 3 minutes -15%\nCSAT Score 92% +10%\n------------------------------\nFeedback\n\n*Do let me know if you have additional feedback or ideas to improve our\nworkflows. Here’s an image of how our Chatwoot dashboard looks with recent\nchanges:*\n\n[image: Chatwoot Dashboard Screenshot]\n------------------------------\n\nLooking forward to hearing your thoughts!\n\nBest regards,\n~ Shivam Mishra",
+      account_id: 51,
+      inbox_id: 991,
+      conversation_id: 46,
+      message_type: 0,
+      created_at: 1733141025,
+      updated_at: '2024-12-02T12:03:45.663Z',
+      private: false,
+      status: 'sent',
+      source_id:
+        'CAM_Qp+8bpiT5xFL7HmVL4a9RD0TmdYw7Lu6ZV02yu=eyon41DA@mail.gmail.com',
+      content_type: 'incoming_email',
+      content_attributes: {
+        email: {
+          bcc: null,
+          cc: null,
+          content_type:
+            'multipart/alternative; boundary=0000000000009d889e0628477235',
+          date: '2024-12-02T16:29:39+05:30',
+          from: ['hey@shivam.dev'],
+          html_content: {
+            full: '<div dir="ltr"><h3><span style="font-size:small;font-weight:normal">Hi Team,</span></h3>\r\n<p>I hope this email finds you well! I wanted to share some updates regarding our integration with <strong>Chatwoot</strong> and outline some key features we’ve explored.</p>\r\n<hr>\r\n<h3>Key Updates</h3>\r\n<ol>\r\n<li>\r\n<p><strong>Integration Status</strong>:<br>\r\nThe initial integration with Chatwoot has been successful. We&#39;ve tested:</p>\r\n<ul>\r\n<li>API connectivity</li>\r\n<li>Multi-channel messaging</li>\r\n<li>Real-time chat updates</li>\r\n</ul>\r\n</li>\r\n<li>\r\n<p><strong>Upcoming Tasks</strong>:</p>\r\n<ul>\r\n<li>Streamlining notification workflows</li>\r\n<li>Enhancing webhook reliability</li>\r\n<li>Testing team collaboration features</li>\r\n</ul>\r\n</li>\r\n</ol>\r\n<blockquote>\r\n<p><strong>Note:</strong><br>\r\nDon’t forget to check out the automation capabilities in Chatwoot for handling repetitive queries. It can save a ton of time!</p>\r\n</blockquote>\r\n<hr>\r\n<h3>Features We Love</h3>\r\n<p>Here’s what stood out so far:</p>\r\n<ul>\r\n<li><strong>Unified Inbox</strong>: All customer conversations in one place.</li>\r\n<li><strong>Customizable Workflows</strong>: Tailored to our team’s unique needs.</li>\r\n<li><strong>Integrations</strong>: Works seamlessly with CRM and Slack.</li>\r\n</ul>\r\n<hr>\r\n<h3>Action Items</h3>\r\n<h4>For Next Week:</h4>\r\n<ol>\r\n<li>Implement the webhook for <strong>ticket prioritization</strong>.</li>\r\n<li>Test <strong>CSAT surveys</strong> post-chat sessions.</li>\r\n<li>Review <strong>analytics dashboard</strong> insights.</li>\r\n</ol>\r\n<hr>\r\n<h3>Data Snapshot</h3>\r\n<p>Here’s a quick overview of our conversation stats this week:</p>\r\n<table>\r\n<thead>\r\n<tr>\r\n<th>Metric</th>\r\n<th>Value</th>\r\n<th>Change (%)</th>\r\n</tr>\r\n</thead>\r\n<tbody>\r\n<tr>\r\n<td>Total Conversations</td>\r\n<td>350</td>\r\n<td>+25%</td>\r\n</tr>\r\n<tr>\r\n<td>Average Response Time</td>\r\n<td>3 minutes</td>\r\n<td>-15%</td>\r\n</tr>\r\n<tr>\r\n<td>CSAT Score</td>\r\n<td>92%</td>\r\n<td>+10%</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n<hr>\r\n<h3>Feedback</h3>\r\n<p><i>Do let me know if you have additional feedback or ideas to improve our workflows. Here’s an image of how our Chatwoot dashboard looks with recent changes:</i></p>\r\n<p><img src="https://via.placeholder.com/600x300" alt="Chatwoot Dashboard Screenshot" title="Chatwoot Dashboard"></p>\r\n<hr>\r\n<p>Looking forward to hearing your thoughts!</p>\r\n<p>Best regards,<br>~ Shivam Mishra<br></p></div>\r\n',
+            reply:
+              "Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding our integration with Chatwoot and outline some key features we’ve explored.\n\n---------------------------------------------------------------\n\nKey Updates\n\n-\n\nIntegration Status:\nThe initial integration with Chatwoot has been successful. We've tested:\n\n- API connectivity\n- Multi-channel messaging\n- Real-time chat updates\n\n-\n\nUpcoming Tasks:\n\n- Streamlining notification workflows\n- Enhancing webhook reliability\n- Testing team collaboration features\n\n>\n---------------------------------------------------------------\n\nFeatures We Love\n\nHere’s what stood out so far:\n\n-  Unified Inbox: All customer conversations in one place.\n-  Customizable Workflows: Tailored to our team’s unique needs.\n-  Integrations: Works seamlessly with CRM and Slack.\n\n---------------------------------------------------------------\n\nAction Items\n\nFor Next Week:\n\n- Implement the webhook for ticket prioritization.\n- Test CSAT surveys post-chat sessions.\n- Review analytics dashboard insights.\n\n---------------------------------------------------------------\n\nData Snapshot\n\nHere’s a quick overview of our conversation stats this week:\n\nMetric\tValue\tChange (%)\nTotal Conversations\t350\t+25%\nAverage Response Time\t3 minutes\t-15%\nCSAT Score\t92%\t+10%\n---------------------------------------------------------------\n\nFeedback\n\nDo let me know if you have additional feedback or ideas to improve our workflows. Here’s an image of how our Chatwoot dashboard looks with recent changes:\n\n[Chatwoot Dashboard]\n\n---------------------------------------------------------------\n\nLooking forward to hearing your thoughts!\n\nBest regards,\n~ Shivam Mishra",
+            quoted:
+              'Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding our integration with Chatwoot and outline some key features we’ve explored.',
+          },
+          in_reply_to: null,
+          message_id:
+            'CAM_Qp+8bpiT5xFL7HmVL4a9RD0TmdYw7Lu6ZV02yu=eyon41DA@mail.gmail.com',
+          multipart: true,
+          number_of_attachments: 0,
+          subject: 'Update on Chatwoot Integration and Features',
+          text_content: {
+            full: "Hi Team,\r\n\r\nI hope this email finds you well! I wanted to share some updates regarding\r\nour integration with *Chatwoot* and outline some key features we’ve\r\nexplored.\r\n------------------------------\r\nKey Updates\r\n\r\n   1.\r\n\r\n   *Integration Status*:\r\n   The initial integration with Chatwoot has been successful. We've tested:\r\n   - API connectivity\r\n      - Multi-channel messaging\r\n      - Real-time chat updates\r\n   2.\r\n\r\n   *Upcoming Tasks*:\r\n   - Streamlining notification workflows\r\n      - Enhancing webhook reliability\r\n      - Testing team collaboration features\r\n\r\n*Note:*\r\nDon’t forget to check out the automation capabilities in Chatwoot for\r\nhandling repetitive queries. It can save a ton of time!\r\n\r\n------------------------------\r\nFeatures We Love\r\n\r\nHere’s what stood out so far:\r\n\r\n   - *Unified Inbox*: All customer conversations in one place.\r\n   - *Customizable Workflows*: Tailored to our team’s unique needs.\r\n   - *Integrations*: Works seamlessly with CRM and Slack.\r\n\r\n------------------------------\r\nAction Items For Next Week:\r\n\r\n   1. Implement the webhook for *ticket prioritization*.\r\n   2. Test *CSAT surveys* post-chat sessions.\r\n   3. Review *analytics dashboard* insights.\r\n\r\n------------------------------\r\nData Snapshot\r\n\r\nHere’s a quick overview of our conversation stats this week:\r\nMetric Value Change (%)\r\nTotal Conversations 350 +25%\r\nAverage Response Time 3 minutes -15%\r\nCSAT Score 92% +10%\r\n------------------------------\r\nFeedback\r\n\r\n*Do let me know if you have additional feedback or ideas to improve our\r\nworkflows. Here’s an image of how our Chatwoot dashboard looks with recent\r\nchanges:*\r\n\r\n[image: Chatwoot Dashboard Screenshot]\r\n------------------------------\r\n\r\nLooking forward to hearing your thoughts!\r\n\r\nBest regards,\r\n~ Shivam Mishra\r\n",
+            reply:
+              "Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding\nour integration with *Chatwoot* and outline some key features we’ve\nexplored.\n------------------------------\nKey Updates\n\n   1.\n\n   *Integration Status*:\n   The initial integration with Chatwoot has been successful. We've tested:\n   - API connectivity\n      - Multi-channel messaging\n      - Real-time chat updates\n   2.\n\n   *Upcoming Tasks*:\n   - Streamlining notification workflows\n      - Enhancing webhook reliability\n      - Testing team collaboration features\n\n*Note:*\nDon’t forget to check out the automation capabilities in Chatwoot for\nhandling repetitive queries. It can save a ton of time!\n\n------------------------------\nFeatures We Love\n\nHere’s what stood out so far:\n\n   - *Unified Inbox*: All customer conversations in one place.\n   - *Customizable Workflows*: Tailored to our team’s unique needs.\n   - *Integrations*: Works seamlessly with CRM and Slack.\n\n------------------------------\nAction Items For Next Week:\n\n   1. Implement the webhook for *ticket prioritization*.\n   2. Test *CSAT surveys* post-chat sessions.\n   3. Review *analytics dashboard* insights.\n\n------------------------------\nData Snapshot\n\nHere’s a quick overview of our conversation stats this week:\nMetric Value Change (%)\nTotal Conversations 350 +25%\nAverage Response Time 3 minutes -15%\nCSAT Score 92% +10%\n------------------------------\nFeedback\n\n*Do let me know if you have additional feedback or ideas to improve our\nworkflows. Here’s an image of how our Chatwoot dashboard looks with recent\nchanges:*\n\n[image: Chatwoot Dashboard Screenshot]\n------------------------------\n\nLooking forward to hearing your thoughts!\n\nBest regards,\n~ Shivam Mishra",
+            quoted:
+              'Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding\nour integration with *Chatwoot* and outline some key features we’ve\nexplored.',
+          },
+          to: ['shivam@chatwoot.com'],
+        },
+        cc_email: null,
+        bcc_email: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 111256,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding\nour integration with *Chatwoot* and outline some key features we’ve\nexplored.',
+      sentiment: {},
+      conversation: {
+        assignee_id: null,
+        unread_count: 1,
+        last_activity_at: 1733141025,
+        contact_inbox: {
+          source_id: 'hey@shivam.dev',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          source_id:
+            'email:CAM_Qp+8bpiT5xFL7HmVL4a9RD0TmdYw7Lu6ZV02yu=eyon41DA@mail.gmail.com',
+        },
+        custom_attributes: {},
+        email: 'hey@shivam.dev',
+        id: 111256,
+        identifier: null,
+        name: 'Shivam Mishra',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+  ],
+  { deep: true }
+);

app/javascript/dashboard/components-next/message/fixtures/textOnly.js

@@ -0,0 +1,715 @@
+import camelcaseKeys from 'camelcase-keys';
+
+export default camelcaseKeys(
+  [
+    {
+      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',
+      },
+    },
+    {
+      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,
+    },
+    {
+      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',
+        },
+      },
+    },
+    {
+      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',
+      },
+    },
+    {
+      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'],
+      },
+    },
+    {
+      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'],
+      },
+    },
+    {
+      id: 5278,
+      content: "Oh, that's unfortunate",
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 0,
+      created_at: 1732195820,
+      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: 1732195820,
+        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: 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: 1732195820,
+      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: 1732195885,
+        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: 1732195886,
+      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: 'progress',
+      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: 'failed',
+      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: {
+        external_error:
+          'Business account is restricted from messaging users in this country.',
+      },
+      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',
+        },
+      },
+    },
+  ],
+  { deep: true }
+);

app/javascript/dashboard/components-next/message/provider.js

@@ -0,0 +1,33 @@
+import { inject, provide, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { ATTACHMENT_TYPES } from './constants';
+
+const MessageControl = Symbol('MessageControl');
+
+export function useMessageContext() {
+  const context = inject(MessageControl, null);
+  if (context === null) {
+    throw new Error(`Component is missing a parent <Message /> component.`);
+  }
+
+  const currentChatAttachments = useMapGetter('getSelectedChatAttachments');
+  const filteredCurrentChatAttachments = computed(() => {
+    const attachments = currentChatAttachments.value.filter(attachment =>
+      [
+        ATTACHMENT_TYPES.IMAGE,
+        ATTACHMENT_TYPES.VIDEO,
+        ATTACHMENT_TYPES.IG_REEL,
+        ATTACHMENT_TYPES.AUDIO,
+      ].includes(attachment.file_type)
+    );
+
+    return useSnakeCase(attachments);
+  });
+
+  return { ...context, filteredCurrentChatAttachments };
+}
+
+export function provideMessageContext(context) {
+  provide(MessageControl, context);
+}

app/javascript/dashboard/components-next/message/stories/EmailMessages.story.vue

@@ -0,0 +1,45 @@
+<script setup>
+import Message from '../Message.vue';
+
+import simpleEmail from '../fixtures/simpleEmail.js';
+import fullConversation from '../fixtures/emailConversation.js';
+import newsletterEmail from '../fixtures/newsletterEmail.js';
+
+const failedEmail = {
+  ...simpleEmail[0],
+  status: 'failed',
+  senderId: 1,
+  senderType: 'User',
+  contentAttributes: {
+    ...simpleEmail[0].contentAttributes,
+    externalError: 'Failed to send email',
+  },
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Messages/Email"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Simple Email">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <template v-for="message in fullConversation" :key="message.id">
+          <Message :current-user-id="1" is-email-inbox v-bind="message" />
+        </template>
+      </div>
+    </Variant>
+    <Variant title="Newsletter">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <template v-for="message in newsletterEmail" :key="message.id">
+          <Message :current-user-id="1" is-email-inbox v-bind="message" />
+        </template>
+      </div>
+    </Variant>
+    <Variant title="Failed Email">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" is-email-inbox v-bind="failedEmail" />
+      </div>
+    </Variant>
+  </Story>
+</template>