@repzo/widget-react-native 1.0.0

package/src/ui/screens/chat/ChatView.tsx

@@ -0,0 +1,690 @@
+/**
+ * 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.
+ */
+
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Easing,
+  Image,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
+
+import {
+  formatAgentUiActionMessage,
+  getAgentUiBlocks,
+  getProcedureForm,
+} from '../../../agent-ui-blocks';
+import type { AgentUiAction, AgentProcedureForm, Message, WidgetAttachment } from '../../../types';
+import { AgentUiBlocks } from '../../components/AgentUiBlocks';
+import { Avatar } from '../../components/Avatar';
+import { WidgetErrorBoundary } from '../../components/ErrorBoundary';
+import { GradientBackground } from '../../components/Gradient';
+import { ArrowUpIcon, ChatOutlineIcon, ChevronIcon } from '../../components/icons';
+import { Markdown } from '../../components/Markdown';
+import { useReduceMotion } from '../../hooks/use-reduce-motion';
+import { globalStyles } from '../../styles/global';
+import { contrastingTextColor, mixHex, palette, withAlpha } from '../../styles/theme';
+import { formatClockTime, formatDayLabel, isSameDay } from '../../utils/conversations';
+import { stripHtml } from '../../utils/html';
+import { openExternalUrl } from '../../utils/safe-url';
+import { backDirection, isRTL } from '../../utils/rtl';
+import { styles } from './ChatView.styles';
+import type { ChatLabels, ChatViewProps } from './ChatView.types';
+
+export function ChatView({
+  messages,
+  loading,
+  hasMoreMessages,
+  agentTyping,
+  color,
+  agentName,
+  agentAvatar,
+  isOnline,
+  locale,
+  prefillText,
+  offlineMessage,
+  labels,
+  onSendMessage,
+  onIdentifyVisitor,
+  onLoadMore,
+  onTyping,
+  onBack,
+  onClose,
+}: ChatViewProps) {
+  const [input, setInput] = useState(prefillText || '');
+  const [composerFocused, setComposerFocused] = useState(false);
+  const reduceMotion = useReduceMotion();
+  const scrollRef = useRef<ScrollView>(null);
+  const typingStopTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (prefillText) setInput(prefillText);
+  }, [prefillText]);
+
+  useEffect(
+    () => () => {
+      if (typingStopTimer.current) clearTimeout(typingStopTimer.current);
+    },
+    []
+  );
+
+  const scrollToBottom = 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).
+  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 = useRef(false);
+  const handleLoadEarlier = useCallback(() => {
+    skipNextAutoScroll.current = true;
+    onLoadMore();
+  }, [onLoadMore]);
+
+  const handleContentSizeChange = 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 = useRef(0);
+  const handleViewportLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      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: string) => {
+    setInput(text);
+    if (!text.trim()) return;
+    onTyping(true);
+    if (typingStopTimer.current) clearTimeout(typingStopTimer.current);
+    typingStopTimer.current = setTimeout(() => onTyping(false), 2500);
+  };
+
+  const handleAgentUiAction = useCallback(
+    async (action: AgentUiAction) => {
+      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(formatAgentUiActionMessage(action), undefined, action);
+      scrollToBottom();
+    },
+    [onIdentifyVisitor, onSendMessage, scrollToBottom]
+  );
+
+  const headerTextColor = contrastingTextColor(color);
+  const onDarkHeader = headerTextColor === 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, mixHex(color, '#000000', 0.16)];
+  const headerControl = { backgroundColor: withAlpha(headerTextColor, 0.16) };
+
+  return (
+    <View style={globalStyles.screen}>
+      {/* One bar instead of a brand band above a separate back row: the band
+          was empty whenever no agent was assigned yet. */}
+      <GradientBackground
+        colors={headerGradient}
+        style={[styles.header, { borderBottomColor: mixHex(color, '#000000', 0.26) }]}>
+        <Pressable
+          onPress={onBack}
+          accessibilityRole="button"
+          accessibilityLabel={labels.back}
+          hitSlop={12}
+          style={({ pressed }) => [
+            globalStyles.iconButton,
+            headerControl,
+            pressed && globalStyles.pressed,
+          ]}>
+          <ChevronIcon size={18} direction={backDirection()} color={headerTextColor} />
+        </Pressable>
+
+        <View style={styles.headerIdentity}>
+          <View style={styles.avatarWrapper}>
+            <Avatar
+              avatar={agentAvatar}
+              name={agentName}
+              size={36}
+              translucent={onDarkHeader}
+              color={palette.ink}
+            />
+            {isOnline ? <View style={styles.onlineDot} /> : null}
+          </View>
+          <View style={styles.headerText}>
+            <Text style={[styles.headerName, { color: headerTextColor }]} numberOfLines={1}>
+              {agentName || labels.team}
+            </Text>
+            <Text
+              style={[styles.headerStatus, { color: withAlpha(headerTextColor, 0.75) }]}
+              numberOfLines={1}>
+              {isOnline ? labels.statusOnline : labels.statusAway}
+            </Text>
+          </View>
+        </View>
+
+        <Pressable
+          onPress={onClose}
+          accessibilityRole="button"
+          accessibilityLabel={labels.close}
+          hitSlop={12}
+          style={({ pressed }) => [
+            globalStyles.iconButton,
+            headerControl,
+            pressed && globalStyles.pressed,
+          ]}>
+          <ChevronIcon size={20} direction="down" color={headerTextColor} />
+        </Pressable>
+      </GradientBackground>
+
+      <ScrollView
+        ref={scrollRef}
+        style={globalStyles.fill}
+        contentContainerStyle={[
+          styles.messagesContent,
+          isEmptyThread && 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}>
+        {hasMoreMessages ? (
+          <Pressable onPress={handleLoadEarlier} accessibilityRole="button" style={styles.loadMore}>
+            <Text style={[styles.loadMoreLabel, { color }]}>
+              {loading ? labels.loading : labels.loadEarlier}
+            </Text>
+          </Pressable>
+        ) : null}
+
+        {loading && messages.length === 0 ? (
+          <Text style={styles.stateText}>{labels.loading}</Text>
+        ) : null}
+
+        {isEmptyThread ? (
+          <View style={styles.emptyState}>
+            <View style={[styles.emptyIcon, { backgroundColor: withAlpha(color, 0.08) }]}>
+              <ChatOutlineIcon size={28} color={color} />
+            </View>
+            <Text style={styles.emptyText}>{labels.emptyConversation}</Text>
+          </View>
+        ) : null}
+
+        {messages.map((message, index) => {
+          const previous = index > 0 ? messages[index - 1] : undefined;
+          const startsDay = !previous || !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 (
+            <Fragment key={message.id}>
+              {startsDay ? (
+                <View style={styles.daySeparator}>
+                  <View style={styles.dayLine} />
+                  <Text style={styles.dayLabel}>
+                    {formatDayLabel(message.createdAt, locale, labels)}
+                  </Text>
+                  <View style={styles.dayLine} />
+                </View>
+              ) : null}
+              {/* One malformed message (agent blocks, markdown) drops out of
+                  the thread instead of blanking the whole chat. */}
+              <WidgetErrorBoundary fallback={null}>
+                <MessageBubble
+                  message={message}
+                  color={color}
+                  labels={labels}
+                  senderLabel={
+                    isAgentMessage && (startsRun || startsDay)
+                      ? message.senderName || agentName || labels.team
+                      : null
+                  }
+                  timeLabel={formatClockTime(message.createdAt, locale)}
+                  onSubmitProcedureForm={
+                    shouldShowProcedureForm(messages, message)
+                      ? (body) => onSendMessage(body)
+                      : undefined
+                  }
+                  onAgentUiAction={
+                    shouldShowAgentUiBlocks(messages, message) ? handleAgentUiAction : undefined
+                  }
+                />
+              </WidgetErrorBoundary>
+            </Fragment>
+          );
+        })}
+
+        {agentTyping ? (
+          <View style={styles.typingRow}>
+            <View style={styles.typingBubble}>
+              <TypingDot index={0} reduceMotion={reduceMotion} />
+              <TypingDot index={1} reduceMotion={reduceMotion} />
+              <TypingDot index={2} reduceMotion={reduceMotion} />
+            </View>
+            <Text style={styles.typingLabel}>{labels.thinking}</Text>
+          </View>
+        ) : null}
+      </ScrollView>
+
+      {offlineMessage ? (
+        <View style={styles.offlineBanner}>
+          <Text style={styles.offlineText}>{offlineMessage}</Text>
+        </View>
+      ) : null}
+
+      <View style={styles.composerWrapper}>
+        <View
+          style={[
+            styles.composer,
+            composerFocused && styles.composerFocused,
+            composerFocused && { borderColor: withAlpha(color, 0.55) },
+          ]}>
+          <TextInput
+            value={input}
+            onChangeText={handleChangeText}
+            onFocus={() => setComposerFocused(true)}
+            onBlur={() => setComposerFocused(false)}
+            placeholder={labels.messagePlaceholder}
+            placeholderTextColor={palette.textSubtle}
+            multiline
+            style={styles.input}
+            accessibilityLabel={labels.messagePlaceholder}
+          />
+          <Pressable
+            onPress={handleSend}
+            disabled={!canSend}
+            accessibilityRole="button"
+            accessibilityState={{ disabled: !canSend }}
+            hitSlop={8}
+            style={({ pressed }) => [
+              styles.sendButton,
+              canSend ? { backgroundColor: color } : styles.sendButtonDisabled,
+              pressed && canSend && styles.sendButtonPressed,
+            ]}>
+            <ArrowUpIcon
+              size={18}
+              color={canSend ? contrastingTextColor(color) : palette.textSubtle}
+            />
+          </Pressable>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function MessageBubble({
+  message,
+  color,
+  labels,
+  senderLabel,
+  timeLabel,
+  onSubmitProcedureForm,
+  onAgentUiAction,
+}: {
+  message: Message;
+  color: string;
+  labels: ChatLabels;
+  senderLabel?: string | null;
+  timeLabel: string;
+  onSubmitProcedureForm?: (body: string) => void;
+  onAgentUiAction?: (action: AgentUiAction) => void | Promise<void>;
+}) {
+  if (message.messageType === 'system') {
+    const text = message.bodyPlain || stripHtml(message.body || '') || labels.conversationUpdated;
+    return (
+      <View style={styles.systemRow}>
+        <Text style={styles.systemText}>{text}</Text>
+      </View>
+    );
+  }
+
+  const isVisitor = message.direction === 'inbound';
+  const rtl = isRTL();
+  const messageText = message.bodyPlain || stripHtml(message.body || '');
+  const hasBody = !!messageText;
+  const procedureForm = !isVisitor ? getProcedureForm(message.metadata) : null;
+  const agentUiBlocks = !isVisitor ? getAgentUiBlocks(message.metadata) : [];
+  const textColor = isVisitor ? palette.white : palette.ink;
+
+  return (
+    <View style={[styles.messageRow, isVisitor ? styles.messageRowRight : styles.messageRowLeft]}>
+      {senderLabel ? <Text style={styles.senderLabel}>{senderLabel}</Text> : null}
+      <View
+        style={[
+          styles.bubble,
+          isVisitor ? [styles.bubbleVisitor, { backgroundColor: color }] : styles.bubbleAgent,
+          rtl && (isVisitor ? styles.bubbleVisitorRTL : styles.bubbleAgentRTL),
+          message.status === 'pending' && styles.bubblePending,
+        ]}>
+        {hasBody ? (
+          isVisitor ? (
+            <Text style={[styles.bubbleText, { color: textColor }]}>{messageText}</Text>
+          ) : (
+            <Markdown content={messageText} color={textColor} />
+          )
+        ) : null}
+
+        {message.attachments && message.attachments.length > 0 ? (
+          <View style={[styles.attachments, hasBody && styles.attachmentsSpaced]}>
+            {message.attachments.map((attachment) => (
+              <AttachmentPreview
+                key={attachment.id}
+                attachment={attachment}
+                isVisitor={isVisitor}
+              />
+            ))}
+          </View>
+        ) : null}
+
+        {message.status === 'failed' ? (
+          <Text
+            style={[
+              styles.failedText,
+              { color: isVisitor ? withAlpha(palette.white, 0.7) : palette.danger },
+            ]}>
+            {labels.failedToSend}
+          </Text>
+        ) : null}
+
+        {timeLabel ? (
+          <Text
+            style={[
+              styles.messageTime,
+              { color: isVisitor ? withAlpha(palette.white, 0.7) : palette.textSubtle },
+            ]}>
+            {timeLabel}
+          </Text>
+        ) : null}
+      </View>
+
+      {agentUiBlocks.length > 0 && onAgentUiAction ? (
+        <AgentUiBlocks
+          blocks={agentUiBlocks}
+          color={color}
+          labels={labels.blocks}
+          onAction={onAgentUiAction}
+        />
+      ) : null}
+
+      {agentUiBlocks.length === 0 && procedureForm && onSubmitProcedureForm ? (
+        <ProcedureFieldForm
+          form={procedureForm}
+          color={color}
+          labels={labels}
+          onSubmit={onSubmitProcedureForm}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+function AttachmentPreview({
+  attachment,
+  isVisitor,
+}: {
+  attachment: WidgetAttachment;
+  isVisitor: boolean;
+}) {
+  // `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 openExternalUrl(attachment.url);
+
+  if (isImage) {
+    return (
+      <Pressable
+        onPress={open}
+        accessibilityRole="imagebutton"
+        accessibilityLabel={attachment.name}>
+        <Image
+          source={{ uri: attachment.url }}
+          style={styles.attachmentImage}
+          resizeMode="cover"
+          accessibilityIgnoresInvertColors
+        />
+      </Pressable>
+    );
+  }
+
+  return (
+    <Pressable
+      onPress={open}
+      accessibilityRole="button"
+      style={[
+        styles.attachmentFile,
+        { borderColor: isVisitor ? withAlpha(palette.white, 0.35) : palette.border },
+      ]}>
+      <Text
+        style={[styles.attachmentName, { color: isVisitor ? palette.white : palette.ink }]}
+        numberOfLines={1}>
+        {attachment.name}
+      </Text>
+    </Pressable>
+  );
+}
+
+function ProcedureFieldForm({
+  form,
+  color,
+  labels,
+  onSubmit,
+}: {
+  form: AgentProcedureForm;
+  color: string;
+  labels: ChatLabels;
+  onSubmit: (body: string) => void;
+}) {
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [submitted, setSubmitted] = useState(false);
+  const [expanded, setExpanded] = 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 (
+    <View style={styles.procedureCard}>
+      <Pressable
+        onPress={() => setExpanded((current) => !current)}
+        accessibilityRole="button"
+        accessibilityState={{ expanded }}
+        style={[styles.procedureToggle, { backgroundColor: expanded ? palette.surface : color }]}>
+        <Text
+          style={[styles.procedureToggleLabel, { color: expanded ? palette.text : palette.white }]}>
+          {submitted ? 'Details sent' : 'Share details'}
+        </Text>
+        <Text
+          style={[styles.procedureToggleHint, { color: expanded ? palette.text : palette.white }]}>
+          {expanded ? 'Hide' : `${form.fields.length} field${form.fields.length === 1 ? '' : 's'}`}
+        </Text>
+      </Pressable>
+
+      {expanded ? (
+        <>
+          <Text style={styles.procedureTitle}>{form.procedureName || 'Details'}</Text>
+          <View style={styles.procedureFields}>
+            {form.fields.map((field) => (
+              <View key={field.name}>
+                <Text style={styles.procedureLabel}>
+                  {field.label}
+                  {field.required ? ' *' : ''}
+                </Text>
+                <TextInput
+                  value={values[field.name] || ''}
+                  onChangeText={(text) =>
+                    setValues((current) => ({ ...current, [field.name]: text }))
+                  }
+                  placeholder={placeholderForField(field)}
+                  placeholderTextColor={palette.textSubtle}
+                  editable={!submitted}
+                  keyboardType={
+                    field.type === 'email'
+                      ? 'email-address'
+                      : field.type === 'phone'
+                        ? 'phone-pad'
+                        : 'default'
+                  }
+                  autoCapitalize={field.type === 'email' ? 'none' : 'sentences'}
+                  style={styles.procedureInput}
+                />
+              </View>
+            ))}
+          </View>
+          <Pressable
+            onPress={handleSubmit}
+            disabled={!canSubmit || submitted}
+            accessibilityRole="button"
+            style={[
+              styles.procedureSubmit,
+              { backgroundColor: canSubmit && !submitted ? color : palette.disabled },
+            ]}>
+            <Text style={styles.procedureSubmitLabel}>
+              {submitted ? labels.procedureSent : labels.procedureSend}
+            </Text>
+          </Pressable>
+        </>
+      ) : null}
+    </View>
+  );
+}
+
+function TypingDot({ index, reduceMotion }: { index: number; reduceMotion: boolean | null }) {
+  const value = useRef(new Animated.Value(0)).current;
+  const animating = reduceMotion === false;
+
+  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 = Animated.loop(
+      Animated.sequence([
+        Animated.delay(index * 140),
+        Animated.timing(value, {
+          toValue: 1,
+          duration: 320,
+          easing: Easing.out(Easing.quad),
+          useNativeDriver: true,
+        }),
+        Animated.timing(value, {
+          toValue: 0,
+          duration: 320,
+          easing: Easing.in(Easing.quad),
+          useNativeDriver: true,
+        }),
+        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 <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...';
+  if (field.type === 'date' || field.type === 'time') return '';
+  return field.label;
+}
+
+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;
+}
+
+/** 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));
+}