making chatbot.py beutiful

chatbot.py

@@ -6,12 +6,12 @@ from langchain_core.output_parsers import StrOutputParser
 import edge_tts
 import asyncio
 import os
-from typing import Optional
+from html import escape
+
 GROQ_API_KEY = os.getenv('GROQ_API_KEY')
 
 
 class CodeAssistantBot:
-
     def __init__(self):
         self.client = Groq(api_key=GROQ_API_KEY)
         self.model = ChatGroq(model="llama-3.3-70b-versatile", temperature=0.6)
@@ -20,22 +20,21 @@ class CodeAssistantBot:
         self.analysis_prompt = ChatPromptTemplate.from_messages([
             ("system",
              """You are an expert code assistant. Analyze the code and context provided,
-            then give clear, helpful responses. Keep responses concise and focused on the code."""
-             ),
+            then give clear, helpful responses. Keep responses concise and focused on the code."""),
             ("user", """Code: {code}
             Output: {output}
             Error: {error}
             Question: {question}""")
         ])
 
-        self.summary_prompt = ChatPromptTemplate.from_messages([(
-            "system",
-            """Summarize the conversation focusing on key technical points and insights.
-            Keep it brief and clear."""
-        ), ("user", "Conversation: {conversation}")])
+        self.summary_prompt = ChatPromptTemplate.from_messages([
+            ("system",
+             """Summarize the conversation focusing on key technical points and insights.
+            Keep it brief and clear."""),
+            ("user", "Conversation: {conversation}")
+        ])
 
-    def analyze_code(self, code: str, output: str, error: str,
-                     question: str) -> str:
+    def analyze_code(self, code: str, output: str, error: str, question: str) -> str:
         try:
             parser = StrOutputParser()
             chain = self.analysis_prompt | self.model | parser
@@ -52,8 +51,7 @@ class CodeAssistantBot:
         try:
             parser = StrOutputParser()
             chain = self.summary_prompt | self.model | parser
-            formatted_conv = "\n".join(
-                [f"Q: {q}\nA: {a}" for q, a in conversation])
+            formatted_conv = "\n".join([f"Q: {q}\nA: {a}" for q, a in conversation])
             return chain.invoke({'conversation': formatted_conv})
         except Exception as e:
             return f"Could not generate summary: {str(e)}"
@@ -66,41 +64,96 @@ async def text_to_speech(text: str, filename: str):
 
 
 def render_chatbot(code: str, output: str, error: str):
-    # … your imports, CSS, bot init …
-
-    # 1. Ensure session state keys exist
-    st.session_state.setdefault("conversation", [])
-    st.session_state.setdefault("audio_count", 0)
-
-    # 2. **Input area first**  
-    col1, col2 = st.columns([4, 1])
-    with col1:
-        # give this a unique key so it doesn't reset on rerun
-        user_q = st.text_input("Ask your Question here", key="chat_input", placeholder="Type your question…")
-    with col2:
+    """Render the chatbot UI in a polished, scrollable panel with support for code blocks."""
+    # --- session state ---
+    st.session_state.setdefault('conversation', [])
+    st.session_state.setdefault('audio_count', 0)
+
+    # --- CSS styling ---
+    st.markdown("""
+    <style>
+    .chat-container {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        max-height: 480px;
+        overflow-y: auto;
+        padding: 1rem;
+        border-radius: 8px;
+        background-color: inherit;
+        border: 1px solid;
+        animation: fadeIn 0.5s ease;
+    }
+    .chat-message {
+        max-width: 90%;
+        padding: 0.75rem 1rem;
+        border-radius: 12px;
+        position: relative;
+        animation: popIn 0.3s ease;
+    }
+    .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;
+    }
+    .chat-message pre {
+        background: rgba(0,0,0,0.1);
+        padding: 0.5rem;
+        border-radius: 4px;
+        overflow-x: auto;
+    }
+    @keyframes fadeIn {
+        from { opacity: 0; } to { opacity: 1; }
+    }
+    @keyframes popIn {
+        from { transform: scale(0.95); opacity: 0; }
+        to { transform: scale(1);   opacity: 1; }
+    }
+    </style>
+    """, unsafe_allow_html=True)
+
+    # --- input area ---
+    cols = st.columns([4, 1], gap='small')
+    with cols[0]:
+        question = st.text_input("Ask your question…", key="chat_input")
+    with cols[1]:
         send = st.button("🚀")
 
-    # 3. **Handle send**  
-    if send and user_q:
+    # --- handle send ---
+    if send and question:
         bot = CodeAssistantBot()
-        resp = bot.analyze_code(code, output, error, user_q)
-        st.session_state.conversation.append((user_q, resp))
-
-        # optional: summary+TTS logic…
+        answer = bot.analyze_code(code, output, error, question)
+        st.session_state.conversation.append((question, answer))
+        # summary & tts can go here
 
-    # 4. **Now** render the scrollable chat container
+    # --- render chat ---
     st.markdown('<div class="chat-container">', unsafe_allow_html=True)
     for q, a in st.session_state.conversation:
-        st.markdown(f'<div class="chat-message user-message">You: {q}</div>', unsafe_allow_html=True)
-        st.markdown(f'<div class="chat-message bot-message">Assistant: {a}</div>', unsafe_allow_html=True)
+        # user bubble
+        html_q = f'<div class="chat-message user-message">{escape(q)}</div>'
+        st.markdown(html_q, unsafe_allow_html=True)
+        # bot bubble: convert code fences to <pre>
+        def render_bot(text):
+            parts = text.split('```')
+            html = ''
+            for i, part in enumerate(parts):
+                if i % 2 == 0:
+                    html += escape(part)
+                else:
+                    code_block = escape(part)
+                    html += f'<pre><code>{code_block}</code></pre>'
+            return html
+        html_a = f'<div class="chat-message bot-message">{render_bot(a)}</div>'
+        st.markdown(html_a, unsafe_allow_html=True)
     st.markdown('</div>', unsafe_allow_html=True)
 
-    # 5. Auto‑scroll script (as you had it)
+    # --- auto-scroll ---
     st.markdown("""
     <script>
-    const el = window.parent.document.querySelector('.chat-container');
-    if(el) el.scrollTop = el.scrollHeight;
+    const c = window.parent.document.querySelector('.chat-container');
+    if(c) { c.scrollTop = c.scrollHeight; }
     </script>
     """, unsafe_allow_html=True)
-
-