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

package/src/chat/features/conversation/components/MessageList/MessageList.tsx

@@ -1,245 +0,0 @@
-// MessageList — the conversation thread's scroll view, ported from AmityUiKitWeb
-// features/shared/components/MessageList. Renders the pre-grouped `items` (date
-// separators + messages, newest-first) in an inverted FlatList, tracks whether the
-// view is at the bottom (for scroll UX), and shows the ScrollToLatestButton /
-// NewMessageNotification affordances. Older pages load on onEndReached.
-
-// 1. React / RN imports
-import { useCallback, useMemo, useRef } from 'react';
-import { FlatList, View } from 'react-native';
-
-// 2. Internal imports
-import { MessageRow } from '../MessageRow';
-import { DateSeparator } from '../../../shared/components/DateSeparator';
-import { ScrollToLatestButton } from '../../../shared/components/ScrollToLatestButton';
-import { NewMessageNotification } from '../../../shared/components/NewMessageNotification';
-import { Loader } from '../../../../../core/design/atoms/Loader';
-import type { ChatItem } from '../../../../utils/groupMessagesByDate';
-import {
-  isSyntheticPendingMessage,
-  type PendingUpload,
-} from '../../../shared/hooks/useMessageComposer';
-import { useStyles } from './styles';
-
-// 3. Types
-type BubbleHandlers = {
-  onEdit: () => void;
-  onReply: () => void;
-  onDelete: () => void;
-  onCopy: () => void;
-  onSave: () => void;
-  onReport: (message: Amity.Message) => void;
-};
-
-type MessageListProps = {
-  items: ChatItem[];
-  currentUserId?: string;
-  isGroupChat?: boolean;
-  hasMore?: boolean;
-  onLoadMore?: () => void;
-  /** True while a page (older messages) is loading — drives the top loader. */
-  isLoading?: boolean;
-  /** True during the very first page load (parent shows a skeleton; the list
-   *  suppresses its own loader then, mirroring web). */
-  isLoadingFirstPage?: boolean;
-  atBottom?: boolean;
-  onAtBottomChange?: (atBottom: boolean) => void;
-  newMessage?: Amity.Message | null;
-  onClearNewMessage?: () => void;
-  onOpenImage?: (url: string, message: Amity.Message) => void;
-  onOpenVideo?: (message: Amity.Message) => void;
-  onOpenFailedSheet?: (message: Amity.Message) => void;
-  onOpenBubbleMenu?: (message: Amity.Message) => void;
-  onOpenReactorList?: (message: Amity.Message) => void;
-  onSeeMore?: (text: string, title?: string) => void;
-  bubbleHandlers?: BubbleHandlers;
-  /** Viewer moderates this channel — unlocks Delete on other people's messages. */
-  viewerIsModerator?: boolean;
-  /**
-   * In-flight/failed uploads, used to give each media bubble its local preview.
-   * Web derives the same thing in its MessageList (pendingPreviewByClientId /
-   * ByFileId) — without it a failed upload has no image source at all and the
-   * bubble short-circuits to the loading placeholder, hiding its failed caption.
-   */
-  pendingUploads?: PendingUpload[];
-  /**
-   * The remote media for a just-uploaded file has finished loading, so its local
-   * preview can be dropped (web GroupChat → MessageList → MessageBubble
-   * `onMediaLoaded`). Without it a successful upload stays in `pendingUploads`
-   * for as long as the thread is open and the bubble keeps rendering the local
-   * file uri instead of the CDN url.
-   */
-  onMediaLoaded?: (fileId: string) => void;
-};
-
-const AT_BOTTOM_THRESHOLD = 48;
-
-/** Web MessageList: pendingPreviewByClientId + pendingPreviewByFileId. A synthetic
- *  message is matched by its client id; once the upload has a fileId the real
- *  message takes over and is matched by that instead. */
-function buildPreviewMaps(pendingUploads: PendingUpload[] | undefined) {
-  const byClientId = new Map<string, string>();
-  const byFileId = new Map<string, string>();
-  for (const p of pendingUploads ?? []) {
-    if (!p.previewUrl) continue;
-    byClientId.set(p.clientId, p.previewUrl);
-    if (p.fileId) byFileId.set(p.fileId, p.previewUrl);
-  }
-  return { byClientId, byFileId };
-}
-
-// 4. Named function component
-export function MessageList({
-  items,
-  currentUserId,
-  isGroupChat,
-  hasMore,
-  onLoadMore,
-  isLoading = false,
-  isLoadingFirstPage = false,
-  atBottom = true,
-  onAtBottomChange,
-  newMessage,
-  onClearNewMessage,
-  onOpenImage,
-  onOpenVideo,
-  onOpenFailedSheet,
-  onOpenBubbleMenu,
-  onOpenReactorList,
-  onSeeMore,
-  bubbleHandlers,
-  viewerIsModerator = false,
-  pendingUploads,
-  onMediaLoaded,
-}: MessageListProps) {
-  const { styles } = useStyles();
-  const previews = useMemo(
-    () => buildPreviewMaps(pendingUploads),
-    [pendingUploads]
-  );
-  const listRef = useRef<FlatList<ChatItem>>(null);
-
-  // Final guard: never hand the FlatList two items with the same key (React throws
-  // "same key" otherwise). Upstream already dedupes messages, but keep the list robust.
-  const data = useMemo(() => {
-    const seen = new Set<string>();
-    return items.filter((it) => {
-      if (seen.has(it.id)) return false;
-      seen.add(it.id);
-      return true;
-    });
-  }, [items]);
-
-  // Resolve reply parents from the loaded items (no separate live lookup for M2).
-  const messageById = useMemo(() => {
-    const map = new Map<string, Amity.Message>();
-    for (const it of data)
-      if (it.kind === 'message') map.set(it.message.messageId, it.message);
-    return map;
-  }, [data]);
-
-  const scrollToLatest = useCallback(() => {
-    listRef.current?.scrollToOffset({ offset: 0, animated: true });
-    onClearNewMessage?.();
-  }, [onClearNewMessage]);
-
-  const handleScroll = useCallback(
-    (e: { nativeEvent: { contentOffset: { y: number } } }) => {
-      // Inverted list: offset near 0 == pinned to the newest (bottom) message.
-      const next = e.nativeEvent.contentOffset.y < AT_BOTTOM_THRESHOLD;
-      if (next !== atBottom) onAtBottomChange?.(next);
-    },
-    [atBottom, onAtBottomChange]
-  );
-
-  // Web MessageList shows a top loader (`.messageList__topLoader` + Loader.Spinner)
-  // while paginating older messages, suppressed during the first-page load (which the
-  // parent covers with a skeleton). In an inverted FlatList the visual top — the
-  // older-messages / onEndReached side — is the ListFooterComponent, so the spinner
-  // lives there. Web's second (bottom / loadPrev) loader maps to jump-to-message,
-  // which is out of scope for this port (see useChatMessage), so it is omitted.
-  const showTopLoader = !!isLoading && !isLoadingFirstPage;
-
-  // Match web's mutually-exclusive affordances: the new-message banner shows only
-  // when a genuinely new message arrived while scrolled away (`newMessage` is gated
-  // upstream in useChatMessage); the scroll-to-latest button shows otherwise. This
-  // keeps the banner from co-appearing with the button (web: showScrollButton =
-  // !atBottom && !newMessage && isScrollable — the isScrollable guard is dropped as a
-  // documented deviation: an inverted list not at bottom is by definition scrollable).
-  const showNotification = !atBottom && !!newMessage;
-  const showScrollButton = !atBottom && !newMessage;
-
-  return (
-    <View style={styles.list}>
-      <FlatList
-        ref={listRef}
-        style={styles.list}
-        contentContainerStyle={styles.content}
-        data={data}
-        inverted
-        ListFooterComponent={
-          showTopLoader ? (
-            <View style={styles.topLoader}>
-              <Loader.Spinner size="sm" />
-            </View>
-          ) : null
-        }
-        keyExtractor={(item: ChatItem) => item.id}
-        renderItem={({ item }: { item: ChatItem }) => {
-          if (item.kind === 'date') return <DateSeparator label={item.label} />;
-          const { message } = item;
-          const isUser = !!currentUserId && message.creatorId === currentUserId;
-          const messageFileId =
-            (message.data as { fileId?: string } | undefined)?.fileId ??
-            (message as unknown as { fileId?: string }).fileId;
-          const localPreviewUrl = isSyntheticPendingMessage(message)
-            ? previews.byClientId.get(message.__syntheticClientId)
-            : messageFileId
-            ? previews.byFileId.get(messageFileId)
-            : undefined;
-          return (
-            <MessageRow
-              message={message}
-              localPreviewUrl={localPreviewUrl}
-              onMediaLoaded={onMediaLoaded}
-              isUser={isUser}
-              isGroupChat={isGroupChat}
-              currentUserId={currentUserId}
-              parent={
-                message.parentId
-                  ? messageById.get(message.parentId) ?? null
-                  : null
-              }
-              onOpenImage={onOpenImage}
-              onOpenVideo={onOpenVideo}
-              onOpenFailedSheet={onOpenFailedSheet}
-              onOpenBubbleMenu={onOpenBubbleMenu}
-              onOpenReactorList={onOpenReactorList}
-              onSeeMore={onSeeMore}
-              bubbleHandlers={bubbleHandlers}
-              viewerIsModerator={viewerIsModerator}
-            />
-          );
-        }}
-        onScroll={handleScroll}
-        scrollEventThrottle={16}
-        onEndReached={hasMore ? onLoadMore : undefined}
-        onEndReachedThreshold={0.5}
-      />
-
-      {showNotification && newMessage ? (
-        <View style={styles.newMessageSlot}>
-          <NewMessageNotification
-            message={newMessage}
-            onPress={scrollToLatest}
-          />
-        </View>
-      ) : null}
-      {showScrollButton ? (
-        <View style={styles.scrollButtonSlot}>
-          <ScrollToLatestButton onPress={scrollToLatest} />
-        </View>
-      ) : null}
-    </View>
-  );
-}

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

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

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

@@ -1,48 +0,0 @@
-// Styles for the conversation MessageList. Rows align outbound (own) to the
-// trailing edge and inbound (other) to the leading edge; list padding mirrors the
-// web thread (horizontal 16, vertical gaps ~2). 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({
-    list: {
-      flex: 1,
-      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
-    },
-    content: {
-      // Horizontal spacing comes from the MessageRow side margins (16); adding it
-      // here too would double it to 32. Keep only vertical padding.
-      paddingVertical: 8,
-    },
-    // Pagination loader — ported from web .messageList__topLoader (height 3rem→48,
-    // centered, full width, page-background surface). Rendered as the inverted list's
-    // ListFooterComponent so it sits at the visual top (older-messages side).
-    topLoader: {
-      width: '100%',
-      height: 48,
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
-    },
-    // Scroll affordances float above the composer at the bottom of the list.
-    scrollButtonSlot: {
-      position: 'absolute',
-      right: 12,
-      bottom: 12,
-    },
-    newMessageSlot: {
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: 12,
-      alignItems: 'center',
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/conversation/components/MessageRow/MessageRow.tsx

@@ -1,245 +0,0 @@
-// MessageRow — ported from AmityUiKitWeb features/shared/components/MessageRow.
-// Wraps a message bubble with its metadata: inbound sender avatar, sender name
-// (inbound + group), reply quote (for replies), timestamp (own leading / other
-// trailing) or sending/failed status, and a failed-retry affordance. Long-press
-// opens the shared bubble action menu.
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Internal imports
-import useFile from '../../../../../core/hooks/useFile';
-import { Typography } from '../../../../../core/design/components/Typography';
-import { useString } from '../../../../../core/localization';
-import { Avatar } from '../../../../elements/Avatar';
-import { AmityMessageBubble } from '../../../../components/AmityMessageBubble';
-import { AmityMessageActionMenu } from '../../../../components/AmityMessageActionMenu';
-import { MessageReplyQuote } from '../../../shared/components/MessageReplyQuote';
-import { MessageReactionBadge } from '../../../shared/components/MessageReactionBadge';
-import { Button } from '../../../../../core/design/atoms/Button';
-import { formatMessageTime } from '../../../../utils/timestamp';
-import { useStyles } from './styles';
-
-// 3. Types
-type BubbleHandlers = {
-  onEdit: () => void;
-  onReply: () => void;
-  onDelete: () => void;
-  onCopy: () => void;
-  onSave: () => void;
-  onReport: (message: Amity.Message) => void;
-};
-
-type MessageRowProps = {
-  message: Amity.Message;
-  isUser: boolean;
-  isGroupChat?: boolean;
-  currentUserId?: string | null;
-  parent?: Amity.Message | null;
-  onOpenImage?: (url: string, message: Amity.Message) => void;
-  onOpenVideo?: (message: Amity.Message) => void;
-  onOpenFailedSheet?: (message: Amity.Message) => void;
-  onOpenBubbleMenu?: (message: Amity.Message) => void;
-  onOpenReactorList?: (message: Amity.Message) => void;
-  onSeeMore?: (text: string, title?: string) => void;
-  bubbleHandlers?: BubbleHandlers;
-  /** Viewer moderates this channel — unlocks Delete on other people's messages. */
-  viewerIsModerator?: boolean;
-  /** Local preview for an in-flight or failed upload (see MessageList). */
-  localPreviewUrl?: string;
-  /** The remote media has loaded — the local preview can be dropped. */
-  onMediaLoaded?: (fileId: string) => void;
-};
-
-// 4. Named function component
-export function MessageRow({
-  message,
-  isUser,
-  isGroupChat = false,
-  currentUserId,
-  parent,
-  onOpenImage,
-  onOpenVideo,
-  onOpenFailedSheet,
-  onOpenBubbleMenu,
-  onOpenReactorList,
-  onSeeMore,
-  bubbleHandlers,
-  viewerIsModerator = false,
-  localPreviewUrl,
-  onMediaLoaded,
-}: MessageRowProps) {
-  const { styles } = useStyles();
-  const sendingLabel = useString('amity_chat_sending_status');
-
-  const creator = message.creator;
-  const displayName = creator?.displayName ?? '';
-  const avatarUrl = useFile({ fileId: creator?.avatarFileId ?? '' });
-
-  const isDeleted = !!message.isDeleted;
-  const syncState = message.syncState;
-  const isSynced =
-    syncState === undefined || syncState === ('synced' as Amity.SyncState);
-  const isFailed = syncState === ('error' as Amity.SyncState);
-
-  // The preview outlives the upload — MessageList keeps mapping it onto the real
-  // message by fileId so the bubble doesn't flash back to a spinner while the
-  // remote url warms. So "still uploading" has to come from syncState (the same
-  // signal the Sending caption below uses), not from the preview's presence.
-  const isUploading = !!localPreviewUrl && !isSynced && !isFailed;
-
-  const showSenderName = !isUser && isGroupChat && !message.parentId;
-  const timeText = message.createdAt
-    ? formatMessageTime(message.createdAt)
-    : '';
-
-  const ownSide =
-    isUser && !isDeleted ? (
-      <Typography variant="captionSmall" style={styles.side}>
-        {isSynced ? timeText : !isFailed ? sendingLabel : ''}
-      </Typography>
-    ) : null;
-  const otherSide =
-    !isUser && !isDeleted && timeText ? (
-      <Typography variant="captionSmall" style={styles.side}>
-        {timeText}
-      </Typography>
-    ) : null;
-
-  return (
-    <View style={[styles.row, isUser ? styles.rowOwn : styles.rowOther]}>
-      {!isUser && creator ? (
-        <View style={styles.avatar}>
-          <Avatar.User
-            avatarUrl={avatarUrl}
-            displayName={displayName}
-            size="sm"
-          />
-        </View>
-      ) : null}
-
-      <View
-        style={[
-          styles.content,
-          isUser ? styles.contentOwn : styles.contentOther,
-        ]}
-      >
-        {showSenderName ? (
-          <Typography
-            variant="captionBold"
-            style={styles.senderName}
-            numberOfLines={1}
-          >
-            {displayName}
-          </Typography>
-        ) : null}
-
-        {message.parentId && !isDeleted ? (
-          <MessageReplyQuote
-            parent={parent}
-            child={message}
-            isUser={isUser}
-            isGroupChat={isGroupChat}
-            currentUserId={currentUserId}
-            onOpenSeeMore={onSeeMore ?? (() => {})}
-            onOpenImage={onOpenImage ?? (() => {})}
-            onOpenVideo={onOpenVideo ?? (() => {})}
-          />
-        ) : null}
-
-        <View style={styles.bubbleRow}>
-          {ownSide}
-          {isUser && isFailed ? (
-            // Web renders a failed message as the bubble + a small Button.Icon
-            // that opens the failed sheet (Resend/Delete), before the outbound
-            // bubble. Web's `Exclamation` glyph is a BARE solid exclamation (not
-            // circled) in a transparent/primary icon button — RN `exclamation-s`.
-            <Button.Icon
-              icon="exclamation-s"
-              styleType="transparent"
-              hierarchy="primary"
-              size={24}
-              // Web sizes this glyph independently of the button:
-              // .messageRow__errorIcon is 1rem inside a 24px button. RN's
-              // size-derived glyph for 24 is 24 (padding 0), so it rendered 50%
-              // too large without this override.
-              iconSize={16}
-              // Web .messageRow__errorButton overrides the row's flex-end with
-              // align-self: center, so the button sits level with the middle of
-              // the bubble rather than its bottom edge.
-              style={styles.failedButton}
-              onPress={() => onOpenFailedSheet?.(message)}
-              accessibilityLabel="Message failed to send"
-            />
-          ) : null}
-          {isDeleted ? (
-            <AmityMessageBubble message={message} isUser={isUser} />
-          ) : isFailed ? (
-            // A failed/synthetic message (never persisted, messageId === '') is
-            // not interactive — no action menu / reaction picker (which would
-            // subscribe on the empty messageId and crash). Web MessageRow renders
-            // a failed message as the bubble + a retry affordance only.
-            <AmityMessageBubble
-              message={message}
-              isUser={isUser}
-              // Without the preview a failed upload has no media source, and the
-              // bubble returns its loading placeholder before reaching the failed
-              // caption — the missing inline error in PDT-4128.
-              localPreviewUrl={localPreviewUrl}
-              onOpenImage={onOpenImage}
-              onOpenVideo={onOpenVideo}
-              onSeeMore={onSeeMore}
-            />
-          ) : (
-            <AmityMessageActionMenu
-              message={message}
-              currentUserId={currentUserId}
-              viewerIsModerator={viewerIsModerator}
-              placement={isUser ? 'bottom right' : 'bottom left'}
-              handlers={{
-                onEdit: bubbleHandlers?.onEdit ?? (() => {}),
-                onReply: bubbleHandlers?.onReply ?? (() => {}),
-                onDelete: bubbleHandlers?.onDelete ?? (() => {}),
-                onCopy: bubbleHandlers?.onCopy ?? (() => {}),
-                onSave: bubbleHandlers?.onSave ?? (() => {}),
-                onReport: bubbleHandlers?.onReport ?? (() => {}),
-              }}
-              anchor={({ isOpen, openPopover }) => (
-                <AmityMessageBubble
-                  message={message}
-                  isUser={isUser}
-                  // Web keeps the bubble in its pressed colour for as long as the
-                  // menu is open (Chat.tsx activeMessageId → isActive →
-                  // data-active). The Popover already tracks that state; without
-                  // passing it, onPressOut fires the moment the long-press is
-                  // recognised and the bubble snaps back while the menu is up.
-                  isActive={isOpen}
-                  localPreviewUrl={localPreviewUrl}
-                  isUploading={isUploading}
-                  onMediaLoaded={onMediaLoaded}
-                  onLongPress={() => {
-                    onOpenBubbleMenu?.(message);
-                    openPopover();
-                  }}
-                  onOpenImage={onOpenImage}
-                  onOpenVideo={onOpenVideo}
-                  onSeeMore={onSeeMore}
-                />
-              )}
-            />
-          )}
-          {otherSide}
-        </View>
-
-        {!isDeleted && !isFailed ? (
-          <View style={styles.reactionBadge}>
-            <MessageReactionBadge
-              message={message}
-              onTap={() => onOpenReactorList?.(message)}
-            />
-          </View>
-        ) : null}
-      </View>
-    </View>
-  );
-}

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

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

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

@@ -1,78 +0,0 @@
-// Styles for MessageRow — ported from AmityUiKitWeb MessageRow.module.css.
-// Geometry: row gap 0.5rem→8, padding 0.25rem 0→vertical 4, max-width 80%, side
-// margin 1rem→16; avatar 2rem→32; content gap 0.25rem→4; bubbleRow gap 8;
-// timestamp (__side) paddingBottom 0.5rem→8. 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({
-    row: {
-      flexDirection: 'row',
-      alignItems: 'flex-end',
-      gap: 8,
-      paddingVertical: 4,
-      maxWidth: '80%',
-    },
-    rowOwn: {
-      alignSelf: 'flex-end',
-      justifyContent: 'flex-end',
-      marginRight: 16,
-    },
-    rowOther: {
-      alignSelf: 'flex-start',
-      justifyContent: 'flex-start',
-      marginLeft: 16,
-    },
-    avatar: {
-      width: 32,
-      height: 32,
-      flexShrink: 0,
-    },
-    content: {
-      flexDirection: 'column',
-      gap: 4,
-      minWidth: 0,
-      flexShrink: 1,
-    },
-    contentOwn: {
-      alignItems: 'flex-end',
-    },
-    contentOther: {
-      alignItems: 'flex-start',
-    },
-    senderName: {
-      maxWidth: '100%',
-      color: token(AmityColorToken.TextChatBubbleInboundHeaderUserNameDefault),
-    },
-    bubbleRow: {
-      flexDirection: 'row',
-      alignItems: 'flex-end',
-      gap: 8,
-    },
-    // web .messageRow__errorButton: flex-shrink 0 + align-self center — the
-    // failed-message button opts out of the row's flex-end so it sits level with
-    // the middle of the bubble.
-    failedButton: {
-      flexShrink: 0,
-      alignSelf: 'center',
-    },
-    // web messageRow__reactionBadge sits absolute at bottom:-0.875rem, overlapping
-    // the bubble's bottom edge. RN approximates with a small negative margin (in-flow);
-    // side alignment is inherited from content column (own → end, other → start).
-    reactionBadge: {
-      marginTop: -6,
-    },
-    side: {
-      color: token(AmityColorToken.TextTimestampDefault),
-      flexShrink: 0,
-      paddingBottom: 8,
-    },
-  });
-
-  return { styles, token };
-};

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

@@ -1,3 +0,0 @@
-export * from './Header';
-export * from './MessageList';
-export * from './MessageRow';

package/src/chat/features/conversation/create/CreateConversation.tsx

@@ -1,36 +0,0 @@
-// CreateConversation — entry component for the create-conversation flow.
-// Ported from AmityUiKitWeb v4/chat/features/conversation/create/CreateConversation.
-// Composes the Header (title + search) over the searchable UserList; selecting a
-// user creates a 1:1 conversation channel and navigates into it.
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Internal imports (relative)
-import { Header } from './components/Header/Header';
-import { UserList } from './components/UserList/UserList';
-import { useCreateConversation } from './hooks/useCreateConversation';
-import { useStyles } from './styles';
-
-// 3. Named function component
-export function CreateConversation() {
-  const { styles } = useStyles();
-  const {
-    searchText,
-    setSearchText,
-    debouncedText,
-    handleSelectUser,
-    handleClose,
-  } = useCreateConversation();
-
-  return (
-    <View style={styles.createConversation}>
-      <Header
-        onClose={handleClose}
-        searchValue={searchText}
-        onSearchChange={setSearchText}
-      />
-      <UserList searchText={debouncedText} onSelectUser={handleSelectUser} />
-    </View>
-  );
-}