From eb119f0aaa94065196c130cb3da26299cc6fbdbd Mon Sep 17 00:00:00 2001 From: gillyb <1319502+gillyb@users.noreply.github.com> Date: Fri, 3 Jan 2025 18:53:42 +0000 Subject: [PATCH] fix: carousel hitbox edges fix (COR-4364) (#486) **Fixes or implements VF-4364** ### Brief description. What is this change? Fixed the carousel button hitbox issue by making the 'surrounding' button component a little bit bigger so when the image is enlarged it will still be inside of the 'hitbox'. Added the `NewChat` component wrapper to the Carousel story, so that it looks good in storybook. Added a `2px` left margin to the first carousel card to align it with the other messages displayed above or below it. Also updated `@vanilla-extract/css` and `@vanilla-extract/vite` packages. Initially did this cause I thought there was a vanilla-extract related bug - there wasn't, but the update is still helpful to stay updated. --- .../src/components/ChatScript/index.tsx | 3 +- packages/chat/package.json | 4 +- .../components/Carousel/Carousel.story.tsx | 135 +++++++++++------- .../components/Carousel/CarouselButton.tsx | 14 +- .../Carousel/carouselButtonStyles.css.ts | 80 ++++++----- .../chat/src/components/Carousel/index.tsx | 3 +- .../src/components/Carousel/styles.css.ts | 4 + yarn.lock | 43 +++--- 8 files changed, 162 insertions(+), 124 deletions(-) diff --git a/apps/documentation/src/components/ChatScript/index.tsx b/apps/documentation/src/components/ChatScript/index.tsx index cd3f5e339..9f7f8b092 100644 --- a/apps/documentation/src/components/ChatScript/index.tsx +++ b/apps/documentation/src/components/ChatScript/index.tsx @@ -15,7 +15,8 @@ export const ChatScript = ({ projectID, embedded = false }: { projectID: string; verify: { projectID: "${projectID}" }, assistant: { stylesheet: '../../bundle/style.css', - } + }, + versionID: 'production' ${embedded ? ', render: { mode: "embedded", target: document.getElementById("chat_embed") }' : ''} }); }; diff --git a/packages/chat/package.json b/packages/chat/package.json index d9a9b9c91..dd3121272 100644 --- a/packages/chat/package.json +++ b/packages/chat/package.json @@ -75,7 +75,7 @@ "test:unit": "yarn g:vitest run --coverage" }, "dependencies": { - "@vanilla-extract/css": "1.15.5", + "@vanilla-extract/css": "1.16.1", "@vanilla-extract/recipes": "0.5.5", "@voiceflow/base-types": "2.113.1", "@voiceflow/dtos-interact": "1.10.0", @@ -123,7 +123,7 @@ "@types/react-speech-recognition": "^3.9.5", "@types/react-syntax-highlighter": "15.5.13", "@vanilla-extract/dynamic": "2.1.2", - "@vanilla-extract/vite-plugin": "4.0.15", + "@vanilla-extract/vite-plugin": "4.0.18", "@vitejs/plugin-react": "4.2.1", "@voiceflow/test-common": "1.10.3", "chromatic": "11.2.0", diff --git a/packages/chat/src/components/Carousel/Carousel.story.tsx b/packages/chat/src/components/Carousel/Carousel.story.tsx index a69e9b68c..55948668f 100644 --- a/packages/chat/src/components/Carousel/Carousel.story.tsx +++ b/packages/chat/src/components/Carousel/Carousel.story.tsx @@ -5,6 +5,7 @@ import { RuntimeProvider } from '@/contexts'; import { MOCK_IMAGE } from '@/fixtures'; import { DEFAULT_AVATAR, RenderMode } from '@/main'; import { WithDefaultPalette } from '@/storybook/decorators'; +import { widgetContainer } from '@/views/ChatWidget/styles.css'; import { NewChat } from '../NewChat'; import { MessageType } from '../SystemResponse/constants'; @@ -30,7 +31,32 @@ const meta: Meta = { ...DEFAULT_WIDGET_SETTINGS, }} > - {Story()} +
+ Promise.resolve(), + placeholder: 'Message...', + }, + }} + isLoading={false} + hasEnded={false} + > + {Story()} + +
), WithDefaultPalette, @@ -72,64 +98,69 @@ const MULTIPLE_CARDS = [ export const Default: Story = { render: () => ( -
- + + Promise.resolve(), - placeholder: 'Message...', - }, - }} - isLoading={false} - hasEnded={false} - > - - - -
+ withImage={true} + /> + ), }; export const SingleCard: Story = { - args: { - cards: [FIRST_CARD], - }, + render: () => ( + <> + + + + ), }; export const MultipleCards: Story = { - args: { - cards: MULTIPLE_CARDS, - }, -}; - -export const WithControls: Story = { - args: { - cards: MULTIPLE_CARDS, - }, + render: () => ( + <> + + + + ), }; diff --git a/packages/chat/src/components/Carousel/CarouselButton.tsx b/packages/chat/src/components/Carousel/CarouselButton.tsx index d67891b0d..f938deb7c 100644 --- a/packages/chat/src/components/Carousel/CarouselButton.tsx +++ b/packages/chat/src/components/Carousel/CarouselButton.tsx @@ -1,9 +1,11 @@ +import clsx from 'clsx'; import type { MouseEventHandler } from 'react'; import { forwardRef } from 'react'; import { Icon } from '@/components/Icon'; -import { carouselButton, rotate180 } from './carouselButtonStyles.css'; +import { buttonReset } from '../Button/reset.css'; +import { buttonWrapper, carouselButton, rotate180 } from './carouselButtonStyles.css'; export interface CarouselButtonProps { /** @@ -33,8 +35,14 @@ export interface CarouselButtonProps { */ export const CarouselButton = forwardRef( ({ onClick, visible, direction, noAvatar }, ref) => ( - ) ); diff --git a/packages/chat/src/components/Carousel/carouselButtonStyles.css.ts b/packages/chat/src/components/Carousel/carouselButtonStyles.css.ts index ea6f56638..1d0a936cb 100644 --- a/packages/chat/src/components/Carousel/carouselButtonStyles.css.ts +++ b/packages/chat/src/components/Carousel/carouselButtonStyles.css.ts @@ -55,46 +55,17 @@ const fadeOutToRight = keyframes({ }, }); -export const carouselButton = recipe({ - base: [ - buttonStyles({ round: true }), - { - height: BUTTON_SIZE, - width: BUTTON_SIZE, - color: COLORS.NEUTRAL_DARK[100], - border: `solid 1px ${COLORS.NEUTRAL_LIGHT[100]}`, - backgroundColor: COLORS.white, - boxShadow: '0px 3px 4px 0px rgba(0, 0, 0, 0.02), 0px 8px 42px -16px rgba(0, 0, 0, 0.06)', - transition: transition(['opacity', 'color', 'transform']), - ':hover': { - color: COLORS.NEUTRAL_DARK[600], - transform: 'scale(1.15)', - }, - ':active': { - color: COLORS.NEUTRAL_DARK[800], - transform: 'scale(0.8)', - }, - - // When the buttons are inside a carousel - [`.${carouselContainer} &`]: { - position: 'absolute', - top: '64px', - }, - }, - ], +export const buttonWrapper = recipe({ + base: { + backgroundColor: 'transparent', + height: BUTTON_SIZE + 6, + width: BUTTON_SIZE + 6, + padding: 2, + position: 'absolute', + top: '64px', + }, variants: { - visible: { - true: { - opacity: 1, - pointerEvents: 'auto', - }, - false: { - opacity: 0, - pointerEvents: 'none', - }, - }, - direction: { right: { [`.${carouselContainer} &`]: { @@ -107,11 +78,20 @@ export const carouselButton = recipe({ }, }, }, + visible: { + true: { + opacity: 1, + pointerEvents: 'auto', + }, + false: { + opacity: 0, + pointerEvents: 'none', + }, + }, withAvatar: { false: {}, }, }, - compoundVariants: [ { variants: { @@ -179,6 +159,28 @@ export const carouselButton = recipe({ ], }); +export const carouselButton = recipe({ + base: [ + buttonStyles({ round: true }), + { + borderRadius: '50%', + color: COLORS.NEUTRAL_DARK[100], + border: `solid 1px ${COLORS.NEUTRAL_LIGHT[100]}`, + backgroundColor: COLORS.white, + boxShadow: '0px 3px 4px 0px rgba(0, 0, 0, 0.02), 0px 8px 42px -16px rgba(0, 0, 0, 0.06)', + transition: transition(['opacity', 'color', 'transform']), + ':hover': { + color: COLORS.NEUTRAL_DARK[600], + transform: 'scale(1.15)', + }, + ':active': { + color: COLORS.NEUTRAL_DARK[800], + transform: 'scale(0.8)', + }, + }, + ], +}); + export const rotate180 = style({ transform: 'rotate(180deg)', }); diff --git a/packages/chat/src/components/Carousel/index.tsx b/packages/chat/src/components/Carousel/index.tsx index e7ab7a6eb..45a33eb94 100644 --- a/packages/chat/src/components/Carousel/index.tsx +++ b/packages/chat/src/components/Carousel/index.tsx @@ -18,6 +18,7 @@ import { cardsContainer, cardsInnerContainer, carouselContainer, + firstCard, GUTTER_WIDTH, lastCardSpacer, } from './styles.css'; @@ -65,7 +66,7 @@ export const Carousel: React.FC = ({ cards, avatar, withImage, fe {avatar && } {cards.map((card, i) => (
=0.17.6 <0.24.0" eval: 0.1.8 @@ -7148,7 +7139,7 @@ __metadata: mlly: ^1.4.2 vite: ^5.0.11 vite-node: ^1.2.0 - checksum: 6f6b1eab9f67091c47c070cdf8128034458f7cc649a3188037b85f7cd466466405b91321e3d909b8a5b81452280bc885a4c08530ab8bad20d6c22b5e69ec4602 + checksum: 23196f388045c0cdaa35bf26cf484ca4423e336026770b743017056aed7704c74c2134b425571eee9c6859ed1a1553a435e4d0c502ff5a78f8dc2c02db00707a languageName: node linkType: hard @@ -7179,14 +7170,14 @@ __metadata: languageName: node linkType: hard -"@vanilla-extract/vite-plugin@npm:4.0.15": - version: 4.0.15 - resolution: "@vanilla-extract/vite-plugin@npm:4.0.15" +"@vanilla-extract/vite-plugin@npm:4.0.18": + version: 4.0.18 + resolution: "@vanilla-extract/vite-plugin@npm:4.0.18" dependencies: - "@vanilla-extract/integration": ^7.1.9 + "@vanilla-extract/integration": ^7.1.11 peerDependencies: vite: ^4.0.3 || ^5.0.0 - checksum: b99f1bb339ea5bdb12129f7689dba01506329bc9a3234d25db7da599e58b98a3380abb3cbcfa18a891630f275c5129209bc0dc655c24502303c9ed9e4a4efa99 + checksum: 99f816370e93153a77be9882206eda948626305bd7d18d7121f849024ab194266b7ae0823f2f2f69a7cfb76e027b21d0a6c99f02c56aa495b04993fd9aa9816d languageName: node linkType: hard @@ -7654,10 +7645,10 @@ __metadata: "@types/react-dom": 18.2.4 "@types/react-speech-recognition": ^3.9.5 "@types/react-syntax-highlighter": 15.5.13 - "@vanilla-extract/css": 1.15.5 + "@vanilla-extract/css": 1.16.1 "@vanilla-extract/dynamic": 2.1.2 "@vanilla-extract/recipes": 0.5.5 - "@vanilla-extract/vite-plugin": 4.0.15 + "@vanilla-extract/vite-plugin": 4.0.18 "@vitejs/plugin-react": 4.2.1 "@voiceflow/base-types": 2.113.1 "@voiceflow/dtos-interact": 1.10.0