@amityco/react-native-social-uikit 4.2.1-f052efd.0 → 4.3.0

package/lib/commonjs/chat/components/AmityMessageComposer/AmityMessageComposer.js

@@ -0,0 +1,268 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AmityMessageComposer = AmityMessageComposer;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _tsSdkReactNative = require("@amityco/ts-sdk-react-native");
+var _TextEditor = require("../../../core/design/components/TextEditor");
+var _icons = require("../../../core/design/icons");
+var _amityColorTokens = require("../../../core/design/tokens/amity-color-tokens");
+var _Typography = require("../../../core/design/components/Typography");
+var _localization = require("../../../core/localization");
+var _Avatar = require("../../elements/Avatar");
+var _useMention = require("../../hooks/useMention");
+var _MessageReplyBand = require("../../features/shared/components/MessageReplyBand");
+var _AmityMediaAttachmentPicker = require("../AmityMediaAttachmentPicker");
+var _styles = require("./styles");
+// AmityMessageComposer — RN match of AmityUiKitWeb
+// v4/chat/features/shared/components/MessageComposer/MessageComposer. Takes a
+// `composer` object (= ReturnType<typeof useMessageComposer>) 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. No overlay openers are passed in:
+// the reply band is inert, so nothing here navigates.
+//
+// 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
+
+// 2. Third-party imports
+
+// 3. Internal imports
+
+// 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
+
+// 5. Named function component
+function AmityMessageComposer({
+  composer
+}) {
+  var _Client$getCurrentUse;
+  const {
+    subChannelId,
+    enableMention,
+    text,
+    setText,
+    canSend,
+    isEditing,
+    editingMessageId,
+    setEditorMentions,
+    cancelEdit,
+    replyTo,
+    cancelReply,
+    showMediaSection,
+    toggleMediaSection,
+    collapseMediaSection,
+    handleSendText,
+    handleSelectMedia
+  } = composer;
+  const {
+    styles,
+    placeholderColor
+  } = (0, _styles.useStyles)();
+  const editorRef = (0, _react.useRef)(null);
+  const placeholder = (0, _localization.useString)('amity_chat_composer_placeholder');
+  const editingLabel = (0, _localization.useString)('amity_chat_editing_message');
+  const mentionLimitTitle = (0, _localization.useString)('amity_chat_reach_mention_limit_title');
+  const mentionLimitMessage = (0, _localization.useString)('amity_chat_reach_mention_limit_message');
+  const everyoneLabel = (0, _localization.useString)('amity_chat_mention_everyone');
+  const currentUserId = (_Client$getCurrentUse = _tsSdkReactNative.Client.getCurrentUser()) === null || _Client$getCurrentUse === void 0 ? void 0 : _Client$getCurrentUse.userId;
+  const {
+    query,
+    setQuery,
+    suggestions,
+    reset,
+    toMention
+  } = (0, _useMention.useMention)({
+    channelId: subChannelId,
+    includeChannelMention: enableMention
+  });
+  const showMentions = enableMention && query !== null && suggestions.length > 0;
+  function onToggle() {
+    if (!showMediaSection) {
+      var _editorRef$current;
+      (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 || _editorRef$current.blur();
+    } else {
+      var _editorRef$current2;
+      (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 || _editorRef$current2.focus();
+    }
+    toggleMediaSection();
+  }
+  async function onSend() {
+    if (!canSend) return;
+    if (!isEditing) {
+      var _editorRef$current3;
+      (_editorRef$current3 = editorRef.current) === null || _editorRef$current3 === void 0 || _editorRef$current3.clear();
+    }
+    reset();
+    await handleSendText();
+  }
+  function onTextChanged(value) {
+    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) {
+      var _editorRef$current4;
+      const segments = ((_editorRef$current4 = editorRef.current) === null || _editorRef$current4 === void 0 ? void 0 : _editorRef$current4.getMentioned()) ?? [];
+      setEditorMentions(segments.map(s => ({
+        userId: s.userId,
+        length: s.length,
+        index: s.index,
+        type: s.type,
+        displayName: s.display
+      })));
+    }
+  }
+  function handlePickMention(suggestion) {
+    var _editorRef$current5, _editorRef$current6;
+    // 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$current5 = editorRef.current) === null || _editorRef$current5 === void 0 ? void 0 : _editorRef$current5.getMentioned().length) ?? 0;
+    if (currentMentionCount >= MAX_MENTIONS) {
+      _reactNative.Alert.alert(mentionLimitTitle, mentionLimitMessage);
+      reset();
+      return;
+    }
+    (_editorRef$current6 = editorRef.current) === null || _editorRef$current6 === void 0 || _editorRef$current6.insertMention(toMention(suggestion));
+    reset();
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showMentions ? /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.mentionContainer
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.mentionOverlay
+  }, /*#__PURE__*/React.createElement(_reactNative.ScrollView, {
+    style: styles.mentionList,
+    keyboardShouldPersistTaps: "handled"
+  }, suggestions.map(suggestion => /*#__PURE__*/React.createElement(_reactNative.Pressable, {
+    key: suggestion.userId,
+    style: ({
+      pressed
+    }) => [styles.mentionItem, pressed && styles.mentionItemPressed],
+    onPress: () => handlePickMention(suggestion),
+    accessibilityRole: "button"
+  }, suggestion.type === 'channel' ?
+  /*#__PURE__*/
+  // web UserMentionItem "all" row: @-glyph featured-icon circle +
+  // display name + "notify everyone" description.
+  React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.mentionAllIconCircle
+  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
+    style: styles.mentionAllGlyph
+  }, "@")), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.mentionAllRightPane
+  }, /*#__PURE__*/React.createElement(_Typography.Typography, {
+    variant: "captionBold",
+    style: styles.mentionDisplayName,
+    numberOfLines: 1
+  }, suggestion.display), /*#__PURE__*/React.createElement(_Typography.Typography, {
+    variant: "caption",
+    style: styles.mentionAllDescription,
+    numberOfLines: 1
+  }, everyoneLabel))) :
+  /*#__PURE__*/
+  // web UserMentionItem user row: 2rem avatar + display name.
+  React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.mentionAvatar
+  }, /*#__PURE__*/React.createElement(_Avatar.Avatar.User, {
+    avatarUrl: suggestion.avatarUrl,
+    displayName: suggestion.display,
+    size: "sm"
+  })), /*#__PURE__*/React.createElement(_Typography.Typography, {
+    variant: "captionBold",
+    style: styles.mentionDisplayName,
+    numberOfLines: 1
+  }, suggestion.display)))))), /*#__PURE__*/React.createElement(_reactNative.Pressable, {
+    style: styles.mentionCloseButton,
+    onPress: () => setQuery(null),
+    accessibilityRole: "button",
+    accessibilityLabel: "Close mentions"
+  }, /*#__PURE__*/React.createElement(_icons.AmityIcon, {
+    name: "cross-r",
+    size: 16,
+    tokenColor: _amityColorTokens.AmityColorToken.IconIconButtonFilledSecondaryDefault
+  }))) : null, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.container
+  }, isEditing ?
+  /*#__PURE__*/
+  // A two-child row: the CaptionBold title (flex 1) and the close
+  // button, on a surface-list-default-hover band. The design has no
+  // leading glyph and no divider here, so the earlier `pen-r` icon and
+  // its info wrapper are gone and the band carries the hover surface
+  // rather than the composer's own.
+  React.createElement(_reactNative.View, {
+    style: styles.editPanel
+  }, /*#__PURE__*/React.createElement(_Typography.Typography, {
+    variant: "captionBold",
+    style: styles.editPanelLabel
+  }, editingLabel), /*#__PURE__*/React.createElement(_reactNative.Pressable, {
+    style: styles.editPanelClose,
+    onPress: cancelEdit,
+    accessibilityRole: "button",
+    accessibilityLabel: "Cancel edit"
+  }, /*#__PURE__*/React.createElement(_icons.AmityIcon, {
+    name: "cross-r",
+    size: 20,
+    tokenColor: _amityColorTokens.AmityColorToken.IconIconButtonGhostSecondaryDefault
+  }))) : null, !isEditing && replyTo ? /*#__PURE__*/React.createElement(_MessageReplyBand.MessageReplyBand, {
+    replyTo: replyTo,
+    currentUserId: currentUserId,
+    onCancel: cancelReply
+  }) : null, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.inputRow
+  }, isEditing ? null : /*#__PURE__*/React.createElement(_reactNative.Pressable, {
+    style: styles.iconButton,
+    onPress: onToggle,
+    accessibilityRole: "button",
+    accessibilityLabel: "Attach media",
+    accessibilityState: {
+      expanded: showMediaSection
+    }
+  }, /*#__PURE__*/React.createElement(_icons.AmityIcon, {
+    name: showMediaSection ? 'cross-r' : 'plus-r',
+    size: 24,
+    tokenColor: _amityColorTokens.AmityColorToken.IconIconButtonFilledSecondaryDefault
+  })), /*#__PURE__*/React.createElement(_TextEditor.TextEditor, {
+    key: editingMessageId ?? 'create',
+    ref: editorRef,
+    value: text,
+    onChangeText: onTextChanged,
+    onSend: onSend,
+    placeholder: placeholder,
+    placeholderTextColor: placeholderColor
+    // Four lines, then the input scrolls. Without this it fell through to
+    // the TextEditor default (a 120px wrapper = five lines).
+    ,
+    maxLines: 4,
+    autoFocus: isEditing,
+    onMentionQueryChange: enableMention ? setQuery : undefined
+  }), showMediaSection ? null : /*#__PURE__*/React.createElement(_reactNative.Pressable, {
+    style: [styles.sendButton, canSend && styles.sendButtonEnabled],
+    onPress: onSend,
+    disabled: !canSend,
+    accessibilityRole: "button",
+    accessibilityLabel: "Send message"
+  }, /*#__PURE__*/React.createElement(_icons.AmityIcon, {
+    name: "arrow-up-r",
+    size: 24,
+    tokenColor: canSend ? _amityColorTokens.AmityColorToken.IconIconButtonFilledPrimaryDefault : _amityColorTokens.AmityColorToken.IconIconButtonFilledSecondaryDisabled
+  }))), !isEditing && showMediaSection ? /*#__PURE__*/React.createElement(_AmityMediaAttachmentPicker.AmityMediaAttachmentPicker, {
+    onPickAsset: handleSelectMedia
+  }) : null));
+}
+//# sourceMappingURL=AmityMessageComposer.js.map

package/lib/commonjs/chat/components/AmityMessageComposer/AmityMessageComposer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_tsSdkReactNative","_TextEditor","_icons","_amityColorTokens","_Typography","_localization","_Avatar","_useMention","_MessageReplyBand","_AmityMediaAttachmentPicker","_styles","MAX_MENTIONS","AmityMessageComposer","composer","_Client$getCurrentUse","subChannelId","enableMention","text","setText","canSend","isEditing","editingMessageId","setEditorMentions","cancelEdit","replyTo","cancelReply","showMediaSection","toggleMediaSection","collapseMediaSection","handleSendText","handleSelectMedia","styles","placeholderColor","useStyles","editorRef","useRef","placeholder","useString","editingLabel","mentionLimitTitle","mentionLimitMessage","everyoneLabel","currentUserId","Client","getCurrentUser","userId","query","setQuery","suggestions","reset","toMention","useMention","channelId","includeChannelMention","showMentions","length","onToggle","_editorRef$current","current","blur","_editorRef$current2","focus","onSend","_editorRef$current3","clear","onTextChanged","value","_editorRef$current4","segments","getMentioned","map","s","index","type","displayName","display","handlePickMention","suggestion","_editorRef$current5","_editorRef$current6","currentMentionCount","Alert","alert","insertMention","React","createElement","Fragment","View","style","mentionContainer","mentionOverlay","ScrollView","mentionList","keyboardShouldPersistTaps","Pressable","key","pressed","mentionItem","mentionItemPressed","onPress","accessibilityRole","mentionAllIconCircle","Text","mentionAllGlyph","mentionAllRightPane","Typography","variant","mentionDisplayName","numberOfLines","mentionAllDescription","mentionAvatar","Avatar","User","avatarUrl","size","mentionCloseButton","accessibilityLabel","AmityIcon","name","tokenColor","AmityColorToken","IconIconButtonFilledSecondaryDefault","container","editPanel","editPanelLabel","editPanelClose","IconIconButtonGhostSecondaryDefault","MessageReplyBand","onCancel","inputRow","iconButton","accessibilityState","expanded","TextEditor","ref","onChangeText","placeholderTextColor","maxLines","autoFocus","onMentionQueryChange","undefined","sendButton","sendButtonEnabled","disabled","IconIconButtonFilledPrimaryDefault","IconIconButtonFilledSecondaryDisabled","AmityMediaAttachmentPicker","onPickAsset"],"sourceRoot":"../../../../../src","sources":["chat/components/AmityMessageComposer/AmityMessageComposer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/chat/components/AmityMessageComposer/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AmityMessageComposer", {
+  enumerable: true,
+  get: function () {
+    return _AmityMessageComposer.AmityMessageComposer;
+  }
+});
+var _AmityMessageComposer = require("./AmityMessageComposer");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/chat/components/AmityMessageComposer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_AmityMessageComposer","require"],"sourceRoot":"../../../../../src","sources":["chat/components/AmityMessageComposer/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,qBAAA,GAAAC,OAAA","ignoreList":[]}

package/lib/commonjs/chat/components/AmityMessageComposer/styles.js

@@ -0,0 +1,189 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyles = void 0;
+var _reactNative = require("react-native");
+var _useToken = require("../../../core/design/theme/useToken");
+var _amityColorTokens = require("../../../core/design/tokens/amity-color-tokens");
+// Styles for AmityMessageComposer — ported from AmityUiKitWeb
+// MessageComposer.module.css. Geometry: inputRow gap 0.75rem→12, padding
+// 0.5rem 1rem→8/16, min-height 3.5rem→56; icon buttons 2rem→32 round. The boxed
+// input surface now lives in the shared TextEditor. Edit panel + mention overlay
+// are RN additions. All colours resolve through design tokens (no hardcoded hex).
+
+const useStyles = () => {
+  const token = (0, _useToken.useToken)();
+  const styles = _reactNative.StyleSheet.create({
+    container: {
+      width: '100%',
+      backgroundColor: token(_amityColorTokens.AmityColorToken.SurfacePageBackgroundDefault),
+      borderTopWidth: 1,
+      borderTopColor: token(_amityColorTokens.AmityColorToken.LineDividerPostDefault)
+    },
+    inputRow: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      gap: 12,
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+      minHeight: 56
+    },
+    iconButton: {
+      width: 32,
+      height: 32,
+      borderRadius: 9999,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: 4,
+      backgroundColor: token(_amityColorTokens.AmityColorToken.SurfaceIconButtonFilledSecondaryEnabled)
+    },
+    sendButton: {
+      width: 32,
+      height: 32,
+      borderRadius: 9999,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: 4,
+      backgroundColor: token(_amityColorTokens.AmityColorToken.SurfaceIconButtonFilledSecondaryDisabled)
+    },
+    sendButtonEnabled: {
+      backgroundColor: token(_amityColorTokens.AmityColorToken.SurfaceIconButtonFilledPrimaryEnabled)
+    },
+    // --- Edit panel ----------------------------------------------------------
+    // Row, align center, space between, gap 12, padding 12/12/12/16, on
+    // surface-list-default-hover. No border: the grey band itself is what
+    // separates the panel from the input row.
+    editPanel: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 12,
+      paddingTop: 12,
+      paddingBottom: 12,
+      paddingRight: 12,
+      paddingLeft: 16,
+      backgroundColor: token(_amityColorTokens.AmityColorToken.SurfaceListDefaultHover)
+    },
+    // Flex 1 0 0 with min-width 0 so a long title truncates instead of
+    // pushing the close button out.
+    editPanelLabel: {
+      flex: 1,
+      minWidth: 0,
+      color: token(_amityColorTokens.AmityColorToken.TextListOverlineDefaultDefault)
+    },
+    editPanelClose: {
+      width: 24,
+      height: 24,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    // --- Mention suggestion overlay -----------------------------------------
+    // Ported from web MentionMenu (data-display-mode='bottom') + UserMentionItem.
+    // Container: surface-popover-background, radius 0.75rem→12, max-height 7rem→112,
+    // elevation shadow (web box-shadow via elevation-08 tokens; RN has no elevation
+    // tokens, approximated with an rgb() shadow). Web uses a shadow, NOT a border.
+    // The box the close button anchors to. Figma gives it horizontal padding
+    // only (0 8), so the button can overhang the panel's top edge.
+    mentionContainer: {
+      position: 'relative',
+      paddingHorizontal: 8,
+      marginBottom: 8
+    },
+    mentionOverlay: {
+      paddingVertical: 8,
+      borderRadius: 12,
+      // No `overflow: 'hidden'` here. On iOS that sets clipsToBounds, which
+      // clips the view's own shadow away. The 8px vertical padding already keeps
+      // the rows clear of the rounded corners, so there is nothing to clip.
+      backgroundColor: token(_amityColorTokens.AmityColorToken.SurfacePopoverBackgroundDefault),
+      shadowColor: 'rgb(40, 41, 61)',
+      shadowOffset: {
+        width: 0,
+        height: 4
+      },
+      shadowOpacity: 0.16,
+      shadowRadius: 12,
+      elevation: 8
+    },
+    // Figma: the popover is 112 tall including its 8/8 padding, so the scrolling
+    // slot inside it is 96.
+    mentionList: {
+      maxHeight: 96
+    },
+    // web UserMentionItem__item: grid [2rem avatar | auto], gap 0.75rem→12,
+    // padding 0.75rem→12, bg surface-popover-lists-default.
+    mentionItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      padding: 12,
+      backgroundColor: token(_amityColorTokens.AmityColorToken.SurfacePopoverListsDefault)
+    },
+    mentionItemPressed: {
+      backgroundColor: token(_amityColorTokens.AmityColorToken.SurfacePopoverListsHover)
+    },
+    mentionAvatar: {
+      width: 32,
+      height: 32
+    },
+    mentionDisplayName: {
+      flexShrink: 1,
+      color: token(_amityColorTokens.AmityColorToken.TextListHeaderDefaultDefault)
+    },
+    // web UserMentionItem__allIconCircle: 2rem circle, surface-featuredicon-solid.
+    mentionAllIconCircle: {
+      width: 32,
+      height: 32,
+      borderRadius: 9999,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: token(_amityColorTokens.AmityColorToken.SurfaceFeaturedIconSolid)
+    },
+    mentionAllGlyph: {
+      fontSize: 15,
+      fontWeight: '500',
+      lineHeight: 22,
+      color: token(_amityColorTokens.AmityColorToken.IconFeaturedIconSolid)
+    },
+    // web __allRightPane: flex row, space-between; description → trailing-text token.
+    mentionAllRightPane: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 8,
+      minWidth: 0
+    },
+    mentionAllDescription: {
+      flexShrink: 0,
+      color: token(_amityColorTokens.AmityColorToken.TextListTrailingTextGeneral)
+    },
+    // web mentionContainer__closeButton (bottom mode): top 0 / right 0.25rem→4,
+    // 1.5rem→24 circle, padding 0.25rem→4, surface-iconbutton-filled-secondary.
+    // Figma: 24 round chip at dx 339 / dy -8 against a 359-wide panel — 8 above
+    // the panel's top edge and 4 past its right edge, so it reads as sitting on
+    // the rim rather than inside the list.
+    mentionCloseButton: {
+      position: 'absolute',
+      top: -8,
+      right: 4,
+      width: 24,
+      height: 24,
+      borderRadius: 9999,
+      padding: 4,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: token(_amityColorTokens.AmityColorToken.SurfaceIconButtonFilledSecondaryEnabled)
+    }
+  });
+  const placeholderColor = token(_amityColorTokens.AmityColorToken.TextInputTextInputPlaceholderEnabled);
+  return {
+    styles,
+    token,
+    placeholderColor
+  };
+};
+exports.useStyles = useStyles;
+//# sourceMappingURL=styles.js.map

package/lib/commonjs/chat/components/AmityMessageComposer/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_useToken","_amityColorTokens","useStyles","token","useToken","styles","StyleSheet","create","container","width","backgroundColor","AmityColorToken","SurfacePageBackgroundDefault","borderTopWidth","borderTopColor","LineDividerPostDefault","inputRow","flexDirection","alignItems","gap","paddingVertical","paddingHorizontal","minHeight","iconButton","height","borderRadius","justifyContent","marginBottom","SurfaceIconButtonFilledSecondaryEnabled","sendButton","SurfaceIconButtonFilledSecondaryDisabled","sendButtonEnabled","SurfaceIconButtonFilledPrimaryEnabled","editPanel","paddingTop","paddingBottom","paddingRight","paddingLeft","SurfaceListDefaultHover","editPanelLabel","flex","minWidth","color","TextListOverlineDefaultDefault","editPanelClose","mentionContainer","position","mentionOverlay","SurfacePopoverBackgroundDefault","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","mentionList","maxHeight","mentionItem","padding","SurfacePopoverListsDefault","mentionItemPressed","SurfacePopoverListsHover","mentionAvatar","mentionDisplayName","flexShrink","TextListHeaderDefaultDefault","mentionAllIconCircle","SurfaceFeaturedIconSolid","mentionAllGlyph","fontSize","fontWeight","lineHeight","IconFeaturedIconSolid","mentionAllRightPane","mentionAllDescription","TextListTrailingTextGeneral","mentionCloseButton","top","right","placeholderColor","TextInputTextInputPlaceholderEnabled","exports"],"sourceRoot":"../../../../../src","sources":["chat/components/AmityMessageComposer/styles.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/chat/components/AmitySearchChannelResults/AmitySearchChannelResults.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AmitySearchChannelResults = AmitySearchChannelResults;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _tsSdkReactNative = require("@amityco/ts-sdk-react-native");
+var _native = require("@react-navigation/native");
+var _localization = require("../../../core/localization");
+var _constants = require("../../constants");
+var _collections = require("../../hooks/collections");
+var _queries = require("../../hooks/queries");
+var _isBlockedConversation = require("../../utils/isBlockedConversation");
+var _AmityChatListItem = require("../AmityChatListItem");
+var _EmptyState = require("../../features/shared/components/EmptyState");
+var _SwipeToLeft = require("./SwipeToLeft");
+var _styles = require("./styles");
+// AmitySearchChannelResults — ported from AmityUiKitWeb
+// v4/chat/features/search/components/SearchChannelList.
+// The "Chats" tab of chat search: a live, paginated list of channels matching the
+// query, each swipeable to archive/unarchive.
+//
+// RN adaptations from web:
+//   - Web `useIntersectionObserver` sentinel → FlatList `onEndReached`.
+//   - Web `ChannelItem` (with internal ChatNavigation + `searchQuery` highlight)
+//     → the shared `AmityChatListItem`. AmityChatListItem exposes no `searchQuery`
+//     prop, so the matched-text highlight is not rendered (documented deviation);
+//     row navigation is wired here via React Navigation, mirroring AmityChatHomePage.
+//   - Web `Archive`/`Unarchive` SVG icons → the registry `archive-r`/`unarchive-r`
+//     glyphs (same regular variant ArchivedBadge uses).
+//   - AHEAD OF WEB: 1:1 conversations with users the viewer has blocked are
+//     hidden. The channel search endpoint does not apply block state (the home
+//     list's endpoint does), so the rows are filtered here against the viewer's
+//     blocked-user set (useBlockedUserIds).
+
+// 1. React / RN imports
+
+// 2. Third-party imports
+
+// 3. Internal imports (relative)
+
+// 4. Types
+
+// 5. Named function component
+function AmitySearchChannelResults({
+  query
+}) {
+  var _Client$getCurrentUse;
+  const {
+    styles
+  } = (0, _styles.useStyles)();
+  const navigation = (0, _native.useNavigation)();
+  const {
+    archiveChannel,
+    unarchiveChannel
+  } = (0, _queries.useChannelArchiveQuery)();
+  const archiveLabel = (0, _localization.useString)('amity_chat_archive');
+  const unarchiveLabel = (0, _localization.useString)('amity_chat_unarchive');
+  const trimmed = query.trim();
+  const shouldCall = trimmed.length >= _constants.SEARCH_MIN_QUERY_LENGTH;
+  const {
+    channels: archivedChannels
+  } = (0, _collections.useArchivedChannelsCollection)({
+    limit: 100
+  });
+  const archivedIds = (0, _react.useMemo)(() => new Set(archivedChannels.map(c => c.channelId)), [archivedChannels]);
+  const {
+    channels,
+    loading,
+    hasNextPage,
+    loadMore
+  } = (0, _collections.useSearchChannelsCollection)({
+    query: trimmed,
+    limit: _constants.LIST_PAGE_LIMIT,
+    isMemberOnly: true,
+    types: ['conversation', 'community'],
+    sortBy: 'lastActivity',
+    orderBy: 'desc'
+  }, {
+    shouldCall
+  });
+
+  // Hide 1:1 conversations with users the viewer has blocked (see header).
+  const currentUserId = (_Client$getCurrentUse = _tsSdkReactNative.Client.getCurrentUser()) === null || _Client$getCurrentUse === void 0 ? void 0 : _Client$getCurrentUse.userId;
+  const {
+    blockedUserIds
+  } = (0, _collections.useBlockedUserIds)();
+  const visibleChannels = (0, _react.useMemo)(() => channels.filter(channel => !(0, _isBlockedConversation.isBlockedConversation)(channel, currentUserId, blockedUserIds)), [channels, currentUserId, blockedUserIds]);
+  const isLoadingFirstPage = loading && channels.length === 0;
+
+  // A page made up entirely of hidden rows leaves the FlatList empty, so
+  // onEndReached never fires to pull the next page — request it here instead.
+  (0, _react.useEffect)(() => {
+    if (visibleChannels.length === 0 && channels.length > 0 && hasNextPage && !loading) {
+      loadMore();
+    }
+  }, [visibleChannels.length, channels.length, hasNextPage, loading, loadMore]);
+  function handlePress(channel) {
+    if (channel.type === 'community') {
+      navigation.navigate('AmityGroupChatPage', {
+        channelId: channel.channelId
+      });
+    } else {
+      navigation.navigate('AmityChatPage', {
+        channelId: channel.channelId,
+        userDisplayName: channel.displayName
+      });
+    }
+  }
+  if (!shouldCall) {
+    return /*#__PURE__*/React.createElement(_EmptyState.EmptyState, {
+      variant: "prompt"
+    });
+  }
+
+  // Only "no results" once nothing is visible AND nothing more can be fetched;
+  // while hidden rows still have pages behind them the list shows its skeleton.
+  if (visibleChannels.length === 0 && !isLoadingFirstPage && !hasNextPage) {
+    return /*#__PURE__*/React.createElement(_EmptyState.EmptyState, {
+      variant: "no-results"
+    });
+  }
+  return /*#__PURE__*/React.createElement(_reactNative.FlatList, {
+    style: styles.list,
+    contentContainerStyle: styles.listContent,
+    data: visibleChannels,
+    keyExtractor: channel => channel.channelId,
+    renderItem: ({
+      item
+    }) => {
+      const isArchived = archivedIds.has(item.channelId);
+      return /*#__PURE__*/React.createElement(_SwipeToLeft.SwipeToLeft, {
+        actionLabel: isArchived ? unarchiveLabel : archiveLabel,
+        actionIcon: isArchived ? 'unarchive-r' : 'archive-r',
+        onAction: () => isArchived ? unarchiveChannel({
+          channelId: item.channelId
+        }) : archiveChannel({
+          channelId: item.channelId
+        })
+      }, /*#__PURE__*/React.createElement(_AmityChatListItem.AmityChatListItem, {
+        channel: item,
+        isArchived: isArchived,
+        searchQuery: trimmed,
+        onPress: () => handlePress(item)
+      }));
+    },
+    onEndReachedThreshold: 0.7,
+    onEndReached: () => {
+      if (hasNextPage && !isLoadingFirstPage) loadMore();
+    },
+    ListFooterComponent: isLoadingFirstPage ? /*#__PURE__*/React.createElement(_reactNative.View, null, Array.from({
+      length: _constants.LIST_SKELETON_ROW_COUNT
+    }).map((_, i) => /*#__PURE__*/React.createElement(_AmityChatListItem.AmityChatListItem.Skeleton, {
+      key: i
+    }))) : hasNextPage ? /*#__PURE__*/React.createElement(_AmityChatListItem.AmityChatListItem.Skeleton, null) : null
+  });
+}
+//# sourceMappingURL=AmitySearchChannelResults.js.map