fix: Update location component to avoid overflow, handle location title from Telegram payload (#9113)

Co-authored-by: Pranav <pranav@chatwoot.com>

app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue

@@ -1,31 +1,7 @@
-<template>
+<script setup>
-  <div class="location message-text__wrap">
+import { computed } from 'vue';
-    <div class="icon-wrap">
-      <fluent-icon icon="location" class="file--icon" size="32" />
-    </div>
-    <div class="meta">
-      <h5
-        class="text-sm text-slate-800 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
-      >
-        {{ name }}
-      </h5>
-      <div class="link-wrap">
-        <a
-          class="download clear link button small"
-          rel="noreferrer noopener nofollow"
-          target="_blank"
-          :href="mapUrl"
-        >
-          {{ $t('COMPONENTS.LOCATION_BUBBLE.SEE_ON_MAP') }}
-        </a>
-      </div>
-    </div>
-  </div>
-</template>
 
-<script>
+const props = defineProps({
-export default {
-  props: {
   latitude: {
     type: Number,
     default: undefined,
@@ -38,33 +14,39 @@ export default {
     type: String,
     default: '',
   },
-  },
+});
-  computed: {
+
-    mapUrl() {
+const mapUrl = computed(
-      return `https://maps.google.com/?q=${this.latitude},${this.longitude}`;
+  () => `https://maps.google.com/?q=${props.latitude},${props.longitude}`
-    },
+);
-  },
-};
 </script>
 
-<style lang="scss" scoped>
+<template>
-.location {
+  <div
-  @apply flex flex-row py-1 px-0 cursor-pointer;
+    class="flex flex-row items-center justify-start gap-1 w-full py-1 px-0 cursor-pointer overflow-hidden"
-
+  >
-  .icon-wrap {
+    <fluent-icon
-    @apply text-slate-600 dark:text-slate-200 leading-none my-0 mx-1;
+      icon="location"
-  }
+      class="text-slate-600 dark:text-slate-200 leading-none my-0 flex items-center flex-shrink-0"
-
+      size="32"
-  .text-block-title {
+    />
-    @apply m-0 text-slate-800 dark:text-slate-100 break-words;
+    <div class="flex flex-col items-start flex-1 min-w-0">
-  }
+      <h5
-
+        class="text-sm text-slate-800 dark:text-slate-100 truncate m-0 w-full"
-  .meta {
+        :title="name"
-    @apply flex flex-col items-center pr-4;
+      >
-  }
+        {{ name }}
-
+      </h5>
-  .link-wrap {
+      <div class="flex items-center">
-    @apply flex;
+        <a
-  }
+          class="text-woot-600 dark:text-woot-600 text-xs underline"
-}
+          rel="noreferrer noopener nofollow"
-</style>
+          target="_blank"
+          :href="mapUrl"
+        >
+          {{ $t('COMPONENTS.LOCATION_BUBBLE.SEE_ON_MAP') }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>

app/services/telegram/incoming_message_service.rb

@@ -130,6 +130,7 @@ class Telegram::IncomingMessageService
     @message.attachments.new(
       account_id: @message.account_id,
       file_type: :location,
+      fallback_title: location_fallback_title,
       coordinates_lat: location['latitude'],
       coordinates_long: location['longitude']
     )
@@ -139,6 +140,16 @@ class Telegram::IncomingMessageService
     @file ||= visual_media_params || params[:message][:voice].presence || params[:message][:audio].presence || params[:message][:document].presence
   end
 
+  def location_fallback_title
+    return '' if venue.blank?
+
+    venue[:title] || ''
+  end
+
+  def venue
+    @venue ||= params.dig(:message, :venue).presence
+  end
+
   def location
     @location ||= params.dig(:message, :location).presence
   end

spec/services/telegram/incoming_message_service_spec.rb

@@ -255,6 +255,30 @@ describe Telegram::IncomingMessageService do
         expect(Contact.all.first.name).to eq('Sojan Jose')
         expect(telegram_channel.inbox.messages.first.attachments.first.file_type).to eq('location')
       end
+
+      it 'creates appropriate conversations, message and contacts if venue is present' do
+        params = {
+          'update_id' => 2_342_342_343_242,
+          'message' => {
+            'location': {
+              'latitude': 37.7893768,
+              'longitude': -122.3895553
+            },
+            venue: {
+              title: 'San Francisco'
+            }
+          }.merge(message_params)
+        }.with_indifferent_access
+        described_class.new(inbox: telegram_channel.inbox, params: params).perform
+        expect(telegram_channel.inbox.conversations.count).not_to eq(0)
+        expect(Contact.all.first.name).to eq('Sojan Jose')
+
+        attachment = telegram_channel.inbox.messages.first.attachments.first
+        expect(attachment.file_type).to eq('location')
+        expect(attachment.coordinates_lat).to eq(37.7893768)
+        expect(attachment.coordinates_long).to eq(-122.3895553)
+        expect(attachment.fallback_title).to eq('San Francisco')
+      end
     end
 
     context 'when valid callback_query params' do