@repzo/widget-react-native 1.0.1 → 1.0.5

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

@@ -47,11 +47,13 @@ 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 { useTopInset } from '../../hooks/use-top-inset';
 import { globalStyles } from '../../styles/global';
-import { contrastingTextColor, mixHex, palette, withAlpha } from '../../styles/theme';
+import { contrastingTextColor, mixHex, palette, spacing, withAlpha } from '../../styles/theme';
 import { formatClockTime, formatDayLabel, isSameDay } from '../../utils/conversations';
 import { stripHtml } from '../../utils/html';
 import { isHttpUrl, openExternalUrl } from '../../utils/safe-url';
@@ -67,7 +69,11 @@ export function ChatView({
   color,
   agentName,
   agentAvatar,
+  agentOnline,
   isOnline,
+  teamName,
+  teamAvatars = [],
+  replyTimeLabel,
   locale,
   prefillText,
   offlineMessage,
@@ -309,8 +315,20 @@ 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 topInset = useTopInset();
   const headerGradient = [color, mixHex(color, '#000000', 0.16)];
   const headerControl = { backgroundColor: withAlpha(headerTextColor, 0.16) };
 
@@ -320,7 +338,12 @@ export function ChatView({
           was empty whenever no agent was assigned yet. */}
       <GradientBackground
         colors={headerGradient}
-        style={[styles.header, { borderBottomColor: mixHex(color, '#000000', 0.26) }]}>
+        style={[
+          styles.header,
+          { borderBottomColor: mixHex(color, '#000000', 0.26) },
+          // Reaches under the status bar so the brand colour runs to the top.
+          topInset > 0 ? { paddingTop: spacing.md + topInset, minHeight: 72 + topInset } : null,
+        ]}>
         <Pressable
           onPress={onBack}
           accessibilityRole="button"
@@ -334,28 +357,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 +495,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 +510,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 +636,7 @@ function MessageBubble({
   labels,
   senderLabel,
   timeLabel,
+  receiptLabel,
   onSubmitProcedureForm,
   onAgentUiAction,
   onOpenImage,
@@ -585,10 +646,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 +678,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 +748,8 @@ function MessageBubble({
         ) : null}
       </View>
 
+      {receiptLabel ? <Text style={styles.receiptText}>{receiptLabel}</Text> : null}
+
       {agentUiBlocks.length > 0 && onAgentUiAction ? (
         <AgentUiBlocks
           blocks={agentUiBlocks}
@@ -679,6 +771,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;

package/src/ui/screens/home/HomeView.styles.ts

@@ -23,6 +23,9 @@ export const START_CARD_LIFT = 28;
 export const START_CARD_MIN_HEIGHT = 76;
 export const HEADER_FADE_HEIGHT = 90;
 export const CLOSE_BUTTON_SIZE = 28;
+/** The logo keeps its own shape at this height, up to the web widget's max width. */
+export const LOGO_HEIGHT = 40;
+export const LOGO_MAX_WIDTH = 152;
 export const CLOSE_ICON_SIZE = 14;
 
 export const styles = StyleSheet.create({
@@ -58,8 +61,7 @@ export const styles = StyleSheet.create({
     minHeight: 40,
   },
   logo: {
-    width: 132,
-    height: 40,
+    height: LOGO_HEIGHT,
   },
   closeButton: {
     marginStart: 'auto',

package/src/ui/screens/home/HomeView.tsx

@@ -13,7 +13,7 @@
  * send today.
  */
 
-import { Fragment, useEffect, useRef, type ReactNode } from 'react';
+import { Fragment, useEffect, useRef, useState, type ReactNode } from 'react';
 import {
   Animated,
   Easing,
@@ -37,6 +37,7 @@ import {
   CloseIcon,
 } from '../../components/icons';
 import { useReduceMotion } from '../../hooks/use-reduce-motion';
+import { useTopInset } from '../../hooks/use-top-inset';
 import { globalStyles } from '../../styles/global';
 import { contrastingTextColor, palette, spacing, withAlpha } from '../../styles/theme';
 import { flipForRTL } from '../../utils/rtl';
@@ -45,6 +46,9 @@ import {
   CLOSE_ICON_SIZE,
   HEADER_BOTTOM_PADDING,
   HEADER_FADE_HEIGHT,
+  HEADER_MIN_HEIGHT,
+  LOGO_HEIGHT,
+  LOGO_MAX_WIDTH,
   START_CARD_LIFT,
   styles,
 } from './HomeView.styles';
@@ -55,7 +59,7 @@ import type { HomeViewProps } from './HomeView.types';
  * it, and defaulting to dark text over a dark brand header is unreadable, so
  * derive something legible from the background instead.
  */
-function resolveHeaderTextColor(config: WidgetConfig | null, fallbackColor: string): string {
+export function resolveHeaderTextColor(config: WidgetConfig | null, fallbackColor: string): string {
   if (config?.homeHeaderTextColor === 'white') return palette.white;
   if (config?.homeHeaderTextColor === 'black') return palette.ink;
   if (config?.homeBackgroundType === 'image') return palette.white;
@@ -116,8 +120,14 @@ export function HomeView({
 
   // The start card is pulled up over the seam by a fixed amount, so the header
   // pads its bottom by that same amount and the greeting never slides under it.
+  // The header reaches up under the status bar (no white strip above it), so
+  // it grows by that inset and keeps its content where it was.
+  const topInset = useTopInset();
   const headerStyle = [
     styles.header,
+    topInset > 0
+      ? { paddingTop: spacing.xl + topInset, minHeight: HEADER_MIN_HEIGHT + topInset }
+      : null,
     allowNewConversations ? { paddingBottom: HEADER_BOTTOM_PADDING + START_CARD_LIFT } : null,
   ];
 
@@ -125,12 +135,7 @@ export function HomeView({
     <>
       <View style={styles.headerTop}>
         {config?.homeLogoUrl ? (
-          <Image
-            source={{ uri: config.homeLogoUrl }}
-            style={styles.logo}
-            resizeMode="contain"
-            accessibilityIgnoresInvertColors
-          />
+          <HomeLogo key={config.homeLogoUrl} uri={config.homeLogoUrl} />
         ) : (
           <View />
         )}
@@ -296,6 +301,29 @@ export function HomeView({
   );
 }
 
+/**
+ * The workspace logo at its own shape, flush with the greeting's left edge.
+ * A fixed-width box with `contain` centred a square logo inside it, so it
+ * floated in from the edge; the web widget sizes it to the image instead.
+ * Square until the image reports its size, then as wide as its ratio needs,
+ * capped like the web widget.
+ */
+function HomeLogo({ uri }: { uri: string }) {
+  const [aspectRatio, setAspectRatio] = useState(1);
+  return (
+    <Image
+      source={{ uri }}
+      style={[styles.logo, { width: Math.min(LOGO_MAX_WIDTH, LOGO_HEIGHT * aspectRatio) }]}
+      resizeMode="contain"
+      accessibilityIgnoresInvertColors
+      onLoad={(event) => {
+        const { width, height } = event.nativeEvent.source ?? {};
+        if (width && height) setAspectRatio(width / height);
+      }}
+    />
+  );
+}
+
 /**
  * Staggered entrance for the body sections. Opacity and translate only, so the
  * whole thing runs on the native driver and never touches layout.