@envive-ai/react-widgets-v3 0.3.14 → 0.3.15-alpha.1

package/dist/src/hocs/withBaseWidget/__tests__/withBaseWidget.test.js

@@ -0,0 +1,452 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import { SpiffyMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { withBaseWidget } from '../withBaseWidget';
+// Mock IntersectionObserver
+class MockIntersectionObserver {
+    observe = vi.fn();
+    disconnect = vi.fn();
+    unobserve = vi.fn();
+    root = null;
+    rootMargin = '';
+    thresholds = [];
+    callback;
+    options;
+    constructor(callback, options) {
+        this.callback = callback;
+        this.options = options;
+        if (options) {
+            this.rootMargin = options.rootMargin || '';
+        }
+    }
+    // Helper method to trigger intersection
+    triggerIntersection(isIntersecting, target) {
+        const entry = {
+            isIntersecting,
+            intersectionRatio: isIntersecting ? 1 : 0,
+            boundingClientRect: {},
+            rootBounds: {},
+            target: target || {},
+            time: Date.now(),
+        };
+        this.callback([entry]);
+    }
+    // Helper method to get options
+    getOptions() {
+        return this.options;
+    }
+    // Required by IntersectionObserver interface but not used in tests
+    // eslint-disable-next-line class-methods-use-this
+    takeRecords() {
+        return [];
+    }
+}
+// Mock the contexts
+const mockTrackEvent = vi.fn();
+const mockGetHardcopy = vi.fn();
+vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
+    useAmplitude: () => ({
+        trackEvent: mockTrackEvent,
+        isReady: true,
+    }),
+    SpiffyMetricsEventName: {
+        ChatComponentVisible: 'Chat Component Visible',
+        SearchComponentVisible: 'Search Component Visible',
+    },
+}));
+vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
+    useHardcopy: () => ({
+        getHardcopy: mockGetHardcopy,
+    }),
+}));
+vi.mock('@envive-ai/react-hooks/contexts/pageContext', () => ({
+    usePage: () => ({
+        userEvent: {
+            id: 'test-user-event-id',
+            category: UserEventCategory.PageVisit,
+            created_at: '2025-01-01T00:00:00Z',
+            event_id: 'test-event-id',
+        },
+    }),
+}));
+vi.mock('@envive-ai/react-hooks/contexts/widgetConfigContext', () => ({
+    useWidgetConfig: () => ({
+        getWidgetConfig: vi.fn().mockResolvedValue({}),
+    }),
+}));
+vi.mock('@envive-ai/react-hooks/contexts/uiConfigContext', () => ({
+    useUiConfig: () => ({
+        getUiConfig: vi.fn().mockResolvedValue({}),
+    }),
+}));
+const TestWidget = ({ widgetConfigId, widgetType, hardcopyContent, observedWidget, testId = 'test-widget', children, }) => {
+    // Attach the ref to the root div so IntersectionObserver can observe it
+    // Note: The ref type is RefObject<HTMLDivElement> but BaseWidgetProps expects RefObject<BaseWidgetProps>
+    // This is a type mismatch in the implementation, but we handle it for testing
+    const ref = observedWidget;
+    return (_jsxs("div", { ref: ref, "data-testid": testId, children: [_jsx("div", { "data-testid": "widget-config-id", children: widgetConfigId }), _jsx("div", { "data-testid": "widget-type", children: widgetType }), hardcopyContent && (_jsxs("div", { "data-testid": "hardcopy-content", children: [_jsx("div", { "data-testid": "hardcopy-language", children: hardcopyContent.language }), _jsx("div", { "data-testid": "hardcopy-values", children: JSON.stringify(hardcopyContent.values) })] })), observedWidget && _jsx("div", { "data-testid": "observed-widget-ref", children: "Ref attached" }), children] }));
+};
+describe('withBaseWidget', () => {
+    let mockObserver;
+    let mockObservers;
+    let originalIntersectionObserver;
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockObservers = [];
+        // Set default mock for getHardcopy to return a resolved promise
+        mockGetHardcopy.mockResolvedValue({
+            language: 'en',
+            values: {},
+        });
+        // Store original IntersectionObserver
+        originalIntersectionObserver = global.IntersectionObserver;
+        // Replace IntersectionObserver with mock class
+        global.IntersectionObserver = class extends MockIntersectionObserver {
+            constructor(callback, options) {
+                super(callback, options);
+                // eslint-disable-next-line @typescript-eslint/no-this-alias
+                mockObserver = this;
+                mockObservers.push(this);
+            }
+        };
+    });
+    afterEach(() => {
+        // Restore original IntersectionObserver
+        global.IntersectionObserver = originalIntersectionObserver;
+    });
+    describe('IntersectionObserver setup', () => {
+        it('should create an IntersectionObserver with default rootMargin', () => {
+            const WrappedWidget = withBaseWidget(TestWidget);
+            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-1", widgetType: WidgetTypeV3.PromptCarouselV3 }));
+            expect(mockObserver).toBeDefined();
+            expect(mockObserver.rootMargin).toBe('0px');
+        });
+        it('should create an IntersectionObserver with custom rootMargin', () => {
+            const WrappedWidget = withBaseWidget(TestWidget, {
+                rootMargin: '100px',
+            });
+            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-2", widgetType: WidgetTypeV3.ChatPreviewV3 }));
+            expect(mockObserver).toBeDefined();
+            expect(mockObserver.rootMargin).toBe('100px');
+        });
+        it('should observe the widget element', () => {
+            const WrappedWidget = withBaseWidget(TestWidget);
+            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-3", widgetType: WidgetTypeV3.PromptCarouselV3 }));
+            expect(mockObserver.observe).toHaveBeenCalled();
+        });
+    });
+    describe('Amplitude event tracking', () => {
+        it('should track default event when widget becomes visible', async () => {
+            const WrappedWidget = withBaseWidget(TestWidget);
+            const { container } = render(_jsx(WrappedWidget, { widgetConfigId: "test-config-4", widgetType: WidgetTypeV3.PromptCarouselV3 }));
+            const widgetElement = container.querySelector('[data-testid="test-widget"]');
+            // Trigger intersection with the actual element
+            mockObserver.triggerIntersection(true, widgetElement);
+            await waitFor(() => {
+                expect(mockTrackEvent).toHaveBeenCalledWith({
+                    eventName: SpiffyMetricsEventName.ChatComponentVisible,
+                    eventProps: {
+                        widget_config_id: 'test-config-4',
+                        widget_type: WidgetTypeV3.PromptCarouselV3,
+                    },
+                });
+            });
+        });
+        it('should track custom event when widget becomes visible', async () => {
+            const WrappedWidget = withBaseWidget(TestWidget, {
+                visibilityEventName: SpiffyMetricsEventName.SearchComponentVisible,
+            });
+            const { container } = render(_jsx(WrappedWidget, { widgetConfigId: "test-config-5", widgetType: WidgetTypeV3.ChatPreviewV3 }));
+            const widgetElement = container.querySelector('[data-testid="test-widget"]');
+            // Trigger intersection
+            mockObserver.triggerIntersection(true, widgetElement);
+            await waitFor(() => {
+                expect(mockTrackEvent).toHaveBeenCalledWith({
+                    eventName: SpiffyMetricsEventName.SearchComponentVisible,
+                    eventProps: {
+                        widget_config_id: 'test-config-5',
+                        widget_type: WidgetTypeV3.ChatPreviewV3,
+                    },
+                });
+            });
+        });
+        it('should include custom event props when tracking', async () => {
+            const WrappedWidget = withBaseWidget(TestWidget, {
+                visibilityEventProps: {
+                    custom_prop: 'custom_value',
+                    another_prop: 123,
+                },
+            });
+            const { container } = render(_jsx(WrappedWidget, { widgetConfigId: "test-config-6", widgetType: WidgetTypeV3.SocialProofV3 }));
+            const widgetElement = container.querySelector('[data-testid="test-widget"]');
+            // Trigger intersection
+            mockObserver.triggerIntersection(true, widgetElement);
+            await waitFor(() => {
+                expect(mockTrackEvent).toHaveBeenCalledWith({
+                    eventName: SpiffyMetricsEventName.ChatComponentVisible,
+                    eventProps: {
+                        widget_config_id: 'test-config-6',
+                        widget_type: WidgetTypeV3.SocialProofV3,
+                        custom_prop: 'custom_value',
+                        another_prop: 123,
+                    },
+                });
+            });
+        });
+        it('should only track event once even if intersection happens multiple times', async () => {
+            const WrappedWidget = withBaseWidget(TestWidget);
+            const { container } = render(_jsx(WrappedWidget, { widgetConfigId: "test-config-7", widgetType: WidgetTypeV3.PromptCarouselV3 }));
+            const widgetElement = container.querySelector('[data-testid="test-widget"]');
+            // Trigger intersection multiple times
+            mockObserver.triggerIntersection(true, widgetElement);
+            mockObserver.triggerIntersection(false, widgetElement);
+            mockObserver.triggerIntersection(true, widgetElement);
+            await waitFor(() => {
+                expect(mockTrackEvent).toHaveBeenCalledTimes(1);
+            });
+        });
+        it('should disconnect observer after tracking event', async () => {
+            const WrappedWidget = withBaseWidget(TestWidget);
+            const { container } = render(_jsx(WrappedWidget, { widgetConfigId: "test-config-8", widgetType: WidgetTypeV3.PromptCarouselV3 }));
+            const widgetElement = container.querySelector('[data-testid="test-widget"]');
+            // Trigger intersection
+            mockObserver.triggerIntersection(true, widgetElement);
+            await waitFor(() => {
+                expect(mockObserver.disconnect).toHaveBeenCalled();
+            });
+        });
+        it('should not track event if widget is not intersecting', async () => {
+            const WrappedWidget = withBaseWidget(TestWidget);
+            const { container } = render(_jsx(WrappedWidget, { widgetConfigId: "test-config-9", widgetType: WidgetTypeV3.PromptCarouselV3 }));
+            const widgetElement = container.querySelector('[data-testid="test-widget"]');
+            // Trigger non-intersection
+            mockObserver.triggerIntersection(false, widgetElement);
+            // Wait a bit to ensure no event is tracked
+            await new Promise(resolve => {
+                setTimeout(resolve, 100);
+            });
+            expect(mockTrackEvent).not.toHaveBeenCalled();
+        });
+    });
+    describe('Hardcopy content fetching', () => {
+        it('should fetch hardcopy content when widget mounts', async () => {
+            const mockHardcopy = {
+                responseId: 'mock-response-id',
+                language: 'en',
+                values: {
+                    suggestionBarButtons: ['Button 1', 'Button 2'],
+                },
+            };
+            mockGetHardcopy.mockResolvedValue(mockHardcopy);
+            const WrappedWidget = withBaseWidget(TestWidget);
+            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-10", widgetType: WidgetTypeV3.PromptCarouselV3 }));
+            await waitFor(() => {
+                expect(mockGetHardcopy).toHaveBeenCalledWith({
+                    widgetType: WidgetTypeV3.PromptCarouselV3,
+                    userEvent: {
+                        id: 'test-user-event-id',
+                        category: UserEventCategory.PageVisit,
+                        created_at: '2025-01-01T00:00:00Z',
+                        event_id: 'test-event-id',
+                    },
+                });
+            });
+        });
+        it('should pass hardcopy content to widget', async () => {
+            const mockHardcopy = {
+                responseId: 'mock-response-id',
+                language: 'en',
+                values: {
+                    chatPreviewTitle: 'Chat Preview Title',
+                    typewriterTextPrefix: 'Want to know',
+                },
+            };
+            mockGetHardcopy.mockResolvedValue(mockHardcopy);
+            const WrappedWidget = withBaseWidget(TestWidget);
+            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-11", widgetType: WidgetTypeV3.ChatPreviewV3 }));
+            await waitFor(() => {
+                expect(screen.getByTestId('hardcopy-content')).toBeInTheDocument();
+                expect(screen.getByTestId('hardcopy-language')).toHaveTextContent('en');
+                expect(screen.getByTestId('hardcopy-values')).toHaveTextContent(JSON.stringify(mockHardcopy.values));
+            });
+        });
+        it('should not fetch hardcopy if widgetType is not provided', () => {
+            const WrappedWidget = withBaseWidget(TestWidget);
+            // @ts-expect-error - Testing invalid props
+            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-12" }));
+            expect(mockGetHardcopy).not.toHaveBeenCalled();
+        });
+        it('should handle hardcopy fetch errors gracefully', async () => {
+            const error = new Error('Failed to fetch hardcopy');
+            mockGetHardcopy.mockRejectedValue(error);
+            const WrappedWidget = withBaseWidget(TestWidget);
+            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-13", widgetType: WidgetTypeV3.PromptCarouselV3 }));
+            await waitFor(() => {
+                expect(mockGetHardcopy).toHaveBeenCalled();
+            });
+            // Wait a bit for the promise to reject and be handled
+            await new Promise(resolve => {
+                setTimeout(resolve, 100);
+            });
+            // Widget should still render without hardcopy
+            expect(screen.getByTestId('test-widget')).toBeInTheDocument();
+            expect(screen.queryByTestId('hardcopy-content')).not.toBeInTheDocument();
+        });
+    });
+    describe('Widget rendering', () => {
+        it('should render the wrapped widget with correct props', () => {
+            const WrappedWidget = withBaseWidget(TestWidget);
+            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-14", widgetType: WidgetTypeV3.PromptCarouselV3 }));
+            expect(screen.getByTestId('test-widget')).toBeInTheDocument();
+            expect(screen.getByTestId('widget-config-id')).toHaveTextContent('test-config-14');
+            expect(screen.getByTestId('widget-type')).toHaveTextContent(WidgetTypeV3.PromptCarouselV3);
+        });
+        it('should pass observedWidget ref to the widget', () => {
+            const WrappedWidget = withBaseWidget(TestWidget);
+            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-15", widgetType: WidgetTypeV3.PromptCarouselV3 }));
+            expect(screen.getByTestId('observed-widget-ref')).toBeInTheDocument();
+        });
+        it('should render widget children correctly', () => {
+            const WrappedWidget = withBaseWidget(TestWidget);
+            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-16", widgetType: WidgetTypeV3.PromptCarouselV3, children: _jsx("div", { "data-testid": "child-content", children: "Child Content" }) }));
+            expect(screen.getByTestId('child-content')).toBeInTheDocument();
+            expect(screen.getByTestId('child-content')).toHaveTextContent('Child Content');
+        });
+        it('should render widget with hardcopy content when available', async () => {
+            const mockHardcopy = {
+                responseId: 'mock-response-id',
+                language: 'en',
+                values: {
+                    imagePromptTitle: 'Image Prompt Title',
+                },
+            };
+            mockGetHardcopy.mockResolvedValue(mockHardcopy);
+            const WrappedWidget = withBaseWidget(TestWidget);
+            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-17", widgetType: WidgetTypeV3.ImagePromptCardV3 }));
+            await waitFor(() => {
+                expect(screen.getByTestId('hardcopy-content')).toBeInTheDocument();
+            });
+            expect(screen.getByTestId('hardcopy-language')).toHaveTextContent('en');
+            expect(screen.getByTestId('hardcopy-values')).toHaveTextContent(JSON.stringify(mockHardcopy.values));
+        });
+    });
+    describe('Integration tests', () => {
+        it('should handle full flow: visibility tracking + hardcopy rendering', async () => {
+            const mockHardcopy = {
+                responseId: 'mock-response-id',
+                language: 'en',
+                values: {
+                    suggestionBarButtons: ['Button 1', 'Button 2', 'Button 3'],
+                },
+            };
+            mockGetHardcopy.mockResolvedValue(mockHardcopy);
+            const WrappedWidget = withBaseWidget(TestWidget, {
+                visibilityEventName: SpiffyMetricsEventName.SearchComponentVisible,
+                visibilityEventProps: {
+                    test_integration: true,
+                },
+            });
+            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-integration", widgetType: WidgetTypeV3.PromptCarouselV3 }));
+            // Wait for hardcopy to be fetched and rendered
+            await waitFor(() => {
+                expect(screen.getByTestId('hardcopy-content')).toBeInTheDocument();
+            });
+            const widgetElement = screen.getByTestId('test-widget');
+            // Trigger intersection to track event
+            mockObserver.triggerIntersection(true, widgetElement);
+            // Verify both hardcopy and event tracking worked
+            await waitFor(() => {
+                expect(mockTrackEvent).toHaveBeenCalledWith({
+                    eventName: SpiffyMetricsEventName.SearchComponentVisible,
+                    eventProps: {
+                        widget_config_id: 'test-config-integration',
+                        widget_type: WidgetTypeV3.PromptCarouselV3,
+                        test_integration: true,
+                    },
+                });
+            });
+            expect(screen.getByTestId('hardcopy-language')).toHaveTextContent('en');
+            expect(screen.getByTestId('hardcopy-values')).toHaveTextContent(JSON.stringify(mockHardcopy.values));
+        });
+        it('should handle multiple widget instances independently', async () => {
+            const mockHardcopy1 = {
+                responseId: 'mock-response-id',
+                language: 'en',
+                values: { buttons: ['Button 1'] },
+            };
+            const mockHardcopy2 = {
+                responseId: 'mock-response-id',
+                language: 'en',
+                values: { buttons: ['Button 2'] },
+            };
+            mockGetHardcopy.mockResolvedValueOnce(mockHardcopy1).mockResolvedValueOnce(mockHardcopy2);
+            const WrappedWidget = withBaseWidget(TestWidget);
+            // Render both widgets simultaneously to test independence
+            render(_jsxs(_Fragment, { children: [_jsx(WrappedWidget, { widgetConfigId: "widget-1", widgetType: WidgetTypeV3.PromptCarouselV3, testId: "widget-1" }), _jsx(WrappedWidget, { widgetConfigId: "widget-2", widgetType: WidgetTypeV3.ChatPreviewV3, testId: "widget-2" })] }));
+            // Wait for both widgets to render and fetch hardcopy
+            await waitFor(() => {
+                expect(screen.getByTestId('widget-1')).toBeInTheDocument();
+                expect(screen.getByTestId('widget-2')).toBeInTheDocument();
+            });
+            // Verify both widgets have their own config IDs
+            const widget1ConfigId = screen
+                .getByTestId('widget-1')
+                .querySelector('[data-testid="widget-config-id"]');
+            const widget2ConfigId = screen
+                .getByTestId('widget-2')
+                .querySelector('[data-testid="widget-config-id"]');
+            expect(widget1ConfigId).toHaveTextContent('widget-1');
+            expect(widget2ConfigId).toHaveTextContent('widget-2');
+            // Verify both widgets fetched their own hardcopy independently
+            expect(mockGetHardcopy).toHaveBeenCalledWith({
+                widgetType: WidgetTypeV3.PromptCarouselV3,
+                userEvent: expect.any(Object),
+            });
+            expect(mockGetHardcopy).toHaveBeenCalledWith({
+                widgetType: WidgetTypeV3.ChatPreviewV3,
+                userEvent: expect.any(Object),
+            });
+            // Verify first widget can trigger intersection and track event
+            // When multiple widgets are rendered, each creates its own IntersectionObserver
+            // We need to find the observer that's observing widget-1's element
+            const widget1Element = screen.getByTestId('widget-1');
+            const widget2Element = screen.getByTestId('widget-2');
+            // Clear any previous calls to isolate this test
+            mockTrackEvent.mockClear();
+            // Find which observer is observing widget-1 by checking which one was called with widget1Element
+            // In our mock setup, the first observer should be for widget-1, second for widget-2
+            const widget1Observer = mockObservers[0];
+            const widget2Observer = mockObservers[1];
+            // Verify we have both observers
+            expect(widget1Observer).toBeDefined();
+            expect(widget2Observer).toBeDefined();
+            // Trigger intersection for widget-1 using its observer
+            widget1Observer.triggerIntersection(true, widget1Element);
+            await waitFor(() => {
+                // Verify that an event was tracked for widget-1
+                expect(mockTrackEvent).toHaveBeenCalled();
+                const { calls } = mockTrackEvent.mock;
+                // Find any call that matches widget-1's properties
+                const widget1Call = calls.find(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (call) => call[0]?.eventProps?.widget_config_id === 'widget-1' &&
+                    call[0]?.eventProps?.widget_type === WidgetTypeV3.PromptCarouselV3);
+                expect(widget1Call).toBeDefined();
+            });
+            // Verify widget-2 can also track independently
+            mockTrackEvent.mockClear();
+            widget2Observer.triggerIntersection(true, widget2Element);
+            await waitFor(() => {
+                expect(mockTrackEvent).toHaveBeenCalled();
+                const { calls } = mockTrackEvent.mock;
+                const widget2Call = calls.find(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (call) => call[0]?.eventProps?.widget_config_id === 'widget-2' &&
+                    call[0]?.eventProps?.widget_type === WidgetTypeV3.ChatPreviewV3);
+                expect(widget2Call).toBeDefined();
+            });
+        });
+    });
+});

package/dist/src/hocs/withBaseWidget/index.d.ts

@@ -0,0 +1,2 @@
+export { withBaseWidget } from './withBaseWidget';
+export type { BaseWidgetProps, WithBaseWidgetOptions } from './types';

package/dist/src/hocs/withBaseWidget/index.js

@@ -0,0 +1 @@
+export { withBaseWidget } from './withBaseWidget';

package/dist/src/hocs/withBaseWidget/types.d.ts

@@ -0,0 +1,33 @@
+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/dist/src/hocs/withBaseWidget/withBaseWidget.d.ts

@@ -0,0 +1,5 @@
+import { BaseWidgetProps, WithBaseWidgetOptions } from './types';
+export declare function withBaseWidget<P extends BaseWidgetProps>(Widget: React.ComponentType<P>, options?: WithBaseWidgetOptions): {
+    (props: P): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/src/hocs/withBaseWidget/withBaseWidget.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { SpiffyMetricsEventName, useAmplitude, } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { 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 { useUiConfig } from '@envive-ai/react-hooks/contexts/uiConfigContext';
+export function withBaseWidget(Widget, options) {
+    const WrappedWidget = (props) => {
+        const { widgetConfigId, widgetType } = props;
+        const widgetRef = useRef(null);
+        const hasTrackedEvent = useRef(false);
+        const { trackEvent, isReady } = useAmplitude();
+        const [hardcopyContent, setHardcopyContent] = useState(undefined);
+        const { getHardcopy, isLoading: isHardcopyLoading } = useHardcopy();
+        const { userEvent, isLoading: isPageLoading } = usePage();
+        const [widgetConfig, setWidgetConfig] = useState(undefined);
+        const { getWidgetConfig, isLoading: isWidgetConfigLoading } = useWidgetConfig();
+        const [uiConfig, setUiConfig] = useState(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 (_jsx(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/dist/src/stories/FloatingChatWidget.stories.d.ts

@@ -0,0 +1,25 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: {
+        ({ previewButtonOnly, previewChatAlwaysOpen, }?: import("../widgets/FloatingChatWidget").FloatingChatWidgetProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    tags: string[];
+    args: {};
+    argTypes: {};
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        previewButtonOnly?: boolean;
+        previewChatAlwaysOpen?: boolean;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;

package/dist/src/stories/FloatingChatWidget.stories.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 _jsx(Story, {});
+        },
+    ],
+};
+export default meta;
+export const Playground = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Experiment with different widgetConfigId values. The widget will fetch configuration from the widget config based on the widgetConfigId.',
+            },
+        },
+    },
+};