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

package/lib/module/chat/features/conversation/components/MessageRow/MessageRow.js

@@ -0,0 +1,226 @@
+// 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
+
+// 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
+}) {
+  const {
+    styles
+  } = useStyles();
+  const sendingLabel = useString('amity_chat_sending_status');
+  const creator = message.creator;
+  const displayName = (creator === null || creator === void 0 ? void 0 : creator.displayName) ?? '';
+  const avatarFileId = (creator === null || creator === void 0 ? void 0 : 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 !== null && AmityMessageBubbleBehavior !== void 0 && AmityMessageBubbleBehavior.onAvatarTap) {
+      AmityMessageBubbleBehavior.onAvatarTap({
+        userId: (creator === null || creator === void 0 ? void 0 : creator.userId) ?? '',
+        avatarUrl: fullScreenAvatarUrl
+      });
+      return;
+    }
+    if (fullScreenAvatarUrl) setIsAvatarViewerOpen(true);
+  };
+  const fullScreenAvatarUrl = creator !== null && creator !== void 0 && creator.isDeleted ? undefined : avatarLargeUrl ?? avatarUrl;
+  const isDeleted = !!message.isDeleted;
+  const syncState = message.syncState;
+  const isSynced = syncState === undefined || syncState === 'synced';
+  const isFailed = syncState === 'error';
+
+  // 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 ? /*#__PURE__*/React.createElement(Typography, {
+    variant: "captionSmall",
+    style: styles.side
+  }, isSynced ? timeText : !isFailed ? sendingLabel : '') : null;
+  const otherSide = !isUser && !isDeleted && timeText ? /*#__PURE__*/React.createElement(Typography, {
+    variant: "captionSmall",
+    style: styles.side
+  }, timeText) : null;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.row, isUser ? styles.rowOwn : styles.rowOther]
+  }, !isUser && creator ? /*#__PURE__*/React.createElement(View, {
+    style: styles.avatar
+  }, /*#__PURE__*/React.createElement(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 !== null && AmityMessageBubbleBehavior !== void 0 && AmityMessageBubbleBehavior.onAvatarTap ? handleAvatarPress : undefined
+  })) : null, isAvatarViewerOpen && fullScreenAvatarUrl ? /*#__PURE__*/React.createElement(ImageViewer, {
+    src: fullScreenAvatarUrl,
+    onClose: () => setIsAvatarViewerOpen(false)
+  }) : null, /*#__PURE__*/React.createElement(View, {
+    style: [styles.content, isUser ? styles.contentOwn : styles.contentOther]
+  }, showSenderName ? /*#__PURE__*/React.createElement(Typography, {
+    variant: "captionBold",
+    style: styles.senderName,
+    numberOfLines: 1
+  }, displayName) : null, message.parentId && !isDeleted ? /*#__PURE__*/React.createElement(MessageReplyQuote, {
+    parentId: message.parentId,
+    child: message,
+    isUser: isUser,
+    isGroupChat: isGroupChat,
+    currentUserId: currentUserId,
+    onOpenSeeMore: onSeeMore ?? (() => {}),
+    onOpenImage: onOpenImage ?? (() => {}),
+    onOpenVideo: onOpenVideo ?? (() => {})
+  }) : null, /*#__PURE__*/React.createElement(View, {
+    style: styles.bubbleRow
+  }, ownSide, isUser && isFailed ?
+  /*#__PURE__*/
+  // 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`.
+  React.createElement(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 === null || onOpenFailedSheet === void 0 ? void 0 : onOpenFailedSheet(message),
+    accessibilityLabel: "Message failed to send"
+  }) : null, isDeleted ? /*#__PURE__*/React.createElement(AmityMessageBubble, {
+    message: message,
+    isUser: isUser
+  }) : isFailed ?
+  /*#__PURE__*/
+  // 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.
+  React.createElement(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
+  }) : /*#__PURE__*/React.createElement(AmityMessageActionMenu, {
+    message: message,
+    currentUserId: currentUserId,
+    viewerIsModerator: viewerIsModerator,
+    viewerIsMutedInChannel: viewerIsMutedInChannel,
+    placement: isUser ? 'bottom right' : 'bottom left',
+    handlers: {
+      onEdit: (bubbleHandlers === null || bubbleHandlers === void 0 ? void 0 : bubbleHandlers.onEdit) ?? (() => {}),
+      onReply: (bubbleHandlers === null || bubbleHandlers === void 0 ? void 0 : bubbleHandlers.onReply) ?? (() => {}),
+      onDelete: (bubbleHandlers === null || bubbleHandlers === void 0 ? void 0 : bubbleHandlers.onDelete) ?? (() => {}),
+      onCopy: (bubbleHandlers === null || bubbleHandlers === void 0 ? void 0 : bubbleHandlers.onCopy) ?? (() => {}),
+      onSave: (bubbleHandlers === null || bubbleHandlers === void 0 ? void 0 : bubbleHandlers.onSave) ?? (() => {}),
+      onReport: (bubbleHandlers === null || bubbleHandlers === void 0 ? void 0 : bubbleHandlers.onReport) ?? (() => {})
+    },
+    anchor: ({
+      isOpen,
+      openPopover
+    }) => /*#__PURE__*/React.createElement(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 === null || onOpenBubbleMenu === void 0 || onOpenBubbleMenu(message);
+        openPopover();
+      },
+      onOpenImage: onOpenImage,
+      onOpenVideo: onOpenVideo,
+      onSeeMore: onSeeMore
+    })
+  }), otherSide), !isDeleted && !isFailed ? /*#__PURE__*/React.createElement(View, {
+    style: styles.reactionBadge
+  }, /*#__PURE__*/React.createElement(MessageReactionBadge, {
+    message: message,
+    onTap: () => onOpenReactorList === null || onOpenReactorList === void 0 ? void 0 : onOpenReactorList(message)
+  })) : null));
+}
+//# sourceMappingURL=MessageRow.js.map

package/lib/module/chat/features/conversation/components/MessageRow/MessageRow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","View","useFile","ImageSizeState","Typography","useString","Avatar","ImageViewer","useBehaviour","AmityMessageBubble","AmityMessageActionMenu","MessageReplyQuote","MessageReactionBadge","Button","formatMessageTime","useStyles","MessageRow","message","isUser","isGroupChat","currentUserId","onOpenImage","onOpenVideo","onOpenFailedSheet","onOpenBubbleMenu","onOpenReactorList","onSeeMore","bubbleHandlers","viewerIsModerator","isSenderModerator","viewerIsMutedInChannel","localPreviewUrl","onMediaLoaded","onCancelUpload","styles","sendingLabel","creator","displayName","avatarFileId","avatarUrl","fileId","avatarLargeUrl","imageSize","large","isAvatarViewerOpen","setIsAvatarViewerOpen","AmityMessageBubbleBehavior","handleAvatarPress","onAvatarTap","userId","fullScreenAvatarUrl","isDeleted","undefined","syncState","isSynced","isFailed","isUploading","showSenderName","parentId","timeText","createdAt","ownSide","React","createElement","variant","style","side","otherSide","row","rowOwn","rowOther","avatar","User","isModerator","size","onPress","src","onClose","content","contentOwn","contentOther","senderName","numberOfLines","child","onOpenSeeMore","bubbleRow","Icon","icon","styleType","hierarchy","iconSize","failedButton","accessibilityLabel","placement","handlers","onEdit","onReply","onDelete","onCopy","onSave","onReport","anchor","isOpen","openPopover","isActive","onLongPress","reactionBadge","onTap"],"sourceRoot":"../../../../../../../src","sources":["chat/features/conversation/components/MessageRow/MessageRow.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/chat/features/conversation/components/MessageRow/index.js

@@ -0,0 +1,2 @@
+export { MessageRow } from './MessageRow';
+//# sourceMappingURL=index.js.map

package/lib/module/chat/features/conversation/components/MessageRow/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MessageRow"],"sourceRoot":"../../../../../../../src","sources":["chat/features/conversation/components/MessageRow/index.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc","ignoreList":[]}

package/lib/module/chat/features/conversation/components/MessageRow/styles.js

@@ -0,0 +1,93 @@
+// 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
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/chat/features/conversation/components/MessageRow/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","row","flexDirection","alignItems","gap","paddingVertical","rowOwn","alignSelf","justifyContent","marginRight","rowOther","marginLeft","avatar","width","height","flexShrink","content","minWidth","contentOwn","contentOther","senderName","maxWidth","color","TextChatBubbleInboundHeaderUserNameDefault","bubbleRow","failedButton","reactionBadge","marginTop","side","TextTimestampDefault","paddingBottom"],"sourceRoot":"../../../../../../../src","sources":["chat/features/conversation/components/MessageRow/styles.ts"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,2CAA2C;AACpE,SAASC,eAAe,QAAQ,sDAAsD;AAEtF,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGH,QAAQ,CAAC,CAAC;EAExB,MAAMI,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;IAC/B;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACAC,GAAG,EAAE;MACHC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,UAAU;MACtBC,GAAG,EAAE,CAAC;MACNC,eAAe,EAAE;IACnB,CAAC;IACDC,MAAM,EAAE;MACNC,SAAS,EAAE,UAAU;MACrBC,cAAc,EAAE,UAAU;MAC1BC,WAAW,EAAE;IACf,CAAC;IACDC,QAAQ,EAAE;MACRH,SAAS,EAAE,YAAY;MACvBC,cAAc,EAAE,YAAY;MAC5BG,UAAU,EAAE;IACd,CAAC;IACDC,MAAM,EAAE;MACNC,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE,EAAE;MACVC,UAAU,EAAE;IACd,CAAC;IACDC,OAAO,EAAE;MACPd,aAAa,EAAE,QAAQ;MACvBE,GAAG,EAAE,CAAC;MACNa,QAAQ,EAAE,CAAC;MACXF,UAAU,EAAE;IACd,CAAC;IACDG,UAAU,EAAE;MACVf,UAAU,EAAE;IACd,CAAC;IACDgB,YAAY,EAAE;MACZhB,UAAU,EAAE;IACd,CAAC;IACDiB,UAAU,EAAE;MACVC,QAAQ,EAAE,MAAM;MAChBC,KAAK,EAAExB,KAAK,CAACF,eAAe,CAAC2B,0CAA0C;IACzE,CAAC;IACDC,SAAS,EAAE;MACTtB,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,UAAU;MACtBC,GAAG,EAAE;IACP,CAAC;IACD;IACA;IACA;IACAqB,YAAY,EAAE;MACZV,UAAU,EAAE,CAAC;MACbR,SAAS,EAAE;IACb,CAAC;IACD;IACA;IACA;IACAmB,aAAa,EAAE;MACbC,SAAS,EAAE,CAAC;IACd,CAAC;IACDC,IAAI,EAAE;MACJN,KAAK,EAAExB,KAAK,CAACF,eAAe,CAACiC,oBAAoB,CAAC;MAClDd,UAAU,EAAE,CAAC;MACbe,aAAa,EAAE;IACjB;EACF,CAAC,CAAC;EAEF,OAAO;IAAE/B,MAAM;IAAED;EAAM,CAAC;AAC1B,CAAC","ignoreList":[]}

package/lib/module/chat/features/conversation/components/index.js

@@ -0,0 +1,4 @@
+export * from './Header';
+export * from './MessageList';
+export * from './MessageRow';
+//# sourceMappingURL=index.js.map

package/lib/module/chat/features/conversation/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../../src","sources":["chat/features/conversation/components/index.ts"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,cAAc","ignoreList":[]}

package/lib/module/chat/features/conversation/create/CreateConversation.js

@@ -0,0 +1,38 @@
+// 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 /*#__PURE__*/React.createElement(View, {
+    style: styles.createConversation
+  }, /*#__PURE__*/React.createElement(Header, {
+    onClose: handleClose,
+    searchValue: searchText,
+    onSearchChange: setSearchText
+  }), /*#__PURE__*/React.createElement(UserList, {
+    searchText: debouncedText,
+    onSelectUser: handleSelectUser
+  }));
+}
+//# sourceMappingURL=CreateConversation.js.map

package/lib/module/chat/features/conversation/create/CreateConversation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","Header","UserList","useCreateConversation","useStyles","CreateConversation","styles","searchText","setSearchText","debouncedText","handleSelectUser","handleClose","React","createElement","style","createConversation","onClose","searchValue","onSearchChange","onSelectUser"],"sourceRoot":"../../../../../../src","sources":["chat/features/conversation/create/CreateConversation.tsx"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA;AACA,SAASA,IAAI,QAAQ,cAAc;;AAEnC;AACA,SAASC,MAAM,QAAQ,4BAA4B;AACnD,SAASC,QAAQ,QAAQ,gCAAgC;AACzD,SAASC,qBAAqB,QAAQ,+BAA+B;AACrE,SAASC,SAAS,QAAQ,UAAU;;AAEpC;AACA,OAAO,SAASC,kBAAkBA,CAAA,EAAG;EACnC,MAAM;IAAEC;EAAO,CAAC,GAAGF,SAAS,CAAC,CAAC;EAC9B,MAAM;IACJG,UAAU;IACVC,aAAa;IACbC,aAAa;IACbC,gBAAgB;IAChBC;EACF,CAAC,GAAGR,qBAAqB,CAAC,CAAC;EAE3B,oBACES,KAAA,CAAAC,aAAA,CAACb,IAAI;IAACc,KAAK,EAAER,MAAM,CAACS;EAAmB,gBACrCH,KAAA,CAAAC,aAAA,CAACZ,MAAM;IACLe,OAAO,EAAEL,WAAY;IACrBM,WAAW,EAAEV,UAAW;IACxBW,cAAc,EAAEV;EAAc,CAC/B,CAAC,eACFI,KAAA,CAAAC,aAAA,CAACX,QAAQ;IAACK,UAAU,EAAEE,aAAc;IAACU,YAAY,EAAET;EAAiB,CAAE,CAClE,CAAC;AAEX","ignoreList":[]}

package/lib/module/chat/features/conversation/create/components/Header/Header.js

@@ -0,0 +1,44 @@
+// 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
+
+// 4. Named function component
+export function Header({
+  onClose,
+  searchValue,
+  onSearchChange
+}) {
+  const {
+    styles
+  } = useStyles();
+  const title = useString('amity_chat_create_conversation_title');
+  const searchPlaceholder = useString('amity_chat_search_placeholder');
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.header
+  }, /*#__PURE__*/React.createElement(TopBar, {
+    title: title,
+    leadingType: "close",
+    onLeading: onClose
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.searchBar
+  }, /*#__PURE__*/React.createElement(SearchInput, {
+    value: searchValue,
+    onChange: onSearchChange,
+    placeholder: searchPlaceholder,
+    accessibilityLabel: searchPlaceholder
+  })));
+}
+//# sourceMappingURL=Header.js.map

package/lib/module/chat/features/conversation/create/components/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","TopBar","SearchInput","useString","useStyles","Header","onClose","searchValue","onSearchChange","styles","title","searchPlaceholder","React","createElement","style","header","leadingType","onLeading","searchBar","value","onChange","placeholder","accessibilityLabel"],"sourceRoot":"../../../../../../../../src","sources":["chat/features/conversation/create/components/Header/Header.tsx"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAEA;AACA,SAASA,IAAI,QAAQ,cAAc;;AAEnC;AACA,SAASC,MAAM,QAAQ,gCAAgC;AACvD,SAASC,WAAW,QAAQ,qDAAqD;AACjF,SAASC,SAAS,QAAQ,qCAAqC;AAC/D,SAASC,SAAS,QAAQ,UAAU;;AAEpC;;AAOA;AACA,OAAO,SAASC,MAAMA,CAAC;EAAEC,OAAO;EAAEC,WAAW;EAAEC;AAA4B,CAAC,EAAE;EAC5E,MAAM;IAAEC;EAAO,CAAC,GAAGL,SAAS,CAAC,CAAC;EAC9B,MAAMM,KAAK,GAAGP,SAAS,CAAC,sCAAsC,CAAC;EAC/D,MAAMQ,iBAAiB,GAAGR,SAAS,CAAC,+BAA+B,CAAC;EAEpE,oBACES,KAAA,CAAAC,aAAA,CAACb,IAAI;IAACc,KAAK,EAAEL,MAAM,CAACM;EAAO,gBACzBH,KAAA,CAAAC,aAAA,CAACZ,MAAM;IAACS,KAAK,EAAEA,KAAM;IAACM,WAAW,EAAC,OAAO;IAACC,SAAS,EAAEX;EAAQ,CAAE,CAAC,eAChEM,KAAA,CAAAC,aAAA,CAACb,IAAI;IAACc,KAAK,EAAEL,MAAM,CAACS;EAAU,gBAC5BN,KAAA,CAAAC,aAAA,CAACX,WAAW;IACViB,KAAK,EAAEZ,WAAY;IACnBa,QAAQ,EAAEZ,cAAe;IACzBa,WAAW,EAAEV,iBAAkB;IAC/BW,kBAAkB,EAAEX;EAAkB,CACvC,CACG,CACF,CAAC;AAEX","ignoreList":[]}

package/lib/module/chat/features/conversation/create/components/Header/index.js

@@ -0,0 +1,2 @@
+export { Header } from './Header';
+//# sourceMappingURL=index.js.map

package/lib/module/chat/features/conversation/create/components/Header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Header"],"sourceRoot":"../../../../../../../../src","sources":["chat/features/conversation/create/components/Header/index.ts"],"mappings":"AAAA,SAASA,MAAM,QAAQ,UAAU","ignoreList":[]}

package/lib/module/chat/features/conversation/create/components/Header/styles.js

@@ -0,0 +1,25 @@
+// 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
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/chat/features/conversation/create/components/Header/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","header","flexDirection","backgroundColor","SurfacePageBackgroundDefault","searchBar","paddingVertical","paddingHorizontal"],"sourceRoot":"../../../../../../../../src","sources":["chat/features/conversation/create/components/Header/styles.ts"],"mappings":"AAAA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,8CAA8C;AACvE,SAASC,eAAe,QAAQ,yDAAyD;AAEzF,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGH,QAAQ,CAAC,CAAC;EAExB,MAAMI,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;IAC/BC,MAAM,EAAE;MACNC,aAAa,EAAE,QAAQ;MACvBC,eAAe,EAAEL,KAAK,CAACF,eAAe,CAACQ,4BAA4B;IACrE,CAAC;IACDC,SAAS,EAAE;MACTC,eAAe,EAAE,CAAC;MAClBC,iBAAiB,EAAE;IACrB;EACF,CAAC,CAAC;EAEF,OAAO;IAAER,MAAM;IAAED;EAAM,CAAC;AAC1B,CAAC","ignoreList":[]}

package/lib/module/chat/features/conversation/create/components/UserItem/UserItem.js

@@ -0,0 +1,77 @@
+// 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
+
+// 4. Named function component
+export function UserItem({
+  user,
+  onPress
+}) {
+  const {
+    styles
+  } = useStyles();
+  const displayName = user.displayName ?? user.userId;
+  const avatarUrl = useFile({
+    fileId: user.avatarFileId ?? ''
+  });
+  return /*#__PURE__*/React.createElement(Pressable, {
+    style: ({
+      pressed
+    }) => [styles.userItem, pressed && styles.userItemPressed],
+    onPress: () => onPress(user),
+    accessibilityRole: "button",
+    accessibilityLabel: `Start chat with ${displayName}`
+  }, /*#__PURE__*/React.createElement(Avatar.User, {
+    avatarUrl: avatarUrl,
+    displayName: displayName,
+    size: "md"
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.nameRow
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "bodyBold",
+    style: styles.name,
+    numberOfLines: 1
+  }, displayName), user.isBrand ? /*#__PURE__*/React.createElement(BrandBadge, {
+    accessibilityLabel: "Brand"
+  }) : null));
+}
+
+// 5. Compound variant — loading skeleton row.
+function UserItemSkeleton() {
+  const {
+    styles
+  } = useStyles();
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.skeletonRow
+  }, /*#__PURE__*/React.createElement(Skeleton, {
+    circle: true,
+    width: 40,
+    height: 40
+  }), /*#__PURE__*/React.createElement(Skeleton, {
+    width: 140,
+    height: 10
+  }));
+}
+UserItem.Skeleton = UserItemSkeleton;
+//# sourceMappingURL=UserItem.js.map

package/lib/module/chat/features/conversation/create/components/UserItem/UserItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Pressable","View","Avatar","BrandBadge","Typography","Skeleton","useFile","useStyles","UserItem","user","onPress","styles","displayName","userId","avatarUrl","fileId","avatarFileId","React","createElement","style","pressed","userItem","userItemPressed","accessibilityRole","accessibilityLabel","User","size","nameRow","variant","name","numberOfLines","isBrand","UserItemSkeleton","skeletonRow","circle","width","height"],"sourceRoot":"../../../../../../../../src","sources":["chat/features/conversation/create/components/UserItem/UserItem.tsx"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,SAASA,SAAS,EAAEC,IAAI,QAAQ,cAAc;;AAE9C;AACA,SAASC,MAAM,QAAQ,gCAAgC;AACvD,SAASC,UAAU,QAAQ,mDAAmD;AAC9E,SAASC,UAAU,QAAQ,qDAAqD;AAChF,SAASC,QAAQ,QAAQ,mDAAmD;AAC5E,OAAOC,OAAO,MAAM,sCAAsC;AAC1D,SAASC,SAAS,QAAQ,UAAU;;AAEpC;;AAMA;AACA,OAAO,SAASC,QAAQA,CAAC;EAAEC,IAAI;EAAEC;AAAuB,CAAC,EAAE;EACzD,MAAM;IAAEC;EAAO,CAAC,GAAGJ,SAAS,CAAC,CAAC;EAC9B,MAAMK,WAAW,GAAGH,IAAI,CAACG,WAAW,IAAIH,IAAI,CAACI,MAAM;EACnD,MAAMC,SAAS,GAAGR,OAAO,CAAC;IAAES,MAAM,EAAEN,IAAI,CAACO,YAAY,IAAI;EAAG,CAAC,CAAC;EAE9D,oBACEC,KAAA,CAAAC,aAAA,CAAClB,SAAS;IACRmB,KAAK,EAAEA,CAAC;MAAEC;IAAQ,CAAC,KAAK,CACtBT,MAAM,CAACU,QAAQ,EACfD,OAAO,IAAIT,MAAM,CAACW,eAAe,CACjC;IACFZ,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACD,IAAI,CAAE;IAC7Bc,iBAAiB,EAAC,QAAQ;IAC1BC,kBAAkB,EAAE,mBAAmBZ,WAAW;EAAG,gBAErDK,KAAA,CAAAC,aAAA,CAAChB,MAAM,CAACuB,IAAI;IAACX,SAAS,EAAEA,SAAU;IAACF,WAAW,EAAEA,WAAY;IAACc,IAAI,EAAC;EAAI,CAAE,CAAC,eACzET,KAAA,CAAAC,aAAA,CAACjB,IAAI;IAACkB,KAAK,EAAER,MAAM,CAACgB;EAAQ,gBAC1BV,KAAA,CAAAC,aAAA,CAACd,UAAU;IAACwB,OAAO,EAAC,UAAU;IAACT,KAAK,EAAER,MAAM,CAACkB,IAAK;IAACC,aAAa,EAAE;EAAE,GACjElB,WACS,CAAC,EAEZH,IAAI,CAACsB,OAAO,gBAAGd,KAAA,CAAAC,aAAA,CAACf,UAAU;IAACqB,kBAAkB,EAAC;EAAO,CAAE,CAAC,GAAG,IACxD,CACG,CAAC;AAEhB;;AAEA;AACA,SAASQ,gBAAgBA,CAAA,EAAG;EAC1B,MAAM;IAAErB;EAAO,CAAC,GAAGJ,SAAS,CAAC,CAAC;EAC9B,oBACEU,KAAA,CAAAC,aAAA,CAACjB,IAAI;IAACkB,KAAK,EAAER,MAAM,CAACsB;EAAY,gBAC9BhB,KAAA,CAAAC,aAAA,CAACb,QAAQ;IAAC6B,MAAM;IAACC,KAAK,EAAE,EAAG;IAACC,MAAM,EAAE;EAAG,CAAE,CAAC,eAC1CnB,KAAA,CAAAC,aAAA,CAACb,QAAQ;IAAC8B,KAAK,EAAE,GAAI;IAACC,MAAM,EAAE;EAAG,CAAE,CAC/B,CAAC;AAEX;AAEA5B,QAAQ,CAACH,QAAQ,GAAG2B,gBAAgB","ignoreList":[]}

package/lib/module/chat/features/conversation/create/components/UserItem/index.js

@@ -0,0 +1,2 @@
+export { UserItem } from './UserItem';
+//# sourceMappingURL=index.js.map

package/lib/module/chat/features/conversation/create/components/UserItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["UserItem"],"sourceRoot":"../../../../../../../../src","sources":["chat/features/conversation/create/components/UserItem/index.ts"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,YAAY","ignoreList":[]}

package/lib/module/chat/features/conversation/create/components/UserItem/styles.js

@@ -0,0 +1,52 @@
+// 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
+  };
+};
+//# sourceMappingURL=styles.js.map