react-native-chatbot-ai 0.1.38 → 0.1.40

package/src/components/chat/ChatEmpty.tsx

@@ -1,5 +1,5 @@
 import { KColors, KContainer, KLabel, KSpacingValue } from '@droppii/libs';
-import { StyleSheet, Platform } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { useFetchSuggestions } from '../../hooks/suggestions/useFetchSuggestions';
 import SuggestionItem from './SuggestionItem';
 import { useSendMessage } from '../../hooks/message/useSendMessage';
@@ -72,7 +72,7 @@ const styles = StyleSheet.create({
     gap: KSpacingValue['0.5rem'],
   },
   transformStyle: {
-    transform: [Platform.OS === 'android' ? { scale: -1 } : { scaleY: -1 }],
+    // transform: [Platform.OS === 'android' ? { scale: -1 } : { scaleY: -1 }],
   },
   disclaimer: {
     fontSize: 11,

package/src/components/chat/ChatMessageList.tsx

@@ -1,11 +1,11 @@
-import { FlatList, StyleSheet, DeviceEventEmitter, View } from 'react-native';
+import { FlatList, StyleSheet, 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, KColors, KImage, KContainer } from '@droppii/libs';
 import type { IMessageItem } from '../../types';
-import { events, GAEvents } from '../../constants/events';
+import { GAEvents } from '../../constants/events';
 import { useChatContext } from '../../context/ChatContext';
 import useSessionStore from '../../store/session';
 
@@ -25,37 +25,18 @@ const ChatMessageList = ({ messageList = [] }: IChatMessageListProps) => {
 
   const onScroll = useCallback((event: any) => {
     const offsetY = event?.nativeEvent?.contentOffset?.y ?? 0;
+    const layoutHeight = event?.nativeEvent?.layoutMeasurement?.height ?? 0;
+    const contentHeight = event?.nativeEvent?.contentSize?.height ?? 0;
     scrollOffsetRef.current = offsetY;
 
-    const threshold = 50;
-    setShowScrollToBottom(offsetY > threshold);
+    const threshold = 20;
+    const atBottom = layoutHeight + offsetY >= contentHeight - threshold;
+    setShowScrollToBottom(!atBottom);
   }, []);
 
-  const scrollToBottom = useCallback(() => {
-    flatListRef.current?.scrollToOffset({ offset: 0, animated: true }); // inverted => bottom = offset 0
-  }, []);
-
-  useEffect(() => {
-    const subExpandThinkingStep = DeviceEventEmitter.addListener(
-      events.expandThinkingStep,
-      (isExpand: boolean) => {
-        try {
-          const scrollToOffset = flatListRef.current?.scrollToOffset({
-            offset: scrollOffsetRef.current + (isExpand ? 60 : -60),
-            animated: true,
-          });
-          setTimeout(() => {
-            scrollToOffset?.();
-          }, 100);
-        } catch (error) {
-          console.error(error);
-        }
-      }
-    );
-
-    return () => {
-      subExpandThinkingStep.remove();
-    };
+  const scrollToBottom = useCallback(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    flatListRef.current?.scrollToEnd({ animated: true });
   }, []);
 
   useEffect(() => {
@@ -68,6 +49,12 @@ const ChatMessageList = ({ messageList = [] }: IChatMessageListProps) => {
     }
   }, [sessionId, logGA]);
 
+  useEffect(() => {
+    if (messageList.length > 0) {
+      scrollToBottom();
+    }
+  }, [messageList, scrollToBottom]);
+
   return (
     <View style={{ flex: 1 }}>
       <FlatListComponent
@@ -79,10 +66,12 @@ const ChatMessageList = ({ messageList = [] }: IChatMessageListProps) => {
         }: {
           item: IMessageItem;
           index: number;
-        }) => <ChatItem item={item} index={index} />}
+        }) => (
+          <ChatItem item={item} isLastItem={index === messageList.length - 1} />
+        )}
         keyExtractor={(item: IMessageItem) => item.id}
         contentContainerStyle={styles.container}
-        inverted
+        // inverted
         ListEmptyComponent={<ChatEmpty />}
         onScroll={onScroll}
         scrollEventThrottle={16}
@@ -111,7 +100,7 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     gap: KSpacingValue['0.5rem'],
     paddingVertical: KSpacingValue['1rem'],
-    justifyContent: 'flex-end',
+    // justifyContent: 'flex-end',
   },
   scrollButton: {
     position: 'absolute',

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

@@ -54,6 +54,7 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
   const logGA = useChatContext().logGA;
   const { onSendMessage } = useSendMessage();
   const [message, setMessage] = useState('');
+  const sessionId = useSessionStore((state) => state.sessionId);
   const isStreaming = useStreamMessageStore((state) => state.isStreaming);
   const stopStream = useStreamMessageStore((state) => state.stopStream);
 
@@ -103,6 +104,7 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
   }, [onPressImagePicker, onPressCameraPicker]);
 
   const onPressSend = useCallback(() => {
+    if (isDisabledSend) return;
     if (isStreaming) {
       stopStream();
       logGA(GAEvents.chatDetailStopChatBtnTap, {
@@ -132,6 +134,7 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
     fileUpload,
     logGA,
     clearFileUpload,
+    isDisabledSend,
   ]);
 
   const renderUploadItem = useCallback(
@@ -164,7 +167,7 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
     return () => {
       stopStream();
     };
-  }, [stopStream]);
+  }, [stopStream, sessionId]);
 
   return (
     <KContainer.View style={styles.container}>
@@ -239,17 +242,18 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
             />
           </KContainer.Touchable>
           <KContainer.View flex />
-          <KButton.Solid
-            kind="primary"
-            icon={{
-              vectorName: isStreaming ? 'square-b' : 'send-b',
-              size: 20,
-              tintColor: KColors.white,
-            }}
-            onPress={onPressSend}
-            br="round"
-            disabled={isDisabledSend}
-          />
+          <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>

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

@@ -199,7 +199,11 @@ class CustomRenderer extends Renderer implements RendererInterface {
         );
       default:
         return (
-          <KLabel.Text typo="TextMdNormal" key={this.getKey()}>
+          <KLabel.Text
+            typo="TextMdNormal"
+            key={this.getKey()}
+            selectable={true}
+          >
             {match?.[2] || ''}
           </KLabel.Text>
         );
@@ -225,6 +229,7 @@ class CustomRenderer extends Renderer implements RendererInterface {
         key={this.getKey()}
         typo="TextMdNormal"
         color={KColors.black}
+        selectable={true}
       >
         {text}
       </KLabel.Text>
@@ -237,6 +242,7 @@ class CustomRenderer extends Renderer implements RendererInterface {
         key={this.getKey()}
         typo="TextMdNormal"
         color={KColors.black}
+        selectable={true}
       >
         {text}
       </KLabel.Text>
@@ -250,6 +256,7 @@ class CustomRenderer extends Renderer implements RendererInterface {
         typo="TextMdBold"
         style={styles.mdStrong}
         color={KColors.black}
+        selectable={true}
       >
         {children}
       </KLabel.Text>
@@ -262,6 +269,7 @@ class CustomRenderer extends Renderer implements RendererInterface {
         typo="TextMdNormal"
         style={styles.mdEm}
         color={KColors.black}
+        selectable={true}
       >
         {children}
       </KLabel.Text>
@@ -286,6 +294,7 @@ class CustomRenderer extends Renderer implements RendererInterface {
           typo="TextMdNormal"
           style={textStyle}
           color={KColors.gray.dark}
+          selectable={true}
         >
           {text}
         </KLabel.Text>
@@ -500,10 +509,11 @@ const ChatAIAnswerMessageItem = ({
       ))}
 
       {/* Message Actions Bar */}
+
       <MessageActionsBar
         messageId={item.id}
         messageContent={item.content}
-        isVisible={!isStreaming}
+        isVisible={!isStreaming || (isStreaming && !isLast)}
         productImages={productImages}
         message={item}
       />

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

@@ -8,14 +8,13 @@ import {
 } from '@droppii/libs';
 import FastImage from '@d11/react-native-fast-image';
 import type { IMessageItem } from '../../../types';
-import { StyleSheet, DeviceEventEmitter } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { IconThinkingStep } from '../../../assets/svgIcon/IconThinkingStep';
 import { IconChatArrow } from '../../../assets/svgIcon/IconChatArrow';
 import useStreamMessageStore from '../../../store/streamMessage';
 import Markdown, { Renderer, RendererInterface } from 'react-native-marked';
 import icons from '../../../assets/icons';
-import { events } from '../../../constants/events';
 import { trans } from '../../../translation';
 
 interface ChatAIThinkingMessageItemProps {
@@ -91,10 +90,6 @@ const ChatAIThinkingMessageItem = ({
   const [display, setDisplay] = useState('');
   const indexRef = useRef(0);
 
-  const onPressExpandThinkingStep = useCallback((expand: boolean) => {
-    DeviceEventEmitter.emit(events.expandThinkingStep, expand);
-  }, []);
-
   const renderHeader = useCallback(() => {
     return (
       <KContainer.View style={styles.header}>
@@ -158,7 +153,6 @@ const ChatAIThinkingMessageItem = ({
           containerStyle={styles.container}
           headerStyle={styles.mHeader}
           defaultValue={true}
-          onChangeValue={onPressExpandThinkingStep}
         >
           {renderThinkingContent()}
         </KListItem.Accordion>

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

@@ -5,18 +5,18 @@ import ChatUserMessageItem from './ChatUserMessageItem';
 
 interface ChatItemProps {
   item: IMessageItem;
-  index: number;
+  isLastItem: boolean;
 }
-const ChatItem = ({ item, index }: ChatItemProps) => {
+const ChatItem = ({ item, isLastItem = false }: ChatItemProps) => {
   switch (item.type) {
     case MessageType.user_message:
-      return <ChatUserMessageItem item={item} isLast={index === 0} />;
+      return <ChatUserMessageItem item={item} isLast={isLastItem} />;
     case MessageType.ai_answer:
-      return <ChatAIAnswerMessageItem item={item} isLast={index === 0} />;
+      return <ChatAIAnswerMessageItem item={item} isLast={isLastItem} />;
     case MessageType.ai_thinking:
-      return <ChatAIThinkingMessageItem item={item} isLast={index === 0} />;
+      return <ChatAIThinkingMessageItem item={item} isLast={isLastItem} />;
     default:
-      return <ChatUserMessageItem item={item} isLast={index === 0} />;
+      return <ChatUserMessageItem item={item} isLast={isLastItem} />;
   }
 };
 

package/src/components/portal/Popup.tsx

@@ -45,6 +45,7 @@ import {
 import { Z_INDEX_PRIORITY } from '../../constants';
 import { ScrollView } from 'react-native-gesture-handler';
 import { WithPopupProps } from '../../types';
+import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
 
 const UNIT = KSpacingValue['1rem'];
 const STATUS_BAR_HEIGHT = KDims.os === 'ios' ? 0 : StatusBar.currentHeight || 0;
@@ -248,8 +249,10 @@ const Popup = forwardRef<WithPopupProps>((_, ref) => {
     e.stopPropagation();
   }, []);
 
+  const { height } = useReanimatedKeyboardAnimation();
+
   const rStyle = useAnimatedStyle(() => ({
-    transform: [{ scale: scale.value }],
+    transform: [{ scale: scale.value }, { translateY: height.value / 2 }],
   }));
 
   if (!data) {

package/src/components/product/CardHorizontal.tsx

@@ -349,7 +349,7 @@ const ProductHorizontalCard = memo(
                 background={KColors.palette.primary.w25}
                 tintColor={KColors.primary.normal}
                 icon={{
-                  vectorName: 'cart-alt-o',
+                  vectorName: 'cart-plus-o',
                   size: 16,
                 }}
                 size="sm"

package/src/constants/events.ts

@@ -2,7 +2,6 @@ export const events = {
   updateOneMessage: 'update_one_message',
   updateMultipleMessage: 'update_multiple_message',
   forceUpdateMessages: 'force_update_messages',
-  expandThinkingStep: 'expand_thinking_step',
   updateMessageError: 'update_message_error',
 };
 

package/src/hooks/message/useMessage.ts

@@ -28,8 +28,7 @@ export const useMessage = () => {
     if (!res) return;
     setLoadState((prev) => ({
       ...res,
-      messages:
-        res?.messages?.length > 0 ? res.messages.reverse() : prev.messages,
+      messages: res?.messages?.length > 0 ? res.messages : prev.messages,
     }));
   }, [sessionId, getSessionById]);
 
@@ -44,8 +43,12 @@ export const useMessage = () => {
   useEffect(() => {
     const subOneMessage = DeviceEventEmitter.addListener(
       events.updateOneMessage,
-      (messageItem: IMessageItem) => {
+      (messageItem: IMessageItem, sID?: string) => {
         setLoadState((prev) => {
+          if (sID !== prev.id) {
+            return prev;
+          }
+
           const messageIndex = prev.messages.findIndex(
             (m) => m.id === messageItem.id
           );
@@ -65,7 +68,7 @@ export const useMessage = () => {
 
           return {
             ...prev,
-            messages: [messageItem, ...prev.messages],
+            messages: [...prev.messages, messageItem],
           };
         });
       }
@@ -73,23 +76,29 @@ export const useMessage = () => {
 
     const subMultipleMessage = DeviceEventEmitter.addListener(
       events.updateMultipleMessage,
-      (messageItems: IMessageItem[]) => {
+      (messageItems: IMessageItem[], sID?: string) => {
         setLoadState((prev) => {
+          if (sID !== prev.id) {
+            return prev;
+          }
+
           const existingIds = new Set(prev.messages.map((m) => m?.id));
-          const filtered = messageItems
-            .filter((m) => !existingIds.has(m?.id))
-            .reverse();
+          const filtered = messageItems.filter((m) => !existingIds.has(m?.id));
           return {
             ...prev,
-            messages: [...filtered, ...prev.messages],
+            messages: [...prev.messages, ...filtered],
           };
         });
       }
     );
     const subForceUpdateMessages = DeviceEventEmitter.addListener(
       events.forceUpdateMessages,
-      (messages: IMessageItem[]) => {
+      (messages: IMessageItem[], sID?: string) => {
         setLoadState((prev) => {
+          if (sID !== prev.id) {
+            return prev;
+          }
+
           const merged = prev.messages.map((msg) => {
             const update = messages.find((u) => u.id === msg.id);
             return update ? { ...msg, ...update } : msg;
@@ -99,23 +108,27 @@ export const useMessage = () => {
           const newItems = messages.filter((u) => !existingIds.has(u.id));
           return {
             ...prev,
-            messages: [...newItems, ...merged],
+            messages: [...merged, ...newItems],
           };
         });
       }
     );
     const subUpdateMessageError = DeviceEventEmitter.addListener(
       events.updateMessageError,
-      (messageId: string, metadata: Record<string, any>) => {
+      (messageId: string, metadata: Record<string, any>, sID?: string) => {
         setLoadState((prev) => {
+          if (sID !== prev.id) {
+            return prev;
+          }
+
           const messageIndex = prev.messages.findIndex(
             (m) => m.id === messageId
           );
           if (messageIndex === -1) return prev;
-          const updatedMessages = prev.messages
+          const updatedMessages: IMessageItem[] = prev.messages
             .slice(messageIndex)
             .map((m, i) =>
-              i === 0
+              i === updatedMessages?.length - 1
                 ? {
                     ...m,
                     metadata: {

package/src/hooks/message/useSendMessage.ts

@@ -46,7 +46,11 @@ export const useSendMessage = () => {
         manual_retry_attempts: 0,
         group_suggestion_id: null,
       };
-      DeviceEventEmitter.emit(events.updateOneMessage, messageItem);
+      DeviceEventEmitter.emit(
+        events.updateOneMessage,
+        messageItem,
+        useSessionStore.getState().sessionId
+      );
 
       let latestSessionId;
       if (!useSessionStore.getState().sessionId) {

package/src/hooks/message/useStreamMessage.ts

@@ -69,11 +69,12 @@ export const useStreamMessage = () => {
         () => {
           DeviceEventEmitter.emit(
             events.updateMultipleMessage,
-            Object.values(buffers).map((m) => ({ ...m, content: '' }))
+            Object.values(buffers).map((m) => ({ ...m, content: '' })),
+            useSessionStore.getState().sessionId
           );
           setStreamMessage(buffers);
         },
-        150,
+        250,
         { leading: true, trailing: true }
       );
 
@@ -83,19 +84,23 @@ export const useStreamMessage = () => {
       ) => {
         await new Promise((resolve) => setTimeout(resolve, 500));
         if (isError) {
-          DeviceEventEmitter.emit(events.updateMessageError, [
+          DeviceEventEmitter.emit(
+            events.updateMessageError,
+            messageId,
             {
-              id: messageId,
-              metadata: {
-                needs_retry: true,
-                original_message_id: localMessageId || messageId,
-                status: 'error',
-              },
+              needs_retry: true,
+              original_message_id: localMessageId || messageId,
+              status: 'error',
             },
-          ]);
+            useSessionStore.getState().sessionId
+          );
         } else {
           const arrMessages = Object.values(buffers);
-          DeviceEventEmitter.emit(events.forceUpdateMessages, arrMessages);
+          DeviceEventEmitter.emit(
+            events.forceUpdateMessages,
+            arrMessages,
+            useSessionStore.getState().sessionId
+          );
           arrMessages.forEach((m: any) => {
             if (m?.suggestions?.length > 0) {
               logGA?.(GAEvents.chatDetailInConvPrmSuggReturn, {
@@ -149,6 +154,7 @@ export const useStreamMessage = () => {
       });
 
       es.addEventListener('close', async () => {
+        throttledFlush.cancel();
         console.log('✅ Stream closed');
       });
     },
@@ -157,10 +163,14 @@ export const useStreamMessage = () => {
 
   const retryStream = useCallback(
     (messageItem: IMessageItem) => {
-      DeviceEventEmitter.emit(events.updateOneMessage, {
-        ...messageItem,
-        metadata: {},
-      });
+      DeviceEventEmitter.emit(
+        events.updateOneMessage,
+        {
+          ...messageItem,
+          metadata: {},
+        },
+        sessionId
+      );
 
       logGA(GAEvents.chatDetailSendBtnTap, {
         chat_type: useSessionStore.getState().sessionLogType,