Update app.py

app.py

@@ -1,66 +1,120 @@
 import streamlit as st
 from openai import OpenAI
 
-# Инициализация клиента для DeepSeek
+# Настройки страницы (тёмная тема, "wide" разметка)
+st.set_page_config(page_title="Чат с deepseek-reasoner", layout="wide")
+
+# Глобальная стилизация через CSS
+st.markdown(
+    """
+    <style>
+    /* Убираем верхний хедер и хамбёргер-меню Streamlit (по желанию) */
+    #MainMenu, header, footer {visibility: hidden;}
+
+    /* Тёмный фон всего приложения */
+    body {
+        background-color: #181818;
+        color: #FFFFFF;
+    }
+
+    /* Контейнер для всего чата */
+    .chat-container {
+        background-color: #222222;
+        padding: 20px;
+        border-radius: 10px;
+        max-height: 70vh; /* Высота окна для переписки */
+        overflow-y: auto; /* Скролл при переполнении */
+        margin-bottom: 20px;
+    }
+
+    /* «Пузырёк» для сообщений пользователя (справа) */
+    .user-bubble {
+        background-color: #005f73; 
+        color: #ffffff;
+        padding: 10px 15px;
+        border-radius: 10px;
+        margin: 10px;
+        max-width: 60%;
+        text-align: left;
+        margin-left: auto; /* прижимает пузырёк к правому краю */
+    }
+
+    /* «Пузырёк» для сообщений ассистента (слева) */
+    .assistant-bubble {
+        background-color: #333333; 
+        color: #ffffff;
+        padding: 10px 15px;
+        border-radius: 10px;
+        margin: 10px;
+        max-width: 60%;
+        text-align: left;
+        margin-right: auto; /* прижимает пузырёк к левому краю */
+    }
+    </style>
+    """,
+    unsafe_allow_html=True
+)
+
+# Инициализация клиента для DeepSeek (замените ключ на свой)
 client = OpenAI(
-    api_key="sk-a02694cf3c8640c9ae60428ee2c5a62e",  # Замените ключ на свой
+    api_key="sk-a02694cf3c8640c9ae60428ee2c5a62e",
     base_url="https://api.deepseek.com"
 )
 
-st.set_page_config(page_title="Чат с deepseek-reasoner", layout="centered")
+# Заголовок
 st.title("Чат с deepseek-reasoner")
 
-# Храним историю переписки в Session State
+# Инициализируем историю сообщений в сессии
 if "messages" not in st.session_state:
     st.session_state["messages"] = []
 
-# Многострочное поле ввода
-user_input = st.text_area("Ваш вопрос:", "", height=80)
-
-# Кнопка для отправки
-if st.button("Отправить"):
-    # Убираем лишние пробелы/переносы
-    content = user_input.strip()
-    if content:
-        # Добавляем пользовательский ввод в историю
-        st.session_state["messages"].append({"role": "user", "content": content})
-
-        try:
-            # Отправляем всю историю в модель
-            response = client.chat.completions.create(
-                model="deepseek-reasoner",
-                messages=st.session_state["messages"]
-            )
-            # Извлекаем ответ (важно: используем .content, а не ["content"])
-            assistant_message = response.choices[0].message.content
-
-            # Добавляем ответ модели в историю
-            st.session_state["messages"].append(
-                {"role": "assistant", "content": assistant_message}
-            )
-        except Exception as e:
-            st.error(f"Ошибка при обращении к API: {e}")
-
-# Разделитель
-st.write("---")
-
-# Отображаем историю диалога в «пузырьках»
-for msg in st.session_state["messages"]:
-    if msg["role"] == "user":
-        # Синий «пузырь» справа
+# Функция для отрисовки всей истории чата
+def render_chat():
+    st.markdown("<div class='chat-container'>", unsafe_allow_html=True)
+    
+    # Проходим по всем сообщениям
+    for msg in st.session_state["messages"]:
+        if msg["role"] == "user":
+            bubble_class = "user-bubble"
+        else:
+            bubble_class = "assistant-bubble"
         st.markdown(
-            f"<div style='text-align: right; background-color: #E8F2FF; "
-            f"padding: 10px; margin: 5px; border-radius: 10px; "
-            f"display: inline-block; max-width: 80%;'>"
-            f"{msg['content']}</div>",
-            unsafe_allow_html=True
-        )
-    else:
-        # Серый «пузырь» слева (ответ модели)
-        st.markdown(
-            f"<div style='text-align: left; background-color: #F0F0F0; "
-            f"padding: 10px; margin: 5px; border-radius: 10px; "
-            f"display: inline-block; max-width: 80%;'>"
-            f"{msg['content']}</div>",
+            f"<div class='{bubble_class}'>{msg['content']}</div>",
             unsafe_allow_html=True
         )
+    
+    st.markdown("</div>", unsafe_allow_html=True)
+
+# Сразу выводим чат-окно, чтобы было сверху
+render_chat()
+
+# Внизу располагаем поле ввода (многострочное) и кнопку «Отправить»
+with st.container():
+    user_input = st.text_area("Напишите сообщение и нажмите Enter или кнопку «Отправить»:",
+                              value="", height=80)
+    
+    if st.button("Отправить"):
+        content = user_input.strip()
+        if content:
+            # Добавляем реплику пользователя в историю
+            st.session_state["messages"].append({"role": "user", "content": content})
+            
+            # Пытаемся получить ответ от модели
+            try:
+                response = client.chat.completions.create(
+                    model="deepseek-reasoner",
+                    messages=st.session_state["messages"]
+                )
+                # Содержимое ответа
+                assistant_content = response.choices[0].message.content
+                
+                # Добавляем ответ ассистента в историю
+                st.session_state["messages"].append(
+                    {"role": "assistant", "content": assistant_content}
+                )
+            except Exception as e:
+                st.error(f"Ошибка при обращении к API: {e}")
+            
+            # Очищаем поле ввода после отправки (перезагрузка скрипта сделает это)
+            st.experimental_rerun()
+