@common-origin/design-system 2.19.0 → 2.21.0

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

@@ -0,0 +1,1099 @@
+'use client';
+import { __makeTemplateObject, __awaiter, __spreadArray, __generator } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useId, useEffect, useCallback, useImperativeHandle, useMemo, useLayoutEffect } from 'react';
+import styled$module, { keyframes, css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { Button } from '../../atoms/Button/Button.mjs';
+import '../../atoms/Chip/shared/ChipBase.mjs';
+import '../../atoms/Icon/Icon.mjs';
+import { SuggestionChip } from '../../atoms/Chip/SuggestionChip.mjs';
+import { IconButton } from '../../atoms/IconButton/IconButton.mjs';
+import { Typography } from '../../atoms/Typography/Typography.mjs';
+import { reducedMotion, visuallyHidden } from '../../../lib/styleUtils.mjs';
+import { usePresence, EXIT_DURATION_MS, useInert } from '../../../lib/usePresence.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+import { normalizeTranscript, normalizeMessage, detectSpeechRecognitionConstructor, defaultVoiceErrorMessage, mapSpeechErrorCode } from './agentInputSpeech.mjs';
+import { agentInputStateTransition } from './agentInputStateMachine.mjs';
+
+var semantic = tokens.semantic,
+  component = tokens.component;
+var DEFAULT_LISTENING_MESSAGE = 'Listening… speak now';
+var DEFAULT_PROCESSING_MESSAGE = 'Finishing voice input…';
+// The counter appears from this share of maxLength
+var COUNTER_THRESHOLD = 0.8;
+// Layout effects warn during server rendering in React 18
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+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({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "AgentInput__Container",
+  componentId: "sc-fhl996-0"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n\n  ", "\n"])), semantic.space[200], function (_a) {
+  var $docked = _a.$docked;
+  return $docked && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      position: sticky;\n      bottom: 0;\n      z-index: ", ";\n      /* The band hides content scrolling past the field and status line (decisions 0006, 0031) */\n      background-color: ", ";\n      padding-top: ", ";\n      /* Clears the home indicator; zero unless the page sets viewport-fit=cover */\n      padding-bottom: env(safe-area-inset-bottom, 0px);\n    "], ["\n      position: sticky;\n      bottom: 0;\n      z-index: ", ";\n      /* The band hides content scrolling past the field and status line (decisions 0006, 0031) */\n      background-color: ", ";\n      padding-top: ", ";\n      /* Clears the home indicator; zero unless the page sets viewport-fit=cover */\n      padding-bottom: env(safe-area-inset-bottom, 0px);\n    "])), semantic.layer.sticky, semantic.surface.base, semantic.space[300]);
+});
+var ControlsRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AgentInput__ControlsRow",
+  componentId: "sc-fhl996-1"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var InputShell = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AgentInput__InputShell",
+  componentId: "sc-fhl996-2"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  /* Actions sit beside the last line as the field grows */\n  align-items: flex-end;\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  /* Actions sit beside the last line as the field grows */\n  align-items: flex-end;\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"
+// One row is a control-height field; it grows with its content to six rows, then scrolls.
+// The height is set from scrollHeight in resizeField; 1lh is the body line height.
+])), 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);
+// One row is a control-height field; it grows with its content to six rows, then scrolls.
+// The height is set from scrollHeight in resizeField; 1lh is the body line height.
+var Input = /*#__PURE__*/styled.textarea.withConfig({
+  displayName: "AgentInput__Input",
+  componentId: "sc-fhl996-3"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: block;\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  height: ", ";\n  min-height: ", ";\n  max-height: calc(5lh + ", ");\n  margin: 0;\n  padding: calc((", " - 1lh) / 2) 0;\n  resize: none;\n  overflow-y: hidden;\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  display: block;\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  height: ", ";\n  min-height: ", ";\n  max-height: calc(5lh + ", ");\n  margin: 0;\n  padding: calc((", " - 1lh) / 2) 0;\n  resize: none;\n  overflow-y: hidden;\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.size.control.lg, semantic.size.control.lg, 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_7 || (templateObject_7 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  /* Centres the buttons on a one-row field, and keeps them level with the last line as it grows */\n  padding-bottom: calc((", " - ", ") / 2);\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  /* Centres the buttons on a one-row field, and keeps them level with the last line as it grows */\n  padding-bottom: calc((", " - ", ") / 2);\n"])), semantic.space[200], semantic.size.control.lg, semantic.size.control.md);
+var CircularActionIconButton = /*#__PURE__*/styled(IconButton).withConfig({
+  displayName: "AgentInput__CircularActionIconButton",
+  componentId: "sc-fhl996-5"
+})(templateObject_8 || (templateObject_8 = __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_9 || (templateObject_9 = __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_10 || (templateObject_10 = __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_11 || (templateObject_11 = __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_13 || (templateObject_13 = __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"
+// Maximum suggestions shown (decision 0046, #280)
+])), 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_12 || (templateObject_12 = __makeTemplateObject(["\n      animation: ", " 1300ms linear infinite;\n    "], ["\n      animation: ", " 1300ms linear infinite;\n    "])), rotateRing);
+});
+// Maximum suggestions shown (decision 0046, #280)
+var MAX_SUGGESTIONS = 3;
+var regionEnter = keyframes(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n"])), semantic.motion.distance.sm);
+var regionFadeIn = keyframes(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n"
+// Leaving content fades, then its space closes, as with Alert's dismiss (decision 0015). A grid
+// row from 1fr to 0fr collapses to the content's own height without measuring it.
+])));
+// Leaving content fades, then its space closes, as with Alert's dismiss (decision 0015). A grid
+// row from 1fr to 0fr collapses to the content's own height without measuring it.
+var regionFadeThenCollapse = keyframes(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  0%, 50% {\n    grid-template-rows: 1fr;\n  }\n  0% {\n    opacity: 1;\n  }\n  50%, 100% {\n    opacity: 0;\n  }\n  100% {\n    grid-template-rows: 0fr;\n  }\n"], ["\n  0%, 50% {\n    grid-template-rows: 1fr;\n  }\n  0% {\n    opacity: 1;\n  }\n  50%, 100% {\n    opacity: 0;\n  }\n  100% {\n    grid-template-rows: 0fr;\n  }\n"])));
+var regionFadeOut = keyframes(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  to {\n    opacity: 0;\n  }\n"], ["\n  to {\n    opacity: 0;\n  }\n"
+// One part of the region above the field: the review bar or the suggestions
+])));
+// One part of the region above the field: the review bar or the suggestions
+var RegionItem = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "AgentInput__RegionItem",
+  componentId: "sc-fhl996-9"
+})(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: 1fr;\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation-name: ", ";\n  }\n\n  ", "\n"], ["\n  display: grid;\n  grid-template-rows: 1fr;\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation-name: ", ";\n  }\n\n  ", "\n"
+// Clips while the row collapses. Its bottom padding is the space to the next part, so it closes too.
+])), regionEnter, semantic.motion.duration.moderate, semantic.motion.easing.decelerate, reducedMotion, regionFadeIn, function (_a) {
+  var $exiting = _a.$exiting,
+    $reducedExit = _a.$reducedExit;
+  return $exiting && css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      pointer-events: none;\n      animation: ", ";\n    "], ["\n      pointer-events: none;\n      animation: ", ";\n    "])), $reducedExit ? css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), regionFadeOut, semantic.motion.duration.fast, semantic.motion.easing.accelerate) : css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["", " calc(2 * ", ") ", " forwards"], ["", " calc(2 * ", ") ", " forwards"])), regionFadeThenCollapse, semantic.motion.duration.fast, semantic.motion.easing.accelerate));
+});
+// Clips while the row collapses. Its bottom padding is the space to the next part, so it closes too.
+var RegionItemContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AgentInput__RegionItemContent",
+  componentId: "sc-fhl996-10"
+})(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  min-height: 0;\n  overflow: hidden;\n  padding-bottom: ", ";\n  padding-left: ", ";\n"], ["\n  min-height: 0;\n  overflow: hidden;\n  padding-bottom: ", ";\n  padding-left: ", ";\n"
+// The summary first, then the actions, left-aligned after it; they wrap below on narrow screens (0021)
+])), semantic.space[200], semantic.space[500]);
+// The summary first, then the actions, left-aligned after it; they wrap below on narrow screens (0021)
+var ReviewBar = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AgentInput__ReviewBar",
+  componentId: "sc-fhl996-11"
+})(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: ", ";\n  row-gap: ", ";\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: ", ";\n  row-gap: ", ";\n"])), semantic.space[300], semantic.space[200]);
+var ReviewActions = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AgentInput__ReviewActions",
+  componentId: "sc-fhl996-12"
+})(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n"])), semantic.space[200]);
+var SuggestionList = /*#__PURE__*/styled.ul.withConfig({
+  displayName: "AgentInput__SuggestionList",
+  componentId: "sc-fhl996-13"
+})(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  & > li {\n    max-width: 100%;\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  & > li {\n    max-width: 100%;\n  }\n"])), semantic.space[200]);
+var StatusRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AgentInput__StatusRow",
+  componentId: "sc-fhl996-14"
+})(templateObject_26 || (templateObject_26 = __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-15"
+})(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic.space[500]);
+var StatusAnnouncement = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AgentInput__StatusAnnouncement",
+  componentId: "sc-fhl996-16"
+})(templateObject_28 || (templateObject_28 = __makeTemplateObject([""], [""])));
+var StatusEnd = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AgentInput__StatusEnd",
+  componentId: "sc-fhl996-17"
+})(templateObject_29 || (templateObject_29 = __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[300]);
+var VisuallyHidden = /*#__PURE__*/styled.span.withConfig({
+  displayName: "AgentInput__VisuallyHidden",
+  componentId: "sc-fhl996-18"
+})(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
+var MeterContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AgentInput__MeterContainer",
+  componentId: "sc-fhl996-19"
+})(templateObject_31 || (templateObject_31 = __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-20"
+})(templateObject_32 || (templateObject_32 = __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-21"
+})(templateObject_33 || (templateObject_33 = __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];
+}
+// Declared separately so the react-hooks lint rules analyse it (they skip functions inline in forwardRef)
+// Development builds warn about props that break the pattern. Bundlers replace process.env.NODE_ENV
+// with a literal; without a bundler, a browser has no process, so reading it throws.
+function readIsProduction() {
+  try {
+    return process.env.NODE_ENV === 'production';
+  } catch (_a) {
+    return false;
+  }
+}
+var isProduction = readIsProduction();
+// A part of the region above the field. It stays mounted while it fades out and its space closes.
+function RegionPart(_a) {
+  var show = _a.show,
+    reducedExit = _a.reducedExit,
+    children = _a.children;
+  var _b = usePresence(show, reducedExit ? EXIT_DURATION_MS : EXIT_DURATION_MS * 2),
+    isPresent = _b.isPresent,
+    isExiting = _b.isExiting;
+  var ref = useRef(null);
+  // Leaving controls drop out of the tab order and can't be activated
+  useInert(ref, isExiting);
+  if (!isPresent) return null;
+  return jsx(RegionItem, {
+    ref: ref,
+    "$exiting": isExiting,
+    "$reducedExit": reducedExit,
+    "aria-hidden": isExiting || undefined,
+    children: jsx(RegionItemContent, {
+      children: children
+    })
+  });
+}
+function AgentInputWithRef(_a, ref) {
+  var _this = this;
+  var _b;
+  var value = _a.value,
+    _c = _a.defaultValue,
+    defaultValue = _c === void 0 ? '' : _c,
+    onChange = _a.onChange,
+    onSubmit = _a.onSubmit,
+    onStop = _a.onStop,
+    review = _a.review,
+    suggestions = _a.suggestions,
+    onSuggestionSelect = _a.onSuggestionSelect,
+    _d = _a.placeholder,
+    placeholder = _d === void 0 ? 'Ask a question' : _d,
+    maxLength = _a.maxLength,
+    _e = _a.disabled,
+    disabled = _e === void 0 ? false : _e,
+    isSubmitting = _a.isSubmitting,
+    _f = _a.enableVoice,
+    enableVoice = _f === void 0 ? true : _f,
+    _g = _a.autoSubmitOnVoiceFinal,
+    autoSubmitOnVoiceFinal = _g === void 0 ? true : _g,
+    _h = _a.voiceLanguage,
+    voiceLanguage = _h === void 0 ? 'en-AU' : _h,
+    _j = _a.noSpeechTimeoutMs,
+    noSpeechTimeoutMs = _j === void 0 ? 8000 : _j,
+    onVoiceStart = _a.onVoiceStart,
+    onVoiceStop = _a.onVoiceStop,
+    onVoiceInterim = _a.onVoiceInterim,
+    onVoiceFinal = _a.onVoiceFinal,
+    onVoiceError = _a.onVoiceError,
+    _k = _a.helperText,
+    helperText = _k === void 0 ? '' : _k,
+    statusMessage = _a.statusMessage,
+    errorMessage = _a.errorMessage,
+    _l = _a.label,
+    label = _l === void 0 ? 'Agent input' : _l,
+    _m = _a.docked,
+    docked = _m === void 0 ? false : _m,
+    dataTestId = _a["data-testid"];
+  var isControlled = value !== undefined;
+  var _o = useState(defaultValue),
+    internalValue = _o[0],
+    setInternalValue = _o[1];
+  var _p = useState(getInitialState(normalizeTranscript(value !== null && value !== void 0 ? value : defaultValue).length > 0)),
+    machineState = _p[0],
+    setMachineState = _p[1];
+  var _q = useState(''),
+    interimTranscript = _q[0],
+    setInterimTranscript = _q[1];
+  var _r = useState(false),
+    internalSubmitting = _r[0],
+    setInternalSubmitting = _r[1];
+  var _s = useState(undefined),
+    internalErrorMessage = _s[0],
+    setInternalErrorMessage = _s[1];
+  var _t = useState(false),
+    voiceSupported = _t[0],
+    setVoiceSupported = _t[1];
+  var _u = useState(false),
+    prefersReducedMotion = _u[0],
+    setPrefersReducedMotion = _u[1];
+  var _v = useState(0),
+    meterLevel = _v[0],
+    setMeterLevel = _v[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 inputRef = useRef(null);
+  var inputId = useId();
+  var statusId = "".concat(inputId, "-status");
+  var counterId = "".concat(inputId, "-counter");
+  var currentValue = isControlled ? value !== null && value !== void 0 ? value : '' : internalValue;
+  // Read after onSubmit settles, when the closure's value may be stale
+  var currentValueRef = useRef(currentValue);
+  useEffect(function () {
+    currentValueRef.current = currentValue;
+  }, [currentValue]);
+  var hasText = normalizeTranscript(currentValue).length > 0;
+  var messageLength = normalizeMessage(currentValue).length;
+  var isOverLimit = maxLength !== undefined && messageLength > maxLength;
+  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(_this, 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(_this, 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(_this, void 0, void 0, function () {
+      var text;
+      return __generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            text = source === 'text' ? normalizeMessage(rawText) : normalizeTranscript(rawText);
+            if (!text || disabled || effectiveSubmitting) {
+              return [2 /*return*/];
+            }
+            if (maxLength !== undefined && text.length > maxLength) {
+              // A long transcript goes into the field to be shortened, unless the user has typed since
+              if (source === 'voice-final' && !normalizeMessage(currentValueRef.current)) {
+                updateValue(text);
+              }
+              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('');
+            // Keep a follow-up typed while submitting
+            if (normalizeMessage(currentValueRef.current) === text) {
+              updateValue('');
+            }
+            return [3 /*break*/, 5];
+          case 3:
+            _b.sent();
+            updateMachineState({
+              type: 'SUBMIT_ERROR'
+            });
+            // Restore the transcript unless the user has typed something since
+            if (source === 'voice-final' && !normalizeMessage(currentValueRef.current)) {
+              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, maxLength, 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(_this, __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(_this, 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(_this, 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(_this, 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(_this, 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(_this, 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]);
+  var focusField = useCallback(function (cursor) {
+    var input = inputRef.current;
+    if (!input) return;
+    input.focus();
+    if (!cursor) return;
+    var placeCursor = function placeCursor() {
+      if (cursor === 'all') {
+        input.select();
+        return;
+      }
+      var position = cursor === 'start' ? 0 : input.value.length;
+      input.setSelectionRange(position, position);
+    };
+    placeCursor();
+    // Again after the render a prefill in the same handler triggers, so 'end' lands after the new text
+    window.setTimeout(placeCursor, 0);
+  }, []);
+  useImperativeHandle(ref, function () {
+    return {
+      focus: function focus(options) {
+        return focusField(options === null || options === void 0 ? void 0 : options.cursor);
+      },
+      clear: function clear() {
+        setInterimTranscript('');
+        updateValue('');
+      }
+    };
+  }, [focusField, updateValue]);
+  // The region above the field (decision 0046). The last review and suggestions shown are kept, so
+  // they can fade out after the product removes them.
+  var _w = useState(review),
+    shownReview = _w[0],
+    setShownReview = _w[1];
+  var _x = useState(null),
+    lastReviewAction = _x[0],
+    setLastReviewAction = _x[1];
+  if (review && review !== shownReview) {
+    setShownReview(review);
+    // A new proposal or change replaces what the last Discard or Undo announced
+    if (lastReviewAction) setLastReviewAction(null);
+  }
+  // A proposal replacing an open one is announced as an update (decision 0047). Consecutive
+  // replacements alternate a trailing no-break space, so the live region's text changes each time
+  // even when the summary doesn't; screen readers don't speak it.
+  var openProposalId = (review === null || review === void 0 ? void 0 : review.state) === 'proposal' ? review.id : null;
+  var _y = useState(openProposalId),
+    announcedProposalId = _y[0],
+    setAnnouncedProposalId = _y[1];
+  var _z = useState(0),
+    replacementCount = _z[0],
+    setReplacementCount = _z[1];
+  if (openProposalId !== announcedProposalId) {
+    setAnnouncedProposalId(openProposalId);
+    setReplacementCount(openProposalId !== null && announcedProposalId !== null ? replacementCount + 1 : 0);
+  }
+  var cappedSuggestions = useMemo(function () {
+    return (suggestions !== null && suggestions !== void 0 ? suggestions : []).slice(0, MAX_SUGGESTIONS);
+  }, [suggestions]);
+  var showSuggestions = cappedSuggestions.length > 0 && !hasText && (review === null || review === void 0 ? void 0 : review.state) !== 'proposal';
+  var _0 = useState(cappedSuggestions),
+    shownSuggestions = _0[0],
+    setShownSuggestions = _0[1];
+  if (showSuggestions && cappedSuggestions !== shownSuggestions) {
+    setShownSuggestions(cappedSuggestions);
+  }
+  var suggestionCount = (_b = suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) !== null && _b !== void 0 ? _b : 0;
+  useEffect(function () {
+    if (!isProduction && suggestionCount > MAX_SUGGESTIONS) {
+      console.warn("AgentInput shows at most ".concat(MAX_SUGGESTIONS, " suggestions (decision 0046); ").concat(suggestionCount, " were passed, so the rest are hidden."));
+    }
+  }, [suggestionCount]);
+  var reviewAnnouncement = review ? review.state === 'proposal' ? "".concat(replacementCount > 0 ? 'Proposal updated. ' : '').concat(review.summary, ". Accept or discard.").concat(replacementCount > 0 && replacementCount % 2 === 0 ? "\xA0" : '') : 'Changes applied. Undo available.' : lastReviewAction === 'discarded' ? 'Suggestion discarded.' : lastReviewAction === 'undone' ? 'Changes undone.' : '';
+  var onReviewDiscard = function onReviewDiscard(onDiscard) {
+    setLastReviewAction('discarded');
+    onDiscard();
+    // The bar is leaving, so focus goes to the field rather than being lost
+    focusField();
+  };
+  var onReviewUndo = function onReviewUndo(onUndo) {
+    setLastReviewAction('undone');
+    onUndo();
+    focusField();
+  };
+  var onPickSuggestion = function onPickSuggestion(text) {
+    updateValue(text);
+    onSuggestionSelect === null || onSuggestionSelect === void 0 ? void 0 : onSuggestionSelect(text);
+    // Fills, never sends: the user reviews the text in the field first
+    focusField('end');
+  };
+  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 normalizeMessage([currentValue, interimTranscript].filter(Boolean).join(' '));
+  }, [currentValue, interimTranscript]);
+  var lastFieldWidthRef = useRef(0);
+  var resizeField = useCallback(function () {
+    var field = inputRef.current;
+    // Hidden (for example in a closed sheet): measure when it's shown, via the observer below
+    if (!field || field.clientWidth === 0) return;
+    lastFieldWidthRef.current = field.clientWidth;
+    // Collapsing the field to measure it shrinks the page for a moment; some engines clamp a page
+    // scrolled to the bottom when that happens, so restore its scroll position
+    var scrollX = window.scrollX,
+      scrollY = window.scrollY;
+    field.style.height = 'auto';
+    field.style.height = "".concat(field.scrollHeight, "px");
+    if (window.scrollY !== scrollY) window.scrollTo(scrollX, scrollY);
+    // Scroll only once max-height (six rows) clips the content
+    field.style.overflowY = field.scrollHeight > field.clientHeight ? 'auto' : 'hidden';
+  }, []);
+  useIsomorphicLayoutEffect(function () {
+    resizeField();
+  }, [displayedValue, resizeField]);
+  // Text rewraps when the field's width changes (layout, or being shown), not only the window's
+  useEffect(function () {
+    var field = inputRef.current;
+    if (!field || typeof ResizeObserver === 'undefined') return;
+    var observer = new ResizeObserver(function () {
+      // Its own height changes trigger this too; only a width change can rewrap the text
+      if (field.clientWidth !== lastFieldWidthRef.current) resizeField();
+    });
+    observer.observe(field);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [resizeField]);
+  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(_this, void 0, void 0, function () {
+      var isComposing;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            isComposing = event.nativeEvent.isComposing || event.keyCode === 229;
+            // Escape during an IME composition cancels the composition, not the request
+            if (event.key === 'Escape' && onStop && effectiveSubmitting && !isComposing) {
+              event.preventDefault();
+              onStop();
+              return [2 /*return*/];
+            }
+            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' && !event.shiftKey && !isComposing)) 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(_this, 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 || helperText,
+    typing: statusMessage || helperText,
+    listening: statusMessage || DEFAULT_LISTENING_MESSAGE,
+    processingFinalTranscript: statusMessage || DEFAULT_PROCESSING_MESSAGE,
+    submitting: statusMessage || 'Submitting…',
+    error: errorMessage || internalErrorMessage || 'Voice input failed. Try again.',
+    disabled: statusMessage || helperText
+  };
+  var overLimitMessage = isOverLimit && maxLength !== undefined ? "Over the ".concat(maxLength, "-character limit. Shorten your message to send.") : undefined;
+  // A product-set error shows in any state. Unsupported voice hides the mic without a message.
+  var resolvedStatus = errorMessage || overLimitMessage || statusByState[effectiveState];
+  var isStatusError = Boolean(errorMessage) || isOverLimit || effectiveState === 'error';
+  var meterBars = createMeterBars(meterLevel);
+  var showStop = Boolean(onStop) && effectiveSubmitting;
+  var sendDisabled = disabled || effectiveSubmitting || isOverLimit || messageLength === 0;
+  var showCounter = maxLength !== undefined && messageLength >= maxLength * COUNTER_THRESHOLD;
+  // Announced once when the limit is reached; going over is announced by the status line
+  var limitAnnouncement = maxLength !== undefined && messageLength === maxLength ? "Character limit reached: ".concat(maxLength, " characters") : '';
+  return jsxs(Container, {
+    "data-testid": dataTestId,
+    "$docked": docked,
+    "data-docked": docked || undefined,
+    children: [jsx(VisuallyHiddenLabel, {
+      htmlFor: inputId,
+      children: label
+    }), jsxs(ControlsRow, {
+      children: [jsx(RegionPart, {
+        show: Boolean(review),
+        reducedExit: prefersReducedMotion,
+        children: shownReview && jsxs(ReviewBar, {
+          "data-testid": "agent-input-review",
+          children: [jsx(Typography, {
+            variant: "small",
+            color: "default",
+            children: shownReview.state === 'proposal' ? shownReview.summary : 'Changes applied'
+          }), jsx(ReviewActions, {
+            children: shownReview.state === 'proposal' ? jsxs(Fragment, {
+              children: [jsx(Button, {
+                variant: "primary",
+                size: "small",
+                onClick: shownReview.onAccept,
+                children: "Accept"
+              }), jsx(Button, {
+                variant: "secondary",
+                size: "small",
+                onClick: function onClick() {
+                  return onReviewDiscard(shownReview.onDiscard);
+                },
+                children: "Discard"
+              })]
+            }) : jsx(Button, {
+              variant: "naked",
+              size: "small",
+              onClick: function onClick() {
+                return onReviewUndo(shownReview.onUndo);
+              },
+              children: "Undo"
+            })
+          })]
+        })
+      }), jsx(RegionPart, {
+        show: showSuggestions,
+        reducedExit: prefersReducedMotion,
+        children: jsx(SuggestionList, {
+          "aria-label": "Suggestions",
+          "data-testid": "agent-input-suggestions",
+          children: shownSuggestions.map(function (suggestion, index) {
+            return jsx("li", {
+              children: jsx(SuggestionChip, {
+                onClick: function onClick() {
+                  return onPickSuggestion(suggestion);
+                },
+                children: suggestion
+              })
+            }, "".concat(index, "-").concat(suggestion));
+          })
+        })
+      }), jsx(VisuallyHidden, {
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        "data-testid": "agent-input-review-announcement",
+        children: reviewAnnouncement
+      }), jsx(InputWrapper, {
+        children: jsxs(InputShell, {
+          "data-disabled": disabled,
+          children: [jsx(Input, {
+            ref: inputRef,
+            id: inputId,
+            rows: 1,
+            enterKeyHint: "send",
+            "aria-label": label,
+            value: displayedValue,
+            onChange: onTextChange,
+            onKeyDown: onInputKeyDown,
+            placeholder: placeholder,
+            disabled: disabled,
+            readOnly: isListening,
+            "aria-describedby": showCounter ? "".concat(statusId, " ").concat(counterId) : statusId,
+            "aria-invalid": isOverLimit || undefined
+          }), 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"
+              })]
+            }), showStop ? jsx(CircularActionIconButton, {
+              variant: "secondary",
+              size: "medium",
+              iconName: "stop",
+              onClick: function onClick() {
+                return onStop === null || onStop === void 0 ? void 0 : onStop();
+              },
+              disabled: disabled,
+              "aria-label": "Stop",
+              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: resolvedStatus && jsx(Typography, {
+            variant: "small",
+            color: isStatusError ? 'error' : 'subdued',
+            children: resolvedStatus
+          })
+        })
+      }), jsxs(StatusEnd, {
+        children: [isListening && !prefersReducedMotion && jsx(MeterContainer, {
+          "aria-hidden": "true",
+          children: meterBars.map(function (barHeight, index) {
+            return jsx(MeterBar, {
+              "$height": barHeight
+            }, "meter-".concat(index));
+          })
+        }), showCounter && jsx(Typography, {
+          variant: "small",
+          color: isOverLimit ? 'error' : 'subdued',
+          children: jsxs("span", {
+            id: counterId,
+            "data-testid": "agent-input-counter",
+            children: [messageLength, "/", maxLength, jsx(VisuallyHidden, {
+              children: " characters"
+            })]
+          })
+        })]
+      }), maxLength !== undefined && jsx(VisuallyHidden, {
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        "data-testid": "agent-input-limit-announcement",
+        children: limitAnnouncement
+      })]
+    })]
+  });
+}
+var AgentInput = /*#__PURE__*/forwardRef(AgentInputWithRef);
+AgentInput.displayName = 'AgentInput';
+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, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33;
+
+export { AgentInput };
+//# sourceMappingURL=AgentInput.mjs.map