@repzo/widget-react-native 1.0.1 → 1.0.5

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.1';
+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' {
@@ -168,6 +168,8 @@ export class WidgetStore {
   private visitorTypingActive = false;
 
   private seenMessageIds: string[] = [];
+  /** Statuses (e.g. "read") that arrived for an id before a send response revealed it. */
+  private earlyStatuses = new Map<string, string>();
 
   /**
    * Identity generation. Bumped whenever boot/login/logout is requested; every
@@ -487,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
@@ -510,7 +512,7 @@ export class WidgetStore {
       },
     }));
 
-    this.persistConfig(result.config);
+    this.persistConfig(this.hydrateConfig(result.config));
     this.connectRealtime(result.token);
     this.watchAppState();
     this.loadOutboundMessage();
@@ -556,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 = {
@@ -888,7 +905,7 @@ export class WidgetStore {
 
   private handleRealtimeEvent(event: string, data: any) {
     if (
-      (event === 'message.new' || event === 'conversation.event') &&
+      (event === 'message.new' || event === 'message.deleted' || event === 'message.status' || event === 'conversation.event') &&
       this.shouldHoldForDraft(data?.conversationId)
     ) {
       this.draftEvents.push({ event, data });
@@ -915,6 +932,14 @@ export class WidgetStore {
         this.handleNewMessage(data);
         break;
 
+      case 'message.deleted':
+        this.handleDeletedMessage(data);
+        break;
+
+      case 'message.status':
+        this.handleMessageStatus(data);
+        break;
+
       case 'conversation.updated':
         this.rememberConversationAgent(data);
         this.setState((current) => ({
@@ -927,6 +952,7 @@ export class WidgetStore {
                     data.agentAvatar === undefined
                       ? conversation.agentAvatar
                       : this.client.resolveUrl(data.agentAvatar),
+                  agentOnline: data.agentOnline === undefined ? conversation.agentOnline : data.agentOnline,
                 }
               : conversation
           ),
@@ -1044,6 +1070,50 @@ export class WidgetStore {
     return false;
   }
 
+  /**
+   * A teammate deleted a message: the visitor sees "This message was deleted"
+   * in its place (they can't delete anything themselves), and the list is
+   * refreshed so its preview stops showing the text. The id stays in
+   * `seenMessageIds`, so a replayed `message.new` can't restore the content.
+   */
+  /**
+   * A teammate opened the conversation: the visitor's messages are now Seen.
+   * The ids are also remembered, because the event can arrive before the send
+   * response swaps a pending bubble's temporary id for the server id.
+   */
+  private handleMessageStatus(data: any) {
+    const ids: string[] = Array.isArray(data?.messageIds) ? data.messageIds : [];
+    const status: string | undefined = typeof data?.status === 'string' ? data.status : undefined;
+    if (!status || ids.length === 0) return;
+    for (const id of ids) this.earlyStatuses.set(id, status);
+    if (this.earlyStatuses.size > SEEN_MESSAGE_LIMIT) {
+      this.earlyStatuses.delete(this.earlyStatuses.keys().next().value as string);
+    }
+    if (!this.isThreadOnScreen(data?.conversationId)) return;
+    this.setState((current) => ({
+      messages: current.messages.map((message) =>
+        ids.includes(message.id) ? { ...message, status } : message
+      ),
+    }));
+  }
+
+  private handleDeletedMessage(data: any) {
+    const messageId: string | undefined = data?.messageId;
+    if (!messageId) return;
+    if (!this.seenMessageIds.includes(messageId)) this.isReplayedMessage(messageId);
+    if (this.isThreadOnScreen(data?.conversationId)) {
+      this.setState((current) => ({
+        messages: current.messages.map((message) =>
+          message.id === messageId ? asDeletedPlaceholder(message, new Date().toISOString()) : message
+        ),
+      }));
+    }
+    if (this.state.inAppNotification?.messageId === messageId) {
+      this.setState({ inAppNotification: null });
+    }
+    void this.refreshConversations();
+  }
+
   private handleNewMessage(data: any) {
     if (this.isReplayedMessage(data?.messageId)) return;
 
@@ -1060,7 +1130,7 @@ export class WidgetStore {
       body: data?.body || null,
       bodyPlain: data?.bodyPlain || null,
       attachments: this.hydrateAttachments(data?.attachments, messageId),
-      metadata: data?.metadata || null,
+      metadata: this.hydrateMetadata(data?.metadata || null),
       status: 'delivered',
       createdAt: data?.createdAt || new Date().toISOString(),
     };
@@ -1557,7 +1627,10 @@ 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));
-        const upgraded = adoptServerAttachments(current.messages, fresh);
+        const upgraded = adoptServerStatuses(
+          adoptServerDeletions(adoptServerAttachments(current.messages, fresh), fresh),
+          fresh
+        );
         if (missing.length === 0) return upgraded === current.messages ? {} : { messages: upgraded };
 
         const local = current.messages.filter(isLocalMessage);
@@ -1588,10 +1661,17 @@ export class WidgetStore {
       .map((message) => ({
         ...message,
         attachments: this.hydrateAttachments(message.attachments, message.id),
+        metadata: this.hydrateMetadata(message.metadata),
       }))
       .reverse();
   }
 
+  /** The "joined" line's avatar can be a server-relative media path. */
+  private hydrateMetadata(metadata: Message['metadata']): Message['metadata'] {
+    if (!metadata || typeof metadata.agentAvatar !== 'string') return metadata ?? null;
+    return { ...metadata, agentAvatar: this.client.resolveUrl(metadata.agentAvatar) };
+  }
+
   /**
    * 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
@@ -1710,7 +1790,9 @@ export class WidgetStore {
         const messages = delivered
           ? current.messages.filter((message) => message.id !== tempId)
           : current.messages.map((message) =>
-              message.id === tempId ? { ...message, id: result.messageId, status: 'sent' } : message
+              message.id === tempId
+                ? { ...message, id: result.messageId, status: this.earlyStatuses.get(result.messageId) ?? 'sent' }
+                : message
             );
 
         if (!createdId) return { messages };
@@ -1856,6 +1938,40 @@ function isLocalMessage(message: Message): boolean {
  * 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.
  */
+/** A "Seen" missed while the stream was down shows up on the next re-read. */
+function adoptServerStatuses(messages: Message[], server: Message[]): Message[] {
+  const seen = new Set(server.filter((message) => message.status === 'read').map((message) => message.id));
+  if (seen.size === 0) return messages;
+  let changed = false;
+  const next = messages.map((message) => {
+    if (!seen.has(message.id) || message.status === 'read') return message;
+    changed = true;
+    return { ...message, status: 'read' };
+  });
+  return changed ? next : messages;
+}
+
+/** Keeps who/when, drops everything the visitor could read. */
+function asDeletedPlaceholder(message: Message, deletedAt: string): Message {
+  return { ...message, body: null, bodyPlain: null, attachments: null, metadata: null, deletedAt };
+}
+
+/** A deletion missed while the stream was down shows up on the next re-read. */
+function adoptServerDeletions(messages: Message[], server: Message[]): Message[] {
+  const deleted = new Map(
+    server.filter((message) => message.deletedAt).map((message) => [message.id, message.deletedAt!])
+  );
+  if (deleted.size === 0) return messages;
+  let changed = false;
+  const next = messages.map((message) => {
+    const deletedAt = deleted.get(message.id);
+    if (!deletedAt || message.deletedAt) return message;
+    changed = true;
+    return asDeletedPlaceholder(message, deletedAt);
+  });
+  return changed ? next : messages;
+}
+
 function adoptServerAttachments(messages: Message[], server: Message[]): Message[] {
   const serverCopies = new Map(
     server.filter((message) => message.attachments?.length).map((message) => [message.id, message])

package/src/types.ts

@@ -21,6 +21,12 @@ export interface PreChatField {
   options?: string[];
 }
 
+/** A teammate's face for the stacked header / "Waiting for a teammate" avatars. */
+export interface TeamAvatar {
+  initials: string;
+  avatarUrl: string | null;
+}
+
 export interface WidgetConfig {
   primaryColor: string;
   homeLogoUrl: string | null;
@@ -66,6 +72,10 @@ export interface WidgetConfig {
   identityVerificationEnabled: boolean;
   hmacMandatory: boolean;
   isOnline: boolean;
+  /** Header title while no teammate has joined (and after the conversation closes). */
+  workspaceName?: string | null;
+  /** Up to three teammates shown stacked beside it. Absent on older servers. */
+  teamAvatars?: TeamAvatar[];
 }
 
 /** Received attachments are normalized: a missing `id`/`size` is filled in. */
@@ -102,6 +112,8 @@ export interface Conversation {
   createdAt: string;
   agentName: string | null;
   agentAvatar: string | null;
+  /** The assigned teammate's own presence ("Active"/"Away"); absent on older servers. */
+  agentOnline?: boolean | null;
   /**
    * Agent replies the visitor hasn't seen, computed server-side from their
    * read cursor. Absent on older Workstation deployments — the SDK then falls
@@ -122,6 +134,8 @@ export interface Message {
   metadata?: Record<string, unknown> | null;
   status: string | null;
   createdAt: string;
+  /** Set when a teammate deleted the message; the content fields are then empty. */
+  deletedAt?: string | null;
 }
 
 export interface OutboundMessage {
@@ -438,6 +452,8 @@ export interface AgentProcedureForm {
 export type WidgetRealtimeEvent =
   | 'connected'
   | 'message.new'
+  | 'message.deleted'
+  | 'message.status'
   | 'typing.start'
   | 'typing.stop'
   | 'conversation.updated'

package/src/ui/WidgetProvider.tsx

@@ -12,6 +12,7 @@ import {
   Modal,
   Platform,
   Pressable,
+  StatusBar,
   StyleSheet,
   Text,
   View,
@@ -26,7 +27,7 @@ import {
   pickAttachments,
 } from '../attachments/pickers';
 import { controller } from '../controller';
-import { buildLabels, createTranslator, formatLabel } from '../i18n';
+import { buildLabels, createTranslator, formatLabel, localizeWelcomeText } from '../i18n';
 import { useWidgetState } from '../state/use-widget-state';
 import type { AgentUiAction, OutgoingAttachment, WidgetSpaceType } from '../types';
 import { WidgetErrorBoundary } from './components/ErrorBoundary';
@@ -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 {
@@ -69,7 +79,20 @@ export function RepzoWidgetProvider({
   // not, so they own the top inset.
   const topInset = Platform.OS === 'ios' && presentationStyle === 'pageSheet' ? 0 : insets.top;
 
-  const theme = useMemo(() => buildTheme(state.config), [state.config]);
+  const localizedConfig = useMemo(
+    () => localizeWelcomeText(state.config, state.locale),
+    [state.config, state.locale]
+  );
+  const theme = useMemo(() => buildTheme(localizedConfig), [localizedConfig]);
+  // Teammate photos can be server-relative media paths.
+  const teamAvatars = useMemo(
+    () =>
+      (state.config?.teamAvatars ?? []).map((avatar) => ({
+        ...avatar,
+        avatarUrl: store.client.resolveUrl(avatar.avatarUrl),
+      })),
+    [state.config, store]
+  );
   const labels = useMemo(
     () => buildLabels(createTranslator(state.config, state.locale)),
     [state.config, state.locale]
@@ -179,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 (
@@ -251,7 +289,11 @@ export function RepzoWidgetProvider({
           color={theme.primaryColor}
           agentName={activeConversation?.agentName}
           agentAvatar={activeConversation?.agentAvatar}
+          agentOnline={activeConversation?.agentOnline}
           isOnline={theme.isOnline}
+          teamName={state.config?.workspaceName}
+          teamAvatars={teamAvatars}
+          replyTimeLabel={theme.replyTimeLabel}
           locale={state.locale}
           prefillText={state.prefillText}
           offlineMessage={theme.offlineMessage}
@@ -270,6 +312,11 @@ export function RepzoWidgetProvider({
             today: labels.today,
             yesterday: labels.yesterday,
             conversationUpdated: labels.conversationUpdated,
+            messageDeleted: labels.messageDeleted,
+            messageSent: labels.messageSent,
+            messageSeen: labels.messageSeen,
+            waitingForTeammate: labels.waitingForTeammate,
+            joinedConversation: labels.joinedConversation,
             procedureSend: labels.procedureSend,
             procedureSent: labels.procedureSent,
             blocks: blockLabels,
@@ -295,7 +342,7 @@ export function RepzoWidgetProvider({
     if (isHomeSurface) {
       return (
         <HomeView
-          config={state.config}
+          config={localizedConfig}
           color={theme.primaryColor}
           visitorName={state.visitorProfile.name}
           conversationCount={state.conversations.length}
@@ -383,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 }]}>
@@ -441,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/components/TeamAvatars.tsx

@@ -0,0 +1,58 @@
+/**
+ * Up to three overlapping teammate avatars — the Messenger header when no
+ * teammate has joined yet, and the "Waiting for a teammate" row (Intercom-style).
+ * Falls back to a single placeholder avatar when the workspace sent none.
+ */
+
+import { StyleSheet, View } from 'react-native';
+
+import type { TeamAvatar } from '../../types';
+import { palette } from '../styles/theme';
+import { Avatar } from './Avatar';
+
+interface TeamAvatarsProps {
+  avatars: TeamAvatar[];
+  size?: number;
+  color?: string;
+  /** Ring between overlapping avatars; matches the surface behind them. */
+  ringColor?: string;
+  translucent?: boolean;
+}
+
+export function TeamAvatars({
+  avatars,
+  size = 32,
+  color = palette.ink,
+  ringColor = palette.white,
+  translucent = false,
+}: TeamAvatarsProps) {
+  if (avatars.length === 0) {
+    return <Avatar size={size} color={color} translucent={translucent} />;
+  }
+  const ring = Math.max(1.5, size * 0.06);
+  return (
+    <View style={styles.row} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+      {avatars.slice(0, 3).map((avatar, index) => (
+        <View
+          key={`${avatar.initials}-${index}`}
+          style={[
+            styles.slot,
+            {
+              marginStart: index === 0 ? 0 : -size * 0.3,
+              borderRadius: (size + ring * 2) / 2,
+              borderWidth: ring,
+              borderColor: ringColor,
+              zIndex: 3 - index,
+            },
+          ]}>
+          <Avatar avatar={avatar.avatarUrl} name={avatar.initials} size={size} color={color} translucent={translucent} />
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center' },
+  slot: { overflow: 'hidden' },
+});

package/src/ui/components/icons.tsx

@@ -313,3 +313,40 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
 });
+
+/** A ring with two hands — the reply-time hint beside the team name. */
+export function ClockIcon({ size = 14, color = palette.textMuted, style }: IconProps) {
+  const thickness = Math.max(1.25, size * 0.1);
+  const hand: ViewStyle = {
+    position: 'absolute',
+    width: thickness,
+    borderRadius: thickness,
+    backgroundColor: color,
+    bottom: size / 2 - thickness / 2,
+  };
+  return (
+    <View style={[{ width: size, height: size }, styles.center, style]}>
+      <View
+        style={{
+          position: 'absolute',
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: thickness,
+          borderColor: color,
+        }}
+      />
+      <View style={[hand, { height: size * 0.32, left: size / 2 - thickness / 2 }]} />
+      <View
+        style={[
+          hand,
+          {
+            height: size * 0.24,
+            left: size / 2 - thickness / 2,
+            transform: [{ translateX: size * 0.1 }, { translateY: size * 0.04 }, { rotate: '-90deg' }],
+          },
+        ]}
+      />
+    </View>
+  );
+}

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.styles.ts

@@ -50,6 +50,36 @@ export const styles = StyleSheet.create({
     fontSize: fontSize.caption,
     marginTop: 1,
   },
+  headerReplyTime: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    marginTop: 1,
+  },
+  headerReplyTimeText: {
+    flexShrink: 1,
+    marginTop: 0,
+  },
+  waitingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.sm,
+    paddingVertical: spacing.sm,
+  },
+  waitingText: {
+    color: palette.textMuted,
+    fontSize: fontSize.caption,
+  },
+  joinedRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: spacing.xs,
+  },
+  joinedName: {
+    fontWeight: '700',
+    color: palette.ink,
+  },
   messagesContentEmpty: {
     flexGrow: 1,
     justifyContent: 'center',
@@ -108,6 +138,13 @@ export const styles = StyleSheet.create({
     marginBottom: 3,
     marginStart: spacing.xs,
   },
+  receiptText: {
+    alignSelf: 'flex-end',
+    marginTop: 3,
+    marginEnd: spacing.xs,
+    fontSize: 11,
+    color: palette.textSubtle,
+  },
   messageTime: {
     fontSize: 11,
     alignSelf: 'flex-end',
@@ -190,6 +227,20 @@ export const styles = StyleSheet.create({
     fontSize: fontSize.caption,
     marginTop: spacing.xs,
   },
+  deletedBubble: {
+    maxWidth: '80%',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.lg + 4,
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    borderColor: palette.border,
+  },
+  deletedText: {
+    color: palette.textMuted,
+    fontSize: fontSize.caption,
+    fontStyle: 'italic',
+  },
   systemRow: {
     alignItems: 'center',
     paddingVertical: spacing.sm,