@droppii-org/chat-mobile 0.2.68 → 0.2.70

package/src/components/GroupItem/index.tsx

@@ -0,0 +1,174 @@
+import {
+  KButton,
+  KColors,
+  KContainer,
+  KLabel,
+  KSpacingValue,
+} from '@droppii/libs';
+import {
+  GroupJoinSource,
+  type SearchPublicGroupInfo,
+  type SearchPublicGroupMemberInfo,
+} from '@droppii/openim-rn-client-sdk';
+import { memo, useCallback, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { Avatar } from '../Avatar';
+import type { AvatarProps } from '../Avatar/Avatar.types';
+import { trans } from '../../translation';
+import { useJoinGroup } from '../../hooks/groups/useJoinGroup';
+
+interface IGroupItemProps {
+  item: SearchPublicGroupInfo;
+  onPress?: (groupId: string) => void;
+}
+
+const buildAvatarProps = (
+  faceURL: string,
+  groupName: string,
+  members: SearchPublicGroupMemberInfo[],
+  memberCount: number
+): Pick<
+  AvatarProps,
+  | 'type'
+  | 'source'
+  | 'secondarySource'
+  | 'tertiarySource'
+  | 'remainingCount'
+  | 'fullName'
+  | 'secondaryFullName'
+  | 'tertiaryFullName'
+> => {
+  if (faceURL) {
+    return { type: 'single', source: faceURL, fullName: groupName };
+  }
+  const [m0, m1, m2] = members;
+  if (members.length >= 4) {
+    return {
+      type: 'quad',
+      source: m0?.faceURL,
+      secondarySource: m1?.faceURL,
+      tertiarySource: m2?.faceURL,
+      remainingCount: memberCount - 3,
+      fullName: m0?.nickname,
+      secondaryFullName: m1?.nickname,
+      tertiaryFullName: m2?.nickname,
+    };
+  }
+  if (members.length === 3) {
+    return {
+      type: 'triple',
+      source: m0?.faceURL,
+      secondarySource: m1?.faceURL,
+      tertiarySource: m2?.faceURL,
+      fullName: m0?.nickname,
+      secondaryFullName: m1?.nickname,
+      tertiaryFullName: m2?.nickname,
+    };
+  }
+  if (members.length === 2) {
+    return {
+      type: 'double',
+      source: m0?.faceURL,
+      secondarySource: m1?.faceURL,
+      fullName: m0?.nickname,
+      secondaryFullName: m1?.nickname,
+    };
+  }
+  return {
+    type: 'single',
+    source: faceURL,
+    fullName: groupName,
+    remainingCount: memberCount,
+  };
+};
+
+export const GroupItem = memo((props: IGroupItemProps) => {
+  const { item, onPress } = props || {};
+  const {
+    groupID,
+    groupName = '',
+    memberCount = 0,
+    introduction = '',
+    faceURL = '',
+    isJoined = false,
+    members = [],
+  } = item || {};
+
+  const { mutate: joinGroup, isPending } = useJoinGroup();
+
+  const avatarProps = useMemo(
+    () => buildAvatarProps(faceURL, groupName, members, memberCount),
+    [faceURL, groupName, members, memberCount]
+  );
+
+  const handleActionPress = useCallback(() => {
+    if (isJoined) {
+      onPress?.(groupID);
+      return;
+    }
+    joinGroup(
+      { groupID, reqMsg: '', joinSource: GroupJoinSource.Search, groupName },
+      { onSuccess: () => onPress?.(groupID) }
+    );
+  }, [isJoined, groupID, joinGroup, onPress, groupName]);
+
+  return (
+    <KContainer.Touchable
+      style={styles.item}
+      onPress={() => onPress?.(groupID)}
+    >
+      <Avatar size="md" {...avatarProps} />
+      <KContainer.View style={styles.itemContent}>
+        <KLabel.Text typo="TextMdMedium" numberOfLines={1}>
+          {groupName}
+        </KLabel.Text>
+        <KContainer.View style={styles.itemDescription}>
+          <KContainer.View flex>
+            <KLabel.Text
+              typo="TextNmNormal"
+              numberOfLines={1}
+              color={KColors.gray.normal}
+            >
+              {trans('group:member_count', { count: memberCount })}
+            </KLabel.Text>
+            <KLabel.Text
+              typo="TextNmNormal"
+              numberOfLines={1}
+              color={KColors.gray.normal}
+            >
+              {introduction || trans('group:public_group')}
+            </KLabel.Text>
+          </KContainer.View>
+          <KButton.Solid
+            label={trans(isJoined ? 'group:access' : 'group:join')}
+            onPress={handleActionPress}
+            size="xs"
+            isLightSolid
+            kind={isJoined ? 'light' : 'primary'}
+            loading={isPending}
+          />
+        </KContainer.View>
+      </KContainer.View>
+    </KContainer.Touchable>
+  );
+});
+
+const styles = StyleSheet.create({
+  item: {
+    paddingVertical: KSpacingValue['0.5rem'],
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: KSpacingValue['0.5rem'],
+    borderBottomWidth: 1,
+    borderBlockColor: KColors.border.light,
+  },
+  itemContent: {
+    flex: 1,
+  },
+  itemDescription: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: KSpacingValue['0.5rem'],
+    justifyContent: 'space-between',
+  },
+});

package/src/core/useChatListener.ts

@@ -4,6 +4,7 @@ import OpenIMSDK, {
   OpenIMEvent,
   SessionType,
   type ConversationItem,
+  type GroupApplicationItem,
   type GroupItem,
   type GroupMemberItem,
   type MessageItem,
@@ -24,7 +25,7 @@ import { belongsToConversation } from '../utils/message';
 import { getConversationID } from '../utils/conversation';
 import { DeviceEventEmitter } from 'react-native';
 import { ChatEvent } from '../types/events';
-import { conversationQueryKeys } from '../hooks/query-keys';
+import { conversationQueryKeys, groupQueryKeys } from '../hooks/query-keys';
 
 export const useChatListener = () => {
   const updateOneMessage = useMessageStore((state) => state.updateOneMessage);
@@ -266,6 +267,48 @@ export const useChatListener = () => {
     [currentUserId]
   );
 
+  const markGroupJoined = useCallback(
+    (groupID: string) => {
+      queryClient.invalidateQueries({
+        queryKey: conversationQueryKeys.joinedGroup(groupID),
+      });
+
+      queryClient.setQueriesData<{
+        pages: {
+          total: number;
+          groups: { groupID: string; isJoined: boolean }[];
+        }[];
+        pageParams: unknown[];
+      }>({ queryKey: groupQueryKeys.public(), exact: false }, (old) => {
+        if (!old) return old;
+        return {
+          ...old,
+          pages: old.pages.map((page) => ({
+            ...page,
+            groups: page.groups.map((g) =>
+              g.groupID === groupID ? { ...g, isJoined: true } : g
+            ),
+          })),
+        };
+      });
+    },
+    [queryClient]
+  );
+
+  const onJoinedGroupAdded = useCallback(
+    (group: GroupItem) => {
+      markGroupJoined(group.groupID);
+    },
+    [markGroupJoined]
+  );
+
+  const onGroupApplicationAdded = useCallback(
+    (application: GroupApplicationItem) => {
+      markGroupJoined(application.groupID);
+    },
+    [markGroupJoined]
+  );
+
   const onMessageRevoked = useCallback((revokedInfo: RevokedInfo) => {
     markMessageRevoked(revokedInfo.clientMsgID);
   }, []);
@@ -327,6 +370,8 @@ export const useChatListener = () => {
     );
     OpenIMSDK.on(OpenIMEvent.OnJoinedGroupDeleted, onJoinedGroupDeleted);
     OpenIMSDK.on(OpenIMEvent.OnGroupDismissed, onGroupDismissed);
+    OpenIMSDK.on(OpenIMEvent.OnJoinedGroupAdded, onJoinedGroupAdded);
+    OpenIMSDK.on(OpenIMEvent.OnGroupApplicationAdded, onGroupApplicationAdded);
 
     // Message status
     OpenIMSDK.on(OpenIMEvent.SendMessageProgress, onSendMessageProgress);
@@ -353,6 +398,11 @@ export const useChatListener = () => {
       );
       OpenIMSDK.off(OpenIMEvent.OnJoinedGroupDeleted, onJoinedGroupDeleted);
       OpenIMSDK.off(OpenIMEvent.OnGroupDismissed, onGroupDismissed);
+      OpenIMSDK.off(OpenIMEvent.OnJoinedGroupAdded, onJoinedGroupAdded);
+      OpenIMSDK.off(
+        OpenIMEvent.OnGroupApplicationAdded,
+        onGroupApplicationAdded
+      );
 
       // Message status
       OpenIMSDK.off(OpenIMEvent.SendMessageProgress, onSendMessageProgress);
@@ -378,5 +428,7 @@ export const useChatListener = () => {
     OnGroupMemberInfoChanged,
     onJoinedGroupDeleted,
     onGroupDismissed,
+    onJoinedGroupAdded,
+    onGroupApplicationAdded,
   ]);
 };

package/src/hooks/conversation/useGetConversationDetail.ts

@@ -96,10 +96,10 @@ export const useGetConversationDetail = ({
   targetGroupId,
   targetBotId,
 }: UseGetConversationDetailParams): UseGetConversationDetailResult => {
-  const { data: botData, isLoading: botIdLoading } =
+  const { data: botData, isFetching: botIdLoading } =
     useBotConversationData(targetBotId);
 
-  const { data: conversationData, isLoading: conversationLoading } =
+  const { data: conversationData, isFetching: conversationLoading } =
     useGetOneConversation({
       targetUserId,
       targetGroupId: targetGroupId || botData?.groupId,

package/src/hooks/groups/useFetchPublicGroup.ts

@@ -0,0 +1,43 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import OpenIMSDK, {
+  PublicGroupJoinStatus,
+  type SearchPublicGroupInfo,
+} from '@droppii/openim-rn-client-sdk';
+import { PAGE_SIZE } from '../../constants';
+import { groupQueryKeys } from '../query-keys';
+
+export const useFetchPublicGroup = (keyword: string) => {
+  const { data, ...rest } = useInfiniteQuery({
+    queryKey: groupQueryKeys.publicSearch(keyword),
+    queryFn: ({ pageParam = 0 }) => {
+      return OpenIMSDK.searchPublicGroups(
+        keyword,
+        PublicGroupJoinStatus.All,
+        pageParam,
+        PAGE_SIZE
+      );
+    },
+    getNextPageParam: (lastPage, allPages) => {
+      const fetched = allPages.reduce((sum, p) => sum + p.groups.length, 0);
+      return fetched < lastPage.total ? fetched : undefined;
+    },
+    initialPageParam: 0,
+    maxPages: 1,
+  });
+
+  const dataFlatten: SearchPublicGroupInfo[] = useMemo(() => {
+    const seen = new Set<string>();
+    return (
+      data?.pages.flatMap((page) =>
+        page.groups.filter((g) => {
+          if (seen.has(g.groupID)) return false;
+          seen.add(g.groupID);
+          return true;
+        })
+      ) ?? []
+    );
+  }, [data]);
+
+  return { dataFlatten, ...rest };
+};

package/src/hooks/groups/useJoinGroup.ts

@@ -0,0 +1,46 @@
+import OpenIMSDK, { type JoinGroupParams } from '@droppii/openim-rn-client-sdk';
+import { useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+import { conversationQueryKeys, groupQueryKeys } from '../query-keys';
+import { UIUtils } from '../../utils/UIUtils';
+import { trans } from '../../translation';
+
+export const useJoinGroup = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: groupQueryKeys.join(),
+    mutationFn: (params: JoinGroupParams & { groupName: string }) =>
+      OpenIMSDK.joinGroup(params),
+    onSuccess: (_data, params) => {
+      queryClient.invalidateQueries({
+        queryKey: conversationQueryKeys.joinedGroup(params.groupID),
+      });
+
+      queryClient.setQueriesData<{
+        pages: {
+          total: number;
+          groups: { groupID: string; isJoined: boolean }[];
+        }[];
+        pageParams: unknown[];
+      }>({ queryKey: groupQueryKeys.public(), exact: false }, (old) => {
+        if (!old) return old;
+        return {
+          ...old,
+          pages: old.pages.map((page) => ({
+            ...page,
+            groups: page.groups.map((g) =>
+              g.groupID === params.groupID ? { ...g, isJoined: true } : g
+            ),
+          })),
+        };
+      });
+
+      UIUtils.toast.open({
+        title: trans('group:joined_group', {
+          groupName: params?.groupName || '',
+        }),
+      });
+    },
+  });
+};

package/src/hooks/query-keys.ts

@@ -61,3 +61,11 @@ export const messageQueryKeys = {
   search: (query: string, conversationId?: string) =>
     [...messageQueryKeys.all, 'search', query, conversationId] as const,
 };
+
+export const groupQueryKeys = {
+  all: ['groups'] as const,
+  public: () => [...groupQueryKeys.all, 'public'] as const,
+  publicSearch: (keyword: string) =>
+    [...groupQueryKeys.public(), keyword] as const,
+  join: () => [...groupQueryKeys.all, 'join'] as const,
+};

package/src/index.tsx

@@ -40,7 +40,11 @@ export type {
   MessageItem,
   ConversationItem,
 } from '@droppii/openim-rn-client-sdk';
-export { LoginStatus, MessageType } from '@droppii/openim-rn-client-sdk';
+export {
+  LoginStatus,
+  MessageType,
+  GroupJoinSource,
+} from '@droppii/openim-rn-client-sdk';
 export * from './screens/chat-detail';
 export type {
   DChatActionItem,

package/src/screens/SearchConversation/TabResult.tsx

@@ -122,7 +122,7 @@ const styles = StyleSheet.create({
   tabRow: {
     flexDirection: 'row',
     borderBottomWidth: 1,
-    borderBottomColor: KColors.border.normal,
+    borderBottomColor: KColors.border.light,
   },
   tabItem: {
     paddingVertical: KSpacingValue['0.5rem'],

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

@@ -64,7 +64,11 @@ import { useSendMessage } from '../../hooks/message/useSendMessage';
 import { openBotMenuSheet } from './BotMenuSheet';
 import { UIUtils } from '../../utils/UIUtils';
 import { GroupPermission, PeerType } from '@droppii/openim-rn-client-sdk';
-import { useGuardedAction } from '../../hooks/useGroupPermission';
+import {
+  useGuardedAction,
+  useHasGroupPermission,
+} from '../../hooks/useGroupPermission';
+import { useIsJoinedGroup } from '../../hooks/useIsJoinedGroup';
 
 interface ChatComposerInternalProps {
   isEmptyMessage?: boolean;
@@ -72,6 +76,8 @@ interface ChatComposerInternalProps {
   isComposeDisabled?: boolean;
   composerRef?: RefObject<View | null>;
   onComposerLayout?: (event: LayoutChangeEvent) => void;
+  onPressJoinGroup?: () => void;
+  isJoiningGroup?: boolean;
 }
 
 export const ChatComposer = memo(
@@ -81,6 +87,8 @@ export const ChatComposer = memo(
     isComposeDisabled = false,
     composerRef,
     onComposerLayout,
+    onPressJoinGroup,
+    isJoiningGroup = false,
   }: ChatComposerInternalProps) => {
     const insets = useSafeAreaInsets();
     const isDisableCompose = isComposeDisabled;
@@ -99,6 +107,15 @@ export const ChatComposer = memo(
     const { mutateAsync: closeSupportSession } = useCloseSupportSession();
     const { sendMessage } = useSendMessage();
     const compose = useChatCompose();
+    const isSendMessageAllowed = useHasGroupPermission(
+      GroupPermission.SendMessage
+    );
+
+    const { data: isJoinedGroup } = useIsJoinedGroup(conversation?.groupID);
+
+    const isNotInGroup = useMemo(() => {
+      return conversation?.groupID ? !isJoinedGroup : false;
+    }, [conversation?.groupID, isJoinedGroup]);
 
     const {
       activePanelType,
@@ -403,7 +420,7 @@ export const ChatComposer = memo(
       conversationFlow?.flowCurrentStep?.type === ReactFlowsNodeTypes.Start &&
       isEmptyMessage;
 
-    if (isDisableCompose && !isGroupConversation) {
+    if ((isDisableCompose && !isGroupConversation) || !isSendMessageAllowed) {
       content = (
         <KContainer.View row alignItems justifyContent>
           <KContainer.View marginR="0.25rem">
@@ -414,7 +431,9 @@ export const ChatComposer = memo(
             />
           </KContainer.View>
           <KLabel.Text typo="TextXsNormal">
-            {trans('chat:compose_disabled_seller_inactive')}
+            {!isSendMessageAllowed
+              ? trans('group:cannot_send_message')
+              : trans('chat:compose_disabled_seller_inactive')}
           </KLabel.Text>
         </KContainer.View>
       );
@@ -431,6 +450,30 @@ export const ChatComposer = memo(
           />
         </KContainer.View>
       );
+    } else if (isNotInGroup) {
+      content = (
+        <KContainer.View
+          paddingH="0.75rem"
+          justifyContent="center"
+          brTW={1}
+          brTC={KColors.border.light}
+        >
+          <KLabel.Text
+            typo="TextSmNormal"
+            textAlign="center"
+            paddingV={'0.75rem'}
+          >
+            {trans('group:not_in_group')}
+          </KLabel.Text>
+          <KButton.Solid
+            size="md"
+            label={trans('group:join')}
+            stretch
+            loading={isJoiningGroup}
+            onPress={onPressJoinGroup}
+          />
+        </KContainer.View>
+      );
     } else {
       content = (
         <KContainer.View background={'#F9F9FA'}>

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

@@ -30,10 +30,14 @@ import {
   useGetConversationDetail,
   useGetConversationTarget,
 } from '../../hooks/conversation/useGetConversationDetail';
-import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import {
+  GroupJoinSource,
+  type MessageItem,
+} from '@droppii/openim-rn-client-sdk';
 import { useMessages } from '../../hooks/message/useMessages';
 import { ChatEvent, type GroupRemovedPayload } from '../../types/events';
 import { useSetIsShowFLashMessage } from '../../context/global';
+import { useJoinGroup } from '../../hooks/groups/useJoinGroup';
 
 const ChatDetail = memo(
   ({
@@ -50,6 +54,7 @@ const ChatDetail = memo(
     onPressUrl,
     customMessageItemFactory,
     pannelActions,
+    groupJoinSource,
   }: ChatDetailProps) => {
     const navigation = useNavigation();
     const mediaViewerRef = useRef<MediaViewerModalHandle>(null);
@@ -94,6 +99,8 @@ const ChatDetail = memo(
       hasMoreNew,
     } = useMessages({ conversationId, startClientMsgId: targetMessageId });
 
+    const { mutate: joinGroup, isPending: isJoiningGroup } = useJoinGroup();
+
     const setShowFLashMessage = useSetIsShowFLashMessage();
 
     const { pinnedMessages, pinMessage, unpinMessage } =
@@ -164,6 +171,21 @@ const ChatDetail = memo(
       onPressMenu?.(conversationId);
     }, [conversationId, onPressMenu]);
 
+    const handlePressJoinGroup = useCallback(() => {
+      if (!conversation?.groupID) return;
+      joinGroup({
+        groupID: conversation?.groupID,
+        reqMsg: '',
+        joinSource: groupJoinSource || GroupJoinSource.Search,
+        groupName: conversation?.showName || '',
+      });
+    }, [
+      groupJoinSource,
+      conversation?.groupID,
+      joinGroup,
+      conversation?.showName,
+    ]);
+
     return (
       <KContainer.Page flex edges={['bottom']}>
         <ChatDetailHeader
@@ -207,6 +229,8 @@ const ChatDetail = memo(
           isEmptyMessage={messages?.length === 0}
           pannelActions={pannelActions}
           isComposeDisabled={isComposeDisabled}
+          onPressJoinGroup={handlePressJoinGroup}
+          isJoiningGroup={isJoiningGroup}
         />
 
         <MediaViewerModal ref={mediaViewerRef} />

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

@@ -8,6 +8,7 @@ import {
   type RefObject,
 } from 'react';
 import {
+  ActivityIndicator,
   DeviceEventEmitter,
   Platform,
   StyleSheet,
@@ -89,6 +90,7 @@ export const ChatListLegend = memo(
     freeze,
     scrollMessageToEnd,
     keyboardOffset,
+    isLoading,
   }: ChatListLegendInternalProps) => {
     const currentUserId = useUserStore((s) => s.user?.userID);
     const windowWidth = useWindowDimensions().width;
@@ -492,16 +494,13 @@ export const ChatListLegend = memo(
       listRef,
     ]);
 
-    // if (isLoading) {
-    //   return (
-    //     <KContainer.View flex center background={KColors.white}>
-    //       <ActivityIndicator
-    //         color={KColors.palette.primary.w400}
-    //         size="small"
-    //       />
-    //     </KContainer.View>
-    //   );
-    // }
+    if (isLoading) {
+      return (
+        <KContainer.View flex center background={KColors.white}>
+          <ActivityIndicator color={KColors.primary.normal} size="small" />
+        </KContainer.View>
+      );
+    }
 
     return (
       <KContainer.View flex background={KColors.white} style={styles.container}>
@@ -509,7 +508,7 @@ export const ChatListLegend = memo(
           ref={listRef}
           data={messages}
           renderItem={renderItem}
-          estimatedItemSize={100}
+          estimatedItemSize={200}
           getItemType={getItemType}
           getFixedItemSize={getFixedItemSize}
           keyExtractor={(item) => String(item.clientMsgID || item.serverMsgID)}
@@ -517,7 +516,6 @@ export const ChatListLegend = memo(
           extraData={`${conversationFlow?.flowCurrentStep?.id ?? ''}-${lastMessageId ?? ''}-${highlightedId ?? ''}`}
           alignItemsAtEnd
           maintainVisibleContentPosition={maintainVisiblePositionConfig}
-          maintainScrollAtEnd={true}
           freeze={freeze}
           keyboardOffset={keyboardOffset}
           scrollEventThrottle={16}
@@ -532,7 +530,7 @@ export const ChatListLegend = memo(
           onEndReached={handleEndReached}
           onEndReachedThreshold={0.2}
           showsVerticalScrollIndicator={false}
-          initialScrollAtEnd
+          initialScrollIndex={messages.length - 1}
         />
         <Animated.View
           style={[styles.scrollToBottomButton, animatedButtonStyle]}

package/src/screens/chat-detail/types.ts

@@ -1,7 +1,10 @@
 import type { ReactNode } from 'react';
 import type { MediaItem } from '../../hooks/useMediaViewer';
 import type { MeasuredRect } from './messageToolbox/types';
-import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import type {
+  GroupJoinSource,
+  MessageItem,
+} from '@droppii/openim-rn-client-sdk';
 
 export type DChatActionIconProvider = 'MaterialCommunityIcons' | 'DroppiiNew';
 
@@ -100,4 +103,5 @@ export interface ChatDetailProps extends Omit<
   onPressUrl?: (url: string) => void;
   customMessageItemFactory?: (item: MessageItem) => ReactNode;
   pannelActions?: DChatPannelAction[];
+  groupJoinSource?: GroupJoinSource;
 }