ajaxter-chat 1.0.0 → 1.0.1

package/README.md

@@ -1,4 +1,4 @@
-# react-chat-widget-extension
+# Chat Widget
 
 A reusable, fully configurable floating chat widget for **React.js** and **Next.js** applications.
 
@@ -14,7 +14,7 @@ A reusable, fully configurable floating chat widget for **React.js** and **Next.
 ## Folder Structure
 
 ```
-react-chat-widget-extension/
+my_first_project/
 ├── src/
 │   ├── index.ts                        # Public API exports
 │   ├── types/
@@ -63,9 +63,9 @@ react-chat-widget-extension/
 ## Installation
 
 ```bash
-npm install react-chat-widget-extension
+npm install ajaxter-chat
 # or
-yarn add react-chat-widget-extension
+yarn add ajaxter-chat
 ```
 
 ---
@@ -163,7 +163,7 @@ Expected response:
 
 ```tsx
 // App.tsx
-import { ChatWidget } from 'react-chat-widget-extension';
+import { ChatWidget } from 'ajaxter-chat';
 
 function App() {
   return (
@@ -191,7 +191,7 @@ function App() {
 ```tsx
 // app/ChatWidgetWrapper.tsx
 'use client';
-import { ChatWidget } from 'react-chat-widget-extension';
+import { ChatWidget } from 'ajaxter-chat';
 
 export function ChatWidgetWrapper() {
   return <ChatWidget theme={{ primaryColor: '#0ea5e9' }} />;
@@ -218,7 +218,7 @@ export default function RootLayout({ children }) {
 
 ```tsx
 // pages/_app.tsx
-import { ChatWidget } from 'react-chat-widget-extension';
+import { ChatWidget } from 'ajaxter-chat';
 
 export default function MyApp({ Component, pageProps }) {
   return (
@@ -276,7 +276,7 @@ socket.on('chat:message', (msg: ChatMessage) => {
 ## Build
 
 ```bash
-cd react-chat-widget-extension
+cd my_first_project
 npm install
 npm run build        # Compile TypeScript → dist/
 npm run type-check   # Verify types without emitting

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BottomNavTab } from '../../types';
+interface BottomNavProps {
+    active: BottomNavTab;
+    onChange: (tab: BottomNavTab) => void;
+    primaryColor: string;
+    fontFamily: string;
+}
+export declare const BottomNav: React.FC<BottomNavProps>;
+export {};

package/dist/components/BottomNav/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const BottomNav = ({ active, onChange, primaryColor, fontFamily, }) => {
+    const item = (tab, label, icon) => {
+        const isOn = active === tab;
+        return (_jsxs("button", { type: "button", onClick: () => onChange(tab), style: {
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '4px',
+                padding: '10px 8px',
+                border: 'none',
+                background: 'transparent',
+                cursor: 'pointer',
+                fontFamily,
+                color: isOn ? primaryColor : '#b0b0b0',
+                transition: 'color 0.2s',
+            }, children: [_jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: icon }), _jsx("span", { style: { fontSize: '11px', fontWeight: isOn ? 600 : 500 }, children: label })] }));
+    };
+    return (_jsxs("nav", { style: {
+            flexShrink: 0,
+            display: 'flex',
+            alignItems: 'stretch',
+            backgroundColor: '#fff',
+            borderTop: '1px solid #eee',
+            paddingBottom: 'env(safe-area-inset-bottom, 0)',
+        }, "aria-label": "Widget sections", children: [item('home', 'Home', _jsx(HomeIcon, { active: active === 'home', color: primaryColor, muted: "#b0b0b0" })), item('chats', 'Chat', _jsx(ChatBubbleIcon, { active: active === 'chats', color: primaryColor, muted: "#b0b0b0" })), item('tickets', 'Tickets', _jsx(TicketIcon, { active: active === 'tickets', color: primaryColor, muted: "#b0b0b0" }))] }));
+};
+const HomeIcon = ({ active, color, muted, }) => (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, children: _jsx("path", { d: "M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V9.5z", stroke: active ? color : muted, strokeWidth: "2", strokeLinejoin: "round" }) }));
+const ChatBubbleIcon = ({ active, color, muted, }) => (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, 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: active ? color : muted, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const TicketIcon = ({ active, color, muted, }) => (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, children: _jsx("path", { d: "M4 4h16v4H4V4zm0 6h10v10H4V10zm12 0h4v10h-4V10z", stroke: active ? color : muted, strokeWidth: "2", strokeLinejoin: "round" }) }));

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

@@ -1,11 +1,15 @@
 import React from 'react';
 import { ChatMessage, ChatUser } from '../../types';
-interface ChatBoxProps {
+export interface ChatBoxProps {
     activeUser: ChatUser | null;
     messages: ChatMessage[];
     onSendMessage: (text: string) => void;
     primaryColor: string;
     fontFamily: string;
+    /** Minimal: teal bar with back/close, footer with extra actions (reference UI). */
+    variant?: 'default' | 'minimal';
+    onBack?: () => void;
+    onClose?: () => void;
+    headerTitle?: string;
 }
 export declare const ChatBox: React.FC<ChatBoxProps>;
-export {};

package/dist/components/ChatBox/index.js

@@ -1,6 +1,6 @@
 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, }) => {
+export const ChatBox = ({ activeUser, messages, onSendMessage, primaryColor, fontFamily, variant = 'default', onBack, onClose, headerTitle, }) => {
     const [inputText, setInputText] = useState('');
     const messagesEndRef = useRef(null);
     const inputRef = useRef(null);
@@ -22,6 +22,61 @@ export const ChatBox = ({ activeUser, messages, onSendMessage, primaryColor, fon
             handleSend();
         }
     };
+    if (variant === 'minimal') {
+        return (_jsxs("div", { style: {
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                fontFamily,
+                overflow: 'hidden',
+                backgroundColor: '#fff',
+            }, children: [_jsxs("div", { style: {
+                        flexShrink: 0,
+                        padding: '14px 16px',
+                        backgroundColor: primaryColor,
+                        color: '#fff',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                    }, children: [_jsx("button", { type: "button", onClick: onBack, "aria-label": "Back", style: {
+                                background: 'transparent',
+                                border: 'none',
+                                color: '#fff',
+                                cursor: 'pointer',
+                                padding: '4px',
+                                display: 'flex',
+                                alignItems: 'center',
+                            }, children: _jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("div", { style: { fontWeight: 600, fontSize: '15px', flex: 1, textAlign: 'center' }, children: headerTitle !== null && headerTitle !== void 0 ? headerTitle : (activeUser ? activeUser.name : 'Chat') }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", style: {
+                                background: 'transparent',
+                                border: 'none',
+                                color: '#fff',
+                                cursor: 'pointer',
+                                padding: '4px',
+                                display: 'flex',
+                            }, children: _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: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }) })] }), _jsxs("div", { style: {
+                        flex: 1,
+                        overflowY: 'auto',
+                        padding: '16px',
+                        backgroundColor: '#fff',
+                    }, children: [!activeUser ? (_jsx("div", { style: { textAlign: 'center', color: '#bbb', fontSize: '14px', marginTop: '32px' }, children: "Select someone to chat" })) : messages.length === 0 ? (_jsxs("div", { style: { textAlign: 'center', color: '#ccc', fontSize: '13px', marginTop: '32px' }, 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: {
+                        borderTop: '1px solid #eee',
+                        backgroundColor: '#fff',
+                        padding: '10px 12px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '8px',
+                    }, children: [_jsx("textarea", { ref: inputRef, value: inputText, onChange: (e) => setInputText(e.target.value), onKeyDown: handleKeyDown, placeholder: "Type and press [enter]..", rows: 1, disabled: !activeUser, style: {
+                                flex: 1,
+                                resize: 'none',
+                                border: 'none',
+                                outline: 'none',
+                                fontFamily,
+                                fontSize: '14px',
+                                color: '#1a1a2e',
+                                maxHeight: '80px',
+                                lineHeight: 1.45,
+                            } }), _jsx(IconButton, { label: "Like", disabled: !activeUser, children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#888", strokeWidth: "1.8", children: _jsx("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }) }) }), _jsx(IconButton, { label: "Attach", disabled: !activeUser, children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#888", strokeWidth: "1.8", children: _jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }) }), _jsx(IconButton, { label: "Emoji", disabled: !activeUser, children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#888", strokeWidth: "1.8", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01" })] }) })] })] }));
+    }
     if (!activeUser) {
         return (_jsxs("div", { style: {
                 flex: 1,
@@ -138,6 +193,16 @@ export const ChatBox = ({ activeUser, messages, onSendMessage, primaryColor, fon
                             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 IconButton = ({ label, disabled, children }) => (_jsx("button", { type: "button", "aria-label": label, disabled: disabled, style: {
+        background: 'transparent',
+        border: 'none',
+        padding: '6px',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.45 : 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    }, children: children }));
 const MessageBubble = ({ message, primaryColor }) => {
     const isMe = message.senderId === 'me';
     const time = new Date(message.timestamp).toLocaleTimeString([], {

package/dist/components/ChatWidget.js

@@ -45,6 +45,6 @@ export const ChatWidget = ({ theme }) => {
     // 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 })] }));
+    return (_jsxs(_Fragment, { children: [isOpen && (_jsx(ChatWindow, { config: config, theme: theme, buttonPosition: t.buttonPosition, onClose: () => setIsOpen(false) })), _jsx(ChatButton, { isOpen: isOpen, onClick: () => setIsOpen((prev) => !prev), theme: theme })] }));
 };
 export default ChatWidget;

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

@@ -4,6 +4,7 @@ interface ChatWindowProps {
     config: ChatConfig;
     theme?: ChatWidgetTheme;
     buttonPosition: 'bottom-right' | 'bottom-left';
+    onClose: () => void;
 }
 export declare const ChatWindow: React.FC<ChatWindowProps>;
 export {};

package/dist/components/ChatWindow/index.js

@@ -1,39 +1,112 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from 'react';
 import { UserList } from '../UserList';
 import { ChatBox } from '../ChatBox';
 import { MaintenanceView } from '../MaintenanceView';
+import { HomeView } from '../HomeView';
+import { BottomNav } from '../BottomNav';
 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);
+export const ChatWindow = ({ config, theme, buttonPosition, onClose, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const t = mergeTheme(Object.assign(Object.assign({}, theme), { widgetMinWidth: (_a = theme === null || theme === void 0 ? void 0 : theme.widgetMinWidth) !== null && _a !== void 0 ? _a : config.widgetMinWidth, widgetMaxWidth: (_b = theme === null || theme === void 0 ? void 0 : theme.widgetMaxWidth) !== null && _b !== void 0 ? _b : config.widgetMaxWidth, widgetMinHeight: (_c = theme === null || theme === void 0 ? void 0 : theme.widgetMinHeight) !== null && _c !== void 0 ? _c : config.widgetMinHeight, widgetMaxHeight: (_d = theme === null || theme === void 0 ? void 0 : theme.widgetMaxHeight) !== null && _d !== void 0 ? _d : config.widgetMaxHeight, widgetDefaultSize: (_e = theme === null || theme === void 0 ? void 0 : theme.widgetDefaultSize) !== null && _e !== void 0 ? _e : config.widgetDefaultSize }));
+    const minW = Math.min(t.widgetMinWidth, t.widgetMaxWidth);
+    const maxW = Math.max(t.widgetMinWidth, t.widgetMaxWidth);
+    const minH = Math.min(t.widgetMinHeight, t.widgetMaxHeight);
+    const maxH = Math.max(t.widgetMinHeight, t.widgetMaxHeight);
+    const [sizeRatio, setSizeRatio] = useState(t.widgetDefaultSize);
+    const widthPx = minW + (maxW - minW) * sizeRatio;
+    const heightPx = minH + (maxH - minH) * sizeRatio;
+    const [bottomTab, setBottomTab] = useState('home');
+    const [homeFlow, setHomeFlow] = useState('home');
+    const [pickUserMode, setPickUserMode] = useState(null);
+    const [tickets, setTickets] = useState([]);
+    const [ticketSubject, setTicketSubject] = useState('');
+    const [ticketBody, setTicketBody] = useState('');
     const userListUrl = buildUserListUrl(config);
-    const [activeTab, setActiveTab] = useState('developers');
-    const filterType = config.chatType === 'SUPPORT'
+    const filterType = pickUserMode === 'support'
         ? 'developer'
-        : config.chatType === 'CHAT'
+        : pickUserMode === 'conversation'
             ? 'user'
-            : activeTab === 'developers'
+            : config.chatType === 'SUPPORT'
                 ? 'developer'
-                : 'user';
+                : config.chatType === 'CHAT'
+                    ? 'user'
+                    : 'developer';
     const { users, loading, error } = useUsers({
         url: userListUrl,
         filterType,
-        enabled: config.status === 'ACTIVE',
+        enabled: config.status === 'ACTIVE' && homeFlow === 'pickUser',
     });
-    const { messages, activeUser, selectUser, sendMessage } = useChat();
+    const { messages, activeUser, recentChats, selectUser, sendMessage, openRecent, } = 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: `
+    const goHomeCards = useCallback(() => {
+        setHomeFlow('home');
+        setPickUserMode(null);
+    }, []);
+    const handleBackFromChat = useCallback(() => {
+        if (pickUserMode) {
+            setHomeFlow('pickUser');
+            return;
+        }
+        setBottomTab('chats');
+        setHomeFlow('home');
+    }, [pickUserMode]);
+    const handleBottomTab = useCallback((tab) => {
+        setBottomTab(tab);
+        goHomeCards();
+    }, [goHomeCards]);
+    const startSupport = useCallback(() => {
+        setPickUserMode('support');
+        setHomeFlow('pickUser');
+    }, []);
+    const startConversation = useCallback(() => {
+        setPickUserMode('conversation');
+        setHomeFlow('pickUser');
+    }, []);
+    const startRaiseTicket = useCallback(() => {
+        setHomeFlow('raiseTicket');
+        setTicketSubject('');
+        setTicketBody('');
+    }, []);
+    const submitTicket = useCallback(() => {
+        if (!ticketSubject.trim())
+            return;
+        const id = `tkt_${Date.now()}`;
+        setTickets((prev) => [
+            {
+                id,
+                subject: ticketSubject.trim(),
+                body: ticketBody.trim(),
+                createdAt: new Date(),
+                status: 'open',
+            },
+            ...prev,
+        ]);
+        setHomeFlow('home');
+        setBottomTab('tickets');
+    }, [ticketSubject, ticketBody]);
+    const pickUserHeader = useMemo(() => {
+        if (pickUserMode === 'support')
+            return 'Support';
+        if (pickUserMode === 'conversation')
+            return 'New conversation';
+        return 'People';
+    }, [pickUserMode]);
+    return (_jsxs("div", { style: Object.assign(Object.assign({ position: 'fixed', bottom: '90px' }, positionStyle), { zIndex: 9998, width: `${widthPx}px`, maxWidth: 'calc(100vw - 32px)', height: `${heightPx}px`, 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 cw-slideFromRight {
+          from { opacity: 0; transform: translateX(24px); }
+          to   { opacity: 1; transform: translateX(0); }
+        }
         @keyframes shimmer {
           0%   { background-position: 200% 0; }
           100% { background-position: -200% 0; }
@@ -41,92 +114,173 @@ export const ChatWindow = ({ config, theme, buttonPosition, }) => {
         ::-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)',
+      ` }), config.status === 'MAINTENANCE' ? (_jsx(MaintenanceView, { fontFamily: t.fontFamily, primaryColor: t.primaryColor })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, overflow: 'hidden' }, children: [bottomTab === 'home' && homeFlow === 'home' && (_jsx(HomeView, { primaryColor: t.primaryColor, fontFamily: t.fontFamily, showNeedSupport: config.showNeedSupport, showNewConversation: config.showNewConversation, onNeedSupport: startSupport, onNewConversation: startConversation, onRaiseTicket: startRaiseTicket, onClose: onClose })), bottomTab === 'home' && homeFlow === 'pickUser' && (_jsxs("div", { style: {
+                                    flex: 1,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    minHeight: 0,
+                                    backgroundColor: '#fff',
+                                    animation: 'cw-slideFromRight 0.28s ease-out',
+                                }, children: [_jsxs("div", { style: {
+                                            flexShrink: 0,
+                                            padding: '14px 16px',
+                                            backgroundColor: t.primaryColor,
+                                            color: '#fff',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: '12px',
+                                        }, children: [_jsx("button", { type: "button", onClick: goHomeCards, "aria-label": "Back", style: {
+                                                    background: 'transparent',
+                                                    border: 'none',
+                                                    color: '#fff',
+                                                    cursor: 'pointer',
+                                                    padding: '4px',
+                                                }, children: _jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("div", { style: { fontWeight: 700, fontSize: '16px' }, children: pickUserHeader })] }), _jsxs("div", { style: { flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: {
+                                                    padding: '10px 16px',
+                                                    fontSize: '11px',
+                                                    fontWeight: 700,
+                                                    color: '#bbb',
+                                                    textTransform: 'uppercase',
+                                                    letterSpacing: '0.08em',
+                                                    borderBottom: '1px solid #f0f0f0',
+                                                }, children: "Select a contact" }), _jsx(UserList, { users: users, loading: loading, error: error, activeUserId: (_f = activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid) !== null && _f !== void 0 ? _f : null, onSelectUser: (u) => {
+                                                    selectUser(u);
+                                                    setHomeFlow('chat');
+                                                }, primaryColor: t.primaryColor, fontFamily: t.fontFamily })] })] })), bottomTab === 'home' && homeFlow === 'chat' && (_jsx("div", { style: {
+                                    flex: 1,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    minHeight: 0,
+                                    animation: 'cw-slideFromRight 0.28s ease-out',
+                                }, children: _jsx(ChatBox, { activeUser: activeUser, messages: messages, onSendMessage: sendMessage, primaryColor: t.primaryColor, fontFamily: t.fontFamily, variant: "minimal", onBack: handleBackFromChat, onClose: onClose, headerTitle: activeUser === null || activeUser === void 0 ? void 0 : activeUser.name }) })), bottomTab === 'home' && homeFlow === 'raiseTicket' && (_jsxs("div", { style: {
+                                    flex: 1,
                                     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',
+                                    flexDirection: 'column',
+                                    minHeight: 0,
+                                    backgroundColor: '#fff',
+                                    animation: 'cw-slideFromRight 0.28s ease-out',
+                                }, children: [_jsxs("div", { style: {
+                                            flexShrink: 0,
+                                            padding: '14px 16px',
+                                            backgroundColor: t.primaryColor,
+                                            color: '#fff',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'space-between',
+                                        }, children: [_jsx("button", { type: "button", onClick: goHomeCards, "aria-label": "Back", style: {
+                                                    background: 'transparent',
+                                                    border: 'none',
+                                                    color: '#fff',
+                                                    cursor: 'pointer',
+                                                    padding: '4px',
+                                                }, children: _jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("span", { style: { fontWeight: 700, fontSize: '16px' }, children: "Raise ticket" }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", style: {
+                                                    background: 'transparent',
+                                                    border: 'none',
+                                                    color: '#fff',
+                                                    cursor: 'pointer',
+                                                    padding: '4px',
+                                                }, children: _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: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }) })] }), _jsxs("div", { style: { padding: '20px', flex: 1, overflowY: 'auto' }, children: [_jsx("label", { style: { display: 'block', fontSize: '12px', fontWeight: 600, color: '#666', marginBottom: '6px' }, children: "Subject" }), _jsx("input", { value: ticketSubject, onChange: (e) => setTicketSubject(e.target.value), placeholder: "Brief summary", style: {
+                                                    width: '100%',
+                                                    boxSizing: 'border-box',
+                                                    padding: '10px 12px',
+                                                    borderRadius: '10px',
+                                                    border: '1px solid #e5e5e5',
+                                                    fontFamily: t.fontFamily,
+                                                    fontSize: '14px',
+                                                    marginBottom: '16px',
+                                                } }), _jsx("label", { style: { display: 'block', fontSize: '12px', fontWeight: 600, color: '#666', marginBottom: '6px' }, children: "Description" }), _jsx("textarea", { value: ticketBody, onChange: (e) => setTicketBody(e.target.value), placeholder: "Describe the issue or change\u2026", rows: 5, style: {
+                                                    width: '100%',
+                                                    boxSizing: 'border-box',
+                                                    padding: '10px 12px',
+                                                    borderRadius: '10px',
+                                                    border: '1px solid #e5e5e5',
+                                                    fontFamily: t.fontFamily,
+                                                    fontSize: '14px',
+                                                    resize: 'vertical',
+                                                } }), _jsx("button", { type: "button", onClick: submitTicket, style: {
+                                                    marginTop: '18px',
+                                                    width: '100%',
+                                                    padding: '12px',
+                                                    borderRadius: '10px',
+                                                    border: 'none',
+                                                    backgroundColor: t.primaryColor,
+                                                    color: '#fff',
+                                                    fontWeight: 700,
+                                                    fontFamily: t.fontFamily,
+                                                    cursor: 'pointer',
+                                                    fontSize: '15px',
+                                                }, children: "Submit ticket" })] })] })), bottomTab === 'chats' && (_jsxs("div", { style: {
+                                    flex: 1,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    minHeight: 0,
+                                    backgroundColor: '#fff',
+                                }, children: [_jsxs("div", { style: {
+                                            padding: '16px 20px',
+                                            backgroundColor: t.primaryColor,
+                                            color: '#fff',
+                                            fontWeight: 700,
+                                            fontSize: '17px',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'space-between',
+                                        }, children: ["Recent chats", _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", style: {
+                                                    background: 'transparent',
+                                                    border: 'none',
+                                                    color: '#fff',
+                                                    cursor: 'pointer',
+                                                }, children: _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: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }) })] }), _jsx("div", { style: { flex: 1, overflowY: 'auto' }, children: recentChats.length === 0 ? (_jsx("p", { style: { padding: '24px', textAlign: 'center', color: '#aaa', fontSize: '14px', margin: 0 }, children: "No recent chats yet" })) : (recentChats.map((r) => (_jsxs("button", { type: "button", onClick: () => {
+                                                openRecent(r.user);
+                                                setBottomTab('home');
+                                                setHomeFlow('chat');
+                                                setPickUserMode(null);
+                                            }, style: {
+                                                width: '100%',
+                                                padding: '14px 18px',
+                                                border: 'none',
+                                                borderBottom: '1px solid #f0f0f0',
+                                                background: '#fff',
+                                                textAlign: 'left',
+                                                cursor: 'pointer',
+                                                fontFamily: t.fontFamily,
+                                            }, children: [_jsx("div", { style: { fontWeight: 600, color: '#1a1a2e' }, children: r.user.name }), _jsx("div", { style: { fontSize: '13px', color: '#888', marginTop: '4px' }, children: r.lastMessage }), _jsx("div", { style: { fontSize: '11px', color: '#bbb', marginTop: '6px' }, children: r.updatedAt.toLocaleString() })] }, r.user.uid)))) })] })), bottomTab === 'tickets' && (_jsxs("div", { style: {
+                                    flex: 1,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    minHeight: 0,
+                                    backgroundColor: '#fff',
+                                }, children: [_jsxs("div", { style: {
+                                            padding: '16px 20px',
+                                            backgroundColor: t.primaryColor,
+                                            color: '#fff',
+                                            fontWeight: 700,
+                                            fontSize: '17px',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'space-between',
+                                        }, children: ["Tickets", _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", style: {
+                                                    background: 'transparent',
+                                                    border: 'none',
+                                                    color: '#fff',
+                                                    cursor: 'pointer',
+                                                }, children: _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: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }) })] }), _jsx("div", { style: { flex: 1, overflowY: 'auto' }, children: tickets.length === 0 ? (_jsx("p", { style: { padding: '24px', textAlign: 'center', color: '#aaa', fontSize: '14px', margin: 0 }, children: "No tickets yet. Use Home \u2192 Raise Ticket." })) : (tickets.map((tk) => (_jsxs("div", { style: {
+                                                padding: '14px 18px',
+                                                borderBottom: '1px solid #f0f0f0',
+                                                fontFamily: t.fontFamily,
+                                            }, children: [_jsx("div", { style: { fontWeight: 600, color: '#1a1a2e' }, children: tk.subject }), tk.body ? (_jsx("div", { style: { fontSize: '13px', color: '#666', marginTop: '6px', lineHeight: 1.45 }, children: tk.body })) : null, _jsxs("div", { style: { fontSize: '11px', color: '#bbb', marginTop: '8px' }, children: [tk.createdAt.toLocaleString(), " \u00B7 ", tk.status] })] }, tk.id)))) })] }))] }), _jsx("div", { style: {
+                            padding: '8px 14px 6px',
+                            borderTop: '1px solid #eee',
+                            backgroundColor: '#fafafa',
                             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] }));
+                        }, children: _jsxs("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '10px',
+                                fontSize: '11px',
+                                color: '#888',
+                                fontFamily: t.fontFamily,
+                            }, children: [_jsx("span", { style: { flexShrink: 0 }, children: "Size" }), _jsx("input", { type: "range", min: 0, max: 1, step: 0.02, value: sizeRatio, onChange: (e) => setSizeRatio(parseFloat(e.target.value)), "aria-label": "Widget size", style: {
+                                        flex: 1,
+                                        accentColor: t.primaryColor,
+                                    } })] }) }), _jsx(BottomNav, { active: bottomTab, onChange: handleBottomTab, primaryColor: t.primaryColor, fontFamily: t.fontFamily })] }))] }));
 };
-// 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/HomeView/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface HomeViewProps {
+    primaryColor: string;
+    fontFamily: string;
+    showNeedSupport: boolean;
+    showNewConversation: boolean;
+    onNeedSupport: () => void;
+    onNewConversation: () => void;
+    onRaiseTicket: () => void;
+    onClose: () => void;
+}
+export declare const HomeView: React.FC<HomeViewProps>;

package/dist/components/HomeView/index.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SendIcon = ({ color }) => (_jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, children: _jsx("path", { d: "M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+export const HomeView = ({ primaryColor, fontFamily, showNeedSupport, showNewConversation, onNeedSupport, onNewConversation, onRaiseTicket, onClose, }) => {
+    const cardStyle = {
+        width: '100%',
+        backgroundColor: '#fff',
+        borderRadius: '12px',
+        padding: '16px 18px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: '12px',
+        border: 'none',
+        cursor: 'pointer',
+        textAlign: 'left',
+        fontFamily,
+        boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
+        transition: 'transform 0.15s ease, box-shadow 0.15s ease',
+    };
+    return (_jsxs("div", { style: {
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            backgroundColor: primaryColor,
+            fontFamily,
+            minHeight: 0,
+        }, children: [_jsx("div", { style: {
+                    padding: '20px 20px 8px',
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                }, children: _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", style: {
+                        background: 'transparent',
+                        border: 'none',
+                        color: '#fff',
+                        cursor: 'pointer',
+                        padding: '4px',
+                    }, children: _jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }) }) }), _jsxs("div", { style: { padding: '0 24px 20px', flexShrink: 0 }, children: [_jsx("h1", { style: {
+                            margin: 0,
+                            color: '#fff',
+                            fontSize: '26px',
+                            fontWeight: 700,
+                            letterSpacing: '-0.02em',
+                        }, children: "Hi there \uD83D\uDC4B" }), _jsx("p", { style: { margin: '10px 0 0', color: 'rgba(255,255,255,0.92)', fontSize: '14px', lineHeight: 1.5 }, children: "Need help? start a conversation:" })] }), _jsxs("div", { style: {
+                    flex: 1,
+                    padding: '0 20px 16px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '12px',
+                    overflowY: 'auto',
+                }, children: [showNeedSupport && (_jsxs("button", { type: "button", onClick: onNeedSupport, style: cardStyle, children: [_jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: '15px', color: '#1a1a2e' }, children: "Need Support" }), _jsx("div", { style: { fontSize: '13px', color: '#888', marginTop: '4px' }, children: "We typically reply in a few minutes" })] }), _jsx(SendIcon, { color: primaryColor })] })), showNewConversation && (_jsxs("button", { type: "button", onClick: onNewConversation, style: cardStyle, children: [_jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: '15px', color: '#1a1a2e' }, children: "New Conversation" }), _jsx("div", { style: { fontSize: '13px', color: '#888', marginTop: '4px' }, children: "With your colleague" })] }), _jsx(SendIcon, { color: primaryColor })] })), _jsxs("button", { type: "button", onClick: onRaiseTicket, style: cardStyle, children: [_jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: '15px', color: '#1a1a2e' }, children: "Raise Ticket" }), _jsx("div", { style: { fontSize: '13px', color: '#888', marginTop: '4px' }, children: "For major changes" })] }), _jsx(SendIcon, { color: primaryColor })] })] })] }));
+};

package/dist/config/index.js

@@ -29,23 +29,65 @@ function validateChatType(value) {
     console.warn(`[ChatWidget] Invalid CHAT_TYPE "${value}". 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, _c;
+    var _a, _b;
     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 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);
     return {
         hostUrl,
         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),
     };
 }
 export function buildUserListUrl(config) {
     const base = config.hostUrl.replace(/\/$/, '');
     const endpoint = config.userListEndpoint.replace(/^\//, '');
-    return `${base}:${config.hostPort}/${endpoint}`;
+    if (config.hostPort !== undefined) {
+        return `${base}:${config.hostPort}/${endpoint}`;
+    }
+    return `${base}/${endpoint}`;
 }

package/dist/hooks/useChat.d.ts

@@ -1,10 +1,12 @@
-import { ChatMessage, ChatUser } from '../types';
+import { ChatMessage, ChatUser, RecentChat } from '../types';
 interface UseChatReturn {
     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,10 +2,21 @@ 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([]);
-        // TODO: Connect WebSocket here — load message history for this user
+    }, []);
+    const openRecent = useCallback((user) => {
+        setActiveUser(user);
+        setMessages([]);
     }, []);
     const sendMessage = useCallback((text) => {
         if (!activeUser || !text.trim())
@@ -19,11 +30,19 @@ export function useChat() {
             status: 'sent',
         };
         setMessages((prev) => [...prev, newMsg]);
-        // TODO: Emit via WebSocket — socket.emit('message', newMsg)
-    }, [activeUser]);
+        upsertRecent(activeUser, text.trim());
+    }, [activeUser, upsertRecent]);
     const clearChat = useCallback(() => {
         setMessages([]);
         setActiveUser(null);
     }, []);
-    return { messages, activeUser, selectUser, sendMessage, clearChat };
+    return {
+        messages,
+        activeUser,
+        recentChats,
+        selectUser,
+        sendMessage,
+        clearChat,
+        openRecent,
+    };
 }

package/dist/index.d.ts

@@ -9,5 +9,5 @@ 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 type { ChatUser, ChatMessage, ChatConfig, ChatWidgetTheme, ChatWidgetProps, ChatStatus, ChatType, UserType, TabType, BottomNavTab, HomeFlow, RaisedTicket, RecentChat, } from './types';
 export { defaultTheme, mergeTheme } from './utils/theme';

package/dist/types/index.d.ts

@@ -2,6 +2,8 @@ export type ChatStatus = 'ACTIVE' | 'DISABLE' | 'MAINTENANCE';
 export type ChatType = 'SUPPORT' | 'CHAT' | 'BOTH';
 export type UserType = 'developer' | 'user';
 export type TabType = 'developers' | 'users';
+export type BottomNavTab = 'home' | 'chats' | 'tickets';
+export type HomeFlow = 'home' | 'pickUser' | 'chat' | 'raiseTicket';
 export interface ChatUser {
     name: string;
     uid: string;
@@ -20,10 +22,34 @@ export interface ChatMessage {
 }
 export interface ChatConfig {
     hostUrl: string;
-    hostPort: number;
+    /** When omitted, URLs use `hostUrl` only (no `:port` segment). */
+    hostPort?: number;
     userListEndpoint: string;
     status: ChatStatus;
     chatType: ChatType;
+    /** Show “Need Support” card on home (env `CHAT_SHOW_NEED_SUPPORT`). */
+    showNeedSupport: boolean;
+    /** Show “New Conversation” card on home (env `CHAT_SHOW_NEW_CONVERSATION`). */
+    showNewConversation: boolean;
+    /** Pixel bounds for the resize slider (env `CHAT_WIDGET_*`). */
+    widgetMinWidth: number;
+    widgetMaxWidth: number;
+    widgetMinHeight: number;
+    widgetMaxHeight: number;
+    /** Default widget size as ratio 0–1 between min and max. */
+    widgetDefaultSize: number;
+}
+export interface RaisedTicket {
+    id: string;
+    subject: string;
+    body: string;
+    createdAt: Date;
+    status: 'open' | 'closed';
+}
+export interface RecentChat {
+    user: ChatUser;
+    lastMessage: string;
+    updatedAt: Date;
 }
 export interface ChatWidgetTheme {
     fontFamily?: string;
@@ -34,6 +60,12 @@ export interface ChatWidgetTheme {
     buttonLabel?: string;
     buttonPosition?: 'bottom-right' | 'bottom-left';
     borderRadius?: string;
+    /** Override config min width (px). */
+    widgetMinWidth?: number;
+    widgetMaxWidth?: number;
+    widgetMinHeight?: number;
+    widgetMaxHeight?: number;
+    widgetDefaultSize?: number;
 }
 export interface ChatWidgetProps {
     theme?: ChatWidgetTheme;

package/dist/utils/theme.js

@@ -1,12 +1,17 @@
 export const defaultTheme = {
     fontFamily: "'DM Sans', 'Segoe UI', sans-serif",
-    primaryColor: '#6C63FF',
+    primaryColor: '#13947e',
     backgroundColor: '#ffffff',
-    buttonColor: '#6C63FF',
+    buttonColor: '#13947e',
     buttonTextColor: '#ffffff',
     buttonLabel: 'Chat with us',
     buttonPosition: 'bottom-right',
     borderRadius: '16px',
+    widgetMinWidth: 320,
+    widgetMaxWidth: 720,
+    widgetMinHeight: 420,
+    widgetMaxHeight: 720,
+    widgetDefaultSize: 0.45,
 };
 export function mergeTheme(custom) {
     return Object.assign(Object.assign({}, defaultTheme), custom);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajaxter-chat",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A reusable, configurable chat widget for React.js and Next.js applications.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",