@repzo/widget-react-native 1.0.9 → 1.2.0

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;': ' ',
 };
 
-function decodeEntities(text: string): string {
+/** `&#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;
+}
+
+export 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>;

package/src/ui/utils/post-html.ts

@@ -0,0 +1,256 @@
+/**
+ * Send post HTML → blocks a React Native view can draw.
+ *
+ * The CRM renders and sanitizes the post before sending it, down to a flat
+ * set: `<p>` with `<strong>` / `<em>` / `<code>` / `<a href>` / `<br>`,
+ * `<ul>` / `<ol>` of `<li>`, `<pre><code>`, a button
+ * (`<div data-post-button data-align>` around one link) and social links
+ * (`<div data-post-social data-align>` of `<a data-network>`). React Native
+ * has no HTML renderer, so this turns that subset into blocks. Unknown tags
+ * keep their text. A link survives when it's one the host could route
+ * (`myapp://…` through `onOpenUrl`) or the allow-list would open; tapping it
+ * goes through `openExternalUrl` like every other widget link.
+ */
+
+import { decodeEntities } from './html';
+import { isRoutableUrl } from './safe-url';
+
+export interface PostTextRun {
+  text: string;
+  bold: boolean;
+  italic: boolean;
+  code: boolean;
+  /** Set when the run is a link the SDK may open. */
+  href: string | null;
+}
+
+export type PostAlign = 'left' | 'center' | 'right';
+
+export const POST_SOCIAL_NETWORKS = ['facebook', 'x', 'linkedin', 'instagram', 'youtube'] as const;
+export type PostSocialNetwork = (typeof POST_SOCIAL_NETWORKS)[number];
+
+export type PostBlock =
+  | { type: 'paragraph'; runs: PostTextRun[] }
+  | {
+      type: 'list';
+      ordered: boolean;
+      items: PostTextRun[][];
+      /** Per item: how deep it's nested (0 = top level) and its own list's kind. */
+      levels: Array<{ depth: number; ordered: boolean }>;
+    }
+  | { type: 'code'; text: string }
+  | { type: 'button'; label: string; href: string; align: PostAlign }
+  | { type: 'social'; align: PostAlign; links: Array<{ network: PostSocialNetwork; href: string }> };
+
+const TOKEN = /<(\/?)([a-z][a-z0-9]*)([^>]*)>|([^<]+)/gi;
+
+function attr(attrs: string, name: string): string | null {
+  // Whole names only: `href` must not match inside `data-href`.
+  const found = new RegExp(`(?:^|\\s)${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)')`, 'i').exec(attrs);
+  return found ? decodeEntities(found[1] ?? found[2] ?? '').trim() : null;
+}
+
+const hasAttr = (attrs: string, name: string) => new RegExp(`(^|\\s)${name}(\\s|=|$)`, 'i').test(attrs);
+
+function alignOf(attrs: string): PostAlign {
+  const value = attr(attrs, 'data-align');
+  return value === 'center' || value === 'right' ? value : 'left';
+}
+
+function safeHref(attrs: string): string | null {
+  const href = attr(attrs, 'href') ?? '';
+  return isRoutableUrl(href) ? href : null;
+}
+
+/** Merges neighbouring runs that look the same and trims the outer whitespace. */
+function tidy(runs: PostTextRun[]): PostTextRun[] {
+  const out: PostTextRun[] = [];
+  for (const run of runs) {
+    const last = out[out.length - 1];
+    if (last && last.bold === run.bold && last.italic === run.italic && last.code === run.code && last.href === run.href) {
+      last.text += run.text;
+    } else {
+      out.push({ ...run });
+    }
+  }
+  if (out.length) {
+    out[0].text = out[0].text.replace(/^[ \t]+/, '');
+    out[out.length - 1].text = out[out.length - 1].text.replace(/[ \t]+$/, '');
+  }
+  return out.filter((run) => run.text.length > 0);
+}
+
+export function parsePostHtml(html: string): PostBlock[] {
+  const blocks: PostBlock[] = [];
+  let bold = 0;
+  let italic = 0;
+  let code = 0;
+  const links: Array<string | null> = [];
+
+  // What's being built right now.
+  let runs: PostTextRun[] = [];
+  // The top-level list being built, and the lists open inside it (nested lists stay in it, indented).
+  let list: { ordered: boolean; items: PostTextRun[][]; levels: Array<{ depth: number; ordered: boolean }> } | null = null;
+  const openLists: boolean[] = [];
+  let itemDepth = 0;
+  let pre: string | null = null;
+  let button: { href: string | null; align: PostAlign; label: string } | null = null;
+  let social: { align: PostAlign; links: Array<{ network: PostSocialNetwork; href: string }> } | null = null;
+
+  const flushParagraph = () => {
+    const tidied = tidy(runs);
+    runs = [];
+    if (tidied.length) blocks.push({ type: 'paragraph', runs: tidied });
+  };
+  const flushItem = () => {
+    if (!list) return;
+    const tidied = tidy(runs);
+    runs = [];
+    if (tidied.length) {
+      list.items.push(tidied);
+      list.levels.push({ depth: openLists.length - 1, ordered: openLists[openLists.length - 1] ?? list.ordered });
+    }
+  };
+  const endList = () => {
+    if (list && list.items.length) blocks.push({ type: 'list', ...list });
+    list = null;
+    openLists.length = 0;
+    itemDepth = 0;
+  };
+
+  const pushText = (text: string) => {
+    if (!text) return;
+    if (pre !== null) {
+      pre += text;
+      return;
+    }
+    if (button) {
+      button.label += text;
+      return;
+    }
+    if (social) return;
+    // Text between list items is only formatting whitespace.
+    if (list && itemDepth === 0) return;
+    runs.push({
+      text: text.replace(/\s+/g, ' '),
+      bold: bold > 0,
+      italic: italic > 0,
+      code: code > 0,
+      href: links.length ? links[links.length - 1] : null,
+    });
+  };
+
+  for (const match of (html || '').matchAll(TOKEN)) {
+    const [, closing, rawTag, attrs = '', text] = match;
+    if (text !== undefined) {
+      pushText(decodeEntities(text));
+      continue;
+    }
+    const tag = rawTag.toLowerCase();
+    const open = !closing;
+
+    if (pre !== null && tag !== 'pre') continue; // Only text inside a code block.
+
+    switch (tag) {
+      case 'p':
+        if (list) {
+          // Lists from the editor wrap items in <p>: keep it one line per item.
+          if (!open) runs.push({ text: ' ', bold: false, italic: false, code: false, href: null });
+        } else {
+          flushParagraph();
+        }
+        break;
+      case 'br':
+        if (!social && !button) runs.push({ text: '\n', bold: bold > 0, italic: italic > 0, code: code > 0, href: null });
+        break;
+      case 'strong':
+      case 'b':
+        bold = Math.max(0, bold + (open ? 1 : -1));
+        break;
+      case 'em':
+      case 'i':
+        italic = Math.max(0, italic + (open ? 1 : -1));
+        break;
+      case 'code':
+        code = Math.max(0, code + (open ? 1 : -1));
+        break;
+      case 'ul':
+      case 'ol':
+        if (open) {
+          if (list) {
+            // A list inside an item: what the item said so far is its line.
+            flushItem();
+          } else {
+            flushParagraph();
+            list = { ordered: tag === 'ol', items: [], levels: [] };
+          }
+          openLists.push(tag === 'ol');
+        } else if (list) {
+          flushItem();
+          openLists.pop();
+          if (openLists.length === 0) endList();
+        }
+        break;
+      case 'li':
+        flushItem();
+        if (list) itemDepth = Math.max(0, itemDepth + (open ? 1 : -1));
+        break;
+      case 'pre':
+        if (open) {
+          flushParagraph();
+          pre = '';
+        } else if (pre !== null) {
+          const textBlock = pre.replace(/^\n+|\n+$/g, '');
+          if (textBlock) blocks.push({ type: 'code', text: textBlock });
+          pre = null;
+        }
+        break;
+      case 'div':
+        if (open && hasAttr(attrs, 'data-post-button')) {
+          flushParagraph();
+          button = { href: null, align: alignOf(attrs), label: '' };
+        } else if (open && hasAttr(attrs, 'data-post-social')) {
+          flushParagraph();
+          social = { align: alignOf(attrs), links: [] };
+        } else if (!open) {
+          if (button) {
+            const label = button.label.replace(/\s+/g, ' ').trim();
+            if (label && button.href) blocks.push({ type: 'button', label, href: button.href, align: button.align });
+            button = null;
+          } else if (social) {
+            if (social.links.length) blocks.push({ type: 'social', align: social.align, links: social.links });
+            social = null;
+          } else {
+            flushParagraph();
+          }
+        }
+        break;
+      case 'a':
+        if (button) {
+          if (open) button.href = safeHref(attrs);
+        } else if (social) {
+          if (open) {
+            const network = attr(attrs, 'data-network') as PostSocialNetwork | null;
+            const href = safeHref(attrs);
+            if (network && (POST_SOCIAL_NETWORKS as readonly string[]).includes(network) && href) {
+              social.links.push({ network, href });
+            }
+          }
+        } else if (open) {
+          links.push(safeHref(attrs));
+        } else {
+          links.pop();
+        }
+        break;
+      default:
+        break;
+    }
+  }
+  if (list) {
+    flushItem();
+    endList();
+  }
+  flushParagraph();
+  return blocks;
+}
+

package/src/ui/utils/safe-url.ts

@@ -42,6 +42,21 @@ export function isSafeExternalUrl(url: string): boolean {
   return scheme === 'http:' || scheme === 'https:' ? isHttpUrl(url) : true;
 }
 
+/** Schemes no host would route — content carrying them never shows as a link. */
+const NEVER_ROUTED_SCHEMES = new Set(['javascript:', 'vbscript:', 'data:', 'file:', 'blob:']);
+
+/**
+ * Worth drawing as a link: absolute, with a scheme the host could route
+ * through `onOpenUrl` (`myapp://…`) or the allow-list would open. Tapping it
+ * still goes through `openExternalUrl`, which makes the actual call.
+ */
+export function isRoutableUrl(url: string): boolean {
+  if (!url || CONTROL_CHARS.test(url)) return false;
+  const scheme = urlScheme(url);
+  if (!scheme || NEVER_ROUTED_SCHEMES.has(scheme)) return false;
+  return scheme === 'http:' || scheme === 'https:' ? isHttpUrl(url) : true;
+}
+
 /** Host handler first, then the allow-list. Never throws. */
 export async function openExternalUrl(url: string | null | undefined): Promise<void> {
   const target = (url ?? '').trim();