@crestapps/ai-chat-ui 1.0.0-rc.7 → 1.0.0

package/dist/chat-interaction.js

@@ -32,8 +32,11 @@ window.chatInteractionManager = function () {
     downloadChartTitle: 'Download chart as image',
     downloadChartButtonText: 'Download',
     codeCopiedText: 'Copied!',
+    copyTitle: 'Click here to copy response to clipboard.',
+    copiedTitle: 'Response copied to clipboard.',
+    copyResetDelayMs: 2000,
     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=\"ai-chat-message-body lh-base\">\n                            <h4 v-if=\"message.title\">{{ message.title }}</h4>\n                            <div v-html=\"message.htmlContent\"></div>\n                            <ol v-if=\"message.citationReferences && message.citationReferences.length\" class=\"ai-chat-citation-list\">\n                                <li v-for=\"citation in message.citationReferences\" :key=\"'citation-' + (citation.referenceKey || citation.displayIndex)\" class=\"ai-chat-citation-item\">\n                                    <a v-if=\"citation.link\" :href=\"citation.link\" :target=\"citation.isDownload ? null : '_blank'\" :rel=\"citation.isDownload ? null : 'noopener noreferrer'\">{{ citation.label }}</a>\n                                    <span v-else>{{ citation.label }}</span>\n                                </li>\n                            </ol>\n                            <span class=\"message-buttons-container\" v-if=\"!isIndicator(message)\">\n                                <button v-if=\"textToSpeechEnabled && !isConversationMode && message.role === 'assistant' && !message.isStreaming\" class=\"btn btn-sm btn-link text-secondary p-0 me-1 button-message-toolbox\" :class=\"{ 'tts-playing': ttsPlayingMessageIndex === index }\" :data-tts-message-index=\"index\" @click=\"toggleMessageTts(message, index)\" :title=\"ttsPlayingMessageIndex === index ? 'Pause audio' : 'Read aloud'\">\n                                    <i :class=\"ttsPlayingMessageIndex === index ? 'fa-solid fa-circle-pause' : 'fa-solid fa-circle-play'\"></i>\n                                </button>\n                                <button class=\"btn btn-sm btn-link text-secondary p-0 button-message-toolbox\" @click=\"copyResponse(message)\" 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        ",
+    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=\"ai-chat-message-body lh-base\">\n                            <h4 v-if=\"message.title\">{{ message.title }}</h4>\n                            <div v-html=\"message.htmlContent\"></div>\n                            <ol v-if=\"message.citationReferences && message.citationReferences.length\" class=\"ai-chat-citation-list\">\n                                <li v-for=\"citation in message.citationReferences\" :key=\"'citation-' + (citation.referenceKey || citation.displayIndex)\" class=\"ai-chat-citation-item\">\n                                    <a v-if=\"citation.link\" :href=\"citation.link\" :target=\"citation.isDownload ? null : '_blank'\" :rel=\"citation.isDownload ? null : 'noopener noreferrer'\">{{ citation.label }}</a>\n                                    <span v-else>{{ citation.label }}</span>\n                                </li>\n                            </ol>\n                            <span class=\"message-buttons-container\" v-if=\"!isIndicator(message)\">\n                                <button v-if=\"textToSpeechEnabled && !isConversationMode && message.role === 'assistant' && !message.isStreaming\" class=\"btn btn-sm btn-link text-secondary p-0 me-1 button-message-toolbox\" :class=\"{ 'tts-playing': ttsPlayingMessageIndex === index }\" :data-tts-message-index=\"index\" @click=\"toggleMessageTts(message, index)\" :title=\"ttsPlayingMessageIndex === index ? 'Pause audio' : 'Read aloud'\">\n                                    <i :class=\"ttsPlayingMessageIndex === index ? 'fa-solid fa-circle-pause' : 'fa-solid fa-circle-play'\"></i>\n                                </button>\n                                <button type=\"button\" class=\"btn btn-sm btn-link p-0 button-message-toolbox ai-response-copy-btn\" :class=\"copiedMessageIndex === index ? 'text-success' : 'text-secondary'\" :data-copy-message-index=\"index\" @click=\"copyResponse(message, index, $event)\" :title=\"copiedMessageIndex === index ? copiedTitle : copyTitle\">\n                                    <i :class=\"copiedMessageIndex === index ? 'fa-solid fa-check' : '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',
@@ -96,7 +99,7 @@ window.chatInteractionManager = function () {
     return observer;
   }
   function normalizeReference(reference) {
-    var _ref, _normalized$index, _ref2, _normalized$text, _ref3, _normalized$title, _ref4, _normalized$link, _ref5, _normalized$reference;
+    var _ref, _normalized$index, _ref2, _normalized$text, _ref3, _normalized$title, _ref4, _normalized$link, _ref5, _normalized$reference, _normalized$isGenerat;
     if (!reference || _typeof(reference) !== 'object') {
       return null;
     }
@@ -106,6 +109,7 @@ window.chatInteractionManager = function () {
     normalized.title = (_ref3 = (_normalized$title = normalized.title) !== null && _normalized$title !== void 0 ? _normalized$title : normalized.Title) !== null && _ref3 !== void 0 ? _ref3 : null;
     normalized.link = sanitizeUrl((_ref4 = (_normalized$link = normalized.link) !== null && _normalized$link !== void 0 ? _normalized$link : normalized.Link) !== null && _ref4 !== void 0 ? _ref4 : null);
     normalized.referenceType = (_ref5 = (_normalized$reference = normalized.referenceType) !== null && _normalized$reference !== void 0 ? _normalized$reference : normalized.ReferenceType) !== null && _ref5 !== void 0 ? _ref5 : null;
+    normalized.isGenerated = ((_normalized$isGenerat = normalized.isGenerated) !== null && _normalized$isGenerat !== void 0 ? _normalized$isGenerat : normalized.IsGenerated) === true;
     return normalized;
   }
   function isDownloadCitationReference(reference) {
@@ -140,28 +144,42 @@ window.chatInteractionManager = function () {
   function buildCitationDisplay(content, references) {
     var processedContent = (content || '').trim();
     var messageReferences = normalizeReferences(references);
-    if (!processedContent || !Object.keys(messageReferences).length) {
+    var referenceEntries = Object.entries(messageReferences);
+    if (!referenceEntries.length) {
       return {
         content: processedContent,
         citations: []
       };
     }
-    var citedRefs = Object.entries(messageReferences).filter(function (_ref6) {
+    var citedRefs = referenceEntries.filter(function (_ref6) {
       var _ref7 = _slicedToArray(_ref6, 1),
         key = _ref7[0];
       return processedContent.includes(key);
     });
-    if (!citedRefs.length) {
+    var generatedRefs = referenceEntries.filter(function (_ref8) {
+      var _ref9 = _slicedToArray(_ref8, 2),
+        key = _ref9[0],
+        value = _ref9[1];
+      return value.isGenerated && !processedContent.includes(key);
+    });
+    if (!citedRefs.length && !generatedRefs.length) {
       return {
         content: processedContent,
         citations: []
       };
     }
-    citedRefs.sort(function (_ref8, _ref9) {
-      var _ref0 = _slicedToArray(_ref8, 2),
-        a = _ref0[1];
-      var _ref1 = _slicedToArray(_ref9, 2),
-        b = _ref1[1];
+    citedRefs.sort(function (_ref0, _ref1) {
+      var _ref10 = _slicedToArray(_ref0, 2),
+        a = _ref10[1];
+      var _ref11 = _slicedToArray(_ref1, 2),
+        b = _ref11[1];
+      return a.index - b.index;
+    });
+    generatedRefs.sort(function (_ref12, _ref13) {
+      var _ref14 = _slicedToArray(_ref12, 2),
+        a = _ref14[1];
+      var _ref15 = _slicedToArray(_ref13, 2),
+        b = _ref15[1];
       return a.index - b.index;
     });
     var citations = [];
@@ -195,11 +213,36 @@ window.chatInteractionManager = function () {
       processedContent = processedContent.replaceAll(citation.placeholder, "<sup>".concat(citation.displayIndex, "</sup>"));
     }
     processedContent = processedContent.replaceAll('</sup><sup>', '</sup><sup>,</sup><sup>');
+
+    // Generated files (such as exported tabular data) are always offered as a download even when
+    // the model does not cite them inline, so the user never loses access to the produced file.
+    var _iterator2 = _createForOfIteratorHelper(generatedRefs),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var _step2$value = _slicedToArray(_step2.value, 2),
+          _key = _step2$value[0],
+          _value = _step2$value[1];
+        citations.push({
+          referenceKey: _key,
+          displayIndex: displayIndex,
+          label: getCitationLabel(_value, _key),
+          link: _value.link || null,
+          isDownload: true,
+          placeholder: null
+        });
+        displayIndex++;
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
     return {
       content: processedContent,
-      citations: citations.map(function (_ref10) {
-        var placeholder = _ref10.placeholder,
-          citation = _objectWithoutProperties(_ref10, _excluded);
+      citations: citations.map(function (_ref16) {
+        var placeholder = _ref16.placeholder,
+          citation = _objectWithoutProperties(_ref16, _excluded);
         return citation;
       })
     };
@@ -209,24 +252,24 @@ window.chatInteractionManager = function () {
     if (!copyContent || !Array.isArray(citations) || citations.length === 0) {
       return copyContent;
     }
-    var _iterator2 = _createForOfIteratorHelper(citations),
-      _step2;
+    var _iterator3 = _createForOfIteratorHelper(citations),
+      _step3;
     try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var citation = _step2.value;
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var citation = _step3.value;
         copyContent = copyContent.replaceAll(citation.referenceKey, "[".concat(citation.displayIndex, "]"));
       }
     } catch (err) {
-      _iterator2.e(err);
+      _iterator3.e(err);
     } finally {
-      _iterator2.f();
+      _iterator3.f();
     }
     copyContent += '\n\nReferences:\n';
-    var _iterator3 = _createForOfIteratorHelper(citations),
-      _step3;
+    var _iterator4 = _createForOfIteratorHelper(citations),
+      _step4;
     try {
-      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-        var _citation = _step3.value;
+      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+        var _citation = _step4.value;
         copyContent += "".concat(_citation.displayIndex, ". ").concat(_citation.label);
         if (_citation.link) {
           copyContent += " - ".concat(_citation.link);
@@ -234,9 +277,9 @@ window.chatInteractionManager = function () {
         copyContent += '\n';
       }
     } catch (err) {
-      _iterator3.e(err);
+      _iterator4.e(err);
     } finally {
-      _iterator3.f();
+      _iterator4.f();
     }
     return copyContent.trimEnd();
   }
@@ -416,11 +459,11 @@ window.chatInteractionManager = function () {
     // Defer to requestAnimationFrame so the browser has fully laid out the
     // canvas elements before Chart.js reads their dimensions.
     requestAnimationFrame(function () {
-      var _iterator4 = _createForOfIteratorHelper(charts),
-        _step4;
+      var _iterator5 = _createForOfIteratorHelper(charts),
+        _step5;
       try {
-        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-          var c = _step4.value;
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+          var c = _step5.value;
           var canvas = document.getElementById(c.chartId);
           if (!canvas) {
             continue;
@@ -453,9 +496,9 @@ window.chatInteractionManager = function () {
           }
         }
       } catch (err) {
-        _iterator4.e(err);
+        _iterator5.e(err);
       } finally {
-        _iterator4.f();
+        _iterator5.f();
       }
     });
   }
@@ -474,8 +517,18 @@ window.chatInteractionManager = function () {
       ADD_ATTR: ['target']
     });
   }
+  function compactObject(source) {
+    if (!source || _typeof(source) !== 'object') {
+      return {};
+    }
+    return Object.fromEntries(Object.entries(source).filter(function (_ref17) {
+      var _ref18 = _slicedToArray(_ref17, 2),
+        value = _ref18[1];
+      return value !== undefined;
+    }));
+  }
   var initialize = function initialize(instanceConfig) {
-    var config = Object.assign({}, defaultConfig, instanceConfig);
+    var config = Object.assign({}, defaultConfig, compactObject(instanceConfig));
     // Keep defaultConfig in sync so renderers use overridden values
     defaultConfig = config;
     if (!config.signalRHubUrl) {
@@ -536,7 +589,12 @@ window.chatInteractionManager = function () {
           conversationButton: null,
           isConversationMode: false,
           notifications: [],
-          notificationDismissTimers: {}
+          notificationDismissTimers: {},
+          copyTitle: config.copyTitle,
+          copiedTitle: config.copiedTitle,
+          copiedMessageIndex: -1,
+          copyResetTimeoutId: null,
+          activeCopyButton: null
         };
       },
       computed: {
@@ -1035,9 +1093,9 @@ window.chatInteractionManager = function () {
           var _this6 = this;
           references = normalizeReferences(references);
           if (Object.keys(references).length) {
-            var _ref11, _message$rawContent2;
+            var _ref19, _message$rawContent2;
             var message = this.messages[messageIndex];
-            message.rawContent = (_ref11 = (_message$rawContent2 = message.rawContent) !== null && _message$rawContent2 !== void 0 ? _message$rawContent2 : message.content) !== null && _ref11 !== void 0 ? _ref11 : '';
+            message.rawContent = (_ref19 = (_message$rawContent2 = message.rawContent) !== null && _message$rawContent2 !== void 0 ? _message$rawContent2 : message.content) !== null && _ref19 !== void 0 ? _ref19 : '';
             updateMessagePresentation(message, references);
             this.messages[messageIndex] = message;
             this.$nextTick(function () {
@@ -1107,8 +1165,38 @@ window.chatInteractionManager = function () {
             }));
           });
         },
-        synthesizeSpeech: function synthesizeSpeech(text, cacheIndex) {
+        updateCopyButtons: function updateCopyButtons() {
           var _this8 = this;
+          if (!this.chatContainer) {
+            return;
+          }
+          var buttons = this.chatContainer.querySelectorAll('[data-copy-message-index]');
+          buttons.forEach(function (button) {
+            var buttonIndex = Number(button.getAttribute('data-copy-message-index'));
+            var isCopied = buttonIndex === _this8.copiedMessageIndex;
+            var iconHtml = isCopied ? '<i class="fa-solid fa-check"></i>' : '<i class="fa-solid fa-copy"></i>';
+            button.classList.toggle('text-success', isCopied);
+            button.classList.toggle('text-secondary', !isCopied);
+            button.setAttribute('title', isCopied ? _this8.copiedTitle : _this8.copyTitle);
+            button.replaceChildren(DOMPurify.sanitize(iconHtml, {
+              RETURN_DOM_FRAGMENT: true
+            }));
+          });
+        },
+        setCopyButtonState: function setCopyButtonState(button, isCopied) {
+          if (!button) {
+            return;
+          }
+          var iconHtml = isCopied ? '<i class="fa-solid fa-check"></i>' : '<i class="fa-solid fa-copy"></i>';
+          button.classList.toggle('text-success', isCopied);
+          button.classList.toggle('text-secondary', !isCopied);
+          button.setAttribute('title', isCopied ? this.copiedTitle : this.copyTitle);
+          button.replaceChildren(DOMPurify.sanitize(iconHtml, {
+            RETURN_DOM_FRAGMENT: true
+          }));
+        },
+        synthesizeSpeech: function synthesizeSpeech(text, cacheIndex) {
+          var _this9 = this;
           if (!this.textToSpeechEnabled || !text || !this.connection) {
             return;
           }
@@ -1117,16 +1205,16 @@ window.chatInteractionManager = function () {
           this._ttsCacheIndex = cacheIndex !== undefined ? cacheIndex : -1;
           this.connection.invoke("SynthesizeSpeech", this.getItemId(), text, this.ttsVoiceName)["catch"](function (err) {
             console.error("TTS synthesis error:", err);
-            _this8.isPlayingAudio = false;
-            _this8.ttsPlayingMessageIndex = -1;
-            _this8._ttsCacheIndex = -1;
-            _this8.$nextTick(function () {
-              return _this8.updateTtsPlaybackButtons();
+            _this9.isPlayingAudio = false;
+            _this9.ttsPlayingMessageIndex = -1;
+            _this9._ttsCacheIndex = -1;
+            _this9.$nextTick(function () {
+              return _this9.updateTtsPlaybackButtons();
             });
           });
         },
         toggleMessageTts: function toggleMessageTts(message, index) {
-          var _this9 = this;
+          var _this0 = this;
           if (this.ttsPlayingMessageIndex === index) {
             this.stopAudio();
             return;
@@ -1139,7 +1227,7 @@ window.chatInteractionManager = function () {
           }));
           this.ttsPlayingMessageIndex = index;
           this.$nextTick(function () {
-            return _this9.updateTtsPlaybackButtons();
+            return _this0.updateTtsPlaybackButtons();
           });
           if (this.ttsAudioCache[index]) {
             this.playAudioBlob(this.ttsAudioCache[index]);
@@ -1148,13 +1236,13 @@ window.chatInteractionManager = function () {
           this.synthesizeSpeech(message.content, index);
         },
         playCollectedAudio: function playCollectedAudio() {
-          var _this0 = this;
+          var _this1 = this;
           if (this.audioChunks.length === 0) {
             if (!this.isPlayingAudio && this.audioPlayQueue.length === 0) {
               this.isPlayingAudio = false;
               this.ttsPlayingMessageIndex = -1;
               this.$nextTick(function () {
-                return _this0.updateTtsPlaybackButtons();
+                return _this1.updateTtsPlaybackButtons();
               });
             }
             return;
@@ -1164,18 +1252,18 @@ window.chatInteractionManager = function () {
           }, 0);
           var combined = new Uint8Array(totalLength);
           var offset = 0;
-          var _iterator5 = _createForOfIteratorHelper(this.audioChunks),
-            _step5;
+          var _iterator6 = _createForOfIteratorHelper(this.audioChunks),
+            _step6;
           try {
-            for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-              var chunk = _step5.value;
+            for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+              var chunk = _step6.value;
               combined.set(chunk, offset);
               offset += chunk.length;
             }
           } catch (err) {
-            _iterator5.e(err);
+            _iterator6.e(err);
           } finally {
-            _iterator5.f();
+            _iterator6.f();
           }
           this.audioChunks = [];
           var blob = new Blob([combined], {
@@ -1194,39 +1282,39 @@ window.chatInteractionManager = function () {
           this.playAudioBlob(blob);
         },
         playAudioBlob: function playAudioBlob(blob) {
-          var _this1 = this;
+          var _this10 = this;
           var url = URL.createObjectURL(blob);
           var audio = new Audio(url);
           this.currentAudioUrl = url;
           this.currentAudioElement = audio;
           this.isPlayingAudio = true;
           audio.addEventListener('ended', function () {
-            _this1.currentAudioElement = null;
-            _this1.currentAudioUrl = null;
+            _this10.currentAudioElement = null;
+            _this10.currentAudioUrl = null;
             URL.revokeObjectURL(url);
-            _this1.playNextInQueue();
+            _this10.playNextInQueue();
           });
           audio.addEventListener('error', function () {
-            _this1.currentAudioElement = null;
-            _this1.currentAudioUrl = null;
+            _this10.currentAudioElement = null;
+            _this10.currentAudioUrl = null;
             URL.revokeObjectURL(url);
-            _this1.playNextInQueue();
+            _this10.playNextInQueue();
           });
           audio.play()["catch"](function (err) {
             console.error("Audio playback error:", err);
-            _this1.currentAudioElement = null;
-            _this1.currentAudioUrl = null;
+            _this10.currentAudioElement = null;
+            _this10.currentAudioUrl = null;
             URL.revokeObjectURL(url);
-            _this1.audioPlayQueue = [];
-            _this1.isPlayingAudio = false;
-            _this1.ttsPlayingMessageIndex = -1;
-            _this1.$nextTick(function () {
-              return _this1.updateTtsPlaybackButtons();
+            _this10.audioPlayQueue = [];
+            _this10.isPlayingAudio = false;
+            _this10.ttsPlayingMessageIndex = -1;
+            _this10.$nextTick(function () {
+              return _this10.updateTtsPlaybackButtons();
             });
           });
         },
         playNextInQueue: function playNextInQueue() {
-          var _this10 = this;
+          var _this11 = this;
           if (this.audioPlayQueue.length > 0) {
             var nextBlob = this.audioPlayQueue.shift();
             this.playAudioBlob(nextBlob);
@@ -1234,13 +1322,13 @@ window.chatInteractionManager = function () {
             this.isPlayingAudio = false;
             this.ttsPlayingMessageIndex = -1;
             this.$nextTick(function () {
-              return _this10.updateTtsPlaybackButtons();
+              return _this11.updateTtsPlaybackButtons();
             });
             this.conversationModeOnAudioEnded();
           }
         },
         stopAudio: function stopAudio() {
-          var _this11 = this;
+          var _this12 = this;
           if (this.currentAudioElement) {
             this.currentAudioElement.pause();
             this.currentAudioElement.currentTime = 0;
@@ -1255,7 +1343,7 @@ window.chatInteractionManager = function () {
           this.isPlayingAudio = false;
           this.ttsPlayingMessageIndex = -1;
           this.$nextTick(function () {
-            return _this11.updateTtsPlaybackButtons();
+            return _this12.updateTtsPlaybackButtons();
           });
         },
         toggleConversationMode: function toggleConversationMode() {
@@ -1266,7 +1354,7 @@ window.chatInteractionManager = function () {
           }
         },
         startConversationMode: function startConversationMode() {
-          var _this12 = this;
+          var _this13 = this;
           if (!this.conversationModeEnabled || this.isConversationMode || !this.connection) {
             return;
           }
@@ -1286,30 +1374,30 @@ window.chatInteractionManager = function () {
             }
           }).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';
-            _this12.mediaRecorder = new MediaRecorder(stream, {
+            _this13.mediaRecorder = new MediaRecorder(stream, {
               mimeType: mimeType,
               audioBitsPerSecond: 128000
             });
-            _this12._conversationSubject = new signalR.Subject();
-            _this12._conversationStream = stream;
+            _this13._conversationSubject = new signalR.Subject();
+            _this13._conversationStream = stream;
 
             // Create an AnalyserNode for volume-based interrupt detection.
             var AudioCtx = window.AudioContext || window.webkitAudioContext;
             if (AudioCtx) {
-              _this12._conversationAudioCtx = new AudioCtx();
-              _this12._conversationAnalyser = _this12._conversationAudioCtx.createAnalyser();
-              _this12._conversationAnalyser.fftSize = 256;
-              var micSource = _this12._conversationAudioCtx.createMediaStreamSource(stream);
-              micSource.connect(_this12._conversationAnalyser);
+              _this13._conversationAudioCtx = new AudioCtx();
+              _this13._conversationAnalyser = _this13._conversationAudioCtx.createAnalyser();
+              _this13._conversationAnalyser.fftSize = 256;
+              var micSource = _this13._conversationAudioCtx.createMediaStreamSource(stream);
+              micSource.connect(_this13._conversationAnalyser);
             }
             var pendingChunk = Promise.resolve();
-            var analyser = _this12._conversationAnalyser;
+            var analyser = _this13._conversationAnalyser;
             var interruptVolumeThreshold = 30;
-            _this12.mediaRecorder.addEventListener('dataavailable', function (e) {
+            _this13.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 (_this12.isPlayingAudio && analyser) {
+                if (_this13.isPlayingAudio && analyser) {
                   var freqData = new Uint8Array(analyser.frequencyBinCount);
                   analyser.getByteFrequencyData(freqData);
                   var sum = 0;
@@ -1319,7 +1407,7 @@ window.chatInteractionManager = function () {
                   var avg = sum / freqData.length;
                   if (avg >= interruptVolumeThreshold) {
                     // User is speaking — interrupt TTS playback.
-                    _this12.stopAudio();
+                    _this13.stopAudio();
                   }
                 }
 
@@ -1341,7 +1429,7 @@ window.chatInteractionManager = function () {
                         }, '');
                         base64 = btoa(binaryString);
                         try {
-                          _this12._conversationSubject.next(base64);
+                          _this13._conversationSubject.next(base64);
                         } catch (err) {
                           // Subject may have been completed already.
                         }
@@ -1352,27 +1440,27 @@ window.chatInteractionManager = function () {
                 })));
               }
             });
-            _this12.mediaRecorder.addEventListener('stop', function () {
+            _this13.mediaRecorder.addEventListener('stop', function () {
               stream.getTracks().forEach(function (track) {
                 return track.stop();
               });
               pendingChunk.then(function () {
                 try {
-                  _this12._conversationSubject.complete();
+                  _this13._conversationSubject.complete();
                 } catch (err) {
                   // Already completed.
                 }
               });
             });
-            var itemId = _this12.getItemId();
+            var itemId = _this13.getItemId();
             var language = navigator.language || document.documentElement.lang || 'en-US';
-            _this12.connection.send("StartConversation", itemId, _this12._conversationSubject, mimeType, language);
-            _this12.mediaRecorder.start(250);
-            _this12.isRecording = true;
+            _this13.connection.send("StartConversation", itemId, _this13._conversationSubject, mimeType, language);
+            _this13.mediaRecorder.start(250);
+            _this13.isRecording = true;
           })["catch"](function (err) {
             console.error('Microphone access denied:', err);
-            _this12.isConversationMode = false;
-            _this12.updateConversationButton();
+            _this13.isConversationMode = false;
+            _this13.updateConversationButton();
           });
         },
         stopConversationMode: function stopConversationMode() {
@@ -1476,12 +1564,12 @@ window.chatInteractionManager = function () {
           return removedCount;
         },
         scrollToBottom: function scrollToBottom() {
-          var _this13 = this;
+          var _this14 = this;
           if (!this.autoScroll) {
             return;
           }
           setTimeout(function () {
-            _this13.chatContainer.scrollTop = _this13.chatContainer.scrollHeight - _this13.chatContainer.clientHeight;
+            _this14.chatContainer.scrollTop = _this14.chatContainer.scrollHeight - _this14.chatContainer.clientHeight;
           }, 50);
         },
         handleUserInput: function handleUserInput(event) {
@@ -1497,7 +1585,7 @@ window.chatInteractionManager = function () {
           return document.querySelector('[data-chat-interaction-save-indicator]');
         },
         showSaveIndicator: function showSaveIndicator(text, className) {
-          var _this14 = this;
+          var _this15 = this;
           var indicator = this.getSaveIndicatorElement();
           if (!indicator) {
             return;
@@ -1513,7 +1601,7 @@ window.chatInteractionManager = function () {
           }
           this.saveIndicatorTimeout = setTimeout(function () {
             indicator.textContent = '';
-            _this14.saveIndicatorTimeout = null;
+            _this15.saveIndicatorTimeout = null;
           }, 3000);
         },
         clearPendingSettingsSave: function clearPendingSettingsSave() {
@@ -1587,10 +1675,10 @@ window.chatInteractionManager = function () {
           return false;
         },
         validateSettings: function validateSettings() {
-          var _this15 = this;
+          var _this16 = this;
           var isValid = true;
           this.getSettingInputs().forEach(function (input) {
-            isValid = _this15.validateSettingInput(input) && isValid;
+            isValid = _this16.validateSettingInput(input) && isValid;
           });
           return isValid;
         },
@@ -1686,12 +1774,12 @@ window.chatInteractionManager = function () {
           }
         },
         scheduleNotificationDismiss: function scheduleNotificationDismiss(notification) {
-          var _this16 = this;
+          var _this17 = this;
           if (!notification || !notification.type || !notification.autoDismissMs || notification.autoDismissMs <= 0) {
             return;
           }
           this.notificationDismissTimers[notification.type] = setTimeout(function () {
-            _this16.removeNotification(notification.type);
+            _this17.removeNotification(notification.type);
           }, notification.autoDismissMs);
         },
         clearNotificationDismiss: function clearNotificationDismiss(notificationType) {
@@ -1731,7 +1819,7 @@ window.chatInteractionManager = function () {
           this.showPlaceholder();
         },
         initializeApp: function initializeApp() {
-          var _this17 = this;
+          var _this18 = this;
           this.inputElement = document.querySelector(config.inputElementSelector);
           this.buttonElement = document.querySelector(config.sendButtonElementSelector);
           this.chatContainer = document.querySelector(config.chatContainerElementSelector);
@@ -1743,59 +1831,59 @@ window.chatInteractionManager = function () {
 
           // Pause auto-scroll when the user manually scrolls up during streaming.
           this.chatContainer.addEventListener('scroll', function () {
-            if (!_this17.stream) {
+            if (!_this18.stream) {
               return;
             }
             var threshold = 30;
-            var atBottom = _this17.chatContainer.scrollHeight - _this17.chatContainer.clientHeight - _this17.chatContainer.scrollTop <= threshold;
-            _this17.autoScroll = atBottom;
+            var atBottom = _this18.chatContainer.scrollHeight - _this18.chatContainer.clientHeight - _this18.chatContainer.scrollTop <= threshold;
+            _this18.autoScroll = atBottom;
           });
           this.inputElement.addEventListener('keyup', function (event) {
-            if (_this17.stream != null) {
+            if (_this18.stream != null) {
               return;
             }
             if (event.key === "Enter" && !event.shiftKey) {
-              _this17.buttonElement.click();
+              _this18.buttonElement.click();
             }
           });
           this.inputElement.addEventListener('input', function (e) {
-            _this17.handleUserInput(e);
+            _this18.handleUserInput(e);
             if (e.target.value.trim()) {
-              _this17.buttonElement.removeAttribute('disabled');
+              _this18.buttonElement.removeAttribute('disabled');
             } else {
-              _this17.buttonElement.setAttribute('disabled', true);
+              _this18.buttonElement.setAttribute('disabled', true);
             }
           });
           this.inputElement.addEventListener('paste', function (e) {
             // Use setTimeout to allow the paste to complete before checking the value
             setTimeout(function () {
-              _this17.prompt = _this17.inputElement.value;
-              if (_this17.inputElement.value.trim()) {
-                _this17.buttonElement.removeAttribute('disabled');
+              _this18.prompt = _this18.inputElement.value;
+              if (_this18.inputElement.value.trim()) {
+                _this18.buttonElement.removeAttribute('disabled');
               } else {
-                _this17.buttonElement.setAttribute('disabled', true);
+                _this18.buttonElement.setAttribute('disabled', true);
               }
             }, 0);
           });
           this.buttonElement.addEventListener('click', function () {
-            if (_this17.stream != null) {
-              _this17.stream.dispose();
-              _this17.stream = null;
-              _this17.streamingFinished();
-              _this17.hideTypingIndicator();
+            if (_this18.stream != null) {
+              _this18.stream.dispose();
+              _this18.stream = null;
+              _this18.streamingFinished();
+              _this18.hideTypingIndicator();
 
               // Clean up: remove empty assistant message or stop streaming animation.
-              if (_this17.messages.length > 0) {
-                var lastMsg = _this17.messages[_this17.messages.length - 1];
+              if (_this18.messages.length > 0) {
+                var lastMsg = _this18.messages[_this18.messages.length - 1];
                 if (lastMsg.role === 'assistant' && !lastMsg.content) {
-                  _this17.messages.pop();
+                  _this18.messages.pop();
                 } else if (lastMsg.isStreaming) {
                   lastMsg.isStreaming = false;
                 }
               }
               return;
             }
-            _this17.sendMessage();
+            _this18.sendMessage();
           });
           var chatInteractionItems = document.getElementsByClassName('chat-interaction-history-item');
           for (var i = 0; i < chatInteractionItems.length; i++) {
@@ -1806,11 +1894,12 @@ window.chatInteractionManager = function () {
                 console.error('An element with the class chat-interaction-history-item with no data-interaction-id set.');
                 return;
               }
-              _this17.loadInteraction(itemId);
+              _this18.loadInteraction(itemId);
             });
           }
-          for (var _i4 = 0; _i4 < config.messages.length; _i4++) {
-            this.addMessage(config.messages[_i4]);
+          var initialMessages = Array.isArray(config.messages) ? config.messages : [];
+          for (var _i4 = 0; _i4 < initialMessages.length; _i4++) {
+            this.addMessage(initialMessages[_i4]);
           }
 
           // Delegate click for code block copy buttons.
@@ -1837,20 +1926,20 @@ window.chatInteractionManager = function () {
           }
           document.addEventListener('input', function (event) {
             if (event.target.matches('.setting-input[data-setting]')) {
-              _this17.validateSettingInput(event.target);
-              _this17.queueSettingsSave();
+              _this18.validateSettingInput(event.target);
+              _this18.queueSettingsSave();
             }
           });
           document.addEventListener('change', function (event) {
             if (event.target.matches('.setting-input[data-setting], .capability-checkbox[data-save-group], .capability-checkbox[data-group], .group-toggle, .ci-agent-global-toggle')) {
               if (event.target.matches('.setting-input[data-setting]')) {
-                _this17.validateSettingInput(event.target);
+                _this18.validateSettingInput(event.target);
               }
-              _this17.queueSettingsSave();
+              _this18.queueSettingsSave();
               return;
             }
             if (event.target.closest('.prompt-template-parameters-input, .prompt-template-id-input')) {
-              _this17.queueSettingsSave();
+              _this18.queueSettingsSave();
             }
           });
           document.addEventListener('click', function (event) {
@@ -1858,7 +1947,7 @@ window.chatInteractionManager = function () {
               return;
             }
             setTimeout(function () {
-              _this17.queueSettingsSave();
+              _this18.queueSettingsSave();
             }, 0);
           });
 
@@ -1868,7 +1957,7 @@ window.chatInteractionManager = function () {
             clearHistoryBtn.addEventListener('click', function () {
               var itemId = clearHistoryBtn.getAttribute('data-interaction-id');
               if (itemId) {
-                _this17.clearHistory(itemId);
+                _this18.clearHistory(itemId);
               }
             });
           }
@@ -1879,7 +1968,7 @@ window.chatInteractionManager = function () {
             if (this.micButton) {
               this.micButton.style.display = '';
               this.micButton.addEventListener('click', function () {
-                _this17.toggleRecording();
+                _this18.toggleRecording();
               });
             }
           }
@@ -1889,7 +1978,7 @@ window.chatInteractionManager = function () {
             this.conversationButton = document.querySelector(config.conversationButtonElementSelector);
             if (this.conversationButton) {
               this.conversationButton.addEventListener('click', function () {
-                _this17.toggleConversationMode();
+                _this18.toggleConversationMode();
               });
             }
           }
@@ -1938,7 +2027,7 @@ window.chatInteractionManager = function () {
           }
         },
         debouncedSaveSettings: function debouncedSaveSettings() {
-          var _this18 = this;
+          var _this19 = this;
           // Clear any existing timeout to reset the debounce timer
           this.clearPendingSettingsSave();
 
@@ -1949,11 +2038,11 @@ window.chatInteractionManager = function () {
 
           // Set a new timeout to save after 850ms of no changes
           this.saveSettingsTimeout = setTimeout(function () {
-            if (_this18.settingsDirty) {
-              _this18.saveSettings();
-              _this18.settingsDirty = false;
+            if (_this19.settingsDirty) {
+              _this19.saveSettings();
+              _this19.settingsDirty = false;
             }
-            _this18.saveSettingsTimeout = null;
+            _this19.saveSettingsTimeout = null;
           }, 850);
         },
         getSelectedToolNames: function getSelectedToolNames() {
@@ -1969,7 +2058,7 @@ window.chatInteractionManager = function () {
           return this.getSelectedGroupValues('agentNames', 'input[type="checkbox"][name$="].IsSelected"][name^="ChatInteraction.Agents["]:checked');
         },
         saveSettings: function saveSettings() {
-          var _this19 = this;
+          var _this20 = this;
           var itemId = this.getItemId();
           if (!itemId) {
             return Promise.resolve();
@@ -2014,7 +2103,7 @@ window.chatInteractionManager = function () {
           }
           return this.connection.invoke("SaveSettings", itemId, settings)["catch"](function (err) {
             console.error('Error saving settings:', err);
-            _this19.showSaveIndicator('Save failed', 'text-danger');
+            _this20.showSaveIndicator('Save failed', 'text-danger');
           });
         },
         flushPendingSave: function flushPendingSave() {
@@ -2040,13 +2129,48 @@ window.chatInteractionManager = function () {
           this.setItemId(itemId);
           this.isInteractionStarted = true;
         },
-        copyResponse: function copyResponse(message) {
-          var _ref13, _message$copyContent;
-          var text = message && _typeof(message) === 'object' ? (_ref13 = (_message$copyContent = message.copyContent) !== null && _message$copyContent !== void 0 ? _message$copyContent : message.content) !== null && _ref13 !== void 0 ? _ref13 : '' : message !== null && message !== void 0 ? message : '';
-          navigator.clipboard.writeText(text);
+        clearCopiedMessageState: function clearCopiedMessageState() {
+          if (this.copyResetTimeoutId) {
+            window.clearTimeout(this.copyResetTimeoutId);
+            this.copyResetTimeoutId = null;
+          }
+          if (this.activeCopyButton) {
+            this.setCopyButtonState(this.activeCopyButton, false);
+            this.activeCopyButton = null;
+          }
+          this.copiedMessageIndex = -1;
+        },
+        copyResponse: function copyResponse(message, index, event) {
+          var _ref21,
+            _message$copyContent,
+            _event$target,
+            _event$target$closest,
+            _this21 = this;
+          var text = message && _typeof(message) === 'object' ? (_ref21 = (_message$copyContent = message.copyContent) !== null && _message$copyContent !== void 0 ? _message$copyContent : message.content) !== null && _ref21 !== void 0 ? _ref21 : '' : message !== null && message !== void 0 ? message : '';
+          var button = (event === null || event === void 0 ? void 0 : event.currentTarget) || (event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 || (_event$target$closest = _event$target.closest) === null || _event$target$closest === void 0 ? void 0 : _event$target$closest.call(_event$target, '[data-copy-message-index]')) || null;
+          navigator.clipboard.writeText(text).then(function () {
+            _this21.clearCopiedMessageState();
+            _this21.copiedMessageIndex = typeof index === 'number' ? index : -1;
+            _this21.activeCopyButton = button;
+            if (button) {
+              _this21.setCopyButtonState(button, true);
+            } else {
+              _this21.$nextTick(function () {
+                return _this21.updateCopyButtons();
+              });
+            }
+            _this21.copyResetTimeoutId = window.setTimeout(function () {
+              _this21.clearCopiedMessageState();
+              _this21.$nextTick(function () {
+                return _this21.updateCopyButtons();
+              });
+            }, Number(config.copyResetDelayMs) || 2000);
+          })["catch"](function (err) {
+            return console.error('Failed to copy response:', err);
+          });
         },
         startRecording: function startRecording() {
-          var _this20 = this;
+          var _this22 = this;
           if (this.isRecording || !this.connection) {
             return;
           }
@@ -2058,16 +2182,16 @@ window.chatInteractionManager = function () {
             }
           }).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';
-            _this20.mediaRecorder = new MediaRecorder(stream, {
+            _this22.mediaRecorder = new MediaRecorder(stream, {
               mimeType: mimeType,
               audioBitsPerSecond: 128000
             });
-            _this20.preRecordingPrompt = _this20.prompt;
-            _this20._audioInputSent = false;
+            _this22.preRecordingPrompt = _this22.prompt;
+            _this22._audioInputSent = false;
             var subject = new signalR.Subject();
-            var itemId = _this20.getItemId();
+            var itemId = _this22.getItemId();
             var pendingChunk = Promise.resolve();
-            _this20.mediaRecorder.addEventListener('dataavailable', function (e) {
+            _this22.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;
@@ -2091,7 +2215,7 @@ window.chatInteractionManager = function () {
                 })));
               }
             });
-            _this20.mediaRecorder.addEventListener('stop', function () {
+            _this22.mediaRecorder.addEventListener('stop', function () {
               stream.getTracks().forEach(function (track) {
                 return track.stop();
               });
@@ -2100,10 +2224,10 @@ window.chatInteractionManager = function () {
               });
             });
             var language = navigator.language || document.documentElement.lang || 'en-US';
-            _this20.connection.send("SendAudioStream", itemId, subject, mimeType, language);
-            _this20.mediaRecorder.start(250);
-            _this20.isRecording = true;
-            _this20.updateMicButton();
+            _this22.connection.send("SendAudioStream", itemId, subject, mimeType, language);
+            _this22.mediaRecorder.start(250);
+            _this22.isRecording = true;
+            _this22.updateMicButton();
           })["catch"](function (err) {
             console.error('Microphone access denied:', err);
           });
@@ -2154,21 +2278,28 @@ window.chatInteractionManager = function () {
               this.inputElement.placeholder = '';
             }
           }
+        },
+        copiedMessageIndex: function copiedMessageIndex() {
+          var _this23 = this;
+          this.$nextTick(function () {
+            return _this23.updateCopyButtons();
+          });
         }
       },
       mounted: function mounted() {
-        var _this21 = this;
+        var _this24 = this;
         _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
           return _regenerator().w(function (_context5) {
             while (1) switch (_context5.n) {
               case 0:
                 _context5.n = 1;
-                return _this21.startConnection();
+                return _this24.startConnection();
               case 1:
-                _this21.initializeApp();
-                _this21.$nextTick(function () {
-                  refreshFontAwesomeIcons(_this21.$el);
-                  _this21.fontAwesomeObserver = observeFontAwesomeIcons(_this21.$el);
+                _this24.initializeApp();
+                _this24.$nextTick(function () {
+                  _this24.updateCopyButtons();
+                  refreshFontAwesomeIcons(_this24.$el);
+                  _this24.fontAwesomeObserver = observeFontAwesomeIcons(_this24.$el);
                 });
               case 2:
                 return _context5.a(2);
@@ -2185,6 +2316,7 @@ window.chatInteractionManager = function () {
           this.fontAwesomeObserver.disconnect();
           this.fontAwesomeObserver = null;
         }
+        this.clearCopiedMessageState();
         this.stopAudio(false);
         if (this.stream) {
           this.stream.dispose();
@@ -2198,8 +2330,73 @@ window.chatInteractionManager = function () {
     }).mount(config.appElementSelector);
     return app;
   };
+  var autoInitializeSelector = '[data-chat-interaction-config]';
+  function parseJsonAttribute(element, attributeName, description) {
+    var rawValue = element.getAttribute(attributeName);
+    if (!rawValue) {
+      return null;
+    }
+    try {
+      return JSON.parse(rawValue);
+    } catch (error) {
+      console.error('Failed to parse ' + description + ' JSON.', error);
+      return null;
+    }
+  }
+  function initializeFromElement(element) {
+    if (!element || element.dataset.chatInteractionInitialized === 'true') {
+      return element ? element.__chatInteractionApp || null : null;
+    }
+    var config = parseJsonAttribute(element, 'data-chat-interaction-config', 'chat interaction config');
+    if (!config) {
+      return null;
+    }
+    var app = initialize(config);
+    if (!app) {
+      return null;
+    }
+    element.dataset.chatInteractionInitialized = 'true';
+    element.__chatInteractionApp = app;
+    return app;
+  }
+  function scanForAutoInitialization(root) {
+    if (!root || typeof root.querySelectorAll !== 'function') {
+      return;
+    }
+    if (typeof root.matches === 'function' && root.matches(autoInitializeSelector)) {
+      initializeFromElement(root);
+    }
+    root.querySelectorAll(autoInitializeSelector).forEach(initializeFromElement);
+  }
+  function startAutoInitialization() {
+    scanForAutoInitialization(document);
+    if (typeof MutationObserver === 'undefined') {
+      return;
+    }
+    var observer = new MutationObserver(function (mutations) {
+      mutations.forEach(function (mutation) {
+        mutation.addedNodes.forEach(function (node) {
+          if (node && node.nodeType === 1) {
+            scanForAutoInitialization(node);
+          }
+        });
+      });
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', startAutoInitialization, {
+      once: true
+    });
+  } else {
+    startAutoInitialization();
+  }
   return {
-    initialize: initialize
+    initialize: initialize,
+    initializeFromElement: initializeFromElement
   };
 }();
 window.chatInteractionDocumentManager = function () {
@@ -2726,9 +2923,73 @@ window.chatInteractionDocumentManager = function () {
     renderUploadQueue();
     showUploadStatus(null);
     showUploadProgress(null);
+    return fileInput[managerStateKey];
+  }
+  function parseJsonAttribute(element, attributeName, description) {
+    var rawValue = element.getAttribute(attributeName);
+    if (!rawValue) {
+      return null;
+    }
+    try {
+      return JSON.parse(rawValue);
+    } catch (error) {
+      console.error('Failed to parse ' + description + ' JSON.', error);
+      return null;
+    }
+  }
+  function initializeFromElement(element) {
+    if (!element || element.dataset.chatInteractionDocumentManagerInitialized === 'true') {
+      return element ? element[managerStateKey] || null : null;
+    }
+    var config = parseJsonAttribute(element, 'data-chat-interaction-document-manager-config', 'chat interaction document manager config');
+    if (!config) {
+      return null;
+    }
+    var state = initialize(config);
+    if (!state) {
+      return null;
+    }
+    element.dataset.chatInteractionDocumentManagerInitialized = 'true';
+    return state;
+  }
+  function scanForAutoInitialization(root) {
+    if (!root || typeof root.querySelectorAll !== 'function') {
+      return;
+    }
+    if (typeof root.matches === 'function' && root.matches('[data-chat-interaction-document-manager-config]')) {
+      initializeFromElement(root);
+    }
+    root.querySelectorAll('[data-chat-interaction-document-manager-config]').forEach(initializeFromElement);
+  }
+  function startAutoInitialization() {
+    scanForAutoInitialization(document);
+    if (typeof MutationObserver === 'undefined') {
+      return;
+    }
+    var observer = new MutationObserver(function (mutations) {
+      mutations.forEach(function (mutation) {
+        mutation.addedNodes.forEach(function (node) {
+          if (node && node.nodeType === 1) {
+            scanForAutoInitialization(node);
+          }
+        });
+      });
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', startAutoInitialization, {
+      once: true
+    });
+  } else {
+    startAutoInitialization();
   }
   return {
-    initialize: initialize
+    initialize: initialize,
+    initializeFromElement: initializeFromElement
   };
 }();