Update src/interface/ui.py

src/interface/ui.py

@@ -25,6 +25,18 @@ def create_interface(call_model):
                 background-repeat: no-repeat;
                 background-attachment: fixed;
             }}
+            h1 {{ color: #000000; }}
+            p {{ color: #000000; }}
+            .custom-caption {{ color: #A5A4A4; font-size: 16px; text-align: center; }}
+            .chat-bubble {{
+                max-width: 70%;
+                padding: 10px;
+                margin: 5px 0;
+                border-radius: 10px;
+                color: #000000;
+            }}
+            .human-message {{ background-color: #8DC8E8; align-self: flex-end; text-align: right; }}
+            .ai-message {{ background-color: #E7E7E7; align-self: flex-start; }}
             </style>
             """,
             unsafe_allow_html=True
@@ -40,37 +52,45 @@ def create_interface(call_model):
         st.markdown("<h1 style='color:black;'>ARGObot: UWF's Custom Q&A Chatbot</h1>", unsafe_allow_html=True)
 
     # Sample questions
-    st.markdown("### Example questions:")
-    st.markdown("- UWF's values")
-    st.markdown("- Student Rights and Responsibilities")
-    st.markdown("- Student Resources")
+    st.markdown("""
+        <div style='text-align: center; font-size: 20px; font-weight: normal;'>
+            <p style='font-size: 20px;'>Ask ARGObot a variety of questions based on the Student Handbook.</p>
+        </div>
+    """, unsafe_allow_html=True)
+
+    st.write("Example topics:")
+    st.markdown("<p style='color: #000000;'>- UWF's values</p>", unsafe_allow_html=True)
+    st.markdown("<p style='color: #000000;'>- Student Rights and Responsibilities</p>", unsafe_allow_html=True)
+    st.markdown("<p style='color: #000000;'>- UWF Policies and Regulations</p>", unsafe_allow_html=True)
+    st.markdown("<p style='color: #000000;'>- UWF Appeals and Student Grievance Processes</p>", unsafe_allow_html=True)
+    st.markdown("<p style='color: #000000;'>- Student Health and Wellbeing</p>", unsafe_allow_html=True)
+    st.markdown("<p style='color: #000000;'>- Student Resources</p>", unsafe_allow_html=True)
+
+    chat_container = st.container()
+
+    with chat_container:
+        st.markdown("<div class='chat-container'>", unsafe_allow_html=True)
+        for message in st.session_state.chat_history:
+            if isinstance(message, HumanMessage):
+                st.markdown(f"<div class='chat-bubble human-message'><strong>You:</strong> {message.content}</div>", unsafe_allow_html=True)
+            elif isinstance(message, AIMessage):
+                st.markdown(f"<div class='chat-bubble ai-message'><strong>Chatbot:</strong> {message.content}</div>", unsafe_allow_html=True)
+        st.markdown("</div>", unsafe_allow_html=True)
+
+    with st.form(key='question_form', clear_on_submit=True):
+        user_input = st.text_input("Enter your question here:", key="user_input")
+        submit_button = st.form_submit_button(label='Submit')
 
-    # Display conversation
-    for message in st.session_state.chat_history:
-        if isinstance(message, HumanMessage):
-            st.markdown(f"<div style='background-color:#8DC8E8; padding:10px; border-radius:10px;'><strong>You:</strong> {message.content}</div>", unsafe_allow_html=True)
-        elif isinstance(message, AIMessage):
-            st.markdown(f"<div style='background-color:#E7E7E7; padding:10px; border-radius:10px;'><strong>Chatbot:</strong> {message.content}</div>", unsafe_allow_html=True)
+        if submit_button and user_input:
+            state = {"input": user_input, "chat_history": st.session_state.chat_history, "context": "", "answer": ""}
+            result = call_model(state)
 
-    # Input form
-    with st.form(key="chat_form", clear_on_submit=True):
-        user_input = st.text_input("Enter your question here:")
-        submitted = st.form_submit_button("Submit")
+            if not result.get("answer"):
+                result["answer"] = "Sorry, I couldn't generate an answer."
 
-        if submitted:
-            if user_input.strip():
-                state = {
-                    "input": user_input,
-                    "chat_history": st.session_state.chat_history,
-                    "context": "",
-                    "answer": ""
-                }
-                result = call_model(state)
-                if not result.get("answer"):
-                    result["answer"] = "Sorry, I couldn't generate an answer."
+            st.session_state.chat_history.append(HumanMessage(user_input))
+            st.session_state.chat_history.append(AIMessage(result["answer"]))
+            st.rerun()
 
-                st.session_state.chat_history.append(HumanMessage(user_input))
-                st.session_state.chat_history.append(AIMessage(result["answer"]))
-                st.rerun()
-            else:
-                st.warning("Please enter a question.")
+        elif submit_button:
+            st.warning("Please enter a question.")