@oxy.so/bloom 2.10.0 → 2.12.0

package/src/chat-screen/ChatSplitLayout.tsx

@@ -0,0 +1,165 @@
+import React, { memo, useCallback, useRef, useState } from 'react';
+import { useWindowDimensions, View, type LayoutChangeEvent } from 'react-native';
+
+import { AiChatResizeHandle } from '../ai-chat/AiChatShell';
+import { useControllableState } from '../hooks/use-controllable-state';
+import {
+  CHAT_LIST_PANE_WIDTH,
+  CHAT_INFO_PANE_WIDTH,
+  CHAT_SCREEN_LABELS,
+  CHAT_SPLIT_BREAKPOINT,
+  clamp,
+  dataHook,
+  useChatScreenPaint,
+} from './shared';
+import type { ChatPane, ChatSplitLayoutProps } from './types';
+
+/**
+ * The desktop frame: conversation list, conversation, and optionally an info
+ * pane — collapsing to ONE pane when there is not room for two.
+ *
+ * THE COMPACT LAYOUT RENDERS ONE PANE, it does not hide two. A hidden pane is
+ * still mounted, still subscribed, still measuring, and on web still in the tab
+ * order; on a phone that is three screens' worth of work to show one. So `pane`
+ * SELECTS, and `list` / `info` are simply not built while the conversation is
+ * showing.
+ *
+ * Asking for `info` with no `info` node falls back to the conversation rather
+ * than rendering an empty screen: the caller has told you which pane it wants,
+ * and the only honest answer when that pane does not exist is the one that
+ * always does.
+ *
+ * The grip is `ai-chat`'s `AiChatResizeHandle` — the same pointer-capture drag,
+ * arrow-key nudging and hover grip the AI shell uses, rather than a second
+ * implementation of the same 90 lines. It reports a DELTA, so the width is
+ * rebased on every drag start and the pane cannot drift.
+ *
+ * Compact is MEASURED from the layout, not from the window: this frame is
+ * regularly mounted inside something narrower than the screen (a story, a
+ * split-view host). The first render has no measurement, so it is seeded from
+ * the window — which is right for the full-screen case and corrected on the next
+ * frame for every other one.
+ */
+function ChatSplitLayoutComponent({
+  list,
+  children,
+  info,
+  pane = 'conversation',
+  listWidth,
+  onListWidthChange,
+  defaultListWidth = CHAT_LIST_PANE_WIDTH,
+  minWidth = 280,
+  maxWidth = 480,
+  infoWidth = CHAT_INFO_PANE_WIDTH,
+  resizable = true,
+  resizeLabel = CHAT_SCREEN_LABELS.resizeList,
+  breakpoint = CHAT_SPLIT_BREAKPOINT,
+  compact: compactProp,
+  style,
+  testID,
+}: ChatSplitLayoutProps) {
+  const paint = useChatScreenPaint();
+  const { width: windowWidth } = useWindowDimensions();
+  const [measured, setMeasured] = useState<number | null>(null);
+  const compact = compactProp ?? (measured ?? windowWidth) < breakpoint;
+
+  const [width, setWidth] = useControllableState<number>({
+    value: listWidth,
+    defaultValue: defaultListWidth,
+    onChange: onListWidthChange,
+  });
+  const widthAtDragStart = useRef(width);
+
+  const onResizeStart = useCallback(() => {
+    widthAtDragStart.current = width;
+  }, [width]);
+  const onResize = useCallback(
+    (dx: number) => setWidth(clamp(widthAtDragStart.current + dx, minWidth, maxWidth)),
+    [maxWidth, minWidth, setWidth],
+  );
+  // The grip's arrow keys report a delta in the same direction the AI shell's
+  // panel reads it (positive = the pane to the LEFT gives up width), so the sign
+  // is flipped here: this handle sits on the list's right edge.
+  const onNudge = useCallback(
+    (dx: number) => setWidth(clamp(width - dx, minWidth, maxWidth)),
+    [maxWidth, minWidth, setWidth, width],
+  );
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    setMeasured(event.nativeEvent.layout.width);
+  }, []);
+
+  if (compact) {
+    const resolved: ChatPane = pane === 'info' && !info ? 'conversation' : pane;
+    return (
+      <View
+        testID={testID}
+        onLayout={onLayout}
+        {...dataHook('chatPane', resolved)}
+        style={[{ flexGrow: 1, flexShrink: 1, minWidth: 0, backgroundColor: paint.page }, style]}
+      >
+        {resolved === 'list' ? list : null}
+        {resolved === 'conversation' ? children : null}
+        {resolved === 'info' ? info : null}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      testID={testID}
+      onLayout={onLayout}
+      {...dataHook('chatPane', 'split')}
+      style={[
+        {
+          flexGrow: 1,
+          flexShrink: 1,
+          minWidth: 0,
+          flexDirection: 'row',
+          backgroundColor: paint.page,
+        },
+        style,
+      ]}
+    >
+      <View
+        testID={testID ? `${testID}-list` : undefined}
+        style={{
+          position: 'relative',
+          width,
+          flexShrink: 0,
+          minWidth: 0,
+          borderRightWidth: 1,
+          borderRightColor: paint.border,
+        }}
+      >
+        {list}
+        {resizable ? (
+          <AiChatResizeHandle
+            label={resizeLabel}
+            onResizeStart={onResizeStart}
+            onResize={onResize}
+            onNudge={onNudge}
+            testID={testID ? `${testID}-grip` : undefined}
+          />
+        ) : null}
+      </View>
+      <View
+        testID={testID ? `${testID}-conversation` : undefined}
+        style={{ flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 0 }}
+      >
+        {children}
+      </View>
+      {info ? (
+        <View
+          testID={testID ? `${testID}-info` : undefined}
+          style={{ width: infoWidth, flexShrink: 0, minWidth: 0 }}
+        >
+          {info}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const ChatSplitLayout = memo(ChatSplitLayoutComponent);
+ChatSplitLayout.displayName = 'ChatSplitLayout';

package/src/chat-screen/PinnedMessageBar.tsx

@@ -0,0 +1,224 @@
+import React, { memo } from 'react';
+import { Image, Pressable, View } from 'react-native';
+
+import { Button } from '../button';
+import { RiCloseLine } from '../icons/remix/RiCloseLine';
+import { RiListUnordered } from '../icons/remix/RiListUnordered';
+import { RiUnpinLine } from '../icons/remix/RiUnpinLine';
+import { Text } from '../typography';
+import {
+  CHAT_SCREEN_LABELS,
+  clamp,
+  formatPinTitle,
+  MAX_PIN_SEGMENTS,
+  useChatScreenPaint,
+  useResolvedImageSource,
+} from './shared';
+import type { ChatPinnedMessage, PinnedMessageBarProps } from './types';
+
+const BAR_HEIGHT = 52;
+const ACCENT_BAR_HEIGHT = 32;
+const SEGMENT_GAP = 2;
+
+/**
+ * The vertical accent rule: one segment per pin, the current one at full
+ * strength and the rest washed out, so the bar says WHERE you are in the pins as
+ * well as that there are some.
+ *
+ * Past {@link MAX_PIN_SEGMENTS} it draws a single solid rule instead. Nine
+ * segments inside 32px are sub-pixel slivers — a progress indicator that cannot
+ * be counted is decoration, and decoration that looks like information is worse
+ * than none.
+ */
+function PinSegments({
+  total,
+  index,
+  active,
+  inactive,
+  testID,
+}: {
+  total: number;
+  index: number;
+  active: string;
+  inactive: string;
+  testID?: string;
+}) {
+  const segments = total > MAX_PIN_SEGMENTS ? 1 : total;
+  const height = (ACCENT_BAR_HEIGHT - SEGMENT_GAP * (segments - 1)) / segments;
+  return (
+    <View
+      aria-hidden
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      style={{ width: 3, height: ACCENT_BAR_HEIGHT, gap: SEGMENT_GAP }}
+      testID={testID}
+    >
+      {Array.from({ length: segments }, (_unused, i) => (
+        <View
+          key={i}
+          testID={testID ? `${testID}-${i}` : undefined}
+          style={{
+            height,
+            borderRadius: 2,
+            backgroundColor: segments === 1 || i === index ? active : inactive,
+          }}
+        />
+      ))}
+    </View>
+  );
+}
+
+function PinThumbnail({ source }: { source: ChatPinnedMessage['thumbnail'] }) {
+  const paint = useChatScreenPaint();
+  const resolved = useResolvedImageSource(source, 'thumb');
+  if (!resolved) return null;
+  return (
+    <Image
+      source={resolved}
+      accessibilityIgnoresInvertColors
+      style={{
+        width: 32,
+        height: 32,
+        borderRadius: 6,
+        backgroundColor: paint.surfaceSubtle,
+      }}
+    />
+  );
+}
+
+/**
+ * The strip under the header: which message is pinned, what it says, and a way
+ * to jump to it.
+ *
+ * An empty `pins` renders NOTHING — a bar reading "Pinned message" over no pin
+ * is a row of chrome claiming a state the conversation is not in.
+ *
+ * `index` is CLAMPED rather than trusted. The pins arrive from a list that can
+ * shrink under the caller (someone unpins the one you were looking at), and a
+ * bar that renders `undefined.preview` for one frame is a crash, not a state.
+ */
+function PinnedMessageBarComponent({
+  pins,
+  index = 0,
+  onPressPin,
+  onPressList,
+  onDismiss,
+  dismissIcon = 'close',
+  formatTitle = formatPinTitle,
+  listLabel = CHAT_SCREEN_LABELS.pinnedList,
+  dismissLabel,
+  accessibilityLabel,
+  style,
+  testID,
+}: PinnedMessageBarProps) {
+  const paint = useChatScreenPaint();
+  if (pins.length === 0) return null;
+
+  const safeIndex = clamp(Math.round(index), 0, pins.length - 1);
+  const pin = pins[safeIndex] as ChatPinnedMessage;
+  const title = formatTitle(safeIndex, pins.length);
+  const preview = pin.author ? `${pin.author}: ${pin.preview}` : pin.preview;
+  const resolvedDismissLabel =
+    dismissLabel ??
+    (dismissIcon === 'unpin' ? CHAT_SCREEN_LABELS.pinnedUnpin : CHAT_SCREEN_LABELS.pinnedClose);
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        {
+          minHeight: BAR_HEIGHT,
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 8,
+          paddingLeft: 12,
+          paddingRight: 8,
+          paddingTop: 8,
+          paddingBottom: 8,
+          backgroundColor: paint.surface,
+          borderBottomWidth: 1,
+          borderBottomColor: paint.border,
+        },
+        style,
+      ]}
+    >
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? `${title}. ${preview}`}
+        onPress={onPressPin ? () => onPressPin(pin, safeIndex) : undefined}
+        disabled={!onPressPin}
+        testID={testID ? `${testID}-jump` : undefined}
+        style={{
+          minWidth: 0,
+          flexGrow: 1,
+          flexShrink: 1,
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 10,
+        }}
+      >
+        <PinSegments
+          total={pins.length}
+          index={safeIndex}
+          active={paint.accentColor}
+          inactive={paint.accentTrack}
+          testID={testID ? `${testID}-segment` : undefined}
+        />
+        <View style={{ minWidth: 0, flexGrow: 1, flexShrink: 1 }}>
+          <Text
+            variant="caption-1-semibold"
+            numberOfLines={1}
+            testID={testID ? `${testID}-title` : undefined}
+            style={{ color: paint.accentColor }}
+          >
+            {title}
+          </Text>
+          <Text
+            variant="body-2-regular"
+            numberOfLines={1}
+            testID={testID ? `${testID}-preview` : undefined}
+            style={{ color: paint.textSecondary }}
+          >
+            {preview}
+          </Text>
+        </View>
+        <PinThumbnail source={pin.thumbnail} />
+      </Pressable>
+
+      {onPressList ? (
+        <Button
+          variant="text"
+          size="small"
+          iconOnly
+          // An ELEMENT: `variant="text"` paints a component icon in the ACCENT,
+          // and two accent glyphs beside an accent title line is three things
+          // competing for the same attention.
+          icon={<RiListUnordered width={18} height={18} fill={paint.textSecondary} />}
+          accessibilityLabel={listLabel}
+          onPress={onPressList}
+          testID={testID ? `${testID}-list` : undefined}
+        />
+      ) : null}
+      {onDismiss ? (
+        <Button
+          variant="text"
+          size="small"
+          iconOnly
+          icon={
+            dismissIcon === 'unpin' ? (
+              <RiUnpinLine width={18} height={18} fill={paint.textSecondary} />
+            ) : (
+              <RiCloseLine width={18} height={18} fill={paint.textSecondary} />
+            )
+          }
+          accessibilityLabel={resolvedDismissLabel}
+          onPress={onDismiss}
+          testID={testID ? `${testID}-dismiss` : undefined}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+export const PinnedMessageBar = memo(PinnedMessageBarComponent);
+PinnedMessageBar.displayName = 'PinnedMessageBar';

package/src/chat-screen/ScrollToBottomButton.tsx

@@ -0,0 +1,149 @@
+import React, { memo } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { UnreadBadge } from '../chat-indicators/UnreadBadge';
+import { RiArrowDownLine } from '../icons/remix/RiArrowDownLine';
+import { RiAtLine } from '../icons/remix/RiAtLine';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { CHAT_SCREEN_LABELS, useChatScreenPaint } from './shared';
+import type {
+  ChatIconComponent,
+  JumpToMentionButtonProps,
+  ScrollToBottomButtonProps,
+} from './types';
+
+/**
+ * The shared body of the two round jump buttons.
+ *
+ * `visible={false}` renders NOTHING. Keeping a faded button mounted would leave
+ * a focusable control in the tab order that nobody can see, and a screen reader
+ * announcing "Scroll to latest messages" for a transcript already at the bottom
+ * is worse than silence. There is no entrance animation for the same reason
+ * nothing else in Bloom scales on press: the button appearing IS the signal.
+ *
+ * The badge sits ABOVE the circle rather than inside it, and it carries its own
+ * accessible name (`UnreadBadge` composes "3 unread messages"), so the count is
+ * announced without the button's name having to be rewritten per count.
+ */
+function RoundJumpButton({
+  visible = true,
+  count = 0,
+  badgeMax = 99,
+  icon: Icon,
+  onPress,
+  accessibilityLabel,
+  size = 44,
+  style,
+  testID,
+}: {
+  visible?: boolean;
+  count?: number;
+  badgeMax?: number;
+  icon: ChatIconComponent;
+  onPress?: () => void;
+  accessibilityLabel: string;
+  size?: number;
+  style?: ScrollToBottomButtonProps['style'];
+  testID?: string;
+}) {
+  const paint = useChatScreenPaint();
+  if (!visible) return null;
+
+  const circle: WebCssStyle = {
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: paint.floatingSurface,
+    borderWidth: 1,
+    borderColor: paint.floatingBorder,
+    boxShadow: paint.floatingShadow,
+  };
+
+  return (
+    <View testID={testID} style={[{ alignItems: 'center' }, style]}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        onPress={onPress}
+        style={circle}
+        testID={testID ? `${testID}-button` : undefined}
+      >
+        <Icon width={22} height={22} fill={paint.textSecondary} />
+      </Pressable>
+      {count > 0 ? (
+        <View
+          pointerEvents="none"
+          style={{ position: 'absolute', top: -6, alignSelf: 'center' }}
+          testID={testID ? `${testID}-badge` : undefined}
+        >
+          <UnreadBadge count={count} max={badgeMax} size="small" />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+/** The round "back to the newest message" button, with its unread tally. */
+function ScrollToBottomButtonComponent({
+  visible = true,
+  unreadCount = 0,
+  badgeMax,
+  onPress,
+  accessibilityLabel = CHAT_SCREEN_LABELS.scrollToBottom,
+  size,
+  style,
+  testID,
+}: ScrollToBottomButtonProps) {
+  return (
+    <RoundJumpButton
+      visible={visible}
+      count={unreadCount}
+      badgeMax={badgeMax}
+      icon={RiArrowDownLine}
+      onPress={onPress}
+      accessibilityLabel={accessibilityLabel}
+      size={size}
+      style={style}
+      testID={testID}
+    />
+  );
+}
+
+/**
+ * The `@` companion: the same button for the mentions you have not read. It is a
+ * SEPARATE control rather than a mode of the one above, because "newest" and
+ * "the message that named me" are different destinations and a user scrolled
+ * far up wants both offered at once.
+ */
+function JumpToMentionButtonComponent({
+  visible = true,
+  count = 0,
+  badgeMax,
+  onPress,
+  accessibilityLabel = CHAT_SCREEN_LABELS.jumpToMention,
+  size,
+  style,
+  testID,
+}: JumpToMentionButtonProps) {
+  return (
+    <RoundJumpButton
+      visible={visible}
+      count={count}
+      badgeMax={badgeMax}
+      icon={RiAtLine}
+      onPress={onPress}
+      accessibilityLabel={accessibilityLabel}
+      size={size}
+      style={style}
+      testID={testID}
+    />
+  );
+}
+
+export const ScrollToBottomButton = memo(ScrollToBottomButtonComponent);
+ScrollToBottomButton.displayName = 'ScrollToBottomButton';
+
+export const JumpToMentionButton = memo(JumpToMentionButtonComponent);
+JumpToMentionButton.displayName = 'JumpToMentionButton';

package/src/chat-screen/index.ts

@@ -0,0 +1,45 @@
+export { ChatBackground } from './ChatBackground';
+export { ChatDateHeader } from './ChatDateHeader';
+export { ChatEmptyState } from './ChatEmptyState';
+export { ChatHeader } from './ChatHeader';
+export { ChatInfoPanel } from './ChatInfoPanel';
+export { ChatMemberRow } from './ChatMemberRow';
+export { ChatSplitLayout } from './ChatSplitLayout';
+export { PinnedMessageBar } from './PinnedMessageBar';
+export { JumpToMentionButton, ScrollToBottomButton } from './ScrollToBottomButton';
+export {
+  chatBackgroundExtremes,
+  chatBackgroundReferenceSurfaces,
+  CHAT_COMPACT_BREAKPOINT,
+  CHAT_HEADER_HEIGHT,
+  CHAT_INFO_PANE_WIDTH,
+  CHAT_LIST_PANE_WIDTH,
+  CHAT_SPLIT_BREAKPOINT,
+  MAX_PIN_SEGMENTS,
+  resolveChatScreenPaint,
+} from './shared';
+export type { ChatScreenPaint } from './shared';
+export type {
+  ChatBackgroundProps,
+  ChatBackgroundVariant,
+  ChatDateHeaderPlacement,
+  ChatDateHeaderProps,
+  ChatEmptyStateProps,
+  ChatHeaderMarker,
+  ChatHeaderProps,
+  ChatHeaderStatusTone,
+  ChatIconComponent,
+  ChatInfoAction,
+  ChatInfoPanelProps,
+  ChatInfoPanelVariant,
+  ChatInfoTab,
+  ChatMember,
+  ChatMemberRole,
+  ChatMemberRowProps,
+  ChatPane,
+  ChatPinnedMessage,
+  ChatSplitLayoutProps,
+  JumpToMentionButtonProps,
+  PinnedMessageBarProps,
+  ScrollToBottomButtonProps,
+} from './types';