@giovchat/react-native 0.2.0 → 0.3.0

package/src/GiovChat.tsx

@@ -42,6 +42,9 @@ import {
 } 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 ─────────────────────────────────────────────────────
 
@@ -125,9 +128,39 @@ export interface GiovChatProps {
   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>;
   /**
@@ -198,6 +231,11 @@ const GiovChatInstance = React.forwardRef<GiovChatHandle, GiovChatProps>(functio
   sessionStorage,
   onError,
   onConnectionStatusChange,
+  ratingCard = true,
+  answerFeedback = true,
+  onRatingRequested,
+  onRatingSubmitted,
+  onAnswerFeedback,
 }: GiovChatProps, ref) {
   const systemScheme = useColorScheme();
   const custom = useMemo(() => resolveStyleOverrides(styleOverrides), [styleOverrides]);
@@ -207,18 +245,37 @@ const GiovChatInstance = React.forwardRef<GiovChatHandle, GiovChatProps>(functio
   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]);
+  }), [reset, chat.registerPushToken, chat.unregisterPushToken, locale, ratingCalls]);
   useEffect(() => {
     const timer = setTimeout(() => listRef.current?.scrollToEnd({ animated: true }), 80);
     return () => clearTimeout(timer);
@@ -242,7 +299,7 @@ const GiovChatInstance = React.forwardRef<GiovChatHandle, GiovChatProps>(functio
   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 && policy.enabled && policy.allowedTypes.length > 0;
+  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 () => {
@@ -265,6 +322,14 @@ const GiovChatInstance = React.forwardRef<GiovChatHandle, GiovChatProps>(functio
       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
@@ -352,6 +417,9 @@ const GiovChatInstance = React.forwardRef<GiovChatHandle, GiovChatProps>(functio
                   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}
                 />
               )}
             />
@@ -384,6 +452,20 @@ const GiovChatInstance = React.forwardRef<GiovChatHandle, GiovChatProps>(functio
               </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,
@@ -440,6 +522,7 @@ const GiovChatInstance = React.forwardRef<GiovChatHandle, GiovChatProps>(functio
                 <Text style={[styles.sendIcon, { color: buttonInk }, custom.buttonText]}>↑</Text>
               </TouchableOpacity>
             </View>
+            )}
           </KeyboardAvoidingView>
         )}
         <Branding showBranding={config?.showBranding} />
@@ -448,20 +531,42 @@ const GiovChatInstance = React.forwardRef<GiovChatHandle, GiovChatProps>(functio
     </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>
+      <>
+        <Modal
+          visible={visible}
+          animationType="slide"
+          presentationStyle="pageSheet"
+          onRequestClose={handleClose}
+        >
+          {chatContent}
+        </Modal>
+        {sheet}
+      </>
     );
   }
 
-  return visible ? chatContent : null;
+  return <>{visible ? chatContent : null}{sheet}</>;
 });
 
 const styles = StyleSheet.create({
@@ -526,5 +631,10 @@ const styles = StyleSheet.create({
     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 },
 });

package/src/brandingStyle.ts

@@ -0,0 +1,87 @@
+import { contrastRatio, parseColor, textOn } from "./color";
+
+/** The "Powered by GiovChat" footer's style slot. Layout, size and text stay SDK-controlled. */
+export interface GiovChatBrandingStyle {
+  /** Font family of the footer. Defaults to the top-level `fontFamily`. */
+  fontFamily?: string;
+  /** Colour of "Powered by". Must reach 4.5:1 against the footer background. */
+  color?: string;
+  /** Colour of "GiovChat" (the link). Must reach 4.5:1 against the footer background. */
+  brandColor?: string;
+  /** Footer background. Opaque colours only. */
+  backgroundColor?: string;
+}
+
+/** WCAG AA for normal text. */
+export const FOOTER_MIN_CONTRAST = 4.5;
+export const FOOTER_DEFAULTS = { backgroundColor: "#ffffff", color: "#52525b", brandColor: "#7c3aed" } as const;
+/** The footer text is never smaller than this, whatever the app's style. */
+export const FOOTER_FONT_SIZE = 12;
+
+export interface ResolvedFooterStyle {
+  fontFamily?: string;
+  color: string;
+  brandColor: string;
+  backgroundColor: string;
+  /** True when the app changed the background: the divider is then a neutral translucent grey. */
+  customBackground: boolean;
+}
+
+/** `parseColor`, but null for anything see-through: `transparent`, alpha below 1 (hex, rgba). */
+export function parseOpaqueColor(value: unknown): [number, number, number] | null {
+  if (typeof value !== "string") return null;
+  const text = value.trim().toLowerCase();
+  const hex = /^#([0-9a-f]{4}|[0-9a-f]{8})$/.exec(text)?.[1];
+  if (hex) {
+    const alpha = hex.length === 4 ? hex[3]! + hex[3]! : hex.slice(6, 8);
+    if (parseInt(alpha, 16) !== 255) return null;
+  }
+  const functional = /^rgba?\(\s*\d{1,3}\s*[, ]\s*\d{1,3}\s*[, ]\s*\d{1,3}\s*(?:[,/]\s*([\d.]+)(%?)\s*)?\)$/.exec(text);
+  if (functional?.[1] !== undefined) {
+    const alpha = Number(functional[1]) / (functional[2] ? 100 : 1);
+    if (!(alpha >= 1)) return null;
+  }
+  return parseColor(text);
+}
+
+/**
+ * Applies the app's footer colours under the accessibility rules: an override that is see-through,
+ * unreadable (named colours), or below 4.5:1 against the effective background falls back to the
+ * SDK's default for that property (or, when the default fails too on the app's own background, to
+ * black or white). `warn` receives one message per rejected value.
+ */
+export function resolveFooterStyle(
+  slot: GiovChatBrandingStyle | undefined,
+  warn: (message: string) => void = () => {},
+): ResolvedFooterStyle {
+  let background: string = FOOTER_DEFAULTS.backgroundColor;
+  let customBackground = false;
+  if (slot?.backgroundColor !== undefined) {
+    if (parseOpaqueColor(slot.backgroundColor)) {
+      background = slot.backgroundColor;
+      customBackground = true;
+    } else {
+      warn(`GiovChat: branding.backgroundColor "${slot.backgroundColor}" is ignored (use an opaque hex or rgb colour).`);
+    }
+  }
+  const backgroundRgb = parseColor(background)!;
+  const readable = (candidate: string) => {
+    const rgb = parseColor(candidate);
+    return rgb !== null && contrastRatio(rgb, backgroundRgb) >= FOOTER_MIN_CONTRAST;
+  };
+  const pick = (name: "color" | "brandColor"): string => {
+    const wanted = slot?.[name];
+    if (wanted !== undefined) {
+      if (parseOpaqueColor(wanted) && readable(wanted)) return wanted;
+      warn(`GiovChat: branding.${name} "${wanted}" is ignored (an opaque colour with at least ${FOOTER_MIN_CONTRAST}:1 contrast against the footer background is required).`);
+    }
+    return readable(FOOTER_DEFAULTS[name]) ? FOOTER_DEFAULTS[name] : textOn(background);
+  };
+  return {
+    ...(slot?.fontFamily ? { fontFamily: slot.fontFamily } : {}),
+    color: pick("color"),
+    brandColor: pick("brandColor"),
+    backgroundColor: background,
+    customBackground,
+  };
+}

package/src/client.ts

@@ -1,6 +1,9 @@
-import type { GiovChatContact, GiovChatSession, GiovMessage, GiovWidgetConfig, MessageHandler, StatusHandler } from "./types";
+import type {
+  GiovChatContact, GiovChatSession, GiovFeedbackValue, GiovMessage, GiovRatingResult, GiovWidgetConfig, MessageHandler, StatusHandler,
+} from "./types";
 import { GiovChatError, chatError, retryAfterSeconds } from "./errors";
 import { object, parseMessage } from "./protocol";
+import { MAX_FEEDBACK_REASON, MAX_RATING_COMMENT, parseRatingFrame, parseRatingResult, ratingError, type GiovRatingFrame } from "./rating";
 import { safeImageUrl } from "./identity";
 import { deviceLocale } from "./i18n";
 import { Outbox } from "./outbox";
@@ -17,7 +20,7 @@ import {
 export const DEFAULT_BASE_URL = "https://api.giovchat.app";
 
 /** Keep in step with package.json; sent so the dashboard can show where the chat is installed. */
-export const SDK_VERSION = "0.2.0";
+export const SDK_VERSION = "0.3.0";
 export const CLIENT_HEADER = { "X-Giov-Client": `react-native/${SDK_VERSION}` };
 
 export function normalizeBaseUrl(value: string): string {
@@ -186,6 +189,14 @@ export interface ChatClientOptions {
   flushOnOpen?: boolean;
 }
 
+/** The `conversation_state` frame. */
+export interface GiovConversationState {
+  status?: "open" | "closed";
+  handedOff?: boolean;
+  assignedAgentName?: string;
+  assignedAgentAvatar?: string;
+}
+
 /** A GiovBot reply arriving word by word: the whole text so far, then `end` once it is saved or dropped. */
 export type GiovStreamEvent = { streamId: string; content: string; end?: false } | { streamId: string; end: true };
 
@@ -232,6 +243,8 @@ export class ChatClient {
   private ackCbs = new Set<(clientMessageId: string, message: GiovMessage) => void>();
   private streamCbs = new Set<(event: GiovStreamEvent) => void>();
   private accessCbs = new Set<(access: AttachmentAccess) => void>();
+  private ratingCbs = new Set<(frame: GiovRatingFrame) => void>();
+  private stateCbs = new Set<(state: GiovConversationState) => void>();
   private pending = new Map<string, Array<{ resolve: (message: GiovMessage) => void; reject: (error: GiovChatError) => void }>>();
   private timer: ReturnType<typeof setTimeout> | null = null;
   private heartbeat: ReturnType<typeof setInterval> | null = null;
@@ -246,6 +259,7 @@ export class ChatClient {
   private widgetToken: WidgetToken | null = null;
   private tokenRequest: Promise<WidgetToken> | null = null;
   private pushUnsupported = false;
+  private ratingsUnsupportedFlag = false;
   private readonly baseUrl: string;
   readonly outbox: Outbox;
 
@@ -264,6 +278,13 @@ export class ChatClient {
   onStream(cb: (event: GiovStreamEvent) => void): () => void { this.streamCbs.add(cb); return () => { this.streamCbs.delete(cb); }; }
   /** A newer attachment download token arrived (with a visitor token). */
   onAttachmentAccess(cb: (access: AttachmentAccess) => void): () => void { this.accessCbs.add(cb); return () => { this.accessCbs.delete(cb); }; }
+  /** A rating card was answered or changed (on any device), or replaced by a newer one. */
+  onRating(cb: (frame: GiovRatingFrame) => void): () => void { this.ratingCbs.add(cb); return () => { this.ratingCbs.delete(cb); }; }
+  /**
+   * The conversation was closed or reopened (`conversation_state` frame, sent on close and reopen) or handed
+   * to someone. `status` is absent on older servers: keep using the history's `status` there.
+   */
+  onConversationState(cb: (state: GiovConversationState) => void): () => void { this.stateCbs.add(cb); return () => { this.stateCbs.delete(cb); }; }
   private emit<T>(callbacks: Set<(value: T) => void>, value: T): void {
     for (const cb of callbacks) { try { cb(value); } catch { /* Host callbacks cannot break transport cleanup. */ } }
   }
@@ -426,6 +447,21 @@ export class ChatClient {
       }
       return;
     }
+    if (data.type === "conversation_state") {
+      const status = data.status === "closed" || data.status === "open" ? data.status : undefined;
+      this.emit(this.stateCbs, {
+        ...(status ? { status } : {}),
+        ...(typeof data.handedOff === "boolean" ? { handedOff: data.handedOff } : {}),
+        ...(typeof data.assignedAgentName === "string" ? { assignedAgentName: data.assignedAgentName } : {}),
+        ...(typeof data.assignedAgentAvatar === "string" ? { assignedAgentAvatar: data.assignedAgentAvatar } : {}),
+      });
+      return;
+    }
+    if (data.type === "rating") {
+      const frame = parseRatingFrame(data);
+      if (frame) this.emit(this.ratingCbs, frame);
+      return;
+    }
     if (data.type && data.type !== "message") return;
     const message = parseMessage(data);
     // The saved reply takes the place of its streamed draft, under the draft's key so it is not redrawn.
@@ -632,6 +668,60 @@ export class ChatClient {
     return response.status === 401 ? send((await this.token(true)).token) : response;
   }
 
+  /** True once the server answered a rating or feedback route with 404: an older server, so the controls are hidden. */
+  get ratingsUnsupported(): boolean { return this.ratingsUnsupportedFlag; }
+
+  /**
+   * Answers the conversation's rating card (`POST /conversations/{id}/rating`). Omit `requestId` to answer the
+   * open card. The same answer again is a no-op; a different one replaces it until the card closes. Rejects with a
+   * `GiovChatError` whose code is `invalid_rating`, `request_not_found`, `request_replaced`, `rating_closed`,
+   * `too_many_changes`, `rate_limited` (with `retryAfterSeconds`), `unsupported` (an older server) or a transport code.
+   */
+  async submitRating(score: number, options: { comment?: string; requestId?: string } = {}): Promise<GiovRatingResult> {
+    if (!Number.isInteger(score) || score < 1 || score > 5) throw new GiovChatError("invalid_rating", "The score must be a whole number from 1 to 5.");
+    const comment = options.comment?.trim();
+    if (comment && comment.length > MAX_RATING_COMMENT) throw new GiovChatError("invalid_rating", "The comment is too long.");
+    const body = await this.visitorPost("/rating", { score, ...(options.requestId ? { requestId: options.requestId } : {}), ...(comment ? { comment } : {}) });
+    const result = parseRatingResult(body, options.requestId);
+    if (!result) throw new GiovChatError("invalid_response", "Invalid rating response.");
+    return result;
+  }
+
+  /** Thumbs up or down on a GiovBot answer (`POST /conversations/{id}/messages/{messageId}/feedback`); `none` takes the vote back. */
+  async submitAnswerFeedback(messageId: string, value: GiovFeedbackValue, options: { reason?: string } = {}): Promise<void> {
+    if (!messageId || !["up", "down", "none"].includes(value)) throw new GiovChatError("invalid_feedback", "The vote must be up, down or none.");
+    const reason = value === "down" ? options.reason?.trim() : undefined;
+    if (reason && reason.length > MAX_FEEDBACK_REASON) throw new GiovChatError("invalid_feedback", "The reason is too long.");
+    await this.visitorPost(`/messages/${encodeURIComponent(messageId)}/feedback`, { value, ...(reason ? { reason } : {}) });
+  }
+
+  /** One visitor-token POST on this conversation, the token renewed once on 401 (protocol "Tokens"). */
+  private async visitorPost(path: string, payload: Record<string, unknown>): Promise<unknown> {
+    const session = this.session;
+    if (!session) throw new GiovChatError("disconnected", "Chat closed.");
+    const url = `${this.baseUrl}/conversations/${encodeURIComponent(session.conversationId)}${path}`;
+    const send = async (token: string) => {
+      const controller = new AbortController();
+      const timer = setTimeout(() => controller.abort(), 15000);
+      try {
+        const response = await fetch(url, {
+          method: "POST", signal: controller.signal,
+          headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, ...CLIENT_HEADER },
+          body: JSON.stringify(payload),
+        });
+        return { status: response.status, body: await response.json().catch(() => null), retryAfter: response.headers?.get?.("Retry-After") ?? null };
+      } catch {
+        throw new GiovChatError(controller.signal.aborted ? "timeout" : "network", controller.signal.aborted ? "Chat request timed out. Please try again." : "Unable to reach chat. Please try again.");
+      } finally { clearTimeout(timer); }
+    };
+    let reply = await send((await this.token()).token);
+    if (reply.status === 401) reply = await send((await this.token(true)).token);
+    if (reply.status >= 200 && reply.status < 300) return reply.body;
+    const failure = ratingError(reply.status, reply.body, reply.retryAfter);
+    if (failure.code === "unsupported") this.ratingsUnsupportedFlag = true;
+    throw failure;
+  }
+
   private rejectPending(): void {
     for (const waiters of this.pending.values()) {
       for (const waiter of waiters) waiter.reject(new GiovChatError("send_failed", "Delivery could not be confirmed. Check the conversation before sending again."));

package/src/components/Branding.tsx

@@ -1,13 +1,32 @@
-import React from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Linking, StyleSheet, Text, TouchableOpacity } from "react-native";
+import { DEFAULT_BASE_URL, fetchWidgetConfig } from "../client";
+import { FOOTER_FONT_SIZE, resolveFooterStyle } from "../brandingStyle";
+import { resolveStyleOverrides, type GiovChatStyleOverrides } from "../styleOverrides";
+import { WidgetStylesContext, useWidgetStyles } from "./WidgetStyles";
 
-/** Deliberately isolated from customizable styles, including the global font. */
+declare const __DEV__: boolean | undefined;
+const devWarn = (message: string) => {
+  if (typeof __DEV__ !== "undefined" && __DEV__) console.warn(message);
+};
+
+/**
+ * The "Powered by GiovChat" footer. It follows the app's style (top-level `fontFamily` and the
+ * `branding` slot, read from the surrounding style context) under a contrast guard; layout, size and
+ * text are fixed, and only an explicit `showBranding={false}` from the server removes it.
+ */
 export function Branding({ showBranding }: { showBranding?: boolean }) {
+  const { branding } = useWidgetStyles();
+  const footer = useMemo(() => resolveFooterStyle(branding, devWarn), [branding]);
   if (showBranding === false) return null;
 
   return (
     <TouchableOpacity
-      style={styles.container}
+      style={[
+        styles.container,
+        { backgroundColor: footer.backgroundColor },
+        footer.customBackground && styles.customDivider,
+      ]}
       accessibilityRole="link"
       accessibilityLabel="Powered by GiovChat"
       onPress={() => {
@@ -15,21 +34,61 @@ export function Branding({ showBranding }: { showBranding?: boolean }) {
           .catch(() => {});
       }}
     >
-      <Text style={styles.text}>Powered by <Text style={styles.brand}>GiovChat</Text></Text>
+      <Text style={[styles.text, { color: footer.color }, footer.fontFamily ? { fontFamily: footer.fontFamily } : null]}>
+        Powered by <Text style={[styles.brand, { color: footer.brandColor }]}>GiovChat</Text>
+      </Text>
     </TouchableOpacity>
   );
 }
 
+export interface GiovBrandingProps {
+  /**
+   * Show it or not. Pass the workspace's `showBranding` (`fetchWidgetConfig`) when you already have the
+   * config; leave it out and pass `tenantKey` to let the component read the config itself.
+   */
+  showBranding?: boolean;
+  /** Fetches `showBranding` from the workspace when the prop above is not set. */
+  tenantKey?: string;
+  baseUrl?: string;
+  /** The same style overrides you give `<GiovChat>`: `fontFamily` and `branding` apply. */
+  styleOverrides?: GiovChatStyleOverrides;
+}
+
+/**
+ * Drop-in footer for apps that build their own chat screen on the headless client. Renders nothing
+ * while the workspace setting loads and when the plan removed branding (`showBranding: false`); it
+ * shows when the setting is missing or cannot be loaded. Starter and Pro workspaces: please show it.
+ */
+export function GiovBranding({ showBranding, tenantKey, baseUrl = DEFAULT_BASE_URL, styleOverrides }: GiovBrandingProps) {
+  const styles_ = useMemo(() => resolveStyleOverrides(styleOverrides), [styleOverrides]);
+  const [fetched, setFetched] = useState<boolean | undefined>(undefined);
+  useEffect(() => {
+    if (showBranding !== undefined || !tenantKey) return;
+    const controller = new AbortController();
+    fetchWidgetConfig(baseUrl, tenantKey, controller.signal)
+      .then((config) => setFetched(config.showBranding !== false))
+      .catch(() => { if (!controller.signal.aborted) setFetched(true); });
+    return () => controller.abort();
+  }, [showBranding, tenantKey, baseUrl]);
+  const known = showBranding ?? (tenantKey ? fetched : true);
+  if (known === undefined) return null;
+  return (
+    <WidgetStylesContext.Provider value={styles_}>
+      <Branding showBranding={known} />
+    </WidgetStylesContext.Provider>
+  );
+}
+
 const styles = StyleSheet.create({
   container: {
     flexShrink: 0,
     alignItems: "center",
     paddingVertical: 12,
     paddingHorizontal: 16,
-    backgroundColor: "#fff",
     borderTopWidth: StyleSheet.hairlineWidth,
     borderTopColor: "#ebebeb",
   },
-  text: { color: "#52525b", fontSize: 12 },
-  brand: { color: "#7c3aed", fontWeight: "700" },
+  customDivider: { borderTopColor: "rgba(128,128,128,0.25)" },
+  text: { fontSize: FOOTER_FONT_SIZE },
+  brand: { fontWeight: "700" },
 });

package/src/components/MessageBubble.tsx

@@ -6,6 +6,8 @@ import { useWidgetStyles } from "./WidgetStyles";
 import { GiovBotMark } from "./GiovBotMark";
 import { ChatMarkdown } from "./ChatMarkdown";
 import { AttachmentList } from "./Attachments";
+import { AnswerFeedback, RatingCard, type RateFn, type VoteFn } from "./RatingCard";
+import { canVoteOn } from "../rating";
 import { messageSenderLabel } from "../identity";
 import { useGiovChatStrings } from "../i18n";
 import { isLightBackground, secondaryTextOn, textOn } from "../color";
@@ -21,11 +23,17 @@ export interface MessageBubbleProps {
   onRetry?: (message: GiovMessage) => void;
   /** Drops a visitor message that failed to send (a refused one can never succeed on retry). */
   onDiscard?: (message: GiovMessage) => void;
+  /** Draw the conversation rating card under a message that carries one (default true). */
+  ratingCard?: boolean;
+  /** Answers the card. Without it the card is read-only. */
+  onRate?: RateFn;
+  /** Thumbs under GiovBot answers. Without it no thumbs are drawn. */
+  onVote?: VoteFn;
 }
 
 const identity = (url: string) => url;
 
-export function MessageBubble({ message, primaryColor, dark, botName, resolveAttachmentUrl = identity, onRetry, onDiscard }: MessageBubbleProps) {
+export function MessageBubble({ message, primaryColor, dark, botName, resolveAttachmentUrl = identity, onRetry, onDiscard, ratingCard = true, onRate, onVote }: MessageBubbleProps) {
   const custom = useWidgetStyles();
   const strings = useGiovChatStrings();
   const isVisitor = message.role === "visitor";
@@ -46,6 +54,7 @@ export function MessageBubble({ message, primaryColor, dark, botName, resolveAtt
   });
 
   return (
+    <>
     <View style={[s.wrapper, isVisitor ? s.right : s.left, isBot && s.assistantRow]}>
       {isBot && <GiovBotMark />}
       <View
@@ -79,6 +88,9 @@ export function MessageBubble({ message, primaryColor, dark, botName, resolveAtt
             codeBackground={isVisitor ? (lightVisitor ? "rgba(0,0,0,0.08)" : "rgba(255,255,255,0.18)") : dark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)"}
           />
         ) : null}
+        {ratingCard && message.rating && !isVisitor ? (
+          <RatingCard block={message.rating} primaryColor={primaryColor} dark={dark} onRate={onRate} />
+        ) : null}
         {!message.isStreaming && (
           <Text
             style={[
@@ -117,5 +129,9 @@ export function MessageBubble({ message, primaryColor, dark, botName, resolveAtt
         </View>
       )}
     </View>
+    {onVote && canVoteOn(message) ? (
+      <AnswerFeedback messageId={message.id} value={message.feedback} dark={dark} primaryColor={primaryColor} onVote={onVote} />
+    ) : null}
+    </>
   );
 }