app/ui/course_learn_suggest_expectations.py

import streamlit as st
from app.workflows.courses.suggest_expectations import SuggestExpectations, Inputs as ExpectationsInputs, Expectation
from streamlit_extras.stylable_container import stylable_container
from app.workflows.courses.expectation_revision import ExpectationRevision




def course_suggester_main():
    st.markdown("""
    <style>
      [data-testid="stAppViewContainer"]{
            background-image:url("https://www.shutterstock.com/image-vector/abstract-technology-communication-concept-vector-600nw-1914443275.jpg");
            background-size:cover;
        }
        [data-testid="stHeader"]{
            background: rgba(0,0,0,0);
        }
        [data-testid="stToolbar"]{
            right: 2rem;
        }
    .header {
        font-size: 38px;
        font-weight: bold;
        text-align: center;
        color: #4b8bbe;
        margin-bottom: 20px;
    }
    .subheader {
        font-size: 24px;
        font-weight: bold;
        color: #4b8bbe;
    }
    .button:hover {
        background-color: #357ab8;
    }

    .expectation {
        font-weight: bold;
        color: #333333;
    }
    .check-question {
        color: #666666;
        font-weight: bold;
    }
     input[type='text'] {
        border: 2px solid #A0A0A0;
        padding: 10px;
        border-radius: 5px;
        background-color: white;
        font-size: 16px;
    }
    .stTextArea textarea {
        height: 100px;
        border: 2px solid #A0A0A0;
    }

    </style>
""", unsafe_allow_html=True)
    _, col2, _ = st.columns([2, 6, 2])

    default_content = {
        "course": "SQL",
        "module": "Query Optimization Techniques",
        "concepts": [
            "SQL execution order and some optimization techniques.",
            "SQL explain command usage.",
            "Various query optimization techniques."
        ],
        "expectation": "Should understand the importance of indexing in query optimization.",
        "check_question": "How does indexing improve query performance?"
    }

    st.session_state_inputs = st.session_state_inputs if 'session_state' in st.session_state else default_content

    with col2:
        st.markdown(
            "<div class='header'>Course Learn Suggest Expectation</div>", unsafe_allow_html=True)
        course = st.text_input("##### Course Name", key="course",
                               help="Enter the name of the course", value=st.session_state_inputs["course"])
        module = st.text_input("##### Module Name", key="module",
                               help="Enter the name of the module", value=st.session_state_inputs["module"])
        concepts = st.text_area("##### Concepts", key="concepts", value="\n".join(
            st.session_state_inputs["concepts"]), help="Enter the concepts to be covered in the module")
        existing_expectation = st.text_input(
            "##### Existing Expectation", key="existing_expectation", value=st.session_state_inputs["expectation"])
        existing_check_question = st.text_input(
            "##### Existing Check Question", key="existing_check_question", value=st.session_state_inputs["check_question"])

        suggester = SuggestExpectations()
        inputs = {
            "course": course, "module": module,
            "concepts": concepts.split('\n'),
            "existing_expectations": [
                Expectation(
                    expectation=existing_expectation,
                    check_question=existing_check_question
                )
            ]
        }

        if st.button("Get Suggestions", key="suggestions", help="Click to get suggestions"):
            responses = suggester.kickoff(inputs=inputs)
            st.session_state.responses = responses

        if 'responses' in st.session_state:
            for response in st.session_state.responses["expectations"]:
                with stylable_container(
                    key="response-container",
                    css_styles="""
                        {
                            background-color: #ffffff;
                            padding: 20px;
                            border-radius: 10px;
                            margin-top: 20px;
                            border: 1px solid #C0C0C0;
                            background-color: #f5f5f5;
                            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
                            display:flex;
                            flex-wrap: wrap;
                            flex-direction: column;
                        }
                            .response{
                                font-size: 20px;
                                line-height: 1.5;
                                margin-bottom: 10px;
                            }
                    """,
                ):
                    inner1, _ = st.columns([9, 1])
                    with inner1:
                        st.markdown(
                            f"<div class='response'><span class='expectation'>Expectation: </span> {response['expectation']}</div>", unsafe_allow_html=True)
                        st.markdown(
                            f"<div class='response'><span class='check-question'>Check Question: </span> {response['check_question']}</div>", unsafe_allow_html=True)
                        feedback = st.text_input(
                            "Feedback", key=f"feedback_{response['expectation']}", help="Enter your feedback here")
                        if st.button("Reload suggestions", key=f"reload_{response['expectation']}"):
                            rework = ExpectationRevision()
                            feedback_inputs = {
                                "expectation": response["expectation"], "check_question": response["check_question"], "request": feedback,
                                "course": course, "module": module,
                                "concepts": concepts.split('\n'),
                            }
                            suggestions = rework.kickoff(
                                inputs=feedback_inputs)
                            st.write(suggestions)


if __name__ == "__main__":
    course_suggester_main()