History visible - next attempt

src/chatbot.py

@@ -19,19 +19,25 @@ from langchain.callbacks.base import BaseCallbackHandler
 class StreamHandler(BaseCallbackHandler):
     def __init__(self):
         self.current_text = ""
-        self.placeholder = None  # we attach this later
+        self.placeholder = None  # will be set by the UI
 
     def on_llm_new_token(self, token: str, **kwargs):
         self.current_text += token
         if self.placeholder is not None:
-            # Show partial text with a cursor ▌
-            self.placeholder.markdown(self.current_text + "▌")
+            try:
+                # keep an element id so JS can find & center the in-flight answer
+                self.placeholder.markdown(
+                    f"<div id='assistant-inflight'>{self.current_text}▌</div>",
+                    unsafe_allow_html=True
+                )
+            except Exception:
+                # placeholder may be invalid during reruns; ignore errors
+                pass
 
     def get_text(self):
         return self.current_text
 
 
-
 class BioethicsChatbot:
     def __init__(self, data_dir: str="data/sample_papers"):
         self.processor = DocumentProcessor()

streamlit_app.py

@@ -1,21 +1,58 @@
+# streamlit_app.py
 import streamlit as st
 from src.chatbot import BioethicsChatbot
 import time
-from pathlib import Path
 
-st.set_page_config(
-    page_title="Bioethics AI Assistant",
-    page_icon="🧬",
-    layout="wide"
-)
+st.set_page_config(page_title="Bioethics AI Assistant", page_icon="🧬", layout="wide")
 
 st.title("🧬 Bioethics AI Assistant")
+st.markdown("*Ask questions about medical ethics, informed consent, research ethics, and more*")
 
+# CSS: fix input bar to bottom, style chat area and bubbles, and reserve vertical space
 st.markdown(
     """
     <style>
       /* Make room at page bottom so fixed input doesn't overlap messages */
-      div.block-container { padding-bottom: 180px; }
+      div.block-container { padding-bottom: 200px; }
+
+      /* Chat-area wrapper */
+      #chat-area {
+        width: 100%;
+        max-width: 1100px;
+        margin: 0;
+      }
+
+      /* Sticky user question at the top while streaming */
+      #sticky-user {
+        position: sticky;
+        top: 18px;
+        z-index: 10;
+        padding: 12px 16px;
+        border-radius: 12px;
+        background: var(--secondary-background-color);
+        margin-bottom: 12px;
+      }
+
+      /* Message bubbles */
+      .msg {
+        padding: 14px 16px;
+        border-radius: 12px;
+        margin: 10px 0;
+        max-width: 85%;
+        line-height: 1.45;
+      }
+      .msg.user {
+        background: #2b2b2b;
+        color: white;
+        align-self: flex-end;
+        margin-left: auto;
+      }
+      .msg.assistant {
+        background: #f5f5f5;
+        color: black;
+        align-self: flex-start;
+        margin-right: auto;
+      }
 
       /* Fix the input form (id = input_form) at the bottom, centered */
       form#input_form {
@@ -28,7 +65,7 @@ st.markdown(
         background: transparent;
       }
 
-      /* Optional: small visual tweak so the fixed form looks natural */
+      /* optional small visual tweak */
       form#input_form .stTextInput, form#input_form .stButton {
         margin: 0 6px;
       }
@@ -37,30 +74,7 @@ st.markdown(
     unsafe_allow_html=True,
 )
 
-st.markdown("*Ask questions about medical ethics, informed consent, research ethics, and more*")
-
-# Sidebar
-with st.sidebar:
-    st.markdown("### About")
-    st.write("This demo uses Retrieval-Augmented Generation (RAG) with open-access bioethics papers.")
-    st.markdown("---")
-    st.markdown("### Sample Questions")
-    sample_questions = [
-        "What is paternalism in bioethics?",
-        "What are the ethical issues with genetic testing?",
-        "How should AI bias in healthcare be addressed?",
-        "Is antinatalism rational?",
-        "What does it mean for women’s autonomy to be respected?"
-    ]
-    for q in sample_questions:
-        if st.button(q, key=f"sample_{q}", use_container_width=True):
-            st.session_state.current_question = q
-
-# Rate limiting
-if 'query_count' not in st.session_state:
-    st.session_state.query_count = 0
-
-# Chat messages stored in session_state (cleared on page refresh)
+# session state
 if 'messages' not in st.session_state:
     # messages is a list of {"role": "user"|"assistant", "content": str}
     st.session_state.messages = []
@@ -68,7 +82,14 @@ if 'messages' not in st.session_state:
 if 'is_streaming' not in st.session_state:
     st.session_state.is_streaming = False
 
-# Initialize chatbot (cached resource)
+if 'show_sticky' not in st.session_state:
+    st.session_state.show_sticky = False
+
+# if a submission was made, store it as pending so next render can create placeholders nicely
+if 'pending_question' not in st.session_state:
+    st.session_state.pending_question = None
+
+# cached chatbot resource
 @st.cache_resource
 def load_chatbot():
     return BioethicsChatbot("data/")
@@ -77,7 +98,6 @@ if 'bot' not in st.session_state:
     with st.spinner("🔄 Loading bioethics knowledge base..."):
         st.session_state.bot = load_chatbot()
 
-# Helper to build history pairs for prompt (only include completed assistant responses)
 def build_history_pairs(messages, max_pairs=4):
     pairs = []
     i = 0
@@ -85,7 +105,6 @@ def build_history_pairs(messages, max_pairs=4):
         if messages[i]['role'] == 'user' and messages[i+1]['role'] == 'assistant':
             user = messages[i]['content']
             assistant = messages[i+1]['content']
-            # Only include completed assistant responses (non-empty)
             if assistant is not None and assistant != "":
                 pairs.append((user, assistant))
             i += 2
@@ -93,101 +112,121 @@ def build_history_pairs(messages, max_pairs=4):
             i += 1
     return pairs[-max_pairs:]
 
-# Layout: main chat column + sidebar metrics column
+# Layout columns
 col1, col2 = st.columns([4, 1])
 
 with col1:
     st.markdown("### 💬 Conversation")
 
-    # Render history from session_state (chronological top->bottom)
-    for msg in st.session_state.messages:
-        if msg['role'] == "user":
-            with st.chat_message("user"):
-                st.markdown(msg['content'])
+    # If pending_question exists (set on submit), append the user+empty assistant before rendering
+    if st.session_state.pending_question:
+        q = st.session_state.pending_question
+        st.session_state.pending_question = None
+        st.session_state.messages.append({"role": "user", "content": q})
+        st.session_state.messages.append({"role": "assistant", "content": ""})
+        st.session_state.show_sticky = True
+
+    # Show sticky user (top) while streaming / during in-flight
+    if st.session_state.show_sticky and len(st.session_state.messages) >= 2:
+        sticky_user = st.session_state.messages[-2]['content']
+        st.markdown(f"<div id='sticky-user' class='msg user'>{sticky_user}</div>", unsafe_allow_html=True)
+
+    # Chat area: render earlier messages (excluding the in-flight pair when show_sticky True)
+    st.markdown("<div id='chat-area'>", unsafe_allow_html=True)
+    render_up_to = len(st.session_state.messages)
+    if st.session_state.show_sticky and len(st.session_state.messages) >= 2:
+        render_up_to = len(st.session_state.messages) - 2
+
+    for i in range(render_up_to):
+        msg = st.session_state.messages[i]
+        if msg['role'] == 'user':
+            safe_html = f"<div class='msg user'>{msg['content']}</div>"
         else:
-            with st.chat_message("assistant"):
-                # if assistant content is empty string -> an in-flight response placeholder
-                if msg['content'] == "":
-                    # create a placeholder we can stream into
-                    st.session_state.current_placeholder = st.empty()
-                else:
-                    st.markdown(msg['content'])
-
-    # Input form at the bottom (like ChatGPT)
+            safe_html = f"<div class='msg assistant'>{msg['content']}</div>"
+        st.markdown(safe_html, unsafe_allow_html=True)
+
+    # If there is an in-flight assistant (last message is assistant and empty), create a placeholder inside chat-area
+    response_placeholder = None
+    if st.session_state.show_sticky and len(st.session_state.messages) >= 2 and st.session_state.messages[-1]['role'] == 'assistant':
+        response_placeholder = st.empty()
+        # initialize with the wrapper div (StreamHandler will update this same element)
+        response_placeholder.markdown("<div id='assistant-inflight' class='msg assistant'></div>", unsafe_allow_html=True)
+
+    st.markdown("</div>", unsafe_allow_html=True)
+
+    # JS: center the in-flight assistant message; if none, ensure sticky user is visible
     st.markdown(
         """
         <script>
-          try { window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); }
-          catch(e) { /* ignore */ }
+        (function(){
+            try {
+                const assist = document.getElementById('assistant-inflight');
+                const sticky = document.getElementById('sticky-user');
+                if (assist) {
+                    // center assistant in viewport (approx), leaving input bar visible at bottom
+                    const rect = assist.getBoundingClientRect();
+                    const targetY = window.scrollY + rect.top - (window.innerHeight / 2) + (rect.height / 2);
+                    window.scrollTo({ top: targetY, behavior: 'smooth' });
+                } else if (sticky) {
+                    // make sure sticky user is visible at top
+                    const rect = sticky.getBoundingClientRect();
+                    const targetY = window.scrollY + rect.top - 20;
+                    window.scrollTo({ top: targetY, behavior: 'smooth' });
+                }
+            } catch(e) {}
+        })();
         </script>
         """,
         unsafe_allow_html=True,
     )
 
+    # Input form (fixed by CSS at bottom)
     with st.form("input_form", clear_on_submit=True):
         question = st.text_input(
             "Your question:",
-            value=st.session_state.get('current_question', ''),
+            value="",
             placeholder="e.g., What are the ethical considerations in clinical trials?",
             key="question_input"
         )
         submit = st.form_submit_button("Send")
 
-    # Clear current_question so sample buttons work only once
-    if 'current_question' in st.session_state:
-        del st.session_state.current_question
+    # handle submit: set pending and trigger a rerun by leaving the page (we don't call experimental_rerun,
+    # since adding pending and letting the code continue will append on the next run)
+    if submit and question and not st.session_state.is_streaming:
+        # put question into pending so top-of-render will append it and create placeholder in the same run
+        st.session_state.pending_question = question
+        # do a soft rerun by calling st.experimental_rerun() to ensure placeholder is created before streaming
+        st.experimental_rerun()
 
-    # Handle form submission
-    if submit and question and st.session_state.query_count < 30:
-        if st.session_state.is_streaming:
-            st.warning("Please wait for the current response to finish.")
-        else:
-            # Append user message + assistant placeholder (empty string indicates in-flight)
-            st.session_state.messages.append({"role": "user", "content": question})
-            st.session_state.messages.append({"role": "assistant", "content": ""})
-
-            # Immediately render the just-appended messages for smooth UX
-            with st.chat_message("user"):
-                st.markdown(question)
-            with st.chat_message("assistant"):
-                response_placeholder = st.empty()
-
-            # Build history pairs (exclude the in-flight assistant)
-            history_pairs = build_history_pairs(st.session_state.messages[:-1])
-
-            # Attach handler and stream
-            st.session_state.bot.stream_handler.current_text = ""
-            st.session_state.bot.stream_handler.placeholder = response_placeholder
-            st.session_state.is_streaming = True
-
-            # Call the bot (streams into placeholder)
-            try:
-                answer = st.session_state.bot.ask(question, history_pairs=history_pairs)
-            except Exception as e:
-                answer = f"❌ Error while generating response: {e}"
-
-            # Finalize UI and persist the assistant message in session_state
-            try:
-                response_placeholder.markdown(answer)
-            except Exception:
-                # placeholder might be invalid after a rerun; still save the answer
-                pass
-
-            # update the last assistant (should be the last message)
-            if st.session_state.messages and st.session_state.messages[-1]['role'] == 'assistant':
-                st.session_state.messages[-1]['content'] = answer
-            else:
-                # fallback: append assistant answer
-                st.session_state.messages.append({"role": "assistant", "content": answer})
-
-            st.session_state.query_count += 1
-            st.session_state.is_streaming = False
-
-    elif submit and st.session_state.query_count >= 30:
-        st.error("📈 Demo limit reached for today. This prevents API abuse.")
-        st.info("💡 For unlimited use, clone the repository and use your own API key.")
+    # If there's an in-flight assistant placeholder and we haven't started streaming yet, start it
+    if response_placeholder is not None and not st.session_state.is_streaming:
+        # prepare history (exclude the in-flight assistant itself)
+        history_pairs = build_history_pairs(st.session_state.messages[:-1])
+        # start streaming
+        st.session_state.is_streaming = True
+        st.session_state.bot.stream_handler.current_text = ""
+        st.session_state.bot.stream_handler.placeholder = response_placeholder
+        try:
+            # ask; this will stream tokens via the handler into response_placeholder
+            question_for_call = st.session_state.messages[-2]['content']
+            answer = st.session_state.bot.ask(question_for_call, history_pairs=history_pairs)
+        except Exception as e:
+            answer = f"❌ Error while generating response: {e}"
+
+        # finalize: ensure placeholder displays final text, persist into messages, and clear sticky
+        try:
+            response_placeholder.markdown(f"<div id='assistant-inflight' class='msg assistant'>{answer}</div>", unsafe_allow_html=True)
+        except Exception:
+            pass
+
+        # store final assistant text
+        st.session_state.messages[-1]['content'] = answer
+        st.session_state.show_sticky = False
+        st.session_state.is_streaming = False
 
 with col2:
+    if 'query_count' not in st.session_state:
+        st.session_state.query_count = 0
     st.metric("Queries used in your session", f"{st.session_state.query_count}/30")
     st.markdown("---")
     with st.expander("📚 About the Sources"):
@@ -223,4 +262,4 @@ with col3f:
             st.markdown(f"- Vector dimension: {st.session_state.bot.vector_store.dimension}")
     except Exception:
         pass
-    st.markdown(f"- Queries today: {st.session_state.query_count}")
+    st.markdown(f"- Queries today: {st.session_state.get('query_count', 0)}")