feat: After the voice in the new conversation window is played, jump to the tab of the conversation #1877 (#2440)

### What problem does this PR solve?

feat: After the voice in the new conversation window is played, jump to
the tab of the conversation #1877

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/components/message-item/hooks.ts

@@ -2,10 +2,11 @@ import { useDeleteMessage, useFeedback } from '@/hooks/chat-hooks';
 import { useSetModalState } from '@/hooks/common-hooks';
 import { IRemoveMessageById, useSpeechWithSse } from '@/hooks/logic-hooks';
 import { IFeedbackRequestBody } from '@/interfaces/request/chat';
+import { ConversationContext } from '@/pages/chat/context';
 import { getMessagePureId } from '@/utils/chat';
 import { hexStringToUint8Array } from '@/utils/common-util';
 import { SpeechPlayer } from 'openai-speech-stream-player';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 
 export const useSendFeedback = (messageId: string) => {
   const { visible, hideModal, showModal } = useSetModalState();
@@ -58,21 +59,24 @@ export const useSpeech = (content: string, audioBinary?: string) => {
   const { read } = useSpeechWithSse();
   const player = useRef<SpeechPlayer>();
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const callback = useContext(ConversationContext);
 
   const initialize = useCallback(async () => {
     player.current = new SpeechPlayer({
       audio: ref.current!,
       onPlaying: () => {
         setIsPlaying(true);
+        callback?.(true);
       },
       onPause: () => {
         setIsPlaying(false);
+        callback?.(false);
       },
       onChunkEnd: () => {},
       mimeType: 'audio/mpeg',
     });
     await player.current.init();
-  }, []);
+  }, [callback]);
 
   const pause = useCallback(() => {
     player.current?.pause();