@oxy.so/bloom 6.4.0 → 7.0.1

package/src/multi-agent-chat/ReplyRow.tsx

@@ -0,0 +1,188 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { Platform, type View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { AgentAvatar } from '../agent-avatar';
+import { useTrackEvents } from '../agent-creator/use-track-events';
+import { useIsRtl } from '../hooks/use-is-rtl';
+import { useMessages } from '../locale/messages';
+import { StyledPressable, StyledView } from '../styles/styled-primitives';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import type { Agent } from './data';
+import type { AvatarNodes } from './handoff';
+import { MULTI_AGENT_CHAT_MESSAGES, formatChatMessage } from './messages';
+const AnimatedView = Animated.createAnimatedComponent(StyledView);
+export function ReplyHeader({
+  agent,
+  thinking,
+  workingKey,
+  arriving = false,
+  nodes,
+  onEdit,
+}: {
+  agent: Agent;
+  thinking: boolean;
+  workingKey?: string;
+  arriving?: boolean;
+  nodes?: AvatarNodes;
+  onEdit: () => void;
+}) {
+  const { messages } = useMessages(MULTI_AGENT_CHAT_MESSAGES);
+  const { colors } = useTheme(),
+    reduced = useReducedMotion();
+  const [initialWorkingKey] = useState(() =>
+    thinking
+      ? (workingKey ?? agent.id)
+          .split('')
+          .reduce((key, char) => (key * 31 + char.charCodeAt(0)) >>> 0, 0)
+      : undefined,
+  );
+  const rtl = useIsRtl();
+  const progress = useSharedValue(thinking ? 1 : 0);
+  useEffect(() => {
+    progress.value = withTiming(thinking ? 1 : 0, {
+      duration: reduced ? 0 : 380,
+      easing: Easing.bezier(0.22, 1, 0.36, 1),
+    });
+  }, [thinking, reduced, progress]);
+  const avatar = useAnimatedStyle(
+    () => ({
+      width: 20 + 12 * progress.value,
+      height: 20 + 12 * progress.value,
+      opacity: arriving ? 0 : 1,
+    }),
+    [progress, arriving],
+  );
+  const art = useAnimatedStyle(
+    () => ({ transform: [{ scale: 0.625 + 0.375 * progress.value }] }),
+    [progress],
+  );
+  const name = useAnimatedStyle(
+    () => ({
+      opacity: 1 - progress.value,
+      transform: [{ translateX: 4 * progress.value }],
+    }),
+    [progress],
+  );
+  const status = useAnimatedStyle(
+    () => ({ opacity: progress.value }),
+    [progress],
+  );
+  return (
+    <StyledPressable
+      accessibilityRole="button"
+      accessibilityLabel={
+        thinking
+          ? formatChatMessage(messages.agentThinking, agent.name)
+          : formatChatMessage(messages.editAgent, agent.name)
+      }
+      onPress={onEdit}
+      className="my-1 min-w-0 flex-row items-center gap-1 rounded-lg"
+    >
+      <AnimatedView
+        ref={(node: View | null) => {
+          if (nodes) {
+            if (node) nodes.set(agent.id, node);
+            else nodes.delete(agent.id);
+          }
+        }}
+        collapsable={false}
+        style={[{ position: 'relative', flexShrink: 0 }, avatar]}
+      >
+        <AnimatedView
+          style={[
+            {
+              position: 'absolute',
+              insetInlineStart: 0,
+              top: 0,
+              width: 32,
+              height: 32,
+              transformOrigin: rtl ? 'top right' : 'top left',
+            },
+            art,
+          ]}
+        >
+          <AgentAvatar
+            config={agent.avatar}
+            size={32}
+            workingKey={arriving ? undefined : initialWorkingKey}
+            workingCycles={2}
+            label={agent.name}
+          />
+        </AnimatedView>
+      </AnimatedView>
+      <StyledView style={{ opacity: arriving ? 0 : 1 }}>
+        <AnimatedView
+          aria-hidden={!thinking}
+          role={thinking ? 'status' : undefined}
+          style={[
+            { position: 'absolute', insetInlineStart: 0, top: 0 },
+            status,
+          ]}
+        >
+          <Text variant="body-2-medium" style={{ color: colors.textSecondary }}>
+            {messages.thinking}
+          </Text>
+        </AnimatedView>
+        <AnimatedView aria-hidden={thinking} style={name}>
+          <Text variant="body-2-medium" style={{ color: colors.textSecondary }}>
+            {agent.name}
+          </Text>
+        </AnimatedView>
+      </StyledView>
+    </StyledPressable>
+  );
+}
+/** Mouse hover and keyboard focus reveal actions; touch platforms keep them available. */
+export function ReplyRow({
+  children,
+  header,
+  actions,
+}: {
+  children: ReactNode;
+  header?: ReactNode;
+  actions: ReactNode;
+}) {
+  const ref = useRef<View>(null),
+    reduced = useReducedMotion();
+  const [hovered, setHovered] = useState(false),
+    [focused, setFocused] = useState(false);
+  useTrackEvents(ref, undefined, undefined, setFocused);
+  const show = Platform.OS !== 'web' || hovered || focused,
+    opacity = useSharedValue(show ? 1 : 0);
+  useEffect(() => {
+    opacity.value = withTiming(show ? 1 : 0, { duration: reduced ? 0 : 150 });
+  }, [show, reduced, opacity]);
+  const animated = useAnimatedStyle(
+    () => ({ opacity: opacity.value }),
+    [opacity],
+  );
+  return (
+    <StyledView
+      ref={ref}
+      onPointerEnter={() => setHovered(true)}
+      onPointerLeave={() => setHovered(false)}
+      className="group/reply mx-3 mt-3 w-fit max-w-[min(520px,calc(100%-24px))] text-body-regular"
+      style={{
+        maxWidth: Platform.OS === 'web' ? undefined : '94%',
+        alignSelf: 'flex-start',
+      }}
+    >
+      {children}
+      <StyledView className="flex items-center justify-between gap-2 px-3 flex-row">
+        {header}
+        {actions && (
+          <AnimatedView style={[{ flexShrink: 0 }, animated]}>
+            {actions}
+          </AnimatedView>
+        )}
+      </StyledView>
+    </StyledView>
+  );
+}

package/src/multi-agent-chat/ScrollSurface.tsx

@@ -0,0 +1,122 @@
+import React, { useRef, useState, type ReactNode, type Ref } from 'react';
+import { Platform, ScrollView, type ScrollViewProps } from 'react-native';
+import { styled } from 'react-native-css';
+import { EdgeScrim } from '../page-header/EdgeScrim';
+import { StyledView } from '../styles/styled-primitives';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+const ScrollSurfaceBase: React.ComponentType<
+  Pick<ScrollViewProps, 'style' | 'contentContainerStyle'>
+> = ScrollView;
+const StyledScrollView: React.ComponentType<
+  ScrollViewProps & {
+    className?: string;
+    contentContainerClassName?: string;
+    ref?: Ref<ScrollView>;
+  }
+> = styled(ScrollSurfaceBase, {
+  className: 'style',
+  contentContainerClassName: 'contentContainerStyle',
+});
+export function ScrollSurface({
+  children,
+  className,
+  contentClassName,
+  surface = 'secondary',
+  scrollRef,
+  label,
+  fadeBottom = false,
+  chatId: _chatId,
+  ...props
+}: {
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+  surface?: 'primary' | 'secondary' | 'full';
+  scrollRef?: Ref<ScrollView>;
+  label?: string;
+  chatId?: string;
+  fadeBottom?: boolean;
+} & ScrollViewProps) {
+  const { colors } = useTheme(),
+    [fade, setFade] = useState(0),
+    [bottomFade, setBottomFade] = useState(0),
+    height = useRef(0),
+    content = useRef(0),
+    offset = useRef(0);
+  const update = () => {
+    setFade(Math.min(1, Math.max(0, offset.current) / 24));
+    setBottomFade(
+      Math.min(
+        1,
+        Math.max(0, content.current - height.current - offset.current) / 24,
+      ),
+    );
+  };
+  const color =
+    surface === 'full'
+      ? colors.background
+      : surface === 'primary'
+        ? colors.card
+        : colors.backgroundSecondary;
+  return (
+    <StyledView className={`relative min-h-0 ${className ?? ''}`}>
+      <StyledScrollView
+        ref={scrollRef}
+        accessibilityLabel={label}
+        showsVerticalScrollIndicator={false}
+        className="h-full overflow-y-auto overscroll-contain outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-focus-ring [scrollbar-width:none]"
+        contentContainerClassName={contentClassName}
+        {...props}
+        onLayout={(event) => {
+          height.current = event.nativeEvent.layout.height;
+          update();
+          props.onLayout?.(event);
+        }}
+        onContentSizeChange={(w, h) => {
+          content.current = h;
+          update();
+          props.onContentSizeChange?.(w, h);
+        }}
+        onScroll={(event) => {
+          offset.current = event.nativeEvent.contentOffset.y;
+          update();
+          props.onScroll?.(event);
+        }}
+        scrollEventThrottle={16}
+      >
+        {children}
+      </StyledScrollView>
+      {[false, ...(fadeBottom ? [true] : [])].map((bottom) => (
+        <StyledView
+          key={String(bottom)}
+          pointerEvents="none"
+          aria-hidden
+          style={{
+            position: 'absolute',
+            insetInlineStart: 0,
+            insetInlineEnd: 0,
+            [bottom ? 'bottom' : 'top']: 0,
+            height: 24,
+            opacity: bottom ? bottomFade : fade,
+          }}
+        >
+          {Platform.OS === 'web' &&
+            [1, 4].map((blur, i) => (
+              <StyledView
+                key={blur}
+                className={`absolute inset-x-0 ${bottom ? 'bottom-0' : 'top-0'} ${i ? 'h-4 backdrop-blur-[4px]' : 'h-6 backdrop-blur-[1px]'}`}
+                style={
+                  {
+                    backdropFilter: `blur(${blur}px)`,
+                    maskImage: `linear-gradient(to ${bottom ? 'top' : 'bottom'}, black, transparent)`,
+                  } as WebCssStyle
+                }
+              />
+            ))}
+          <EdgeScrim color={color} edge={bottom ? 'bottom' : 'top'} />
+        </StyledView>
+      ))}
+    </StyledView>
+  );
+}

package/src/multi-agent-chat/SelectedAgentPreview.tsx

@@ -0,0 +1,143 @@
+import { useCallback, useEffect } from 'react';
+import { type View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { AgentAvatar } from '../agent-avatar';
+import { AvatarDrawingObserver } from '../agent-avatar/context';
+import type { DrawingContext } from '../agent-avatar/drawing';
+import { RiGroupLine } from '../icons/remix/RiGroupLine';
+import { useMessages } from '../locale/messages';
+import { StyledView } from '../styles/styled-primitives';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import type { Agent } from './data';
+import {
+  previewAvatarGeometry,
+  retainAvatarDrawing,
+  type AvatarNodes,
+} from './handoff';
+import { MULTI_AGENT_CHAT_MESSAGES, formatChatMessage } from './messages';
+const AnimatedView = Animated.createAnimatedComponent(StyledView);
+function PreviewAvatar({
+  agent,
+  index,
+  count,
+  hidden,
+  nodes,
+}: {
+  agent: Agent;
+  index: number;
+  count: number;
+  hidden: boolean;
+  nodes: AvatarNodes;
+}) {
+  const observeDrawing = useCallback(
+    (drawing: DrawingContext) => retainAvatarDrawing(nodes, agent.id, drawing),
+    [nodes, agent.id],
+  );
+  const captureNode = useCallback(
+    (node: View | null) => {
+      if (node) nodes.set(agent.id, node);
+      else {
+        nodes.delete(agent.id);
+        retainAvatarDrawing(nodes, agent.id, null);
+      }
+    },
+    [nodes, agent.id],
+  );
+  const reduced = useReducedMotion();
+  const progress = useSharedValue(reduced ? 1 : 0);
+  const { size, x, y } = previewAvatarGeometry(count, index);
+  useEffect(() => {
+    progress.value = withTiming(1, {
+      duration: reduced ? 0 : 300,
+      easing: Easing.bezier(0.22, 1, 0.36, 1),
+    });
+  }, [progress, reduced]);
+  const animated = useAnimatedStyle(
+    () => ({
+      opacity: hidden ? 0 : progress.value,
+      transform: [
+        { translateX: x },
+        { translateY: y + (1 - progress.value) * 16 },
+        { scale: 0.5 + 0.5 * progress.value },
+      ],
+    }),
+    [progress, hidden, x, y],
+  );
+  return (
+    <AnimatedView
+      ref={captureNode}
+      collapsable={false}
+      pointerEvents="none"
+      aria-hidden
+      style={[
+        { position: 'absolute', left: 0, top: 0, width: size, height: size },
+        animated,
+      ]}
+    >
+      <AvatarDrawingObserver.Provider value={observeDrawing}>
+        <AgentAvatar config={agent.avatar} size={size} />
+      </AvatarDrawingObserver.Provider>
+    </AnimatedView>
+  );
+}
+export function SelectedAgentPreview({
+  agents,
+  nodes,
+  hidden = [],
+  caption = false,
+}: {
+  agents: Agent[];
+  nodes: AvatarNodes;
+  hidden?: string[];
+  caption?: boolean;
+}) {
+  const { messages } = useMessages(MULTI_AGENT_CHAT_MESSAGES);
+  const { colors } = useTheme();
+  return (
+    <StyledView
+      className="shrink-0 items-center gap-2"
+      style={{ paddingBottom: caption ? 20 : 0 }}
+    >
+      <StyledView
+        role="img"
+        accessibilityLabel={
+          agents.length
+            ? formatChatMessage(
+                messages.selectedAgents,
+                agents.map((a) => a.name).join(', '),
+              )
+            : messages.chooseYourTeammates
+        }
+        style={{ position: 'relative', width: 160, height: 112 }}
+      >
+        {!agents.length && (
+          <StyledView className="h-full items-center justify-center">
+            <RiGroupLine size="3xl" fill={colors.textTertiary} />
+          </StyledView>
+        )}
+        {agents.map((agent, index) => (
+          <PreviewAvatar
+            key={agent.id}
+            agent={agent}
+            index={index}
+            count={agents.length}
+            hidden={hidden.includes(agent.id)}
+            nodes={nodes}
+          />
+        ))}
+      </StyledView>
+      {caption && (
+        <Text variant="body-regular" style={{ color: colors.textSecondary }}>
+          {messages.chooseWhoSJoiningTheConversation}
+        </Text>
+      )}
+    </StyledView>
+  );
+}