@envive-ai/react-hooks 0.3.6 → 0.3.8

package/src/contexts/featureFlagServiceContext/featureFlagServiceContext.tsx

@@ -3,6 +3,8 @@ import { OrgConfigFeatureGate } from 'src/application/models/api/orgConfigResult
 import { FeatureGates } from 'src/application/models/featureGates';
 import Logger from 'src/application/logging/logger';
 
+const FEATURE_FLAGS_STORAGE_KEY = 'spiffy-feature-flags';
+
 // This is the class that was previously implicitly used or defined elsewhere
 export class FeatureFlagService {
   private featureGates: OrgConfigFeatureGate[];
@@ -11,11 +13,94 @@ export class FeatureFlagService {
     this.featureGates = featureGates;
   }
 
+  static getQueryParamFeatureGateOverrides(featureGate: FeatureGates): boolean | undefined {
+    const url = window.location?.href ?? '';
+    if (url.includes('?')) {
+      const urlObj = new URL(url);
+      const params = new URLSearchParams(urlObj.search);
+      const paramsObj = Object.fromEntries(params.entries());
+      const value = paramsObj[featureGate];
+
+      if (value != null) {
+        return value === 'true';
+      }
+    }
+
+    return undefined;
+  }
+
+  static getWindowFeatureGateOverrides(featureGate: FeatureGates): boolean | undefined {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+    const windowOverride = window as Window & {
+      _envive?: { featureOverrides?: Record<string, boolean> };
+      _spiffy?: { featureOverrides?: Record<string, boolean> };
+    };
+    const featureOverrides =
+      windowOverride?._envive?.featureOverrides ?? windowOverride?._spiffy?.featureOverrides;
+    const value = featureOverrides?.[String(featureGate)];
+    if (value != null) {
+      return value;
+    }
+    return undefined;
+  }
+
+  static getStoredFeatureGateOverrides(featureGate: FeatureGates): boolean | undefined {
+    if (typeof window === 'undefined' || typeof window.localStorage === 'undefined') {
+      return undefined;
+    }
+    try {
+      const featureFlags = window.localStorage.getItem(FEATURE_FLAGS_STORAGE_KEY);
+      if (!featureFlags) {
+        return undefined;
+      }
+      const featureFlagsObj = JSON.parse(featureFlags) as Record<string, boolean>;
+      return featureFlagsObj[featureGate];
+    } catch (err) {
+      Logger.logError(
+        '[spiffy-ai] getStoredFeatureGateOverrides: error parsing feature flags',
+        err,
+      );
+      return undefined;
+    }
+  }
+
+  static getFeatureFlagOverride(featureGate: FeatureGates): boolean | undefined {
+    const queryOverride = FeatureFlagService.getQueryParamFeatureGateOverrides(featureGate);
+    if (queryOverride != null) {
+      Logger.logDebug(
+        `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by URL param. New value: ${queryOverride}`,
+      );
+      return queryOverride;
+    }
+
+    const windowOverride = FeatureFlagService.getWindowFeatureGateOverrides(featureGate);
+    if (windowOverride != null) {
+      Logger.logDebug(
+        `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by window param. New value: ${windowOverride}`,
+      );
+      return windowOverride;
+    }
+
+    const storedOverride = FeatureFlagService.getStoredFeatureGateOverrides(featureGate);
+    if (storedOverride != null) {
+      Logger.logDebug(
+        `[spiffy-ai] isFeatureGateEnabled featureGate:${featureGate} overridden by stored value. New value: ${storedOverride}`,
+      );
+      return storedOverride;
+    }
+
+    return undefined;
+  }
+
   isFeatureGateEnabled = (featureGate: FeatureGates): boolean => {
     const gateValue = this.featureGates.find(gate => gate.name === featureGate);
 
-    // TODO: Add logic for overrides (query params, window, stored) if needed, similar to the old FeatureFlagContext.tsx
-    // For now, direct value from config is used.
+    const featureFlagOverride = FeatureFlagService.getFeatureFlagOverride(featureGate);
+    if (featureFlagOverride !== undefined) {
+      return featureFlagOverride;
+    }
 
     if (gateValue == null || gateValue.value == null) {
       Logger.logDebug(
@@ -38,6 +123,20 @@ export class FeatureFlagService {
       ]),
     );
   };
+
+  static persistFeatureGateOverrides(): void {
+    if (typeof window === 'undefined' || typeof window.localStorage === 'undefined') {
+      return;
+    }
+    const overrides = Object.values(FeatureGates)
+      .map(
+        featureGate =>
+          [featureGate, FeatureFlagService.getFeatureFlagOverride(featureGate)] as const,
+      )
+      .filter(([, value]) => value !== undefined)
+      .reduce<Record<string, boolean>>((acc, [key, value]) => ({ ...acc, [key]: value! }), {});
+    window.localStorage.setItem(FEATURE_FLAGS_STORAGE_KEY, JSON.stringify(overrides));
+  }
 }
 
 export interface FeatureFlagContextType {

package/src/contexts/graphqlContext/graphqlContext.tsx

@@ -1,26 +1,23 @@
-import React, { ReactNode, createContext, useCallback, useContext, useMemo } from 'react';
+import { ReactNode, createContext, useCallback, useContext, useMemo } from 'react';
 import { useAtomValue } from 'jotai';
 import { baseUrlAtom, orgLevelApiKeyAtom } from 'src/atoms/envive/enviveConfig';
 import { getMerchantOrgIdQuery } from 'src/application/models/graphql/queries/getMerchantOrgIdQuery';
 import { validateGraphQLOrgId } from 'src/application/models/validators/validateGraphQLOrgId';
-import {
-  GetMerchantColorsQueryData,
-  GetMerchantFrontendConfigQueryData,
-} from 'src/application/models/graphql';
 import { ColorMapping } from 'src/application/models/colorsConfig';
 import { FrontendConfig } from 'src/application/models/frontendConfig';
 import Logger from 'src/application/logging/logger';
-import { configVersion } from 'src/types/config-versions';
 import {
   CamelCasedPropertiesDeep,
   transformSnakeToCamel,
   validateAndTransformMountingConfig,
   validateAndTransformPageVariants,
 } from 'src/application/models';
+import { getColorsAndFrontendQuery } from 'src/application/models/graphql/queries/getColorsAndFrontendQuery';
 import { FrontendConfigV3 } from 'src/application/models/frontendConfigV3';
 import { ColorMappingV3 } from 'src/application/models/colorsConfigV3';
+import { FloatingButtonLocation } from '@envive-ai/react-toolkit-v3/FloatingButton';
 import { mockV3ColorsConfig, mockV3FrontendConfig } from './mockV3Config';
-import { ConfigVersionEnum, Position, WidgetConfigV3 } from '../typesV3';
+import { ConfigVersionEnum, WidgetConfigV3 } from '../typesV3';
 import {
   OrgPageConfig,
   PageVariantConfig,
@@ -28,19 +25,6 @@ import {
   WidgetMountingConfig,
 } from '../types';
 
-interface BaseMeConfigQueryResponse {
-  me: {
-    org?: {
-      id: string;
-    };
-    getProductsConfigByVersion?: {
-      frontend?: {
-        values: CamelCasedPropertiesDeep<GetMerchantFrontendConfigQueryData>;
-      };
-      colors?: { values: CamelCasedPropertiesDeep<GetMerchantColorsQueryData> };
-    };
-  };
-}
 export type ColorsConfigResponse = CamelCasedPropertiesDeep<ColorMapping>;
 export type FrontendConfigResponse = CamelCasedPropertiesDeep<FrontendConfig>;
 export type ColorsConfigV3Response = CamelCasedPropertiesDeep<ColorMappingV3>;
@@ -63,18 +47,6 @@ interface GraphQLContextValue {
 
 const GraphQLContext = createContext<GraphQLContextValue | null>(null);
 
-const colorsAndFrontendConfigQuery = () => `
-  query ($version: String = "${configVersion()}") {
-    me {
-      getProductsConfigByVersion(version: $version) {
-        frontend { values }
-        colors { values }
-        v_three_config { values }
-      }
-    }
-  }
-`;
-
 type GraphQLProviderProps = {
   children: ReactNode;
   requestV3Config?: boolean;
@@ -106,18 +78,18 @@ const DEFAULT_PAGE_VARIANTS: PageVariantConfig[] = [
   },
 ];
 
-const mapPositionToCamelCase = (position: string): Position => {
+const mapPositionToCamelCase = (position: string): FloatingButtonLocation => {
   if (position === 'bottom-left') {
-    return 'bottomLeft';
+    return FloatingButtonLocation.BOTTOM_LEFT;
   }
   if (position === 'middle-left') {
-    return 'middleLeft';
+    return FloatingButtonLocation.MIDDLE_LEFT;
   }
   if (position === 'middle-right') {
-    return 'middleRight';
+    return FloatingButtonLocation.MIDDLE_RIGHT;
   }
   if (position === 'bottom-right') {
-    return 'bottomRight';
+    return FloatingButtonLocation.BOTTOM_RIGHT;
   }
   throw new Error(`Invalid position: ${position}`);
 };
@@ -234,7 +206,7 @@ export const GraphQLProvider = ({
 
   const getV3Config = useCallback(async (): Promise<GraphQlConfigValues> => {
     try {
-      const query = await colorsAndFrontendConfigQuery();
+      const query = await getColorsAndFrontendQuery();
       if (!query) {
         throw new Error('Colors and frontend config query is not defined');
       }
@@ -242,11 +214,17 @@ export const GraphQLProvider = ({
 
       // We may update this root config location in the future
       const v3RootConfig = response.me.getProductsConfigByVersion?.v_three_config?.values;
+      const frontendValues = response.me.getProductsConfigByVersion?.frontend?.values;
 
       const v3FrontendConfig = v3FrontendConfigCleanup(
         transformSnakeToCamel(v3RootConfig) as FrontendConfigV3Response,
       );
 
+      // Get merchant_override_css from frontend.values if v3RootConfig is not available
+      const frontendMerchantOverrideCss = frontendValues?.merchant_override_css;
+      const v3MerchantOverrideCss = v3FrontendConfig.uiConfigs?.merchantOverrideCss;
+      const merchantOverrideCss = v3MerchantOverrideCss || frontendMerchantOverrideCss;
+
       const v3MountingConfigsArray = (transformSnakeToCamel(v3RootConfig?.mounting_configs) ??
         []) as unknown as { key: string; config: WidgetMountingConfig }[];
 
@@ -271,10 +249,15 @@ export const GraphQLProvider = ({
         : DEFAULT_PAGE_VARIANTS;
 
       const v3ColorsConfig = transformSnakeToCamel(v3RootConfig?.colors?.values);
+      const isSemanticColors = !window.location.href.includes('globals=merchant');
+      const isStorybook = window.top?.location.href.includes('?path=');
 
       // If the v3 root config is not found and we are configured to return the deprecated config, we will return the mocked config
-      if (!v3RootConfig && mockV3ConfigToDeprecatedConfig) {
-        const isSemanticColors = !window.location.href.includes('globals=merchant');
+      if ((!v3RootConfig && mockV3ConfigToDeprecatedConfig) || (isStorybook && isSemanticColors)) {
+        Logger.logInfo('GraphQLContext | Returning mock v3 config', {
+          colorsConfig: mockV3ColorsConfig as ColorsConfigV3Response,
+          frontendConfig: mockV3FrontendConfig as FrontendConfigV3Response,
+        });
         const colorsConfig = mockV3ColorsConfig;
         const frontendConfig = mockV3FrontendConfig;
         return {
@@ -282,13 +265,29 @@ export const GraphQLProvider = ({
             ? (colorsConfig as ColorsConfigV3Response)
             : (v3ColorsConfig as ColorsConfigV3Response),
           frontendConfig: frontendConfig as FrontendConfigV3Response,
+          orgPageConfig: {
+            pageVariants: [],
+            widgetConfigs: {},
+            mountingConfigs: {},
+          },
         };
       }
 
+      Logger.logInfo('GraphQLContext | Returning v3 config', {
+        colorsConfig: v3ColorsConfig as ColorsConfigV3Response,
+        frontendConfig: v3FrontendConfig as FrontendConfigV3Response,
+        orgPageConfig: {
+          pageVariants: v3pageVariants,
+          widgetConfigs: v3WidgetConfigs,
+          mountingConfigs: v3MountingConfigs,
+        },
+      });
+
       return {
         colorsConfig: v3ColorsConfig as ColorsConfigV3Response,
         frontendConfig: {
           ...(v3FrontendConfig as FrontendConfigV3Response),
+          merchantOverrideCss,
           // Need to replace the automatic widget configs with the object based ones
           widgetConfigs: v3WidgetConfigs,
         },
@@ -307,7 +306,7 @@ export const GraphQLProvider = ({
 
   const getColorsAndFrontendConfig = useCallback(async (): Promise<GraphQlConfigValues> => {
     try {
-      const query = await colorsAndFrontendConfigQuery();
+      const query = await getColorsAndFrontendQuery();
       if (!query) {
         throw new Error('Colors and frontend config query is not defined');
       }
@@ -347,10 +346,11 @@ export const GraphQLProvider = ({
   }, [executeQuery]);
 
   const getConfig = useCallback(async (): Promise<GraphQlConfigValues> => {
-    console.log('GraphQLProvider: getConfig: requestV3Config', requestV3Config);
     if (requestV3Config) {
+      Logger.logInfo('GraphQLContext | Getting v3 config', requestV3Config);
       return getV3Config();
     }
+    Logger.logInfo('GraphQLContext | Getting colors and frontend config', requestV3Config);
     return getColorsAndFrontendConfig();
   }, [getColorsAndFrontendConfig, getV3Config, requestV3Config]);
 

package/src/contexts/graphqlContext/mockV3Config.ts

@@ -7,10 +7,12 @@ import { AnimationSpeed, PromptCarouselRows } from '@envive-ai/react-toolkit-v3/
 import { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { ChatHeaderVariant } from '@envive-ai/react-toolkit-v3/ChatHeader';
+import { WidgetKind } from '@envive-ai/react-toolkit-v3/SocialProof';
 import { SparkleIconColor } from '@envive-ai/react-toolkit-v3/WelcomeMessage';
 
 import { CustomerServiceType } from 'src/types/customerService';
-import { ConfigVersionEnum, SocialProofWidgetKind, WidgetTypeV3 } from '../typesV3';
+import { FloatingButtonLocation } from '@envive-ai/react-toolkit-v3/FloatingButton';
+import { ConfigVersionEnum, WidgetTypeV3 } from '../typesV3';
 
 const mockImages = [
   {
@@ -111,7 +113,7 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       },
     },
     floatingButton: {
-      position: 'bottomRight',
+      position: FloatingButtonLocation.BOTTOM_RIGHT,
       backgroundColor: ColorNames.BackgroundPrimary,
       mode: 'dark',
       showOption: 'always',
@@ -119,7 +121,7 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       iconSVGSrc: '',
     },
     floatingChat: {
-      headerBackgroundColor: undefined,
+      headerBackgroundColor: ColorNames.BackgroundPrimary,
       headerMode: ChatHeaderVariant.DARK,
       welcomeMessageIconColor: SparkleIconColor.ACCENT_PRIMARY,
       showVerifiedBuyer: true,
@@ -187,7 +189,7 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       type: WidgetTypeV3.SocialProofV3,
 
       imageGalleryLayout: ImageGalleryLayout.FOUR_GRID,
-      kind: SocialProofWidgetKind.STATIC,
+      kind: WidgetKind.STATIC,
       variant: WidgetWrapperVariant.INLINE_WITH_BORDER,
       promptCarouselRows: PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
       primaryButtonVariant: PromptButtonVariant.DARK,
@@ -200,7 +202,7 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       type: WidgetTypeV3.SocialProofV3,
 
       imageGalleryLayout: ImageGalleryLayout.SINGLE,
-      kind: SocialProofWidgetKind.STATIC,
+      kind: WidgetKind.STATIC,
       variant: WidgetWrapperVariant.CARD_NO_BORDER,
       promptCarouselRows: PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
       primaryButtonVariant: PromptButtonVariant.DARK,
@@ -213,7 +215,7 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       type: WidgetTypeV3.SocialProofV3,
 
       imageGalleryLayout: ImageGalleryLayout.FOUR_HORIZONTAL,
-      kind: SocialProofWidgetKind.STATIC,
+      kind: WidgetKind.STATIC,
       variant: WidgetWrapperVariant.CARD_WITH_BORDER,
       promptCarouselRows: PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
       primaryButtonVariant: PromptButtonVariant.DARK,
@@ -246,5 +248,15 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       image: mockImages[0],
       hideTextField: false,
     },
+    'product-card-test-widget': {
+      widgetConfigId: 'product-card-test-widget',
+      contentId: 'product-card-test-widget',
+      type: WidgetTypeV3.ProductCardV3,
+      promptButtonType: PromptButtonVariant.LIGHT,
+      italicizeHeadline: false,
+      fallbackColor: '#F9F6EA',
+      imageSrc:
+        'https://www.bandolierstyle.com/cdn/shop/files/Lily17_Black_Gold_Chrome_MOD_Dec25_6.jpg?v=1765844272',
+    },
   },
 };

package/src/contexts/hardcopyContext/hardcopyContext.tsx

@@ -137,6 +137,35 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
       textFieldPlaceholderText: 'Ask me anything...',
     },
   },
+  [WidgetTypeV3.ProductCardV3]: {
+    language: 'en',
+    values: {
+      headline: 'Discover Your Perfect Style',
+      animatedText: [
+        'the perfect outfit for any occasion',
+        'trending fashion that fits your lifestyle',
+        'quality pieces that last',
+      ],
+      prompts: [
+        'What are your best sellers?',
+        'Show me summer dresses',
+        'Do you have free shipping?',
+        'What sizes are available?',
+        'Can I return items?',
+      ],
+      placeholder: 'Ask me anything...',
+    },
+  },
+  [WidgetTypeV3.FloatingChatV3]: {
+    language: 'en',
+    values: {
+      welcomeMessageTitle: 'Welcome to Envive AI',
+      welcomeMessageText:
+        'Your personal shopper trained on the collective knowledge of thousands of real experts!',
+      chatFooterTextFieldPlaceholderText: 'Ask me anything...',
+      disclaimerText: 'This is a disclaimer...',
+    },
+  },
 };
 
 const HardcopyContext = createContext<HardcopyContextType | undefined>(undefined);

package/src/contexts/newOrgConfigContext/newOrgConfigContext.tsx

@@ -25,7 +25,6 @@ export const NewOrgConfigProvider: React.FC<NewOrgConfigProviderProps> = ({
   const setNewOrgConfig = useSetAtom(newOrgConfigAtom);
 
   const { data: fetchedConfig, loading, error } = useUIConfig();
-  console.log('NewOrgConfigProvider: newConfig', fetchedConfig, loading, error);
 
   const contextValue = useMemo(() => {
     if (!orgShortName || loading) {

package/src/contexts/salesAgentContext/chatAPI.ts

@@ -1,24 +1,35 @@
 // This component will interact with the backend API to get the responses from the sales agent.
 
 import { PageVisitCategory, UserEventCategory } from '@spiffy-ai/commerce-api-client';
-import { Suggestion, UserEvent } from 'src/application/models';
+import {
+  FormSubmittedAttributes,
+  MessageRole,
+  MessageType,
+  Suggestion,
+  UserEvent,
+} from 'src/application/models';
 import { useSetAtom } from 'jotai';
 import { useCallback } from 'react';
 import { v4 as uuid } from 'uuid';
+import { formSubmitAtom, replyEventCategoryAtom } from 'src/atoms/chat';
 import { queueUserEventAtom } from 'src/atoms/chat/messageQueue';
+import { SpiffyMetricsEventName, useAmplitude } from '../amplitudeContext';
 
 export interface SalesAgentChatAPI {
   logPageVisit: ({ pageVisitCategory }: { pageVisitCategory: PageVisitCategory }) => void;
   logUserEvent: (event: UserEvent) => void;
   onSuggestionClicked: (suggestion: Suggestion) => void;
-  onTypedMessageSubmitted: ({ query }: { query: string }) => void;
-  onFormResponseSubmitted: (formResponse: any) => void; // TODO: Figure out the right type
+  onTypedMessageSubmitted: ({ query, userTyped }: { query: string; userTyped: boolean }) => void;
+  onFormResponseSubmitted: (formResponse: FormSubmittedAttributes) => void;
 }
 
 export const useSalesAgentChatAPI = () => {
   // TODO: Each of these functions will trigger both the necessary amplitude events and initiate the
   // necessary actions to trigger the backend API
   const queueUserEvent = useSetAtom(queueUserEventAtom);
+  const setReplyEventCategory = useSetAtom(replyEventCategoryAtom);
+  const setFormSubmit = useSetAtom(formSubmitAtom);
+  const { trackEvent } = useAmplitude();
 
   const logPageVisit = useCallback(
     ({ pageVisitCategory }: { pageVisitCategory: PageVisitCategory }) => {
@@ -44,6 +55,13 @@ export const useSalesAgentChatAPI = () => {
   );
   const onSuggestionClicked = useCallback(
     (suggestion: Suggestion) => {
+      trackEvent({
+        eventName: SpiffyMetricsEventName.ChatSuggestionClicked,
+        eventProps: {
+          suggestionId: suggestion.id,
+          content: suggestion.content,
+        },
+      });
       const event: UserEvent = {
         eventId: uuid(),
         category: UserEventCategory.SuggestionClicked,
@@ -55,25 +73,53 @@ export const useSalesAgentChatAPI = () => {
       };
       queueUserEvent(event);
     },
-    [queueUserEvent],
+    [queueUserEvent, trackEvent],
   );
   const onTypedMessageSubmitted = useCallback(
-    ({ query }: { query: string }) => {
+    ({ query, userTyped }: { query: string; userTyped: boolean }) => {
+      const eventId = uuid();
+      trackEvent({
+        eventName: SpiffyMetricsEventName.ChatUserMessageInput,
+        eventProps: {
+          query,
+          user_typed: userTyped,
+          message_id: eventId,
+          message_role: MessageRole.User,
+          message_type: MessageType.QueryTyped,
+          message_metadata: {
+            content: query,
+            created_at: new Date().toISOString(),
+            user_typed: userTyped,
+          },
+        },
+      });
       const event: UserEvent = {
-        eventId: uuid(),
+        eventId,
         category: UserEventCategory.QueryTyped,
         createdAt: new Date().toISOString(),
         attributes: {
           query,
+          userTyped,
         },
       };
       queueUserEvent(event);
     },
-    [queueUserEvent],
+    [queueUserEvent, trackEvent],
+  );
+  const onFormResponseSubmitted = useCallback(
+    (form: FormSubmittedAttributes) => {
+      setReplyEventCategory(UserEventCategory.FormSubmitted);
+      setFormSubmit(form);
+      const event: UserEvent = {
+        eventId: uuid(),
+        category: UserEventCategory.FormSubmitted,
+        createdAt: new Date().toISOString(),
+        attributes: form,
+      };
+      queueUserEvent(event);
+    },
+    [queueUserEvent, setReplyEventCategory, setFormSubmit],
   );
-  const onFormResponseSubmitted = useCallback(() => {
-    // TODO: Implement the form response submitted
-  }, []);
 
   return {
     logPageVisit,

package/src/contexts/salesAgentContext/formSubmittedUtils.ts

@@ -0,0 +1,57 @@
+import { Message, MessageRole, MessageType } from 'src/application/models/message';
+import { UserEvent } from 'src/application/models';
+
+/**
+ * Searches the chat history for the form message by form response ID and builds the display string for the form.
+ */
+export const buildFormSubmittedDisplayContent = (
+  messages: Message[][],
+  formResponseId: string,
+  filledSchema: Record<string, unknown>,
+): string => {
+  let formFields: { key: string; title: string }[] = [];
+  // Find the form message in the chat history
+  for (const turn of messages) {
+    for (const msg of turn) {
+      if (
+        msg.type === MessageType.Form &&
+        msg.id === formResponseId &&
+        msg.metadata &&
+        'fields' in msg.metadata &&
+        Array.isArray(msg.metadata.fields)
+      ) {
+        formFields = msg.metadata.fields.map((field: { key: string; title: string }) => ({
+          key: field.key,
+          title: field.title,
+        }));
+        break;
+      }
+    }
+    if (formFields.length > 0) break;
+  }
+  // Build the display string for the form
+  const formStringContent =
+    formFields.length > 0
+      ? formFields.map(({ key, title }) => `${title}: ${filledSchema[key] ?? ''}`).join('\n')
+      : Object.entries(filledSchema)
+          .map(([key, value]) => `${key}: ${value}`)
+          .join('\n');
+  return formStringContent;
+};
+
+/**
+ * Creates a user message representing a submitted form for display in the chat.
+ */
+export const createFormSubmittedUserMessage = (
+  userEvent: UserEvent,
+  formSubmittedContent: string,
+): Message => {
+  const newMessage: Message = {
+    id: userEvent.eventId,
+    role: MessageRole.User,
+    type: MessageType.QueryTyped,
+    createdAt: userEvent.createdAt,
+    metadata: { content: formSubmittedContent },
+  };
+  return newMessage;
+};