@oxy.so/bloom 3.2.0 → 3.3.0

package/src/ai-chat/context.ts

@@ -35,7 +35,11 @@ export function useAiChatPlatform(): AiChatPlatform {
   return platform;
 }
 
-/** What `AiChatShell` hands the chat container's mobile header. */
+/**
+ * What `AiChatShell` publishes: read it with `useAiChatShell()`. The chat
+ * container's mobile header runs on it, and so does anything a host needs to
+ * know about the frame around its own nav.
+ */
 export interface AiChatShellState {
   /** Below `xl`: the panel is a drawer and the mobile header shows. */
   compact: boolean;
@@ -43,7 +47,21 @@ export interface AiChatShellState {
   navCollapsed: boolean;
   hasNav: boolean;
   hasPanel: boolean;
+  /**
+   * Whether the nav is on screen at all: `true` from `lg` up (in flow) and,
+   * below it, only while the drawer is open.
+   *
+   * A closed drawer stays MOUNTED — it is translated offscreen, not removed —
+   * so a nav rendered into `mobileSidebar` is still focusable and still read by
+   * a screen reader unless its own tree says otherwise. This is the signal to
+   * hide it by: skip the tab order and mark the subtree hidden while it is
+   * `false`.
+   */
+  navPresented: boolean;
+  /** The in-flow sidebar is narrowed to its rail width (`sidebarCollapsed`). */
+  sidebarCollapsed: boolean;
   openNav: () => void;
+  closeNav: () => void;
   openPanel: () => void;
   panelLabel: string;
   panelIcon: AiChatShellIcon;

package/src/ai-chat/index.ts

@@ -15,6 +15,8 @@ export {
   AiChatUserMessage,
 } from './AiChatMessages';
 export { AiChatMobileHeader, AiChatResizeHandle, AiChatShell } from './AiChatShell';
+export { useAiChatShell } from './context';
+export type { AiChatShellState } from './context';
 export type {
   AiChatAssistantMessageProps,
   AiChatBulletListProps,
@@ -41,6 +43,7 @@ export type {
   AiChatShellLabels,
   AiChatShellProps,
   AiChatStrongProps,
+  AiChatThreadHandle,
   AiChatThreadProps,
   AiChatUserMessageProps,
 } from './types';

package/src/ai-chat/index.web.ts

@@ -17,6 +17,8 @@ export {
   AiChatUserMessage,
 } from './AiChatMessages';
 export { AiChatMobileHeader, AiChatResizeHandle, AiChatShell } from './AiChatShell';
+export { useAiChatShell } from './context';
+export type { AiChatShellState } from './context';
 export type {
   AiChatAssistantMessageProps,
   AiChatBulletListProps,
@@ -43,6 +45,7 @@ export type {
   AiChatShellLabels,
   AiChatShellProps,
   AiChatStrongProps,
+  AiChatThreadHandle,
   AiChatThreadProps,
   AiChatUserMessageProps,
 } from './types';

package/src/ai-chat/types.ts

@@ -1,5 +1,12 @@
 import type { ComponentType, ReactNode } from 'react';
-import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import type {
+  ImageSourcePropType,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 
 import type { CodeLanguage } from '../code';
 import type { BloomIconComponent } from '../icons/icon-component';
@@ -270,8 +277,12 @@ export interface AiChatContainerLabels {
 }
 
 export interface AiChatContainerProps {
-  /** The project crumb, after its folder glyph. */
-  project: string;
+  /**
+   * The project crumb, after its folder glyph. Omit it for a chat that belongs
+   * to no project: the breadcrumb is then the title alone, with no empty crumb
+   * and no folder glyph.
+   */
+  project?: string;
   /** The current chat crumb. */
   title: string;
   /** The project crumb's glyph. Default `RiFolderLine`. */
@@ -289,14 +300,78 @@ export interface AiChatContainerProps {
   working?: boolean;
   /** `AgentThinking`'s label. Default `'Thinking'`. */
   workingLabel?: string;
+  /**
+   * A layer filling the container, drawn ABOVE its own surface and BELOW every
+   * turn, header and composer — a host's wallpaper, gradient or animated field.
+   * It is clipped to the container's radius and never interactive
+   * (`pointerEvents: 'none'`), so an opaque node needs nothing else.
+   *
+   * Set `surface={false}` beside it when the node is translucent and should
+   * show what the container is sitting on rather than background-secondary.
+   */
+  background?: ReactNode;
+  /**
+   * Paint the container's own background-secondary surface. Default `true`;
+   * `false` leaves the root transparent.
+   */
+  surface?: boolean;
   labels?: AiChatContainerLabels;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
 
+/**
+ * What a `ref` on `AiChatThread` hands back: enough to drive the scroll a host
+ * cannot drive from props — a cursor jump, a restore, a follow of its own.
+ */
+export interface AiChatThreadHandle {
+  /** Jump to the newest turn. `animated` defaults to `true`. */
+  scrollToEnd: (options?: { animated?: boolean }) => void;
+  /** Scroll to an absolute offset, px from the top. `animated` defaults to `false`. */
+  scrollToOffset: (options: { offset: number; animated?: boolean }) => void;
+  /** The `ScrollView` itself, for anything this handle does not cover. */
+  getScrollView: () => ScrollView | null;
+}
+
 export interface AiChatThreadProps {
   /** The turns. The thread follows the newest one with a smooth scroll as it grows. */
   children: ReactNode;
+  /**
+   * Follow the newest turn as the content grows. Default `true` — the thread's
+   * behaviour since it shipped. `false` leaves every scroll to the host (and to
+   * the `ref`).
+   */
+  autoFollow?: boolean;
+  /** Animate the follow. Default `true`; `false` for a restore that must not be seen travelling. */
+  followAnimated?: boolean;
+  /**
+   * Follow only while the reader is within this many px of the bottom, measured
+   * before the growth. Omit to follow every growth (the default), which is what
+   * the thread has always done.
+   */
+  followThreshold?: number;
+  /**
+   * The reader came within `onStartReachedThreshold` of the top — a chat pages
+   * UPWARD, so this is its pagination signal, not `onEndReached`. It fires once
+   * per approach and re-arms when the reader leaves the zone.
+   */
+  onStartReached?: () => void;
+  /** Distance from the top that fires `onStartReached`, px. Default `300`. */
+  onStartReachedThreshold?: number;
+  /**
+   * Keep the reader on the same turn while a page lands ABOVE them: the growth
+   * that follows an `onStartReached` is added to the offset instead of moving
+   * the content under the reader. Default `false`, and inert without
+   * `onStartReached` — the thread only anchors growth it asked for.
+   *
+   * This is the web-safe half of `maintainVisibleContentPosition`, which
+   * react-native-web ignores.
+   */
+  maintainStartPosition?: boolean;
+  /** The raw scroll event, for a host tracking its own position. */
+  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  /** Default `16`. Only applied when something is listening to the scroll. */
+  scrollEventThrottle?: number;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
@@ -317,6 +392,15 @@ export interface AiChatShellLabels {
 export interface AiChatShellProps {
   /** The floating sidebar shown from `lg` (1024). */
   sidebar: ReactNode;
+  /**
+   * The in-flow sidebar's column width from `lg` up. Omit and the sidebar sizes
+   * itself, as it always has.
+   */
+  sidebarWidth?: number;
+  /** Narrow the in-flow sidebar to `collapsedSidebarWidth` — a host's icon rail. Default `false`. */
+  sidebarCollapsed?: boolean;
+  /** The collapsed column's width. Default `56`. */
+  collapsedSidebarWidth?: number;
   /** The flat sidebar revealed under the workspace below `lg`. Default: none (no nav drawer). */
   mobileSidebar?: ReactNode;
   /** The chat container. */
@@ -337,6 +421,23 @@ export interface AiChatShellProps {
   /** Controlled panel drawer (below `xl`). */
   panelOpen?: boolean;
   onPanelOpenChange?: (open: boolean) => void;
+  /**
+   * A layer filling the shell, drawn ABOVE its own background-full and BELOW
+   * the sidebar, workspace and drawers. Not interactive
+   * (`pointerEvents: 'none'`).
+   *
+   * The workspace paints background-full of its own, so a shell background is
+   * covered wherever the chat sits: pass `surface={false}` with it, which drops
+   * the paint on both, and let the chat's own `AiChatContainer` decide what it
+   * paints. A `background` on the container is the closer slot when the layer
+   * belongs to the chat rather than to the page.
+   */
+  background?: ReactNode;
+  /**
+   * Paint the shell's own background-full, on its root and on the workspace.
+   * Default `true`; `false` leaves both transparent.
+   */
+  surface?: boolean;
   labels?: AiChatShellLabels;
   style?: StyleProp<ViewStyle>;
   testID?: string;

package/src/app-shell/AppShellHeader.tsx

@@ -2,7 +2,8 @@ import React, { memo } from 'react';
 import { View, useWindowDimensions } from 'react-native';
 
 import { Button } from '../button';
-import { RiCloseLine, RiMenuLine } from '../icons/remix';
+import { RiCloseLine } from '../icons/remix/RiCloseLine';
+import { RiMenuLine } from '../icons/remix/RiMenuLine';
 import { BREAKPOINTS } from '../styles/breakpoints';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';

package/src/app-shell/AppShellMenuButton.tsx

@@ -1,7 +1,8 @@
 import React, { memo } from 'react';
 
 import { Button } from '../button';
-import { RiCloseLine, RiMenuLine } from '../icons/remix';
+import { RiCloseLine } from '../icons/remix/RiCloseLine';
+import { RiMenuLine } from '../icons/remix/RiMenuLine';
 import { useAppShell } from './context';
 import type { AppShellMenuButtonProps } from './types';
 

package/src/app-shell/NotificationBell.tsx

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import { Button } from '../button';
 import { colorRamp, DANGER_TABLE, resolveButtonRamps } from '../button/shared';
 import { useInteractionState } from '../hooks/use-interaction-state';
-import { RiNotificationLine } from '../icons/remix';
+import { RiNotificationLine } from '../icons/remix/RiNotificationLine';
 import { NotificationCenter } from '../notification-center';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { borderRadius } from '../styles/tokens';

package/src/auth-card/AuthCard.tsx

@@ -14,7 +14,7 @@ import { BUTTON_SHADOW, resolveButtonRamps } from '../button/shared';
 import { Checkbox } from '../checkbox';
 import { Divider } from '../divider';
 import { useInteractionStates } from '../hooks/use-interaction-state';
-import { RiMailCheckLine } from '../icons/remix';
+import { RiMailCheckLine } from '../icons/remix/RiMailCheckLine';
 import { InputOtp } from '../input-otp';
 import { SocialButton } from '../social-button';
 import { BREAKPOINTS } from '../styles/breakpoints';

package/src/calendar/CalendarViewEventDetails.tsx

@@ -3,14 +3,12 @@ import { Image, View, type ViewStyle } from 'react-native';
 
 import { Avatar } from '../avatar';
 import { Button } from '../button';
-import {
-  RiArrowRightLine,
-  RiCornerDownLeftLine,
-  RiGlobalLine,
-  RiGroupLine,
-  RiNotification2Line,
-  RiTimeLine,
-} from '../icons/remix';
+import { RiArrowRightLine } from '../icons/remix/RiArrowRightLine';
+import { RiCornerDownLeftLine } from '../icons/remix/RiCornerDownLeftLine';
+import { RiGlobalLine } from '../icons/remix/RiGlobalLine';
+import { RiGroupLine } from '../icons/remix/RiGroupLine';
+import { RiNotification2Line } from '../icons/remix/RiNotification2Line';
+import { RiTimeLine } from '../icons/remix/RiTimeLine';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { Text } from '../typography';
 import { useTheme } from '../theme/use-theme';

package/src/calendar/CalendarViewHeader.tsx

@@ -3,7 +3,8 @@ import { View } from 'react-native';
 
 import { Button } from '../button';
 import { formatMonthTitle } from '../date-picker/calendar-grid';
-import { RiAddFill, RiMenuLine } from '../icons/remix';
+import { RiAddFill } from '../icons/remix/RiAddFill';
+import { RiMenuLine } from '../icons/remix/RiMenuLine';
 import { Z_INDEX } from '../styles/z-index';
 import { Text } from '../typography';
 import { CalendarViewInboxMenu } from './CalendarViewInboxMenu';

package/src/calendar/CalendarViewInboxMenu.tsx

@@ -2,7 +2,9 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { Platform, Pressable, View, useWindowDimensions } from 'react-native';
 
 import { Button } from '../button';
-import { RiAddFill, RiInbox2Line, RiRssFill } from '../icons/remix';
+import { RiAddFill } from '../icons/remix/RiAddFill';
+import { RiInbox2Line } from '../icons/remix/RiInbox2Line';
+import { RiRssFill } from '../icons/remix/RiRssFill';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';

package/src/carousel/Carousel.tsx

@@ -23,7 +23,8 @@ import { useReducedMotion } from 'react-native-reanimated';
 
 import { Button } from '../button';
 import { resolveButtonRamps } from '../button/shared';
-import { RiArrowLeftSLine, RiArrowRightSLine } from '../icons/remix';
+import { RiArrowLeftSLine } from '../icons/remix/RiArrowLeftSLine';
+import { RiArrowRightSLine } from '../icons/remix/RiArrowRightSLine';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { useInteractiveWebCss } from '../styles/interactive-web-css';
 import { borderRadius } from '../styles/tokens';

package/src/chart-cards/BarListCard.tsx

@@ -13,7 +13,7 @@ import { useReducedMotion } from 'react-native-reanimated';
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 
 import { mixColor } from '../button/shared';
-import { RiArrowDownSLine } from '../icons/remix';
+import { RiArrowDownSLine } from '../icons/remix/RiArrowDownSLine';
 import { borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { Tabs, TabsTrigger } from '../tabs';

package/src/chart-cards/primitives/ChartRangePill.tsx

@@ -9,7 +9,9 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from '../../dropdown-menu';
-import { RiArrowDownSLine, RiCalendarLine, RiCheckLine } from '../../icons/remix';
+import { RiArrowDownSLine } from '../../icons/remix/RiArrowDownSLine';
+import { RiCalendarLine } from '../../icons/remix/RiCalendarLine';
+import { RiCheckLine } from '../../icons/remix/RiCheckLine';
 import { Text } from '../../typography';
 import type { ChartRangeOption } from './use-chart-range';
 import { useChartCardPalette } from './use-chart-palette';

package/src/chat-indicators/MessageStatus.tsx

@@ -1,12 +1,10 @@
 import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
-import {
-  RiCheckDoubleLine,
-  RiCheckLine,
-  RiErrorWarningFill,
-  RiTimeLine,
-} from '../icons/remix';
+import { RiCheckDoubleLine } from '../icons/remix/RiCheckDoubleLine';
+import { RiCheckLine } from '../icons/remix/RiCheckLine';
+import { RiErrorWarningFill } from '../icons/remix/RiErrorWarningFill';
+import { RiTimeLine } from '../icons/remix/RiTimeLine';
 import { useTheme } from '../theme/use-theme';
 import { MESSAGE_STATUS_LABELS, resolveChatIndicatorPaint } from './shared';
 import type { MessageStatusProps } from './types';

package/src/composer-panel/ComposerControls.tsx

@@ -16,6 +16,7 @@ import { paintToCssImage, type ButtonStatePaint } from '../button/shared';
 import { DISABLED_OPACITY } from '../styles/tokens';
 import { RiArrowUpLine } from '../icons/remix/RiArrowUpLine';
 import { RiMic2Line } from '../icons/remix/RiMic2Line';
+import { RiStopFill } from '../icons/remix/RiStopFill';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { CONTROL_SIZE, TRANSITION_MS, type ComposerPalette } from './shared';
 import { dataHook, IS_WEB } from './web-hooks';
@@ -239,3 +240,56 @@ export function SendButton({
     </Pressable>
   );
 }
+
+/**
+ * Stop — send's other state, drawn on the same disc so the action sits where the
+ * reader last pressed: the accent gradient (hover and active crossfading like
+ * send's) with a white 20px stop mark.
+ *
+ * It takes no `disabled`. The composer's `disabled` locks the draft for the
+ * whole turn, and the one thing that must stay possible for that whole turn is
+ * cancelling it.
+ */
+export function StopButton({
+  onPress,
+  label,
+  palette,
+}: {
+  onPress?: () => void;
+  label: string;
+  palette: ComposerPalette;
+}) {
+  const [hovered, setHovered] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const paint = palette.send;
+  const base = pressed ? paint.active : paint.rest;
+  const style: WebCssStyle = {
+    position: 'relative',
+    width: CONTROL_SIZE,
+    height: CONTROL_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 9999,
+    cursor: 'pointer',
+    '--bloom-composer-ring': palette.focusRing,
+  };
+  return (
+    <Pressable
+      {...dataHook('bloomComposerControl', 'stop')}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      onPress={onPress}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      style={style}>
+      <GradientFill paint={base} />
+      <GradientFill paint={paint.hover} opacity={hovered && !pressed ? 1 : 0} />
+      {/* Its own positioned box, so it paints above the absolutely placed fills. */}
+      <View pointerEvents="none" style={{ position: 'relative', width: 20, height: 20 }}>
+        <RiStopFill width={20} height={20} fill="#ffffff" />
+      </View>
+    </Pressable>
+  );
+}

package/src/composer-panel/ComposerPanelBase.tsx

@@ -22,7 +22,7 @@ import { useTheme } from '../theme/use-theme';
 import { TYPE_SCALE } from '../typography';
 import { AddMenu } from './AddMenu';
 import { AttachmentStrip } from './AttachmentStrip';
-import { MicButton, SendButton } from './ComposerControls';
+import { MicButton, SendButton, StopButton } from './ComposerControls';
 import { ModelPickerBase } from './ModelPickerBase';
 import { PermissionMenu } from './PermissionMenu';
 import {
@@ -48,6 +48,7 @@ const DEFAULT_LABELS: Required<ComposerPanelLabels> = {
   learnMore: 'Learn more',
   voice: 'Voice input',
   send: 'Send message',
+  stop: 'Stop generating',
   remove: 'Remove',
 };
 
@@ -107,7 +108,8 @@ function Collapse({ open, children }: { open: boolean; children: React.ReactNode
  *   body          pt 6, prompt → controls 20
  *   prompt        px 6, body-regular, grows 20px a line up to 200 then scrolls
  *   controls      left: add + permission (8 apart); right: model picker, 16,
- *                 then mic + send (8 apart)
+ *                 then mic + send (8 apart); `busy` + `onStop` puts the stop
+ *                 control where send was, outside `disabled`'s reach
  *
  * Takes its panel implementation from the family's platform binding.
  */
@@ -116,6 +118,8 @@ export function ComposerPanelBase({
   defaultValue = '',
   onValueChange,
   onSubmit,
+  onStop,
+  busy = false,
   disabled = false,
   placeholder = 'Hi, what do you need today?',
   permissions = COMPOSER_PANEL_PERMISSIONS,
@@ -188,10 +192,10 @@ export function ComposerPanelBase({
   );
 
   const submit = useCallback(() => {
-    if (disabled) return;
+    if (disabled || busy) return;
     onSubmit?.(text);
     if (value === undefined) setText('');
-  }, [disabled, onSubmit, text, value, setText]);
+  }, [disabled, busy, onSubmit, text, value, setText]);
 
   const onKeyPress = useCallback(
     (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
@@ -310,7 +314,11 @@ export function ComposerPanelBase({
                   label={labels.voice}
                   palette={palette}
                 />
-                <SendButton disabled={disabled} onPress={submit} label={labels.send} palette={palette} />
+                {busy && onStop ? (
+                  <StopButton onPress={onStop} label={labels.stop} palette={palette} />
+                ) : (
+                  <SendButton disabled={disabled} onPress={submit} label={labels.send} palette={palette} />
+                )}
               </View>
             </View>
           </View>