@amityco/react-native-social-uikit 4.1.1-fdf83f6b.0 → 4.2.0

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

@@ -1,42 +0,0 @@
-// Header — create-conversation header, ported from AmityUiKitWeb
-// v4/chat/features/conversation/create/components/Header. Composes the shared
-// TopBar (close variant) over the SearchInput molecule — the same search field
-// web uses here, and the one every other chat search header uses in RN (leading
-// search glyph + clear button), so the style matches across the UIKit.
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Internal imports (relative)
-import { TopBar } from '../../../../../elements/TopBar';
-import { SearchInput } from '../../../../../../core/design/molecules/SearchInput';
-import { useString } from '../../../../../../core/localization';
-import { useStyles } from './styles';
-
-// 3. Types
-type HeaderProps = {
-  onClose: () => void;
-  searchValue: string;
-  onSearchChange: (value: string) => void;
-};
-
-// 4. Named function component
-export function Header({ onClose, searchValue, onSearchChange }: HeaderProps) {
-  const { styles } = useStyles();
-  const title = useString('amity_chat_create_conversation_title');
-  const searchPlaceholder = useString('amity_chat_search_placeholder');
-
-  return (
-    <View style={styles.header}>
-      <TopBar title={title} leadingType="close" onLeading={onClose} />
-      <View style={styles.searchBar}>
-        <SearchInput
-          value={searchValue}
-          onChange={onSearchChange}
-          placeholder={searchPlaceholder}
-          accessibilityLabel={searchPlaceholder}
-        />
-      </View>
-    </View>
-  );
-}

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

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

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

@@ -1,24 +0,0 @@
-// Styles for the create-conversation Header — ported from AmityUiKitWeb
-// v4/chat/features/conversation/create/components/Header/Header.module.css.
-// Geometry: search bar padding 0.5rem 1rem→8/16. Colours via design tokens.
-
-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: 'column',
-      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
-    },
-    searchBar: {
-      paddingVertical: 8,
-      paddingHorizontal: 16,
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/conversation/create/components/UserItem/UserItem.tsx

@@ -1,66 +0,0 @@
-// UserItem — a single searchable-user row in the create-conversation list.
-// Ported from AmityUiKitWeb v4/chat/features/conversation/create/components/UserItem.
-//
-// RN adaptations from web:
-//   - Web resolves the avatar URL synchronously via `FileRepository.fileUrlWithSize`
-//     from `user.avatar.fileUrl`; RN resolves it from `user.avatarFileId` through
-//     the shared `useFile` hook (getFile → fileUrlWithSize).
-//   - Web's `Avatar` atom → the chat `Avatar.User` element (round, size md/40).
-//   - The web `BrandBadge` (shown when `user.isBrand`) has no RN design element,
-//     so it is omitted.
-//   - `react-aria` Button → Pressable.
-
-// 1. React / RN imports
-import { Pressable, View } from 'react-native';
-
-// 2. Internal imports (relative)
-import { Avatar } from '../../../../../elements/Avatar';
-import { Typography } from '../../../../../../core/design/components/Typography';
-import { Skeleton } from '../../../../../../core/design/components/Skeleton';
-import useFile from '../../../../../../core/hooks/useFile';
-import { useStyles } from './styles';
-
-// 3. Types
-type UserItemProps = {
-  user: Amity.InternalUser;
-  onPress: (user: Amity.InternalUser) => void;
-};
-
-// 4. Named function component
-export function UserItem({ user, onPress }: UserItemProps) {
-  const { styles } = useStyles();
-  const displayName = user.displayName ?? user.userId;
-  const avatarUrl = useFile({ fileId: user.avatarFileId ?? '' });
-
-  return (
-    <Pressable
-      style={({ pressed }) => [
-        styles.userItem,
-        pressed && styles.userItemPressed,
-      ]}
-      onPress={() => onPress(user)}
-      accessibilityRole="button"
-      accessibilityLabel={`Start chat with ${displayName}`}
-    >
-      <Avatar.User avatarUrl={avatarUrl} displayName={displayName} size="md" />
-      <View style={styles.nameRow}>
-        <Typography variant="bodyBold" style={styles.name} numberOfLines={1}>
-          {displayName}
-        </Typography>
-      </View>
-    </Pressable>
-  );
-}
-
-// 5. Compound variant — loading skeleton row.
-function UserItemSkeleton() {
-  const { styles } = useStyles();
-  return (
-    <View style={styles.skeletonRow}>
-      <Skeleton circle width={40} height={40} />
-      <Skeleton width={140} height={10} />
-    </View>
-  );
-}
-
-UserItem.Skeleton = UserItemSkeleton;

package/src/chat/features/conversation/create/components/UserItem/index.ts

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

package/src/chat/features/conversation/create/components/UserItem/styles.ts

@@ -1,51 +0,0 @@
-// Styles for UserItem — ported from AmityUiKitWeb
-// v4/chat/features/conversation/create/components/UserItem/UserItem.module.css.
-// Geometry: gap 0.5rem→8, padding 0.5rem 1rem→8/16, height 3.5rem→56,
-// name-row gap 0.125rem→2. 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({
-    userItem: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-      gap: 8,
-      width: '100%',
-      paddingVertical: 8,
-      paddingHorizontal: 16,
-      height: 56,
-      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault),
-    },
-    userItemPressed: {
-      backgroundColor: token(AmityColorToken.SurfaceListDefaultHover),
-    },
-    nameRow: {
-      flex: 1,
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 2,
-      minWidth: 0,
-    },
-    name: {
-      flexShrink: 1,
-      minWidth: 0,
-      color: token(AmityColorToken.TextListHeaderDefaultDefault),
-    },
-    skeletonRow: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 8,
-      paddingVertical: 8,
-      paddingHorizontal: 16,
-      height: 56,
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/conversation/create/components/UserList/UserList.tsx

@@ -1,86 +0,0 @@
-// UserList — the searchable user list for the create-conversation flow.
-// Ported from AmityUiKitWeb v4/chat/features/conversation/create/components/UserList.
-//
-// RN adaptations from web:
-//   - Web's `useSearchUserByDisplayName` (react-query) + IntersectionObserver
-//     sentinel → the local `useSearchUsers` live-collection hook + FlatList
-//     `onEndReached`.
-//   - Web reads the current user via `useSDK().currentUserId`; RN reads
-//     `Client.getCurrentUser()`.
-//   - Search gate matches web exactly: a 1–2 char (partial) query is suppressed
-//     and shows the "start typing" prompt; an empty query still browses all.
-
-// 1. React / RN imports
-import { type ReactElement } from 'react';
-import { FlatList } from 'react-native';
-
-// 2. Third-party imports
-import { Client } from '@amityco/ts-sdk-react-native';
-
-// 3. Internal imports (relative)
-import { EmptyState } from '../../../../../features/shared/components/EmptyState';
-import { UserItem } from '../UserItem/UserItem';
-import { useSearchUsers } from '../../hooks/useSearchUsers';
-import { useStyles } from './styles';
-
-// Local constants (mirror AmityUiKitWeb v4/chat/constants).
-const LIST_PAGE_LIMIT = 20;
-const LIST_SKELETON_ROW_COUNT = 9;
-const SEARCH_MIN_QUERY_LENGTH = 3;
-
-// 4. Types
-type UserListProps = {
-  searchText: string;
-  onSelectUser: (user: Amity.InternalUser) => void;
-};
-
-// 5. Named function component
-export function UserList({ searchText, onSelectUser }: UserListProps) {
-  const { styles } = useStyles();
-  const currentUserId = Client.getCurrentUser()?.userId;
-
-  const trimmed = searchText.trim();
-  const isPartialQuery =
-    trimmed.length > 0 && trimmed.length < SEARCH_MIN_QUERY_LENGTH;
-
-  const { users, loading, hasNextPage, loadMore } = useSearchUsers({
-    displayName: searchText,
-    limit: LIST_PAGE_LIMIT,
-    enabled: !isPartialQuery,
-  });
-
-  const isLoadingFirstPage = loading && users.length === 0;
-
-  if (isPartialQuery) {
-    return <EmptyState variant="prompt" />;
-  }
-
-  const visibleUsers = users.filter((user) => user.userId !== currentUserId);
-
-  if (visibleUsers.length === 0 && !loading) {
-    return <EmptyState variant="no-results" />;
-  }
-
-  const footer: ReactElement | null =
-    isLoadingFirstPage || loading ? (
-      <>
-        {Array.from({ length: LIST_SKELETON_ROW_COUNT }).map((_, i) => (
-          <UserItem.Skeleton key={i} />
-        ))}
-      </>
-    ) : null;
-
-  return (
-    <FlatList
-      style={styles.userList}
-      data={visibleUsers}
-      keyExtractor={(user) => user.userId}
-      renderItem={({ item }) => <UserItem user={item} onPress={onSelectUser} />}
-      onEndReachedThreshold={0.7}
-      onEndReached={() => {
-        if (hasNextPage && !isLoadingFirstPage && !loading) loadMore();
-      }}
-      ListFooterComponent={footer}
-    />
-  );
-}

package/src/chat/features/conversation/create/components/UserList/index.ts

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

package/src/chat/features/conversation/create/components/UserList/styles.ts

@@ -1,15 +0,0 @@
-// Styles for UserList — ported from AmityUiKitWeb
-// v4/chat/features/conversation/create/components/UserList/UserList.module.css.
-// The web list is a simple flex column; RN uses a FlatList that fills its parent.
-
-import { StyleSheet } from 'react-native';
-
-export const useStyles = () => {
-  const styles = StyleSheet.create({
-    userList: {
-      flex: 1,
-    },
-  });
-
-  return { styles };
-};

package/src/chat/features/conversation/create/components/index.ts

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

package/src/chat/features/conversation/create/hooks/index.ts

@@ -1,6 +0,0 @@
-export { useCreateConversation } from './useCreateConversation';
-export { useSearchUsers } from './useSearchUsers';
-export type {
-  UseSearchUsersParams,
-  UseSearchUsersResult,
-} from './useSearchUsers';

package/src/chat/features/conversation/create/hooks/useCreateConversation.ts

@@ -1,74 +0,0 @@
-// useCreateConversation — state + actions for the create-conversation flow.
-// Ported from AmityUiKitWeb's `useCreateConversation`.
-//
-// RN adaptations from web:
-//   - Web debounces via `react-use`'s `useDebounce`; RN uses a plain
-//     setTimeout effect (SEARCH_DEBOUNCE_MS).
-//   - Web navigates via the in-app `ChatNavigationProvider` (`pop`/`replace`);
-//     RN uses React Navigation. On success we `replace` to `AmityChatPage` so
-//     the back button skips the create screen (parity with web `replace`).
-//   - Web's `useMutation` pending state → an in-flight ref guard so a double-tap
-//     can't fire two `createChannel` calls / two navigations. Creation is also
-//     gated on `useAuth().isConnected` (the SDK needs a connected client).
-//   - The web `replace` also carried `userId` + `isJustCreated`; the RN
-//     `AmityChatPage` route only carries `{ channelId, userDisplayName }`, so
-//     those two params are dropped.
-
-import { useEffect, useRef, useState } from 'react';
-import { useNavigation } from '@react-navigation/native';
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { ChannelRepository } from '@amityco/ts-sdk-react-native';
-import useAuth from '../../../../../core/hooks/useAuth';
-import type { RootStackParamList } from '../../../../../core/routes/RouteParamList';
-
-const SEARCH_DEBOUNCE_MS = 300;
-
-export function useCreateConversation() {
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-  const { isConnected } = useAuth();
-
-  const [searchText, setSearchText] = useState('');
-  const [debouncedText, setDebouncedText] = useState('');
-  const isCreatingRef = useRef(false);
-
-  useEffect(() => {
-    const timer = setTimeout(
-      () => setDebouncedText(searchText),
-      SEARCH_DEBOUNCE_MS
-    );
-    return () => clearTimeout(timer);
-  }, [searchText]);
-
-  async function handleSelectUser(user: Amity.InternalUser) {
-    if (!isConnected || isCreatingRef.current) return;
-    isCreatingRef.current = true;
-    try {
-      const result = await ChannelRepository.createChannel({
-        type: 'conversation',
-        userIds: [user.userId],
-      });
-      const channelId = result?.data?.channelId;
-      if (channelId) {
-        navigation.replace('AmityChatPage', {
-          channelId,
-          userDisplayName: user.displayName,
-        });
-      }
-    } finally {
-      isCreatingRef.current = false;
-    }
-  }
-
-  function handleClose() {
-    navigation.goBack();
-  }
-
-  return {
-    searchText,
-    setSearchText,
-    debouncedText,
-    handleSelectUser,
-    handleClose,
-  };
-}

package/src/chat/features/conversation/create/hooks/useSearchUsers.ts

@@ -1,80 +0,0 @@
-// useSearchUsers — user-search live collection for the create-conversation flow.
-// Ported from AmityUiKitWeb's `useSearchUserByDisplayName`, following the RN
-// `useChannelsCollection` pattern (direct SDK subscription, not react-query):
-// subscribe to `UserRepository.searchUserByDisplayName`, mirror the collection
-// callback into React state, and keep the latest `onNextPage` in a ref so
-// `loadMore()` stays stable.
-//
-// The SDK requires a connected client, so the subscription is gated on
-// `useAuth().isConnected` AND the caller's `enabled` flag (used to suppress the
-// search for 1–2 char partial queries — an empty query still browses all users).
-
-import { useEffect, useRef, useState } from 'react';
-import { UserRepository } from '@amityco/ts-sdk-react-native';
-import useAuth from '../../../../../core/hooks/useAuth';
-
-export type UseSearchUsersParams = {
-  displayName: string;
-  limit?: number;
-  /** When false, no subscription is made (e.g. 1–2 char partial queries). */
-  enabled?: boolean;
-};
-
-export type UseSearchUsersResult = {
-  users: Amity.InternalUser[];
-  loading: boolean;
-  hasNextPage: boolean;
-  loadMore: () => void;
-};
-
-const DEFAULT_LIMIT = 20;
-
-export function useSearchUsers({
-  displayName,
-  limit = DEFAULT_LIMIT,
-  enabled = true,
-}: UseSearchUsersParams): UseSearchUsersResult {
-  const [users, setUsers] = useState<Amity.InternalUser[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [hasNextPage, setHasNextPage] = useState(false);
-  const onNextPageRef = useRef<(() => void) | undefined>(undefined);
-
-  const { isConnected } = useAuth();
-  const shouldCall = Boolean(isConnected) && enabled;
-
-  useEffect(() => {
-    if (!shouldCall) {
-      setUsers([]);
-      setHasNextPage(false);
-      setLoading(true);
-      return undefined;
-    }
-    setLoading(true);
-
-    const params: Amity.UserSearchLiveCollection = {
-      displayName,
-      limit,
-      matchType: 'partial',
-    };
-
-    const unsub = UserRepository.searchUserByDisplayName(
-      params,
-      ({ data, loading: isLoading, hasNextPage: nextPage, onNextPage }) => {
-        setUsers(data);
-        setLoading(isLoading);
-        setHasNextPage(Boolean(nextPage));
-        onNextPageRef.current = onNextPage;
-      }
-    );
-
-    return () => {
-      unsub();
-    };
-  }, [shouldCall, displayName, limit]);
-
-  function loadMore() {
-    onNextPageRef.current?.();
-  }
-
-  return { users, loading, hasNextPage, loadMore };
-}

package/src/chat/features/conversation/create/index.ts

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

package/src/chat/features/conversation/create/styles.ts

@@ -1,20 +0,0 @@
-// Styles for CreateConversation — ported from AmityUiKitWeb
-// v4/chat/features/conversation/create/CreateConversation.module.css.
-// 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({
-    createConversation: {
-      flex: 1,
-      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/conversation/hooks/useConversation.ts

@@ -1,53 +0,0 @@
-// useConversation — RN equivalent of AmityUiKitWeb v4/chat/features/conversation/chat/hooks/useChat.
-// Thin wrapper: fetches the live channel (for group-vs-direct behaviour + the muted
-// banner) and delegates all message orchestration to useChatMessage. Chat.tsx consumes
-// the combined result.
-
-import { useEffect, useState } from 'react';
-import { ChannelRepository } from '@amityco/ts-sdk-react-native';
-
-import useAuth from '../../../../core/hooks/useAuth';
-import { useChatMessage } from '../../shared/hooks/useChatMessage';
-
-export function useConversation(channelId?: string) {
-  const { isConnected } = useAuth();
-
-  const [channel, setChannel] = useState<Amity.Channel | undefined>(undefined);
-  useEffect(() => {
-    if (!isConnected || !channelId) return undefined;
-    const unsub = ChannelRepository.getChannel(channelId, ({ data }) => {
-      if (data) setChannel(data);
-    });
-    return () => {
-      unsub();
-    };
-  }, [isConnected, channelId]);
-
-  const isGroupChat = channel?.type === 'community';
-
-  const chat = useChatMessage({ channelId, enableMention: isGroupChat });
-
-  // The other participant in a 1-1 conversation (for the header user-action menu),
-  // resolved from the channel preview members like AmityChatListItem does.
-  const otherUser = channel?.previewMembers?.find(
-    (m) => m.userId !== chat.currentUserId
-  )?.user as Amity.InternalUser | undefined;
-
-  // Muted/blocked banner: the RN SDK exposes the viewer's channel membership mute via
-  // channel.isMuted for the current user; block status (web useFollowInfo) has no RN
-  // equivalent wired yet, so the 'blocked' variant is not surfaced here.
-  const isChannelMuted = Boolean(
-    (channel as { isMuted?: boolean } | undefined)?.isMuted
-  );
-  const showMutedBanner = isChannelMuted;
-  const mutedVariant: 'user' | 'channel' | 'blocked' = 'channel';
-
-  return {
-    ...chat,
-    channel,
-    otherUser,
-    isGroupChat,
-    showMutedBanner,
-    mutedVariant,
-  };
-}

package/src/chat/features/conversation/index.ts

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

package/src/chat/features/conversation/styles.ts

@@ -1,18 +0,0 @@
-// Styles for the conversation Chat container.
-
-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({
-    container: {
-      flex: 1,
-      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/group/add-member/AddGroupMember.tsx

@@ -1,61 +0,0 @@
-// AddGroupMember — ported from AmityUiKitWeb v4/chat/features/group/add-member.
-// Feature entry: a Header (close + search + selected chips), a multi-select
-// UserList, and a pinned submit button. `channelId` mirrors web's page prop;
-// `onClose` is an optional navigation callback supplied by the hosting page.
-//
-// Web wrapped the list in a react-hook-form `Controller`; the RN hook already
-// exposes the watched `selectedUsers` + `setSelectedUsers`, so the list binds to
-// those directly (a form re-renders on watch), and the submit button calls the
-// hook's `handleAddMember` instead of a native form submit.
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Internal imports
-import { Header } from './components/Header';
-import { AddMemberButton } from './components/AddMemberButton';
-import { UserList } from './components/UserList';
-import { useAddGroupMember } from './hooks/useAddGroupMember';
-import { useStyles } from './styles';
-
-// 3. Types
-export type AddGroupMemberProps = {
-  channelId: string;
-  onClose?: () => void;
-};
-
-// 4. Named function component
-export function AddGroupMember({ channelId, onClose }: AddGroupMemberProps) {
-  const { styles } = useStyles();
-  const {
-    searchText,
-    debouncedText,
-    selectedUsers,
-    setSearchText,
-    setSelectedUsers,
-    removeUser,
-    handleClose,
-    handleAddMember,
-    isFormValid,
-  } = useAddGroupMember({ channelId, onClose });
-
-  return (
-    <View style={styles.addGroupMember}>
-      <Header
-        searchValue={searchText}
-        selectedUsers={selectedUsers}
-        onClose={handleClose}
-        onSearchChange={setSearchText}
-        onRemoveUser={removeUser}
-      />
-      <View style={styles.list}>
-        <UserList
-          searchText={debouncedText}
-          selectedUsers={selectedUsers}
-          onChange={setSelectedUsers}
-        />
-      </View>
-      <AddMemberButton isDisabled={!isFormValid} onSubmit={handleAddMember} />
-    </View>
-  );
-}

package/src/chat/features/group/add-member/components/AddMemberButton/AddMemberButton.tsx

@@ -1,40 +0,0 @@
-// AddMemberButton — ported from AmityUiKitWeb
-// v4/chat/features/group/add-member/components/AddMemberButton. A full-width
-// primary submit button pinned to the bottom of the add-member screen. Web's
-// `Button.Main` (filled/primary/lg) → the RN Button atom (primary/lg, fullWidth);
-// the web form `type="submit"` becomes an explicit `onSubmit` press handler.
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Internal imports
-import { Button } from '../../../../../../core/design/atoms/Button';
-import { useString } from '../../../../../../core/localization';
-import { useStyles } from './styles';
-
-// 3. Types
-type AddMemberButtonProps = {
-  isDisabled: boolean;
-  onSubmit: () => void;
-};
-
-// 4. Named function component
-export function AddMemberButton({
-  isDisabled,
-  onSubmit,
-}: AddMemberButtonProps) {
-  const { styles } = useStyles();
-  const buttonLabel = useString('amity_chat_add_member_button');
-  return (
-    <View style={styles.container}>
-      <Button
-        hierarchy="primary"
-        size="lg"
-        fullWidth
-        label={buttonLabel}
-        disabled={isDisabled}
-        onPress={onSubmit}
-      />
-    </View>
-  );
-}

package/src/chat/features/group/add-member/components/AddMemberButton/index.ts

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