ajaxter-chat 1.0.1 → 2.0.1

package/dist/config/index.js

@@ -1,93 +1,38 @@
-/**
- * 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) {
+function getEnv(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 ((_c = (_b = (_a = process.env[`NEXT_PUBLIC_${key}`]) !== null && _a !== void 0 ? _a : process.env[`REACT_APP_${key}`]) !== 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".`);
+function validateStatus(v) {
+    if (v === 'ACTIVE' || v === 'DISABLE' || v === 'MAINTENANCE')
+        return v;
+    console.warn(`[ChatWidget] Invalid CHAT_STATUS "${v}". 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".`);
+function validateChatType(v) {
+    if (v === 'SUPPORT' || v === 'CHAT' || v === 'BOTH')
+        return v;
+    console.warn(`[ChatWidget] Invalid CHAT_TYPE "${v}". Defaulting to SUPPORT.`);
     return 'SUPPORT';
 }
-function parseBool(value, defaultValue) {
-    if (value === undefined || value === '')
-        return defaultValue;
-    const v = value.toLowerCase().trim();
-    if (v === 'true' || v === '1' || v === 'yes')
-        return true;
-    if (v === 'false' || v === '0' || v === 'no')
-        return false;
-    return defaultValue;
-}
-function parsePositiveInt(value, fallback) {
-    if (value === undefined || value === '')
-        return fallback;
-    const n = parseInt(value, 10);
-    return Number.isFinite(n) && n > 0 ? n : fallback;
-}
-function parseOptionalPort(value) {
-    if (value === undefined || value.trim() === '')
-        return undefined;
-    const n = parseInt(value, 10);
-    return Number.isFinite(n) && n > 0 ? n : undefined;
-}
-function parseSizeRatio(value, fallback) {
-    if (value === undefined || value === '')
-        return fallback;
-    const n = parseFloat(value);
-    if (!Number.isFinite(n))
-        return fallback;
-    return Math.min(1, Math.max(0, n));
-}
 export function loadChatConfig() {
     var _a, _b;
-    const hostUrl = (_a = getEnvVar('CHAT_HOST_URL')) !== null && _a !== void 0 ? _a : 'http://localhost';
-    const hostPort = parseOptionalPort(getEnvVar('CHAT_HOST_PORT'));
-    const userListEndpoint = (_b = getEnvVar('CHAT_USER_LIST')) !== null && _b !== void 0 ? _b : 'api/users';
-    const status = validateStatus(getEnvVar('CHAT_STATUS'));
-    const chatType = validateChatType(getEnvVar('CHAT_TYPE'));
-    const showNeedSupport = parseBool(getEnvVar('CHAT_SHOW_NEED_SUPPORT'), true);
-    const showNewConversation = parseBool(getEnvVar('CHAT_SHOW_NEW_CONVERSATION'), true);
+    const portStr = getEnv('CHAT_HOST_PORT');
+    const hostPort = portStr ? parseInt(portStr, 10) : null;
     return {
-        hostUrl,
+        hostUrl: (_a = getEnv('CHAT_HOST_URL')) !== null && _a !== void 0 ? _a : 'http://localhost',
         hostPort,
-        userListEndpoint,
-        status,
-        chatType,
-        showNeedSupport,
-        showNewConversation,
-        widgetMinWidth: parsePositiveInt(getEnvVar('CHAT_WIDGET_MIN_WIDTH'), 320),
-        widgetMaxWidth: parsePositiveInt(getEnvVar('CHAT_WIDGET_MAX_WIDTH'), 720),
-        widgetMinHeight: parsePositiveInt(getEnvVar('CHAT_WIDGET_MIN_HEIGHT'), 420),
-        widgetMaxHeight: parsePositiveInt(getEnvVar('CHAT_WIDGET_MAX_HEIGHT'), 720),
-        widgetDefaultSize: parseSizeRatio(getEnvVar('CHAT_WIDGET_DEFAULT_SIZE'), 0.45),
+        userListEndpoint: (_b = getEnv('CHAT_USER_LIST')) !== null && _b !== void 0 ? _b : 'api/users',
+        status: validateStatus(getEnv('CHAT_STATUS')),
+        chatType: validateChatType(getEnv('CHAT_TYPE')),
     };
 }
 export function buildUserListUrl(config) {
     const base = config.hostUrl.replace(/\/$/, '');
     const endpoint = config.userListEndpoint.replace(/^\//, '');
-    if (config.hostPort !== undefined) {
-        return `${base}:${config.hostPort}/${endpoint}`;
-    }
-    return `${base}/${endpoint}`;
+    // Port is optional
+    const portPart = config.hostPort ? `:${config.hostPort}` : '';
+    return `${base}${portPart}/${endpoint}`;
 }

package/dist/hooks/useChat.d.ts

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

package/dist/hooks/useChat.js

@@ -2,47 +2,25 @@ import { useState, useCallback } from 'react';
 export function useChat() {
     const [messages, setMessages] = useState([]);
     const [activeUser, setActiveUser] = useState(null);
-    const [recentChats, setRecentChats] = useState([]);
-    const upsertRecent = useCallback((user, lastMessage) => {
-        const updatedAt = new Date();
-        setRecentChats((prev) => {
-            const rest = prev.filter((r) => r.user.uid !== user.uid);
-            return [{ user, lastMessage, updatedAt }, ...rest].slice(0, 50);
-        });
-    }, []);
     const selectUser = useCallback((user) => {
         setActiveUser(user);
         setMessages([]);
-    }, []);
-    const openRecent = useCallback((user) => {
-        setActiveUser(user);
-        setMessages([]);
+        // TODO: socket.emit('join', user.uid); socket.on('message', handler)
     }, []);
     const sendMessage = useCallback((text) => {
         if (!activeUser || !text.trim())
             return;
-        const newMsg = {
-            id: `msg_${Date.now()}_${Math.random().toString(36).slice(2)}`,
+        const msg = {
+            id: `msg_${Date.now()}`,
             senderId: 'me',
             receiverId: activeUser.uid,
             text: text.trim(),
             timestamp: new Date(),
             status: 'sent',
         };
-        setMessages((prev) => [...prev, newMsg]);
-        upsertRecent(activeUser, text.trim());
-    }, [activeUser, upsertRecent]);
-    const clearChat = useCallback(() => {
-        setMessages([]);
-        setActiveUser(null);
-    }, []);
-    return {
-        messages,
-        activeUser,
-        recentChats,
-        selectUser,
-        sendMessage,
-        clearChat,
-        openRecent,
-    };
+        setMessages(prev => [...prev, msg]);
+        // TODO: socket.emit('message', msg)
+    }, [activeUser]);
+    const clearChat = useCallback(() => { setMessages([]); setActiveUser(null); }, []);
+    return { messages, activeUser, selectUser, sendMessage, clearChat };
 }

package/dist/hooks/useUsers.d.ts

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

package/dist/hooks/useUsers.js

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

package/dist/index.d.ts

@@ -1,13 +1,14 @@
-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 { ChatWidget, default } from './components/ChatWidget';
+export { HomeScreen } from './components/HomeScreen';
+export { UserListScreen } from './components/UserListScreen';
+export { ChatScreen } from './components/ChatScreen';
+export { RecentChatsScreen } from './components/RecentChatsScreen';
+export { TicketScreen } from './components/TicketScreen';
 export { MaintenanceView } from './components/MaintenanceView';
+export { BottomTabs } from './components/Tabs/BottomTabs';
 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, BottomNavTab, HomeFlow, RaisedTicket, RecentChat, } from './types';
 export { defaultTheme, mergeTheme } from './utils/theme';
+export type { ChatUser, ChatMessage, ChatConfig, ChatWidgetTheme, ChatWidgetProps, ChatStatus, ChatType, UserType, Screen, BottomTab, UserListContext, Ticket, } from './types';

package/dist/index.js

@@ -1,18 +1,13 @@
-// 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 { ChatWidget, default } from './components/ChatWidget';
+export { HomeScreen } from './components/HomeScreen';
+export { UserListScreen } from './components/UserListScreen';
+export { ChatScreen } from './components/ChatScreen';
+export { RecentChatsScreen } from './components/RecentChatsScreen';
+export { TicketScreen } from './components/TicketScreen';
 export { MaintenanceView } from './components/MaintenanceView';
-// Hooks
+export { BottomTabs } from './components/Tabs/BottomTabs';
 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

@@ -1,7 +1,2 @@
 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

@@ -1,16 +1,9 @@
 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.');
-    }
+    const res = await fetch(url, { headers: { 'Content-Type': 'application/json' } });
+    if (!res.ok)
+        throw new Error(`Failed to fetch users: ${res.status}`);
+    const data = await res.json();
+    if (!Array.isArray(data))
+        throw new Error('User API did not return an array');
     return data;
 }

package/dist/src/components/ChatScreen/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChatMessage, ChatUser, ChatWidgetTheme } from '../../types';
+interface ChatScreenProps {
+    activeUser: ChatUser;
+    messages: ChatMessage[];
+    onSend: (text: string) => void;
+    onBack: () => void;
+    onClose: () => void;
+    theme?: ChatWidgetTheme;
+}
+export declare const ChatScreen: React.FC<ChatScreenProps>;
+export {};

package/dist/src/components/ChatScreen/index.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { mergeTheme } from '../../utils/theme';
+export const ChatScreen = ({ activeUser, messages, onSend, onBack, onClose, theme, }) => {
+    const t = mergeTheme(theme);
+    const [text, setText] = useState('');
+    const endRef = useRef(null);
+    const inputRef = useRef(null);
+    useEffect(() => { var _a; (_a = endRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' }); }, [messages]);
+    const handleSend = () => {
+        var _a;
+        if (!text.trim())
+            return;
+        onSend(text);
+        setText('');
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const handleKey = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    };
+    const initials = activeUser.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideInRight 0.25s ease' }, children: [_jsxs("div", { style: {
+                    backgroundColor: t.primaryColor,
+                    padding: '14px 18px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '10px',
+                    flexShrink: 0,
+                }, children: [_jsx("button", { onClick: onBack, style: iconBtnStyle, children: _jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M19 12H5M5 12L12 19M5 12L12 5", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("div", { style: {
+                            width: 36, height: 36, borderRadius: '50%',
+                            backgroundColor: 'rgba(255,255,255,0.25)',
+                            display: 'flex', alignItems: 'center', justifyContent: 'center',
+                            fontWeight: 700, fontSize: '13px', color: '#fff', flexShrink: 0,
+                        }, children: initials }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: '14px', color: '#fff', fontFamily: t.fontFamily }, children: activeUser.name }), _jsxs("div", { style: { fontSize: '11px', color: 'rgba(255,255,255,0.8)', display: 'flex', alignItems: 'center', gap: 4 }, children: [_jsx("span", { style: { width: 6, height: 6, borderRadius: '50%', backgroundColor: '#a8f0c6', display: 'inline-block' } }), "Online"] })] }), _jsx("button", { onClick: onClose, style: iconBtnStyle, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round" }) }) })] }), _jsxs("div", { style: {
+                    flex: 1, overflowY: 'auto', padding: '18px 16px',
+                    display: 'flex', flexDirection: 'column', gap: '10px',
+                    backgroundColor: '#f7f8fc',
+                }, children: [messages.length === 0 && (_jsxs("div", { style: {
+                            margin: 'auto', textAlign: 'center',
+                            fontSize: '13px', color: '#b0bec5',
+                            fontFamily: t.fontFamily,
+                        }, children: [_jsx("div", { style: { fontSize: '28px', marginBottom: 8 }, children: "\uD83D\uDCAC" }), "Say hi to ", activeUser.name, "!"] })), messages.map(msg => (_jsx(Bubble, { msg: msg, primaryColor: t.primaryColor, font: t.fontFamily }, msg.id))), _jsx("div", { ref: endRef })] }), _jsxs("div", { style: {
+                    borderTop: '1px solid #eef0f5',
+                    padding: '10px 14px',
+                    backgroundColor: '#fff',
+                    display: 'flex',
+                    alignItems: 'flex-end',
+                    gap: '10px',
+                    flexShrink: 0,
+                }, children: [_jsx("textarea", { ref: inputRef, value: text, onChange: e => setText(e.target.value), onKeyDown: handleKey, placeholder: "Type and press [enter]..", rows: 1, style: {
+                            flex: 1, resize: 'none', border: 'none', outline: 'none',
+                            fontFamily: t.fontFamily, fontSize: '14px', lineHeight: '1.5',
+                            maxHeight: '80px', overflowY: 'auto', color: '#1a2332',
+                            padding: '6px 0', backgroundColor: 'transparent',
+                        } }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }, children: [_jsx(IconBtn, { onClick: () => { }, title: "Reaction", children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M14 9h.01M10 9h.01M12 2a10 10 0 100 20A10 10 0 0012 2zm0 14s-4-1.5-4-4", stroke: "#9aa3af", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M8 15s1.5 2 4 2 4-2 4-2", stroke: "#9aa3af", strokeWidth: "1.8", strokeLinecap: "round" })] }) }), _jsx(IconBtn, { onClick: () => { }, title: "Attach", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66L9.41 17.41a2 2 0 01-2.83-2.83l8.49-8.48", stroke: "#9aa3af", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx(IconBtn, { onClick: () => { }, title: "Emoji", children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "#9aa3af", strokeWidth: "1.8" }), _jsx("path", { d: "M8 14s1.5 2 4 2 4-2 4-2", stroke: "#9aa3af", strokeWidth: "1.8", strokeLinecap: "round" }), _jsx("line", { x1: "9", y1: "9", x2: "9.01", y2: "9", stroke: "#9aa3af", strokeWidth: "2.5", strokeLinecap: "round" }), _jsx("line", { x1: "15", y1: "9", x2: "15.01", y2: "9", stroke: "#9aa3af", strokeWidth: "2.5", strokeLinecap: "round" })] }) }), text.trim() && (_jsx("button", { onClick: handleSend, style: {
+                                    width: 36, height: 36, borderRadius: '50%',
+                                    backgroundColor: t.primaryColor, border: 'none',
+                                    cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                    transition: 'transform 0.15s',
+                                }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] })] })] }));
+};
+const Bubble = ({ msg, primaryColor, font }) => {
+    const isMe = msg.senderId === 'me';
+    const time = new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: isMe ? 'flex-end' : 'flex-start', gap: 3 }, children: [_jsx("div", { style: {
+                    maxWidth: '75%', padding: '10px 14px',
+                    borderRadius: isMe ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
+                    backgroundColor: isMe ? primaryColor : '#fff',
+                    color: isMe ? '#fff' : '#1a2332',
+                    fontSize: '14px', lineHeight: '1.5',
+                    boxShadow: '0 1px 4px rgba(0,0,0,0.07)',
+                    fontFamily: font, wordBreak: 'break-word',
+                }, children: msg.text }), _jsx("span", { style: { fontSize: '11px', color: '#b0bec5', padding: '0 4px' }, children: time })] }));
+};
+const IconBtn = ({ onClick, title, children }) => (_jsx("button", { onClick: onClick, title: title, style: { background: 'none', border: 'none', cursor: 'pointer', padding: '4px', display: 'flex', alignItems: 'center', borderRadius: '6px' }, onMouseEnter: e => e.currentTarget.style.background = '#f3f4f6', onMouseLeave: e => e.currentTarget.style.background = 'none', children: children }));
+const iconBtnStyle = {
+    background: 'rgba(255,255,255,0.2)', border: 'none', borderRadius: '50%',
+    width: 34, height: 34, display: 'flex', alignItems: 'center', justifyContent: 'center',
+    cursor: 'pointer', flexShrink: 0,
+};

package/dist/src/components/ChatWidget.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ChatWidgetProps } from '../types';
+export declare const ChatWidget: React.FC<ChatWidgetProps>;
+export default ChatWidget;

package/dist/src/components/ChatWidget.js

@@ -0,0 +1,141 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from 'react';
+import { loadChatConfig, buildUserListUrl } from '../config';
+import { mergeTheme } from '../utils/theme';
+import { useUsers } from '../hooks/useUsers';
+import { useChat } from '../hooks/useChat';
+// Screens
+import { HomeScreen } from './HomeScreen';
+import { UserListScreen } from './UserListScreen';
+import { ChatScreen } from './ChatScreen';
+import { RecentChatsScreen } from './RecentChatsScreen';
+import { TicketScreen } from './TicketScreen';
+import { MaintenanceView } from './MaintenanceView';
+import { BottomTabs } from './Tabs/BottomTabs';
+export const ChatWidget = ({ theme }) => {
+    const [isMounted, setIsMounted] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const [isMaximized, setIsMaximized] = useState(false);
+    const [activeTab, setActiveTab] = useState('home');
+    const [screen, setScreen] = useState('home');
+    const [userListCtx, setUserListCtx] = useState('support');
+    const [tickets, setTickets] = useState([]);
+    // SSR guard
+    useEffect(() => { setIsMounted(true); }, []);
+    const config = loadChatConfig();
+    const t = mergeTheme(theme);
+    const apiUrl = buildUserListUrl(config);
+    // Determine filter based on context
+    const filterType = userListCtx === 'support' ? 'developer' : 'user';
+    const { users, loading, error } = useUsers(apiUrl, filterType, config.status === 'ACTIVE' && screen === 'user-list');
+    const { messages, activeUser, selectUser, sendMessage, clearChat } = useChat();
+    // ── Navigation helpers ─────────────────────────────────────────────────────
+    const goHome = useCallback(() => { setScreen('home'); setActiveTab('home'); }, []);
+    const handleTabChange = useCallback((tab) => {
+        setActiveTab(tab);
+        if (tab === 'home') {
+            setScreen('home');
+        }
+        if (tab === 'chats') {
+            setScreen('recent-chats');
+        }
+        if (tab === 'tickets') {
+            setScreen('tickets');
+        }
+    }, []);
+    const handleCardClick = useCallback((ctx) => {
+        if (ctx === 'ticket') {
+            setActiveTab('tickets');
+            setScreen('tickets');
+        }
+        else {
+            setUserListCtx(ctx);
+            setScreen('user-list');
+        }
+    }, []);
+    const handleSelectUser = useCallback((user) => {
+        selectUser(user);
+        setScreen('chat');
+    }, [selectUser]);
+    const handleBackFromUserList = useCallback(() => {
+        setScreen('home');
+    }, []);
+    const handleBackFromChat = useCallback(() => {
+        clearChat();
+        setScreen('user-list');
+    }, [clearChat]);
+    const handleRaiseTicket = useCallback((title, description) => {
+        const t = {
+            id: `ticket_${Date.now()}`,
+            title,
+            description,
+            status: 'open',
+            priority: 'medium',
+            createdAt: new Date(),
+            updatedAt: new Date(),
+        };
+        setTickets(prev => [t, ...prev]);
+    }, []);
+    // ── Sizing ─────────────────────────────────────────────────────────────────
+    const normalW = 380;
+    const normalH = 560;
+    const maxW = 480;
+    const maxH = 720;
+    const width = isMaximized ? maxW : normalW;
+    const height = isMaximized ? maxH : normalH;
+    const posStyle = t.buttonPosition === 'bottom-left'
+        ? { left: 24, right: 'auto' }
+        : { right: 24, left: 'auto' };
+    if (!isMounted)
+        return null;
+    if (config.status === 'DISABLE')
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
+        @keyframes cw-fadeUp {
+          from { opacity:0; transform:translateY(10px); }
+          to   { opacity:1; transform:translateY(0);    }
+        }
+        @keyframes cw-slideInRight {
+          from { opacity:0; transform:translateX(18px); }
+          to   { opacity:1; transform:translateX(0);    }
+        }
+        @keyframes cw-popIn {
+          from { opacity:0; transform:scale(0.88) translateY(16px); }
+          to   { opacity:1; transform:scale(1)    translateY(0);    }
+        }
+        .cw-scrollbar::-webkit-scrollbar { width:4px; }
+        .cw-scrollbar::-webkit-scrollbar-track { background:transparent; }
+        .cw-scrollbar::-webkit-scrollbar-thumb { background:#e0e0e0; border-radius:4px; }
+      ` }), _jsx("button", { onClick: () => setIsOpen(o => !o), "aria-label": isOpen ? 'Close chat' : t.buttonLabel, style: Object.assign(Object.assign({ position: 'fixed', bottom: 24 }, posStyle), { zIndex: 9999, display: 'flex', alignItems: 'center', gap: 10, padding: isOpen ? '14px' : '13px 22px', backgroundColor: t.buttonColor, color: t.buttonTextColor, border: 'none', borderRadius: 50, cursor: 'pointer', fontFamily: t.fontFamily, fontSize: '15px', fontWeight: 700, boxShadow: `0 8px 28px ${t.buttonColor}55`, transition: 'all 0.3s cubic-bezier(0.34,1.56,0.64,1)', transform: isOpen ? 'scale(0.94)' : 'scale(1)', minWidth: isOpen ? 50 : 'auto', justifyContent: 'center' }), onMouseEnter: e => {
+                    if (!isOpen) {
+                        e.currentTarget.style.transform = 'scale(1.06) translateY(-2px)';
+                        e.currentTarget.style.boxShadow = `0 12px 36px ${t.buttonColor}77`;
+                    }
+                }, onMouseLeave: e => {
+                    e.currentTarget.style.transform = isOpen ? 'scale(0.94)' : 'scale(1)';
+                    e.currentTarget.style.boxShadow = `0 8px 28px ${t.buttonColor}55`;
+                }, children: isOpen
+                    ? _jsx(CloseIcon, { color: t.buttonTextColor })
+                    : _jsxs(_Fragment, { children: [_jsx(ChatBubbleIcon, { color: t.buttonTextColor }), _jsx("span", { children: t.buttonLabel })] }) }), isOpen && (_jsxs("div", { style: Object.assign(Object.assign({ position: 'fixed', bottom: 86 }, posStyle), { zIndex: 9998, width,
+                    height, maxWidth: 'calc(100vw - 32px)', maxHeight: 'calc(100vh - 110px)', backgroundColor: '#fff', borderRadius: t.borderRadius, boxShadow: '0 20px 70px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.08)', display: 'flex', flexDirection: 'column', overflow: 'hidden', fontFamily: t.fontFamily, animation: 'cw-popIn 0.3s cubic-bezier(0.34,1.56,0.64,1)', transition: 'width 0.3s ease, height 0.3s ease' }), children: [screen !== 'chat' && (_jsx("button", { onClick: () => setIsMaximized(m => !m), title: isMaximized ? 'Minimize' : 'Maximize', style: {
+                            position: 'absolute', top: 12, right: 48, zIndex: 10,
+                            background: 'rgba(255,255,255,0.22)', border: 'none', borderRadius: '50%',
+                            width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                            cursor: 'pointer', transition: 'background 0.15s',
+                        }, onMouseEnter: e => e.currentTarget.style.background = 'rgba(255,255,255,0.38)', onMouseLeave: e => e.currentTarget.style.background = 'rgba(255,255,255,0.22)', children: isMaximized
+                            ? _jsx(MinimizeIcon, {})
+                            : _jsx(MaximizeIcon, {}) })), screen !== 'chat' && (_jsx("button", { onClick: () => setIsOpen(false), title: "Close", style: {
+                            position: 'absolute', top: 12, right: 12, zIndex: 10,
+                            background: 'rgba(255,255,255,0.22)', border: 'none', borderRadius: '50%',
+                            width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                            cursor: 'pointer',
+                        }, children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round" }) }) })), _jsxs("div", { className: "cw-scrollbar", style: { flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }, children: [config.status === 'MAINTENANCE' && (_jsx(MaintenanceView, { primaryColor: t.primaryColor, fontFamily: t.fontFamily })), config.status === 'ACTIVE' && (_jsxs(_Fragment, { children: [screen === 'home' && (_jsx(HomeScreen, { config: config, theme: theme, onNavigate: handleCardClick })), screen === 'user-list' && (_jsx(UserListScreen, { context: userListCtx, users: users, loading: loading, error: error, theme: theme, onBack: handleBackFromUserList, onSelectUser: handleSelectUser })), screen === 'chat' && activeUser && (_jsx(ChatScreen, { activeUser: activeUser, messages: messages, onSend: sendMessage, onBack: handleBackFromChat, onClose: () => setIsOpen(false), theme: theme })), screen === 'recent-chats' && (_jsx(RecentChatsScreen, { chats: [], theme: theme, onSelectChat: handleSelectUser })), screen === 'tickets' && (_jsx(TicketScreen, { tickets: tickets, theme: theme, onRaiseTicket: handleRaiseTicket }))] }))] }), screen !== 'chat' && screen !== 'user-list' && config.status !== 'MAINTENANCE' && (_jsx(BottomTabs, { active: activeTab, onChange: handleTabChange, primaryColor: t.primaryColor, fontFamily: t.fontFamily }))] }))] }));
+};
+export default ChatWidget;
+// ── Tiny SVG icons ─────────────────────────────────────────────────────────────
+const ChatBubbleIcon = ({ color }) => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const CloseIcon = ({ color }) => (_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: color, strokeWidth: "2.5", strokeLinecap: "round" }) }));
+const MaximizeIcon = () => (_jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M8 3H5a2 2 0 00-2 2v3M21 8V5a2 2 0 00-2-2h-3M3 16v3a2 2 0 002 2h3M16 21h3a2 2 0 002-2v-3", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }) }));
+const MinimizeIcon = () => (_jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M8 3v5H3M21 8h-5V3M3 16h5v5M16 21v-5h5", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }) }));

package/dist/src/components/HomeScreen/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ChatConfig, ChatWidgetTheme, UserListContext } from '../../types';
+interface HomeScreenProps {
+    config: ChatConfig;
+    theme?: ChatWidgetTheme;
+    onNavigate: (ctx: UserListContext | 'ticket') => void;
+}
+export declare const HomeScreen: React.FC<HomeScreenProps>;
+export {};