refactor frontend

src/ui/callbacks.py

@@ -1,3 +1,5 @@
+# src/ui/callbacks.py
+
 import os
 import re
 import urllib.parse
@@ -10,9 +12,6 @@ from src.utils.helpers import get_clean_text
 
 
 def user_input(user_message, history):
-    """
-    Добавляет сообщение пользователя в историю и очищает поле ввода.
-    """
     if not user_message:
         return None, history
     history = history or []
@@ -21,56 +20,43 @@ def user_input(user_message, history):
 
 
 def set_interactive(is_interactive):
-    """
-    Блокирует/разблокирует интерфейс во время работы Агента.
-    """
     return (
         gr.update(
             interactive=is_interactive,
             placeholder="Ожидайте, Агент думает..."
             if not is_interactive
-            else "Напиши сообщение или вопрос...",
+            else "Напиши сообщение...",
         ),
         gr.update(interactive=is_interactive),
     )
 
 
 def web_search(query: str, max_results: int = 3) -> list:
-    """
-    Выполняет реальный поиск в DuckDuckGo через HTML-версию
-    без тяжелых внешних зависимостей.
-    """
     headers = {
-        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
+        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"
     }
     url = f"https://html.duckduckgo.com/html/?q={urllib.parse.quote(query)}"
     try:
         response = httpx.get(url, headers=headers, timeout=5.0)
         if response.status_code != 200:
             return []
-
         html = response.text
-        # Парсим ссылки и сниппеты с помощью регулярных выражений
         titles = re.findall(r'<a class="result__a" href="([^"]+)">([^<]+)</a>', html)
         snippets = re.findall(r'<td class="result-snippet">([\s\S]*?)</td>', html)
-
         results = []
         for i in range(min(len(titles), len(snippets), max_results)):
-            # Очищаем URL от редиректов DuckDuckGo
             url_match = re.search(r"uddg=([^&]+)", titles[i][0])
-            raw_url = titles[i][0]
-            if url_match:
-                raw_url = urllib.parse.unquote(url_match.group(1))
-
-            # Удаляем HTML теги из сниппета для чистого текста
-            snippet_clean = re.sub(r"<[^>]+>", "", snippets[i]).strip()
+            raw_url = (
+                urllib.parse.unquote(url_match.group(1)) if url_match else titles[i][0]
+            )
             snippet_clean = (
-                snippet_clean.replace("&amp;", "&")
+                re.sub(r"<[^>]+>", "", snippets[i])
+                .strip()
+                .replace("&amp;", "&")
                 .replace("&quot;", '"')
                 .replace("&lt;", "<")
                 .replace("&gt;", ">")
             )
-
             results.append(
                 {
                     "title": titles[i][1].strip(),
@@ -80,59 +66,46 @@ def web_search(query: str, max_results: int = 3) -> list:
             )
         return results
     except Exception as e:
-        print(f"Ошибка поиска DuckDuckGo: {e}")
+        print(f"Ошибка поиска: {e}")
         return []
 
 
 def bot_response(
     history, system_prompt, temperature, max_tokens, use_search, uploaded_file
 ):
-    """
-    Основной воркер Агента: считывает файлы, ищет в сети и запускает LLM.
-    """
     messages = [{"role": "system", "content": system_prompt}]
+    file_info, file_content = "", ""
 
-    # 1. Чтение файла (если загружен)
-    file_info = ""
-    file_content = ""
+    # 1. Чтение файла
     if uploaded_file and os.path.exists(uploaded_file):
         filename = os.path.basename(uploaded_file)
         size_kb = os.path.getsize(uploaded_file) / 1024
         file_info = f"📎 **Файл прочитан:** `{filename}` ({size_kb:.1f} KB)"
-
         try:
             with open(uploaded_file, "r", encoding="utf-8", errors="ignore") as f:
-                # Ограничиваем считывание 40k символов для избежания перегрузки контекста
                 file_content = f.read(40000)
                 if len(file_content) >= 40000:
-                    file_info += " *(загружен первый сегмент файла)*"
+                    file_info += " *(загружен первый сегмент)*"
         except Exception as e:
-            file_content = f"[Ошибка чтения файла: {e}]"
-            file_info = f"❌ **Ошибка при чтении файла:** `{filename}` ({e})"
+            file_info = f"❌ **Ошибка файла:** `{filename}` ({e})"
 
-    # 2. Формирование контекста диалога (последние 7 реплик)
+    # 2. Формирование контекста диалога
     for msg in history[-7:]:
         messages.append(
             {"role": msg["role"], "content": get_clean_text(msg["content"])}
         )
 
-    # Добавляем в историю системную плашку-статус
-    history.append({"role": "assistant", "content": "⏳ Инициализация агента..."})
+    history.append({"role": "assistant", "content": "⏳ Инициализация..."})
     yield history
 
-    # 3. Работа веб-поиска
+    # 3. Веб-поиск
     search_info = ""
     if use_search:
-        user_query = ""
-        # Берем последний запрос пользователя в качестве поискового запроса
-        for msg in reversed(messages):
-            if msg["role"] == "user":
-                user_query = msg["content"]
-                break
-
+        user_query = next(
+            (msg["content"] for msg in reversed(messages) if msg["role"] == "user"), ""
+        )
         if user_query:
-            search_info = f'🌐 **Поиск в интернете:** Выполняется поиск по запросу *"{user_query}"*...'
-            # Обновляем сообщение в интерфейсе для прозрачности действий
+            search_info = f'🌐 Ищем: *"{user_query}"*...'
             history[-1]["content"] = (
                 f"{file_info + '\n' if file_info else ''}{search_info}"
             )
@@ -140,40 +113,36 @@ def bot_response(
 
             search_results = web_search(user_query)
             if search_results:
-                search_info = f'🌐 **Поиск в интернете:** Найдено {len(search_results)} результатов по запросу *"{user_query}"*'
-                search_context = "Результаты поиска из интернета для вашего ответа:\n\n"
-                for idx, r in enumerate(search_results, 1):
-                    search_context += (
-                        f"{idx}. {r['title']} ({r['url']})\nСниппет: {r['snippet']}\n\n"
-                    )
-
-                # Помещаем результаты поиска в системный контекст модели
+                search_info = f"🌐 Найдено {len(search_results)} результатов."
+                search_context = "Результаты поиска:\n" + "".join(
+                    [
+                        f"{i}. {r['title']} ({r['url']})\n{r['snippet']}\n\n"
+                        for i, r in enumerate(search_results, 1)
+                    ]
+                )
                 messages.append({"role": "system", "content": search_context})
             else:
-                search_info = f'🌐 **Поиск в интернете:** По запросу *"{user_query}"* результатов не найдено.'
+                search_info = "🌐 Ничего не найдено."
 
-    # Если файл прочитан, инжектируем его содержимое в контекст
+    # Инжект файла
     if file_content:
         messages.append(
             {
                 "role": "system",
-                "content": f"Пользователь предоставил вам файл '{os.path.basename(uploaded_file)}'. Его содержимое:\n\n{file_content}",
+                "content": f"Файл '{os.path.basename(uploaded_file)}':\n\n{file_content}",
             }
         )
 
-    # Формируем итоговую визуальную шапку статусов перед ответом
-    status_header = ""
-    if file_info:
-        status_header += f"{file_info}\n"
-    if search_info:
-        status_header += f"{search_info}\n"
+    status_header = (file_info + "\n" if file_info else "") + (
+        search_info + "\n" if search_info else ""
+    )
     if status_header:
-        status_header += "\n---\n\n"
+        status_header += "---\n\n"
 
-    history[-1]["content"] = status_header + "⏳ Генерация ответа моделью..."
+    history[-1]["content"] = status_header + "⏳ Генерация ответа..."
     yield history
 
-    # 4. Стриминг ответа модели
+    # 4. Стриминг ответа от LLM
     try:
         stream = engine.generate(
             messages=messages,
@@ -181,18 +150,13 @@ def bot_response(
             temperature=temperature,
             stream=True,
         )
-
         partial_text = ""
         for chunk in stream:
             delta = chunk["choices"][0].get("delta", {})
             if delta.get("content"):
                 partial_text += delta["content"]
-                # Выводим ответ модели сразу под нашей шапкой статуса
                 history[-1]["content"] = status_header + partial_text
                 yield history
-
     except Exception as e:
-        history[-1]["content"] = (
-            status_header + f"\n\n❌ Ошибка во время генерации: {str(e)}"
-        )
+        history[-1]["content"] = status_header + f"\n\n❌ Ошибка: {str(e)}"
         yield history

src/ui/components.py

@@ -1,3 +1,5 @@
+# src/ui/components.py (или где у вас находится функция create_ui)
+
 import gradio as gr
 
 from src.core.config import settings
@@ -6,33 +8,25 @@ from src.ui.styles import CSS
 
 
 def create_ui():
-    # Базовые блоки без конфликтующих флагов высоты
-    with gr.Blocks(theme=gr.themes.Soft(), css=CSS, fill_height=True) 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"):
-            # Боковая панель
-            with gr.Sidebar(elem_id="sidebar-container", width=280):
-                gr.Markdown("## 🛠️ Dashboard")
+    # fill_height=True растягивает интерфейс на всю высоту экрана
+    with gr.Blocks(theme=gr.themes.Base(), css=CSS, fill_height=True) as demo:
+        gr.HTML("<script>document.title = 'AI Agent';</script>")
 
-                gr.Markdown("### 🧰 Agent Tools")
-                use_search = gr.Checkbox(
-                    label="🌐 Включить поиск в интернете", value=False
-                )
-                uploaded_file = gr.File(
-                    label="📎 Загрузить файл",
-                    file_types=[".txt", ".pdf", ".py", ".md", ".json"],
-                    type="filepath",
-                )
+        with gr.Sidebar(width=280):
+            use_search = gr.Checkbox(label="🌐 Интернет-поиск", value=False)
+            uploaded_file = gr.File(
+                label="📎 Файл контекста",
+                file_types=[".txt", ".pdf", ".py", ".md", ".json"],
+            )
 
-                gr.Markdown("### ⚙️ Model Settings")
+            # Аккордеон скроет страшные ползунки, пока юзер сам их не откроет
+            with gr.Accordion("⚙️ Настройки модели", open=False):
                 sys_pt = gr.Textbox(
                     label="System Prompt",
-                    value="Вы опытный программист и AI-агент. Если нужно узнать свежую информацию, используйте поиск.",
-                    lines=4,
+                    value="Вы AI-агент. Если нужно узнать свежую информацию, используйте поиск.",
+                    lines=3,
                 )
-                temp = gr.Slider(0, 1, value=settings.DEFAULT_TEMP, label="Temperature")
+                temp = gr.Slider(0, 1, value=settings.DEFAULT_TEMP, label="Температура")
                 tokens = gr.Slider(
                     512,
                     settings.CONTEXT_SIZE,
@@ -41,45 +35,47 @@ def create_ui():
                     step=128,
                 )
 
-                gr.HTML(
-                    "<div style='margin: 15px 0; border-top: 1px solid var(--border-color-primary);'></div>"
-                )
-                clear = gr.Button("🗑️ Clear Chat", variant="stop")
+            clear = gr.Button("🗑️ Очистить чат")
+
+        # Чат
+        chatbot = gr.Chatbot(
+            elem_id="chatbot",
+            show_label=False,
+            scale=1,  # Чат забирает всё свободное пространство сверху вниз
+            bubble_full_width=False,  # Делает пузыри чата компактными (как в ChatGPT)
+        )
 
-        # Основная область чата
-        with gr.Column(elem_id="col-chat-main"):
-            chatbot = gr.Chatbot(
-                elem_id="chatbot",
+        # Плашка ввода в самом низу
+        with gr.Row():
+            msg = gr.Textbox(
                 show_label=False,
-                scale=1,  # <- Вот правильный способ растянуть чат
+                placeholder="Напиши сообщение...",
+                scale=10,
+                autofocus=True,
+                container=False,
             )
+            submit = gr.Button("➤", variant="primary", scale=1, min_width=50)
 
-            with gr.Row(elem_id="input-area"):
-                msg = gr.Textbox(
-                    show_label=False,
-                    placeholder="Напиши сообщение или вопрос...",
-                    scale=10,
-                    autofocus=True,
-                    container=False,
-                )
-                submit = gr.Button("Run ➤", variant="primary", scale=1)
-
+        # События интерфейса (обработчики)
         input_args = [msg, chatbot]
         output_args = [msg, chatbot]
         gen_args = [chatbot, sys_pt, temp, tokens, use_search, uploaded_file]
 
+        # Обработка Enter в поле ввода
         msg.submit(user_input, input_args, output_args, queue=False).then(
             lambda: set_interactive(False), None, [msg, submit]
         ).then(bot_response, gen_args, chatbot).then(
             lambda: set_interactive(True), None, [msg, submit]
         )
 
+        # Обработка клика по кнопке отправки
         submit.click(user_input, input_args, output_args, queue=False).then(
             lambda: set_interactive(False), None, [msg, submit]
         ).then(bot_response, gen_args, chatbot).then(
             lambda: set_interactive(True), None, [msg, submit]
         )
 
+        # Очистка чата
         clear.click(lambda: [], None, chatbot)
 
     return demo

src/ui/styles.py

@@ -1,208 +1,54 @@
-CSS = """
-/* 1. Глобальный фон страницы */
-html, body {
-    background-color: #212121 !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    height: 100vh !important;
-    overflow: hidden !important; /* Блокируем внешний скролл */
-}
-
-.gradio-container {
-    background-color: #212121 !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    height: 100vh !important; /* Жестко 100% экрана */
-    max-width: 100% !important;
-    overflow: hidden !important;
-}
-
-/* 2. Главный ряд */
-#main-row {
-    margin: 0 !important;
-    gap: 0 !important;
-    background-color: #212121 !important;
-    height: 100% !important;
-    flex-wrap: nowrap !important; /* Запрещаем перенос колонки чата под сайдбар */
-    min-height: 0 !important;
-}
-
-/* 3. Боковая панель */
-#sidebar-container {
-    background-color: #171717 !important;
-    border-right: 1px solid #2f2f2f !important;
-    padding: 1.5rem 1.25rem !important;
-    height: 100% !important;
-    overflow-y: auto !important; /* Включаем скролл внутри сайдбара, если много настроек */
-}
-
-/* Кнопки сайдбара оставляем как у вас... */
-.sidebar-parent button.toggle-button,
-.sidebar-parent > button {
-    background-color: #171717 !important;
-    color: #ececec !important;
-    border: 1px solid #3a3a3a !important;
-    border-radius: 50% !important;
-    width: 36px !important;
-    height: 36px !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
-    z-index: 999 !important;
-    cursor: pointer !important;
-}
-
-.sidebar-parent button.toggle-button:hover,
-.sidebar-parent > button:hover {
-    background-color: #2f2f2f !important;
-}
+# src/ui/styles.py
 
-/* 4. Колонка чата */
-#col-chat-main {
+CSS = """
+/* Темная тема фона */
+body, .gradio-container {
     background-color: #212121 !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    display: flex !important;
-    flex-direction: column !important;
-    height: 100% !important;
-    min-height: 0 !important; /* КРИТИЧЕСКИ ВАЖНО: защита от расширения колонки */
 }
 
-/* Стилизация компонента Chatbot */
+/* Прозрачный фон самого чата */
 #chatbot {
     background-color: transparent !important;
     border: none !important;
-    box-shadow: none !important;
-    max-width: 800px !important;
-    margin: 0 auto !important;
-    width: 100% !important;
-    flex-grow: 1 !important; /* Заставляем чат занять все свободное место над плашкой */
-    min-height: 0 !important; /* КРИТИЧЕСКИ ВАЖНО: убивает бесконечный цикл */
 }
 
-#chatbot > .wrapper {
-    background: transparent !important;
-    border: none !important;
-    min-height: 0 !important;
-}
-
-/* 5. Настройки пузырей сообщений и текста */
-#chatbot .message,
-#chatbot [data-testid="user"],
-#chatbot [data-testid="bot"],
-#chatbot .message p,
-#chatbot .message span,
-#chatbot .message li,
-#chatbot .message ul,
-#chatbot .message ol {
-    font-size: 0.98rem !important;
-    line-height: 1.6 !important;
-}
-
-/* Сообщения пользователя */
-#chatbot .user, #chatbot [data-testid="user"] {
+/* Пузырь пользователя (справа, с рамкой) */
+.user {
     background-color: #2f2f2f !important;
-    color: #ffffff !important;
     border: 1px solid #3c3c3c !important;
-    border-radius: 20px !important;
-    border-bottom-right-radius: 4px !important;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
-    margin-left: auto !important;
-    max-width: 80% !important;
-}
-
-#chatbot .user *, #chatbot [data-testid="user"] * {
+    border-radius: 20px 20px 4px 20px !important;
     color: #ffffff !important;
 }
 
-/* Сообщения бота */
-#chatbot .bot, #chatbot [data-testid="bot"] {
+/* Текст бота (без фона, как в ChatGPT) */
+.bot {
     background-color: transparent !important;
     color: #ececec !important;
-    margin-right: auto !important;
-    max-width: 100% !important;
-    padding-left: 0 !important;
-}
-
-#chatbot .bot *, #chatbot [data-testid="bot"] * {
-    color: #ececec !important;
-}
-
-/* 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,
-#input-area .form,
-#input-area .gr-box {
-    background-color: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
 }
 
-#input-area textarea {
-    border-radius: 26px !important;
-    border: 1px solid #424242 !important;
+/* Поле ввода */
+textarea {
     background-color: #2f2f2f !important;
+    border: 1px solid #424242 !important;
+    border-radius: 24px !important;
     color: #ffffff !important;
-    padding: 14px 20px !important;
-    font-size: 1rem !important;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
+    padding: 12px 18px !important;
 }
-
-#input-area textarea:focus {
+textarea:focus {
     border-color: #676767 !important;
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
 }
 
 /* Кнопка отправки */
-#input-area button,
-#input-area .gr-button-primary {
-    border-radius: 22px !important;
+.gr-button-primary {
+    border-radius: 24px !important;
     background-color: #ececec !important;
     color: #171717 !important;
-    font-weight: 600 !important;
-    border: none !important;
-    padding: 0 20px !important;
-    height: 44px !important;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
+    font-weight: bold !important;
 }
-
-#input-area button:hover,
-#input-area .gr-button-primary:hover {
+.gr-button-primary:hover {
     background-color: #ffffff !important;
 }
 
-/* Тонкий скроллбар */
-::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-}
-::-webkit-scrollbar-track {
-    background: transparent;
-}
-::-webkit-scrollbar-thumb {
-    background: #424242;
-    border-radius: 10px;
-}
-::-webkit-scrollbar-thumb:hover {
-    background: #4f4f4f;
-}
-
-/* Скрытие дублирующих элементов */
-.stale {
-    opacity: 1 !important;
-    filter: none !important;
-}
-footer {
-    display: none !important;
-}
+/* Скрываем подвал с логотипом Gradio */
+footer { display: none !important; }
 """