@droppii-org/chat-mobile 0.2.66 → 0.2.67

package/src/components/Avatar/Avatar.tsx

@@ -3,6 +3,8 @@ import { StyleSheet } from 'react-native';
 import { KContainer, KColors } from '@droppii/libs';
 import { SingleAvatar } from './SingleAvatar';
 import { DoubleAvatar } from './DoubleAvatar';
+import { TripleAvatar } from './TripleAvatar';
+import { QuadAvatar } from './QuadAvatar';
 import { AvatarBadge } from './AvatarBadge';
 import { SIZE_MAP } from './Avatar.utils';
 import type { AvatarProps } from './Avatar.types';
@@ -13,8 +15,12 @@ const Avatar = memo(
     size = 'md',
     type = 'single',
     secondarySource,
+    tertiarySource,
+    remainingCount,
     badge,
     fullName,
+    secondaryFullName,
+    tertiaryFullName,
     borderColor = KColors.white,
     borderWidth = 1,
     placeholderColor = KColors.palette.gray.w400,
@@ -23,6 +29,41 @@ const Avatar = memo(
     const sizeValue = useMemo(() => SIZE_MAP[size], [size]);
 
     const content = useMemo(() => {
+      if (type === 'quad' && remainingCount) {
+        return (
+          <QuadAvatar
+            primarySource={source}
+            secondarySource={secondarySource}
+            tertiarySource={tertiarySource}
+            remainingCount={remainingCount}
+            size={sizeValue}
+            borderColor={borderColor}
+            borderWidth={borderWidth}
+            placeholderColor={placeholderColor}
+            primaryFullName={fullName}
+            secondaryFullName={secondaryFullName}
+            tertiaryFullName={tertiaryFullName}
+          />
+        );
+      }
+
+      if (type === 'triple') {
+        return (
+          <TripleAvatar
+            primarySource={source}
+            secondarySource={secondarySource}
+            tertiarySource={tertiarySource}
+            size={sizeValue}
+            borderColor={borderColor}
+            borderWidth={borderWidth}
+            placeholderColor={placeholderColor}
+            primaryFullName={fullName}
+            secondaryFullName={secondaryFullName}
+            tertiaryFullName={tertiaryFullName}
+          />
+        );
+      }
+
       if (type === 'double') {
         return (
           <DoubleAvatar
@@ -32,6 +73,8 @@ const Avatar = memo(
             borderColor={borderColor}
             borderWidth={borderWidth}
             placeholderColor={placeholderColor}
+            primaryFullName={fullName}
+            secondaryFullName={secondaryFullName}
           />
         );
       }
@@ -51,11 +94,15 @@ const Avatar = memo(
       type,
       source,
       secondarySource,
+      tertiarySource,
+      remainingCount,
       sizeValue,
       borderColor,
       borderWidth,
       placeholderColor,
       fullName,
+      secondaryFullName,
+      tertiaryFullName,
     ]);
 
     const containerStyle = useMemo(

package/src/components/Avatar/Avatar.types.ts

@@ -2,13 +2,17 @@ export interface AvatarProps {
   userId?: string;
   source?: string | null;
   size?: 'sm' | 'nm' | 'md' | 'lg' | '4xlg';
-  type?: 'single' | 'double';
+  type?: 'single' | 'double' | 'triple' | 'quad';
   secondarySource?: string | null;
+  tertiarySource?: string | null;
+  remainingCount?: number;
   badge?: {
     label?: string;
     variant?: 'bot' | 'support' | 'mall' | 'custom';
   };
   fullName?: string;
+  secondaryFullName?: string;
+  tertiaryFullName?: string;
   borderColor?: string;
   borderWidth?: number;
   placeholderColor?: string;

package/src/components/Avatar/DoubleAvatar.tsx

@@ -25,8 +25,9 @@ export const DoubleAvatar = memo(
     primaryFullName,
     secondaryFullName,
   }: DoubleAvatarProps) => {
-    const innerSize = Math.round(size * 0.6875); // 33/48 ratio
-    const offset = Math.round(size * 0.3125); // 15/48 ratio
+    const primarySize = Math.round(size * 0.78);
+    const secondarySize = Math.round(size * 0.58);
+    const secondaryBorderWidth = borderWidth + 1;
 
     return (
       <KContainer.View
@@ -35,13 +36,13 @@ export const DoubleAvatar = memo(
         <KContainer.View
           style={[
             styles.doubleAvatarChild,
-            styles.doubleAvatarTop,
-            { width: innerSize, height: innerSize, right: offset },
+            styles.doubleAvatarBottomLeft,
+            { width: primarySize, height: primarySize },
           ]}
         >
           <SingleAvatar
             source={primarySource}
-            size={innerSize}
+            size={primarySize}
             borderColor={borderColor}
             borderWidth={borderWidth}
             placeholderColor={placeholderColor}
@@ -52,15 +53,15 @@ export const DoubleAvatar = memo(
         <KContainer.View
           style={[
             styles.doubleAvatarChild,
-            styles.doubleAvatarBottom,
-            { width: innerSize, height: innerSize, left: offset },
+            styles.doubleAvatarTopRight,
+            { width: secondarySize, height: secondarySize },
           ]}
         >
           <SingleAvatar
             source={secondarySource}
-            size={innerSize}
+            size={secondarySize}
             borderColor={borderColor}
-            borderWidth={borderWidth}
+            borderWidth={secondaryBorderWidth}
             placeholderColor={placeholderColor}
             backgroundColor={KColors.palette.gray.w300}
             fullName={secondaryFullName}
@@ -80,10 +81,12 @@ const styles = StyleSheet.create({
   doubleAvatarChild: {
     position: 'absolute',
   },
-  doubleAvatarTop: {
-    top: 0,
-  },
-  doubleAvatarBottom: {
+  doubleAvatarBottomLeft: {
     bottom: 0,
+    left: 0,
+  },
+  doubleAvatarTopRight: {
+    top: 0,
+    right: 0,
   },
 });

package/src/components/Avatar/QuadAvatar.tsx

@@ -0,0 +1,161 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KLabel, KColors } from '@droppii/libs';
+import { SingleAvatar } from './SingleAvatar';
+
+interface QuadAvatarProps {
+  primarySource: string | null | undefined;
+  secondarySource: string | null | undefined;
+  tertiarySource: string | null | undefined;
+  remainingCount: number;
+  size: number;
+  borderColor: string;
+  borderWidth: number;
+  placeholderColor: string;
+  primaryFullName?: string;
+  secondaryFullName?: string;
+  tertiaryFullName?: string;
+}
+
+const getCountTypo = (cellSize: number) => {
+  if (cellSize <= 20) return 'Text2XsBold' as const;
+  if (cellSize <= 32) return 'TextXsBold' as const;
+  return 'TextNmBold' as const;
+};
+
+export const QuadAvatar = memo(
+  ({
+    primarySource,
+    secondarySource,
+    tertiarySource,
+    remainingCount,
+    size,
+    borderColor,
+    borderWidth,
+    placeholderColor,
+    primaryFullName,
+    secondaryFullName,
+    tertiaryFullName,
+  }: QuadAvatarProps) => {
+    const circleSize = Math.round(size * 0.58);
+    const clusterBorderWidth = borderWidth + 1;
+    const overflowLabel = remainingCount > 99 ? '99+' : `+${remainingCount}`;
+
+    return (
+      <KContainer.View
+        style={[styles.quadAvatarContainer, { width: size, height: size }]}
+      >
+        <KContainer.View
+          style={[
+            styles.quadAvatarChild,
+            styles.quadAvatarTopLeft,
+            { width: circleSize, height: circleSize },
+          ]}
+        >
+          <SingleAvatar
+            source={primarySource}
+            size={circleSize}
+            borderColor={borderColor}
+            borderWidth={clusterBorderWidth}
+            placeholderColor={placeholderColor}
+            backgroundColor={KColors.palette.gray.w300}
+            fullName={primaryFullName}
+          />
+        </KContainer.View>
+        <KContainer.View
+          style={[
+            styles.quadAvatarChild,
+            styles.quadAvatarBottomLeft,
+            { width: circleSize, height: circleSize },
+          ]}
+        >
+          <SingleAvatar
+            source={tertiarySource}
+            size={circleSize}
+            borderColor={borderColor}
+            borderWidth={clusterBorderWidth}
+            placeholderColor={placeholderColor}
+            backgroundColor={KColors.palette.gray.w300}
+            fullName={tertiaryFullName}
+          />
+        </KContainer.View>
+        <KContainer.View
+          style={[
+            styles.quadAvatarChild,
+            styles.quadAvatarTopRight,
+            { width: circleSize, height: circleSize },
+          ]}
+        >
+          <SingleAvatar
+            source={secondarySource}
+            size={circleSize}
+            borderColor={borderColor}
+            borderWidth={clusterBorderWidth}
+            placeholderColor={placeholderColor}
+            backgroundColor={KColors.palette.gray.w300}
+            fullName={secondaryFullName}
+          />
+        </KContainer.View>
+        <KContainer.View
+          style={[
+            styles.quadAvatarChild,
+            styles.quadAvatarBottomRight,
+            { width: circleSize, height: circleSize },
+          ]}
+        >
+          <KContainer.View
+            center
+            style={[
+              styles.overflowBadge,
+              {
+                width: circleSize,
+                height: circleSize,
+                borderRadius: circleSize / 2,
+                borderWidth: clusterBorderWidth,
+                borderColor,
+              },
+            ]}
+          >
+            <KLabel.Text typo={getCountTypo(circleSize)} color={KColors.white}>
+              {overflowLabel}
+            </KLabel.Text>
+          </KContainer.View>
+        </KContainer.View>
+      </KContainer.View>
+    );
+  }
+);
+
+QuadAvatar.displayName = 'QuadAvatar';
+
+const styles = StyleSheet.create({
+  quadAvatarContainer: {
+    position: 'relative',
+  },
+  quadAvatarChild: {
+    position: 'absolute',
+  },
+  quadAvatarTopLeft: {
+    top: 0,
+    left: 0,
+    zIndex: 1,
+  },
+  quadAvatarBottomLeft: {
+    bottom: 0,
+    left: 0,
+    zIndex: 2,
+  },
+  quadAvatarTopRight: {
+    top: 0,
+    right: 0,
+    zIndex: 3,
+  },
+  quadAvatarBottomRight: {
+    bottom: 0,
+    right: 0,
+    zIndex: 4,
+  },
+  overflowBadge: {
+    backgroundColor: KColors.palette.gray.w500,
+  },
+});

package/src/components/Avatar/TripleAvatar.tsx

@@ -0,0 +1,119 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KColors } from '@droppii/libs';
+import { SingleAvatar } from './SingleAvatar';
+
+interface TripleAvatarProps {
+  primarySource: string | null | undefined;
+  secondarySource: string | null | undefined;
+  tertiarySource: string | null | undefined;
+  size: number;
+  borderColor: string;
+  borderWidth: number;
+  placeholderColor: string;
+  primaryFullName?: string;
+  secondaryFullName?: string;
+  tertiaryFullName?: string;
+}
+
+export const TripleAvatar = memo(
+  ({
+    primarySource,
+    secondarySource,
+    tertiarySource,
+    size,
+    borderColor,
+    borderWidth,
+    placeholderColor,
+    primaryFullName,
+    secondaryFullName,
+    tertiaryFullName,
+  }: TripleAvatarProps) => {
+    const circleSize = Math.round(size * 0.6);
+    const topOffset = Math.round((size - circleSize) / 2);
+    const clusterBorderWidth = borderWidth + 1;
+
+    return (
+      <KContainer.View
+        style={[styles.tripleAvatarContainer, { width: size, height: size }]}
+      >
+        <KContainer.View
+          style={[
+            styles.tripleAvatarChild,
+            styles.tripleAvatarBottomLeft,
+            { width: circleSize, height: circleSize },
+          ]}
+        >
+          <SingleAvatar
+            source={secondarySource}
+            size={circleSize}
+            borderColor={borderColor}
+            borderWidth={clusterBorderWidth}
+            placeholderColor={placeholderColor}
+            backgroundColor={KColors.palette.gray.w300}
+            fullName={secondaryFullName}
+          />
+        </KContainer.View>
+        <KContainer.View
+          style={[
+            styles.tripleAvatarChild,
+            styles.tripleAvatarBottomRight,
+            { width: circleSize, height: circleSize },
+          ]}
+        >
+          <SingleAvatar
+            source={tertiarySource}
+            size={circleSize}
+            borderColor={borderColor}
+            borderWidth={clusterBorderWidth}
+            placeholderColor={placeholderColor}
+            backgroundColor={KColors.palette.gray.w300}
+            fullName={tertiaryFullName}
+          />
+        </KContainer.View>
+        <KContainer.View
+          style={[
+            styles.tripleAvatarChild,
+            styles.tripleAvatarTop,
+            { width: circleSize, height: circleSize, left: topOffset },
+          ]}
+        >
+          <SingleAvatar
+            source={primarySource}
+            size={circleSize}
+            borderColor={borderColor}
+            borderWidth={clusterBorderWidth}
+            placeholderColor={placeholderColor}
+            backgroundColor={KColors.palette.gray.w300}
+            fullName={primaryFullName}
+          />
+        </KContainer.View>
+      </KContainer.View>
+    );
+  }
+);
+
+TripleAvatar.displayName = 'TripleAvatar';
+
+const styles = StyleSheet.create({
+  tripleAvatarContainer: {
+    position: 'relative',
+  },
+  tripleAvatarChild: {
+    position: 'absolute',
+  },
+  tripleAvatarTop: {
+    top: 0,
+    zIndex: 3,
+  },
+  tripleAvatarBottomLeft: {
+    bottom: 0,
+    left: 0,
+    zIndex: 1,
+  },
+  tripleAvatarBottomRight: {
+    bottom: 0,
+    right: 0,
+    zIndex: 2,
+  },
+});

package/src/components/Avatar/index.ts

@@ -1,5 +1,7 @@
 export { default as Avatar } from './Avatar';
 export { SingleAvatar } from './SingleAvatar';
 export { DoubleAvatar } from './DoubleAvatar';
+export { TripleAvatar } from './TripleAvatar';
+export { QuadAvatar } from './QuadAvatar';
 export { AvatarBadge } from './AvatarBadge';
 export type { AvatarProps } from './Avatar.types';

package/src/components/ThreadCard/AvatarSection.tsx

@@ -3,7 +3,7 @@ import { Avatar } from '../Avatar';
 import { PeerType, type ConversationItem } from '@droppii/openim-rn-client-sdk';
 
 interface AvatarSectionProps extends Partial<
-  Pick<ConversationItem, 'peerType'>
+  Pick<ConversationItem, 'peerType' | 'members'>
 > {
   avatar: string | null;
   fullName: string;
@@ -11,7 +11,13 @@ interface AvatarSectionProps extends Partial<
 }
 
 export const AvatarSection = memo(
-  ({ avatar, fullName, peerType, size = 'md' }: AvatarSectionProps) => {
+  ({
+    avatar,
+    fullName,
+    peerType,
+    members,
+    size = 'md',
+  }: AvatarSectionProps) => {
     if (peerType === PeerType.Bot) {
       return (
         <Avatar
@@ -34,6 +40,56 @@ export const AvatarSection = memo(
       );
     }
 
+    const groupMembers = Array.isArray(members) ? members : [];
+
+    if (peerType === PeerType.Group && !avatar && groupMembers.length >= 4) {
+      const [first, second, third] = groupMembers;
+      const remainingCount = groupMembers.length - 3;
+      return (
+        <Avatar
+          type="quad"
+          source={first?.faceURL ?? null}
+          fullName={first?.nickname}
+          secondarySource={second?.faceURL ?? null}
+          secondaryFullName={second?.nickname}
+          tertiarySource={third?.faceURL ?? null}
+          tertiaryFullName={third?.nickname}
+          remainingCount={remainingCount}
+          size={size}
+        />
+      );
+    }
+
+    if (peerType === PeerType.Group && !avatar && groupMembers.length === 3) {
+      const [first, second, third] = groupMembers;
+      return (
+        <Avatar
+          type="triple"
+          source={first?.faceURL ?? null}
+          fullName={first?.nickname}
+          secondarySource={second?.faceURL ?? null}
+          secondaryFullName={second?.nickname}
+          tertiarySource={third?.faceURL ?? null}
+          tertiaryFullName={third?.nickname}
+          size={size}
+        />
+      );
+    }
+
+    if (peerType === PeerType.Group && !avatar && groupMembers.length === 2) {
+      const [first, second] = groupMembers;
+      return (
+        <Avatar
+          type="double"
+          source={first?.faceURL ?? null}
+          fullName={first?.nickname}
+          secondarySource={second?.faceURL ?? null}
+          secondaryFullName={second?.nickname}
+          size={size}
+        />
+      );
+    }
+
     return <Avatar source={avatar} fullName={fullName} size={size} />;
   }
 );

package/src/components/ThreadCard/NamePrefixIcon.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { Image, StyleSheet } from 'react-native';
-import { KContainer, KImage, KColors } from '@droppii/libs';
+import { KContainer, KImage, KColors, type KSpacing } from '@droppii/libs';
 import Images from '../../assets/images';
 import { PeerType } from '@droppii/openim-rn-client-sdk';
 
@@ -13,34 +13,41 @@ const styles = StyleSheet.create({
 
 interface NamePrefixIconProps {
   peerType?: PeerType | string;
+  marginR?: KSpacing;
 }
 
-export const NamePrefixIcon = memo(({ peerType }: NamePrefixIconProps) => {
-  if (peerType === PeerType.Bot) {
-    return (
-      <KContainer.View marginR="0.25rem">
-        <Image source={Images.ICON_DROPPII} style={styles.icon} />
-      </KContainer.View>
-    );
-  }
+export const NamePrefixIcon = memo(
+  ({ peerType, marginR = '0.25rem' }: NamePrefixIconProps) => {
+    if (peerType === PeerType.Bot) {
+      return (
+        <KContainer.View marginR={marginR}>
+          <Image source={Images.ICON_DROPPII} style={styles.icon} />
+        </KContainer.View>
+      );
+    }
 
-  if (peerType === PeerType.Group) {
-    return (
-      <KContainer.View marginR="0.25rem">
-        <KImage.VectorIcons name="user-two-b" size={14} color={KColors.black} />
-      </KContainer.View>
-    );
-  }
+    if (peerType === PeerType.Group) {
+      return (
+        <KContainer.View marginR={marginR}>
+          <KImage.VectorIcons
+            name="user-two-b"
+            size={14}
+            color={KColors.black}
+          />
+        </KContainer.View>
+      );
+    }
 
-  // if (peerType === DChatPeerType.CUSTOMER) {
-  //   return (
-  //     <KContainer.View marginR="0.25rem">
-  //       <Image source={Images.ICON_DROPPII} style={styles.icon} />
-  //     </KContainer.View>
-  //   );
-  // }
+    // if (peerType === DChatPeerType.CUSTOMER) {
+    //   return (
+    //     <KContainer.View marginR={marginR}>
+    //       <Image source={Images.ICON_DROPPII} style={styles.icon} />
+    //     </KContainer.View>
+    //   );
+    // }
 
-  return null;
-});
+    return null;
+  }
+);
 
 NamePrefixIcon.displayName = 'NamePrefixIcon';

package/src/components/ThreadCard/ThreadCard.tsx

@@ -33,6 +33,7 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
     peerType,
     showName,
     faceURL,
+    members,
     unreadCount = 0,
     recvMsgOpt = MessageReceiveOptType.Normal,
     isPinned,
@@ -120,6 +121,7 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
           avatar={faceURL ?? null}
           fullName={fullName}
           peerType={peerType}
+          members={members}
         />
 
         {/* Chat-Content */}

package/src/components/messages/groupNotificationMessage/index.tsx

@@ -0,0 +1,28 @@
+import { memo } from 'react';
+import { KLabel } from '@droppii/libs';
+import { trans } from '../../../translation';
+import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
+import {
+  GROUP_NOTIFICATION_TEXT,
+  getNotificationOpUserNickname,
+} from '../../../utils/messageUtils';
+import type { BaseLegendMessageProps } from '../types';
+
+export const GroupNotificationMessage = memo(
+  ({ message, isOutgoing }: BaseLegendMessageProps) => {
+    const notification = GROUP_NOTIFICATION_TEXT[message.contentType];
+    if (!notification) return null;
+
+    const sender = isOutgoing
+      ? 'Bạn'
+      : message.senderNickname || getNotificationOpUserNickname(message) || '';
+
+    return (
+      <KLabel.Text typo="TextXsNormal" color={CHAT_BUBBLE_COLORS.dayLabel}>
+        {trans(notification.bySenderKey, { sender })}
+      </KLabel.Text>
+    );
+  }
+);
+
+GroupNotificationMessage.displayName = 'GroupNotificationMessage';

package/src/context/ChatContext.tsx

@@ -130,7 +130,7 @@ const ChatSdkBridge = () => {
 };
 
 export const ChatProvider = ({ ...props }: ChatProviderProps) => {
-  const { enabled = false } = props;
+  const { enabled = true } = props;
 
   if (!enabled) {
     return props.children;

package/src/context/ChatDetailContext.tsx

@@ -5,6 +5,7 @@ import {
   useEffect,
   useMemo,
   useState,
+  type ComponentType,
 } from 'react';
 import { DeviceEventEmitter } from 'react-native';
 import {
@@ -189,3 +190,17 @@ export const ChatDetailProvider = ({ children }: ChatDetailProviderProps) => {
     </ChatDetailContext.Provider>
   );
 };
+
+export function withChatDetailProvider<P extends object>(
+  Component: ComponentType<P>
+): ComponentType<P> {
+  const WithChatDetailProvider = (props: P) => (
+    <ChatDetailProvider>
+      <Component {...props} />
+    </ChatDetailProvider>
+  );
+  WithChatDetailProvider.displayName = `withChatDetailProvider(${
+    Component.displayName || Component.name || 'Component'
+  })`;
+  return WithChatDetailProvider;
+}