@droppii-org/chat-mobile 0.2.67 → 0.2.69

package/lib/typescript/src/screens/chat-detail/types.d.ts

@@ -1,7 +1,7 @@
 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';
 export declare enum DChatPannelActionItemType {
     Gallery = "Gallery",
@@ -85,5 +85,6 @@ export interface ChatDetailProps extends Omit<ChatDetailHeaderProps, 'showAddMem
     onPressUrl?: (url: string) => void;
     customMessageItemFactory?: (item: MessageItem) => ReactNode;
     pannelActions?: DChatPannelAction[];
+    groupJoinSource?: GroupJoinSource;
 }
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/screens/chat-detail/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/screens/chat-detail/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAEjE,MAAM,MAAM,uBAAuB,GAAG,wBAAwB,GAAG,YAAY,CAAC;AAE9E,oBAAY,yBAAyB;IACnC,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,iBAAiB,sBAAsB;CACxC;AAED,oBAAY,wBAAwB;IAClC,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,WAAW,gBAAgB;CAC5B;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,wBAAwB,GAAG,yBAAyB,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,EAAE,EAAE,wBAAwB,CAAC;CAC9B;AACD,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,EAAE,EAAE,yBAAyB,CAAC;CAC/B;AAED,MAAM,WAAW,qBAAqB;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,4BAA4B;IAC3C,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACnD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAC5E,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,4BAA4B,KAAK,SAAS,CAAC;CAC1E;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wBAAwB,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,SAAS,CAAC;IAC5D,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CAClE;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,qBAAqB,EACrB,eAAe,GAAG,gBAAgB,CACnC;IACC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,wBAAwB,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,SAAS,CAAC;IAC5D,aAAa,CAAC,EAAE,iBAAiB,EAAE,CAAC;CACrC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/screens/chat-detail/types.ts"],"names":[],"mappings":"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"}

package/lib/typescript/src/screens/inbox/CommunityTab.d.ts

@@ -0,0 +1,6 @@
+interface CommunityTabProps {
+    onPressGroup?: (groupId: string) => void;
+}
+export declare const CommunityTab: import("react").MemoExoticComponent<({ onPressGroup }: CommunityTabProps) => import("react").JSX.Element>;
+export {};
+//# sourceMappingURL=CommunityTab.d.ts.map

package/lib/typescript/src/screens/inbox/CommunityTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommunityTab.d.ts","sourceRoot":"","sources":["../../../../../src/screens/inbox/CommunityTab.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AACD,eAAO,MAAM,YAAY,yDAA2B,iBAAiB,iCAgDnE,CAAC"}

package/lib/typescript/src/screens/inbox/Inbox.d.ts

@@ -3,7 +3,8 @@ interface InboxProps {
     onPressSearch?: () => void;
     onPressEdit?: () => void;
     onPressContact?: () => void;
+    onPressGroup?: (groupId: string) => void;
 }
-declare const Inbox: import("react").MemoExoticComponent<({ onPressThread, onPressSearch, onPressEdit, onPressContact, }: InboxProps) => import("react").JSX.Element>;
+declare const Inbox: import("react").MemoExoticComponent<({ onPressThread, onPressSearch, onPressEdit, onPressContact, onPressGroup, }: InboxProps) => import("react").JSX.Element>;
 export default Inbox;
 //# sourceMappingURL=Inbox.d.ts.map

package/lib/typescript/src/screens/inbox/Inbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Inbox.d.ts","sourceRoot":"","sources":["../../../../../src/screens/inbox/Inbox.tsx"],"names":[],"mappings":"AAMA,UAAU,UAAU;IAClB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAID,QAAA,MAAM,KAAK,uGAMN,UAAU,iCA0Gd,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Inbox.d.ts","sourceRoot":"","sources":["../../../../../src/screens/inbox/Inbox.tsx"],"names":[],"mappings":"AAeA,UAAU,UAAU;IAClB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AASD,QAAA,MAAM,KAAK,qHAON,UAAU,iCAmGd,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/lib/typescript/src/translation/resources/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../../../src/translation/resources/i18n.ts"],"names":[],"mappings":";;;AAwKA,wBAEE"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../../../src/translation/resources/i18n.ts"],"names":[],"mappings":";;;AAgLA,wBAEE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@droppii-org/chat-mobile",
-  "version": "0.2.67",
+  "version": "0.2.69",
   "description": "Droppii chat mobile",
   "keywords": [
     "react-native",

package/src/components/GroupItem/index.tsx

@@ -0,0 +1,170 @@
+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[]
+): 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: members.length - 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 };
+};
+
+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),
+    [faceURL, groupName, members]
+  );
+
+  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>
+            <KContainer.VisibleView visible={!!introduction}>
+              <KLabel.Text
+                typo="TextNmNormal"
+                numberOfLines={1}
+                color={KColors.gray.normal}
+              >
+                {introduction}
+              </KLabel.Text>
+            </KContainer.VisibleView>
+          </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);
@@ -249,6 +250,7 @@ export const useChatListener = () => {
       //   userID: member.userID,
       //   groupID: member.groupID,
       //   permissions: member.permissions,
+      //   roleLevel: member.roleLevel,
       // });
       const conversation = useConversationStore
         .getState()
@@ -265,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);
   }, []);
@@ -326,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);
@@ -352,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);
@@ -377,5 +428,7 @@ export const useChatListener = () => {
     OnGroupMemberInfoChanged,
     onJoinedGroupDeleted,
     onGroupDismissed,
+    onJoinedGroupAdded,
+    onGroupApplicationAdded,
   ]);
 };

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/message/usePinMessage.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import OpenIMSDK from '@droppii/openim-rn-client-sdk';
+import OpenIMSDK, { GroupPermission } from '@droppii/openim-rn-client-sdk';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import { useConversationStore } from '../../store/conversation';
 import { useMessageStore } from '../../store/message';
@@ -7,6 +7,7 @@ import { usePinnedMessageStore } from '../../store/pinnedMessage';
 import { useUserStore } from '../../store/user';
 import { UIUtils } from '../../utils/UIUtils';
 import { trans } from '../../translation';
+import { useGuardedAction } from '../useGroupPermission';
 
 const PINNED_MESSAGES_PAGE_SIZE = 5;
 
@@ -147,9 +148,14 @@ export const usePinMessage = (conversationID?: string) => {
     [conversationID, removeMessage]
   );
 
+  const pinMessageWithPermission = useGuardedAction(
+    GroupPermission.PinMessage,
+    pinMessage
+  );
+
   return {
     pinnedMessages,
-    pinMessage,
+    pinMessage: pinMessageWithPermission,
     unpinMessage,
   };
 };

package/src/hooks/message/useSendMessage.ts

@@ -33,8 +33,8 @@ import type { StickerItem } from '../../types/sticker';
 import { useQueryClient } from '@tanstack/react-query';
 import { stickerQueryKeys } from '../query-keys';
 import { getMessagePreview } from '../../utils/messageUtils';
-import { UIUtils } from '../../utils/UIUtils';
 import { trans } from '../../translation';
+import { useGuardedAction } from '../useGroupPermission';
 
 const buildSendParams = (
   message: MessageItem,
@@ -52,8 +52,7 @@ export const useSendMessage = () => {
   const applicationType = useChatContext().applicationType;
   const pushNewMessage = useMessageStore((state) => state.pushNewMessage);
   const updateOneMessage = useMessageStore((state) => state.updateOneMessage);
-  const { quotedMessage, setQuotedMessage, groupPermissions } =
-    useChatDetailContext();
+  const { quotedMessage, setQuotedMessage } = useChatDetailContext();
   const queryClient = useQueryClient();
 
   const dispatchSend = useCallback(
@@ -107,16 +106,6 @@ export const useSendMessage = () => {
       const recvID = currentConversation?.userID || targetUserId;
       const groupID = currentConversation?.groupID || targetGroupId;
       if (!recvID && !groupID) return;
-      if (
-        currentConversation?.conversationType === SessionType.Group &&
-        !groupPermissions?.includes(GroupPermission.SendMessage)
-      ) {
-        UIUtils.toast.open({
-          title: trans('chat:no_send_permission'),
-          theme: 'info',
-        });
-        return;
-      }
 
       const messageList: MessageItem[] = [];
 
@@ -192,7 +181,6 @@ export const useSendMessage = () => {
       quotedMessage,
       setQuotedMessage,
       queryClient,
-      groupPermissions,
     ]
   );
 
@@ -257,8 +245,16 @@ export const useSendMessage = () => {
     markMessageRevoked(message.clientMsgID);
   }, []);
 
-  return {
+  const sendMessageWithPermission = useGuardedAction(
+    GroupPermission.SendMessage,
     sendMessage,
+    {
+      deniedMessage: trans('chat:no_send_permission'),
+    }
+  );
+
+  return {
+    sendMessage: sendMessageWithPermission,
     retryMessage,
     revokeMessage,
   };

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/hooks/useGroupPermission.ts

@@ -0,0 +1,43 @@
+import { PeerType, type GroupPermission } from '@droppii/openim-rn-client-sdk';
+import { useChatDetailContext } from '../context';
+import { useCallback, useMemo } from 'react';
+import { trans } from '../translation';
+import { UIUtils } from '../utils/UIUtils';
+
+export const useHasGroupPermission = (
+  permission: GroupPermission | GroupPermission[],
+  mode: 'every' | 'some' = 'every'
+): boolean => {
+  const { conversation, groupPermissions } = useChatDetailContext();
+  const isNotGroup = conversation?.peerType !== PeerType.Group;
+  const required = Array.isArray(permission) ? permission : [permission];
+
+  return useMemo(() => {
+    if (isNotGroup) return true;
+    return mode === 'every'
+      ? required.every((p) => groupPermissions?.includes(p))
+      : required.some((p) => groupPermissions?.includes(p));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [groupPermissions, isNotGroup, mode]);
+};
+
+export const useGuardedAction = <T extends (...args: any[]) => any>(
+  permission: GroupPermission,
+  action: T,
+  options?: { deniedMessage?: string }
+): T => {
+  const allowed = useHasGroupPermission(permission);
+  return useCallback(
+    (...args: Parameters<T>) => {
+      if (!allowed) {
+        UIUtils.toast.open({
+          title: options?.deniedMessage ?? trans('chat:no_permission'),
+          theme: 'info',
+        });
+        return;
+      }
+      return action(...args);
+    },
+    [allowed, action, options?.deniedMessage]
+  ) as T;
+};

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'],