react-native-chatbot-ai 0.1.21 → 0.1.22

package/src/components/chat/ChatMessageList.tsx

@@ -5,7 +5,9 @@ import ChatEmpty from './ChatEmpty';
 import ChatItem from './item';
 import { KSpacingValue, KColors, KImage, KContainer } from '@droppii/libs';
 import type { IMessageItem } from '../../types';
-import { events } from '../../constants/events';
+import { events, GAEvents } from '../../constants/events';
+import { useChatContext } from '../../context/ChatContext';
+import useSessionStore from '../../store/session';
 
 const FlatListComponent = FlatList as unknown as ComponentType<any>;
 
@@ -14,6 +16,9 @@ interface IChatMessageListProps {
 }
 
 const ChatMessageList = ({ messageList = [] }: IChatMessageListProps) => {
+  const logGA = useChatContext().logGA;
+  const sessionId = useSessionStore((state) => state.sessionId);
+
   const flatListRef = useRef<any>(null);
   const scrollOffsetRef = useRef(0);
   const [showScrollToBottom, setShowScrollToBottom] = useState(false);
@@ -53,6 +58,16 @@ const ChatMessageList = ({ messageList = [] }: IChatMessageListProps) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (!sessionId) {
+      logGA(GAEvents.newChatPageView);
+    } else {
+      logGA(GAEvents.chatDetailPageView, {
+        conversation_id: sessionId,
+      });
+    }
+  }, [sessionId, logGA]);
+
   return (
     <View style={{ flex: 1 }}>
       <FlatListComponent

package/src/components/chat/SuggestionItem.tsx

@@ -13,10 +13,11 @@ import { StyleSheet } from 'react-native';
 
 interface SuggestionItemProps {
   item: ISuggestionItem;
-  onPressItem: (item: ISuggestionItem) => void;
+  index: number;
+  onPressItem: (item: ISuggestionItem, index: number) => void;
 }
 
-const SuggestionItem = ({ item, onPressItem }: SuggestionItemProps) => {
+const SuggestionItem = ({ item, index, onPressItem }: SuggestionItemProps) => {
   const icon = useMemo(() => {
     switch (item.category) {
       case SuggestionCategory.product:
@@ -81,7 +82,7 @@ const SuggestionItem = ({ item, onPressItem }: SuggestionItemProps) => {
   return (
     <KContainer.Touchable
       style={styles.container}
-      onPress={() => onPressItem(item)}
+      onPress={() => onPressItem(item, index)}
     >
       {icon}
       <KLabel.Text flex typo="TextNmNormal">

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

@@ -44,9 +44,13 @@ import {
   IMessageItem,
   ISuggestionItem,
   MessageType,
+  SendActionLogType,
 } from '../../../types';
 import UIUtils from '../../../utils/ui';
-import trans from '../../../translation';
+import { trans } from '../../../translation';
+import { useChatContext } from '../../../context/ChatContext';
+import { GAEvents } from '../../../constants/events';
+import useSessionStore from '../../../store/session';
 
 const { Popover } = renderers;
 export interface ImageUpload extends Image {
@@ -66,13 +70,17 @@ 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;
 
 interface IChatFooterProps {
   lastMessage?: IMessageItem;
 }
 
 const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
+  const idleTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const hasScrolledRef = useRef(false);
   const menuRef = useRef(null);
+  const logGA = useChatContext().logGA;
   const { onSendMessage, stopStream } = useSendMessage();
   const [message, setMessage] = useState('');
   const isStreaming = useStreamMessageStore((state) => state.isStreaming);
@@ -139,7 +147,12 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
         return [...prev, ...uniqueImages];
       });
     }
-  }, [fileUpload]);
+
+    logGA(GAEvents.chatDetailMultimodalTap, {
+      conversation_id: useSessionStore.getState().sessionId,
+      button: 'image',
+    });
+  }, [fileUpload, logGA]);
 
   const onPressCameraPicker = useCallback(async () => {
     Keyboard.dismiss();
@@ -168,7 +181,11 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
         return [...prev, { ...newImage, uploadType: 'image' }];
       });
     }
-  }, [fileUpload]);
+    logGA(GAEvents.chatDetailMultimodalTap, {
+      conversation_id: useSessionStore.getState().sessionId,
+      button: 'image',
+    });
+  }, [fileUpload, logGA]);
 
   const menuItems = useMemo(() => {
     return [
@@ -188,6 +205,9 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
   const onPressSend = useCallback(() => {
     if (isStreaming) {
       stopStream();
+      logGA(GAEvents.chatDetailStopChatBtnTap, {
+        conversation_id: useSessionStore.getState().sessionId,
+      });
       return;
     }
     const attachments: IAttachment[] = fileUpload.map((i) => ({
@@ -201,10 +221,10 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
         : i.type) as IAttachment['mime_type'],
     }));
 
-    onSendMessage(message?.trim(), attachments);
+    onSendMessage(message?.trim(), attachments, SendActionLogType.sendBtn);
     setMessage('');
     setFileUpload([]);
-  }, [message, isStreaming, onSendMessage, stopStream, fileUpload]);
+  }, [message, isStreaming, onSendMessage, stopStream, fileUpload, logGA]);
 
   const handleUploadSuccess = useCallback((item: UploadItem) => {
     if (item.uploadType === 'image') {
@@ -305,18 +325,37 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
         return [...prev, { ...newDocument, uploadType: 'file' }];
       });
     }
-  }, [fileUpload]);
+    logGA(GAEvents.chatDetailMultimodalTap, {
+      conversation_id: useSessionStore.getState().sessionId,
+      button: 'file',
+    });
+  }, [fileUpload, logGA]);
 
-  const onPressItemSuggestion = debounce((item: ISuggestionItem) => {
-    onSendMessage(item.content);
-  }, 200);
+  const onPressItemSuggestion = debounce(
+    (item: ISuggestionItem, index: number) => {
+      onSendMessage(
+        item.content,
+        undefined,
+        SendActionLogType.promptSuggestion
+      );
+      logGA(GAEvents.chatDetailInConvPrmSuggTap, {
+        conversation_id: useSessionStore.getState().sessionId,
+        group_id: lastMessage?.group_suggestion_id,
+        suggestion_id: item.suggestion_id,
+        suggestion_content: item.content,
+        suggestion_cate: item.category,
+        order: index,
+      });
+    },
+    200
+  );
 
   const renderSuggestionItem = useCallback(
-    (item: ISuggestionItem) => {
+    (item: ISuggestionItem, index: number) => {
       return (
         <KContainer.Touchable
           style={styles.suggestionItem}
-          onPress={() => onPressItemSuggestion(item)}
+          onPress={() => onPressItemSuggestion(item, index)}
         >
           <KLabel.Text typo="TextSmNormal">{item?.content || ''}</KLabel.Text>
         </KContainer.Touchable>
@@ -325,17 +364,58 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
     [onPressItemSuggestion]
   );
 
+  const clearIdleTimer = () => {
+    if (idleTimerRef.current) {
+      clearTimeout(idleTimerRef.current);
+      idleTimerRef.current = null;
+    }
+  };
+
+  const onUserIdleAfterScroll = useCallback(() => {
+    logGA(GAEvents.chatDetailInConvPrmSuggScroll, {
+      group_id: lastMessage?.group_suggestion_id,
+      message_id: lastMessage?.id,
+    });
+  }, [lastMessage, logGA]);
+
+  const resetIdleTimer = useCallback(() => {
+    clearIdleTimer();
+
+    hasScrolledRef.current = true;
+
+    idleTimerRef.current = setTimeout(() => {
+      if (hasScrolledRef.current) {
+        onUserIdleAfterScroll();
+      }
+    }, SCROLL_IDLE_TIME);
+  }, [onUserIdleAfterScroll]);
+
+  const handleScroll = () => {
+    resetIdleTimer();
+  };
+
+  const handleMomentumEnd = () => {
+    resetIdleTimer();
+  };
+
   return (
     <KContainer.View style={styles.container}>
       <KContainer.VisibleView visible={isShowSuggestions}>
         <FlatListComponent
           data={lastMessage?.suggestions || []}
-          renderItem={({ item }: { item: ISuggestionItem }) =>
-            renderSuggestionItem(item)
-          }
+          renderItem={({
+            item,
+            index,
+          }: {
+            item: ISuggestionItem;
+            index: number;
+          }) => renderSuggestionItem(item, index)}
           horizontal
           keyExtractor={(item: ISuggestionItem) => item.suggestion_id}
           contentContainerStyle={styles.suggessionContainer}
+          onScroll={handleScroll}
+          onMomentumScrollEnd={handleMomentumEnd}
+          scrollEventThrottle={200}
         />
       </KContainer.VisibleView>
       <KContainer.VisibleView visible={fileUpload.length > 0}>
@@ -429,6 +509,7 @@ const styles = StyleSheet.create({
     borderBottomWidth: 0,
     borderTopLeftRadius: KSpacingValue['1.25rem'],
     borderTopRightRadius: KSpacingValue['1.25rem'],
+    backgroundColor: KColors.white,
   },
   actions: {
     flexDirection: 'row',

package/src/components/chat/footer/item/UploadImageItem.tsx

@@ -9,6 +9,9 @@ import { ImageUpload } from '..';
 import { StyleSheet } from 'react-native';
 import { useImageUpload } from '../../../../hooks/upload/useImageUpload';
 import UIUtils from '../../../../utils/ui';
+import { useChatContext } from '../../../../context/ChatContext';
+import { GAEvents } from '../../../../constants/events';
+import useSessionStore from '../../../../store/session';
 
 interface Props {
   item: ImageUpload;
@@ -17,9 +20,10 @@ interface Props {
 }
 
 const UploadImageItem = ({ item, onSuccess, onRemove }: Props) => {
+  const logGA = useChatContext().logGA;
   const { isSuccess, isUploading, progress } = useImageUpload({
     file: item,
-    onSuccess: (data: any) => {
+    onSuccess: (data: any, duration?: number) => {
       const mItem = {
         ...item,
         remoteUrl: data?.[0]?.publicUrl,
@@ -27,6 +31,14 @@ const UploadImageItem = ({ item, onSuccess, onRemove }: Props) => {
       };
       if (mItem.remoteUrl) {
         onSuccess?.(mItem);
+        logGA(GAEvents.chatDetailMultimodalUpload, {
+          conversation_id: useSessionStore.getState().sessionId,
+          file_type: 'image',
+          duration: duration || 0,
+          size_mb: item.size / 1024 / 1024,
+          status: 'success',
+          format: item.mime,
+        });
       }
     },
     onError: () => {
@@ -35,6 +47,14 @@ const UploadImageItem = ({ item, onSuccess, onRemove }: Props) => {
         theme: 'danger',
       });
       onRemove?.(item);
+      logGA(GAEvents.chatDetailMultimodalUpload, {
+        conversation_id: useSessionStore.getState().sessionId,
+        file_type: 'image',
+        duration: 0,
+        size_mb: item.size / 1024 / 1024,
+        status: 'failed',
+        format: item.mime,
+      });
     },
   });
 

package/src/components/chat/index.tsx

@@ -2,12 +2,8 @@ import { KContainer } from '@droppii/libs';
 import ChatHeader from './ChatHeader';
 import ChatMessageList from './ChatMessageList';
 import ChatFooter from './footer';
-import { KeyboardAvoidingView, Platform, StyleSheet } from 'react-native';
-import type { ComponentType } from 'react';
-
-// Type assertion to fix TypeScript issue with React Native components
-const KeyboardAvoidingViewComponent =
-  KeyboardAvoidingView as unknown as ComponentType<any>;
+import { StyleSheet } from 'react-native';
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
 import { useMessage } from '../../hooks/message/useMessage';
 
 const ChatBotAI = () => {
@@ -16,15 +12,16 @@ const ChatBotAI = () => {
   const lastMessage = messageState?.messages?.[0];
 
   return (
-    <KContainer.Page>
-      <KeyboardAvoidingViewComponent
+    <KContainer.Page flex>
+      <KeyboardAvoidingView
         style={styles.container}
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        behavior={'padding'}
+        keyboardVerticalOffset={0}
       >
         <ChatHeader />
         <ChatMessageList messageList={messageState?.messages || []} />
         <ChatFooter lastMessage={lastMessage} />
-      </KeyboardAvoidingViewComponent>
+      </KeyboardAvoidingView>
     </KContainer.Page>
   );
 };
@@ -32,5 +29,5 @@ const ChatBotAI = () => {
 export default ChatBotAI;
 
 const styles = StyleSheet.create({
-  container: { flex: 1 },
+  container: { flexGrow: 1 },
 });

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

@@ -21,7 +21,7 @@ import ProductHorizontalCard from '../../product/CardHorizontal';
 import ChatTable from './ChatTable';
 import DeeplinkItem from './DeeplinkItem';
 import { useChatContext } from '../../../context/ChatContext';
-import trans from '../../../translation';
+import { trans } from '../../../translation';
 import MessageActionsBar from './MessageActionsBar';
 import useProductsStore from '../../../store/products';
 
@@ -169,20 +169,27 @@ export function useStreamingMarkdownBlocks(text: string) {
 
 class CustomRenderer extends Renderer implements RendererInterface {
   constructor(
-    openImageViewer?: (images: { url: string }[], index: number) => void
+    openImageViewer?: (images: { url: string }[], index: number) => void,
+    messageId?: string
   ) {
     super();
     this.openImageViewer = openImageViewer;
+    this.messageId = messageId;
   }
 
   openImageViewer?: (images: { url: string }[], index: number) => void;
+  messageId?: string;
 
   html(text: string): ReactNode {
     const match = /^<!--\s*@component:(\w+)\(id:([\w-]+)\)\s*-->/.exec(text);
     switch (match?.[1]) {
       case 'product':
         return (
-          <ProductHorizontalCard productId={match?.[2]} key={this.getKey()} />
+          <ProductHorizontalCard
+            productId={match?.[2]}
+            key={this.getKey()}
+            messageId={this.messageId}
+          />
         );
       default:
         return (
@@ -305,7 +312,11 @@ class CustomRenderer extends Renderer implements RendererInterface {
   link(children: string | ReactNode[], href: string, _styles?: any): ReactNode {
     if (href?.startsWith('/@component:deeplink')) {
       return (
-        <DeeplinkItem key={this.getKey()} href={href}>
+        <DeeplinkItem
+          key={this.getKey()}
+          href={href}
+          messageId={this.messageId}
+        >
           {children}
         </DeeplinkItem>
       );
@@ -402,8 +413,8 @@ const ChatAIAnswerMessageItem = ({
   const products = useProductsStore((state) => state.products);
 
   const renderer = useMemo(
-    () => new CustomRenderer(openImageViewer),
-    [openImageViewer]
+    () => new CustomRenderer(openImageViewer, item.id),
+    [openImageViewer, item.id]
   );
   const tokenizer = useMemo(() => new CustomTokenizer(), []);
 

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

@@ -1,10 +1,13 @@
 import { KContainer, KLabel, KColors } from '@droppii/libs';
 import { useCallback, useMemo } from 'react';
 import { useChatContext } from '../../../context/ChatContext';
+import { GAEvents } from '../../../constants/events';
+import useSessionStore from '../../../store/session';
 
 interface DeeplinkItemProps {
   children?: React.ReactNode;
   href?: string;
+  messageId?: string;
 }
 
 export function parseDeepLinkHref(href: string): Record<string, string> | null {
@@ -26,8 +29,9 @@ export function parseDeepLinkHref(href: string): Record<string, string> | null {
   return result;
 }
 
-const DeeplinkItem = ({ children, href }: DeeplinkItemProps) => {
+const DeeplinkItem = ({ children, href, messageId }: DeeplinkItemProps) => {
   const pushLinkTo = useChatContext().pushLinkTo;
+  const logGA = useChatContext().logGA;
   const csTeamId = useChatContext().csTeamId;
 
   const linkData = useMemo(() => {
@@ -52,11 +56,35 @@ const DeeplinkItem = ({ children, href }: DeeplinkItemProps) => {
 
   const onPressDeeplink = useCallback(() => {
     if (linkData) {
+      const data = parseDeepLinkHref(href || '');
       pushLinkTo?.(linkData, {
         source_from: 'chatbot',
       });
+      if (data?.type === 'gift') {
+        logGA(GAEvents.chatDetailGiftDetailBtnTap, {
+          conversation_id: useSessionStore.getState().sessionId,
+          message_id: messageId,
+          gift_id: data?.id,
+        });
+        return;
+      }
+      if (data?.type === 'faq') {
+        logGA(GAEvents.chatDetailFAQTap, {
+          conversation_id: useSessionStore.getState().sessionId,
+          message_id: messageId,
+          deeplink_id: data?.id,
+        });
+        return;
+      }
+      if (data?.type === 'cx-support') {
+        logGA(GAEvents.chatDetailLivechatBtnTap, {
+          conversation_id: useSessionStore.getState().sessionId,
+          message_id: messageId,
+        });
+        return;
+      }
     }
-  }, [linkData, pushLinkTo]);
+  }, [linkData, pushLinkTo, logGA, href, messageId]);
 
   return (
     <KContainer.Touchable onPress={onPressDeeplink}>

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

@@ -35,6 +35,8 @@ import ActionButton from './actions/ActionButton';
 const { Popover } = renderers;
 
 import type { IMessageItem } from '../../../types/dto';
+import { useChatContext } from '../../../context/ChatContext';
+import { GAEvents } from '../../../constants/events';
 
 interface MessageActionsBarProps {
   messageId: string;
@@ -54,6 +56,7 @@ const MessageActionsBar = ({
   // Refs
   const likeMenuRef = useRef(null);
   const dislikeMenuRef = useRef(null);
+  const logGA = useChatContext().logGA;
 
   // Hooks
   const { feedback, isLikeActive, isDislikeActive, selectReason } = useFeedback(
@@ -94,8 +97,11 @@ const MessageActionsBar = ({
 
   // Handlers
   const handleCopy = useCallback(() => {
+    logGA(GAEvents.chatDetailCopyBtnTap, {
+      message_id: messageId,
+    });
     copyToClipboard(messageContent);
-  }, [messageContent, copyToClipboard]);
+  }, [messageContent, copyToClipboard, logGA, messageId]);
 
   // Audio button states
   const getAudioButtonProps = useCallback(() => {

package/src/components/chat/item/actions/ActionButton.tsx

@@ -63,4 +63,3 @@ const styles = StyleSheet.create({
     backgroundColor: KColors.hexToRgba(KColors.primary.normal, 0.1),
   },
 });
-

package/src/components/product/CardHorizontal.tsx

@@ -11,25 +11,29 @@ import {
   KPromotionTag,
 } from '@droppii/libs';
 import { PTManager } from '../../utils/prototype';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 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 { GAEvents } from '../../constants/events';
+import useSessionStore from '../../store/session';
 
 interface IProductHorizontalCardProps {
   productId?: string;
+  messageId?: string;
 }
 
-const ProducHorizontalCard = (props: IProductHorizontalCardProps) => {
-  const { productId } = props;
+const ProductHorizontalCard = (props: IProductHorizontalCardProps) => {
+  const { productId, messageId } = props;
   const item = useProductsStore((state) =>
     state.products.find((p) => p.id === productId)
   );
   const onAddToCart = useChatContext()?.onAddToCart;
   const onBuyNow = useChatContext()?.onBuyNow;
   const onNavigateToProduct = useChatContext()?.onNavigateToProduct;
+  const logGA = useChatContext()?.logGA;
 
   const {
     avgRating,
@@ -132,6 +136,40 @@ const ProducHorizontalCard = (props: IProductHorizontalCardProps) => {
     return !isSuspended && !isSoldOut && typeof onBuyNow === 'function';
   }, [isSuspended, isSoldOut, onBuyNow]);
 
+  const onPress = useCallback(() => {
+    if (!item) return;
+    onNavigateToProduct?.(item);
+    logGA(GAEvents.chatDetailProductCardTap, {
+      conversation_id: useSessionStore.getState().sessionId,
+      product_id: item.id,
+      position_in_list: -1, //TODO: fix
+    });
+  }, [onNavigateToProduct, logGA, item]);
+
+  const onPressAddToCart = useCallback(() => {
+    if (!item) return;
+    onAddToCart?.(item);
+    logGA(GAEvents.chatDetailAddToCartBtnTap, {
+      conversation_id: useSessionStore.getState().sessionId,
+      product_id: item.id,
+      position_in_list: -1, //TODO: fix
+      pdp_id: item.pdpId,
+      message_id: messageId,
+    });
+  }, [onAddToCart, logGA, item, messageId]);
+
+  const onPressBuyNow = useCallback(() => {
+    if (!item) return;
+    onBuyNow?.(item);
+    logGA(GAEvents.chatDetailBuyNowBtnTap, {
+      conversation_id: useSessionStore.getState().sessionId,
+      product_id: item.id,
+      position_in_list: -1, //TODO: fix
+      pdp_id: item.pdpId,
+      message_id: messageId,
+    });
+  }, [onBuyNow, logGA, item, messageId]);
+
   if (!item) {
     return (
       <KContainer.View style={styles.container}>
@@ -170,10 +208,7 @@ const ProducHorizontalCard = (props: IProductHorizontalCardProps) => {
   }
 
   return (
-    <KContainer.Touchable
-      style={styles.container}
-      onPress={() => onNavigateToProduct?.(item)}
-    >
+    <KContainer.Touchable style={styles.container} onPress={onPress}>
       <KContainer.View style={styles.image}>
         <KImage.Base
           uri={imageUrl}
@@ -294,7 +329,7 @@ const ProducHorizontalCard = (props: IProductHorizontalCardProps) => {
           </KLabel.Text>
           <KContainer.View style={styles.actionsRow}>
             <KButton.Base
-              onPress={() => onAddToCart?.(item)}
+              onPress={onPressAddToCart}
               background={KColors.palette.primary.w25}
               tintColor={KColors.primary.normal}
               icon={{
@@ -305,7 +340,7 @@ const ProducHorizontalCard = (props: IProductHorizontalCardProps) => {
               disabled={!isEnabledAddToCart}
             />
             <KButton.Solid
-              onPress={() => onBuyNow?.(item)}
+              onPress={onPressBuyNow}
               size="sm"
               label="Mua ngay"
               kind="primary"
@@ -318,7 +353,7 @@ const ProducHorizontalCard = (props: IProductHorizontalCardProps) => {
   );
 };
 
-export default ProducHorizontalCard;
+export default ProductHorizontalCard;
 
 const styles = StyleSheet.create({
   abs: {

package/src/constants/events.ts

@@ -5,3 +5,37 @@ export const events = {
   expandThinkingStep: 'expand_thinking_step',
   updateMessageError: 'update_message_error',
 };
+
+export const GAEvents = {
+  newChatPageView: 'NewChat_Page_View',
+  chatDetailPageView: 'ChatDetail_Page_View',
+  chatDetailSendBtnTap: 'ChatDetail_SendBtn_Tap',
+  chatDetailLikeDislikeBtnTap: 'ChatDetail_LikeDislikeBtn_Tap',
+  chatDetailCopyBtnTap: 'ChatDetail_CopyBtn_Tap',
+  chatDetailVoiceBtnTap: 'ChatDetail_VoiceBtn_Tap',
+  chatDetailExportPDFBtnTap: 'ChatDetail_ExportPDFBtn_Tap',
+  chatDetailShareMessBtnTap: 'ChatDetail_ShareMessBtn_Tap',
+  chatDetailStopChatBtnTap: 'ChatDetail_StopChatBtn_Tap',
+  chatDetailMultimodalTap: 'ChatDetail_Multimodal_Tap',
+  chatDetailMultimodalUpload: 'ChatDetail_Multimodal_Upload',
+  chatDetailMultimodalSend: 'ChatDetail_Multimodal_Send',
+  chatDetailProductCardTap: 'ChatDetail_ProductCard_Tap',
+  chatDetailAddToCartBtnTap: 'ChatDetail_AddToCartBtn_Tap',
+  chatDetailBuyNowBtnTap: 'ChatDetail_BuyNowBtn_Tap',
+  newChatCreateBtnTap: 'NewChat_CreateBtn_Tap',
+  chatDetailShoppingCartBtnTap: 'ChatDetail_ShoppingCartBtn_Tap',
+  chatDetailShareBtnTap: 'ChatDetail_ShareBtn_Tap',
+  shareChatModalCopyBtnTap: 'ShareChatModal_CopyBtn_Tap',
+  chatDetailRenameBtnTap: 'ChatDetail_RenameBtn_Tap',
+  renameModalSaveBtnTap: 'RenameModal_SaveBtn_Tap',
+  deleteChatModalDeleteBtnTap: 'DeleteChatModal_DeleteBtn_Tap',
+  sidebarSearchConversationTap: 'Sidebar_SearchConversation_Tap',
+  sidebarSearchConversationSend: 'Sidebar_SearchConversation_Send',
+  newChatNewChatPrmSuggTap: 'NewChat_NewChatPrmSugg_Tap',
+  chatDetailInConvPrmSuggTap: 'ChatDetail_InConvPrmSugg_Tap',
+  chatDetailInConvPrmSuggScroll: 'ChatDetail_InConvPrmSugg_Scroll',
+  chatDetailInConvPrmSuggReturn: 'ChatDetail_InConvPrmSugg_Return',
+  chatDetailLivechatBtnTap: 'ChatDetail_LivechatBtn_Tap',
+  chatDetailFAQTap: 'ChatDetail_FAQ_Tap',
+  chatDetailGiftDetailBtnTap: 'ChatDetail_GiftDetailBtn_Tap',
+};

package/src/context/ChatContext.tsx

@@ -16,6 +16,7 @@ export const ChatContext = createContext<ChatContextType>({
   openDrawer: () => {},
   closeDrawer: () => {},
   chatbotUrl: '',
+  logGA: () => {},
 });
 
 export const useChatContext = () => useContext(ChatContext);
@@ -40,6 +41,7 @@ export const ChatProvider = (props: ChatProviderProps) => {
     csTeamId,
     pushLinkTo,
     chatbotUrl,
+    logGA,
   } = props;
 
   return (
@@ -57,6 +59,7 @@ export const ChatProvider = (props: ChatProviderProps) => {
         openDrawer,
         closeDrawer,
         chatbotUrl,
+        logGA,
       }}
     >
       <ReanimatedDrawerExample ref={ref}>