Skip to content

feat: add new header config#950

Open
ethanwinters wants to merge 4 commits intocarbon-design-system:components-ga-integrationfrom
ethanwinters:new-header-components-integration
Open

feat: add new header config#950
ethanwinters wants to merge 4 commits intocarbon-design-system:components-ga-integrationfrom
ethanwinters:new-header-components-integration

Conversation

@ethanwinters
Copy link
Contributor

@ethanwinters ethanwinters commented Feb 16, 2026 •
edited
Loading

Closes #801 #698 #628 #726

IMPORTANT

We need #955 before we can merge into main.

Add actions and fixed actions to chat header

This PR refactors the chat header component to support custom action buttons and implements a new focus management pattern for web components. It now uses the toolbar component.

Changelog

New

  • Custom header actions: Added support for custom action buttons in the chat header via ChatHeaderConfig.actions property
  • New ChatHeader component: Created new @carbon/ai-chat-components chat header web component (cds-aichat-chat-header) with React wrapper
  • Focus management pattern: Implemented requestFocus() method pattern for web components to enable parent components to request focus without knowing internal structure
  • Focus management documentation: Added comprehensive documentation in docs/focus-management-pattern.md explaining the reusable focus management pattern
  • Header action events: Added new event bus types for header menu interactions (BusEventHeaderMenuClick, HeaderMenuClickType)
  • Component reset styles: Added global component reset styles in packages/ai-chat-components/src/globals/scss/component-reset.scss
  • Storybook stories: Added comprehensive Storybook stories and documentation for the new chat header component (both React and web component versions)
  • Test coverage: Added extensive test suite for chat header component (chat-header.test.ts) with 471 lines of tests
  • Demo examples: Updated demo applications to showcase the new header actions functionality

Changed

  • Header implementation: Migrated from legacy header component (packages/ai-chat/src/chat/components-legacy/header/) to new modular header component (packages/ai-chat/src/chat/components/header/)
  • Header configuration: Enhanced ChatHeaderConfig interface to support action buttons with icons, labels, disabled states, and click handlers
  • Toolbar component: Updated toolbar component to better support header action buttons
  • Component styles: Updated multiple component SCSS files to improve styling consistency and support the new header structure
  • Test snapshots: Updated test snapshots across multiple test suites to reflect the new header structure
  • Package dependencies: Updated package.json dependencies

Removed

  • Legacy header components: Removed old header implementation files:
    • packages/ai-chat/src/chat/components-legacy/header/Header.tsx
    • packages/ai-chat/src/chat/components-legacy/header/Header.scss
  • Legacy chat header sub-components: Removed deprecated ChatHeaderAvatar and ChatHeaderTitle components and their web component implementations
  • Unused imports: Cleaned up unused SCSS imports in legacy components

Testing / Reviewing

Functional Testing

  • Open the demo application
  • Verify custom action buttons appear in the header toolbar
  • Click action buttons and verify their onClick handlers are called
  • Test with different numbers of actions to verify overflow behavior

Code Review Checklist

  • Review the new ChatHeaderConfig interface for API design
  • Verify the focus management pattern implementation in chat-header.ts
  • Check that all removed legacy components are no longer referenced
  • Review test coverage in chat-header.test.ts
  • Verify Storybook stories accurately demonstrate the new functionality
  • Check that the migration maintains backward compatibility for existing configurations
  • Review the focus management documentation for clarity and completeness
  • Verify SCSS changes don't introduce visual regressions
  • Test the demo applications to ensure they showcase the new features correctly

@ethanwinters ethanwinters mentioned this pull request Feb 16, 2026
Closed
9 tasks
@netlify
Copy link

netlify bot commented Feb 16, 2026 •
edited
Loading

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

Name Link
🔨 Latest commit 1d0191b
🔍 Latest deploy log https://app.netlify.com/projects/carbon-ai-chat-demo/deploys/69a05ce1e9f0a10008ed9374
😎 Deploy Preview https://deploy-preview-950--carbon-ai-chat-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

netlify bot commented Feb 16, 2026 •
edited
Loading

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

Name Link
🔨 Latest commit 1d0191b
🔍 Latest deploy log https://app.netlify.com/projects/carbon-ai-chat-components/deploys/69a05ce184d09d00081baf3b
😎 Deploy Preview https://deploy-preview-950--carbon-ai-chat-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

netlify bot commented Feb 16, 2026 •
edited
Loading

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

Name Link
🔨 Latest commit 1d0191b
🔍 Latest deploy log https://app.netlify.com/projects/ai-chat-components-react/deploys/69a05ce144f3c500086d148b
😎 Deploy Preview https://deploy-preview-950--ai-chat-components-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

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 ethanwinters changed the base branch from main to components-ga-integration February 16, 2026 16:42
@ethanwinters ethanwinters force-pushed the new-header-components-integration branch 6 times, most recently from 9b5ba1c to 485afd6 Compare February 23, 2026 16:09
@ethanwinters ethanwinters marked this pull request as ready for review February 23, 2026 21:48
@ethanwinters ethanwinters requested a review from a team as a code owner February 23, 2026 21:48
@ethanwinters ethanwinters requested review from davidmenendez and removed request for a team February 23, 2026 21:48
github-actions bot and others added 3 commits February 24, 2026 16:59
@github-actions @annawen1
@carbon-bot @warrenmblood @tom-youd
chore(release): v1.7.0 (carbon-design-system#978)
0fc1513 
Co-authored-by: Anna Wen <54281166+annawen1@users.noreply.github.com>
Co-authored-by: carbon-bot <carbon@us.ibm.com>
Co-authored-by: Warren Blood <69060697+warrenmblood@users.noreply.github.com>
Co-authored-by: tom-youd <56865994+tom-youd@users.noreply.github.com>
Co-authored-by: Warren Blood <blood.warren@gmail.com>
@tom-youd
fix(a11y): add aria label for processing component (carbon-design-sys…
707acd7 
…tem#994)
@renovate
fix(deps): update dependency @carbon/utilities to ^0.16.0 (carbon-des…
9cc7fb9 
…ign-system#973)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
@ethanwinters ethanwinters force-pushed the new-header-components-integration branch from 485afd6 to 74acb69 Compare February 26, 2026 14:41
@ethanwinters ethanwinters force-pushed the new-header-components-integration branch from 74acb69 to 1d0191b Compare February 26, 2026 14:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@davidmenendez davidmenendez Awaiting requested review from davidmenendez davidmenendez is a code owner automatically assigned from carbon-design-system/carbon-ai-chat-developers

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

2 participants

@ethanwinters @tom-youd