- Hooks: per-instance timers in useReady; cleanup for useIntersectionObserver; useWebSocket no longer reconnects after unmount/refresh, drains the queue and dispatches non-JSON messages - Modal/Popover/Dropdown: onClose only on close, Escape to close, no stray DOM props, hooks before early return, scrollbar-aware positioning, top-left/top-right dropdown positions - Elements: Toast/Search/StarRating per-instance timers, Pagination labels and empty state, Breadcrumbs titles, LinkList dividers/props, segment-wise active-link matching (new utils/link-matches-path), Table object cells - Form: Select with a default option is changeable, Input clear notifies controlled parents and copy works on textareas, Checkbox random label, NumberInputButtons runaway interval, upload prop/spread fixes - Layout: Button disabled while loading, Stack gap and Span truncate via inline styles, Img fallbackImageSrc, className/JSDoc fixes - Editors/MDX/AI: TinyMCE id/cleanup/stale handler/duplicate scripts, AceEditor debounce, markdown heights and frontmatter regex, last assistant message, AIPromptBlock prompt ref - Utils: fetchApi headers/FormData/fetchOptions/no mutation, base64 file names and read errors, slugify underscore trim, serializeQuery zero values - Tests for fetchApi, link matching, slugify and serializeQuery - AGENTS.md updated for the package layout Co-Authored-By: Claude Opus 5.5 <[email protected]>
72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import { Speech, Voicemail, X } from "lucide-react";
|
|
import Button from "../../layout/Button";
|
|
import type { ChatCompletionMessageParam } from "openai/resources";
|
|
import Row from "../../layout/Row";
|
|
import Loading from "../Loading";
|
|
import Border from "../Border";
|
|
|
|
type Props = {
|
|
voice_transcription_fn?: (params: { last_message?: string }) => void;
|
|
transcribing?: boolean;
|
|
history?: ChatCompletionMessageParam[];
|
|
last_response?: string;
|
|
cancel_voice_transcription_fn?: () => void;
|
|
};
|
|
|
|
export default function AIVoiceTranscription({
|
|
transcribing,
|
|
voice_transcription_fn,
|
|
history,
|
|
last_response,
|
|
cancel_voice_transcription_fn,
|
|
}: Props) {
|
|
if (!voice_transcription_fn) return null;
|
|
|
|
if (transcribing) {
|
|
return (
|
|
<Border className="px-1.5! py-0.5!">
|
|
<Row className="gap-2!">
|
|
<Loading size="small" />
|
|
<Button
|
|
title="Cancel Transcription"
|
|
className="p-1!"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
cancel_voice_transcription_fn?.();
|
|
}}
|
|
variant="ghost"
|
|
>
|
|
<X size={20} opacity={0.7} />
|
|
</Button>
|
|
</Row>
|
|
</Border>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
title="Listen to Speech"
|
|
size="smaller"
|
|
color="gray"
|
|
variant="ghost"
|
|
loading={transcribing}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
|
|
const history_last_response = history
|
|
?.slice()
|
|
.reverse()
|
|
.find((h) => h.role == "assistant");
|
|
voice_transcription_fn({
|
|
last_message:
|
|
last_response ||
|
|
history_last_response?.content?.toString(),
|
|
});
|
|
}}
|
|
className="p-1!"
|
|
>
|
|
<Speech size={20} opacity={0.7} />
|
|
</Button>
|
|
);
|
|
}
|