@repzo/widget-react-native 1.3.1 → 1.5.0

package/src/ui/screens/chat/ChatView.types.ts

@@ -1,6 +1,7 @@
 import type { TeamAvatar } from '../../../types';
 /** Props and label bundle for the chat thread. */
 
+import type { UploadedFile } from '../../../api/client';
 import type { DraftAttachment, PickResult } from '../../../attachments/pickers';
 import type {
   AgentUiAction,
@@ -20,6 +21,14 @@ export interface ChatLabels {
   loadEarlier: string;
   emptyConversation: string;
   messagePlaceholder: string;
+  /** Screen-reader label of the send button. */
+  send: string;
+  /** The button back to the newest message. */
+  jumpToLatest: string;
+  /** The same with `{count}` teammate replies that arrived while scrolled up. */
+  jumpToLatestNew: string;
+  /** Last tile of a photo album, with `{count}` photos behind its "+N". */
+  morePhotos: string;
   failedToSend: string;
   /** After `failedToSend` on a bubble that can be re-sent. */
   tapToRetry: string;
@@ -57,7 +66,10 @@ export interface ChatLabels {
   openAttachment: string;
 }
 
-/** Composer attachment copy. Limits are already filled in; `remove` keeps `{name}`. */
+/**
+ * Composer attachment copy. Limits are already filled in; `remove`,
+ * `uploading` and `uploadFailed` keep `{name}`.
+ */
 export interface AttachLabels {
   button: string;
   photoLibrary: string;
@@ -70,6 +82,11 @@ export interface AttachLabels {
   tooLargeTogether: string;
   failed: string;
   cameraDenied: string;
+  uploading: string;
+  uploadFailed: string;
+  uploadFailedNotice: string;
+  /** Under a file chip whose upload failed. */
+  retry: string;
 }
 
 export interface ChatViewProps {
@@ -100,6 +117,12 @@ export interface ChatViewProps {
   attachmentSources?: AttachmentSource[];
   /** Opens a picker and returns what fits beside `current`. Never rejects. */
   onPickAttachments?: (source: AttachmentSource, current: DraftAttachment[]) => Promise<PickResult>;
+  /**
+   * Uploads a picked local file (`fileUri`) and resolves its upload token,
+   * with when it expires. Absent: such files go up when the message is sent
+   * instead.
+   */
+  onUploadAttachment?: (draft: DraftAttachment, signal?: AbortSignal) => Promise<UploadedFile>;
   /** Rejects when the send fails, so the composer can keep its attachments. */
   onSendMessage: (
     body: string,
@@ -117,6 +140,8 @@ export interface ChatViewProps {
   ) => Promise<ConversationRatingResult>;
   /** The widget's default language — rating reasons fall back to it. */
   defaultLocale?: string;
+  /** A message's photos share one album (default true; `boot({ photoAlbums })`). */
+  photoAlbums?: boolean;
   onLoadMore: () => void;
   onTyping: (isTyping: boolean) => void;
   onBack: () => void;

package/src/ui/screens/conversations/ConversationsList.tsx

@@ -119,6 +119,7 @@ export function ConversationsList({
             timeLabels={labels.time}
             unreadCount={unreadByConversation[item.id] ?? 0}
             unreadLabel={labels.unread}
+            lastMessageLabels={labels.lastMessage}
             onPress={() => onSelect(item.id)}
           />
         )}

package/src/ui/screens/conversations/ConversationsList.types.ts

@@ -1,6 +1,7 @@
 /** Props and label bundle for the Messages space. */
 
 import type { Conversation } from '../../../types';
+import type { LastMessageLabels } from '../../components/ConversationRow';
 import type { RelativeTimeLabels } from '../../utils/conversations';
 
 export interface ConversationsListLabels {
@@ -15,6 +16,7 @@ export interface ConversationsListLabels {
   time: RelativeTimeLabels;
   /** Template with a `{count}` token. */
   unread: string;
+  lastMessage: LastMessageLabels;
 }
 
 export interface ConversationsListProps {

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

@@ -3,23 +3,23 @@
  * the sheet so the component and the styles can never disagree about them.
  */
 
-import { I18nManager, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 
-import { rowDividerInset } from '../../components/ConversationRow';
 import { fontSize, palette, radius, shadows, spacing } from '../../styles/theme';
 import { START_ALIGN } from '../../utils/rtl';
 
 /**
  * Header geometry in dp, measured off the web widget so the two surfaces line
- * up: a tall header with the greeting pinned low, a start card that overhangs
+ * up: a tall header with the greeting pinned low, a first card that overhangs
  * the seam by a fixed amount rather than half its height, and a fade that is a
  * straight white ramp over the bottom of the header, starting just under the
  * heading.
  */
 export const HEADER_MIN_HEIGHT = 228;
-/** Between the greeting and whatever comes next: the seam, or the start card. */
+/** Between the greeting and whatever comes next: the seam, or the first card. */
 export const HEADER_BOTTOM_PADDING = 36;
-export const START_CARD_LIFT = 28;
+/** How far the first card (recent message, else the start card) rides up over the seam. */
+export const LEAD_CARD_LIFT = 28;
 export const START_CARD_MIN_HEIGHT = 76;
 export const HEADER_FADE_HEIGHT = 90;
 export const CLOSE_BUTTON_SIZE = 28;
@@ -38,7 +38,7 @@ export const styles = StyleSheet.create({
     minHeight: HEADER_MIN_HEIGHT,
     paddingHorizontal: spacing.xl,
     paddingTop: spacing.xl,
-    // When the start card is shown the component grows this to clear the card.
+    // When a card overhangs the seam the component grows this to clear it.
     paddingBottom: HEADER_BOTTOM_PADDING,
     overflow: 'hidden',
   },
@@ -82,7 +82,7 @@ export const styles = StyleSheet.create({
     lineHeight: fontSize.body * 1.4,
   },
 
-  // Meets the header on a straight seam. No top padding here: the start card
+  // Meets the header on a straight seam. No top padding here: the first card
   // is pulled up past this edge, and the rest of the content takes its spacing
   // from `bodyContent`.
   body: {
@@ -115,12 +115,36 @@ export const styles = StyleSheet.create({
     color: palette.warningText,
   },
 
-  startCardSlot: {
-    marginTop: -START_CARD_LIFT,
+  leadCards: {
+    marginTop: -LEAD_CARD_LIFT,
+    gap: spacing.md,
+  },
+  // White like the row inside it, so a press is the only thing that tints it,
+  // with the start card's border and shadow so the two read as a stack. No
+  // `overflow: hidden`: it would clip the shadow on iOS, and the row never
+  // reaches the rounded corners anyway.
+  recentCard: {
+    paddingTop: spacing.lg,
+    paddingBottom: spacing.sm,
+    borderRadius: radius.lg,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.border,
+    backgroundColor: palette.white,
+    ...shadows.card,
   },
-  // Neutral and opaque, like the web card: it spans two backgrounds, and a
-  // translucent or brand-tinted fill would let the header bleed through its
-  // top or stain the seam. Shadowed because without it the half over the
+  // Inset like the start card's content, so the title, the avatar and the
+  // start card's icon share one left edge.
+  recentTitle: {
+    textAlign: START_ALIGN,
+    paddingHorizontal: spacing.xl,
+    marginBottom: spacing.xs,
+    fontSize: fontSize.title,
+    fontWeight: '600',
+    color: palette.ink,
+  },
+  // Neutral and opaque, like the web card: as the first card it spans two
+  // backgrounds, and a translucent or brand-tinted fill would let the header
+  // bleed through its top or stain the seam. Shadowed because without it the half over the
   // header reads as a flat cut-out.
   startCard: {
     flexDirection: 'row',
@@ -162,39 +186,6 @@ export const styles = StyleSheet.create({
     marginTop: 2,
   },
 
-  recentHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    minHeight: 28,
-    marginBottom: spacing.sm,
-  },
-  recentTitle: {
-    textAlign: START_ALIGN,
-    fontSize: fontSize.caption,
-    fontWeight: '700',
-    color: palette.textMuted,
-    letterSpacing: I18nManager.isRTL ? 0 : 0.6,
-    textTransform: 'uppercase',
-  },
-  viewAllButton: {
-    minHeight: 32,
-    paddingHorizontal: spacing.xs,
-    justifyContent: 'center',
-  },
-  viewAllLabel: {
-    textAlign: START_ALIGN,
-    fontSize: fontSize.meta,
-    fontWeight: '600',
-  },
-  // Border rather than a shadow: `overflow: hidden` keeps the rows' ripple
-  // inside the rounded corners, and would clip a shadow on iOS anyway.
-  recentCard: {
-    overflow: 'hidden',
-  },
-  recentDivider: {
-    marginStart: rowDividerInset(spacing.lg),
-  },
   // Absorbs the slack so the status strip stays pinned to the bottom, and
   // centers the empty hint when there is nothing else to show.
   spacer: {

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

@@ -1,19 +1,21 @@
 /**
- * Home space — branded greeting header, the "start a conversation" card, a
- * preview of recent threads and a team/availability strip.
+ * Home space — branded greeting header, the newest conversation in a "Recent
+ * message" card, the "start a conversation" card under it and a
+ * team/availability strip.
  * Port of `client/src/widget/components/HomeView.tsx`.
  *
  * The header meets the white body on a straight seam, the same as the web
  * widget. Whether that seam is a hard edge or the background washing out into
- * white is the dashboard's `homeBackgroundFade` toggle, and the start card sits
- * astride it either way: top over the brand background, bottom over white.
+ * white is the dashboard's `homeBackgroundFade` toggle, and the first card (the
+ * recent message, or the start card when there is none) sits astride it either
+ * way: top over the brand background, bottom over white.
  *
  * Everything on this screen comes from the widget config or the conversations
  * the visitor already has; nothing here assumes a field the backend does not
  * send today.
  */
 
-import { Fragment, useEffect, useRef, useState, type ReactNode } from 'react';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import {
   Animated,
   Easing,
@@ -47,9 +49,9 @@ import {
   HEADER_BOTTOM_PADDING,
   HEADER_FADE_HEIGHT,
   HEADER_MIN_HEIGHT,
+  LEAD_CARD_LIFT,
   LOGO_HEIGHT,
   LOGO_MAX_WIDTH,
-  START_CARD_LIFT,
   styles,
 } from './HomeView.styles';
 import type { HomeViewProps } from './HomeView.types';
@@ -74,7 +76,7 @@ export function HomeView({
   color,
   visitorName,
   conversationCount,
-  recentConversations,
+  recentConversation,
   unreadByConversation,
   teamAgents,
   isOnline,
@@ -86,7 +88,6 @@ export function HomeView({
   labels,
   onClose,
   onStartConversation,
-  onViewConversations,
   onOpenConversation,
 }: HomeViewProps) {
   const heading = personalizeGreeting(config?.welcomeHeading, visitorName, 'Hi there');
@@ -111,14 +112,14 @@ export function HomeView({
   // colour over the bottom of the header, so the start card lands on near-white.
   const fade = config?.homeBackgroundFade ? <FadeOverlay height={HEADER_FADE_HEIGHT} /> : null;
 
-  const showRecent = showPreviousConversations && recentConversations.length > 0;
-  const showViewAll = conversationCount > recentConversations.length;
+  const recent = showPreviousConversations ? recentConversation : undefined;
+  const hasLeadCards = !!recent || allowNewConversations;
   const showEmptyHint =
     showPreviousConversations && conversationCount === 0 && allowNewConversations;
   // One agent already has their face in the row above; repeating it reads as a bug.
   const showAvatarStack = teamAgents.length >= 2;
 
-  // The start card is pulled up over the seam by a fixed amount, so the header
+  // The first 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.
@@ -128,7 +129,7 @@ export function HomeView({
     topInset > 0
       ? { paddingTop: spacing.xl + topInset, minHeight: HEADER_MIN_HEIGHT + topInset }
       : null,
-    allowNewConversations ? { paddingBottom: HEADER_BOTTOM_PADDING + START_CARD_LIFT } : null,
+    hasLeadCards ? { paddingBottom: HEADER_BOTTOM_PADDING + LEAD_CARD_LIFT } : null,
   ];
 
   const headerContent = (
@@ -186,30 +187,53 @@ export function HomeView({
       )}
 
       <View style={styles.body}>
-        {allowNewConversations ? (
-          <View style={styles.startCardSlot}>
-            <FadeSlideIn delay={40}>
-              <Pressable
-                onPress={onStartConversation}
-                accessibilityRole="button"
-                android_ripple={{ color: palette.borderSoft }}
-                style={({ pressed }) => [styles.startCard, pressed && styles.startCardPressed]}>
-                <View style={[styles.startIcon, { backgroundColor: color }]}>
-                  <ChatIcon size={18} color={startIconColor} />
+        {hasLeadCards ? (
+          <View style={styles.leadCards}>
+            {recent ? (
+              <FadeSlideIn delay={40}>
+                <View style={styles.recentCard}>
+                  <Text style={styles.recentTitle} accessibilityRole="header">
+                    {labels.recentTitle}
+                  </Text>
+                  <ConversationRow
+                    variant="card"
+                    conversation={recent}
+                    color={color}
+                    fallbackName={labels.team}
+                    timeLabels={labels.time}
+                    unreadCount={unreadByConversation[recent.id] ?? 0}
+                    unreadLabel={labels.unread}
+                    lastMessageLabels={labels.lastMessage}
+                    horizontalPadding={spacing.xl}
+                    onPress={() => onOpenConversation(recent.id)}
+                  />
                 </View>
-                <View style={styles.startCopy}>
-                  <Text style={styles.startTitle}>{startConversationLabel}</Text>
-                  <Text style={styles.startSubtitle}>{replyTimeLabel}</Text>
-                </View>
-                <ArrowRightIcon size={18} color={color} style={flipForRTL()} />
-              </Pressable>
-            </FadeSlideIn>
+              </FadeSlideIn>
+            ) : null}
+            {allowNewConversations ? (
+              <FadeSlideIn delay={80}>
+                <Pressable
+                  onPress={onStartConversation}
+                  accessibilityRole="button"
+                  android_ripple={{ color: palette.borderSoft }}
+                  style={({ pressed }) => [styles.startCard, pressed && styles.startCardPressed]}>
+                  <View style={[styles.startIcon, { backgroundColor: color }]}>
+                    <ChatIcon size={18} color={startIconColor} />
+                  </View>
+                  <View style={styles.startCopy}>
+                    <Text style={styles.startTitle}>{startConversationLabel}</Text>
+                    <Text style={styles.startSubtitle}>{replyTimeLabel}</Text>
+                  </View>
+                  <ArrowRightIcon size={18} color={color} style={flipForRTL()} />
+                </Pressable>
+              </FadeSlideIn>
+            ) : null}
           </View>
         ) : null}
 
         <View style={styles.bodyContent}>
           {offlineMessage ? (
-            <FadeSlideIn delay={70}>
+            <FadeSlideIn delay={110}>
               <View style={styles.offlineNotice}>
                 <AlertIcon size={18} />
                 <Text style={styles.offlineText}>{offlineMessage}</Text>
@@ -217,46 +241,6 @@ export function HomeView({
             </FadeSlideIn>
           ) : null}
 
-          {showRecent ? (
-            <FadeSlideIn delay={140}>
-              <View style={styles.recentHeader}>
-                <Text style={styles.recentTitle}>{labels.recentTitle}</Text>
-                {showViewAll ? (
-                  <Pressable
-                    onPress={onViewConversations}
-                    accessibilityRole="button"
-                    accessibilityLabel={labels.viewPrevious}
-                    hitSlop={10}
-                    style={({ pressed }) => [
-                      styles.viewAllButton,
-                      pressed && globalStyles.pressed,
-                    ]}>
-                    <Text style={[styles.viewAllLabel, { color }]}>{labels.viewAll}</Text>
-                  </Pressable>
-                ) : null}
-              </View>
-              <View style={[globalStyles.card, styles.recentCard]}>
-                {recentConversations.map((conversation, index) => (
-                  <Fragment key={conversation.id}>
-                    {index > 0 ? (
-                      <View style={[globalStyles.divider, styles.recentDivider]} />
-                    ) : null}
-                    <ConversationRow
-                      conversation={conversation}
-                      color={color}
-                      fallbackName={labels.team}
-                      timeLabels={labels.time}
-                      unreadCount={unreadByConversation[conversation.id] ?? 0}
-                      unreadLabel={labels.unread}
-                      horizontalPadding={spacing.lg}
-                      onPress={() => onOpenConversation(conversation.id)}
-                    />
-                  </Fragment>
-                ))}
-              </View>
-            </FadeSlideIn>
-          ) : null}
-
           <View style={styles.spacer}>
             {showEmptyHint ? (
               <FadeSlideIn delay={140}>

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

@@ -1,13 +1,12 @@
 /** Props and label bundle for the Home space. */
 
 import type { Conversation, WidgetConfig } from '../../../types';
+import type { LastMessageLabels } from '../../components/ConversationRow';
 import type { RelativeTimeLabels, TeamAgent } from '../../utils/conversations';
 
 export interface HomeViewLabels {
   close: string;
-  /** Accessibility label for the "view all" control. */
-  viewPrevious: string;
-  viewAll: string;
+  /** Heading inside the "Recent message" card. */
   recentTitle: string;
   noConversations: string;
   statusOnline: string;
@@ -17,6 +16,7 @@ export interface HomeViewLabels {
   time: RelativeTimeLabels;
   /** Template with a `{count}` token. */
   unread: string;
+  lastMessage: LastMessageLabels;
 }
 
 export interface HomeViewProps {
@@ -24,8 +24,8 @@ export interface HomeViewProps {
   color: string;
   visitorName?: string;
   conversationCount: number;
-  /** Already sorted newest-first and capped by the provider. */
-  recentConversations: Conversation[];
+  /** The newest conversation, picked by the provider; none before the first one. */
+  recentConversation?: Conversation;
   unreadByConversation: Record<string, number>;
   teamAgents: TeamAgent[];
   isOnline: boolean;
@@ -37,6 +37,5 @@ export interface HomeViewProps {
   labels: HomeViewLabels;
   onClose: () => void;
   onStartConversation: () => void;
-  onViewConversations: () => void;
   onOpenConversation: (conversationId: string) => void;
 }

package/src/ui/utils/html.ts

@@ -42,6 +42,32 @@ export function stripHtml(html: string): string {
     .trim();
 }
 
+/**
+ * Agent reply HTML → the Markdown subset `Markdown` draws: paragraphs, line
+ * breaks, lists, bold, italic, inline code and links. Other tags keep their text.
+ */
+export function htmlToMarkdown(html: string): string {
+  if (!html) return '';
+  return decodeEntities(
+    html
+      .replace(/<br\s*\/?>/gi, '\n')
+      .replace(/<ol\b[^>]*>([\s\S]*?)<\/ol>/gi, (_list, items: string) => {
+        let number = 0;
+        return `\n\n${items.replace(/<li\b[^>]*>/gi, () => `\n${++number}. `)}\n\n`;
+      })
+      .replace(/<li\b[^>]*>/gi, '\n- ')
+      .replace(/<\/(p|div|h[1-6]|blockquote|ul|tr)>/gi, '\n\n')
+      .replace(/<(strong|b)\b[^>]*>([\s\S]+?)<\/\1>/gi, '**$2**')
+      .replace(/<(em|i)\b[^>]*>([\s\S]+?)<\/\1>/gi, '*$2*')
+      .replace(/<code\b[^>]*>([\s\S]+?)<\/code>/gi, '`$1`')
+      .replace(/<a\b[^>]*?\bhref=(["'])(.*?)\1[^>]*>([\s\S]*?)<\/a>/gi, '[$3]($2)')
+      .replace(/<[^>]+>/g, '')
+  )
+    .replace(/[ \t]+\n/g, '\n')
+    .replace(/\n{3,}/g, '\n\n')
+    .trim();
+}
+
 /** Single-line flattening used for campaign cards and list snippets. */
 export function htmlToText(html: string): string {
   if (!html) return '';

package/src/ui/utils/image-load-queue.ts

@@ -0,0 +1,108 @@
+/**
+ * Lets images load a few at a time, highest priority first. The chat runs its
+ * large images through it: Android holds a whole download in a memory pool
+ * capped at three quarters of the app's heap (192 MB on a 256 MB phone), so
+ * several 30–50 MB photos at once overflow it and every one of them fails.
+ *
+ * No `react-native` import on purpose: it stays testable in plain Node.
+ */
+export class ImageLoadQueue {
+  // Key → priority, for both: an image paused off screen waits again at its own.
+  private readonly waiting = new Map<string, number>();
+  private readonly loading = new Map<string, number>();
+  private readonly done = new Set<string>();
+  /** The images on screen; null until the list says, so all of them count. */
+  private onScreen: ReadonlySet<string> | null = null;
+  private readonly listeners = new Set<() => void>();
+  private scheduled = false;
+
+  constructor(private readonly concurrency: number) {}
+
+  /** Queues a mounted image; the returned cleanup gives up its place. */
+  add(key: string, priority: number): () => void {
+    if (!this.done.has(key) && !this.loading.has(key)) {
+      this.waiting.set(key, Number.isFinite(priority) ? priority : 0);
+      this.schedule();
+    }
+    return () => this.remove(key);
+  }
+
+  /** Loaded or failed: it keeps showing, and the next image may start. */
+  finish(key: string): void {
+    this.waiting.delete(key);
+    this.done.add(key);
+    if (this.loading.delete(key)) this.advance();
+  }
+
+  canLoad = (key: string): boolean => this.done.has(key) || this.loading.has(key);
+
+  subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  /**
+   * The images now on screen. One that scrolls off before it has loaded
+   * gives up its place and waits, so it can't hold up the ones in view:
+   * Android detaches a row scrolled out of view, and a detached image never
+   * finishes loading. Only images on screen are started.
+   */
+  setOnScreen(keys: Iterable<string>): void {
+    this.onScreen = new Set(keys);
+    let paused = false;
+    this.loading.forEach((priority, key) => {
+      if (this.onScreen!.has(key)) return;
+      this.loading.delete(key);
+      this.waiting.set(key, priority);
+      paused = true;
+    });
+    if (!this.advance() && paused) this.notify();
+  }
+
+  /** Scrolled out of the list before it loaded: it queues again if it comes back. */
+  private remove(key: string): void {
+    this.waiting.delete(key);
+    if (this.loading.delete(key)) this.advance();
+  }
+
+  /**
+   * Hands out places once the render that mounted an image is done, so all
+   * the images mounted together are queued first, whatever order they
+   * mounted in.
+   */
+  private schedule(): void {
+    if (this.scheduled) return;
+    this.scheduled = true;
+    Promise.resolve().then(() => {
+      this.scheduled = false;
+      this.advance();
+    });
+  }
+
+  /** Starts what fits; true when anything started (listeners were told). */
+  private advance(): boolean {
+    let started = false;
+    while (this.loading.size < this.concurrency) {
+      let next: string | null = null;
+      let best = -Infinity;
+      this.waiting.forEach((priority, key) => {
+        if (priority > best && (!this.onScreen || this.onScreen.has(key))) {
+          best = priority;
+          next = key;
+        }
+      });
+      if (next === null) break;
+      this.waiting.delete(next);
+      this.loading.set(next, best);
+      started = true;
+    }
+    if (started) this.notify();
+    return started;
+  }
+
+  private notify(): void {
+    this.listeners.forEach((listener) => listener());
+  }
+}

package/src/ui/utils/inline-attachments.ts

@@ -0,0 +1,71 @@
+/**
+ * Agent replies with images between their paragraphs. Workstation marks such
+ * images `inline` among the message's attachments and keeps an `<img>` for
+ * each in the HTML body, where the teammate put it. Same split as the web
+ * Messenger, so both show the text and images in the order they were written.
+ */
+
+import type { WidgetAttachment } from '../../types';
+import { htmlToMarkdown } from './html';
+
+/** Markdown for the bubble to draw, or one attachment. */
+export type MessagePart = { text: string } | { attachment: WidgetAttachment };
+
+/**
+ * The body and its inline images in order, plus the other attachments
+ * (`files`) that show after them. Null when nothing is inline: the bubble then
+ * shows the body, followed by every attachment.
+ *
+ * An `<img>` finds its attachment by the id in its URL. In a body whose
+ * images carry no ids, they take the attachments in order instead; in one
+ * that does, an image without an id (a logo, an emoji) isn't one of the files
+ * and takes nothing. One whose id names no remaining attachment (the same file
+ * twice) takes nothing either. Inline attachments with no `<img>` go at the end.
+ */
+export function splitInlineAttachments(
+  body: string | null | undefined,
+  attachments: WidgetAttachment[] | null | undefined
+): { parts: MessagePart[]; files: WidgetAttachment[] } | null {
+  const inline = (attachments ?? []).filter(isInline);
+  if (!body || inline.length === 0) return null;
+
+  const remaining = [...inline];
+  const parts: MessagePart[] = [];
+  const pushText = (html: string) => {
+    const text = htmlToMarkdown(html);
+    if (text) parts.push({ text });
+  };
+  const image = /<img\b[^>]*?\bsrc=(["'])(.*?)\1[^>]*>/gi;
+  const images: Array<{ start: number; end: number; id: string | null }> = [];
+  for (let match = image.exec(body); match; match = image.exec(body)) {
+    images.push({ start: match.index, end: image.lastIndex, id: mediaId(match[2] ?? '') });
+  }
+  const byId = images.some((found) => found.id !== null);
+  let last = 0;
+  for (const { start, end, id } of images) {
+    // Left in the text, which drops it as it always has.
+    if (byId && !id) continue;
+    pushText(body.slice(last, start));
+    last = end;
+    const index = id ? remaining.findIndex((attachment) => attachment.id === id) : 0;
+    if (index < 0) continue;
+    const [attachment] = remaining.splice(index, 1);
+    if (attachment) parts.push({ attachment });
+  }
+  pushText(body.slice(last));
+  remaining.forEach((attachment) => parts.push({ attachment }));
+  return { parts, files: (attachments ?? []).filter((attachment) => !isInline(attachment)) };
+}
+
+/**
+ * Workstation's media URLs carry the attachment's id, as
+ * `/api/widget/media/<id>?…` (what replies carry) or `/api/media/<id>/download`.
+ */
+function mediaId(src: string): string | null {
+  return /\/api\/(?:widget\/)?media\/([^/?#"'&]+)/.exec(src)?.[1] ?? null;
+}
+
+/** Only Workstation's agent replies set `inline`, so it isn't on `WidgetAttachment`. */
+function isInline(attachment: WidgetAttachment): boolean {
+  return (attachment as { inline?: unknown }).inline === true;
+}