Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

App 1 - Support Agent Bot not working #143

Open
hsiehgeoVA opened this issue Mar 16, 2024 · 7 comments
Open

App 1 - Support Agent Bot not working #143

hsiehgeoVA opened this issue Mar 16, 2024 · 7 comments

Comments

@hsiehgeoVA
Copy link

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
Copy link

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

image

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
Copy link
Author

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
Copy link

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
Copy link
Author

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.

App1

@hsiehgeoVA
Copy link
Author

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
Copy link

YingZ-A3D3a commented Aug 12, 2024

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)

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

Borrowed the ideas from #170 (comment)

@hsiehgeoVA
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants