@oxy.so/bloom 2.10.0 → 2.11.0

package/src/message-bubble/types.ts

@@ -0,0 +1,300 @@
+import type { ReactNode } from 'react';
+import type { DimensionValue, StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+import type { MessageDeliveryStatus } from '../chat-indicators';
+
+/** Which side of the transcript a message sits on. */
+export type MessageDirection = 'incoming' | 'outgoing';
+
+/**
+ * Where a bubble sits in a run of consecutive messages from the same sender.
+ * It decides ONE thing — which corner is cut — and the cut is on the LAST
+ * bubble of a run, the one the tail would hang off.
+ */
+export type MessagePosition = 'single' | 'first' | 'middle' | 'last';
+
+/** A text span the bubble hands back to the caller to render. */
+export type MessageEntityType = 'link' | 'mention' | 'hashtag';
+
+export interface MessageEntity {
+  type: MessageEntityType;
+  /** The matched text, including the `@`, `#` or scheme. */
+  text: string;
+  /** Character offsets into the message text. */
+  start: number;
+  end: number;
+}
+
+/** One reaction pill: an emoji, how many people picked it, and whether you did. */
+export interface MessageReaction {
+  emoji: string;
+  count: number;
+  /** Highlights the pill in the accent and flips the toggle's pressed state. */
+  mine?: boolean;
+  /** Accessible name. Default: `"<emoji>, <count>"` (plus ", selected"). */
+  label?: string;
+}
+
+/** The quoted message above a reply. */
+export interface MessageReplyPreview {
+  /** Who wrote the quoted message. */
+  senderName: string;
+  /** One line of it — already truncated by the caller if it needs to be. */
+  preview: string;
+  /** Overrides the left bar and name colour (a per-sender hue, usually). */
+  color?: string;
+}
+
+/** An incoming, outgoing or missed call, as a row in the transcript. */
+export type CallOutcome = 'incoming' | 'outgoing' | 'missed';
+
+export interface MessageBubbleLabels {
+  /** Prefixes the forwarded line. Default `"Forwarded from"`. */
+  forwardedFrom: string;
+  /** What a deleted bubble says. */
+  deleted: string;
+  /** Names the retry control on a failed message. */
+  retry: string;
+  /** Names the `+` reaction control. */
+  addReaction: string;
+  /** Names the reply quote when it is pressable. */
+  replyTo: string;
+  /** Announced on a selected bubble. */
+  selected: string;
+  /** Announced on a message that has not been sent yet. */
+  pending: string;
+  /** Announced on a message that failed to send. */
+  failed: string;
+}
+
+export interface MessageBubbleProps {
+  direction: MessageDirection;
+  /** Default `'single'`. See {@link MessagePosition}. */
+  position?: MessagePosition;
+  /** The message text. Ignored when `children` is given. */
+  text?: string;
+  /** Arbitrary bubble content, in place of `text`. */
+  children?: ReactNode;
+  /**
+   * The rich-media slot — an image, a voice note, a file row. It is rendered
+   * ABOVE the text, edge to edge inside the bubble's radius; the bubble adds no
+   * padding around it.
+   */
+  media?: ReactNode;
+  /**
+   * Floats the meta row over the media on a translucent pill instead of
+   * tucking it after the text. Defaults to true when there is `media` and no
+   * text or children.
+   */
+  metaOverlay?: boolean;
+  /** Draws the notch on the small corner. Off by default. */
+  tail?: boolean;
+  /** The sender line above the text, in groups. */
+  senderName?: string;
+  /** What {@link senderNameColor} hashes. Defaults to `senderName`. */
+  senderColorSeed?: string;
+  /** An explicit sender colour, in place of the hashed one. */
+  senderColor?: string;
+  /** Renders `link` / `mention` / `hashtag` spans of `text` yourself. */
+  renderEntity?: (entity: MessageEntity) => ReactNode;
+  /** The quote block above the text. */
+  replyTo?: MessageReplyPreview;
+  onPressReply?: () => void;
+  /** Draws "Forwarded from <name>" above the content. */
+  forwardedFrom?: string;
+  /** Shown in the meta row. Pass `""` (or omit) for a message that was not edited. */
+  editedLabel?: string;
+  /** A pre-formatted time — `"12:41"`. Never computed here. */
+  time?: string;
+  /** The delivery ticks. Outgoing only; ignored on an incoming bubble. */
+  status?: MessageDeliveryStatus;
+  /** A pre-formatted view count for a channel post — `"12.4K"`. */
+  channelViews?: string;
+  /** The author signature on a channel post. */
+  authorSignature?: string;
+  reactions?: readonly MessageReaction[];
+  onToggleReaction?: (emoji: string) => void;
+  onAddReaction?: () => void;
+  /** Dimmed: queued, not acknowledged. */
+  pending?: boolean;
+  /** Negative tint plus a retry affordance. */
+  failed?: boolean;
+  onRetry?: () => void;
+  /**
+   * Selection mode. `undefined` means the transcript is not in selection mode;
+   * `true`/`false` draw the full-row band and make the bubble a toggle.
+   */
+  selected?: boolean;
+  /** The flash after jumping to a message. */
+  highlighted?: boolean;
+  /** Replaces the content with the "This message was deleted" line. */
+  deleted?: boolean;
+  onPress?: () => void;
+  onLongPress?: () => void;
+  /** Web only — right-click. The event is defaulted for you. */
+  onContextMenu?: () => void;
+  onDoublePress?: () => void;
+  /** Native only — a short drag towards the reply direction. */
+  onSwipeReply?: () => void;
+  /** How wide the bubble may grow. Default `'78%'`. */
+  maxWidth?: DimensionValue;
+  labels?: Partial<MessageBubbleLabels>;
+  /** Names the bubble for assistive tech. Composed from its parts by default. */
+  accessibilityLabel?: string;
+  /** The ROW — the full-width band, not the bubble. */
+  style?: StyleProp<ViewStyle>;
+  /** The bubble itself. */
+  bubbleStyle?: StyleProp<ViewStyle>;
+  /** The message text. */
+  textStyle?: StyleProp<TextStyle>;
+  testID?: string;
+}
+
+// ---------------------------------------------------------------------------
+//  Group
+// ---------------------------------------------------------------------------
+
+export interface MessageGroupProps {
+  direction: MessageDirection;
+  /** The bubbles. `position` is computed and injected for each. */
+  children: ReactNode;
+  /** The name above the run. Also the default avatar name and colour seed. */
+  senderName?: string;
+  senderColorSeed?: string;
+  senderColor?: string;
+  /** A URL, an `ImageResolver` id, or an `{ uri }` source. */
+  avatarSource?: string | { uri: string };
+  /** Default `true` for incoming runs; a 1:1 chat passes `false`. */
+  showAvatar?: boolean;
+  /** Avatar diameter. Default 28. */
+  avatarSize?: number;
+  onPressAvatar?: () => void;
+  /** Draws the sender line above the first bubble. Default: whenever `senderName` is set and the run is incoming. */
+  showSenderName?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+// ---------------------------------------------------------------------------
+//  Separators and service rows
+// ---------------------------------------------------------------------------
+
+export interface DateSeparatorProps {
+  /** Pre-formatted — `"Today"`, `"12 March"`. */
+  label: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface UnreadSeparatorProps {
+  /** Default `"Unread messages"`. */
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface SystemMessageProps {
+  /** The service line — `"Ana joined the group"`. */
+  children?: ReactNode;
+  /** Plain-text form, used when there are no `children`. */
+  text?: string;
+  /** A glyph before the text, e.g. a pin. */
+  icon?: ReactNode;
+  onPress?: () => void;
+  /** Required when `onPress` is set and the row draws no text of its own. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface CallSummaryRowProps {
+  direction: MessageDirection;
+  outcome: CallOutcome;
+  /** `"Outgoing call"`, `"Missed voice call"` — pre-formatted. */
+  title: string;
+  /** `"12:04"` or `"4 min"` — pre-formatted. */
+  duration?: string;
+  /** The time in the meta row. */
+  time?: string;
+  /** Marks the call as video rather than voice (changes the icon only). */
+  video?: boolean;
+  onPress?: () => void;
+  position?: MessagePosition;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface TypingBubbleProps {
+  /** Default `'incoming'`. */
+  direction?: MessageDirection;
+  senderName?: string;
+  avatarSource?: string | { uri: string };
+  showAvatar?: boolean;
+  avatarSize?: number;
+  /** Default `"Typing…"` — the bubble draws dots and no text, so it needs one. */
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+// ---------------------------------------------------------------------------
+//  List
+// ---------------------------------------------------------------------------
+
+/**
+ * One entry a caller hands {@link MessageListProps.items}. Everything a bubble
+ * takes, plus what the LIST needs to place it: who sent it, which day it is on,
+ * and whether it is a service row rather than a message.
+ */
+export interface MessageListItem
+  extends Omit<MessageBubbleProps, 'position' | 'style' | 'testID'> {
+  id: string;
+  /**
+   * Who sent it. Two consecutive messages group only when this matches — omit
+   * it in a 1:1 chat, where `direction` is enough.
+   */
+  senderId?: string;
+  /** A stable key for the day. A change inserts a {@link DateSeparator}. */
+  dateKey?: string;
+  /** The separator's text. Pre-formatted; defaults to `dateKey`. */
+  dateLabel?: string;
+  /** Puts an {@link UnreadSeparator} directly above this message. */
+  unreadBefore?: boolean;
+  /** Renders a {@link SystemMessage} instead of a bubble, and breaks the run. */
+  system?: string;
+  /** Renders a {@link CallSummaryRow} instead of a bubble. */
+  call?: Omit<CallSummaryRowProps, 'direction' | 'position' | 'style' | 'testID'>;
+  /** Group chrome for the run this message starts. */
+  avatarSource?: string | { uri: string };
+  onPressAvatar?: () => void;
+}
+
+/** A message with the corner geometry the list worked out for it. */
+export interface GroupedMessage {
+  item: MessageListItem;
+  position: MessagePosition;
+}
+
+/** What {@link groupMessages} emits, in render order. */
+export type MessageListEntry =
+  | { kind: 'date'; key: string; label: string }
+  | { kind: 'unread'; key: string }
+  | { kind: 'system'; key: string; item: MessageListItem }
+  | { kind: 'call'; key: string; item: MessageListItem }
+  | { kind: 'group'; key: string; direction: MessageDirection; messages: GroupedMessage[] };
+
+export interface MessageListProps {
+  items: readonly MessageListItem[];
+  /** Hides every run avatar — a 1:1 chat. */
+  showAvatars?: boolean;
+  /** Hides the sender line above each run — a 1:1 chat. */
+  showSenderNames?: boolean;
+  avatarSize?: number;
+  /** Default `"Unread messages"`. */
+  unreadLabel?: string;
+  labels?: Partial<MessageBubbleLabels>;
+  /** Padding around the stack. Default `{ paddingHorizontal: 12, paddingVertical: 8 }`. */
+  contentStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/message-media/ContactMessage.tsx

@@ -0,0 +1,169 @@
+import React, { memo, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { Avatar } from '../avatar';
+import { webDataSet } from '../styles/web-data';
+import { borderRadius, space } from '../styles/tokens';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { useHovered, useMessageMediaCss } from './parts';
+import {
+  fileMetaLine,
+  MESSAGE_MEDIA_RADIUS,
+  MESSAGE_MEDIA_WIDTH,
+  resolveMessageMediaPaint,
+  type MessageMediaPaint,
+} from './shared';
+import type { ContactMessageProps } from './types';
+
+/** The first letters of the first two words — the same rule `Avatar` uses. */
+function initialsOf(name: string): string {
+  return name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((word) => word.charAt(0).toUpperCase())
+    .join('');
+}
+
+function ContactAction({
+  label,
+  paint,
+  onPress,
+  emphasis,
+  testID,
+}: {
+  label: string;
+  paint: MessageMediaPaint;
+  onPress: () => void;
+  emphasis: boolean;
+  testID?: string;
+}) {
+  const [hovered, handlers] = useHovered();
+  const style: WebCssStyle = {
+    flexGrow: 1,
+    flexBasis: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 7,
+    paddingBottom: 7,
+    paddingLeft: 10,
+    paddingRight: 10,
+    borderRadius: borderRadius.full,
+    backgroundColor: hovered ? paint.washStrong : paint.wash,
+    '--bloom-message-media-ring': paint.ring,
+  };
+  return (
+    <Pressable
+      {...webDataSet({ bloomMessageMediaPressable: '' })}
+      {...handlers}
+      role="button"
+      accessibilityLabel={label}
+      onPress={onPress}
+      style={style}
+      testID={testID}
+    >
+      <Text
+        variant="body-2-medium"
+        style={{ color: emphasis ? paint.accent : paint.text }}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
+/**
+ * A shared contact: who it is, and the two things you can do about it.
+ *
+ * The actions are a ROW of equal halves rather than a primary button and a text
+ * link. "Message" and "Add" are the same size of decision — one starts a chat,
+ * the other saves a number — and ranking one of them with a filled button inside
+ * a bubble puts a second accent surface on an accent surface.
+ *
+ * Only the ACTIONS are pressable. The card itself is not: a contact card with no
+ * handler that still highlights under the pointer promises something it does not
+ * do, and every app that wants "open the contact" already has `onMessage`.
+ */
+function ContactMessageComponent({
+  name,
+  detail,
+  avatar,
+  avatarVariant,
+  initials,
+  onMessage,
+  onAdd,
+  messageLabel = 'Message',
+  addLabel = 'Add',
+  width = MESSAGE_MEDIA_WIDTH,
+  radius = MESSAGE_MEDIA_RADIUS,
+  accessibilityLabel,
+  tone = 'incoming',
+  onColor,
+  bubbleColor,
+  style,
+  testID,
+}: ContactMessageProps) {
+  const theme = useTheme();
+  useMessageMediaCss();
+  const paint = useMemo(
+    () => resolveMessageMediaPaint(theme, tone, onColor, bubbleColor),
+    [theme, tone, onColor, bubbleColor],
+  );
+
+  return (
+    <View
+      role="group"
+      accessibilityLabel={accessibilityLabel ?? fileMetaLine(['Contact', name, detail])}
+      style={[{ width, borderRadius: radius }, style ?? null]}
+      testID={testID}
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: space.md }}>
+        <Avatar
+          source={avatar ?? null}
+          variant={avatarVariant}
+          size={44}
+          name={name}
+          initials={initials ?? initialsOf(name)}
+        />
+        <View style={{ flexGrow: 1, flexShrink: 1, minWidth: 0 }}>
+          <Text variant="body-medium" numberOfLines={1} style={{ color: paint.text }}>
+            {name}
+          </Text>
+          {detail ? (
+            <Text variant="caption-1-regular" numberOfLines={1} style={{ color: paint.textMuted }}>
+              {detail}
+            </Text>
+          ) : null}
+        </View>
+      </View>
+
+      {onMessage || onAdd ? (
+        <View style={{ flexDirection: 'row', gap: space.sm, paddingTop: space.md }}>
+          {onMessage ? (
+            <ContactAction
+              label={messageLabel}
+              paint={paint}
+              onPress={onMessage}
+              emphasis
+              testID={testID ? `${testID}-message` : undefined}
+            />
+          ) : null}
+          {onAdd ? (
+            <ContactAction
+              label={addLabel}
+              paint={paint}
+              onPress={onAdd}
+              emphasis={false}
+              testID={testID ? `${testID}-add` : undefined}
+            />
+          ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const ContactMessage = memo(ContactMessageComponent);
+ContactMessage.displayName = 'ContactMessage';

package/src/message-media/DocumentGrid.tsx

@@ -0,0 +1,76 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { FileMessage } from './FileMessage';
+import { resolveMessageMediaPaint } from './shared';
+import type { DocumentGridProps } from './types';
+
+/**
+ * The FILES tab beside {@link SharedMediaGrid}'s media tab.
+ *
+ * It is a list, not a grid of tiles, and the name is the pair's rather than the
+ * shape's: a document has no thumbnail worth three columns, and the two things a
+ * reader is scanning for — the file NAME and its size — are text that needs a
+ * line each.
+ *
+ * Every row is `FileMessage variant="compact"`, so the kind icons, the colours,
+ * the "2.4 MB · PDF" line and the download ring are the same ones the bubble
+ * draws. A second implementation of a file row is a second place for the size
+ * format to drift.
+ *
+ * The rows are always `incoming` tone: this list lives on the panel surface, not
+ * on a bubble.
+ */
+function DocumentGridComponent({
+  items,
+  onPressItem,
+  onDownloadItem,
+  onCancelItem,
+  divider = true,
+  accessibilityLabel,
+  style,
+  testID,
+}: DocumentGridProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMessageMediaPaint(theme, 'incoming'), [theme]);
+
+  const listName =
+    accessibilityLabel ?? `Shared files, ${items.length} item${items.length === 1 ? '' : 's'}`;
+
+  return (
+    <View role="list" accessibilityLabel={listName} style={style ?? null} testID={testID}>
+      {items.map((item, index) => (
+        <View
+          key={item.id}
+          role="listitem"
+          style={
+            divider && index > 0
+              ? { borderTopWidth: 1, borderTopColor: paint.border }
+              : undefined
+          }
+        >
+          <FileMessage
+            variant="compact"
+            name={item.name}
+            kind={item.kind}
+            mimeType={item.mimeType}
+            sizeBytes={item.sizeBytes}
+            sizeLabel={item.sizeLabel}
+            typeLabel={item.typeLabel}
+            metaLabel={item.metaLabel}
+            progress={item.progress}
+            transfer={item.transfer}
+            onPress={onPressItem ? () => onPressItem(index) : undefined}
+            onDownload={onDownloadItem ? () => onDownloadItem(index) : undefined}
+            onCancel={onCancelItem ? () => onCancelItem(index) : undefined}
+            testID={testID ? `${testID}-row-${index}` : undefined}
+          />
+        </View>
+      ))}
+    </View>
+  );
+}
+
+export const DocumentGrid = memo(DocumentGridComponent);
+DocumentGrid.displayName = 'DocumentGrid';