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

package/src/components/FloatingChat/FloatingChat.tsx

@@ -55,6 +55,7 @@ export const FloatingChat = ({
     showEnviveLogo,
     ignoreFirstModelResponse,
     neverShowSingleProductCards,
+    partialViewConfig,
   } = floatingChatConfig;
 
   const {
@@ -95,6 +96,8 @@ export const FloatingChat = ({
     }
   };
 
+  const partialViewDisabled = partialViewConfig?.disabled ?? false;
+
   const {
     modalSheetControl,
     maxSwipeableViewHeight,
@@ -110,7 +113,7 @@ export const FloatingChat = ({
     shouldShowHeader,
     isFullView,
     isPartialView,
-  } = useSnapSetup({ isFloatingChatOpen });
+  } = useSnapSetup({ isFloatingChatOpen, partialViewDisabled });
 
   const { showScrollButton, scrollToBottom, isFloatingLayout } = useScrollToBottom({
     messagesRef: chatMessagesRef,

package/src/components/FloatingChat/hooks/useSnapSetup.ts

@@ -24,16 +24,19 @@ export interface UseSnapSetupReturn {
   snap100Percent: number;
 
   shouldShowHeader: boolean;
-  shouldShowScrolled: boolean;
   isFullView: boolean;
   isPartialView: boolean;
 }
 
 export interface UseSnapSetupProps {
   isFloatingChatOpen: boolean;
+  partialViewDisabled?: boolean;
 }
 
-export const useSnapSetup = ({ isFloatingChatOpen }: UseSnapSetupProps): UseSnapSetupReturn => {
+export const useSnapSetup = ({
+  isFloatingChatOpen,
+  partialViewDisabled,
+}: UseSnapSetupProps): UseSnapSetupReturn => {
   const maxSwipeableViewHeight = 89;
   const modalSheetControl = useRef<ModalSheetControl>(null);
   const { viewportWidth } = useCheckIsMobile();
@@ -46,8 +49,12 @@ export const useSnapSetup = ({ isFloatingChatOpen }: UseSnapSetupProps): UseSnap
       ?.selectedCustomizeOption,
   );
 
-  const snaps = shouldAutoExpand ? [43, 100] : [0, 43, 100];
-  const initialSnap = 1;
+  const snaps = (() => {
+    if (partialViewDisabled) return shouldAutoExpand ? [100] : [0, 100];
+    return shouldAutoExpand ? [43, 100] : [0, 43, 100];
+  })();
+  const partialViewDisabledValue = shouldAutoExpand ? 0 : 1;
+  const initialSnap = partialViewDisabled ? partialViewDisabledValue : 1;
 
   const [currentSnapPercentage, setCurrentSnapPercentage] = useState<number>(
     snaps[initialSnap] || 43,

package/src/components/MarkdownProcessor/MarkdownProcessor.tsx

@@ -1,21 +1,14 @@
 import { useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import rehypeRaw from 'rehype-raw';
 import { MarkdownProcessorProps } from './types/types';
 import { MarkdownProcessorComponents } from './components';
-import {
-  createMarkdownParagraphComponent,
-  createMarkdownSubscriptComponent,
-} from './utils/functions';
+import { createMarkdownParagraphComponent } from './utils/functions';
 
 export const MarkdownProcessor = ({
   content,
   clampParagraphs = undefined,
   textColor,
   textVariant,
-  subTextVariant,
-  subTextColor,
 }: MarkdownProcessorProps) => {
   const processedContent = content.replace(/<br\s*[\\/]?>/gi, '\n\n');
 
@@ -26,18 +19,9 @@ export const MarkdownProcessor = ({
       ol: MarkdownProcessorComponents.MarkdownOrderedList,
       a: MarkdownProcessorComponents.MarkdownLink,
       p: createMarkdownParagraphComponent({ clampParagraphs, textColor, textVariant }),
-      sub: createMarkdownSubscriptComponent({ subTextVariant, subTextColor }),
     }),
-    [clampParagraphs, textColor, textVariant, subTextVariant, subTextColor],
+    [clampParagraphs, textColor, textVariant],
   );
 
-  return (
-    <ReactMarkdown
-      remarkPlugins={[remarkGfm]}
-      rehypePlugins={[rehypeRaw]}
-      components={components}
-    >
-      {processedContent}
-    </ReactMarkdown>
-  );
+  return <ReactMarkdown components={components}>{processedContent}</ReactMarkdown>;
 };

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/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/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 = ({
@@ -40,6 +41,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) => (
@@ -71,28 +81,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/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>
-);