@envive-ai/react-toolkit-v3 0.3.5

package/src/components/Message/components/LoadingSkeleton.tsx

@@ -0,0 +1,19 @@
+import { Stack } from '../../Stack';
+
+/**
+ * This component displays two gray rounded rectangles as placeholders while content is loading.
+ */
+
+export const LoadingSkeleton = (): React.ReactNode => {
+  return (
+    <Stack
+      direction="column"
+      gap={2}
+    >
+      {/* First rectangle - longer */}
+      <div className="envive-tw-h-4 envive-tw-w-full envive-tw-animate-pulse envive-tw-rounded-global-custom envive-tw-bg-gray-200" />
+      {/* Second rectangle - shorter */}
+      <div className="envive-tw-h-4 envive-tw-w-2/3 envive-tw-animate-pulse envive-tw-rounded-global-custom envive-tw-bg-gray-200" />
+    </Stack>
+  );
+};

package/src/components/Message/components/SparkleIcon.tsx

@@ -0,0 +1,23 @@
+import { Stack } from '../../Stack';
+import { useLatencyAnimation } from '../hooks/useLatencyAnimation';
+
+type LatencyAnimationProps = {
+  isLoading: boolean;
+};
+
+/**
+ * This component displays a horizontal row of sparkle icons in a cyclic sequence.
+ */
+export const SparkleIcon = ({ isLoading }: LatencyAnimationProps): React.ReactNode => {
+  const { IconComponent } = useLatencyAnimation(isLoading);
+
+  return (
+    <Stack
+      direction="row"
+      gap="2"
+      align="center"
+    >
+      <IconComponent style={{ color: 'var(--envive-colors-accent-primary)' }} />
+    </Stack>
+  );
+};

package/src/components/Message/components/UserContent.tsx

@@ -0,0 +1,19 @@
+import { Typography, TypographyColor, TypographyVariant } from '../../Typography';
+
+type UserContentProps = {
+  content: string;
+};
+
+/**
+ * Component that renders the message as a dark pill button for the user.
+ */
+export const UserContent = ({ content }: UserContentProps): React.ReactNode => {
+  return (
+    <Typography
+      variant={TypographyVariant.B3_RG}
+      color={TypographyColor.TEXT_LIGHT}
+    >
+      {content}
+    </Typography>
+  );
+};

package/src/components/Message/components/index.ts

@@ -0,0 +1,17 @@
+import { Layout } from './Layout';
+import { AgentHeader } from './AgentHeader';
+import { AgentContent } from './AgentContent';
+import { UserContent } from './UserContent';
+import { LinkButton } from './LinkButton';
+import { SparkleIcon } from './SparkleIcon';
+import { LoadingSkeleton } from './LoadingSkeleton';
+
+export const MessageComponents = {
+  Layout,
+  AgentHeader,
+  AgentContent,
+  UserContent,
+  LinkButton,
+  SparkleIcon,
+  LoadingSkeleton,
+};

package/src/components/Message/hooks/useGetLinkButtonIconProperties.ts

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+
+/**
+ * Hook that returns CSS classes for the LinkButton icon container element.
+ */
+export const useGetLinkButtonIconProperties = () => {
+  const iconContainerClasses = useMemo(() => {
+    const layoutClasses =
+      'envive-tw-inline-flex envive-tw-h-4 envive-tw-w-4 envive-tw-items-center envive-tw-justify-center envive-tw-align-middle';
+
+    const visualClasses = 'envive-tw-rounded-sm envive-tw-bg-background-secondary';
+
+    const interactiveClasses =
+      'envive-tw-transition-colors envive-tw-duration-200 group-hover:envive-tw-bg-[color-mix(in_srgb,var(--envive-colors-background-secondary)_90%,#000000_10%)]';
+
+    return `${layoutClasses} ${visualClasses} ${interactiveClasses}`;
+  }, []);
+
+  return { iconContainerClasses };
+};

package/src/components/Message/hooks/useGetLinkButtonProperties.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+
+/**
+ * Hook that returns CSS classes for the LinkButton container element.
+ */
+export const useGetLinkButtonProperties = () => {
+  const containerClasses = useMemo(() => {
+    const layoutClasses = 'envive-tw-inline envive-tw-align-middle';
+
+    const interactiveClasses = 'envive-tw-cursor-pointer hover:envive-tw-underline envive-tw-group';
+
+    const transitionClasses = 'envive-tw-transition-all envive-tw-duration-200';
+
+    return `${layoutClasses} ${interactiveClasses} ${transitionClasses}`;
+  }, []);
+
+  return { containerClasses };
+};

package/src/components/Message/hooks/useLatencyAnimation.ts

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import type { ReactNode } from 'react';
+import LatencyIconStep1 from '@envive-ai/react-icons/LatencyIconStep1';
+import LatencyIconStep2 from '@envive-ai/react-icons/LatencyIconStep2';
+import LatencyIconStep3 from '@envive-ai/react-icons/LatencyIconStep3';
+import LatencyIconStep4 from '@envive-ai/react-icons/LatencyIconStep4';
+import LatencyIconStep5 from '@envive-ai/react-icons/LatencyIconStep5';
+import LatencyIconEmptyStep from '@envive-ai/react-icons/LatencyIconEmptyStep';
+import type { LatencyIconProps } from '../types';
+
+const STEP_DURATION_MS = 200;
+
+const STEP_ICONS = [
+  LatencyIconEmptyStep,
+  LatencyIconStep4,
+  LatencyIconStep5,
+  LatencyIconStep1,
+  LatencyIconStep2,
+  LatencyIconStep3,
+] as const;
+
+/**
+ * Hook that manages the latency animation sequence with sparkle icons.
+ * @returns Current step number and the React component for the current step's icon
+ */
+
+export const useLatencyAnimation = (
+  isLoading: boolean,
+): { currentStep: number; IconComponent: (props: LatencyIconProps) => ReactNode } => {
+  const [currentStep, setCurrentStep] = useState<number>(0);
+
+  useEffect(() => {
+    if (!isLoading) {
+      setCurrentStep(0);
+      return undefined;
+    }
+
+    const interval = setInterval(() => {
+      setCurrentStep(prevStep => {
+        const nextStep = prevStep >= STEP_ICONS.length - 1 ? 0 : prevStep + 1;
+        return nextStep;
+      });
+    }, STEP_DURATION_MS);
+
+    // Cleanup interval when component unmounts or isLoading changes
+    return () => {
+      clearInterval(interval);
+    };
+  }, [isLoading]);
+
+  const IconComponent = STEP_ICONS[currentStep] || LatencyIconStep1;
+
+  return {
+    currentStep,
+    IconComponent,
+  };
+};

package/src/components/Message/hooks/useVariantStyleProperties.ts

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+import { MessageVariant } from '../types';
+
+type VariantStylesProperties = {
+  containerLayoutClasses: string;
+  containerBackgroundClasses: string;
+  containerBorderClasses: string;
+  containerRadiusClasses: string;
+  contentClasses: string;
+  userContentClasses: string;
+};
+
+/**
+ * Hook that returns CSS classes and style properties for the specified message variant.
+ */
+export const useVariantStyleProperties = (
+  variant: MessageVariant = MessageVariant.AGENT,
+): VariantStylesProperties => {
+  return useMemo(() => {
+    const variantStylesMap: Record<MessageVariant, VariantStylesProperties> = {
+      [MessageVariant.AGENT]: {
+        containerLayoutClasses: 'envive-tw-flex envive-tw-flex-col envive-tw-gap-2',
+        containerBackgroundClasses: 'envive-tw-bg-background-light',
+        containerBorderClasses: '',
+        containerRadiusClasses: 'envive-tw-rounded-md',
+        contentClasses: '',
+        userContentClasses: '',
+      },
+      [MessageVariant.USER]: {
+        containerLayoutClasses:
+          'envive-tw-inline-flex envive-tw-flex-row envive-tw-justify-center envive-tw-items-center envive-tw-content-center envive-tw-gap-[10px] envive-tw-flex-wrap envive-tw-px-4 envive-tw-py-2',
+        containerBackgroundClasses: 'envive-tw-bg-background-dark',
+        containerBorderClasses: '',
+        containerRadiusClasses: 'envive-tw-rounded-[16px_16px_0_16px]',
+        contentClasses: '',
+        userContentClasses: '',
+      },
+    };
+
+    return variantStylesMap[variant];
+  }, [variant]);
+};

package/src/components/Message/index.ts

@@ -0,0 +1,4 @@
+export { Message } from './Message';
+export type { MessageProps } from './types';
+export { MessageVariant } from './types';
+export { LinkButton } from './components/LinkButton';

package/src/components/Message/types/index.ts

@@ -0,0 +1,87 @@
+/**
+ * Visual variant of the message component.
+ */
+export enum MessageVariant {
+  AGENT = 'agent',
+  USER = 'user',
+}
+
+/**
+ * Type of the message content.
+ */
+export enum MessageContentType {
+  TEXT = 'text',
+  LINK = 'link',
+}
+
+/**
+ * Parsed content item from the message content.
+ */
+export type ParsedContentItem =
+  | { type: MessageContentType.TEXT; content: string }
+  | { type: MessageContentType.LINK; url: string; text: string };
+
+/**
+ * Props for latency animation icons.
+ */
+export interface LatencyIconProps {
+  /**
+   * Color of the icon. Defaults to #1F5F51 (dark teal).
+   */
+  color?: string;
+  /**
+   * Additional CSS class names.
+   */
+  className?: string;
+  /**
+   * Inline styles forwarded to the SVG element.
+   */
+  style?: React.CSSProperties;
+}
+
+/**
+ * Props accepted by the `Message` component.
+ */
+export interface MessageProps {
+  /**
+   * Visual variant of the message (agent or user).
+   * Defaults to 'agent'.
+   */
+  variant?: MessageVariant;
+  /**
+   * Name of the agent. Required when variant is 'agent'.
+   */
+  agentName?: string;
+  /**
+   * Content of the message. Can contain text and URLs.
+   */
+  content?: string;
+  /**
+   * When true, shows loading skeleton instead of content.
+   */
+  isLoading?: boolean;
+  /**
+   * When true, shows sparkle animation.
+   */
+  showSparkle?: boolean;
+  /**
+   * Accessible label for the message container, used by screen readers.
+   */
+  ariaLabel?: string;
+  /**
+   * Unique `id` attribute attached to the rendered element.
+   */
+  id?: string;
+  /**
+   * Adds a `data-testid` attribute for testing utilities.
+   */
+  testId?: string;
+  /**
+   * Additional class names appended to the computed message classes.
+   */
+  className?: string;
+  /**
+   * Inline styles forwarded to the rendered element.
+   */
+  style?: React.CSSProperties;
+}

package/src/components/Message/utils/openUrlInNewTab.ts

@@ -0,0 +1,14 @@
+/**
+ * Opens a URL in a new browser tab/window.
+ * If the URL is invalid or empty, the function does nothing.
+ * Explicitly removes the opener reference to prevent security vulnerabilities (noopener behavior).
+ */
+export const openUrlInNewTab = (url: string): void => {
+  if (url && url.trim() !== '') {
+    const newWindow = window.open(url, '_blank');
+    // Explicitly remove opener reference for security (noopener behavior)
+    if (newWindow) {
+      newWindow.opener = null;
+    }
+  }
+};

package/src/components/Message/utils/validateMessageProps.ts

@@ -0,0 +1,29 @@
+import { MessageVariant } from '../types';
+
+type ValidationProps = {
+  variant?: MessageVariant;
+  agentName?: string;
+  content: string;
+  isLoading?: boolean;
+};
+
+type ValidationResult = { isValid: boolean; error: string };
+
+/**
+ * Validates the props for the Message component.
+ * Returns validation result without throwing errors.
+ */
+export const validateMessageProps = (props: ValidationProps): ValidationResult => {
+  const { content, isLoading = false } = props;
+
+  if (!isLoading) {
+    if (!content || typeof content !== 'string' || content.trim() === '') {
+      return {
+        isValid: false,
+        error: 'content must be a non-empty string',
+      };
+    }
+  }
+
+  return { isValid: true, error: '' };
+};

package/src/components/OrderLookupCard/OrderLookupCard.tsx

@@ -0,0 +1,104 @@
+import classNames from 'classnames';
+import { Theme } from 'tokens/theme/theme';
+import { Stack } from '../Stack';
+import { OrderLookupCardComponents } from './components';
+import type { OrderLookupCardProps } from './types';
+import { useGetContainerProperties } from './hooks/useGetContainerProperties';
+import { getProductImagesToDisplay } from './utils/getProductImagesToDisplay';
+import { calculateMoreProductsCount } from './utils/calculateMoreProductsCount';
+import { formatOrderNumber } from './utils/formatOrderNumber';
+import { formatOrderDate } from './utils/formatOrderDate';
+import { useGetImageBorderRadiusProperties } from './hooks/useGetImageBorderRadiusProperties';
+import { resolveTheme } from '../utils/resolveTheme';
+
+/**
+ * Renders a card with product images, order status, order number, date, and track order button.
+ * Supports four visual themes: Standard, Modern, Minimal, and GLOBAL_CUSTOM.
+ * GLOBAL_CUSTOM (default) uses CSS variable --envive-global-custom-theme.
+ */
+export const OrderLookupCard = ({
+  theme = Theme.GLOBAL_CUSTOM,
+  productImages,
+  orderStatus,
+  orderNumber,
+  orderDate,
+  locale = typeof navigator !== 'undefined' ? navigator.language : 'en-US',
+  placedLabel,
+  orderLabel,
+  trackOrderUrl,
+  onTrackOrderClick,
+  ariaLabel,
+  productImagesAriaLabel,
+  statusLabelAriaLabel,
+  moreProductsOverlayAriaLabel,
+  moreProductsLabel,
+  trackOrderAriaLabel,
+  trackOrderLabel,
+  id,
+  testId,
+  className,
+  style,
+}: OrderLookupCardProps): JSX.Element => {
+  const currentTheme = resolveTheme(theme);
+  const containerProperties = useGetContainerProperties(currentTheme);
+  const imagesToDisplay = getProductImagesToDisplay(productImages);
+  const moreProductsCount = calculateMoreProductsCount(productImages);
+  const formattedOrderNumber = formatOrderNumber(orderNumber, orderLabel);
+  const formattedDateOnly = formatOrderDate(orderDate, locale);
+  const formattedDate = `${placedLabel} ${formattedDateOnly}`;
+  const imageBorderRadiusClass = useGetImageBorderRadiusProperties(currentTheme);
+
+  return (
+    <div
+      className={classNames(
+        containerProperties.layoutClasses,
+        containerProperties.defaultClasses,
+        containerProperties.hoverClasses,
+        className,
+      )}
+      style={style}
+      id={id}
+      data-testid={testId}
+      role={ariaLabel ? 'region' : undefined}
+      aria-label={ariaLabel}
+    >
+      <OrderLookupCardComponents.Layout
+        productImagesGrid={
+          <OrderLookupCardComponents.ProductImagesGrid
+            images={imagesToDisplay}
+            moreProductsCount={moreProductsCount}
+            theme={currentTheme}
+            imageBorderRadiusClass={imageBorderRadiusClass}
+            ariaLabel={productImagesAriaLabel}
+            moreProductsOverlayAriaLabel={moreProductsOverlayAriaLabel}
+            moreProductsLabel={moreProductsLabel}
+          />
+        }
+        content={
+          <Stack
+            direction="column"
+            gap={2}
+            justify="between"
+            className="envive-tw-flex-1 envive-tw-pt-2"
+          >
+            <OrderLookupCardComponents.StatusLabel
+              text={orderStatus}
+              theme={currentTheme}
+              ariaLabel={statusLabelAriaLabel}
+            />
+            <OrderLookupCardComponents.OrderNumber text={formattedOrderNumber} />
+            <OrderLookupCardComponents.OrderDate text={formattedDate} />
+            <OrderLookupCardComponents.TrackOrderLink
+              orderNumber={orderNumber}
+              trackOrderLabel={trackOrderLabel}
+              theme={currentTheme}
+              trackOrderUrl={trackOrderUrl}
+              onTrackOrderClick={onTrackOrderClick}
+              ariaLabel={trackOrderAriaLabel}
+            />
+          </Stack>
+        }
+      />
+    </div>
+  );
+};