@giovchat/react-native 0.0.0-stage → 0.3.0

package/src/GiovChat.tsx

@@ -0,0 +1,640 @@
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import {
+  AccessibilityInfo,
+  ActivityIndicator,
+  FlatList,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  useColorScheme,
+  View,
+} from "react-native";
+import { useChatSession, sessionScope } from "./useChatSession";
+import type { GiovChatError } from "./errors";
+import {
+  GreetingBubble,
+  Header,
+  MessageBubble,
+  PreChatForm,
+  TypingIndicator,
+} from "./components";
+import type { GiovChatContact, GiovChatConnectionStatus, GiovChatSessionStorage, GiovMessage } from "./types";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { resolveStyleOverrides, type GiovChatStyleOverrides } from "./styleOverrides";
+import { WidgetStylesContext } from "./components/WidgetStyles";
+import { Branding } from "./components/Branding";
+import { GiovChatStringsContext, resolveStrings, type GiovChatStrings } from "./i18n";
+import { headerIdentity, messageSenderLabel } from "./identity";
+import { plainText } from "./markdown";
+import { clampMessage } from "./outbox";
+import { textOn } from "./color";
+import {
+  DEFAULT_ATTACHMENT_POLICY,
+  MAX_ATTACHED_FILES,
+  validateAttachments,
+  type AttachmentProblem,
+  type GiovChatAttachmentPicker,
+  type GiovChatPickedFile,
+} from "./attachments";
+import type { GiovPushOptions, GiovPushPlatform, GiovPushRegistration } from "./client";
+import { forgetUnreadCount, publishUnreadCount } from "./unread";
+import { RatingCard } from "./components/RatingCard";
+import { forgetRating, publishRating } from "./ratingStore";
+import type { GiovAnswerFeedback, GiovFeedbackValue, GiovRatingRequest, GiovRatingResult } from "./types";
+
+// ─── Public prop types ─────────────────────────────────────────────────────
+
+export interface GiovChatProps {
+  /**
+   * Tenant key from your agent dashboard.
+   * Widget settings (colors, greeting, pre-chat fields, bot name, etc.) are
+   * fetched from the server automatically using this key.
+   */
+  tenantKey: string;
+
+  /**
+   * Render mode:
+   * - `"modal"` (default) — wraps the chat in a native `Modal` sheet.
+   *   Control visibility with the `visible` prop.
+   * - `"fullscreen"` — renders inline, filling the parent container.
+   *   Use inside a dedicated screen or tab.
+   */
+  mode?: "modal" | "fullscreen";
+
+  /**
+   * Show or hide the chat.
+   * In `modal` mode this drives `Modal.visible`.
+   * In `fullscreen` mode the component renders `null` when `false`.
+   * @default true
+   */
+  visible?: boolean;
+
+  /** Called when the user taps the close (✕) button. */
+  onClose?: () => void;
+
+  /**
+   * Contact info for the currently logged-in user.
+   * Any field supplied here is forwarded to the server automatically
+   * and skips the corresponding pre-chat form field.
+   */
+  contact?: GiovChatContact;
+
+  /**
+   * Override the API base URL.
+   * @default "https://api.giovchat.app"
+   */
+  baseUrl?: string;
+
+  /**
+   * Override the primary brand color from the dashboard.
+   * Use a React Native color string.
+   */
+  primaryColor?: string;
+
+  /** Override the dashboard's theme. `"auto"` follows the device. */
+  theme?: "light" | "dark" | "auto";
+
+  /** Allowed font and color overrides. Layout and plan branding remain SDK-controlled. */
+  styleOverrides?: GiovChatStyleOverrides;
+
+  /** Interface language ("fr", "pt-BR", …). Defaults to the device language; unsupported ones use English. */
+  locale?: string;
+  /** Replace any of the SDK's interface strings. */
+  strings?: Partial<GiovChatStrings>;
+
+  /**
+   * Enables attachments: the host's own file or image picker. Visitors can attach only what the
+   * agent allows; without a picker the attach button is hidden.
+   */
+  attachmentPicker?: GiovChatAttachmentPicker;
+
+  /**
+   * Stay connected while the chat is hidden (and the app is in the foreground) so new replies are
+   * counted as unread. Only resumes an existing conversation; it never starts one.
+   */
+  keepConnected?: boolean;
+  /** Agent replies the visitor has not seen because the chat was hidden. */
+  onUnreadCountChange?: (count: number) => void;
+
+  /** Invoked once with the conversation ID after a session is created. */
+  onConversationStart?: (conversationId: string) => void;
+  /** Changes isolate/reset the session, for example on logout or account switching. */
+  sessionKey?: string | number;
+  /** Optional secure storage owned by the host application. No persistence by default. */
+  sessionStorage?: GiovChatSessionStorage;
+  onError?: (error: GiovChatError) => void;
+  onConnectionStatusChange?: (status: GiovChatConnectionStatus) => void;
+
+  /**
+   * Draw the conversation rating card ("How did we do?") in the chat. Turn it off to build your own with
+   * `useGiovRating()` or the handle (`submitRating`, `showRating`).
+   * @default true
+   */
+  ratingCard?: boolean;
+  /**
+   * Thumbs under GiovBot answers (hidden on servers without them).
+   * @default true
+   */
+  answerFeedback?: boolean;
+  /** The team or GiovBot asked the visitor to rate the conversation (once per card, live or from history). */
+  onRatingRequested?: (request: GiovRatingRequest) => void;
+  /** The visitor's rating was stored. */
+  onRatingSubmitted?: (result: GiovRatingResult) => void;
+  /** The visitor's vote on a GiovBot answer was stored. */
+  onAnswerFeedback?: (feedback: GiovAnswerFeedback) => void;
+}
+
+export interface GiovChatHandle {
+  /**
+   * Rates the conversation (`requestId` defaults to the open card). Rejects with a `GiovChatError`
+   * (`rating_closed`, `request_replaced`, `too_many_changes`, `invalid_rating`, `rate_limited` with
+   * `retryAfterSeconds`, `unsupported` on an older server).
+   */
+  submitRating(score: number, options?: { comment?: string; requestId?: string }): Promise<GiovRatingResult>;
+  /** Thumbs up or down (with an optional reason for down) on a GiovBot answer; `none` takes the vote back. */
+  submitAnswerFeedback(messageId: string, value: GiovFeedbackValue, options?: { reason?: string }): Promise<void>;
+  /** The rating card the visitor can answer or change now, or null. */
+  getRatingRequest(): GiovRatingRequest | null;
+  /** Opens the built-in rating sheet for the open card, over the chat or on its own. False when there is no card. */
+  showRating(): boolean;
+  /** Clears this identity's stored session and starts fresh if the chat is visible. */
+  reset(): Promise<void>;
+  /**
+   * Registers the device's push token (APNs or FCM) for replies in this conversation, now or once
+   * it connects. Pass `{ environment: "sandbox" }` from iOS development builds. Resolves
+   * `{ registered: false, reason: "unsupported" }` against a server without visitor push. The
+   * notification language defaults to the `locale` prop, else the device language.
+   *
+   * Before any conversation exists the promise stays pending until one connects (the visitor's
+   * first message starts it). It resolves `{ registered: false, reason: "no_conversation" }` when
+   * the chat unmounts (including a `sessionKey` change), on `reset()`, or when the workspace refuses
+   * the visitor's identity. The token is remembered: a new conversation after the team closed the
+   * last one is registered again automatically, until `reset()` or `unregisterPushToken()`.
+   */
+  registerPushToken(token: string, platform: GiovPushPlatform, options?: GiovPushOptions): Promise<GiovPushRegistration>;
+  /**
+   * Stops push notifications about this conversation on this device (sign-out, notifications turned
+   * off). Call it before `reset()`. Resolves true when the server confirmed; never throws.
+   */
+  unregisterPushToken(token: string): Promise<boolean>;
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export const GiovChat = React.forwardRef<GiovChatHandle, GiovChatProps>(function GiovChat(props, ref) {
+  const scope = sessionScope(props.baseUrl ?? "https://api.giovchat.app", props.tenantKey, props.contact, props.sessionKey);
+  return <GiovChatInstance key={scope} {...props} ref={ref} />;
+});
+
+function errorText(error: GiovChatError, strings: GiovChatStrings): string {
+  switch (error.code) {
+    case "invalid_session": return strings.sessionExpired;
+    case "conversation_closed": return strings.conversationEnded;
+    case "upload_failed": return strings.uploadFailed;
+    case "send_failed": return strings.sendFailed;
+    case "disconnected": case "connection_failed": return strings.reconnecting;
+    case "workspace_busy": return strings.busy;
+    default: return strings.unavailable;
+  }
+}
+
+function problemText(problem: AttachmentProblem, strings: GiovChatStrings): string {
+  switch (problem.kind) {
+    case "disabled": return strings.attachmentsOff;
+    case "type": return strings.typeNotAllowed(problem.name);
+    case "size": return strings.fileTooLarge(problem.name, problem.maxSizeMb);
+    case "count": return strings.tooManyFiles(problem.max);
+  }
+}
+
+const GiovChatInstance = React.forwardRef<GiovChatHandle, GiovChatProps>(function GiovChatInstance({
+  tenantKey,
+  mode = "modal",
+  visible = true,
+  onClose,
+  contact,
+  baseUrl = "https://api.giovchat.app",
+  primaryColor: overridePrimaryColor,
+  theme: themeOverride,
+  styleOverrides,
+  locale,
+  strings: stringOverrides,
+  attachmentPicker,
+  keepConnected,
+  onUnreadCountChange,
+  onConversationStart,
+  sessionKey,
+  sessionStorage,
+  onError,
+  onConnectionStatusChange,
+  ratingCard = true,
+  answerFeedback = true,
+  onRatingRequested,
+  onRatingSubmitted,
+  onAnswerFeedback,
+}: GiovChatProps, ref) {
+  const systemScheme = useColorScheme();
+  const custom = useMemo(() => resolveStyleOverrides(styleOverrides), [styleOverrides]);
+  const strings = useMemo(() => resolveStrings(locale, stringOverrides), [locale, stringOverrides]);
+
+  const scope = sessionScope(baseUrl, tenantKey, contact, sessionKey);
+  const chat = useChatSession({
+    tenantKey, baseUrl, visible, contact, scope, sessionKey, sessionStorage, keepConnected,
+    onError, onConnectionStatusChange, onConversationStart, onUnreadCountChange,
+    onRatingRequested, onRatingSubmitted, onAnswerFeedback,
+  });
+  const { phase, config, messages, agentTyping, agentTypingIsBot, error, sending, uploads, requiredFields, retry, reset, submitContact, send } = chat;
+  const [input, setInput] = useState("");
+  const [files, setFiles] = useState<GiovChatPickedFile[]>([]);
+  const [fileProblem, setFileProblem] = useState<string | null>(null);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const listRef = useRef<FlatList<GiovMessage>>(null);
+  const unreadOwner = useRef(Symbol("giovchat-unread"));
+  // The calls below read the latest state through a ref, so the handle and the hook entry stay stable.
+  const live = useRef(chat);
+  live.current = chat;
+  const ratingCalls = useMemo(() => ({
+    submit: (score: number, options?: { comment?: string; requestId?: string }) => live.current.submitRating(score, options),
+    submitFeedback: (messageId: string, value: GiovFeedbackValue, options?: { reason?: string }) => live.current.submitAnswerFeedback(messageId, value, options),
+    show: () => { if (!live.current.ratingRequest) return false; setSheetOpen(true); return true; },
+  }), []);
+  const ratingOwner = useRef(Symbol("giovchat-rating"));
+  useEffect(() => {
+    publishRating(ratingOwner.current, tenantKey, { request: chat.ratingRequest, supported: chat.ratingsSupported, ...ratingCalls });
+  }, [tenantKey, chat.ratingRequest, chat.ratingsSupported, ratingCalls]);
+  useEffect(() => () => forgetRating(ratingOwner.current), []);
+  useImperativeHandle(ref, () => ({
+    submitRating: ratingCalls.submit,
+    submitAnswerFeedback: ratingCalls.submitFeedback,
+    getRatingRequest: () => live.current.ratingRequest,
+    showRating: ratingCalls.show,
+    reset: async () => { setInput(""); setFiles([]); await reset(); },
+    registerPushToken: (token, platform, options) => chat.registerPushToken(token, platform, { ...(locale ? { locale } : {}), ...options }),
+    unregisterPushToken: chat.unregisterPushToken,
+  }), [reset, chat.registerPushToken, chat.unregisterPushToken, locale, ratingCalls]);
+  useEffect(() => {
+    const timer = setTimeout(() => listRef.current?.scrollToEnd({ animated: true }), 80);
+    return () => clearTimeout(timer);
+  }, [messages.length, messages[messages.length - 1]?.content]);
+  useEffect(() => { publishUnreadCount(unreadOwner.current, tenantKey, chat.unreadCount); }, [tenantKey, chat.unreadCount]);
+  // Screen readers hear each reply as it arrives (history is not read out again).
+  const incoming = chat.lastIncoming;
+  useEffect(() => {
+    if (!incoming || !visible) return;
+    const sender = messageSenderLabel(incoming, { botName: config?.botName, agentName: chat.currentAgentName, you: strings.you, automated: strings.automated, agent: strings.agent });
+    const text = plainText(incoming.content) || (incoming.attachments?.length ? strings.attachment : "");
+    if (text) AccessibilityInfo.announceForAccessibility?.(strings.newMessage(sender, text));
+  // Announced once per message: only the message itself triggers it.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [incoming]);
+  useEffect(() => () => forgetUnreadCount(unreadOwner.current), []);
+
+  const primaryColor = overridePrimaryColor ?? config?.primaryColor ?? "#7c3aed";
+  const themeSetting = themeOverride ?? config?.theme;
+  const isDark = themeSetting === "dark" || (themeSetting === "auto" && systemScheme === "dark");
+  const handleClose = useCallback(() => onClose?.(), [onClose]);
+  const policy = config?.attachments ?? DEFAULT_ATTACHMENT_POLICY;
+  // Uploads need a conversation: the first message starts it, then files can follow.
+  const canAttach = !!attachmentPicker && chat.hasConversation && !chat.closed && policy.enabled && policy.allowedTypes.length > 0;
+  const composing = phase === "ready" || phase === "connecting" || phase === "active";
+  const canSend = composing && !sending && (!!input.trim() || files.length > 0);
+  const handleSend = async () => {
+    const text = input.trim();
+    if (!canSend) return;
+    const sentFiles = files;
+    if (await send(text, sentFiles)) {
+      setInput((current) => current.trim() === text ? "" : current);
+      setFiles((current) => current === sentFiles ? [] : current);
+      setFileProblem(null);
+    }
+  };
+  const handleAttach = async () => {
+    if (!attachmentPicker) return;
+    setFileProblem(null);
+    try {
+      const picked = await attachmentPicker.pick({ allowedTypes: policy.allowedTypes, maxFiles: Math.max(1, MAX_ATTACHED_FILES - files.length), maxSizeMb: policy.maxSizeMb });
+      const { accepted, problems } = validateAttachments(picked, files.length, policy);
+      if (accepted.length) setFiles((current) => [...current, ...accepted]);
+      if (problems.length) setFileProblem(problems.map((problem) => problemText(problem, strings)).join(" "));
+    } catch { /* The picker was dismissed or failed; nothing changes. */ }
+  };
+  const onRateCard = useCallback(async (requestId: string, score: number, comment: string) => {
+    await live.current.submitRating(score, { requestId, comment });
+  }, []);
+  const onVote = useCallback((messageId: string, value: GiovFeedbackValue, reason?: string) =>
+    live.current.submitAnswerFeedback(messageId, value, { reason }), []);
+  const sheetMessage = sheetOpen && chat.ratingRequest ? messages.find((message) => message.id === chat.ratingRequest?.messageId) : undefined;
+  // The sheet closes by itself once there is no card to show (answered cards stay until dismissed).
+  useEffect(() => { if (sheetOpen && !chat.ratingRequest) setSheetOpen(false); }, [sheetOpen, chat.ratingRequest]);
+  const identity = config ? headerIdentity(config, chat.currentAgentName, chat.currentAgentAvatar) : null;
+  const subtitle = phase === "active" || phase === "ready"
+    ? identity?.kind === "person" ? strings.statusPerson : identity?.kind === "bot" ? strings.statusBot : strings.statusTeam
+    : phase === "connecting" ? strings.connecting : null;
+  const showClose = mode === "modal" || !!onClose;
+  const bgColor = isDark ? "#0a0a0a" : "#fff";
+  // Black or white on the buttons' colour, by WCAG contrast.
+  const buttonInk = textOn(custom.button.backgroundColor ?? primaryColor);
+
+  // ── Render ───────────────────────────────────────────────────────────────────
+
+  const chatContent = (
+    <GiovChatStringsContext.Provider value={strings}>
+    <WidgetStylesContext.Provider value={custom}>
+      <SafeAreaView style={[styles.safeArea, { backgroundColor: bgColor }, custom.container]}>
+        <Header
+          privacyPolicyUrl={config?.privacyPolicyUrl}
+          title={identity?.title ?? config?.title ?? "Chat"}
+          subtitle={subtitle}
+          primaryColor={primaryColor}
+          avatarUrl={identity?.avatar}
+          kind={identity?.kind}
+          onClose={showClose ? handleClose : undefined}
+        />
+
+        {(phase === "loading" || phase === "idle") && (
+          <View style={styles.centered}>
+            <ActivityIndicator size="large" color={primaryColor} />
+            <Text style={[styles.hint, { color: isDark ? "#555" : "#aaa" }, custom.hint]}>{strings.loading}</Text>
+          </View>
+        )}
+
+        {phase === "error" && (
+          <View style={styles.centered}>
+            <Text style={[styles.errorText, custom.errorText]}>{error ? errorText(error, strings) : strings.unavailable}</Text>
+            <TouchableOpacity
+              style={[styles.retryBtn, { backgroundColor: primaryColor }, custom.button]}
+              onPress={retry}
+              accessibilityRole="button"
+              accessibilityLabel={strings.retry}
+            >
+              <Text style={[styles.retryBtnText, { color: buttonInk }, custom.buttonText]}>{strings.tryAgain}</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+
+        {phase === "pre-chat" && config?.requestUserInfo && (
+          <PreChatForm
+            fields={requiredFields}
+            primaryColor={primaryColor}
+            dark={isDark}
+            initialValues={contact}
+            onSubmit={submitContact}
+          />
+        )}
+
+        {composing && (
+          <KeyboardAvoidingView
+            style={styles.flex}
+            behavior={Platform.OS === "ios" ? "padding" : "height"}
+          >
+            {error && (
+              <Text accessibilityRole="alert" style={[styles.errorText, { padding: 10 }, custom.errorText]}>{errorText(error, strings)}</Text>
+            )}
+            <FlatList
+              ref={listRef}
+              data={messages}
+              keyExtractor={(item) => item.clientMessageId ?? item.id}
+              contentContainerStyle={styles.listContent}
+              ListHeaderComponent={
+                config ? (
+                  <GreetingBubble
+                    text={config.greetingText}
+                    dark={isDark}
+                  />
+                ) : null
+              }
+              ListFooterComponent={agentTyping ? <TypingIndicator dark={isDark} isBot={agentTypingIsBot} botName={config?.botName} /> : null}
+              renderItem={({ item }: { item: GiovMessage }) => (
+                <MessageBubble
+                  message={item}
+                  primaryColor={primaryColor}
+                  dark={isDark}
+                  botName={config?.botName}
+                  resolveAttachmentUrl={chat.attachmentUrl}
+                  onRetry={(message) => message.clientMessageId && chat.retryMessage(message.clientMessageId)}
+                  onDiscard={(message) => message.clientMessageId && chat.discardMessage(message.clientMessageId)}
+                  ratingCard={ratingCard}
+                  onRate={chat.ratingsSupported ? onRateCard : undefined}
+                  onVote={answerFeedback && chat.ratingsSupported ? onVote : undefined}
+                />
+              )}
+            />
+
+            {(files.length > 0 || fileProblem) && (
+              <View style={[styles.files, { backgroundColor: bgColor, borderTopColor: isDark ? "#1e1e1e" : "#ebebeb" }]}>
+                {fileProblem && <Text accessibilityRole="alert" style={[styles.fileProblem, custom.errorText]}>{fileProblem}</Text>}
+                <View style={styles.fileChips}>
+                  {files.map((file, index) => {
+                    const upload = uploads[index];
+                    return (
+                      <View key={`${file.uri}-${index}`} style={[styles.fileChip, { backgroundColor: isDark ? "#1c1c1c" : "#f2f2f2" }]}>
+                        <Text style={[styles.fileChipText, { color: isDark ? "#e5e5e5" : "#222" }, custom.hint]} numberOfLines={1}>
+                          {upload ? strings.uploading(Math.round(upload.progress * 100)) : file.name}
+                        </Text>
+                        {!sending && (
+                          <TouchableOpacity
+                            onPress={() => setFiles((current) => current.filter((_, i) => i !== index))}
+                            accessibilityRole="button"
+                            accessibilityLabel={strings.removeAttachment(file.name)}
+                            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                          >
+                            <Text style={{ color: isDark ? "#aaa" : "#666", fontSize: 14 }}>✕</Text>
+                          </TouchableOpacity>
+                        )}
+                      </View>
+                    );
+                  })}
+                </View>
+              </View>
+            )}
+
+            {chat.closed ? (
+              <View style={[styles.closedBar, { borderTopColor: isDark ? "#1e1e1e" : "#ebebeb", backgroundColor: bgColor }, custom.composer]}>
+                <Text style={[styles.hint, { color: isDark ? "#aaa" : "#555" }, custom.hint]}>{strings.conversationEnded}</Text>
+                <TouchableOpacity
+                  testID="giov-new-conversation"
+                  style={[styles.retryBtn, { backgroundColor: primaryColor }, custom.button]}
+                  onPress={() => { setInput(""); setFiles([]); void chat.startNew(); }}
+                  accessibilityRole="button"
+                  accessibilityLabel={strings.startNewConversation}
+                >
+                  <Text style={[styles.retryBtnText, { color: buttonInk }, custom.buttonText]}>{strings.startNewConversation}</Text>
+                </TouchableOpacity>
+              </View>
+            ) : (
+            <View
+              style={[
+                styles.composerRow,
+                {
+                  borderTopColor: isDark ? "#1e1e1e" : "#ebebeb",
+                  backgroundColor: bgColor,
+                },
+                custom.composer,
+              ]}
+            >
+              {canAttach && (
+                <TouchableOpacity
+                  style={[styles.attachBtn, { borderColor: isDark ? "#2e2e2e" : "#e5e5e5" }]}
+                  onPress={handleAttach}
+                  disabled={sending || files.length >= MAX_ATTACHED_FILES}
+                  accessibilityRole="button"
+                  accessibilityLabel={strings.attachFile}
+                >
+                  <Text style={[styles.attachIcon, { color: isDark ? "#ccc" : "#555" }]}>+</Text>
+                </TouchableOpacity>
+              )}
+              <TextInput
+                style={[
+                  styles.composerInput,
+                  {
+                    color: isDark ? "#f0f0f0" : "#111",
+                    backgroundColor: isDark ? "#1c1c1c" : "#f5f5f5",
+                    borderColor: isDark ? "#2e2e2e" : "#e5e5e5",
+                  },
+                  custom.input,
+                ]}
+                value={input}
+                // Over the limit (a long paste) the text is cut at 2000, never dropped, and never through an emoji.
+                onChangeText={(value) => { setInput(clampMessage(value)); if (value.trim()) chat.notifyTyping(); }}
+                placeholder={config?.textArea ?? strings.composerPlaceholder}
+                placeholderTextColor={custom.hint.color ?? (isDark ? "#484848" : "#b0b0b0")}
+                accessibilityLabel={strings.messageInput}
+                // Typing goes on while files upload; only Send waits.
+                editable={composing}
+                multiline
+              />
+              <TouchableOpacity
+                style={[
+                  styles.sendBtn,
+                  { backgroundColor: primaryColor },
+                  custom.button,
+                  !canSend && styles.sendBtnOff,
+                ]}
+                onPress={handleSend}
+                disabled={!canSend}
+                accessibilityRole="button"
+                accessibilityLabel={strings.sendMessage}
+              >
+                <Text style={[styles.sendIcon, { color: buttonInk }, custom.buttonText]}>↑</Text>
+              </TouchableOpacity>
+            </View>
+            )}
+          </KeyboardAvoidingView>
+        )}
+        <Branding showBranding={config?.showBranding} />
+      </SafeAreaView>
+    </WidgetStylesContext.Provider>
+    </GiovChatStringsContext.Provider>
+  );
+
+  // The rating sheet is its own Modal beside the chat, so it opens even while the chat is hidden.
+  const sheet = sheetMessage?.rating ? (
+    <Modal visible transparent animationType="slide" onRequestClose={() => setSheetOpen(false)}>
+      <GiovChatStringsContext.Provider value={strings}>
+        <View style={styles.sheetScrim}>
+          <View testID="giov-rating-sheet" accessibilityViewIsModal style={[styles.sheet, { backgroundColor: bgColor }]}>
+            <View style={styles.sheetHeader}>
+              <Text accessibilityRole="header" style={[styles.sheetTitle, { color: isDark ? "#f0f0f0" : "#111" }]}>{strings.rateTitle}</Text>
+              <TouchableOpacity testID="giov-rating-sheet-close" accessibilityRole="button" accessibilityLabel={strings.closeRating} onPress={() => setSheetOpen(false)} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+                <Text style={{ color: isDark ? "#aaa" : "#666", fontSize: 18 }}>✕</Text>
+              </TouchableOpacity>
+            </View>
+            <RatingCard block={sheetMessage.rating} primaryColor={primaryColor} dark={isDark} onRate={chat.ratingsSupported ? onRateCard : undefined} testIDPrefix="giov-sheet-rating" />
+          </View>
+        </View>
+      </GiovChatStringsContext.Provider>
+    </Modal>
+  ) : null;
+
+  if (mode === "modal") {
+    return (
+      <>
+        <Modal
+          visible={visible}
+          animationType="slide"
+          presentationStyle="pageSheet"
+          onRequestClose={handleClose}
+        >
+          {chatContent}
+        </Modal>
+        {sheet}
+      </>
+    );
+  }
+
+  return <>{visible ? chatContent : null}{sheet}</>;
+});
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  safeArea: { flex: 1 },
+  centered: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 14,
+    padding: 24,
+  },
+  hint: { fontSize: 14, marginTop: 4 },
+  errorText: {
+    color: "#dc2626",
+    fontSize: 14,
+    textAlign: "center",
+    lineHeight: 20,
+  },
+  retryBtn: {
+    borderRadius: 8,
+    paddingHorizontal: 28,
+    paddingVertical: 11,
+  },
+  retryBtnText: { color: "#fff", fontWeight: "600", fontSize: 14 },
+  listContent: { paddingBottom: 12 },
+  files: { paddingHorizontal: 10, paddingTop: 8, borderTopWidth: StyleSheet.hairlineWidth, gap: 6 },
+  fileProblem: { color: "#dc2626", fontSize: 12 },
+  fileChips: { flexDirection: "row", flexWrap: "wrap", gap: 6 },
+  fileChip: { flexDirection: "row", alignItems: "center", gap: 6, borderRadius: 14, paddingHorizontal: 10, paddingVertical: 5, maxWidth: 220 },
+  fileChipText: { fontSize: 12, flexShrink: 1 },
+  composerRow: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    gap: 8,
+    padding: 10,
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  attachBtn: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  attachIcon: { fontSize: 22, lineHeight: 24 },
+  composerInput: {
+    flex: 1,
+    borderWidth: 1,
+    borderRadius: 22,
+    paddingHorizontal: 14,
+    paddingVertical: Platform.OS === "ios" ? 10 : 8,
+    fontSize: 14,
+    maxHeight: 120,
+  },
+  sendBtn: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  sendBtnOff: { opacity: 0.35 },
+  closedBar: { alignItems: "center", gap: 10, padding: 14, borderTopWidth: StyleSheet.hairlineWidth },
+  sheetScrim: { flex: 1, justifyContent: "flex-end", backgroundColor: "rgba(0,0,0,0.4)" },
+  sheet: { borderTopLeftRadius: 18, borderTopRightRadius: 18, padding: 20, paddingBottom: 32, gap: 8 },
+  sheetHeader: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
+  sheetTitle: { fontSize: 16, fontWeight: "700" },
+  sendIcon: { color: "#fff", fontSize: 18, fontWeight: "700", lineHeight: 22 },
+});