@oxy.so/bloom 3.2.1 → 3.3.0

package/src/composer-panel/EffortSlider.tsx

@@ -9,10 +9,13 @@ const TRACK_HEIGHT = 27;
 const THUMB_WIDTH = 21;
 
 interface EffortSliderProps {
-  value: number;
+  /** The chosen stop, or `null` for no choice yet. */
+  value: number | null;
   onChange: (value: number) => void;
   levels: ReadonlyArray<string>;
   label: string;
+  /** What `aria-valuetext` reads with no stop chosen (the "Auto" label). */
+  unsetLabel: string;
   palette: ComposerPalette;
   testID?: string;
 }
@@ -25,6 +28,11 @@ interface EffortSliderProps {
  * past the value fade their tick to 30% over 300ms; the fill follows the thumb
  * over 150ms.
  *
+ * With `value` `null` nothing is committed: the fill is empty, every tick is
+ * faded and the thumb is hollow and dashed, so "no stop chosen" cannot be read
+ * as "the first stop". The first press or key commits a stop, and there is no
+ * way back — the caller owns the `null`.
+ *
  * Drag or press anywhere on the track (PanResponder on both platforms); on web
  * the thumb is focusable and answers the arrow keys, Home and End.
  *
@@ -32,20 +40,25 @@ interface EffortSliderProps {
  * starfield, with the ticks blown off the track) has no native counterpart,
  * so at Max the slider simply rests at its last stop.
  */
-export function EffortSlider({ value, onChange, levels, label, palette, testID }: EffortSliderProps) {
+export function EffortSlider({ value, onChange, levels, label, unsetLabel, palette, testID }: EffortSliderProps) {
   const [width, setWidth] = useState(0);
   const max = Math.max(0, levels.length - 1);
-  const clamped = Math.min(Math.max(value, 0), max);
-  const fraction = max > 0 ? clamped / max : 0;
+  const chosen = value === null ? null : Math.min(Math.max(value, 0), max);
+  const fraction = chosen !== null && max > 0 ? chosen / max : 0;
   const rail = Math.max(0, width - THUMB_WIDTH);
 
-  const stateRef = useRef({ value: clamped, rail, max, onChange });
-  stateRef.current = { value: clamped, rail, max, onChange };
-  const startRef = useRef(clamped);
+  const stateRef = useRef<{ value: number | null; rail: number; max: number; onChange: (next: number) => void }>({
+    value: chosen,
+    rail,
+    max,
+    onChange,
+  });
+  stateRef.current = { value: chosen, rail, max, onChange };
+  const startRef = useRef(chosen ?? 0);
 
   const valueAt = useCallback((x: number) => {
     const s = stateRef.current;
-    if (s.rail <= 0 || s.max <= 0) return s.value;
+    if (s.rail <= 0 || s.max <= 0) return s.value ?? 0;
     const f = Math.min(Math.max((x - THUMB_WIDTH / 2) / s.rail, 0), 1);
     return Math.round(f * s.max);
   }, []);
@@ -83,11 +96,17 @@ export function EffortSlider({ value, onChange, levels, label, palette, testID }
         tabIndex: 0,
         onKeyDown: (event: { key: string; preventDefault: () => void }) => {
           const s = stateRef.current;
+          // With nothing chosen, either arrow commits the first stop.
+          const current = s.value;
           const next =
             event.key === 'ArrowRight' || event.key === 'ArrowUp'
-              ? Math.min(s.max, s.value + 1)
+              ? current === null
+                ? 0
+                : Math.min(s.max, current + 1)
               : event.key === 'ArrowLeft' || event.key === 'ArrowDown'
-                ? Math.max(0, s.value - 1)
+                ? current === null
+                  ? 0
+                  : Math.max(0, current - 1)
                 : event.key === 'Home'
                   ? 0
                   : event.key === 'End'
@@ -108,9 +127,10 @@ export function EffortSlider({ value, onChange, levels, label, palette, testID }
     height: TRACK_HEIGHT,
     borderRadius: 7,
     borderWidth: 1,
+    borderStyle: chosen === null ? 'dashed' : 'solid',
     borderColor: palette.thumbBorder,
-    backgroundColor: palette.surface,
-    boxShadow: palette.shadowXs,
+    backgroundColor: chosen === null ? 'transparent' : palette.surface,
+    boxShadow: chosen === null ? undefined : palette.shadowXs,
     '--bloom-composer-ring': palette.focusRing,
   };
 
@@ -121,12 +141,12 @@ export function EffortSlider({ value, onChange, levels, label, palette, testID }
       accessibilityLabel={label}
       aria-valuemin={0}
       aria-valuemax={max}
-      aria-valuenow={clamped}
-      aria-valuetext={levels[clamped]}
+      aria-valuenow={chosen ?? undefined}
+      aria-valuetext={chosen === null ? unsetLabel : levels[chosen]}
       accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}
       onAccessibilityAction={(event) => {
-        if (event.nativeEvent.actionName === 'increment') commit(Math.min(max, clamped + 1));
-        if (event.nativeEvent.actionName === 'decrement') commit(Math.max(0, clamped - 1));
+        if (event.nativeEvent.actionName === 'increment') commit(chosen === null ? 0 : Math.min(max, chosen + 1));
+        if (event.nativeEvent.actionName === 'decrement') commit(chosen === null ? 0 : Math.max(0, chosen - 1));
       }}
       style={{ width: '100%' }}>
       <View
@@ -149,7 +169,7 @@ export function EffortSlider({ value, onChange, levels, label, palette, testID }
             top: 0,
             bottom: 0,
             left: 0,
-            width: fraction * rail + THUMB_WIDTH,
+            width: chosen === null ? 0 : fraction * rail + THUMB_WIDTH,
             borderRadius: 8,
             backgroundColor: palette.tertiaryHover,
           }}
@@ -175,7 +195,7 @@ export function EffortSlider({ value, onChange, levels, label, palette, testID }
                 height: 13,
                 borderRadius: 2,
                 backgroundColor: palette.iconTertiary,
-                opacity: index > clamped ? 0.3 : 1,
+                opacity: chosen === null || index > chosen ? 0.3 : 1,
               }}
             />
           ))}

package/src/composer-panel/ModelPickerBase.tsx

@@ -57,6 +57,7 @@ const DEFAULT_LABELS: Required<ModelPickerLabels> = {
   noMatches: 'No models match',
   providers: 'Providers',
   effort: 'Effort',
+  effortAuto: 'Auto',
   faster: 'Faster',
   smarter: 'Smarter',
 };
@@ -218,6 +219,11 @@ function BlurInLevel({ level, palette }: { level: string; palette: ComposerPalet
   );
 }
 
+/**
+ * The effort chip on the checked row. Drawn only where there are stops to
+ * choose from — a model with no effort axis gets no chip, rather than an empty
+ * one over a slider that cannot commit.
+ */
 function EffortMenu({
   value,
   onChange,
@@ -225,7 +231,7 @@ function EffortMenu({
   labels,
   palette,
 }: {
-  value: number;
+  value: number | null;
   onChange: (next: number) => void;
   levels: ReadonlyArray<string>;
   labels: Required<ModelPickerLabels>;
@@ -235,7 +241,7 @@ function EffortMenu({
   const triggerRef = useRef<View>(null);
   const [open, setOpen] = useState(false);
   const [hovered, setHovered] = useState(false);
-  const level = levels[value] ?? levels[DEFAULT_EFFORT] ?? '';
+  const level = value === null ? labels.effortAuto : (levels[value] ?? labels.effortAuto);
 
   const chipStyle: WebCssStyle = {
     flexShrink: 0,
@@ -314,7 +320,14 @@ function EffortMenu({
               </Text>
             </View>
             <View style={{ paddingLeft: 8, paddingRight: 8, paddingBottom: 8 }}>
-              <EffortSlider value={value} onChange={onChange} levels={levels} label={labels.effort} palette={palette} />
+              <EffortSlider
+                value={value}
+                onChange={onChange}
+                levels={levels}
+                label={labels.effort}
+                unsetLabel={labels.effortAuto}
+                palette={palette}
+              />
             </View>
           </View>
         </View>
@@ -388,7 +401,7 @@ function ModelRow({
               {searching ? <InlineAside color={palette.textTertiary}>{provider.name}</InlineAside> : null}
             </Text>
           </View>
-          {checked ? <View style={{ flexShrink: 0, flexDirection: 'row' }}>{effort}</View> : null}
+          {effort ? <View style={{ flexShrink: 0, flexDirection: 'row' }}>{effort}</View> : null}
         </View>
         <View pointerEvents="none">
           <RadioIndicator selected={checked} size={14} />
@@ -447,10 +460,13 @@ export function ModelPickerBase({
     defaultValue: defaultValue ?? providers[0]?.models[0]?.id ?? '',
     onChange: onValueChange,
   });
-  const [effortValue, setEffort] = useControllableState<number>({
+  const [effortValue, setEffort] = useControllableState<number | null>({
     value: effort,
     defaultValue: defaultEffort,
-    onChange: onEffortChange,
+    // The picker can only ever land on a stop; `null` is the caller's to hold.
+    onChange: (next) => {
+      if (next !== null) onEffortChange?.(next);
+    },
   });
 
   const selected: Match | null =
@@ -724,7 +740,7 @@ export function ModelPickerBase({
                       }
                     }}
                     effort={
-                      checked ? (
+                      checked && effortLevels.length > 0 ? (
                         <EffortMenu
                           value={effortValue}
                           onChange={setEffort}

package/src/composer-panel/types.ts

@@ -121,6 +121,8 @@ export interface ModelPickerLabels {
   providers?: string;
   /** Default `'Effort'`. */
   effort?: string;
+  /** Default `'Auto'` — the effort chip with no stop chosen. */
+  effortAuto?: string;
   /** Default `'Faster'`. */
   faster?: string;
   /** Default `'Smarter'`. */
@@ -135,12 +137,17 @@ export interface ModelPickerProps {
   /** Initial model id when uncontrolled. Defaults to the first provider's first model. */
   defaultValue?: string;
   onValueChange?: (modelId: string) => void;
-  /** Controlled effort stop, an index into `effortLevels`. */
-  effort?: number;
-  /** Initial stop when uncontrolled. Default `1` ("Medium"). */
-  defaultEffort?: number;
+  /**
+   * Controlled effort stop, an index into `effortLevels`. `null` is "no stop
+   * chosen" — the chip reads `labels.effortAuto`, the slider commits nothing and
+   * the thumb is drawn hollow, so the absence of a choice never looks like one.
+   */
+  effort?: number | null;
+  /** Initial stop when uncontrolled. Default `1` ("Medium"); `null` for no choice. */
+  defaultEffort?: number | null;
+  /** A stop the reader chose. The picker has no way back to `null`, so it never reports one. */
   onEffortChange?: (effort: number) => void;
-  /** The effort stops, "Faster" → "Smarter". Defaults to six stops. */
+  /** The effort stops, "Faster" → "Smarter". Defaults to six stops; `[]` drops the effort axis entirely. */
   effortLevels?: ReadonlyArray<string>;
   labels?: ModelPickerLabels;
   style?: StyleProp<ViewStyle>;
@@ -169,6 +176,8 @@ export interface ComposerPanelLabels {
   voice?: string;
   /** Default `'Send message'`. */
   send?: string;
+  /** Default `'Stop generating'` — send's stop state while `busy`. */
+  stop?: string;
   /** Default `'Remove'` — prefixed to the file name on a tile's dismiss. */
   remove?: string;
 }
@@ -181,7 +190,15 @@ export interface ComposerPanelProps {
   onValueChange?: (value: string) => void;
   /** Fires on the send button and on Enter (web; Shift+Enter breaks the line). */
   onSubmit?: (value: string) => void;
-  /** Greys out send while a turn is in flight. */
+  /**
+   * Stop the turn in flight. With `busy`, send becomes a stop control that
+   * ignores `disabled` — cancelling has to stay possible while typing is not.
+   * Without a handler `busy` draws no stop, so the control is never inert.
+   */
+  onStop?: () => void;
+  /** A turn is running: send becomes stop (given `onStop`) and Enter no longer submits. */
+  busy?: boolean;
+  /** Greys out send while a turn is in flight. Never reaches the stop control. */
   disabled?: boolean;
   /** Default `'Hi, what do you need today?'`. */
   placeholder?: string;
@@ -207,10 +224,11 @@ export interface ComposerPanelProps {
   model?: string;
   defaultModel?: string;
   onModelChange?: (modelId: string) => void;
-  /** Controlled effort stop. */
-  effort?: number;
-  defaultEffort?: number;
+  /** Controlled effort stop; `null` is "no stop chosen". See `ModelPicker`. */
+  effort?: number | null;
+  defaultEffort?: number | null;
   onEffortChange?: (effort: number) => void;
+  /** `[]` drops the effort axis from the picker. */
   effortLevels?: ReadonlyArray<string>;
   modelPickerLabels?: ModelPickerLabels;
 
@@ -293,6 +311,8 @@ export interface ComposerPillLabels {
   modelGroup?: string;
   /** Default `'Effort'`. */
   effort?: string;
+  /** Default `'Auto'` — the effort value with no stop chosen. */
+  effortAuto?: string;
   /** Default `'Faster'`. */
   faster?: string;
   /** Default `'Smarter'`. */
@@ -301,6 +321,8 @@ export interface ComposerPillLabels {
   voice?: string;
   /** Default `'Send message'`. */
   send?: string;
+  /** Default `'Stop generating'` — send's stop state while `busy`. */
+  stop?: string;
 }
 
 export interface ComposerPillProps {
@@ -311,7 +333,15 @@ export interface ComposerPillProps {
   onValueChange?: (value: string) => void;
   /** Fires on the send button and on Enter. */
   onSubmit?: (value: string) => void;
-  /** Greys out send (40%) while a turn is in flight. */
+  /**
+   * Stop the turn in flight. With `busy`, send becomes a stop control that
+   * ignores `disabled` — cancelling has to stay possible while typing is not.
+   * Without a handler `busy` draws no stop, so the control is never inert.
+   */
+  onStop?: () => void;
+  /** A turn is running: send becomes stop (given `onStop`) and Enter no longer submits. */
+  busy?: boolean;
+  /** Greys out send (40%) while a turn is in flight. Never reaches the stop control. */
   disabled?: boolean;
   /** Default `'Ask me anything'`. */
   placeholder?: string;
@@ -322,19 +352,30 @@ export interface ComposerPillProps {
   addMenu?: ReadonlyArray<ComposerPanelAddMenuGroup>;
   onAddMenuSelect?: (rowId: string) => void;
 
-  /** Model names for the model menu. Omit to hide the model button. */
-  models?: ReadonlyArray<string>;
-  /** Controlled model name. */
+  /**
+   * The model menu's lineup. Omit to hide the model button.
+   *
+   * `{ id, name }` entries are the identity contract `ModelPicker` uses: the
+   * menu keys, matches and reports the **id**, and draws the `name`. A bare
+   * string is shorthand for `{ id: name, name }` — kept so the display-name form
+   * still works, and the only form in which a routing id is a display string.
+   */
+  models?: ReadonlyArray<string | ModelPickerModel>;
+  /** Controlled model **id** (a string entry's id is its name). */
   model?: string;
-  /** Initial model when uncontrolled. Default the first. */
+  /** Initial model id when uncontrolled. Default the first entry's. */
   defaultModel?: string;
-  onModelChange?: (model: string) => void;
-  /** Controlled effort stop, an index into `effortLevels`. */
-  effort?: number;
-  /** Default `1` ("Medium"). */
-  defaultEffort?: number;
+  onModelChange?: (modelId: string) => void;
+  /**
+   * Controlled effort stop, an index into `effortLevels`. `null` is "no stop
+   * chosen" — the value reads `labels.effortAuto` and the thumb is drawn hollow.
+   */
+  effort?: number | null;
+  /** Default `1` ("Medium"); `null` for no choice. */
+  defaultEffort?: number | null;
+  /** A stop the reader chose. The menu has no way back to `null`, so it never reports one. */
   onEffortChange?: (effort: number) => void;
-  /** Default `MODEL_PICKER_EFFORT_LEVELS`. */
+  /** Default `MODEL_PICKER_EFFORT_LEVELS`; `[]` drops the effort half of the menu. */
   effortLevels?: ReadonlyArray<string>;
 
   /** Controlled voice-input state (the mic swaps to equalizer bars). */