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

package/src/social/features/chat/features/archive/components/ArchivedChannelList/ArchivedChannelList.tsx

@@ -0,0 +1,131 @@
+// ArchivedChannelList — ported from AmityUiKitWeb
+// v4/chat/features/archive/components/ArchivedChannelList.
+// A live list of the active user's archived channels, each row swipeable to
+// unarchive.
+//
+// RN adaptations from web:
+//   - Web's IntersectionObserver sentinel → FlatList `onEndReached`.
+//   - Web wraps each ChannelItem in `SwipeToLeft` (framer-motion). That helper
+//     is a skipped legacy unit in RN, so the swipe-to-unarchive interaction is
+//     rebuilt with react-native-gesture-handler's `Swipeable`
+//     (`renderRightActions` + `onSwipeableWillOpen` → unarchive). The action's
+//     visual tokens are ported from SwipeToLeft.module.css. NOTE: the swipe only
+//     responds when `GestureHandlerRootView` is mounted at the app root.
+//   - Web's ChannelItem self-navigates via ChatNavigation context; here the row
+//     `onPress` navigates through React Navigation (typed `any`, mirroring
+//     AmityChatHomePage) so tapping a row opens the chat.
+//   - Reuses the RN `AmityChatListItem` (consumed, never modified).
+
+// 1. React / RN imports
+import { FlatList, View } from 'react-native';
+
+// 2. Third-party imports
+import { Swipeable } from 'react-native-gesture-handler';
+import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+// 3. Internal imports (relative)
+import { Typography } from '../../../../../../../core/design/components/Typography';
+import { AmityIcon } from '../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+import { useString } from '../../../../../../../core/localization';
+import { AmityChatListItem } from '../../../../components/AmityChatListItem';
+import { EmptyState } from '../../../../features/shared/components/EmptyState';
+import { useArchivedChannelsCollection } from '../../../../hooks/collections/useArchivedChannelsCollection';
+import { useChannelArchiveQuery } from '../../../../hooks/queries';
+import { useStyles } from './styles';
+
+const LIST_PAGE_LIMIT = 20;
+const LIST_SKELETON_ROW_COUNT = 9;
+const ACTION_ICON_SIZE = 28;
+
+// 4. Named function component
+export function ArchivedChannelList() {
+  const { styles } = useStyles();
+  const navigation = useNavigation<NativeStackNavigationProp<any>>();
+
+  const { unarchiveChannel } = useChannelArchiveQuery();
+  const unarchiveLabel = useString('amity_chat_unarchive');
+
+  const { channels, loading, hasNextPage, loadMore } =
+    useArchivedChannelsCollection({ limit: LIST_PAGE_LIMIT });
+
+  const isInitialLoading = loading && channels.length === 0;
+
+  async function handleUnarchive(channelId: string) {
+    await unarchiveChannel({ channelId });
+  }
+
+  function handleOpen(channel: Amity.Channel) {
+    if (channel.type === 'community') {
+      navigation.navigate('AmityGroupChatPage', {
+        channelId: channel.channelId,
+      });
+    } else {
+      navigation.navigate('AmityChatPage', {
+        channelId: channel.channelId,
+        userDisplayName: channel.displayName,
+      });
+    }
+  }
+
+  if (isInitialLoading) {
+    return (
+      <View style={styles.archivedChannelList}>
+        {Array.from({ length: LIST_SKELETON_ROW_COUNT }).map((_, i) => (
+          <AmityChatListItem.Skeleton key={i} />
+        ))}
+      </View>
+    );
+  }
+
+  if (channels.length === 0) {
+    return (
+      <View style={styles.archivedChannelList}>
+        <EmptyState variant="no-archived-chats" />
+      </View>
+    );
+  }
+
+  const renderRightAction = () => (
+    <View style={styles.action}>
+      <View style={styles.actionContent}>
+        <AmityIcon
+          name="unarchive-r"
+          size={ACTION_ICON_SIZE}
+          tokenColor={AmityColorToken.IconSquareButtonDefaultSecondaryDefault}
+        />
+        <Typography variant="captionBold" style={styles.actionLabel}>
+          {unarchiveLabel}
+        </Typography>
+      </View>
+    </View>
+  );
+
+  return (
+    <FlatList
+      style={styles.archivedChannelList}
+      contentContainerStyle={styles.listContent}
+      data={channels}
+      keyExtractor={(channel) => channel.channelId}
+      renderItem={({ item }) => (
+        <Swipeable
+          renderRightActions={renderRightAction}
+          onSwipeableWillOpen={() => handleUnarchive(item.channelId)}
+        >
+          <View style={styles.row}>
+            <AmityChatListItem
+              channel={item}
+              onPress={() => handleOpen(item)}
+            />
+          </View>
+        </Swipeable>
+      )}
+      onEndReachedThreshold={0.7}
+      onEndReached={() => {
+        if (hasNextPage) loadMore();
+      }}
+      ListFooterComponent={hasNextPage ? <AmityChatListItem.Skeleton /> : null}
+    />
+  );
+}

package/src/social/features/chat/features/archive/components/ArchivedChannelList/index.ts

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

package/src/social/features/chat/features/archive/components/ArchivedChannelList/styles.ts

@@ -0,0 +1,56 @@
+// Styles for ArchivedChannelList — ported from ArchivedChannelList.module.css
+// (flex column list) plus the swipe-action visuals from SwipeToLeft.module.css:
+//   action bg      → --asc-color-surface-squarebutton-default-secondary-default
+//   action content → width 5rem→80, gap 0.25rem→4, padding 1rem 0.5rem→16/8
+//   action icon    → --asc-color-icon-squarebutton-default-secondary-default
+//   action label   → --asc-color-text-squarebutton-default-secondary-default
+//                    (0.8125rem/600 → captionBold)
+//   row background → --asc-color-surface-page-background-default
+// Colours via design tokens (no hardcoded hex).
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+
+const ACTION_WIDTH = 80;
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    archivedChannelList: {
+      flex: 1,
+      flexDirection: 'column',
+    },
+    listContent: {
+      flexGrow: 1,
+    },
+    // swipeToLeft__row: opaque row over the action layer.
+    row: {
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+    },
+    // swipeToLeft__action: the revealed background behind the row.
+    action: {
+      justifyContent: 'center',
+      alignItems: 'flex-end',
+      backgroundColor: token(
+        AmityColorToken.SurfaceSquareButtonDefaultSecondaryDefault
+      ),
+    },
+    // swipeToLeft__actionContent: 5rem-wide centered icon + label column.
+    actionContent: {
+      width: ACTION_WIDTH,
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 4,
+      paddingVertical: 16,
+      paddingHorizontal: 8,
+    },
+    actionLabel: {
+      color: token(AmityColorToken.TextSquareButtonDefaultSecondaryDefault),
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/archive/components/Header/Header.tsx

@@ -0,0 +1,18 @@
+// Header — ported from AmityUiKitWeb
+// v4/chat/features/archive/components/Header/Header.
+// The archived-chats top bar: a back button + the "Archived chats" title.
+
+// 1. Internal imports (relative)
+import { TopBar } from '../../../../elements/TopBar';
+import { useString } from '../../../../../../../core/localization';
+
+// 2. Types
+type HeaderProps = {
+  onBack: () => void;
+};
+
+// 3. Named function component
+export function Header({ onBack }: HeaderProps) {
+  const title = useString('amity_chat_archived_navbar_title');
+  return <TopBar title={title} leadingType="back" onLeading={onBack} />;
+}

package/src/social/features/chat/features/archive/components/Header/index.ts

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

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

@@ -0,0 +1,2 @@
+export { Header } from './Header';
+export { ArchivedChannelList } from './ArchivedChannelList';

package/src/social/features/chat/features/archive/index.ts

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

package/src/social/features/chat/features/archive/styles.ts

@@ -0,0 +1,21 @@
+// Styles for ArchivedChat — ported from ArchivedChat.module.css.
+// Web: column, bg surface-page-background-default, min-height 100svh → flex:1.
+// Colours via design tokens (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({
+    archivedChat: {
+      flex: 1,
+      flexDirection: 'column',
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/conversation/Chat.tsx

@@ -0,0 +1,153 @@
+// Chat — the conversation thread container, a faithful port of AmityUiKitWeb
+// v4/chat/features/conversation/chat/Chat. All orchestration lives in useConversation
+// (→ useChatMessage); this component only wires the returned values into the
+// components with the same props web uses: Header, MessageList,
+// MutedBanner|MessageComposer, ImageViewer, VideoPlayer, MessageFullTextScreen.
+
+// 1. React / RN imports
+import { Dimensions, KeyboardAvoidingView, Platform, View } from 'react-native';
+
+// 2. Internal imports
+import useFile from '../../../../../core/hooks/useFile';
+import { useBottomSheet } from '../../../../../core/stores/slices/bottomSheetSlice';
+import { AmityMessageComposer } from '../../components/AmityMessageComposer';
+import { AmityConversationChatUserActionComponent } from '../../components/AmityConversationChatUserActionComponent';
+import { ImageViewer } from '../shared/components/ImageViewer';
+import { VideoPlayer } from '../shared/components/VideoPlayer';
+import { MessageFullTextScreen } from '../shared/components/MessageFullTextScreen';
+import { ContentReportReason } from '../shared/components/ContentReportReason';
+import { MessageReactorListSheet } from '../shared/components/MessageReactorListSheet';
+import { MutedBanner } from '../shared/components/MutedBanner';
+import { Header } from './components/Header';
+import { MessageList } from './components/MessageList';
+import { useConversation } from './hooks/useConversation';
+import { useStyles } from './styles';
+
+// 3. Types
+export type ChatProps = {
+  channelId?: string;
+  userDisplayName?: string;
+  onBack: () => void;
+};
+
+// 4. Named function component
+export function Chat({ channelId, userDisplayName, onBack }: ChatProps) {
+  const { styles } = useStyles();
+  const c = useConversation(channelId);
+
+  // Receiver avatar for the header (1-1 conversation), resolved from the other
+  // participant's avatarFileId — the same source AmityChatListItem uses for the
+  // list row (kept consistent so both show the same image).
+  const otherUserAvatarUrl = useFile({
+    fileId: c.otherUser?.avatarFileId ?? '',
+  });
+  // Reactor-list sheet — web keeps this in useBubbleMenu at the orchestration
+  // level (one instance). RN MOBILE ADAPTATION: rather than render the reactor
+  // list inline, push it into the repo's global @devvie bottom sheet so it slides
+  // up as a sheet with a backdrop + drag/tap-to-close (BUG #15).
+  const { openBottomSheet, closeBottomSheet } = useBottomSheet();
+
+  function openReactorList(message: Amity.Message) {
+    // Tall drawer — web presents this list in a ~90vh drawer. The sheet content
+    // needs an explicit height (see MessageReactorListSheet: @devvie's inner
+    // wrapper is auto-height, so a flex child collapses), so pass it down too.
+    const reactorSheetHeight = Math.round(
+      Dimensions.get('window').height * 0.7
+    );
+    openBottomSheet({
+      height: reactorSheetHeight,
+      content: (
+        <MessageReactorListSheet
+          messageId={message.messageId}
+          initialMessage={message}
+          onClose={closeBottomSheet}
+          sheetHeight={reactorSheetHeight}
+        />
+      ),
+    });
+  }
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
+      <Header
+        // A 1-1 conversation's title is the OTHER participant's display name, not
+        // the channel's displayName (which is often empty for conversations).
+        // Resolve it from the channel's preview members (same as AmityChatListItem);
+        // fall back to the navigation-passed name only while that loads.
+        title={c.otherUser?.displayName || userDisplayName || ''}
+        avatarUrl={otherUserAvatarUrl}
+        onBack={onBack}
+        trailing={
+          c.otherUser ? (
+            <AmityConversationChatUserActionComponent
+              user={c.otherUser}
+              channelId={channelId ?? ''}
+            />
+          ) : undefined
+        }
+      />
+      <View style={{ flex: 1 }}>
+        <MessageList
+          items={c.items}
+          currentUserId={c.currentUserId}
+          isGroupChat={c.isGroupChat}
+          hasMore={c.hasMore}
+          onLoadMore={c.loadMore}
+          atBottom={c.atBottom}
+          onAtBottomChange={c.setAtBottom}
+          newMessage={c.newMessage}
+          onClearNewMessage={c.clearNewMessage}
+          onOpenImage={c.openImageViewer}
+          onOpenVideo={c.openVideoPlayer}
+          onOpenFailedSheet={c.openFailedSheet}
+          onOpenBubbleMenu={c.openBubbleMenu}
+          onOpenReactorList={(m) => openReactorList(m)}
+          isLoading={c.isLoading}
+          isLoadingFirstPage={c.isLoadingFirstPage}
+          onSeeMore={c.openSeeMore}
+          pendingUploads={c.composer.pendingUploads}
+          bubbleHandlers={{
+            onEdit: c.handleBubbleEdit,
+            onReply: c.handleBubbleReply,
+            onDelete: c.handleBubbleDelete,
+            onCopy: c.handleBubbleCopy,
+            onSave: c.handleBubbleSave,
+            onReport: c.handleBubbleReport,
+          }}
+        />
+      </View>
+
+      {c.showMutedBanner ? (
+        <MutedBanner variant={c.mutedVariant} />
+      ) : (
+        <AmityMessageComposer
+          composer={c.composer}
+          onOpenSeeMore={c.openSeeMore}
+          onOpenImage={c.openImageViewer}
+          onOpenVideo={c.openVideoPlayer}
+        />
+      )}
+
+      {c.imageViewerProps ? <ImageViewer {...c.imageViewerProps} /> : null}
+      {c.videoPlayerProps ? <VideoPlayer {...c.videoPlayerProps} /> : null}
+      {c.seeMore ? (
+        <MessageFullTextScreen
+          visible
+          text={c.seeMore.text}
+          title={c.seeMore.title}
+          onClose={c.closeSeeMore}
+        />
+      ) : null}
+      {c.reportMessage ? (
+        <ContentReportReason
+          visible
+          message={c.reportMessage}
+          onClose={c.closeReport}
+        />
+      ) : null}
+    </KeyboardAvoidingView>
+  );
+}

package/src/social/features/chat/features/conversation/components/Header/Header.tsx

@@ -0,0 +1,73 @@
+// Header — conversation thread top bar, ported from AmityUiKitWeb
+// features/conversation/chat/components/Header. Back button + name, plus a
+// "waiting for network" subtitle (spinner + caption) rendered under the name
+// while the device is offline. Avatar and the conversation action menu layer on
+// in later M2 tasks.
+
+// 1. React / RN imports
+import type { ReactNode } from 'react';
+import { Text, View } from 'react-native';
+
+// 2. Internal imports
+import { Avatar } from '../../../../../../../core/design/atoms/Avatar';
+import { Button } from '../../../../../../../core/design/atoms/Button';
+import { Typography } from '../../../../../../../core/design/components/Typography';
+import { Loader } from '../../../../../../../core/design/atoms/Loader';
+import { useString } from '../../../../../../../core/localization';
+import { useNetworkOnline } from '../../../../hooks';
+import { useStyles } from './styles';
+
+// 3. Types
+type HeaderProps = {
+  title: string;
+  /** Receiver's avatar URL (1-1 conversation). Falls back to initials when absent. */
+  avatarUrl?: string;
+  onBack: () => void;
+  /** Right-aligned slot (e.g. the conversation user-action menu). */
+  trailing?: ReactNode;
+};
+
+// 4. Named function component
+export function Header({ title, avatarUrl, onBack, trailing }: HeaderProps) {
+  const { styles } = useStyles();
+  const { online } = useNetworkOnline();
+  const waitingForNetwork = useString('amity_chat_waiting_for_network');
+  // Web: initials = first char of the display name (fallback '?').
+  const initials = title.trim().charAt(0).toUpperCase() || '?';
+
+  return (
+    <View style={styles.header}>
+      <Button.Icon
+        icon="chevron-left"
+        styleType="ghost"
+        hierarchy="secondary"
+        size={32}
+        onPress={onBack}
+        accessibilityLabel="Back"
+      />
+      <View style={styles.identity}>
+        <Avatar
+          variant={avatarUrl ? 'image' : 'text'}
+          shape="rounded"
+          size={40}
+          imageUrl={avatarUrl}
+          initials={initials}
+        />
+        <View style={styles.title}>
+          <Text style={styles.name} numberOfLines={1}>
+            {title}
+          </Text>
+          {!online ? (
+            <View style={styles.subtitle}>
+              <Loader.Spinner size="sm" />
+              <Typography variant="caption" style={styles.subtitleText}>
+                {waitingForNetwork}
+              </Typography>
+            </View>
+          ) : null}
+        </View>
+      </View>
+      {trailing}
+    </View>
+  );
+}

package/src/social/features/chat/features/conversation/components/Header/index.ts

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

package/src/social/features/chat/features/conversation/components/Header/styles.ts

@@ -0,0 +1,56 @@
+// Styles for the conversation Header — ported from AmityUiKitWeb
+// features/conversation/chat/components/Header/Header.module.css.
+// Geometry: gap 0.5rem→8, padding 0.75rem 1rem→12/16, identity height 2.625rem→42,
+// name font 0.9375rem/1.25rem→15/20 weight 700 letterSpacing -0.0256rem→-0.4.
+// Colours via design tokens (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({
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault),
+      borderBottomWidth: 1,
+      borderBottomColor: token(AmityColorToken.LineDividerPostDefault),
+    },
+    identity: {
+      flex: 1,
+      minWidth: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+    },
+    title: {
+      flex: 1,
+      minWidth: 0,
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+    },
+    name: {
+      fontSize: 15,
+      lineHeight: 20,
+      fontWeight: '700',
+      letterSpacing: -0.4,
+      color: token(AmityColorToken.TextListHeaderDefaultDefault),
+    },
+    subtitle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
+    subtitleText: {
+      color: token(AmityColorToken.TextListTrailingSubtextDefault),
+    },
+  });
+
+  return { styles, token };
+};