ajaxter-chat 1.0.0

package/README.md

@@ -0,0 +1,290 @@
+# react-chat-widget-extension
+
+A reusable, fully configurable floating chat widget for **React.js** and **Next.js** applications.
+
+- ✅ Environment-variable-driven behavior (status, type, API endpoint)
+- ✅ Fully themeable via a `theme` prop (colors, fonts, button, position)
+- ✅ SSR-safe — works with Next.js App Router and Pages Router
+- ✅ TypeScript-first
+- ✅ WebSocket-ready architecture
+- ✅ Loading skeletons, empty states, error handling built in
+
+---
+
+## Folder Structure
+
+```
+react-chat-widget-extension/
+├── src/
+│   ├── index.ts                        # Public API exports
+│   ├── types/
+│   │   └── index.ts                    # All TypeScript types & interfaces
+│   ├── config/
+│   │   └── index.ts                    # Env variable loader (Next.js + React safe)
+│   ├── services/
+│   │   └── userService.ts              # Fetch users from API
+│   ├── hooks/
+│   │   ├── useUsers.ts                 # Fetch & filter users hook
+│   │   └── useChat.ts                  # Chat state & message management hook
+│   ├── utils/
+│   │   └── theme.ts                    # Theme merging & CSS variable utilities
+│   └── components/
+│       ├── ChatWidget.tsx              # 🏠 Root widget — mount this in your app
+│       ├── ChatButton/
+│       │   └── index.tsx               # Floating action button
+│       ├── ChatWindow/
+│       │   └── index.tsx               # Expandable chat panel
+│       ├── UserList/
+│       │   └── index.tsx               # User list with loading/error/empty states
+│       ├── ChatBox/
+│       │   └── index.tsx               # Conversation panel + message input
+│       └── MaintenanceView/
+│           └── index.tsx               # Shown when CHAT_STATUS=MAINTENANCE
+├── examples/
+│   ├── react-app/
+│   │   ├── .env.example                # React env variables template
+│   │   └── App.tsx                     # React usage example
+│   └── nextjs-app/
+│       ├── .env.local.example          # Next.js env variables template
+│       ├── app/
+│       │   ├── layout.tsx              # App Router: root layout
+│       │   ├── ChatWidgetWrapper.tsx   # App Router: 'use client' boundary
+│       │   └── page.tsx                # App Router: home page
+│       └── pages/
+│           ├── _app.tsx                # Pages Router: global app
+│           └── index.tsx               # Pages Router: index page
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+
+---
+
+## Installation
+
+```bash
+npm install react-chat-widget-extension
+# or
+yarn add react-chat-widget-extension
+```
+
+---
+
+## Environment Variables
+
+### React.js (.env)
+
+```env
+REACT_APP_CHAT_HOST_URL=http://your-api.com
+REACT_APP_CHAT_HOST_PORT=4000
+REACT_APP_CHAT_USER_LIST=api/v1/chat/users
+REACT_APP_CHAT_STATUS=ACTIVE
+REACT_APP_CHAT_TYPE=BOTH
+```
+
+### Next.js (.env.local)
+
+```env
+NEXT_PUBLIC_CHAT_HOST_URL=http://your-api.com
+NEXT_PUBLIC_CHAT_HOST_PORT=4000
+NEXT_PUBLIC_CHAT_USER_LIST=api/v1/chat/users
+NEXT_PUBLIC_CHAT_STATUS=ACTIVE
+NEXT_PUBLIC_CHAT_TYPE=BOTH
+```
+
+### Variable Reference
+
+| Variable           | Type                                  | Description                              |
+|--------------------|---------------------------------------|------------------------------------------|
+| `CHAT_HOST_URL`    | string                                | Base URL of your chat/user API           |
+| `CHAT_HOST_PORT`   | number                                | Port for your API server                 |
+| `CHAT_USER_LIST`   | string                                | Endpoint path to fetch users             |
+| `CHAT_STATUS`      | `ACTIVE` \| `DISABLE` \| `MAINTENANCE` | Controls widget visibility & state       |
+| `CHAT_TYPE`        | `SUPPORT` \| `CHAT` \| `BOTH`         | Controls which users are shown           |
+
+---
+
+## CHAT_STATUS Behavior
+
+| Value           | Behavior                                                      |
+|-----------------|---------------------------------------------------------------|
+| `ACTIVE`        | Widget is fully enabled                                        |
+| `DISABLE`       | Widget is **not rendered at all** — zero DOM footprint        |
+| `MAINTENANCE`   | Widget opens but shows a maintenance message (non-interactive)|
+
+---
+
+## CHAT_TYPE Behavior
+
+| Value     | User List Shown                          | UI                          |
+|-----------|------------------------------------------|-----------------------------|
+| `SUPPORT` | Only `type: "developer"` users           | Single panel                |
+| `CHAT`    | Only `type: "user"` users                | Single panel                |
+| `BOTH`    | Both developers and users                | Two tabs (Support / Users)  |
+
+---
+
+## User List API
+
+The widget fetches users from:
+
+```
+GET ${CHAT_HOST_URL}:${CHAT_HOST_PORT}/${CHAT_USER_LIST}
+```
+
+Expected response:
+
+```json
+[
+  {
+    "name": "Alice Dev",
+    "uid": "uid_001",
+    "email": "alice@company.com",
+    "mobile": "+1234567890",
+    "project": "Platform Team",
+    "type": "developer"
+  },
+  {
+    "name": "Bob Smith",
+    "uid": "uid_002",
+    "email": "bob@client.com",
+    "mobile": "+0987654321",
+    "project": "Client Portal",
+    "type": "user"
+  }
+]
+```
+
+---
+
+## Usage
+
+### React.js
+
+```tsx
+// App.tsx
+import { ChatWidget } from 'react-chat-widget-extension';
+
+function App() {
+  return (
+    <div>
+      <main>Your app content</main>
+
+      <ChatWidget
+        theme={{
+          primaryColor: '#6C63FF',
+          buttonColor: '#6C63FF',
+          buttonTextColor: '#ffffff',
+          buttonLabel: 'Chat with us',
+          buttonPosition: 'bottom-right',
+          fontFamily: "'DM Sans', sans-serif",
+          borderRadius: '16px',
+        }}
+      />
+    </div>
+  );
+}
+```
+
+### Next.js — App Router
+
+```tsx
+// app/ChatWidgetWrapper.tsx
+'use client';
+import { ChatWidget } from 'react-chat-widget-extension';
+
+export function ChatWidgetWrapper() {
+  return <ChatWidget theme={{ primaryColor: '#0ea5e9' }} />;
+}
+```
+
+```tsx
+// app/layout.tsx
+import { ChatWidgetWrapper } from './ChatWidgetWrapper';
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <ChatWidgetWrapper />
+      </body>
+    </html>
+  );
+}
+```
+
+### Next.js — Pages Router
+
+```tsx
+// pages/_app.tsx
+import { ChatWidget } from 'react-chat-widget-extension';
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Component {...pageProps} />
+      <ChatWidget theme={{ primaryColor: '#10b981' }} />
+    </>
+  );
+}
+```
+
+---
+
+## Theme Props
+
+All theme properties are **optional**. Defaults are used when omitted.
+
+```tsx
+interface ChatWidgetTheme {
+  fontFamily?: string;       // Default: "'DM Sans', 'Segoe UI', sans-serif"
+  primaryColor?: string;     // Default: '#6C63FF'  — header, accents, active states
+  backgroundColor?: string;  // Default: '#ffffff'  — widget panel background
+  buttonColor?: string;      // Default: '#6C63FF'  — floating button background
+  buttonTextColor?: string;  // Default: '#ffffff'  — floating button text/icon color
+  buttonLabel?: string;      // Default: 'Chat with us'
+  buttonPosition?: 'bottom-right' | 'bottom-left'; // Default: 'bottom-right'
+  borderRadius?: string;     // Default: '16px'
+}
+```
+
+---
+
+## WebSocket Integration
+
+The `useChat` hook is ready for WebSocket integration. Look for the `TODO` comments in:
+
+- `src/hooks/useChat.ts` → Add `socket.emit('message', newMsg)` in `sendMessage`
+- `src/hooks/useChat.ts` → Add `socket.on('message', ...)` listener in `selectUser`
+- `src/components/ChatWindow/index.tsx` → Initialize socket connection on mount
+
+Example with socket.io:
+
+```ts
+// In useChat.ts — sendMessage
+socket.emit('chat:message', { to: activeUser.uid, text });
+
+// In useChat.ts — selectUser
+socket.on('chat:message', (msg: ChatMessage) => {
+  setMessages((prev) => [...prev, msg]);
+});
+```
+
+---
+
+## Build
+
+```bash
+cd react-chat-widget-extension
+npm install
+npm run build        # Compile TypeScript → dist/
+npm run type-check   # Verify types without emitting
+npm run dev          # Watch mode
+```
+
+---
+
+## License
+
+MIT

package/dist/components/ChatBox/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ChatMessage, ChatUser } from '../../types';
+interface ChatBoxProps {
+    activeUser: ChatUser | null;
+    messages: ChatMessage[];
+    onSendMessage: (text: string) => void;
+    primaryColor: string;
+    fontFamily: string;
+}
+export declare const ChatBox: React.FC<ChatBoxProps>;
+export {};

package/dist/components/ChatBox/index.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+export const ChatBox = ({ activeUser, messages, onSendMessage, primaryColor, fontFamily, }) => {
+    const [inputText, setInputText] = useState('');
+    const messagesEndRef = useRef(null);
+    const inputRef = useRef(null);
+    useEffect(() => {
+        var _a;
+        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+    }, [messages]);
+    const handleSend = () => {
+        var _a;
+        if (!inputText.trim())
+            return;
+        onSendMessage(inputText);
+        setInputText('');
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    };
+    if (!activeUser) {
+        return (_jsxs("div", { style: {
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontFamily,
+                gap: '16px',
+                padding: '24px',
+                textAlign: 'center',
+            }, children: [_jsx("div", { style: {
+                        width: '80px',
+                        height: '80px',
+                        borderRadius: '50%',
+                        backgroundColor: `${primaryColor}12`,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }, children: _jsx("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z", stroke: primaryColor, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: `${primaryColor}15` }) }) }), _jsxs("div", { children: [_jsx("p", { style: {
+                                margin: '0 0 6px',
+                                fontWeight: 700,
+                                fontSize: '16px',
+                                color: '#1a1a2e',
+                                letterSpacing: '-0.02em',
+                            }, children: "Select a conversation" }), _jsx("p", { style: { margin: 0, fontSize: '13px', color: '#aaa', lineHeight: 1.6 }, children: "Choose someone from the list to start chatting" })] })] }));
+    }
+    const initials = activeUser.name
+        .split(' ')
+        .map((n) => n[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2);
+    return (_jsxs("div", { style: {
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            fontFamily,
+            overflow: 'hidden',
+        }, children: [_jsxs("div", { style: {
+                    padding: '14px 20px',
+                    borderBottom: '1px solid #f0f0f5',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '12px',
+                    background: '#fafafa',
+                }, children: [_jsx("div", { style: {
+                            width: '38px',
+                            height: '38px',
+                            borderRadius: '50%',
+                            backgroundColor: primaryColor,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            color: '#fff',
+                            fontSize: '13px',
+                            fontWeight: 700,
+                        }, children: initials }), _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: '14px', color: '#1a1a2e' }, children: activeUser.name }), _jsxs("div", { style: { fontSize: '12px', color: '#aaa', display: 'flex', alignItems: 'center', gap: '5px' }, children: [_jsx("span", { style: {
+                                            width: '6px',
+                                            height: '6px',
+                                            borderRadius: '50%',
+                                            backgroundColor: '#4caf50',
+                                            display: 'inline-block',
+                                        } }), "Online"] })] })] }), _jsxs("div", { style: {
+                    flex: 1,
+                    overflowY: 'auto',
+                    padding: '20px 16px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '10px',
+                    backgroundColor: '#f8f8fc',
+                }, children: [messages.length === 0 ? (_jsxs("div", { style: {
+                            textAlign: 'center',
+                            color: '#ccc',
+                            fontSize: '13px',
+                            marginTop: 'auto',
+                            marginBottom: 'auto',
+                        }, children: ["Say hello to ", activeUser.name, "! \uD83D\uDC4B"] })) : (messages.map((msg) => (_jsx(MessageBubble, { message: msg, primaryColor: primaryColor }, msg.id)))), _jsx("div", { ref: messagesEndRef })] }), _jsxs("div", { style: {
+                    padding: '12px 16px',
+                    borderTop: '1px solid #f0f0f5',
+                    backgroundColor: '#fff',
+                    display: 'flex',
+                    alignItems: 'flex-end',
+                    gap: '10px',
+                }, children: [_jsx("textarea", { ref: inputRef, value: inputText, onChange: (e) => setInputText(e.target.value), onKeyDown: handleKeyDown, placeholder: "Type a message... (Enter to send)", rows: 1, style: {
+                            flex: 1,
+                            resize: 'none',
+                            border: '1.5px solid #eee',
+                            borderRadius: '12px',
+                            padding: '10px 14px',
+                            fontFamily,
+                            fontSize: '14px',
+                            outline: 'none',
+                            lineHeight: '1.5',
+                            maxHeight: '90px',
+                            overflowY: 'auto',
+                            transition: 'border-color 0.2s',
+                            color: '#1a1a2e',
+                        }, onFocus: (e) => {
+                            e.target.style.borderColor = primaryColor;
+                        }, onBlur: (e) => {
+                            e.target.style.borderColor = '#eee';
+                        } }), _jsx("button", { onClick: handleSend, disabled: !inputText.trim(), "aria-label": "Send message", style: {
+                            width: '42px',
+                            height: '42px',
+                            borderRadius: '50%',
+                            backgroundColor: inputText.trim() ? primaryColor : '#eee',
+                            border: 'none',
+                            cursor: inputText.trim() ? 'pointer' : 'not-allowed',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            flexShrink: 0,
+                            transition: 'all 0.2s ease',
+                        }, children: _jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z", stroke: inputText.trim() ? '#fff' : '#bbb', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }));
+};
+const MessageBubble = ({ message, primaryColor }) => {
+    const isMe = message.senderId === 'me';
+    const time = new Date(message.timestamp).toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: isMe ? 'flex-end' : 'flex-start',
+            gap: '3px',
+        }, children: [_jsx("div", { style: {
+                    maxWidth: '78%',
+                    padding: '10px 14px',
+                    borderRadius: isMe ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
+                    backgroundColor: isMe ? primaryColor : '#fff',
+                    color: isMe ? '#fff' : '#1a1a2e',
+                    fontSize: '14px',
+                    lineHeight: '1.5',
+                    boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
+                    wordBreak: 'break-word',
+                }, children: message.text }), _jsx("span", { style: { fontSize: '11px', color: '#bbb', paddingLeft: '4px', paddingRight: '4px' }, children: time })] }));
+};

package/dist/components/ChatButton/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ChatWidgetTheme } from '../../types';
+interface ChatButtonProps {
+    isOpen: boolean;
+    onClick: () => void;
+    theme?: ChatWidgetTheme;
+}
+export declare const ChatButton: React.FC<ChatButtonProps>;
+export {};

package/dist/components/ChatButton/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeTheme } from '../../utils/theme';
+export const ChatButton = ({ isOpen, onClick, theme, }) => {
+    const t = mergeTheme(theme);
+    const positionStyle = t.buttonPosition === 'bottom-left'
+        ? { left: '24px', right: 'auto' }
+        : { right: '24px', left: 'auto' };
+    return (_jsx("button", { onClick: onClick, "aria-label": isOpen ? 'Close chat' : t.buttonLabel, style: Object.assign(Object.assign({ position: 'fixed', bottom: '24px' }, positionStyle), { zIndex: 9999, display: 'flex', alignItems: 'center', gap: '10px', padding: isOpen ? '14px' : '14px 22px', backgroundColor: t.buttonColor, color: t.buttonTextColor, border: 'none', borderRadius: '50px', cursor: 'pointer', fontFamily: t.fontFamily, fontSize: '15px', fontWeight: 600, boxShadow: `0 8px 32px ${t.buttonColor}55`, transition: 'all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)', transform: isOpen ? 'scale(0.95)' : 'scale(1)', letterSpacing: '0.01em', minWidth: isOpen ? '52px' : 'auto', justifyContent: 'center' }), onMouseEnter: (e) => {
+            e.currentTarget.style.transform = 'scale(1.06) translateY(-2px)';
+            e.currentTarget.style.boxShadow = `0 12px 40px ${t.buttonColor}77`;
+        }, onMouseLeave: (e) => {
+            e.currentTarget.style.transform = isOpen ? 'scale(0.95)' : 'scale(1)';
+            e.currentTarget.style.boxShadow = `0 8px 32px ${t.buttonColor}55`;
+        }, children: isOpen ? (_jsx(CloseIcon, { color: t.buttonTextColor })) : (_jsxs(_Fragment, { children: [_jsx(ChatIcon, { color: t.buttonTextColor }), _jsx("span", { children: t.buttonLabel })] })) }));
+};
+const ChatIcon = ({ color }) => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }));
+const CloseIcon = ({ color }) => (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18", stroke: color, strokeWidth: "2.5", strokeLinecap: "round" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: color, strokeWidth: "2.5", strokeLinecap: "round" })] }));

package/dist/components/ChatWidget.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ChatWidgetProps } from '../types';
+/**
+ * ChatWidget
+ *
+ * Drop-in chat widget for React.js and Next.js apps.
+ * All behavior is configured via environment variables.
+ * All UI styling is configured via the `theme` prop.
+ *
+ * @example
+ * // Basic usage
+ * <ChatWidget />
+ *
+ * @example
+ * // With custom theme
+ * <ChatWidget
+ *   theme={{
+ *     primaryColor: '#FF6B6B',
+ *     buttonColor: '#FF6B6B',
+ *     buttonLabel: 'Need Help?',
+ *     buttonPosition: 'bottom-left',
+ *     fontFamily: "'Inter', sans-serif",
+ *     borderRadius: '12px',
+ *   }}
+ * />
+ */
+export declare const ChatWidget: React.FC<ChatWidgetProps>;
+export default ChatWidget;

package/dist/components/ChatWidget.js

@@ -0,0 +1,50 @@
+'use client'; // Next.js App Router directive (ignored in React/Pages Router)
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { loadChatConfig } from '../config';
+import { ChatButton } from './ChatButton';
+import { ChatWindow } from './ChatWindow';
+import { mergeTheme } from '../utils/theme';
+/**
+ * ChatWidget
+ *
+ * Drop-in chat widget for React.js and Next.js apps.
+ * All behavior is configured via environment variables.
+ * All UI styling is configured via the `theme` prop.
+ *
+ * @example
+ * // Basic usage
+ * <ChatWidget />
+ *
+ * @example
+ * // With custom theme
+ * <ChatWidget
+ *   theme={{
+ *     primaryColor: '#FF6B6B',
+ *     buttonColor: '#FF6B6B',
+ *     buttonLabel: 'Need Help?',
+ *     buttonPosition: 'bottom-left',
+ *     fontFamily: "'Inter', sans-serif",
+ *     borderRadius: '12px',
+ *   }}
+ * />
+ */
+export const ChatWidget = ({ theme }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isMounted, setIsMounted] = useState(false);
+    // SSR Safety: Only render on the client
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    // Load config from env (safe on both client and server)
+    const config = loadChatConfig();
+    const t = mergeTheme(theme);
+    // Don't render anything server-side
+    if (!isMounted)
+        return null;
+    // DISABLE: render nothing at all
+    if (config.status === 'DISABLE')
+        return null;
+    return (_jsxs(_Fragment, { children: [isOpen && (_jsx(ChatWindow, { config: config, theme: theme, buttonPosition: t.buttonPosition })), _jsx(ChatButton, { isOpen: isOpen, onClick: () => setIsOpen((prev) => !prev), theme: theme })] }));
+};
+export default ChatWidget;

package/dist/components/ChatWindow/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ChatConfig, ChatWidgetTheme } from '../../types';
+interface ChatWindowProps {
+    config: ChatConfig;
+    theme?: ChatWidgetTheme;
+    buttonPosition: 'bottom-right' | 'bottom-left';
+}
+export declare const ChatWindow: React.FC<ChatWindowProps>;
+export {};

package/dist/components/ChatWindow/index.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { UserList } from '../UserList';
+import { ChatBox } from '../ChatBox';
+import { MaintenanceView } from '../MaintenanceView';
+import { useUsers } from '../../hooks/useUsers';
+import { useChat } from '../../hooks/useChat';
+import { buildUserListUrl } from '../../config';
+import { mergeTheme } from '../../utils/theme';
+export const ChatWindow = ({ config, theme, buttonPosition, }) => {
+    var _a;
+    const t = mergeTheme(theme);
+    const userListUrl = buildUserListUrl(config);
+    const [activeTab, setActiveTab] = useState('developers');
+    const filterType = config.chatType === 'SUPPORT'
+        ? 'developer'
+        : config.chatType === 'CHAT'
+            ? 'user'
+            : activeTab === 'developers'
+                ? 'developer'
+                : 'user';
+    const { users, loading, error } = useUsers({
+        url: userListUrl,
+        filterType,
+        enabled: config.status === 'ACTIVE',
+    });
+    const { messages, activeUser, selectUser, sendMessage } = useChat();
+    const positionStyle = buttonPosition === 'bottom-left'
+        ? { left: '24px', right: 'auto' }
+        : { right: '24px', left: 'auto' };
+    return (_jsxs("div", { style: Object.assign(Object.assign({ position: 'fixed', bottom: '90px' }, positionStyle), { zIndex: 9998, width: '680px', maxWidth: 'calc(100vw - 32px)', height: '520px', maxHeight: 'calc(100vh - 120px)', backgroundColor: t.backgroundColor, borderRadius: t.borderRadius, boxShadow: '0 24px 80px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.08)', display: 'flex', flexDirection: 'column', overflow: 'hidden', fontFamily: t.fontFamily, animation: 'cw-slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)' }), children: [_jsx("style", { children: `
+        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
+        @keyframes cw-slideUp {
+          from { opacity: 0; transform: translateY(20px) scale(0.97); }
+          to   { opacity: 1; transform: translateY(0)   scale(1);    }
+        }
+        @keyframes shimmer {
+          0%   { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+        ::-webkit-scrollbar { width: 4px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 4px; }
+      ` }), _jsxs("div", { style: {
+                    padding: '18px 20px',
+                    background: `linear-gradient(135deg, ${t.primaryColor}, ${adjustColor(t.primaryColor, -20)})`,
+                    color: '#fff',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    flexShrink: 0,
+                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' }, children: [_jsx("div", { style: {
+                                    width: '38px',
+                                    height: '38px',
+                                    borderRadius: '50%',
+                                    backgroundColor: 'rgba(255,255,255,0.2)',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                }, children: _jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: '16px', letterSpacing: '-0.02em' }, children: config.chatType === 'SUPPORT'
+                                            ? 'Support Chat'
+                                            : config.chatType === 'CHAT'
+                                                ? 'Team Chat'
+                                                : 'Chat Center' }), _jsx("div", { style: { fontSize: '12px', opacity: 0.8 }, children: config.status === 'ACTIVE' ? 'We\'re online' : 'Unavailable' })] })] }), _jsx(StatusBadge, { status: config.status })] }), config.chatType === 'BOTH' && config.status === 'ACTIVE' && (_jsx("div", { style: {
+                    display: 'flex',
+                    borderBottom: '1px solid #f0f0f5',
+                    backgroundColor: '#fafafa',
+                    flexShrink: 0,
+                }, children: ['developers', 'users'].map((tab) => (_jsx("button", { onClick: () => setActiveTab(tab), style: {
+                        flex: 1,
+                        padding: '11px',
+                        border: 'none',
+                        background: 'transparent',
+                        cursor: 'pointer',
+                        fontSize: '13px',
+                        fontWeight: 600,
+                        fontFamily: t.fontFamily,
+                        color: activeTab === tab ? t.primaryColor : '#999',
+                        borderBottom: activeTab === tab ? `2px solid ${t.primaryColor}` : '2px solid transparent',
+                        transition: 'all 0.2s',
+                        textTransform: 'capitalize',
+                    }, children: tab === 'developers' ? '🛠 Support (Devs)' : '👥 Users' }, tab))) })), config.status === 'MAINTENANCE' ? (_jsx(MaintenanceView, { fontFamily: t.fontFamily, primaryColor: t.primaryColor })) : (_jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [_jsxs("div", { style: {
+                            width: '240px',
+                            borderRight: '1px solid #f0f0f5',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            flexShrink: 0,
+                            overflow: 'hidden',
+                        }, children: [_jsxs("div", { style: {
+                                    padding: '12px 16px',
+                                    borderBottom: '1px solid #f5f5f5',
+                                    fontSize: '11px',
+                                    fontWeight: 700,
+                                    color: '#bbb',
+                                    textTransform: 'uppercase',
+                                    letterSpacing: '0.08em',
+                                }, children: [filterType === 'developer' ? 'Developers' : 'Users', ' ', !loading && !error && `(${users.length})`] }), _jsx(UserList, { users: users, loading: loading, error: error, activeUserId: (_a = activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid) !== null && _a !== void 0 ? _a : null, onSelectUser: selectUser, primaryColor: t.primaryColor, fontFamily: t.fontFamily })] }), _jsx(ChatBox, { activeUser: activeUser, messages: messages, onSendMessage: sendMessage, primaryColor: t.primaryColor, fontFamily: t.fontFamily })] }))] }));
+};
+const StatusBadge = ({ status }) => {
+    var _a;
+    const map = {
+        ACTIVE: { label: 'Active', bg: 'rgba(255,255,255,0.2)', dot: '#4caf50' },
+        MAINTENANCE: { label: 'Maintenance', bg: 'rgba(255,193,7,0.3)', dot: '#ffc107' },
+        DISABLE: { label: 'Disabled', bg: 'rgba(0,0,0,0.2)', dot: '#f44336' },
+    };
+    const s = (_a = map[status]) !== null && _a !== void 0 ? _a : map['DISABLE'];
+    return (_jsxs("span", { style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '5px',
+            padding: '4px 10px',
+            borderRadius: '20px',
+            backgroundColor: s.bg,
+            fontSize: '11px',
+            fontWeight: 600,
+            color: '#fff',
+        }, children: [_jsx("span", { style: {
+                    width: '6px',
+                    height: '6px',
+                    borderRadius: '50%',
+                    backgroundColor: s.dot,
+                    display: 'inline-block',
+                } }), s.label] }));
+};
+// Simple color darkener for gradient
+function adjustColor(hex, amount) {
+    const num = parseInt(hex.replace('#', ''), 16);
+    const r = Math.max(0, Math.min(255, (num >> 16) + amount));
+    const g = Math.max(0, Math.min(255, ((num >> 8) & 0xff) + amount));
+    const b = Math.max(0, Math.min(255, (num & 0xff) + amount));
+    return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+}

package/dist/components/MaintenanceView/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface MaintenanceViewProps {
+    fontFamily: string;
+    primaryColor: string;
+}
+export declare const MaintenanceView: React.FC<MaintenanceViewProps>;
+export {};

package/dist/components/MaintenanceView/index.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const MaintenanceView = ({ fontFamily, primaryColor, }) => {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+            padding: '32px',
+            fontFamily,
+            textAlign: 'center',
+            gap: '16px',
+        }, children: [_jsx("div", { style: {
+                    width: '72px',
+                    height: '72px',
+                    borderRadius: '50%',
+                    backgroundColor: `${primaryColor}15`,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginBottom: '8px',
+                }, children: _jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", stroke: primaryColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("h3", { style: {
+                    margin: 0,
+                    fontSize: '17px',
+                    fontWeight: 700,
+                    color: '#1a1a2e',
+                    letterSpacing: '-0.02em',
+                }, children: "Under Maintenance" }), _jsx("p", { style: {
+                    margin: 0,
+                    fontSize: '14px',
+                    color: '#888',
+                    lineHeight: 1.6,
+                    maxWidth: '220px',
+                }, children: "Chat is under maintenance. We'll be back shortly. Thank you for your patience!" }), _jsxs("span", { style: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: '6px',
+                    padding: '6px 14px',
+                    borderRadius: '20px',
+                    backgroundColor: '#fff3cd',
+                    color: '#856404',
+                    fontSize: '12px',
+                    fontWeight: 600,
+                    marginTop: '8px',
+                    border: '1px solid #ffc10730',
+                }, children: [_jsx("span", { style: {
+                            width: '6px',
+                            height: '6px',
+                            borderRadius: '50%',
+                            backgroundColor: '#ffc107',
+                            display: 'inline-block',
+                        } }), "Temporarily Unavailable"] })] }));
+};

package/dist/components/UserList/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ChatUser } from '../../types';
+interface UserListProps {
+    users: ChatUser[];
+    loading: boolean;
+    error: string | null;
+    activeUserId: string | null;
+    onSelectUser: (user: ChatUser) => void;
+    primaryColor: string;
+    fontFamily: string;
+}
+export declare const UserList: React.FC<UserListProps>;
+export {};

package/dist/components/UserList/index.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const UserList = ({ users, loading, error, activeUserId, onSelectUser, primaryColor, fontFamily, }) => {
+    if (loading) {
+        return (_jsx("div", { style: { padding: '16px', fontFamily }, children: [1, 2, 3, 4].map((i) => (_jsx(SkeletonUser, {}, i))) }));
+    }
+    if (error) {
+        return (_jsxs("div", { style: {
+                padding: '32px 20px',
+                textAlign: 'center',
+                fontFamily,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: '10px',
+            }, children: [_jsxs("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "#ff6b6b", strokeWidth: "2" }), _jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12", stroke: "#ff6b6b", strokeWidth: "2", strokeLinecap: "round" }), _jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16", stroke: "#ff6b6b", strokeWidth: "2", strokeLinecap: "round" })] }), _jsx("p", { style: { margin: 0, fontSize: '13px', color: '#ff6b6b', fontWeight: 600 }, children: "Failed to load users" }), _jsx("p", { style: { margin: 0, fontSize: '12px', color: '#999', lineHeight: 1.5 }, children: error })] }));
+    }
+    if (users.length === 0) {
+        return (_jsxs("div", { style: {
+                padding: '40px 20px',
+                textAlign: 'center',
+                fontFamily,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: '10px',
+            }, children: [_jsxs("svg", { width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2", stroke: "#ccc", strokeWidth: "2", strokeLinecap: "round" }), _jsx("circle", { cx: "9", cy: "7", r: "4", stroke: "#ccc", strokeWidth: "2" }), _jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75", stroke: "#ccc", strokeWidth: "2", strokeLinecap: "round" })] }), _jsx("p", { style: { margin: 0, fontSize: '13px', color: '#bbb', fontWeight: 600 }, children: "No users available" }), _jsx("p", { style: { margin: 0, fontSize: '12px', color: '#ccc' }, children: "Check back later" })] }));
+    }
+    return (_jsx("div", { style: { overflowY: 'auto', flex: 1, fontFamily }, children: users.map((user) => {
+            const isActive = user.uid === activeUserId;
+            const initials = user.name
+                .split(' ')
+                .map((n) => n[0])
+                .join('')
+                .toUpperCase()
+                .slice(0, 2);
+            return (_jsxs("button", { onClick: () => onSelectUser(user), style: {
+                    width: '100%',
+                    padding: '12px 16px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '12px',
+                    background: isActive ? `${primaryColor}12` : 'transparent',
+                    border: 'none',
+                    borderLeft: isActive ? `3px solid ${primaryColor}` : '3px solid transparent',
+                    cursor: 'pointer',
+                    textAlign: 'left',
+                    transition: 'all 0.18s ease',
+                    borderRadius: '0',
+                }, onMouseEnter: (e) => {
+                    if (!isActive) {
+                        e.currentTarget.style.backgroundColor = '#f8f8ff';
+                    }
+                }, onMouseLeave: (e) => {
+                    if (!isActive) {
+                        e.currentTarget.style.backgroundColor = 'transparent';
+                    }
+                }, children: [_jsx("div", { style: {
+                            width: '40px',
+                            height: '40px',
+                            borderRadius: '50%',
+                            backgroundColor: isActive ? primaryColor : stringToColor(user.name),
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            color: '#fff',
+                            fontSize: '13px',
+                            fontWeight: 700,
+                            flexShrink: 0,
+                            transition: 'background 0.2s',
+                        }, children: initials }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: {
+                                    fontSize: '14px',
+                                    fontWeight: 600,
+                                    color: isActive ? primaryColor : '#1a1a2e',
+                                    whiteSpace: 'nowrap',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                }, children: user.name }), _jsx("div", { style: {
+                                    fontSize: '12px',
+                                    color: '#999',
+                                    whiteSpace: 'nowrap',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                }, children: user.project || user.email })] }), _jsx("span", { style: {
+                            fontSize: '10px',
+                            fontWeight: 700,
+                            padding: '3px 8px',
+                            borderRadius: '20px',
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.05em',
+                            flexShrink: 0,
+                            backgroundColor: user.type === 'developer' ? '#e8f5e9' : '#e3f2fd',
+                            color: user.type === 'developer' ? '#2e7d32' : '#1565c0',
+                        }, children: user.type === 'developer' ? 'Dev' : 'User' })] }, user.uid));
+        }) }));
+};
+const SkeletonUser = () => (_jsxs("div", { style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        padding: '12px 16px',
+    }, children: [_jsx("div", { style: {
+                width: '40px',
+                height: '40px',
+                borderRadius: '50%',
+                background: 'linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)',
+                backgroundSize: '200% 100%',
+                animation: 'shimmer 1.5s infinite',
+                flexShrink: 0,
+            } }), _jsxs("div", { style: { flex: 1 }, children: [_jsx("div", { style: {
+                        height: '12px',
+                        width: '60%',
+                        borderRadius: '6px',
+                        background: 'linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)',
+                        backgroundSize: '200% 100%',
+                        animation: 'shimmer 1.5s infinite',
+                        marginBottom: '8px',
+                    } }), _jsx("div", { style: {
+                        height: '10px',
+                        width: '40%',
+                        borderRadius: '6px',
+                        background: 'linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)',
+                        backgroundSize: '200% 100%',
+                        animation: 'shimmer 1.5s infinite',
+                    } })] })] }));
+// Generate consistent color from name string
+function stringToColor(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const colors = [
+        '#7C3AED', '#2563EB', '#059669', '#D97706',
+        '#DC2626', '#7C2D12', '#0E7490', '#4F46E5',
+    ];
+    return colors[Math.abs(hash) % colors.length];
+}

package/dist/config/index.d.ts

@@ -0,0 +1,3 @@
+import { ChatConfig } from '../types';
+export declare function loadChatConfig(): ChatConfig;
+export declare function buildUserListUrl(config: ChatConfig): string;

package/dist/config/index.js

@@ -0,0 +1,51 @@
+/**
+ * Safely reads an environment variable.
+ * Supports both Next.js (NEXT_PUBLIC_) and React (REACT_APP_) prefixes.
+ * Falls back gracefully if running in SSR or non-browser environments.
+ */
+function getEnvVar(key) {
+    var _a, _b, _c;
+    const nextKey = `NEXT_PUBLIC_${key}`;
+    const reactKey = `REACT_APP_${key}`;
+    // Next.js / Node.js environment
+    if (typeof process !== 'undefined' && process.env) {
+        return ((_c = (_b = (_a = process.env[nextKey]) !== null && _a !== void 0 ? _a : process.env[reactKey]) !== null && _b !== void 0 ? _b : process.env[key]) !== null && _c !== void 0 ? _c : undefined);
+    }
+    return undefined;
+}
+function validateStatus(value) {
+    const valid = ['ACTIVE', 'DISABLE', 'MAINTENANCE'];
+    if (value && valid.includes(value)) {
+        return value;
+    }
+    console.warn(`[ChatWidget] Invalid CHAT_STATUS "${value}". Defaulting to "DISABLE".`);
+    return 'DISABLE';
+}
+function validateChatType(value) {
+    const valid = ['SUPPORT', 'CHAT', 'BOTH'];
+    if (value && valid.includes(value)) {
+        return value;
+    }
+    console.warn(`[ChatWidget] Invalid CHAT_TYPE "${value}". Defaulting to "SUPPORT".`);
+    return 'SUPPORT';
+}
+export function loadChatConfig() {
+    var _a, _b, _c;
+    const hostUrl = (_a = getEnvVar('CHAT_HOST_URL')) !== null && _a !== void 0 ? _a : 'http://localhost';
+    const hostPort = parseInt((_b = getEnvVar('CHAT_HOST_PORT')) !== null && _b !== void 0 ? _b : '3001', 10);
+    const userListEndpoint = (_c = getEnvVar('CHAT_USER_LIST')) !== null && _c !== void 0 ? _c : 'api/users';
+    const status = validateStatus(getEnvVar('CHAT_STATUS'));
+    const chatType = validateChatType(getEnvVar('CHAT_TYPE'));
+    return {
+        hostUrl,
+        hostPort,
+        userListEndpoint,
+        status,
+        chatType,
+    };
+}
+export function buildUserListUrl(config) {
+    const base = config.hostUrl.replace(/\/$/, '');
+    const endpoint = config.userListEndpoint.replace(/^\//, '');
+    return `${base}:${config.hostPort}/${endpoint}`;
+}

package/dist/hooks/useChat.d.ts

@@ -0,0 +1,10 @@
+import { ChatMessage, ChatUser } from '../types';
+interface UseChatReturn {
+    messages: ChatMessage[];
+    activeUser: ChatUser | null;
+    selectUser: (user: ChatUser) => void;
+    sendMessage: (text: string) => void;
+    clearChat: () => void;
+}
+export declare function useChat(): UseChatReturn;
+export {};

package/dist/hooks/useChat.js

@@ -0,0 +1,29 @@
+import { useState, useCallback } from 'react';
+export function useChat() {
+    const [messages, setMessages] = useState([]);
+    const [activeUser, setActiveUser] = useState(null);
+    const selectUser = useCallback((user) => {
+        setActiveUser(user);
+        setMessages([]);
+        // TODO: Connect WebSocket here — load message history for this user
+    }, []);
+    const sendMessage = useCallback((text) => {
+        if (!activeUser || !text.trim())
+            return;
+        const newMsg = {
+            id: `msg_${Date.now()}_${Math.random().toString(36).slice(2)}`,
+            senderId: 'me',
+            receiverId: activeUser.uid,
+            text: text.trim(),
+            timestamp: new Date(),
+            status: 'sent',
+        };
+        setMessages((prev) => [...prev, newMsg]);
+        // TODO: Emit via WebSocket — socket.emit('message', newMsg)
+    }, [activeUser]);
+    const clearChat = useCallback(() => {
+        setMessages([]);
+        setActiveUser(null);
+    }, []);
+    return { messages, activeUser, selectUser, sendMessage, clearChat };
+}

package/dist/hooks/useUsers.d.ts

@@ -0,0 +1,14 @@
+import { ChatUser, UserType } from '../types';
+interface UseUsersOptions {
+    url: string;
+    filterType?: UserType;
+    enabled?: boolean;
+}
+interface UseUsersReturn {
+    users: ChatUser[];
+    loading: boolean;
+    error: string | null;
+    refetch: () => void;
+}
+export declare function useUsers({ url, filterType, enabled, }: UseUsersOptions): UseUsersReturn;
+export {};

package/dist/hooks/useUsers.js

@@ -0,0 +1,32 @@
+import { useState, useEffect, useCallback } from 'react';
+import { fetchUsers } from '../services/userService';
+export function useUsers({ url, filterType, enabled = true, }) {
+    const [users, setUsers] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const load = useCallback(async () => {
+        if (!enabled)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            const data = await fetchUsers(url);
+            const filtered = filterType
+                ? data.filter((u) => u.type === filterType)
+                : data;
+            setUsers(filtered);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : 'Unknown error occurred.';
+            setError(message);
+            setUsers([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [url, filterType, enabled]);
+    useEffect(() => {
+        load();
+    }, [load]);
+    return { users, loading, error, refetch: load };
+}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export { ChatWidget } from './components/ChatWidget';
+export { default } from './components/ChatWidget';
+export { ChatButton } from './components/ChatButton';
+export { ChatWindow } from './components/ChatWindow';
+export { UserList } from './components/UserList';
+export { ChatBox } from './components/ChatBox';
+export { MaintenanceView } from './components/MaintenanceView';
+export { useUsers } from './hooks/useUsers';
+export { useChat } from './hooks/useChat';
+export { loadChatConfig, buildUserListUrl } from './config';
+export { fetchUsers } from './services/userService';
+export type { ChatUser, ChatMessage, ChatConfig, ChatWidgetTheme, ChatWidgetProps, ChatStatus, ChatType, UserType, TabType, } from './types';
+export { defaultTheme, mergeTheme } from './utils/theme';

package/dist/index.js

@@ -0,0 +1,18 @@
+// Main component
+export { ChatWidget } from './components/ChatWidget';
+export { default } from './components/ChatWidget';
+// Sub-components (for advanced customization)
+export { ChatButton } from './components/ChatButton';
+export { ChatWindow } from './components/ChatWindow';
+export { UserList } from './components/UserList';
+export { ChatBox } from './components/ChatBox';
+export { MaintenanceView } from './components/MaintenanceView';
+// Hooks
+export { useUsers } from './hooks/useUsers';
+export { useChat } from './hooks/useChat';
+// Config utilities
+export { loadChatConfig, buildUserListUrl } from './config';
+// Services
+export { fetchUsers } from './services/userService';
+// Theme utilities
+export { defaultTheme, mergeTheme } from './utils/theme';

package/dist/services/userService.d.ts

@@ -0,0 +1,7 @@
+import { ChatUser } from '../types';
+export interface FetchUsersResult {
+    data: ChatUser[] | null;
+    error: string | null;
+    loading: boolean;
+}
+export declare function fetchUsers(url: string): Promise<ChatUser[]>;

package/dist/services/userService.js

@@ -0,0 +1,16 @@
+export async function fetchUsers(url) {
+    const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    });
+    if (!response.ok) {
+        throw new Error(`[ChatWidget] Failed to fetch users: ${response.status} ${response.statusText}`);
+    }
+    const data = await response.json();
+    if (!Array.isArray(data)) {
+        throw new Error('[ChatWidget] User list API did not return an array.');
+    }
+    return data;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,40 @@
+export type ChatStatus = 'ACTIVE' | 'DISABLE' | 'MAINTENANCE';
+export type ChatType = 'SUPPORT' | 'CHAT' | 'BOTH';
+export type UserType = 'developer' | 'user';
+export type TabType = 'developers' | 'users';
+export interface ChatUser {
+    name: string;
+    uid: string;
+    email: string;
+    mobile: string;
+    project: string;
+    type: UserType;
+}
+export interface ChatMessage {
+    id: string;
+    senderId: string;
+    receiverId: string;
+    text: string;
+    timestamp: Date;
+    status: 'sent' | 'delivered' | 'read';
+}
+export interface ChatConfig {
+    hostUrl: string;
+    hostPort: number;
+    userListEndpoint: string;
+    status: ChatStatus;
+    chatType: ChatType;
+}
+export interface ChatWidgetTheme {
+    fontFamily?: string;
+    primaryColor?: string;
+    backgroundColor?: string;
+    buttonColor?: string;
+    buttonTextColor?: string;
+    buttonLabel?: string;
+    buttonPosition?: 'bottom-right' | 'bottom-left';
+    borderRadius?: string;
+}
+export interface ChatWidgetProps {
+    theme?: ChatWidgetTheme;
+}

package/dist/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/theme.d.ts

@@ -0,0 +1,4 @@
+import { ChatWidgetTheme } from '../types';
+export declare const defaultTheme: Required<ChatWidgetTheme>;
+export declare function mergeTheme(custom?: ChatWidgetTheme): Required<ChatWidgetTheme>;
+export declare function themeToCSS(theme: Required<ChatWidgetTheme>): string;

package/dist/utils/theme.js

@@ -0,0 +1,23 @@
+export const defaultTheme = {
+    fontFamily: "'DM Sans', 'Segoe UI', sans-serif",
+    primaryColor: '#6C63FF',
+    backgroundColor: '#ffffff',
+    buttonColor: '#6C63FF',
+    buttonTextColor: '#ffffff',
+    buttonLabel: 'Chat with us',
+    buttonPosition: 'bottom-right',
+    borderRadius: '16px',
+};
+export function mergeTheme(custom) {
+    return Object.assign(Object.assign({}, defaultTheme), custom);
+}
+export function themeToCSS(theme) {
+    return `
+    --cw-font: ${theme.fontFamily};
+    --cw-primary: ${theme.primaryColor};
+    --cw-bg: ${theme.backgroundColor};
+    --cw-btn-bg: ${theme.buttonColor};
+    --cw-btn-text: ${theme.buttonTextColor};
+    --cw-radius: ${theme.borderRadius};
+  `;
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "ajaxter-chat",
+  "version": "1.0.0",
+  "description": "A reusable, configurable chat widget for React.js and Next.js applications.",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "lint": "eslint src --ext .ts,.tsx",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.0",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
+    "typescript": "^5.9.3"
+  },
+  "keywords": [
+    "react",
+    "nextjs",
+    "chat",
+    "widget",
+    "support",
+    "typescript",
+    "ajaxter"
+  ],
+  "license": "MIT"
+}