@repzo/widget-react-native 1.0.0

package/src/ui/WidgetProvider.tsx

@@ -0,0 +1,434 @@
+/**
+ * `<RepzoWidgetProvider>` — mount once at the app root.
+ *
+ * Hosts the chat modal and subscribes to the controller's store. It owns no
+ * session state: the SSE stream and unread count live in the store, so closing
+ * the modal (or never mounting it) never drops a conversation.
+ */
+
+import { useCallback, useMemo } from 'react';
+import {
+  ActivityIndicator,
+  Modal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+import { isTerminalErrorCode } from '../api/client';
+import { controller } from '../controller';
+import { buildLabels, createTranslator, formatLabel } from '../i18n';
+import { useWidgetState } from '../state/use-widget-state';
+import type { AgentUiAction, WidgetAttachment, WidgetSpaceType } from '../types';
+import { WidgetErrorBoundary } from './components/ErrorBoundary';
+import { AlertIcon } from './components/icons';
+import { OutboundMessageCard } from './components/OutboundMessageCard';
+import { WidgetPanel } from './components/WidgetPanel';
+import { useKeyboardOverlap } from './hooks/use-keyboard-overlap';
+import { useWidgetInsets } from './hooks/use-widget-insets';
+import { ChatView } from './screens/chat/ChatView';
+import { ConversationsList } from './screens/conversations/ConversationsList';
+import { HomeView } from './screens/home/HomeView';
+import { PreChatForm } from './screens/pre-chat/PreChatForm';
+import { globalStyles } from './styles/global';
+import { buildTheme, palette, radius, spacing, fontSize, withAlpha } from './styles/theme';
+import { pickRecentConversations, pickTeamAgents } from './utils/conversations';
+
+export interface RepzoWidgetProviderProps {
+  /** Rendered underneath the widget — usually the rest of the app. */
+  children?: React.ReactNode;
+  /** iOS sheet style. `pageSheet` keeps the native swipe-to-dismiss grabber. */
+  presentationStyle?: 'pageSheet' | 'fullScreen';
+}
+
+export function RepzoWidgetProvider({
+  children,
+  presentationStyle = 'pageSheet',
+}: RepzoWidgetProviderProps) {
+  const state = useWidgetState();
+  const store = controller.store;
+  const insets = useWidgetInsets();
+  // Lifts the whole panel — header, thread and composer — clear of the
+  // keyboard. It only listens while the modal is on screen, and its padding
+  // sits inside the safe-area padding below, so the two add up to exactly the
+  // keyboard's height.
+  const keyboard = useKeyboardOverlap(state.isOpen, insets.bottom);
+
+  // An iOS pageSheet is already inset below the status bar by the system; a
+  // fullScreen iOS modal and any Android modal (edge-to-edge since API 35) are
+  // not, so they own the top inset.
+  const topInset = Platform.OS === 'ios' && presentationStyle === 'pageSheet' ? 0 : insets.top;
+
+  const theme = useMemo(() => buildTheme(state.config), [state.config]);
+  const labels = useMemo(
+    () => buildLabels(createTranslator(state.config, state.locale)),
+    [state.config, state.locale]
+  );
+
+  // Home previews the two newest threads and credits the agents behind them.
+  const recentConversations = useMemo(
+    () => pickRecentConversations(state.conversations, 2),
+    [state.conversations]
+  );
+  const teamAgents = useMemo(() => pickTeamAgents(state.conversations, 3), [state.conversations]);
+
+  // Always the sum of the per-thread counts, so the tab badge tracks threads
+  // that are genuinely still unread.
+  const unreadThreadTotal = state.unreadCount;
+
+  // A cached theme is painted before init answers, so `config` alone says
+  // nothing about whether the chat works. Without a session (failed boot) or
+  // after a terminal 403, the UI must say so instead of looking usable.
+  const terminalError = !!state.error && isTerminalErrorCode(state.errorCode);
+  const blockingError = !!state.error && (!state.booted || terminalError);
+
+  const timeLabels = useMemo(
+    () => ({
+      justNow: labels.timeJustNow,
+      minutes: labels.timeMinutes,
+      hours: labels.timeHours,
+      days: labels.timeDays,
+      months: labels.timeMonths,
+      years: labels.timeYears,
+    }),
+    [labels]
+  );
+
+  const blockLabels = useMemo(
+    () => ({
+      service: labels.blockService,
+      product: labels.blockProduct,
+      chooseTime: labels.blockChooseTime,
+      professional: labels.blockProfessional,
+      priceOffer: labels.blockPriceOffer,
+      working: labels.working,
+    }),
+    [labels]
+  );
+
+  const handleClose = useCallback(() => store.hide(), [store]);
+
+  const handleTabChange = useCallback((tab: WidgetSpaceType) => store.setActiveTab(tab), [store]);
+
+  const handleSendMessage = useCallback(
+    (body: string, attachments?: WidgetAttachment[], action?: AgentUiAction) => {
+      store.sendMessage(body, attachments ?? [], action).catch(() => {
+        // The failed bubble already surfaces this to the visitor.
+      });
+    },
+    [store]
+  );
+
+  const handlePreChatSubmit = useCallback(
+    async (data: Record<string, string>) => {
+      try {
+        await store.identifyVisitor({ email: data.email, name: data.name, phone: data.phone });
+      } catch {
+        // Identification is best-effort — never block the conversation.
+      }
+      store.setView('chat');
+    },
+    [store]
+  );
+
+  const handleBack = useCallback(() => {
+    store.setView(state.activeTab === 'messages' ? 'conversations' : 'home');
+  }, [state.activeTab, store]);
+
+  const handleStartConversation = useCallback(() => {
+    if (!theme.allowNewConversations) return;
+    store.startNewConversation();
+  }, [store, theme.allowNewConversations]);
+
+  const activeConversation = state.activeConversationId
+    ? state.conversations.find((conversation) => conversation.id === state.activeConversationId)
+    : null;
+  const isHomeSurface = state.view === 'home';
+
+  const renderContent = () => {
+    if (state.loading && !state.config) {
+      return (
+        <View style={styles.centered}>
+          <ActivityIndicator color={theme.primaryColor} />
+          <Text style={styles.stateText}>{labels.connecting}</Text>
+        </View>
+      );
+    }
+
+    if (blockingError) {
+      // Terminal codes need the host (or Workstation) to change something —
+      // a Retry button would only burn the rate-limited init.
+      const message = !terminalError
+        ? labels.connectionError
+        : state.errorCode === 'identity_verification_failed'
+          ? labels.identityVerificationError
+          : labels.chatUnavailable;
+      return (
+        <View style={styles.centered}>
+          <View
+            style={[styles.stateIcon, { backgroundColor: withAlpha(theme.primaryColor, 0.08) }]}>
+            <AlertIcon size={24} />
+          </View>
+          <Text style={styles.errorText}>{message}</Text>
+          {!terminalError ? (
+            <Pressable
+              onPress={() => void store.retry()}
+              accessibilityRole="button"
+              style={[styles.retryButton, { backgroundColor: theme.primaryColor }]}>
+              <Text style={styles.retryLabel}>{labels.retry}</Text>
+            </Pressable>
+          ) : null}
+          <Pressable onPress={handleClose} accessibilityRole="button" hitSlop={8}>
+            <Text style={styles.closeLabel}>{labels.close}</Text>
+          </Pressable>
+        </View>
+      );
+    }
+
+    if (state.view === 'prechat' && state.config) {
+      return (
+        <PreChatForm
+          fields={state.config.preChatFields}
+          color={theme.primaryColor}
+          labels={{
+            title: labels.preChatTitle,
+            subtitle: labels.preChatSubtitle,
+            skip: labels.preChatSkip,
+            submit: labels.preChatSubmit,
+            close: labels.close,
+            fieldRequired: labels.fieldRequired,
+            invalidEmail: labels.invalidEmail,
+          }}
+          onSubmit={handlePreChatSubmit}
+          onSkip={() => store.setView('chat')}
+          onClose={handleClose}
+        />
+      );
+    }
+
+    if (state.view === 'chat') {
+      return (
+        <ChatView
+          messages={state.messages}
+          loading={state.messagesLoading}
+          hasMoreMessages={state.hasMoreMessages}
+          agentTyping={state.agentTyping}
+          color={theme.primaryColor}
+          agentName={activeConversation?.agentName}
+          agentAvatar={activeConversation?.agentAvatar}
+          isOnline={theme.isOnline}
+          locale={state.locale}
+          prefillText={state.prefillText}
+          offlineMessage={theme.offlineMessage}
+          labels={{
+            back: labels.back,
+            loading: labels.loading,
+            loadEarlier: labels.loadEarlier,
+            emptyConversation: labels.emptyConversation,
+            messagePlaceholder: labels.messagePlaceholder,
+            failedToSend: labels.failedToSend,
+            thinking: labels.thinking,
+            team: labels.team,
+            statusOnline: labels.homeStatusOnline,
+            statusAway: labels.homeStatusAway,
+            close: labels.close,
+            today: labels.today,
+            yesterday: labels.yesterday,
+            conversationUpdated: labels.conversationUpdated,
+            procedureSend: labels.procedureSend,
+            procedureSent: labels.procedureSent,
+            blocks: blockLabels,
+          }}
+          onSendMessage={handleSendMessage}
+          onIdentifyVisitor={(data) => store.identifyVisitor(data)}
+          onLoadMore={() => store.loadMoreMessages()}
+          onTyping={(isTyping) => store.notifyTyping(isTyping)}
+          onBack={handleBack}
+          onClose={handleClose}
+        />
+      );
+    }
+
+    if (isHomeSurface) {
+      return (
+        <HomeView
+          config={state.config}
+          color={theme.primaryColor}
+          visitorName={state.visitorProfile.name}
+          conversationCount={state.conversations.length}
+          recentConversations={recentConversations}
+          unreadByConversation={state.unreadByConversation}
+          teamAgents={teamAgents}
+          isOnline={theme.isOnline}
+          offlineMessage={theme.offlineMessage}
+          startConversationLabel={theme.startConversationLabel}
+          replyTimeLabel={theme.replyTimeLabel}
+          allowNewConversations={theme.allowNewConversations}
+          showPreviousConversations={theme.showPreviousConversations}
+          labels={{
+            close: labels.close,
+            viewPrevious: labels.viewPreviousConversations,
+            viewAll: formatLabel(labels.homeViewAllCount, { count: state.conversations.length }),
+            recentTitle: labels.homeRecentTitle,
+            noConversations: labels.homeNoConversations,
+            statusOnline: labels.homeStatusOnline,
+            statusAway: labels.homeStatusAway,
+            team: labels.team,
+            time: timeLabels,
+            unread: labels.unreadBadge,
+          }}
+          onClose={handleClose}
+          onStartConversation={handleStartConversation}
+          onViewConversations={() => handleTabChange('messages')}
+          onOpenConversation={(conversationId) => store.openConversation(conversationId)}
+        />
+      );
+    }
+
+    return (
+      <ConversationsList
+        conversations={state.conversations}
+        unreadByConversation={state.unreadByConversation}
+        color={theme.primaryColor}
+        allowNewConversations={theme.allowNewConversations}
+        showPreviousConversations={theme.showPreviousConversations}
+        startConversationLabel={theme.startConversationLabel}
+        isOnline={theme.isOnline}
+        labels={{
+          messages: labels.messages,
+          noMessages: labels.noMessages,
+          historyHidden: labels.historyHidden,
+          startBelow: labels.startBelow,
+          close: labels.close,
+          team: labels.team,
+          statusOnline: labels.homeStatusOnline,
+          statusAway: labels.homeStatusAway,
+          time: timeLabels,
+          unread: labels.unreadBadge,
+        }}
+        onSelect={(conversationId) => store.openConversation(conversationId)}
+        onNewConversation={handleStartConversation}
+        onRefresh={() => store.refreshConversations()}
+        onClose={handleClose}
+      />
+    );
+  };
+
+  return (
+    <>
+      {children}
+      <Modal
+        visible={state.isOpen}
+        animationType="slide"
+        presentationStyle={Platform.OS === 'ios' ? presentationStyle : undefined}
+        onRequestClose={handleClose}
+        statusBarTranslucent={false}>
+        <View style={[globalStyles.screen, { paddingTop: topInset, paddingBottom: insets.bottom }]}>
+          <View
+            onLayout={keyboard.onLayout}
+            style={[globalStyles.fill, { paddingBottom: keyboard.overlap }]}>
+            {/* Wraps only the widget's own UI — never the host's children. */}
+            <WidgetErrorBoundary
+              resetKey={`${state.isOpen}:${state.view}:${state.activeConversationId ?? ''}`}
+              fallback={(reset) => (
+                <View style={styles.centered}>
+                  <Text style={styles.errorText}>{labels.widgetCrashed}</Text>
+                  <Pressable
+                    onPress={reset}
+                    accessibilityRole="button"
+                    style={[styles.retryButton, { backgroundColor: theme.primaryColor }]}>
+                    <Text style={styles.retryLabel}>{labels.retry}</Text>
+                  </Pressable>
+                  <Pressable onPress={handleClose} accessibilityRole="button" hitSlop={8}>
+                    <Text style={styles.closeLabel}>{labels.close}</Text>
+                  </Pressable>
+                </View>
+              )}>
+              <WidgetPanel
+                color={theme.primaryColor}
+                activeTab={state.activeTab}
+                onTabChange={handleTabChange}
+                showTabs={!blockingError && state.view !== 'chat' && state.view !== 'prechat'}
+                spaces={state.config?.spaces ?? []}
+                unreadCount={unreadThreadTotal}
+                labels={{
+                  home: labels.home,
+                  messages: labels.messages,
+                  unread: formatLabel(labels.unreadBadge, { count: unreadThreadTotal }),
+                }}>
+                {state.outboundMessage &&
+                !blockingError &&
+                state.view !== 'chat' &&
+                state.view !== 'prechat' ? (
+                  <OutboundMessageCard
+                    message={state.outboundMessage}
+                    color={theme.primaryColor}
+                    labels={{
+                      title: labels.outboundTitle,
+                      cta: labels.outboundCta,
+                      dismiss: labels.dismiss,
+                    }}
+                    onDismiss={() => store.dismissOutboundMessage()}
+                    onStartChat={(prefill) => {
+                      store.dismissOutboundMessage();
+                      store.startNewConversation(prefill);
+                    }}
+                    onTrack={(event, metadata) => store.track(event, metadata)}
+                  />
+                ) : null}
+                {renderContent()}
+              </WidgetPanel>
+            </WidgetErrorBoundary>
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  centered: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: spacing.xxl,
+    gap: spacing.lg,
+  },
+  stateText: {
+    fontSize: fontSize.meta,
+    color: palette.textSubtle,
+    textAlign: 'center',
+  },
+  stateIcon: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  errorText: {
+    fontSize: fontSize.body,
+    color: palette.textMuted,
+    textAlign: 'center',
+  },
+  retryButton: {
+    borderRadius: radius.pill,
+    paddingHorizontal: spacing.xl,
+    paddingVertical: spacing.md,
+    minHeight: 44,
+    justifyContent: 'center',
+  },
+  retryLabel: {
+    color: palette.white,
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+  },
+  closeLabel: {
+    color: palette.textSubtle,
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+    padding: spacing.xs,
+  },
+});