Multiple Improvements.

2 files changed, 99 insertions, 1 deletions

diff --git a/Software/Visual_Studio_22/Tango.Portal.Chat.Web/Views/Home/Index.cshtml b/Software/Visual_Studio_22/Tango.Portal.Chat.Web/Views/Home/Index.cshtml
index ef9144e56..a9fcb402d 100644
--- a/Software/Visual_Studio_22/Tango.Portal.Chat.Web/Views/Home/Index.cshtml
+++ b/Software/Visual_Studio_22/Tango.Portal.Chat.Web/Views/Home/Index.cshtml
@@ -36,6 +36,85 @@
 <!-- Markdown renderer -->
 <script src="https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/dist/markdown-it.min.js"></script>
 
+<link href="https://cdn.datatables.net/2.3.3/css/dataTables.dataTables.css" rel="stylesheet">
+<link href="https://cdn.datatables.net/buttons/3.2.4/css/buttons.dataTables.css" rel="stylesheet">
+<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
+<script src="https://cdn.datatables.net/2.3.3/js/dataTables.js"></script>
+<script src="https://cdn.datatables.net/buttons/3.2.4/js/dataTables.buttons.js"></script>
+<script src="https://cdn.datatables.net/buttons/3.2.4/js/buttons.dataTables.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
+<script src="https://cdn.datatables.net/buttons/3.2.4/js/buttons.html5.min.js"></script>
+<script src="https://cdn.datatables.net/buttons/3.2.4/js/buttons.print.min.js"></script>
+<script src="https://cdn.plot.ly/plotly-3.1.0.min.js" charset="utf-8"></script>
+
+
+
+
+<script>
+    function enhanceTable(el){
+      if (el.dataset.dtInitialized) return;
+      el.dataset.dtInitialized = '1';
+      new DataTable(el, {
+        layout: {
+            topStart: {
+                buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
+                }
+        },
+        paging: true,
+        searching: false,
+        ordering: true,
+        info: false,
+        lengthChange: false,
+        // vertical scroll in v2:
+        scrollY: el.getAttribute('data-scroll') || 400,
+        scrollCollapse: !!el.getAttribute('data-scroll'),
+        responsive: true
+      });
+    }
+
+    document.querySelectorAll('table').forEach(enhanceTable);
+
+    new MutationObserver(muts=>{
+      for (const m of muts){
+        m.addedNodes.forEach(n=>{
+          if (n.nodeType!==1) return;
+          if (n.matches?.('table')) enhanceTable(n);
+          n.querySelectorAll?.('table').forEach(enhanceTable);
+        });
+      }
+    }).observe(document.documentElement, {childList:true, subtree:true});
+</script>
+
+<script>
+        // --- Plotly helper (parses string/object and renders as-is) ---
+    function renderPlotlyRaw(ploty, targetEl) {
+      // ploty can be a stringified JSON or an object
+      const plot =
+        typeof ploty === 'string' ? JSON.parse(ploty) :
+        (ploty && typeof ploty === 'object' ? ploty : {});
+
+      // Ensure structure for Plotly
+      plot.data = Array.isArray(plot.data) ? plot.data : [];
+      plot.layout = plot.layout || {};
+
+      // IMPORTANT: Do NOT inject msg.content into the plot title.
+      // The chart will use exactly what the server returned.
+
+      const config = { displayModeBar: true, responsive: true };
+      Plotly.newPlot(targetEl, plot.data, plot.layout, config);
+
+      // keep it responsive
+      window.addEventListener('resize', () => {
+        if (targetEl && targetEl.offsetParent !== null) {
+          Plotly.Plots.resize(targetEl);
+        }
+      }, { passive: true });
+    }
+
+</script>
+
 <script>
     (() => {
       // ---- Ephemeral session state (lost on refresh) ----
@@ -92,6 +171,24 @@
         }
         bubble.appendChild(main);
 
+            // --- ADD: If the assistant returned a Plotly payload, render it below the markdown answer
+        if (!isUser && msg.ploty && String(msg.ploty).trim().length > 0) {
+          const chartDiv = document.createElement('div');
+          chartDiv.className = 'plotly-chart';
+          chartDiv.style.width = '100%';
+          chartDiv.style.height = '420px';
+          bubble.appendChild(chartDiv);
+
+          try {
+            renderPlotlyRaw(msg.ploty, chartDiv); // uses the helper from Step 2
+          } catch (err) {
+            const fallback = document.createElement('pre');
+            fallback.textContent = 'Failed to render chart. Raw ploty:\n' +
+              (typeof msg.ploty === 'string' ? msg.ploty : JSON.stringify(msg.ploty, null, 2));
+            bubble.appendChild(fallback);
+          }
+        }
+
         // Expandable KQL when present
         if (!isUser && msg.usedKql && msg.usedKql.trim().length > 0) {
           const details = document.createElement('details');
@@ -207,6 +304,7 @@
             role:'assistant',
             content: (payload.answer || '').trim() || '(no answer)',
             usedKql: (payload.usedKql || ''),
+            ploty: (payload.ploty || ''),
             ts: Date.now()
           };
           messages.push(assistantMsg);
diff --git a/Software/Visual_Studio_22/Tango.Portal.Chat.Web/Views/Shared/_Layout.cshtml b/Software/Visual_Studio_22/Tango.Portal.Chat.Web/Views/Shared/_Layout.cshtml
index dd23ad446..f5aece565 100644
--- a/Software/Visual_Studio_22/Tango.Portal.Chat.Web/Views/Shared/_Layout.cshtml
+++ b/Software/Visual_Studio_22/Tango.Portal.Chat.Web/Views/Shared/_Layout.cshtml
@@ -7,7 +7,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <title>Twine Solutions</title>
-    <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon.png">
+    <link rel="icon" type="image/png" href="/favicon.png">
     <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:200,300,400,500,600,700,800&amp;display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Outfit:200,300,400,500,600,700,800,900&amp;display=swap">