@messenger-box/platform-mobile 10.0.3-alpha.23 → 10.0.3-alpha.232

package/lib/screens/inbox/components/SlackMessageContainer/ImageViewerModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageViewerModal.js","sources":["../../../../../src/screens/inbox/components/SlackMessageContainer/ImageViewerModal.tsx"],"sourcesContent":["import React, {useState} from 'react';\nimport {Alert, Modal, StyleSheet, Text, Pressable, View,SafeAreaView,StatusBar} from 'react-native';\n\nconst ImageViewerModal = ({children,isVisible=false,setVisible,modalContent=null}:any) => {\n  \n  return (\n      <Modal\n        animationType=\"slide\"\n       // transparent={true}\n        visible={isVisible}\n        presentationStyle={'fullScreen'}\n        style={{flex:1}}\n        onRequestClose={() => {\n          setVisible(false);\n        }}>\n        <View style={styles.container}> \n        <View style={styles.headerView}>\n          {/* <View><Text></Text></View>\n          <View><Text></Text></View> */}\n          <View style={{alignSelf:'flex-end',paddingRight:5}} > \n            <Pressable\n              style={[styles.button, styles.buttonClose]}\n              onPress={() => setVisible(false)}>\n              <Text style={styles.headerTextStyle}>X</Text>\n            </Pressable></View>\n        </View>\n        <View style={styles.centeredView}>\n            {modalContent ? modalContent : children}\n        </View>\n        <View style={styles.footerView}>\n\n        </View>\n        </View>\n      </Modal>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container:{\n   flex:1,\n  },\n  headerView:{\n   width:'100%',\n   alignItems: 'center',\n   justifyContent:'space-between',\n  // backgroundColor:'rgba(r, g, b, a)',\n   backgroundColor:'#000',\n   paddingTop:50,\n   paddingBottom:10,\n  },\n  centeredView: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: 'white',\n\n    borderRadius: 20,\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.25,\n    shadowRadius: 4,\n    elevation: 5,\n  },\n  footerView:{\n   minHeight:100,\n   backgroundColor:'#000'\n  },\n  modalView: {\n    flex:1,\n    backgroundColor: 'white',\n    borderRadius: 20,\n    alignItems: 'center',\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.25,\n    shadowRadius: 4,\n    elevation: 5,\n  },\n  button: {\n    borderRadius: 20,\n    padding: 10,\n    elevation: 2,\n  },\n  buttonOpen: {\n    backgroundColor: '#F194FF',\n  },\n  buttonClose: {\n    backgroundColor: 'transparent',\n  },\n  textStyle: {\n    color: 'white',\n    fontWeight: 'bold',\n    textAlign: 'center',\n  },\n  headerTextStyle:{\n    color: '#fff',\n    // fontWeight: 'bold',\n    textAlign: 'center',\n    fontSize:20,\n  },\n  modalText: {\n    marginBottom: 15,\n    textAlign: 'center',\n  },\n});\n\nexport default ImageViewerModal;"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"ImageViewerModal.js","sources":["../../../../../src/screens/inbox/components/SlackMessageContainer/ImageViewerModal.tsx"],"sourcesContent":["import React, {useState} from 'react';\nimport {Alert, Modal, StyleSheet, Text, Pressable, View,SafeAreaView,StatusBar} from 'react-native';\n\nconst ImageViewerModal = ({children,isVisible=false,setVisible,modalContent=null}:any) => {\n  \n  return (\n      <Modal\n        animationType=\"slide\"\n       // transparent={true}\n        visible={isVisible}\n        presentationStyle={'fullScreen'}\n        style={{flex:1}}\n        onRequestClose={() => {\n          setVisible(false);\n        }}>\n        <View style={styles.container}> \n        <View style={styles.headerView}>\n          {/* <View><Text></Text></View>\n          <View><Text></Text></View> */}\n          <View style={{alignSelf:'flex-end',paddingRight:5}} > \n            <Pressable\n              style={[styles.button, styles.buttonClose]}\n              onPress={() => setVisible(false)}>\n              <Text style={styles.headerTextStyle}>X</Text>\n            </Pressable></View>\n        </View>\n        <View style={styles.centeredView}>\n            {modalContent ? modalContent : children}\n        </View>\n        <View style={styles.footerView}>\n\n        </View>\n        </View>\n      </Modal>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container:{\n   flex:1,\n  },\n  headerView:{\n   width:'100%',\n   alignItems: 'center',\n   justifyContent:'space-between',\n  // backgroundColor:'rgba(r, g, b, a)',\n   backgroundColor:'#000',\n   paddingTop:50,\n   paddingBottom:10,\n  },\n  centeredView: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: 'white',\n\n    borderRadius: 20,\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.25,\n    shadowRadius: 4,\n    elevation: 5,\n  },\n  footerView:{\n   minHeight:100,\n   backgroundColor:'#000'\n  },\n  modalView: {\n    flex:1,\n    backgroundColor: 'white',\n    borderRadius: 20,\n    alignItems: 'center',\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.25,\n    shadowRadius: 4,\n    elevation: 5,\n  },\n  button: {\n    borderRadius: 20,\n    padding: 10,\n    elevation: 2,\n  },\n  buttonOpen: {\n    backgroundColor: '#F194FF',\n  },\n  buttonClose: {\n    backgroundColor: 'transparent',\n  },\n  textStyle: {\n    color: 'white',\n    fontWeight: 'bold',\n    textAlign: 'center',\n  },\n  headerTextStyle:{\n    color: '#fff',\n    // fontWeight: 'bold',\n    textAlign: 'center',\n    fontSize:20,\n  },\n  modalText: {\n    marginBottom: 15,\n    textAlign: 'center',\n  },\n});\n\nexport default ImageViewerModal;"],"names":["React"],"mappings":"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"}

package/lib/screens/inbox/components/SlackMessageContainer/PaymentMessage.js

@@ -0,0 +1,194 @@
+import React__default from'react';import {TouchableOpacity,View,StyleSheet}from'react-native';import {Day,utils}from'react-native-gifted-chat';import {Avatar,AvatarFallbackText,AvatarImage,Text}from'@admin-layout/gluestack-ui-mobile';import {MaterialCommunityIcons}from'@expo/vector-icons';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
+const {
+  isSameUser,
+  isSameDay
+} = utils;
+class PaymentMessage extends React__default.Component {
+  getInnerComponentProps() {
+    const _a = this.props, {
+      containerStyle
+    } = _a, props = __objRest(_a, [
+      "containerStyle"
+    ]);
+    return __spreadProps(__spreadValues({}, props), {
+      position: "left",
+      isSameUser,
+      isSameDay
+    });
+  }
+  renderDay() {
+    if (this.props.currentMessage.createdAt) {
+      const dayProps = this.getInnerComponentProps();
+      if (this.props.renderDay) {
+        return this.props.renderDay(dayProps);
+      }
+      return /* @__PURE__ */ React__default.createElement(Day, __spreadValues({}, dayProps));
+    }
+    return null;
+  }
+  renderAvatar(isRight) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    let isSameUserAndSameDay = false;
+    if (isSameUser(this.props.currentMessage, this.props.previousMessage) && isSameDay(this.props.currentMessage, this.props.previousMessage)) {
+      isSameUserAndSameDay = true;
+    }
+    const avatarProps = this.getInnerComponentProps();
+    return /* @__PURE__ */ React__default.createElement(Avatar, { size: "sm", className: "bg-transparent rounded-none", style: [isRight ? {
+      marginLeft: 8
+    } : {
+      marginRight: 8
+    }] }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, isSameUserAndSameDay ? "" : (_c = (_b = (_a = avatarProps == null ? void 0 : avatarProps.currentMessage) == null ? void 0 : _a.user) == null ? void 0 : _b.name) == null ? void 0 : _c[0]), !isSameUserAndSameDay && ((_e = (_d = avatarProps == null ? void 0 : avatarProps.currentMessage) == null ? void 0 : _d.user) == null ? void 0 : _e.avatar) && /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "image", style: {
+      height: 40,
+      width: 40,
+      borderRadius: 3,
+      marginTop: 1
+    }, source: {
+      uri: (_g = (_f = avatarProps == null ? void 0 : avatarProps.currentMessage) == null ? void 0 : _f.user) == null ? void 0 : _g.avatar
+    } }));
+  }
+  renderPaymentBubble(isRight) {
+    var _a;
+    const {
+      currentMessage
+    } = this.props;
+    const paymentDetails = ((_a = currentMessage == null ? void 0 : currentMessage.propsConfiguration) == null ? void 0 : _a.payment) || {};
+    const amount = paymentDetails.amount || (currentMessage == null ? void 0 : currentMessage.amount);
+    const currency = paymentDetails.currency || (currentMessage == null ? void 0 : currentMessage.currency) || "\u20B9";
+    const status = paymentDetails.status || (currentMessage == null ? void 0 : currentMessage.status) || "Sent Securely";
+    const paymentNote = paymentDetails.note || (currentMessage == null ? void 0 : currentMessage.text);
+    const time = (currentMessage == null ? void 0 : currentMessage.createdAt) ? new Date(currentMessage.createdAt).toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit"
+    }) : "";
+    return /* @__PURE__ */ React__default.createElement(TouchableOpacity, { activeOpacity: 0.85, style: [styles.bubble, isRight ? styles.bubbleRight : styles.bubbleLeft, {
+      alignSelf: isRight ? "flex-end" : "flex-start"
+    }] }, /* @__PURE__ */ React__default.createElement(Text, { style: styles.amount }, currency, amount), /* @__PURE__ */ React__default.createElement(View, { style: styles.secureRow }, /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { name: "check-circle-outline", size: 20, color: "#4caf50", style: {
+      marginRight: 4
+    } }), /* @__PURE__ */ React__default.createElement(Text, { style: styles.secureText }, status), /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { name: "chevron-right", size: 22, color: "#7c3aed", style: {
+      marginLeft: 4
+    } })), paymentNote && paymentNote !== status && /* @__PURE__ */ React__default.createElement(Text, { style: styles.note }, paymentNote), /* @__PURE__ */ React__default.createElement(Text, { style: [styles.time, {
+      textAlign: isRight ? "right" : "left"
+    }] }, time));
+  }
+  render() {
+    var _a;
+    const {
+      currentMessage,
+      user
+    } = this.props;
+    const isRight = ((_a = currentMessage == null ? void 0 : currentMessage.user) == null ? void 0 : _a._id) === (user == null ? void 0 : user._id);
+    const marginBottom = isSameUser(currentMessage, this.props.nextMessage) ? 2 : 10;
+    return /* @__PURE__ */ React__default.createElement(View, null, this.renderDay(), /* @__PURE__ */ React__default.createElement(View, { style: [styles.container, {
+      marginBottom
+    }, isRight ? styles.containerRight : styles.containerLeft] }, isRight ? null : this.renderAvatar(false), this.renderPaymentBubble(isRight), isRight ? this.renderAvatar(true) : null));
+  }
+}
+__publicField(PaymentMessage, "defaultProps", {
+  renderAvatar: void 0,
+  renderBubble: null,
+  renderDay: null,
+  currentMessage: {},
+  nextMessage: {},
+  previousMessage: {},
+  user: {},
+  containerStyle: {},
+  isShowImageViewer: false,
+  setImageViewer: (obj, v) => null
+});
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    width: "100%"
+  },
+  containerLeft: {
+    justifyContent: "flex-start"
+  },
+  containerRight: {
+    flexDirection: "row-reverse",
+    justifyContent: "flex-end"
+  },
+  bubble: {
+    backgroundColor: "#f3e8ff",
+    borderRadius: 16,
+    paddingVertical: 16,
+    paddingHorizontal: 20,
+    minWidth: 160,
+    maxWidth: 320,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.08,
+    shadowRadius: 4,
+    elevation: 2,
+    marginBottom: 2
+  },
+  bubbleLeft: {
+    marginLeft: 0,
+    marginRight: 32
+  },
+  bubbleRight: {
+    marginRight: 0,
+    marginLeft: 32
+  },
+  amount: {
+    fontSize: 26,
+    fontWeight: "bold",
+    color: "#18181b",
+    marginBottom: 8
+  },
+  secureRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 4
+  },
+  secureText: {
+    fontSize: 16,
+    color: "#18181b",
+    fontWeight: "500"
+  },
+  note: {
+    fontSize: 14,
+    color: "#6b7280",
+    marginTop: 2,
+    marginBottom: 2
+  },
+  time: {
+    fontSize: 12,
+    color: "#a1a1aa",
+    marginTop: 6
+  }
+});export{PaymentMessage as default};//# sourceMappingURL=PaymentMessage.js.map

package/lib/screens/inbox/components/SlackMessageContainer/PaymentMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentMessage.js","sources":["../../../../../src/screens/inbox/components/SlackMessageContainer/PaymentMessage.tsx"],"sourcesContent":["import React from 'react';\nimport { View, StyleSheet, TouchableOpacity } from 'react-native';\nimport { Day, utils } from 'react-native-gifted-chat';\nimport { Avatar, AvatarFallbackText, AvatarImage, Text } from '@admin-layout/gluestack-ui-mobile';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\n\nconst { isSameUser, isSameDay } = utils;\n\nexport default class PaymentMessage extends React.Component<any> {\n    static defaultProps = {\n        renderAvatar: undefined,\n        renderBubble: null,\n        renderDay: null,\n        currentMessage: {},\n        nextMessage: {},\n        previousMessage: {},\n        user: {},\n        containerStyle: {},\n        isShowImageViewer: false,\n        setImageViewer: (obj: any, v: boolean) => null,\n    };\n\n    getInnerComponentProps() {\n        const { containerStyle, ...props } = this.props;\n        return {\n            ...props,\n            position: 'left',\n            isSameUser,\n            isSameDay,\n        };\n    }\n\n    renderDay() {\n        if (this.props.currentMessage.createdAt) {\n            const dayProps = this.getInnerComponentProps();\n            if (this.props.renderDay) {\n                return this.props.renderDay(dayProps);\n            }\n            return <Day {...dayProps} />;\n        }\n        return null;\n    }\n\n    renderAvatar(isRight: boolean) {\n        let extraStyle: any;\n        let isSameUserAndSameDay: boolean = false;\n        if (\n            isSameUser(this.props.currentMessage, this.props.previousMessage) &&\n            isSameDay(this.props.currentMessage, this.props.previousMessage)\n        ) {\n            extraStyle = { height: 0 };\n            isSameUserAndSameDay = true;\n        }\n        const avatarProps: any = this.getInnerComponentProps();\n        return (\n            <Avatar\n                size={'sm'}\n                className=\"bg-transparent rounded-none\"\n                style={[isRight ? { marginLeft: 8 } : { marginRight: 8 }]}\n            >\n                <AvatarFallbackText>\n                    {isSameUserAndSameDay ? '' : avatarProps?.currentMessage?.user?.name?.[0]}\n                </AvatarFallbackText>\n                {!isSameUserAndSameDay && avatarProps?.currentMessage?.user?.avatar && (\n                    <AvatarImage\n                        alt=\"image\"\n                        style={{ height: 40, width: 40, borderRadius: 3, marginTop: 1 }}\n                        source={{\n                            uri: avatarProps?.currentMessage?.user?.avatar,\n                        }}\n                    />\n                )}\n            </Avatar>\n        );\n    }\n\n    renderPaymentBubble(isRight: boolean) {\n        const { currentMessage } = this.props;\n        // Extract payment details\n        const paymentDetails = currentMessage?.propsConfiguration?.payment || {};\n        const amount = paymentDetails.amount || currentMessage?.amount;\n        const currency = paymentDetails.currency || currentMessage?.currency || '₹';\n        const status = paymentDetails.status || currentMessage?.status || 'Sent Securely';\n        const paymentNote = paymentDetails.note || currentMessage?.text;\n        const time = currentMessage?.createdAt\n            ? new Date(currentMessage.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })\n            : '';\n\n        return (\n            <TouchableOpacity\n                activeOpacity={0.85}\n                style={[\n                    styles.bubble,\n                    isRight ? styles.bubbleRight : styles.bubbleLeft,\n                    { alignSelf: isRight ? 'flex-end' : 'flex-start' },\n                ]}\n            >\n                <Text style={styles.amount}>\n                    {currency}\n                    {amount}\n                </Text>\n                <View style={styles.secureRow}>\n                    <MaterialCommunityIcons\n                        name=\"check-circle-outline\"\n                        size={20}\n                        color=\"#4caf50\"\n                        style={{ marginRight: 4 }}\n                    />\n                    <Text style={styles.secureText}>{status}</Text>\n                    <MaterialCommunityIcons name=\"chevron-right\" size={22} color=\"#7c3aed\" style={{ marginLeft: 4 }} />\n                </View>\n                {paymentNote && paymentNote !== status && <Text style={styles.note}>{paymentNote}</Text>}\n                <Text style={[styles.time, { textAlign: isRight ? 'right' : 'left' }]}>{time}</Text>\n            </TouchableOpacity>\n        );\n    }\n\n    render() {\n        const { currentMessage, user } = this.props;\n        const isRight = currentMessage?.user?._id === user?._id;\n        const marginBottom = isSameUser(currentMessage, this.props.nextMessage) ? 2 : 10;\n        return (\n            <View>\n                {this.renderDay()}\n                <View\n                    style={[styles.container, { marginBottom }, isRight ? styles.containerRight : styles.containerLeft]}\n                >\n                    {isRight ? null : this.renderAvatar(false)}\n                    {this.renderPaymentBubble(isRight)}\n                    {isRight ? this.renderAvatar(true) : null}\n                </View>\n            </View>\n        );\n    }\n}\n\nconst styles = StyleSheet.create({\n    container: {\n        flexDirection: 'row',\n        alignItems: 'flex-end',\n        width: '100%',\n    },\n    containerLeft: {\n        justifyContent: 'flex-start',\n    },\n    containerRight: {\n        flexDirection: 'row-reverse',\n        justifyContent: 'flex-end',\n    },\n    bubble: {\n        backgroundColor: '#f3e8ff',\n        borderRadius: 16,\n        paddingVertical: 16,\n        paddingHorizontal: 20,\n        minWidth: 160,\n        maxWidth: 320,\n        shadowColor: '#000',\n        shadowOffset: { width: 0, height: 1 },\n        shadowOpacity: 0.08,\n        shadowRadius: 4,\n        elevation: 2,\n        marginBottom: 2,\n    },\n    bubbleLeft: {\n        marginLeft: 0,\n        marginRight: 32,\n    },\n    bubbleRight: {\n        marginRight: 0,\n        marginLeft: 32,\n    },\n    amount: {\n        fontSize: 26,\n        fontWeight: 'bold',\n        color: '#18181b',\n        marginBottom: 8,\n    },\n    secureRow: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        marginBottom: 4,\n    },\n    secureText: {\n        fontSize: 16,\n        color: '#18181b',\n        fontWeight: '500',\n    },\n    note: {\n        fontSize: 14,\n        color: '#6b7280',\n        marginTop: 2,\n        marginBottom: 2,\n    },\n    time: {\n        fontSize: 12,\n        color: '#a1a1aa',\n        marginTop: 6,\n    },\n});\n"],"names":["React"],"mappings":"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"}

package/lib/screens/inbox/components/SlackMessageContainer/SlackBubble.js

@@ -1,4 +1,4 @@
-import React__default from'react';import {StyleSheet,TouchableHighlight,View,Text,Platform,Dimensions}from'react-native';import {MessageText,Time,utils}from'react-native-gifted-chat';import CachedImage from'../CachedImage/index.js';var __defProp = Object.defineProperty;
+import React__default from'react';import {View,TouchableHighlight,Text,StyleSheet,Platform,Dimensions}from'react-native';import {MessageText,MessageImage,Time,utils}from'react-native-gifted-chat';import CachedImage from'../CachedImage/index.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -29,10 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 const {
   isSameUser,
   isSameDay
@@ -44,12 +41,13 @@ class Bubble extends React__default.Component {
     super(props);
   }
   renderMessageText() {
-    if (this.props.currentMessage.text) {
-      const _a = this.props, {
+    var _a;
+    if ((_a = this.props.currentMessage) == null ? void 0 : _a.text) {
+      const _b = this.props, {
         containerStyle,
         wrapperStyle,
         messageTextStyle
-      } = _a, messageTextProps = __objRest(_a, [
+      } = _b, messageTextProps = __objRest(_b, [
         "containerStyle",
         "wrapperStyle",
         "messageTextStyle"
@@ -64,52 +62,164 @@ class Bubble extends React__default.Component {
     return null;
   }
   renderMessageImage() {
-    if (this.props.currentMessage.image) {
-      const _a = this.props, {
-        containerStyle,
-        wrapperStyle
-      } = _a, messageImageProps = __objRest(_a, [
-        "containerStyle",
-        "wrapperStyle"
-      ]);
+    const _a = this.props, {
+      currentMessage,
+      containerStyle,
+      wrapperStyle
+    } = _a, messageImageProps = __objRest(_a, [
+      "currentMessage",
+      "containerStyle",
+      "wrapperStyle"
+    ]);
+    if (currentMessage.images && Array.isArray(currentMessage.images) && currentMessage.images.length > 0) {
+      const validImages = currentMessage.images.filter((url) => url && typeof url === "string");
+      if (validImages.length === 0) {
+        return null;
+      }
+      return /* @__PURE__ */ React__default.createElement(View, { style: {
+        marginVertical: 0
+      } }, /* @__PURE__ */ React__default.createElement(View, { style: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: 8
+      } }, validImages.map((imageUrl, index) => {
+        const isLocalImage = imageUrl.startsWith("file:") || imageUrl.startsWith("data:") || imageUrl.startsWith("content:") || !imageUrl.startsWith("http://") && !imageUrl.startsWith("https://");
+        const imageSize = validImages.length === 1 ? {
+          width: windowWidth * 0.6,
+          height: windowWidth * 0.4
+        } : {
+          width: windowWidth * 0.3,
+          height: windowWidth * 0.3
+        };
+        const isUploading = currentMessage.isUploading;
+        return /* @__PURE__ */ React__default.createElement(TouchableHighlight, { key: `image-${index}-${currentMessage._id}`, underlayColor: "transparent", onPress: () => {
+          if (isUploading) return;
+          const imageObject = {
+            _id: `${currentMessage._id}-img-${index}`,
+            image: imageUrl
+          };
+          this.props.setImageViewer(imageObject, true);
+        } }, /* @__PURE__ */ React__default.createElement(View, { style: __spreadProps(__spreadValues({}, imageSize), {
+          maxHeight: 200,
+          borderRadius: 8,
+          overflow: "hidden",
+          borderWidth: 1,
+          borderColor: "#e0e0e0",
+          backgroundColor: "#f7f7f7"
+        }) }, isLocalImage ? (
+          // For local images, use direct Image component with no loading state
+          /* @__PURE__ */ React__default.createElement(View, { style: {
+            width: "100%",
+            height: "100%"
+          } }, /* @__PURE__ */ React__default.createElement(MessageImage, __spreadProps(__spreadValues({}, messageImageProps), { currentMessage: __spreadProps(__spreadValues({}, currentMessage), {
+            image: imageUrl
+          }), imageStyle: {
+            width: "100%",
+            height: "100%",
+            borderRadius: 8
+          } })), isUploading && /* @__PURE__ */ React__default.createElement(View, { style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: "rgba(0,0,0,0.2)",
+            justifyContent: "center",
+            alignItems: "center"
+          } }, /* @__PURE__ */ React__default.createElement(Text, { style: {
+            color: "white",
+            fontWeight: "bold"
+          } }, "Uploading...")))
+        ) : (
+          // For remote images, use CachedImage with loading placeholder
+          /* @__PURE__ */ React__default.createElement(CachedImage, { style: [styles.slackImage, {
+            width: "100%",
+            height: "100%"
+          }], cacheKey: `${currentMessage._id}-img-${index}-slack-bubble-imageKey`, source: {
+            uri: imageUrl,
+            expiresIn: 86400
+          }, resizeMode: "cover", alt: "image", placeholderContent: /* @__PURE__ */ React__default.createElement(View, { style: [styles.slackImage, {
+            width: "100%",
+            height: "100%",
+            backgroundColor: "#e1e1e1",
+            justifyContent: "center",
+            alignItems: "center",
+            borderRadius: 8
+          }] }, /* @__PURE__ */ React__default.createElement(Text, null, isUploading ? "Uploading..." : "Loading...")) })
+        )));
+      })));
+    }
+    if (currentMessage.image) {
       if (this.props.renderMessageImage) {
         return this.props.renderMessageImage(messageImageProps);
       }
       const {
         image,
         _id
-      } = messageImageProps == null ? void 0 : messageImageProps.currentMessage;
+      } = currentMessage;
       if (!image || typeof image !== "string") {
-        console.log("Invalid image URL:", image);
         return null;
       }
-      console.log("Rendering message image:", image);
+      const isLocalImage = image.startsWith("file:") || image.startsWith("data:") || image.startsWith("content:") || // Check if the image is a pendingUpload by checking if it doesn't start with http/https
+      !image.startsWith("http://") && !image.startsWith("https://");
+      const isUploading = currentMessage.isUploading;
       return /* @__PURE__ */ React__default.createElement(TouchableHighlight, { underlayColor: "transparent", style: {
         width: "100%",
-        marginVertical: 5
-      }, onPress: () => this.props.setImageViewer(messageImageProps == null ? void 0 : messageImageProps.currentMessage, true) }, /* @__PURE__ */ React__default.createElement(View, { style: {
+        marginVertical: 0
+      }, onPress: () => {
+        if (isUploading) return;
+        this.props.setImageViewer(currentMessage, true);
+      } }, /* @__PURE__ */ React__default.createElement(View, { style: {
         width: windowWidth * 0.6,
+        // 60% of screen width
         height: windowWidth * 0.4,
+        // Maintain aspect ratio
         maxHeight: 200,
         borderRadius: 8,
         overflow: "hidden",
         borderWidth: 1,
         borderColor: "#e0e0e0",
         backgroundColor: "#f7f7f7"
-      } }, /* @__PURE__ */ React__default.createElement(CachedImage, { style: [styles.slackImage, {
-        width: "100%",
-        height: "100%"
-      }], cacheKey: `${_id}-slack-bubble-imageKey`, source: {
-        uri: image,
-        expiresIn: 86400
-      }, resizeMode: "cover", alt: "image", placeholderContent: /* @__PURE__ */ React__default.createElement(View, { style: [styles.slackImage, {
-        width: "100%",
-        height: "100%",
-        backgroundColor: "#e1e1e1",
-        justifyContent: "center",
-        alignItems: "center",
-        borderRadius: 8
-      }] }, /* @__PURE__ */ React__default.createElement(Text, null, "Loading...")) })));
+      } }, isLocalImage ? (
+        // For local images, use direct Image component with no loading state
+        /* @__PURE__ */ React__default.createElement(View, { style: {
+          width: "100%",
+          height: "100%",
+          position: "relative"
+        } }, /* @__PURE__ */ React__default.createElement(MessageImage, __spreadProps(__spreadValues({}, messageImageProps), { imageStyle: {
+          width: "100%",
+          height: "100%",
+          borderRadius: 8
+        } })), isUploading && /* @__PURE__ */ React__default.createElement(View, { style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0,0,0,0.2)",
+          justifyContent: "center",
+          alignItems: "center"
+        } }, /* @__PURE__ */ React__default.createElement(Text, { style: {
+          color: "white",
+          fontWeight: "bold"
+        } }, "Uploading...")))
+      ) : (
+        // For remote images, use CachedImage with loading placeholder
+        /* @__PURE__ */ React__default.createElement(CachedImage, { style: [styles.slackImage, {
+          width: "100%",
+          height: "100%"
+        }], cacheKey: `${_id}-slack-bubble-imageKey`, source: {
+          uri: image,
+          expiresIn: 86400
+        }, resizeMode: "cover", alt: "image", placeholderContent: /* @__PURE__ */ React__default.createElement(View, { style: [styles.slackImage, {
+          width: "100%",
+          height: "100%",
+          backgroundColor: "#e1e1e1",
+          justifyContent: "center",
+          alignItems: "center",
+          borderRadius: 8
+        }] }, /* @__PURE__ */ React__default.createElement(Text, null, isUploading ? "Uploading..." : "Loading...")) })
+      )));
     }
     return null;
   }
@@ -182,7 +292,7 @@ class Bubble extends React__default.Component {
         },
         underlayColor: "transparent",
         disabled: true,
-        accessibilityTraits: "text"
+        accessibilityRole: "text"
       }, this.props.touchableProps),
       /* @__PURE__ */ React__default.createElement(View, { style: [styles.wrapper, this.props.wrapperStyle] }, /* @__PURE__ */ React__default.createElement(View, null, this.renderCustomView(), messageHeader, this.renderMessageImage(), this.renderMessageText()))
     ));
@@ -226,14 +336,17 @@ const styles = StyleSheet.create({
     marginRight: 10
   },
   headerView: {
+    // Try to align it better with the avatar on Android.
     marginTop: Platform.OS === "android" ? -2 : 0,
     flexDirection: "row",
     alignItems: "baseline"
   },
+  /* eslint-disable react-native/no-color-literals */
   tick: {
     backgroundColor: "transparent",
     color: "white"
   },
+  /* eslint-enable react-native/no-color-literals */
   tickView: {
     flexDirection: "row"
   },