AI chat bar - buttons morphing into dropdown lists built with Claude

few hot takes: - model picker with 5 things AND a search seems overkill, I like what a lot of apps are doing with a numerical shortcut - the expanding Add File isn't doing anything imo, you'll know what it does the second time and the movement just becomes annoying - there's a weird skew in visual hiearchy between the main part of the composer - the text - and the actions below it more in the sketch, overall looks great!

finally, constructive feedback! 🫶 so: model picker - in the settings, you can add multiple languages, and the dropdown only supports the ones you've selected, but the assumption is that there can be many, so keyboard shortcuts won't work. add file button - this is an exploration effect, just like a morphing dropdown - it doesn't look like this in production 🤗 weird skew - can you explain what exactly you're talking about? regarding what you've drawn, keep in mind that the design is scaled to better show the interactions. the model button is a ghost button, so it has a different style

sorry, weird skew was very badly written. I mean that the text part - where you input - and the buttons have a visual hierarchy that makes the buttons more important and central to the experience vs the text. This is contrary to basically every other 'prompt box' design, where text is king and the buttons are something you interact with way less frequently

Love this! Maybe a tiny spring on the button press? We think it'd feel even nicer.

wow, honestly wasn't expecting a comment from you - that means a real honor for me! 🫶 i'll take that to heart. next round of animations will be more polished! thanks @LottieFiles 🫶

Nice one. But bet u can bump those numbers up 😉 and yes. The list goes on and on from there on local models +

the way it works is similar to e.g. IDE tools – in settings, you choose which models will appear in the selector. the list can be quite long, which is why the search bar has been added 😉

👍

🫶

Can we get figma or source code if it?

Cool!

@50shadesofAI haha thanks buddy, your opinion is the most important to me 🔥🫶

It's beautiful, could you share the source code?

@_lexuanviet i plan to create a website with all the components i've created so far and then i'll share the code - follow me, and i'll definitely make a post about it soon 🤗

Wow, I've just been following you so I don't miss when that website is finished

It looks absolutely amazing. Can I replicate it?

go ahead bro! but please mention my profile when you share it, ok? 🙏

Alright bro, will do!

Sleek and smooth! Love the glassmorphism / effect here.

thank you! it was a difficult part of the implementation to bring the React component closer to what we know from Apple systems 🥲

It’s flawless

thank you 🫶🫶🫶

absolutely beautiful

@spideystocks thank you soo much 🫶🫶🫶

This is dope

🙇‍♂️

Soo smooth & love the snappy animations Arek!

i appreciate Michael! 🫶

SO F SMOOTH!

thank you! 😊

Beautiful 🔥🔥

thank you! 🫶

This is a strong interaction pattern. The controls change state without pulling the user away from the composer, so the flow stays focused. Curious how you handle keyboard navigation once the buttons become menus.

if you're talking about accessibility, this concept already has standards, but I haven't expanded on it with keyboard shortcuts - remember, it's just a concept and good fun 🤗 the real product doesn't have as many interactions or glass-effect imitation features; it's too expensive for GPU 🤷‍♂️

so smooth!

thank you! 🫶

looks great mate! what did u prompt to get the borders looking like that?

@HomemadeToast57 all I had to do was create a component in Figma and pass it through mcp to Claude. i asked Claude to create an effect as close to the glass effect as possible. interestingly, Fable was getting worse with each iteration - Opus managed it better 🤷‍♂️

Good to know thanks!

This is actually a good one. Knowing AI did this for you It looks so clean too, your prompting must have been so detailed too.

oh yes 😉 the current ai era for designers is very hot 🔥

Cool 🔥

thanks! 🫶

Love the look, hate the jumping click target... Any way to detech button on hover into a floating "thing" and thus preserve the current click target so that users don't miss fast clicks on the UI when they finally learn a stable version of it?

don't get too used to it, it's just my exploration. the final product doesn't have as many bells and whistles 😉

Visually v beaut. Probs a bit excessive to expand on hover every time for common actions and have search for a handful of models. V cool though

you mean dropdown with effort? that's the only place where dropdown appears on hover

Where you show search models, but there’s only 6 models in total

Great!

thank you 🖤

Are you open to show me the prompt please? I will create a very cool thing from it!

it's not just one prompt, but a whole army - first, based on the Figma mockup, i created an early stage of this component in Claude thanks to figma-console-mcp, and then, with many prompts and the help of my custom agents to validate the React code, i created everything you see - long process behind it

okay I will try to replicate via one prompt!

sure! share your results 🙏

Thy will keep you in the loop, shared your post in my private group with the friends :D

cool, thanks Marcell 🫶

So cool!! do u use any reference in prompt or how do u describe this (asking as a person really struggles to describe this kind of animation and motion to ai😭)

in my case, these are React components, so i need to know roughly what a given animation is called in that language or precisely describe it in words. look for libraries with components and almost every major one has some kind of animations

Love it when every hover animation shifts the layout..

thanks Paul 🫶

🔥🔥🔥

🫶

Cute

Amazing work can you share the code plz

i'll definitely do it but it needs time. my plan is to build the website with all of the components that i've created so far. please wait a bit 🙏

great job! I have a very similar interest in this particular part of UI

thank you! 🫶

Beautiful work

thanks a lot! 🫶

Crazy work bud!

ty 🫶

Looks nice!

thanks! 🖤

This is smooth🔥

thank you bro! 🔥

Just beautiful

thanks a lot Ash 🫶