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

package/src/social/features/chat/features/shared/components/MessageReactorListSheet/MessageReactorListSheet.tsx

@@ -0,0 +1,330 @@
+// MessageReactorListSheet — RN port of AmityUiKitWeb
+// v4/chat/features/shared/components/MessageReactorListSheet/MessageReactorListSheet.tsx.
+// The reactor list shown in a bottom sheet: an underlined tab per distinct
+// reaction (plus an "All" tab), each listing who reacted. This renders the sheet
+// CONTENT only — the orchestrator mounts it inside the repo's @devvie bottom
+// sheet with the same `messageId` + `onClose` contract web's useBubbleMenu uses.
+//
+// RN adaptations from web:
+//   - Live message via MessageRepository.getMessage (web useMessageObject).
+//   - Reactor pagination via useReactorsCollection (web useReactionsCollection);
+//     IntersectionObserver → FlatList onEndReached.
+//   - The RN Tab atom's underlined variant renders a string label only and can't
+//     host web's icon+count node label, so the tab bar is rendered inline reusing
+//     the SoT underlined-tab tokens/geometry.
+
+// 1. React / RN imports
+import { useEffect, useMemo, useState, type ReactNode } from 'react';
+import { FlatList, Pressable, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  FileRepository,
+  MessageRepository,
+} from '@amityco/ts-sdk-react-native';
+
+// 2. Internal imports
+import { Typography } from '../../../../../../../core/design/components/Typography';
+import { Skeleton } from '../../../../../../../core/design/components/Skeleton';
+import { Avatar } from '../../../../../../../core/design/atoms/Avatar';
+import { useString } from '../../../../../../../core/localization';
+import { abbreviateCount } from '../../../../../../../core/utils/abbreviateCount';
+import { useCurrentUserId } from '../../../../hooks/useCurrentUserId';
+import { useMessageReactions } from '../../hooks/useMessageReactions';
+import { useReactorsCollection } from '../../hooks/useReactorsCollection';
+import { ReactionGlyph, SmilePlus } from '../../utils/reactionIcons';
+import { useStyles } from './styles';
+
+// 3. Types
+type MessageReactorListSheetProps = {
+  messageId: string;
+  onClose: () => void;
+  /**
+   * The tapped message, if available. Seeds `currentMessage` so totalCount /
+   * reactionsCount are correct on first render — the sheet mounts from the global
+   * bottom sheet where the getMessage live-object can lag, which would otherwise
+   * show the empty state despite reactions existing. getMessage still keeps it live.
+   */
+  initialMessage?: Amity.Message | null;
+  /**
+   * The height (px) the global bottom sheet was opened with. The @devvie sheet
+   * wraps our content in an AUTO-height inner View (only the outer Animated.View
+   * carries the sheet height), so a `flex:1` child collapses to 0 and the
+   * FlatList never shows. We give the content an EXPLICIT height instead —
+   * sheetHeight minus the drag-handle and bottom safe-area the sheet reserves —
+   * so the FlatList has a bounded parent to fill and scroll within.
+   */
+  sheetHeight?: number;
+};
+
+const ALL_TAB = 'all' as const;
+
+// @devvie reserves this above the content for its drag handle
+// (DEFAULT_HANDLE_BAR_DEFAULT_HEIGHT: paddingTop 10 + height 5 + paddingBottom 10).
+const DRAG_HANDLE_HEIGHT = 25;
+
+// 4. Named function component
+export function MessageReactorListSheet({
+  messageId,
+  onClose,
+  initialMessage = null,
+  sheetHeight,
+}: MessageReactorListSheetProps) {
+  const { styles } = useStyles();
+  const insets = useSafeAreaInsets();
+  // The content area the @devvie sheet actually gives our children.
+  const contentHeight = sheetHeight
+    ? sheetHeight - DRAG_HANDLE_HEIGHT - insets.bottom
+    : undefined;
+  const currentUserId = useCurrentUserId();
+  const { removeReaction } = useMessageReactions();
+  const allTabLabel = useString('amity_chat_tab_all');
+
+  // Live message (web useMessageObject), seeded from the tapped message.
+  const [currentMessage, setCurrentMessage] = useState<Amity.Message | null>(
+    initialMessage
+  );
+  useEffect(() => {
+    const unsubscribe = MessageRepository.getMessage(messageId, (result) => {
+      // Only overwrite once real data arrives — a loading callback with no data
+      // must not wipe the seeded initialMessage (which keeps totalCount correct).
+      if (result.data) setCurrentMessage(result.data);
+    });
+    return () => unsubscribe();
+  }, [messageId]);
+
+  const isMessageDeleted = !!currentMessage?.isDeleted;
+  const reactionMap =
+    (currentMessage?.reactions as Record<string, number> | undefined) ?? {};
+  const totalCount = isMessageDeleted ? 0 : currentMessage?.reactionsCount ?? 0;
+
+  const distinctNames = useMemo(() => {
+    if (isMessageDeleted) return [];
+    return Object.entries(reactionMap)
+      .filter(([, count]) => count > 0)
+      .sort((a, b) => (a[1] === b[1] ? a[0].localeCompare(b[0]) : b[1] - a[1]))
+      .map(([name]) => name);
+  }, [currentMessage?.reactions, isMessageDeleted]);
+
+  const [activeTab, setActiveTab] = useState<string>(
+    distinctNames.length > 1 ? ALL_TAB : distinctNames[0] ?? ALL_TAB
+  );
+
+  useEffect(() => {
+    if (activeTab === ALL_TAB) return;
+    if (distinctNames.includes(activeTab)) return;
+    setActiveTab(
+      distinctNames.length > 1 ? ALL_TAB : distinctNames[0] ?? ALL_TAB
+    );
+  }, [activeTab, distinctNames]);
+
+  const { reactors, isLoading, isLoadingFirstPage, hasMore, loadMore } =
+    useReactorsCollection({
+      referenceType: 'message',
+      referenceId: messageId,
+      limit: 25,
+      ...(activeTab !== ALL_TAB ? { reactionName: activeTab } : {}),
+    });
+
+  const myReactor = useMemo(() => {
+    if (!currentUserId) return null;
+    return reactors.find((r) => r.userId === currentUserId) ?? null;
+  }, [reactors, currentUserId]);
+
+  const others = useMemo(
+    () => (myReactor ? reactors.filter((r) => r !== myReactor) : reactors),
+    [reactors, myReactor]
+  );
+
+  async function handleOwnRowPress() {
+    if (!myReactor || !currentMessage) return;
+    onClose();
+    await removeReaction({
+      message: currentMessage,
+      reactionName: myReactor.reactionName,
+    });
+  }
+
+  const rows = useMemo(() => {
+    const list: { reactor: Amity.Reactor; isOwn: boolean }[] = [];
+    if (myReactor) list.push({ reactor: myReactor, isOwn: true });
+    for (const r of others) list.push({ reactor: r, isOwn: false });
+    return list;
+  }, [myReactor, others]);
+
+  // Tab items (web `tabs()`).
+  const tabItems: { value: string; icon?: ReactNode; text: string }[] = [];
+  const showAllTab = distinctNames.length === 0 || distinctNames.length > 1;
+  if (showAllTab) {
+    tabItems.push({
+      value: ALL_TAB,
+      text: `${allTabLabel} ${abbreviateCount(totalCount)}`,
+    });
+  }
+  for (const name of distinctNames) {
+    tabItems.push({
+      value: name,
+      icon: <ReactionGlyph name={name} size={20} />,
+      text: `${abbreviateCount(reactionMap[name] ?? 0)}`,
+    });
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        contentHeight ? { height: contentHeight } : styles.containerFill,
+      ]}
+    >
+      <View style={styles.tabList}>
+        {tabItems.map((t) => {
+          const active = activeTab === t.value;
+          return (
+            <Pressable
+              key={t.value}
+              style={styles.tab}
+              onPress={() => setActiveTab(t.value)}
+              accessibilityRole="tab"
+              accessibilityState={{ selected: active }}
+            >
+              <View style={styles.tabLabel}>
+                {t.icon}
+                <Typography
+                  style={[
+                    styles.tabLabelText,
+                    active
+                      ? styles.tabLabelTextActive
+                      : styles.tabLabelTextDefault,
+                  ]}
+                >
+                  {t.text}
+                </Typography>
+              </View>
+              <View
+                style={[
+                  styles.tabIndicator,
+                  active && styles.tabIndicatorActive,
+                ]}
+              />
+            </Pressable>
+          );
+        })}
+      </View>
+
+      {totalCount === 0 ? (
+        <EmptyState />
+      ) : (
+        <FlatList
+          style={styles.flatList}
+          data={rows}
+          keyExtractor={(item, index) =>
+            `${item.reactor.userId ?? 'unknown'}-${index}`
+          }
+          renderItem={({ item }) => (
+            <ReactorRow
+              reactor={item.reactor}
+              isOwn={item.isOwn}
+              onPress={item.isOwn ? handleOwnRowPress : undefined}
+            />
+          )}
+          onEndReachedThreshold={0.4}
+          onEndReached={() => {
+            if (hasMore && !isLoading && !isLoadingFirstPage) loadMore();
+          }}
+          ListFooterComponent={
+            isLoadingFirstPage || isLoading ? <SkeletonRows count={3} /> : null
+          }
+          contentContainerStyle={styles.list}
+        />
+      )}
+    </View>
+  );
+}
+
+// --- Reactor row -------------------------------------------------------------
+type ReactorRowProps = {
+  reactor: Amity.Reactor;
+  isOwn?: boolean;
+  onPress?: () => void;
+};
+
+function ReactorRow({ reactor, isOwn = false, onPress }: ReactorRowProps) {
+  const { styles } = useStyles();
+  const tapToRemoveLabel = useString(
+    'amity_common_button_tap_to_remove_reaction'
+  );
+  const displayName = reactor.user?.displayName ?? reactor.user?.userId ?? '';
+  const avatarFileUrl = (
+    reactor.user?.avatar as { fileUrl?: string } | undefined
+  )?.fileUrl;
+  const imageUrl = avatarFileUrl
+    ? FileRepository.fileUrlWithSize(avatarFileUrl, 'small')
+    : undefined;
+
+  return (
+    <Pressable
+      style={styles.row}
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={isOwn ? tapToRemoveLabel : displayName}
+    >
+      {reactor.user && (
+        <Avatar
+          variant={imageUrl ? 'image' : 'text'}
+          shape="rounded"
+          size={32}
+          imageUrl={imageUrl}
+          initials={displayName.trim().charAt(0).toUpperCase() || '?'}
+        />
+      )}
+      <View style={styles.rowText}>
+        <Typography variant="bodyBold" style={styles.rowTitle}>
+          {reactor.user?.displayName ?? ''}
+        </Typography>
+        {isOwn ? (
+          <Typography variant="caption" style={styles.rowCaption}>
+            {tapToRemoveLabel}
+          </Typography>
+        ) : null}
+      </View>
+      <ReactionGlyph name={reactor.reactionName} size={24} />
+    </Pressable>
+  );
+}
+
+// --- Empty state -------------------------------------------------------------
+function EmptyState() {
+  const { styles, emptyStateIconColor } = useStyles();
+  const title = useString('amity_common_button_no_reactions_yet');
+  const description = useString(
+    'amity_common_label_be_first_to_react',
+    'message'
+  );
+  return (
+    <View style={styles.emptyState}>
+      <SmilePlus size={48} color={emptyStateIconColor} />
+      <View style={styles.emptyStateText}>
+        <Typography variant="titleBold" style={styles.emptyStateTitle}>
+          {title}
+        </Typography>
+        <Typography variant="caption" style={styles.emptyStateDescription}>
+          {description}
+        </Typography>
+      </View>
+    </View>
+  );
+}
+
+// --- Skeleton rows -----------------------------------------------------------
+function SkeletonRows({ count }: { count: number }) {
+  const { styles } = useStyles();
+  return (
+    <>
+      {Array.from({ length: count }).map((_, i) => (
+        <View key={i} style={styles.skeletonRow}>
+          <Skeleton circle width={40} height={40} />
+          <Skeleton width={140} height={10} borderRadius={12} />
+        </View>
+      ))}
+    </>
+  );
+}

package/src/social/features/chat/features/shared/components/MessageReactorListSheet/index.tsx

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

package/src/social/features/chat/features/shared/components/MessageReactorListSheet/styles.ts

@@ -0,0 +1,150 @@
+// Styles for MessageReactorListSheet — ported from AmityUiKitWeb
+// v4/chat/features/shared/components/MessageReactorListSheet/MessageReactorListSheet.module.css.
+// The web drawer-specific bits (margin 0 -1rem, 90vh min/max-height, desktop
+// 30rem width, vaul drag) are omitted: in RN the @devvie/bottom-sheet host owns
+// height/width/drag, so this renders as flex content inside it. Tab-bar visuals
+// reuse the SoT underlined-tab tokens/geometry (the RN Tab atom can't host an
+// icon+count node label, so the bar is rendered inline — see component note).
+
+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({
+    // .messageReactorListSheet
+    // NOTE: no `flex: 1` here. The @devvie sheet wraps our content in an
+    // AUTO-height inner View, so there is no free space for a flex child to grow
+    // into — and in RN `flex: 1` means `flexBasis: 0`, which would then collapse
+    // the container to height 0 (tabs overflow-paint, list vanishes). The
+    // component instead sets an EXPLICIT `height` (contentHeight) from the sheet
+    // height; `containerFill` is only a fallback when that height is unknown.
+    container: {
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+    },
+    containerFill: {
+      flex: 1,
+    },
+    // Once the container has a definite height, the FlatList CAN flex to fill the
+    // space below the fixed-height tab bar (there is now free space to grow into).
+    flatList: {
+      flex: 1,
+    },
+    // .messageReactorListSheet__tabList (underlined: row, gap 20, padding 0 per web sheet)
+    tabList: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 20,
+      paddingHorizontal: 16,
+    },
+    // one underlined tab (SoT geometry: height 56, paddingTop 16, gap 14, indicator 2)
+    tab: {
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: 14,
+      height: 56,
+      paddingTop: 16,
+      backgroundColor: 'transparent',
+    },
+    // .messageReactorListSheet__tabLabel
+    tabLabel: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 8,
+    },
+    tabLabelText: {
+      fontSize: 17,
+      lineHeight: 24,
+    },
+    // underlined-tab label colours/weights (SoT Text/Tab/Underlined tokens)
+    tabLabelTextActive: {
+      fontWeight: '600',
+      color: token(AmityColorToken.TextTabUnderlinedActive),
+    },
+    tabLabelTextDefault: {
+      fontWeight: '400',
+      color: token(AmityColorToken.TextTabUnderlinedDefault),
+    },
+    tabIndicator: {
+      width: '100%',
+      height: 2,
+      backgroundColor: 'transparent',
+    },
+    tabIndicatorActive: {
+      backgroundColor: token(AmityColorToken.LineTabUnderlinedActive),
+    },
+    // .messageReactorListSheet__list
+    list: {
+      flex: 1,
+      paddingTop: 8,
+      paddingBottom: 48,
+    },
+    // .messageReactorListSheet__row
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      width: '100%',
+      height: 56,
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+      backgroundColor: 'transparent',
+    },
+    // .messageReactorListSheet__rowText
+    rowText: {
+      flex: 1,
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      minWidth: 0,
+    },
+    // .messageReactorListSheet__rowTitle
+    rowTitle: {
+      color: token(AmityColorToken.TextListHeaderDefaultDefault),
+    },
+    // .messageReactorListSheet__rowCaption
+    rowCaption: {
+      color: token(AmityColorToken.TextListTextDescriptionDefaultDefault),
+    },
+    // .messageReactorListSheet__emptyState
+    emptyState: {
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 16,
+      paddingTop: 48,
+      paddingHorizontal: 24,
+      paddingBottom: 24,
+      width: '100%',
+    },
+    // .messageReactorListSheet__emptyStateText
+    emptyStateText: {
+      flexDirection: 'column',
+      alignItems: 'center',
+    },
+    // .messageReactorListSheet__emptyStateTitle
+    emptyStateTitle: {
+      color: token(AmityColorToken.TextEmptyStateTitleDefault),
+    },
+    // .messageReactorListSheet__emptyStateDescription
+    emptyStateDescription: {
+      color: token(AmityColorToken.TextEmptyStateDescriptionDefault),
+    },
+    // skeleton row line (web Skeleton.Line 8.75rem × 0.625rem, radius 0.75rem)
+    skeletonRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      height: 56,
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+    },
+  });
+
+  // Empty-state SmilePlus glyph colour — web `--asc-color-icon-emptystate-icon-default`.
+  const emptyStateIconColor = token(AmityColorToken.IconEmptyStateIconDefault);
+
+  return { styles, emptyStateIconColor };
+};

package/src/social/features/chat/features/shared/components/MessageReplyBand/MessageReplyBand.tsx

@@ -0,0 +1,175 @@
+// MessageReplyBand — ported from AmityUiKitWeb features/shared/components/
+// MessageReplyBand. The "Replying to X" band shown above the composer while
+// composing a reply. Tapping the band opens the parent (see-more / image /
+// video); the trailing close button cancels the reply. Web tracked live
+// deletion via useMessageObject; RN has no such hook, so deletion is read from
+// replyTo.isDeleted (the wiring layer supplies a fresh message).
+
+// 1. React / RN imports
+import { Image, Pressable, View } from 'react-native';
+
+// 2. Internal imports
+import { Typography } from '../../../../../../../core/design/components/Typography';
+import { AmityIcon } from '../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+import useFile from '../../../../../../../core/hooks/useFile';
+import { ImageSizeState } from '../../../../../../../core/enums';
+import { useString } from '../../../../../../../core/localization';
+import { useStyles } from './styles';
+
+// 3. Types
+type MessageReplyBandProps = {
+  replyTo: Amity.Message;
+  currentUserId?: string | null;
+  onCancel: () => void;
+  onOpenSeeMore: (text: string, title?: string) => void;
+  onOpenImage: (url: string, message: Amity.Message) => void;
+  onOpenVideo: (message: Amity.Message) => void;
+};
+
+type MessageData = {
+  text?: string;
+  fileId?: string;
+  thumbnailFileId?: string;
+};
+
+// 4. Named function component
+export function MessageReplyBand({
+  replyTo,
+  currentUserId,
+  onCancel,
+  onOpenSeeMore,
+  onOpenImage,
+  onOpenVideo,
+}: MessageReplyBandProps) {
+  const { styles } = useStyles();
+  const yourselfLabel = useString('amity_chat_message_replying_yourself');
+  const unknownUserLabel = useString('amity_chat_unknown_user');
+  const repliedMessageTitle = useString('amity_chat_message_replied_message');
+  const replyingToLabel = useString('amity_chat_replying_to');
+
+  const isParentDeleted = !!replyTo.isDeleted;
+  const isToYourself = replyTo.creatorId === currentUserId;
+  const creatorName = (
+    replyTo as unknown as { creator?: { displayName?: string } }
+  ).creator?.displayName;
+  const replyName = isToYourself
+    ? yourselfLabel
+    : creatorName ?? unknownUserLabel;
+
+  function handleBandPress() {
+    if (isParentDeleted) return;
+    const data = replyTo.data as MessageData | undefined;
+    if (replyTo.dataType === 'text') {
+      onOpenSeeMore((data?.text ?? '').toString(), repliedMessageTitle);
+      return;
+    }
+    if (replyTo.dataType === 'image') {
+      onOpenImage('', replyTo);
+      return;
+    }
+    if (replyTo.dataType === 'video') {
+      onOpenVideo(replyTo);
+    }
+  }
+
+  return (
+    <Pressable
+      style={styles.band}
+      onPress={handleBandPress}
+      disabled={isParentDeleted}
+      accessibilityRole="button"
+      accessibilityLabel={repliedMessageTitle}
+    >
+      <View style={styles.textCol}>
+        <Typography
+          variant="captionBold"
+          style={styles.title}
+          numberOfLines={1}
+        >
+          {replyingToLabel} {replyName}
+        </Typography>
+        <ReplyBandBody replyTo={replyTo} isParentDeleted={isParentDeleted} />
+      </View>
+      {!isParentDeleted ? <ReplyBandThumb replyTo={replyTo} /> : null}
+      <Pressable
+        style={styles.close}
+        onPress={onCancel}
+        accessibilityRole="button"
+        accessibilityLabel="Cancel reply"
+      >
+        <AmityIcon
+          name="cross-r"
+          size={16}
+          tokenColor={AmityColorToken.IconIconButtonGhostSecondaryDefault}
+        />
+      </Pressable>
+    </Pressable>
+  );
+}
+
+function ReplyBandBody({
+  replyTo,
+  isParentDeleted,
+}: {
+  replyTo: Amity.Message;
+  isParentDeleted: boolean;
+}) {
+  const { styles } = useStyles();
+  const unavailableLabel = useString('amity_chat_message_unavailable');
+  const photoLabel = useString('amity_chat_reply_photo_label');
+  const videoLabel = useString('amity_chat_reply_video_label');
+
+  let body: string | null = null;
+  if (isParentDeleted) {
+    body = unavailableLabel;
+  } else if (replyTo.dataType === 'text') {
+    body = ((replyTo.data as MessageData | undefined)?.text ?? '').toString();
+  } else if (replyTo.dataType === 'image') {
+    body = photoLabel;
+  } else if (replyTo.dataType === 'video') {
+    body = videoLabel;
+  } else if (replyTo.dataType === 'custom') {
+    body = JSON.stringify(replyTo.data ?? {});
+  }
+
+  if (body == null) return null;
+  return (
+    <Typography variant="caption" style={styles.body} numberOfLines={1}>
+      {body}
+    </Typography>
+  );
+}
+
+function ReplyBandThumb({ replyTo }: { replyTo: Amity.Message }) {
+  const { styles } = useStyles();
+  const data = replyTo.data as MessageData | undefined;
+  const isVideo = replyTo.dataType === 'video';
+  const thumbFileId = isVideo
+    ? data?.thumbnailFileId ?? ''
+    : replyTo.dataType === 'image'
+    ? data?.fileId ?? ''
+    : '';
+  const url = useFile({ fileId: thumbFileId, imageSize: ImageSizeState.small });
+
+  if (!url || (!isVideo && replyTo.dataType !== 'image')) return null;
+
+  return (
+    <View style={styles.thumbWrap}>
+      <Image source={{ uri: url }} style={styles.thumbImg} resizeMode="cover" />
+      {isVideo ? (
+        <View style={styles.playChip}>
+          <View style={styles.playChipInner}>
+            <AmityIcon
+              name="circle-play-s"
+              size={16}
+              tokenColor={
+                AmityColorToken.IconIconButtonTransparentPrimaryDefault
+              }
+            />
+          </View>
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/social/features/chat/features/shared/components/MessageReplyBand/index.ts

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