@droppii-org/chat-mobile 0.2.51 → 0.2.53

package/src/components/MediaViewerModal.tsx

@@ -4,7 +4,11 @@ import MediaViewerScreen from '../screens/MediaView';
 import { useMediaViewer, type MediaItem } from '../hooks/useMediaViewer';
 
 export interface MediaViewerModalHandle {
-  show: (items: MediaItem[], index?: number) => void;
+  show: (
+    items: MediaItem[],
+    index?: number,
+    options?: { pagination?: boolean }
+  ) => void;
 }
 
 interface MediaViewerModalProps {
@@ -15,7 +19,8 @@ export const MediaViewerModal = forwardRef<
   MediaViewerModalHandle,
   MediaViewerModalProps
 >(({ onDismiss }, ref) => {
-  const { visible, mediaList, initIndex, show, hide } = useMediaViewer();
+  const { visible, mediaList, initIndex, pagination, show, hide } =
+    useMediaViewer();
 
   // Expose show method to parent via ref
   useImperativeHandle(
@@ -53,7 +58,7 @@ export const MediaViewerModal = forwardRef<
       <MediaViewerScreen
         images={images}
         initIndex={initIndex}
-        pagination={images.length > 1}
+        pagination={pagination && images.length > 1}
         onDismiss={handleDismiss}
         download
       />

package/src/components/MergedImageGrid.tsx

@@ -190,6 +190,7 @@ export const MergedImageGrid = memo(
                 width={cellSize}
                 height={cellHeight}
                 style={styles.image}
+                transition="fade"
                 onLoadEnd={() => handleImageLoadEnd(index)}
               />
 

package/src/config/api-endpoints.ts

@@ -20,6 +20,7 @@ export interface ApiEndpoints {
   stickerCategories: string;
   stickersByCategory: string;
   stickerHistory: string;
+  messagesResources: string;
 }
 
 const DEFAULT_ENDPOINTS: ApiEndpoints = {
@@ -31,6 +32,7 @@ const DEFAULT_ENDPOINTS: ApiEndpoints = {
   stickerCategories: '/chat-service/v1/app/sticker-categories',
   stickersByCategory: '/chat-service/v1/app/sticker-categories',
   stickerHistory: '/chat-service/v1/app/stickers/history',
+  messagesResources: '/chat-service/v1/app/messages/resources',
 };
 
 let endpoints: ApiEndpoints = { ...DEFAULT_ENDPOINTS };

package/src/context/ChatDetailContext.tsx

@@ -136,6 +136,7 @@ export const ChatDetailProvider = ({ children }: ChatDetailProviderProps) => {
         conversation,
         quotedMessage,
         setQuotedMessage,
+        conversationFlowMainMenu,
       }}
     >
       {children}

package/src/core/notification/pushToken.ts

@@ -16,13 +16,13 @@ const uploadFcmToken = async (
   project: DChatProject,
   expireTime: number
 ): Promise<void> => {
-  console.log('[chat-mobile] uploadFcmToken', {
-    platformID,
-    fcmToken,
-    account: userID,
-    project,
-    expireTime,
-  });
+  // console.log('[chat-mobile] uploadFcmToken', {
+  //   platformID,
+  //   fcmToken,
+  //   account: userID,
+  //   project,
+  //   expireTime,
+  // });
   const token = useUserStore.getState().token;
   if (!token) {
     console.warn(

package/src/hooks/flows/useFlow.ts

@@ -48,6 +48,20 @@ export const useResetFlow = () => {
   });
 };
 
+export const useCloseSupportSession = () => {
+  const conversationId =
+    useConversationStore((state) => state.currentConversationId) || '';
+  return useMutation({
+    mutationKey: conversationQueryKeys.closeSession(conversationId),
+    mutationFn: async () => {
+      const res = await apiInstance?.post<BaseResponse<unknown>>(
+        ENDPOINTS.chatService.closeConversationSession(conversationId)
+      );
+      return res?.data?.data;
+    },
+  });
+};
+
 export const useRunFlow = () => {
   const conversationId =
     useConversationStore((state) => state.currentConversationId) || '';

package/src/hooks/query-keys.ts

@@ -24,6 +24,10 @@ export const conversationQueryKeys = {
     conversationId,
   ],
   runFlow: (conversationId: string) => ['runConversationFlow', conversationId],
+  closeSession: (conversationId: string) => [
+    'closeConversationSession',
+    conversationId,
+  ],
   detailByBotId: (botId: string) => ['conversationByBotId', botId],
   detailBySourceId: (sourceId: string) => ['detailBySourceId', sourceId],
   joinedGroup: (groupId?: string) => [...conversationQueryKeys.all, groupId],
@@ -44,3 +48,9 @@ export const stickerQueryKeys = {
     [...stickerQueryKeys.all, 'category', categoryId] as const,
   recent: () => [...stickerQueryKeys.all, 'recent'] as const,
 };
+
+export const resourceCenterQueryKeys = {
+  all: ['threadResources'] as const,
+  byType: (recvID: string, contentType: number) =>
+    [...resourceCenterQueryKeys.all, recvID, contentType] as const,
+};

package/src/hooks/resourceCenter/useThreadResources.ts

@@ -0,0 +1,124 @@
+import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
+import { useCallback, useMemo, useState } from 'react';
+import { resourceCenterQueryKeys } from '../query-keys';
+import { useChatContext } from '../../context';
+import { ResourceCenterService } from '../../services/resourceCenter';
+import type {
+  DThreadResource,
+  DThreadResourceContentType,
+} from '../../types/chat';
+
+const PAGE_SIZE = 15;
+
+/**
+ * U5 resolved against a real staging response: revoked (recalled) messages ARE
+ * still returned by `/messages/resources` with `isRevoked: true` — BE does NOT
+ * pre-filter them. This client-side check is load-bearing, not defense-in-depth.
+ * `deleted`/`hidden` flags weren't observed in the tested rows — if BE adds them
+ * later, extend this predicate.
+ */
+const isVisibleResource = (item: DThreadResource): boolean => !item.isRevoked;
+
+export const useThreadResources = (
+  recvID: string,
+  contentType: DThreadResourceContentType,
+  chatType: 'SINGLE' | 'GROUP'
+) => {
+  const { applicationType } = useChatContext();
+  const queryClient = useQueryClient();
+  const queryKey = resourceCenterQueryKeys.byType(recvID, contentType);
+
+  const {
+    data,
+    isLoading,
+    isError,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+    refetch,
+  } = useInfiniteQuery({
+    queryKey,
+    // `initialPageParam` is a react-query v5-only option — this library's
+    // `@tanstack/react-query` peer dep is unpinned (`"*"`), so a host app on v4
+    // (confirmed: biz-mobile pins 4.40.1) silently ignores this option and the
+    // first fetch's `pageParam` comes back `undefined`, not `1`. The `?? 1`
+    // fallback below is what actually makes page 1 work under v4 — do not remove
+    // it even though it looks redundant next to `initialPageParam`.
+    initialPageParam: 1,
+    queryFn: ({ pageParam }) =>
+      ResourceCenterService.fetchThreadResources({
+        recvID,
+        contentType,
+        chatType,
+        page: pageParam ?? 1,
+        pageSize: PAGE_SIZE,
+        applicationType,
+      }),
+    getNextPageParam: (lastPage) =>
+      lastPage.hasMore ? lastPage.page + 1 : undefined,
+    enabled: !!recvID && !!chatType,
+  });
+
+  // De-dupe by `id` across pages — offset pagination (`page`/`pageSize`) can hand
+  // back the same item twice if new messages land in the thread between page
+  // fetches (classic offset-pagination drift), which LegendList's `keyExtractor`
+  // requires be unique or it throws ("overlapping key" / missing items & gaps).
+  const items = useMemo(() => {
+    const seen = new Set<string>();
+    const deduped: DThreadResource[] = [];
+    for (const page of data?.pages ?? []) {
+      for (const item of page.items) {
+        if (seen.has(item.id)) continue;
+        seen.add(item.id);
+        if (isVisibleResource(item)) deduped.push(item);
+      }
+    }
+    return deduped;
+  }, [data]);
+
+  // Pull-to-refresh should (a) only re-fetch page 1, not every already-loaded
+  // page, and (b) keep the currently-shown items visible while that fetch is in
+  // flight — no flash to empty/loading. Neither `refetch()` nor `resetQueries()`
+  // give us both:
+  //  - `refetch()` on an infinite query re-fetches ALL loaded pages (wasteful).
+  //  - `resetQueries()` clears cached data FIRST, then fetches — causes exactly
+  //    the empty-state flash we don't want.
+  //  - `refetch({ refetchPage })` (page-1-only) is a react-query v4-only option,
+  //    removed in v5 — another cross-version footgun like `initialPageParam`.
+  // So: fetch page 1 directly via the service, then splice it into the cache
+  // with `setQueryData` — `data`/`items` never go empty in between, and exactly
+  // one request is made regardless of how many pages were already loaded.
+  const [isRefreshingFirstPage, setIsRefreshingFirstPage] = useState(false);
+
+  const refreshFirstPage = useCallback(async () => {
+    setIsRefreshingFirstPage(true);
+    try {
+      const firstPage = await ResourceCenterService.fetchThreadResources({
+        recvID,
+        contentType,
+        chatType,
+        page: 1,
+        pageSize: PAGE_SIZE,
+        applicationType,
+      });
+      queryClient.setQueryData(queryKey, {
+        pages: [firstPage],
+        pageParams: [1],
+      });
+    } finally {
+      setIsRefreshingFirstPage(false);
+    }
+  }, [queryClient, queryKey, recvID, contentType, chatType, applicationType]);
+
+  return {
+    items,
+    isLoading,
+    isError,
+    hasMore: !!hasNextPage,
+    loadMore: fetchNextPage,
+    isFetchingNextPage,
+    isRefetching: isRefreshingFirstPage,
+    refetch,
+    refreshFirstPage,
+  };
+};

package/src/hooks/useImageAttachment.ts

@@ -171,8 +171,7 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
           const maxSize = isVideoFromPicker(item)
             ? UPLOAD_LIMITS.video
             : UPLOAD_LIMITS.image;
-          console.log('maxSize', maxSize);
-          console.log('item.size', item.size);
+
           return (item.size || 0) <= maxSize;
         };
 

package/src/hooks/useMediaViewer.ts

@@ -5,11 +5,20 @@ export interface MediaItem {
   isVideo?: boolean;
 }
 
+export interface ShowMediaViewerOptions {
+  pagination?: boolean;
+}
+
 export interface UseMediaViewerReturn {
   visible: boolean;
   mediaList: MediaItem[];
   initIndex: number;
-  show: (items: MediaItem[], index?: number) => void;
+  pagination: boolean;
+  show: (
+    items: MediaItem[],
+    index?: number,
+    options?: ShowMediaViewerOptions
+  ) => void;
   hide: () => void;
 }
 
@@ -17,16 +26,21 @@ export function useMediaViewer(): UseMediaViewerReturn {
   const [visible, setVisible] = useState(false);
   const [mediaList, setMediaList] = useState<MediaItem[]>([]);
   const [initIndex, setInitIndex] = useState(0);
+  const [pagination, setPagination] = useState(true);
 
-  const show = useCallback((items: MediaItem[], index = 0) => {
-    setMediaList(items);
-    setInitIndex(index);
-    setVisible(true);
-  }, []);
+  const show = useCallback(
+    (items: MediaItem[], index = 0, options?: ShowMediaViewerOptions) => {
+      setMediaList(items);
+      setInitIndex(index);
+      setPagination(options?.pagination ?? true);
+      setVisible(true);
+    },
+    []
+  );
 
   const hide = useCallback(() => {
     setVisible(false);
   }, []);
 
-  return { visible, mediaList, initIndex, show, hide };
+  return { visible, mediaList, initIndex, pagination, show, hide };
 }

package/src/hooks/useSendAttachment.ts

@@ -2,6 +2,7 @@ import { useCallback, useState } from 'react';
 import { AttachmentOrchestratorService } from '../services/attachmentOrchestrator';
 import type { Attachment, AttachmentSendOptions } from '../types/attachment';
 import { getMimeType } from '../utils/imageUtils';
+import { useChatContext } from '../context';
 
 export interface ImageItem {
   type: 'image';
@@ -70,6 +71,7 @@ export interface UseSendAttachmentReturn {
 export function useSendAttachment(): UseSendAttachmentReturn {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const applicationType = useChatContext().applicationType;
 
   const send = useCallback(
     async (
@@ -242,6 +244,7 @@ export function useSendAttachment(): UseSendAttachmentReturn {
             uploadedUrls,
             {
               strategy: 'individual',
+              applicationType,
               ...options,
             }
           );
@@ -278,7 +281,7 @@ export function useSendAttachment(): UseSendAttachmentReturn {
         console.log('[useSendAttachment] Finished');
       }
     },
-    []
+    [applicationType]
   );
 
   const clearError = useCallback(() => setError(null), []);

package/src/index.tsx

@@ -28,6 +28,8 @@ export { AttachmentPreview } from './components/AttachmentPreview';
 export { MediaViewerModal } from './components/MediaViewerModal';
 export { Inbox } from './screens/inbox';
 export { default as MediaViewerScreen } from './screens/MediaView';
+export { default as ResourceCenterScreen } from './screens/ResourceCenter';
+export type { ResourceCenterScreenProps } from './screens/ResourceCenter/types';
 export * from './screens/chat-detail';
 
 export type {

package/src/screens/MediaView/index.tsx

@@ -1,14 +1,18 @@
 import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import type { ComponentType } from 'react';
 import {
+  ActivityIndicator,
   BackHandler,
   Platform,
   StyleSheet,
-  FlatList,
-  type ListRenderItemInfo,
   type ViewToken,
   StatusBar,
 } from 'react-native';
+import {
+  LegendList,
+  type LegendListRef,
+  type LegendListRenderItemProps,
+} from '@legendapp/list/react-native';
 
 import LinearGradient from 'react-native-linear-gradient';
 import Animated, {
@@ -19,6 +23,9 @@ import Animated, {
 } from 'react-native-reanimated';
 import { Pagination } from 'react-native-snap-carousel';
 import PhotoView from 'react-native-photo-view';
+import RNFS from 'react-native-fs';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { saveDocuments } from '@react-native-documents/picker';
 import {
   KColors,
   KContainer,
@@ -29,6 +36,9 @@ import {
   KSpacingValue,
 } from '@droppii/libs';
 import VideoPlayer from './VideoPlayer';
+import { UIUtils } from '../../utils/UIUtils';
+import { trans } from '../../translation';
+import { getMimeType } from '../../utils/imageUtils';
 
 interface MediaViewerParams {
   images: any[];
@@ -49,15 +59,62 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
     onDismiss,
   } = props;
 
-  const listRef = useRef<FlatList>(null);
+  const insets = useSafeAreaInsets();
+  const listRef = useRef<LegendListRef>(null);
   const [index, setIndex] = useState(initIndex);
   const [isScrolling, setIsScrolling] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
 
   const dismiss = useCallback(() => {
     onDismiss?.();
   }, [onDismiss]);
 
-  const onDownload = useCallback(() => {}, []);
+  // Downloads the currently-viewed image/video, mirroring `useFileDownload`'s
+  // RNFS-download + Save-As-document pattern (no gallery/CameraRoll dependency
+  // exists in this repo — Save As is the only working "download" mechanism here).
+  const onDownload = useCallback(async () => {
+    const item = images[index];
+    if (!item?.url || isDownloading) return;
+
+    setIsDownloading(true);
+    try {
+      const urlPath = item.url.split('?')[0];
+      const fallbackExt = item.isVideo ? 'mp4' : 'jpg';
+      const fileName =
+        urlPath.split('/').pop() ||
+        `${item.isVideo ? 'video' : 'image'}-${index}.${fallbackExt}`;
+      const destPath = `${RNFS.CachesDirectoryPath}/${fileName}`;
+
+      const exists = await RNFS.exists(destPath);
+      if (!exists) {
+        const result = await RNFS.downloadFile({
+          fromUrl: item.url,
+          toFile: destPath,
+        }).promise;
+        if (result.statusCode < 200 || result.statusCode >= 300) {
+          throw new Error(`HTTP ${result.statusCode}`);
+        }
+      }
+
+      await saveDocuments({
+        sourceUris: [`file://${destPath}`],
+        mimeType: getMimeType(fileName),
+        fileName,
+        copy: true,
+      });
+      UIUtils.toast.open({
+        title: trans('chat:file_downloaded_success', { fileName }),
+        theme: 'info',
+      });
+    } catch {
+      UIUtils.toast.open({
+        title: trans('chat:file_download_failed'),
+        theme: 'warning',
+      });
+    } finally {
+      setIsDownloading(false);
+    }
+  }, [images, index, isDownloading]);
 
   useEffect(() => {
     StatusBar.setHidden(true);
@@ -79,22 +136,6 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
   const onMomentumScrollBegin = useCallback(() => setIsScrolling(true), []);
   const onMomentumScrollEnd = useCallback(() => setIsScrolling(false), []);
 
-  const onScrollToIndexFailed = useCallback(
-    (info: any) => {
-      const len = images.length;
-      const wait = new Promise((resolve) => setTimeout(() => resolve(true), 0));
-      wait.then(() => {
-        if (info.index > -1 && info.index < len) {
-          listRef.current?.scrollToIndex({
-            index: info.index,
-            animated: false,
-          });
-        }
-      });
-    },
-    [images]
-  );
-
   const onViewableItemsChanged = useRef(
     ({ viewableItems }: { viewableItems: ViewToken[] }) => {
       const i = viewableItems[0]?.index;
@@ -105,7 +146,7 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
   const keyEx = useCallback((item: any, i: number) => `${item.url}-${i}`, []);
 
   const renderItem = useCallback(
-    ({ item, index: itemIndex }: ListRenderItemInfo<any>) => (
+    ({ item, index: itemIndex }: LegendListRenderItemProps<any>) => (
       <KContainer.Touchable center activeOpacity={1}>
         <KContainer.VisibleView visible={!!item.isVideo}>
           <VideoPlayer
@@ -130,9 +171,21 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
   );
 
   const renderFooter = useMemo(() => {
-    if (pagination === false) return null;
+    // `pagination` only toggles the dot indicator (noisy on large sets like
+    // Resource Center grids) — the current-index counter should always show.
+    if (images.length <= 1) return null;
     return (
-      <KContainer.View style={styles.footer}>
+      <KContainer.View
+        style={[
+          styles.footer,
+          {
+            bottom:
+              insets.bottom > 0
+                ? insets.bottom + KSpacingValue['0.5rem']
+                : KSpacingValue['2rem'],
+          },
+        ]}
+      >
         <KLabel.Text
           typo="TextNmNormal"
           color={KColors.white}
@@ -140,18 +193,20 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
         >
           {index + 1}/{images.length}
         </KLabel.Text>
-        <Pagination
-          dotContainerStyle={styles.dotContainerStyle}
-          dotStyle={styles.dot}
-          inactiveDotStyle={styles.inactiveDot}
-          inactiveDotScale={0.6}
-          dotsLength={images.length > 1 ? images.length : 3}
-          activeDotIndex={images.length > 1 ? index : 1}
-          inactiveDotOpacity={images.length > 1 ? 0.5 : 0}
-        />
+        <KContainer.VisibleView visible={pagination !== false}>
+          <Pagination
+            dotContainerStyle={styles.dotContainerStyle}
+            dotStyle={styles.dot}
+            inactiveDotStyle={styles.inactiveDot}
+            inactiveDotScale={0.6}
+            dotsLength={images.length}
+            activeDotIndex={index}
+            inactiveDotOpacity={0.5}
+          />
+        </KContainer.VisibleView>
       </KContainer.View>
     );
-  }, [pagination, images.length, index]);
+  }, [pagination, images.length, index, insets.bottom]);
   return (
     <Animated.View
       style={styles.wrapper}
@@ -166,7 +221,7 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
         {/* Top gradient overlay */}
         <LinearGradient
           colors={['rgba(0,0,0,0.9)', 'rgba(0,0,0,0)']}
-          style={[styles.topOverlay]}
+          style={[styles.topOverlay, { paddingTop: insets.top }]}
           pointerEvents="box-none"
         >
           {/* Header first row — matches Figma: [close] [flex-1 spacer] [action-group] */}
@@ -184,22 +239,33 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
             <KContainer.View flex />
 
             {/* Download button */}
-            {download && (
+            <KContainer.VisibleView visible={!!download}>
               <KContainer.Touchable
                 style={styles.headerBtn}
-                onPress={onDownload}
+                onPress={isDownloading ? undefined : onDownload}
+                disabled={isDownloading}
               >
-                <KImage.VectorIcons
-                  name="download-o"
-                  size={24}
-                  color={KColors.white}
-                />
+                <KContainer.VisibleView visible={isDownloading}>
+                  <ActivityIndicator size="small" color={KColors.white} />
+                </KContainer.VisibleView>
+                <KContainer.VisibleView visible={!isDownloading}>
+                  <KImage.VectorIcons
+                    name="download-o"
+                    size={24}
+                    color={KColors.white}
+                  />
+                </KContainer.VisibleView>
               </KContainer.Touchable>
-            )}
+            </KContainer.VisibleView>
           </KContainer.View>
         </LinearGradient>
-        {/* Media content */}
-        <FlatList
+        {/* Media content. `recycleItems` intentionally NOT set — `VideoPlayer`
+            wraps a native player instance keyed off mount, not just the `url`
+            prop, so reusing a recycled cell across a video/image swap risks
+            stale playback state. Dataset here is always small (one message's
+            attachments or a Resource Center snapshot), so the perf win isn't
+            worth that risk. */}
+        <LegendList
           ref={listRef}
           initialScrollIndex={
             initIndex >= images?.length ? images?.length - 1 : initIndex
@@ -207,17 +273,14 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
           data={images}
           renderItem={renderItem}
           keyExtractor={keyEx}
+          estimatedItemSize={KDims.width}
           pagingEnabled
           horizontal
           showsHorizontalScrollIndicator={false}
           onViewableItemsChanged={onViewableItemsChanged}
           viewabilityConfig={{ itemVisiblePercentThreshold: 50 }}
-          onScrollToIndexFailed={onScrollToIndexFailed}
           onMomentumScrollBegin={onMomentumScrollBegin}
           onMomentumScrollEnd={onMomentumScrollEnd}
-          removeClippedSubviews
-          maxToRenderPerBatch={2}
-          windowSize={3}
           style={styles.flex}
         />
 
@@ -244,13 +307,14 @@ const styles = StyleSheet.create({
     height: KDims.height,
   },
   topOverlay: {
-    // position: 'absolute',
+    // `paddingTop` is overridden inline with `useSafeAreaInsets().top` (real
+    // notch/status-bar inset, both platforms).
+    position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
     zIndex: 100,
     minHeight: 100,
-    paddingTop: 30,
   },
   // Figma: Header-First-Row — flex row, padding 8, alignItems center
   headerRow: {
@@ -303,11 +367,10 @@ const styles = StyleSheet.create({
     letterSpacing: 0.12,
   },
   footer: {
+    // `bottom` is overridden inline with `useSafeAreaInsets()` (real device
+    // inset, both platforms) — `KDims.bottomSafeHeight` only covers iPhone
+    // notch/Dynamic Island and misses Android gesture-nav insets.
     position: 'absolute',
-    bottom:
-      KDims.bottomSafeHeight > 0
-        ? KDims.bottomSafeHeight + KSpacingValue['0.5rem']
-        : KSpacingValue['2rem'],
     alignSelf: 'center',
     alignItems: 'center',
     zIndex: 10,