@crestapps/ai-chat-ui 2.0.0-preview.197 → 2.0.0-preview.203

package/dist/chat-interaction.js

@@ -432,7 +432,11 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
     // at the first one, so the sentence is torn into fragments and the commas between the markers are
     // left stranded on their own lines. Inline-block keeps the figure looking exactly the same while
     // remaining something a paragraph can legally contain.
-    return "<span class=\"generated-image-container\">\n            <img src=\"".concat(src, "\" alt=\"").concat(alt, "\" class=\"img-thumbnail\" style=\"max-width: ").concat(maxWidth, "px; height: auto;\" />\n            <span class=\"mt-2 d-block\">\n                <a href=\"").concat(src, "\" target=\"_blank\" download=\"").concat(alt, "\" title=\"").concat(defaultConfig.downloadImageTitle, "\" class=\"btn btn-sm btn-outline-secondary ai-download-image\">\n                    <i class=\"fa-solid fa-download\"></i>\n                </a>\n            </span>\n        </span>");
+    // The download sits over the picture's lower corner rather than on a line of its own beneath it.
+    // A row of its own cost a band of vertical space under every figure, which a conversation full of
+    // them pays for once per figure. The link itself is unchanged -- same address, same download
+    // attribute, same behaviour -- only where it is drawn.
+    return "<span class=\"generated-image-container\">\n            <img src=\"".concat(src, "\" alt=\"").concat(alt, "\" class=\"img-thumbnail\" style=\"max-width: ").concat(maxWidth, "px; height: auto;\" />\n            <a href=\"").concat(src, "\" target=\"_blank\" download=\"").concat(alt, "\" title=\"").concat(defaultConfig.downloadImageTitle, "\" class=\"btn btn-sm btn-outline-secondary ai-download-image\">\n                <i class=\"fa-solid fa-download\"></i>\n            </a>\n        </span>");
   };
 
   // Chart counter for unique IDs
@@ -505,14 +509,50 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
     // Deferred for the same reason the charts below are: the render that produced these elements has
     // not necessarily been flushed to the DOM when this runs.
     requestAnimationFrame(wireBrokenImageHandlers);
+    requestAnimationFrame(wireImageZoom);
   }
-  function wireBrokenImageHandlers() {
-    var images = document.querySelectorAll('.generated-image-container img:not([data-broken-wired])');
+
+  // A picture arrives after the markdown is handed back -- the view writes it, and a streamed answer
+  // rewrites it on every chunk -- so zooming cannot be attached once at load. It is attached on the same
+  // pass as the broken-image handler above, and the attribute marks a picture already attached so a
+  // re-render does not bind it a second time.
+  function wireImageZoom() {
+    // The library is the host's to load. Without it the picture is still shown and still downloadable;
+    // only the enlarging is missing, so this is not worth failing a render over.
+    if (typeof mediumZoom !== 'function') {
+      return;
+    }
+    var images = document.querySelectorAll('.generated-image-container img:not([data-zoom-wired])');
+    if (images.length === 0) {
+      return;
+    }
     var _iterator6 = _createForOfIteratorHelper(images),
       _step6;
     try {
-      var _loop = function _loop() {
+      for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
         var image = _step6.value;
+        image.setAttribute('data-zoom-wired', 'true');
+      }
+    } catch (err) {
+      _iterator6.e(err);
+    } finally {
+      _iterator6.f();
+    }
+    mediumZoom(images, {
+      // The drawing is bounded by the window rather than by this margin, so the margin is kept
+      // small: an ingested figure is read detail by detail, and every pixel given away here comes
+      // off the size it is read at.
+      margin: 16,
+      background: 'rgba(15, 15, 15, 0.92)'
+    });
+  }
+  function wireBrokenImageHandlers() {
+    var images = document.querySelectorAll('.generated-image-container img:not([data-broken-wired])');
+    var _iterator7 = _createForOfIteratorHelper(images),
+      _step7;
+    try {
+      var _loop = function _loop() {
+        var image = _step7.value;
         image.setAttribute('data-broken-wired', 'true');
         image.addEventListener('error', function () {
           var container = image.closest('.generated-image-container');
@@ -529,13 +569,13 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
           once: true
         });
       };
-      for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+      for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
         _loop();
       }
     } catch (err) {
-      _iterator6.e(err);
+      _iterator7.e(err);
     } finally {
-      _iterator6.f();
+      _iterator7.f();
     }
   }
   function renderMessageMedia(message) {
@@ -551,11 +591,11 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
     // Defer to requestAnimationFrame so the browser has fully laid out the
     // canvas elements before Chart.js reads their dimensions.
     requestAnimationFrame(function () {
-      var _iterator7 = _createForOfIteratorHelper(charts),
-        _step7;
+      var _iterator8 = _createForOfIteratorHelper(charts),
+        _step8;
       try {
-        for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
-          var c = _step7.value;
+        for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
+          var c = _step8.value;
           var canvas = document.getElementById(c.chartId);
           if (!canvas) {
             continue;
@@ -588,9 +628,9 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
           }
         }
       } catch (err) {
-        _iterator7.e(err);
+        _iterator8.e(err);
       } finally {
-        _iterator7.f();
+        _iterator8.f();
       }
     });
   }
@@ -1405,18 +1445,18 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
           }, 0);
           var combined = new Uint8Array(totalLength);
           var offset = 0;
-          var _iterator8 = _createForOfIteratorHelper(this.audioChunks),
-            _step8;
+          var _iterator9 = _createForOfIteratorHelper(this.audioChunks),
+            _step9;
           try {
-            for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
-              var chunk = _step8.value;
+            for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
+              var chunk = _step9.value;
               combined.set(chunk, offset);
               offset += chunk.length;
             }
           } catch (err) {
-            _iterator8.e(err);
+            _iterator9.e(err);
           } finally {
-            _iterator8.f();
+            _iterator9.f();
           }
           this.audioChunks = [];
           var blob = new Blob([combined], {
@@ -2328,7 +2368,7 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
           }
           function _loadVoices() {
             _loadVoices = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
-              var deploymentName, realtime, response, contentType, result, grouped, _iterator9, _step9, voice, groupName, _t2;
+              var deploymentName, realtime, response, contentType, result, grouped, _iterator0, _step0, voice, groupName, _t2;
               return _regenerator().w(function (_context4) {
                 while (1) switch (_context4.p = _context4.n) {
                   case 0:
@@ -2376,10 +2416,10 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
                     return _context4.a(2);
                   case 6:
                     grouped = new Map();
-                    _iterator9 = _createForOfIteratorHelper(result.voices);
+                    _iterator0 = _createForOfIteratorHelper(result.voices);
                     try {
-                      for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
-                        voice = _step9.value;
+                      for (_iterator0.s(); !(_step0 = _iterator0.n()).done;) {
+                        voice = _step0.value;
                         groupName = voice.gender || 'Voices';
                         if (!grouped.has(groupName)) {
                           grouped.set(groupName, []);
@@ -2387,9 +2427,9 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
                         grouped.get(groupName).push(voice);
                       }
                     } catch (err) {
-                      _iterator9.e(err);
+                      _iterator0.e(err);
                     } finally {
-                      _iterator9.f();
+                      _iterator0.f();
                     }
                     Array.from(grouped.keys()).sort(function (a, b) {
                       return a.localeCompare(b);