@oxy.so/bloom 5.1.0 → 5.2.0

package/src/chat-composer/create-attachment-menu.tsx

@@ -0,0 +1,228 @@
+/**
+ * The plus/paperclip menu.
+ *
+ * It is `Popover`, not a hand-rolled surface, and that one choice is the whole
+ * platform story: Bloom's popover is already an anchored panel on a pointer and
+ * a bottom sheet on a phone, so this family adds no platform fork of its own
+ * and inherits the dismissal, stacking and focus behaviour those surfaces were
+ * gated for.
+ */
+import React from 'react';
+import { View, type DimensionValue } from 'react-native';
+
+import type { Button as ButtonComponent } from '../button';
+import type { Popover as PopoverComponent, PopoverContent as PopoverContentComponent, PopoverTrigger as PopoverTriggerComponent } from '../popover';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { attachmentMenuItems, resolveChatComposerPalette } from './shared';
+import type { AttachmentMenuItem, AttachmentMenuProps } from './types';
+import { useChatComposerWebCss } from './web-hooks';
+import { useMessages } from '../locale/messages';
+import { CHAT_COMPOSER_MESSAGES } from './messages';
+
+/** Platform dependencies are bound once; shared rendering adds no wrapper. */
+export function createAttachmentMenu({ Button, Popover, PopoverContent, PopoverTrigger }: {
+  Button: typeof ButtonComponent;
+  Popover: typeof PopoverComponent;
+  PopoverContent: typeof PopoverContentComponent;
+  PopoverTrigger: typeof PopoverTriggerComponent;
+}) {
+
+  /** A 48px tinted disc with its label under it. */
+  function GridCell({
+    item,
+    onPress,
+    width,
+    testID,
+  }: {
+    item: AttachmentMenuItem;
+    onPress: () => void;
+    width: DimensionValue;
+    testID?: string;
+  }) {
+    const theme = useTheme();
+    const palette = resolveChatComposerPalette(theme);
+    const tint = item.color ?? palette.accent;
+    const cell: WebCssStyle = {
+      width,
+      height: 'auto',
+      minHeight: 0,
+      minWidth: 0,
+      paddingLeft: 0,
+      paddingRight: 0,
+      alignItems: 'center',
+      gap: 6,
+      paddingTop: 8,
+      paddingBottom: 8,
+      borderRadius: 12,
+      opacity: item.disabled ? 0.45 : 1,
+      cursor: item.disabled ? 'auto' : 'pointer',
+    };
+    return (
+      <Button
+        appearance="plain"
+        tone="neutral"
+        accessibilityLabel={item.label}
+        disabled={item.disabled}
+        onPress={onPress}
+        style={cell}
+        testID={testID}>
+        <View style={{ alignItems: 'center', gap: 6 }}>
+        <View
+          style={{
+            width: 48,
+            height: 48,
+            borderRadius: 24,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: palette.accentSoft,
+          }}>
+          <item.icon width={22} height={22} fill={tint} />
+        </View>
+        <Text variant="caption-1-regular" numberOfLines={1} style={{ color: palette.textSecondary }}>
+          {item.label}
+        </Text>
+        </View>
+      </Button>
+    );
+  }
+
+  /** A full-width row: glyph, label. */
+  function ListRow({
+    item,
+    onPress,
+    testID,
+  }: {
+    item: AttachmentMenuItem;
+    onPress: () => void;
+    testID?: string;
+  }) {
+    const theme = useTheme();
+    const palette = resolveChatComposerPalette(theme);
+    const tint = item.color ?? palette.accent;
+    const row: WebCssStyle = {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      minHeight: 40,
+      height: 'auto',
+      minWidth: 0,
+      width: '100%',
+      borderRadius: 10,
+      paddingLeft: 8,
+      paddingRight: 8,
+      paddingTop: 6,
+      paddingBottom: 6,
+      opacity: item.disabled ? 0.45 : 1,
+      cursor: item.disabled ? 'auto' : 'pointer',
+    };
+    return (
+      <Button
+        appearance="plain"
+        tone="neutral"
+        accessibilityLabel={item.label}
+        disabled={item.disabled}
+        onPress={onPress}
+        style={row}
+        testID={testID}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12, width: '100%' }}>
+        <View
+          style={{
+            width: 32,
+            height: 32,
+            borderRadius: 16,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: palette.accentSoft,
+          }}>
+          <item.icon width={18} height={18} fill={tint} />
+        </View>
+        <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text }}>
+          {item.label}
+        </Text>
+        </View>
+      </Button>
+    );
+  }
+
+  function AttachmentMenu({
+    children,
+    open,
+    defaultOpen,
+    onOpenChange,
+    items: itemsProp,
+    layout = 'grid',
+    columns = 4,
+    onSelect,
+    recent,
+    label: labelProp,
+    style,
+    testID,
+  }: AttachmentMenuProps) {
+    useChatComposerWebCss();
+    const { messages } = useMessages(CHAT_COMPOSER_MESSAGES);
+    const localizedItems = React.useMemo(() => attachmentMenuItems(messages), [messages]);
+    const items = itemsProp ?? localizedItems;
+    const label = labelProp ?? messages.attach;
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+    const isOpen = open ?? uncontrolledOpen;
+
+    const setOpen = (next: boolean) => {
+      if (open === undefined) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    };
+
+    // A percentage string is the only way to say "n per row" in a wrapping flex
+    // row that has to work on both platforms; Yoga and CSS agree on it.
+    const cellWidth: DimensionValue = `${100 / Math.max(1, columns)}%`;
+
+    return (
+      <Popover open={isOpen} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>{children}</PopoverTrigger>
+        <PopoverContent
+          label={label}
+          side="top"
+          align="start"
+          minWidth={layout === 'grid' ? Math.max(264, columns * 72) : 220}
+          style={style}
+          testID={testID}>
+          {recent ? <View style={{ paddingBottom: 8 }}>{recent}</View> : null}
+          <View
+            style={
+              layout === 'grid'
+                ? { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'flex-start' }
+                : { flexDirection: 'column', gap: 2 }
+            }>
+            {items.map((item) =>
+              layout === 'grid' ? (
+                <GridCell
+                  key={item.id}
+                  item={item}
+                  width={cellWidth}
+                  onPress={() => {
+                    onSelect?.(item.id, item);
+                    setOpen(false);
+                  }}
+                  testID={testID ? `${testID}-${item.id}` : undefined}
+                />
+              ) : (
+                <ListRow
+                  key={item.id}
+                  item={item}
+                  onPress={() => {
+                    onSelect?.(item.id, item);
+                    setOpen(false);
+                  }}
+                  testID={testID ? `${testID}-${item.id}` : undefined}
+                />
+              ),
+            )}
+          </View>
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  return AttachmentMenu;
+}

package/src/chat-composer/create-chat-composer.tsx

@@ -0,0 +1,473 @@
+/**
+ * The message input bar of a person-to-person chat: a radius-24 pill with a
+ * left attach button, an autosizing field, an emoji button and a right control
+ * that swaps between a mic (nothing to send) and an accent send disc (there is).
+ *
+ * Presentational. Every piece of state — the draft, the banners, the pending
+ * attachments, which suggestion is highlighted — arrives as a prop, because the
+ * app owns drafts per conversation and a composer that kept its own would lose
+ * them on every navigation.
+ */
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  TextInput,
+  View,
+  type NativeSyntheticEvent,
+  type TextInputContentSizeChangeEventData,
+  type TextInputKeyPressEventData,
+} from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { RiAddLine } from '../icons/remix/RiAddLine';
+import { RiCameraLine } from '../icons/remix/RiCameraLine';
+import { RiEmotionLine } from '../icons/remix/RiEmotionLine';
+import { RiForbidLine } from '../icons/remix/RiForbidLine';
+import { RiMic2Line } from '../icons/remix/RiMic2Line';
+import { RiSendPlaneLine } from '../icons/remix/RiSendPlaneLine';
+import { useControllableState } from '../hooks/use-controllable-state';
+import { useTextareaAutosize } from '../hooks/use-textarea-autosize';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { TYPE_SCALE } from '../typography/scale';
+import type { ComposerAttachmentStrip as ComposerAttachmentStripComponent } from './ComposerAttachmentStrip';
+import type { ComposerIconButton as ComposerIconButtonComponent } from './ComposerIconButton';
+import {
+  BAR_PADDING,
+  BAR_RADIUS,
+  chatComposerLabels,
+  CONTROL_SIZE,
+  DEFAULT_MAX_LINES,
+  LINE_HEIGHT,
+  SWAP_MS,
+  resolveChatComposerPalette,
+} from './shared';
+import type { SuggestionList as SuggestionListComponent } from './SuggestionList';
+import type { ChatComposerProps } from './types';
+import { dataHook, IS_WEB, useChatComposerWebCss } from './web-hooks';
+import { useMessages } from '../locale/messages';
+import { CHAT_COMPOSER_MESSAGES } from './messages';
+import { useCommonMessages } from '../locale/common-messages';
+
+/** Platform dependencies are bound once; shared rendering adds no wrapper. */
+export function createChatComposer({ ComposerAttachmentStrip, ComposerIconButton, SuggestionList }: {
+  ComposerAttachmentStrip: typeof ComposerAttachmentStripComponent;
+  ComposerIconButton: typeof ComposerIconButtonComponent;
+  SuggestionList: typeof SuggestionListComponent;
+}) {
+
+  const EASE_OUT = Easing.bezier(0, 0, 0.2, 1);
+
+  /**
+   * One half of the mic ↔ send crossfade.
+   *
+   * Two things the fade must not break, neither of which the animation expresses:
+   *
+   * `pointerEvents` is a PROP, not a style entry — react-native-web drops it from
+   * a style object silently, and a hidden layer that still takes the press is a
+   * send button that fires when the field is empty.
+   *
+   * The hidden half leaves the ACCESSIBILITY TREE too. Both halves stay mounted so
+   * they can cross-fade, so without this every composer announces "Send" and
+   * "Record a voice message" side by side and only one of them does anything.
+   * `aria-hidden` is what react-native-web reads and
+   * `importantForAccessibility` is what React Native reads; a surface that sets
+   * one of the two is hidden on one platform only.
+   */
+  function SwapLayer({ shown, children }: { shown: boolean; children: React.ReactNode }) {
+    const reducedMotion = useReducedMotion();
+    const progress = useSharedValue(shown ? 1 : 0);
+    React.useEffect(() => {
+      progress.value = reducedMotion
+        ? shown
+          ? 1
+          : 0
+        : withTiming(shown ? 1 : 0, { duration: SWAP_MS, easing: EASE_OUT });
+    }, [shown, reducedMotion, progress]);
+    const animated = useAnimatedStyle(() => ({ opacity: progress.value }), [progress]);
+    return (
+      <Animated.View
+        pointerEvents={shown ? 'auto' : 'none'}
+        aria-hidden={!shown}
+        accessibilityElementsHidden={!shown}
+        importantForAccessibility={shown ? 'auto' : 'no-hide-descendants'}
+        style={[{ position: 'absolute', top: 0, left: 0 }, animated]}>
+        {children}
+      </Animated.View>
+    );
+  }
+
+  /** A DOM keyboard event as react-native-web hands it to `onKeyPress`. */
+  type WebKeyEvent = TextInputKeyPressEventData & {
+    shiftKey?: boolean;
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+    altKey?: boolean;
+    isComposing?: boolean;
+  };
+
+  function ChatComposer({
+    value,
+    defaultValue = '',
+    onValueChange,
+    placeholder: placeholderProp,
+    onSend,
+    sendOn = 'enter',
+    maxLines = DEFAULT_MAX_LINES,
+    minLines = 1,
+    disabled = false,
+    notice,
+    noticeIcon,
+    banner,
+    attachments,
+    onRemoveAttachment,
+    leading,
+    onAttachPress,
+    emojiSlot,
+    onEmojiPress,
+    onCameraPress,
+    onMicPress,
+    onMicPressIn,
+    onMicPressOut,
+    canSend,
+    recorder,
+    suggestions,
+    suggestionKind = 'mention',
+    activeIndex = -1,
+    onActiveIndexChange,
+    onSelectSuggestion,
+    onEscape,
+    onEditLast,
+    showKeyboardHint = false,
+    inputRef,
+    onFocus,
+    onBlur,
+    labels: labelOverrides,
+    style,
+    testID,
+    accessibilityLabel,
+  }: ChatComposerProps) {
+    const theme = useTheme();
+    const { messages } = useMessages(CHAT_COMPOSER_MESSAGES);
+    const common = useCommonMessages();
+    const palette = resolveChatComposerPalette(theme);
+    useChatComposerWebCss();
+    const labels = useMemo(
+      () => ({ ...chatComposerLabels(messages, common.send), ...labelOverrides }),
+      [common.send, labelOverrides, messages],
+    );
+    const placeholder = placeholderProp ?? messages.message;
+
+    const [text, setText] = useControllableState<string>({
+      value,
+      defaultValue,
+      onChange: onValueChange,
+    });
+
+    const localRef = useRef<TextInput | null>(null);
+    const setFieldRef = useCallback(
+      (node: TextInput | null) => {
+        localRef.current = node;
+        if (inputRef) inputRef.current = node;
+      },
+      [inputRef],
+    );
+
+    const minHeight = Math.max(1, minLines) * LINE_HEIGHT;
+    const maxHeight = Math.max(minLines, maxLines) * LINE_HEIGHT;
+    const [contentHeight, setContentHeight] = useState(minHeight);
+    const height = Math.min(maxHeight, Math.max(minHeight, contentHeight));
+
+    /**
+     * Web autosize measures the node, native reads `onContentSizeChange`.
+     *
+     * They are not interchangeable: react-native-web reports `scrollHeight`,
+     * which never falls below the height already applied, so a field grown to six
+     * lines and then emptied would stay six lines tall. `useTextareaAutosize`
+     * collapses the node to measure it only when the draft may have got SHORTER —
+     * collapsing on every keystroke re-laid-out the whole page three times a key.
+     */
+    useTextareaAutosize(localRef, text, {
+      enabled: IS_WEB,
+      height,
+      minHeight,
+      onMeasure: setContentHeight,
+    });
+
+    const onContentSizeChange = useCallback(
+      (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+        if (IS_WEB) return;
+        setContentHeight(event.nativeEvent.contentSize.height);
+      },
+      [],
+    );
+
+    const trimmed = text.trim();
+    const hasAttachments = !!attachments && attachments.length > 0;
+    const showSend = canSend ?? (trimmed.length > 0 || hasAttachments);
+
+    const submit = useCallback(() => {
+      if (disabled || !showSend) return;
+      onSend?.(text);
+      if (value === undefined) setText('');
+    }, [disabled, showSend, onSend, text, value, setText]);
+
+    const openSuggestions = !!suggestions && suggestions.length > 0;
+
+    const onKeyPress = useCallback(
+      (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+        if (!IS_WEB) return;
+        const native = event.nativeEvent as WebKeyEvent;
+        // An IME candidate window is using the same keys; committing a
+        // composition must never send the half-written word behind it.
+        if (native.isComposing) return;
+        const mod = native.metaKey === true || native.ctrlKey === true;
+
+        if (openSuggestions && (native.key === 'ArrowDown' || native.key === 'ArrowUp')) {
+          event.preventDefault();
+          const count = suggestions?.length ?? 0;
+          const step = native.key === 'ArrowDown' ? 1 : -1;
+          const from = activeIndex < 0 ? (step > 0 ? -1 : 0) : activeIndex;
+          onActiveIndexChange?.((from + step + count) % count);
+          return;
+        }
+        if (native.key === 'Escape') {
+          event.preventDefault();
+          onEscape?.();
+          return;
+        }
+        if (native.key === 'ArrowUp' && text.length === 0) {
+          event.preventDefault();
+          onEditLast?.();
+          return;
+        }
+        if (native.key !== 'Enter') return;
+
+        if (openSuggestions && activeIndex >= 0) {
+          const picked = suggestions?.[activeIndex];
+          if (picked && !picked.disabled) {
+            event.preventDefault();
+            onSelectSuggestion?.(picked, activeIndex);
+            return;
+          }
+        }
+        if (sendOn === 'enter' ? native.shiftKey !== true && !mod : mod) {
+          event.preventDefault();
+          submit();
+        }
+      },
+      [
+        activeIndex,
+        onActiveIndexChange,
+        onEditLast,
+        onEscape,
+        onSelectSuggestion,
+        openSuggestions,
+        sendOn,
+        submit,
+        suggestions,
+        text.length,
+      ],
+    );
+
+    const bar: WebCssStyle = {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      gap: 2,
+      minHeight: CONTROL_SIZE + BAR_PADDING * 2,
+      borderRadius: BAR_RADIUS,
+      borderWidth: 1,
+      borderColor: palette.border,
+      // A disabled bar changes its FILL rather than its opacity. Dimming the
+      // container compounds with each control's own disabled opacity — 0.55 × 0.4
+      // put the send disc at 0.22, which reads as a rendering fault rather than a
+      // state.
+      backgroundColor: disabled ? palette.inset : palette.surface,
+      paddingLeft: BAR_PADDING,
+      paddingRight: BAR_PADDING,
+      paddingTop: BAR_PADDING,
+      paddingBottom: BAR_PADDING,
+      '--bloom-chat-composer-ring': palette.focusRing,
+    };
+
+    const NoticeIcon = noticeIcon ?? RiForbidLine;
+
+    return (
+      <View
+        accessibilityLabel={accessibilityLabel}
+        style={[{ width: '100%', flexDirection: 'column', gap: 6 }, style]}
+        testID={testID}>
+        {openSuggestions ? (
+          <SuggestionList
+            kind={suggestionKind}
+            suggestions={suggestions ?? []}
+            activeIndex={activeIndex}
+            onActiveIndexChange={onActiveIndexChange}
+            onSelectSuggestion={onSelectSuggestion}
+            testID={testID ? `${testID}-suggestions` : undefined}
+          />
+        ) : null}
+
+        {banner}
+
+        {hasAttachments ? (
+          <ComposerAttachmentStrip
+            attachments={attachments ?? []}
+            onRemove={onRemoveAttachment}
+            testID={testID ? `${testID}-attachments` : undefined}
+          />
+        ) : null}
+
+        {recorder ?? (
+          <View style={bar} testID={testID ? `${testID}-bar` : undefined}>
+            {notice !== undefined ? (
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  gap: 8,
+                  flexGrow: 1,
+                  minHeight: CONTROL_SIZE,
+                  paddingLeft: 12,
+                  paddingRight: 12,
+                }}
+                testID={testID ? `${testID}-notice` : undefined}>
+                {typeof notice === 'string' ? (
+                  <>
+                    <NoticeIcon width={16} height={16} fill={palette.iconSecondary} />
+                    <Text
+                      variant="body-2-regular"
+                      numberOfLines={2}
+                      style={{ color: palette.textSecondary, textAlign: 'center' }}>
+                      {notice}
+                    </Text>
+                  </>
+                ) : (
+                  notice
+                )}
+              </View>
+            ) : (
+              <>
+                {leading ??
+                  (onAttachPress ? (
+                    <ComposerIconButton
+                      icon={RiAddLine}
+                      accessibilityLabel={labels.attach}
+                      onPress={onAttachPress}
+                      disabled={disabled}
+                      iconSize={22}
+                      testID={testID ? `${testID}-attach` : undefined}
+                    />
+                  ) : null)}
+
+                <View
+                  style={{
+                    flexGrow: 1,
+                    flexShrink: 1,
+                    justifyContent: 'center',
+                    minHeight: CONTROL_SIZE,
+                    paddingLeft: 6,
+                    paddingRight: 6,
+                  }}>
+                  <TextInput
+                    ref={setFieldRef}
+                    {...dataHook('bloomChatComposerInput')}
+                    accessibilityLabel={labels.input}
+                    multiline
+                    editable={!disabled}
+                    value={text}
+                    onChangeText={setText}
+                    onKeyPress={onKeyPress}
+                    onContentSizeChange={onContentSizeChange}
+                    onFocus={onFocus}
+                    onBlur={onBlur}
+                    placeholder={placeholder}
+                    placeholderTextColor={palette.textPlaceholder}
+                    selectionColor={palette.accent}
+                    cursorColor={palette.accent}
+                    scrollEnabled={height >= maxHeight}
+                    style={{
+                      width: '100%',
+                      height,
+                      maxHeight,
+                      padding: 0,
+                      margin: 0,
+                      ...TYPE_SCALE['body-regular'],
+                      fontFamily: IS_WEB ? 'var(--bloom-font-sans)' : 'Inter',
+                      color: disabled ? palette.textSecondary : palette.text,
+                      backgroundColor: 'transparent',
+                    }}
+                    testID={testID ? `${testID}-input` : undefined}
+                  />
+                </View>
+
+                {onCameraPress ? (
+                  <ComposerIconButton
+                    icon={RiCameraLine}
+                    accessibilityLabel={labels.camera}
+                    onPress={onCameraPress}
+                    disabled={disabled}
+                    testID={testID ? `${testID}-camera` : undefined}
+                  />
+                ) : null}
+
+                {emojiSlot ??
+                  (onEmojiPress ? (
+                    <ComposerIconButton
+                      icon={RiEmotionLine}
+                      accessibilityLabel={labels.emoji}
+                      onPress={onEmojiPress}
+                      disabled={disabled}
+                      testID={testID ? `${testID}-emoji` : undefined}
+                    />
+                  ) : null)}
+
+                <View style={{ width: CONTROL_SIZE, height: CONTROL_SIZE, marginLeft: 2 }}>
+                  <SwapLayer shown={showSend}>
+                    <ComposerIconButton
+                      icon={RiSendPlaneLine}
+                      tone="accent"
+                      accessibilityLabel={labels.send}
+                      onPress={submit}
+                      disabled={disabled}
+                      iconSize={18}
+                      testID={testID ? `${testID}-send` : undefined}
+                    />
+                  </SwapLayer>
+                  <SwapLayer shown={!showSend}>
+                    <ComposerIconButton
+                      icon={RiMic2Line}
+                      accessibilityLabel={labels.mic}
+                      onPress={onMicPress}
+                      onPressIn={onMicPressIn}
+                      onPressOut={onMicPressOut}
+                      disabled={disabled}
+                      testID={testID ? `${testID}-mic` : undefined}
+                    />
+                  </SwapLayer>
+                </View>
+              </>
+            )}
+          </View>
+        )}
+
+        {showKeyboardHint && IS_WEB && notice === undefined ? (
+          <Text
+            variant="caption-2-regular"
+            style={{ color: palette.textPlaceholder, paddingLeft: 14 }}>
+            {sendOn === 'enter' ? labels.enterHint : labels.modEnterHint}
+          </Text>
+        ) : null}
+      </View>
+    );
+  }
+
+  return ChatComposer;
+}