@giovchat/react-native 0.0.0-stage → 0.3.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/RatingCard.tsx

@@ -0,0 +1,219 @@
+import React, { useEffect, useState } from "react";
+import { Text, TextInput, TouchableOpacity, View } from "react-native";
+import type { GiovFeedbackValue, GiovRatingBlock } from "../types";
+import { useGiovChatStrings } from "../i18n";
+import { GiovChatError } from "../errors";
+import { MAX_FEEDBACK_REASON, MAX_RATING_COMMENT, nextFeedback, ratingFailure, ratingPhase } from "../rating";
+import { textOn } from "../color";
+
+/**
+ * The conversation rating card (a `rating` block) and the thumbs under GiovBot answers. The card keeps
+ * the visitor's pick on screen while the answer is on its way and takes it back, with a short message,
+ * when it fails. Faces are emoji, so nothing native is needed (Expo Go included).
+ */
+const FACES = ["😞", "🙁", "😐", "🙂", "😄"];
+
+export type RateFn = (requestId: string, score: number, comment: string) => Promise<void>;
+export type VoteFn = (messageId: string, value: GiovFeedbackValue, reason?: string) => Promise<void>;
+
+export interface RatingCardProps {
+  block: GiovRatingBlock;
+  primaryColor: string;
+  dark: boolean;
+  /** Without it the card is read-only (a hidden or unsupported feature). */
+  onRate?: RateFn;
+  /** Where the card was drawn; sets the test ids. */
+  testIDPrefix?: string;
+}
+
+export function RatingCard({ block, primaryColor, dark, onRate, testIDPrefix = "giov-rating" }: RatingCardProps) {
+  const strings = useGiovChatStrings();
+  const [now, setNow] = useState(() => Date.now());
+  const [pick, setPick] = useState(0);
+  const [comment, setComment] = useState("");
+  const [editing, setEditing] = useState(false);
+  const [pending, setPending] = useState<{ score: number; comment: string } | null>(null);
+  const [error, setError] = useState("");
+  const [lock, setLock] = useState<"" | "closed" | "replaced">("");
+
+  // Read-only from `closesAt` on, without waiting for another render.
+  useEffect(() => {
+    const wait = block.closesAt - Date.now();
+    if (wait <= 0) return;
+    const timer = setTimeout(() => setNow(Date.now()), Math.min(wait, 2 ** 31 - 1));
+    return () => clearTimeout(timer);
+  }, [block.closesAt, now]);
+
+  const ink = dark ? "#f0f0f0" : "#111";
+  const quiet = dark ? "#aaa" : "#555";
+  const border = dark ? "#3a3a3a" : "#d4d4d4";
+  const label = (score: number) => strings.ratingFace(score);
+
+  if (lock === "replaced" || ratingPhase(block, now) === "hidden") return null;
+  const closed = lock === "closed" || ratingPhase(block, now) === "closed";
+  const score = pending?.score ?? block.score;
+  const text = pending ? pending.comment : block.comment;
+
+  if (score && !editing) {
+    return (
+      <View testID={`${testIDPrefix}-done`} accessibilityRole="summary" accessibilityLabel={`${strings.yourRating}: ${label(score)}`} style={{ marginTop: 8, gap: 6 }}>
+        <Text style={{ color: ink, fontSize: 14, fontWeight: "600" }}>
+          <Text accessibilityElementsHidden importantForAccessibility="no-hide-descendants">{FACES[score - 1]} </Text>
+          {strings.ratingThanks} · {label(score)}
+        </Text>
+        {text ? <Text style={{ color: quiet, fontSize: 13 }}>{text}</Text> : null}
+        {!closed && onRate ? (
+          <TouchableOpacity
+            testID={`${testIDPrefix}-change`}
+            accessibilityRole="button"
+            accessibilityLabel={strings.ratingChange}
+            disabled={!!pending}
+            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+            onPress={() => { setPick(score); setComment(text ?? ""); setError(""); setEditing(true); }}
+          >
+            <Text style={{ color: primaryColor, fontSize: 13, fontWeight: "600" }}>{strings.ratingChange}</Text>
+          </TouchableOpacity>
+        ) : null}
+      </View>
+    );
+  }
+  if (closed) return <Text testID={`${testIDPrefix}-closed`} style={{ color: quiet, fontSize: 13, marginTop: 8 }}>{strings.ratingClosed}</Text>;
+
+  const submit = async () => {
+    if (!pick || pending || !onRate) return;
+    const next = { score: pick, comment: comment.trim() };
+    setError("");
+    setPending(next);
+    setEditing(false);
+    try {
+      await onRate(block.requestId, next.score, next.comment);
+    } catch (failure) {
+      const code = failure instanceof GiovChatError ? failure.code : "network";
+      const kind = ratingFailure(code);
+      if (kind === "retry") {
+        setEditing(true);
+        setError(code === "too_many_changes" ? strings.ratingTooMany
+          : code === "rate_limited" ? strings.ratingWait(failure instanceof GiovChatError ? failure.retryAfterSeconds ?? 30 : 30)
+          : strings.ratingFailed);
+      } else setLock(kind);
+    } finally {
+      setPending(null);
+    }
+  };
+
+  return (
+    <View testID={`${testIDPrefix}-form`} accessibilityLabel={strings.rateTitle} style={{ marginTop: 8, gap: 8 }}>
+      <View accessibilityRole="radiogroup" accessibilityLabel={strings.yourRating} style={{ flexDirection: "row", gap: 6 }}>
+        {FACES.map((face, index) => {
+          const n = index + 1;
+          return (
+            <TouchableOpacity
+              key={n}
+              testID={`${testIDPrefix}-face-${n}`}
+              accessibilityRole="radio"
+              accessibilityLabel={label(n)}
+              accessibilityState={{ checked: pick === n }}
+              onPress={() => setPick(n)}
+              style={{ width: 44, height: 44, borderRadius: 22, alignItems: "center", justifyContent: "center", borderWidth: pick === n ? 2 : 1, borderColor: pick === n ? primaryColor : border }}
+            >
+              <Text style={{ fontSize: 22 }}>{face}</Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+      <TextInput
+        testID={`${testIDPrefix}-comment`}
+        value={comment}
+        onChangeText={setComment}
+        maxLength={MAX_RATING_COMMENT}
+        multiline
+        placeholder={strings.ratingComment}
+        placeholderTextColor={dark ? "#777" : "#999"}
+        accessibilityLabel={strings.ratingComment}
+        style={{ color: ink, borderWidth: 1, borderColor: border, borderRadius: 10, paddingHorizontal: 10, paddingVertical: 8, fontSize: 14, minHeight: 56, maxHeight: 120 }}
+      />
+      {error ? <Text accessibilityRole="alert" style={{ color: "#dc2626", fontSize: 13 }}>{error}</Text> : null}
+      <View style={{ flexDirection: "row", gap: 12, alignItems: "center" }}>
+        <TouchableOpacity
+          testID={`${testIDPrefix}-send`}
+          accessibilityRole="button"
+          accessibilityLabel={strings.ratingSend}
+          accessibilityState={{ disabled: !pick || !!pending || !onRate }}
+          disabled={!pick || !!pending || !onRate}
+          onPress={submit}
+          style={{ backgroundColor: primaryColor, borderRadius: 8, paddingHorizontal: 18, paddingVertical: 9, opacity: !pick || !onRate ? 0.4 : 1 }}
+        >
+          <Text style={{ color: textOn(primaryColor), fontSize: 14, fontWeight: "600" }}>{strings.ratingSend}</Text>
+        </TouchableOpacity>
+        {block.score ? (
+          <TouchableOpacity testID={`${testIDPrefix}-cancel`} accessibilityRole="button" accessibilityLabel={strings.ratingCancel} onPress={() => setEditing(false)} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+            <Text style={{ color: quiet, fontSize: 14 }}>{strings.ratingCancel}</Text>
+          </TouchableOpacity>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+/** Thumbs under a GiovBot answer: one vote, changeable; a thumbs-down offers an optional reason. */
+export function AnswerFeedback({ messageId, value, dark, primaryColor, onVote }: {
+  messageId: string; value?: "up" | "down"; dark: boolean; primaryColor: string; onVote: VoteFn;
+}) {
+  const strings = useGiovChatStrings();
+  const [asking, setAsking] = useState(false);
+  const [reason, setReason] = useState("");
+  const [failed, setFailed] = useState(false);
+  const quiet = dark ? "#aaa" : "#555";
+  const tap = async (tapped: "up" | "down") => {
+    const next = nextFeedback(value, tapped);
+    setFailed(false);
+    setReason("");
+    setAsking(next === "down");
+    try { await onVote(messageId, next); } catch { setAsking(false); setFailed(true); }
+  };
+  const sendReason = async () => {
+    setAsking(false);
+    if (reason.trim()) await onVote(messageId, "down", reason.trim()).catch(() => setFailed(true));
+  };
+  return (
+    <View testID={`giov-feedback-${messageId}`} accessibilityRole="toolbar" accessibilityLabel={strings.answerGroup} style={{ marginTop: 2, marginLeft: 52 }}>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 4 }}>
+        {(["up", "down"] as const).map((kind) => (
+          <TouchableOpacity
+            key={kind}
+            testID={`giov-feedback-${kind}`}
+            accessibilityRole="button"
+            accessibilityLabel={kind === "up" ? strings.answerGood : strings.answerBad}
+            accessibilityState={{ selected: value === kind }}
+            onPress={() => tap(kind)}
+            hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }}
+            style={{ width: 36, height: 36, borderRadius: 18, alignItems: "center", justifyContent: "center", backgroundColor: value === kind ? primaryColor : "transparent", opacity: value && value !== kind ? 0.4 : 1 }}
+          >
+            <Text style={{ fontSize: 16 }}>{kind === "up" ? "👍" : "👎"}</Text>
+          </TouchableOpacity>
+        ))}
+        {failed ? <Text accessibilityRole="alert" style={{ color: "#dc2626", fontSize: 12 }}>{strings.answerFailed}</Text> : null}
+      </View>
+      {asking ? (
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8, marginTop: 4 }}>
+          <TextInput
+            testID="giov-feedback-reason"
+            value={reason}
+            onChangeText={setReason}
+            maxLength={MAX_FEEDBACK_REASON}
+            placeholder={strings.answerReason}
+            placeholderTextColor={dark ? "#777" : "#999"}
+            accessibilityLabel={strings.answerReason}
+            style={{ flex: 1, color: dark ? "#f0f0f0" : "#111", borderWidth: 1, borderColor: dark ? "#3a3a3a" : "#d4d4d4", borderRadius: 10, paddingHorizontal: 10, paddingVertical: 6, fontSize: 13 }}
+          />
+          <TouchableOpacity testID="giov-feedback-send" accessibilityRole="button" accessibilityLabel={strings.ratingSend} onPress={sendReason} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+            <Text style={{ color: primaryColor, fontSize: 13, fontWeight: "600" }}>{strings.ratingSend}</Text>
+          </TouchableOpacity>
+          <TouchableOpacity testID="giov-feedback-skip" accessibilityRole="button" accessibilityLabel={strings.answerSkip} onPress={() => setAsking(false)} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+            <Text style={{ color: quiet, fontSize: 13 }}>{strings.answerSkip}</Text>
+          </TouchableOpacity>
+        </View>
+      ) : null}
+    </View>
+  );
+}

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,33 @@
+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"
+  /** Ratings and answer feedback (docs/protocol, "Conversation ratings"). `unsupported`: the server has no such routes. */
+  | "unsupported" | "invalid_rating" | "invalid_feedback" | "request_not_found" | "message_not_found"
+  | "request_replaced" | "rating_closed" | "too_many_changes";
+
+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;
+}