import { Chat } from "@/components/Chat/Chat"; import { Sidebar } from "@/components/Sidebar/Sidebar"; import { Message, OpenAIModel } from "@/types"; import Head from "next/head"; import { useEffect, useState } from "react"; export default function Home() { const [messages, setMessages] = useState([]); const [loading, setLoading] = useState(false); const [model, setModel] = useState(OpenAIModel.GPT_3_5); const [lightMode, setLightMode] = useState<"dark" | "light">("dark"); const handleSend = async (message: Message) => { const updatedMessages = [...messages, message]; setMessages(updatedMessages); setLoading(true); const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ model, messages: updatedMessages }) }); if (!response.ok) { setLoading(false); throw new Error(response.statusText); } const data = response.body; if (!data) { return; } setLoading(false); const reader = data.getReader(); const decoder = new TextDecoder(); let done = false; let isFirst = true; while (!done) { const { value, done: doneReading } = await reader.read(); done = doneReading; const chunkValue = decoder.decode(value); if (isFirst) { isFirst = false; setMessages((messages) => [ ...messages, { role: "assistant", content: chunkValue } ]); } else { setMessages((messages) => { const lastMessage = messages[messages.length - 1]; const updatedMessage = { ...lastMessage, content: lastMessage.content + chunkValue }; return [...messages.slice(0, -1), updatedMessage]; }); } } }; useEffect(() => {}, []); return ( <> Chatbot UI
); }