react-native-chatbot-ai 0.1.69 → 0.1.71

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/portal/BottomSheet.tsx

@@ -173,7 +173,7 @@ const BottomSheet = forwardRef<WithBottomSheetProps>((_, ref) => {
             <KLabel.Text
               typo={subTitle.typo || 'TextSmNormal'}
               color={subTitle.color || KColors.gray.light}
-              numberOfLines={2}
+              numberOfLines={data?.header?.subTitle?.numberOfLines || 2}
               marginT="0.25rem"
             >
               {subTitle.text}

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/constants/query.ts

@@ -7,6 +7,7 @@ export const QUERY_KEYS = {
   UPDATE_SESSION: 'UPDATE_SESSION',
   SHARE_SESSION: 'SHARE_SESSION',
   DELETE_SESSION: 'DELETE_SESSION',
+  SESSION_PIN: 'SESSION_PIN',
   SEND_FEEDBACK: 'SEND_FEEDBACK',
   GET_EXTERNAL_SESSION_INFO: 'GET_EXTERNAL_SESSION_INFO',
 };

package/src/context/ChatContext.tsx

@@ -1,10 +1,13 @@
 import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { StyleSheet } from 'react-native';
 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';
 import useStreamMessageStore from '../store/streamMessage';
+import { Z_INDEX_PRIORITY } from '../constants';
+import { KContainer } from '@droppii/libs';
 
 export const ChatContext = createContext<ChatContextType>({
   apiAddress: '',
@@ -26,6 +29,14 @@ export const ChatContext = createContext<ChatContextType>({
 
 export const useChatContext = () => useContext(ChatContext);
 
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+  portalLayer: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: Z_INDEX_PRIORITY.popup,
+  },
+});
+
 export const ChatProvider = (props: ChatProviderProps) => {
   const ref = useRef<any>(null);
   const spanRef = useRef<any>(null);
@@ -100,12 +111,14 @@ export const ChatProvider = (props: ChatProviderProps) => {
         setTabIndex,
       }}
     >
-      <ReanimatedDrawerExample ref={ref}>
-        <>
+      <KContainer.View style={styles.root}>
+        <ReanimatedDrawerExample ref={ref}>
           <ChatBotAI />
+        </ReanimatedDrawerExample>
+        <KContainer.View style={styles.portalLayer} pointerEvents="box-none">
           <Portal />
-        </>
-      </ReanimatedDrawerExample>
+        </KContainer.View>
+      </KContainer.View>
     </ChatContext.Provider>
   );
 };

package/src/hooks/session/useSessionPin.ts

@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { QUERY_KEYS } from '../../constants/query';
+import { apiInstance } from '../../services/apis';
+import { ENDPOINTS } from '../../services/endpoints';
+import { BaseResponse } from '../../types/common';
+
+export const useSessionPin = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: [QUERY_KEYS.SESSION_PIN],
+    mutationFn: async ({
+      sessionId,
+      pin,
+    }: {
+      sessionId: string;
+      pin: boolean;
+    }) => {
+      const url = pin
+        ? ENDPOINTS.assistantService.pinSession(sessionId)
+        : ENDPOINTS.assistantService.unpinSession(sessionId);
+      const res = await apiInstance?.put<BaseResponse<unknown>>(url);
+      return res?.data;
+    },
+    onSuccess: () => {
+      queryClient.refetchQueries({
+        queryKey: [QUERY_KEYS.SEARCH_SESSIONS],
+      });
+    },
+  });
+};

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/services/endpoints.ts

@@ -13,6 +13,10 @@ export const ENDPOINTS = {
       `/assistant-service/v1/app/chat/sessions/${sessionId}/share`,
     deleteSession: (sessionId: string) =>
       `/assistant-service/v1/app/chat/sessions/${sessionId}`,
+    pinSession: (sessionId: string) =>
+      `/assistant-service/v1/app/chat/sessions/${sessionId}/pin`,
+    unpinSession: (sessionId: string) =>
+      `/assistant-service/v1/app/chat/sessions/${sessionId}/unpin`,
     sendFeedback: (sessionId: string) =>
       `/assistant-service/v1/app/chat/sessions/${sessionId}/feedback`,
     generateAudio: (sessionId: string, messageId: string) =>

package/src/translation/resources/i18n.ts

@@ -5,14 +5,22 @@ 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',
+  session_pin: 'Ghim',
+  session_unpin: 'Bỏ ghim',
   session_rename: 'Đổi tên',
   session_share: 'Chia sẻ',
   session_delete: 'Xoá',
+  pin_session_success: 'Đã ghim phiên chat',
+  unpin_session_success: 'Đã bỏ ghim phiên chat',
+
+  // 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',

package/src/types/dto.ts

@@ -104,6 +104,7 @@ export interface SessionSearchItem {
   created_at: string;
   updated_at: string;
   metadata: Record<string, any>;
+  pinned_at?: string;
 }
 
 export interface SearchSessionsRequest {

package/src/types/ui.ts

@@ -14,8 +14,14 @@ export interface WithToastProps {
 }
 
 export interface KBottomSheetPropsEnhance extends KBottomSheetProps {
-  header: KBottomSheetProps['header'] & {
+  header?: NonNullable<KBottomSheetProps['header']> & {
     customRenderer?: (dismiss: () => void) => JSX.Element;
+
+    subTitle?: NonNullable<
+      NonNullable<KBottomSheetProps['header']>['subTitle']
+    > & {
+      numberOfLines?: number;
+    };
   };
 }