From 4135080b802064a0c09de4389c041141d1ece45f Mon Sep 17 00:00:00 2001
From: FanisNgv <fanisnigamad@yandex.ru>
Date: Wed, 11 Sep 2024 15:09:40 +0300
Subject: [PATCH 1/2] routing stuff

---
 frontend/src/app/components/MessageList.tsx |   2 +-
 frontend/src/app/components/Sidebar.tsx     | 132 +++++----
 frontend/src/app/page.tsx                   | 285 +-------------------
 3 files changed, 94 insertions(+), 325 deletions(-)

diff --git a/frontend/src/app/components/MessageList.tsx b/frontend/src/app/components/MessageList.tsx
index 0b19a71..99f9dcc 100644
--- a/frontend/src/app/components/MessageList.tsx
+++ b/frontend/src/app/components/MessageList.tsx
@@ -14,7 +14,7 @@ type MessageListProps = {
 
 export default function MessageList({ messages }: MessageListProps) {
     return (
-        <ScrollArea className="flex-1 p-4 overflow-y-auto bg-white">
+        <ScrollArea key={messages.length} className="flex-1 p-4 overflow-y-auto bg-white">
             <AnimatePresence>
                 {messages.map((msg) => (
                     <motion.div
diff --git a/frontend/src/app/components/Sidebar.tsx b/frontend/src/app/components/Sidebar.tsx
index 2180660..7dda7e7 100644
--- a/frontend/src/app/components/Sidebar.tsx
+++ b/frontend/src/app/components/Sidebar.tsx
@@ -1,13 +1,13 @@
-import { useRef } from 'react';
+import React, { useRef, useCallback } from 'react';
 import Link from 'next/link';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Button } from "@/components/ui/button"
 
-
 type Conversation = {
   id: number;
   name: string;
-  messages: Array<{ id: number; text: string; sender: string }>};
+  messages: Array<{ id: number; text: string; sender: string }>;
+};
 
 type SidebarProps = {
   conversations: Conversation[];
@@ -19,9 +19,79 @@ type SidebarProps = {
   onCloseSidebar: () => void;
 };
 
+type ConversationItemProps = {
+  conversation: Conversation;
+  isActive: boolean;
+  onConversationChange: (id: number) => void;
+  onDeleteConversation: (id: number) => void;
+};
+
+const ConversationItem = React.memo(({ conversation, isActive, onConversationChange, onDeleteConversation }: ConversationItemProps) => {
+  return (
+    <motion.div
+      layout
+      initial={{ opacity: 0, scale: 0.8 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.8 }}
+      transition={{ 
+        duration: 0.3, 
+        ease: "easeInOut",
+        opacity: { duration: 0.2 },
+        scale: { duration: 0.2 },
+        layout: { duration: 0.3 }
+      }}
+    >
+      <Link
+        href={`/conversations/${conversation.id}`}
+        onClick={(e) => {
+          e.preventDefault();
+          onConversationChange(conversation.id);
+        }}
+      >
+        <label
+          htmlFor={`chat-${conversation.id}`}
+          className={`flex text-base mb-4 cursor-pointer items-center justify-between gap-4 rounded-lg border p-4 text-sm font-medium shadow-sm hover:border-[#E5A7ED] ${
+            isActive
+              ? 'bg-[#D988E4] text-black'
+              : 'bg-[#E6E8EF] text-black'
+          }`}
+        >
+          <p>{conversation.name}</p>
+          <button
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onDeleteConversation(conversation.id);
+            }}
+          >
+            <svg 
+              xmlns="http://www.w3.org/2000/svg" 
+              height="24" 
+              viewBox="0 -960 960 960" 
+              width="24" 
+              fill="#898D9F"
+              className="hover:fill-[#E5A7ED]"
+            >
+              <path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/>
+            </svg>
+          </button>
+        </label>
+      </Link>
+    </motion.div>
+  );
+});
+
 export default function Sidebar({ conversations, currentConversationId, onConversationChange, onAddConversation, onDeleteConversation, isSidebarOpen, onCloseSidebar }: SidebarProps) {
   const menuRef = useRef(null);
 
+  const handleConversationChange = useCallback((id: number) => {
+    onConversationChange(id);
+  }, [onConversationChange]);
+
+  const handleDeleteConversation = useCallback((id: number) => {
+    onDeleteConversation(id);
+  }, [onDeleteConversation]);
+
   return (
     <aside
       ref={menuRef}
@@ -64,57 +134,13 @@ export default function Sidebar({ conversations, currentConversationId, onConver
           <fieldset className="space-y-4">
             <AnimatePresence mode="popLayout">
               {conversations.map((conversation) => (
-                <motion.div
+                <ConversationItem
                   key={conversation.id}
-                  layout
-                  initial={{ opacity: 0, scale: 0.8 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  exit={{ opacity: 0, scale: 0.8 }}
-                  transition={{ 
-                    duration: 0.3, 
-                    ease: "easeInOut",
-                    opacity: { duration: 0.2 },
-                    scale: { duration: 0.2 },
-                    layout: { duration: 0.3 }
-                  }}
-                >
-                  <Link
-                    href={`/${conversation.id}`}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      onConversationChange(conversation.id);
-                    }}
-                  >
-                    <label
-                      htmlFor={`chat-${conversation.id}`}
-                      className={`flex text-base mb-4 cursor-pointer items-center justify-between gap-4 rounded-lg border p-4 text-sm font-medium shadow-sm hover:border-[#E5A7ED] ${
-                        currentConversationId === conversation.id
-                        ? 'bg-[#D988E4] text-black'
-                        : 'bg-[#E6E8EF] text-black'
-                      }`}
-                    >
-                      <p>{conversation.name}</p>
-                      <button
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          onDeleteConversation(conversation.id);
-                        }}
-                      >
-                        <svg 
-                          xmlns="http://www.w3.org/2000/svg" 
-                          height="24" 
-                          viewBox="0 -960 960 960" 
-                          width="24" 
-                          fill="#898D9F"
-                          className="hover:fill-[#E5A7ED]"
-                        >
-                          <path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/>
-                        </svg>
-                      </button>
-                    </label>
-                  </Link>
-                </motion.div>
+                  conversation={conversation}
+                  isActive={currentConversationId === conversation.id}
+                  onConversationChange={handleConversationChange}
+                  onDeleteConversation={handleDeleteConversation}
+                />
               ))}
             </AnimatePresence>
           </fieldset>
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 6b4f640..0472e35 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,288 +1,31 @@
 "use client";
 
-import { useState, useEffect } from 'react';
-import { api } from '../domain/api/api';
-import Sidebar from './components/Sidebar';
-import MessageList from './components/MessageList';
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { api } from '@/domain/api/api';
 import { useConfig } from '@/domain/config/ConfigProvider';
-import { Button } from "@/components/ui/button"
-
-// Тип для хранения информации о чате
-type Conversation = {
-  id: number;
-  name: string;
-  messages: Array<{ id: number; text: string; sender: string }>;
-};
-
-// Основная функция компонента
-export default function Home({ params }: { params: { id?: string } }) {
-  // Состояния для хранения списка чатов, текущего чата и сообщений
-  const [conversations, setConversations] = useState<Conversation[]>([]);
-  const [currentConversationId, setCurrentConversationId] = useState<number | null>(null);
-  const [message, setMessage] = useState('');
-  const [messages, setMessages] = useState<Array<{ id: number; text: string; sender: string }>>([]);
-  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
+export default function Home() {
+  const router = useRouter();
   const config = useConfig();
 
-  // Инициализация пользователя
   useEffect(() => {
-    const initializeUser = async () => {
+    const redirectToConversation = async () => {
       try {
         const response = await api.get_messages__user_id_(config.ENDPOINT);
-        console.log('API response:', response);
-
-        // Если у пользователя есть чаты, то инициализируем их
         if (response.data && Array.isArray(response.data) && response.data.length > 0) {
-          const formattedConversations = response.data.map((id: number, index: number) => ({
-            id: id,
-            name: `Чат ${index + 1}`,
-            messages: []
-          }));
-
-          setConversations(formattedConversations);
-
-          const initialConversationId = params.id ? parseInt(params.id) : formattedConversations[0].id;
-          setCurrentConversationId(initialConversationId);
-
-          await loadMessagesForConversation(initialConversationId);
-
-          if (!params.id) {
-            window.history.pushState({}, '', `/${initialConversationId}`);
-          }
-        } 
-        // Если пользователь не имеет чатов, то создаем новый чат
-        else {
-          const newConversation = await handleAddConversation();
-          setConversations([newConversation]);
-          setCurrentConversationId(newConversation.id);
-
-          window.history.pushState({}, '', `/${newConversation.id}`);
+          router.push(`/conversations/${response.data[0]}`);
+        } else {
+          const newConversation = await api.createConversation(config.ENDPOINT);
+          router.push(`/conversations/${newConversation.conversation_id}`);
         }
       } catch (error) {
-        console.error('Ошибка при инициализации пользователя:', error);
+        console.error('Ошибка при перенаправлении:', error);
       }
     };
 
-    initializeUser();
-  }, [params.id]);
-
-  const handleSendMessage = async () => {
-    if (!message.trim()) return;
-
-    try {
-      if (currentConversationId === null) {
-        const newConversation = await handleAddConversation();
-        if (!newConversation) {
-          throw new Error('Не удалось создать новый чат');
-        }
-      }
-      const newMessage = {
-        id: messages.length + 1,
-        text: message,
-        sender: 'user'
-      };
-
-      const conversationIdAtSend = currentConversationId;
-
-      setMessages(prevMessages => [...prevMessages, newMessage]);
-      setConversations(prevConversations =>
-        prevConversations.map(conversation =>
-          conversation.id === conversationIdAtSend
-            ? { ...conversation, messages: [...conversation.messages, newMessage] }
-            : conversation
-        )
-      );
-
-      const response = await api.sendMessage(config.ENDPOINT, conversationIdAtSend!, message);
-
-      if (!response.task_id) {
-        throw new Error('Ошибка при отправке сообщения');
-      }
-
-      console.log('Сообщение успешно отправлено, task_id:', response.task_id);
-      setMessage('');
-
-      let botResponse;
-      do {
-        await new Promise(resolve => setTimeout(resolve, 1000));
-        botResponse = await api.checkTaskResult(config.ENDPOINT, response.task_id);
-      } while (!botResponse.ready);
-
-      if (botResponse.successful && botResponse.value) {
-        const botMessage = {
-          id: messages.length + 2,
-          text: botResponse.value.answer,
-          sender: 'bot'
-        };
-
-        setMessages(prevMessages => [...prevMessages, botMessage]);
-        setConversations(prevConversations =>
-          prevConversations.map(conversation =>
-            conversation.id === currentConversationId
-              ? { ...conversation, messages: [...conversation.messages, botMessage] }
-              : conversation
-          )
-        );
-      }
-
-    } catch (error) {
-      console.error('Произошла ошибка:', error);
-      setMessage('');
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      handleSendMessage();
-    }
-  };
-
-  const handleChatChange = async (id: number) => {
-    const selectedConversation = conversations.find(conversation => conversation.id === id);
-    if (selectedConversation) {
-      setCurrentConversationId(selectedConversation.id);
-      if (selectedConversation.messages.length === 0) {
-        await loadMessagesForConversation(selectedConversation.id);
-      } else {
-        setMessages(selectedConversation.messages);
-      }
-      window.history.pushState({}, '', `/${id}`);
-    }
-  };
-
-  const handleAddConversation = async () => {
-    try {
-      const response = await api.createConversation(config.ENDPOINT);
-      if (response.conversation_id) {
-        const maxChatNumber = Math.max(...conversations.map(conv => {
-          const match = conv.name.match(/Чат (\d+)/);
-          return match ? parseInt(match[1]) : 0;
-        }), 0);
-        
-        const newChatNumber = maxChatNumber + 1;
-        
-        const newConversation = {
-          id: response.conversation_id,
-          name: `Чат ${newChatNumber}`,
-          messages: []
-        };
-
-        setConversations(prevConversations => [...prevConversations, newConversation]);
-        setCurrentConversationId(newConversation.id);
-        setMessages([]);
-        return newConversation;
-      } else {
-        throw new Error('Не удалось создать новый чат');
-      }
-    } catch (error) {
-      console.error('Ошибка при создании чата:', error);
-      throw error;
-    }
-  };
-
-  const handleDeleteConversation = async (conversationId: number) => {
-    try {
-      await api.deleteConversation(config.ENDPOINT, conversationId);
-
-      setConversations(prevConversations => {
-        const updatedConversations = prevConversations.filter(conversation => conversation.id !== conversationId);
-        if (updatedConversations.length === 0) {
-          setCurrentConversationId(null);
-          setMessages([]);
-        } else if (currentConversationId === conversationId) {
-          const newCurrentConversation = updatedConversations[0];
-          setCurrentConversationId(newCurrentConversation.id);
-          setMessages(newCurrentConversation.messages);
-        }
-        return updatedConversations;
-      });
-      console.log('Чат успешно удален');
-    } catch (error) {
-      console.error('Ошибка при удалении чата:', error);
-    }
-  };
-
-  const loadMessagesForConversation = async (conversationId: number) => {
-    try {
-      const response = await api.getMessages(config.ENDPOINT, conversationId);
-      if (response && response.length > 0 && response[0].messages && response[0].messages.length > 0) {
-        const conversationMessages = response[0].messages[0][conversationId];
-        if (conversationMessages && Array.isArray(conversationMessages)) {
-          const formattedMessages = conversationMessages.map((msg: any) => ({
-            id: msg.id,
-            text: msg.text,
-            sender: msg.role === 1 ? 'bot' : 'user'
-          }));
-          setMessages(formattedMessages);
-          setConversations(prevConversations =>
-            prevConversations.map(conv =>
-              conv.id === conversationId ? { ...conv, messages: formattedMessages } : conv
-            )
-          );
-        } else {
-          setMessages([]);
-        }
-      } else {
-        setMessages([]);
-      }
-    } catch (error) {
-      console.error('Ошибка при загрузке сообщений:', error);
-    }
-  };
-
-  return (
-    <div className="min-h-screen relative overflow-hidden hide-scrollbar">
-      <header className="md:hidden fixed top-0 left-0 right-0 z-50 bg-[#17153B] p-4 flex justify-between items-center">
-        {isSidebarOpen && (
-          <button
-            onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-            className="text-white focus:outline-none"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-            </svg>
-          </button>
-        )}
-      </header>
-
-      <main className="flex h-screen pt-16 md:pt-0">
-        <div className="fixed left-0 top-0 h-full md:relative">
-          <Sidebar
-            conversations={conversations}
-            currentConversationId={currentConversationId}
-            onConversationChange={handleChatChange}
-            onAddConversation={handleAddConversation}
-            onDeleteConversation={(id) => handleDeleteConversation(id)}
-            isSidebarOpen={isSidebarOpen}
-            onCloseSidebar={() => setIsSidebarOpen(false)}
-          />
-        </div>
-
-        <div className="flex-1 flex flex-col h-screen ml-[300px] md:ml-0">
-          <MessageList messages={messages} />
+    redirectToConversation();
+  }, [router, config.ENDPOINT]);
 
-          <div className="p-4 bg-white">
-            <div className="flex items-stretch">
-              <input
-                type="text"
-                value={message}
-                onChange={(e) => setMessage(e.target.value)}
-                onKeyDown={handleKeyDown}
-                placeholder="Введите ваш вопрос"
-                className="flex-grow p-2 bg-[#EFF0F3] border border-gray-300 rounded-l-2xl focus:outline-none h-full"
-                style={{ color: 'black' }}
-              />
-              <Button
-                onClick={handleSendMessage}
-                className="rounded-r-2xl rounded-l-none bg-[#1D1F27] focus:outline-none cursor-pointer hover:bg-[#606371] border-l-0 h-full"
-              >
-                Отправить
-              </Button>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
+  return null; // или можно вернуть компонент загрузки
 }
\ No newline at end of file

From 6a7fe94b93c05370ab744cb8f33ddfbd4efa9be4 Mon Sep 17 00:00:00 2001
From: FanisNgv <fanisnigamad@yandex.ru>
Date: Wed, 11 Sep 2024 15:14:31 +0300
Subject: [PATCH 2/2] conversations[id]

---
 frontend/src/app/conversations/[id]/page.tsx | 285 +++++++++++++++++++
 1 file changed, 285 insertions(+)
 create mode 100644 frontend/src/app/conversations/[id]/page.tsx

diff --git a/frontend/src/app/conversations/[id]/page.tsx b/frontend/src/app/conversations/[id]/page.tsx
new file mode 100644
index 0000000..6712d0f
--- /dev/null
+++ b/frontend/src/app/conversations/[id]/page.tsx
@@ -0,0 +1,285 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import { api } from '@/domain/api/api';
+import Sidebar from '../../components/Sidebar';
+import MessageList from '../../components/MessageList';
+import { useConfig } from '@/domain/config/ConfigProvider';
+import { Button } from "@/components/ui/button"
+import { useRouter } from 'next/navigation';
+
+// Тип для хранения информации о чате
+type Conversation = {
+  id: number;
+  name: string;
+  messages: Array<{ id: number; text: string; sender: string }>;
+};
+
+// Основная функция компонента
+export default function ConversationPage({ params }: { params: { id: string } }) {
+  // Состояния для хранения списка чатов, текущего чата и сообщений
+  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [currentConversationId, setCurrentConversationId] = useState<number | null>(null);
+  const [message, setMessage] = useState('');
+  const [messages, setMessages] = useState<Array<{ id: number; text: string; sender: string }>>([]);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  const config = useConfig();
+  const router = useRouter();
+
+  // Инициализация пользователя
+  useEffect(() => {
+    const initializeUser = async () => {
+      try {
+        const response = await api.get_messages__user_id_(config.ENDPOINT);
+        console.log('API response:', response);
+
+        if (response.data && Array.isArray(response.data) && response.data.length > 0) {
+          const formattedConversations = response.data.map((id: number, index: number) => ({
+            id: id,
+            name: `Чат ${index + 1}`,
+            messages: []
+          }));
+
+          setConversations(formattedConversations);
+
+          const initialConversationId = parseInt(params.id);
+          setCurrentConversationId(initialConversationId);
+
+          await loadMessagesForConversation(initialConversationId);
+        } else {
+          const newConversation = await handleAddConversation();
+          setConversations([newConversation]);
+          setCurrentConversationId(newConversation.id);
+          router.push(`/conversations/${newConversation.id}`);
+        }
+      } catch (error) {
+        console.error('Ошибка при инициализации пользователя:', error);
+      }
+    };
+
+    initializeUser();
+  }, [params.id, config.ENDPOINT, router]);
+
+  useEffect(() => {
+    const loadData = async () => {
+      if (currentConversationId) {
+        await loadMessagesForConversation(currentConversationId);
+      }
+    };
+
+    loadData();
+  }, [currentConversationId, config.ENDPOINT]);
+
+  const handleSendMessage = async () => {
+    if (!message.trim()) return;
+
+    try {
+      if (currentConversationId === null) {
+        const newConversation = await handleAddConversation();
+        if (!newConversation) {
+          throw new Error('Не удалось создать новый чат');
+        }
+      }
+      const newMessage = {
+        id: messages.length + 1,
+        text: message,
+        sender: 'user'
+      };
+
+      const conversationIdAtSend = currentConversationId;
+
+      setMessages(prevMessages => [...prevMessages, newMessage]);
+      setConversations(prevConversations =>
+        prevConversations.map(conversation =>
+          conversation.id === conversationIdAtSend
+            ? { ...conversation, messages: [...conversation.messages, newMessage] }
+            : conversation
+        )
+      );
+
+      const response = await api.sendMessage(config.ENDPOINT, conversationIdAtSend!, message);
+
+      if (!response.task_id) {
+        throw new Error('Ошибка при отправке сообщения');
+      }
+
+      console.log('Сообщение успешно отправлено, task_id:', response.task_id);
+      setMessage('');
+
+      let botResponse;
+      do {
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        botResponse = await api.checkTaskResult(config.ENDPOINT, response.task_id);
+      } while (!botResponse.ready);
+
+      if (botResponse.successful && botResponse.value) {
+        const botMessage = {
+          id: messages.length + 2,
+          text: botResponse.value.answer,
+          sender: 'bot'
+        };
+
+        setMessages(prevMessages => [...prevMessages, botMessage]);
+        setConversations(prevConversations =>
+          prevConversations.map(conversation =>
+            conversation.id === currentConversationId
+              ? { ...conversation, messages: [...conversation.messages, botMessage] }
+              : conversation
+          )
+        );
+      }
+
+    } catch (error) {
+      console.error('Произошла ошибка:', error);
+      setMessage('');
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleSendMessage();
+    }
+  };
+
+  const handleChatChange = async (id: number) => {
+    setCurrentConversationId(id);
+    await loadMessagesForConversation(id);
+    router.push(`/conversations/${id}`);
+  };
+
+  const handleAddConversation = async () => {
+    try {
+      const response = await api.createConversation(config.ENDPOINT);
+      if (response.conversation_id) {
+        const maxChatNumber = Math.max(...conversations.map(conv => {
+          const match = conv.name.match(/Чат (\d+)/);
+          return match ? parseInt(match[1]) : 0;
+        }), 0);
+
+        const newChatNumber = maxChatNumber + 1;
+
+        const newConversation = {
+          id: response.conversation_id,
+          name: `Чат ${newChatNumber}`,
+          messages: []
+        };
+
+        setConversations(prevConversations => [...prevConversations, newConversation]);
+        setCurrentConversationId(newConversation.id);
+        setMessages([]);
+        return newConversation;
+      } else {
+        throw new Error('Не удалось создать новый чат');
+      }
+    } catch (error) {
+      console.error('Ошибка при создании чата:', error);
+      throw error;
+    }
+  };
+
+  const handleDeleteConversation = async (conversationId: number) => {
+    try {
+      await api.deleteConversation(config.ENDPOINT, conversationId);
+
+      setConversations(prevConversations => {
+        const updatedConversations = prevConversations.filter(conversation => conversation.id !== conversationId);
+        if (updatedConversations.length === 0) {
+          setCurrentConversationId(null);
+          setMessages([]);
+        } else if (currentConversationId === conversationId) {
+          const newCurrentConversation = updatedConversations[0];
+          setCurrentConversationId(newCurrentConversation.id);
+          setMessages(newCurrentConversation.messages);
+        }
+        return updatedConversations;
+      });
+      console.log('Чат успешно удален');
+    } catch (error) {
+      console.error('Ошибка при удалении чата:', error);
+    }
+  };
+
+  const loadMessagesForConversation = async (conversationId: number) => {
+    try {
+      const response = await api.getMessages(config.ENDPOINT, conversationId);
+      if (response && response.length > 0 && response[0].messages && response[0].messages.length > 0) {
+        const conversationMessages = response[0].messages[0][conversationId];
+        if (conversationMessages && Array.isArray(conversationMessages)) {
+          const formattedMessages = conversationMessages.map((msg: any) => ({
+            id: msg.id,
+            text: msg.text,
+            sender: msg.role === 1 ? 'bot' : 'user'
+          }));
+          setMessages(formattedMessages);
+          setConversations(prevConversations =>
+            prevConversations.map(conv =>
+              conv.id === conversationId ? { ...conv, messages: formattedMessages } : conv
+            )
+          );
+        } else {
+          setMessages([]);
+        }
+      } else {
+        setMessages([]);
+      }
+    } catch (error) {
+      console.error('Ошибка при загрузке сообщений:', error);
+    }
+  };
+
+  return (
+    <div className="min-h-screen relative overflow-hidden hide-scrollbar">
+      <header className="md:hidden fixed top-0 left-0 right-0 z-50 bg-[#17153B] p-4 flex justify-between items-center">
+        {isSidebarOpen && (
+          <button
+            onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+            className="text-white focus:outline-none"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+        )}
+      </header>
+
+      <main className="flex h-screen pt-16 md:pt-0">
+        <div className="fixed left-0 top-0 h-full md:relative">
+          <Sidebar
+            conversations={conversations}
+            currentConversationId={currentConversationId}
+            onConversationChange={handleChatChange}
+            onAddConversation={handleAddConversation}
+            onDeleteConversation={(id) => handleDeleteConversation(id)}
+            isSidebarOpen={isSidebarOpen}
+            onCloseSidebar={() => setIsSidebarOpen(false)}
+          />
+        </div>
+
+        <div className="flex-1 flex flex-col h-screen ml-[300px] md:ml-0">
+          <MessageList messages={messages} />
+
+          <div className="p-4 bg-white">
+            <div className="flex items-stretch">
+              <input
+                type="text"
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="Введите ваш вопрос"
+                className="flex-grow p-2 bg-[#EFF0F3] border border-gray-300 rounded-l-2xl focus:outline-none h-full"
+                style={{ color: 'black' }}
+              />
+              <Button
+                onClick={handleSendMessage}
+                className="rounded-r-2xl rounded-l-none bg-[#1D1F27] focus:outline-none cursor-pointer hover:bg-[#606371] border-l-0 h-full"
+              >
+                Отправить
+              </Button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}