@oxy.so/bloom 2.10.0 → 2.11.0

package/lib/module/message-bubble/MessageBubble.js

@@ -0,0 +1,372 @@
+"use strict";
+
+import React, { memo, useEffect, useMemo, useRef } from 'react';
+import { Pressable, View } from 'react-native';
+import Animated, { useAnimatedStyle, useReducedMotion, useSharedValue, withSequence, withTiming } from 'react-native-reanimated';
+import { mixColor } from "../button/shared.js";
+import { MESSAGE_STATUS_LABELS } from "../chat-indicators/index.js";
+import { webDataSet } from "../styles/web-data.js";
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { BubbleTail, ForwardedLine, MessageText, MetaRow, ReactionRow, ReplyQuote, RetryButton } from "./parts.js";
+import { BUBBLE_PADDING_X, BUBBLE_PADDING_Y, BUBBLE_RADIUS, DEFAULT_MAX_WIDTH, DOUBLE_PRESS_MS, IS_WEB, MESSAGE_BUBBLE_CSS, MESSAGE_BUBBLE_STYLE_ID, bubbleAccessibleName, bubbleRadii, hasTail, resolveLabels, resolveMessageBubblePaint, senderNameColor, sidePaint } from "./shared.js";
+import { SwipeToReply } from "./SwipeToReply.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * One message in a transcript.
+ *
+ *   outgoing   the theme accent fill; the on-colour is picked by CONTRAST, not
+ *              assumed — `primaryForeground`, white or near-black, whichever
+ *              clears AA over the accent this preset resolved to
+ *   incoming   a neutral surface (the card in light mode, neutral-800 in dark)
+ *              with a hairline in light mode, where a card on a near-white page
+ *              has no edge of its own
+ *
+ * Radius 18 everywhere, except the ONE corner a run cuts: `position` is
+ * `'single' | 'first' | 'middle' | 'last'` and only the last bubble of a run
+ * gets the 4px corner, on its own side. That is what makes a run read as one
+ * block with a single spout. `tail` draws the notch on that corner; it is off
+ * by default and drawn OUTSIDE the bubble box, so turning it on re-lays out
+ * nothing.
+ *
+ * THE META ROW TUCKS. Time, "edited", views and the delivery ticks sit at the
+ * bottom-right INSIDE the bubble, on the same line as the last words when they
+ * fit and on a line of their own when they do not — a wrapping flex row with an
+ * `auto` left margin, which is the one spelling of that behaviour both Yoga and
+ * the browser agree on. Over media with no text it becomes a translucent pill
+ * (`metaOverlay`).
+ *
+ * States: `pending` dims, `failed` washes the fill towards the error colour and
+ * offers `onRetry`, `selected` bands the whole ROW (not the bubble — selection
+ * is a property of the message, and the band has to reach the avatar gutter),
+ * `highlighted` flashes that same band once after a jump, `deleted` replaces
+ * everything with one italic line and no meta.
+ *
+ * Accessibility: the bubble is ONE node with a composed name — sender, text,
+ * time, and then what a sighted reader gets from colour and a tick glyph
+ * ("Read", "Not sent", "Selected"). The ticks inside it are hidden
+ * (`label=""`), because announcing the delivery state twice per message is the
+ * cost of announcing it in words at all. With `selected` defined the bubble is
+ * a TOGGLE and carries both spellings — `aria-pressed` for web,
+ * `accessibilityState.selected` for native.
+ *
+ * Rich media is `media`, a slot: this family owns the shell, the text and the
+ * metadata and never the image decoder.
+ */
+
+/** How long the jump flash stays up before it fades. */
+const FLASH_HOLD_MS = 700;
+const FLASH_FADE_MS = 500;
+function MessageBubbleComponent({
+  direction,
+  position = 'single',
+  text,
+  children,
+  media,
+  metaOverlay,
+  tail = false,
+  senderName,
+  senderColorSeed,
+  senderColor,
+  renderEntity,
+  replyTo,
+  onPressReply,
+  forwardedFrom,
+  editedLabel,
+  time,
+  status,
+  channelViews,
+  authorSignature,
+  reactions,
+  onToggleReaction,
+  onAddReaction,
+  pending = false,
+  failed = false,
+  onRetry,
+  selected,
+  highlighted = false,
+  deleted = false,
+  onPress,
+  onLongPress,
+  onContextMenu,
+  onDoublePress,
+  onSwipeReply,
+  maxWidth = DEFAULT_MAX_WIDTH,
+  labels,
+  accessibilityLabel,
+  style,
+  bubbleStyle,
+  textStyle,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMessageBubblePaint(theme), [theme]);
+  const side = sidePaint(paint, direction);
+  const text_ = resolveLabels(labels);
+  const outgoing = direction === 'outgoing';
+  if (IS_WEB) adoptStyleSheet(MESSAGE_BUBBLE_STYLE_ID, MESSAGE_BUBBLE_CSS);
+
+  // The jump flash: one band, up fast and down slow, and nothing at all under
+  // reduced motion — where the band still appears, it just does not animate.
+  const flash = useSharedValue(0);
+  const reducedMotion = useReducedMotion();
+  useEffect(() => {
+    if (!highlighted) {
+      flash.value = 0;
+      return;
+    }
+    if (reducedMotion) {
+      flash.value = 1;
+      return;
+    }
+    flash.value = withSequence(withTiming(1, {
+      duration: 140
+    }), withTiming(1, {
+      duration: FLASH_HOLD_MS
+    }), withTiming(0, {
+      duration: FLASH_FADE_MS
+    }));
+  }, [highlighted, reducedMotion, flash]);
+  const flashStyle = useAnimatedStyle(() => ({
+    opacity: flash.value
+  }), [flash]);
+  const lastPress = useRef(0);
+  const handlePress = () => {
+    if (onDoublePress !== undefined) {
+      const now = Date.now();
+      const isDouble = now - lastPress.current < DOUBLE_PRESS_MS;
+      lastPress.current = isDouble ? 0 : now;
+      if (isDouble) {
+        onDoublePress();
+        return;
+      }
+    }
+    onPress?.();
+  };
+  const interactive = onPress !== undefined || onLongPress !== undefined || onDoublePress !== undefined || onContextMenu !== undefined || selected !== undefined;
+  const name = accessibilityLabel ?? bubbleAccessibleName({
+    senderName,
+    text: deleted ? text_.deleted : text,
+    time,
+    extras: [editedLabel, channelViews, failed ? text_.failed : undefined, pending && !failed ? text_.pending : undefined, outgoing && status !== undefined && !failed ? MESSAGE_STATUS_LABELS[status] : undefined, selected === true ? text_.selected : undefined]
+  });
+  const radii = bubbleRadii(direction, position);
+  const fill = failed ? mixColor(side.fill, paint.failed, theme.isDark ? 0.3 : 0.22) : side.fill;
+  const showTail = tail && hasTail(position);
+  const mediaOnly = media !== undefined && text === undefined && children === undefined && !deleted;
+  const overlayMeta = metaOverlay ?? mediaOnly;
+  const hasMeta = !deleted && (time !== undefined || outgoing && status !== undefined || editedLabel !== undefined && editedLabel !== '' || channelViews !== undefined || authorSignature !== undefined);
+  const resolvedSenderColor = senderColor ?? (senderName === undefined ? undefined : senderNameColor(senderColorSeed ?? senderName, theme));
+  const meta = hasMeta ? /*#__PURE__*/_jsx(MetaRow, {
+    time: time,
+    status: status,
+    direction: direction,
+    editedLabel: editedLabel,
+    channelViews: channelViews,
+    authorSignature: authorSignature,
+    color: overlayMeta ? side.overlayText : side.meta
+  }) : null;
+
+  // The two custom properties the adopted sheet reads. They sit on the ROW so
+  // both the focus ring (on the pressable) and the selection colour (inside the
+  // bubble) inherit them from one place.
+  const rowWebStyle = IS_WEB ? {
+    '--bloom-message-ring': paint.focusRing,
+    '--bloom-message-selection': side.quoteFill
+  } : {};
+  const body = /*#__PURE__*/_jsxs(View, {
+    ...webDataSet({
+      bloomMessageBubble: direction
+    }),
+    style: [{
+      borderRadius: 0,
+      ...radii,
+      backgroundColor: fill,
+      borderWidth: side.border === undefined ? 0 : 1,
+      borderColor: side.border,
+      paddingTop: BUBBLE_PADDING_Y,
+      paddingBottom: BUBBLE_PADDING_Y,
+      paddingLeft: BUBBLE_PADDING_X,
+      paddingRight: BUBBLE_PADDING_X,
+      gap: 2,
+      opacity: pending && !failed ? 0.65 : 1,
+      overflow: 'hidden'
+    }, bubbleStyle],
+    children: [forwardedFrom === undefined || deleted ? null : /*#__PURE__*/_jsx(ForwardedLine, {
+      name: forwardedFrom,
+      prefix: text_.forwardedFrom,
+      side: side
+    }), senderName === undefined || deleted ? null : /*#__PURE__*/_jsx(Text, {
+      variant: "body-2-medium",
+      numberOfLines: 1,
+      style: {
+        color: resolvedSenderColor
+      },
+      children: senderName
+    }), replyTo === undefined || deleted ? null : /*#__PURE__*/_jsx(ReplyQuote, {
+      quote: replyTo,
+      side: side,
+      onPress: onPressReply,
+      label: text_.replyTo
+    }), media === undefined || deleted ? null : /*#__PURE__*/_jsxs(View, {
+      style: {
+        marginTop: forwardedFrom === undefined && senderName === undefined && replyTo === undefined ? -BUBBLE_PADDING_Y : 0,
+        marginLeft: -BUBBLE_PADDING_X,
+        marginRight: -BUBBLE_PADDING_X,
+        marginBottom: mediaOnly ? -BUBBLE_PADDING_Y : 2,
+        overflow: 'hidden'
+      },
+      children: [media, overlayMeta && meta !== null ? /*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          right: 8,
+          bottom: 8,
+          borderRadius: 12,
+          paddingTop: 2,
+          paddingBottom: 2,
+          paddingLeft: 8,
+          paddingRight: 8,
+          backgroundColor: side.overlayFill
+        },
+        children: meta
+      }) : null]
+    }), deleted ? /*#__PURE__*/_jsx(Text, {
+      variant: "body-regular",
+      style: {
+        color: paint.muted,
+        fontStyle: 'italic'
+      },
+      children: text_.deleted
+    }) : /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'flex-end',
+        rowGap: 2
+      },
+      children: [children === undefined ? null : /*#__PURE__*/_jsx(View, {
+        style: {
+          flexShrink: 1
+        },
+        children: children
+      }), children === undefined && text !== undefined ? /*#__PURE__*/_jsx(View, {
+        style: {
+          flexShrink: 1
+        },
+        children: /*#__PURE__*/_jsx(MessageText, {
+          text: text,
+          side: side,
+          renderEntity: renderEntity,
+          style: textStyle
+        })
+      }) : null, overlayMeta || meta === null ? null : /*#__PURE__*/_jsx(View, {
+        style: {
+          marginLeft: 'auto',
+          paddingLeft: 8
+        },
+        children: meta
+      })]
+    })]
+  });
+  const bubble = interactive ? /*#__PURE__*/_jsxs(Pressable, {
+    role: "button",
+    accessibilityLabel: name,
+    "aria-pressed": selected === undefined ? undefined : selected,
+    accessibilityState: selected === undefined ? undefined : {
+      selected
+    },
+    onPress: handlePress,
+    onLongPress: onLongPress,
+    ...(IS_WEB && onContextMenu !== undefined ? {
+      onContextMenu: event => {
+        event.preventDefault?.();
+        onContextMenu();
+      }
+    } : null),
+    ...webDataSet({
+      bloomMessagePress: ''
+    }),
+    style: {
+      alignSelf: outgoing ? 'flex-end' : 'flex-start',
+      maxWidth: '100%',
+      borderRadius: BUBBLE_RADIUS
+    },
+    children: [body, showTail ? /*#__PURE__*/_jsx(BubbleTail, {
+      direction: direction,
+      color: fill,
+      border: side.border
+    }) : null]
+  }) : /*#__PURE__*/_jsxs(View, {
+    accessible: true,
+    accessibilityLabel: name,
+    style: {
+      alignSelf: outgoing ? 'flex-end' : 'flex-start',
+      maxWidth: '100%'
+    },
+    children: [body, showTail ? /*#__PURE__*/_jsx(BubbleTail, {
+      direction: direction,
+      color: fill,
+      border: side.border
+    }) : null]
+  });
+  const column = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [bubble, reactions === undefined || reactions.length === 0 || deleted ? null : /*#__PURE__*/_jsx(ReactionRow, {
+      reactions: reactions,
+      paint: paint,
+      direction: direction,
+      onToggle: onToggleReaction,
+      onAdd: onAddReaction,
+      addLabel: text_.addReaction
+    })]
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      paddingTop: 1,
+      paddingBottom: 1,
+      paddingLeft: 2,
+      paddingRight: 2,
+      backgroundColor: selected === true ? paint.selectedBand : 'transparent'
+    }, rowWebStyle, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      "aria-hidden": true,
+      pointerEvents: "none",
+      style: [{
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: paint.highlightBand
+      }, flashStyle]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        gap: 6,
+        justifyContent: outgoing ? 'flex-end' : 'flex-start'
+      },
+      children: [failed && onRetry !== undefined && outgoing ? /*#__PURE__*/_jsx(RetryButton, {
+        onPress: onRetry,
+        label: text_.retry,
+        color: paint.failed
+      }) : null, /*#__PURE__*/_jsx(SwipeToReply, {
+        direction: direction,
+        onSwipeReply: onSwipeReply,
+        style: {
+          maxWidth,
+          alignItems: outgoing ? 'flex-end' : 'flex-start'
+        },
+        children: column
+      }), failed && onRetry !== undefined && !outgoing ? /*#__PURE__*/_jsx(RetryButton, {
+        onPress: onRetry,
+        label: text_.retry,
+        color: paint.failed
+      }) : null]
+    })]
+  });
+}
+export const MessageBubble = /*#__PURE__*/memo(MessageBubbleComponent);
+MessageBubble.displayName = 'MessageBubble';
+//# sourceMappingURL=MessageBubble.js.map

package/lib/module/message-bubble/MessageBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useEffect","useMemo","useRef","Pressable","View","Animated","useAnimatedStyle","useReducedMotion","useSharedValue","withSequence","withTiming","mixColor","MESSAGE_STATUS_LABELS","webDataSet","adoptStyleSheet","useTheme","Text","BubbleTail","ForwardedLine","MessageText","MetaRow","ReactionRow","ReplyQuote","RetryButton","BUBBLE_PADDING_X","BUBBLE_PADDING_Y","BUBBLE_RADIUS","DEFAULT_MAX_WIDTH","DOUBLE_PRESS_MS","IS_WEB","MESSAGE_BUBBLE_CSS","MESSAGE_BUBBLE_STYLE_ID","bubbleAccessibleName","bubbleRadii","hasTail","resolveLabels","resolveMessageBubblePaint","senderNameColor","sidePaint","SwipeToReply","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","FLASH_HOLD_MS","FLASH_FADE_MS","MessageBubbleComponent","direction","position","text","children","media","metaOverlay","tail","senderName","senderColorSeed","senderColor","renderEntity","replyTo","onPressReply","forwardedFrom","editedLabel","time","status","channelViews","authorSignature","reactions","onToggleReaction","onAddReaction","pending","failed","onRetry","selected","highlighted","deleted","onPress","onLongPress","onContextMenu","onDoublePress","onSwipeReply","maxWidth","labels","accessibilityLabel","style","bubbleStyle","textStyle","testID","theme","paint","side","text_","outgoing","flash","reducedMotion","value","duration","flashStyle","opacity","lastPress","handlePress","undefined","now","Date","isDouble","current","interactive","name","extras","radii","fill","isDark","showTail","mediaOnly","overlayMeta","hasMeta","resolvedSenderColor","meta","color","overlayText","rowWebStyle","focusRing","quoteFill","body","bloomMessageBubble","borderRadius","backgroundColor","borderWidth","border","borderColor","paddingTop","paddingBottom","paddingLeft","paddingRight","gap","overflow","prefix","variant","numberOfLines","quote","label","marginTop","marginLeft","marginRight","marginBottom","right","bottom","overlayFill","muted","fontStyle","flexDirection","flexWrap","alignItems","rowGap","flexShrink","bubble","role","accessibilityState","event","preventDefault","bloomMessagePress","alignSelf","accessible","column","length","onToggle","onAdd","addLabel","addReaction","selectedBand","pointerEvents","top","left","highlightBand","justifyContent","retry","MessageBubble","displayName"],"sourceRoot":"../../../src","sources":["message-bubble/MessageBubble.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/message-bubble/MessageGroup.js

@@ -0,0 +1,107 @@
+"use strict";
+
+import React, { Children, cloneElement, isValidElement, memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { Avatar } from "../avatar/index.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { BUBBLE_PADDING_X, GROUP_GAP, RUN_GAP, bubblePositions, resolveMessageBubblePaint, senderNameColor } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A run of consecutive messages from one sender.
+ *
+ * It owns three things a single bubble cannot know:
+ *
+ *   - the GEOMETRY. `bubblePositions(count)` is applied to the children, so a
+ *     caller never hand-assigns `'first' | 'middle' | 'last'` and a run cannot
+ *     end up with two cut corners or none. The helper is exported for lists
+ *     that render their own rows.
+ *   - the AVATAR, at the run's BOTTOM edge for incoming runs — beside the last
+ *     bubble, which is the one the tail hangs off. A 1:1 chat passes
+ *     `showAvatar={false}`: an avatar repeated beside every message of a
+ *     two-person conversation is noise.
+ *   - the SENDER NAME, once, above the first bubble, in the per-sender hue from
+ *     `senderNameColor`. The bubbles themselves then draw none.
+ *
+ * Spacing: 2px inside a run, 8px between runs (the run owns its own top
+ * margin), so the block reads as one utterance and the gap between speakers
+ * reads as a turn.
+ *
+ * A child that is not an element is passed through untouched, so a `{cond &&
+ * …}` false, a string, or a caller's own row does not shift the positions of
+ * the bubbles around it.
+ */
+function MessageGroupComponent({
+  direction,
+  children,
+  senderName,
+  senderColorSeed,
+  senderColor,
+  avatarSource,
+  showAvatar,
+  avatarSize = 28,
+  onPressAvatar,
+  showSenderName,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMessageBubblePaint(theme), [theme]);
+  const outgoing = direction === 'outgoing';
+  const items = Children.toArray(children);
+  const elements = items.filter(isValidElement);
+  const positions = bubblePositions(elements.length);
+  let cursor = 0;
+  const positioned = items.map(child => {
+    if (! /*#__PURE__*/isValidElement(child)) return child;
+    const position = positions[cursor++] ?? 'single';
+    return /*#__PURE__*/cloneElement(child, {
+      position
+    });
+  });
+  const withAvatar = !outgoing && showAvatar !== false;
+  const nameColor = senderColor ?? (senderName === undefined ? paint.muted : senderNameColor(senderColorSeed ?? senderName, theme));
+  const drawName = (showSenderName ?? (senderName !== undefined && !outgoing)) && senderName !== undefined;
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      marginTop: GROUP_GAP
+    }, style],
+    testID: testID,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        gap: 6,
+        justifyContent: outgoing ? 'flex-end' : 'flex-start'
+      },
+      children: [withAvatar ? /*#__PURE__*/_jsx(Avatar, {
+        size: avatarSize,
+        source: avatarSource,
+        name: senderName,
+        alt: senderName,
+        onPress: onPressAvatar
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        style: {
+          flexGrow: 1,
+          flexShrink: 1,
+          flexBasis: 0,
+          gap: RUN_GAP
+        },
+        children: [drawName ? /*#__PURE__*/_jsx(Text, {
+          variant: "body-2-medium",
+          numberOfLines: 1,
+          style: {
+            color: nameColor,
+            paddingLeft: BUBBLE_PADDING_X,
+            paddingRight: BUBBLE_PADDING_X,
+            textAlign: outgoing ? 'right' : 'left'
+          },
+          children: senderName
+        }) : null, positioned]
+      })]
+    })
+  });
+}
+export const MessageGroup = /*#__PURE__*/memo(MessageGroupComponent);
+MessageGroup.displayName = 'MessageGroup';
+//# sourceMappingURL=MessageGroup.js.map

package/lib/module/message-bubble/MessageGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Children","cloneElement","isValidElement","memo","useMemo","View","Avatar","useTheme","Text","BUBBLE_PADDING_X","GROUP_GAP","RUN_GAP","bubblePositions","resolveMessageBubblePaint","senderNameColor","jsx","_jsx","jsxs","_jsxs","MessageGroupComponent","direction","children","senderName","senderColorSeed","senderColor","avatarSource","showAvatar","avatarSize","onPressAvatar","showSenderName","style","testID","theme","paint","outgoing","items","toArray","elements","filter","positions","length","cursor","positioned","map","child","position","withAvatar","nameColor","undefined","muted","drawName","marginTop","flexDirection","alignItems","gap","justifyContent","size","source","name","alt","onPress","flexGrow","flexShrink","flexBasis","variant","numberOfLines","color","paddingLeft","paddingRight","textAlign","MessageGroup","displayName"],"sourceRoot":"../../../src","sources":["message-bubble/MessageGroup.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/message-bubble/MessageList.js

@@ -0,0 +1,123 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { CallSummaryRow } from "./CallSummaryRow.js";
+import { DateSeparator } from "./DateSeparator.js";
+import { MessageBubble } from "./MessageBubble.js";
+import { MessageGroup } from "./MessageGroup.js";
+import { SystemMessage } from "./SystemMessage.js";
+import { UnreadSeparator } from "./UnreadSeparator.js";
+import { groupMessages } from "./shared.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The transcript as a plain vertical stack: date separators, the unread rule,
+ * service rows and runs of bubbles, from one `items` array.
+ *
+ * NOT VIRTUALISED, and that is the whole contract. It renders every item, which
+ * is right for a thread you have just opened (a screen or two of messages) and
+ * wrong for a year of history. For a long history, render the parts yourself
+ * inside a `FlatList`/`FlashList`: call {@link groupMessages} once on your data,
+ * key the resulting entries, and render `MessageGroup` / `DateSeparator` /
+ * `SystemMessage` / `CallSummaryRow` as the list's rows — every one of them is
+ * a standalone export that takes props and holds no list state.
+ *
+ * The grouping is `groupMessages`, which is pure and exported: a run breaks on a
+ * change of sender, of direction, or on anything between two messages (a day, a
+ * read marker, a service line). So "who is this from" and "where does it sit in
+ * a run" are decided once, from the data, rather than by each row guessing at
+ * its neighbours.
+ */
+function MessageListComponent({
+  items,
+  showAvatars = true,
+  showSenderNames = true,
+  avatarSize = 28,
+  unreadLabel,
+  labels,
+  contentStyle,
+  style,
+  testID
+}) {
+  const entries = useMemo(() => groupMessages(items), [items]);
+  const renderBubble = (item, position) => {
+    const {
+      id,
+      senderId: _senderId,
+      dateKey: _dateKey,
+      dateLabel: _dateLabel,
+      unreadBefore: _unreadBefore,
+      system: _system,
+      call: _call,
+      avatarSource: _avatarSource,
+      onPressAvatar: _onPressAvatar,
+      senderName: _senderName,
+      ...bubble
+    } = item;
+    return /*#__PURE__*/_jsx(MessageBubble, {
+      ...bubble,
+      position: position,
+      labels: labels
+    }, id);
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: style,
+    testID: testID,
+    children: /*#__PURE__*/_jsx(View, {
+      style: [{
+        paddingTop: 8,
+        paddingBottom: 8,
+        paddingLeft: 12,
+        paddingRight: 12
+      }, contentStyle],
+      children: entries.map(entry => {
+        switch (entry.kind) {
+          case 'date':
+            return /*#__PURE__*/_jsx(DateSeparator, {
+              label: entry.label
+            }, entry.key);
+          case 'unread':
+            return /*#__PURE__*/_jsx(UnreadSeparator, {
+              label: unreadLabel
+            }, entry.key);
+          case 'system':
+            return /*#__PURE__*/_jsx(SystemMessage, {
+              text: entry.item.system
+            }, entry.key);
+          case 'call':
+            return /*#__PURE__*/_jsx(CallSummaryRow, {
+              direction: entry.item.direction,
+              outcome: entry.item.call?.outcome ?? 'incoming',
+              title: entry.item.call?.title ?? '',
+              duration: entry.item.call?.duration,
+              time: entry.item.call?.time,
+              video: entry.item.call?.video,
+              onPress: entry.item.call?.onPress
+            }, entry.key);
+          default:
+            {
+              const first = entry.messages[0]?.item;
+              return /*#__PURE__*/_jsx(MessageGroup, {
+                direction: entry.direction,
+                senderName: first?.senderName,
+                senderColorSeed: first?.senderColorSeed ?? first?.senderId,
+                senderColor: first?.senderColor,
+                avatarSource: first?.avatarSource,
+                onPressAvatar: first?.onPressAvatar,
+                showAvatar: showAvatars,
+                showSenderName: showSenderNames && entry.direction === 'incoming',
+                avatarSize: avatarSize,
+                children: entry.messages.map(({
+                  item,
+                  position
+                }) => renderBubble(item, position))
+              }, entry.key);
+            }
+        }
+      })
+    })
+  });
+}
+export const MessageList = /*#__PURE__*/memo(MessageListComponent);
+MessageList.displayName = 'MessageList';
+//# sourceMappingURL=MessageList.js.map

package/lib/module/message-bubble/MessageList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","View","CallSummaryRow","DateSeparator","MessageBubble","MessageGroup","SystemMessage","UnreadSeparator","groupMessages","jsx","_jsx","MessageListComponent","items","showAvatars","showSenderNames","avatarSize","unreadLabel","labels","contentStyle","style","testID","entries","renderBubble","item","position","id","senderId","_senderId","dateKey","_dateKey","dateLabel","_dateLabel","unreadBefore","_unreadBefore","system","_system","call","_call","avatarSource","_avatarSource","onPressAvatar","_onPressAvatar","senderName","_senderName","bubble","children","paddingTop","paddingBottom","paddingLeft","paddingRight","map","entry","kind","label","key","text","direction","outcome","title","duration","time","video","onPress","first","messages","senderColorSeed","senderColor","showAvatar","showSenderName","MessageList","displayName"],"sourceRoot":"../../../src","sources":["message-bubble/MessageList.tsx"],"mappings":"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","ignoreList":[]}