ChatGPT Clone - how to format chat bubbles

Improving the ChatGPT Clone Design

In this Bubble tutorial, I'm going to demonstrate how we can add some design improvements to the ChatGPT clone that I was building in my previous video. This is a ChatGPT clone which has got real-time streaming of the text into it. We'll be demoing that, but if you want to see how I did that, check out my last video. But I'm just going to add some design improvements here.

Setting Up the Repeating Group

If I go to the demo, you can see here, I've just got simple repeating group with a text field inside a text label. So I'm going to improve the design of my repeating group by making the separator, let's say 20 pixels, and that adds in a uniform gap between each element. But I don't want it to be gray, I just want it to be transparent. So I change that. I'm then going to get rid of the fixed number of rows, make the min height of row zero, change my text height, min height to zero. So now everything is only going to be as big as it needs to be.

Enhancing Chat Bubbles

But I want to make the chat bubbles even more attractive. So I'm going to add in a background. So background for, I'm going to make it a light gray, and I'm going to add in some padding. Let's say eight from the top and bottom, and then 12 from the left and right. And I'm going to add in some roundness, because all good chat bubbles, or at least the friendly ones have got rounded edges. Let's chat that out. So what is the capital of Wales?

Exploring More Content

Hey guys, if you're finding these YouTube tutorials helpful, we invite you to explore even more content on our website at planetnocode.com. We have a large selection and variety of super in-depth and detailed video lessons 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.

Demonstrating the Improved Design

And here we should see the, here we go, the text streaming in the capital of Wales is Cardiff. Now I want to even more improve this, which is that I think I'll make my text bubbles a bluey gray and the AI's response is a, leave it as the current gray. So I could do that very easily by going into conditional and saying when current cell's index modulo by two, and this is basically where finally remainder, it's one way of checking to see if a number is even or odd. And so I'm going to say is one, I'm going to change the background color into blue and I can preview that there. It's a little bit dark. There we go. Let's try that. What is the capital of Iceland? There you go. The capital of Iceland is Reykjavik and we've got the two different tones of color coming in there.

Conclusion and Additional Resources

So there you have it. That's a wrap up on this video. If you have any questions about ChatGPT and Bubble, if you've got any questions about this plugin, if you would like to see me demonstrate anything on the Bubble app, please leave a comment below. We read every single one. If you want more help, you can head to our website where we've got exclusive member only videos. And if you want a little bit of one-to-one help with myself and the Bubble coaching team we've got, then you can reach out through our website and you can book a one-to-one call where we can really tick off some issues that you're getting stuck with, with your Bubble app during our zoom call.