react-native-chatbot-ai 0.1.19 → 0.1.22

package/src/components/product/CardHorizontal.tsx

@@ -11,25 +11,29 @@ import {
   KPromotionTag,
 } from '@droppii/libs';
 import { PTManager } from '../../utils/prototype';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import useProductsStore from '../../store/products';
 import { PRODUCT_STATUSES } from '../../types';
 import { useChatContext } from '../../context/ChatContext';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { GAEvents } from '../../constants/events';
+import useSessionStore from '../../store/session';
 
 interface IProductHorizontalCardProps {
   productId?: string;
+  messageId?: string;
 }
 
-const ProducHorizontalCard = (props: IProductHorizontalCardProps) => {
-  const { productId } = props;
+const ProductHorizontalCard = (props: IProductHorizontalCardProps) => {
+  const { productId, messageId } = props;
   const item = useProductsStore((state) =>
     state.products.find((p) => p.id === productId)
   );
   const onAddToCart = useChatContext()?.onAddToCart;
   const onBuyNow = useChatContext()?.onBuyNow;
   const onNavigateToProduct = useChatContext()?.onNavigateToProduct;
+  const logGA = useChatContext()?.logGA;
 
   const {
     avgRating,
@@ -132,6 +136,40 @@ const ProducHorizontalCard = (props: IProductHorizontalCardProps) => {
     return !isSuspended && !isSoldOut && typeof onBuyNow === 'function';
   }, [isSuspended, isSoldOut, onBuyNow]);
 
+  const onPress = useCallback(() => {
+    if (!item) return;
+    onNavigateToProduct?.(item);
+    logGA(GAEvents.chatDetailProductCardTap, {
+      conversation_id: useSessionStore.getState().sessionId,
+      product_id: item.id,
+      position_in_list: -1, //TODO: fix
+    });
+  }, [onNavigateToProduct, logGA, item]);
+
+  const onPressAddToCart = useCallback(() => {
+    if (!item) return;
+    onAddToCart?.(item);
+    logGA(GAEvents.chatDetailAddToCartBtnTap, {
+      conversation_id: useSessionStore.getState().sessionId,
+      product_id: item.id,
+      position_in_list: -1, //TODO: fix
+      pdp_id: item.pdpId,
+      message_id: messageId,
+    });
+  }, [onAddToCart, logGA, item, messageId]);
+
+  const onPressBuyNow = useCallback(() => {
+    if (!item) return;
+    onBuyNow?.(item);
+    logGA(GAEvents.chatDetailBuyNowBtnTap, {
+      conversation_id: useSessionStore.getState().sessionId,
+      product_id: item.id,
+      position_in_list: -1, //TODO: fix
+      pdp_id: item.pdpId,
+      message_id: messageId,
+    });
+  }, [onBuyNow, logGA, item, messageId]);
+
   if (!item) {
     return (
       <KContainer.View style={styles.container}>
@@ -170,10 +208,7 @@ const ProducHorizontalCard = (props: IProductHorizontalCardProps) => {
   }
 
   return (
-    <KContainer.Touchable
-      style={styles.container}
-      onPress={() => onNavigateToProduct?.(item)}
-    >
+    <KContainer.Touchable style={styles.container} onPress={onPress}>
       <KContainer.View style={styles.image}>
         <KImage.Base
           uri={imageUrl}
@@ -294,7 +329,7 @@ const ProducHorizontalCard = (props: IProductHorizontalCardProps) => {
           </KLabel.Text>
           <KContainer.View style={styles.actionsRow}>
             <KButton.Base
-              onPress={() => onAddToCart?.(item)}
+              onPress={onPressAddToCart}
               background={KColors.palette.primary.w25}
               tintColor={KColors.primary.normal}
               icon={{
@@ -305,7 +340,7 @@ const ProducHorizontalCard = (props: IProductHorizontalCardProps) => {
               disabled={!isEnabledAddToCart}
             />
             <KButton.Solid
-              onPress={() => onBuyNow?.(item)}
+              onPress={onPressBuyNow}
               size="sm"
               label="Mua ngay"
               kind="primary"
@@ -318,7 +353,7 @@ const ProducHorizontalCard = (props: IProductHorizontalCardProps) => {
   );
 };
 
-export default ProducHorizontalCard;
+export default ProductHorizontalCard;
 
 const styles = StyleSheet.create({
   abs: {

package/src/constants/events.ts

@@ -5,3 +5,37 @@ export const events = {
   expandThinkingStep: 'expand_thinking_step',
   updateMessageError: 'update_message_error',
 };
+
+export const GAEvents = {
+  newChatPageView: 'NewChat_Page_View',
+  chatDetailPageView: 'ChatDetail_Page_View',
+  chatDetailSendBtnTap: 'ChatDetail_SendBtn_Tap',
+  chatDetailLikeDislikeBtnTap: 'ChatDetail_LikeDislikeBtn_Tap',
+  chatDetailCopyBtnTap: 'ChatDetail_CopyBtn_Tap',
+  chatDetailVoiceBtnTap: 'ChatDetail_VoiceBtn_Tap',
+  chatDetailExportPDFBtnTap: 'ChatDetail_ExportPDFBtn_Tap',
+  chatDetailShareMessBtnTap: 'ChatDetail_ShareMessBtn_Tap',
+  chatDetailStopChatBtnTap: 'ChatDetail_StopChatBtn_Tap',
+  chatDetailMultimodalTap: 'ChatDetail_Multimodal_Tap',
+  chatDetailMultimodalUpload: 'ChatDetail_Multimodal_Upload',
+  chatDetailMultimodalSend: 'ChatDetail_Multimodal_Send',
+  chatDetailProductCardTap: 'ChatDetail_ProductCard_Tap',
+  chatDetailAddToCartBtnTap: 'ChatDetail_AddToCartBtn_Tap',
+  chatDetailBuyNowBtnTap: 'ChatDetail_BuyNowBtn_Tap',
+  newChatCreateBtnTap: 'NewChat_CreateBtn_Tap',
+  chatDetailShoppingCartBtnTap: 'ChatDetail_ShoppingCartBtn_Tap',
+  chatDetailShareBtnTap: 'ChatDetail_ShareBtn_Tap',
+  shareChatModalCopyBtnTap: 'ShareChatModal_CopyBtn_Tap',
+  chatDetailRenameBtnTap: 'ChatDetail_RenameBtn_Tap',
+  renameModalSaveBtnTap: 'RenameModal_SaveBtn_Tap',
+  deleteChatModalDeleteBtnTap: 'DeleteChatModal_DeleteBtn_Tap',
+  sidebarSearchConversationTap: 'Sidebar_SearchConversation_Tap',
+  sidebarSearchConversationSend: 'Sidebar_SearchConversation_Send',
+  newChatNewChatPrmSuggTap: 'NewChat_NewChatPrmSugg_Tap',
+  chatDetailInConvPrmSuggTap: 'ChatDetail_InConvPrmSugg_Tap',
+  chatDetailInConvPrmSuggScroll: 'ChatDetail_InConvPrmSugg_Scroll',
+  chatDetailInConvPrmSuggReturn: 'ChatDetail_InConvPrmSugg_Return',
+  chatDetailLivechatBtnTap: 'ChatDetail_LivechatBtn_Tap',
+  chatDetailFAQTap: 'ChatDetail_FAQ_Tap',
+  chatDetailGiftDetailBtnTap: 'ChatDetail_GiftDetailBtn_Tap',
+};

package/src/constants/index.ts

@@ -1,9 +1,14 @@
 import { createRef } from 'react';
-import { WithToastProps } from '../types';
+import { WithBottomSheetProps, WithPopupProps, WithToastProps } from '../types';
 
 const MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER + 100;
 
 export const toastRef = createRef<WithToastProps>();
+export const bottomSheetRef = createRef<WithBottomSheetProps>();
+export const popupRef = createRef<WithPopupProps>();
+
 export const Z_INDEX_PRIORITY = {
   toast: MAX_SAFE_INTEGER - 1,
+  bottomSheet: MAX_SAFE_INTEGER - 2,
+  popup: MAX_SAFE_INTEGER, // Highest priority - always on top
 };

package/src/constants/query.ts

@@ -4,4 +4,8 @@ export const QUERY_KEYS = {
   CREATE_SESSION: 'CREATE_SESSION',
   SEARCH_PRODUCT: 'SEARCH_PRODUCT',
   SEARCH_SESSIONS: 'SEARCH_SESSIONS',
+  UPDATE_SESSION: 'UPDATE_SESSION',
+  SHARE_SESSION: 'SHARE_SESSION',
+  DELETE_SESSION: 'DELETE_SESSION',
+  SEND_FEEDBACK: 'SEND_FEEDBACK',
 };

package/src/context/ChatContext.tsx

@@ -15,6 +15,8 @@ export const ChatContext = createContext<ChatContextType>({
   pushLinkTo: () => {},
   openDrawer: () => {},
   closeDrawer: () => {},
+  chatbotUrl: '',
+  logGA: () => {},
 });
 
 export const useChatContext = () => useContext(ChatContext);
@@ -38,6 +40,8 @@ export const ChatProvider = (props: ChatProviderProps) => {
     onNavigateToProduct,
     csTeamId,
     pushLinkTo,
+    chatbotUrl,
+    logGA,
   } = props;
 
   return (
@@ -54,6 +58,8 @@ export const ChatProvider = (props: ChatProviderProps) => {
         pushLinkTo,
         openDrawer,
         closeDrawer,
+        chatbotUrl,
+        logGA,
       }}
     >
       <ReanimatedDrawerExample ref={ref}>

package/src/hooks/message/useSendMessage.ts

@@ -2,21 +2,34 @@ import { useCallback } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import useSessionStore from '../../store/session';
 import { useStreamMessage } from './useStreamMessage';
-import { events } from '../../constants/events';
+import { events, GAEvents } from '../../constants/events';
 import { DeviceEventEmitter } from 'react-native';
-import { IAttachment, IMessageItem, MessageType, RoleType } from '../../types';
+import {
+  IAttachment,
+  IMessageItem,
+  MessageType,
+  RoleType,
+  SendActionLogType,
+} from '../../types';
 import dayjs from 'dayjs';
 import { useCreateSession } from '../session/useCreateSession';
 import { QUERY_KEYS } from '../../constants/query';
 import { BaseResponse } from '../../types/common';
 import { SearchSessionsResponse } from '../../types/dto';
+import { useChatContext } from '../../context/ChatContext';
 
 export const useSendMessage = () => {
   const { startStream, stopStream, retryStream } = useStreamMessage();
   const { mutateAsync: createSession } = useCreateSession();
   const queryClient = useQueryClient();
+  const logGA = useChatContext().logGA;
+
   const onSendMessage = useCallback(
-    async (message: string, attachments?: IAttachment[]) => {
+    async (
+      message: string,
+      attachments?: IAttachment[],
+      actionType?: SendActionLogType
+    ) => {
       const messageId = dayjs().valueOf().toString();
       const messageItem: IMessageItem = {
         id: messageId,
@@ -50,6 +63,36 @@ export const useSendMessage = () => {
           ) => index === 0,
         });
       }
+
+      logGA(GAEvents.chatDetailSendBtnTap, {
+        chat_type: useSessionStore.getState().sessionLogType,
+        conversation_id:
+          latestSessionId || useSessionStore.getState().sessionId,
+        action_type: actionType,
+      });
+
+      if (attachments?.length && attachments.length > 0) {
+        const totalFileCount = attachments.filter(
+          (i) => i.type === 'file'
+        ).length;
+        const totalImageCount = attachments.filter(
+          (i) => i.type === 'image'
+        ).length;
+        const fileType = [
+          totalFileCount > 0 ? 'file' : null,
+          totalImageCount > 0 ? 'image' : null,
+        ]
+          .filter(Boolean)
+          .join(', ');
+        logGA(GAEvents.chatDetailMultimodalTap, {
+          conversation_id:
+            latestSessionId || useSessionStore.getState().sessionId,
+          file_type: fileType,
+          total_image_count: totalImageCount,
+          total_file_count: totalFileCount,
+        });
+      }
+
       startStream(
         {
           content: message,
@@ -64,7 +107,7 @@ export const useSendMessage = () => {
         messageId
       );
     },
-    [startStream, createSession, queryClient]
+    [startStream, createSession, queryClient, logGA]
   );
 
   return {

package/src/hooks/message/useStreamMessage.ts

@@ -1,19 +1,23 @@
 import { useEffect, useRef, useCallback } from 'react';
 import { useChatContext } from '../../context/ChatContext';
 import { ENDPOINTS } from '../../services/endpoints';
-import { type IMessageItem, type StreamMessageRequest } from '../../types';
+import {
+  SendActionLogType,
+  type IMessageItem,
+  type StreamMessageRequest,
+} from '../../types';
 import EventSource from 'react-native-sse';
 import useStreamMessageStore from '../../store/streamMessage';
 import throttle from 'lodash/throttle';
 import { DeviceEventEmitter } from 'react-native';
-import { events } from '../../constants/events';
+import { events, GAEvents } from '../../constants/events';
 import useSessionStore from '../../store/session';
 
 export const useStreamMessage = () => {
   const sessionId = useSessionStore((state) => state.sessionId);
   const esRef = useRef<EventSource | null>(null);
   const sessionIdRef = useRef<string | undefined>(sessionId);
-  const { apiAddress } = useChatContext();
+  const { apiAddress, logGA } = useChatContext();
   const setStreamMessage = useStreamMessageStore(
     (state) => state.setStreamMessage
   );
@@ -158,6 +162,13 @@ export const useStreamMessage = () => {
         ...messageItem,
         metadata: {},
       });
+
+      logGA(GAEvents.chatDetailSendBtnTap, {
+        chat_type: useSessionStore.getState().sessionLogType,
+        conversation_id: sessionId,
+        action_type: SendActionLogType.retry,
+      });
+
       startStream(
         {
           content: messageItem.content,
@@ -172,7 +183,7 @@ export const useStreamMessage = () => {
         messageItem.id
       );
     },
-    [startStream]
+    [startStream, logGA, sessionId]
   );
 
   useEffect(() => {

package/src/hooks/messageActions/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Message Actions Hooks
+ * Barrel export for all message action hooks
+ */
+
+export { useFeedback } from './useFeedback';
+export { useCopyToClipboard } from './useCopyToClipboard';
+export { useShareMessage } from './useShareMessage';
+export { useSendFeedback } from './useSendFeedback';
+export { useAudioPlayer } from './useAudioPlayer';

package/src/hooks/messageActions/useAudioPlayer.ts

@@ -0,0 +1,346 @@
+/**
+ * useAudioPlayer Hook - react-native-track-player version
+ */
+import { useCallback, useEffect } from 'react';
+import TrackPlayer, {
+  Event,
+  Capability,
+  State,
+} from 'react-native-track-player';
+
+import ReactNativeBlobUtil from 'react-native-blob-util';
+import { apiInstance } from '../../services/apis';
+import { ENDPOINTS } from '../../services/endpoints';
+import useAudioPlayerStore from '../../store/audioPlayer';
+import useSessionStore from '../../store/session';
+import { PlaybackService } from '../../services';
+import { useChatContext } from '../../context/ChatContext';
+import { GAEvents } from '../../constants/events';
+
+interface UseAudioPlayerProps {
+  messageId: string;
+}
+
+interface UseAudioPlayerReturn {
+  isPlaying: boolean;
+  isPaused: boolean;
+  isLoading: boolean;
+  error: string | null;
+  togglePlayback: () => Promise<void>;
+  stopPlayback: () => void;
+}
+
+// Register playback service BEFORE setupPlayer
+TrackPlayer.registerPlaybackService(() => PlaybackService);
+
+// --- INIT PLAYER ONE TIME ---
+let playerInitialized = false;
+const setupPlayer = async () => {
+  if (playerInitialized) return;
+
+  try {
+    await TrackPlayer.setupPlayer();
+
+    await TrackPlayer.updateOptions({
+      capabilities: [Capability.Play, Capability.Pause, Capability.Stop],
+      compactCapabilities: [Capability.Play, Capability.Pause],
+      notificationCapabilities: [
+        Capability.Play,
+        Capability.Pause,
+        Capability.Stop,
+      ],
+    });
+    playerInitialized = true;
+  } catch (e) {
+    console.error('Error initializing TrackPlayer:', e);
+  }
+};
+
+export const useAudioPlayer = ({
+  messageId,
+}: UseAudioPlayerProps): UseAudioPlayerReturn => {
+  const logGA = useChatContext().logGA;
+  const sessionId = useSessionStore().sessionId;
+  const {
+    currentMessageId,
+    currentSessionId,
+    isPlaying,
+    isLoading,
+    error,
+    setCurrentMessage,
+    setIsPlaying,
+    setIsLoading,
+    setError,
+    cacheAudioUrl,
+    getCachedAudioUrl,
+    stopPlayback: storeStopPlayback,
+  } = useAudioPlayerStore();
+
+  const isThisMessagePlaying = currentMessageId === messageId && isPlaying;
+  const isThisMessageLoading = currentMessageId === messageId && isLoading;
+  const isThisMessagePaused =
+    currentMessageId === messageId && !isPlaying && !isLoading;
+
+  // === FETCH AUDIO ===
+  const fetchAudio = useCallback(
+    async (sid: string, mid: string): Promise<string> => {
+      try {
+        const cachedPath = getCachedAudioUrl(mid);
+        if (cachedPath) {
+          const exists = await ReactNativeBlobUtil.fs.exists(cachedPath);
+          if (exists) return cachedPath;
+        }
+
+        const endpoint = ENDPOINTS.assistantService.generateAudio(sid, mid);
+        const baseURL = apiInstance?.defaults?.baseURL || '';
+        const fullUrl = `${baseURL}${endpoint}`;
+
+        const token = (global as any)?.accessToken;
+        if (!token) throw new Error('Missing access token');
+
+        const headers = {
+          'Authorization': `Bearer ${token}`,
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+        };
+
+        const dirs = ReactNativeBlobUtil.fs.dirs;
+        const audioDir = `${dirs.CacheDir}/chatbot_audio`;
+        const filePath = `${audioDir}/${mid}.mp3`;
+
+        const dirExists = await ReactNativeBlobUtil.fs.exists(audioDir);
+        if (!dirExists) await ReactNativeBlobUtil.fs.mkdir(audioDir);
+
+        const response = await ReactNativeBlobUtil.config({
+          path: filePath,
+          fileCache: true,
+        }).fetch('GET', fullUrl, headers);
+
+        if (response.info().status !== 200) {
+          const text = await response.text();
+          throw new Error(`Server error: ${response.info().status} - ${text}`);
+        }
+
+        const path = response.path();
+        const stat = await ReactNativeBlobUtil.fs.stat(path);
+        if (stat.size === 0) throw new Error('Downloaded file is empty');
+        cacheAudioUrl(mid, path);
+        return path;
+      } catch (err: any) {
+        const msg =
+          err?.response?.data?.message ||
+          err?.message ||
+          'Failed to fetch audio';
+        console.error('Fetch audio error:', msg);
+        throw new Error(msg);
+      }
+    },
+    [getCachedAudioUrl, cacheAudioUrl]
+  );
+
+  // === PLAY AUDIO ===
+  const playAudio = useCallback(
+    async (audioPath: string) => {
+      try {
+        await setupPlayer();
+        await TrackPlayer.reset();
+
+        const track = {
+          id: messageId,
+          url: `file://${audioPath}`,
+          title: `Message Audio`,
+          artist: 'Assistant',
+        };
+
+        await TrackPlayer.add([track]);
+        await TrackPlayer.play();
+        setIsPlaying(true);
+      } catch (err) {
+        console.error('Failed to play audio:', err);
+        throw new Error('Không thể phát âm thanh');
+      }
+    },
+    [messageId, setIsPlaying]
+  );
+
+  // === PAUSE ===
+  const pauseAudio = useCallback(async () => {
+    try {
+      await TrackPlayer.pause();
+      setIsPlaying(false);
+    } catch (e) {
+      console.warn('Pause failed:', e);
+    }
+  }, [setIsPlaying]);
+
+  // === STOP ===
+  const stopPlayback = useCallback(async () => {
+    try {
+      await TrackPlayer.stop();
+      await TrackPlayer.reset();
+      storeStopPlayback();
+    } catch (e) {
+      console.warn('Stop failed:', e);
+    }
+  }, [storeStopPlayback]);
+
+  // === TOGGLE ===
+  const togglePlayback = useCallback(async () => {
+    try {
+      if (!sessionId) throw new Error('No session ID');
+
+      // Case 1: Click on the SAME message that is currently playing → Pause it
+      if (isThisMessagePlaying) {
+        await pauseAudio();
+        logGA(GAEvents.chatDetailVoiceBtnTap, {
+          conversation_id: sessionId,
+          message_id: messageId,
+          button_status: 'stop',
+          duration: 0,
+        });
+        return;
+      }
+
+      // Case 2: Click on the SAME message that was paused → Resume it
+      if (currentMessageId === messageId && !isPlaying) {
+        await TrackPlayer.play();
+        setIsPlaying(true);
+        logGA(GAEvents.chatDetailVoiceBtnTap, {
+          conversation_id: sessionId,
+          message_id: messageId,
+          button_status: 'start',
+          duration: 0,
+        });
+
+        return;
+      }
+
+      // Case 3: Click on a DIFFERENT message → Stop current and play new one
+      if (currentMessageId && currentMessageId !== messageId) {
+        await stopPlayback();
+        logGA(GAEvents.chatDetailVoiceBtnTap, {
+          conversation_id: sessionId,
+          message_id: messageId,
+          button_status: 'stop',
+          duration: 0,
+        });
+      }
+
+      // Set new message as current and start loading
+      setCurrentMessage(messageId, sessionId);
+      setIsLoading(true);
+      setError(null);
+      const startStreamTime = Date.now();
+      const path = await fetchAudio(sessionId, messageId);
+      await playAudio(path);
+      logGA(GAEvents.chatDetailVoiceBtnTap, {
+        conversation_id: sessionId,
+        message_id: messageId,
+        button_status: 'start',
+        duration: (Date.now() - startStreamTime) / 1000,
+      });
+    } catch (err: any) {
+      const msg = err?.message || 'Failed to play audio';
+      setError(msg);
+      setIsPlaying(false);
+      console.error('togglePlayback error:', msg);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [
+    sessionId,
+    messageId,
+    isThisMessagePlaying,
+    currentMessageId,
+    isPlaying,
+    setCurrentMessage,
+    setIsLoading,
+    setError,
+    setIsPlaying,
+    fetchAudio,
+    playAudio,
+    pauseAudio,
+    stopPlayback,
+    logGA,
+  ]);
+
+  // === PLAYER EVENTS ===
+  useEffect(() => {
+    // Listen for queue end
+    const queueEndSubscription = TrackPlayer.addEventListener(
+      Event.PlaybackQueueEnded,
+      () => {
+        if (currentMessageId === messageId) {
+          // Audio finished playing → reset to initial state
+          storeStopPlayback();
+        }
+      }
+    );
+
+    // Listen for playback state changes (from lock screen, control center, etc.)
+    const stateSubscription = TrackPlayer.addEventListener(
+      Event.PlaybackState,
+      async () => {
+        const state = await TrackPlayer.getState();
+
+        // Only update if this is the current message
+        if (currentMessageId === messageId) {
+          if (state === State.Playing) {
+            setIsPlaying(true);
+          } else if (state === State.Paused || state === State.Ready) {
+            setIsPlaying(false);
+          } else if (state === State.Stopped) {
+            storeStopPlayback();
+          }
+        }
+      }
+    );
+
+    return () => {
+      queueEndSubscription?.remove?.();
+      stateSubscription?.remove?.();
+    };
+  }, [currentMessageId, messageId, storeStopPlayback, setIsPlaying]);
+
+  // === CLEANUP CACHE WHEN SESSION CHANGES ===
+  const cleanupAudioCache = useCallback(async () => {
+    try {
+      const audioDir = `${ReactNativeBlobUtil.fs.dirs.CacheDir}/chatbot_audio`;
+      const exists = await ReactNativeBlobUtil.fs.exists(audioDir);
+      if (exists) await ReactNativeBlobUtil.fs.unlink(audioDir);
+    } catch (e) {
+      console.error('Cleanup cache error:', e);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (currentSessionId && currentSessionId !== sessionId) {
+      if (currentMessageId === messageId) stopPlayback();
+      cleanupAudioCache();
+    }
+  }, [
+    sessionId,
+    currentSessionId,
+    currentMessageId,
+    messageId,
+    stopPlayback,
+    cleanupAudioCache,
+  ]);
+
+  useEffect(() => {
+    return () => {
+      if (currentMessageId === messageId) {
+        stopPlayback();
+      }
+    };
+  }, [currentMessageId, messageId, stopPlayback]);
+
+  return {
+    isPlaying: isThisMessagePlaying,
+    isPaused: isThisMessagePaused,
+    isLoading: isThisMessageLoading,
+    error: currentMessageId === messageId ? error : null,
+    togglePlayback,
+    stopPlayback,
+  };
+};