Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,222 +1,47 @@
 import streamlit as st
+import streamlit.components.v1 as components
 from huggingface_hub import InferenceClient
-import json
 
-# Force wide mode and premium dark base configuration
+# Force layout optimization
 st.set_page_config(page_title="SparkHelix AI", page_icon="🧬", layout="wide")
 
-# Hide standard Streamlit header and footer wrappers
-st.markdown("<style>#MainMenu, footer, header {visibility: hidden;} div.block-container{padding:0;}</style>", unsafe_allow_html=True)
+# Hide standard Streamlit header frameworks
+st.markdown("""
+<style>
+    #MainMenu, footer, header {visibility: hidden;} 
+    div.block-container {padding: 0rem !important; max-width: 100% !important;}
+    [data-testid="stSidebar"] {background-color: #0d1017 !important;}
+</style>
+""", unsafe_allow_html=True)
 
 # Initialize Session Logs
 if "messages" not in st.session_state:
     st.session_state.messages = [{"role": "assistant", "content": "Hello! I am SparkHelix. How can I help you discover or build today?"}]
 
 # =====================================================================
-# 🎨 HIGH-FIDELITY COPILOT CORE INTERFACE (CSS/HTML INJECTION)
+# 🎨 STREAMLINED COPILOT ARCHITECTURE
 # =====================================================================
-copilot_html = f"""
-<style>
-    @import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;500;600&display=swap');
-    
-    body {{
-        background-color: #030508 !important;
-        font-family: 'Segoe UI', system-ui, sans-serif;
-        color: #f3f4f6;
-        margin: 0;
-        padding: 0;
-    }}
-    
-    /* Layout Framework */
-    .copilot-container {{
-        display: flex;
-        height: 100vh;
-        width: 100vw;
-        background-color: #0b0d12;
-    }}
-    
-    /* Sleek Left Sidebar */
-    .copilot-sidebar {{
-        width: 260px;
-        background-color: #0d1017;
-        border-right: 1px solid #1e2530;
-        display: flex;
-        flex-direction: column;
-        padding: 20px;
-    }}
-    
-    .brand-title {{
-        font-size: 18px;
-        font-weight: 600;
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        margin-bottom: 30px;
-        color: #ffffff;
-    }}
-    
-    .new-chat-btn {{
-        background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
-        border: none;
-        color: white;
-        padding: 12px;
-        border-radius: 10px;
-        font-weight: 500;
-        cursor: pointer;
-        text-align: center;
-        margin-bottom: 20px;
-        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
-    }}
-    
-    /* Center Chat Stream */
-    .chat-workspace {{
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        background-color: #0b0d12;
-        position: relative;
-    }}
-    
-    .chat-header {{
-        padding: 20px 40px;
-        border-bottom: 1px solid #1e2530;
-        font-size: 16px;
-        font-weight: 500;
-        color: #9ca3af;
-    }}
-    
-    .message-stream {{
-        flex: 1;
-        overflow-y: auto;
-        padding: 40px 10% 120px 10%;
-        display: flex;
-        flex-direction: column;
-        gap: 24px;
-    }}
-    
-    /* Chat Bubble Speccing */
-    .chat-row {{
-        display: flex;
-        gap: 16px;
-        max-width: 800px;
-        width: 100%;
-        align-self: center;
-    }}
-    
-    .chat-row.user-row {{
-        justify-content: flex-end;
-    }}
-    
-    .avatar {{
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: 600;
-        font-size: 14px;
-    }}
-    
-    .avatar.ai-avatar {{
-        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
-        color: white;
-    }}
-    
-    .avatar.user-avatar {{
-        background-color: #374151;
-        color: #f3f4f6;
-    }}
-    
-    .bubble {{
-        padding: 14px 18px;
-        border-radius: 16px;
-        font-size: 15px;
-        line-height: 1.5;
-        max-width: 85%;
-    }}
-    
-    .ai-bubble {{
-        background-color: transparent;
-        color: #e5e7eb;
-    }}
-    
-    .user-bubble {{
-        background-color: #1e2533;
-        color: #ffffff;
-        border: 1px solid #2d3748;
-        border-radius: 16px 16px 4px 16px;
-    }}
-</style>
 
-<div class="copilot-container">
-    <div class="copilot-sidebar">
-        <div class="brand-title">🧬 SparkHelix Copilot</div>
-        <div class="new-chat-btn">➕ New Topic</div>
-        <div style="color: #4b5563; font-size: 12px; margin-top: auto;">System Status: Connected</div>
-    </div>
-    
-    <div class="chat-workspace">
-        <div class="chat-header">SparkHelix Workspace // Chat Context</div>
-        <div class="message-stream">
-"""
+# Build clean container styles using native markdown components
+st.title("🧬 SparkHelix Copilot")
+st.caption("Next-gen companion agent connected to web engines and inference clusters.")
+st.markdown("---")
 
-# Dynamically print bubbles inside our custom HTML shell
+# Render elements using clear blocks
 for msg in st.session_state.messages:
     if msg["role"] == "assistant":
-        copilot_html += f"""
-            <div class="chat-row">
-                <div class="avatar ai-avatar">🧬</div>
-                <div class="bubble ai-bubble">{msg['content']}</div>
-            </div>
-        """
+        with st.chat_message("assistant", avatar="🧬"):
+            st.markdown(f"**SparkHelix**\n\n{msg['content']}")
     else:
-        copilot_html += f"""
-            <div class="chat-row user-row">
-                <div class="bubble user-bubble">{msg['content']}</div>
-                <div class="avatar user-avatar">U</div>
-            </div>
-        """
-
-# Close the wrapper div
-copilot_html += "</div></div></div>"
-
-# Render the layout instantly
-st.markdown(copilot_html, unsafe_allow_html=True)
-
-# =====================================================================
-# 📥 FLOATING BOTTOM INPUT CONTROLLER (HACKED INTO POSITION)
-# =====================================================================
-st.markdown("""
-<style>
-    /* Pin the interactive chat input directly over the UI backdrop */
-    div[data-testid="stChatInput"] {
-        position: fixed !important;
-        bottom: 30px !important;
-        left: 53% !important;
-        transform: translateX(-50%) !important;
-        width: 55% !important;
-        max-width: 750px !important;
-        z-index: 999999 !important;
-        background-color: #151b26 !important;
-        border: 1px solid #2a3447 !important;
-        border-radius: 24px !important;
-        box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
-    }
-    textarea {
-        color: #ffffff !important;
-    }
-</style>
-""", unsafe_allow_html=True)
+        with st.chat_message("user"):
+            st.markdown(msg['content'])
 
+# Pinned Interactive Chat Box
 user_input = st.chat_input("Ask SparkHelix anything...")
 
 if user_input:
-    # Save input log
     st.session_state.messages.append({"role": "user", "content": user_input})
     
-    # Process AI request using the correct conversational wrapper
     try:
         client = InferenceClient()
         response = client.chat.completions.create(
@@ -228,6 +53,6 @@ if user_input:
         ai_reply = response.choices[0].message.content
         st.session_state.messages.append({"role": "assistant", "content": ai_reply})
     except Exception as e:
-        st.session_state.messages.append({"role": "assistant", "content": f"System Alert: Connection route congested. Details: {e}"})
+        st.session_state.messages.append({"role": "assistant", "content": f"System Alert: Routing congestion. Details: {e}"})
         
     st.rerun()