@ihoomanai/react-chat 2.0.0

package/README.md

@@ -0,0 +1,220 @@
+# @ihooman/react-chat
+
+React components and hooks for the Ihooman Chat Widget. Provides native React integration with proper lifecycle management and SSR compatibility.
+
+## Installation
+
+```bash
+npm install @ihooman/react-chat
+# or
+yarn add @ihooman/react-chat
+# or
+pnpm add @ihooman/react-chat
+```
+
+## Requirements
+
+- React 17.0.0 or higher
+- A valid Widget ID from your [Ihooman Dashboard](https://ihooman.ai)
+
+## Quick Start
+
+### Basic Usage
+
+```tsx
+import { ChatWidget } from '@ihooman/react-chat';
+
+function App() {
+  return (
+    <ChatWidget
+      widgetId="wgt_abc123def456"
+      position="bottom-right"
+      onReady={() => console.log('Widget ready!')}
+    />
+  );
+}
+```
+
+### With Provider and Hook
+
+For programmatic control over the widget from any component:
+
+```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
+
+### `<ChatWidget />`
+
+The main component that renders the chat widget.
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `widgetId` | `string` | Yes | Your Widget ID from the Ihooman dashboard |
+| `serverUrl` | `string` | No | Custom server URL (defaults to production) |
+| `theme` | `'light' \| 'dark'` | No | Color theme |
+| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | No | Widget position |
+| `startOpen` | `boolean` | No | Start with widget open |
+| `user` | `{ name?: string; email?: string; metadata?: Record<string, string> }` | No | User information |
+| `onReady` | `() => void` | No | Called when widget is ready |
+| `onOpen` | `() => void` | No | Called when widget opens |
+| `onClose` | `() => void` | No | Called when widget closes |
+| `onMessage` | `(message: Message) => void` | No | Called on new messages |
+| `onError` | `(error: Error) => void` | No | Called on errors |
+
+See the [full props documentation](#chatwidget-props) for all available options.
+
+### `<ChatWidgetProvider />`
+
+Context provider for global widget access. Wrap your app with this to use the `useChatWidget` hook.
+
+```tsx
+<ChatWidgetProvider>
+  {/* Your app components */}
+</ChatWidgetProvider>
+```
+
+## Hooks
+
+### `useChatWidget()`
+
+Hook for controlling the widget from any component within the provider.
+
+```tsx
+const {
+  isOpen,      // boolean - Whether widget is open
+  isReady,     // boolean - Whether widget is initialized
+  isConnected, // boolean - Whether connected to server
+  open,        // () => void - Open the widget
+  close,       // () => void - Close the widget
+  toggle,      // () => void - Toggle open/closed
+  sendMessage, // (content: string) => void - Send a message
+  setUser,     // (user: UserInfo) => void - Set user info
+  clearHistory,// () => void - Clear chat history
+  messages,    // Message[] - Current messages
+  unreadCount, // number - Unread message count
+} = useChatWidget();
+```
+
+## Examples
+
+### With User Information
+
+```tsx
+<ChatWidget
+  widgetId="wgt_abc123def456"
+  user={{
+    name: 'John Doe',
+    email: 'john@example.com',
+    metadata: {
+      plan: 'premium',
+      customerId: 'cust_123'
+    }
+  }}
+/>
+```
+
+### Custom Styling
+
+```tsx
+<ChatWidget
+  widgetId="wgt_abc123def456"
+  primaryColor="#6366f1"
+  gradientFrom="#6366f1"
+  gradientTo="#8b5cf6"
+  borderRadius={16}
+  fontFamily="Inter, sans-serif"
+/>
+```
+
+### Programmatic Messages
+
+```tsx
+function QuickActions() {
+  const { sendMessage, isReady } = useChatWidget();
+
+  return (
+    <div>
+      <button 
+        onClick={() => sendMessage('I need help with my order')}
+        disabled={!isReady}
+      >
+        Order Help
+      </button>
+      <button 
+        onClick={() => sendMessage('How do I reset my password?')}
+        disabled={!isReady}
+      >
+        Password Help
+      </button>
+    </div>
+  );
+}
+```
+
+### Next.js / SSR
+
+The component is SSR-compatible and defers initialization to the client:
+
+```tsx
+// pages/_app.tsx or app/layout.tsx
+import { ChatWidgetProvider, ChatWidget } from '@ihooman/react-chat';
+
+export default function App({ Component, pageProps }) {
+  return (
+    <ChatWidgetProvider>
+      <Component {...pageProps} />
+      <ChatWidget widgetId="wgt_abc123def456" />
+    </ChatWidgetProvider>
+  );
+}
+```
+
+## TypeScript
+
+Full TypeScript support is included. Import types as needed:
+
+```tsx
+import type { 
+  ChatWidgetProps, 
+  UseChatWidgetReturn,
+  Message,
+  UserInfo 
+} from '@ihooman/react-chat';
+```
+
+## Framework Compatibility
+
+- ✅ React 17+
+- ✅ React 18+
+- ✅ Next.js (Pages & App Router)
+- ✅ Gatsby
+- ✅ Remix
+- ✅ Vite
+- ✅ Create React App
+
+## License
+
+MIT © [Ihooman AI](https://ihooman.ai)

package/dist/ChatWidget.d.ts

@@ -0,0 +1,42 @@
+/**
+ * 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 from 'react';
+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 declare 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;
+export default ChatWidget;
+//# sourceMappingURL=ChatWidget.d.ts.map

package/dist/ChatWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../src/ChatWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,MAAM,EACN,KAAK,EACL,MAAM,EACN,UAAU,EACV,YAAY,EACZ,UAAU,EACV,SAAS,EACT,SAAS,EACT,OAAO,EACP,MAAM,EACN,OAAO,EACP,SAAS,EACT,OAAO,GACR,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA0J7C;AAED,eAAe,UAAU,CAAC"}

package/dist/ChatWidgetProvider.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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 from 'react';
+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 declare function ChatWidgetProvider({ children }: ChatWidgetProviderProps): React.ReactElement;
+export default ChatWidgetProvider;
+//# sourceMappingURL=ChatWidgetProvider.d.ts.map

package/dist/ChatWidgetProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWidgetProvider.d.ts","sourceRoot":"","sources":["../src/ChatWidgetProvider.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAEvD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAmC5F;AAED,eAAe,kBAAkB,CAAC"}

package/dist/context.d.ts

@@ -0,0 +1,50 @@
+/**
+ * React Context for Ihooman Chat Widget
+ *
+ * Provides global access to widget state and controls
+ * throughout the React component tree.
+ */
+import type { IhoomanChatAPI, Message } 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;
+}
+/**
+ * React Context for the Chat Widget
+ */
+export declare const ChatWidgetContext: import("react").Context<ChatWidgetContextValue>;
+/**
+ * Hook to access the ChatWidget context
+ * @internal
+ */
+export declare function useChatWidgetContext(): ChatWidgetContextValue;
+/**
+ * Type guard to check if widget is available
+ */
+export declare function isWidgetAvailable(widget: IhoomanChatAPI | null): widget is IhoomanChatAPI;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAY,MAAM,sBAAsB,CAAC;AAE9E;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,2CAA2C;IAC3C,SAAS,EAAE,cAAc,GAAG,IAAI,CAAC;IACjC,mCAAmC;IACnC,YAAY,EAAE,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,kDAAkD;IAClD,OAAO,EAAE,OAAO,CAAC;IACjB,0BAA0B;IAC1B,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,yBAAyB;IACzB,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,sCAAsC;IACtC,WAAW,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,cAAc,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,4BAA4B;IAC5B,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,uBAAuB;IACvB,WAAW,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IAC3C,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAsBD;;GAEG;AACH,eAAO,MAAM,iBAAiB,iDAA6D,CAAC;AAE5F;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,sBAAsB,CAE7D;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI,GAAG,MAAM,IAAI,cAAc,CAEzF"}