react-native-chatbot-ai 0.1.47 → 0.1.49

package/lib/typescript/src/hooks/upload/useFileUpload.d.ts

@@ -1,7 +1,7 @@
 import { FileUpload } from '../../hooks/upload/useUploadItem';
 interface UseFileUploadProps {
     file: FileUpload;
-    onSuccess?: (data: any) => void;
+    onSuccess?: (data: any, duration?: number) => void;
     onError?: (err: any) => void;
 }
 export declare const useFileUpload: ({ file, onSuccess, onError, }: UseFileUploadProps) => {

package/lib/typescript/src/hooks/upload/useFileUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFileUpload.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/upload/useFileUpload.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAc9D,UAAU,kBAAkB;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,GAAI,+BAI3B,kBAAkB;;;;;;CA+FpB,CAAC"}
+{"version":3,"file":"useFileUpload.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/upload/useFileUpload.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAc9D,UAAU,kBAAkB;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,GAAI,+BAI3B,kBAAkB;;;;;;CAmGpB,CAAC"}

package/lib/typescript/src/store/streamMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"streamMessage.d.ts","sourceRoot":"","sources":["../../../../src/store/streamMessage.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKnD,QAAA,MAAM,qBAAqB,iFAkCxB,CAAC;AAEJ,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"streamMessage.d.ts","sourceRoot":"","sources":["../../../../src/store/streamMessage.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKnD,QAAA,MAAM,qBAAqB,iFAyCxB,CAAC;AAEJ,eAAe,qBAAqB,CAAC"}

package/lib/typescript/src/types/chat.d.ts

@@ -65,6 +65,7 @@ export interface StreamMessageStore {
     eventSource?: EventSource;
     setEventSource: (es?: EventSource) => void;
     stopStream: () => void;
+    clearStreamMessageRecordById: (ids: string[]) => void;
 }
 export interface ProductsStore {
     products: Record<string, IProductItem | undefined>;

package/lib/typescript/src/types/chat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat.d.ts","sourceRoot":"","sources":["../../../../src/types/chat.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"chat.d.ts","sourceRoot":"","sources":["../../../../src/types/chat.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-chatbot-ai",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "description": "React Native library for Chatbot AI",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -96,6 +96,7 @@
     "@d11/react-native-fast-image": "*",
     "@droppii/libs": "*",
     "@react-native-documents/picker": "*",
+    "@shopify/flash-list": "*",
     "@tanstack/react-query": "*",
     "react": "*",
     "react-native": "*",
@@ -179,6 +180,7 @@
     "axios": "^1.12.2",
     "dayjs": "^1.11.18",
     "lodash": "^4.17.21",
+    "react-native-animatable": "^1.4.0",
     "react-native-marked": "^7.0.2",
     "react-native-skeleton-placeholder": "^5.2.4",
     "react-native-sse": "^1.2.1",

package/src/components/chat/ChatEmpty.tsx

@@ -1,6 +1,5 @@
 import { KColors, KContainer, KLabel, KSpacingValue } from '@droppii/libs';
 import { StyleSheet } from 'react-native';
-import { useFetchSuggestions } from '../../hooks/suggestions/useFetchSuggestions';
 import SuggestionItem from './SuggestionItem';
 import { useSendMessage } from '../../hooks/message/useSendMessage';
 import debounce from 'lodash/debounce';
@@ -9,15 +8,18 @@ import { trans } from '../../translation';
 import { useChatContext } from '../../context/ChatContext';
 import { GAEvents } from '../../constants/events';
 
-const ChatEmpty = () => {
-  const { data } = useFetchSuggestions();
+interface IChatEmptyProps {
+  suggestions?: ISuggestionItem[];
+}
+
+const ChatEmpty = ({ suggestions }: IChatEmptyProps) => {
   const { onSendMessage } = useSendMessage();
   const logGA = useChatContext().logGA;
 
   const onPress = debounce((item: ISuggestionItem, index: number) => {
     logGA(GAEvents.newChatNewChatPrmSuggTap, {
       suggestion_id: item.suggestion_id,
-      suggestion_content: item.content,
+      suggestion_content: item?.content?.slice?.(0, 100) || '',
       suggestion_cate: item.category,
       order: index,
     });
@@ -25,10 +27,7 @@ const ChatEmpty = () => {
   }, 200);
 
   return (
-    <KContainer.ScrollView
-      contentContainerStyle={styles.container}
-      style={styles.transformStyle}
-    >
+    <KContainer.View style={styles.container}>
       <KLabel.Text typo="TextXLgMedium" center>
         {trans('chat_empty_title')}
       </KLabel.Text>
@@ -40,7 +39,7 @@ const ChatEmpty = () => {
           {trans('chat_empty_description_2')}
         </KLabel.Text>
       </KContainer.View>
-      {data?.suggestions?.map((item: ISuggestionItem, index: number) => (
+      {suggestions?.map((item: ISuggestionItem, index: number) => (
         <SuggestionItem
           key={item.suggestion_id}
           item={item}
@@ -57,7 +56,7 @@ const ChatEmpty = () => {
       >
         {trans('ai_answer_note')}
       </KLabel.Text>
-    </KContainer.ScrollView>
+    </KContainer.View>
   );
 };
 
@@ -71,9 +70,6 @@ const styles = StyleSheet.create({
     padding: KSpacingValue['0.75rem'],
     gap: KSpacingValue['0.5rem'],
   },
-  transformStyle: {
-    // transform: [Platform.OS === 'android' ? { scale: -1 } : { scaleY: -1 }],
-  },
   disclaimer: {
     fontSize: 11,
     paddingHorizontal: KSpacingValue['0.5rem'],

package/src/components/chat/ChatMessageList.tsx

@@ -1,4 +1,4 @@
-import { FlatList, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import type { ComponentType } from 'react';
 import { useCallback, useRef, useEffect, useState } from 'react';
 import ChatEmpty from './ChatEmpty';
@@ -8,8 +8,10 @@ import type { IMessageItem } from '../../types';
 import { GAEvents } from '../../constants/events';
 import { useChatContext } from '../../context/ChatContext';
 import useSessionStore from '../../store/session';
+import { FlashList } from '@shopify/flash-list';
+import { useFetchSuggestions } from '../../hooks/suggestions/useFetchSuggestions';
 
-const FlatListComponent = FlatList as unknown as ComponentType<any>;
+const FlashListComponent = FlashList as unknown as ComponentType<any>;
 
 interface IChatMessageListProps {
   messageList?: IMessageItem[];
@@ -18,9 +20,12 @@ interface IChatMessageListProps {
 const ChatMessageList = ({ messageList = [] }: IChatMessageListProps) => {
   const logGA = useChatContext().logGA;
   const sessionId = useSessionStore((state) => state.sessionId);
+  const { data: suggestions } = useFetchSuggestions();
 
   const flatListRef = useRef<any>(null);
   const scrollOffsetRef = useRef(0);
+  const contentHeightRef = useRef(0);
+  const viewportHeightRef = useRef(0);
   const [showScrollToBottom, setShowScrollToBottom] = useState(false);
 
   const onScroll = useCallback((event: any) => {
@@ -36,7 +41,11 @@ const ChatMessageList = ({ messageList = [] }: IChatMessageListProps) => {
 
   const scrollToBottom = useCallback(async () => {
     await new Promise((resolve) => setTimeout(resolve, 300));
-    flatListRef.current?.scrollToEnd({ animated: true });
+    const offset = Math.max(
+      0,
+      contentHeightRef.current - viewportHeightRef.current
+    );
+    flatListRef.current?.scrollToOffset({ animated: true, offset });
   }, []);
 
   useEffect(() => {
@@ -53,11 +62,11 @@ const ChatMessageList = ({ messageList = [] }: IChatMessageListProps) => {
     if (messageList.length > 0) {
       scrollToBottom();
     }
-  }, [messageList, scrollToBottom]);
+  }, [messageList.length, scrollToBottom]);
 
   return (
     <View style={{ flex: 1 }}>
-      <FlatListComponent
+      <FlashListComponent
         ref={flatListRef}
         data={messageList}
         renderItem={({
@@ -71,10 +80,18 @@ const ChatMessageList = ({ messageList = [] }: IChatMessageListProps) => {
         )}
         keyExtractor={(item: IMessageItem) => item.id}
         contentContainerStyle={styles.container}
-        // inverted
-        ListEmptyComponent={<ChatEmpty />}
+        ListEmptyComponent={
+          <ChatEmpty suggestions={suggestions?.suggestions || []} />
+        }
         onScroll={onScroll}
         scrollEventThrottle={16}
+        estimatedItemSize={60}
+        onLayout={(e: any) => {
+          viewportHeightRef.current = e?.nativeEvent?.layout?.height || 0;
+        }}
+        onContentSizeChange={(_: any, height: number) => {
+          contentHeightRef.current = height;
+        }}
       />
 
       {showScrollToBottom && (
@@ -100,7 +117,6 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     gap: KSpacingValue['0.5rem'],
     paddingVertical: KSpacingValue['1rem'],
-    // justifyContent: 'flex-end',
   },
   scrollButton: {
     position: 'absolute',

package/src/components/chat/SuggestionItem.tsx

@@ -10,6 +10,7 @@ import {
 } from '@droppii/libs';
 import { SuggestionCategory } from '../../types/common';
 import { StyleSheet } from 'react-native';
+import * as Animatable from 'react-native-animatable';
 
 interface SuggestionItemProps {
   item: ISuggestionItem;
@@ -80,15 +81,21 @@ const SuggestionItem = ({ item, index, onPressItem }: SuggestionItemProps) => {
   }, [item.category]);
 
   return (
-    <KContainer.Touchable
-      style={styles.container}
-      onPress={() => onPressItem(item, index)}
+    <Animatable.View
+      animation="fadeInUp"
+      duration={500}
+      style={{ width: '100%' }}
     >
-      {icon}
-      <KLabel.Text flex typo="TextNmNormal">
-        {item?.content || ''}
-      </KLabel.Text>
-    </KContainer.Touchable>
+      <KContainer.Touchable
+        style={styles.container}
+        onPress={() => onPressItem(item, index)}
+      >
+        {icon}
+        <KLabel.Text flex typo="TextNmNormal">
+          {item?.content || ''}
+        </KLabel.Text>
+      </KContainer.Touchable>
+    </Animatable.View>
   );
 };
 

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

@@ -77,7 +77,7 @@ const SuggestionsBar = ({
         conversation_id: useSessionStore.getState().sessionId,
         group_id: groupSuggestionId,
         suggestion_id: item.suggestion_id,
-        suggestion_content: item.content,
+        suggestion_content: item?.content?.slice?.(0, 100) || '',
         suggestion_cate: item.category,
         order: index,
       });

package/src/components/chat/footer/item/UploadFileItem.tsx

@@ -13,6 +13,9 @@ import { formatFileSize, shortenFileName } from '../../../../utils/common';
 import { useFileUpload } from '../../../../hooks/upload/useFileUpload';
 import UIUtils from '../../../../utils/ui';
 import { useEffect, useRef } from 'react';
+import { useChatContext } from 'src/context/ChatContext';
+import { GAEvents } from 'src/constants/events';
+import useSessionStore from 'src/store/session';
 
 interface Props {
   item: FileUpload;
@@ -20,9 +23,10 @@ interface Props {
   onSuccess?: (item: FileUpload) => void;
 }
 const UploadFileItem = ({ item, onRemove, onSuccess }: Props) => {
+  const logGA = useChatContext().logGA;
   const { isUploading, cancel } = useFileUpload({
     file: item,
-    onSuccess: (data: any) => {
+    onSuccess: (data: any, duration?: number) => {
       const mItem = {
         ...item,
         remoteUrl: data?.[0]?.publicUrl,
@@ -30,6 +34,14 @@ const UploadFileItem = ({ item, onRemove, onSuccess }: Props) => {
       };
       if (mItem.remoteUrl) {
         onSuccess?.(mItem);
+        logGA(GAEvents.chatDetailMultimodalUpload, {
+          conversation_id: useSessionStore.getState().sessionId,
+          file_type: 'file',
+          duration: duration || 0,
+          size_mb: (item?.size || 0) / 1024 / 1024,
+          status: 'success',
+          format: item.type,
+        });
       }
     },
     onError: () => {
@@ -38,6 +50,14 @@ const UploadFileItem = ({ item, onRemove, onSuccess }: Props) => {
         theme: 'danger',
       });
       onRemove?.(item);
+      logGA(GAEvents.chatDetailMultimodalUpload, {
+        conversation_id: useSessionStore.getState().sessionId,
+        file_type: 'file',
+        duration: 0,
+        size_mb: (item.size || 0) / 1024 / 1024,
+        status: 'failed',
+        format: item.type,
+      });
     },
   });
 

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

@@ -9,12 +9,13 @@ import {
 import { IMessageItem } from '../../../types';
 import { StyleSheet, Linking } from 'react-native';
 import useStreamMessageStore from '../../../store/streamMessage';
-import React, { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
-import Markdown, {
+import React, { Fragment, ReactNode, useMemo } from 'react';
+import {
   Renderer,
   RendererInterface,
   MarkedTokenizer,
   MarkedStyles,
+  useMarkdown,
 } from 'react-native-marked';
 import { useSearchProduct } from '../../../hooks/product/useSearchProduct';
 import ProductHorizontalCard from '../../product/CardHorizontal';
@@ -33,141 +34,6 @@ interface ChatAIAnswerMessageItemProps {
 
 class CustomTokenizer extends MarkedTokenizer {}
 
-export function splitMarkdownBlocks(text: string): string[] {
-  if (typeof text !== 'string' || !text.length) return [];
-
-  const lines = (text + '\n').split(/\r?\n/);
-  const blocks: string[] = [];
-  let buffer: string[] = [];
-  let insideCode = false;
-  let insideTable = false;
-
-  for (let i = 0; i < lines.length; i++) {
-    const rawLine = lines[i] ?? '';
-    const line = rawLine.trimEnd();
-
-    // --- code block ---
-    if (/^```|^~~~/.test(line)) {
-      insideCode = !insideCode;
-      buffer.push(rawLine);
-      if (!insideCode) {
-        blocks.push(buffer.join('\n'));
-        buffer = [];
-      }
-      continue;
-    }
-    if (insideCode) {
-      buffer.push(rawLine);
-      continue;
-    }
-
-    // --- table block ---
-    if (/^\|.*\|/.test(line)) {
-      // nếu bắt đầu table mới
-      if (!insideTable && buffer.length > 0) {
-        blocks.push(buffer.join('\n'));
-        buffer = [];
-      }
-
-      insideTable = true;
-      buffer.push(rawLine);
-
-      // nếu dòng kế tiếp không phải bảng -> kết thúc bảng
-      const nextLine = lines[i + 1];
-      if (!nextLine || !/^\|.*\|/.test(nextLine)) {
-        insideTable = false;
-        blocks.push(buffer.join('\n'));
-        buffer = [];
-      }
-      continue;
-    }
-
-    // --- component marker ---
-    // ❗ nếu đang trong bảng, giữ nguyên marker trong buffer, không cắt block
-    if (line.includes('<!-- @component:') && !insideTable) {
-      const parts = rawLine
-        .split(/(<!--\s*@component:[\w-]+\([^)]+\)\s*-->)/g)
-        .filter(Boolean);
-
-      for (const part of parts) {
-        if (/^<!--\s*@component:[\w-]+\(/.test(part.trim())) {
-          if (buffer.length > 0) {
-            blocks.push(buffer.join('\n'));
-            buffer = [];
-          }
-          blocks.push(part.trim());
-        } else if (part.trim().length > 0) {
-          buffer.push(part);
-        }
-      }
-      continue;
-    }
-
-    // --- block starter (heading, list, quote, v.v.) ---
-    if (
-      /^(\s*#{1,6}\s+|\s*>|\s*[-*+]\s+|\s*\d+\.\s+)/.test(line) &&
-      !insideTable
-    ) {
-      if (buffer.length > 0) {
-        blocks.push(buffer.join('\n'));
-        buffer = [];
-      }
-    }
-
-    buffer.push(rawLine);
-  }
-
-  if (buffer.length > 0) {
-    blocks.push(buffer.join('\n'));
-  }
-
-  return blocks.map((b) => b.trim()).filter(Boolean);
-}
-
-export function useStreamingMarkdownBlocks(text: string) {
-  const [blocks, setBlocks] = useState<string[]>([]);
-  const prevBlocksRef = useRef<string[]>([]);
-
-  useEffect(() => {
-    if (!text) {
-      setBlocks([]);
-      prevBlocksRef.current = [];
-      return;
-    }
-
-    const newBlocks = splitMarkdownBlocks(text);
-    const prevBlocks = prevBlocksRef.current;
-
-    // ✅ Merge thông minh, không làm mất chữ
-    let merged = [...prevBlocks];
-
-    for (let i = 0; i < newBlocks.length; i++) {
-      const newBlock = newBlocks[i];
-      const oldBlock = prevBlocks[i];
-
-      // nếu block chưa có hoặc thay đổi nội dung → cập nhật
-      if (oldBlock === undefined || newBlock !== oldBlock) {
-        merged[i] = newBlock || '';
-      }
-    }
-
-    // nếu có thêm block mới (VD: text dài hơn)
-    if (newBlocks.length > merged.length) {
-      merged = [...merged, ...newBlocks.slice(merged.length)];
-    }
-
-    // nếu markdown bị rút ngắn (xóa bớt)
-    if (newBlocks.length < merged.length) {
-      merged = merged.slice(0, newBlocks.length);
-    }
-
-    prevBlocksRef.current = merged;
-    setBlocks(merged);
-  }, [text]);
-
-  return blocks;
-}
-
 class CustomRenderer extends Renderer implements RendererInterface {
   constructor(
     openImageViewer?: (images: { url: string }[], index: number) => void,
@@ -199,11 +65,7 @@ class CustomRenderer extends Renderer implements RendererInterface {
         );
       default:
         return (
-          <KLabel.Text
-            typo="TextMdNormal"
-            key={this.getKey()}
-            selectable={true}
-          >
+          <KLabel.Text typo="TextMdNormal" key={this.getKey()}>
             {match?.[2] || ''}
           </KLabel.Text>
         );
@@ -229,7 +91,6 @@ class CustomRenderer extends Renderer implements RendererInterface {
         key={this.getKey()}
         typo="TextMdNormal"
         color={KColors.black}
-        selectable={true}
       >
         {text}
       </KLabel.Text>
@@ -242,7 +103,6 @@ class CustomRenderer extends Renderer implements RendererInterface {
         key={this.getKey()}
         typo="TextMdNormal"
         color={KColors.black}
-        selectable={true}
       >
         {text}
       </KLabel.Text>
@@ -256,7 +116,6 @@ class CustomRenderer extends Renderer implements RendererInterface {
         typo="TextMdBold"
         style={styles.mdStrong}
         color={KColors.black}
-        selectable={true}
       >
         {children}
       </KLabel.Text>
@@ -269,7 +128,6 @@ class CustomRenderer extends Renderer implements RendererInterface {
         typo="TextMdNormal"
         style={styles.mdEm}
         color={KColors.black}
-        selectable={true}
       >
         {children}
       </KLabel.Text>
@@ -294,7 +152,6 @@ class CustomRenderer extends Renderer implements RendererInterface {
           typo="TextMdNormal"
           style={textStyle}
           color={KColors.gray.dark}
-          selectable={true}
         >
           {text}
         </KLabel.Text>
@@ -425,10 +282,6 @@ const ChatAIAnswerMessageItem = ({
   );
   const isStreaming = useStreamMessageStore((state) => state.isStreaming);
 
-  const blocks = useStreamingMarkdownBlocks(
-    streamMessage?.content || item.content
-  );
-
   const openImageViewer = useChatContext()?.openImageViewer;
 
   const productIds = useMemo(() => {
@@ -463,6 +316,12 @@ const ChatAIAnswerMessageItem = ({
   );
   const tokenizer = useMemo(() => new CustomTokenizer(), []);
 
+  const blocks = useMarkdown(streamMessage?.content || item.content, {
+    renderer: renderer,
+    tokenizer: tokenizer,
+    styles: markedStyles,
+  });
+
   // Extract all product images for sharing
   const productImages = useMemo(() => {
     if (productIds.length === 0) {
@@ -489,23 +348,11 @@ const ChatAIAnswerMessageItem = ({
   return (
     <KContainer.View style={styles.container}>
       {blocks.map((chunk, index) => (
-        <ShimmerBlock
-          key={`chunk-${index}`}
-          enable={streamMessage && isStreaming}
-        >
-          <Markdown
-            renderer={renderer}
-            value={chunk}
-            tokenizer={tokenizer}
-            styles={markedStyles}
-            flatListProps={{
-              style: styles.flatList,
-              removeClippedSubviews: false,
-              windowSize: 50,
-              initialNumToRender: 999,
-            }}
-          />
-        </ShimmerBlock>
+        <Fragment key={`chunk-${index}`}>
+          <ShimmerBlock enable={streamMessage && isStreaming}>
+            {chunk}
+          </ShimmerBlock>
+        </Fragment>
       ))}
 
       {/* Message Actions Bar */}

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

@@ -137,6 +137,7 @@ const ChatAIThinkingMessageItem = ({
             value={display}
             flatListProps={{
               style: styles.flatList,
+              scrollEnabled: false,
             }}
           />
         </KContainer.View>

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

@@ -1,6 +1,7 @@
 import { KColors } from '@droppii/libs';
 import React, { useEffect, useRef } from 'react';
 import { View, Animated, StyleSheet, useWindowDimensions } from 'react-native';
+import * as Animatable from 'react-native-animatable';
 
 type Props = {
   children: React.ReactNode;
@@ -28,7 +29,9 @@ export default function ShimmerBlock({
 
   return (
     <View style={styles.container}>
-      {children}
+      <Animatable.View animation="fadeIn" duration={duration} easing="ease-in">
+        {children}
+      </Animatable.View>
 
       {enable && (
         <Animated.View

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

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { IMessageItem, MessageType } from '../../../types';
 import ChatAIAnswerMessageItem from './ChatAIAnswerMessageItem';
 import ChatAIThinkingMessageItem from './ChatAIThinkingMessageItem';
@@ -7,17 +8,24 @@ interface ChatItemProps {
   item: IMessageItem;
   isLastItem: boolean;
 }
-const ChatItem = ({ item, isLastItem = false }: ChatItemProps) => {
-  switch (item.type) {
-    case MessageType.user_message:
-      return <ChatUserMessageItem item={item} isLast={isLastItem} />;
-    case MessageType.ai_answer:
-      return <ChatAIAnswerMessageItem item={item} isLast={isLastItem} />;
-    case MessageType.ai_thinking:
-      return <ChatAIThinkingMessageItem item={item} isLast={isLastItem} />;
-    default:
-      return <ChatUserMessageItem item={item} isLast={isLastItem} />;
-  }
-};
+
+const ChatItem = memo(
+  ({ item, isLastItem = false }: ChatItemProps) => {
+    switch (item.type) {
+      case MessageType.user_message:
+        return <ChatUserMessageItem item={item} isLast={isLastItem} />;
+      case MessageType.ai_answer:
+        return <ChatAIAnswerMessageItem item={item} isLast={isLastItem} />;
+      case MessageType.ai_thinking:
+        return <ChatAIThinkingMessageItem item={item} isLast={isLastItem} />;
+      default:
+        return <ChatUserMessageItem item={item} isLast={isLastItem} />;
+    }
+  },
+  (prev, next) =>
+    prev.isLastItem === next.isLastItem &&
+    prev.item?.id === next.item?.id &&
+    prev.item?.content === next.item?.content
+);
 
 export default ChatItem;

package/src/hooks/message/useMessage.ts

@@ -4,6 +4,7 @@ import { useFetchSessionById } from '../session/useFetchSessionById';
 import { IMessageItem, SessionDetailResponse } from '../../types/dto';
 import { DeviceEventEmitter } from 'react-native';
 import { events } from '../../constants/events';
+import useStreamMessageStore from '../../store/streamMessage';
 
 const initialState = {
   id: '',
@@ -107,6 +108,9 @@ export const useMessage = () => {
             messages: [...merged, ...newItems],
           };
         });
+        useStreamMessageStore
+          .getState()
+          .clearStreamMessageRecordById(messages.map((m) => m.id));
       }
     );
     const subUpdateMessageError = DeviceEventEmitter.addListener(