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

package/src/social/features/chat/features/shared/components/MessageReplyBand/styles.ts

@@ -0,0 +1,77 @@
+// Styles for MessageReplyBand — ported from MessageReplyBand.module.css.
+// Geometry: gap 0.75rem→12; height 3.875rem→62; padding 0.625/0.75/0.625/1rem→
+// 10 top-bottom, left 16, right 12; text gap 0.125rem→2; thumb 2rem→32,
+// radius 0.25rem→4; close 1.25rem→20; close icon 1rem→16.
+// PDT-3996 (web 3bdd1f75a) revised the video affordance: the thumb shrank from
+// 2.375rem→2rem, and the full-cover rgb(0 0 0/40%) scrim became a centred 1.5rem
+// chip on the transparent-iconbutton surface with a 1rem glyph. The chip surface
+// was already the RN choice (no scrim token exists); the sizes now match too.
+
+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({
+    band: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      width: '100%',
+      height: 62,
+      paddingVertical: 10,
+      paddingLeft: 16,
+      paddingRight: 12,
+      backgroundColor: token(AmityColorToken.SurfaceListDefaultHover),
+    },
+    textCol: {
+      flex: 1,
+      gap: 2,
+    },
+    title: {
+      color: token(AmityColorToken.TextListOverlineDefaultDefault),
+    },
+    body: {
+      color: token(AmityColorToken.TextListTextDescriptionDefaultDefault),
+    },
+    thumbWrap: {
+      width: 32,
+      height: 32,
+      borderRadius: 4,
+      overflow: 'hidden',
+    },
+    thumbImg: {
+      width: 32,
+      height: 32,
+    },
+    playChip: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    playChipInner: {
+      width: 24,
+      height: 24,
+      borderRadius: 12,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: token(
+        AmityColorToken.SurfaceIconButtonTransparentPrimaryEnabled
+      ),
+    },
+    close: {
+      width: 20,
+      height: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/shared/components/MessageReplyQuote/MessageReplyQuote.tsx

@@ -0,0 +1,370 @@
+// MessageReplyQuote — ported from AmityUiKitWeb features/shared/components/
+// MessageReplyQuote. The quoted parent message rendered above a reply bubble:
+// a "replied to" header plus a tappable snapshot of the parent (text / image /
+// video / custom / deleted). Web fetched the parent via useMessageObject; RN has
+// no such hook, so the resolved `parent` (and optional `isLoading`) are passed in
+// by the wiring layer. Media dimensions are clamped via getReplyThumbnailSize.
+
+// 1. React / RN imports
+import { useState, type ReactNode } from 'react';
+import {
+  Image,
+  Pressable,
+  Text,
+  View,
+  type ImageLoadEventData,
+  type StyleProp,
+  type TextStyle,
+} from 'react-native';
+
+// 2. Internal imports
+import { Typography } from '../../../../../../../core/design/components/Typography';
+import { Loader } from '../../../../../../../core/design/atoms/Loader';
+import { AmityIcon } from '../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+import useFile from '../../../../../../../core/hooks/useFile';
+import { ImageSizeState } from '../../../../../../../core/enums';
+import { useString } from '../../../../../../../core/localization';
+import { getReplyHeader, getReplyThumbnailSize } from './utils';
+import { useStyles } from './styles';
+
+// 3. Types
+type MessageReplyQuoteProps = {
+  parent?: Amity.Message | null;
+  child: Amity.Message;
+  isUser: boolean;
+  isGroupChat: boolean;
+  currentUserId?: string | null;
+  isLoading?: boolean;
+  onOpenSeeMore: (text: string, title?: string) => void;
+  onOpenImage: (url: string, message: Amity.Message) => void;
+  onOpenVideo: (message: Amity.Message) => void;
+};
+
+type MessageData = {
+  text?: string;
+  fileId?: string;
+  thumbnailFileId?: string;
+};
+
+// Ported from web's <Linkify> in TextQuote: URLs are recoloured (inbound-link
+// token) + underlined but NOT separately tappable — the whole quote is the tap
+// target (onOpenSeeMore). Splits the text into plain strings + styled link spans.
+const URL_SPLIT_RE = /(https?:\/\/[^\s]+|www\.[^\s]+)/gi;
+
+function renderQuoteTextWithLinks(
+  text: string,
+  linkStyle: StyleProp<TextStyle>
+): ReactNode[] {
+  const out: ReactNode[] = [];
+  text.split(URL_SPLIT_RE).forEach((part, i) => {
+    if (!part) return;
+    if (/^(?:https?:\/\/|www\.)/i.test(part)) {
+      out.push(
+        <Text key={`l-${i}`} style={linkStyle}>
+          {part}
+        </Text>
+      );
+    } else {
+      out.push(part);
+    }
+  });
+  return out;
+}
+
+// 4. Named function component
+export function MessageReplyQuote({
+  parent,
+  child,
+  isUser,
+  isGroupChat,
+  currentUserId,
+  isLoading,
+  onOpenSeeMore,
+  onOpenImage,
+  onOpenVideo,
+}: MessageReplyQuoteProps) {
+  const { styles, headerIconColor } = useStyles(isUser);
+
+  if (isLoading || !parent) {
+    return (
+      <View style={styles.container}>
+        <View style={styles.placeholder} accessibilityState={{ busy: true }}>
+          <Loader.Spinner size="sm" />
+        </View>
+      </View>
+    );
+  }
+
+  const headerText = getReplyHeader({
+    child,
+    parent,
+    currentUserId,
+    isGroupChat,
+  });
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        {/* QA directive: the "replied to" quote icon in the bubble is SOLID
+            (deviates from web develop's Regular <ShareLeft/> — the action-menu
+            reply option stays Regular). */}
+        <AmityIcon name="share-left-s" size={16} tokenColor={headerIconColor} />
+        <Typography
+          variant="caption"
+          style={styles.headerText}
+          numberOfLines={1}
+        >
+          {headerText}
+        </Typography>
+      </View>
+      <ParentBody
+        parent={parent}
+        isUser={isUser}
+        onOpenSeeMore={onOpenSeeMore}
+        onOpenImage={onOpenImage}
+        onOpenVideo={onOpenVideo}
+      />
+    </View>
+  );
+}
+
+type ParentBodyProps = {
+  parent: Amity.Message;
+  isUser: boolean;
+  onOpenSeeMore: (text: string, title?: string) => void;
+  onOpenImage: (url: string, message: Amity.Message) => void;
+  onOpenVideo: (message: Amity.Message) => void;
+};
+
+function ParentBody({
+  parent,
+  isUser,
+  onOpenSeeMore,
+  onOpenImage,
+  onOpenVideo,
+}: ParentBodyProps) {
+  if (parent.isDeleted) {
+    return <DeletedQuote isUser={isUser} />;
+  }
+  switch (parent.dataType) {
+    case 'text':
+      return (
+        <TextQuote
+          parent={parent}
+          isUser={isUser}
+          onOpenSeeMore={onOpenSeeMore}
+        />
+      );
+    case 'custom':
+      return <CustomQuote parent={parent} isUser={isUser} />;
+    case 'image':
+      return (
+        <ImageQuote parent={parent} isUser={isUser} onOpenImage={onOpenImage} />
+      );
+    case 'video':
+      return (
+        <VideoQuote parent={parent} isUser={isUser} onOpenVideo={onOpenVideo} />
+      );
+    default:
+      return null;
+  }
+}
+
+function DeletedQuote({ isUser }: { isUser: boolean }) {
+  const { styles } = useStyles(isUser);
+  const deletedLabel = useString('amity_chat_message_deleted');
+  return (
+    <View style={styles.quote}>
+      <View style={styles.deletedBubble}>
+        <AmityIcon
+          name="trash-r"
+          size={16}
+          tokenColor={AmityColorToken.IconChatBubbleInboundMessagesDeleted}
+        />
+        <Typography variant="caption" style={styles.deletedText}>
+          {deletedLabel}
+        </Typography>
+      </View>
+      <View style={styles.overlay} pointerEvents="none" />
+    </View>
+  );
+}
+
+function TextQuote({
+  parent,
+  isUser,
+  onOpenSeeMore,
+}: {
+  parent: Amity.Message;
+  isUser: boolean;
+  onOpenSeeMore: (text: string, title?: string) => void;
+}) {
+  const { styles } = useStyles(isUser);
+  const text = (
+    (parent.data as MessageData | undefined)?.text ?? ''
+  ).toString();
+  const repliedMessageTitle = useString('amity_chat_message_replied_message');
+  return (
+    <Pressable
+      style={styles.quote}
+      accessibilityRole="button"
+      accessibilityLabel={repliedMessageTitle}
+      onPress={() => onOpenSeeMore(text, repliedMessageTitle)}
+    >
+      <View style={styles.textBubble}>
+        <Typography variant="body" style={styles.text} numberOfLines={2}>
+          {renderQuoteTextWithLinks(text, styles.link)}
+        </Typography>
+      </View>
+      <View style={styles.overlay} pointerEvents="none" />
+    </Pressable>
+  );
+}
+
+function CustomQuote({
+  parent,
+  isUser,
+}: {
+  parent: Amity.Message;
+  isUser: boolean;
+}) {
+  const { styles } = useStyles(isUser);
+  const text = JSON.stringify(parent.data ?? {});
+  return (
+    <View style={styles.quote}>
+      <View style={styles.textBubble}>
+        <Typography variant="body" style={styles.text} numberOfLines={2}>
+          {text}
+        </Typography>
+      </View>
+      <View style={styles.overlay} pointerEvents="none" />
+    </View>
+  );
+}
+
+function ImageQuote({
+  parent,
+  isUser,
+  onOpenImage,
+}: {
+  parent: Amity.Message;
+  isUser: boolean;
+  onOpenImage: (url: string, message: Amity.Message) => void;
+}) {
+  const { styles } = useStyles(isUser);
+  const fileId = (parent.data as MessageData | undefined)?.fileId ?? '';
+  const mediumUrl = useFile({ fileId, imageSize: ImageSizeState.medium });
+  const largeUrl = useFile({ fileId, imageSize: ImageSizeState.large });
+  const [size, setSize] = useState({ width: 120, height: 120 });
+  const [hasError, setHasError] = useState(false);
+
+  const boxStyle = { width: size.width, height: size.height };
+
+  if (!mediumUrl) {
+    return (
+      <View
+        style={[styles.mediaBox, styles.mediaBoxLoading, boxStyle]}
+        accessibilityState={{ busy: true }}
+      >
+        <Loader.Spinner size="sm" />
+      </View>
+    );
+  }
+
+  if (hasError) {
+    return (
+      <View style={[styles.mediaBox, styles.mediaBoxBroken, boxStyle]}>
+        <AmityIcon
+          name="image-slash-r"
+          size={24}
+          tokenColor={AmityColorToken.IconMediaImageBroken}
+        />
+      </View>
+    );
+  }
+
+  function handleLoad(event: { nativeEvent: ImageLoadEventData }) {
+    const { width, height } = event.nativeEvent.source;
+    const next = getReplyThumbnailSize(width, height);
+    setSize({ width: next.widthRem * 16, height: next.heightRem * 16 });
+  }
+
+  return (
+    <Pressable
+      style={styles.quote}
+      accessibilityRole="button"
+      onPress={() => onOpenImage(largeUrl || mediumUrl, parent)}
+    >
+      <Image
+        source={{ uri: mediumUrl }}
+        style={[styles.media, boxStyle]}
+        resizeMode="cover"
+        onError={() => setHasError(true)}
+        onLoad={handleLoad}
+      />
+      <View style={styles.overlay} pointerEvents="none" />
+    </Pressable>
+  );
+}
+
+function VideoQuote({
+  parent,
+  isUser,
+  onOpenVideo,
+}: {
+  parent: Amity.Message;
+  isUser: boolean;
+  onOpenVideo: (message: Amity.Message) => void;
+}) {
+  const { styles } = useStyles(isUser);
+  const thumbFileId =
+    (parent.data as MessageData | undefined)?.thumbnailFileId ?? '';
+  const thumbUrl = useFile({
+    fileId: thumbFileId,
+    imageSize: ImageSizeState.medium,
+  });
+  const [size, setSize] = useState({ width: 120, height: 120 });
+
+  const boxStyle = { width: size.width, height: size.height };
+
+  if (!thumbUrl) {
+    return (
+      <View
+        style={[styles.mediaBox, styles.mediaBoxLoading, boxStyle]}
+        accessibilityState={{ busy: true }}
+      >
+        <Loader.Spinner size="sm" />
+      </View>
+    );
+  }
+
+  function handleLoad(event: { nativeEvent: ImageLoadEventData }) {
+    const { width, height } = event.nativeEvent.source;
+    const next = getReplyThumbnailSize(width, height);
+    setSize({ width: next.widthRem * 16, height: next.heightRem * 16 });
+  }
+
+  return (
+    <Pressable
+      style={styles.quote}
+      accessibilityRole="button"
+      onPress={() => onOpenVideo(parent)}
+    >
+      <Image
+        source={{ uri: thumbUrl }}
+        style={[styles.media, boxStyle]}
+        resizeMode="cover"
+        onLoad={handleLoad}
+      />
+      <View style={styles.overlay} pointerEvents="none" />
+      <View style={styles.playChip} pointerEvents="none">
+        <AmityIcon
+          name="video-play-s"
+          size={24}
+          tokenColor={AmityColorToken.IconIconButtonTransparentPrimaryDefault}
+        />
+      </View>
+    </Pressable>
+  );
+}

package/src/social/features/chat/features/shared/components/MessageReplyQuote/index.ts

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

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

@@ -0,0 +1,132 @@
+// 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, max-width 14.25rem→228, 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 228x60. Header/overlay colours differ
+// per side (own = Outbound tokens, other = Inbound).
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+
+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
+      ),
+    },
+    textBubble: {
+      paddingVertical: 10,
+      paddingHorizontal: 16,
+      maxWidth: 228,
+      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),
+    },
+    playChip: {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      marginTop: -20,
+      marginLeft: -20,
+      width: 40,
+      height: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 9999,
+      backgroundColor: token(
+        AmityColorToken.SurfaceIconButtonTransparentPrimaryEnabled
+      ),
+    },
+    placeholder: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 228,
+      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/social/features/chat/features/shared/components/MessageReplyQuote/utils.ts

@@ -0,0 +1,97 @@
+// 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;
+  parent: Amity.Message;
+  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;
+  const isParentCurrentUser =
+    !!currentUserId && parent.creatorId === currentUserId;
+  const isParentDeleted = parent.isDeleted === true;
+
+  if (isParentDeleted) {
+    return isCurrentUser
+      ? resolveString('amity_chat_reply_you_to_deleted')
+      : resolveString('amity_chat_reply_to_deleted');
+  }
+
+  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 };
+}