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

package/src/social/features/chat/components/AmityMessageBubble/styles.ts

@@ -0,0 +1,252 @@
+// Styles for AmityMessageBubble — ported from AmityUiKitWeb MessageBubble.module.css
+// (.textBubble / .textBubble__text). Geometry: border-radius 1.25rem→20, text
+// padding 0.625rem 1rem 0 + margin-bottom 0.625rem → paddingTop 10 / horizontal 16 /
+// bottom 10, font-size 0.875rem→14, line-height 1.3→18. Colours resolve through the
+// design tokens (surface/text chatbubble, inbound vs outbound). No hardcoded hex.
+
+import { Dimensions, StyleSheet } from 'react-native';
+import { useToken } from '../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
+
+// Web caps the text bubble at 60vw. In RN a percentage maxWidth resolves against the
+// bubble's parent, and inside the action-menu Popover wrapper that parent has an
+// indefinite width — Yoga then collapses the Text to its minimum intrinsic width
+// (word/char-per-line). Use a concrete pixel cap off the screen width instead.
+const BUBBLE_MAX_WIDTH = Math.round(Dimensions.get('window').width * 0.72);
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    bubble: {
+      maxWidth: BUBBLE_MAX_WIDTH,
+      borderRadius: 20,
+      overflow: 'hidden',
+    },
+    bubbleOwn: {
+      backgroundColor: token(
+        AmityColorToken.SurfaceChatBubbleMessageOutboundDefault
+      ),
+    },
+    bubbleOwnPressed: {
+      backgroundColor: token(
+        AmityColorToken.SurfaceChatBubbleMessageOutboundPressed
+      ),
+    },
+    bubbleOther: {
+      backgroundColor: token(
+        AmityColorToken.SurfaceChatBubbleMessageInboundDefault
+      ),
+    },
+    bubbleOtherPressed: {
+      backgroundColor: token(
+        AmityColorToken.SurfaceChatBubbleMessageInboundPressed
+      ),
+    },
+    text: {
+      paddingTop: 10,
+      paddingHorizontal: 16,
+      paddingBottom: 10,
+      fontSize: 14,
+      lineHeight: 18,
+    },
+    // Two-line skeleton shown while a long message's line count is measured.
+    // Carries the text bubble's padding, and a fixed width of 240 (bubble max)
+    // minus its 16 side padding — the measuring probe fills this container, so a
+    // width that collapsed to the bars' intrinsic size would make it count lines
+    // for the wrong width.
+    // The off-screen line-count probe. Absolutely filled so it inherits the
+    // container's width (the measurement depends on width, not height), and fully
+    // transparent — opacity does not affect layout, so onTextLayout still fires.
+    textProbe: {
+      ...StyleSheet.absoluteFillObject,
+      opacity: 0,
+    },
+    textSkeleton: {
+      paddingTop: 10,
+      paddingHorizontal: 16,
+      paddingBottom: 10,
+      width: 240 - 32,
+      gap: 8,
+    },
+    textOwn: {
+      color: token(AmityColorToken.TextChatBubbleOutboundMessagesDefault),
+    },
+    textOther: {
+      color: token(AmityColorToken.TextChatBubbleInboundMessagesDefault),
+    },
+    deletedText: {
+      fontStyle: 'italic',
+    },
+    // "See more" affordance for truncated long messages, faithful to web:
+    // a 1px divider (textBubble__divider) then a space-between row (textBubble__seeMore)
+    // of label + chevron-right icon (textBubble__seeMoreIcon 0.75rem→12).
+    divider: {
+      height: 1,
+    },
+    dividerOwn: {
+      backgroundColor: token(
+        AmityColorToken.LineChatBubbleOutboundDividerDefault
+      ),
+    },
+    dividerOther: {
+      backgroundColor: token(
+        AmityColorToken.LineChatBubbleInboundDividerDefault
+      ),
+    },
+    seeMoreRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingVertical: 10,
+      paddingHorizontal: 16,
+    },
+    seeMoreLabel: {
+      fontSize: 14,
+      lineHeight: 18,
+      fontWeight: '700',
+    },
+    seeMoreOwn: {
+      color: token(AmityColorToken.TextChatBubbleOutboundSeeMoreDefault),
+    },
+    seeMoreOther: {
+      color: token(AmityColorToken.TextChatBubbleInboundSeeMoreDefault),
+    },
+    // Mention span inside the text (web textBubble__mention, weight 500).
+    // Repeat the surrounding text's fontSize/lineHeight (14/18): the 500-weight
+    // mention <Text> otherwise renders taller than the 18px line box sized from
+    // the 14px body text and its bottom gets clipped (Android).
+    mentionOwn: {
+      fontSize: 14,
+      lineHeight: 18,
+      fontWeight: '500',
+      color: token(AmityColorToken.TextChatBubbleOutboundMentionedDefault),
+    },
+    mentionOther: {
+      fontSize: 14,
+      lineHeight: 18,
+      fontWeight: '500',
+      color: token(AmityColorToken.TextChatBubbleInboundMentionedDefault),
+    },
+    // "Edited" caption (web textBubble__editedCaption: padding 0 16 10).
+    editedCaption: {
+      paddingHorizontal: 16,
+      paddingBottom: 10,
+      fontSize: 10,
+      lineHeight: 13,
+    },
+    editedOwn: {
+      color: token(AmityColorToken.TextChatBubbleOutboundEditedLabelDefault),
+      textAlign: 'right',
+    },
+    editedOther: {
+      color: token(AmityColorToken.TextChatBubbleInboundEditedLabelDefault),
+      textAlign: 'left',
+    },
+    // Link-preview wrapper padding (web textBubble__preview: 0 10 10).
+    preview: {
+      paddingHorizontal: 10,
+      paddingBottom: 10,
+    },
+    // In-text URL spans. Web `.textBubble__text a` is underlined and inherits
+    // currentcolor (= the message text colour) for outbound; the `data-user='other'`
+    // rule overrides inbound links to the inbound-link token. RN nested <Text>
+    // inherits colour, so outbound links only need the underline (link) while
+    // inbound links add linkOther to recolour.
+    link: {
+      textDecorationLine: 'underline',
+    },
+    linkOther: {
+      color: token(AmityColorToken.TextChatBubbleInboundLinkDefault),
+    },
+    // Failed-to-send caption under a moderation-rejected media bubble (web
+    // mediaBubble__failedWrapper + mediaBubble__failedCaption: flex column,
+    // align flex-end, gap 4; caption helper-text token, 10/13).
+    failedWrapper: {
+      flexDirection: 'column',
+      alignItems: 'flex-end',
+      gap: 4,
+    },
+    failedCaption: {
+      color: token(AmityColorToken.TextChatBubbleOutboundHelperTextDefault),
+      fontSize: 10,
+      lineHeight: 13,
+    },
+
+    // --- Media (image / video) ---
+    // Web used height 15rem→240 with variable width (inline-block, capped at 20rem/320).
+    // In an RN flex row an Image has no intrinsic width to size against, so we pin a
+    // fixed 240×240 frame (media fills it, cover-cropped) — reported as a fidelity delta
+    // vs web's variable width.
+    imageBubble: {
+      position: 'relative',
+      width: 240,
+      height: 240,
+      borderRadius: 20,
+      overflow: 'hidden',
+      backgroundColor: token(AmityColorToken.SurfaceMediaImageLoading),
+    },
+    videoBubble: {
+      position: 'relative',
+      width: 240,
+      height: 240,
+      borderRadius: 20,
+      overflow: 'hidden',
+      backgroundColor: token(AmityColorToken.SurfaceMediaImageLoading),
+    },
+    mediaImage: {
+      width: '100%',
+      height: '100%',
+    },
+    mediaPlaceholder: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 240,
+      height: 240,
+      borderRadius: 20,
+      backgroundColor: token(AmityColorToken.SurfaceMediaImageLoading),
+    },
+    mediaBroken: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 240,
+      height: 240,
+      borderRadius: 20,
+      backgroundColor: token(AmityColorToken.SurfaceMediaImageBroken),
+    },
+    // Spinner overlay shown while a remote image downloads (BUG #5). Sits on the
+    // media-loading surface (same token web uses for the image loading state).
+    mediaLoadingOverlay: {
+      ...StyleSheet.absoluteFillObject,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: token(AmityColorToken.SurfaceMediaImageLoading),
+    },
+    mediaPressedScrim: {
+      ...StyleSheet.absoluteFillObject,
+      // Web used --asc-color-message-overlay (no RN token); substituted with the
+      // closest media-context dark scrim (reported as a gap).
+      backgroundColor: token(
+        AmityColorToken.SurfaceBadgeSemanticBadgePostStatusTotalMedia
+      ),
+    },
+    videoPlayChip: {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      marginTop: -20,
+      marginLeft: -20,
+      width: 40,
+      height: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 4,
+      borderRadius: 9999,
+      backgroundColor: token(
+        AmityColorToken.SurfaceIconButtonTransparentPrimaryEnabled
+      ),
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/components/AmityMessageComposer/AmityMessageComposer.tsx

@@ -0,0 +1,325 @@
+// AmityMessageComposer — RN match of AmityUiKitWeb
+// v4/chat/features/shared/components/MessageComposer/MessageComposer. Takes a
+// `composer` object (= ReturnType<typeof useMessageComposer>) plus the overlay
+// openers, and renders the media section + edit panel + reply band + TextEditor.
+// All orchestration (text/canSend/send/edit/reply/media/mentions) lives in the
+// composer object; this component is pure view + input wiring.
+//
+// RN specifics vs web:
+//  - Web mounts a Lexical contentEditable TextEditor with initialText /
+//    onMentionsChanged and a portal for mention suggestions. RN's TextEditor is
+//    a controlled multiline TextInput; mention segments live inside it and are
+//    synced back into composer.editorMentions on each change (mapping
+//    MentionSegment → web Mentioned), so composer.handleSendText stays faithful.
+//    Web's MediaSection (hidden <input>/FileTrigger) → the RN
+//    AmityMediaAttachmentPicker (react-native-image-picker Asset).
+
+// 1. React / RN imports
+import { useRef } from 'react';
+import { Alert, Pressable, ScrollView, Text, View } from 'react-native';
+
+// 2. Third-party imports
+import { Client } from '@amityco/ts-sdk-react-native';
+
+// 3. Internal imports
+import {
+  TextEditor,
+  type TextEditorHandle,
+} from '../../../../../core/design/components/TextEditor';
+import { AmityIcon } from '../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
+import { Typography } from '../../../../../core/design/components/Typography';
+import { useString } from '../../../../../core/localization';
+import { Avatar } from '../../elements/Avatar';
+import { useMention } from '../../hooks/useMention';
+import { MessageReplyBand } from '../../features/shared/components/MessageReplyBand';
+import { AmityMediaAttachmentPicker } from '../AmityMediaAttachmentPicker';
+import type { useMessageComposer } from '../../features/shared/hooks/useMessageComposer';
+import { useStyles } from './styles';
+
+// Web caps user mentions per message at 30 (MessageComposer MAX_MENTIONS); the
+// 31st pick is blocked with an alert instead of being inserted.
+const MAX_MENTIONS = 30;
+
+// 4. Types
+type MessageComposer = ReturnType<typeof useMessageComposer>;
+
+type AmityMessageComposerProps = {
+  composer: MessageComposer;
+  onOpenSeeMore: (text: string, title?: string) => void;
+  onOpenImage: (url: string, message: Amity.Message) => void;
+  onOpenVideo: (message: Amity.Message) => void;
+};
+
+// 5. Named function component
+export function AmityMessageComposer({
+  composer,
+  onOpenSeeMore,
+  onOpenImage,
+  onOpenVideo,
+}: AmityMessageComposerProps) {
+  const {
+    subChannelId,
+    enableMention,
+    text,
+    setText,
+    canSend,
+    isEditing,
+    editingMessageId,
+    setEditorMentions,
+    cancelEdit,
+    replyTo,
+    cancelReply,
+    showMediaSection,
+    toggleMediaSection,
+    collapseMediaSection,
+    handleSendText,
+    handleSelectMedia,
+  } = composer;
+
+  const { styles, placeholderColor } = useStyles();
+  const editorRef = useRef<TextEditorHandle>(null);
+  const placeholder = useString('amity_chat_composer_placeholder');
+  const editingLabel = useString('amity_chat_editing_message');
+  const mentionLimitTitle = useString('amity_chat_reach_mention_limit_title');
+  const mentionLimitMessage = useString(
+    'amity_chat_reach_mention_limit_message'
+  );
+  const everyoneLabel = useString('amity_chat_mention_everyone');
+
+  const currentUserId = Client.getCurrentUser()?.userId;
+
+  const { query, setQuery, suggestions, reset, toMention } = useMention({
+    channelId: subChannelId,
+    includeChannelMention: enableMention,
+  });
+
+  const showMentions =
+    enableMention && query !== null && suggestions.length > 0;
+
+  function onToggle() {
+    if (!showMediaSection) {
+      editorRef.current?.blur();
+    } else {
+      editorRef.current?.focus();
+    }
+    toggleMediaSection();
+  }
+
+  async function onSend() {
+    if (!canSend) return;
+    if (!isEditing) {
+      editorRef.current?.clear();
+    }
+    reset();
+    await handleSendText();
+  }
+
+  function onTextChanged(value: string) {
+    setText(value);
+    if (value.length > 0 && showMediaSection) {
+      collapseMediaSection();
+    }
+    // Keep composer.editorMentions in sync with the editor's tracked segments so
+    // handleSendText builds the correct mentionees/metadata (web parity).
+    if (enableMention) {
+      const segments = editorRef.current?.getMentioned() ?? [];
+      setEditorMentions(
+        segments.map((s) => ({
+          userId: s.userId,
+          length: s.length,
+          index: s.index,
+          type: s.type,
+          displayName: s.display,
+        }))
+      );
+    }
+  }
+
+  function handlePickMention(suggestion: (typeof suggestions)[number]) {
+    // Web parity: block the pick once the mention limit is reached (>= 30) and
+    // surface the limit dialog instead of inserting (MentionPlugin countMentions).
+    const currentMentionCount = editorRef.current?.getMentioned().length ?? 0;
+    if (currentMentionCount >= MAX_MENTIONS) {
+      Alert.alert(mentionLimitTitle, mentionLimitMessage);
+      reset();
+      return;
+    }
+    editorRef.current?.insertMention(toMention(suggestion));
+    reset();
+  }
+
+  return (
+    <View style={styles.container}>
+      {isEditing ? (
+        <View style={styles.editPanel}>
+          <View style={styles.editPanelInfo}>
+            <AmityIcon
+              name="pen-r"
+              size={20}
+              tokenColor={AmityColorToken.TextBaseSubdue}
+            />
+            <Typography variant="captionBold" style={styles.editPanelLabel}>
+              {editingLabel}
+            </Typography>
+          </View>
+          <Pressable
+            style={styles.editPanelClose}
+            onPress={cancelEdit}
+            accessibilityRole="button"
+            accessibilityLabel="Cancel edit"
+          >
+            <AmityIcon
+              name="cross-r"
+              size={20}
+              tokenColor={AmityColorToken.TextBaseSubdue}
+            />
+          </Pressable>
+        </View>
+      ) : null}
+
+      {!isEditing && replyTo ? (
+        <MessageReplyBand
+          replyTo={replyTo}
+          currentUserId={currentUserId}
+          onCancel={cancelReply}
+          onOpenSeeMore={onOpenSeeMore}
+          onOpenImage={onOpenImage}
+          onOpenVideo={onOpenVideo}
+        />
+      ) : null}
+
+      {showMentions ? (
+        <View style={styles.mentionOverlay}>
+          <ScrollView
+            style={styles.mentionList}
+            keyboardShouldPersistTaps="handled"
+          >
+            {suggestions.map((suggestion) => (
+              <Pressable
+                key={suggestion.userId}
+                style={({ pressed }) => [
+                  styles.mentionItem,
+                  pressed && styles.mentionItemPressed,
+                ]}
+                onPress={() => handlePickMention(suggestion)}
+                accessibilityRole="button"
+              >
+                {suggestion.type === 'channel' ? (
+                  // web UserMentionItem "all" row: @-glyph featured-icon circle +
+                  // display name + "notify everyone" description.
+                  <>
+                    <View style={styles.mentionAllIconCircle}>
+                      <Text style={styles.mentionAllGlyph}>@</Text>
+                    </View>
+                    <View style={styles.mentionAllRightPane}>
+                      <Typography
+                        variant="captionBold"
+                        style={styles.mentionDisplayName}
+                        numberOfLines={1}
+                      >
+                        {suggestion.display}
+                      </Typography>
+                      <Typography
+                        variant="caption"
+                        style={styles.mentionAllDescription}
+                        numberOfLines={1}
+                      >
+                        {everyoneLabel}
+                      </Typography>
+                    </View>
+                  </>
+                ) : (
+                  // web UserMentionItem user row: 2rem avatar + display name.
+                  <>
+                    <View style={styles.mentionAvatar}>
+                      <Avatar.User
+                        avatarUrl={suggestion.avatarUrl}
+                        displayName={suggestion.display}
+                        size="sm"
+                      />
+                    </View>
+                    <Typography
+                      variant="captionBold"
+                      style={styles.mentionDisplayName}
+                      numberOfLines={1}
+                    >
+                      {suggestion.display}
+                    </Typography>
+                  </>
+                )}
+              </Pressable>
+            ))}
+          </ScrollView>
+          {/* web MentionMenu close button (top-right); dismisses the menu. */}
+          <Pressable
+            style={styles.mentionCloseButton}
+            onPress={() => setQuery(null)}
+            accessibilityRole="button"
+            accessibilityLabel="Close mentions"
+          >
+            <AmityIcon
+              name="cross-r"
+              size={16}
+              tokenColor={AmityColorToken.IconIconButtonFilledSecondaryDefault}
+            />
+          </Pressable>
+        </View>
+      ) : null}
+
+      <View style={styles.inputRow}>
+        {isEditing ? null : (
+          <Pressable
+            style={styles.iconButton}
+            onPress={onToggle}
+            accessibilityRole="button"
+            accessibilityLabel="Attach media"
+            accessibilityState={{ expanded: showMediaSection }}
+          >
+            <AmityIcon
+              name={showMediaSection ? 'cross-r' : 'plus-r'}
+              size={24}
+              tokenColor={AmityColorToken.IconIconButtonFilledSecondaryDefault}
+            />
+          </Pressable>
+        )}
+
+        <TextEditor
+          key={editingMessageId ?? 'create'}
+          ref={editorRef}
+          value={text}
+          onChangeText={onTextChanged}
+          onSend={onSend}
+          placeholder={placeholder}
+          placeholderTextColor={placeholderColor}
+          autoFocus={isEditing}
+          onMentionQueryChange={enableMention ? setQuery : undefined}
+        />
+
+        {showMediaSection ? null : (
+          <Pressable
+            style={[styles.sendButton, canSend && styles.sendButtonEnabled]}
+            onPress={onSend}
+            disabled={!canSend}
+            accessibilityRole="button"
+            accessibilityLabel="Send message"
+          >
+            <AmityIcon
+              name="arrow-up-r"
+              size={24}
+              tokenColor={
+                canSend
+                  ? AmityColorToken.IconIconButtonFilledPrimaryDefault
+                  : AmityColorToken.IconIconButtonFilledSecondaryDisabled
+              }
+            />
+          </Pressable>
+        )}
+      </View>
+
+      {!isEditing && showMediaSection ? (
+        <AmityMediaAttachmentPicker onPickAsset={handleSelectMedia} />
+      ) : null}
+    </View>
+  );
+}

package/src/social/features/chat/components/AmityMessageComposer/index.ts

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