Jaspers Research Agents: Lets you define research agents that chat and answer with citations from SEC filings, your documents, and the web, via Jaspers' research-store service.
| 1 | import { useEffect, type ReactElement } from 'react' |
| 2 | import { useDictation } from '@jaspers-ai/sdk' |
| 3 | |
| 4 | // The microphone under the message box. A press starts listening, the next stops it and hands the |
| 5 | // words to the box to edit and send; Escape drops what was said. The app records and transcribes |
| 6 | // with the user's voice provider, so this view gets the words and never the audio. |
| 7 | |
| 8 | export function Mic({ onText }: { onText: (text: string) => void }): ReactElement { |
| 9 | const dictation = useDictation() |
| 10 | const { state, error } = dictation |
| 11 | |
| 12 | useEffect(() => { |
| 13 | if (state !== 'listening') return |
| 14 | const onKey = (e: KeyboardEvent): void => { |
| 15 | if (e.key === 'Escape') void dictation.cancel() |
| 16 | } |
| 17 | window.addEventListener('keydown', onKey) |
| 18 | return () => window.removeEventListener('keydown', onKey) |
| 19 | }, [state, dictation]) |
| 20 | |
| 21 | const press = (): void => { |
| 22 | if (state === 'idle') void dictation.start() |
| 23 | else if (state === 'listening') void dictation.stop().then((text) => text.trim() && onText(text.trim())) |
| 24 | } |
| 25 | const label = |
| 26 | state === 'listening' |
| 27 | ? 'Stop and put what you said in the box (Escape drops it)' |
| 28 | : state === 'transcribing' |
| 29 | ? 'Writing down what you said' |
| 30 | : 'Talk to the agent' |
| 31 | |
| 32 | return ( |
| 33 | <span className="ag-mic"> |
| 34 | {state === 'listening' && <span className="ag-mic-note">Listening…</span>} |
| 35 | {state === 'transcribing' && <span className="ag-mic-note ag-shimmer">Writing it down…</span>} |
| 36 | {error && state === 'idle' && <span className="ag-mic-note ag-error">{error}</span>} |
| 37 | <button |
| 38 | type="button" |
| 39 | className={state === 'listening' ? 'ag-icon ag-mic-on' : 'ag-icon'} |
| 40 | aria-label={label} |
| 41 | title={label} |
| 42 | aria-pressed={state === 'listening'} |
| 43 | disabled={state === 'transcribing'} |
| 44 | onClick={press} |
| 45 | > |
| 46 | <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"> |
| 47 | {state === 'listening' ? ( |
| 48 | <rect x="7" y="7" width="10" height="10" fill="currentColor" /> |
| 49 | ) : ( |
| 50 | <path |
| 51 | d="M12 3.5a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0v-5a3 3 0 0 0-3-3ZM6 11a6 6 0 0 0 12 0M12 17v3.5M9 20.5h6" |
| 52 | fill="none" |
| 53 | stroke="currentColor" |
| 54 | strokeWidth="1.6" |
| 55 | /> |
| 56 | )} |
| 57 | </svg> |
| 58 | </button> |
| 59 | </span> |
| 60 | ) |
| 61 | } |