react-native-chatbot-ai 0.1.27 → 0.1.29

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

@@ -8,7 +8,8 @@ import {
   KRadiusValue,
   KSpacingValue,
 } from '@droppii/libs';
-import { useCallback, useState, useRef, useMemo } from 'react';
+import SuggestionsBar from './SuggestionsBar';
+import { useCallback, useState, useRef, useMemo, useEffect } from 'react';
 import type { ComponentType } from 'react';
 import {
   FlatList,
@@ -42,7 +43,6 @@ import UploadFileItem from './item/UploadFileItem';
 import {
   IAttachment,
   IMessageItem,
-  ISuggestionItem,
   MessageType,
   SendActionLogType,
 } from '../../../types';
@@ -70,28 +70,22 @@ export type UploadItem = ImageUpload | FileUpload;
 const MAX_FILE_UPLOAD = 3;
 const MAX_FILE_SIZE = 30 * 1024 * 1024;
 const MAX_IMAGE_SIZE = 7 * 1024 * 1024;
-const COUNTDOWN_MS = 60000;
 
 interface IChatFooterProps {
   lastMessage?: IMessageItem;
 }
 
 const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
-  const countdownRef = useRef<NodeJS.Timeout | null>(null);
-  const isInCountdownRef = useRef(false);
-  const firstVisibleItemRef = useRef<ISuggestionItem | null>(null);
-
-  const viewabilityConfig = useRef({ itemVisiblePercentThreshold: 10 }).current;
-
   const menuRef = useRef(null);
   const logGA = useChatContext().logGA;
-  const { onSendMessage, stopStream } = useSendMessage();
+  const { onSendMessage } = useSendMessage();
   const [message, setMessage] = useState('');
   const isStreaming = useStreamMessageStore((state) => state.isStreaming);
+  const stopStream = useStreamMessageStore((state) => state.stopStream);
   const [fileUpload, setFileUpload] = useState<UploadItem[]>([]);
 
-  const debouncedMessage = debounce((message: string) => {
-    setMessage(message);
+  const debouncedMessage = debounce((m: string) => {
+    setMessage(m);
   }, 200);
 
   const isDisabledSend = useMemo(() => {
@@ -335,163 +329,101 @@ const ChatFooter = ({ lastMessage }: IChatFooterProps) => {
     });
   }, [fileUpload, logGA]);
 
-  const onPressItemSuggestion = debounce(
-    (item: ISuggestionItem, index: number) => {
-      onSendMessage(
-        item.content,
-        undefined,
-        SendActionLogType.promptSuggestion
-      );
-      logGA(GAEvents.chatDetailInConvPrmSuggTap, {
-        conversation_id: useSessionStore.getState().sessionId,
-        group_id: lastMessage?.group_suggestion_id,
-        suggestion_id: item.suggestion_id,
-        suggestion_content: item.content,
-        suggestion_cate: item.category,
-        order: index,
-      });
-    },
-    200
-  );
-
-  const renderSuggestionItem = useCallback(
-    (item: ISuggestionItem, index: number) => {
-      return (
-        <KContainer.Touchable
-          style={styles.suggestionItem}
-          onPress={() => onPressItemSuggestion(item, index)}
-        >
-          <KLabel.Text typo="TextSmNormal">{item?.content || ''}</KLabel.Text>
-        </KContainer.Touchable>
-      );
-    },
-    [onPressItemSuggestion]
-  );
-
-  const onViewableItemsChanged = useRef(({ viewableItems }: any) => {
-    if (viewableItems && viewableItems.length > 0) {
-      firstVisibleItemRef.current = viewableItems[0].item;
-    }
-  }).current;
-
-  const logFirstVisibleItem = useCallback(() => {
-    if (!firstVisibleItemRef.current) return;
-
-    logGA(GAEvents.chatDetailInConvPrmSuggScroll, {
-      group_id: lastMessage?.group_suggestion_id,
-      message_chat_id: lastMessage?.id,
-      suggestion_id: firstVisibleItemRef.current.suggestion_id,
-    });
-
-    // Bắt đầu countdown
-    isInCountdownRef.current = true;
-    countdownRef.current = setTimeout(() => {
-      isInCountdownRef.current = false;
-      countdownRef.current = null;
-    }, COUNTDOWN_MS);
-  }, [lastMessage, logGA]);
-
-  const handleMomentumEnd = useCallback(() => {
-    if (!isInCountdownRef.current) {
-      logFirstVisibleItem();
-    }
-  }, [logFirstVisibleItem]);
+  useEffect(() => {
+    return () => {
+      stopStream();
+    };
+  }, [stopStream]);
 
   return (
     <KContainer.View style={styles.container}>
       <KContainer.VisibleView visible={isShowSuggestions}>
-        <FlatListComponent
-          data={lastMessage?.suggestions || []}
-          renderItem={({
-            item,
-            index,
-          }: {
-            item: ISuggestionItem;
-            index: number;
-          }) => renderSuggestionItem(item, index)}
-          horizontal
-          keyExtractor={(item: ISuggestionItem) => item.suggestion_id}
-          contentContainerStyle={styles.suggessionContainer}
-          onViewableItemsChanged={onViewableItemsChanged}
-          viewabilityConfig={viewabilityConfig}
-          scrollEventThrottle={16}
-          onMomentumScrollEnd={handleMomentumEnd}
+        <SuggestionsBar
+          suggestions={lastMessage?.suggestions}
+          groupSuggestionId={lastMessage?.group_suggestion_id}
+          messageId={lastMessage?.id}
+          onSendMessage={onSendMessage}
         />
       </KContainer.VisibleView>
-      <KContainer.VisibleView visible={fileUpload.length > 0}>
-        <FlatListComponent
-          data={fileUpload}
-          renderItem={({ item }: { item: UploadItem }) =>
-            renderUploadItem(item)
-          }
-          horizontal
-          keyExtractor={(item: UploadItem) =>
-            item.uploadType === 'image' ? item.path : item.uri
-          }
-          contentContainerStyle={styles.listUploadItem}
+      <KContainer.View style={styles.contentContainer}>
+        <KContainer.VisibleView visible={fileUpload.length > 0}>
+          <FlatListComponent
+            data={fileUpload}
+            renderItem={({ item }: { item: UploadItem }) =>
+              renderUploadItem(item)
+            }
+            horizontal
+            keyExtractor={(item: UploadItem) =>
+              item.uploadType === 'image' ? item.path : item.uri
+            }
+            contentContainerStyle={styles.listUploadItem}
+          />
+        </KContainer.VisibleView>
+        <KInput.TextArea
+          paddingV={0}
+          paddingH={'0.25rem'}
+          placeholder={trans('input_placeholder')}
+          clearButtonMode="hidden"
+          onChangeText={debouncedMessage}
+          value={message}
+          multiline
+          style={styles.input}
+          blurOnSubmit={false}
+          textAlignVertical="top"
         />
-      </KContainer.VisibleView>
-      <KInput.TextArea
-        paddingV={0}
-        paddingH={'0.25rem'}
-        placeholder={trans('input_placeholder')}
-        clearButtonMode="hidden"
-        onChangeText={debouncedMessage}
-        value={message}
-        multiline
-        style={styles.input}
-        blurOnSubmit={false}
-        textAlignVertical="top"
-      />
-      <KContainer.View style={styles.actions}>
-        <Menu
-          ref={menuRef}
-          renderer={Popover}
-          rendererProps={{ placement: 'top', anchorStyle: { display: 'none' } }}
-        >
-          <MenuTrigger
-            customStyles={{
-              TriggerTouchableComponent: TouchableWithoutFeedback,
+        <KContainer.View style={styles.actions}>
+          <Menu
+            ref={menuRef}
+            renderer={Popover}
+            rendererProps={{
+              placement: 'top',
+              anchorStyle: { display: 'none' },
             }}
           >
+            <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}
+                >
+                  <KLabel.Text typo="TextMdMedium">{i.label}</KLabel.Text>
+                  <KImage.VectorIcons name={i.icon} />
+                </MenuOption>
+              ))}
+            </MenuOptions>
+          </Menu>
+          <KContainer.Touchable onPress={handlePressDocumentPicker}>
             <KImage.VectorIcons
-              name="image-o"
+              name="paperclip-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}
-              >
-                <KLabel.Text typo="TextMdMedium">{i.label}</KLabel.Text>
-                <KImage.VectorIcons name={i.icon} />
-              </MenuOption>
-            ))}
-          </MenuOptions>
-        </Menu>
-        <KContainer.Touchable onPress={handlePressDocumentPicker}>
-          <KImage.VectorIcons
-            name="paperclip-o"
-            size={24}
-            color={KColors.gray.dark}
+          </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.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>
       </KContainer.View>
     </KContainer.View>
   );
@@ -501,7 +433,6 @@ export default ChatFooter;
 
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: KSpacingValue['0.75rem'],
     paddingVertical: KSpacingValue['0.5rem'],
     borderWidth: 1,
     borderColor: KColors.hexToRgba(KColors.black, 0.15),
@@ -510,6 +441,9 @@ const styles = StyleSheet.create({
     borderTopRightRadius: KSpacingValue['1.25rem'],
     backgroundColor: KColors.white,
   },
+  contentContainer: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+  },
   actions: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -542,16 +476,4 @@ const styles = StyleSheet.create({
     paddingTop: 6,
     paddingBottom: 8,
   },
-  suggessionContainer: {
-    gap: KSpacingValue['0.25rem'],
-    paddingBottom: 8,
-  },
-  suggestionItem: {
-    backgroundColor: KColors.palette.gray.w25,
-    borderRadius: KRadiusValue['4x'],
-    height: 32,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: KSpacingValue['0.75rem'],
-  },
 });

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

@@ -24,6 +24,7 @@ import { useChatContext } from '../../../context/ChatContext';
 import { trans } from '../../../translation';
 import MessageActionsBar from './MessageActionsBar';
 import useProductsStore from '../../../store/products';
+import ShimmerBlock from './ShimmerBlock';
 
 interface ChatAIAnswerMessageItemProps {
   item: IMessageItem;
@@ -220,7 +221,11 @@ class CustomRenderer extends Renderer implements RendererInterface {
 
   text(text: string | ReactNode[]): ReactNode {
     return (
-      <KLabel.Text key={this.getKey()} typo="TextMdNormal">
+      <KLabel.Text
+        key={this.getKey()}
+        typo="TextMdNormal"
+        color={KColors.black}
+      >
         {text}
       </KLabel.Text>
     );
@@ -228,7 +233,11 @@ class CustomRenderer extends Renderer implements RendererInterface {
 
   codespan(text: string): ReactNode {
     return (
-      <KLabel.Text key={this.getKey()} typo="TextMdNormal">
+      <KLabel.Text
+        key={this.getKey()}
+        typo="TextMdNormal"
+        color={KColors.black}
+      >
         {text}
       </KLabel.Text>
     );
@@ -236,7 +245,12 @@ class CustomRenderer extends Renderer implements RendererInterface {
 
   strong(children: string | ReactNode[]): ReactNode {
     return (
-      <KLabel.Text key={this.getKey()} typo="TextMdBold">
+      <KLabel.Text
+        key={this.getKey()}
+        typo="TextMdBold"
+        style={styles.mdStrong}
+        color={KColors.black}
+      >
         {children}
       </KLabel.Text>
     );
@@ -246,7 +260,8 @@ class CustomRenderer extends Renderer implements RendererInterface {
       <KLabel.Text
         key={this.getKey()}
         typo="TextMdNormal"
-        style={{ fontStyle: 'italic' }}
+        style={styles.mdEm}
+        color={KColors.black}
       >
         {children}
       </KLabel.Text>
@@ -337,7 +352,7 @@ class CustomRenderer extends Renderer implements RendererInterface {
         <KLabel.Text
           typo="TextMdNormal"
           color={KColors.primary.normal}
-          style={{ textDecorationLine: 'underline' }}
+          style={styles.mdLink}
         >
           {children}
         </KLabel.Text>
@@ -366,7 +381,12 @@ class CustomRenderer extends Renderer implements RendererInterface {
 
   heading(text: string | ReactNode[]): ReactNode {
     return (
-      <KLabel.Text key={this.getKey()} typo="TextMdBold">
+      <KLabel.Text
+        key={this.getKey()}
+        typo="TextMdBold"
+        style={styles.mdHeading}
+        color={KColors.black}
+      >
         {text}
       </KLabel.Text>
     );
@@ -443,7 +463,7 @@ const ChatAIAnswerMessageItem = ({
     const images: string[] = [];
 
     productIds.forEach((productId) => {
-      const product = products.find((p) => p.id === productId);
+      const product = products[productId];
 
       if (!product) {
         return;
@@ -460,19 +480,23 @@ const ChatAIAnswerMessageItem = ({
   return (
     <KContainer.View style={styles.container}>
       {blocks.map((chunk, index) => (
-        <Markdown
-          key={index}
-          renderer={renderer}
-          value={chunk}
-          tokenizer={tokenizer}
-          styles={markedStyles}
-          flatListProps={{
-            style: styles.flatList,
-            removeClippedSubviews: false,
-            windowSize: 50,
-            initialNumToRender: 999,
-          }}
-        />
+        <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>
       ))}
 
       {/* Message Actions Bar */}
@@ -539,4 +563,16 @@ const styles = StyleSheet.create({
     borderColor: '#eee',
     borderBottomWidth: StyleSheet.hairlineWidth,
   },
+  mdStrong: {
+    fontWeight: 'bold',
+  },
+  mdEm: {
+    fontStyle: 'italic',
+  },
+  mdHeading: {
+    fontWeight: 'bold',
+  },
+  mdLink: {
+    textDecorationLine: 'underline',
+  },
 });

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

@@ -0,0 +1,60 @@
+import { KColors } from '@droppii/libs';
+import React, { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet, useWindowDimensions } from 'react-native';
+
+type Props = {
+  children: React.ReactNode;
+  duration?: number;
+  enable?: boolean;
+};
+
+export default function ShimmerBlock({
+  children,
+  duration = 1000,
+  enable = false,
+}: Props) {
+  const translateX = useRef(new Animated.Value(0)).current;
+  const { width: screenWidth } = useWindowDimensions();
+
+  useEffect(() => {
+    if (!enable) return;
+    Animated.timing(translateX, {
+      toValue: screenWidth,
+      duration,
+      useNativeDriver: true,
+    }).start();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [screenWidth, duration, enable]);
+
+  return (
+    <View style={styles.container}>
+      {children}
+
+      <Animated.View
+        pointerEvents="none"
+        style={[
+          styles.shimmer,
+          {
+            transform: [{ translateX }],
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  shimmer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: 24,
+    height: '100%',
+    backgroundColor: KColors.hexToRgba(KColors.white, 0.4),
+    borderRadius: 3,
+  },
+});