@droppii-org/chat-mobile 0.2.67 → 0.2.69

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

@@ -63,12 +63,9 @@ import { ChatCurrentQuotedMessage } from './ChatCurrentQuotedMessage';
 import { useSendMessage } from '../../hooks/message/useSendMessage';
 import { openBotMenuSheet } from './BotMenuSheet';
 import { UIUtils } from '../../utils/UIUtils';
-import {
-  GroupPermission,
-  PeerType,
-  SessionType,
-} from '@droppii/openim-rn-client-sdk';
-import { useConversationStore } from '../../store';
+import { GroupPermission, PeerType } from '@droppii/openim-rn-client-sdk';
+import { useGuardedAction } from '../../hooks/useGroupPermission';
+import { useIsJoinedGroup } from '../../hooks/useIsJoinedGroup';
 
 interface ChatComposerInternalProps {
   isEmptyMessage?: boolean;
@@ -76,6 +73,8 @@ interface ChatComposerInternalProps {
   isComposeDisabled?: boolean;
   composerRef?: RefObject<View | null>;
   onComposerLayout?: (event: LayoutChangeEvent) => void;
+  onPressJoinGroup?: () => void;
+  isJoiningGroup?: boolean;
 }
 
 export const ChatComposer = memo(
@@ -85,6 +84,8 @@ export const ChatComposer = memo(
     isComposeDisabled = false,
     composerRef,
     onComposerLayout,
+    onPressJoinGroup,
+    isJoiningGroup = false,
   }: ChatComposerInternalProps) => {
     const insets = useSafeAreaInsets();
     const isDisableCompose = isComposeDisabled;
@@ -103,7 +104,12 @@ export const ChatComposer = memo(
     const { mutateAsync: closeSupportSession } = useCloseSupportSession();
     const { sendMessage } = useSendMessage();
     const compose = useChatCompose();
-    const groupPermissions = useChatDetailContext().groupPermissions;
+
+    const { data: isJoinedGroup } = useIsJoinedGroup(conversation?.groupID);
+
+    const isNotInGroup = useMemo(() => {
+      return conversation?.groupID ? !isJoinedGroup : false;
+    }, [conversation?.groupID, isJoinedGroup]);
 
     const {
       activePanelType,
@@ -137,27 +143,20 @@ export const ChatComposer = memo(
       onAttachmentOpenChange: setIsAttachmentOpen,
     });
 
-    const handleSend = useCallback(async () => {
-      const currentConversation = useConversationStore
-        .getState()
-        .getCurrentConversation();
-      if (
-        currentConversation?.conversationType === SessionType.Group &&
-        !groupPermissions?.includes(GroupPermission.SendMessage)
-      ) {
-        UIUtils.toast.open({
-          title: trans('chat:no_send_permission'),
-          theme: 'info',
-        });
-        return;
-      }
-      if (compose.isUploading || !compose.canSend) return;
-      try {
-        await compose.send();
-      } catch (error) {
-        if (__DEV__) console.error('[ChatComposer] Failed to send:', error);
+    const handleSend = useGuardedAction(
+      GroupPermission.SendMessage,
+      useCallback(async () => {
+        if (compose.isUploading || !compose.canSend) return;
+        try {
+          await compose.send();
+        } catch (error) {
+          if (__DEV__) console.error('[ChatComposer] Failed to send:', error);
+        }
+      }, [compose]),
+      {
+        deniedMessage: trans('chat:no_send_permission'),
       }
-    }, [compose, groupPermissions]);
+    );
 
     const handleInputFocus = useCallback(() => {
       setIsInputFocused(true);
@@ -443,6 +442,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/messageToolbox/MessageToolboxOverlay.tsx

@@ -20,7 +20,11 @@ import { MessageToolboxWrapper } from './MessageToolboxWrapper';
 import type { ReactNode } from 'react';
 import { useSendMessage } from '../../../hooks/message/useSendMessage';
 import { useChatDetailContext } from '../../../context';
-import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import {
+  GroupPermission,
+  type MessageItem,
+} from '@droppii/openim-rn-client-sdk';
+import { useHasGroupPermission } from '../../../hooks/useGroupPermission';
 
 interface MessageToolboxOverlayProps {
   currentUserId?: string;
@@ -51,6 +55,7 @@ export const MessageToolboxOverlay = forwardRef<
       [message, currentUserId]
     );
     const { retryMessage, revokeMessage } = useSendMessage();
+    const isPinAllowed = useHasGroupPermission(GroupPermission.PinMessage);
 
     const hide = useCallback(() => {
       setVisible(false);
@@ -173,6 +178,8 @@ export const MessageToolboxOverlay = forwardRef<
           toolbox={
             <MessageToolboxMenu
               {...toolboxItems}
+              showPinMessage={toolboxItems.showPinMessage && isPinAllowed}
+              showUnpinMessage={toolboxItems.showUnpinMessage && isPinAllowed}
               onCopyMessage={handleCopyMessage}
               onCopyMessageLink={handleCopyMessageLink}
               onPinMessage={handlePinMessage}

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;
 }

package/src/screens/inbox/CommunityTab.tsx

@@ -0,0 +1,65 @@
+import { KContainer, KSpacingValue } from '@droppii/libs';
+import { memo, useCallback } from 'react';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import type { SearchPublicGroupInfo } from '@droppii/openim-rn-client-sdk';
+import { useFetchPublicGroup } from '../../hooks/groups/useFetchPublicGroup';
+import { GroupItem } from '../../components/GroupItem';
+
+interface CommunityTabProps {
+  onPressGroup?: (groupId: string) => void;
+}
+export const CommunityTab = memo(({ onPressGroup }: CommunityTabProps) => {
+  const {
+    dataFlatten,
+    isFetching,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+    isRefetching,
+    refetch,
+  } = useFetchPublicGroup('');
+
+  const renderItem = useCallback(
+    ({ item }: { item: SearchPublicGroupInfo }) => (
+      <GroupItem item={item} onPress={onPressGroup} />
+    ),
+    [onPressGroup]
+  );
+
+  const keyExtractor = useCallback(
+    (item: SearchPublicGroupInfo) => item.groupID,
+    []
+  );
+
+  const onEndReached = useCallback(() => {
+    if (hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  return (
+    <KContainer.Page flex>
+      {isFetching && !isFetchingNextPage && !isRefetching ? (
+        <KContainer.View flex center>
+          <ActivityIndicator />
+        </KContainer.View>
+      ) : (
+        <KContainer.FlatList
+          data={dataFlatten}
+          renderItem={renderItem}
+          keyExtractor={keyExtractor}
+          onEndReached={onEndReached}
+          refreshing={isRefetching}
+          onRefresh={refetch}
+          contentContainerStyle={styles.contentContainer}
+        />
+      )}
+    </KContainer.Page>
+  );
+});
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+  },
+});

package/src/screens/inbox/Inbox.tsx

@@ -1,38 +1,56 @@
 import { memo, useCallback, useState } from 'react';
 import { StyleSheet } from 'react-native';
 import { TabView } from 'react-native-tab-view';
-import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
+import {
+  KContainer,
+  KImage,
+  KLabel,
+  KColors,
+  KRadiusValue,
+  KSpacingValue,
+} from '@droppii/libs';
 import { MessagesTab } from './MessagesTab';
+import { trans } from '../../translation';
+import { CommunityTab } from './CommunityTab';
 
 interface InboxProps {
   onPressThread?: (item: string) => void;
   onPressSearch?: () => void;
   onPressEdit?: () => void;
   onPressContact?: () => void;
+  onPressGroup?: (groupId: string) => void;
 }
 
 type TabRoute = { key: string; title: string };
 
+const TabRoutes: TabRoute[] = [
+  { key: 'messages', title: trans('messages') },
+  { key: 'community', title: trans('community') },
+];
+
 const Inbox = memo(
   ({
     onPressThread,
     onPressSearch,
     onPressEdit,
     onPressContact,
+    onPressGroup,
   }: InboxProps) => {
     const [index, setIndex] = useState(0);
-    const [routes] = useState<TabRoute[]>([
-      { key: 'messages', title: 'Tin nhắn' },
-    ]);
+    const [routes] = useState<TabRoute[]>(TabRoutes);
 
     const renderScene = useCallback(
       ({ route }: { route: TabRoute }) => {
-        if (route.key === 'messages') {
-          return <MessagesTab onPressThread={onPressThread} />;
+        switch (route.key) {
+          case 'messages':
+            return <MessagesTab onPressThread={onPressThread} />;
+          case 'community':
+            return <CommunityTab onPressGroup={onPressGroup} />;
+          default:
+            return null;
         }
-        return null;
       },
-      [onPressThread]
+      [onPressThread, onPressGroup]
     );
 
     const renderTabBar = useCallback(
@@ -46,24 +64,18 @@ const Inbox = memo(
                 <KContainer.Touchable
                   key={route.key}
                   onPress={() => setIndex(i)}
-                  paddingV="0.75rem"
-                  marginR="1rem"
                   style={styles.tabItem}
                   activeOpacity={0.7}
                 >
                   <KLabel.Text
                     typo="TextNmBold"
                     color={
-                      isActive
-                        ? KColors.palette.primary.w400
-                        : KColors.palette.gray.w500
+                      isActive ? KColors.primary.normal : KColors.gray.light
                     }
                   >
                     {route.title}
                   </KLabel.Text>
-                  {isActive && (
-                    <KContainer.View style={styles.activeIndicator} />
-                  )}
+                  {isActive && <KContainer.View style={styles.indicator} />}
                 </KContainer.Touchable>
               );
             })}
@@ -77,10 +89,9 @@ const Inbox = memo(
               activeOpacity={0.7}
             >
               <KImage.VectorIcons
-                name="magnify"
-                provider="MaterialCommunityIcons"
+                name="search-o"
                 size={24}
-                color={KColors.palette.primary.w400}
+                color={KColors.primary.normal}
               />
             </KContainer.Touchable>
             <KContainer.Touchable
@@ -89,10 +100,9 @@ const Inbox = memo(
               activeOpacity={0.7}
             >
               <KImage.VectorIcons
-                name="square-edit-outline"
-                provider="MaterialCommunityIcons"
+                name="plus-circle-o"
                 size={24}
-                color={KColors.palette.primary.w400}
+                color={KColors.primary.normal}
               />
             </KContainer.Touchable>
             <KContainer.Touchable
@@ -101,10 +111,9 @@ const Inbox = memo(
               activeOpacity={0.7}
             >
               <KImage.VectorIcons
-                name="account-group-outline"
-                provider="MaterialCommunityIcons"
+                name="user-three-o"
                 size={24}
-                color={KColors.palette.primary.w400}
+                color={KColors.primary.normal}
               />
             </KContainer.Touchable>
           </KContainer.View>
@@ -114,13 +123,13 @@ const Inbox = memo(
     );
 
     return (
-      <KContainer.Page flex edges={['top', 'bottom']}>
+      <KContainer.Page flex edges={['top']}>
         <TabView
           navigationState={{ index, routes }}
           renderScene={renderScene}
           renderTabBar={renderTabBar}
           onIndexChange={setIndex}
-          swipeEnabled={routes.length > 1}
+          lazy
         />
       </KContainer.Page>
     );
@@ -133,25 +142,28 @@ export default Inbox;
 
 const styles = StyleSheet.create({
   tabBar: {
-    borderBottomWidth: 0.5,
-    borderBottomColor: KColors.palette.gray.w100,
-    paddingHorizontal: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: KColors.border.light,
+    paddingTop: 2,
   },
   tabItem: {
-    position: 'relative',
-    paddingTop: 2,
-    paddingBottom: 0,
+    height: 40,
+    marginHorizontal: KSpacingValue['0.75rem'],
+    justifyContent: 'center',
+    alignItems: 'center',
   },
-  activeIndicator: {
+  indicator: {
+    height: 3,
+    backgroundColor: KColors.primary.normal,
+    width: '100%',
+    borderRadius: KRadiusValue.x,
     position: 'absolute',
-    bottom: 0,
+    bottom: -1,
     left: 0,
     right: 0,
-    height: 3,
-    borderRadius: 4,
-    backgroundColor: KColors.palette.primary.w400,
   },
   actionGroup: {
-    gap: 4,
+    gap: KSpacingValue['0.25rem'],
+    paddingRight: KSpacingValue['0.5rem'],
   },
 });

package/src/translation/resources/i18n.ts

@@ -163,7 +163,15 @@ const i18nKey: Record<string, string> = {
   'search_conversation:empty_hint': 'Bạn có thể tìm kiếm theo liên hệ',
   'view_all': 'Xem tất cả',
   'search_message:revoked_message': 'Tin nhắn đã được thu hồi',
+  'chat:no_permission': 'Bạn không có quyền này',
   'chat:no_send_permission': 'Bạn không có quyền gửi tin nhắn',
+  'community': 'Cộng đồng',
+  'group:member_count': '{{count}} thành viên',
+  'group:access': 'Truy cập',
+  'group:join': 'Tham gia',
+  'group:not_in_group': 'Bạn cần tham gia nhóm để gửi tin nhắn',
+  'group:cannot_send_message': 'Bạn không thể gửi tin nhắn vào nhóm này',
+  'group:joined_group': 'Đã tham gia nhóm {{groupName}}',
 };
 
 export default {