diff --git a/src/modules/prem-chat/components/PremChat.tsx b/src/modules/prem-chat/components/PremChat.tsx index 9862bae6..19f74b94 100644 --- a/src/modules/prem-chat/components/PremChat.tsx +++ b/src/modules/prem-chat/components/PremChat.tsx @@ -28,14 +28,7 @@ function PremChat() { ); } - return ( - - ); + return ; } export default PremChat; diff --git a/src/modules/prem-chat/components/PremChatContainer.tsx b/src/modules/prem-chat/components/PremChatContainer.tsx index dd969876..bb773960 100644 --- a/src/modules/prem-chat/components/PremChatContainer.tsx +++ b/src/modules/prem-chat/components/PremChatContainer.tsx @@ -1,7 +1,6 @@ import { useEffect, useRef, useState } from "react"; import UserReply from "shared/components/UserReply"; import BotReply from "shared/components/BotReply"; -import usePremChat from "shared/hooks/usePremChat"; import InputBox from "./InputBox"; import PremChatSidebar from "./PremChatSidebar"; import RegenerateButton from "./RegenerateButton"; @@ -11,13 +10,9 @@ import { Message, PremChatContainerProps } from "../types"; import clsx from "clsx"; import { useMediaQuery, useWindowSize } from "usehooks-ts"; import useBodyLock from "shared/hooks/useBodyLock"; +import usePremChatStream from "shared/hooks/usePremChatStream"; -const PremChatContainer = ({ - chatId, - isStreaming, - serviceId, - serviceName, -}: PremChatContainerProps) => { +const PremChatContainer = ({ chatId, serviceId, serviceName }: PremChatContainerProps) => { const model = serviceId; const [rightSidebar, setRightSidebar] = useState(false); const [hamburgerMenuOpen, setHamburgerMenu] = useState(true); @@ -27,7 +22,7 @@ const PremChatContainer = ({ const responsiveMatches = useMediaQuery("(min-width: 768px)"); const { chatMessages, onSubmit, question, setQuestion, isLoading, isError, onRegenerate } = - usePremChat(isStreaming, serviceId!, chatId || null); + usePremChatStream(serviceId, chatId || null); const { bodyLocked, setBodyLocked } = useBodyLock(); const hamburgerMenuToggle = () => { diff --git a/src/modules/prem-chat/types.ts b/src/modules/prem-chat/types.ts index cfb7a52b..7242d3e3 100644 --- a/src/modules/prem-chat/types.ts +++ b/src/modules/prem-chat/types.ts @@ -54,7 +54,6 @@ export type HamburgerMenuProps = { export type PremChatContainerProps = { chatId: string | undefined; - isStreaming: boolean; serviceId: string; serviceName: string; }; diff --git a/src/shared/hooks/usePremChat.ts b/src/shared/hooks/usePremChat.ts deleted file mode 100644 index 7d19140e..00000000 --- a/src/shared/hooks/usePremChat.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { PremChatResponse } from "modules/prem-chat/types"; -import usePremChatWithoutStream from "./usePremChatWithoutStream"; -import usePremChatStream from "./usePremChatStream"; - -const usePremChat = ( - stream: boolean, - serviceId: string, - chatId: string | null -): PremChatResponse => { - return stream - ? usePremChatStream(serviceId, chatId) - : usePremChatWithoutStream(serviceId, chatId); -}; - -export default usePremChat; diff --git a/src/shared/hooks/usePremChatStream.ts b/src/shared/hooks/usePremChatStream.ts index a8931771..72c8b74d 100644 --- a/src/shared/hooks/usePremChatStream.ts +++ b/src/shared/hooks/usePremChatStream.ts @@ -70,7 +70,7 @@ const usePremChatStream = (serviceId: string, chatId: string | null): PremChatRe backendUrl.port = `${service?.runningPort!}`; try { - fetchEventSource(`${backendUrl}api/v1/chat/completions`, { + fetchEventSource(`${backendUrl}v1/chat/completions`, { method: "POST", openWhenHidden: true, headers: { diff --git a/src/shared/hooks/usePremChatWithoutStream.ts b/src/shared/hooks/usePremChatWithoutStream.ts deleted file mode 100644 index 96805f15..00000000 --- a/src/shared/hooks/usePremChatWithoutStream.ts +++ /dev/null @@ -1,139 +0,0 @@ -import { useCallback, useMemo, useState } from "react"; -import { useMutation } from "@tanstack/react-query"; -import { v4 as uuid } from "uuid"; -import { useNavigate } from "react-router-dom"; -import { shallow } from "zustand/shallow"; -import { Message, PremChatResponse } from "modules/prem-chat/types"; -import { getChatCompletion } from "modules/prem-chat/api"; -import usePremChatStore from "../store/prem-chat"; -import useService from "./useService"; -import { toast } from "react-toastify"; - -const usePremChatWithoutStream = (serviceId: string, chatId: string | null): PremChatResponse => { - const [question, setQuestion] = useState(""); - const [tempQuestion, setTempQuestion] = useState(""); - const navigate = useNavigate(); - const { data: response } = useService(serviceId); - const service = response?.data; - - const { - history, - addHistory, - updateHistoryMessages, - temperature, - max_tokens, - top_p, - frequency_penalty, - n, - presence_penalty, - } = usePremChatStore( - (state) => ({ - history: state.history, - addHistory: state.addHistory, - updateHistoryMessages: state.updateHistoryMessages, - temperature: state.temperature, - max_tokens: state.max_tokens, - top_p: state.top_p, - frequency_penalty: state.frequency_penalty, - n: state.n, - presence_penalty: state.presence_penalty, - }), - shallow - ); - - const messages = history.find((_history) => _history.id === chatId)?.messages || []; - - const { isLoading, isError, mutate } = useMutation( - (messages: Message[]) => - getChatCompletion(service?.runningPort!, { - messages, - model: serviceId, - temperature: temperature || 0.5, - top_p: top_p || 1.0, - max_tokens: max_tokens || 256, - frequency_penalty, - stream: false, - n: n || 1, - presence_penalty, - }), - { - onSuccess: (response) => { - const tempConversation = [ - { - role: "user", - content: tempQuestion, - }, - { - role: "assistant", - content: response.data.choices[0].message.content, - }, - ]; - if (!chatId) { - const newConversationId = uuid(); - addHistory({ - id: newConversationId, - model: serviceId, - title: tempConversation[0].content, - messages: [...tempConversation], - timestamp: Date.now(), - }); - navigate(`/prem-chat/${serviceId}/${newConversationId}`); - } else { - updateHistoryMessages(chatId, [...messages, ...tempConversation]); - } - setTempQuestion(""); - }, - onError: () => { - setTempQuestion(""); - toast.error("Something went wrong"); - }, - } - ); - - const onSubmit = useCallback( - (e: React.FormEvent) => { - e.preventDefault(); - processQuestion(question); - }, - [question] - ); - - const processQuestion = (question: string) => { - const query = question.trim(); - if (!query) { - return; - } - const newMessages = [...messages, { role: "user", content: query }]; - setQuestion(""); - setTempQuestion(query); - mutate(newMessages); - }; - - const chatMessages = useMemo(() => { - if (tempQuestion) { - return [...messages, { role: "user", content: tempQuestion }]; - } - return messages; - }, [messages, tempQuestion]); - - const onRegenerate = useCallback(() => { - const newMessages = [...messages]; - const lastConversation = newMessages.splice(-2); - if (chatId) { - updateHistoryMessages(chatId, newMessages); - processQuestion(lastConversation[0].content); - } - }, [messages]); - - return { - chatMessages: chatMessages, - onSubmit, - question, - setQuestion, - isLoading, - isError, - onRegenerate, - }; -}; - -export default usePremChatWithoutStream;