react-native-chatbot-ai 0.1.19 → 0.1.22

package/src/components/Drawer/SessionOptionsBottomSheet.tsx

@@ -0,0 +1,138 @@
+import { StyleSheet } from 'react-native';
+import {
+  KContainer,
+  KLabel,
+  KColors,
+  KSpacingValue,
+  KImage,
+} from '@droppii/libs';
+import UIUtils from '../../utils/ui';
+import { trans } from '../../translation';
+import { SessionSearchItem } from '../../types/dto';
+import { openRenameSessionPopup } from './RenameSessionPopup';
+import { openShareSessionPopup } from './ShareSessionPopup';
+import { openDeleteSessionPopup } from './DeleteSessionPopup';
+import { GAEvents } from '../../constants/events';
+
+interface OptionItemProps {
+  icon: string;
+  label: string;
+  onPress: () => void;
+  isDanger?: boolean;
+}
+
+const OptionItem = ({ icon, label, onPress, isDanger }: OptionItemProps) => {
+  const color = isDanger ? KColors.danger.normal : KColors.gray.dark;
+
+  return (
+    // @ts-ignore
+    <KContainer.Touchable onPress={onPress} style={styles.optionItem}>
+      <KImage.VectorIcons name={icon} size={20} color={color} />
+      {/* @ts-ignore */}
+      <KLabel.Text typo="TextMdMedium" color={color} style={styles.optionLabel}>
+        {label}
+      </KLabel.Text>
+    </KContainer.Touchable>
+  );
+};
+
+export const openSessionOptionsBottomSheet = (
+  session: SessionSearchItem,
+  closeDrawer?: () => void,
+  logGA?: (event: string, params?: any) => void
+) => {
+  const handleRename = () => {
+    UIUtils.bottomSheet.dismiss();
+    // Close drawer first, then open popup
+    closeDrawer?.();
+    setTimeout(() => {
+      openRenameSessionPopup(session);
+    }, 300);
+    logGA?.(GAEvents.chatDetailRenameBtnTap, {
+      conversation_id: session?.id,
+    });
+  };
+
+  const handleShare = () => {
+    UIUtils.bottomSheet.dismiss();
+    // Close drawer first, then open popup
+    closeDrawer?.();
+    setTimeout(() => {
+      openShareSessionPopup(session);
+    }, 300);
+    logGA?.(GAEvents.chatDetailShareBtnTap, {
+      conversation_id: session?.id,
+    });
+  };
+
+  const handleDelete = () => {
+    UIUtils.bottomSheet.dismiss();
+    // Close drawer first, then open popup
+    closeDrawer?.();
+    setTimeout(() => {
+      openDeleteSessionPopup(session, logGA);
+    }, 300);
+  };
+
+  const OptionsContent = () => {
+    return (
+      // @ts-ignore
+      <KContainer.View style={styles.container}>
+        <OptionItem
+          icon="edit-o"
+          label={trans('chatbot:session_rename')}
+          onPress={handleRename}
+        />
+        {/* @ts-ignore */}
+        <KContainer.View style={styles.divider} />
+        <OptionItem
+          icon="share-o"
+          label={trans('chatbot:session_share')}
+          onPress={handleShare}
+        />
+        {/* @ts-ignore */}
+        <KContainer.View style={styles.divider} />
+        <OptionItem
+          icon="trash-alt-o-1"
+          label={trans('chatbot:session_delete')}
+          onPress={handleDelete}
+          isDanger
+        />
+      </KContainer.View>
+    );
+  };
+
+  UIUtils.bottomSheet.open({
+    header: {
+      title: {
+        text: trans('chatbot:session_options_title'),
+      },
+      showCloseButton: true,
+    },
+    body: {
+      renderContent: () => <OptionsContent />,
+    },
+    touchOutsideToDismiss: true,
+  });
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: KSpacingValue['1rem'],
+    paddingVertical: KSpacingValue['0.5rem'],
+  },
+  optionItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: KSpacingValue['1rem'],
+    paddingHorizontal: KSpacingValue['0.5rem'],
+  },
+  optionLabel: {
+    marginLeft: KSpacingValue['0.75rem'],
+  },
+  divider: {
+    height: 1,
+    backgroundColor: KColors.border.light,
+    marginHorizontal: KSpacingValue['0.5rem'],
+  },
+});

package/src/components/Drawer/ShareSessionPopup.tsx

@@ -0,0 +1,145 @@
+import { useCallback, useState, useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  KContainer,
+  KLabel,
+  KColors,
+  KSpacingValue,
+  KInput,
+} from '@droppii/libs';
+import { useShareSession } from '../../hooks/session/useShareSession';
+import UIUtils from '../../utils/ui';
+import { trans } from '../../translation';
+import { SessionSearchItem } from '../../types/dto';
+import Clipboard from '@react-native-clipboard/clipboard';
+import { useChatContext } from '../../context/ChatContext';
+import { GAEvents } from '../../constants/events';
+
+const truncateText = (text: string, maxLength: number) => {
+  if (text.length <= maxLength) return text;
+  return text.substring(0, maxLength) + '…';
+};
+
+interface ShareContentProps {
+  session: SessionSearchItem;
+  onConfirmRef: React.RefObject<(() => Promise<void>) | null>;
+}
+
+const ShareContent = ({ session, onConfirmRef }: ShareContentProps) => {
+  const { mutateAsync: shareSession } = useShareSession();
+  const { chatbotUrl, logGA } = useChatContext();
+  const [shareUrl, setShareUrl] = useState('');
+
+  // Generate share URL based on chatbotUrl
+  useEffect(() => {
+    setShareUrl(`${chatbotUrl}/shared/${session.id}`);
+  }, [chatbotUrl, session.id]);
+
+  // Expose handleConfirm via ref
+  onConfirmRef.current = useCallback(async () => {
+    try {
+      const response = await shareSession(session.id);
+      if (response) {
+        // Copy the generated share URL to clipboard
+        Clipboard.setString(shareUrl);
+        UIUtils.toast.showSuccess(trans('chatbot:share_session_success'));
+        UIUtils.popup.dismiss();
+        logGA(GAEvents.shareChatModalCopyBtnTap, {
+          conversation_id: session.id,
+        });
+      }
+    } catch (err) {
+      UIUtils.toast.showError(err);
+    }
+  }, [session.id, shareSession, shareUrl, logGA]);
+
+  const truncatedName = truncateText(session.title, 50);
+  const descriptionTemplate = trans('chatbot:share_session_description');
+  const parts = descriptionTemplate.split('{sessionName}');
+
+  return (
+    // @ts-ignore
+    <KContainer.View style={styles.container}>
+      {/* @ts-ignore */}
+      <KLabel.Text
+        typo="TextMdNormal"
+        color={KColors.gray.dark}
+        style={styles.description}
+      >
+        {parts[0]}
+        {/* @ts-ignore */}
+        <KLabel.Text typo="TextMdBold" color={KColors.gray.dark}>
+          {truncatedName}
+        </KLabel.Text>
+        {parts[1]}
+      </KLabel.Text>
+
+      {/* Share URL Input */}
+      {/* @ts-ignore */}
+      <KContainer.View style={[styles.inputWrapper]}>
+        <KInput.TextBox
+          value={shareUrl}
+          label={trans('chatbot:share_session_link_label')}
+          labelTypo="TextMdBold"
+          disabled
+          withBorder
+          height={40}
+          border="entire"
+          radius="borderless"
+        />
+      </KContainer.View>
+    </KContainer.View>
+  );
+};
+
+export const openShareSessionPopup = (session: SessionSearchItem) => {
+  const onConfirmRef = { current: null } as React.RefObject<
+    (() => Promise<void>) | null
+  >;
+
+  UIUtils.popup.open({
+    header: {
+      title: {
+        text: trans('chatbot:share_session_title'),
+      },
+      showCloseButton: true,
+      alignment: 'left',
+    },
+    body: {
+      scrollable: false,
+      renderContent: () => (
+        <ShareContent session={session} onConfirmRef={onConfirmRef} />
+      ),
+    },
+    actions: {
+      type: 'horizontal-button',
+      buttons: [
+        {
+          kind: 'light',
+          label: trans('chatbot:share_session_cancel'),
+          weight: 'medium',
+          onPress: () => UIUtils.popup.dismiss(),
+        },
+        {
+          kind: 'primary',
+          label: trans('chatbot:share_session_confirm'),
+          weight: 'medium',
+          onPress: () => onConfirmRef.current?.(),
+        },
+      ],
+    },
+  });
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: KSpacingValue['1rem'],
+    paddingHorizontal: KSpacingValue['1rem'],
+  },
+  description: {
+    marginBottom: KSpacingValue['1rem'],
+  },
+  inputWrapper: {
+    paddingBottom: KSpacingValue['0.5rem'],
+  },
+});

package/src/components/chat/ChatEmpty.tsx

@@ -4,15 +4,24 @@ import { useFetchSuggestions } from '../../hooks/suggestions/useFetchSuggestions
 import SuggestionItem from './SuggestionItem';
 import { useSendMessage } from '../../hooks/message/useSendMessage';
 import debounce from 'lodash/debounce';
-import { type ISuggestionItem } from '../../types';
-import trans from '../../translation';
+import { SendActionLogType, type ISuggestionItem } from '../../types';
+import { trans } from '../../translation';
+import { useChatContext } from '../../context/ChatContext';
+import { GAEvents } from '../../constants/events';
 
 const ChatEmpty = () => {
   const { data } = useFetchSuggestions();
   const { onSendMessage } = useSendMessage();
+  const logGA = useChatContext().logGA;
 
-  const onPress = debounce((item: ISuggestionItem) => {
-    onSendMessage(item.content);
+  const onPress = debounce((item: ISuggestionItem, index: number) => {
+    logGA(GAEvents.newChatNewChatPrmSuggTap, {
+      suggestion_id: item.suggestion_id,
+      suggestion_content: item.content,
+      suggestion_cate: item.category,
+      order: index,
+    });
+    onSendMessage(item.content, undefined, SendActionLogType.promptSuggestion);
   }, 200);
 
   return (
@@ -31,10 +40,11 @@ const ChatEmpty = () => {
           {trans('chat_empty_description_2')}
         </KLabel.Text>
       </KContainer.View>
-      {data?.suggestions?.map((item: ISuggestionItem) => (
+      {data?.suggestions?.map((item: ISuggestionItem, index: number) => (
         <SuggestionItem
           key={item.suggestion_id}
           item={item}
+          index={index}
           onPressItem={onPress}
         />
       ))}

package/src/components/chat/ChatHeader.tsx

@@ -12,6 +12,8 @@ import { ImageBackground, StatusBar, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import useSessionStore from '../../store/session';
 import { useChatContext } from '../../context/ChatContext';
+import { SessionLogType } from '../../types/chat';
+import { GAEvents } from '../../constants/events';
 
 // Type assertion to fix TypeScript issue with React Native components
 const StatusBarComponent = StatusBar as unknown as ComponentType<{
@@ -23,11 +25,14 @@ const ImageBackgroundComponent =
 export const ChatHeader = () => {
   const insets = useSafeAreaInsets();
   const setSessionId = useSessionStore((state) => state.setSessionId);
-  const { cartButton, openDrawer } = useChatContext();
+  const { cartButton, openDrawer, logGA } = useChatContext();
 
-  const onPressNewSession = () => {
-    setSessionId(undefined);
-  };
+  const onPressNewSession = useCallback(() => {
+    setSessionId(undefined, SessionLogType.newChatBtn);
+    logGA(GAEvents.newChatCreateBtnTap, {
+      button_type: 'quick_button',
+    });
+  }, [setSessionId, logGA]);
 
   const renderStatusBar = useCallback(() => {
     return (

package/src/components/chat/ChatMessageList.tsx

@@ -1,25 +1,38 @@
-import { FlatList, StyleSheet, DeviceEventEmitter } from 'react-native';
+import { FlatList, StyleSheet, DeviceEventEmitter, View } from 'react-native';
 import type { ComponentType } from 'react';
+import { useCallback, useRef, useEffect, useState } from 'react';
 import ChatEmpty from './ChatEmpty';
 import ChatItem from './item';
-import { KSpacingValue } from '@droppii/libs';
+import { KSpacingValue, KColors, KImage, KContainer } from '@droppii/libs';
 import type { IMessageItem } from '../../types';
-import { useCallback, useRef } from 'react';
-import { useEffect } from 'react';
-import { events } from '../../constants/events';
+import { events, GAEvents } from '../../constants/events';
+import { useChatContext } from '../../context/ChatContext';
+import useSessionStore from '../../store/session';
 
-// Type assertion to fix TypeScript issue with React Native components
 const FlatListComponent = FlatList as unknown as ComponentType<any>;
 
 interface IChatMessageListProps {
   messageList?: IMessageItem[];
 }
+
 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);
 
   const onScroll = useCallback((event: any) => {
-    scrollOffsetRef.current = event?.nativeEvent?.contentOffset?.y;
+    const offsetY = event?.nativeEvent?.contentOffset?.y ?? 0;
+    scrollOffsetRef.current = offsetY;
+
+    const threshold = 50;
+    setShowScrollToBottom(offsetY > threshold);
+  }, []);
+
+  const scrollToBottom = useCallback(() => {
+    flatListRef.current?.scrollToOffset({ offset: 0, animated: true }); // inverted => bottom = offset 0
   }, []);
 
   useEffect(() => {
@@ -45,19 +58,51 @@ const ChatMessageList = ({ messageList = [] }: IChatMessageListProps) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (!sessionId) {
+      logGA(GAEvents.newChatPageView);
+    } else {
+      logGA(GAEvents.chatDetailPageView, {
+        conversation_id: sessionId,
+      });
+    }
+  }, [sessionId, logGA]);
+
   return (
-    <FlatListComponent
-      ref={flatListRef}
-      data={messageList}
-      renderItem={({ item, index }: { item: IMessageItem; index: number }) => (
-        <ChatItem item={item} index={index} />
+    <View style={{ flex: 1 }}>
+      <FlatListComponent
+        ref={flatListRef}
+        data={messageList}
+        renderItem={({
+          item,
+          index,
+        }: {
+          item: IMessageItem;
+          index: number;
+        }) => <ChatItem item={item} index={index} />}
+        keyExtractor={(item: IMessageItem) => item.id}
+        contentContainerStyle={styles.container}
+        inverted
+        ListEmptyComponent={<ChatEmpty />}
+        onScroll={onScroll}
+        scrollEventThrottle={16}
+      />
+
+      {showScrollToBottom && (
+        <KContainer.Touchable
+          style={styles.scrollButton}
+          onPress={scrollToBottom}
+          activeOpacity={0.7}
+          center
+        >
+          <KImage.VectorIcons
+            name="arrow-down-o"
+            size={16}
+            color={KColors.palette.gray.w400}
+          />
+        </KContainer.Touchable>
       )}
-      keyExtractor={(item: IMessageItem) => item.id}
-      contentContainerStyle={styles.container}
-      inverted
-      ListEmptyComponent={<ChatEmpty />}
-      onScroll={onScroll}
-    />
+    </View>
   );
 };
 
@@ -70,4 +115,19 @@ const styles = StyleSheet.create({
     paddingVertical: KSpacingValue['1rem'],
     justifyContent: 'flex-end',
   },
+  scrollButton: {
+    position: 'absolute',
+    bottom: 20,
+    right: 16,
+    backgroundColor: KColors.white,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    shadowColor: '#000',
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+    elevation: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 });

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',