@ethora/chat-component-rn 26.8.5 → 26.8.7

package/lib/commonjs/components/MessageBubble/MessageReaction.js

@@ -6,48 +6,42 @@ Object.defineProperty(exports, "__esModule", {
 exports.MessageReaction = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _native = _interopRequireDefault(require("styled-components/native"));
 var _useTheme = require("../../hooks/useTheme");
+var _emoji = require("../../helpers/emoji");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/* eslint-disable react-hooks/rules-of-hooks -- pre-existing port artifacts; hooks called conditionally / inside helpers. TODO: refactor */
-
-const ReactionContainer = _native.default.View`
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-`;
-const ReactionBox = (0, _native.default)(_reactNative.TouchableOpacity)`
-  padding: 4px 8px;
-  border-radius: 20px;
-  background-color: ${({
-  active,
-  color,
-  theme
-}) => active ? color : theme.surface};
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  elevation: 3;
-`;
-const emojiMap = {
-  joy: '😂',
-  heart: '❤️',
-  fire: '🔥',
-  '+1': '👍',
-  smile: '😄',
-  scream: '😱'
-};
 const MessageReaction = ({
   reaction,
   color,
   changeReaction,
-  userName
+  userName,
+  interactive = true
 }) => {
   const theme = (0, _useTheme.useTheme)();
   const [tooltipEmoji, setTooltipEmoji] = (0, _react.useState)(null);
-  const fadeAnim = new _reactNative.Animated.Value(0);
+  const fadeAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const reactionDetails = (0, _react.useMemo)(() => {
+    const result = {};
+    Object.values(reaction || {}).forEach(({
+      emoji,
+      data
+    }) => {
+      (emoji || []).forEach(em => {
+        if (!result[em]) {
+          result[em] = {
+            count: 0,
+            users: []
+          };
+        }
+        result[em].count += 1;
+        result[em].users.push(`${data?.senderFirstName || ''} ${data?.senderLastName || ''}`.trim());
+      });
+    });
+    return result;
+  }, [reaction]);
+  if (!reaction || Object.keys(reactionDetails).length === 0) {
+    return null;
+  }
   const showTooltip = emoji => {
     setTooltipEmoji(emoji);
     _reactNative.Animated.timing(fadeAnim, {
@@ -63,86 +57,57 @@ const MessageReaction = ({
       useNativeDriver: true
     }).start(() => setTooltipEmoji(null));
   };
-  if (!reaction) {
-    return null;
-  }
-  const reactionDetails = (0, _react.useMemo)(() => {
-    const result = {};
-    Object.values(reaction).forEach(({
-      emoji,
-      data
-    }) => {
-      if (emoji && emoji.length > 0) {
-        emoji.forEach(em => {
-          if (!result[em]) {
-            result[em] = {
-              count: 0,
-              users: []
-            };
-          }
-          result[em].count += 1;
-          result[em].users.push(`${data?.senderFirstName} ${data?.senderLastName}`);
-        });
-      }
-    });
-    return result;
-  }, [reaction]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ReactionContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.row,
     children: Object.entries(reactionDetails).map(([emoji, details]) => {
-      const isUserReacted = userName ? details.users.includes(userName) : false;
+      const isUserReacted = !!userName && details.users.includes(userName);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: {
-          position: 'relative'
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ReactionBox, {
-          active: isUserReacted,
-          color: color,
+        style: styles.chipWrap,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+          testID: `reaction-chip-${emoji}`,
+          activeOpacity: 0.7,
+          disabled: !interactive,
           onPress: () => changeReaction(emoji),
           onLongPress: () => showTooltip(emoji),
           onPressOut: hideTooltip,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: {
-              fontSize: 18,
-              marginRight: 4
-            },
-            children: emojiMap[emoji] || emoji
+          style: [styles.chip, {
+            backgroundColor: theme.surface,
+            borderColor: isUserReacted ? color : theme.border,
+            shadowColor: theme.shadow
+          }],
+          children: [isUserReacted && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            pointerEvents: "none",
+            style: [styles.tint, {
+              backgroundColor: `${color}26`
+            }]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: {
-              fontSize: 14,
-              fontWeight: '600',
-              color: isUserReacted ? theme.textOnPrimary : color
-            },
+            style: styles.glyph,
+            children: (0, _emoji.getEmojiNativeById)(emoji)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.count, {
+              color: isUserReacted ? color : theme.textSecondary
+            }],
             children: details.count
           })]
         }), tooltipEmoji === emoji && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-          style: {
-            position: 'absolute',
-            bottom: 36,
-            left: '50%',
+          pointerEvents: "none",
+          style: [styles.tooltip, {
+            opacity: fadeAnim,
             transform: [{
-              translateX: -50
-            }, {
               translateY: fadeAnim.interpolate({
                 inputRange: [0, 1],
                 outputRange: [4, 0]
               })
             }],
-            opacity: fadeAnim,
             // Inverted pill: text colour as ground, surface as ink,
             // so it stays high-contrast on both palettes.
-            backgroundColor: theme.text,
-            borderRadius: 6,
-            paddingHorizontal: 10,
-            paddingVertical: 6,
-            maxWidth: 220,
-            zIndex: 999
-          },
+            backgroundColor: theme.text
+          }],
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: {
-              color: theme.surface,
-              fontSize: 12
-            },
-            children: details.users.join(', ')
+            style: [styles.tooltipText, {
+              color: theme.surface
+            }],
+            children: details.users.filter(Boolean).join(', ')
           })
         })]
       }, emoji);
@@ -150,4 +115,58 @@ const MessageReaction = ({
   });
 };
 exports.MessageReaction = MessageReaction;
+const styles = _reactNative.StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: 6
+  },
+  chipWrap: {
+    position: 'relative'
+  },
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 3,
+    paddingHorizontal: 8,
+    borderRadius: 14,
+    borderWidth: _reactNative.StyleSheet.hairlineWidth,
+    shadowOpacity: 0.08,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowRadius: 2,
+    elevation: 1
+  },
+  tint: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    borderRadius: 14
+  },
+  glyph: {
+    fontSize: 16,
+    marginRight: 4
+  },
+  count: {
+    fontSize: 13,
+    fontWeight: '600'
+  },
+  tooltip: {
+    position: 'absolute',
+    bottom: 34,
+    left: 0,
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    maxWidth: 220
+  },
+  tooltipText: {
+    fontSize: 12
+  }
+});
 //# sourceMappingURL=MessageReaction.js.map

package/lib/commonjs/components/MessageBubble/MessageReaction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_native","_interopRequireDefault","_useTheme","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ReactionContainer","styled","View","ReactionBox","TouchableOpacity","active","color","theme","surface","emojiMap","joy","heart","fire","smile","scream","MessageReaction","reaction","changeReaction","userName","useTheme","tooltipEmoji","setTooltipEmoji","useState","fadeAnim","Animated","Value","showTooltip","emoji","timing","toValue","duration","useNativeDriver","start","hideTooltip","reactionDetails","useMemo","result","values","forEach","data","length","em","count","users","push","senderFirstName","senderLastName","jsx","children","entries","map","details","isUserReacted","includes","jsxs","style","position","onPress","onLongPress","onPressOut","Text","fontSize","marginRight","fontWeight","textOnPrimary","bottom","left","transform","translateX","translateY","interpolate","inputRange","outputRange","opacity","backgroundColor","text","borderRadius","paddingHorizontal","paddingVertical","maxWidth","zIndex","join","exports"],"sourceRoot":"../../../../src","sources":["components/MessageBubble/MessageReaction.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_useTheme","_emoji","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MessageReaction","reaction","color","changeReaction","userName","interactive","theme","useTheme","tooltipEmoji","setTooltipEmoji","useState","fadeAnim","useRef","Animated","Value","current","reactionDetails","useMemo","result","values","forEach","emoji","data","em","count","users","push","senderFirstName","senderLastName","trim","keys","length","showTooltip","timing","toValue","duration","useNativeDriver","start","hideTooltip","jsx","View","style","styles","row","children","entries","map","details","isUserReacted","includes","jsxs","chipWrap","TouchableOpacity","testID","activeOpacity","disabled","onPress","onLongPress","onPressOut","chip","backgroundColor","surface","borderColor","border","shadowColor","shadow","pointerEvents","tint","Text","glyph","getEmojiNativeById","textSecondary","tooltip","opacity","transform","translateY","interpolate","inputRange","outputRange","text","tooltipText","filter","Boolean","join","exports","StyleSheet","create","flexDirection","flexWrap","alignItems","gap","position","paddingVertical","paddingHorizontal","borderRadius","borderWidth","hairlineWidth","shadowOpacity","shadowOffset","width","height","shadowRadius","elevation","top","right","bottom","left","fontSize","marginRight","fontWeight","maxWidth"],"sourceRoot":"../../../../src","sources":["components/MessageBubble/MessageReaction.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAAyD,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,wBAAAM,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAR,uBAAA,YAAAA,CAAAM,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAWlD,MAAMkB,eAAyC,GAAGA,CAAC;EACxDC,QAAQ;EACRC,KAAK;EACLC,cAAc;EACdC,QAAQ;EACRC,WAAW,GAAG;AAChB,CAAC,KAAK;EACJ,MAAMC,KAAK,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EACxB,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAC,eAAQ,EAAgB,IAAI,CAAC;EACrE,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAC,IAAIC,qBAAQ,CAACC,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,OAAO;EAEtD,MAAMC,eAAe,GAAG,IAAAC,cAAO,EAAC,MAAM;IACpC,MAAMC,MAA0D,GAAG,CAAC,CAAC;IACrErB,MAAM,CAACsB,MAAM,CAAClB,QAAQ,IAAI,CAAC,CAAC,CAAC,CAACmB,OAAO,CAAC,CAAC;MAAEC,KAAK;MAAEC;IAAK,CAAC,KAAK;MACzD,CAACD,KAAK,IAAI,EAAE,EAAED,OAAO,CAAEG,EAAE,IAAK;QAC5B,IAAI,CAACL,MAAM,CAACK,EAAE,CAAC,EAAE;UAACL,MAAM,CAACK,EAAE,CAAC,GAAG;YAAEC,KAAK,EAAE,CAAC;YAAEC,KAAK,EAAE;UAAG,CAAC;QAAC;QACvDP,MAAM,CAACK,EAAE,CAAC,CAACC,KAAK,IAAI,CAAC;QACrBN,MAAM,CAACK,EAAE,CAAC,CAACE,KAAK,CAACC,IAAI,CACnB,GAAGJ,IAAI,EAAEK,eAAe,IAAI,EAAE,IAAIL,IAAI,EAAEM,cAAc,IAAI,EAAE,EAAE,CAACC,IAAI,CAAC,CACtE,CAAC;MACH,CAAC,CAAC;IACJ,CAAC,CAAC;IACF,OAAOX,MAAM;EACf,CAAC,EAAE,CAACjB,QAAQ,CAAC,CAAC;EAEd,IAAI,CAACA,QAAQ,IAAIJ,MAAM,CAACiC,IAAI,CAACd,eAAe,CAAC,CAACe,MAAM,KAAK,CAAC,EAAE;IAAC,OAAO,IAAI;EAAC;EAEzE,MAAMC,WAAW,GAAIX,KAAa,IAAK;IACrCZ,eAAe,CAACY,KAAK,CAAC;IACtBR,qBAAQ,CAACoB,MAAM,CAACtB,QAAQ,EAAE;MACxBuB,OAAO,EAAE,CAAC;MACVC,QAAQ,EAAE,GAAG;MACbC,eAAe,EAAE;IACnB,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;EACZ,CAAC;EAED,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACxBzB,qBAAQ,CAACoB,MAAM,CAACtB,QAAQ,EAAE;MACxBuB,OAAO,EAAE,CAAC;MACVC,QAAQ,EAAE,GAAG;MACbC,eAAe,EAAE;IACnB,CAAC,CAAC,CAACC,KAAK,CAAC,MAAM5B,eAAe,CAAC,IAAI,CAAC,CAAC;EACvC,CAAC;EAED,oBACE,IAAA7B,WAAA,CAAA2D,GAAA,EAAC9D,YAAA,CAAA+D,IAAI;IAACC,KAAK,EAAEC,MAAM,CAACC,GAAI;IAAAC,QAAA,EACrB/C,MAAM,CAACgD,OAAO,CAAC7B,eAAe,CAAC,CAAC8B,GAAG,CAAC,CAAC,CAACzB,KAAK,EAAE0B,OAAO,CAAC,KAAK;MACzD,MAAMC,aAAa,GAAG,CAAC,CAAC5C,QAAQ,IAAI2C,OAAO,CAACtB,KAAK,CAACwB,QAAQ,CAAC7C,QAAQ,CAAC;MACpE,oBACE,IAAAxB,WAAA,CAAAsE,IAAA,EAACzE,YAAA,CAAA+D,IAAI;QAAaC,KAAK,EAAEC,MAAM,CAACS,QAAS;QAAAP,QAAA,gBACvC,IAAAhE,WAAA,CAAAsE,IAAA,EAACzE,YAAA,CAAA2E,gBAAgB;UACfC,MAAM,EAAE,iBAAiBhC,KAAK,EAAG;UACjCiC,aAAa,EAAE,GAAI;UACnBC,QAAQ,EAAE,CAAClD,WAAY;UACvBmD,OAAO,EAAEA,CAAA,KAAMrD,cAAc,CAACkB,KAAK,CAAE;UACrCoC,WAAW,EAAEA,CAAA,KAAMzB,WAAW,CAACX,KAAK,CAAE;UACtCqC,UAAU,EAAEpB,WAAY;UACxBG,KAAK,EAAE,CACLC,MAAM,CAACiB,IAAI,EACX;YACEC,eAAe,EAAEtD,KAAK,CAACuD,OAAO;YAC9BC,WAAW,EAAEd,aAAa,GAAG9C,KAAK,GAAGI,KAAK,CAACyD,MAAM;YACjDC,WAAW,EAAE1D,KAAK,CAAC2D;UACrB,CAAC,CACD;UAAArB,QAAA,GAEDI,aAAa,iBACZ,IAAApE,WAAA,CAAA2D,GAAA,EAAC9D,YAAA,CAAA+D,IAAI;YACH0B,aAAa,EAAC,MAAM;YACpBzB,KAAK,EAAE,CAACC,MAAM,CAACyB,IAAI,EAAE;cAAEP,eAAe,EAAE,GAAG1D,KAAK;YAAK,CAAC;UAAE,CACzD,CACF,eACD,IAAAtB,WAAA,CAAA2D,GAAA,EAAC9D,YAAA,CAAA2F,IAAI;YAAC3B,KAAK,EAAEC,MAAM,CAAC2B,KAAM;YAAAzB,QAAA,EAAE,IAAA0B,yBAAkB,EAACjD,KAAK;UAAC,CAAO,CAAC,eAC7D,IAAAzC,WAAA,CAAA2D,GAAA,EAAC9D,YAAA,CAAA2F,IAAI;YACH3B,KAAK,EAAE,CACLC,MAAM,CAAClB,KAAK,EACZ;cAAEtB,KAAK,EAAE8C,aAAa,GAAG9C,KAAK,GAAGI,KAAK,CAACiE;YAAc,CAAC,CACtD;YAAA3B,QAAA,EAEDG,OAAO,CAACvB;UAAK,CACV,CAAC;QAAA,CACS,CAAC,EAElBhB,YAAY,KAAKa,KAAK,iBACrB,IAAAzC,WAAA,CAAA2D,GAAA,EAAC9D,YAAA,CAAAoC,QAAQ,CAAC2B,IAAI;UACZ0B,aAAa,EAAC,MAAM;UACpBzB,KAAK,EAAE,CACLC,MAAM,CAAC8B,OAAO,EACd;YACEC,OAAO,EAAE9D,QAAQ;YACjB+D,SAAS,EAAE,CACT;cACEC,UAAU,EAAEhE,QAAQ,CAACiE,WAAW,CAAC;gBAC/BC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;gBAClBC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC;cACpB,CAAC;YACH,CAAC,CACF;YACD;YACA;YACAlB,eAAe,EAAEtD,KAAK,CAACyE;UACzB,CAAC,CACD;UAAAnC,QAAA,eAEF,IAAAhE,WAAA,CAAA2D,GAAA,EAAC9D,YAAA,CAAA2F,IAAI;YAAC3B,KAAK,EAAE,CAACC,MAAM,CAACsC,WAAW,EAAE;cAAE9E,KAAK,EAAEI,KAAK,CAACuD;YAAQ,CAAC,CAAE;YAAAjB,QAAA,EACzDG,OAAO,CAACtB,KAAK,CAACwD,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,IAAI;UAAC,CACrC;QAAC,CACM,CAChB;MAAA,GA3DQ9D,KA4DL,CAAC;IAEX,CAAC;EAAC,CACE,CAAC;AAEX,CAAC;AAAC+D,OAAA,CAAApF,eAAA,GAAAA,eAAA;AAEF,MAAM0C,MAAM,GAAG2C,uBAAU,CAACC,MAAM,CAAC;EAC/B3C,GAAG,EAAE;IACH4C,aAAa,EAAE,KAAK;IACpBC,QAAQ,EAAE,MAAM;IAChBC,UAAU,EAAE,QAAQ;IACpBC,GAAG,EAAE;EACP,CAAC;EACDvC,QAAQ,EAAE;IACRwC,QAAQ,EAAE;EACZ,CAAC;EACDhC,IAAI,EAAE;IACJ4B,aAAa,EAAE,KAAK;IACpBE,UAAU,EAAE,QAAQ;IACpBG,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE,CAAC;IACpBC,YAAY,EAAE,EAAE;IAChBC,WAAW,EAAEV,uBAAU,CAACW,aAAa;IACrCC,aAAa,EAAE,IAAI;IACnBC,YAAY,EAAE;MAAEC,KAAK,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAE,CAAC;IACrCC,YAAY,EAAE,CAAC;IACfC,SAAS,EAAE;EACb,CAAC;EACDnC,IAAI,EAAE;IACJwB,QAAQ,EAAE,UAAU;IAAEY,GAAG,EAAE,CAAC;IAAEC,KAAK,EAAE,CAAC;IAAEC,MAAM,EAAE,CAAC;IAAEC,IAAI,EAAE,CAAC;IAC1DZ,YAAY,EAAE;EAChB,CAAC;EACDzB,KAAK,EAAE;IACLsC,QAAQ,EAAE,EAAE;IACZC,WAAW,EAAE;EACf,CAAC;EACDpF,KAAK,EAAE;IACLmF,QAAQ,EAAE,EAAE;IACZE,UAAU,EAAE;EACd,CAAC;EACDrC,OAAO,EAAE;IACPmB,QAAQ,EAAE,UAAU;IACpBc,MAAM,EAAE,EAAE;IACVC,IAAI,EAAE,CAAC;IACPZ,YAAY,EAAE,CAAC;IACfD,iBAAiB,EAAE,EAAE;IACrBD,eAAe,EAAE,CAAC;IAClBkB,QAAQ,EAAE;EACZ,CAAC;EACD9B,WAAW,EAAE;IACX2B,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/components/MessageBubble/MessageReply.js

@@ -3,38 +3,80 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMessageReply = exports.MessageReply = void 0;
-var _native = require("styled-components/native");
+exports.MessageReply = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _useTheme = require("../../hooks/useTheme");
 var _jsxRuntime = require("react/jsx-runtime");
-const StyledMessageReply = exports.StyledMessageReply = _native.styled.TouchableOpacity`
-  background-color: ${props => props.isUser ? '#ffffff' : '#E7EDF9'};
-  padding: 8px 16px;
-  margin-bottom: 8px;
-  border-radius: 4px;
-  border-style: solid;
-  border-start-width: ${props => props.isUser ? 4 : 0}px;
-  border-start-color: ${props => props.isUser ? props.configColor : 'transparent'};
-  border-end-width: ${props => !props.isUser ? 4 : 0}px;
-  border-end-color: ${props => !props.isUser ? props.configColor : 'transparent'};
-`;
-const StyledText = _native.styled.Text`
-  font-size: 14px;
-  overflow: hidden;
-`;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Quote of the parent at the top of a reply that was also sent to the
+ * channel (WhatsApp-style): accent bar, author, up to two lines of text.
+ * Tapping opens the parent's thread.
+ */
 const MessageReply = ({
   isUser,
   text,
-  color = '#0052CD',
+  userName,
+  color,
   handleReplyMessage
 }) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMessageReply, {
+  const theme = (0, _useTheme.useTheme)();
+  const accent = color || theme.primary;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    testID: "message-reply-quote",
+    activeOpacity: 0.7,
     onPress: handleReplyMessage,
-    isUser: isUser,
-    configColor: color,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
-      children: text
-    })
+    style: [styles.quote, {
+      // A tint of the bubble's own ground, so it reads on both sides
+      // and in both themes.
+      backgroundColor: isUser ? 'rgba(0,0,0,0.12)' : theme.surfaceSecondary
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.bar, {
+        backgroundColor: accent
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.body,
+      children: [!!userName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        numberOfLines: 1,
+        style: [styles.author, {
+          color: accent
+        }],
+        children: userName
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        numberOfLines: 2,
+        style: [styles.text, {
+          color: isUser ? theme.messageTextUser : theme.text
+        }],
+        children: text
+      })]
+    })]
   });
 };
 exports.MessageReply = MessageReply;
+const styles = _reactNative.StyleSheet.create({
+  quote: {
+    flexDirection: 'row',
+    borderRadius: 8,
+    overflow: 'hidden',
+    marginBottom: 8
+  },
+  bar: {
+    width: 4
+  },
+  body: {
+    flexShrink: 1,
+    paddingVertical: 6,
+    paddingHorizontal: 10
+  },
+  author: {
+    fontSize: 13,
+    fontWeight: '600',
+    marginBottom: 2
+  },
+  text: {
+    fontSize: 14
+  }
+});
 //# sourceMappingURL=MessageReply.js.map

package/lib/commonjs/components/MessageBubble/MessageReply.js.map

@@ -1 +1 @@
-{"version":3,"names":["_native","require","_jsxRuntime","StyledMessageReply","exports","styled","TouchableOpacity","props","isUser","configColor","StyledText","Text","MessageReply","text","color","handleReplyMessage","jsx","onPress","children"],"sourceRoot":"../../../../src","sources":["components/MessageBubble/MessageReply.tsx"],"mappings":";;;;;;AAEA,IAAAA,OAAA,GAAAC,OAAA;AAAkD,IAAAC,WAAA,GAAAD,OAAA;AAG3C,MAAME,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,cAAM,CAACC,gBAGvC;AACF,sBAAuBC,KAAK,IAAMA,KAAK,CAACC,MAAM,GAAG,SAAS,GAAG,SAAU;AACvE;AACA;AACA;AACA;AACA,wBAAyBD,KAAK,IAAMA,KAAK,CAACC,MAAM,GAAG,CAAC,GAAG,CAAE;AACzD,wBAAyBD,KAAK,IAC1BA,KAAK,CAACC,MAAM,GAAGD,KAAK,CAACE,WAAW,GAAG,aAAa;AACpD,sBAAuBF,KAAK,IAAM,CAACA,KAAK,CAACC,MAAM,GAAG,CAAC,GAAG,CAAE;AACxD,sBAAuBD,KAAK,IACxB,CAACA,KAAK,CAACC,MAAM,GAAGD,KAAK,CAACE,WAAW,GAAG,aAAa;AACrD,CAAC;AAED,MAAMC,UAAU,GAAGL,cAAM,CAACM,IAAI;AAC9B;AACA;AACA,CAAC;AASM,MAAMC,YAAmC,GAAGA,CAAC;EAClDJ,MAAM;EACNK,IAAI;EACJC,KAAK,GAAG,SAAS;EACjBC;AACF,CAAC,KAAK;EACJ,oBACE,IAAAb,WAAA,CAAAc,GAAA,EAACb,kBAAkB;IACjBc,OAAO,EAAEF,kBAAmB;IAC5BP,MAAM,EAAEA,MAAO;IACfC,WAAW,EAAEK,KAAM;IAAAI,QAAA,eAEnB,IAAAhB,WAAA,CAAAc,GAAA,EAACN,UAAU;MAAAQ,QAAA,EAAEL;IAAI,CAAa;EAAC,CACb,CAAC;AAEzB,CAAC;AAACT,OAAA,CAAAQ,YAAA,GAAAA,YAAA","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_useTheme","_jsxRuntime","e","__esModule","default","MessageReply","isUser","text","userName","color","handleReplyMessage","theme","useTheme","accent","primary","jsxs","TouchableOpacity","testID","activeOpacity","onPress","style","styles","quote","backgroundColor","surfaceSecondary","children","jsx","View","bar","body","Text","numberOfLines","author","messageTextUser","exports","StyleSheet","create","flexDirection","borderRadius","overflow","marginBottom","width","flexShrink","paddingVertical","paddingHorizontal","fontSize","fontWeight"],"sourceRoot":"../../../../src","sources":["components/MessageBubble/MessageReply.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AAAgD,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAWhD;AACA;AACA;AACA;AACA;AACO,MAAMG,YAAmC,GAAGA,CAAC;EAClDC,MAAM;EACNC,IAAI;EACJC,QAAQ;EACRC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,MAAMC,KAAK,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EACxB,MAAMC,MAAM,GAAGJ,KAAK,IAAIE,KAAK,CAACG,OAAO;EACrC,oBACE,IAAAb,WAAA,CAAAc,IAAA,EAAChB,YAAA,CAAAiB,gBAAgB;IACfC,MAAM,EAAC,qBAAqB;IAC5BC,aAAa,EAAE,GAAI;IACnBC,OAAO,EAAET,kBAAmB;IAC5BU,KAAK,EAAE,CACLC,MAAM,CAACC,KAAK,EACZ;MACE;MACA;MACAC,eAAe,EAAEjB,MAAM,GAAG,kBAAkB,GAAGK,KAAK,CAACa;IACvD,CAAC,CACD;IAAAC,QAAA,gBAEF,IAAAxB,WAAA,CAAAyB,GAAA,EAAC3B,YAAA,CAAA4B,IAAI;MAACP,KAAK,EAAE,CAACC,MAAM,CAACO,GAAG,EAAE;QAAEL,eAAe,EAAEV;MAAO,CAAC;IAAE,CAAE,CAAC,eAC1D,IAAAZ,WAAA,CAAAc,IAAA,EAAChB,YAAA,CAAA4B,IAAI;MAACP,KAAK,EAAEC,MAAM,CAACQ,IAAK;MAAAJ,QAAA,GACtB,CAAC,CAACjB,QAAQ,iBACT,IAAAP,WAAA,CAAAyB,GAAA,EAAC3B,YAAA,CAAA+B,IAAI;QAACC,aAAa,EAAE,CAAE;QAACX,KAAK,EAAE,CAACC,MAAM,CAACW,MAAM,EAAE;UAAEvB,KAAK,EAAEI;QAAO,CAAC,CAAE;QAAAY,QAAA,EAC/DjB;MAAQ,CACL,CACP,eACD,IAAAP,WAAA,CAAAyB,GAAA,EAAC3B,YAAA,CAAA+B,IAAI;QACHC,aAAa,EAAE,CAAE;QACjBX,KAAK,EAAE,CAACC,MAAM,CAACd,IAAI,EAAE;UAAEE,KAAK,EAAEH,MAAM,GAAGK,KAAK,CAACsB,eAAe,GAAGtB,KAAK,CAACJ;QAAK,CAAC,CAAE;QAAAkB,QAAA,EAE5ElB;MAAI,CACD,CAAC;IAAA,CACH,CAAC;EAAA,CACS,CAAC;AAEvB,CAAC;AAAC2B,OAAA,CAAA7B,YAAA,GAAAA,YAAA;AAEF,MAAMgB,MAAM,GAAGc,uBAAU,CAACC,MAAM,CAAC;EAC/Bd,KAAK,EAAE;IACLe,aAAa,EAAE,KAAK;IACpBC,YAAY,EAAE,CAAC;IACfC,QAAQ,EAAE,QAAQ;IAClBC,YAAY,EAAE;EAChB,CAAC;EACDZ,GAAG,EAAE;IACHa,KAAK,EAAE;EACT,CAAC;EACDZ,IAAI,EAAE;IACJa,UAAU,EAAE,CAAC;IACbC,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE;EACrB,CAAC;EACDZ,MAAM,EAAE;IACNa,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,KAAK;IACjBN,YAAY,EAAE;EAChB,CAAC;EACDjC,IAAI,EAAE;IACJsC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/components/Modals/ChatProfileModal/ChatProfileModal.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.searchScrollTarget = exports.default = exports.chatInitials = void 0;
+var _displayName = require("../../../helpers/displayName");
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _reactRedux = require("react-redux");
@@ -232,7 +233,7 @@ const ChatProfileModal = ({
     }
   };
   const confirmRemoveMember = user => {
-    _reactNative.Alert.alert(t('modal.chatProfile.removeMember'), `${user.firstName} ${user.lastName}`.trim(), [{
+    _reactNative.Alert.alert(t('modal.chatProfile.removeMember'), (0, _displayName.composeName)(user.firstName, user.lastName), [{
       text: t('action.cancel'),
       style: 'cancel'
     }, {
@@ -247,7 +248,8 @@ const ChatProfileModal = ({
       id: user._id,
       firstName: user.firstName,
       lastName: user.lastName,
-      name: `${user.firstName} ${user.lastName}`,
+      name: (0, _displayName.composeName)(user.firstName, user.lastName),
+      profileImage: user.profileImage,
       userJID: user?.xmppUsername,
       token: '',
       refreshToken: ''
@@ -480,7 +482,7 @@ const ChatProfileModal = ({
   const heroColor = config?.colors?.avatar || (0, _getIconColor.getIconColor)(config);
   const members = activeRoom.roomMembers ?? [];
   const query = memberQuery.trim().toLowerCase();
-  const visibleMembers = query ? members.filter(user => `${user.firstName ?? ''} ${user.lastName ?? ''}`.toLowerCase().includes(query)) : members;
+  const visibleMembers = query ? members.filter(user => (0, _displayName.composeName)(user.firstName, user.lastName).toLowerCase().includes(query)) : members;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.ModalContainerFullScreen, {
     style: styles.screen,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.ScrollView, {
@@ -617,7 +619,8 @@ const ChatProfileModal = ({
                 onPress: config?.disableChatInfo?.disableMemberTap ? undefined : () => handleUserAvatarClick(user),
                 disabled: !!config?.disableChatInfo?.disableMemberTap,
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileImagePlaceholder.ProfileImagePlaceholder, {
-                  name: `${user.firstName} ${user.lastName}`,
+                  name: (0, _displayName.composeName)(user.firstName, user.lastName),
+                  icon: (0, _secureFileUrl.appendFileToken)(user.profileImage, fileToken) || null,
                   size: 40
                 }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
                   style: styles.memberText,