feature(search-component): add highlted item when in previewTopicId mode

cdxker · cdxker · commit b31f4176db9c · 2025-04-07T22:58:31.000-07:00
diff --git a/clients/search-component/src/TrieveModal/Chat/ChatMode.tsx b/clients/search-component/src/TrieveModal/Chat/ChatMode.tsx
@@ -11,7 +11,8 @@ import { InlineChatHeader } from "./InlineChatHeader";
 import { ChatInput } from "./ChatInput";
 
 export const ChatMode = () => {
-  const { props, modalRef, minHeight, resetHeight, addHeight } = useModalState();
+  const { props, modalRef, minHeight, resetHeight, addHeight } =
+    useModalState();
   const { messages } = useChatState();
 
   const actualChatRef = useRef<HTMLDivElement>(null);
@@ -101,8 +102,9 @@ export const ChatMode = () => {
 
   return (
     <Suspense>
-      {props.previewTopicId == undefined && 
-      <InlineChatHeader resetHeight={resetHeight} />}
+      {props.previewTopicId == undefined && (
+        <InlineChatHeader resetHeight={resetHeight} />
+      )}
       <div
         ref={modalRef}
         className="chat-modal-wrapper tv-justify-items-stretch tv-flex-grow tv-pt-3 tv-pb-2 tv-px-2 tv-relative tv-overflow-y-auto tv-flex tv-overflow-x-hidden"
diff --git a/clients/search-component/src/TrieveModal/Chat/FollowupQueries.tsx b/clients/search-component/src/TrieveModal/Chat/FollowupQueries.tsx
@@ -19,7 +19,9 @@ export const FollowupQueries = () => {
   const handleFollowupQuery = async (q: string) => {
     askQuestion(q);
 
-    const requestId = messages[messages.length - 1]?.queryId ?? "00000000-0000-0000-0000-000000000000";
+    const requestId =
+      messages[messages.length - 1]?.queryId ??
+      "00000000-0000-0000-0000-000000000000";
 
     await trieveSDK.sendAnalyticsEvent({
       event_name: `site-followup_query`,
@@ -35,16 +37,17 @@ export const FollowupQueries = () => {
         request_type: "rag",
       },
     });
-  }
+  };
 
   return (
     <div ref={parent} className="followup-questions">
       {suggestedQuestions?.map((q) => (
         <button
           onClick={() => handleFollowupQuery(q)}
           key={q}
-          className={`followup-question ${isLoadingSuggestedQueries ? "loading" : ""
-            }`}
+          className={`followup-question ${
+            isLoadingSuggestedQueries ? "loading" : ""
+          }`}
         >
           <SparklesIcon className="followup-icon" />
           {q}
diff --git a/clients/search-component/src/TrieveModal/Chat/ResponseMessage.tsx b/clients/search-component/src/TrieveModal/Chat/ResponseMessage.tsx
@@ -90,7 +90,7 @@ export const Message = ({
   idx: number;
   message: Message;
 }) => {
-  const { rateChatCompletion, messages } = useChatState();
+  const { rateChatCompletion, messages, productsWithClicks } = useChatState();
   const [positive, setPositive] = React.useState<boolean | null>(null);
   const [copied, setCopied] = React.useState<boolean>(false);
   const { props, trieveSDK, fingerprint } = useModalState();
@@ -152,9 +152,13 @@ export const Message = ({
     .map((item, index) => {
       const { title, descriptionHtml } = guessTitleAndDesc(item);
 
+      const clicked =
+        productsWithClicks?.find(
+          (product) => product.chunk_id === item.chunk.id,
+        ) != undefined;
       return (
         <a
-          className="tv-flex tv-flex-col"
+          className={`tv-flex tv-flex-col ${clicked ? "tv-highlighted-item" : ""}`}
           key={index}
           href={item.link ?? ""}
           target="_blank"
diff --git a/clients/search-component/src/TrieveModal/Search/UploadImage.tsx b/clients/search-component/src/TrieveModal/Search/UploadImage.tsx
@@ -59,7 +59,8 @@ export const UploadImage = () => {
       <button
         onClick={handleClick}
         className={`tv-rounded ${
-          mode === "chat" && "tv-right-9 tv-top-[0.825rem] tv-absolute image-button-container"
+          mode === "chat" &&
+          "tv-right-9 tv-top-[0.825rem] tv-absolute image-button-container"
         } tv-z-20 tv-dark-text-white tv-text-zinc-700`}
         disabled={props.previewTopicId != undefined}
       >
diff --git a/clients/search-component/src/TrieveModal/index.css b/clients/search-component/src/TrieveModal/index.css
@@ -304,6 +304,10 @@ body {
           flex: 0 0 100% 100%;
         }
 
+        &.tv-highlighted-item {
+          background-color: yellow;
+        }
+
         &.yt-anchor {
           @apply tv-text-center;
         }
diff --git a/clients/search-component/src/TrieveModal/index.tsx b/clients/search-component/src/TrieveModal/index.tsx
@@ -20,7 +20,6 @@ import { InferenceFiltersForm } from "./FilterSidebarComponents";
 import { getFingerprint } from "@thumbmarkjs/thumbmarkjs";
 import { createPortal } from "react-dom";
 
-
 const SearchPage = () => {
   const { props } = useModalState();
   if (!props.searchPageProps?.display) return null;
@@ -44,16 +43,22 @@ const SearchPage = () => {
 };
 
 function findCartChanges(oldCart: any, newCart: any) {
-  if (!oldCart.items) return { added: newCart.items.map((item: any) => item.variant_id), removed: [] };
-  const onlyInLeft = (l: any, r: any) => l.filter((li: any) => !r.some((ri: any) => li.key == ri.key));
+  if (!oldCart.items)
+    return {
+      added: newCart.items.map((item: any) => item.variant_id),
+      removed: [],
+    };
+  const onlyInLeft = (l: any, r: any) =>
+    l.filter((li: any) => !r.some((ri: any) => li.key == ri.key));
   const result = {
     added: onlyInLeft(newCart.items, oldCart.items),
     removed: onlyInLeft(oldCart.items, newCart.items),
   };
 
-
   oldCart.items.forEach((oi: any) => {
-    const ni = newCart.items.find((i: any) => i.key == oi.key && i.quantity != oi.quantity);
+    const ni = newCart.items.find(
+      (i: any) => i.key == oi.key && i.quantity != oi.quantity,
+    );
     if (!ni) return;
     const quantity = ni.quantity - oi.quantity;
     const item = { ...ni };
@@ -65,7 +70,6 @@ function findCartChanges(oldCart: any, newCart: any) {
     }
   });
 
-
   return result;
 }
 
@@ -131,29 +135,41 @@ const Modal = () => {
 
           const cartObserver = new PerformanceObserver((list) => {
             list.getEntries().forEach((entry) => {
-              const isValidRequestType = ['xmlhttprequest', 'fetch'].includes((entry as any).initiatorType);
+              const isValidRequestType = ["xmlhttprequest", "fetch"].includes(
+                (entry as any).initiatorType,
+              );
               const isCartChangeRequest = /\/cart\/add\.js/.test(entry.name);
               if (isValidRequestType && isCartChangeRequest) {
                 (async function () {
-                  const oldCart = JSON.parse(localStorage.getItem('trieve-cart') ?? '{}');
-                  const newCart = await fetch((window as any).Shopify.routes.root + 'cart.js')
-                    .then(response => response.json())
-                    .then(data => {
-                      localStorage.setItem('trieve-cart', JSON.stringify(data));
+                  const oldCart = JSON.parse(
+                    localStorage.getItem("trieve-cart") ?? "{}",
+                  );
+                  const newCart = await fetch(
+                    (window as any).Shopify.routes.root + "cart.js",
+                  )
+                    .then((response) => response.json())
+                    .then((data) => {
+                      localStorage.setItem("trieve-cart", JSON.stringify(data));
                       return data;
                     });
 
                   const cartChanges = findCartChanges(oldCart, newCart);
 
-                  const items = cartChanges.added.map((item: any) => item.toString());
+                  const items = cartChanges.added.map((item: any) =>
+                    item.toString(),
+                  );
                   console.log("cartItems", items);
 
                   if (items.length > 0) {
-                    const lastMessage = JSON.parse(window.localStorage.getItem("lastMessage") ?? "{}");
+                    const lastMessage = JSON.parse(
+                      window.localStorage.getItem("lastMessage") ?? "{}",
+                    );
                     let requestId = "00000000-0000-0000-0000-000000000000";
                     for (const id in lastMessage) {
                       const storedItems = lastMessage[id];
-                      if (storedItems.some((item: any) => items.includes(item))) {
+                      if (
+                        storedItems.some((item: any) => items.includes(item))
+                      ) {
                         requestId = id;
                         break;
                       }
@@ -197,28 +213,35 @@ const Modal = () => {
 
                 checkout.addEventListener("click", () => {
                   (async function () {
-                    const checkoutItems = await fetch((window as any).Shopify.routes.root + 'cart.js')
-                      .then(response => response.json())
-                      .then(data => {
+                    const checkoutItems = await fetch(
+                      (window as any).Shopify.routes.root + "cart.js",
+                    )
+                      .then((response) => response.json())
+                      .then((data) => {
                         return data;
                       });
 
+                    const items = checkoutItems.items.map((item: any) => {
+                      const price = item.final_line_price.toString();
+                      return {
+                        tracking_id: item.variant_id.toString(),
+                        revenue: parseFloat(
+                          price.slice(0, -2) + "." + price.slice(-2),
+                        ),
+                      };
+                    });
 
-                    const items = checkoutItems
-                      .items
-                      .map((item: any) => {
-                        const price = item.final_line_price.toString();
-                        return {
-                          tracking_id: item.variant_id.toString(),
-                          revenue: parseFloat(price.slice(0, -2) + "." + price.slice(-2)),
-                        };
-                      });
-
-                    const lastMessage = JSON.parse(window.localStorage.getItem("lastMessage") ?? "{}");
+                    const lastMessage = JSON.parse(
+                      window.localStorage.getItem("lastMessage") ?? "{}",
+                    );
                     let requestId = "00000000-0000-0000-0000-000000000000";
                     for (const id in lastMessage) {
                       const storedItems = lastMessage[id];
-                      if (storedItems.some((item: any) => items.map((i: any) => i.tracking_id).includes(item))) {
+                      if (
+                        storedItems.some((item: any) =>
+                          items.map((i: any) => i.tracking_id).includes(item),
+                        )
+                      ) {
                         requestId = id;
                         break;
                       }
@@ -482,7 +505,7 @@ export const TrieveModalSearch = (props: ModalProps) => {
     document.documentElement.style.setProperty(
       "--tv-prop-brand-font-family",
       props.brandFontFamily ??
-      `Maven Pro, ui-sans-serif, system-ui, sans-serif,
+        `Maven Pro, ui-sans-serif, system-ui, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
     );
   }, [props.brandColor, props.brandFontFamily]);
diff --git a/clients/search-component/src/utils/hooks/chat-context.tsx b/clients/search-component/src/utils/hooks/chat-context.tsx
@@ -5,9 +5,20 @@ import { Chunk } from "../types";
 import { getFingerprint } from "@thumbmarkjs/thumbmarkjs";
 import { useEffect } from "react";
 import { trackViews } from "../trieve";
-import { ChunkFilter, ChunkGroup, ToolFunctionParameter } from "trieve-ts-sdk";
+import {
+  ChunkFilter,
+  ChunkGroup,
+  EventsForTopicResponse,
+  RAGAnalyticsResponse,
+  ToolFunctionParameter,
+} from "trieve-ts-sdk";
 import { defaultHighlightOptions } from "../highlight";
 
+export type ChunkIdWithIndex = {
+  chunk_id: string;
+  index: number;
+};
+
 const scrollToBottomOfChatModalWrapper = () => {
   const chatModal = document.querySelector(".chat-modal-wrapper");
   if (chatModal) {
@@ -43,18 +54,20 @@ const ChatContext = createContext<{
   chatWithGroup: (group: ChunkGroup, betterGroupName?: string) => void;
   isDoneReading?: boolean;
   rateChatCompletion: (isPositive: boolean, queryId: string | null) => void;
+  productsWithClicks: ChunkIdWithIndex[];
 }>({
-  askQuestion: async () => { },
+  askQuestion: async () => {},
   currentQuestion: "",
   isLoading: false,
   messages: [],
-  setCurrentQuestion: () => { },
-  cancelGroupChat: () => { },
-  clearConversation: () => { },
-  chatWithGroup: () => { },
-  switchToChatAndAskQuestion: async () => { },
-  stopGeneratingMessage: () => { },
-  rateChatCompletion: () => { },
+  setCurrentQuestion: () => {},
+  cancelGroupChat: () => {},
+  clearConversation: () => {},
+  chatWithGroup: () => {},
+  switchToChatAndAskQuestion: async () => {},
+  stopGeneratingMessage: () => {},
+  rateChatCompletion: () => {},
+  productsWithClicks: [],
 });
 
 function ChatProvider({ children }: { children: React.ReactNode }) {
@@ -83,6 +96,9 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
     new AbortController(),
   );
   const [isDoneReading, setIsDoneReading] = useState(true);
+  const [productsWithClicks, setProductsWithClicks] = useState<
+    ChunkIdWithIndex[]
+  >([]);
 
   const createTopic = async ({
     question,
@@ -147,6 +163,26 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
           );
           setMessages(componentMessages.slice(1));
         });
+
+      trieveSDK
+        .getRagAnalytics({
+          type: "events_for_topic",
+          topic_id: props.previewTopicId,
+        })
+        .then((topicEvents: RAGAnalyticsResponse) => {
+          const topicEventsResponse = topicEvents as EventsForTopicResponse;
+
+          const allProductsWithClicks = topicEventsResponse.events
+            .filter((event) => event.event_type === "click")
+            .flatMap((event) => {
+              const productsWithClicks = event.items.map((jsonItem) => {
+                const serializedItem = JSON.parse(jsonItem) as ChunkIdWithIndex;
+                return serializedItem;
+              });
+              return productsWithClicks;
+            });
+          setProductsWithClicks(allProductsWithClicks);
+        });
     }
   }, []);
 
@@ -424,13 +460,13 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
               user_message_text:
                 questionProp || currentQuestion
                   ? `Get filters from the following messages: ${messages
-                    .slice(0, -1)
-                    .filter((message) => {
-                      return message.type == "user";
-                    })
-                    .map(
-                      (message) => `\n\n${message.text}`,
-                    )} \n\n ${questionProp || currentQuestion}`
+                      .slice(0, -1)
+                      .filter((message) => {
+                        return message.type == "user";
+                      })
+                      .map(
+                        (message) => `\n\n${message.text}`,
+                      )} \n\n ${questionProp || currentQuestion}`
                   : null,
               image_url: imageUrl ? imageUrl : null,
               audio_input: curAudioBase64 ? curAudioBase64 : null,
@@ -804,6 +840,7 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
         stopGeneratingMessage,
         isDoneReading,
         rateChatCompletion,
+        productsWithClicks,
       }}
     >
       {children}
diff --git a/clients/search-component/src/utils/hooks/modal-context.tsx b/clients/search-component/src/utils/hooks/modal-context.tsx

Original file line number	Diff line number	Diff line change
`@@ -304,6 +304,10 @@ body {`
`304`	`304`	`flex: 0 0 100% 100%;`
`305`	`305`	`}`
`306`	`306`
	`307`	`+ &.tv-highlighted-item {`
	`308`	`+ background-color: yellow;`
	`309`	`+ }`
	`310`	`+`
`307`	`311`	`&.yt-anchor {`
`308`	`312`	`@apply tv-text-center;`
`309`	`313`	`}`