chat window

src/ui/components.py

@@ -6,16 +6,16 @@ from src.ui.styles import CSS
 
 
 def create_ui():
-    with gr.Blocks(theme=gr.themes.Soft()) as demo:
+    # fill_height=True заставит приложение занять весь экран по высоте
+    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"):
+            # Задаем ширину сайдбара через Python, чтобы Gradio корректно рассчитывал его скрытие
+            with gr.Sidebar(elem_id="sidebar-container", width=280):
                 gr.Markdown("## 🛠️ Dashboard")
 
-                # НОВЫЕ ИНСТРУМЕНТЫ
                 gr.Markdown("### 🧰 Agent Tools")
                 use_search = gr.Checkbox(
                     label="🌐 Включить поиск в интернете", value=False
@@ -23,10 +23,9 @@ def create_ui():
                 uploaded_file = gr.File(
                     label="📎 Загрузить файл",
                     file_types=[".txt", ".pdf", ".py", ".md", ".json"],
-                    type="filepath",  # Gradio отдаст нам путь к файлу
+                    type="filepath",
                 )
 
-                # Настройки модели
                 gr.Markdown("### ⚙️ Model Settings")
                 sys_pt = gr.Textbox(
                     label="System Prompt",
@@ -49,6 +48,7 @@ def create_ui():
 
             # Основная область чата
             with gr.Column(elem_id="col-chat-main"):
+                # Безопасное создание чат-бота без конфликтующих аргументов
                 chatbot = gr.Chatbot(elem_id="chatbot", show_label=False)
 
                 with gr.Row(elem_id="input-area"):
@@ -61,7 +61,6 @@ def create_ui():
                     )
                     submit = gr.Button("Run ➤", variant="primary", scale=1)
 
-        # Обратите внимание, мы добавили use_search и uploaded_file в gen_args!
         input_args = [msg, chatbot]
         output_args = [msg, chatbot]
         gen_args = [chatbot, sys_pt, temp, tokens, use_search, uploaded_file]

src/ui/styles.py

@@ -1,41 +1,43 @@
 CSS = """
+/* 1. Глобальные правила растягивания на весь экран */
 html, body, .gradio-container {
-    height: 100% !important;
+    height: 100vh !important;
+    min-height: 100vh !important;
     margin: 0 !important;
-    background-color: #212121 !important; /* Фоновый цвет ChatGPT */
-    color: #ececec !important;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    background-color: #212121 !important; /* Общий темный фон */
 }
 
-/* 1. Глобальный контейнер */
-.gradio-container {
-    max-width: 100% !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    height: 100vh !important;
+/* Растягиваем все внутренние обертки Gradio, чтобы чат занимал всю высоту */
+.gradio-container .main,
+.gradio-container .wrap,
+.gradio-container .contain,
+.gradio-container .sidebar-parent {
+    height: 100% !important;
+    min-height: 100% !important;
     display: flex !important;
-    flex-direction: column !important;
-    overflow: hidden !important;
+    flex-direction: row !important;
+    flex: 1 1 auto !important;
     background-color: #212121 !important;
 }
 
-/* 2. Основная рабочая область */
+/* 2. Главный ряд (сайдбар + чат) */
 #main-row {
     display: flex !important;
-    flex: 1 1 auto !important;
+    flex-direction: row !important;
+    width: 100% !important;
     height: 100% !important;
     margin: 0 !important;
     gap: 0 !important;
-    background-color: #212121 !important;
     overflow: hidden !important;
+    flex: 1 1 auto !important;
+    background-color: #212121 !important;
 }
 
-/* 3. Боковая панель в стиле ChatGPT */
+/* 3. Стилизация сайдбара */
 #sidebar-container {
-    width: 280px !important;
-    min-width: 280px !important;
-    max-width: 280px !important;
-    background-color: #171717 !important; /* Более темный левый сайдбар */
+    background-color: #171717 !important; /* Контрастный темный фон */
     border-right: 1px solid #2f2f2f !important;
     padding: 1.5rem 1.25rem !important;
     height: 100% !important;
@@ -44,109 +46,107 @@ html, body, .gradio-container {
     overflow-y: auto !important;
 }
 
-/* Заголовки и тексты на сайдбаре */
-#sidebar-container h2, #sidebar-container h3, #sidebar-container span {
+/* Кнопка сворачивания/разворачивания сайдбара (круглая, темная, всегда поверх) */
+.sidebar-parent button.toggle-button,
+.sidebar-parent > button {
+    background-color: #171717 !important;
     color: #ececec !important;
-    font-weight: 600 !important;
-}
-
-/* Контейнеры на боковой панели */
-#sidebar-container .gr-form, #sidebar-container .gr-box {
-    background-color: #212121 !important;
-    border: 1px solid #2f2f2f !important;
-    border-radius: 14px !important;
-}
-
-/* Кнопки на боковой панели */
-#sidebar-container button {
-    border-radius: 20px !important;
-    font-weight: 500 !important;
-    transition: all 0.2s ease !important;
-}
-
-#sidebar-container .gr-button-stop {
-    background-color: #442a2a !important;
-    border: none !important;
-}
-#sidebar-container .gr-button-stop:hover {
-    background-color: #663a3a !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;
+    transition: background-color 0.2s !important;
 }
 
-/* Убираем эффекты старения элементов Gradio */
-.stale {
-    opacity: 1 !important;
-    filter: none !important;
+.sidebar-parent button.toggle-button:hover,
+.sidebar-parent > button:hover {
+    background-color: #2f2f2f !important;
 }
 
-/* 4. Колонка чата (Сбалансированная ширина и центрирование как на ChatGPT) */
+/* 4. Стилизация чат-зоны */
 #col-chat-main {
     display: flex !important;
     flex-direction: column !important;
+    flex: 1 1 auto !important;
     height: 100% !important;
-    padding: 0 !important;
-    margin: 0 !important;
+    min-height: 0 !important;
     background-color: #212121 !important;
-    flex: 1 1 auto !important;
     overflow: hidden !important;
-    align-items: center !important;
+    position: relative !important;
 }
 
-/* Область самого чата */
+/* Окно чата занимает все доступное ме��то */
 #chatbot {
     flex: 1 1 auto !important;
+    height: calc(100vh - 140px) !important;
+    max-height: calc(100vh - 140px) !important;
     width: 100% !important;
-    max-width: 800px !important; /* Центрирует и ограничивает контент */
+    max-width: 800px !important;
     margin: 0 auto !important;
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
     overflow-y: auto !important;
+    padding: 20px 10px !important;
 }
 
-/* Внутренняя обертка чата */
 #chatbot > .wrapper {
-    flex: 1 1 auto !important;
-    display: flex !important;
-    flex-direction: column !important;
     background: transparent !important;
     border: none !important;
 }
 
-/* Закругление пузырей сообщений */
-#chatbot .message, #chatbot [data-testid="user"], #chatbot [data-testid="bot"] {
-    border-radius: 20px !important;
-    padding: 12px 18px !important;
-    max-width: 80% !important;
-    margin-bottom: 1rem !important;
-    line-height: 1.6 !important;
+/* 5. Четкие контрастные цвета для текста сообщений */
+#chatbot .message,
+#chatbot [data-testid="user"],
+#chatbot [data-testid="bot"],
+#chatbot .message p,
+#chatbot .message span,
+#chatbot .message li {
     font-size: 0.98rem !important;
+    line-height: 1.6 !important;
 }
 
-/* Сообщения пользователя: скругленная аккуратная плашка справа */
+/* Сообщения пользователя: темно-серый пузырь справа, белый текст */
 #chatbot .user, #chatbot [data-testid="user"] {
     background-color: #2f2f2f !important;
-    color: #f9f9f9 !important;
+    color: #ffffff !important;
+    border: 1px solid #3c3c3c !important;
+    border-radius: 20px !important;
     border-bottom-right-radius: 4px !important;
     align-self: flex-end !important;
     margin-left: auto !important;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
 }
 
-/* Сообщения бота: плоский минималистичный стиль на чистом фоне слева */
+#chatbot .user *, #chatbot [data-testid="user"] * {
+    color: #ffffff !important; /* Гарантирует белый текст для внутренних тегов */
+}
+
+/* Сообщения Агента: прозрачный фон, светло-серый контрастный текст */
 #chatbot .bot, #chatbot [data-testid="bot"] {
     background-color: transparent !important;
     color: #ececec !important;
     align-self: flex-start !important;
     margin-right: auto !important;
-    padding-left: 0 !important;
     max-width: 100% !important;
+    padding-left: 0 !important;
+}
+
+#chatbot .bot *, #chatbot [data-testid="bot"] * {
+    color: #ececec !important; /* Гарантирует светло-серый текст для внутренних тегов */
 }
 
-/* 5. Поле ввода (Скругленное, парящее внизу экрана) */
+/* 6. Очистка области ввода от белых углов */
 #input-area {
     width: 100% !important;
     max-width: 800px !important;
-    margin: 0 auto 2rem auto !important;
+    margin: 0 auto 1.5rem auto !important;
     padding: 0 1rem !important;
     background: transparent !important;
     border: none !important;
@@ -154,39 +154,52 @@ html, body, .gradio-container {
     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;
+}
+
+/* Само текстовое поле в стиле ChatGPT */
 #input-area textarea {
     border-radius: 26px !important;
     border: 1px solid #424242 !important;
     background-color: #2f2f2f !important;
-    color: #ececec !important;
+    color: #ffffff !important;
     padding: 14px 20px !important;
     font-size: 1rem !important;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
     transition: border-color 0.2s, box-shadow 0.2s !important;
-    resize: none !important;
 }
 
 #input-area textarea:focus {
     border-color: #676767 !important;
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
 }
 
-/* Кнопка отправки */
+/* Минималистичная кнопка Run (светло-серая, с темным текстом) */
+#input-area button,
 #input-area .gr-button-primary {
     border-radius: 22px !important;
     background-color: #ececec !important;
     color: #171717 !important;
     font-weight: 600 !important;
     border: none !important;
-    padding: 8px 16px !important;
-    transition: background-color 0.15s ease !important;
+    padding: 0 20px !important;
+    height: 44px !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
+    transition: all 0.2s ease !important;
 }
 
+#input-area button:hover,
 #input-area .gr-button-primary:hover {
-    background-color: #d1d1d1 !important;
+    background-color: #ffffff !important;
+    transform: translateY(-1px) !important;
 }
 
-/* Тонкий красивый скроллбар */
+/* Настройки скроллбара */
 ::-webkit-scrollbar {
     width: 6px;
     height: 6px;
@@ -202,7 +215,11 @@ html, body, .gradio-container {
     background: #4f4f4f;
 }
 
-/* Скрываем стандартный футер Gradio */
+/* Скрытие дублирующих элементов */
+.stale {
+    opacity: 1 !important;
+    filter: none !important;
+}
 footer {
     display: none !important;
 }