Fixes popover position on "chatbot available to agent" icon

Tiledesk · Feb 3, 2025 · 6ce2d29 · 6ce2d29
1 parent f1df414
commit 6ce2d29
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 37 deletions.
diff --git a/src/app/bots/bots-list/bots-list.component.html b/src/app/bots/bots-list/bots-list.component.html
@@ -165,28 +165,7 @@
                   </p>
                 </div>
 
-                <!-- ---------------------------------------------- -->
-                <!-- Popover for the icon human in the loop -->
-                <!-- ---------------------------------------------- -->
-                <sat-popover #botAvailableForAgents horizontalAlign="center" verticalAlign="above"
-                  panelClass="custom-panel-sat-popover" 
-                  closeTransition="1ms ease-in"
-                  (mouseenter)="cancelClosePopover()" 
-                  (mouseleave)="scheduleClosePopover()" 
-                  forceAlignment="true">
-
-                  <div class="custom-panel-sat-popover-content-wpr" style="padding: 12px;">
-
-                    <div class="custom-panel-sat-popover-title">
-                      Available to agents
-                    </div>
-
-                    <div class="custom-panel-sat-popover-description">
-                      Chatbot visible to agents for the purpose to be put back in the conversation
-                    </div>
-
-                  </div>
-                </sat-popover>
+
 
                 <div class="card-list" *ngFor="let faqkb of faqkbList; let i = index">
 
@@ -266,13 +245,16 @@
 
                       <!-- ---------------------------------------------- -->
                       <!-- Icon human in the loop -->
+                      <!-- (mouseenter)="openPopover()"  -->
+                      <!-- scheduleClosePopover() -->
                       <!-- ---------------------------------------------- -->
                       <div class="cl-card-second-column">
                         <div *ngIf="faqkb.agents_available === true || faqkb.agents_available === undefined" class="cl-availble-for-agent"
                           style="position: relative; top: 1px;height: 24px;" 
+
                           [satPopoverAnchor]="botAvailableForAgents"
-                          (mouseenter)="openPopover()" 
-                          (mouseleave)="scheduleClosePopover()">
+                          (mouseenter)="botAvailableForAgents.open()"
+                          (mouseleave)="botAvailableForAgents.close()">
                           <span class="material-icons">boy</span>
                         </div>
                         <div class="cl-card-stats-wpr">
@@ -384,10 +366,34 @@
 
                           </div>
                         </div>
-
                       </div>
 
                     </div>
+
+
+                         <!-- ---------------------------------------------- -->
+                          <!-- Popover for the icon human in the loop -->
+                          <!-- (mouseenter)="cancelClosePopover()"  -->
+                          <!-- (mouseleave)="scheduleClosePopover()"  -->
+                          <!-- ---------------------------------------------- -->
+                          <sat-popover #botAvailableForAgents horizontalAlign="center" verticalAlign="above"
+                          panelClass="custom-panel-sat-popover" 
+                          closeTransition="1ms ease-in"
+
+                          forceAlignment="true">
+
+                          <div class="custom-panel-sat-popover-content-wpr" style="padding: 12px;">
+
+                            <div class="custom-panel-sat-popover-title">
+                              Available to agents
+                            </div>
+
+                            <div class="custom-panel-sat-popover-description">
+                              Chatbot visible to agents for the purpose to be put back in the conversation
+                            </div>
+
+                          </div>
+                        </sat-popover>
                   </div>
                 </div>
               </div>

diff --git a/src/app/bots/bots-list/bots-list.component.ts b/src/app/bots/bots-list/bots-list.component.ts
@@ -38,7 +38,7 @@ const Swal = require('sweetalert2')
 })
 
 export class BotListComponent extends PricingBaseComponent implements OnInit, OnDestroy {
-  @ViewChild('botAvailableForAgents') botAvailableForAgents!: SatPopover;
+  // @ViewChild('botAvailableForAgents') botAvailableForAgents!: SatPopover;
   closeTimeout: any;
   popoverCloseTimeout: any;
   PLAN_NAME = PLAN_NAME;
@@ -177,19 +177,20 @@ export class BotListComponent extends PricingBaseComponent implements OnInit, On
     this.salesEmail = brand['CONTACT_SALES_EMAIL'];
   }
 
-  openPopover() {
-    this.botAvailableForAgents.open();
-  }
+  // openPopover() {
+  //   this.botAvailableForAgents.open();
+  // }
 
-  scheduleClosePopover() {
-    this.closeTimeout = setTimeout(() => {
-      this.botAvailableForAgents.close();
-    }, 100); // Delay before closing (adjust as needed)
-  }
+  // scheduleClosePopover() {
+  //   console.log('scheduleClosePopover botAvailableForAgents ', this.botAvailableForAgents )
+  //   this.closeTimeout = setTimeout(() => {
+  //     this.botAvailableForAgents.close();
+  //   }, 100); // Delay before closing (adjust as needed)
+  // }
 
-  cancelClosePopover() {
-    clearTimeout(this.closeTimeout); // Cancel close if mouse re-enters
-  }
+  // cancelClosePopover() {
+  //   clearTimeout(this.closeTimeout); // Cancel close if mouse re-enters
+  // }
 
 
   ngOnInit() {