@envive-ai/react-toolkit-v3 0.3.18 → 0.3.19

package/src/components/FloatingChat/FloatingChat.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import {
   ChatElementDisplayLocationV3,
@@ -21,8 +21,8 @@ import { PromptButtonVariant } from '../PromptButton';
 import { PromptCarousel, PromptCarouselRows, usePromptCarouselAnalytics } from '../PromptCarousel';
 import { WelcomeMessage } from '../WelcomeMessage/WelcomeMessage';
 import { SparkleIconColor } from '../WelcomeMessage/types/types';
-import { FloatingChatComponents, ModalSheet } from './components';
 import { useChatSuggestions } from './hooks/useChatSuggestions';
+import { useProductResultsView } from './hooks/useProductResultsView';
 import { useScrollToBottom } from './hooks/useScrollToBottom';
 import { useSnapSetup } from './hooks/useSnapSetup';
 
@@ -31,7 +31,9 @@ import { resolveTheme } from '../utils/resolveTheme';
 import { useFilteredChatMessages } from './hooks/useFilteredChatMessages';
 import { Unit } from './hooks/useSnapCalculator';
 import { FloatingChatProps } from './types/types';
-import { getCleanProducts } from './utils/functions';
+import { getCleanProducts, getSearchQueryFromMessageBlock } from './utils/functions';
+import { FloatingChatComponents, ModalSheet } from './components';
+import { SalesAgentProductCardProps } from '../SalesAgentProductCard/types/types';
 
 export const FloatingChat = ({
   id,
@@ -80,6 +82,19 @@ export const FloatingChat = ({
     rightToggleLabel,
   } = hardcopyContent?.values ?? {};
 
+  const disclaimerTextString = useMemo(() => {
+    if (disclaimerText && typeof disclaimerText === 'string') {
+      return disclaimerText;
+    }
+    if (disclaimerText && Array.isArray(disclaimerText)) {
+      const textString = disclaimerText[0];
+      if (textString && typeof textString === 'string') {
+        return textString;
+      }
+    }
+    return undefined;
+  }, [disclaimerText]);
+
   const { agentName, chatHeaderLogoDarkSrc, chatHeaderLogoLightSrc } = lookAndFeelConfig;
 
   const {
@@ -141,6 +156,15 @@ export const FloatingChat = ({
     isOpen: isFloatingChatOpen,
   });
 
+  const {
+    resultsViewData,
+    setResultsViewData,
+    isResultsView,
+    scrollContainerRef,
+    isResultsViewRef,
+    handleBackToChat,
+  } = useProductResultsView({ scrollToBottom });
+
   useEffect(() => {
     if (isFloatingChatOpen) {
       trackWidgetInteraction({
@@ -182,6 +206,21 @@ export const FloatingChat = ({
       modalSheetControl,
     });
 
+  const handleProductCardClick = (product: SalesAgentProductCardProps) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.FLOATING_CHAT,
+        widget_interaction: WidgetInteractionType.PRODUCT_CARD_CLICKED,
+        widget_interaction_data: {
+          product_card_clicked: {
+            product_id: product.id,
+          },
+        },
+      },
+    });
+  };
+
   const header = (
     <ChatHeader
       logoDark={chatHeaderLogoDarkSrc}
@@ -254,6 +293,7 @@ export const FloatingChat = ({
         });
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
+        handleBackToChat();
       }}
       textFieldPlaceholderText={chatFooterTextFieldPlaceholderText as string}
       promptSuggestions={
@@ -269,6 +309,7 @@ export const FloatingChat = ({
 
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
+        handleBackToChat();
       }}
       disabled={isPendingResponse || isResponseStreaming}
       disabledInput={!userQueryInputEnabled}
@@ -291,15 +332,18 @@ export const FloatingChat = ({
   );
 
   const handleExploreAllResults = (firstProductMessageId: string) => {
-    const messageBlock = messages.find(block =>
+    const blockIndex = messages.findIndex(block =>
       block.some(msg => msg.type === MessageType.Product && msg.id === firstProductMessageId),
     );
-    const productMessages = messageBlock?.filter(msg => msg.type === MessageType.Product) ?? [];
+    if (blockIndex < 0) return;
+
+    const messageBlock = messages[blockIndex];
+    const productMessages = messageBlock.filter(msg => msg.type === MessageType.Product);
     const products = getCleanProducts(productMessages);
-    console.log('[INFO] [spiffy-ai] Explore All Results clicked', {
-      firstProductMessageId,
-      products,
-    });
+    if (products.length === 0) return;
+
+    const searchQuery = getSearchQueryFromMessageBlock(messages, blockIndex);
+    setResultsViewData({ products, searchQuery });
   };
 
   const chatMessages = (
@@ -321,6 +365,19 @@ export const FloatingChat = ({
     />
   );
 
+  const middleContent = (
+    <FloatingChatComponents.SlideChatContent
+      isResultsView={isResultsView}
+      isResultsViewRef={isResultsViewRef}
+      resultsViewData={resultsViewData}
+      onBackToChat={handleBackToChat}
+      onProductCardClick={handleProductCardClick}
+      theme={finalTheme}
+      chatMessages={chatMessages}
+      scrollToBottom={scrollToBottom}
+    />
+  );
+
   const answerSuggestionsComponent = (
     <PromptCarousel
       className="envive-tw-flex envive-tw-justify-end envive-tw-p-4 [&>div>div]:envive-tw-items-end"
@@ -354,20 +411,19 @@ export const FloatingChat = ({
       theme={finalTheme}
       header={header}
       footer={footer}
-      welcomeMessage={welcomeMessage}
-      chatMessages={chatMessages}
-      answerSuggestions={showAnswerSuggestions ? answerSuggestionsComponent : undefined}
+      welcomeMessage={isResultsView ? null : welcomeMessage}
+      chatMessages={middleContent}
+      answerSuggestions={showAnswerSuggestions ? answerSuggestionsComponent : null}
       scrollToBottomButton={
-        showScrollButton ? (
+        !isResultsView && showScrollButton ? (
           <FloatingChatComponents.ScrollToBottomButton onClick={handleScrollToBottom} />
-        ) : undefined
+        ) : null
       }
       disclaimer={
-        disclaimerText && typeof disclaimerText === 'string' ? (
-          <Disclaimer disclaimerMarkdown={disclaimerText} />
-        ) : undefined
+        disclaimerTextString ? <Disclaimer disclaimerMarkdown={disclaimerTextString} /> : null
       }
       debugBar={debugBar}
+      scrollContainerRef={scrollContainerRef}
     />
   );
 
@@ -380,20 +436,19 @@ export const FloatingChat = ({
       theme={finalTheme}
       header={mobileHeader}
       footer={footer}
-      welcomeMessage={welcomeMessage}
-      chatMessages={chatMessages}
-      answerSuggestions={showAnswerSuggestions ? answerSuggestionsComponent : undefined}
+      welcomeMessage={isResultsView ? null : welcomeMessage}
+      chatMessages={middleContent}
+      answerSuggestions={showAnswerSuggestions ? answerSuggestionsComponent : null}
       scrollToBottomButton={
-        showScrollButton ? (
+        !isResultsView && showScrollButton ? (
           <FloatingChatComponents.ScrollToBottomButton onClick={handleScrollToBottom} />
-        ) : undefined
+        ) : null
       }
       disclaimer={
-        disclaimerText && typeof disclaimerText === 'string' ? (
-          <Disclaimer disclaimerMarkdown={disclaimerText} />
-        ) : undefined
+        disclaimerTextString ? <Disclaimer disclaimerMarkdown={disclaimerTextString} /> : null
       }
       isFloatingFooterLayout={isFloatingLayout}
+      scrollContainerRef={scrollContainerRef}
     />
   );
 

package/src/components/FloatingChat/components/Layout.tsx

@@ -20,6 +20,8 @@ type LayoutProps = {
   disclaimer?: React.ReactNode;
   isFloatingFooterLayout?: boolean;
   debugBar?: React.ReactNode;
+  /** Ref for the scrollable content container (used for programmatic scroll on view changes) */
+  scrollContainerRef?: React.RefObject<HTMLDivElement | null>;
 };
 
 export const Layout = ({
@@ -37,6 +39,7 @@ export const Layout = ({
   disclaimer,
   isFloatingFooterLayout = false,
   debugBar,
+  scrollContainerRef,
 }: LayoutProps) => {
   const finalTheme = resolveTheme(theme);
   const hasWelcomeMessage = isValidElement(welcomeMessage);
@@ -58,7 +61,10 @@ export const Layout = ({
       >
         {header && <div className="envive-tw-flex-shrink-0 envive-tw-leading-[0]">{header}</div>}
 
-        <div className="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">
+        <div
+          ref={scrollContainerRef}
+          className="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"
+        >
           <Stack
             className="envive-tw-h-full"
             direction="column"

package/src/components/FloatingChat/components/ResultsGridView.tsx

@@ -0,0 +1,93 @@
+import { Theme } from '../../../../tokens/theme/theme';
+import { SalesAgentProductCard } from '../../SalesAgentProductCard/SalesAgentProductCard';
+import {
+  SalesAgentProductCardProps,
+  SalesAgentProductCardVariant,
+} from '../../SalesAgentProductCard/types/types';
+import { resolveTheme } from '../../utils/resolveTheme';
+import { Stack } from '../../Stack';
+import { Typography, TypographyColor, TypographyVariant } from '../../Typography';
+
+export interface ResultsGridViewProps {
+  theme: Theme;
+  searchQuery: string;
+  products: SalesAgentProductCardProps[];
+  onBackToChat: () => void;
+  onProductCardClick?: (product: SalesAgentProductCardProps) => void;
+}
+
+export const ResultsGridView = ({
+  theme,
+  searchQuery,
+  products,
+  onBackToChat,
+  onProductCardClick,
+}: ResultsGridViewProps) => {
+  const finalTheme = resolveTheme(theme);
+
+  const forceShowCurrentPriceSpace = products.some(
+    product => product.currentPrice && product.previousPrice !== product.currentPrice,
+  );
+
+  return (
+    <Stack
+      direction="column"
+      gap="4"
+      className="envive-tw-pb-4 envive-tw-pl-4 envive-tw-pr-4"
+    >
+      <div className="envive-tw-top-0 envive-tw-sticky envive-tw-z-10 envive-tw-mb-2 envive-tw-bg-background-light envive-tw-pb-2 envive-tw-pt-2">
+        <button
+          type="button"
+          onClick={onBackToChat}
+          className="envive-tw-flex envive-tw-items-center envive-tw-gap-1 envive-tw-rounded-global-custom envive-tw-border envive-tw-border-border-medium envive-tw-bg-background-light envive-tw-p-2 envive-tw-shadow-sm hover:envive-tw-border-border-dark"
+          aria-label="Back to Chat"
+        >
+          <span
+            className="envive-tw-text-[--envive-colors-text-primary]"
+            aria-hidden
+          >
+            ←
+          </span>
+          <Typography
+            variant={TypographyVariant.B3_MD}
+            color={TypographyColor.TEXT_PRIMARY}
+          >
+            Back to Chat
+          </Typography>
+        </button>
+      </div>
+
+      {searchQuery && (
+        <Typography
+          variant={TypographyVariant.B3_MD}
+          color={TypographyColor.TEXT_PRIMARY}
+          className="envive-tw-mb-2"
+        >
+          Results for &quot;{searchQuery}&quot;
+        </Typography>
+      )}
+
+      {/* Product grid */}
+      <div className="envive-tw-grid envive-tw-grid-cols-2 envive-tw-gap-4">
+        {products.map((product, index) => (
+          <SalesAgentProductCard
+            key={product.id ?? `product-${index}`}
+            variant={SalesAgentProductCardVariant.LARGE}
+            productName={product.productName}
+            currentPrice={product.currentPrice}
+            previousPrice={product.previousPrice}
+            pricePrefix={product.pricePrefix ?? '$'}
+            forceShowCurrentPriceSpace={forceShowCurrentPriceSpace}
+            rate={product.rate}
+            numberOfReviews={product.numberOfReviews}
+            image={product.image}
+            url={product.url}
+            target="_blank"
+            theme={finalTheme}
+            onClick={() => onProductCardClick?.(product)}
+          />
+        ))}
+      </div>
+    </Stack>
+  );
+};

package/src/components/FloatingChat/components/SlideChatContent.tsx

@@ -0,0 +1,72 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import { Theme } from '../../../../tokens/theme/theme';
+import { SalesAgentProductCardProps } from '../../SalesAgentProductCard/types/types';
+import { ResultsGridView } from './ResultsGridView';
+import type { ResultsViewData } from '../hooks/useProductResultsView';
+
+type SlideChatContentProps = {
+  isResultsView: boolean;
+  isResultsViewRef: React.MutableRefObject<boolean>;
+  resultsViewData: ResultsViewData | null;
+  onBackToChat: () => void;
+  onProductCardClick: (product: SalesAgentProductCardProps) => void;
+  theme: Theme;
+  chatMessages: React.ReactNode;
+  scrollToBottom: () => void;
+};
+
+const slideVariants = {
+  // Chat → Grid: chat exits left (-100%), grid enters from right (100%)
+  // Grid → Chat: grid exits right (100%), chat enters from left (-100%)
+  enter: (isResults: boolean) => ({ x: isResults ? '100%' : '-100%' }),
+  center: { x: 0 },
+  exit: (isResults: boolean) => ({ x: isResults ? '100%' : '-100%' }),
+};
+
+export const SlideChatContent = ({
+  isResultsView,
+  isResultsViewRef,
+  resultsViewData,
+  onBackToChat,
+  onProductCardClick,
+  theme,
+  chatMessages,
+  scrollToBottom,
+}: SlideChatContentProps) => {
+  const resultsViewContent = resultsViewData && (
+    <ResultsGridView
+      theme={theme}
+      searchQuery={resultsViewData.searchQuery}
+      products={resultsViewData.products}
+      onBackToChat={onBackToChat}
+      onProductCardClick={onProductCardClick}
+    />
+  );
+
+  return (
+    <div className="envive-tw-relative envive-tw-min-h-[200px] envive-tw-w-full envive-tw-overflow-hidden">
+      <AnimatePresence
+        initial={false}
+        mode="wait"
+      >
+        <motion.div
+          key={isResultsView ? 'results' : 'chat'}
+          custom={isResultsView}
+          variants={slideVariants}
+          initial="enter"
+          animate="center"
+          exit="exit"
+          transition={{ duration: 0.3, ease: 'easeInOut' }}
+          onAnimationComplete={() => {
+            if (!isResultsViewRef.current) {
+              scrollToBottom();
+            }
+          }}
+          className="envive-tw-w-full"
+        >
+          {isResultsView ? resultsViewContent : chatMessages}
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+};

package/src/components/FloatingChat/components/index.ts

@@ -1,4 +1,6 @@
 import { Layout } from './Layout';
+import { ResultsGridView } from './ResultsGridView';
+import { SlideChatContent } from './SlideChatContent';
 import { UserMessage } from './UserMessage';
 import { AgentMessage } from './AgentMessage';
 import { ChatMessages } from './ChatMessages';
@@ -11,6 +13,8 @@ import { MessageDivider } from './MessageDivider';
 
 export const FloatingChatComponents = {
   Layout,
+  ResultsGridView,
+  SlideChatContent,
   UserMessage,
   AgentMessage,
   ChatMessages,

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

@@ -0,0 +1,49 @@
+import { useEffect, useRef, useState } from 'react';
+import { getCleanProducts } from '../utils/functions';
+
+export type ResultsViewData = {
+  products: ReturnType<typeof getCleanProducts>;
+  searchQuery: string;
+};
+
+type UseResultsViewProps = {
+  scrollToBottom: () => void;
+};
+
+export const useProductResultsView = ({ scrollToBottom }: UseResultsViewProps) => {
+  const [resultsViewData, setResultsViewData] = useState<ResultsViewData | null>(null);
+  const isResultsView = resultsViewData !== null;
+
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const isResultsViewRef = useRef(isResultsView);
+  isResultsViewRef.current = isResultsView;
+
+  const handleBackToChat = () => {
+    setResultsViewData(null);
+  };
+
+  // Scroll to top when navigating to results view
+  useEffect(() => {
+    if (isResultsView && scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  }, [isResultsView]);
+
+  // Scroll to bottom when navigating back to chat
+  const prevIsResultsViewRef = useRef(isResultsView);
+  useEffect(() => {
+    if (prevIsResultsViewRef.current && !isResultsView) {
+      scrollToBottom();
+    }
+    prevIsResultsViewRef.current = isResultsView;
+  }, [isResultsView, scrollToBottom]);
+
+  return {
+    resultsViewData,
+    setResultsViewData,
+    isResultsView,
+    scrollContainerRef,
+    isResultsViewRef,
+    handleBackToChat,
+  };
+};

package/src/components/FloatingChat/utils/functions.ts

@@ -121,6 +121,28 @@ export const getCleanOrders = (messages: Message[]) => {
 
 export const MOST_RELEVANT_DISPLAY_LIMIT = 8;
 
+/**
+ * Extracts the search query from a message block (or previous blocks) that led to product results.
+ * Looks for QueryTyped (metadata.content) or SuggestionClicked (metadata.suggestionContent).
+ */
+export const getSearchQueryFromMessageBlock = (
+  messages: Message[][],
+  productBlockIndex: number,
+): string => {
+  for (let i = productBlockIndex; i >= 0; i -= 1) {
+    const block = messages[i];
+    const queryTyped = block.find(msg => msg.type === MessageType.QueryTyped);
+    if (queryTyped && 'content' in queryTyped.metadata) {
+      return (queryTyped.metadata as { content?: string }).content ?? '';
+    }
+    const suggestionClicked = block.find(msg => msg.type === MessageType.SuggestionClicked);
+    if (suggestionClicked && 'suggestionContent' in suggestionClicked.metadata) {
+      return (suggestionClicked.metadata as { suggestionContent?: string }).suggestionContent ?? '';
+    }
+  }
+  return '';
+};
+
 export const getProductCarouselDisplayInfo = <T>(
   products: T[],
   numberOfProducts?: number,

package/src/logging/logger.ts

@@ -1,20 +1,45 @@
 /* eslint-disable no-console */
 
 class Logger {
-  static logInfo(message: string, ...args: unknown[]): void {
-    console.info(`INFO: ${message}`, ...args);
+  private readonly caller: string;
+
+  /* Creates a new Logger instance.
+   * @param caller - The caller of the logger.
+   */
+  constructor(caller: string) {
+    this.caller = caller;
+  }
+
+  static getTimestamp(): string {
+    return new Date().toISOString();
+  }
+
+  logInfo(message: string, ...args: unknown[]): void {
+    console.info(
+      `INFO: [envive-ai] ${Logger.getTimestamp()} - ${this.caller} - ${message}`,
+      ...args,
+    );
   }
 
-  static logDebug(message: string, ...args: unknown[]): void {
-    console.debug(`DEBUG: ${message}`, ...args);
+  logDebug(message: string, ...args: unknown[]): void {
+    console.debug(
+      `DEBUG: [envive-ai] ${Logger.getTimestamp()} - ${this.caller} - ${message}`,
+      ...args,
+    );
   }
 
-  static logError(message: string, error: unknown | undefined, ...args: unknown[]): void {
-    console.error(`ERROR: ${message} error=${error}`, args);
+  logError(message: string, error: unknown | undefined, ...args: unknown[]): void {
+    console.error(
+      `ERROR: [envive-ai] ${Logger.getTimestamp()} - ${this.caller} - ${message} error=${error}`,
+      args,
+    );
   }
 
-  static logWarn(message: string, error: unknown | undefined, ...args: unknown[]): void {
-    console.warn(`WARN: ${message} error=${error}`, args);
+  logWarn(message: string, error: unknown | undefined, ...args: unknown[]): void {
+    console.warn(
+      `WARN: [envive-ai] ${Logger.getTimestamp()} - ${this.caller} - ${message} error=${error}`,
+      args,
+    );
   }
 }