@parlr/react-native 0.1.0

package/src/components/PreChatForm.tsx

@@ -0,0 +1,313 @@
+// ---------------------------------------------------------------------------
+// Parlr React Native SDK - Pre-Chat Form
+// ---------------------------------------------------------------------------
+//
+// Collects visitor identity (name, email) before starting a conversation.
+// Shown when the user has not been identified yet.
+// ---------------------------------------------------------------------------
+
+import React, { useCallback, useState } from 'react';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  useColorScheme,
+} from 'react-native';
+import type { ParlrUser } from '../core/types';
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface PreChatFormProps {
+  /** Called when the form is submitted with user data. */
+  onSubmit: (user: ParlrUser) => Promise<void>;
+  /** Fields to collect. Default: ['name', 'email']. */
+  fields?: Array<'name' | 'email' | 'phone'>;
+  /** Title text. */
+  title?: string;
+  /** Description text. */
+  description?: string;
+  /** Submit button label. */
+  submitLabel?: string;
+  /** Accent color for the submit button. */
+  accentColor?: string;
+  /** Locale for default text. */
+  locale?: string;
+}
+
+// ---------------------------------------------------------------------------
+// i18n
+// ---------------------------------------------------------------------------
+
+function getI18n(locale?: string) {
+  if (locale?.startsWith('en')) {
+    return {
+      title: 'Welcome!',
+      description: 'Please introduce yourself so we can help you better.',
+      name: 'Your name',
+      email: 'Email address',
+      phone: 'Phone number',
+      submit: 'Start chat',
+      nameRequired: 'Name is required',
+      emailInvalid: 'Please enter a valid email',
+    };
+  }
+  return {
+    title: 'Bienvenue !',
+    description: 'Pr\u00e9sentez-vous pour que nous puissions mieux vous aider.',
+    name: 'Votre nom',
+    email: 'Adresse e-mail',
+    phone: 'Num\u00e9ro de t\u00e9l\u00e9phone',
+    submit: 'D\u00e9marrer le chat',
+    nameRequired: 'Le nom est requis',
+    emailInvalid: 'Veuillez entrer un e-mail valide',
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Validation
+// ---------------------------------------------------------------------------
+
+function isValidEmail(email: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function PreChatForm({
+  onSubmit,
+  fields = ['name', 'email'],
+  title,
+  description,
+  submitLabel,
+  accentColor: accentColorProp,
+  locale,
+}: PreChatFormProps) {
+  const isDark = useColorScheme() === 'dark';
+  const accentColor = accentColorProp ?? '#6366f1';
+  const i18n = getI18n(locale);
+
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const validate = useCallback((): boolean => {
+    const newErrors: Record<string, string> = {};
+
+    if (fields.includes('name') && !name.trim()) {
+      newErrors.name = i18n.nameRequired;
+    }
+
+    if (fields.includes('email') && email.trim() && !isValidEmail(email.trim())) {
+      newErrors.email = i18n.emailInvalid;
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }, [fields, name, email, i18n]);
+
+  const handleSubmit = useCallback(async () => {
+    if (!validate()) return;
+
+    setIsSubmitting(true);
+    try {
+      const user: ParlrUser = {};
+      if (name.trim()) user.name = name.trim();
+      if (email.trim()) user.email = email.trim();
+      if (phone.trim()) user.phone = phone.trim();
+
+      await onSubmit(user);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [validate, name, email, phone, onSubmit]);
+
+  return (
+    <KeyboardAvoidingView
+      style={[styles.root, isDark && styles.rootDark]}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    >
+      <View style={styles.container}>
+        <Text style={[styles.title, isDark && styles.titleDark]}>
+          {title ?? i18n.title}
+        </Text>
+        <Text style={[styles.description, isDark && styles.descriptionDark]}>
+          {description ?? i18n.description}
+        </Text>
+
+        {fields.includes('name') && (
+          <View style={styles.fieldContainer}>
+            <TextInput
+              style={[
+                styles.input,
+                isDark ? styles.inputDark : styles.inputLight,
+                errors.name ? styles.inputError : undefined,
+              ]}
+              value={name}
+              onChangeText={setName}
+              placeholder={i18n.name}
+              placeholderTextColor={isDark ? '#64748b' : '#94a3b8'}
+              autoCapitalize="words"
+              autoComplete="name"
+              textContentType="name"
+              accessibilityLabel={i18n.name}
+            />
+            {errors.name && (
+              <Text style={styles.errorText}>{errors.name}</Text>
+            )}
+          </View>
+        )}
+
+        {fields.includes('email') && (
+          <View style={styles.fieldContainer}>
+            <TextInput
+              style={[
+                styles.input,
+                isDark ? styles.inputDark : styles.inputLight,
+                errors.email ? styles.inputError : undefined,
+              ]}
+              value={email}
+              onChangeText={setEmail}
+              placeholder={i18n.email}
+              placeholderTextColor={isDark ? '#64748b' : '#94a3b8'}
+              keyboardType="email-address"
+              autoCapitalize="none"
+              autoComplete="email"
+              textContentType="emailAddress"
+              accessibilityLabel={i18n.email}
+            />
+            {errors.email && (
+              <Text style={styles.errorText}>{errors.email}</Text>
+            )}
+          </View>
+        )}
+
+        {fields.includes('phone') && (
+          <View style={styles.fieldContainer}>
+            <TextInput
+              style={[
+                styles.input,
+                isDark ? styles.inputDark : styles.inputLight,
+              ]}
+              value={phone}
+              onChangeText={setPhone}
+              placeholder={i18n.phone}
+              placeholderTextColor={isDark ? '#64748b' : '#94a3b8'}
+              keyboardType="phone-pad"
+              autoComplete="tel"
+              textContentType="telephoneNumber"
+              accessibilityLabel={i18n.phone}
+            />
+          </View>
+        )}
+
+        <Pressable
+          onPress={handleSubmit}
+          disabled={isSubmitting}
+          style={[
+            styles.submitButton,
+            { backgroundColor: isSubmitting ? '#cbd5e1' : accentColor },
+          ]}
+          accessibilityRole="button"
+          accessibilityLabel={submitLabel ?? i18n.submit}
+          accessibilityState={{ disabled: isSubmitting }}
+        >
+          {isSubmitting ? (
+            <ActivityIndicator size="small" color="#ffffff" />
+          ) : (
+            <Text style={styles.submitText}>{submitLabel ?? i18n.submit}</Text>
+          )}
+        </Pressable>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+    justifyContent: 'center',
+  },
+  rootDark: {
+    backgroundColor: '#0f172a',
+  },
+  container: {
+    paddingHorizontal: 24,
+    paddingVertical: 32,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#0f172a',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  titleDark: {
+    color: '#f1f5f9',
+  },
+  description: {
+    fontSize: 15,
+    color: '#64748b',
+    textAlign: 'center',
+    lineHeight: 22,
+    marginBottom: 28,
+  },
+  descriptionDark: {
+    color: '#94a3b8',
+  },
+  fieldContainer: {
+    marginBottom: 16,
+  },
+  input: {
+    fontSize: 15,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+  inputLight: {
+    backgroundColor: '#f8fafc',
+    borderColor: '#e2e8f0',
+    color: '#0f172a',
+  },
+  inputDark: {
+    backgroundColor: '#1e293b',
+    borderColor: '#334155',
+    color: '#f1f5f9',
+  },
+  inputError: {
+    borderColor: '#ef4444',
+  },
+  errorText: {
+    fontSize: 12,
+    color: '#ef4444',
+    marginTop: 4,
+    marginLeft: 4,
+  },
+  submitButton: {
+    paddingVertical: 14,
+    borderRadius: 12,
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  submitText: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/src/components/RichMessage.tsx

@@ -0,0 +1,353 @@
+// ---------------------------------------------------------------------------
+// Parlr React Native SDK - Rich Message Renderer
+// ---------------------------------------------------------------------------
+//
+// Renders rich message content types sent by automations or agents:
+// cards, buttons, carousels, quick replies, etc.
+// ---------------------------------------------------------------------------
+
+import React from 'react';
+import {
+  FlatList,
+  Image,
+  Linking,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  useColorScheme,
+} from 'react-native';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface RichCard {
+  title?: string;
+  description?: string;
+  imageUrl?: string;
+  actions?: RichAction[];
+}
+
+export interface RichAction {
+  type: 'link' | 'postback' | 'reply';
+  label: string;
+  value: string;
+}
+
+export interface RichCarousel {
+  cards: RichCard[];
+}
+
+export interface RichQuickReplies {
+  text?: string;
+  replies: Array<{ label: string; value: string }>;
+}
+
+export interface RichContent {
+  type: 'card' | 'carousel' | 'quick_replies' | 'buttons';
+  card?: RichCard;
+  carousel?: RichCarousel;
+  quickReplies?: RichQuickReplies;
+  buttons?: RichAction[];
+}
+
+export interface RichMessageProps {
+  /** The rich content to render. Parsed from message metadata. */
+  content: RichContent;
+  /** Called when a postback/reply action is triggered. */
+  onAction?: (action: RichAction) => void;
+  /** Accent color for buttons. */
+  accentColor?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function tryParseRichContent(metadata?: Record<string, unknown>): RichContent | null {
+  if (!metadata || typeof metadata !== 'object') return null;
+  if (metadata.richContent && typeof metadata.richContent === 'object') {
+    return metadata.richContent as RichContent;
+  }
+  return null;
+}
+
+export { tryParseRichContent };
+
+// ---------------------------------------------------------------------------
+// Action Button
+// ---------------------------------------------------------------------------
+
+function ActionButton({
+  action,
+  onAction,
+  accentColor,
+  isDark: _isDark,
+}: {
+  action: RichAction;
+  onAction?: (action: RichAction) => void;
+  accentColor: string;
+  isDark: boolean;
+}) {
+  const handlePress = () => {
+    if (action.type === 'link') {
+      Linking.openURL(action.value).catch(() => {});
+    } else {
+      onAction?.(action);
+    }
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      style={[styles.actionButton, { borderColor: accentColor }]}
+      accessibilityRole="button"
+      accessibilityLabel={action.label}
+    >
+      <Text style={[styles.actionLabel, { color: accentColor }]}>
+        {action.label}
+      </Text>
+    </Pressable>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Card
+// ---------------------------------------------------------------------------
+
+function CardView({
+  card,
+  onAction,
+  accentColor,
+  isDark,
+}: {
+  card: RichCard;
+  onAction?: (action: RichAction) => void;
+  accentColor: string;
+  isDark: boolean;
+}) {
+  return (
+    <View style={[styles.card, isDark && styles.cardDark]}>
+      {card.imageUrl && (
+        <Image
+          source={{ uri: card.imageUrl }}
+          style={styles.cardImage}
+          resizeMode="cover"
+          accessibilityLabel={card.title ?? 'Card image'}
+        />
+      )}
+      {card.title && (
+        <Text style={[styles.cardTitle, isDark && styles.cardTitleDark]}>
+          {card.title}
+        </Text>
+      )}
+      {card.description && (
+        <Text style={[styles.cardDescription, isDark && styles.cardDescriptionDark]}>
+          {card.description}
+        </Text>
+      )}
+      {card.actions && card.actions.length > 0 && (
+        <View style={styles.cardActions}>
+          {card.actions.map((action, idx) => (
+            <ActionButton
+              key={idx}
+              action={action}
+              onAction={onAction}
+              accentColor={accentColor}
+              isDark={isDark}
+            />
+          ))}
+        </View>
+      )}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export function RichMessage({
+  content,
+  onAction,
+  accentColor: accentColorProp,
+}: RichMessageProps) {
+  const isDark = useColorScheme() === 'dark';
+  const accentColor = accentColorProp ?? '#6366f1';
+
+  switch (content.type) {
+    case 'card':
+      if (!content.card) return null;
+      return (
+        <View style={styles.container}>
+          <CardView
+            card={content.card}
+            onAction={onAction}
+            accentColor={accentColor}
+            isDark={isDark}
+          />
+        </View>
+      );
+
+    case 'carousel':
+      if (!content.carousel?.cards?.length) return null;
+      return (
+        <FlatList
+          horizontal
+          data={content.carousel.cards}
+          renderItem={({ item }) => (
+            <View style={styles.carouselItem}>
+              <CardView
+                card={item}
+                onAction={onAction}
+                accentColor={accentColor}
+                isDark={isDark}
+              />
+            </View>
+          )}
+          keyExtractor={(_, idx) => String(idx)}
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.carouselContainer}
+          snapToAlignment="start"
+          decelerationRate="fast"
+        />
+      );
+
+    case 'quick_replies':
+      if (!content.quickReplies) return null;
+      return (
+        <View style={styles.container}>
+          {content.quickReplies.text && (
+            <Text style={[styles.quickReplyText, isDark && styles.quickReplyTextDark]}>
+              {content.quickReplies.text}
+            </Text>
+          )}
+          <View style={styles.quickRepliesRow}>
+            {content.quickReplies.replies.map((reply, idx) => (
+              <Pressable
+                key={idx}
+                onPress={() => onAction?.({ type: 'reply', label: reply.label, value: reply.value })}
+                style={[styles.quickReply, { borderColor: accentColor }]}
+                accessibilityRole="button"
+                accessibilityLabel={reply.label}
+              >
+                <Text style={[styles.quickReplyLabel, { color: accentColor }]}>
+                  {reply.label}
+                </Text>
+              </Pressable>
+            ))}
+          </View>
+        </View>
+      );
+
+    case 'buttons':
+      if (!content.buttons?.length) return null;
+      return (
+        <View style={styles.container}>
+          {content.buttons.map((action, idx) => (
+            <ActionButton
+              key={idx}
+              action={action}
+              onAction={onAction}
+              accentColor={accentColor}
+              isDark={isDark}
+            />
+          ))}
+        </View>
+      );
+
+    default:
+      return null;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 6,
+  },
+  card: {
+    backgroundColor: '#f8fafc',
+    borderRadius: 12,
+    overflow: 'hidden',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#e2e8f0',
+  },
+  cardDark: {
+    backgroundColor: '#1e293b',
+    borderColor: '#334155',
+  },
+  cardImage: {
+    width: '100%',
+    height: 140,
+  },
+  cardTitle: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#0f172a',
+    paddingHorizontal: 12,
+    paddingTop: 10,
+  },
+  cardTitleDark: {
+    color: '#f1f5f9',
+  },
+  cardDescription: {
+    fontSize: 13,
+    color: '#64748b',
+    paddingHorizontal: 12,
+    paddingTop: 4,
+    lineHeight: 18,
+  },
+  cardDescriptionDark: {
+    color: '#94a3b8',
+  },
+  cardActions: {
+    padding: 10,
+    gap: 6,
+  },
+  actionButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 14,
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: 'center',
+  },
+  actionLabel: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  carouselContainer: {
+    paddingHorizontal: 12,
+    gap: 10,
+  },
+  carouselItem: {
+    width: 240,
+  },
+  quickReplyText: {
+    fontSize: 14,
+    color: '#0f172a',
+    marginBottom: 8,
+  },
+  quickReplyTextDark: {
+    color: '#e2e8f0',
+  },
+  quickRepliesRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6,
+  },
+  quickReply: {
+    paddingVertical: 6,
+    paddingHorizontal: 14,
+    borderRadius: 16,
+    borderWidth: 1,
+  },
+  quickReplyLabel: {
+    fontSize: 13,
+    fontWeight: '500',
+  },
+});