feat(f36-ai-components): add AIChatLayout component by elliotmassen · Pull Request #3203 · contentful/forma-36

Elliot Massen (elliotmassen) · 2025-10-23T16:59:41Z

Purpose of PR

This PR continues from #3202 by adding the AIChatLayout component.

Collapsed	Normal	Expanded

Notes

The component is built to be agnostic its contents. In the designs the contents can be an overlay introduction screen, a traditional chat history listing or a set of results to be reviewed - and I imagine there could well be others in the future - therefore I have presumed that the consuming code should be responsible for managing the contents, rather than the layout itself being prescriptive.
I have made the component props fairly flexible with the ability to provide custom icons and buttons so that it can be adapted for different use cases.
I have taken some creative liberties with the button animations - I am not wedded to them and I'm completely happy to remove or amend these as required! I thought worth putting something in place as a starting point.

PR Checklist

I have read the relevant readme.md file(s)
All commits follow our Git commit message convention
Tests are added/updated/not required
Tests are passing
Storybook stories are added/updated/not required
Usage notes are added/updated/not required
Has been tested based on Contentful's browser support
Doesn't contain any sensitive information

…ne of a title or icon

changeset-bot · 2025-10-23T16:59:45Z

⚠️ No Changeset found

Latest commit: 8e56100

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2025-10-23T16:59:47Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
forma-36	Error		Oct 27, 2025 11:13am

Elliot Massen (elliotmassen) · 2025-10-24T09:38:03Z

+      <svg xmlns="http://www.w3.org/2000/svg" width={0} height={0}>
+        <defs>
+          <linearGradient
+            id="icon-gradient"
+            gradientTransform="rotate(46.64 .5 .5)"
+            gradientUnits="objectBoundingBox"
+          >
+            <stop offset="19.41%" stopColor="#1872E5" />
+            <stop offset="38.04%" stopColor="#8C2EEA" />
+            <stop offset="56.68%" stopColor="#E65325" />
+            <stop offset="75.31%" stopColor="#EAAF09" />
+          </linearGradient>
+        </defs>
+      </svg>


Moe Shaaban (@mshaaban0) / @contentful/team-ui-foundation Do you have any advice on where best to put this SVG? It's used to apply a gradient to the icon (see aiGradientIcon in the styles)? I previously had tried to avoid needing to place it in the DOM, and had something working with a CSS fill with a data URL, however it didn't work with Safari.

I think it's fine to keep it in it's own file.. I recommend making it an icon with icon component helper, See https://github.com/contentful/forma-36/tree/main/packages/components/icons/src/custom

…osed, collapsed, open)

…ency

Fabian Schultz (fabe)

Great stuff 💅

Moe Shaaban (mshaaban0)

Very Nice 🥇

…tlayout-component-implementation feat(f36-ai-components): add AIChatLayout component

Elliot Massen (elliotmassen) added 11 commits October 22, 2025 14:59

feat: style collapsed state

d5fc97c

feat(AIChatLayout): fix up styles and story

fdac382

fix: improve styling and layout

8d6f229

feat: complete functionality

ed91a60

fix: make styles pixel perfect

df6828a

fix: add dependency

dd19ba3

fix: use stying tokens where possible

11815c8

fix: ensure buttons always stay on the right regardless of the presce…

5abad13

…ne of a title or icon

feat: add tests

722665f

fix: code quality tweaks

20df8c2

fix: correct tab indexing when buttons are hidden

496dbac

Elliot Massen (elliotmassen) self-assigned this Oct 23, 2025

Elliot Massen (elliotmassen) commented Oct 23, 2025

View reviewed changes

Comment thread packages/f36-ai-components/src/AIChatLayout/AIChatLayout.styles.ts Outdated

fix: support svg gradient in Safari

a5c21bd

vercel Bot had a problem deploying to Preview October 24, 2025 09:29 Failure

Elliot Massen (elliotmassen) changed the title ~~Pic 694 forma36 create aichatlayout component implementation~~ feat(f36-ai-components): add AIChatLayout component Oct 24, 2025

Elliot Massen (elliotmassen) marked this pull request as ready for review October 24, 2025 09:30

Elliot Massen (elliotmassen) requested review from a team and damann as code owners October 24, 2025 09:30

Elliot Massen (elliotmassen) requested review from Moe Shaaban (mshaaban0) and Sean Fitzpatrick (seanf-ctfl) October 24, 2025 09:30

Elliot Massen (elliotmassen) commented Oct 24, 2025

View reviewed changes

fix: remove comment

81cf875

vercel Bot had a problem deploying to Preview October 24, 2025 09:47 Failure

Elliot Massen (elliotmassen) requested a review from Fabian Schultz (fabe) October 24, 2025 09:49

Elliot Massen (elliotmassen) added 2 commits October 24, 2025 11:37

feat: refactor AIChatLayout to use display prop with three states (cl…

06505aa

…osed, collapsed, open)

refactor: rename 'type' prop to 'variant' in AIChatLayout for consist…

495b36b

…ency

Sean Fitzpatrick (seanf-ctfl) reviewed Oct 24, 2025

View reviewed changes

Comment thread packages/f36-ai-components/src/AIChatLayout/AIChatLayout.tsx Outdated

Fabian Schultz (fabe) approved these changes Oct 24, 2025

View reviewed changes

fix: include fixed positioning within the component

a0fe9b0

vercel Bot had a problem deploying to Preview October 24, 2025 15:32 Failure

fix: centralise docs description

520b42e

vercel Bot had a problem deploying to Preview October 24, 2025 15:42 Failure

Moe Shaaban (mshaaban0) approved these changes Oct 27, 2025

View reviewed changes

feat: add IconGradient component for gradient support in AIChatLayout

8e56100

vercel Bot had a problem deploying to Preview October 27, 2025 11:13 Failure

Elliot Massen (elliotmassen) merged commit 6a44dfe into PIC-694-forma36-create-aichatlayout-component Oct 27, 2025
13 of 18 checks passed

Elliot Massen (elliotmassen) deleted the PIC-694-forma36-create-aichatlayout-component-implementation branch October 27, 2025 11:33

Elliot Massen (elliotmassen) added a commit that referenced this pull request Oct 29, 2025

Merge pull request #3203 from contentful/PIC-694-forma36-create-aicha…

59b69e5

…tlayout-component-implementation feat(f36-ai-components): add AIChatLayout component

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(f36-ai-components): add AIChatLayout component#3203

feat(f36-ai-components): add AIChatLayout component#3203
Elliot Massen (elliotmassen) merged 18 commits intoPIC-694-forma36-create-aichatlayout-componentfrom
PIC-694-forma36-create-aichatlayout-component-implementation

Elliot Massen (elliotmassen) commented Oct 23, 2025 •

edited

Loading

Uh oh!

changeset-bot Bot commented Oct 23, 2025 •

edited

Loading

Uh oh!

vercel Bot commented Oct 23, 2025 •

edited

Loading

Uh oh!

Uh oh!

Elliot Massen (elliotmassen) Oct 24, 2025 •

edited

Loading

Uh oh!

Moe Shaaban (mshaaban0) Oct 27, 2025

Uh oh!

Uh oh!

Fabian Schultz (fabe) left a comment

Uh oh!

Moe Shaaban (mshaaban0) left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

Elliot Massen (elliotmassen) commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Purpose of PR

Notes

PR Checklist

Uh oh!

changeset-bot Bot commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel Bot commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Elliot Massen (elliotmassen) Oct 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Moe Shaaban (mshaaban0) Oct 27, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Fabian Schultz (fabe) left a comment

Choose a reason for hiding this comment

Uh oh!

Moe Shaaban (mshaaban0) left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Elliot Massen (elliotmassen) commented Oct 23, 2025 •

edited

Loading

changeset-bot Bot commented Oct 23, 2025 •

edited

Loading

vercel Bot commented Oct 23, 2025 •

edited

Loading

Elliot Massen (elliotmassen) Oct 24, 2025 •

edited

Loading