app.py

import streamlit as st
from chatbot_utils import AmharicChatbot

st.set_page_config(page_title="Amharic SRH Chatbot", layout="centered")

# Load the chatbot
@st.cache_resource
def load_bot():
    return AmharicChatbot("amharic_srh_qa.csv")

bot = load_bot()

# 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})

st.markdown('</div>', unsafe_allow_html=True)  # Close chat-container