@droppii-org/chat-mobile 0.2.81 → 0.2.83

package/src/screens/chat-detail/ChatComposer.tsx

@@ -66,6 +66,13 @@ import { UIUtils } from '../../utils/UIUtils';
 import { PeerType } from '@droppii/openim-rn-client-sdk';
 import { useCanSendMessage } from '../../hooks/useGroupPermission';
 import { useIsJoinedGroup } from '../../hooks/useIsJoinedGroup';
+import { useMentionComposer } from './hooks/useMentionComposer';
+import { MentionSuggestionList } from './components/MentionSuggestionList';
+import { createOpenIMMentionSearchSource } from '../../services/mentionSearch';
+import {
+  serializeMentionsForSend,
+  MAX_AT_USER_COUNT,
+} from '../../utils/mentionSerializer';
 
 interface ChatComposerInternalProps {
   isEmptyMessage?: boolean;
@@ -125,6 +132,28 @@ export const ChatComposer = memo(
       inputRef,
     } = useChatComposerState(compose.text);
 
+    const mentionSearchSource = useMemo(
+      () =>
+        conversation?.groupID
+          ? createOpenIMMentionSearchSource(conversation.groupID)
+          : null,
+      [conversation?.groupID]
+    );
+
+    const mentionComposer = useMentionComposer({
+      text: compose.text,
+      setText: compose.setText,
+      // Non-null asserted only where actually invoked — the composer isn't
+      // rendered for non-group conversations in the first place (isGroupConversation
+      // below), so groupID is always present by the time a search fires.
+      searchSource: mentionSearchSource ?? {
+        search: async () => ({ items: [], hasMore: false }),
+      },
+      groupID: conversation?.groupID,
+      enabled: isGroupConversation,
+      inputRef,
+    });
+
     const attachmentPanelHeight = useMemo(
       () => getAttachmentPanelHeight(DEFAULT_PANNEL_ACTIONS.length),
       []
@@ -145,6 +174,19 @@ export const ChatComposer = memo(
       onAttachmentOpenChange: setIsAttachmentOpen,
     });
 
+    // Mutual exclusion (finding #5 in the mention plan): the mention picker
+    // never renders through the attachment/sticker panel slot, but opening
+    // one must still close the other — starting a mention query while the
+    // attachment/sticker panel is open closes that panel.
+    useEffect(() => {
+      if (mentionComposer.isPanelOpen && isAttachmentOpen) {
+        const immediate = activePanelType === 'sticker';
+        closeAttachment(!immediate, immediate);
+        setActivePanelType(null);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mentionComposer.isPanelOpen]);
+
     const handleSend = useCallback(async () => {
       if (!isSendMessageAllowed) {
         UIUtils.toast.open({
@@ -155,12 +197,59 @@ export const ChatComposer = memo(
       }
 
       if (compose.isUploading || !compose.canSend) return;
+      const mentionsToSend = mentionComposer.mentions;
+
+      // OpenIM's Go core hard-rejects an AtTextMessage tagging more than
+      // MAX_AT_USER_COUNT users, so serializeMentionsForSend caps
+      // atUserIDList to the first MAX_AT_USER_COUNT (mentionSerializer.ts's
+      // doc comment) — the message still sends, with every mention still
+      // highlighted in the text, just only the first MAX_AT_USER_COUNT
+      // actually get natively tagged/notified. This is a heads-up, not a
+      // block, so no `return` here.
+      if (mentionsToSend.length > 0) {
+        const { truncated } = serializeMentionsForSend(mentionsToSend);
+        if (truncated) {
+          UIUtils.toast.open({
+            title: trans('group:tag_limit_exceeded', {
+              max: String(MAX_AT_USER_COUNT),
+            }),
+            theme: 'info',
+          });
+        }
+      }
+
+      // Clear mention state synchronously, in the same tick as
+      // compose.send() (which clears `text`) — otherwise there's a real
+      // transient render where `value` is already '' but `mentions` still
+      // holds the just-sent entries, and the composer can visibly fail to
+      // clear (ChatMessageInput stays in children-controlled mode with a
+      // "ghost" mention anchored past the end of an empty string). See
+      // useMentionComposer.clear()'s doc comment.
+      mentionComposer.clear();
       try {
-        await compose.send();
+        await compose.send(mentionsToSend);
       } catch (error) {
         if (__DEV__) console.error('[ChatComposer] Failed to send:', error);
+      } finally {
+        // Belt-and-suspenders: force the native view to actually clear,
+        // regardless of whether the value/children mode-switch (triggered
+        // by mentions going from non-empty to empty) synced correctly on
+        // its own — the underlying nested-Text-in-TextInput technique is
+        // known to have platform quirks around this kind of transition.
+        inputRef.current?.clear();
       }
-    }, [compose, isSendMessageAllowed, sendDeniedReason]);
+      // Depend on mentionComposer.mentions/.clear specifically (both
+      // stable-per-value / [] deps), not the whole mentionComposer object —
+      // same reasoning as handleToggleAttachment above.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+      compose,
+      isSendMessageAllowed,
+      sendDeniedReason,
+      mentionComposer.mentions,
+      mentionComposer.clear,
+      inputRef,
+    ]);
 
     const handleInputFocus = useCallback(() => {
       setIsInputFocused(true);
@@ -181,6 +270,7 @@ export const ChatComposer = memo(
     ]);
 
     const handleToggleAttachment = useCallback(() => {
+      mentionComposer.closeMentionPanel();
       if (activePanelType === 'sticker') {
         // switch from sticker to attachment
         setActivePanelType('attachment');
@@ -189,6 +279,16 @@ export const ChatComposer = memo(
       }
       setActivePanelType(isAttachmentOpen ? null : 'attachment');
       toggleAttachmentVisibility();
+      // Deliberately depend on `mentionComposer.closeMentionPanel` (stable —
+      // [] deps in useMentionComposer), NOT the whole `mentionComposer`
+      // object, which is a fresh literal every render (useMentionComposer
+      // doesn't memoize its return value). Depending on the whole object
+      // recreated this callback — and therefore every prop built from it,
+      // e.g. ChatMessageInput's onEmojiPress — on every single render,
+      // which contributed to a real "Maximum update depth exceeded" loop
+      // found in testing. The lint rule can't prove member-access stability
+      // on its own, hence the disable.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
       activePanelType,
       isAttachmentOpen,
@@ -196,9 +296,11 @@ export const ChatComposer = memo(
       openWithHeight,
       toggleAttachmentVisibility,
       setActivePanelType,
+      mentionComposer.closeMentionPanel,
     ]);
 
     const handleToggleSticker = useCallback(() => {
+      mentionComposer.closeMentionPanel();
       if (activePanelType === 'sticker') {
         closeAttachment();
         setActivePanelType(null);
@@ -209,9 +311,12 @@ export const ChatComposer = memo(
       }
       setActivePanelType('sticker');
       openWithHeight(STICKER_PICKER_HEIGHT);
+      // Same reasoning as handleToggleAttachment above — see that comment.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
       activePanelType,
       isKeyboardVisible,
+      mentionComposer.closeMentionPanel,
       closeAttachment,
       openWithHeight,
       setActivePanelType,
@@ -221,12 +326,10 @@ export const ChatComposer = memo(
       setIsInputFocused(false);
     }, [setIsInputFocused]);
 
-    const handleChangeText = useCallback(
-      (text?: string) => {
-        compose.setText(text ?? '');
-      },
-      [compose]
-    );
+    // Routes through mentionComposer instead of compose.setText directly —
+    // it owns the atomic-delete/reconcile pipeline and calls compose.setText
+    // itself once the corrected text is known (see useMentionComposer).
+    const handleChangeText = mentionComposer.handleChangeText;
 
     const handleInputContentSizeChange = useCallback(
       (event: { nativeEvent: { contentSize: { height: number } } }) => {
@@ -514,69 +617,88 @@ export const ChatComposer = memo(
             onRemove={onRemove}
           />
 
-          <KContainer.View
-            row
-            alignItems
-            paddingH="0.75rem"
-            paddingT="0.75rem"
-            paddingB="0.75rem"
-            style={inputRowStyle}
-          >
-            <KContainer.Touchable
-              onPress={handleToggleAttachment}
-              center
-              br="round"
+          <KContainer.View style={styles.inputRowWrapper}>
+            <KContainer.VisibleView visible={mentionComposer.isPanelOpen}>
+              <KContainer.View style={styles.mentionPanel}>
+                <MentionSuggestionList
+                  suggestions={mentionComposer.suggestions}
+                  isSearching={mentionComposer.isSearching}
+                  isLoadingMore={mentionComposer.isLoadingMore}
+                  hasMore={mentionComposer.hasMore}
+                  onLoadMore={mentionComposer.loadMore}
+                  onSelect={mentionComposer.selectSuggestion}
+                />
+              </KContainer.View>
+            </KContainer.VisibleView>
+
+            <KContainer.View
+              row
+              alignItems
+              paddingH="0.75rem"
+              paddingT="0.75rem"
+              paddingB="0.75rem"
+              style={inputRowStyle}
             >
-              <KImage.VectorIcons
-                name={
-                  activePanelType === 'attachment'
-                    ? 'close-circle-o'
-                    : 'plus-circle-o'
-                }
-                size={24}
-                color={
-                  activePanelType === 'attachment'
-                    ? KColors.palette.primary.w400
-                    : KColors.palette.gray.w600
+              <KContainer.Touchable
+                onPress={handleToggleAttachment}
+                center
+                br="round"
+              >
+                <KImage.VectorIcons
+                  name={
+                    activePanelType === 'attachment'
+                      ? 'close-circle-o'
+                      : 'plus-circle-o'
+                  }
+                  size={24}
+                  color={
+                    activePanelType === 'attachment'
+                      ? KColors.palette.primary.w400
+                      : KColors.palette.gray.w600
+                  }
+                />
+              </KContainer.Touchable>
+
+              <ChatMessageInput
+                value={compose.text}
+                placeholder="Nhập tin nhắn..."
+                onChangeText={handleChangeText}
+                onFocus={handleInputFocus}
+                onBlur={handleInputBlur}
+                onContentSizeChange={handleInputContentSizeChange}
+                onSelectionChange={mentionComposer.handleSelectionChange}
+                mentions={mentionComposer.mentions}
+                isInputFocused={isInputFocused}
+                isMultilineInput={isMultilineInput}
+                inputRef={inputRef}
+                onEmojiPress={handleToggleSticker}
+                onSuggestPress={
+                  hasBotMenuOptions ? handleOpenBotMenu : undefined
                 }
               />
-            </KContainer.Touchable>
-
-            <ChatMessageInput
-              value={compose.text}
-              placeholder="Nhập tin nhắn..."
-              onChangeText={handleChangeText}
-              onFocus={handleInputFocus}
-              onBlur={handleInputBlur}
-              onContentSizeChange={handleInputContentSizeChange}
-              isInputFocused={isInputFocused}
-              isMultilineInput={isMultilineInput}
-              inputRef={inputRef}
-              onEmojiPress={handleToggleSticker}
-              onSuggestPress={hasBotMenuOptions ? handleOpenBotMenu : undefined}
-            />
 
-            <KContainer.Touchable
-              onPress={compose.isUploading ? undefined : handleSend}
-              pointerEvents={compose.isUploading ? 'none' : 'auto'}
-              width={40}
-              height={40}
-              center
-              br="round"
-              background={
-                compose.isUploading
-                  ? KColors.palette.gray.w400
-                  : KColors.palette.primary.w400
-              }
-              marginL="0.75rem"
-              opacity={compose.isUploading ? 0.6 : 1}
-            >
-              <KImage.VectorIcons
-                name="send-b"
-                size={20}
-                color={KColors.white}
-              />
-            </KContainer.Touchable>
+              <KContainer.Touchable
+                onPress={compose.isUploading ? undefined : handleSend}
+                pointerEvents={compose.isUploading ? 'none' : 'auto'}
+                width={40}
+                height={40}
+                center
+                br="round"
+                background={
+                  compose.isUploading
+                    ? KColors.palette.gray.w400
+                    : KColors.palette.primary.w400
+                }
+                marginL="0.75rem"
+                opacity={compose.isUploading ? 0.6 : 1}
+              >
+                <KImage.VectorIcons
+                  name="send-b"
+                  size={20}
+                  color={KColors.white}
+                />
+              </KContainer.Touchable>
+            </KContainer.View>
           </KContainer.View>
         </KContainer.View>
       );
@@ -618,4 +740,16 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     backgroundColor: KColors.palette.gray.w25,
   },
+  inputRowWrapper: {
+    position: 'relative',
+  },
+  // Floats above the input row without going through the accessorySlot
+  // (attachment/sticker) render path — that slot intentionally takes over
+  // the keyboard area, which the mention picker must not do (finding #5).
+  mentionPanel: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: '100%',
+  },
 });

package/src/screens/chat-detail/ChatListLegend.tsx

@@ -59,7 +59,6 @@ import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import { useUserStore } from '../../store';
 import { ChatMessageAPI } from '../../services';
 import { resolveImageDisplayDims } from '../../components/messages/imageMessage';
-import { STICKER_SIZE } from '../../components/messages/stickerMessage';
 import ChatImageDimens, {
   CHAT_IMAGE_VIEW_SOURCE,
 } from '../../utils/chatImageDimens';
@@ -151,6 +150,11 @@ export const ChatListLegend = memo(
     const highlightTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
       null
     );
+    // Single revealed message at a time: tapping a message shows its own
+    // time below it, tapping it again (or a different message) hides/moves it.
+    const [revealedMessageId, setRevealedMessageId] = useState<string | null>(
+      null
+    );
 
     const { applicationType } = useChatContext();
     const searchMessages = useMessageStore((s) => s.searchMessages);
@@ -177,6 +181,10 @@ export const ChatListLegend = memo(
       resetFlow();
     }, [resetFlow]);
 
+    const handleMessagePress = useCallback((messageId: string) => {
+      setRevealedMessageId((prev) => (prev === messageId ? null : messageId));
+    }, []);
+
     const renderItem = useCallback(
       ({ item, index }: any) => {
         try {
@@ -240,6 +248,7 @@ export const ChatListLegend = memo(
                   onMediaPress={onMediaPress}
                   onPressUrl={onPressUrl}
                   onRetry={retryMessage}
+                  onPress={() => handleMessagePress(messageId)}
                   onLongPress={
                     onLongPress
                       ? () => handleMessageLongPress(messageId, message)
@@ -247,6 +256,7 @@ export const ChatListLegend = memo(
                   }
                   customMessageItemFactory={customMessageItemFactory}
                   isHighlighted={highlightedId === messageId}
+                  isTimeRevealed={revealedMessageId === messageId}
                   showName={showName}
                   showAvatar={showAvatar}
                   showSenderGutter={showSenderGutter}
@@ -291,6 +301,8 @@ export const ChatListLegend = memo(
         conversationFlow?.havingBotMessage,
         retryMessage,
         highlightedId,
+        revealedMessageId,
+        handleMessagePress,
       ]
     );
 
@@ -374,9 +386,10 @@ export const ChatListLegend = memo(
                 CHAT_IMAGE_VIEW_SOURCE.MessageListThumbnail
               ).height + rowMargin;
             break;
-          case MessageType.StickerMessage:
-            candidateSize = STICKER_SIZE + rowMargin;
-            break;
+          // StickerMessage is intentionally NOT fixed-size here: it now renders
+          // an optional revealed-time label below it (tap-to-reveal-time), so
+          // its true height can change after the first render — falls through
+          // to dynamic measurement like text/link/quote/file do.
           default:
             return undefined;
         }
@@ -428,12 +441,14 @@ export const ChatListLegend = memo(
         flowStepId: conversationFlow?.flowCurrentStep?.id ?? '',
         lastMessageId,
         highlightedId,
+        revealedMessageId,
       }),
       [
         messageDataMap,
         conversationFlow?.flowCurrentStep?.id,
         lastMessageId,
         highlightedId,
+        revealedMessageId,
       ]
     );
 

package/src/screens/chat-detail/components/ChatMessageInput.tsx

@@ -5,8 +5,11 @@ import {
   TextInput,
   type NativeSyntheticEvent,
   type TextInputContentSizeChangeEventData,
+  type TextInputSelectionChangeEventData,
 } from 'react-native';
 import { KContainer, KImage, KColors, KSpacingValue } from '@droppii/libs';
+import { MentionHighlightAdapter } from './MentionHighlightAdapter';
+import type { Mention } from '../../../types/mention';
 
 const INPUT_FONT_SIZE = 16;
 const INPUT_LINE_HEIGHT = 22.4;
@@ -22,6 +25,15 @@ export interface ChatMessageInputProps {
   onContentSizeChange: (
     event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>
   ) => void;
+  onSelectionChange?: (
+    event: NativeSyntheticEvent<TextInputSelectionChangeEventData>
+  ) => void;
+  /** Committed mentions — when non-empty, the input switches from plain
+   * `value` to a nested-Text `children` tree (MentionHighlightAdapter) so
+   * mentions render highlighted. Omitted/empty keeps the original plain
+   * `value`-controlled path, so the overwhelming majority of messages (no
+   * mentions) never pay for this. */
+  mentions?: Mention[];
   isInputFocused: boolean;
   isMultilineInput: boolean;
   onEmojiPress?: () => void;
@@ -37,12 +49,24 @@ export const ChatMessageInput = memo(
     onFocus,
     onBlur,
     onContentSizeChange,
+    onSelectionChange,
+    mentions,
     isInputFocused,
     isMultilineInput,
     onEmojiPress,
     onSuggestPress,
     inputRef,
   }: ChatMessageInputProps) => {
+    // Re-enabled: the earlier flicker/"Maximum update depth exceeded" loop
+    // was root-caused to two bugs in the composer wiring (unstable callback
+    // deps on `mentionComposer` recreating ChatMessageInput's onEmojiPress
+    // every render, and redundant/stale mention re-detection from
+    // onSelectionChange) — not the nested-Text children-mode rendering
+    // itself, which was disabled here as a precaution while that was still
+    // unclear. Both root causes are fixed in useMentionComposer.ts /
+    // ChatComposer.tsx. If a highlight-specific issue turns up on device,
+    // set this back to `false` — it's a one-line, fully reversible gate.
+    const hasMentions = !!mentions && mentions.length > 0;
     const renderEmojiNode = useCallback(
       () => (
         <KContainer.Touchable marginR="0.5rem" onPress={onEmojiPress}>
@@ -85,20 +109,29 @@ export const ChatMessageInput = memo(
             ref={inputRef}
             placeholder={placeholder}
             placeholderTextColor={KColors.palette.gray.w200}
-            value={value}
+            {...(hasMentions ? {} : { value })}
             onChangeText={onChangeText}
             onFocus={onFocus}
             onBlur={onBlur}
             onContentSizeChange={onContentSizeChange}
+            onSelectionChange={onSelectionChange}
             multiline
             blurOnSubmit={false}
+            autoCorrect={false}
             scrollEnabled
             allowFontScaling={false}
             underlineColorAndroid={KColors.transparent}
             selectionColor={KColors.selector}
             textAlignVertical={isMultilineInput ? 'top' : 'center'}
             style={[styles.textInput]}
-          />
+          >
+            {hasMentions && (
+              <MentionHighlightAdapter
+                text={value ?? ''}
+                mentions={mentions!}
+              />
+            )}
+          </TextInput>
 
           {renderEmojiNode()}
         </KContainer.View>

package/src/screens/chat-detail/components/MentionHighlightAdapter.tsx

@@ -0,0 +1,57 @@
+import { memo, useMemo } from 'react';
+import { Text } from 'react-native';
+import { KColors } from '@droppii/libs';
+import { tokenize } from '../../../utils/mentions';
+import type { Mention } from '../../../types/mention';
+
+interface MentionHighlightAdapterProps {
+  text: string;
+  mentions: Mention[];
+}
+
+/**
+ * Renders `text` as nested styled `<Text>` children for a TextInput's
+ * "undocumented" rich-text-via-children capability — the same primitive
+ * `react-native-controlled-mentions` and Bluesky's social-app both use.
+ *
+ * Deliberately STATELESS: every render calls tokenize() fresh and rebuilds
+ * the whole children tree from scratch — no attempt to preserve/diff span
+ * identity across renders. This is the Bluesky-informed choice (see the
+ * mention plan's Phase A3): react-native-controlled-mentions instead tries
+ * to maintain *stateful* span identity across renders, and its known
+ * Android bugs (#34668 duplicate input, #41647 broken selection, #50731
+ * "spans recreated on every render") read like that statefulness fighting
+ * itself — Bluesky ships live-colored nested-Text in production by never
+ * attempting to preserve identity in the first place. Only tokenize()
+ * itself is memoized (on [text, mentions]); the resulting element tree is
+ * not further diffed or cached.
+ *
+ * Only mounted when mentions.length > 0 (see ChatMessageInput) — a plain
+ * `value`-controlled TextInput is used otherwise, so the vast majority of
+ * messages (no mentions) never pay for this at all.
+ */
+export const MentionHighlightAdapter = memo(
+  ({ text, mentions }: MentionHighlightAdapterProps) => {
+    const segments = useMemo(() => tokenize(text, mentions), [text, mentions]);
+
+    return (
+      <>
+        {segments.map((segment, index) =>
+          segment.type === 'mention' ? (
+            <Text key={segment.mention.id} style={mentionTextStyle}>
+              {`@${segment.mention.displayName}`}
+            </Text>
+          ) : (
+            // Plain-text runs have no stable identity of their own — index
+            // is fine for a tree rebuilt from scratch every render.
+            <Text key={`text-${index}`}>{segment.text}</Text>
+          )
+        )}
+      </>
+    );
+  }
+);
+
+MentionHighlightAdapter.displayName = 'MentionHighlightAdapter';
+
+const mentionTextStyle = { color: KColors.palette.primary.w400 };

package/src/screens/chat-detail/components/MentionSuggestionItem.tsx

@@ -0,0 +1,53 @@
+import { memo, useCallback } from 'react';
+import { KContainer, KLabel, KColors, KImage } from '@droppii/libs';
+import Avatar from '../../../components/Avatar/Avatar';
+import { trans } from '../../../translation';
+import type { MentionSuggestion } from '../../../types/mention';
+
+const ALL_MEMBERS_USER_ID = 'ALL';
+
+interface MentionSuggestionItemProps {
+  item: MentionSuggestion;
+  onPress: (item: MentionSuggestion) => void;
+}
+
+export const MentionSuggestionItem = memo(
+  ({ item, onPress }: MentionSuggestionItemProps) => {
+    const isAllOption = item.userId === ALL_MEMBERS_USER_ID;
+
+    const handlePress = useCallback(() => onPress(item), [onPress, item]);
+
+    return (
+      <KContainer.Touchable row alignItems onPress={handlePress}>
+        {isAllOption ? (
+          <KContainer.View width={40} height={40} center>
+            <KImage.VectorIcons
+              name="user-three-b"
+              size={24}
+              color={KColors.palette.gray.w900}
+            />
+          </KContainer.View>
+        ) : (
+          <Avatar source={item.avatar} fullName={item.displayName} size="nm" />
+        )}
+
+        <KContainer.View flex marginL="0.75rem">
+          <KLabel.Text typo="TextMdMedium" numberOfLines={1}>
+            {item.displayName}
+          </KLabel.Text>
+          {isAllOption && (
+            <KLabel.Text
+              typo="TextXsNormal"
+              color={KColors.palette.gray.w600}
+              numberOfLines={1}
+            >
+              {trans('group:tag_all_desc')}
+            </KLabel.Text>
+          )}
+        </KContainer.View>
+      </KContainer.Touchable>
+    );
+  }
+);
+
+MentionSuggestionItem.displayName = 'MentionSuggestionItem';