feat(f36-ai-components): add f36-ai-components package#3202
feat(f36-ai-components): add f36-ai-components package#3202Elliot Massen (elliotmassen) wants to merge 199 commits intomainfrom
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
size-limit report 📦
|
| @@ -0,0 +1,36 @@ | |||
| { | |||
| "name": "@contentful/f36-ai-components", | |||
There was a problem hiding this comment.
Once this PR is approved, should I be running the scripts/prerelease.mjs script to publish this package?
| '@contentful/f36-i18n-utils', | ||
| '@contentful/f36-website', | ||
| '@contentful/f36-docs-utils', | ||
| '@contentful/f36-ai-components', |
There was a problem hiding this comment.
Is this correct? If so, I have added a note to the prerelease section in RELEASES.md to document it.
Elliot Massen (elliotmassen)
requested review from
a team and
damann
as code owners
Elliot Massen (elliotmassen)
requested review from
Moe Shaaban (mshaaban0) and
Sean Fitzpatrick (seanf-ctfl)
Moe Shaaban (mshaaban0)
left a comment
Moe Shaaban (mshaaban0)
left a comment
There was a problem hiding this comment.
Looks good to me 👍🏼
…ne of a title or icon
…s in messages [PIC-847] (#3282)
feat(AIChat): add height and position props to AIChatLayout for flexible layout control
…e-aichatlayout-component
- Added @tiptap/core dependency to package.json. - Updated AIChatHistoryEmptyState to use tokens for icon color. - Refactored AIChatInput to import Editor type correctly. - Modified AIChatMessage to use any type for blockquote props. - Changed import paths for action from '@storybook/addon-actions' to 'storybook/actions' in multiple story files.
…[PIC-949] - using @storybook/react-vite instead of @storybook/react
- Updated react-markdown to version 9.0.3, rehype-raw to version 7.0.0, and remark-gfm to version 4.0.0 in package.json. - Modified AIChatMentionList component to include onClose handler for the Menu component. - Changed Storybook import type from '@storybook/react/types-6-0' to '@storybook/react-vite' in AIChatArtifactMessage stories.
Kathrin Holzmann (Lelith)
left a comment
Kathrin Holzmann (Lelith)
left a comment
There was a problem hiding this comment.
I did not have much time for reviewing, but I see some common themes:
Blocking issues:
- We need to enable all components for internationalization - therefore no hardcoded strings are allowed
- Tests for components have to include an axe acessibility test
General Improvement
- We are using the
Boxcomponent quite a lot where other components likeFlexorStackshould have been preferred
| lineHeight: tokens.lineHeightL, | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| listStyle: (children as any).type === List ? 'none' : '', | ||
| listStyle: (children as any)?.type === List ? 'none' : '', |
There was a problem hiding this comment.
I know it's a tiny change, but I would prefer it if we keep the scope specific to AI components, so I would strongly prefer if this change could be applied in its own PR.
| import React from 'react'; | ||
| import { AIChatArtifactMessage } from './AIChatArtifactMessage'; | ||
|
|
||
| describe('AIChatArtifactMessage', function () { |
There was a problem hiding this comment.
Please add an axe test for this component
| <Box className={styles.header}> | ||
| <Box className={styles.icon}>{icon}</Box> | ||
| <Box className={styles.title}>{title}</Box> | ||
| </Box> |
There was a problem hiding this comment.
💅 This could be improved by using Flex instead of Box component and safe us some extra lines of css which are changing the default behavior of the div element that is behind the Box component
| children: ReactNode; | ||
| } | ||
|
|
||
| export const AIChatConversation: React.FC<AIChatConversationProps> = ({ |
There was a problem hiding this comment.
💅 when i look at what this component delivers and the styles it applies, it could also be replaced entirely with the Flex component
| export const AIChatSuggestionList = ({ | ||
| suggestions, | ||
| onSelect, | ||
| testId, |
There was a problem hiding this comment.
💅 we usually provide a default test id in these cases, to ensure for better component identification
| import { MessageGroups } from '../AIChatHistory'; | ||
| import { AIChatHistoryTabs } from './AIChatHistoryTabs'; | ||
|
|
||
| describe('AIChatHistoryTabs', () => { |
There was a problem hiding this comment.
misses an axe test
| background: 'none', | ||
| border: 'none', |
There was a problem hiding this comment.
❓ Why do we need to overwrite defaults?
| const threadElement = screen.getByTestId( | ||
| 'cf-ui-ai-chat-history-thread-test-thread', | ||
| ); | ||
| fireEvent.click(threadElement); |
There was a problem hiding this comment.
we prefer userEvent over fireEvent for better accessibility testing
| import { MessageThread } from '../AIChatHistory'; | ||
| import { AIChatHistoryThread } from './AIChatHistoryThread'; | ||
|
|
||
| describe('AIChatHistoryThread', () => { |
There was a problem hiding this comment.
misses axe test
| className={styles.threadStatus} | ||
| aria-label={`Status: ${thread.status}`} | ||
| title="Status" | ||
| > |
There was a problem hiding this comment.
🇩🇪 🇫🇷 These texts need to be translated and therefore should be provided as props or already be offered as translated component using lingui
There was a problem hiding this comment.
Forma 36 isn't set up with Lingui yet, so these texts can't be localized. They can already be exposed via props, like other components.
* chore: tiptap v3
11 participants
Summary
@contentful/f36-ai-componentspackage — a collection of components for building AI conversational interfaces (chat layouts, message rendering, input with mentions, reasoning indicators, side panels, and more)main(React 19, Emotion v11 migration) into the ai-components branchemotionv10 to@emotion/cssv11@contentful/f36-*dependencies to^6.0.0and updates React peer deps to^18.3.0 || >=19.1.0blockquoteHTMLQuoteElement typing,Editortype import from@tiptap/core, iconvariantprop removal, controlledMenurequiringonClose)react-markdownv7 → v9,rehype-rawv6 → v7,remark-gfmv3 → v4 for React 19 JSX namespace compatibility@storybook/addon-actions→storybook/actions,@storybook/react→@storybook/react-vite)_Componentfunctions toComponentBasesuffix to satisfyreact-hooks/rules-of-hookslinterfixedversion group)New Components
AIChatLayout— full-page chat layout with side panel supportAIChatMessage— markdown-rendered user/assistant messages with action buttonsAIChatMessageList— auto-scrolling message list with streaming supportAIChatInput— TipTap-based rich text input with@mentionsupportAIChatHistory— tabbed thread history with searchAIChatReasoning— expandable reasoning/thinking indicator with animationAIChatSidePanel— collapsible side panelAIChatSuggestionPill— clickable suggestion chipsAIChatConversation— conversation containerAIChatArtifactMessage— artifact display in messagesTest plan
packages/coreandpackages/f36-ai-components)f36-ai-componentsvs main (exceptpackage-lock.json)PR Checklist
readme.mdfile(s)