react-native-chatbot-ai 0.1.53 → 0.1.54

package/src/components/product/Card.tsx

@@ -27,11 +27,18 @@ interface IProductCardProps {
   messageId?: string;
   index?: number;
   showSensitiveInfo?: boolean;
+  data?: IProductItem;
+  onJumToMessage?: () => void;
+  wrapperStyle?: any;
+  showFavorite?: boolean;
 }
 
 const ProductCardWrapper = memo((props: IProductCardProps) => {
-  const { productId } = props;
-  const item = useProductsStore((state) => state.products[productId || '']);
+  const { productId, data } = props;
+  const fetchProduct = useProductsStore(
+    (state) => state.products[productId || '']
+  );
+  const item = data || fetchProduct;
 
   if (!item) {
     return null;
@@ -41,7 +48,7 @@ const ProductCardWrapper = memo((props: IProductCardProps) => {
 });
 ProductCardWrapper.displayName = 'ProductCardWrapper';
 
-const PRODUCT_WIDTH =
+export const PRODUCT_VERTICAL_WIDTH =
   (KDims.width - KSpacingValue['2rem'] - KSpacingValue['0.75rem']) / 2;
 
 const ProductCard = memo(
@@ -49,7 +56,10 @@ const ProductCard = memo(
     item,
     messageId,
     index,
-    showSensitiveInfo = true,
+    showSensitiveInfo = false,
+    onJumToMessage,
+    wrapperStyle,
+    showFavorite = false,
   }: IProductCardProps & { item: IProductItem }) => {
     const onAddToCart = useChatContext()?.onAddToCart;
     const onBuyNow = useChatContext()?.onBuyNow;
@@ -214,194 +224,218 @@ const ProductCard = memo(
     }, [onBuyNow, logGA, item, messageId]);
 
     return (
-      <KContainer.Touchable style={styles.container} onPress={onPress}>
-        <KContainer.View style={styles.image}>
-          <KImage.Base
-            uri={imageUrl}
-            size={PRODUCT_WIDTH - 2} // subtract border width
-            flashListForceRenderKey={id}
-            brTL="2x"
-            brTR="2x"
-          />
-          <KContainer.View style={styles.favoriteContainer}>
-            <KButton.Base
-              onPress={() => {}}
-              size="sm"
-              icon={{
-                vectorName: isFavorite ? 'heart-b' : 'heart-o',
-                size: 16,
-                tintColor: isFavorite
-                  ? KColors.danger.normal
-                  : KColors.gray.normal,
-              }}
-              br="round"
-              background={KColors.hexToRgba(KColors.white, 0.9)}
+      <KContainer.View style={[styles.wrapper, wrapperStyle && wrapperStyle]}>
+        <KContainer.Touchable style={styles.container} onPress={onPress}>
+          <KContainer.View style={styles.image}>
+            <KImage.Base
+              uri={imageUrl}
+              size={PRODUCT_VERTICAL_WIDTH - 2} // subtract border width
+              flashListForceRenderKey={id}
+              brTL="2x"
+              brTR="2x"
             />
-          </KContainer.View>
-          <KContainer.VisibleView visible={showPriceDiscount}>
-            <KContainer.View style={styles.discountContainer} row brBR="2x">
-              <KContainer.VisibleView visible={showPriceDiscount}>
-                <KContainer.View
-                  background={KColors.palette.danger.w400}
-                  paddingH={'0.5rem'}
-                  paddingV={'0.25rem'}
-                  id="price discount"
-                  brBR={'2x'}
-                >
-                  <KLabel.Text typo="Text2XsBold" color={KColors.white}>
-                    {`-${discountPercentage}%`}
-                  </KLabel.Text>
-                </KContainer.View>
-              </KContainer.VisibleView>
-            </KContainer.View>
-          </KContainer.VisibleView>
-          <KContainer.VisibleView visible={mVouchers.length > 0}>
-            <KContainer.View row style={styles.voucherContainer} id="promotion">
-              {mVouchers.map((i: any, idx: number) => {
-                const isLast = idx === vouchers.length - 1;
-                return (
-                  <KProduct.PromotionTag
-                    key={i.id}
-                    type={i.type as any}
-                    discount={i.discount}
-                    isFree={
-                      i.type === 'SHIPPING_FEE' && i.resultType === 'FREE'
-                    }
-                    brTR={isLast ? '2x' : undefined}
-                  />
-                );
-              })}
-            </KContainer.View>
-          </KContainer.VisibleView>
-          <KContainer.VisibleView visible={isSuspended}>
-            <KContainer.View style={styles.abs}>
-              <KLabel.Text
-                typo="TextXsBold"
-                color={KColors.palette.gray.w50}
-                textAlign
-              >
-                {'Tạm ngừng kinh doanh'}
-              </KLabel.Text>
-            </KContainer.View>
-          </KContainer.VisibleView>
-          <KContainer.VisibleView visible={isSoldOut}>
-            <KContainer.View style={styles.abs}>
-              <KLabel.Text
-                typo="TextXsBold"
-                color={KColors.palette.gray.w50}
-                textAlign
-              >
-                {'Hết hàng'}
-              </KLabel.Text>
-            </KContainer.View>
-          </KContainer.VisibleView>
-        </KContainer.View>
-
-        <KContainer.View style={styles.contentContainer}>
-          <KLabel.Text typo="TextSmMedium" numberOfLines={2}>
-            {name}
-          </KLabel.Text>
+            <KContainer.VisibleView visible={showFavorite}>
+              <KContainer.View style={styles.favoriteContainer}>
+                <KButton.Base
+                  onPress={() => {}}
+                  size="sm"
+                  icon={{
+                    vectorName: isFavorite ? 'heart-b' : 'heart-o',
+                    size: 16,
+                    tintColor: isFavorite
+                      ? KColors.danger.normal
+                      : KColors.gray.normal,
+                  }}
+                  br="round"
+                  background={KColors.hexToRgba(KColors.white, 0.9)}
+                />
+              </KContainer.View>
+            </KContainer.VisibleView>
 
-          <KContainer.VisibleView visible={showSensitiveInfo}>
-            <KContainer.View style={styles.sensitiveInfo}>
-              <KContainer.View row alignItems>
+            <KContainer.VisibleView visible={showPriceDiscount}>
+              <KContainer.View style={styles.discountContainer} row brBR="2x">
+                <KContainer.VisibleView visible={showPriceDiscount}>
+                  <KContainer.View
+                    background={KColors.palette.danger.w400}
+                    paddingH={'0.5rem'}
+                    paddingV={'0.25rem'}
+                    id="price discount"
+                    brBR={'2x'}
+                  >
+                    <KLabel.Text typo="Text2XsBold" color={KColors.white}>
+                      {`-${discountPercentage}%`}
+                    </KLabel.Text>
+                  </KContainer.View>
+                </KContainer.VisibleView>
+              </KContainer.View>
+            </KContainer.VisibleView>
+            <KContainer.VisibleView visible={mVouchers.length > 0}>
+              <KContainer.View
+                row
+                style={styles.voucherContainer}
+                id="promotion"
+              >
+                {mVouchers.map((i: any, idx: number) => {
+                  const isLast = idx === vouchers.length - 1;
+                  return (
+                    <KProduct.PromotionTag
+                      key={i.id}
+                      type={i.type as any}
+                      discount={i.discount}
+                      isFree={
+                        i.type === 'SHIPPING_FEE' && i.resultType === 'FREE'
+                      }
+                      brTR={isLast ? '2x' : undefined}
+                    />
+                  );
+                })}
+              </KContainer.View>
+            </KContainer.VisibleView>
+            <KContainer.VisibleView visible={isSuspended}>
+              <KContainer.View style={styles.abs}>
                 <KLabel.Text
-                  typo="TextXsNormal"
-                  color={KColors.secondary.normal}
+                  typo="TextXsBold"
+                  color={KColors.palette.gray.w50}
+                  textAlign
                 >
-                  {trans('commissions')}
+                  {'Tạm ngừng kinh doanh'}
+                </KLabel.Text>
+              </KContainer.View>
+            </KContainer.VisibleView>
+            <KContainer.VisibleView visible={isSoldOut}>
+              <KContainer.View style={styles.abs}>
+                <KLabel.Text
+                  typo="TextXsBold"
+                  color={KColors.palette.gray.w50}
+                  textAlign
+                >
+                  {'Hết hàng'}
+                </KLabel.Text>
+              </KContainer.View>
+            </KContainer.VisibleView>
+          </KContainer.View>
+
+          <KContainer.View style={styles.contentContainer}>
+            <KLabel.Text typo="TextSmMedium" numberOfLines={2}>
+              {name}
+            </KLabel.Text>
+
+            <KContainer.VisibleView visible={showSensitiveInfo}>
+              <KContainer.View style={styles.sensitiveInfo}>
+                <KContainer.View row alignItems>
                   <KLabel.Text
-                    typo="TextXsBold"
+                    typo="TextXsNormal"
                     color={KColors.secondary.normal}
                   >
-                    {minPriceByDiscountTxt}
+                    {trans('commissions')}
+                    <KLabel.Text
+                      typo="TextXsBold"
+                      color={KColors.secondary.normal}
+                    >
+                      {minPriceByDiscountTxt}
+                    </KLabel.Text>
                   </KLabel.Text>
+                  <KLabel.Text
+                    marginL={'0.25rem'}
+                    style={styles.labelLineThrough}
+                    typo="Text2XsNormal"
+                    color={KColors.gray.light}
+                    numberOfLines={1}
+                    flex
+                  >
+                    {minOriginalPriceByDiscountTxt}
+                  </KLabel.Text>
+                </KContainer.View>
+                <KLabel.Text typo="TextXsNormal" color={KColors.gray.normal}>
+                  {`${trans('points')}${PTManager.number.numberWithCommas(minBP || 0)}`}
                 </KLabel.Text>
+              </KContainer.View>
+            </KContainer.VisibleView>
+
+            <KContainer.View style={styles.priceContainer}>
+              <KLabel.Text
+                typo="TextNmBold"
+                color={KColors.palette.customer.w400}
+              >
+                {PTManager.number.formatCurrency(minPrice)}
+              </KLabel.Text>
+              <KContainer.VisibleView visible={showPriceDiscount}>
                 <KLabel.Text
-                  marginL={'0.25rem'}
                   style={styles.labelLineThrough}
                   typo="Text2XsNormal"
                   color={KColors.gray.light}
                   numberOfLines={1}
                   flex
                 >
-                  {minOriginalPriceByDiscountTxt}
+                  {originalPriceText}
                 </KLabel.Text>
-              </KContainer.View>
-              <KLabel.Text typo="TextXsNormal" color={KColors.gray.normal}>
-                {`${trans('points')}${PTManager.number.numberWithCommas(minBP || 0)}`}
-              </KLabel.Text>
+              </KContainer.VisibleView>
             </KContainer.View>
-          </KContainer.VisibleView>
-
-          <KContainer.View style={styles.priceContainer}>
-            <KLabel.Text
-              typo="TextNmBold"
-              color={KColors.palette.customer.w400}
-            >
-              {PTManager.number.formatCurrency(minPrice)}
-            </KLabel.Text>
-            <KContainer.VisibleView visible={showPriceDiscount}>
-              <KLabel.Text
-                style={styles.labelLineThrough}
-                typo="Text2XsNormal"
-                color={KColors.gray.light}
-                numberOfLines={1}
-                flex
-              >
-                {originalPriceText}
-              </KLabel.Text>
-            </KContainer.VisibleView>
-          </KContainer.View>
 
-          <KContainer.View style={styles.saleRow}>
-            <KContainer.View style={styles.ratingContainer}>
-              <KRating.Star point={5} size="x-small" />
-              <KLabel.Text typo="TextXsNormal" color={KColors.gray.light}>
-                {`${avgRating?.toFixed(1) || 0} (${totalRating || 0})`}
-              </KLabel.Text>
-              <KContainer.View height={12}>
-                <KDivider
-                  vertical
-                  type="line"
-                  background={KColors.border.light}
-                  size="xs"
-                />
+            <KContainer.View style={styles.saleRow}>
+              <KContainer.View style={styles.ratingContainer}>
+                <KRating.Star point={5} size="x-small" />
+                <KLabel.Text typo="TextXsNormal" color={KColors.gray.light}>
+                  {`${avgRating?.toFixed(1) || 0} (${totalRating || 0})`}
+                </KLabel.Text>
+                <KContainer.View height={12}>
+                  <KDivider
+                    vertical
+                    type="line"
+                    background={KColors.border.light}
+                    size="xs"
+                  />
+                </KContainer.View>
+                <KLabel.Text
+                  flex
+                  numberOfLines={1}
+                  typo="TextXsNormal"
+                  color={KColors.gray.normal}
+                >
+                  {totalSoldTxt}
+                </KLabel.Text>
               </KContainer.View>
-              <KLabel.Text
-                flex
-                numberOfLines={1}
-                typo="TextXsNormal"
-                color={KColors.gray.normal}
-              >
-                {totalSoldTxt}
-              </KLabel.Text>
             </KContainer.View>
-          </KContainer.View>
 
-          <KContainer.View style={styles.actionContainer}>
-            <KButton.Base
-              onPress={onPressAddToCart}
-              background={KColors.palette.primary.w25}
-              tintColor={KColors.primary.normal}
-              icon={{
-                vectorName: 'cart-plus-o',
-                size: 16,
-              }}
-              size="sm"
-              disabled={!isEnabledAddToCart}
-            />
-            <KButton.Solid
-              onPress={onPressBuyNow}
-              size="sm"
-              label="Mua ngay"
-              kind="primary"
-              disabled={!isEnabledBuyNow}
-              enhanceStyle={styles.buttonBuyNow}
-            />
+            <KContainer.View style={styles.actionContainer}>
+              <KButton.Base
+                onPress={onPressAddToCart}
+                background={KColors.palette.primary.w25}
+                tintColor={KColors.primary.normal}
+                icon={{
+                  vectorName: 'cart-plus-o',
+                  size: 16,
+                }}
+                size="sm"
+                disabled={!isEnabledAddToCart}
+              />
+              <KButton.Solid
+                onPress={onPressBuyNow}
+                size="sm"
+                label="Mua ngay"
+                kind="primary"
+                disabled={!isEnabledBuyNow}
+                enhanceStyle={styles.buttonBuyNow}
+              />
+            </KContainer.View>
           </KContainer.View>
-        </KContainer.View>
-      </KContainer.Touchable>
+        </KContainer.Touchable>
+        <KContainer.VisibleView visible={!!onJumToMessage}>
+          <KContainer.Touchable
+            style={styles.jumpToMessageContainer}
+            onPress={onJumToMessage}
+          >
+            <KLabel.Text typo="TextSmNormal" color={KColors.gray.dark}>
+              {trans('view_original_message')}
+            </KLabel.Text>
+            <KImage.VectorIcons
+              name="arrow-right-o"
+              size={16}
+              color={KColors.gray.dark}
+            />
+          </KContainer.Touchable>
+        </KContainer.VisibleView>
+      </KContainer.View>
     );
   }
 );
@@ -411,17 +445,28 @@ ProductCard.displayName = 'ProductCard';
 export default ProductCardWrapper;
 
 const styles = StyleSheet.create({
+  wrapper: {
+    width: PRODUCT_VERTICAL_WIDTH,
+    borderRadius: KRadiusValue['2x'],
+    backgroundColor: KColors.opacity.gray[10],
+  },
   container: {
     borderRadius: KRadiusValue['2x'],
     borderWidth: 1,
     borderColor: KColors.hexToRgba(KColors.gray.dark, 0.2),
-    width: PRODUCT_WIDTH,
+    width: PRODUCT_VERTICAL_WIDTH,
     backgroundColor: KColors.white,
+
+    shadowColor: 'rgba(14, 28, 52, 0.1)',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 1,
+    shadowRadius: 12,
+    elevation: 6,
   },
   image: {
     position: 'relative',
-    width: PRODUCT_WIDTH - 2, // border width
-    height: PRODUCT_WIDTH - 2, // border width
+    width: PRODUCT_VERTICAL_WIDTH - 2, // border width
+    height: PRODUCT_VERTICAL_WIDTH - 2, // border width
   },
   favoriteContainer: {
     position: 'absolute',
@@ -443,7 +488,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     padding: KSpacingValue['1rem'],
     backgroundColor: KColors.hexToRgba(KColors.black, 0.5),
-    borderRadius: KRadiusValue['2x'],
+    borderTopLeftRadius: KRadiusValue['2x'],
+    borderTopRightRadius: KRadiusValue['2x'],
     ...StyleSheet.absoluteFillObject,
   },
   contentContainer: {
@@ -481,4 +527,13 @@ const styles = StyleSheet.create({
   buttonBuyNow: {
     flex: 1,
   },
+  jumpToMessageContainer: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    paddingTop: 10,
+    paddingBottom: KSpacingValue['0.5rem'],
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: KSpacingValue['0.25rem'],
+  },
 });

package/src/components/product/CardHorizontal.tsx

@@ -24,6 +24,7 @@ interface IProductHorizontalCardProps {
   productId?: string;
   messageId?: string;
   index?: number;
+  showFavorite?: boolean;
 }
 
 const ProductHorizontalCardWrapper = memo(
@@ -45,6 +46,7 @@ const ProductHorizontalCard = memo(
     item,
     messageId,
     index,
+    showFavorite = false,
   }: IProductHorizontalCardProps & { item: IProductItem }) => {
     const onAddToCart = useChatContext()?.onAddToCart;
     const onBuyNow = useChatContext()?.onBuyNow;
@@ -195,21 +197,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/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 = {

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 {