react-native-chatbot-ai 0.1.53 → 0.1.55

package/src/components/product/CardHorizontal.tsx

@@ -19,11 +19,13 @@ import { useChatContext } from '../../context/ChatContext';
 // import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { GAEvents } from '../../constants/events';
 import useSessionStore from '../../store/session';
+import { getRouteKey } from '../../constants';
 
 interface IProductHorizontalCardProps {
   productId?: string;
   messageId?: string;
   index?: number;
+  showFavorite?: boolean;
 }
 
 const ProductHorizontalCardWrapper = memo(
@@ -45,10 +47,12 @@ const ProductHorizontalCard = memo(
     item,
     messageId,
     index,
+    showFavorite = false,
   }: IProductHorizontalCardProps & { item: IProductItem }) => {
     const onAddToCart = useChatContext()?.onAddToCart;
     const onBuyNow = useChatContext()?.onBuyNow;
     const onNavigateToProduct = useChatContext()?.onNavigateToProduct;
+    const tabIndex = useChatContext()?.tabIndex;
     const logGA = useChatContext()?.logGA;
 
     const {
@@ -157,10 +161,13 @@ const ProductHorizontalCard = memo(
       onNavigateToProduct?.(item);
       logGA(GAEvents.chatDetailProductCardTap, {
         conversation_id: useSessionStore.getState().sessionId,
+        message_chat_id: messageId,
         product_id: item.id,
         position_in_list: index,
+        tab_type: getRouteKey(tabIndex),
+        type: 'horizontal',
       });
-    }, [onNavigateToProduct, logGA, item, index]);
+    }, [onNavigateToProduct, logGA, item, index, messageId, tabIndex]);
 
     const onPressAddToCart = useCallback(() => {
       if (!item) return;
@@ -171,8 +178,10 @@ const ProductHorizontalCard = memo(
         position_in_list: index,
         pdp_id: item.pdpId,
         message_chat_id: messageId,
+        tab_type: getRouteKey(tabIndex),
+        type: 'horizontal',
       });
-    }, [onAddToCart, logGA, item, messageId, index]);
+    }, [onAddToCart, logGA, item, messageId, index, tabIndex]);
 
     const onPressBuyNow = useCallback(() => {
       if (!item) return;
@@ -183,8 +192,10 @@ const ProductHorizontalCard = memo(
         position_in_list: -1, //TODO: fix
         pdp_id: item.pdpId,
         message_chat_id: messageId,
+        tab_type: getRouteKey(tabIndex),
+        type: 'horizontal',
       });
-    }, [onBuyNow, logGA, item, messageId]);
+    }, [onBuyNow, logGA, item, messageId, tabIndex]);
 
     return (
       <KContainer.Touchable style={styles.container} onPress={onPress}>
@@ -195,21 +206,23 @@ const ProductHorizontalCard = memo(
             br="2x"
             flashListForceRenderKey={id}
           />
-          <KContainer.View style={styles.favoriteContainer}>
-            <KButton.Base
-              onPress={() => {}}
-              size="xs"
-              icon={{
-                vectorName: isFavorite ? 'heart-b' : 'heart-o',
-                size: 14,
-                tintColor: isFavorite
-                  ? KColors.danger.normal
-                  : KColors.gray.normal,
-              }}
-              br="round"
-              background={KColors.hexToRgba(KColors.white, 0.9)}
-            />
-          </KContainer.View>
+          <KContainer.VisibleView visible={showFavorite}>
+            <KContainer.View style={styles.favoriteContainer}>
+              <KButton.Base
+                onPress={() => {}}
+                size="xs"
+                icon={{
+                  vectorName: isFavorite ? 'heart-b' : 'heart-o',
+                  size: 14,
+                  tintColor: isFavorite
+                    ? KColors.danger.normal
+                    : KColors.gray.normal,
+                }}
+                br="round"
+                background={KColors.hexToRgba(KColors.white, 0.9)}
+              />
+            </KContainer.View>
+          </KContainer.VisibleView>
           <KContainer.VisibleView visible={isSuspended}>
             <KContainer.View style={styles.abs}>
               <KLabel.Text

package/src/constants/chatTab.ts

@@ -0,0 +1,18 @@
+import { trans } from '../translation';
+
+export enum ChatSessionTab {
+  answer = 'answer',
+  source = 'source',
+  product = 'product',
+}
+
+export const routes = [
+  { key: ChatSessionTab.answer, title: trans('answer') },
+  // { key: ChatSessionTab.source, title: trans('source') },
+  { key: ChatSessionTab.product, title: trans('product') },
+];
+
+export const getRouteKey = (tabIndex: number) => {
+  const routeKey = routes[tabIndex]?.key;
+  return routeKey;
+};

package/src/constants/events.ts

@@ -3,6 +3,7 @@ export const events = {
   updateMultipleMessage: 'update_multiple_message',
   forceUpdateMessages: 'force_update_messages',
   updateMessageError: 'update_message_error',
+  scrollToMessage: 'scroll_to_message',
 };
 
 export const GAEvents = {
@@ -37,4 +38,5 @@ export const GAEvents = {
   chatDetailLivechatBtnTap: 'ChatDetail_LivechatBtn_Tap',
   chatDetailFAQTap: 'ChatDetail_FAQ_Tap',
   chatDetailGiftDetailBtnTap: 'ChatDetail_GiftDetailBtn_Tap',
+  chatDetailJumpToMessageTap: 'ChatDetail_JumpToMessage_Tap',
 };

package/src/constants/index.ts

@@ -1,5 +1,6 @@
 import { createRef } from 'react';
 import { WithBottomSheetProps, WithPopupProps, WithToastProps } from '../types';
+export * from './chatTab';
 
 const MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER + 100;
 

package/src/constants/query.ts

@@ -8,4 +8,5 @@ export const QUERY_KEYS = {
   SHARE_SESSION: 'SHARE_SESSION',
   DELETE_SESSION: 'DELETE_SESSION',
   SEND_FEEDBACK: 'SEND_FEEDBACK',
+  GET_EXTERNAL_SESSION_INFO: 'GET_EXTERNAL_SESSION_INFO',
 };

package/src/context/ChatContext.tsx

@@ -1,8 +1,9 @@
-import { createContext, useContext, useRef } from 'react';
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
 import type { ChatContextType, ChatProviderProps } from '../types/chat';
 import ChatBotAI from '../components/chat';
 import Portal from '../components/portal';
 import ReanimatedDrawerExample from '../components/Drawer';
+import useSessionStore from '../store/session';
 
 export const ChatContext = createContext<ChatContextType>({
   apiAddress: '',
@@ -18,12 +19,17 @@ export const ChatContext = createContext<ChatContextType>({
   chatbotUrl: '',
   logGA: () => {},
   notifyError: () => {},
+  tabIndex: 0,
+  setTabIndex: () => {},
 });
 
 export const useChatContext = () => useContext(ChatContext);
 
 export const ChatProvider = (props: ChatProviderProps) => {
   const ref = useRef<any>(null);
+  const [tabIndex, setTabIndex] = useState(0);
+  const sessionId = useSessionStore((state) => state.sessionId);
+
   const openDrawer = () => {
     ref.current?.openDrawer();
   };
@@ -46,6 +52,10 @@ export const ChatProvider = (props: ChatProviderProps) => {
     notifyError,
   } = props;
 
+  useEffect(() => {
+    setTabIndex(0);
+  }, [sessionId]);
+
   return (
     <ChatContext.Provider
       value={{
@@ -63,6 +73,8 @@ export const ChatProvider = (props: ChatProviderProps) => {
         chatbotUrl,
         logGA,
         notifyError,
+        tabIndex,
+        setTabIndex,
       }}
     >
       <ReanimatedDrawerExample ref={ref}>

package/src/hooks/message/useMessage.ts

@@ -5,6 +5,8 @@ import { IMessageItem, SessionDetailResponse } from '../../types/dto';
 import { DeviceEventEmitter } from 'react-native';
 import { events } from '../../constants/events';
 import useStreamMessageStore from '../../store/streamMessage';
+import { useQueryClient } from '@tanstack/react-query';
+import { QUERY_KEYS } from '../../constants/query';
 
 const initialState = {
   id: '',
@@ -18,6 +20,7 @@ const initialState = {
   messages: [],
 };
 export const useMessage = () => {
+  const queryClient = useQueryClient();
   const sessionId = useSessionStore((state) => state.sessionId);
   const { mutateAsync: getSessionById } = useFetchSessionById();
   const [loadState, setLoadState] =
@@ -111,6 +114,9 @@ export const useMessage = () => {
         useStreamMessageStore
           .getState()
           .clearStreamMessageRecordById(messages.map((m) => m.id));
+        queryClient.refetchQueries({
+          queryKey: [QUERY_KEYS.GET_EXTERNAL_SESSION_INFO],
+        });
       }
     );
     const subUpdateMessageError = DeviceEventEmitter.addListener(
@@ -152,7 +158,7 @@ export const useMessage = () => {
       subForceUpdateMessages.remove();
       subUpdateMessageError.remove();
     };
-  }, []);
+  }, [queryClient]);
 
   return {
     messageState: loadState,

package/src/hooks/message/useSendMessage.ts

@@ -23,6 +23,7 @@ export const useSendMessage = () => {
   const { mutateAsync: createSession } = useCreateSession();
   const queryClient = useQueryClient();
   const logGA = useChatContext().logGA;
+  const setTabIndex = useChatContext().setTabIndex;
 
   const onSendMessage = useCallback(
     async (
@@ -30,6 +31,7 @@ export const useSendMessage = () => {
       attachments?: IAttachment[],
       actionType?: SendActionLogType
     ) => {
+      setTabIndex(0);
       const messageId = dayjs().valueOf().toString();
       const messageItem: IMessageItem = {
         id: messageId,
@@ -112,7 +114,7 @@ export const useSendMessage = () => {
         messageId
       );
     },
-    [startStream, createSession, queryClient, logGA]
+    [startStream, createSession, queryClient, logGA, setTabIndex]
   );
 
   return {

package/src/hooks/session/useGetExternalSessionInfo.ts

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query';
+import { QUERY_KEYS } from '../../constants/query';
+import { apiInstance } from '../../services';
+import { BaseResponse, IChatExternalSessionInfoResponse } from '../../types';
+import { ENDPOINTS } from '../../services/endpoints';
+
+interface IUseGetExternalSessionInfoProps {
+  sessionId: string;
+}
+
+export const useGetExternalSessionInfo = ({
+  sessionId,
+}: IUseGetExternalSessionInfoProps) =>
+  useQuery({
+    queryKey: [QUERY_KEYS.GET_EXTERNAL_SESSION_INFO, sessionId],
+    queryFn: async () => {
+      const res = await apiInstance?.get<
+        BaseResponse<IChatExternalSessionInfoResponse>
+      >(ENDPOINTS.assistantService.getExternalSessionInfo(sessionId));
+      return res?.data?.data || null;
+    },
+    enabled: !!sessionId,
+  });

package/src/ignore.d.ts

@@ -19,5 +19,6 @@ declare module '@droppii/libs' {
   export const KRating: any;
   export const KProduct: any;
   export const KFonts: any;
+  export const KBadge: any;
 }
 declare module '*';

package/src/services/endpoints.ts

@@ -17,6 +17,8 @@ export const ENDPOINTS = {
       `/assistant-service/v1/app/chat/sessions/${sessionId}/feedback`,
     generateAudio: (sessionId: string, messageId: string) =>
       `/assistant-service/v1/app/chat/sessions/${sessionId}/messages/${messageId}/speech`,
+    getExternalSessionInfo: (sessionId: string) =>
+      `/assistant-service/v1/app/chat/sessions/${sessionId}/tab-data`,
   },
   uploaderService: {
     upload: '/uploader-service/v1/uploader/permanently',

package/src/translation/resources/i18n.ts

@@ -56,6 +56,13 @@ const i18nKey: Record<string, string> = {
   //product
   commissions: 'LN: ',
   points: 'Points: ',
+
+  //tabs
+  answer: 'Trả lời',
+  source: 'Nguồn',
+  product: 'Sản phẩm',
+  view_original_message: 'Xem câu trả lời gốc',
+  empty_product: 'Không có sản phẩm nào',
 };
 
 export default {

package/src/types/chat.ts

@@ -17,6 +17,8 @@ export interface ChatContextType {
   chatbotUrl: string;
   logGA: (event: string, params?: any) => void;
   notifyError?: ErrorLogger;
+  tabIndex: number;
+  setTabIndex: (tabIndex: number) => void;
 }
 
 export interface ChatProviderProps {

package/src/types/dto.ts

@@ -199,3 +199,15 @@ export interface SendFeedbackResponse {
   success: boolean;
   message: string;
 }
+
+export interface ISessionProductItem extends IProductItem {
+  message_id?: string;
+}
+
+export interface IChatExternalSessionInfoResponse {
+  products: {
+    items: ISessionProductItem[];
+    count: number;
+  };
+  source: null;
+}