Hi, I’m building a chat app with Streamlit and want to make it really chatGPT like. I haven’t found out an easy way to show the chat history (clickable and on click it will jump to that chat with possibility to continue the chat) on the sidebar.
My current thought is to either make it a series of radio selects or buttons that display some key words of that specific historical chat and when clicking on it, it would trigger a function that clears out the current chat message view and load the historical message in the main view. But using radio or button for this is not very intuitive in terms of UI/UX.
Any suggestions? Thanks in advance! 
1 Like
Hi @lz-chen,
Thanks for posting!
This is an interesting idea. I haven’t experimented with building this so I will speak in theoretical terms here. I think your idea of using is not bad at all but you could also experiment with using links (some hacking around this)…The other issue will be managing session state for all of the history. You can maybe save the history in a db like Firestore or any other scalable ones. For giving the context and continuing conversations without loading the entire history into the context of the prompt, I think there’s probably a better solution out there or if there’s a way to use the API to map back to the specific chat history from the LLM. Just riffing off some ideas here but if I come across better solutions as I research, I will definitely update here.
Thanks for the input @tonykip ! I think link make more sense in the UI perspective, but as your said, I need to make some hacks around it. But I’ll try and see😊
A simple example is to save user/ai chat say in a csv. Add an id column to be used in building a button in the sidebar.
CSV
CSV_FILE = "chat_history.csv"
try:
chat_history_df = pd.read_csv(CSV_FILE)
except FileNotFoundError:
chat_history_df = pd.DataFrame(columns=["ChatID", "Role", "Content"])
ChatID Role Content
0 982b1003-6e03-4f55-93a0-c2a29cabf6b8 User what is streamlit
1 982b1003-6e03-4f55-93a0-c2a29cabf6b8 AI Streamlit is an open-source Python library pri...
2 7807ab5f-0576-4022-9eab-3724c0c0590d User what is django
3 7807ab5f-0576-4022-9eab-3724c0c0590d AI Django is a high-level Python web framework th...
4 a063fe54-8274-4d5a-92a6-9ed3cc5b45ce User what is flutter in 20 words
5 a063fe54-8274-4d5a-92a6-9ed3cc5b45ce AI Flutter is an open-source UI software developm...
6 72543195-39a2-46d2-ab6a-c412d2580028 User what is openai in 30 words
7 72543195-39a2-46d2-ab6a-c412d2580028 AI OpenAI is an artificial intelligence research ...
Build buttons
def get_button_label(chat_df, chat_id):
first_message = chat_df[(chat_df["ChatID"] == chat_id) & (chat_df["Role"] == "User")].iloc[0]["Content"]
return f"Chat {chat_id[0:7]}: {' '.join(first_message.split()[:5])}..."
for chat_id in chat_history_df["ChatID"].unique():
button_label = get_button_label(chat_history_df, chat_id)
if st.sidebar.button(button_label):
current_chat_id = chat_id
loaded_chat = chat_history_df[chat_history_df["ChatID"] == chat_id]
loaded_chat_string = "\n".join(f"{row['Role']}: {row['Content']}" for _, row in loaded_chat.iterrows())
st.text_area("Chat History", value=loaded_chat_string, height=300)
Output
3 Likes
Could try a dropdown too!
Hi, have you found a solution? i’m also looking for the same type of solution, ive been on it for a month now. Will be awesome if you have and help show me which direction to take, thanks
Hi, in the end I decided to use radio to show each chat history. Not the most nice UI but it’s easiest to combine the showing historical chat function on click and the view of the chat histories. I have implemented a backend with fastAPI and save\get chat histories from postgres database. Hope this helps!
Hello, you can refer to the implementation of this project and use the st.radio component to implement multiple chat windows.
2 Likes
Thanks for sharing.
I like this solution but do you have any suggestion to do this with local storage? For legal reasons we can’t keep a database that stores users information so we need to somehow store the conversations locally
On legality, we really need a user’s consent when doing this, something similar to chatgpt’s approach.
When developing this type of app, we need to ask permission from the users to do what you would like to do on the data/info, whether it is saved in database, local storage etc. Explain to the users what happens to the data/info, if they agree, then they can use your app and you can use their data/info. according to what you have explained to the users.
You can search similar to this subject.
Yes we already explain to the users what is done with the data in the policy and imprint. But the app is from an University and we can’t “store” any of the user data on our servers so I was wondering if there’s a workaround for this. We already allow the users to download and upload a conversation but feels a bit archaic, maybe there is an easy way with local storage to at least keep a conversation going between sessions. Local storage wouldn’t be a legal problem for the University. But thanks for the suggestion!
Local storage cannot handle big data, depending on the expected size, you can store it in a google sheet. One sheet per user for example.
1 Like
I read you can hold up to 10 mb of local storage. That is more than enough to hold at least one pretty big conversation which I think we can work with for now. I’ll try some stuff and see how it goes. Thanks!
2 Likes
Not only privacy but risk… you will enable people to edit their local storage to upload anything to your server to process.
My project implements the chat history by saving it to a local MySQL database. The code is on the GitHub page Personal Chat App
Hey @lz-chen ! I ran into the same issue with making a clickable chat history in the sidebar for Streamlit. After trying out a few ideas, I came across this platform called SuperEngineer that gave me exactly the solution I needed just by describing my requirements. It was pretty cool how quickly it came up with something useful! Might be worth checking out.Check out the screenshots attached below. This is the reference link of the project Streamlit Code Gen
@lz-chen, when I click on a chat in the history, it reloads the entire conversation from that session—just like ChatGPT does.