@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/src/Chat/ChatComposer.tsx

@@ -52,13 +52,17 @@ import {ChatComposerContext} from './ChatContext';
 import type {ChatComposerInputControl} from './ChatContext';
 import {ChatSendButton} from './ChatSendButton';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 import {useAnnounceRenderedText} from '../hooks/useAnnounceRenderedText';
+import {useMergedRefs} from '../hooks/useMergedRefs';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
+import {useInteractionModalityTracking} from '../utils/interactionModality';
 import {
-  getInteractionModality,
-  useInteractionModalityTracking,
-} from '../utils/interactionModality';
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Chat/ChatComposer.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Types
@@ -362,7 +366,7 @@ function isComposerEditor(target: EventTarget | null): target is HTMLElement {
  * ```
  */
 export function ChatComposer(props: ChatComposerProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const {
     ref,
     onSubmit,
@@ -394,8 +398,6 @@ export function ChatComposer(props: ChatComposerProps) {
   const [internalValue, setInternalValue] = useState('');
   const [hasKeyboardEditorFocus, setHasKeyboardEditorFocus] = useState(false);
 
-  useInteractionModalityTracking();
-
   const isControlled = controlledValue !== undefined;
   const currentValue = isControlled ? controlledValue : internalValue;
 
@@ -424,6 +426,8 @@ export function ChatComposer(props: ChatComposerProps) {
   const canSend = currentValue.trim().length > 0 && !isDisabled;
 
   const bodyRef = useRef<HTMLDivElement>(null);
+  const {ref: modalityRef, readModality} = useInteractionModalityTracking();
+  const bodyComposedRef = useMergedRefs(bodyRef, modalityRef);
 
   // Input slot registers its focus (and future) control here so the shell can
   // drive it without knowing its DOM shape. Stable ref — safe in the memoized
@@ -458,11 +462,10 @@ export function ChatComposer(props: ChatComposerProps) {
   const handleBodyFocusCapture = useCallback(
     (event: FocusEvent<HTMLDivElement>) => {
       setHasKeyboardEditorFocus(
-        isComposerEditor(event.target) &&
-          getInteractionModality() === 'keyboard',
+        isComposerEditor(event.target) && readModality() === 'keyboard',
       );
     },
-    [],
+    [readModality],
   );
 
   const handleBodyBlurCapture = useCallback(
@@ -550,7 +553,7 @@ export function ChatComposer(props: ChatComposerProps) {
         {drawer}
 
         <div
-          ref={bodyRef}
+          ref={bodyComposedRef}
           onClick={handleBodyClick}
           onPointerDownCapture={() => setHasKeyboardEditorFocus(false)}
           onFocusCapture={handleBodyFocusCapture}

package/src/Chat/ChatComposerDrawer.tsx

@@ -15,7 +15,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/ChatComposerDrawer.test.tsx
  * - /packages/core/src/Chat/ChatComposerDrawer.doc.mjs
- * - /packages/core/src/Chat/ChatComposerDrawer.spec.md
+ * - /docs/specs/components/Chat/ChatComposerDrawer.spec.md
  * - /apps/storybook/stories/ChatComposerDrawer.stories.tsx
  * - /packages/core/src/Chat/index.ts (exports)
  * - /packages/cli/assets/templates/blocks/components/ChatComposerDrawer/ (block examples)
@@ -37,7 +37,13 @@ import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
-import {useTranslator} from '../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Chat/ChatComposerDrawer.generated';
+
+registerEnglishFallback(english);
 
 export interface ChatComposerDrawerProps extends BaseProps<HTMLDivElement> {
   ref?: React.Ref<HTMLDivElement>;
@@ -253,7 +259,7 @@ export function ChatComposerDrawer({
   'data-testid': testId,
   ...htmlProps
 }: ChatComposerDrawerProps): React.ReactElement {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const label = labelFromProps ?? t('@astryx.chat.composerDrawer.label');
   const [internalCollapsed, setInternalCollapsed] =
     useState(defaultIsCollapsed);

package/src/Chat/ChatComposerInput.tsx

@@ -20,7 +20,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/ChatComposerInput.test.tsx
  * - /packages/core/src/Chat/ChatComposerInput.doc.mjs
- * - /packages/core/src/Chat/ChatComposerInput.spec.md
+ * - /docs/specs/components/Chat/ChatComposerInput.spec.md
  * - /apps/storybook/stories/ChatComposerInput.stories.tsx
  * - /packages/core/src/Chat/index.ts
  * - /apps/storybook/stories/ChatComposer.stories.tsx
@@ -68,7 +68,13 @@ import {
 import {Badge, type BadgeProps} from '../Badge';
 import {useChatComposerContext} from './ChatContext';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Chat/ChatComposerInput.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Types
@@ -346,7 +352,7 @@ function serialize(node: Node): string {
 // =============================================================================
 
 export function ChatComposerInput(props: ChatComposerInputProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const composerCtx = useChatComposerContext();
   const hasControlledValueProp = props.value !== undefined;
 
@@ -650,6 +656,14 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
     triggerMenu.handleInput();
   }, [isDisabled, emitChange, triggerMenu]);
 
+  // A click inside the editor keeps the menu open, but it can move the caret
+  // out of the query; the trigger is checked again at the new caret.
+  const handleEditorClick = useCallback(() => {
+    if (!isDisabled && triggerMenu.state.isActive) {
+      triggerMenu.handleInput();
+    }
+  }, [isDisabled, triggerMenu]);
+
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLDivElement>) => {
       if (isDisabled) {
@@ -929,6 +943,7 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
         contentEditable={!isDisabled}
         suppressContentEditableWarning
         onInput={handleInput}
+        onClick={handleEditorClick}
         onKeyDown={handleKeyDown}
         onPaste={handlePaste}
         onDragOver={handleDragOver}

package/src/Chat/ChatDictationButton.tsx

@@ -28,7 +28,13 @@ import {Icon} from '../Icon';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Chat/ChatDictationButton.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Types
@@ -113,7 +119,7 @@ export function ChatDictationButton({
   style,
   ...rest
 }: ChatDictationButtonProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
 
   if (isHiddenWhenUnsupported && !dictation.isSupported) {
     return null;

package/src/Chat/ChatLayout.tsx

@@ -39,9 +39,15 @@ import {useChatNewMessages} from './useChatNewMessages';
 import {ChatLayoutScrollButton} from './ChatLayoutScrollButton';
 import {ChatLayoutContext} from './ChatContext';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Chat/ChatLayout.generated';
+
+registerEnglishFallback(english);
 // =============================================================================
 // Types
 // =============================================================================
@@ -119,12 +125,6 @@ const styles = stylex.create({
   rootScrollable: {
     overflowY: 'auto',
     overflowX: 'hidden',
-    // Hide scrollbar during programmatic scroll animation
-    // to prevent flash. Restored when animation settles.
-    scrollbarWidth: {
-      default: null,
-      ':is([data-astryx-scrolling])': 'none',
-    },
   },
 
   messageArea: {
@@ -255,6 +255,7 @@ const styles = stylex.create({
 // =============================================================================
 
 function hasVisibleContent(children: ReactNode): boolean {
+  // eslint-disable-next-line @astryx/no-nullish-jsx-guard -- component:ChatLayout FR5 names exactly null, undefined, false and an empty array as empty children; '' and true are not
   if (children == null || children === false) {
     return false;
   }
@@ -301,7 +302,7 @@ export function ChatLayout({
   ref,
   ...rest
 }: ChatLayoutProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const rootRef = useRef<HTMLDivElement>(null);
 
   const scrollContainerRef = externalScrollRef ?? rootRef;

package/src/Chat/ChatLayoutScrollButton.tsx

@@ -32,7 +32,13 @@ import {Button} from '../Button';
 import type {BaseProps} from '../BaseProps';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Chat/ChatLayoutScrollButton.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Types
@@ -138,7 +144,7 @@ export function ChatLayoutScrollButton({
   style,
   ...rest
 }: ChatLayoutScrollButtonProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   return (
     // Two elements, two responsibilities. The outer one centres the pill and
     // holds the gap above the composer — spacing outside the pill's border

package/src/Chat/ChatMessage.tsx

@@ -37,7 +37,14 @@ import {
 import {isRenderable, mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
+import {chatMessageVars} from './chatMessage.vars.stylex';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Chat/ChatMessage.generated';
+
+registerEnglishFallback(english);
 
 export interface ChatMessageProps extends BaseProps<HTMLElement> {
   ref?: React.Ref<HTMLElement>;
@@ -108,12 +115,20 @@ const styles = stylex.create({
   // Slot wrappers collapse when the caller's content renders nothing, so an
   // empty Fragment or a component that returns null leaves no gap. Content is
   // never inspected to decide this.
+  // Judged from this article (parent-relative), never from siblings, so the
+  // global stylesheet keeps no sibling-relative :has().
+  avatarOffset: {
+    [chatMessageVars.avatarOffset]: {
+      default: '0px',
+      ':has([data-chat-name])': spacingVars['--spacing-5'],
+    },
+  },
   avatarWrap: {
     display: {default: null, ':empty': 'none'},
     flexShrink: 0,
-    ':has(~ * [data-chat-name])': {
-      marginBlockStart: spacingVars['--spacing-5'],
-    },
+    // The avatar lines up with a bubble's name row when the message holds
+    // one; the article sets the offset (see chatMessageVars).
+    marginBlockStart: chatMessageVars.avatarOffset,
   },
   contentColumn: {
     display: 'flex',
@@ -196,7 +211,7 @@ export function ChatMessage({
   ref,
   ...rest
 }: ChatMessageProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const listContext = useChatListContext();
   const density = densityProp ?? listContext?.density ?? 'balanced';
 
@@ -257,6 +272,7 @@ export function ChatMessage({
         {...mergeProps(
           themeProps('chat-message', {sender, density}),
           stylex.props(
+            styles.avatarOffset,
             styles.root,
             rootAlignment,
             hasAvatar && rootGap,

package/src/Chat/ChatMessageList.tsx

@@ -37,8 +37,14 @@ import {Spinner} from '../Spinner';
 import type {BaseProps} from '../BaseProps';
 import type {SpacingStep} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Chat/ChatMessageList.generated';
+
+registerEnglishFallback(english);
 
 export interface ChatMessageListProps extends BaseProps<HTMLDivElement> {
   /** Ref forwarded to the root element */
@@ -240,7 +246,7 @@ export function ChatMessageList({
   const sentinelRef = useRef<HTMLDivElement>(null);
   const innerRef = useRef<HTMLDivElement>(null);
   const [isLoadingTop, startTransition] = useTransition();
-  const t = useTranslator();
+  const t = useComponentTranslator();
   // The top loading Spinner sits inside the log and is silent; the list
   // announces its loading through the channel (spec:AST-086 FR4, FR8).
   useBusyAnnouncement(isLoadingTop, t('@astryx.spinner.loading'), innerRef);
@@ -254,6 +260,7 @@ export function ChatMessageList({
   }, [layoutContext]);
 
   const hasChildren =
+    // eslint-disable-next-line @astryx/no-nullish-jsx-guard -- component:ChatMessageList FR4 shows the empty state only for nullish, false or an empty top-level array children
     children != null &&
     children !== false &&
     !(Array.isArray(children) && children.length === 0);

package/src/Chat/ChatMessageMetadata.tsx

@@ -26,7 +26,13 @@ import type {IconName} from '../Icon/globalIconRegistry';
 import {isRenderable, mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Chat/ChatMessageMetadata.generated';
+
+registerEnglishFallback(english);
 
 export type ChatMessageStatus =
   'sending' | 'sent' | 'delivered' | 'read' | 'error';
@@ -118,7 +124,7 @@ export function ChatMessageMetadata({
   style,
   ...rest
 }: ChatMessageMetadataProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const msgContext = useChatMessageContext();
   const sender = msgContext?.sender ?? 'assistant';
 

package/src/Chat/ChatPastedTextToken.tsx

@@ -4,12 +4,14 @@
 
 /**
  * @file ChatPastedTextToken.tsx
- * @input Uses React, StyleX, Badge, HoverCard, Button, provider-bound translator
+ * @input Uses React, StyleX, Badge, HoverCard, Button, provider-bound translator,
+ *   the shared tap stop (`useTapStop`)
  * @output Exports ChatPastedTextToken component
  * @position Inline token for pasted text with hover card preview + expand
  *
- * Hover: card with truncated text preview and "Expand" button.
- * Expand replaces the token with the full text in the contentEditable.
+ * Hover, or a tap by finger or pen: card with truncated text preview and
+ * "Expand" button. Expand replaces the token with the full text in the
+ * contentEditable.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/index.ts (exports)
@@ -25,7 +27,15 @@ import {
 import {Badge} from '../Badge';
 import {Button} from '../Button';
 import {HoverCard} from '../HoverCard';
-import {useTranslator, type TranslatorFn} from '../i18n';
+import type {TranslatorFn} from '../i18n';
+import {useTapStop} from '../Layer/useTouchTrigger';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Chat/ChatPastedTextToken.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Types
@@ -90,8 +100,15 @@ export function ChatPastedTextToken({
   text,
   onExpand,
 }: ChatPastedTextTokenProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const label = formatLabel(text, t);
+  // A tap on the token, by finger or pen, asks for its preview, so it stops
+  // there: cancelling the mouse press the browser makes of it keeps the
+  // composer around the token from taking focus and the caret, which on a
+  // touch device raises the keyboard over the preview. The tap's click still
+  // reaches the card's trigger. A mouse press still places the caret, and
+  // hover opens the preview.
+  const tapStop = useTapStop('mousedown');
 
   const cardContent = (
     <div {...stylex.props(styles.preview)}>
@@ -116,7 +133,7 @@ export function ChatPastedTextToken({
       placement="above"
       alignment="start"
       hasHoverIndication={false}>
-      <Badge label={label} variant="neutral" />
+      <Badge label={label} variant="neutral" {...tapStop} />
     </HoverCard>
   );
 }

package/src/Chat/ChatSendButton.tsx

@@ -27,7 +27,13 @@ import {useChatComposerContext} from './ChatContext';
 import type {BaseProps} from '../BaseProps';
 import {composeEventHandlers, mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Chat/ChatSendButton.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Types
@@ -78,7 +84,7 @@ const styles = stylex.create({
  * ```
  */
 export function ChatSendButton(props: ChatSendButtonProps): ReactNode {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const context = useChatComposerContext();
 
   const {

package/src/Chat/ChatSystemMessage.tsx

@@ -29,6 +29,7 @@ import {
   typographyVars,
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
+import {isRenderable} from '../utils/isRenderable';
 import {Divider} from '../Divider';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
@@ -152,7 +153,9 @@ export function ChatSystemMessage({
       )}
       {...rest}>
       <span {...stylex.props(styles.content)}>
-        {icon != null && <span {...stylex.props(styles.icon)}>{icon}</span>}
+        {isRenderable(icon) && (
+          <span {...stylex.props(styles.icon)}>{icon}</span>
+        )}
         {children}
       </span>
     </div>

package/src/Chat/ChatToolCalls.tsx

@@ -39,7 +39,13 @@ import {Spinner} from '../Spinner';
 import {VisuallyHidden} from '../VisuallyHidden';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
-import {useTranslator} from '../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Chat/ChatToolCalls.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Types
@@ -363,7 +369,7 @@ const STATUS_STYLES: Record<
 };
 
 function getStatusAnnouncement(
-  t: ReturnType<typeof useTranslator>,
+  t: ReturnType<typeof useComponentTranslator>,
   status: ChatToolCallStatus,
   errorMessage?: string,
 ): string {
@@ -408,7 +414,7 @@ function CallRow({
   call: ChatToolCallItem;
   hasClippedFocusRing?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const status = call.status ?? 'complete';
   const hasDetail = call.resultDetail != null;
   const [isDetailOpen, setIsDetailOpen] = useState(false);
@@ -465,6 +471,7 @@ function CallRow({
       {call.node != null && (
         <Badge label={call.node} variant="neutral" xstyle={styles.nodePill} />
       )}
+      {/* eslint-disable-next-line @astryx/no-nullish-jsx-guard -- `target` is a string field: an empty string still marks a target */}
       {call.target != null && (
         <span {...stylex.props(styles.callLabel)}>{call.target}</span>
       )}
@@ -472,11 +479,13 @@ function CallRow({
         call.deletions != null ||
         call.stats != null) && (
         <span {...stylex.props(styles.stats)}>
+          {/* eslint-disable-next-line @astryx/no-nullish-jsx-guard -- `additions` is a count: 0 renders "+0" */}
           {call.additions != null && (
             <span {...stylex.props(styles.statsAdditions)}>
               +{call.additions}
             </span>
           )}
+          {/* eslint-disable-next-line @astryx/no-nullish-jsx-guard -- `deletions` is a count: 0 renders "-0" */}
           {call.deletions != null && (
             <span {...stylex.props(styles.statsDeletions)}>
               -{call.deletions}
@@ -485,6 +494,7 @@ function CallRow({
           {call.stats}
         </span>
       )}
+      {/* eslint-disable-next-line @astryx/no-nullish-jsx-guard -- `duration` is a string field, not a slot */}
       {call.duration != null && status === 'complete' && (
         <span {...stylex.props(styles.callDuration)}>{call.duration}</span>
       )}
@@ -544,7 +554,7 @@ function CallRow({
  * ```
  */
 export function ChatToolCalls(props: ChatToolCallsProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const {
     calls,
     label: customLabel,
@@ -657,6 +667,7 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
               <VisuallyHidden>{latestStatusAnnouncement}</VisuallyHidden>
             </span>
             <span {...stylex.props(styles.callName)}>{latestCall.name}</span>
+            {/* eslint-disable-next-line @astryx/no-nullish-jsx-guard -- `target` is a string field: an empty string still marks a target */}
             {latestCall.target != null && (
               <span {...stylex.props(styles.callLabel)}>
                 {latestCall.target}

package/src/Chat/chatMessage.vars.stylex.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import * as stylex from '@stylexjs/stylex';
+
+/**
+ * Per-message values ChatMessage sets on its article for its own slots.
+ *
+ * `avatarOffset` is the avatar's top spacing: the name row's spacing when a
+ * bubble in this message renders a name, else none. Each article sets it from
+ * its own `:has([data-chat-name])`, a parent-relative rule: a sibling-relative
+ * `:has(~ …)` in the global stylesheet makes WebKit re-check every earlier
+ * sibling on each insertion into any container, so filling one grows
+ * quadratically. A message nested in another sets its own value, so it never
+ * inherits the outer message's.
+ */
+export const chatMessageVars = stylex.defineVars({
+  avatarOffset: '0px',
+});

package/src/Chat/useSpeechRecognition.ts

@@ -14,7 +14,14 @@
  */
 
 import {useState, useCallback, useEffect, useMemo, useRef} from 'react';
-import {useLocale, useTranslator} from '../i18n';
+import {useLocale} from '../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Chat/useSpeechRecognition.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Types
@@ -259,7 +266,7 @@ function getDefaultAudioContext(): AudioContext {
 export function useSpeechRecognition(
   options: UseSpeechRecognitionOptions = {},
 ): UseSpeechRecognitionReturn {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const providerLocale = useLocale();
   const {
     lang,