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

package/lib/module/social/features/chat/features/shared/components/MessageLinkPreview/useLinkPreview.js

@@ -0,0 +1,45 @@
+// useLinkPreview — RN replacement for the web `usePreviewLink` hook.
+// Web resolves OpenGraph metadata via a react-query hook; RN uses the SDK's
+// `Client.getLinkPreviewMetadata(url)` which returns { title, description,
+// domain, imageUrl }. The SDK ships the `Amity.LinkPreviewMetadata` global but
+// does not wire it into its type index, so a local result type is used and the
+// call is cast. Web's debounce/refetch flags collapse to a single `isLoading`.
+
+import { useEffect, useState } from 'react';
+import { Client } from '@amityco/ts-sdk-react-native';
+export function useLinkPreview(url) {
+  const [data, setData] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+  useEffect(() => {
+    let active = true;
+    if (url) {
+      setIsLoading(true);
+      setIsError(false);
+      Client.getLinkPreviewMetadata(url).then(result => {
+        if (active) setData(result);
+      }).catch(() => {
+        if (active) setIsError(true);
+      }).finally(() => {
+        if (active) setIsLoading(false);
+      });
+    } else {
+      setData(null);
+    }
+    return () => {
+      active = false;
+    };
+  }, [url]);
+  return {
+    data,
+    isLoading,
+    isError
+  };
+}
+
+// Fallback host extractor (web used chat/utils/previewLink#getHostName). Avoids
+// the URL/whatwg polyfill, which RN lacks.
+export function getHostName(url) {
+  return url.replace(/^https?:\/\//i, '').replace(/^www\./i, '').split(/[/?#]/)[0] ?? '';
+}
+//# sourceMappingURL=useLinkPreview.js.map

package/lib/module/social/features/chat/features/shared/components/MessageLinkPreview/useLinkPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useState","Client","useLinkPreview","url","data","setData","isLoading","setIsLoading","isError","setIsError","active","getLinkPreviewMetadata","then","result","catch","finally","getHostName","replace","split"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/shared/components/MessageLinkPreview/useLinkPreview.ts"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,MAAM,QAAQ,8BAA8B;AASrD,OAAO,SAASC,cAAcA,CAACC,GAAW,EAAE;EAC1C,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGL,QAAQ,CAA2B,IAAI,CAAC;EAChE,MAAM,CAACM,SAAS,EAAEC,YAAY,CAAC,GAAGP,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAM,CAACQ,OAAO,EAAEC,UAAU,CAAC,GAAGT,QAAQ,CAAC,KAAK,CAAC;EAE7CD,SAAS,CAAC,MAAM;IACd,IAAIW,MAAM,GAAG,IAAI;IACjB,IAAIP,GAAG,EAAE;MACPI,YAAY,CAAC,IAAI,CAAC;MAClBE,UAAU,CAAC,KAAK,CAAC;MAChBR,MAAM,CAACU,sBAAsB,CAACR,GAAG,CAAC,CAChCS,IAAI,CAAEC,MAAM,IAAK;QAChB,IAAIH,MAAM,EAAEL,OAAO,CAACQ,MAAM,CAAC;MAC7B,CAAC,CAAC,CACDC,KAAK,CAAC,MAAM;QACX,IAAIJ,MAAM,EAAED,UAAU,CAAC,IAAI,CAAC;MAC9B,CAAC,CAAC,CACDM,OAAO,CAAC,MAAM;QACb,IAAIL,MAAM,EAAEH,YAAY,CAAC,KAAK,CAAC;MACjC,CAAC,CAAC;IACN,CAAC,MAAM;MACLF,OAAO,CAAC,IAAI,CAAC;IACf;IACA,OAAO,MAAM;MACXK,MAAM,GAAG,KAAK;IAChB,CAAC;EACH,CAAC,EAAE,CAACP,GAAG,CAAC,CAAC;EAET,OAAO;IAAEC,IAAI;IAAEE,SAAS;IAAEE;EAAQ,CAAC;AACrC;;AAEA;AACA;AACA,OAAO,SAASQ,WAAWA,CAACb,GAAW,EAAU;EAC/C,OACEA,GAAG,CACAc,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC,CAC5BA,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CACtBC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE;AAE9B","ignoreList":[]}

package/lib/module/social/features/chat/features/shared/components/MessageReactionBadge/MessageReactionBadge.js

@@ -0,0 +1,59 @@
+// MessageReactionBadge — RN port of AmityUiKitWeb
+// v4/chat/features/shared/components/MessageReactionBadge/MessageReactionBadge.tsx.
+// The small reaction-count pill shown on a message bubble: up to 3 overlapping
+// reaction glyphs (highest count first) + the abbreviated total. Tapping it
+// opens the reactor list. Hidden when there are no reactions or the message is
+// deleted. `data-contains-my-reaction` (web) → the `containsMyReaction` styling.
+
+// 1. React / RN imports
+import { useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+
+// 2. Internal imports
+import { Typography } from '../../../../../../../core/design/components/Typography';
+import { abbreviateCount } from '../../../../../../../core/utils/abbreviateCount';
+import { ReactionGlyph } from '../../utils/reactionIcons';
+import { useStyles } from './styles';
+
+// Web imports this from v4/chat/constants (MAX_REACTION_BADGE_ICONS = 3).
+const MAX_REACTION_BADGE_ICONS = 3;
+
+// 3. Types
+
+// 4. Named function component
+export function MessageReactionBadge({
+  message,
+  onTap
+}) {
+  var _message$myReactions;
+  const reactionMap = message.reactions ?? {};
+  const totalCount = message.reactionsCount ?? 0;
+  const containsMyReaction = (((_message$myReactions = message.myReactions) === null || _message$myReactions === void 0 ? void 0 : _message$myReactions.length) ?? 0) > 0;
+  const {
+    styles
+  } = useStyles(containsMyReaction);
+  const sortedNames = useMemo(() => {
+    return Object.entries(reactionMap).filter(([, count]) => count > 0).sort((a, b) => a[1] === b[1] ? a[0].localeCompare(b[0]) : b[1] - a[1]).slice(0, MAX_REACTION_BADGE_ICONS).map(([name]) => name);
+  }, [message.reactions]);
+  if (totalCount === 0 || message.isDeleted) return null;
+  return /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.container,
+    onPress: onTap,
+    accessibilityRole: "button",
+    accessibilityLabel: `View ${totalCount} reactions`
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.stack
+  }, sortedNames.map((name, index) => /*#__PURE__*/React.createElement(View, {
+    key: `${name}-${index}`,
+    style: [styles.icon, {
+      zIndex: MAX_REACTION_BADGE_ICONS - index
+    }]
+  }, /*#__PURE__*/React.createElement(ReactionGlyph, {
+    name: name,
+    size: 18
+  })))), /*#__PURE__*/React.createElement(Typography, {
+    variant: "captionBold",
+    style: styles.count
+  }, abbreviateCount(totalCount)));
+}
+//# sourceMappingURL=MessageReactionBadge.js.map

package/lib/module/social/features/chat/features/shared/components/MessageReactionBadge/MessageReactionBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","Pressable","View","Typography","abbreviateCount","ReactionGlyph","useStyles","MAX_REACTION_BADGE_ICONS","MessageReactionBadge","message","onTap","_message$myReactions","reactionMap","reactions","totalCount","reactionsCount","containsMyReaction","myReactions","length","styles","sortedNames","Object","entries","filter","count","sort","a","b","localeCompare","slice","map","name","isDeleted","React","createElement","style","container","onPress","accessibilityRole","accessibilityLabel","stack","index","key","icon","zIndex","size","variant"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/shared/components/MessageReactionBadge/MessageReactionBadge.tsx"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,SAAS,EAAEC,IAAI,QAAQ,cAAc;;AAE9C;AACA,SAASC,UAAU,QAAQ,wDAAwD;AACnF,SAASC,eAAe,QAAQ,iDAAiD;AACjF,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,SAAS,QAAQ,UAAU;;AAEpC;AACA,MAAMC,wBAAwB,GAAG,CAAC;;AAElC;;AAMA;AACA,OAAO,SAASC,oBAAoBA,CAAC;EACnCC,OAAO;EACPC;AACyB,CAAC,EAAE;EAAA,IAAAC,oBAAA;EAC5B,MAAMC,WAAW,GACdH,OAAO,CAACI,SAAS,IAA2C,CAAC,CAAC;EACjE,MAAMC,UAAU,GAAGL,OAAO,CAACM,cAAc,IAAI,CAAC;EAC9C,MAAMC,kBAAkB,GAAG,CAAC,EAAAL,oBAAA,GAAAF,OAAO,CAACQ,WAAW,cAAAN,oBAAA,uBAAnBA,oBAAA,CAAqBO,MAAM,KAAI,CAAC,IAAI,CAAC;EAEjE,MAAM;IAAEC;EAAO,CAAC,GAAGb,SAAS,CAACU,kBAAkB,CAAC;EAEhD,MAAMI,WAAW,GAAGpB,OAAO,CAAC,MAAM;IAChC,OAAOqB,MAAM,CAACC,OAAO,CAACV,WAAW,CAAC,CAC/BW,MAAM,CAAC,CAAC,GAAGC,KAAK,CAAC,KAAKA,KAAK,GAAG,CAAC,CAAC,CAChCC,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAMD,CAAC,CAAC,CAAC,CAAC,KAAKC,CAAC,CAAC,CAAC,CAAC,GAAGD,CAAC,CAAC,CAAC,CAAC,CAACE,aAAa,CAACD,CAAC,CAAC,CAAC,CAAC,CAAC,GAAGA,CAAC,CAAC,CAAC,CAAC,GAAGD,CAAC,CAAC,CAAC,CAAE,CAAC,CACxEG,KAAK,CAAC,CAAC,EAAEtB,wBAAwB,CAAC,CAClCuB,GAAG,CAAC,CAAC,CAACC,IAAI,CAAC,KAAKA,IAAI,CAAC;EAC1B,CAAC,EAAE,CAACtB,OAAO,CAACI,SAAS,CAAC,CAAC;EAEvB,IAAIC,UAAU,KAAK,CAAC,IAAIL,OAAO,CAACuB,SAAS,EAAE,OAAO,IAAI;EAEtD,oBACEC,KAAA,CAAAC,aAAA,CAACjC,SAAS;IACRkC,KAAK,EAAEhB,MAAM,CAACiB,SAAU;IACxBC,OAAO,EAAE3B,KAAM;IACf4B,iBAAiB,EAAC,QAAQ;IAC1BC,kBAAkB,EAAE,QAAQzB,UAAU;EAAa,gBAEnDmB,KAAA,CAAAC,aAAA,CAAChC,IAAI;IAACiC,KAAK,EAAEhB,MAAM,CAACqB;EAAM,GACvBpB,WAAW,CAACU,GAAG,CAAC,CAACC,IAAI,EAAEU,KAAK,kBAC3BR,KAAA,CAAAC,aAAA,CAAChC,IAAI;IACHwC,GAAG,EAAE,GAAGX,IAAI,IAAIU,KAAK,EAAG;IACxBN,KAAK,EAAE,CAAChB,MAAM,CAACwB,IAAI,EAAE;MAAEC,MAAM,EAAErC,wBAAwB,GAAGkC;IAAM,CAAC;EAAE,gBAGnER,KAAA,CAAAC,aAAA,CAAC7B,aAAa;IAAC0B,IAAI,EAAEA,IAAK;IAACc,IAAI,EAAE;EAAG,CAAE,CAClC,CACP,CACG,CAAC,eACPZ,KAAA,CAAAC,aAAA,CAAC/B,UAAU;IAAC2C,OAAO,EAAC,aAAa;IAACX,KAAK,EAAEhB,MAAM,CAACK;EAAM,GACnDpB,eAAe,CAACU,UAAU,CACjB,CACH,CAAC;AAEhB","ignoreList":[]}

package/lib/module/social/features/chat/features/shared/components/MessageReactionBadge/index.js

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

package/lib/module/social/features/chat/features/shared/components/MessageReactionBadge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MessageReactionBadge"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/shared/components/MessageReactionBadge/index.tsx"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,wBAAwB","ignoreList":[]}

package/lib/module/social/features/chat/features/shared/components/MessageReactionBadge/styles.js

@@ -0,0 +1,60 @@
+// Styles for MessageReactionBadge — ported from AmityUiKitWeb
+// v4/chat/features/shared/components/MessageReactionBadge/MessageReactionBadge.module.css.
+// rem→px ×16. Colours resolve through AmityColorToken.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+export const useStyles = containsMyReaction => {
+  const token = useToken();
+
+  // Web `.messageReactionBadge[data-contains-my-reaction='true']` swaps the
+  // surface + border; both token refs are kept in source so either state is
+  // reachable (and the fidelity gate sees both).
+  const surface = containsMyReaction ? token(AmityColorToken.SurfaceReactionsReactionCountActive) : token(AmityColorToken.SurfaceReactionsReactionCountDefault);
+  const border = containsMyReaction ? token(AmityColorToken.BorderReactionReactionCountActive) : token(AmityColorToken.BorderReactionReactionCountDefault);
+  const countColor = containsMyReaction ? token(AmityColorToken.TextReactionsChatReactionCountActive) : token(AmityColorToken.TextReactionsChatReactionCountDefault);
+  const styles = StyleSheet.create({
+    // .messageReactionBadge
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+      gap: 2,
+      height: 28,
+      marginTop: -6,
+      paddingVertical: 4,
+      paddingHorizontal: 6,
+      borderWidth: 1,
+      borderColor: border,
+      borderRadius: 24,
+      backgroundColor: surface
+    },
+    // .messageReactionBadge__stack
+    stack: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingRight: 8
+    },
+    // .messageReactionBadge__icon — 20×20 atom circle behind each glyph.
+    icon: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 20,
+      height: 20,
+      marginRight: -8,
+      borderRadius: 9999,
+      backgroundColor: token(AmityColorToken.BorderReactionReactionAtomDefault)
+    },
+    // .messageReactionBadge__count
+    count: {
+      fontSize: 13,
+      lineHeight: 18,
+      color: countColor
+    }
+  });
+  return {
+    styles
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/social/features/chat/features/shared/components/MessageReactionBadge/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","containsMyReaction","token","surface","SurfaceReactionsReactionCountActive","SurfaceReactionsReactionCountDefault","border","BorderReactionReactionCountActive","BorderReactionReactionCountDefault","countColor","TextReactionsChatReactionCountActive","TextReactionsChatReactionCountDefault","styles","create","container","flexDirection","alignItems","alignSelf","gap","height","marginTop","paddingVertical","paddingHorizontal","borderWidth","borderColor","borderRadius","backgroundColor","stack","paddingRight","icon","justifyContent","width","marginRight","BorderReactionReactionAtomDefault","count","fontSize","lineHeight","color"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/shared/components/MessageReactionBadge/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,GAAIC,kBAA2B,IAAK;EACxD,MAAMC,KAAK,GAAGJ,QAAQ,CAAC,CAAC;;EAExB;EACA;EACA;EACA,MAAMK,OAAO,GAAGF,kBAAkB,GAC9BC,KAAK,CAACH,eAAe,CAACK,mCAAmC,CAAC,GAC1DF,KAAK,CAACH,eAAe,CAACM,oCAAoC,CAAC;EAC/D,MAAMC,MAAM,GAAGL,kBAAkB,GAC7BC,KAAK,CAACH,eAAe,CAACQ,iCAAiC,CAAC,GACxDL,KAAK,CAACH,eAAe,CAACS,kCAAkC,CAAC;EAC7D,MAAMC,UAAU,GAAGR,kBAAkB,GACjCC,KAAK,CAACH,eAAe,CAACW,oCAAoC,CAAC,GAC3DR,KAAK,CAACH,eAAe,CAACY,qCAAqC,CAAC;EAEhE,MAAMC,MAAM,GAAGf,UAAU,CAACgB,MAAM,CAAC;IAC/B;IACAC,SAAS,EAAE;MACTC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,SAAS,EAAE,YAAY;MACvBC,GAAG,EAAE,CAAC;MACNC,MAAM,EAAE,EAAE;MACVC,SAAS,EAAE,CAAC,CAAC;MACbC,eAAe,EAAE,CAAC;MAClBC,iBAAiB,EAAE,CAAC;MACpBC,WAAW,EAAE,CAAC;MACdC,WAAW,EAAElB,MAAM;MACnBmB,YAAY,EAAE,EAAE;MAChBC,eAAe,EAAEvB;IACnB,CAAC;IACD;IACAwB,KAAK,EAAE;MACLZ,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBY,YAAY,EAAE;IAChB,CAAC;IACD;IACAC,IAAI,EAAE;MACJb,UAAU,EAAE,QAAQ;MACpBc,cAAc,EAAE,QAAQ;MACxBC,KAAK,EAAE,EAAE;MACTZ,MAAM,EAAE,EAAE;MACVa,WAAW,EAAE,CAAC,CAAC;MACfP,YAAY,EAAE,IAAI;MAClBC,eAAe,EAAExB,KAAK,CAACH,eAAe,CAACkC,iCAAiC;IAC1E,CAAC;IACD;IACAC,KAAK,EAAE;MACLC,QAAQ,EAAE,EAAE;MACZC,UAAU,EAAE,EAAE;MACdC,KAAK,EAAE5B;IACT;EACF,CAAC,CAAC;EAEF,OAAO;IAAEG;EAAO,CAAC;AACnB,CAAC","ignoreList":[]}

package/lib/module/social/features/chat/features/shared/components/MessageReactorListSheet/MessageReactorListSheet.js

@@ -0,0 +1,274 @@
+// MessageReactorListSheet — RN port of AmityUiKitWeb
+// v4/chat/features/shared/components/MessageReactorListSheet/MessageReactorListSheet.tsx.
+// The reactor list shown in a bottom sheet: an underlined tab per distinct
+// reaction (plus an "All" tab), each listing who reacted. This renders the sheet
+// CONTENT only — the orchestrator mounts it inside the repo's @devvie bottom
+// sheet with the same `messageId` + `onClose` contract web's useBubbleMenu uses.
+//
+// RN adaptations from web:
+//   - Live message via MessageRepository.getMessage (web useMessageObject).
+//   - Reactor pagination via useReactorsCollection (web useReactionsCollection);
+//     IntersectionObserver → FlatList onEndReached.
+//   - The RN Tab atom's underlined variant renders a string label only and can't
+//     host web's icon+count node label, so the tab bar is rendered inline reusing
+//     the SoT underlined-tab tokens/geometry.
+
+// 1. React / RN imports
+import { useEffect, useMemo, useState } from 'react';
+import { FlatList, Pressable, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { FileRepository, MessageRepository } from '@amityco/ts-sdk-react-native';
+
+// 2. Internal imports
+import { Typography } from '../../../../../../../core/design/components/Typography';
+import { Skeleton } from '../../../../../../../core/design/components/Skeleton';
+import { Avatar } from '../../../../../../../core/design/atoms/Avatar';
+import { useString } from '../../../../../../../core/localization';
+import { abbreviateCount } from '../../../../../../../core/utils/abbreviateCount';
+import { useCurrentUserId } from '../../../../hooks/useCurrentUserId';
+import { useMessageReactions } from '../../hooks/useMessageReactions';
+import { useReactorsCollection } from '../../hooks/useReactorsCollection';
+import { ReactionGlyph, SmilePlus } from '../../utils/reactionIcons';
+import { useStyles } from './styles';
+
+// 3. Types
+
+const ALL_TAB = 'all';
+
+// @devvie reserves this above the content for its drag handle
+// (DEFAULT_HANDLE_BAR_DEFAULT_HEIGHT: paddingTop 10 + height 5 + paddingBottom 10).
+const DRAG_HANDLE_HEIGHT = 25;
+
+// 4. Named function component
+export function MessageReactorListSheet({
+  messageId,
+  onClose,
+  initialMessage = null,
+  sheetHeight
+}) {
+  const {
+    styles
+  } = useStyles();
+  const insets = useSafeAreaInsets();
+  // The content area the @devvie sheet actually gives our children.
+  const contentHeight = sheetHeight ? sheetHeight - DRAG_HANDLE_HEIGHT - insets.bottom : undefined;
+  const currentUserId = useCurrentUserId();
+  const {
+    removeReaction
+  } = useMessageReactions();
+  const allTabLabel = useString('amity_chat_tab_all');
+
+  // Live message (web useMessageObject), seeded from the tapped message.
+  const [currentMessage, setCurrentMessage] = useState(initialMessage);
+  useEffect(() => {
+    const unsubscribe = MessageRepository.getMessage(messageId, result => {
+      // Only overwrite once real data arrives — a loading callback with no data
+      // must not wipe the seeded initialMessage (which keeps totalCount correct).
+      if (result.data) setCurrentMessage(result.data);
+    });
+    return () => unsubscribe();
+  }, [messageId]);
+  const isMessageDeleted = !!(currentMessage !== null && currentMessage !== void 0 && currentMessage.isDeleted);
+  const reactionMap = (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.reactions) ?? {};
+  const totalCount = isMessageDeleted ? 0 : (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.reactionsCount) ?? 0;
+  const distinctNames = useMemo(() => {
+    if (isMessageDeleted) return [];
+    return Object.entries(reactionMap).filter(([, count]) => count > 0).sort((a, b) => a[1] === b[1] ? a[0].localeCompare(b[0]) : b[1] - a[1]).map(([name]) => name);
+  }, [currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.reactions, isMessageDeleted]);
+  const [activeTab, setActiveTab] = useState(distinctNames.length > 1 ? ALL_TAB : distinctNames[0] ?? ALL_TAB);
+  useEffect(() => {
+    if (activeTab === ALL_TAB) return;
+    if (distinctNames.includes(activeTab)) return;
+    setActiveTab(distinctNames.length > 1 ? ALL_TAB : distinctNames[0] ?? ALL_TAB);
+  }, [activeTab, distinctNames]);
+  const {
+    reactors,
+    isLoading,
+    isLoadingFirstPage,
+    hasMore,
+    loadMore
+  } = useReactorsCollection({
+    referenceType: 'message',
+    referenceId: messageId,
+    limit: 25,
+    ...(activeTab !== ALL_TAB ? {
+      reactionName: activeTab
+    } : {})
+  });
+  const myReactor = useMemo(() => {
+    if (!currentUserId) return null;
+    return reactors.find(r => r.userId === currentUserId) ?? null;
+  }, [reactors, currentUserId]);
+  const others = useMemo(() => myReactor ? reactors.filter(r => r !== myReactor) : reactors, [reactors, myReactor]);
+  async function handleOwnRowPress() {
+    if (!myReactor || !currentMessage) return;
+    onClose();
+    await removeReaction({
+      message: currentMessage,
+      reactionName: myReactor.reactionName
+    });
+  }
+  const rows = useMemo(() => {
+    const list = [];
+    if (myReactor) list.push({
+      reactor: myReactor,
+      isOwn: true
+    });
+    for (const r of others) list.push({
+      reactor: r,
+      isOwn: false
+    });
+    return list;
+  }, [myReactor, others]);
+
+  // Tab items (web `tabs()`).
+  const tabItems = [];
+  const showAllTab = distinctNames.length === 0 || distinctNames.length > 1;
+  if (showAllTab) {
+    tabItems.push({
+      value: ALL_TAB,
+      text: `${allTabLabel} ${abbreviateCount(totalCount)}`
+    });
+  }
+  for (const name of distinctNames) {
+    tabItems.push({
+      value: name,
+      icon: /*#__PURE__*/React.createElement(ReactionGlyph, {
+        name: name,
+        size: 20
+      }),
+      text: `${abbreviateCount(reactionMap[name] ?? 0)}`
+    });
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, contentHeight ? {
+      height: contentHeight
+    } : styles.containerFill]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.tabList
+  }, tabItems.map(t => {
+    const active = activeTab === t.value;
+    return /*#__PURE__*/React.createElement(Pressable, {
+      key: t.value,
+      style: styles.tab,
+      onPress: () => setActiveTab(t.value),
+      accessibilityRole: "tab",
+      accessibilityState: {
+        selected: active
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.tabLabel
+    }, t.icon, /*#__PURE__*/React.createElement(Typography, {
+      style: [styles.tabLabelText, active ? styles.tabLabelTextActive : styles.tabLabelTextDefault]
+    }, t.text)), /*#__PURE__*/React.createElement(View, {
+      style: [styles.tabIndicator, active && styles.tabIndicatorActive]
+    }));
+  })), totalCount === 0 ? /*#__PURE__*/React.createElement(EmptyState, null) : /*#__PURE__*/React.createElement(FlatList, {
+    style: styles.flatList,
+    data: rows,
+    keyExtractor: (item, index) => `${item.reactor.userId ?? 'unknown'}-${index}`,
+    renderItem: ({
+      item
+    }) => /*#__PURE__*/React.createElement(ReactorRow, {
+      reactor: item.reactor,
+      isOwn: item.isOwn,
+      onPress: item.isOwn ? handleOwnRowPress : undefined
+    }),
+    onEndReachedThreshold: 0.4,
+    onEndReached: () => {
+      if (hasMore && !isLoading && !isLoadingFirstPage) loadMore();
+    },
+    ListFooterComponent: isLoadingFirstPage || isLoading ? /*#__PURE__*/React.createElement(SkeletonRows, {
+      count: 3
+    }) : null,
+    contentContainerStyle: styles.list
+  }));
+}
+
+// --- Reactor row -------------------------------------------------------------
+
+function ReactorRow({
+  reactor,
+  isOwn = false,
+  onPress
+}) {
+  var _reactor$user, _reactor$user2, _reactor$user3, _reactor$user4;
+  const {
+    styles
+  } = useStyles();
+  const tapToRemoveLabel = useString('amity_common_button_tap_to_remove_reaction');
+  const displayName = ((_reactor$user = reactor.user) === null || _reactor$user === void 0 ? void 0 : _reactor$user.displayName) ?? ((_reactor$user2 = reactor.user) === null || _reactor$user2 === void 0 ? void 0 : _reactor$user2.userId) ?? '';
+  const avatarFileUrl = (_reactor$user3 = reactor.user) === null || _reactor$user3 === void 0 || (_reactor$user3 = _reactor$user3.avatar) === null || _reactor$user3 === void 0 ? void 0 : _reactor$user3.fileUrl;
+  const imageUrl = avatarFileUrl ? FileRepository.fileUrlWithSize(avatarFileUrl, 'small') : undefined;
+  return /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.row,
+    onPress: onPress,
+    accessibilityRole: "button",
+    accessibilityLabel: isOwn ? tapToRemoveLabel : displayName
+  }, reactor.user && /*#__PURE__*/React.createElement(Avatar, {
+    variant: imageUrl ? 'image' : 'text',
+    shape: "rounded",
+    size: 32,
+    imageUrl: imageUrl,
+    initials: displayName.trim().charAt(0).toUpperCase() || '?'
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.rowText
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "bodyBold",
+    style: styles.rowTitle
+  }, ((_reactor$user4 = reactor.user) === null || _reactor$user4 === void 0 ? void 0 : _reactor$user4.displayName) ?? ''), isOwn ? /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption",
+    style: styles.rowCaption
+  }, tapToRemoveLabel) : null), /*#__PURE__*/React.createElement(ReactionGlyph, {
+    name: reactor.reactionName,
+    size: 24
+  }));
+}
+
+// --- Empty state -------------------------------------------------------------
+function EmptyState() {
+  const {
+    styles,
+    emptyStateIconColor
+  } = useStyles();
+  const title = useString('amity_common_button_no_reactions_yet');
+  const description = useString('amity_common_label_be_first_to_react', 'message');
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.emptyState
+  }, /*#__PURE__*/React.createElement(SmilePlus, {
+    size: 48,
+    color: emptyStateIconColor
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.emptyStateText
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "titleBold",
+    style: styles.emptyStateTitle
+  }, title), /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption",
+    style: styles.emptyStateDescription
+  }, description)));
+}
+
+// --- Skeleton rows -----------------------------------------------------------
+function SkeletonRows({
+  count
+}) {
+  const {
+    styles
+  } = useStyles();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, Array.from({
+    length: count
+  }).map((_, i) => /*#__PURE__*/React.createElement(View, {
+    key: i,
+    style: styles.skeletonRow
+  }, /*#__PURE__*/React.createElement(Skeleton, {
+    circle: true,
+    width: 40,
+    height: 40
+  }), /*#__PURE__*/React.createElement(Skeleton, {
+    width: 140,
+    height: 10,
+    borderRadius: 12
+  }))));
+}
+//# sourceMappingURL=MessageReactorListSheet.js.map

package/lib/module/social/features/chat/features/shared/components/MessageReactorListSheet/MessageReactorListSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","useState","FlatList","Pressable","View","useSafeAreaInsets","FileRepository","MessageRepository","Typography","Skeleton","Avatar","useString","abbreviateCount","useCurrentUserId","useMessageReactions","useReactorsCollection","ReactionGlyph","SmilePlus","useStyles","ALL_TAB","DRAG_HANDLE_HEIGHT","MessageReactorListSheet","messageId","onClose","initialMessage","sheetHeight","styles","insets","contentHeight","bottom","undefined","currentUserId","removeReaction","allTabLabel","currentMessage","setCurrentMessage","unsubscribe","getMessage","result","data","isMessageDeleted","isDeleted","reactionMap","reactions","totalCount","reactionsCount","distinctNames","Object","entries","filter","count","sort","a","b","localeCompare","map","name","activeTab","setActiveTab","length","includes","reactors","isLoading","isLoadingFirstPage","hasMore","loadMore","referenceType","referenceId","limit","reactionName","myReactor","find","r","userId","others","handleOwnRowPress","message","rows","list","push","reactor","isOwn","tabItems","showAllTab","value","text","icon","React","createElement","size","style","container","height","containerFill","tabList","t","active","key","tab","onPress","accessibilityRole","accessibilityState","selected","tabLabel","tabLabelText","tabLabelTextActive","tabLabelTextDefault","tabIndicator","tabIndicatorActive","EmptyState","flatList","keyExtractor","item","index","renderItem","ReactorRow","onEndReachedThreshold","onEndReached","ListFooterComponent","SkeletonRows","contentContainerStyle","_reactor$user","_reactor$user2","_reactor$user3","_reactor$user4","tapToRemoveLabel","displayName","user","avatarFileUrl","avatar","fileUrl","imageUrl","fileUrlWithSize","row","accessibilityLabel","variant","shape","initials","trim","charAt","toUpperCase","rowText","rowTitle","rowCaption","emptyStateIconColor","title","description","emptyState","color","emptyStateText","emptyStateTitle","emptyStateDescription","Fragment","Array","from","_","i","skeletonRow","circle","width","borderRadius"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/shared/components/MessageReactorListSheet/MessageReactorListSheet.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/social/features/chat/features/shared/components/MessageReactorListSheet/index.js

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

package/lib/module/social/features/chat/features/shared/components/MessageReactorListSheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MessageReactorListSheet"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/shared/components/MessageReactorListSheet/index.tsx"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,2BAA2B","ignoreList":[]}

package/lib/module/social/features/chat/features/shared/components/MessageReactorListSheet/styles.js

@@ -0,0 +1,151 @@
+// Styles for MessageReactorListSheet — ported from AmityUiKitWeb
+// v4/chat/features/shared/components/MessageReactorListSheet/MessageReactorListSheet.module.css.
+// The web drawer-specific bits (margin 0 -1rem, 90vh min/max-height, desktop
+// 30rem width, vaul drag) are omitted: in RN the @devvie/bottom-sheet host owns
+// height/width/drag, so this renders as flex content inside it. Tab-bar visuals
+// reuse the SoT underlined-tab tokens/geometry (the RN Tab atom can't host an
+// icon+count node label, so the bar is rendered inline — see component note).
+
+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({
+    // .messageReactorListSheet
+    // NOTE: no `flex: 1` here. The @devvie sheet wraps our content in an
+    // AUTO-height inner View, so there is no free space for a flex child to grow
+    // into — and in RN `flex: 1` means `flexBasis: 0`, which would then collapse
+    // the container to height 0 (tabs overflow-paint, list vanishes). The
+    // component instead sets an EXPLICIT `height` (contentHeight) from the sheet
+    // height; `containerFill` is only a fallback when that height is unknown.
+    container: {
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault)
+    },
+    containerFill: {
+      flex: 1
+    },
+    // Once the container has a definite height, the FlatList CAN flex to fill the
+    // space below the fixed-height tab bar (there is now free space to grow into).
+    flatList: {
+      flex: 1
+    },
+    // .messageReactorListSheet__tabList (underlined: row, gap 20, padding 0 per web sheet)
+    tabList: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 20,
+      paddingHorizontal: 16
+    },
+    // one underlined tab (SoT geometry: height 56, paddingTop 16, gap 14, indicator 2)
+    tab: {
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: 14,
+      height: 56,
+      paddingTop: 16,
+      backgroundColor: 'transparent'
+    },
+    // .messageReactorListSheet__tabLabel
+    tabLabel: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 8
+    },
+    tabLabelText: {
+      fontSize: 17,
+      lineHeight: 24
+    },
+    // underlined-tab label colours/weights (SoT Text/Tab/Underlined tokens)
+    tabLabelTextActive: {
+      fontWeight: '600',
+      color: token(AmityColorToken.TextTabUnderlinedActive)
+    },
+    tabLabelTextDefault: {
+      fontWeight: '400',
+      color: token(AmityColorToken.TextTabUnderlinedDefault)
+    },
+    tabIndicator: {
+      width: '100%',
+      height: 2,
+      backgroundColor: 'transparent'
+    },
+    tabIndicatorActive: {
+      backgroundColor: token(AmityColorToken.LineTabUnderlinedActive)
+    },
+    // .messageReactorListSheet__list
+    list: {
+      flex: 1,
+      paddingTop: 8,
+      paddingBottom: 48
+    },
+    // .messageReactorListSheet__row
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      width: '100%',
+      height: 56,
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+      backgroundColor: 'transparent'
+    },
+    // .messageReactorListSheet__rowText
+    rowText: {
+      flex: 1,
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      minWidth: 0
+    },
+    // .messageReactorListSheet__rowTitle
+    rowTitle: {
+      color: token(AmityColorToken.TextListHeaderDefaultDefault)
+    },
+    // .messageReactorListSheet__rowCaption
+    rowCaption: {
+      color: token(AmityColorToken.TextListTextDescriptionDefaultDefault)
+    },
+    // .messageReactorListSheet__emptyState
+    emptyState: {
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 16,
+      paddingTop: 48,
+      paddingHorizontal: 24,
+      paddingBottom: 24,
+      width: '100%'
+    },
+    // .messageReactorListSheet__emptyStateText
+    emptyStateText: {
+      flexDirection: 'column',
+      alignItems: 'center'
+    },
+    // .messageReactorListSheet__emptyStateTitle
+    emptyStateTitle: {
+      color: token(AmityColorToken.TextEmptyStateTitleDefault)
+    },
+    // .messageReactorListSheet__emptyStateDescription
+    emptyStateDescription: {
+      color: token(AmityColorToken.TextEmptyStateDescriptionDefault)
+    },
+    // skeleton row line (web Skeleton.Line 8.75rem × 0.625rem, radius 0.75rem)
+    skeletonRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      height: 56,
+      paddingVertical: 8,
+      paddingHorizontal: 16
+    }
+  });
+
+  // Empty-state SmilePlus glyph colour — web `--asc-color-icon-emptystate-icon-default`.
+  const emptyStateIconColor = token(AmityColorToken.IconEmptyStateIconDefault);
+  return {
+    styles,
+    emptyStateIconColor
+  };
+};
+//# sourceMappingURL=styles.js.map