@repzo/widget-react-native 1.0.0 → 1.0.4

package/src/ui/WidgetProvider.tsx

@@ -18,12 +18,20 @@ import {
 } from 'react-native';
 
 import { isTerminalErrorCode } from '../api/client';
+import {
+  formatBytes,
+  getAttachmentSources,
+  MAX_ATTACHMENT_BYTES,
+  MAX_ATTACHMENTS,
+  pickAttachments,
+} from '../attachments/pickers';
 import { controller } from '../controller';
-import { buildLabels, createTranslator, formatLabel } from '../i18n';
+import { buildLabels, createTranslator, formatLabel, localizeWelcomeText } from '../i18n';
 import { useWidgetState } from '../state/use-widget-state';
-import type { AgentUiAction, WidgetAttachment, WidgetSpaceType } from '../types';
+import type { AgentUiAction, OutgoingAttachment, WidgetSpaceType } from '../types';
 import { WidgetErrorBoundary } from './components/ErrorBoundary';
 import { AlertIcon } from './components/icons';
+import { InAppNotification } from './components/InAppNotification';
 import { OutboundMessageCard } from './components/OutboundMessageCard';
 import { WidgetPanel } from './components/WidgetPanel';
 import { useKeyboardOverlap } from './hooks/use-keyboard-overlap';
@@ -61,7 +69,20 @@ export function RepzoWidgetProvider({
   // not, so they own the top inset.
   const topInset = Platform.OS === 'ios' && presentationStyle === 'pageSheet' ? 0 : insets.top;
 
-  const theme = useMemo(() => buildTheme(state.config), [state.config]);
+  const localizedConfig = useMemo(
+    () => localizeWelcomeText(state.config, state.locale),
+    [state.config, state.locale]
+  );
+  const theme = useMemo(() => buildTheme(localizedConfig), [localizedConfig]);
+  // Teammate photos can be server-relative media paths.
+  const teamAvatars = useMemo(
+    () =>
+      (state.config?.teamAvatars ?? []).map((avatar) => ({
+        ...avatar,
+        avatarUrl: store.client.resolveUrl(avatar.avatarUrl),
+      })),
+    [state.config, store]
+  );
   const labels = useMemo(
     () => buildLabels(createTranslator(state.config, state.locale)),
     [state.config, state.locale]
@@ -108,16 +129,40 @@ export function RepzoWidgetProvider({
     [labels]
   );
 
+  const attachLabels = useMemo(
+    () => ({
+      button: labels.attachFile,
+      photoLibrary: labels.attachPhotoLibrary,
+      takePhoto: labels.attachTakePhoto,
+      file: labels.attachChooseFile,
+      cancel: labels.cancel,
+      remove: labels.removeAttachment,
+      tooLarge: formatLabel(labels.attachmentTooLarge, { max: formatBytes(MAX_ATTACHMENT_BYTES) }),
+      tooMany: formatLabel(labels.attachmentTooMany, { count: MAX_ATTACHMENTS }),
+      tooLargeTogether: labels.attachmentsTooLargeTogether,
+      failed: labels.attachmentFailed,
+      cameraDenied: labels.cameraPermissionDenied,
+    }),
+    [labels]
+  );
+
+  // Read per render: `boot({ attachments })` sets it outside React state.
+  const attachmentSources = theme.attachmentsEnabled ? getAttachmentSources() : [];
+
   const handleClose = useCallback(() => store.hide(), [store]);
 
+  const handleOpenNotification = useCallback(
+    (conversationId: string) => void store.openConversation(conversationId),
+    [store]
+  );
+  const handleDismissNotification = useCallback(() => store.dismissInAppNotification(), [store]);
+
   const handleTabChange = useCallback((tab: WidgetSpaceType) => store.setActiveTab(tab), [store]);
 
+  // Rejections reach ChatView, which keeps unsent attachments for a retry.
   const handleSendMessage = useCallback(
-    (body: string, attachments?: WidgetAttachment[], action?: AgentUiAction) => {
-      store.sendMessage(body, attachments ?? [], action).catch(() => {
-        // The failed bubble already surfaces this to the visitor.
-      });
-    },
+    (body: string, attachments?: OutgoingAttachment[], action?: AgentUiAction) =>
+      store.sendMessage(body, attachments ?? [], action),
     [store]
   );
 
@@ -211,6 +256,7 @@ export function RepzoWidgetProvider({
     if (state.view === 'chat') {
       return (
         <ChatView
+          key={store.getThreadGeneration()}
           messages={state.messages}
           loading={state.messagesLoading}
           hasMoreMessages={state.hasMoreMessages}
@@ -218,7 +264,11 @@ export function RepzoWidgetProvider({
           color={theme.primaryColor}
           agentName={activeConversation?.agentName}
           agentAvatar={activeConversation?.agentAvatar}
+          agentOnline={activeConversation?.agentOnline}
           isOnline={theme.isOnline}
+          teamName={state.config?.workspaceName}
+          teamAvatars={teamAvatars}
+          replyTimeLabel={theme.replyTimeLabel}
           locale={state.locale}
           prefillText={state.prefillText}
           offlineMessage={theme.offlineMessage}
@@ -237,10 +287,23 @@ export function RepzoWidgetProvider({
             today: labels.today,
             yesterday: labels.yesterday,
             conversationUpdated: labels.conversationUpdated,
+            messageDeleted: labels.messageDeleted,
+            messageSent: labels.messageSent,
+            messageSeen: labels.messageSeen,
+            waitingForTeammate: labels.waitingForTeammate,
+            joinedConversation: labels.joinedConversation,
             procedureSend: labels.procedureSend,
             procedureSent: labels.procedureSent,
             blocks: blockLabels,
+            attach: attachLabels,
+            viewer: {
+              close: labels.close,
+              loadFailed: labels.imageLoadFailed,
+              openExternally: labels.openImageExternally,
+            },
           }}
+          attachmentSources={attachmentSources}
+          onPickAttachments={pickAttachments}
           onSendMessage={handleSendMessage}
           onIdentifyVisitor={(data) => store.identifyVisitor(data)}
           onLoadMore={() => store.loadMoreMessages()}
@@ -254,7 +317,7 @@ export function RepzoWidgetProvider({
     if (isHomeSurface) {
       return (
         <HomeView
-          config={state.config}
+          config={localizedConfig}
           color={theme.primaryColor}
           visitorName={state.visitorProfile.name}
           conversationCount={state.conversations.length}
@@ -319,6 +382,24 @@ export function RepzoWidgetProvider({
   return (
     <>
       {children}
+      {state.inAppNotification ? (
+        <InAppNotification
+          // A new reply remounts the card, so it slides in fresh.
+          key={state.inAppNotification.messageId}
+          notification={state.inAppNotification}
+          color={theme.primaryColor}
+          bottomInset={insets.bottom}
+          labels={{
+            replyFrom: labels.notificationReplyFrom,
+            newReply: labels.notificationNewReply,
+            attachment: labels.notificationAttachment,
+            openHint: labels.notificationOpenHint,
+            dismiss: labels.dismiss,
+          }}
+          onOpen={handleOpenNotification}
+          onDismiss={handleDismissNotification}
+        />
+      ) : null}
       <Modal
         visible={state.isOpen}
         animationType="slide"

package/src/ui/components/AttachmentChips.tsx

@@ -0,0 +1,135 @@
+/**
+ * Picked-but-unsent attachments above the composer: a thumbnail for images, a
+ * name + size card for everything else, each with its own remove button.
+ */
+
+import { Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import {
+  formatBytes,
+  isImageAttachment,
+  type DraftAttachment,
+} from '../../attachments/pickers';
+import { formatLabel } from '../../i18n';
+import { fontSize, palette, radius, spacing, withAlpha } from '../styles/theme';
+import { START_ALIGN } from '../utils/rtl';
+import { CloseIcon } from './icons';
+
+interface AttachmentChipsProps {
+  attachments: DraftAttachment[];
+  /** While a send is in flight the chips are dimmed and can't be removed. */
+  disabled?: boolean;
+  /** Keeps its `{name}` placeholder; filled per chip. */
+  removeLabel: string;
+  onRemove: (id: string) => void;
+}
+
+export function AttachmentChips({
+  attachments,
+  disabled,
+  removeLabel,
+  onRemove,
+}: AttachmentChipsProps) {
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      keyboardShouldPersistTaps="handled"
+      style={styles.scroller}
+      contentContainerStyle={styles.row}>
+      {attachments.map((attachment) => (
+        <View key={attachment.id} style={[styles.chip, disabled && styles.chipDisabled]}>
+          {isImageAttachment(attachment.contentType) ? (
+            <Image
+              source={{ uri: attachment.previewUri }}
+              style={styles.thumbnail}
+              resizeMode="cover"
+              accessible
+              accessibilityLabel={attachment.name}
+              accessibilityIgnoresInvertColors
+            />
+          ) : (
+            <View style={styles.file}>
+              <Text style={styles.fileName} numberOfLines={1}>
+                {attachment.name}
+              </Text>
+              <Text style={styles.fileSize}>{formatBytes(attachment.size)}</Text>
+            </View>
+          )}
+          <Pressable
+            onPress={() => onRemove(attachment.id)}
+            disabled={disabled}
+            accessibilityRole="button"
+            accessibilityLabel={formatLabel(removeLabel, { name: attachment.name })}
+            accessibilityState={{ disabled: !!disabled }}
+            // 22pt badge + 11pt on every side = a 44pt target.
+            hitSlop={11}
+            style={({ pressed }) => [styles.remove, pressed && styles.removePressed]}>
+            <CloseIcon size={10} color={palette.white} />
+          </Pressable>
+        </View>
+      ))}
+    </ScrollView>
+  );
+}
+
+const CHIP_HEIGHT = 64;
+
+const styles = StyleSheet.create({
+  scroller: {
+    flexGrow: 0,
+    marginBottom: spacing.sm,
+  },
+  row: {
+    gap: spacing.sm,
+  },
+  chip: {
+    height: CHIP_HEIGHT,
+    borderRadius: radius.md,
+    overflow: 'hidden',
+    backgroundColor: palette.surfaceAlt,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.border,
+  },
+  chipDisabled: {
+    opacity: 0.5,
+  },
+  thumbnail: {
+    width: CHIP_HEIGHT,
+    height: CHIP_HEIGHT,
+  },
+  file: {
+    width: 156,
+    height: CHIP_HEIGHT,
+    justifyContent: 'center',
+    paddingStart: spacing.md,
+    // Clear of the remove badge in the top corner.
+    paddingEnd: spacing.xl + spacing.sm,
+  },
+  fileName: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+    color: palette.ink,
+  },
+  fileSize: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.caption,
+    color: palette.textMuted,
+    marginTop: 2,
+  },
+  remove: {
+    position: 'absolute',
+    top: spacing.xs,
+    end: spacing.xs,
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: withAlpha(palette.ink, 0.72),
+  },
+  removePressed: {
+    opacity: 0.7,
+  },
+});

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',
+  },
+});