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

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/PromptCarousel/PromptCarousel.tsx

@@ -123,6 +123,7 @@ export const PromptCarousel = ({
     >
       <Stack
         direction="column"
+        className={animationSpeed === AnimationSpeed.NONE ? 'envive-tw-w-full' : ''}
         gap="2"
       >
         <div

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.
    */

package/src/components/TextField/utils/getIconColor.ts

@@ -3,7 +3,7 @@
  */
 export const getIconColor = (hasValue: boolean, disabled: boolean): string => {
   if (disabled || !hasValue) {
-    return 'var(--envive-colors-border-medium)';
+    return 'var(--envive-colors-border-light)';
   }
   return 'var(--envive-colors-text-primary)';
 };

package/src/components/TextField/utils/getSendIconElement.tsx

@@ -30,7 +30,9 @@ export const getSendIconElement = (
         <CustomIcon
           IconComponent={<SendModern />}
           fill={iconColor}
-          stroke={iconColor}
+          stroke={
+            hasValue ? 'var(--envive-colors-background-light)' : 'var(--envive-colors-border-dark)'
+          }
         />
       );
     case Theme.MINIMAL:

package/src/components/WidgetTextField/components/Icon.tsx

@@ -53,6 +53,7 @@ export const Icon = ({ variant, theme, textColor }: IconProps) => {
               ? `var(--envive-colors-${textColor})`
               : 'var(--envive-colors-border-medium)'
           }
+          stroke="var(--envive-colors-border-dark)"
         />
       );
     }

package/src/components/utils/CustomIcon.tsx

@@ -19,7 +19,7 @@ export const CustomIcon = ({
 
   const cssRules: string[] = [];
   if (fill) {
-    cssRules.push(`#${iconId} path { fill: ${fill} !important; }`);
+    cssRules.push(`#${iconId} path, #${iconId} rect { fill: ${fill} !important; }`);
   }
   if (stroke) {
     cssRules.push(`#${iconId} path { stroke: ${stroke} !important; }`);