react-native-chatbot-ai 0.1.19 → 0.1.22

package/src/hooks/messageActions/useCopyToClipboard.ts

@@ -0,0 +1,38 @@
+/**
+ * useCopyToClipboard Hook
+ * Custom hook for copying text to clipboard with markdown cleanup
+ */
+
+import { useCallback, useState } from 'react';
+import Clipboard from '@react-native-clipboard/clipboard';
+import UIUtils from '../../utils/ui';
+import { cleanMarkdown } from '../../utils/textCleaner';
+
+export const useCopyToClipboard = () => {
+  const [isCopying, setIsCopying] = useState(false);
+
+  const copyToClipboard = useCallback(async (text: string) => {
+    if (!text || text.trim().length === 0) {
+      UIUtils.toast.showError('Không có nội dung để sao chép');
+      return;
+    }
+
+    try {
+      setIsCopying(true);
+
+      // Remove markdown formatting for cleaner copy
+      const cleanText = cleanMarkdown(text);
+
+      Clipboard.setString(cleanText);
+
+      UIUtils.toast.showSuccess('Đã sao chép vào clipboard');
+    } catch (error) {
+      console.error('Copy to clipboard error:', error);
+      UIUtils.toast.showError(error);
+    } finally {
+      setIsCopying(false);
+    }
+  }, []);
+
+  return { copyToClipboard, isCopying };
+};

package/src/hooks/messageActions/useFeedback.ts

@@ -0,0 +1,114 @@
+/**
+ * useFeedback Hook
+ * Custom hook for handling Like/Dislike feedback logic
+ */
+
+import { useCallback } from 'react';
+import useMessageActionsStore from '../../store/messageActions';
+import { FeedbackType } from '../../types/messageActions';
+import { useSendFeedback } from './useSendFeedback';
+import UIUtils from '../../utils/ui';
+import type { IMessageItem } from '../../types/dto';
+import useSessionStore from '../../store/session';
+import { useChatContext } from '../../context/ChatContext';
+import { GAEvents } from 'src/constants/events';
+
+export const useFeedback = (messageId: string, message?: IMessageItem) => {
+  const logGA = useChatContext().logGA;
+  const sessionId = useSessionStore((state) => state.sessionId);
+
+  const feedback = useMessageActionsStore((state) =>
+    state.getFeedback(messageId)
+  );
+  const setFeedback = useMessageActionsStore((state) => state.setFeedback);
+  const activeFeedbackList = useMessageActionsStore(
+    (state) => state.activeFeedbackList
+  );
+  const setActiveFeedbackList = useMessageActionsStore(
+    (state) => state.setActiveFeedbackList
+  );
+
+  const { mutateAsync: sendFeedback, isLoading } = useSendFeedback();
+
+  // Check feedback from server (message) or local store
+  const serverFeedbackType = message?.feedback_type;
+  const serverFeedbackContent = message?.feedback_content;
+
+  const effectiveFeedback =
+    feedback ||
+    (serverFeedbackType && serverFeedbackContent
+      ? {
+          messageId,
+          feedbackType: serverFeedbackType as FeedbackType,
+          reason: serverFeedbackContent,
+          timestamp: message.modified_at,
+        }
+      : null);
+
+  const isLikeActive = effectiveFeedback?.feedbackType === FeedbackType.like;
+  const isDislikeActive =
+    effectiveFeedback?.feedbackType === FeedbackType.dislike;
+  const isLikeListOpen = activeFeedbackList === `${messageId}-like`;
+  const isDislikeListOpen = activeFeedbackList === `${messageId}-dislike`;
+
+  const toggleLikeList = useCallback(() => {
+    if (isLikeActive) return; // Already selected, cannot change
+    setActiveFeedbackList(isLikeListOpen ? null : `${messageId}-like`);
+  }, [messageId, isLikeActive, isLikeListOpen, setActiveFeedbackList]);
+
+  const toggleDislikeList = useCallback(() => {
+    if (isDislikeActive) return; // Already selected, cannot change
+    setActiveFeedbackList(isDislikeListOpen ? null : `${messageId}-dislike`);
+  }, [messageId, isDislikeActive, isDislikeListOpen, setActiveFeedbackList]);
+
+  const selectReason = useCallback(
+    async (type: FeedbackType, reason: string) => {
+      console.log('selectReason', sessionId);
+      if (!sessionId) {
+        console.error('Session ID is required to send feedback');
+        UIUtils.toast.open({
+          title: 'Không thể gửi phản hồi. Vui lòng thử lại.',
+        });
+        return;
+      }
+
+      try {
+        // Send to backend FIRST (no optimistic update)
+        await sendFeedback({
+          sessionId,
+          payload: {
+            message_id: messageId,
+            feedback_type: type,
+            feedback_content: reason,
+          },
+        });
+
+        logGA(GAEvents.chatDetailLikeDislikeBtnTap, {
+          fb_type: type,
+          message_id: messageId,
+        });
+
+        // Update local state AFTER successful API call
+        setFeedback(messageId, type, reason);
+
+        UIUtils.toast.showSuccess('Cảm ơn phản hồi của bạn!');
+      } catch (error) {
+        console.error('Failed to send feedback:', error);
+        UIUtils.toast.showError(error);
+      }
+    },
+    [messageId, setFeedback, sendFeedback, sessionId, logGA]
+  );
+
+  return {
+    feedback: effectiveFeedback,
+    isLikeActive,
+    isDislikeActive,
+    isLikeListOpen,
+    isDislikeListOpen,
+    isLoading,
+    toggleLikeList,
+    toggleDislikeList,
+    selectReason,
+  };
+};

package/src/hooks/messageActions/useSendFeedback.ts

@@ -0,0 +1,31 @@
+/**
+ * useSendFeedback Hook
+ * React Query mutation hook for sending feedback to backend
+ */
+
+import { useMutation } from '@tanstack/react-query';
+import { apiInstance } from '../../services/apis';
+import { ENDPOINTS } from '../../services/endpoints';
+import { SendFeedbackRequest, SendFeedbackResponse } from '../../types/dto';
+import { QUERY_KEYS } from '../../constants/query';
+import { BaseResponse } from 'src/types';
+
+interface SendFeedbackParams {
+  sessionId: string;
+  payload: SendFeedbackRequest;
+}
+
+export const useSendFeedback = () =>
+  useMutation({
+    mutationKey: [QUERY_KEYS.SEND_FEEDBACK],
+    mutationFn: async ({ sessionId, payload }: SendFeedbackParams) => {
+      const res = await apiInstance?.put<BaseResponse<SendFeedbackResponse>>(
+        ENDPOINTS.assistantService.sendFeedback(sessionId),
+        payload
+      );
+      return res?.data?.data;
+    },
+    retry: 2,
+    retryDelay: (attemptIndex: number) =>
+      Math.min(1000 * 2 ** attemptIndex, 30000),
+  });

package/src/hooks/messageActions/useShareMessage.ts

@@ -0,0 +1,146 @@
+/**
+ * useShareMessage Hook
+ * Custom hook for sharing message content via native share sheet
+ * Supports platform-specific sharing (Zalo, Facebook, Messenger)
+ */
+
+import { useCallback } from 'react';
+import Share from 'react-native-share';
+import RNFetchBlob from 'react-native-blob-util';
+import useMessageActionsStore from '../../store/messageActions';
+import { ShareState } from '../../types/messageActions';
+import UIUtils from '../../utils/ui';
+import { cleanMarkdown, truncateText } from '../../utils/textCleaner';
+import { useChatContext } from '../../context/ChatContext';
+import { GAEvents } from '../../constants/events';
+import useSessionStore from '../../store/session';
+
+const MAX_SHARE_TEXT_LENGTH = 3000;
+
+export const useShareMessage = (
+  messageId: string,
+  messageContent: string,
+  productImages?: string[]
+) => {
+  const logGA = useChatContext().logGA;
+  const shareState = useMessageActionsStore((state) =>
+    state.getShareState(messageId)
+  );
+  const setShareState = useMessageActionsStore((state) => state.setShareState);
+
+  const currentState = shareState?.state || ShareState.idle;
+
+  const shareMessage = useCallback(async () => {
+    if (!messageContent || messageContent.trim().length === 0) {
+      UIUtils.toast.showError('Không có nội dung để chia sẻ');
+      return;
+    }
+
+    try {
+      setShareState(messageId, ShareState.loading);
+
+      // Clean and truncate text
+      const cleanText = cleanMarkdown(messageContent);
+      const truncatedText = truncateText(cleanText, MAX_SHARE_TEXT_LENGTH);
+
+      const localImagePaths: string[] = [];
+
+      // Download all images to local cache if available
+      if (productImages && productImages.length > 0) {
+        for (let i = 0; i < productImages.length; i++) {
+          const imageUrl = productImages[i];
+          if (!imageUrl || imageUrl.trim() === '') {
+            console.warn(`[Share] Skipping empty image URL at index ${i}`);
+            continue;
+          }
+
+          try {
+            // Use unique timestamp for each image to avoid conflicts
+            const timestamp = Date.now() + i;
+            const imagePath = `${RNFetchBlob.fs.dirs.CacheDir}/share_image_${timestamp}.jpg`;
+
+            await RNFetchBlob.config({
+              path: imagePath,
+            }).fetch('GET', imageUrl);
+
+            // Verify file exists and has content
+            const fileExists = await RNFetchBlob.fs.exists(imagePath);
+            if (!fileExists) {
+              continue;
+            }
+
+            const fileInfo = await RNFetchBlob.fs.stat(imagePath);
+            if (fileInfo.size === 0) {
+              await RNFetchBlob.fs.unlink(imagePath);
+              continue;
+            }
+
+            localImagePaths.push(`file://${imagePath}`);
+          } catch (imageError) {
+            console.error(
+              `[Share] Failed to download image ${i} (${imageUrl}):`,
+              imageError
+            );
+            // Continue with other images
+          }
+        }
+      }
+
+      // Prepare share options
+      const shareOptions: any = {
+        title: 'Chia sẻ từ Chatbot AI',
+        message: truncatedText,
+        failOnCancel: false,
+      };
+
+      // Add image URLs if available
+      if (localImagePaths.length === 1) {
+        shareOptions.url = localImagePaths[0];
+      } else if (localImagePaths.length > 1) {
+        shareOptions.urls = localImagePaths;
+      }
+
+      // Open share dialog
+      // Platform-specific sharing:
+      const result = await Share.open(shareOptions);
+
+      // Handle success
+      if (result) {
+        setShareState(messageId, ShareState.success);
+
+        // Clean up temporary image files
+        for (const localImagePath of localImagePaths) {
+          try {
+            const cleanPath = localImagePath.replace('file://', '');
+            await RNFetchBlob.fs.unlink(cleanPath);
+          } catch (cleanupError) {
+            console.warn('[Share] Failed to cleanup temp image:', cleanupError);
+          }
+        }
+        logGA(GAEvents.chatDetailShareMessBtnTap, {
+          conversation_id: useSessionStore.getState().sessionId,
+          message_id: messageId,
+        });
+      } else {
+        setShareState(messageId, ShareState.idle);
+      }
+    } catch (error: any) {
+      console.error('Share error:', error);
+
+      // User cancelled share dialog
+      if (error?.message?.includes('User did not share')) {
+        setShareState(messageId, ShareState.idle);
+        return;
+      }
+
+      setShareState(messageId, ShareState.error);
+      UIUtils.toast.showError('Không thể chia sẻ. Vui lòng thử lại.');
+    }
+  }, [messageId, messageContent, productImages, setShareState, logGA]);
+
+  return {
+    shareState: currentState,
+    isLoading: currentState === ShareState.loading,
+    shareMessage,
+  };
+};

package/src/hooks/session/useDeleteSession.ts

@@ -0,0 +1,25 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { QUERY_KEYS } from '../../constants/query';
+import { apiInstance } from '../../services/apis';
+import { ENDPOINTS } from '../../services/endpoints';
+import { BaseResponse } from '../../types/common';
+
+export const useDeleteSession = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: [QUERY_KEYS.DELETE_SESSION],
+    mutationFn: async (sessionId: string) => {
+      const res = await apiInstance?.delete<BaseResponse<any>>(
+        ENDPOINTS.assistantService.deleteSession(sessionId)
+      );
+      return res?.data;
+    },
+    onSuccess: () => {
+      // Refetch sessions list after successful delete
+      queryClient.refetchQueries({
+        queryKey: [QUERY_KEYS.SEARCH_SESSIONS],
+      });
+    },
+  });
+};

package/src/hooks/session/useRenameSession.ts

@@ -0,0 +1,37 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { QUERY_KEYS } from '../../constants/query';
+import { apiInstance } from '../../services/apis';
+import { ENDPOINTS } from '../../services/endpoints';
+import { BaseResponse } from '../../types/common';
+import { SessionSearchItem } from '../../types/dto';
+
+interface RenameSessionRequest {
+  title: string;
+}
+
+export const useRenameSession = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: [QUERY_KEYS.UPDATE_SESSION],
+    mutationFn: async ({
+      sessionId,
+      title,
+    }: {
+      sessionId: string;
+      title: string;
+    }) => {
+      const res = await apiInstance?.put<BaseResponse<SessionSearchItem>>(
+        ENDPOINTS.assistantService.updateSession(sessionId),
+        { title } as RenameSessionRequest
+      );
+      return res?.data?.data;
+    },
+    onSuccess: () => {
+      // Refetch sessions list after successful rename
+      queryClient.refetchQueries({
+        queryKey: [QUERY_KEYS.SEARCH_SESSIONS],
+      });
+    },
+  });
+};

package/src/hooks/session/useSearchSessions.ts

@@ -10,7 +10,8 @@ const LIMIT = 20;
 
 export const useSearchSessions = (
   enabled: boolean = true,
-  searchTerm?: string
+  searchTerm?: string,
+  cb?: (isSuccess?: boolean) => void
 ) => {
   const queryKey = [QUERY_KEYS.SEARCH_SESSIONS, searchTerm];
 
@@ -30,11 +31,13 @@ export const useSearchSessions = (
 
       // Validate response structure
       if (!response) {
+        cb?.(false);
         throw new Error('No response received from API');
       }
 
       // Check for successful response: HTTP status 200 and API statusCode 0
       if (res?.status !== 200 || response?.statusCode !== 0) {
+        cb?.(false);
         return {
           ...response,
           data: [],
@@ -44,12 +47,14 @@ export const useSearchSessions = (
       // Ensure data is an array
       if (!Array.isArray(response?.data)) {
         // If data is not an array, return empty array to prevent crashes
+        cb?.(false);
         return {
           ...response,
           data: [],
         } as BaseResponse<SearchSessionsResponse>;
       }
 
+      cb?.(true);
       return response as BaseResponse<SearchSessionsResponse>;
     },
     getNextPageParam: (

package/src/hooks/session/useShareSession.ts

@@ -0,0 +1,22 @@
+import { useMutation } from '@tanstack/react-query';
+import { QUERY_KEYS } from '../../constants/query';
+import { apiInstance } from '../../services/apis';
+import { ENDPOINTS } from '../../services/endpoints';
+import { BaseResponse } from '../../types/common';
+
+interface ShareSessionResponse {
+  share_url: string;
+}
+
+export const useShareSession = () => {
+  return useMutation({
+    mutationKey: [QUERY_KEYS.SHARE_SESSION],
+    mutationFn: async (sessionId: string) => {
+      const res = await apiInstance?.put<BaseResponse<ShareSessionResponse>>(
+        ENDPOINTS.assistantService.shareSession(sessionId),
+        {}
+      );
+      return res?.data?.data;
+    },
+  });
+};

package/src/hooks/upload/useImageUpload.ts

@@ -16,7 +16,7 @@ type RNBlobTask = {
 
 interface UseImageUploadProps {
   file: ImageUpload;
-  onSuccess?: (data: any) => void;
+  onSuccess?: (data: any, duration?: number) => void;
   onError?: (err: any) => void;
 }
 
@@ -70,6 +70,7 @@ export const useImageUpload = ({
 
           cancelRef.current = task;
 
+          const startUploadTime = Date.now();
           task
             .uploadProgress?.({ interval: 300 }, (written, total) => {
               if (isMounted && total > 0) {
@@ -87,7 +88,10 @@ export const useImageUpload = ({
               setIsUploading(false);
               setProgress(100);
               setIsSuccess(true);
-              onSuccess?.(response?.data);
+              onSuccess?.(
+                response?.data,
+                (Date.now() - startUploadTime) / 1000
+              );
             })
             .catch((err: any) => {
               if (!isMounted) return;

package/src/ignore.d.ts

@@ -1,3 +1,22 @@
 declare module '@droppii/libs/*';
-declare module '@droppii/libs';
+declare module '@droppii/libs' {
+  export type KBottomSheetProps = any;
+  export type KPopupProps = any;
+  export type KToastBarProps = any;
+
+  export const KColors: any;
+  export const KSpacingValue: any;
+  export const KContainer: any;
+  export const KLabel: any;
+  export const KImage: any;
+  export const KButton: any;
+  export const KInput: any;
+  export const KRadiusValue: any;
+  export const KDivider: any;
+  export const KListItem: any;
+  export const KDims: any;
+  export const KBars: any;
+  export const KRating: any;
+  export const KPromotionTag: any;
+}
 declare module '*';

package/src/services/endpoints.ts

@@ -7,6 +7,16 @@ export const ENDPOINTS = {
       `/assistant-service/v1/app/chat/sessions/${sessionId}/stream`,
     createSession: '/assistant-service/v1/app/chat/sessions',
     searchSessions: '/assistant-service/v1/app/chat/sessions/search',
+    updateSession: (sessionId: string) =>
+      `/assistant-service/v1/app/chat/sessions/${sessionId}`,
+    shareSession: (sessionId: string) =>
+      `/assistant-service/v1/app/chat/sessions/${sessionId}/share`,
+    deleteSession: (sessionId: string) =>
+      `/assistant-service/v1/app/chat/sessions/${sessionId}`,
+    sendFeedback: (sessionId: string) =>
+      `/assistant-service/v1/app/chat/sessions/${sessionId}/feedback`,
+    generateAudio: (sessionId: string, messageId: string) =>
+      `/assistant-service/v1/app/chat/sessions/${sessionId}/messages/${messageId}/speech`,
   },
   uploaderService: {
     upload: '/uploader-service/v1/uploader/permanently',

package/src/services/index.ts

@@ -1 +1,2 @@
 export * from './apis';
+export { PlaybackService } from './playbackService';

package/src/services/playbackService.ts

@@ -0,0 +1,22 @@
+/**
+ * Playback Service for react-native-track-player
+ * Handles remote control events from lock screen, control center, and headphones
+ */
+import TrackPlayer, { Event } from 'react-native-track-player';
+
+export async function PlaybackService() {
+  TrackPlayer.addEventListener(Event.RemotePlay, async () => {
+    console.log('[PlaybackService] RemotePlay event');
+    await TrackPlayer.play();
+  });
+
+  TrackPlayer.addEventListener(Event.RemotePause, async () => {
+    console.log('[PlaybackService] RemotePause event');
+    await TrackPlayer.pause();
+  });
+
+  TrackPlayer.addEventListener(Event.RemoteStop, async () => {
+    console.log('[PlaybackService] RemoteStop event');
+    await TrackPlayer.stop();
+  });
+}

package/src/store/audioPlayer.ts

@@ -0,0 +1,112 @@
+/**
+ * Audio Player Store
+ * Manages audio playback state across messages
+ * Handles play/pause/stop for each message and session cleanup
+ */
+
+import { create } from 'zustand';
+
+export interface AudioPlayerState {
+  // Currently playing message ID
+  currentMessageId: string | null;
+  // Current session ID
+  currentSessionId: string | null;
+  // Playing state
+  isPlaying: boolean;
+  // Loading state (fetching audio from server)
+  isLoading: boolean;
+  // Audio URL cache: messageId -> audioUrl
+  audioCache: Map<string, string>;
+  // Error state
+  error: string | null;
+}
+
+export interface AudioPlayerActions {
+  // Set currently playing message
+  setCurrentMessage: (messageId: string | null, sessionId: string) => void;
+  // Set playing state
+  setIsPlaying: (isPlaying: boolean) => void;
+  // Set loading state
+  setIsLoading: (isLoading: boolean) => void;
+  // Cache audio URL for a message
+  cacheAudioUrl: (messageId: string, audioUrl: string) => void;
+  // Get cached audio URL
+  getCachedAudioUrl: (messageId: string) => string | null;
+  // Set error
+  setError: (error: string | null) => void;
+  // Clear all state (when session changes)
+  clearSession: () => void;
+  // Stop current playback
+  stopPlayback: () => void;
+}
+
+export type AudioPlayerStore = AudioPlayerState & AudioPlayerActions;
+
+const useAudioPlayerStore = create<AudioPlayerStore>((set, get) => ({
+  // Initial state
+  currentMessageId: null,
+  currentSessionId: null,
+  isPlaying: false,
+  isLoading: false,
+  audioCache: new Map(),
+  error: null,
+
+  // Actions
+  setCurrentMessage: (messageId, sessionId) => {
+    const state = get();
+
+    // If switching to a different session, clear the cache
+    if (state.currentSessionId && state.currentSessionId !== sessionId) {
+      set({
+        currentMessageId: messageId,
+        currentSessionId: sessionId,
+        audioCache: new Map(),
+        isPlaying: false,
+        error: null,
+      });
+    } else {
+      set({
+        currentMessageId: messageId,
+        currentSessionId: sessionId,
+        error: null,
+      });
+    }
+  },
+
+  setIsPlaying: (isPlaying) => set({ isPlaying }),
+
+  setIsLoading: (isLoading) => set({ isLoading }),
+
+  cacheAudioUrl: (messageId, audioUrl) => {
+    const state = get();
+    const newCache = new Map(state.audioCache);
+    newCache.set(messageId, audioUrl);
+    set({ audioCache: newCache });
+  },
+
+  getCachedAudioUrl: (messageId) => {
+    const state = get();
+    return state.audioCache.get(messageId) || null;
+  },
+
+  setError: (error) => set({ error }),
+
+  clearSession: () =>
+    set({
+      currentMessageId: null,
+      currentSessionId: null,
+      isPlaying: false,
+      isLoading: false,
+      audioCache: new Map(),
+      error: null,
+    }),
+
+  stopPlayback: () =>
+    set({
+      currentMessageId: null,
+      isPlaying: false,
+      error: null,
+    }),
+}));
+
+export default useAudioPlayerStore;