Chainlit / chainlit

Build Conversational AI in minutes ⚡️
https://docs.chainlit.io
Apache License 2.0
6.91k stars 907 forks source link

Option to add disclaimer text and warning text in the UI #1320

Open MaxMLang opened 3 weeks ago

MaxMLang commented 3 weeks ago

Is your feature request related to a problem? Please describe.

Currently, there is no efficient way to display disclaimer or warning text in the UI without disrupting the chat flow. (For example: "Warning my Chatbot can make mistakes") I have experimented with the inline text element, but the results are not satisfactory. Inline text disrupts the user experience in the chat flow, and other placement options (such as placing the text on the side or top of the page) do not function as expected.

Describe the solution you'd like

I would like an option to add disclaimer or warning text in a more flexible manner. Ideally, the text could be displayed below the chat bar, on the side, on top of the page, or via a pop-up message. This would allow better placement of important information without interrupting the user experience.

Describe alternatives you've considered

I have tried using the existing inline text element, but it does not work well for my use case. The side and top page text placement options were also not satisfactory, as they either did not display properly or were not user-friendly. An additional pop-up message might also be a potential alternative.

Additional context

It would be helpful to have the ability to adjust the appearance and placement of the disclaimer or warning text dynamically, so it integrates smoothly with the user interface. Screenshots and examples can be provided upon request.

You are all doing a great job, thank you for such an awesome framework.

MaxMLang commented 3 weeks ago

I am currently using the following CSS to sneak my way around it, however, I think there could be a better/smoother solution.

a[href*='https://github.com/Chainlit/chainlit'] {
    visibility: collapse; /* Hides the original text */
    position: relative;
}

a[href*='https://github.com/Chainlit/chainlit']::after {
    content: "My Bot can make mistakes. Check important info."; /* New text to display */
    visibility: visible;
    color: Grey; /* Color of the new text */
    position: fixed; /* Position relative to the page */
    bottom: 20px; /* Adjust to where you want the text vertically */
    left: 50%; /* Center horizontally relative to the page */
    transform: translateX(-50%); /* Make sure it's truly centered */
    white-space: nowrap; /* Ensure it stays on one line */
}
barun-saha commented 3 weeks ago

The Readme section is a nice place to put all disclaimers and T&Cs, among others. Unfortunately, it is no longer shown as the default page when the app is launched. Neither is a link to it visible anywhere prominently. I think it would be nice to have the feature restored in the future.