vzcode 2.21.0 → 2.22.0

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

@@ -0,0 +1,116 @@
+import {
+  useState,
+  useEffect,
+  useCallback,
+  Dispatch,
+  SetStateAction,
+} from 'react';
+
+export interface UseSpeechRecognitionResult {
+  isSpeaking: boolean;
+  toggleSpeechRecognition: () => void;
+  stopSpeaking: () => void;
+}
+
+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
+  useEffect(() => {
+    // Check if browser supports SpeechRecognition
+    const SpeechRecognition =
+      // @ts-ignore
+      window.SpeechRecognition ||
+      // @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;
+          }
+        }
+
+        // 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]);
+
+  const toggleSpeechRecognition = useCallback(() => {
+    if (!recognition) {
+      console.error(
+        'Speech recognition not supported in this browser',
+      );
+      return;
+    }
+
+    if (isSpeaking) {
+      recognition.stop();
+      setIsSpeaking(false);
+    } else {
+      // Reset final transcript when starting new recognition
+      setFinalTranscript('');
+      recognition.start();
+      setIsSpeaking(true);
+    }
+  }, [isSpeaking, recognition]);
+
+  const stopSpeaking = useCallback(() => {
+    if (recognition && isSpeaking) {
+      recognition.stop();
+      setIsSpeaking(false);
+      // Reset final transcript when manually stopping
+      setFinalTranscript('');
+    }
+  }, [isSpeaking, recognition]);
+
+  return {
+    isSpeaking,
+    toggleSpeechRecognition,
+    stopSpeaking,
+  };
+};

package/src/llm-streaming-ui/index.ts

@@ -0,0 +1,34 @@
+/**
+ * @vizhub/llm-streaming-ui
+ *
+ * Client-side React UI components for displaying streaming AI edits and chat.
+ * This module provides functionality for:
+ * - Displaying AI chat messages with streaming support
+ * - Showing real-time diffs and code changes
+ * - Rendering thinking/reasoning scratchpads
+ * - Managing file editing indicators
+ * - Voice input support
+ */
+
+// Main AI Chat component
+export { AIChat } from './components/index.js';
+
+// Message display components
+export { MessageList } from './components/MessageList.js';
+export { Message } from './components/Message.js';
+
+// Diff visualization components
+export { DiffView } from './components/DiffView.js';
+export { IndividualFileDiff } from './components/IndividualFileDiff.js';
+
+// Status and indicator components
+export { TypingIndicator } from './components/TypingIndicator.js';
+export { ThinkingScratchpad } from './components/ThinkingScratchpad.js';
+export { AIEditingStatusIndicator as FileEditingIndicator } from './components/FileEditingIndicator';
+export { JumpToLatestButton } from './components/JumpToLatestButton.js';
+
+// Input components
+export { ChatInput } from './components/ChatInput.js';
+
+// Custom hooks
+export { useSpeechRecognition } from './components/useSpeechRecognition.js';

package/src/server/aiChatHandler/index.ts

@@ -1,16 +1,16 @@
-import { validateRequest } from './validation.js';
+import { validateRequest } from '../../llm-streaming-server/validation.js';
 import {
   ensureChatsExist,
   ensureChatExists,
   addUserMessage,
   setAIStatus,
-} from './chatOperations.js';
-import { createLLMFunction } from './llmStreaming.js';
-import { performAIEditing } from './aiEditing.js';
+} from '../../llm-streaming-server/chatOperations.js';
+import { createLLMFunction } from '../../llm-streaming-server/llmStreaming.js';
+import { performAIEditing } from '../../llm-streaming-server/aiEditing.js';
 import {
   handleError,
   handleBackgroundError,
-} from './errorHandling.js';
+} from '../../llm-streaming-server/errorHandling.js';
 import { createRunCodeFunction } from '../../runCode.js';
 import { ShareDBDoc } from '../../types.js';
 import { VizContent } from '@vizhub/viz-types';