@repzo/widget-react-native 1.0.0 → 1.0.1

package/src/state/widget-store.ts

@@ -16,12 +16,14 @@ import { getDeviceId, rotateDeviceId } from '../device-id';
 import { EventEmitter, RepzoWidgetEvents } from '../events';
 import { PushManager } from '../push/push-notifications';
 import { CONFIG_KEY, LEGACY_CONFIG_KEY, SecureStorage, Storage, UNREAD_KEY, USER_KEY } from '../storage';
+import { setAttachmentOptions } from '../attachments/pickers';
 import { DEFAULT_BASE_URL } from '../types';
 import type {
   AgentUiAction,
   BootOptions,
   Conversation,
   Message,
+  OutgoingAttachment,
   RepzoWidgetErrorCode,
   WidgetAttachment,
   WidgetConfig,
@@ -33,7 +35,7 @@ import type {
 } from '../types';
 import { setOpenUrlHandler } from '../ui/utils/safe-url';
 
-const SDK_VERSION = '@repzo/widget-react-native@1.0.0';
+const SDK_VERSION = '@repzo/widget-react-native@1.0.1';
 
 /** The platform this session reports — mobile sessions get the Mobile SDKs overrides. */
 function sessionPlatform(): 'ios' | 'android' | 'web' {
@@ -91,6 +93,7 @@ const INITIAL_STATE: WidgetState = {
   prefillText: '',
   outboundMessage: null,
   visitorProfile: {},
+  inAppNotification: null,
 };
 
 /** Everything in state that belongs to the signed-in visitor. */
@@ -110,6 +113,7 @@ const USER_SCOPED_STATE: Partial<WidgetState> = {
   prefillText: '',
   outboundMessage: null,
   visitorProfile: {},
+  inAppNotification: null,
 };
 
 export class WidgetStore {
@@ -136,6 +140,12 @@ export class WidgetStore {
 
   private bootConfig: { baseUrl: string; channelAccountId: string } | null = null;
 
+  /** `boot({ inAppNotifications })` — the card over the app for new replies. */
+  private inAppNotificationsEnabled = true;
+
+  /** The launch card (see showUnreadOnLaunch) is offered once per visitor session. */
+  private launchCardOffered = false;
+
   private bootPromise: Promise<void> | null = null;
 
   /** Identity key of the in-flight boot — a boot for someone else is not deduped. */
@@ -232,6 +242,9 @@ export class WidgetStore {
 
   getState = (): WidgetState => this.state;
 
+  /** Composer identity: explicit opens reset it; a draft receiving its server ID does not. */
+  getThreadGeneration = (): number => this.threadGeneration;
+
   private setState(patch: Partial<WidgetState> | ((current: WidgetState) => Partial<WidgetState>)) {
     const previous = this.state;
     const resolved = typeof patch === 'function' ? patch(previous) : patch;
@@ -239,6 +252,13 @@ export class WidgetStore {
     // The total is always derived from the per-thread map, so no surface can
     // zero the badge while threads stay unread.
     next.unreadCount = sumUnread(next.unreadByConversation);
+    // The in-app card only lives while the messenger is closed and its thread
+    // is unread — opening the widget, reading the thread (here or on another
+    // device) or logging out all take it down without each path clearing it.
+    const card = next.inAppNotification;
+    if (card && (next.isOpen || !next.unreadByConversation[card.conversationId])) {
+      next.inAppNotification = null;
+    }
     this.state = next;
 
     if (next.unreadCount !== previous.unreadCount) {
@@ -286,6 +306,10 @@ export class WidgetStore {
     }
     const baseUrl = assertSecureBaseUrl(options.baseUrl?.trim() || DEFAULT_BASE_URL);
     if (options.onOpenUrl !== undefined) setOpenUrlHandler(options.onOpenUrl ?? null);
+    if (options.attachments !== undefined) setAttachmentOptions(options.attachments ?? null);
+    if (options.inAppNotifications !== undefined) {
+      this.inAppNotificationsEnabled = options.inAppNotifications !== false;
+    }
 
     const sameTarget =
       this.bootConfig?.baseUrl === baseUrl &&
@@ -496,8 +520,12 @@ export class WidgetStore {
     if (this.pendingConversationId) {
       const conversationId = this.pendingConversationId;
       this.pendingConversationId = null;
+      // Launched into a thread (push tap): that is this session's launch, so
+      // a later silent re-init must not offer the card either.
+      this.launchCardOffered = true;
       void this.openConversation(conversationId);
     } else {
+      this.showUnreadOnLaunch();
       // A re-init after a 401 means the stream was down: catch the open
       // thread up (a no-op when nothing is on screen).
       void this.refreshOpenThread();
@@ -711,6 +739,7 @@ export class WidgetStore {
     this.seenMessageIds = [];
     this.visitorTypingActive = false;
     this.lastTypingPingAt = 0;
+    this.launchCardOffered = false;
     this.setState({ ...USER_SCOPED_STATE });
 
     const token = await this.client.getToken();
@@ -1072,7 +1101,9 @@ export class WidgetStore {
         const alreadyPresent = current.messages.some((existing) => existing.id === message.id);
         return {
           conversations,
-          messages: alreadyPresent ? current.messages : [...current.messages, message],
+          messages: alreadyPresent
+            ? adoptServerAttachments(current.messages, [message])
+            : [...current.messages, message],
           agentTyping: clearsTyping ? false : current.agentTyping,
         };
       }
@@ -1086,7 +1117,23 @@ export class WidgetStore {
       this.persistUnread(unreadByConversation);
 
       countedAsUnread = true;
-      return { conversations, unreadByConversation };
+      if (!this.inAppNotificationsEnabled || current.isOpen) {
+        return { conversations, unreadByConversation };
+      }
+      // Newest reply wins: one card, not a stack, like the launcher badge.
+      const conversation = conversations.find((item) => item.id === conversationId);
+      return {
+        conversations,
+        unreadByConversation,
+        inAppNotification: {
+          conversationId,
+          messageId,
+          senderName: message.senderName || conversation?.agentName || null,
+          senderAvatar: conversation?.agentAvatar ?? null,
+          preview: (message.bodyPlain ?? '').trim(),
+          hasAttachments: (message.attachments?.length ?? 0) > 0,
+        },
+      };
     });
 
     // The visitor is reading it live — move the server cursor too, or the
@@ -1329,6 +1376,42 @@ export class WidgetStore {
     this.setState({ prefillText: prefill });
   }
 
+  /**
+   * Replies that arrived while the app was closed get the same card a live
+   * reply would, once per launch — so a visitor without push (not set up on
+   * the channel, or permission denied) still sees them. Only the newest unread
+   * thread; silent re-inits and foreground returns never re-offer it.
+   */
+  private showUnreadOnLaunch(): void {
+    if (this.launchCardOffered || !this.inAppNotificationsEnabled) return;
+    this.launchCardOffered = true;
+    const { isOpen, inAppNotification, conversations, unreadByConversation } = this.state;
+    if (isOpen || inAppNotification) return;
+
+    const time = (conversation: Conversation) =>
+      Date.parse(conversation.lastMessageAt ?? conversation.createdAt) || 0;
+    const newest = conversations
+      .filter((conversation) => (unreadByConversation[conversation.id] ?? 0) > 0)
+      .sort((a, b) => time(b) - time(a))[0];
+    if (!newest) return;
+
+    this.setState({
+      inAppNotification: {
+        conversationId: newest.id,
+        messageId: `launch-${newest.id}`,
+        senderName: newest.agentName,
+        senderAvatar: newest.agentAvatar,
+        preview: (newest.snippet ?? '').trim(),
+        hasAttachments: false,
+      },
+    });
+  }
+
+  /** The visitor swiped the in-app card away; the thread stays unread. */
+  dismissInAppNotification(): void {
+    if (this.state.inAppNotification) this.setState({ inAppNotification: null });
+  }
+
   dismissOutboundMessage(): void {
     const outbound = this.state.outboundMessage;
     if (outbound?.id) this.track('widget_outbound_dismissed', { outboundId: outbound.id });
@@ -1405,11 +1488,10 @@ export class WidgetStore {
         // Live replies and optimistic sends may have arrived since this page
         // was requested. Keep them, preferring the live copy for shared ids.
         const liveIds = new Set(current.messages.map((message) => message.id));
-        const history = this.hydrateMessages(result.data).filter(
-          (message) => !liveIds.has(message.id)
-        );
+        const page = this.hydrateMessages(result.data);
+        const history = page.filter((message) => !liveIds.has(message.id));
         return {
-          messages: sortByCreatedAt([...history, ...current.messages]),
+          messages: sortByCreatedAt([...history, ...adoptServerAttachments(current.messages, page)]),
           messagesLoading: false,
           hasMoreMessages: result.meta.hasMore,
           messageCursor: result.meta.nextCursor,
@@ -1475,7 +1557,8 @@ export class WidgetStore {
       this.setState((current) => {
         const known = new Set(current.messages.map((message) => message.id));
         const missing = fresh.filter((message) => !known.has(message.id));
-        if (missing.length === 0) return {};
+        const upgraded = adoptServerAttachments(current.messages, fresh);
+        if (missing.length === 0) return upgraded === current.messages ? {} : { messages: upgraded };
 
         const local = current.messages.filter(isLocalMessage);
         const hasServerMessages = local.length < current.messages.length;
@@ -1488,7 +1571,7 @@ export class WidgetStore {
             messageCursor: result.meta.nextCursor,
           };
         }
-        return { messages: sortByCreatedAt([...current.messages, ...missing]) };
+        return { messages: sortByCreatedAt([...upgraded, ...missing]) };
       });
       // The server just moved the read cursor — mirror it locally.
       if (this.state.unreadByConversation[conversationId]) {
@@ -1509,9 +1592,15 @@ export class WidgetStore {
       .reverse();
   }
 
+  /**
+   * Rejects when the message wasn't sent, so the composer can keep
+   * attachments for a retry. A text-only bubble is marked failed; one with
+   * attachments is removed instead — the composer's chips are the retry, and
+   * keeping both would leave a duplicate after a successful resend.
+   */
   async sendMessage(
     body: string,
-    attachments: WidgetAttachment[] = [],
+    attachments: OutgoingAttachment[] = [],
     agentUiAction?: AgentUiAction
   ): Promise<void> {
     const trimmed = body.trim();
@@ -1528,7 +1617,22 @@ export class WidgetStore {
       senderName: visitorProfile.name || 'You',
       body: trimmed ? `<p>${trimmed}</p>` : '',
       bodyPlain: trimmed,
-      attachments: attachments.length > 0 ? attachments : null,
+      // The local preview, never a data URL: the bubble shows up at once and
+      // state never holds megabytes of base64. Without a local file the
+      // bubble shows the name until the server copy replaces it.
+      attachments:
+        attachments.length > 0
+          ? attachments.map((attachment, index) => ({
+              id: `${tempId}-${index}`,
+              name: attachment.name,
+              url:
+                attachment.previewUrl && !/^data:/i.test(attachment.previewUrl)
+                  ? attachment.previewUrl
+                  : '',
+              contentType: attachment.contentType,
+              size: attachment.size,
+            }))
+          : null,
       metadata: null,
       status: 'pending',
       createdAt: new Date().toISOString(),
@@ -1545,9 +1649,12 @@ export class WidgetStore {
 
     const markFailed = () =>
       this.setState((current) => ({
-        messages: current.messages.map((message) =>
-          message.id === tempId ? { ...message, status: 'failed' } : message
-        ),
+        messages:
+          attachments.length > 0
+            ? current.messages.filter((message) => message.id !== tempId)
+            : current.messages.map((message) =>
+                message.id === tempId ? { ...message, status: 'failed' } : message
+              ),
       }));
 
     const epoch = this.epoch;
@@ -1570,7 +1677,7 @@ export class WidgetStore {
       // don't open a thread nobody is looking at.
       if (!conversationId && this.threadGeneration !== generation) {
         markFailed();
-        return;
+        throw new Error('The conversation this message was queued for was never created');
       }
     }
 
@@ -1580,7 +1687,15 @@ export class WidgetStore {
         conversationId: conversationId || undefined,
         forceNewConversation: !conversationId,
         body: trimmed,
-        attachments: attachments.length > 0 ? attachments : undefined,
+        attachments:
+          attachments.length > 0
+            ? attachments.map(({ name, url, contentType, size }) => ({
+                name,
+                url,
+                contentType,
+                size,
+              }))
+            : undefined,
         visitorName: visitorProfile.name,
         visitorEmail: visitorProfile.email,
         agentUiAction,
@@ -1736,6 +1851,27 @@ function isLocalMessage(message: Message): boolean {
   return message.id.startsWith('temp-');
 }
 
+/**
+ * A sent visitor message keeps its local previews (a `file://` URI, or no URL
+ * at all) until the server copy shows up — the stream echo or a history page.
+ * Its attachments, the only ones that can be opened, then replace them.
+ */
+function adoptServerAttachments(messages: Message[], server: Message[]): Message[] {
+  const serverCopies = new Map(
+    server.filter((message) => message.attachments?.length).map((message) => [message.id, message])
+  );
+  if (serverCopies.size === 0) return messages;
+  let changed = false;
+  const next = messages.map((message) => {
+    const copy = serverCopies.get(message.id);
+    const hasLocal = message.attachments?.some((attachment) => !/^https?:\/\//i.test(attachment.url));
+    if (!copy || !hasLocal) return message;
+    changed = true;
+    return { ...message, attachments: copy.attachments };
+  });
+  return changed ? next : messages;
+}
+
 /** Stable, so same-instant rows keep their order; bad dates sort as oldest. */
 function sortByCreatedAt(messages: Message[]): Message[] {
   const time = (message: Message) => Date.parse(message.createdAt) || 0;

package/src/types.ts

@@ -77,6 +77,21 @@ export interface WidgetAttachment {
   size: number;
 }
 
+/**
+ * A visitor attachment on its way to `POST /api/widget/messages`. `url` is a
+ * base64 data URL (`data:<mime>;base64,<…>`); the server stores it and echoes
+ * the message back with a regular media URL.
+ */
+export interface OutgoingAttachment {
+  name: string;
+  url: string;
+  contentType: string;
+  /** Decoded bytes. */
+  size: number;
+  /** Local URI the optimistic bubble renders until the server copy exists. */
+  previewUrl?: string;
+}
+
 export interface Conversation {
   id: string;
   subject: string | null;
@@ -178,6 +193,55 @@ export interface BootOptions {
      */
     bundleId?: string;
   };
+  /**
+   * Visitor attachments (photos and files). Works out of the box with
+   * `expo-image-picker` / `expo-document-picker` installed; see
+   * `RepzoWidgetAttachmentOptions` to disable it or bring your own picker.
+   */
+  attachments?: RepzoWidgetAttachmentOptions;
+  /**
+   * Show a card at the bottom of the app when a team reply arrives while the
+   * messenger is closed (default true). It stays until the visitor taps it
+   * (opens the conversation) or swipes it away. Requires
+   * `<RepzoWidgetProvider>` to be mounted.
+   */
+  inAppNotifications?: boolean;
+}
+
+/** An option in the composer's attach menu. */
+export type AttachmentSource = 'photo' | 'camera' | 'file';
+
+/**
+ * A file returned by a host `attachments.pick`. Give `base64` (raw or as a
+ * data URL) or a `uri` the SDK can read (`file://`; read with
+ * `expo-file-system` when installed, else `fetch`).
+ */
+export interface RepzoPickedFile {
+  name: string;
+  /** MIME type, e.g. `image/jpeg`. Guessed from the name when empty. */
+  type: string;
+  /** Bytes, when known — lets an oversized file be refused before it's read. */
+  size?: number;
+  uri?: string;
+  base64?: string;
+}
+
+export interface RepzoWidgetAttachmentOptions {
+  /**
+   * Default true. False hides the attach button. It is also hidden when the
+   * channel turns attachments off in Workstation, or when no picker exists
+   * (no `pick` below and neither `expo-image-picker` nor
+   * `expo-document-picker` installed).
+   */
+  enabled?: boolean;
+  /**
+   * Your own picker, replacing the Expo ones — e.g. `react-native-image-picker`
+   * or `react-native-document-picker`. Resolve `null` or `[]` on cancel. The
+   * SDK still enforces the limits (5 files, 1.5 MB each, 6 MB together).
+   */
+  pick?: (source: AttachmentSource) => Promise<RepzoPickedFile[] | null>;
+  /** Menu options offered with `pick`. Default all three. Ignored without `pick`. */
+  sources?: AttachmentSource[];
 }
 
 // ─── Agent UI blocks ────────────────────────────────────────────────────────
@@ -442,4 +506,19 @@ export interface WidgetState {
   outboundMessage: OutboundMessage | null;
   /** Name/email captured from pre-chat or `loginUserWithUserAttributes`. */
   visitorProfile: { name?: string; email?: string; phone?: string };
+  /**
+   * The newest team reply the visitor hasn't seen, shown as a card over the
+   * app. Only set while the messenger is closed and its thread is unread.
+   */
+  inAppNotification: InAppNotification | null;
+}
+
+export interface InAppNotification {
+  conversationId: string;
+  messageId: string;
+  senderName: string | null;
+  senderAvatar: string | null;
+  /** Plain-text preview; empty when the reply was only attachments. */
+  preview: string;
+  hasAttachments: boolean;
 }

package/src/ui/WidgetProvider.tsx

@@ -18,12 +18,20 @@ import {
 } from 'react-native';
 
 import { isTerminalErrorCode } from '../api/client';
+import {
+  formatBytes,
+  getAttachmentSources,
+  MAX_ATTACHMENT_BYTES,
+  MAX_ATTACHMENTS,
+  pickAttachments,
+} from '../attachments/pickers';
 import { controller } from '../controller';
 import { buildLabels, createTranslator, formatLabel } from '../i18n';
 import { useWidgetState } from '../state/use-widget-state';
-import type { AgentUiAction, WidgetAttachment, WidgetSpaceType } from '../types';
+import type { AgentUiAction, OutgoingAttachment, WidgetSpaceType } from '../types';
 import { WidgetErrorBoundary } from './components/ErrorBoundary';
 import { AlertIcon } from './components/icons';
+import { InAppNotification } from './components/InAppNotification';
 import { OutboundMessageCard } from './components/OutboundMessageCard';
 import { WidgetPanel } from './components/WidgetPanel';
 import { useKeyboardOverlap } from './hooks/use-keyboard-overlap';
@@ -108,16 +116,40 @@ export function RepzoWidgetProvider({
     [labels]
   );
 
+  const attachLabels = useMemo(
+    () => ({
+      button: labels.attachFile,
+      photoLibrary: labels.attachPhotoLibrary,
+      takePhoto: labels.attachTakePhoto,
+      file: labels.attachChooseFile,
+      cancel: labels.cancel,
+      remove: labels.removeAttachment,
+      tooLarge: formatLabel(labels.attachmentTooLarge, { max: formatBytes(MAX_ATTACHMENT_BYTES) }),
+      tooMany: formatLabel(labels.attachmentTooMany, { count: MAX_ATTACHMENTS }),
+      tooLargeTogether: labels.attachmentsTooLargeTogether,
+      failed: labels.attachmentFailed,
+      cameraDenied: labels.cameraPermissionDenied,
+    }),
+    [labels]
+  );
+
+  // Read per render: `boot({ attachments })` sets it outside React state.
+  const attachmentSources = theme.attachmentsEnabled ? getAttachmentSources() : [];
+
   const handleClose = useCallback(() => store.hide(), [store]);
 
+  const handleOpenNotification = useCallback(
+    (conversationId: string) => void store.openConversation(conversationId),
+    [store]
+  );
+  const handleDismissNotification = useCallback(() => store.dismissInAppNotification(), [store]);
+
   const handleTabChange = useCallback((tab: WidgetSpaceType) => store.setActiveTab(tab), [store]);
 
+  // Rejections reach ChatView, which keeps unsent attachments for a retry.
   const handleSendMessage = useCallback(
-    (body: string, attachments?: WidgetAttachment[], action?: AgentUiAction) => {
-      store.sendMessage(body, attachments ?? [], action).catch(() => {
-        // The failed bubble already surfaces this to the visitor.
-      });
-    },
+    (body: string, attachments?: OutgoingAttachment[], action?: AgentUiAction) =>
+      store.sendMessage(body, attachments ?? [], action),
     [store]
   );
 
@@ -211,6 +243,7 @@ export function RepzoWidgetProvider({
     if (state.view === 'chat') {
       return (
         <ChatView
+          key={store.getThreadGeneration()}
           messages={state.messages}
           loading={state.messagesLoading}
           hasMoreMessages={state.hasMoreMessages}
@@ -240,7 +273,15 @@ export function RepzoWidgetProvider({
             procedureSend: labels.procedureSend,
             procedureSent: labels.procedureSent,
             blocks: blockLabels,
+            attach: attachLabels,
+            viewer: {
+              close: labels.close,
+              loadFailed: labels.imageLoadFailed,
+              openExternally: labels.openImageExternally,
+            },
           }}
+          attachmentSources={attachmentSources}
+          onPickAttachments={pickAttachments}
           onSendMessage={handleSendMessage}
           onIdentifyVisitor={(data) => store.identifyVisitor(data)}
           onLoadMore={() => store.loadMoreMessages()}
@@ -319,6 +360,24 @@ export function RepzoWidgetProvider({
   return (
     <>
       {children}
+      {state.inAppNotification ? (
+        <InAppNotification
+          // A new reply remounts the card, so it slides in fresh.
+          key={state.inAppNotification.messageId}
+          notification={state.inAppNotification}
+          color={theme.primaryColor}
+          bottomInset={insets.bottom}
+          labels={{
+            replyFrom: labels.notificationReplyFrom,
+            newReply: labels.notificationNewReply,
+            attachment: labels.notificationAttachment,
+            openHint: labels.notificationOpenHint,
+            dismiss: labels.dismiss,
+          }}
+          onOpen={handleOpenNotification}
+          onDismiss={handleDismissNotification}
+        />
+      ) : null}
       <Modal
         visible={state.isOpen}
         animationType="slide"

package/src/ui/components/AttachmentChips.tsx

@@ -0,0 +1,135 @@
+/**
+ * Picked-but-unsent attachments above the composer: a thumbnail for images, a
+ * name + size card for everything else, each with its own remove button.
+ */
+
+import { Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import {
+  formatBytes,
+  isImageAttachment,
+  type DraftAttachment,
+} from '../../attachments/pickers';
+import { formatLabel } from '../../i18n';
+import { fontSize, palette, radius, spacing, withAlpha } from '../styles/theme';
+import { START_ALIGN } from '../utils/rtl';
+import { CloseIcon } from './icons';
+
+interface AttachmentChipsProps {
+  attachments: DraftAttachment[];
+  /** While a send is in flight the chips are dimmed and can't be removed. */
+  disabled?: boolean;
+  /** Keeps its `{name}` placeholder; filled per chip. */
+  removeLabel: string;
+  onRemove: (id: string) => void;
+}
+
+export function AttachmentChips({
+  attachments,
+  disabled,
+  removeLabel,
+  onRemove,
+}: AttachmentChipsProps) {
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      keyboardShouldPersistTaps="handled"
+      style={styles.scroller}
+      contentContainerStyle={styles.row}>
+      {attachments.map((attachment) => (
+        <View key={attachment.id} style={[styles.chip, disabled && styles.chipDisabled]}>
+          {isImageAttachment(attachment.contentType) ? (
+            <Image
+              source={{ uri: attachment.previewUri }}
+              style={styles.thumbnail}
+              resizeMode="cover"
+              accessible
+              accessibilityLabel={attachment.name}
+              accessibilityIgnoresInvertColors
+            />
+          ) : (
+            <View style={styles.file}>
+              <Text style={styles.fileName} numberOfLines={1}>
+                {attachment.name}
+              </Text>
+              <Text style={styles.fileSize}>{formatBytes(attachment.size)}</Text>
+            </View>
+          )}
+          <Pressable
+            onPress={() => onRemove(attachment.id)}
+            disabled={disabled}
+            accessibilityRole="button"
+            accessibilityLabel={formatLabel(removeLabel, { name: attachment.name })}
+            accessibilityState={{ disabled: !!disabled }}
+            // 22pt badge + 11pt on every side = a 44pt target.
+            hitSlop={11}
+            style={({ pressed }) => [styles.remove, pressed && styles.removePressed]}>
+            <CloseIcon size={10} color={palette.white} />
+          </Pressable>
+        </View>
+      ))}
+    </ScrollView>
+  );
+}
+
+const CHIP_HEIGHT = 64;
+
+const styles = StyleSheet.create({
+  scroller: {
+    flexGrow: 0,
+    marginBottom: spacing.sm,
+  },
+  row: {
+    gap: spacing.sm,
+  },
+  chip: {
+    height: CHIP_HEIGHT,
+    borderRadius: radius.md,
+    overflow: 'hidden',
+    backgroundColor: palette.surfaceAlt,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.border,
+  },
+  chipDisabled: {
+    opacity: 0.5,
+  },
+  thumbnail: {
+    width: CHIP_HEIGHT,
+    height: CHIP_HEIGHT,
+  },
+  file: {
+    width: 156,
+    height: CHIP_HEIGHT,
+    justifyContent: 'center',
+    paddingStart: spacing.md,
+    // Clear of the remove badge in the top corner.
+    paddingEnd: spacing.xl + spacing.sm,
+  },
+  fileName: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+    color: palette.ink,
+  },
+  fileSize: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.caption,
+    color: palette.textMuted,
+    marginTop: 2,
+  },
+  remove: {
+    position: 'absolute',
+    top: spacing.xs,
+    end: spacing.xs,
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: withAlpha(palette.ink, 0.72),
+  },
+  removePressed: {
+    opacity: 0.7,
+  },
+});