@repzo/widget-react-native 1.0.8 → 1.1.0

package/src/ui/components/AgentUiBlocks.tsx

@@ -8,6 +8,7 @@
 import { createContext, useContext, useState } from 'react';
 import { Image, Pressable, StyleSheet, Text, TextInput, View, type ViewStyle } from 'react-native';
 
+import { formatLabel } from '../../i18n';
 import type { AgentUiAction, AgentUiBlock } from '../../types';
 import { fontSize, palette, radius, shadows, spacing, withAlpha } from '../styles/theme';
 
@@ -18,6 +19,20 @@ export interface AgentUiBlockLabels {
   professional: string;
   priceOffer: string;
   working: string;
+  subtotal: string;
+  discount: string;
+  tax: string;
+  shipping: string;
+  total: string;
+  /** `{count}` = minutes. */
+  minutes: string;
+  save: string;
+  anyAvailable: string;
+  /** `{name}` = the professional. */
+  withProvider: string;
+  bookTime: string;
+  /** `{date}` = the formatted date. */
+  validUntil: string;
 }
 
 const DEFAULT_BLOCK_LABELS: AgentUiBlockLabels = {
@@ -27,6 +42,17 @@ const DEFAULT_BLOCK_LABELS: AgentUiBlockLabels = {
   professional: 'Professional',
   priceOffer: 'Price offer',
   working: 'Working...',
+  subtotal: 'Subtotal',
+  discount: 'Discount',
+  tax: 'Tax',
+  shipping: 'Shipping',
+  total: 'Total',
+  minutes: '{count} min',
+  save: 'Save',
+  anyAvailable: 'Any available',
+  withProvider: 'With {name}',
+  bookTime: 'Book this time',
+  validUntil: 'Valid until {date}',
 };
 
 const BlockLabelContext = createContext<AgentUiBlockLabels>(DEFAULT_BLOCK_LABELS);
@@ -99,7 +125,7 @@ export function AgentUiBlocks({
                   <View style={styles.row}>
                     <Text style={styles.muted}>
                       {block.product.durationMinutes
-                        ? `${block.product.durationMinutes} min`
+                        ? formatLabel(labels.minutes, { count: block.product.durationMinutes })
                         : block.product.unit || ''}
                     </Text>
                     <Text style={styles.price}>
@@ -182,23 +208,23 @@ export function AgentUiBlocks({
                   ))}
                 </View>
                 <View style={styles.totals}>
-                  <MoneyRow label="Subtotal" value={formatMoney(block.subtotal, block.currency)} />
+                  <MoneyRow label={labels.subtotal} value={formatMoney(block.subtotal, block.currency)} />
                   {block.discount ? (
                     <MoneyRow
-                      label="Discount"
+                      label={labels.discount}
                       value={`−${formatMoney(block.discount, block.currency)}`}
                     />
                   ) : null}
                   {block.tax ? (
-                    <MoneyRow label="Tax" value={formatMoney(block.tax, block.currency)} />
+                    <MoneyRow label={labels.tax} value={formatMoney(block.tax, block.currency)} />
                   ) : null}
                   {block.shipping ? (
                     <MoneyRow
-                      label="Shipping"
+                      label={labels.shipping}
                       value={formatMoney(block.shipping, block.currency)}
                     />
                   ) : null}
-                  <MoneyRow label="Total" value={formatMoney(block.total, block.currency)} strong />
+                  <MoneyRow label={labels.total} value={formatMoney(block.total, block.currency)} strong />
                 </View>
                 {block.action ? (
                   <View style={styles.blockAction}>
@@ -314,7 +340,7 @@ export function AgentUiBlocks({
                     hitSlop={8}>
                     <Text
                       style={[styles.linkButton, { color: checked ? color : palette.textSubtle }]}>
-                      Save
+                      {labels.save}
                     </Text>
                   </Pressable>
                 </View>
@@ -339,7 +365,7 @@ export function AgentUiBlocks({
               <View key={block.id} style={[styles.card, styles.cardPadded]}>
                 <Text style={styles.title}>{labels.chooseTime}</Text>
                 <Text style={styles.description}>
-                  {block.serviceName} · {block.durationMinutes} min
+                  {block.serviceName} · {formatLabel(labels.minutes, { count: block.durationMinutes })}
                   {block.timezone ? ` · ${block.timezone}` : ''}
                 </Text>
 
@@ -351,7 +377,7 @@ export function AgentUiBlocks({
                         selected={activeProviderId === 'any'}
                         color={color}
                         disabled={pending !== null}
-                        label="Any available"
+                        label={labels.anyAvailable}
                         onPress={() =>
                           activeProviderId !== 'any' &&
                           act({
@@ -425,7 +451,7 @@ export function AgentUiBlocks({
 
                 {selectedProvider ? (
                   <Text style={[styles.muted, styles.blockAction]}>
-                    With {selectedProvider.name}
+                    {formatLabel(labels.withProvider, { name: selectedProvider.name })}
                   </Text>
                 ) : null}
                 <View style={styles.blockAction}>
@@ -453,7 +479,7 @@ export function AgentUiBlocks({
                         },
                       })
                     }>
-                    Book this time
+                    {labels.bookTime}
                   </ActionButton>
                 </View>
               </View>
@@ -477,7 +503,9 @@ export function AgentUiBlocks({
                 <Text style={styles.amount}>{formatMoney(block.amount, block.currency)}</Text>
                 {block.validUntil ? (
                   <Text style={styles.muted}>
-                    Valid until {formatDate(block.validUntil.slice(0, 10))}
+                    {formatLabel(labels.validUntil, {
+                      date: formatDate(block.validUntil.slice(0, 10)),
+                    })}
                   </Text>
                 ) : null}
                 {publicActions.map((action) => (

package/src/ui/components/Launcher.tsx

@@ -9,6 +9,7 @@
 
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
+import { createTranslator, DEFAULT_LABELS } from '../../i18n';
 import { useWidgetState } from '../../state/use-widget-state';
 import { controller } from '../../controller';
 import { ChatIcon, ChevronIcon } from './icons';
@@ -47,6 +48,10 @@ export function Launcher({
   const inset = Math.max(horizontalPadding ?? config?.launcherHorizontalPadding ?? 20, 20);
   const text = config?.bubbleText;
   const showText = !!text && !state.isOpen;
+  const translate = createTranslator(config, state.locale);
+  const accessibilityLabel = state.isOpen
+    ? translate('launcherClose', DEFAULT_LABELS.launcherClose)
+    : translate('launcherOpen', DEFAULT_LABELS.launcherOpen);
 
   return (
     <View
@@ -55,7 +60,7 @@ export function Launcher({
       <Pressable
         onPress={() => controller.store.toggle()}
         accessibilityRole="button"
-        accessibilityLabel={state.isOpen ? 'Close chat' : 'Open chat'}
+        accessibilityLabel={accessibilityLabel}
         style={({ pressed }) => [
           styles.bubble,
           showText ? styles.bubbleWithText : styles.bubbleRound,

package/src/ui/components/Markdown.tsx

@@ -7,7 +7,7 @@
  * (including bare URLs, linkified the same way the web widget does).
  */
 
-import { Fragment } from 'react';
+import { Fragment, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { fontSize, palette, radius, spacing } from '../styles/theme';
@@ -58,6 +58,36 @@ function linkifyPlainText(text: string): string {
   });
 }
 
+/** Host of an absolute web URL, lower-cased and without `www.`; null otherwise. */
+function targetHost(href: string): string | null {
+  const match = /^https?:\/\/(?:[^@/?#\s]*@)?([^/?#:\s]+)/i.exec(href.trim());
+  return match ? match[1]!.toLowerCase().replace(/^www\./, '') : null;
+}
+
+const ADDRESS_LABEL =
+  /^(?:https?:\/\/)?(?:www\.)?((?:[a-z0-9-]+\.)+[a-z]{2,24})(?::\d+)?(?:[/?#]\S*)?$/i;
+
+/**
+ * The text a link shows. Agent and AI replies are remote content, and
+ * `[https://yourbank.com](https://evil.example)` would read as one site while
+ * opening another: when the label itself reads as a web address on a
+ * different host than the target, the real target is shown instead. Ordinary
+ * labels ("Book here", `report.pdf`) are left alone.
+ */
+export function linkLabel(label: string, href: string): string {
+  const text = label.trim();
+  if (!text) return href;
+  const looksLikeScheme = /^(?:[a-z][a-z0-9+.-]*:\/\/|www\.)/i.test(text);
+  const address = ADDRESS_LABEL.exec(text);
+  if (!address && !looksLikeScheme) return label;
+  if (address && !looksLikeScheme && !text.includes('/')) {
+    const extension = address[1]!.split('.').pop()?.toLowerCase() ?? '';
+    if (NON_LINK_EXTENSIONS.has(extension)) return label;
+  }
+  const shown = address ? address[1]!.toLowerCase().replace(/^www\./, '') : null;
+  return shown && shown === targetHost(href) ? label : href;
+}
+
 /** Turn bare URLs into markdown links while leaving code and existing links alone. */
 export function linkifyMarkdown(text: string): string {
   if (!text) return text;
@@ -108,8 +138,8 @@ function InlineMarkdown({ content, color }: { content: string; color: string })
 
         const link = /^!?\[([^\]]*)\]\(([^)]*)\)$/.exec(part);
         if (link) {
-          const label = link[1] || link[2] || '';
           const href = link[2] || '';
+          const label = linkLabel(link[1] || '', href);
           return (
             <Text
               key={key}
@@ -134,7 +164,8 @@ interface MarkdownProps {
 }
 
 export function Markdown({ content, color, linkColor }: MarkdownProps) {
-  const blocks = parseBlocks(linkifyMarkdown(content));
+  // Parsed once per body: a thread re-renders far more often than it changes.
+  const blocks = useMemo(() => parseBlocks(linkifyMarkdown(content)), [content]);
   const effectiveLinkColor = linkColor ?? color;
 
   return (

package/src/ui/components/RatingCard.tsx

@@ -104,8 +104,10 @@ export function RatingCard({
   const [comment, setComment] = useState<string | null>(initialComment);
   const [draft, setDraft] = useState('');
   // The comment is optional: "Done" with nothing typed just closes the box —
-  // the face (and reason) are already saved.
-  const [finished, setFinished] = useState(false);
+  // the face (and reason) are already saved. A card that opens with a saved
+  // rating starts closed too, so "Done" sticks when the thread is reopened;
+  // tapping the chosen face opens the box again.
+  const [finished, setFinished] = useState(initialRating != null);
   const [pending, setPending] = useState(false);
   const [closedReason, setClosedReason] = useState<'locked' | 'expired' | null>(initialComment ? 'locked' : null);
   const [failed, setFailed] = useState(false);
@@ -124,6 +126,7 @@ export function RatingCard({
       setComment(result.comment);
       if (result.locked) setClosedReason('locked');
       setDraft('');
+      setFinished(false);
     } catch (error) {
       const status = (error as { status?: number }).status;
       if (status === 409) setClosedReason('locked');
@@ -162,6 +165,7 @@ export function RatingCard({
                 hitSlop={4}
                 onPress={() => {
                   if (!selected) void submit({ rating: entry.value });
+                  else setFinished(false);
                 }}
                 style={({ pressed }) => [
                   styles.face,

package/src/ui/hooks/use-widget-insets.ts

@@ -25,7 +25,6 @@ const FALLBACK_INSETS: WidgetInsets = {
 
 let insetsHook: (() => WidgetInsets) | null = null;
 try {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
   const mod = require('react-native-safe-area-context');
   if (typeof mod?.useSafeAreaInsets === 'function') insetsHook = mod.useSafeAreaInsets;
 } catch {

package/src/ui/screens/chat/ChatView.tsx

@@ -8,7 +8,7 @@
  * `attachments/pickers.ts`).
  */
 
-import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   Animated,
   Easing,
@@ -33,6 +33,7 @@ import {
   type AttachmentProblem,
   type DraftAttachment,
 } from '../../../attachments/pickers';
+import { formatLabel } from '../../../i18n';
 import type {
   AgentUiAction,
   AgentProcedureForm,
@@ -315,20 +316,23 @@ export function ChatView({
     [onIdentifyVisitor, onSendMessage, scrollToBottom]
   );
 
+  const handleSubmitProcedureForm = useCallback(
+    (body: string) => void onSendMessage(body).catch(() => {}),
+    [onSendMessage]
+  );
+
+  // Recomputed only when the list changes — never on a keystroke.
+  const thread = useMemo(() => deriveThread(messages), [messages]);
+  const locales = useMemo(() => [locale, defaultLocale], [locale, defaultLocale]);
+
   const headerTextColor = contrastingTextColor(color);
   const onDarkHeader = headerTextColor === palette.white;
   const isEmptyThread = !loading && messages.length === 0;
   const agentIsActive = agentOnline ?? isOnline;
   // "Waiting for a teammate" until someone replies: no teammate in the header
   // and the visitor spoke last (bot replies before that still count as waiting).
-  const lastChatMessage = [...messages]
-    .reverse()
-    .find((message) => (message.messageType ?? 'message') === 'message' && !message.deletedAt);
-  const awaitingTeammate = !agentName && !agentTyping && lastChatMessage?.direction === 'inbound';
-  // "Sent" / "Seen" goes under the visitor's latest message only.
-  const lastVisitorMessageId = [...messages]
-    .reverse()
-    .find((message) => message.direction === 'inbound' && (message.messageType ?? 'message') === 'message')?.id;
+  const awaitingTeammate =
+    !agentName && !agentTyping && thread.lastChatMessage?.direction === 'inbound';
   // Two stops off the brand color: flat fill looked like an unstyled block.
   // A non-hex brand color falls through mixHex unchanged and renders solid.
   const topInset = useTopInset();
@@ -493,21 +497,25 @@ export function ChatView({
                   labels={labels}
                   onOpenImage={setViewerImage}
                   onRateConversation={onRateConversation}
-                  locales={[locale, defaultLocale]}
+                  locales={locales}
                   senderLabel={
                     isAgentMessage && (startsRun || startsDay)
                       ? message.senderName || agentName || labels.team
                       : null
                   }
                   timeLabel={formatClockTime(message.createdAt, locale)}
-                  receiptLabel={message.id === lastVisitorMessageId ? receiptLabel(message, labels) : undefined}
+                  receiptLabel={
+                    message.id === thread.lastVisitorMessageId
+                      ? receiptLabel(message, labels)
+                      : undefined
+                  }
                   onSubmitProcedureForm={
-                    shouldShowProcedureForm(messages, message)
-                      ? (body) => void onSendMessage(body).catch(() => {})
+                    message.id === thread.procedureFormMessageId
+                      ? handleSubmitProcedureForm
                       : undefined
                   }
                   onAgentUiAction={
-                    shouldShowAgentUiBlocks(messages, message) ? handleAgentUiAction : undefined
+                    thread.agentBlocksShown.has(message.id) ? handleAgentUiAction : undefined
                   }
                 />
               </WidgetErrorBoundary>
@@ -635,7 +643,11 @@ export function ChatView({
   );
 }
 
-function MessageBubble({
+/**
+ * Memoized: the composer re-renders the screen on every keystroke, and every
+ * prop here is stable unless this message itself changed.
+ */
+const MessageBubble = memo(function MessageBubble({
   message,
   color,
   labels,
@@ -795,7 +807,7 @@ function MessageBubble({
       ) : null}
     </View>
   );
-}
+});
 
 /** Sent once the server has it, Seen once a teammate opened the conversation. */
 function receiptLabel(message: Message, labels: ChatLabels): string | undefined {
@@ -900,17 +912,21 @@ function ProcedureFieldForm({
         style={[styles.procedureToggle, { backgroundColor: expanded ? palette.surface : color }]}>
         <Text
           style={[styles.procedureToggleLabel, { color: expanded ? palette.text : palette.white }]}>
-          {submitted ? 'Details sent' : 'Share details'}
+          {submitted ? labels.procedureDetailsSent : labels.procedureShareDetails}
         </Text>
         <Text
           style={[styles.procedureToggleHint, { color: expanded ? palette.text : palette.white }]}>
-          {expanded ? 'Hide' : `${form.fields.length} field${form.fields.length === 1 ? '' : 's'}`}
+          {expanded
+            ? labels.procedureHide
+            : form.fields.length === 1
+              ? labels.procedureFieldCountOne
+              : formatLabel(labels.procedureFieldCount, { count: form.fields.length })}
         </Text>
       </Pressable>
 
       {expanded ? (
         <>
-          <Text style={styles.procedureTitle}>{form.procedureName || 'Details'}</Text>
+          <Text style={styles.procedureTitle}>{form.procedureName || labels.procedureTitle}</Text>
           <View style={styles.procedureFields}>
             {form.fields.map((field) => (
               <View key={field.name}>
@@ -923,7 +939,7 @@ function ProcedureFieldForm({
                   onChangeText={(text) =>
                     setValues((current) => ({ ...current, [field.name]: text }))
                   }
-                  placeholder={placeholderForField(field)}
+                  placeholder={placeholderForField(field, labels)}
                   placeholderTextColor={palette.textSubtle}
                   editable={!submitted}
                   keyboardType={
@@ -999,9 +1015,9 @@ function TypingDot({ index, reduceMotion }: { index: number; reduceMotion: boole
   return <Animated.View style={[styles.typingDot, motionStyle]} />;
 }
 
-function placeholderForField(field: AgentProcedureForm['fields'][number]) {
-  if (field.type === 'email') return 'name@example.com';
-  if (field.type === 'phone') return '+962 7...';
+function placeholderForField(field: AgentProcedureForm['fields'][number], labels: ChatLabels) {
+  if (field.type === 'email') return labels.procedureEmailPlaceholder;
+  if (field.type === 'phone') return labels.procedurePhonePlaceholder;
   if (field.type === 'date' || field.type === 'time') return '';
   return field.label;
 }
@@ -1010,24 +1026,43 @@ function stringPayload(value: unknown) {
   return typeof value === 'string' && value.trim() ? value.trim() : undefined;
 }
 
-function shouldShowProcedureForm(messages: Message[], message: Message) {
-  if (message.direction === 'inbound' || !getProcedureForm(message.metadata)) return false;
-  return messages.findIndex((candidate) => candidate.id === message.id) === messages.length - 1;
-}
+/**
+ * Everything the thread derives from the whole list, in one backwards pass.
+ * (Per-message lookups made this O(n²) on every render, keystrokes included.)
+ */
+function deriveThread(messages: Message[]) {
+  /** Messages whose agent blocks stay actionable. */
+  const agentBlocksShown = new Set<string>();
+  const laterSlotPickerIds = new Set<string>();
+  let lastChatMessage: Message | undefined;
+  let lastVisitorMessageId: string | undefined;
+
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const message = messages[index]!;
+    const isChat = (message.messageType ?? 'message') === 'message';
+    if (!lastChatMessage && isChat && !message.deletedAt) lastChatMessage = message;
+    // "Sent" / "Seen" goes under the visitor's latest message only.
+    if (!lastVisitorMessageId && isChat && message.direction === 'inbound') {
+      lastVisitorMessageId = message.id;
+    }
 
-/** Hide superseded slot pickers so only the newest one stays actionable. */
-function shouldShowAgentUiBlocks(messages: Message[], message: Message) {
-  const blocks = getAgentUiBlocks(message.metadata);
-  if (blocks.length === 0) return false;
-  if (!blocks.every((block) => block.type === 'appointment_slot_picker')) return true;
-
-  const messageIndex = messages.findIndex((candidate) => candidate.id === message.id);
-  const laterBlockIds = new Set(
-    messages
-      .slice(messageIndex + 1)
-      .flatMap((candidate) => getAgentUiBlocks(candidate.metadata))
-      .filter((block) => block.type === 'appointment_slot_picker')
-      .map((block) => block.id)
-  );
-  return blocks.some((block) => !laterBlockIds.has(block.id));
+    const blocks = getAgentUiBlocks(message.metadata);
+    if (blocks.length === 0) continue;
+    // A slot picker a later message re-sent is superseded: only the newest
+    // one stays actionable. Any other block always does.
+    const onlySlotPickers = blocks.every((block) => block.type === 'appointment_slot_picker');
+    if (!onlySlotPickers || blocks.some((block) => !laterSlotPickerIds.has(block.id))) {
+      agentBlocksShown.add(message.id);
+    }
+    blocks.forEach((block) => {
+      if (block.type === 'appointment_slot_picker') laterSlotPickerIds.add(block.id);
+    });
+  }
+
+  // A procedure form only while it is the newest message in the thread.
+  const last = messages[messages.length - 1];
+  const procedureFormMessageId =
+    last && last.direction !== 'inbound' && getProcedureForm(last.metadata) ? last.id : null;
+
+  return { agentBlocksShown, lastChatMessage, lastVisitorMessageId, procedureFormMessageId };
 }

package/src/ui/screens/chat/ChatView.types.ts

@@ -35,6 +35,16 @@ export interface ChatLabels {
   joinedConversation: string;
   procedureSend: string;
   procedureSent: string;
+  procedureShareDetails: string;
+  procedureDetailsSent: string;
+  procedureHide: string;
+  /** `{count}` = number of fields (2 or more). */
+  procedureFieldCount: string;
+  procedureFieldCountOne: string;
+  /** Shown when the procedure has no name. */
+  procedureTitle: string;
+  procedureEmailPlaceholder: string;
+  procedurePhonePlaceholder: string;
   blocks: AgentUiBlockLabels;
   rating: RatingCardLabels;
   attach: AttachLabels;

package/src/ui/utils/html.ts

@@ -14,10 +14,18 @@ const ENTITIES: Record<string, string> = {
   '&nbsp;': ' ',
 };
 
+/** `&#128512;` / `&#x1F600;` → 😀. Out-of-range or surrogate code points stay as written. */
+function decodeNumericEntity(match: string, decimal?: string, hex?: string): string {
+  const code = decimal !== undefined ? Number(decimal) : parseInt(hex ?? '', 16);
+  const valid =
+    Number.isInteger(code) && code > 0 && code <= 0x10ffff && (code < 0xd800 || code > 0xdfff);
+  return valid ? String.fromCodePoint(code) : match;
+}
+
 function decodeEntities(text: string): string {
   return text
     .replace(/&(amp|lt|gt|quot|#39|apos|nbsp);/g, (match) => ENTITIES[match] ?? match)
-    .replace(/&#(\d+);/g, (_match, code) => String.fromCharCode(Number(code)));
+    .replace(/&#(?:(\d{1,7})|[xX]([0-9a-fA-F]{1,6}));/g, decodeNumericEntity);
 }
 
 /** Block-level tags become newlines so paragraphs survive the strip. */

package/src/ui/utils/native-gradient.ts

@@ -29,7 +29,6 @@ export interface NativeGradientProps {
 let nativeGradient: ComponentType<NativeGradientProps> | null = null;
 
 try {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
   const mod = require('react-native-linear-gradient');
   const component = mod?.default ?? mod?.LinearGradient;
   if (component) nativeGradient = component as ComponentType<NativeGradientProps>;