From 1e54d6deb3a5e481e06e73abd5574fa046eb3f1f Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Tue, 10 Oct 2023 04:16:32 -0700
Subject: [PATCH] fix: Update duplicate ids for dashboard app frame (#8077)

---
 .../components/widgets/DashboardApp/Frame.vue    | 16 ++++++++++++----
 .../widgets/conversation/ConversationBox.vue     |  1 +
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue b/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
index 2be505f33..a13c3510a 100644
--- a/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
+++ b/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
@@ -12,7 +12,7 @@
       />
       <iframe
         v-if="configItem.type === 'frame' && configItem.url"
-        :id="`dashboard-app--frame-${index}`"
+        :id="getFrameId(index)"
         :src="configItem.url"
         @load="() => onIframeLoad(index)"
       />
@@ -39,6 +39,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    position: {
+      type: Number,
+      required: true,
+    },
   },
   data() {
     return {
@@ -82,10 +86,14 @@ export default {
     };
   },
   methods: {
+    getFrameId(index) {
+      return `dashboard-app--frame-${this.position}-${index}`;
+    },
     onIframeLoad(index) {
-      const frameElement = document.getElementById(
-        `dashboard-app--frame-${index}`
-      );
+      // A possible alternative is to use ref instead of document.getElementById
+      // However, when ref is used together with v-for, the ref you get will be
+      // an array containing the child components mirroring the data source.
+      const frameElement = document.getElementById(this.getFrameId(index));
       const eventData = { event: 'appContext', data: this.dashboardAppContext };
       frameElement.contentWindow.postMessage(JSON.stringify(eventData), '*');
       this.iframeLoading = false;
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index 95cf9eeea..8ba65dadc 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -52,6 +52,7 @@
       :key="currentChat.id + '-' + dashboardApp.id"
       :is-visible="activeIndex - 1 === index"
       :config="dashboardApps[index].content"
+      :position="index"
       :current-chat="currentChat"
     />
   </div>