@envive-ai/react-toolkit-v3 0.3.5

package/src/components/ChatHeader/__tests__/ChatHeader.test.tsx

@@ -0,0 +1,487 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Theme } from '../../../../tokens/theme/theme';
+import { ChatHeader } from '../ChatHeader';
+import { ChatHeaderOptions, ChatHeaderVariant, HandleState } from '../types';
+
+const LOGO_LIGHT = 'https://cdn.spiffy.ai/other/assets/envive-ai/Envive_Logo_Lt.svg';
+const LOGO_DARK = 'https://cdn.spiffy.ai/other/assets/envive-ai/Envive_Logo_DK.svg';
+
+describe('ChatHeader', () => {
+  const defaultProps = {
+    theme: Theme.GLOBAL_CUSTOM,
+    variant: ChatHeaderVariant.LIGHT,
+    selectedOption: ChatHeaderOptions.ASSISTANT,
+    onClose: vi.fn(),
+    onToggle: vi.fn(),
+  };
+
+  beforeAll(() => {
+    document.documentElement.style.setProperty('--envive-global-custom-theme', Theme.STANDARD);
+  });
+
+  describe('Basic rendering', () => {
+    it('should render ChatHeader with minimal required props', () => {
+      render(<ChatHeader {...defaultProps} />);
+
+      // Main content should be rendered by default
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should render with default theme and variant', () => {
+      render(<ChatHeader {...defaultProps} />);
+
+      const closeButton = screen.getByRole('button');
+      expect(closeButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Conditional rendering', () => {
+    it('should render handle when showHandle is true', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          showHandle
+          handleState={HandleState.OPEN}
+        />,
+      );
+
+      // Handle should be rendered (check for container with handle classes)
+      const container = screen.getByRole('button').closest('div')?.parentElement;
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should not render handle when showHandle is false', () => {
+      const { container } = render(
+        <ChatHeader
+          {...defaultProps}
+          showHandle={false}
+        />,
+      );
+
+      // Handle should not be rendered
+      const handleBars = container.querySelectorAll('[class*="w-[22px]"]');
+      expect(handleBars.length).toBe(0);
+    });
+
+    it('should render logo when showLogo is true', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          showLogo
+          logoLight={LOGO_LIGHT}
+          logoDark={LOGO_DARK}
+        />,
+      );
+
+      const logo = screen.getByAltText('logo');
+      expect(logo).toBeInTheDocument();
+    });
+
+    it('should not render logo when showLogo is false', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          showLogo={false}
+        />,
+      );
+
+      const logo = screen.queryByAltText('logo');
+      expect(logo).not.toBeInTheDocument();
+    });
+
+    it('should render toggle when showCXToggle is true', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          showCXToggle
+          leftToggleLabel="Assistant"
+          rightToggleLabel="Support"
+        />,
+      );
+
+      expect(screen.getByText('Assistant')).toBeInTheDocument();
+      expect(screen.getByText('Support')).toBeInTheDocument();
+    });
+
+    it('should not render toggle when showCXToggle is false', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          showCXToggle={false}
+        />,
+      );
+
+      expect(screen.queryByText('Shop with AI')).not.toBeInTheDocument();
+      expect(screen.queryByText('Live support')).not.toBeInTheDocument();
+    });
+
+    it('should render main content when showMainContent is true', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          showMainContent
+        />,
+      );
+
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should not render main content when showMainContent is false', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          showMainContent={false}
+        />,
+      );
+
+      // Close button should not be rendered
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('should render only handle when showMainContent is false and showHandle is true', () => {
+      const { container } = render(
+        <ChatHeader
+          {...defaultProps}
+          showMainContent={false}
+          showHandle
+          handleState={HandleState.OPEN}
+        />,
+      );
+
+      // Close button should not be rendered
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+      // Handle should still be rendered
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('Theme and variant', () => {
+    it('should render with STANDARD theme', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          theme={Theme.STANDARD}
+        />,
+      );
+
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should render with MODERN theme', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          theme={Theme.MODERN}
+        />,
+      );
+
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should render with MINIMAL theme', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          theme={Theme.MINIMAL}
+        />,
+      );
+
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should render with LIGHT variant', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          variant={ChatHeaderVariant.LIGHT}
+        />,
+      );
+
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should render with DARK variant', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          variant={ChatHeaderVariant.DARK}
+        />,
+      );
+
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+  });
+
+  describe('Logo selection', () => {
+    it('should use logoDark when variant is LIGHT', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          showLogo
+          variant={ChatHeaderVariant.LIGHT}
+          logoLight={LOGO_LIGHT}
+          logoDark={LOGO_DARK}
+        />,
+      );
+
+      const logo = screen.getByAltText('logo');
+      expect(logo).toHaveAttribute('src', LOGO_DARK);
+    });
+
+    it('should use logoLight when variant is DARK', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          showLogo
+          variant={ChatHeaderVariant.DARK}
+          logoLight={LOGO_LIGHT}
+          logoDark={LOGO_DARK}
+        />,
+      );
+
+      const logo = screen.getByAltText('logo');
+      expect(logo).toHaveAttribute('src', LOGO_LIGHT);
+    });
+  });
+
+  describe('Toggle functionality', () => {
+    it('should call onToggle when toggle item is clicked', () => {
+      const onToggle = vi.fn();
+
+      render(
+        <ChatHeader
+          {...defaultProps}
+          onToggle={onToggle}
+          showCXToggle
+          selectedOption={ChatHeaderOptions.ASSISTANT}
+          leftToggleLabel="Assistant"
+          rightToggleLabel="Support"
+        />,
+      );
+
+      const supportToggle = screen.getByText('Support');
+      fireEvent.click(supportToggle);
+
+      expect(onToggle).toHaveBeenCalledWith(ChatHeaderOptions.LIVE_SUPPORT);
+    });
+
+    it('should call onToggle with ASSISTANT when left toggle is clicked', () => {
+      const onToggle = vi.fn();
+
+      render(
+        <ChatHeader
+          {...defaultProps}
+          onToggle={onToggle}
+          showCXToggle
+          selectedOption={ChatHeaderOptions.LIVE_SUPPORT}
+          leftToggleLabel="Assistant"
+          rightToggleLabel="Support"
+        />,
+      );
+
+      const assistantToggle = screen.getByText('Assistant');
+      fireEvent.click(assistantToggle);
+
+      expect(onToggle).toHaveBeenCalledWith(ChatHeaderOptions.ASSISTANT);
+    });
+
+    it('should use default toggle labels when not provided', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          showCXToggle
+        />,
+      );
+
+      expect(screen.getByText('Shop with AI')).toBeInTheDocument();
+      expect(screen.getByText('Live support')).toBeInTheDocument();
+    });
+
+    it('should use custom toggle labels when provided', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          showCXToggle
+          leftToggleLabel="Custom Left"
+          rightToggleLabel="Custom Right"
+        />,
+      );
+
+      expect(screen.getByText('Custom Left')).toBeInTheDocument();
+      expect(screen.getByText('Custom Right')).toBeInTheDocument();
+    });
+
+    it('should render logo in toggle when logoInToggle is true', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          theme={Theme.MODERN}
+          showCXToggle
+          logoInToggle
+          logoLight={LOGO_LIGHT}
+          logoDark={LOGO_DARK}
+        />,
+      );
+
+      const logos = screen.getAllByAltText('logo');
+      expect(logos.length).toBeGreaterThan(0);
+    });
+
+    it('should not render logo in toggle when logoInToggle is false', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          showCXToggle
+          logoInToggle={false}
+          logoLight={LOGO_LIGHT}
+          logoDark={LOGO_DARK}
+        />,
+      );
+
+      // Only the main logo should be present if showLogo is true, but we're not showing it
+      const logos = screen.queryAllByAltText('logo');
+      expect(logos.length).toBe(0);
+    });
+  });
+
+  describe('Close button functionality', () => {
+    it('should call onClose when close button is clicked', () => {
+      const onClose = vi.fn();
+
+      render(
+        <ChatHeader
+          {...defaultProps}
+          onClose={onClose}
+        />,
+      );
+
+      const closeButton = screen.getByRole('button');
+      fireEvent.click(closeButton);
+
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('should render close button with correct icon based on theme', () => {
+      const { container } = render(
+        <ChatHeader
+          {...defaultProps}
+          theme={Theme.STANDARD}
+        />,
+      );
+
+      const closeButton = screen.getByRole('button');
+      expect(closeButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Handle state', () => {
+    it('should render handle with OPEN state', () => {
+      const { container } = render(
+        <ChatHeader
+          {...defaultProps}
+          showHandle
+          handleState={HandleState.OPEN}
+        />,
+      );
+
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should render handle with CLOSED state', () => {
+      const { container } = render(
+        <ChatHeader
+          {...defaultProps}
+          showHandle
+          handleState={HandleState.CLOSED}
+        />,
+      );
+
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('Selected option', () => {
+    it('should render with ASSISTANT as selected option', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          showCXToggle
+          selectedOption={ChatHeaderOptions.ASSISTANT}
+        />,
+      );
+
+      expect(screen.getByText('Shop with AI')).toBeInTheDocument();
+    });
+
+    it('should render with LIVE_SUPPORT as selected option', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          showCXToggle
+          selectedOption={ChatHeaderOptions.LIVE_SUPPORT}
+        />,
+      );
+
+      expect(screen.getByText('Live support')).toBeInTheDocument();
+    });
+  });
+
+  describe('Combined scenarios', () => {
+    it('should render full ChatHeader with all features enabled', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          theme={Theme.STANDARD}
+          variant={ChatHeaderVariant.LIGHT}
+          showHandle
+          handleState={HandleState.OPEN}
+          showLogo
+          logoLight={LOGO_LIGHT}
+          logoDark={LOGO_DARK}
+          showCXToggle
+          selectedOption={ChatHeaderOptions.ASSISTANT}
+          leftToggleLabel="Assistant"
+          rightToggleLabel="Support"
+        />,
+      );
+
+      expect(screen.getAllByRole('button').length).toBe(3);
+      expect(screen.getByAltText('logo')).toBeInTheDocument();
+      expect(screen.getByText('Assistant')).toBeInTheDocument();
+      expect(screen.getByText('Support')).toBeInTheDocument();
+    });
+
+    it('should render minimal ChatHeader with only close button', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          showHandle={false}
+          showLogo={false}
+          showCXToggle={false}
+        />,
+      );
+
+      expect(screen.getByRole('button')).toBeInTheDocument();
+      expect(screen.queryByAltText('logo')).not.toBeInTheDocument();
+      expect(screen.queryByText('Shop with AI')).not.toBeInTheDocument();
+    });
+
+    it('should not render ChatHeader logo when centralizeCXToggle is false', () => {
+      render(
+        <ChatHeader
+          {...defaultProps}
+          showHandle={false}
+          showLogo
+          centralizeCXToggle={false}
+          showCXToggle={false}
+        />,
+      );
+
+      expect(screen.getByRole('button')).toBeInTheDocument();
+      expect(screen.queryByAltText('logo')).not.toBeInTheDocument();
+      expect(screen.queryByText('Shop with AI')).not.toBeInTheDocument();
+    });
+  });
+});

package/src/components/ChatHeader/components/CloseButton.tsx

@@ -0,0 +1,32 @@
+import IconCloseRounded from '@envive-ai/react-icons/IconCloseRounded';
+import IconCloseSharp from '@envive-ai/react-icons/IconCloseSharp';
+import IconCloseTransparent from '@envive-ai/react-icons/IconCloseTransparent';
+import { resolveTheme } from '../../utils/resolveTheme';
+import { Theme } from '../../../../tokens/theme/theme';
+import { useGetCloseButtonProperties } from '../hooks/useGetCloseButtonProperties';
+import { ChatHeaderVariant, CloseButtonProps } from '../types';
+
+const Icons = {
+  [Theme.STANDARD]: IconCloseTransparent,
+  [Theme.MODERN]: IconCloseRounded,
+  [Theme.MINIMAL]: IconCloseSharp,
+};
+
+export const CloseButton = ({
+  theme = Theme.GLOBAL_CUSTOM,
+  variant = ChatHeaderVariant.LIGHT,
+  onClose,
+}: CloseButtonProps) => {
+  const finalTheme = resolveTheme(theme);
+  const { closeButtonClasses, iconClasses } = useGetCloseButtonProperties(finalTheme, variant);
+  const Icon = Icons[theme];
+  return (
+    <button
+      type="button"
+      className={closeButtonClasses}
+      onClick={onClose}
+    >
+      <Icon className={iconClasses} />
+    </button>
+  );
+};

package/src/components/ChatHeader/components/Handle.tsx

@@ -0,0 +1,16 @@
+import { Container } from '../../Container';
+import { Stack } from '../../Stack';
+import { useGetHandleProperties } from '../hooks/useGetHandleProperties';
+import { HandleProps } from '../types';
+
+export const Handle = ({ theme, variant, state }: HandleProps) => {
+  const { containerClasses, leftBar, rightBar } = useGetHandleProperties(theme, variant, state);
+  return (
+    <Container className={containerClasses}>
+      <Stack direction="row">
+        <div className={leftBar} />
+        <div className={rightBar} />
+      </Stack>
+    </Container>
+  );
+};

package/src/components/ChatHeader/components/Layout.tsx

@@ -0,0 +1,21 @@
+import { Container } from '../../Container';
+import { useGetLayoutProperties } from '../hooks/useGetLayoutProperties';
+import { LayoutProps } from '../types';
+
+export const Layout = ({
+  children,
+  variant,
+  theme,
+  headerBgColor,
+}: LayoutProps): React.ReactNode => {
+  const { containerClasses } = useGetLayoutProperties(variant, theme, headerBgColor);
+
+  return (
+    <Container
+      className={containerClasses}
+      fluid
+    >
+      {children}
+    </Container>
+  );
+};

package/src/components/ChatHeader/components/Logo.tsx

@@ -0,0 +1,18 @@
+import { Container } from '../../Container';
+import { useGetLogoProperties } from '../hooks/useGetLogoProperties';
+import { LogoProps } from '../types';
+
+export const Logo = ({ logo }: LogoProps) => {
+  const { logoContainerClasses, logoClasses } = useGetLogoProperties();
+  return (
+    <Container className={logoContainerClasses}>
+      {logo && (
+        <img
+          alt="logo"
+          src={logo}
+          className={logoClasses}
+        />
+      )}
+    </Container>
+  );
+};

package/src/components/ChatHeader/components/Toggle.tsx

@@ -0,0 +1,51 @@
+import { Container } from '../../Container';
+import { Stack } from '../../Stack';
+import { resolveTheme } from '../../utils/resolveTheme';
+import { Theme } from '../../../../tokens/theme/theme';
+import { useGetToggleProperties } from '../hooks/useGetToggleProperties';
+import { ChatHeaderOptions, ToggleProps } from '../types';
+import { ToggleItem } from './ToggleItem';
+
+export const Toggle = ({
+  theme = Theme.GLOBAL_CUSTOM,
+  variant,
+  logoInToggle,
+  logoLight,
+  logoDark,
+  selectedOption,
+  leftToggleLabel = 'Shop with AI',
+  rightToggleLabel = 'Live support',
+  onToggle,
+}: ToggleProps) => {
+  const finalTheme = resolveTheme(theme);
+  const { containerClasses, stackClasses } = useGetToggleProperties(finalTheme, variant);
+
+  return (
+    <Container className={containerClasses}>
+      <Stack
+        direction="row"
+        className={stackClasses}
+      >
+        <ToggleItem
+          theme={finalTheme}
+          variant={variant}
+          logoInToggle={logoInToggle}
+          logoLight={logoLight}
+          logoDark={logoDark}
+          text={leftToggleLabel}
+          value={ChatHeaderOptions.ASSISTANT}
+          selected={selectedOption}
+          onSelect={onToggle}
+        />
+        <ToggleItem
+          theme={finalTheme}
+          variant={variant}
+          text={rightToggleLabel}
+          value={ChatHeaderOptions.LIVE_SUPPORT}
+          selected={selectedOption}
+          onSelect={onToggle}
+        />
+      </Stack>
+    </Container>
+  );
+};

package/src/components/ChatHeader/components/ToggleItem.tsx

@@ -0,0 +1,51 @@
+import { Stack } from '../../Stack';
+import { Typography } from '../../Typography';
+import { useGetToggleOptionProperties } from '../hooks/useGetToggleOptionProperties';
+import { useToggleLogoSelector } from '../hooks/useToggleLogoSelector';
+import { ToggleOptionProps } from '../types';
+
+export const ToggleItem = ({
+  text,
+  logoInToggle,
+  logoLight,
+  logoDark,
+  selected,
+  value,
+  theme,
+  variant,
+  onSelect,
+}: ToggleOptionProps) => {
+  const selectedOption = selected === value;
+  const logo = useToggleLogoSelector(selectedOption, logoLight, logoDark, theme, variant);
+  const { itemContainerClasses, textClasses, textVariant, logoClasses } =
+    useGetToggleOptionProperties(selectedOption, theme, variant);
+
+  return (
+    <button
+      type="button"
+      className={itemContainerClasses}
+      onClick={() => onSelect(value)}
+    >
+      <Stack
+        direction="row"
+        align="center"
+        gap={1}
+      >
+        {logoInToggle && logo && (
+          <img
+            alt="logo"
+            src={logo}
+            className={logoClasses}
+          />
+        )}
+        <Typography
+          className={textClasses}
+          variant={textVariant}
+          noWrap
+        >
+          {text}
+        </Typography>
+      </Stack>
+    </button>
+  );
+};

package/src/components/ChatHeader/components/index.ts

@@ -0,0 +1,15 @@
+import { CloseButton } from './CloseButton';
+import { Handle } from './Handle';
+import { Layout } from './Layout';
+import { Logo } from './Logo';
+import { Toggle } from './Toggle';
+import { ToggleItem } from './ToggleItem';
+
+export const ChatHeaderComponents = {
+  Handle,
+  Layout,
+  Logo,
+  CloseButton,
+  Toggle,
+  ToggleItem,
+};