@droppii-org/chat-mobile 0.2.65 → 0.2.67

package/lib/typescript/src/utils/conversation.d.ts

@@ -6,4 +6,5 @@ export declare const sortConversation: (map: Record<string, ConversationItem>) =
     list: string[];
 };
 export declare const getBotId: (conversation?: ConversationItem) => any;
+export declare const isGroupConversation: (conversation?: Pick<ConversationItem, "conversationType" | "peerType">) => boolean;
 //# sourceMappingURL=conversation.d.ts.map

package/lib/typescript/src/utils/conversation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation.d.ts","sourceRoot":"","sources":["../../../../src/utils/conversation.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,KAAK,gBAAgB,EACtB,MAAM,+BAA+B,CAAC;AAEvC,eAAO,MAAM,mBAAmB,GAC9B,GAAG,gBAAgB,EACnB,GAAG,gBAAgB,WAcpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,aAAa,WAAW,EACxB,WAAW,MAAM,EACjB,aAAa,MAAM,WAUpB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC;;;CAKrE,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,eAAe,gBAAgB,QAWvD,CAAC"}
+{"version":3,"file":"conversation.d.ts","sourceRoot":"","sources":["../../../../src/utils/conversation.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,KAAK,gBAAgB,EACtB,MAAM,+BAA+B,CAAC;AAEvC,eAAO,MAAM,mBAAmB,GAC9B,GAAG,gBAAgB,EACnB,GAAG,gBAAgB,WAcpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,aAAa,WAAW,EACxB,WAAW,MAAM,EACjB,aAAa,MAAM,WAUpB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC;;;CAKrE,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,eAAe,gBAAgB,QAWvD,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,eAAe,IAAI,CAAC,gBAAgB,EAAE,kBAAkB,GAAG,UAAU,CAAC,YAGvE,CAAC"}

package/lib/typescript/src/utils/messageUtils.d.ts

@@ -1,10 +1,14 @@
 /**
  * Message formatting and preview utilities
  */
-import { type ConversationItem, type MessageItem } from '@droppii/openim-rn-client-sdk';
+import { MessageType, type ConversationItem, type MessageItem } from '@droppii/openim-rn-client-sdk';
 import type { IUrlMetadata } from '../types/common';
 import type { TextProps } from 'react-native';
 export declare const isMessageRevoked: (message: MessageItem) => boolean;
+export declare const GROUP_NOTIFICATION_TEXT: Partial<Record<MessageType, {
+    previewKey: string;
+    bySenderKey: string;
+}>>;
 export declare const extractTextContent: (message: MessageItem) => string;
 export declare const getMessagePreview: (message?: MessageItem) => string;
 export declare const getMessagePreviewTextProps: (message?: MessageItem) => TextProps;
@@ -20,6 +24,7 @@ export interface PinnedMessagePreview {
     fileIcon?: number;
 }
 export declare const getPinnedMessagePreview: (message: MessageItem) => PinnedMessagePreview;
+export declare const getNotificationOpUserNickname: (message: MessageItem) => string | undefined;
 export declare const getSenderName: (message: MessageItem, currentUserId?: string, conversation?: ConversationItem) => string;
 export interface GetLastMessageTextParams {
     message: MessageItem | undefined;

package/lib/typescript/src/utils/messageUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"messageUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/messageUtils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,+BAA+B,CAAC;AAIvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,gBAAgB,GAAI,SAAS,WAAW,KAAG,OACL,CAAC;AAEpD,eAAO,MAAM,kBAAkB,GAAI,SAAS,WAAW,KAAG,MAYzD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,UAAU,WAAW,KAAG,MA0EzD,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,UAAU,WAAW,KACpB,SAUF,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,UAAU,WAAW,KACpB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAGrC,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzE,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,sBAAsB,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmBD,eAAO,MAAM,uBAAuB,GAClC,SAAS,WAAW,KACnB,oBA0DF,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,SAAS,WAAW,EACpB,gBAAgB,MAAM,EACtB,eAAe,gBAAgB,KAC9B,MASF,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,6BAA6B,CAAC,EAAE,OAAO,CAAC;CACzC;AAED,eAAO,MAAM,kBAAkB,GAAI,0EAKhC,wBAAwB,KAAG,MAiB7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,UAAU,WAAW,EACrB,gBAAgB,MAAM,EACtB,eAAe,gBAAgB,EAC/B,SAAS,OAAO,KACf,MAOF,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,YAAY,GAAG,SAS7D,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,MAAM,EAAE,WAAW,MAAM,KAAG,MAUhE,CAAC"}
+{"version":3,"file":"messageUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/messageUtils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,WAAW,EAEX,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,+BAA+B,CAAC;AAIvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,gBAAgB,GAAI,SAAS,WAAW,KAAG,OACL,CAAC;AAKpD,eAAO,MAAM,uBAAuB,EAAE,OAAO,CAC3C,MAAM,CAAC,WAAW,EAAE;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,CA0DjE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,SAAS,WAAW,KAAG,MAYzD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,UAAU,WAAW,KAAG,MAyFzD,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,UAAU,WAAW,KACpB,SAUF,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,UAAU,WAAW,KACpB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAGrC,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzE,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,sBAAsB,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmBD,eAAO,MAAM,uBAAuB,GAClC,SAAS,WAAW,KACnB,oBA0DF,CAAC;AAKF,eAAO,MAAM,6BAA6B,GACxC,SAAS,WAAW,KACnB,MAAM,GAAG,SAUX,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,SAAS,WAAW,EACpB,gBAAgB,MAAM,EACtB,eAAe,gBAAgB,KAC9B,MAUF,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,6BAA6B,CAAC,EAAE,OAAO,CAAC;CACzC;AAED,eAAO,MAAM,kBAAkB,GAAI,0EAKhC,wBAAwB,KAAG,MAsB7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,UAAU,WAAW,EACrB,gBAAgB,MAAM,EACtB,eAAe,gBAAgB,EAC/B,SAAS,OAAO,KACf,MAOF,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,YAAY,GAAG,SAS7D,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,MAAM,EAAE,WAAW,MAAM,KAAG,MAUhE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@droppii-org/chat-mobile",
-  "version": "0.2.65",
+  "version": "0.2.67",
   "description": "Droppii chat mobile",
   "keywords": [
     "react-native",
@@ -69,7 +69,7 @@
     "example-legacy": "yarn workspace @droppii-org/chat-mobile-example-legacy"
   },
   "dependencies": {
-    "@droppii/openim-rn-client-sdk": "git+ssh://git@github.com/droppii/open-im-sdk-reactnative.git#v1.0.0-rc23",
+    "@droppii/openim-rn-client-sdk": "git+ssh://git@github.com/droppii/open-im-sdk-reactnative.git#v1.0.0-rc27",
     "@legendapp/list": "^3.0.6",
     "axios": "^1.16.1",
     "lodash": "^4.18.1",

package/src/build-ignore.d.ts

@@ -7,6 +7,7 @@ declare module '@droppii/libs' {
   export type KPopupProps = any;
   export type KToastBarProps = any;
   export type KListItemBaseItemProps = any;
+  export type KSpacing = any;
 
   export const KColors: any;
   export const KSpacingValue: any;

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} />;
   }
 );