@envive-ai/react-hooks 0.1.0

package/src/contexts/chatContext.tsx

@@ -0,0 +1,451 @@
+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/adapters/spiffy/commerce/api';
+import { v4 as uuid } from 'uuid';
+import { SessionRestartRequired } from 'src/adapters/spiffy/commerce/exceptions/sessionExceptions';
+import Logger from 'src/application/logging/logger';
+import {
+  Message,
+  MessageRole,
+  MessageType,
+  NextMessageRequest,
+  Response,
+} from 'src/application/models';
+import { AmplitudeAdapter, SpiffyMetricsEventName } from 'src/adapters/amplitude';
+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 { orgIdAtom } from 'src/atoms/org/org';
+import { useSystemSettingsContext } from 'src/hooks';
+import { createAppLoadedEvent, createVisitUserEvent } from 'src/hooks/utils';
+import { useMessageInterceptor } from 'src/interceptors/useMessageInterceptor';
+import { supportedEventAtom } from 'src/atoms/app/variant';
+import { chatAtom, getAtomStore } from 'src/atoms';
+import {
+  clearUserEventAtom,
+  createResponsePayload,
+  processUserEventAtom,
+  userEventQueueAtom,
+  userQueueEventCountAtom,
+} from 'src/atoms/chat/messageQueue';
+
+/**
+ * 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) => {
+  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;
+  }
+
+  AmplitudeAdapter.trackEvent({
+    eventName: 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);
+  const orgId = useAtomValue(orgIdAtom);
+
+  const variantInfo = useAtomValue(variantInfoAtom);
+  const settingsContext = useSystemSettingsContext();
+  const messageInterceptor = useMessageInterceptor();
+  const handleSearchResults = useSetAtom(handleSearchResultsAtom);
+  const setSearchIsLoading = useSetAtom(chatSearchIsLoadingAtom);
+
+  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);
+        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,
+    ],
+  );
+
+  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
+        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) {
+        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/enviveConfigContext.tsx

@@ -0,0 +1,70 @@
+import React, { createContext, useContext, ReactNode } from "react";
+import type { 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;
+}
+
+export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
+  children,
+  amplitudeApiKey,
+  dataResidency,
+  env,
+  baseUrl,
+  reactAppName,
+  cdnUrl,
+  contextSource,
+  orgLevelApiKey,
+  orgShortName,
+}) => {
+  const config: EnviveConfig = {
+    amplitudeApiKey,
+    dataResidency,
+    env,
+    baseUrl,
+    reactAppName,
+    cdnUrl,
+    contextSource,
+    orgLevelApiKey,
+    orgShortName,
+  };
+
+  // Validate config values
+  for (const key in config) {
+    if (config.hasOwnProperty(key)) {
+      const value = config[key as keyof EnviveConfig];
+      if (value === undefined || value === null || value === "") {
+        throw new Error(
+          `EnviveConfigProvider: Missing required configuration value for '${key}'`
+        );
+      }
+    }
+  }
+
+  return (
+    <EnviveConfigContext.Provider value={config}>
+      {children}
+    </EnviveConfigContext.Provider>
+  );
+};
+
+export const useEnviveConfig = (): EnviveConfig => {
+  const context = useContext(EnviveConfigContext);
+  if (context === undefined) {
+    throw new Error(
+      "useEnviveConfig must be used within an EnviveConfigProvider"
+    );
+  }
+  return context;
+};

package/src/contexts/index.ts

@@ -0,0 +1,4 @@
+export * from "./chatContext";
+export * from "./systemSettingsContext";
+export * from "./enviveConfigContext";
+export * from "./types";

package/src/contexts/systemSettingsContext.tsx

@@ -0,0 +1,61 @@
+import { useAtomValue } from 'jotai';
+import { Dispatch, ReactNode, SetStateAction, createContext, useMemo, useState } from 'react';
+import { GenerationParams } from 'src/application/models';
+import { endpointURLAtom } from 'src/atoms/org/org';
+
+// TODO: Refactor this to a common service that handles query params (and spiffy variables all together)
+const getChatModelName = () => {
+  const urlObj = new URL(window.location.href);
+  const params = new URLSearchParams(urlObj.search);
+  const paramsObj = Object.fromEntries(params.entries());
+  return paramsObj.llm_model_name;
+};
+
+const defaultGenerationParams: GenerationParams = {
+  stream: true,
+  numSuggestions: 3,
+  model: getChatModelName(),
+};
+
+interface SystemSettingsContextParams {
+  generationParams?: GenerationParams;
+  showDebugBar?: boolean;
+  endpointURL?: string;
+  setGenerationParams: Dispatch<SetStateAction<GenerationParams | undefined>>;
+}
+
+interface SystemSettingsContextProviderProps {
+  children: ReactNode;
+  generationParams?: GenerationParams;
+  showDebugBar?: boolean;
+}
+
+const SystemSettingsContext = createContext<SystemSettingsContextParams | undefined>(undefined);
+
+const SystemSettingsContextProvider = ({
+  children,
+  generationParams,
+  showDebugBar,
+}: SystemSettingsContextProviderProps) => {
+  const [params, setParams] = useState<GenerationParams | undefined>(
+    () => generationParams ?? defaultGenerationParams,
+  );
+  const endpointURL = useAtomValue(endpointURLAtom);
+  const settingsContextValues = useMemo(
+    () => ({
+      generationParams: params,
+      showDebugBar,
+      setGenerationParams: setParams,
+      endpointURL,
+    }),
+    [generationParams, endpointURL, showDebugBar],
+  );
+
+  return (
+    <SystemSettingsContext.Provider value={settingsContextValues}>
+      {children}
+    </SystemSettingsContext.Provider>
+  );
+};
+
+export { SystemSettingsContextProvider, SystemSettingsContext, defaultGenerationParams };