Spaces:
Runtime error
Runtime error
File size: 2,810 Bytes
0971cc4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
"use client";
import React from "react";
import { ChatRequestOptions } from "ai";
import { useChat } from "ai/react";
import { toast } from "sonner";
import useLocalStorageState from "use-local-storage-state";
import { v4 as uuidv4 } from "uuid";
import { ChatLayout } from "@/components/chat/chat-layout";
import { ChatOptions } from "@/components/chat/chat-options";
import { basePath } from "@/lib/utils";
interface ChatPageProps {
chatId: string;
setChatId: React.Dispatch<React.SetStateAction<string>>;
}
export default function ChatPage({ chatId, setChatId }: ChatPageProps) {
const {
messages,
input,
handleInputChange,
handleSubmit,
isLoading,
error,
stop,
setMessages,
} = useChat({
api: basePath + "/api/chat",
streamMode: "text",
onError: (error) => {
toast.error("Something went wrong: " + error);
},
});
const [chatOptions, setChatOptions] = useLocalStorageState<ChatOptions>(
"chatOptions",
{
defaultValue: {
selectedModel: "",
systemPrompt: "",
temperature: 0.9,
},
}
);
React.useEffect(() => {
if (chatId) {
const item = localStorage.getItem(`chat_${chatId}`);
if (item) {
setMessages(JSON.parse(item));
}
} else {
setMessages([]);
}
}, [setMessages, chatId]);
React.useEffect(() => {
if (!isLoading && !error && chatId && messages.length > 0) {
// Save messages to local storage
localStorage.setItem(`chat_${chatId}`, JSON.stringify(messages));
// Trigger the storage event to update the sidebar component
window.dispatchEvent(new Event("storage"));
}
}, [messages, chatId, isLoading, error]);
const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (messages.length === 0) {
// Generate a random id for the chat
const id = uuidv4();
setChatId(id);
}
setMessages([...messages]);
// Prepare the options object with additional body data, to pass the model.
const requestOptions: ChatRequestOptions = {
options: {
body: {
chatOptions: chatOptions,
},
},
};
// Call the handleSubmit function with the options
handleSubmit(e, requestOptions);
};
return (
<main className="flex h-[calc(100dvh)] flex-col items-center ">
<ChatLayout
chatId={chatId}
setChatId={setChatId}
chatOptions={chatOptions}
setChatOptions={setChatOptions}
messages={messages}
input={input}
handleInputChange={handleInputChange}
handleSubmit={onSubmit}
isLoading={isLoading}
error={error}
stop={stop}
navCollapsedSize={10}
defaultLayout={[30, 160]}
/>
</main>
);
}
|