Bubble ChatGPT Clone: How to delete chat sessions

Introduction to ChatGPT Clone in Bubble

This Bubble tutorial video is a follow-on from a mini series we've been going through of how to build a ChatGPT clone in Bubble.io. So that is being able to make your own version of ChatGPT without having to basically write single line of quote with the exception of a small amount of JSON. 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 happens if I delete a conversation and I also want to delete all the messages in that conversation.

Setting Up the Delete Functionality

I've got a simple sidebar here 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 chat bot and then I as the user submitted what is the capital of the USA and ChatGPT OpenAI as API replied back with the capital of the USA is Washington DC. So what 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.

Designing the Delete Icon

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 it's not showing up fully maybe I just need to make it a bit bigger. There we go I'm gonna 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 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.

Creating the Delete Workflow

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 cell's conversation it's going to delete those and then it's going to delete the conversation.

Testing the Delete Functionality

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 messages from that conversation have gone and I'm now only left with one conversation.

Handling Empty Chat Views

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 a conversation so I'm going to say display data page body sales 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 current 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.

Additional Considerations

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 this is 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.

Conclusion

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.

Explore More Content

Hey guys if you're finding these YouTube tutorials helpful we invite you to explore even more content on our website at Planet No Code. We have a large selection and variety of super in-depth and detailed video lessons are created and curated just for our pain members it's all about learning together and accelerating your no-code journey. Check us out at www.planetnocode.com and let's continue building without limits.