Transcription Preview Field
Component Detail
Description
An augmented free-text input field that displays live partial transcription results as the user dictates, allowing them to monitor accuracy in real time. Merges the dictated text into the existing field content at the cursor position and supports manual editing after dictation completes.
transcription-preview-field
Summaries
The Transcription Preview Field gives users real-time confidence that their spoken words are being captured accurately by showing live partial transcription results as they speak. This immediate visual feedback dramatically reduces re-dictation rates — a key driver of user frustration and time loss in voice-first workflows. By merging dictated text precisely at the cursor position and preserving any pre-existing field content, the component ensures professionals can combine typed notes with dictated additions seamlessly, supporting flexible working styles. The ability to manually edit dictated text after the session completes further lowers the stakes of imperfect speech recognition, making the feature viable even when background noise or accented speech reduces engine accuracy.
This directly supports adoption among diverse user populations and high-noise field environments.
This medium-complexity component has two dependencies — the Transcription State Manager and the Dictation Microphone Button — making it the most integration-sensitive UI component in the dictation feature. Cursor position tracking and text merging logic require careful handling of edge cases: empty fields, fields with existing content, mid-word partial results, and cancellation restoring original content. Plan for a dedicated spike to validate Flutter's TextEditingController behaviour during live partial result injection, as inserting text programmatically while the user is not typing can produce unexpected selection or scroll behaviour. End-to-end testing must cover the full dictation flow including cancellation and error recovery.
QA should also verify that manually edited text after dictation does not corrupt the stored field value. Factor in accessibility testing for the live partial text as it updates in the field.
The Transcription Preview Field wraps Flutter's standard TextField with a TextEditingController that supports programmatic text injection during live dictation. `appendPartialTranscription(String text)` should replace the current partial placeholder in the controller value rather than appending blindly, using a tracked insertion offset to isolate the dictation region from pre-existing content. `commitFinalTranscription(String text)` finalises the merge, clears the partial placeholder, and positions the cursor at the end of the inserted text. `cancelDictation()` restores the pre-dictation snapshot stored at session start.
The component depends on `transcription-state-manager` for state transitions and on `dictation-microphone-button` for tap-to-start affordance co-location. The partial result stream from the state manager should be throttled or debounced (50–100ms) to prevent excessive widget rebuilds during rapid engine emissions. Ensure the field passes through all standard form validation and serialisation interfaces so the parent form does not need special-case logic for dictation-populated fields.
Responsibilities
- Show partial transcription results inline as they are emitted by the speech engine
- Merge final transcription into the text field at the current cursor position
- Allow the user to manually edit or discard dictated text after session ends
- Preserve any pre-existing field content and restore it if dictation is cancelled
Interfaces
appendPartialTranscription(String text)
commitFinalTranscription(String text)
cancelDictation()
getFieldValue()
setFieldValue(String value)
Relationships
Dependencies (2)
Components this component depends on
Used Integrations (1)
External integrations and APIs this component relies on