@amityco/react-native-social-uikit 4.2.1-f052efd.0 → 4.3.0

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

@@ -0,0 +1,298 @@
+// 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 { useState } from 'react';
+import { View } from 'react-native';
+
+// 2. Internal imports
+import useFile from '../../../../../core/hooks/useFile';
+import { ImageSizeState } from '../../../../../core/enums';
+import { Typography } from '../../../../../core/design/components/Typography';
+import { useString } from '../../../../../core/localization';
+import { Avatar } from '../../../../elements/Avatar';
+import { ImageViewer } from '../../../shared/components/ImageViewer';
+import { useBehaviour } from '../../../../../social/providers/BehaviourProvider';
+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;
+  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;
+  /** This message's SENDER is a channel moderator — badges their avatar. */
+  isSenderModerator?: boolean;
+  /** Viewer is muted here — trims Edit/Reply/Report out of the action menu. */
+  viewerIsMutedInChannel?: 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;
+  /** Cancel this message's in-flight upload (already bound to its client id). */
+  onCancelUpload?: () => void;
+};
+
+// 4. Named function component
+export function MessageRow({
+  message,
+  isUser,
+  isGroupChat = false,
+  currentUserId,
+  onOpenImage,
+  onOpenVideo,
+  onOpenFailedSheet,
+  onOpenBubbleMenu,
+  onOpenReactorList,
+  onSeeMore,
+  bubbleHandlers,
+  viewerIsModerator = false,
+  isSenderModerator = false,
+  viewerIsMutedInChannel = false,
+  localPreviewUrl,
+  onMediaLoaded,
+  onCancelUpload,
+}: MessageRowProps) {
+  const { styles } = useStyles();
+  const sendingLabel = useString('amity_chat_sending_status');
+
+  const creator = message.creator;
+  const displayName = creator?.displayName ?? '';
+  const avatarFileId = creator?.avatarFileId ?? '';
+  const avatarUrl = useFile({ fileId: avatarFileId });
+  // Tapping the sender avatar opens their profile picture full screen, at
+  // 'large' size.
+  const avatarLargeUrl = useFile({
+    fileId: avatarFileId,
+    imageSize: ImageSizeState.large,
+  });
+  const [isAvatarViewerOpen, setIsAvatarViewerOpen] = useState(false);
+  const { AmityMessageBubbleBehavior } = useBehaviour();
+
+  // A host app that wants the tap takes it; otherwise the picture opens full
+  // screen, which is what this row did before there was anywhere to hand it.
+  const handleAvatarPress = () => {
+    if (AmityMessageBubbleBehavior?.onAvatarTap) {
+      AmityMessageBubbleBehavior.onAvatarTap({
+        userId: creator?.userId ?? '',
+        avatarUrl: fullScreenAvatarUrl,
+      });
+      return;
+    }
+    if (fullScreenAvatarUrl) setIsAvatarViewerOpen(true);
+  };
+  const fullScreenAvatarUrl = creator?.isDeleted
+    ? undefined
+    : avatarLargeUrl ?? avatarUrl;
+
+  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}
+            // Derived per row from the channel's moderator ids. The badge
+            // itself already existed on Avatar.User; nothing was feeding it.
+            isModerator={isSenderModerator}
+            size="sm"
+            onPress={
+              fullScreenAvatarUrl || AmityMessageBubbleBehavior?.onAvatarTap
+                ? handleAvatarPress
+                : undefined
+            }
+          />
+        </View>
+      ) : null}
+
+      {isAvatarViewerOpen && fullScreenAvatarUrl ? (
+        <ImageViewer
+          src={fullScreenAvatarUrl}
+          onClose={() => setIsAvatarViewerOpen(false)}
+        />
+      ) : 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
+            parentId={message.parentId}
+            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, losing the inline error entirely.
+              localPreviewUrl={localPreviewUrl}
+              onOpenImage={onOpenImage}
+              onOpenVideo={onOpenVideo}
+              onSeeMore={onSeeMore}
+            />
+          ) : (
+            <AmityMessageActionMenu
+              message={message}
+              currentUserId={currentUserId}
+              viewerIsModerator={viewerIsModerator}
+              viewerIsMutedInChannel={viewerIsMutedInChannel}
+              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}
+                  onCancelUpload={onCancelUpload}
+                  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

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

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

@@ -0,0 +1,92 @@
+// 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({
+    // No maxWidth here on purpose. Web has `.messageRow { max-width: 80% }`,
+    // but this row also holds the avatar and the timestamp, and the design SoT
+    // is explicit that the 60% rule targets the bubble's message content
+    // (Figma `ChatBubble / Message Content` = 228) and NOT the whole row
+    // (`ChatBubble` = 343): "implementations must not let the avatar or
+    // timestamp consume the bubble's budget."
+    //
+    // An 80% cap here does exactly that. At 375pt: cap 300, against a 60%
+    // bubble (225) + avatar (32 + 8 gap) + timestamp (~33 + 8 gap) = 306 — so
+    // the cap binds and shaves the bubble, by an amount that varies with the
+    // clock string. That is precisely the Android defect the SoT documents
+    // (a `widthIn(max = 280.dp)` on the Row shared with the timestamp left the
+    // bubble at 55.6% of a 411dp screen); it was fixed there by removing the
+    // Row cap. The bubble carries its own hard 60% cap, so nothing here can
+    // overflow: worst case is ~74% of the window.
+    row: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      gap: 8,
+      paddingVertical: 4,
+    },
+    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

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

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

@@ -0,0 +1,36 @@
+// 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>
+  );
+}

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

@@ -0,0 +1,42 @@
+// 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

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

package/src/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/chat/features/conversation/create/components/UserItem/UserItem.tsx

@@ -0,0 +1,69 @@
+// 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).
+//   - Web pulls its `BrandBadge` from `social/`, which chat must not depend on
+//     (CLAUDE.md); RN uses the core element instead.
+//   - `react-aria` Button → Pressable.
+
+// 1. React / RN imports
+import { Pressable, View } from 'react-native';
+
+// 2. Internal imports (relative)
+import { Avatar } from '../../../../../elements/Avatar';
+import { BrandBadge } from '../../../../../../core/design/elements/BrandBadge';
+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>
+        {/* Sits right after the name, 16 square. */}
+        {user.isBrand ? <BrandBadge accessibilityLabel="Brand" /> : null}
+      </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

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

package/src/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 };
+};