react-native-chatbot-ai 0.1.68 → 0.1.70

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

@@ -1,37 +1,20 @@
 import {
-  KButton,
   KColors,
   KContainer,
   KImage,
   KInput,
-  KLabel,
-  KRadiusValue,
   KSpacingValue,
   KFonts,
 } from '@droppii/libs';
 import SuggestionsBar from './SuggestionsBar';
-import { useCallback, useState, useRef, useMemo, useEffect } from 'react';
-import type { ComponentType } from 'react';
-import {
-  FlatList,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  Platform,
-} from 'react-native';
+import { useCallback, useState, useMemo, useEffect } from 'react';
+import { FlatList, StyleSheet } from 'react-native';
 
-// Type assertion to fix TypeScript issue with React Native components
-const FlatListComponent = FlatList as unknown as ComponentType<any>;
 import debounce from 'lodash/debounce';
 import { useSendMessage } from '../../../hooks/message/useSendMessage';
 import { UploadItem, useUploadItem } from '../../../hooks/upload/useUploadItem';
 import useStreamMessageStore from '../../../store/streamMessage';
-import {
-  Menu,
-  MenuTrigger,
-  MenuOption,
-  MenuOptions,
-  renderers,
-} from 'react-native-popup-menu';
+
 import UploadImageItem from './item/UploadImageItem';
 import UploadFileItem from './item/UploadFileItem';
 import {
@@ -44,8 +27,8 @@ import { trans } from '../../../translation';
 import { useChatContext } from '../../../context/ChatContext';
 import { GAEvents } from '../../../constants/events';
 import useSessionStore from '../../../store/session';
-
-const { Popover } = renderers;
+import { openAttachmentBottomSheet } from './AttachmentBottomSheet';
+import { IS_IOS } from '../../../constants';
 
 interface IChatFooterProps {
   lastMessage?: IMessageItem;
@@ -56,7 +39,6 @@ const uploadItemKeyExtractor = (item: UploadItem) => {
 };
 
 const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
-  const menuRef = useRef(null);
   const logGA = useChatContext().logGA;
   const { onSendMessage } = useSendMessage();
   const [message, setMessage] = useState('');
@@ -94,21 +76,6 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
     );
   }, [lastMessage]);
 
-  const menuItems = useMemo(() => {
-    return [
-      {
-        icon: 'image-o',
-        onPress: onPressImagePicker,
-        label: trans('photo_library'),
-      },
-      {
-        icon: 'camera-o',
-        onPress: onPressCameraPicker,
-        label: trans('camera'),
-      },
-    ];
-  }, [onPressImagePicker, onPressCameraPicker]);
-
   const onPressSend = useCallback(() => {
     if (isDisabledSend) return;
     if (isStreaming) {
@@ -169,6 +136,14 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
     [handleRemoveUploadItem, handleUploadSuccess]
   );
 
+  const onPressAttachment = useCallback(() => {
+    openAttachmentBottomSheet({
+      handleCamera: onPressCameraPicker,
+      handleDocument: handlePressDocumentPicker,
+      handlePhoto: onPressImagePicker,
+    });
+  }, [handlePressDocumentPicker, onPressCameraPicker, onPressImagePicker]);
+
   useEffect(() => {
     return () => {
       stopStream();
@@ -176,7 +151,11 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
   }, [stopStream, sessionId]);
 
   return (
-    <KContainer.View style={styles.container}>
+    <KContainer.View
+      background={KColors.white}
+      paddingT="0.5rem"
+      style={styles.container}
+    >
       <KContainer.VisibleView visible={isShowSuggestions}>
         <SuggestionsBar
           suggestions={lastMessage?.suggestions}
@@ -185,83 +164,82 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
           onSendMessage={onSendMessage}
         />
       </KContainer.VisibleView>
-      <KContainer.View style={styles.contentContainer}>
-        <KContainer.VisibleView visible={fileUpload.length > 0}>
-          <FlatListComponent
+      <KContainer.VisibleView visible={fileUpload.length > 0}>
+        <KContainer.View>
+          <FlatList
             data={fileUpload}
             renderItem={renderUploadItem}
             horizontal
             keyExtractor={uploadItemKeyExtractor}
             contentContainerStyle={styles.listUploadItem}
           />
-        </KContainer.VisibleView>
-        <KContainer.View padding={4}>
+        </KContainer.View>
+      </KContainer.VisibleView>
+      <KContainer.View
+        row
+        alignItems
+        paddingB="0.5rem"
+        paddingH="0.5rem"
+        background={KColors.white}
+      >
+        <KContainer.Touchable
+          padding={'0.5rem'}
+          marginR={'0.5rem'}
+          justifyContent
+          alignItems
+          background={KColors.palette.gray.w25}
+          br={'round'}
+          onPress={onPressAttachment}
+        >
+          <KImage.VectorIcons
+            name="plus-o"
+            size={24}
+            color={KColors.gray.dark}
+          />
+        </KContainer.Touchable>
+        <KContainer.View
+          row
+          flex
+          alignItems="flex-end"
+          background={KColors.palette.gray.w25}
+          paddingV={4}
+          paddingR={4}
+          paddingL={'0.75rem'}
+          style={styles.inputContainer}
+        >
           <KInput.TextArea
+            flex
             paddingV={0}
-            paddingH={Platform.OS === 'ios' ? 2 : 0}
+            paddingH={IS_IOS ? 2 : 0}
             placeholder={trans('input_placeholder')}
             clearButtonMode="hidden"
             onChangeText={debouncedMessage}
             value={message}
             multiline
             style={styles.input}
+            background="transparent"
             blurOnSubmit={false}
             textAlignVertical="top"
           />
-        </KContainer.View>
-        <KContainer.View style={styles.actions}>
-          <Menu
-            ref={menuRef}
-            renderer={Popover}
-            rendererProps={{
-              placement: 'top',
-              anchorStyle: { display: 'none' },
-            }}
+
+          <KContainer.Touchable
+            padding={'0.5rem'}
+            marginL={'0.5rem'}
+            justifyContent
+            alignItems
+            background={
+              isStreaming ? KColors.gray.dark : KColors.primary.normal
+            }
+            br={'round'}
+            onPress={onPressSend}
+            style={{ opacity: isDisabledSend ? 0.5 : 1 }}
           >
-            <MenuTrigger
-              customStyles={{
-                TriggerTouchableComponent: TouchableWithoutFeedback,
-              }}
-            >
-              <KImage.VectorIcons
-                name="image-o"
-                size={24}
-                color={KColors.gray.dark}
-              />
-            </MenuTrigger>
-            <MenuOptions optionsContainerStyle={styles.popover}>
-              {menuItems.map((i) => (
-                <MenuOption
-                  key={i.icon}
-                  onSelect={i.onPress}
-                  style={styles.menuItem}
-                >
-                  <KImage.VectorIcons name={i.icon} />
-                  <KLabel.Text typo="TextMdMedium">{i.label}</KLabel.Text>
-                </MenuOption>
-              ))}
-            </MenuOptions>
-          </Menu>
-          <KContainer.Touchable onPress={handlePressDocumentPicker}>
             <KImage.VectorIcons
-              name="paperclip-o"
-              size={24}
-              color={KColors.gray.dark}
+              name={isStreaming ? 'square-b' : 'send-b'}
+              size={18}
+              color={KColors.white}
             />
           </KContainer.Touchable>
-          <KContainer.View flex />
-          <KContainer.View style={{ opacity: isDisabledSend ? 0.5 : 1 }}>
-            <KButton.Solid
-              kind="primary"
-              icon={{
-                vectorName: isStreaming ? 'square-b' : 'send-b',
-                size: 20,
-                tintColor: KColors.white,
-              }}
-              onPress={onPressSend}
-              br="round"
-            />
-          </KContainer.View>
         </KContainer.View>
       </KContainer.View>
     </KContainer.View>
@@ -272,26 +250,7 @@ export default ChatFooter;
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: KSpacingValue['0.5rem'],
-    borderWidth: 1,
-    borderColor: KColors.hexToRgba(KColors.black, 0.15),
-    borderBottomWidth: 0,
-    borderTopLeftRadius: KSpacingValue['1.25rem'],
-    borderTopRightRadius: KSpacingValue['1.25rem'],
-    backgroundColor: KColors.white,
-
-    shadowColor: 'rgb(21, 23, 24)',
-    shadowOffset: {
-      width: 0,
-      height: -18,
-    },
-    shadowOpacity: 0.04,
-    shadowRadius: 36,
-
-    elevation: 10,
-  },
-  contentContainer: {
-    paddingHorizontal: KSpacingValue['0.75rem'],
+    gap: 8,
   },
   actions: {
     flexDirection: 'row',
@@ -302,29 +261,19 @@ const styles = StyleSheet.create({
   sendButton: {
     alignSelf: 'flex-end',
   },
+  inputContainer: {
+    borderRadius: 22,
+  },
   input: {
     maxHeight: 100,
     fontSize: 16,
     lineHeight: 22.4,
     fontFamily: KFonts.regular,
-  },
-  popover: {
-    borderRadius: KRadiusValue['4x'],
-    backgroundColor: KColors.white,
-    width: 200,
-    paddingHorizontal: KSpacingValue['0.75rem'],
-    paddingVertical: KSpacingValue['0.5rem'],
-  },
-  menuItem: {
-    padding: KSpacingValue['0.5rem'],
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    gap: KSpacingValue['0.75rem'],
+    marginVertical: IS_IOS ? 0 : -8,
   },
   listUploadItem: {
     gap: KSpacingValue['0.75rem'],
+    paddingHorizontal: KSpacingValue['0.5rem'],
     paddingTop: 6,
-    paddingBottom: 8,
   },
 });

package/src/components/product/Card.tsx

@@ -290,7 +290,7 @@ const ProductCard = memo(
       logGA(GAEvents.chatDetailBuyNowBtnTap, {
         conversation_id: useSessionStore.getState().sessionId,
         product_id: item.id,
-        position_in_list: -1, //TODO: fix
+        position_in_list: index,
         pdp_id: item.pdpId,
         message_chat_id: messageId,
         tab_name: getRouteKey(tabIndex),
@@ -302,7 +302,7 @@ const ProductCard = memo(
         {
           conversation_id: useSessionStore.getState().sessionId,
           product_id: item.id,
-          position_in_list: -1, //TODO: fix
+          position_in_list: index,
           pdp_id: item.pdpId,
           message_chat_id: messageId,
           tab_name: getRouteKey(tabIndex),
@@ -310,7 +310,7 @@ const ProductCard = memo(
         },
         EventProvider.netcore
       );
-    }, [onBuyNow, logGA, item, messageId, tabIndex]);
+    }, [onBuyNow, logGA, item, messageId, tabIndex, index]);
 
     const onJumpToMessage = useCallback(() => {
       if (!item) return;

package/src/components/product/CardHorizontal.tsx

@@ -304,7 +304,7 @@ const ProductHorizontalCard = memo(
       logGA(GAEvents.chatDetailBuyNowBtnTap, {
         conversation_id: useSessionStore.getState().sessionId,
         product_id: item.id,
-        position_in_list: -1, //TODO: fix
+        position_in_list: index,
         pdp_id: item.pdpId,
         message_chat_id: messageId,
         tab_name: getRouteKey(tabIndex),
@@ -315,7 +315,7 @@ const ProductHorizontalCard = memo(
         {
           conversation_id: useSessionStore.getState().sessionId,
           product_id: item.id,
-          position_in_list: -1, //TODO: fix
+          position_in_list: index,
           pdp_id: item.pdpId,
           message_chat_id: messageId,
           tab_name: getRouteKey(tabIndex),
@@ -323,7 +323,7 @@ const ProductHorizontalCard = memo(
         },
         EventProvider.netcore
       );
-    }, [onBuyNow, logGA, item, messageId, tabIndex]);
+    }, [onBuyNow, logGA, item, messageId, tabIndex, index]);
 
     return (
       <KContainer.Touchable style={styles.container} onPress={onPress}>

package/src/constants/index.ts

@@ -1,5 +1,6 @@
 import { createRef } from 'react';
 import { WithBottomSheetProps, WithPopupProps, WithToastProps } from '../types';
+import { Platform } from 'react-native';
 export * from './chatTab';
 
 const MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER + 100;
@@ -13,3 +14,5 @@ export const Z_INDEX_PRIORITY = {
   bottomSheet: MAX_SAFE_INTEGER - 2,
   popup: MAX_SAFE_INTEGER, // Highest priority - always on top
 };
+
+export const IS_IOS = Platform.OS === 'ios';

package/src/hooks/upload/useUploadItem.ts

@@ -105,6 +105,7 @@ export const useUploadItem = ({ logGA }: Props) => {
 
   const onPressImagePicker = useCallback(async () => {
     Keyboard.dismiss();
+    UIUtils.bottomSheet.dismiss();
     if (imageUpload.length >= MAX_FILE_UPLOAD) {
       UIUtils.toast.open({
         title: trans('max_image_reached', { number: MAX_FILE_UPLOAD }),
@@ -130,6 +131,7 @@ export const useUploadItem = ({ logGA }: Props) => {
 
   const onPressCameraPicker = useCallback(async () => {
     Keyboard.dismiss();
+    UIUtils.bottomSheet.dismiss();
     if (imageUpload.length >= MAX_FILE_UPLOAD) {
       UIUtils.toast.open({
         title: trans('max_image_reached', { number: MAX_FILE_UPLOAD }),
@@ -149,6 +151,7 @@ export const useUploadItem = ({ logGA }: Props) => {
 
   const handlePressDocumentPicker = useCallback(async () => {
     Keyboard.dismiss();
+    UIUtils.bottomSheet.dismiss();
     if (documentUpload.length >= MAX_FILE_UPLOAD) {
       UIUtils.toast.open({
         title: trans('max_file_reached', { number: MAX_FILE_UPLOAD }),

package/src/translation/resources/i18n.ts

@@ -5,8 +5,6 @@ const i18nKey: Record<string, string> = {
   chat_empty_title: 'Bạn cần hỗ trợ gì hôm nay?',
   chat_empty_description_1: 'Hãy đặt câu hỏi hoặc chia sẻ vấn đề của bạn!',
   chat_empty_description_2: 'Những gợi ý dành cho bạn:',
-  photo_library: 'Thư viện ảnh',
-  camera: 'Chụp ảnh',
 
   // Session options
   session_options_title: 'Tuỳ chọn phiên chat',
@@ -14,6 +12,12 @@ const i18nKey: Record<string, string> = {
   session_share: 'Chia sẻ',
   session_delete: 'Xoá',
 
+  // Attachment bottom sheet
+  attachment_options_title: 'Tuỳ chọn thêm',
+  attachment_photo_library: 'Thư viện ảnh',
+  attachment_camera: 'Chụp ảnh',
+  attachment_document: 'Tài liệu',
+
   // Rename session
   rename_session_title: 'Đổi tên phiên chat',
   rename_session_placeholder: 'Nhập tên phiên chat',