@repzo/widget-react-native 1.0.0 → 1.0.4

package/src/ui/components/InAppNotification.tsx

@@ -0,0 +1,225 @@
+/**
+ * The card that floats over the host app when a team reply arrives while the
+ * messenger is closed — Intercom's in-app notification. It never times out:
+ * tapping it opens the conversation, swiping it left or right dismisses it
+ * (the thread stays unread). The store takes it down on its own once the
+ * messenger opens or the thread is read.
+ *
+ * Pure JS gestures (PanResponder), so hosts need no gesture library.
+ */
+
+import { useEffect, useMemo, useRef } from 'react';
+import {
+  AccessibilityInfo,
+  Animated,
+  PanResponder,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  useWindowDimensions,
+  type AccessibilityActionEvent,
+} from 'react-native';
+
+import { formatLabel } from '../../i18n';
+import type { InAppNotification as InAppNotificationData } from '../../types';
+import { useReduceMotion } from '../hooks/use-reduce-motion';
+import { fontSize, palette, radius, shadows, spacing, withAlpha } from '../styles/theme';
+import { START_ALIGN } from '../utils/rtl';
+import { Avatar } from './Avatar';
+
+/** Share of the card's width a drag must travel to count as a dismiss. */
+const DISMISS_DISTANCE_RATIO = 0.35;
+/** A quick flick dismisses even when it travels less than that. */
+const DISMISS_VELOCITY = 0.6;
+
+interface InAppNotificationProps {
+  notification: InAppNotificationData;
+  /** Brand color — the avatar's background when the agent has no photo. */
+  color: string;
+  bottomInset: number;
+  labels: {
+    replyFrom: string;
+    newReply: string;
+    attachment: string;
+    openHint: string;
+    dismiss: string;
+  };
+  onOpen: (conversationId: string) => void;
+  onDismiss: () => void;
+}
+
+export function InAppNotification({
+  notification,
+  color,
+  bottomInset,
+  labels,
+  onOpen,
+  onDismiss,
+}: InAppNotificationProps) {
+  const { width } = useWindowDimensions();
+  const reduceMotion = useReduceMotion();
+  // Read as "hold still" until the setting is known (see useReduceMotion).
+  const animate = reduceMotion === false;
+
+  const entry = useRef(new Animated.Value(animate ? 0 : 1)).current;
+  const dragX = useRef(new Animated.Value(0)).current;
+
+  const preview = notification.preview || (notification.hasAttachments ? labels.attachment : '');
+  const sender = notification.senderName
+    ? formatLabel(labels.replyFrom, { name: notification.senderName })
+    : labels.newReply;
+  const accessibilityLabel = [preview, sender].filter(Boolean).join(', ');
+
+  // Mounted once per reply (the provider keys it by message id), so this runs
+  // for every new card: slide it in and tell screen-reader users it arrived.
+  useEffect(() => {
+    if (animate) {
+      Animated.spring(entry, {
+        toValue: 1,
+        useNativeDriver: true,
+        speed: 16,
+        bounciness: 4,
+      }).start();
+    }
+    AccessibilityInfo.announceForAccessibility(accessibilityLabel);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const panResponder = useMemo(() => {
+    const settle = () =>
+      Animated.spring(dragX, { toValue: 0, useNativeDriver: true, bounciness: 6 }).start();
+
+    return PanResponder.create({
+      // Capture so a horizontal drag wins over the Pressable underneath; taps
+      // and vertical movement still reach it.
+      onMoveShouldSetPanResponderCapture: (_, gesture) =>
+        Math.abs(gesture.dx) > 8 && Math.abs(gesture.dx) > Math.abs(gesture.dy) * 1.5,
+      onPanResponderMove: (_, gesture) => dragX.setValue(gesture.dx),
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderRelease: (_, gesture) => {
+        const farEnough = Math.abs(gesture.dx) > width * DISMISS_DISTANCE_RATIO;
+        const fastEnough = Math.abs(gesture.vx) > DISMISS_VELOCITY;
+        if (!farEnough && !fastEnough) {
+          settle();
+          return;
+        }
+        const direction = (gesture.dx || gesture.vx) < 0 ? -1 : 1;
+        Animated.timing(dragX, {
+          toValue: direction * width,
+          duration: animate ? 180 : 0,
+          useNativeDriver: true,
+        }).start(() => onDismiss());
+      },
+      onPanResponderTerminate: settle,
+    });
+  }, [animate, dragX, onDismiss, width]);
+
+  const handleAccessibilityAction = (event: AccessibilityActionEvent) => {
+    if (event.nativeEvent.actionName === 'dismiss') onDismiss();
+    if (event.nativeEvent.actionName === 'activate') onOpen(notification.conversationId);
+  };
+
+  const opacity = Animated.multiply(
+    entry,
+    dragX.interpolate({
+      inputRange: [-width, 0, width],
+      outputRange: [0, 1, 0],
+      extrapolate: 'clamp',
+    })
+  );
+  const translateY = entry.interpolate({ inputRange: [0, 1], outputRange: [spacing.lg, 0] });
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={[styles.wrapper, { bottom: bottomInset + spacing.md }]}>
+      <Animated.View
+        {...panResponder.panHandlers}
+        style={[styles.card, { opacity, transform: [{ translateX: dragX }, { translateY }] }]}>
+        <Pressable
+          onPress={() => onOpen(notification.conversationId)}
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
+          accessibilityHint={labels.openHint}
+          accessibilityActions={[
+            { name: 'activate' },
+            { name: 'dismiss', label: labels.dismiss },
+          ]}
+          onAccessibilityAction={handleAccessibilityAction}
+          style={({ pressed }) => [styles.row, pressed && styles.pressed]}>
+          <Avatar
+            avatar={notification.senderAvatar}
+            name={notification.senderName}
+            color={color}
+            size={40}
+            style={styles.avatar}
+          />
+          <View style={styles.text}>
+            {preview ? (
+              <Text numberOfLines={2} style={styles.preview}>
+                {preview}
+              </Text>
+            ) : null}
+            <Text numberOfLines={1} style={styles.sender}>
+              {sender}
+            </Text>
+          </View>
+        </Pressable>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    paddingHorizontal: spacing.lg,
+    alignItems: 'center',
+    // Above the host's navigator even when the provider is mounted before it.
+    zIndex: 1000,
+    elevation: 1000,
+  },
+  card: {
+    width: '100%',
+    maxWidth: 480,
+    borderRadius: radius.xl,
+    backgroundColor: palette.text,
+    ...shadows.floating,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    minHeight: 64,
+    paddingVertical: spacing.md,
+    paddingHorizontal: spacing.lg,
+    borderRadius: radius.xl,
+  },
+  pressed: {
+    opacity: 0.85,
+  },
+  avatar: {
+    borderWidth: 1,
+    borderColor: withAlpha(palette.white, 0.1),
+  },
+  text: {
+    flex: 1,
+    minWidth: 0,
+    gap: 2,
+  },
+  preview: {
+    color: palette.white,
+    fontSize: fontSize.body,
+    fontWeight: '600',
+    lineHeight: 20,
+    textAlign: START_ALIGN,
+  },
+  sender: {
+    color: withAlpha(palette.white, 0.64),
+    fontSize: fontSize.meta,
+    textAlign: START_ALIGN,
+  },
+});

package/src/ui/components/TeamAvatars.tsx

@@ -0,0 +1,58 @@
+/**
+ * Up to three overlapping teammate avatars — the Messenger header when no
+ * teammate has joined yet, and the "Waiting for a teammate" row (Intercom-style).
+ * Falls back to a single placeholder avatar when the workspace sent none.
+ */
+
+import { StyleSheet, View } from 'react-native';
+
+import type { TeamAvatar } from '../../types';
+import { palette } from '../styles/theme';
+import { Avatar } from './Avatar';
+
+interface TeamAvatarsProps {
+  avatars: TeamAvatar[];
+  size?: number;
+  color?: string;
+  /** Ring between overlapping avatars; matches the surface behind them. */
+  ringColor?: string;
+  translucent?: boolean;
+}
+
+export function TeamAvatars({
+  avatars,
+  size = 32,
+  color = palette.ink,
+  ringColor = palette.white,
+  translucent = false,
+}: TeamAvatarsProps) {
+  if (avatars.length === 0) {
+    return <Avatar size={size} color={color} translucent={translucent} />;
+  }
+  const ring = Math.max(1.5, size * 0.06);
+  return (
+    <View style={styles.row} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+      {avatars.slice(0, 3).map((avatar, index) => (
+        <View
+          key={`${avatar.initials}-${index}`}
+          style={[
+            styles.slot,
+            {
+              marginStart: index === 0 ? 0 : -size * 0.3,
+              borderRadius: (size + ring * 2) / 2,
+              borderWidth: ring,
+              borderColor: ringColor,
+              zIndex: 3 - index,
+            },
+          ]}>
+          <Avatar avatar={avatar.avatarUrl} name={avatar.initials} size={size} color={color} translucent={translucent} />
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center' },
+  slot: { overflow: 'hidden' },
+});

package/src/ui/components/icons.tsx

@@ -313,3 +313,40 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
 });
+
+/** A ring with two hands — the reply-time hint beside the team name. */
+export function ClockIcon({ size = 14, color = palette.textMuted, style }: IconProps) {
+  const thickness = Math.max(1.25, size * 0.1);
+  const hand: ViewStyle = {
+    position: 'absolute',
+    width: thickness,
+    borderRadius: thickness,
+    backgroundColor: color,
+    bottom: size / 2 - thickness / 2,
+  };
+  return (
+    <View style={[{ width: size, height: size }, styles.center, style]}>
+      <View
+        style={{
+          position: 'absolute',
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: thickness,
+          borderColor: color,
+        }}
+      />
+      <View style={[hand, { height: size * 0.32, left: size / 2 - thickness / 2 }]} />
+      <View
+        style={[
+          hand,
+          {
+            height: size * 0.24,
+            left: size / 2 - thickness / 2,
+            transform: [{ translateX: size * 0.1 }, { translateY: size * 0.04 }, { rotate: '-90deg' }],
+          },
+        ]}
+      />
+    </View>
+  );
+}

package/src/ui/screens/chat/ChatView.styles.ts

@@ -50,6 +50,36 @@ export const styles = StyleSheet.create({
     fontSize: fontSize.caption,
     marginTop: 1,
   },
+  headerReplyTime: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    marginTop: 1,
+  },
+  headerReplyTimeText: {
+    flexShrink: 1,
+    marginTop: 0,
+  },
+  waitingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.sm,
+    paddingVertical: spacing.sm,
+  },
+  waitingText: {
+    color: palette.textMuted,
+    fontSize: fontSize.caption,
+  },
+  joinedRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: spacing.xs,
+  },
+  joinedName: {
+    fontWeight: '700',
+    color: palette.ink,
+  },
   messagesContentEmpty: {
     flexGrow: 1,
     justifyContent: 'center',
@@ -108,6 +138,13 @@ export const styles = StyleSheet.create({
     marginBottom: 3,
     marginStart: spacing.xs,
   },
+  receiptText: {
+    alignSelf: 'flex-end',
+    marginTop: 3,
+    marginEnd: spacing.xs,
+    fontSize: 11,
+    color: palette.textSubtle,
+  },
   messageTime: {
     fontSize: 11,
     alignSelf: 'flex-end',
@@ -190,6 +227,20 @@ export const styles = StyleSheet.create({
     fontSize: fontSize.caption,
     marginTop: spacing.xs,
   },
+  deletedBubble: {
+    maxWidth: '80%',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.lg + 4,
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    borderColor: palette.border,
+  },
+  deletedText: {
+    color: palette.textMuted,
+    fontSize: fontSize.caption,
+    fontStyle: 'italic',
+  },
   systemRow: {
     alignItems: 'center',
     paddingVertical: spacing.sm,
@@ -261,9 +312,28 @@ export const styles = StyleSheet.create({
     paddingRight: spacing.xs + 2,
     paddingVertical: spacing.xs + 2,
   },
+  // The paperclip sits where the text inset was; both ends match the send side.
+  composerWithAttach: {
+    paddingLeft: spacing.xs + 2,
+  },
   composerFocused: {
     backgroundColor: palette.white,
   },
+  attachButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  composerNotice: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.caption,
+    lineHeight: fontSize.caption * 1.4,
+    color: palette.danger,
+    marginBottom: spacing.sm,
+    paddingHorizontal: spacing.xs,
+  },
   input: {
     textAlign: START_ALIGN,
     flex: 1,