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

package/lib/module/social/features/chat/features/conversation/components/MessageList/MessageList.js

@@ -0,0 +1,176 @@
+// 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 { isSyntheticPendingMessage } from '../../../shared/hooks/useMessageComposer';
+import { useStyles } from './styles';
+
+// 3. Types
+
+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) {
+  const byClientId = new Map();
+  const byFileId = new Map();
+  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
+}) {
+  const {
+    styles
+  } = useStyles();
+  const previews = useMemo(() => buildPreviewMaps(pendingUploads), [pendingUploads]);
+  const listRef = useRef(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();
+    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();
+    for (const it of data) if (it.kind === 'message') map.set(it.message.messageId, it.message);
+    return map;
+  }, [data]);
+  const scrollToLatest = useCallback(() => {
+    var _listRef$current;
+    (_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.scrollToOffset({
+      offset: 0,
+      animated: true
+    });
+    onClearNewMessage === null || onClearNewMessage === void 0 || onClearNewMessage();
+  }, [onClearNewMessage]);
+  const handleScroll = useCallback(e => {
+    // Inverted list: offset near 0 == pinned to the newest (bottom) message.
+    const next = e.nativeEvent.contentOffset.y < AT_BOTTOM_THRESHOLD;
+    if (next !== atBottom) onAtBottomChange === null || onAtBottomChange === void 0 || 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 /*#__PURE__*/React.createElement(View, {
+    style: styles.list
+  }, /*#__PURE__*/React.createElement(FlatList, {
+    ref: listRef,
+    style: styles.list,
+    contentContainerStyle: styles.content,
+    data: data,
+    inverted: true,
+    ListFooterComponent: showTopLoader ? /*#__PURE__*/React.createElement(View, {
+      style: styles.topLoader
+    }, /*#__PURE__*/React.createElement(Loader.Spinner, {
+      size: "sm"
+    })) : null,
+    keyExtractor: item => item.id,
+    renderItem: ({
+      item
+    }) => {
+      var _message$data;
+      if (item.kind === 'date') return /*#__PURE__*/React.createElement(DateSeparator, {
+        label: item.label
+      });
+      const {
+        message
+      } = item;
+      const isUser = !!currentUserId && message.creatorId === currentUserId;
+      const messageFileId = ((_message$data = message.data) === null || _message$data === void 0 ? void 0 : _message$data.fileId) ?? message.fileId;
+      const localPreviewUrl = isSyntheticPendingMessage(message) ? previews.byClientId.get(message.__syntheticClientId) : messageFileId ? previews.byFileId.get(messageFileId) : undefined;
+      return /*#__PURE__*/React.createElement(MessageRow, {
+        message: message,
+        localPreviewUrl: localPreviewUrl,
+        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 ? /*#__PURE__*/React.createElement(View, {
+    style: styles.newMessageSlot
+  }, /*#__PURE__*/React.createElement(NewMessageNotification, {
+    message: newMessage,
+    onPress: scrollToLatest
+  })) : null, showScrollButton ? /*#__PURE__*/React.createElement(View, {
+    style: styles.scrollButtonSlot
+  }, /*#__PURE__*/React.createElement(ScrollToLatestButton, {
+    onPress: scrollToLatest
+  })) : null);
+}
+//# sourceMappingURL=MessageList.js.map

package/lib/module/social/features/chat/features/conversation/components/MessageList/MessageList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useMemo","useRef","FlatList","View","MessageRow","DateSeparator","ScrollToLatestButton","NewMessageNotification","Loader","isSyntheticPendingMessage","useStyles","AT_BOTTOM_THRESHOLD","buildPreviewMaps","pendingUploads","byClientId","Map","byFileId","p","previewUrl","set","clientId","fileId","MessageList","items","currentUserId","isGroupChat","hasMore","onLoadMore","isLoading","isLoadingFirstPage","atBottom","onAtBottomChange","newMessage","onClearNewMessage","onOpenImage","onOpenVideo","onOpenFailedSheet","onOpenBubbleMenu","onOpenReactorList","onSeeMore","bubbleHandlers","viewerIsModerator","styles","previews","listRef","data","seen","Set","filter","it","has","id","add","messageById","map","kind","message","messageId","scrollToLatest","_listRef$current","current","scrollToOffset","offset","animated","handleScroll","e","next","nativeEvent","contentOffset","y","showTopLoader","showNotification","showScrollButton","React","createElement","style","list","ref","contentContainerStyle","content","inverted","ListFooterComponent","topLoader","Spinner","size","keyExtractor","item","renderItem","_message$data","label","isUser","creatorId","messageFileId","localPreviewUrl","get","__syntheticClientId","undefined","parent","parentId","onScroll","scrollEventThrottle","onEndReached","onEndReachedThreshold","newMessageSlot","onPress","scrollButtonSlot"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/conversation/components/MessageList/MessageList.tsx"],"mappings":"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","ignoreList":[]}

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

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

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

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

package/lib/module/social/features/chat/features/conversation/components/MessageList/styles.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","list","flex","backgroundColor","SurfacePageBackgroundDefault","content","paddingVertical","topLoader","width","height","alignItems","justifyContent","scrollButtonSlot","position","right","bottom","newMessageSlot","left"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/conversation/components/MessageList/styles.ts"],"mappings":"AAAA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,iDAAiD;AAC1E,SAASC,eAAe,QAAQ,4DAA4D;AAE5F,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGH,QAAQ,CAAC,CAAC;EAExB,MAAMI,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;IAC/BC,IAAI,EAAE;MACJC,IAAI,EAAE,CAAC;MACPC,eAAe,EAAEL,KAAK,CAACF,eAAe,CAACQ,4BAA4B;IACrE,CAAC;IACDC,OAAO,EAAE;MACP;MACA;MACAC,eAAe,EAAE;IACnB,CAAC;IACD;IACA;IACA;IACAC,SAAS,EAAE;MACTC,KAAK,EAAE,MAAM;MACbC,MAAM,EAAE,EAAE;MACVC,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBR,eAAe,EAAEL,KAAK,CAACF,eAAe,CAACQ,4BAA4B;IACrE,CAAC;IACD;IACAQ,gBAAgB,EAAE;MAChBC,QAAQ,EAAE,UAAU;MACpBC,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE;IACV,CAAC;IACDC,cAAc,EAAE;MACdH,QAAQ,EAAE,UAAU;MACpBI,IAAI,EAAE,CAAC;MACPH,KAAK,EAAE,CAAC;MACRC,MAAM,EAAE,EAAE;MACVL,UAAU,EAAE;IACd;EACF,CAAC,CAAC;EAEF,OAAO;IAAEX,MAAM;IAAED;EAAM,CAAC;AAC1B,CAAC","ignoreList":[]}

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

@@ -0,0 +1,176 @@
+// 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
+
+// 4. Named function component
+export function MessageRow({
+  message,
+  isUser,
+  isGroupChat = false,
+  currentUserId,
+  parent,
+  onOpenImage,
+  onOpenVideo,
+  onOpenFailedSheet,
+  onOpenBubbleMenu,
+  onOpenReactorList,
+  onSeeMore,
+  bubbleHandlers,
+  viewerIsModerator = false,
+  localPreviewUrl
+}) {
+  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 avatarUrl = useFile({
+    fileId: (creator === null || creator === void 0 ? void 0 : creator.avatarFileId) ?? ''
+  });
+  const isDeleted = !!message.isDeleted;
+  const syncState = message.syncState;
+  const isSynced = syncState === undefined || syncState === 'synced';
+  const isFailed = syncState === 'error';
+  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,
+    size: "sm"
+  })) : 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, {
+    parent: parent,
+    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 — the missing inline error in PDT-4128.
+    ,
+    localPreviewUrl: localPreviewUrl,
+    onOpenImage: onOpenImage,
+    onOpenVideo: onOpenVideo,
+    onSeeMore: onSeeMore
+  }) : /*#__PURE__*/React.createElement(AmityMessageActionMenu, {
+    message: message,
+    currentUserId: currentUserId,
+    viewerIsModerator: viewerIsModerator,
+    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,
+      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/social/features/chat/features/conversation/components/MessageRow/MessageRow.js.map

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

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

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

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

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

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

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

package/lib/module/social/features/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","maxWidth","rowOwn","alignSelf","justifyContent","marginRight","rowOther","marginLeft","avatar","width","height","flexShrink","content","minWidth","contentOwn","contentOther","senderName","color","TextChatBubbleInboundHeaderUserNameDefault","bubbleRow","failedButton","reactionBadge","marginTop","side","TextTimestampDefault","paddingBottom"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/conversation/components/MessageRow/styles.ts"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,iDAAiD;AAC1E,SAASC,eAAe,QAAQ,4DAA4D;AAE5F,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGH,QAAQ,CAAC,CAAC;EAExB,MAAMI,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;IAC/BC,GAAG,EAAE;MACHC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,UAAU;MACtBC,GAAG,EAAE,CAAC;MACNC,eAAe,EAAE,CAAC;MAClBC,QAAQ,EAAE;IACZ,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;MACPf,aAAa,EAAE,QAAQ;MACvBE,GAAG,EAAE,CAAC;MACNc,QAAQ,EAAE,CAAC;MACXF,UAAU,EAAE;IACd,CAAC;IACDG,UAAU,EAAE;MACVhB,UAAU,EAAE;IACd,CAAC;IACDiB,YAAY,EAAE;MACZjB,UAAU,EAAE;IACd,CAAC;IACDkB,UAAU,EAAE;MACVf,QAAQ,EAAE,MAAM;MAChBgB,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;MACZT,UAAU,EAAE,CAAC;MACbR,SAAS,EAAE;IACb,CAAC;IACD;IACA;IACA;IACAkB,aAAa,EAAE;MACbC,SAAS,EAAE,CAAC;IACd,CAAC;IACDC,IAAI,EAAE;MACJN,KAAK,EAAExB,KAAK,CAACF,eAAe,CAACiC,oBAAoB,CAAC;MAClDb,UAAU,EAAE,CAAC;MACbc,aAAa,EAAE;IACjB;EACF,CAAC,CAAC;EAEF,OAAO;IAAE/B,MAAM;IAAED;EAAM,CAAC;AAC1B,CAAC","ignoreList":[]}

package/lib/module/social/features/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/social/features/chat/features/conversation/components/index.js.map

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

package/lib/module/social/features/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/social/features/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":["social/features/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/social/features/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/social/features/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":["social/features/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,2DAA2D;AACvF,SAASC,SAAS,QAAQ,2CAA2C;AACrE,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/social/features/chat/features/conversation/create/components/Header/index.js

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