ali-ahnaf / ali-ahnaf/pocket_pixel

Add voice input to the log-transaction modal

未關閉
#278 0 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視
frontend up for grabs
主要語言
TypeScript
星號
14
分支
91
PR 合併指標
30 天內沒有已合併 PR

描述

### 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.

貢獻指南

這個儲存庫沒有索引到貢獻指南

研究方向

Start by reading packages/ui/src/components/LogResourceModal.tsx and packages/ui/src/lib/ai/transaction-parser.ts to understand the existing prompt flow, then create the speech hook described in the issue. Check how the modal currently updates promptText and review the acceptance criteria for supported browsers, listening state, editing, and permission errors. Done means the existing typed flow remains unchanged and voice input reaches the same review step without backend or database changes.

由索引模型根據 Issue 內容生成。

評估

技術堆疊
react, typescript
領域
frontend
Issue 類型
功能
難度
3/5
預估耗時
1-2 天
活躍度
冷清
描述清晰度
描述清楚
新手友好度
68/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。