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

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