Update ui.py

ui.py

@@ -1,85 +1,76 @@
-import traceback
+--- START OF FILE ui.py ---
 
+import traceback
 import gradio as gr
-
 import config
 from model import engine
 from utils import get_clean_text
 
-# --- CSS стили ---
 CUSTOM_CSS = """
-/* Глобальные настройки контейнера на весь экран */
+/* 1. Глобальный сброс отступов и фиксация высоты */
 .gradio-container {
-    max-width: 100% !important;
     width: 100% !important;
     height: 100vh !important;
-    padding: 0 !important;
     margin: 0 !important;
+    padding: 0 !important;
     overflow: hidden !important;
 }
 
-/* Настройки боковой панели */
+/* 2. Сайдбар тоже на всю высоту */
 .sidebar {
     height: 100vh !important;
-    overflow-y: auto !important;
-    width: 300px !important; /* Фиксируем ширину сайдбара, чтобы не съедал место */
-}
-
-/*
-   ГЛАВНОЕ: Убираем ограничение ширины текста.
-   По умолчанию Gradio сужает текст для "читаемости",
-   но для кода это вредно.
-*/
-.prose {
-    max-width: 100% !important;
-    width: 100% !important;
+    border-right: 1px solid var(--border-color-primary) !important;
 }
 
-.message {
-    max-width: 100% !important;
-    width: 100% !important;
-}
-
-.message-wrap {
-    max-width: 100% !important;
+/* 3. Главная колонка с чатом - превращаем во flex-контейнер */
+.main-chat-col {
+    height: 100vh !important;
+    display: flex !important;
+    flex-direction: column !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    border: none !important;
 }
 
-/* Настройки окна чата */
+/* 4. Окно чата: растягивается (flex-grow: 1) на всё доступное место */
 #chatbot {
-    height: 82vh !important; /* Увеличили высоту */
-    min-height: 82vh !important;
-    overflow-y: auto !important;
-    margin-bottom: 0 !important;
     flex-grow: 1 !important;
+    height: auto !important;     /* Сбрасываем фиксированную высоту */
+    min-height: 0 !important;    /* Разрешаем сжиматься, если нужно */
+    overflow-y: auto !important; /* Скролл внутри чата */
+    margin-bottom: 0 !important;
+    border: none !important;
+    border-radius: 0 !important;
 }
 
-/* Блок ввода прижимаем к низу */
+/* 5. Полоса ввода: фиксирована внизу */
 .input-row {
-    padding: 10px 15px !important;
-    background: var(--background-fill-primary);
+    flex-shrink: 0 !important; /* Не сжимать */
+    padding: 15px !important;
+    background: var(--background-fill-secondary); /* Цвет фона под вводом */
     border-top: 1px solid var(--border-color-primary);
+    z-index: 100;
 }
 
+/* Доп. стили для ширины сообщений */
+.message { width: 100% !important; max-width: 100% !important; }
+.message-wrap { max-width: 100% !important; }
 footer { display: none !important; }
 """
 
 
 # --- Логика событий ---
 
-
 def user_input(user_message, history):
     if not user_message:
         return None, history
-
     if history is None:
         history = []
 
     clean_history = []
     for msg in history:
-        # Чистим контент перед добавлением в историю
         raw_content = msg.get("content", "")
         text_content = get_clean_text(raw_content)
-
         clean_history.append({"role": msg["role"], "content": text_content})
 
     clean_history.append({"role": "user", "content": str(user_message)})
@@ -93,13 +84,11 @@ def bot_response(history, system_prompt, temperature, max_tokens):
         return
 
     messages = [{"role": "system", "content": system_prompt}]
-
     relevant_history = history[-15:] if len(history) > 15 else history
 
     for msg in relevant_history:
         raw_content = msg.get("content", "")
         text_content = get_clean_text(raw_content)
-
         messages.append({"role": msg["role"], "content": text_content})
 
     history.append({"role": "assistant", "content": ""})
@@ -111,7 +100,6 @@ def bot_response(history, system_prompt, temperature, max_tokens):
             temperature=temperature,
             stream=True,
         )
-
         partial_text = ""
         for chunk in stream:
             delta = chunk["choices"][0]["delta"]
@@ -119,7 +107,6 @@ def bot_response(history, system_prompt, temperature, max_tokens):
                 partial_text += delta["content"]
                 history[-1]["content"] = partial_text
                 yield history
-
     except Exception as e:
         traceback.print_exc()
         history[-1]["content"] = partial_text + f"\n\n❌ **Error:** {str(e)}"
@@ -128,78 +115,67 @@ def bot_response(history, system_prompt, temperature, max_tokens):
 
 def set_interactive(is_interactive):
     return (
-        gr.update(
-            interactive=is_interactive,
-            placeholder="Wait..." if not is_interactive else "Type code question...",
-        ),
+        gr.update(interactive=is_interactive, placeholder="Wait..." if not is_interactive else "Type code question..."),
         gr.update(interactive=is_interactive),
     )
 
 
 # --- Создание интерфейса ---
 
-
 def create_ui():
     theme = gr.themes.Soft(primary_hue="blue", text_size="lg")
 
     with gr.Blocks(theme=theme, css=CUSTOM_CSS, title="Qwen Coder Pro") as demo:
-        with gr.Row(equal_height=True, variant="default"):
-            # Боковая панель
-            with gr.Sidebar():
+        # fill_height=True помогает растянуть layout
+        with gr.Row(equal_height=True, variant="default", elem_classes=["main-row"]):
+
+            # --- Боковая панель ---
+            with gr.Sidebar(elem_classes=["sidebar"]):
                 gr.Markdown("### ⚙️ Settings")
                 system_prompt = gr.Textbox(
                     label="System Prompt",
                     value="You are an expert coding assistant. Write clean, efficient code.",
                     lines=5,
                 )
-                temperature = gr.Slider(
-                    0.0, 1.0, value=config.DEFAULT_TEMP, label="Temperature"
-                )
-                max_tokens = gr.Slider(
-                    512, 8192, value=config.DEFAULT_MAX_TOKENS, label="Max Tokens"
-                )
+                temperature = gr.Slider(0.0, 1.0, value=config.DEFAULT_TEMP, label="Temperature")
+                max_tokens = gr.Slider(512, 8192, value=config.DEFAULT_MAX_TOKENS, label="Max Tokens")
                 clear_btn = gr.Button("🗑️ Clear Chat", variant="secondary")
 
-            # Основная колонка (теперь она будет растягиваться благодаря CSS)
-            with gr.Column(scale=10, elem_classes=["main-column"]):
-                # Чатбот
+            # --- Основная колонка (Чат + Ввод) ---
+            with gr.Column(scale=1, elem_classes=["main-chat-col"]):
+
                 chatbot = gr.Chatbot(
                     label="Code Assistant",
                     elem_id="chatbot",
                     avatar_images=(None, "https://api.iconify.design/noto:robot.svg"),
                     layout="bubble",
+                    render_markdown=True,
                 )
 
-                # Строка ввода
-                with gr.Row(variant="compact", elem_classes="input-row"):
+                with gr.Row(elem_classes=["input-row"]):
                     msg = gr.Textbox(
                         show_label=False,
                         placeholder="Type your code question here...",
                         lines=1,
-                        scale=15,
+                        scale=9,
                         autofocus=True,
                         max_lines=10,
+                        container=False
                     )
-                    submit_btn = gr.Button(
-                        "Run ➤", variant="primary", scale=1, min_width=100
-                    )
+                    submit_btn = gr.Button("Run ➤", variant="primary", scale=1, min_width=80)
 
-        # Chains
+        # --- Привязка событий ---
         submit_event = (
             msg.submit(user_input, [msg, chatbot], [msg, chatbot], queue=False)
             .then(lambda: set_interactive(False), None, [msg, submit_btn], queue=False)
-            .then(
-                bot_response, [chatbot, system_prompt, temperature, max_tokens], chatbot
-            )
+            .then(bot_response, [chatbot, system_prompt, temperature, max_tokens], chatbot)
             .then(lambda: set_interactive(True), None, [msg, submit_btn], queue=False)
         )
 
         click_event = (
             submit_btn.click(user_input, [msg, chatbot], [msg, chatbot], queue=False)
             .then(lambda: set_interactive(False), None, [msg, submit_btn], queue=False)
-            .then(
-                bot_response, [chatbot, system_prompt, temperature, max_tokens], chatbot
-            )
+            .then(bot_response, [chatbot, system_prompt, temperature, max_tokens], chatbot)
             .then(lambda: set_interactive(True), None, [msg, submit_btn], queue=False)
         )