@parlr/react-native 0.1.0

package/src/components/ChatBubble.tsx

@@ -0,0 +1,424 @@
+// ---------------------------------------------------------------------------
+// Parlr React Native SDK - Chat Bubble
+// ---------------------------------------------------------------------------
+//
+// Renders a single message bubble. Agent messages appear on the left with an
+// avatar; contact messages appear on the right with the accent color.
+// Supports text, images, file attachments, and read receipts.
+// ---------------------------------------------------------------------------
+
+import React, { useContext, useState } from 'react';
+import {
+  Dimensions,
+  Image,
+  Linking,
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import Animated, { FadeInUp } from 'react-native-reanimated';
+import type { ParlrTheme } from '../core/theme';
+import type { Attachment, Message } from '../core/types';
+import { ParlrContext } from '../provider/ParlrContext';
+import { RichMessage, tryParseRichContent } from './RichMessage';
+import type { RichAction } from './RichMessage';
+
+interface ChatBubbleProps {
+  message: Message;
+  accentColor?: string;
+  /** If true, apply the entrance animation (for newly-appended messages). */
+  animated?: boolean;
+  /** Called when a rich message action is triggered. */
+  onRichAction?: (action: RichAction) => void;
+}
+
+function formatTime(iso: string): string {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  } catch {
+    return '';
+  }
+}
+
+function AgentAvatar({ name, theme }: { name?: string; theme: ParlrTheme }) {
+  const initial = (name ?? 'A').charAt(0).toUpperCase();
+  return (
+    <View
+      style={[styles.avatar, { backgroundColor: theme.colors.surfaceDark }]}
+      accessibilityLabel={`${name ?? 'Agent'} avatar`}
+    >
+      <Text style={[styles.avatarText, { color: theme.colors.textSecondary }]}>{initial}</Text>
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Read receipt indicators
+// ---------------------------------------------------------------------------
+
+function ReadReceipt({ status }: { status?: Message['status'] }) {
+  if (!status || status === 'failed') return null;
+
+  if (status === 'sending') {
+    return <Text style={styles.statusIndicator}> ...</Text>;
+  }
+
+  if (status === 'sent') {
+    return <Text style={styles.checkmark}> {'\u2713'}</Text>;
+  }
+
+  if (status === 'read') {
+    return <Text style={styles.checkmarkRead}> {'\u2713\u2713'}</Text>;
+  }
+
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Attachment renderers
+// ---------------------------------------------------------------------------
+
+function isImageAttachment(attachment: Attachment): boolean {
+  return attachment.contentType.startsWith('image/');
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function ImageAttachmentView({ attachment }: { attachment: Attachment }) {
+  const [visible, setVisible] = useState(false);
+  const screenWidth = Dimensions.get('window').width;
+  const screenHeight = Dimensions.get('window').height;
+
+  return (
+    <>
+      <Pressable
+        onPress={() => setVisible(true)}
+        accessibilityLabel={attachment.name}
+        accessibilityRole="image"
+      >
+        <Image
+          source={{ uri: attachment.url }}
+          style={styles.attachmentImage}
+          resizeMode="cover"
+        />
+      </Pressable>
+      <Modal visible={visible} transparent animationType="fade" onRequestClose={() => setVisible(false)}>
+        <Pressable style={styles.imageModalBackdrop} onPress={() => setVisible(false)}>
+          <Image
+            source={{ uri: attachment.url }}
+            style={{ width: screenWidth, height: screenHeight * 0.8 }}
+            resizeMode="contain"
+          />
+          <Text style={styles.imageModalClose}>{'\u2715'}</Text>
+        </Pressable>
+      </Modal>
+    </>
+  );
+}
+
+function AttachmentView({
+  attachment,
+  isAgent,
+  isDark,
+}: {
+  attachment: Attachment;
+  isAgent: boolean;
+  isDark: boolean;
+}) {
+  if (isImageAttachment(attachment)) {
+    return <ImageAttachmentView attachment={attachment} />;
+  }
+
+  return (
+    <Pressable
+      onPress={() => Linking.openURL(attachment.url).catch(() => {})}
+      style={[styles.fileAttachment, isDark && styles.fileAttachmentDark]}
+      accessibilityRole="link"
+      accessibilityLabel={`${attachment.name}, ${formatFileSize(attachment.size)}`}
+    >
+      <Text style={styles.fileIcon}>{'\ud83d\udcc4'}</Text>
+      <View style={styles.fileDetails}>
+        <Text
+          style={[
+            styles.fileName,
+            isAgent
+              ? [styles.fileNameAgent, isDark && styles.fileNameAgentDark]
+              : styles.fileNameContact,
+          ]}
+          numberOfLines={1}
+        >
+          {attachment.name}
+        </Text>
+        <Text
+          style={[
+            styles.fileSizeText,
+            isAgent
+              ? [styles.fileSizeAgent, isDark && styles.fileSizeAgentDark]
+              : styles.fileSizeContact,
+          ]}
+        >
+          {formatFileSize(attachment.size)}
+        </Text>
+      </View>
+    </Pressable>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export function ChatBubble({
+  message,
+  accentColor,
+  animated = false,
+  onRichAction,
+}: ChatBubbleProps) {
+  const { theme } = useContext(ParlrContext);
+  const isAgent = message.senderType === 'agent';
+  const accent = accentColor ?? theme.colors.primary;
+  const isFailed = message.status === 'failed';
+
+  const Wrapper = animated ? Animated.View : View;
+  const animationProps = animated
+    ? { entering: FadeInUp.duration(250).springify() }
+    : {};
+
+  const senderLabel = isAgent ? (message.senderName ?? 'Agent') : 'You';
+  const timeLabel = formatTime(message.createdAt);
+  const statusLabel = isFailed ? ', failed to send' : '';
+
+  const hasAttachments = message.attachments && message.attachments.length > 0;
+  const hasImageAttachments = hasAttachments && message.attachments!.some(isImageAttachment);
+  const richContent = message.metadata ? tryParseRichContent(message.metadata as Record<string, unknown>) : null;
+
+  return (
+    <Wrapper
+      {...animationProps}
+      style={[styles.row, isAgent ? styles.rowAgent : styles.rowContact]}
+      accessibilityLabel={`${senderLabel}: ${message.content}, ${timeLabel}${statusLabel}`}
+      accessibilityRole="text"
+    >
+      {isAgent && <AgentAvatar name={message.senderName} theme={theme} />}
+
+      <View
+        style={[
+          styles.bubble,
+          { borderRadius: theme.borderRadius.bubble },
+          isAgent
+            ? { backgroundColor: theme.colors.agentBubble, borderBottomLeftRadius: 6 }
+            : { backgroundColor: theme.colors.contactBubble, borderBottomRightRadius: 6 },
+          isFailed && styles.bubbleFailed,
+        ]}
+      >
+        {isAgent && message.senderName && (
+          <Text
+            style={[styles.senderName, { color: theme.colors.textSecondary }]}
+            numberOfLines={1}
+          >
+            {message.senderName}
+          </Text>
+        )}
+
+        {/* Attachments */}
+        {hasAttachments && (
+          <View style={styles.attachmentsContainer}>
+            {message.attachments!.map((att) => (
+              <AttachmentView
+                key={att.id}
+                attachment={att}
+                isAgent={isAgent}
+                isDark={theme.colors.background === '#111827' || theme.colors.background.toLowerCase() < '#888888'}
+              />
+            ))}
+          </View>
+        )}
+
+        {/* Text content — hidden when the message is just a filename for an image */}
+        {message.content.length > 0 && !hasImageAttachments && (
+          <Text
+            style={[
+              styles.content,
+              { color: isAgent ? theme.colors.agentText : theme.colors.contactText },
+            ]}
+          >
+            {message.content}
+          </Text>
+        )}
+
+        {/* Rich content */}
+        {richContent && (
+          <RichMessage
+            content={richContent}
+            onAction={onRichAction}
+            accentColor={accent}
+          />
+        )}
+
+        <View style={styles.meta}>
+          <Text
+            style={[
+              styles.time,
+              { color: isAgent ? theme.colors.textSecondary : 'rgba(255, 255, 255, 0.7)' },
+            ]}
+          >
+            {formatTime(message.createdAt)}
+          </Text>
+
+          {/* Read receipts for contact messages */}
+          {!isAgent && <ReadReceipt status={message.status} />}
+
+          {isFailed && (
+            <Text style={[styles.failedIndicator, { color: theme.colors.error }]}> !</Text>
+          )}
+        </View>
+      </View>
+    </Wrapper>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    marginVertical: 3,
+    paddingHorizontal: 12,
+  },
+  rowAgent: {
+    justifyContent: 'flex-start',
+    alignItems: 'flex-end',
+  },
+  rowContact: {
+    justifyContent: 'flex-end',
+    alignItems: 'flex-end',
+  },
+  avatar: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 8,
+    marginBottom: 2,
+  },
+  avatarText: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  bubble: {
+    maxWidth: '75%',
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+  },
+  bubbleFailed: {
+    opacity: 0.6,
+  },
+  senderName: {
+    fontSize: 12,
+    fontWeight: '600',
+    marginBottom: 3,
+  },
+  content: {
+    fontSize: 15,
+    lineHeight: 21,
+  },
+  meta: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 4,
+    alignSelf: 'flex-end',
+  },
+  time: {
+    fontSize: 11,
+  },
+  statusIndicator: {
+    fontSize: 11,
+    color: 'rgba(255, 255, 255, 0.7)',
+  },
+  failedIndicator: {
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  checkmark: {
+    fontSize: 11,
+    color: 'rgba(255, 255, 255, 0.7)',
+  },
+  checkmarkRead: {
+    fontSize: 11,
+    color: '#22c55e',
+  },
+
+  // Attachments
+  attachmentsContainer: {
+    marginBottom: 6,
+    gap: 4,
+  },
+  attachmentImage: {
+    width: 220,
+    height: 165,
+    borderRadius: 10,
+  },
+  imageModalBackdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.95)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  imageModalClose: {
+    position: 'absolute',
+    top: 60,
+    right: 20,
+    color: '#ffffff',
+    fontSize: 28,
+    fontWeight: '600',
+  },
+  fileAttachment: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.05)',
+    borderRadius: 8,
+    padding: 8,
+  },
+  fileAttachmentDark: {
+    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+  },
+  fileIcon: {
+    fontSize: 24,
+    marginRight: 8,
+  },
+  fileDetails: {
+    flex: 1,
+  },
+  fileName: {
+    fontSize: 13,
+    fontWeight: '500',
+  },
+  fileNameAgent: {
+    color: '#0f172a',
+  },
+  fileNameAgentDark: {
+    color: '#e2e8f0',
+  },
+  fileNameContact: {
+    color: '#ffffff',
+  },
+  fileSizeText: {
+    fontSize: 11,
+    marginTop: 1,
+  },
+  fileSizeAgent: {
+    color: '#94a3b8',
+  },
+  fileSizeAgentDark: {
+    color: '#64748b',
+  },
+  fileSizeContact: {
+    color: 'rgba(255, 255, 255, 0.7)',
+  },
+});

package/src/components/EmptyState.tsx

@@ -0,0 +1,118 @@
+// ---------------------------------------------------------------------------
+// Parlr React Native SDK - Empty State
+// ---------------------------------------------------------------------------
+//
+// Displayed when the user hasn't started a conversation yet.
+// Shows a friendly welcome message with a chat icon.
+// ---------------------------------------------------------------------------
+
+import React from 'react';
+import { StyleSheet, Text, View, useColorScheme } from 'react-native';
+
+interface EmptyStateProps {
+  title?: string;
+  description?: string;
+  accentColor?: string;
+  locale?: string;
+}
+
+const DEFAULTS_FR = {
+  title: 'Besoin d\u2019aide ?',
+  description:
+    'Notre equipe est la pour vous aider. Envoyez-nous un message et nous vous repondrons au plus vite.',
+};
+
+const DEFAULTS_EN = {
+  title: 'Need help?',
+  description:
+    'Our team is here to help. Send us a message and we\u2019ll get back to you as soon as possible.',
+};
+
+function getDefaults(locale?: string) {
+  if (locale?.startsWith('en')) return DEFAULTS_EN;
+  return DEFAULTS_FR;
+}
+
+export function EmptyState({
+  title,
+  description,
+  accentColor,
+  locale,
+}: EmptyStateProps) {
+  const isDark = useColorScheme() === 'dark';
+  const defaults = getDefaults(locale);
+  const accent = accentColor ?? '#6366f1';
+
+  return (
+    <View style={styles.container}>
+      {/* Chat bubble icon */}
+      <View
+        style={[styles.iconContainer, { backgroundColor: accent + '18' }]}
+        accessibilityLabel="Chat icon"
+        accessibilityRole="image"
+      >
+        <View style={[styles.iconBubble, { backgroundColor: accent }]}>
+          <Text style={styles.iconText}>...</Text>
+        </View>
+      </View>
+
+      <Text style={[styles.title, isDark && styles.titleDark]}>
+        {title ?? defaults.title}
+      </Text>
+
+      <Text style={[styles.description, isDark && styles.descriptionDark]}>
+        {description ?? defaults.description}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 40,
+  },
+  iconContainer: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  iconBubble: {
+    width: 44,
+    height: 36,
+    borderRadius: 18,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconText: {
+    color: '#ffffff',
+    fontSize: 20,
+    fontWeight: '700',
+    marginTop: -4,
+    letterSpacing: 2,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: '700',
+    color: '#0f172a',
+    textAlign: 'center',
+    marginBottom: 10,
+  },
+  titleDark: {
+    color: '#f1f5f9',
+  },
+  description: {
+    fontSize: 15,
+    lineHeight: 22,
+    color: '#64748b',
+    textAlign: 'center',
+  },
+  descriptionDark: {
+    color: '#94a3b8',
+  },
+});