@amityco/react-native-social-uikit 4.1.0 → 4.1.1-d7da0c5c.0

package/src/social/components/Toast/index.tsx

@@ -6,24 +6,38 @@ import { memo, useEffect, useRef } from 'react';
 import { Typography } from '../../../core/components/Typography/Typography';
 import { informative, failed, success } from '../../../core/assets/icons';
 import { CircularProgressIndicator } from '../CircularProgressIndicator';
+import { AmityIcon } from '../../../core/design/icons';
 
 const Toast = () => {
   const { hideToast, toast } = useToast();
-  const { styles, theme } = useStyles(toast.bottomPosition);
+  const { styles, theme, iconColor } = useStyles(
+    toast.bottomPosition,
+    toast.variant
+  );
+  const isCustom = toast.variant === 'custom';
   const timeoutRef = useRef<number | null>(null);
   const fadeIn = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
     if (toast.visible) {
+      // For the custom (chat) loading toast, `duration` is an upper bound (web uses
+      // 60s) that the caller cancels early via `hideToast` on load-complete — so the
+      // fade must stay prompt (500ms) rather than track `duration`, otherwise a 60s
+      // fade renders the spinner invisible. The default-variant loading toast (poll)
+      // keeps its original duration-tracked fade.
+      const fadeDuration =
+        toast.type === 'loading' && toast.variant !== 'custom'
+          ? toast.duration
+          : 500;
       Animated.timing(fadeIn, {
         toValue: 1,
-        duration: toast.type === 'loading' ? toast.duration : 500,
+        duration: fadeDuration,
         useNativeDriver: false,
       }).start(() => {
         timeoutRef.current = setTimeout(() => {
           Animated.timing(fadeIn, {
             toValue: 0,
-            duration: toast.type === 'loading' ? toast.duration : 500,
+            duration: fadeDuration,
             useNativeDriver: false,
           }).start(hideToast);
         }, toast.duration);
@@ -49,30 +63,44 @@ const Toast = () => {
           backgroundColor={theme.colors.background}
         />
       )}
-      {toast.type === 'success' && (
-        <SvgXml
-          xml={success()}
-          width="24"
-          height="24"
-          color={theme.colors.background}
-        />
-      )}
-      {toast.type === 'failed' && (
-        <SvgXml
-          width="24"
-          height="24"
-          xml={failed()}
-          color={theme.colors.background}
-        />
-      )}
-      {toast.type === 'informative' && (
-        <SvgXml
-          width="24"
-          height="24"
-          xml={informative()}
-          color={theme.colors.background}
-        />
-      )}
+      {toast.type === 'success' &&
+        (isCustom ? (
+          <AmityIcon name="check-circle-s" size={24} color={iconColor} />
+        ) : (
+          <SvgXml
+            xml={success()}
+            width="24"
+            height="24"
+            color={theme.colors.background}
+          />
+        ))}
+      {toast.type === 'failed' &&
+        (isCustom ? (
+          // Web chat toast (Toast atom, variant 'error'): ExclamationCircle tinted
+          // with --asc-color-icon-customtoast-default. Custom variant must show it —
+          // previously custom failed toasts had NO icon (web/RN parity gap).
+          <AmityIcon name="exclamation-circle-r" size={24} color={iconColor} />
+        ) : (
+          <SvgXml
+            width="24"
+            height="24"
+            xml={failed()}
+            color={theme.colors.background}
+          />
+        ))}
+      {toast.type === 'informative' &&
+        (isCustom ? (
+          // Web chat toast (Toast atom, variant 'informative'): InfoCircle tinted
+          // with --asc-color-icon-customtoast-default.
+          <AmityIcon name="info-circle-r" size={24} color={iconColor} />
+        ) : (
+          <SvgXml
+            width="24"
+            height="24"
+            xml={informative()}
+            color={theme.colors.background}
+          />
+        ))}
       <Typography.Body style={styles.message}>{toast.message}</Typography.Body>
     </Animated.View>
   );

package/src/social/components/Toast/styles.ts

@@ -2,10 +2,21 @@ import { StyleSheet } from 'react-native';
 import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from '../../../core/providers/AmityUIKitProvider';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useToken } from '../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../core/design/tokens/amity-color-tokens';
 
-export const useStyles = (bottomPosition: number = 16) => {
+export const useStyles = (
+  bottomPosition: number = 16,
+  variant: 'default' | 'custom' = 'default'
+) => {
   const theme = useTheme<MyMD3Theme>();
   const { bottom } = useSafeAreaInsets();
+  const token = useToken();
+
+  // Custom variant: the dark pill used by chat notifications, bound to the
+  // CustomToast design tokens (Surface/Text/Icon CustomToast). Default variant
+  // keeps the app-wide toast appearance (react-native-paper theme).
+  const isCustom = variant === 'custom';
 
   const styles = StyleSheet.create({
     toast: {
@@ -20,16 +31,24 @@ export const useStyles = (bottomPosition: number = 16) => {
       position: 'absolute',
       alignItems: 'center',
       paddingHorizontal: 12,
-      backgroundColor: theme.colors.base,
+      backgroundColor: isCustom
+        ? token(AmityColorToken.SurfaceCustomToastDefaultDefault)
+        : theme.colors.base,
+      ...(isCustom ? { minHeight: 56 } : null),
     },
     message: {
       flex: 1,
-      color: theme.colors.background,
+      color: isCustom
+        ? token(AmityColorToken.TextCustomToastDefault)
+        : theme.colors.background,
     },
   });
 
   return {
     theme,
     styles,
+    iconColor: isCustom
+      ? token(AmityColorToken.IconCustomToastDefault)
+      : theme.colors.background,
   };
 };

package/src/social/features/chat/components/AmityChatListItem/AmityChatListItem.tsx

@@ -0,0 +1,394 @@
+// AmityChatListItem — ported from AmityUiKitWeb v4/chat/features/home/components/ChannelItem.
+// One row of the channel list: leading avatar (1:1 conversation or group), a name
+// row (name + optional member count + timestamp) and a preview row (last message
+// preview + mention/unread/archived trailing badges).
+//
+// RN adaptations from web:
+//   - Web resolves the current user via `useSDK().currentUserId`; here we read
+//     `Client.getCurrentUser()` (prop `currentUserId` overrides it).
+//   - Avatar image URLs are resolved from a fileId via the shared `useFile` hook
+//     (getFile → fileUrlWithSize), then handed to the presentational avatars.
+//   - Web `onClick`/internal ChatNavigation is replaced by a plain `onPress`
+//     callback wired by the page (no React Navigation import here).
+//   - Search highlighting is out of scope for the home list (never passed a query).
+
+// 1. React / RN imports
+import { useMemo, type ReactNode } from 'react';
+import { View, Pressable } from 'react-native';
+
+// 2. Third-party imports
+import { Client } from '@amityco/ts-sdk-react-native';
+
+// 3. Internal imports (relative)
+import { Typography } from '../../../../../core/design/components/Typography';
+import { Badge } from '../../../../../core/design/atoms/Badge';
+import { Skeleton } from '../../../../../core/design/components/Skeleton';
+import { AmityIcon } from '../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
+import { useString } from '../../../../../core/localization';
+import useFile from '../../../../../core/hooks/useFile';
+import { Avatar } from '../../elements/Avatar';
+import { ConversationChatAvatar } from '../../elements/ConversationChatAvatar';
+import { ArchivedBadge } from '../../elements/ArchivedBadge';
+import { formatTimestamp } from '../../utils/timestamp';
+import { highlightMatch } from '../../utils/highlightMatch';
+import { useStyles } from './styles';
+
+// Search-match highlight colours (web channelItem__highlight /
+// channelItem__highlightBold). Both are referenced so either style is available.
+const HIGHLIGHT_TOKEN = {
+  primary: AmityColorToken.TextListHeaderDefaultHighlight,
+  bold: AmityColorToken.TextListTextDescriptionDefaultHighlight,
+} as const;
+
+// 4. Types
+export type AmityChatListItemProps = {
+  channel: Amity.Channel;
+  isArchived?: boolean;
+  hideUnreadIndicators?: boolean;
+  /** Overrides the SDK-resolved current user id. */
+  currentUserId?: string;
+  /** Row press handler — the page wires navigation. */
+  onPress?: () => void;
+  /** When set (search results), highlights the matched substring in the name. */
+  searchQuery?: string;
+  /** Which highlight colour to use for the matched substring. */
+  highlightStyle?: keyof typeof HIGHLIGHT_TOKEN;
+};
+
+const MODERATOR_ROLES = [
+  'moderator',
+  'community-moderator',
+  'channel-moderator',
+];
+const MENTION_REGEX = /@\S+/g;
+const PREVIEW_ICON_SIZE = 20;
+
+type DeletableUser = (Amity.InternalUser & { isDeleted?: boolean }) | undefined;
+
+function hasModeratorRole(roles?: string[]): boolean {
+  if (!roles || roles.length === 0) return false;
+  return roles.some((role) => MODERATOR_ROLES.includes(role));
+}
+
+function formatMemberCount(count: number): string {
+  if (count >= 1000) return `${(count / 1000).toFixed(1)}K`;
+  return String(count);
+}
+
+// 5. Named function component
+export function AmityChatListItem({
+  channel,
+  isArchived = false,
+  hideUnreadIndicators = false,
+  currentUserId: currentUserIdProp,
+  onPress,
+  searchQuery,
+  highlightStyle = 'primary',
+}: AmityChatListItemProps) {
+  const { styles, token } = useStyles();
+
+  const currentUserId = useMemo(
+    () => currentUserIdProp ?? Client.getCurrentUser()?.userId,
+    [currentUserIdProp]
+  );
+
+  const isConversation = channel.type === 'conversation';
+  const otherMember = isConversation
+    ? channel.previewMembers?.find((m) => m.userId !== currentUserId)
+    : undefined;
+  const otherUser = otherMember?.user as DeletableUser;
+  const isUserDeleted = Boolean(otherUser?.isDeleted);
+  const isModerator = hasModeratorRole(otherMember?.roles);
+
+  // Resolve the leading avatar image. For a conversation it's the OTHER
+  // participant's avatar (their avatarFileId), else the channel avatar. Called
+  // once, unconditionally, to keep hook order stable across channel types.
+  const avatarFileId = isConversation
+    ? otherUser?.avatarFileId
+    : channel.avatarFileId;
+  const avatarUrl = useFile({ fileId: avatarFileId ?? '' });
+
+  const timestampSource = channel.lastActivity;
+  const timestamp = timestampSource ? formatTimestamp(timestampSource) : '';
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.container,
+        pressed && styles.containerPressed,
+      ]}
+    >
+      <View style={styles.avatarWrapper}>
+        {isConversation ? (
+          <ConversationChatAvatar
+            avatarUrl={avatarUrl}
+            displayName={otherUser?.displayName}
+            isDeleted={isUserDeleted}
+            isModerator={isModerator}
+          />
+        ) : (
+          <Avatar.GroupChat avatarUrl={avatarUrl} isPublic={channel.isPublic} />
+        )}
+      </View>
+
+      <View style={styles.body}>
+        <View style={styles.nameRow}>
+          <View style={styles.nameGroup}>
+            <ChannelName
+              channel={channel}
+              otherUser={otherUser}
+              isUserDeleted={isUserDeleted}
+              searchQuery={searchQuery}
+              highlightStyle={highlightStyle}
+            />
+          </View>
+          <Typography
+            variant="caption"
+            style={styles.timestamp}
+            numberOfLines={1}
+          >
+            {timestamp}
+          </Typography>
+        </View>
+
+        <View style={styles.previewRow}>
+          <MessagePreview
+            preview={channel.messagePreview}
+            iconColor={token(AmityColorToken.IconListDescriptionGeneral)}
+          />
+          <View style={styles.notifications}>
+            {!hideUnreadIndicators && channel.isMentioned && <MentionBadge />}
+            {isArchived && <ArchivedBadge />}
+            {!hideUnreadIndicators && (
+              <UnreadBadge count={channel.unreadCount ?? 0} />
+            )}
+          </View>
+        </View>
+      </View>
+    </Pressable>
+  );
+}
+
+// --- Sub-views ---------------------------------------------------------------
+
+function ChannelName({
+  channel,
+  otherUser,
+  isUserDeleted,
+  searchQuery,
+  highlightStyle = 'primary',
+}: {
+  channel: Amity.Channel;
+  otherUser: DeletableUser;
+  isUserDeleted: boolean;
+  searchQuery?: string;
+  highlightStyle?: keyof typeof HIGHLIGHT_TOKEN;
+}) {
+  const { styles, token } = useStyles();
+  const deletedUserLabel = useString('amity_chat_deleted_user');
+
+  // Render a name with the matched search substring highlighted (web ChannelItem).
+  const renderName = (name: string) =>
+    searchQuery
+      ? highlightMatch(name, searchQuery, {
+          color: token(HIGHLIGHT_TOKEN[highlightStyle]),
+        })
+      : name;
+
+  if (channel.type === 'conversation') {
+    if (isUserDeleted) {
+      return (
+        <Typography style={styles.nameDeleted} numberOfLines={1}>
+          {deletedUserLabel}
+        </Typography>
+      );
+    }
+    const name = otherUser?.displayName ?? channel.displayName ?? '';
+    return (
+      <Typography style={styles.name} numberOfLines={1}>
+        {renderName(name)}
+      </Typography>
+    );
+  }
+
+  const memberCount = channel.memberCount;
+  const name = channel.displayName ?? '';
+  return (
+    <>
+      <Typography style={styles.name} numberOfLines={1}>
+        {renderName(name)}
+      </Typography>
+      {memberCount != null && memberCount > 0 && (
+        <Typography style={styles.memberCount} numberOfLines={1}>
+          ({formatMemberCount(memberCount)})
+        </Typography>
+      )}
+    </>
+  );
+}
+
+type PreviewStrings = {
+  noMessage: string;
+  sentPhoto: string;
+  sentVideo: string;
+  noPreview: string;
+};
+
+function getPreviewText(
+  preview: Amity.Channel['messagePreview'],
+  t: PreviewStrings
+): string {
+  if (!preview) return t.noMessage;
+
+  const text = (preview.data as { text?: string } | undefined)?.text;
+  if (typeof text === 'string' && text.length > 0) return text;
+
+  switch (preview.dataType) {
+    case 'text':
+      return text ?? '';
+    case 'image':
+      return t.sentPhoto;
+    case 'video':
+      return t.sentVideo;
+    case 'file':
+    case 'audio':
+      return t.noPreview;
+    default:
+      return t.noMessage;
+  }
+}
+
+function MessagePreview({
+  preview,
+  iconColor,
+}: {
+  preview: Amity.Channel['messagePreview'];
+  iconColor: string;
+}) {
+  const { styles } = useStyles();
+  const previewDeletedLabel = useString('amity_chat_preview_deleted');
+  const previewStrings: PreviewStrings = {
+    noMessage: useString('amity_chat_preview_no_message'),
+    sentPhoto: useString('amity_chat_preview_sent_photo'),
+    sentVideo: useString('amity_chat_preview_sent_video'),
+    noPreview: useString('amity_chat_message_no_preview'),
+  };
+
+  if (preview?.isDeleted) {
+    return (
+      <View style={styles.previewWithIcon}>
+        <AmityIcon name="trash-s" size={PREVIEW_ICON_SIZE} color={iconColor} />
+        <Typography style={styles.preview} numberOfLines={2}>
+          {previewDeletedLabel}
+        </Typography>
+      </View>
+    );
+  }
+
+  const text = getPreviewText(preview, previewStrings);
+
+  if (preview?.dataType === 'image' || preview?.dataType === 'video') {
+    const iconName = preview.dataType === 'image' ? 'image-s' : 'circle-play-s';
+    return (
+      <View style={styles.previewWithIcon}>
+        <AmityIcon name={iconName} size={PREVIEW_ICON_SIZE} color={iconColor} />
+        <Typography style={styles.preview} numberOfLines={2}>
+          {text}
+        </Typography>
+      </View>
+    );
+  }
+
+  if (preview?.dataType !== 'text' || text.length === 0) {
+    return (
+      <Typography style={styles.preview} numberOfLines={2}>
+        {text}
+      </Typography>
+    );
+  }
+
+  // Highlight @mentions inside the text preview (base rendering, not search).
+  const parts: ReactNode[] = [];
+  let cursor = 0;
+  let matchIndex = 0;
+  for (const match of text.matchAll(MENTION_REGEX)) {
+    const start = match.index ?? 0;
+    const token = match[0];
+    const end = start + token.length;
+    if (start > cursor) {
+      parts.push(
+        <Typography key={`t-${cursor}`}>{text.slice(cursor, start)}</Typography>
+      );
+    }
+    parts.push(
+      <Typography key={`m-${matchIndex}`} style={styles.previewMention}>
+        {token}
+      </Typography>
+    );
+    cursor = end;
+    matchIndex += 1;
+  }
+
+  if (parts.length === 0) {
+    return (
+      <Typography style={styles.preview} numberOfLines={2}>
+        {text}
+      </Typography>
+    );
+  }
+
+  if (cursor < text.length) {
+    parts.push(<Typography key="t-tail">{text.slice(cursor)}</Typography>);
+  }
+
+  return (
+    <Typography style={styles.preview} numberOfLines={2}>
+      {parts}
+    </Typography>
+  );
+}
+
+function MentionBadge() {
+  return (
+    <Badge.Icon
+      icon="at-s"
+      preset={{ family: 'chat', case: 'mention' }}
+      size={20}
+    />
+  );
+}
+
+function UnreadBadge({ count }: { count: number }) {
+  if (count <= 0) return null;
+  return (
+    <Badge.Label
+      label={count > 99 ? '99+' : String(count)}
+      preset={{ family: 'general', case: 'notification' }}
+      size={20}
+    />
+  );
+}
+
+// --- Skeleton ----------------------------------------------------------------
+
+// Skeleton row (surface-list-skeleton background): an avatar circle (2.5rem = 40)
+// plus TWO stacked pill lines mirroring the real row's name + message-preview
+// lines (per QA — the web build the team QAs against shows two lines). Lines are
+// 10px tall pills; name ~140 wide, preview ~100 wide.
+function AmityChatListItemSkeleton() {
+  const { styles } = useStyles();
+  return (
+    <View style={styles.skeletonRow}>
+      <Skeleton circle width={40} height={40} />
+      <View style={styles.skeletonLines}>
+        <Skeleton width={140} height={10} borderRadius={12} />
+        <Skeleton width={100} height={10} borderRadius={12} />
+      </View>
+    </View>
+  );
+}
+
+AmityChatListItem.Skeleton = AmityChatListItemSkeleton;

package/src/social/features/chat/components/AmityChatListItem/index.ts

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

package/src/social/features/chat/components/AmityChatListItem/styles.ts

@@ -0,0 +1,125 @@
+// Styles for AmityChatListItem — ported from AmityUiKitWeb ChannelItem.module.css.
+// Layout geometry comes from the SoT design tokens (geometry.json → lists.listItem:
+// minHeight 58, padding [8,16,8,16], gap 8, leadingElement.size 40, title 15/20,
+// description 13/18); the remaining gaps mirror the web CSS (rem → px ×16).
+// Every colour resolves through a design token (no hardcoded hex).
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    // SoT lists.listItem: minHeight 58, padding [8,16,8,16], gap 8, align top.
+    container: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: 8,
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+      minHeight: 58,
+      backgroundColor: 'transparent',
+    },
+    containerPressed: {
+      backgroundColor: token(AmityColorToken.SurfaceListDefaultHover),
+    },
+    // SoT leadingElement.size 40.
+    avatarWrapper: {
+      width: 40,
+      height: 40,
+    },
+    body: {
+      flex: 1,
+      minWidth: 0,
+      gap: 2, // web body gap 0.125rem
+    },
+    nameRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8, // web nameRow gap 0.5rem
+    },
+    nameGroup: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'baseline',
+      gap: 4, // web nameGroup gap 0.25rem
+      minWidth: 0,
+    },
+    // SoT title: size 15, lineHeight 20, weight 590 (≈'600').
+    name: {
+      flexShrink: 1,
+      fontSize: 15,
+      lineHeight: 20,
+      fontWeight: '600',
+      color: token(AmityColorToken.TextListHeaderDefaultDefault),
+    },
+    nameDeleted: {
+      fontSize: 15,
+      lineHeight: 20,
+      fontWeight: '600',
+      color: token(AmityColorToken.TextListHeaderDefaultDefault),
+    },
+    // SoT description: size 13, lineHeight 18.
+    memberCount: {
+      flexShrink: 0,
+      fontSize: 13,
+      lineHeight: 18,
+      color: token(AmityColorToken.TextListSubheadDefaultDefault),
+    },
+    timestamp: {
+      flexShrink: 0,
+      fontSize: 13,
+      lineHeight: 18,
+      color: token(AmityColorToken.TextListTrailingSubtextDefault),
+    },
+    previewRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8, // web previewRow gap 0.5rem
+    },
+    preview: {
+      flex: 1,
+      minWidth: 0,
+      fontSize: 13,
+      lineHeight: 18,
+      color: token(AmityColorToken.TextListTextDescriptionDefaultDefault),
+    },
+    previewMention: {
+      fontWeight: '600',
+      color: token(AmityColorToken.TextListTextDescriptionDefaultDefault),
+    },
+    previewWithIcon: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4, // web previewWithIcon gap 0.25rem
+      minWidth: 0,
+    },
+    notifications: {
+      flexShrink: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4, // web notifications gap 0.25rem
+    },
+    // Web skeleton row: height 3.5rem (SoT skeletonHeight 56), padding 8/16,
+    // gap 0.75rem, skeleton surface background.
+    skeletonRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      height: 56,
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+      backgroundColor: token(AmityColorToken.SurfaceListSkeletonSkeleton),
+    },
+    // Two stacked skeleton lines (name + preview) beside the avatar circle.
+    skeletonLines: {
+      flexDirection: 'column',
+      gap: 6,
+    },
+  });
+
+  return { styles, token };
+};