Add voice-to-text input functionality #57

balmukund18 · 2025-10-05T18:34:08Z

Create useSpeechRecognition hook with browser Speech Recognition API
Add microphone button to NoteEditor for voice input
Implement auto-punctuation (period, comma, question mark)
Add visual recording indicators with pulse animation
Fix duplicate useState imports in Index.tsx
Clean up UI: remove voice button from sidebar, fix search positioning
Support for voice commands (new line, new paragraph)
Mobile-friendly with HTTPS compatibility for production deployment

- Create useSpeechRecognition hook with browser Speech Recognition API - Add microphone button to NoteEditor for voice input - Implement auto-punctuation (period, comma, question mark) - Add visual recording indicators with pulse animation - Fix duplicate useState imports in Index.tsx - Clean up UI: remove voice button from sidebar, fix search positioning - Support for voice commands (new line, new paragraph) - Mobile-friendly with HTTPS compatibility for production deployment

vercel · 2025-10-05T18:34:12Z

@balmukund18 is attempting to deploy a commit to the Dhanush Nehru's projects Team on Vercel.

A member of the Team first needs to authorize it.

balmukund18 · 2025-10-16T14:59:54Z

@DhanushNehru i have solved the issue regarding merge conflict...

vercel · 2025-10-17T10:08:55Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
scratchpad-scribe	Ready	Preview	Comment	Oct 17, 2025 10:09am

Copilot

Pull Request Overview

This PR adds voice-to-text input functionality to the note editor, enabling users to dictate notes using their browser's Speech Recognition API. The implementation includes auto-punctuation, visual recording indicators, and voice command support for formatting.

Creates a custom useSpeechRecognition hook that wraps the browser's Speech Recognition API
Integrates voice input into the NoteEditor component with a microphone button and visual feedback
Fixes UI positioning issues in the search component

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File	Description
src/hooks/useSpeechRecognition.ts	New hook implementing browser Speech Recognition API with auto-punctuation and voice command processing
src/components/NotesSidebar.tsx	Adjusts search icon positioning and padding
src/components/NoteEditor.tsx	Integrates voice input functionality with the note editor, updates placeholder text

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-17T10:09:47Z

src/hooks/useSpeechRecognition.ts

+    SpeechRecognition: any;
+    webkitSpeechRecognition: any;


The any type bypasses TypeScript's type safety. Consider defining proper interfaces for SpeechRecognition and webkitSpeechRecognition based on the Web Speech API specification, or use a type assertion with the actual SpeechRecognition type from the DOM library.

Copilot · 2025-10-17T10:09:47Z

src/hooks/useSpeechRecognition.ts

+// Extend Window interface for Speech Recognition
+declare global {
+  interface Window {
+    SpeechRecognition: any;
+    webkitSpeechRecognition: any;
+  }
+}
+
+export const useSpeechRecognition = (): SpeechRecognitionHook => {
+  const [transcript, setTranscript] = useState('');
+  const [isListening, setIsListening] = useState(false);
+  const recognitionRef = useRef<any>(null);


Using any for recognitionRef defeats TypeScript's type checking. Define a proper type for the SpeechRecognition instance or use SpeechRecognition | null to maintain type safety.

Suggested change

// Extend Window interface for Speech Recognition

declare global {

interface Window {

SpeechRecognition: any;

webkitSpeechRecognition: any;

}

}

export const useSpeechRecognition = (): SpeechRecognitionHook => {

const [transcript, setTranscript] = useState('');

const [isListening, setIsListening] = useState(false);

const recognitionRef = useRef<any>(null);

// Minimal SpeechRecognition interface for type safety

interface SpeechRecognition {

continuous: boolean;

interimResults: boolean;

lang: string;

start(): void;

stop(): void;

onstart: (() => void) | null;

onresult: ((event: SpeechRecognitionEvent) => void) | null;

onerror: ((event: SpeechRecognitionErrorEvent) => void) | null;

onend: (() => void) | null;

}

interface SpeechRecognitionEvent {

resultIndex: number;

results: SpeechRecognitionResultList;

}

interface SpeechRecognitionResultList {

length: number;

[index: number]: SpeechRecognitionResult;

}

interface SpeechRecognitionResult {

isFinal: boolean;

[index: number]: { transcript: string };

}

interface SpeechRecognitionErrorEvent {

error: string;

}

// Extend Window interface for Speech Recognition

declare global {

interface Window {

SpeechRecognition: typeof SpeechRecognition;

webkitSpeechRecognition: typeof SpeechRecognition;

}

}

export const useSpeechRecognition = (): SpeechRecognitionHook => {

const [transcript, setTranscript] = useState('');

const [isListening, setIsListening] = useState(false);

const recognitionRef = useRef<SpeechRecognition | null>(null);

Copilot · 2025-10-17T10:09:48Z

src/hooks/useSpeechRecognition.ts

+      setIsListening(true);
+    };
+
+    recognitionRef.current.onresult = (event: any) => {


The event parameter is typed as any. Use the proper SpeechRecognitionEvent type from the Web Speech API to ensure type safety and enable IntelliSense for the event's properties.

Copilot · 2025-10-17T10:09:48Z

src/hooks/useSpeechRecognition.ts

+      }
+    };
+
+    recognitionRef.current.onerror = (event: any) => {


The event parameter should be typed as SpeechRecognitionErrorEvent instead of any to provide proper type checking for the error property.

Suggested change

recognitionRef.current.onerror = (event: any) => {

recognitionRef.current.onerror = (event: SpeechRecognitionErrorEvent) => {

DhanushNehru · 2025-10-17T10:10:30Z

Please look into the issues and also the CI has failed @balmukund18

Merge branch 'main' into feature/voice-to-text-input

3f3dde9

DhanushNehru requested a review from Copilot October 17, 2025 10:08

DhanushNehru assigned balmukund18 Oct 17, 2025

vercel bot deployed to Preview October 17, 2025 10:09 View deployment

Copilot AI reviewed Oct 17, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Add voice-to-text input functionality #57

Add voice-to-text input functionality #57

Uh oh!

balmukund18 commented Oct 5, 2025

Uh oh!

vercel bot commented Oct 5, 2025

Uh oh!

balmukund18 commented Oct 16, 2025

Uh oh!

vercel bot commented Oct 17, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Oct 17, 2025

Uh oh!

Copilot AI Oct 17, 2025

Uh oh!

Copilot AI Oct 17, 2025

Uh oh!

Copilot AI Oct 17, 2025

Uh oh!

DhanushNehru commented Oct 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-// Extend Window interface for Speech Recognition
-declare global {
-  interface Window {
-    SpeechRecognition: any;
-    webkitSpeechRecognition: any;
-  }
-}
-export const useSpeechRecognition = (): SpeechRecognitionHook => {
-  const [transcript, setTranscript] = useState('');
-  const [isListening, setIsListening] = useState(false);
-  const recognitionRef = useRef<any>(null);
+// Minimal SpeechRecognition interface for type safety
+interface SpeechRecognition {
+  continuous: boolean;
+  interimResults: boolean;
+  lang: string;
+  start(): void;
+  stop(): void;
+  onstart: (() => void) | null;
+  onresult: ((event: SpeechRecognitionEvent) => void) | null;
+  onerror: ((event: SpeechRecognitionErrorEvent) => void) | null;
+  onend: (() => void) | null;
+}
+interface SpeechRecognitionEvent {
+  resultIndex: number;
+  results: SpeechRecognitionResultList;
+}
+interface SpeechRecognitionResultList {
+  length: number;
+  [index: number]: SpeechRecognitionResult;
+}
+interface SpeechRecognitionResult {
+  isFinal: boolean;
+  [index: number]: { transcript: string };
+}
+interface SpeechRecognitionErrorEvent {
+  error: string;
+}
+// Extend Window interface for Speech Recognition
+declare global {
+  interface Window {
+    SpeechRecognition: typeof SpeechRecognition;
+    webkitSpeechRecognition: typeof SpeechRecognition;
+  }
+}
+export const useSpeechRecognition = (): SpeechRecognitionHook => {
+  const [transcript, setTranscript] = useState('');
+  const [isListening, setIsListening] = useState(false);
+  const recognitionRef = useRef<SpeechRecognition | null>(null);

	recognitionRef.current.onerror = (event: any) => {
	recognitionRef.current.onerror = (event: SpeechRecognitionErrorEvent) => {

Uh oh!

Add voice-to-text input functionality #57

Are you sure you want to change the base?

Add voice-to-text input functionality #57

Uh oh!

Conversation

balmukund18 commented Oct 5, 2025

Uh oh!

vercel bot commented Oct 5, 2025

Uh oh!

balmukund18 commented Oct 16, 2025

Uh oh!

vercel bot commented Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

DhanushNehru commented Oct 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Oct 17, 2025 •

edited

Loading