@repzo/widget-react-native 1.0.0

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

@@ -0,0 +1,46 @@
+/** Props and label bundle for the chat thread. */
+
+import type { AgentUiAction, Message, WidgetAttachment } from '../../../types';
+import type { AgentUiBlockLabels } from '../../components/AgentUiBlocks';
+
+export interface ChatLabels {
+  back: string;
+  loading: string;
+  loadEarlier: string;
+  emptyConversation: string;
+  messagePlaceholder: string;
+  failedToSend: string;
+  thinking: string;
+  team: string;
+  statusOnline: string;
+  statusAway: string;
+  close: string;
+  today: string;
+  yesterday: string;
+  conversationUpdated: string;
+  procedureSend: string;
+  procedureSent: string;
+  blocks: AgentUiBlockLabels;
+}
+
+export interface ChatViewProps {
+  messages: Message[];
+  loading: boolean;
+  hasMoreMessages: boolean;
+  agentTyping: boolean;
+  color: string;
+  /** Whoever is handling this thread, once the backend assigns someone. */
+  agentName?: string | null;
+  agentAvatar?: string | null;
+  isOnline: boolean;
+  prefillText?: string;
+  offlineMessage?: string;
+  locale: string;
+  labels: ChatLabels;
+  onSendMessage: (body: string, attachments?: WidgetAttachment[], action?: AgentUiAction) => void;
+  onIdentifyVisitor?: (data: { email?: string; name?: string; phone?: string }) => Promise<void>;
+  onLoadMore: () => void;
+  onTyping: (isTyping: boolean) => void;
+  onBack: () => void;
+  onClose: () => void;
+}

package/src/ui/screens/conversations/ConversationsList.styles.ts

@@ -0,0 +1,111 @@
+/** Styles for the Messages space: centered header, row list and the floating pill. */
+
+import { StyleSheet } from 'react-native';
+
+import { rowDividerInset } from '../../components/ConversationRow';
+import { fontSize, palette, radius, shadows, spacing } from '../../styles/theme';
+
+export const styles = StyleSheet.create({
+  header: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    // Leaves room for the absolutely-placed close button on both sides so the
+    // title stays optically centered.
+    paddingHorizontal: spacing.xxl + spacing.lg,
+    paddingTop: spacing.lg,
+    paddingBottom: spacing.md,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: palette.borderSoft,
+  },
+  headerCopy: {
+    alignItems: 'center',
+    gap: 2,
+  },
+  title: {
+    fontSize: fontSize.title,
+    fontWeight: '600',
+    color: palette.ink,
+  },
+  statusLine: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs + 2,
+  },
+  statusDot: {
+    width: 7,
+    height: 7,
+    borderRadius: 3.5,
+  },
+  statusText: {
+    fontSize: fontSize.caption,
+    color: palette.textMuted,
+  },
+  close: {
+    position: 'absolute',
+    end: spacing.lg,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    paddingHorizontal: spacing.xs,
+  },
+  listContent: {
+    flexGrow: 1,
+  },
+  listContentEmpty: {
+    justifyContent: 'center',
+  },
+  divider: {
+    marginStart: rowDividerInset(),
+  },
+  empty: {
+    alignItems: 'center',
+    paddingHorizontal: spacing.xxl,
+    paddingVertical: 48,
+  },
+  emptyIcon: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: spacing.lg,
+  },
+  emptyTitle: {
+    fontSize: fontSize.body,
+    fontWeight: '600',
+    color: palette.ink,
+    textAlign: 'center',
+  },
+  emptySubtitle: {
+    fontSize: fontSize.meta,
+    color: palette.textSubtle,
+    marginTop: spacing.xs,
+    textAlign: 'center',
+  },
+  fabWrapper: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: spacing.lg,
+    alignItems: 'center',
+  },
+  fab: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    minHeight: 46,
+    paddingHorizontal: spacing.xl,
+    paddingVertical: spacing.md,
+    borderRadius: radius.pill,
+    ...shadows.floating,
+  },
+  fabPressed: {
+    opacity: 0.9,
+    transform: [{ scale: 0.98 }],
+  },
+  fabLabel: {
+    color: palette.white,
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+  },
+});

package/src/ui/screens/conversations/ConversationsList.tsx

@@ -0,0 +1,144 @@
+/**
+ * Messages space — conversation rows plus the floating "new conversation"
+ * pill. Port of `client/src/widget/components/ConversationsList.tsx`.
+ *
+ * Rows are shared with the Home space's recent preview, and both sort for
+ * themselves because the store keeps conversations in arrival order.
+ */
+
+import { useCallback, useMemo, useState } from 'react';
+import { FlatList, Pressable, RefreshControl, Text, View } from 'react-native';
+
+import { ConversationRow } from '../../components/ConversationRow';
+import { ArrowRightIcon, ChatOutlineIcon, CloseIcon } from '../../components/icons';
+import { globalStyles } from '../../styles/global';
+import { palette, spacing, withAlpha } from '../../styles/theme';
+import { sortByRecency } from '../../utils/conversations';
+import { flipForRTL } from '../../utils/rtl';
+import { styles } from './ConversationsList.styles';
+import type { ConversationsListProps } from './ConversationsList.types';
+
+export function ConversationsList({
+  conversations,
+  unreadByConversation,
+  color,
+  allowNewConversations,
+  showPreviousConversations,
+  isOnline,
+  startConversationLabel,
+  labels,
+  onSelect,
+  onNewConversation,
+  onRefresh,
+  onClose,
+}: ConversationsListProps) {
+  const [refreshing, setRefreshing] = useState(false);
+
+  const visibleConversations = useMemo(
+    () => (showPreviousConversations ? sortByRecency(conversations) : []),
+    [conversations, showPreviousConversations]
+  );
+
+  // The realtime stream can drop messages while backgrounded, so let the
+  // visitor force the same refresh the app does when it returns to the front.
+  const handleRefresh = useCallback(async () => {
+    setRefreshing(true);
+    try {
+      await onRefresh();
+    } finally {
+      setRefreshing(false);
+    }
+  }, [onRefresh]);
+
+  const isEmpty = visibleConversations.length === 0;
+
+  return (
+    <View style={globalStyles.screen}>
+      <View style={styles.header}>
+        <View style={styles.headerCopy}>
+          <Text style={styles.title}>{labels.messages}</Text>
+          <View style={styles.statusLine}>
+            <View
+              style={[
+                styles.statusDot,
+                { backgroundColor: isOnline ? palette.online : palette.textSubtle },
+              ]}
+            />
+            <Text style={styles.statusText}>
+              {isOnline ? labels.statusOnline : labels.statusAway}
+            </Text>
+          </View>
+        </View>
+        <Pressable
+          onPress={onClose}
+          accessibilityRole="button"
+          accessibilityLabel={labels.close}
+          hitSlop={12}
+          style={styles.close}>
+          <CloseIcon size={18} />
+        </Pressable>
+      </View>
+
+      <FlatList
+        data={visibleConversations}
+        keyExtractor={(item) => item.id}
+        contentContainerStyle={[
+          styles.listContent,
+          isEmpty && styles.listContentEmpty,
+          { paddingBottom: allowNewConversations ? 84 : spacing.xl },
+        ]}
+        ItemSeparatorComponent={() => <View style={[globalStyles.divider, styles.divider]} />}
+        refreshControl={
+          showPreviousConversations ? (
+            <RefreshControl
+              refreshing={refreshing}
+              onRefresh={handleRefresh}
+              tintColor={color}
+              colors={[color]}
+            />
+          ) : undefined
+        }
+        ListEmptyComponent={
+          <View style={styles.empty}>
+            <View style={[styles.emptyIcon, { backgroundColor: withAlpha(color, 0.08) }]}>
+              <ChatOutlineIcon size={30} color={color} />
+            </View>
+            <Text style={styles.emptyTitle}>
+              {showPreviousConversations ? labels.noMessages : labels.historyHidden}
+            </Text>
+            {allowNewConversations ? (
+              <Text style={styles.emptySubtitle}>{labels.startBelow}</Text>
+            ) : null}
+          </View>
+        }
+        renderItem={({ item }) => (
+          <ConversationRow
+            conversation={item}
+            color={color}
+            fallbackName={labels.team}
+            timeLabels={labels.time}
+            unreadCount={unreadByConversation[item.id] ?? 0}
+            unreadLabel={labels.unread}
+            onPress={() => onSelect(item.id)}
+          />
+        )}
+      />
+
+      {allowNewConversations ? (
+        <View style={styles.fabWrapper} pointerEvents="box-none">
+          <Pressable
+            onPress={onNewConversation}
+            accessibilityRole="button"
+            style={({ pressed }) => [
+              styles.fab,
+              { backgroundColor: color },
+              pressed && styles.fabPressed,
+            ]}>
+            <Text style={styles.fabLabel}>{startConversationLabel}</Text>
+            <ArrowRightIcon size={16} color={palette.white} style={flipForRTL()} />
+          </Pressable>
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/ui/screens/conversations/ConversationsList.types.ts

@@ -0,0 +1,33 @@
+/** Props and label bundle for the Messages space. */
+
+import type { Conversation } from '../../../types';
+import type { RelativeTimeLabels } from '../../utils/conversations';
+
+export interface ConversationsListLabels {
+  messages: string;
+  noMessages: string;
+  historyHidden: string;
+  startBelow: string;
+  close: string;
+  team: string;
+  statusOnline: string;
+  statusAway: string;
+  time: RelativeTimeLabels;
+  /** Template with a `{count}` token. */
+  unread: string;
+}
+
+export interface ConversationsListProps {
+  conversations: Conversation[];
+  unreadByConversation: Record<string, number>;
+  color: string;
+  allowNewConversations: boolean;
+  showPreviousConversations: boolean;
+  isOnline: boolean;
+  startConversationLabel: string;
+  labels: ConversationsListLabels;
+  onSelect: (conversationId: string) => void;
+  onNewConversation: () => void;
+  onRefresh: () => Promise<void> | void;
+  onClose: () => void;
+}

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

@@ -0,0 +1,246 @@
+/**
+ * Styles and layout constants for the Home space. The constants live next to
+ * the sheet so the component and the styles can never disagree about them.
+ */
+
+import { I18nManager, StyleSheet } from 'react-native';
+
+import { rowDividerInset } from '../../components/ConversationRow';
+import { fontSize, palette, radius, shadows, spacing } from '../../styles/theme';
+import { START_ALIGN } from '../../utils/rtl';
+
+/**
+ * Header geometry in dp, measured off the web widget so the two surfaces line
+ * up: a tall header with the greeting pinned low, a start card that overhangs
+ * the seam by a fixed amount rather than half its height, and a fade that is a
+ * straight white ramp over the bottom of the header, starting just under the
+ * heading.
+ */
+export const HEADER_MIN_HEIGHT = 228;
+/** Between the greeting and whatever comes next: the seam, or the start card. */
+export const HEADER_BOTTOM_PADDING = 36;
+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;
+export const CLOSE_ICON_SIZE = 14;
+
+export const styles = StyleSheet.create({
+  contentContainer: {
+    flexGrow: 1,
+  },
+  // Tall on purpose, with the greeting pinned to the bottom by `headerSpacer`:
+  // the close row stays at the top and the heading sits just above the seam.
+  header: {
+    minHeight: HEADER_MIN_HEIGHT,
+    paddingHorizontal: spacing.xl,
+    paddingTop: spacing.xl,
+    // When the start card is shown the component grows this to clear the card.
+    paddingBottom: HEADER_BOTTOM_PADDING,
+    overflow: 'hidden',
+  },
+  imageScrim: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.16)',
+  },
+  // Always as tall as the logo slot, so the greeting lands in the same place
+  // whether or not the workspace uploaded a logo.
+  headerTop: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    minHeight: 40,
+  },
+  // Soaks up the header's spare height so the greeting hugs the seam, and
+  // never shrinks below the gap the web widget keeps under the close row.
+  headerSpacer: {
+    flex: 1,
+    minHeight: 40,
+  },
+  logo: {
+    width: 132,
+    height: 40,
+  },
+  closeButton: {
+    marginStart: 'auto',
+    padding: (CLOSE_BUTTON_SIZE - CLOSE_ICON_SIZE) / 2,
+    borderRadius: radius.pill,
+    backgroundColor: 'rgba(255,255,255,0.18)',
+  },
+  heading: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.display,
+    lineHeight: fontSize.display * 1.15,
+    fontWeight: '600',
+    marginBottom: spacing.md,
+  },
+  subheading: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.body,
+    lineHeight: fontSize.body * 1.4,
+  },
+
+  // Meets the header on a straight seam. No top padding here: the start card
+  // is pulled up past this edge, and the rest of the content takes its spacing
+  // from `bodyContent`.
+  body: {
+    flex: 1,
+    backgroundColor: palette.white,
+    paddingHorizontal: spacing.xl,
+    paddingBottom: spacing.xxl,
+  },
+  bodyContent: {
+    flex: 1,
+    paddingTop: spacing.xl,
+  },
+
+  offlineNotice: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: spacing.sm + 2,
+    padding: spacing.md,
+    borderRadius: radius.md,
+    backgroundColor: palette.warningBg,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.warningBorder,
+    marginBottom: spacing.lg,
+  },
+  offlineText: {
+    textAlign: START_ALIGN,
+    flex: 1,
+    fontSize: fontSize.meta,
+    lineHeight: fontSize.meta * 1.4,
+    color: palette.warningText,
+  },
+
+  startCardSlot: {
+    marginTop: -START_CARD_LIFT,
+  },
+  // Neutral and opaque, like the web card: it spans two backgrounds, and a
+  // translucent or brand-tinted fill would let the header bleed through its
+  // top or stain the seam. Shadowed because without it the half over the
+  // header reads as a flat cut-out.
+  startCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    minHeight: START_CARD_MIN_HEIGHT,
+    paddingHorizontal: spacing.xl,
+    paddingVertical: spacing.lg + 2,
+    borderRadius: radius.lg,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.border,
+    backgroundColor: palette.surface,
+    ...shadows.card,
+  },
+  startCardPressed: {
+    opacity: 0.85,
+  },
+  startIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  startCopy: {
+    flex: 1,
+    minWidth: 0,
+  },
+  startTitle: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.title,
+    fontWeight: '600',
+    color: palette.ink,
+  },
+  startSubtitle: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.meta,
+    color: palette.textSubtle,
+    marginTop: 2,
+  },
+
+  recentHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    minHeight: 28,
+    marginBottom: spacing.sm,
+  },
+  recentTitle: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.caption,
+    fontWeight: '700',
+    color: palette.textMuted,
+    letterSpacing: I18nManager.isRTL ? 0 : 0.6,
+    textTransform: 'uppercase',
+  },
+  viewAllButton: {
+    minHeight: 32,
+    paddingHorizontal: spacing.xs,
+    justifyContent: 'center',
+  },
+  viewAllLabel: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+  },
+  // Border rather than a shadow: `overflow: hidden` keeps the rows' ripple
+  // inside the rounded corners, and would clip a shadow on iOS anyway.
+  recentCard: {
+    overflow: 'hidden',
+  },
+  recentDivider: {
+    marginStart: rowDividerInset(spacing.lg),
+  },
+  // Absorbs the slack so the status strip stays pinned to the bottom, and
+  // centers the empty hint when there is nothing else to show.
+  spacer: {
+    flex: 1,
+    minHeight: spacing.lg,
+    justifyContent: 'center',
+  },
+  emptyHint: {
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingVertical: spacing.xl,
+  },
+  emptyHintText: {
+    fontSize: fontSize.meta,
+    color: palette.textSubtle,
+    textAlign: 'center',
+  },
+
+  statusStrip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm + 2,
+    minHeight: 56,
+    paddingTop: spacing.lg,
+    marginTop: spacing.lg,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: palette.borderSoft,
+  },
+  avatarStack: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  avatarStackItem: {
+    borderWidth: 2,
+    borderColor: palette.white,
+  },
+  avatarStackOverlap: {
+    marginStart: -10,
+  },
+  statusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+  statusText: {
+    textAlign: START_ALIGN,
+    flex: 1,
+    fontSize: fontSize.meta,
+    color: palette.textMuted,
+  },
+});