====== Streamlit Kolommen ======
🗂️ [[start|Terug naar start]]\\
🚀 🗂️ [[steamlit_home|Steamlit Start]]

[[https://docs.streamlit.io/develop/api-reference/layout/st.columns|Streamlit kolommen documentatie]]

Ik wilde een pagina maken in een Streamlit GUI die bestond uit 2 kolommen. In de linker kolom een een chat gedeelte en in de rechterkolom ruimte om aanvullende data te laatste. Het plaatsen van een chat in een kolom is in streamlit nog niet zo simpel. Hieronder de oplossing die ik er voor bedacht heb:

<code>from appbase.functions import A3DFunctions
from catviseur.viseurteksten import ViseurTeksten
import streamlit as st
from langchain_core.messages import AIMessage, HumanMessage

class CATviseur:
    def __init__(self):
        self.teksten = ViseurTeksten()

    def pageIni(self):
        # INI data ==================================
        # Initialize caht history
        if "chat_history" not in st.session_state:
            st.session_state['chat_history'] = []   
        # INI teller (om CATja eerste bericht te tonen)
        if "teller" not in st.session_state:
            st.session_state['teller'] = 0    
            # INI unieke ID om chat op te slaan (nodig voor eventuele logging)
        if "chat_id" not in st.session_state:
            a3dfunc = A3DFunctions()
            st.session_state['chat_id'] = a3dfunc.maak_unieke_id(st.session_state['client_id'])
        # Volgorde van de chatgeschiedenis (nodig voor eventuele logging)
        if "volgorde" not in st.session_state:
            st.session_state['volgorde'] = 0

        # VIEW ======================================
        self.buildView()

    def buildView(self): 
        col1, col2 = st.columns([2, 2])
        
        with col1:
            # Gebruik een container om de chatgeschiedenis weer te geven
            chat_container = st.container(border=True, height=460)  

            # Toon het eerste bericht van CATja
            if st.session_state['teller'] == 0:
                with chat_container:
                    with st.chat_message("AI", avatar='😺'):
                        st.markdown(self.teksten.get_intro_tekst_chat(st.session_state['naam']), unsafe_allow_html=True)
                st.session_state['teller'] += 1

            # Gebruik een container om de invoer van de gebruiker weer te geven
            input_container = st.container()
            with input_container:                 
                # Gebruik een invoerveld om berichten van de gebruiker te ontvangen
                user_query = st.chat_input(placeholder="Type hier je vraag aan CATja...") 
                if user_query is not None and user_query != "":
                    st.session_state.chat_history.append(HumanMessage(content=user_query))

                    # placeholder AI antwoord op de vraag van de gebruiker                     
                    response = "Dummy reactie."
                    
                    st.session_state.chat_history.append(AIMessage(content=response))

            # plaats de chatgeschiedenis in de container
            with chat_container:
                for message in st.session_state.chat_history:
                    if isinstance(message, AIMessage):
                        with st.chat_message("AI", avatar='😺'):
                            st.write(message.content)
                    elif isinstance(message, HumanMessage):
                        with st.chat_message("Human", avatar='👤'):
                            st.write(message.content)
                st.markdown("<div id='end_of_chat'></div>", unsafe_allow_html=True)    
                self.st_autoscroll()        
               
        with col2:
            st.subheader("⛓️ Extra Informatie")


    def st_autoscroll(self):
        st.markdown(
            """
            <script>
            var element = document.getElementById('end_of_chat');
            element.scrollIntoView({behavior: 'smooth'});
            </script>
            """, 
            unsafe_allow_html=True
        )

cat = CATviseur()
cat.pageIni()</code>

In dit geval moet de chatcontainer een hoogte hebben anders werk het niet:
<code>chat_container = st.container(border=True, height=460)</code>