@repzo/widget-react-native 1.0.8 → 1.1.0

package/src/api/client.ts

@@ -215,6 +215,12 @@ export class WidgetApiClient {
           ...(params.user.userId ? { user_id: params.user.userId } : {}),
           ...(params.user.userHash ? { user_hash: params.user.userHash } : {}),
           ...(params.user.account?.id ? { account: params.user.account } : {}),
+          ...(params.user.signedUpAt !== undefined && params.user.signedUpAt !== null
+            ? {
+                signed_up_at:
+                  params.user.signedUpAt instanceof Date ? params.user.signedUpAt.toISOString() : params.user.signedUpAt,
+              }
+            : {}),
         }
       : undefined;
 

package/src/attachments/pickers.ts

@@ -63,12 +63,12 @@ export interface PickResult {
 }
 
 // ─── Host integrations ─────────────────────────────────────────────────────
-// Resolved once at module load. Each `require` is static so Metro can see it,
-// and `withRepzoWidget` (metro.js) maps an uninstalled one to an empty module.
+// Resolved once at module load. Each `require` is static so Metro can see it;
+// with `allowOptionalDependencies` (see metro.js) an uninstalled one bundles as
+// a require that throws, which the `try` around it catches.
 
 let imagePicker: any = null;
 try {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
   const mod = require('expo-image-picker');
   if (typeof mod?.launchImageLibraryAsync === 'function') imagePicker = mod;
 } catch {
@@ -77,7 +77,6 @@ try {
 
 let documentPicker: any = null;
 try {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
   const mod = require('expo-document-picker');
   if (typeof mod?.getDocumentAsync === 'function') documentPicker = mod;
 } catch {
@@ -86,7 +85,6 @@ try {
 
 let fileSystem: any = null;
 try {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
   fileSystem = require('expo-file-system') ?? null;
 } catch {
   fileSystem = null;
@@ -94,7 +92,6 @@ try {
 
 let imageManipulator: any = null;
 try {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
   const mod = require('expo-image-manipulator');
   if (
     typeof mod?.manipulateAsync === 'function' ||

package/src/device-id.ts

@@ -10,9 +10,33 @@ import { DEVICE_ID_KEY, Storage } from './storage';
 let cached: string | null = null;
 
 /**
- * 16 random bytes from `crypto.getRandomValues` when the runtime has it (RN
- * with a polyfill, newer Hermes); otherwise Math.random, which is fine for a
- * correlation id but guessable.
+ * The host's `expo-crypto`, if installed — Hermes has no `crypto` global
+ * unless the app adds a polyfill. Loaded like every other optional peer.
+ */
+function expoCryptoBytes(bytes: Uint8Array): boolean {
+  try {
+    const mod = require('expo-crypto');
+    if (typeof mod?.getRandomValues === 'function') {
+      mod.getRandomValues(bytes);
+      return true;
+    }
+    if (typeof mod?.getRandomBytes === 'function') {
+      const random: unknown = mod.getRandomBytes(bytes.length);
+      if (random instanceof Uint8Array && random.length === bytes.length) {
+        bytes.set(random);
+        return true;
+      }
+    }
+  } catch {
+    // Not installed, or its native module is missing (Expo Go, tests).
+  }
+  return false;
+}
+
+/**
+ * 16 random bytes from `crypto.getRandomValues` (RN with a polyfill, newer
+ * Hermes), then `expo-crypto`; only without either, Math.random — fine for a
+ * correlation id but guessable, so development builds say so.
  */
 function randomBytes(): Uint8Array {
   const bytes = new Uint8Array(16);
@@ -26,6 +50,13 @@ function randomBytes(): Uint8Array {
       // Present but unusable (some polyfills throw) — fall through.
     }
   }
+  if (expoCryptoBytes(bytes)) return bytes;
+  if (typeof __DEV__ !== 'undefined' && __DEV__) {
+    console.warn(
+      '[repzo-widget] no secure random source, so the device id uses Math.random. Install ' +
+        'expo-crypto or react-native-get-random-values — see "Requirements" in the README.'
+    );
+  }
   for (let index = 0; index < bytes.length; index += 1) {
     bytes[index] = (Math.random() * 256) | 0;
   }

package/src/i18n.ts

@@ -32,16 +32,17 @@ export function createTranslator(config: WidgetConfig | null, locale: string): T
 /**
  * Dashboard copy that's written per language: the default language's text is
  * the plain config field and every other enabled language's lives under the
- * same key in `translations`.
+ * same key in `translations`. The offline message is written the same way.
  */
 const WELCOME_TEXT_KEYS = [
   'welcomeHeading',
   'welcomeSubheading',
   'startConversationLabel',
   'replyTimeLabel',
+  'offlineMessage',
 ] as const;
 
-/** The config with its welcome text in the active locale. */
+/** The config with its welcome text and offline message in the active locale. */
 export function localizeWelcomeText(config: WidgetConfig | null, locale: string): WidgetConfig | null {
   if (!config) return config;
   const translate = createTranslator(config, locale);
@@ -136,6 +137,14 @@ export const DEFAULT_LABELS = {
   // Forms.
   procedureSend: 'Send details',
   procedureSent: 'Sent',
+  procedureShareDetails: 'Share details',
+  procedureDetailsSent: 'Details sent',
+  procedureHide: 'Hide',
+  procedureFieldCount: '{count} fields',
+  procedureFieldCountOne: '1 field',
+  procedureTitle: 'Details',
+  procedureEmailPlaceholder: 'name@example.com',
+  procedurePhonePlaceholder: '+962 7...',
   fieldRequired: '{field} is required',
   invalidEmail: 'Enter a valid email address',
   working: 'Working...',
@@ -154,6 +163,20 @@ export const DEFAULT_LABELS = {
   blockChooseTime: 'Choose a time',
   blockProfessional: 'Professional',
   blockPriceOffer: 'Price offer',
+  blockSubtotal: 'Subtotal',
+  blockDiscount: 'Discount',
+  blockTax: 'Tax',
+  blockShipping: 'Shipping',
+  blockTotal: 'Total',
+  blockMinutes: '{count} min',
+  blockSave: 'Save',
+  blockAnyAvailable: 'Any available',
+  blockWithProvider: 'With {name}',
+  blockBookTime: 'Book this time',
+  blockValidUntil: 'Valid until {date}',
+  // Floating launcher button (screen reader names).
+  launcherOpen: 'Open chat',
+  launcherClose: 'Close chat',
 } as const;
 
 export type LabelKey = keyof typeof DEFAULT_LABELS;

package/src/locales.ts

@@ -90,6 +90,13 @@ const ar: LabelMap = {
   rating5: 'ممتاز',
   procedureSend: 'إرسال التفاصيل',
   procedureSent: 'تم الإرسال',
+  procedureShareDetails: 'مشاركة التفاصيل',
+  procedureDetailsSent: 'تم إرسال التفاصيل',
+  procedureHide: 'إخفاء',
+  // "Fields: 5" sidesteps Arabic's count-dependent plural forms.
+  procedureFieldCount: 'الحقول: {count}',
+  procedureFieldCountOne: 'حقل واحد',
+  procedureTitle: 'التفاصيل',
   fieldRequired: '{field} مطلوب',
   invalidEmail: 'أدخل بريدًا إلكترونيًا صالحًا',
   working: 'جارٍ العمل...',
@@ -105,6 +112,19 @@ const ar: LabelMap = {
   blockChooseTime: 'اختر وقتًا',
   blockProfessional: 'الموظف',
   blockPriceOffer: 'عرض سعر',
+  blockSubtotal: 'المجموع الفرعي',
+  blockDiscount: 'الخصم',
+  blockTax: 'الضريبة',
+  blockShipping: 'الشحن',
+  blockTotal: 'الإجمالي',
+  blockMinutes: '{count} دقيقة',
+  blockSave: 'حفظ',
+  blockAnyAvailable: 'أي موظف متاح',
+  blockWithProvider: 'مع {name}',
+  blockBookTime: 'احجز هذا الموعد',
+  blockValidUntil: 'صالح حتى {date}',
+  launcherOpen: 'فتح المحادثة',
+  launcherClose: 'إغلاق المحادثة',
 };
 
 export const BUNDLED_TRANSLATIONS: Record<string, LabelMap> = { ar };

package/src/push/push-notifications.ts

@@ -50,7 +50,6 @@ interface MessagingHandle {
 
 function resolveMessaging(): MessagingHandle | null {
   try {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
     const mod = require('@react-native-firebase/messaging');
 
     // Modular API — the only one in RNFB v26+ (the namespaced default export

package/src/state/widget-store.ts

@@ -36,7 +36,8 @@ import type {
 } from '../types';
 import { setOpenUrlHandler } from '../ui/utils/safe-url';
 
-const SDK_VERSION = '@repzo/widget-react-native@1.0.5';
+/** Sent on every init; must match `package.json` (tests/version.test.js checks). */
+const SDK_VERSION = '@repzo/widget-react-native@1.1.0';
 
 /** The platform this session reports — mobile sessions get the Mobile SDKs overrides. */
 function sessionPlatform(): 'ios' | 'android' | 'web' {
@@ -755,6 +756,7 @@ export class WidgetStore {
     this.userKeyLoaded = true;
     this.pendingAgentByConversation = {};
     this.seenMessageIds = [];
+    this.earlyStatuses.clear();
     this.visitorTypingActive = false;
     this.lastTypingPingAt = 0;
     this.launchCardOffered = false;
@@ -1071,12 +1073,6 @@ export class WidgetStore {
     return false;
   }
 
-  /**
-   * A teammate deleted a message: the visitor sees "This message was deleted"
-   * in its place (they can't delete anything themselves), and the list is
-   * refreshed so its preview stops showing the text. The id stays in
-   * `seenMessageIds`, so a replayed `message.new` can't restore the content.
-   */
   /**
    * A teammate opened the conversation: the visitor's messages are now Seen.
    * The ids are also remembered, because the event can arrive before the send
@@ -1086,9 +1082,15 @@ export class WidgetStore {
     const ids: string[] = Array.isArray(data?.messageIds) ? data.messageIds : [];
     const status: string | undefined = typeof data?.status === 'string' ? data.status : undefined;
     if (!status || ids.length === 0) return;
-    for (const id of ids) this.earlyStatuses.set(id, status);
-    if (this.earlyStatuses.size > SEEN_MESSAGE_LIMIT) {
-      this.earlyStatuses.delete(this.earlyStatuses.keys().next().value as string);
+    for (const id of ids) {
+      // Re-inserted, so a repeated id counts as newest when trimming.
+      this.earlyStatuses.delete(id);
+      this.earlyStatuses.set(id, status);
+    }
+    // One event can carry many ids: trim back to the cap, oldest first.
+    for (const id of this.earlyStatuses.keys()) {
+      if (this.earlyStatuses.size <= SEEN_MESSAGE_LIMIT) break;
+      this.earlyStatuses.delete(id);
     }
     if (!this.isThreadOnScreen(data?.conversationId)) return;
     this.setState((current) => ({
@@ -1098,6 +1100,12 @@ export class WidgetStore {
     }));
   }
 
+  /**
+   * A teammate deleted a message: the visitor sees "This message was deleted"
+   * in its place (they can't delete anything themselves), and the list is
+   * refreshed so its preview stops showing the text. The id stays in
+   * `seenMessageIds`, so a replayed `message.new` can't restore the content.
+   */
   private handleDeletedMessage(data: any) {
     const messageId: string | undefined = data?.messageId;
     if (!messageId) return;
@@ -1263,7 +1271,7 @@ export class WidgetStore {
       body: null,
       bodyPlain: data.bodyPlain || 'Conversation updated',
       attachments: null,
-      metadata: data.metadata || null,
+      metadata: this.hydrateMetadata(data.metadata || null),
       status: 'delivered',
       createdAt: data.createdAt || new Date().toISOString(),
     };
@@ -1667,10 +1675,35 @@ export class WidgetStore {
       .reverse();
   }
 
-  /** The "joined" line's avatar can be a server-relative media path. */
+  /**
+   * Media URLs inside metadata (the "joined" line's avatar, product photos in
+   * agent blocks) can be server-relative paths, and are remote content: like
+   * every other media URL they resolve against `baseUrl`, and anything that
+   * isn't http(s) is dropped before it reaches an `<Image>`.
+   */
   private hydrateMetadata(metadata: Message['metadata']): Message['metadata'] {
-    if (!metadata || typeof metadata.agentAvatar !== 'string') return metadata ?? null;
-    return { ...metadata, agentAvatar: this.client.resolveUrl(metadata.agentAvatar) };
+    if (!metadata) return null;
+    let next = metadata;
+    if (typeof metadata.agentAvatar === 'string') {
+      next = { ...next, agentAvatar: this.client.resolveUrl(metadata.agentAvatar) };
+    }
+    if (Array.isArray(metadata.agentUiBlocks)) {
+      next = {
+        ...next,
+        agentUiBlocks: metadata.agentUiBlocks.map((block: unknown) => this.hydrateBlockMedia(block)),
+      };
+    }
+    return next;
+  }
+
+  private hydrateBlockMedia(block: unknown): unknown {
+    const candidate = block as { type?: unknown; product?: { imageUrl?: unknown } } | null;
+    const imageUrl = candidate?.product?.imageUrl;
+    if (candidate?.type !== 'product_service_card' || typeof imageUrl !== 'string') return block;
+    return {
+      ...candidate,
+      product: { ...candidate.product, imageUrl: this.client.resolveUrl(imageUrl) ?? undefined },
+    };
   }
 
   /**
@@ -1967,11 +2000,6 @@ function isLocalMessage(message: Message): boolean {
   return message.id.startsWith('temp-');
 }
 
-/**
- * A sent visitor message keeps its local previews (a `file://` URI, or no URL
- * at all) until the server copy shows up — the stream echo or a history page.
- * Its attachments, the only ones that can be opened, then replace them.
- */
 /** A "Seen" missed while the stream was down shows up on the next re-read. */
 function adoptServerStatuses(messages: Message[], server: Message[]): Message[] {
   const seen = new Set(server.filter((message) => message.status === 'read').map((message) => message.id));
@@ -2006,6 +2034,11 @@ function adoptServerDeletions(messages: Message[], server: Message[]): Message[]
   return changed ? next : messages;
 }
 
+/**
+ * A sent visitor message keeps its local previews (a `file://` URI, or no URL
+ * at all) until the server copy shows up — the stream echo or a history page.
+ * Its attachments, the only ones that can be opened, then replace them.
+ */
 function adoptServerAttachments(messages: Message[], server: Message[]): Message[] {
   const serverCopies = new Map(
     server.filter((message) => message.attachments?.length).map((message) => [message.id, message])

package/src/storage.ts

@@ -44,7 +44,6 @@ function createMemoryAdapter(): RepzoWidgetStorageAdapter {
 
 function resolveAsyncStorage(): RepzoWidgetStorageAdapter | null {
   try {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
     const mod = require('@react-native-async-storage/async-storage');
     const asyncStorage = mod?.default ?? mod;
     if (!asyncStorage?.getItem) return null;
@@ -101,10 +100,27 @@ export const Storage = {
 
 let secureAdapter: RepzoWidgetStorageAdapter | null = null;
 
+let warnedPlaintext = false;
+
 export function setSecureStorageAdapter(adapter: RepzoWidgetStorageAdapter | null): void {
   secureAdapter = adapter;
 }
 
+/**
+ * Development builds only, once per run: the bearer token is about to land on
+ * disk unencrypted. The in-memory fallback writes nothing, so it stays quiet.
+ */
+function warnPlaintextOnce(): void {
+  if (warnedPlaintext || typeof __DEV__ === 'undefined' || !__DEV__) return;
+  if (activeAdapter() === memoryAdapter) return;
+  warnedPlaintext = true;
+  console.warn(
+    '[repzo-widget] no secure storage adapter is set, so the visitor token is stored in plain ' +
+      'text. Call RepzoWidget.setSecureStorageAdapter() before boot() — see "Secure token ' +
+      'storage" in the README.'
+  );
+}
+
 export const SecureStorage = {
   async getItem(key: string): Promise<string | null> {
     if (!secureAdapter) return Storage.getItem(key);
@@ -126,6 +142,7 @@ export const SecureStorage = {
 
   async setItem(key: string, value: string): Promise<void> {
     if (!secureAdapter) {
+      warnPlaintextOnce();
       await Storage.setItem(key, value);
       return;
     }

package/src/types.ts

@@ -164,10 +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.
+   * @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;
@@ -488,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;
@@ -514,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}
         />