@droppii-org/chat-mobile 0.2.37 → 0.2.39

package/src/components/messages/quotedMessage/index.tsx

@@ -0,0 +1,201 @@
+import { memo, useCallback, useMemo } from 'react';
+import { messageStyles } from '../styles';
+import { formatMessageTime, type BaseLegendMessageProps } from '../types';
+import {
+  KColors,
+  KContainer,
+  KImage,
+  KLabel,
+  KRadiusValue,
+  KSpacingValue,
+} from '@droppii/libs';
+import { StyleSheet } from 'react-native';
+import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
+import { MessageType } from '@droppii/openim-rn-client-sdk';
+import {
+  getMessagePreviewParts,
+  getReplySenderName,
+  parseUrlMetadata,
+} from '../../../utils/messageUtils';
+import { getFileIcon, getMimeType } from '../../../utils/imageUtils';
+import { useUserStore } from '../../../store';
+import { useChatDetailContext } from '../../../context';
+
+interface QuotedMessageProps extends BaseLegendMessageProps {
+  onPressQuotedMessage?: (clientMsgId: string) => void;
+}
+
+const QuotedMessage = memo((props: QuotedMessageProps) => {
+  const { message, isOutgoing, onPressQuotedMessage, createdAtTime } =
+    props || {};
+
+  const { conversation } = useChatDetailContext();
+
+  const currentUserId = useUserStore((s) => s.user?.userID);
+
+  const quotedMessage = message?.quoteElem?.quoteMessage;
+
+  const messagePreview = getMessagePreviewParts(quotedMessage);
+
+  const timeLabel = formatMessageTime(createdAtTime);
+
+  const imageUrl = useMemo(() => {
+    switch (quotedMessage?.contentType) {
+      case MessageType.PictureMessage:
+        return quotedMessage?.pictureElem?.snapshotPicture?.url || '';
+      case MessageType.VideoMessage:
+        return quotedMessage?.videoElem?.snapshotUrl || '';
+      case MessageType.UrlTextMessage:
+        const metadata = parseUrlMetadata(quotedMessage?.ex);
+        return metadata?.image || '';
+      default:
+        return '';
+    }
+  }, [quotedMessage]);
+
+  const iconSource = useMemo(() => {
+    if (quotedMessage?.contentType !== MessageType.FileMessage) return '';
+    const mimeType = getMimeType(quotedMessage?.fileElem?.fileName || '');
+    return getFileIcon(mimeType);
+  }, [quotedMessage]);
+
+  const handlePressQuotedMessage = useCallback(() => {
+    onPressQuotedMessage?.(quotedMessage?.clientMsgID || '');
+  }, [quotedMessage, onPressQuotedMessage]);
+
+  return (
+    <>
+      <KContainer.View
+        style={[
+          messageStyles.bubble,
+          styles.container,
+          isOutgoing ? messageStyles.bubbleSent : messageStyles.bubbleReceived,
+        ]}
+      >
+        <KContainer.Touchable
+          style={styles.quotedContainer}
+          onPress={handlePressQuotedMessage}
+        >
+          <KContainer.View style={styles.dot} />
+          <KContainer.VisibleView visible={!!imageUrl}>
+            <KContainer.View style={styles.imageContainer}>
+              <KImage.Base uri={imageUrl} style={styles.imageContainer} />
+              <KContainer.VisibleView
+                visible={
+                  quotedMessage?.contentType === MessageType.VideoMessage
+                }
+              >
+                <KContainer.View style={styles.playIconContainer}>
+                  <KContainer.View style={styles.playIcon}>
+                    <KImage.VectorIcons
+                      name="play-b"
+                      size={12}
+                      color={KColors.white}
+                    />
+                  </KContainer.View>
+                </KContainer.View>
+              </KContainer.VisibleView>
+            </KContainer.View>
+          </KContainer.VisibleView>
+          <KContainer.VisibleView visible={!!iconSource}>
+            <KImage.Base
+              uri={iconSource}
+              style={styles.icon}
+              resizeMode="contain"
+            />
+          </KContainer.VisibleView>
+          <KContainer.View flexS={1} style={styles.content}>
+            <KLabel.Text typo="TextNmMedium" numberOfLines={1}>
+              {getReplySenderName(
+                quotedMessage,
+                currentUserId,
+                conversation,
+                true
+              )}
+            </KLabel.Text>
+            <KLabel.Text
+              typo="TextSmNormal"
+              color={KColors.gray.light}
+              numberOfLines={1}
+              {...messagePreview.textProps}
+            >
+              {messagePreview.text}
+            </KLabel.Text>
+          </KContainer.View>
+        </KContainer.Touchable>
+        <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
+          {message?.quoteElem?.text || ''}
+        </KLabel.Text>
+      </KContainer.View>
+
+      <KContainer.View row alignItems style={styles.timeLabel}>
+        {!isOutgoing && timeLabel ? (
+          <KLabel.Text
+            typo="TextXsNormal"
+            color={CHAT_BUBBLE_COLORS.timestamp}
+            marginL="0.25rem"
+          >
+            {timeLabel}
+          </KLabel.Text>
+        ) : null}
+      </KContainer.View>
+    </>
+  );
+});
+
+QuotedMessage.displayName = 'QuotedMessage';
+
+export default QuotedMessage;
+
+const styles = StyleSheet.create({
+  container: {
+    gap: KSpacingValue['0.25rem'],
+  },
+  quotedContainer: {
+    backgroundColor: KColors.white,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: KSpacingValue['0.5rem'],
+    borderTopRightRadius: KRadiusValue['3x'],
+    borderBottomRightRadius: KRadiusValue['3x'],
+    paddingRight: KSpacingValue['0.5rem'],
+    maxWidth: '100%',
+  },
+  dot: {
+    width: 3,
+    height: '100%',
+    backgroundColor: KColors.palette.grayCool.w200,
+    borderRadius: KRadiusValue.x,
+    marginRight: -2,
+  },
+  content: {
+    paddingHorizontal: KSpacingValue['0.25rem'],
+    paddingVertical: KSpacingValue['0.25rem'],
+  },
+  icon: {
+    width: 24,
+    height: 24,
+  },
+  imageContainer: {
+    width: 42,
+    height: 42,
+    borderRadius: KRadiusValue['2x'],
+  },
+  playIconContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  playIcon: {
+    borderRadius: 8,
+    padding: KSpacingValue['0.25rem'],
+    backgroundColor: KColors.hexToRgba(KColors.black, 0.6),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  timeLabel: { gap: 4, marginTop: 2 },
+});

package/src/components/messages/types.ts

@@ -1,8 +1,8 @@
-import type { DMessageItem } from '../../types/chat';
 import type { MediaItem } from '../../hooks/useMediaViewer';
+import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 
 export interface BaseLegendMessageProps {
-  message: DMessageItem;
+  message: MessageItem;
   isOutgoing: boolean;
   createdAtTime: number;
   onMediaPress?: (items: MediaItem[], index?: number) => void;

package/src/context/ChatContext.tsx

@@ -12,9 +12,10 @@ import OpenIMSDK, {
   type ConversationItem,
 } from '@droppii/openim-rn-client-sdk';
 import Toast from 'react-native-toast-message';
-import { useUserStore } from '../store';
 import { useChatSdk } from '../core';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import uuid from 'react-native-uuid';
+import { useUserStore } from '../store';
 
 export const ChatContext = createContext<ChatContextType | undefined>(
   undefined
@@ -35,30 +36,35 @@ const ChatProviderInner = ({
   getChatToken,
   onFlashMessagePress,
 }: ChatProviderProps) => {
-  const connectStatus = useUserStore((state) => state.connectStatus);
   const [isShowFLashMessage, setShow] = useState(true);
 
-  const handleSdkLogin = useCallback(async () => {
-    if (!!getChatToken && connectStatus === LoginStatus.Logout) {
-      const res = await getChatToken();
-      if (!!res?.id && !!res?.token) {
-        OpenIMSDK.login({
-          token: res.token,
-          userID: res.id,
-        })
-          .then(() => {
-            useUserStore.getState().updateConnectStatus(LoginStatus.Logged);
-          })
-          .catch((error) => {
-            console.error('Failed to login', error);
-          });
+  const handleLoginSdk = useCallback(async () => {
+    if (getChatToken) {
+      try {
+        const res = await getChatToken();
+        const loginStatus = await OpenIMSDK.getLoginStatus();
+        if (!!res?.id && !!res?.token && loginStatus === LoginStatus.Logout) {
+          await OpenIMSDK.login(
+            {
+              token: res.token,
+              userID: res.id,
+            },
+            uuid.v4()
+          );
+          const userInfo = await OpenIMSDK.getSelfUserInfo();
+          if (userInfo) {
+            useUserStore.getState().setUser(userInfo);
+          }
+        }
+      } catch (error) {
+        console.error('Failed to login chat sdk', error);
       }
     }
-  }, [getChatToken, connectStatus]);
+  }, [getChatToken]);
 
   useEffect(() => {
-    handleSdkLogin();
-  }, [handleSdkLogin]);
+    handleLoginSdk();
+  }, [handleLoginSdk]);
 
   const onPressFlashMessage = useCallback(
     (c: ConversationItem) => {
@@ -68,26 +74,25 @@ const ChatProviderInner = ({
   );
 
   const setIsShowFLashMessage = useCallback((v: boolean) => {
-    console.log('setIsShowFLashMessage');
     setShow(v);
   }, []);
 
-  const value = useMemo(
+  const value: ChatContextType = useMemo(
     () => ({
       logGA,
       applicationType,
-      getChatToken,
       onPressFlashMessage,
-      isShowFLashMessage: isShowFLashMessage,
-      setIsShowFLashMessage: setIsShowFLashMessage,
+      isShowFLashMessage,
+      setIsShowFLashMessage,
+      handleLoginSdk,
     }),
     [
       logGA,
       applicationType,
-      getChatToken,
       onPressFlashMessage,
       isShowFLashMessage,
       setIsShowFLashMessage,
+      handleLoginSdk,
     ]
   );
 

package/src/context/ChatDetailContext.tsx

@@ -13,7 +13,7 @@ import {
 } from '../types/chat';
 import { fechtCurrentConversationFlow } from '../hooks/flows/useCurrentConversationFlow';
 import { useConversationStore } from '../store';
-import { PeerType } from '@droppii/openim-rn-client-sdk';
+import { PeerType, type MessageItem } from '@droppii/openim-rn-client-sdk';
 import {
   DFlowContext,
   NodeTypes,
@@ -27,11 +27,12 @@ import { CONTEXT_BUTTON_PREFIX, isContextButton } from '../utils/flows';
 export const ChatDetailContext = createContext<ChatDetailContextType>({
   isBotConversation: false,
   conversationFlow: undefined,
-  refetchConversationFlow: () => {},
   setConverationFlowStep: () => {},
   flowState: undefined,
   runButtonContext: () => Promise.resolve(false),
   conversation: undefined,
+  quotedMessage: undefined,
+  setQuotedMessage: () => {},
 });
 
 export const useChatDetailContext = (): ChatDetailContextType => {
@@ -55,6 +56,10 @@ export const ChatDetailProvider = ({ children }: ChatDetailProviderProps) => {
     IConversationFlow | undefined
   >(undefined);
 
+  const [quotedMessage, setQuotedMessage] = useState<MessageItem | undefined>(
+    undefined
+  );
+
   const flowState = useMemo(() => {
     return conversationFlow
       ? conversationFlow?.flowCurrentStep?.data?.children?.some(
@@ -124,12 +129,13 @@ export const ChatDetailProvider = ({ children }: ChatDetailProviderProps) => {
     <ChatDetailContext.Provider
       value={{
         conversationFlow,
-        refetchConversationFlow: () => {},
         setConverationFlowStep,
         isBotConversation,
         flowState,
         runButtonContext,
         conversation,
+        quotedMessage,
+        setQuotedMessage,
       }}
     >
       {children}

package/src/core/useChatListener.ts

@@ -1,5 +1,6 @@
 import OpenIMSDK, {
   MessageReceiveOptType,
+  MessageType,
   OpenIMEvent,
   type ConversationItem,
   type GroupMemberItem,
@@ -11,12 +12,14 @@ import { useCallback, useEffect } from 'react';
 import { useConversationStore } from '../store/conversation';
 import { ToastFlashMessage } from '../utils/toastFlashMessage';
 import { useUserStore } from '../store/user';
-import { getLastMessageText } from '../utils/messageUtils';
+import { getLastMessageText, truncateMiddle } from '../utils/messageUtils';
 import { useChatContext } from '../context';
 import isEmpty from 'lodash/isEmpty';
 import { markMessageRevoked, useMessageStore } from '../store/message';
 import { syncPinnedMessagesOnEvent } from '../hooks/message/usePinMessage';
 
+const MAX_TOAST_FILE_NAME_LENGTH = 40;
+
 export const useChatListener = () => {
   const updateOneMessage = useMessageStore((state) => state.updateOneMessage);
   const currentUserId = useUserStore((s) => s.user?.userID);
@@ -37,19 +40,37 @@ export const useChatListener = () => {
 
   const onConversationChanged = useCallback(
     (conversations: ConversationItem[]) => {
-      // console.log('isShowFLashMessage', isShowFLashMessage);
-      useConversationStore.getState().updateConversations(conversations);
+      const oldMap = useConversationStore.getState().map;
       if (isShowFLashMessage) {
         for (const conversation of conversations) {
+          const oldConversation = oldMap[conversation.conversationID];
           if (
-            conversation.recvMsgOpt === MessageReceiveOptType.NotNotify &&
-            !isEmpty(conversation?.latestMsg)
+            conversation.recvMsgOpt === MessageReceiveOptType.NotNotify ||
+            isEmpty(conversation?.latestMsg) ||
+            oldConversation?.latestMsgSendTime ===
+              conversation?.latestMsgSendTime
           ) {
             continue;
           }
-          const latestMsg = JSON.parse(conversation.latestMsg || '{}');
+          const latestMsg: MessageItem = JSON.parse(
+            conversation.latestMsg || '{}'
+          );
+          const messageForToast =
+            latestMsg.contentType === MessageType.FileMessage &&
+            latestMsg.fileElem?.fileName
+              ? {
+                  ...latestMsg,
+                  fileElem: {
+                    ...latestMsg.fileElem,
+                    fileName: truncateMiddle(
+                      latestMsg.fileElem.fileName,
+                      MAX_TOAST_FILE_NAME_LENGTH
+                    ),
+                  },
+                }
+              : latestMsg;
           const lastMessageText = getLastMessageText(
-            latestMsg,
+            messageForToast,
             currentUserId,
             conversation
           );
@@ -63,6 +84,7 @@ export const useChatListener = () => {
             },
           });
         }
+        useConversationStore.getState().updateConversations(conversations);
       }
     },
     [currentUserId, isShowFLashMessage, onPressFlashMessage]

package/src/core/useUserListener.ts

@@ -1,45 +1,28 @@
 import OpenIMSDK, {
-  LoginStatus,
   OpenIMEvent,
   type OpenIMEventBaseErrorType,
 } from '@droppii/openim-rn-client-sdk';
 import { useCallback, useEffect } from 'react';
 import { useUserStore } from '../store';
-import { SyncStatus } from '../types/auth';
-import { ChatAPI } from '../services';
+import { ConnectStatus, SyncStatus } from '../types/chat';
+import { useChatContext } from '../context';
 
 export const useUserListener = () => {
-  const isLoggedIn = useUserStore(
-    (state) => state.connectStatus === LoginStatus.Logged
-  );
-
-  const fetchAndUpdateUser = useCallback(async () => {
-    try {
-      const user = await ChatAPI.getUser();
-      useUserStore.getState().setUser(user);
-    } catch (error) {
-      console.error('OpenIM get user failed', error);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (isLoggedIn) {
-      fetchAndUpdateUser();
-    }
-  }, [isLoggedIn, fetchAndUpdateUser]);
+  const { handleLoginSdk } = useChatContext();
 
   const onConnecting = useCallback(() => {
     console.log('[Listener] OnConnecting');
-    useUserStore.getState().updateConnectStatus(LoginStatus.Logging);
+    useUserStore.getState().updateConnectStatus(ConnectStatus.Connecting);
   }, []);
 
   const onConnectSuccess = useCallback(() => {
     console.log('[Listener] OnConnectSuccess');
-    useUserStore.getState().updateConnectStatus(LoginStatus.Logged);
+    useUserStore.getState().updateConnectStatus(ConnectStatus.Connected);
   }, []);
 
   const onConnectFailed = useCallback((data: OpenIMEventBaseErrorType) => {
     console.log('[Listener] OnConnectFailed', data);
+    useUserStore.getState().updateConnectStatus(ConnectStatus.Disconnected);
   }, []);
 
   const onSyncServerStart = useCallback((isSyncing: boolean) => {
@@ -59,7 +42,8 @@ export const useUserListener = () => {
 
   const onUserToken = useCallback(() => {
     console.log('[Listener] OnUserToken expired/invalid');
-  }, []);
+    handleLoginSdk();
+  }, [handleLoginSdk]);
 
   useEffect(() => {
     // User
@@ -88,5 +72,5 @@ export const useUserListener = () => {
       OpenIMSDK.off(OpenIMEvent.OnSyncServerFailed, onSyncServerFailed);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [onUserToken]);
 };

package/src/hooks/message/useSendMessage.ts

@@ -5,6 +5,7 @@ import type {
   CustomMsgParams,
   MessageItem,
   OfflinePush,
+  QuoteMsgParams,
 } from '@droppii/openim-rn-client-sdk';
 import { MessageStatus, MessageType } from '@droppii/openim-rn-client-sdk';
 import { extractUrls } from '../../utils/url';
@@ -14,7 +15,7 @@ import {
   type CustomMessagePayload,
   type IMessageItemEx,
 } from '../../types/chat';
-import { useChatContext } from '../../context';
+import { useChatContext, useChatDetailContext } from '../../context';
 import { generateContentBasedOnMessageType } from '../../utils/conversation';
 import { markMessageRevoked, useMessageStore } from '../../store/message';
 import uuid from 'react-native-uuid';
@@ -40,6 +41,8 @@ export const useSendMessage = () => {
   const pushNewMessage = useMessageStore((state) => state.pushNewMessage);
   const updateOneMessage = useMessageStore((state) => state.updateOneMessage);
   const deleteOneMessage = useMessageStore((state) => state.deleteOneMessage);
+  const { quotedMessage, setQuotedMessage } = useChatDetailContext();
+
   const dispatchSend = useCallback(
     async (
       message: MessageItem,
@@ -91,12 +94,18 @@ export const useSendMessage = () => {
       const hasPreview = !!urlMetadata?.url;
 
       //text msg
-      if (hasText || hasPreview) {
+      if (hasText) {
         const urls = hasText ? extractUrls(plainText) : [];
         const isUrlMessage = urls.length > 0 || hasPreview;
         let message: MessageItem | null = null;
 
-        if (isUrlMessage) {
+        if (quotedMessage) {
+          message = await createQuotedMessage({
+            text: plainText || '',
+            message: quotedMessage,
+          });
+          setQuotedMessage(undefined);
+        } else if (isUrlMessage) {
           message = await createUrlTextMessage(plainText || '', urls);
         } else if (hasText) {
           message = await createTextMessage(plainText);
@@ -137,7 +146,7 @@ export const useSendMessage = () => {
         );
       }
     },
-    [applicationType, dispatchSend]
+    [applicationType, dispatchSend, quotedMessage, setQuotedMessage]
   );
 
   const retryMessage = useCallback(
@@ -274,3 +283,15 @@ export const createCustomMessage = async (params: CustomMsgParams) => {
     });
   return customMessage;
 };
+
+export const createQuotedMessage = async (params: QuoteMsgParams) => {
+  let quotedMessage = await OpenIMSDK.createQuoteMessage(params, uuid.v4())
+    .then((data) => {
+      return data;
+    })
+    .catch(({ errCode, errMsg }) => {
+      console.error('createQuotedMessage', errCode, errMsg);
+      return null;
+    });
+  return quotedMessage;
+};

package/src/hooks/useChatMessages.ts

@@ -4,7 +4,6 @@ import OpenIMSDK, {
 } from '@droppii/openim-rn-client-sdk';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { ChatMessageAPI } from '../services/message';
-import type { DMessageItem } from '../types/chat';
 import {
   belongsToConversation,
   hasNewHistoryMessages,
@@ -71,8 +70,7 @@ export function useChatMessages({
       }
 
       if (historyResult.status === 'fulfilled') {
-        const initialMessages = historyResult.value
-          .messageList as DMessageItem[];
+        const initialMessages = historyResult.value.messageList;
         setMessages(
           mergeMessages([], initialMessages),
           !historyResult.value.isEnd
@@ -92,7 +90,7 @@ export function useChatMessages({
         );
         const localMessages = (localResult?.searchResultItems ?? []).flatMap(
           (item: any) => item.messageList ?? []
-        ) as DMessageItem[];
+        );
         console.log(
           '[useChatMessages] searchLocalMessages fallback result:',
           localMessages.length,
@@ -126,7 +124,7 @@ export function useChatMessages({
         }
       );
 
-      const incoming = history.messageList as DMessageItem[];
+      const incoming = history.messageList;
       const hasNew = hasNewHistoryMessages(messages, incoming);
 
       if (hasNew) {
@@ -166,7 +164,7 @@ export function useChatMessages({
         }
       );
 
-      const incoming = history.messageList as DMessageItem[];
+      const incoming = history.messageList;
       const hasNew = incoming.length > 0;
 
       if (hasNew) {

package/src/index.tsx

@@ -31,12 +31,11 @@ export { Inbox } from './screens/inbox';
 export { default as MediaViewerScreen } from './screens/MediaView';
 export * from './screens/chat-detail';
 
-// export type {
-//   PeerType,
-//   MessageItem,
-//   ConversationItem,
-// } from '@droppii/openim-rn-client-sdk';
-export type { ConversationItem } from '@droppii/openim-rn-client-sdk';
+export type {
+  PeerType,
+  MessageItem,
+  ConversationItem,
+} from '@droppii/openim-rn-client-sdk';
 export { LoginStatus, MessageType } from '@droppii/openim-rn-client-sdk';
 export * from './screens/chat-detail';
 export type {

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

@@ -32,6 +32,7 @@ import { ReactFlowsNodeTypes } from '../../types/flows';
 import { useAttachmentMapping } from './hooks/useAttachmentMapping';
 import type { AttachmentType } from '../../types/attachment';
 import { useChatCompose } from '../../hooks/useChatCompose';
+import { ChatCurrentQuotedMessage } from './ChatCurrentQuotedMessage';
 
 interface ChatComposerInternalProps {
   isEmptyMessage?: boolean;
@@ -213,6 +214,7 @@ export const ChatComposer = memo(
 
     return (
       <KContainer.View background={'rgba(131, 137, 157, 0.05)'}>
+        <ChatCurrentQuotedMessage />
         <ChatQuickActions
           visible
           actions={DEFAULT_QUICK_ACTIONS}