@repzo/widget-react-native 1.0.1 → 1.0.4

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,

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

@@ -47,7 +47,8 @@ import { Avatar } from '../../components/Avatar';
 import { ImageViewer } from '../../components/ImageViewer';
 import { WidgetErrorBoundary } from '../../components/ErrorBoundary';
 import { GradientBackground } from '../../components/Gradient';
-import { ArrowUpIcon, ChatOutlineIcon, ChevronIcon, PaperclipIcon } from '../../components/icons';
+import { ArrowUpIcon, ChatOutlineIcon, ChevronIcon, ClockIcon, PaperclipIcon } from '../../components/icons';
+import { TeamAvatars } from '../../components/TeamAvatars';
 import { Markdown } from '../../components/Markdown';
 import { useReduceMotion } from '../../hooks/use-reduce-motion';
 import { globalStyles } from '../../styles/global';
@@ -67,7 +68,11 @@ export function ChatView({
   color,
   agentName,
   agentAvatar,
+  agentOnline,
   isOnline,
+  teamName,
+  teamAvatars = [],
+  replyTimeLabel,
   locale,
   prefillText,
   offlineMessage,
@@ -309,6 +314,17 @@ export function ChatView({
   const headerTextColor = contrastingTextColor(color);
   const onDarkHeader = headerTextColor === palette.white;
   const isEmptyThread = !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).
+  const lastChatMessage = [...messages]
+    .reverse()
+    .find((message) => (message.messageType ?? 'message') === 'message' && !message.deletedAt);
+  const awaitingTeammate = !agentName && !agentTyping && lastChatMessage?.direction === 'inbound';
+  // "Sent" / "Seen" goes under the visitor's latest message only.
+  const lastVisitorMessageId = [...messages]
+    .reverse()
+    .find((message) => message.direction === 'inbound' && (message.messageType ?? 'message') === 'message')?.id;
   // Two stops off the brand color: flat fill looked like an unstyled block.
   // A non-hex brand color falls through mixHex unchanged and renders solid.
   const headerGradient = [color, mixHex(color, '#000000', 0.16)];
@@ -334,28 +350,57 @@ export function ChatView({
           <ChevronIcon size={18} direction={backDirection()} color={headerTextColor} />
         </Pressable>
 
-        <View style={styles.headerIdentity}>
-          <View style={styles.avatarWrapper}>
-            <Avatar
-              avatar={agentAvatar}
-              name={agentName}
-              size={36}
-              translucent={onDarkHeader}
+        {agentName ? (
+          // A teammate joined: their photo, name and own presence.
+          <View style={styles.headerIdentity}>
+            <View style={styles.avatarWrapper}>
+              <Avatar
+                avatar={agentAvatar}
+                name={agentName}
+                size={36}
+                translucent={onDarkHeader}
+                color={palette.ink}
+              />
+              {agentIsActive ? <View style={styles.onlineDot} /> : null}
+            </View>
+            <View style={styles.headerText}>
+              <Text style={[styles.headerName, { color: headerTextColor }]} numberOfLines={1}>
+                {agentName}
+              </Text>
+              <Text
+                style={[styles.headerStatus, { color: withAlpha(headerTextColor, 0.75) }]}
+                numberOfLines={1}>
+                {agentIsActive ? labels.statusOnline : labels.statusAway}
+              </Text>
+            </View>
+          </View>
+        ) : (
+          // No teammate yet, or the conversation closed: the team, Intercom-style.
+          <View style={styles.headerIdentity}>
+            <TeamAvatars
+              avatars={teamAvatars}
+              size={30}
               color={palette.ink}
+              ringColor={color}
+              translucent={onDarkHeader}
             />
-            {isOnline ? <View style={styles.onlineDot} /> : null}
-          </View>
-          <View style={styles.headerText}>
-            <Text style={[styles.headerName, { color: headerTextColor }]} numberOfLines={1}>
-              {agentName || labels.team}
-            </Text>
-            <Text
-              style={[styles.headerStatus, { color: withAlpha(headerTextColor, 0.75) }]}
-              numberOfLines={1}>
-              {isOnline ? labels.statusOnline : labels.statusAway}
-            </Text>
+            <View style={styles.headerText}>
+              <Text style={[styles.headerName, { color: headerTextColor }]} numberOfLines={1}>
+                {teamName || labels.team}
+              </Text>
+              {replyTimeLabel ? (
+                <View style={styles.headerReplyTime}>
+                  <ClockIcon size={12} color={withAlpha(headerTextColor, 0.75)} />
+                  <Text
+                    style={[styles.headerStatus, styles.headerReplyTimeText, { color: withAlpha(headerTextColor, 0.75) }]}
+                    numberOfLines={1}>
+                    {replyTimeLabel}
+                  </Text>
+                </View>
+              ) : null}
+            </View>
           </View>
-        </View>
+        )}
 
         <Pressable
           onPress={onClose}
@@ -443,6 +488,7 @@ export function ChatView({
                       : null
                   }
                   timeLabel={formatClockTime(message.createdAt, locale)}
+                  receiptLabel={message.id === lastVisitorMessageId ? receiptLabel(message, labels) : undefined}
                   onSubmitProcedureForm={
                     shouldShowProcedureForm(messages, message)
                       ? (body) => void onSendMessage(body).catch(() => {})
@@ -457,6 +503,13 @@ export function ChatView({
           );
         })}
 
+        {awaitingTeammate ? (
+          <View style={styles.waitingRow}>
+            <TeamAvatars avatars={teamAvatars} size={20} color={color} />
+            <Text style={styles.waitingText}>{labels.waitingForTeammate}</Text>
+          </View>
+        ) : null}
+
         {agentTyping ? (
           <View style={styles.typingRow}>
             <View style={styles.typingBubble}>
@@ -576,6 +629,7 @@ function MessageBubble({
   labels,
   senderLabel,
   timeLabel,
+  receiptLabel,
   onSubmitProcedureForm,
   onAgentUiAction,
   onOpenImage,
@@ -585,10 +639,28 @@ function MessageBubble({
   labels: ChatLabels;
   senderLabel?: string | null;
   timeLabel: string;
+  receiptLabel?: string;
   onSubmitProcedureForm?: (body: string) => void;
   onAgentUiAction?: (action: AgentUiAction) => void | Promise<void>;
   onOpenImage: (image: { url: string; name: string }) => void;
 }) {
+  const joinedName = message.metadata?.event === 'agent_joined' ? message.metadata?.agentName : null;
+  if (message.messageType === 'system' && typeof joinedName === 'string' && joinedName) {
+    return (
+      <View style={[styles.systemRow, styles.joinedRow]}>
+        <Avatar
+          avatar={typeof message.metadata?.agentAvatar === 'string' ? message.metadata.agentAvatar : null}
+          name={joinedName}
+          size={20}
+          color={palette.ink}
+        />
+        <Text style={styles.systemText}>
+          <Text style={styles.joinedName}>{joinedName}</Text> {labels.joinedConversation}
+        </Text>
+      </View>
+    );
+  }
+
   if (message.messageType === 'system') {
     const text = message.bodyPlain || stripHtml(message.body || '') || labels.conversationUpdated;
     return (
@@ -599,6 +671,17 @@ function MessageBubble({
   }
 
   const isVisitor = message.direction === 'inbound';
+
+  if (message.deletedAt) {
+    return (
+      <View style={[styles.messageRow, isVisitor ? styles.messageRowRight : styles.messageRowLeft]}>
+        <View style={styles.deletedBubble}>
+          <Text style={styles.deletedText}>{labels.messageDeleted}</Text>
+        </View>
+      </View>
+    );
+  }
+
   const rtl = isRTL();
   const messageText = message.bodyPlain || stripHtml(message.body || '');
   const hasBody = !!messageText;
@@ -658,6 +741,8 @@ function MessageBubble({
         ) : null}
       </View>
 
+      {receiptLabel ? <Text style={styles.receiptText}>{receiptLabel}</Text> : null}
+
       {agentUiBlocks.length > 0 && onAgentUiAction ? (
         <AgentUiBlocks
           blocks={agentUiBlocks}
@@ -679,6 +764,12 @@ function MessageBubble({
   );
 }
 
+/** Sent once the server has it, Seen once a teammate opened the conversation. */
+function receiptLabel(message: Message, labels: ChatLabels): string | undefined {
+  if (message.deletedAt || message.status === 'pending' || message.status === 'failed') return undefined;
+  return message.status === 'read' ? labels.messageSeen : labels.messageSent;
+}
+
 function AttachmentPreview({
   attachment,
   isVisitor,

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

@@ -1,3 +1,4 @@
+import type { TeamAvatar } from '../../../types';
 /** Props and label bundle for the chat thread. */
 
 import type { DraftAttachment, PickResult } from '../../../attachments/pickers';
@@ -25,6 +26,11 @@ export interface ChatLabels {
   today: string;
   yesterday: string;
   conversationUpdated: string;
+  messageDeleted: string;
+  messageSent: string;
+  messageSeen: string;
+  waitingForTeammate: string;
+  joinedConversation: string;
   procedureSend: string;
   procedureSent: string;
   blocks: AgentUiBlockLabels;
@@ -56,7 +62,14 @@ export interface ChatViewProps {
   /** Whoever is handling this thread, once the backend assigns someone. */
   agentName?: string | null;
   agentAvatar?: string | null;
+  /** The assigned teammate's own presence; falls back to `isOnline` when absent. */
+  agentOnline?: boolean | null;
   isOnline: boolean;
+  /** Header title with no teammate yet (or after close); falls back to the Team label. */
+  teamName?: string | null;
+  teamAvatars?: TeamAvatar[];
+  /** e.g. "We usually reply within a few minutes", under the team name. */
+  replyTimeLabel?: string;
   prefillText?: string;
   offlineMessage?: string;
   locale: string;