@parlr/react-native 0.1.0

package/src/components/ParlrChat.tsx

@@ -0,0 +1,863 @@
+// ---------------------------------------------------------------------------
+// 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,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type ListRenderItemInfo,
+} from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import type { ParlrTheme } from '../core/theme';
+import type { ParlrUser, Message } from '../core/types';
+import { useChat } from '../hooks/useChat';
+import { ParlrContext } from '../provider/ParlrContext';
+import { ChatBubble } from './ChatBubble';
+import { EmptyState } from './EmptyState';
+import { TypingIndicator } from './TypingIndicator';
+import { PreChatForm } from './PreChatForm';
+import { SatisfactionSurvey } from './SatisfactionSurvey';
+import { AttachmentPicker } from './AttachmentPicker';
+import type { PickedFile } from './AttachmentPicker';
+import { AttachmentPreview } from './AttachmentPreview';
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface ParlrChatProps {
+  /** Identify the user on mount (optional — can also call `useParlr().identify`). */
+  user?: ParlrUser;
+  /** Existing conversation id. If omitted, a new one is created on first message. */
+  conversationId?: string;
+  /** Back button handler. If provided, a back arrow is shown in the header. */
+  onBack?: () => void;
+  /** Header title. Default: "Support". */
+  headerTitle?: string;
+  /** Input placeholder text. */
+  placeholder?: string;
+  /** Empty state title. */
+  emptyStateTitle?: string;
+  /** Empty state description. */
+  emptyStateDescription?: string;
+  /** Primary accent color for contact bubbles, send button, etc. */
+  accentColor?: string;
+  /** Show the header bar. Default: true. */
+  showHeader?: boolean;
+  /** Show the pre-chat form if user is not identified. Default: false. */
+  showPreChatForm?: boolean;
+  /** Fields for pre-chat form. Default: ['name', 'email']. */
+  preChatFields?: Array<'name' | 'email' | 'phone'>;
+  /** Show CSAT survey after conversation is closed. Default: true. */
+  showSatisfactionSurvey?: boolean;
+  /** Called when conversation is closed. */
+  onConversationClosed?: () => void;
+  /** Bottom safe-area inset the host app applies (default 0). Set this to your bottom inset so the input bar sits flush above the keyboard. */
+  safeAreaBottom?: number;
+}
+
+// ---------------------------------------------------------------------------
+// i18n defaults
+// ---------------------------------------------------------------------------
+
+function getI18n(locale?: string) {
+  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,
+}: {
+  onPress: () => void;
+  disabled: boolean;
+  accentColor: string;
+  theme: ParlrTheme;
+}) {
+  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 (
+    <Pressable
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      disabled={disabled}
+      hitSlop={8}
+      accessibilityRole="button"
+      accessibilityLabel="Send message"
+      accessibilityState={{ disabled }}
+    >
+      <Animated.View
+        style={[
+          styles.sendButton,
+          {
+            backgroundColor: disabled ? theme.colors.border : accentColor,
+          },
+          animatedStyle,
+        ]}
+      >
+        <Text style={[styles.sendIcon, { color: theme.colors.primaryText }]}>{'\u2191'}</Text>
+      </Animated.View>
+    </Pressable>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Header menu (3-dot)
+// ---------------------------------------------------------------------------
+
+function HeaderMenu({
+  visible,
+  onDismiss,
+  onClose,
+  onReopen,
+  isClosed,
+  theme,
+  locale,
+}: {
+  visible: boolean;
+  onDismiss: () => void;
+  onClose: () => void;
+  onReopen: () => void;
+  isClosed: boolean;
+  theme: ParlrTheme;
+  locale?: string;
+}) {
+  const i18n = getI18n(locale);
+  if (!visible) return null;
+
+  return (
+    <Modal transparent animationType="fade" visible={visible} onRequestClose={onDismiss}>
+      <Pressable style={styles.menuBackdrop} onPress={onDismiss}>
+        <View style={[styles.menuContainer, { backgroundColor: theme.colors.surface }]}>
+          <Pressable
+            onPress={isClosed ? onReopen : onClose}
+            style={styles.menuItem}
+            accessibilityRole="button"
+          >
+            <Text style={[styles.menuItemText, { color: theme.colors.text }]}>
+              {isClosed ? i18n.reopenConversation : i18n.closeConversation}
+            </Text>
+          </Pressable>
+        </View>
+      </Pressable>
+    </Modal>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// 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,
+}: ParlrChatProps) {
+  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<PickedFile | null>(null);
+  const [isIdentified, setIsIdentified] = useState(!showPreChatForm || !!user);
+  const [showCSAT, setShowCSAT] = useState(false);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const flatListRef = useRef<FlatList<Message>>(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: NativeSyntheticEvent<NativeScrollEvent>) => {
+    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: string) => {
+      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: ParlrUser) => {
+      await identify(userData);
+      setIsIdentified(true);
+    },
+    [identify],
+  );
+
+  const handleCSATSubmit = useCallback(
+    async (score: number, comment?: string) => {
+      if (api && conversation) {
+        await api.submitRating(conversation.id, score, comment);
+      }
+      setShowCSAT(false);
+    },
+    [api, conversation],
+  );
+
+  const handleCSATDismiss = useCallback(() => {
+    setShowCSAT(false);
+  }, []);
+
+  const handleFilePicked = useCallback((file: PickedFile) => {
+    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,
+    } as unknown as Blob);
+
+    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 }: ListRenderItemInfo<Message>) => (
+      <ChatBubble
+        message={item}
+        accentColor={accentColor}
+        animated={index >= messages.length - 1}
+      />
+    ),
+    [accentColor, messages.length],
+  );
+
+  const keyExtractor = useCallback(
+    (item: Message) => item.clientId ?? item.id,
+    [],
+  );
+
+  // --- Loading state ---------------------------------------------------------
+
+  if (!isReady) {
+    return (
+      <View
+        style={[
+          styles.loadingContainer,
+          { backgroundColor: theme.colors.background },
+        ]}
+      >
+        <ActivityIndicator size="large" color={accentColor} />
+      </View>
+    );
+  }
+
+  // --- Pre-chat form ---------------------------------------------------------
+
+  if (!isIdentified) {
+    return (
+      <View style={[styles.root, { backgroundColor: theme.colors.background }]}>
+        {showHeader && (
+          <View
+            style={[styles.header, { backgroundColor: theme.colors.surface, borderBottomColor: theme.colors.border }]}
+            accessibilityRole="header"
+          >
+            {onBack && (
+              <Pressable
+                onPress={onBack}
+                style={styles.backButton}
+                hitSlop={12}
+                accessibilityRole="button"
+                accessibilityLabel="Go back"
+              >
+                <Text style={[styles.backArrow, { color: theme.colors.text }]}>
+                  {'\u2190'}
+                </Text>
+              </Pressable>
+            )}
+            <View style={styles.headerCenter}>
+              <Text style={[styles.headerTitle, { color: theme.colors.text }]} numberOfLines={1}>
+                {headerTitle ?? i18n.headerTitle}
+              </Text>
+            </View>
+            {onBack && <View style={styles.backButton} />}
+          </View>
+        )}
+        <PreChatForm
+          onSubmit={handlePreChatSubmit}
+          fields={preChatFields}
+          accentColor={accentColor}
+          locale={config.locale}
+        />
+      </View>
+    );
+  }
+
+  // --- Render ----------------------------------------------------------------
+
+  const hasMessages = messages.length > 0;
+
+  return (
+    <View
+      style={[
+        styles.root,
+        {
+          backgroundColor: theme.colors.background,
+          paddingBottom: keyboardHeight > 0 ? keyboardHeight : 0,
+        },
+      ]}
+    >
+      {/* ----- Header ----- */}
+      {showHeader && (
+        <View
+          style={[styles.header, { backgroundColor: theme.colors.surface, borderBottomColor: theme.colors.border }]}
+          accessibilityRole="header"
+        >
+          {onBack && (
+            <Pressable
+              onPress={onBack}
+              style={styles.backButton}
+              hitSlop={12}
+              accessibilityRole="button"
+              accessibilityLabel="Go back"
+            >
+              <Text style={[styles.backArrow, { color: theme.colors.text }]}>
+                {'\u2190'}
+              </Text>
+            </Pressable>
+          )}
+
+          <View style={styles.headerCenter}>
+            <Text
+              style={[styles.headerTitle, { color: theme.colors.text }]}
+              numberOfLines={1}
+            >
+              {headerTitle ?? i18n.headerTitle}
+            </Text>
+            <View style={styles.statusRow}>
+              <View
+                style={[
+                  styles.statusDot,
+                  {
+                    backgroundColor: effectiveConnected ? theme.colors.success : theme.colors.textSecondary,
+                  },
+                ]}
+              />
+              <Text style={[styles.statusText, { color: theme.colors.textSecondary }]}>
+                {effectiveConnected ? i18n.online : i18n.offline}
+              </Text>
+            </View>
+          </View>
+
+          {/* Menu button (3 dots) */}
+          {conversationId && (
+            <Pressable
+              onPress={() => setMenuVisible(true)}
+              style={styles.menuButton}
+              hitSlop={12}
+              accessibilityRole="button"
+              accessibilityLabel="Menu"
+            >
+              <Text style={[styles.menuDots, { color: theme.colors.text }]}>
+                {'\u22ee'}
+              </Text>
+            </Pressable>
+          )}
+
+          {/* Spacer when no menu and back button exists */}
+          {!conversationId && onBack && <View style={styles.backButton} />}
+        </View>
+      )}
+
+      {/* ----- Header Menu ----- */}
+      <HeaderMenu
+        visible={menuVisible}
+        onDismiss={() => setMenuVisible(false)}
+        onClose={handleCloseConversation}
+        onReopen={handleReopenConversation}
+        isClosed={isClosed}
+        theme={theme}
+        locale={config.locale}
+      />
+
+      {/* ----- Messages or empty state ----- */}
+      {hasMessages ? (
+        <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 ? (
+              <ActivityIndicator
+                size="small"
+                color={accentColor}
+                style={styles.loadingMore}
+              />
+            ) : null
+          }
+          ListFooterComponent={
+            <>
+              {agentTyping && <TypingIndicator accentColor={accentColor} />}
+              {showCSAT && (
+                <SatisfactionSurvey
+                  onSubmit={handleCSATSubmit}
+                  onDismiss={handleCSATDismiss}
+                  accentColor={accentColor}
+                  locale={config.locale}
+                />
+              )}
+            </>
+          }
+          onContentSizeChange={() => {
+            if (isNearBottomRef.current) {
+              flatListRef.current?.scrollToEnd({ animated: true });
+            }
+          }}
+        />
+      ) : (
+        <EmptyState
+          title={emptyStateTitle}
+          description={emptyStateDescription}
+          accentColor={accentColor}
+          locale={config.locale}
+        />
+      )}
+
+      {/* ----- Closed banner ----- */}
+      {isClosed && !showCSAT && (
+        <View style={[styles.closedBanner, { backgroundColor: theme.colors.surface }]}>
+          <Text style={[styles.closedText, { color: theme.colors.textSecondary }]}>
+            {i18n.conversationClosed}
+          </Text>
+        </View>
+      )}
+
+      {/* ----- Attachment preview ----- */}
+      {pickedFile && (
+        <AttachmentPreview
+          file={pickedFile}
+          onRemove={() => setPickedFile(null)}
+          onSend={handleSendAttachment}
+          accentColor={accentColor}
+          locale={config.locale}
+        />
+      )}
+
+      {/* ----- Attachment picker ----- */}
+      {showAttachmentPicker && (
+        <AttachmentPicker
+          onFilePicked={handleFilePicked}
+          onDismiss={() => setShowAttachmentPicker(false)}
+          accentColor={accentColor}
+          locale={config.locale}
+        />
+      )}
+
+      {/* ----- Input bar ----- */}
+      {!isClosed && !pickedFile && !showAttachmentPicker && (
+        <View
+          style={[
+            styles.inputBar,
+            {
+              backgroundColor: theme.colors.surface,
+              borderTopColor: theme.colors.border,
+              paddingBottom: keyboardHeight > 0 ? 10 : 10 + safeAreaBottom,
+            },
+          ]}
+        >
+          {/* Attachment button */}
+          <Pressable
+            onPress={() => setShowAttachmentPicker(true)}
+            style={[styles.attachButton, { backgroundColor: theme.colors.surface }]}
+            hitSlop={8}
+            accessibilityRole="button"
+            accessibilityLabel="Add attachment"
+          >
+            <Text style={[styles.attachIcon, { color: theme.colors.textSecondary }]}>+</Text>
+          </Pressable>
+
+          <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
+            maxLength={4000}
+            returnKeyType="default"
+            blurOnSubmit={false}
+            accessibilityLabel="Message input"
+            accessibilityHint="Type a message to send"
+          />
+
+          <SendButton
+            onPress={handleSend}
+            disabled={inputText.trim().length === 0}
+            accentColor={accentColor}
+            theme={theme}
+          />
+        </View>
+      )}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// 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',
+  },
+});