vzcode 2.29.0 → 2.31.0

package/src/client/VZSidebar/index.tsx

@@ -40,14 +40,22 @@ import { useDragAndDrop } from './useDragAndDrop';
 import { createAICopyPasteHandlers } from './aiCopyPaste';
 import {
   enableLiveKit,
-  enableAIChat,
+  enableAIChat as enableAIChatFeatureFlag,
 } from '../featureFlags';
+import { handleAIChatButtonClick } from '../aiChatButtonEvent';
 import './styles.scss';
 import { VisualEditor } from './VisualEditor';
 
 const enableConnectionStatus = true;
 
 export const VZSidebar = ({
+  // Host-provided override so consumers (e.g. VizHub Studio, which has
+  // its own top-bar "AI Edit" entry point) can hide the "Edit with AI"
+  // sidebar button. Defaults to the compile-time feature flag.
+  enableAIChat = enableAIChatFeatureFlag,
+  // When set, clicking the button dispatches this custom event instead
+  // of opening VZCode's built-in AI chat, letting the host handle it.
+  aiChatButtonEvent,
   createFileTooltipText = (
     <>
       <strong>New file</strong>
@@ -135,6 +143,8 @@ export const VZSidebar = ({
   voiceChatToolTipText?: React.ReactNode;
   aiChatToolTipText?: React.ReactNode;
   visualEditorToolTipText?: React.ReactNode;
+  enableAIChat?: boolean;
+  aiChatButtonEvent?: string;
 }) => {
   const {
     files,
@@ -341,11 +351,17 @@ export const VZSidebar = ({
               <i
                 id="ai-chat-icon"
                 className="icon-button icon-button-dark"
-                onClick={() => {
-                  setIsAIChatOpen(true);
-                  setIsSearchOpen(false);
-                  setSidebarView(true); // Switch to AI chat view
-                }}
+                onClick={() =>
+                  handleAIChatButtonClick({
+                    aiChatButtonEvent,
+                    target: window,
+                    openAIChat: () => {
+                      setIsAIChatOpen(true);
+                      setIsSearchOpen(false);
+                      setSidebarView(true); // Switch to AI chat view
+                    },
+                  })
+                }
               >
                 <SparklesSVG />
               </i>
@@ -411,6 +427,7 @@ export const VZSidebar = ({
                 setIsVisualEditorOpen(true);
                 setIsAIChatOpen(false);
                 setIsSearchOpen(false);
+                setSidebarView(false); // Switch to files view width for visual editor
               }}
             >
               <AdjustmentSVG />

package/src/client/aiChatButtonEvent.ts

@@ -0,0 +1,61 @@
+/**
+ * Host-facing event emitted when the VZCode sidebar "Edit with AI"
+ * button is clicked in "emit" mode.
+ *
+ * A host opts in by passing `aiChatButtonEvent` to `VZSidebar` /
+ * `VZLeft`. When set, clicking `#ai-chat-icon` dispatches this event
+ * instead of opening VZCode's built-in AI chat panel, so the host can
+ * route the click to its own AI editing entry point (e.g. VizHub
+ * Studio's top-bar "AI Edit" action).
+ *
+ * The constant is exported so hosts don't hardcode the event name.
+ */
+export const AI_CHAT_BUTTON_EVENT =
+  'vzcode:ai-chat-button-click';
+
+export interface AIChatButtonEventDetail {
+  source: 'vzcode-sidebar';
+}
+
+/**
+ * Dispatch the host-facing AI chat button event.
+ * Kept as a standalone function so it is unit-testable without a DOM.
+ */
+export function emitAIChatButtonEvent(
+  eventName: string,
+  target: EventTarget,
+): void {
+  target.dispatchEvent(
+    new CustomEvent<AIChatButtonEventDetail>(eventName, {
+      bubbles: true,
+      composed: true,
+      detail: { source: 'vzcode-sidebar' },
+    }),
+  );
+}
+
+/**
+ * Decide what clicking the sidebar AI chat button should do.
+ *
+ * - When `aiChatButtonEvent` is set, emit the event and leave all
+ *   VZCode state untouched (the host owns the action).
+ * - Otherwise, fall back to opening VZCode's built-in AI chat.
+ *
+ * Extracted from the component so the branching is unit-testable
+ * without rendering or a real DOM.
+ */
+export function handleAIChatButtonClick({
+  aiChatButtonEvent,
+  target,
+  openAIChat,
+}: {
+  aiChatButtonEvent?: string;
+  target: EventTarget;
+  openAIChat: () => void;
+}): void {
+  if (aiChatButtonEvent) {
+    emitAIChatButtonEvent(aiChatButtonEvent, target);
+    return;
+  }
+  openAIChat();
+}

package/src/client/featureFlags.ts

@@ -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/client/index.ts

@@ -11,6 +11,12 @@ export { VZKeyboardShortcutsDoc } from './VZKeyboardShortcutsDoc';
 export { VZResizer } from './VZResizer';
 export { VZLeft } from './VZLeft';
 export { VZMiddle } from './VZMiddle';
+export {
+  AI_CHAT_BUTTON_EVENT,
+  emitAIChatButtonEvent,
+  handleAIChatButtonClick,
+} from './aiChatButtonEvent';
+export type { AIChatButtonEventDetail } from './aiChatButtonEvent';
 export {
   SplitPaneResizeProvider,
   SplitPaneResizeContext,

package/src/client/main.jsx

@@ -3,6 +3,28 @@ import * as ReactDOM from 'react-dom/client';
 import App from './App';
 import { BrowserRouter } from 'react-router-dom';
 
+// Global error handler to catch CodeMirror DOM position errors
+// These can occur when CodeMirror instances are created but not yet
+// attached to the DOM, or when presence indicators try to render
+// on offscreen editor instances.
+window.addEventListener('error', (event) => {
+  // Check if this is the specific CodeMirror posFromDOM/posAtDOM error
+  if (
+    event.error instanceof RangeError &&
+    event.error.message.includes(
+      'Trying to find position for a DOM position outside of the document',
+    )
+  ) {
+    // Log the error for debugging purposes
+    console.log(
+      'Suppressed CodeMirror DOM position error:',
+      event.error,
+    );
+    // Prevent the error from being logged to console by returning true
+    return true;
+  }
+});
+
 ReactDOM.createRoot(document.getElementById('root')).render(
   <BrowserRouter>
     <App />

package/src/llm-streaming-server/chatOperations.ts

@@ -335,30 +335,66 @@ export const finalizeAIMessage = (
 };
 
 /**
- * Adds diff data to the most recent AI message
+ * Adds diff data to a specific AI message by ID
+ * Phase 3 Fix: Use explicit message ID instead of assuming
+ * last message is AI, preventing bugs with rapid message sends
  */
 export const addDiffToAIMessage = (
   shareDBDoc: ShareDBDoc<VizContent>,
   chatId: VizChatId,
   diffData: any,
-  beforeCommitId?: string, // Commit ID before AI changes for VizHub integration
+  beforeCommitId?: string, // Commit ID before AI changes
+  messageId?: string, // Explicit AI message ID to update
 ) => {
   const chat = shareDBDoc.data.chats[chatId];
+  if (!chat || !chat.messages) {
+    console.warn(
+      `Chat ${chatId} not found or has no messages`,
+    );
+    return;
+  }
+
   const messages = [...chat.messages];
+  let targetMessageIndex = -1;
 
-  // Find the most recent AI message
-  const lastAIMessageIndex = messages.length - 1;
-  if (
-    lastAIMessageIndex >= 0 &&
-    messages[lastAIMessageIndex].role === 'assistant'
-  ) {
+  // Phase 3 Fix: Use explicit message ID if provided
+  if (messageId) {
+    targetMessageIndex = messages.findIndex(
+      (msg) => msg.id === messageId,
+    );
+    if (
+      targetMessageIndex === -1 ||
+      messages[targetMessageIndex].role !== 'assistant'
+    ) {
+      console.warn(
+        `AI message with id ${messageId} not found in chat ${chatId}`,
+      );
+      return;
+    }
+  } else {
+    // Fallback: Find the most recent AI message (safer than
+    // just assuming last message)
+    for (let i = messages.length - 1; i >= 0; i--) {
+      if (messages[i].role === 'assistant') {
+        targetMessageIndex = i;
+        break;
+      }
+    }
+
+    if (targetMessageIndex === -1) {
+      console.warn(`No AI message found in chat ${chatId}`);
+      return;
+    }
+  }
+
+  // Update the target message with diff data
+  if (targetMessageIndex >= 0) {
     const newMessage = {
-      ...messages[lastAIMessageIndex],
+      ...messages[targetMessageIndex],
       diffData,
-      ...(beforeCommitId && { beforeCommitId }), // Add beforeCommitId for VizHub integration
+      ...(beforeCommitId && { beforeCommitId }),
     };
-    // Use type assertion to extend the message with diffData
-    (messages[lastAIMessageIndex] as any) = newMessage;
+    (messages[targetMessageIndex] as any) = newMessage;
 
     const messageOp = diff(shareDBDoc.data, {
       ...shareDBDoc.data,
@@ -373,6 +409,11 @@ export const addDiffToAIMessage = (
     });
 
     shareDBDoc.submitOp(messageOp);
+
+    DEBUG &&
+      console.log(
+        `addDiffToAIMessage: Successfully added diff to message ${targetMessageIndex} in chat ${chatId}`,
+      );
   }
 };
 

package/src/llm-streaming-server/llmStreaming.ts

@@ -78,7 +78,6 @@ export const createLLMFunction = ({
       },
     });
 
-
     let fullContent = '';
     let generationId = '';
     let currentEditingFileName = null;
@@ -253,8 +252,6 @@ export const createLLMFunction = ({
     const chunks = [];
     let reasoningContent = '';
 
-
-
     // Configure reasoning tokens based on enableReasoningTokens flag
     const requestConfig: any = {
       model: modelName,

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

@@ -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/Message.tsx

@@ -13,8 +13,6 @@ import { DiffView, DiffViewRef } from './DiffView';
 import { UnifiedFilesDiff } from '../../utils/fileDiff';
 import { enableDiffView } from '../../client/featureFlags';
 
-const DEBUG = true;
-
 interface MessageProps {
   id: string;
   role: 'user' | 'assistant';

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

@@ -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

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