@repzo/widget-react-native 1.1.0 → 1.2.0

package/src/ui/components/Post.tsx

@@ -0,0 +1,943 @@
+/**
+ * A Send post over the host app — the mobile side of Send → Post.
+ *
+ * Sent as a badge or a snippet, it waits at the bottom of the screen (a pill
+ * or a card); tapping opens it in full. Sent as "full" it opens right away. A
+ * small post opens as a sheet over the app, a large one as a full screen.
+ * The full post has the body (paragraphs, lists, code, a button, social
+ * links), what the visitor already replied, and a reply box or reactions.
+ * Replies stay under the post and go to the inbox, where the team answers.
+ * A reaction answers it: the emoji pops, it says thanks, and goes.
+ *
+ * "Not now" — the ⌄ button, swiping the top down, tapping outside a sheet, or
+ * Android's back — minimizes it back to its pill (or snippet card), where it
+ * stays, on later launches too. × closes it for good (the next post loads).
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  AccessibilityInfo,
+  Animated,
+  Modal,
+  PanResponder,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+
+import { formatLabel } from '../../i18n';
+import { useKeyboardOverlap } from '../hooks/use-keyboard-overlap';
+import { useReduceMotion } from '../hooks/use-reduce-motion';
+import type { PostInteractionKind, PostReply, WidgetPost } from '../../types';
+import { contrastingTextColor, fontSize, palette, radius, shadows, spacing, withAlpha } from '../styles/theme';
+import { openExternalUrl } from '../utils/safe-url';
+import { parsePostHtml, type PostAlign, type PostBlock, type PostSocialNetwork, type PostTextRun } from '../utils/post-html';
+import { START_ALIGN } from '../utils/rtl';
+import { Avatar } from './Avatar';
+import { ArrowUpIcon, ChevronIcon, CloseIcon } from './icons';
+
+export interface PostLabels {
+  from: string;
+  newMessage: string;
+  openHint: string;
+  close: string;
+  /** The ⌄ button: back to its pill for later. */
+  minimize: string;
+  replyPlaceholder: string;
+  send: string;
+  sent: string;
+  replyFailed: string;
+  reactions: string;
+  /** Shown after a reaction, just before the post goes. */
+  thanks: string;
+  /** The conversation under the post (screen readers). */
+  conversation: string;
+  /** Opens the post's conversation in the messenger. */
+  continueChat: string;
+}
+
+type PostAction = Exclude<PostInteractionKind, 'view' | 'open' | 'minimize'>;
+
+interface PostOverlayProps {
+  post: WidgetPost;
+  expanded: boolean;
+  /** The Messenger's color: buttons, the visitor's replies, the send button. */
+  color: string;
+  insets: { top: number; bottom: number };
+  labels: PostLabels;
+  onShown: (campaignId: string) => void;
+  onExpand: (campaignId: string) => void;
+  /** "Not now": ⌄, a swipe down, tapping outside a sheet, Android back. */
+  onMinimize: (campaignId: string) => void;
+  /**
+   * Back to its pill or card for now, without telling the server: after a
+   * link (the app may open a screen of its own), or when iOS couldn't put the
+   * post on screen (another modal was up).
+   */
+  onCollapse: (campaignId: string) => void;
+  /** "Continue in Messenger" under the post's conversation. */
+  onOpenConversation: (campaignId: string, conversationId: string) => void;
+  /** Resolves with the saved reply for "reply"; rejects when it wasn't saved. */
+  onInteract: (campaignId: string, kind: PostAction, value?: string) => Promise<PostReply | undefined>;
+}
+
+export function PostOverlay(props: PostOverlayProps) {
+  const { post, expanded, onShown } = props;
+  // Reported once per post per session (the store dedupes).
+  useEffect(() => {
+    onShown(post.id);
+  }, [onShown, post.id]);
+  if (expanded) return <PostFull {...props} />;
+  // A snippet waits as its card; a badge — or a full post put away for later — as the pill.
+  return post.sentAs === 'snippet' ? <PostCard {...props} /> : <PostBadge {...props} />;
+}
+
+function senderLine(post: WidgetPost, labels: PostLabels) {
+  if (post.sender && post.workspaceName) {
+    return formatLabel(labels.from, { name: post.sender.name, workspace: post.workspaceName });
+  }
+  return post.sender?.name || post.workspaceName || labels.newMessage;
+}
+
+/**
+ * Slides a card in from below and tells screen-reader users it arrived — the
+ * way the in-app notification card does. Holds still under Reduce Motion.
+ */
+function useArrival(accessibilityLabel: string) {
+  const reduceMotion = useReduceMotion();
+  // Read as "hold still" until the setting is known (see useReduceMotion).
+  const animate = reduceMotion === false;
+  const entry = useRef(new Animated.Value(animate ? 0 : 1)).current;
+
+  // Runs per mount: a new post, or the card coming back after the messenger.
+  useEffect(() => {
+    if (animate) {
+      Animated.spring(entry, { toValue: 1, useNativeDriver: true, speed: 16, bounciness: 4 }).start();
+    }
+    AccessibilityInfo.announceForAccessibility(accessibilityLabel);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return {
+    opacity: entry,
+    transform: [{ translateY: entry.interpolate({ inputRange: [0, 1], outputRange: [spacing.lg, 0] }) }],
+  };
+}
+
+function CloseButton({ label, onPress, color = palette.textMuted }: { label: string; onPress: () => void; color?: string }) {
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      hitSlop={10}
+      style={({ pressed }) => [styles.close, pressed && styles.pressed]}>
+      <CloseIcon size={14} color={color} />
+    </Pressable>
+  );
+}
+
+function MinimizeButton({ label, onPress }: { label: string; onPress: () => void }) {
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      hitSlop={10}
+      style={({ pressed }) => [styles.close, pressed && styles.pressed]}>
+      <ChevronIcon size={16} direction="down" color={palette.textMuted} />
+    </Pressable>
+  );
+}
+
+/** How far the top must be dragged down to minimize — or a quick flick. */
+const MINIMIZE_DISTANCE = 120;
+const MINIMIZE_VELOCITY = 0.8;
+
+/**
+ * Dragging the post's top edge down minimizes it, the way a sheet slides away.
+ * Pure JS (PanResponder), like the in-app notification's swipe.
+ */
+function useSwipeToMinimize(onMinimize: () => void) {
+  const { height } = useWindowDimensions();
+  const reduceMotion = useReduceMotion();
+  const drag = useRef(new Animated.Value(0)).current;
+  // Read through a ref: the provider re-renders on every store change, and a
+  // PanResponder rebuilt mid-drag would restart the gesture.
+  const minimizeRef = useRef(onMinimize);
+  minimizeRef.current = onMinimize;
+  const handlers = useMemo(() => {
+    const settle = () => Animated.spring(drag, { toValue: 0, useNativeDriver: true, bounciness: 4 }).start();
+    return PanResponder.create({
+      onMoveShouldSetPanResponder: (_, gesture) => gesture.dy > 6 && gesture.dy > Math.abs(gesture.dx) * 1.5,
+      onPanResponderMove: (_, gesture) => drag.setValue(Math.max(0, gesture.dy)),
+      onPanResponderRelease: (_, gesture) => {
+        if (gesture.dy < MINIMIZE_DISTANCE && gesture.vy < MINIMIZE_VELOCITY) {
+          settle();
+          return;
+        }
+        Animated.timing(drag, { toValue: height, duration: reduceMotion === false ? 200 : 0, useNativeDriver: true }).start(() =>
+          minimizeRef.current()
+        );
+      },
+      onPanResponderTerminate: settle,
+    });
+  }, [drag, height, reduceMotion]);
+  return {
+    panHandlers: handlers.panHandlers,
+    // Never above where it started.
+    translateY: drag.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolateLeft: 'clamp' }),
+    // The dimmed backdrop lightens as the sheet goes.
+    backdropOpacity: drag.interpolate({ inputRange: [0, 400], outputRange: [1, 0], extrapolate: 'clamp' }),
+  };
+}
+
+/** Snippet: a card at the bottom with who it's from and the first words. */
+function PostCard({ post, color, insets, labels, onExpand, onInteract }: PostOverlayProps) {
+  const accessibilityLabel = [senderLine(post, labels), post.snippet].filter(Boolean).join(': ');
+  const arrival = useArrival(accessibilityLabel);
+  return (
+    <View pointerEvents="box-none" style={[styles.bottomWrap, { bottom: insets.bottom + spacing.md }]}>
+      <Animated.View style={[styles.card, arrival]}>
+        <Pressable
+          onPress={() => onExpand(post.id)}
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
+          accessibilityHint={labels.openHint}
+          style={({ pressed }) => [styles.cardBody, pressed && styles.pressed]}>
+          <View style={styles.cardHead}>
+            <Avatar avatar={post.sender?.avatarUrl} name={post.sender?.name ?? post.workspaceName} color={color} size={28} />
+            <Text numberOfLines={1} style={styles.senderText}>
+              {senderLine(post, labels)}
+            </Text>
+          </View>
+          <Text numberOfLines={3} style={styles.snippet}>
+            {post.snippet || labels.newMessage}
+          </Text>
+        </Pressable>
+        <View style={styles.cardClose}>
+          <CloseButton label={labels.close} onPress={() => void onInteract(post.id, 'dismiss')} />
+        </View>
+      </Animated.View>
+    </View>
+  );
+}
+
+/** Badge: a small pill — the sender and a dot — that opens the post. */
+function PostBadge({ post, color, insets, labels, onExpand, onInteract }: PostOverlayProps) {
+  const accessibilityLabel = [post.sender?.name || labels.newMessage, post.snippet].filter(Boolean).join(': ');
+  const arrival = useArrival(accessibilityLabel);
+  return (
+    <Animated.View pointerEvents="box-none" style={[styles.badgeWrap, { bottom: insets.bottom + spacing.md }, arrival]}>
+      <Pressable
+        onPress={() => onExpand(post.id)}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={labels.openHint}
+        style={({ pressed }) => [styles.pill, pressed && styles.pressed]}>
+        <Avatar avatar={post.sender?.avatarUrl} name={post.sender?.name ?? post.workspaceName} color={color} size={28} />
+        <Text numberOfLines={1} style={styles.pillText}>
+          {post.sender?.name ?? labels.newMessage}
+        </Text>
+        <View style={styles.dot} />
+      </Pressable>
+      <View style={styles.pillClose}>
+        <CloseButton label={labels.close} onPress={() => void onInteract(post.id, 'dismiss')} />
+      </View>
+    </Animated.View>
+  );
+}
+
+/** The post in full: a sheet (small) or a full screen (large). */
+/** How long iOS gets to present the post before it's treated as blocked (another modal was up). */
+const PRESENT_TIMEOUT_MS = 2500;
+
+function PostFull({ post, color, insets, labels, onMinimize, onCollapse, onOpenConversation, onInteract }: PostOverlayProps) {
+  const large = post.format === 'large';
+  // KeyboardAvoidingView misplaces the composer inside a modal (see the hook);
+  // this is the same lift the messenger's panel uses.
+  const keyboard = useKeyboardOverlap(true, insets.bottom);
+  const dismiss = () => void onInteract(post.id, 'dismiss');
+  const minimize = () => onMinimize(post.id);
+  const swipe = useSwipeToMinimize(minimize);
+  const click = (href: string) => {
+    void onInteract(post.id, 'click', href);
+    void openExternalUrl(href);
+    // A link the app routes in-app would otherwise open behind the post.
+    onCollapse(post.id);
+  };
+
+  // iOS presents one modal at a time: if the app had its own up (a Modal, an
+  // alert, a modal screen), this one never shows and onShow never fires. Fall
+  // back to the pill instead of leaving an invisible post.
+  const shown = useRef(false);
+  const collapseRef = useRef(onCollapse);
+  collapseRef.current = onCollapse;
+  useEffect(() => {
+    if (Platform.OS !== 'ios') return undefined;
+    const timer = setTimeout(() => {
+      if (!shown.current) collapseRef.current(post.id);
+    }, PRESENT_TIMEOUT_MS);
+    return () => clearTimeout(timer);
+  }, [post.id]);
+
+  const content = (
+    <>
+      {/* The top edge is the drag handle: pull it down to minimize. */}
+      <View {...swipe.panHandlers}>
+        <View style={styles.grabber} />
+        <View style={styles.fullHead}>
+          <Avatar avatar={post.sender?.avatarUrl} name={post.sender?.name ?? post.workspaceName} color={color} size={32} />
+          <Text numberOfLines={1} style={[styles.senderText, styles.fullSender]}>
+            {senderLine(post, labels)}
+          </Text>
+          <MinimizeButton label={labels.minimize} onPress={minimize} />
+          <CloseButton label={labels.close} onPress={dismiss} />
+        </View>
+      </View>
+      {/* Full screen: the body takes the room, so the reply box or reactions sit at the bottom. */}
+      <ScrollView
+        style={large ? styles.flex : styles.fullScroll}
+        contentContainerStyle={styles.fullBody}
+        keyboardShouldPersistTaps="handled">
+        <PostBody html={post.bodyHtml} color={color} onLink={click} />
+        {post.thread.length > 0 ? (
+          <View style={styles.replies} accessibilityLabel={labels.conversation}>
+            {post.thread.map((message, index) => {
+              const team = message.from === 'team';
+              const previous = post.thread[index - 1];
+              // The teammate's name over the first of their answers in a row.
+              const showName =
+                team && !!message.senderName && !(previous?.from === 'team' && previous.senderName === message.senderName);
+              return (
+                <View key={`${message.at}-${index}`} style={team ? styles.answerWrap : styles.replyWrap}>
+                  {showName ? <Text style={styles.replyMeta}>{message.senderName}</Text> : null}
+                  <View style={team ? styles.answer : [styles.reply, { backgroundColor: color }]}>
+                    <Text style={[styles.replyText, { color: team ? palette.text : contrastingTextColor(color) }]}>
+                      {message.text}
+                    </Text>
+                  </View>
+                  {team ? null : <Text style={styles.replyMeta}>{labels.sent}</Text>}
+                </View>
+              );
+            })}
+            {post.conversationId ? (
+              <Pressable
+                onPress={() => onOpenConversation(post.id, post.conversationId as string)}
+                accessibilityRole="button"
+                accessibilityLabel={labels.continueChat}
+                hitSlop={8}
+                style={({ pressed }) => [styles.continue, pressed && styles.pressed]}>
+                <Text style={[styles.continueText, { color: contrastingTextColor(color) === palette.ink ? palette.text : color }]}>
+                  {labels.continueChat}
+                </Text>
+              </Pressable>
+            ) : null}
+          </View>
+        ) : null}
+      </ScrollView>
+      <PostFooter post={post} color={color} labels={labels} onInteract={onInteract} />
+    </>
+  );
+
+  return (
+    <Modal
+      visible
+      // Transparent either way, so swiping a large post down shows the app under it.
+      transparent
+      animationType={large ? 'slide' : 'fade'}
+      presentationStyle="overFullScreen"
+      statusBarTranslucent
+      onShow={() => {
+        shown.current = true;
+      }}
+      // Back is "not now", not ×.
+      onRequestClose={minimize}>
+      {/* The keyboard padding sits inside the safe-area padding, so the two add up to the keyboard's height. */}
+      {large ? (
+        <Animated.View
+          accessibilityViewIsModal
+          // VoiceOver's two-finger scrub: "not now".
+          onAccessibilityEscape={minimize}
+          style={[
+            styles.flex,
+            styles.page,
+            { paddingTop: insets.top, paddingBottom: insets.bottom, transform: [{ translateY: swipe.translateY }] },
+          ]}>
+          <View onLayout={keyboard.onLayout} style={[styles.flex, { paddingBottom: keyboard.overlap }]}>
+            {content}
+          </View>
+        </Animated.View>
+      ) : (
+        <View style={styles.flex}>
+          <Animated.View style={[StyleSheet.absoluteFill, styles.backdropTint, { opacity: swipe.backdropOpacity }]} />
+          <View style={[styles.backdrop, { paddingTop: insets.top + spacing.xl, paddingBottom: insets.bottom + spacing.md }]}>
+            {/* Tapping outside the sheet is "not now", as on the website's large post. */}
+            <Pressable
+              style={StyleSheet.absoluteFill}
+              onPress={minimize}
+              accessibilityRole="button"
+              accessibilityLabel={labels.minimize}
+            />
+            <View onLayout={keyboard.onLayout} pointerEvents="box-none" style={[styles.sheetArea, { paddingBottom: keyboard.overlap }]}>
+              <Animated.View
+                accessibilityViewIsModal
+                onAccessibilityEscape={minimize}
+                style={[styles.sheet, { transform: [{ translateY: swipe.translateY }] }]}>
+                {content}
+              </Animated.View>
+            </View>
+          </View>
+        </View>
+      )}
+    </Modal>
+  );
+}
+
+function PostFooter({
+  post,
+  color,
+  labels,
+  onInteract,
+}: Pick<PostOverlayProps, 'post' | 'color' | 'labels' | 'onInteract'>) {
+  const [text, setText] = useState('');
+  const [sending, setSending] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const [focused, setFocused] = useState(false);
+
+  if (post.replyType === 'reaction' && post.reactions.length > 0) {
+    return <PostReactions post={post} color={color} labels={labels} onInteract={onInteract} />;
+  }
+  if (post.replyType !== 'text') return null;
+
+  const value = text.trim();
+  const canSend = !!value && !sending;
+  const send = async () => {
+    if (!canSend) return;
+    setSending(true);
+    setFailed(false);
+    try {
+      await onInteract(post.id, 'reply', value);
+      setText('');
+    } catch {
+      setFailed(true);
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <View style={styles.footer}>
+      {/* Same composer as the messenger's: Return adds a line, the arrow sends. */}
+      <View style={[styles.composer, focused && styles.composerFocused]}>
+        <TextInput
+          value={text}
+          onChangeText={setText}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          placeholder={labels.replyPlaceholder}
+          placeholderTextColor={palette.textSubtle}
+          accessibilityLabel={labels.replyPlaceholder}
+          maxLength={2000}
+          multiline
+          editable={!sending}
+          style={styles.input}
+        />
+        <Pressable
+          onPress={send}
+          disabled={!canSend}
+          accessibilityRole="button"
+          accessibilityLabel={labels.send}
+          accessibilityState={{ disabled: !canSend }}
+          // 36pt circle + 4pt on every side = a 44pt target.
+          hitSlop={4}
+          style={({ pressed }) => [
+            styles.send,
+            canSend ? { backgroundColor: color } : styles.sendDisabled,
+            pressed && canSend && styles.pressed,
+          ]}>
+          <ArrowUpIcon size={18} color={canSend ? contrastingTextColor(color) : palette.textSubtle} />
+        </Pressable>
+      </View>
+      {failed ? (
+        <Text accessibilityRole="alert" style={styles.error}>
+          {labels.replyFailed}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+/**
+ * The reaction row. A tap pops the emoji and throws a few copies of it (the
+ * shared reaction burst), then thanks them; the store takes the post away a
+ * moment later. Another tap in that moment changes their pick.
+ */
+function PostReactions({
+  post,
+  color,
+  labels,
+  onInteract,
+}: Pick<PostOverlayProps, 'post' | 'color' | 'labels' | 'onInteract'>) {
+  const [thanked, setThanked] = useState(false);
+  const react = (emoji: string) => {
+    if (!thanked) {
+      setThanked(true);
+      AccessibilityInfo.announceForAccessibility(labels.thanks);
+    }
+    void onInteract(post.id, 'reaction', emoji);
+  };
+  return (
+    <View style={styles.footer}>
+      <View style={styles.reactions} accessibilityRole="radiogroup" accessibilityLabel={labels.reactions}>
+        {post.reactions.map((emoji) => (
+          <ReactionChip
+            key={emoji}
+            emoji={emoji}
+            color={color}
+            picked={post.reacted === emoji}
+            dimmed={!!post.reacted && post.reacted !== emoji}
+            onPress={() => react(emoji)}
+          />
+        ))}
+      </View>
+      {thanked && post.reacted ? (
+        <Text accessibilityLiveRegion="polite" style={styles.thanks}>
+          {labels.thanks}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+/** Where the burst's copies fly: a fan above the chip. */
+const SPARKS = [-70, -40, -12, 12, 40, 70].map((degrees, index) => {
+  const angle = ((degrees - 90) * Math.PI) / 180;
+  const distance = index % 2 ? 54 : 44;
+  return { x: Math.cos(angle) * distance, y: Math.sin(angle) * distance };
+});
+
+function ReactionChip({
+  emoji,
+  color,
+  picked,
+  dimmed,
+  onPress,
+}: {
+  emoji: string;
+  color: string;
+  picked: boolean;
+  dimmed: boolean;
+  onPress: () => void;
+}) {
+  const reduceMotion = useReduceMotion();
+  const scale = useRef(new Animated.Value(1)).current;
+  const spark = useRef(new Animated.Value(0)).current;
+  const [bursting, setBursting] = useState(false);
+
+  const press = () => {
+    onPress();
+    if (reduceMotion !== false) return;
+    scale.setValue(1);
+    Animated.sequence([
+      Animated.timing(scale, { toValue: 1.35, duration: 120, useNativeDriver: true }),
+      Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 14, bounciness: 12 }),
+    ]).start();
+    spark.setValue(0);
+    setBursting(true);
+    Animated.timing(spark, { toValue: 1, duration: 650, useNativeDriver: true }).start(({ finished }) => {
+      if (finished) setBursting(false);
+    });
+  };
+
+  return (
+    <Pressable
+      onPress={press}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: picked }}
+      accessibilityLabel={emoji}
+      style={({ pressed }) => [
+        styles.reaction,
+        picked && { borderColor: color, backgroundColor: withAlpha(color, 0.12) },
+        dimmed ? styles.reactionDim : null,
+        pressed && styles.pressed,
+      ]}>
+      <Animated.Text style={[styles.reactionEmoji, { transform: [{ scale }] }]}>{emoji}</Animated.Text>
+      {bursting
+        ? SPARKS.map((to, index) => (
+            <Animated.Text
+              key={index}
+              pointerEvents="none"
+              importantForAccessibility="no-hide-descendants"
+              accessibilityElementsHidden
+              style={[
+                styles.spark,
+                {
+                  opacity: spark.interpolate({ inputRange: [0, 0.6, 1], outputRange: [1, 0.9, 0] }),
+                  transform: [
+                    { translateX: spark.interpolate({ inputRange: [0, 1], outputRange: [0, to.x] }) },
+                    { translateY: spark.interpolate({ inputRange: [0, 1], outputRange: [0, to.y] }) },
+                    { scale: spark.interpolate({ inputRange: [0, 1], outputRange: [0.6, 1.1] }) },
+                  ],
+                },
+              ]}>
+              {emoji}
+            </Animated.Text>
+          ))
+        : null}
+    </Pressable>
+  );
+}
+
+// ─── Body ──────────────────────────────────────────────────────────────────
+
+const ALIGN_ITEMS: Record<PostAlign, 'flex-start' | 'center' | 'flex-end'> = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end',
+};
+
+/** Brand marks drawn as a colored circle and letters — the SDK ships no SVG renderer. */
+const SOCIAL: Record<PostSocialNetwork, { label: string; glyph: string; color: string }> = {
+  facebook: { label: 'Facebook', glyph: 'f', color: '#1877F2' },
+  // A plain X: the math-letter 𝕏 is missing from some Android fonts.
+  x: { label: 'X', glyph: 'X', color: '#000000' },
+  linkedin: { label: 'LinkedIn', glyph: 'in', color: '#0A66C2' },
+  instagram: { label: 'Instagram', glyph: 'IG', color: '#E4405F' },
+  youtube: { label: 'YouTube', glyph: '▶', color: '#FF0000' },
+};
+
+function Runs({ runs, color, onLink }: { runs: PostTextRun[]; color: string; onLink: (href: string) => void }) {
+  return (
+    <>
+      {runs.map((run, index) => (
+        <Text
+          key={index}
+          onPress={run.href ? () => onLink(run.href as string) : undefined}
+          accessibilityRole={run.href ? 'link' : undefined}
+          style={[
+            run.bold && styles.bold,
+            run.italic && styles.italic,
+            run.code && styles.inlineCode,
+            run.href ? [styles.link, { color: contrastingTextColor(color) === palette.ink ? palette.text : color }] : null,
+          ]}>
+          {run.text}
+        </Text>
+      ))}
+    </>
+  );
+}
+
+/** "1." / "•" per item, numbering each nested list on its own. */
+function listMarkers(levels: Array<{ depth: number; ordered: boolean }>): string[] {
+  const counts: number[] = [];
+  return levels.map(({ depth, ordered }) => {
+    counts.length = depth + 1;
+    counts[depth] = (counts[depth] ?? 0) + 1;
+    if (ordered) return `${counts[depth]}.`;
+    return depth === 0 ? '•' : '◦';
+  });
+}
+
+export function PostBody({ html, color, onLink }: { html: string; color: string; onLink: (href: string) => void }) {
+  // The provider re-renders on every store change (typing, new messages).
+  const blocks: PostBlock[] = useMemo(() => parsePostHtml(html), [html]);
+  return (
+    <View style={styles.body}>
+      {blocks.map((block, index) => {
+        if (block.type === 'paragraph') {
+          return (
+            <Text key={index} style={styles.paragraph}>
+              <Runs runs={block.runs} color={color} onLink={onLink} />
+            </Text>
+          );
+        }
+        if (block.type === 'list') {
+          const markers = listMarkers(block.levels);
+          return (
+            <View key={index} style={styles.list}>
+              {block.items.map((item, itemIndex) => (
+                <View
+                  key={itemIndex}
+                  style={[styles.listItem, { paddingStart: (block.levels[itemIndex]?.depth ?? 0) * spacing.lg }]}>
+                  <Text style={styles.marker}>{markers[itemIndex]}</Text>
+                  <Text style={[styles.paragraph, styles.listText]}>
+                    <Runs runs={item} color={color} onLink={onLink} />
+                  </Text>
+                </View>
+              ))}
+            </View>
+          );
+        }
+        if (block.type === 'code') {
+          return (
+            <View key={index} style={styles.codeBlock}>
+              <Text style={styles.codeText}>{block.text}</Text>
+            </View>
+          );
+        }
+        if (block.type === 'button') {
+          return (
+            <View key={index} style={{ alignItems: ALIGN_ITEMS[block.align] }}>
+              <Pressable
+                onPress={() => onLink(block.href)}
+                accessibilityRole="link"
+                style={({ pressed }) => [styles.button, { backgroundColor: color }, pressed && styles.pressed]}>
+                <Text style={[styles.buttonText, { color: contrastingTextColor(color) }]}>{block.label}</Text>
+              </Pressable>
+            </View>
+          );
+        }
+        return (
+          <View key={index} style={[styles.social, { justifyContent: ALIGN_ITEMS[block.align] }]}>
+            {block.links.map((link) => {
+              const mark = SOCIAL[link.network];
+              return (
+                <Pressable
+                  key={`${link.network}-${link.href}`}
+                  onPress={() => onLink(link.href)}
+                  accessibilityRole="link"
+                  accessibilityLabel={mark.label}
+                  hitSlop={6}
+                  style={({ pressed }) => [styles.socialMark, { backgroundColor: mark.color }, pressed && styles.pressed]}>
+                  <Text style={styles.socialGlyph}>{mark.glyph}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+const CLOSE_SIZE = 32;
+const LINE_HEIGHT = 1.45;
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  pressed: { opacity: 0.85 },
+  close: {
+    width: CLOSE_SIZE,
+    height: CLOSE_SIZE,
+    borderRadius: radius.sm,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  bottomWrap: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    paddingHorizontal: spacing.lg,
+    alignItems: 'center',
+    zIndex: 1000,
+    elevation: 1000,
+  },
+  card: {
+    width: '100%',
+    maxWidth: 480,
+    borderRadius: radius.xl,
+    backgroundColor: palette.white,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.border,
+    ...shadows.floating,
+  },
+  cardBody: {
+    paddingVertical: spacing.md,
+    paddingStart: spacing.lg,
+    // Room for the × in the corner.
+    paddingEnd: CLOSE_SIZE + spacing.lg,
+    gap: spacing.sm,
+    borderRadius: radius.xl,
+  },
+  cardHead: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
+  cardClose: { position: 'absolute', top: spacing.sm, end: spacing.sm },
+  senderText: {
+    flexShrink: 1,
+    color: palette.textMuted,
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+    textAlign: START_ALIGN,
+  },
+  snippet: { color: palette.text, fontSize: fontSize.body, lineHeight: fontSize.body * LINE_HEIGHT, textAlign: START_ALIGN },
+  badgeWrap: {
+    position: 'absolute',
+    end: spacing.lg,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    zIndex: 1000,
+    elevation: 1000,
+  },
+  pill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    minHeight: 44,
+    paddingVertical: spacing.xs,
+    paddingStart: spacing.xs,
+    paddingEnd: spacing.md,
+    borderRadius: radius.pill,
+    backgroundColor: palette.white,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.border,
+    ...shadows.floating,
+  },
+  pillText: { maxWidth: 180, color: palette.text, fontSize: fontSize.meta, fontWeight: '600' },
+  dot: { width: 8, height: 8, borderRadius: 4, backgroundColor: palette.danger },
+  pillClose: {
+    borderRadius: radius.pill,
+    backgroundColor: palette.white,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.border,
+    ...shadows.card,
+  },
+  backdrop: { flex: 1, paddingHorizontal: spacing.md },
+  backdropTint: { backgroundColor: 'rgba(15, 23, 42, 0.45)' },
+  sheetArea: { flex: 1, justifyContent: 'flex-end' },
+  sheet: {
+    maxHeight: '100%',
+    borderRadius: radius.xl,
+    backgroundColor: palette.white,
+    overflow: 'hidden',
+    ...shadows.floating,
+  },
+  page: { backgroundColor: palette.white },
+  grabber: {
+    alignSelf: 'center',
+    width: 36,
+    height: 5,
+    borderRadius: 3,
+    marginTop: spacing.sm,
+    backgroundColor: palette.border,
+  },
+  fullHead: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingStart: spacing.lg,
+    paddingEnd: spacing.sm,
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.md,
+  },
+  fullSender: { flex: 1 },
+  fullScroll: { flexGrow: 0, flexShrink: 1 },
+  fullBody: { paddingHorizontal: spacing.lg, paddingBottom: spacing.lg, gap: spacing.lg },
+  body: { gap: spacing.md },
+  paragraph: { color: palette.text, fontSize: fontSize.body, lineHeight: fontSize.body * LINE_HEIGHT, textAlign: START_ALIGN },
+  bold: { fontWeight: '700' },
+  italic: { fontStyle: 'italic' },
+  inlineCode: {
+    fontFamily: Platform.select({ ios: 'Menlo', default: 'monospace' }),
+    fontSize: fontSize.meta,
+    backgroundColor: palette.surfaceAlt,
+  },
+  link: { textDecorationLine: 'underline', fontWeight: '600' },
+  list: { gap: spacing.xs },
+  listItem: { flexDirection: 'row', gap: spacing.sm },
+  marker: { minWidth: spacing.lg, color: palette.textMuted, fontSize: fontSize.body, lineHeight: fontSize.body * LINE_HEIGHT },
+  listText: { flex: 1 },
+  codeBlock: { borderRadius: radius.md, backgroundColor: palette.surfaceAlt, padding: spacing.md },
+  codeText: {
+    color: palette.text,
+    fontFamily: Platform.select({ ios: 'Menlo', default: 'monospace' }),
+    fontSize: fontSize.meta,
+    lineHeight: fontSize.meta * LINE_HEIGHT,
+  },
+  button: {
+    minHeight: 44,
+    paddingHorizontal: spacing.lg,
+    borderRadius: radius.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonText: { fontSize: fontSize.body, fontWeight: '700' },
+  social: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing.sm },
+  socialMark: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center' },
+  socialGlyph: { color: palette.white, fontSize: fontSize.meta, fontWeight: '800' },
+  replies: { gap: spacing.sm },
+  replyWrap: { alignItems: 'flex-end', gap: spacing.xs / 2 },
+  answerWrap: { alignItems: 'flex-start', gap: spacing.xs / 2 },
+  answer: {
+    maxWidth: '85%',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.xl,
+    borderBottomStartRadius: spacing.xs,
+    backgroundColor: palette.surfaceAlt,
+  },
+  continue: { alignSelf: 'center', paddingVertical: spacing.xs, paddingHorizontal: spacing.sm, marginTop: spacing.xs },
+  continueText: { fontSize: fontSize.meta, fontWeight: '600' },
+  reply: {
+    maxWidth: '85%',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.xl,
+    borderBottomEndRadius: spacing.xs,
+  },
+  replyText: { fontSize: fontSize.body, lineHeight: fontSize.body * LINE_HEIGHT },
+  replyMeta: { color: palette.textSubtle, fontSize: fontSize.caption },
+  footer: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: palette.border,
+    backgroundColor: palette.white,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    gap: spacing.xs,
+  },
+  // Matches the messenger's composer (ChatView.styles.ts).
+  composer: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: spacing.sm,
+    minHeight: 48,
+    backgroundColor: palette.surfaceAlt,
+    borderRadius: 24,
+    borderWidth: 1,
+    borderColor: palette.border,
+    paddingStart: spacing.lg,
+    paddingEnd: spacing.xs + 2,
+    paddingVertical: spacing.xs + 2,
+  },
+  composerFocused: { backgroundColor: palette.white },
+  input: {
+    flex: 1,
+    maxHeight: 120,
+    padding: 0,
+    paddingTop: 6,
+    paddingBottom: 6,
+    color: palette.ink,
+    fontSize: fontSize.input,
+    lineHeight: fontSize.input * 1.4,
+    textAlign: START_ALIGN,
+  },
+  send: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center' },
+  sendDisabled: { backgroundColor: palette.surfaceAlt },
+  error: { color: palette.danger, fontSize: fontSize.caption },
+  reactions: { flexDirection: 'row', justifyContent: 'center', gap: spacing.sm, paddingVertical: spacing.xs },
+  reaction: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    borderWidth: 1,
+    borderColor: palette.border,
+    backgroundColor: palette.white,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  reactionDim: { opacity: 0.5 },
+  reactionEmoji: { fontSize: 24 },
+  spark: { position: 'absolute', fontSize: 16 },
+  thanks: {
+    textAlign: 'center',
+    color: palette.text,
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+    paddingBottom: spacing.xs,
+  },
+});