@oxy.so/bloom 6.4.0 → 7.0.0

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

@@ -0,0 +1,258 @@
+import { useEffect, useState } from 'react';
+import { Platform, useWindowDimensions } from 'react-native';
+import Animated, {
+  cancelAnimation,
+  Easing,
+  runOnJS,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated';
+import { AgentAvatar } from '../agent-avatar';
+import { Drawing } from '../agent-avatar/SvgDrawing';
+import { useIsRtl } from '../hooks/use-is-rtl';
+import { OverlayRoot } from '../overlay';
+import { StyledView } from '../styles/styled-primitives';
+import { useChatComponents } from './context';
+import {
+  avatarFlightPoint,
+  badgeFlightTarget,
+  measureAvatar,
+  type AvatarHandoffState,
+  type AvatarRect,
+  type TravelingAvatar,
+} from './handoff';
+const AnimatedView = Animated.createAnimatedComponent(StyledView);
+function FlyingAvatar({
+  avatar,
+  target,
+  index,
+  kind,
+  answering,
+  onArrive,
+}: {
+  avatar: TravelingAvatar;
+  target: AvatarRect;
+  index: number;
+  kind: 'group' | 'first';
+  answering: boolean;
+  onArrive: (id: string) => void;
+}) {
+  const reduced = useReducedMotion(),
+    progress = useSharedValue(0);
+  const duration = kind === 'group' ? 700 : answering ? 800 : 950,
+    delay = kind === 'group' ? index * 80 : answering ? 0 : index * 120;
+  useEffect(() => {
+    progress.value = withDelay(
+      reduced ? 0 : delay,
+      withTiming(
+        1,
+        {
+          duration: reduced ? 0 : duration,
+          easing:
+            kind === 'group' ? Easing.bezier(0.22, 1, 0.36, 1) : Easing.linear,
+        },
+        (finished) => {
+          if (finished) runOnJS(onArrive)(avatar.agent.id);
+        },
+      ),
+    );
+    return () => cancelAnimation(progress);
+  }, [progress, reduced, delay, duration, kind, onArrive, avatar.agent.id]);
+  const animated = useAnimatedStyle(() => {
+    const point = avatarFlightPoint(
+      avatar.from,
+      target,
+      progress.value,
+      kind === 'first',
+    );
+    const t = progress.value * progress.value * (3 - 2 * progress.value);
+    return {
+      transform: [
+        { translateX: point.x },
+        { translateY: point.y },
+        { scaleX: point.width / avatar.from.width },
+        { scaleY: point.height / avatar.from.height },
+      ],
+      opacity:
+        kind === 'first' && !answering && t >= 0.78
+          ? Math.max(0, (1 - t) / 0.22)
+          : 1,
+    };
+  }, [avatar.from, target, progress, kind, answering]);
+  return (
+    <AnimatedView
+      pointerEvents="none"
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      aria-hidden
+      testID={`flying-agent-${avatar.agent.id}`}
+      style={[
+        {
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          width: avatar.from.width,
+          height: avatar.from.height,
+          transformOrigin: 'top left',
+        },
+        animated,
+      ]}
+    >
+      {avatar.drawing ? (
+        <Drawing context={avatar.drawing} size={avatar.from.width} />
+      ) : (
+        <AgentAvatar
+          config={avatar.agent.avatar}
+          paused
+          size={avatar.from.width}
+        />
+      )}
+    </AnimatedView>
+  );
+}
+
+/** Window coordinates keep the journey outside both the disappearing panel and chat scroller. */
+export function AvatarHandoff({
+  handoff,
+  resolveTarget,
+  origin,
+  onArrive,
+  onFinish,
+}: {
+  handoff: AvatarHandoffState;
+  resolveTarget: (id: string) => import('react-native').View | undefined;
+  origin: AvatarRect | null;
+  onArrive: (id: string) => void;
+  onFinish: () => void;
+}) {
+  const { FlightHost } = useChatComponents();
+  const rtl = useIsRtl();
+  const [destinations, setDestinations] = useState<Record<string, AvatarRect>>(
+    {},
+  );
+  const { width, height } = useWindowDimensions();
+  useEffect(() => {
+    let disposed = false,
+      frame = 0,
+      attempts = 0;
+    const measure = async () => {
+      const values = await Promise.all(
+        handoff.avatars.map(async (avatar) => {
+          const rect = await measureAvatar(resolveTarget(avatar.agent.id));
+          return [
+            avatar.agent.id,
+            rect &&
+            handoff.kind === 'first' &&
+            avatar.agent.id !== handoff.responderId
+              ? badgeFlightTarget(rect, rtl)
+              : rect,
+          ] as const;
+        }),
+      );
+      if (disposed) return;
+      const next = Object.fromEntries(
+        values.filter(
+          (pair): pair is readonly [string, AvatarRect] => pair[1] !== null,
+        ),
+      );
+      setDestinations((previous) =>
+        JSON.stringify(previous) === JSON.stringify(next) ? previous : next,
+      );
+      attempts++;
+      if (
+        Object.keys(next).length !== handoff.avatars.length &&
+        attempts >= 60
+      ) {
+        onFinish();
+        return;
+      }
+      if (attempts < 90) frame = requestAnimationFrame(measure);
+    };
+    frame = requestAnimationFrame(measure);
+    return () => {
+      disposed = true;
+      cancelAnimationFrame(frame);
+    };
+  }, [
+    handoff.chatId,
+    handoff.kind,
+    resolveTarget,
+    onFinish,
+    width,
+    height,
+    rtl,
+  ]);
+  const relative = (rect: AvatarRect): AvatarRect =>
+    Platform.OS === 'web' || !origin
+      ? rect
+      : { ...rect, x: rect.x - origin.x, y: rect.y - origin.y };
+  const waiting = handoff.avatars.filter(
+    (a) => a.agent.id !== handoff.responderId,
+  );
+  return (
+    <FlightHost>
+      <OverlayRoot testID="avatar-handoff-overlay">
+        <StyledView
+          pointerEvents="none"
+          style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }}
+        >
+          {handoff.avatars
+            .filter((a) => !handoff.arrived.includes(a.agent.id))
+            .map((avatar, index) => {
+              const destination = destinations[avatar.agent.id];
+              const target = destination ? relative(destination) : undefined;
+              const traveling = { ...avatar, from: relative(avatar.from) };
+              return target ? (
+                <FlyingAvatar
+                  key={avatar.agent.id}
+                  avatar={traveling}
+                  target={target}
+                  index={
+                    handoff.kind === 'first'
+                      ? Math.max(
+                          0,
+                          waiting.findIndex(
+                            (a) => a.agent.id === avatar.agent.id,
+                          ),
+                        )
+                      : index
+                  }
+                  kind={handoff.kind}
+                  answering={avatar.agent.id === handoff.responderId}
+                  onArrive={onArrive}
+                />
+              ) : (
+                <StyledView
+                  key={avatar.agent.id}
+                  pointerEvents="none"
+                  style={{
+                    position: 'absolute',
+                    left: traveling.from.x,
+                    top: traveling.from.y,
+                    width: avatar.from.width,
+                    height: avatar.from.height,
+                  }}
+                >
+                  {avatar.drawing ? (
+                    <Drawing
+                      context={avatar.drawing}
+                      size={avatar.from.width}
+                    />
+                  ) : (
+                    <AgentAvatar
+                      config={avatar.agent.avatar}
+                      size={avatar.from.width}
+                      paused
+                    />
+                  )}
+                </StyledView>
+              );
+            })}
+        </StyledView>
+      </OverlayRoot>
+    </FlightHost>
+  );
+}

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

@@ -0,0 +1,186 @@
+import { useEffect, type ReactNode } from 'react';
+import { Platform, useWindowDimensions } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { CloseButton } from '../button';
+import { useDialogContext } from '../dialog/context';
+import { DIALOG_MESSAGES } from '../dialog/messages';
+import { useIsRtl } from '../hooks/use-is-rtl';
+import { useCommonMessages } from '../locale/common-messages';
+import { useMessages } from '../locale/messages';
+import { StyledPressable, StyledView } from '../styles/styled-primitives';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { Text } from '../typography';
+import { ScrollSurface } from './ScrollSurface';
+
+const AnimatedView = Animated.createAnimatedComponent(StyledView);
+
+/** Author the panel within Dialog's existing focus, dismissal and stacking boundary. */
+export function ChatDialogFrame({
+  title,
+  mode,
+  preview,
+  footer,
+  children,
+}: {
+  title: string;
+  mode: 'center' | 'editor' | 'navigation';
+  preview?: ReactNode;
+  footer?: ReactNode;
+  children: ReactNode;
+}) {
+  const { close, isClosing } = useDialogContext();
+  const reduced = useReducedMotion(),
+    rtl = useIsRtl();
+  const common = useCommonMessages(),
+    { messages } = useMessages(DIALOG_MESSAGES);
+  const { height } = useWindowDimensions();
+  const progress = useSharedValue(mode === 'center' || reduced ? 1 : 0);
+  useEffect(() => {
+    progress.value = withTiming(isClosing ? 0 : 1, {
+      duration: reduced ? 0 : mode === 'center' ? 240 : 280,
+      easing: Easing.bezier(0.22, 1, 0.36, 1),
+    });
+  }, [isClosing, mode, progress, reduced]);
+  const fade = useAnimatedStyle(
+    () => ({ opacity: progress.value }),
+    [progress],
+  );
+  const slide = useAnimatedStyle(
+    () => ({
+      transform: [
+        {
+          translateX:
+            mode === 'editor' ? (rtl ? -32 : 32) * (1 - progress.value) : 0,
+        },
+      ],
+    }),
+    [mode, progress, rtl],
+  );
+  const backdropClass =
+    mode === 'center'
+      ? 'absolute inset-0 bg-black/70'
+      : 'absolute inset-0 bg-background-secondary-default/70 backdrop-blur-sm';
+  return (
+    <StyledView
+      className={
+        mode === 'center'
+          ? 'flex h-full w-full items-center justify-center p-4'
+          : mode === 'editor'
+            ? 'flex h-full w-full items-end'
+            : 'flex h-full w-full items-start p-3'
+      }
+      style={{ flex: 1, minHeight: 0 }}
+    >
+      <AnimatedView
+        className={backdropClass}
+        style={[
+          Platform.OS === 'web' && mode !== 'center'
+            ? ({ backdropFilter: 'blur(4px)' } as WebCssStyle)
+            : undefined,
+          fade,
+        ]}
+      >
+        <StyledPressable
+          accessibilityRole="button"
+          tabIndex={-1}
+          accessibilityLabel={messages.dismissNamed(title)}
+          disabled={!!isClosing}
+          onPress={() => close()}
+          className="absolute inset-0"
+        />
+      </AnimatedView>
+      {mode === 'center' ? (
+        <AnimatedView
+          className="w-full outline-none"
+          style={[
+            {
+              maxWidth: preview ? 520 : 440,
+              flexShrink: 1,
+              maxHeight: height * 0.85,
+            },
+            fade,
+          ]}
+        >
+          <StyledView
+            className="flex max-h-[85dvh] flex-col overflow-hidden rounded-3xl border border-border-button-default bg-background-primary-default p-4 shadow-lg outline-none"
+            style={{ maxHeight: height * 0.85, flexShrink: 1 }}
+          >
+            <StyledView className="mb-4 flex shrink-0 items-center justify-between flex-row">
+              <Text
+                accessibilityRole="header"
+                className="text-headline-medium text-text-primary"
+              >
+                {title}
+              </Text>
+              <CloseButton
+                accessibilityLabel={common.labelFor(common.close, title)}
+                size="sm"
+                onPress={() => close()}
+              />
+            </StyledView>
+            {preview}
+            <ScrollSurface
+              className="flex min-h-0 flex-auto flex-col"
+              contentClassName="h-auto min-h-0 flex-auto p-1"
+              surface="primary"
+              label={title}
+            >
+              {children}
+            </ScrollSurface>
+            {footer && (
+              <StyledView className="mt-4 shrink-0">{footer}</StyledView>
+            )}
+          </StyledView>
+        </AnimatedView>
+      ) : mode === 'editor' ? (
+        <AnimatedView
+          className="h-full w-[356px] max-w-full bg-background-full p-2 outline-none"
+          style={[
+            { width: 356, maxWidth: '100%', height: '100%' },
+            slide,
+            fade,
+          ]}
+        >
+          <StyledView className="h-full outline-none">{children}</StyledView>
+        </AnimatedView>
+      ) : (
+        <StyledView
+          className="relative h-full outline-none"
+          style={{ height: '100%' }}
+        >
+          {children}
+          <CloseButton
+            accessibilityLabel={common.labelFor(common.close, title)}
+            className="absolute -end-10 top-2"
+            style={{ position: 'absolute', insetInlineEnd: -40, top: 8 }}
+            onPress={() => close()}
+          />
+        </StyledView>
+      )}
+    </StyledView>
+  );
+}
+
+/** Preserve the source paragraphs’ emphasis without fixing translated word order. */
+export function SupportCopy({ text, term }: { text: string; term: string }) {
+  const index = text.indexOf(term);
+  return (
+    <Text className="text-body-regular text-text-secondary">
+      {index < 0 ? (
+        text
+      ) : (
+        <>
+          {text.slice(0, index)}
+          <Text className="text-text-primary font-bold">{term}</Text>
+          {text.slice(index + term.length)}
+        </>
+      )}
+    </Text>
+  );
+}