react-native-chatbot-ai 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-chatbot-ai",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "React Native library for Chatbot AI",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^19.8.1",
-    "@droppii/libs": "git+ssh://git@github.com:droppii/mobile-components.git#v1.0.80",
+    "@droppii/libs": "git+ssh://git@github.com:droppii/mobile-components.git#v1.0.81",
     "@eslint/compat": "^1.3.2",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.35.0",
@@ -69,6 +69,7 @@
     "@react-native/eslint-config": "^0.81.1",
     "@release-it/conventional-changelog": "^10.0.1",
     "@types/jest": "^29.5.14",
+    "@types/lodash": "^4.17.20",
     "@types/react": "^19.1.12",
     "axios": "^1.12.2",
     "commitlint": "^19.8.1",
@@ -81,6 +82,7 @@
     "lodash": "^4.17.21",
     "prettier": "^3.6.2",
     "react-native-builder-bob": "^0.40.13",
+    "react-native-image-crop-picker": "^0.51.1",
     "react-native-marked": "^7.0.2",
     "react-native-sse": "^1.2.1",
     "release-it": "^19.0.4",
@@ -91,7 +93,8 @@
     "@droppii/libs": "*",
     "@tanstack/react-query": "*",
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-blob-util": "*"
   },
   "workspaces": [
     "example"
@@ -160,6 +163,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
+    "@react-native-documents/picker": "^11.0.0",
+    "@react-native-documents/viewer": "^2.0.0",
     "axios": "^1.12.2",
     "dayjs": "^1.11.18",
     "lodash": "^4.17.21",

package/src/assets/svgIcon/IconChatArrow.tsx

@@ -10,13 +10,7 @@ interface Props {
 export const IconChatArrow = (props: Props) => {
   const { width = 6, height = 18, fill = '#07F', opacity = 0.1 } = props || {};
   return (
-    <Svg
-      width={width}
-      height={height}
-      viewBox="0 0 6 18"
-      fill="none"
-      {...props}
-    >
+    <Svg width={width} height={height} viewBox="0 0 6 18" fill="none">
       <Path
         d="M4.024 0H0v18c.545-4.5 2.546-9.873 4.956-12.5C6.332 4 6.65 0 4.024 0z"
         fill={fill}

package/src/assets/svgIcon/IconPdf.tsx

@@ -0,0 +1,26 @@
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  width?: number;
+  height?: number;
+}
+
+export const IconPdf = (props: Props) => {
+  const { width = 20, height = 20 } = props || {};
+  return (
+    <Svg width={width} height={height} viewBox="0 0 20 20" fill="none">
+      <Path
+        d="M2.5 0h10.62l5.63 5.608V18.75c0 .69-.56 1.25-1.25 1.25h-15c-.69 0-1.25-.56-1.25-1.25V1.25C1.25.56 1.81 0 2.5 0z"
+        fill="#E2574C"
+      />
+      <Path
+        d="M18.732 5.625h-4.357c-.69 0-1.25-.56-1.25-1.25V.013l5.607 5.612z"
+        fill="#B53629"
+      />
+      <Path
+        d="M12.314 9.642c.012-.19.09-.392.234-.607.147-.218.336-.386.566-.505.23-.12.45-.181.664-.185h1.513c.296-.004.476.123.542.38v.168c-.066.257-.246.384-.542.38h-1.267a.498.498 0 00-.32.15.448.448 0 00-.148.327v.618h1.625c.295-.004.475.123.541.381v.179c-.066.258-.246.385-.541.38h-1.624v1.548a.468.468 0 01-.148.334.512.512 0 01-.32.142h-.314a.506.506 0 01-.314-.143.468.468 0 01-.147-.333V9.642zM10.516 9.75a.448.448 0 00-.148-.328.499.499 0 00-.32-.149h-.344c-.143-.004-.221.048-.234.155v2.821c.013.107.09.159.234.155h.345a.512.512 0 00.32-.143.468.468 0 00.147-.333V9.75zM8.24 9.047c.004-.21.107-.38.308-.512.2-.134.447-.198.738-.19h.941c.258.004.502.065.732.184.23.12.416.288.56.506.147.215.227.417.24.607v2.393c-.013.19-.093.395-.24.613-.144.214-.33.38-.56.5-.23.119-.474.18-.732.184h-.941c-.291.008-.538-.053-.738-.184-.201-.135-.304-.308-.308-.518V9.047zM4.627 13.332a.506.506 0 01-.313-.143.468.468 0 01-.148-.333V9.63c.012-.19.09-.392.234-.607.147-.218.336-.386.566-.505.23-.12.45-.181.664-.185h.523c.258.004.502.065.732.184.23.12.416.288.56.506.148.215.228.417.24.607v.381c-.012.19-.092.395-.24.613-.144.215-.33.381-.56.5-.23.12-.47.18-.72.185h-.769v1.547a.468.468 0 01-.147.333.512.512 0 01-.32.143h-.302zm1.815-3.594a.448.448 0 00-.147-.328.499.499 0 00-.32-.149h-.111a.499.499 0 00-.32.15.448.448 0 00-.148.327v.63h.579a.51.51 0 00.32-.142.468.468 0 00.147-.334v-.154z"
+        fill="#fff"
+      />
+    </Svg>
+  );
+};

package/src/assets/svgIcon/IconThinkingStep.tsx

@@ -8,13 +8,7 @@ interface Props {
 export const IconThinkingStep = (props: Props) => {
   const { width = 24, height = 24 } = props || {};
   return (
-    <Svg
-      width={width}
-      height={height}
-      viewBox="0 0 24 24"
-      fill="none"
-      {...props}
-    >
+    <Svg width={width} height={height} viewBox="0 0 24 24" fill="none">
       <Mask
         id="a"
         maskUnits="userSpaceOnUse"

package/src/components/chat/ChatMessageList.tsx

@@ -14,12 +14,9 @@ const ChatMessageList = () => {
   const flatListRef = useRef<any>(null);
   const scrollOffsetRef = useRef(0);
 
-  const onScroll = useCallback(
-    (event: any) => {
-      scrollOffsetRef.current = event?.nativeEvent?.contentOffset?.y;
-    },
-    []
-  );
+  const onScroll = useCallback((event: any) => {
+    scrollOffsetRef.current = event?.nativeEvent?.contentOffset?.y;
+  }, []);
 
   useEffect(() => {
     const subExpandThinkingStep = DeviceEventEmitter.addListener(

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

@@ -0,0 +1,410 @@
+import {
+  KButton,
+  KColors,
+  KContainer,
+  KImage,
+  KInput,
+  KLabel,
+  KRadiusValue,
+  KSpacingValue,
+} from '@droppii/libs';
+import { useCallback, useState, useRef, useMemo } from 'react';
+import { FlatList, StyleSheet, TouchableWithoutFeedback } from 'react-native';
+import debounce from 'lodash/debounce';
+import { useSendMessage } from '../../../hooks/message/useSendMessage';
+import useStreamMessageStore from '../../../store/streamMessage';
+import {
+  Menu,
+  MenuTrigger,
+  MenuOption,
+  MenuOptions,
+  renderers,
+} from 'react-native-popup-menu';
+import {
+  openCameraPicker,
+  openDocumentPicker,
+  openImageMultiplePicker,
+} from '../../../utils/device';
+import type { Image } from 'react-native-image-crop-picker';
+import UploadImageItem from './item/UploadImageItem';
+import { isSameFile, shortenFileName } from '../../../utils/common';
+import { DocumentPickerResponse, types } from '@react-native-documents/picker';
+import UploadFileItem from './item/UploadFileItem';
+import { IAttachment } from '../../../types';
+import UIUtils from '../../../utils/ui';
+
+const { Popover } = renderers;
+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;
+
+const ChatFooter = () => {
+  const menuRef = useRef(null);
+  const { onSendMessage, stopStream } = useSendMessage();
+  const [message, setMessage] = useState('');
+  const isStreaming = useStreamMessageStore((state) => state.isStreaming);
+  const [fileUpload, setFileUpload] = useState<UploadItem[]>([]);
+
+  const debouncedMessage = debounce((message: string) => {
+    setMessage(message);
+  }, 200);
+
+  const isDisabledSend = useMemo(() => {
+    return (
+      isStreaming ||
+      message.trim() === '' ||
+      (fileUpload.length > 0 && fileUpload.some((i) => !i.remoteUrl))
+    );
+  }, [isStreaming, message, fileUpload]);
+
+  const onPressImagePicker = useCallback(async () => {
+    if (
+      fileUpload.filter((i) => i.uploadType === 'image').length >=
+      MAX_FILE_UPLOAD
+    ) {
+      UIUtils.toast.open({
+        title: `Chỉ được gửi tối đa ${MAX_FILE_UPLOAD} hình ảnh`,
+      });
+      return;
+    }
+    const newImages =
+      (await openImageMultiplePicker({
+        maxFiles:
+          MAX_FILE_UPLOAD - fileUpload.length > 0
+            ? MAX_FILE_UPLOAD - fileUpload.length
+            : 1,
+      })) || [];
+    const uniqueImages = newImages
+      .filter((img) => !fileUpload.some((sel) => isSameFile(sel, img)))
+      .map((i) => ({ ...i, uploadType: 'image' }))
+      .slice(0, MAX_FILE_UPLOAD - fileUpload.length) as ImageUpload[];
+
+    if (uniqueImages?.length > 0) {
+      setFileUpload((prev) => {
+        const totalImages = prev.filter((i) => i.uploadType === 'image');
+        const totalPrevSize = totalImages.reduce(
+          (acc, item) => acc + (item.size || 0),
+          0
+        );
+        const totalNewSize = uniqueImages.reduce(
+          (acc, item) => acc + (item.size || 0),
+          0
+        );
+        if (totalPrevSize + totalNewSize > MAX_IMAGE_SIZE) {
+          UIUtils.toast.open({
+            title: `Tổng dung lượng ảnh tải lên có kích thước quá lớn:\n ${uniqueImages.map((i) => shortenFileName(i.filename || '')).join(',\n')}, \nVui lòng nén ảnh hoặc tải lên nhiều lần để tiếp tục.`,
+            theme: 'danger',
+          });
+          return prev;
+        }
+        return [...prev, ...uniqueImages];
+      });
+    }
+  }, [fileUpload]);
+
+  const onPressCameraPicker = useCallback(async () => {
+    if (
+      fileUpload.filter((i) => i.uploadType === 'image').length >=
+      MAX_FILE_UPLOAD
+    ) {
+      UIUtils.toast.open({
+        title: `Chỉ được gửi tối đa ${MAX_FILE_UPLOAD} hình ảnh`,
+      });
+      return;
+    }
+    const newImage = await openCameraPicker();
+    if (newImage) {
+      setFileUpload((prev) => {
+        const totalImages = prev.filter((i) => i.uploadType === 'image');
+        const totalPrevSize = totalImages.reduce(
+          (acc, item) => acc + (item.size || 0),
+          0
+        );
+        const totalNewSize = newImage.size || 0;
+        if (totalPrevSize + totalNewSize > MAX_IMAGE_SIZE) {
+          UIUtils.toast.open({
+            title: `Tổng dung lượng ảnh tải lên có kích thước quá lớn:\n ${shortenFileName(newImage.filename || '')},\n Vui lòng nén ảnh hoặc tải lên nhiều lần để tiếp tục.`,
+            theme: 'danger',
+          });
+          return prev;
+        }
+        return [...prev, { ...newImage, uploadType: 'image' }];
+      });
+    }
+  }, [fileUpload]);
+
+  const menuItems = useMemo(() => {
+    return [
+      {
+        icon: 'image-o',
+        onPress: onPressImagePicker,
+        label: 'Thư viện ảnh',
+      },
+      {
+        icon: 'camera-o',
+        onPress: onPressCameraPicker,
+        label: 'Chụp ảnh',
+      },
+    ];
+  }, [onPressImagePicker, onPressCameraPicker]);
+
+  const onPressSend = useCallback(() => {
+    if (isStreaming) {
+      stopStream();
+      return;
+    }
+    const attachments: IAttachment[] = fileUpload.map((i) => ({
+      type: i.uploadType,
+      source_type: 'url',
+      data: i.remoteUrl || '',
+      name: (i.uploadType === 'image' ? i.filename : i.name) as string,
+      size: (i.size || null) as number,
+      mime_type: (i.uploadType === 'image'
+        ? i.mime
+        : i.type) as IAttachment['mime_type'],
+    }));
+
+    onSendMessage(message?.trim(), attachments);
+    setMessage('');
+    setFileUpload([]);
+  }, [message, isStreaming, onSendMessage, stopStream, fileUpload]);
+
+  const handleUploadSuccess = useCallback((item: UploadItem) => {
+    if (item.uploadType === 'image') {
+      setFileUpload((prev) => {
+        const next = [...prev];
+        const fileIndex = next.findIndex(
+          (i) => i.uploadType === 'image' && i?.path === item?.path
+        );
+        if (fileIndex > -1) {
+          next[fileIndex] = { ...next[fileIndex], ...item };
+        }
+        return next;
+      });
+    } else {
+      setFileUpload((prev) => {
+        const next = [...prev];
+        const fileIndex = next.findIndex(
+          (i) => i.uploadType === 'file' && i?.uri === item?.uri
+        );
+        if (fileIndex > -1) {
+          next[fileIndex] = { ...next[fileIndex], ...item };
+        }
+        return next;
+      });
+    }
+  }, []);
+
+  const handleRemoveUploadItem = useCallback((item: UploadItem) => {
+    if (item.uploadType === 'image') {
+      setFileUpload((prev) =>
+        prev.filter((i) => i.uploadType !== 'image' || i.path !== item.path)
+      );
+    } else {
+      setFileUpload((prev) =>
+        prev.filter((i) => i.uploadType !== 'file' || i.uri !== item.uri)
+      );
+    }
+  }, []);
+
+  const renderUploadItem = useCallback(
+    (item: UploadItem) => {
+      switch (item.uploadType) {
+        case 'image':
+          return (
+            <UploadImageItem
+              item={item}
+              onRemove={handleRemoveUploadItem}
+              onSuccess={handleUploadSuccess}
+            />
+          );
+        case 'file':
+          return (
+            <UploadFileItem
+              item={item}
+              onRemove={handleRemoveUploadItem}
+              onSuccess={handleUploadSuccess}
+            />
+          );
+        default:
+          return null;
+      }
+    },
+    [handleRemoveUploadItem, handleUploadSuccess]
+  );
+
+  const handlePressDocumentPicker = useCallback(async () => {
+    const listFiles = fileUpload.filter((i) => i.uploadType === 'file');
+    if (listFiles.length >= MAX_FILE_UPLOAD) {
+      UIUtils.toast.open({
+        title: `Chỉ được gửi tối đa ${MAX_FILE_UPLOAD} tệp`,
+      });
+      return;
+    }
+    const newDocument = await openDocumentPicker({
+      type: types.pdf,
+    });
+    const isUnique = listFiles.some(
+      (doc) => doc.uploadType === 'file' && doc.uri !== newDocument?.uri
+    );
+
+    if (!!newDocument && isUnique) {
+      setFileUpload((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: `Tổng dung lượng tệp tải lên có kích thước quá lớn:\n ${shortenFileName(
+              newDocument.name || ''
+            )},\n Vui lòng nén tệp hoặc tải lên nhiều lần để tiếp tục.`,
+            theme: 'danger',
+          });
+          return prev;
+        }
+        return [...prev, { ...newDocument, uploadType: 'file' }];
+      });
+    }
+  }, [fileUpload]);
+
+  return (
+    <KContainer.View style={styles.container}>
+      <KContainer.VisibleView visible={fileUpload.length > 0}>
+        <FlatList
+          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.25rem'}
+        paddingH={'0.25rem'}
+        placeholder="Bạn muốn hỏi gì hôm nay?"
+        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,
+            }}
+          >
+            <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="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.View>
+    </KContainer.View>
+  );
+};
+
+export default ChatFooter;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    paddingVertical: KSpacingValue['0.5rem'],
+    gap: KSpacingValue['0.5rem'],
+    borderWidth: 1,
+    borderColor: KColors.hexToRgba(KColors.black, 0.15),
+    borderBottomWidth: 0,
+    borderTopLeftRadius: KSpacingValue['1.25rem'],
+    borderTopRightRadius: KSpacingValue['1.25rem'],
+  },
+  actions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: KSpacingValue['1rem'],
+  },
+  sendButton: {
+    alignSelf: 'flex-end',
+  },
+  input: {
+    maxHeight: 100,
+  },
+  popover: {
+    borderRadius: KRadiusValue['4x'],
+    backgroundColor: KColors.white,
+    width: 200,
+  },
+  menuItem: {
+    paddingHorizontal: KSpacingValue['1rem'],
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: KSpacingValue['0.75rem'],
+    borderBottomWidth: 1,
+    borderBottomColor: KColors.border.normal,
+    gap: KSpacingValue['0.5rem'],
+    justifyContent: 'space-between',
+  },
+  listUploadItem: {
+    gap: KSpacingValue['0.75rem'],
+    paddingTop: 6,
+  },
+});