chat window 1

src/main.py

@@ -20,6 +20,87 @@ st.set_page_config(
     layout="wide"
 )
 
+st.markdown(""" <style>     .stAppDeployButton, #MainMenu { display: none !important; }     .main .block-container { padding-top: 1rem !important; }     body.chat-open .main .block-container { margin-right: 400px; }     iframe[height="1"] { display: none !important; } </style> """, unsafe_allow_html=True)
+
+# ---------------- CHAT PANEL INJECTION ----------------
+def inject_chat_panel(is_open: bool):
+    st.iframe(f"""
+    <script>
+        const win = window.parent;
+        const doc = win.document;
+
+        const old = doc.getElementById('ai-chat-panel');
+        if (old) old.remove();
+        doc.body.classList.remove('chat-open');
+
+        if ({'true' if is_open else 'false'}) {{
+            doc.body.classList.add('chat-open');
+
+            const panel = doc.createElement('div');
+            panel.id = 'ai-chat-panel';
+            panel.style.cssText = `
+                position: fixed;
+                top: 0;
+                right: 0;
+                width: 380px;
+                height: 100vh;
+                background: #ffffff;
+                border-left: 1px solid #e0e0e0;
+                z-index: 999999;
+                display: flex;
+                flex-direction: column;
+                box-shadow: -4px 0 24px rgba(0,0,0,0.08);
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            `;
+
+            panel.innerHTML = `
+                <div style="padding:1rem 1.25rem; border-bottom:1px solid #e0e0e0; display:flex; align-items:center;">
+                    <span style="color:#1a1a1a; font-weight:600; font-size:0.95rem;">💬 Ask AI</span>
+                </div>
+                <div id="ai-messages" style="flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:0.75rem;">
+                    <div style="color:#888; font-size:0.82rem; text-align:center;">Ask anything about your code.</div>
+                </div>
+                <div style="padding:0.75rem 1rem; border-top:1px solid #e0e0e0; display:flex; gap:0.5rem;">
+                    <input id="ai-input" type="text" placeholder="Ask about your code…"
+                        style="flex:1; background:#f5f5f5; border:1px solid #ddd; border-radius:6px;
+                               color:#1a1a1a; padding:0.5rem 0.75rem; font-size:0.85rem; outline:none;" />
+                    <button onclick="sendMessage()"
+                        style="background:#1a1a1a; color:#fff; border:none; border-radius:6px;
+                               padding:0.5rem 0.9rem; font-size:0.85rem; font-weight:600; cursor:pointer;">
+                        Send
+                    </button>
+                </div>
+            `;
+
+            doc.body.appendChild(panel);
+
+            win.sendMessage = function() {{
+                const input = doc.getElementById('ai-input');
+                const msgs = doc.getElementById('ai-messages');
+                const text = input.value.trim();
+                if (!text) return;
+
+                const userMsg = doc.createElement('div');
+                userMsg.style.cssText = 'background:#1a1a1a; border-radius:8px 8px 2px 8px; padding:0.5rem 0.75rem; color:#fff; font-size:0.85rem; align-self:flex-end; max-width:85%;';
+                userMsg.textContent = text;
+                msgs.appendChild(userMsg);
+                input.value = '';
+                msgs.scrollTop = msgs.scrollHeight;
+
+                const aiMsg = doc.createElement('div');
+                aiMsg.style.cssText = 'background:#f0f0f0; border-radius:8px 8px 8px 2px; padding:0.5rem 0.75rem; color:#1a1a1a; font-size:0.85rem; align-self:flex-start; max-width:85%;';
+                aiMsg.textContent = '…';
+                msgs.appendChild(aiMsg);
+                msgs.scrollTop = msgs.scrollHeight;
+            }};
+
+            doc.getElementById('ai-input').addEventListener('keydown', function(e) {{
+                if (e.key === 'Enter') win.sendMessage();
+            }});
+        }}
+    </script>
+    """, height=1)
+
 # ---------------- MAIN ----------------
 def main():
     file_manager = FileManager()
@@ -41,12 +122,17 @@ def main():
         st.session_state.last_applied_content = ""
     if "run_result" not in st.session_state:
         st.session_state.run_result = None
+    if "chat_open" not in st.session_state:
+        st.session_state.chat_open = False
 
-    # ---------------- FILE SELECT ----------------
+    # ---------------- SIDEBAR ----------------
     selected_file = navigation.render_sidebar()
     if selected_file:
         st.session_state.selected_file = selected_file
 
+    st.sidebar.markdown("---")
+    st.sidebar.caption("AI Code Editor")
+
     current_file = st.session_state.selected_file
 
     # ---------------- FILE SWITCH ----------------
@@ -60,46 +146,39 @@ def main():
         else:
             st.session_state.editor_content = ""
 
-    st.sidebar.markdown("---")
+    inject_chat_panel(st.session_state.chat_open)
-    st.sidebar.caption("AI Code Editor")
 
     # ---------------- MAIN UI ----------------
     if st.session_state.active_file:
-        col1, col2 = st.columns([3, 2])
+        title_col, btn_col = st.columns([5, 1])
+        with title_col:
+            st.subheader(f"✏️  {Path(st.session_state.active_file).name}")
+        with btn_col:
+            run_clicked = st.button("▶ Run", type="primary", use_container_width=True)
 
-        with col1:
+        editor = CodeEditor()
-            title_col, btn_col = st.columns([5, 1])
+        new_value = editor.display_code(
-            with title_col:
+            st.session_state.editor_content,
-                st.subheader(f"✏️  {Path(st.session_state.active_file).name}")
+            filename=st.session_state.active_file
-            with btn_col:
+        )
-                run_clicked = st.button("▶ Run", type="primary", use_container_width=True)
+        if new_value is not None:
+            if new_value != st.session_state.last_applied_content:
+                st.session_state.editor_content = new_value
+                st.session_state.last_applied_content = new_value
+                file_manager.save_file(st.session_state.active_file, new_value)
+                st.success("Saved ✔")
 
-            editor = CodeEditor()
+        if run_clicked:
-            new_value = editor.display_code(
+            with st.spinner("Running…"):
-                st.session_state.editor_content,
+                st.session_state.run_result = execution_engine.run_file(
-                filename=st.session_state.active_file
+                    st.session_state.active_file
-            )
+                )
-            if new_value is not None:
-                if new_value != st.session_state.last_applied_content:
-                    st.session_state.editor_content = new_value
-                    st.session_state.last_applied_content = new_value
-                    file_manager.save_file(st.session_state.active_file, new_value)
-                    st.success("Saved ✔")
 
-            if run_clicked:
+        if st.session_state.run_result is not None:
-                with st.spinner("Running…"):
+            st.markdown("---")
-                    st.session_state.run_result = execution_engine.run_file(
+            st.caption("Output")
-                        st.session_state.active_file
+            output_display.render_output(st.session_state.run_result)
-                    )
 
-        with col2:
-            chat = ChatInterface()
-            chat.display_chat(chat_manager)
-
-            if st.session_state.run_result is not None:
-                st.markdown("---")
-                st.caption("Output")
-                output_display.render_output(st.session_state.run_result)
     else:
         st.info("Select a file from the explorer")
 

src/ui/navigation.py

@@ -57,17 +57,23 @@ class FileNavigation:
     # ---------------- SIDEBAR RENDERER ----------------
     def render_sidebar(self) -> str | None:
         """
-        Renders the full sidebar: folder button, folder caption, divider, and tree.
+        Renders the full sidebar: folder button, caption, divider, and tree.
         Returns the selected file path or None.
         """
         st.sidebar.title("File Explorer")
         root_folder = st.session_state.get("root_folder")
 
         with st.sidebar:
-            if st.button("📂  Choose Folder", key="pick_folder"):
+            btn_left, btn_right = st.columns(2)
-                picked = self.pick_folder()
+            with btn_left:
-                if picked:
+                if st.button("📂 Folder", key="pick_folder", use_container_width=True):
-                    st.session_state.root_folder = picked
+                    picked = self.pick_folder()
+                    if picked:
+                        st.session_state.root_folder = picked
+                        st.rerun()
+            with btn_right:
+                if st.button("💬 Ask AI", key="toggle_chat", use_container_width=True):
+                    st.session_state.chat_open = not st.session_state.get("chat_open", False)
                     st.rerun()
 
             if root_folder: