chat-proxy/frontend/src/App.jsx

//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, clearSessionId, setSessionId } from "./useSessionId";
import SessionEditor from "./SessionEditor";
import "katex/dist/katex.min.css";

export default function App() {
  const { messages, loading, sendMessage, stopGenerating, setMessages } = useChatStream();
  const [themeName, setThemeName] = useState("light");
  const [sessionName, setSessionName] = useState("");
  const [sessionModelName, setSessionModelName] = useState("");
  const theme = themes[themeName];
  const userId = getUserId();
  const sessionId = getSessionId();
  const [showEditor, setShowEditor] = useState(false);
  const [editorMode, setEditorMode] = useState("create");

  useEffect(() => {
    const saved = localStorage.getItem("preferredTheme");
    if (saved && themes[saved]) setThemeName(saved);
  }, []);

  useEffect(() => {
    localStorage.setItem("preferredTheme", themeName);
  }, [themeName]);

  useEffect(() => {
    if (!sessionId) {
      setSessionName("");
      setSessionModelName("");
      return;
    }
    (async () => {
      try {
        const res = await fetch(`/v1/sessions/${sessionId}?user_id=${userId}`);
        if (res.ok) {
          const meta = await res.json();
          setSessionName(meta.session_name || "");
          setSessionModelName(meta.model_name || "");
        }
      } catch (err) {
        console.error("Errore nel recupero sessione", err);
        setSessionName("");
        setSessionModelName("");
      }
    })();
  }, [sessionId, userId]);

  const toggleTheme = () => setThemeName(t => (t === "light" ? "dark" : "light"));

  const reloadHistory = async (id = sessionId) => {
    const res = await fetch(`/v1/history?user_id=${userId}&session_id=${id}`);
    const history = await res.json();
    setMessages(history);
  };

  const freshStart = async () => {
    await fetch(`/v1/history?user_id=${userId}&session_id=${sessionId}`, { method: "DELETE" });
    setMessages([]);
    clearSessionId();
    setSessionName("");
    setSessionModelName("");
  };

  const createSession = () => {
    setEditorMode("create");
    setShowEditor(true);
  };

  const editSession = () => {
    setEditorMode("edit");
    setShowEditor(true);
  };

  const handleEditorConfirm = async ({ session_name, model_name }) => {
    if (editorMode === "create") {
      const res = await fetch(`/v1/sessions?user_id=${userId}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ first_message: session_name, model_name })
      });
      const meta = await res.json();
      setSessionId(meta.session_id);
      setSessionName(meta.session_name || "");
      setSessionModelName(meta.model_name || "");
      setMessages([]);
    } else {
      await fetch(`/v1/sessions/${sessionId}?user_id=${userId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ session_name, model_name })
      });
      setSessionName(session_name);
      setSessionModelName(model_name || "");
    }
    setShowEditor(false);
  };

  const handleSelectSession = async (selectedId) => {
    setSessionId(selectedId);
    await reloadHistory(selectedId);
  };

  return (
    <>
      <ChatLayout
        theme={theme}
        messages={messages}
        loading={loading}
        onSend={sendMessage}
        onStop={stopGenerating}
        onToggleTheme={toggleTheme}
        onReloadHistory={() => reloadHistory()}
        onFreshStart={freshStart}
        onCreateSession={createSession}
        onEditSession={editSession}
        onSelectSession={handleSelectSession}
        userId={userId}
        sessionId={sessionId}
        sessionModelName={sessionModelName}
        sessionName={sessionName}
      />

      {showEditor && (
        <div className="modal-backdrop fade show"></div>
      )}
      {showEditor && (
        <SessionEditor
          mode={editorMode}
          initialName={sessionName}
          initialModel={sessionModelName}
          onConfirm={handleEditorConfirm}
          onCancel={() => setShowEditor(false)}
        />
      )}
    </>
  );
}