@droppii-org/chat-mobile 0.2.51 → 0.2.52

package/src/screens/ResourceCenter/ListRenderer.tsx

@@ -0,0 +1,81 @@
+import { memo, useCallback } from 'react';
+import type { ReactElement } from 'react';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import { LegendList } from '@legendapp/list/react-native';
+import { KContainer, KColors, KSpacingValue } from '@droppii/libs';
+import { FileResourceRow } from './FileResourceRow';
+import { LinkResourceRow } from './LinkResourceRow';
+import { DThreadResourceContentType } from '../../types/chat';
+import type { DThreadResource } from '../../types/chat';
+
+interface Props {
+  items: DThreadResource[];
+  contentType: DThreadResourceContentType;
+  onEndReached: () => void;
+  isFetchingNextPage: boolean;
+  onPressUrl?: (url: string) => void;
+  onRefresh: () => void;
+  isRefetching: boolean;
+  emptyComponent: ReactElement;
+}
+
+const ROW_ESTIMATE = 80;
+
+export const ListRenderer = memo(
+  ({
+    items,
+    contentType,
+    onEndReached,
+    isFetchingNextPage,
+    onPressUrl,
+    onRefresh,
+    isRefetching,
+    emptyComponent,
+  }: Props) => {
+    const isLink = contentType === DThreadResourceContentType.URL_TEXT;
+
+    const renderItem = useCallback(
+      ({ item }: { item: DThreadResource }) =>
+        isLink ? (
+          <LinkResourceRow item={item} onPressUrl={onPressUrl} />
+        ) : (
+          <FileResourceRow item={item} />
+        ),
+      [isLink, onPressUrl]
+    );
+
+    const keyExtractor = useCallback((item: DThreadResource) => item.id, []);
+
+    return (
+      <LegendList
+        data={items}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        estimatedItemSize={ROW_ESTIMATE}
+        contentContainerStyle={styles.content}
+        onEndReached={onEndReached}
+        onEndReachedThreshold={0.5}
+        onRefresh={onRefresh}
+        refreshing={isRefetching}
+        ListEmptyComponent={emptyComponent}
+        ListFooterComponent={
+          <KContainer.VisibleView visible={isFetchingNextPage}>
+            <ActivityIndicator
+              style={styles.footer}
+              color={KColors.palette.primary.w400}
+            />
+          </KContainer.VisibleView>
+        }
+      />
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  content: {
+    padding: KSpacingValue['0.75rem'],
+  },
+  footer: {
+    paddingVertical: KSpacingValue['1rem'],
+  },
+});

package/src/screens/ResourceCenter/ResourceCenterTabBar.tsx

@@ -0,0 +1,89 @@
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  TabBar,
+  type Route,
+  type TabBarProps,
+  type TabDescriptor,
+} from 'react-native-tab-view';
+import { KLabel, KColors, KSpacingValue } from '@droppii/libs';
+
+// Stable module-level reference — must NOT be defined inside the component body
+// (or inside the `useMemo` below), or React treats it as a new type every render.
+const renderTabLabel: NonNullable<TabDescriptor<Route>['label']> = ({
+  labelText,
+  color,
+}) => (
+  <KLabel.Text typo="TextNmBold" color={color}>
+    {labelText}
+  </KLabel.Text>
+);
+
+// Uses `react-native-tab-view`'s own `TabBar` (animated sliding indicator,
+// built-in accessibility/ripple) instead of a hand-rolled tab row — only the
+// design tokens are custom (colors/indicator/label typography), matching the
+// Figma underline-tab spec via the library's supported customization surface
+// (`activeColor`/`inactiveColor`/`indicatorStyle`/per-route `label`).
+//
+// NOT wrapped in `React.memo`: `TabView` calls `renderTabBar(props)` as a plain
+// function (not `<Comp/>` JSX — see `TabView.js`: `renderTabBar({...})`), and a
+// `memo()`-wrapped component is a React element object, not a callable function.
+// Passing the memoized object here throws `renderTabBar is not a function`.
+export function ResourceCenterTabBar<T extends Route>(props: TabBarProps<T>) {
+  const options = useMemo<Record<string, TabDescriptor<T>>>(
+    () =>
+      Object.fromEntries(
+        props.navigationState.routes.map((route) => [
+          route.key,
+          {
+            labelText: (route as Route & { title?: string }).title,
+            label: renderTabLabel,
+          } satisfies TabDescriptor<T>,
+        ])
+      ),
+    [props.navigationState.routes]
+  );
+
+  return (
+    <TabBar
+      {...props}
+      scrollEnabled
+      options={options}
+      activeColor={KColors.palette.primary.w400}
+      inactiveColor={KColors.palette.gray.w400}
+      pressColor="transparent"
+      style={styles.bar}
+      tabStyle={styles.tab}
+      indicatorStyle={styles.indicator}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  // Figma `Tab-Bar` (14208:92918): solid white background + 1px bottom hairline
+  // (`gray.w25` #EFEFEF) — no shadow/elevation.
+  bar: {
+    backgroundColor: KColors.white,
+    borderBottomWidth: 1,
+    borderBottomColor: KColors.palette.gray.w25,
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  // `width: 'auto'` is REQUIRED alongside `scrollEnabled` above — without it,
+  // `TabBar`'s internal `getComputedTabWidth` falls back to `layout.width / 5 * 2`
+  // (40% of screen width per tab) before it has measured anything, rendering
+  // hugely oversized tabs. `'auto'` makes it use each tab's real measured label
+  // width instead (`tabWidths[route.key]`) — matches Figma's hug-content tabs
+  // (widths 53/65/73/81pt), fixed to each tab's own text, not stretched/guessed.
+  tab: {
+    width: 'auto',
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    minHeight: 0,
+  },
+  // Figma: 3px bar, cornerRadius 4, primary blue.
+  indicator: {
+    backgroundColor: KColors.palette.primary.w400,
+    height: 3,
+    borderRadius: 4,
+  },
+});

package/src/screens/ResourceCenter/ResourceCenterTabScene.tsx

@@ -0,0 +1,142 @@
+import { memo, useCallback } from 'react';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import type { RefObject } from 'react';
+import { KContainer, KLabel, KColors } from '@droppii/libs';
+import { trans } from '../../translation';
+import { useThreadResources } from '../../hooks/resourceCenter/useThreadResources';
+import { ResourceEmptyState } from './ResourceEmptyState';
+import { GridRenderer } from './GridRenderer';
+import { ListRenderer } from './ListRenderer';
+import { DThreadResourceContentType } from '../../types/chat';
+import type { ResourceCenterLayout } from './types';
+import type { MediaViewerModalHandle } from '../../components/MediaViewerModal';
+
+interface Props {
+  recvID: string;
+  chatType: 'SINGLE' | 'GROUP';
+  contentType: DThreadResourceContentType;
+  layout: ResourceCenterLayout;
+  emptyKey: string;
+  onPressUrl?: (url: string) => void;
+  mediaViewerRef: RefObject<MediaViewerModalHandle | null>;
+}
+
+// One scene per tab — owns its own `useThreadResources` call so react-query
+// caches independently per (recvID, contentType) and `lazy` TabView scenes
+// don't all fetch on mount.
+//
+// Known limitation (deliberate, not an oversight): the shared `MediaViewerModal`
+// is opened with a static snapshot of the currently-loaded page. If the user swipes
+// to the last loaded item while more pages exist server-side, the viewer does not
+// auto-fetch more — they need to close it, scroll the grid to trigger `loadMore`,
+// then reopen. Wiring live pagination into the viewer would require either coupling
+// the shared `MediaView` (used by in-chat bubbles too) to react-query state, or
+// forking its ~230 lines of zoom/video/download logic into a separate component —
+// not worth it for this ticket's scope.
+export const ResourceCenterTabScene = memo(
+  ({
+    recvID,
+    chatType,
+    contentType,
+    layout,
+    emptyKey,
+    onPressUrl,
+    mediaViewerRef,
+  }: Props) => {
+    const {
+      items,
+      isLoading,
+      isError,
+      loadMore,
+      isFetchingNextPage,
+      isRefetching,
+      refetch,
+      refreshFirstPage,
+    } = useThreadResources(recvID, contentType, chatType);
+
+    const onPressGridItem = useCallback(
+      (index: number) => {
+        const mediaItems = items.map((item) => ({
+          url: item.sourceUrl ?? '',
+          isVideo: contentType === DThreadResourceContentType.VIDEO,
+        }));
+        // Resource Center grids (Ảnh/Video tabs) can hold hundreds of items —
+        // the viewer's dot/counter pagination indicator is meant for small,
+        // in-chat message groups and becomes noise at this scale. Hide it here.
+        mediaViewerRef.current?.show(mediaItems, index, { pagination: false });
+      },
+      [items, contentType, mediaViewerRef]
+    );
+
+    if (isLoading) {
+      return (
+        <KContainer.View style={styles.centerFill}>
+          <ActivityIndicator color={KColors.palette.primary.w400} />
+        </KContainer.View>
+      );
+    }
+
+    if (isError) {
+      return (
+        <KContainer.View style={styles.centerFill}>
+          <KLabel.Text
+            typo="TextSmNormal"
+            color={KColors.palette.gray.w400}
+            style={styles.errorText}
+          >
+            {trans('chat:generic_error')}
+          </KLabel.Text>
+          <KContainer.Touchable onPress={() => refetch()}>
+            <KLabel.Text typo="TextNmBold" color={KColors.palette.primary.w400}>
+              {trans('chat:retry')}
+            </KLabel.Text>
+          </KContainer.Touchable>
+        </KContainer.View>
+      );
+    }
+
+    // `ResourceEmptyState` is passed as `ListEmptyComponent` (not an early return)
+    // so the list itself — and its `RefreshControl` — stays mounted even with 0
+    // items, letting pull-to-refresh work on the empty state too.
+    const emptyComponent = <ResourceEmptyState emptyKey={emptyKey} />;
+
+    if (layout === 'grid') {
+      return (
+        <GridRenderer
+          items={items}
+          onEndReached={loadMore}
+          isFetchingNextPage={isFetchingNextPage}
+          onPressItem={onPressGridItem}
+          onRefresh={refreshFirstPage}
+          isRefetching={isRefetching}
+          emptyComponent={emptyComponent}
+        />
+      );
+    }
+
+    return (
+      <ListRenderer
+        items={items}
+        contentType={contentType}
+        onEndReached={loadMore}
+        isFetchingNextPage={isFetchingNextPage}
+        onPressUrl={onPressUrl}
+        onRefresh={refreshFirstPage}
+        isRefetching={isRefetching}
+        emptyComponent={emptyComponent}
+      />
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  centerFill: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  errorText: {
+    textAlign: 'center',
+  },
+});

package/src/screens/ResourceCenter/ResourceEmptyState.tsx

@@ -0,0 +1,39 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
+import { trans } from '../../translation';
+import Images from '../../assets/images';
+
+interface Props {
+  emptyKey: string;
+}
+
+export const ResourceEmptyState = memo(({ emptyKey }: Props) => (
+  <KContainer.View style={styles.wrapper}>
+    <KImage.Base
+      uri={Images.RESOURCE_CENTER_EMPTY_BOX}
+      width={120}
+      height={120}
+    />
+    <KLabel.Text
+      typo="TextSmNormal"
+      color={KColors.palette.gray.w400}
+      style={styles.text}
+    >
+      {trans(emptyKey)}
+    </KLabel.Text>
+  </KContainer.View>
+));
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 60,
+    gap: 12,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});

package/src/screens/ResourceCenter/index.tsx

@@ -0,0 +1,129 @@
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { TabView } from 'react-native-tab-view';
+import { KNavigation, KContainer, KColors } from '@droppii/libs';
+import { SessionType } from '@droppii/openim-rn-client-sdk';
+import { trans } from '../../translation';
+import { useConversation } from '../../store';
+import {
+  MediaViewerModal,
+  type MediaViewerModalHandle,
+} from '../../components/MediaViewerModal';
+import { ResourceCenterTabBar } from './ResourceCenterTabBar';
+import { ResourceCenterTabScene } from './ResourceCenterTabScene';
+import { RESOURCE_TABS } from './types';
+import type { ResourceCenterScreenProps, ResourceCenterLayout } from './types';
+import type { DThreadResourceContentType } from '../../types/chat';
+
+interface TabRoute {
+  key: string;
+  title: string;
+  contentType: DThreadResourceContentType;
+  layout: ResourceCenterLayout;
+  emptyKey: string;
+}
+
+const ResourceCenterScreen = memo(
+  ({
+    conversationId,
+    fallbackGroupID,
+    fallbackUserID,
+    initialTab,
+    onBack,
+    onPressUrl,
+  }: ResourceCenterScreenProps) => {
+    // Same derivation every host app previously duplicated: groupID-first
+    // (group/bot threads), userID fallback (1-1 threads), with route-param
+    // fallbacks for the window before `conversationId` lands in the store.
+    const conversation = useConversation(conversationId);
+    const groupID = conversation?.groupID || fallbackGroupID;
+    const recvID = groupID || conversation?.userID || fallbackUserID || '';
+    // `chatType` must reflect the conversation's actual session type, not just
+    // "did a groupID show up somewhere" — `conversationType` (SessionType.Group
+    // === 3, covers WorkingGroup too since it shares the same numeric value) is
+    // the authoritative signal once the conversation is loaded. Only fall back
+    // to the groupID-presence heuristic for the window before it lands in the
+    // store (conversation === undefined).
+    const isGroupConversation = conversation
+      ? conversation?.conversationType === SessionType.Group
+      : !!groupID;
+    const chatType: 'SINGLE' | 'GROUP' = isGroupConversation
+      ? 'GROUP'
+      : 'SINGLE';
+
+    const [routes] = useState<TabRoute[]>(() =>
+      RESOURCE_TABS.map((tab) => ({
+        key: String(tab.contentType),
+        title: trans(tab.labelKey),
+        contentType: tab.contentType,
+        layout: tab.layout,
+        emptyKey: tab.emptyKey,
+      }))
+    );
+
+    const initialIndex = useMemo(() => {
+      const idx = routes.findIndex((r) => r.contentType === initialTab);
+      return idx >= 0 ? idx : 0;
+    }, [routes, initialTab]);
+
+    const [index, setIndex] = useState(initialIndex);
+    const mediaViewerRef = useRef<MediaViewerModalHandle>(null);
+
+    // `renderScene` is a render prop consumed by `TabView` — matching `Inbox.tsx`'s
+    // convention of `useCallback`-wrapping it so it doesn't get a new identity (and
+    // force unnecessary internal re-renders) on every parent render.
+    // `renderTabBar` needs no wrapper: `ResourceCenterTabBar` already implements
+    // `TabView`'s own `renderTabBar` prop contract directly (it wraps the library's
+    // `TabBar`), so its component reference — already stable — is passed as-is.
+    const renderScene = useCallback(
+      ({ route }: { route: TabRoute }) => (
+        <ResourceCenterTabScene
+          recvID={recvID}
+          chatType={chatType}
+          contentType={route.contentType}
+          layout={route.layout}
+          emptyKey={route.emptyKey}
+          onPressUrl={onPressUrl}
+          mediaViewerRef={mediaViewerRef}
+        />
+      ),
+      [recvID, chatType, onPressUrl]
+    );
+
+    return (
+      <KContainer.View style={styles.flex}>
+        <KNavigation.Header
+          title={trans('chat:resource_center_title')}
+          alignment="left"
+          size="small"
+          theme="light"
+          leftButton={{
+            id: 'back',
+            icon: { vectorName: 'arrow-left-o' },
+            onPress: onBack,
+          }}
+        />
+        <TabView<TabRoute>
+          navigationState={{ index, routes }}
+          onIndexChange={setIndex}
+          lazy
+          renderTabBar={ResourceCenterTabBar}
+          renderScene={renderScene}
+        />
+
+        <MediaViewerModal ref={mediaViewerRef} />
+      </KContainer.View>
+    );
+  }
+);
+
+ResourceCenterScreen.displayName = 'Screen.ResourceCenter';
+
+export default ResourceCenterScreen;
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+    backgroundColor: KColors.white,
+  },
+});

package/src/screens/ResourceCenter/types.ts

@@ -0,0 +1,56 @@
+import { DThreadResourceContentType } from '../../types/chat';
+
+export interface ResourceCenterScreenProps {
+  conversationId: string;
+  /**
+   * Fallback groupID/userID for the race-condition window where `conversationId`
+   * isn't in the store yet (fresh deep-link / cold nav). Mirrors the route-param
+   * fallback pattern host apps already use elsewhere (e.g. `useSendMessage`).
+   */
+  fallbackGroupID?: string;
+  fallbackUserID?: string;
+  initialTab?: DThreadResourceContentType;
+  onBack?: () => void;
+  /**
+   * Host-provided link-open handler — mirrors `ChatDetailProps.onPressUrl`. This library does
+   * NOT implement in-app-browser/deeplink/external-app logic itself (traced: `ChatDetail.tsx`
+   * only normalizes the URL and forwards to this same prop) — the host app supplies it.
+   */
+  onPressUrl?: (url: string) => void;
+}
+
+export type ResourceCenterLayout = 'grid' | 'list';
+
+export interface ResourceTabConfig {
+  contentType: DThreadResourceContentType;
+  labelKey: string;
+  emptyKey: string;
+  layout: ResourceCenterLayout;
+}
+
+export const RESOURCE_TABS: ResourceTabConfig[] = [
+  {
+    contentType: DThreadResourceContentType.IMAGE,
+    labelKey: 'chat:resource_center_tab_image',
+    emptyKey: 'chat:resource_center_empty_generic',
+    layout: 'grid',
+  },
+  {
+    contentType: DThreadResourceContentType.VIDEO,
+    labelKey: 'chat:resource_center_tab_video',
+    emptyKey: 'chat:resource_center_empty_generic',
+    layout: 'grid',
+  },
+  {
+    contentType: DThreadResourceContentType.FILE,
+    labelKey: 'chat:resource_center_tab_file',
+    emptyKey: 'chat:resource_center_empty_generic',
+    layout: 'list',
+  },
+  {
+    contentType: DThreadResourceContentType.URL_TEXT,
+    labelKey: 'chat:resource_center_tab_link',
+    emptyKey: 'chat:resource_center_empty_link',
+    layout: 'list',
+  },
+];

package/src/services/attachmentOrchestrator.ts

@@ -11,6 +11,7 @@ import type {
   AttachmentSendResult,
 } from '../types/attachment';
 import { getAttachmentHandler } from '../types/attachmentHandler';
+import type { DChatApplicationType, IMessageItemEx } from '../types/chat';
 import { useConversationStore } from '../store';
 import { useMessageStore } from '../store/message';
 import {
@@ -97,6 +98,7 @@ export namespace AttachmentOrchestratorService {
     try {
       const mergedMsgId = await sendMergedMessage(
         payloads.map((p) => p.payload),
+        options.applicationType,
         options.includeCaption
       );
       console.log('[AttachmentOrchestrator] Messages sent via merger:', {
@@ -122,6 +124,7 @@ export namespace AttachmentOrchestratorService {
 
   async function sendMergedMessage(
     payloads: unknown[],
+    applicationType?: DChatApplicationType,
     _caption?: string
   ): Promise<string> {
     const currentConversation = useConversationStore
@@ -274,8 +277,18 @@ export namespace AttachmentOrchestratorService {
       }
     );
 
-    const recvID = currentConversation.userID || '';
-    const groupID = currentConversation.groupID || '';
+    const { currentUserId, currentGroupId } = useConversationStore.getState();
+    const recvID = currentConversation.userID || currentUserId || '';
+    const groupID = currentConversation.groupID || currentGroupId || '';
+
+    // Attachment messages otherwise skip `ex`, unlike text messages
+    // (buildSendParams), leaving applicationType context missing.
+    if (applicationType) {
+      const extendMessageInfo: IMessageItemEx = { applicationType };
+      for (let i = 0; i < allMessages.length; i++) {
+        (allMessages[i] as MessageItem).ex = JSON.stringify(extendMessageInfo);
+      }
+    }
 
     // Push all messages as "Sending" immediately so the user sees every
     // bubble right away, instead of waiting for each network call in turn.