How to create a chat history on the side bar just like chatGPT?

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! :blush:

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

2 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 :blush:

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!