Update app.py

app.py

@@ -73,10 +73,13 @@ def on_user_message(user_message: str, state: Dict):
     if not user_message.strip():
         return [], state, gr.update(value="")
     messages = state["messages"]
+
     if not state["system_used"]:
         messages.insert(0, {"role": "system", "content": SYSTEM_PROMPT})
         state["system_used"] = True
+
     messages.append({"role": "user", "content": user_message})
+
     try:
         client = get_client()
         response = client.chat_completion(
@@ -89,8 +92,10 @@ def on_user_message(user_message: str, state: Dict):
         assistant_reply = response.choices[0].message["content"].strip()
     except:
         assistant_reply = mock_predict(user_message)
+
     messages.append({"role": "assistant", "content": assistant_reply})
     state["messages"] = messages
+
     chat_history = []
     for msg in messages:
         if msg["role"] != "system" and msg["content"].strip():
@@ -101,38 +106,70 @@ def on_user_message(user_message: str, state: Dict):
                 f'</span></div>'
             )
             chat_history.append({"role": msg["role"], "content": html})
+
     return chat_history, state, gr.update(value="")
 
 # -----------------------------
 # Build UI
 # -----------------------------
 def build_ui():
+
     css = """
     body {background-color:#000000; color:#00aaff;}
-    .chat-container {display:flex; flex-direction:row; gap:20px; height:600px;}
-    .chat-box { flex:2; overflow-y:auto; padding:10px; border:1px solid #00aaff; border-radius:5px; background:#000; max-width:70%; }
-    .ads-box {flex:1; display:flex; flex-direction:column; gap:10px; height:600px;}
-    .ad { background-color:#111; color:#fff; flex:1; display:flex; justify-content:center; align-items:center; font-weight:bold; border:1px solid #00aaff; border-radius:5px; }
-    /* СТИЛЬ ОКНА ВВОДА — КАК ОКНО ЧАТА */
-    .input-styled {
-        max-width:70% !important;
-        background:#000000 !important;
-        border:1px solid #00aaff !important;
-        border-radius:5px !important;
-        padding:10px !important;
-        font-size:14px !important;
-        font-family:Arial, sans-serif !important;
+
+    .chat-container {
+        display:flex;
+        flex-direction:row;
+        gap:20px;
+        height:auto;
+    }
+
+    .chat-box {
+        flex:2;
+        overflow-y:auto;
+        padding:10px;
+        border:1px solid #00aaff;
+        border-radius:5px;
+        background:#000;
+        height:250px !important;
+    }
+
+    .ads-box {
+        flex:1;
+        display:flex;
+        flex-direction:column;
+        gap:10px;
+    }
+
+    .ad {
+        background-color:#111;
+        color:#fff;
+        flex:1;
+        display:flex;
+        justify-content:center;
+        align-items:center;
+        font-weight:bold;
+        border:1px solid #00aaff;
+        border-radius:5px;
+        height:120px;
     }
+
+    /* Окно ввода текста — одинаковое с чатом */
     .input-styled textarea {
-        color:#00aaff !important;
         background:#000000 !important;
+        color:#00aaff !important;
         border:1px solid #00aaff !important;
         border-radius:5px !important;
         padding:10px !important;
         font-size:14px !important;
         font-family:Arial, sans-serif !important;
+        height:250px !important;
+        resize:none !important;
+        width:100% !important;
+        box-sizing:border-box !important;
     }
     """
+
     autoscroll_js = """
     <script>
     const chatObserver = new MutationObserver((mutations) => {
@@ -142,10 +179,12 @@ def build_ui():
     document.querySelectorAll('.chat-box').forEach(el => chatObserver.observe(el, {childList:true, subtree:true}));
     </script>
     """
+
     initial_bot_message = (
-        "Привет! Я консультант Ozon. Могу помочь с товарами, заказами и продажами. "
-        "С чем хотите помочь первым?"
+        "Привет! Я твой консультант по Ozon. Помогаю с товарами, аналитикой, карточками, продажами "
+        "и сложными ситуациями. С чего начнем?"
     )
+
     chat_history_initial = [
         {
             "role": "assistant",
@@ -156,35 +195,51 @@ def build_ui():
             ),
         }
     ]
+
     with gr.Blocks() as app:
         gr.HTML(f"<style>{css}</style>")
         gr.HTML(autoscroll_js)
+
         with gr.Row(elem_classes="chat-container"):
             with gr.Column(scale=3):
-                chat = gr.Chatbot(value=chat_history_initial, elem_classes="chat-box")
+
+                chat = gr.Chatbot(
+                    value=chat_history_initial,
+                    elem_classes="chat-box"
+                )
+
                 input_box = gr.Textbox(
                     placeholder="Введите сообщение…",
-                    label="Сообщение",
-                    elem_classes="input-styled"
+                    elem_classes="input-styled",
+                    multiline=True,
+                    lines=5,
+                    label=None
                 )
+
                 state = gr.State(reset_state())
+
                 input_box.submit(
                     on_user_message,
                     inputs=[input_box, state],
                     outputs=[chat, state, input_box]
                 )
+
                 gr.Button("Очистить чат").click(
                     lambda: (chat_history_initial, reset_state(), gr.update(value="")),
                     None,
                     [chat, state, input_box]
                 )
+
             with gr.Column(scale=1):
                 with gr.Row(elem_classes="ads-box"):
                     gr.HTML('<div class="ad">Здесь может быть ваша реклама</div>')
                     gr.HTML('<div class="ad">Здесь может быть ваша реклама</div>')
+
     return app
 
+
 app = build_ui()
+
 if __name__ == "__main__":
     app.queue(max_size=5)
-    app.launch(server_name="0.0.0.0", server_port=7860, debug=True, share=False)
+    app.launch(server_name="0.0.0.0", server_port=7860, debug=True, share=False)