@repzo/widget-react-native 1.0.4 → 1.0.5

package/lib/typescript/module/ui/WidgetProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetProvider.d.ts","sourceRoot":"","sources":["../../../../src/ui/WidgetProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAwCH,MAAM,WAAW,wBAAwB;IACvC,oEAAoE;IACpE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;CAChD;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,iBAA+B,GAChC,EAAE,wBAAwB,+BA6Z1B"}
+{"version":3,"file":"WidgetProvider.d.ts","sourceRoot":"","sources":["../../../../src/ui/WidgetProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAkDH,MAAM,WAAW,wBAAwB;IACvC,oEAAoE;IACpE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;CAChD;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,iBAA+B,GAChC,EAAE,wBAAwB,+BAwb1B"}

package/lib/typescript/module/ui/components/Gradient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gradient.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/Gradient.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AA4BhF;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE;IACD,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,+BAmBA;AAoCD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAqB,EACrB,MAAW,EACX,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,+BA6BA"}
+{"version":3,"file":"Gradient.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/Gradient.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AA4BhF;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE;IACD,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,+BAmBA;AAoDD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAqB,EACrB,MAAW,EACX,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,+BA8BA"}

package/lib/typescript/module/ui/hooks/use-top-inset.d.ts

@@ -0,0 +1,11 @@
+/**
+ * How far a screen's header must reach up to sit under the status bar.
+ *
+ * The messenger draws edge to edge. Screens with a brand header (home, chat)
+ * extend that header's background into the status-bar area instead of leaving
+ * a white strip above it; the provider gives them the inset through this
+ * context and pads every other screen itself, so this is 0 for them.
+ */
+export declare const TopInsetContext: import("react").Context<number>;
+export declare function useTopInset(): number;
+//# sourceMappingURL=use-top-inset.d.ts.map

package/lib/typescript/module/ui/hooks/use-top-inset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-top-inset.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/use-top-inset.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,eAAO,MAAM,eAAe,iCAAmB,CAAC;AAEhD,wBAAgB,WAAW,IAAI,MAAM,CAEpC"}

package/lib/typescript/module/ui/screens/chat/ChatView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatView.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/chat/ChatView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAoDH,OAAO,KAAK,EAAc,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAElE,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,OAAO,EACP,eAAe,EACf,WAAW,EACX,KAAK,EACL,SAAS,EACT,WAAW,EACX,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,WAAgB,EAChB,cAAc,EACd,MAAM,EACN,WAAW,EACX,cAAc,EACd,MAAM,EACN,iBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,OAAO,GACR,EAAE,aAAa,+BAwhBf"}
+{"version":3,"file":"ChatView.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/chat/ChatView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAqDH,OAAO,KAAK,EAAc,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAElE,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,OAAO,EACP,eAAe,EACf,WAAW,EACX,KAAK,EACL,SAAS,EACT,WAAW,EACX,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,WAAgB,EAChB,cAAc,EACd,MAAM,EACN,WAAW,EACX,cAAc,EACd,MAAM,EACN,iBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,OAAO,GACR,EAAE,aAAa,+BA8hBf"}

package/lib/typescript/module/ui/screens/home/HomeView.d.ts

@@ -12,6 +12,13 @@
  * the visitor already has; nothing here assumes a field the backend does not
  * send today.
  */
+import type { WidgetConfig } from '../../../types';
 import type { HomeViewProps } from './HomeView.types';
+/**
+ * The admin's explicit black/white toggle always wins. Older configs can omit
+ * it, and defaulting to dark text over a dark brand header is unreadable, so
+ * derive something legible from the background instead.
+ */
+export declare function resolveHeaderTextColor(config: WidgetConfig | null, fallbackColor: string): string;
 export declare function HomeView({ config, color, visitorName, conversationCount, recentConversations, unreadByConversation, teamAgents, isOnline, offlineMessage, startConversationLabel, replyTimeLabel, allowNewConversations, showPreviousConversations, labels, onClose, onStartConversation, onViewConversations, onOpenConversation, }: HomeViewProps): import("react").JSX.Element;
 //# sourceMappingURL=HomeView.d.ts.map

package/lib/typescript/module/ui/screens/home/HomeView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HomeView.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/home/HomeView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAqCH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAiBtD,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,KAAK,EACL,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,EACpB,UAAU,EACV,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,cAAc,EACd,qBAAqB,EACrB,yBAAyB,EACzB,MAAM,EACN,OAAO,EACP,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,GACnB,EAAE,aAAa,+BAkNf"}
+{"version":3,"file":"HomeView.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/home/HomeView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAcH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA2BnD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,EAAE,aAAa,EAAE,MAAM,GAAG,MAAM,CAQjG;AAED,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,KAAK,EACL,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,EACpB,UAAU,EACV,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,cAAc,EACd,qBAAqB,EACrB,yBAAyB,EACzB,MAAM,EACN,OAAO,EACP,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,GACnB,EAAE,aAAa,+BAmNf"}

package/lib/typescript/module/ui/screens/home/HomeView.styles.d.ts

@@ -16,6 +16,9 @@ export declare const START_CARD_LIFT = 28;
 export declare const START_CARD_MIN_HEIGHT = 76;
 export declare const HEADER_FADE_HEIGHT = 90;
 export declare const CLOSE_BUTTON_SIZE = 28;
+/** The logo keeps its own shape at this height, up to the web widget's max width. */
+export declare const LOGO_HEIGHT = 40;
+export declare const LOGO_MAX_WIDTH = 152;
 export declare const CLOSE_ICON_SIZE = 14;
 export declare const styles: {
     contentContainer: {
@@ -47,7 +50,6 @@ export declare const styles: {
         minHeight: number;
     };
     logo: {
-        width: number;
         height: number;
     };
     closeButton: {

package/lib/typescript/module/ui/screens/home/HomeView.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HomeView.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/home/HomeView.styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAQH;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,iFAAiF;AACjF,eAAO,MAAM,qBAAqB,KAAK,CAAC;AACxC,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,qBAAqB,KAAK,CAAC;AACxC,eAAO,MAAM,kBAAkB,KAAK,CAAC;AACrC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0NjB,CAAC"}
+{"version":3,"file":"HomeView.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/home/HomeView.styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAQH;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,iFAAiF;AACjF,eAAO,MAAM,qBAAqB,KAAK,CAAC;AACxC,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,qBAAqB,KAAK,CAAC;AACxC,eAAO,MAAM,kBAAkB,KAAK,CAAC;AACrC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,qFAAqF;AACrF,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,cAAc,MAAM,CAAC;AAClC,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyNjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repzo/widget-react-native",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Repzo chat widget for React Native \u2014 pure JavaScript, no native modules",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

package/src/state/widget-store.ts

@@ -35,7 +35,7 @@ import type {
 } from '../types';
 import { setOpenUrlHandler } from '../ui/utils/safe-url';
 
-const SDK_VERSION = '@repzo/widget-react-native@1.0.4';
+const SDK_VERSION = '@repzo/widget-react-native@1.0.5';
 
 /** The platform this session reports — mobile sessions get the Mobile SDKs overrides. */
 function sessionPlatform(): 'ios' | 'android' | 'web' {
@@ -489,7 +489,7 @@ export class WidgetStore {
       loading: false,
       error: null,
       errorCode: null,
-      config: result.config,
+      config: this.hydrateConfig(result.config),
       identityId: result.identityId,
       conversations,
       // Also seeds the launcher badge, so a reply that landed while the app
@@ -512,7 +512,7 @@ export class WidgetStore {
       },
     }));
 
-    this.persistConfig(result.config);
+    this.persistConfig(this.hydrateConfig(result.config));
     this.connectRealtime(result.token);
     this.watchAppState();
     this.loadOutboundMessage();
@@ -558,13 +558,28 @@ export class WidgetStore {
         cached.platform === sessionPlatform() &&
         !this.state.config
       ) {
-        this.setState({ config: cached.config });
+        this.setState({ config: this.hydrateConfig(cached.config) });
       }
     } catch {
       // Corrupt cache — the network config overwrites it shortly.
     }
   }
 
+  /**
+   * The server sends the home logo and background image as paths relative to
+   * Workstation (`/api/media/:id/download`), which a React Native Image can't
+   * load. Resolved against the boot `baseUrl` they become full links (public
+   * media redirects to the CDN). Absolute URLs pass through unchanged.
+   */
+  private hydrateConfig(config: WidgetConfig): WidgetConfig {
+    if (!config) return config;
+    return {
+      ...config,
+      homeLogoUrl: this.client.resolveUrl(config.homeLogoUrl),
+      homeBackgroundImageUrl: this.client.resolveUrl(config.homeBackgroundImageUrl),
+    };
+  }
+
   private persistConfig(config: WidgetConfig): void {
     if (!this.bootConfig) return;
     const entry: CachedConfig = {

package/src/ui/WidgetProvider.tsx

@@ -12,6 +12,7 @@ import {
   Modal,
   Platform,
   Pressable,
+  StatusBar,
   StyleSheet,
   Text,
   View,
@@ -35,13 +36,22 @@ import { InAppNotification } from './components/InAppNotification';
 import { OutboundMessageCard } from './components/OutboundMessageCard';
 import { WidgetPanel } from './components/WidgetPanel';
 import { useKeyboardOverlap } from './hooks/use-keyboard-overlap';
+import { TopInsetContext } from './hooks/use-top-inset';
 import { useWidgetInsets } from './hooks/use-widget-insets';
 import { ChatView } from './screens/chat/ChatView';
 import { ConversationsList } from './screens/conversations/ConversationsList';
-import { HomeView } from './screens/home/HomeView';
+import { HomeView, resolveHeaderTextColor } from './screens/home/HomeView';
 import { PreChatForm } from './screens/pre-chat/PreChatForm';
 import { globalStyles } from './styles/global';
-import { buildTheme, palette, radius, spacing, fontSize, withAlpha } from './styles/theme';
+import {
+  buildTheme,
+  contrastingTextColor,
+  palette,
+  radius,
+  spacing,
+  fontSize,
+  withAlpha,
+} from './styles/theme';
 import { pickRecentConversations, pickTeamAgents } from './utils/conversations';
 
 export interface RepzoWidgetProviderProps {
@@ -192,6 +202,21 @@ export function RepzoWidgetProvider({
     : null;
   const isHomeSurface = state.view === 'home';
 
+  // Home and chat paint their brand header under the status bar; every other
+  // screen (and an outbound card stacked above home) keeps a plain white top.
+  const outboundVisible =
+    !!state.outboundMessage && !blockingError && state.view !== 'chat' && state.view !== 'prechat';
+  const headerOwnsTopInset =
+    !blockingError &&
+    !(state.loading && !state.config) &&
+    !outboundVisible &&
+    (state.view === 'chat' || isHomeSurface);
+  const topBarColor = !headerOwnsTopInset
+    ? palette.ink
+    : state.view === 'chat'
+      ? contrastingTextColor(theme.primaryColor)
+      : resolveHeaderTextColor(localizedConfig, theme.primaryColor);
+
   const renderContent = () => {
     if (state.loading && !state.config) {
       return (
@@ -405,8 +430,19 @@ export function RepzoWidgetProvider({
         animationType="slide"
         presentationStyle={Platform.OS === 'ios' ? presentationStyle : undefined}
         onRequestClose={handleClose}
-        statusBarTranslucent={false}>
-        <View style={[globalStyles.screen, { paddingTop: topInset, paddingBottom: insets.bottom }]}>
+        // Edge to edge on every Android version, so the insets below are the
+        // only top spacing (a non-translucent modal used to add a second one).
+        statusBarTranslucent>
+        <StatusBar
+          barStyle={topBarColor === palette.white ? 'light-content' : 'dark-content'}
+          animated
+        />
+        <View
+          style={[
+            globalStyles.screen,
+            { paddingTop: headerOwnsTopInset ? 0 : topInset, paddingBottom: insets.bottom },
+          ]}>
+          <TopInsetContext.Provider value={headerOwnsTopInset ? topInset : 0}>
           <View
             onLayout={keyboard.onLayout}
             style={[globalStyles.fill, { paddingBottom: keyboard.overlap }]}>
@@ -463,6 +499,7 @@ export function RepzoWidgetProvider({
               </WidgetPanel>
             </WidgetErrorBoundary>
           </View>
+          </TopInsetContext.Provider>
         </View>
       </Modal>
     </>

package/src/ui/components/Gradient.tsx

@@ -104,6 +104,22 @@ function GradientFill({ colors, bands }: { colors: string[]; bands?: number }) {
   );
 }
 
+/**
+ * Alpha at evenly spaced points down the fade. An eased curve instead of a
+ * straight line: a linear ramp shows a visible edge where it starts and goes
+ * opaque too late, so the brand colour reads as a band rather than melting
+ * into the page. Shared with the web widget's fade so both look the same.
+ */
+const FADE_STOPS = [0, 0.04, 0.12, 0.26, 0.46, 0.68, 0.86, 0.96, 1];
+
+function fadeAlphaAt(progress: number): number {
+  const scaled = Math.min(Math.max(progress, 0), 1) * (FADE_STOPS.length - 1);
+  const index = Math.min(Math.floor(scaled), FADE_STOPS.length - 2);
+  const from = FADE_STOPS[index] as number;
+  const to = FADE_STOPS[index + 1] as number;
+  return from + (to - from) * (scaled - index);
+}
+
 /**
  * Washes the bottom of a header out into the page colour: a straight ramp from
  * fully transparent at the top to opaque at the bottom edge, the same
@@ -129,7 +145,8 @@ export function FadeOverlay({
     <View style={[styles.fadeOverlay, { height }, style]} pointerEvents="none">
       {NativeGradient ? (
         <NativeGradient
-          colors={[withAlpha(color, 0), color]}
+          colors={FADE_STOPS.map((alpha) => withAlpha(color, alpha))}
+          locations={FADE_STOPS.map((_, index) => index / (FADE_STOPS.length - 1))}
           start={VERTICAL.start}
           end={VERTICAL.end}
           style={StyleSheet.absoluteFill}
@@ -144,7 +161,7 @@ export function FadeOverlay({
           // body colour, with no hairline where the two meet.
           <View
             key={index}
-            style={[styles.band, { backgroundColor: withAlpha(color, (index + 1) / all.length) }]}
+            style={[styles.band, { backgroundColor: withAlpha(color, fadeAlphaAt((index + 1) / all.length)) }]}
           />
         ))
       )}

package/src/ui/hooks/use-top-inset.ts

@@ -0,0 +1,16 @@
+/**
+ * How far a screen's header must reach up to sit under the status bar.
+ *
+ * The messenger draws edge to edge. Screens with a brand header (home, chat)
+ * extend that header's background into the status-bar area instead of leaving
+ * a white strip above it; the provider gives them the inset through this
+ * context and pads every other screen itself, so this is 0 for them.
+ */
+
+import { createContext, useContext } from 'react';
+
+export const TopInsetContext = createContext(0);
+
+export function useTopInset(): number {
+  return useContext(TopInsetContext);
+}

package/src/ui/screens/chat/ChatView.tsx

@@ -51,8 +51,9 @@ import { ArrowUpIcon, ChatOutlineIcon, ChevronIcon, ClockIcon, PaperclipIcon } f
 import { TeamAvatars } from '../../components/TeamAvatars';
 import { Markdown } from '../../components/Markdown';
 import { useReduceMotion } from '../../hooks/use-reduce-motion';
+import { useTopInset } from '../../hooks/use-top-inset';
 import { globalStyles } from '../../styles/global';
-import { contrastingTextColor, mixHex, palette, withAlpha } from '../../styles/theme';
+import { contrastingTextColor, mixHex, palette, spacing, withAlpha } from '../../styles/theme';
 import { formatClockTime, formatDayLabel, isSameDay } from '../../utils/conversations';
 import { stripHtml } from '../../utils/html';
 import { isHttpUrl, openExternalUrl } from '../../utils/safe-url';
@@ -327,6 +328,7 @@ export function ChatView({
     .find((message) => message.direction === 'inbound' && (message.messageType ?? 'message') === 'message')?.id;
   // Two stops off the brand color: flat fill looked like an unstyled block.
   // A non-hex brand color falls through mixHex unchanged and renders solid.
+  const topInset = useTopInset();
   const headerGradient = [color, mixHex(color, '#000000', 0.16)];
   const headerControl = { backgroundColor: withAlpha(headerTextColor, 0.16) };
 
@@ -336,7 +338,12 @@ export function ChatView({
           was empty whenever no agent was assigned yet. */}
       <GradientBackground
         colors={headerGradient}
-        style={[styles.header, { borderBottomColor: mixHex(color, '#000000', 0.26) }]}>
+        style={[
+          styles.header,
+          { borderBottomColor: mixHex(color, '#000000', 0.26) },
+          // Reaches under the status bar so the brand colour runs to the top.
+          topInset > 0 ? { paddingTop: spacing.md + topInset, minHeight: 72 + topInset } : null,
+        ]}>
         <Pressable
           onPress={onBack}
           accessibilityRole="button"

package/src/ui/screens/home/HomeView.styles.ts

@@ -23,6 +23,9 @@ export const START_CARD_LIFT = 28;
 export const START_CARD_MIN_HEIGHT = 76;
 export const HEADER_FADE_HEIGHT = 90;
 export const CLOSE_BUTTON_SIZE = 28;
+/** The logo keeps its own shape at this height, up to the web widget's max width. */
+export const LOGO_HEIGHT = 40;
+export const LOGO_MAX_WIDTH = 152;
 export const CLOSE_ICON_SIZE = 14;
 
 export const styles = StyleSheet.create({
@@ -58,8 +61,7 @@ export const styles = StyleSheet.create({
     minHeight: 40,
   },
   logo: {
-    width: 132,
-    height: 40,
+    height: LOGO_HEIGHT,
   },
   closeButton: {
     marginStart: 'auto',

package/src/ui/screens/home/HomeView.tsx

@@ -13,7 +13,7 @@
  * send today.
  */
 
-import { Fragment, useEffect, useRef, type ReactNode } from 'react';
+import { Fragment, useEffect, useRef, useState, type ReactNode } from 'react';
 import {
   Animated,
   Easing,
@@ -37,6 +37,7 @@ import {
   CloseIcon,
 } from '../../components/icons';
 import { useReduceMotion } from '../../hooks/use-reduce-motion';
+import { useTopInset } from '../../hooks/use-top-inset';
 import { globalStyles } from '../../styles/global';
 import { contrastingTextColor, palette, spacing, withAlpha } from '../../styles/theme';
 import { flipForRTL } from '../../utils/rtl';
@@ -45,6 +46,9 @@ import {
   CLOSE_ICON_SIZE,
   HEADER_BOTTOM_PADDING,
   HEADER_FADE_HEIGHT,
+  HEADER_MIN_HEIGHT,
+  LOGO_HEIGHT,
+  LOGO_MAX_WIDTH,
   START_CARD_LIFT,
   styles,
 } from './HomeView.styles';
@@ -55,7 +59,7 @@ import type { HomeViewProps } from './HomeView.types';
  * it, and defaulting to dark text over a dark brand header is unreadable, so
  * derive something legible from the background instead.
  */
-function resolveHeaderTextColor(config: WidgetConfig | null, fallbackColor: string): string {
+export function resolveHeaderTextColor(config: WidgetConfig | null, fallbackColor: string): string {
   if (config?.homeHeaderTextColor === 'white') return palette.white;
   if (config?.homeHeaderTextColor === 'black') return palette.ink;
   if (config?.homeBackgroundType === 'image') return palette.white;
@@ -116,8 +120,14 @@ export function HomeView({
 
   // The start card is pulled up over the seam by a fixed amount, so the header
   // pads its bottom by that same amount and the greeting never slides under it.
+  // The header reaches up under the status bar (no white strip above it), so
+  // it grows by that inset and keeps its content where it was.
+  const topInset = useTopInset();
   const headerStyle = [
     styles.header,
+    topInset > 0
+      ? { paddingTop: spacing.xl + topInset, minHeight: HEADER_MIN_HEIGHT + topInset }
+      : null,
     allowNewConversations ? { paddingBottom: HEADER_BOTTOM_PADDING + START_CARD_LIFT } : null,
   ];
 
@@ -125,12 +135,7 @@ export function HomeView({
     <>
       <View style={styles.headerTop}>
         {config?.homeLogoUrl ? (
-          <Image
-            source={{ uri: config.homeLogoUrl }}
-            style={styles.logo}
-            resizeMode="contain"
-            accessibilityIgnoresInvertColors
-          />
+          <HomeLogo key={config.homeLogoUrl} uri={config.homeLogoUrl} />
         ) : (
           <View />
         )}
@@ -296,6 +301,29 @@ export function HomeView({
   );
 }
 
+/**
+ * The workspace logo at its own shape, flush with the greeting's left edge.
+ * A fixed-width box with `contain` centred a square logo inside it, so it
+ * floated in from the edge; the web widget sizes it to the image instead.
+ * Square until the image reports its size, then as wide as its ratio needs,
+ * capped like the web widget.
+ */
+function HomeLogo({ uri }: { uri: string }) {
+  const [aspectRatio, setAspectRatio] = useState(1);
+  return (
+    <Image
+      source={{ uri }}
+      style={[styles.logo, { width: Math.min(LOGO_MAX_WIDTH, LOGO_HEIGHT * aspectRatio) }]}
+      resizeMode="contain"
+      accessibilityIgnoresInvertColors
+      onLoad={(event) => {
+        const { width, height } = event.nativeEvent.source ?? {};
+        if (width && height) setAspectRatio(width / height);
+      }}
+    />
+  );
+}
+
 /**
  * Staggered entrance for the body sections. Opacity and translate only, so the
  * whole thing runs on the native driver and never touches layout.