Update ui.py

ui.py

@@ -6,25 +6,38 @@ import config
 from model import engine
 from utils import sanitize_content
 
-# --- CSS стили ---
 CUSTOM_CSS = """
+/* Убираем отступы у основного контейнера и растягиваем его */
 .gradio-container {
     width: 100% !important;
     height: 100vh !important;
-    max_width: 100% !important;
-    margin: 0 !important;
+    max_height: 100vh !important;
     padding: 0 !important;
-    display: flex;
-    flex-direction: column;
+    margin: 0 !important;
+    overflow: hidden !important;
+}
+
+/* Настройка главной колонки чата */
+#main-col {
+    height: 100% !important;
+    max_height: 100vh !important;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: space-between !important; /* Распределяем пространство */
+    padding-bottom: 10px !important;
 }
+
+/* Сам чатбот - он должен расти (flex-grow) и иметь скролл */
 #chatbot {
-    height: 80vh !important;
-    min-height: 500px !important;
-    flex-grow: 1;
-    overflow: auto;
-    font-family: 'Consolas', 'Monaco', monospace;
+    flex-grow: 1 !important; /* Занимает всё доступное место */
+    height: auto !important;
+    min-height: 0 !important; /* Важно для работы скролла во flex-контейнере */
+    overflow-y: auto !important;
+    margin-bottom: 10px !important;
 }
-footer { visibility: hidden !important; }
+
+/* Скрываем футер */
+footer { display: none !important; }
 """
 
 # --- Логика событий ---
@@ -33,17 +46,14 @@ footer { visibility: hidden !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:
         clean_history.append(
             {"role": msg["role"], "content": sanitize_content(msg.get("content", ""))}
         )
-
     clean_history.append({"role": "user", "content": str(user_message)})
     return "", clean_history
 
@@ -54,7 +64,6 @@ def bot_response(history, system_prompt, temperature, max_tokens):
         yield history
         return
 
-    # Подготовка сообщений
     messages = [{"role": "system", "content": system_prompt}]
     relevant_history = history[-15:] if len(history) > 15 else history
 
@@ -72,7 +81,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"]
@@ -108,44 +116,47 @@ def create_ui():
     with gr.Blocks(
         theme=theme, css=CUSTOM_CSS, title="Qwen Coder Pro", fill_height=True
     ) as demo:
-        with gr.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"
-            )
-            clear_btn = gr.Button("🗑️ Clear Chat", variant="secondary")
-
-        # Основная колонка
-        with gr.Column(scale=1):
-            chatbot = gr.Chatbot(
-                label="Code Assistant",
-                elem_id="chatbot",
-                avatar_images=(None, "https://api.iconify.design/noto:robot.svg"),
-                scale=1,
-            )
-
-            with gr.Row(variant="compact"):
-                msg = gr.Textbox(
-                    show_label=False,
-                    placeholder="Type your code question here...",
-                    lines=1,
-                    scale=8,
-                    autofocus=True,
-                    max_lines=3,
+        with gr.Row(elem_id="main-row", variant="panel"):
+            # Боковая панель
+            with gr.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"
                 )
-                submit_btn = gr.Button(
-                    "Run ➤", variant="primary", scale=1, min_width=100
+                clear_btn = gr.Button("🗑️ Clear Chat", variant="secondary")
+
+            with gr.Column(scale=1, elem_id="main-col"):
+                chatbot = gr.Chatbot(
+                    label="Code Assistant",
+                    elem_id="chatbot",
+                    avatar_images=(None, "https://api.iconify.design/noto:robot.svg"),
+                    type="messages",
+                    scale=1,
                 )
 
-        # Chains
+                # Группа ввода
+                with gr.Row(variant="compact", elem_id="input-row"):
+                    msg = gr.Textbox(
+                        show_label=False,
+                        placeholder="Type your code question here...",
+                        lines=1,
+                        scale=8,
+                        autofocus=True,
+                        max_lines=5,
+                    )
+                    submit_btn = gr.Button(
+                        "Run ➤", variant="primary", scale=1, min_width=100
+                    )
+
+        # Chains (События)
         submit_event = (
             msg.submit(user_input, [msg, chatbot], [msg, chatbot], queue=False)
             .then(lambda: set_interactive(False), None, [msg, submit_btn], queue=False)