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

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;
 };