@giovchat/react-native 0.0.0-stage → 0.2.0

package/src/components/PreChatForm.tsx

@@ -0,0 +1,183 @@
+import React, { useState } from "react";
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import type { GiovChatContact, RequestUserInfo } from "../types";
+import { useWidgetStyles } from "./WidgetStyles";
+import { useGiovChatStrings } from "../i18n";
+import { textOn } from "../color";
+
+export interface PreChatFormProps {
+  fields: RequestUserInfo;
+  primaryColor: string;
+  dark: boolean;
+  initialValues?: GiovChatContact;
+  onSubmit: (info: GiovChatContact) => void;
+}
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export function PreChatForm({
+  fields,
+  primaryColor,
+  dark,
+  initialValues,
+  onSubmit,
+}: PreChatFormProps) {
+  const custom = useWidgetStyles();
+  const strings = useGiovChatStrings();
+  const [firstName, setFirstName] = useState(initialValues?.firstName ?? "");
+  const [lastName, setLastName] = useState(initialValues?.lastName ?? "");
+  const [email, setEmail] = useState(initialValues?.email ?? "");
+  const [phone, setPhone] = useState(initialValues?.phone ?? "");
+
+  const bg = dark ? "#111" : "#fff";
+  const textColor = dark ? "#f0f0f0" : "#111";
+  const labelColor = dark ? "#aaa" : "#555";
+  const inputBg = dark ? "#1c1c1c" : "#fafafa";
+  const inputBorder = dark ? "#333" : "#e5e5e5";
+  const placeholderColor = custom.hint.color ?? (dark ? "#555" : "#c0c0c0");
+
+  const isValid =
+    (!fields.firstName || firstName.trim().length > 0) &&
+    (!fields.lastName || lastName.trim().length > 0) &&
+    (!fields.email || EMAIL_RE.test(email.trim())) &&
+    (!fields.phone || phone.trim().length > 0);
+
+  const handleSubmit = () => {
+    if (!isValid) return;
+    onSubmit({
+      firstName: firstName.trim() || undefined,
+      lastName: lastName.trim() || undefined,
+      email: email.trim() || undefined,
+      phone: phone.trim() || undefined,
+    });
+  };
+
+  const inputStyle = [
+    styles.input,
+    { color: textColor, backgroundColor: inputBg, borderColor: inputBorder },
+    custom.input,
+  ];
+
+  return (
+    <ScrollView
+      style={[styles.scroll, { backgroundColor: bg }, custom.form]}
+      contentContainerStyle={styles.content}
+      keyboardShouldPersistTaps="handled"
+    >
+      <Text style={[styles.heading, { color: textColor }, custom.formTitle]}>{strings.preChatTitle}</Text>
+
+      {fields.firstName && (
+        <View style={styles.field}>
+          <Text style={[styles.label, { color: labelColor }, custom.label]}>{strings.required(strings.firstName)}</Text>
+          <TextInput
+            style={inputStyle}
+            value={firstName}
+            accessibilityLabel={strings.required(strings.firstName)}
+            onChangeText={setFirstName}
+            placeholder={strings.firstName}
+            placeholderTextColor={placeholderColor}
+            autoCapitalize="words"
+            autoCorrect={false}
+            returnKeyType="next"
+          />
+        </View>
+      )}
+
+      {fields.lastName && (
+        <View style={styles.field}>
+          <Text style={[styles.label, { color: labelColor }, custom.label]}>{strings.required(strings.lastName)}</Text>
+          <TextInput
+            style={inputStyle}
+            value={lastName}
+            accessibilityLabel={strings.required(strings.lastName)}
+            onChangeText={setLastName}
+            placeholder={strings.lastName}
+            placeholderTextColor={placeholderColor}
+            autoCapitalize="words"
+            autoCorrect={false}
+            returnKeyType="next"
+          />
+        </View>
+      )}
+
+      {fields.email && (
+        <View style={styles.field}>
+          <Text style={[styles.label, { color: labelColor }, custom.label]}>{strings.required(strings.email)}</Text>
+          <TextInput
+            style={inputStyle}
+            value={email}
+            accessibilityLabel={strings.required(strings.email)}
+            onChangeText={setEmail}
+            placeholder="you@example.com"
+            placeholderTextColor={placeholderColor}
+            keyboardType="email-address"
+            autoCapitalize="none"
+            autoCorrect={false}
+            returnKeyType="next"
+          />
+        </View>
+      )}
+
+      {fields.phone && (
+        <View style={styles.field}>
+          <Text style={[styles.label, { color: labelColor }, custom.label]}>{strings.required(strings.phone)}</Text>
+          <TextInput
+            style={inputStyle}
+            value={phone}
+            accessibilityLabel={strings.required(strings.phone)}
+            onChangeText={setPhone}
+            placeholder="+1 555 000 0000"
+            placeholderTextColor={placeholderColor}
+            keyboardType="phone-pad"
+            returnKeyType="done"
+          />
+        </View>
+      )}
+
+      <TouchableOpacity
+        style={[
+          styles.submitBtn,
+          { backgroundColor: primaryColor },
+          custom.button,
+          !isValid && styles.submitBtnDisabled,
+        ]}
+        onPress={handleSubmit}
+        disabled={!isValid}
+        accessibilityRole="button"
+        accessibilityLabel={strings.startChat}
+      >
+        <Text style={[styles.submitBtnText, { color: textOn(custom.button.backgroundColor ?? primaryColor) }, custom.buttonText]}>{strings.startChat}</Text>
+      </TouchableOpacity>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  scroll: { flex: 1 },
+  content: { padding: 20, flexGrow: 1 },
+  heading: { fontSize: 18, fontWeight: "700", marginBottom: 24 },
+  field: { marginBottom: 16 },
+  label: { fontSize: 13, fontWeight: "600", marginBottom: 6 },
+  input: {
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingHorizontal: 14,
+    paddingVertical: 11,
+    fontSize: 14,
+  },
+  submitBtn: {
+    borderRadius: 10,
+    paddingVertical: 14,
+    alignItems: "center",
+    marginTop: 8,
+  },
+  submitBtnDisabled: { opacity: 0.45 },
+  submitBtnText: { color: "#fff", fontWeight: "700", fontSize: 15 },
+});

package/src/components/TypingIndicator.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Text, View } from "react-native";
+import { bubbleStyles as s } from "./bubbleStyles";
+import { useWidgetStyles } from "./WidgetStyles";
+import { GiovBotMark } from "./GiovBotMark";
+import { useGiovChatStrings } from "../i18n";
+
+export interface TypingIndicatorProps {
+  dark: boolean;
+  /** Only explicit server AI identity enables the AI mark. */
+  isBot?: boolean;
+  botName?: string;
+}
+
+export function TypingIndicator({ dark, isBot, botName }: TypingIndicatorProps) {
+  const custom = useWidgetStyles();
+  const strings = useGiovChatStrings();
+  const isAI = isBot === true;
+  return (
+    <View
+      style={[s.wrapper, s.left, isAI && s.assistantRow]}
+      // One element, so screen readers say the label instead of the dots (iOS ignores a label otherwise).
+      accessible
+      accessibilityLabel={isAI ? strings.botTyping(botName?.trim() || "GiovBot") : strings.teamTyping}
+    >
+      {isAI && <GiovBotMark />}
+      <View style={[s.bubble, s.agentBubble, dark && s.agentBubbleDark, custom.agentBubble]}>
+        <Text style={[{ color: dark ? "#666" : "#aaa", fontSize: 20, letterSpacing: 4 }, custom.agentText]}>
+          • • •
+        </Text>
+      </View>
+    </View>
+  );
+}

package/src/components/WidgetStyles.tsx

@@ -0,0 +1,5 @@
+import { createContext, useContext } from "react";
+import { resolveStyleOverrides } from "../styleOverrides";
+
+export const WidgetStylesContext = createContext(resolveStyleOverrides(undefined));
+export const useWidgetStyles = () => useContext(WidgetStylesContext);

package/src/components/bubbleStyles.ts

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+
+/** Shared styles for chat bubble components. */
+export const bubbleStyles = StyleSheet.create({
+  wrapper: { marginHorizontal: 16, marginBottom: 8 },
+  right: { alignItems: "flex-end" },
+  left: { alignItems: "flex-start" },
+  assistantRow: { flexDirection: "row", gap: 8 },
+  bubble: { maxWidth: "78%", borderRadius: 16, padding: 12 },
+  visitorBubble: { borderBottomRightRadius: 4 },
+  agentBubble: { backgroundColor: "#f0f0f0", borderBottomLeftRadius: 4 },
+  agentBubbleDark: { backgroundColor: "#242424" },
+  sender: { fontSize: 11, fontWeight: "600", marginBottom: 3 },
+  content: { fontSize: 14, lineHeight: 20 },
+  timestamp: { fontSize: 10, marginTop: 4, textAlign: "right" },
+});

package/src/components/index.ts

@@ -0,0 +1,14 @@
+export { Header } from "./Header";
+export type { HeaderProps } from "./Header";
+
+export { MessageBubble } from "./MessageBubble";
+export type { MessageBubbleProps } from "./MessageBubble";
+
+export { GreetingBubble } from "./GreetingBubble";
+export type { GreetingBubbleProps } from "./GreetingBubble";
+
+export { TypingIndicator } from "./TypingIndicator";
+export type { TypingIndicatorProps } from "./TypingIndicator";
+
+export { PreChatForm } from "./PreChatForm";
+export type { PreChatFormProps } from "./PreChatForm";

package/src/errors.ts

@@ -0,0 +1,30 @@
+export type GiovChatErrorCode =
+  | "network" | "timeout" | "invalid_response" | "invalid_session" | "conversation_closed"
+  | "connection_failed" | "disconnected" | "send_failed" | "upload_failed" | "workspace_busy" | "storage" | "server"
+  /** `401 invalid_user_hash`: the workspace requires a signed identity and `userHash` is wrong or missing. */
+  | "identity_rejected"
+  /** `429 rate_limited`: wait `retryAfterSeconds` before trying again. */
+  | "rate_limited";
+
+export class GiovChatError extends Error {
+  constructor(
+    public readonly code: GiovChatErrorCode,
+    message: string,
+    public readonly status?: number,
+    /** From `Retry-After` on `429` and `503` answers, in seconds. */
+    public readonly retryAfterSeconds?: number,
+  ) {
+    super(message);
+    this.name = "GiovChatError";
+  }
+}
+
+export function chatError(error: unknown): GiovChatError {
+  return error instanceof GiovChatError ? error : new GiovChatError("network", "Unable to reach chat. Please try again.");
+}
+
+/** `Retry-After` in seconds (the protocol never sends a date); undefined when absent or malformed. */
+export function retryAfterSeconds(value: string | null | undefined): number | undefined {
+  const seconds = Number(value?.trim());
+  return value?.trim() && Number.isFinite(seconds) && seconds >= 0 ? Math.min(seconds, 3600) : undefined;
+}

package/src/i18n.ts

@@ -0,0 +1,351 @@
+import { createContext, useContext } from "react";
+
+/**
+ * The SDK's own interface text in the five languages the Giov dashboard ships. Text the business
+ * writes (greeting, placeholder, bot name) comes from the widget configuration and is not translated.
+ * Hosts pick the language with the `locale` prop (default: the device language) and can replace any
+ * string with `strings`.
+ */
+export interface GiovChatStrings {
+  loading: string;
+  tryAgain: string;
+  retry: string;
+  closeChat: string;
+  /** The header menu button. */
+  menu: string;
+  /** The header menu's link to the workspace's privacy policy, as in the web widget. */
+  privacyPolicy: string;
+  /** Spoken when a reply arrives: who wrote it and what they wrote. */
+  newMessage: (sender: string, text: string) => string;
+  connecting: string;
+  reconnecting: string;
+  statusPerson: string;
+  statusBot: string;
+  statusTeam: string;
+  composerPlaceholder: string;
+  messageInput: string;
+  sendMessage: string;
+  attachFile: string;
+  removeAttachment: (name: string) => string;
+  you: string;
+  agent: string;
+  automated: string;
+  botTyping: (name: string) => string;
+  teamTyping: string;
+  sending: string;
+  notSent: string;
+  tapToRetry: string;
+  /** On a message that was not sent, to drop it. */
+  discard: string;
+  uploading: (percent: number) => string;
+  uploadFailed: string;
+  /** Errors, by kind; the SDK never shows raw server text. */
+  sessionExpired: string;
+  conversationEnded: string;
+  unavailable: string;
+  sendFailed: string;
+  busy: string;
+  attachmentsOff: string;
+  typeNotAllowed: (name: string) => string;
+  fileTooLarge: (name: string, maxMb: number) => string;
+  tooManyFiles: (max: number) => string;
+  openAttachment: (name: string) => string;
+  attachment: string;
+  image: string;
+  /** In place of an image that could not load (it loads again once its link is renewed). */
+  imageUnavailable: string;
+  preChatTitle: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  required: (label: string) => string;
+  startChat: string;
+}
+
+export type GiovChatLocale = "en" | "fr" | "es" | "pt" | "de";
+
+const en: GiovChatStrings = {
+  loading: "Loading…",
+  tryAgain: "Try again",
+  retry: "Retry",
+  closeChat: "Close chat",
+  menu: "Menu",
+  privacyPolicy: "GDPR and privacy",
+  newMessage: (sender, text) => `${sender}: ${text}`,
+  connecting: "Connecting…",
+  reconnecting: "Connection lost. Reconnecting…",
+  statusPerson: "Live agent",
+  statusBot: "AI assistant · Online",
+  statusTeam: "We'll be with you shortly",
+  composerPlaceholder: "Type a message…",
+  messageInput: "Message",
+  sendMessage: "Send message",
+  attachFile: "Attach file",
+  removeAttachment: (name) => `Remove ${name}`,
+  you: "You",
+  agent: "Agent",
+  automated: "Automated",
+  botTyping: (name) => `${name} is typing`,
+  teamTyping: "Support team is typing",
+  sending: "Sending…",
+  notSent: "Not sent",
+  tapToRetry: "Tap to retry",
+  discard: "Discard",
+  uploading: (percent) => `Uploading ${percent}%`,
+  uploadFailed: "File upload failed",
+  sessionExpired: "Chat session expired. Please start a new chat.",
+  conversationEnded: "This conversation has ended.",
+  unavailable: "Chat is unavailable. Please try again.",
+  sendFailed: "Message could not be sent.",
+  busy: "The team is busy right now. Please try again in a moment.",
+  attachmentsOff: "File attachments are turned off for this chat.",
+  typeNotAllowed: (name) => `${name}: this file type is not allowed.`,
+  fileTooLarge: (name, maxMb) => `${name}: files must be ${maxMb} MB or smaller.`,
+  tooManyFiles: (max) => `You can attach up to ${max} files at a time.`,
+  openAttachment: (name) => `Open ${name}`,
+  attachment: "Attachment",
+  image: "Image",
+  imageUnavailable: "Image unavailable",
+  preChatTitle: "Before we start…",
+  firstName: "First name",
+  lastName: "Last name",
+  email: "Email",
+  phone: "Phone",
+  required: (label) => `${label} *`,
+  startChat: "Start chat",
+};
+
+const fr: GiovChatStrings = {
+  loading: "Chargement…",
+  tryAgain: "Réessayer",
+  retry: "Réessayer",
+  closeChat: "Fermer le chat",
+  menu: "Menu",
+  privacyPolicy: "RGPD et confidentialité",
+  newMessage: (sender, text) => `${sender} : ${text}`,
+  connecting: "Connexion…",
+  reconnecting: "Connexion perdue. Reconnexion…",
+  statusPerson: "Conseiller en ligne",
+  statusBot: "Assistant IA · En ligne",
+  statusTeam: "Nous vous répondons très vite",
+  composerPlaceholder: "Écrivez un message…",
+  messageInput: "Message",
+  sendMessage: "Envoyer le message",
+  attachFile: "Joindre un fichier",
+  removeAttachment: (name) => `Retirer ${name}`,
+  you: "Vous",
+  agent: "Conseiller",
+  automated: "Automatique",
+  botTyping: (name) => `${name} écrit`,
+  teamTyping: "L'équipe écrit",
+  sending: "Envoi…",
+  notSent: "Non envoyé",
+  tapToRetry: "Touchez pour réessayer",
+  discard: "Supprimer",
+  uploading: (percent) => `Envoi ${percent} %`,
+  uploadFailed: "Échec de l'envoi du fichier",
+  sessionExpired: "La session de chat a expiré. Démarrez un nouveau chat.",
+  conversationEnded: "Cette conversation est terminée.",
+  unavailable: "Le chat est indisponible. Réessayez.",
+  sendFailed: "Le message n'a pas pu être envoyé.",
+  busy: "L'équipe est très occupée. Réessayez dans un instant.",
+  attachmentsOff: "Les pièces jointes sont désactivées pour ce chat.",
+  typeNotAllowed: (name) => `${name} : ce type de fichier n'est pas autorisé.`,
+  fileTooLarge: (name, maxMb) => `${name} : les fichiers doivent faire ${maxMb} Mo maximum.`,
+  tooManyFiles: (max) => `Vous pouvez joindre jusqu'à ${max} fichiers à la fois.`,
+  openAttachment: (name) => `Ouvrir ${name}`,
+  attachment: "Pièce jointe",
+  image: "Image",
+  imageUnavailable: "Image indisponible",
+  preChatTitle: "Avant de commencer…",
+  firstName: "Prénom",
+  lastName: "Nom",
+  email: "E-mail",
+  phone: "Téléphone",
+  required: (label) => `${label} *`,
+  startChat: "Démarrer le chat",
+};
+
+const es: GiovChatStrings = {
+  loading: "Cargando…",
+  tryAgain: "Reintentar",
+  retry: "Reintentar",
+  closeChat: "Cerrar chat",
+  menu: "Menú",
+  privacyPolicy: "RGPD y privacidad",
+  newMessage: (sender, text) => `${sender}: ${text}`,
+  connecting: "Conectando…",
+  reconnecting: "Conexión perdida. Reconectando…",
+  statusPerson: "Agente en vivo",
+  statusBot: "Asistente de IA · En línea",
+  statusTeam: "Te atenderemos en breve",
+  composerPlaceholder: "Escribe un mensaje…",
+  messageInput: "Mensaje",
+  sendMessage: "Enviar mensaje",
+  attachFile: "Adjuntar archivo",
+  removeAttachment: (name) => `Quitar ${name}`,
+  you: "Tú",
+  agent: "Agente",
+  automated: "Automático",
+  botTyping: (name) => `${name} está escribiendo`,
+  teamTyping: "El equipo está escribiendo",
+  sending: "Enviando…",
+  notSent: "No enviado",
+  tapToRetry: "Toca para reintentar",
+  discard: "Descartar",
+  uploading: (percent) => `Subiendo ${percent} %`,
+  uploadFailed: "No se pudo subir el archivo",
+  sessionExpired: "La sesión de chat caducó. Inicia un chat nuevo.",
+  conversationEnded: "Esta conversación ha terminado.",
+  unavailable: "El chat no está disponible. Inténtalo de nuevo.",
+  sendFailed: "No se pudo enviar el mensaje.",
+  busy: "El equipo está ocupado ahora. Inténtalo de nuevo en un momento.",
+  attachmentsOff: "Los archivos adjuntos están desactivados en este chat.",
+  typeNotAllowed: (name) => `${name}: este tipo de archivo no está permitido.`,
+  fileTooLarge: (name, maxMb) => `${name}: los archivos deben pesar ${maxMb} MB o menos.`,
+  tooManyFiles: (max) => `Puedes adjuntar hasta ${max} archivos a la vez.`,
+  openAttachment: (name) => `Abrir ${name}`,
+  attachment: "Archivo adjunto",
+  image: "Imagen",
+  imageUnavailable: "Imagen no disponible",
+  preChatTitle: "Antes de empezar…",
+  firstName: "Nombre",
+  lastName: "Apellido",
+  email: "Correo electrónico",
+  phone: "Teléfono",
+  required: (label) => `${label} *`,
+  startChat: "Iniciar chat",
+};
+
+const pt: GiovChatStrings = {
+  loading: "Carregando…",
+  tryAgain: "Tentar novamente",
+  retry: "Tentar novamente",
+  closeChat: "Fechar chat",
+  menu: "Menu",
+  privacyPolicy: "RGPD e privacidade",
+  newMessage: (sender, text) => `${sender}: ${text}`,
+  connecting: "Conectando…",
+  reconnecting: "Conexão perdida. Reconectando…",
+  statusPerson: "Atendente ao vivo",
+  statusBot: "Assistente de IA · Online",
+  statusTeam: "Responderemos em breve",
+  composerPlaceholder: "Digite uma mensagem…",
+  messageInput: "Mensagem",
+  sendMessage: "Enviar mensagem",
+  attachFile: "Anexar arquivo",
+  removeAttachment: (name) => `Remover ${name}`,
+  you: "Você",
+  agent: "Atendente",
+  automated: "Automático",
+  botTyping: (name) => `${name} está digitando`,
+  teamTyping: "A equipe está digitando",
+  sending: "Enviando…",
+  notSent: "Não enviada",
+  tapToRetry: "Toque para tentar novamente",
+  discard: "Descartar",
+  uploading: (percent) => `Enviando ${percent}%`,
+  uploadFailed: "Falha ao enviar o arquivo",
+  sessionExpired: "A sessão do chat expirou. Inicie um novo chat.",
+  conversationEnded: "Esta conversa foi encerrada.",
+  unavailable: "O chat está indisponível. Tente novamente.",
+  sendFailed: "Não foi possível enviar a mensagem.",
+  busy: "A equipe está ocupada agora. Tente novamente em instantes.",
+  attachmentsOff: "Os anexos estão desativados neste chat.",
+  typeNotAllowed: (name) => `${name}: este tipo de arquivo não é permitido.`,
+  fileTooLarge: (name, maxMb) => `${name}: os arquivos devem ter até ${maxMb} MB.`,
+  tooManyFiles: (max) => `Você pode anexar até ${max} arquivos por vez.`,
+  openAttachment: (name) => `Abrir ${name}`,
+  attachment: "Anexo",
+  image: "Imagem",
+  imageUnavailable: "Imagem indisponível",
+  preChatTitle: "Antes de começar…",
+  firstName: "Nome",
+  lastName: "Sobrenome",
+  email: "E-mail",
+  phone: "Telefone",
+  required: (label) => `${label} *`,
+  startChat: "Iniciar chat",
+};
+
+const de: GiovChatStrings = {
+  loading: "Wird geladen…",
+  tryAgain: "Erneut versuchen",
+  retry: "Erneut versuchen",
+  closeChat: "Chat schließen",
+  menu: "Menü",
+  privacyPolicy: "DSGVO und Datenschutz",
+  newMessage: (sender, text) => `${sender}: ${text}`,
+  connecting: "Verbindung wird hergestellt…",
+  reconnecting: "Verbindung unterbrochen. Neuer Versuch…",
+  statusPerson: "Live-Support",
+  statusBot: "KI-Assistent · Online",
+  statusTeam: "Wir sind gleich für dich da",
+  composerPlaceholder: "Nachricht schreiben…",
+  messageInput: "Nachricht",
+  sendMessage: "Nachricht senden",
+  attachFile: "Datei anhängen",
+  removeAttachment: (name) => `${name} entfernen`,
+  you: "Du",
+  agent: "Support",
+  automated: "Automatisch",
+  botTyping: (name) => `${name} schreibt`,
+  teamTyping: "Das Team schreibt",
+  sending: "Wird gesendet…",
+  notSent: "Nicht gesendet",
+  tapToRetry: "Tippen zum Wiederholen",
+  discard: "Verwerfen",
+  uploading: (percent) => `Wird hochgeladen: ${percent} %`,
+  uploadFailed: "Datei konnte nicht hochgeladen werden",
+  sessionExpired: "Die Chat-Sitzung ist abgelaufen. Starte einen neuen Chat.",
+  conversationEnded: "Diese Unterhaltung ist beendet.",
+  unavailable: "Der Chat ist nicht verfügbar. Bitte versuche es erneut.",
+  sendFailed: "Die Nachricht konnte nicht gesendet werden.",
+  busy: "Das Team ist gerade ausgelastet. Bitte versuche es gleich noch einmal.",
+  attachmentsOff: "Dateianhänge sind in diesem Chat deaktiviert.",
+  typeNotAllowed: (name) => `${name}: Dieser Dateityp ist nicht erlaubt.`,
+  fileTooLarge: (name, maxMb) => `${name}: Dateien dürfen höchstens ${maxMb} MB groß sein.`,
+  tooManyFiles: (max) => `Du kannst bis zu ${max} Dateien auf einmal anhängen.`,
+  openAttachment: (name) => `${name} öffnen`,
+  attachment: "Anhang",
+  image: "Bild",
+  imageUnavailable: "Bild nicht verfügbar",
+  preChatTitle: "Bevor es losgeht…",
+  firstName: "Vorname",
+  lastName: "Nachname",
+  email: "E-Mail",
+  phone: "Telefon",
+  required: (label) => `${label} *`,
+  startChat: "Chat starten",
+};
+
+export const GIOVCHAT_STRINGS: Readonly<Record<GiovChatLocale, GiovChatStrings>> = { en, fr, es, pt, de };
+
+/** "fr-CA" → "fr", "pt_BR" → "pt"; anything not shipped falls back to English. */
+export function resolveLocale(value: string | null | undefined): GiovChatLocale {
+  const language = String(value ?? "").trim().toLowerCase().split(/[-_]/)[0];
+  return (Object.keys(GIOVCHAT_STRINGS) as GiovChatLocale[]).includes(language as GiovChatLocale) ? language as GiovChatLocale : "en";
+}
+
+/** The device language from Intl (Hermes and JSC both ship it), with no native module. */
+export function deviceLocale(): string {
+  try { return Intl.DateTimeFormat().resolvedOptions().locale || "en"; } catch { return "en"; }
+}
+
+/** The strings for a locale with the host's overrides on top; malformed overrides are ignored. */
+export function resolveStrings(locale?: string | null, overrides?: Partial<GiovChatStrings> | null): GiovChatStrings {
+  const base = GIOVCHAT_STRINGS[resolveLocale(locale ?? deviceLocale())];
+  if (!overrides || typeof overrides !== "object") return base;
+  const result = { ...base } as Record<string, unknown>;
+  for (const [key, value] of Object.entries(overrides)) {
+    const current = (base as unknown as Record<string, unknown>)[key];
+    if (current === undefined || typeof value !== typeof current) continue;
+    if (typeof value === "string" && !value.trim()) continue;
+    result[key] = value;
+  }
+  return result as unknown as GiovChatStrings;
+}
+
+export const GiovChatStringsContext = createContext<GiovChatStrings>(en);
+export const useGiovChatStrings = () => useContext(GiovChatStringsContext);