ChatGPT Clone - how to format chat bubbles
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.
Design your ChatGPT clone: Learn how to add sleek chat bubbles and real-time streaming to your Bubble.io ChatGPT clone!
Level up your Bubble skills: Discover how to create engaging repeating group designs with custom backgrounds and rounded edges.
Enhance user experience: Learn to implement different color schemes for user and AI messages in your chat interface.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.