Fixing error

app.py

@@ -4,169 +4,120 @@ from utils import execute_code, export_session
 from chatbot import render_chatbot
 import json
 
-# ────────────────────────────────────────────────────────────────
-# 1️⃣ Page config (first call)
-st.set_page_config(page_title="Pro Code Playground", page_icon="💻", layout="wide")
+# 1️⃣ Page configuration (must be first)
+st.set_page_config(
+    page_title="Pro Code Playground",
+    page_icon="💻",
+    layout="wide"
+)
 
-# 2️⃣ Theme toggle (topbar)
+# 2️⃣ Dark mode toggle
 if 'dark_mode' not in st.session_state:
     st.session_state.dark_mode = True
 
-# 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
+dm = st.checkbox("🌙 Dark mode", value=st.session_state.dark_mode)
+st.session_state.dark_mode = dm
 
-# 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)"
+# 3️⃣ Theme variables
+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)"
+ACE_THEME = "monokai" if dm else "chrome"
 
-# 5️⃣ Inject global CSS
+# 4️⃣ Global CSS styling
 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;
+  .stApp {{ background-color: {BG}; color: {TEXT}; }}
+  [data-testid="stSidebar"] {{ background-color: {PANEL_BG} !important; }}
+  .ace_editor, .ace_scroller {{
+      background: {PANEL_BG} !important;
+      box-shadow: 0 4px 8px {SHADOW} !important;
+      border-radius: 8px !important;
   }}
-  .stButton > button:hover {{ transform: scale(1.02); }}
-
-  /* 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; }}
-
-  /* Textarea & Inputs */
   textarea, input, .stTextArea textarea {{
-    background: {PANEL_BG} !important; color: {TEXT} !important;
-    border: 1px solid {BORDER} !important;
+      background: {PANEL_BG} !important;
+      color: {TEXT} !important;
+      border: 1px solid {BORDER} !important;
+      border-radius: 4px !important;
   }}
-
-  /* Scrollbars */
-  ::-webkit-scrollbar {{ width: 6px; height: 6px; }}
-  ::-webkit-scrollbar-track {{ background: {PANEL_BG}; }}
-  ::-webkit-scrollbar-thumb {{ background: {ACCENT}; border-radius: 3px; }}
-
+  button, .stDownloadButton > button {{
+      background-color: {ACCENT} !important;
+      color: #fff !important;
+      border-radius: 6px !important;
+      transition: transform 0.1s;
+  }}
+  button:hover {{ transform: scale(1.02) !important; }}
+  .chat-container {{ background: {PANEL_BG} !important; border: 1px solid {BORDER} !important; border-radius: 8px !important; padding: 1rem; max-height: 480px; overflow-y: auto; }}
+  .chat-message {{ margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 12px; }}
+  .user-message {{ background: rgba(100,149,237,0.2); align-self: flex-end; }}
+  .bot-message {{ background: rgba(200,200,200,0.2); align-self: flex-start; }}
+  pre code {{ display: block; padding: 0.5rem; background: rgba(0,0,0,0.1); border-radius: 4px; overflow-x: auto; }}
 </style>
 """, unsafe_allow_html=True)
 
-# ────────────────────────────────────────────────────────────────
-# 6️⃣ App Header
+# 5️⃣ 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")
+# 6️⃣ Main layout
+gen, bot = st.columns((2,1), gap="large")
 
-with col_code:
+with gen:
     st.subheader("Editor")
     code = st_ace.st_ace(
         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
+        language="python",
+        theme=ACE_THEME,
+        keybinding="vscode",
+        font_size=14,
+        min_lines=20,
+        show_gutter=True,
+        wrap=True,
+        auto_update=True
     )
     if st.button("▶️ Run"):
         out, err, exc = execute_code(code)
         st.session_state.code_output = out
         st.session_state.error_output = err or exc
-
-    # 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.get("error_output"):
         st.error(st.session_state.error_output)
 
-with col_bot:
+with bot:
     st.subheader("Code Assistant")
-    render_chatbot(code, st.session_state.get("code_output",""), st.session_state.get("error_output",""))
+    render_chatbot(
+        code,
+        st.session_state.get("code_output", ""),
+        st.session_state.get("error_output", "")
+    )
 
-# ────────────────────────────────────────────────────────────────
-# 8️⃣ Export section (full width)
+# 7️⃣ Export section
 st.markdown("---")
 st.subheader("Export")
-data = export_session(
-    code, st.session_state.get("code_output",""), st.session_state.get("error_output","")
+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("📦 JSON", json.dumps(data, indent=2), "session.json", "application/json")
-with c2:
+col1, col2 = st.columns(2)
+with col1:
+    st.download_button(
+        "📦 JSON",
+        data=json.dumps(export_data, indent=2),
+        file_name="session.json",
+        mime="application/json"
+    )
+with col2:
     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")
 
-# 9️⃣ Footer
+# 8️⃣ Footer
 st.markdown(f"""
-<div style='text-align:center; margin-top:1.5rem; color:{TEXT}66;'>
-  Built with ❤️ & Streamlit — Enjoy coding!
+<div style='text-align:center; margin-top:1rem; color:{TEXT}66;'>
+  Built with ❤️ & Streamlit
 </div>
-""", unsafe_allow_html=True)
+""", unsafe_allow_html=True)