@envive-ai/react-hooks 0.2.6-alpha-arthur-2 → 0.2.6-alpha.11

package/src/contexts/chatContext/chatContext.tsx

@@ -0,0 +1,509 @@
+import { UserEventCategory } from "@spiffy-ai/commerce-api-client";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import {
+  createContext,
+  useEffect,
+  useState,
+  ReactNode,
+  useCallback,
+  useMemo,
+} from "react";
+import CommerceApiClient from "src/application/commerce-api";
+import { v4 as uuid } from "uuid";
+import { SessionRestartRequired } from "src/types/exceptions/sessionExceptions";
+import Logger from "src/application/logging/logger";
+import {
+  Message,
+  MessageRole,
+  MessageType,
+  NextMessageRequest,
+  Response,
+} from "src/application/models";
+import { SpiffyMetricsEventName } from "src/contexts/amplitudeContext/amplitudeContext";
+import { messageFromResponse } from "src/application/utils";
+import { chatIdAtom, userIdAtom, variantInfoAtom } from "src/atoms/app";
+import {
+  messagesAtom,
+  requestFailureAtom,
+  responseStreamingAtom,
+  userHasRepliedAtom,
+  PerfMetricsEvents,
+  logPerfMetricAtom,
+  userEventsAtom,
+  suggestionsLoadingAtom,
+  suggestionsAtom,
+} from "src/atoms/chat";
+import {
+  chatSearchProductSortingAtom,
+  chatSearchProducts,
+  chatSearchStateAtom,
+  handleSearchResultsAtom,
+  chatSearchIsLoadingAtom,
+} from "src/atoms/search/chatSearch";
+import { createAppLoadedEvent, createVisitUserEvent } from "src/hooks/utils";
+import { useMessageInterceptor } from "src/interceptors/useMessageInterceptor";
+import { supportedEventAtom } from "src/atoms/app/variant";
+import { chatAtom } from "src/atoms/chat";
+import { getAtomStore } from "src/atoms/atomStore";
+import {
+  clearUserEventAtom,
+  createResponsePayload,
+  processUserEventAtom,
+  userEventQueueAtom,
+  userQueueEventCountAtom,
+} from "src/atoms/chat/messageQueue";
+import { useAmplitudeTracking } from "src/hooks/AmplitudeOperations/useAmplitudeOperations";
+import { useSystemSettingsContext } from "src/hooks/SystemSettingsContext";
+
+/**
+ * Record the chat assistant response in Amplitude
+ *
+ * @param startTimeMs The start time of the assistant response
+ * @param payload The payload used to generate the response
+ */
+const recordAssistantResponse = (
+  startTimeMs: number,
+  payload: NextMessageRequest,
+  track: (
+    eventName: SpiffyMetricsEventName,
+    eventProps?: Record<string, unknown>
+  ) => void
+) => {
+  const atomStore = getAtomStore();
+  const chatState = atomStore.get(chatAtom);
+  const chatSearchState = atomStore.get(chatSearchStateAtom);
+  const searchProducts = atomStore.get(chatSearchProducts);
+  const searchProductsSort = atomStore.get(chatSearchProductSortingAtom);
+  const assistantResponseTimeMs = { start: startTimeMs, end: Date.now() };
+  let userQueryProperty: string | undefined;
+
+  if (
+    chatState.replyEventCategory === UserEventCategory.SuggestionClicked &&
+    chatState.suggestion
+  ) {
+    userQueryProperty = chatState.suggestion.content;
+  } else if (chatState.userQuery && chatState.userQuery.length > 0) {
+    userQueryProperty = chatState.userQuery;
+  }
+
+  const eventProps: Record<string, unknown> = {
+    response_time_ms:
+      assistantResponseTimeMs.end - assistantResponseTimeMs.start,
+    user_event_type: chatState.replyEventCategory,
+    user_query: userQueryProperty,
+  };
+
+  if (chatState.replyEventCategory === UserEventCategory.FormSubmitted) {
+    const lastAssistantTurn = chatState.messages
+      .filter(
+        (turn) => turn.length > 0 && turn[0].role === MessageRole.Assistant
+      )
+      .pop();
+    const formType = payload.userEvents?.find(
+      (event) => event.category === UserEventCategory.FormSubmitted
+    )?.attributes.formType;
+    const formStatus = lastAssistantTurn?.some(
+      (response) => response.type === MessageType.Order
+    );
+    eventProps.form_submitted_attributes = {
+      form_type: formType,
+      status: formStatus ? "success" : "failed",
+    };
+  }
+
+  if (chatSearchState === "product-page") {
+    eventProps.search_products_returned = searchProducts.length;
+    eventProps.search_products_sort_type = searchProductsSort;
+  }
+
+  track(SpiffyMetricsEventName.ChatAssistantResponse, {
+    eventProps,
+  });
+};
+
+interface ChatContextParams {}
+
+const ChatContext = createContext<ChatContextParams | undefined>(undefined);
+
+const updateMessageState = (
+  message: Message,
+  lastMessage: Message,
+  setMessages: (updater: (prev: Message[][]) => Message[][]) => void
+): Message => {
+  if (lastMessage == null) {
+    setMessages((prev) => [...prev, [message]]);
+    return message;
+  }
+  if (
+    lastMessage.type === MessageType.Text &&
+    message.type === MessageType.Text
+  ) {
+    const newMessage = {
+      ...lastMessage,
+      metadata: {
+        ...lastMessage.metadata,
+        content: lastMessage.metadata.content + message.metadata.content,
+      },
+    };
+    setMessages((prev) => {
+      const lastTurn = prev[prev.length - 1];
+      return [
+        ...prev.slice(0, prev.length - 1),
+        [...lastTurn.slice(0, lastTurn.length - 1), newMessage],
+      ];
+    });
+    return newMessage;
+  }
+  setMessages((prev) => [
+    ...prev.slice(0, prev.length - 1),
+    [...prev[prev.length - 1], message],
+  ]);
+  return message;
+};
+
+const handleStreamingError = (
+  _error: unknown,
+  setRequestFailure: (failed: boolean) => void,
+  setMessages: (updater: (prev: Message[][]) => Message[][]) => void
+) => {
+  setRequestFailure(true);
+  setMessages((prev) => [
+    ...prev,
+    [
+      {
+        id: uuid(),
+        role: MessageRole.Assistant,
+        type: MessageType.Text,
+        createdAt: new Date().toISOString(),
+        metadata: {
+          content:
+            "I'm sorry! I'm having trouble right now. Please refresh the page or try again in a moment.",
+        },
+      },
+    ],
+  ]);
+};
+
+const processStreamingResponse = async (
+  stream: AsyncIterable<Response>,
+  messageInterceptor: {
+    intercept: (response?: Response) => boolean | undefined;
+  },
+  handleSearchResults: (message: Message) => void,
+  setMessages: (updater: (prev: Message[][]) => Message[][]) => void,
+  setSearchIsLoading: (loading: boolean) => void,
+  chatId: string
+): Promise<{ hasSearchResults: boolean }> => {
+  let lastMessage: Message | undefined;
+  let hasSearchResults = false;
+
+  for await (const response of stream) {
+    try {
+      if (messageInterceptor.intercept(response)) {
+        return { hasSearchResults };
+      }
+
+      const message = messageFromResponse(response);
+      if (!message) {
+        throw new Error("Failed to transform API response to client message");
+      }
+
+      if (message.type === MessageType.ProductSearch) {
+        handleSearchResults(message);
+        hasSearchResults = true;
+        setSearchIsLoading(false); // Update search loading immediately when results are detected
+      }
+
+      lastMessage = updateMessageState(message, lastMessage!, setMessages);
+    } catch (error: unknown) {
+      Logger.logWarn(
+        `[spiffy-ai] Failed to generate responses from stream chat_id=${chatId}`,
+        error,
+        {
+          lastResponse: lastMessage,
+          response,
+        }
+      );
+    }
+  }
+
+  return { hasSearchResults };
+};
+
+const ChatContextProvider = ({ children }: { children: ReactNode }) => {
+  const logPerfMetric = useSetAtom(logPerfMetricAtom);
+  const [widgetInitialized, setWidgetInitialized] = useState(false);
+  const setUserHasReplied = useSetAtom(userHasRepliedAtom);
+  // TODO: create atoms for setting/getting the last message turn
+  const [messages, setMessages] = useAtom<Message[][]>(messagesAtom);
+  const setUserEvents = useSetAtom(userEventsAtom);
+  const setSuggestions = useSetAtom(suggestionsAtom);
+  const [suggestionsLoading, setSuggestionsLoading] = useAtom<boolean>(
+    suggestionsLoadingAtom
+  );
+  const [responseStreaming, setResponseStreaming] = useAtom<boolean>(
+    responseStreamingAtom
+  );
+  const setRequestFailure = useSetAtom(requestFailureAtom);
+  const userEvents = useAtomValue(userEventQueueAtom);
+  const userQueueEventCount = useAtomValue(userQueueEventCountAtom);
+  const markUserEventsProcessed = useSetAtom(processUserEventAtom);
+  const clearUserEventQueue = useSetAtom(clearUserEventAtom);
+  const userId = useAtomValue(userIdAtom);
+  const chatId = useAtomValue(chatIdAtom);
+  const supportedEvent = useAtomValue(supportedEventAtom);
+  // TODO: Replace with actual orgId from useEnviveConfig or NewOrgConfigContext when available
+  const orgId = "mock-org-id";
+
+  const variantInfo = useAtomValue(variantInfoAtom);
+  const settingsContext = useSystemSettingsContext();
+  const messageInterceptor = useMessageInterceptor();
+  const handleSearchResults = useSetAtom(handleSearchResultsAtom);
+  const setSearchIsLoading = useSetAtom(chatSearchIsLoadingAtom);
+  const { track } = useAmplitudeTracking();
+
+  const getStreamingResponses = useCallback(
+    async (
+      payload: NextMessageRequest
+    ): Promise<{ hasSearchResults: boolean }> => {
+      logPerfMetric(PerfMetricsEvents.FirstResponseStarted);
+      const stream = CommerceApiClient.getNextResponseStreaming(payload);
+
+      try {
+        setRequestFailure(false);
+
+        const { hasSearchResults } = await processStreamingResponse(
+          stream,
+          messageInterceptor,
+          handleSearchResults,
+          setMessages,
+          setSearchIsLoading,
+          chatId
+        );
+
+        return { hasSearchResults };
+      } catch (e) {
+        handleStreamingError(e, setRequestFailure, setMessages);
+        throw e;
+      } finally {
+        logPerfMetric(PerfMetricsEvents.FirstResponseCompleted);
+      }
+    },
+    [
+      logPerfMetric,
+      setRequestFailure,
+      messageInterceptor,
+      handleSearchResults,
+      setMessages,
+      setSearchIsLoading,
+      chatId,
+    ]
+  );
+
+  const getSuggestions = useCallback(async () => {
+    logPerfMetric(PerfMetricsEvents.FirstSuggestionsStarted);
+    setSuggestionsLoading(true);
+    setSuggestions([]);
+
+    const payloadWithoutAppLoaded = createResponsePayload({
+      userEvents: [],
+      generationParams: settingsContext.generationParams,
+    });
+    const response = await CommerceApiClient.getNextSuggestions(
+      payloadWithoutAppLoaded
+    );
+
+    // sort the suggestions by shortest length so the pills can be stacked horizontally
+    setSuggestions(
+      response.sort((a, b) => a.content.length - b.content.length)
+    );
+    setSuggestionsLoading(false);
+    logPerfMetric(PerfMetricsEvents.FirstSuggestionsCompleted);
+  }, [
+    logPerfMetric,
+    setSuggestionsLoading,
+    setSuggestions,
+    settingsContext.generationParams,
+  ]);
+
+  const getResponses = useCallback(
+    async (payload?: NextMessageRequest) => {
+      try {
+        const requestPayload =
+          payload ??
+          createResponsePayload({
+            userEvents,
+            generationParams: settingsContext.generationParams,
+          });
+
+        setResponseStreaming(true);
+        setSuggestions([]);
+        const startTimeMs = Date.now();
+
+        await getStreamingResponses(requestPayload);
+
+        recordAssistantResponse(startTimeMs, requestPayload, track);
+        await getSuggestions();
+      } catch (error) {
+        Logger.logError("[spiffy-ai] getResponses error", error);
+      } finally {
+        // Remove search loading management from here - it's now handled independently
+        // in the processStreamingResponse function when search results are detected
+        markUserEventsProcessed(userEvents.map(({ eventId }) => eventId));
+        setUserHasReplied(false);
+        setResponseStreaming(false);
+      }
+    },
+    [
+      userEvents,
+      settingsContext.generationParams,
+      setResponseStreaming,
+      setSuggestions,
+      getStreamingResponses,
+      markUserEventsProcessed,
+      getSuggestions,
+      setUserHasReplied,
+      track,
+    ]
+  );
+
+  useEffect(() => {
+    const processUserEvents = async () => {
+      if (responseStreaming || !widgetInitialized) {
+        return;
+      }
+
+      if (
+        (variantInfo.variant === "pdp" && !variantInfo.productId) ||
+        (variantInfo.variant === "plp" && !variantInfo.plpId) ||
+        (variantInfo.variant === "page_visit" && !variantInfo.url)
+      ) {
+        Logger.logDebug(
+          "[spiffy-ai] variantInfo has invalid values, skipping...",
+          {
+            variantInfo,
+            supportedEvent,
+          }
+        );
+        return;
+      }
+
+      Logger.logDebug(
+        `Assistants Turn is_currently_streaming=${responseStreaming} initialized=${widgetInitialized}`
+      );
+      try {
+        await getResponses();
+        Logger.logInfo(`Assistants Turn [finished]`);
+      } catch (error: unknown) {
+        Logger.logError("[spiffy-ai] Assistants Turn error", error);
+      }
+    };
+    if (userQueueEventCount > 0) {
+      processUserEvents();
+    }
+  }, [
+    getResponses,
+    responseStreaming,
+    userQueueEventCount,
+    widgetInitialized,
+    variantInfo,
+    supportedEvent,
+  ]);
+
+  useEffect(() => {
+    if (widgetInitialized || responseStreaming) {
+      Logger.logDebug(
+        `[spiffy-ai] initializeWidget [skipped] is_currently_streaming=${responseStreaming} is_initialized=${widgetInitialized}`
+      );
+      return;
+    }
+
+    const hydrateChat = async () => {
+      try {
+        Logger.logDebug(
+          `[spiffy-ai] initializeWidget is_currently_streaming=${responseStreaming} is_initialized=${widgetInitialized}`
+        );
+        // on mount, try to get the responses from an active session if one exists
+        if (!orgId) {
+          throw new Error("orgId is not available");
+        }
+        const { messages: existingMessages, userEvents } =
+          await CommerceApiClient.getResponses(orgId, chatId, userId);
+        setMessages([...existingMessages]);
+        setUserEvents([...userEvents]);
+        getResponses();
+      } catch (error) {
+        // no active chat session was found, start a new one
+        Logger.logInfo(
+          `Init chat [exception] chat_id=${chatId} error=${error}`,
+          error
+        );
+        if (error instanceof SessionRestartRequired) {
+          const appLoadedEvent = createAppLoadedEvent();
+          const visitEvent = createVisitUserEvent({ variantInfo });
+          setMessages([]);
+          clearUserEventQueue();
+          if (visitEvent) {
+            const payload = createResponsePayload({
+              userEvents: [appLoadedEvent, visitEvent],
+              generationParams: settingsContext.generationParams,
+            });
+            getResponses(payload);
+          }
+        }
+      } finally {
+        setWidgetInitialized(true);
+      }
+    };
+
+    hydrateChat();
+  }, []);
+
+  const onFocus = useCallback(async () => {
+    try {
+      if (!responseStreaming && !suggestionsLoading && orgId) {
+        const { messages: existingMessages } =
+          await CommerceApiClient.getResponses(orgId, chatId, userId);
+
+        if (existingMessages.length > messages.length) {
+          setMessages([...existingMessages]);
+          // TODO: Is this bug hack still necessary?
+          // If it is, come up with a better solution for it
+          // } else if (existingMessages.length === 0) {
+          //   // if there was an error during the initialization of a new session, the session would be
+          //   // created in the backend but without any messages. Retry the next_responses request with
+          //   // the current set of parameters to "jumpstart" the session
+          //   triggerGetResponseCall('onFocus');
+        }
+      }
+    } catch (error: unknown) {
+      Logger.logError("[spiffy-ai] onFocus error", error);
+    }
+  }, [
+    responseStreaming,
+    suggestionsLoading,
+    orgId,
+    chatId,
+    userId,
+    messages.length,
+    setMessages,
+  ]);
+
+  // listen for page focus to get latest messages from the server
+  useEffect(() => {
+    window.addEventListener("focus", onFocus);
+
+    return () => {
+      window.removeEventListener("focus", onFocus);
+    };
+  }, [onFocus]);
+
+  const chatContext = useMemo(() => ({}), []);
+
+  return (
+    <ChatContext.Provider value={chatContext}>{children}</ChatContext.Provider>
+  );
+};
+
+export { ChatContext, ChatContextProvider };
+export type { ChatContextParams };

package/src/contexts/chatContext/index.ts

@@ -0,0 +1 @@
+export * from "./chatContext";

package/src/contexts/enviveConfigContext/enviveConfigContext.tsx

@@ -1,11 +1,32 @@
-import React, { createContext, useEffect } from "react";
+import React, { createContext, useContext, ReactNode, useEffect } from "react";
 import { useSetAtom, useAtomValue } from "jotai";
-import { enviveConfigAtom } from "../../atoms/envive/enviveConfig";
-import Logger from "../../application/logging/logger";
-import { EnviveConfig, EnviveConfigProviderProps } from "@envive-ai/types";
+import { enviveConfigAtom } from "src/atoms/envive/enviveConfig";
+import Logger from "src/application/logging/logger";
+import { OrgConfigFeatureGate } from "src/application/models/api/orgConfigResults";
+import { EnviveConfig } from "../types";
 
 const EnviveConfigContext = createContext<EnviveConfig | undefined>(undefined);
 
+interface EnviveConfigProviderProps {
+  children: ReactNode;
+  amplitudeApiKey?: string;
+  dataResidency?: string;
+  env?: string;
+  baseUrl?: string;
+  reactAppName?: string;
+  cdnUrl?: string;
+  contextSource?: string;
+  orgLevelApiKey?: string;
+  orgShortName?: string;
+  identifyingPrefix: string;
+  featureOverrides?: Record<string, boolean>;
+  variantUrlOverride?: string;
+  variantInfoOverride?: any;
+  show?: boolean;
+  publicKey?: string;
+  featureGates?: OrgConfigFeatureGate[]; // New prop for feature gates
+}
+
 export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
   children,
   amplitudeApiKey,
@@ -60,13 +81,6 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
 
 export const useEnviveConfig = (): EnviveConfig => {
   const config = useAtomValue(enviveConfigAtom);
-  console.log('config', config);
-
-  if (!config) {
-    throw new Error(
-      "useEnviveConfig must be used within an EnviveConfigProvider"
-    );
-  }
 
-  return config;
+  return config ? config : {};
 };

package/src/contexts/enviveCssContext/enviveCssContext.tsx

@@ -1,8 +1,13 @@
-import React from 'react';
-import { useNewOrgConfig } from '../../hooks/NewOrgConfig';
-import { EnviveCssProviderProps } from '@envive-ai/types';
+import React, { ReactNode } from "react";
+import { useNewOrgConfig } from "src/hooks/NewOrgConfig";
 
-export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({ children }) => {
+interface EnviveCssProviderProps {
+  children: ReactNode;
+}
+
+export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({
+  children,
+}) => {
   const { colorsConfig, frontendConfig, loading } = useNewOrgConfig();
   let merchantThemeCss = `* {}`;
   if (colorsConfig && !loading) {
@@ -34,7 +39,9 @@ export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({ children }
       {frontendConfig ? (
         <style id="merchant-css-overrides">{`${frontendConfig.merchantOverrideCss}`}</style>
       ) : null}
-      {colorsConfig ? <style id="merchant-css-colors">{`${merchantThemeCss}`}</style> : null}
+      {colorsConfig ? (
+        <style id="merchant-css-colors">{`${merchantThemeCss}`}</style>
+      ) : null}
 
       {children}
     </>