@repzo/widget-react-native 1.3.0 → 1.4.0

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;
+}