@droppii-org/chat-mobile 0.2.46 → 0.2.48

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

@@ -1,10 +1,7 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { DeviceEventEmitter, View } from 'react-native';
+import { DeviceEventEmitter } from 'react-native';
 
-import {
-  useKeyboardChatComposerInset,
-  useKeyboardScrollToEnd,
-} from '@legendapp/list/keyboard';
+import { useKeyboardScrollToEnd } from '@legendapp/list/keyboard';
 import type { LegendListRef } from '@legendapp/list/react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { KContainer } from '@droppii/libs';
@@ -114,13 +111,15 @@ const ChatDetail = memo(
       usePinMessage(conversationId);
 
     useEffect(() => {
-      if (conversationId) {
-        useConversationStore.getState().setCurrentConversation(conversationId);
-      }
+      useConversationStore
+        .getState()
+        .setCurrentConversation(conversationId, targetUserId, targetGroupId);
       return () => {
-        useConversationStore.getState().setCurrentConversation(undefined);
+        useConversationStore
+          .getState()
+          .setCurrentConversation(undefined, undefined, undefined);
       };
-    }, [conversationId]);
+    }, [conversationId, targetUserId, targetGroupId]);
 
     const resolvedShowAddMember =
       showAddMember ?? shouldShowAddMember(conversation);
@@ -128,9 +127,6 @@ const ChatDetail = memo(
     const insets = useSafeAreaInsets();
 
     const listRef = useRef<LegendListRef>(null);
-    const composerRef = useRef<View>(null);
-    const { contentInsetEndAdjustment, onComposerLayout } =
-      useKeyboardChatComposerInset(listRef, composerRef);
     const { freeze, scrollMessageToEnd } = useKeyboardScrollToEnd({
       listRef,
     });
@@ -166,6 +162,7 @@ const ChatDetail = memo(
       <KContainer.Page flex edges={['bottom']}>
         <ChatDetailHeader
           conversationId={conversationId}
+          targetUserId={targetUserId}
           showAddMember={resolvedShowAddMember}
           onBack={onBack ?? handleBackDefault}
           onPressSearch={onPressSearch}
@@ -195,7 +192,6 @@ const ChatDetail = memo(
           onPressUrl={handlePressUrl}
           onLongPress={handleMessageLongPress}
           listRef={listRef}
-          contentInsetEndAdjustment={contentInsetEndAdjustment}
           freeze={freeze}
           scrollMessageToEnd={scrollMessageToEnd}
           keyboardOffset={insets.bottom}
@@ -205,8 +201,6 @@ const ChatDetail = memo(
           isEmptyMessage={messages?.length === 0}
           pannelActions={pannelActions}
           isDisableCompose={botStatus === DBotStatusValue.INACTIVE}
-          composerRef={composerRef}
-          onComposerLayout={onComposerLayout}
         />
 
         <MediaViewerModal ref={mediaViewerRef} />

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

@@ -11,11 +11,13 @@ import { NamePrefixIcon } from '../../components/ThreadCard/NamePrefixIcon';
 import type { ChatDetailHeaderProps } from './types';
 import { useConversation } from '../../store';
 import { getConversationSubtitle } from './conversationHeader.utils';
+import { useGetUsersInfo } from '../../hooks/users/useGetUsersInfo';
 
 const ChatDetailHeader = memo(
   ({
     showAddMember = false,
     conversationId,
+    targetUserId,
     onBack,
     onPressSearch,
     onPressAddMember,
@@ -23,6 +25,20 @@ const ChatDetailHeader = memo(
     onPressAvatar,
   }: ChatDetailHeaderProps) => {
     const conversation = useConversation(conversationId);
+    const { data: usersInfo } = useGetUsersInfo(
+      targetUserId ? [targetUserId] : []
+    );
+
+    const { faceURL, showName } = useMemo(() => {
+      const userInfo = usersInfo?.[0];
+      const resolvedFaceURL = conversation?.faceURL || userInfo?.faceURL;
+      const resolvedShowName = conversation?.showName || userInfo?.nickname;
+
+      return {
+        faceURL: resolvedFaceURL,
+        showName: resolvedShowName,
+      };
+    }, [conversation, usersInfo]);
     const rightButtons = useMemo(() => {
       const buttons = [
         {
@@ -76,8 +92,8 @@ const ChatDetailHeader = memo(
             activeOpacity={0.7}
           >
             <AvatarSection
-              avatar={conversation?.faceURL ?? null}
-              fullName={conversation?.showName || ''}
+              avatar={faceURL || null}
+              fullName={showName || ''}
               peerType={conversation?.peerType}
             />
 
@@ -90,7 +106,7 @@ const ChatDetailHeader = memo(
                   numberOfLines={1}
                   flex
                 >
-                  {conversation?.showName || ''}
+                  {showName || ''}
                 </KLabel.Text>
               </KContainer.View>
               {!!conversation && (
@@ -106,7 +122,7 @@ const ChatDetailHeader = memo(
           </KContainer.Touchable>
         </KContainer.View>
       ),
-      [onBack, onPressAvatar, conversation]
+      [onBack, onPressAvatar, conversation, faceURL, showName]
     );
 
     return (

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

@@ -38,7 +38,6 @@ import { ChatMessageAPI } from '../../services';
 
 interface ChatListLegendInternalProps extends ChatListProps {
   listRef: RefObject<LegendListRef | null>;
-  contentInsetEndAdjustment: SharedValue<number>;
   freeze: SharedValue<boolean>;
   scrollMessageToEnd: (opts: {
     animated: boolean;
@@ -62,7 +61,6 @@ export const ChatListLegend = memo(
     onPressUrl,
     onLongPress,
     listRef,
-    contentInsetEndAdjustment,
     freeze,
     scrollMessageToEnd,
     keyboardOffset,
@@ -411,7 +409,6 @@ export const ChatListLegend = memo(
           alignItemsAtEnd
           maintainVisibleContentPosition={maintainVisiblePositionConfig}
           maintainScrollAtEnd={maintainScrollConfig}
-          contentInsetEndAdjustment={contentInsetEndAdjustment}
           freeze={freeze}
           keyboardOffset={keyboardOffset}
           scrollEventThrottle={16}

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

@@ -45,6 +45,7 @@ export interface ChatDetailHeaderProps {
   onPressMenu?: () => void;
   onPressAvatar?: () => void;
   conversationId: string;
+  targetUserId?: string;
 }
 
 export interface ChatQuickActionsRenderParams {

package/src/screens/inbox/Inbox.tsx

@@ -8,13 +8,18 @@ interface InboxProps {
   onPressThread?: (item: string) => void;
   onPressSearch?: () => void;
   onPressEdit?: () => void;
-  onPressGroup?: () => void;
+  onPressContact?: () => void;
 }
 
 type TabRoute = { key: string; title: string };
 
 const Inbox = memo(
-  ({ onPressThread, onPressSearch, onPressEdit, onPressGroup }: InboxProps) => {
+  ({
+    onPressThread,
+    onPressSearch,
+    onPressEdit,
+    onPressContact,
+  }: InboxProps) => {
     const [index, setIndex] = useState(0);
     const [routes] = useState<TabRoute[]>([
       { key: 'messages', title: 'Tin nhắn' },
@@ -91,7 +96,7 @@ const Inbox = memo(
               />
             </KContainer.Touchable>
             <KContainer.Touchable
-              onPress={onPressGroup}
+              onPress={onPressContact}
               padding="0.5rem"
               activeOpacity={0.7}
             >
@@ -105,7 +110,7 @@ const Inbox = memo(
           </KContainer.View>
         </KContainer.View>
       ),
-      [onPressSearch, onPressEdit, onPressGroup]
+      [onPressSearch, onPressEdit, onPressContact]
     );
 
     return (

package/src/services/endpoints.ts

@@ -16,18 +16,18 @@ export const ENDPOINTS = {
     get urlMetadata() {
       return getApiEndpoint('urlMetadata');
     },
-    conversationFlow: (id: string) =>
-      `${getApiEndpoint('conversationFlow')}/${id}`,
+    conversationFlow: (id: string) => `${getApiEndpoint('conversation')}/${id}`,
     resetConversationFlow: (id: string) =>
-      `${getApiEndpoint('conversationFlow')}/${id}/bot-flows/reset`,
+      `${getApiEndpoint('conversation')}/${id}/bot-flows/reset`,
     runConversationFlow: (id: string) =>
-      `${getApiEndpoint('conversationFlow')}/${id}/bot-flows/run`,
+      `${getApiEndpoint('conversation')}/${id}/bot-flows/run`,
     getConversationByBotId: (botId: string) =>
       `${getApiEndpoint('bot')}/${botId}/conversation`,
     conversationFlowMainMenu: (id: string) =>
-      `${getApiEndpoint('conversationFlow')}/${id}/bot-flows/main-menu`,
+      `${getApiEndpoint('conversation')}/${id}/bot-flows/main-menu`,
     getConversationStatusByBotId: (botId: string) =>
       `${getApiEndpoint('bot')}/${botId}`,
+    createConversation: () => getApiEndpoint('conversation'),
   },
   uploaderService: {
     get uploadImage() {

package/src/store/conversation.ts

@@ -1,12 +1,27 @@
 import { create } from 'zustand';
 import { sortConversation } from '../utils/conversation';
 import type { ConversationItem } from '@droppii/openim-rn-client-sdk';
+import type {
+  CreateConversationParams,
+  CreateConversationResponse,
+} from '../types/chat';
+import { apiInstance } from '../services/apis';
+import { ENDPOINTS } from '../services/endpoints';
+import type { BaseResponse } from '../types/auth';
 
 type ConversationID = string;
 
 export interface ConversationStore {
   currentConversationId?: ConversationID;
-  setCurrentConversation(id?: ConversationID): void;
+  currentUserId?: string;
+  currentGroupId?: string;
+  isCreatingConversation?: boolean;
+  createConversation: (params: CreateConversationParams) => Promise<void>;
+  setCurrentConversation(
+    id?: ConversationID,
+    userId?: string,
+    groupId?: string
+  ): void;
   getCurrentConversation(): ConversationItem | undefined;
   list: ConversationID[];
   map: Record<ConversationID, ConversationItem>;
@@ -26,8 +41,12 @@ export const useConversationStore = create<ConversationStore>()((set, get) => ({
   list: [],
   map: {},
   newConversationSignal: 0,
-  setCurrentConversation(id) {
-    set({ currentConversationId: id });
+  setCurrentConversation(id, userId, groupId) {
+    set({
+      currentConversationId: id,
+      currentUserId: userId,
+      currentGroupId: groupId,
+    });
   },
   getCurrentConversation() {
     const id = get().currentConversationId;
@@ -68,12 +87,27 @@ export const useConversationStore = create<ConversationStore>()((set, get) => ({
       list: get().list.filter((item) => item !== id),
     });
   },
+  createConversation: async (params) => {
+    set({ isCreatingConversation: true });
+    const res = await apiInstance?.post<
+      BaseResponse<CreateConversationResponse>
+    >(ENDPOINTS.chatService.createConversation(), params);
+    if (res?.data?.data?.conversationId) {
+      set({
+        currentConversationId: res?.data?.data?.conversationId,
+        isCreatingConversation: false,
+      });
+    } else {
+      set({ isCreatingConversation: false });
+    }
+  },
   reset() {
     set({
       currentConversationId: undefined,
       list: [],
       map: {},
       newConversationSignal: 0,
+      isCreatingConversation: false,
     });
   },
 }));

package/src/types/chat.ts

@@ -218,3 +218,24 @@ export type CustomElemOrderData = {
 export type CustomMessagePayload =
   | { type: typeof CustomMessageType.Order; data: CustomElemOrderData }
   | { type: typeof CustomMessageType.Product; data: Record<string, unknown> };
+
+export interface CreateConversationParams {
+  peerUserId: string;
+  chatCategory: DChatCategory;
+  applicationType: DChatApplicationType;
+  chatType: 'SINGLE' | 'GROUP';
+}
+
+export interface CreateConversationResponse {
+  conversationId: string;
+  groupId?: string;
+  groupName?: string;
+  groupAvatar?: string;
+  chatCategory: DChatCategory;
+  applicationType: DChatApplicationType;
+  chatType: 'SINGLE' | 'GROUP';
+  members?: {
+    userId: string;
+    memberRole?: string;
+  }[];
+}

package/src/utils/message.ts

@@ -100,7 +100,8 @@ export const hasNewHistoryMessages = (
 
 export const belongsToConversation = (
   message: MessageItem,
-  conversationId: string
+  conversationId?: string,
+  targetUserId?: string
 ): boolean => {
   switch (message.sessionType) {
     case SessionType.Single: {
@@ -114,7 +115,11 @@ export const belongsToConversation = (
         message.recvID,
         message.sendID
       );
-      return conversationId === forwardId || conversationId === reverseId;
+      return conversationId
+        ? conversationId === forwardId || conversationId === reverseId
+        : targetUserId
+          ? message.sendID === targetUserId || message.recvID === targetUserId
+          : false;
     }
 
     case SessionType.Group: {