@oxy.so/bloom 2.10.0 → 2.11.0

package/src/chat-composer/ComposerAttachmentStrip.tsx

@@ -0,0 +1,181 @@
+/**
+ * The pending-attachment strip between the banner stack and the bar.
+ *
+ * The tile geometry and the rounded-rect progress path are `composer-panel`'s —
+ * imported rather than retyped, because a second ring drawn from a second path
+ * helper is how two composers end up with rings that close at different angles.
+ */
+import React from 'react';
+import { Image, ScrollView, View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+import { ringPath } from '../composer-panel/shared';
+import { RiCloseLine } from '../icons/remix/RiCloseLine';
+import { RiFileTextLine } from '../icons/remix/RiFileTextLine';
+import { useImageResolver } from '../image-resolver/context';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { ComposerIconButton } from './ComposerIconButton';
+import { TILE, TILE_RADIUS, resolveChatComposerPalette } from './shared';
+import type { ChatComposerAttachment, ComposerAttachmentStripProps } from './types';
+import { dataHook } from './web-hooks';
+
+function isUrl(value: string): boolean {
+  return /^(https?:)?\/\//.test(value) || value.startsWith('data:') || value.startsWith('file:');
+}
+
+function defaultRemoveLabel(attachment: ChatComposerAttachment): string {
+  return `Remove ${attachment.name}`;
+}
+
+function Tile({
+  attachment,
+  size,
+  onRemove,
+  removeLabel,
+  testID,
+}: {
+  attachment: ChatComposerAttachment;
+  size: number;
+  onRemove?: (id: string) => void;
+  removeLabel: (attachment: ChatComposerAttachment) => string;
+  testID?: string;
+}) {
+  const theme = useTheme();
+  const palette = resolveChatComposerPalette(theme);
+  const resolveImage = useImageResolver();
+  const Glyph = attachment.icon ?? RiFileTextLine;
+  const uploading = attachment.progress !== undefined;
+  const progress = Math.min(100, Math.max(0, attachment.progress ?? 0));
+  const radius = TILE_RADIUS - 1;
+  const path = ringPath(size, size, 1, radius);
+  // No `pathLength` on native, so the dash arithmetic needs the real length:
+  // four straight runs plus one full circle of the corner radius.
+  const length = 4 * (size - 2 - 2 * radius) + 2 * Math.PI * radius;
+
+  const uri =
+    attachment.source === undefined
+      ? undefined
+      : isUrl(attachment.source)
+        ? attachment.source
+        : resolveImage?.(attachment.source, 'thumb');
+
+  return (
+    <View style={{ width: size, gap: 4 }} testID={testID}>
+      {/* The clipped box and the ring are SIBLINGS, never nested. Inside the
+          bordered box an inset-0 layer is the PADDING box — `size - 2` — so a
+          ring drawn in the tile's own `size` coordinates lands 1px off and has
+          its last edge cut away by the same `overflow: hidden` that rounds the
+          photo. The symptom is a ring that stops three quarters of the way
+          round while the dash arithmetic says it is complete. */}
+      <View style={{ position: 'relative', width: size, height: size }}>
+        <View
+          style={{
+            width: size,
+            height: size,
+            borderRadius: TILE_RADIUS,
+            borderWidth: 1,
+            borderColor: palette.border,
+            backgroundColor: palette.inset,
+            alignItems: 'center',
+            justifyContent: 'center',
+            overflow: 'hidden',
+          }}>
+          {uri ? (
+            <Image
+              source={{ uri }}
+              accessibilityIgnoresInvertColors
+              style={{ width: size, height: size, opacity: uploading ? 0.6 : 1 }}
+            />
+          ) : (
+            <Glyph width={22} height={22} fill={palette.iconSecondary} />
+          )}
+        </View>
+        {uploading ? (
+          <View
+            {...dataHook('bloomChatComposerRing')}
+            pointerEvents="none"
+            style={{ position: 'absolute', top: 0, left: 0, width: size, height: size }}
+            testID={testID ? `${testID}-ring` : undefined}>
+            <Svg width={size} height={size}>
+              <Path
+                d={path}
+                fill="none"
+                stroke={palette.accent}
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeDasharray={`${(length * progress) / 100} ${length}`}
+              />
+            </Svg>
+          </View>
+        ) : null}
+      </View>
+      {onRemove && !uploading ? (
+        <View style={{ position: 'absolute', top: -6, right: -6 }}>
+          <ComposerIconButton
+            icon={RiCloseLine}
+            accessibilityLabel={removeLabel(attachment)}
+            onPress={() => onRemove(attachment.id)}
+            size={20}
+            iconSize={12}
+            style={{
+              backgroundColor: palette.surface,
+              borderWidth: 1,
+              borderColor: palette.border,
+            }}
+            testID={testID ? `${testID}-remove` : undefined}
+          />
+        </View>
+      ) : null}
+      <Text
+        variant="caption-2-regular"
+        numberOfLines={1}
+        style={{ color: uploading ? palette.accent : palette.textSecondary }}>
+        {uploading ? `${Math.round(progress)}%` : (attachment.caption ?? attachment.name)}
+      </Text>
+    </View>
+  );
+}
+
+export function ComposerAttachmentStrip({
+  attachments,
+  onRemove,
+  size = TILE,
+  removeLabel = defaultRemoveLabel,
+  style,
+  testID,
+  accessibilityLabel = 'Attachments',
+}: ComposerAttachmentStripProps) {
+  if (attachments.length === 0) return null;
+  return (
+    <ScrollView
+      {...dataHook('bloomChatComposerScroll')}
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      accessibilityLabel={accessibilityLabel}
+      contentContainerStyle={{
+        flexDirection: 'row',
+        gap: 10,
+        // The remove disc hangs 6px past the tile on both axes and a horizontal
+        // ScrollView clips its cross axis (`overflow-y: hidden` on web), so the
+        // top pad is the disc's overhang plus its border — not a rhythm value.
+        paddingLeft: 8,
+        paddingRight: 8,
+        paddingTop: 10,
+        paddingBottom: 2,
+      }}
+      style={[{ flexGrow: 0 }, style]}
+      testID={testID}>
+      {attachments.map((attachment) => (
+        <Tile
+          key={attachment.id}
+          attachment={attachment}
+          size={size}
+          onRemove={onRemove}
+          removeLabel={removeLabel}
+          testID={testID ? `${testID}-${attachment.id}` : undefined}
+        />
+      ))}
+    </ScrollView>
+  );
+}

package/src/chat-composer/ComposerBanner.tsx

@@ -0,0 +1,156 @@
+/**
+ * The stack above the input: a reply / edit / forward preview, or the one-line
+ * `note` a slow-mode countdown and a scheduled send use.
+ *
+ * Every banner is the same row — rail, glyph, optional thumbnail, two lines of
+ * text, a close button — because they are the same affordance ("the next
+ * message is about THIS, and here is how to get out of it"). `note` drops the
+ * rail and the surface, which is the difference between "you are in a mode" and
+ * "here is a fact about sending".
+ */
+import React from 'react';
+import { Image, View } from 'react-native';
+
+import { RiCloseLine } from '../icons/remix/RiCloseLine';
+import { useImageResolver } from '../image-resolver/context';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { ComposerIconButton } from './ComposerIconButton';
+import {
+  BANNER_ICONS,
+  BANNER_RADIUS,
+  BANNER_RAIL_WIDTH,
+  resolveChatComposerPalette,
+} from './shared';
+import type { ComposerBannerProps } from './types';
+
+/** A URL passes through; a bare id goes to the app's `ImageResolver`. */
+function isUrl(value: string): boolean {
+  return /^(https?:)?\/\//.test(value) || value.startsWith('data:') || value.startsWith('file:');
+}
+
+export function ComposerBanner({
+  kind,
+  title,
+  preview,
+  thumbnail,
+  icon,
+  accentColor,
+  onClose,
+  closeLabel = 'Cancel',
+  trailing,
+  style,
+  testID,
+  accessibilityLabel,
+}: ComposerBannerProps) {
+  const theme = useTheme();
+  const palette = resolveChatComposerPalette(theme);
+  const resolveImage = useImageResolver();
+  const Icon = icon ?? BANNER_ICONS[kind];
+  const accent = accentColor ?? palette.accent;
+  const note = kind === 'note';
+
+  const thumbUri =
+    thumbnail === undefined ? undefined : isUrl(thumbnail) ? thumbnail : resolveImage?.(thumbnail, 'thumb');
+
+  if (note) {
+    return (
+      <View
+        accessibilityRole="text"
+        accessibilityLabel={accessibilityLabel ?? (preview ? `${title}. ${preview}` : title)}
+        style={[
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            paddingLeft: 10,
+            paddingRight: 6,
+            paddingTop: 2,
+            paddingBottom: 2,
+          },
+          style,
+        ]}
+        testID={testID}>
+        <Icon width={14} height={14} fill={palette.iconSecondary} />
+        <Text variant="caption-1-regular" numberOfLines={1} style={{ color: palette.textSecondary, flexShrink: 1 }}>
+          {title}
+        </Text>
+        {preview ? (
+          <Text variant="caption-1-regular" numberOfLines={1} style={{ color: palette.textPlaceholder, flexShrink: 1 }}>
+            {preview}
+          </Text>
+        ) : null}
+        <View style={{ flexGrow: 1 }} />
+        {trailing}
+        {onClose ? (
+          <ComposerIconButton
+            icon={RiCloseLine}
+            accessibilityLabel={closeLabel}
+            onPress={onClose}
+            size={24}
+            iconSize={14}
+          />
+        ) : null}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel ?? (preview ? `${title}. ${preview}` : title)}
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 10,
+          borderRadius: BANNER_RADIUS,
+          backgroundColor: palette.accentSoft,
+          paddingLeft: 8,
+          paddingRight: 4,
+          paddingTop: 6,
+          paddingBottom: 6,
+        },
+        style,
+      ]}
+      testID={testID}>
+      <View
+        testID={testID ? `${testID}-rail` : undefined}
+        style={{
+          width: BANNER_RAIL_WIDTH,
+          alignSelf: 'stretch',
+          minHeight: 32,
+          borderRadius: 2,
+          backgroundColor: accent,
+        }}
+      />
+      <Icon width={18} height={18} fill={accent} />
+      {thumbUri ? (
+        <Image
+          source={{ uri: thumbUri }}
+          accessibilityIgnoresInvertColors
+          style={{ width: 32, height: 32, borderRadius: 8, backgroundColor: palette.inset }}
+        />
+      ) : null}
+      <View style={{ flexShrink: 1, flexGrow: 1, gap: 1 }}>
+        <Text variant="body-2-medium" numberOfLines={1} style={{ color: accent }}>
+          {title}
+        </Text>
+        {preview ? (
+          <Text variant="body-2-regular" numberOfLines={1} style={{ color: palette.textSecondary }}>
+            {preview}
+          </Text>
+        ) : null}
+      </View>
+      {trailing}
+      {onClose ? (
+        <ComposerIconButton
+          icon={RiCloseLine}
+          accessibilityLabel={closeLabel}
+          onPress={onClose}
+          size={28}
+          iconSize={16}
+        />
+      ) : null}
+    </View>
+  );
+}

package/src/chat-composer/ComposerIconButton.tsx

@@ -0,0 +1,161 @@
+/**
+ * The composer's round control: a transparent disc that paints only on hover,
+ * press and focus, or the accent-gradient send disc at `tone="accent"`.
+ *
+ * No press SCALE anywhere — hover and press are a colour change, which is the
+ * fleet-wide rule and the only feedback that survives reduced motion unchanged.
+ */
+import React, { useState } from 'react';
+import { Pressable, View } from 'react-native';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+
+import { paintToCssImage } from '../button/shared';
+import type { ButtonStatePaint } from '../button/shared';
+import { useTheme } from '../theme/use-theme';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { CONTROL_SIZE, resolveChatComposerPalette } from './shared';
+import type { ComposerIconButtonProps } from './types';
+import { dataHook, IS_WEB } from './web-hooks';
+import { DISABLED_OPACITY } from '../styles/tokens';
+
+let gradientId = 0;
+
+/** A two-stop vertical fill: a CSS gradient on web, an SVG rect on native. */
+function GradientFill({
+  paint,
+  opacity = 1,
+  radius,
+}: {
+  paint: ButtonStatePaint;
+  opacity?: number;
+  radius: number;
+}) {
+  const id = React.useMemo(() => `bloom-chat-send-${gradientId++}`, []);
+  const [top, bottom] = paint.gradient ?? [paint.background, paint.background];
+  if (IS_WEB) {
+    const style: WebCssStyle = {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: 9999,
+      backgroundImage: paintToCssImage(paint),
+      opacity,
+      transitionProperty: 'opacity',
+      transitionDuration: '150ms',
+      transitionTimingFunction: 'ease',
+    };
+    return <View pointerEvents="none" style={style} />;
+  }
+  return (
+    <View
+      pointerEvents="none"
+      style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, opacity }}>
+      <Svg width="100%" height="100%">
+        <Defs>
+          <LinearGradient id={id} x1="0" y1="0" x2="0" y2="1">
+            <Stop offset="0" stopColor={top} />
+            <Stop offset="1" stopColor={bottom} />
+          </LinearGradient>
+        </Defs>
+        <Rect x="0" y="0" width="100%" height="100%" rx={radius} fill={`url(#${id})`} />
+      </Svg>
+    </View>
+  );
+}
+
+export function ComposerIconButton({
+  icon: Icon,
+  accessibilityLabel,
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut,
+  disabled = false,
+  tone = 'plain',
+  size = CONTROL_SIZE,
+  iconSize,
+  style,
+  testID,
+  accessibilityRole = 'button',
+  'aria-expanded': ariaExpanded,
+  'aria-haspopup': ariaHasPopup,
+}: ComposerIconButtonProps) {
+  const theme = useTheme();
+  const palette = resolveChatComposerPalette(theme);
+  const [hovered, setHovered] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const accent = tone === 'accent';
+  const glyph = iconSize ?? Math.max(16, size - 16);
+
+  const paint = accent
+    ? disabled
+      ? palette.send.disabled
+      : pressed
+        ? palette.send.active
+        : palette.send.rest
+    : undefined;
+
+  const box: WebCssStyle = {
+    position: 'relative',
+    width: size,
+    height: size,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 9999,
+    opacity: disabled ? DISABLED_OPACITY : 1,
+    backgroundColor: accent
+      ? 'transparent'
+      : pressed
+        ? palette.hoverStrong
+        : hovered
+          ? palette.hover
+          : 'transparent',
+    cursor: disabled ? 'auto' : 'pointer',
+    '--bloom-chat-composer-ring': palette.focusRing,
+  };
+
+  return (
+    <Pressable
+      {...dataHook('bloomChatComposerControl')}
+      accessibilityRole={accessibilityRole}
+      accessibilityLabel={accessibilityLabel}
+      aria-expanded={ariaExpanded}
+      aria-haspopup={ariaHasPopup}
+      aria-disabled={disabled || undefined}
+      accessibilityState={{ disabled, expanded: ariaExpanded }}
+      disabled={disabled}
+      onPress={disabled ? undefined : onPress}
+      onLongPress={disabled ? undefined : onLongPress}
+      onPressIn={() => {
+        setPressed(true);
+        if (!disabled) onPressIn?.();
+      }}
+      onPressOut={() => {
+        setPressed(false);
+        if (!disabled) onPressOut?.();
+      }}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      style={[box, style]}
+      testID={testID}>
+      {paint ? <GradientFill paint={paint} radius={size / 2} /> : null}
+      {paint && !disabled ? (
+        <GradientFill
+          paint={palette.send.hover}
+          opacity={hovered && !pressed ? 1 : 0}
+          radius={size / 2}
+        />
+      ) : null}
+      {/* Its own positioned box, so the glyph paints above the absolute fills. */}
+      <View pointerEvents="none" style={{ position: 'relative', width: glyph, height: glyph }}>
+        <Icon
+          width={glyph}
+          height={glyph}
+          fill={accent ? palette.onAccent : palette.iconPrimary}
+        />
+      </View>
+    </Pressable>
+  );
+}