Gilly/carousel adjusting/cor 0000 (#262)

voiceflow · Oct 30, 2024 · 4328978 · 4328978
1 parent ac3e92d
commit 4328978
Show file tree

Hide file tree

Showing 14 changed files with 72 additions and 50 deletions.
diff --git a/packages/chat/src/components/AgentMessage/AgentMessage.css.ts b/packages/chat/src/components/AgentMessage/AgentMessage.css.ts
@@ -16,6 +16,7 @@ export const messageContainer = style({
   lineHeight: '20px',
   borderRadius: '10px',
   width: 'fit-content',
+  whiteSpace: 'pre-wrap',
 });
 
 export const contentStyle = recipe({

diff --git a/packages/chat/src/components/Avatar/styles.css.ts b/packages/chat/src/components/Avatar/styles.css.ts
@@ -3,6 +3,8 @@ import { recipe } from '@vanilla-extract/recipes';
 import { COLORS } from '@/styles/colors';
 import { SIZES } from '@/styles/sizes';
 
+export const SMALL_AVATAR_SIZE = parseInt(SIZES.sm, 10);
+
 export const avatarStyles = recipe({
   base: {
     flexShrink: 0,
@@ -16,8 +18,8 @@ export const avatarStyles = recipe({
   variants: {
     size: {
       small: {
-        height: SIZES.sm,
-        width: SIZES.sm,
+        height: `${SMALL_AVATAR_SIZE}px`,
+        width: `${SMALL_AVATAR_SIZE}px`,
       },
 
       large: {

diff --git a/packages/chat/src/components/Card/styles.css.ts b/packages/chat/src/components/Card/styles.css.ts
@@ -44,10 +44,12 @@ export const cardTitle = style({
   fontSize: '14px',
   fontWeight: 600,
   color: COLORS.NEUTRAL_DARK[900],
+  whiteSpace: 'normal',
 });
 
 export const cardDescription = style({
   fontSize: '14px',
   fontWeight: 400,
   color: COLORS.NEUTRAL_DARK[400],
+  whiteSpace: 'normal',
 });
diff --git a/packages/chat/src/components/Carousel/carouselButtonStyles.css.ts b/packages/chat/src/components/Carousel/carouselButtonStyles.css.ts
@@ -4,6 +4,7 @@ import { COLORS } from '@/styles/colors';
 import { transition } from '@/styles/transitions';
 
 import { buttonStyles } from '../Button/styles.css';
+import { CARD_WIDTH } from '../Card/styles.css';
 import { BUTTON_SIZE, carouselContainer } from './styles.css';
 
 export const carouselButton = recipe({
@@ -54,7 +55,7 @@ export const carouselButton = recipe({
           transform: 'scale(0.8)',
         },
         [`.${carouselContainer} &`]: {
-          right: '23px',
+          left: `${CARD_WIDTH - BUTTON_SIZE / 2}px`,
         },
       },
       left: {
@@ -66,7 +67,7 @@ export const carouselButton = recipe({
           transform: 'rotate(180deg) scale(0.8)',
         },
         [`.${carouselContainer} &`]: {
-          left: '3px',
+          left: `-${BUTTON_SIZE / 2}px`,
         },
       },
     },

diff --git a/packages/chat/src/components/Carousel/constants.ts b/packages/chat/src/components/Carousel/constants.ts
diff --git a/packages/chat/src/components/Carousel/hooks.ts b/packages/chat/src/components/Carousel/hooks.ts
@@ -1,13 +1,9 @@
 import type { RefObject } from 'react';
 import { useEffect, useState } from 'react';
 
+import { CARD_WIDTH } from '../Card/styles.css';
 import type { CardProps } from '../Card/types';
-import {
-  CARD_WITH_GUTTER_WIDTH,
-  CAROUSEL_GUTTER_WIDTH,
-  NEXT_CONTROL_BOUNDARY,
-  PREVIOUS_CONTROL_BOUNDARY,
-} from './constants';
+import { GUTTER_WIDTH } from './styles.css';
 
 export const useScrollTo =
   <T extends HTMLElement>(ref: RefObject<T> | undefined, getNextIndex: (el: T) => number) =>
@@ -18,7 +14,7 @@ export const useScrollTo =
     const index = getNextIndex(el);
 
     el.scrollTo({
-      left: index && index * CARD_WITH_GUTTER_WIDTH,
+      left: index && index * (CARD_WIDTH + GUTTER_WIDTH),
       behavior: 'smooth',
     });
   };
@@ -38,13 +34,13 @@ export const useScrollObserver = (containerRef: RefObject<HTMLDivElement> | unde
     const containerEl = containerRef?.current;
     if (!containerEl || !hasMultipleCards) return undefined;
 
-    const trackWidth = CARD_WITH_GUTTER_WIDTH * cards.length - CAROUSEL_GUTTER_WIDTH;
+    const trackWidth = (CARD_WIDTH + GUTTER_WIDTH) * cards.length - GUTTER_WIDTH;
 
     const handleScroll = (): void => {
       const { scrollLeft } = containerEl;
 
-      setShowPreviousButton(scrollLeft >= PREVIOUS_CONTROL_BOUNDARY);
-      setShowNextButton(scrollLeft <= trackWidth - NEXT_CONTROL_BOUNDARY);
+      setShowPreviousButton(scrollLeft >= CARD_WIDTH);
+      setShowNextButton(scrollLeft <= trackWidth - (CARD_WIDTH + GUTTER_WIDTH));
     };
 
     containerEl.addEventListener('scroll', handleScroll);

diff --git a/packages/chat/src/components/Carousel/index.tsx b/packages/chat/src/components/Carousel/index.tsx
@@ -4,11 +4,20 @@ import { useRef } from 'react';
 import { ClassName } from '@/constants';
 
 import { Card } from '../Card';
+import { CARD_WIDTH } from '../Card/styles.css';
 import type { CardProps } from '../Card/types';
 import { CarouselButton } from './CarouselButton';
-import { CARD_WITH_GUTTER_WIDTH } from './constants';
 import { useScrollObserver, useScrollTo } from './hooks';
-import { cardsContainer, cardsInnerContainer, cardStyle, carouselContainer, lastCardSpacer } from './styles.css';
+import {
+  cardsContainer,
+  cardsInnerContainer,
+  cardStyle,
+  carouselContainer,
+  GUTTER_WIDTH,
+  lastCardSpacer,
+} from './styles.css';
+
+const CARD_WITH_GUTTER = CARD_WIDTH + GUTTER_WIDTH;
 
 export interface CarouselProps {
   /**
@@ -26,11 +35,8 @@ export const Carousel: React.FC<CarouselProps> = ({ cards }) => {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const { showPreviousButton, showNextButton } = useScrollObserver(scrollContainerRef, cards);
 
-  const scrollToPrevious = useScrollTo(
-    scrollContainerRef,
-    (el) => Math.ceil(el.scrollLeft / CARD_WITH_GUTTER_WIDTH) - 1
-  );
-  const scrollToNext = useScrollTo(scrollContainerRef, (el) => Math.floor(el.scrollLeft / CARD_WITH_GUTTER_WIDTH) + 1);
+  const scrollToPrevious = useScrollTo(scrollContainerRef, (el) => Math.ceil(el.scrollLeft / CARD_WITH_GUTTER) - 1);
+  const scrollToNext = useScrollTo(scrollContainerRef, (el) => Math.floor(el.scrollLeft / CARD_WITH_GUTTER) + 1);
 
   return (
     <div className={clsx(ClassName.CAROUSEL, carouselContainer)}>

diff --git a/packages/chat/src/components/Carousel/styles.css.ts b/packages/chat/src/components/Carousel/styles.css.ts
@@ -1,34 +1,51 @@
 import { style } from '@vanilla-extract/css';
 
+import { CHAT_WIDTH } from '@/views/ChatWidget/styles.css';
+
+import { SMALL_AVATAR_SIZE } from '../Avatar/styles.css';
+import { CARD_WIDTH } from '../Card/styles.css';
+import { DIALOG_PADDING } from '../NewChat/NewChat.css';
+import { MESSAGE_PADDING } from '../SystemResponse/styles.css';
+
 export const BUTTON_SIZE = 42;
+export const GUTTER_WIDTH = 10;
+
+/**
+ * The white space between the carousel and the edge of the Chat widget.
+ */
+const LEFT_SPACE = DIALOG_PADDING + SMALL_AVATAR_SIZE + MESSAGE_PADDING;
 
 export const cardsContainer = style({
   position: 'relative',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
+  marginLeft: `-${LEFT_SPACE}px`,
+  paddingLeft: `${LEFT_SPACE}px`,
+  marginRight: `-${DIALOG_PADDING}px`,
+  paddingRight: `${DIALOG_PADDING}px`,
 });
 
 export const cardsInnerContainer = style({
   display: 'flex',
   alignItems: 'start',
+  gap: `${GUTTER_WIDTH}px`,
 });
 
-export const cardStyle = style({
-  margin: '0 5px',
-});
+export const cardStyle = style({});
 
 export const carouselContainer = style({
   position: 'relative',
   width: '100%',
-  overflow: 'hidden',
   display: 'flex',
-  margin: '0 -20px',
-  paddingLeft: '20px',
+  marginBottom: 4,
 });
 
+const MESSAGE_WIDTH = CHAT_WIDTH - DIALOG_PADDING - SMALL_AVATAR_SIZE - MESSAGE_PADDING;
+const CAROUSEL_SPACER = MESSAGE_WIDTH - CARD_WIDTH;
+
 export const lastCardSpacer = style({
   display: 'inline-flex',
   height: 1,
-  width: BUTTON_SIZE,
+  width: CAROUSEL_SPACER,
   minWidth: BUTTON_SIZE,
 });
diff --git a/packages/chat/src/components/NewChat/NewChat.css.ts b/packages/chat/src/components/NewChat/NewChat.css.ts
@@ -2,6 +2,8 @@ import { globalStyle, style } from '@vanilla-extract/css';
 
 import { COLORS } from '@/styles/colors';
 
+export const DIALOG_PADDING = 20;
+
 export const chatContainer = style({
   height: '700px',
   display: 'flex',
@@ -21,8 +23,8 @@ globalStyle(`${chatContainer} *`, {
 
 export const dialogContainer = style({
   position: 'relative',
-  padding: '0 20px 20px 20px',
-  marginBottom: '-20px',
+  padding: `0 ${DIALOG_PADDING}px ${DIALOG_PADDING}px ${DIALOG_PADDING}px`,
+  marginBottom: `-${DIALOG_PADDING}px`,
   overflow: 'hidden',
   scrollbarWidth: 'none',
   flexGrow: 1,

diff --git a/packages/chat/src/components/SendButton/index.tsx b/packages/chat/src/components/SendButton/index.tsx
@@ -14,8 +14,8 @@ interface SendButtonProps extends ComponentPropsWithRef<'button'> {
 
 export const SendButton: React.FC<SendButtonProps> = forwardRef<HTMLButtonElement, SendButtonProps>(
   ({ disabled, testID, ...props }, ref) => (
-    <Button ref={ref} className={sendButtonStyle({ disabled: !!disabled })} data-testid={testID} {...props}>
-      <SendIcon className={clsx(ClassName.BUTTON, sendIconStyle({ disabled: !!disabled }))} />
+    <Button ref={ref} className={sendButtonStyle({ disabled })} data-testid={testID} {...props}>
+      <SendIcon className={clsx(ClassName.BUTTON, sendIconStyle({ disabled }))} />
     </Button>
   )
 );
diff --git a/packages/chat/src/components/SendButton/styles.css.ts b/packages/chat/src/components/SendButton/styles.css.ts
@@ -24,6 +24,7 @@ export const sendButtonStyle = recipe({
         backgroundColor: COLORS.NEUTRAL_LIGHT[50],
         ':hover': {
           cursor: 'not-allowed',
+          backgroundColor: COLORS.NEUTRAL_LIGHT[50],
         },
       },
       false: {

diff --git a/packages/chat/src/components/SystemResponse/state/end.tsx b/packages/chat/src/components/SystemResponse/state/end.tsx
@@ -1,14 +1,13 @@
-import { /* useContext, */ useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 
-// import { RuntimeStateAPIContext } from '@/contexts';
-// import { SessionStatus } from '@/types';
+import { RuntimeStateAPIContext } from '@/contexts';
+import { SessionStatus } from '@/types';
 
 const EndState: React.FC = () => {
-  // const runtime = useContext(RuntimeStateAPIContext);
+  const runtime = useContext(RuntimeStateAPIContext);
 
   useEffect(() => {
-    // TODO: uncomment this
-    // runtime.setStatus(SessionStatus.ENDED);
+    runtime.setStatus(SessionStatus.ENDED);
   }, []);
 
   return null;

diff --git a/packages/chat/src/components/SystemResponse/styles.css.ts b/packages/chat/src/components/SystemResponse/styles.css.ts
@@ -1,6 +1,10 @@
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
+import { SMALL_AVATAR_SIZE } from '../Avatar/styles.css';
+
+export const MESSAGE_PADDING = 12;
+
 export const hide = style({
   visibility: 'hidden',
 });
@@ -24,7 +28,8 @@ export const responseAvatar = style({
 });
 
 export const messageContainer = style({
-  marginLeft: 12,
+  width: `calc(100% - ${MESSAGE_PADDING + SMALL_AVATAR_SIZE}px)`,
+  marginLeft: MESSAGE_PADDING,
 });
 
 export const actionsContainer = style({

diff --git a/packages/chat/src/views/ChatWidget/styles.css.ts b/packages/chat/src/views/ChatWidget/styles.css.ts
@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
-const CHAT_WIDTH = 380;
+export const CHAT_WIDTH = 380;
 const MAX_CHAT_HEIGHT = 800;
 
 export const LAUNCHER_MARGIN = 16;
@@ -33,9 +33,6 @@ export const widgetContainer = recipe({
 
 export const chatContainer = style({
   width: CHAT_WIDTH,
-  overflow: 'hidden',
-  borderRadius: '$2',
-  boxShadow: '0 2px 48px rgba(19,33,68,0.16), 0 0 0 1px $shadow4',
   maxHeight: MAX_CHAT_HEIGHT,
 
   selectors: {