@envive-ai/react-widgets-v3 0.3.2

package/dist/hocs/withBaseWidget/withBaseWidget.cjs

@@ -0,0 +1,101 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
+let __envive_ai_react_hooks_contexts_hardcopyContext = require("@envive-ai/react-hooks/contexts/hardcopyContext");
+let __envive_ai_react_hooks_contexts_pageContext = require("@envive-ai/react-hooks/contexts/pageContext");
+let __envive_ai_react_hooks_contexts_widgetConfigContext = require("@envive-ai/react-hooks/contexts/widgetConfigContext");
+let __envive_ai_react_hooks_contexts_uiConfigContext = require("@envive-ai/react-hooks/contexts/uiConfigContext");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/hocs/withBaseWidget/withBaseWidget.tsx
+function withBaseWidget(Widget, options) {
+	const WrappedWidget = (props) => {
+		const { widgetConfigId, widgetType } = props;
+		const widgetRef = (0, react.useRef)(null);
+		const hasTrackedEvent = (0, react.useRef)(false);
+		const { trackEvent, isReady } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
+		const [hardcopyContent, setHardcopyContent] = (0, react.useState)(void 0);
+		const { getHardcopy, isLoading: isHardcopyLoading } = (0, __envive_ai_react_hooks_contexts_hardcopyContext.useHardcopy)();
+		const { userEvent, isLoading: isPageLoading } = (0, __envive_ai_react_hooks_contexts_pageContext.usePage)();
+		const [widgetConfig, setWidgetConfig] = (0, react.useState)(void 0);
+		const { getWidgetConfig, isLoading: isWidgetConfigLoading } = (0, __envive_ai_react_hooks_contexts_widgetConfigContext.useWidgetConfig)();
+		const [uiConfig, setUiConfig] = (0, react.useState)(void 0);
+		const { getUiConfig, isLoading: isUiConfigLoading } = (0, __envive_ai_react_hooks_contexts_uiConfigContext.useUiConfig)();
+		const isLoading = isHardcopyLoading || isPageLoading || isWidgetConfigLoading || isUiConfigLoading;
+		(0, react.useEffect)(() => {
+			if (!isReady || hasTrackedEvent.current || !widgetRef.current) return;
+			const observer = new IntersectionObserver(([entry]) => {
+				if (entry.isIntersecting && !hasTrackedEvent.current) {
+					trackEvent({
+						eventName: options?.visibilityEventName || __envive_ai_react_hooks_contexts_amplitudeContext.SpiffyMetricsEventName.ChatComponentVisible,
+						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
+		]);
+		(0, react.useEffect)(() => {
+			if (!widgetType || !userEvent) return;
+			getHardcopy({
+				widgetType,
+				userEvent
+			}).then(setHardcopyContent).catch(() => {});
+		}, [
+			widgetConfigId,
+			widgetType,
+			getHardcopy,
+			userEvent
+		]);
+		(0, react.useEffect)(() => {
+			getUiConfig().then(setUiConfig).catch(() => {});
+		}, [
+			getUiConfig,
+			widgetConfigId,
+			widgetType
+		]);
+		(0, react.useEffect)(() => {
+			if (!widgetConfigId || !widgetType) return;
+			getWidgetConfig({
+				widgetConfigId,
+				widgetType
+			}).then(setWidgetConfig).catch((e) => {
+				console.error("Error getting widget config", widgetConfigId, widgetType, e);
+			});
+		}, [
+			widgetConfigId,
+			widgetType,
+			getWidgetConfig
+		]);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Widget, {
+			...props,
+			isLoading,
+			isHardcopyLoading,
+			isPageLoading,
+			isWidgetConfigLoading,
+			isUiConfigLoading,
+			uiConfig,
+			widgetConfig,
+			hardcopyContent,
+			observedWidget: widgetRef
+		});
+	};
+	WrappedWidget.displayName = `withBaseWidget(${Widget.displayName || Widget.name || "Component"})`;
+	return WrappedWidget;
+}
+
+//#endregion
+exports.withBaseWidget = withBaseWidget;

package/dist/hocs/withBaseWidget/withBaseWidget.d.cts

@@ -0,0 +1,10 @@
+import { BaseWidgetProps, WithBaseWidgetOptions } from "./types.cjs";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+
+//#region src/hocs/withBaseWidget/withBaseWidget.d.ts
+declare function withBaseWidget<P extends BaseWidgetProps>(Widget: React.ComponentType<P>, options?: WithBaseWidgetOptions): {
+  (props: P): react_jsx_runtime4.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { withBaseWidget };

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

@@ -0,0 +1,10 @@
+import { BaseWidgetProps, WithBaseWidgetOptions } from "./types.js";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
+
+//#region src/hocs/withBaseWidget/withBaseWidget.d.ts
+declare function withBaseWidget<P extends BaseWidgetProps>(Widget: React.ComponentType<P>, options?: WithBaseWidgetOptions): {
+  (props: P): react_jsx_runtime13.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { withBaseWidget };

package/dist/hocs/withBaseWidget/withBaseWidget.js

@@ -0,0 +1,100 @@
+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";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/hocs/withBaseWidget/withBaseWidget.tsx
+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(void 0);
+		const { getHardcopy, isLoading: isHardcopyLoading } = useHardcopy();
+		const { userEvent, isLoading: isPageLoading } = usePage();
+		const [widgetConfig, setWidgetConfig] = useState(void 0);
+		const { getWidgetConfig, isLoading: isWidgetConfigLoading } = useWidgetConfig();
+		const [uiConfig, setUiConfig] = useState(void 0);
+		const { getUiConfig, isLoading: isUiConfigLoading } = useUiConfig();
+		const isLoading = isHardcopyLoading || isPageLoading || isWidgetConfigLoading || isUiConfigLoading;
+		useEffect(() => {
+			if (!isReady || hasTrackedEvent.current || !widgetRef.current) return;
+			const observer = new IntersectionObserver(([entry]) => {
+				if (entry.isIntersecting && !hasTrackedEvent.current) {
+					trackEvent({
+						eventName: options?.visibilityEventName || SpiffyMetricsEventName.ChatComponentVisible,
+						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(() => {});
+		}, [
+			widgetConfigId,
+			widgetType,
+			getHardcopy,
+			userEvent
+		]);
+		useEffect(() => {
+			getUiConfig().then(setUiConfig).catch(() => {});
+		}, [
+			getUiConfig,
+			widgetConfigId,
+			widgetType
+		]);
+		useEffect(() => {
+			if (!widgetConfigId || !widgetType) return;
+			getWidgetConfig({
+				widgetConfigId,
+				widgetType
+			}).then(setWidgetConfig).catch((e) => {
+				console.error("Error getting widget config", widgetConfigId, widgetType, e);
+			});
+		}, [
+			widgetConfigId,
+			widgetType,
+			getWidgetConfig
+		]);
+		return /* @__PURE__ */ jsx(Widget, {
+			...props,
+			isLoading,
+			isHardcopyLoading,
+			isPageLoading,
+			isWidgetConfigLoading,
+			isUiConfigLoading,
+			uiConfig,
+			widgetConfig,
+			hardcopyContent,
+			observedWidget: widgetRef
+		});
+	};
+	WrappedWidget.displayName = `withBaseWidget(${Widget.displayName || Widget.name || "Component"})`;
+	return WrappedWidget;
+}
+
+//#endregion
+export { withBaseWidget };

package/dist/hooks/dist/application/models/api/orgConfigResults.d.ts

@@ -0,0 +1 @@
+import "../frontendConfig.js";

package/dist/hooks/dist/application/models/frontendConfig.d.ts

@@ -0,0 +1 @@
+import "../../contexts/types.js";

package/dist/hooks/dist/contexts/amplitudeContext/amplitudeContext.d.ts

@@ -0,0 +1,2 @@
+import "../../services/amplitudeService/amplitudeService.js";
+import React from "react";

package/dist/hooks/dist/contexts/amplitudeContext/index.d.ts

@@ -0,0 +1,2 @@
+import { SpiffyMetricsEventName } from "../../services/amplitudeService/amplitudeService.js";
+import "./amplitudeContext.js";

package/dist/hooks/dist/contexts/featureFlagServiceContext/featureFlagServiceContext.d.ts

@@ -0,0 +1,2 @@
+import "../../application/models/api/orgConfigResults.js";
+import React from "react";

package/dist/hooks/dist/contexts/hardcopyContext/hardcopyContext.d.cts

@@ -0,0 +1,8 @@
+//#region ../hooks/dist/contexts/hardcopyContext/hardcopyContext.d.ts
+
+type HardcopyResponse = {
+  language: string;
+  values: Record<string, string | string[]>;
+};
+//#endregion
+export { HardcopyResponse };

package/dist/hooks/dist/contexts/hardcopyContext/hardcopyContext.d.ts

@@ -0,0 +1,11 @@
+import "../typesV3.js";
+import "react";
+
+//#region ../hooks/dist/contexts/hardcopyContext/hardcopyContext.d.ts
+
+type HardcopyResponse = {
+  language: string;
+  values: Record<string, string | string[]>;
+};
+//#endregion
+export { HardcopyResponse };

package/dist/hooks/dist/contexts/hardcopyContext/index.d.ts

@@ -0,0 +1 @@
+import { HardcopyResponse } from "./hardcopyContext.js";

package/dist/hooks/dist/contexts/types.d.cts

@@ -0,0 +1,44 @@
+//#region ../hooks/dist/contexts/types.d.ts
+
+interface AlphabeticFilterSorting {
+  type: 'alphabetic';
+}
+interface ProductCountFilterSorting {
+  type: 'productCount';
+}
+interface CustomFilterSorting {
+  type: 'custom';
+  map: Record<string, number>;
+}
+type FilterSorting = AlphabeticFilterSorting | ProductCountFilterSorting | CustomFilterSorting;
+interface BaseFilterConfig {
+  filterId: string;
+  displayName: string;
+}
+interface DynamicFilterConfig extends BaseFilterConfig {
+  type: 'dynamic';
+  attribute: string;
+  sorting: FilterSorting;
+}
+interface PriceFilterConfig extends BaseFilterConfig {
+  type: 'price';
+  bucketSize: number;
+}
+type FilterAttribute = DynamicFilterConfig | PriceFilterConfig;
+interface MerchantVariantSettings {
+  dynamicVariants: {
+    enabled: boolean;
+    refreshInterval?: number;
+  };
+}
+interface SearchConfig {
+  enableGlobalSearch: boolean;
+  searchFilterConfig: FilterAttribute[];
+  searchOverlayHeading?: string;
+  redirectSearchResultsUrl?: string;
+  additiveDynamicFilters?: boolean;
+  recommendedProducts?: string[];
+  recommendedProductsHeading?: string;
+}
+//#endregion
+export { type MerchantVariantSettings, type SearchConfig };

package/dist/hooks/dist/contexts/types.d.ts

@@ -0,0 +1,47 @@
+import "./typesV3.js";
+import "../application/models/api/orgConfigResults.js";
+
+//#region ../hooks/dist/contexts/types.d.ts
+
+interface AlphabeticFilterSorting {
+  type: 'alphabetic';
+}
+interface ProductCountFilterSorting {
+  type: 'productCount';
+}
+interface CustomFilterSorting {
+  type: 'custom';
+  map: Record<string, number>;
+}
+type FilterSorting = AlphabeticFilterSorting | ProductCountFilterSorting | CustomFilterSorting;
+interface BaseFilterConfig {
+  filterId: string;
+  displayName: string;
+}
+interface DynamicFilterConfig extends BaseFilterConfig {
+  type: 'dynamic';
+  attribute: string;
+  sorting: FilterSorting;
+}
+interface PriceFilterConfig extends BaseFilterConfig {
+  type: 'price';
+  bucketSize: number;
+}
+type FilterAttribute = DynamicFilterConfig | PriceFilterConfig;
+interface MerchantVariantSettings {
+  dynamicVariants: {
+    enabled: boolean;
+    refreshInterval?: number;
+  };
+}
+interface SearchConfig {
+  enableGlobalSearch: boolean;
+  searchFilterConfig: FilterAttribute[];
+  searchOverlayHeading?: string;
+  redirectSearchResultsUrl?: string;
+  additiveDynamicFilters?: boolean;
+  recommendedProducts?: string[];
+  recommendedProductsHeading?: string;
+}
+//#endregion
+export { type MerchantVariantSettings, type SearchConfig };

package/dist/hooks/dist/contexts/typesV3.d.cts

@@ -0,0 +1,201 @@
+import { CustomerServiceType } from "../types/customerService.cjs";
+import { MerchantVariantSettings, SearchConfig } from "./types.cjs";
+import { AnimationSpeed, PromptCarouselRows } from "@envive-ai/react-toolkit-v3/PromptCarousel";
+import { ImageGalleryImage, ImageGalleryLayout } from "@envive-ai/react-toolkit-v3/ImageGallery";
+import { PromptButtonVariant } from "@envive-ai/react-toolkit-v3/PromptButton";
+import { WidgetWrapperVariant } from "@envive-ai/react-toolkit-v3/WidgetWrapper";
+import { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
+import { DynamicLayout } from "@envive-ai/react-toolkit-v3/SocialProof";
+import { SparkleIconColor } from "@envive-ai/react-toolkit-v3/WelcomeMessage";
+
+//#region ../hooks/dist/contexts/typesV3.d.ts
+
+type ImageAspectRatio = '1/1' | '3/4';
+type ButtonColors = {
+  lightButtonBackgroundColor: string;
+  lightButtonIconColor: string;
+  darkButtonBackgroundColor: string;
+  darkButtonIconColor: string;
+};
+type Typography = {
+  titleFontFamily: string;
+  headerFontFamily: string;
+  bodyFontFamily: string;
+  fontSize?: {
+    t1: string;
+    t2: string;
+    t3: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    b1: string;
+    b2: string;
+    b3: string;
+    b4: string;
+    b5: string;
+    l1: string;
+    l2: string;
+  };
+  fontWeight?: {
+    rg: string;
+    md: string;
+    sb: string;
+  };
+  letterSpacing?: {
+    '0': string;
+    'wide-1': string;
+  };
+  lineHeight?: {
+    '124': number;
+    '120': number;
+    '118': number;
+    '116': number;
+    '114': number;
+    '148': number;
+    '140': number;
+    '128': number;
+    '130': number;
+    '133': number;
+  };
+};
+type LookAndFeelConfig = {
+  theme: Theme;
+  agentName: string;
+  chatHeaderLogoDarkSrc: string;
+  chatHeaderLogoLightSrc: string;
+  widgetLogoSrc: string;
+  hideWidgetLogo: boolean;
+  elementRadius: number;
+  imageAspectRatio: ImageAspectRatio;
+  buttonColors: ButtonColors;
+  typography: Typography;
+};
+declare enum ConfigVersionEnum {
+  V3 = "v3",
+  Deprecated = "deprecated",
+}
+type ConfigVersion = ConfigVersionEnum.V3 | ConfigVersionEnum.Deprecated | undefined;
+type Mode = 'dark' | 'light';
+type Position = 'bottomLeft' | 'middleLeft' | 'middleRight' | 'bottomRight';
+type ShowOptions = 'always' | 'postInteraction' | 'none';
+type Style = 'attached' | 'detached';
+type FloatingButtonConfig = {
+  position: Position;
+  backgroundColor?: string;
+  mode: Mode;
+  showOption: ShowOptions;
+  iconSVGSrc?: string;
+  style: Style;
+};
+type FloatingChatConfig = {
+  headerBackgroundColor?: string;
+  headerMode: Mode;
+  welcomeMessageIconColor: SparkleIconColor;
+  showVerifiedBuyer: boolean;
+  userQueryInputEnabled: boolean;
+  showEnviveLogo: boolean;
+  ignoreFirstModelResponse?: boolean;
+  neverShowSingleProductCards?: boolean;
+  welcomeMessageTitle: string;
+  welcomeMessageText: string;
+  chatFooterTextFieldPlaceholderText: string;
+};
+type CustomerServiceIntegration = {
+  enabled: boolean;
+  provider: CustomerServiceType;
+  suppressMerchantButton?: boolean;
+};
+type OrgUIConfigV3 = {
+  id?: string;
+  version: ConfigVersion;
+  shortName: string;
+  lookAndFeel: LookAndFeelConfig;
+  floatingButton: FloatingButtonConfig;
+  floatingChat: FloatingChatConfig;
+  merchantOverrideCss?: string;
+  customerServiceIntegration?: CustomerServiceIntegration;
+  merchantVariantSettings?: MerchantVariantSettings;
+  searchConfig?: SearchConfig;
+};
+declare enum WidgetTypeV3 {
+  PromptCarouselV3 = "PromptCarouselV3",
+  TitledPromptCarouselV3 = "TitledPromptCarouselV3",
+  SocialProofV3 = "SocialProofV3",
+  TypingAnimationV3 = "TypingAnimationV3",
+  ChatPreviewV3 = "ChatPreviewV3",
+  ChatPreviewComparisonV3 = "ChatPreviewComparisonV3",
+  ChatPreviewLoadingV3 = "ChatPreviewLoadingV3",
+  ImagePromptCardV3 = "ImagePromptCardV3",
+  PromptButtonCarouselWithImageV3 = "PromptButtonCarouselWithImageV3",
+  ImageBannerV3 = "ImageBannerV3",
+  SingleImagePromptV3 = "SingleImagePromptV3",
+  FloatingChatV3 = "FloatingChatV3",
+  FloatingButtonV3 = "FloatingButtonV3",
+}
+interface BaseWidgetConfig<T extends WidgetTypeV3> {
+  widgetConfigId: string;
+  type: T;
+  contentId?: string;
+}
+interface PromptCarouselWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.PromptCarouselV3> {
+  promptButtonType?: PromptButtonVariant;
+  boldFirstButton?: boolean;
+  promptCarouselRows?: PromptCarouselRows;
+  animationSpeed?: AnimationSpeed;
+}
+interface TitledPromptCarouselWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.TitledPromptCarouselV3> {
+  promptButtonType?: PromptButtonVariant;
+  boldFirstButton?: boolean;
+  promptCarouselRows?: PromptCarouselRows;
+  animationSpeed?: AnimationSpeed;
+}
+declare enum SocialProofWidgetKind {
+  STATIC = "static",
+  DYNAMIC = "dynamic",
+}
+interface SocialProofWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.SocialProofV3> {
+  kind: SocialProofWidgetKind;
+  variant: WidgetWrapperVariant;
+  hexCardColor?: string;
+  promptCarouselRows: PromptCarouselRows;
+  hideImage?: boolean;
+  imageGalleryLayout: Exclude<ImageGalleryLayout, 'TWO_SIDE'>;
+  hideTextField?: boolean;
+  primaryButtonVariant: Exclude<PromptButtonVariant, 'suggestedResponse' | 'ghost'>;
+  secondaryButtonVariant: Exclude<PromptButtonVariant, 'suggestedResponse' | 'ghost'>;
+  dynamicLayout?: DynamicLayout;
+  images?: ImageGalleryImage[];
+}
+interface TypingAnimationWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.TypingAnimationV3> {
+  widgetVariant?: WidgetWrapperVariant;
+  cardColor?: string;
+  promptButtonType?: PromptButtonVariant;
+  promptCarouselRows?: PromptCarouselRows;
+  showTextField?: boolean;
+}
+interface ChatPreviewComparisonWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.ChatPreviewComparisonV3> {
+  variant: WidgetWrapperVariant;
+  hexCardColor?: string;
+  hideImage?: boolean;
+  hideTextField?: boolean;
+}
+interface ChatPreviewLoadingWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.ChatPreviewLoadingV3> {
+  variant: WidgetWrapperVariant;
+  hexCardColor?: string;
+  hideTextField?: boolean;
+}
+interface ChatPreviewWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.ChatPreviewV3> {
+  variant: WidgetWrapperVariant;
+  hexCardColor?: string;
+  hideTextField?: boolean;
+}
+interface PromptButtonCarouselWithImageWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.PromptButtonCarouselWithImageV3> {
+  promptButtonType?: PromptButtonVariant;
+  image?: ImageGalleryImage;
+  hideTextField?: boolean;
+}
+interface FloatingChatWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.FloatingChatV3> {}
+type WidgetConfigV3 = PromptCarouselWidgetV3Config | SocialProofWidgetV3Config | TitledPromptCarouselWidgetV3Config | ChatPreviewComparisonWidgetV3Config | ChatPreviewLoadingWidgetV3Config | TypingAnimationWidgetV3Config | ChatPreviewWidgetV3Config | PromptButtonCarouselWithImageWidgetV3Config | FloatingChatWidgetV3Config;
+//#endregion
+//#endregion
+export { type OrgUIConfigV3, type WidgetConfigV3, WidgetTypeV3 };