Update app.py

app.py

@@ -1,126 +1,106 @@
 import streamlit as st
-
-st.set_page_config(page_title="CodeCraft", layout="wide")
-
-# Session state for each tab chat
-if "chats" not in st.session_state:
-    st.session_state.chats = {
-        "Debug": [],
-        "Generate": [],
-        "Explain": []
-    }
-
-# --- Custom CSS ---
-st.markdown("""
-<style>
-.chat-container {
-    padding-bottom: 70px; /* leave space for fixed input */
-}
-.user-msg, .ai-msg {
-    padding: 10px 14px;
-    margin: 6px 0;
-    border-radius: 12px;
-    max-width: 80%;
-    word-wrap: break-word;
-}
-.user-msg {
-    background: #DCF8C6;
-    margin-left: auto;
-    text-align: right;
-}
-.ai-msg {
-    background: #F1F0F0;
-    margin-right: auto;
-    text-align: left;
-}
-.fixed-input {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: #fff;
-    padding: 8px;
-    border-top: 1px solid #ddd;
-    display: flex;
-    align-items: center;
-    z-index: 999;
-}
-.fixed-input input {
-    flex: 1;
-    border-radius: 20px;
-    border: 1px solid #ccc;
-    padding: 10px 12px;
-    font-size: 14px;
-}
-.fixed-input button {
-    margin-left: 8px;
-    background: #4CAF50;
-    color: white;
-    border: none;
-    border-radius: 50%;
-    width: 42px;
-    height: 42px;
-    font-size: 18px;
-    cursor: pointer;
-}
-</style>
-""", unsafe_allow_html=True)
-
-
-tabs = st.tabs(["🐞 Debug", "⚡ Generate", "📖 Explain"])
-
-def render_chat(tab_name):
-    st.markdown('<div class="chat-container">', unsafe_allow_html=True)
-
-    # Show chat history
-    for role, msg in st.session_state.chats[tab_name]:
-        if role == "user":
-            st.markdown(f'<div class="user-msg">{msg}</div>', unsafe_allow_html=True)
-        else:
-            st.markdown(f'<div class="ai-msg">{msg}</div>', unsafe_allow_html=True)
-
-    st.markdown('</div>', unsafe_allow_html=True)
-
-    # Fixed input bar
-    st.markdown('<div class="fixed-input">', unsafe_allow_html=True)
-    col1, col2 = st.columns([8,1])
-    with col1:
-        user_input = st.text_input(
-            f"{tab_name}_input", 
-            "", 
-            key=f"{tab_name}_input_key",
-            label_visibility="collapsed"
-        )
-    with col2:
-        send_button = st.button("➤", key=f"{tab_name}_send")
-    st.markdown('</div>', unsafe_allow_html=True)
-
-    if send_button and user_input.strip():
-        # Save user msg
-        st.session_state.chats[tab_name].append(("user", user_input))
-
-        # Example AI reply
-        if tab_name == "Debug":
-            reply = f"Here’s the corrected version of your code:\n\n{user_input}\n\n✅ Fixed and explained."
-        elif tab_name == "Generate":
-            reply = f"Generated working code for:\n\n{user_input}\n\n✅ Explained simply."
-        else:
-            reply = f"Explanation:\n\n{user_input}\n\n✅ Made clear."
-
-        # Save AI reply
-        st.session_state.chats[tab_name].append(("ai", reply))
-
-        # Clear input
-        st.session_state[f"{tab_name}_input_key"] = ""
-
-
-# Render all three tabs
-with tabs[0]:
-    render_chat("Debug")
-with tabs[1]:
-    render_chat("Generate")
-with tabs[2]:
-    render_chat("Explain")
+from groq import Groq
+
+# Initialize Groq client
+client = Groq(api_key=st.secrets["GROQ_API_KEY"])
+
+# Sidebar model selector
+st.sidebar.title("⚙️ Settings")
+model_choice = st.sidebar.selectbox(
+    "Choose AI Model",
+    ["llama-3.1-8b-instant", "llama-3.1-70b-versatile", "mixtral-8x7b-32768"]
+)
+
+st.title("🤖 CodeCraft AI - Mini Copilot (Chat Edition)")
+
+# Session state for chats
+if "generate_chat" not in st.session_state:
+    st.session_state.generate_chat = []
+if "debug_chat" not in st.session_state:
+    st.session_state.debug_chat = []
+if "explain_chat" not in st.session_state:
+    st.session_state.explain_chat = []
+
+
+def chat_ui(tab_name, chat_history, system_prompt, input_key):
+    """Reusable chat UI for each tab with fixed bottom input bar"""
+
+    st.subheader(tab_name)
+
+    # --- Chat history display ---
+    chat_container = st.container()
+    with chat_container:
+        for role, msg in chat_history:
+            if role == "user":
+                with st.chat_message("user"):
+                    st.write(msg)
+            else:
+                with st.chat_message("assistant"):
+                    if "```" in msg:  # detect code blocks
+                        parts = msg.split("```")
+                        for i, part in enumerate(parts):
+                            if i % 2 == 1:  # inside code block
+                                lang, *code_lines = part.split("\n")
+                                code = "\n".join(code_lines)
+                                st.code(code, language=lang if lang else "python")
+                            else:
+                                st.write(part)
+                    else:
+                        st.write(msg)
+
+    # --- Chat input at bottom (centered) ---
+    input_container = st.container()
+    with input_container:
+        user_input = st.chat_input("Type your message...", key=input_key)
+
+    # Handle input
+    if user_input:
+        # Save user message
+        st.session_state[input_key + "_last"] = user_input
+        chat_history.append(("user", user_input))
+
+        # Generate AI reply
+        with st.spinner("Thinking..."):
+            response = client.chat.completions.create(
+                model=model_choice,
+                messages=[{"role": "system", "content": system_prompt}]
+                         + [{"role": role, "content": msg} for role, msg in chat_history],
+                temperature=0.4
+            )
+            ai_msg = response.choices[0].message.content
+
+        chat_history.append(("assistant", ai_msg))
+
+        # Force rerun so chat history appears ABOVE input
+        st.rerun()
+
+
+# Tabs
+tab1, tab2, tab3 = st.tabs(["💡 Generate Code", "🛠 Debug Code", "📘 Explain Code"])
+
+with tab1:
+    chat_ui(
+        "💡 Generate Code",
+        st.session_state.generate_chat,
+        "You are a helpful coding assistant. Generate correct code first, then a short simple explanation.",
+        input_key="generate_input"
+    )
+
+with tab2:
+    chat_ui(
+        "🛠 Debug Code",
+        st.session_state.debug_chat,
+        "You are an expert code debugger. Fix errors and give corrected code, then explain what changed and why in simple terms.",
+        input_key="debug_input"
+    )
+
+with tab3:
+    chat_ui(
+        "📘 Explain Code",
+        st.session_state.explain_chat,
+        "You are a teacher that explains code in simple words. The user pastes code, and you explain step by step.",
+        input_key="explain_input"
+    )