@repzo/widget-react-native 1.0.9 → 1.1.0

package/src/types.ts

@@ -164,12 +164,18 @@ export interface WidgetUser {
   /**
    * The user's account (company) in your app. Matched by `id`, so a renamed
    * account updates the same CRM account instead of creating another.
+   * @since 1.0.8
    */
   account?: WidgetUserAccount;
-  /** When they signed up in your app — a Date, unix seconds/ms, or an ISO string. Shown as "Signed up" in the inbox. */
+  /**
+   * When they signed up in your app — a Date, unix seconds/ms, or an ISO
+   * string. Shown as "Signed up" in the inbox.
+   * @since 1.0.9
+   */
   signedUpAt?: Date | number | string;
 }
 
+/** The user's account (company) in your app, sent as `WidgetUser.account`. @since 1.0.8 */
 export interface WidgetUserAccount {
   /** Your app's stable account id — required. */
   id: string;
@@ -490,13 +496,6 @@ export interface RepzoWidgetStorageAdapter {
   removeItem(key: string): Promise<void> | void;
 }
 
-/**
- * `RepzoWidgetError.code`. The last two come from the server's 403 body and
- * are terminal — the SDK stops realtime and does not retry on its own:
- * - `messenger_api_disabled` — the channel's Messenger API is switched off.
- * - `identity_verification_failed` — `userHash` missing/wrong while the
- *   channel enforces identity verification.
- */
 /** A bad-rating reason on the rating card, labelled per language. */
 export interface RatingReason {
   id: string;
@@ -516,6 +515,13 @@ export interface ConversationRatingResult {
   locked: boolean;
 }
 
+/**
+ * `RepzoWidgetError.code`. The last two come from the server's 403 body and
+ * are terminal — the SDK stops realtime and does not retry on its own:
+ * - `messenger_api_disabled` — the channel's Messenger API is switched off.
+ * - `identity_verification_failed` — `userHash` missing/wrong while the
+ *   channel enforces identity verification.
+ */
 export type RepzoWidgetErrorCode =
   | 'network'
   | 'http'

package/src/ui/WidgetProvider.tsx

@@ -39,6 +39,7 @@ import { useKeyboardOverlap } from './hooks/use-keyboard-overlap';
 import { TopInsetContext } from './hooks/use-top-inset';
 import { useWidgetInsets } from './hooks/use-widget-insets';
 import { ChatView } from './screens/chat/ChatView';
+import type { ChatLabels } from './screens/chat/ChatView.types';
 import { ConversationsList } from './screens/conversations/ConversationsList';
 import { HomeView, resolveHeaderTextColor } from './screens/home/HomeView';
 import { PreChatForm } from './screens/pre-chat/PreChatForm';
@@ -135,6 +136,17 @@ export function RepzoWidgetProvider({
       professional: labels.blockProfessional,
       priceOffer: labels.blockPriceOffer,
       working: labels.working,
+      subtotal: labels.blockSubtotal,
+      discount: labels.blockDiscount,
+      tax: labels.blockTax,
+      shipping: labels.blockShipping,
+      total: labels.blockTotal,
+      minutes: labels.blockMinutes,
+      save: labels.blockSave,
+      anyAvailable: labels.blockAnyAvailable,
+      withProvider: labels.blockWithProvider,
+      bookTime: labels.blockBookTime,
+      validUntil: labels.blockValidUntil,
     }),
     [labels]
   );
@@ -156,6 +168,62 @@ export function RepzoWidgetProvider({
     [labels]
   );
 
+  // Stable across renders so each message bubble only re-renders when its
+  // own message changes, not on every store update or keystroke.
+  const chatLabels = useMemo<ChatLabels>(
+    () => ({
+      back: labels.back,
+      loading: labels.loading,
+      loadEarlier: labels.loadEarlier,
+      emptyConversation: labels.emptyConversation,
+      messagePlaceholder: labels.messagePlaceholder,
+      failedToSend: labels.failedToSend,
+      thinking: labels.thinking,
+      team: labels.team,
+      statusOnline: labels.homeStatusOnline,
+      statusAway: labels.homeStatusAway,
+      close: labels.close,
+      today: labels.today,
+      yesterday: labels.yesterday,
+      conversationUpdated: labels.conversationUpdated,
+      messageDeleted: labels.messageDeleted,
+      messageSent: labels.messageSent,
+      messageSeen: labels.messageSeen,
+      waitingForTeammate: labels.waitingForTeammate,
+      joinedConversation: labels.joinedConversation,
+      procedureSend: labels.procedureSend,
+      procedureSent: labels.procedureSent,
+      procedureShareDetails: labels.procedureShareDetails,
+      procedureDetailsSent: labels.procedureDetailsSent,
+      procedureHide: labels.procedureHide,
+      procedureFieldCount: labels.procedureFieldCount,
+      procedureFieldCountOne: labels.procedureFieldCountOne,
+      procedureTitle: labels.procedureTitle,
+      procedureEmailPlaceholder: labels.procedureEmailPlaceholder,
+      procedurePhonePlaceholder: labels.procedurePhonePlaceholder,
+      blocks: blockLabels,
+      rating: {
+        question: labels.ratingQuestion,
+        reasonPrompt: labels.ratingReasonPrompt,
+        commentPlaceholder: labels.ratingCommentPlaceholder,
+        submit: labels.ratingSubmit,
+        done: labels.ratingDone,
+        thanks: labels.ratingThanks,
+        locked: labels.ratingLocked,
+        expired: labels.ratingExpired,
+        failed: labels.ratingFailed,
+        scale: [labels.rating1, labels.rating2, labels.rating3, labels.rating4, labels.rating5],
+      },
+      attach: attachLabels,
+      viewer: {
+        close: labels.close,
+        loadFailed: labels.imageLoadFailed,
+        openExternally: labels.openImageExternally,
+      },
+    }),
+    [labels, blockLabels, attachLabels]
+  );
+
   // Read per render: `boot({ attachments })` sets it outside React state.
   const attachmentSources = theme.attachmentsEnabled ? getAttachmentSources() : [];
 
@@ -176,6 +244,21 @@ export function RepzoWidgetProvider({
     [store]
   );
 
+  const handleIdentifyVisitor = useCallback(
+    (data: { email?: string; name?: string; phone?: string }) => store.identifyVisitor(data),
+    [store]
+  );
+  const handleRateConversation = useCallback(
+    (
+      messageId: string,
+      ratingId: string,
+      data: { rating: number; reason?: string; comment?: string }
+    ) => store.rateConversation(messageId, ratingId, data),
+    [store]
+  );
+  const handleLoadMore = useCallback(() => void store.loadMoreMessages(), [store]);
+  const handleTyping = useCallback((isTyping: boolean) => store.notifyTyping(isTyping), [store]);
+
   const handlePreChatSubmit = useCallback(
     async (data: Record<string, string>) => {
       try {
@@ -298,55 +381,14 @@ export function RepzoWidgetProvider({
           defaultLocale={state.config?.defaultLocale}
           prefillText={state.prefillText}
           offlineMessage={theme.offlineMessage}
-          labels={{
-            back: labels.back,
-            loading: labels.loading,
-            loadEarlier: labels.loadEarlier,
-            emptyConversation: labels.emptyConversation,
-            messagePlaceholder: labels.messagePlaceholder,
-            failedToSend: labels.failedToSend,
-            thinking: labels.thinking,
-            team: labels.team,
-            statusOnline: labels.homeStatusOnline,
-            statusAway: labels.homeStatusAway,
-            close: labels.close,
-            today: labels.today,
-            yesterday: labels.yesterday,
-            conversationUpdated: labels.conversationUpdated,
-            messageDeleted: labels.messageDeleted,
-            messageSent: labels.messageSent,
-            messageSeen: labels.messageSeen,
-            waitingForTeammate: labels.waitingForTeammate,
-            joinedConversation: labels.joinedConversation,
-            procedureSend: labels.procedureSend,
-            procedureSent: labels.procedureSent,
-            blocks: blockLabels,
-            rating: {
-              question: labels.ratingQuestion,
-              reasonPrompt: labels.ratingReasonPrompt,
-              commentPlaceholder: labels.ratingCommentPlaceholder,
-              submit: labels.ratingSubmit,
-              done: labels.ratingDone,
-              thanks: labels.ratingThanks,
-              locked: labels.ratingLocked,
-              expired: labels.ratingExpired,
-              failed: labels.ratingFailed,
-              scale: [labels.rating1, labels.rating2, labels.rating3, labels.rating4, labels.rating5],
-            },
-            attach: attachLabels,
-            viewer: {
-              close: labels.close,
-              loadFailed: labels.imageLoadFailed,
-              openExternally: labels.openImageExternally,
-            },
-          }}
+          labels={chatLabels}
           attachmentSources={attachmentSources}
           onPickAttachments={pickAttachments}
           onSendMessage={handleSendMessage}
-          onIdentifyVisitor={(data) => store.identifyVisitor(data)}
-          onRateConversation={(messageId, ratingId, data) => store.rateConversation(messageId, ratingId, data)}
-          onLoadMore={() => store.loadMoreMessages()}
-          onTyping={(isTyping) => store.notifyTyping(isTyping)}
+          onIdentifyVisitor={handleIdentifyVisitor}
+          onRateConversation={handleRateConversation}
+          onLoadMore={handleLoadMore}
+          onTyping={handleTyping}
           onBack={handleBack}
           onClose={handleClose}
         />

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 {