@repzo/widget-react-native 1.2.1 → 1.3.0

package/src/ui/components/icons.tsx

@@ -66,6 +66,39 @@ export function ChevronIcon({
   );
 }
 
+/** A right-pointing triangle, drawn with borders — a voice note's play button. */
+export function PlayIcon({ size = 16, color = palette.white, style }: IconProps) {
+  return (
+    <View style={[{ width: size, height: size }, styles.center, style]}>
+      <View
+        style={{
+          width: 0,
+          height: 0,
+          // The triangle's weight sits left of its box; nudge it to look centred.
+          marginLeft: size * 0.12,
+          borderLeftWidth: size * 0.72,
+          borderTopWidth: size * 0.42,
+          borderBottomWidth: size * 0.42,
+          borderLeftColor: color,
+          borderTopColor: 'transparent',
+          borderBottomColor: 'transparent',
+        }}
+      />
+    </View>
+  );
+}
+
+/** Two upright bars — a playing voice note's pause button. */
+export function PauseIcon({ size = 16, color = palette.white, style }: IconProps) {
+  const bar: ViewStyle = { width: size * 0.26, height: size * 0.8, borderRadius: 1.5, backgroundColor: color };
+  return (
+    <View style={[{ width: size, height: size, flexDirection: 'row', gap: size * 0.2 }, styles.center, style]}>
+      <View style={bar} />
+      <View style={bar} />
+    </View>
+  );
+}
+
 /** Arrow with a shaft — used for the "start a conversation" affordance. */
 export function ArrowRightIcon({ size = 16, color = palette.textMuted, style }: IconProps) {
   const thickness = Math.max(2, size * 0.12);

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

@@ -84,6 +84,11 @@ export const styles = StyleSheet.create({
     flexGrow: 1,
     justifyContent: 'center',
   },
+  // Placeholders sit at the bottom, where the newest messages will land.
+  messagesContentLoading: {
+    flexGrow: 1,
+    justifyContent: 'flex-end',
+  },
   emptyState: {
     alignItems: 'center',
     paddingHorizontal: spacing.xl,
@@ -117,13 +122,6 @@ export const styles = StyleSheet.create({
     fontSize: fontSize.meta,
     fontWeight: '600',
   },
-  stateText: {
-    textAlign: 'center',
-    paddingVertical: 40,
-    paddingHorizontal: spacing.xl,
-    color: palette.textSubtle,
-    fontSize: fontSize.meta,
-  },
   messageRow: {
     maxWidth: '100%',
   },
@@ -214,15 +212,6 @@ export const styles = StyleSheet.create({
     height: 140,
     borderRadius: radius.md,
   },
-  attachmentFile: {
-    borderWidth: StyleSheet.hairlineWidth,
-    borderRadius: radius.md,
-    paddingHorizontal: spacing.sm + 1,
-    paddingVertical: spacing.sm - 1,
-  },
-  attachmentName: {
-    fontSize: fontSize.meta,
-  },
   failedText: {
     fontSize: fontSize.caption,
     marginTop: spacing.xs,

package/src/ui/screens/chat/ChatView.tsx

@@ -59,6 +59,10 @@ import { contrastingTextColor, mixHex, palette, spacing, withAlpha } from '../..
 import { formatClockTime, formatDayLabel, isSameDay } from '../../utils/conversations';
 import { stripHtml } from '../../utils/html';
 import { isHttpUrl, openExternalUrl } from '../../utils/safe-url';
+import { isPlayableAudio } from '../../../audio/voice';
+import { VoiceNote, type VoiceNoteLabels } from '../../components/VoiceNote';
+import { FileCard } from '../../components/FileCard';
+import { MessagesSkeleton } from '../../components/MessagesSkeleton';
 import { backDirection, isRTL } from '../../utils/rtl';
 import { styles } from './ChatView.styles';
 import type { ChatLabels, ChatViewProps } from './ChatView.types';
@@ -328,6 +332,7 @@ export function ChatView({
   const headerTextColor = contrastingTextColor(color);
   const onDarkHeader = headerTextColor === palette.white;
   const isEmptyThread = !loading && messages.length === 0;
+  const isLoadingThread = loading && messages.length === 0;
   const agentIsActive = agentOnline ?? isOnline;
   // "Waiting for a teammate" until someone replies: no teammate in the header
   // and the visitor spoke last (bot replies before that still count as waiting).
@@ -436,6 +441,7 @@ export function ChatView({
         contentContainerStyle={[
           styles.messagesContent,
           isEmptyThread && styles.messagesContentEmpty,
+          isLoadingThread && styles.messagesContentLoading,
         ]}
         keyboardShouldPersistTaps="handled"
         // Interactive dismissal drags the keyboard down under the finger while
@@ -452,9 +458,7 @@ export function ChatView({
           </Pressable>
         ) : null}
 
-        {loading && messages.length === 0 ? (
-          <Text style={styles.stateText}>{labels.loading}</Text>
-        ) : null}
+        {isLoadingThread ? <MessagesSkeleton color={color} label={labels.loading} /> : null}
 
         {isEmptyThread ? (
           <View style={styles.emptyState}>
@@ -759,6 +763,9 @@ const MessageBubble = memo(function MessageBubble({
                 key={attachment.id}
                 attachment={attachment}
                 isVisitor={isVisitor}
+                color={color}
+                voiceLabels={labels.voice}
+                openLabel={labels.openAttachment}
                 onOpenImage={onOpenImage}
               />
             ))}
@@ -818,16 +825,24 @@ function receiptLabel(message: Message, labels: ChatLabels): string | undefined
 function AttachmentPreview({
   attachment,
   isVisitor,
+  color,
+  voiceLabels,
+  openLabel,
   onOpenImage,
 }: {
   attachment: WidgetAttachment;
   isVisitor: boolean;
+  color: string;
+  voiceLabels: VoiceNoteLabels;
+  /** Keeps `{name}`. */
+  openLabel: string;
   onOpenImage: (image: { url: string; name: string }) => void;
 }) {
   // `url` is empty when the server sent a non-http(s) URL (see resolveUrl).
   // An unsent attachment shows its local file (or data URL): it renders, but
   // there is nothing to open until the server copy arrives.
   const [imageFailed, setImageFailed] = useState(false);
+  const [audioFailed, setAudioFailed] = useState(false);
   const isImage = isImageAttachment(attachment.contentType) && !!attachment.url && !imageFailed;
   const openable = isHttpUrl(attachment.url);
   // Images open in the in-app viewer; other files (PDF, sheets) need the OS.
@@ -837,6 +852,23 @@ function AttachmentPreview({
       ? () => onOpenImage({ url: attachment.url, name: attachment.name })
       : () => void openExternalUrl(attachment.url);
 
+  // Voice notes from the team (and any other audio) play in place, like the
+  // web Messenger — when the app has expo-audio; otherwise the file row below.
+  // One the player can't load (expired link, a format the OS can't decode)
+  // falls back to that row, which opens it in the browser.
+  if (isPlayableAudio(attachment.contentType, attachment.url) && !audioFailed) {
+    return (
+      <VoiceNote
+        url={attachment.url}
+        seed={attachment.id}
+        color={color}
+        onBrandBubble={isVisitor}
+        labels={voiceLabels}
+        onError={() => setAudioFailed(true)}
+      />
+    );
+  }
+
   if (isImage) {
     return (
       <Pressable
@@ -858,20 +890,15 @@ function AttachmentPreview({
   }
 
   return (
-    <Pressable
+    <FileCard
+      name={attachment.name}
+      contentType={attachment.contentType}
+      size={attachment.size}
+      color={color}
+      onBrandBubble={isVisitor}
+      openLabel={openLabel.replace('{name}', attachment.name)}
       onPress={open}
-      disabled={!openable}
-      accessibilityRole="button"
-      style={[
-        styles.attachmentFile,
-        { borderColor: isVisitor ? withAlpha(palette.white, 0.35) : palette.border },
-      ]}>
-      <Text
-        style={[styles.attachmentName, { color: isVisitor ? palette.white : palette.ink }]}
-        numberOfLines={1}>
-        {attachment.name}
-      </Text>
-    </Pressable>
+    />
   );
 }
 

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

@@ -12,6 +12,7 @@ import type {
 import type { AgentUiBlockLabels } from '../../components/AgentUiBlocks';
 import type { ImageViewerLabels } from '../../components/ImageViewer';
 import type { RatingCardLabels } from '../../components/RatingCard';
+import type { VoiceNoteLabels } from '../../components/VoiceNote';
 
 export interface ChatLabels {
   back: string;
@@ -49,6 +50,9 @@ export interface ChatLabels {
   rating: RatingCardLabels;
   attach: AttachLabels;
   viewer: ImageViewerLabels;
+  voice: VoiceNoteLabels;
+  /** Screen-reader label for a file card; keeps `{name}`. */
+  openAttachment: string;
 }
 
 /** Composer attachment copy. Limits are already filled in; `remove` keeps `{name}`. */