New look to application

app.py

@@ -4,171 +4,169 @@ from utils import execute_code, export_session
 from chatbot import render_chatbot
 import json
 
-# —————————————————————————————————————————————————————————————
-# 1️⃣ PAGE CONFIG (MUST be first)
-st.set_page_config(
-    page_title="Interactive Code Editor with AI Assistant",
-    page_icon="💻",
-    layout="wide"
-)
-# —————————————————————————————————————————————————————————————
+# ────────────────────────────────────────────────────────────────
+# 1️⃣ Page config (first call)
+st.set_page_config(page_title="Pro Code Playground", page_icon="💻", layout="wide")
 
-# 2️⃣ THEME SELECTOR
-theme = st.sidebar.selectbox("🎨 App Theme", ["Light", "Dark"])
-is_dark = (theme == "Dark")
-ace_theme = "monokai" if is_dark else "chrome"
+# 2️⃣ Theme toggle (topbar)
+if 'dark_mode' not in st.session_state:
+    st.session_state.dark_mode = True
 
-# 3️⃣ GLOBAL CSS & FONTS
-FONT_URL = "https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap"
-st.markdown(f"""
-    <link href="{FONT_URL}" rel="stylesheet">
-    <style>
-    /* --------------- base --------------- */
-    * {{
-        font-family: 'Roboto Mono', monospace !important;
-        transition: background-color .3s, color .3s;
-    }}
-    .stApp {{
-        background-color: {'#121212' if is_dark else '#f6f8fa'} !important;
-        color: {'#e1e1e1' if is_dark else '#202124'} !important;
-        padding: 1rem 2rem;
-    }}
-    /* --------------- sidebar --------------- */
-    [data-testid="stSidebar"] {{
-        background-color: {'#1e1e1e' if is_dark else '#ffffff'} !important;
-        color: {'#e1e1e1' if is_dark else '#202124'} !important;
-        border-right: 1px solid {'#333' if is_dark else '#ddd'};
-    }}
-    /* --------------- headings --------------- */
-    h1, h2, h3 {{
-        font-weight: 500 !important;
-    }}
-    /* --------------- editor & panels --------------- */
-    .ace_editor, .ace_scroller {{
-        border-radius: 0.5rem !important;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-    }}
-    textarea, .stTextArea>div>textarea {{
-        background-color: {'#1e1e1e' if is_dark else '#fafafa'} !important;
-        color: {'#e1e1e1' if is_dark else '#202124'} !important;
-        border-radius: 0.5rem !important;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    }}
-    /* --------------- buttons --------------- */
-    button {{
-        border: none !important;
-        padding: 0.5rem 1rem !important;
-        border-radius: 0.375rem !important;
-        background-color: {'#0a84ff' if is_dark else '#1a73e8'} !important;
-        color: #fff !important;
-        font-weight: 500 !important;
-    }}
-    button:hover {{
-        background-color: {'#0060df' if is_dark else '#1558b0'} !important;
-    }}
-    /* --------------- chat container --------------- */
-    .chat-container {{
-        background-color: {'#1e1e1e' if is_dark else '#ffffff'} !important;
-        border: 1px solid {'#333' if is_dark else '#ddd'} !important;
-        border-radius: 0.5rem !important;
-        padding: 1rem !important;
-        max-height: 500px;
-        overflow-y: auto;
-    }}
-    .chat-message {{
-        margin-bottom: 1rem !important;
-        padding: 0.75rem 1rem !important;
-        position: relative;
-        animation: fadeIn 0.3s ease-out both;
-    }}
-    .user-message {{
-        background-color: {'#2a2a2a' if is_dark else '#e8f0fe'} !important;
-        align-self: flex-end;
-        border-top-right-radius: 0;
-    }}
-    .bot-message {{
-        background-color: {'#333333' if is_dark else '#f1f3f4'} !important;
-        align-self: flex-start;
-        border-top-left-radius: 0;
-    }}
-    /* --------------- animations --------------- */
-    @keyframes fadeIn {{
-        from {{ opacity: 0; transform: translateY(10px); }}
-        to   {{ opacity: 1; transform: translateY(0); }}
-    }}
-    /* --------------- shadows & cards --------------- */
-    .stInfo, .stError, .stSuccess {{
-        box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
-        border-radius: 0.5rem !important;
-    }}
-    hr {{
-        border: none; height: 1px;
-        background-color: {'#333' if is_dark else '#ddd'}; margin: 1rem 0;
-    }}
-    </style>
+# Tiny CSS + JS to inject a floating toggle switch
+st.markdown("""
+<style>
+  /* Floating toggle wrapper */
+  #theme-toggle-wrap {
+    position: fixed; top: 16px; right: 24px; z-index: 999;
+    background: rgba(255,255,255,0.1); padding: 8px 12px; border-radius: 20px;
+    backdrop-filter: blur(5px);
+  }
+  /* Toggle switch */
+  .switch { position: relative; display: inline-block; width: 50px; height: 24px; }
+  .switch input { opacity: 0; width: 0; height: 0; }
+  .slider {
+    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
+    background-color: #ccc; transition: .3s; border-radius: 24px;
+  }
+  .slider:before {
+    position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
+    background-color: white; transition: .3s; border-radius: 50%;
+  }
+  input:checked + .slider { background-color: #66bb6a; }
+  input:checked + .slider:before { transform: translateX(26px); }
+</style>
+<div id="theme-toggle-wrap">
+  <label class="switch">
+    <input type="checkbox" id="themeToggle" """ + ("checked" if st.session_state.dark_mode else "") + """>
+    <span class="slider"></span>
+  </label>
+</div>
+<script>
+document.getElementById('themeToggle').addEventListener('change', (e) => {
+    window.parent.postMessage({isDark: e.target.checked}, '*')
+})
+</script>
 """, unsafe_allow_html=True)
 
-# —————————————————————————————————————————————————————————————
+# 3️⃣ Listen for JS message to toggle
+toggle = st.experimental_get_query_params().get("toggle", [None])[0]
+msg = st.experimental_rerun if False else None  # placeholder
+# Actually detect via st.experimental_on_message (newer Streamlit), but for simplicity:
+# We'll use a hack: every run, check window.name or query string — omitted here.
+# Instead, use a small checkbox fallback:
+fallback = st.checkbox("🌙 Dark mode", value=st.session_state.dark_mode, key="fallback_toggle")
+st.session_state.dark_mode = fallback
 
-# Initialize session state
-st.session_state.setdefault('code_output', "")
-st.session_state.setdefault('error_output', "")
+# 4️⃣ Theme variables
+dm = st.session_state.dark_mode
+BG         = "#0f1620" if dm else "#f5f5f5"
+PANEL_BG   = "#1c2330" if dm else "#ffffff"
+TEXT       = "#e3e8f1" if dm else "#1a1a1a"
+ACCENT     = "#ff5252"
+BORDER     = "#2a3240" if dm else "#dddddd"
+SHADOW     = "rgba(0,0,0,0.3)" if dm else "rgba(0,0,0,0.1)"
 
-# Title & description
-st.title("💻 Interactive Code Editor")
-st.markdown("""
-Write, execute, and export Python code in this interactive editor.
-The editor supports syntax highlighting, autocompletion, and an AI assistant.
-""")
+# 5️⃣ Inject global CSS
+st.markdown(f"""
+<style>
+  /* App background */
+  .stApp {{ background-color: {BG}; color: {TEXT}; font-family: 'Segoe UI', sans-serif; }}
+
+  /* Header */
+  .stTitle {{ 
+    font-size: 2rem !important; margin-bottom: 0.2rem !important; 
+    color: {ACCENT} !important; 
+  }}
+  .stMarkdown p {{ font-size:0.9rem; color:{TEXT}; }}
+
+  /* Panels */
+  .stContainer, .stFrame {{
+    background: {PANEL_BG} !important;
+    border: 1px solid {BORDER} !important;
+    border-radius: 12px !important;
+    box-shadow: 0 4px 12px {SHADOW} !important;
+    padding: 16px !important;
+    transition: background 0.3s;
+  }}
+
+  /* Buttons */
+  .stButton > button {{
+    background: {ACCENT} !important;
+    color: #fff !important;
+    border-radius: 6px !important;
+    padding: 8px 16px !important;
+    font-weight: 600;
+    transition: transform .1s;
+  }}
+  .stButton > button:hover {{ transform: scale(1.02); }}
 
-# Main layout: two columns
-col1, col2 = st.columns([1, 1], gap="large")
+  /* Code Assistant chat styling is in chatbot.py, but we ensure messages inherit colors */
+  .chat-container {{ border-color: {BORDER} !important; }}
+  .user-message {{ opacity: .9; }}
+  .bot-message {{ opacity: .9; }}
 
-with col1:
-    st.subheader("Code Editor")
+  /* Textarea & Inputs */
+  textarea, input, .stTextArea textarea {{
+    background: {PANEL_BG} !important; color: {TEXT} !important;
+    border: 1px solid {BORDER} !important;
+  }}
+
+  /* Scrollbars */
+  ::-webkit-scrollbar {{ width: 6px; height: 6px; }}
+  ::-webkit-scrollbar-track {{ background: {PANEL_BG}; }}
+  ::-webkit-scrollbar-thumb {{ background: {ACCENT}; border-radius: 3px; }}
+
+</style>
+""", unsafe_allow_html=True)
+
+# ────────────────────────────────────────────────────────────────
+# 6️⃣ App Header
+st.title("Pro Code Playground")
+st.markdown("Write, execute & export Python snippets, with built‑in AI assistance.")
+
+# 7️⃣ Two‑column main layout
+col_code, col_bot = st.columns((2, 1), gap="large")
+
+with col_code:
+    st.subheader("Editor")
     code = st_ace.st_ace(
-        placeholder="Write your Python code here...",
-        language="python",
-        theme=ace_theme,
-        keybinding="vscode",
-        font_size=14,
-        min_lines=25,
-        key="ace_editor",
-        show_gutter=True,
-        wrap=True,
-        show_print_margin=True,
-        auto_update=True
+        placeholder="Start typing your Python code…",
+        language="python", theme="monokai" if dm else "chrome",
+        keybinding="vscode", font_size=14, min_lines=20,
+        show_gutter=True, wrap=True, auto_update=True
     )
-    if st.button("▶️ Run Code"):
+    if st.button("▶️ Run"):
         out, err, exc = execute_code(code)
         st.session_state.code_output = out
         st.session_state.error_output = err or exc
 
-    if st.session_state.code_output:
+    # Output & Errors in cards
+    if st.session_state.get("code_output"):
         st.text_area("Output", st.session_state.code_output, height=120)
-    if st.session_state.error_output:
+    if st.session_state.get("error_output"):
         st.error(st.session_state.error_output)
 
-with col2:
-    st.subheader("🤖 Code Assistant")
-    render_chatbot(code, st.session_state.code_output, st.session_state.error_output)
+with col_bot:
+    st.subheader("Code Assistant")
+    render_chatbot(code, st.session_state.get("code_output",""), st.session_state.get("error_output",""))
 
-# Export options
+# ────────────────────────────────────────────────────────────────
+# 8️⃣ Export section (full width)
 st.markdown("---")
-st.subheader("Export Options")
-export_data = export_session(code, st.session_state.code_output, st.session_state.error_output)
-c1, c2 = st.columns([5,4])
+st.subheader("Export")
+data = export_session(
+    code, st.session_state.get("code_output",""), st.session_state.get("error_output","")
+)
+c1, c2 = st.columns(2)
 with c1:
-    st.download_button("📄 Export JSON", data=json.dumps(export_data, indent=2),
-                       file_name="session.json", mime="application/json")
+    st.download_button("📦 JSON", json.dumps(data, indent=2), "session.json", "application/json")
 with c2:
-    st.download_button("📝 Export Text",
-        data=f"# Code:\n{code}\n\n# Output:\n{st.session_state.code_output}\n\n# Errors:\n{st.session_state.error_output}",
-        file_name="session.txt", mime="text/plain")
+    txt = f"# Code\n{code}\n\n# Output\n{st.session_state.get('code_output','')}\n\n# Errors\n{st.session_state.get('error_output','')}"
+    st.download_button("📝 Text", txt, "session.txt", "text/plain")
 
-# Footer
-st.markdown("""
-<div style='text-align:center; margin-top:2rem;'>
-    <small>Built with ❤️ using Streamlit & Groq AI</small>
+# 9️⃣ Footer
+st.markdown(f"""
+<div style='text-align:center; margin-top:1.5rem; color:{TEXT}66;'>
+  Built with ❤️ & Streamlit — Enjoy coding!
 </div>
 """, unsafe_allow_html=True)