react-native-chatbot-ai 0.1.0 → 0.1.2

package/src/types/chat.ts

@@ -5,12 +5,14 @@ export interface ChatContextType {
   apiAddress: string;
   userId: string;
   cartButton?: JSX.Element;
+  openImageViewer?: (images: { url: string }[], index: number) => void;
 }
 
 export interface ChatProviderProps {
   apiAddress: string;
   userId: string;
   cartButton?: JSX.Element;
+  openImageViewer?: (images: { url: string }[], index: number) => void;
 }
 
 export interface SessionStore {

package/src/types/dto.ts

@@ -11,6 +11,21 @@ export interface SuggetionResponse {
   suggestions: ISuggestionItem[];
 }
 
+export interface IAttachment {
+  type: 'image' | 'file';
+  source_type: 'url';
+  data: string;
+  name?: string;
+  size?: number;
+  loading?: boolean;
+  mime_type:
+    | 'image/jpeg'
+    | 'image/png'
+    | 'image/webp'
+    | 'image/jpg'
+    | 'application/pdf';
+}
+
 export interface IMessageItem {
   id: string;
   content: string;
@@ -22,7 +37,7 @@ export interface IMessageItem {
   metadata: Record<string, any>;
   created_at: string;
   modified_at: string;
-  attachments: any[];
+  attachments: IAttachment[];
 }
 
 export interface SessionDetailResponse {

package/src/types/index.ts

@@ -1,3 +1,4 @@
 export * from './common';
 export * from './dto';
 export * from './chat';
+export * from './ui';

package/src/types/ui.ts

@@ -0,0 +1,12 @@
+// @ts-ignore
+import { KToastBarProps } from '@droppii/libs';
+// @ts-ignore
+import { StyleProp, ViewStyle } from 'react-native';
+
+export interface WithToastProps {
+  open: (
+    // @ts-ignore
+    payload: KToastBarProps & { contentContainerStyle?: StyleProp<ViewStyle> }
+  ) => void;
+  dismiss: () => void;
+}

package/src/utils/common.ts

@@ -0,0 +1,40 @@
+export const isSameFile = (a: any, b: any) =>
+  a.filename === b.filename && a.size === b.size && a.mime === b.mime;
+
+export const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 B';
+
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const size = parseFloat((bytes / Math.pow(k, i)).toFixed(2));
+
+  return `${size} ${sizes[i]}`;
+};
+
+interface ShortenOptions {
+  maxLength?: number;
+  keepStart?: number;
+  keepEnd?: number;
+}
+
+export const shortenFileName = (name: string, options: ShortenOptions = {}) => {
+  const { maxLength = 30, keepStart = 8, keepEnd = 2 } = options;
+
+  if (name.length <= maxLength) return name;
+
+  const dotIndex = name.lastIndexOf('.');
+  const ext = dotIndex !== -1 ? name.slice(dotIndex) : '';
+  const base = dotIndex !== -1 ? name.slice(0, dotIndex) : name;
+
+  // Tính toán độ dài phần đầu & cuối
+  const available = maxLength - ext.length - 3; // trừ "...”
+  const startLen = keepStart ?? Math.floor(available / 2);
+  const endLen = keepEnd ?? Math.floor(available / 2);
+
+  const start = base.slice(0, startLen);
+  const end = base.slice(-endLen);
+
+  return `${start}...${end}${ext}`;
+};

package/src/utils/device.ts

@@ -0,0 +1,170 @@
+import { DocumentPickerOptions, pick } from '@react-native-documents/picker';
+import UIUtils from '../utils/ui';
+import { PermissionsAndroid, Platform } from 'react-native';
+import {
+  Image,
+  openCamera,
+  openPicker,
+  Options,
+  PossibleArray,
+} from 'react-native-image-crop-picker';
+import { check, PERMISSIONS, request } from 'react-native-permissions';
+
+type MediaType<O> = O extends { mediaType: 'photo' } ? Image : never;
+
+const READ_MEDIA_IMAGES = 'android.permission.READ_MEDIA_IMAGES';
+
+const pickerOptions = {
+  writeTempFile: true,
+  mediaType: 'photo',
+  compressImageQuality: 0.8,
+  width: 1280,
+  height: 1280,
+  compressImageMaxHeight: 1280,
+  compressImageMaxWidth: 1280,
+  cropping: false,
+  cropperCircleOverlay: true,
+  waitAnimationEnd: true,
+  includeExif: false,
+  forceJpg: true,
+  cropperChooseText: 'Hoàn tất',
+  cropperCancelText: 'Hủy',
+} as Options;
+
+const requestPermission = async (
+  perm: any,
+  requestMessage?: string,
+  disableToast = false
+) => {
+  try {
+    //handle android function check can't return status code blocked
+    let granted =
+      Platform.OS === 'android' ? await request(perm) : await check(perm);
+    if (granted === 'unavailable') {
+      UIUtils.toast.open({
+        title: 'Tính năng hiện tại không khả dụng, vui lòng thử lại sau',
+      });
+      return false;
+    }
+    if (granted === 'granted' || granted === 'limited') {
+      return true;
+    }
+    if (granted === 'denied' && Platform.OS === 'ios') {
+      const result = await request(perm);
+      if (result === 'granted' || result === 'limited') {
+        return true;
+      }
+    }
+    if (requestMessage && granted === 'blocked') {
+      UIUtils.toast.open({
+        title: requestMessage,
+      });
+    }
+
+    return false;
+  } catch (err) {
+    if (!disableToast) {
+      UIUtils.toast.open({
+        title: 'Có lỗi xảy ra, vui lòng thử lại',
+      });
+    }
+    return false;
+  }
+};
+const requestReadPhotoPermission = async (disableToast = false) => {
+  const perm = Platform.select({
+    ios: PERMISSIONS.IOS.PHOTO_LIBRARY,
+    default:
+      (Platform.Version as number) >= 33
+        ? READ_MEDIA_IMAGES
+        : PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
+  });
+  return requestPermission(
+    perm as any,
+    'Vui lòng cấp quyền truy cập vào "Thư viện ảnh" của bạn trước khi sử dụng tính năng này',
+    disableToast
+  );
+};
+
+const requestCameraPermission = async () => {
+  const perm = Platform.select({
+    ios: PERMISSIONS.IOS.CAMERA,
+    default: PERMISSIONS.ANDROID.CAMERA,
+  });
+  return requestPermission(perm, 'Droppii cần truy cập vào "Máy ảnh" của bạn');
+};
+
+export const openImagePicker = (
+  options?: Options
+): Promise<PossibleArray<Options, MediaType<Options>> | undefined> => {
+  return new Promise(async (resolve) => {
+    try {
+      const isGranted = await requestReadPhotoPermission();
+      if (!isGranted) {
+        throw new Error('No permission');
+      }
+      const value = await openPicker({
+        ...pickerOptions,
+        ...options,
+      });
+      resolve(value);
+    } catch (error) {
+      resolve(undefined);
+    }
+  });
+};
+
+export const openImageMultiplePicker = (
+  options?: Options
+): Promise<PossibleArray<Options, MediaType<Options>[]> | undefined> => {
+  return new Promise(async (resolve) => {
+    try {
+      const isGranted = await requestReadPhotoPermission();
+      if (!isGranted) {
+        throw new Error('No permission');
+      }
+      const value = await openPicker({
+        ...pickerOptions,
+        ...options,
+        multiple: true,
+      });
+      resolve(value);
+    } catch (error) {
+      resolve([]);
+    }
+  });
+};
+
+export const openCameraPicker = (
+  options?: Options
+): Promise<PossibleArray<Options, MediaType<Options>> | undefined> => {
+  return new Promise(async (resolve) => {
+    try {
+      const isGranted = await requestCameraPermission();
+      if (!isGranted) {
+        throw new Error('No permission');
+      }
+
+      const value = await openCamera({
+        ...pickerOptions,
+        ...options,
+      });
+      resolve(value);
+    } catch (error) {
+      resolve(undefined);
+    }
+  });
+};
+
+export const openDocumentPicker = async (options?: DocumentPickerOptions) => {
+  try {
+    const [result] = await pick({
+      mode: 'open',
+      ...options,
+    });
+    console.log(result);
+    return result;
+  } catch (err) {
+    return undefined;
+  }
+};

package/src/utils/ui.tsx

@@ -0,0 +1,32 @@
+// @ts-ignore
+import { StyleProp, ViewStyle } from 'react-native';
+import { toastRef } from '../constants';
+// @ts-ignore
+import type { KToastBarProps } from '@droppii/libs';
+
+class UIUtils {
+  toast = {
+    open: (
+      // @ts-ignore
+      params: KToastBarProps & { contentContainerStyle?: StyleProp<ViewStyle> }
+    ) => {
+      toastRef.current?.open(params);
+    },
+    dismiss: () => {
+      toastRef.current?.dismiss();
+    },
+    showError: (error: any, withToast = true) => {
+      const msg =
+        error?.message ||
+        error?.response?.message ||
+        error?.data?.message ||
+        error?.response?.data?.message ||
+        'Có lỗi xảy ra, vui lòng thử lại';
+      withToast &&
+        toastRef.current?.open({ title: msg, theme: 'danger', stretch: true });
+      return msg;
+    },
+  };
+}
+
+export default new UIUtils();

package/lib/module/components/chat/ChatFooter.js

@@ -1,91 +0,0 @@
-"use strict";
-
-import { KButton, KColors, KContainer, KImage, KInput, KSpacingValue } from '@droppii/libs';
-import { useCallback, useState } from 'react';
-import { StyleSheet } from 'react-native';
-import debounce from 'lodash/debounce';
-import { useSendMessage } from "../../hooks/message/useSendMessage.js";
-import useStreamMessageStore from "../../store/streamMessage.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ChatFooter = () => {
-  const {
-    onSendMessage,
-    stopStream
-  } = useSendMessage();
-  const [message, setMessage] = useState('');
-  const isStreaming = useStreamMessageStore(state => state.isStreaming);
-  const debouncedMessage = debounce(message => {
-    setMessage(message);
-  }, 200);
-  const onPressSend = useCallback(() => {
-    if (isStreaming) {
-      stopStream();
-      return;
-    }
-    onSendMessage(message?.trim());
-    setMessage('');
-  }, [message, isStreaming, onSendMessage, stopStream]);
-  return /*#__PURE__*/_jsxs(KContainer.View, {
-    style: styles.container,
-    children: [/*#__PURE__*/_jsx(KInput.TextArea, {
-      paddingV: '0.25rem',
-      paddingH: '0.25rem',
-      placeholder: "B\u1EA1n mu\u1ED1n h\u1ECFi g\xEC h\xF4m nay?",
-      clearButtonMode: "hidden",
-      onChangeText: debouncedMessage,
-      value: message,
-      multiline: true,
-      style: styles.input,
-      blurOnSubmit: false,
-      textAlignVertical: "top"
-    }), /*#__PURE__*/_jsxs(KContainer.View, {
-      style: styles.actions,
-      children: [/*#__PURE__*/_jsx(KImage.VectorIcons, {
-        name: "image-o",
-        size: 24,
-        color: KColors.gray.dark
-      }), /*#__PURE__*/_jsx(KImage.VectorIcons, {
-        name: "paperclip-o",
-        size: 24,
-        color: KColors.gray.dark
-      }), /*#__PURE__*/_jsx(KContainer.View, {
-        flex: true
-      }), /*#__PURE__*/_jsx(KButton.Solid, {
-        kind: "primary",
-        icon: {
-          vectorName: isStreaming ? 'square-b' : 'send-b',
-          size: 20,
-          tintColor: KColors.white
-        },
-        onPress: onPressSend,
-        br: "round",
-        disabled: !isStreaming && message.trim() === ''
-      })]
-    })]
-  });
-};
-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
-  }
-});
-//# sourceMappingURL=ChatFooter.js.map

package/lib/module/components/chat/ChatFooter.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["KButton","KColors","KContainer","KImage","KInput","KSpacingValue","useCallback","useState","StyleSheet","debounce","useSendMessage","useStreamMessageStore","jsx","_jsx","jsxs","_jsxs","ChatFooter","onSendMessage","stopStream","message","setMessage","isStreaming","state","debouncedMessage","onPressSend","trim","View","style","styles","container","children","TextArea","paddingV","paddingH","placeholder","clearButtonMode","onChangeText","value","multiline","input","blurOnSubmit","textAlignVertical","actions","VectorIcons","name","size","color","gray","dark","flex","Solid","kind","icon","vectorName","tintColor","white","onPress","br","disabled","create","paddingHorizontal","paddingVertical","gap","borderWidth","borderColor","hexToRgba","black","borderBottomWidth","borderTopLeftRadius","borderTopRightRadius","flexDirection","alignItems","sendButton","alignSelf","maxHeight"],"sourceRoot":"../../../../src","sources":["components/chat/ChatFooter.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/components/chat/ChatFooter.d.ts

@@ -1,3 +0,0 @@
-declare const ChatFooter: () => import("react/jsx-runtime").JSX.Element;
-export default ChatFooter;
-//# sourceMappingURL=ChatFooter.d.ts.map

package/lib/typescript/src/components/chat/ChatFooter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChatFooter.d.ts","sourceRoot":"","sources":["../../../../../src/components/chat/ChatFooter.tsx"],"names":[],"mappings":"AAcA,QAAA,MAAM,UAAU,+CA0Df,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/src/components/chat/ChatFooter.tsx

@@ -1,99 +0,0 @@
-import {
-  KButton,
-  KColors,
-  KContainer,
-  KImage,
-  KInput,
-  KSpacingValue,
-} from '@droppii/libs';
-import { useCallback, useState } from 'react';
-import { StyleSheet } from 'react-native';
-import debounce from 'lodash/debounce';
-import { useSendMessage } from '../../hooks/message/useSendMessage';
-import useStreamMessageStore from '../../store/streamMessage';
-
-const ChatFooter = () => {
-  const { onSendMessage, stopStream } = useSendMessage();
-  const [message, setMessage] = useState('');
-  const isStreaming = useStreamMessageStore((state) => state.isStreaming);
-
-  const debouncedMessage = debounce((message: string) => {
-    setMessage(message);
-  }, 200);
-
-  const onPressSend = useCallback(() => {
-    if (isStreaming) {
-      stopStream();
-      return;
-    }
-    onSendMessage(message?.trim());
-    setMessage('');
-  }, [message, isStreaming, onSendMessage, stopStream]);
-
-  return (
-    <KContainer.View style={styles.container}>
-      <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}>
-        <KImage.VectorIcons
-          name="image-o"
-          size={24}
-          color={KColors.gray.dark}
-        />
-        <KImage.VectorIcons
-          name="paperclip-o"
-          size={24}
-          color={KColors.gray.dark}
-        />
-        <KContainer.View flex />
-        <KButton.Solid
-          kind="primary"
-          icon={{
-            vectorName: isStreaming ? 'square-b' : 'send-b',
-            size: 20,
-            tintColor: KColors.white,
-          }}
-          onPress={onPressSend}
-          br="round"
-          disabled={!isStreaming && message.trim() === ''}
-        />
-      </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,
-  },
-});