Update app.py

app.py

@@ -10,146 +10,342 @@ import uuid
 st.set_page_config(
     page_title="Chat Flow 🕷",
     page_icon="💬",
-    initial_sidebar_state="collapsed"
+    initial_sidebar_state="collapsed",
+    layout="wide"
 )
 
-# CSS - Keep original web design, add mobile responsiveness only
+# Dark theme CSS matching the BuildHub design
 st.markdown("""
 <style>
+    /* Import Google Fonts for modern typography */
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+    
+    /* Main app dark theme */
     .stApp {
-        background: white;
+        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+        font-family: 'Inter', sans-serif;
+        color: #ffffff;
     }
     
+    /* Container styling */
     .main .block-container {
-        max-width: 800px;
+        max-width: 1200px;
+        padding: 2rem;
     }
     
+    /* Hide Streamlit elements */
     #MainMenu {visibility: hidden;}
     footer {visibility: hidden;}
     header {visibility: hidden;}
     .stDeployButton {display: none;}
     
+    /* Dark sidebar with golden accents */
+    .css-1d391kg {
+        background: linear-gradient(180deg, #1f1f1f 0%, #2a2a2a 100%);
+        border-right: 1px solid #333;
+        padding: 1rem;
+    }
+    
+    .css-1d391kg .stMarkdown {
+        color: #ffffff;
+    }
+    
+    /* Title styling with golden accent */
+    h1 {
+        color: #ffd700;
+        font-weight: 700;
+        font-size: 2.5rem;
+        text-align: center;
+        margin-bottom: 0.5rem;
+        text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
+    }
+    
+    .stCaption {
+        color: #cccccc;
+        text-align: center;
+        font-size: 1.1rem;
+        margin-bottom: 2rem;
+    }
+    
+    /* Chat messages with modern dark styling */
+    [data-testid="chat-message-user"] {
+        background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
+        color: #1a1a1a;
+        border-radius: 20px;
+        padding: 1rem 1.5rem;
+        margin: 1rem 0;
+        margin-left: 20%;
+        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
+        border: 1px solid rgba(255, 215, 0, 0.3);
+    }
+    
+    [data-testid="chat-message-user"] .stMarkdown {
+        color: #1a1a1a;
+        font-weight: 500;
+    }
+    
+    [data-testid="chat-message-assistant"] {
+        background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
+        color: #ffffff;
+        border-radius: 20px;
+        padding: 1rem 1.5rem;
+        margin: 1rem 0;
+        margin-right: 20%;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+        border: 1px solid #444;
+    }
+    
+    [data-testid="chat-message-assistant"] .stMarkdown {
+        color: #ffffff;
+    }
+    
+    /* Chat input with dark theme */
+    .stChatInput {
+        background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
+        border-radius: 25px;
+        border: 1px solid #444;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    }
+    
+    .stChatInput input {
+        background: transparent;
+        color: #ffffff;
+        border: none;
+        font-size: 16px;
+        padding: 1rem 1.5rem;
+    }
+    
+    .stChatInput input::placeholder {
+        color: #888;
+    }
+    
+    /* Sidebar sections */
+    .css-1d391kg h1, .css-1d391kg h2, .css-1d391kg h3 {
+        color: #ffd700;
+        font-weight: 600;
+    }
+    
+    /* Status indicators with golden theme */
+    .stSuccess {
+        background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
+        color: #1a1a1a;
+        border: none;
+        border-radius: 10px;
+    }
+    
+    .stInfo {
+        background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
+        color: #ffffff;
+        border: none;
+        border-radius: 10px;
+    }
+    
+    .stError {
+        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
+        color: #ffffff;
+        border: none;
+        border-radius: 10px;
+    }
+    
+    .stWarning {
+        background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
+        color: #1a1a1a;
+        border: none;
+        border-radius: 10px;
+    }
+    
+    /* Buttons with golden accent */
+    .stButton button {
+        background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
+        color: #1a1a1a;
+        border: none;
+        border-radius: 12px;
+        font-weight: 600;
+        padding: 0.75rem 1.5rem;
+        transition: all 0.3s ease;
+        box-shadow: 0 2px 10px rgba(255, 215, 0, 0.2);
+    }
+    
+    .stButton button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
+    }
+    
+    /* Secondary buttons */
+    .stButton button[kind="secondary"] {
+        background: linear-gradient(135deg, #444 0%, #555 100%);
+        color: #ffffff;
+        border: 1px solid #666;
+    }
+    
+    .stButton button[kind="secondary"]:hover {
+        background: linear-gradient(135deg, #555 0%, #666 100%);
+    }
+    
+    /* Selectbox styling */
+    .stSelectbox > div > div {
+        background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
+        border: 1px solid #444;
+        border-radius: 10px;
+        color: #ffffff;
+    }
+    
+    .stSelectbox > div > div:hover {
+        border-color: #ffd700;
+    }
+    
+    /* Checkbox styling */
+    .stCheckbox > label {
+        color: #ffffff;
+    }
+    
+    /* Text areas */
+    .stTextArea textarea {
+        background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
+        color: #ffffff;
+        border: 1px solid #444;
+        border-radius: 10px;
+    }
+    
+    /* Expander styling */
+    .streamlit-expanderHeader {
+        background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
+        color: #ffd700;
+        border-radius: 10px;
+        border: 1px solid #444;
+    }
+    
+    .streamlit-expanderContent {
+        background: #1f1f1f;
+        border: 1px solid #333;
+        border-radius: 0 0 10px 10px;
+    }
+    
+    /* Model ID styling */
     .model-id {
-        color: #28a745;
-        font-family: monospace;
+        color: #ffd700;
+        font-family: 'Courier New', monospace;
+        font-weight: bold;
+        background: rgba(255, 215, 0, 0.1);
+        padding: 0.25rem 0.5rem;
+        border-radius: 5px;
+        border: 1px solid rgba(255, 215, 0, 0.3);
     }
     
     .model-attribution {
-        color: #28a745;
+        color: #ffd700;
         font-size: 0.8em;
         font-style: italic;
+        text-align: right;
+        margin-top: 0.5rem;
+        padding-top: 0.5rem;
+        border-top: 1px solid #444;
+    }
+    
+    /* Divider styling */
+    hr {
+        border-color: #444;
+        margin: 1.5rem 0;
+    }
+    
+    /* Download button */
+    .stDownloadButton button {
+        background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
+        color: #ffffff;
+        border: none;
+        border-radius: 10px;
+        font-weight: 600;
     }
     
-    /* MOBILE ONLY - doesn't affect web */
+    /* Welcome message area */
+    .welcome-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 400px;
+        text-align: center;
+    }
+    
+    .welcome-orb {
+        width: 120px;
+        height: 120px;
+        border-radius: 50%;
+        background: radial-gradient(circle at 30% 30%, #ffd700, #ffed4e, #cc8400);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 2rem;
+        box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
+        animation: pulse 2s infinite;
+    }
+    
+    @keyframes pulse {
+        0% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.3); }
+        50% { box-shadow: 0 0 60px rgba(255, 215, 0, 0.5); }
+        100% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.3); }
+    }
+    
+    .welcome-title {
+        font-size: 2rem;
+        font-weight: 700;
+        color: #ffd700;
+        margin-bottom: 1rem;
+    }
+    
+    .welcome-subtitle {
+        font-size: 1.1rem;
+        color: #cccccc;
+        margin-bottom: 2rem;
+    }
+    
+    /* Mobile responsiveness */
     @media (max-width: 768px) {
-        .stApp {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        }
-        
         .main .block-container {
+            padding: 1rem 0.5rem;
             max-width: 100%;
-            padding: 0.5rem;
-        }
-        
-        /* Make sidebar work better on mobile */
-        .css-1d391kg {
-            width: 100% !important;
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-        }
-        
-        /* Mobile text sizing */
-        .stMarkdown {
-            font-size: 14px !important;
-            color: #333 !important;
         }
         
         h1 {
-            font-size: 1.5rem !important;
-            color: white;
-            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-            text-align: center;
-        }
-        
-        .stCaption {
-            color: rgba(255, 255, 255, 0.8);
-            text-align: center;
-        }
-        
-        /* Mobile buttons */
-        .stButton button {
-            border-radius: 8px;
-            font-size: 14px;
+            font-size: 2rem;
         }
         
-        /* Chat input for mobile */
-        .stChatInput {
-            background: rgba(255, 255, 255, 0.9);
-            border-radius: 20px;
-            backdrop-filter: blur(10px);
-        }
-        
-        .stChatInput input {
-            font-size: 16px; /* Prevents zoom on iOS */
+        [data-testid="chat-message-user"] {
+            margin-left: 10%;
+            padding: 0.75rem 1rem;
         }
         
-        /* Chat messages - SIMPLE styling that works */
-        [data-testid="chat-message-user"] {
-            background: #007bff !important;
-            color: white !important;
-            border-radius: 10px !important;
-            padding: 10px !important;
-            margin: 5px 0 !important;
+        [data-testid="chat-message-assistant"] {
+            margin-right: 10%;
+            padding: 0.75rem 1rem;
         }
         
-        [data-testid="chat-message-user"] .stMarkdown {
-            color: white !important;
+        .welcome-orb {
+            width: 80px;
+            height: 80px;
         }
         
-        [data-testid="chat-message-assistant"] {
-            background: white !important;
-            color: #333 !important;
-            border-radius: 10px !important;
-            padding: 10px !important;
-            margin: 5px 0 !important;
-            border: 1px solid #ddd !important;
+        .welcome-title {
+            font-size: 1.5rem;
         }
         
-        [data-testid="chat-message-assistant"] .stMarkdown {
-            color: #333 !important;
+        .css-1d391kg {
+            width: 100% !important;
         }
     }
     
-    /* Extra small screens (iPhone 5, old phones) */
+    /* Extra small screens */
     @media (max-width: 480px) {
-        .main .block-container {
-            padding: 0.25rem;
-        }
-        
-        .stChatMessage {
-            padding: 0.75rem;
-            margin: 0.25rem 0;
-        }
-        
-        .stChatMessage[data-testid="user-message"] {
-            margin-left: 8%;
-        }
-        
-        .stChatMessage[data-testid="assistant-message"] {
-            margin-right: 8%;
-        }
-        
-        h1 {
-            font-size: 1.3rem !important;
+        [data-testid="chat-message-user"] {
+            margin-left: 5%;
         }
         
-        .stButton button {
-            font-size: 12px;
-            padding: 0.4rem;
+        [data-testid="chat-message-assistant"] {
+            margin-right: 5%;
         }
         
-        .stMarkdown {
-            font-size: 13px;
+        .main .block-container {
+            padding: 0.5rem 0.25rem;
         }
     }
 </style>
@@ -191,23 +387,21 @@ def clear_chat_history():
 def get_user_id():
     """Get unique ID for this user session"""
     if 'user_id' not in st.session_state:
-        st.session_state.user_id = str(uuid.uuid4())[:8]  # Short ID for family use
+        st.session_state.user_id = str(uuid.uuid4())[:8]
     return st.session_state.user_id
 
 def update_online_users():
     """Update that this user is online right now"""
     try:
-        # Load current online users
         users = {}
         if os.path.exists(USERS_FILE):
             with open(USERS_FILE, 'r') as f:
                 users = json.load(f)
         
-        # Add/update this user
         user_id = get_user_id()
         users[user_id] = {
             'last_seen': datetime.now().isoformat(),
-            'name': f'User-{user_id}'  # You can customize this
+            'name': f'User-{user_id}'
         }
         
         # Remove users not seen in last 5 minutes
@@ -218,13 +412,12 @@ def update_online_users():
             if current_time - last_seen < timedelta(minutes=5):
                 active_users[uid] = data
         
-        # Save updated list
         with open(USERS_FILE, 'w') as f:
             json.dump(active_users, f, indent=2)
         
         return len(active_users)
     except Exception:
-        return 1  # If error, assume at least you're online
+        return 1
 
 def get_online_count():
     """Get number of people currently online"""
@@ -235,7 +428,6 @@ def get_online_count():
         with open(USERS_FILE, 'r') as f:
             users = json.load(f)
         
-        # Check who's still active (last 5 minutes)
         current_time = datetime.now()
         active_count = 0
         for data in users.values():
@@ -274,11 +466,10 @@ def get_ai_response(messages, model="openai/gpt-3.5-turbo"):
     headers = {
         "Content-Type": "application/json",
         "Authorization": f"Bearer {OPENROUTER_API_KEY}",
-        "HTTP-Referer": "http://localhost:8501",  # Optional: Your site URL
-        "X-Title": "Streamlit AI Assistant"  # Optional: Your app name
+        "HTTP-Referer": "http://localhost:8501",
+        "X-Title": "Streamlit AI Assistant"
     }
     
-    # Create system message and user messages
     api_messages = [{"role": "system", "content": "You are a helpful AI assistant. Provide clear and helpful responses."}]
     api_messages.extend(messages)
     
@@ -296,7 +487,6 @@ def get_ai_response(messages, model="openai/gpt-3.5-turbo"):
     try:
         response = requests.post(url, headers=headers, json=data, stream=True, timeout=60)
         
-        # Better error handling
         if response.status_code != 200:
             error_detail = ""
             try:
@@ -309,12 +499,9 @@ def get_ai_response(messages, model="openai/gpt-3.5-turbo"):
             return
         
         full_response = ""
-        buffer = ""
         
-        # Using your working streaming logic
         for line in response.iter_lines():
             if line:
-                # The server sends lines starting with "data: ..."
                 if line.startswith(b"data: "):
                     data_str = line[len(b"data: "):].decode("utf-8")
                     if data_str.strip() == "[DONE]":
@@ -345,40 +532,35 @@ st.caption("10 powerful Models, one simple chat.")
 
 # Sidebar
 with st.sidebar:
-    st.header("Settings")
+    st.header("⚙️ Settings")
     
     # API Status
     status = check_api_status()
     if status == "Connected":
         st.success("🟢 API Connected")
     elif status == "No API Key":
-        st.error("No API Key")
+        st.error("❌ No API Key")
     else:
-        st.warning("Connection Issue")
+        st.warning("⚠️ Connection Issue")
     
     st.divider()
     
     # Live Users Section
-    st.header("👥 Who's Online")
-    
-    # Update that you're online
+    st.header("👥 Live Users")
     online_count = update_online_users()
     
-    # Show live count
     if online_count == 1:
         st.info("🟢 Just you online")
     else:
         st.success(f"🟢 {online_count} people online")
     
-    # Show your session
     your_id = get_user_id()
     st.caption(f"You: User-{your_id}")
     
-    # Quick refresh button
-    if st.button("Refresh", use_container_width=True):
+    if st.button("🔄 Refresh", use_container_width=True):
         st.rerun()
     
-    # Debug Section
+    # Debug section
     with st.expander("🔍 Debug Info"):
         if os.path.exists(USERS_FILE):
             with open(USERS_FILE, 'r') as f:
@@ -394,7 +576,8 @@ with st.sidebar:
     
     st.divider()
     
-    # All models including new ones
+    # Model Selection
+    st.header("🤖 AI Models")
     models = [
         ("GPT-3.5 Turbo", "openai/gpt-3.5-turbo"),
         ("LLaMA 3.1 8B", "meta-llama/llama-3.1-8b-instruct"),
@@ -411,75 +594,75 @@ with st.sidebar:
     model_names = [name for name, _ in models]
     model_ids = [model_id for _, model_id in models]
     
-    selected_index = st.selectbox("Model", range(len(model_names)), 
+    selected_index = st.selectbox("Choose Model", range(len(model_names)), 
                                 format_func=lambda x: model_names[x], 
                                 index=0)
     selected_model = model_ids[selected_index]
     
-    # Show selected model ID in green
     st.markdown(f"**Model ID:** <span class='model-id'>{selected_model}</span>", unsafe_allow_html=True)
     
     st.divider()
     
     # Chat History Controls
-    st.header("Chat History")
+    st.header("💬 Chat History")
     
-    # Show number of messages
     if st.session_state.messages:
-        st.info(f"Messages stored: {len(st.session_state.messages)}")
+        st.info(f"📝 {len(st.session_state.messages)} messages stored")
     
-    # Auto-save toggle
     auto_save = st.checkbox("Auto-save messages", value=True)
     
-    # Manual save/load buttons
     col1, col2 = st.columns(2)
     with col1:
-        if st.button("Save History", use_container_width=True):
+        if st.button("💾 Save", use_container_width=True):
             save_chat_history(st.session_state.messages)
-            st.success("History saved!")
+            st.success("Saved!")
     
     with col2:
-        if st.button("Load History", use_container_width=True):
+        if st.button("📂 Load", use_container_width=True):
             st.session_state.messages = load_chat_history()
-            st.success("History loaded!")
+            st.success("Loaded!")
             st.rerun()
     
-    st.divider()
-    
-    # View History
-    if st.button("View History File", use_container_width=True):
+    with st.expander("📋 More Options"):
+        if st.button("👁️ View History File", use_container_width=True):
+            if os.path.exists(HISTORY_FILE):
+                with open(HISTORY_FILE, 'r', encoding='utf-8') as f:
+                    history_content = f.read()
+                st.text_area("Chat History (JSON)", history_content, height=150)
+            else:
+                st.warning("No history file found")
+        
         if os.path.exists(HISTORY_FILE):
-            with open(HISTORY_FILE, 'r', encoding='utf-8') as f:
-                history_content = f.read()
-            st.text_area("Chat History (JSON)", history_content, height=200)
-        else:
-            st.warning("No history file found")
-    
-    # Download History
-    if os.path.exists(HISTORY_FILE):
-        with open(HISTORY_FILE, 'rb') as f:
-            st.download_button(
-                label="Download History",
-                data=f.read(),
-                file_name=f"chat_history_{datetime.now().strftime('%Y%m%d_%H%M%S')}.json",
-                mime="application/json",
-                use_container_width=True
-            )
-    
-    st.divider()
-    
-    # Clear controls
-    if st.button("Clear Chat", use_container_width=True, type="secondary"):
-        clear_chat_history()
-        st.success("Chat cleared!")
-        st.rerun()
+            with open(HISTORY_FILE, 'rb') as f:
+                st.download_button(
+                    label="⬇️ Download History",
+                    data=f.read(),
+                    file_name=f"chat_history_{datetime.now().strftime('%Y%m%d_%H%M%S')}.json",
+                    mime="application/json",
+                    use_container_width=True
+                )
+        
+        if st.button("🗑️ Clear Chat", use_container_width=True, type="secondary"):
+            clear_chat_history()
+            st.success("Chat cleared!")
+            st.rerun()
+
+# Welcome message when no messages
+if not st.session_state.messages:
+    st.markdown("""
+    <div class="welcome-container">
+        <div class="welcome-orb">
+            <span style="font-size: 3rem;">🕷</span>
+        </div>
+        <div class="welcome-title">Welcome back!</div>
+        <div class="welcome-subtitle">Which AI model do you want to chat with today?</div>
+    </div>
+    """, unsafe_allow_html=True)
 
 # Display chat messages
 for message in st.session_state.messages:
     with st.chat_message(message["role"]):
-        # Check if this is an assistant message with attribution
         if message["role"] == "assistant" and "Response created by:" in message["content"]:
-            # Split content and attribution
             parts = message["content"].split("\n\n---\n*Response created by:")
             main_content = parts[0]
             if len(parts) > 1:
@@ -492,23 +675,18 @@ for message in st.session_state.messages:
             st.markdown(message["content"])
 
 # Chat input
-if prompt := st.chat_input("Chat Smarter. Chat many Brains"):
-    # Update online status when user sends message
+if prompt := st.chat_input("Tell us about your capabilities..."):
     update_online_users()
     
-    # Add user message
     user_message = {"role": "user", "content": prompt}
     st.session_state.messages.append(user_message)
     
-    # Auto-save if enabled
     if auto_save:
         save_chat_history(st.session_state.messages)
     
-    # Display user message
     with st.chat_message("user"):
         st.markdown(prompt)
     
-    # Get AI response
     with st.chat_message("assistant"):
         placeholder = st.empty()
         
@@ -518,7 +696,6 @@ if prompt := st.chat_input("Chat Smarter. Chat many Brains"):
                 full_response = response
                 placeholder.markdown(full_response + "▌")
             
-            # Remove cursor and show final response
             placeholder.markdown(full_response)
             
         except Exception as e:
@@ -526,14 +703,12 @@ if prompt := st.chat_input("Chat Smarter. Chat many Brains"):
             placeholder.markdown(error_msg)
             full_response = error_msg
     
-    # Add AI response to messages with attribution
     full_response_with_attribution = full_response + f"\n\n---\n*Response created by: **{model_names[selected_index]}***"
     assistant_message = {"role": "assistant", "content": full_response_with_attribution}
     st.session_state.messages.append(assistant_message)
     
-    # Auto-save if enabled
     if auto_save:
         save_chat_history(st.session_state.messages)
 
-# Show currently using model
+# Footer
 st.caption(f"Currently using: **{model_names[selected_index]}**")