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

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

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

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

@@ -0,0 +1,24 @@
+// 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/social/features/chat/features/conversation/create/components/UserItem/UserItem.tsx

@@ -0,0 +1,66 @@
+// 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/social/features/chat/features/conversation/create/components/UserItem/index.ts

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

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

@@ -0,0 +1,51 @@
+// 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/social/features/chat/features/conversation/create/components/UserList/UserList.tsx

@@ -0,0 +1,86 @@
+// 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/social/features/chat/features/conversation/create/components/UserList/index.ts

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

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

@@ -0,0 +1,15 @@
+// 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/social/features/chat/features/conversation/create/components/index.ts

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

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

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

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

@@ -0,0 +1,74 @@
+// 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/social/features/chat/features/conversation/create/hooks/useSearchUsers.ts

@@ -0,0 +1,80 @@
+// 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/social/features/chat/features/conversation/create/index.ts

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

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

@@ -0,0 +1,20 @@
+// 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/social/features/chat/features/conversation/hooks/useConversation.ts

@@ -0,0 +1,53 @@
+// 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/social/features/chat/features/conversation/index.ts

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

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

@@ -0,0 +1,18 @@
+// 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/social/features/chat/features/group/add-member/AddGroupMember.tsx

@@ -0,0 +1,61 @@
+// 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/social/features/chat/features/group/add-member/components/AddMemberButton/AddMemberButton.tsx

@@ -0,0 +1,40 @@
+// 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/social/features/chat/features/group/add-member/components/AddMemberButton/index.ts

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

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

@@ -0,0 +1,22 @@
+// Styles for AddMemberButton — ported from AmityUiKitWeb AddMemberButton.module.css.
+// Padding 1rem → 16, top divider, page background.
+
+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: {
+      flexShrink: 0,
+      padding: 16,
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+      borderTopWidth: 1,
+      borderTopColor: token(AmityColorToken.LineDividerPostDefault),
+    },
+  });
+
+  return { styles, token };
+};