@envive-ai/react-toolkit-v3 0.3.28 → 0.3.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit-v3",
-  "version": "0.3.28",
+  "version": "0.3.30",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",

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

@@ -124,6 +124,7 @@ export const AgentMessage = ({
       if (msg.type === MessageType.Text && msg.metadata.content) {
         return (
           <MessageComponent
+            theme={finalTheme}
             variant={MessageVariant.AGENT}
             agentName={hideAgentName ? undefined : agentName}
             showSparkle={isResponseStreaming || isPendingResponse}

package/src/components/FullPageSalesAgent/FullPageSalesAgent.tsx

@@ -461,9 +461,8 @@ export const FullPageSalesAgent = ({
         headerContainer={headerContainer}
         autoHeight={autoHeight}
         scrollContainerRef={scrollContainerRef}
-        backgroundStyle={backgroundStyle}
         overlay={
-          overlayEnabled ? (
+          overlayEnabled && showOverlay ? (
             <WelcomeOverlay
               show={showOverlay}
               theme={resolvedTheme}

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

@@ -49,6 +49,10 @@ export const Layout = ({
     autoHeight,
   });
 
+  if (overlay) {
+    return overlay;
+  }
+
   return (
     <div
       className={classNames(containerClasses, 'envive-tw-relative')}
@@ -89,7 +93,6 @@ export const Layout = ({
         )}
         {footer}
       </div>
-      {overlay}
     </div>
   );
 };

package/src/components/FullPageSalesAgent/components/WelcomeOverlay.tsx

@@ -56,23 +56,15 @@ export const WelcomeOverlay = ({
   const showProductCarousel = !isLoading && products.length > 0 && !!productCarouselTitle;
 
   const welcomeOverlayClassNames = classNames([
+    'envive-overlay',
     'envive-tw-inset-0',
     'envive-tw-absolute',
     'envive-tw-z-20',
     'envive-tw-flex',
     'envive-tw-w-full',
-    'envive-tw-h-full',
-    'envive-tw-max-w-[768px]',
     'envive-tw-flex-col',
   ]);
 
-  const titleClassNames = classNames([
-    'envive-tw-flex',
-    'envive-tw-flex-row',
-    'envive-tw-gap-2',
-    'envive-tw-items-center',
-  ]);
-
   const titleBoxClassNames = classNames([
     'envive-tw-flex',
     'envive-tw-py-4',
@@ -85,6 +77,22 @@ export const WelcomeOverlay = ({
     'envive-tw-border',
     'envive-tw-rounded-global-custom',
   ]);
+  const overlayContentClassNames = classNames([
+    'envive-tw-inset-0',
+    'envive-tw-mx-auto',
+    'envive-tw-flex',
+    'envive-tw-w-full',
+    'envive-tw-max-w-[768px]',
+    'envive-tw-flex-1',
+    'envive-tw-flex-col',
+    'envive-tw-gap-6',
+    'envive-tw-overflow-y-auto',
+    'envive-tw-overflow-x-hidden',
+    'envive-tw-px-4',
+    'envive-tw-pb-4',
+    'envive-tw-pt-6',
+    'lg:envive-tw-gap-10',
+  ]);
   return (
     <AnimatePresence>
       {show && (
@@ -95,15 +103,20 @@ export const WelcomeOverlay = ({
           initial={{ opacity: 1 }}
           exit={{ opacity: 0, transition: { duration: 0.5, ease: 'easeIn' } }}
         >
-          <div className="envive-tw-flex envive-tw-flex-1 envive-tw-flex-col envive-tw-gap-6 envive-tw-overflow-y-auto envive-tw-overflow-x-hidden envive-tw-px-4 envive-tw-pb-4 envive-tw-pt-6 lg:envive-tw-gap-10">
+          <div className={overlayContentClassNames}>
             <div className={titleBoxClassNames}>
-              <div className={titleClassNames}>
-                <Typography variant={TypographyVariant.T3_MD}>{title}</Typography>
-                <SparkleAnimation
-                  color={sparkleColor}
-                  animate={false}
-                />
-              </div>
+              <Typography
+                variant={TypographyVariant.T3_MD}
+                as="span"
+              >
+                {title}
+                <span className="envive-tw-ml-1 envive-tw-inline-block envive-tw-align-top">
+                  <SparkleAnimation
+                    color={sparkleColor}
+                    animate={false}
+                  />
+                </span>
+              </Typography>
               {chatFooter}
               {promptSuggestions.length > 0 && (
                 <PromptCarousel

package/src/components/MarkdownProcessor/MarkdownProcessor.tsx

@@ -10,6 +10,7 @@ export const MarkdownProcessor = ({
   textColor,
   textVariant,
   onLinkClick,
+  theme,
 }: MarkdownProcessorProps) => {
   const processedContent = content.replace(/<br\s*[\\/]?>/gi, '\n\n');
 
@@ -18,10 +19,10 @@ export const MarkdownProcessor = ({
       li: MarkdownProcessorComponents.MarkdownListItem,
       ul: MarkdownProcessorComponents.MarkdownUnorderedList,
       ol: MarkdownProcessorComponents.MarkdownOrderedList,
-      a: createMarkdownLinkComponent({ onLinkClick }),
+      a: createMarkdownLinkComponent({ onLinkClick, theme }),
       p: createMarkdownParagraphComponent({ clampParagraphs, textColor, textVariant }),
     }),
-    [clampParagraphs, textColor, textVariant, onLinkClick],
+    [clampParagraphs, textColor, textVariant, onLinkClick, theme],
   );
 
   return <ReactMarkdown components={components}>{processedContent}</ReactMarkdown>;

package/src/components/MarkdownProcessor/components/MarkdownLink.tsx

@@ -1,17 +1,20 @@
 import { TypographyColor } from 'src/components/Typography';
 import { LinkButton } from '../../Message/components/LinkButton';
+import { Theme } from '../../../../tokens/theme/theme';
 
 export type MarkdownLinkProps = {
   href?: string;
   children?: React.ReactNode;
   onClick?: (url: string) => void;
+  theme?: Theme;
 };
 
-export const MarkdownLink = ({ href, onClick, children }: MarkdownLinkProps) => (
+export const MarkdownLink = ({ href, onClick, children, theme }: MarkdownLinkProps) => (
   <LinkButton
     url={href}
     text={children?.toString()}
     typographyColor={TypographyColor.TEXT_SECONDARY}
     onClick={onClick}
+    theme={theme}
   />
 );

package/src/components/MarkdownProcessor/types/types.ts

@@ -1,4 +1,5 @@
 import { TypographyColor, TypographyVariant } from '../../Typography/types';
+import { Theme } from '../../../../tokens/theme/theme';
 
 /**
  * Props for the MarkdownProcessor component.
@@ -41,4 +42,8 @@ export type MarkdownProcessorProps = {
    * Callback invoked when a markdown link is clicked. Receives the link URL as an argument.
    */
   onLinkClick?: (url: string) => void;
+  /**
+   * Theme applied to link icons. When STANDARD or MODERN, link icons get 2px border radius.
+   */
+  theme?: Theme;
 };

package/src/components/MarkdownProcessor/utils/functions.tsx

@@ -1,5 +1,6 @@
 import { TypographyColor, TypographyVariant } from '../../Typography/types';
 import { MarkdownProcessorComponents } from '../components';
+import { Theme } from '../../../../tokens/theme/theme';
 
 export const createMarkdownParagraphComponent = ({
   clampParagraphs,
@@ -25,13 +26,16 @@ export const createMarkdownParagraphComponent = ({
 
 export const createMarkdownLinkComponent = ({
   onLinkClick,
+  theme,
 }: {
   onLinkClick?: (url: string) => void;
+  theme?: Theme;
 }) => {
   const Component = ({ href, children }: { href?: string; children?: React.ReactNode }) => (
     <MarkdownProcessorComponents.MarkdownLink
       href={href}
       onClick={onLinkClick}
+      theme={theme}
     >
       {children}
     </MarkdownProcessorComponents.MarkdownLink>

package/src/components/Message/Message.tsx

@@ -19,6 +19,7 @@ export const Message = ({
   style,
   ariaLabel,
   onLinkClick,
+  theme,
 }: MessageProps): JSX.Element => {
   const validationResult = validateMessageProps({ variant, agentName, content, isLoading });
   if (!validationResult.isValid) {
@@ -46,12 +47,13 @@ export const Message = ({
       )}
       {isAgent && (
         <MessageComponents.AgentContent
-          content={content}
+          content={content ?? ''}
           isLoading={isLoading}
           onLinkClick={onLinkClick}
+          theme={theme}
         />
       )}
-      {isUser && <MessageComponents.UserContent content={content} />}
+      {isUser && <MessageComponents.UserContent content={content ?? ''} />}
     </MessageComponents.Layout>
   );
 };

package/src/components/Message/components/AgentContent.tsx

@@ -1,5 +1,6 @@
 import { Suspense, lazy } from 'react';
 import { LoadingSkeleton } from './LoadingSkeleton';
+import { Theme } from '../../../../tokens/theme/theme';
 
 const MarkdownProcessor = lazy(async () => ({
   default: (await import('../../MarkdownProcessor/MarkdownProcessor')).MarkdownProcessor,
@@ -9,6 +10,7 @@ type AgentContentProps = {
   content: string;
   isLoading?: boolean;
   onLinkClick?: (url: string) => void;
+  theme?: Theme;
 };
 
 /**
@@ -18,6 +20,7 @@ export const AgentContent = ({
   content,
   isLoading = false,
   onLinkClick,
+  theme,
 }: AgentContentProps): React.ReactNode => {
   if (isLoading) {
     return <LoadingSkeleton />;
@@ -28,6 +31,7 @@ export const AgentContent = ({
       <MarkdownProcessor
         content={content}
         onLinkClick={onLinkClick}
+        theme={theme}
       />
     </Suspense>
   );

package/src/components/Message/components/LinkButton.tsx

@@ -4,12 +4,14 @@ import { CustomIcon } from '../../utils/CustomIcon';
 import { useGetLinkButtonIconProperties } from '../hooks/useGetLinkButtonIconProperties';
 import { useGetLinkButtonProperties } from '../hooks/useGetLinkButtonProperties';
 import { openUrlInNewTab } from '../utils/openUrlInNewTab';
+import { Theme } from '../../../../tokens/theme/theme';
 
 type LinkButtonProps = {
   url: string;
   text: string;
   typographyColor?: TypographyColor;
   onClick?: (url: string) => void;
+  theme?: Theme;
 };
 
 /**
@@ -21,9 +23,10 @@ export const LinkButton = ({
   text,
   typographyColor,
   onClick,
+  theme,
 }: LinkButtonProps): React.ReactNode => {
   const { containerClasses } = useGetLinkButtonProperties();
-  const { iconContainerClasses } = useGetLinkButtonIconProperties();
+  const { iconContainerClasses } = useGetLinkButtonIconProperties(theme);
 
   const handleClick = () => {
     openUrlInNewTab(url);

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

@@ -1,20 +1,24 @@
 import { useMemo } from 'react';
+import { Theme } from '../../../../tokens/theme/theme';
 
 /**
  * Hook that returns CSS classes for the LinkButton icon container element.
  */
-export const useGetLinkButtonIconProperties = () => {
+export const useGetLinkButtonIconProperties = (theme?: Theme) => {
   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 radiusClass =
+      theme === Theme.STANDARD || theme === Theme.MODERN ? 'envive-tw-rounded-2' : '';
+
+    const visualClasses = `${radiusClass} 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}`;
-  }, []);
+  }, [theme]);
 
   return { iconContainerClasses };
 };

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

@@ -1,3 +1,5 @@
+import { Theme } from '../../../../tokens/theme/theme';
+
 /**
  * Visual variant of the message component.
  */
@@ -86,4 +88,5 @@ export interface MessageProps {
   style?: React.CSSProperties;
 
   onLinkClick?: (url: string) => void;
+  theme?: Theme;
 }

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

@@ -11,7 +11,7 @@ export const useGetContainerProperties = ({
   minimalFrame = 'full',
 }: UseGetContainerPropertiesProps) => {
   const baseClassName =
-    'envive-tw-cursor-text envive-tw-border-solid envive-tw-px-4 envive-tw-py-2';
+    'envive-tw-cursor-text envive-tw-border-solid envive-tw-px-4 envive-tw-py-2 envive-tw-bg-[--envive-colors-background-light]';
 
   const themeContainerClassName = useMemo(() => {
     const minimalBorderClass =
@@ -24,6 +24,7 @@ export const useGetContainerProperties = ({
         'envive-tw-border-[1px] envive-tw-border-border-light envive-tw-rounded-global-custom',
       [Theme.MODERN]: 'envive-tw-border-[1px] envive-tw-border-border-light envive-tw-rounded-4',
       [Theme.MINIMAL]: minimalBorderClass,
+      [Theme.GLOBAL_CUSTOM]: '',
     };
     return themeCotainerMap[theme] ?? '';
   }, [theme, minimalFrame]);

package/src/components/WidgetWrapper/WidgetWrapper.tsx

@@ -1,7 +1,8 @@
 import classNames from 'classnames';
 import { Container } from '../Container';
-import { WidgetWrapperProps } from './types/types';
+import { WidgetWrapperProps, WidgetWrapperVariant } from './types/types';
 import { useGetWrapperProperties } from './hooks/useGetWrapperProperties';
+import { useCheckIsMobile } from '../utils/useCheckIsMobile';
 
 /**
  * WidgetWrapper component provides consistent styling for widget containers.
@@ -18,11 +19,18 @@ export const WidgetWrapper = ({
   ...containerProps
 }: WidgetWrapperProps) => {
   const { wrapperClassName } = useGetWrapperProperties(variant);
+  const { isMobile } = useCheckIsMobile('md');
+
+  const isCardVariant =
+    variant === WidgetWrapperVariant.CARD_WITH_BORDER ||
+    variant === WidgetWrapperVariant.CARD_NO_BORDER;
+
+  const cardPadding = isCardVariant && !isMobile ? { padding: '24px' } : {};
 
   return (
     <Container
       className={classNames(wrapperClassName, className)}
-      style={style}
+      style={{ ...style, ...cardPadding }}
       {...containerProps}
     >
       {children}

package/src/components/WidgetWrapperWithTitle/WidgetWrapperWithTitle.tsx

@@ -18,13 +18,13 @@ export const WidgetWrapperWithTitle = ({
   hideLogo,
   fullIsLoading,
 }: WidgetWrapperWithTitleProps) => {
-  const cardBgColor =
+  const isCardVariant =
     variant === WidgetWrapperVariant.CARD_WITH_BORDER ||
-    variant === WidgetWrapperVariant.CARD_NO_BORDER
-      ? hexCardColor
-      : undefined;
+    variant === WidgetWrapperVariant.CARD_NO_BORDER;
 
-  const logo = hideLogo ? null : logoSrc;
+  const cardBgColor = isCardVariant ? hexCardColor : undefined;
+
+  const logo = hideLogo ? undefined : logoSrc;
 
   return (
     <WidgetWrapper

package/src/components/utils/resolveTheme.ts

@@ -8,8 +8,8 @@ export const resolveTheme = (theme: Theme) => {
     globalCustomTheme &&
     (theme === Theme.GLOBAL_CUSTOM || theme === ('var(--envive-colors-global-custom)' as Theme))
   ) {
-    return globalCustomTheme as Theme;
+    return globalCustomTheme;
   }
 
-  return theme as Theme;
+  return theme;
 };