@common-origin/design-system 2.19.0 → 2.20.0

package/dist/components/molecules/AgentInput/AgentInput.mjs

@@ -0,0 +1,735 @@
+'use client';
+import { __makeTemplateObject, __awaiter, __spreadArray, __generator } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useId, useCallback, useEffect, useMemo } from 'react';
+import styled$module, { keyframes, css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { IconButton } from '../../atoms/IconButton/IconButton.mjs';
+import { Typography } from '../../atoms/Typography/Typography.mjs';
+import { visuallyHidden } from '../../../lib/styleUtils.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+import { normalizeTranscript, detectSpeechRecognitionConstructor, defaultVoiceErrorMessage, mapSpeechErrorCode } from './agentInputSpeech.mjs';
+import { agentInputStateTransition } from './agentInputStateMachine.mjs';
+
+var semantic = tokens.semantic,
+  component = tokens.component;
+var DEFAULT_IDLE_HELPER = 'Ask about transactions, spending, or transfers';
+var DEFAULT_LISTENING_MESSAGE = 'Listening… speak now';
+var DEFAULT_PROCESSING_MESSAGE = 'Finishing voice input…';
+var rotateRing = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"], ["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Container = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AgentInput__Container",
+  componentId: "sc-fhl996-0"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), semantic.space[200]);
+var ControlsRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AgentInput__ControlsRow",
+  componentId: "sc-fhl996-1"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var InputShell = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AgentInput__InputShell",
+  componentId: "sc-fhl996-2"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  width: 100%;\n  padding: ", " ", " ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n\n  &:focus-within {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), semantic.space[200], semantic.space[100], semantic.space[200], semantic.space[100], semantic.space.inset.lg, component.input["default"].backgroundColor, component.input["default"].borderWidth, component.input["default"].borderColor, semantic.radius['3xl'], semantic.elevation.raised, semantic.motion.duration.moderate, semantic.motion.easing.standard, semantic.motion.duration.moderate, semantic.motion.easing.standard, component.input.focus.borderColor, component.input.focus.outline, semantic.border.focusOffset, component.input.disabled.backgroundColor, component.input.disabled.borderColor);
+var Input = /*#__PURE__*/styled.input.withConfig({
+  displayName: "AgentInput__Input",
+  componentId: "sc-fhl996-3"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n    /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n    opacity: 1;\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  flex: 1;\n  min-width: 0;\n  min-height: ", ";\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n    /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n    opacity: 1;\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), semantic.size.control.lg, semantic.typography.body, semantic.color.text["default"], component.input.placeholder.textColor, semantic.color.text.disabled);
+var InputActions = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AgentInput__InputActions",
+  componentId: "sc-fhl996-4"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n"])), semantic.space[200]);
+var CircularActionIconButton = /*#__PURE__*/styled(IconButton).withConfig({
+  displayName: "AgentInput__CircularActionIconButton",
+  componentId: "sc-fhl996-5"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), semantic.radius.full);
+var InputWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AgentInput__InputWrapper",
+  componentId: "sc-fhl996-6"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n"], ["\n  flex: 1;\n  min-width: 0;\n"])));
+var MicButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "AgentInput__MicButtonWrapper",
+  componentId: "sc-fhl996-7"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  border-radius: ", ";\n\n  & > button {\n    position: relative;\n    z-index: 1;\n  }\n"
+// Masks read only alpha, so the opaque stop is a mask value, not a colour (decision 0010).
+// eslint-disable-next-line no-restricted-syntax
+])), semantic.radius.full);
+// Masks read only alpha, so the opaque stop is a mask value, not a colour (decision 0010).
+// eslint-disable-next-line no-restricted-syntax
+var ringMask = css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)))"], ["radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)))"])));
+var MicListeningRing = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "AgentInput__MicListeningRing",
+  componentId: "sc-fhl996-8"
+})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-1 * ", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: ", ";\n  -webkit-mask: ", ";\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"], ["\n  --ring-thickness: ", ";\n  position: absolute;\n  inset: calc(-1 * ", " - ", ");\n  border-radius: ", ";\n  pointer-events: none;\n  z-index: 0;\n  background: conic-gradient(\n    from 0deg,\n    ", " 0deg,\n    ", " 110deg,\n    ", " 210deg,\n    ", " 300deg,\n    ", " 360deg\n  );\n  mask: ", ";\n  -webkit-mask: ", ";\n\n  ", "\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n"])), semantic.border.width.thick, semantic.space[100], semantic.border.focusOffset, semantic.radius.full, semantic.color.fill['accent-muted'], semantic.color.fill.accent, semantic.color.fill['accent-hover'], semantic.color.fill.accent, semantic.color.fill['accent-muted'], ringMask, ringMask, function (_a) {
+  var $reducedMotion = _a.$reducedMotion;
+  return !$reducedMotion && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      animation: ", " 1300ms linear infinite;\n    "], ["\n      animation: ", " 1300ms linear infinite;\n    "])), rotateRing);
+});
+var StatusRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AgentInput__StatusRow",
+  componentId: "sc-fhl996-9"
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  min-height: ", ";\n"])), semantic.space[300], semantic.space[600]);
+var StatusText = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "AgentInput__StatusText",
+  componentId: "sc-fhl996-10"
+})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic.space[500]);
+var StatusAnnouncement = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AgentInput__StatusAnnouncement",
+  componentId: "sc-fhl996-11"
+})(templateObject_15 || (templateObject_15 = __makeTemplateObject([""], [""])));
+var MeterContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AgentInput__MeterContainer",
+  componentId: "sc-fhl996-12"
+})(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"], ["\n  display: inline-flex;\n  align-items: flex-end;\n  gap: ", ";\n  height: ", ";\n"])), semantic.space[100], semantic.space[400]);
+var MeterBar = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "AgentInput__MeterBar",
+  componentId: "sc-fhl996-13"
+})(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"], ["\n  width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  height: ", ";\n  transition: height ", " ", ";\n"])), semantic.space[100], semantic.radius.xs, semantic.color.fill.accent, function (_a) {
+  var $height = _a.$height;
+  return "".concat($height * 100, "%");
+}, semantic.motion.duration.fast, semantic.motion.easing.decelerate);
+var VisuallyHiddenLabel = /*#__PURE__*/styled.label.withConfig({
+  displayName: "AgentInput__VisuallyHiddenLabel",
+  componentId: "sc-fhl996-14"
+})(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
+function getInitialState(hasText) {
+  return hasText ? 'typing' : 'idle';
+}
+function createMeterBars(level) {
+  var clampedLevel = Math.max(0, Math.min(level, 1));
+  return [0.25 + clampedLevel * 0.75, 0.2 + clampedLevel * 0.6, 0.3 + clampedLevel * 0.7, 0.2 + clampedLevel * 0.5];
+}
+var AgentInput = function AgentInput(_a) {
+  var value = _a.value,
+    _b = _a.defaultValue,
+    defaultValue = _b === void 0 ? '' : _b,
+    onChange = _a.onChange,
+    onSubmit = _a.onSubmit,
+    _c = _a.placeholder,
+    placeholder = _c === void 0 ? 'Ask a question' : _c,
+    _d = _a.disabled,
+    disabled = _d === void 0 ? false : _d,
+    isSubmitting = _a.isSubmitting,
+    _e = _a.enableVoice,
+    enableVoice = _e === void 0 ? true : _e,
+    _f = _a.autoSubmitOnVoiceFinal,
+    autoSubmitOnVoiceFinal = _f === void 0 ? true : _f,
+    _g = _a.voiceLanguage,
+    voiceLanguage = _g === void 0 ? 'en-AU' : _g,
+    _h = _a.noSpeechTimeoutMs,
+    noSpeechTimeoutMs = _h === void 0 ? 8000 : _h,
+    onVoiceStart = _a.onVoiceStart,
+    onVoiceStop = _a.onVoiceStop,
+    onVoiceInterim = _a.onVoiceInterim,
+    onVoiceFinal = _a.onVoiceFinal,
+    onVoiceError = _a.onVoiceError,
+    statusMessage = _a.statusMessage,
+    errorMessage = _a.errorMessage,
+    _j = _a.label,
+    label = _j === void 0 ? 'Agent input' : _j,
+    dataTestId = _a["data-testid"];
+  var isControlled = value !== undefined;
+  var _k = useState(defaultValue),
+    internalValue = _k[0],
+    setInternalValue = _k[1];
+  var _l = useState(getInitialState(normalizeTranscript(value !== null && value !== void 0 ? value : defaultValue).length > 0)),
+    machineState = _l[0],
+    setMachineState = _l[1];
+  var _m = useState(''),
+    interimTranscript = _m[0],
+    setInterimTranscript = _m[1];
+  var _o = useState(false),
+    internalSubmitting = _o[0],
+    setInternalSubmitting = _o[1];
+  var _p = useState(undefined),
+    internalErrorMessage = _p[0],
+    setInternalErrorMessage = _p[1];
+  var _q = useState(false),
+    voiceSupported = _q[0],
+    setVoiceSupported = _q[1];
+  var _r = useState(false),
+    prefersReducedMotion = _r[0],
+    setPrefersReducedMotion = _r[1];
+  var _s = useState(0),
+    meterLevel = _s[0],
+    setMeterLevel = _s[1];
+  var recognitionRef = useRef(null);
+  var noSpeechTimeoutRef = useRef(null);
+  var isStoppingRef = useRef(false);
+  var hasSubmittedVoiceFinalRef = useRef(false);
+  var audioStreamRef = useRef(null);
+  var audioContextRef = useRef(null);
+  var meterRafRef = useRef(null);
+  var inputId = useId();
+  var statusId = "".concat(inputId, "-status");
+  var currentValue = isControlled ? value !== null && value !== void 0 ? value : '' : internalValue;
+  var hasText = normalizeTranscript(currentValue).length > 0;
+  var effectiveSubmitting = isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : internalSubmitting;
+  var effectiveState = disabled ? 'disabled' : machineState;
+  var isListening = effectiveState === 'listening';
+  var hasVoice = enableVoice && voiceSupported;
+  var updateMachineState = useCallback(function (event) {
+    setMachineState(function (previousState) {
+      return agentInputStateTransition(previousState, event);
+    });
+  }, []);
+  var updateValue = useCallback(function (nextValue) {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+  }, [isControlled, onChange]);
+  var clearNoSpeechTimeout = useCallback(function () {
+    if (noSpeechTimeoutRef.current) {
+      window.clearTimeout(noSpeechTimeoutRef.current);
+      noSpeechTimeoutRef.current = null;
+    }
+  }, []);
+  var stopMeter = useCallback(function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (meterRafRef.current) {
+              window.cancelAnimationFrame(meterRafRef.current);
+              meterRafRef.current = null;
+            }
+            if (audioStreamRef.current) {
+              audioStreamRef.current.getTracks().forEach(function (track) {
+                return track.stop();
+              });
+              audioStreamRef.current = null;
+            }
+            if (!audioContextRef.current) return [3 /*break*/, 2];
+            return [4 /*yield*/, audioContextRef.current.close()];
+          case 1:
+            _a.sent();
+            audioContextRef.current = null;
+            _a.label = 2;
+          case 2:
+            setMeterLevel(0);
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, []);
+  var startMeter = useCallback(function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var stream, audioContext, analyser_1, source, data_1, _loop_;
+      var _b;
+      return __generator(this, function (_c) {
+        switch (_c.label) {
+          case 0:
+            if (prefersReducedMotion || !((_b = navigator === null || navigator === void 0 ? void 0 : navigator.mediaDevices) === null || _b === void 0 ? void 0 : _b.getUserMedia)) {
+              return [2 /*return*/];
+            }
+            _c.label = 1;
+          case 1:
+            _c.trys.push([1, 3,, 4]);
+            return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
+              audio: true
+            })];
+          case 2:
+            stream = _c.sent();
+            audioContext = new AudioContext();
+            analyser_1 = audioContext.createAnalyser();
+            analyser_1.fftSize = 256;
+            source = audioContext.createMediaStreamSource(stream);
+            source.connect(analyser_1);
+            data_1 = new Uint8Array(analyser_1.frequencyBinCount);
+            audioStreamRef.current = stream;
+            audioContextRef.current = audioContext;
+            _loop_ = function loop_1() {
+              analyser_1.getByteTimeDomainData(data_1);
+              var sum = 0;
+              for (var index = 0; index < data_1.length; index += 1) {
+                var centered = data_1[index] / 128 - 1;
+                sum += centered * centered;
+              }
+              var rms = Math.sqrt(sum / data_1.length);
+              var nextLevel = Math.max(0.05, Math.min(rms * 3, 1));
+              setMeterLevel(nextLevel);
+              meterRafRef.current = window.requestAnimationFrame(_loop_);
+            };
+            meterRafRef.current = window.requestAnimationFrame(_loop_);
+            return [3 /*break*/, 4];
+          case 3:
+            _c.sent();
+            setMeterLevel(0);
+            return [3 /*break*/, 4];
+          case 4:
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, [prefersReducedMotion]);
+  var emitVoiceError = useCallback(function (code, fallback) {
+    var message = fallback !== null && fallback !== void 0 ? fallback : defaultVoiceErrorMessage(code);
+    setInternalErrorMessage(message);
+    updateMachineState({
+      type: 'VOICE_ERROR'
+    });
+    onVoiceError === null || onVoiceError === void 0 ? void 0 : onVoiceError({
+      code: code,
+      message: message
+    });
+  }, [onVoiceError, updateMachineState]);
+  var submitPayload = useCallback(function (rawText, source) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var text;
+      return __generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            text = normalizeTranscript(rawText);
+            if (!text || disabled || effectiveSubmitting) {
+              return [2 /*return*/];
+            }
+            updateMachineState({
+              type: 'SUBMIT'
+            });
+            setInternalErrorMessage(undefined);
+            if (isSubmitting === undefined) {
+              setInternalSubmitting(true);
+            }
+            _b.label = 1;
+          case 1:
+            _b.trys.push([1, 3, 4, 5]);
+            return [4 /*yield*/, onSubmit({
+              text: text,
+              source: source,
+              timestamp: new Date().toISOString()
+            })];
+          case 2:
+            _b.sent();
+            updateMachineState({
+              type: 'SUBMIT_SUCCESS'
+            });
+            setInterimTranscript('');
+            updateValue('');
+            return [3 /*break*/, 5];
+          case 3:
+            _b.sent();
+            updateMachineState({
+              type: 'SUBMIT_ERROR'
+            });
+            if (source === 'voice-final') {
+              updateValue(text);
+            }
+            setInternalErrorMessage('Submission failed. Please try again.');
+            return [3 /*break*/, 5];
+          case 4:
+            if (isSubmitting === undefined) {
+              setInternalSubmitting(false);
+            }
+            return [7 /*endfinally*/];
+          case 5:
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, [disabled, effectiveSubmitting, isSubmitting, onSubmit, updateMachineState, updateValue]);
+  var stopListening = useCallback(function (emitStopEvent_1) {
+    var args_1 = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+      args_1[_i - 1] = arguments[_i];
+    }
+    return __awaiter(void 0, __spreadArray([emitStopEvent_1], args_1, true), void 0, function (emitStopEvent, preserveState) {
+      if (preserveState === void 0) {
+        preserveState = false;
+      }
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            isStoppingRef.current = true;
+            clearNoSpeechTimeout();
+            setInterimTranscript('');
+            if (recognitionRef.current) {
+              try {
+                recognitionRef.current.stop();
+              } catch (_b) {
+                // no-op
+              }
+            }
+            return [4 /*yield*/, stopMeter()];
+          case 1:
+            _a.sent();
+            if (emitStopEvent) {
+              onVoiceStop === null || onVoiceStop === void 0 ? void 0 : onVoiceStop();
+            }
+            if (!preserveState) {
+              updateMachineState({
+                type: 'MIC_STOP',
+                hasText: hasText
+              });
+            }
+            isStoppingRef.current = false;
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, [clearNoSpeechTimeout, hasText, onVoiceStop, stopMeter, updateMachineState]);
+  var onNoSpeechTimeout = useCallback(function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var message;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            clearNoSpeechTimeout();
+            updateMachineState({
+              type: 'TIMEOUT_NO_SPEECH'
+            });
+            message = defaultVoiceErrorMessage('no-speech');
+            setInternalErrorMessage(message);
+            onVoiceError === null || onVoiceError === void 0 ? void 0 : onVoiceError({
+              code: 'no-speech',
+              message: message
+            });
+            return [4 /*yield*/, stopListening(true, true)];
+          case 1:
+            _a.sent();
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, [clearNoSpeechTimeout, onVoiceError, stopListening, updateMachineState]);
+  var beginListening = useCallback(function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      return __generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            if (!recognitionRef.current || disabled || effectiveSubmitting) {
+              return [2 /*return*/];
+            }
+            setInternalErrorMessage(undefined);
+            hasSubmittedVoiceFinalRef.current = false;
+            _b.label = 1;
+          case 1:
+            _b.trys.push([1, 3,, 4]);
+            recognitionRef.current.start();
+            updateMachineState({
+              type: 'MIC_START'
+            });
+            onVoiceStart === null || onVoiceStart === void 0 ? void 0 : onVoiceStart();
+            clearNoSpeechTimeout();
+            noSpeechTimeoutRef.current = window.setTimeout(onNoSpeechTimeout, noSpeechTimeoutMs);
+            return [4 /*yield*/, startMeter()];
+          case 2:
+            _b.sent();
+            return [3 /*break*/, 4];
+          case 3:
+            _b.sent();
+            emitVoiceError('unknown');
+            return [3 /*break*/, 4];
+          case 4:
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, [clearNoSpeechTimeout, disabled, effectiveSubmitting, emitVoiceError, noSpeechTimeoutMs, onNoSpeechTimeout, onVoiceStart, startMeter, updateMachineState]);
+  useEffect(function () {
+    var constructor = detectSpeechRecognitionConstructor(window);
+    setVoiceSupported(Boolean(constructor));
+    if (!enableVoice || !constructor) {
+      return;
+    }
+    var recognition = new constructor();
+    recognition.lang = voiceLanguage;
+    recognition.interimResults = true;
+    recognition.continuous = false;
+    recognition.onresult = function (event) {
+      return __awaiter(void 0, void 0, void 0, function () {
+        var interim, finalText, index, result, normalizedInterim, normalizedFinal;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              clearNoSpeechTimeout();
+              noSpeechTimeoutRef.current = window.setTimeout(onNoSpeechTimeout, noSpeechTimeoutMs);
+              interim = '';
+              finalText = '';
+              for (index = event.resultIndex; index < event.results.length; index += 1) {
+                result = event.results[index];
+                if (!result || !result[0]) continue;
+                if (result.isFinal) {
+                  finalText += " ".concat(result[0].transcript);
+                } else {
+                  interim += " ".concat(result[0].transcript);
+                }
+              }
+              normalizedInterim = normalizeTranscript(interim);
+              setInterimTranscript(normalizedInterim);
+              updateMachineState({
+                type: 'VOICE_INTERIM'
+              });
+              if (normalizedInterim) {
+                onVoiceInterim === null || onVoiceInterim === void 0 ? void 0 : onVoiceInterim(normalizedInterim);
+              }
+              normalizedFinal = normalizeTranscript(finalText);
+              if (!normalizedFinal || hasSubmittedVoiceFinalRef.current) {
+                return [2 /*return*/];
+              }
+              hasSubmittedVoiceFinalRef.current = true;
+              updateMachineState({
+                type: 'VOICE_FINAL'
+              });
+              setInterimTranscript('');
+              onVoiceFinal === null || onVoiceFinal === void 0 ? void 0 : onVoiceFinal(normalizedFinal);
+              return [4 /*yield*/, stopMeter()];
+            case 1:
+              _a.sent();
+              if (!autoSubmitOnVoiceFinal) return [3 /*break*/, 3];
+              return [4 /*yield*/, submitPayload(normalizedFinal, 'voice-final')];
+            case 2:
+              _a.sent();
+              return [3 /*break*/, 4];
+            case 3:
+              updateValue(normalizedFinal);
+              updateMachineState({
+                type: 'MIC_STOP',
+                hasText: true
+              });
+              _a.label = 4;
+            case 4:
+              return [2 /*return*/];
+          }
+        });
+      });
+    };
+    recognition.onerror = function (event) {
+      return __awaiter(void 0, void 0, void 0, function () {
+        var mappedCode;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              mappedCode = mapSpeechErrorCode(event.error);
+              emitVoiceError(mappedCode);
+              return [4 /*yield*/, stopListening(true, true)];
+            case 1:
+              _a.sent();
+              return [2 /*return*/];
+          }
+        });
+      });
+    };
+    recognition.onend = function () {
+      return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              if (isStoppingRef.current) return [2 /*return*/];
+              clearNoSpeechTimeout();
+              return [4 /*yield*/, stopMeter()];
+            case 1:
+              _a.sent();
+              if (!hasSubmittedVoiceFinalRef.current) {
+                updateMachineState({
+                  type: 'MIC_STOP',
+                  hasText: hasText
+                });
+              }
+              return [2 /*return*/];
+          }
+        });
+      });
+    };
+    recognitionRef.current = recognition;
+    return function () {
+      var _a;
+      clearNoSpeechTimeout();
+      (_a = recognitionRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+      recognitionRef.current = null;
+      stopMeter();
+    };
+  }, [autoSubmitOnVoiceFinal, clearNoSpeechTimeout, emitVoiceError, enableVoice, hasText, noSpeechTimeoutMs, onNoSpeechTimeout, onVoiceFinal, onVoiceInterim, stopListening, stopMeter, submitPayload, updateMachineState, updateValue, voiceLanguage]);
+  useEffect(function () {
+    var mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    var sync = function sync() {
+      return setPrefersReducedMotion(mediaQuery.matches);
+    };
+    sync();
+    mediaQuery.addEventListener('change', sync);
+    return function () {
+      return mediaQuery.removeEventListener('change', sync);
+    };
+  }, []);
+  useEffect(function () {
+    if (effectiveState === 'error' && !internalErrorMessage && !errorMessage) {
+      updateMachineState({
+        type: 'RESET_ERROR',
+        hasText: hasText
+      });
+    }
+  }, [effectiveState, errorMessage, hasText, internalErrorMessage, updateMachineState]);
+  useEffect(function () {
+    if (!disabled && (machineState === 'idle' || machineState === 'typing')) {
+      updateMachineState({
+        type: 'INPUT_CHANGE',
+        hasText: hasText
+      });
+    }
+  }, [disabled, hasText, machineState, updateMachineState]);
+  var displayedValue = useMemo(function () {
+    if (!interimTranscript) {
+      return currentValue;
+    }
+    return normalizeTranscript([currentValue, interimTranscript].filter(Boolean).join(' '));
+  }, [currentValue, interimTranscript]);
+  var onTextChange = function onTextChange(event) {
+    updateValue(event.target.value);
+    if (effectiveState === 'error') {
+      setInternalErrorMessage(undefined);
+      updateMachineState({
+        type: 'RESET_ERROR',
+        hasText: normalizeTranscript(event.target.value).length > 0
+      });
+    }
+  };
+  var onInputKeyDown = function onInputKeyDown(event) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (!(event.key === 'Escape' && isListening)) return [3 /*break*/, 2];
+            event.preventDefault();
+            return [4 /*yield*/, stopListening(true)];
+          case 1:
+            _a.sent();
+            return [2 /*return*/];
+          case 2:
+            if (!(event.key === 'Enter')) return [3 /*break*/, 4];
+            event.preventDefault();
+            return [4 /*yield*/, submitPayload(currentValue, 'text')];
+          case 3:
+            _a.sent();
+            _a.label = 4;
+          case 4:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  var onMicToggle = function onMicToggle() {
+    return __awaiter(void 0, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (!hasVoice) return [2 /*return*/];
+            if (!isListening) return [3 /*break*/, 2];
+            return [4 /*yield*/, stopListening(true)];
+          case 1:
+            _a.sent();
+            return [2 /*return*/];
+          case 2:
+            return [4 /*yield*/, beginListening()];
+          case 3:
+            _a.sent();
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  var statusByState = {
+    idle: statusMessage || DEFAULT_IDLE_HELPER,
+    typing: statusMessage || DEFAULT_IDLE_HELPER,
+    listening: statusMessage || DEFAULT_LISTENING_MESSAGE,
+    processingFinalTranscript: statusMessage || DEFAULT_PROCESSING_MESSAGE,
+    submitting: statusMessage || 'Submitting…',
+    error: errorMessage || internalErrorMessage || 'Voice input failed. Try again.',
+    disabled: statusMessage || DEFAULT_IDLE_HELPER
+  };
+  var unsupportedMessage = defaultVoiceErrorMessage('not-supported');
+  var shouldShowUnsupported = enableVoice && !hasVoice;
+  var resolvedStatus = shouldShowUnsupported ? unsupportedMessage : statusByState[effectiveState];
+  var isStatusError = effectiveState === 'error' || shouldShowUnsupported;
+  var meterBars = createMeterBars(meterLevel);
+  var sendDisabled = disabled || effectiveSubmitting || normalizeTranscript(currentValue).length === 0;
+  return jsxs(Container, {
+    "data-testid": dataTestId,
+    children: [jsx(VisuallyHiddenLabel, {
+      htmlFor: inputId,
+      children: label
+    }), jsx(ControlsRow, {
+      children: jsx(InputWrapper, {
+        children: jsxs(InputShell, {
+          "data-disabled": disabled || effectiveSubmitting,
+          children: [jsx(Input, {
+            id: inputId,
+            type: "text",
+            "aria-label": label,
+            value: displayedValue,
+            onChange: onTextChange,
+            onKeyDown: onInputKeyDown,
+            placeholder: placeholder,
+            disabled: disabled || effectiveSubmitting,
+            readOnly: isListening,
+            "aria-describedby": statusId
+          }), jsxs(InputActions, {
+            children: [hasVoice && jsxs(MicButtonWrapper, {
+              "$isListening": isListening,
+              "$reducedMotion": prefersReducedMotion,
+              children: [isListening && jsx(MicListeningRing, {
+                "$reducedMotion": prefersReducedMotion,
+                "aria-hidden": "true",
+                "data-testid": "agent-input-listening-ring",
+                "data-animated": prefersReducedMotion ? 'false' : 'true'
+              }), jsx(CircularActionIconButton, {
+                variant: "naked",
+                size: "medium",
+                iconName: 'mic',
+                onClick: onMicToggle,
+                "aria-pressed": isListening,
+                "aria-label": isListening ? 'Stop voice input' : 'Start voice input',
+                disabled: disabled || effectiveSubmitting,
+                type: "button"
+              })]
+            }), jsx(CircularActionIconButton, {
+              variant: "secondary",
+              size: "medium",
+              iconName: "directionUp",
+              onClick: function onClick() {
+                return submitPayload(currentValue, 'text');
+              },
+              disabled: sendDisabled,
+              "aria-label": "Send message",
+              type: "button"
+            })]
+          })]
+        })
+      })
+    }), jsxs(StatusRow, {
+      children: [jsx(StatusText, {
+        "$isError": isStatusError,
+        children: jsx(StatusAnnouncement, {
+          id: statusId,
+          role: "status",
+          "aria-live": "polite",
+          "aria-atomic": "true",
+          children: jsx(Typography, {
+            variant: "small",
+            color: isStatusError ? 'error' : 'subdued',
+            children: resolvedStatus
+          })
+        })
+      }), isListening && !prefersReducedMotion && jsx(MeterContainer, {
+        "aria-hidden": "true",
+        children: meterBars.map(function (barHeight, index) {
+          return jsx(MeterBar, {
+            "$height": barHeight
+          }, "meter-".concat(index));
+        })
+      })]
+    })]
+  });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
+
+export { AgentInput };
+//# sourceMappingURL=AgentInput.mjs.map