@ihoomanai/react-chat 2.0.0

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@ihoomanai/react-chat",
+  "version": "2.0.0",
+  "type": "module",
+  "description": "React components and hooks for Ihooman Chat Widget - secure Widget ID based initialization",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "rollup -c",
+    "build:types": "tsc --emitDeclarationOnly",
+    "dev": "rollup -c -w",
+    "clean": "rm -rf dist",
+    "prebuild": "npm run clean",
+    "lint": "eslint src/ --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "chat",
+    "widget",
+    "support",
+    "customer-service",
+    "live-chat",
+    "chatbot",
+    "ai",
+    "rag",
+    "ihooman",
+    "hooks",
+    "components"
+  ],
+  "author": "Ihooman AI",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ihooman/chat-widget"
+  },
+  "homepage": "https://ihooman.ai",
+  "bugs": {
+    "url": "https://github.com/ihooman/chat-widget/issues"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@ihoomanai/chat-widget": "^2.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@testing-library/react": "^14.1.0",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.9.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3",
+    "vitest": "^1.1.0"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}

package/src/ChatWidget.tsx

@@ -0,0 +1,232 @@
+/**
+ * ChatWidget React Component
+ * 
+ * A React wrapper for the Ihooman Chat Widget that handles
+ * initialization, lifecycle management, and SSR compatibility.
+ * 
+ * @module @ihooman/react-chat
+ */
+
+import React, { useEffect, useRef, useCallback } from 'react';
+import type { IhoomanChatAPI, WidgetConfig } from '@ihooman/chat-widget';
+import { useChatWidgetContext } from './context';
+import type { ChatWidgetProps } from './types';
+
+/**
+ * ChatWidget Component
+ * 
+ * Renders the Ihooman Chat Widget with React lifecycle management.
+ * Supports SSR by deferring initialization to useEffect.
+ * 
+ * @example
+ * ```tsx
+ * import { ChatWidget } from '@ihooman/react-chat';
+ * 
+ * function App() {
+ *   return (
+ *     <ChatWidget
+ *       widgetId="wgt_abc123def456"
+ *       position="bottom-right"
+ *       onReady={() => console.log('Widget ready!')}
+ *     />
+ *   );
+ * }
+ * ```
+ * 
+ * @example With user information
+ * ```tsx
+ * <ChatWidget
+ *   widgetId="wgt_abc123def456"
+ *   user={{ name: 'John Doe', email: 'john@example.com' }}
+ * />
+ * ```
+ */
+export function ChatWidget({
+  widgetId,
+  serverUrl,
+  theme,
+  position,
+  startOpen,
+  user,
+  title,
+  subtitle,
+  welcomeMessage,
+  placeholder,
+  primaryColor,
+  gradientFrom,
+  gradientTo,
+  showTimestamps,
+  showTypingIndicator,
+  enableSounds,
+  enableFileUpload,
+  persistSession,
+  zIndex,
+  width,
+  height,
+  buttonSize,
+  borderRadius,
+  fontFamily,
+  avatarUrl,
+  poweredBy,
+  onReady,
+  onOpen,
+  onClose,
+  onMessage,
+  onError,
+}: ChatWidgetProps): React.ReactElement | null {
+  const widgetInstanceRef = useRef<IhoomanChatAPI | null>(null);
+  const isInitializedRef = useRef(false);
+  const context = useChatWidgetContext();
+
+  // Memoize callbacks to prevent unnecessary re-initialization
+  const handleReady = useCallback(() => {
+    context.setIsReady(true);
+    onReady?.();
+  }, [context, onReady]);
+
+  const handleOpen = useCallback(() => {
+    context.setIsOpen(true);
+    onOpen?.();
+  }, [context, onOpen]);
+
+  const handleClose = useCallback(() => {
+    context.setIsOpen(false);
+    onClose?.();
+  }, [context, onClose]);
+
+  const handleMessage = useCallback(
+    (message: unknown) => {
+      // Update messages in context
+      if (widgetInstanceRef.current) {
+        const state = widgetInstanceRef.current.getState();
+        context.setMessages(state.messages);
+        context.setUnreadCount(state.unreadCount);
+      }
+      onMessage?.(message as import('@ihooman/chat-widget').Message);
+    },
+    [context, onMessage]
+  );
+
+  const handleError = useCallback(
+    (error: unknown) => {
+      onError?.(error as Error);
+    },
+    [onError]
+  );
+
+  // Initialize widget on mount (client-side only for SSR compatibility)
+  useEffect(() => {
+    // Skip if already initialized or if we're in SSR
+    if (isInitializedRef.current || typeof window === 'undefined') {
+      return;
+    }
+
+    let isMounted = true;
+
+    const initWidget = async () => {
+      try {
+        // Dynamic import to support SSR
+        const { IhoomanChat } = await import('@ihooman/chat-widget');
+
+        if (!isMounted) return;
+
+        // Build configuration
+        const config: WidgetConfig = {
+          widgetId,
+          serverUrl,
+          theme,
+          position,
+          startOpen,
+          title,
+          subtitle,
+          welcomeMessage,
+          placeholder,
+          primaryColor,
+          gradientFrom,
+          gradientTo,
+          showTimestamps,
+          showTypingIndicator,
+          enableSounds,
+          enableFileUpload,
+          persistSession,
+          zIndex,
+          width,
+          height,
+          buttonSize,
+          borderRadius,
+          fontFamily,
+          avatarUrl,
+          poweredBy,
+          onReady: handleReady,
+          onOpen: handleOpen,
+          onClose: handleClose,
+          onMessage: handleMessage,
+          onError: handleError,
+        };
+
+        // Initialize the widget
+        const instance = await IhoomanChat.init(config);
+
+        if (!isMounted) {
+          // Component unmounted during initialization, clean up
+          instance?.destroy();
+          return;
+        }
+
+        if (instance) {
+          widgetInstanceRef.current = instance;
+          context.setWidgetRef(instance);
+          isInitializedRef.current = true;
+
+          // Set user info if provided
+          if (user) {
+            instance.setUser(user);
+          }
+
+          // Sync initial state
+          const state = instance.getState();
+          context.setIsOpen(state.isOpen);
+          context.setIsConnected(state.isConnected);
+          context.setMessages(state.messages);
+          context.setUnreadCount(state.unreadCount);
+        }
+      } catch (error) {
+        console.error('Failed to initialize Ihooman Chat Widget:', error);
+        handleError(error);
+      }
+    };
+
+    initWidget();
+
+    // Cleanup on unmount
+    return () => {
+      isMounted = false;
+      if (widgetInstanceRef.current) {
+        widgetInstanceRef.current.destroy();
+        widgetInstanceRef.current = null;
+        context.setWidgetRef(null);
+        context.setIsReady(false);
+        context.setIsOpen(false);
+        context.setIsConnected(false);
+        context.setMessages([]);
+        context.setUnreadCount(0);
+        isInitializedRef.current = false;
+      }
+    };
+    // Note: We intentionally only run this effect once on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [widgetId]);
+
+  // Update user info when it changes
+  useEffect(() => {
+    if (widgetInstanceRef.current && user) {
+      widgetInstanceRef.current.setUser(user);
+    }
+  }, [user]);
+
+  // This component doesn't render any DOM elements
+  // The widget injects its own DOM elements
+  return null;
+}
+
+export default ChatWidget;

package/src/ChatWidgetProvider.tsx

@@ -0,0 +1,67 @@
+/**
+ * ChatWidgetProvider Component
+ * 
+ * Provides global widget state and controls to all child components.
+ * Wrap your app with this provider to use the useChatWidget hook.
+ */
+
+import React, { useState, useMemo, useCallback } from 'react';
+import type { IhoomanChatAPI, Message } from '@ihooman/chat-widget';
+import { ChatWidgetContext, type ChatWidgetContextValue } from './context';
+import type { ChatWidgetProviderProps } from './types';
+
+/**
+ * Provider component for the Chat Widget context
+ * 
+ * @example
+ * ```tsx
+ * import { ChatWidgetProvider, ChatWidget } from '@ihooman/react-chat';
+ * 
+ * function App() {
+ *   return (
+ *     <ChatWidgetProvider>
+ *       <ChatWidget widgetId="wgt_abc123def456" />
+ *       <YourApp />
+ *     </ChatWidgetProvider>
+ *   );
+ * }
+ * ```
+ */
+export function ChatWidgetProvider({ children }: ChatWidgetProviderProps): React.ReactElement {
+  const [widgetRef, setWidgetRefState] = useState<IhoomanChatAPI | null>(null);
+  const [isReady, setIsReady] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isConnected, setIsConnected] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [unreadCount, setUnreadCount] = useState(0);
+
+  const setWidgetRef = useCallback((widget: IhoomanChatAPI | null) => {
+    setWidgetRefState(widget);
+  }, []);
+
+  const contextValue = useMemo<ChatWidgetContextValue>(
+    () => ({
+      widgetRef,
+      setWidgetRef,
+      isReady,
+      setIsReady,
+      isOpen,
+      setIsOpen,
+      isConnected,
+      setIsConnected,
+      messages,
+      setMessages,
+      unreadCount,
+      setUnreadCount,
+    }),
+    [widgetRef, setWidgetRef, isReady, isOpen, isConnected, messages, unreadCount]
+  );
+
+  return (
+    <ChatWidgetContext.Provider value={contextValue}>
+      {children}
+    </ChatWidgetContext.Provider>
+  );
+}
+
+export default ChatWidgetProvider;

package/src/context.tsx

@@ -0,0 +1,79 @@
+/**
+ * React Context for Ihooman Chat Widget
+ * 
+ * Provides global access to widget state and controls
+ * throughout the React component tree.
+ */
+
+import { createContext, useContext } from 'react';
+import type { IhoomanChatAPI, Message, UserInfo } from '@ihooman/chat-widget';
+
+/**
+ * Internal context value type
+ */
+export interface ChatWidgetContextValue {
+  /** Reference to the widget API instance */
+  widgetRef: IhoomanChatAPI | null;
+  /** Set the widget API reference */
+  setWidgetRef: (widget: IhoomanChatAPI | null) => void;
+  /** Whether the widget is initialized and ready */
+  isReady: boolean;
+  /** Set the ready state */
+  setIsReady: (ready: boolean) => void;
+  /** Whether the widget window is open */
+  isOpen: boolean;
+  /** Set the open state */
+  setIsOpen: (open: boolean) => void;
+  /** Whether connected to the server */
+  isConnected: boolean;
+  /** Set the connected state */
+  setIsConnected: (connected: boolean) => void;
+  /** Current chat messages */
+  messages: Message[];
+  /** Set the messages */
+  setMessages: (messages: Message[]) => void;
+  /** Number of unread messages */
+  unreadCount: number;
+  /** Set the unread count */
+  setUnreadCount: (count: number) => void;
+}
+
+/**
+ * Default context value (used when no provider is present)
+ */
+const defaultContextValue: ChatWidgetContextValue = {
+  widgetRef: null,
+  setWidgetRef: () => {
+    console.warn('ChatWidgetProvider not found. Wrap your app with <ChatWidgetProvider>.');
+  },
+  isReady: false,
+  setIsReady: () => {},
+  isOpen: false,
+  setIsOpen: () => {},
+  isConnected: false,
+  setIsConnected: () => {},
+  messages: [],
+  setMessages: () => {},
+  unreadCount: 0,
+  setUnreadCount: () => {},
+};
+
+/**
+ * React Context for the Chat Widget
+ */
+export const ChatWidgetContext = createContext<ChatWidgetContextValue>(defaultContextValue);
+
+/**
+ * Hook to access the ChatWidget context
+ * @internal
+ */
+export function useChatWidgetContext(): ChatWidgetContextValue {
+  return useContext(ChatWidgetContext);
+}
+
+/**
+ * Type guard to check if widget is available
+ */
+export function isWidgetAvailable(widget: IhoomanChatAPI | null): widget is IhoomanChatAPI {
+  return widget !== null;
+}

package/src/index.ts

@@ -0,0 +1,79 @@
+/**
+ * @ihooman/react-chat
+ * 
+ * React components and hooks for the Ihooman Chat Widget.
+ * Provides native React integration with proper lifecycle management
+ * and SSR compatibility.
+ * 
+ * @packageDocumentation
+ * @module @ihooman/react-chat
+ * 
+ * @example Basic usage
+ * ```tsx
+ * import { ChatWidget } from '@ihooman/react-chat';
+ * 
+ * function App() {
+ *   return (
+ *     <ChatWidget
+ *       widgetId="wgt_abc123def456"
+ *       position="bottom-right"
+ *     />
+ *   );
+ * }
+ * ```
+ * 
+ * @example With provider and hook
+ * ```tsx
+ * import { ChatWidgetProvider, ChatWidget, useChatWidget } from '@ihooman/react-chat';
+ * 
+ * function SupportButton() {
+ *   const { open, isReady } = useChatWidget();
+ *   return (
+ *     <button onClick={open} disabled={!isReady}>
+ *       Need Help?
+ *     </button>
+ *   );
+ * }
+ * 
+ * function App() {
+ *   return (
+ *     <ChatWidgetProvider>
+ *       <ChatWidget widgetId="wgt_abc123def456" />
+ *       <SupportButton />
+ *     </ChatWidgetProvider>
+ *   );
+ * }
+ * ```
+ */
+
+// Components
+export { ChatWidget } from './ChatWidget';
+export { ChatWidgetProvider } from './ChatWidgetProvider';
+
+// Hooks
+export { useChatWidget } from './useChatWidget';
+
+// Context (for advanced usage)
+export { ChatWidgetContext, useChatWidgetContext } from './context';
+
+// Types
+export type {
+  // React-specific types
+  ChatWidgetProps,
+  UseChatWidgetReturn,
+  ChatWidgetProviderProps,
+  // Re-exported core types
+  WidgetConfig,
+  UserInfo,
+  Message,
+  WidgetState,
+  WidgetEvent,
+  EventCallback,
+  ThemeConfig,
+  BehaviorConfig,
+  BrandingConfig,
+  IhoomanChatAPI,
+} from './types';
+
+// Re-export context value type for advanced usage
+export type { ChatWidgetContextValue } from './context';