@parlr/react-native 0.1.0

package/src/components/SatisfactionSurvey.tsx

@@ -0,0 +1,333 @@
+// ---------------------------------------------------------------------------
+// Parlr React Native SDK - Satisfaction Survey (CSAT)
+// ---------------------------------------------------------------------------
+//
+// Displays a 1-5 star rating + optional comment after a conversation is closed.
+// ---------------------------------------------------------------------------
+
+import React, { useCallback, useState } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  useColorScheme,
+} from 'react-native';
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface SatisfactionSurveyProps {
+  /** Called when the survey is submitted. */
+  onSubmit: (score: number, comment?: string) => Promise<void>;
+  /** Called when the user dismisses without rating. */
+  onDismiss?: () => void;
+  /** Title text. */
+  title?: string;
+  /** Description text. */
+  description?: string;
+  /** Accent color. */
+  accentColor?: string;
+  /** Locale for default text. */
+  locale?: string;
+}
+
+// ---------------------------------------------------------------------------
+// i18n
+// ---------------------------------------------------------------------------
+
+function getI18n(locale?: string) {
+  if (locale?.startsWith('en')) {
+    return {
+      title: 'How was your experience?',
+      description: 'Rate your conversation with our team.',
+      commentPlaceholder: 'Tell us more (optional)',
+      submit: 'Submit',
+      dismiss: 'Skip',
+      thanks: 'Thank you for your feedback!',
+      labels: ['Terrible', 'Bad', 'Okay', 'Good', 'Excellent'],
+    };
+  }
+  return {
+    title: 'Comment s\u2019est pass\u00e9e votre exp\u00e9rience ?',
+    description: '\u00c9valuez votre conversation avec notre \u00e9quipe.',
+    commentPlaceholder: 'Dites-nous en plus (optionnel)',
+    submit: 'Envoyer',
+    dismiss: 'Passer',
+    thanks: 'Merci pour votre retour !',
+    labels: ['Terrible', 'Mauvais', 'Correct', 'Bien', 'Excellent'],
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Star component
+// ---------------------------------------------------------------------------
+
+function Star({
+  filled,
+  onPress,
+  size = 36,
+}: {
+  filled: boolean;
+  onPress: () => void;
+  size?: number;
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      hitSlop={4}
+      accessibilityRole="button"
+    >
+      <Text style={{ fontSize: size, color: filled ? '#f59e0b' : '#d1d5db' }}>
+        {filled ? '\u2605' : '\u2606'}
+      </Text>
+    </Pressable>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function SatisfactionSurvey({
+  onSubmit,
+  onDismiss,
+  title,
+  description,
+  accentColor: accentColorProp,
+  locale,
+}: SatisfactionSurveyProps) {
+  const isDark = useColorScheme() === 'dark';
+  const accentColor = accentColorProp ?? '#6366f1';
+  const i18n = getI18n(locale);
+
+  const [score, setScore] = useState(0);
+  const [comment, setComment] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleSubmit = useCallback(async () => {
+    if (score === 0) return;
+    setIsSubmitting(true);
+    try {
+      await onSubmit(score, comment.trim() || undefined);
+      setSubmitted(true);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [score, comment, onSubmit]);
+
+  if (submitted) {
+    return (
+      <View style={[styles.root, isDark && styles.rootDark]}>
+        <View style={styles.container}>
+          <Text style={styles.checkmark}>{'\u2714'}</Text>
+          <Text style={[styles.thanksText, isDark && styles.thanksTextDark]}>
+            {i18n.thanks}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.root, isDark && styles.rootDark]}>
+      <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>
+
+        {/* Stars */}
+        <View style={styles.starsRow}>
+          {[1, 2, 3, 4, 5].map((value) => (
+            <Star
+              key={value}
+              filled={value <= score}
+              onPress={() => setScore(value)}
+            />
+          ))}
+        </View>
+
+        {/* Label */}
+        {score > 0 && (
+          <Text style={[styles.scoreLabel, isDark && styles.scoreLabelDark]}>
+            {i18n.labels[score - 1]}
+          </Text>
+        )}
+
+        {/* Comment */}
+        {score > 0 && (
+          <TextInput
+            style={[
+              styles.commentInput,
+              isDark ? styles.commentInputDark : styles.commentInputLight,
+            ]}
+            value={comment}
+            onChangeText={setComment}
+            placeholder={i18n.commentPlaceholder}
+            placeholderTextColor={isDark ? '#64748b' : '#94a3b8'}
+            multiline
+            maxLength={500}
+            accessibilityLabel={i18n.commentPlaceholder}
+          />
+        )}
+
+        {/* Actions */}
+        <View style={styles.actions}>
+          {onDismiss && (
+            <Pressable
+              onPress={onDismiss}
+              style={styles.dismissButton}
+              accessibilityRole="button"
+              accessibilityLabel={i18n.dismiss}
+            >
+              <Text style={[styles.dismissText, isDark && styles.dismissTextDark]}>
+                {i18n.dismiss}
+              </Text>
+            </Pressable>
+          )}
+
+          <Pressable
+            onPress={handleSubmit}
+            disabled={score === 0 || isSubmitting}
+            style={[
+              styles.submitButton,
+              {
+                backgroundColor: score === 0 || isSubmitting ? '#cbd5e1' : accentColor,
+              },
+            ]}
+            accessibilityRole="button"
+            accessibilityLabel={i18n.submit}
+            accessibilityState={{ disabled: score === 0 || isSubmitting }}
+          >
+            {isSubmitting ? (
+              <ActivityIndicator size="small" color="#ffffff" />
+            ) : (
+              <Text style={styles.submitText}>{i18n.submit}</Text>
+            )}
+          </Pressable>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  root: {
+    backgroundColor: '#ffffff',
+    paddingVertical: 24,
+  },
+  rootDark: {
+    backgroundColor: '#0f172a',
+  },
+  container: {
+    paddingHorizontal: 24,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#0f172a',
+    marginBottom: 6,
+    textAlign: 'center',
+  },
+  titleDark: {
+    color: '#f1f5f9',
+  },
+  description: {
+    fontSize: 14,
+    color: '#64748b',
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  descriptionDark: {
+    color: '#94a3b8',
+  },
+  starsRow: {
+    flexDirection: 'row',
+    gap: 12,
+    marginBottom: 8,
+  },
+  scoreLabel: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#475569',
+    marginBottom: 16,
+  },
+  scoreLabelDark: {
+    color: '#94a3b8',
+  },
+  commentInput: {
+    width: '100%',
+    minHeight: 80,
+    maxHeight: 120,
+    fontSize: 14,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 10,
+    borderWidth: 1,
+    textAlignVertical: 'top',
+    marginBottom: 16,
+  },
+  commentInputLight: {
+    backgroundColor: '#f8fafc',
+    borderColor: '#e2e8f0',
+    color: '#0f172a',
+  },
+  commentInputDark: {
+    backgroundColor: '#1e293b',
+    borderColor: '#334155',
+    color: '#f1f5f9',
+  },
+  actions: {
+    flexDirection: 'row',
+    gap: 12,
+    alignItems: 'center',
+  },
+  dismissButton: {
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+  },
+  dismissText: {
+    fontSize: 14,
+    color: '#64748b',
+  },
+  dismissTextDark: {
+    color: '#94a3b8',
+  },
+  submitButton: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 10,
+    alignItems: 'center',
+  },
+  submitText: {
+    color: '#ffffff',
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  checkmark: {
+    fontSize: 48,
+    color: '#22c55e',
+    marginBottom: 12,
+  },
+  thanksText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#0f172a',
+    textAlign: 'center',
+  },
+  thanksTextDark: {
+    color: '#f1f5f9',
+  },
+});

package/src/components/TypingIndicator.tsx

@@ -0,0 +1,89 @@
+// ---------------------------------------------------------------------------
+// Parlr React Native SDK - Typing Indicator (animated 3 dots)
+// ---------------------------------------------------------------------------
+
+import React, { useEffect } from 'react';
+import { StyleSheet, View, useColorScheme } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withSequence,
+  withTiming,
+  withDelay,
+  Easing,
+} from 'react-native-reanimated';
+
+interface TypingIndicatorProps {
+  accentColor?: string;
+}
+
+function Dot({ index, color }: { index: number; color: string }) {
+  const translateY = useSharedValue(0);
+
+  useEffect(() => {
+    translateY.value = withDelay(
+      index * 150,
+      withRepeat(
+        withSequence(
+          withTiming(-6, { duration: 300, easing: Easing.out(Easing.ease) }),
+          withTiming(0, { duration: 300, easing: Easing.in(Easing.ease) }),
+        ),
+        -1,
+        false,
+      ),
+    );
+  }, [index, translateY]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value }],
+  }));
+
+  return (
+    <Animated.View
+      style={[styles.dot, { backgroundColor: color }, animatedStyle]}
+    />
+  );
+}
+
+export function TypingIndicator({ accentColor }: TypingIndicatorProps) {
+  const isDark = useColorScheme() === 'dark';
+  const dotColor = accentColor ?? (isDark ? '#94a3b8' : '#64748b');
+
+  return (
+    <View
+      style={[styles.container, isDark ? styles.containerDark : styles.containerLight]}
+      accessibilityLabel="Agent is typing"
+      accessibilityRole="text"
+    >
+      <Dot index={0} color={dotColor} />
+      <Dot index={1} color={dotColor} />
+      <Dot index={2} color={dotColor} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 18,
+    marginLeft: 12,
+    marginVertical: 4,
+    gap: 4,
+  },
+  containerLight: {
+    backgroundColor: '#f1f5f9',
+  },
+  containerDark: {
+    backgroundColor: '#1e293b',
+  },
+  dot: {
+    width: 7,
+    height: 7,
+    borderRadius: 3.5,
+  },
+});