feature: pass ab treatment w/ metadata on analytics

Author: densumesh

clients/search-component/src/TrieveModal/Chat/FollowupQueries.tsx

@@ -6,7 +6,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { useModalState } from "../../utils/hooks/modal-context";
 
 export const FollowupQueries = () => {
-  const { props, trieveSDK, fingerprint } = useModalState();
+  const { props, trieveSDK, fingerprint, abTreatment } = useModalState();
   const { isDoneReading, askQuestion, messages } = useChatState();
   const { suggestedQuestions, isLoadingSuggestedQueries } =
     useFollowupQuestions();
@@ -31,6 +31,7 @@ export const FollowupQueries = () => {
       metadata: {
         followup_query: q,
         component_props: props,
+        ab_treatment: abTreatment,
       },
       request: {
         request_id: requestId,

clients/search-component/src/TrieveModal/Chat/ResponseMessage.tsx

@@ -107,7 +107,7 @@ export const Message = ({
     useChatState();
   const [positive, setPositive] = React.useState<boolean | null>(null);
   const [copied, setCopied] = React.useState<boolean>(false);
-  const { props, trieveSDK, fingerprint } = useModalState();
+  const { props, trieveSDK, fingerprint, abTreatment } = useModalState();
 
   useEffect(() => {
     if (props.analytics) {
@@ -130,6 +130,7 @@ export const Message = ({
             return chunk.tracking_id ?? "";
           }),
           fingerprint,
+          abTreatment,
         });
       }
     }
@@ -189,6 +190,7 @@ export const Message = ({
                 requestID: message.queryId,
                 chunkID: item.id,
                 fingerprint,
+                abTreatment,
               });
             }
           }}
@@ -285,6 +287,7 @@ export const Message = ({
               requestID: message.queryId,
               chunkID: item.id,
               fingerprint,
+              abTreatment,
             });
           }
         }}
@@ -351,6 +354,7 @@ export const Message = ({
               requestID: message.queryId,
               chunkID: item.id,
               fingerprint,
+              abTreatment,
             });
           }
         }}

clients/search-component/src/TrieveModal/Chat/SuggestedQuestions.tsx

@@ -20,7 +20,7 @@ export const SuggestedQuestions = ({
   const { suggestedQuestions, isLoadingSuggestedQueries, getQuestions } =
     useSuggestedQuestions();
 
-  const { props, trieveSDK, fingerprint } = useModalState();
+  const { props, trieveSDK, fingerprint, abTreatment } = useModalState();
   const [parent] = useAutoAnimate({ duration: 100 });
 
   if (messages.length) {
@@ -48,6 +48,7 @@ export const SuggestedQuestions = ({
       metadata: {
         followup_query: q,
         component_props: props,
+        ab_treatment: abTreatment,
       },
       request: {
         request_id: requestId,

clients/search-component/src/TrieveModal/Search/DocsItem.tsx

@@ -11,7 +11,7 @@ type Props = {
 };
 
 export const DocsItem = ({ item, requestID, index, className }: Props) => {
-  const { props, trieveSDK, fingerprint } = useModalState();
+  const { props, trieveSDK, fingerprint, abTreatment } = useModalState();
   const Component = item.chunk.link ? "a" : "button";
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const itemRef = useRef<HTMLButtonElement | HTMLLinkElement | any>(null);
@@ -143,6 +143,7 @@ export const DocsItem = ({ item, requestID, index, className }: Props) => {
         requestID: requestID,
         chunkID: chunk.id,
         fingerprint,
+        abTreatment,
       });
     }
   };

clients/search-component/src/TrieveModal/Search/ProductItem.tsx

@@ -40,7 +40,7 @@ export const ProductItem = ({
   betterGroupName,
   ctrType: type,
 }: Props) => {
-  const { props, trieveSDK, fingerprint } = useModalState();
+  const { props, trieveSDK, fingerprint, abTreatment } = useModalState();
   const { chatWithGroup } = useChatState();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const itemRef = useRef<HTMLButtonElement | HTMLLinkElement | any>(null);
@@ -128,6 +128,7 @@ export const ProductItem = ({
         requestID: requestID,
         chunkID: chunk.id,
         fingerprint,
+        abTreatment,
       });
     }
 

clients/search-component/src/TrieveModal/index.tsx

@@ -21,7 +21,8 @@ import { createPortal } from "react-dom";
 
 const Modal = () => {
   useKeyboardNavigation();
-  const { open, setOpen, setMode, setQuery, props, display } = useModalState();
+  const { open, setOpen, setMode, setQuery, props, display, abTreatment } =
+    useModalState();
   const { askQuestion, chatWithGroup, cancelGroupChat, clearConversation } =
     useChatState();
 
@@ -87,6 +88,7 @@ const Modal = () => {
                 location: window.location.href,
                 metadata: {
                   component_props: props,
+                  ab_treatment: abTreatment,
                 },
               },
               abortController.signal,
@@ -99,6 +101,10 @@ const Modal = () => {
             items: [],
             user_id: fingerprint,
             location: window.location.href,
+            metadata: {
+              component_props: props,
+              ab_treatment: abTreatment,
+            },
           });
         }
       }

clients/search-component/src/utils/hooks/chat-context.tsx

@@ -119,6 +119,7 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
     selectedTags,
     currentGroup,
     props,
+    abTreatment,
   } = useModalState();
   const [currentQuestion, setCurrentQuestion] = useState(query);
   const [currentTopic, setCurrentTopic] = useState("");
@@ -163,6 +164,7 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
             owner_id: fingerprint,
             metadata: {
               component_props: props,
+              ab_treatment: abTreatment,
             },
           });
         });
@@ -322,6 +324,7 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
                 return chunk.tracking_id ?? "";
               }),
               fingerprint,
+              abTreatment,
             });
           }
         }
@@ -1113,6 +1116,7 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
               filters: createMessageFilters,
               metadata: {
                 component_props: props,
+                ab_treatment: abTreatment,
               },
               currency: props.defaultCurrency,
               highlight_options: {
@@ -1337,6 +1341,7 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
         query_id: queryId,
         metadata: {
           component_props: props,
+          ab_treatment: abTreatment,
         },
       });
     }

clients/search-component/src/utils/hooks/modal-context.tsx

@@ -363,6 +363,7 @@ const ModalContext = createContext<{
   resetHeight: () => void;
   addHeight: (height: number) => void;
   display: boolean;
+  abTreatment?: string;
 }>({
   props: defaultProps,
   trieveSDK: (() => {}) as unknown as TrieveSDK,
@@ -404,6 +405,7 @@ const ModalContext = createContext<{
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   addHeight: (height: number) => {},
   display: true,
+  abTreatment: undefined,
 });
 
 const ModalProvider = ({
@@ -453,6 +455,7 @@ const ModalProvider = ({
   const [display, setDisplay] = useState(
     !props.experimentIds || props.experimentIds.length === 0,
   );
+  const [abTreatment, setAbTreatment] = useState<string | undefined>(undefined);
 
   const trieve = new TrieveSDK({
     baseUrl: props.baseUrl,
@@ -538,6 +541,7 @@ const ModalProvider = ({
           abortController,
           filters,
           type: props.type,
+          abTreatment,
         });
         const groupMap = new Map<string, GroupChunk[]>();
         results.groups.forEach((group) => {
@@ -591,6 +595,7 @@ const ModalProvider = ({
           abortController,
           filters,
           type: props.type,
+          abTreatment,
         });
         if (results.transcribedQuery && audioBase64) {
           setQuery(results.transcribedQuery);
@@ -647,16 +652,17 @@ const ModalProvider = ({
       for (const experimentId of props.experimentIds) {
         trieve
           .getTreatment({
-              experiment_id: experimentId,
-              user_id: fingerprint,
+            experiment_id: experimentId,
+            user_id: fingerprint,
           })
           .then((treatment) => {
-              if (treatment.treatment_name === "Don't show") {
-                setDisplay(false);
-              } else {
-                setDisplay(true);
-              }
-            });
+            if (treatment.treatment_name === "Don't show") {
+              setDisplay(false);
+            } else {
+              setDisplay(true);
+            }
+            setAbTreatment(treatment.treatment_name);
+          });
       }
     }
   }, [props.experimentIds, fingerprint]);
@@ -686,6 +692,7 @@ const ModalProvider = ({
               location: window.location.href,
               metadata: {
                 component_props: props,
+                ab_treatment: abTreatment,
               },
             },
             abortController.signal,
@@ -716,6 +723,7 @@ const ModalProvider = ({
               location: window.location.href,
               metadata: {
                 component_props: props,
+                ab_treatment: abTreatment,
               },
             },
             abortController.signal,
@@ -865,6 +873,7 @@ const ModalProvider = ({
         resetHeight,
         addHeight,
         display,
+        abTreatment,
       }}
     >
       {children}

clients/search-component/src/utils/trieve.ts

@@ -40,6 +40,7 @@ export const searchWithTrieve = async ({
   filters,
   type,
   fingerprint,
+  abTreatment,
 }: {
   trieve: TrieveSDK;
   props: ModalProps;
@@ -51,6 +52,7 @@ export const searchWithTrieve = async ({
   filters?: ChunkFilter;
   type?: ModalTypes;
   fingerprint?: string;
+  abTreatment?: string;
 }) => {
   const scoreThreshold =
     searchOptions.score_threshold ??
@@ -90,6 +92,7 @@ export const searchWithTrieve = async ({
         filters,
         metadata: {
           component_props: props,
+          ab_treatment: abTreatment,
         },
         user_id: fingerprint,
         typo_options: {
@@ -119,6 +122,7 @@ export const searchWithTrieve = async ({
         filters,
         metadata: {
           component_props: props,
+          ab_treatment: abTreatment,
         },
         user_id: fingerprint,
         typo_options: {
@@ -167,6 +171,7 @@ export const groupSearchWithTrieve = async ({
   filters,
   type,
   fingerprint,
+  abTreatment,
 }: {
   props: ModalProps;
   trieve: TrieveSDK;
@@ -178,6 +183,7 @@ export const groupSearchWithTrieve = async ({
   filters?: ChunkFilter;
   type?: ModalTypes;
   fingerprint?: string;
+  abTreatment?: string;
 }) => {
   const scoreThreshold =
     searchOptions.score_threshold ??
@@ -213,6 +219,7 @@ export const groupSearchWithTrieve = async ({
       group_size: 1,
       metadata: {
         component_props: props,
+        ab_treatment: abTreatment,
       },
       user_id: fingerprint,
       search_type: searchOptions.search_type ?? "fulltext",
@@ -296,6 +303,7 @@ export const sendCtrData = async ({
   index,
   props,
   fingerprint,
+  abTreatment,
 }: {
   trieve: TrieveSDK;
   chunkID: string;
@@ -304,6 +312,7 @@ export const sendCtrData = async ({
   index: number;
   props: ModalProps;
   fingerprint: string;
+  abTreatment?: string;
 }) => {
   if (props.previewTopicId === undefined) {
     await trieve.sendAnalyticsEvent({
@@ -321,6 +330,7 @@ export const sendCtrData = async ({
       user_id: fingerprint,
       metadata: {
         component_props: props,
+        ab_treatment: abTreatment,
       },
     });
   }
@@ -335,13 +345,15 @@ export const trackViews = async ({
   items,
   props,
   fingerprint,
+  abTreatment,
 }: {
   trieve: TrieveSDK;
   requestID: string;
   type: CTRType;
   items: string[];
   props: ModalProps;
   fingerprint: string;
+  abTreatment?: string;
 }) => {
   if (props.previewTopicId === undefined) {
     let lastMessageString = "{}";
@@ -370,6 +382,7 @@ export const trackViews = async ({
       user_id: fingerprint,
       metadata: {
         component_props: props,
+        ab_treatment: abTreatment,
       },
     });
   }