ali-ahnaf / ali-ahnaf/pocket_pixel

Add voice input to the log-transaction modal

Aperta
#278 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
frontend up for grabs
Lingua principale
TypeScript
Stelle
14
Fork
91
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

### Context / background 🎙️
The app already lets you type a sentence like *"Spent 24 on groceries at the market"* into the **Log New Resource** modal (`packages/ui/src/components/LogResourceModal.tsx`), and an AI step (`packages/ui/src/lib/ai/transaction-parser.ts`) turns that sentence into a structured transaction (title, amount, expense/income, tags, vault) for you to review before saving. This issue adds a **microphone button** so users can speak instead of type.

We'll use the browser's built-in **Web Speech API** (`SpeechRecognition`) to turn speech into text — no new backend or AI service needed, since the text→transaction parsing already exists and works unchanged once we hand it a transcript instead of typed text.

### Problem / goal 🎯
There is currently no way to add a transaction by voice. Typing is slow on mobile and inconvenient when your hands are busy (e.g. right after paying for something). We want a mic button next to the existing prompt box that:
1. Records the user's speech,
2. Converts it to text using the browser's speech recognition,
3. Drops that text into the existing prompt box, reusing the current "AI parse → review → save" flow.

### Suggested approach 🛠️
1. Create a new hook `packages/ui/src/hooks/useSpeechToText.ts` that wraps `window.SpeechRecognition` / `window.webkitSpeechRecognition`. It should expose: `isSupported`, `isListening`, `transcript`, `start()`, `stop()`, and an `error` state (handle "permission denied" and "not supported" gracefully — Safari/Firefox support varies).
2. In `packages/ui/src/components/LogResourceModal.tsx`, add a mic button (use the `Mic` / `MicOff` icon from `lucide-react`, already used elsewhere in the app) next to the existing prompt `textarea`. While listening, feed the live transcript into the existing `promptText` state (`setPromptText`). When the user stops recording, they can review/edit the text and press the existing "SEND" button (or auto-trigger `handleSendPrompt()`).
3. If the browser doesn't support speech recognition, hide the mic button (feature-detect via `isSupported`) rather than showing a broken control.
4. No changes are needed to the API, database, or shared DTOs — everything downstream (`parseTransactionPrompt`, `profileApi.createTransaction`) already works with plain text/structured data.

### Acceptance criteria ✅
- [ ] A microphone icon button appears next to the AI-prompt textarea in the "Log New Resource" modal.
- [ ] Clicking it starts recording and shows a clear "listening" state (e.g. pulsing icon or label change).
- [ ] Speech is transcribed into the prompt textarea in near-real-time (or once recording stops, whichever is simpler to implement first).
- [ ] Clicking again (or a stop button) ends recording; the user can edit the transcribed text before sending.
- [ ] If the browser doesn't support speech recognition, the mic button is hidden and the existing typed-prompt flow still works exactly as before.
- [ ] Microphone permission denial shows a friendly inline error, not a crash.
- [ ] No backend, shared-package, or database changes were made.

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.