Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 18 commits into from
Oct 27, 2025
Merged

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

merged 18 commits into from
Oct 27, 2025

Conversation

@elliotmassen
Copy link
Member

@elliotmassen elliotmassen commented Oct 23, 2025 •
edited
Loading

Purpose of PR

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

Collapsed Normal Expanded
Screenshot 2025-10-23 at 17 41 41 Screenshot 2025-10-23 at 17 41 45 Screenshot 2025-10-23 at 17 42 09

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

@elliotmassen elliotmassen self-assigned this Oct 23, 2025
@changeset-bot
Copy link

changeset-bot bot commented Oct 23, 2025 •
edited
Loading

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

vercel bot commented Oct 23, 2025 •
edited
Loading

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

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

@elliotmassen elliotmassen changed the title Pic 694 forma36 create aichatlayout component implementation feat(f36-ai-components): add AIChatLayout component Oct 24, 2025
@elliotmassen elliotmassen marked this pull request as ready for review October 24, 2025 09:30
@elliotmassen elliotmassen requested review from a team and damann as code owners October 24, 2025 09:30
elliotmassen
elliotmassen commented Oct 24, 2025
View reviewed changes
packages/f36-ai-components/src/AIChatLayout/AIChatLayout.tsx Outdated
Comment on lines 160 to 173
<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>
Copy link
Member Author

@elliotmassen elliotmassen Oct 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@elliotmassen elliotmassen requested a review from fabe October 24, 2025 09:49
seanf-ctfl
seanf-ctfl reviewed Oct 24, 2025
View reviewed changes
fabe
fabe approved these changes Oct 24, 2025
View reviewed changes
Copy link
Member

@fabe fabe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great stuff 💅

mshaaban0
mshaaban0 approved these changes Oct 27, 2025
View reviewed changes
Copy link
Collaborator

@mshaaban0 mshaaban0 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very Nice 🥇

@elliotmassen elliotmassen merged commit 6a44dfe into PIC-694-forma36-create-aichatlayout-component Oct 27, 2025
13 of 18 checks passed
@elliotmassen elliotmassen deleted the PIC-694-forma36-create-aichatlayout-component-implementation branch October 27, 2025 11:33
elliotmassen added a commit that referenced this pull request Oct 29, 2025
@elliotmassen
Merge pull request #3203 from contentful/PIC-694-forma36-create-aicha…
59b69e5 
…tlayout-component-implementation

feat(f36-ai-components): add AIChatLayout component
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mshaaban0 mshaaban0 mshaaban0 approved these changes

@seanf-ctfl seanf-ctfl seanf-ctfl left review comments

@fabe fabe fabe approved these changes

@damann damann Awaiting requested review from damann damann is a code owner

Assignees

@elliotmassen elliotmassen

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@elliotmassen @fabe @mshaaban0 @seanf-ctfl