@repzo/widget-react-native 1.0.0

package/src/ui/components/Avatar.tsx

@@ -0,0 +1,86 @@
+/**
+ * Agent avatar with graceful fallbacks: photo → initials → person glyph.
+ * A broken URL must never leave a blank hole in the header or the list.
+ */
+
+import { useState } from 'react';
+import {
+  I18nManager,
+  Image,
+  StyleSheet,
+  Text,
+  View,
+  type ImageStyle,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { PersonIcon } from './icons';
+import { palette, withAlpha } from '../styles/theme';
+
+interface AvatarProps {
+  avatar?: string | null;
+  name?: string | null;
+  size?: number;
+  /** Background when there is no photo. */
+  color?: string;
+  /** Used in the colored header, where the placeholder is a translucent white. */
+  translucent?: boolean;
+  style?: StyleProp<ViewStyle & ImageStyle>;
+}
+
+export function Avatar({
+  avatar,
+  name,
+  size = 40,
+  color = palette.disabled,
+  translucent = false,
+  style,
+}: AvatarProps) {
+  const [broken, setBroken] = useState(false);
+  const dimensions = { width: size, height: size, borderRadius: size / 2 };
+
+  if (avatar && !broken) {
+    return (
+      <Image
+        source={{ uri: avatar }}
+        onError={() => setBroken(true)}
+        style={[dimensions, style]}
+        resizeMode="cover"
+        accessibilityIgnoresInvertColors
+      />
+    );
+  }
+
+  const background = translucent ? withAlpha(palette.white, 0.24) : name ? color : palette.disabled;
+
+  return (
+    <View style={[dimensions, styles.fallback, { backgroundColor: background }, style]}>
+      {name ? (
+        <Text style={[styles.initials, { fontSize: Math.round(size * 0.36) }]} numberOfLines={1}>
+          {getInitials(name)}
+        </Text>
+      ) : (
+        <PersonIcon size={Math.round(size * 0.5)} color={palette.white} />
+      )}
+    </View>
+  );
+}
+
+export function getInitials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length >= 2) return `${parts[0]?.[0] ?? ''}${parts[1]?.[0] ?? ''}`.toUpperCase();
+  return name.slice(0, 2).toUpperCase();
+}
+
+const styles = StyleSheet.create({
+  fallback: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  initials: {
+    color: palette.white,
+    fontWeight: '700',
+    letterSpacing: I18nManager.isRTL ? 0 : -0.5,
+  },
+});

package/src/ui/components/ConversationRow.tsx

@@ -0,0 +1,163 @@
+/**
+ * One conversation in a list: who replied, when, and the last thing said.
+ * Shared by the Home space's recent preview and the Messages list so the two
+ * cannot drift apart.
+ */
+
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import type { Conversation } from '../../types';
+import { Avatar } from './Avatar';
+import { formatLabel } from '../../i18n';
+import { formatRelativeTime, type RelativeTimeLabels } from '../utils/conversations';
+import { ChevronIcon } from './icons';
+import { forwardDirection, START_ALIGN } from '../utils/rtl';
+import { fontSize, palette, spacing } from '../styles/theme';
+
+const AVATAR_SIZE = 40;
+
+interface ConversationRowProps {
+  conversation: Conversation;
+  color: string;
+  /** Stands in until an agent is assigned to the thread. */
+  fallbackName: string;
+  timeLabels: RelativeTimeLabels;
+  /** Replies that arrived since the visitor last opened this thread. */
+  unreadCount?: number;
+  /** Template with a `{count}` token, for screen readers. */
+  unreadLabel?: string;
+  /** Messages runs full-bleed; Home insets it inside a card. */
+  horizontalPadding?: number;
+  onPress: () => void;
+}
+
+export function ConversationRow({
+  conversation,
+  color,
+  fallbackName,
+  timeLabels,
+  unreadCount = 0,
+  unreadLabel,
+  horizontalPadding = spacing.xl,
+  onPress,
+}: ConversationRowProps) {
+  const displayName = conversation.agentName || fallbackName;
+  const hasUnread = unreadCount > 0;
+  const unreadSuffix =
+    hasUnread && unreadLabel ? `. ${formatLabel(unreadLabel, { count: unreadCount })}` : '';
+
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={`${
+        conversation.snippet ? `${displayName}. ${conversation.snippet}` : displayName
+      }${unreadSuffix}`}
+      android_ripple={{ color: palette.borderSoft }}
+      style={({ pressed }) => [
+        styles.row,
+        { paddingHorizontal: horizontalPadding },
+        pressed && styles.rowPressed,
+      ]}>
+      <Avatar
+        avatar={conversation.agentAvatar}
+        name={conversation.agentName}
+        size={AVATAR_SIZE}
+        color={color}
+      />
+      <View style={styles.content}>
+        <View style={styles.topLine}>
+          <Text style={[styles.name, hasUnread && styles.nameUnread]} numberOfLines={1}>
+            {displayName}
+          </Text>
+          <Text style={styles.time}>
+            {conversation.lastMessageAt
+              ? formatRelativeTime(conversation.lastMessageAt, timeLabels)
+              : ''}
+          </Text>
+        </View>
+        {conversation.snippet ? (
+          <Text style={[styles.snippet, hasUnread && styles.snippetUnread]} numberOfLines={2}>
+            {conversation.snippet}
+          </Text>
+        ) : null}
+      </View>
+      {hasUnread ? (
+        <View style={[styles.badge, { backgroundColor: color }]}>
+          <Text style={styles.badgeLabel}>{unreadCount > 9 ? '9+' : unreadCount}</Text>
+        </View>
+      ) : (
+        <ChevronIcon size={16} direction={forwardDirection()} color={palette.textSubtle} />
+      )}
+    </Pressable>
+  );
+}
+
+/** 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;
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    minHeight: 74,
+    paddingVertical: spacing.md,
+    backgroundColor: palette.white,
+  },
+  rowPressed: {
+    backgroundColor: palette.surface,
+  },
+  content: {
+    flex: 1,
+    minWidth: 0,
+  },
+  topLine: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing.sm,
+  },
+  name: {
+    textAlign: START_ALIGN,
+    flex: 1,
+    fontSize: fontSize.body,
+    fontWeight: '600',
+    color: palette.ink,
+  },
+  nameUnread: {
+    fontWeight: '700',
+  },
+  time: {
+    fontSize: fontSize.caption,
+    color: palette.textSubtle,
+  },
+  snippet: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.meta,
+    lineHeight: fontSize.meta * 1.35,
+    color: palette.textMuted,
+    marginTop: 2,
+  },
+  snippetUnread: {
+    color: palette.text,
+    fontWeight: '500',
+  },
+  // Replaces the chevron rather than crowding beside it, so the row keeps
+  // the same width whether or not there is anything unread.
+  badge: {
+    minWidth: 20,
+    height: 20,
+    borderRadius: 10,
+    paddingHorizontal: spacing.xs + 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  badgeLabel: {
+    color: palette.white,
+    fontSize: fontSize.micro,
+    fontWeight: '700',
+  },
+});

package/src/ui/components/ErrorBoundary.tsx

@@ -0,0 +1,49 @@
+/**
+ * Keeps a render error inside the widget's own UI from unmounting the host
+ * app. `<RepzoWidgetProvider>` renders the host's `children` next to the
+ * modal, so an uncaught throw in, say, a malformed agent block would
+ * otherwise take the whole app down with it. Never wraps host children.
+ */
+
+import { Component, type ReactNode } from 'react';
+
+interface WidgetErrorBoundaryProps {
+  children: ReactNode;
+  /** Rendered instead of `children` after a crash; `reset` re-renders them. */
+  fallback: ReactNode | ((reset: () => void) => ReactNode);
+  /** Any change clears a caught error — e.g. the visitor moved to another screen. */
+  resetKey?: string | number | null;
+}
+
+interface WidgetErrorBoundaryState {
+  hasError: boolean;
+}
+
+export class WidgetErrorBoundary extends Component<
+  WidgetErrorBoundaryProps,
+  WidgetErrorBoundaryState
+> {
+  state: WidgetErrorBoundaryState = { hasError: false };
+
+  static getDerivedStateFromError(): WidgetErrorBoundaryState {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: unknown) {
+    console.warn('[repzo-widget] render error caught', error);
+  }
+
+  componentDidUpdate(previous: WidgetErrorBoundaryProps) {
+    if (this.state.hasError && previous.resetKey !== this.props.resetKey) this.reset();
+  }
+
+  reset = () => {
+    this.setState({ hasError: false });
+  };
+
+  render() {
+    if (!this.state.hasError) return this.props.children;
+    const { fallback } = this.props;
+    return typeof fallback === 'function' ? fallback(this.reset) : fallback;
+  }
+}

package/src/ui/components/Gradient.tsx

@@ -0,0 +1,165 @@
+/**
+ * Brand backgrounds drawn without a native dependency: the gradient a header
+ * is painted with, and the fade that washes it out into the page. Both borrow
+ * the host app's `react-native-linear-gradient` when it is installed and stack
+ * solid bands when it is not (see `utils/native-gradient.ts`).
+ */
+
+import type { ReactNode } from 'react';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { hexToRgb, mixHex, palette, withAlpha } from '../styles/theme';
+import { DIAGONAL, getNativeGradient, VERTICAL } from '../utils/native-gradient';
+
+/**
+ * How many bands a ramp needs to look continuous. Banding is a function of the
+ * colour delta rather than the pixel height: one band per output level is as
+ * smooth as 8-bit colour gets, and anything coarser shows seams on a tall
+ * header. A fixed count was why dark headers looked striped.
+ */
+function bandCountFor(stops: string[]): number {
+  let total = 0;
+  for (let index = 0; index < stops.length - 1; index += 1) {
+    const from = hexToRgb(stops[index] as string);
+    const to = hexToRgb(stops[index + 1] as string);
+    if (!from || !to) continue;
+    total += Math.max(
+      Math.abs(from[0] - to[0]),
+      Math.abs(from[1] - to[1]),
+      Math.abs(from[2] - to[2])
+    );
+  }
+  // 1.25 bands per output level lands on a worst-case step of one level,
+  // which is as smooth as 8-bit colour can be, without paying for more views.
+  return Math.min(160, Math.max(24, Math.round(total * 1.25)));
+}
+
+/**
+ * Multi-band approximation of a CSS linear-gradient. RN has no gradient
+ * primitive and the SDK ships no native deps, so we stack interpolated bands.
+ */
+export function GradientBackground({
+  colors,
+  children,
+  style,
+  bands,
+}: {
+  colors: string[];
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  /** Defaults to whatever the colour ramp needs to look continuous. */
+  bands?: number;
+}) {
+  const stops = colors.filter(Boolean);
+  if (stops.length === 0) return <View style={style}>{children}</View>;
+  if (stops.length === 1) {
+    return <View style={[style, { backgroundColor: stops[0] }]}>{children}</View>;
+  }
+
+  // The container is always a plain View and the fill always sits behind the
+  // children in an absolute layer. A native gradient is a third-party view
+  // that lays its children out differently under the new architecture, so it
+  // paints and nothing else.
+  return (
+    <View style={[style, { backgroundColor: stops[0], overflow: 'hidden' }]}>
+      <View style={StyleSheet.absoluteFill} pointerEvents="none">
+        <GradientFill colors={stops} bands={bands} />
+      </View>
+      {children}
+    </View>
+  );
+}
+
+/** The paint layer: a native ramp when the host has one, stacked bands if not. */
+function GradientFill({ colors, bands }: { colors: string[]; bands?: number }) {
+  const NativeGradient = getNativeGradient();
+  if (NativeGradient) {
+    return (
+      <NativeGradient
+        colors={colors}
+        start={DIAGONAL.start}
+        end={DIAGONAL.end}
+        style={StyleSheet.absoluteFill}
+      />
+    );
+  }
+
+  // Horizontal strips: this path is always vertical, whatever DIAGONAL says.
+  const bandCount = bands ?? bandCountFor(colors);
+  const segments = colors.length - 1;
+  return (
+    <>
+      {Array.from({ length: bandCount }).map((_, index) => {
+        const progress = index / (bandCount - 1);
+        const scaled = Math.min(progress * segments, segments - 0.0001);
+        const segment = Math.floor(scaled);
+        const color = mixHex(
+          colors[segment] as string,
+          colors[segment + 1] as string,
+          scaled - segment
+        );
+        return <View key={index} style={[styles.band, { backgroundColor: color }]} />;
+      })}
+    </>
+  );
+}
+
+/**
+ * Washes the bottom of a header out into the page colour: a straight ramp from
+ * fully transparent at the top to opaque at the bottom edge, the same
+ * `linear-gradient(transparent, white)` the web widget draws. Callers size it
+ * so the ramp begins below the heading, which it would otherwise wash out.
+ */
+export function FadeOverlay({
+  color = palette.white,
+  height = 72,
+  bands,
+  style,
+}: {
+  color?: string;
+  height?: number;
+  /** Defaults to a count fine enough that the alpha ramp reads as continuous. */
+  bands?: number;
+  style?: ViewStyle;
+}) {
+  const NativeGradient = getNativeGradient();
+  // Positioning stays on a plain View; the native ramp only ever paints
+  // inside it, so it never has to honour `position: absolute` itself.
+  return (
+    <View style={[styles.fadeOverlay, { height }, style]} pointerEvents="none">
+      {NativeGradient ? (
+        <NativeGradient
+          colors={[withAlpha(color, 0), color]}
+          start={VERTICAL.start}
+          end={VERTICAL.end}
+          style={StyleSheet.absoluteFill}
+        />
+      ) : (
+        // Alpha steps over a dark header are amplified by the contrast with
+        // white, so the fallback needs a finer ramp than a colour-to-colour one.
+        Array.from({
+          length: bands ?? Math.min(192, Math.max(48, Math.round(height * 2.5))),
+        }).map((_, index, all) => (
+          // The last band is fully opaque so the header ends flush with the
+          // body colour, with no hairline where the two meet.
+          <View
+            key={index}
+            style={[styles.band, { backgroundColor: withAlpha(color, (index + 1) / all.length) }]}
+          />
+        ))
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  band: {
+    flex: 1,
+  },
+  fadeOverlay: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+});

package/src/ui/components/Launcher.tsx

@@ -0,0 +1,128 @@
+/**
+ * Optional floating launcher with an unread badge — the RN counterpart of the
+ * web widget's `Bubble.tsx`. Apps that already have their own chat entry point
+ * (like Repzo's map screen) can ignore it and call `RepzoWidget.present()`
+ * directly; it is exported so smaller hosts get a launcher for free.
+ *
+ * It positions itself absolutely, so mount it inside a full-screen container.
+ */
+
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { useWidgetState } from '../../state/use-widget-state';
+import { controller } from '../../controller';
+import { ChatIcon, ChevronIcon } from './icons';
+import {
+  DEFAULT_PRIMARY_COLOR,
+  fontSize,
+  palette,
+  radius,
+  shadows,
+  spacing,
+} from '../styles/theme';
+
+export interface LauncherProps {
+  /** Overrides the widget config's position/padding when the host needs to. */
+  position?: 'left' | 'right';
+  verticalPadding?: number;
+  horizontalPadding?: number;
+  /** Hides the launcher without unmounting the provider. */
+  hidden?: boolean;
+}
+
+export function Launcher({
+  position,
+  verticalPadding,
+  horizontalPadding,
+  hidden = false,
+}: LauncherProps) {
+  const state = useWidgetState();
+  const config = state.config;
+
+  if (hidden || !state.booted || config?.showLauncher === false) return null;
+
+  const color = config?.primaryColor || DEFAULT_PRIMARY_COLOR;
+  const side = position ?? config?.position ?? 'right';
+  const bottom = Math.max(verticalPadding ?? config?.launcherVerticalPadding ?? 20, 20);
+  const inset = Math.max(horizontalPadding ?? config?.launcherHorizontalPadding ?? 20, 20);
+  const text = config?.bubbleText;
+  const showText = !!text && !state.isOpen;
+
+  return (
+    <View
+      style={[styles.wrapper, { bottom }, side === 'right' ? { right: inset } : { left: inset }]}
+      pointerEvents="box-none">
+      <Pressable
+        onPress={() => controller.store.toggle()}
+        accessibilityRole="button"
+        accessibilityLabel={state.isOpen ? 'Close chat' : 'Open chat'}
+        style={({ pressed }) => [
+          styles.bubble,
+          showText ? styles.bubbleWithText : styles.bubbleRound,
+          { backgroundColor: color },
+          pressed && styles.pressed,
+        ]}>
+        {showText ? <Text style={styles.bubbleText}>{text}</Text> : null}
+        {state.isOpen ? (
+          <ChevronIcon size={24} direction="down" color={palette.white} />
+        ) : (
+          <ChatIcon size={26} color={palette.white} />
+        )}
+      </Pressable>
+
+      {!state.isOpen && state.unreadCount > 0 ? (
+        <View style={styles.badge} pointerEvents="none">
+          <Text style={styles.badgeLabel}>{state.unreadCount > 9 ? '9+' : state.unreadCount}</Text>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'absolute',
+  },
+  bubble: {
+    height: 60,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: spacing.sm + 2,
+    ...shadows.floating,
+  },
+  bubbleRound: {
+    width: 60,
+    borderRadius: 30,
+  },
+  bubbleWithText: {
+    borderRadius: radius.pill,
+    paddingHorizontal: spacing.xl,
+  },
+  bubbleText: {
+    color: palette.white,
+    fontSize: fontSize.body,
+    fontWeight: '700',
+  },
+  pressed: {
+    opacity: 0.9,
+    transform: [{ scale: 0.97 }],
+  },
+  badge: {
+    position: 'absolute',
+    top: -4,
+    right: -4,
+    minWidth: 22,
+    height: 22,
+    borderRadius: 11,
+    paddingHorizontal: spacing.xs,
+    backgroundColor: palette.danger,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  badgeLabel: {
+    color: palette.white,
+    fontSize: fontSize.caption,
+    fontWeight: '700',
+  },
+});