@messenger-box/platform-mobile 0.0.1-alpha.219 → 0.0.1-alpha.222

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.0.1-alpha.222](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.221...v0.0.1-alpha.222) (2022-10-11)
+
+**Note:** Version bump only for package @messenger-box/platform-mobile
+
+
+
+
+
+## [0.0.1-alpha.221](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.220...v0.0.1-alpha.221) (2022-10-06)
+
+**Note:** Version bump only for package @messenger-box/platform-mobile
+
+
+
+
+
 ## [0.0.1-alpha.219](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.218...v0.0.1-alpha.219) (2022-09-24)
 
 **Note:** Version bump only for package @messenger-box/platform-mobile

package/lib/index.js

@@ -214,70 +214,6 @@ const Inbox = (props) => {
 exports.Inbox = Inbox;
 
 
-/***/ }),
-
-/***/ "./src/screens/inbox/components/CommonMessage.tsx":
-/*!********************************************************!*\
-  !*** ./src/screens/inbox/components/CommonMessage.tsx ***!
-  \********************************************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.CommonMessage = void 0;
-const React = __importStar(__webpack_require__(/*! react */ "react"));
-const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
-const vector_icons_1 = __webpack_require__(/*! @expo/vector-icons */ "@expo/vector-icons");
-const date_fns_1 = __webpack_require__(/*! date-fns */ "date-fns");
-const FilesList_1 = __webpack_require__(/*! ./FilesList */ "./src/screens/inbox/components/FilesList.tsx");
-const lodash_1 = __webpack_require__(/*! lodash */ "lodash");
-const CommonMessage = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    const { message, currentUser } = props;
-    return (React.createElement(native_base_1.Box, { mb: "7" },
-        React.createElement(native_base_1.HStack, { space: 2 },
-            React.createElement(native_base_1.Avatar, { backgroundColor: "grey", source: { uri: ((_a = message === null || message === void 0 ? void 0 : message.author) === null || _a === void 0 ? void 0 : _a.picture) || undefined } }, (0, lodash_1.startCase)((_c = (_b = message === null || message === void 0 ? void 0 : message.author) === null || _b === void 0 ? void 0 : _b.username) === null || _c === void 0 ? void 0 : _c.charAt(0))),
-            React.createElement(native_base_1.Box, null,
-                React.createElement(native_base_1.HStack, { width: '80%', justifyContent: 'space-between', alignItems: 'center' },
-                    React.createElement(native_base_1.HStack, { space: 2 },
-                        React.createElement(native_base_1.Text, { fontSize: "14px", color: "gray.600", fontWeight: 'bold' }, ((_d = message === null || message === void 0 ? void 0 : message.author) === null || _d === void 0 ? void 0 : _d.familyName) && ((_e = message === null || message === void 0 ? void 0 : message.author) === null || _e === void 0 ? void 0 : _e.givenName)
-                            ? ((_f = message === null || message === void 0 ? void 0 : message.author) === null || _f === void 0 ? void 0 : _f.givenName) + ' ' + ((_g = message === null || message === void 0 ? void 0 : message.author) === null || _g === void 0 ? void 0 : _g.familyName)
-                            : (_h = message === null || message === void 0 ? void 0 : message.author) === null || _h === void 0 ? void 0 : _h.username),
-                        React.createElement(native_base_1.Text, { fontSize: "14px", color: "gray.500", ml: "10px" }, (0, date_fns_1.formatDistance)(new Date(message === null || message === void 0 ? void 0 : message.createdAt), new Date(), {
-                            includeSeconds: true,
-                            addSuffix: true,
-                        }))),
-                    (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id) !== ((_j = message === null || message === void 0 ? void 0 : message.author) === null || _j === void 0 ? void 0 : _j.id) && (React.createElement(native_base_1.Box, { ml: "8px" },
-                        React.createElement(native_base_1.Icon, { as: vector_icons_1.Ionicons, name: 'flag', color: "gray.600", size: "sm" })))),
-                React.createElement(native_base_1.Text, { fontSize: "14px", mt: "5px" }, message === null || message === void 0 ? void 0 : message.message),
-                ((_k = message.files) === null || _k === void 0 ? void 0 : _k.totalCount) ? React.createElement(FilesList_1.FilesList, { uploaded: true, files: (_l = message === null || message === void 0 ? void 0 : message.files) === null || _l === void 0 ? void 0 : _l.data }) : null))));
-};
-exports.CommonMessage = CommonMessage;
-
-
 /***/ }),
 
 /***/ "./src/screens/inbox/components/DialogsListItem.tsx":
@@ -389,233 +325,6 @@ const DialogsListItem = function DialogsListItem({ currentUser, users, selectedC
 exports.DialogsListItem = DialogsListItem;
 
 
-/***/ }),
-
-/***/ "./src/screens/inbox/components/FilesList.tsx":
-/*!****************************************************!*\
-  !*** ./src/screens/inbox/components/FilesList.tsx ***!
-  \****************************************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.FilesList = void 0;
-const react_1 = __importStar(__webpack_require__(/*! react */ "react"));
-const react_native_1 = __webpack_require__(/*! react-native */ "react-native");
-const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
-function FilesList({ files, uploaded = false }) {
-    return (react_1.default.createElement(native_base_1.HStack, { space: 2, mt: 2 },
-        react_1.default.createElement(FilesList.FilesView, { files: files, uploaded: uploaded })));
-}
-exports.FilesList = FilesList;
-FilesList.FilesView = function MessageItemFiles({ files = [], uploaded }) {
-    if (!files.length) {
-        return null;
-    }
-    return (react_1.default.createElement(native_base_1.Box, null, files.map((file) => {
-        const url = (0, react_1.useMemo)(() => (uploaded ? file.url : react_native_1.Image.resolveAssetSource(file).uri), [file, uploaded]);
-        return (react_1.default.createElement(native_base_1.Image, { alt: 'image', mr: 2, height: "16", width: "16", source: {
-                uri: url,
-                scale: 0.2,
-            } }));
-    })));
-};
-
-
-/***/ }),
-
-/***/ "./src/screens/inbox/components/MessageInput.tsx":
-/*!*******************************************************!*\
-  !*** ./src/screens/inbox/components/MessageInput.tsx ***!
-  \*******************************************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.MessageInput = void 0;
-const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
-const vector_icons_1 = __webpack_require__(/*! @expo/vector-icons */ "@expo/vector-icons");
-const ImagePicker = __importStar(__webpack_require__(/*! expo-image-picker */ "expo-image-picker"));
-const react_native_keyboard_aware_scroll_view_1 = __webpack_require__(/*! react-native-keyboard-aware-scroll-view */ "react-native-keyboard-aware-scroll-view");
-const react_1 = __importStar(__webpack_require__(/*! react */ "react"));
-const FilesList_1 = __webpack_require__(/*! ./FilesList */ "./src/screens/inbox/components/FilesList.tsx");
-const axios_1 = __importDefault(__webpack_require__(/*! axios */ "axios"));
-exports.MessageInput = (0, react_1.forwardRef)(function MessageInput({ handleSend: handleSendProp }) {
-    const [message, setMessage] = (0, react_1.useState)('');
-    const [sending, setSending] = (0, react_1.useState)(false);
-    const [files, setFiles] = (0, react_1.useState)([]);
-    const [showKeyboard, setShowKeyboard] = (0, react_1.useState)(false);
-    const handleSend = (0, react_1.useCallback)(() => {
-        setSending(true);
-        handleSendProp(message, files)
-            .then(() => {
-            setMessage('');
-            setFiles([]);
-        })
-            .finally(() => setSending(false));
-    }, [files, handleSendProp, message]);
-    const onSelectImages = async () => {
-        // No permissions request is necessary for launching the image library
-        await ImagePicker.requestMediaLibraryPermissionsAsync();
-        let result = await ImagePicker.launchImageLibraryAsync({
-            mediaTypes: ImagePicker.MediaTypeOptions.Images,
-            allowsEditing: true,
-            aspect: [4, 3],
-            quality: 1,
-        });
-        if (!result.cancelled) {
-            axios_1.default
-                .get(result.uri, {
-                responseType: 'blob',
-            })
-                .then((res) => {
-                let file = res.data._data;
-                file.uri = result.uri;
-                setFiles(files.concat(file));
-            });
-        }
-    };
-    return (react_1.default.createElement(react_native_keyboard_aware_scroll_view_1.KeyboardAwareScrollView, { keyboardDismissMode: "on-drag", keyboardShouldPersistTaps: 'always', onKeyboardWillShow: (frames) => {
-            setShowKeyboard(true);
-        }, onKeyboardWillHide: (frames) => {
-            setShowKeyboard(false);
-        }, scrollEnabled: !showKeyboard, style: { position: 'absolute', left: 0, right: 0, bottom: showKeyboard ? 300 : 0 } },
-        react_1.default.createElement(native_base_1.VStack, { bg: 'white', alignContent: "center", p: 5 },
-            react_1.default.createElement(native_base_1.View, null,
-                react_1.default.createElement(native_base_1.TextField, { placeholder: "Message...", borderColor: "gray.400", value: sending ? '' : message, onChange: (e) => setMessage(e.nativeEvent.text), fontSize: 14 })),
-            files.length ? (react_1.default.createElement(native_base_1.View, { mb: 4, flexDirection: "row" },
-                react_1.default.createElement(FilesList_1.FilesList, { files: files }))) : null,
-            react_1.default.createElement(native_base_1.HStack, { alignContent: "center", justifyContent: "space-between" },
-                react_1.default.createElement(vector_icons_1.FontAwesome, { onPress: onSelectImages, size: 20, style: { marginRight: 5 }, name: "file-image-o" }),
-                react_1.default.createElement(vector_icons_1.FontAwesome, { onPress: handleSend, size: 20, name: "send" })))));
-});
-
-
-/***/ }),
-
-/***/ "./src/screens/inbox/components/MessageItem.tsx":
-/*!******************************************************!*\
-  !*** ./src/screens/inbox/components/MessageItem.tsx ***!
-  \******************************************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.MessageItem = void 0;
-const react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
-const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
-const vector_icons_1 = __webpack_require__(/*! @expo/vector-icons */ "@expo/vector-icons");
-const native_1 = __webpack_require__(/*! @react-navigation/native */ "@react-navigation/native");
-const PlainMessage_1 = __webpack_require__(/*! ./PlainMessage */ "./src/screens/inbox/components/PlainMessage.tsx");
-const CommonMessage_1 = __webpack_require__(/*! ./CommonMessage */ "./src/screens/inbox/components/CommonMessage.tsx");
-function MessageItem({ message, channelId, currentUser, totalCount, onOpen, }) {
-    var _a, _b;
-    if (typeof message === 'string') {
-        return react_1.default.createElement(PlainMessage_1.PlainMessage, { message: message });
-    }
-    const { type } = message;
-    if (!type || type === "Simple" /* IPostTypeEnum.Simple */) {
-        return react_1.default.createElement(CommonMessage_1.CommonMessage, { message: message, currentUser: currentUser });
-    }
-    if (type === "ALERT" /* IPostTypeEnum.ALERT */) {
-        const { attachment } = (_a = message === null || message === void 0 ? void 0 : message.propsConfiguration) === null || _a === void 0 ? void 0 : _a.contents;
-        let action = '';
-        let actionId = '';
-        const icon = 'information-circle';
-        if (attachment.callToAction.link.includes('my-reservation-details')) {
-            action = 'm-reservation-detail';
-            actionId = (_b = attachment === null || attachment === void 0 ? void 0 : attachment.callToAction) === null || _b === void 0 ? void 0 : _b.link.split('/').pop();
-        }
-        const color = (0, native_base_1.useColorModeValue)('white', 'gray.800');
-        const bgColor = (0, native_base_1.useColorModeValue)('gray.800', 'white');
-        const navigation = (0, native_1.useNavigation)();
-        return (react_1.default.createElement(native_base_1.Box, { borderWidth: 1, borderRadius: 20, backgroundColor: bgColor, my: 2, p: 3, opacity: 0.7 },
-            react_1.default.createElement(native_base_1.HStack, { space: 2, alignItems: 'center' },
-                react_1.default.createElement(native_base_1.Icon, { as: vector_icons_1.Ionicons, name: icon, color: 'white' }),
-                react_1.default.createElement(native_base_1.Text, { color: color, width: '45%', numberOfLines: 3 }, attachment === null || attachment === void 0 ? void 0 : attachment.title),
-                attachment.callToAction ? (react_1.default.createElement(native_base_1.Button, { variant: 'outline', size: 'sm', borderColor: color, onPress: () => navigation.navigate(action, { reservationId: actionId }) },
-                    react_1.default.createElement(native_base_1.Text, { color: color }, attachment.callToAction.title))) : null)));
-    }
-    return null;
-}
-exports.MessageItem = MessageItem;
-
-
-/***/ }),
-
-/***/ "./src/screens/inbox/components/PlainMessage.tsx":
-/*!*******************************************************!*\
-  !*** ./src/screens/inbox/components/PlainMessage.tsx ***!
-  \*******************************************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.PlainMessage = void 0;
-const react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
-const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
-const PlainMessage = ({ message }) => {
-    return (react_1.default.createElement(native_base_1.Flex, { w: "full", justifyContent: 'center', mb: "7" },
-        react_1.default.createElement(native_base_1.Text, { fontSize: "14px", fontWeight: 'bold' }, message)));
-};
-exports.PlainMessage = PlainMessage;
-
-
 /***/ }),
 
 /***/ "./src/screens/inbox/config/config.ts":
@@ -629,7 +338,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.config = void 0;
 const envalid_1 = __webpack_require__(/*! envalid */ "envalid");
 exports.config = (0, envalid_1.cleanEnv)(process.env, {
-    MESSAGES_PER_PAGE: (0, envalid_1.num)({ devDefault: 20, default: 50 }),
+    MESSAGES_PER_PAGE: (0, envalid_1.num)({ devDefault: 10, default: 20 }),
     FILES_PER_MESSAGE: (0, envalid_1.num)({ default: 10 }),
 });
 
@@ -684,24 +393,29 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ConversationView = void 0;
 const react_1 = __importStar(__webpack_require__(/*! react */ "react"));
-const date_fns_1 = __webpack_require__(/*! date-fns */ "date-fns");
 const native_base_1 = __webpack_require__(/*! native-base */ "native-base");
+const native_1 = __webpack_require__(/*! @react-navigation/native */ "@react-navigation/native");
 const react_redux_1 = __webpack_require__(/*! react-redux */ "react-redux");
 const lodash_1 = __webpack_require__(/*! lodash */ "lodash");
+const ImagePicker = __importStar(__webpack_require__(/*! expo-image-picker */ "expo-image-picker"));
+const base_64_1 = __webpack_require__(/*! base-64 */ "base-64");
+const vector_icons_1 = __webpack_require__(/*! @expo/vector-icons */ "@expo/vector-icons");
+const react_native_gifted_chat_1 = __webpack_require__(/*! react-native-gifted-chat */ "react-native-gifted-chat");
 const platform_client_1 = __webpack_require__(/*! @messenger-box/platform-client */ "@messenger-box/platform-client");
-const MessageItem_1 = __webpack_require__(/*! ../components/MessageItem */ "./src/screens/inbox/components/MessageItem.tsx");
-const MessageInput_1 = __webpack_require__(/*! ../components/MessageInput */ "./src/screens/inbox/components/MessageInput.tsx");
 const config_1 = __webpack_require__(/*! ../config */ "./src/screens/inbox/config/index.ts");
 const user_auth0_client_1 = __webpack_require__(/*! @adminide-stack/user-auth0-client */ "@adminide-stack/user-auth0-client");
 const { MESSAGES_PER_PAGE } = config_1.config;
 function ConversationView({ channelId }) {
-    const { onOpen } = (0, native_base_1.useDisclose)();
-    const messageListRef = (0, react_1.useRef)(null);
+    var _a;
     const [channelToTop, setChannelToTop] = (0, react_1.useState)(0);
     const [channelMessages, setChannelMessages] = (0, react_1.useState)([]);
     const auth = (0, react_redux_1.useSelector)(user_auth0_client_1.userSelector);
     const [totalCount, setTotalCount] = (0, react_1.useState)(0);
+    const [selectedImage, setImage] = (0, react_1.useState)('');
     const [loadingOldMessages, setLoadingOldMessages] = (0, react_1.useState)(false);
+    const color = (0, native_base_1.useColorModeValue)('white', 'black');
+    const navigation = (0, native_1.useNavigation)();
+    const [files, setFiles] = (0, react_1.useState)([]);
     const { startUpload } = (0, platform_client_1.useUploadFiles)();
     const [sendMsg] = (0, platform_client_1.useSendMessagesMutation)();
     const { data, loading: messageLoading, refetch, } = (0, platform_client_1.useMessagesQuery)({
@@ -726,7 +440,7 @@ function ConversationView({ channelId }) {
         var _a;
         if (((_a = data === null || data === void 0 ? void 0 : data.messages) === null || _a === void 0 ? void 0 : _a.data) && (loadingOldMessages || channelMessages.length === 0)) {
             const { data: messages, totalCount } = data.messages;
-            setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...[...messages].reverse(), ...oldMessages], ({ id }) => id));
+            setChannelMessages((oldMessages) => (0, lodash_1.uniqBy)([...messages, ...oldMessages], ({ id }) => id));
             setTotalCount(totalCount);
         }
     }, [data, loadingOldMessages, channelMessages]);
@@ -753,14 +467,31 @@ function ConversationView({ channelId }) {
             refetch({ skip: channelMessages.length });
         }
     }, [data, channelMessages]);
-    const onMessagesScroll = (0, react_1.useCallback)(() => {
-        if (messageListRef.current) {
-            const { scrollTop, scrollHeight, clientHeight } = messageListRef.current;
-            if (clientHeight - scrollTop > scrollHeight - 50 && !messageLoading) {
-                onFetchOld();
-            }
+    const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
+        return contentOffset.y <= 100; // 100px from top
+    };
+    const dataURLtoFile = (dataurl, filename) => {
+        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = (0, base_64_1.encode)(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new File([u8arr], filename, { type: mime });
+    };
+    const onSelectImages = async () => {
+        let imageSource = await ImagePicker.launchImageLibraryAsync({
+            mediaTypes: ImagePicker.MediaTypeOptions.Images,
+            allowsEditing: true,
+            aspect: [4, 3],
+            quality: 1,
+            base64: true,
+        });
+        if (!imageSource.cancelled) {
+            const image = 'data:image/jpeg;base64,' + (imageSource === null || imageSource === void 0 ? void 0 : imageSource.base64);
+            setImage(image);
+            const file = dataURLtoFile(image, 'inputImage.jpg');
+            setFiles(files.concat(file));
         }
-    }, [onFetchOld]);
+    };
     const handleSend = (0, react_1.useCallback)(async (message, files) => {
         var _a;
         if (!(message && channelId)) {
@@ -796,6 +527,10 @@ function ConversationView({ channelId }) {
                 },
             });
             const uploadedFiles = uploadResponse.data;
+            if (uploadResponse.data) {
+                setFiles([]);
+                setImage('');
+            }
             setChannelMessages((messages) => messages.map((message) => {
                 if (message.id === postId) {
                     return Object.assign(Object.assign({}, message), { files: {
@@ -810,27 +545,80 @@ function ConversationView({ channelId }) {
     const messageList = (0, react_1.useMemo)(() => {
         let currentDate = '';
         let res = [];
-        (0, lodash_1.orderBy)(channelMessages, ['createdAt'], ['asc']).map((msg) => {
-            const date = new Date(msg.createdAt);
-            let msgDate;
-            if ((0, date_fns_1.isToday)(date))
-                msgDate = 'Today';
-            else if ((0, date_fns_1.isYesterday)(date))
-                msgDate = 'Yesterday';
-            else
-                msgDate = (0, date_fns_1.format)(new Date(msg.createdAt), 'eee, do MMMM');
-            if (msgDate !== currentDate) {
-                res.push(msgDate);
-                currentDate = msgDate;
-            }
-            res.push(msg);
-        });
+        if (channelMessages.length) {
+            (0, lodash_1.orderBy)(channelMessages, ['createdAt'], ['desc']).map((msg) => {
+                var _a, _b, _c;
+                let message = {
+                    _id: '',
+                    text: '',
+                    createdAt: 0,
+                    user: {
+                        _id: '',
+                        name: '',
+                        avatar: '',
+                    },
+                    type: '',
+                };
+                const date = new Date(msg.createdAt);
+                message._id = msg.id;
+                message.text = msg.message;
+                message.createdAt = date;
+                (message.user = {
+                    _id: msg.author.id,
+                    name: msg.author.givenName + msg.author.familyName,
+                    avatar: (_a = msg.author) === null || _a === void 0 ? void 0 : _a.picture,
+                }),
+                    (message.image = (_c = (_b = msg.files) === null || _b === void 0 ? void 0 : _b.data[0]) === null || _c === void 0 ? void 0 : _c.url),
+                    (message.sent = msg === null || msg === void 0 ? void 0 : msg.isDelivered),
+                    (message.received = msg === null || msg === void 0 ? void 0 : msg.isRead);
+                message.type = msg === null || msg === void 0 ? void 0 : msg.type;
+                message.propsConfiguration = msg === null || msg === void 0 ? void 0 : msg.propsConfiguration;
+                res.push(message);
+            });
+        }
         return res;
     }, [channelMessages]);
-    return (react_1.default.createElement(native_base_1.Box, { flex: 1, position: 'relative' },
-        react_1.default.createElement(native_base_1.ScrollView, { ref: messageListRef, mb: '32', contentContainerStyle: { flexGrow: 1 }, p: 5 }, messageList.map((message, index) => (react_1.default.createElement(native_base_1.Box, { key: index },
-            react_1.default.createElement(MessageItem_1.MessageItem, { channelId: channelId, currentUser: currentUser, message: message, totalCount: totalCount, onOpen: onOpen }))))),
-        react_1.default.createElement(MessageInput_1.MessageInput, { channelId: channelId, handleSend: handleSend })));
+    const renderSend = (props) => {
+        return (react_1.default.createElement(react_native_gifted_chat_1.Send, Object.assign({}, props),
+            react_1.default.createElement(native_base_1.Box, null,
+                react_1.default.createElement(vector_icons_1.MaterialCommunityIcons, { name: "send-circle", style: { marginBottom: 5, marginRight: 5 }, size: 32, color: "#2e64e5" }))));
+    };
+    const renderMessageText = (props) => {
+        var _a, _b;
+        const { currentMessage } = props;
+        if (currentMessage.type !== 'ALERT') {
+            return react_1.default.createElement(react_native_gifted_chat_1.MessageText, Object.assign({}, props));
+        }
+        else {
+            const { attachment } = (_a = currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.propsConfiguration) === null || _a === void 0 ? void 0 : _a.contents;
+            let action = '';
+            let actionId = '';
+            if (attachment.callToAction.link.includes('my-reservation-details')) {
+                action = 'm-reservation-detail';
+                actionId = (_b = attachment === null || attachment === void 0 ? void 0 : attachment.callToAction) === null || _b === void 0 ? void 0 : _b.link.split('/').pop();
+            }
+            return (react_1.default.createElement(native_base_1.Box, null,
+                attachment.callToAction ? (react_1.default.createElement(native_base_1.Button, { variant: 'outline', size: 'sm', borderColor: color, onPress: () => navigation.navigate(action, { reservationId: actionId }) },
+                    react_1.default.createElement(native_base_1.Text, { color: color }, attachment.callToAction.title))) : null,
+                react_1.default.createElement(react_native_gifted_chat_1.MessageText, Object.assign({}, props))));
+        }
+    };
+    const renderActions = (props) => {
+        return (react_1.default.createElement(react_native_gifted_chat_1.Actions, Object.assign({}, props, { icon: () => react_1.default.createElement(native_base_1.Icon, { as: vector_icons_1.Ionicons, name: 'image', size: 'sm', onPress: onSelectImages }) })));
+    };
+    const renderAccessory = (props) => {
+        return (react_1.default.createElement(native_base_1.Box, null, selectedImage !== '' ? (react_1.default.createElement(native_base_1.HStack, { alignItems: 'center' },
+            react_1.default.createElement(native_base_1.Image, { ml: 3, key: selectedImage, alt: 'image', source: { uri: selectedImage }, size: 'xs' }),
+            react_1.default.createElement(native_base_1.Button, { variant: 'ghost', colorScheme: 'secondary', onPress: () => {
+                    setFiles([]);
+                    setImage('');
+                } }, "Cancel"))) : null));
+    };
+    return (react_1.default.createElement(react_native_gifted_chat_1.GiftedChat, { wrapInSafeArea: false, renderLoading: () => react_1.default.createElement(native_base_1.Spinner, null), messages: messageList, onSend: (messages) => {
+            handleSend(messages[0].text, files);
+        }, scrollToBottom: true, user: {
+            _id: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id) || '',
+        }, isTyping: true, alwaysShowSend: true, onLoadEarlier: onFetchOld, infiniteScroll: true, renderSend: renderSend, loadEarlier: channelMessages.length !== ((_a = data === null || data === void 0 ? void 0 : data.messages) === null || _a === void 0 ? void 0 : _a.totalCount), renderMessageText: renderMessageText, minInputToolbarHeight: 50, renderActions: renderActions, renderAccessory: renderAccessory }));
 }
 exports.ConversationView = ConversationView;
 
@@ -893,6 +681,9 @@ function Dialogs(props) {
     });
     const { data: users } = (0, platform_client_1.useGetAllUsersQuery)();
     const currentUser = (0, react_1.useMemo)(() => { var _a; return (_a = users === null || users === void 0 ? void 0 : users.getUsers) === null || _a === void 0 ? void 0 : _a.find(({ alias }) => alias.includes(auth === null || auth === void 0 ? void 0 : auth.auth0UserId)); }, [users, auth]);
+    (0, react_1.useEffect)(() => {
+        getChannelsRefetch();
+    }, []);
     (0, react_1.useEffect)(() => {
         setTimeout(() => {
             dispatch({
@@ -1029,13 +820,13 @@ module.exports = require("@react-navigation/stack");
 
 /***/ }),
 
-/***/ "axios":
-/*!************************!*\
-  !*** external "axios" ***!
-  \************************/
+/***/ "base-64":
+/*!**************************!*\
+  !*** external "base-64" ***!
+  \**************************/
 /***/ ((module) => {
 
-module.exports = require("axios");
+module.exports = require("base-64");
 
 /***/ }),
 
@@ -1099,23 +890,13 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ "react-native":
-/*!*******************************!*\
-  !*** external "react-native" ***!
-  \*******************************/
-/***/ ((module) => {
-
-module.exports = require("react-native");
-
-/***/ }),
-
-/***/ "react-native-keyboard-aware-scroll-view":
-/*!**********************************************************!*\
-  !*** external "react-native-keyboard-aware-scroll-view" ***!
-  \**********************************************************/
+/***/ "react-native-gifted-chat":
+/*!*******************************************!*\
+  !*** external "react-native-gifted-chat" ***!
+  \*******************************************/
 /***/ ((module) => {
 
-module.exports = require("react-native-keyboard-aware-scroll-view");
+module.exports = require("react-native-gifted-chat");
 
 /***/ }),