@droppii-org/chat-mobile 0.2.81 → 0.2.82

package/src/hooks/useChatCompose.ts

@@ -13,6 +13,7 @@ import {
   generateAndUploadVideoThumbnails,
   type VideoWithUploadStatus,
 } from '../utils/videoThumbnailUpload';
+import type { Mention } from '../types/mention';
 
 export function useChatCompose() {
   const [text, setText] = useState('');
@@ -45,123 +46,130 @@ export function useChatCompose() {
     ]
   );
 
-  const send = useCallback(async () => {
-    const { selectedImages, clearAllImages } = imageAttachment;
-    const { selectedFiles, clearAllFiles } = fileAttachment;
-    const urlMeta = linkPreview.isVisible ? linkPreview.metadata : undefined;
+  const send = useCallback(
+    async (mentions?: Mention[]) => {
+      const { selectedImages, clearAllImages } = imageAttachment;
+      const { selectedFiles, clearAllFiles } = fileAttachment;
+      const urlMeta = linkPreview.isVisible ? linkPreview.metadata : undefined;
 
-    // --- Attachments ---
-    if (selectedImages.length > 0 || selectedFiles.length > 0) {
-      const actualImages = selectedImages.filter(
-        (img: ImageWithUploadStatus) => !isVideoFromPicker(img.image)
-      );
-      const videos = selectedImages.filter((img: ImageWithUploadStatus) =>
-        isVideoFromPicker(img.image)
-      );
+      // --- Attachments ---
+      if (selectedImages.length > 0 || selectedFiles.length > 0) {
+        const actualImages = selectedImages.filter(
+          (img: ImageWithUploadStatus) => !isVideoFromPicker(img.image)
+        );
+        const videos = selectedImages.filter((img: ImageWithUploadStatus) =>
+          isVideoFromPicker(img.image)
+        );
 
-      const uploadedImages = actualImages.filter(
-        (img: ImageWithUploadStatus) => img.uploadedUrl
-      );
-      const uploadedVideos = videos.filter(
-        (v) => v.uploadedUrl
-      ) as unknown as VideoWithUploadStatus[];
+        const uploadedImages = actualImages.filter(
+          (img: ImageWithUploadStatus) => img.uploadedUrl
+        );
+        const uploadedVideos = videos.filter(
+          (v) => v.uploadedUrl
+        ) as unknown as VideoWithUploadStatus[];
 
-      // Thumbnails are generated + uploaded at pick time (useImageAttachment).
-      // Only fall back to generating here for videos that don't already have one
-      // (e.g. thumbnail generation failed or hadn't finished before send).
-      const videosMissingThumbnail = uploadedVideos.filter(
-        (v) => !v.thumbnailUrl
-      );
-      let videoThumbnails: Record<string, { url: string; size: number }> = {};
-      if (videosMissingThumbnail.length > 0) {
-        videoThumbnails = await generateAndUploadVideoThumbnails(
-          videosMissingThumbnail
+        // Thumbnails are generated + uploaded at pick time (useImageAttachment).
+        // Only fall back to generating here for videos that don't already have one
+        // (e.g. thumbnail generation failed or hadn't finished before send).
+        const videosMissingThumbnail = uploadedVideos.filter(
+          (v) => !v.thumbnailUrl
         );
-      }
+        let videoThumbnails: Record<string, { url: string; size: number }> = {};
+        if (videosMissingThumbnail.length > 0) {
+          videoThumbnails = await generateAndUploadVideoThumbnails(
+            videosMissingThumbnail
+          );
+        }
 
-      // Send images + videos
-      if (uploadedImages.length > 0 || uploadedVideos.length > 0) {
-        const attachmentItems = [
-          ...uploadedImages.map((img: ImageWithUploadStatus) => ({
-            ...img,
-            type: 'image' as const,
-          })),
-          ...uploadedVideos.map(
-            (vid: VideoWithUploadStatus, vidIdx: number) => {
-              const videoId = vid.uploadedUrl || `video-${vidIdx}`;
-              const thumb = videoThumbnails[videoId];
-              return {
-                type: 'video' as const,
-                video: {
-                  path: vid.image.path,
-                  filename: vid.image.filename ?? undefined,
-                  size: vid.image.size ?? undefined,
-                  width: vid.image.width ?? undefined,
-                  height: vid.image.height ?? undefined,
-                  duration: vid.image.duration ?? undefined,
-                },
-                uploadProgress: vid.uploadProgress,
-                error: vid.error,
-                isUploading: vid.isUploading,
-                uploadedUrl: vid.uploadedUrl,
-                thumbnailUrl: vid.thumbnailUrl ?? thumb?.url,
-                thumbnailSize: vid.thumbnailSize ?? thumb?.size,
-              };
-            }
-          ),
-        ];
+        // Send images + videos
+        if (uploadedImages.length > 0 || uploadedVideos.length > 0) {
+          const attachmentItems = [
+            ...uploadedImages.map((img: ImageWithUploadStatus) => ({
+              ...img,
+              type: 'image' as const,
+            })),
+            ...uploadedVideos.map(
+              (vid: VideoWithUploadStatus, vidIdx: number) => {
+                const videoId = vid.uploadedUrl || `video-${vidIdx}`;
+                const thumb = videoThumbnails[videoId];
+                return {
+                  type: 'video' as const,
+                  video: {
+                    path: vid.image.path,
+                    filename: vid.image.filename ?? undefined,
+                    size: vid.image.size ?? undefined,
+                    width: vid.image.width ?? undefined,
+                    height: vid.image.height ?? undefined,
+                    duration: vid.image.duration ?? undefined,
+                  },
+                  uploadProgress: vid.uploadProgress,
+                  error: vid.error,
+                  isUploading: vid.isUploading,
+                  uploadedUrl: vid.uploadedUrl,
+                  thumbnailUrl: vid.thumbnailUrl ?? thumb?.url,
+                  thumbnailSize: vid.thumbnailSize ?? thumb?.size,
+                };
+              }
+            ),
+          ];
 
-        // Clear composer immediately — message is already in chat list with Sending status.
-        // User retries from the bubble, not the composer.
-        ImagePicker.clean().catch(() => {});
-        clearAllImages();
-        // Awaited so files (lower priority per attachment-priority config)
-        // only start sending after images/videos are done.
-        await sendAttachments(attachmentItems, undefined);
-      }
+          // Clear composer immediately — message is already in chat list with Sending status.
+          // User retries from the bubble, not the composer.
+          ImagePicker.clean().catch(() => {});
+          clearAllImages();
+          // Awaited so files (lower priority per attachment-priority config)
+          // only start sending after images/videos are done.
+          await sendAttachments(attachmentItems, undefined);
+        }
 
-      // Send each file as its own message (never merged), in priority order
-      // after images/videos, one at a time to preserve pick order.
-      const uploadedFiles = selectedFiles.filter(
-        (f) => f.uploadedUrl && !f.error
-      );
-      if (uploadedFiles.length > 0) {
-        clearAllFiles();
-        for (const file of uploadedFiles) {
-          await sendAttachments(
-            [
-              {
-                type: 'file' as const,
-                file: { path: file.uri, filename: file.name, size: file.size },
-                uploadProgress: 100,
-                error: null,
-                isUploading: false,
-                uploadedUrl: file.uploadedUrl,
-              },
-            ],
-            undefined
-          );
+        // Send each file as its own message (never merged), in priority order
+        // after images/videos, one at a time to preserve pick order.
+        const uploadedFiles = selectedFiles.filter(
+          (f) => f.uploadedUrl && !f.error
+        );
+        if (uploadedFiles.length > 0) {
+          clearAllFiles();
+          for (const file of uploadedFiles) {
+            await sendAttachments(
+              [
+                {
+                  type: 'file' as const,
+                  file: {
+                    path: file.uri,
+                    filename: file.name,
+                    size: file.size,
+                  },
+                  uploadProgress: 100,
+                  error: null,
+                  isUploading: false,
+                  uploadedUrl: file.uploadedUrl,
+                },
+              ],
+              undefined
+            );
+          }
         }
       }
-    }
 
-    // --- Text / link preview ---
-    if (text.trim() || urlMeta) {
-      const plainText = text.trim();
-      // Clear composer immediately — message is already in chat list with Sending status.
-      // User retries from the bubble, not the composer.
-      setText('');
-      await sendMessage({ plainText, urlMetadata: urlMeta });
-    }
-  }, [
-    imageAttachment,
-    fileAttachment,
-    linkPreview.isVisible,
-    linkPreview.metadata,
-    sendAttachments,
-    sendMessage,
-    text,
-  ]);
+      // --- Text / link preview ---
+      if (text.trim() || urlMeta) {
+        const plainText = text.trim();
+        // Clear composer immediately — message is already in chat list with Sending status.
+        // User retries from the bubble, not the composer.
+        setText('');
+        await sendMessage({ plainText, urlMetadata: urlMeta, mentions });
+      }
+    },
+    [
+      imageAttachment,
+      fileAttachment,
+      linkPreview.isVisible,
+      linkPreview.metadata,
+      sendAttachments,
+      sendMessage,
+      text,
+    ]
+  );
 
   return {
     // Text

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

@@ -176,6 +176,7 @@ export const ChatListLegend = memo(
     const onResetFlow = useCallback(() => {
       resetFlow();
     }, [resetFlow]);
+    console.info('dwqdqwdqw');
 
     const renderItem = useCallback(
       ({ item, index }: any) => {