Update app.py

app.py

@@ -1,25 +1,103 @@
-
 import streamlit as st
 from chatbot_utils import AmharicChatbot
 
 st.set_page_config(page_title="Amharic SRH Chatbot", layout="centered")
 
-st.title("🤖 አማርኛ ጤና ቻትቦት")
-st.markdown("ስለ ወሊድና የአባላዘር በሽታ ጥያቄ አሎት? እባክዎ ያቀርቡ።")
-
+# Load the chatbot
 @st.cache_resource
 def load_bot():
     return AmharicChatbot("amharic_srh_qa.csv")
 
 bot = load_bot()
 
-query = st.text_input("💬 ጥያቄዎን ያስገቡ:", "")
+# Inject Custom CSS
+st.markdown("""
+    <style>
+        .chat-container {
+            width: 100%;
+            max-width: 600px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        .chat-box {
+            height: 350px;
+            overflow-y: auto;
+            border: 1px solid #ddd;
+            padding: 10px;
+            background-color: #f9f9f9;
+            margin-bottom: 10px;
+            border-radius: 5px;
+        }
+        .message {
+            margin: 10px 0;
+            padding: 10px;
+            border-radius: 5px;
+            max-width: 70%;
+            word-wrap: break-word;
+        }
+        .user-message {
+            background-color: #e1f5fe;
+            align-self: flex-end;
+            margin-left: auto;
+        }
+        .bot-message {
+            background-color: #f1f1f1;
+            align-self: flex-start;
+            margin-right: auto;
+        }
+        .input-area {
+            display: flex;
+            gap: 10px;
+        }
+        .input-text {
+            flex: 1;
+            padding: 10px;
+            border-radius: 5px;
+            border: 1px solid #ccc;
+        }
+        .send-btn {
+            padding: 10px 20px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+        }
+        .send-btn:hover {
+            background-color: #45a049;
+        }
+    </style>
+""", unsafe_allow_html=True)
+
+st.markdown('<div class="chat-container">', unsafe_allow_html=True)
+st.markdown("## 🤖 አማርኛ ጤና ቻትቦት", unsafe_allow_html=True)
+st.markdown("ስለ ወሊድና የአባላዘር በሽታ ጥያቄ አሎት? እባክዎ ያቀርቡ።", unsafe_allow_html=True)
+st.markdown('<div class="chat-box" id="chat-box">', unsafe_allow_html=True)
+
+# Use session state to track messages
+if "messages" not in st.session_state:
+    st.session_state.messages = []
+
+for msg in st.session_state.messages:
+    css_class = "user-message" if msg["sender"] == "user" else "bot-message"
+    st.markdown(f'<div class="message {css_class}">{msg["text"]}</div>', unsafe_allow_html=True)
+
+st.markdown('</div>', unsafe_allow_html=True)  # Close chat-box
+
+# Input area
+with st.form(key="chat_form"):
+    user_input = st.text_input("💬 ጥያቄዎን ያስገቡ:", key="input")
+    submit = st.form_submit_button("መልስ አውጣ")
+
+    if submit and user_input:
+        st.session_state.messages.append({"sender": "user", "text": user_input})
+        response = bot.get_answer(user_input)
+
+        if response == "__OUT_OF_SCOPE__":
+            response = "ይቅርታ፣ ይህንን ጥያቄ ማስተዋል አልቻልኩም። እባክዎ በሌላ መንገድ ይሞክሩ።"
+
+        st.session_state.messages.append({"sender": "bot", "text": response})
 
-if st.button("መልስ አውጣ"):
-    if query:
-        results = bot.get_answer(query)
-        for i, (q, a) in enumerate(results):
-            st.write(f"**Q{i+1}:** {q}")
-            st.success(f"**A{i+1}:** {a}")
-    else:
-        st.warning("እባክዎ ጥያቄ ያስገቡ።")
+st.markdown('</div>', unsafe_allow_html=True)  # Close chat-container