@repzo/widget-react-native 1.3.1 → 1.4.0

package/src/ui/WidgetProvider.tsx

@@ -104,9 +104,9 @@ export function RepzoWidgetProvider({
     [state.config, state.locale]
   );
 
-  // Home previews the two newest threads and credits the agents behind them.
-  const recentConversations = useMemo(
-    () => pickRecentConversations(state.conversations, 2),
+  // Home previews the newest thread and credits the agents behind the recent ones.
+  const recentConversation = useMemo(
+    () => pickRecentConversations(state.conversations, 1)[0],
     [state.conversations]
   );
   const teamAgents = useMemo(() => pickTeamAgents(state.conversations, 3), [state.conversations]);
@@ -132,6 +132,15 @@ export function RepzoWidgetProvider({
     }),
     [labels]
   );
+  const youPrefix = store.showsYouPrefix();
+  const lastMessageLabels = useMemo(
+    () => ({
+      photo: labels.lastMessagePhoto,
+      file: labels.lastMessageFile,
+      you: youPrefix ? labels.lastMessageYou : '',
+    }),
+    [labels, youPrefix]
+  );
 
   const blockLabels = useMemo(
     () => ({
@@ -171,6 +180,10 @@ export function RepzoWidgetProvider({
       tooLargeTogether: labels.attachmentsTooLargeTogether,
       failed: labels.attachmentFailed,
       cameraDenied: labels.cameraPermissionDenied,
+      uploading: labels.attachmentUploading,
+      uploadFailed: labels.attachmentUploadFailed,
+      uploadFailedNotice: labels.attachmentsUploadFailed,
+      retry: labels.tapToRetry,
     }),
     [labels, theme.maxAttachmentBytes]
   );
@@ -184,6 +197,10 @@ export function RepzoWidgetProvider({
       loadEarlier: labels.loadEarlier,
       emptyConversation: labels.emptyConversation,
       messagePlaceholder: labels.messagePlaceholder,
+      send: labels.sendMessage,
+      jumpToLatest: labels.jumpToLatest,
+      jumpToLatestNew: labels.jumpToLatestNew,
+      morePhotos: labels.morePhotos,
       failedToSend: labels.failedToSend,
       tapToRetry: labels.tapToRetry,
       openAttachment: labels.openAttachment,
@@ -228,6 +245,7 @@ export function RepzoWidgetProvider({
         close: labels.close,
         loadFailed: labels.imageLoadFailed,
         openExternally: labels.openImageExternally,
+        position: labels.imagePosition,
       },
       voice: {
         play: labels.voicePlay,
@@ -247,6 +265,14 @@ export function RepzoWidgetProvider({
       pickAttachments(source, current, theme.maxAttachmentBytes),
     [theme.maxAttachmentBytes]
   );
+  const handleUploadAttachment = useCallback(
+    (draft: DraftAttachment, signal?: AbortSignal) =>
+      store.uploadAttachment(
+        { uri: draft.fileUri!, name: draft.name, contentType: draft.contentType, size: draft.size },
+        signal
+      ),
+    [store]
+  );
 
   const handleOpenNotification = useCallback(
     (conversationId: string) => void store.openConversation(conversationId),
@@ -453,8 +479,10 @@ export function RepzoWidgetProvider({
           labels={chatLabels}
           attachmentSources={attachmentSources}
           onPickAttachments={handlePickAttachments}
+          onUploadAttachment={handleUploadAttachment}
           onSendMessage={handleSendMessage}
           onRetryMessage={handleRetryMessage}
+          photoAlbums={store.showsPhotoAlbums()}
           onIdentifyVisitor={handleIdentifyVisitor}
           onRateConversation={handleRateConversation}
           onLoadMore={handleLoadMore}
@@ -472,7 +500,7 @@ export function RepzoWidgetProvider({
           color={theme.primaryColor}
           visitorName={state.visitorProfile.name}
           conversationCount={state.conversations.length}
-          recentConversations={recentConversations}
+          recentConversation={recentConversation}
           unreadByConversation={state.unreadByConversation}
           teamAgents={teamAgents}
           isOnline={theme.isOnline}
@@ -483,19 +511,17 @@ export function RepzoWidgetProvider({
           showPreviousConversations={theme.showPreviousConversations}
           labels={{
             close: labels.close,
-            viewPrevious: labels.viewPreviousConversations,
-            viewAll: formatLabel(labels.homeViewAllCount, { count: state.conversations.length }),
-            recentTitle: labels.homeRecentTitle,
+            recentTitle: labels.homeRecentMessageTitle,
             noConversations: labels.homeNoConversations,
             statusOnline: labels.homeStatusOnline,
             statusAway: labels.homeStatusAway,
             team: labels.team,
             time: timeLabels,
             unread: labels.unreadBadge,
+            lastMessage: lastMessageLabels,
           }}
           onClose={handleClose}
           onStartConversation={handleStartConversation}
-          onViewConversations={() => handleTabChange('messages')}
           onOpenConversation={(conversationId) => store.openConversation(conversationId)}
         />
       );
@@ -521,6 +547,7 @@ export function RepzoWidgetProvider({
           statusAway: labels.homeStatusAway,
           time: timeLabels,
           unread: labels.unreadBadge,
+          lastMessage: lastMessageLabels,
         }}
         onSelect={(conversationId) => store.openConversation(conversationId)}
         onNewConversation={handleStartConversation}

package/src/ui/components/AttachmentChips.tsx

@@ -1,9 +1,11 @@
 /**
  * Picked-but-unsent attachments above the composer: a thumbnail for images, a
  * name + size card for everything else, each with its own remove button.
+ * A file that uploads ahead of the send shows a spinner until it's up, and
+ * turns into a retry button when the upload fails.
  */
 
-import { Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { ActivityIndicator, Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import {
   formatBytes,
@@ -11,24 +13,29 @@ import {
   type DraftAttachment,
 } from '../../attachments/pickers';
 import { formatLabel } from '../../i18n';
+import { globalStyles } from '../styles/global';
 import { fontSize, palette, radius, spacing, withAlpha } from '../styles/theme';
 import { START_ALIGN } from '../utils/rtl';
-import { CloseIcon } from './icons';
+import { AlertIcon, 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;
+  /** `remove`, `uploading` and `uploadFailed` keep their `{name}` placeholder; filled per chip. */
+  labels: { remove: string; uploading: string; uploadFailed: string; retry: string };
+  /** Removing a chip mid-upload cancels the upload. */
   onRemove: (id: string) => void;
+  /** Starts a failed upload again. */
+  onRetry: (id: string) => void;
 }
 
 export function AttachmentChips({
   attachments,
   disabled,
-  removeLabel,
+  labels,
   onRemove,
+  onRetry,
 }: AttachmentChipsProps) {
   return (
     <ScrollView
@@ -37,38 +44,82 @@ export function AttachmentChips({
       keyboardShouldPersistTaps="handled"
       style={styles.scroller}
       contentContainerStyle={styles.row}>
-      {attachments.map((attachment) => (
-        <View key={attachment.id} style={[styles.chip, disabled && styles.chipDisabled]}>
-          {isImageAttachment(attachment.contentType) ? (
+      {attachments.map((attachment) => {
+        const uploading = attachment.uploadStatus === 'uploading';
+        const failed = attachment.uploadStatus === 'failed';
+        const preview = isImageAttachment(attachment.contentType) ? (
+          <View>
             <Image
               source={{ uri: attachment.previewUri }}
               style={styles.thumbnail}
               resizeMode="cover"
-              accessible
+              accessible={!uploading && !failed}
               accessibilityLabel={attachment.name}
               accessibilityIgnoresInvertColors
             />
-          ) : (
-            <View style={styles.file}>
-              <Text style={styles.fileName} numberOfLines={1}>
-                {attachment.name}
+            {uploading || failed ? (
+              <View style={[styles.scrim, failed && styles.scrimFailed]}>
+                {uploading ? (
+                  <ActivityIndicator color={palette.white} />
+                ) : (
+                  <AlertIcon size={20} color={palette.white} />
+                )}
+              </View>
+            ) : null}
+          </View>
+        ) : (
+          <View style={styles.file}>
+            <Text style={styles.fileName} numberOfLines={1}>
+              {attachment.name}
+            </Text>
+            <View style={styles.fileStatus}>
+              {uploading ? (
+                <ActivityIndicator size="small" color={palette.textMuted} />
+              ) : failed ? (
+                <AlertIcon size={12} color={palette.danger} />
+              ) : null}
+              <Text style={[styles.fileSize, failed && styles.fileFailed]} numberOfLines={1}>
+                {failed ? labels.retry : formatBytes(attachment.size)}
               </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>
-      ))}
+          </View>
+        );
+
+        return (
+          <View key={attachment.id} style={[styles.chip, disabled && styles.chipDisabled]}>
+            {failed ? (
+              <Pressable
+                onPress={() => onRetry(attachment.id)}
+                disabled={disabled}
+                accessibilityRole="button"
+                accessibilityLabel={formatLabel(labels.uploadFailed, { name: attachment.name })}
+                style={({ pressed }) => pressed && globalStyles.pressed}>
+                {preview}
+              </Pressable>
+            ) : uploading ? (
+              <View
+                accessible
+                accessibilityLabel={formatLabel(labels.uploading, { name: attachment.name })}
+                accessibilityState={{ busy: true }}>
+                {preview}
+              </View>
+            ) : (
+              preview
+            )}
+            <Pressable
+              onPress={() => onRemove(attachment.id)}
+              disabled={disabled}
+              accessibilityRole="button"
+              accessibilityLabel={formatLabel(labels.remove, { 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>
   );
 }
@@ -98,6 +149,16 @@ const styles = StyleSheet.create({
     width: CHIP_HEIGHT,
     height: CHIP_HEIGHT,
   },
+  // Over the thumbnail while it uploads; darker once it failed, so the alert reads.
+  scrim: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: withAlpha(palette.ink, 0.4),
+  },
+  scrimFailed: {
+    backgroundColor: withAlpha(palette.ink, 0.6),
+  },
   file: {
     width: 156,
     height: CHIP_HEIGHT,
@@ -112,11 +173,21 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     color: palette.ink,
   },
+  fileStatus: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    marginTop: 2,
+  },
   fileSize: {
+    flexShrink: 1,
     textAlign: START_ALIGN,
     fontSize: fontSize.caption,
     color: palette.textMuted,
-    marginTop: 2,
+  },
+  fileFailed: {
+    color: palette.danger,
+    fontWeight: '600',
   },
   remove: {
     position: 'absolute',

package/src/ui/components/ConversationRow.tsx

@@ -15,6 +15,15 @@ import { forwardDirection, START_ALIGN } from '../utils/rtl';
 import { fontSize, palette, spacing } from '../styles/theme';
 
 const AVATAR_SIZE = 40;
+const CARD_AVATAR_SIZE = 32;
+
+export interface LastMessageLabels {
+  /** Stand in for a newest message that had no words, only photos or other files. */
+  photo: string;
+  file: string;
+  /** Before the visitor's own newest message; keeps `{message}`. Empty: no prefix (`boot({ youPrefix: false })`). */
+  you: string;
+}
 
 interface ConversationRowProps {
   conversation: Conversation;
@@ -26,8 +35,15 @@ interface ConversationRowProps {
   unreadCount?: number;
   /** Template with a `{count}` token, for screen readers. */
   unreadLabel?: string;
+  lastMessageLabels?: LastMessageLabels;
   /** Messages runs full-bleed; Home insets it inside a card. */
   horizontalPadding?: number;
+  /**
+   * `card` is Home's "Recent message" card: a smaller avatar, a regular-weight
+   * name with the time right after it, and no chevron. The words, unread state
+   * and screen-reader label are the list's.
+   */
+  variant?: 'list' | 'card';
   onPress: () => void;
 }
 
@@ -38,47 +54,70 @@ export function ConversationRow({
   timeLabels,
   unreadCount = 0,
   unreadLabel,
+  lastMessageLabels,
   horizontalPadding = spacing.xl,
+  variant = 'list',
   onPress,
 }: ConversationRowProps) {
+  const card = variant === 'card';
   const displayName = conversation.agentName || fallbackName;
   const hasUnread = unreadCount > 0;
   const unreadSuffix =
     hasUnread && unreadLabel ? `. ${formatLabel(unreadLabel, { count: unreadCount })}` : '';
+  const attachment = conversation.lastMessageAttachment;
+  // "Photo" or "File" over Workstation's "2 attachments".
+  const snippet = (attachment && lastMessageLabels?.[attachment]) || conversation.snippet || '';
+  // "You: " is drawn a shade stronger than the message, so it reads as a label.
+  const [youBefore, youAfter] =
+    snippet && conversation.lastMessageFromVisitor && lastMessageLabels?.you
+      ? splitAround(lastMessageLabels.you, '{message}')
+      : ['', ''];
+  const snippetLabel = `${youBefore}${snippet}${youAfter}`;
 
   return (
     <Pressable
       onPress={onPress}
       accessibilityRole="button"
       accessibilityLabel={`${
-        conversation.snippet ? `${displayName}. ${conversation.snippet}` : displayName
+        snippet ? `${displayName}. ${snippetLabel}` : displayName
       }${unreadSuffix}`}
       android_ripple={{ color: palette.borderSoft }}
       style={({ pressed }) => [
         styles.row,
+        card && cardStyles.row,
         { paddingHorizontal: horizontalPadding },
         pressed && styles.rowPressed,
       ]}>
       <Avatar
         avatar={conversation.agentAvatar}
         name={conversation.agentName}
-        size={AVATAR_SIZE}
+        size={card ? CARD_AVATAR_SIZE : AVATAR_SIZE}
         color={color}
       />
       <View style={styles.content}>
-        <View style={styles.topLine}>
-          <Text style={[styles.name, hasUnread && styles.nameUnread]} numberOfLines={1}>
+        <View style={[styles.topLine, card && cardStyles.topLine]}>
+          <Text
+            style={
+              card
+                ? [cardStyles.name, hasUnread && cardStyles.nameUnread]
+                : [styles.name, hasUnread && styles.nameUnread]
+            }
+            numberOfLines={1}>
             {displayName}
           </Text>
-          <Text style={styles.time}>
+          <Text style={[styles.time, card && cardStyles.time]}>
             {conversation.lastMessageAt
               ? formatRelativeTime(conversation.lastMessageAt, timeLabels)
               : ''}
           </Text>
         </View>
-        {conversation.snippet ? (
-          <Text style={[styles.snippet, hasUnread && styles.snippetUnread]} numberOfLines={2}>
-            {conversation.snippet}
+        {snippet ? (
+          <Text
+            style={[styles.snippet, card && cardStyles.snippet, hasUnread && styles.snippetUnread]}
+            numberOfLines={2}>
+            {youBefore ? <Text style={styles.snippetYou}>{youBefore}</Text> : null}
+            {snippet}
+            {youAfter}
           </Text>
         ) : null}
       </View>
@@ -86,13 +125,20 @@ export function ConversationRow({
         <View style={[styles.badge, { backgroundColor: color }]}>
           <Text style={styles.badgeLabel}>{unreadCount > 9 ? '9+' : unreadCount}</Text>
         </View>
-      ) : (
+      ) : card ? null : (
         <ChevronIcon size={16} direction={forwardDirection()} color={palette.textSubtle} />
       )}
     </Pressable>
   );
 }
 
+/** `'You: {message}'` → `['You: ', '']`; a template without the token goes in front. */
+function splitAround(template: string, token: string): [string, string] {
+  const index = template.indexOf(token);
+  if (index < 0) return [`${template} `, ''];
+  return [template.slice(0, index), template.slice(index + token.length)];
+}
+
 /** Where a divider should start so it sits under the text, not the avatar. */
 export function rowDividerInset(horizontalPadding: number = spacing.xl): number {
   return horizontalPadding + AVATAR_SIZE + spacing.md;
@@ -145,6 +191,10 @@ const styles = StyleSheet.create({
     color: palette.text,
     fontWeight: '500',
   },
+  snippetYou: {
+    color: palette.text,
+    fontWeight: '600',
+  },
   // Replaces the chevron rather than crowding beside it, so the row keeps
   // the same width whether or not there is anything unread.
   badge: {
@@ -161,3 +211,34 @@ const styles = StyleSheet.create({
     fontWeight: '700',
   },
 });
+
+// Overrides for the `card` variant. It sits under the card's title, so it
+// drops the list's minimum height, and its name, time and last message share
+// one size, the way the Home design draws them.
+const cardStyles = StyleSheet.create({
+  row: {
+    minHeight: 0,
+    paddingVertical: spacing.sm,
+  },
+  // The time follows the name instead of being pushed to the far edge.
+  topLine: {
+    justifyContent: 'flex-start',
+  },
+  name: {
+    textAlign: START_ALIGN,
+    flexShrink: 1,
+    fontSize: fontSize.body,
+    color: palette.ink,
+  },
+  nameUnread: {
+    fontWeight: '600',
+  },
+  time: {
+    fontSize: fontSize.body,
+  },
+  snippet: {
+    fontSize: fontSize.body,
+    lineHeight: fontSize.body * 1.35,
+    color: palette.textSubtle,
+  },
+});