@envive-ai/react-toolkit-v3 0.3.5

package/src/components/FloatingButton/hooks/useGetContainerProperties.ts

@@ -0,0 +1,71 @@
+import { FloatingButtonLocation, FloatingButtonShow, FloatingButtonVariant } from '../types/types';
+
+/**
+ * Hook to get container properties for positioning and visibility.
+ */
+export const useGetContainerProperties = (
+  location: FloatingButtonLocation = FloatingButtonLocation.BOTTOM_RIGHT,
+  show: FloatingButtonShow = FloatingButtonShow.ALWAYS,
+  variant: FloatingButtonVariant = FloatingButtonVariant.ATTACHED,
+  hasInteractionHappened: boolean = false,
+) => {
+  const positionClasses = 'envive-tw-fixed';
+
+  let locationClasses = '';
+
+  if (variant === FloatingButtonVariant.ATTACHED) {
+    // Attached: button is at the edge (0px)
+    switch (location) {
+      case FloatingButtonLocation.MIDDLE_RIGHT:
+        locationClasses = 'envive-tw-top-1/2 envive-tw-right-[0px] envive-tw--translate-y-1/2';
+        break;
+      case FloatingButtonLocation.MIDDLE_LEFT:
+        locationClasses = 'envive-tw-top-1/2 envive-tw-left-[0px] envive-tw--translate-y-1/2';
+        break;
+      case FloatingButtonLocation.BOTTOM_RIGHT:
+        locationClasses = 'envive-tw-bottom-[10%] envive-tw-right-[0px]';
+        break;
+      case FloatingButtonLocation.BOTTOM_LEFT:
+        locationClasses = 'envive-tw-bottom-[10%] envive-tw-left-[0px]';
+        break;
+      default:
+        locationClasses = 'envive-tw-bottom-[10%] envive-tw-right-[0px]';
+        break;
+    }
+  } else {
+    // Detached: button is 8px from the edge
+    switch (location) {
+      case FloatingButtonLocation.MIDDLE_RIGHT:
+        locationClasses = 'envive-tw-top-1/2 envive-tw-right-2 envive-tw--translate-y-1/2';
+        break;
+      case FloatingButtonLocation.MIDDLE_LEFT:
+        locationClasses = 'envive-tw-top-1/2 envive-tw-left-2 envive-tw--translate-y-1/2';
+        break;
+      case FloatingButtonLocation.BOTTOM_RIGHT:
+        locationClasses = 'envive-tw-bottom-[10%] envive-tw-right-2';
+        break;
+      case FloatingButtonLocation.BOTTOM_LEFT:
+        locationClasses = 'envive-tw-bottom-[10%] envive-tw-left-2';
+        break;
+      default:
+        locationClasses = 'envive-tw-bottom-[10%] envive-tw-right-2';
+        break;
+    }
+  }
+
+  const zIndexClass = 'envive-tw-z-[1000000]';
+
+  let shouldRender = true;
+  if (show === FloatingButtonShow.NONE) {
+    shouldRender = false;
+  } else if (show === FloatingButtonShow.POST_INTERACTION) {
+    shouldRender = hasInteractionHappened;
+  }
+
+  return {
+    positionClasses,
+    locationClasses,
+    zIndexClass,
+    shouldRender,
+  };
+};

package/src/components/FloatingButton/hooks/useGetFloatingButtonStyles.ts

@@ -0,0 +1,41 @@
+import {
+  FloatingButtonLocation,
+  FloatingButtonMode,
+  FloatingButtonShow,
+  FloatingButtonVariant,
+} from '../types/types';
+import { useGetButtonProperties } from './useGetButtonProperties';
+import { useGetButtonHoverProperties } from './useGetButtonHoverProperties';
+import { useGetIconProperties } from './useGetIconProperties';
+import { useGetWrapperProperties } from './useGetWrapperProperties';
+import { useGetContainerProperties } from './useGetContainerProperties';
+
+/**
+ * Main hook that combines all style hooks for the FloatingButton component.
+ */
+export const useGetFloatingButtonProperties = (
+  variant: FloatingButtonVariant = FloatingButtonVariant.ATTACHED,
+  mode: FloatingButtonMode = FloatingButtonMode.LIGHT,
+  location: FloatingButtonLocation = FloatingButtonLocation.BOTTOM_RIGHT,
+  show: FloatingButtonShow = FloatingButtonShow.ALWAYS,
+  hasInteractionHappened: boolean = false,
+) => {
+  const buttonProperties = useGetButtonProperties(variant, mode);
+  const buttonHoverProperties = useGetButtonHoverProperties(variant);
+  const iconProperties = useGetIconProperties(variant, mode);
+  const wrapperProperties = useGetWrapperProperties(location);
+  const containerProperties = useGetContainerProperties(
+    location,
+    show,
+    variant,
+    hasInteractionHappened,
+  );
+
+  return {
+    buttonProperties,
+    buttonHoverProperties,
+    iconProperties,
+    wrapperProperties,
+    containerProperties,
+  };
+};

package/src/components/FloatingButton/hooks/useGetIconProperties.ts

@@ -0,0 +1,30 @@
+import { FloatingButtonMode, FloatingButtonVariant } from '../types/types';
+
+/**
+ * Hook to get icon properties based on variant and mode.
+ */
+export const useGetIconProperties = (
+  variant: FloatingButtonVariant = FloatingButtonVariant.ATTACHED,
+  mode: FloatingButtonMode = FloatingButtonMode.LIGHT,
+) => {
+  let iconSizeClasses = '';
+
+  if (variant === FloatingButtonVariant.DETACHED) {
+    iconSizeClasses =
+      'envive-tw-w-[32px] envive-tw-h-[32px] group-hover/floatingbutton:envive-tw-w-[38px] group-hover/floatingbutton:envive-tw-h-[38px]';
+  } else {
+    iconSizeClasses =
+      'envive-tw-w-[24px] envive-tw-h-[24px] group-hover/floatingbutton:envive-tw-w-[30px] group-hover/floatingbutton:envive-tw-h-[30px]';
+  }
+
+  const iconColorClass =
+    mode === FloatingButtonMode.LIGHT
+      ? 'envive-tw-text-background-dark'
+      : 'envive-tw-text-background-light';
+
+  const iconClasses = `${iconColorClass} ${iconSizeClasses} envive-tw-transition-all envive-tw-duration-300 envive-tw-ease-in-out`;
+
+  return {
+    iconClasses,
+  };
+};

package/src/components/FloatingButton/hooks/useGetWrapperProperties.ts

@@ -0,0 +1,37 @@
+import { FloatingButtonLocation } from '../types/types';
+
+/**
+ * Hook to get wrapper properties for Attached variant.
+ */
+export const useGetWrapperProperties = (
+  location: FloatingButtonLocation = FloatingButtonLocation.MIDDLE_RIGHT,
+) => {
+  const sizeClasses = 'envive-tw-w-[54px] envive-tw-h-[50px]';
+  const hoverSizeClasses =
+    'group-hover/floatingbutton:envive-tw-w-[62px] group-hover/floatingbutton:envive-tw-h-[57px]';
+
+  const backgroundColorClass = 'envive-tw-bg-background-light';
+
+  // RIGHT locations: left side rounded, right side straight
+  // LEFT locations: right side rounded, left side straight
+  const borderRadiusClass =
+    location === FloatingButtonLocation.MIDDLE_RIGHT ||
+    location === FloatingButtonLocation.BOTTOM_RIGHT
+      ? 'envive-tw-rounded-[50px_0_0_50px]'
+      : 'envive-tw-rounded-[0_50px_50px_0]';
+
+  const justifyContentClass = 'envive-tw-justify-center';
+  const alignItemsClass = 'envive-tw-items-center';
+
+  const boxShadowClass = 'envive-tw-shadow-[2px_2px_8px_0_rgba(0,0,0,0.25)]';
+
+  return {
+    sizeClasses,
+    hoverSizeClasses,
+    backgroundColorClass,
+    borderRadiusClass,
+    justifyContentClass,
+    alignItemsClass,
+    boxShadowClass,
+  };
+};

package/src/components/FloatingButton/index.ts

@@ -0,0 +1,8 @@
+export { FloatingButton } from './FloatingButton';
+export type { FloatingButtonProps, FloatingButtonBackgroundColor } from './types/types';
+export {
+  FloatingButtonLocation,
+  FloatingButtonMode,
+  FloatingButtonShow,
+  FloatingButtonVariant,
+} from './types/types';

package/src/components/FloatingButton/types/types.ts

@@ -0,0 +1,117 @@
+import { ColorNames } from '../../../models/colorsConfig';
+
+/**
+ * Variant options for the FloatingButton component.
+ */
+export enum FloatingButtonVariant {
+  ATTACHED = 'attached',
+  DETACHED = 'detached',
+}
+
+/**
+ * Mode (light or dark) for the FloatingButton component.
+ */
+export enum FloatingButtonMode {
+  LIGHT = 'light',
+  DARK = 'dark',
+}
+
+/**
+ * Show options for the FloatingButton component.
+ * Determines when the button should be displayed.
+ */
+export enum FloatingButtonShow {
+  ALWAYS = 'always',
+  POST_INTERACTION = 'postInteraction',
+  NONE = 'none',
+}
+
+/**
+ * Location options for the FloatingButton component.
+ * Determines the position of the button on the screen.
+ */
+export enum FloatingButtonLocation {
+  MIDDLE_RIGHT = 'middleRight',
+  BOTTOM_RIGHT = 'bottomRight',
+  MIDDLE_LEFT = 'middleLeft',
+  BOTTOM_LEFT = 'bottomLeft',
+}
+
+export type FloatingButtonBackgroundColor = Extract<
+  ColorNames,
+  | 'background-primary'
+  | 'background-secondary'
+  | 'background-tertiary'
+  | 'background-dark'
+  | 'background-light'
+>;
+
+/**
+ * Props for the FloatingButton component.
+ */
+export type FloatingButtonProps = {
+  /**
+   * Unique identifier for the floating button element.
+   */
+  id?: string;
+
+  /**
+   * Test identifier for automated testing purposes.
+   */
+  testId?: string;
+
+  /**
+   * Additional CSS classes to apply to the container.
+   */
+  className?: string;
+
+  /**
+   * Inline styles to apply to the container.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * String SVG of the custom icon (optional, defaults to Sparkles icon).
+   */
+  customIcon?: string;
+
+  /**
+   * Variant of the button (default: ATTACHED).
+   */
+  variant?: FloatingButtonVariant;
+
+  /**
+   * Color mode (default: LIGHT).
+   */
+  mode?: FloatingButtonMode;
+
+  /**
+   * When to show the button (default: ALWAYS).
+   */
+  show?: FloatingButtonShow;
+
+  /**
+   * Position of the button (default: BOTTOM_RIGHT).
+   */
+  location?: FloatingButtonLocation;
+
+  /**
+   * Background color of the button (default: BackgroundPrimary).
+   */
+  backgroundColor?: FloatingButtonBackgroundColor;
+
+  /**
+   * Indicates if an interaction has happened (required when show is POST_INTERACTION).
+   */
+  hasInteractionHappened?: boolean;
+
+  /**
+   * Callback function invoked when the button is clicked.
+   */
+  onClick?: () => void;
+
+  /**
+   * Accessible label for the button, used by screen readers.
+   */
+  ariaLabel: string;
+};

package/src/components/FloatingChat/FloatingChat.tsx

@@ -0,0 +1,218 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { ColorNames } from '../../models/colorsConfig';
+import { Theme } from '../../../tokens/theme/theme';
+
+import { FloatingChatComponents } from './components';
+import { useScrollToBottom } from './hooks/useScrollToBottom';
+import { ChatHeader } from '../ChatHeader';
+import { ChatHeaderOptions, ChatHeaderVariant } from '../ChatHeader/types';
+import { WelcomeMessage } from '../WelcomeMessage/WelcomeMessage';
+import { SparkleIconColor } from '../WelcomeMessage/types/types';
+import { Stack } from '../Stack';
+import { ChatFooter } from '../ChatFooter';
+import { PromptCarousel, PromptCarouselRows } from '../PromptCarousel';
+import { PromptButtonVariant } from '../PromptButton';
+
+import { resolveTheme } from '../utils/resolveTheme';
+import { FloatingChatProps } from './types/types';
+
+export const FloatingChat = ({
+  id,
+  className,
+  style,
+  testId,
+  theme = Theme.GLOBAL_CUSTOM,
+  salesAgentData,
+  floatingChatConfig,
+  lookAndFeelConfig,
+  isCXButtonSwitchEnabled,
+  onClose,
+  onToggleCXButton,
+}: FloatingChatProps) => {
+  const finalTheme = resolveTheme(theme);
+
+  const [query, setQuery] = useState('');
+
+  const chatMessagesRef = useRef<HTMLDivElement>(null);
+
+  const {
+    headerBackgroundColor,
+    headerMode,
+    welcomeMessageIconColor,
+    showVerifiedBuyer,
+    userQueryInputEnabled,
+    showEnviveLogo,
+    ignoreFirstModelResponse,
+    neverShowSingleProductCards,
+    welcomeMessageTitle,
+    welcomeMessageText,
+    chatFooterTextFieldPlaceholderText,
+  } = floatingChatConfig;
+
+  const { agentName, chatHeaderLogoDarkSrc, chatHeaderLogoLightSrc } = lookAndFeelConfig;
+
+  const {
+    messages,
+    isResponseStreaming,
+    isPendingResponse,
+    suggestions,
+    onSuggestionClicked,
+    onTypedMessageSubmitted,
+  } = salesAgentData;
+
+  const [answerSuggestions, setAnswerSuggestions] = useState<string[]>([]);
+  const [generalSuggestions, setGeneralSuggestions] = useState<string[]>([]);
+
+  const showAnswerSuggestions =
+    answerSuggestions.length > 0 && !isPendingResponse && !isResponseStreaming;
+
+  useEffect(() => {
+    if (suggestions.length > 0) {
+      setAnswerSuggestions(
+        suggestions.filter(suggestion => suggestion.isAnswer).map(suggestion => suggestion.content),
+      );
+      setGeneralSuggestions(
+        suggestions
+          .filter(suggestion => !suggestion.isAnswer)
+          .map(suggestion => suggestion.content),
+      );
+    }
+  }, [suggestions]);
+
+  const handleToggleCXButton = (item: ChatHeaderOptions) => {
+    if (item === ChatHeaderOptions.LIVE_SUPPORT) {
+      onToggleCXButton?.();
+      onClose();
+    }
+  };
+
+  const { showScrollButton, scrollToBottom } = useScrollToBottom({
+    messagesRef: chatMessagesRef,
+    autoScrollDependencies: [
+      messages,
+      isPendingResponse,
+      suggestions,
+      answerSuggestions,
+      generalSuggestions,
+    ],
+    scrollThreshold: 30,
+  });
+
+  const header = (
+    <ChatHeader
+      logoDark={chatHeaderLogoDarkSrc}
+      logoLight={chatHeaderLogoLightSrc}
+      selectedOption={ChatHeaderOptions.ASSISTANT}
+      onToggle={handleToggleCXButton}
+      onClose={onClose}
+      showLogo
+      showCXToggle={isCXButtonSwitchEnabled}
+      centralizeCXToggle
+      showHandle={false}
+      theme={finalTheme}
+      variant={headerMode as ChatHeaderVariant}
+      headerBgColor={headerBackgroundColor as ColorNames}
+    />
+  );
+
+  const footer = (
+    <Stack
+      direction="column"
+      gap={4}
+    >
+      <ChatFooter
+        theme={finalTheme}
+        isScrolled={false}
+        onChange={setQuery}
+        onSubmit={() => {
+          onTypedMessageSubmitted({ query });
+          setAnswerSuggestions([]);
+          setGeneralSuggestions([]);
+        }}
+        textFieldPlaceholderText={chatFooterTextFieldPlaceholderText}
+        promptSuggestions={
+          isPendingResponse || isResponseStreaming || generalSuggestions.length === 0
+            ? ['Loading suggestions 1...', 'Loading suggestions 2...'] // This is strings will not be shown to the user
+            : generalSuggestions
+        }
+        handleButtonClick={buttonText => {
+          const suggestion = suggestions.find(s => s.content === buttonText && !s.isAnswer);
+          if (suggestion) {
+            onSuggestionClicked(suggestion);
+          }
+
+          setAnswerSuggestions([]);
+          setGeneralSuggestions([]);
+        }}
+        disabled={isPendingResponse || isResponseStreaming}
+        disabledInput={!userQueryInputEnabled}
+        isLoadingPromptSuggestions={
+          isPendingResponse || isResponseStreaming || generalSuggestions.length === 0
+        }
+        hideEnviveWatermark={!showEnviveLogo}
+      />
+    </Stack>
+  );
+
+  const welcomeMessage = (
+    <WelcomeMessage
+      sparkleIconColor={welcomeMessageIconColor as SparkleIconColor}
+      title={welcomeMessageTitle}
+      text={welcomeMessageText}
+      theme={finalTheme}
+    />
+  );
+
+  const chatMessages = (
+    <FloatingChatComponents.ChatMessages
+      theme={finalTheme}
+      ref={chatMessagesRef}
+      isLoading={isPendingResponse && !isResponseStreaming}
+      agentName={agentName}
+      messages={messages}
+      isResponseStreaming={isResponseStreaming}
+      ignoreFirstModelResponse={ignoreFirstModelResponse}
+      neverShowSingleProductCards={neverShowSingleProductCards}
+      showVerifiedBuyer={showVerifiedBuyer}
+    />
+  );
+
+  const answerSuggestionsComponent = (
+    <PromptCarousel
+      className="envive-tw-flex envive-tw-justify-end envive-tw-p-4 [&>div>div]:envive-tw-items-end"
+      theme={finalTheme}
+      promptButtonType={PromptButtonVariant.SUGGESTED_RESPONSE}
+      promptCarouselRows={PromptCarouselRows.ALWAYS_TWO}
+      promptButtonTexts={answerSuggestions}
+      handleButtonClick={buttonText => {
+        const suggestion = suggestions.find(s => s.content === buttonText && s.isAnswer);
+        if (suggestion) {
+          onSuggestionClicked(suggestion);
+        }
+        setAnswerSuggestions([]);
+        setGeneralSuggestions([]);
+      }}
+    />
+  );
+
+  return (
+    <FloatingChatComponents.Layout
+      id={id}
+      className={className}
+      style={style}
+      testId={testId}
+      theme={finalTheme}
+      header={header}
+      footer={footer}
+      welcomeMessage={welcomeMessage}
+      chatMessages={chatMessages}
+      answerSuggestions={showAnswerSuggestions ? answerSuggestionsComponent : undefined}
+      scrollToBottomButton={
+        showScrollButton ? (
+          <FloatingChatComponents.ScrollToBottomButton onClick={scrollToBottom} />
+        ) : undefined
+      }
+    />
+  );
+};

package/src/components/FloatingChat/components/AgentMessage.tsx

@@ -0,0 +1,138 @@
+import { Form } from 'src/components/Form';
+import { Message, MessageType } from '@envive-ai/react-hooks/application/models';
+import { Message as MessageComponent, MessageVariant } from '../../Message';
+import { Theme } from '../../../../tokens/theme/theme';
+import { ReviewCardsCarousel } from './ReviewCardsCarousel';
+import { SalesAgentProductCardsCarousel } from './SalesAgentProductCardsCarousel';
+import { DocumentRetrievalCardsCarousel } from './DocumentRetrievalCardsCarousel';
+import { OrderLookupCardCarousel } from './OrderLookupCardCarousel';
+import {
+  getCleanDocuments,
+  getCleanOrders,
+  getCleanProducts,
+  getCleanReviews,
+} from '../utils/functions';
+import { resolveTheme } from '../../utils/resolveTheme';
+
+export interface AgentMessageProps {
+  theme: Theme;
+  agentName: string;
+  type: MessageType;
+  messages: Message[];
+  hideAgentName?: boolean;
+  isResponseStreaming?: boolean;
+  neverShowSingleProductCards?: boolean;
+  showVerifiedBuyer?: boolean;
+}
+
+export const AgentMessage = ({
+  theme = Theme.GLOBAL_CUSTOM,
+  agentName,
+  type,
+  messages,
+  hideAgentName = false,
+  isResponseStreaming = false,
+  neverShowSingleProductCards = false,
+  showVerifiedBuyer = false,
+}: AgentMessageProps) => {
+  const finalTheme = resolveTheme(theme);
+
+  const textContentMessageTypes = new Set([
+    MessageType.Text,
+    MessageType.QueryTyped,
+    MessageType.SuggestionClicked,
+  ]);
+
+  if (textContentMessageTypes.has(type)) {
+    return messages.map(msg => {
+      if (msg.type === MessageType.Text && msg.metadata.content) {
+        return (
+          <MessageComponent
+            variant={MessageVariant.AGENT}
+            agentName={hideAgentName ? undefined : agentName}
+            showSparkle={isResponseStreaming}
+            content={msg.metadata.content}
+            key={msg.id}
+          />
+        );
+      }
+
+      return null;
+    });
+  }
+
+  if (type === MessageType.Review) {
+    const reviews = getCleanReviews(messages);
+
+    return (
+      <ReviewCardsCarousel
+        reviews={reviews}
+        theme={finalTheme}
+        showVerifiedBuyer={showVerifiedBuyer}
+      />
+    );
+  }
+
+  if (type === MessageType.Product) {
+    const products = getCleanProducts(messages);
+
+    if (products.length === 1 && neverShowSingleProductCards) {
+      return null;
+    }
+
+    return (
+      <SalesAgentProductCardsCarousel
+        hideNavigation={products.length === 1}
+        products={products}
+        numberOfProducts={products.length}
+        theme={finalTheme}
+      />
+    );
+  }
+
+  if (type === MessageType.Page) {
+    const documents = getCleanDocuments(messages);
+
+    return (
+      <DocumentRetrievalCardsCarousel
+        documents={documents}
+        theme={finalTheme}
+      />
+    );
+  }
+
+  // TODO: Need to test this with a real message.
+  if (type === MessageType.Form) {
+    return messages
+      .filter(msg => msg.type === MessageType.Form)
+      .map(msg => (
+        <Form
+          key={msg.id}
+          textFields={msg.metadata.fields.map(field => ({
+            label: field.title,
+            isRequired: field.required,
+            type: field.format === 'email' ? 'email' : 'text',
+          }))}
+          submitButton={{ label: 'Submit', ariaLabel: 'Submit', isDisabled: false }}
+          onSubmit={values => {
+            console.log('submitted', values);
+            // TODO: Add API call to submit the form.
+          }}
+        />
+      ));
+  }
+
+  // TODO: Need to test this with a real message.
+  if (type === MessageType.Order) {
+    const orders = getCleanOrders(messages);
+
+    return (
+      <OrderLookupCardCarousel
+        orders={orders}
+        theme={finalTheme}
+      />
+    );
+  }
+
+  return null;
+};