@droppii-org/chat-mobile 0.2.17 → 0.2.19

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

@@ -1,26 +1,145 @@
-import { memo } from 'react';
-import { KContainer, KLabel } from '@droppii/libs';
+import { memo, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
 import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 import { messageStyles } from '../styles';
 import type { BaseLegendMessageProps } from '../types';
+import { useFileDownload } from '../../../hooks/useFileDownload';
+import {
+  getFileIcon,
+  getMimeType,
+  formatFileSize,
+} from '../../../utils/imageUtils';
+import { trans } from '../../../translation';
 
 export const FileMessage = memo(
   ({ message, isOutgoing }: BaseLegendMessageProps) => {
-    const fileName = message.fileElem?.fileName || message.content || '[File]';
+    const fileName = message.fileElem?.fileName || '[File]';
+    const fileSize = message.fileElem?.fileSize ?? 0;
+    const url =
+      (message.fileElem as any)?.sourceUrl ||
+      (message.fileElem as any)?.url ||
+      '';
+
+    const { state, handleView, handleDownload } = useFileDownload(
+      fileName,
+      url
+    );
+
+    const mimeType = useMemo(() => getMimeType(fileName), [fileName]);
+    const iconSource = useMemo(() => getFileIcon(mimeType), [mimeType]);
+
+    const subtitle = useMemo(() => {
+      if (state.status === 'downloading') {
+        return trans('chat:file_downloading', {
+          received: state.receivedMB ?? 0,
+          total: state.totalMB ?? 0,
+        });
+      }
+      if (state.status === 'error') {
+        return state.error ?? trans('chat:file_download_failed');
+      }
+      return formatFileSize(fileSize);
+    }, [state, fileSize]);
+
+    const subtitleColor =
+      state.status === 'error'
+        ? (KColors.palette.danger?.w400 ?? '#FF3B30')
+        : KColors.palette.gray.w500;
+
+    const isDownloading = state.status === 'downloading';
 
     return (
-      <KContainer.View style={messageStyles.wrapper}>
+      <KContainer.View
+        padding={'0.5rem'}
+        style={[
+          styles.wrapper,
+          messageStyles.wrapper,
+          isOutgoing ? messageStyles.bubbleSent : messageStyles.bubbleReceived,
+        ]}
+      >
         <KContainer.View
-          style={[
-            messageStyles.bubble,
-            isOutgoing
-              ? messageStyles.bubbleSent
-              : messageStyles.bubbleReceived,
-          ]}
+          row
+          alignItems
+          br={'3x'}
+          paddingR={'0.75rem'}
+          paddingV={'0.25rem'}
+          background={KColors.white}
         >
-          <KLabel.Text typo="TextSmNormal" color={CHAT_BUBBLE_COLORS.text}>
-            📎 {fileName}
-          </KLabel.Text>
+          <KContainer.VisibleView visible={isDownloading}>
+            <KContainer.Touchable
+              center
+              br="round"
+              style={styles.cancelBtn}
+              width={32}
+              height={32}
+              onPress={handleDownload}
+            >
+              <KContainer.View
+                center
+                br="round"
+                style={styles.cancelBtnIconContainer}
+                width={26}
+                height={26}
+              >
+                <KImage.VectorIcons
+                  name="close"
+                  provider="MaterialCommunityIcons"
+                  size={24}
+                  color={KColors.white}
+                />
+              </KContainer.View>
+            </KContainer.Touchable>
+          </KContainer.VisibleView>
+          <KContainer.VisibleView visible={!isDownloading}>
+            <KImage.Base
+              uri={iconSource}
+              style={styles.fileIcon}
+              resizeMode="contain"
+            />
+          </KContainer.VisibleView>
+
+          {/* File name + size/progress */}
+          <KContainer.View flexS={1}>
+            <KLabel.Text
+              typo="TextSmMedium"
+              color={CHAT_BUBBLE_COLORS.text}
+              numberOfLines={1}
+              ellipsizeMode="middle"
+            >
+              {fileName}
+            </KLabel.Text>
+            <KLabel.Text
+              typo="TextXsNormal"
+              color={subtitleColor}
+              numberOfLines={1}
+            >
+              {subtitle}
+            </KLabel.Text>
+          </KContainer.View>
+
+          {/* Eye (view) button */}
+          <KImage.VectorIcons
+            name="eye-outline"
+            provider="MaterialCommunityIcons"
+            onPress={handleView}
+            size={20}
+            color={KColors.palette.gray.w600}
+            containerStyle={styles.viewIcon}
+          />
+
+          <KImage.VectorIcons
+            name={'download-o'}
+            provider="DroppiiNew"
+            onPress={isDownloading ? undefined : handleDownload}
+            size={20}
+            color={
+              state.status === 'error'
+                ? (KColors.palette.danger?.w400 ?? '#FF3B30')
+                : KColors.palette.gray.w600
+            }
+            containerStyle={isDownloading ? styles.disabledIcon : undefined}
+          />
         </KContainer.View>
       </KContainer.View>
     );
@@ -28,3 +147,27 @@ export const FileMessage = memo(
 );
 
 FileMessage.displayName = 'FileMessage';
+
+const styles = StyleSheet.create({
+  wrapper: {
+    borderRadius: 20,
+  },
+  fileIcon: {
+    width: 24,
+    height: 24,
+    marginHorizontal: 12,
+  },
+  cancelBtn: {
+    backgroundColor: KColors.hexToRgba('#6355CA', 0.3),
+    marginHorizontal: 6,
+  },
+  cancelBtnIconContainer: {
+    backgroundColor: '#6355CA',
+  },
+  viewIcon: {
+    marginHorizontal: 12,
+  },
+  disabledIcon: {
+    opacity: 0.3,
+  },
+});

package/src/context/ChatContext.tsx

@@ -1,5 +1,13 @@
-import { createContext, useContext, useMemo } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+} from 'react';
 import type { ChatContextType, ChatProviderProps } from '../types/chat';
+import OpenIMSDK, { LoginStatus } from '@droppii/openim-rn-client-sdk';
+import { useUserStore } from '../store';
 
 export const ChatContext = createContext<ChatContextType | undefined>(
   undefined
@@ -17,12 +25,36 @@ const ChatProviderInner = ({
   logGA,
   children,
   applicationType,
+  getChatToken,
 }: ChatProviderProps) => {
+  const connectStatus = useUserStore((state) => state.connectStatus);
   const value = useMemo(
-    () => ({ logGA, applicationType }),
-    [logGA, applicationType]
+    () => ({ logGA, applicationType, getChatToken }),
+    [logGA, applicationType, getChatToken]
   );
 
+  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);
+          });
+      }
+    }
+  }, [getChatToken, connectStatus]);
+
+  useEffect(() => {
+    handleSdkLogin();
+  }, [handleSdkLogin]);
+
   return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>;
 };
 

package/src/context/ChatDetailContext.tsx

@@ -47,7 +47,7 @@ export const ChatDetailProvider = ({ children }: ChatDetailProviderProps) => {
     return conversation?.peerType === PeerType.Bot;
   }, [conversation]);
 
-  const setConverationFlowStep = useCallback((step: IConversationFlowStep) => {
+  const setConverationFlowStep = useCallback((step?: IConversationFlowStep) => {
     setConverationFlow(
       (prev) =>
         ({

package/src/core/useChatListener.ts

@@ -10,16 +10,14 @@ export const useChatListener = () => {
   const onConversationChanged = useCallback(
     (conversations: ConversationItem[]) => {
       console.log('onConversationChanged', conversations);
-      useConversationStore.getState().mergeOpenIMConversations(conversations);
+      useConversationStore.getState().updateConversations(conversations);
     },
     []
   );
 
   const onNewConversation = useCallback((conversations: ConversationItem[]) => {
     console.log('onNewConversation', conversations);
-    // mergeOpenIMConversations increments newConversationSignal when a conversation
-    // isn't in the store yet, which triggers a full refetch in useConversationList.
-    useConversationStore.getState().mergeOpenIMConversations(conversations);
+    useConversationStore.getState().updateConversations(conversations);
   }, []);
 
   const onGroupMemberAdded = useCallback((member: GroupMemberItem) => {

package/src/core/useUserListener.ts

@@ -21,14 +21,6 @@ export const useUserListener = () => {
     }
   }, []);
 
-  useEffect(() => {
-    ChatAPI.getLoginStatus().then((value) => {
-      if (value) {
-        useUserStore.getState().updateConnectStatus(LoginStatus.Logged);
-      }
-    });
-  }, []);
-
   useEffect(() => {
     if (isLoggedIn) {
       fetchAndUpdateUser();

package/src/hooks/flows/useFlow.ts

@@ -11,14 +11,25 @@ import type {
 } from '../../types/flows';
 import { useSendMessage } from '../message/useSendMessage';
 import { useChatDetailContext } from '../../context/ChatDetailContext';
+import { trans } from '../../translation';
 
 export const useResetFlow = () => {
   const conversationId =
     useConversationStore((state) => state.currentConversationId) || '';
   const { mutate: runFlow } = useRunFlow();
+  const { sendMessage } = useSendMessage();
+  const conversationFlow = useChatDetailContext().conversationFlow;
   return useMutation({
     mutationKey: conversationQueryKeys.flow(conversationId),
     mutationFn: async () => {
+      await sendMessage({
+        plainText: trans('restart'),
+        flow: {
+          groupId: conversationFlow?.flowCurrentStep?.id || '',
+          childId: null,
+          actionId: null,
+        },
+      });
       const res = await apiInstance?.post<BaseResponse<IConversationFlow>>(
         ENDPOINTS.chatService.resetConversationFlow(conversationId),
         {}
@@ -55,9 +66,7 @@ export const useRunFlow = () => {
       return res?.data?.data || undefined;
     },
     onSuccess: (data) => {
-      if (data?.flowNextStep) {
-        setConverationFlowStep(data?.flowNextStep);
-      }
+      setConverationFlowStep(data?.flowNextStep || undefined);
     },
   });
 };

package/src/hooks/message/useSendMessage.ts

@@ -106,7 +106,7 @@ const generateOfflinePushInfo = (
     desc,
     ex: JSON.stringify({
       icon: conversationData?.faceURL || '',
-      conversationId: conversationData?.conversationId || '',
+      conversationId: conversationData?.conversationID || '',
       title,
       desc,
     }),

package/src/hooks/useConversationList.ts

@@ -1,15 +1,9 @@
 import { useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import OpenIMSDK, {
-  type ConversationItem,
-} from '@droppii/openim-rn-client-sdk';
+import OpenIMSDK from '@droppii/openim-rn-client-sdk';
 import { conversationQueryKeys } from './query-keys';
 import { useConversationStore } from '../store';
-import type {
-  DChatApplicationType,
-  DConversationItem,
-  DMessageItem,
-} from '../types/chat';
+import type { DChatApplicationType } from '../types/chat';
 
 type Params = {
   applicationType: DChatApplicationType;
@@ -17,34 +11,6 @@ type Params = {
   enabled?: boolean;
 };
 
-function toConversationItem(raw: ConversationItem): DConversationItem {
-  let lastMessage: DMessageItem | undefined;
-  if (raw.latestMsg) {
-    try {
-      lastMessage = JSON.parse(raw.latestMsg) as DMessageItem;
-    } catch {
-      // leave undefined
-    }
-  }
-
-  let applicationType: DChatApplicationType | undefined;
-  if (raw.ex) {
-    try {
-      applicationType = (
-        JSON.parse(raw.ex) as { applicationType?: DChatApplicationType }
-      ).applicationType;
-    } catch {
-      // leave undefined
-    }
-  }
-
-  return {
-    ...(raw as DConversationItem),
-    lastMessage,
-    applicationType: applicationType as DChatApplicationType,
-  };
-}
-
 export function useConversationList({
   applicationType,
   page = 1,
@@ -58,13 +24,13 @@ export function useConversationList({
     queryKey: [...conversationQueryKeys.list(applicationType), page],
     enabled: enabled !== false,
     queryFn: async () => {
-      const offset = (page - 1) * 20;
-      const rawList = await OpenIMSDK.getConversationListSplitApp({
+      const offset = (page - 1) * 500;
+      const conversations = await OpenIMSDK.getConversationListSplitApp({
         offset,
-        count: 20,
+        count: 500,
         applicationType,
       });
-      const conversations = rawList.map(toConversationItem);
+
       useConversationStore.getState().updateConversations(conversations);
       return conversations;
     },

package/src/hooks/useFileAttachment.ts

@@ -0,0 +1,163 @@
+import { useCallback, useState } from 'react';
+import { ImageUploadAPI } from '../services/imageUpload';
+import DeviceUtils from '../utils/device';
+import UIUtils from '../utils/ui';
+import { trans } from '../translation';
+import { MAX_FILE_SIZE } from '../services/attachmentHandlers';
+
+const MAX_FILE_COUNT = 3;
+
+export interface FileWithUploadStatus {
+  id: string;
+  uri: string;
+  name: string;
+  size: number;
+  mimeType: string;
+  uploadProgress: number;
+  error: string | null;
+  isUploading: boolean;
+  uploadedUrl?: string;
+}
+
+export interface UseFileAttachmentReturn {
+  selectedFiles: FileWithUploadStatus[];
+  isFilePreviewVisible: boolean;
+  handleFileAttach: () => Promise<void>;
+  handleFileRemove: (id: string) => void;
+  clearAllFiles: () => void;
+}
+
+export const useFileAttachment = (): UseFileAttachmentReturn => {
+  const [selectedFiles, setSelectedFiles] = useState<FileWithUploadStatus[]>(
+    []
+  );
+
+  const updateFileStatus = useCallback(
+    (id: string, updates: Partial<Omit<FileWithUploadStatus, 'id'>>) => {
+      setSelectedFiles((prev) =>
+        prev.map((f) => (f.id === id ? { ...f, ...updates } : f))
+      );
+    },
+    []
+  );
+
+  const uploadFile = useCallback(
+    async (file: FileWithUploadStatus) => {
+      try {
+        updateFileStatus(file.id, {
+          isUploading: true,
+          error: null,
+          uploadProgress: 0,
+        });
+
+        const uploaded = await ImageUploadAPI.uploadImageFile(
+          {
+            path: file.uri.startsWith('file://') ? file.uri.slice(7) : file.uri,
+            filename: file.name,
+            size: file.size,
+            width: 0,
+            height: 0,
+            mime: file.mimeType,
+          },
+          (progress) => updateFileStatus(file.id, { uploadProgress: progress })
+        );
+
+        if (!uploaded?.url) throw new Error('No URL returned from server');
+
+        updateFileStatus(file.id, {
+          isUploading: false,
+          uploadProgress: 100,
+          uploadedUrl: uploaded.url,
+        });
+      } catch (error: any) {
+        // TODO: handle upload failure
+        console.error('[FileAttach] Upload failed:', error);
+        updateFileStatus(file.id, {
+          isUploading: false,
+          error: error?.message ?? trans('chat:file_upload_failed'),
+        });
+      }
+    },
+    [updateFileStatus]
+  );
+
+  const handleFileAttach = useCallback(async () => {
+    try {
+      const currentCount = selectedFiles.length;
+      if (currentCount >= MAX_FILE_COUNT) {
+        UIUtils.toast.open({
+          title: trans('chat:file_max_count'),
+          theme: 'danger',
+        });
+        return;
+      }
+
+      const picked = await DeviceUtils.openFilePicker(true);
+      if (!picked || picked.length === 0) return;
+
+      const oversized = picked.filter((f) => f.size > MAX_FILE_SIZE);
+      let candidates = picked;
+      if (oversized.length > 0) {
+        UIUtils.toast.open({
+          title: trans('chat:file_too_large'),
+          theme: 'danger',
+        });
+        candidates = picked.filter((f) => f.size <= MAX_FILE_SIZE);
+        if (candidates.length === 0) return;
+      }
+
+      const deduplicated = candidates.filter(
+        (f) =>
+          !selectedFiles.some((s) => s.name === f.name && s.size === f.size)
+      );
+      if (deduplicated.length === 0) return;
+
+      const remaining = MAX_FILE_COUNT - currentCount;
+      const toAdd = deduplicated.slice(0, remaining);
+
+      if (toAdd.length < deduplicated.length) {
+        UIUtils.toast.open({
+          title: trans('chat:file_max_count'),
+          theme: 'danger',
+        });
+      }
+
+      const newFiles: FileWithUploadStatus[] = toAdd.map((f) => ({
+        id: `file-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+        uri: f.uri,
+        name: f.name,
+        size: f.size,
+        mimeType: f.mimeType,
+        uploadProgress: 0,
+        error: null,
+        isUploading: true,
+      }));
+
+      setSelectedFiles((prev) => [...prev, ...newFiles]);
+
+      await Promise.all(newFiles.map((f) => uploadFile(f)));
+    } catch (error: any) {
+      UIUtils.toast.open({
+        title: trans('chat:file_pick_failed'),
+        message: error instanceof Error ? error.message : 'Unknown error',
+        theme: 'danger',
+      });
+    }
+  }, [selectedFiles, uploadFile]);
+
+  const handleFileRemove = useCallback((id: string) => {
+    setSelectedFiles((prev) => prev.filter((f) => f.id !== id));
+  }, []);
+
+  const clearAllFiles = useCallback(() => {
+    setSelectedFiles([]);
+  }, []);
+
+  return {
+    selectedFiles,
+    isFilePreviewVisible: selectedFiles.length > 0,
+    handleFileAttach,
+    handleFileRemove,
+    clearAllFiles,
+  };
+};