ef74058301
The byline mic rendered blue and with a smaller (16px) glyph next to the gray 20px info icon, so it looked misaligned with an uneven gap. Add optional color/iconSize props to MicButton (forwarded through DictationGroup) and render the byline mic gray at 20px, wrapping it and the info icon in a tight nowrap group so they read as a snug, aligned pair. The AI chat mic is unchanged (passes neither prop). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
import { FC } from "react";
|
|
import { ActionIcon, Loader, Tooltip } from "@mantine/core";
|
|
import { IconMicrophone, IconPlayerStopFilled } from "@tabler/icons-react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useDictation } from "@/features/dictation/hooks/use-dictation";
|
|
import classes from "./mic-button.module.css";
|
|
|
|
interface MicButtonProps {
|
|
onText: (text: string) => void;
|
|
onStart?: () => void;
|
|
disabled?: boolean;
|
|
// Mantine ActionIcon size token; "lg" matches the chat composer, "md" the
|
|
// editor toolbar.
|
|
size?: "md" | "lg";
|
|
// Optional Mantine color override for the idle/transcribing states (the
|
|
// recording state stays red). Defaults to the theme primary when omitted.
|
|
color?: string;
|
|
// Optional explicit glyph size override; defaults to the size-token value.
|
|
iconSize?: number;
|
|
}
|
|
|
|
/**
|
|
* Self-contained dictation toggle. Owns its own capture state machine: a click
|
|
* starts recording (mic icon), a second click stops it (stop icon), and while
|
|
* the audio is being transcribed it shows a spinner and is disabled to prevent
|
|
* overlapping requests.
|
|
*/
|
|
export const MicButton: FC<MicButtonProps> = ({
|
|
onText,
|
|
onStart,
|
|
disabled,
|
|
size = "lg",
|
|
color,
|
|
iconSize,
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const { status, start, stop, audioLevel } = useDictation({ onText, onStart });
|
|
const resolvedIconSize = iconSize ?? (size === "lg" ? 18 : 16);
|
|
|
|
if (status === "recording") {
|
|
// Live volume-driven halo: the scale follows the current mic level.
|
|
const haloScale = 1 + Math.min(1, audioLevel) * 0.9;
|
|
return (
|
|
<Tooltip label={t("Stop recording")} withArrow>
|
|
<span className={classes.recordingWrap}>
|
|
<span
|
|
className={classes.pulse}
|
|
style={{ transform: `scale(${haloScale})` }}
|
|
aria-hidden="true"
|
|
/>
|
|
<ActionIcon
|
|
size={size}
|
|
color="red"
|
|
variant="light"
|
|
onClick={stop}
|
|
aria-label={t("Stop recording")}
|
|
style={{ position: "relative", zIndex: 1 }}
|
|
>
|
|
<IconPlayerStopFilled size={resolvedIconSize} />
|
|
</ActionIcon>
|
|
</span>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
if (status === "transcribing" || status === "error") {
|
|
return (
|
|
<Tooltip label={t("Transcribing…")} withArrow>
|
|
<ActionIcon
|
|
size={size}
|
|
variant="subtle"
|
|
color={color}
|
|
disabled
|
|
aria-label={t("Transcribing…")}
|
|
>
|
|
<Loader size="xs" />
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Tooltip label={t("Start dictation")} withArrow>
|
|
<ActionIcon
|
|
size={size}
|
|
variant="subtle"
|
|
color={color}
|
|
onClick={() => void start()}
|
|
disabled={disabled}
|
|
aria-label={t("Start dictation")}
|
|
>
|
|
<IconMicrophone size={resolvedIconSize} />
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
);
|
|
};
|