updating

chatbot.py

@@ -41,25 +41,86 @@ async def text_to_speech(text, filename):
     await edge_tts.Communicate(text, voice).save(filename)
 
 
- def render_chatbot(code, output, error):
-     """Render the chatbot UI with code-block support and no deprecated APIs."""
-+    # ---- begin: make chat area its own scrollable box ----
-+    st.markdown("""
-+    <style>
-+      .chat-container {
-+        max-height: 60vh;      /* or a fixed px value like 400px */
-+        overflow-y: auto;
-+        padding-right: 0.5rem; /* prevent text clipping */
-+      }
-+    </style>
-+    """, unsafe_allow_html=True)
-+    # ---- end: scrollable chat CSS ----
+def render_chatbot(code, output, error):
+    """Render the chatbot UI with code-block support and a scrollable chat container."""
+    
+    # Inject CSS to make chat container scrollable
+    st.markdown("""
+    <style>
+    .chat-container {
+        max-height: 60vh;
+        overflow-y: auto;
+        padding-right: 0.5rem;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        margin-top: 1rem;
+        padding: 1rem;
+        background-color: #f9f9f9;
+    }
+    .chat-message {
+        margin-bottom: 1rem;
+        word-wrap: break-word;
+    }
+    .user-message {
+        font-weight: bold;
+        color: #1a73e8;
+    }
+    .bot-message pre {
+        background-color: #f0f0f0;
+        padding: 0.5rem;
+        border-radius: 5px;
+        overflow-x: auto;
+    }
+    </style>
+    """, unsafe_allow_html=True)
 
-     st.session_state.setdefault('conversation', [])
-     st.session_state.setdefault('audio_count', 0)
-     …
-     # Chat container
-     st.markdown('<div class="chat-container">', unsafe_allow_html=True)
-     …
-     st.markdown('</div>', unsafe_allow_html=True)
-     …
+    # Setup session state
+    st.session_state.setdefault('conversation', [])
+    st.session_state.setdefault('audio_count', 0)
+
+    # Input row
+    c1, c2 = st.columns([4, 1], gap='small')
+    with c1:
+        question = st.text_input("Ask your question…", key="chat_input")
+    with c2:
+        send = st.button("🚀")
+
+    # Handle send
+    if send and question:
+        bot = CodeAssistantBot()
+        response = bot.analyze_code(code, output, error, question)
+        st.session_state.conversation.append((question, response))
+
+    # Chat container
+    st.markdown('<div class="chat-container">', unsafe_allow_html=True)
+    for q, a in st.session_state.conversation:
+        # User message
+        st.markdown(f'<div class="chat-message user-message">{escape(q)}</div>', unsafe_allow_html=True)
+
+        # Bot message with code formatting
+        def format_response(text):
+            parts = text.split('```')
+            result = ''
+            for i, part in enumerate(parts):
+                if i % 2 == 1:
+                    # Remove optional language tag
+                    lines = part.splitlines()
+                    if lines and lines[0].isalpha():
+                        lines = lines[1:]
+                    code_html = escape("\n".join(lines))
+                    result += f'<pre><code>{code_html}</code></pre>'
+                else:
+                    result += escape(part)
+            return result
+
+        formatted = format_response(a)
+        st.markdown(f'<div class="chat-message bot-message">{formatted}</div>', unsafe_allow_html=True)
+    st.markdown('</div>', unsafe_allow_html=True)
+
+    # Auto-scroll inside chat container
+    st.markdown("""
+    <script>
+    const c = window.parent.document.querySelector('.chat-container');
+    if (c) c.scrollTop = c.scrollHeight;
+    </script>
+    """, unsafe_allow_html=True)