@tpitre/story-ui 4.16.6 → 4.16.8

package/dist/templates/StoryUI/voice/VoiceCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceCanvas.d.ts","sourceRoot":"","sources":["../../../../templates/StoryUI/voice/VoiceCanvas.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAwE,MAAM,OAAO,CAAC;AAY7F,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,8EAA8E;AAC9E,MAAM,WAAW,iBAAiB;IAChC,4EAA4E;IAC5E,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAID,eAAO,MAAM,WAAW,4FA6uBtB,CAAC"}
+{"version":3,"file":"VoiceCanvas.d.ts","sourceRoot":"","sources":["../../../../templates/StoryUI/voice/VoiceCanvas.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAwE,MAAM,OAAO,CAAC;AAY7F,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,8EAA8E;AAC9E,MAAM,WAAW,iBAAiB;IAChC,4EAA4E;IAC5E,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAID,eAAO,MAAM,WAAW,4FA+wBtB,CAAC"}

package/dist/templates/StoryUI/voice/VoiceCanvas.js

@@ -59,6 +59,7 @@ export const VoiceCanvas = React.forwardRef(function VoiceCanvas({ apiBase, prov
     const audioCheckRef = useRef(null);
     const audioStreamRef = useRef(null);
     const stopListeningRef = useRef(() => { });
+    const startListeningRef = useRef(() => { });
     const currentCodeRef = useRef(currentCode);
     currentCodeRef.current = currentCode;
     // Incremented on every new generation to prevent stale finally blocks from
@@ -85,11 +86,30 @@ export const VoiceCanvas = React.forwardRef(function VoiceCanvas({ apiBase, prov
     }, []);
     // ── Generate / Edit ───────────────────────────────────────────
     const sendCanvasRequest = useCallback(async (transcript) => {
+        // Reject prompts that are too short to produce useful output.
+        // Fragments like "create a" or "please" result in broken code.
+        const wordCount = transcript.trim().split(/\s+/).length;
+        if (wordCount < 3) {
+            setErrorMessage('Say a bit more — describe what you want to build.');
+            return;
+        }
         if (abortRef.current)
             abortRef.current.abort();
         // Stamp this generation so stale finally blocks from aborted requests
         // don't clobber the state of a newer in-flight request.
         const genId = ++generationCounterRef.current;
+        // Pause voice recognition while the LLM is thinking so the user can
+        // talk freely without triggering new requests or aborting this one.
+        // The mic resumes automatically when generation completes.
+        const wasListening = isListeningRef.current;
+        if (wasListening && recognitionRef.current) {
+            try {
+                recognitionRef.current.stop();
+            }
+            catch { /* already stopped */ }
+            recognitionRef.current = null;
+            // Keep isListeningRef.current = true so we know to resume later
+        }
         setIsGenerating(true);
         setStatusText('Thinking...');
         setErrorMessage('');
@@ -179,6 +199,15 @@ export const VoiceCanvas = React.forwardRef(function VoiceCanvas({ apiBase, prov
             if (generationCounterRef.current === genId) {
                 setIsGenerating(false);
                 abortRef.current = null;
+                // Resume voice recognition if it was active before generation started.
+                // This lets the user keep talking hands-free across multiple edits.
+                if (wasListening && isListeningRef.current) {
+                    setTimeout(() => {
+                        if (isListeningRef.current && !recognitionRef.current) {
+                            startListeningRef.current();
+                        }
+                    }, 300);
+                }
             }
         }
     }, [apiBase, provider, model, storyReady, sendCodeToIframe, onError]);
@@ -297,15 +326,18 @@ export const VoiceCanvas = React.forwardRef(function VoiceCanvas({ apiBase, prov
             clearTimeout(autoSubmitRef.current);
         autoSubmitRef.current = setTimeout(() => {
             const prompt = transcript.trim();
-            if (prompt) {
-                // Clear the pending transcript BEFORE sending so that stopListening
-                // (if pressed moments later) doesn't fire a duplicate request.
+            // Require at least 3 words to avoid sending fragments like "create a"
+            // or "please" that produce bad LLM output. Short pauses mid-thought
+            // are common in natural speech — the longer delay (3s) gives the user
+            // time to continue before auto-submitting.
+            const wordCount = prompt.split(/\s+/).length;
+            if (prompt && wordCount >= 3) {
                 pendingTranscriptRef.current = '';
                 setPendingTranscript('');
                 sendCanvasRequest(prompt);
             }
             autoSubmitRef.current = null;
-        }, 1200);
+        }, 3000);
     }, [sendCanvasRequest]);
     // ── Voice: start ───────────────────────────────────────────────
     const startListening = useCallback(() => {
@@ -456,6 +488,7 @@ export const VoiceCanvas = React.forwardRef(function VoiceCanvas({ apiBase, prov
             setIsListening(false);
         }
     }, [clear, undo, redo, scheduleIntent, saveStory]);
+    startListeningRef.current = startListening;
     // ── Voice: stop ────────────────────────────────────────────────
     const stopListening = useCallback(() => {
         isListeningRef.current = false;

package/dist/templates/StoryUI/voice/VoiceCanvas.tsx

@@ -93,6 +93,7 @@ function VoiceCanvas({
   const audioCheckRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const audioStreamRef = useRef<MediaStream | null>(null);
   const stopListeningRef = useRef<() => void>(() => {});
+  const startListeningRef = useRef<() => void>(() => {});
   const currentCodeRef = useRef(currentCode);
   currentCodeRef.current = currentCode;
   // Incremented on every new generation to prevent stale finally blocks from
@@ -123,12 +124,30 @@ function VoiceCanvas({
   // ── Generate / Edit ───────────────────────────────────────────
 
   const sendCanvasRequest = useCallback(async (transcript: string) => {
+    // Reject prompts that are too short to produce useful output.
+    // Fragments like "create a" or "please" result in broken code.
+    const wordCount = transcript.trim().split(/\s+/).length;
+    if (wordCount < 3) {
+      setErrorMessage('Say a bit more — describe what you want to build.');
+      return;
+    }
+
     if (abortRef.current) abortRef.current.abort();
 
     // Stamp this generation so stale finally blocks from aborted requests
     // don't clobber the state of a newer in-flight request.
     const genId = ++generationCounterRef.current;
 
+    // Pause voice recognition while the LLM is thinking so the user can
+    // talk freely without triggering new requests or aborting this one.
+    // The mic resumes automatically when generation completes.
+    const wasListening = isListeningRef.current;
+    if (wasListening && recognitionRef.current) {
+      try { recognitionRef.current.stop(); } catch { /* already stopped */ }
+      recognitionRef.current = null;
+      // Keep isListeningRef.current = true so we know to resume later
+    }
+
     setIsGenerating(true);
     setStatusText('Thinking...');
     setErrorMessage('');
@@ -227,6 +246,16 @@ function VoiceCanvas({
       if (generationCounterRef.current === genId) {
         setIsGenerating(false);
         abortRef.current = null;
+
+        // Resume voice recognition if it was active before generation started.
+        // This lets the user keep talking hands-free across multiple edits.
+        if (wasListening && isListeningRef.current) {
+          setTimeout(() => {
+            if (isListeningRef.current && !recognitionRef.current) {
+              startListeningRef.current();
+            }
+          }, 300);
+        }
       }
     }
   }, [apiBase, provider, model, storyReady, sendCodeToIframe, onError]);
@@ -350,15 +379,18 @@ function VoiceCanvas({
     if (autoSubmitRef.current) clearTimeout(autoSubmitRef.current);
     autoSubmitRef.current = setTimeout(() => {
       const prompt = transcript.trim();
-      if (prompt) {
-        // Clear the pending transcript BEFORE sending so that stopListening
-        // (if pressed moments later) doesn't fire a duplicate request.
+      // Require at least 3 words to avoid sending fragments like "create a"
+      // or "please" that produce bad LLM output. Short pauses mid-thought
+      // are common in natural speech — the longer delay (3s) gives the user
+      // time to continue before auto-submitting.
+      const wordCount = prompt.split(/\s+/).length;
+      if (prompt && wordCount >= 3) {
         pendingTranscriptRef.current = '';
         setPendingTranscript('');
         sendCanvasRequest(prompt);
       }
       autoSubmitRef.current = null;
-    }, 1200);
+    }, 3000);
   }, [sendCanvasRequest]);
 
   // ── Voice: start ───────────────────────────────────────────────
@@ -495,6 +527,8 @@ function VoiceCanvas({
     }
   }, [clear, undo, redo, scheduleIntent, saveStory]);
 
+  startListeningRef.current = startListening;
+
   // ── Voice: stop ────────────────────────────────────────────────
 
   const stopListening = useCallback(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpitre/story-ui",
-  "version": "4.16.6",
+  "version": "4.16.8",
   "description": "AI-powered Storybook story generator with dynamic component discovery",
   "type": "module",
   "main": "dist/index.js",

package/templates/StoryUI/voice/VoiceCanvas.tsx

@@ -93,6 +93,7 @@ function VoiceCanvas({
   const audioCheckRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const audioStreamRef = useRef<MediaStream | null>(null);
   const stopListeningRef = useRef<() => void>(() => {});
+  const startListeningRef = useRef<() => void>(() => {});
   const currentCodeRef = useRef(currentCode);
   currentCodeRef.current = currentCode;
   // Incremented on every new generation to prevent stale finally blocks from
@@ -123,12 +124,30 @@ function VoiceCanvas({
   // ── Generate / Edit ───────────────────────────────────────────
 
   const sendCanvasRequest = useCallback(async (transcript: string) => {
+    // Reject prompts that are too short to produce useful output.
+    // Fragments like "create a" or "please" result in broken code.
+    const wordCount = transcript.trim().split(/\s+/).length;
+    if (wordCount < 3) {
+      setErrorMessage('Say a bit more — describe what you want to build.');
+      return;
+    }
+
     if (abortRef.current) abortRef.current.abort();
 
     // Stamp this generation so stale finally blocks from aborted requests
     // don't clobber the state of a newer in-flight request.
     const genId = ++generationCounterRef.current;
 
+    // Pause voice recognition while the LLM is thinking so the user can
+    // talk freely without triggering new requests or aborting this one.
+    // The mic resumes automatically when generation completes.
+    const wasListening = isListeningRef.current;
+    if (wasListening && recognitionRef.current) {
+      try { recognitionRef.current.stop(); } catch { /* already stopped */ }
+      recognitionRef.current = null;
+      // Keep isListeningRef.current = true so we know to resume later
+    }
+
     setIsGenerating(true);
     setStatusText('Thinking...');
     setErrorMessage('');
@@ -227,6 +246,16 @@ function VoiceCanvas({
       if (generationCounterRef.current === genId) {
         setIsGenerating(false);
         abortRef.current = null;
+
+        // Resume voice recognition if it was active before generation started.
+        // This lets the user keep talking hands-free across multiple edits.
+        if (wasListening && isListeningRef.current) {
+          setTimeout(() => {
+            if (isListeningRef.current && !recognitionRef.current) {
+              startListeningRef.current();
+            }
+          }, 300);
+        }
       }
     }
   }, [apiBase, provider, model, storyReady, sendCodeToIframe, onError]);
@@ -350,15 +379,18 @@ function VoiceCanvas({
     if (autoSubmitRef.current) clearTimeout(autoSubmitRef.current);
     autoSubmitRef.current = setTimeout(() => {
       const prompt = transcript.trim();
-      if (prompt) {
-        // Clear the pending transcript BEFORE sending so that stopListening
-        // (if pressed moments later) doesn't fire a duplicate request.
+      // Require at least 3 words to avoid sending fragments like "create a"
+      // or "please" that produce bad LLM output. Short pauses mid-thought
+      // are common in natural speech — the longer delay (3s) gives the user
+      // time to continue before auto-submitting.
+      const wordCount = prompt.split(/\s+/).length;
+      if (prompt && wordCount >= 3) {
         pendingTranscriptRef.current = '';
         setPendingTranscript('');
         sendCanvasRequest(prompt);
       }
       autoSubmitRef.current = null;
-    }, 1200);
+    }, 3000);
   }, [sendCanvasRequest]);
 
   // ── Voice: start ───────────────────────────────────────────────
@@ -495,6 +527,8 @@ function VoiceCanvas({
     }
   }, [clear, undo, redo, scheduleIntent, saveStory]);
 
+  startListeningRef.current = startListening;
+
   // ── Voice: stop ────────────────────────────────────────────────
 
   const stopListening = useCallback(() => {