UI: Simplified layout and fixed overflow bug

ui_module.py

@@ -2,6 +2,9 @@ import gradio as gr
 import uuid
 import logging
 import re
+import json
+import os
+import tempfile
 from agent_module import chat_agent_stream
 from translation_module import localize_init
 
@@ -9,22 +12,38 @@ logger = logging.getLogger("app.ui")
 
 PREMIUM_CSS = """
 body, .gradio-container { background-color: #0b0f19 !important; color: #e0e6ed !important; font-family: 'Inter', sans-serif !important; }
-.main-container { max-width: 900px !important; margin: 0 auto !important; height: 100vh !important; display: flex !important; flex-direction: column !important; padding: 10px !important; }
+.main-container { max-width: 900px !important; margin: 0 auto !important; min-height: 600px !important; max-height: 90vh !important; display: flex !important; flex-direction: column !important; padding: 10px !important; background: #0b0f19 !important; }
 .header-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin-bottom: 10px !important; padding: 10px !important; background: rgba(255, 255, 255, 0.05) !important; border-radius: 12px !important; }
-.chat-window { flex-grow: 1 !important; overflow-y: auto !important; border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; background: rgba(0, 0, 0, 0.2) !important; }
-.input-area { margin-top: 10px !important; background: rgba(255, 255, 255, 0.05) !important; padding: 10px !important; border-radius: 12px !important; }
+.chat-window { flex-grow: 1 !important; border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; background: rgba(0, 0, 0, 0.2) !important; overflow-y: auto !important; }
+.input-area { margin-top: 10px !important; background: rgba(255, 255, 255, 0.05) !important; padding: 10px !important; border-radius: 12px !important; flex-shrink: 0 !important; }
 footer { display: none !important; }
-@media (max-width: 768px) { .main-container { padding: 5px !important; height: 100vh !important; } .header-row { padding: 5px !important; flex-wrap: wrap !important; } }
+@media (max-width: 768px) { .main-container { padding: 5px !important; height: auto !important; max-height: none !important; } .header-row { padding: 5px !important; flex-wrap: wrap !important; } }
 """
 
 def save_and_clear(msg):
     return "", msg
 
+def export_chat(history):
+    if not history: return None
+    with tempfile.NamedTemporaryFile(mode='w', suffix='.json', delete=False) as tf:
+        json.dump(history, tf, indent=2)
+        return tf.name
+
+def import_chat(file):
+    if file is None: return gr.update(), []
+    try:
+        with open(file.name, 'r') as f:
+            data = json.load(f)
+            if isinstance(data, list):
+                return data, data
+    except Exception as e:
+        logger.error(f"Import error: {e}")
+    return gr.update(), gr.update()
+
 def build_demo(enable_reload=True):
     with gr.Blocks(css=PREMIUM_CSS, title="Sage 6.5 - Oracle Intermediary") as demo:
         # State
-        threads = gr.State({})
-        tid = gr.State(str(uuid.uuid4()))
+        history_state = gr.State([])
         lang_state = gr.State("English")
         saved_msg = gr.State("")
 
@@ -33,8 +52,8 @@ def build_demo(enable_reload=True):
             with gr.Row(elem_classes="header-row"):
                 gr.Markdown("## 🔮 Sage 6.5")
                 with gr.Row():
-                    thread_dropdown = gr.Dropdown(label="Conversations", choices=[], interactive=True)
-                    new_btn = gr.Button("＋", variant="secondary")
+                    import_btn = gr.UploadButton("📥 Import", file_types=[".json"], size="sm")
+                    export_btn = gr.DownloadButton("📤 Export", size="sm")
             
             # Chat
             chatbot = gr.Chatbot(elem_classes="chat-window", type="messages", bubble_full_width=False, show_label=False)
@@ -47,56 +66,41 @@ def build_demo(enable_reload=True):
             short_answers = gr.Checkbox(label="Short Answers", value=False)
 
         # -- Logic --
-        def chat_wrapper(message, history, short_answers=False, threads=None, tid=None, lang="English"):
-            if threads is None: threads = {}
-            if tid is None: tid = str(uuid.uuid4())
+        def chat_wrapper(message, history, short_answers=False, lang="English"):
+            if history is None: history = []
             
-            # Instant Name Detection: If user says something that looks like a name
-            # and history is empty (or just welcome msg).
             history.append({"role": "user", "content": message})
             history.append({"role": "assistant", "content": ""})
 
-            # Check for name-only or "I am X" etc.
-            # If detected, we can force a tool call result into the first turn.
+            # Name Detection
             name_match = re.search(r"(?:mein name ist|ich bin|i am|my name is)\s+([a-zA-z\s]+)", message, re.I)
+            name_val = None
             if not name_match and len(message.split()) < 3 and message[0].isupper():
                 name_val = message.strip()
             elif name_match:
                 name_val = name_match.group(1).strip()
-            else:
-                name_val = None
-
-            force_topic = None
-            if name_val and len(history) <= 3: # First real turn
-                force_topic = "personal destiny"
-                logger.info(f"Instant name trigger detected: {name_val}")
 
             for part in chat_agent_stream(message, history[:-2], user_lang=lang, short_answers=short_answers, force_tool_call=(name_val is not None), forced_name=name_val):
                 if part == "__TURN_END__":
                     history.append({"role": "assistant", "content": ""})
-                    yield history, threads, gr.update(), gr.update()
+                    yield history, history
                 else:
                     history[-1]["content"] = part
-                    yield history, threads, gr.update(), gr.update()
+                    yield history, history
             
-            if tid not in threads: threads[tid] = {"history": history, "title": message[:20]}
-            threads[tid]["history"] = history
-            choices = [(v["title"], k) for k, v in threads.items()]
-            
-            # API compatibility check
-            if threads is None: # Called via simple API
-                yield history, gr.update(choices=choices, value=tid)
-            else:
-                yield history, threads, gr.update(choices=choices, value=tid), gr.update()
+            yield history, history
 
         # Wire Events
         msg_input.submit(save_and_clear, [msg_input], [msg_input, saved_msg], queue=False).then(
-            chat_wrapper, [saved_msg, chatbot, short_answers, threads, tid, lang_state], [chatbot, threads, thread_dropdown]
+            chat_wrapper, [saved_msg, history_state, short_answers, lang_state], [chatbot, history_state]
         )
         submit_btn.click(save_and_clear, [msg_input], [msg_input, saved_msg], queue=False).then(
-            chat_wrapper, [saved_msg, chatbot, short_answers, threads, tid, lang_state], [chatbot, threads, thread_dropdown]
+            chat_wrapper, [saved_msg, history_state, short_answers, lang_state], [chatbot, history_state]
         )
 
+        export_btn.click(export_chat, [history_state], [export_btn])
+        import_btn.upload(import_chat, [import_btn], [chatbot, history_state])
+
         def on_load(request: gr.Request):
             if not enable_reload: 
                 return [], "English", gr.update(), gr.update()
@@ -113,6 +117,6 @@ def build_demo(enable_reload=True):
 
         # API
         api_chat_btn = gr.Button("API CHAT", visible=False)
-        api_chat_btn.click(chat_wrapper, [msg_input, chatbot, short_answers], [chatbot, thread_dropdown], api_name="/chat")
+        api_chat_btn.click(chat_wrapper, [msg_input, chatbot, short_answers], [chatbot, history_state], api_name="/chat")
     
     return demo