@repzo/widget-react-native 1.0.0 → 1.0.1

package/src/ui/components/AttachmentMenu.tsx

@@ -0,0 +1,132 @@
+/**
+ * The attach button's choice of source.
+ *
+ * iOS gets the native action sheet. Android has no equivalent (`Alert` caps at
+ * three buttons, and three sources plus Cancel is four), so it gets a small
+ * bottom sheet in its own transparent modal — which also lets the hardware
+ * back button close the sheet rather than the whole widget.
+ */
+
+import { ActionSheetIOS, Modal, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { useWidgetInsets } from '../hooks/use-widget-insets';
+import { fontSize, palette, radius, spacing } from '../styles/theme';
+import { START_ALIGN } from '../utils/rtl';
+
+export interface AttachmentMenuOption<K extends string> {
+  key: K;
+  label: string;
+}
+
+/**
+ * iOS only: shows the native sheet and calls `onSelect` with the chosen key
+ * (nothing on cancel). Returns false elsewhere, so the caller shows
+ * `AttachmentMenu` instead.
+ */
+export function showNativeAttachmentMenu<K extends string>(
+  options: AttachmentMenuOption<K>[],
+  cancelLabel: string,
+  onSelect: (key: K) => void
+): boolean {
+  if (Platform.OS !== 'ios') return false;
+  ActionSheetIOS.showActionSheetWithOptions(
+    { options: [...options.map((option) => option.label), cancelLabel], cancelButtonIndex: options.length },
+    (index) => {
+      const chosen = options[index];
+      if (chosen) onSelect(chosen.key);
+    }
+  );
+  return true;
+}
+
+interface AttachmentMenuProps<K extends string> {
+  visible: boolean;
+  options: AttachmentMenuOption<K>[];
+  cancelLabel: string;
+  onSelect: (key: K) => void;
+  onClose: () => void;
+}
+
+export function AttachmentMenu<K extends string>({
+  visible,
+  options,
+  cancelLabel,
+  onSelect,
+  onClose,
+}: AttachmentMenuProps<K>) {
+  const insets = useWidgetInsets();
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      statusBarTranslucent
+      onRequestClose={onClose}>
+      <Pressable
+        style={styles.backdrop}
+        onPress={onClose}
+        accessibilityRole="button"
+        accessibilityLabel={cancelLabel}
+      />
+      <View
+        style={[styles.sheet, { paddingBottom: insets.bottom + spacing.sm }]}
+        accessibilityViewIsModal>
+        {options.map((option) => (
+          <Pressable
+            key={option.key}
+            onPress={() => onSelect(option.key)}
+            accessibilityRole="button"
+            style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}>
+            <Text style={styles.rowLabel}>{option.label}</Text>
+          </Pressable>
+        ))}
+        <View style={styles.divider} />
+        <Pressable
+          onPress={onClose}
+          accessibilityRole="button"
+          style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}>
+          <Text style={[styles.rowLabel, styles.cancelLabel]}>{cancelLabel}</Text>
+        </Pressable>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.32)',
+  },
+  sheet: {
+    position: 'absolute',
+    start: 0,
+    end: 0,
+    bottom: 0,
+    backgroundColor: palette.white,
+    borderTopLeftRadius: radius.xl + 4,
+    borderTopRightRadius: radius.xl + 4,
+    paddingTop: spacing.sm,
+  },
+  row: {
+    minHeight: 52,
+    justifyContent: 'center',
+    paddingHorizontal: spacing.xl,
+  },
+  rowPressed: {
+    backgroundColor: palette.surfaceAlt,
+  },
+  rowLabel: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.body,
+    color: palette.ink,
+  },
+  cancelLabel: {
+    color: palette.textMuted,
+  },
+  divider: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: palette.border,
+    marginVertical: spacing.xs,
+  },
+});

package/src/ui/components/ImageViewer.tsx

@@ -0,0 +1,178 @@
+/**
+ * Full-screen viewer for image attachments, so a tap on a photo the agent sent
+ * stays inside the messenger instead of bouncing to the browser. Pinch-to-zoom
+ * uses the native ScrollView zoom (iOS); Android shows the image fitted.
+ */
+
+import { useState } from 'react';
+import {
+  ActivityIndicator,
+  Image,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+import { useWidgetInsets } from '../hooks/use-widget-insets';
+import { fontSize, palette, spacing } from '../styles/theme';
+import { CloseIcon } from './icons';
+
+export interface ImageViewerLabels {
+  close: string;
+  loadFailed: string;
+  openExternally: string;
+}
+
+interface ImageViewerProps {
+  image: { url: string; name: string } | null;
+  labels: ImageViewerLabels;
+  onClose: () => void;
+  /** Escape hatch when the image can't render here (e.g. unsupported format). */
+  onOpenExternally: (url: string) => void;
+}
+
+export function ImageViewer({ image, labels, onClose, onOpenExternally }: ImageViewerProps) {
+  const insets = useWidgetInsets();
+  // Keyed by URL so opening another image starts from a clean loading state.
+  const [status, setStatus] = useState<{ url: string | null; state: 'loading' | 'ready' | 'failed' }>(
+    { url: null, state: 'loading' }
+  );
+  const state = status.url === image?.url ? status.state : 'loading';
+
+  return (
+    <Modal
+      visible={!!image}
+      transparent
+      animationType="fade"
+      statusBarTranslucent
+      onRequestClose={onClose}>
+      <View style={styles.backdrop} accessibilityViewIsModal>
+        {image ? (
+          <ScrollView
+            style={styles.fill}
+            contentContainerStyle={styles.center}
+            maximumZoomScale={4}
+            minimumZoomScale={1}
+            centerContent
+            showsHorizontalScrollIndicator={false}
+            showsVerticalScrollIndicator={false}
+            bouncesZoom>
+            <Image
+              source={{ uri: image.url }}
+              style={styles.image}
+              resizeMode="contain"
+              accessibilityLabel={image.name}
+              accessibilityIgnoresInvertColors
+              onLoad={() => setStatus({ url: image.url, state: 'ready' })}
+              onError={() => setStatus({ url: image.url, state: 'failed' })}
+            />
+          </ScrollView>
+        ) : null}
+
+        {image && state === 'loading' ? (
+          <ActivityIndicator style={StyleSheet.absoluteFill} color={palette.white} />
+        ) : null}
+
+        {image && state === 'failed' ? (
+          <View style={[StyleSheet.absoluteFill, styles.center, styles.failed]}>
+            <Text style={styles.failedText}>{labels.loadFailed}</Text>
+            <Pressable
+              onPress={() => onOpenExternally(image.url)}
+              accessibilityRole="button"
+              style={({ pressed }) => [styles.externalButton, pressed && styles.pressed]}>
+              <Text style={styles.externalLabel}>{labels.openExternally}</Text>
+            </Pressable>
+          </View>
+        ) : null}
+
+        <View style={[styles.header, { paddingTop: insets.top + spacing.sm }]} pointerEvents="box-none">
+          <Text style={styles.title} numberOfLines={1}>
+            {image?.name ?? ''}
+          </Text>
+          <Pressable
+            onPress={onClose}
+            accessibilityRole="button"
+            accessibilityLabel={labels.close}
+            hitSlop={12}
+            style={({ pressed }) => [styles.closeButton, pressed && styles.pressed]}>
+            <CloseIcon size={20} color={palette.white} />
+          </Pressable>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: '#000000',
+  },
+  fill: {
+    flex: 1,
+  },
+  center: {
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  header: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    paddingHorizontal: spacing.lg,
+    paddingBottom: spacing.sm,
+    backgroundColor: 'rgba(0,0,0,0.45)',
+  },
+  title: {
+    flex: 1,
+    minWidth: 0,
+    color: palette.white,
+    fontSize: fontSize.body,
+    fontWeight: '600',
+  },
+  closeButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255,255,255,0.14)',
+  },
+  pressed: {
+    opacity: 0.7,
+  },
+  failed: {
+    gap: spacing.md,
+    paddingHorizontal: spacing.xxl,
+  },
+  failedText: {
+    color: palette.white,
+    fontSize: fontSize.body,
+    textAlign: 'center',
+  },
+  externalButton: {
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.sm,
+    borderRadius: 999,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(255,255,255,0.5)',
+  },
+  externalLabel: {
+    color: palette.white,
+    fontSize: fontSize.meta,
+    fontWeight: Platform.OS === 'ios' ? '600' : 'bold',
+  },
+});

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/screens/chat/ChatView.styles.ts

@@ -261,9 +261,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,