rn-erxes-sdk 0.1.23 → 0.1.25

package/lib/commonjs/screen/conversation/ConversationDetail.js

@@ -13,15 +13,66 @@ var _InputTools = _interopRequireDefault(require("../../components/InputTools"))
 var _mutation = require("../../graphql/mutation");
 var _subscription = require("../../graphql/subscription");
 var _utils = require("../../utils/utils");
+var _messages = require("../../utils/messages");
 var _Context = _interopRequireDefault(require("../../context/Context"));
 var _asyncStorage = _interopRequireDefault(require("@react-native-async-storage/async-storage"));
+var _theme = require("../../theme");
+var _Icons = require("../../components/Icons");
+var _DateSeparator = _interopRequireDefault(require("../../components/conversation/DateSeparator"));
+var _WelcomeMessage = _interopRequireDefault(require("../../components/conversation/WelcomeMessage"));
+var _TypingStatus = _interopRequireDefault(require("../../components/conversation/TypingStatus"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/* eslint-disable react-native/no-inline-styles */
-
+const hasUserDetails = user => {
+  var _user$details, _user$details2;
+  return Boolean((user === null || user === void 0 ? void 0 : (_user$details = user.details) === null || _user$details === void 0 ? void 0 : _user$details.fullName) || (user === null || user === void 0 ? void 0 : (_user$details2 = user.details) === null || _user$details2 === void 0 ? void 0 : _user$details2.avatar));
+};
+const mergeUserDetails = (baseUser, incomingUser) => {
+  if (!baseUser && !incomingUser) {
+    return incomingUser;
+  }
+  return {
+    ...(baseUser || {}),
+    ...(incomingUser || {}),
+    details: {
+      ...((baseUser === null || baseUser === void 0 ? void 0 : baseUser.details) || {}),
+      ...((incomingUser === null || incomingUser === void 0 ? void 0 : incomingUser.details) || {})
+    }
+  };
+};
+const hydrateIncomingMessageUser = (message, participants) => {
+  if (message !== null && message !== void 0 && message.customerId || hasUserDetails(message === null || message === void 0 ? void 0 : message.user)) {
+    return message;
+  }
+  const participant = participants.find(user => {
+    var _message$user;
+    return (user === null || user === void 0 ? void 0 : user._id) === (message === null || message === void 0 ? void 0 : (_message$user = message.user) === null || _message$user === void 0 ? void 0 : _message$user._id);
+  }) || (participants.length === 1 ? participants[0] : null);
+  if (!participant) {
+    return message;
+  }
+  return {
+    ...message,
+    user: mergeUserDetails(participant, message === null || message === void 0 ? void 0 : message.user)
+  };
+};
+const mergeParticipantFromMessage = (participants, message) => {
+  if (message !== null && message !== void 0 && message.customerId) {
+    return participants;
+  }
+  const incomingUser = message === null || message === void 0 ? void 0 : message.user;
+  if (!(incomingUser !== null && incomingUser !== void 0 && incomingUser._id) || !hasUserDetails(incomingUser)) {
+    return participants;
+  }
+  const existingParticipant = participants.find(user => (user === null || user === void 0 ? void 0 : user._id) === incomingUser._id);
+  if (!existingParticipant) {
+    return [...participants, incomingUser];
+  }
+  return participants.map(user => (user === null || user === void 0 ? void 0 : user._id) === incomingUser._id ? mergeUserDetails(user, incomingUser) : user);
+};
 const ConversationDetail = () => {
-  var _data$widgetsConversa5;
+  var _data$widgetsConversa7, _data$widgetsConversa8, _data$widgetsConversa9;
   const value = (0, _react.useContext)(_Context.default);
   const {
     brand,
@@ -30,16 +81,23 @@ const ConversationDetail = () => {
     integrationId,
     customerId,
     visitorId,
+    greetings,
+    setConversationId,
+    markConversationRead,
     //
-    backIcon,
     sendIcon,
     //
     subDomain
   } = value;
   const [messages, setMessages] = _react.default.useState([]);
+  const [isBotTyping, setIsBotTyping] = (0, _react.useState)(false);
+  const [sending, setSending] = (0, _react.useState)(false);
+  const sendingRef = _react.default.useRef(false);
+  const client = (0, _client.useApolloClient)();
   const {
     data,
     loading,
+    refetch,
     subscribeToMore
   } = (0, _client.useQuery)(_query.widgetsConversationDetail, {
     variables: {
@@ -50,6 +108,9 @@ const ConversationDetail = () => {
     skip: !conversationId
   });
   (0, _react.useEffect)(() => {
+    if (!conversationId) {
+      return;
+    }
     const unSubsToMore = subscribeToMore({
       document: _subscription.conversationMessageInserted,
       variables: {
@@ -59,250 +120,357 @@ const ConversationDetail = () => {
         let {
           subscriptionData
         } = _ref;
+        if (!prev || !subscriptionData.data) {
+          return prev;
+        }
         const message = subscriptionData.data.conversationMessageInserted;
+        if (!message) {
+          return prev;
+        }
         const tempWidgetsConversationDetail = prev.widgetsConversationDetail || {};
         const tempMessages = (tempWidgetsConversationDetail === null || tempWidgetsConversationDetail === void 0 ? void 0 : tempWidgetsConversationDetail.messages) || [];
+        const tempParticipants = (tempWidgetsConversationDetail === null || tempWidgetsConversationDetail === void 0 ? void 0 : tempWidgetsConversationDetail.participatedUsers) || [];
+        const existingParticipant = tempParticipants.find(user => {
+          var _message$user2;
+          return (user === null || user === void 0 ? void 0 : user._id) === (message === null || message === void 0 ? void 0 : (_message$user2 = message.user) === null || _message$user2 === void 0 ? void 0 : _message$user2._id);
+        });
+        const messageUser = mergeUserDetails(existingParticipant, message === null || message === void 0 ? void 0 : message.user);
+        const hydratedMessage = {
+          ...message,
+          user: messageUser
+        };
+        if (!message.customerId && !hasUserDetails(messageUser)) {
+          setTimeout(() => refetch(), 0);
+        }
+        const nextParticipants = mergeParticipantFromMessage(tempParticipants, hydratedMessage);
 
         // check whether or not already inserted
-        const prevEntry = tempMessages.find(m => m._id === (message === null || message === void 0 ? void 0 : message._id));
+        const prevEntry = tempMessages.find(m => m._id === (hydratedMessage === null || hydratedMessage === void 0 ? void 0 : hydratedMessage._id));
         if (prevEntry) {
-          return prev;
+          return {
+            ...prev,
+            widgetsConversationDetail: {
+              ...tempWidgetsConversationDetail,
+              participatedUsers: nextParticipants
+            }
+          };
         }
 
         // do not show internal or bot messages
-        if (message.internal || message.fromBot) {
+        if (hydratedMessage.internal || hydratedMessage.fromBot) {
           return prev;
         }
+        if (!hydratedMessage.customerId) {
+          setTimeout(() => markConversationRead === null || markConversationRead === void 0 ? void 0 : markConversationRead(conversationId), 0);
+        }
 
         // add new message to messages list
         const next = {
           ...prev,
           widgetsConversationDetail: {
             ...tempWidgetsConversationDetail,
-            messages: [...tempMessages, message]
+            messages: [...tempMessages, hydratedMessage],
+            participatedUsers: nextParticipants
           }
         };
         return next;
       }
     });
     return () => {
-      unSubsToMore;
+      unSubsToMore();
     };
-  }, [conversationId, subscribeToMore]);
+  }, [conversationId, markConversationRead, refetch, subscribeToMore]);
   (0, _react.useEffect)(() => {
     var _data$widgetsConversa;
     if (data !== null && data !== void 0 && (_data$widgetsConversa = data.widgetsConversationDetail) !== null && _data$widgetsConversa !== void 0 && _data$widgetsConversa.messages) {
-      var _data$widgetsConversa2, _data$widgetsConversa3, _data$widgetsConversa4;
-      let reversed = data === null || data === void 0 ? void 0 : (_data$widgetsConversa2 = data.widgetsConversationDetail) === null || _data$widgetsConversa2 === void 0 ? void 0 : (_data$widgetsConversa3 = _data$widgetsConversa2.messages) === null || _data$widgetsConversa3 === void 0 ? void 0 : (_data$widgetsConversa4 = _data$widgetsConversa3.slice()) === null || _data$widgetsConversa4 === void 0 ? void 0 : _data$widgetsConversa4.reverse();
+      var _data$widgetsConversa2, _data$widgetsConversa3, _data$widgetsConversa4, _data$widgetsConversa5, _data$widgetsConversa6;
+      const participants = (data === null || data === void 0 ? void 0 : (_data$widgetsConversa2 = data.widgetsConversationDetail) === null || _data$widgetsConversa2 === void 0 ? void 0 : _data$widgetsConversa2.participatedUsers) || [];
+      let reversed = data === null || data === void 0 ? void 0 : (_data$widgetsConversa3 = data.widgetsConversationDetail) === null || _data$widgetsConversa3 === void 0 ? void 0 : (_data$widgetsConversa4 = _data$widgetsConversa3.messages) === null || _data$widgetsConversa4 === void 0 ? void 0 : (_data$widgetsConversa5 = _data$widgetsConversa4.slice()) === null || _data$widgetsConversa5 === void 0 ? void 0 : (_data$widgetsConversa6 = _data$widgetsConversa5.reverse()) === null || _data$widgetsConversa6 === void 0 ? void 0 : _data$widgetsConversa6.map(message => hydrateIncomingMessageUser(message, participants));
       setMessages(reversed);
     }
   }, [data]);
+
+  // Bot typing indicator — ported from the web messenger useConversationDetail.
+  (0, _react.useEffect)(() => {
+    if (!conversationId) {
+      return;
+    }
+    const subscription = client.subscribe({
+      query: _subscription.conversationBotTypingStatus,
+      variables: {
+        _id: conversationId
+      },
+      fetchPolicy: 'network-only'
+    }).subscribe({
+      next(_ref2) {
+        let {
+          data: typing
+        } = _ref2;
+        const status = typing === null || typing === void 0 ? void 0 : typing.conversationBotTypingStatus;
+        setIsBotTyping(typeof status === 'object' && status !== null ? Boolean(status.typing) : Boolean(status));
+      },
+      error() {
+        setIsBotTyping(false);
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [conversationId, client]);
+
+  // Build grouped rows (welcome → date separators → grouped messages) in
+  // chronological order, then reverse for the inverted FlatList.
+  const invertedRows = (0, _react.useMemo)(() => {
+    var _greetings$messages;
+    const chronological = [...messages].reverse();
+    const rows = (0, _messages.buildChatRows)(chronological, greetings === null || greetings === void 0 ? void 0 : (_greetings$messages = greetings.messages) === null || _greetings$messages === void 0 ? void 0 : _greetings$messages.welcome);
+    return [...rows].reverse();
+  }, [messages, greetings]);
   const [sendMutation] = (0, _client.useMutation)(_mutation.widgetsInsertMessage);
-  const onSend = text => {
+  (0, _react.useEffect)(() => {
+    if (!conversationId) {
+      return;
+    }
+    markConversationRead === null || markConversationRead === void 0 ? void 0 : markConversationRead(conversationId);
+  }, [conversationId, markConversationRead]);
+  const onSend = (text, attachments) => {
+    if (sendingRef.current) {
+      return;
+    }
+    sendingRef.current = true;
+    setSending(true);
     sendMutation({
       variables: {
         integrationId,
         customerId,
         visitorId,
-        conversationId,
+        conversationId: conversationId || null,
         contentType: 'text',
-        message: text
+        message: text,
+        attachments: attachments && attachments.length > 0 ? attachments : undefined
       }
     }).then(res => {
       if (res.errors) {
         return console.log(res.errors);
       }
-      if (res.data.widgetsInsertMessage) {
-        let shouldAdd = (messages === null || messages === void 0 ? void 0 : messages.length) === 0;
-        if (!shouldAdd) {
-          shouldAdd = res.data.widgetsInsertMessage._id !== messages[0]._id;
-        }
-        if (shouldAdd) {
-          const newArray = [res.data.widgetsInsertMessage, ...messages];
-          setMessages(newArray);
+      const insertedMessage = res.data.widgetsInsertMessage;
+      if (insertedMessage) {
+        const nextConversationId = insertedMessage.conversationId;
+        if (nextConversationId && nextConversationId !== conversationId) {
+          _asyncStorage.default.setItem('conversationId', nextConversationId);
+          setConversationId(nextConversationId);
         }
+        setMessages(prevMessages => {
+          const alreadyExists = prevMessages.some(message => message._id === insertedMessage._id);
+          return alreadyExists ? prevMessages : [insertedMessage, ...prevMessages];
+        });
       }
     }).catch(err => {
       console.log(err);
+    }).finally(() => {
+      sendingRef.current = false;
+      setSending(false);
     });
   };
   if (loading) {
     return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center'
-      }
+      style: styles.fullCenter
     }, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
-      color: '#686868',
+      color: bgColor,
       size: 'large'
     }));
   }
-  const renderItem = _ref2 => {
+  const renderItem = _ref3 => {
     let {
       item
-    } = _ref2;
+    } = _ref3;
+    if (item.type === 'welcome') {
+      return /*#__PURE__*/_react.default.createElement(_WelcomeMessage.default, {
+        content: item.content
+      });
+    }
+    if (item.type === 'date') {
+      return /*#__PURE__*/_react.default.createElement(_DateSeparator.default, {
+        label: item.label
+      });
+    }
     return /*#__PURE__*/_react.default.createElement(_Message.default, {
-      item: item,
-      bgColor: bgColor
+      item: item.item,
+      bgColor: bgColor,
+      isFirstInGroup: item.isFirstInGroup,
+      isLastInGroup: item.isLastInGroup
     });
   };
   const renderContent = () => {
-    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: {
-        flex: 1
-      }
+    return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableWithoutFeedback, {
+      onPress: () => _reactNative.Keyboard.dismiss()
     }, /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
       contentContainerStyle: styles.contentStyle,
       showsVerticalScrollIndicator: false,
-      data: messages,
-      keyExtractor: item => item._id,
+      data: invertedRows,
+      keyExtractor: item => item.id,
       onEndReachedThreshold: 0.2,
       renderItem: renderItem,
       ItemSeparatorComponent: () => null,
+      keyboardShouldPersistTaps: "handled",
       inverted: true
     }));
   };
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flex: 1
-    }
+    style: styles.root
   }, /*#__PURE__*/_react.default.createElement(Header, {
     brand: brand,
     bgColor: bgColor,
-    users: data === null || data === void 0 ? void 0 : (_data$widgetsConversa5 = data.widgetsConversationDetail) === null || _data$widgetsConversa5 === void 0 ? void 0 : _data$widgetsConversa5.participatedUsers,
-    backIcon: backIcon,
+    users: data === null || data === void 0 ? void 0 : (_data$widgetsConversa7 = data.widgetsConversationDetail) === null || _data$widgetsConversa7 === void 0 ? void 0 : _data$widgetsConversa7.participatedUsers,
+    isOnline: data === null || data === void 0 ? void 0 : (_data$widgetsConversa8 = data.widgetsConversationDetail) === null || _data$widgetsConversa8 === void 0 ? void 0 : _data$widgetsConversa8.isOnline,
     subDomain: subDomain
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      backgroundColor: 'rgba(215,215,215,.7)',
-      flex: 1
-    }
-  }, renderContent(), /*#__PURE__*/_react.default.createElement(_reactNative.KeyboardAvoidingView, {
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.KeyboardAvoidingView, {
+    style: styles.chatArea,
     behavior: _reactNative.Platform.OS === 'ios' ? 'padding' : undefined,
-    keyboardVerticalOffset: 100
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableWithoutFeedback, {
-    onPress: () => _reactNative.Keyboard.dismiss()
-  }, /*#__PURE__*/_react.default.createElement(_InputTools.default, {
+    keyboardVerticalOffset: _reactNative.Platform.OS === 'ios' ? 0 : 0
+  }, renderContent(), isBotTyping ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.typingWrap
+  }, /*#__PURE__*/_react.default.createElement(_TypingStatus.default, null)) : null, /*#__PURE__*/_react.default.createElement(_InputTools.default, {
     onSend: onSend,
     bgColor: bgColor,
-    sendIcon: sendIcon
-  })))));
+    sendIcon: sendIcon,
+    subDomain: subDomain,
+    sending: sending,
+    persistentMenus: (data === null || data === void 0 ? void 0 : (_data$widgetsConversa9 = data.widgetsConversationDetail) === null || _data$widgetsConversa9 === void 0 ? void 0 : _data$widgetsConversa9.persistentMenus) || (greetings === null || greetings === void 0 ? void 0 : greetings.persistentMenus)
+  })));
 };
 var _default = ConversationDetail;
 exports.default = _default;
 const Header = props => {
+  var _agent$details, _agent$details2;
   const {
     brand,
     bgColor,
     users,
-    backIcon,
+    isOnline,
     subDomain
   } = props;
   const value = (0, _react.useContext)(_Context.default);
   const {
     setConversationId
   } = value;
-  if ((users === null || users === void 0 ? void 0 : users.length) > 0) {
-    var _users$, _users$$details, _users$3, _users$3$details;
-    let source;
-    if ((_users$ = users[0]) !== null && _users$ !== void 0 && (_users$$details = _users$.details) !== null && _users$$details !== void 0 && _users$$details.avatar) {
-      var _users$2, _users$2$details;
-      source = {
-        uri: (0, _utils.getAttachmentUrl)((_users$2 = users[0]) === null || _users$2 === void 0 ? void 0 : (_users$2$details = _users$2.details) === null || _users$2$details === void 0 ? void 0 : _users$2$details.avatar, subDomain)
-      };
-    } else {
-      source = require('../../assets/images/avatar.png');
-    }
-    return /*#__PURE__*/_react.default.createElement(_reactNative.SafeAreaView, {
-      style: {
-        backgroundColor: bgColor
-      }
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingBottom: 20
-      }
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-      onPress: () => {
-        _asyncStorage.default.removeItem('conversationId');
-        setConversationId(null);
-      },
-      style: [styles.backStyle, {
-        backgroundColor: '#2F1F69'
-      }]
-    }, backIcon), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: [styles.title, {
-        marginLeft: 10,
-        alignItems: 'center',
-        flex: 1
-      }]
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
-      source: source,
-      style: styles.avatar,
-      resizeMode: "stretch"
-    }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: {
-        marginLeft: 10
-      }
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-      style: {
-        fontWeight: '600'
-      }
-    }, (_users$3 = users[0]) === null || _users$3 === void 0 ? void 0 : (_users$3$details = _users$3.details) === null || _users$3$details === void 0 ? void 0 : _users$3$details.fullName)))));
-  }
+  const agent = (users === null || users === void 0 ? void 0 : users.length) > 0 ? users[0] : null;
+  const title = (agent === null || agent === void 0 ? void 0 : (_agent$details = agent.details) === null || _agent$details === void 0 ? void 0 : _agent$details.fullName) || (brand === null || brand === void 0 ? void 0 : brand.name) || 'Support';
+  const subtitle = agent ? 'usually replies in a few minutes' : null;
+  const avatarSource = agent !== null && agent !== void 0 && (_agent$details2 = agent.details) !== null && _agent$details2 !== void 0 && _agent$details2.avatar ? {
+    uri: (0, _utils.getAttachmentUrl)(agent.details.avatar, subDomain)
+  } : require('../../assets/images/avatar.png');
+  const androidTop = _reactNative.Platform.OS === 'android' ? _reactNative.StatusBar.currentHeight || 0 : 0;
   return /*#__PURE__*/_react.default.createElement(_reactNative.SafeAreaView, {
     style: {
       backgroundColor: bgColor
     }
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      paddingBottom: 20
-    }
+    style: [styles.header, {
+      paddingTop: androidTop + 6
+    }]
   }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
     onPress: () => {
       _asyncStorage.default.removeItem('conversationId');
       setConversationId(null);
     },
-    style: [styles.backStyle, {
-      backgroundColor: '#2F1F69'
-    }]
-  }, backIcon), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [styles.title]
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: {
-      fontWeight: '600',
-      fontSize: 16
+    style: styles.backButton,
+    hitSlop: {
+      top: 8,
+      bottom: 8,
+      left: 8,
+      right: 8
     }
-  }, brand === null || brand === void 0 ? void 0 : brand.name))));
+  }, /*#__PURE__*/_react.default.createElement(_Icons.BackIcon, {
+    color: _theme.messengerTheme.colors.primaryForeground,
+    size: 18
+  })), agent ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.avatarWrap
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+    source: avatarSource,
+    style: styles.avatar,
+    resizeMode: "cover"
+  }), isOnline ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.onlineDot
+  }) : null) : null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.headerTextWrap
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    numberOfLines: 1,
+    style: styles.headerTitle
+  }, title), subtitle ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    numberOfLines: 1,
+    style: styles.headerSubtitle
+  }, subtitle) : null)));
 };
 const styles = _reactNative.StyleSheet.create({
-  backStyle: {
-    width: 40,
-    height: 40,
-    marginLeft: 15,
-    borderRadius: 90,
-    justifyContent: 'center',
-    alignItems: 'center'
+  root: {
+    flex: 1,
+    backgroundColor: _theme.messengerTheme.colors.background
+  },
+  chatArea: {
+    flex: 1,
+    backgroundColor: _theme.messengerTheme.colors.background
   },
-  title: {
-    paddingVertical: 10,
-    paddingHorizontal: 15,
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
-    flexDirection: 'row'
+  fullCenter: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: _theme.messengerTheme.colors.background
   },
   contentStyle: {
     flexGrow: 1,
-    padding: 20
+    paddingHorizontal: _theme.messengerTheme.spacing.lg,
+    paddingVertical: _theme.messengerTheme.spacing.md
   },
-  avatar: {
+  typingWrap: {
+    paddingHorizontal: _theme.messengerTheme.spacing.lg,
+    paddingBottom: _theme.messengerTheme.spacing.xs
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: _theme.messengerTheme.spacing.md,
+    paddingBottom: _theme.messengerTheme.spacing.md,
+    paddingTop: 6
+  },
+  backButton: {
     width: 40,
     height: 40,
-    borderRadius: 90
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.16)'
+  },
+  avatarWrap: {
+    marginLeft: _theme.messengerTheme.spacing.md
+  },
+  avatar: {
+    width: 36,
+    height: 36,
+    borderRadius: 18
+  },
+  onlineDot: {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    width: 11,
+    height: 11,
+    borderRadius: 6,
+    backgroundColor: _theme.messengerTheme.colors.online,
+    borderWidth: 2,
+    borderColor: _theme.messengerTheme.colors.primary
+  },
+  headerTextWrap: {
+    flex: 1,
+    marginLeft: _theme.messengerTheme.spacing.md
+  },
+  headerTitle: {
+    color: _theme.messengerTheme.colors.primaryForeground,
+    fontWeight: '600',
+    fontSize: 16
+  },
+  headerSubtitle: {
+    color: 'rgba(255,255,255,0.65)',
+    fontSize: 12,
+    marginTop: 1
   }
 });
 //# sourceMappingURL=ConversationDetail.js.map