Update app.py

app.py

@@ -1,21 +1,16 @@
 import streamlit as st
 from groq import Groq
 import requests
-import html
 
-# -----------------------------
-# Page config
-# -----------------------------
-st.set_page_config(page_title="CodeCraft AI", layout="wide")
-
-# -----------------------------
+# =======================
 # API Clients Initialization
-# -----------------------------
+# =======================
 groq_client = None
 groq_status = "❌"
 if "GROQ_API_KEY" in st.secrets:
     try:
         groq_client = Groq(api_key=st.secrets["GROQ_API_KEY"])
+        # simple test request
         groq_client.models.list()
         groq_status = "✅"
     except Exception:
@@ -27,323 +22,187 @@ hf_status = "❌"
 if huggingface_api_key:
     try:
         headers = {"Authorization": f"Bearer {huggingface_api_key}"}
-        response = requests.get(
-            "https://api-inference.huggingface.co/status",
-            headers=headers,
-            timeout=10,
-        )
-        if response.status_code in [200, 401, 403]:
+        response = requests.get("https://api-inference.huggingface.co/status", headers=headers)
+        if response.status_code in [200, 401, 403]:  # API exists
             hf_status = "✅"
     except Exception:
         hf_status = "❌"
 
-# -----------------------------
-# CSS layout & styling
-# -----------------------------
-SIDEBAR_WIDTH_PX = 300
-st.markdown(
-    f"""
-    <style>
-    /* Sidebar */
-    [data-testid="stSidebar"] {{
-        width: {SIDEBAR_WIDTH_PX}px;
-        min-width: {SIDEBAR_WIDTH_PX}px;
-        max-width: {SIDEBAR_WIDTH_PX}px;
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        overflow-y: auto;
-        padding: 20px 12px !important;
-        background: #f7f9fc;
-        border-right: 1px solid #e0e0e0;
-    }}
-
-    /* Main content */
-    .block-container {{
-        margin-left: {SIDEBAR_WIDTH_PX + 20}px;
-        padding-top: 16px;
-    }}
-
-    /* Chat panel full height */
-    .chat-panel {{
-        height: calc(100vh - 170px);
-        overflow-y: auto;
-        padding: 12px 16px;
-        background: transparent;
-    }}
-
-    /* Message bubbles */
-    .msg-row {{ display:flex; margin:8px 0; }}
-    .msg-user {{ justify-content:flex-end; }}
-    .msg-assistant {{ justify-content:flex-start; }}
-    .bubble {{
-        max-width: 75%;
-        padding:10px 14px;
-        border-radius:14px;
-        white-space:pre-wrap;
-        word-wrap:break-word;
-        font-size:15px;
-        line-height:1.5;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-    }}
-    .bubble-user {{
-        background:#0b1020;
-        color:#fff;
-        border-radius:14px 14px 6px 14px;
-    }}
-    .bubble-assistant {{
-        background:#eef0f2;
-        color:#111;
-        border-radius:14px 14px 14px 6px;
-    }}
-
-    /* Code block */
-    .code-block {{
-        background:#0b0b0b;
-        color:#e6e6e6;
-        padding:10px;
-        border-radius:6px;
-        overflow:auto;
-        font-family:monospace;
-    }}
-
-    /* Fixed input */
-    div[data-testid="stChatInput"], .stChatInput {{
-        position: fixed !important;
-        bottom: 36px !important;
-        left: {SIDEBAR_WIDTH_PX + 24}px !important;
-        right: 24px !important;
-        z-index: 99999;
-        background: #fff !important;
-        border-radius: 12px;
-        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
-        padding: 6px 12px !important;
-    }}
-
-    /* Footer */
-    .cc-footer {{
-        position: fixed;
-        bottom: 0;
-        left: {SIDEBAR_WIDTH_PX + 24}px;
-        right: 24px;
-        text-align: center;
-        font-size: 13px;
-        color: gray;
-        padding: 6px 0;
-        background: #fafafa;
-        border-top: 1px solid #e0e0e0;
-        z-index: 99998;
-    }}
-
-    footer {{ visibility: hidden; }}
-    </style>
-    """,
-    unsafe_allow_html=True,
-)
 
-# -----------------------------
-# Sidebar: Settings + Sliders + Chats
-# -----------------------------
+# =======================
+# Sidebar Settings
+# =======================
 st.sidebar.title("⚙️ Settings")
 st.sidebar.markdown(f"**Groq API Status:** {groq_status}")
 st.sidebar.markdown(f"**HuggingFace API Status:** {hf_status}")
 
 api_priority = st.sidebar.radio(
-    "Choose API Priority", ["Groq First", "HuggingFace First"], index=0
+    "Choose API Priority",
+    ["Groq First", "HuggingFace First"],
+    index=0
 )
+
 model_choice = st.sidebar.selectbox(
     "Choose Model",
-    ["llama-3.1-8b-instant", "llama-3.1-70b-versatile", "mixtral-8x7b-32768"],
+    ["llama-3.1-8b-instant", "llama-3.1-70b-versatile", "mixtral-8x7b-32768"]
 )
 
-st.sidebar.markdown("### 🔧 Parameters")
-temperature = st.sidebar.slider("Temperature", 0.0, 1.0, 0.4, 0.05)
-max_tokens = st.sidebar.slider("Max Tokens", 100, 2000, 500, 50)
-top_p = st.sidebar.slider("Top P", 0.1, 1.0, 0.9, 0.05)
-
-st.sidebar.markdown("---")
-st.sidebar.markdown("### 💬 Chats")
-
-if "chats" not in st.session_state:
-    st.session_state.chats = {"Chat 1": {"generate": [], "debug": [], "explain": []}}
-if "active_chat" not in st.session_state:
-    st.session_state.active_chat = "Chat 1"
-if "menu_open" not in st.session_state:
-    st.session_state.menu_open = {}
-
-if st.sidebar.button("➕ New Chat"):
-    idx = len(st.session_state.chats) + 1
-    new_name = f"Chat {idx}"
-    st.session_state.chats[new_name] = {"generate": [], "debug": [], "explain": []}
-    st.session_state.active_chat = new_name
-    st.rerun()
-
-for chat_name in list(st.session_state.chats.keys()):
-    c1, c2 = st.sidebar.columns([7, 1])
-    if c1.button(chat_name, key=f"select_{chat_name}"):
-        st.session_state.active_chat = chat_name
-        st.rerun()
-    if c2.button("⋮", key=f"menu_{chat_name}"):
-        st.session_state.menu_open[chat_name] = not st.session_state.menu_open.get(
-            chat_name, False
-        )
-        st.rerun()
+st.title("🤖 CodeCraft AI - Mini Copilot (Chat Edition)")
 
-    if st.session_state.menu_open.get(chat_name, False):
-        action = st.sidebar.radio(
-            f"Options for {chat_name}", ["None", "Rename", "Delete"], key=f"opt_{chat_name}"
-        )
-        if action == "Rename":
-            new_label = st.sidebar.text_input(
-                "New name:", value=chat_name, key=f"rename_{chat_name}"
-            )
-            if st.sidebar.button("Save", key=f"save_{chat_name}"):
-                if new_label and new_label.strip():
-                    st.session_state.chats[new_label] = st.session_state.chats.pop(
-                        chat_name
-                    )
-                    if st.session_state.active_chat == chat_name:
-                        st.session_state.active_chat = new_label
-                    st.session_state.menu_open[new_label] = False
-                    st.rerun()
-        elif action == "Delete":
-            if st.sidebar.button("Confirm delete", key=f"del_{chat_name}"):
-                st.session_state.chats.pop(chat_name, None)
-                if st.session_state.active_chat == chat_name:
-                    st.session_state.active_chat = next(iter(st.session_state.chats), None)
-                st.rerun()
-
-active_chat = st.session_state.active_chat
-
-# -----------------------------
-# API helpers
-# -----------------------------
+
+# =======================
+# Session State
+# =======================
+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 = []
+
+
+# =======================
+# Helper Functions
+# =======================
 def call_groq(system_prompt, chat_history):
+    """Call Groq API with error handling"""
     if not groq_client:
         return None
     try:
         response = groq_client.chat.completions.create(
             model=model_choice,
             messages=[{"role": "system", "content": system_prompt}]
-            + [{"role": role, "content": msg} for role, msg in chat_history],
-            temperature=temperature,
-            max_tokens=max_tokens,
-            top_p=top_p,
+                     + [{"role": role, "content": msg} for role, msg in chat_history],
+            temperature=0.4
         )
         return response.choices[0].message.content
-    except Exception:
+    except Exception as e:
+        st.warning(f"⚠️ Groq API error: {e}")
         return None
 
 
 def call_huggingface(system_prompt, chat_history):
+    """Call Hugging Face Inference API with error handling"""
     if not huggingface_api_key:
         return None
     try:
         headers = {"Authorization": f"Bearer {huggingface_api_key}"}
-        prompt = system_prompt + "\n\n" + "\n".join([f"{r}: {m}" for r, m in chat_history])
         payload = {
-            "inputs": prompt,
-            "parameters": {"temperature": temperature, "max_new_tokens": max_tokens},
+            "inputs": "\n".join([msg for _, msg in chat_history]),
+            "parameters": {"temperature": 0.5, "max_new_tokens": 500}
         }
         response = requests.post(
             f"https://api-inference.huggingface.co/models/{model_choice}",
             headers=headers,
-            json=payload,
-            timeout=60,
+            json=payload
         )
         if response.status_code == 200:
             data = response.json()
-            if isinstance(data, list) and data and "generated_text" in data[0]:
+            if isinstance(data, list) and "generated_text" in data[0]:
                 return data[0]["generated_text"]
-            if isinstance(data, dict) and "generated_text" in data:
-                return data["generated_text"]
             return str(data)
-        return None
-    except Exception:
+        else:
+            st.warning(f"⚠️ Hugging Face error: {response.text}")
+            return None
+    except Exception as e:
+        st.warning(f"⚠️ Hugging Face exception: {e}")
         return None
 
 
 def get_ai_response(system_prompt, chat_history):
-    ai_msg = None
+    """Get AI response using priority + fallback"""
     if api_priority == "Groq First":
-        ai_msg = call_groq(system_prompt, chat_history) or call_huggingface(
-            system_prompt, chat_history
-        )
-    else:
-        ai_msg = call_huggingface(system_prompt, chat_history) or call_groq(
-            system_prompt, chat_history
-        )
-    return ai_msg or "❌ Both APIs failed. Please check your API keys."
-
-# -----------------------------
-# Render messages
-# -----------------------------
-def render_messages_html(messages):
-    parts = ['<div class="chat-panel">']
-    for role, msg in messages:
-        safe = html.escape(msg)
-        if "```" in msg:
-            segments = msg.split("```")
-            content_html = ""
-            for si, seg in enumerate(segments):
-                if si % 2 == 1:
-                    lines = seg.split("\n")
-                    code = "\n".join(lines[1:]) if len(lines) > 1 else ""
-                    content_html += (
-                        f'<pre class="code-block"><code>{html.escape(code)}</code></pre>'
-                    )
-                else:
-                    if seg.strip():
-                        content_html += f"<div>{html.escape(seg)}</div>"
-        else:
-            content_html = f"<div>{safe}</div>"
+        ai_msg = call_groq(system_prompt, chat_history)
+        if ai_msg is None:
+            ai_msg = call_huggingface(system_prompt, chat_history)
+    else:  # HuggingFace First
+        ai_msg = call_huggingface(system_prompt, chat_history)
+        if ai_msg is None:
+            ai_msg = call_groq(system_prompt, chat_history)
+
+    if ai_msg is None:
+        return "❌ Both APIs failed. Please check your API keys or try again later."
+    return ai_msg
+
+
+# =======================
+# Chat UI Function
+# =======================
+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 ---
+    user_input = st.chat_input("Type your message...", key=input_key)
+
+    if user_input:
+        # Save user input
+        st.session_state[input_key + "_last"] = user_input
+        chat_history.append(("user", user_input))
+
+        # --- Get AI reply with fallback ---
+        with st.spinner("🤔 Thinking..."):
+            ai_msg = get_ai_response(system_prompt, chat_history)
+
+        chat_history.append(("assistant", ai_msg))
 
-        if role == "user":
-            parts.append(
-                f'<div class="msg-row msg-user"><div class="bubble bubble-user">{content_html}</div></div>'
-            )
-        else:
-            parts.append(
-                f'<div class="msg-row msg-assistant"><div class="bubble bubble-assistant">{content_html}</div></div>'
-            )
-    parts.append("</div>")
-    return "\n".join(parts)
-
-# -----------------------------
-# Main UI
-# -----------------------------
-st.markdown("<h1 style='margin-bottom:12px'>🤖 CodeCraft AI - Mini Copilot</h1>", unsafe_allow_html=True)
-
-tab_labels = ["💡 Generate Code", "🛠 Debug Code", "📘 Explain Code"]
-tabs = st.tabs(tab_labels)
-prompt_map = {
-    "generate": "You are a helpful coding assistant. Generate correct code and explain simply.",
-    "debug": "You are an expert code debugger. Fix errors, explain changes simply.",
-    "explain": "You are a teacher. Explain code step by step in simple words.",
-}
-tab_keys = ["generate", "debug", "explain"]
-
-for i, key in enumerate(tab_keys):
-    with tabs[i]:
-        messages = st.session_state.chats[active_chat][key]
-        html_block = render_messages_html(messages)
-        st.markdown(html_block, unsafe_allow_html=True)
-
-        user_input = st.chat_input("Type your message...", key=f"{active_chat}_{key}_input")
-        if user_input:
-            messages.append(("user", user_input))
-            with st.spinner("🤔 Thinking..."):
-                ai = get_ai_response(prompt_map[key], messages)
-            messages.append(("assistant", ai))
-            st.session_state.chats[active_chat][key] = messages
-            st.rerun()
-
-# -----------------------------
+        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"
+    )
+
+
+# =======================
 # Footer
-# -----------------------------
-st.markdown(
-    """
-    <div class="cc-footer">⚠️ CodeCraft AI may produce mistakes. Always verify important code.</div>
-    """,
-    unsafe_allow_html=True,
-)
+# =======================
+st.markdown("---")
+st.caption("✨ CodeCraft can make mistakes. Check important info.")