Bubble ChatGPT Clone: How to delete chat sessions

Headshot of Matt the Planet No Code Bubble Coach

Need 1 to 1 help?

Your no-code consultant & Bubble tutor.

In this Bubble.io tutorial we expand on our previous Bubble.io ChatGPT Clone videos to show you how to delete a conversation and all messages included in that conversation.

This Bubble tutorial video is a follow on from a mini series we've been going through of how to build a ChatGPT client in Bubble. So that is being able to make your own version of ChatGPT without having to basically write a single line of code with the exception of a small amount of JSON.

How to build a ChatGPT clone in Bubble.io

So check out our previous videos on our channel for how to get this far because this video is simply going to focus on what are the happens if I delete a conversation and I also want to delete all the messages in that conversation.

So I've got a simple sidebar here and I'm on this conversation here. We've already done a video showing how to add in an introduction message or an opening message that's, Hello, my name is Frank, I'm a chatbot. And then I, as the user submitted, What is the capital of the USA? And ChatGPT, Open AI, as API replied back with, The capital of the USA is Washington, DC.

How to delete ChatGPT messages

So what if I want to delete this... So I'm going to go into design and I'm going to add in an icon into my repeating group here.

My repeating group here is a list through of conversations. So I'm going to change this to trash. Remove some of the default styling on the icon, that's why it's not... Why is it not showing up fully. Maybe I just need to make it a bit bigger. There we go. I'm going to make this last. Adjust the height here. There we go. And then also change the repeating groups container layout to row. Now, if I preview that, you'll see I have a trash or a bin icon in the far right of my repeating group for my conversations.

Delete ChatGPT messages then conversations

So now I need to add a workflow to it. And remember, this workflow is going to not only delete the conversation, but also delete all of the messages. So in my data structure, my messages have got a field of conversation. And conversation doesn't have any additional fields to it. So I'm simply using conversation to group together my messages. That means that I need to delete my messages before I delete the conversation because it's conversation that is holding my messages together. So I can do delete a list of things, messages, and I can say, do a search for messages where conversation equals current cell's conversation.

And then I can do delete a thing because I'm now only deleting one thing and that is current cell's conversation. So it's going to list through any messages where the conversation equals current sales conversation. It's going to delete those, and then it's going to delete the conversation.

So if I go into my database app data, we can see that this is the conversation here. We see I've got two unique conversation IDs here, one ending in 2500, and then this is the other one up here. So these are the ones here that I'm expecting to be deleted. So let's give that a go. And hit delete. And it's deleted. And if I go into messages, we can see that all of the messengers from that conversation are gone. And I'm now only left with one conversation. I'm going to add one final step here, which is when I deleted the conversation, I now have an empty chat view. And that means if I send the message here, it's not actually connected in with the conversation. So I'm going to say display data, page body, service conversation. The reason I'm doing this is in the previous videos where you will have seen how I built all of this ChatGPT interface, I have page body and that holds the conversation that new messages are entered into.

So not currents cell's conversation, but I'm going to say repeating group, list of conversations first item. And so what that will do is that by deleting one of the conversations in my repeating group of conversations, it's going to just show you, fill in the first conversation in that repeating group that is left.

Now, I'm not going to cover that in this video because it's already meant to be a bite size one. But you also need to take into consideration, step three isn't going to do anything if I've deleted the final conversation. I then need to actually create a conversation if there are no conversations left. And you could do this by adding in an only when statement on step three, and then adding a step four statement of creating a new conversation if you needed to, and adding a condition to that to only happen if there are no more conversations left in the repeating group. So there you have it. That's a quick addition to our Bubble ChatGPT clone tutorial. And thank you very much to the commenter on one of our previous videos who asked a question related to how do I delete all the messages when I delete a conversation?