Improve insights and continue WhatsApp implementation

core/templates/partials/compose-panel.html

@@ -52,7 +52,7 @@
       {% if render_mode == "page" %}
         <a class="button is-light is-rounded" href="{{ compose_workspace_url }}">
           <span class="icon is-small"><i class="fa-solid fa-table-cells-large"></i></span>
-          <span>Open In Workspace</span>
+          <span>Chat Workspace</span>
         </a>
       {% endif %}
     </div>
@@ -204,6 +204,7 @@
                   class="compose-image"
                   src="{{ image_url }}"
                   alt="Attachment"
+                  referrerpolicy="no-referrer"
                   loading="lazy"
                   decoding="async">
               </figure>
@@ -214,6 +215,7 @@
                 class="compose-image"
                 src="{{ msg.image_url }}"
                 alt="Attachment"
+                referrerpolicy="no-referrer"
                 loading="lazy"
                 decoding="async">
             </figure>
@@ -390,7 +392,7 @@
   #{{ panel_id }}-lightbox.compose-lightbox {
     position: fixed;
     inset: 0;
-    z-index: 160;
+    z-index: 12050;
     background: rgba(10, 12, 16, 0.82);
     display: flex;
     align-items: center;
@@ -661,7 +663,7 @@
     width: min(40rem, calc(100% - 1rem));
     margin-top: 0;
     z-index: 35;
-    overflow: auto;
+    overflow: visible;
   }
   #{{ panel_id }} .compose-ai-popover-backdrop {
     position: absolute;
@@ -687,6 +689,7 @@
     background: #fff;
     padding: 0.65rem;
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
+    overflow: visible;
   }
   #{{ panel_id }} .compose-ai-card.is-active {
     display: block;
@@ -863,9 +866,9 @@
     word-break: break-word;
   }
   #{{ panel_id }} .compose-qi-doc-dot {
-    width: 0.5rem;
-    height: 0.5rem;
-    min-width: 0.5rem;
+    width: 0.64rem;
+    height: 0.64rem;
+    min-width: 0.64rem;
     border-radius: 50%;
     border: 0;
     padding: 0;
@@ -874,13 +877,65 @@
     cursor: help;
     opacity: 0.85;
     transform: translateY(0.02rem);
+    position: relative;
+    z-index: 1;
+  }
+  #{{ panel_id }} .compose-qi-doc-dot::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    left: 50%;
+    bottom: calc(100% + 0.42rem);
+    transform: translate(-50%, 0.18rem);
+    width: min(21rem, 75vw);
+    max-width: 21rem;
+    padding: 0.42rem 0.5rem;
+    border-radius: 7px;
+    background: rgba(31, 39, 53, 0.96);
+    color: #f5f8ff;
+    font-size: 0.67rem;
+    line-height: 1.3;
+    text-align: left;
+    white-space: normal;
+    box-shadow: 0 8px 22px rgba(7, 10, 17, 0.28);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 85ms ease, transform 85ms ease, visibility 85ms linear;
+    transition-delay: 30ms;
+  }
+  #{{ panel_id }} .compose-qi-doc-dot::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    bottom: calc(100% + 0.1rem);
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 0.3rem solid transparent;
+    border-right: 0.3rem solid transparent;
+    border-top: 0.36rem solid rgba(31, 39, 53, 0.96);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 85ms ease, visibility 85ms linear;
+    transition-delay: 30ms;
   }
   #{{ panel_id }} .compose-qi-doc-dot:hover,
   #{{ panel_id }} .compose-qi-doc-dot:focus-visible {
+    background: #9ab1cc;
     opacity: 1;
     outline: 1px solid rgba(52, 101, 164, 0.45);
     outline-offset: 1px;
   }
+  #{{ panel_id }} .compose-qi-doc-dot:hover::after,
+  #{{ panel_id }} .compose-qi-doc-dot:focus-visible::after,
+  #{{ panel_id }} .compose-qi-doc-dot:hover::before,
+  #{{ panel_id }} .compose-qi-doc-dot:focus-visible::before {
+    opacity: 1;
+    visibility: visible;
+    transform: translate(-50%, 0);
+    transition-delay: 0ms;
+  }
   #{{ panel_id }} .compose-qi-row-meta {
     display: inline-flex;
     align-items: center;
@@ -1242,6 +1297,7 @@
         img.className = "compose-image";
         img.src = String(candidateUrl);
         img.alt = "Attachment";
+        img.referrerPolicy = "no-referrer";
         img.loading = "lazy";
         img.decoding = "async";
         figure.appendChild(img);
@@ -1290,11 +1346,7 @@
           }
           img.dataset.fallbackBound = "1";
           img.addEventListener("error", function () {
-            const figure = img.closest(".compose-media");
-            if (figure) {
-              figure.remove();
-            }
-            refresh();
+            img.classList.add("is-image-load-failed");
           });
           img.addEventListener("load", function () {
             if (fallback) {
@@ -1921,7 +1973,7 @@
           const dot = document.createElement("button");
           dot.type = "button";
           dot.className = "compose-qi-doc-dot";
-          dot.title = String(tooltipText || "");
+          dot.setAttribute("data-tooltip", String(tooltipText || ""));
           dot.setAttribute("aria-label", "Explain " + String(titleText || "metric"));
           dot.addEventListener("click", function (ev) {
             ev.preventDefault();