react-native-chatbot-ai 0.1.37 → 0.1.39

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>
@@ -234,6 +228,7 @@ const styles = StyleSheet.create({
     marginHorizontal: KSpacingValue['1rem'],
   },
   loadingIcon: {
+    marginTop: KSpacingValue['1rem'],
     width: 42,
     height: 42,
   },

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/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,7 +69,8 @@ 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);
         },
@@ -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,