@oxy.so/bloom 3.3.0 → 3.5.0

package/src/composer-panel/ComposerPillBase.tsx

@@ -43,7 +43,10 @@ const EASE_OUT = Easing.bezier(0, 0, 0.58, 1);
 const GLASS_MS = 480;
 /** `max-width: 639px`. */
 const COMPACT_WIDTH = 640;
+/** The pill at one line: the field's 20px line box plus 8px padding either side, in a 52 box. */
 const PILL_HEIGHT = 52;
+/** One line of `body-regular`, which is what the field was fixed at. */
+const LINE_HEIGHT = 20;
 
 const DEFAULT_LABELS: Required<ComposerPillLabels> = {
   message: 'Message',
@@ -155,6 +158,13 @@ function ModelRow({
 }) {
   const [hovered, setHovered] = useState(false);
   const [focused, setFocused] = useState(false);
+  /**
+   * The field's measured content height, from `onContentSizeChange`.
+   *
+   * Measured rather than counted: a draft wraps, so the number of LINES is not
+   * the number of newlines, and only the field knows how its own text laid out.
+   */
+  const [contentHeight, setContentHeight] = useState(LINE_HEIGHT);
   return (
     <Pressable
       {...dataHook('bloomComposerRow')}
@@ -409,6 +419,9 @@ export function ComposerPillBase({
   inputRef,
   labels: labelOverrides,
   style,
+  maxLines = 8,
+  emptyAction,
+  onKeyPress: onKeyPressProp,
   testID,
 }: ComposerPillProps) {
   useComposerWebCss();
@@ -438,6 +451,13 @@ export function ComposerPillBase({
     },
   });
   const [focused, setFocused] = useState(false);
+  /**
+   * The field's measured content height, from `onContentSizeChange`.
+   *
+   * Measured rather than counted: a draft wraps, so the number of LINES is not
+   * the number of newlines, and only the field knows how its own text laid out.
+   */
+  const [contentHeight, setContentHeight] = useState(LINE_HEIGHT);
   const [modelWidth, setModelWidth] = useState(0);
 
   // The chat's add surface is a step lighter than the Composer Panel's:
@@ -466,21 +486,79 @@ export function ComposerPillBase({
 
   const onKeyPress = useCallback(
     (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
-      const native: TextInputKeyPressEventData & { isComposing?: boolean } = event.nativeEvent;
-      if (!IS_WEB || native.key !== 'Enter' || native.isComposing || disabled || busy) return;
+      /*
+       * The host sees the key first, and may take it.
+       *
+       * A composer with a suggestion list over it needs the arrows, Enter and
+       * Escape to drive the list, not the field — and there was no way to ask
+       * for them, so a host could only offer a list its keyboard could not
+       * reach. It runs BEFORE the Enter rule below and a `defaultPrevented`
+       * event stops here, which is the only ordering that lets the list win
+       * Enter while the field keeps it the rest of the time.
+       */
+      onKeyPressProp?.(event);
+      if (event.defaultPrevented) return;
+
+      const native: TextInputKeyPressEventData & { shiftKey?: boolean; isComposing?: boolean } = event.nativeEvent;
+      /*
+       * Shift+Enter is a NEWLINE, not a send.
+       *
+       * This handler used to read only the key, so a person holding shift to
+       * break a line sent the half-written message instead — on a field that
+       * could not have held the line anyway. `ComposerPanelBase` has always
+       * had the clause (`… || native.shiftKey || …`); the pill did not, and
+       * the two composers disagreeing about the most-used key in a composer
+       * was a difference nobody chose.
+       */
+      if (
+        !IS_WEB
+        || native.key !== 'Enter'
+        || native.shiftKey
+        || native.isComposing
+        || disabled
+        || busy
+      ) {
+        return;
+      }
       event.preventDefault();
       submit();
     },
-    [submit, disabled, busy],
+    [submit, disabled, busy, onKeyPressProp],
   );
 
+  /*
+   * How tall the pill is: one line, or as many as the draft needs up to
+   * `maxLines`.
+   *
+   * It was `height: PILL_HEIGHT` with a `height: 20` field and no `multiline`
+   * — under react-native-web that is an `<input>`, which cannot hold a newline
+   * and cannot grow. A composer for an assistant has to hold a paragraph, so
+   * the field is multiline and the pill measures it.
+   *
+   * The radius stays at 9999 while it is one line and squares off to 26 beyond
+   * that: a fully-round multi-line box puts the first and last lines inside
+   * the curve, where the text meets the edge.
+   */
+  const lines = Math.min(maxLines, Math.max(1, Math.ceil(contentHeight / LINE_HEIGHT) || 1));
+  const fieldHeight = lines * LINE_HEIGHT;
+  /*
+   * At one line the pill is exactly what it always was. Its 52 comes from the
+   * CONTROLS — a 36px disc inside 8px padding — not from the 20px field, so
+   * growing from the field's height would have SHRUNK the resting pill to 36.
+   * Each line after the first adds its own height and nothing else moves.
+   */
+  const pillHeight = PILL_HEIGHT + (lines - 1) * LINE_HEIGHT;
+  const multiLine = lines > 1;
+
   const pillStyle: WebCssStyle = {
     width: '100%',
-    height: PILL_HEIGHT,
+    height: pillHeight,
     flexDirection: 'row',
-    alignItems: 'center',
+    // The controls sit with the LAST line once the field has grown, which is
+    // where the caret is; centred, they would drift to the middle of the draft.
+    alignItems: multiLine ? 'flex-end' : 'center',
     gap: 10,
-    borderRadius: 9999,
+    borderRadius: multiLine ? 26 : 9999,
     padding: 8,
     backgroundColor: surface ? palette.surface : 'transparent',
     boxShadow: surface ? palette.shadowXs : undefined,
@@ -488,10 +566,12 @@ export function ComposerPillBase({
   };
 
   const fieldStyle: WebCssStyle = {
-    height: 20,
+    height: fieldHeight,
     minWidth: 0,
     flex: 1,
-    ...(IS_WEB && !focused
+    // The fade that hints at overflowing text is a ONE-LINE affordance: on a
+    // grown field it would dim the end of every line.
+    ...(IS_WEB && !focused && !multiLine
       ? {
           maskImage: 'linear-gradient(to right, #000 calc(100% - 32px), transparent 100%)',
           WebkitMaskImage: 'linear-gradient(to right, #000 calc(100% - 32px), transparent 100%)',
@@ -531,9 +611,14 @@ export function ComposerPillBase({
           selectionColor={palette.accent500}
           cursorColor={palette.accent500}
           returnKeyType="send"
+          multiline
+          onContentSizeChange={(event) => setContentHeight(event.nativeEvent.contentSize.height)}
           style={{
             width: '100%',
-            height: 20,
+            height: fieldHeight,
+            // react-native-web gives a multiline field a resize grip and a
+            // scrollbar it does not need: the pill owns the height.
+            ...(IS_WEB ? { resize: 'none', overflowY: lines >= maxLines ? 'auto' : 'hidden' } : null),
             padding: 0,
             margin: 0,
             ...TYPE_SCALE['body-regular'],
@@ -574,8 +659,21 @@ export function ComposerPillBase({
             palette={controlPalette}
           />
         </View>
+        {/* What the trailing control is, in the order the states rank.
+         *
+         * Stop wins: a turn in flight is the one thing a person needs to be
+         * able to reach, and `StopButton` deliberately takes no `disabled`.
+         *
+         * Then `emptyAction`, if the host gave one and there is nothing to
+         * send. An assistant with a voice mode puts it here — the slot where
+         * send WOULD be, which is where the thumb already is — and it is the
+         * host's control, not a Bloom affordance, because only the host knows
+         * whether it has one. Without it the send button simply sits there
+         * disabled, as it always did. */}
         {busy && onStop ? (
           <StopButton onPress={onStop} label={labels.stop} palette={palette} />
+        ) : emptyAction !== undefined && text.trim() === '' ? (
+          emptyAction
         ) : (
           <SendButton disabled={disabled} onPress={submit} label={labels.send} palette={palette} />
         )}

package/src/composer-panel/types.ts

@@ -1,5 +1,11 @@
 import type { ComponentType, ReactNode, RefObject } from 'react';
-import type { StyleProp, TextInput, ViewStyle } from 'react-native';
+import type {
+  NativeSyntheticEvent,
+  StyleProp,
+  TextInput,
+  TextInputKeyPressEventData,
+  ViewStyle,
+} from 'react-native';
 
 import type { Props as IconProps } from '../icons/shared';
 
@@ -33,6 +39,15 @@ export interface ComposerPanelAddMenuRow {
   iconSize?: 20 | 24;
   /** Your own 24px artwork, drawn instead of `icon`. */
   image?: ReactNode;
+  /**
+   * Draw the row as a SWITCH, ticked or not, instead of an action.
+   *
+   * Omit it and the row is an action, as every row was before. A host whose
+   * menu holds toggles — web search on, deep research off — could otherwise
+   * only offer rows that changed something and then looked identical either
+   * way.
+   */
+  checked?: boolean;
 }
 
 export interface ComposerPanelAddMenuGroup {
@@ -395,6 +410,38 @@ export interface ComposerPillProps {
    */
   glass?: boolean;
 
+  /**
+   * How many lines the pill grows to before the field scrolls instead. Default
+   * `8`.
+   *
+   * The pill is one line at rest and measures its own content as the draft
+   * wraps — a composer for an assistant has to hold a paragraph. `1` keeps the
+   * fixed single-line box this had before it could grow.
+   */
+  maxLines?: number;
+
+  /**
+   * Drawn where send would be, while the draft is empty and no turn is in
+   * flight.
+   *
+   * An assistant with a voice mode puts its call button here — the slot the
+   * thumb is already over. Omit it and send simply sits there disabled, as
+   * before. A stop always wins over it: a turn in flight is the one thing a
+   * person has to be able to reach.
+   */
+  emptyAction?: ReactNode;
+
+  /**
+   * The field's key events, BEFORE the composer's own Enter rule, so a host
+   * can take a key from it.
+   *
+   * Calling `preventDefault()` stops the composer acting on that key. That is
+   * what a suggestion list over the composer needs: the arrows, Enter and
+   * Escape have to drive the list rather than the field, and without this a
+   * host could only offer a list its keyboard could not reach.
+   */
+  onKeyPress?: (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => void;
+
   /** The field itself, for focus or a scripted demo. */
   inputRef?: RefObject<TextInput | null>;
   labels?: ComposerPillLabels;