diff --git a/web/src/components/message-item/hooks.ts b/web/src/components/message-item/hooks.ts index 7760bab46..b228b7c1d 100644 --- a/web/src/components/message-item/hooks.ts +++ b/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(); const [isPlaying, setIsPlaying] = useState(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(); diff --git a/web/src/interfaces/database/chat.ts b/web/src/interfaces/database/chat.ts index 9ddebae90..271634037 100644 --- a/web/src/interfaces/database/chat.ts +++ b/web/src/interfaces/database/chat.ts @@ -6,6 +6,7 @@ export interface PromptConfig { parameters: Parameter[]; prologue: string; system: string; + tts?: boolean; } export interface Parameter { diff --git a/web/src/pages/chat/chat-container/index.tsx b/web/src/pages/chat/chat-container/index.tsx index 99192a4de..398aece57 100644 --- a/web/src/pages/chat/chat-container/index.tsx +++ b/web/src/pages/chat/chat-container/index.tsx @@ -19,6 +19,7 @@ import { } from '@/hooks/chat-hooks'; import { useFetchUserInfo } from '@/hooks/user-setting-hooks'; import { memo } from 'react'; +import { ConversationContext } from '../context'; import styles from './index.less'; const ChatContainer = () => { @@ -26,15 +27,16 @@ const ChatContainer = () => { const { data: conversation } = useFetchNextConversation(); const { + value, ref, loading, sendLoading, derivedMessages, handleInputChange, handlePressEnter, - value, regenerateMessage, removeMessageById, + redirectToNewConversation, } = useSendNextMessage(); const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } = @@ -52,33 +54,35 @@ const ChatContainer = () => {
- {derivedMessages?.map((message, i) => { - return ( - - ); - })} + + {derivedMessages?.map((message, i) => { + return ( + + ); + })} +
diff --git a/web/src/pages/chat/context.ts b/web/src/pages/chat/context.ts new file mode 100644 index 000000000..117641da5 --- /dev/null +++ b/web/src/pages/chat/context.ts @@ -0,0 +1,5 @@ +import { createContext } from 'react'; + +export const ConversationContext = createContext< + null | ((isPlaying: boolean) => void) +>(null); diff --git a/web/src/pages/chat/hooks.ts b/web/src/pages/chat/hooks.ts index 1257da6c2..6be9e0382 100644 --- a/web/src/pages/chat/hooks.ts +++ b/web/src/pages/chat/hooks.ts @@ -32,6 +32,7 @@ import { useCallback, useEffect, useMemo, + useRef, useState, } from 'react'; import { useSearchParams } from 'umi'; @@ -340,6 +341,17 @@ export const useSendNextMessage = () => { removeMessageById, removeMessagesAfterCurrentMessage, } = useSelectNextMessages(); + const { data: dialog } = useFetchNextDialog(); + const currentConversationIdRef = useRef(''); + + const redirectToNewConversation = useCallback( + (isPlaying: boolean) => { + if (!conversationId && dialog?.prompt_config?.tts && !isPlaying) { + handleClickConversation(currentConversationIdRef.current); + } + }, + [dialog, handleClickConversation, conversationId], + ); const sendMessage = useCallback( async ({ @@ -365,7 +377,9 @@ export const useSendNextMessage = () => { if (currentConversationId) { console.info('111'); // new conversation - handleClickConversation(currentConversationId); + if (!dialog?.prompt_config?.tts) { + handleClickConversation(currentConversationId); + } } else { console.info('222'); // fetchConversation(conversationId); @@ -373,6 +387,7 @@ export const useSendNextMessage = () => { } }, [ + dialog, derivedMessages, conversationId, handleClickConversation, @@ -390,6 +405,7 @@ export const useSendNextMessage = () => { const data = await setConversation(message.content); if (data.retcode === 0) { const id = data.data.id; + currentConversationIdRef.current = id; sendMessage({ message, currentConversationId: id, @@ -463,6 +479,7 @@ export const useSendNextMessage = () => { ref, derivedMessages, removeMessageById, + redirectToNewConversation, }; };