92 lines
2.4 KiB
JavaScript
92 lines
2.4 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import ChatHistory from "./ChatHistory";
|
|
import PromptInput from "./PromptInput";
|
|
import handleChat from "@/utils/chat";
|
|
import ChatService from "@/models/chatService";
|
|
|
|
export default function ChatContainer({
|
|
sessionId,
|
|
settings,
|
|
knownHistory = [],
|
|
}) {
|
|
const [message, setMessage] = useState("");
|
|
const [loadingResponse, setLoadingResponse] = useState(false);
|
|
const [chatHistory, setChatHistory] = useState(knownHistory);
|
|
|
|
// Resync history if the ref to known history changes
|
|
// eg: cleared.
|
|
useEffect(() => {
|
|
if (knownHistory.length !== chatHistory.length)
|
|
setChatHistory([...knownHistory]);
|
|
}, [knownHistory]);
|
|
|
|
const handleMessageChange = (event) => {
|
|
setMessage(event.target.value);
|
|
};
|
|
|
|
const handleSubmit = async (event) => {
|
|
event.preventDefault();
|
|
if (!message || message === "") return false;
|
|
|
|
const prevChatHistory = [
|
|
...chatHistory,
|
|
{ content: message, role: "user" },
|
|
{
|
|
content: "",
|
|
role: "assistant",
|
|
pending: true,
|
|
userMessage: message,
|
|
animate: true,
|
|
},
|
|
];
|
|
|
|
setChatHistory(prevChatHistory);
|
|
setMessage("");
|
|
setLoadingResponse(true);
|
|
};
|
|
|
|
useEffect(() => {
|
|
async function fetchReply() {
|
|
const promptMessage =
|
|
chatHistory.length > 0 ? chatHistory[chatHistory.length - 1] : null;
|
|
const remHistory = chatHistory.length > 0 ? chatHistory.slice(0, -1) : [];
|
|
var _chatHistory = [...remHistory];
|
|
|
|
if (!promptMessage || !promptMessage?.userMessage) {
|
|
setLoadingResponse(false);
|
|
return false;
|
|
}
|
|
|
|
await ChatService.streamChat(
|
|
sessionId,
|
|
settings,
|
|
promptMessage.userMessage,
|
|
(chatResult) =>
|
|
handleChat(
|
|
chatResult,
|
|
setLoadingResponse,
|
|
setChatHistory,
|
|
remHistory,
|
|
_chatHistory
|
|
)
|
|
);
|
|
return;
|
|
}
|
|
loadingResponse === true && fetchReply();
|
|
}, [loadingResponse, chatHistory]);
|
|
|
|
return (
|
|
<div className="h-full w-full relative">
|
|
<ChatHistory settings={settings} history={chatHistory} />
|
|
<PromptInput
|
|
settings={settings}
|
|
message={message}
|
|
submit={handleSubmit}
|
|
onChange={handleMessageChange}
|
|
inputDisabled={loadingResponse}
|
|
buttonDisabled={loadingResponse}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|