npm - vzcode - Versions diffs - 2.29.0 → 2.30.0 - Mend

vzcode 2.29.0 → 2.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/assets/bindings_wasm_bg-9w8E-TmY.wasm +0 -0
package/dist/assets/buildWorker-DylWm2VX.js +687 -0
package/dist/assets/index-CD0x02Rq.js +364 -0
package/dist/assets/index-Dyt9tpmu.css +1 -0
package/dist/assets/worker-D8p1JlHW.js +342 -0
package/dist/assets/worker-b9bkZkXK.js +116 -0
package/dist/assets/{worker-CoJaqtpi.js → worker-k7HZ3t-V.js} +12 -12
package/dist/index.html +2 -2
package/package.json +1 -1
package/src/client/App/index.tsx +38 -24
package/src/client/featureFlags.ts +8 -0
package/src/llm-streaming-ui/components/ChatInput.tsx +49 -29
package/src/llm-streaming-ui/components/useSpeechRecognition.ts +84 -60
package/src/vite-env.d.ts +1 -0
package/dist/assets/bindings_wasm_bg--2fP_mkJ.wasm +0 -0
package/dist/assets/buildWorker-BV4WiKg8.js +0 -687
package/dist/assets/index-CCmGeE_1.css +0 -1
package/dist/assets/index-JcHUw7hN.js +0 -403
package/dist/assets/worker-AbbeoMbH.js +0 -340
package/dist/assets/worker-B71kfwKL.js +0 -125

package/dist/index.html CHANGED Viewed

@@ -20,8 +20,8 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-JcHUw7hN.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CCmGeE_1.css">
+    <script type="module" crossorigin src="/assets/index-CD0x02Rq.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Dyt9tpmu.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "2.29.0",
+  "version": "2.30.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",

package/src/client/App/index.tsx CHANGED Viewed

@@ -26,6 +26,7 @@ import {
 import './style.scss';
 import { useShareDB } from './useShareDB';
 import { useESLint } from '../useESLint';
+import { enableLiveKit } from '../featureFlags';
 // Instantiate the Prettier worker.
 const prettierWorker = new PrettierWorker();
@@ -99,6 +100,29 @@ function App() {
   // Clicking on it accepts it but should not.
   const enableCopilot = false;
+  // The editor UI itself. Rendered with or without the LiveKit
+  // provider around it, so that LiveKit (and its audio capture) is
+  // only mounted when explicitly enabled.
+  const appContent = (
+    <>
+      <div className="app">
+        <VZLeft />
+        <VZMiddle
+          aiCopilotEndpoint={
+            enableCopilot ? '/ai-copilot' : null
+          }
+          esLintSource={esLintSource}
+        />
+        {enableRightPanel ? <VZRight /> : null}
+        <VZResizer side="left" />
+        {enableRightPanel ? (
+          <VZResizer side="right" />
+        ) : null}
+      </div>
+      <PersistUsername />
+    </>
+  );
   return (
     <SplitPaneResizeProvider>
       <VZCodeProvider
@@ -120,30 +144,20 @@ function App() {
         aiChatEndpoint="/ai-chat-message"
         aiChatOptions={{}}
       >
-        <LiveKitRoom
-          audio={true}
-          token={liveKitToken}
-          serverUrl={serverUrl}
-          connect={liveKitConnection}
-          style={{ height: '100%' }}
-        >
-          <div className="app">
-            <VZLeft />
-            <VZMiddle
-              aiCopilotEndpoint={
-                enableCopilot ? '/ai-copilot' : null
-              }
-              esLintSource={esLintSource}
-            />
-            {enableRightPanel ? <VZRight /> : null}
-            <VZResizer side="left" />
-            {enableRightPanel ? (
-              <VZResizer side="right" />
-            ) : null}
-          </div>
-          <PersistUsername />
-          <RoomAudioRenderer />
-        </LiveKitRoom>
+        {enableLiveKit ? (
+          <LiveKitRoom
+            audio={true}
+            token={liveKitToken}
+            serverUrl={serverUrl}
+            connect={liveKitConnection}
+            style={{ height: '100%' }}
+          >
+            {appContent}
+            <RoomAudioRenderer />
+          </LiveKitRoom>
+        ) : (
+          appContent
+        )}
       </VZCodeProvider>
     </SplitPaneResizeProvider>
   );

package/src/client/featureFlags.ts CHANGED Viewed

@@ -1,6 +1,14 @@
 export const enableLiveKit =
   import.meta.env.VITE_ENABLE_LIVEKIT === 'true';
+// Enables the speech-to-text microphone button in the AI chat
+// input. Off by default: speech recognition is a browser media
+// feature, and merely constructing a `SpeechRecognition` instance
+// can make the browser show a microphone permission prompt. Set
+// `VITE_ENABLE_VOICE_INPUT=true` to opt in.
+export const enableVoiceInput =
+  import.meta.env.VITE_ENABLE_VOICE_INPUT === 'true';
 export const enableAIChat = true;
 export const enableDiffView = true;

package/src/llm-streaming-ui/components/ChatInput.tsx CHANGED Viewed

@@ -10,10 +10,50 @@ import {
   ButtonGroup,
   ToggleButton,
 } from '../../client/bootstrap';
-import { enableAskMode } from '../../client/featureFlags';
+import {
+  enableAskMode,
+  enableVoiceInput,
+} from '../../client/featureFlags';
 import { useSpeechRecognition } from './useSpeechRecognition';
 import { MicSVG, MicOffSVG } from '../../client/Icons';
+/**
+ * Microphone toggle for voice typing. Purely presentational: the
+ * speech recognition state lives in `ChatInputComponent`, and is only
+ * ever instantiated when the user actually toggles the button.
+ *
+ * Rendered only when `enableVoiceInput` is set. See `featureFlags`.
+ */
+const VoiceInputButton = ({
+  isSpeaking,
+  onToggle,
+}: {
+  isSpeaking: boolean;
+  onToggle: () => void;
+}) => {
+  const label = isSpeaking
+    ? 'Stop voice typing'
+    : 'Start voice typing';
+  return (
+    <Button
+      variant={isSpeaking ? 'danger' : 'outline-secondary'}
+      size="sm"
+      onClick={onToggle}
+      aria-label={label}
+      title={label}
+      style={{
+        borderColor: isSpeaking ? undefined : '#dee2e6',
+        borderRadius: '0.375rem',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+      }}
+    >
+      {isSpeaking ? <MicOffSVG /> : <MicSVG />}
+    </Button>
+  );
+};
 interface ChatInputProps {
   aiChatMessage: string;
   setAIChatMessage: (message: string) => void;
@@ -39,7 +79,8 @@ const ChatInputComponent = ({
 }: ChatInputProps) => {
   const inputRef = useRef<HTMLTextAreaElement>(null);
-  // Use the speech recognition hook
+  // Speech recognition is created lazily on first toggle, so simply
+  // mounting this hook does not touch any browser media APIs.
   const {
     isSpeaking,
     toggleSpeechRecognition,
@@ -186,33 +227,12 @@ const ChatInputComponent = ({
             {aiChatMessage ? 'Press Enter to send' : ''}
           </span>
           <div style={{ display: 'flex', gap: '8px' }}>
-            <Button
-              variant={
-                isSpeaking ? 'danger' : 'outline-secondary'
-              }
-              size="sm"
-              onClick={toggleSpeechRecognition}
-              aria-label={
-                isSpeaking
-                  ? 'Stop voice typing'
-                  : 'Start voice typing'
-              }
-              title={
-                isSpeaking
-                  ? 'Stop voice typing'
-                  : 'Start voice typing'
-              }
-              style={{
-                borderColor: isSpeaking
-                  ? undefined
-                  : '#dee2e6',
-                borderRadius: '0.375rem',
-                borderWidth: '1px',
-                borderStyle: 'solid',
-              }}
-            >
-              {isSpeaking ? <MicOffSVG /> : <MicSVG />}
-            </Button>
+            {enableVoiceInput && (
+              <VoiceInputButton
+                isSpeaking={isSpeaking}
+                onToggle={toggleSpeechRecognition}
+              />
+            )}
             <Button
               variant={
                 aiChatMessage.trim()

package/src/llm-streaming-ui/components/useSpeechRecognition.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import {
   useState,
   useEffect,
   useCallback,
+  useRef,
   Dispatch,
   SetStateAction,
 } from 'react';
@@ -12,18 +13,41 @@ export interface UseSpeechRecognitionResult {
   stopSpeaking: () => void;
 }
+/**
+ * Speech-to-text input for the AI chat box.
+ *
+ * The underlying `SpeechRecognition` instance is created lazily, on the
+ * first call to `toggleSpeechRecognition`, rather than eagerly when the
+ * hook mounts. Eager construction can make some browsers show a
+ * microphone permission prompt as soon as the editor loads, before the
+ * user has asked for voice input.
+ */
 export const useSpeechRecognition = (
   onTranscriptChange: Dispatch<SetStateAction<string>>,
 ): UseSpeechRecognitionResult => {
   const [isSpeaking, setIsSpeaking] =
     useState<boolean>(false);
-  const [recognition, setRecognition] =
-    // @ts-ignore
-    useState<SpeechRecognition | null>(null);
-  const [, setFinalTranscript] = useState<string>('');
-  // Speech recognition setup
+  // `SpeechRecognition` is not part of the DOM lib, so the type
+  // reference is suppressed here, as with the constructor lookups below.
+  // @ts-ignore
+  const recognitionRef = useRef<SpeechRecognition | null>(
+    null,
+  );
+  // Keep the latest callback in a ref so the lazily-created
+  // recognition instance always calls the current handler, without
+  // having to tear down and recreate the instance.
+  const onTranscriptChangeRef = useRef(onTranscriptChange);
   useEffect(() => {
+    onTranscriptChangeRef.current = onTranscriptChange;
+  }, [onTranscriptChange]);
+  // Create the SpeechRecognition instance on first use.
+  const getRecognition = useCallback(() => {
+    if (recognitionRef.current) {
+      return recognitionRef.current;
+    }
     // Check if browser supports SpeechRecognition
     const SpeechRecognition =
       // @ts-ignore
@@ -31,56 +55,52 @@ export const useSpeechRecognition = (
       // @ts-ignore
       window.webkitSpeechRecognition;
-    if (SpeechRecognition) {
-      const recognitionInstance = new SpeechRecognition();
-      recognitionInstance.continuous = true;
-      recognitionInstance.interimResults = true;
-      recognitionInstance.onresult = (event) => {
-        let finalText = '';
-        let interimText = '';
-        // Process all results to separate final and interim text
-        for (let i = 0; i < event.results.length; i++) {
-          const result = event.results[i];
-          if (result.isFinal) {
-            finalText += result[0].transcript;
-          } else {
-            interimText += result[0].transcript;
-          }
+    if (!SpeechRecognition) {
+      return null;
+    }
+    const recognitionInstance = new SpeechRecognition();
+    recognitionInstance.continuous = true;
+    recognitionInstance.interimResults = true;
+    recognitionInstance.onresult = (event) => {
+      let finalText = '';
+      let interimText = '';
+      // Process all results to separate final and interim text
+      for (let i = 0; i < event.results.length; i++) {
+        const result = event.results[i];
+        if (result.isFinal) {
+          finalText += result[0].transcript;
+        } else {
+          interimText += result[0].transcript;
         }
+      }
-        // Update our final transcript state
-        setFinalTranscript(finalText);
-        // Combine final and interim text and update the prompt
-        const fullTranscript = finalText + interimText;
-        onTranscriptChange(fullTranscript);
-      };
-      recognitionInstance.onerror = (event) => {
-        console.error(
-          'Speech recognition error',
-          event.error,
-        );
-        setIsSpeaking(false);
-      };
-      recognitionInstance.onend = () => {
-        setIsSpeaking(false);
-        // Reset final transcript when recognition ends
-        setFinalTranscript('');
-      };
-      setRecognition(recognitionInstance);
-      return () => {
-        recognitionInstance.abort();
-      };
-    }
-  }, [onTranscriptChange]);
+      // Combine final and interim text and update the prompt
+      onTranscriptChangeRef.current(
+        finalText + interimText,
+      );
+    };
+    recognitionInstance.onerror = (event) => {
+      console.error(
+        'Speech recognition error',
+        event.error,
+      );
+      setIsSpeaking(false);
+    };
+    recognitionInstance.onend = () => {
+      setIsSpeaking(false);
+    };
+    recognitionRef.current = recognitionInstance;
+    return recognitionInstance;
+  }, []);
   const toggleSpeechRecognition = useCallback(() => {
+    const recognition = getRecognition();
     if (!recognition) {
       console.error(
         'Speech recognition not supported in this browser',
@@ -92,21 +112,25 @@ export const useSpeechRecognition = (
       recognition.stop();
       setIsSpeaking(false);
     } else {
-      // Reset final transcript when starting new recognition
-      setFinalTranscript('');
       recognition.start();
       setIsSpeaking(true);
     }
-  }, [isSpeaking, recognition]);
+  }, [getRecognition, isSpeaking]);
   const stopSpeaking = useCallback(() => {
-    if (recognition && isSpeaking) {
-      recognition.stop();
+    if (recognitionRef.current && isSpeaking) {
+      recognitionRef.current.stop();
       setIsSpeaking(false);
-      // Reset final transcript when manually stopping
-      setFinalTranscript('');
     }
-  }, [isSpeaking, recognition]);
+  }, [isSpeaking]);
+  // Release the microphone if the component unmounts while listening.
+  useEffect(
+    () => () => {
+      recognitionRef.current?.abort();
+    },
+    [],
+  );
   return {
     isSpeaking,

package/src/vite-env.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@
 interface ImportMetaEnv {
   readonly VITE_ENABLE_LIVEKIT: string;
+  readonly VITE_ENABLE_VOICE_INPUT: string;
   // Add other environment variables here as needed
 }

package/dist/assets/bindings_wasm_bg--2fP_mkJ.wasm DELETED Viewed

Binary file