infinite bug

src/ui/components.py

@@ -6,13 +6,13 @@ from src.ui.styles import CSS
 
 
 def create_ui():
-    # fill_height=True заставит приложение занять весь экран по высоте
-    with gr.Blocks(theme=gr.themes.Soft(), css=CSS, fill_height=True) as demo:
+    # Базовые блоки без конфликтующих флагов высоты
+    with gr.Blocks(theme=gr.themes.Soft(), css=CSS) as demo:
         gr.HTML(f"<style>{CSS}</style>")
         gr.HTML("<script>document.title = 'Code LLM Agent';</script>")
 
         with gr.Row(elem_id="main-row", variant="panel"):
-            # Задаем ширину сайдбара через Python, чтобы Gradio корректно рассчитывал его скрытие
+            # Боковая панель
             with gr.Sidebar(elem_id="sidebar-container", width=280):
                 gr.Markdown("## 🛠️ Dashboard")
 
@@ -48,8 +48,10 @@ def create_ui():
 
             # Основная область чата
             with gr.Column(elem_id="col-chat-main"):
-                # Безопасное создание чат-бота без конфликтующих аргументов
-                chatbot = gr.Chatbot(elem_id="chatbot", show_label=False)
+                # Нативно задаем высоту чата в Python — это защищает от циклов рендеринга
+                chatbot = gr.Chatbot(
+                    elem_id="chatbot", show_label=False, height="calc(100vh - 180px)"
+                )
 
                 with gr.Row(elem_id="input-area"):
                     msg = gr.Textbox(

src/ui/styles.py

@@ -1,24 +1,16 @@
 CSS = """
-/* 1. Блокировка высоты и скролла всей страницы (как в ChatGPT) */
+/* 1. Глобальный фон страницы */
 html, body, .gradio-container {
     background-color: #212121 !important;
     margin: 0 !important;
     padding: 0 !important;
-    height: 100vh !important;
-    min-height: 100vh !important;
-    max-height: 100vh !important;
-    overflow: hidden !important; /* Убирает бесконечный скролл страницы */
 }
 
-/* 2. Главный ряд на всю высоту экрана */
+/* 2. Главный ряд */
 #main-row {
     margin: 0 !important;
     gap: 0 !important;
     background-color: #212121 !important;
-    height: 100vh !important;
-    min-height: 100vh !important;
-    max-height: 100vh !important;
-    overflow: hidden !important;
 }
 
 /* 3. Боковая панель */
@@ -26,11 +18,9 @@ html, body, .gradio-container {
     background-color: #171717 !important;
     border-right: 1px solid #2f2f2f !important;
     padding: 1.5rem 1.25rem !important;
-    height: 100vh !important;
-    overflow-y: auto !important;
 }
 
-/* Кнопка сворачивания/разворачивания сайдбара */
+/* Кнопка сворачивания/разворачивания сайдбара (круглая, всегда поверх) */
 .sidebar-parent button.toggle-button,
 .sidebar-parent > button {
     background-color: #171717 !important;
@@ -52,20 +42,14 @@ html, body, .gradio-container {
     background-color: #2f2f2f !important;
 }
 
-/* 4. Колонка чата (принудительно прижимает ввод вниз) */
+/* 4. Колонка чата */
 #col-chat-main {
     background-color: #212121 !important;
     padding: 0 !important;
     margin: 0 !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
-    display: flex !important;
-    flex-direction: column !important;
-    justify-content: space-between !important; /* Чат сверху, ввод строго снизу */
-    overflow: hidden !important;
 }
 
-/* Область сообщений занимает все свободное пространство */
+/* Стилизация компонента Chatbot */
 #chatbot {
     background-color: transparent !important;
     border: none !important;
@@ -73,17 +57,11 @@ html, body, .gradio-container {
     max-width: 800px !important;
     margin: 0 auto !important;
     width: 100% !important;
-    flex: 1 1 auto !important; /* Растягивается на максимум */
-    min-height: 0 !important;   /* Предотвращает раздувание */
-    overflow-y: auto !important; /* Скролл только внутри чата */
 }
 
 #chatbot > .wrapper {
     background: transparent !important;
     border: none !important;
-    display: flex !important;
-    flex-direction: column !important;
-    height: 100% !important;
 }
 
 /* 5. Настройки пузырей сообщений и текста */
@@ -128,15 +106,13 @@ html, body, .gradio-container {
     color: #ececec !important;
 }
 
-/* 6. Поле ввода прижатое к низу */
+/* 6. Поле ввода (ChatGPT стиль) */
 #input-area {
     max-width: 800px !important;
-    width: 100% !important;
     margin: 0 auto 1.5rem auto !important;
     padding: 0 1rem !important;
     background: transparent !important;
     border: none !important;
-    flex-shrink: 0 !important; /* Не позволяет сжимать поле ввода */
 }
 
 #input-area > div,