react-native-chatbot-ai 0.1.30 → 0.1.33

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

@@ -42,7 +42,11 @@ const ChatTable: React.FC<TableProps> = ({
               >
                 {toArray(cell).map((child, k) => (
                   <React.Fragment key={`header-cell-${j}-${k}`}>
-                    {child}
+                    {React.isValidElement(child)
+                      ? React.cloneElement(child as React.ReactElement<any>, {
+                          style: styles.headerText,
+                        })
+                      : child}
                   </React.Fragment>
                 ))}
               </KContainer.View>
@@ -113,4 +117,7 @@ const styles = StyleSheet.create({
   firstCell: {
     width: 160,
   },
+  headerText: {
+    fontWeight: 'bold',
+  },
 });

package/src/hooks/upload/useFileUpload.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import ReactNativeBlobUtil from 'react-native-blob-util';
-import { FileUpload } from '../../components/chat/footer';
+import { FileUpload } from '../../hooks/upload/useUploadItem';
 import { useChatContext } from '../../context/ChatContext';
 import { ENDPOINTS } from '../../services/endpoints';
 

package/src/hooks/upload/useImageUpload.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import ReactNativeBlobUtil from 'react-native-blob-util';
-import { ImageUpload } from '../../components/chat/footer';
+import { ImageUpload } from '../../hooks/upload/useUploadItem';
 import { useChatContext } from '../../context/ChatContext';
 import { ENDPOINTS } from '../../services/endpoints';
 

package/src/hooks/upload/useUploadItem.ts

@@ -0,0 +1,220 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Keyboard } from 'react-native';
+import { DocumentPickerResponse, types } from '@react-native-documents/picker';
+import { Image } from 'react-native-image-crop-picker';
+import UIUtils from '../../utils/ui';
+import { isSameFile, shortenFileName } from '../../utils/common';
+import { trans } from '../../translation';
+import {
+  openCameraPicker,
+  openDocumentPicker,
+  openImageMultiplePicker,
+} from '../../utils/device';
+import { GAEvents } from '../../constants/events';
+import useSessionStore from '../../store/session';
+
+export interface ImageUpload extends Image {
+  streamId?: string;
+  remoteUrl?: string;
+  uploadType: 'image';
+}
+
+export interface FileUpload extends DocumentPickerResponse {
+  streamId?: string;
+  remoteUrl?: string;
+  uploadType: 'file';
+}
+
+export type UploadItem = ImageUpload | FileUpload;
+
+const MAX_FILE_UPLOAD = 3;
+const MAX_FILE_SIZE = 30 * 1024 * 1024;
+const MAX_IMAGE_SIZE = 7 * 1024 * 1024;
+
+type Props = {
+  logGA: (event: string, params?: any) => void;
+};
+
+export const useUploadItem = ({ logGA }: Props) => {
+  const [documentUpload, setDocumentUpload] = useState<FileUpload[]>([]);
+  const [imageUpload, setImageUpload] = useState<ImageUpload[]>([]);
+
+  const addImages = useCallback((newImages: Image[]) => {
+    setImageUpload((prev) => {
+      const totalPrevSize = prev.reduce(
+        (acc, item) => acc + (item.size || 0),
+        0
+      );
+
+      const uniqueImages = newImages
+        .filter((img) => !prev.some((sel) => isSameFile(sel, img)))
+        .map((i) => ({ ...i, uploadType: 'image' }))
+        .slice(0, MAX_FILE_UPLOAD - prev.length) as ImageUpload[];
+
+      const totalNewSize = uniqueImages.reduce(
+        (acc, item) => acc + (item.size || 0),
+        0
+      );
+
+      if (totalPrevSize + totalNewSize > MAX_IMAGE_SIZE) {
+        UIUtils.toast.open({
+          title: trans('images_too_large', {
+            name: uniqueImages
+              .map((i) => shortenFileName(i.filename || ''))
+              .join(',\n'),
+          }),
+          theme: 'danger',
+        });
+        return prev;
+      }
+      return [...prev, ...uniqueImages];
+    });
+  }, []);
+
+  const addFile = useCallback((newDocument: DocumentPickerResponse) => {
+    setDocumentUpload((prev) => {
+      const newFileIndex = prev.findIndex(
+        (doc) => doc.uri === newDocument?.uri
+      );
+
+      if (newFileIndex !== -1) {
+        return prev;
+      }
+
+      const totalPrevSize = prev.reduce(
+        (acc, item) => acc + (item.size || 0),
+        0
+      );
+
+      const totalNewSize = newDocument.size || 0;
+
+      if (totalPrevSize + totalNewSize > MAX_FILE_SIZE) {
+        UIUtils.toast.open({
+          title: trans('file_too_large', {
+            name: shortenFileName(newDocument.name || ''),
+          }),
+          theme: 'danger',
+        });
+        return prev;
+      }
+      return [...prev, { ...newDocument, uploadType: 'file' }];
+    });
+  }, []);
+
+  const onPressImagePicker = useCallback(async () => {
+    Keyboard.dismiss();
+    if (imageUpload.length >= MAX_FILE_UPLOAD) {
+      UIUtils.toast.open({
+        title: trans('max_image_reached', { number: MAX_FILE_UPLOAD }),
+      });
+      return;
+    }
+
+    const newImages =
+      (await openImageMultiplePicker({
+        maxFiles:
+          MAX_FILE_UPLOAD - imageUpload.length > 0
+            ? MAX_FILE_UPLOAD - imageUpload.length
+            : 1,
+      })) || [];
+
+    addImages(newImages);
+
+    logGA(GAEvents.chatDetailMultimodalTap, {
+      conversation_id: useSessionStore.getState().sessionId,
+      button: 'image',
+    });
+  }, [imageUpload, addImages, logGA]);
+
+  const onPressCameraPicker = useCallback(async () => {
+    Keyboard.dismiss();
+    if (imageUpload.length >= MAX_FILE_UPLOAD) {
+      UIUtils.toast.open({
+        title: trans('max_image_reached', { number: MAX_FILE_UPLOAD }),
+      });
+      return;
+    }
+    const newImage = await openCameraPicker();
+    if (newImage) {
+      addImages([newImage]);
+    }
+
+    logGA(GAEvents.chatDetailMultimodalTap, {
+      conversation_id: useSessionStore.getState().sessionId,
+      button: 'image',
+    });
+  }, [imageUpload, addImages, logGA]);
+
+  const handlePressDocumentPicker = useCallback(async () => {
+    Keyboard.dismiss();
+    if (documentUpload.length >= MAX_FILE_UPLOAD) {
+      UIUtils.toast.open({
+        title: trans('max_file_reached', { number: MAX_FILE_UPLOAD }),
+      });
+      return;
+    }
+
+    const newDocument = await openDocumentPicker({
+      type: types.pdf,
+    });
+
+    if (newDocument) {
+      addFile(newDocument);
+    }
+
+    logGA(GAEvents.chatDetailMultimodalTap, {
+      conversation_id: useSessionStore.getState().sessionId,
+      button: 'file',
+    });
+  }, [documentUpload, addFile, logGA]);
+
+  const handleUploadSuccess = useCallback((item: UploadItem) => {
+    if (item.uploadType === 'image') {
+      setImageUpload((prev) => {
+        const next = [...prev];
+        const fileIndex = next.findIndex((i) => i?.path === item?.path);
+        if (fileIndex > -1) {
+          next[fileIndex] = { ...next[fileIndex], ...item };
+        }
+        return next;
+      });
+    } else {
+      setDocumentUpload((prev) => {
+        const next = [...prev];
+        const fileIndex = next.findIndex((i) => i?.uri === item?.uri);
+        if (fileIndex > -1) {
+          next[fileIndex] = { ...next[fileIndex], ...item };
+        }
+        return next;
+      });
+    }
+  }, []);
+
+  const handleRemoveUploadItem = useCallback((item: UploadItem) => {
+    if (item.uploadType === 'image') {
+      setImageUpload((prev) => prev.filter((i) => i?.path !== item?.path));
+    } else {
+      setDocumentUpload((prev) => prev.filter((i) => i?.uri !== item?.uri));
+    }
+  }, []);
+
+  const clearFileUpload = useCallback(() => {
+    setImageUpload([]);
+    setDocumentUpload([]);
+  }, []);
+
+  const fileUpload: UploadItem[] = useMemo(
+    () => [...imageUpload, ...documentUpload],
+    [documentUpload, imageUpload]
+  );
+
+  return {
+    fileUpload,
+    onPressImagePicker,
+    onPressCameraPicker,
+    handlePressDocumentPicker,
+    handleUploadSuccess,
+    handleRemoveUploadItem,
+    clearFileUpload,
+  };
+};

package/src/store/streamMessage.ts

@@ -1,6 +1,8 @@
 import { create } from 'zustand';
 import { StreamMessageStore } from '../types/chat';
 import { IMessageItem } from '../types';
+import UIUtils from '../utils/ui';
+import { trans } from '../translation';
 
 const useStreamMessageStore = create<StreamMessageStore>((set) => ({
   isStreaming: false,
@@ -27,6 +29,10 @@ const useStreamMessageStore = create<StreamMessageStore>((set) => ({
       if (state.eventSource) {
         console.log('🛑 Closing stream');
         state.eventSource.close();
+        UIUtils.toast.open({
+          theme: 'light',
+          title: trans('stop_stream_alert'),
+        });
         return { isStreaming: false, eventSource: undefined };
       }
       return {};

package/src/translation/resources/i18n.ts

@@ -40,6 +40,17 @@ const i18nKey: Record<string, string> = {
   delete_session_success: 'Đã xoá phiên chat thành công',
 
   recently_chat_history: 'Lịch sử gần đây',
+  stop_stream_alert: 'Đã dừng tạo câu trả lời',
+  images_too_large: `
+  Tổng dung lượng ảnh tải lên có kích thước quá lớn:
+  {{name}}
+  Vui lòng nén ảnh hoặc tải lên nhiều lần để tiếp tục.`,
+  file_too_large: `
+  Tổng dung lượng tệp tải lên có kích thước quá lớn:
+  {{name}}
+  Vui lòng nén tệp hoặc tải lên nhiều lần để tiếp tục.`,
+  max_image_reached: 'Chỉ được gửi tối đa {{number}} hình ảnh',
+  max_file_reached: 'Chỉ được gửi tối đa {{number}} tệp',
 };
 
 export default {