@oxy.so/bloom 4.12.0 → 4.13.0

package/src/ai-chat/AiChatShell.tsx

@@ -22,13 +22,15 @@ import { useControllableState } from '../hooks/use-controllable-state';
 import { RiCloseLine } from '../icons/remix/RiCloseLine';
 import { RiCodeSLine } from '../icons/remix/RiCodeSLine';
 import { RiMenuLine } from '../icons/remix/RiMenuLine';
-import type { WebCssStyle } from '../styles/web-view-style';
+import { WEB_OVERFLOW_CLIP, WEB_POSITION_FIXED, WEB_VIEWPORT_HEIGHT, type WebCssStyle } from '../styles/web-view-style';
 import { Text } from '../typography';
-import { AiChatShellContext, useAiChatShell, type AiChatShellState } from './context';
+import { AiChatDocumentGutterContext, AiChatShellContext, useAiChatShell, type AiChatShellState } from './context';
 import {
   dataHook,
+  DOCUMENT_RAIL,
   IS_WEB,
   PANEL_BREAKPOINT,
+  SHELL_GUTTER,
   SIDEBAR_BREAKPOINT,
   useAiChatPalette,
   useAiChatWebCss,
@@ -319,6 +321,7 @@ export function AiChatShell({
   onPanelOpenChange,
   background,
   surface = true,
+  scroll = 'container',
   labels,
   style,
   testID,
@@ -328,6 +331,12 @@ export function AiChatShell({
   const reducedMotion = useReducedMotion();
   const l = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);
   const { width: windowWidth } = useWindowDimensions();
+  // Native has no document: `document` is `container` there.
+  const documentScroll = IS_WEB && scroll === 'document';
+  // What covers the screen — the drawers, the backdrop, a shell background —
+  // is `fixed` over a scrolling document: `absolute` would cover the page and
+  // scroll away with it.
+  const overlayPosition = documentScroll ? WEB_POSITION_FIXED : 'absolute';
   const wide = windowWidth >= PANEL_BREAKPOINT;
   const navInFlow = windowWidth >= SIDEBAR_BREAKPOINT;
 
@@ -523,6 +532,7 @@ export function AiChatShell({
       // In flow it is always on screen; as a drawer, only while it is open.
       navPresented: navInFlow ? !!sidebar : navOpen,
       sidebarCollapsed,
+      documentScroll,
       openNav: () => {
         setPanelOpen(false);
         setNavOpen(true);
@@ -542,6 +552,7 @@ export function AiChatShell({
       navOpen,
       sidebar,
       sidebarCollapsed,
+      documentScroll,
       mobileSidebar,
       panel,
       setPanelOpen,
@@ -555,11 +566,13 @@ export function AiChatShell({
   const rootStyle: WebCssStyle = {
     position: 'relative',
     width: '100%',
-    height: '100%',
+    // A document-scrolled shell is at least one screen and grows with the
+    // chat. `clip`, not `hidden`, so it is not a scroll container of its own
+    // and the sticky columns inside still stick to the screen.
+    ...(documentScroll ? { minHeight: WEB_VIEWPORT_HEIGHT, overflow: WEB_OVERFLOW_CLIP } : { height: '100%', overflow: 'hidden' }),
     flexDirection: 'row',
     gap: 16,
-    overflow: 'hidden',
-    padding: 12,
+    padding: SHELL_GUTTER,
     backgroundColor: surface ? palette.full : 'transparent',
   };
 
@@ -567,6 +580,7 @@ export function AiChatShell({
 
   return (
     <AiChatShellContext.Provider value={shellState}>
+      <AiChatDocumentGutterContext.Provider value={documentScroll && surface ? palette.full : null}>
       <View
         {...dataHook('bloomAiChatDragging', dragging ? 'on' : '')}
         {...(navSwipeArmed ? navSwipe.panHandlers : null)}
@@ -574,7 +588,7 @@ export function AiChatShell({
         onLayout={(event: LayoutChangeEvent) => setShellWidth(event.nativeEvent.layout.width)}
         style={[rootStyle, style]}>
         {background ? (
-          <View pointerEvents="none" style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
+          <View pointerEvents="none" style={{ position: overlayPosition, top: 0, left: 0, right: 0, bottom: 0 }}>
             {background}
           </View>
         ) : null}
@@ -582,7 +596,7 @@ export function AiChatShell({
           <View
             aria-hidden={!navOpen}
             pointerEvents={navOpen ? 'box-none' : 'none'}
-            style={{ position: 'absolute', top: 0, bottom: 0, left: 0, zIndex: 10, width: 272, paddingTop: 12, paddingBottom: 12, paddingLeft: 6 }}>
+            style={{ position: overlayPosition, top: 0, bottom: 0, left: 0, zIndex: 10, width: 272, paddingTop: 12, paddingBottom: 12, paddingLeft: 6 }}>
             <Animated.View
               pointerEvents={navOpen ? 'auto' : 'none'}
               style={[{ height: '100%', width: 260, transformOrigin: 'left' }, railStyle]}>
@@ -594,9 +608,8 @@ export function AiChatShell({
         {navInFlow ? (
           <View
             style={{
-              position: 'relative',
+              ...(documentScroll ? DOCUMENT_RAIL : { position: 'relative', height: '100%' }),
               zIndex: 10,
-              height: '100%',
               // Untouched unless the host asked for a width: the sidebar has
               // always sized itself.
               ...(sidebarCollapsed
@@ -618,7 +631,7 @@ export function AiChatShell({
               flex: 1,
               flexDirection: 'column',
               gap: 8,
-              overflow: 'hidden',
+              overflow: documentScroll ? WEB_OVERFLOW_CLIP : 'hidden',
               backgroundColor: surface ? palette.full : 'transparent',
             },
             navInFlow ? null : workspaceStyle,
@@ -636,7 +649,12 @@ export function AiChatShell({
               />
             </Animated.View>
           ) : null}
-          <View style={{ minHeight: 0, minWidth: 0, flex: 1, flexDirection: 'row', gap: 12, overflow: 'hidden' }}>
+          <View
+            style={
+              documentScroll
+                ? { minWidth: 0, flexGrow: 1, flexDirection: 'row', gap: 12 }
+                : { minHeight: 0, minWidth: 0, flex: 1, flexDirection: 'row', gap: 12, overflow: 'hidden' }
+            }>
             <View style={{ position: 'relative', minWidth: 0, flex: 1, flexBasis: 0, flexDirection: 'row' }}>
               {children}
               {wide && panel ? (
@@ -649,7 +667,14 @@ export function AiChatShell({
                 />
               ) : null}
             </View>
-            {wide && panel ? panel(panelWidth) : null}
+            {wide && panel ? (
+              documentScroll ? (
+                // A row, so the panel stretches to the rail's height.
+                <View style={[DOCUMENT_RAIL, { flexDirection: 'row' }]}>{panel(panelWidth)}</View>
+              ) : (
+                panel(panelWidth)
+              )
+            ) : null}
           </View>
         </Animated.View>
 
@@ -657,7 +682,7 @@ export function AiChatShell({
           <View
             aria-hidden={!panelOpen}
             pointerEvents={panelOpen ? 'auto' : 'none'}
-            style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 50 }}>
+            style={{ position: overlayPosition, top: 0, left: 0, right: 0, bottom: 0, zIndex: 50 }}>
             <Animated.View style={[{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, backdropStyle]}>
               <Pressable
                 accessibilityRole="button"
@@ -707,6 +732,7 @@ export function AiChatShell({
           </View>
         ) : null}
       </View>
+      </AiChatDocumentGutterContext.Provider>
     </AiChatShellContext.Provider>
   );
 }

package/src/ai-chat/context.ts

@@ -60,6 +60,12 @@ export interface AiChatShellState {
   navPresented: boolean;
   /** The in-flow sidebar is narrowed to its rail width (`sidebarCollapsed`). */
   sidebarCollapsed: boolean;
+  /**
+   * The page scrolls the DOCUMENT (`scroll="document"`, web). The container
+   * pins its chrome to the screen and the thread follows the window instead of
+   * a `ScrollView` of its own.
+   */
+  documentScroll: boolean;
   openNav: () => void;
   closeNav: () => void;
   openPanel: () => void;
@@ -76,6 +82,15 @@ export type AiChatShellIcon = BloomIconComponent;
 
 export const AiChatShellContext = createContext<AiChatShellState | null>(null);
 
+/**
+ * Internal: what a document-scrolled shell tells the card inside it — the
+ * colour of the gutter around the card, which the card's pinned frame paints
+ * over whatever of the conversation scrolls into it. `null` when the page is
+ * not document-scrolled, or when the shell paints no surface of its own and
+ * there is no known colour to mask with.
+ */
+export const AiChatDocumentGutterContext = createContext<string | null>(null);
+
 export function useAiChatShell(): AiChatShellState | null {
   return useContext(AiChatShellContext);
 }

package/src/ai-chat/shared.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from 'react';
-import { Platform } from 'react-native';
+import { Platform, type ViewStyle } from 'react-native';
 
 import {
   BUTTON_SHADOW,
@@ -7,6 +7,11 @@ import {
   type Ramp,
 } from '../button/shared';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import {
+  WEB_POSITION_STICKY,
+  webViewportHeightMinus,
+  type WebCssStyle,
+} from '../styles/web-view-style';
 import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 
@@ -107,6 +112,39 @@ export const PANEL_BREAKPOINT = 1280;
 /** The sidebar sits in flow from `lg`; below it becomes a push drawer. */
 export const SIDEBAR_BREAKPOINT = 1024;
 
+/** The shell's padding: the gutter around its columns, px. */
+export const SHELL_GUTTER = 12;
+
+/**
+ * `scroll="document"`: a column pinned to the viewport while the document
+ * scrolls under it — the sidebar and the panel. One screen tall less the
+ * gutter above and below, so it closes where the page does; `flex-start` so
+ * the row's stretch does not make it as tall as the page, which would leave the
+ * sticky box nowhere to move.
+ */
+export const DOCUMENT_RAIL: WebCssStyle = {
+  position: WEB_POSITION_STICKY,
+  top: SHELL_GUTTER,
+  height: webViewportHeightMinus(SHELL_GUTTER * 2),
+  alignSelf: 'flex-start',
+  flexShrink: 0,
+};
+
+/**
+ * `scroll="document"`: a layer the size of the visible card that takes no room
+ * in the flow — pinned like the rail, then pulled back out of the layout by an
+ * equal negative margin, so what follows it starts where it does. The card's
+ * frame and its `background` slot are drawn on it: the card grows with the
+ * conversation, the layer stays the size of the screen.
+ */
+export const DOCUMENT_LAYER: WebCssStyle = {
+  position: WEB_POSITION_STICKY,
+  top: SHELL_GUTTER,
+  height: webViewportHeightMinus(SHELL_GUTTER * 2),
+  marginBottom: `calc(-100dvh + ${SHELL_GUTTER * 2}px)` as ViewStyle['marginBottom'],
+  borderRadius: CONTAINER_RADIUS,
+};
+
 // ---------------------------------------------------------------------------
 //  Web
 // ---------------------------------------------------------------------------
@@ -132,7 +170,10 @@ const STYLE_ID = 'bloom-ai-chat-web-css';
  * - the generated image's feathered radial reveal, a registered `--bloom-ai-reveal`
  *   percentage transitioning 0% → 132% over 1550ms;
  * - the resize grip's hover reveal;
- * - the composer field's placeholder colour.
+ * - the composer field's placeholder colour;
+ * - the document-scrolled card's frame, clipped to its gutter (RN-web drops
+ *   `clip-path` from `style`), and its thread out of the browser's scroll
+ *   anchoring.
  */
 export const AI_CHAT_WEB_CSS = `
 @property --bloom-ai-reveal {
@@ -158,6 +199,8 @@ export const AI_CHAT_WEB_CSS = `
 [data-bloom-ai-chat-zoom="in"] { cursor: zoom-in; }
 [data-bloom-ai-chat-zoom="out"] { cursor: zoom-out; }
 [data-bloom-ai-chat-zoom]:focus-visible { box-shadow: inset 0 0 0 2px var(--bloom-ai-chat-ring); }
+[data-bloom-ai-chat-frame] { clip-path: inset(-${SHELL_GUTTER}px -1px); }
+[data-bloom-ai-chat-thread] { overflow-anchor: none; }
 [data-bloom-ai-chat-scroll="thin"] { scrollbar-width: thin; }
 [data-bloom-ai-chat-scroll="none"] { scrollbar-width: none; }
 [data-bloom-ai-chat-scroll="none"]::-webkit-scrollbar { display: none; }

package/src/ai-chat/types.ts

@@ -470,6 +470,25 @@ export interface AiChatShellProps {
    * Default `true`; `false` leaves both transparent.
    */
   surface?: boolean;
+  /**
+   * What scrolls the page — `AppShell`'s contract.
+   *
+   * - `container` (default) — the shell fills its parent and the conversation
+   *   scrolls inside the card, in the thread's own `ScrollView`.
+   * - `document` — WEB: the chat grows the document and the browser scrolls it:
+   *   the page's scrollbar, scroll restoration, the mobile address bar
+   *   collapsing and `window.scrollTo` all behave as on any page. The sidebar
+   *   and the panel stay pinned (`position: sticky`); the chat's header and
+   *   composer float over the conversation, pinned to the top and the bottom of
+   *   the screen, and it passes behind them. The drawers and the backdrop are
+   *   `position: fixed`, so they cover the screen rather than the page.
+   *
+   *   Nothing between the shell and the document may be a scroll container: an
+   *   app's `html`/`body`/root reset of `height: 100%; overflow: hidden` pins
+   *   everything to one screen, so it has to let the document grow. Native has
+   *   no document and treats it as `container`.
+   */
+  scroll?: 'container' | 'document';
   labels?: AiChatShellLabels;
   style?: StyleProp<ViewStyle>;
   testID?: string;