@envive-ai/react-toolkit-v3 0.3.10 → 0.3.11

package/src/components/FloatingChat/components/SalesAgentProductCardsCarousel.tsx

@@ -1,11 +1,11 @@
+import { Theme } from '../../../../tokens/theme/theme';
+import { Carousel } from '../../Carousel/Carousel';
+import { SalesAgentProductCard } from '../../SalesAgentProductCard/SalesAgentProductCard';
 import {
   SalesAgentProductCardProps,
   SalesAgentProductCardVariant,
 } from '../../SalesAgentProductCard/types/types';
 import { resolveTheme } from '../../utils/resolveTheme';
-import { Carousel } from '../../Carousel/Carousel';
-import { SalesAgentProductCard } from '../../SalesAgentProductCard/SalesAgentProductCard';
-import { Theme } from '../../../../tokens/theme/theme';
 
 export interface SalesAgentProductCardsCarouselProps {
   theme: Theme;
@@ -52,6 +52,7 @@ export const SalesAgentProductCardsCarousel = ({
           numberOfReviews={product.numberOfReviews}
           image={product.image}
           url={product.url}
+          target="_blank"
           theme={finalTheme}
         />
       ))}

package/src/components/FloatingChat/types/types.ts

@@ -61,4 +61,8 @@ export interface FloatingChatProps {
    * Hardcopy content to display in the chat.
    */
   hardcopyContent: HardcopyResponse;
+  /**
+   * Debug bar to display in the chat.
+   */
+  debugBar?: React.ReactNode;
 }

package/src/components/FullPageSalesAgent/FullPageSalesAgent.tsx

@@ -0,0 +1,199 @@
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { HardcopyResponse } from '@envive-ai/react-hooks/contexts/hardcopyContext';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { FloatingChatConfig, LookAndFeelConfig } from '@envive-ai/react-hooks/contexts/typesV3';
+import { useRef, useState } from 'react';
+import { ChatFooter } from '../ChatFooter';
+import { Disclaimer } from '../Disclaimer';
+import { FloatingChatComponents } from '../FloatingChat/components';
+import { useChatSuggestions } from '../FloatingChat/hooks/useChatSuggestions';
+import { useScrollToBottom } from '../FloatingChat/hooks/useScrollToBottom';
+import { PromptButtonVariant } from '../PromptButton';
+import { PromptCarousel, PromptCarouselRows } from '../PromptCarousel';
+import { Theme } from '../Tokens';
+import { resolveTheme } from '../utils/resolveTheme';
+import { SparkleIconColor, WelcomeMessage } from '../WelcomeMessage';
+import { FullPageSAComponents } from './components';
+import { useGetFooterStyles } from './hooks/useGetFooterStyles';
+import { useIsMobile } from './hooks/useIsMobile';
+
+interface FullPageSalesAgentProps {
+  theme?: Theme;
+  floatingChatConfig: FloatingChatConfig;
+  lookAndFeelConfig: LookAndFeelConfig;
+  hardcopyContent: HardcopyResponse;
+  headerContainer?: string;
+  autoHeight?: boolean;
+}
+
+export const FullPageSalesAgent = ({
+  theme = Theme.GLOBAL_CUSTOM,
+  floatingChatConfig,
+  lookAndFeelConfig,
+  hardcopyContent,
+  headerContainer,
+  autoHeight,
+}: FullPageSalesAgentProps) => {
+  const resolvedTheme = resolveTheme(theme);
+  const salesAgentData = useSalesAgent();
+  const [query, setQuery] = useState('');
+  const chatMessagesRef = useRef<HTMLDivElement>(null);
+  const { footerStyles } = useGetFooterStyles();
+  const { isMobile } = useIsMobile();
+
+  const {
+    welcomeMessageIconColor,
+    ignoreFirstModelResponse,
+    neverShowSingleProductCards,
+    showVerifiedBuyer,
+    showEnviveLogo,
+    userQueryInputEnabled = true,
+  } = floatingChatConfig;
+
+  const { agentName } = lookAndFeelConfig;
+
+  const {
+    welcomeMessageTitle,
+    welcomeMessageText,
+    chatFooterTextFieldPlaceholderText,
+    disclaimerText,
+  } = hardcopyContent?.values ?? {};
+
+  const {
+    messages,
+    isResponseStreaming,
+    isPendingResponse,
+    suggestions,
+    onSuggestionClicked,
+    onTypedMessageSubmitted,
+    onFormResponseSubmitted,
+  } = salesAgentData;
+
+  const {
+    answerSuggestions,
+    generalSuggestions,
+    showAnswerSuggestions,
+    setAnswerSuggestions,
+    setGeneralSuggestions,
+  } = useChatSuggestions({
+    suggestions,
+    isPendingResponse,
+    isResponseStreaming,
+  });
+
+  const { showScrollButton, scrollToBottom, isFloatingLayout } = useScrollToBottom({
+    messagesRef: chatMessagesRef,
+    scrollThreshold: 100,
+    footerHeight: 160,
+    autoScrollDependencies: [
+      messages,
+      isPendingResponse,
+      suggestions,
+      answerSuggestions,
+      generalSuggestions,
+    ],
+  });
+
+  const welcomeMessage = (
+    <WelcomeMessage
+      sparkleIconColor={welcomeMessageIconColor as SparkleIconColor}
+      title={welcomeMessageTitle as string}
+      text={welcomeMessageText as string}
+      theme={resolvedTheme}
+    />
+  );
+
+  const footer = (
+    <ChatFooter
+      className="envive-tw-bg-background-light"
+      style={footerStyles}
+      theme={resolvedTheme}
+      isScrolled={isMobile ? isFloatingLayout : false}
+      disabled={isPendingResponse || isResponseStreaming}
+      disabledInput={!userQueryInputEnabled}
+      isLoadingPromptSuggestions={
+        isPendingResponse || isResponseStreaming || generalSuggestions.length === 0
+      }
+      hideEnviveWatermark={!showEnviveLogo}
+      textFieldPlaceholderText={chatFooterTextFieldPlaceholderText as string}
+      promptSuggestions={
+        isPendingResponse || isResponseStreaming || generalSuggestions.length === 0
+          ? ['Loading suggestions 1...', 'Loading suggestions 2...']
+          : generalSuggestions
+      }
+      handleButtonClick={buttonText => {
+        const suggestion = suggestions.find(s => s.content === buttonText && !s.isAnswer);
+        if (suggestion) {
+          onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
+        }
+
+        setAnswerSuggestions([]);
+        setGeneralSuggestions([]);
+      }}
+      onChange={setQuery}
+      onSubmit={() => {
+        onTypedMessageSubmitted({ query, userTyped: true });
+        setAnswerSuggestions([]);
+        setGeneralSuggestions([]);
+      }}
+    />
+  );
+
+  const chatMessages = (
+    <FloatingChatComponents.ChatMessages
+      theme={resolvedTheme}
+      ref={chatMessagesRef}
+      isLoading={isPendingResponse && !isResponseStreaming}
+      agentName={agentName}
+      messages={messages}
+      hasFilteredMessages={false}
+      handlePreviousDiscussions={() => {}}
+      isResponseStreaming={isResponseStreaming}
+      ignoreFirstModelResponse={ignoreFirstModelResponse}
+      neverShowSingleProductCards={neverShowSingleProductCards}
+      showVerifiedBuyer={showVerifiedBuyer}
+      onFormResponseSubmitted={onFormResponseSubmitted}
+    />
+  );
+
+  const answerSuggestionsComponent = (
+    <PromptCarousel
+      className="envive-tw-flex envive-tw-justify-end envive-tw-p-4 [&>div>div]:envive-tw-items-end"
+      theme={resolvedTheme}
+      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, ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
+        }
+        setAnswerSuggestions([]);
+        setGeneralSuggestions([]);
+      }}
+    />
+  );
+
+  const disclaimer =
+    disclaimerText && typeof disclaimerText === 'string' ? (
+      <Disclaimer disclaimerMarkdown={disclaimerText} />
+    ) : undefined;
+
+  return (
+    <FullPageSAComponents.Layout
+      theme={resolvedTheme}
+      welcomeMessage={welcomeMessage}
+      footer={footer}
+      chatMessages={chatMessages}
+      answerSuggestions={showAnswerSuggestions ? answerSuggestionsComponent : undefined}
+      scrollToBottomButton={
+        showScrollButton ? (
+          <FloatingChatComponents.ScrollToBottomButton onClick={scrollToBottom} />
+        ) : undefined
+      }
+      disclaimer={disclaimer}
+      headerContainer={headerContainer}
+      autoHeight={autoHeight}
+    />
+  );
+};

package/src/components/FullPageSalesAgent/components/Layout.tsx

@@ -0,0 +1,81 @@
+import classNames from 'classnames';
+import { isValidElement } from 'react';
+import { Stack } from 'src/components/Stack';
+import { Theme } from 'tokens/theme/theme';
+import { useGetContainerStyles } from '../hooks/useGetContainerStyles';
+import { useGetFooterStyles } from '../hooks/useGetFooterStyles';
+import { useGetScrollContentStyles } from '../hooks/useGetScrollContentStyles';
+
+export interface LayoutProps {
+  theme: Theme;
+  welcomeMessage: React.ReactNode;
+  footer?: React.ReactNode;
+  chatMessages?: React.ReactNode;
+  answerSuggestions?: React.ReactNode;
+  scrollToBottomButton?: React.ReactNode;
+  disclaimer?: React.ReactNode;
+  headerContainer?: string;
+  autoHeight?: boolean;
+}
+
+export const Layout = ({
+  theme,
+  welcomeMessage,
+  footer,
+  chatMessages,
+  answerSuggestions,
+  scrollToBottomButton,
+  disclaimer,
+  headerContainer,
+  autoHeight,
+}: LayoutProps) => {
+  const hasWelcomeMessage = isValidElement(welcomeMessage);
+  const hasAnswerSuggestions = isValidElement(answerSuggestions);
+  const { contentClasses, messageContainerClasses } = useGetScrollContentStyles();
+  const { footerContainerClasses } = useGetFooterStyles();
+  const { containerClasses, containerStyles } = useGetContainerStyles({
+    headerContainer,
+    autoHeight,
+  });
+
+  return (
+    <div
+      className={containerClasses}
+      style={containerStyles}
+    >
+      <div className={contentClasses}>
+        <Stack
+          className={messageContainerClasses}
+          direction="column"
+          justify="between"
+        >
+          {welcomeMessage}
+          {disclaimer}
+        </Stack>
+        <Stack
+          direction="column"
+          gap="0"
+          className={classNames(
+            (!hasWelcomeMessage || (hasWelcomeMessage && theme === Theme.STANDARD)) &&
+              !hasAnswerSuggestions &&
+              'envive-tw-pb-4',
+            'envive-tw-pt-4',
+          )}
+        >
+          {chatMessages}
+          {answerSuggestions}
+        </Stack>
+      </div>
+      <div className={footerContainerClasses}>
+        {scrollToBottomButton && (
+          <div className="envive-tw-h-[0px]">
+            <div className="envive-tw-ml-auto envive-tw-table envive-tw-translate-x-[-30px] envive-tw-translate-y-[-50px]">
+              {scrollToBottomButton}
+            </div>
+          </div>
+        )}
+        {footer}
+      </div>
+    </div>
+  );
+};

package/src/components/FullPageSalesAgent/components/index.ts

@@ -0,0 +1,5 @@
+import { Layout } from './Layout';
+
+export const FullPageSAComponents = {
+  Layout,
+};

package/src/components/FullPageSalesAgent/hooks/useContainerResizerObserver.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+
+export const useContainerResizerObserver = ({
+  headerContainer,
+  autoHeight,
+}: {
+  headerContainer?: string;
+  autoHeight?: boolean;
+}) => {
+  const [containerHeight, setContainerHeight] = useState<number | string>('100%');
+
+  useEffect(() => {
+    if (!autoHeight) {
+      return null;
+    }
+
+    const watchResizing = () => {
+      const header = document.querySelector(headerContainer)?.getBoundingClientRect()?.height || 0;
+      setContainerHeight(window.innerHeight - header);
+    };
+
+    window.addEventListener('resize', watchResizing);
+    watchResizing();
+
+    return () => {
+      window.removeEventListener('resize', watchResizing);
+    };
+  }, [headerContainer, autoHeight]);
+
+  return {
+    containerHeight,
+  };
+};

package/src/components/FullPageSalesAgent/hooks/useGetContainerStyles.ts

@@ -0,0 +1,24 @@
+import { useContainerResizerObserver } from './useContainerResizerObserver';
+
+export const useGetContainerStyles = ({
+  headerContainer,
+  autoHeight,
+}: {
+  headerContainer?: string;
+  autoHeight?: boolean;
+}) => {
+  const { containerHeight } = useContainerResizerObserver({
+    headerContainer,
+    autoHeight,
+  });
+
+  const containerClasses =
+    'envive-tw-mx-auto envive-tw-flex envive-tw-h-full envive-tw-max-w-[768px] envive-tw-flex-col';
+
+  const containerStyles = { height: containerHeight };
+
+  return {
+    containerClasses,
+    containerStyles,
+  };
+};

package/src/components/FullPageSalesAgent/hooks/useGetFooterStyles.ts

@@ -0,0 +1,17 @@
+import { useIsMobile } from './useIsMobile';
+
+export const useGetFooterStyles = () => {
+  const { isMobile } = useIsMobile();
+  const footerStyles = !isMobile
+    ? { boxShadow: '0px 2px 10px 0px rgba(0, 0, 0, 0.2)', borderWidth: '1px' }
+    : null;
+
+  const footerContainerClasses = isMobile
+    ? 'envive-tw-absolute envive-tw-bottom-[0] envive-tw-left-[0] envive-tw-right-[0]'
+    : 'envive-tw-pb-5';
+
+  return {
+    footerStyles,
+    footerContainerClasses,
+  };
+};

package/src/components/FullPageSalesAgent/hooks/useGetScrollContentStyles.ts

@@ -0,0 +1,17 @@
+import classNames from 'classnames';
+import { useIsMobile } from './useIsMobile';
+
+export const useGetScrollContentStyles = () => {
+  const { isMobile } = useIsMobile();
+  const contentClasses = classNames({
+    'envive-tw-flex-1 envive-tw-overflow-y-auto envive-tw-overflow-x-hidden envive-tw-transition-all envive-tw-duration-300 envive-tw-ease-in-out': true,
+    'envive-tw-pb-[131px]': isMobile,
+  });
+
+  const messageContainerClasses = !isMobile ? 'envive-tw-pt-4' : null;
+
+  return {
+    contentClasses,
+    messageContainerClasses,
+  };
+};

package/src/components/FullPageSalesAgent/hooks/useIsMobile.ts

@@ -0,0 +1,3 @@
+import { useCheckIsMobile } from 'src/components/utils/useCheckIsMobile';
+
+export const useIsMobile = () => useCheckIsMobile('md');

package/src/components/FullPageSalesAgent/index.ts

@@ -0,0 +1 @@
+export { FullPageSalesAgent } from './FullPageSalesAgent';

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

@@ -20,7 +20,7 @@ export const useVariantStyleProperties = (
     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',
+        containerBackgroundClasses: '',
         containerBorderClasses: '',
         containerRadiusClasses: 'envive-tw-rounded-md',
         contentClasses: '',

package/src/components/SalesAgentProductCard/SalesAgentProductCard.tsx

@@ -29,6 +29,7 @@ export const SalesAgentProductCard = ({
   rate,
   image,
   url,
+  target,
   onClick,
 }: SalesAgentProductCardProps) => {
   const finalTheme = resolveTheme(theme);
@@ -42,6 +43,7 @@ export const SalesAgentProductCard = ({
       theme={finalTheme}
       variant={variant}
       url={url}
+      target={target}
       onClick={onClick}
       productName={
         <SalesAgentProductCardComponents.ProductName

package/src/components/SalesAgentProductCard/components/Container.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
+import { Theme } from '../../../../tokens/theme/theme';
+import { Container as ContainerComponent } from '../../Container';
 import { Stack } from '../../Stack';
-import { SalesAgentProductCardVariant } from '../types/types';
 import { useGetContainerProperties } from '../hooks/useGetContainerProperties';
 import { useGetProductDescriptionProperties } from '../hooks/useGetProductDescriptionProperties';
-import { Container as ContainerComponent } from '../../Container';
-import { Theme } from '../../../../tokens/theme/theme';
+import { SalesAgentProductCardProps, SalesAgentProductCardVariant } from '../types/types';
 
 export type ContainerProps = {
   id?: string;
@@ -18,6 +18,7 @@ export type ContainerProps = {
   rate: React.ReactNode;
   image: React.ReactNode;
   url: string;
+  target?: SalesAgentProductCardProps['target'];
   onClick?: () => void | Promise<void>;
 };
 
@@ -33,6 +34,7 @@ export const Container = ({
   rate,
   image,
   url,
+  target = '_self',
   onClick,
 }: ContainerProps) => {
   const { baseClassName, themeContainerClassNames, containerDirection, containerWidthClassName } =
@@ -48,12 +50,17 @@ export const Container = ({
     variant,
   });
 
-  const anchorProps: React.AnchorHTMLAttributes<HTMLAnchorElement> = {
-    href: url,
-    onClick,
-    target: '_self',
-    draggable: false,
-  };
+  const anchorProps: React.AnchorHTMLAttributes<HTMLAnchorElement> =
+    target !== 'none'
+      ? {
+          href: url,
+          onClick,
+          target,
+          draggable: false,
+        }
+      : {
+          onClick,
+        };
 
   return (
     <ContainerComponent

package/src/components/SalesAgentProductCard/types/types.ts

@@ -71,6 +71,10 @@ export type SalesAgentProductCardProps = {
    * The URL to navigate to when the card is clicked.
    */
   url?: string;
+  /**
+   * The URL target to be applied.
+   */
+  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'] | 'none';
   /**
    * Callback function called when the card is clicked.
    */