@droppii-org/chat-mobile 0.2.51 → 0.2.53

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/screens/chat-detail/BotMenuSheet.tsx

@@ -0,0 +1,94 @@
+import { memo, useCallback } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  KContainer,
+  KLabel,
+  KColors,
+  KImage,
+  KSpacingValue,
+  KDivider,
+} from '@droppii/libs';
+import { UIUtils } from '../../utils/UIUtils';
+import { trans } from '../../translation';
+import type { InputButtonItem } from '../../types/flows';
+import { DEFAULT_BUTTON_ID } from '../../utils/flows';
+
+interface BotMenuSheetContentProps {
+  options: InputButtonItem[];
+  onSelect: (item: InputButtonItem) => void;
+}
+
+const BotMenuSheetContent = memo(
+  ({ options, onSelect }: BotMenuSheetContentProps) => {
+    const handlePress = useCallback(
+      (item: InputButtonItem) => {
+        UIUtils.bottomSheet.dismiss();
+        onSelect(item);
+      },
+      [onSelect]
+    );
+
+    return (
+      <KContainer.View paddingH="0.75rem" paddingV="0.25rem">
+        {options?.map((item, index) => (
+          <>
+            <KContainer.Touchable
+              key={item.id}
+              row
+              alignItems
+              justifyContent="space-between"
+              style={styles.item}
+              onPress={() => handlePress(item)}
+            >
+              <KLabel.Text typo="TextMdMedium" flex>
+                {item?.id === DEFAULT_BUTTON_ID
+                  ? trans('restart')
+                  : item?.label || ''}
+              </KLabel.Text>
+              <KImage.VectorIcons
+                name="angle-right-o"
+                size={20}
+                color={KColors.gray.light}
+              />
+            </KContainer.Touchable>
+            <KContainer.VisibleView visible={index !== options?.length - 1}>
+              <KDivider size="hairline" />
+            </KContainer.VisibleView>
+          </>
+        ))}
+      </KContainer.View>
+    );
+  }
+);
+
+BotMenuSheetContent.displayName = 'BotMenuSheetContent';
+
+const styles = StyleSheet.create({
+  item: {
+    paddingVertical: KSpacingValue['0.75rem'],
+  },
+});
+
+export interface OpenBotMenuSheetParams {
+  options: InputButtonItem[];
+  onSelect: (item: InputButtonItem) => void;
+}
+
+export const openBotMenuSheet = ({
+  options,
+  onSelect,
+}: OpenBotMenuSheetParams) => {
+  UIUtils.bottomSheet.open({
+    header: {
+      title: { text: trans('chat:bot_menu_title') },
+      alignment: 'left',
+      showCloseButton: true,
+    },
+    touchOutsideToDismiss: true,
+    body: {
+      renderContent: () => (
+        <BotMenuSheetContent options={options} onSelect={onSelect} />
+      ),
+    },
+  });
+};

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

@@ -48,13 +48,17 @@ import { useChatComposerState } from './hooks/useChatComposerState';
 import { useChatComposerAnimation } from './hooks/useChatComposerAnimation';
 import { useChatDetailContext } from '../../context/ChatDetailContext';
 import { trans } from '../../translation';
-import { useRunFlow } from '../../hooks/flows/useFlow';
-import { ReactFlowsNodeTypes } from '../../types/flows';
+import { useCloseSupportSession, useRunFlow } from '../../hooks/flows/useFlow';
+import { ReactFlowsNodeTypes, type InputButtonItem } from '../../types/flows';
+import { isContextButton } from '../../utils/flows';
+import { DFlowState } from '../../types/chat';
 import { useAttachmentMapping } from './hooks/useAttachmentMapping';
 import type { AttachmentType } from '../../types/attachment';
 import { useChatCompose } from '../../hooks/useChatCompose';
 import { ChatCurrentQuotedMessage } from './ChatCurrentQuotedMessage';
 import { useSendMessage } from '../../hooks/message/useSendMessage';
+import { openBotMenuSheet } from './BotMenuSheet';
+import { UIUtils } from '../../utils/UIUtils';
 
 interface ChatComposerInternalProps {
   isEmptyMessage?: boolean;
@@ -76,8 +80,14 @@ export const ChatComposer = memo(
     const isDisableCompose = isComposeDisabled;
     const isKeyboardVisible = useKeyboardState((state) => state.isVisible);
 
-    const { isBotConversation, conversationFlow } = useChatDetailContext();
+    const {
+      isBotConversation,
+      conversationFlow,
+      conversationFlowMainMenu,
+      flowState,
+    } = useChatDetailContext();
     const { mutate: runFlow, isPending } = useRunFlow();
+    const { mutateAsync: closeSupportSession } = useCloseSupportSession();
     const { sendMessage } = useSendMessage();
     const compose = useChatCompose();
 
@@ -205,6 +215,92 @@ export const ChatComposer = memo(
       });
     }, [runFlow, conversationFlow]);
 
+    const botMenuOptions = useMemo(
+      () =>
+        conversationFlowMainMenu?.filter(
+          (item) => !isContextButton(item.label)
+        ) || [],
+      [conversationFlowMainMenu]
+    );
+
+    const hasBotMenuOptions = isBotConversation && botMenuOptions.length > 0;
+
+    const runBotMenuOption = useCallback(
+      (item: InputButtonItem) => {
+        runFlow({
+          actionId: item.id,
+          groupId: '',
+          childId: '',
+          plainText: item.label,
+        });
+      },
+      [runFlow]
+    );
+
+    const handleSelectBotMenuOption = useCallback(
+      (item: InputButtonItem) => {
+        if (flowState === DFlowState.CS) {
+          UIUtils.popup.open({
+            header: {
+              title: { text: trans('chat:end_support_session_title') },
+              alignment: 'center',
+            },
+            body: {
+              renderContent: () => (
+                <KContainer.View padding={'1rem'}>
+                  <KLabel.RichText
+                    typo="TextMdNormal"
+                    textAlign="center"
+                    color={KColors.gray.dark}
+                    richTextOptions={{
+                      i18nKey: trans('chat:end_support_session_desc'),
+                      components: {
+                        bold: (
+                          <KLabel.Text
+                            typo="TextMdBold"
+                            color={KColors.gray.dark}
+                          />
+                        ),
+                      },
+                    }}
+                  />
+                </KContainer.View>
+              ),
+            },
+            actions: {
+              buttons: [
+                {
+                  label: trans('chat:end_support_session_secondary'),
+                  kind: 'light',
+                  onPress: () => {},
+                },
+                {
+                  label: trans('chat:end_support_session_primary'),
+                  kind: 'danger',
+                  onPress: async () => {
+                    await closeSupportSession();
+                    runBotMenuOption(item);
+                  },
+                },
+              ],
+              type: 'horizontal-button',
+            },
+          });
+          return;
+        }
+        runBotMenuOption(item);
+      },
+      [flowState, runBotMenuOption, closeSupportSession]
+    );
+
+    const handleOpenBotMenu = useCallback(() => {
+      if (!hasBotMenuOptions) return;
+      openBotMenuSheet({
+        options: botMenuOptions,
+        onSelect: handleSelectBotMenuOption,
+      });
+    }, [hasBotMenuOptions, botMenuOptions, handleSelectBotMenuOption]);
+
     useEffect(() => {
       if (!compose.text) setIsInputWrapped(false);
     }, [compose.text, setIsInputWrapped]);
@@ -373,6 +469,7 @@ export const ChatComposer = memo(
               isMultilineInput={isMultilineInput}
               inputRef={inputRef}
               onEmojiPress={handleToggleSticker}
+              onSuggestPress={hasBotMenuOptions ? handleOpenBotMenu : undefined}
             />
 
             <KContainer.Touchable

package/src/screens/chat-detail/components/ChatMessageInput.tsx

@@ -25,6 +25,7 @@ export interface ChatMessageInputProps {
   isInputFocused: boolean;
   isMultilineInput: boolean;
   onEmojiPress?: () => void;
+  onSuggestPress?: () => void;
   inputRef: React.RefObject<TextInput>;
 }
 
@@ -39,6 +40,7 @@ export const ChatMessageInput = memo(
     isInputFocused,
     isMultilineInput,
     onEmojiPress,
+    onSuggestPress,
     inputRef,
   }: ChatMessageInputProps) => {
     const renderEmojiNode = useCallback(
@@ -69,13 +71,15 @@ export const ChatMessageInput = memo(
           paddingL="0.75rem"
           style={styles.inputContainer}
         >
-          <KContainer.View marginR="0.75rem">
-            <KImage.VectorIcons
-              name="chat-suggest-o"
-              size={24}
-              color={KColors.gray.normal}
-            />
-          </KContainer.View>
+          <KContainer.VisibleView visible={!!onSuggestPress}>
+            <KContainer.Touchable marginR="0.75rem" onPress={onSuggestPress}>
+              <KImage.VectorIcons
+                name="chat-suggest-o"
+                size={24}
+                color={KColors.gray.normal}
+              />
+            </KContainer.Touchable>
+          </KContainer.VisibleView>
 
           <TextInput
             ref={inputRef}

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.

package/src/services/endpoints.ts

@@ -28,6 +28,8 @@ export const ENDPOINTS = {
       `${getApiEndpoint('bot')}/${botId}/conversation`,
     conversationFlowMainMenu: (id: string) =>
       `${getApiEndpoint('conversation')}/${id}/bot-flows/main-menu`,
+    closeConversationSession: (id: string) =>
+      `${getApiEndpoint('conversation')}/${id}/session/close`,
     getConversationStatusByBotId: (botId: string) =>
       `${getApiEndpoint('bot')}/${botId}`,
     getConversationTarget: (conversationId: string) =>