fix: Update duplicate ids for dashboard app frame (#8077)

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;

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>