@repzo/widget-react-native 1.0.9 → 1.1.0

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>;