@amityco/react-native-social-uikit 4.2.0 → 4.2.1-7d6de7d.0

package/src/chat/elements/Avatar/Avatar.tsx

@@ -0,0 +1,169 @@
+// Chat Avatar element — ported from AmityUiKitWeb v4/chat/elements/Avatar.
+// A compound namespace exposing two variants: `Avatar.User` (round profile
+// avatar with optional moderator badge) and `Avatar.GroupChat` (rounded-square
+// group avatar with optional private badge).
+//
+// Adaptations from web (kept presentational, matching the sibling
+// ConversationChatAvatar element):
+//   - The web input types `Amity.User` / `Amity.File<'image'>` and the SDK read
+//     `FileRepository.fileUrlWithSize(...)` are replaced by plain resolved props
+//     (`avatarUrl`, `displayName`). The composing component resolves them.
+//   - Web `Avatar.User` opens an in-app `ImageViewer` when `fullscreen`; RN has
+//     no such component here, so that is delegated to the caller via `onPress`.
+// The User image/text frame reuses the base Avatar atom; the deleted state and
+// the whole GroupChat variant are built directly with View/Image.
+
+// 1. React / RN imports
+import { View, Image } from 'react-native';
+
+// 2. Internal imports (relative)
+import { Avatar as AvatarAtom } from '../../../core/design/atoms/Avatar';
+import { ModeratorBadge } from '../../../core/design/elements/ModeratorBadge';
+import { PrivateBadge } from '../../../core/design/elements/PrivateBadge';
+import { AmityIcon } from '../../../core/design/icons';
+import { AmityColorToken } from '../../../core/design/tokens/amity-color-tokens';
+import { useStyles } from './styles';
+
+// 3. Types
+export type AvatarUserProps = {
+  /** Resolved avatar image URL (replaces the web SDK read). */
+  avatarUrl?: string;
+  /** Display name; drives the text-fallback initial. */
+  displayName?: string;
+  /** Render the deleted-user placeholder (solid user glyph) instead. */
+  isDeleted?: boolean;
+  /** Show the moderator badge (hidden for deleted users, as on web). */
+  isModerator?: boolean;
+  size?: 'xs' | 'sm' | 'md';
+  /** Press handler — replaces web `fullscreen`/ImageViewer, delegated to caller. */
+  onPress?: () => void;
+};
+
+export type AvatarGroupChatProps = {
+  /** Resolved group avatar image URL (replaces the web SDK read). */
+  avatarUrl?: string;
+  /** When explicitly `false`, shows the private badge. */
+  isPublic?: boolean;
+  size?: 'sm' | 'lg';
+  variant?: 'default' | 'banned';
+};
+
+// Frame box per User size — md 40, sm 32, xs 28; all three are SoT
+// geometry.avatarIcon.avatar.sizes.
+const USER_SIZE: Record<NonNullable<AvatarUserProps['size']>, 28 | 32 | 40> = {
+  xs: 28,
+  sm: 32,
+  md: 40,
+};
+
+// Deleted-user glyph size — 60% of the frame, rounded to the nearest SoT
+// geometry.avatarIcon.icon.sizes value (md 40*0.6->24, sm 32*0.6->20,
+// xs 28*0.6->16).
+const USER_DELETED_ICON: Record<
+  NonNullable<AvatarUserProps['size']>,
+  16 | 20 | 24
+> = {
+  xs: 16,
+  sm: 20,
+  md: 24,
+};
+
+// GroupChat placeholder glyph size — web: sm 1rem = 16, lg 3rem = 48
+// (both are SoT geometry.avatarIcon.icon.sizes).
+// The group-chat placeholder glyph went 1rem→1.75rem.
+// Web sizes it with a single rule for both avatar sizes; only `sm` appears in the
+// chat list, so `lg` keeps its own larger glyph.
+const GROUP_ICON: Record<NonNullable<AvatarGroupChatProps['size']>, 28 | 48> = {
+  sm: 28,
+  lg: 48,
+};
+
+// 4. Variant components
+function User({
+  avatarUrl,
+  displayName,
+  isDeleted = false,
+  isModerator = false,
+  size = 'md',
+  onPress,
+}: AvatarUserProps) {
+  const { styles } = useStyles();
+  const framePx = USER_SIZE[size];
+
+  if (isDeleted) {
+    return (
+      <View style={[styles.userDeleted, { width: framePx, height: framePx }]}>
+        <AmityIcon
+          name="user-s"
+          size={USER_DELETED_ICON[size]}
+          tokenColor={AmityColorToken.IconAvatarDefault}
+        />
+      </View>
+    );
+  }
+
+  const name = displayName ?? '';
+  const initial = name.trim().charAt(0).toUpperCase() || '?';
+
+  return (
+    <AvatarAtom
+      variant={avatarUrl ? 'image' : 'text'}
+      shape="rounded"
+      size={framePx}
+      imageUrl={avatarUrl}
+      initials={initial}
+      indicator={isModerator ? <ModeratorBadge /> : undefined}
+      indicatorStyle={styles.userModeratorBadge}
+      onPress={onPress}
+    />
+  );
+}
+
+function GroupChat({
+  avatarUrl,
+  isPublic,
+  size = 'sm',
+  variant = 'default',
+}: AvatarGroupChatProps) {
+  const { styles } = useStyles();
+  const isBanned = variant === 'banned';
+  const imageUrl = !isBanned ? avatarUrl : undefined;
+  const isPrivate = !isBanned && isPublic === false;
+  // Web: default badge offset -0.125rem (-2); lg offset 0.25rem (4).
+  const badgeOffset = size === 'lg' ? 4 : -2;
+
+  return (
+    <View style={styles.groupChat}>
+      <View style={styles.groupChatImageWrapper}>
+        {imageUrl ? (
+          <Image
+            source={{ uri: imageUrl }}
+            style={styles.groupChatImage}
+            resizeMode="cover"
+          />
+        ) : (
+          <View style={styles.groupChatPlaceholder}>
+            <AmityIcon
+              name="comments-alt-s"
+              size={GROUP_ICON[size]}
+              tokenColor={AmityColorToken.IconAvatarDefault}
+            />
+          </View>
+        )}
+      </View>
+      {isPrivate && (
+        <View
+          style={[
+            styles.privateBadge,
+            { bottom: badgeOffset, right: badgeOffset },
+          ]}
+        >
+          <PrivateBadge size={size === 'lg' ? 32 : 16} border />
+        </View>
+      )}
+    </View>
+  );
+}
+
+// 5. Compound namespace — mirrors the web `Avatar = { User, GroupChat }` API.
+export const Avatar = { User, GroupChat };

package/src/chat/elements/Avatar/index.ts

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+export type { AvatarUserProps, AvatarGroupChatProps } from './Avatar';

package/src/chat/elements/Avatar/styles.ts

@@ -0,0 +1,63 @@
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../core/design/tokens/amity-color-tokens';
+
+// Geometry from SoT tokens/geometry.json (avatarIcon) + web Avatar.module.css
+// (rem -> px, x16). GroupChat wrapper radius 0.625rem = 10; badge offsets
+// -0.125rem = -2 (default) and 0.25rem = 4 (lg).
+// Width of the indicator ring the Avatar atom draws around the badge.
+const MODERATOR_BADGE_RING = 3;
+// How far the badge overhangs the avatar frame, per the design.
+const MODERATOR_BADGE_OVERHANG = 2;
+
+export const useStyles = () => {
+  const token = useToken();
+  const surface = token(AmityColorToken.SurfaceAvatarProfileDefault);
+
+  const styles = StyleSheet.create({
+    // Avatar.User deleted placeholder — circular, holds the solid user glyph.
+    userDeleted: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 9999,
+      backgroundColor: surface,
+    },
+
+    // Avatar.GroupChat — fills its parent (parent-driven size, like web 100%).
+    groupChat: {
+      position: 'relative',
+      width: '100%',
+      height: '100%',
+    },
+    groupChatImageWrapper: {
+      width: '100%',
+      height: '100%',
+      borderRadius: 10,
+      overflow: 'hidden',
+    },
+    groupChatImage: {
+      width: '100%',
+      height: '100%',
+    },
+    groupChatPlaceholder: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: surface,
+    },
+    privateBadge: {
+      position: 'absolute',
+    },
+
+    // The badge overhangs the avatar frame by 2 on both axes. The atom anchors
+    // the indicator at right/bottom 0, but its 3px ring is a real `borderWidth`,
+    // which takes layout space and pushes the 16px chip 3px inside the frame.
+    // Shift by ring + overhang to land it where the design puts it.
+    userModeratorBadge: {
+      right: -(MODERATOR_BADGE_RING + MODERATOR_BADGE_OVERHANG),
+      bottom: -(MODERATOR_BADGE_RING + MODERATOR_BADGE_OVERHANG),
+    },
+  });
+
+  return { styles };
+};

package/src/chat/elements/AvatarPicker/AvatarPicker.tsx

@@ -0,0 +1,117 @@
+// AvatarPicker element — ported from AmityUiKitWeb chat/elements/AvatarPicker.
+// A tappable rounded-square tile that previews the chosen group avatar (or a
+// comments-alt placeholder) with a camera overlay.
+//
+// RN adaptations from web:
+//   - The web upload flow (FileTrigger / useImageUpload / SDK File) is NOT
+//     rebuilt here. This element surfaces the current image + a "change"
+//     affordance and delegates the actual pick + upload to the caller via
+//     `onPick`. Web `{ value, onChange }` -> `{ imageUrl, onPick }`.
+//   - Web `<img>` -> RN `<Image>`; web `Loader.Spinner` -> RN `ActivityIndicator`.
+//   - Source sheet: web's mobile branch opens a drawer holding a
+//     CameraButton + ImageButton before any file is chosen. RN mirrors that with
+//     the bottom sheet + Menu used by AmityMediaAttachmentPicker, then reports
+//     the chosen source to `onPick`. Tapping the tile must never jump straight
+//     into the gallery — that was the bug.
+
+// 1. React / RN imports
+import { Image, Pressable, View, ActivityIndicator } from 'react-native';
+
+// 2. Internal imports (relative)
+import { Menu } from '../../../core/design/components/Menu';
+import { AmityIcon } from '../../../core/design/icons';
+import { AmityColorToken } from '../../../core/design/tokens/amity-color-tokens';
+import { useString } from '../../../core/localization';
+import { useBottomSheet } from '../../../core/stores/slices/bottomSheetSlice';
+import { useStyles } from './styles';
+
+// 3. Types
+/** Which picker the user chose in the source sheet (web: CameraButton / ImageButton). */
+export type AvatarPickerSource = 'camera' | 'photo';
+
+export type AvatarPickerProps = {
+  /** Resolved current avatar image URL (replaces the web SDK File `value`). */
+  imageUrl?: string;
+  /** Invoked with the chosen source — the caller launches that picker. */
+  onPick: (source: AvatarPickerSource) => void;
+  /** Show a spinner overlay while an upload is in flight (web's spinner state). */
+  isUploading?: boolean;
+};
+
+// 4. Named function component
+export function AvatarPicker({
+  imageUrl,
+  onPick,
+  isUploading = false,
+}: AvatarPickerProps) {
+  const { styles, token } = useStyles();
+  const { openBottomSheet, closeBottomSheet, bottomSheetHeight } =
+    useBottomSheet();
+
+  // Same two strings web's drawer uses for these rows.
+  const cameraLabel = useString('amity_chat_media_camera');
+  const photoLabel = useString('amity_chat_media_photo');
+
+  function handleSelect(source: AvatarPickerSource) {
+    closeBottomSheet();
+    onPick(source);
+  }
+
+  function handlePress() {
+    openBottomSheet({
+      height: bottomSheetHeight[2 as keyof typeof bottomSheetHeight],
+      content: (
+        <View style={styles.sourceSheet}>
+          <Menu variant="chat" container="drawer">
+            <Menu.Item
+              icon="camera-r"
+              label={cameraLabel}
+              onPress={() => handleSelect('camera')}
+            />
+            <Menu.Item
+              icon="image-r"
+              label={photoLabel}
+              onPress={() => handleSelect('photo')}
+            />
+          </Menu>
+        </View>
+      ),
+    });
+  }
+
+  return (
+    <Pressable
+      style={styles.picker}
+      onPress={handlePress}
+      disabled={isUploading}
+      accessibilityRole="button"
+      accessibilityLabel="Upload group avatar"
+    >
+      {imageUrl ? (
+        <Image source={{ uri: imageUrl }} style={styles.image} />
+      ) : (
+        <View style={styles.placeholder}>
+          <AmityIcon
+            name="comments-alt-s"
+            size={48}
+            tokenColor={AmityColorToken.IconAvatarDefault}
+          />
+        </View>
+      )}
+      <View style={styles.overlay}>
+        {isUploading ? (
+          <ActivityIndicator
+            size="small"
+            color={token(AmityColorToken.IconAvatarDefault)}
+          />
+        ) : (
+          <AmityIcon
+            name="camera-r"
+            size={48}
+            tokenColor={AmityColorToken.IconAvatarDefault}
+          />
+        )}
+      </View>
+    </Pressable>
+  );
+}

package/src/chat/elements/AvatarPicker/index.ts

@@ -0,0 +1,2 @@
+export { AvatarPicker } from './AvatarPicker';
+export type { AvatarPickerProps, AvatarPickerSource } from './AvatarPicker';

package/src/chat/elements/AvatarPicker/styles.ts

@@ -0,0 +1,50 @@
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../core/design/tokens/amity-color-tokens';
+
+// Geometry ported from AmityUiKitWeb AvatarPicker.module.css (rem -> px, x16):
+// tile 7.5rem=120, radius 1.5rem=24; placeholder icon 3rem=48; camera icon 4rem=64.
+// Overlay: web `--asc-color-background-transparent-black` (50% black) has no direct
+// RN token; substituted with SurfaceBadgeSemanticBadgePostStatusTotalMedia (an exact
+// 50%-black match), same precedent as MediaUploadOverlay — reported as a gap.
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    picker: {
+      position: 'relative',
+      width: 120,
+      height: 120,
+      borderRadius: 24,
+      overflow: 'hidden',
+      backgroundColor: token(AmityColorToken.SurfaceAvatarProfileDefault),
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      resizeMode: 'cover',
+    },
+    placeholder: {
+      width: '100%',
+      height: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    overlay: {
+      ...StyleSheet.absoluteFillObject,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: token(
+        AmityColorToken.SurfaceBadgeSemanticBadgePostStatusTotalMedia
+      ),
+    },
+    // Camera / Photo source sheet. Padding matches the composer's
+    // camera sheet (AmityMediaAttachmentPicker) so the two drawers line up.
+    sourceSheet: {
+      paddingHorizontal: 16,
+      paddingBottom: 16,
+    },
+  });
+
+  return { styles, token };
+};

package/src/chat/elements/ChatKeyboardAvoidingView/ChatKeyboardAvoidingView.tsx

@@ -0,0 +1,155 @@
+// ChatKeyboardAvoidingView — the single keyboard/bottom-inset owner for chat.
+//
+// The contract: every chat page renders SafeAreaView with edges
+// ['top','left','right'] (NO bottom) and mounts this component DIRECTLY inside
+// it, so the page owns layout and the feature underneath owns only content.
+// While the keyboard is closed it pads by the safe-area inset so bottom-anchored
+// content clears the navigation bar; while the keyboard is up it pads by however
+// much of the keyboard actually covers this view, which shrinks the content box
+// instead of letting the keyboard overlap it.
+//
+// Every page mounts it, not just the ones with an input today: the padding is a
+// no-op until a keyboard actually opens, and mounting it uniformly means a
+// screen that later grows a text field cannot silently miss out. Full-screen
+// Modals mount it themselves — a Modal renders in its own native hierarchy, so
+// nothing a page wraps around its content reaches inside one.
+// `yarn check:keyboard-avoiding` enforces that every such surface mounts it.
+//
+// How the two paddings add up
+// ---------------------------
+// RN's KeyboardAvoidingView owns `paddingBottom` outright in its 'padding'
+// branch — it composes its own value LAST, so a caller's paddingBottom in
+// `style` is always discarded, even while the keyboard is closed and the value
+// is 0. That rules out expressing both halves of the contract on the KAV
+// itself. So the safe-area inset lives on the inner View instead, and the two
+// are made to sum to the real occlusion rather than stack on top of it:
+//
+//   keyboardVerticalOffset = ancestorOffset - insets.bottom
+//
+// `keyboardY = keyboardFrame.screenY - keyboardVerticalOffset`, so the
+// `-insets.bottom` half raises keyboardY and KAV pads by
+// `occlusion - insets.bottom`; the inner View adds the inset back, landing
+// exactly on `occlusion`. The inset is already inside the occlusion on both
+// platforms: on Android the OS reports the keyboard height with the
+// navigation-bar inset subtracted while the keyboard physically covers the bar,
+// and on iOS the keyboard covers the home indicator.
+//
+// The `ancestorOffset` half repairs KAV's own frame of reference — see
+// `useAncestorOffset` below.
+//
+// With the keyboard closed the offset is never read — RN short-circuits to
+// bottom = 0 as soon as the keyboard event is null — so the inner inset stands
+// alone and bottom-anchored content clears the navigation bar.
+//
+// Why `behavior` is 'padding' on Android too
+// ------------------------------------------
+// Leaving it undefined there makes KAV a plain View that relies on the OS
+// resizing the window. Under Android 15+ edge-to-edge (targetSdk 36 here) that
+// resize no longer happens: windowSoftInputMode=adjustResize is inert and the
+// IME arrives as an inset the app has to consume itself.
+
+// 1. React / RN imports
+import { useCallback, useRef, useState, type ReactNode } from 'react';
+import {
+  KeyboardAvoidingView,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+// 2. Third-party imports
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+// 3. Internal imports (relative)
+import { useStyles } from './styles';
+
+// 4. Types
+type ChatKeyboardAvoidingViewProps = {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+// 5. Named function component
+export function ChatKeyboardAvoidingView({
+  children,
+  style,
+}: ChatKeyboardAvoidingViewProps) {
+  const { styles } = useStyles();
+  const insets = useSafeAreaInsets();
+  const contentRef = useRef<View>(null);
+  const { ancestorOffset, measureAncestorOffset } =
+    useAncestorOffset(contentRef);
+
+  return (
+    <KeyboardAvoidingView
+      behavior="padding"
+      keyboardVerticalOffset={ancestorOffset - insets.bottom}
+      onLayout={measureAncestorOffset}
+      style={[styles.container, style]}
+    >
+      <View
+        ref={contentRef}
+        style={[styles.container, { paddingBottom: insets.bottom }]}
+      >
+        {children}
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+/**
+ * Measures the one invariant KeyboardAvoidingView depends on without ever
+ * checking: that its parent's origin sits at the top of the screen.
+ *
+ * KAV derives its displacement from `frame.y + frame.height`, where the frame
+ * comes from its own onLayout and is therefore PARENT-relative, while the
+ * keyboard is reported in screen coordinates. The two describe the same edge
+ * only when nothing between this view and the top of the screen introduces an
+ * offset. A host app that renders the UIKit under its own header — the example
+ * app's module nav bar, a tab bar, any wrapper with padding — breaks that
+ * silently: `frame.y` collapses while the view really starts further down, and
+ * KAV pads short by exactly that difference, leaving the keyboard over the
+ * compose bar with no error and a layout that still looks plausible.
+ *
+ * So measure the difference and hand it back as `keyboardVerticalOffset`:
+ *
+ *   padding  = (frame.y + frame.height) - (keyboardScreenY - offset)
+ *   frame.y  = absoluteTop - ancestorOffset
+ *   ⇒ offset = ancestorOffset - insets.bottom  lands padding on the occlusion.
+ *
+ * Correcting beats asserting because the offset is the host app's to own, not
+ * this component's: an integrator is entitled to mount the UIKit below their
+ * own chrome, and a warning telling them not to would have no fix behind it.
+ *
+ * The content View's absolute top is the KAV's own absolute top — the KAV only
+ * ever pads its BOTTOM — so it can stand in for a ref that RN does not expose.
+ * KeyboardAvoidingView is a plain class component with no forwarded ref and no
+ * `measure` method; its inner ref is private.
+ */
+function useAncestorOffset(contentRef: React.RefObject<View | null>) {
+  const [ancestorOffset, setAncestorOffset] = useState(0);
+
+  const measureAncestorOffset = useCallback(
+    (event: LayoutChangeEvent) => {
+      // The very frame KAV is about to do its arithmetic on.
+      const { y: parentRelativeTop } = event.nativeEvent.layout;
+
+      contentRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
+        // A measurement taken mid-teardown reads as zero and proves nothing.
+        if (height === 0) return;
+
+        const offset = pageY - parentRelativeTop;
+
+        setAncestorOffset((current) =>
+          // Sub-pixel rounding between the two measurement paths is expected;
+          // re-rendering on it would only churn.
+          Math.abs(offset - current) < 1 ? current : offset
+        );
+      });
+    },
+    [contentRef]
+  );
+
+  return { ancestorOffset, measureAncestorOffset };
+}

package/src/chat/elements/ChatKeyboardAvoidingView/index.ts

@@ -0,0 +1 @@
+export { ChatKeyboardAvoidingView } from './ChatKeyboardAvoidingView';

package/src/chat/elements/ChatKeyboardAvoidingView/styles.ts

@@ -0,0 +1,14 @@
+// Styles for ChatKeyboardAvoidingView. The component is a pure layout shell —
+// the page wrapper owns the background colour — so it only claims the flex box.
+
+import { StyleSheet } from 'react-native';
+
+export const useStyles = () => {
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+  });
+
+  return { styles };
+};

package/src/chat/elements/ConversationChatAvatar/ConversationChatAvatar.tsx

@@ -0,0 +1,61 @@
+// ConversationChatAvatar element — ported from AmityUiKitWeb
+// v4/chat/elements/ConversationChatAvatar.
+// Renders a 1:1 conversation avatar for the resolved "other" member:
+// composes the base Avatar atom with an optional ModeratorBadge indicator.
+//
+// The web version types its input as `Amity.User` and resolves the image URL
+// via the SDK's `FileRepository.fileUrlWithSize(...)`. To keep this element
+// presentational, those SDK reads are replaced by plain props: the composing
+// component picks the other member and passes an already-resolved `avatarUrl`
+// and `displayName`.
+
+// 1. React / RN imports
+import { type ReactNode } from 'react';
+
+// 2. Internal imports (relative)
+import { Avatar } from '../../../core/design/atoms/Avatar';
+import { ModeratorBadge } from '../../../core/design/elements/ModeratorBadge';
+
+// 3. Types
+export type ConversationChatAvatarProps = {
+  /** Resolved avatar image URL of the other member (replaces the web SDK read). */
+  avatarUrl?: string;
+  /** Display name of the other member; drives the text-fallback initials. */
+  displayName?: string;
+  /** Render the deleted-user placeholder (user icon) instead of the member. */
+  isDeleted?: boolean;
+  /** Show the moderator badge indicator. */
+  isModerator?: boolean;
+};
+
+// 4. Named function component
+export function ConversationChatAvatar({
+  avatarUrl,
+  displayName,
+  isDeleted,
+  isModerator,
+}: ConversationChatAvatarProps) {
+  const indicator: ReactNode = isModerator ? <ModeratorBadge /> : undefined;
+
+  if (isDeleted) {
+    return (
+      <Avatar variant="icon" shape="rounded" size={40} indicator={indicator} />
+    );
+  }
+
+  if (!displayName && !avatarUrl) return null;
+
+  const name = displayName ?? '';
+  const initials = name.trim().charAt(0).toUpperCase() || '?';
+
+  return (
+    <Avatar
+      variant={avatarUrl ? 'image' : 'text'}
+      shape="rounded"
+      size={40}
+      imageUrl={avatarUrl}
+      initials={initials}
+      indicator={indicator}
+    />
+  );
+}

package/src/chat/elements/ConversationChatAvatar/index.ts

@@ -0,0 +1,2 @@
+export { ConversationChatAvatar } from './ConversationChatAvatar';
+export type { ConversationChatAvatarProps } from './ConversationChatAvatar';