Update app.py

app.py

@@ -3,12 +3,14 @@ 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:
@@ -25,19 +27,24 @@ 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)
+        response = requests.get(
+            "https://api-inference.huggingface.co/status",
+            headers=headers,
+            timeout=10,
+        )
         if response.status_code in [200, 401, 403]:
             hf_status = "✅"
     except Exception:
         hf_status = "❌"
 
-# =======================
+# -----------------------------
 # CSS layout & styling
-# =======================
-SIDEBAR_WIDTH_PX = 260
+# -----------------------------
+SIDEBAR_WIDTH_PX = 300
 st.markdown(
     f"""
     <style>
+    /* Sidebar */
     [data-testid="stSidebar"] {{
         width: {SIDEBAR_WIDTH_PX}px;
         min-width: {SIDEBAR_WIDTH_PX}px;
@@ -46,70 +53,117 @@ st.markdown(
         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: 8px;
+        padding-top: 16px;
     }}
+
+    /* Chat panel full height */
     .chat-panel {{
-        height: calc(100vh - 180px);
+        height: calc(100vh - 170px);
         overflow-y: auto;
-        padding: 8px 12px;
+        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 12px;
-        border-radius:12px;
+        padding:10px 14px;
+        border-radius:14px;
         white-space:pre-wrap;
         word-wrap:break-word;
-        font-size:14px;
-        line-height:1.45;
+        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-user {{ background:#0b1020; color:#fff; border-radius:12px 12px 6px 12px; }}
-    .bubble-assistant {{ background:#f0f0f0; color:#111; border-radius:12px 12px 12px 6px; }}
-    .code-block {{ background:#1e1e1e; color:#e6e6e6; padding:10px; border-radius:6px; overflow:auto; font-family:monospace; }}
-    div[data-testid="stChatInput"] {{
+    .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: 9999;
-        background: #0e1117 !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: 12px;
+        font-size: 13px;
         color: gray;
-        padding: 4px 0;
-        background: transparent;
-        z-index: 9998;
+        padding: 6px 0;
+        background: #fafafa;
+        border-top: 1px solid #e0e0e0;
+        z-index: 99998;
     }}
-    footer {{visibility:hidden;}}
+
+    footer {{ visibility: hidden; }}
     </style>
     """,
     unsafe_allow_html=True,
 )
 
-# =======================
-# Sidebar content
-# =======================
+# -----------------------------
+# Sidebar: Settings + Sliders + Chats
+# -----------------------------
 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)
-model_choice = st.sidebar.selectbox("Choose Model", ["llama-3.1-8b-instant", "llama-3.1-70b-versatile", "mixtral-8x7b-32768"])
+
+api_priority = st.sidebar.radio(
+    "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"],
+)
+
+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")
 
-# init 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:
@@ -117,133 +171,163 @@ if "active_chat" not in st.session_state:
 if "menu_open" not in st.session_state:
     st.session_state.menu_open = {}
 
-# New Chat
 if st.sidebar.button("➕ New Chat"):
     idx = len(st.session_state.chats) + 1
-    name = f"Chat {idx}"
-    st.session_state.chats[name] = {"generate": [], "debug": [], "explain": []}
-    st.session_state.active_chat = name
+    new_name = f"Chat {idx}"
+    st.session_state.chats[new_name] = {"generate": [], "debug": [], "explain": []}
+    st.session_state.active_chat = new_name
     st.rerun()
 
-# Chat list with menus
 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.session_state.menu_open[chat_name] = not st.session_state.menu_open.get(
+            chat_name, False
+        )
         st.rerun()
+
     if st.session_state.menu_open.get(chat_name, False):
-        action = st.sidebar.radio(f"{chat_name} options", ["None", "Rename", "Delete"], key=f"opt_{chat_name}")
+        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}")
+            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}"):
-                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()
+                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)
-                st.session_state.menu_open.pop(chat_name, None)
+                st.session_state.chats.pop(chat_name, None)
                 if st.session_state.active_chat == chat_name:
-                    keys = list(st.session_state.chats.keys())
-                    st.session_state.active_chat = keys[0] if keys else None
+                    st.session_state.active_chat = next(iter(st.session_state.chats), None)
                 st.rerun()
 
-st.sidebar.caption("Tip: use ⋮ to rename/delete chats.")
-
 active_chat = st.session_state.active_chat
 
-# =======================
+# -----------------------------
 # API helpers
-# =======================
+# -----------------------------
 def call_groq(system_prompt, chat_history):
     if not groq_client:
         return None
     try:
-        resp = groq_client.chat.completions.create(
+        response = groq_client.chat.completions.create(
             model=model_choice,
             messages=[{"role": "system", "content": system_prompt}]
-            + [{"role": r, "content": m} for r, m in chat_history],
-            temperature=0.4,
+            + [{"role": role, "content": msg} for role, msg in chat_history],
+            temperature=temperature,
+            max_tokens=max_tokens,
+            top_p=top_p,
         )
-        return resp.choices[0].message.content
+        return response.choices[0].message.content
     except Exception:
         return None
 
-def call_hf(system_prompt, chat_history):
+
+def call_huggingface(system_prompt, chat_history):
     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": 0.5, "max_new_tokens": 400}}
-        resp = requests.post(f"https://api-inference.huggingface.co/models/{model_choice}", headers=headers, json=payload, timeout=60)
-        if resp.status_code == 200:
-            data = resp.json()
-            if isinstance(data, list) and "generated_text" in data[0]:
+        payload = {
+            "inputs": prompt,
+            "parameters": {"temperature": temperature, "max_new_tokens": max_tokens},
+        }
+        response = requests.post(
+            f"https://api-inference.huggingface.co/models/{model_choice}",
+            headers=headers,
+            json=payload,
+            timeout=60,
+        )
+        if response.status_code == 200:
+            data = response.json()
+            if isinstance(data, list) and data 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:
         return None
 
+
 def get_ai_response(system_prompt, chat_history):
+    ai_msg = None
     if api_priority == "Groq First":
-        ai = call_groq(system_prompt, chat_history) or call_hf(system_prompt, chat_history)
+        ai_msg = call_groq(system_prompt, chat_history) or call_huggingface(
+            system_prompt, chat_history
+        )
     else:
-        ai = call_hf(system_prompt, chat_history) or call_groq(system_prompt, chat_history)
-    return ai or "❌ Both APIs failed."
+        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:
-            segs = msg.split("```")
+            segments = msg.split("```")
             content_html = ""
-            for i, seg in enumerate(segs):
-                if i % 2 == 1:
+            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>'
+                    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>"
+
         if role == "user":
-            parts.append(f'<div class="msg-row msg-user"><div class="bubble bubble-user">{content_html}</div></div>')
+            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(
+                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:6px'>🤖 CodeCraft AI - Mini Copilot</h1>", unsafe_allow_html=True)
+# -----------------------------
+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 code + short explanation.",
-    "debug": "You are a debugger. Fix code and explain the fixes simply.",
-    "explain": "You are a teacher. Explain the pasted code step by step.",
+    "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]
-        st.markdown(render_messages_html(messages), unsafe_allow_html=True)
+        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:
@@ -254,7 +338,12 @@ for i, key in enumerate(tab_keys):
             st.session_state.chats[active_chat][key] = messages
             st.rerun()
 
-# =======================
+# -----------------------------
 # Footer
-# =======================
-st.markdown('<div class="cc-footer">⚠️ CodeCraft AI can make mistakes. Verify important code.</div>', unsafe_allow_html=True)
+# -----------------------------
+st.markdown(
+    """
+    <div class="cc-footer">⚠️ CodeCraft AI may produce mistakes. Always verify important code.</div>
+    """,
+    unsafe_allow_html=True,
+)