@common-origin/design-system 2.20.0 → 2.21.0

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

@@ -1,106 +1,182 @@
 '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 { 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 { visuallyHidden } from '../../../lib/styleUtils.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, detectSpeechRecognitionConstructor, defaultVoiceErrorMessage, mapSpeechErrorCode } from './agentInputSpeech.mjs';
+import { normalizeTranscript, normalizeMessage, 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…';
+// 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_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]);
+})(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_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+})(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_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({
+})(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_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);
+})(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_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]);
+})(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_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), semantic.radius.full);
+})(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_8 || (templateObject_8 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n"], ["\n  flex: 1;\n  min-width: 0;\n"])));
+})(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_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"
+})(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_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 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_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) {
+})(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_11 || (templateObject_11 = __makeTemplateObject(["\n      animation: ", " 1300ms linear infinite;\n    "], ["\n      animation: ", " 1300ms linear infinite;\n    "])), rotateRing);
+  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-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]);
+  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-10"
-})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), semantic.space[500]);
+  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-11"
-})(templateObject_15 || (templateObject_15 = __makeTemplateObject([""], [""])));
+  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-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]);
+  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-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) {
+  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-14"
-})(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
+  componentId: "sc-fhl996-21"
+})(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
 function getInitialState(hasText) {
   return hasText ? 'typing' : 'idle';
 }
@@ -108,60 +184,104 @@ 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) {
+// 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,
-    _b = _a.defaultValue,
-    defaultValue = _b === void 0 ? '' : _b,
+    _c = _a.defaultValue,
+    defaultValue = _c === void 0 ? '' : _c,
     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,
+    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,
-    _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,
+    _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,
-    _j = _a.label,
-    label = _j === void 0 ? 'Agent input' : _j,
+    _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 _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 _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),
-    prefersReducedMotion = _r[0],
-    setPrefersReducedMotion = _r[1];
-  var _s = useState(0),
-    meterLevel = _s[0],
-    setMeterLevel = _s[1];
+    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);
@@ -169,10 +289,19 @@ var AgentInput = function AgentInput(_a) {
   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';
@@ -195,7 +324,7 @@ var AgentInput = function AgentInput(_a) {
     }
   }, []);
   var stopMeter = useCallback(function () {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -223,7 +352,7 @@ var AgentInput = function AgentInput(_a) {
     });
   }, []);
   var startMeter = useCallback(function () {
-    return __awaiter(void 0, void 0, void 0, 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) {
@@ -284,15 +413,22 @@ var AgentInput = function AgentInput(_a) {
     });
   }, [onVoiceError, updateMachineState]);
   var submitPayload = useCallback(function (rawText, source) {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
       var text;
       return __generator(this, function (_b) {
         switch (_b.label) {
           case 0:
-            text = normalizeTranscript(rawText);
+            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'
             });
@@ -314,14 +450,18 @@ var AgentInput = function AgentInput(_a) {
               type: 'SUBMIT_SUCCESS'
             });
             setInterimTranscript('');
-            updateValue('');
+            // 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'
             });
-            if (source === 'voice-final') {
+            // 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.');
@@ -336,13 +476,13 @@ var AgentInput = function AgentInput(_a) {
         }
       });
     });
-  }, [disabled, effectiveSubmitting, isSubmitting, onSubmit, updateMachineState, updateValue]);
+  }, [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(void 0, __spreadArray([emitStopEvent_1], args_1, true), void 0, function (emitStopEvent, preserveState) {
+    return __awaiter(_this, __spreadArray([emitStopEvent_1], args_1, true), void 0, function (emitStopEvent, preserveState) {
       if (preserveState === void 0) {
         preserveState = false;
       }
@@ -378,7 +518,7 @@ var AgentInput = function AgentInput(_a) {
     });
   }, [clearNoSpeechTimeout, hasText, onVoiceStop, stopMeter, updateMachineState]);
   var onNoSpeechTimeout = useCallback(function () {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
       var message;
       return __generator(this, function (_a) {
         switch (_a.label) {
@@ -402,7 +542,7 @@ var AgentInput = function AgentInput(_a) {
     });
   }, [clearNoSpeechTimeout, onVoiceError, stopListening, updateMachineState]);
   var beginListening = useCallback(function () {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
       return __generator(this, function (_b) {
         switch (_b.label) {
           case 0:
@@ -446,7 +586,7 @@ var AgentInput = function AgentInput(_a) {
     recognition.interimResults = true;
     recognition.continuous = false;
     recognition.onresult = function (event) {
-      return __awaiter(void 0, void 0, void 0, function () {
+      return __awaiter(_this, void 0, void 0, function () {
         var interim, finalText, index, result, normalizedInterim, normalizedFinal;
         return __generator(this, function (_a) {
           switch (_a.label) {
@@ -504,7 +644,7 @@ var AgentInput = function AgentInput(_a) {
       });
     };
     recognition.onerror = function (event) {
-      return __awaiter(void 0, void 0, void 0, function () {
+      return __awaiter(_this, void 0, void 0, function () {
         var mappedCode;
         return __generator(this, function (_a) {
           switch (_a.label) {
@@ -520,7 +660,7 @@ var AgentInput = function AgentInput(_a) {
       });
     };
     recognition.onend = function () {
-      return __awaiter(void 0, void 0, void 0, function () {
+      return __awaiter(_this, void 0, void 0, function () {
         return __generator(this, function (_a) {
           switch (_a.label) {
             case 0:
@@ -549,6 +689,95 @@ var AgentInput = function AgentInput(_a) {
       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() {
@@ -580,8 +809,40 @@ var AgentInput = function AgentInput(_a) {
     if (!interimTranscript) {
       return currentValue;
     }
-    return normalizeTranscript([currentValue, interimTranscript].filter(Boolean).join(' '));
+    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') {
@@ -593,10 +854,18 @@ var AgentInput = function AgentInput(_a) {
     }
   };
   var onInputKeyDown = function onInputKeyDown(event) {
-    return __awaiter(void 0, void 0, void 0, function () {
+    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)];
@@ -604,7 +873,7 @@ var AgentInput = function AgentInput(_a) {
             _a.sent();
             return [2 /*return*/];
           case 2:
-            if (!(event.key === 'Enter')) return [3 /*break*/, 4];
+            if (!(event.key === 'Enter' && !event.shiftKey && !isComposing)) return [3 /*break*/, 4];
             event.preventDefault();
             return [4 /*yield*/, submitPayload(currentValue, 'text')];
           case 3:
@@ -617,7 +886,7 @@ var AgentInput = function AgentInput(_a) {
     });
   };
   var onMicToggle = function onMicToggle() {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(_this, void 0, void 0, function () {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -637,40 +906,105 @@ var AgentInput = function AgentInput(_a) {
     });
   };
   var statusByState = {
-    idle: statusMessage || DEFAULT_IDLE_HELPER,
-    typing: statusMessage || DEFAULT_IDLE_HELPER,
+    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 || DEFAULT_IDLE_HELPER
+    disabled: statusMessage || helperText
   };
-  var unsupportedMessage = defaultVoiceErrorMessage('not-supported');
-  var shouldShowUnsupported = enableVoice && !hasVoice;
-  var resolvedStatus = shouldShowUnsupported ? unsupportedMessage : statusByState[effectiveState];
-  var isStatusError = effectiveState === 'error' || shouldShowUnsupported;
+  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 sendDisabled = disabled || effectiveSubmitting || normalizeTranscript(currentValue).length === 0;
+  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
-    }), jsx(ControlsRow, {
-      children: jsx(InputWrapper, {
+    }), 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 || effectiveSubmitting,
+          "data-disabled": disabled,
           children: [jsx(Input, {
+            ref: inputRef,
             id: inputId,
-            type: "text",
+            rows: 1,
+            enterKeyHint: "send",
             "aria-label": label,
             value: displayedValue,
             onChange: onTextChange,
             onKeyDown: onInputKeyDown,
             placeholder: placeholder,
-            disabled: disabled || effectiveSubmitting,
+            disabled: disabled,
             readOnly: isListening,
-            "aria-describedby": statusId
+            "aria-describedby": showCounter ? "".concat(statusId, " ").concat(counterId) : statusId,
+            "aria-invalid": isOverLimit || undefined
           }), jsxs(InputActions, {
             children: [hasVoice && jsxs(MicButtonWrapper, {
               "$isListening": isListening,
@@ -690,7 +1024,17 @@ var AgentInput = function AgentInput(_a) {
                 disabled: disabled || effectiveSubmitting,
                 type: "button"
               })]
-            }), jsx(CircularActionIconButton, {
+            }), 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",
@@ -703,7 +1047,7 @@ var AgentInput = function AgentInput(_a) {
             })]
           })]
         })
-      })
+      })]
     }), jsxs(StatusRow, {
       children: [jsx(StatusText, {
         "$isError": isStatusError,
@@ -712,24 +1056,44 @@ var AgentInput = function AgentInput(_a) {
           role: "status",
           "aria-live": "polite",
           "aria-atomic": "true",
-          children: jsx(Typography, {
+          children: resolvedStatus && 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));
-        })
+      }), 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 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;
+}
+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