@repzo/widget-react-native 1.3.0 → 1.4.0

package/src/storage.ts

@@ -20,6 +20,8 @@ export const TOKEN_KEY = 'repzo_widget_token';
 export const USER_KEY = 'repzo_widget_user_key';
 export const DEVICE_ID_KEY = 'repzo_widget_device_id';
 export const UNREAD_KEY = 'repzo_widget_unread';
+/** Who sent each conversation's newest message; Workstation's list doesn't say. */
+export const LAST_MESSAGE_KEY = 'repzo_widget_last_message';
 /** Last config received — repaints the real theme instantly on relaunch. */
 /**
  * v2 wraps the config with the channel/baseUrl/platform it came from. v1 held a

package/src/types.ts

@@ -64,6 +64,12 @@ export interface WidgetConfig {
   proactiveFrequency: 'session' | 'visitor';
   proactiveOpenMode: 'home' | 'new_message';
   attachmentsEnabled: boolean;
+  /**
+   * Largest file a visitor may attach. Set by servers that take uploads
+   * (`/api/widget/uploads`); absent on older ones, which only take files
+   * inline in the message.
+   */
+  maxAttachmentBytes?: number;
   analyticsEnabled: boolean;
   toursEnabled: boolean;
   defaultLocale: string;
@@ -94,7 +100,12 @@ export interface WidgetAttachment {
  */
 export interface OutgoingAttachment {
   name: string;
+  /** A base64 data URL; empty when `fileUri` is set. */
   url: string;
+  /** A local file uploaded before the message is sent (servers with `maxAttachmentBytes`). */
+  fileUri?: string;
+  /** `fileUri` is already uploaded under this token, so the send skips uploading it. */
+  uploadToken?: string;
   contentType: string;
   /** Decoded bytes. */
   size: number;
@@ -107,6 +118,21 @@ export interface Conversation {
   subject: string | null;
   status: string;
   snippet: string | null;
+  /**
+   * Set when the newest message had no words, only photos (`'photo'`) or
+   * other files (`'file'`); the lists then say "Photo" or "File", while
+   * `snippet` keeps Workstation's wording ("2 attachments"). `null` when it
+   * had words. Filled in from what this device sent, received or loaded.
+   * @since 1.4.0
+   */
+  lastMessageAttachment?: 'photo' | 'file' | null;
+  /**
+   * The newest message is the visitor's own; the lists put "You:" before it.
+   * A Workstation list that includes it is used as is; otherwise the SDK fills
+   * it in from what this device sent, received or loaded.
+   * @since 1.4.0
+   */
+  lastMessageFromVisitor?: boolean | null;
   messageCount: number;
   lastMessageAt: string | null;
   createdAt: string;
@@ -136,6 +162,14 @@ export interface Message {
   createdAt: string;
   /** Set when a teammate deleted the message; the content fields are then empty. */
   deletedAt?: string | null;
+  /**
+   * On the visitor's own messages: the id this device sent it under, which
+   * stays the same when a failed message is retried. Lets a stored message
+   * replace its pending or failed bubble. Only newer Workstation deployments
+   * send it.
+   * @since 1.3.1
+   */
+  clientMessageId?: string | null;
 }
 
 export interface OutboundMessage {
@@ -250,6 +284,22 @@ export interface BootOptions {
    * @since 1.2.0
    */
   posts?: boolean;
+  /**
+   * Show two or more photos in one message together as an album: one square
+   * holding them all, with "+N" on the last tile past four (default true).
+   * False shows each photo on its own, full width, as before 1.4.0. Either
+   * way, tapping a photo opens the message's photos in the viewer.
+   * @since 1.4.0
+   */
+  photoAlbums?: boolean;
+  /**
+   * Put "You: " before a conversation's newest message on Home and in
+   * Messages when the visitor sent it (default true; Arabic "أنت: ", the
+   * `lastMessageYou` translation key). False shows the message alone, as
+   * before 1.4.0. `Conversation.lastMessageFromVisitor` is filled in either way.
+   * @since 1.4.0
+   */
+  youPrefix?: boolean;
 }
 
 /** An option in the composer's attach menu. */
@@ -286,6 +336,14 @@ export interface RepzoWidgetAttachmentOptions {
   pick?: (source: AttachmentSource) => Promise<RepzoPickedFile[] | null>;
   /** Menu options offered with `pick`. Default all three. Ignored without `pick`. */
   sources?: AttachmentSource[];
+  /**
+   * Default true: with a Workstation that takes uploads, a picked file starts
+   * uploading right away, while the visitor writes, so the message goes out
+   * the moment they tap Send. False uploads the files only when they tap
+   * Send, so nothing leaves the phone for a file they remove first.
+   * @since 1.4.0
+   */
+  uploadOnPick?: boolean;
 }
 
 // ─── Agent UI blocks ────────────────────────────────────────────────────────

package/src/ui/WidgetProvider.tsx

@@ -25,11 +25,12 @@ import {
   MAX_ATTACHMENT_BYTES,
   MAX_ATTACHMENTS,
   pickAttachments,
+  type DraftAttachment,
 } from '../attachments/pickers';
 import { controller } from '../controller';
 import { buildLabels, createTranslator, formatLabel, localizeWelcomeText } from '../i18n';
 import { useWidgetState } from '../state/use-widget-state';
-import type { AgentUiAction, OutgoingAttachment, PostInteractionKind, WidgetSpaceType } from '../types';
+import type { AgentUiAction, AttachmentSource, OutgoingAttachment, PostInteractionKind, WidgetSpaceType } from '../types';
 import { WidgetErrorBoundary } from './components/ErrorBoundary';
 import { AlertIcon } from './components/icons';
 import { InAppNotification } from './components/InAppNotification';
@@ -103,9 +104,9 @@ export function RepzoWidgetProvider({
     [state.config, state.locale]
   );
 
-  // Home previews the two newest threads and credits the agents behind them.
-  const recentConversations = useMemo(
-    () => pickRecentConversations(state.conversations, 2),
+  // Home previews the newest thread and credits the agents behind the recent ones.
+  const recentConversation = useMemo(
+    () => pickRecentConversations(state.conversations, 1)[0],
     [state.conversations]
   );
   const teamAgents = useMemo(() => pickTeamAgents(state.conversations, 3), [state.conversations]);
@@ -131,6 +132,15 @@ export function RepzoWidgetProvider({
     }),
     [labels]
   );
+  const youPrefix = store.showsYouPrefix();
+  const lastMessageLabels = useMemo(
+    () => ({
+      photo: labels.lastMessagePhoto,
+      file: labels.lastMessageFile,
+      you: youPrefix ? labels.lastMessageYou : '',
+    }),
+    [labels, youPrefix]
+  );
 
   const blockLabels = useMemo(
     () => ({
@@ -163,13 +173,19 @@ export function RepzoWidgetProvider({
       file: labels.attachChooseFile,
       cancel: labels.cancel,
       remove: labels.removeAttachment,
-      tooLarge: formatLabel(labels.attachmentTooLarge, { max: formatBytes(MAX_ATTACHMENT_BYTES) }),
+      tooLarge: formatLabel(labels.attachmentTooLarge, {
+        max: formatBytes(theme.maxAttachmentBytes ?? MAX_ATTACHMENT_BYTES),
+      }),
       tooMany: formatLabel(labels.attachmentTooMany, { count: MAX_ATTACHMENTS }),
       tooLargeTogether: labels.attachmentsTooLargeTogether,
       failed: labels.attachmentFailed,
       cameraDenied: labels.cameraPermissionDenied,
+      uploading: labels.attachmentUploading,
+      uploadFailed: labels.attachmentUploadFailed,
+      uploadFailedNotice: labels.attachmentsUploadFailed,
+      retry: labels.tapToRetry,
     }),
-    [labels]
+    [labels, theme.maxAttachmentBytes]
   );
 
   // Stable across renders so each message bubble only re-renders when its
@@ -181,7 +197,12 @@ export function RepzoWidgetProvider({
       loadEarlier: labels.loadEarlier,
       emptyConversation: labels.emptyConversation,
       messagePlaceholder: labels.messagePlaceholder,
+      send: labels.sendMessage,
+      jumpToLatest: labels.jumpToLatest,
+      jumpToLatestNew: labels.jumpToLatestNew,
+      morePhotos: labels.morePhotos,
       failedToSend: labels.failedToSend,
+      tapToRetry: labels.tapToRetry,
       openAttachment: labels.openAttachment,
       thinking: labels.thinking,
       team: labels.team,
@@ -224,6 +245,7 @@ export function RepzoWidgetProvider({
         close: labels.close,
         loadFailed: labels.imageLoadFailed,
         openExternally: labels.openImageExternally,
+        position: labels.imagePosition,
       },
       voice: {
         play: labels.voicePlay,
@@ -238,6 +260,19 @@ export function RepzoWidgetProvider({
   const attachmentSources = theme.attachmentsEnabled ? getAttachmentSources() : [];
 
   const handleClose = useCallback(() => store.hide(), [store]);
+  const handlePickAttachments = useCallback(
+    (source: AttachmentSource, current: DraftAttachment[]) =>
+      pickAttachments(source, current, theme.maxAttachmentBytes),
+    [theme.maxAttachmentBytes]
+  );
+  const handleUploadAttachment = useCallback(
+    (draft: DraftAttachment, signal?: AbortSignal) =>
+      store.uploadAttachment(
+        { uri: draft.fileUri!, name: draft.name, contentType: draft.contentType, size: draft.size },
+        signal
+      ),
+    [store]
+  );
 
   const handleOpenNotification = useCallback(
     (conversationId: string) => void store.openConversation(conversationId),
@@ -304,6 +339,7 @@ export function RepzoWidgetProvider({
       store.sendMessage(body, attachments ?? [], action),
     [store]
   );
+  const handleRetryMessage = useCallback((messageId: string) => store.retryMessage(messageId), [store]);
 
   const handleIdentifyVisitor = useCallback(
     (data: { email?: string; name?: string; phone?: string }) => store.identifyVisitor(data),
@@ -442,8 +478,11 @@ export function RepzoWidgetProvider({
           offlineMessage={theme.offlineMessage}
           labels={chatLabels}
           attachmentSources={attachmentSources}
-          onPickAttachments={pickAttachments}
+          onPickAttachments={handlePickAttachments}
+          onUploadAttachment={handleUploadAttachment}
           onSendMessage={handleSendMessage}
+          onRetryMessage={handleRetryMessage}
+          photoAlbums={store.showsPhotoAlbums()}
           onIdentifyVisitor={handleIdentifyVisitor}
           onRateConversation={handleRateConversation}
           onLoadMore={handleLoadMore}
@@ -461,7 +500,7 @@ export function RepzoWidgetProvider({
           color={theme.primaryColor}
           visitorName={state.visitorProfile.name}
           conversationCount={state.conversations.length}
-          recentConversations={recentConversations}
+          recentConversation={recentConversation}
           unreadByConversation={state.unreadByConversation}
           teamAgents={teamAgents}
           isOnline={theme.isOnline}
@@ -472,19 +511,17 @@ export function RepzoWidgetProvider({
           showPreviousConversations={theme.showPreviousConversations}
           labels={{
             close: labels.close,
-            viewPrevious: labels.viewPreviousConversations,
-            viewAll: formatLabel(labels.homeViewAllCount, { count: state.conversations.length }),
-            recentTitle: labels.homeRecentTitle,
+            recentTitle: labels.homeRecentMessageTitle,
             noConversations: labels.homeNoConversations,
             statusOnline: labels.homeStatusOnline,
             statusAway: labels.homeStatusAway,
             team: labels.team,
             time: timeLabels,
             unread: labels.unreadBadge,
+            lastMessage: lastMessageLabels,
           }}
           onClose={handleClose}
           onStartConversation={handleStartConversation}
-          onViewConversations={() => handleTabChange('messages')}
           onOpenConversation={(conversationId) => store.openConversation(conversationId)}
         />
       );
@@ -510,6 +547,7 @@ export function RepzoWidgetProvider({
           statusAway: labels.homeStatusAway,
           time: timeLabels,
           unread: labels.unreadBadge,
+          lastMessage: lastMessageLabels,
         }}
         onSelect={(conversationId) => store.openConversation(conversationId)}
         onNewConversation={handleStartConversation}

package/src/ui/components/AttachmentChips.tsx

@@ -1,9 +1,11 @@
 /**
  * Picked-but-unsent attachments above the composer: a thumbnail for images, a
  * name + size card for everything else, each with its own remove button.
+ * A file that uploads ahead of the send shows a spinner until it's up, and
+ * turns into a retry button when the upload fails.
  */
 
-import { Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { ActivityIndicator, Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import {
   formatBytes,
@@ -11,24 +13,29 @@ import {
   type DraftAttachment,
 } from '../../attachments/pickers';
 import { formatLabel } from '../../i18n';
+import { globalStyles } from '../styles/global';
 import { fontSize, palette, radius, spacing, withAlpha } from '../styles/theme';
 import { START_ALIGN } from '../utils/rtl';
-import { CloseIcon } from './icons';
+import { AlertIcon, 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;
+  /** `remove`, `uploading` and `uploadFailed` keep their `{name}` placeholder; filled per chip. */
+  labels: { remove: string; uploading: string; uploadFailed: string; retry: string };
+  /** Removing a chip mid-upload cancels the upload. */
   onRemove: (id: string) => void;
+  /** Starts a failed upload again. */
+  onRetry: (id: string) => void;
 }
 
 export function AttachmentChips({
   attachments,
   disabled,
-  removeLabel,
+  labels,
   onRemove,
+  onRetry,
 }: AttachmentChipsProps) {
   return (
     <ScrollView
@@ -37,38 +44,82 @@ export function AttachmentChips({
       keyboardShouldPersistTaps="handled"
       style={styles.scroller}
       contentContainerStyle={styles.row}>
-      {attachments.map((attachment) => (
-        <View key={attachment.id} style={[styles.chip, disabled && styles.chipDisabled]}>
-          {isImageAttachment(attachment.contentType) ? (
+      {attachments.map((attachment) => {
+        const uploading = attachment.uploadStatus === 'uploading';
+        const failed = attachment.uploadStatus === 'failed';
+        const preview = isImageAttachment(attachment.contentType) ? (
+          <View>
             <Image
               source={{ uri: attachment.previewUri }}
               style={styles.thumbnail}
               resizeMode="cover"
-              accessible
+              accessible={!uploading && !failed}
               accessibilityLabel={attachment.name}
               accessibilityIgnoresInvertColors
             />
-          ) : (
-            <View style={styles.file}>
-              <Text style={styles.fileName} numberOfLines={1}>
-                {attachment.name}
+            {uploading || failed ? (
+              <View style={[styles.scrim, failed && styles.scrimFailed]}>
+                {uploading ? (
+                  <ActivityIndicator color={palette.white} />
+                ) : (
+                  <AlertIcon size={20} color={palette.white} />
+                )}
+              </View>
+            ) : null}
+          </View>
+        ) : (
+          <View style={styles.file}>
+            <Text style={styles.fileName} numberOfLines={1}>
+              {attachment.name}
+            </Text>
+            <View style={styles.fileStatus}>
+              {uploading ? (
+                <ActivityIndicator size="small" color={palette.textMuted} />
+              ) : failed ? (
+                <AlertIcon size={12} color={palette.danger} />
+              ) : null}
+              <Text style={[styles.fileSize, failed && styles.fileFailed]} numberOfLines={1}>
+                {failed ? labels.retry : formatBytes(attachment.size)}
               </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>
-      ))}
+          </View>
+        );
+
+        return (
+          <View key={attachment.id} style={[styles.chip, disabled && styles.chipDisabled]}>
+            {failed ? (
+              <Pressable
+                onPress={() => onRetry(attachment.id)}
+                disabled={disabled}
+                accessibilityRole="button"
+                accessibilityLabel={formatLabel(labels.uploadFailed, { name: attachment.name })}
+                style={({ pressed }) => pressed && globalStyles.pressed}>
+                {preview}
+              </Pressable>
+            ) : uploading ? (
+              <View
+                accessible
+                accessibilityLabel={formatLabel(labels.uploading, { name: attachment.name })}
+                accessibilityState={{ busy: true }}>
+                {preview}
+              </View>
+            ) : (
+              preview
+            )}
+            <Pressable
+              onPress={() => onRemove(attachment.id)}
+              disabled={disabled}
+              accessibilityRole="button"
+              accessibilityLabel={formatLabel(labels.remove, { 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>
   );
 }
@@ -98,6 +149,16 @@ const styles = StyleSheet.create({
     width: CHIP_HEIGHT,
     height: CHIP_HEIGHT,
   },
+  // Over the thumbnail while it uploads; darker once it failed, so the alert reads.
+  scrim: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: withAlpha(palette.ink, 0.4),
+  },
+  scrimFailed: {
+    backgroundColor: withAlpha(palette.ink, 0.6),
+  },
   file: {
     width: 156,
     height: CHIP_HEIGHT,
@@ -112,11 +173,21 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     color: palette.ink,
   },
+  fileStatus: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    marginTop: 2,
+  },
   fileSize: {
+    flexShrink: 1,
     textAlign: START_ALIGN,
     fontSize: fontSize.caption,
     color: palette.textMuted,
-    marginTop: 2,
+  },
+  fileFailed: {
+    color: palette.danger,
+    fontWeight: '600',
   },
   remove: {
     position: 'absolute',

package/src/ui/components/ConversationRow.tsx

@@ -15,6 +15,15 @@ import { forwardDirection, START_ALIGN } from '../utils/rtl';
 import { fontSize, palette, spacing } from '../styles/theme';
 
 const AVATAR_SIZE = 40;
+const CARD_AVATAR_SIZE = 32;
+
+export interface LastMessageLabels {
+  /** Stand in for a newest message that had no words, only photos or other files. */
+  photo: string;
+  file: string;
+  /** Before the visitor's own newest message; keeps `{message}`. Empty: no prefix (`boot({ youPrefix: false })`). */
+  you: string;
+}
 
 interface ConversationRowProps {
   conversation: Conversation;
@@ -26,8 +35,15 @@ interface ConversationRowProps {
   unreadCount?: number;
   /** Template with a `{count}` token, for screen readers. */
   unreadLabel?: string;
+  lastMessageLabels?: LastMessageLabels;
   /** Messages runs full-bleed; Home insets it inside a card. */
   horizontalPadding?: number;
+  /**
+   * `card` is Home's "Recent message" card: a smaller avatar, a regular-weight
+   * name with the time right after it, and no chevron. The words, unread state
+   * and screen-reader label are the list's.
+   */
+  variant?: 'list' | 'card';
   onPress: () => void;
 }
 
@@ -38,47 +54,70 @@ export function ConversationRow({
   timeLabels,
   unreadCount = 0,
   unreadLabel,
+  lastMessageLabels,
   horizontalPadding = spacing.xl,
+  variant = 'list',
   onPress,
 }: ConversationRowProps) {
+  const card = variant === 'card';
   const displayName = conversation.agentName || fallbackName;
   const hasUnread = unreadCount > 0;
   const unreadSuffix =
     hasUnread && unreadLabel ? `. ${formatLabel(unreadLabel, { count: unreadCount })}` : '';
+  const attachment = conversation.lastMessageAttachment;
+  // "Photo" or "File" over Workstation's "2 attachments".
+  const snippet = (attachment && lastMessageLabels?.[attachment]) || conversation.snippet || '';
+  // "You: " is drawn a shade stronger than the message, so it reads as a label.
+  const [youBefore, youAfter] =
+    snippet && conversation.lastMessageFromVisitor && lastMessageLabels?.you
+      ? splitAround(lastMessageLabels.you, '{message}')
+      : ['', ''];
+  const snippetLabel = `${youBefore}${snippet}${youAfter}`;
 
   return (
     <Pressable
       onPress={onPress}
       accessibilityRole="button"
       accessibilityLabel={`${
-        conversation.snippet ? `${displayName}. ${conversation.snippet}` : displayName
+        snippet ? `${displayName}. ${snippetLabel}` : displayName
       }${unreadSuffix}`}
       android_ripple={{ color: palette.borderSoft }}
       style={({ pressed }) => [
         styles.row,
+        card && cardStyles.row,
         { paddingHorizontal: horizontalPadding },
         pressed && styles.rowPressed,
       ]}>
       <Avatar
         avatar={conversation.agentAvatar}
         name={conversation.agentName}
-        size={AVATAR_SIZE}
+        size={card ? CARD_AVATAR_SIZE : AVATAR_SIZE}
         color={color}
       />
       <View style={styles.content}>
-        <View style={styles.topLine}>
-          <Text style={[styles.name, hasUnread && styles.nameUnread]} numberOfLines={1}>
+        <View style={[styles.topLine, card && cardStyles.topLine]}>
+          <Text
+            style={
+              card
+                ? [cardStyles.name, hasUnread && cardStyles.nameUnread]
+                : [styles.name, hasUnread && styles.nameUnread]
+            }
+            numberOfLines={1}>
             {displayName}
           </Text>
-          <Text style={styles.time}>
+          <Text style={[styles.time, card && cardStyles.time]}>
             {conversation.lastMessageAt
               ? formatRelativeTime(conversation.lastMessageAt, timeLabels)
               : ''}
           </Text>
         </View>
-        {conversation.snippet ? (
-          <Text style={[styles.snippet, hasUnread && styles.snippetUnread]} numberOfLines={2}>
-            {conversation.snippet}
+        {snippet ? (
+          <Text
+            style={[styles.snippet, card && cardStyles.snippet, hasUnread && styles.snippetUnread]}
+            numberOfLines={2}>
+            {youBefore ? <Text style={styles.snippetYou}>{youBefore}</Text> : null}
+            {snippet}
+            {youAfter}
           </Text>
         ) : null}
       </View>
@@ -86,13 +125,20 @@ export function ConversationRow({
         <View style={[styles.badge, { backgroundColor: color }]}>
           <Text style={styles.badgeLabel}>{unreadCount > 9 ? '9+' : unreadCount}</Text>
         </View>
-      ) : (
+      ) : card ? null : (
         <ChevronIcon size={16} direction={forwardDirection()} color={palette.textSubtle} />
       )}
     </Pressable>
   );
 }
 
+/** `'You: {message}'` → `['You: ', '']`; a template without the token goes in front. */
+function splitAround(template: string, token: string): [string, string] {
+  const index = template.indexOf(token);
+  if (index < 0) return [`${template} `, ''];
+  return [template.slice(0, index), template.slice(index + token.length)];
+}
+
 /** Where a divider should start so it sits under the text, not the avatar. */
 export function rowDividerInset(horizontalPadding: number = spacing.xl): number {
   return horizontalPadding + AVATAR_SIZE + spacing.md;
@@ -145,6 +191,10 @@ const styles = StyleSheet.create({
     color: palette.text,
     fontWeight: '500',
   },
+  snippetYou: {
+    color: palette.text,
+    fontWeight: '600',
+  },
   // Replaces the chevron rather than crowding beside it, so the row keeps
   // the same width whether or not there is anything unread.
   badge: {
@@ -161,3 +211,34 @@ const styles = StyleSheet.create({
     fontWeight: '700',
   },
 });
+
+// Overrides for the `card` variant. It sits under the card's title, so it
+// drops the list's minimum height, and its name, time and last message share
+// one size, the way the Home design draws them.
+const cardStyles = StyleSheet.create({
+  row: {
+    minHeight: 0,
+    paddingVertical: spacing.sm,
+  },
+  // The time follows the name instead of being pushed to the far edge.
+  topLine: {
+    justifyContent: 'flex-start',
+  },
+  name: {
+    textAlign: START_ALIGN,
+    flexShrink: 1,
+    fontSize: fontSize.body,
+    color: palette.ink,
+  },
+  nameUnread: {
+    fontWeight: '600',
+  },
+  time: {
+    fontSize: fontSize.body,
+  },
+  snippet: {
+    fontSize: fontSize.body,
+    lineHeight: fontSize.body * 1.35,
+    color: palette.textSubtle,
+  },
+});