diff --git a/web/src/pages/next-chats/chat/chat-box/multiple-chat-box.tsx b/web/src/pages/next-chats/chat/chat-box/multiple-chat-box.tsx index cbcc3c0b2..a813ff1a4 100644 --- a/web/src/pages/next-chats/chat/chat-box/multiple-chat-box.tsx +++ b/web/src/pages/next-chats/chat/chat-box/multiple-chat-box.tsx @@ -44,6 +44,7 @@ import { useAddChatBox } from '../use-add-box'; type MultipleChatBoxProps = { controller: AbortController; chatBoxIds: string[]; + stopOutputMessage(): void; } & Pick< ReturnType, 'removeChatBox' | 'addChatBox' | 'chatBoxIds' @@ -200,6 +201,7 @@ export function MultipleChatBox({ chatBoxIds, removeChatBox, addChatBox, + stopOutputMessage, }: MultipleChatBoxProps) { const { value, @@ -207,7 +209,6 @@ export function MultipleChatBox({ messageRecord, handleInputChange, handlePressEnter, - stopOutputMessage, setFormRef, handleUploadFile, } = useSendMultipleChatMessage(controller, chatBoxIds); diff --git a/web/src/pages/next-chats/chat/chat-box/single-chat-box.tsx b/web/src/pages/next-chats/chat/chat-box/single-chat-box.tsx index 0d31821a1..a63348e0a 100644 --- a/web/src/pages/next-chats/chat/chat-box/single-chat-box.tsx +++ b/web/src/pages/next-chats/chat/chat-box/single-chat-box.tsx @@ -20,9 +20,10 @@ import { buildMessageItemReference } from '../../utils'; interface IProps { controller: AbortController; + stopOutputMessage(): void; } -export function SingleChatBox({ controller }: IProps) { +export function SingleChatBox({ controller, stopOutputMessage }: IProps) { const { value, scrollRef, @@ -34,7 +35,6 @@ export function SingleChatBox({ controller }: IProps) { handlePressEnter, regenerateMessage, removeMessageById, - stopOutputMessage, handleUploadFile, removeFile, } = useSendMessage(controller); diff --git a/web/src/pages/next-chats/chat/index.tsx b/web/src/pages/next-chats/chat/index.tsx index f384a7626..9bc45b296 100644 --- a/web/src/pages/next-chats/chat/index.tsx +++ b/web/src/pages/next-chats/chat/index.tsx @@ -39,7 +39,7 @@ export default function Chat() { const { t } = useTranslation(); const { data: conversation } = useFetchConversation(); - const { handleConversationCardClick, controller } = + const { handleConversationCardClick, controller, stopOutputMessage } = useHandleClickConversationCard(); const { visible: settingVisible, switchVisible: switchSettingVisible } = useSetModalState(true); @@ -74,6 +74,7 @@ export default function Chat() { controller={controller} removeChatBox={removeChatBox} addChatBox={addChatBox} + stopOutputMessage={stopOutputMessage} > ); @@ -129,7 +130,10 @@ export default function Chat() { - + {settingVisible && ( diff --git a/web/src/pages/next-chats/hooks/use-click-card.ts b/web/src/pages/next-chats/hooks/use-click-card.ts index 9d7a65f7c..4b9141ece 100644 --- a/web/src/pages/next-chats/hooks/use-click-card.ts +++ b/web/src/pages/next-chats/hooks/use-click-card.ts @@ -5,16 +5,20 @@ export function useHandleClickConversationCard() { const [controller, setController] = useState(new AbortController()); const { handleClickConversation } = useClickConversationCard(); + const stopOutputMessage = useCallback(() => { + setController((pre) => { + pre.abort(); + return new AbortController(); + }); + }, []); + const handleConversationCardClick = useCallback( (conversationId: string, isNew: boolean) => { handleClickConversation(conversationId, isNew ? 'true' : ''); - setController((pre) => { - pre.abort(); - return new AbortController(); - }); + stopOutputMessage(); }, - [handleClickConversation], + [handleClickConversation, stopOutputMessage], ); - return { controller, handleConversationCardClick }; + return { controller, handleConversationCardClick, stopOutputMessage }; } diff --git a/web/src/pages/next-chats/hooks/use-send-chat-message.ts b/web/src/pages/next-chats/hooks/use-send-chat-message.ts index 94bc70cd4..ad589a041 100644 --- a/web/src/pages/next-chats/hooks/use-send-chat-message.ts +++ b/web/src/pages/next-chats/hooks/use-send-chat-message.ts @@ -123,10 +123,6 @@ export const useSendMessage = (controller: AbortController) => { [getConversationIsNew, handleUploadFile, setConversation], ); - const stopOutputMessage = useCallback(() => { - controller.abort(); - }, [controller]); - const sendMessage = useCallback( async ({ message, @@ -249,7 +245,6 @@ export const useSendMessage = (controller: AbortController) => { messageContainerRef, derivedMessages, removeMessageById, - stopOutputMessage, handleUploadFile: onUploadFile, isUploading, removeFile, diff --git a/web/src/pages/next-chats/hooks/use-send-multiple-message.ts b/web/src/pages/next-chats/hooks/use-send-multiple-message.ts index d9d766f87..bd0bc8c38 100644 --- a/web/src/pages/next-chats/hooks/use-send-multiple-message.ts +++ b/web/src/pages/next-chats/hooks/use-send-multiple-message.ts @@ -35,10 +35,6 @@ export function useSendMultipleChatMessage( const { setFormRef, getLLMConfigById, isLLMConfigEmpty } = useBuildFormRefs(chatBoxIds); - const stopOutputMessage = useCallback(() => { - controller.abort(); - }, [controller]); - const addNewestQuestion = useCallback( (message: Message, answer: string = '') => { setMessageRecord((pre) => { @@ -236,7 +232,6 @@ export function useSendMultipleChatMessage( sendMessage, handleInputChange, handlePressEnter, - stopOutputMessage, sendLoading: !allDone, setFormRef, handleUploadFile,