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

package/src/components/FloatingChat/FloatingChat.tsx

@@ -1,6 +1,9 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import {
+  ChatElementDisplayLocationV3,
+  MessageType,
+} from '@envive-ai/react-hooks/application/models';
 import { motion } from 'framer-motion';
 import {
   WidgetInteractionComponent,
@@ -18,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';
 
@@ -28,6 +31,9 @@ import { resolveTheme } from '../utils/resolveTheme';
 import { useFilteredChatMessages } from './hooks/useFilteredChatMessages';
 import { Unit } from './hooks/useSnapCalculator';
 import { FloatingChatProps } from './types/types';
+import { getCleanProducts, getSearchQueryFromMessageBlock } from './utils/functions';
+import { FloatingChatComponents, ModalSheet } from './components';
+import { SalesAgentProductCardProps } from '../SalesAgentProductCard/types/types';
 
 export const FloatingChat = ({
   id,
@@ -76,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 {
@@ -137,6 +156,15 @@ export const FloatingChat = ({
     isOpen: isFloatingChatOpen,
   });
 
+  const {
+    resultsViewData,
+    setResultsViewData,
+    isResultsView,
+    scrollContainerRef,
+    isResultsViewRef,
+    handleBackToChat,
+  } = useProductResultsView({ scrollToBottom });
+
   useEffect(() => {
     if (isFloatingChatOpen) {
       trackWidgetInteraction({
@@ -178,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}
@@ -250,6 +293,7 @@ export const FloatingChat = ({
         });
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
+        handleBackToChat();
       }}
       textFieldPlaceholderText={chatFooterTextFieldPlaceholderText as string}
       promptSuggestions={
@@ -265,6 +309,7 @@ export const FloatingChat = ({
 
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
+        handleBackToChat();
       }}
       disabled={isPendingResponse || isResponseStreaming}
       disabledInput={!userQueryInputEnabled}
@@ -286,6 +331,21 @@ export const FloatingChat = ({
     />
   );
 
+  const handleExploreAllResults = (firstProductMessageId: string) => {
+    const blockIndex = messages.findIndex(block =>
+      block.some(msg => msg.type === MessageType.Product && msg.id === firstProductMessageId),
+    );
+    if (blockIndex < 0) return;
+
+    const messageBlock = messages[blockIndex];
+    const productMessages = messageBlock.filter(msg => msg.type === MessageType.Product);
+    const products = getCleanProducts(productMessages);
+    if (products.length === 0) return;
+
+    const searchQuery = getSearchQueryFromMessageBlock(messages, blockIndex);
+    setResultsViewData({ products, searchQuery });
+  };
+
   const chatMessages = (
     <FloatingChatComponents.ChatMessages
       theme={finalTheme}
@@ -301,6 +361,20 @@ export const FloatingChat = ({
       showVerifiedBuyer={showVerifiedBuyer}
       onFormResponseSubmitted={onFormResponseSubmitted}
       parentWidget={WidgetInteractionComponent.FLOATING_CHAT}
+      onExploreAllResults={handleExploreAllResults}
+    />
+  );
+
+  const middleContent = (
+    <FloatingChatComponents.SlideChatContent
+      isResultsView={isResultsView}
+      isResultsViewRef={isResultsViewRef}
+      resultsViewData={resultsViewData}
+      onBackToChat={handleBackToChat}
+      onProductCardClick={handleProductCardClick}
+      theme={finalTheme}
+      chatMessages={chatMessages}
+      scrollToBottom={scrollToBottom}
     />
   );
 
@@ -337,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}
     />
   );
 
@@ -363,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/AgentMessage.tsx

@@ -42,6 +42,7 @@ export interface AgentMessageProps {
   showVerifiedBuyer?: boolean;
   onFormResponseSubmitted?: (formResponse: FormSubmittedAttributes) => void;
   parentWidget: WidgetInteractionComponent;
+  onExploreAllResults: (firstProductMessageId: string) => void;
 }
 
 export const AgentMessage = ({
@@ -56,6 +57,7 @@ export const AgentMessage = ({
   showVerifiedBuyer = false,
   onFormResponseSubmitted,
   parentWidget,
+  onExploreAllResults,
 }: AgentMessageProps) => {
   const handleFormSubmittedAtomFallback = useSetAtom(handleFormSubmittedAtom);
   const finalTheme = resolveTheme(theme);
@@ -167,6 +169,11 @@ export const AgentMessage = ({
       return null;
     }
 
+    const handleExploreAllResults = () => {
+      const firstProductMessageId = messages[0]?.id ?? '';
+      onExploreAllResults?.(firstProductMessageId);
+    };
+
     return (
       <SalesAgentProductCardsCarousel
         hideNavigation={products.length === 1}
@@ -174,6 +181,7 @@ export const AgentMessage = ({
         numberOfProducts={products.length}
         theme={finalTheme}
         onProductCardClick={handleProductCardClick}
+        onExploreAllResults={handleExploreAllResults}
       />
     );
   }

package/src/components/FloatingChat/components/ChatMessages.tsx

@@ -32,6 +32,7 @@ export interface ChatMessagesProps {
   showVerifiedBuyer?: boolean;
   onFormResponseSubmitted?: (formResponse: FormSubmittedAttributes) => void;
   parentWidget: WidgetInteractionComponent;
+  onExploreAllResults: (firstProductMessageId: string) => void;
 }
 
 export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
@@ -50,6 +51,7 @@ export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
       showVerifiedBuyer,
       onFormResponseSubmitted,
       parentWidget,
+      onExploreAllResults,
     },
     ref,
   ) => {
@@ -143,6 +145,7 @@ export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
                       showVerifiedBuyer={showVerifiedBuyer}
                       onFormResponseSubmitted={onFormResponseSubmitted}
                       parentWidget={parentWidget}
+                      onExploreAllResults={onExploreAllResults}
                     />
                   );
                 }

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/ModalSheet.tsx

@@ -24,7 +24,7 @@ interface ModalSheetProps {
   animation?: ValueAnimationTransition;
   onClose: () => void;
   onSnap?: (snap: number) => void;
-  controlRef?: React.MutableRefObject<ModalSheetControl | undefined>;
+  controlRef?: React.RefObject<ModalSheetControl | undefined>;
   disableDrag?: boolean;
 }
 

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/SalesAgentBadgeContent.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import classNames from 'classnames';
+import { ArrowIcon } from '../../Carousel/components/ArrowIcon';
+import { Stack } from '../../Stack/Stack';
+import { Typography, TypographyColor, TypographyVariant } from '../../Typography';
+import { MOST_RELEVANT_DISPLAY_LIMIT } from '../utils/functions';
+
+export interface ExploreAllResultsBadgeProps {
+  totalProducts: number;
+  displayLimit?: number;
+  onExploreAllResults: () => void;
+}
+
+export const SalesAgentBadgeContent = ({
+  totalProducts,
+  displayLimit = MOST_RELEVANT_DISPLAY_LIMIT,
+  onExploreAllResults,
+}: ExploreAllResultsBadgeProps) => {
+  return (
+    <Stack
+      direction="row"
+      justify="between"
+      align="center"
+      gap="1"
+      className="envive-tw-w-full envive-tw-rounded-global-custom envive-tw-p-2"
+    >
+      <Typography
+        variant={TypographyVariant.B3_MD}
+        color={TypographyColor.TEXT_PRIMARY}
+      >
+        Most Relevant ({displayLimit})
+      </Typography>
+      <button
+        type="button"
+        onClick={onExploreAllResults}
+        className={classNames(
+          'envive-tw-flex envive-tw-items-center envive-tw-gap-1',
+          'envive-tw-bg-background-secondary envive-tw-p-2',
+          'envive-tw-rounded-global-custom envive-tw-border envive-tw-border-border-medium',
+          'hover:envive-tw-border-border-dark',
+        )}
+        aria-label={`Explore all ${totalProducts} results`}
+      >
+        <Typography
+          variant={TypographyVariant.B3_MD}
+          color={TypographyColor.TEXT_LINK}
+        >
+          Explore All Results ({totalProducts})
+        </Typography>
+        <ArrowIcon direction="right" />
+      </button>
+    </Stack>
+  );
+};
+
+export interface GetBadgeContentAndLabelParams {
+  totalProducts: number;
+  areProductsMoreThanDisplayLimit: boolean;
+  onExploreAllResults?: () => void;
+  displayLimit?: number;
+}
+
+export interface BadgeContentAndLabel {
+  badgeContent: React.ReactNode;
+  badgeLabel: string | null;
+}
+
+export const getBadgeContentAndLabel = ({
+  totalProducts,
+  areProductsMoreThanDisplayLimit,
+  onExploreAllResults,
+  displayLimit = MOST_RELEVANT_DISPLAY_LIMIT,
+}: GetBadgeContentAndLabelParams): BadgeContentAndLabel => {
+  const badgeContent = areProductsMoreThanDisplayLimit ? (
+    <SalesAgentBadgeContent
+      totalProducts={totalProducts}
+      displayLimit={displayLimit}
+      onExploreAllResults={onExploreAllResults}
+    />
+  ) : null;
+
+  const badgeLabel =
+    !areProductsMoreThanDisplayLimit && totalProducts > 1 ? `${totalProducts} Products` : null;
+
+  return { badgeContent, badgeLabel };
+};

package/src/components/FloatingChat/components/SalesAgentProductCardsCarousel.tsx

@@ -6,6 +6,8 @@ import {
   SalesAgentProductCardVariant,
 } from '../../SalesAgentProductCard/types/types';
 import { resolveTheme } from '../../utils/resolveTheme';
+import { getProductCarouselDisplayInfo } from '../utils/functions';
+import { getBadgeContentAndLabel } from './SalesAgentBadgeContent';
 
 export interface SalesAgentProductCardsCarouselProps {
   theme: Theme;
@@ -14,6 +16,8 @@ export interface SalesAgentProductCardsCarouselProps {
   products: SalesAgentProductCardProps[];
   variant?: SalesAgentProductCardVariant;
   onProductCardClick?: (product: SalesAgentProductCardProps) => void;
+  /** Called when user clicks "Explore All Results" (only relevant when products.length > 8) */
+  onExploreAllResults?: () => void;
 }
 
 export const SalesAgentProductCardsCarousel = ({
@@ -23,23 +27,30 @@ export const SalesAgentProductCardsCarousel = ({
   numberOfProducts,
   variant = SalesAgentProductCardVariant.LARGE,
   onProductCardClick,
+  onExploreAllResults,
 }: SalesAgentProductCardsCarouselProps) => {
   const finalTheme = resolveTheme(theme);
+  const { totalProducts, areProductsMoreThanDisplayLimit, displayedProducts } =
+    getProductCarouselDisplayInfo(products, numberOfProducts);
 
-  const forceShowCurrentPriceSpace = products.some(
+  const forceShowCurrentPriceSpace = displayedProducts.some(
     product => product.currentPrice && product.previousPrice !== product.currentPrice,
   );
 
+  const { badgeContent, badgeLabel } = getBadgeContentAndLabel({
+    totalProducts,
+    areProductsMoreThanDisplayLimit,
+    onExploreAllResults,
+  });
+
   return (
     <Carousel
       hideNavigation={hideNavigation}
-      badgeLabel={
-        // TODO: Get hard copy
-        numberOfProducts && numberOfProducts > 1 ? `${numberOfProducts} Products` : undefined
-      }
-      elements={products.map(product => (
+      badgeContent={badgeContent}
+      badgeLabel={badgeLabel}
+      elements={displayedProducts.map((product, index) => (
         <SalesAgentProductCard
-          key={product.id}
+          key={product.id ?? `product-${index}`}
           variant={variant}
           productName={product.productName}
           currentPrice={product.currentPrice}

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,
@@ -23,4 +27,3 @@ export const FloatingChatComponents = {
 };
 
 export { ModalSheet } from './ModalSheet';
-export type { ModalSheetControl } from './ModalSheet';

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

@@ -1,7 +1,7 @@
 import { RefObject, useMemo } from 'react';
 import { Message } from '@envive-ai/react-hooks/application/models';
 import { useMessageFilter } from '@envive-ai/react-hooks/hooks/MessageFilter';
-import type { ModalSheetControl } from '../types';
+import type { ModalSheetControl } from '../snapConstants';
 
 export interface UseFilteredChatMessagesProps {
   messages: Message[][];

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