diff --git a/web/src/pages/flow/chat/hooks.ts b/web/src/pages/flow/chat/hooks.ts index c7ceae8dd..8efce5561 100644 --- a/web/src/pages/flow/chat/hooks.ts +++ b/web/src/pages/flow/chat/hooks.ts @@ -2,104 +2,25 @@ import { MessageType } from '@/constants/chat'; import { useFetchFlow } from '@/hooks/flow-hooks'; import { useHandleMessageInputChange, - useScrollToBottom, useSelectDerivedMessages, useSendMessageWithSse, } from '@/hooks/logic-hooks'; -import { IAnswer, Message } from '@/interfaces/database/chat'; -import { IMessage } from '@/pages/chat/interface'; +import { Message } from '@/interfaces/database/chat'; import api from '@/utils/api'; -import { buildMessageUuid } from '@/utils/chat'; import { message } from 'antd'; import trim from 'lodash/trim'; -import { useCallback, useEffect, useState } from 'react'; +import { useCallback, useEffect } from 'react'; import { useParams } from 'umi'; import { v4 as uuid } from 'uuid'; import { receiveMessageError } from '../utils'; const antMessage = message; -export const useSelectCurrentMessages = () => { - const { id: id } = useParams(); - const [currentMessages, setCurrentMessages] = useState([]); - - const { data: flowDetail, loading } = useFetchFlow(); - const messages = flowDetail.dsl.messages; - const reference = flowDetail.dsl.reference; - - const ref = useScrollToBottom(currentMessages); - - const addNewestQuestion = useCallback( - (message: Message, answer: string = '') => { - setCurrentMessages((pre) => { - return [ - ...pre, - { - ...message, - id: buildMessageUuid(message), - }, - { - role: MessageType.Assistant, - content: answer, - id: buildMessageUuid({ ...message, role: MessageType.Assistant }), - }, - ]; - }); - }, - [], - ); - - const addNewestAnswer = useCallback((answer: IAnswer) => { - setCurrentMessages((pre) => { - return [ - ...pre.slice(0, -1), - { - role: MessageType.Assistant, - content: answer.answer, - reference: answer.reference, - id: buildMessageUuid({ - id: answer.id, - role: MessageType.Assistant, - }), - }, - ]; - }); - }, []); - - const removeLatestMessage = useCallback(() => { - setCurrentMessages((pre) => { - const nextMessages = pre?.slice(0, -2) ?? []; - return nextMessages; - return [...pre, ...nextMessages]; - }); - }, []); - - useEffect(() => { - if (id) { - const nextMessages = messages.map((x) => ({ ...x, id: uuid() })); - setCurrentMessages(nextMessages); - } - }, [messages, id]); - - return { - currentMessages, - reference, - addNewestQuestion, - removeLatestMessage, - addNewestAnswer, - ref, - loading, - }; -}; - export const useSelectNextMessages = () => { - const { id: id } = useParams(); const { data: flowDetail, loading } = useFetchFlow(); - const messages = flowDetail.dsl.messages; const reference = flowDetail.dsl.reference; const { derivedMessages, - setDerivedMessages, ref, addNewestQuestion, addNewestAnswer, @@ -108,13 +29,6 @@ export const useSelectNextMessages = () => { removeMessagesAfterCurrentMessage, } = useSelectDerivedMessages(); - useEffect(() => { - if (id) { - const nextMessages = messages.map((x) => ({ ...x, id: uuid() })); - setDerivedMessages(nextMessages); - } - }, [messages, id, setDerivedMessages]); - return { reference, loading, @@ -128,76 +42,6 @@ export const useSelectNextMessages = () => { }; }; -export const useSendMessage = ( - addNewestQuestion: (message: Message, answer?: string) => void, - removeLatestMessage: () => void, - addNewestAnswer: (answer: IAnswer) => void, -) => { - const { id: flowId } = useParams(); - const { handleInputChange, value, setValue } = useHandleMessageInputChange(); - const { refetch } = useFetchFlow(); - - const { send, answer, done } = useSendMessageWithSse(api.runCanvas); - - const sendMessage = useCallback( - async (message: Message) => { - const params: Record = { - id: flowId, - }; - if (message.content) { - params.message = message.content; - params.message_id = message.id; - } - const res = await send(params); - - if (receiveMessageError(res)) { - antMessage.error(res?.data?.message); - - // cancel loading - setValue(message.content); - removeLatestMessage(); - } else { - refetch(); // pull the message list after sending the message successfully - } - }, - [flowId, removeLatestMessage, setValue, send, refetch], - ); - - const handleSendMessage = useCallback( - async (message: Message) => { - sendMessage(message); - }, - [sendMessage], - ); - - useEffect(() => { - if (answer.answer) { - addNewestAnswer(answer); - } - }, [answer, addNewestAnswer]); - - const handlePressEnter = useCallback(() => { - if (trim(value) === '') return; - const id = uuid(); - if (done) { - setValue(''); - handleSendMessage({ id, content: value.trim(), role: MessageType.User }); - } - addNewestQuestion({ - content: value, - id, - role: MessageType.User, - }); - }, [addNewestQuestion, handleSendMessage, done, setValue, value]); - - return { - handlePressEnter, - handleInputChange, - value, - loading: !done, - }; -}; - export const useSendNextMessage = () => { const { reference, @@ -211,7 +55,6 @@ export const useSendNextMessage = () => { } = useSelectNextMessages(); const { id: flowId } = useParams(); const { handleInputChange, value, setValue } = useHandleMessageInputChange(); - const { refetch } = useFetchFlow(); const { send, answer, done } = useSendMessageWithSse(api.runCanvas); @@ -232,11 +75,9 @@ export const useSendNextMessage = () => { // cancel loading setValue(message.content); removeLatestMessage(); - } else { - refetch(); // pull the message list after sending the message successfully } }, - [flowId, removeLatestMessage, setValue, send, refetch], + [flowId, removeLatestMessage, setValue, send], ); const handleSendMessage = useCallback( @@ -266,6 +107,18 @@ export const useSendNextMessage = () => { }); }, [addNewestQuestion, handleSendMessage, done, setValue, value]); + const fetchPrologue = useCallback(async () => { + // fetch prologue + const sendRet = await send({ id: flowId }); + if (receiveMessageError(sendRet)) { + message.error(sendRet?.data?.message); + } + }, [flowId, send]); + + useEffect(() => { + fetchPrologue(); + }, [fetchPrologue]); + return { handlePressEnter, handleInputChange, diff --git a/web/src/pages/flow/hooks.tsx b/web/src/pages/flow/hooks.tsx index 20f3c24b1..e73455791 100644 --- a/web/src/pages/flow/hooks.tsx +++ b/web/src/pages/flow/hooks.tsx @@ -16,9 +16,8 @@ import { ModelVariableType, settledModelVariableMap, } from '@/constants/knowledge'; -import { useFetchModelId, useSendMessageWithSse } from '@/hooks/logic-hooks'; +import { useFetchModelId } from '@/hooks/logic-hooks'; import { Variable } from '@/interfaces/database/chat'; -import api from '@/utils/api'; import { useDebounceEffect } from 'ahooks'; import { FormInstance, message } from 'antd'; import { DefaultOptionType } from 'antd/es/select'; @@ -78,7 +77,6 @@ import { generateNodeNamesWithIncreasingIndex, generateSwitchHandleText, getNodeDragHandle, - receiveMessageError, replaceIdWithText, } from './utils'; @@ -448,11 +446,8 @@ export const useGetBeginNodeDataQuery = () => { }; export const useSaveGraphBeforeOpeningDebugDrawer = (show: () => void) => { - const { id } = useParams(); const { saveGraph, loading } = useSaveGraph(); const { resetFlow } = useResetFlow(); - const { refetch } = useFetchFlow(); - const { send } = useSendMessageWithSse(api.runCanvas); const handleRun = useCallback( async (nextNodes?: Node[]) => { @@ -463,17 +458,10 @@ export const useSaveGraphBeforeOpeningDebugDrawer = (show: () => void) => { // After resetting, all previous messages will be cleared. if (resetRet?.code === 0) { show(); - // fetch prologue - const sendRet = await send({ id }); - if (receiveMessageError(sendRet)) { - message.error(sendRet?.data?.message); - } else { - refetch(); - } } } }, - [saveGraph, resetFlow, send, id, refetch, show], + [saveGraph, resetFlow, show], ); return { handleRun, loading };