App 1 - Support Agent Bot not working

[hsiehgeoVA]

Installed genai-stack in Ubuntu 22.04. The App3 - Q/A with a local PDF worked great with one test case. The App2 - Loader worked and the neo4j graph was generated. However, the App 1 did not appear to work. Only the Select RAG mode section was displayed and the buttons seemed to work. However, no other info was displayed. So could not (or did not know how to) do the Q&A part.

[sarmbruster]

This seems to be a CSS glitch. If you use the settings menu (3 dots right top corner) , light for Choose app theme, colors and fonts you can see the input box. However it's tiny in height, see

I don't know how streamlit works with CSS, but if you use web developer tools you can change the CSS of the input box to use

.st-dc {
    height: 200px;
} 

instead of

.st-dc {
    height: auto;
} 

[hsiehgeoVA]

Thank you Stefan for the suggestion. How did you get the display as shown in your image.png file? I could only see the small bottom section for "Select RAG mode", and the rest of the page was just blank. I certainly did not have a good understanding of the sequence of actions needed to have the multiple apps/containers work together. I would greatly appreciate for more detailed instructions on how to operate the apps in order to get the desired results.

[sarmbruster]

If you're in dark mode you first need to switch to light mode (see my comment above). Then you can see the differenct between the tiny grey area and the white background.

[hsiehgeoVA]

Thank you. I was in light mode. I got the tiny grey area above the Select RAG mode section as a kind of separator in the initial screen after the App 1 was launched. However, as I tried to go through the rest of the App 1 demo, the display did not change to show different content such as ticket generation. So, I thought that I might not have done it correctly procedure-wise.

[hsiehgeoVA]

I've been able to run the Support Bot demo using App 5 - Static Front End without having to change any code. The App 1 with Streamlit UI still did not work for me.

[YingZ-A3D3a]

I've been able to run the Support Bot demo using App 5 - Static Front End without having to change any code. The App 1 with Streamlit UI still did not work for me.

I had the same issue as you and tried the following step and then the App1 display becomes normal:

1. Search "Streamlit UI" in bot.py file, and comment out the markdown style like this:

# Streamlit UI
# styl = f"""
# <style>
#     /* not great support for :has yet (hello FireFox), but using it for now */
#     .element-container:has([aria-label="Select RAG mode"]) {{
#         position: fixed;
#         bottom: 33px;
#         background: white;
#         z-index: 101;
#     }}
#     .stChatFloatingInputContainer {{
#         bottom: 20px;
#     }}

#     /* Generate ticket text area */
#     textarea[aria-label="Description"] {{
#         height: 200px;
#     }}
# </style>
# """
# st.markdown(styl, unsafe_allow_html=True)

2. Run "docker compose up --build" in your terminal.

Borrowed the ideas from #170 (comment)

[hsiehgeoVA]

Thank you for posting your workaround. I have posted a different approach in my recent response to Issue #144 'Streamlit Text Box Covered by "Select RAG mode"'.

---

Ran into the same issue. Worked around the problem by giving the fixed position to the chatbox, instead of the "Select RAG mode" pane. This is done by modifying the CSS style for Streamlit UI in bot.py file: 1) commenting out the "position: fixed" line for the '.element-container:has(aria-lable="Select RAG mode"' element, and 2) adding "position: fixed" line for the '.stChatFloatingInputContainer' element.

With these changes, the chatbox takes a fixed position at the bottom of the page, while the "Select RAG mode" pane becomes a floating element. So, the chatbox is no longer covered by the "Select RAG mode". This workaround allowed me to continue with the demo app successfully.

--- Streamlit UI style sheet modification in bot.py file ---

Streamlit UI
styl = f"""

<style> /* not great support for :has yet (hello FireFox), but using it for now */ .element-container:has([aria-label="Select RAG mode"]) {{ # position: fixed; # Commented out line bottom: 33px; background: white; z-index: 101; }} .stChatFloatingInputContainer {{ bottom: 20px; position: fixed; # Added line }} ,,,