@parlr/react-native 0.1.0

package/lib/module/components/ParlrChat.js

@@ -0,0 +1,740 @@
+"use strict";
+
+// ---------------------------------------------------------------------------
+// Parlr React Native SDK - ParlrChat (main component)
+// ---------------------------------------------------------------------------
+//
+// A self-contained, production-quality chat screen. Drop it onto a screen
+// and everything just works: session creation, WebSocket connection,
+// conversation management, message sending, typing indicators.
+//
+// Features: attachments, conversation close/reopen, pre-chat form, CSAT.
+// ---------------------------------------------------------------------------
+
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, FlatList, Keyboard, Modal, Platform, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { useChat } from "../hooks/useChat.js";
+import { ParlrContext } from "../provider/ParlrContext.js";
+import { ChatBubble } from "./ChatBubble.js";
+import { EmptyState } from "./EmptyState.js";
+import { TypingIndicator } from "./TypingIndicator.js";
+import { PreChatForm } from "./PreChatForm.js";
+import { SatisfactionSurvey } from "./SatisfactionSurvey.js";
+import { AttachmentPicker } from "./AttachmentPicker.js";
+import { AttachmentPreview } from "./AttachmentPreview.js";
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// ---------------------------------------------------------------------------
+// i18n defaults
+// ---------------------------------------------------------------------------
+
+function getI18n(locale) {
+  if (locale?.startsWith('en')) {
+    return {
+      headerTitle: 'Support',
+      placeholder: 'Write a message...',
+      online: 'Online',
+      offline: 'Offline',
+      closeConversation: 'Close conversation',
+      reopenConversation: 'Reopen conversation',
+      conversationClosed: 'This conversation has been closed.'
+    };
+  }
+  return {
+    headerTitle: 'Support',
+    placeholder: '\u00c9crivez un message...',
+    online: 'En ligne',
+    offline: 'Hors ligne',
+    closeConversation: 'Fermer la conversation',
+    reopenConversation: 'Rouvrir la conversation',
+    conversationClosed: 'Cette conversation a \u00e9t\u00e9 ferm\u00e9e.'
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Animated send button
+// ---------------------------------------------------------------------------
+
+function SendButton({
+  onPress,
+  disabled,
+  accentColor,
+  theme
+}) {
+  const scale = useSharedValue(1);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{
+      scale: scale.value
+    }]
+  }));
+  const handlePressIn = () => {
+    scale.value = withSpring(0.85, {
+      damping: 15,
+      stiffness: 300
+    });
+  };
+  const handlePressOut = () => {
+    scale.value = withSpring(1, {
+      damping: 15,
+      stiffness: 300
+    });
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: onPress,
+    onPressIn: handlePressIn,
+    onPressOut: handlePressOut,
+    disabled: disabled,
+    hitSlop: 8,
+    accessibilityRole: "button",
+    accessibilityLabel: "Send message",
+    accessibilityState: {
+      disabled
+    },
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.sendButton, {
+        backgroundColor: disabled ? theme.colors.border : accentColor
+      }, animatedStyle],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.sendIcon, {
+          color: theme.colors.primaryText
+        }],
+        children: '\u2191'
+      })
+    })
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Header menu (3-dot)
+// ---------------------------------------------------------------------------
+
+function HeaderMenu({
+  visible,
+  onDismiss,
+  onClose,
+  onReopen,
+  isClosed,
+  theme,
+  locale
+}) {
+  const i18n = getI18n(locale);
+  if (!visible) return null;
+  return /*#__PURE__*/_jsx(Modal, {
+    transparent: true,
+    animationType: "fade",
+    visible: visible,
+    onRequestClose: onDismiss,
+    children: /*#__PURE__*/_jsx(Pressable, {
+      style: styles.menuBackdrop,
+      onPress: onDismiss,
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.menuContainer, {
+          backgroundColor: theme.colors.surface
+        }],
+        children: /*#__PURE__*/_jsx(Pressable, {
+          onPress: isClosed ? onReopen : onClose,
+          style: styles.menuItem,
+          accessibilityRole: "button",
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.menuItemText, {
+              color: theme.colors.text
+            }],
+            children: isClosed ? i18n.reopenConversation : i18n.closeConversation
+          })
+        })
+      })
+    })
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export function ParlrChat({
+  user,
+  conversationId,
+  onBack,
+  headerTitle,
+  placeholder,
+  emptyStateTitle,
+  emptyStateDescription,
+  accentColor: accentColorProp,
+  showHeader = true,
+  showPreChatForm = false,
+  preChatFields = ['name', 'email'],
+  showSatisfactionSurvey = true,
+  onConversationClosed,
+  safeAreaBottom = 0
+}) {
+  const {
+    config,
+    isReady,
+    isConnected,
+    session,
+    identify,
+    api,
+    theme
+  } = useContext(ParlrContext);
+  const accentColor = accentColorProp ?? theme.colors.primary;
+  const i18n = getI18n(config.locale);
+
+  // Consider "online" if session is active (REST API works), not just WebSocket.
+  const effectiveConnected = isConnected || isReady && !!session;
+  const chatState = useChat(conversationId);
+  const messages = chatState.messages ?? [];
+  const {
+    isLoading,
+    agentTyping,
+    sendMessage,
+    notifyTyping,
+    loadMore,
+    hasMore,
+    conversation,
+    closeConversation,
+    reopenConversation
+  } = chatState;
+  const [inputText, setInputText] = useState('');
+  const [menuVisible, setMenuVisible] = useState(false);
+  const [showAttachmentPicker, setShowAttachmentPicker] = useState(false);
+  const [pickedFile, setPickedFile] = useState(null);
+  const [isIdentified, setIsIdentified] = useState(!showPreChatForm || !!user);
+  const [showCSAT, setShowCSAT] = useState(false);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const flatListRef = useRef(null);
+  const identifiedRef = useRef(false);
+  const isNearBottomRef = useRef(true);
+
+  // --- Keyboard tracking (more reliable than KeyboardAvoidingView) -----------
+  useEffect(() => {
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const showSub = Keyboard.addListener(showEvent, e => {
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+    const hideSub = Keyboard.addListener(hideEvent, () => {
+      setKeyboardHeight(0);
+    });
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
+  const isClosed = conversation?.status === 'closed';
+  const handleScroll = useCallback(event => {
+    const {
+      contentOffset,
+      layoutMeasurement,
+      contentSize
+    } = event.nativeEvent;
+    const distanceFromBottom = contentSize.height - layoutMeasurement.height - contentOffset.y;
+    isNearBottomRef.current = distanceFromBottom < 150;
+  }, []);
+
+  // --- Identify user on mount ------------------------------------------------
+  useEffect(() => {
+    if (user && isReady && !identifiedRef.current) {
+      identifiedRef.current = true;
+      setIsIdentified(true);
+      identify(user).catch(err => {
+        console.warn('[@parlr/react-native] identify failed:', err);
+      });
+    }
+  }, [user, isReady, identify]);
+
+  // --- Show CSAT when conversation becomes closed ---
+  useEffect(() => {
+    if (isClosed && showSatisfactionSurvey) {
+      setShowCSAT(true);
+    }
+  }, [isClosed, showSatisfactionSurvey]);
+
+  // --- Handlers --------------------------------------------------------------
+
+  const handleSend = useCallback(() => {
+    const text = inputText.trim();
+    if (!text) return;
+    setInputText('');
+    notifyTyping(false);
+    sendMessage(text);
+  }, [inputText, sendMessage, notifyTyping]);
+  const handleTextChange = useCallback(text => {
+    setInputText(text);
+    notifyTyping(text.length > 0);
+  }, [notifyTyping]);
+  const handleEndReached = useCallback(() => {
+    if (hasMore && !isLoading) {
+      loadMore();
+    }
+  }, [hasMore, isLoading, loadMore]);
+  const handleCloseConversation = useCallback(async () => {
+    setMenuVisible(false);
+    if (closeConversation) {
+      await closeConversation();
+      onConversationClosed?.();
+    }
+  }, [closeConversation, onConversationClosed]);
+  const handleReopenConversation = useCallback(async () => {
+    setMenuVisible(false);
+    if (reopenConversation) {
+      await reopenConversation();
+      setShowCSAT(false);
+    }
+  }, [reopenConversation]);
+  const handlePreChatSubmit = useCallback(async userData => {
+    await identify(userData);
+    setIsIdentified(true);
+  }, [identify]);
+  const handleCSATSubmit = useCallback(async (score, comment) => {
+    if (api && conversation) {
+      await api.submitRating(conversation.id, score, comment);
+    }
+    setShowCSAT(false);
+  }, [api, conversation]);
+  const handleCSATDismiss = useCallback(() => {
+    setShowCSAT(false);
+  }, []);
+  const handleFilePicked = useCallback(file => {
+    setPickedFile(file);
+    setShowAttachmentPicker(false);
+  }, []);
+  const handleSendAttachment = useCallback(async () => {
+    if (!pickedFile || !api) return;
+
+    // 1. Create conversation if needed (same logic as sendMessage).
+    let convId = conversation?.id ?? chatState.conversation?.id;
+    if (!convId) {
+      try {
+        const conv = await api.createConversation();
+        convId = conv.id;
+      } catch (err) {
+        console.warn('[@parlr/react-native] Failed to create conversation for attachment:', err);
+        setPickedFile(null);
+        return;
+      }
+    }
+
+    // 2. Build FormData and upload.
+    const formData = new FormData();
+    formData.append('file', {
+      uri: pickedFile.uri,
+      name: pickedFile.name,
+      type: pickedFile.type
+    });
+    try {
+      await api.uploadAttachment(convId, formData);
+    } catch (err) {
+      console.warn('[@parlr/react-native] attachment upload failed:', err);
+    }
+    setPickedFile(null);
+  }, [pickedFile, api, conversation, chatState.conversation]);
+
+  // --- Render helpers --------------------------------------------------------
+
+  const renderMessage = useCallback(({
+    item,
+    index
+  }) => /*#__PURE__*/_jsx(ChatBubble, {
+    message: item,
+    accentColor: accentColor,
+    animated: index >= messages.length - 1
+  }), [accentColor, messages.length]);
+  const keyExtractor = useCallback(item => item.clientId ?? item.id, []);
+
+  // --- Loading state ---------------------------------------------------------
+
+  if (!isReady) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.loadingContainer, {
+        backgroundColor: theme.colors.background
+      }],
+      children: /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "large",
+        color: accentColor
+      })
+    });
+  }
+
+  // --- Pre-chat form ---------------------------------------------------------
+
+  if (!isIdentified) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.root, {
+        backgroundColor: theme.colors.background
+      }],
+      children: [showHeader && /*#__PURE__*/_jsxs(View, {
+        style: [styles.header, {
+          backgroundColor: theme.colors.surface,
+          borderBottomColor: theme.colors.border
+        }],
+        accessibilityRole: "header",
+        children: [onBack && /*#__PURE__*/_jsx(Pressable, {
+          onPress: onBack,
+          style: styles.backButton,
+          hitSlop: 12,
+          accessibilityRole: "button",
+          accessibilityLabel: "Go back",
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.backArrow, {
+              color: theme.colors.text
+            }],
+            children: '\u2190'
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.headerCenter,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.headerTitle, {
+              color: theme.colors.text
+            }],
+            numberOfLines: 1,
+            children: headerTitle ?? i18n.headerTitle
+          })
+        }), onBack && /*#__PURE__*/_jsx(View, {
+          style: styles.backButton
+        })]
+      }), /*#__PURE__*/_jsx(PreChatForm, {
+        onSubmit: handlePreChatSubmit,
+        fields: preChatFields,
+        accentColor: accentColor,
+        locale: config.locale
+      })]
+    });
+  }
+
+  // --- Render ----------------------------------------------------------------
+
+  const hasMessages = messages.length > 0;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.root, {
+      backgroundColor: theme.colors.background,
+      paddingBottom: keyboardHeight > 0 ? keyboardHeight : 0
+    }],
+    children: [showHeader && /*#__PURE__*/_jsxs(View, {
+      style: [styles.header, {
+        backgroundColor: theme.colors.surface,
+        borderBottomColor: theme.colors.border
+      }],
+      accessibilityRole: "header",
+      children: [onBack && /*#__PURE__*/_jsx(Pressable, {
+        onPress: onBack,
+        style: styles.backButton,
+        hitSlop: 12,
+        accessibilityRole: "button",
+        accessibilityLabel: "Go back",
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.backArrow, {
+            color: theme.colors.text
+          }],
+          children: '\u2190'
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.headerCenter,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.headerTitle, {
+            color: theme.colors.text
+          }],
+          numberOfLines: 1,
+          children: headerTitle ?? i18n.headerTitle
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.statusRow,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.statusDot, {
+              backgroundColor: effectiveConnected ? theme.colors.success : theme.colors.textSecondary
+            }]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.statusText, {
+              color: theme.colors.textSecondary
+            }],
+            children: effectiveConnected ? i18n.online : i18n.offline
+          })]
+        })]
+      }), conversationId && /*#__PURE__*/_jsx(Pressable, {
+        onPress: () => setMenuVisible(true),
+        style: styles.menuButton,
+        hitSlop: 12,
+        accessibilityRole: "button",
+        accessibilityLabel: "Menu",
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.menuDots, {
+            color: theme.colors.text
+          }],
+          children: '\u22ee'
+        })
+      }), !conversationId && onBack && /*#__PURE__*/_jsx(View, {
+        style: styles.backButton
+      })]
+    }), /*#__PURE__*/_jsx(HeaderMenu, {
+      visible: menuVisible,
+      onDismiss: () => setMenuVisible(false),
+      onClose: handleCloseConversation,
+      onReopen: handleReopenConversation,
+      isClosed: isClosed,
+      theme: theme,
+      locale: config.locale
+    }), hasMessages ? /*#__PURE__*/_jsx(FlatList, {
+      ref: flatListRef,
+      data: messages,
+      renderItem: renderMessage,
+      keyExtractor: keyExtractor,
+      inverted: false,
+      contentContainerStyle: styles.messageList,
+      showsVerticalScrollIndicator: false,
+      onEndReached: handleEndReached,
+      onEndReachedThreshold: 0.3,
+      onScroll: handleScroll,
+      scrollEventThrottle: 100,
+      removeClippedSubviews: true,
+      maxToRenderPerBatch: 15,
+      windowSize: 10,
+      ListHeaderComponent: isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "small",
+        color: accentColor,
+        style: styles.loadingMore
+      }) : null,
+      ListFooterComponent: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [agentTyping && /*#__PURE__*/_jsx(TypingIndicator, {
+          accentColor: accentColor
+        }), showCSAT && /*#__PURE__*/_jsx(SatisfactionSurvey, {
+          onSubmit: handleCSATSubmit,
+          onDismiss: handleCSATDismiss,
+          accentColor: accentColor,
+          locale: config.locale
+        })]
+      }),
+      onContentSizeChange: () => {
+        if (isNearBottomRef.current) {
+          flatListRef.current?.scrollToEnd({
+            animated: true
+          });
+        }
+      }
+    }) : /*#__PURE__*/_jsx(EmptyState, {
+      title: emptyStateTitle,
+      description: emptyStateDescription,
+      accentColor: accentColor,
+      locale: config.locale
+    }), isClosed && !showCSAT && /*#__PURE__*/_jsx(View, {
+      style: [styles.closedBanner, {
+        backgroundColor: theme.colors.surface
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.closedText, {
+          color: theme.colors.textSecondary
+        }],
+        children: i18n.conversationClosed
+      })
+    }), pickedFile && /*#__PURE__*/_jsx(AttachmentPreview, {
+      file: pickedFile,
+      onRemove: () => setPickedFile(null),
+      onSend: handleSendAttachment,
+      accentColor: accentColor,
+      locale: config.locale
+    }), showAttachmentPicker && /*#__PURE__*/_jsx(AttachmentPicker, {
+      onFilePicked: handleFilePicked,
+      onDismiss: () => setShowAttachmentPicker(false),
+      accentColor: accentColor,
+      locale: config.locale
+    }), !isClosed && !pickedFile && !showAttachmentPicker && /*#__PURE__*/_jsxs(View, {
+      style: [styles.inputBar, {
+        backgroundColor: theme.colors.surface,
+        borderTopColor: theme.colors.border,
+        paddingBottom: keyboardHeight > 0 ? 10 : 10 + safeAreaBottom
+      }],
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        onPress: () => setShowAttachmentPicker(true),
+        style: [styles.attachButton, {
+          backgroundColor: theme.colors.surface
+        }],
+        hitSlop: 8,
+        accessibilityRole: "button",
+        accessibilityLabel: "Add attachment",
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.attachIcon, {
+            color: theme.colors.textSecondary
+          }],
+          children: "+"
+        })
+      }), /*#__PURE__*/_jsx(TextInput, {
+        style: [styles.textInput, {
+          backgroundColor: theme.colors.surface,
+          borderColor: theme.colors.border,
+          color: theme.colors.text
+        }],
+        value: inputText,
+        onChangeText: handleTextChange,
+        placeholder: placeholder ?? i18n.placeholder,
+        placeholderTextColor: theme.colors.textSecondary,
+        multiline: true,
+        maxLength: 4000,
+        returnKeyType: "default",
+        blurOnSubmit: false,
+        accessibilityLabel: "Message input",
+        accessibilityHint: "Type a message to send"
+      }), /*#__PURE__*/_jsx(SendButton, {
+        onPress: handleSend,
+        disabled: inputText.trim().length === 0,
+        accentColor: accentColor,
+        theme: theme
+      })]
+    })]
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  // Header
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    paddingBottom: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  backButton: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  backArrow: {
+    fontSize: 22,
+    fontWeight: '500'
+  },
+  headerCenter: {
+    flex: 1,
+    alignItems: 'center'
+  },
+  headerTitle: {
+    fontSize: 17,
+    fontWeight: '600'
+  },
+  statusRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 2
+  },
+  statusDot: {
+    width: 7,
+    height: 7,
+    borderRadius: 3.5,
+    marginRight: 5
+  },
+  statusText: {
+    fontSize: 12
+  },
+  menuButton: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  menuDots: {
+    fontSize: 20,
+    fontWeight: '700'
+  },
+  // Header menu
+  menuBackdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-end',
+    paddingTop: Platform.OS === 'ios' ? 110 : 70,
+    paddingRight: 16
+  },
+  menuContainer: {
+    borderRadius: 10,
+    paddingVertical: 4,
+    minWidth: 200,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 8
+  },
+  menuItem: {
+    paddingHorizontal: 16,
+    paddingVertical: 12
+  },
+  menuItemText: {
+    fontSize: 15
+  },
+  // Message list
+  messageList: {
+    paddingVertical: 12
+  },
+  loadingMore: {
+    marginVertical: 8
+  },
+  // Closed banner
+  closedBanner: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    alignItems: 'center'
+  },
+  closedText: {
+    fontSize: 13
+  },
+  // Input bar
+  inputBar: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    gap: 8
+  },
+  attachButton: {
+    width: 38,
+    height: 38,
+    borderRadius: 19,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 1
+  },
+  attachIcon: {
+    fontSize: 22,
+    fontWeight: '300'
+  },
+  textInput: {
+    flex: 1,
+    fontSize: 15,
+    lineHeight: 20,
+    maxHeight: 100,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 22,
+    borderWidth: 1
+  },
+  sendButton: {
+    width: 38,
+    height: 38,
+    borderRadius: 19,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 1
+  },
+  sendIcon: {
+    fontSize: 18,
+    fontWeight: '700'
+  }
+});
+//# sourceMappingURL=ParlrChat.js.map