Repository navigation
feat(chat-container): add default Gravity mascot - #272
Conversation
|
🚀 Prerelease version published! Install this PR version: npm i --save-dev @gravity-ui/aikit@2.22.2-beta.b0b1ed7909c8f4f7159871617bdc2a12356930ac.0 |
|
Preview is ready. |
|
🎭 Component Tests Report is ready. |
|
|
||
| | Variable | Default | Description | | ||
| | ---------------------------- | --------- | -------------------------------------- | | ||
| | `--zk-b1` | `#FFFF00` | Center color of the body gradient | |
There was a problem hiding this comment.
issue: The CSS variables use the internal prefix zk: --zk-b1, --zk-b2, --zk-eye, --zk-pup. The SVG classes and keyframes use g-aikit-zk-*. These names do not follow the --g-aikit-* convention. A rename after the release is a breaking change. Please use names like --g-aikit-mascot-body-center-color, --g-aikit-mascot-body-edge-color, --g-aikit-mascot-eye-color and --g-aikit-mascot-pupil-color.
There was a problem hiding this comment.
I have prepared a fix using --g-aikit-mascot-body-center-color, --g-aikit-mascot-body-edge-color, --g-aikit-mascot-eye-color, and --g-aikit-mascot-pupil-color. The SVG classes/keyframes, Storybook controls, and documentation use the same namespace. The default colors are unchanged.
| "homepage": "https://github.com/gravity-ui/aikit#readme", | ||
| "scripts": { | ||
| "prepare": "husky", | ||
| "prepare": "npm run generate:mascot && husky", |
There was a problem hiding this comment.
suggestion: The mascot generation needs six hooks: prepare, pretypecheck, prelint:js, prebuild, prestart and preplaywright. test:unit has no hook. Jest finds the generated files only because npm ci ran prepare before it. The repo already has a simpler pattern: generate:exports and generate:exports:check. Please commit the generated files and check them in CI the same way. Then the hooks and the .gitignore entry are not necessary.
There was a problem hiding this comment.
Agreed. The fix includes the generated TSX files, removes the six generation hooks and the ignore entry, and adds generate:mascot:check to CI. The check reports missing, changed, and stale output without rewriting files. SVG files remain the source of truth; regeneration is an explicit command.
|
|
||
| const b = block('chat-container'); | ||
| const LazyGravityMascotRenderer = lazy(() => | ||
| import('./GravityMascotRenderer.js').then(({GravityMascotRenderer}) => ({ |
There was a problem hiding this comment.
suggestion: The lazy import solves the bundle size issue, thanks. This is the only import in src with a .js extension. Storybook needs a new extensionAlias only for this import. Please use import('./GravityMascotRenderer') like the other imports, if the build allows it.
There was a problem hiding this comment.
I checked the extensionless import against the CJS build configuration. It fails with TS2835 because this build uses module and moduleResolution: nodenext, which preserve native dynamic imports and require an explicit file extension. The current emitted CJS and ESM files both use import("./GravityMascotRenderer.js"). I would keep the .js extension and the Storybook alias unless we also extend the build transformer to handle dynamic imports.
| @@ -1,68 +1,33 @@ | |||
| import type {CSSProperties} from 'react'; | |||
|
|
|||
| import {GravityMascot} from '../../components/pages/ChatContainer/GravityMascot'; | |||
There was a problem hiding this comment.
suggestion: This change is outside the scope of the PR. TestMascot was a neutral fixture. Now it renders the real GravityMascot, and the latest commit added a view prop for it. The MessageList and EmptyContainer tests now check mascot internals, for example svg.g-aikit-zk-heroIdle. The two new screenshots in MessageList.visual.spec.tsx check the footer layout, not the mascot. Please revert TestMascot, these test changes and the two screenshots.
There was a problem hiding this comment.
Agreed. I have prepared a revert of the TestMascot, MessageList, and EmptyContainer fixture/test changes, including the two new MessageList screenshots. The Gravity mascot examples remain in ChatContainer, including the color controls and mobile playground.
| viewBox="-10 -10 141 80" | ||
| width="141" | ||
| height="80" | ||
| role="img" |
There was a problem hiding this comment.
nitpick: The root <svg> in all 12 files has role="img" and an English aria-label. The wrapper in GravityMascot has aria-hidden="true", so screen readers ignore these attributes. Please remove them from the SVG sources.
There was a problem hiding this comment.
Agreed. The local fix removes role and aria-label from all 12 SVG sources and regenerates their TSX components. The decorative aria-hidden wrapper is preserved.
4 participants
ChatContainernow supportsshowMascotto display the bundled animated Gravity mascot on the welcome screen and in chat. CustommascotConfigSVGs and renderers retain priority and continue to work without the new prop. The mascot remains disabled by default.Standalone SVG files are the source of truth. Their generated React components are committed, and CI runs the read-only
generate:mascot:checkcommand to detect missing, changed, or stale output. The renderer loads through a dynamic import when needed. Inline rendering preserves unique gradient/clip IDs per instance and reduced-motion support.The four public
--g-aikit-mascot-*color variables are documented in the README and demonstrated by Storybook'sMascotColorscontrols. The existing 8rem/4rem sizes are preserved. The neutralTestMascotfixture and unrelated MessageList/EmptyContainer tests are restored; Gravity examples remain scoped to ChatContainer. Redundant SVG accessibility attributes are removed because the mascot wrapper is decorative.Validation:
git diff --checkpassed.Previews: