Samuele E. Locatelli
59 lines
1.6 KiB
React
59 lines
1.6 KiB
React
//App.jsx
|
|
import React, { useState, useEffect } from "react";
|
|
import "./App.css";
|
|
import { themes } from "./themes";
|
|
import ChatLayout from "./ChatLayout";
|
|
import { useChatStream } from "./useChatStream";
|
|
import { getSessionId, getUserId, resetSessionId } from "./useSessionId";
|
|
|
|
export default function App() {
|
|
const { messages, loading, sendMessage, stopGenerating, setMessages } = useChatStream();
|
|
const [themeName, setThemeName] = useState("light");
|
|
const theme = themes[themeName];
|
|
const sessionId = getSessionId();
|
|
const userId = getUserId();
|
|
|
|
useEffect(() => {
|
|
const saved = localStorage.getItem("preferredTheme");
|
|
if (saved && themes[saved]) setThemeName(saved);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem("preferredTheme", themeName);
|
|
}, [themeName]);
|
|
|
|
const toggleTheme = () => {
|
|
setThemeName((t) => (t === "light" ? "dark" : "light"));
|
|
};
|
|
|
|
const reloadHistory = async () => {
|
|
const res = await fetch(`/api/history?user_id=${userId}&session_id=${sessionId}`);
|
|
const history = await res.json();
|
|
setMessages(history); // from useChatStream
|
|
};
|
|
|
|
const freshStart = async () => {
|
|
await fetch(`/api/v1/history?user_id=${userId}&session_id=${sessionId}`, { method: "DELETE" });
|
|
setMessages([]);
|
|
resetSessionId();
|
|
// or start a brand new sessionId:
|
|
//localStorage.removeItem("sessionId");
|
|
//window.location.reload();
|
|
};
|
|
|
|
return (
|
|
<ChatLayout
|
|
theme={theme}
|
|
messages={messages}
|
|
loading={loading}
|
|
onSend={sendMessage}
|
|
onStop={stopGenerating}
|
|
onToggleTheme={toggleTheme}
|
|
onReloadHistory={reloadHistory}
|
|
onFreshStart={freshStart}
|
|
/>
|
|
);
|
|
}
|
|
|
|
|