react-native-chatbot-ai 0.1.22 → 0.1.24

package/src/components/chat/footer/index.tsx

@@ -70,15 +70,19 @@ export type UploadItem = ImageUpload | FileUpload;
 const MAX_FILE_UPLOAD = 3;
 const MAX_FILE_SIZE = 30 * 1024 * 1024;
 const MAX_IMAGE_SIZE = 7 * 1024 * 1024;
-const SCROLL_IDLE_TIME = 60000;
+const COUNTDOWN_MS = 60000;
 
 interface IChatFooterProps {
   lastMessage?: IMessageItem;
 }
 
 const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
-  const idleTimerRef = useRef<NodeJS.Timeout | null>(null);
-  const hasScrolledRef = useRef(false);
+  const countdownRef = useRef<NodeJS.Timeout | null>(null);
+  const isInCountdownRef = useRef(false);
+  const firstVisibleItemRef = useRef<ISuggestionItem | null>(null);
+
+  const viewabilityConfig = useRef({ itemVisiblePercentThreshold: 10 }).current;
+
   const menuRef = useRef(null);
   const logGA = useChatContext().logGA;
   const { onSendMessage, stopStream } = useSendMessage();
@@ -92,9 +96,9 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
 
   const isDisabledSend = useMemo(() => {
     return (
-      isStreaming ||
-      message.trim() === '' ||
-      (fileUpload.length > 0 && fileUpload.some((i) => !i.remoteUrl))
+      !isStreaming &&
+      (message.trim() === '' ||
+        (fileUpload.length > 0 && fileUpload.some((i) => !i.remoteUrl)))
     );
   }, [isStreaming, message, fileUpload]);
 
@@ -364,39 +368,34 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
     [onPressItemSuggestion]
   );
 
-  const clearIdleTimer = () => {
-    if (idleTimerRef.current) {
-      clearTimeout(idleTimerRef.current);
-      idleTimerRef.current = null;
+  const onViewableItemsChanged = useRef(({ viewableItems }: any) => {
+    if (viewableItems && viewableItems.length > 0) {
+      firstVisibleItemRef.current = viewableItems[0].item;
     }
-  };
+  }).current;
+
+  const logFirstVisibleItem = useCallback(() => {
+    if (!firstVisibleItemRef.current) return;
 
-  const onUserIdleAfterScroll = useCallback(() => {
     logGA(GAEvents.chatDetailInConvPrmSuggScroll, {
       group_id: lastMessage?.group_suggestion_id,
-      message_id: lastMessage?.id,
+      message_chat_id: lastMessage?.id,
+      suggestion_id: firstVisibleItemRef.current.suggestion_id,
     });
-  }, [lastMessage, logGA]);
-
-  const resetIdleTimer = useCallback(() => {
-    clearIdleTimer();
-
-    hasScrolledRef.current = true;
 
-    idleTimerRef.current = setTimeout(() => {
-      if (hasScrolledRef.current) {
-        onUserIdleAfterScroll();
-      }
-    }, SCROLL_IDLE_TIME);
-  }, [onUserIdleAfterScroll]);
-
-  const handleScroll = () => {
-    resetIdleTimer();
-  };
+    // Bắt đầu countdown
+    isInCountdownRef.current = true;
+    countdownRef.current = setTimeout(() => {
+      isInCountdownRef.current = false;
+      countdownRef.current = null;
+    }, COUNTDOWN_MS);
+  }, [lastMessage, logGA]);
 
-  const handleMomentumEnd = () => {
-    resetIdleTimer();
-  };
+  const handleMomentumEnd = useCallback(() => {
+    if (!isInCountdownRef.current) {
+      logFirstVisibleItem();
+    }
+  }, [logFirstVisibleItem]);
 
   return (
     <KContainer.View style={styles.container}>
@@ -413,9 +412,10 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
           horizontal
           keyExtractor={(item: ISuggestionItem) => item.suggestion_id}
           contentContainerStyle={styles.suggessionContainer}
-          onScroll={handleScroll}
+          onViewableItemsChanged={onViewableItemsChanged}
+          viewabilityConfig={viewabilityConfig}
+          scrollEventThrottle={16}
           onMomentumScrollEnd={handleMomentumEnd}
-          scrollEventThrottle={200}
         />
       </KContainer.VisibleView>
       <KContainer.VisibleView visible={fileUpload.length > 0}>
@@ -503,7 +503,6 @@ const styles = StyleSheet.create({
   container: {
     paddingHorizontal: KSpacingValue['0.75rem'],
     paddingVertical: KSpacingValue['0.5rem'],
-    gap: KSpacingValue['0.5rem'],
     borderWidth: 1,
     borderColor: KColors.hexToRgba(KColors.black, 0.15),
     borderBottomWidth: 0,
@@ -521,6 +520,7 @@ const styles = StyleSheet.create({
   },
   input: {
     maxHeight: 100,
+    marginBottom: 8,
   },
   popover: {
     borderRadius: KRadiusValue['4x'],
@@ -540,9 +540,11 @@ const styles = StyleSheet.create({
   listUploadItem: {
     gap: KSpacingValue['0.75rem'],
     paddingTop: 6,
+    paddingBottom: 8,
   },
   suggessionContainer: {
     gap: KSpacingValue['0.25rem'],
+    paddingBottom: 8,
   },
   suggestionItem: {
     backgroundColor: KColors.palette.gray.w25,

package/src/components/chat/item/ChatAIAnswerMessageItem.tsx

@@ -170,25 +170,30 @@ export function useStreamingMarkdownBlocks(text: string) {
 class CustomRenderer extends Renderer implements RendererInterface {
   constructor(
     openImageViewer?: (images: { url: string }[], index: number) => void,
-    messageId?: string
+    messageId?: string,
+    productIds?: string[]
   ) {
     super();
     this.openImageViewer = openImageViewer;
     this.messageId = messageId;
+    this.productIds = productIds;
   }
 
   openImageViewer?: (images: { url: string }[], index: number) => void;
   messageId?: string;
+  productIds?: string[];
 
   html(text: string): ReactNode {
     const match = /^<!--\s*@component:(\w+)\(id:([\w-]+)\)\s*-->/.exec(text);
     switch (match?.[1]) {
       case 'product':
+        const productIndex = this.productIds?.indexOf(match?.[2] || '');
         return (
           <ProductHorizontalCard
             productId={match?.[2]}
             key={this.getKey()}
             messageId={this.messageId}
+            index={productIndex}
           />
         );
       default:
@@ -300,12 +305,14 @@ class CustomRenderer extends Renderer implements RendererInterface {
 
   hr(_styles?: any): ReactNode {
     return (
-      <KDivider
-        key={this.getKey()}
-        type="line"
-        size="sm"
-        background={KColors.hexToRgba(KColors.gray.dark, 0.2)}
-      />
+      <KContainer.View marginV={'0.5rem'}>
+        <KDivider
+          key={this.getKey()}
+          type="line"
+          size="sm"
+          background={KColors.hexToRgba(KColors.gray.dark, 0.2)}
+        />
+      </KContainer.View>
     );
   }
 
@@ -356,18 +363,27 @@ class CustomRenderer extends Renderer implements RendererInterface {
       />
     );
   }
+
+  heading(text: string | ReactNode[]): ReactNode {
+    return (
+      <KLabel.Text key={this.getKey()} typo="TextMdBold">
+        {text}
+      </KLabel.Text>
+    );
+  }
 }
 
 const markedStyles: MarkedStyles = {
   paragraph: {
-    marginVertical: 5,
+    marginVertical: 4,
   },
   blockquote: {
-    marginVertical: 5,
+    marginVertical: 4,
   },
   li: {
-    marginVertical: 5,
+    marginVertical: 4,
     justifyContent: 'center',
+    color: KColors.gray.dark,
   },
 };
 
@@ -408,13 +424,13 @@ const ChatAIAnswerMessageItem = ({
     return ids;
   }, [isStreaming, streamMessage, item]);
 
-  const {} = useSearchProduct({ productIds });
+  useSearchProduct({ productIds });
 
   const products = useProductsStore((state) => state.products);
 
   const renderer = useMemo(
-    () => new CustomRenderer(openImageViewer, item.id),
-    [openImageViewer, item.id]
+    () => new CustomRenderer(openImageViewer, item.id, productIds),
+    [openImageViewer, item.id, productIds]
   );
   const tokenizer = useMemo(() => new CustomTokenizer(), []);
 

package/src/components/chat/item/DeeplinkItem.tsx

@@ -63,7 +63,7 @@ const DeeplinkItem = ({ children, href, messageId }: DeeplinkItemProps) => {
       if (data?.type === 'gift') {
         logGA(GAEvents.chatDetailGiftDetailBtnTap, {
           conversation_id: useSessionStore.getState().sessionId,
-          message_id: messageId,
+          message_chat_id: messageId,
           gift_id: data?.id,
         });
         return;
@@ -71,7 +71,7 @@ const DeeplinkItem = ({ children, href, messageId }: DeeplinkItemProps) => {
       if (data?.type === 'faq') {
         logGA(GAEvents.chatDetailFAQTap, {
           conversation_id: useSessionStore.getState().sessionId,
-          message_id: messageId,
+          message_chat_id: messageId,
           deeplink_id: data?.id,
         });
         return;
@@ -79,7 +79,7 @@ const DeeplinkItem = ({ children, href, messageId }: DeeplinkItemProps) => {
       if (data?.type === 'cx-support') {
         logGA(GAEvents.chatDetailLivechatBtnTap, {
           conversation_id: useSessionStore.getState().sessionId,
-          message_id: messageId,
+          message_chat_id: messageId,
         });
         return;
       }

package/src/components/chat/item/MessageActionsBar.tsx

@@ -98,7 +98,7 @@ const MessageActionsBar = ({
   // Handlers
   const handleCopy = useCallback(() => {
     logGA(GAEvents.chatDetailCopyBtnTap, {
-      message_id: messageId,
+      message_chat_id: messageId,
     });
     copyToClipboard(messageContent);
   }, [messageContent, copyToClipboard, logGA, messageId]);
@@ -159,8 +159,8 @@ const MessageActionsBar = ({
                 ]}
               >
                 <KImage.VectorIcons
-                  name="like-thumbup-b"
-                  size={16}
+                  name="thumb-like-o"
+                  size={20}
                   color={
                     isLikeActive ? KColors.primary.normal : KColors.gray.light
                   }
@@ -215,8 +215,8 @@ const MessageActionsBar = ({
                 ]}
               >
                 <KImage.VectorIcons
-                  name="like-thumbdown-b"
-                  size={16}
+                  name="thumb-dislike-o"
+                  size={20}
                   color={
                     isDislikeActive
                       ? KColors.primary.normal
@@ -253,7 +253,7 @@ const MessageActionsBar = ({
         {/* Audio Button */}
         <ActionButton
           icon={audioButtonProps.icon}
-          iconSize={16}
+          iconSize={20}
           iconColor={audioButtonProps.iconColor}
           isActive={audioButtonProps.isActive}
           isLoading={isAudioLoading}
@@ -264,7 +264,7 @@ const MessageActionsBar = ({
         {/* Copy Button */}
         <ActionButton
           icon="copy-o"
-          iconSize={16}
+          iconSize={20}
           isLoading={isCopying}
           onPress={handleCopy}
           testID="copy-button"
@@ -272,8 +272,8 @@ const MessageActionsBar = ({
 
         {/* Share Button */}
         <ActionButton
-          icon="share-o"
-          iconSize={16}
+          icon="text-share-o"
+          iconSize={20}
           isLoading={isSharing}
           onPress={shareMessage}
           testID="share-button"

package/src/components/portal/Popup.tsx

@@ -57,9 +57,13 @@ const PADDING_VERTICAL = KDims.isIphoneX ? UNIT * 3 : UNIT * 2.25;
 const PADDING_HORIZONTAL = UNIT;
 const CONTENT_MAX_HEIGHT = VIEWABLE_HEIGHT - 2 * PADDING_VERTICAL;
 
+export type IPopupProps = KPopupProps & {
+  onPressClose?: () => void;
+};
+
 const Popup = forwardRef<WithPopupProps>((_, ref) => {
-  const queue = useRef<KPopupProps[]>([]);
-  const [data, setData] = useState<KPopupProps | undefined>(undefined);
+  const queue = useRef<IPopupProps[]>([]);
+  const [data, setData] = useState<IPopupProps | undefined>(undefined);
 
   const scale = useSharedValue(1);
 
@@ -69,6 +73,7 @@ const Popup = forwardRef<WithPopupProps>((_, ref) => {
     actions,
     backgroundColor = KColors.white,
     wrapperStyle = {},
+    onPressClose,
   } = data || {};
 
   const { showCloseButton, subTitle, title, alignment } = header || {};
@@ -84,6 +89,11 @@ const Popup = forwardRef<WithPopupProps>((_, ref) => {
     setData(newPayload);
   }, [scale]);
 
+  const handleDismiss = useCallback(() => {
+    dismiss();
+    onPressClose?.();
+  }, [dismiss, onPressClose]);
+
   useImperativeHandle(
     ref,
     () => ({
@@ -177,12 +187,12 @@ const Popup = forwardRef<WithPopupProps>((_, ref) => {
         </KContainer.View>
         {showCloseButton && (
           <KContainer.View marginL={'1rem'}>
-            <KButton.Close onPress={dismiss} />
+            <KButton.Close onPress={handleDismiss} />
           </KContainer.View>
         )}
       </KContainer.View>
     );
-  }, [alignment, data, dismiss, showCloseButton, subTitle, title]);
+  }, [alignment, data, handleDismiss, showCloseButton, subTitle, title]);
 
   const renderActions = useMemo(() => {
     if (!actions?.buttons) {

package/src/components/product/CardHorizontal.tsx

@@ -2,7 +2,7 @@ import {
   KButton,
   KColors,
   KContainer,
-  KDims,
+  // KDims,
   KImage,
   KLabel,
   KRadiusValue,
@@ -16,17 +16,18 @@ import { StyleSheet } from 'react-native';
 import useProductsStore from '../../store/products';
 import { PRODUCT_STATUSES } from '../../types';
 import { useChatContext } from '../../context/ChatContext';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+// import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { GAEvents } from '../../constants/events';
 import useSessionStore from '../../store/session';
 
 interface IProductHorizontalCardProps {
   productId?: string;
   messageId?: string;
+  index?: number;
 }
 
 const ProductHorizontalCard = (props: IProductHorizontalCardProps) => {
-  const { productId, messageId } = props;
+  const { productId, messageId, index } = props;
   const item = useProductsStore((state) =>
     state.products.find((p) => p.id === productId)
   );
@@ -142,9 +143,9 @@ const ProductHorizontalCard = (props: IProductHorizontalCardProps) => {
     logGA(GAEvents.chatDetailProductCardTap, {
       conversation_id: useSessionStore.getState().sessionId,
       product_id: item.id,
-      position_in_list: -1, //TODO: fix
+      position_in_list: index,
     });
-  }, [onNavigateToProduct, logGA, item]);
+  }, [onNavigateToProduct, logGA, item, index]);
 
   const onPressAddToCart = useCallback(() => {
     if (!item) return;
@@ -152,11 +153,11 @@ const ProductHorizontalCard = (props: IProductHorizontalCardProps) => {
     logGA(GAEvents.chatDetailAddToCartBtnTap, {
       conversation_id: useSessionStore.getState().sessionId,
       product_id: item.id,
-      position_in_list: -1, //TODO: fix
+      position_in_list: index,
       pdp_id: item.pdpId,
-      message_id: messageId,
+      message_chat_id: messageId,
     });
-  }, [onAddToCart, logGA, item, messageId]);
+  }, [onAddToCart, logGA, item, messageId, index]);
 
   const onPressBuyNow = useCallback(() => {
     if (!item) return;
@@ -166,46 +167,46 @@ const ProductHorizontalCard = (props: IProductHorizontalCardProps) => {
       product_id: item.id,
       position_in_list: -1, //TODO: fix
       pdp_id: item.pdpId,
-      message_id: messageId,
+      message_chat_id: messageId,
     });
   }, [onBuyNow, logGA, item, messageId]);
 
-  if (!item) {
-    return (
-      <KContainer.View style={styles.container}>
-        <SkeletonPlaceholder borderRadius={4} speed={2000} direction="right">
-          <SkeletonPlaceholder.Item flexDirection="row" gap={12}>
-            <SkeletonPlaceholder.Item
-              width={72}
-              height={72}
-              borderRadius={12}
-            />
-            <SkeletonPlaceholder.Item
-              gap={12}
-              width={KDims.width - 160}
-              justifyContent="space-between"
-            >
-              <SkeletonPlaceholder.Item
-                height={16}
-                width={KDims.width / 2}
-                borderRadius={4}
-              />
-              <SkeletonPlaceholder.Item
-                height={16}
-                width={160}
-                borderRadius={4}
-              />
-              <SkeletonPlaceholder.Item
-                height={16}
-                width={80}
-                borderRadius={4}
-              />
-            </SkeletonPlaceholder.Item>
-          </SkeletonPlaceholder.Item>
-        </SkeletonPlaceholder>
-      </KContainer.View>
-    );
-  }
+  // if (!item) {
+  //   return (
+  //     <KContainer.View style={styles.container}>
+  //       <SkeletonPlaceholder borderRadius={4} speed={2000} direction="right">
+  //         <SkeletonPlaceholder.Item flexDirection="row" gap={12}>
+  //           <SkeletonPlaceholder.Item
+  //             width={72}
+  //             height={72}
+  //             borderRadius={12}
+  //           />
+  //           <SkeletonPlaceholder.Item
+  //             gap={12}
+  //             width={KDims.width - 160}
+  //             justifyContent="space-between"
+  //           >
+  //             <SkeletonPlaceholder.Item
+  //               height={16}
+  //               width={KDims.width / 2}
+  //               borderRadius={4}
+  //             />
+  //             <SkeletonPlaceholder.Item
+  //               height={16}
+  //               width={160}
+  //               borderRadius={4}
+  //             />
+  //             <SkeletonPlaceholder.Item
+  //               height={16}
+  //               width={80}
+  //               borderRadius={4}
+  //             />
+  //           </SkeletonPlaceholder.Item>
+  //         </SkeletonPlaceholder.Item>
+  //       </SkeletonPlaceholder>
+  //     </KContainer.View>
+  //   );
+  // }
 
   return (
     <KContainer.Touchable style={styles.container} onPress={onPress}>

package/src/hooks/message/useStreamMessage.ts

@@ -2,6 +2,7 @@ import { useEffect, useRef, useCallback } from 'react';
 import { useChatContext } from '../../context/ChatContext';
 import { ENDPOINTS } from '../../services/endpoints';
 import {
+  ISuggestionItem,
   SendActionLogType,
   type IMessageItem,
   type StreamMessageRequest,
@@ -91,10 +92,21 @@ export const useStreamMessage = () => {
             },
           ]);
         } else {
-          DeviceEventEmitter.emit(
-            events.forceUpdateMessages,
-            Object.values(buffers)
-          );
+          const arrMessages = Object.values(buffers);
+          DeviceEventEmitter.emit(events.forceUpdateMessages, arrMessages);
+          arrMessages.forEach((m) => {
+            if (m?.metadata?.suggestion?.length > 0) {
+              logGA?.(GAEvents.chatDetailInConvPrmSuggReturn, {
+                conversation_id: sessionId,
+                message_chat_id: m?.id,
+                group_id: m?.group_suggestion_id,
+                suggestion_id:
+                  m?.suggestions
+                    ?.map((s: ISuggestionItem) => s?.suggestion_id)
+                    ?.join(',') || '',
+              });
+            }
+          });
         }
         es.close();
         buffers = {};
@@ -144,7 +156,7 @@ export const useStreamMessage = () => {
 
       esRef.current = es;
     },
-    [apiAddress, setIsStreaming, setStreamMessage]
+    [apiAddress, setIsStreaming, setStreamMessage, logGA, sessionId]
   );
 
   const stopStream = useCallback(() => {