feat(chat): fade messages into the background at the list edges (#254)

Resolves #253.

Messages were clipped mid-line at the top of the list and at the chat
bar. The list now runs the full height of the screen so messages scroll
underneath the bar, and background-coloured gradients at both edges let
them dissolve instead of cutting off.

- ChatBar is an absolute overlay rather than a spacer taking layout
space; Messages takes its height as chatBarInset to keep the last
message resting above it and to size the bottom fade.
- ChatBar reports its baseline height instead of the live one, and
re-measures when the safe-area inset changes, so switching Android
navigation modes or rotating does not leave a stale baseline.
- On Android the bottom ramp reaches full opacity at the top of the
system navigation bar, driven entirely by insets.bottom, so gesture and
three-button modes both follow without a special case.
- Fades leave a right-edge gutter so they do not paint over the scroll
indicator, and are drawn below the scroll-to-bottom button so it keeps
receiving taps.

The layout and the Android navigation-bar handling were confirmed on a
physical device in both navigation modes. The later changes — scroll
indicator gutter, style memoisation, comment cleanup — are lint, type
and unit tested only, not yet re-checked on device.

Author: kfaracik

__tests__/useKeyboardLift.test.ts

@@ -0,0 +1,77 @@
+import { renderHook } from '@testing-library/react-native';
+import { useKeyboardLift } from '../components/chat-screen/useKeyboardLift';
+
+let mockInsetsBottom = 0;
+const mockHeight = { value: 0 };
+const mockProgress = { value: 0 };
+
+jest.mock('../context/ThemeContext', () => ({
+  useTheme: () => ({
+    theme: {
+      insets: { top: 0, bottom: mockInsetsBottom, left: 0, right: 0 },
+    },
+  }),
+}));
+
+jest.mock('react-native-keyboard-controller', () => ({
+  useReanimatedKeyboardAnimation: () => ({
+    height: mockHeight,
+    progress: mockProgress,
+  }),
+}));
+
+describe('useKeyboardLift', () => {
+  beforeEach(() => {
+    mockHeight.value = 0;
+    mockProgress.value = 0;
+    mockInsetsBottom = 0;
+  });
+
+  it('returns 0 when the keyboard is closed', () => {
+    const { result } = renderHook(() => useKeyboardLift());
+
+    expect(result.current.value).toBe(0);
+  });
+
+  it('gives back the bottom inset the open keyboard swallows', () => {
+    mockInsetsBottom = 34;
+    mockHeight.value = -346;
+    mockProgress.value = 1;
+
+    const { result } = renderHook(() => useKeyboardLift());
+
+    expect(result.current.value).toBe(-312);
+  });
+
+  it('scales the inset compensation with keyboard progress', () => {
+    mockInsetsBottom = 34;
+    mockHeight.value = -173;
+    mockProgress.value = 0.5;
+
+    const { result } = renderHook(() => useKeyboardLift());
+
+    expect(result.current.value).toBe(-156);
+  });
+
+  it('equals the raw keyboard height on a device without a bottom inset', () => {
+    mockHeight.value = -300;
+    mockProgress.value = 1;
+
+    const { result } = renderHook(() => useKeyboardLift());
+
+    expect(result.current.value).toBe(-300);
+  });
+
+  it('recomputes after the keyboard values change', () => {
+    mockInsetsBottom = 34;
+    const { result, rerender } = renderHook(() => useKeyboardLift());
+
+    expect(result.current.value).toBe(0);
+
+    mockHeight.value = -346;
+    mockProgress.value = 1;
+    rerender({});
+
+    expect(result.current.value).toBe(-312);
+  });
+});

app/(drawer)/_layout.tsx

@@ -55,7 +55,13 @@ const DrawerLayout = () => {
           title: 'Benchmark',
         }}
       />
-      <Drawer.Screen name="chat/[id]" />
+      <Drawer.Screen
+        name="chat/[id]"
+        options={{
+          headerTransparent: true,
+          headerStyle: { backgroundColor: 'transparent' },
+        }}
+      />
     </Drawer>
   );
 };

app/(drawer)/chat/[id].tsx

@@ -58,14 +58,13 @@ function ChatScreenInner() {
   const isEmpty = !isLoading && activeChatMessages.length === 0;
   const shouldExitOnBack = isPhantom && isEmpty;
   const openModelSheetRef = useRef<(() => void) | null>(null);
+  const openModelSheet = useCallback(() => openModelSheetRef.current?.(), []);
 
-  const { MenuElements } = useChatHeader({
+  const { MenuElements, titleBottom } = useChatHeader({
     chatId: chatId,
     chatModel: model,
     isEmpty,
-    onSelectModelFromTitle: isPhantom
-      ? () => openModelSheetRef.current?.()
-      : undefined,
+    onSelectModelFromTitle: isPhantom ? openModelSheet : undefined,
   });
 
   useFocusEffect(
@@ -141,6 +140,7 @@ function ChatScreenInner() {
         selectModel={handleSetModel}
         openModelSheetRef={openModelSheetRef}
         revealFromTop={shouldPlayBranchEntryAnimation}
+        headerTitleBottom={titleBottom}
       />
       {MenuElements}
     </>

components/chat-screen/ChatBar.tsx

@@ -105,6 +105,11 @@ const ChatBar = ({
 
   const defaultBarHeight = useRef(0);
   const prevBarHeight = useRef(0);
+
+  // Inset the baseline was captured with. Checked in the layout handler, not
+  // an effect: onLayout fires first, so an effect-driven reset would lose the
+  // pass carrying the new height.
+  const baselineInset = useRef<number | null>(null);
   const textInputRef = useRef<RNTextInput>(null);
   // iOS-only: bump the TextInput key to force a remount when a prompt
   // suggestion is set programmatically. iOS doesn't re-fire onLayout
@@ -138,12 +143,19 @@ const ChatBar = ({
   const handleBarLayoutForPadding = useCallback(
     (e: { nativeEvent: { layout: { height: number } } }) => {
       const height = e.nativeEvent.layout.height;
+      const inset = theme.insets.bottom;
       // Only capture the default height once we're in the "with messages"
       // layout — otherwise the empty-state extras (WhatsNewCard, prompt
       // suggestions) would bake into the baseline and squeeze the scroll
-      // view once they disappear.
-      if (defaultBarHeight.current === 0 && hasMessages) {
+      // view once they disappear. Re-capture on inset changes (Android
+      // navigation mode, rotation), or the stale baseline reads the difference
+      // as "the bar grew".
+      if (
+        hasMessages &&
+        (defaultBarHeight.current === 0 || baselineInset.current !== inset)
+      ) {
         defaultBarHeight.current = height;
+        baselineInset.current = inset;
       }
       const baseline = defaultBarHeight.current || height;
       const delta = height - baseline;
@@ -153,14 +165,22 @@ const ChatBar = ({
           easing: BAR_GROW_EASING,
         })
       );
+      // Baseline, not live height — consumers must not follow the bar as it
+      // grows with typed lines; that is what extraContentPadding is for.
       onHeightChange?.(hasMessages ? baseline : 0);
       const grew = height > prevBarHeight.current;
       prevBarHeight.current = height;
       if (delta > 0 && grew) {
         onBarGrow?.();
       }
     },
-    [extraContentPadding, onBarGrow, onHeightChange, hasMessages]
+    [
+      extraContentPadding,
+      onBarGrow,
+      onHeightChange,
+      hasMessages,
+      theme.insets.bottom,
+    ]
   );
 
   const {

components/chat-screen/ChatScreen.tsx

@@ -8,7 +8,8 @@ import React, {
 import { Keyboard, StyleSheet, useWindowDimensions, View } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import { BottomSheetModal } from '@gorhom/bottom-sheet';
-import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
+import { useHeaderHeight } from '@react-navigation/elements';
+import { useKeyboardLift } from './useKeyboardLift';
 import { router } from 'expo-router';
 import Animated, {
   useAnimatedStyle,
@@ -62,6 +63,7 @@ interface Props {
   selectModel?: (model: Model) => Promise<void>;
   openModelSheetRef?: React.MutableRefObject<(() => void) | null>;
   revealFromTop?: boolean;
+  headerTitleBottom?: number;
 }
 
 const prepareContext = async (
@@ -89,6 +91,7 @@ export default function ChatScreen({
   selectModel,
   openModelSheetRef,
   revealFromTop = false,
+  headerTitleBottom,
 }: Props) {
   const inputRef = useRef<{
     clear: () => void;
@@ -119,17 +122,11 @@ export default function ChatScreen({
 
   const { theme } = useTheme();
   const styles = useMemo(() => createStyles(theme), [theme]);
+  const headerHeight = useHeaderHeight();
 
-  const { height: keyboardHeight, progress: keyboardProgress } =
-    useReanimatedKeyboardAnimation();
-  const insetsBottom = theme.insets.bottom;
+  const keyboardLift = useKeyboardLift();
   const chatBarStickyStyle = useAnimatedStyle(() => ({
-    transform: [
-      {
-        translateY:
-          keyboardHeight.value + keyboardProgress.value * insetsBottom,
-      },
-    ],
+    transform: [{ translateY: keyboardLift.value }],
   }));
 
   const { settings: chatSettings, setSetting } = useChatSettings(chatId);
@@ -140,7 +137,7 @@ export default function ChatScreen({
   // Shared values for KeyboardChatScrollView
   const extraContentPadding = useSharedValue(0);
   const blankSpace = useSharedValue(0);
-  const [chatBarSpacerHeight, setChatBarSpacerHeight] = useState(0);
+  const [chatBarHeight, setChatBarHeight] = useState(0);
   const [rootFrame, setRootFrame] = useState({ x: 0, y: 0 });
   const [userActionMenu, setUserActionMenu] =
     useState<UserMessageActionMenuState>({ isOpen: false });
@@ -149,6 +146,11 @@ export default function ChatScreen({
       chatId,
       messageHistoryLength: messageHistory.length,
     });
+  const handleBarGrow = useCallback(() => {
+    setTimeout(() => {
+      messagesRef.current?.scrollToEndIfAtBottom();
+    }, 100);
+  }, []);
 
   // Freeze the scroll view's layout whenever any overlay (model picker,
   // attachment sheet) is presented so keyboard dismiss → sheet open doesn't
@@ -165,12 +167,14 @@ export default function ChatScreen({
 
   const handleRootLayout = useCallback(() => {
     rootRef.current?.measureInWindow((x, y) => {
-      setRootFrame({ x, y });
+      setRootFrame((current) =>
+        current.x === x && current.y === y ? current : { x, y }
+      );
     });
   }, []);
 
   const handleChatBarHeightChange = useCallback((height: number) => {
-    setChatBarSpacerHeight((current) =>
+    setChatBarHeight((current) =>
       Math.abs(current - height) > LAYOUT_HEIGHT_CHANGE_THRESHOLD
         ? height
         : current
@@ -395,6 +399,11 @@ export default function ChatScreen({
     };
   }, [rootFrame.x, rootFrame.y, userActionMenu, windowWidth]);
 
+  const fadeBottom =
+    headerTitleBottom !== undefined
+      ? headerTitleBottom - rootFrame.y
+      : undefined;
+
   return (
     <View
       ref={rootRef}
@@ -425,38 +434,30 @@ export default function ChatScreen({
           onForkMessage={handleForkMessage}
           onBranchMarkerPress={handleBranchMarkerPress}
           onUserActionMenuChange={setUserActionMenu}
+          chatBarInset={chatBarHeight}
+          topInset={headerHeight}
+          fadeBottom={fadeBottom}
         />
       </View>
 
-      <View
-        style={[
-          styles.chatBarSpacer,
-          chatBarSpacerHeight > 0 && { height: chatBarSpacerHeight },
-        ]}
-      >
-        <Animated.View style={[styles.chatBarSticky, chatBarStickyStyle]}>
-          <ChatBar
-            chatId={chatId}
-            onSend={handleSendMessage}
-            onSelectModel={handlePresentModelSheet}
-            onSelectPrompt={handleSelectPrompt}
-            ref={inputRef}
-            model={model}
-            isVisionModel={model?.vision === true}
-            extraContentPadding={extraContentPadding}
-            thinkingEnabled={chatSettings?.thinkingEnabled || false}
-            onThinkingToggle={handleThinkingToggle}
-            hasMessages={hasMessages}
-            onAttachmentSheetStateChange={setAttachmentSheetOpen}
-            onHeightChange={handleChatBarHeightChange}
-            onBarGrow={() => {
-              setTimeout(() => {
-                messagesRef.current?.scrollToEndIfAtBottom();
-              }, 100);
-            }}
-          />
-        </Animated.View>
-      </View>
+      <Animated.View style={[styles.chatBarSticky, chatBarStickyStyle]}>
+        <ChatBar
+          chatId={chatId}
+          onSend={handleSendMessage}
+          onSelectModel={handlePresentModelSheet}
+          onSelectPrompt={handleSelectPrompt}
+          ref={inputRef}
+          model={model}
+          isVisionModel={model?.vision === true}
+          extraContentPadding={extraContentPadding}
+          thinkingEnabled={chatSettings?.thinkingEnabled || false}
+          onThinkingToggle={handleThinkingToggle}
+          hasMessages={hasMessages}
+          onAttachmentSheetStateChange={setAttachmentSheetOpen}
+          onHeightChange={handleChatBarHeightChange}
+          onBarGrow={handleBarGrow}
+        />
+      </Animated.View>
 
       {userActionMenuPosition && (
         <View
@@ -488,11 +489,6 @@ const createStyles = (theme: Theme) =>
       elevation: 1,
       overflow: 'visible',
     },
-    chatBarSpacer: {
-      overflow: 'visible',
-      zIndex: 2,
-      elevation: 2,
-    },
     userActionMenuOverlay: {
       position: 'absolute',
       zIndex: 1000,
@@ -503,5 +499,7 @@ const createStyles = (theme: Theme) =>
       bottom: 0,
       left: 0,
       right: 0,
+      zIndex: 2,
+      elevation: 2,
     },
   });