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

package/dist/chat-interaction.js

@@ -691,6 +691,11 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
           isConversationMode: false,
           // Realtime (speech-to-speech) controller from the shared CoreAIRealtime module.
           realtimeController: null,
+          realtimeButton: null,
+          // Whether a realtime deployment actually resolved. The controller is attached whenever the
+          // module is loaded, so its presence says nothing about which transport carries the
+          // conversation -- only this flag does.
+          realtimeEnabled: config.realtimeEnabled === true,
           notifications: [],
           notificationDismissTimers: {},
           copyTitle: config.copyTitle,
@@ -1095,6 +1100,11 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
                   }
                   return _context2.a(2);
                 case 1:
+                  // A live voice session and a typed turn are two writers into one interaction, and they
+                  // would interleave. End the session first; the turns it already produced are persisted, so
+                  // the typed message simply continues the same thread.
+                  _this4.endActiveVoiceSession();
+
                   // Stop any active recording before sending.
                   if (_this4.isRecording) {
                     _this4.stopRecording();
@@ -1489,6 +1499,39 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
             return _this12.updateTtsPlaybackButtons();
           });
         },
+        // A live voice session takes the message box away and puts the audio settings in its place; ending
+        // the session gives it back. Sending a typed message already ends the session first, so the box was
+        // never a way to say something *during* one -- hiding it only makes that honest, and frees the row
+        // for the gear. Both transports land here: realtime through the module's onActivate, the
+        // speech-to-text cascade through startConversationMode.
+        setVoiceSessionLive: function setVoiceSessionLive(live) {
+          if (this.inputElement) {
+            this.inputElement.hidden = live;
+          }
+          if (this.buttonElement) {
+            this.buttonElement.hidden = live;
+          }
+
+          // With the message box gone the live button would otherwise sit at its natural width in an
+          // empty row, so it takes the space the box left behind. Whichever transport is carrying the
+          // conversation owns a different button, and the hidden one is unaffected by the class.
+          [this.realtimeButton, this.conversationButton].forEach(function (button) {
+            if (button) {
+              button.classList.toggle('flex-grow-1', live);
+            }
+          });
+
+          // The gear is built by the realtime module directly after the button it was handed, and only
+          // in realtime mode, so it is absent on the cascade. It belongs to a live session rather than
+          // to the surface. The module hard-codes its element id and a page can host two chat clients
+          // at once -- this one and the admin widget -- so it is found next to this client's own button
+          // rather than by id.
+          var next = this.realtimeButton && this.realtimeButton.nextElementSibling;
+          var audioSettings = next && next.id === 'realtime-audio-settings' ? next : null;
+          if (audioSettings) {
+            audioSettings.hidden = !live;
+          }
+        },
         toggleConversationMode: function toggleConversationMode() {
           if (this.isConversationMode) {
             this.stopConversationMode();
@@ -1496,6 +1539,17 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
             this.startConversationMode();
           }
         },
+        // Two writers into one interaction would interleave, so the voice session ends before the typed
+        // turn starts rather than running alongside it.
+        endActiveVoiceSession: function endActiveVoiceSession() {
+          if (this.realtimeController && this.realtimeController.isActive()) {
+            this.realtimeController.stop();
+            return;
+          }
+          if (this.isConversationMode) {
+            this.stopConversationMode();
+          }
+        },
         startConversationMode: function startConversationMode() {
           var _this13 = this;
           if (!this.conversationModeEnabled || this.isConversationMode || !this.connection) {
@@ -2130,6 +2184,8 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
           // module owns the mic capture, playback, echo guard, push-to-talk and audio settings; the
           // callbacks below plug it into this app's connection and conversation-transcript display.
           if (window.CoreAIRealtime && config.realtimeButtonElementSelector) {
+            // Kept so the voice settings popover can be found next to this client's own button.
+            this.realtimeButton = document.querySelector(config.realtimeButtonElementSelector);
             this.realtimeController = window.CoreAIRealtime.attach({
               connection: this.connection,
               ensureConnected: function ensureConnected() {
@@ -2152,13 +2208,23 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
               },
               capableDeployments: config.realtimeCapableDeployments || [],
               realtimeEnabled: config.realtimeEnabled === true,
+              // input and sendButton are deliberately not handed over. The module hides every
+              // control it is given when realtime takes over, and typing has to stay available
+              // during a voice conversation -- that is the whole feature.
+              //
+              // deploymentSelect is not handed over either: it would read the raw select value,
+              // and an empty conversation deployment means "use the site default", which still
+              // resolves. The host resolves it and calls applyMode itself (see below).
               selectors: {
                 realtimeButton: config.realtimeButtonElementSelector,
-                input: config.inputElementSelector,
-                sendButton: config.sendButtonElementSelector,
                 micButton: config.micButtonElementSelector,
-                conversationButton: config.conversationButtonElementSelector,
-                deploymentSelect: config.deploymentSelectElementSelector
+                conversationButton: config.conversationButtonElementSelector
+              },
+              // The module owns whether a session is live, so the message box follows its flag
+              // rather than this app's copy of it. Losing one of these events used to leave the
+              // box hidden under a button that had already gone back to "Start speaking".
+              onSessionStateChanged: function onSessionStateChanged(active) {
+                _this18.setVoiceSessionLive(active);
               },
               onActivate: function onActivate() {
                 _this18.isConversationMode = true;
@@ -2219,6 +2285,11 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
               }
             });
             this.setupRealtimeVoicePicker(config);
+
+            // The module reveals the gear as soon as the surface enters realtime mode, but it belongs
+            // to a live session. The watcher that would hide it only runs on a change, so the idle
+            // state has to be stated once here.
+            this.setVoiceSessionLive(false);
           }
         },
         // Populates the per-interaction realtime voice picker from the selected realtime deployment's
@@ -2232,14 +2303,26 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
             return;
           }
           var voiceGroup = config.realtimeVoiceGroupElementSelector ? document.querySelector(config.realtimeVoiceGroupElementSelector) : null;
-          var deploymentSelect = config.deploymentSelectElementSelector ? document.querySelector(config.deploymentSelectElementSelector) : null;
+          var conversationSelect = config.conversationDeploymentSelectElementSelector ? document.querySelector(config.conversationDeploymentSelectElementSelector) : null;
           var capable = (config.realtimeCapableDeployments || []).map(function (n) {
             return (n || '').toLowerCase();
           });
           var savedVoiceId = config.realtimeVoiceName || '';
+          var self = this;
           function isRealtimeDeployment(name) {
             return name && capable.indexOf(name.toLowerCase()) !== -1;
           }
+
+          // Mirrors the realtime slot's chain on the server: the interaction's own choice, then the
+          // site default, then the first realtime-capable deployment. Only conversation mode reaches
+          // it -- an interaction that is not in conversation mode never speaks.
+          function resolveConversationDeployment() {
+            if (!self.conversationModeEnabled) {
+              return '';
+            }
+            var name = conversationSelect && conversationSelect.value || config.defaultRealtimeDeploymentName || (capable.length ? capable[0] : '');
+            return isRealtimeDeployment(name) ? name : '';
+          }
           function loadVoices() {
             return _loadVoices.apply(this, arguments);
           }
@@ -2249,11 +2332,17 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
               return _regenerator().w(function (_context4) {
                 while (1) switch (_context4.p = _context4.n) {
                   case 0:
-                    deploymentName = deploymentSelect ? deploymentSelect.value : '';
-                    realtime = isRealtimeDeployment(deploymentName);
+                    deploymentName = resolveConversationDeployment();
+                    realtime = !!deploymentName;
                     if (voiceGroup) {
                       voiceGroup.classList.toggle('d-none', !realtime);
                     }
+
+                    // Changing the conversation deployment switches the voice toggle on or off without a
+                    // reload.
+                    if (self.realtimeController) {
+                      self.realtimeController.applyMode(realtime);
+                    }
                     if (realtime) {
                       _context4.n = 1;
                       break;
@@ -2328,8 +2417,8 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
             }));
             return _loadVoices.apply(this, arguments);
           }
-          if (deploymentSelect) {
-            deploymentSelect.addEventListener('change', loadVoices);
+          if (conversationSelect) {
+            conversationSelect.addEventListener('change', loadVoices);
           }
           loadVoices();
         },
@@ -2621,17 +2710,20 @@ window.chatInteractionManager = function (_window$CoreAIChatMar, _window$CoreAIC
           // no longer mutes tracks; browser echo cancellation handles echo.
         },
         isConversationMode: function isConversationMode(active) {
+          // The dictation microphone is hidden while a voice conversation runs: the conversation
+          // already owns the microphone, and a second one would mean something different.
           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 = '';
-            }
+
+          // The message box and the send button give way to the voice settings while the conversation
+          // runs, and come back when it ends. Both kinds of turn still land in the same thread; what
+          // they cannot do is overlap.
+          //
+          // Only the cascade is driven from here. Realtime follows the module's own session flag
+          // (onSessionStateChanged), so the two never disagree about whether a session is live.
+          if (!this.realtimeEnabled) {
+            this.setVoiceSessionLive(active);
           }
         },
         copiedMessageIndex: function copiedMessageIndex() {