@bytexbyte/nxtlinq-ai-agent-ui-react-development 0.3.1 → 0.3.2

package/dist/context/ChatBotContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatBotContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatBotContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyB/B,OAAO,EAEL,kBAAkB,EAClB,YAAY,EAEb,MAAM,uBAAuB,CAAC;AAM/B,eAAO,MAAM,UAAU,0BAMtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAmuGlD,CAAC"}
+{"version":3,"file":"ChatBotContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatBotContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyB/B,OAAO,EAEL,kBAAkB,EAClB,YAAY,EAEb,MAAM,uBAAuB,CAAC;AAM/B,eAAO,MAAM,UAAU,0BAMtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAwvGlD,CAAC"}

package/dist/context/ChatBotContext.js

@@ -110,6 +110,7 @@ piiDisplayMode = 'redacted', voiceThresholds, debugVoiceRms = false, sttGlossary
     const [textToSpeechEnabled, setTextToSpeechEnabled] = useLocalStorage('chatbot-text-to-speech-enabled', false);
     const [preferredChatMode, setPreferredChatMode] = useLocalStorage('chatbot-active-mode', 'text');
     const [speechingIndex, setSpeechingIndex] = React.useState(undefined);
+    const [pendingAutoTts, setPendingAutoTts] = React.useState(null);
     // Speech related refs
     const audioCtxRef = React.useRef(null);
     const audioSourceRef = React.useRef(null);
@@ -1483,6 +1484,7 @@ piiDisplayMode = 'redacted', voiceThresholds, debugVoiceRms = false, sttGlossary
         const hasContent = content.trim() || (attachments && attachments.length > 0);
         if (!hasContent || isLoading)
             return;
+        setPendingAutoTts(null);
         const currentModel = getCurrentModel();
         // Initialize with current model, will be updated with actual model from backend response
         let actualModelUsed = currentModel.value;
@@ -2075,11 +2077,7 @@ piiDisplayMode = 'redacted', voiceThresholds, debugVoiceRms = false, sttGlossary
             // Play text-to-speech for AI response if enabled
             if (botResponse && botResponse.role === 'assistant' && textToSpeechEnabled) {
                 const ttsContent = botResponse.content;
-                setTimeout(() => {
-                    playTextToSpeech(ttsContent).catch(error => {
-                        console.error('Failed to play text-to-speech:', error);
-                    });
-                }, 100);
+                setPendingAutoTts({ messageId: botResponse.id, text: ttsContent });
             }
         }
         catch (error) {
@@ -2258,6 +2256,7 @@ piiDisplayMode = 'redacted', voiceThresholds, debugVoiceRms = false, sttGlossary
     }, []);
     // Stop text-to-speech (used when user sends new message)
     const stopTextToSpeechAndReset = React.useCallback(() => {
+        setPendingAutoTts(null);
         stopTextToSpeech();
         setRequiresGesture(false);
         setIsTtsProcessing(false);
@@ -2343,6 +2342,27 @@ piiDisplayMode = 'redacted', voiceThresholds, debugVoiceRms = false, sttGlossary
         console.error('TTS playback failed after retries:', lastError);
         setIsTtsProcessing(false);
     }, [textToSpeechEnabled, stopTextToSpeech, playTextToSpeechWithRetry]);
+    // Auto-TTS gate: runs after React commits, so the reply text is on screen
+    // before playback starts. Invariant: pendingAutoTts is only set after
+    // sendMessage fully resolves (any stream has ended) — for `-stream` models
+    // isLoading already turns false on the first chunk, so the isLoading check
+    // alone would NOT be a sufficient gate if pending were ever set earlier
+    // (e.g. at stream start for incremental TTS).
+    React.useEffect(() => {
+        if (!pendingAutoTts || !textToSpeechEnabled || isLoading)
+            return;
+        const targetMessage = messages.find(message => message.id === pendingAutoTts.messageId);
+        const renderedText = targetMessage
+            ? `${targetMessage.content ?? ''}${targetMessage.partialContent ?? ''}`.trim()
+            : '';
+        if (!renderedText)
+            return;
+        const { text } = pendingAutoTts;
+        setPendingAutoTts(null);
+        playTextToSpeech(text).catch(error => {
+            console.error('Failed to play text-to-speech:', error);
+        });
+    }, [messages, isLoading, pendingAutoTts, textToSpeechEnabled, playTextToSpeech]);
     const retryTtsWithGesture = React.useCallback(async () => {
         try {
             setRequiresGesture(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytexbyte/nxtlinq-ai-agent-ui-react-development",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Official React Web UI for nxtlinq AI Agent — drop-in chat widget",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/context/ChatBotContext.tsx

@@ -174,6 +174,7 @@ export const ChatBotProvider: React.FC<ChatBotProps> = ({
   const [textToSpeechEnabled, setTextToSpeechEnabled] = useLocalStorage<boolean>('chatbot-text-to-speech-enabled', false);
   const [preferredChatMode, setPreferredChatMode] = useLocalStorage<'text' | 'voice'>('chatbot-active-mode', 'text');
   const [speechingIndex, setSpeechingIndex] = React.useState<number | undefined>(undefined);
+  const [pendingAutoTts, setPendingAutoTts] = React.useState<{ messageId: string; text: string } | null>(null);
 
   // Speech related refs
   const audioCtxRef = React.useRef<AudioContext | null>(null);
@@ -1677,6 +1678,7 @@ export const ChatBotProvider: React.FC<ChatBotProps> = ({
   ): Promise<void> => {
     const hasContent = content.trim() || (attachments && attachments.length > 0);
     if (!hasContent || isLoading) return;
+    setPendingAutoTts(null);
 
     const currentModel = getCurrentModel();
     // Initialize with current model, will be updated with actual model from backend response
@@ -2318,11 +2320,7 @@ export const ChatBotProvider: React.FC<ChatBotProps> = ({
       // Play text-to-speech for AI response if enabled
       if (botResponse && botResponse.role === 'assistant' && textToSpeechEnabled) {
         const ttsContent = botResponse.content;
-        setTimeout(() => {
-          playTextToSpeech(ttsContent).catch(error => {
-            console.error('Failed to play text-to-speech:', error);
-          });
-        }, 100);
+        setPendingAutoTts({ messageId: botResponse.id, text: ttsContent });
       }
     } catch (error) {
       console.error('Failed to send message:', error);
@@ -2509,6 +2507,7 @@ export const ChatBotProvider: React.FC<ChatBotProps> = ({
 
   // Stop text-to-speech (used when user sends new message)
   const stopTextToSpeechAndReset = React.useCallback(() => {
+    setPendingAutoTts(null);
     stopTextToSpeech();
     setRequiresGesture(false);
     setIsTtsProcessing(false);
@@ -2616,6 +2615,28 @@ export const ChatBotProvider: React.FC<ChatBotProps> = ({
     setIsTtsProcessing(false);
   }, [textToSpeechEnabled, stopTextToSpeech, playTextToSpeechWithRetry]);
 
+  // Auto-TTS gate: runs after React commits, so the reply text is on screen
+  // before playback starts. Invariant: pendingAutoTts is only set after
+  // sendMessage fully resolves (any stream has ended) — for `-stream` models
+  // isLoading already turns false on the first chunk, so the isLoading check
+  // alone would NOT be a sufficient gate if pending were ever set earlier
+  // (e.g. at stream start for incremental TTS).
+  React.useEffect(() => {
+    if (!pendingAutoTts || !textToSpeechEnabled || isLoading) return;
+
+    const targetMessage = messages.find(message => message.id === pendingAutoTts.messageId);
+    const renderedText = targetMessage
+      ? `${targetMessage.content ?? ''}${targetMessage.partialContent ?? ''}`.trim()
+      : '';
+    if (!renderedText) return;
+
+    const { text } = pendingAutoTts;
+    setPendingAutoTts(null);
+    playTextToSpeech(text).catch(error => {
+      console.error('Failed to play text-to-speech:', error);
+    });
+  }, [messages, isLoading, pendingAutoTts, textToSpeechEnabled, playTextToSpeech]);
+
   const retryTtsWithGesture = React.useCallback(async () => {
     try {
       setRequiresGesture(false);