@amityco/react-native-social-uikit 4.2.0 → 4.2.1-3302b40d.0

package/src/chat/features/shared/components/MessageReplyQuote/styles.ts

@@ -0,0 +1,152 @@
+// Styles for MessageReplyQuote — ported from MessageReplyQuote.module.css.
+// Geometry: gap 0.25rem→4; header gap 0.25rem→4; header icon 1rem→16; header
+// max-width 18.75rem→300; quote radius 1.25rem→20; text bubble padding
+// 0.625/1rem→10/16, text 15/20 (raw CSS); media radius 20; broken icon
+// 1.5rem→24; play chip 2.5rem→40; play icon 1.5rem→24; deleted bubble padding
+// 4/8, border 1; placeholder height 60. Header/overlay colours differ per side
+// (own = Outbound tokens, other = Inbound).
+//
+// The quote's width (web's 14.25rem→228, and the placeholder's 228) is NOT a
+// fixed value — 228 is the 60%-of-viewport rule on Figma's 375px artboard. It
+// is derived from that rule here so the quote tracks the reply bubble at every
+// screen size. See src/chat/constants/bubble.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
+import { getBubbleMaxWidth } from '../../../../constants';
+
+export const useStyles = (isUser: boolean) => {
+  const token = useToken();
+
+  const headerColor = token(
+    isUser
+      ? AmityColorToken.TextChatBubbleOutboundHeaderRepliedToDefault
+      : AmityColorToken.TextChatBubbleInboundHeaderRepliedToDefault
+  );
+
+  const styles = StyleSheet.create({
+    container: {
+      gap: 4,
+      marginBottom: 4,
+      alignItems: isUser ? 'flex-end' : 'flex-start',
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
+    headerText: {
+      color: headerColor,
+      maxWidth: 300,
+    },
+    quote: {
+      position: 'relative',
+      borderRadius: 20,
+      overflow: 'hidden',
+    },
+    overlay: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: 20,
+      backgroundColor: token(
+        AmityColorToken.SurfaceChatBubbleReplyOverlayDefault
+      ),
+    },
+    // This was a flat 228, which is the 60%-of-viewport rule's value
+    // on Figma's 375px artboard — not the contract (see
+    // src/chat/constants/bubble). Held fixed, the quote fell progressively
+    // narrower than the reply bubble as the screen got wider: on an iPhone XR
+    // the reply was 298 and the quote 228, a 70px gap where web's is ~20.
+    // Deriving both from the same rule keeps them equal at every screen size,
+    // which is what the ticket asks for.
+    textBubble: {
+      paddingVertical: 10,
+      paddingHorizontal: 16,
+      maxWidth: getBubbleMaxWidth(),
+      backgroundColor: token(
+        AmityColorToken.SurfaceChatBubbleReplyMessageDefault
+      ),
+    },
+    text: {
+      fontSize: 15,
+      lineHeight: 20,
+      color: token(AmityColorToken.TextChatBubbleInboundMessagesDefault),
+    },
+    // In-quote URL spans (web .replyQuote__link): inbound-link token + underline on
+    // both sides (the web class has no data-user variant). Colour only — the whole
+    // quote is the tap target (onOpenSeeMore), so links are not separately tappable.
+    link: {
+      color: token(AmityColorToken.TextChatBubbleInboundLinkDefault),
+      textDecorationLine: 'underline',
+    },
+    media: {
+      borderRadius: 20,
+    },
+    mediaBox: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 20,
+    },
+    mediaBoxLoading: {
+      backgroundColor: token(AmityColorToken.SurfaceMediaImageLoading),
+    },
+    mediaBoxBroken: {
+      backgroundColor: token(AmityColorToken.SurfaceMediaImageBroken),
+    },
+    // The chip is centred by filling the quote and centring its child, the way
+    // MessageReplyBand's does. The previous percentage top/left plus negative
+    // margins is the one combination Yoga resolves differently per platform, and
+    // inside the quote's `overflow: 'hidden'` it left the play indicator off the
+    // thumbnail entirely.
+    playChip: {
+      ...StyleSheet.absoluteFillObject,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    playChipInner: {
+      width: 40,
+      height: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 9999,
+      backgroundColor: token(
+        AmityColorToken.SurfaceIconButtonTransparentPrimaryEnabled
+      ),
+    },
+    // Loading placeholder: same derived width as the quote itself, so the quote
+    // does not visibly jump width when the parent resolves.
+    placeholder: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: getBubbleMaxWidth(),
+      height: 60,
+      borderRadius: 20,
+      backgroundColor: token(
+        AmityColorToken.SurfaceChatBubbleReplyMessageDefault
+      ),
+    },
+    deletedBubble: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+      paddingVertical: 4,
+      paddingHorizontal: 8,
+      borderWidth: 1,
+      borderColor: token(AmityColorToken.BorderChatBubbleInboundDeleted),
+      borderRadius: 20,
+    },
+    deletedText: {
+      color: token(AmityColorToken.TextChatBubbleInboundMessagesDeleted),
+    },
+  });
+
+  const headerIconColor = isUser
+    ? AmityColorToken.IconChatBubbleOutboundHeaderRepliedToDefault
+    : AmityColorToken.IconChatBubbleInboundHeaderRepliedToDefault;
+
+  return { styles, token, headerIconColor };
+};

package/src/chat/features/shared/components/MessageReplyQuote/utils.ts

@@ -0,0 +1,105 @@
+// Helpers for MessageReplyQuote — ported from web chat/utils/getReplyHeader.ts
+// and getReplyThumbnailSize.ts. Kept local to the component (depth-7 import
+// parity). getReplyHeader builds the "X replied to Y" line via resolveString
+// (non-hook, matching web); getReplyThumbnailSize returns clamped media
+// dimensions in rem (multiply by 16 for px in RN).
+
+import { resolveString } from '../../../../../core/localization';
+
+type GetReplyHeaderParams = {
+  child: Amity.Message;
+  /**
+   * Absent when the parent could not be resolved at all — see the
+   * deleted/unavailable branch below.
+   */
+  parent?: Amity.Message | null;
+  currentUserId?: string | null;
+  isGroupChat: boolean;
+};
+
+function getDisplayName(message: Amity.Message): string {
+  const name = (message as unknown as { creator?: { displayName?: string } })
+    .creator?.displayName;
+  return name && name.length > 0
+    ? name
+    : resolveString('amity_chat_unknown_user');
+}
+
+export function getReplyHeader({
+  child,
+  parent,
+  currentUserId,
+  isGroupChat,
+}: GetReplyHeaderParams): string {
+  const isCurrentUser = !!currentUserId && child.creatorId === currentUserId;
+
+  // A deleted parent and a parent that cannot be fetched at all (the live
+  // object settled with no message) share this header: there is no
+  // separate copy for the latter, and to the reader both mean the same thing,
+  // that the message being replied to can no longer be shown.
+  if (!parent || parent.isDeleted === true) {
+    return isCurrentUser
+      ? resolveString('amity_chat_reply_you_to_deleted')
+      : resolveString('amity_chat_reply_to_deleted');
+  }
+
+  const isParentCurrentUser =
+    !!currentUserId && parent.creatorId === currentUserId;
+
+  if (!isGroupChat) {
+    if (isParentCurrentUser) {
+      return isCurrentUser
+        ? resolveString('amity_chat_reply_you_to_yourself')
+        : resolveString('amity_chat_reply_to_you');
+    }
+    return isCurrentUser
+      ? resolveString('amity_chat_reply_you')
+      : resolveString('amity_chat_reply_to_themself');
+  }
+
+  const childName = getDisplayName(child);
+  const parentName = getDisplayName(parent);
+
+  if (isParentCurrentUser) {
+    return isCurrentUser
+      ? resolveString('amity_chat_reply_you_to_yourself')
+      : resolveString('amity_chat_reply_name_to_you', childName);
+  }
+  if (isCurrentUser) {
+    return resolveString('amity_chat_reply_you_to_name', parentName);
+  }
+  if (parent.creatorId === child.creatorId) {
+    return resolveString('amity_chat_reply_name_to_themself', childName);
+  }
+  return resolveString('amity_chat_reply_name_to_name', childName, parentName);
+}
+
+const MAX_AXIS_REM = 7.5;
+const MIN_AXIS_REM = 2.5;
+const RATIO_THRESHOLD = 3;
+
+export type ReplyThumbnailSize = {
+  widthRem: number;
+  heightRem: number;
+};
+
+export function getReplyThumbnailSize(
+  intrinsicWidth: number,
+  intrinsicHeight: number
+): ReplyThumbnailSize {
+  if (intrinsicWidth <= 0 || intrinsicHeight <= 0) {
+    return { widthRem: MAX_AXIS_REM, heightRem: MAX_AXIS_REM };
+  }
+  if (intrinsicHeight >= intrinsicWidth) {
+    const heightRem = MAX_AXIS_REM;
+    const ratio = intrinsicHeight / intrinsicWidth;
+    const widthRem =
+      ratio > RATIO_THRESHOLD ? MIN_AXIS_REM : MAX_AXIS_REM / ratio;
+    return { widthRem, heightRem };
+  }
+  const widthRem = MAX_AXIS_REM;
+  const ratio = intrinsicWidth / intrinsicHeight;
+  const heightRem =
+    ratio > RATIO_THRESHOLD ? MIN_AXIS_REM : MAX_AXIS_REM / ratio;
+  return { widthRem, heightRem };
+}

package/src/chat/features/shared/components/MutedBanner/MutedBanner.tsx

@@ -0,0 +1,42 @@
+// MutedBanner — ported from AmityUiKitWeb features/shared/components/MutedBanner.
+// A full-width subdued banner explaining why the composer is unavailable
+// (user muted / channel moderator-only / blocked). All three strings are
+// resolved unconditionally (matches web) to respect rules-of-hooks.
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Internal imports
+import { Typography } from '../../../../../core/design/components/Typography';
+import { useString } from '../../../../../core/localization';
+import { useStyles } from './styles';
+
+// 3. Types
+type MutedBannerProps = {
+  variant: 'user' | 'channel' | 'blocked';
+};
+
+// 4. Named function component
+export function MutedBanner({ variant }: MutedBannerProps) {
+  const { styles } = useStyles();
+  const userMutedMessage = useString('amity_chat_user_is_muted');
+  const channelMutedMessage = useString(
+    'amity_chat_group_permission_only_moderators_banner'
+  );
+  const blockedMessage = useString('amity_chat_blocked_message');
+
+  const message =
+    variant === 'user'
+      ? userMutedMessage
+      : variant === 'channel'
+      ? channelMutedMessage
+      : blockedMessage;
+
+  return (
+    <View style={styles.banner} accessibilityRole="text">
+      <Typography variant="caption" style={styles.text}>
+        {message}
+      </Typography>
+    </View>
+  );
+}

package/src/chat/features/shared/components/MutedBanner/index.ts

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

package/src/chat/features/shared/components/MutedBanner/styles.ts

@@ -0,0 +1,32 @@
+// Styles for MutedBanner — ported from MutedBanner.module.css.
+// Geometry: padding 0.75rem/1rem→12/16. Text fills + centers. Colours via
+// tokens, matched 1:1 to the web CSS variables (surface + text description).
+
+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({
+    banner: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      backgroundColor: token(AmityColorToken.SurfaceBannerSubdueGeneral),
+    },
+    text: {
+      flex: 1,
+      textAlign: 'center',
+      // Web uses text-banner-subdue-textdescription-general; the cleverden SoT (717)
+      // doesn't ship the Subdue text variant, so use the color-identical GreyBG variant
+      // (same alias chain {Information/700}/{Information/300} → same hex). Web slug is
+      // allowlisted in check-fidelity until the SoT adds the Subdue banner token.
+      color: token(AmityColorToken.TextBannerSubdueTextDescriptionGeneral),
+    },
+  });
+
+  return { styles, token };
+};

package/src/chat/features/shared/components/NewMessageNotification/NewMessageNotification.tsx

@@ -0,0 +1,152 @@
+// NewMessageNotification — a floating pill pinned to the bottom of the message
+// list showing the latest incoming message (avatar + preview text + optional
+// media thumbnail) that scrolls to it on press.
+//
+// The image thumb goes through `useFile`, which already returns a size-scaled
+// URL, so it asks for 'small' directly; the avatar/image calls stay
+// unconditional (passing '') to respect rules-of-hooks. A missing or broken
+// thumb falls back to the media-broken icon. The video thumb is the video's own
+// first frame, painted by a paused <Video> (see below) — there is no separate
+// thumbnail file to load.
+//
+// The drop shadow the design gives the pill is omitted: it would need a raw hex,
+// which this repo does not allow outside the token set.
+
+// 1. React / RN imports
+import { useRef } from 'react';
+import { Pressable, View, Image } from 'react-native';
+
+// 2. Third-party imports
+import Video, { type VideoRef } from 'react-native-video';
+
+// 3. Internal imports
+import { Typography } from '../../../../../core/design/components/Typography';
+import { AmityIcon } from '../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
+import { resolveString } from '../../../../../core/localization';
+import useFile from '../../../../../core/hooks/useFile';
+import { ImageSizeState } from '../../../../../core/enums';
+import { Avatar } from '../../../../elements/Avatar';
+import { useVideoFileUrl } from '../../../../hooks/useVideoFileUrl';
+import { useStyles } from './styles';
+
+// 4. Types
+type NewMessageNotificationProps = {
+  message: Amity.Message;
+  onPress: () => void;
+};
+
+function getPreviewText(message: Amity.Message): string {
+  switch (message.dataType) {
+    case 'text':
+      return (message.data as { text?: string } | undefined)?.text ?? '';
+    case 'image':
+      return resolveString('amity_chat_preview_sent_photo');
+    case 'video':
+      return resolveString('amity_chat_preview_sent_video');
+    case 'custom':
+      return resolveString('amity_chat_preview_message');
+    default:
+      return resolveString('amity_chat_preview_message');
+  }
+}
+
+// 5. Named function component
+export function NewMessageNotification({
+  message,
+  onPress,
+}: NewMessageNotificationProps) {
+  const { styles } = useStyles();
+
+  const isImage = message.dataType === 'image';
+  const isVideo = message.dataType === 'video';
+  const fileId =
+    (message.data as { fileId?: string } | undefined)?.fileId ?? '';
+
+  const creator = message.creator;
+  const avatarUrl = useFile({ fileId: creator?.avatarFileId ?? '' });
+  const imageThumb = useFile({
+    fileId: isImage ? fileId : '',
+    imageSize: ImageSizeState.small,
+  });
+  // A video message carries no separate thumbnail file — `data.fileId` IS the
+  // video — so reading a `thumbnailFileId` here always came back empty and every
+  // video preview fell through to the media-broken icon. `useVideoFileUrl` is the
+  // raw-url hook that feeds react-native-video everywhere else in chat.
+  const videoUrl = useVideoFileUrl(isVideo ? fileId : undefined);
+
+  // react-native-video 6 paints no frame while `paused` until playback or a
+  // seek, so the poster is nudged off frame 0 exactly once — the same treatment
+  // the video bubble gives its poster.
+  const posterRef = useRef<VideoRef | null>(null);
+  const seededPoster = useRef(false);
+
+  return (
+    <Pressable
+      style={styles.notification}
+      onPress={onPress}
+      accessibilityRole="button"
+    >
+      <View style={styles.left}>
+        {creator ? (
+          <Avatar.User
+            avatarUrl={avatarUrl}
+            displayName={creator.displayName}
+            size="xs"
+          />
+        ) : null}
+        <Typography variant="body" style={styles.preview} numberOfLines={1}>
+          {getPreviewText(message)}
+        </Typography>
+      </View>
+      <View style={styles.right}>
+        {isImage || isVideo ? (
+          <View style={styles.thumb}>
+            {isVideo && videoUrl ? (
+              <Video
+                ref={posterRef}
+                source={{ uri: videoUrl }}
+                style={styles.thumbImg}
+                resizeMode="cover"
+                paused
+                muted
+                controls={false}
+                onLoad={() => {
+                  if (seededPoster.current) return;
+                  seededPoster.current = true;
+                  posterRef.current?.seek(0.1);
+                }}
+              />
+            ) : isImage && imageThumb ? (
+              <Image source={{ uri: imageThumb }} style={styles.thumbImg} />
+            ) : (
+              <AmityIcon
+                name="image-r"
+                size={18}
+                tokenColor={AmityColorToken.IconMediaImageBroken}
+              />
+            )}
+            {isVideo ? (
+              <View style={styles.playBadge} pointerEvents="none">
+                <AmityIcon
+                  name="video-play-s"
+                  size={16}
+                  tokenColor={
+                    AmityColorToken.IconIconButtonTransparentPrimaryDefault
+                  }
+                />
+              </View>
+            ) : null}
+          </View>
+        ) : null}
+        <View style={styles.chevron}>
+          <AmityIcon
+            name="chevron-down"
+            size={20}
+            tokenColor={AmityColorToken.IconIconButtonGhostSecondaryDefault}
+          />
+        </View>
+      </View>
+    </Pressable>
+  );
+}

package/src/chat/features/shared/components/NewMessageNotification/index.ts

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

package/src/chat/features/shared/components/NewMessageNotification/styles.ts

@@ -0,0 +1,89 @@
+// Styles for NewMessageNotification.
+// Geometry: pinned 16 left/right, 8 up from the bottom, 40 tall, padding 6/8,
+// fully rounded; gaps 16 (avatar → text) and 8 (thumb → chevron); thumb 28
+// square at radius 4 with a 20 play badge over a 16 glyph; chevron drawn at 20
+// inside a 28 slot.
+// The design's drop shadow is omitted — it would need a raw hex, which this repo
+// does not allow outside the token set. Colours all resolve through 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({
+    notification: {
+      position: 'absolute',
+      left: 16,
+      right: 16,
+      bottom: 8,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 8,
+      height: 40,
+      paddingVertical: 6,
+      paddingHorizontal: 8,
+      borderRadius: 9999,
+      // The banner surface, not the toast one: Surface/CustomToast/Default/Default
+      // is the same dark grey in BOTH themes, which is why the pill stayed dark
+      // under a light theme. The banner token flips with the theme, and this pill
+      // is a banner — it sits in the page, not over it as a transient toast.
+      backgroundColor: token(AmityColorToken.SurfaceBannerSubdueGeneral),
+    },
+    left: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 16,
+    },
+    preview: {
+      flexShrink: 1,
+      color: token(AmityColorToken.TextBannerSubdueHeaderGeneral),
+    },
+    right: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      flexShrink: 0,
+    },
+    thumb: {
+      width: 28,
+      height: 28,
+      borderRadius: 4,
+      overflow: 'hidden',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: token(AmityColorToken.SurfaceMediaImageLoaded),
+    },
+    thumbImg: {
+      width: '100%',
+      height: '100%',
+    },
+    // The design's trailing slot is 28 wide but the chevron drawn inside it is the
+    // 24-grid glyph at 20 — measured, its arms span 12.8px, which is what size 20
+    // produces and size 28 overshoots by 40%. Keeping the 28 box around it holds
+    // the glyph the design's distance from the pill's edge.
+    chevron: {
+      width: 28,
+      height: 28,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    playBadge: {
+      position: 'absolute',
+      width: 20,
+      height: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 9999,
+      backgroundColor: token(
+        AmityColorToken.SurfaceIconButtonTransparentPrimaryEnabled
+      ),
+    },
+  });
+
+  return { styles, token };
+};

package/src/chat/features/shared/components/ScrollToLatestButton/ScrollToLatestButton.tsx

@@ -0,0 +1,34 @@
+// ScrollToLatestButton — ported from AmityUiKitWeb features/shared/components/
+// ScrollToLatestButton. A circular filled-secondary icon button pinned to the
+// bottom-right of the message list that scrolls to the latest message.
+//
+// Web uses the `Button.Icon` (IconButton) atom with styleType="filled" /
+// hierarchy="secondary" / size={40}; RN uses the ported Button.Icon atom. The
+// bottom-right pin (web .scrollToLatestButton) is passed as a positioning-only
+// style. box-shadow dropped (RN, no hex allowed).
+
+// 1. Internal imports
+import { Button } from '../../../../../core/design/atoms/Button';
+import { useStyles } from './styles';
+
+// 2. Types
+type ScrollToLatestButtonProps = {
+  onPress: () => void;
+};
+
+// 3. Named function component
+export function ScrollToLatestButton({ onPress }: ScrollToLatestButtonProps) {
+  const { styles } = useStyles();
+
+  return (
+    <Button.Icon
+      icon="chevron-down"
+      styleType="filled"
+      hierarchy="secondary"
+      size={40}
+      style={styles.button}
+      onPress={onPress}
+      accessibilityLabel="Scroll to latest message"
+    />
+  );
+}

package/src/chat/features/shared/components/ScrollToLatestButton/index.ts

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

package/src/chat/features/shared/components/ScrollToLatestButton/styles.ts

@@ -0,0 +1,18 @@
+// Styles for ScrollToLatestButton — positioning only. The 40×40 filled/secondary
+// circle (container + surface + states) is owned by the Button.Icon atom; this
+// pins it bottom-right (web .scrollToLatestButton: right 1rem→16, bottom 0.5rem→8).
+// box-shadow dropped (RN, no hex allowed).
+
+import { StyleSheet } from 'react-native';
+
+export const useStyles = () => {
+  const styles = StyleSheet.create({
+    button: {
+      position: 'absolute',
+      right: 16,
+      bottom: 8,
+    },
+  });
+
+  return { styles };
+};