@envive-ai/react-hooks 0.2.6-alpha.12 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-hooks",
-  "version": "0.2.6-alpha.12",
+  "version": "0.2.6",
   "description": "React hooks for connecting to Envive AI services.",
   "keywords": [
     "react",
@@ -31,7 +31,10 @@
     "build:watch": "tsdown --watch",
     "prepublish": "npm run build",
     "typecheck": "tsc",
-    "prepare-version": "node scripts/prepare-version.js"
+    "prepare-version": "node scripts/prepare-version.js",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:watch": "vitest --watch"
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^2.23.7",
@@ -43,16 +46,22 @@
     "uuid": "^13.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
     "@types/node": "^20.11.30",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@types/ua-parser-js": "^0.7.39",
+    "@vitejs/plugin-react": "^5.1.0",
+    "jsdom": "^27.1.0",
+    "patch-package": "^8.0.1",
     "tsdown": "^0.14.2",
-    "typescript": "~5.8.3"
+    "typescript": "~5.8.3",
+    "vitest": "^4.0.8"
   },
   "peerDependencies": {
-    "framer-motion": ">=12.23.24",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -250,10 +259,6 @@
       "import": "./dist/hooks/ElementObserver/index.js",
       "require": "./dist/hooks/ElementObserver/index.cjs"
     },
-    "./hooks/FloatingButtonVisibility": {
-      "import": "./dist/hooks/FloatingButtonVisibility/index.js",
-      "require": "./dist/hooks/FloatingButtonVisibility/index.cjs"
-    },
     "./hooks/GrabAndScroll": {
       "import": "./dist/hooks/GrabAndScroll/index.js",
       "require": "./dist/hooks/GrabAndScroll/index.cjs"
@@ -278,10 +283,6 @@
       "import": "./dist/hooks/IsSmallScreen/index.js",
       "require": "./dist/hooks/IsSmallScreen/index.cjs"
     },
-    "./hooks/LastInteraction": {
-      "import": "./dist/hooks/LastInteraction/index.js",
-      "require": "./dist/hooks/LastInteraction/index.cjs"
-    },
     "./hooks/LocalStorageOperations": {
       "import": "./dist/hooks/LocalStorageOperations/index.js",
       "require": "./dist/hooks/LocalStorageOperations/index.cjs"
@@ -445,4 +446,4 @@
       "./package.json": "./package.json"
     }
   }
-}
+}

package/src/application/utils/__tests__/divideArrays.test.ts

@@ -1,14 +1,13 @@
-// import { expect } from 'vitest';
-// import { divideArray } from '../divideArray';
+import { divideArray } from '../divideArray';
 
-// describe('divideArray', () => {
-//   it('should divide an array into 3 rows', () => {
-//     const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-//     const rows = divideArray(array, 3);
-//     expect(rows).toEqual([
-//       [1, 4, 7, 10],
-//       [2, 5, 8],
-//       [3, 6, 9],
-//     ]);
-//   });
-// });
+describe('divideArray', () => {
+  it('should divide an array into 3 rows', () => {
+    const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    const rows = divideArray(array, 3);
+    expect(rows).toEqual([
+      [1, 4, 7, 10],
+      [2, 5, 8],
+      [3, 6, 9],
+    ]);
+  });
+});

package/src/atoms/app/index.ts

@@ -32,8 +32,7 @@ export const userIdAtom = atom(
       return maybeUserId;
     }
 
-    const { getUserIdOrDefault } = useUserIdentity();
-    return getUserIdOrDefault();
+    throw new Error('userIdAtom is not set. Ensure that all use of userIdAtom is under UserIdentityProvider');
   },
   (_, set, value: string | undefined) => {
     set(internalUserIdAtom, value);

package/src/contexts/enviveConfigContext/__tests__/enviveConfigContext.test.tsx

@@ -0,0 +1,411 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import { Provider } from "jotai";
+import { useAtomValue } from "jotai";
+import { EnviveConfigProvider, useEnviveConfig } from "../enviveConfigContext";
+import { enviveConfigAtom } from "src/atoms/envive/enviveConfig";
+import Logger from "src/application/logging/logger";
+
+// Mock the Logger to avoid console output in tests
+vi.spyOn(Logger, "logDebug").mockImplementation(() => {});
+
+// Mock component that uses the useEnviveConfig hook
+const MockComponent: React.FC = () => {
+  const config = useEnviveConfig();
+
+  return (
+    <div data-testid="mock-component">
+      <div data-testid="amplitude-api-key">{config?.amplitudeApiKey || "not-set"}</div>
+      <div data-testid="base-url">{config?.baseUrl || "not-set"}</div>
+      <div data-testid="org-short-name">{config?.orgShortName || "not-set"}</div>
+      <div data-testid="identifying-prefix">{config?.identifyingPrefix || "not-set"}</div>
+      <div data-testid="env">{config?.env || "not-set"}</div>
+      <div data-testid="cdn-url">{config?.cdnUrl || "not-set"}</div>
+      <div data-testid="data-residency">{config?.dataResidency || "not-set"}</div>
+      <div data-testid="react-app-name">{config?.reactAppName || "not-set"}</div>
+      <div data-testid="context-source">{config?.contextSource || "not-set"}</div>
+      <div data-testid="org-level-api-key">{config?.orgLevelApiKey || "not-set"}</div>
+      <div data-testid="public-key">{config?.publicKey || "not-set"}</div>
+      <div data-testid="show">{config?.show?.toString() || "not-set"}</div>
+    </div>
+  );
+};
+
+// Component that directly reads from the atom to verify it's set
+const AtomReaderComponent: React.FC = () => {
+  const config = useAtomValue(enviveConfigAtom);
+
+  return (
+    <div data-testid="atom-reader">
+      <div data-testid="atom-amplitude-api-key">
+        {config?.amplitudeApiKey || "not-set"}
+      </div>
+      <div data-testid="atom-identifying-prefix">
+        {config?.identifyingPrefix || "not-set"}
+      </div>
+    </div>
+  );
+};
+
+describe("EnviveConfigProvider", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("Provider Integration with Jotai Store", () => {
+    it("should set the enviveConfigAtom when provider is mounted", async () => {
+      const testConfig = {
+        amplitudeApiKey: "test-amplitude-key",
+        baseUrl: "https://test-api.example.com",
+        orgShortName: "test-org",
+        identifyingPrefix: "test-prefix",
+        env: "test",
+        cdnUrl: "https://test-cdn.example.com",
+        dataResidency: "us",
+        reactAppName: "test-app",
+        contextSource: "test-source",
+        orgLevelApiKey: "test-org-key",
+        publicKey: "test-public-key",
+        show: true,
+      };
+
+      render(
+        <Provider>
+          <EnviveConfigProvider
+            amplitudeApiKey={testConfig.amplitudeApiKey}
+            baseUrl={testConfig.baseUrl}
+            orgShortName={testConfig.orgShortName}
+            identifyingPrefix={testConfig.identifyingPrefix}
+            env={testConfig.env}
+            cdnUrl={testConfig.cdnUrl}
+            dataResidency={testConfig.dataResidency}
+            reactAppName={testConfig.reactAppName}
+            contextSource={testConfig.contextSource}
+            orgLevelApiKey={testConfig.orgLevelApiKey}
+            publicKey={testConfig.publicKey}
+            show={testConfig.show}
+          >
+            <AtomReaderComponent />
+          </EnviveConfigProvider>
+        </Provider>
+      );
+
+      // Wait for the atom to be set (useEffect runs after render)
+      await waitFor(() => {
+        expect(screen.getByTestId("atom-amplitude-api-key")).toHaveTextContent(
+          testConfig.amplitudeApiKey
+        );
+      });
+
+      expect(screen.getByTestId("atom-identifying-prefix")).toHaveTextContent(
+        testConfig.identifyingPrefix
+      );
+    });
+
+    it("should update the atom when provider props change", async () => {
+      const initialConfig = {
+        amplitudeApiKey: "initial-key",
+        identifyingPrefix: "initial-prefix",
+      };
+
+      const { rerender } = render(
+        <Provider>
+          <EnviveConfigProvider
+            amplitudeApiKey={initialConfig.amplitudeApiKey}
+            identifyingPrefix={initialConfig.identifyingPrefix}
+          >
+            <AtomReaderComponent />
+          </EnviveConfigProvider>
+        </Provider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("atom-amplitude-api-key")).toHaveTextContent(
+          initialConfig.amplitudeApiKey
+        );
+      });
+
+      const updatedConfig = {
+        amplitudeApiKey: "updated-key",
+        identifyingPrefix: "updated-prefix",
+      };
+
+      rerender(
+        <Provider>
+          <EnviveConfigProvider
+            amplitudeApiKey={updatedConfig.amplitudeApiKey}
+            identifyingPrefix={updatedConfig.identifyingPrefix}
+          >
+            <AtomReaderComponent />
+          </EnviveConfigProvider>
+        </Provider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("atom-amplitude-api-key")).toHaveTextContent(
+          updatedConfig.amplitudeApiKey
+        );
+      });
+
+      expect(screen.getByTestId("atom-identifying-prefix")).toHaveTextContent(
+        updatedConfig.identifyingPrefix
+      );
+    });
+  });
+
+  describe("useEnviveConfig Hook Integration", () => {
+    it("should allow components to access config via useEnviveConfig hook", async () => {
+      const testConfig = {
+        amplitudeApiKey: "hook-test-key",
+        baseUrl: "https://hook-test-api.example.com",
+        orgShortName: "hook-test-org",
+        identifyingPrefix: "hook-prefix",
+        env: "production",
+        cdnUrl: "https://hook-test-cdn.example.com",
+        dataResidency: "eu",
+        reactAppName: "hook-test-app",
+        contextSource: "hook-source",
+        orgLevelApiKey: "hook-org-key",
+        publicKey: "hook-public-key",
+        show: false,
+      };
+
+      render(
+        <Provider>
+          <EnviveConfigProvider
+            amplitudeApiKey={testConfig.amplitudeApiKey}
+            baseUrl={testConfig.baseUrl}
+            orgShortName={testConfig.orgShortName}
+            identifyingPrefix={testConfig.identifyingPrefix}
+            env={testConfig.env}
+            cdnUrl={testConfig.cdnUrl}
+            dataResidency={testConfig.dataResidency}
+            reactAppName={testConfig.reactAppName}
+            contextSource={testConfig.contextSource}
+            orgLevelApiKey={testConfig.orgLevelApiKey}
+            publicKey={testConfig.publicKey}
+            show={testConfig.show}
+          >
+            <MockComponent />
+          </EnviveConfigProvider>
+        </Provider>
+      );
+
+      // Wait for the config to be available
+      await waitFor(() => {
+        expect(screen.getByTestId("amplitude-api-key")).toHaveTextContent(
+          testConfig.amplitudeApiKey
+        );
+      });
+
+      // Verify all config values are accessible via the hook
+      expect(screen.getByTestId("amplitude-api-key")).toHaveTextContent(
+        testConfig.amplitudeApiKey
+      );
+      expect(screen.getByTestId("base-url")).toHaveTextContent(
+        testConfig.baseUrl
+      );
+      expect(screen.getByTestId("org-short-name")).toHaveTextContent(
+        testConfig.orgShortName
+      );
+      expect(screen.getByTestId("identifying-prefix")).toHaveTextContent(
+        testConfig.identifyingPrefix
+      );
+      expect(screen.getByTestId("env")).toHaveTextContent(testConfig.env);
+      expect(screen.getByTestId("cdn-url")).toHaveTextContent(
+        testConfig.cdnUrl
+      );
+      expect(screen.getByTestId("data-residency")).toHaveTextContent(
+        testConfig.dataResidency
+      );
+      expect(screen.getByTestId("react-app-name")).toHaveTextContent(
+        testConfig.reactAppName
+      );
+      expect(screen.getByTestId("context-source")).toHaveTextContent(
+        testConfig.contextSource
+      );
+      expect(screen.getByTestId("org-level-api-key")).toHaveTextContent(
+        testConfig.orgLevelApiKey
+      );
+      expect(screen.getByTestId("public-key")).toHaveTextContent(
+        testConfig.publicKey
+      );
+      expect(screen.getByTestId("show")).toHaveTextContent(
+        testConfig.show.toString()
+      );
+    });
+
+    it("should return empty object when config is not set", () => {
+      // Component that uses the hook without provider
+      const UnwrappedComponent: React.FC = () => {
+        const config = useEnviveConfig();
+        return (
+          <div data-testid="unwrapped">
+            {config && Object.keys(config).length === 0 ? "empty" : "not-empty"}
+          </div>
+        );
+      };
+
+      render(
+        <Provider>
+          <UnwrappedComponent />
+        </Provider>
+      );
+
+      // The hook should return an empty object when config is not set
+      expect(screen.getByTestId("unwrapped")).toHaveTextContent("empty");
+    });
+
+    it("should handle optional props correctly", async () => {
+      const minimalConfig = {
+        identifyingPrefix: "minimal-prefix",
+      };
+
+      render(
+        <Provider>
+          <EnviveConfigProvider identifyingPrefix={minimalConfig.identifyingPrefix}>
+            <MockComponent />
+          </EnviveConfigProvider>
+        </Provider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("identifying-prefix")).toHaveTextContent(
+          minimalConfig.identifyingPrefix
+        );
+      });
+
+      // Optional props should show "not-set" when not provided
+      expect(screen.getByTestId("amplitude-api-key")).toHaveTextContent("not-set");
+      expect(screen.getByTestId("base-url")).toHaveTextContent("not-set");
+      expect(screen.getByTestId("org-short-name")).toHaveTextContent("not-set");
+    });
+
+    it("should handle featureOverrides and featureGates", async () => {
+      const featureOverrides = {
+        feature1: true,
+        feature2: false,
+      };
+
+      const featureGates = [
+        {
+          featureName: "testFeature",
+          enabled: true,
+        },
+      ] as any[];
+
+      const FeatureConfigComponent: React.FC = () => {
+        const config = useEnviveConfig();
+        return (
+          <div data-testid="feature-config">
+            <div data-testid="feature-overrides">
+              {JSON.stringify(config?.featureOverrides || {})}
+            </div>
+            <div data-testid="feature-gates">
+              {JSON.stringify(config?.featureGates || [])}
+            </div>
+          </div>
+        );
+      };
+
+      render(
+        <Provider>
+          <EnviveConfigProvider
+            identifyingPrefix="test"
+            featureOverrides={featureOverrides}
+            featureGates={featureGates}
+          >
+            <FeatureConfigComponent />
+          </EnviveConfigProvider>
+        </Provider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("feature-overrides")).toHaveTextContent(
+          JSON.stringify(featureOverrides)
+        );
+      });
+
+      expect(screen.getByTestId("feature-gates")).toHaveTextContent(
+        JSON.stringify(featureGates)
+      );
+    });
+  });
+
+  describe("Provider Context Integration", () => {
+    it("should provide config through React Context", async () => {
+      const testConfig = {
+        identifyingPrefix: "context-prefix",
+        orgShortName: "context-org",
+      };
+
+      render(
+        <Provider>
+          <EnviveConfigProvider
+            identifyingPrefix={testConfig.identifyingPrefix}
+            orgShortName={testConfig.orgShortName}
+          >
+            <MockComponent />
+          </EnviveConfigProvider>
+        </Provider>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("identifying-prefix")).toHaveTextContent(
+          testConfig.identifyingPrefix
+        );
+      });
+
+      expect(screen.getByTestId("org-short-name")).toHaveTextContent(
+        testConfig.orgShortName
+      );
+    });
+
+    it("should not render children when config is falsy", () => {
+      const TestChild: React.FC = () => <div data-testid="child">Child</div>;
+
+      // This shouldn't happen in practice, but testing the conditional render
+      const { container } = render(
+        <Provider>
+          <EnviveConfigProvider identifyingPrefix="" show={false}>
+            <TestChild />
+          </EnviveConfigProvider>
+        </Provider>
+      );
+
+      // Children should still render even if some props are falsy
+      // The condition `config ? children : null` checks if config object exists, not individual props
+      expect(screen.getByTestId("child")).toBeInTheDocument();
+    });
+  });
+
+  describe("Logger Integration", () => {
+    it("should log debug message when setting config", async () => {
+      const logSpy = vi.spyOn(Logger, "logDebug");
+
+      render(
+        <Provider>
+          <EnviveConfigProvider
+            identifyingPrefix="test"
+            amplitudeApiKey="test-key"
+          >
+            <div>Test</div>
+          </EnviveConfigProvider>
+        </Provider>
+      );
+
+      await waitFor(() => {
+        expect(logSpy).toHaveBeenCalledWith(
+          "EnviveConfigProvider: Setting EnviveConfig",
+          expect.objectContaining({
+            identifyingPrefix: "test",
+            amplitudeApiKey: "test-key",
+          })
+        );
+      });
+
+      logSpy.mockRestore();
+    });
+  });
+});
+

package/src/contexts/types.ts

@@ -43,7 +43,6 @@ type FloatingEntryPointConfig = {
   iconFillColor?: string;
   height?: number;
   fontSize?: number;
-  expandable?: boolean;
 };
 
 type WelcomeSectionVariant = "standard" | "outlined";
@@ -96,10 +95,10 @@ interface ChatPreviewFooterConfig {
   suggestionButtonVariant?: "dark" | "light" | "outlined";
   suggestionsBackground?: string; // used by: carbahn
   replyButtonIcon?:
-  | "send"
-  | "magnifyingGlass"
-  | "thinMagnifyingGlass"
-  | "searchIcon";
+    | "send"
+    | "magnifyingGlass"
+    | "thinMagnifyingGlass"
+    | "searchIcon";
   replyButtonText?: string;
   replyInputHasShadow?: boolean; // used by: spanx
   replyInputHasBorder?: boolean; // used by: spanx
@@ -790,30 +789,30 @@ interface BaseChatPreviewConfig {
 // Specific chat preview widget configurations
 interface ChatPreviewPostInteractionWidgetConfig
   extends BaseWidgetConfig<WidgetType.ChatPreviewPostInteraction>,
-  BaseChatPreviewConfig {
+    BaseChatPreviewConfig {
   chatPreviewVariant: ChatPreviewVariant;
   addSeparators?: boolean;
 }
 
 interface ChatPreviewIsLoadingWidgetConfig
   extends BaseWidgetConfig<WidgetType.ChatPreviewIsLoading>,
-  BaseChatPreviewConfig {}
+    BaseChatPreviewConfig {}
 
 interface ChatPreviewProductComparisonWidgetConfig
   extends BaseWidgetConfig<WidgetType.ChatPreviewProductComparison>,
-  BaseChatPreviewConfig {
+    BaseChatPreviewConfig {
   useLargeProductComparison?: boolean;
 }
 
 interface ChatPreviewV2WidgetConfig
   extends BaseWidgetConfig<WidgetType.ChatPreviewV2>,
-  BaseChatPreviewConfig {
+    BaseChatPreviewConfig {
   animatedTextConfig: ChatPreviewAnimatedTextConfig;
 }
 
 interface SocialProofV2WidgetConfig
   extends BaseWidgetConfig<WidgetType.SocialProofV2>,
-  BaseChatPreviewConfig {
+    BaseChatPreviewConfig {
   customerQuery?: string; // Default: 'asked which products are the best'
   imageConfig: SocialProofImageConfig;
 }
@@ -892,10 +891,10 @@ export interface UserQueryOptions {
   footerVariant?: "standard";
   replyButtonText?: string;
   replyButtonIcon?:
-  | "magnifyingGlass"
-  | "send"
-  | "thinMagnifyingGlass"
-  | "ai-search";
+    | "magnifyingGlass"
+    | "send"
+    | "thinMagnifyingGlass"
+    | "ai-search";
 }
 
 type SearchPromptVariant = "primary";