@envive-ai/react-toolkit-v3 0.3.12 → 0.3.14

package/src/components/MarkdownProcessor/__tests__/MarkdownProcessor.test.tsx

@@ -69,22 +69,6 @@ describe('MarkdownProcessor', () => {
     });
   });
 
-  describe('Subscript', () => {
-    it('should render subscript text', () => {
-      const content = 'Regular text<sub>subscript</sub>';
-      render(<MarkdownProcessor content={content} />);
-      expect(screen.getByText('Regular text')).toBeInTheDocument();
-      expect(screen.getByText('subscript')).toBeInTheDocument();
-    });
-
-    it('should render multiple subscript elements', () => {
-      const content = 'First<sub>sub1</sub> and second<sub>sub2</sub>';
-      render(<MarkdownProcessor content={content} />);
-      expect(screen.getByText('sub1')).toBeInTheDocument();
-      expect(screen.getByText('sub2')).toBeInTheDocument();
-    });
-  });
-
   describe('Paragraph clamping', () => {
     it('should not clamp paragraphs when clampParagraphs is undefined', () => {
       const content =
@@ -131,34 +115,12 @@ describe('MarkdownProcessor', () => {
       );
       expect(screen.getByText('Custom color text')).toBeInTheDocument();
     });
-
-    it('should apply custom subTextVariant', () => {
-      const content = 'Text<sub>subscript</sub>';
-      render(
-        <MarkdownProcessor
-          content={content}
-          subTextVariant={TypographyVariant.B4_RG}
-        />,
-      );
-      expect(screen.getByText('subscript')).toBeInTheDocument();
-    });
-
-    it('should apply custom subTextColor', () => {
-      const content = 'Text<sub>subscript</sub>';
-      render(
-        <MarkdownProcessor
-          content={content}
-          subTextColor={TypographyColor.TEXT_ACCENT}
-        />,
-      );
-      expect(screen.getByText('subscript')).toBeInTheDocument();
-    });
   });
 
   describe('Complex content', () => {
     it('should render complex markdown with multiple elements', () => {
       const content =
-        '# Heading\n\nThis is a paragraph with **bold** and *italic*.\n\n- List item 1\n- List item 2\n\n1. Ordered item 1\n2. Ordered item 2\n\n[Link text](https://example.com)\n\nText with<sub>subscript</sub>.';
+        '# Heading\n\nThis is a paragraph with **bold** and *italic*.\n\n- List item 1\n- List item 2\n\n1. Ordered item 1\n2. Ordered item 2\n\n[Link text](https://example.com)';
       render(<MarkdownProcessor content={content} />);
       expect(screen.getByText(/This is a paragraph/i)).toBeInTheDocument();
       expect(screen.getByText('List item 1')).toBeInTheDocument();

package/src/components/MarkdownProcessor/components/index.ts

@@ -3,7 +3,6 @@ import { MarkdownLink } from './MarkdownLink';
 import { MarkdownOrderedList } from './MarkdownOrderedList';
 import { MarkdownUnorderedList } from './MarkdownUnorderedList';
 import { MarkdownParagraph } from './MarkdownParagraph';
-import { MarkdownSubscript } from './MarkdownSubscript';
 
 export const MarkdownProcessorComponents = {
   MarkdownListItem,
@@ -11,5 +10,4 @@ export const MarkdownProcessorComponents = {
   MarkdownOrderedList,
   MarkdownUnorderedList,
   MarkdownParagraph,
-  MarkdownSubscript,
 };

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

@@ -22,22 +22,3 @@ export const createMarkdownParagraphComponent = ({
   Component.displayName = 'MarkdownParagraphComponent';
   return Component;
 };
-
-export const createMarkdownSubscriptComponent = ({
-  subTextVariant,
-  subTextColor,
-}: {
-  subTextVariant?: TypographyVariant;
-  subTextColor?: TypographyColor;
-}) => {
-  const Component = ({ children }: { children?: React.ReactNode }) => (
-    <MarkdownProcessorComponents.MarkdownSubscript
-      subTextVariant={subTextVariant}
-      subTextColor={subTextColor}
-    >
-      {children}
-    </MarkdownProcessorComponents.MarkdownSubscript>
-  );
-  Component.displayName = 'MarkdownSubscriptComponent';
-  return Component;
-};

package/src/components/Message/components/AgentHeader.tsx

@@ -1,6 +1,6 @@
 import { Stack } from '../../Stack';
+import { SparkleAnimation } from '../../SparkleAnimation';
 import { Typography, TypographyColor, TypographyVariant } from '../../Typography';
-import { SparkleIcon } from './SparkleIcon';
 
 type AgentHeaderProps = {
   agentName: string;
@@ -28,7 +28,12 @@ export const AgentHeader = ({
       >
         {agentName}
       </Typography>
-      <SparkleIcon isLoading={isLoading || showSparkle} />
+      {(isLoading || showSparkle) && (
+        <SparkleAnimation
+          color="var(--envive-colors-accent-primary)"
+          animate
+        />
+      )}
     </Stack>
   );
 };

package/src/components/ProductCard/components/Header.tsx

@@ -1,7 +1,8 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { AnimatedText } from '../../AnimatedText';
 import { Stack } from '../../Stack';
 import { Typography, TypographyColor, TypographyVariant } from '../../Typography';
+import { useAnimatedTextMinHeight } from '../../utils/useAnimatedTextMinHeight';
 import { useGetHeaderProperties } from '../hooks/useGetHeaderProperties';
 import { HeaderProps } from '../types';
 
@@ -14,13 +15,19 @@ export const Header = ({
   loop,
 }: HeaderProps) => {
   const { stackClasses, headlineClasses } = useGetHeaderProperties(italicizeHeadline);
+  const { measuringRef, minHeight } = useAnimatedTextMinHeight(animatedText);
+
+  const biggestText = useMemo(() => {
+    return animatedText.reduce((maxText, currText) => {
+      return currText.length > maxText.length ? currText : maxText;
+    }, '');
+  }, [animatedText]);
 
   const animatedTextWrapper = useCallback(
     (text: string) => (
       <Typography
         variant={TypographyVariant.B3_MD}
         color={TypographyColor.TEXT_LIGHT}
-        numberOfLines={2}
       >
         {text}
       </Typography>
@@ -42,13 +49,36 @@ export const Header = ({
         {headline}
       </Typography>
       {animatedText.length > 0 && (
-        <AnimatedText
-          sequence={animatedText}
-          getNodeWrapper={animatedTextWrapper}
-          typingDuration={textTypingDuration}
-          transition={textTransition}
-          loop={loop}
-        />
+        <div style={{ position: 'relative' }}>
+          <div
+            ref={measuringRef}
+            aria-hidden="true"
+            style={{
+              position: 'absolute',
+              visibility: 'hidden',
+              pointerEvents: 'none',
+              width: '100%',
+            }}
+          >
+            <div>
+              <Typography
+                variant={TypographyVariant.B3_MD}
+                color={TypographyColor.TEXT_LIGHT}
+              >
+                {biggestText}
+              </Typography>
+            </div>
+          </div>
+          <div style={{ minHeight }}>
+            <AnimatedText
+              sequence={animatedText}
+              getNodeWrapper={animatedTextWrapper}
+              typingDuration={textTypingDuration}
+              transition={textTransition}
+              loop={loop}
+            />
+          </div>
+        </div>
       )}
     </Stack>
   );

package/src/components/SparkleAnimation/SparkleAnimation.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useState } from 'react';
+import { type Transition, motion } from 'framer-motion';
+
+import FourPointStar from '@envive-ai/react-icons/FourPointStar';
+import { SparkleAnimationOverride } from './types';
+
+// Animation timing constants
+const ANIMATION_CYCLE_TIME = 1000; // 1 second between cycles
+const STAR_DELAY_OFFSET = 250; // 250ms delay between each star
+
+interface SparkleAnimationProps {
+  color: string;
+  className?: string;
+  animate?: boolean; // Whether to animate the sparkles, defaults to true
+}
+
+export const SparkleAnimation = ({ color, className, animate = true }: SparkleAnimationProps) => {
+  // Star visibility states - start visible if not animating, invisible if animating
+  const [mainStarScale, setMainStarScale] = useState(animate ? 0 : 1);
+  const [smallStar1Scale, setSmallStar1Scale] = useState(animate ? 0 : 1);
+  const [smallStar2Scale, setSmallStar2Scale] = useState(animate ? 0 : 1);
+
+  // When animation is disabled, ensure all stars are visible
+  useEffect(() => {
+    if (!animate) {
+      setMainStarScale(1);
+      setSmallStar1Scale(1);
+      setSmallStar2Scale(1);
+    }
+  }, [animate]);
+
+  // Animation cycle effect
+  useEffect(() => {
+    if (!animate) return;
+
+    // Toggle between visible (1) and invisible (0)
+    const newScale = mainStarScale === 1 ? 0 : 1;
+
+    // Stagger the star animations
+    setTimeout(() => setMainStarScale(newScale), ANIMATION_CYCLE_TIME);
+    setTimeout(() => setSmallStar1Scale(newScale), ANIMATION_CYCLE_TIME + STAR_DELAY_OFFSET);
+    setTimeout(() => setSmallStar2Scale(newScale), ANIMATION_CYCLE_TIME + 2 * STAR_DELAY_OFFSET);
+  }, [mainStarScale, animate]);
+
+  // Animation transition settings
+  const starTransition: Transition = { duration: 0.3, ease: 'easeOut' };
+
+  return (
+    <div
+      className={`${SparkleAnimationOverride.CONTAINER} ${className || ''}`}
+      style={{ width: '24px', height: '24px', position: 'relative' }}
+    >
+      {/* Main star - center, slightly above container */}
+      <div
+        className={SparkleAnimationOverride.STAR_ONE_CONTAINER}
+        style={{ position: 'absolute', left: 0, top: '-2px' }}
+      >
+        <motion.div
+          animate={{ scale: mainStarScale }}
+          transition={starTransition}
+        >
+          <FourPointStar
+            fill={color}
+            style={{ display: 'inline-block', height: '16px', width: '16px' }}
+          />
+        </motion.div>
+      </div>
+
+      {/* Small star 1 - upper right */}
+      <div
+        className={SparkleAnimationOverride.STAR_TWO_CONTAINER}
+        style={{ position: 'absolute', top: '-7px', left: '10px' }}
+      >
+        <motion.div
+          animate={{ scale: smallStar1Scale }}
+          transition={starTransition}
+        >
+          <FourPointStar
+            fill={color}
+            style={{ display: 'inline-block', height: '8px', width: '8px' }}
+          />
+        </motion.div>
+      </div>
+
+      {/* Small star 2 - lower right */}
+      <div
+        className={SparkleAnimationOverride.STAR_THREE_CONTAINER}
+        style={{ position: 'absolute', left: '12px', top: '1px' }}
+      >
+        <motion.div
+          animate={{ scale: smallStar2Scale }}
+          transition={starTransition}
+        >
+          <FourPointStar
+            fill={color}
+            style={{ display: 'inline-block', height: '8px', width: '8px' }}
+          />
+        </motion.div>
+      </div>
+    </div>
+  );
+};

package/src/components/SparkleAnimation/index.ts

@@ -0,0 +1,2 @@
+export * from './SparkleAnimation';
+export * from './types';

package/src/components/SparkleAnimation/types.ts

@@ -0,0 +1,6 @@
+export enum SparkleAnimationOverride {
+  CONTAINER = 'spiffy-sparkle-animation-container',
+  STAR_ONE_CONTAINER = 'spiffy-sparkle-animation-star-one-container',
+  STAR_TWO_CONTAINER = 'spiffy-sparkle-animation-star-two-container',
+  STAR_THREE_CONTAINER = 'spiffy-sparkle-animation-star-three-container',
+}

package/src/components/TypingAnimation/TypingAnimation.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { AnimatedText } from '../AnimatedText';
 import { Typography, TypographyColor } from '../Typography';
 import { PromptCarousel, PromptCarouselRows } from '../PromptCarousel';
@@ -9,6 +9,7 @@ import { Theme } from '../Tokens';
 import { WidgetWrapperWithTitle } from '../WidgetWrapperWithTitle';
 import type { TypingAnimationProps } from './types';
 import { useGetTypographyVariant } from './hooks/useGetTypographyVariant';
+import { useAnimatedTextMinHeight } from '../utils/useAnimatedTextMinHeight';
 import { Stack } from '../Stack';
 
 export const TypingAnimation = ({
@@ -26,6 +27,8 @@ export const TypingAnimation = ({
     promptButtonTexts,
     hintText,
     textFieldAriaLabel,
+    logoSrc,
+    hideLogo,
   } = widgetContentProps || {};
 
   const {
@@ -40,6 +43,15 @@ export const TypingAnimation = ({
 
   const { handleButtonClick, handleTextFieldClick } = widgetEventProps || {};
   const typographyVariant = useGetTypographyVariant(theme);
+  const { measuringRef, minHeight } = useAnimatedTextMinHeight(animatedTextSequence ?? []);
+
+  const biggestAnimatedText = useMemo(() => {
+    if (!animatedTextSequence || animatedTextSequence.length === 0) return '';
+    return animatedTextSequence.reduce(
+      (maxText, currText) => (currText.length > maxText.length ? currText : maxText),
+      '',
+    );
+  }, [animatedTextSequence]);
 
   const getAnimatedTextWrapper = useCallback(
     (text: string) => (
@@ -62,6 +74,8 @@ export const TypingAnimation = ({
       className={className}
       style={style}
       titleLabel={titleLabel}
+      logoSrc={logoSrc}
+      hideLogo={hideLogo}
       hexCardColor={cardColor}
       fullIsLoading={isLoading}
     >
@@ -71,28 +85,64 @@ export const TypingAnimation = ({
       >
         {(headlineText || (animatedTextSequence && animatedTextSequence.length > 0)) &&
           !isLoading && (
-            <p
-              data-testid="typing-animation-headline-text"
-              className="envive-tw-max-w-[90ch] envive-tw-overflow-hidden envive-tw-text-ellipsis envive-tw-whitespace-nowrap"
-              style={{ textAlign: 'left' }}
-            >
-              {headlineText && (
-                <Typography
-                  variant={typographyVariant}
-                  color={TypographyColor.TEXT_PRIMARY}
-                  as="span"
+            <div style={{ position: 'relative' }}>
+              <div
+                ref={measuringRef}
+                aria-hidden="true"
+                style={{
+                  position: 'absolute',
+                  visibility: 'hidden',
+                  pointerEvents: 'none',
+                  width: '100%',
+                }}
+              >
+                <p
+                  className="envive-tw-max-w-[90ch]"
+                  style={{ textAlign: 'left' }}
+                >
+                  {headlineText && (
+                    <Typography
+                      variant={typographyVariant}
+                      color={TypographyColor.TEXT_PRIMARY}
+                      as="span"
+                    >
+                      {headlineText}
+                    </Typography>
+                  )}{' '}
+                  <Typography
+                    variant={typographyVariant}
+                    color={TypographyColor.TEXT_ACCENT}
+                    as="span"
+                  >
+                    {biggestAnimatedText}
+                  </Typography>
+                </p>
+              </div>
+              <div style={{ minHeight }}>
+                <p
+                  data-testid="typing-animation-headline-text"
+                  className="envive-tw-max-w-[90ch]"
+                  style={{ textAlign: 'left' }}
                 >
-                  {headlineText}
-                </Typography>
-              )}{' '}
-              {animatedTextSequence && animatedTextSequence.length > 0 ? (
-                <AnimatedText
-                  sequence={animatedTextSequence}
-                  loop
-                  getNodeWrapper={getAnimatedTextWrapper}
-                />
-              ) : null}
-            </p>
+                  {headlineText && (
+                    <Typography
+                      variant={typographyVariant}
+                      color={TypographyColor.TEXT_PRIMARY}
+                      as="span"
+                    >
+                      {headlineText}
+                    </Typography>
+                  )}{' '}
+                  {animatedTextSequence && animatedTextSequence.length > 0 ? (
+                    <AnimatedText
+                      sequence={animatedTextSequence}
+                      loop
+                      getNodeWrapper={getAnimatedTextWrapper}
+                    />
+                  ) : null}
+                </p>
+              </div>
+            </div>
           )}
         {promptButtonTexts && promptButtonTexts.length > 0 && handleButtonClick && (
           <PromptCarousel

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

@@ -63,6 +63,16 @@ export type WidgetContentProps = {
    * Accessibility: Provides an accessible name for the TextField.
    */
   textFieldAriaLabel?: string;
+
+  /**
+   * Source URL of the logo image displayed in the widget title.
+   */
+  logoSrc?: string;
+
+  /**
+   * When `true`, hides the logo in the title even if logoSrc is provided.
+   */
+  hideLogo?: boolean;
 };
 
 /**

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

@@ -14,7 +14,7 @@ export const useGetContainerProperties = ({ theme }: UseGetContainerPropertiesPr
       [Theme.STANDARD]:
         '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]: 'envive-tw-border-b-[1px] envive-tw-border-text-light',
+      [Theme.MINIMAL]: 'envive-tw-border-[1px] envive-tw-border-border-light',
     };
     return themeCotainerMap[theme] ?? '';
   }, [theme]);

package/src/components/utils/useAnimatedTextMinHeight.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useAnimatedTextMinHeight = (animatedText: string[]) => {
+  const measuringRef = useRef<HTMLDivElement>(null);
+  const [minHeight, setMinHeight] = useState(0);
+
+  useEffect(() => {
+    const updateMinHeight = () => {
+      if (!measuringRef.current) return;
+      let maxHeight = 0;
+      const { children } = measuringRef.current;
+      for (let i = 0; i < children.length; i += 1) {
+        maxHeight = Math.max(maxHeight, (children[i] as HTMLElement).offsetHeight);
+      }
+      setMinHeight(maxHeight);
+    };
+
+    updateMinHeight();
+
+    const observer = new ResizeObserver(updateMinHeight);
+    if (measuringRef.current) {
+      observer.observe(measuringRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [animatedText]);
+
+  return { measuringRef, minHeight };
+};

package/dist/MarkdownProcessor/components/MarkdownSubscript.cjs

@@ -1,15 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_index = require('../../Typography/types/index.cjs');
-const require_Typography = require('../../Typography/Typography.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/components/MarkdownProcessor/components/MarkdownSubscript.tsx
-const MarkdownSubscript = ({ children, subTextVariant, subTextColor }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
-	variant: subTextVariant ?? require_index.TypographyVariant.B5_RG,
-	color: subTextColor ?? require_index.TypographyColor.TEXT_SECONDARY,
-	className: "envive-tw-inline",
-	children
-});
-
-//#endregion
-exports.MarkdownSubscript = MarkdownSubscript;

package/dist/MarkdownProcessor/components/MarkdownSubscript.js

@@ -1,14 +0,0 @@
-import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
-import { Typography } from "../../Typography/Typography.js";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/MarkdownProcessor/components/MarkdownSubscript.tsx
-const MarkdownSubscript = ({ children, subTextVariant, subTextColor }) => /* @__PURE__ */ jsx(Typography, {
-	variant: subTextVariant ?? TypographyVariant.B5_RG,
-	color: subTextColor ?? TypographyColor.TEXT_SECONDARY,
-	className: "envive-tw-inline",
-	children
-});
-
-//#endregion
-export { MarkdownSubscript };

package/src/components/MarkdownProcessor/components/MarkdownSubscript.tsx

@@ -1,22 +0,0 @@
-import { TypographyColor, TypographyVariant } from '../../Typography/types';
-import { Typography } from '../../Typography/Typography';
-
-export type MarkdownSubscriptProps = {
-  subTextVariant?: TypographyVariant;
-  subTextColor?: TypographyColor;
-  children?: React.ReactNode;
-};
-
-export const MarkdownSubscript = ({
-  children,
-  subTextVariant,
-  subTextColor,
-}: MarkdownSubscriptProps) => (
-  <Typography
-    variant={subTextVariant ?? TypographyVariant.B5_RG}
-    color={subTextColor ?? TypographyColor.TEXT_SECONDARY}
-    className="envive-tw-inline"
-  >
-    {children}
-  </Typography>
-);