@oxy.so/bloom 4.19.0 → 4.20.0

package/src/ai-chat/bindAiChat.tsx

@@ -4,7 +4,7 @@ import { AiChatContainerBase } from './AiChatContainer';
 import { AiChatFeedbackRowBase } from './AiChatFeedbackRowBase';
 import { AiChatGalleryPanelBase } from './AiChatGalleryPanelBase';
 import { AiChatImageGenerationBase } from './AiChatImageGenerationBase';
-import { AiChatAssistantMessageBase } from './AiChatMessages';
+import { AiChatAssistantMessageBase, AiChatUserMessageBase } from './AiChatMessages';
 import { AiChatPlatformContext, type AiChatPlatform } from './context';
 import type {
   AiChatAssistantMessageProps,
@@ -12,6 +12,7 @@ import type {
   AiChatFeedbackRowProps,
   AiChatGalleryPanelProps,
   AiChatImageGenerationProps,
+  AiChatUserMessageProps,
 } from './types';
 
 /**
@@ -29,6 +30,15 @@ export function bindAiChat(platform: AiChatPlatform) {
   }
   AiChatFeedbackRow.displayName = 'AiChatFeedbackRow';
 
+  function AiChatUserMessage(props: AiChatUserMessageProps) {
+    return (
+      <AiChatPlatformContext.Provider value={platform}>
+        <AiChatUserMessageBase {...props} />
+      </AiChatPlatformContext.Provider>
+    );
+  }
+  AiChatUserMessage.displayName = 'AiChatUserMessage';
+
   function AiChatAssistantMessage(props: AiChatAssistantMessageProps) {
     return (
       <AiChatPlatformContext.Provider value={platform}>
@@ -65,5 +75,12 @@ export function bindAiChat(platform: AiChatPlatform) {
   }
   AiChatContainer.displayName = 'AiChatContainer';
 
-  return { AiChatFeedbackRow, AiChatAssistantMessage, AiChatImageGeneration, AiChatGalleryPanel, AiChatContainer };
+  return {
+    AiChatFeedbackRow,
+    AiChatUserMessage,
+    AiChatAssistantMessage,
+    AiChatImageGeneration,
+    AiChatGalleryPanel,
+    AiChatContainer,
+  };
 }

package/src/ai-chat/index.ts

@@ -4,6 +4,7 @@ export {
   AiChatFeedbackRow,
   AiChatGalleryPanel,
   AiChatImageGeneration,
+  AiChatUserMessage,
 } from './AiChat';
 export { AiChatCodePanel } from './AiChatCodePanel';
 export { AiChatThread } from './AiChatContainer';
@@ -13,7 +14,6 @@ export {
   AiChatLinkChip,
   AiChatMessageLine,
   AiChatStrong,
-  AiChatUserMessage,
 } from './AiChatMessages';
 export { AiChatMobileHeader, AiChatResizeHandle, AiChatShell } from './AiChatShell';
 export { useAiChatChromeInsets, useAiChatShell } from './context';
@@ -27,6 +27,7 @@ export type {
   AiChatCodePanelProps,
   AiChatContainerLabels,
   AiChatContainerProps,
+  AiChatCopyResult,
   AiChatFeedbackLabels,
   AiChatFeedbackRowProps,
   AiChatGalleryPanelLabels,
@@ -46,5 +47,6 @@ export type {
   AiChatStrongProps,
   AiChatThreadHandle,
   AiChatThreadProps,
+  AiChatTurnAction,
   AiChatUserMessageProps,
 } from './types';

package/src/ai-chat/index.web.ts

@@ -9,6 +9,7 @@ export {
   AiChatFeedbackRow,
   AiChatGalleryPanel,
   AiChatImageGeneration,
+  AiChatUserMessage,
 } from './AiChat.web';
 export { AiChatCodePanel } from './AiChatCodePanel';
 export { AiChatThread } from './AiChatContainer';
@@ -18,7 +19,6 @@ export {
   AiChatLinkChip,
   AiChatMessageLine,
   AiChatStrong,
-  AiChatUserMessage,
 } from './AiChatMessages';
 export { AiChatMobileHeader, AiChatResizeHandle, AiChatShell } from './AiChatShell';
 export { useAiChatChromeInsets, useAiChatShell } from './context';
@@ -32,6 +32,7 @@ export type {
   AiChatCodePanelProps,
   AiChatContainerLabels,
   AiChatContainerProps,
+  AiChatCopyResult,
   AiChatFeedbackLabels,
   AiChatFeedbackRowProps,
   AiChatGalleryPanelLabels,
@@ -51,5 +52,6 @@ export type {
   AiChatStrongProps,
   AiChatThreadHandle,
   AiChatThreadProps,
+  AiChatTurnAction,
   AiChatUserMessageProps,
 } from './types';

package/src/ai-chat/shared.ts

@@ -176,7 +176,7 @@ const STYLE_ID = 'bloom-ai-chat-web-css';
  * - the split-flap countdown's two leaves (`flap-fall` / `flap-rise`);
  * - the generated image's feathered radial reveal, a registered `--bloom-ai-reveal`
  *   percentage transitioning 0% → 132% over 1550ms;
- * - the resize grip's hover reveal;
+ * - the resize grip's hover reveal, and a user turn's actions (pointer only);
  * - the composer field's placeholder colour;
  * - a document-scrolled thread out of the browser's scroll anchoring.
  */
@@ -260,6 +260,14 @@ export const AI_CHAT_WEB_CSS = `
 [data-bloom-ai-chat-grip-pill="dragging"] { opacity: 1; }
 [data-bloom-ai-chat-grip] { cursor: col-resize; touch-action: none; outline: none; }
 [data-bloom-ai-chat-dragging="on"] { cursor: col-resize; user-select: none; }
+@media (hover: hover) {
+  [data-bloom-ai-chat-turn] [data-bloom-ai-chat-turn-actions] {
+    opacity: 0;
+    transition: opacity ${TRANSITION_MS}ms ease;
+  }
+  [data-bloom-ai-chat-turn]:hover [data-bloom-ai-chat-turn-actions],
+  [data-bloom-ai-chat-turn]:focus-within [data-bloom-ai-chat-turn-actions] { opacity: 1; }
+}
 [data-bloom-ai-chat-chip] {
   display: inline-flex;
   max-width: calc(100% - 4px);
@@ -275,7 +283,8 @@ export const AI_CHAT_WEB_CSS = `
   [data-bloom-ai-chat-control],
   [data-bloom-ai-chat-tile] [data-bloom-ai-chat-scrim],
   [data-bloom-ai-chat-tile-image],
-  [data-bloom-ai-chat-grip] [data-bloom-ai-chat-grip-pill] { transition: none; }
+  [data-bloom-ai-chat-grip] [data-bloom-ai-chat-grip-pill],
+  [data-bloom-ai-chat-turn] [data-bloom-ai-chat-turn-actions] { transition: none; }
   [data-bloom-ai-chat-flap] { animation-duration: 1ms; animation-delay: 0ms; }
 }
 `;

package/src/ai-chat/types.ts

@@ -30,14 +30,47 @@ export interface AiChatFeedbackLabels {
   copied?: string;
 }
 
+/**
+ * What a copy handler reports. `void` (or `true`) is a copy that happened;
+ * `false` is one that did not. A promise is waited for: the confirmation shows
+ * once it resolves, and never if it resolves `false` or rejects.
+ */
+export type AiChatCopyResult = void | boolean | Promise<void | boolean>;
+
+/**
+ * One extra action on a turn — read aloud, regenerate, edit. Drawn with the
+ * feedback row's own button: a 16px glyph on a 28px square, a tooltip naming it.
+ */
+export interface AiChatTurnAction {
+  /** Stable React key, and the suffix of the button's `testID`. */
+  key: string;
+  /** The accessible name, and the tooltip's copy. */
+  label: string;
+  /** A Bloom icon component (`RiVolumeUpLine`, not `<RiVolumeUpLine />`). */
+  icon: AiChatIconComponent;
+  onPress: () => void;
+  /**
+   * Makes the action a TOGGLE (read aloud while it is speaking): `true` paints
+   * the hover surface and the primary glyph, and announces it pressed. Leave it
+   * undefined for a plain button — `false` announces "not pressed".
+   */
+  active?: boolean;
+  /** Dimmed to the shared disabled opacity, unfocusable, announced disabled. */
+  disabled?: boolean;
+}
+
 export interface AiChatFeedbackRowProps {
   onLike?: () => void;
   onDislike?: () => void;
   /**
-   * Copy handler. The glyph swaps to a check and the tooltip reads "Copied!" for
-   * 1.6s either way.
+   * Copy handler. The glyph swaps to a check and the tooltip reads "Copied!"
+   * for 1.6s once the copy has happened: at once for a handler that returns
+   * nothing (or `true`), after the promise resolves for an async one, and not
+   * at all when it returns or resolves `false`, throws or rejects.
    */
-  onCopy?: () => void;
+  onCopy?: () => AiChatCopyResult;
+  /** More buttons after copy, in order — read aloud, regenerate… */
+  actions?: ReadonlyArray<AiChatTurnAction>;
   labels?: AiChatFeedbackLabels;
   style?: StyleProp<ViewStyle>;
   testID?: string;
@@ -50,6 +83,13 @@ export interface AiChatFeedbackRowProps {
 export interface AiChatUserMessageProps {
   /** `AiChatMessageLine`s — or a string, wrapped in one. */
   children: ReactNode;
+  /**
+   * Buttons under the card, right-aligned — copy, edit. On a web pointer they
+   * fade in while the turn is hovered or holds focus; they stay in the tab order
+   * and the accessibility tree throughout, and on native (and touch web) they
+   * are always shown.
+   */
+  actions?: ReadonlyArray<AiChatTurnAction>;
   /** Skip the blur-in (a turn restored from history). Default `true`. */
   animate?: boolean;
   style?: StyleProp<ViewStyle>;
@@ -64,7 +104,7 @@ export interface AiChatAssistantMessageProps {
   children: ReactNode;
   /** The like / dislike / copy row under the reply. Default `true`. */
   feedback?: boolean;
-  /** Feedback handlers and labels. */
+  /** Feedback handlers, extra `actions` and labels. */
   feedbackProps?: Omit<AiChatFeedbackRowProps, 'style' | 'testID'>;
   /** Skip the staggered blur-in. Default `true`. */
   animate?: boolean;
@@ -141,7 +181,7 @@ export interface AiChatImageGenerationProps {
   /** Feedback handlers under the landed image. */
   onLike?: () => void;
   onDislike?: () => void;
-  onCopy?: () => void;
+  onCopy?: () => AiChatCopyResult;
   labels?: AiChatImageGenerationLabels;
   feedbackLabels?: AiChatFeedbackLabels;
   style?: StyleProp<ViewStyle>;

package/src/composer-panel/AttachmentStrip.tsx

@@ -10,6 +10,8 @@ import Animated, {
 import Svg, { Path } from 'react-native-svg';
 
 import { mixColor } from '../button/shared';
+import { RiErrorWarningLine } from '../icons/remix/RiErrorWarningLine';
+import { RiRefreshLine } from '../icons/remix/RiRefreshLine';
 import { Text } from '../typography';
 import type { WebCssStyle } from '../styles/web-view-style';
 import {
@@ -101,6 +103,41 @@ function TileDismiss({
   );
 }
 
+/**
+ * A failed tile's retry: a 24px disc on the card surface where the kind glyph
+ * sits (3, 4), a 14px refresh glyph in the error foreground, text-primary on
+ * hover.
+ */
+function TileRetry({ label, onPress, palette }: { label: string; onPress: () => void; palette: ComposerPalette }) {
+  const [hovered, setHovered] = useState(false);
+  const style: WebCssStyle = {
+    position: 'absolute',
+    top: 3,
+    left: 3,
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: palette.surface,
+    cursor: 'pointer',
+    '--bloom-composer-ring': palette.focusRing,
+  };
+  return (
+    <Pressable
+      {...dataHook('bloomComposerControl', 'offset')}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      onPress={onPress}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      hitSlop={4}
+      style={style}>
+      <RiRefreshLine width={14} height={14} fill={hovered ? palette.text : palette.errorText} />
+    </Pressable>
+  );
+}
+
 /** The upload percentage's box: top 3 / right 3, blurring out as it fades. */
 function percentStyle(inFlight: boolean): WebCssStyle {
   return {
@@ -123,7 +160,9 @@ interface TileProps {
   attachment: ComposerPanelAttachment;
   palette: ComposerPalette;
   onRemove?: () => void;
+  onRetry?: () => void;
   removeLabel: string;
+  retryLabel: string;
 }
 
 /**
@@ -134,9 +173,23 @@ interface TileProps {
  * percentage (9/16 medium, tabular; white over a photo, accent-500 otherwise)
  * sits at top 3 / right 3; once landed it blurs out as the dismiss blurs in on
  * the same spot.
+ *
+ * A FAILED tile (`error`) drops the ring and percentage and fills with the
+ * error subtle surface under an error-foreground border: the warning glyph (or
+ * the retry button) at (3, 4) and the message in 9/11 medium, two lines at
+ * most, from (5, 30). The dismiss shows as on a landed tile.
  */
-export const AttachmentTile = memo(function AttachmentTile({ attachment, palette, onRemove, removeLabel }: TileProps) {
-  const { progress } = attachment;
+export const AttachmentTile = memo(function AttachmentTile({
+  attachment,
+  palette,
+  onRemove,
+  onRetry,
+  removeLabel,
+  retryLabel,
+}: TileProps) {
+  const { error } = attachment;
+  const failed = !!error;
+  const progress = failed ? undefined : attachment.progress;
   const inFlight = progress !== undefined;
   const image = attachment.kind === 'image' ? attachment.src : undefined;
   const dash = inFlight && progress < 100 ? (Math.max(0, progress) / 100) * TILE_RING_LENGTH : TILE_RING_LENGTH + 2;
@@ -144,8 +197,8 @@ export const AttachmentTile = memo(function AttachmentTile({ attachment, palette
 
   return (
     <View
-      accessibilityLabel={attachment.name}
-      {...(IS_WEB ? { title: attachment.name } : {})}
+      accessibilityLabel={failed ? `${attachment.name}: ${error}` : attachment.name}
+      {...(IS_WEB ? { title: failed ? `${attachment.name}: ${error}` : attachment.name } : {})}
       style={{
         position: 'relative',
         width: TILE,
@@ -153,7 +206,7 @@ export const AttachmentTile = memo(function AttachmentTile({ attachment, palette
         flexShrink: 0,
         borderRadius: TILE_RADIUS,
         borderWidth: 1,
-        borderColor: palette.tileBorder,
+        borderColor: failed ? palette.errorText : palette.tileBorder,
       }}>
       {image ? (
         <View
@@ -196,6 +249,41 @@ export const AttachmentTile = memo(function AttachmentTile({ attachment, palette
         </View>
       )}
 
+      {failed ? (
+        <View
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            borderRadius: TILE_RADIUS - 1,
+            backgroundColor: palette.errorSurface,
+          }}>
+          {onRetry ? null : (
+            <View style={{ position: 'absolute', top: 4, left: 3, width: 24, height: 24, alignItems: 'center', justifyContent: 'center' }}>
+              <RiErrorWarningLine width={20} height={20} fill={palette.errorText} />
+            </View>
+          )}
+          <Text
+            numberOfLines={2}
+            style={{
+              position: 'absolute',
+              top: 30,
+              left: 5,
+              right: 5,
+              // 9px has no type-ramp step; spelled out literally.
+              fontSize: 9,
+              lineHeight: 11,
+              fontWeight: '500',
+              color: palette.errorText,
+            }}>
+            {error}
+          </Text>
+          {onRetry ? <TileRetry label={`${retryLabel} ${attachment.name}`} onPress={onRetry} palette={palette} /> : null}
+        </View>
+      ) : null}
+
       {/* Upload ring over the border: the svg spans the border box. */}
       <View
         pointerEvents="none"
@@ -288,7 +376,9 @@ interface StripProps {
   attachments: ReadonlyArray<ComposerPanelAttachment>;
   palette: ComposerPalette;
   onRemove?: (id: string) => void;
+  onRetry?: (id: string) => void;
   removeLabel: string;
+  retryLabel: string;
 }
 
 /**
@@ -296,7 +386,7 @@ interface StripProps {
  * scale 0.8 → 1, fade and un-blur on arrival over 280ms `cubic-bezier(0.22, 1,
  * 0.36, 1)`, and play it backwards on dismissal before leaving the row.
  */
-export function AttachmentStrip({ attachments, palette, onRemove, removeLabel }: StripProps) {
+export function AttachmentStrip({ attachments, palette, onRemove, onRetry, removeLabel, retryLabel }: StripProps) {
   const [leaving, setLeaving] = useState<ReadonlyArray<ComposerPanelAttachment>>([]);
   const previous = useRef(attachments);
 
@@ -330,7 +420,9 @@ export function AttachmentStrip({ attachments, palette, onRemove, removeLabel }:
             attachment={attachment}
             palette={palette}
             removeLabel={removeLabel}
+            retryLabel={retryLabel}
             onRemove={onRemove && !isLeaving ? () => onRemove(attachment.id) : undefined}
+            onRetry={onRetry && !isLeaving ? () => onRetry(attachment.id) : undefined}
           />
         </PresenceTile>
       ))}

package/src/composer-panel/ComposerPanelBase.tsx

@@ -50,6 +50,7 @@ const DEFAULT_LABELS: Required<ComposerPanelLabels> = {
   send: 'Send message',
   stop: 'Stop generating',
   remove: 'Remove',
+  retry: 'Retry',
 };
 
 /**
@@ -143,6 +144,7 @@ export function ComposerPanelBase({
   onListeningChange,
   attachments,
   onRemoveAttachment,
+  onAttachmentRetry,
   status,
   emptyAction,
   onKeyPress: onKeyPressProp,
@@ -235,7 +237,9 @@ export function ComposerPanelBase({
               attachments={attachments ?? []}
               palette={palette}
               onRemove={onRemoveAttachment}
+              onRetry={onAttachmentRetry}
               removeLabel={labels.remove}
+              retryLabel={labels.retry}
             />
           </View>
         </Collapse>

package/src/composer-panel/ComposerPillBase.tsx

@@ -690,6 +690,7 @@ const DEFAULT_PANEL_LABELS = {
   send: 'Send message',
   stop: 'Stop generating',
   remove: 'Remove',
+  retry: 'Retry',
 };
 
 /**

package/src/composer-panel/shared.ts

@@ -74,6 +74,9 @@ export interface ComposerPalette {
   accent500: string;
   /** `border-focus-ring`. */
   focusRing: string;
+  /** A failed tile: the error subtle surface and its paired foreground. */
+  errorSurface: string;
+  errorText: string;
   /** `shadow-xs`, `shadow-dropdown` and the card's raw Figma shadow. */
   shadowXs: string;
   shadowDropdown: string;
@@ -121,6 +124,8 @@ export function resolveComposerPalette(theme: Theme): ComposerPalette {
     accent400: c.primary,
     accent500: c.primarySubtleForeground,
     focusRing: c.primary,
+    errorSurface: c.errorSubtle,
+    errorText: c.errorSubtleForeground,
     shadowXs: dark ? BUTTON_SHADOW.dark : BUTTON_SHADOW.light,
     shadowDropdown: dark ? MENU_SHADOW.dark : MENU_SHADOW.light,
     shadowCard: '0 1px 0.5px 0 rgba(0, 0, 0, 0.02), 0 4px 2px 0 rgba(0, 0, 0, 0.02)',

package/src/composer-panel/types.ts

@@ -80,6 +80,13 @@ export interface ComposerPanelAttachment {
    * once the file has landed — that also reveals the dismiss.
    */
   progress?: number;
+  /**
+   * The upload failed, and why ("Too large", "Network error"). The tile turns
+   * to the error surface and shows this in place of the name; the ring and the
+   * percentage go (any `progress` is ignored) and the dismiss comes back. With
+   * `ComposerPanel`'s `onAttachmentRetry` it also gets a retry button.
+   */
+  error?: string;
 }
 
 // ---------------------------------------------------------------------------
@@ -195,6 +202,8 @@ export interface ComposerPanelLabels {
   stop?: string;
   /** Default `'Remove'` — prefixed to the file name on a tile's dismiss. */
   remove?: string;
+  /** Default `'Retry'` — prefixed to the file name on a failed tile's retry. */
+  retry?: string;
 }
 
 export interface ComposerPanelProps {
@@ -256,6 +265,8 @@ export interface ComposerPanelProps {
   /** Tiles above the prompt. Each one's `progress` drives its upload ring. */
   attachments?: ReadonlyArray<ComposerPanelAttachment>;
   onRemoveAttachment?: (id: string) => void;
+  /** Draws a retry button on every tile with an `error`; called with its id. */
+  onAttachmentRetry?: (id: string) => void;
 
   /** The tab on the card's top edge — typically `<ComposerPanelStatusTab />`. */
   status?: ReactNode;

package/src/composer-panel/use-attachment-queue.ts

@@ -4,8 +4,11 @@ import type { ComposerAttachmentsProps, ComposerPanelAttachment } from './types'
 
 const TICK_MS = 50;
 
-/** Anything carrying a progress value — the closed ring at 100 included — is still the queue's. */
-const inFlight = (attachment: ComposerPanelAttachment) => attachment.progress !== undefined;
+/**
+ * Anything carrying a progress value — the closed ring at 100 included — is
+ * still the queue's, unless it failed: a failed file is done with.
+ */
+const inFlight = (attachment: ComposerPanelAttachment) => attachment.progress !== undefined && !attachment.error;
 
 /** Keep the parent's order; keep our progress for files we already know. */
 function reconcile(

package/src/input-otp/InputOtp.tsx

@@ -291,7 +291,13 @@ export function InputOtp({
             autoFocus={autoFocus && index === 0}
             // Long enough to accept a full autofilled code in one box.
             maxLength={length}
-            selectTextOnFocus
+            // Typing into a filled box must REPLACE its digit, so the digit is
+            // selected on focus. Web's `selectTextOnFocus` does that. Android's
+            // does not: it selects on the input's next layout, and focusing a box
+            // lays nothing out, so the keystroke landed beside the old digit and
+            // `writeFrom` spread both across two boxes. Native selects in
+            // `onFocus` instead (see Search, OxyHQ/Mention#1126).
+            selectTextOnFocus={IS_WEB}
             caretHidden={false}
             editable={!disabled}
             accessibilityLabel={`Digit ${index + 1} of ${length}`}
@@ -300,7 +306,10 @@ export function InputOtp({
             value={digit === ' ' ? '' : digit}
             onChangeText={(text) => writeFrom(index, text)}
             onKeyPress={(event) => onKeyPress(event, index)}
-            onFocus={() => setFocusedIndex(index)}
+            onFocus={() => {
+              setFocusedIndex(index);
+              if (!IS_WEB && digit !== '' && digit !== ' ') inputsRef.current[index]?.setSelection(0, 1);
+            }}
             onBlur={() => setFocusedIndex((current) => (current === index ? null : current))}
             keyboardAppearance={theme.isDark ? 'dark' : 'light'}
             style={[