react-native-chatbot-ai 0.1.1 → 0.1.3

package/src/components/portal/Toast.tsx

@@ -0,0 +1,315 @@
+/* eslint-disable react-native/no-inline-styles */
+import {
+  ComponentType,
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+// @ts-ignore
+import { StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import Animated, {
+  FadeInDown,
+  FadeInUp,
+  FadeOutDown,
+  FadeOutUp,
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withSpring,
+} from 'react-native-reanimated';
+import get from 'lodash/get';
+import { WithToastProps } from '../../types/ui';
+import {
+  KButton,
+  KContainer,
+  KImage,
+  KLabel,
+  // @ts-ignore
+  KToastBarProps,
+  KSpacingValue,
+  KColors,
+  KDims,
+} from '@droppii/libs';
+import { Z_INDEX_PRIORITY } from '../../constants';
+
+const Toast = forwardRef<WithToastProps>((_, ref) => {
+  const [data, setData] = useState<
+    // @ts-ignore
+    | (KToastBarProps & { contentContainerStyle?: StyleProp<ViewStyle> })
+    | undefined
+  >(undefined);
+  const scale = useSharedValue(1);
+  const containerRef = useRef(null);
+
+  const timeout = useRef<number>(undefined);
+
+  const dismiss = useCallback(() => {
+    setData(undefined);
+  }, []);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: (payload) => {
+        if (data) {
+          scale.value = withSequence(
+            withSpring(1.1, { mass: 0.3 }),
+            withSpring(1, { mass: 0.3 })
+          );
+        }
+        setData(payload);
+      },
+      dismiss,
+    }),
+    [dismiss, scale, data]
+  );
+
+  const {
+    type = 'full-fill',
+    theme = 'light',
+    position = 'bottom',
+    contentAlignment = 'center',
+    textAlign = 'center',
+    stretch,
+    action,
+    description,
+    icon,
+    showCloseButton,
+    title,
+    content,
+    onPressContent,
+    visibleTimeout = 3000,
+    br = '2x',
+    withTabBar = true,
+    contentContainerStyle,
+  } = data || {};
+
+  const colors = useMemo(() => {
+    const themeColor =
+      theme === 'light'
+        ? 'rgba(61,63,64,0.96)'
+        : get(KColors, `${theme}.normal`, KColors.primary.normal);
+
+    return {
+      backgroundColor:
+        theme === 'light'
+          ? themeColor
+          : type === 'revert'
+            ? KColors.white
+            : type === 'full-fill'
+              ? themeColor
+              : get(
+                  KColors,
+                  `palette.${theme}.w25`,
+                  KColors.palette.primary.w50
+                ),
+      borderColor:
+        theme === 'light' || type !== 'revert' ? undefined : themeColor,
+      tintColor:
+        theme === 'light'
+          ? KColors.border.normal
+          : type === 'full-fill'
+            ? KColors.white
+            : themeColor,
+      textColor:
+        theme === 'light'
+          ? KColors.border.normal
+          : type === 'revert'
+            ? KColors.gray.dark
+            : type === 'full-fill'
+              ? KColors.white
+              : themeColor,
+      closeIconColor:
+        theme === 'light'
+          ? KColors.border.normal
+          : type === 'revert'
+            ? KColors.gray.light
+            : type === 'full-fill'
+              ? KColors.white
+              : themeColor,
+      actionRevert: type === 'full-fill',
+    };
+  }, [type, theme]);
+
+  // @ts-ignore
+  useEffect(() => {
+    if (data) {
+      // @ts-ignore
+      timeout.current = setTimeout(() => {
+        dismiss();
+      }, visibleTimeout);
+
+      return () => {
+        clearTimeout(timeout.current);
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  const onPressWrapper = useCallback(
+    (onPress?: any) => {
+      onPress?.();
+      dismiss?.();
+    },
+    [dismiss]
+  );
+
+  const rStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  const onPressContentWrapper = useCallback(() => {
+    onPressContent?.();
+    dismiss();
+  }, [onPressContent, dismiss]);
+
+  if (!data) {
+    return null;
+  }
+
+  const Wrapper = onPressContent ? KContainer.Touchable : KContainer.View;
+
+  return (
+    <Animated.View
+      style={[
+        styles.content,
+        rStyle,
+        position === 'top'
+          ? styles.top
+          : withTabBar
+            ? styles.bottom
+            : styles.bottomWithoutTabBar,
+      ]}
+      // @ts-ignore
+      ref={containerRef}
+    >
+      <Animated.View
+        entering={position === 'top' ? FadeInUp : FadeInDown}
+        exiting={position === 'top' ? FadeOutUp : FadeOutDown}
+      >
+        <Wrapper
+          onPress={onPressContentWrapper}
+          activeOpacity={0.9}
+          style={[
+            styles.innerContent,
+            {
+              backgroundColor: colors.backgroundColor,
+              borderWidth: colors.borderColor ? 1 : 0,
+              borderColor: colors.borderColor,
+            },
+          ]}
+          padding="1rem"
+          paddingH={stretch ? '1rem' : '2rem'}
+          br={br}
+          alignSelf={stretch ? 'stretch' : 'center'}
+        >
+          {icon && (
+            <KContainer.View>
+              <KImage.CommonIcon
+                {...icon}
+                size={
+                  !icon.size || icon.size > 32
+                    ? 32
+                    : icon.size < 16
+                      ? 16
+                      : icon.size
+                }
+                style={styles.leftIcon}
+                tintColor={colors.tintColor}
+              />
+            </KContainer.View>
+          )}
+          <KContainer.View
+            justifyContent
+            alignItems={contentAlignment === 'center' ? 'center' : 'flex-start'}
+            flex={stretch ? 1 : 0}
+            style={contentContainerStyle}
+          >
+            {!!title && (
+              <KLabel.Text
+                color={colors.textColor}
+                typo="TextNmMedium"
+                textAlign={textAlign || 'center'}
+              >
+                {title}
+              </KLabel.Text>
+            )}
+            {!!description && (
+              <KLabel.Text
+                color={colors.textColor}
+                typo="TextSmNormal"
+                textAlign={textAlign || 'center'}
+                marginT="0.25rem"
+              >
+                {description}
+              </KLabel.Text>
+            )}
+            {content}
+          </KContainer.View>
+          {action && (
+            <KContainer.View style={styles.rightIcon}>
+              <KButton.Solid
+                kind={theme}
+                // revert={colors.actionRevert}
+                label={action.label}
+                onPress={onPressWrapper.bind(null, action.onPress)}
+              />
+            </KContainer.View>
+          )}
+          {showCloseButton && (
+            <KContainer.View style={styles.rightIcon}>
+              <KButton.Close
+                size={28}
+                color={colors.closeIconColor}
+                onPress={dismiss}
+              />
+            </KContainer.View>
+          )}
+        </Wrapper>
+      </Animated.View>
+    </Animated.View>
+  );
+});
+
+(Toast as ComponentType<any>).displayName = 'Portal.Toast';
+
+export default memo(Toast);
+
+const styles = StyleSheet.create({
+  content: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: Z_INDEX_PRIORITY.toast,
+    marginHorizontal: KSpacingValue['1rem'],
+    backgroundColor: KColors.transparent,
+  },
+  innerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'center',
+  },
+  leftIcon: {
+    marginRight: KSpacingValue['0.5rem'],
+  },
+  rightIcon: {
+    marginLeft: KSpacingValue['0.5rem'],
+  },
+  bottom: {
+    bottom: KSpacingValue['1.5rem'] + KDims.bottomTabHeightStatic,
+  },
+  bottomWithoutTabBar: {
+    bottom: KSpacingValue['1.5rem'],
+  },
+  top: {
+    top:
+      KDims.topBarSafeHeight > 0
+        ? KDims.topBarSafeHeight + 25
+        : KSpacingValue['2rem'],
+  },
+});

package/src/components/portal/index.tsx

@@ -0,0 +1,13 @@
+import { memo } from 'react';
+import ToastBar from './Toast';
+import { toastRef } from '../../constants';
+
+const Portal = memo(() => {
+  return (
+    <>
+      <ToastBar ref={toastRef} />
+    </>
+  );
+});
+
+export default Portal;

package/src/constants/index.ts

@@ -0,0 +1,9 @@
+import { createRef } from 'react';
+import { WithToastProps } from '../types';
+
+const MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER + 100;
+
+export const toastRef = createRef<WithToastProps>();
+export const Z_INDEX_PRIORITY = {
+  toast: MAX_SAFE_INTEGER - 1,
+};

package/src/context/ChatContext.tsx

@@ -1,6 +1,7 @@
 import { createContext, useContext } from 'react';
 import type { ChatContextType, ChatProviderProps } from '../types/chat';
 import ChatBotAI from '../components/chat';
+import Portal from '../components/portal';
 
 export const ChatContext = createContext<ChatContextType>({
   apiAddress: '',
@@ -11,10 +12,13 @@ export const ChatContext = createContext<ChatContextType>({
 export const useChatContext = () => useContext(ChatContext);
 
 export const ChatProvider = (props: ChatProviderProps) => {
-  const { apiAddress, userId, cartButton } = props;
+  const { apiAddress, userId, cartButton, openImageViewer } = props;
   return (
-    <ChatContext.Provider value={{ apiAddress, userId, cartButton }}>
+    <ChatContext.Provider
+      value={{ apiAddress, userId, cartButton, openImageViewer }}
+    >
       <ChatBotAI />
+      <Portal />
     </ChatContext.Provider>
   );
 };

package/src/hooks/message/useMessage.ts

@@ -59,7 +59,6 @@ export const useMessage = () => {
           const filtered = messageItems
             .filter((m) => !existingIds.has(m?.id))
             .reverse();
-          console.log('🚀 ~ useEffect ~ filtered:', prev.messages);
           return {
             ...prev,
             messages: [...filtered, ...prev.messages],

package/src/hooks/message/useSendMessage.ts

@@ -3,7 +3,7 @@ import useSessionStore from '../../store/session';
 import { useStreamMessage } from './useStreamMessage';
 import { events } from '../../constants/events';
 import { DeviceEventEmitter } from 'react-native';
-import { IMessageItem, MessageType, RoleType } from '../../types';
+import { IAttachment, IMessageItem, MessageType, RoleType } from '../../types';
 import dayjs from 'dayjs';
 import { useCreateSession } from '../session/useCreateSession';
 
@@ -12,10 +12,10 @@ export const useSendMessage = () => {
   const { mutateAsync: createSession } = useCreateSession();
 
   const onSendMessage = useCallback(
-    async (message: string) => {
+    async (message: string, attachments?: IAttachment[]) => {
       const messageItem: IMessageItem = {
         id: dayjs().valueOf().toString(),
-        attachments: [],
+        attachments: attachments || [],
         type: MessageType.user_message,
         created_at: dayjs().toISOString(),
         modified_at: dayjs().toISOString(),
@@ -39,7 +39,7 @@ export const useSendMessage = () => {
         {
           content: message,
           stream: true,
-          attachments: [],
+          attachments: attachments || [],
           metadata: {
             source: 'user',
           },

package/src/hooks/upload/useFileUpload.ts

@@ -0,0 +1,122 @@
+import { useEffect, useRef, useState } from 'react';
+import ReactNativeBlobUtil from 'react-native-blob-util';
+import { FileUpload } from '../../components/chat/footer';
+import { useChatContext } from '../../context/ChatContext';
+import { ENDPOINTS } from '../../services/endpoints';
+
+type RNBlobTask = {
+  cancel?: () => void;
+  uploadProgress?: (
+    config: { interval?: number },
+    callback: (written: number, total: number) => void
+  ) => RNBlobTask;
+  then: Promise<any>['then'];
+  catch: Promise<any>['catch'];
+};
+
+interface UseFileUploadProps {
+  file: FileUpload;
+  onSuccess?: (data: any) => void;
+  onError?: (err: any) => void;
+}
+
+export const useFileUpload = ({
+  file,
+  onSuccess,
+  onError,
+}: UseFileUploadProps) => {
+  const { apiAddress } = useChatContext();
+  const [progress, setProgress] = useState(0);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const cancelRef = useRef<RNBlobTask | null>(null);
+
+  useEffect(() => {
+    let isMounted = false;
+    if (file && !file.remoteUrl) {
+      isMounted = true;
+      const doUpload = async () => {
+        try {
+          setIsUploading(true);
+          setIsError(false);
+          setIsSuccess(false);
+          setProgress(0);
+
+          const formData = [
+            {
+              name: 'files',
+              filename: file.name ?? `ai_file_${Date.now()}.pdf`,
+              type: file.type ?? 'application/pdf',
+              data: ReactNativeBlobUtil.wrap(
+                decodeURI(file.uri.replace('file://', ''))
+              ),
+            },
+          ];
+
+          const uploadUrl = `${apiAddress}${ENDPOINTS.uploaderService.upload}?path=chatbot-ai&isPublic=true`;
+
+          const token = (global as any)?.accessToken;
+          const task = ReactNativeBlobUtil.fetch(
+            'POST',
+            uploadUrl,
+            {
+              'Content-Type': 'multipart/form-data',
+              'Authorization': `Bearer ${token}`,
+            },
+            formData
+          ) as unknown as RNBlobTask;
+
+          cancelRef.current = task;
+
+          task
+            .uploadProgress?.({ interval: 300 }, (written, total) => {
+              if (isMounted && total > 0) {
+                setProgress(Math.floor((written / total) * 100));
+              }
+            })
+            .then((res: any) => {
+              let response;
+              try {
+                response = JSON.parse(res.data);
+              } catch {
+                response = res.data;
+              }
+              if (!isMounted) return;
+              setIsUploading(false);
+              setProgress(100);
+              setIsSuccess(true);
+              onSuccess?.(response?.data);
+            })
+            .catch((err: any) => {
+              if (!isMounted) return;
+              setIsUploading(false);
+              setIsError(true);
+              onError?.(err);
+            });
+        } catch (err) {
+          if (!isMounted) return;
+          setIsUploading(false);
+          setIsError(true);
+          onError?.(err);
+        }
+      };
+
+      doUpload();
+    }
+
+    return () => {
+      isMounted = false;
+      cancelRef.current?.cancel?.();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [file.uri, apiAddress]);
+
+  return {
+    progress,
+    isUploading,
+    isSuccess,
+    isError,
+    cancel: () => cancelRef.current?.cancel?.(),
+  };
+};

package/src/hooks/upload/useImageUpload.ts

@@ -0,0 +1,123 @@
+import { useEffect, useRef, useState } from 'react';
+import ReactNativeBlobUtil from 'react-native-blob-util';
+import { ImageUpload } from '../../components/chat/footer';
+import { useChatContext } from '../../context/ChatContext';
+import { ENDPOINTS } from '../../services/endpoints';
+
+type RNBlobTask = {
+  cancel?: () => void;
+  uploadProgress?: (
+    config: { interval?: number },
+    callback: (written: number, total: number) => void
+  ) => RNBlobTask;
+  then: Promise<any>['then'];
+  catch: Promise<any>['catch'];
+};
+
+interface UseImageUploadProps {
+  file: ImageUpload;
+  onSuccess?: (data: any) => void;
+  onError?: (err: any) => void;
+}
+
+export const useImageUpload = ({
+  file,
+  onSuccess,
+  onError,
+}: UseImageUploadProps) => {
+  const { apiAddress } = useChatContext();
+  const [progress, setProgress] = useState(0);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const cancelRef = useRef<RNBlobTask | null>(null);
+
+  useEffect(() => {
+    let isMounted = false;
+    if (file && !file.remoteUrl) {
+      isMounted = true;
+      const doUpload = async () => {
+        try {
+          setIsUploading(true);
+          setIsError(false);
+          setIsSuccess(false);
+          setProgress(0);
+
+          const filePath = file.path?.replace('file://', '');
+          if (!filePath) throw new Error('File path not found');
+
+          const formData = [
+            {
+              name: 'files',
+              filename: file.filename ?? `ai_image_${Date.now()}.jpg`,
+              type: file.mime ?? 'image/jpeg',
+              data: ReactNativeBlobUtil.wrap(filePath),
+            },
+          ];
+
+          const uploadUrl = `${apiAddress}${ENDPOINTS.uploaderService.upload}?path=chatbot-ai&isPublic=true`;
+
+          const token = (global as any)?.accessToken;
+          const task = ReactNativeBlobUtil.fetch(
+            'POST',
+            uploadUrl,
+            {
+              'Content-Type': 'multipart/form-data',
+              'Authorization': `Bearer ${token}`,
+            },
+            formData
+          ) as unknown as RNBlobTask;
+
+          cancelRef.current = task;
+
+          task
+            .uploadProgress?.({ interval: 300 }, (written, total) => {
+              if (isMounted && total > 0) {
+                setProgress(Math.floor((written / total) * 100));
+              }
+            })
+            .then((res: any) => {
+              let response;
+              try {
+                response = JSON.parse(res.data);
+              } catch {
+                response = res.data;
+              }
+              if (!isMounted) return;
+              setIsUploading(false);
+              setProgress(100);
+              setIsSuccess(true);
+              onSuccess?.(response?.data);
+            })
+            .catch((err: any) => {
+              if (!isMounted) return;
+              setIsUploading(false);
+              setIsError(true);
+              onError?.(err);
+            });
+        } catch (err) {
+          if (!isMounted) return;
+          setIsUploading(false);
+          setIsError(true);
+          onError?.(err);
+        }
+      };
+
+      doUpload();
+    }
+
+    return () => {
+      isMounted = false;
+      cancelRef.current?.cancel?.();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [file.path, apiAddress]);
+
+  return {
+    progress,
+    isUploading,
+    isSuccess,
+    isError,
+    cancel: () => cancelRef.current?.cancel?.(),
+  };
+};

package/src/hooks/useAndroidBackHandler.ts

@@ -0,0 +1,29 @@
+import { useFocusEffect } from '@react-navigation/native';
+import { DependencyList, useCallback } from 'react';
+import { BackHandler } from 'react-native';
+
+const useAndroidBackHandler = (
+  callback?: () => any,
+  deps: DependencyList = []
+) => {
+  const callbackWrapper = useCallback(() => {
+    callback?.();
+    return true;
+  }, [callback]);
+
+  useFocusEffect(
+    useCallback(() => {
+      const sub = BackHandler.addEventListener(
+        'hardwareBackPress',
+        callbackWrapper
+      );
+
+      return () => {
+        sub.remove();
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [...deps, callbackWrapper])
+  );
+};
+
+export default useAndroidBackHandler;

package/src/services/endpoints.ts

@@ -7,4 +7,7 @@ export const ENDPOINTS = {
       `/assistant-service/v1/app/chat/sessions/${sessionId}/stream`,
     createSession: '/assistant-service/v1/app/chat/sessions',
   },
+  uploaderService: {
+    upload: '/uploader-service/v1/uploader/permanently',
+  },
 };

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 {