@repzo/widget-react-native 1.0.0

package/lib/commonjs/ui/hooks/use-reduce-motion.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReduceMotion = useReduceMotion;
+var _react = require("react");
+var _reactNative = require("react-native");
+/**
+ * Shared reduce-motion check. The query is async, so the answer is cached for
+ * the process: the setting rarely changes mid-session, and re-asking on every
+ * mount would let the first frame animate before the answer arrives.
+ *
+ * Returns `null` until resolved, which callers should read as "hold still" —
+ * starting an animation and snapping it away a frame later is the flicker this
+ * is meant to avoid.
+ */
+
+let cached = null;
+function useReduceMotion() {
+  const [value, setValue] = (0, _react.useState)(cached);
+  (0, _react.useEffect)(() => {
+    if (cached !== null) return undefined;
+    let alive = true;
+    _reactNative.AccessibilityInfo.isReduceMotionEnabled().then(enabled => {
+      cached = enabled;
+      if (alive) setValue(enabled);
+    }).catch(() => {
+      cached = false;
+      if (alive) setValue(false);
+    });
+    return () => {
+      alive = false;
+    };
+  }, []);
+  return value;
+}
+//# sourceMappingURL=use-reduce-motion.js.map

package/lib/commonjs/ui/hooks/use-reduce-motion.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","cached","useReduceMotion","value","setValue","useState","useEffect","undefined","alive","AccessibilityInfo","isReduceMotionEnabled","then","enabled","catch"],"sourceRoot":"../../../../src","sources":["ui/hooks/use-reduce-motion.ts"],"mappings":";;;;;;AAUA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAXA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKA,IAAIE,MAAsB,GAAG,IAAI;AAE1B,SAASC,eAAeA,CAAA,EAAmB;EAChD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAAiBJ,MAAM,CAAC;EAE1D,IAAAK,gBAAS,EAAC,MAAM;IACd,IAAIL,MAAM,KAAK,IAAI,EAAE,OAAOM,SAAS;IACrC,IAAIC,KAAK,GAAG,IAAI;IAEhBC,8BAAiB,CAACC,qBAAqB,CAAC,CAAC,CACtCC,IAAI,CAAEC,OAAO,IAAK;MACjBX,MAAM,GAAGW,OAAO;MAChB,IAAIJ,KAAK,EAAEJ,QAAQ,CAACQ,OAAO,CAAC;IAC9B,CAAC,CAAC,CACDC,KAAK,CAAC,MAAM;MACXZ,MAAM,GAAG,KAAK;MACd,IAAIO,KAAK,EAAEJ,QAAQ,CAAC,KAAK,CAAC;IAC5B,CAAC,CAAC;IAEJ,OAAO,MAAM;MACXI,KAAK,GAAG,KAAK;IACf,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOL,KAAK;AACd","ignoreList":[]}

package/lib/commonjs/ui/hooks/use-widget-insets.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWidgetInsets = useWidgetInsets;
+var _reactNative = require("react-native");
+/**
+ * Safe-area insets without a hard dependency.
+ *
+ * RN's own `SafeAreaView` is deprecated (and iOS-only), so we use the host
+ * app's `react-native-safe-area-context` when it is installed and fall back to
+ * platform constants otherwise. Resolution happens once at module load, so the
+ * hook call order is stable across renders.
+ */
+
+const FALLBACK_INSETS = {
+  top: _reactNative.Platform.OS === 'android' ? _reactNative.StatusBar.currentHeight ?? 0 : 0,
+  bottom: 0,
+  left: 0,
+  right: 0
+};
+let insetsHook = 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 {
+  insetsHook = null;
+}
+function useWidgetInsets() {
+  if (!insetsHook) return FALLBACK_INSETS;
+  try {
+    return insetsHook();
+  } catch {
+    // The host mounted no <SafeAreaProvider>; the hook itself still ran, so
+    // React's hook order is unchanged.
+    return FALLBACK_INSETS;
+  }
+}
+//# sourceMappingURL=use-widget-insets.js.map

package/lib/commonjs/ui/hooks/use-widget-insets.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","FALLBACK_INSETS","top","Platform","OS","StatusBar","currentHeight","bottom","left","right","insetsHook","mod","useSafeAreaInsets","useWidgetInsets"],"sourceRoot":"../../../../src","sources":["ui/hooks/use-widget-insets.ts"],"mappings":";;;;;;AASA,IAAAA,YAAA,GAAAC,OAAA;AATA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAWA,MAAMC,eAA6B,GAAG;EACpCC,GAAG,EAAEC,qBAAQ,CAACC,EAAE,KAAK,SAAS,GAAIC,sBAAS,CAACC,aAAa,IAAI,CAAC,GAAI,CAAC;EACnEC,MAAM,EAAE,CAAC;EACTC,IAAI,EAAE,CAAC;EACPC,KAAK,EAAE;AACT,CAAC;AAED,IAAIC,UAAuC,GAAG,IAAI;AAClD,IAAI;EACF;EACA,MAAMC,GAAG,GAAGX,OAAO,CAAC,gCAAgC,CAAC;EACrD,IAAI,OAAOW,GAAG,EAAEC,iBAAiB,KAAK,UAAU,EAAEF,UAAU,GAAGC,GAAG,CAACC,iBAAiB;AACtF,CAAC,CAAC,MAAM;EACNF,UAAU,GAAG,IAAI;AACnB;AAEO,SAASG,eAAeA,CAAA,EAAiB;EAC9C,IAAI,CAACH,UAAU,EAAE,OAAOT,eAAe;EACvC,IAAI;IACF,OAAOS,UAAU,CAAC,CAAC;EACrB,CAAC,CAAC,MAAM;IACN;IACA;IACA,OAAOT,eAAe;EACxB;AACF","ignoreList":[]}

package/lib/commonjs/ui/screens/chat/ChatView.js

@@ -0,0 +1,590 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatView = ChatView;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _agentUiBlocks = require("../../../agent-ui-blocks.js");
+var _AgentUiBlocks = require("../../components/AgentUiBlocks.js");
+var _Avatar = require("../../components/Avatar.js");
+var _ErrorBoundary = require("../../components/ErrorBoundary.js");
+var _Gradient = require("../../components/Gradient.js");
+var _icons = require("../../components/icons.js");
+var _Markdown = require("../../components/Markdown.js");
+var _useReduceMotion = require("../../hooks/use-reduce-motion.js");
+var _global = require("../../styles/global.js");
+var _theme = require("../../styles/theme.js");
+var _conversations = require("../../utils/conversations.js");
+var _html = require("../../utils/html.js");
+var _safeUrl = require("../../utils/safe-url.js");
+var _rtl = require("../../utils/rtl.js");
+var _ChatViewStyles = require("./ChatView.styles.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Chat thread — message list, typing indicator and composer.
+ * Port of `client/src/widget/components/ChatView.tsx`.
+ *
+ * Mobile differences: older messages load through an explicit "Load earlier
+ * messages" control (a scroll-anchored infinite list fights the keyboard), and
+ * the composer hides the attach button because v1 has no picker.
+ */
+
+function ChatView({
+  messages,
+  loading,
+  hasMoreMessages,
+  agentTyping,
+  color,
+  agentName,
+  agentAvatar,
+  isOnline,
+  locale,
+  prefillText,
+  offlineMessage,
+  labels,
+  onSendMessage,
+  onIdentifyVisitor,
+  onLoadMore,
+  onTyping,
+  onBack,
+  onClose
+}) {
+  const [input, setInput] = (0, _react.useState)(prefillText || '');
+  const [composerFocused, setComposerFocused] = (0, _react.useState)(false);
+  const reduceMotion = (0, _useReduceMotion.useReduceMotion)();
+  const scrollRef = (0, _react.useRef)(null);
+  const typingStopTimer = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (prefillText) setInput(prefillText);
+  }, [prefillText]);
+  (0, _react.useEffect)(() => () => {
+    if (typingStopTimer.current) clearTimeout(typingStopTimer.current);
+  }, []);
+  const scrollToBottom = (0, _react.useCallback)((animated = true) => {
+    scrollRef.current?.scrollToEnd({
+      animated
+    });
+  }, []);
+
+  // Land on the newest message the moment the thread opens — notification
+  // taps and conversation-list taps both mount this screen. The content-size
+  // handler below covers later growth (loads, images, incoming messages).
+  (0, _react.useEffect)(() => {
+    const frame = requestAnimationFrame(() => scrollToBottom(false));
+    return () => cancelAnimationFrame(frame);
+  }, [scrollToBottom]);
+
+  // "Load earlier" PREPENDS history; skipping one auto-scroll keeps the reader
+  // anchored where they were instead of yanking them back to the bottom.
+  const skipNextAutoScroll = (0, _react.useRef)(false);
+  const handleLoadEarlier = (0, _react.useCallback)(() => {
+    skipNextAutoScroll.current = true;
+    onLoadMore();
+  }, [onLoadMore]);
+  const handleContentSizeChange = (0, _react.useCallback)(() => {
+    if (skipNextAutoScroll.current) {
+      skipNextAutoScroll.current = false;
+      return;
+    }
+    scrollToBottom(false);
+  }, [scrollToBottom]);
+
+  // The keyboard shortens the thread instead of scrolling it, so whatever was
+  // at the bottom — the newest message, an agent form — would slide in behind
+  // the composer. Re-pin on every shrink, unanimated, so the list tracks the
+  // keyboard as it rises rather than jumping once it lands.
+  const viewportHeight = (0, _react.useRef)(0);
+  const handleViewportLayout = (0, _react.useCallback)(event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    const shrank = viewportHeight.current - height > 1;
+    viewportHeight.current = height;
+    if (shrank) scrollToBottom(false);
+  }, [scrollToBottom]);
+  const canSend = input.trim().length > 0;
+  const handleSend = () => {
+    const trimmed = input.trim();
+    if (!trimmed) return;
+    setInput('');
+    if (typingStopTimer.current) clearTimeout(typingStopTimer.current);
+    onTyping(false);
+    onSendMessage(trimmed);
+    scrollToBottom();
+  };
+  const handleChangeText = text => {
+    setInput(text);
+    if (!text.trim()) return;
+    onTyping(true);
+    if (typingStopTimer.current) clearTimeout(typingStopTimer.current);
+    typingStopTimer.current = setTimeout(() => onTyping(false), 2500);
+  };
+  const handleAgentUiAction = (0, _react.useCallback)(async action => {
+    if (action.type === 'submit_contact' && onIdentifyVisitor) {
+      await onIdentifyVisitor({
+        email: stringPayload(action.payload.email),
+        name: stringPayload(action.payload.name) || [stringPayload(action.payload.firstName), stringPayload(action.payload.lastName)].filter(Boolean).join(' ') || undefined,
+        phone: stringPayload(action.payload.phone)
+      });
+    }
+    onSendMessage((0, _agentUiBlocks.formatAgentUiActionMessage)(action), undefined, action);
+    scrollToBottom();
+  }, [onIdentifyVisitor, onSendMessage, scrollToBottom]);
+  const headerTextColor = (0, _theme.contrastingTextColor)(color);
+  const onDarkHeader = headerTextColor === _theme.palette.white;
+  const isEmptyThread = !loading && messages.length === 0;
+  // 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 headerGradient = [color, (0, _theme.mixHex)(color, '#000000', 0.16)];
+  const headerControl = {
+    backgroundColor: (0, _theme.withAlpha)(headerTextColor, 0.16)
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: _global.globalStyles.screen,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Gradient.GradientBackground, {
+      colors: headerGradient,
+      style: [_ChatViewStyles.styles.header, {
+        borderBottomColor: (0, _theme.mixHex)(color, '#000000', 0.26)
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: onBack,
+        accessibilityRole: "button",
+        accessibilityLabel: labels.back,
+        hitSlop: 12,
+        style: ({
+          pressed
+        }) => [_global.globalStyles.iconButton, headerControl, pressed && _global.globalStyles.pressed],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ChevronIcon, {
+          size: 18,
+          direction: (0, _rtl.backDirection)(),
+          color: headerTextColor
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: _ChatViewStyles.styles.headerIdentity,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: _ChatViewStyles.styles.avatarWrapper,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+            avatar: agentAvatar,
+            name: agentName,
+            size: 36,
+            translucent: onDarkHeader,
+            color: _theme.palette.ink
+          }), isOnline ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: _ChatViewStyles.styles.onlineDot
+          }) : null]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: _ChatViewStyles.styles.headerText,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [_ChatViewStyles.styles.headerName, {
+              color: headerTextColor
+            }],
+            numberOfLines: 1,
+            children: agentName || labels.team
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [_ChatViewStyles.styles.headerStatus, {
+              color: (0, _theme.withAlpha)(headerTextColor, 0.75)
+            }],
+            numberOfLines: 1,
+            children: isOnline ? labels.statusOnline : labels.statusAway
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: onClose,
+        accessibilityRole: "button",
+        accessibilityLabel: labels.close,
+        hitSlop: 12,
+        style: ({
+          pressed
+        }) => [_global.globalStyles.iconButton, headerControl, pressed && _global.globalStyles.pressed],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ChevronIcon, {
+          size: 20,
+          direction: "down",
+          color: headerTextColor
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      ref: scrollRef,
+      style: _global.globalStyles.fill,
+      contentContainerStyle: [_ChatViewStyles.styles.messagesContent, isEmptyThread && _ChatViewStyles.styles.messagesContentEmpty],
+      keyboardShouldPersistTaps: "handled"
+      // Interactive dismissal drags the keyboard down under the finger while
+      // the composer stays where the last keyboard event left it, which opens
+      // a gap under the thread; on-drag hands us a normal hide event instead.
+      ,
+      keyboardDismissMode: "on-drag",
+      onLayout: handleViewportLayout,
+      onContentSizeChange: handleContentSizeChange,
+      children: [hasMoreMessages ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: handleLoadEarlier,
+        accessibilityRole: "button",
+        style: _ChatViewStyles.styles.loadMore,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [_ChatViewStyles.styles.loadMoreLabel, {
+            color
+          }],
+          children: loading ? labels.loading : labels.loadEarlier
+        })
+      }) : null, loading && messages.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: _ChatViewStyles.styles.stateText,
+        children: labels.loading
+      }) : null, isEmptyThread ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: _ChatViewStyles.styles.emptyState,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [_ChatViewStyles.styles.emptyIcon, {
+            backgroundColor: (0, _theme.withAlpha)(color, 0.08)
+          }],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ChatOutlineIcon, {
+            size: 28,
+            color: color
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: _ChatViewStyles.styles.emptyText,
+          children: labels.emptyConversation
+        })]
+      }) : null, messages.map((message, index) => {
+        const previous = index > 0 ? messages[index - 1] : undefined;
+        const startsDay = !previous || !(0, _conversations.isSameDay)(message.createdAt, previous.createdAt);
+        const isAgentMessage = message.direction !== 'inbound' && message.messageType !== 'system';
+        // Name only at the top of a run, the way every messenger does it.
+        const startsRun = !previous || previous.direction === 'inbound' || previous.messageType === 'system' || previous.senderName !== message.senderName;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+          children: [startsDay ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: _ChatViewStyles.styles.daySeparator,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: _ChatViewStyles.styles.dayLine
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: _ChatViewStyles.styles.dayLabel,
+              children: (0, _conversations.formatDayLabel)(message.createdAt, locale, labels)
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: _ChatViewStyles.styles.dayLine
+            })]
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ErrorBoundary.WidgetErrorBoundary, {
+            fallback: null,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MessageBubble, {
+              message: message,
+              color: color,
+              labels: labels,
+              senderLabel: isAgentMessage && (startsRun || startsDay) ? message.senderName || agentName || labels.team : null,
+              timeLabel: (0, _conversations.formatClockTime)(message.createdAt, locale),
+              onSubmitProcedureForm: shouldShowProcedureForm(messages, message) ? body => onSendMessage(body) : undefined,
+              onAgentUiAction: shouldShowAgentUiBlocks(messages, message) ? handleAgentUiAction : undefined
+            })
+          })]
+        }, message.id);
+      }), agentTyping ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: _ChatViewStyles.styles.typingRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: _ChatViewStyles.styles.typingBubble,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TypingDot, {
+            index: 0,
+            reduceMotion: reduceMotion
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TypingDot, {
+            index: 1,
+            reduceMotion: reduceMotion
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TypingDot, {
+            index: 2,
+            reduceMotion: reduceMotion
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: _ChatViewStyles.styles.typingLabel,
+          children: labels.thinking
+        })]
+      }) : null]
+    }), offlineMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: _ChatViewStyles.styles.offlineBanner,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: _ChatViewStyles.styles.offlineText,
+        children: offlineMessage
+      })
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: _ChatViewStyles.styles.composerWrapper,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [_ChatViewStyles.styles.composer, composerFocused && _ChatViewStyles.styles.composerFocused, composerFocused && {
+          borderColor: (0, _theme.withAlpha)(color, 0.55)
+        }],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          value: input,
+          onChangeText: handleChangeText,
+          onFocus: () => setComposerFocused(true),
+          onBlur: () => setComposerFocused(false),
+          placeholder: labels.messagePlaceholder,
+          placeholderTextColor: _theme.palette.textSubtle,
+          multiline: true,
+          style: _ChatViewStyles.styles.input,
+          accessibilityLabel: labels.messagePlaceholder
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          onPress: handleSend,
+          disabled: !canSend,
+          accessibilityRole: "button",
+          accessibilityState: {
+            disabled: !canSend
+          },
+          hitSlop: 8,
+          style: ({
+            pressed
+          }) => [_ChatViewStyles.styles.sendButton, canSend ? {
+            backgroundColor: color
+          } : _ChatViewStyles.styles.sendButtonDisabled, pressed && canSend && _ChatViewStyles.styles.sendButtonPressed],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ArrowUpIcon, {
+            size: 18,
+            color: canSend ? (0, _theme.contrastingTextColor)(color) : _theme.palette.textSubtle
+          })
+        })]
+      })
+    })]
+  });
+}
+function MessageBubble({
+  message,
+  color,
+  labels,
+  senderLabel,
+  timeLabel,
+  onSubmitProcedureForm,
+  onAgentUiAction
+}) {
+  if (message.messageType === 'system') {
+    const text = message.bodyPlain || (0, _html.stripHtml)(message.body || '') || labels.conversationUpdated;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: _ChatViewStyles.styles.systemRow,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: _ChatViewStyles.styles.systemText,
+        children: text
+      })
+    });
+  }
+  const isVisitor = message.direction === 'inbound';
+  const rtl = (0, _rtl.isRTL)();
+  const messageText = message.bodyPlain || (0, _html.stripHtml)(message.body || '');
+  const hasBody = !!messageText;
+  const procedureForm = !isVisitor ? (0, _agentUiBlocks.getProcedureForm)(message.metadata) : null;
+  const agentUiBlocks = !isVisitor ? (0, _agentUiBlocks.getAgentUiBlocks)(message.metadata) : [];
+  const textColor = isVisitor ? _theme.palette.white : _theme.palette.ink;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [_ChatViewStyles.styles.messageRow, isVisitor ? _ChatViewStyles.styles.messageRowRight : _ChatViewStyles.styles.messageRowLeft],
+    children: [senderLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: _ChatViewStyles.styles.senderLabel,
+      children: senderLabel
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [_ChatViewStyles.styles.bubble, isVisitor ? [_ChatViewStyles.styles.bubbleVisitor, {
+        backgroundColor: color
+      }] : _ChatViewStyles.styles.bubbleAgent, rtl && (isVisitor ? _ChatViewStyles.styles.bubbleVisitorRTL : _ChatViewStyles.styles.bubbleAgentRTL), message.status === 'pending' && _ChatViewStyles.styles.bubblePending],
+      children: [hasBody ? isVisitor ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [_ChatViewStyles.styles.bubbleText, {
+          color: textColor
+        }],
+        children: messageText
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Markdown.Markdown, {
+        content: messageText,
+        color: textColor
+      }) : null, message.attachments && message.attachments.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [_ChatViewStyles.styles.attachments, hasBody && _ChatViewStyles.styles.attachmentsSpaced],
+        children: message.attachments.map(attachment => /*#__PURE__*/(0, _jsxRuntime.jsx)(AttachmentPreview, {
+          attachment: attachment,
+          isVisitor: isVisitor
+        }, attachment.id))
+      }) : null, message.status === 'failed' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [_ChatViewStyles.styles.failedText, {
+          color: isVisitor ? (0, _theme.withAlpha)(_theme.palette.white, 0.7) : _theme.palette.danger
+        }],
+        children: labels.failedToSend
+      }) : null, timeLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [_ChatViewStyles.styles.messageTime, {
+          color: isVisitor ? (0, _theme.withAlpha)(_theme.palette.white, 0.7) : _theme.palette.textSubtle
+        }],
+        children: timeLabel
+      }) : null]
+    }), agentUiBlocks.length > 0 && onAgentUiAction ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AgentUiBlocks.AgentUiBlocks, {
+      blocks: agentUiBlocks,
+      color: color,
+      labels: labels.blocks,
+      onAction: onAgentUiAction
+    }) : null, agentUiBlocks.length === 0 && procedureForm && onSubmitProcedureForm ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ProcedureFieldForm, {
+      form: procedureForm,
+      color: color,
+      labels: labels,
+      onSubmit: onSubmitProcedureForm
+    }) : null]
+  });
+}
+function AttachmentPreview({
+  attachment,
+  isVisitor
+}) {
+  // `url` is empty when the server sent a non-http(s) URL (see resolveUrl).
+  const isImage = attachment.contentType?.startsWith('image/') && !!attachment.url;
+  const open = () => void (0, _safeUrl.openExternalUrl)(attachment.url);
+  if (isImage) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      onPress: open,
+      accessibilityRole: "imagebutton",
+      accessibilityLabel: attachment.name,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+        source: {
+          uri: attachment.url
+        },
+        style: _ChatViewStyles.styles.attachmentImage,
+        resizeMode: "cover",
+        accessibilityIgnoresInvertColors: true
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    onPress: open,
+    accessibilityRole: "button",
+    style: [_ChatViewStyles.styles.attachmentFile, {
+      borderColor: isVisitor ? (0, _theme.withAlpha)(_theme.palette.white, 0.35) : _theme.palette.border
+    }],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [_ChatViewStyles.styles.attachmentName, {
+        color: isVisitor ? _theme.palette.white : _theme.palette.ink
+      }],
+      numberOfLines: 1,
+      children: attachment.name
+    })
+  });
+}
+function ProcedureFieldForm({
+  form,
+  color,
+  labels,
+  onSubmit
+}) {
+  const [values, setValues] = (0, _react.useState)({});
+  const [submitted, setSubmitted] = (0, _react.useState)(false);
+  const [expanded, setExpanded] = (0, _react.useState)(false);
+  const canSubmit = form.fields.every(field => !field.required || values[field.name]?.trim());
+  const handleSubmit = () => {
+    if (!canSubmit || submitted) return;
+    const body = form.fields.map(field => `${field.label}: ${(values[field.name] || '').trim()}`).filter(line => !line.endsWith(':')).join('\n');
+    if (!body.trim()) return;
+    setSubmitted(true);
+    onSubmit(body);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: _ChatViewStyles.styles.procedureCard,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+      onPress: () => setExpanded(current => !current),
+      accessibilityRole: "button",
+      accessibilityState: {
+        expanded
+      },
+      style: [_ChatViewStyles.styles.procedureToggle, {
+        backgroundColor: expanded ? _theme.palette.surface : color
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [_ChatViewStyles.styles.procedureToggleLabel, {
+          color: expanded ? _theme.palette.text : _theme.palette.white
+        }],
+        children: submitted ? 'Details sent' : 'Share details'
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [_ChatViewStyles.styles.procedureToggleHint, {
+          color: expanded ? _theme.palette.text : _theme.palette.white
+        }],
+        children: expanded ? 'Hide' : `${form.fields.length} field${form.fields.length === 1 ? '' : 's'}`
+      })]
+    }), expanded ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: _ChatViewStyles.styles.procedureTitle,
+        children: form.procedureName || 'Details'
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: _ChatViewStyles.styles.procedureFields,
+        children: form.fields.map(field => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+            style: _ChatViewStyles.styles.procedureLabel,
+            children: [field.label, field.required ? ' *' : '']
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+            value: values[field.name] || '',
+            onChangeText: text => setValues(current => ({
+              ...current,
+              [field.name]: text
+            })),
+            placeholder: placeholderForField(field),
+            placeholderTextColor: _theme.palette.textSubtle,
+            editable: !submitted,
+            keyboardType: field.type === 'email' ? 'email-address' : field.type === 'phone' ? 'phone-pad' : 'default',
+            autoCapitalize: field.type === 'email' ? 'none' : 'sentences',
+            style: _ChatViewStyles.styles.procedureInput
+          })]
+        }, field.name))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: handleSubmit,
+        disabled: !canSubmit || submitted,
+        accessibilityRole: "button",
+        style: [_ChatViewStyles.styles.procedureSubmit, {
+          backgroundColor: canSubmit && !submitted ? color : _theme.palette.disabled
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: _ChatViewStyles.styles.procedureSubmitLabel,
+          children: submitted ? labels.procedureSent : labels.procedureSend
+        })
+      })]
+    }) : null]
+  });
+}
+function TypingDot({
+  index,
+  reduceMotion
+}) {
+  const value = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const animating = reduceMotion === false;
+  (0, _react.useEffect)(() => {
+    if (!animating) return undefined;
+    // Every dot runs a constant 920ms cycle and only the leading delay
+    // differs, so the three hold their phase instead of drifting apart.
+    const loop = _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.delay(index * 140), _reactNative.Animated.timing(value, {
+      toValue: 1,
+      duration: 320,
+      easing: _reactNative.Easing.out(_reactNative.Easing.quad),
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(value, {
+      toValue: 0,
+      duration: 320,
+      easing: _reactNative.Easing.in(_reactNative.Easing.quad),
+      useNativeDriver: true
+    }), _reactNative.Animated.delay(280 - index * 140)]));
+    loop.start();
+    return () => loop.stop();
+  }, [animating, index, value]);
+  const motionStyle = animating ? {
+    opacity: value.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0.4, 1]
+    }),
+    transform: [{
+      translateY: value.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, -4]
+      })
+    }]
+  } : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: [_ChatViewStyles.styles.typingDot, motionStyle]
+  });
+}
+function placeholderForField(field) {
+  if (field.type === 'email') return 'name@example.com';
+  if (field.type === 'phone') return '+962 7...';
+  if (field.type === 'date' || field.type === 'time') return '';
+  return field.label;
+}
+function stringPayload(value) {
+  return typeof value === 'string' && value.trim() ? value.trim() : undefined;
+}
+function shouldShowProcedureForm(messages, message) {
+  if (message.direction === 'inbound' || !(0, _agentUiBlocks.getProcedureForm)(message.metadata)) return false;
+  return messages.findIndex(candidate => candidate.id === message.id) === messages.length - 1;
+}
+
+/** Hide superseded slot pickers so only the newest one stays actionable. */
+function shouldShowAgentUiBlocks(messages, message) {
+  const blocks = (0, _agentUiBlocks.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 => (0, _agentUiBlocks.getAgentUiBlocks)(candidate.metadata)).filter(block => block.type === 'appointment_slot_picker').map(block => block.id));
+  return blocks.some(block => !laterBlockIds.has(block.id));
+}
+//# sourceMappingURL=ChatView.js.map