Steamlit Text Box Covered by "Select RAG mode"

[jordanallenlewis]

I just recently started exploring this project and I'm wondering if others have experienced the same issue as me:

On the support bot streamlit front end, the bottom text box where you type in your prompt is mostly covered by the RAG question. Anyone else experiencing this?

[sopheck]

✋ Same here. I haven't used Docker GenAI for a while but I remember it showing up correctly at first.

[anirbanbasu]

Same for me!

[llmscope]

Exactly the same for me — runing in ubuntu 22.04, tried both local firefox browser or NAT another chrome browser.

[hsiehgeoVA]

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 }} ,,,