feat(toolbar): component in ai chat components

[sangeethababu9223]

Closes #618

Toolbar component developed as part of Workspace is moved out of it and made to a general component.

Changelog

New

• Created a toolbar component under @carbon/ai-chat-components
• As per @devadula-nandan’s suggestion, I’ve also added the flush prop.

Testing / Reviewing

This can be tested in the components storybook.

[netlify]

✅ Deploy Preview for carbon-ai-chat-components ready!

Name	Link
🔨 Latest commit	4d570fe
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-ai-chat-components/deploys/6918375c8cd91f0008791c2c
😎 Deploy Preview	https://deploy-preview-617--carbon-ai-chat-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for carbon-ai-chat-demo ready!

Name	Link
🔨 Latest commit	4d570fe
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-ai-chat-demo/deploys/6918375cba1a580008bc9d81
😎 Deploy Preview	https://deploy-preview-617--carbon-ai-chat-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for ai-chat-components-react ready!

Name	Link
🔨 Latest commit	4d570fe
🔍 Latest deploy log	https://app.netlify.com/projects/ai-chat-components-react/deploys/6918375cddf60d0009e9535d
😎 Deploy Preview	https://deploy-preview-617--ai-chat-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[ethanwinters]

We need a slot before the title, too, for "navigation" where we can put hamburger menu or icon for home screen.

I also would consider just making it flush by default and removing that attribute and letting folks just define padding on their own if they wish. I would also remove the border and let folks add that on their own (we, for instance, don't want a border when using this in the chat header).

[sangeethababu9223]

We need a slot before the title, too, for "navigation" where we can put hamburger menu or icon for home screen.

I also would consider just making it flush by default and removing that attribute and letting folks just define padding on their own if they wish. I would also remove the border and let folks add that on their own (we, for instance, don't want a border when using this in the chat header).

Hey @ethanwinters ,
The above changes are done. Please check.

[ethanwinters]

Just one comment to sort out. Looks great!

[ethanwinters]

I think we don't need this data-rounded="top"? Doesn't seem to do anything? If its supposed to be rounding the corners, it isn't. And if it is supposed to be rounding the corners, it should be configurable.

[devadula-nandan]

its supposed to work in the context of the css custom property.
it makes sense when we start integrating this in ai-chat that defines that custom property.
also i am bringing few changes to make that property more generic and relevant to utility. in this pr. so my eyes are on it to make the updates.

Screen.Recording.2025-11-20.at.7.11.36.AM.mov