react-native-chatbot-ai 0.1.12 → 0.1.15

package/src/components/Drawer/SessionList.tsx

@@ -0,0 +1,71 @@
+import { memo, useCallback } from 'react';
+import { StyleSheet, RefreshControl } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
+import { KSpacingValue } from '@droppii/libs';
+import { SessionSearchItem } from '../../types/dto';
+import SessionItem from './SessionItem';
+import EmptyState from './EmptyState';
+import { KContainer } from '@droppii/libs';
+
+const ItemSeparator = () => <KContainer.View height={6} />;
+
+interface SessionListProps {
+  sessions: SessionSearchItem[];
+  activeSessionId?: string;
+  isLoading: boolean;
+  isRefetching: boolean;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  onPressSession: (item: SessionSearchItem) => void;
+  onRefresh: () => void;
+  onEndReached: () => void;
+}
+
+const SessionList = memo<SessionListProps>(
+  ({
+    sessions,
+    activeSessionId: _activeSessionId,
+    isLoading,
+    isRefetching,
+    onPressSession,
+    onRefresh,
+    onEndReached,
+  }) => {
+    const renderItem = useCallback(
+      ({ item }: { item: SessionSearchItem }) => (
+        <SessionItem item={item} isActive={false} onPress={onPressSession} />
+      ),
+      [onPressSession]
+    );
+
+    const keyExtractor = useCallback((item: SessionSearchItem) => item.id, []);
+
+    return (
+      <FlashList
+        data={sessions}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        contentContainerStyle={styles.listContainer}
+        refreshControl={
+          <RefreshControl refreshing={isRefetching} onRefresh={onRefresh} />
+        }
+        onEndReached={onEndReached}
+        onEndReachedThreshold={0.5}
+        ItemSeparatorComponent={ItemSeparator}
+        estimatedItemSize={80}
+        ListEmptyComponent={!isLoading ? <EmptyState /> : null}
+      />
+    );
+  }
+);
+
+SessionList.displayName = 'SessionList';
+
+const styles = StyleSheet.create({
+  listContainer: {
+    flexGrow: 1,
+    paddingHorizontal: KSpacingValue['1rem'],
+  },
+});
+
+export default SessionList;

package/src/components/Drawer/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+
+import ReanimatedDrawerLayout, {
+  DrawerType,
+  DrawerPosition,
+} from 'react-native-gesture-handler/ReanimatedDrawerLayout';
+import DrawerContent from './DrawerContent';
+
+interface ReanimatedDrawerExampleProps {
+  children: React.ReactNode;
+}
+
+const ReanimatedDrawerExample = React.forwardRef<
+  React.ComponentRef<typeof ReanimatedDrawerLayout>,
+  ReanimatedDrawerExampleProps
+>(({ children }, ref) => {
+  const { width } = useWindowDimensions();
+  //   const tapGesture = Gesture.Tap()
+  //     .runOnJS(true)
+  //     .onStart(() => {
+  //       if (ref && 'current' in ref) {
+  //         ref.current?.openDrawer();
+  //       }
+  //     });
+
+  return (
+    <ReanimatedDrawerLayout
+      ref={ref}
+      renderNavigationView={() => <DrawerContent />}
+      drawerPosition={DrawerPosition.LEFT}
+      drawerType={DrawerType.FRONT}
+      drawerWidth={width * 0.8}
+    >
+      <View style={styles.innerContainer}>{children}</View>
+    </ReanimatedDrawerLayout>
+  );
+});
+
+const styles = StyleSheet.create({
+  drawerContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'pink',
+  },
+  innerContainer: {
+    flex: 1,
+  },
+  box: {
+    padding: 20,
+    backgroundColor: 'pink',
+  },
+});
+
+export default ReanimatedDrawerExample;

package/src/components/chat/ChatEmpty.tsx

@@ -5,6 +5,7 @@ import SuggestionItem from './SuggestionItem';
 import { useSendMessage } from '../../hooks/message/useSendMessage';
 import debounce from 'lodash/debounce';
 import { type ISuggestionItem } from '../../types';
+import trans from '../../translation';
 
 const ChatEmpty = () => {
   const { data } = useFetchSuggestions();
@@ -20,14 +21,14 @@ const ChatEmpty = () => {
       style={styles.transformStyle}
     >
       <KLabel.Text typo="TextXLgMedium" center>
-        {'Bạn cần hỗ trợ gì hôm nay?'}
+        {trans('chat_empty_title')}
       </KLabel.Text>
       <KContainer.View center>
         <KLabel.Text typo="TextMdNormal" center color={KColors.gray.normal}>
-          {'Hãy đặt câu hỏi hoặc chia sẻ vấn đề của bạn!'}
+          {trans('chat_empty_description_1')}
         </KLabel.Text>
         <KLabel.Text typo="TextMdNormal" center color={KColors.gray.normal}>
-          {'Những gợi ý dành cho bạn:'}
+          {trans('chat_empty_description_2')}
         </KLabel.Text>
       </KContainer.View>
       {data?.suggestions?.map((item: ISuggestionItem) => (
@@ -42,9 +43,7 @@ const ChatEmpty = () => {
         color={KColors.gray.light}
         textAlign="center"
       >
-        {
-          'Lưu ý: Thông tin từ AI chỉ mang tính tham khảo, cần xác minh với chuyên gia hoặc nguồn uy tín.'
-        }
+        {trans('ai_answer_note')}
       </KLabel.Text>
     </KContainer.ScrollView>
   );

package/src/components/chat/ChatHeader.tsx

@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+import type { ComponentType } from 'react';
 import {
   KColors,
   KContainer,
@@ -7,15 +9,21 @@ import {
 } from '@droppii/libs';
 import images from '../../assets/images';
 import { ImageBackground, StatusBar, StyleSheet } from 'react-native';
-import { useCallback } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import useSessionStore from '../../store/session';
 import { useChatContext } from '../../context/ChatContext';
 
+// Type assertion to fix TypeScript issue with React Native components
+const StatusBarComponent = StatusBar as unknown as ComponentType<{
+  translucent?: boolean;
+}>;
+const ImageBackgroundComponent =
+  ImageBackground as unknown as ComponentType<any>;
+
 export const ChatHeader = () => {
   const insets = useSafeAreaInsets();
   const setSessionId = useSessionStore((state) => state.setSessionId);
-  const { cartButton } = useChatContext();
+  const { cartButton, openDrawer } = useChatContext();
 
   const onPressNewSession = () => {
     setSessionId(undefined);
@@ -24,15 +32,15 @@ export const ChatHeader = () => {
   const renderStatusBar = useCallback(() => {
     return (
       <KContainer.View height={insets.top} background="transparent">
-        <StatusBar translucent />
+        <StatusBarComponent translucent />
       </KContainer.View>
     );
   }, [insets.top]);
   return (
-    <ImageBackground source={images.bg_header} resizeMode="cover">
+    <ImageBackgroundComponent source={images.bg_header} resizeMode="cover">
       {renderStatusBar()}
       <KContainer.View style={styles.header}>
-        <KContainer.Touchable style={styles.button}>
+        <KContainer.Touchable style={styles.button} onPress={openDrawer}>
           <KImage.VectorIcons
             name="menu-ai-o"
             size={24}
@@ -51,7 +59,7 @@ export const ChatHeader = () => {
         </KContainer.Touchable>
         {cartButton}
       </KContainer.View>
-    </ImageBackground>
+    </ImageBackgroundComponent>
   );
 };
 

package/src/components/chat/ChatMessageList.tsx

@@ -1,6 +1,6 @@
 import { FlatList, StyleSheet, DeviceEventEmitter } from 'react-native';
+import type { ComponentType } from 'react';
 import ChatEmpty from './ChatEmpty';
-import { useMessage } from '../../hooks/message/useMessage';
 import ChatItem from './item';
 import { KSpacingValue } from '@droppii/libs';
 import type { IMessageItem } from '../../types';
@@ -8,9 +8,13 @@ import { useCallback, useRef } from 'react';
 import { useEffect } from 'react';
 import { events } from '../../constants/events';
 
-const ChatMessageList = () => {
-  const { messageState } = useMessage();
+// 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 flatListRef = useRef<any>(null);
   const scrollOffsetRef = useRef(0);
 
@@ -42,9 +46,9 @@ const ChatMessageList = () => {
   }, []);
 
   return (
-    <FlatList
+    <FlatListComponent
       ref={flatListRef}
-      data={messageState?.messages || []}
+      data={messageList}
       renderItem={({ item, index }: { item: IMessageItem; index: number }) => (
         <ChatItem item={item} index={index} />
       )}

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

@@ -9,12 +9,16 @@ import {
   KSpacingValue,
 } from '@droppii/libs';
 import { useCallback, useState, useRef, useMemo } from 'react';
+import type { ComponentType } from 'react';
 import {
   FlatList,
   StyleSheet,
   TouchableWithoutFeedback,
   Keyboard,
 } 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 useStreamMessageStore from '../../../store/streamMessage';
@@ -35,8 +39,14 @@ import UploadImageItem from './item/UploadImageItem';
 import { isSameFile, shortenFileName } from '../../../utils/common';
 import { DocumentPickerResponse, types } from '@react-native-documents/picker';
 import UploadFileItem from './item/UploadFileItem';
-import { IAttachment } from '../../../types';
+import {
+  IAttachment,
+  IMessageItem,
+  ISuggestionItem,
+  MessageType,
+} from '../../../types';
 import UIUtils from '../../../utils/ui';
+import trans from '../../../translation';
 
 const { Popover } = renderers;
 export interface ImageUpload extends Image {
@@ -57,7 +67,11 @@ const MAX_FILE_UPLOAD = 3;
 const MAX_FILE_SIZE = 30 * 1024 * 1024;
 const MAX_IMAGE_SIZE = 7 * 1024 * 1024;
 
-const ChatFooter = () => {
+interface IChatFooterProps {
+  lastMessage?: IMessageItem;
+}
+
+const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
   const menuRef = useRef(null);
   const { onSendMessage, stopStream } = useSendMessage();
   const [message, setMessage] = useState('');
@@ -76,6 +90,14 @@ const ChatFooter = () => {
     );
   }, [isStreaming, message, fileUpload]);
 
+  const isShowSuggestions = useMemo(() => {
+    return !!(
+      lastMessage?.type === MessageType.ai_answer &&
+      lastMessage?.suggestions &&
+      lastMessage?.suggestions?.length > 0
+    );
+  }, [lastMessage]);
+
   const onPressImagePicker = useCallback(async () => {
     Keyboard.dismiss();
     const totalImages = fileUpload.filter((i) => i.uploadType === 'image');
@@ -153,12 +175,12 @@ const ChatFooter = () => {
       {
         icon: 'image-o',
         onPress: onPressImagePicker,
-        label: 'Thư viện ảnh',
+        label: trans('photo_library'),
       },
       {
         icon: 'camera-o',
         onPress: onPressCameraPicker,
-        label: 'Chụp ảnh',
+        label: trans('camera'),
       },
     ];
   }, [onPressImagePicker, onPressCameraPicker]);
@@ -285,10 +307,39 @@ const ChatFooter = () => {
     }
   }, [fileUpload]);
 
+  const onPressItemSuggestion = debounce((item: ISuggestionItem) => {
+    onSendMessage(item.content);
+  }, 200);
+
+  const renderSuggestionItem = useCallback(
+    (item: ISuggestionItem) => {
+      return (
+        <KContainer.Touchable
+          style={styles.suggestionItem}
+          onPress={() => onPressItemSuggestion(item)}
+        >
+          <KLabel.Text typo="TextSmNormal">{item?.content || ''}</KLabel.Text>
+        </KContainer.Touchable>
+      );
+    },
+    [onPressItemSuggestion]
+  );
+
   return (
     <KContainer.View style={styles.container}>
+      <KContainer.VisibleView visible={isShowSuggestions}>
+        <FlatListComponent
+          data={lastMessage?.suggestions || []}
+          renderItem={({ item }: { item: ISuggestionItem }) =>
+            renderSuggestionItem(item)
+          }
+          horizontal
+          keyExtractor={(item: ISuggestionItem) => item.suggestion_id}
+          contentContainerStyle={styles.suggessionContainer}
+        />
+      </KContainer.VisibleView>
       <KContainer.VisibleView visible={fileUpload.length > 0}>
-        <FlatList
+        <FlatListComponent
           data={fileUpload}
           renderItem={({ item }: { item: UploadItem }) =>
             renderUploadItem(item)
@@ -301,9 +352,9 @@ const ChatFooter = () => {
         />
       </KContainer.VisibleView>
       <KInput.TextArea
-        paddingV={'0.25rem'}
+        paddingV={0}
         paddingH={'0.25rem'}
-        placeholder="Bạn muốn hỏi gì hôm nay?"
+        placeholder={trans('input_placeholder')}
         clearButtonMode="hidden"
         onChangeText={debouncedMessage}
         value={message}
@@ -409,4 +460,15 @@ const styles = StyleSheet.create({
     gap: KSpacingValue['0.75rem'],
     paddingTop: 6,
   },
+  suggessionContainer: {
+    gap: KSpacingValue['0.25rem'],
+  },
+  suggestionItem: {
+    backgroundColor: KColors.palette.gray.w25,
+    borderRadius: KRadiusValue['4x'],
+    height: 32,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: KSpacingValue['0.75rem'],
+  },
 });

package/src/components/chat/index.tsx

@@ -3,18 +3,28 @@ 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 { useMessage } from '../../hooks/message/useMessage';
 
 const ChatBotAI = () => {
+  const { messageState } = useMessage();
+
+  const lastMessage = messageState?.messages?.[0];
+
   return (
     <KContainer.Page>
-      <KeyboardAvoidingView
+      <KeyboardAvoidingViewComponent
         style={styles.container}
         behavior={Platform.OS === 'ios' ? 'padding' : undefined}
       >
         <ChatHeader />
-        <ChatMessageList />
-        <ChatFooter />
-      </KeyboardAvoidingView>
+        <ChatMessageList messageList={messageState?.messages || []} />
+        <ChatFooter lastMessage={lastMessage} />
+      </KeyboardAvoidingViewComponent>
     </KContainer.Page>
   );
 };

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

@@ -21,6 +21,7 @@ import ProductHorizontalCard from '../../product/CardHorizontal';
 import ChatTable from './ChatTable';
 import DeeplinkItem from './DeeplinkItem';
 import { useChatContext } from '../../../context/ChatContext';
+import trans from '../../../translation';
 
 interface ChatAIAnswerMessageItemProps {
   item: IMessageItem;
@@ -288,7 +289,7 @@ class CustomRenderer extends Renderer implements RendererInterface {
     );
   }
 
-  hr(_children: string | ReactNode[], _style?: any): ReactNode {
+  hr(_styles?: any): ReactNode {
     return (
       <KDivider
         key={this.getKey()}
@@ -425,9 +426,7 @@ const ChatAIAnswerMessageItem = ({
           color={KColors.gray.light}
           textAlign="center"
         >
-          {
-            'Lưu ý: Thông tin từ AI chỉ mang tính tham khảo, cần xác minh với chuyên gia hoặc nguồn uy tín.'
-          }
+          {trans('ai_answer_note')}
         </KLabel.Text>
       </KContainer.VisibleView>
     </KContainer.View>

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

@@ -17,15 +17,20 @@ import { IconPdf } from '../../../assets/svgIcon/IconPdf';
 import ReactNativeBlobUtil from 'react-native-blob-util';
 import UIUtils from '../../../utils/ui';
 import FileViewer from 'react-native-file-viewer';
+import { useSendMessage } from '../../../hooks/message/useSendMessage';
 
 interface ChatUserMessageItemProps {
   item: IMessageItem;
+  isLast: boolean;
 }
 
 const IMAGE_SIZE =
   (Dimensions.get('window').width * 0.8 - KSpacingValue['3.5rem']) / 3;
-const ChatUserMessageItem = ({ item }: ChatUserMessageItemProps) => {
+
+const ChatUserMessageItem = ({ item, isLast }: ChatUserMessageItemProps) => {
   const { openImageViewer } = useChatContext();
+  const { retryStream } = useSendMessage();
+
   const images = item?.attachments?.filter(
     (attachment) => attachment.type === 'image'
   );
@@ -60,6 +65,10 @@ const ChatUserMessageItem = ({ item }: ChatUserMessageItemProps) => {
     });
   }, []);
 
+  const onPressRetry = useCallback(() => {
+    retryStream(item);
+  }, [retryStream, item]);
+
   return (
     <KContainer.View style={styles.container}>
       <KContainer.View style={styles.content}>
@@ -110,9 +119,7 @@ const ChatUserMessageItem = ({ item }: ChatUserMessageItemProps) => {
           <IconChatArrow fill={'#0077FF'} />
         </KContainer.View>
       </KContainer.View>
-      <KContainer.VisibleView
-        visible={item?.metadata?.status === 'tempErrorStatus'}
-      >
+      <KContainer.VisibleView visible={item?.metadata?.status === 'error'}>
         <KContainer.View style={styles.errorContainer}>
           <KImage.VectorIcons
             name="warning-circle-b"
@@ -123,7 +130,7 @@ const ChatUserMessageItem = ({ item }: ChatUserMessageItemProps) => {
             {'Chatbot đang lỗi. Vui lòng thử lại.'}
           </KLabel.Text>
           <KButton.Outline
-            onPress={() => {}}
+            onPress={onPressRetry}
             kind="danger"
             label="Thử lại"
             size="sm"
@@ -132,6 +139,7 @@ const ChatUserMessageItem = ({ item }: ChatUserMessageItemProps) => {
               size: 16,
               tintColor: KColors.danger.normal,
             }}
+            disabled={!isLast}
           />
         </KContainer.View>
       </KContainer.VisibleView>

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

@@ -10,13 +10,13 @@ interface ChatItemProps {
 const ChatItem = ({ item, index }: ChatItemProps) => {
   switch (item.type) {
     case MessageType.user_message:
-      return <ChatUserMessageItem item={item} />;
+      return <ChatUserMessageItem item={item} isLast={index === 0} />;
     case MessageType.ai_answer:
       return <ChatAIAnswerMessageItem item={item} isLast={index === 0} />;
     case MessageType.ai_thinking:
       return <ChatAIThinkingMessageItem item={item} isLast={index === 0} />;
     default:
-      return <ChatUserMessageItem item={item} />;
+      return <ChatUserMessageItem item={item} isLast={index === 0} />;
   }
 };
 

package/src/components/product/CardHorizontal.tsx

@@ -387,4 +387,9 @@ const styles = StyleSheet.create({
     top: 0,
     right: 0,
   },
+  voucherContainer: {
+    flexDirection: 'row',
+    gap: KSpacingValue['0.25rem'],
+    marginTop: KSpacingValue['0.25rem'],
+  },
 });

package/src/constants/events.ts

@@ -3,4 +3,5 @@ export const events = {
   updateMultipleMessage: 'update_multiple_message',
   forceUpdateMessages: 'force_update_messages',
   expandThinkingStep: 'expand_thinking_step',
+  updateMessageError: 'update_message_error',
 };

package/src/constants/query.ts

@@ -3,4 +3,5 @@ export const QUERY_KEYS = {
   GET_SESSION_BY_ID: 'GET_SESSION_BY_ID',
   CREATE_SESSION: 'CREATE_SESSION',
   SEARCH_PRODUCT: 'SEARCH_PRODUCT',
+  SEARCH_SESSIONS: 'SEARCH_SESSIONS',
 };

package/src/context/ChatContext.tsx

@@ -1,7 +1,8 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useRef } from 'react';
 import type { ChatContextType, ChatProviderProps } from '../types/chat';
 import ChatBotAI from '../components/chat';
 import Portal from '../components/portal';
+import ReanimatedDrawerExample from '../components/Drawer';
 
 export const ChatContext = createContext<ChatContextType>({
   apiAddress: '',
@@ -12,11 +13,21 @@ export const ChatContext = createContext<ChatContextType>({
   onNavigateToProduct: () => {},
   csTeamId: '',
   pushLinkTo: () => {},
+  openDrawer: () => {},
+  closeDrawer: () => {},
 });
 
 export const useChatContext = () => useContext(ChatContext);
 
 export const ChatProvider = (props: ChatProviderProps) => {
+  const ref = useRef<any>(null);
+  const openDrawer = () => {
+    ref.current?.openDrawer();
+  };
+
+  const closeDrawer = () => {
+    ref.current?.closeDrawer();
+  };
   const {
     apiAddress,
     userId,
@@ -28,6 +39,7 @@ export const ChatProvider = (props: ChatProviderProps) => {
     csTeamId,
     pushLinkTo,
   } = props;
+
   return (
     <ChatContext.Provider
       value={{
@@ -40,10 +52,16 @@ export const ChatProvider = (props: ChatProviderProps) => {
         onNavigateToProduct,
         csTeamId,
         pushLinkTo,
+        openDrawer,
+        closeDrawer,
       }}
     >
-      <ChatBotAI />
-      <Portal />
+      <ReanimatedDrawerExample ref={ref}>
+        <>
+          <ChatBotAI />
+          <Portal />
+        </>
+      </ReanimatedDrawerExample>
     </ChatContext.Provider>
   );
 };