@crestapps/ai-chat-ui 1.0.0-preview-22-preview.1

package/dist/chat-interaction.js

@@ -0,0 +1,2088 @@
+/*
+** NOTE: This file is generated by Gulp and should not be edited directly!
+** Any changes made directly to this file will be overwritten next time its asset group is processed by Gulp.
+*/
+
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+window.chatInteractionManager = function () {
+  // Defaults (can be overridden by instanceConfig)
+  var defaultConfig = {
+    // UI defaults for generated media
+    generatedImageAltText: 'Generated Image',
+    generatedImageMaxWidth: 400,
+    generatedChartMaxWidth: 900,
+    downloadImageTitle: 'Download image',
+    downloadChartTitle: 'Download chart as image',
+    downloadChartButtonText: 'Download',
+    codeCopiedText: 'Copied!',
+    assistantLabel: 'Assistant',
+    messageTemplate: "\n            <div class=\"ai-chat-messages\">\n                <div v-for=\"(message, index) in messages\" :key=\"index\" class=\"ai-chat-message-item\">\n                    <div>\n                        <div v-if=\"message.role === 'user'\" class=\"ai-chat-msg-role ai-chat-msg-role-user\">You</div>\n                        <div v-else-if=\"message.role !== 'indicator'\" :class=\"getAssistantRoleClasses(message)\">\n                            <span :class=\"getAssistantIconClasses(message, index)\"><i :class=\"getAssistantIcon(message)\"></i></span>\n                            {{ getAssistantLabel(message) }}\n                        </div>\n                        <div class=\"lh-base\">\n                            <h4 v-if=\"message.title\">{{ message.title }}</h4>\n                            <div v-html=\"message.htmlContent\"></div>\n                            <span class=\"message-buttons-container\" v-if=\"!isIndicator(message)\">\n                                <button class=\"btn btn-sm btn-link text-secondary p-0 button-message-toolbox\" @click=\"copyResponse(message.content)\" title=\"Click here to copy response to clipboard.\">\n                                    <i class=\"fa-solid fa-copy\"></i>\n                                </button>\n                            </span>\n                        </div>\n                    </div>\n                </div>\n                <div v-for=\"notification in notifications\" :key=\"'notif-' + notification.type\" class=\"ai-chat-notification\" :class=\"'ai-chat-notification-' + (notification.type || 'info') + ' ' + (notification.cssClass || '')\">\n                    <div class=\"ai-chat-notification-content\">\n                        <i v-if=\"notification.icon\" :class=\"notification.icon\" class=\"ai-chat-notification-icon\"></i>\n                        <span class=\"ai-chat-notification-text\">{{ notification.content }}</span>\n                        <button v-if=\"notification.dismissible\" class=\"btn btn-sm btn-link p-0 ms-2 ai-chat-notification-dismiss\" @click=\"dismissNotification(notification.type)\" title=\"Dismiss\">\n                            <i class=\"fa-solid fa-xmark\"></i>\n                        </button>\n                    </div>\n                    <div v-if=\"notification.actions && notification.actions.length\" class=\"ai-chat-notification-actions\">\n                        <button v-for=\"action in notification.actions\" :key=\"action.name\" class=\"btn btn-sm\" :class=\"action.cssClass || 'btn-outline-secondary'\" @click=\"handleNotificationAction(notification.type, action.name)\">\n                            <i v-if=\"action.icon\" :class=\"action.icon\" class=\"me-1\"></i>\n                            {{ action.label }}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        ",
+    indicatorTemplate: "\n            <div class=\"ai-chat-msg-role ai-chat-msg-role-assistant\">\n                <span class=\"ai-streaming-icon\"><i class=\"fa fa-robot\" style=\"display: inline-block;\"></i></span>\n                Assistant\n            </div>\n        ",
+    // Localizable strings
+    untitledText: 'Untitled',
+    clearHistoryTitle: 'Clear History',
+    clearHistoryMessage: 'Are you sure you want to clear the chat history? This action cannot be undone. Your documents, parameters, and tools will be preserved.',
+    clearHistoryOkText: 'Yes',
+    clearHistoryCancelText: 'Cancel'
+  };
+
+  // Sanitize URLs to prevent javascript: protocol injection.
+  function sanitizeUrl(url) {
+    if (!url) return '';
+    var trimmed = url.trim();
+    if (/^javascript:/i.test(trimmed) || /^vbscript:/i.test(trimmed) || /^data:text\/html/i.test(trimmed)) {
+      return '';
+    }
+    return url;
+  }
+
+  // Safely HTML-encode a string using the DOM (avoids regex-based HTML filtering).
+  function escapeHtmlEntities(text) {
+    var span = document.createElement('span');
+    span.textContent = text;
+    return span.innerHTML;
+  }
+  var renderer = new marked.Renderer();
+
+  // Modify the link rendering to open in a new tab
+  renderer.link = function (data) {
+    var href = sanitizeUrl(data.href);
+    if (!href) return data.text || '';
+    return "<a href=\"".concat(href, "\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(data.text, "</a>");
+  };
+
+  // Custom code block renderer with highlight.js integration and copy button.
+  renderer.code = function (data) {
+    var code = data.text || '';
+    var lang = (data.lang || '').trim();
+    var highlighted = code;
+    if (typeof hljs !== 'undefined') {
+      if (lang && hljs.getLanguage(lang)) {
+        try {
+          highlighted = hljs.highlight(code, {
+            language: lang
+          }).value;
+        } catch (_) {}
+      } else {
+        try {
+          highlighted = hljs.highlightAuto(code).value;
+        } catch (_) {}
+      }
+    } else {
+      highlighted = escapeHtmlEntities(code);
+    }
+    var langDisplay = lang ? escapeHtmlEntities(lang) : 'code';
+    return "<div class=\"ai-code-block\"><div class=\"ai-code-header\"><span class=\"ai-code-lang\"><i class=\"fa-solid fa-code\"></i> ".concat(langDisplay, "</span><button type=\"button\" class=\"ai-code-copy-btn\" title=\"Copy code\"><i class=\"fa-regular fa-copy\"></i></button></div><pre><code class=\"hljs").concat(lang ? ' language-' + lang : '', "\">").concat(highlighted, "</code></pre></div>");
+  };
+
+  // Custom image renderer for generated images with thumbnail styling and download button.
+  // Handles both URL and data-URI sources (data URIs are converted to blobs for download).
+  renderer.image = function (data) {
+    var src = sanitizeUrl(data.href);
+    if (!src) return '';
+    var alt = data.text || defaultConfig.generatedImageAltText;
+    var maxWidth = defaultConfig.generatedImageMaxWidth;
+    return "<div class=\"generated-image-container\">\n            <img src=\"".concat(src, "\" alt=\"").concat(alt, "\" class=\"img-thumbnail\" style=\"max-width: ").concat(maxWidth, "px; height: auto;\" />\n            <div class=\"mt-2\">\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            </div>\n        </div>");
+  };
+
+  // Chart counter for unique IDs
+  var chartCounter = 0;
+
+  // Collector for charts discovered during marked parsing.
+  var _pendingCharts = [];
+
+  // Global chart config map shared with ai-chat.js
+  window.__chartConfigs = window.__chartConfigs || {};
+  function createChartHtml(chartId) {
+    var chartMaxWidth = defaultConfig.generatedChartMaxWidth;
+    return "<div class=\"chart-container\" style=\"position: relative; width: 100%; max-width: ".concat(chartMaxWidth, "px;\">") + "<canvas id=\"".concat(chartId, "\" class=\"img-thumbnail\"></canvas>") + "</div>" + "<div class=\"mt-2\">" + "<button type=\"button\" class=\"btn btn-sm btn-outline-secondary download-chart-btn\" data-chart-id=\"".concat(chartId, "\" title=\"").concat(defaultConfig.downloadChartTitle, "\">") + "<i class=\"fa-solid fa-download\"></i> ".concat(defaultConfig.downloadChartButtonText) + "</button>" + "</div>";
+  }
+
+  // Register [chart:{...json...}] as a native marked block extension so the
+  // markdown parser handles chart markers inline with surrounding text.
+  marked.use({
+    extensions: [{
+      name: 'chart',
+      level: 'block',
+      start: function start(src) {
+        var idx = src.indexOf('[chart:');
+        return idx >= 0 ? idx : undefined;
+      },
+      tokenizer: function tokenizer(src) {
+        var extracted = tryExtractChartMarker(src);
+        if (!extracted || extracted.startIndex !== 0) {
+          return undefined;
+        }
+        var chartId = "chat_chart_".concat(++chartCounter);
+        return {
+          type: 'chart',
+          raw: src.substring(0, extracted.endIndex),
+          chartId: chartId,
+          json: extracted.json
+        };
+      },
+      renderer: function renderer(token) {
+        _pendingCharts.push({
+          chartId: token.chartId,
+          config: token.json
+        });
+        window.__chartConfigs[token.chartId] = token.json;
+        return createChartHtml(token.chartId);
+      }
+    }]
+  });
+
+  // Extract a [chart:{...json...}] marker. This avoids regex issues with nested brackets.
+  function tryExtractChartMarker(text) {
+    var token = '[chart:';
+    var start = text.indexOf(token);
+    if (start < 0) {
+      return null;
+    }
+
+    // Find JSON object boundary by balancing braces
+    var jsonStart = start + token.length;
+    var i = jsonStart;
+    while (i < text.length && (text[i] === ' ' || text[i] === '\n' || text[i] === '\r' || text[i] === '\t')) {
+      i++;
+    }
+    if (i >= text.length || text[i] !== '{') {
+      return null;
+    }
+    var depth = 0;
+    var inString = false;
+    var escape = false;
+    for (; i < text.length; i++) {
+      var ch = text[i];
+      if (inString) {
+        if (escape) {
+          escape = false;
+          continue;
+        }
+        if (ch === '\\') {
+          escape = true;
+          continue;
+        }
+        if (ch === '"') {
+          inString = false;
+        }
+        continue;
+      }
+      if (ch === '"') {
+        inString = true;
+        continue;
+      }
+      if (ch === '{') {
+        depth++;
+      } else if (ch === '}') {
+        depth--;
+        if (depth === 0) {
+          var jsonEnd = i;
+          // Expect closing bracket after JSON
+          var closeBracketIndex = text.indexOf(']', jsonEnd + 1);
+          if (closeBracketIndex < 0) {
+            return null;
+          }
+          var json = text.substring(jsonStart, jsonEnd + 1).trim();
+          return {
+            startIndex: start,
+            endIndex: closeBracketIndex + 1,
+            json: json
+          };
+        }
+      }
+    }
+    return null;
+  }
+  function renderChartsInMessage(message) {
+    if (!message || !message._pendingCharts || !message._pendingCharts.length) {
+      return;
+    }
+
+    // Copy and clear pending charts immediately to prevent duplicate renders.
+    var charts = _toConsumableArray(message._pendingCharts);
+    message._pendingCharts = [];
+
+    // Defer to requestAnimationFrame so the browser has fully laid out the
+    // canvas elements before Chart.js reads their dimensions.
+    requestAnimationFrame(function () {
+      var _iterator = _createForOfIteratorHelper(charts),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var c = _step.value;
+          var canvas = document.getElementById(c.chartId);
+          if (!canvas) {
+            continue;
+          }
+          if (typeof Chart === 'undefined') {
+            console.warn('Chart.js is not loaded. To render interactive charts, include the Chart.js library on the page (e.g., <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>).');
+            continue;
+          }
+          try {
+            var _cfg$options;
+            // Destroy existing chart instance if re-rendering
+            if (canvas._chartInstance) {
+              canvas._chartInstance.destroy();
+            }
+            var cfg = typeof c.config === 'string' ? JSON.parse(c.config) : c.config;
+            (_cfg$options = cfg.options) !== null && _cfg$options !== void 0 ? _cfg$options : cfg.options = {};
+            cfg.options.responsive = true;
+            cfg.options.maintainAspectRatio = false;
+            canvas._chartInstance = new Chart(canvas, cfg);
+          } catch (e) {
+            console.error('Error creating chart:', e);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    });
+  }
+
+  // Parse markdown content via marked (which natively handles [chart:...] markers
+  // through the registered extension) and collect pending chart configs for later
+  // Chart.js rendering.
+  function parseMarkdownContent(content, message) {
+    _pendingCharts = [];
+    var html = marked.parse(content, {
+      renderer: renderer
+    });
+    message._pendingCharts = _pendingCharts.length > 0 ? _toConsumableArray(_pendingCharts) : [];
+    return DOMPurify.sanitize(html, {
+      ADD_ATTR: ['target']
+    });
+  }
+  var initialize = function initialize(instanceConfig) {
+    var config = Object.assign({}, defaultConfig, instanceConfig);
+    // Keep defaultConfig in sync so renderers use overridden values
+    defaultConfig = config;
+    if (!config.signalRHubUrl) {
+      console.error('The signalRHubUrl is required.');
+      return;
+    }
+    if (!config.appElementSelector) {
+      console.error('The appElementSelector is required.');
+      return;
+    }
+    if (!config.chatContainerElementSelector) {
+      console.error('The chatContainerElementSelector is required.');
+      return;
+    }
+    if (!config.inputElementSelector) {
+      console.error('The inputElementSelector is required.');
+      return;
+    }
+    if (!config.sendButtonElementSelector) {
+      console.error('The sendButtonElementSelector is required.');
+      return;
+    }
+    var app = Vue.createApp({
+      data: function data() {
+        return {
+          inputElement: null,
+          buttonElement: null,
+          chatContainer: null,
+          placeholder: null,
+          isInteractionStarted: false,
+          isPlaceholderVisible: true,
+          isStreaming: false,
+          isNavigatingAway: false,
+          autoScroll: true,
+          stream: null,
+          messages: [],
+          prompt: '',
+          initialFieldValues: new Map(),
+          settingsDirty: false,
+          saveSettingsTimeout: null,
+          saveIndicatorTimeout: null,
+          isRecording: false,
+          mediaRecorder: null,
+          preRecordingPrompt: '',
+          micButton: null,
+          speechToTextEnabled: config.chatMode === 'AudioInput' || config.chatMode === 'Conversation',
+          textToSpeechEnabled: config.chatMode === 'Conversation',
+          ttsVoiceName: config.ttsVoiceName || null,
+          audioChunks: [],
+          audioPlayQueue: [],
+          isPlayingAudio: false,
+          currentAudioElement: null,
+          conversationModeEnabled: config.chatMode === 'Conversation',
+          conversationButton: null,
+          isConversationMode: false,
+          notifications: [],
+          notificationDismissTimers: {}
+        };
+      },
+      computed: {
+        lastAssistantIndex: function lastAssistantIndex() {
+          for (var i = this.messages.length - 1; i >= 0; i--) {
+            if (this.messages[i].role === 'assistant') {
+              return i;
+            }
+          }
+          return -1;
+        }
+      },
+      methods: {
+        handleBeforeUnload: function handleBeforeUnload() {
+          this.isNavigatingAway = true;
+        },
+        startConnection: function startConnection() {
+          var _this = this;
+          return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+            var _t;
+            return _regenerator().w(function (_context) {
+              while (1) switch (_context.p = _context.n) {
+                case 0:
+                  _this.connection = new signalR.HubConnectionBuilder().withUrl(config.signalRHubUrl).withAutomaticReconnect().build();
+
+                  // Allow long-running operations (e.g., multi-step MCP tool calls)
+                  // without the client disconnecting prematurely.
+                  _this.connection.serverTimeoutInMilliseconds = 600000;
+                  _this.connection.keepAliveIntervalInMilliseconds = 15000;
+                  _this.connection.on("LoadInteraction", function (data) {
+                    var _data$messages;
+                    _this.initializeInteraction(data.itemId, true);
+                    _this.messages = []; // Update the title field if it exists
+                    var titleInput = document.querySelector('[data-chat-interaction-title], .setting-input[data-setting="title"], input[name="ChatInteraction.Title"], input[name="Title"]');
+                    if (titleInput && data.title) {
+                      titleInput.value = data.title;
+                    }
+                    ((_data$messages = data.messages) !== null && _data$messages !== void 0 ? _data$messages : []).forEach(function (msg) {
+                      _this.addMessage(msg);
+                      _this.$nextTick(function () {
+                        renderChartsInMessage(msg);
+                      });
+                    });
+                  });
+                  _this.connection.on("SettingsSaved", function (itemId, title) {
+                    // Update the history list item if it exists
+                    // Use a more specific selector to only target history list items, not other elements like the Clear History button
+                    var historyItem = document.querySelector(".chat-interaction-history-item[data-interaction-id=\"".concat(itemId, "\"]"));
+                    if (historyItem) {
+                      historyItem.textContent = title || config.untitledText;
+                    }
+                    var titleInput = document.querySelector('[data-chat-interaction-title], .setting-input[data-setting="title"], input[name="ChatInteraction.Title"], input[name="Title"]');
+                    if (titleInput && title) {
+                      titleInput.value = title;
+                    }
+                    _this.showSaveIndicator('Saved', 'text-success');
+                  });
+                  _this.connection.on("ReceiveError", function (error) {
+                    console.error("SignalR Error: ", error);
+                    _this.showSaveIndicator('Save failed', 'text-danger');
+                    if (_this.isRecording) {
+                      _this.stopRecording();
+                    }
+                  });
+                  _this.connection.on("ReceiveTranscript", function (itemId, text, isFinal) {
+                    if (_this.isConversationMode) {
+                      if (!isFinal && text) {
+                        _this._conversationPartialTranscript = text;
+                        var escaped = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+                        var html = '<p class="ai-partial-transcript">' + escaped + '</p>';
+
+                        // Show partial transcript as a live user message.
+                        if (!_this._conversationPartialMessage) {
+                          _this.hidePlaceholder();
+                          _this._conversationPartialMessage = {
+                            role: 'user',
+                            content: text,
+                            htmlContent: html,
+                            isPartial: true
+                          };
+                          _this.messages.push(_this._conversationPartialMessage);
+                        } else {
+                          _this._conversationPartialMessage.content = text;
+                          _this._conversationPartialMessage.htmlContent = html;
+                        }
+                        _this.scrollToBottom();
+                      }
+                      return;
+                    }
+                    if (text && !_this._audioInputSent) {
+                      _this.prompt = _this.preRecordingPrompt + text;
+                      if (_this.inputElement) {
+                        _this.inputElement.value = _this.prompt;
+                        _this.inputElement.dispatchEvent(new Event('input'));
+                      }
+                    }
+                  });
+                  _this.connection.on("ReceiveConversationUserMessage", function (itemId, text) {
+                    if (text) {
+                      _this.stopAudio();
+
+                      // If there's an interrupted assistant message still streaming,
+                      // mark it as done to stop the spinner animation.
+                      if (_this._conversationAssistantMessage) {
+                        var oldMsg = _this.messages[_this._conversationAssistantMessage.index];
+                        if (oldMsg) {
+                          oldMsg.isStreaming = false;
+                        }
+                        _this._conversationAssistantMessage = null;
+                      }
+
+                      // Replace the partial transcript message with the final one.
+                      if (_this._conversationPartialMessage) {
+                        var escaped = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+                        _this._conversationPartialMessage.content = text;
+                        _this._conversationPartialMessage.htmlContent = '<p>' + escaped + '</p>';
+                        _this._conversationPartialMessage.isPartial = false;
+                        _this._conversationPartialMessage = null;
+                      } else {
+                        _this.addMessage({
+                          role: 'user',
+                          content: text
+                        });
+                      }
+                      _this.scrollToBottom();
+                    }
+                  });
+                  _this.connection.on("ReceiveConversationAssistantToken", function (itemId, messageId, token, responseId, appearance) {
+                    if (!_this._conversationAssistantMessage) {
+                      _this.stopAudio();
+                      _this.hideTypingIndicator();
+
+                      // Ensure no stale streaming indicators remain from prior messages.
+                      for (var j = 0; j < _this.messages.length; j++) {
+                        if (_this.messages[j].isStreaming) {
+                          _this.messages[j].isStreaming = false;
+                        }
+                      }
+                      var msgIndex = _this.messages.length;
+                      var newMessage = {
+                        id: messageId,
+                        role: "assistant",
+                        content: "",
+                        htmlContent: "",
+                        isStreaming: true,
+                        appearance: _this.normalizeAssistantAppearance(appearance)
+                      };
+                      _this.messages.push(newMessage);
+                      _this._conversationAssistantMessage = {
+                        index: msgIndex,
+                        content: ''
+                      };
+                    }
+                    _this._conversationAssistantMessage.content += token;
+                    var msg = _this.messages[_this._conversationAssistantMessage.index];
+                    if (msg) {
+                      if (!msg.appearance) {
+                        msg.appearance = _this.normalizeAssistantAppearance(appearance);
+                      }
+                      msg.content = _this._conversationAssistantMessage.content;
+                      msg.htmlContent = parseMarkdownContent(msg.content, msg);
+                      _this.$nextTick(function () {
+                        renderChartsInMessage(msg);
+                        _this.scrollToBottom();
+                      });
+                    }
+                  });
+                  _this.connection.on("ReceiveConversationAssistantComplete", function (itemId, messageId) {
+                    if (_this._conversationAssistantMessage) {
+                      var msg = _this.messages[_this._conversationAssistantMessage.index];
+                      if (msg) {
+                        msg.isStreaming = false;
+                      }
+                      _this._conversationAssistantMessage = null;
+                    }
+                  });
+                  _this.connection.on("ReceiveAudioChunk", function (itemId, base64Audio, contentType) {
+                    if (base64Audio) {
+                      var binaryString = atob(base64Audio);
+                      var bytes = new Uint8Array(binaryString.length);
+                      for (var i = 0; i < binaryString.length; i++) {
+                        bytes[i] = binaryString.charCodeAt(i);
+                      }
+                      _this.audioChunks.push(bytes);
+                    }
+                  });
+                  _this.connection.on("ReceiveAudioComplete", function (itemId) {
+                    _this.playCollectedAudio();
+                  });
+                  _this.connection.on("HistoryCleared", function (itemId) {
+                    // Clear messages and show placeholder
+                    _this.messages = [];
+                    _this.showPlaceholder();
+
+                    // Hide the clear history button since there's no history now
+                    var clearHistoryBtn = document.getElementById('clearHistoryBtn');
+                    if (clearHistoryBtn) {
+                      clearHistoryBtn.classList.add('d-none');
+                    }
+                  });
+                  _this.connection.on("ReceiveNotification", function (notification) {
+                    _this.receiveNotification(notification);
+                  });
+                  _this.connection.on("UpdateNotification", function (notification) {
+                    _this.updateNotification(notification);
+                  });
+                  _this.connection.on("RemoveNotification", function (notificationType) {
+                    _this.removeNotification(notificationType);
+                  });
+                  _this.connection.onreconnecting(function () {
+                    console.warn("SignalR: reconnecting...");
+                  });
+                  _this.connection.onreconnected(function () {
+                    console.info("SignalR: reconnected.");
+                    _this.reloadCurrentInteraction();
+                  });
+                  _this.connection.onclose(function (error) {
+                    if (_this.isNavigatingAway) {
+                      return;
+                    }
+                    if (error) {
+                      console.warn("SignalR connection closed with error:", error.message || error);
+                    }
+                  });
+                  _context.p = 1;
+                  _context.n = 2;
+                  return _this.connection.start();
+                case 2:
+                  _context.n = 4;
+                  break;
+                case 3:
+                  _context.p = 3;
+                  _t = _context.v;
+                  console.error("SignalR Connection Error: ", _t);
+                case 4:
+                  return _context.a(2);
+              }
+            }, _callee, null, [[1, 3]]);
+          }))();
+        },
+        addMessageInternal: function addMessageInternal(message) {
+          var _this2 = this;
+          if (message.role === 'assistant') {
+            message.appearance = this.normalizeAssistantAppearance(message.appearance);
+          }
+          if (message.content && !message.htmlContent) {
+            message.htmlContent = parseMarkdownContent(message.content, message);
+          }
+          this.fireEvent(new CustomEvent("addingChatInteractionMessage", {
+            detail: {
+              message: message
+            }
+          }));
+          this.messages.push(message);
+          this.$nextTick(function () {
+            _this2.fireEvent(new CustomEvent("addedChatInteractionMessage", {
+              detail: {
+                message: message
+              }
+            }));
+          });
+        },
+        addMessage: function addMessage(message) {
+          var _this3 = this;
+          if (message.content) {
+            var processedContent = message.content.trim();
+            if (message.references && _typeof(message.references) === "object" && Object.keys(message.references).length) {
+              // Only include references that were actually cited in the response.
+              var citedRefs = Object.entries(message.references).filter(function (_ref) {
+                var _ref2 = _slicedToArray(_ref, 1),
+                  key = _ref2[0];
+                return processedContent.includes(key);
+              });
+              if (citedRefs.length) {
+                // Sort by original index so display indices follow a natural order.
+                citedRefs.sort(function (_ref3, _ref4) {
+                  var _ref5 = _slicedToArray(_ref3, 2),
+                    a = _ref5[1];
+                  var _ref6 = _slicedToArray(_ref4, 2),
+                    b = _ref6[1];
+                  return a.index - b.index;
+                });
+
+                // Phase 1: Replace all markers with unique placeholders.
+                var displayIndex = 1;
+                var _iterator2 = _createForOfIteratorHelper(citedRefs),
+                  _step2;
+                try {
+                  for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+                    var _step2$value = _slicedToArray(_step2.value, 2),
+                      key = _step2$value[0],
+                      value = _step2$value[1];
+                    var placeholder = "__CITE_".concat(value.index, "__");
+                    processedContent = processedContent.replaceAll(key, placeholder);
+                    value._displayIndex = displayIndex++;
+                    value._placeholder = placeholder;
+                  }
+
+                  // Phase 2: Replace placeholders with sequential display indices.
+                } catch (err) {
+                  _iterator2.e(err);
+                } finally {
+                  _iterator2.f();
+                }
+                var _iterator3 = _createForOfIteratorHelper(citedRefs),
+                  _step3;
+                try {
+                  for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+                    var _step3$value = _slicedToArray(_step3.value, 2),
+                      _value = _step3$value[1];
+                    processedContent = processedContent.replaceAll(_value._placeholder, "<sup><strong>".concat(_value._displayIndex, "</strong></sup>"));
+                  }
+                } catch (err) {
+                  _iterator3.e(err);
+                } finally {
+                  _iterator3.f();
+                }
+                processedContent = processedContent.replaceAll('</strong></sup><sup>', '</strong></sup><sup>,</sup><sup>');
+                processedContent += '<br><br>';
+                var _iterator4 = _createForOfIteratorHelper(citedRefs),
+                  _step4;
+                try {
+                  for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+                    var _step4$value = _slicedToArray(_step4.value, 2),
+                      _key = _step4$value[0],
+                      _value2 = _step4$value[1];
+                    var label = _value2.text || "[doc:".concat(_value2.index, "]");
+                    processedContent += _value2.link ? "**".concat(_value2._displayIndex, "**. [").concat(label, "](").concat(_value2.link, ")<br>") : "**".concat(_value2._displayIndex, "**. ").concat(label, "<br>");
+                  }
+                } catch (err) {
+                  _iterator4.e(err);
+                } finally {
+                  _iterator4.f();
+                }
+              }
+            }
+            message.content = processedContent;
+            message.htmlContent = parseMarkdownContent(processedContent, message);
+          }
+          this.addMessageInternal(message);
+          this.hidePlaceholder();
+          this.$nextTick(function () {
+            // Render any pending charts once the DOM is updated
+            renderChartsInMessage(message);
+            _this3.scrollToBottom();
+          });
+        },
+        hidePlaceholder: function hidePlaceholder() {
+          if (this.placeholder) {
+            this.placeholder.classList.add('d-none');
+          }
+          this.isPlaceholderVisible = false;
+        },
+        showPlaceholder: function showPlaceholder() {
+          if (this.placeholder) {
+            this.placeholder.classList.remove('d-none');
+          }
+          this.isPlaceholderVisible = true;
+        },
+        fireEvent: function fireEvent(event) {
+          document.dispatchEvent(event);
+        },
+        normalizeAssistantAppearance: function normalizeAssistantAppearance(appearance) {
+          if (!appearance) {
+            return null;
+          }
+          var label = typeof appearance.label === 'string' ? appearance.label.trim() : '';
+          var icon = typeof appearance.icon === 'string' ? appearance.icon.trim() : '';
+          var cssClass = typeof appearance.cssClass === 'string' ? appearance.cssClass.trim() : '';
+          var disableStreamingAnimation = !!appearance.disableStreamingAnimation;
+          if (!label && !icon && !cssClass && !disableStreamingAnimation) {
+            return null;
+          }
+          return {
+            label: label,
+            icon: icon,
+            cssClass: cssClass,
+            disableStreamingAnimation: disableStreamingAnimation
+          };
+        },
+        getAssistantLabel: function getAssistantLabel(message) {
+          var appearance = message ? this.normalizeAssistantAppearance(message.appearance) : null;
+          return appearance && appearance.label ? appearance.label : defaultConfig.assistantLabel;
+        },
+        getAssistantRoleClasses: function getAssistantRoleClasses(message) {
+          var appearance = message ? this.normalizeAssistantAppearance(message.appearance) : null;
+          var classes = ['ai-chat-msg-role'];
+          if (appearance && appearance.cssClass) {
+            classes.push(appearance.cssClass);
+          } else {
+            classes.push('ai-chat-msg-role-assistant');
+          }
+          return classes;
+        },
+        getAssistantIconClasses: function getAssistantIconClasses(message, index) {
+          var appearance = message ? this.normalizeAssistantAppearance(message.appearance) : null;
+          return [this.shouldAnimateAssistantIcon(message, index) ? 'ai-streaming-icon' : 'ai-bot-icon', appearance && appearance.cssClass ? appearance.cssClass : ''];
+        },
+        getAssistantIcon: function getAssistantIcon(message) {
+          var appearance = message ? this.normalizeAssistantAppearance(message.appearance) : null;
+          return appearance && appearance.icon ? appearance.icon : 'fa fa-robot';
+        },
+        shouldAnimateAssistantIcon: function shouldAnimateAssistantIcon(message, index) {
+          var appearance = message ? this.normalizeAssistantAppearance(message.appearance) : null;
+          return !!message && message.isStreaming && index === this.lastAssistantIndex && !(appearance && appearance.disableStreamingAnimation);
+        },
+        isIndicator: function isIndicator(message) {
+          return message.role === 'indicator';
+        },
+        sendMessage: function sendMessage() {
+          var _this4 = this;
+          return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+            var trimmedPrompt, clearHistoryBtn;
+            return _regenerator().w(function (_context2) {
+              while (1) switch (_context2.n) {
+                case 0:
+                  trimmedPrompt = _this4.prompt.trim();
+                  if (trimmedPrompt) {
+                    _context2.n = 1;
+                    break;
+                  }
+                  return _context2.a(2);
+                case 1:
+                  // Stop any active recording before sending.
+                  if (_this4.isRecording) {
+                    _this4.stopRecording();
+                  }
+
+                  // Prevent stale ReceiveTranscript events from repopulating the prompt.
+                  _this4._audioInputSent = true;
+
+                  // Flush any pending settings save before sending a message
+                  // to prevent concurrent hub calls that can cause database deadlocks.
+                  _context2.n = 2;
+                  return _this4.flushPendingSave();
+                case 2:
+                  _this4.addMessage({
+                    role: 'user',
+                    content: trimmedPrompt
+                  });
+
+                  // Show the clear history button since we now have prompts
+                  clearHistoryBtn = document.getElementById('clearHistoryBtn');
+                  if (clearHistoryBtn) {
+                    clearHistoryBtn.classList.remove('d-none');
+                  }
+                  _this4.streamMessage(trimmedPrompt);
+                  _this4.inputElement.value = '';
+                  _this4.prompt = '';
+                case 3:
+                  return _context2.a(2);
+              }
+            }, _callee2);
+          }))();
+        },
+        streamMessage: function streamMessage(trimmedPrompt) {
+          var _this5 = this;
+          if (this.stream) {
+            this.stream.dispose();
+            this.stream = null;
+          }
+          this.streamingStarted();
+          this.showTypingIndicator();
+          this.autoScroll = true;
+          var content = '';
+          var references = {};
+          var lastResponseId = null;
+          var messageIndex = this.messages.length;
+          var currentItemId = this.getItemId();
+          this.stream = this.connection.stream("SendMessage", currentItemId, trimmedPrompt).subscribe({
+            next: function next(chunk) {
+              var message = _this5.messages[messageIndex];
+              if (!message) {
+                if (chunk.sessionId && !currentItemId) {
+                  _this5.setItemId(chunk.sessionId);
+                }
+                _this5.hideTypingIndicator();
+                messageIndex = _this5.messages.length;
+                var newMessage = {
+                  role: "assistant",
+                  content: "",
+                  htmlContent: "",
+                  isStreaming: true
+                };
+                _this5.messages.push(newMessage);
+                message = newMessage;
+              }
+              if (chunk.references && _typeof(chunk.references) === "object" && Object.keys(chunk.references).length) {
+                for (var _i = 0, _Object$entries = Object.entries(chunk.references); _i < _Object$entries.length; _i++) {
+                  var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+                    key = _Object$entries$_i[0],
+                    value = _Object$entries$_i[1];
+                  references[key] = value;
+                }
+              }
+              if (chunk.content) {
+                // When the responseId changes (e.g., after an internal tool call),
+                // insert a line break to visually separate response segments.
+                if (chunk.responseId && lastResponseId && chunk.responseId !== lastResponseId) {
+                  content += '\n\n';
+                }
+                if (chunk.responseId) {
+                  lastResponseId = chunk.responseId;
+                }
+                var processedContent = chunk.content;
+                for (var _i2 = 0, _Object$entries2 = Object.entries(references); _i2 < _Object$entries2.length; _i2++) {
+                  var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
+                    _key2 = _Object$entries2$_i[0],
+                    _value3 = _Object$entries2$_i[1];
+                  processedContent = processedContent.replaceAll(_key2, "<sup><strong>".concat(_value3.index, "</strong></sup>"));
+                }
+                content += processedContent.replaceAll('</strong></sup><sup>', '</strong></sup><sup>,</sup><sup>');
+              }
+              message.content = content;
+              message.htmlContent = parseMarkdownContent(content, message);
+              _this5.messages[messageIndex] = message;
+              _this5.$nextTick(function () {
+                renderChartsInMessage(message);
+                _this5.scrollToBottom();
+              });
+            },
+            complete: function complete() {
+              var _this5$stream;
+              _this5.processReferences(references, messageIndex);
+              _this5.streamingFinished();
+              var msg = _this5.messages[messageIndex];
+              if (msg) {
+                msg.isStreaming = false;
+              }
+              if (!msg || !msg.content) {
+                // No content received at all.
+                _this5.hideTypingIndicator();
+              }
+
+              // Trigger text-to-speech only in conversation mode.
+              if (_this5.isConversationMode && _this5.textToSpeechEnabled && msg && msg.content) {
+                _this5.synthesizeSpeech(msg.content);
+              }
+              (_this5$stream = _this5.stream) === null || _this5$stream === void 0 || _this5$stream.dispose();
+              _this5.stream = null;
+            },
+            error: function error(err) {
+              var _this5$stream2;
+              _this5.processReferences(references, messageIndex);
+              _this5.streamingFinished();
+              var msg = _this5.messages[messageIndex];
+              if (msg) {
+                msg.isStreaming = false;
+              }
+              _this5.hideTypingIndicator();
+              if (!_this5.isNavigatingAway) {
+                _this5.addMessage(_this5.getServiceDownMessage());
+              }
+              (_this5$stream2 = _this5.stream) === null || _this5$stream2 === void 0 || _this5$stream2.dispose();
+              _this5.stream = null;
+              console.error("Stream error:", err);
+            }
+          });
+        },
+        getServiceDownMessage: function getServiceDownMessage() {
+          return {
+            role: "assistant",
+            content: "Our service is currently unavailable. Please try again later. We apologize for the inconvenience.",
+            htmlContent: ""
+          };
+        },
+        processReferences: function processReferences(references, messageIndex) {
+          var _this6 = this;
+          if (Object.keys(references).length) {
+            var message = this.messages[messageIndex];
+            var content = message.content || '';
+
+            // Only include references that were actually cited in the response.
+            // Check both raw [doc:N] markers and already-rendered <sup> tags from streaming.
+            var citedRefs = Object.entries(references).filter(function (_ref7) {
+              var _ref8 = _slicedToArray(_ref7, 2),
+                key = _ref8[0],
+                value = _ref8[1];
+              return content.includes(key) || content.includes("<sup><strong>".concat(value.index, "</strong></sup>"));
+            });
+            if (!citedRefs.length) {
+              return;
+            }
+
+            // Sort by original index so display indices follow a natural order.
+            citedRefs.sort(function (_ref9, _ref0) {
+              var _ref1 = _slicedToArray(_ref9, 2),
+                a = _ref1[1];
+              var _ref10 = _slicedToArray(_ref0, 2),
+                b = _ref10[1];
+              return a.index - b.index;
+            });
+
+            // Phase 1: Replace all markers with unique placeholders to avoid collisions during remapping.
+            var processed = content.trim();
+            var displayIndex = 1;
+            var _iterator5 = _createForOfIteratorHelper(citedRefs),
+              _step5;
+            try {
+              for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+                var _step5$value = _slicedToArray(_step5.value, 2),
+                  key = _step5$value[0],
+                  value = _step5$value[1];
+                var placeholder = "__CITE_".concat(value.index, "__");
+                processed = processed.replaceAll(key, placeholder);
+                processed = processed.replaceAll("<sup><strong>".concat(value.index, "</strong></sup>"), placeholder);
+                value._displayIndex = displayIndex++;
+                value._placeholder = placeholder;
+              }
+
+              // Phase 2: Replace placeholders with sequential display indices.
+            } catch (err) {
+              _iterator5.e(err);
+            } finally {
+              _iterator5.f();
+            }
+            var _iterator6 = _createForOfIteratorHelper(citedRefs),
+              _step6;
+            try {
+              for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+                var _step6$value = _slicedToArray(_step6.value, 2),
+                  _value4 = _step6$value[1];
+                processed = processed.replaceAll(_value4._placeholder, "<sup><strong>".concat(_value4._displayIndex, "</strong></sup>"));
+              }
+            } catch (err) {
+              _iterator6.e(err);
+            } finally {
+              _iterator6.f();
+            }
+            processed = processed.replaceAll('</strong></sup><sup>', '</strong></sup><sup>,</sup><sup>');
+            processed += '<br><br>';
+            var _iterator7 = _createForOfIteratorHelper(citedRefs),
+              _step7;
+            try {
+              for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+                var _step7$value = _slicedToArray(_step7.value, 2),
+                  _key3 = _step7$value[0],
+                  _value5 = _step7$value[1];
+                var label = _value5.text || "[doc:".concat(_value5.index, "]");
+                processed += _value5.link ? "**".concat(_value5._displayIndex, "**. [").concat(label, "](").concat(_value5.link, ")<br>") : "**".concat(_value5._displayIndex, "**. ").concat(label, "<br>");
+              }
+            } catch (err) {
+              _iterator7.e(err);
+            } finally {
+              _iterator7.f();
+            }
+            message.content = processed;
+            message.htmlContent = parseMarkdownContent(processed, message);
+            this.messages[messageIndex] = message;
+            this.$nextTick(function () {
+              renderChartsInMessage(message);
+              _this6.scrollToBottom();
+            });
+          }
+        },
+        streamingStarted: function streamingStarted() {
+          var stopIcon = this.buttonElement.getAttribute('data-stop-icon');
+          if (stopIcon) {
+            this.buttonElement.replaceChildren(DOMPurify.sanitize(stopIcon, {
+              RETURN_DOM_FRAGMENT: true
+            }));
+          }
+        },
+        streamingFinished: function streamingFinished() {
+          var startIcon = this.buttonElement.getAttribute('data-start-icon');
+          if (startIcon) {
+            this.buttonElement.replaceChildren(DOMPurify.sanitize(startIcon, {
+              RETURN_DOM_FRAGMENT: true
+            }));
+          }
+
+          // Directly manipulate the DOM to stop all streaming animations.
+          if (this.chatContainer) {
+            var icons = this.chatContainer.querySelectorAll('.ai-streaming-icon');
+            for (var i = 0; i < icons.length; i++) {
+              icons[i].classList.remove('ai-streaming-icon');
+              icons[i].classList.add('ai-bot-icon');
+            }
+          }
+
+          // Also update Vue data for consistency.
+          for (var i = 0; i < this.messages.length; i++) {
+            if (this.messages[i].isStreaming) {
+              this.messages[i].isStreaming = false;
+            }
+          }
+
+          // Save any settings that were deferred during streaming.
+          if (this.settingsDirty) {
+            this.debouncedSaveSettings();
+          }
+        },
+        synthesizeSpeech: function synthesizeSpeech(text) {
+          var _this7 = this;
+          if (!this.textToSpeechEnabled || !text || !this.connection) {
+            return;
+          }
+          this.audioChunks = [];
+          this.isPlayingAudio = true;
+          this.connection.invoke("SynthesizeSpeech", this.getItemId(), text, this.ttsVoiceName)["catch"](function (err) {
+            console.error("TTS synthesis error:", err);
+            _this7.isPlayingAudio = false;
+          });
+        },
+        playCollectedAudio: function playCollectedAudio() {
+          if (this.audioChunks.length === 0) {
+            if (!this.isPlayingAudio && this.audioPlayQueue.length === 0) {
+              this.isPlayingAudio = false;
+            }
+            return;
+          }
+          var totalLength = this.audioChunks.reduce(function (sum, chunk) {
+            return sum + chunk.length;
+          }, 0);
+          var combined = new Uint8Array(totalLength);
+          var offset = 0;
+          var _iterator8 = _createForOfIteratorHelper(this.audioChunks),
+            _step8;
+          try {
+            for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
+              var chunk = _step8.value;
+              combined.set(chunk, offset);
+              offset += chunk.length;
+            }
+          } catch (err) {
+            _iterator8.e(err);
+          } finally {
+            _iterator8.f();
+          }
+          this.audioChunks = [];
+          var blob = new Blob([combined], {
+            type: 'audio/mp3'
+          });
+
+          // If audio is currently playing, queue this blob for later.
+          if (this.isPlayingAudio && this.currentAudioElement) {
+            this.audioPlayQueue.push(blob);
+            return;
+          }
+          this.playAudioBlob(blob);
+        },
+        playAudioBlob: function playAudioBlob(blob) {
+          var _this8 = this;
+          var url = URL.createObjectURL(blob);
+          var audio = new Audio(url);
+          this.currentAudioElement = audio;
+          this.isPlayingAudio = true;
+          audio.addEventListener('ended', function () {
+            URL.revokeObjectURL(url);
+            _this8.currentAudioElement = null;
+            _this8.playNextInQueue();
+          });
+          audio.addEventListener('error', function () {
+            URL.revokeObjectURL(url);
+            _this8.currentAudioElement = null;
+            _this8.playNextInQueue();
+          });
+          audio.play()["catch"](function (err) {
+            console.error("Audio playback error:", err);
+            URL.revokeObjectURL(url);
+            _this8.currentAudioElement = null;
+            _this8.isPlayingAudio = false;
+          });
+        },
+        playNextInQueue: function playNextInQueue() {
+          if (this.audioPlayQueue.length > 0) {
+            var nextBlob = this.audioPlayQueue.shift();
+            this.playAudioBlob(nextBlob);
+          } else {
+            this.isPlayingAudio = false;
+            this.conversationModeOnAudioEnded();
+          }
+        },
+        stopAudio: function stopAudio() {
+          if (this.currentAudioElement) {
+            this.currentAudioElement.pause();
+            this.currentAudioElement.currentTime = 0;
+            this.currentAudioElement = null;
+          }
+          this.audioChunks = [];
+          this.audioPlayQueue = [];
+          this.isPlayingAudio = false;
+        },
+        toggleConversationMode: function toggleConversationMode() {
+          if (this.isConversationMode) {
+            this.stopConversationMode();
+          } else {
+            this.startConversationMode();
+          }
+        },
+        startConversationMode: function startConversationMode() {
+          var _this9 = this;
+          if (!this.conversationModeEnabled || this.isConversationMode || !this.connection) {
+            return;
+          }
+          this.isConversationMode = true;
+          this.updateConversationButton();
+          this._conversationPartialTranscript = '';
+          this._conversationAssistantMessage = null;
+          this._conversationPartialMessage = null;
+
+          // Remove any previous conversation ended notification.
+          this.removeNotification('conversation-ended');
+          navigator.mediaDevices.getUserMedia({
+            audio: {
+              echoCancellation: true,
+              noiseSuppression: true,
+              autoGainControl: true
+            }
+          }).then(function (stream) {
+            var mimeType = MediaRecorder.isTypeSupported('audio/ogg;codecs=opus') ? 'audio/ogg;codecs=opus' : MediaRecorder.isTypeSupported('audio/webm;codecs=opus') ? 'audio/webm;codecs=opus' : 'audio/webm';
+            _this9.mediaRecorder = new MediaRecorder(stream, {
+              mimeType: mimeType,
+              audioBitsPerSecond: 128000
+            });
+            _this9._conversationSubject = new signalR.Subject();
+            _this9._conversationStream = stream;
+
+            // Create an AnalyserNode for volume-based interrupt detection.
+            var AudioCtx = window.AudioContext || window.webkitAudioContext;
+            if (AudioCtx) {
+              _this9._conversationAudioCtx = new AudioCtx();
+              _this9._conversationAnalyser = _this9._conversationAudioCtx.createAnalyser();
+              _this9._conversationAnalyser.fftSize = 256;
+              var micSource = _this9._conversationAudioCtx.createMediaStreamSource(stream);
+              micSource.connect(_this9._conversationAnalyser);
+            }
+            var pendingChunk = Promise.resolve();
+            var analyser = _this9._conversationAnalyser;
+            var interruptVolumeThreshold = 30;
+            _this9.mediaRecorder.addEventListener('dataavailable', function (e) {
+              if (e.data && e.data.size > 0) {
+                // During TTS playback, check mic volume to detect
+                // user interruption (speaking above threshold).
+                if (_this9.isPlayingAudio && analyser) {
+                  var freqData = new Uint8Array(analyser.frequencyBinCount);
+                  analyser.getByteFrequencyData(freqData);
+                  var sum = 0;
+                  for (var k = 0; k < freqData.length; k++) {
+                    sum += freqData[k];
+                  }
+                  var avg = sum / freqData.length;
+                  if (avg >= interruptVolumeThreshold) {
+                    // User is speaking — interrupt TTS playback.
+                    _this9.stopAudio();
+                  }
+                }
+
+                // Always send audio to STT — browser echo cancellation
+                // handles speaker echo; continuous audio avoids gaps
+                // that increase recognition latency.
+                pendingChunk = pendingChunk.then(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+                  var data, uint8Array, binaryString, base64;
+                  return _regenerator().w(function (_context3) {
+                    while (1) switch (_context3.n) {
+                      case 0:
+                        _context3.n = 1;
+                        return e.data.arrayBuffer();
+                      case 1:
+                        data = _context3.v;
+                        uint8Array = new Uint8Array(data);
+                        binaryString = uint8Array.reduce(function (str, _byte) {
+                          return str + String.fromCharCode(_byte);
+                        }, '');
+                        base64 = btoa(binaryString);
+                        try {
+                          _this9._conversationSubject.next(base64);
+                        } catch (err) {
+                          // Subject may have been completed already.
+                        }
+                      case 2:
+                        return _context3.a(2);
+                    }
+                  }, _callee3);
+                })));
+              }
+            });
+            _this9.mediaRecorder.addEventListener('stop', function () {
+              stream.getTracks().forEach(function (track) {
+                return track.stop();
+              });
+              pendingChunk.then(function () {
+                try {
+                  _this9._conversationSubject.complete();
+                } catch (err) {
+                  // Already completed.
+                }
+              });
+            });
+            var itemId = _this9.getItemId();
+            var language = navigator.language || document.documentElement.lang || 'en-US';
+            _this9.connection.send("StartConversation", itemId, _this9._conversationSubject, mimeType, language);
+            _this9.mediaRecorder.start(250);
+            _this9.isRecording = true;
+          })["catch"](function (err) {
+            console.error('Microphone access denied:', err);
+            _this9.isConversationMode = false;
+            _this9.updateConversationButton();
+          });
+        },
+        stopConversationMode: function stopConversationMode() {
+          if (!this.isConversationMode) {
+            return;
+          }
+          this.isConversationMode = false;
+          this.updateConversationButton();
+
+          // Signal the server to cancel all in-progress STT/TTS streams immediately.
+          if (this.connection) {
+            this.connection.invoke("StopConversation")["catch"](function () {});
+          }
+          if (this.isRecording && this.mediaRecorder) {
+            this.mediaRecorder.stop();
+            this.isRecording = false;
+          }
+          this.stopAudio();
+          this._conversationPartialTranscript = '';
+          this._conversationPartialMessage = null;
+
+          // Clean up the AudioContext used for volume monitoring.
+          if (this._conversationAudioCtx) {
+            this._conversationAudioCtx.close()["catch"](function () {});
+            this._conversationAudioCtx = null;
+            this._conversationAnalyser = null;
+          }
+
+          // Mark any in-flight assistant message as done to stop the spinner.
+          if (this._conversationAssistantMessage) {
+            var msg = this.messages[this._conversationAssistantMessage.index];
+            if (msg) {
+              msg.isStreaming = false;
+            }
+            this._conversationAssistantMessage = null;
+          }
+
+          // Safety net: clear all lingering streaming indicators.
+          for (var i = 0; i < this.messages.length; i++) {
+            if (this.messages[i].isStreaming) {
+              this.messages[i].isStreaming = false;
+            }
+          }
+
+          // Show a "conversation ended" notification system message.
+          this.receiveNotification({
+            type: 'conversation-ended',
+            content: 'Conversation ended.',
+            icon: 'fa-solid fa-circle-check',
+            dismissible: true,
+            autoDismissMs: 5000
+          });
+        },
+        updateConversationButton: function updateConversationButton() {
+          if (!this.conversationButton) {
+            return;
+          }
+          if (this.isConversationMode) {
+            this.conversationButton.classList.add('active', 'btn-primary');
+            this.conversationButton.classList.remove('btn-dark', 'btn-outline-dark', 'btn-outline-secondary');
+            this.conversationButton.title = this.conversationButton.getAttribute('data-end-title') || 'End Conversation';
+            var endHtml = this.conversationButton.getAttribute('data-end-html');
+            if (endHtml) {
+              this.conversationButton.replaceChildren(DOMPurify.sanitize(endHtml, {
+                RETURN_DOM_FRAGMENT: true
+              }));
+            }
+          } else {
+            this.conversationButton.classList.remove('active', 'btn-primary');
+            this.conversationButton.classList.remove('btn-dark', 'btn-outline-secondary');
+            this.conversationButton.classList.add('btn-outline-dark');
+            this.conversationButton.blur();
+            this.conversationButton.title = this.conversationButton.getAttribute('data-start-title') || 'Start Conversation';
+            var startHtml = this.conversationButton.getAttribute('data-start-html');
+            if (startHtml) {
+              this.conversationButton.replaceChildren(DOMPurify.sanitize(startHtml, {
+                RETURN_DOM_FRAGMENT: true
+              }));
+            }
+          }
+        },
+        conversationModeSendPrompt: function conversationModeSendPrompt() {
+          // Legacy: only used by AudioInput mode's ReceiveTranscript.
+        },
+        conversationModeOnAudioEnded: function conversationModeOnAudioEnded() {
+          // Legacy: in conversation mode, continuation is handled
+          // by the persistent stream.
+        },
+        showTypingIndicator: function showTypingIndicator() {
+          this.addMessage({
+            role: 'indicator',
+            htmlContent: config.indicatorTemplate
+          });
+        },
+        hideTypingIndicator: function hideTypingIndicator() {
+          var originalLength = this.messages.length;
+          this.messages = this.messages.filter(function (msg) {
+            return msg.role !== 'indicator';
+          });
+          var removedCount = originalLength - this.messages.length;
+          return removedCount;
+        },
+        scrollToBottom: function scrollToBottom() {
+          var _this0 = this;
+          if (!this.autoScroll) {
+            return;
+          }
+          setTimeout(function () {
+            _this0.chatContainer.scrollTop = _this0.chatContainer.scrollHeight - _this0.chatContainer.clientHeight;
+          }, 50);
+        },
+        handleUserInput: function handleUserInput(event) {
+          this.prompt = event.target.value;
+        },
+        getItemId: function getItemId() {
+          return this.inputElement.getAttribute('data-interaction-id') || this.inputElement.getAttribute('data-item-id');
+        },
+        getSaveIndicatorElement: function getSaveIndicatorElement() {
+          if (config.saveIndicatorElementSelector) {
+            return document.querySelector(config.saveIndicatorElementSelector);
+          }
+          return document.querySelector('[data-chat-interaction-save-indicator]');
+        },
+        showSaveIndicator: function showSaveIndicator(text, className) {
+          var _this1 = this;
+          var indicator = this.getSaveIndicatorElement();
+          if (!indicator) {
+            return;
+          }
+          indicator.textContent = text || '';
+          indicator.className = 'settings-save-indicator ' + (className || 'text-muted');
+          if (this.saveIndicatorTimeout) {
+            clearTimeout(this.saveIndicatorTimeout);
+            this.saveIndicatorTimeout = null;
+          }
+          if (!text) {
+            return;
+          }
+          this.saveIndicatorTimeout = setTimeout(function () {
+            indicator.textContent = '';
+            _this1.saveIndicatorTimeout = null;
+          }, 3000);
+        },
+        clearPendingSettingsSave: function clearPendingSettingsSave() {
+          if (this.saveSettingsTimeout) {
+            clearTimeout(this.saveSettingsTimeout);
+            this.saveSettingsTimeout = null;
+          }
+        },
+        getFieldLabel: function getFieldLabel(input) {
+          var _input$closest;
+          var label = (_input$closest = input.closest('.mb-3, .col-6, .col, .form-group, .form-floating')) === null || _input$closest === void 0 ? void 0 : _input$closest.querySelector('label');
+          if (!label) {
+            return input.dataset.setting || 'This field';
+          }
+          return (label.textContent || '').replace(/\s+/g, ' ').trim() || input.dataset.setting || 'This field';
+        },
+        getValidationFeedbackElement: function getValidationFeedbackElement(input) {
+          var feedback = input.nextElementSibling;
+          if (feedback && feedback.classList.contains('invalid-feedback')) {
+            return feedback;
+          }
+          feedback = document.createElement('div');
+          feedback.className = 'invalid-feedback';
+          input.insertAdjacentElement('afterend', feedback);
+          return feedback;
+        },
+        clearSettingValidationError: function clearSettingValidationError(input) {
+          input.classList.remove('is-invalid');
+          input.removeAttribute('aria-invalid');
+          var feedback = input.nextElementSibling;
+          if (feedback && feedback.classList.contains('invalid-feedback')) {
+            feedback.textContent = '';
+          }
+        },
+        setSettingValidationError: function setSettingValidationError(input, message) {
+          var feedback = this.getValidationFeedbackElement(input);
+          input.classList.add('is-invalid');
+          input.setAttribute('aria-invalid', 'true');
+          feedback.textContent = message;
+        },
+        getSettingValidationMessage: function getSettingValidationMessage(input) {
+          if (!input || input.disabled || input.type !== 'number') {
+            return null;
+          }
+          var value = (input.value || '').trim();
+          if (!value) {
+            return null;
+          }
+          var number = Number(value);
+          var fieldLabel = this.getFieldLabel(input);
+          if (Number.isNaN(number)) {
+            return "".concat(fieldLabel, " must be a valid number.");
+          }
+          var min = input.getAttribute('min');
+          if (min !== null && number < Number(min)) {
+            return "".concat(fieldLabel, " must be ").concat(min, " or greater.");
+          }
+          var max = input.getAttribute('max');
+          if (max !== null && number > Number(max)) {
+            return "".concat(fieldLabel, " must be ").concat(max, " or less.");
+          }
+          return null;
+        },
+        validateSettingInput: function validateSettingInput(input) {
+          var message = this.getSettingValidationMessage(input);
+          if (!message) {
+            this.clearSettingValidationError(input);
+            return true;
+          }
+          this.setSettingValidationError(input, message);
+          return false;
+        },
+        validateSettings: function validateSettings() {
+          var _this10 = this;
+          var isValid = true;
+          this.getSettingInputs().forEach(function (input) {
+            isValid = _this10.validateSettingInput(input) && isValid;
+          });
+          return isValid;
+        },
+        queueSettingsSave: function queueSettingsSave() {
+          if (!this.validateSettings()) {
+            this.clearPendingSettingsSave();
+            this.settingsDirty = false;
+            this.showSaveIndicator('Fix errors', 'text-danger');
+            return;
+          }
+          this.settingsDirty = true;
+          this.showSaveIndicator('Saving...', 'text-warning');
+          this.debouncedSaveSettings();
+        },
+        getSettingInputs: function getSettingInputs() {
+          var explicitInputs = document.querySelectorAll('.setting-input[data-setting]');
+          if (explicitInputs.length > 0) {
+            return explicitInputs;
+          }
+          return document.querySelectorAll('input[name^="ChatInteraction."]:not([name*=".Tools["]):not([name*=".Connections["]), ' + 'select[name^="ChatInteraction."]:not([name*=".Tools["]):not([name*=".Connections["]), ' + 'textarea[name^="ChatInteraction."]:not([name*=".Tools["]):not([name*=".Connections["])');
+        },
+        getSelectedGroupValues: function getSelectedGroupValues(groupName, fallbackSelector) {
+          var explicitSelections = document.querySelectorAll(".capability-checkbox[data-save-group=\"".concat(groupName, "\"]:checked"));
+          if (explicitSelections.length > 0) {
+            var _values = [];
+            explicitSelections.forEach(function (checkbox) {
+              var value = checkbox.getAttribute('data-item-id') || checkbox.value;
+              if (value) {
+                _values.push(value);
+              }
+            });
+            return _values;
+          }
+          if (!fallbackSelector) {
+            return [];
+          }
+          var values = [];
+          var checkboxes = document.querySelectorAll(fallbackSelector);
+          checkboxes.forEach(function (checkbox) {
+            var baseName = checkbox.name.replace('.IsSelected', '.ItemId');
+            var hiddenInput = document.querySelector("input[type=\"hidden\"][name=\"".concat(baseName, "\"]"));
+            if (hiddenInput && hiddenInput.value) {
+              values.push(hiddenInput.value);
+            }
+          });
+          return values;
+        },
+        getPromptTemplateSelections: function getPromptTemplateSelections() {
+          var promptTemplates = [];
+          document.querySelectorAll('.prompt-template-card').forEach(function (card) {
+            var templateIdInput = card.querySelector('.prompt-template-id-input');
+            var promptParametersInput = card.querySelector('.prompt-template-parameters-input');
+            var templateId = templateIdInput ? templateIdInput.value : card.getAttribute('data-template-id');
+            if (!templateId) {
+              return;
+            }
+            promptTemplates.push({
+              templateId: templateId,
+              promptParameters: promptParametersInput ? (promptParametersInput.value || '').trim() : ''
+            });
+          });
+          return promptTemplates;
+        },
+        receiveNotification: function receiveNotification(notification) {
+          if (!notification || !notification.type) {
+            return;
+          }
+          this.clearNotificationDismiss(notification.type);
+          // Replace existing notification with same type, or add new one.
+          var idx = this.notifications.findIndex(function (n) {
+            return n.type === notification.type;
+          });
+          if (idx >= 0) {
+            this.notifications.splice(idx, 1, notification);
+          } else {
+            this.notifications.push(notification);
+          }
+          this.scheduleNotificationDismiss(notification);
+          this.scrollToBottom();
+        },
+        updateNotification: function updateNotification(notification) {
+          if (!notification || !notification.type) {
+            return;
+          }
+          this.clearNotificationDismiss(notification.type);
+          var idx = this.notifications.findIndex(function (n) {
+            return n.type === notification.type;
+          });
+          if (idx >= 0) {
+            this.notifications.splice(idx, 1, notification);
+            this.scheduleNotificationDismiss(notification);
+            this.scrollToBottom();
+          }
+        },
+        scheduleNotificationDismiss: function scheduleNotificationDismiss(notification) {
+          var _this11 = this;
+          if (!notification || !notification.type || !notification.autoDismissMs || notification.autoDismissMs <= 0) {
+            return;
+          }
+          this.notificationDismissTimers[notification.type] = setTimeout(function () {
+            _this11.removeNotification(notification.type);
+          }, notification.autoDismissMs);
+        },
+        clearNotificationDismiss: function clearNotificationDismiss(notificationType) {
+          var timerId = this.notificationDismissTimers[notificationType];
+          if (!timerId) {
+            return;
+          }
+          clearTimeout(timerId);
+          delete this.notificationDismissTimers[notificationType];
+        },
+        removeNotification: function removeNotification(notificationType) {
+          this.clearNotificationDismiss(notificationType);
+          this.notifications = this.notifications.filter(function (n) {
+            return n.type !== notificationType;
+          });
+        },
+        dismissNotification: function dismissNotification(notificationType) {
+          this.removeNotification(notificationType);
+        },
+        handleNotificationAction: function handleNotificationAction(notificationType, actionName) {
+          if (!this.connection) {
+            return;
+          }
+          var itemId = this.getItemId();
+          this.connection.invoke('HandleNotificationAction', itemId, notificationType, actionName)["catch"](function (err) {
+            return console.error('Failed to handle notification action:', err);
+          });
+        },
+        setItemId: function setItemId(itemId) {
+          this.inputElement.setAttribute('data-interaction-id', itemId || '');
+          this.inputElement.setAttribute('data-item-id', itemId || '');
+        },
+        resetInteraction: function resetInteraction() {
+          this.setItemId('');
+          this.isInteractionStarted = false;
+          this.messages = [];
+          this.showPlaceholder();
+        },
+        initializeApp: function initializeApp() {
+          var _this12 = this;
+          this.inputElement = document.querySelector(config.inputElementSelector);
+          this.buttonElement = document.querySelector(config.sendButtonElementSelector);
+          this.chatContainer = document.querySelector(config.chatContainerElementSelector);
+          this.placeholder = document.querySelector(config.placeholderElementSelector);
+          var itemId = this.getItemId();
+          if (itemId) {
+            this.loadInteraction(itemId);
+          }
+
+          // Pause auto-scroll when the user manually scrolls up during streaming.
+          this.chatContainer.addEventListener('scroll', function () {
+            if (!_this12.stream) {
+              return;
+            }
+            var threshold = 30;
+            var atBottom = _this12.chatContainer.scrollHeight - _this12.chatContainer.clientHeight - _this12.chatContainer.scrollTop <= threshold;
+            _this12.autoScroll = atBottom;
+          });
+          this.inputElement.addEventListener('keyup', function (event) {
+            if (_this12.stream != null) {
+              return;
+            }
+            if (event.key === "Enter" && !event.shiftKey) {
+              _this12.buttonElement.click();
+            }
+          });
+          this.inputElement.addEventListener('input', function (e) {
+            _this12.handleUserInput(e);
+            if (e.target.value.trim()) {
+              _this12.buttonElement.removeAttribute('disabled');
+            } else {
+              _this12.buttonElement.setAttribute('disabled', true);
+            }
+          });
+          this.inputElement.addEventListener('paste', function (e) {
+            // Use setTimeout to allow the paste to complete before checking the value
+            setTimeout(function () {
+              _this12.prompt = _this12.inputElement.value;
+              if (_this12.inputElement.value.trim()) {
+                _this12.buttonElement.removeAttribute('disabled');
+              } else {
+                _this12.buttonElement.setAttribute('disabled', true);
+              }
+            }, 0);
+          });
+          this.buttonElement.addEventListener('click', function () {
+            if (_this12.stream != null) {
+              _this12.stream.dispose();
+              _this12.stream = null;
+              _this12.streamingFinished();
+              _this12.hideTypingIndicator();
+
+              // Clean up: remove empty assistant message or stop streaming animation.
+              if (_this12.messages.length > 0) {
+                var lastMsg = _this12.messages[_this12.messages.length - 1];
+                if (lastMsg.role === 'assistant' && !lastMsg.content) {
+                  _this12.messages.pop();
+                } else if (lastMsg.isStreaming) {
+                  lastMsg.isStreaming = false;
+                }
+              }
+              return;
+            }
+            _this12.sendMessage();
+          });
+          var chatInteractionItems = document.getElementsByClassName('chat-interaction-history-item');
+          for (var i = 0; i < chatInteractionItems.length; i++) {
+            chatInteractionItems[i].addEventListener('click', function (e) {
+              e.preventDefault();
+              var itemId = e.target.getAttribute('data-interaction-id');
+              if (!itemId) {
+                console.error('An element with the class chat-interaction-history-item with no data-interaction-id set.');
+                return;
+              }
+              _this12.loadInteraction(itemId);
+            });
+          }
+          for (var _i3 = 0; _i3 < config.messages.length; _i3++) {
+            this.addMessage(config.messages[_i3]);
+          }
+
+          // Delegate click for code block copy buttons.
+          if (this.chatContainer) {
+            this.chatContainer.addEventListener('click', function (e) {
+              var btn = e.target.closest('.ai-code-copy-btn');
+              if (!btn) {
+                return;
+              }
+              var block = btn.closest('.ai-code-block') || btn.closest('pre');
+              if (!block) {
+                return;
+              }
+              var codeEl = block.querySelector('code');
+              if (codeEl) {
+                navigator.clipboard.writeText(codeEl.textContent);
+                var copiedText = config.codeCopiedText || 'Copied!';
+                btn.innerHTML = '<i class="fa-solid fa-check"></i> ' + copiedText;
+                setTimeout(function () {
+                  btn.innerHTML = '<i class="fa-regular fa-copy"></i>';
+                }, 2000);
+              }
+            });
+          }
+          document.addEventListener('input', function (event) {
+            if (event.target.matches('.setting-input[data-setting]')) {
+              _this12.validateSettingInput(event.target);
+              _this12.queueSettingsSave();
+            }
+          });
+          document.addEventListener('change', function (event) {
+            if (event.target.matches('.setting-input[data-setting], .capability-checkbox[data-save-group], .group-toggle, .ci-agent-global-toggle')) {
+              if (event.target.matches('.setting-input[data-setting]')) {
+                _this12.validateSettingInput(event.target);
+              }
+              _this12.queueSettingsSave();
+              return;
+            }
+            if (event.target.closest('.prompt-template-parameters-input, .prompt-template-id-input')) {
+              _this12.queueSettingsSave();
+            }
+          });
+          document.addEventListener('click', function (event) {
+            if (!event.target.closest('.prompt-template-add-btn, .remove-prompt-template-btn')) {
+              return;
+            }
+            setTimeout(function () {
+              _this12.queueSettingsSave();
+            }, 0);
+          });
+
+          // Add event listener for clear history button
+          var clearHistoryBtn = document.getElementById('clearHistoryBtn');
+          if (clearHistoryBtn) {
+            clearHistoryBtn.addEventListener('click', function () {
+              var itemId = clearHistoryBtn.getAttribute('data-interaction-id');
+              if (itemId) {
+                _this12.clearHistory(itemId);
+              }
+            });
+          }
+
+          // Initialize speech-to-text microphone button.
+          if (this.speechToTextEnabled && config.micButtonElementSelector) {
+            this.micButton = document.querySelector(config.micButtonElementSelector);
+            if (this.micButton) {
+              this.micButton.style.display = '';
+              this.micButton.addEventListener('click', function () {
+                _this12.toggleRecording();
+              });
+            }
+          }
+
+          // Initialize conversation mode button.
+          if (this.conversationModeEnabled && config.conversationButtonElementSelector) {
+            this.conversationButton = document.querySelector(config.conversationButtonElementSelector);
+            if (this.conversationButton) {
+              this.conversationButton.addEventListener('click', function () {
+                _this12.toggleConversationMode();
+              });
+            }
+          }
+        },
+        loadInteraction: function loadInteraction(itemId) {
+          this.connection.invoke("LoadInteraction", itemId)["catch"](function (err) {
+            return console.error(err);
+          });
+        },
+        reloadCurrentInteraction: function reloadCurrentInteraction() {
+          var itemId = this.getItemId();
+          if (itemId) {
+            this.loadInteraction(itemId);
+          }
+        },
+        clearHistory: function clearHistory(itemId) {
+          var self = this;
+          confirmDialog({
+            title: config.clearHistoryTitle,
+            message: config.clearHistoryMessage,
+            okText: config.clearHistoryOkText,
+            cancelText: config.clearHistoryCancelText,
+            callback: function callback(confirmed) {
+              if (confirmed) {
+                // Cancel any active stream before clearing history.
+                if (self.stream) {
+                  self.stream.dispose();
+                  self.stream = null;
+                  self.hideTypingIndicator();
+                  self.streamingFinished();
+                }
+                self.connection.invoke("ClearHistory", itemId)["catch"](function (err) {
+                  return console.error('Error clearing history:', err);
+                });
+              }
+            }
+          });
+        },
+        debouncedSaveSettings: function debouncedSaveSettings() {
+          var _this13 = this;
+          // Clear any existing timeout to reset the debounce timer
+          this.clearPendingSettingsSave();
+
+          // Don't save while streaming — it will be saved when streaming completes.
+          if (this.stream) {
+            return;
+          }
+
+          // Set a new timeout to save after 850ms of no changes
+          this.saveSettingsTimeout = setTimeout(function () {
+            if (_this13.settingsDirty) {
+              _this13.saveSettings();
+              _this13.settingsDirty = false;
+            }
+            _this13.saveSettingsTimeout = null;
+          }, 850);
+        },
+        getSelectedToolNames: function getSelectedToolNames() {
+          return this.getSelectedGroupValues('toolNames', 'input[type="checkbox"][name$="].IsSelected"][name^="ChatInteraction.Tools["]:checked');
+        },
+        getSelectedMcpConnectionIds: function getSelectedMcpConnectionIds() {
+          return this.getSelectedGroupValues('mcpConnectionIds', 'input[type="checkbox"][name$="].IsSelected"][name^="ChatInteraction.Connections["]:checked');
+        },
+        getSelectedA2AConnectionIds: function getSelectedA2AConnectionIds() {
+          return this.getSelectedGroupValues('a2aConnectionIds');
+        },
+        getSelectedAgentNames: function getSelectedAgentNames() {
+          return this.getSelectedGroupValues('agentNames', 'input[type="checkbox"][name$="].IsSelected"][name^="ChatInteraction.Agents["]:checked');
+        },
+        saveSettings: function saveSettings() {
+          var _this14 = this;
+          var itemId = this.getItemId();
+          if (!itemId) {
+            return Promise.resolve();
+          }
+          if (!this.validateSettings()) {
+            this.showSaveIndicator('Fix errors', 'text-danger');
+            return Promise.resolve();
+          }
+          var settings = {};
+
+          // Collect all form inputs with the "ChatInteraction." prefix generically.
+          // This avoids coupling the JS to specific field names — new fields added by
+          // any module are automatically included.
+          var inputs = this.getSettingInputs();
+          inputs.forEach(function (input) {
+            var key = input.dataset.setting || (input.name || '').replace('ChatInteraction.', '').replace(/^[A-Z]/, function (match) {
+              return match.toLowerCase();
+            });
+            if (!key) {
+              return;
+            }
+            if (input.type === 'checkbox') {
+              settings[key] = input.checked;
+            } else if (input.type === 'number') {
+              settings[key] = input.value ? parseFloat(input.value) : null;
+            } else {
+              settings[key] = input.value || null;
+            }
+          });
+
+          // Add tool, MCP connection, and agent collections (special handling).
+          settings.toolNames = this.getSelectedToolNames();
+          settings.mcpConnectionIds = this.getSelectedMcpConnectionIds();
+          settings.a2aConnectionIds = this.getSelectedA2AConnectionIds();
+          settings.agentNames = this.getSelectedAgentNames();
+          var promptTemplates = this.getPromptTemplateSelections();
+          if (promptTemplates.length > 0) {
+            settings.promptTemplates = promptTemplates;
+            settings.promptTemplateIds = promptTemplates.map(function (template) {
+              return template.templateId;
+            });
+          }
+          return this.connection.invoke("SaveSettings", itemId, settings)["catch"](function (err) {
+            console.error('Error saving settings:', err);
+            _this14.showSaveIndicator('Save failed', 'text-danger');
+          });
+        },
+        flushPendingSave: function flushPendingSave() {
+          if (this.saveSettingsTimeout) {
+            clearTimeout(this.saveSettingsTimeout);
+            this.saveSettingsTimeout = null;
+          }
+          if (this.settingsDirty) {
+            this.settingsDirty = false;
+            return this.saveSettings();
+          }
+          return Promise.resolve();
+        },
+        initializeInteraction: function initializeInteraction(itemId, force) {
+          if (this.isInteractionStarted && !force) {
+            return;
+          }
+          this.fireEvent(new CustomEvent("initializingChatInteraction", {
+            detail: {
+              itemId: itemId
+            }
+          }));
+          this.setItemId(itemId);
+          this.isInteractionStarted = true;
+        },
+        copyResponse: function copyResponse(message) {
+          navigator.clipboard.writeText(message);
+        },
+        startRecording: function startRecording() {
+          var _this15 = this;
+          if (this.isRecording || !this.connection) {
+            return;
+          }
+          navigator.mediaDevices.getUserMedia({
+            audio: {
+              echoCancellation: true,
+              noiseSuppression: true,
+              autoGainControl: true
+            }
+          }).then(function (stream) {
+            var mimeType = MediaRecorder.isTypeSupported('audio/ogg;codecs=opus') ? 'audio/ogg;codecs=opus' : MediaRecorder.isTypeSupported('audio/webm;codecs=opus') ? 'audio/webm;codecs=opus' : 'audio/webm';
+            _this15.mediaRecorder = new MediaRecorder(stream, {
+              mimeType: mimeType,
+              audioBitsPerSecond: 128000
+            });
+            _this15.preRecordingPrompt = _this15.prompt;
+            _this15._audioInputSent = false;
+            var subject = new signalR.Subject();
+            var itemId = _this15.getItemId();
+            var pendingChunk = Promise.resolve();
+            _this15.mediaRecorder.addEventListener('dataavailable', function (e) {
+              if (e.data && e.data.size > 0) {
+                pendingChunk = pendingChunk.then(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+                  var data, uint8Array, binaryString, base64;
+                  return _regenerator().w(function (_context4) {
+                    while (1) switch (_context4.n) {
+                      case 0:
+                        _context4.n = 1;
+                        return e.data.arrayBuffer();
+                      case 1:
+                        data = _context4.v;
+                        uint8Array = new Uint8Array(data);
+                        binaryString = uint8Array.reduce(function (str, _byte2) {
+                          return str + String.fromCharCode(_byte2);
+                        }, '');
+                        base64 = btoa(binaryString);
+                        subject.next(base64);
+                      case 2:
+                        return _context4.a(2);
+                    }
+                  }, _callee4);
+                })));
+              }
+            });
+            _this15.mediaRecorder.addEventListener('stop', function () {
+              stream.getTracks().forEach(function (track) {
+                return track.stop();
+              });
+              pendingChunk.then(function () {
+                return subject.complete();
+              });
+            });
+            var language = navigator.language || document.documentElement.lang || 'en-US';
+            _this15.connection.send("SendAudioStream", itemId, subject, mimeType, language);
+            _this15.mediaRecorder.start(250);
+            _this15.isRecording = true;
+            _this15.updateMicButton();
+          })["catch"](function (err) {
+            console.error('Microphone access denied:', err);
+          });
+        },
+        stopRecording: function stopRecording() {
+          if (!this.isRecording || !this.mediaRecorder) {
+            return;
+          }
+          this.mediaRecorder.stop();
+          this.isRecording = false;
+          this.updateMicButton();
+        },
+        toggleRecording: function toggleRecording() {
+          if (this.isRecording) {
+            this.stopRecording();
+          } else {
+            this.startRecording();
+          }
+        },
+        updateMicButton: function updateMicButton() {
+          if (!this.micButton) {
+            return;
+          }
+          if (this.isRecording) {
+            this.micButton.classList.add('stt-recording');
+            this.micButton.innerHTML = '<i class="fa-solid fa-stop"></i>';
+          } else {
+            this.micButton.classList.remove('stt-recording');
+            this.micButton.innerHTML = '<i class="fa-solid fa-microphone"></i>';
+          }
+        }
+      },
+      watch: {
+        isPlayingAudio: function isPlayingAudio() {
+          // Reserved for future use — volume-based interrupt detection
+          // no longer mutes tracks; browser echo cancellation handles echo.
+        },
+        isConversationMode: function isConversationMode(active) {
+          if (this.micButton) {
+            this.micButton.style.display = active ? 'none' : this.speechToTextEnabled ? '' : 'none';
+          }
+          if (this.buttonElement) {
+            this.buttonElement.style.display = active ? 'none' : '';
+          }
+          if (this.inputElement) {
+            this.inputElement.disabled = active;
+            if (active) {
+              this.inputElement.placeholder = '';
+            }
+          }
+        }
+      },
+      mounted: function mounted() {
+        var _this16 = this;
+        _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+          return _regenerator().w(function (_context5) {
+            while (1) switch (_context5.n) {
+              case 0:
+                _context5.n = 1;
+                return _this16.startConnection();
+              case 1:
+                _this16.initializeApp();
+              case 2:
+                return _context5.a(2);
+            }
+          }, _callee5);
+        }))();
+        window.addEventListener('beforeunload', this.handleBeforeUnload);
+      },
+      beforeUnmount: function beforeUnmount() {
+        window.removeEventListener('beforeunload', this.handleBeforeUnload);
+        if (this.stream) {
+          this.stream.dispose();
+          this.stream = null;
+        }
+        if (this.connection) {
+          this.connection.stop();
+        }
+      },
+      template: config.messageTemplate
+    }).mount(config.appElementSelector);
+    return app;
+  };
+  return {
+    initialize: initialize
+  };
+}();
+
+// Download chart as image via event delegation (DOMPurify strips inline onclick).
+document.addEventListener('click', function (e) {
+  var btn = e.target.closest('.download-chart-btn');
+  if (!btn) {
+    return;
+  }
+  var chartId = btn.getAttribute('data-chart-id');
+  var canvas = chartId ? document.getElementById(chartId) : null;
+  if (!canvas) {
+    console.error('Chart canvas not found:', chartId);
+    return;
+  }
+  var link = document.createElement('a');
+  link.download = 'chart-' + chartId + '.png';
+  link.href = canvas.toDataURL('image/png');
+  link.click();
+});
+
+// Intercept download clicks for data-URI images and convert to blob downloads.
+document.addEventListener('click', function (e) {
+  var link = e.target.closest('.ai-download-image');
+  if (!link) {
+    return;
+  }
+  var container = link.closest('.generated-image-container');
+  var img = container === null || container === void 0 ? void 0 : container.querySelector('img');
+  if (!img) {
+    return;
+  }
+  var src = img.src;
+  if (!src || !src.startsWith('data:')) {
+    return; // Normal URL – let the default <a> behaviour handle it.
+  }
+  e.preventDefault();
+  fetch(src).then(function (res) {
+    return res.blob();
+  }).then(function (blob) {
+    var url = URL.createObjectURL(blob);
+    var a = document.createElement('a');
+    a.href = url;
+    a.download = link.getAttribute('download') || 'generated-image.png';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    setTimeout(function () {
+      URL.revokeObjectURL(url);
+    }, 100);
+  })["catch"](function (err) {
+    console.error('Failed to download image:', err);
+  });
+});