@droppii-org/chat-mobile 0.2.4 → 0.2.7

package/src/components/ThreadCard/NamePrefixIcon.tsx

@@ -1,8 +1,8 @@
 import { memo } from 'react';
 import { Image, StyleSheet } from 'react-native';
 import { KContainer, KImage, KColors } from '@droppii/libs';
-import { DChatCategory, DChatType } from '../../types/chat';
 import Images from '../../assets/images';
+import { PeerType } from '@droppii/openim-rn-client-sdk';
 
 const styles = StyleSheet.create({
   icon: {
@@ -12,46 +12,35 @@ const styles = StyleSheet.create({
 });
 
 interface NamePrefixIconProps {
-  chatCategory?: DChatCategory;
-  chatType?: DChatType;
+  peerType?: PeerType | string;
 }
 
-export const NamePrefixIcon = memo(
-  ({ chatCategory, chatType }: NamePrefixIconProps) => {
-    if (chatCategory === DChatCategory.BIZ_BOT_CRM) {
-      return (
-        <KContainer.View marginR="0.25rem">
-          <Image source={Images.ICON_DROPPII} style={styles.icon} />
-        </KContainer.View>
-      );
-    }
-    if (chatCategory === DChatCategory.BIZ_BOT_PDP) {
-      return (
-        <KContainer.View marginR="0.25rem">
-          <KImage.VectorIcons
-            name="robot-outline"
-            provider="MaterialCommunityIcons"
-            size={14}
-            color={KColors.palette.primary.w400}
-          />
-        </KContainer.View>
-      );
-    }
-
-    if (chatType === DChatType.GROUP) {
-      return (
-        <KContainer.View marginR="0.25rem">
-          <KImage.VectorIcons
-            name="user-two-b"
-            size={14}
-            color={KColors.black}
-          />
-        </KContainer.View>
-      );
-    }
+export const NamePrefixIcon = memo(({ peerType }: NamePrefixIconProps) => {
+  if (peerType === PeerType.Bot) {
+    return (
+      <KContainer.View marginR="0.25rem">
+        <Image source={Images.ICON_DROPPII} style={styles.icon} />
+      </KContainer.View>
+    );
+  }
 
-    return null;
+  if (peerType === PeerType.Group) {
+    return (
+      <KContainer.View marginR="0.25rem">
+        <KImage.VectorIcons name="user-two-b" size={14} color={KColors.black} />
+      </KContainer.View>
+    );
   }
-);
+
+  // if (peerType === DChatPeerType.CUSTOMER) {
+  //   return (
+  //     <KContainer.View marginR="0.25rem">
+  //       <Image source={Images.ICON_DROPPII} style={styles.icon} />
+  //     </KContainer.View>
+  //   );
+  // }
+
+  return null;
+});
 
 NamePrefixIcon.displayName = 'NamePrefixIcon';

package/src/components/ThreadCard/ThreadCard.tsx

@@ -1,12 +1,10 @@
 import { memo, useCallback } from 'react';
-import { StyleSheet, type GestureResponderEvent } from 'react-native';
+import { type GestureResponderEvent } from 'react-native';
 import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
-import { DChatCategory } from '../../types/chat';
 import { AvatarSection } from './AvatarSection';
 import { NamePrefixIcon } from './NamePrefixIcon';
 import { UnreadBadge } from './UnreadBadge';
 import { formatTimestamp, getLastMessageText } from './thread-card.utils';
-import Images from '../../assets/images';
 import { useConversation, useUserStore } from '../../store';
 
 interface ThreadCardProps {
@@ -16,19 +14,20 @@ interface ThreadCardProps {
 
 const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
   const {
-    peer,
-    chatCategory,
+    peerType,
+    showName,
+    faceURL,
     lastMessage,
     unreadCount = 0,
-    isMuted,
-    pinnedAt,
+    recvMsgOpt,
+    isPinned,
     applicationType,
-    chatType,
     latestMsgSendTime,
   } = useConversation(item) ?? {};
 
-  const fullName = peer?.fullName ?? peer?.username ?? '';
+  const fullName = showName ?? '';
   const hasUnread = unreadCount > 0;
+  const isMuted = (recvMsgOpt ?? 0) !== 0;
   const timestamp = formatTimestamp(
     latestMsgSendTime ?? lastMessage?.sendTime ?? null
   );
@@ -52,30 +51,25 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
       activeOpacity={0.7}
     >
       <AvatarSection
-        avatar={peer?.avatar ?? null}
+        avatar={faceURL ?? null}
         fullName={fullName}
-        chatCategory={chatCategory}
+        peerType={peerType}
         applicationType={applicationType}
-        chatType={chatType}
       />
 
       {/* Chat-Content */}
       <KContainer.View flex marginL="0.5rem" paddingB={2}>
         {/* Row-Title */}
         <KContainer.View row alignItems="center">
-          <NamePrefixIcon chatCategory={chatCategory} chatType={chatType} />
-          <KContainer.VisibleView
-            visible={
-              // chatCategory === DChatCategory.BIZ_BOT_CRM ||
-              chatCategory === DChatCategory.BIZ_BOT_PDP
-            }
-          >
+          <NamePrefixIcon peerType={peerType} />
+          {/* For verified PDP (configuration details to be defined later) */}
+          {/* <KContainer.VisibleView visible={peerType === DChatPeerType.BOT}>
             <KImage.Base
               uri={Images.ICON_BOT}
               size={14}
               style={styles.botIcon}
             />
-          </KContainer.VisibleView>
+          </KContainer.VisibleView> */}
           <KLabel.Text
             typo={hasUnread ? 'TextMdBold' : 'TextMdNormal'}
             numberOfLines={1}
@@ -84,7 +78,7 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
           >
             {fullName}
           </KLabel.Text>
-          <KContainer.VisibleView visible={!!isMuted}>
+          <KContainer.VisibleView visible={isMuted}>
             <KContainer.View marginL="0.25rem">
               <KImage.VectorIcons
                 name="bell-off"
@@ -115,7 +109,7 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
           >
             {lastMessageText}
           </KLabel.Text>
-          <KContainer.VisibleView visible={Boolean(pinnedAt)}>
+          <KContainer.VisibleView visible={Boolean(isPinned)}>
             <KContainer.View marginL="0.5rem">
               <KImage.VectorIcons
                 name="pin-outline"
@@ -135,11 +129,3 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
 ThreadCard.displayName = 'ThreadCard';
 
 export default ThreadCard;
-
-const styles = StyleSheet.create({
-  botIcon: {
-    width: 16,
-    height: 16,
-    marginRight: 4,
-  },
-});

package/src/config/feature-flags.ts

@@ -0,0 +1,49 @@
+export interface FeatureFlags {
+  USE_LEGEND_LIST_CHAT: boolean;
+  CHAT_LIST_VARIANT: 'gifted' | 'legend';
+  ENABLE_PERFORMANCE_METRICS: boolean;
+  METRICS_SAMPLE_RATE: number;
+}
+
+const DEFAULT_FLAGS: FeatureFlags = {
+  USE_LEGEND_LIST_CHAT: false,
+  CHAT_LIST_VARIANT: 'legend',
+  ENABLE_PERFORMANCE_METRICS: true,
+  METRICS_SAMPLE_RATE: 1.0,
+};
+
+let flags: FeatureFlags = { ...DEFAULT_FLAGS };
+
+export const getFeatureFlag = <K extends keyof FeatureFlags>(
+  flag: K
+): FeatureFlags[K] => {
+  return flags[flag];
+};
+
+export const setFeatureFlag = <K extends keyof FeatureFlags>(
+  flag: K,
+  value: FeatureFlags[K]
+) => {
+  flags[flag] = value;
+  notifyListeners();
+};
+
+export const resetFlags = () => {
+  flags = { ...DEFAULT_FLAGS };
+  notifyListeners();
+};
+
+const listeners = new Set<() => void>();
+
+export const onFlagsChange = (callback: () => void) => {
+  listeners.add(callback);
+  return () => {
+    listeners.delete(callback);
+  };
+};
+
+const notifyListeners = () => {
+  listeners.forEach((cb) => cb());
+};
+
+export const getAllFlags = (): FeatureFlags => ({ ...flags });

package/src/context/ChatContext.tsx

@@ -13,11 +13,19 @@ export const useChatContext = (): ChatContextType => {
   return context;
 };
 
-const ChatProviderInner = ({ logGA, children }: ChatProviderProps) => {
-  const value = useMemo(() => ({ logGA }), [logGA]);
+const ChatProviderInner = ({
+  logGA,
+  children,
+  applicationType,
+}: ChatProviderProps) => {
+  const value = useMemo(
+    () => ({ logGA, applicationType }),
+    [logGA, applicationType]
+  );
 
   return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>;
 };
 
-export const ChatProvider = ({ enabled, ...props }: ChatProviderProps) =>
-  enabled ? <ChatProviderInner {...props} /> : props.children;
+export const ChatProvider = ({ ...props }: ChatProviderProps) => (
+  <ChatProviderInner {...props} />
+);

package/src/hooks/message/useSendMessage.ts

@@ -0,0 +1,136 @@
+import { useCallback } from 'react';
+import type { UploadFileItem } from 'react-native-fs';
+import { useConversationStore } from '../../store';
+import type {
+  MessageItem,
+  MessageType,
+  OfflinePush,
+} from '@droppii/openim-rn-client-sdk';
+import { extractUrls } from '../../utils/url';
+import OpenIMSDK from '@droppii/openim-rn-client-sdk';
+import type { IMessageItemEx } from '../../types/chat';
+import { useChatContext } from '../../context';
+import { generateContentBasedOnMessageType } from '../../utils/conversation';
+import { useMessageStore } from '../../store/message';
+import type { IUrlMetadata } from '../../types/common';
+
+export const useSendMessage = () => {
+  const applicationType = useChatContext().applicationType;
+  const pushNewMessage = useMessageStore((state) => state.pushNewMessage);
+
+  const sendMessage = useCallback(
+    async ({
+      plainText,
+      files,
+      urlMetadata,
+    }: {
+      plainText?: string;
+      files?: UploadFileItem[]; //TODO
+      urlMetadata?: IUrlMetadata;
+    }) => {
+      const { userID: recvID, groupID } =
+        useConversationStore.getState().getCurrentConversation() || {};
+      if (!recvID && !groupID) return;
+
+      const messageList: MessageItem[] = [];
+
+      for (const file of files || []) {
+        if (!file) continue;
+      }
+
+      if (!!plainText && plainText.trim() !== '') {
+        const urls = extractUrls(plainText);
+        const isUrlMessage = urls.length > 0;
+        let message: MessageItem | null = null;
+        if (isUrlMessage) {
+          message = await createUrlTextMessage(plainText, urls);
+        } else {
+          message = await createTextMessage(plainText);
+        }
+        if (!message) return;
+        messageList.push(message);
+      }
+
+      for (const message of messageList) {
+        const extendMessageInfo: IMessageItemEx = {
+          applicationType,
+          urlMetadata,
+        };
+
+        const successMessage = await OpenIMSDK.sendMessage({
+          groupID: groupID || '',
+          recvID: recvID || '',
+          message: {
+            ...message,
+            ex: JSON.stringify(extendMessageInfo) || '{}',
+          },
+          offlinePushInfo: generateOfflinePushInfo(
+            message.contentType,
+            plainText || ''
+          ),
+        });
+
+        pushNewMessage(successMessage);
+      }
+    },
+    [applicationType, pushNewMessage]
+  );
+
+  return {
+    sendMessage,
+  };
+};
+
+const generateOfflinePushInfo = (
+  contentType: MessageType,
+  plainText: string
+) => {
+  const conversationData = useConversationStore
+    ?.getState?.()
+    ?.getCurrentConversation();
+  const title = conversationData?.showName || 'Droppii';
+  const desc = generateContentBasedOnMessageType(contentType, plainText);
+  return {
+    title,
+    desc,
+    ex: JSON.stringify({
+      icon: conversationData?.faceURL || '',
+      conversationId: conversationData?.conversationId || '',
+      title,
+      desc,
+    }),
+    iOSPushSound: 'default',
+    iOSBadgeCount: true,
+  } as OfflinePush;
+};
+
+export const createTextMessage = async (text: string) => {
+  let textMessage = await OpenIMSDK.createTextMessage(
+    text,
+    new Date().getTime().toString()
+  )
+    .then((data) => {
+      return data;
+    })
+    .catch(({ errCode, errMsg }) => {
+      console.error('createTextMessage', errCode, errMsg);
+      return null;
+    });
+  return textMessage;
+};
+
+export const createUrlTextMessage = async (text: string, urls: string[]) => {
+  let urlTextMessage = await OpenIMSDK.createUrlTextMessage(
+    text,
+    urls,
+    new Date().getTime().toString()
+  )
+    .then((data) => {
+      return data;
+    })
+    .catch(({ errCode, errMsg }) => {
+      console.error('createUrlTextMessage', errCode, errMsg);
+      return null;
+    });
+  return urlTextMessage;
+};

package/src/hooks/query-keys.ts

@@ -1,3 +1,8 @@
+export const commonQueryKeys = {
+  all: ['common'] as const,
+  urlMetadata: (url: string) => ['list', url] as const,
+};
+
 export const conversationQueryKeys = {
   all: ['conversations'] as const,
   lists: () => [...conversationQueryKeys.all, 'list'] as const,