frontend/backend connection

src/App.tsx

@@ -1,8 +1,6 @@
-// In App.tsx
-import React, { lazy, Suspense, useEffect } from "react";
+import React, { Suspense, useEffect } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import NotFoundPage from "./pages/NotFoundPage";
-import Sidebar from "./components/Sidebar/Sidebar";
 import Messenger from "./pages/Messenger/Messenger";
 
 function App() {
@@ -41,9 +39,8 @@ function App() {
           }
         >
           <Routes>
-            <Route path={"sidebar"} element={<Sidebar />} />
             <Route path={"/"} element={<Messenger />} />
-            <Route path={"/chats/:chatId"} element={<Messenger />} />
+            <Route path={"/chats/id=:chatId"} element={<Messenger />} />
             <Route path={"*"} element={<NotFoundPage />} />
           </Routes>
         </Suspense>

src/components/Chat/Chat.tsx

@@ -37,7 +37,7 @@ function Chat({ openFileViewer }: Readonly<ChatProps>) {
           const response = await fetch("/new_chat", { method: "POST" });
           if (response.ok) {
             const data = await response.json();
-            navigate(`/chats/${data.chatId}`, { replace: true });
+            navigate(`/chats/id=${data.chat_id}`, { replace: true });
           }
         } catch (error) {
           console.error("Failed to create a new chat:", error);
@@ -48,16 +48,20 @@ function Chat({ openFileViewer }: Readonly<ChatProps>) {
   }, [chat_id, navigate]);
 
   useEffect(() => {
+    console.log(`Fetching history for chatId: ${chat_id}`);
     if (chat_id) {
       const fetchChatHistory = async () => {
         try {
-          const response = await fetch(`/api/chats/${chat_id}`);
+          const response = await fetch(`/chats/id=${chat_id}`);
           if (response.ok) {
             const data = await response.json();
+            console.log(`Fetched messages for ${chat_id}:`, data.messages);
             setMessages(data.messages || []);
+          } else {
+            console.error(`Fetch failed with status: ${response.status}`);
           }
         } catch (error) {
-          console.error("Failed to fetch chat history:", error);
+          console.error("Fetch error:", error);
         }
       };
       fetchChatHistory();

src/components/Sidebar/Sidebar.tsx

@@ -7,53 +7,58 @@ import ThemeSwitcher from "../ThemeSwitcher/ThemeSwitcher";
 import { useNavigate } from "react-router-dom";
 
 interface ChatButton {
+  id: string;
   title: string;
 }
 
-interface ChatGroup {
-  title: string;
-  chats: ChatButton[];
-}
-
 function Sidebar() {
   const [isSearchExpanded, setIsSearchExpanded] = useState(false);
+  const navigate = useNavigate();
   const handleSearchToggle = (expanded: boolean) => {
     setIsSearchExpanded(expanded);
   };
-  const [chatGroups, setChatGroups] = useState<ChatGroup[]>([]);
+
   const [chats, setChats] = useState<ChatButton[]>([]);
-  const navigate = useNavigate();
-  const baseButtonHeight = "40px"; // Базовая высота кнопки
+  const baseButtonHeight = "40px";
 
   useEffect(() => {
-    const fetchChatGroups = async () => {
-      const response = await fetch("/api/user_chats");
-      if (response.ok) {
-        const data = await response.json();
-        setChatGroups(data);
-      } else {
-        console.error("Failed to fetch chats groups");
+    const fetchChats = async () => {
+      const response = await fetch("/list_chats");
+      if (!response.ok) {
+        throw new Error(`Error, status: ${response.status}`);
+      }
+      const data = await response.json();
+      if (data.chats) {
+        setChats(data.chats);
       }
     };
 
-    fetchChatGroups();
+    fetchChats();
   }, []);
 
-  const refetchChats = async () => {
-    const response = await fetch("/api/user_chats");
-    if (response.ok) {
-      const data = await response.json();
-      setChatGroups(data);
-    }
-  };
-
   const handleAddChat = async () => {
-    const response = await fetch("/new_chat", { method: "POST" });
-    if (response.ok) {
-      const data = await response.json();
-      navigate(`/chats/${data.chat_id}`);
-      refetchChats();
+    const response = await fetch("/new_chat", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ title: "New chat" }),
+    });
+
+    if (!response.ok) {
+      console.error(`New chat failed: ${response.status}`);
+      return;
     }
+    const data = await response.json();
+    navigate(`/chats/id=${data.chat_id}`);
+
+    const fetchChats = async () => {
+      const res = await fetch("/list_chats");
+      if (res.ok) {
+        const chatData = await res.json();
+        console.log("Updated chats:", chatData.chats);
+        setChats(chatData.chats || []);
+      }
+    };
+    fetchChats();
   };
 
   const handleSearchSubmit = (query: string) => {
@@ -70,12 +75,13 @@ function Sidebar() {
           }
         >
           <Button
-            children={"+ Add chat"}
             height={baseButtonHeight}
             width="100%"
             borderRadius="round"
             onClick={handleAddChat}
-          />
+          >
+            + Add chat
+          </Button>
         </div>
         <nav className={styles.searchButton}>
           <SearchButton
@@ -87,7 +93,7 @@ function Sidebar() {
       </div>
       <div className={styles.chatsContainer}>
         {chats.map((chat, index) => (
-          <SideBarChatButton key={index} label={chat.title} />
+          <SideBarChatButton key={index} chatId={chat.id} title={chat.title} />
         ))}
       </div>
 

src/components/buttons/SideBarChatButton/SideBarChatButton.tsx

@@ -4,8 +4,8 @@ import styles from "./SideBarChatButton.module.css";
 import Text from "../../Text/Text";
 
 interface ChatButtonProps {
-  label: string;
-  key: number;
+  title: string;
+  chatId: string;
 }
 
 function SideBarChatButton(props: Readonly<ChatButtonProps>) {
@@ -13,8 +13,7 @@ function SideBarChatButton(props: Readonly<ChatButtonProps>) {
   const [isActive, setIsActive] = useState(false);
 
   const handleClick = () => {
-    navigate(`/chat/${props.key}`);
-    setIsActive(true);
+    navigate(`/chats/id=${props.chatId}`);
   };
 
   const handleMouseDown = () => {
@@ -30,8 +29,14 @@ function SideBarChatButton(props: Readonly<ChatButtonProps>) {
   };
 
   return (
-    <button className={styles.chatButton}>
-      <Text colorVariant={isActive ? "button" : "primary"}>{props.label}</Text>
+    <button
+      className={styles.chatButton}
+      onClick={handleClick}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseLeave}
+    >
+      <Text colorVariant={isActive ? "button" : "primary"}>{props.title}</Text>
     </button>
   );
 }

src/pages/Messenger/Messenger.tsx

@@ -1,19 +1,21 @@
 import Chat from "../../components/Chat/Chat";
 import Sidebar from "../../components/Sidebar/Sidebar";
 import styles from "./Messenger.module.css";
-
+import { useParams } from "react-router-dom";
 
 function Messenger() {
+  const { chatId } = useParams();
+
   return (
     <body className={styles.messenger}>
-        <aside className={styles.sidebar}>
-            <Sidebar/>
-        </aside>
-        <div className={styles.chatContainer}>
-            <Chat/>
-        </div>
+      <aside className={styles.sidebar}>
+        <Sidebar />
+      </aside>
+      <div className={styles.chatContainer}>
+        <Chat key={chatId ?? "default"} />
+      </div>
     </body>
   );
 }
 
-export default Messenger;
+export default Messenger;

vite.config.ts

@@ -23,6 +23,14 @@ export default defineConfig({
         target: "http://127.0.0.1:5050",
         changeOrigin: true,
       },
+      "/new_chat": {
+        target: "http://127.0.0.1:5050",
+        changeOrigin: true,
+      },
+      "/chats/": {
+        target: "http://127.0.0.1:5050",
+        changeOrigin: true,
+      },
     },
   },
 });