@envive-ai/react-widgets-v3 0.3.2

package/src/hocs/withBaseWidget/types.ts

@@ -0,0 +1,39 @@
+import { RefObject } from 'react';
+import { SpiffyMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { HardcopyResponse } from '@envive-ai/react-hooks/contexts/hardcopyContext';
+import {
+  OrgUIConfigV3,
+  WidgetConfigV3,
+  WidgetTypeV3,
+} from '@envive-ai/react-hooks/contexts/typesV3';
+
+export interface BaseWidgetProps {
+  widgetConfigId?: string;
+  widgetType: WidgetTypeV3;
+  observedWidget?: RefObject<BaseWidgetProps>;
+  hardcopyContent?: HardcopyResponse;
+  widgetConfig?: WidgetConfigV3;
+  uiConfig?: OrgUIConfigV3;
+  isLoading?: boolean;
+  isHardcopyLoading?: boolean;
+  isPageLoading?: boolean;
+  isWidgetConfigLoading?: boolean;
+  isUiConfigLoading?: boolean;
+}
+
+export interface WithBaseWidgetOptions {
+  /**
+   * The Amplitude event name to track when the widget becomes visible.
+   * Defaults to a generic component visible event if not provided.
+   */
+  visibilityEventName?: SpiffyMetricsEventName;
+  /**
+   * Additional properties to include with the visibility event.
+   */
+  visibilityEventProps?: Record<string, unknown>;
+  /**
+   * Root margin for the IntersectionObserver (e.g., '0px', '100px').
+   * Defaults to '0px'.
+   */
+  rootMargin?: string;
+}

package/src/hocs/withBaseWidget/withBaseWidget.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useRef, useState } from 'react';
+
+import {
+  SpiffyMetricsEventName,
+  useAmplitude,
+} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { HardcopyResponse, useHardcopy } from '@envive-ai/react-hooks/contexts/hardcopyContext';
+import { usePage } from '@envive-ai/react-hooks/contexts/pageContext';
+import { useWidgetConfig } from '@envive-ai/react-hooks/contexts/widgetConfigContext';
+import { OrgUIConfigV3, WidgetConfigV3 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { useUiConfig } from '@envive-ai/react-hooks/contexts/uiConfigContext';
+
+import { BaseWidgetProps, WithBaseWidgetOptions } from './types';
+
+export function withBaseWidget<P extends BaseWidgetProps>(
+  Widget: React.ComponentType<P>,
+  options?: WithBaseWidgetOptions,
+) {
+  const WrappedWidget = (props: P) => {
+    const { widgetConfigId, widgetType } = props;
+    const widgetRef = useRef<HTMLDivElement>(null);
+    const hasTrackedEvent = useRef(false);
+    const { trackEvent, isReady } = useAmplitude();
+
+    const [hardcopyContent, setHardcopyContent] = useState<HardcopyResponse | undefined>(undefined);
+    const { getHardcopy, isLoading: isHardcopyLoading } = useHardcopy();
+
+    const { userEvent, isLoading: isPageLoading } = usePage();
+
+    const [widgetConfig, setWidgetConfig] = useState<WidgetConfigV3 | undefined>(undefined);
+    const { getWidgetConfig, isLoading: isWidgetConfigLoading } = useWidgetConfig();
+
+    const [uiConfig, setUiConfig] = useState<OrgUIConfigV3 | undefined>(undefined);
+    const { getUiConfig, isLoading: isUiConfigLoading } = useUiConfig();
+
+    const isLoading =
+      isHardcopyLoading || isPageLoading || isWidgetConfigLoading || isUiConfigLoading;
+
+    useEffect(() => {
+      if (!isReady || hasTrackedEvent.current || !widgetRef.current) {
+        return undefined;
+      }
+
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting && !hasTrackedEvent.current) {
+            const eventName =
+              options?.visibilityEventName || SpiffyMetricsEventName.ChatComponentVisible;
+
+            trackEvent({
+              eventName,
+              eventProps: {
+                widget_config_id: widgetConfigId,
+                widget_type: widgetType,
+                ...options?.visibilityEventProps,
+              },
+            });
+
+            hasTrackedEvent.current = true;
+            observer.disconnect();
+          }
+        },
+        {
+          rootMargin: options?.rootMargin || '0px',
+        },
+      );
+
+      observer.observe(widgetRef.current);
+
+      return () => {
+        observer.disconnect();
+      };
+    }, [isReady, widgetConfigId, widgetType, trackEvent]);
+
+    useEffect(() => {
+      if (!widgetType || !userEvent) {
+        return;
+      }
+      getHardcopy({ widgetType, userEvent })
+        .then(setHardcopyContent)
+        .catch(() => {
+          // Silently handle errors - widget will render without hardcopy content
+        });
+    }, [widgetConfigId, widgetType, getHardcopy, userEvent]);
+
+    useEffect(() => {
+      getUiConfig()
+        .then(setUiConfig)
+        .catch(() => {
+          // Silently handle errors - widget will render without ui config
+        });
+    }, [getUiConfig, widgetConfigId, widgetType]);
+
+    useEffect(() => {
+      if (!widgetConfigId || !widgetType) {
+        return;
+      }
+
+      getWidgetConfig({ widgetConfigId, widgetType })
+        .then(setWidgetConfig)
+        .catch(e => {
+          console.error('Error getting widget config', widgetConfigId, widgetType, e);
+          // Silently handle errors - widget will render without widget config
+        });
+    }, [widgetConfigId, widgetType, getWidgetConfig]);
+
+    return (
+      <Widget
+        {...props}
+        isLoading={isLoading}
+        isHardcopyLoading={isHardcopyLoading}
+        isPageLoading={isPageLoading}
+        isWidgetConfigLoading={isWidgetConfigLoading}
+        isUiConfigLoading={isUiConfigLoading}
+        uiConfig={uiConfig}
+        widgetConfig={widgetConfig}
+        hardcopyContent={hardcopyContent}
+        observedWidget={widgetRef}
+      />
+    );
+  };
+
+  WrappedWidget.displayName = `withBaseWidget(${Widget.displayName || Widget.name || 'Component'})`;
+
+  return WrappedWidget;
+}

package/src/stories/FloatingChatWidget.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  PageVisitCategory,
+  useSalesAgent,
+} from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { useEffect } from 'react';
+import { v4 as uuid } from 'uuid';
+import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { FloatingChatWidget } from '../widgets/FloatingChatWidget';
+
+const meta = {
+  title: 'Widgets V3/FloatingChatWidget',
+  component: FloatingChatWidget,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'FloatingChatWidget is a widget wrapper around FloatingChat that includes base widget functionality such as visibility tracking, widget config fetching and hardcopy content fetching. The widget renders a floating chat interface that allows users to interact with the sales agent.',
+      },
+    },
+  },
+  decorators: [
+    Story => {
+      const { logPageVisit, logUserEvent } = useSalesAgent();
+
+      useEffect(() => {
+        logUserEvent({
+          eventId: uuid(),
+          category: UserEventCategory.AppLoaded,
+          createdAt: new Date().toISOString(),
+        });
+        logPageVisit({ pageVisitCategory: PageVisitCategory.Homepage });
+      }, []);
+
+      return <Story />;
+    },
+  ],
+} satisfies Meta<typeof FloatingChatWidget>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Experiment with different widgetConfigId values. The widget will fetch configuration from the widget config based on the widgetConfigId.',
+      },
+    },
+  },
+};

package/src/stories/PromptButtonCarouselWithImageWidget.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PromptButtonCarouselWithImageWidget } from '../widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget';
+
+const meta = {
+  title: 'Widgets V3/PromptButtonCarouselWithImageWidget',
+  component: PromptButtonCarouselWithImageWidget,
+  tags: ['autodocs'],
+  args: {
+    widgetConfigId: 'prompt-button-carousel-with-image-test-widget',
+  },
+  argTypes: {
+    widgetConfigId: {
+      control: 'text',
+      description:
+        'Unique identifier for the widget configuration. The widget will fetch the widget config and hardcopy content based on this ID.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'PromptButtonCarouselWithImageWidget is a widget wrapper around PromptButtonCarouselWithImage that includes base widget functionality such as visibility tracking, widget config fetching and hardcopy content fetching. The widget automatically fetches title label, prompt button texts, text field placeholder, and image configuration from hardcopy and widget config based on the widgetConfigId. The image is displayed on mobile devices only.',
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <div
+        style={{
+          padding: '1rem',
+          maxWidth: '100%',
+          overflow: 'hidden',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof PromptButtonCarouselWithImageWidget>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Interactive playground to experiment with different widgetConfigId values. The widget will fetch title, prompt button texts, text field placeholder, and image configuration from hardcopy content and widget config based on the widgetConfigId.',
+      },
+    },
+  },
+};

package/src/stories/PromptCarouselWidget.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PromptCarouselWidget } from '../widgets/PromptCarouselWidget/PromptCarouselWidget';
+
+const meta = {
+  title: 'Widgets V3/PromptCarouselWidget',
+  component: PromptCarouselWidget,
+  tags: ['autodocs'],
+  args: {
+    widgetConfigId: 'prompt-carousel-test-light-widget',
+  },
+  argTypes: {
+    widgetConfigId: {
+      control: 'text',
+      description:
+        'Unique identifier for the widget configuration. The widget will fetch the widget config based on this ID.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'PromptCarouselWidget is a widget wrapper around PromptCarousel that includes base widget functionality such as visibility tracking, widget config fetching and hardcopy content fetching. The widget automatically fetches prompt button texts from hardcopy and widget config based on the widgetConfigId.',
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <div
+        style={{
+          padding: '1rem',
+          maxWidth: '100%',
+          overflow: 'hidden',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof PromptCarouselWidget>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Experiment with different widgetConfigId values. The widget will fetch prompt button texts from hardcopy content and widget config based on the widgetConfigId.',
+      },
+    },
+  },
+};

package/src/stories/SalesAgentTest/SalesAgentTest.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { SalesAgentTest } from './SalesAgentTest';
+
+const meta = {
+  title: 'Widgets/Test/SalesAgentTest',
+  component: SalesAgentTest,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof SalesAgentTest>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/stories/SalesAgentTest/SalesAgentTest.tsx

@@ -0,0 +1,111 @@
+import {
+  PageVisitCategory,
+  SuggestionCategory,
+  useSalesAgent,
+} from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { useState } from 'react';
+
+export const SalesAgentTest = () => {
+  const {
+    suggestions,
+    messages,
+    pendingMessages,
+    isResponseStreaming,
+    isPendingResponse,
+    logPageVisit,
+    onSuggestionClicked,
+    onTypedMessageSubmitted,
+    onFormResponseSubmitted,
+  } = useSalesAgent();
+
+  const [query, setQuery] = useState('');
+
+  return (
+    <div>
+      <div>Messages: {messages.length}</div>
+      <div>Pending Messages: {pendingMessages.length}</div>
+      <div>Is Response Streaming: {isResponseStreaming.toString()}</div>
+      <div>Is Pending Response: {isPendingResponse.toString()}</div>
+      <div>
+        <button
+          type="button"
+          onClick={() => logPageVisit({ pageVisitCategory: PageVisitCategory.Homepage })}
+        >
+          Log Page Visit
+        </button>
+      </div>
+      <div>
+        <button
+          type="button"
+          onClick={() =>
+            onSuggestionClicked({
+              id: '1',
+              category: SuggestionCategory.ProductBased,
+              content: 'test',
+              createdAt: new Date().toISOString(),
+            })
+          }
+        >
+          On Suggestion Clicked
+        </button>
+      </div>
+      <div>
+        <input
+          type="text"
+          value={query}
+          onChange={e => setQuery(e.target.value)}
+          onKeyDown={e => {
+            if (e.key === 'Enter') {
+              onTypedMessageSubmitted({ query, userTyped: true });
+              setQuery('');
+            }
+          }}
+          placeholder="Enter your query"
+        />
+        <button
+          type="button"
+          onClick={() => {
+            onTypedMessageSubmitted({ query, userTyped: true });
+            setQuery('');
+          }}
+        >
+          On Typed Message Submitted
+        </button>
+      </div>
+      <div>
+        <button
+          type="button"
+          onClick={onFormResponseSubmitted}
+        >
+          On Form Response Submitted
+        </button>
+      </div>
+      <hr />
+      <div>Messages:</div>
+      <div style={{ maxHeight: '400px', overflowY: 'auto' }}>
+        {messages.map(message => (
+          <div key={message[0].id}>{JSON.stringify(message)}</div>
+        ))}
+      </div>
+      <hr />
+      <div>Suggestions:</div>
+      <div>
+        {suggestions.map(suggestion => (
+          <button
+            style={{
+              padding: '4px 8px',
+              borderRadius: '4px',
+              border: '1px solid #ccc',
+              margin: '4px 0',
+            }}
+            type="button"
+            key={suggestion.id}
+            onClick={() => onSuggestionClicked(suggestion)}
+          >
+            {suggestion.content}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/stories/SearchResults.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { WidgetType } from '@envive-ai/react-hooks/contexts/types';
+import { SearchResults } from '@envive-ai/react-widgets/SearchResults';
+
+const meta: Meta<typeof SearchResults> = {
+  title: 'Widgets V2/SearchResults',
+  component: SearchResults,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    widgetConfig: {
+      searchInputVariant: 'standard',
+      searchFilterSidebarVariant: 'darkButton',
+      productGridVariant: 'standard',
+      searchBoxPlaceholder: '',
+      widgetConfigId: '',
+      type: WidgetType.SearchResultsEntryPoint,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/stories/SearchZeroState.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { SearchEntryPointWidgetConfig, WidgetType } from '@envive-ai/react-hooks/contexts/types';
+import { SearchZeroState } from '@envive-ai/react-widgets/SearchZeroState';
+
+const meta = {
+  title: 'Widgets V2/SearchZeroState',
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    searchInputVariant: 'standard',
+    searchBoxPlaceholder: '',
+    widgetConfigId: '',
+    type: WidgetType.SearchZeroStateEntryPoint,
+    searchZeroStateVariant: 'backgroundTertiary',
+    suggestionButtonConfig: {
+      variant: 'primary',
+      hoverVariant: 'primary',
+      borderRadius: 'sm',
+    },
+    layout: 'input',
+    initialIsOpen: false,
+  },
+  argTypes: {
+    initialIsOpen: {
+      control: 'boolean',
+    },
+    searchZeroStateVariant: {
+      control: 'select',
+      options: [
+        'backgroundTertiary',
+        'backgroundPrimary',
+        'backgroundSecondary',
+        'backgroundQuaternary',
+      ],
+    },
+  },
+  render: (args: SearchEntryPointWidgetConfig & { initialIsOpen: boolean }) => (
+    <SearchZeroState
+      widgetConfig={{ ...args }}
+      initialIsOpen={args.initialIsOpen}
+    />
+  ),
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/stories/SocialProofFlowWidget.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SocialProofFlowWidget } from '../widgets/SocialProofFlowWidget/SocialProofFlowWidget';
+
+const meta = {
+  title: 'Widgets V3/SocialProofFlowWidget',
+  component: SocialProofFlowWidget,
+  tags: ['autodocs'],
+  args: {
+    widgetConfigId: 'social-proof-test-widget-four-grid',
+  },
+  argTypes: {
+    widgetConfigId: {
+      control: 'select',
+      options: [
+        'social-proof-test-widget-four-grid',
+        'social-proof-test-widget-single',
+        'social-proof-test-widget-four-horizontal',
+      ],
+      description:
+        'Unique identifier for the widget configuration. The widget will fetch the widget config based on this ID.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'SocialProofFlowWidget is a widget wrapper around SocialProof, ChatPreviewLoading and ChatPreviewComparison that includes base widget functionality such as visibility tracking, widget config fetching and hardcopy content fetching. The widget automatically fetches social proof content (customer count, queries, images, prompt buttons) from hardcopy and widget config based on the widgetConfigId.',
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <div
+        style={{
+          padding: '1rem',
+          maxWidth: '100%',
+          overflow: 'hidden',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof SocialProofFlowWidget>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Experiment with different widgetConfigId values. The widget will fetch social proof content (customer count, queries, images, prompt buttons) from hardcopy content and widget config based on the widgetConfigId.',
+      },
+    },
+  },
+};
+
+export const FourGrid: Story = {
+  args: {
+    widgetConfigId: 'social-proof-test-widget-four-grid',
+  },
+};
+
+export const Single: Story = {
+  args: {
+    widgetConfigId: 'social-proof-test-widget-single',
+  },
+};
+
+export const FourHorizontal: Story = {
+  args: {
+    widgetConfigId: 'social-proof-test-widget-four-horizontal',
+  },
+};

package/src/stories/SuggestionBar.stories.tsx

@@ -0,0 +1,45 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { SuggestionBar, SuggestionBarLocationForMetrics } from 'src/widgets-v2/SuggestionBar';
+
+const meta: Meta<typeof SuggestionBar> = {
+  title: 'Widgets V2/SuggestionBar',
+  component: SuggestionBar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    animationSpeed: {
+      control: 'select',
+      options: ['none', 'standard', 'slow'],
+    },
+  },
+  render: args => (
+    <div style={{ width: '300px', height: '100px' }}>
+      <SuggestionBar {...args} />
+    </div>
+  ),
+};
+
+export default meta;
+type Story = StoryObj<typeof SuggestionBar>;
+
+export const Default: Story = {
+  args: {
+    id: 'suggestion-bar',
+    locationForMetrics: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+    buttonTexts: ['Button 1', 'Button 2', 'Button 3'],
+    buttonVariation: 'primary',
+    hoverButtonVariation: 'primary',
+    animationSpeed: 'none',
+    handleReply: () => {},
+    boldFirstButton: false,
+  },
+};
+
+export const Animated: Story = {
+  args: {
+    ...Default.args,
+    animationSpeed: 'standard',
+  },
+};