humanbehavior-js 0.0.5 → 0.0.8

package/dist/types/index.d.ts

@@ -1,3 +1,85 @@
+interface RedactionOptions {
+    redactedText?: string;
+    excludeSelectors?: string[];
+    userFields?: string[];
+}
+declare class RedactionManager {
+    private redactedText;
+    private userSelectedFields;
+    private excludeSelectors;
+    constructor(options?: RedactionOptions);
+    /**
+     * Set specific fields to be redacted
+     * @param fields Array of CSS selectors for fields to redact
+     */
+    setFieldsToRedact(fields: string[]): void;
+    /**
+     * Check if redaction is currently active (has fields selected)
+     */
+    isActive(): boolean;
+    /**
+     * Get the currently selected fields for redaction
+     */
+    getSelectedFields(): string[];
+    /**
+     * Process an event and redact sensitive data if needed
+     */
+    processEvent(event: any): any;
+    /**
+     * Redact sensitive data in input events
+     */
+    private redactInputEvent;
+    /**
+     * Redact sensitive data in DOM mutation events
+     */
+    private redactDOMEvent;
+    /**
+     * Check if a DOM change should be redacted based on its ID
+     */
+    private shouldRedactDOMChange;
+    /**
+     * Redact sensitive data in mouse/touch interaction events
+     */
+    private redactMouseEvent;
+    /**
+     * Redact sensitive data in full snapshot events
+     */
+    private redactFullSnapshot;
+    /**
+     * Recursively redact sensitive data in DOM nodes
+     */
+    private redactNode;
+    /**
+     * Check if a node should be redacted based on its attributes
+     */
+    private shouldRedactNode;
+    /**
+     * Check if a CSS selector would match a node based on its attributes
+     */
+    private selectorMatchesNode;
+    /**
+     * Basic selector matching for environments where matches() is not available
+     */
+    private basicSelectorMatch;
+    /**
+     * Check if an event is from a field that should be redacted
+     */
+    private isFieldSelected;
+    /**
+     * Check if an element should be redacted based on user-selected fields
+     */
+    private shouldRedactElement;
+    /**
+     * Get the original value of a redacted element (for debugging)
+     */
+    getOriginalValue(element: HTMLElement): string | undefined;
+    /**
+     * Check if an element is currently being redacted
+     */
+    isElementRedacted(element: HTMLElement): boolean;
+}
+declare const redactionManager: RedactionManager;
+
 declare global {
     interface Window {
         HumanBehaviorTracker: typeof HumanBehaviorTracker;
@@ -18,13 +100,19 @@ declare class HumanBehaviorTracker {
     private apiKey;
     private initialized;
     initializationPromise: Promise<void> | null;
-    constructor(apiKey: string | undefined, ingestionUrl: string | undefined);
+    private redactionManager;
+    constructor(apiKey: string | undefined, ingestionUrl?: string);
     private init;
     private ensureInitialized;
     static logToStorage(message: string): void;
     private setupPageUnloadHandler;
     viewLogs(): void;
-    identifyUser(userProperties: Record<string, any>): Promise<void>;
+    addUserInfo(userProperties: Record<string, any>): Promise<void>;
+    /**
+     * Authenticate user using existing userInfo data
+     * @param authFields Array of field names to check for existing users (e.g., ['email', 'phoneNumber'])
+     */
+    auth(authFields: string[]): Promise<void>;
     customEvent(eventName: string, eventProperties?: Record<string, any>): Promise<void>;
     start(): Promise<void>;
     stop(): Promise<void>;
@@ -33,6 +121,24 @@ declare class HumanBehaviorTracker {
     private flush;
     private setCookie;
     private getCookie;
+    /**
+     * Start redaction functionality for sensitive input fields
+     * @param options Optional configuration for redaction behavior
+     */
+    redact(options?: RedactionOptions): Promise<void>;
+    /**
+     * Set specific fields to be redacted during session recording
+     * @param fields Array of CSS selectors for fields to redact (e.g., ['input[type="password"]', '#email-field'])
+     */
+    setRedactedFields(fields: string[]): void;
+    /**
+     * Check if redaction is currently active
+     */
+    isRedactionActive(): boolean;
+    /**
+     * Get the currently selected fields for redaction
+     */
+    getRedactedFields(): string[];
 }
 
 declare const MAX_CHUNK_SIZE_BYTES: number;
@@ -52,6 +158,7 @@ declare class HumanBehaviorAPI {
     sendEvents(events: any[], sessionId: string, userId: string): Promise<void>;
     sendEventsChunked(events: any[], sessionId: string): Promise<any[]>;
     sendUserData(userId: string, userData: Record<string, any>, sessionId: string): Promise<any>;
+    sendUserAuth(userId: string, userData: Record<string, any>, sessionId: string, authFields: string[]): Promise<any>;
     sendSessionComplete(sessionId: string): Promise<void>;
     sendCustomEvent(eventName: string, eventProperties: Record<string, any>, sessionId: string): Promise<any>;
     sendCustomEvents(events: any[], sessionId: string): Promise<any>;
@@ -61,4 +168,5 @@ declare class HumanBehaviorAPI {
     sendBeaconCustomEvents(events: any[], sessionId: string): boolean;
 }
 
-export { HumanBehaviorAPI, HumanBehaviorTracker, MAX_CHUNK_SIZE_BYTES, HumanBehaviorTracker as default, isChunkSizeExceeded, validateSingleEventSize };
+export { HumanBehaviorAPI, HumanBehaviorTracker, MAX_CHUNK_SIZE_BYTES, RedactionManager, HumanBehaviorTracker as default, isChunkSizeExceeded, redactionManager, validateSingleEventSize };
+export type { RedactionOptions };

package/dist/types/react/index.d.ts

@@ -3,7 +3,7 @@ import { HumanBehaviorTracker } from '..';
 
 interface HumanBehaviorInterface {
     addEvent: (event: any) => void;
-    identifyUser: (userProperties: Record<string, any>) => Promise<void>;
+    addUserInfo: (userProperties: Record<string, any>) => Promise<void>;
     start: () => void;
     stop: () => void;
     viewLogs: () => void;

package/package.json

@@ -1,19 +1,12 @@
 {
   "name": "humanbehavior-js",
-  "version": "0.0.5",
+  "version": "0.0.8",
   "description": "SDK for HumanBehavior session and event recording",
   "type": "module",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
   "unpkg": "dist/index.min.js",
-  "files": [
-    "dist",
-    "react.js",
-    "react.d.ts",
-    "index.js",
-    "index.d.ts"
-  ],
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",
@@ -45,15 +38,11 @@
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@types/cors": "^2.8.17",
-    "@types/express": "^5.0.1",
+    "@types/node": "^24.0.3",
     "rollup": "^4.36.0",
     "rollup-plugin-dts": "^6.2.1",
-    "ts-loader": "^9.5.2",
     "tslib": "^2.8.1",
-    "typescript": "^5.8.2",
-    "webpack": "^5.98.0",
-    "webpack-cli": "^6.0.1"
+    "typescript": "^5.8.2"
   },
   "publishConfig": {
     "access": "public"

package/readme.md

@@ -1,57 +1,145 @@
-To build, run `npm run build`
+# HumanBehavior SDK
 
+A JavaScript SDK for session recording and user behavior analytics.
 
-Usage:
+## Installation
 
-NextJS
+```bash
+npm install humanbehavior-js
+```
+
+## Usage
+
+### Vanilla JavaScript
+
+```html
+<script src="https://unpkg.com/humanbehavior-js@0.0.7/dist/index.min.js"></script>
+<script>
+    const tracker = new HumanBehaviorTracker("your-api-key-here");
+    tracker.start();
+    
+    // Set up redaction for sensitive fields
+    tracker.setRedactedFields(['#password', 'input[type="password"]']);
+</script>
+```
 
-Add the following to your `providers.tsx` file.
-```ts
+### Next.js
+
+Add the following to your `providers.tsx` file:
+
+```tsx
 "use client"
 
-import { KoalawareTracker } from "koalaware-js";
-import { KoalawareProvider as KoalawareProviderJS } from "koalaware-js/react";
+import { HumanBehaviorTracker } from "humanbehavior-js";
+import { HumanBehaviorProvider } from "humanbehavior-js/react";
 import { useEffect, useState } from "react";
 
-export function KoalawareProvider({ children }: { children: React.ReactNode }) {
-    const [koalaware, setKoalaware] = useState<KoalawareTracker | null>(null);
+export function HumanBehaviorProviderWrapper({ children }: { children: React.ReactNode }) {
+    const [tracker, setTracker] = useState<HumanBehaviorTracker | null>(null);
 
     useEffect(() => {
-        const apiKey = "kw_1c8969a408ea2eb333fd174a7684c7c943e82ea1df8349b43640e4b608f35e68";
-        const koalaware = new KoalawareTracker(apiKey);
-        setKoalaware(koalaware);
+        const apiKey = process.env.NEXT_PUBLIC_HUMANBEHAVIOR_API_KEY;
+        if (apiKey) {
+            const tracker = new HumanBehaviorTracker(apiKey);
+            setTracker(tracker);
+        }
     }, []);
 
     return (
-        <KoalawareProviderJS client={koalaware}>
+        <HumanBehaviorProvider client={tracker}>
+            {children}
+        </HumanBehaviorProvider>  
+    )
+}
+```
+
+Or use the simpler approach with just an API key:
+
+```tsx
+"use client"
+
+import { HumanBehaviorProvider } from "humanbehavior-js/react";
+
+export function HumanBehaviorProviderWrapper({ children }: { children: React.ReactNode }) {
+    return (
+        <HumanBehaviorProvider apiKey={process.env.NEXT_PUBLIC_HUMANBEHAVIOR_API_KEY}>
             {children}
-        </KoalawareProviderJS>  
+        </HumanBehaviorProvider>  
     )
 }
 ```
 
-Next, add the provider to your root app layout.
-```ts
+Next, add the provider to your root app layout:
+
+```tsx
 export default async function RootLayout({
   children
 }: {
   children: React.ReactNode;
 }) {
-  const session = await auth();
   return (
-    <html lang='en' className={`${lato.className}`} suppressHydrationWarning>
-      <body className={'overflow-hidden'}>
-        <NextTopLoader showSpinner={false} />
-        <KoalawareProvider>
-          <NuqsAdapter>
-            <Providers session={session}>
-              <Toaster />
-              {children}
-            </Providers>
-          </NuqsAdapter>
-        </KoalawareProvider>
+    <html lang='en' suppressHydrationWarning>
+      <body>
+        <HumanBehaviorProviderWrapper>
+          {children}
+        </HumanBehaviorProviderWrapper>
       </body>
     </html>
   );
 }
+```
+
+### Using the Hook
+
+In any component within the provider:
+
+```tsx
+import { useHumanBehavior } from "humanbehavior-js/react";
+
+export function MyComponent() {
+    const humanBehavior = useHumanBehavior();
+    
+    const handleUserAction = async () => {
+        // Add user information
+        await humanBehavior.addUserInfo({
+            email: "user@example.com",
+            name: "John Doe"
+        });
+        
+        // Track custom events
+        humanBehavior.addEvent({
+            type: "custom",
+            name: "button_clicked",
+            data: { buttonId: "submit" }
+        });
+    };
+    
+    return <button onClick={handleUserAction}>Click me</button>;
+}
+```
+
+## Environment Variables
+
+For security, store your API key in environment variables:
+
+```bash
+# .env.local
+NEXT_PUBLIC_HUMANBEHAVIOR_API_KEY=your-api-key-here
+NEXT_PUBLIC_INGESTION_URL=https://ingestion.humanbehavior.ai
+```
+
+## Features
+
+- **Session Recording**: Automatic recording of user interactions
+- **Data Redaction**: Protect sensitive information in recordings
+- **User Identification**: Track users across sessions
+- **Custom Events**: Send custom analytics events
+- **React Integration**: Hooks and providers for React applications
+
+## Build
+
+To build the SDK locally:
+
+```bash
+npm run build
 ```

package/rollup.config.js

@@ -0,0 +1,106 @@
+import typescript from '@rollup/plugin-typescript';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import terser from '@rollup/plugin-terser';
+import dts from 'rollup-plugin-dts';
+
+// Only React should be external since it's typically provided by the host application
+const external = ['react', 'react-dom'];
+
+// Global variables for UMD build
+const globals = {
+  react: 'React',
+  'react-dom': 'ReactDOM'
+};
+
+export default [
+  // Main SDK bundle
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: 'dist/cjs/index.js',
+        format: 'cjs',
+        name: 'HumanBehaviorTracker',
+        globals,
+        exports: 'named',
+        sourcemap: true
+      },
+      {
+        file: 'dist/esm/index.js',
+        format: 'es',
+        sourcemap: true
+      },
+      {
+        file: 'dist/index.min.js',
+        format: 'umd',
+        name: 'HumanBehaviorTracker',
+        globals,
+        exports: 'auto',
+        sourcemap: true,
+        plugins: [terser()]
+      }
+    ],
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        declaration: false
+      })
+    ],
+    external
+  },
+  
+  // React component bundle
+  {
+    input: './src/react/index.tsx',
+    output: [
+      {
+        file: 'dist/cjs/react/index.js',
+        format: 'cjs',
+        name: 'HumanBehaviorReact',
+        globals: {
+          ...globals,
+          '..': 'HumanBehaviorTracker'
+        },
+        exports: 'named',
+        sourcemap: true
+      },
+      {
+        file: 'dist/esm/react/index.js',
+        format: 'es',
+        sourcemap: true
+      }
+    ],
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        declaration: false
+      })
+    ],
+    external: [...external, '..']
+  },
+  
+  // Type definition bundles - generate these separately
+  {
+    input: 'src/index.ts',
+    output: {
+      file: 'dist/types/index.d.ts',
+      format: 'es'
+    },
+    plugins: [dts()],
+    external
+  },
+  {
+    input: 'src/react/index.tsx',
+    output: {
+      file: 'dist/types/react/index.d.ts',
+      format: 'es'
+    },
+    plugins: [dts()],
+    external: [...external, '..']
+  }
+];