ajaxter-chat 3.0.8 → 3.0.9

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

@@ -19,6 +19,8 @@ interface ChatScreenProps {
     /** Other devs (excl. viewer) — for transfer when staff chats with a customer */
     otherDevelopers?: ChatUser[];
     onTransferToDeveloper?: (dev: ChatUser) => void;
+    messageSoundEnabled?: boolean;
+    onToggleMessageSound?: (enabled: boolean) => void;
 }
 export declare const ChatScreen: React.FC<ChatScreenProps>;
 export {};

package/dist/components/ChatScreen/index.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText } from '../../utils/chat';
+import { shortAttachmentLabel } from '../../utils/fileName';
 import { shouldShowPrivacyNotice, dismissPrivacyNotice } from '../../utils/privacyConsent';
 import { EmojiPicker } from '../EmojiPicker';
 import { SlideNavMenu } from '../SlideNavMenu';
-export const ChatScreen = ({ activeUser, messages, config, isPaused, isReported, isBlocked, onSend, onBack, onClose, onTogglePause, onReport, onBlock, onStartCall, onNavAction, otherDevelopers = [], onTransferToDeveloper, }) => {
+export const ChatScreen = ({ activeUser, messages, config, isPaused, isReported, isBlocked, onSend, onBack, onClose, onTogglePause, onReport, onBlock, onStartCall, onNavAction, otherDevelopers = [], onTransferToDeveloper, messageSoundEnabled = true, onToggleMessageSound, }) => {
     var _a;
     const [text, setText] = useState('');
     const [showEmoji, setShowEmoji] = useState(false);
@@ -125,7 +126,32 @@ export const ChatScreen = ({ activeUser, messages, config, isPaused, isReported,
     return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideIn 0.22s ease', position: 'relative', overflow: 'hidden' }, children: [_jsx(SlideNavMenu, { open: slideMenuOpen, onClose: () => setSlideMenuOpen(false), primaryColor: config.primaryColor, chatType: config.chatType, viewerType: (_a = config.viewerType) !== null && _a !== void 0 ? _a : 'user', onSelect: onNavAction, onBackHome: onBack }), _jsxs("div", { style: {
                     background: `linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
                     padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0,
-                }, children: [_jsx("button", { type: "button", onClick: () => setSlideMenuOpen(true), style: hdrBtn, "aria-label": "Open menu", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [_jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" })] }) }), _jsxs("div", { style: { width: 36, height: 36, borderRadius: '50%', backgroundColor: peerAvatar, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 13, flexShrink: 0, position: 'relative' }, children: [peerInit, _jsx("span", { style: { position: 'absolute', bottom: 0, right: 0, width: 9, height: 9, borderRadius: '50%', border: '2px solid', borderColor: 'transparent', backgroundColor: activeUser.status === 'online' ? '#22c55e' : activeUser.status === 'away' ? '#f59e0b' : '#9ca3af' } })] }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: 14, color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: activeUser.name }), _jsx("div", { style: { fontSize: 11, color: 'rgba(255,255,255,0.8)' }, children: activeUser.designation })] }), _jsx("span", { style: { fontSize: 13, fontWeight: 700, color: '#fff', opacity: 0.95, flexShrink: 0 }, children: headerRole }), config.allowWebCall && (_jsx("button", { type: "button", onClick: () => onStartCall(false), style: hdrBtn, title: "Voice Call", children: _jsx("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8a19.79 19.79 0 01-3.07-8.68A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z", fill: "#fff" }) }) })), _jsx("button", { type: "button", onClick: () => setShowMenu(v => !v), style: Object.assign(Object.assign({}, hdrBtn), { background: 'rgba(255,255,255,0.2)' }), title: "More options", "aria-expanded": showMenu, children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "5", r: "1.5", fill: "#fff" }), _jsx("circle", { cx: "12", cy: "12", r: "1.5", fill: "#fff" }), _jsx("circle", { cx: "12", cy: "19", r: "1.5", fill: "#fff" })] }) })] }), showMenu && (_jsxs("div", { style: { position: 'absolute', top: 52, right: 12, zIndex: 120, background: '#fff', borderRadius: 12, boxShadow: '0 8px 30px rgba(0,0,0,0.16)', padding: '6px', minWidth: 200, animation: 'cw-fadeUp 0.18s ease' }, children: [config.allowTranscriptDownload && (_jsx(MenuItem, { icon: "\uD83D\uDCE5", label: "Download Transcript", onClick: handleTranscript })), viewerIsDev && activeUser.type === 'user' && otherDevelopers.length > 0 && onTransferToDeveloper && (_jsx(MenuItem, { icon: "\uD83D\uDD00", label: "Transfer to developer", onClick: () => { setShowMenu(false); setTransferOpen(true); } })), _jsx(MenuItem, { icon: isPaused ? '▶️' : '⏸', label: isPaused ? 'Resume Chat' : 'Pause Chat', onClick: () => { setShowMenu(false); setShowConfirm('pause'); } }), config.allowReport && !isReported && (_jsx(MenuItem, { icon: "\u26A0\uFE0F", label: "Report Chat", onClick: () => { setShowMenu(false); setShowConfirm('report'); } })), config.allowBlock && activeUser.type === 'user' && !isBlocked && (_jsx(MenuItem, { icon: "\uD83D\uDEAB", label: "Block User", onClick: () => { setShowMenu(false); setShowConfirm('block'); }, danger: true })), _jsx("div", { style: { borderTop: '1px solid #f0f2f5', margin: '4px 0' } }), _jsx(MenuItem, { icon: "\u2715", label: "Close Chat", onClick: onClose })] })), isPaused && (_jsxs("div", { style: { background: '#fef3c7', padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#92400e', textAlign: 'center', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }, children: ["\u23F8 Chat is paused \u2014 users cannot send messages", _jsx("button", { type: "button", onClick: onTogglePause, style: { background: '#92400e', color: '#fff', border: 'none', borderRadius: 6, padding: '2px 8px', fontSize: 11, cursor: 'pointer', marginLeft: 4 }, children: "Resume" })] })), isBlocked && (_jsx("div", { style: { background: '#fee2e2', padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#991b1b', textAlign: 'center', flexShrink: 0 }, children: "\uD83D\uDEAB This user is blocked" })), isReported && (_jsx("div", { style: { background: '#fef3c7', padding: '6px 16px', fontSize: 11, color: '#92400e', textAlign: 'center', flexShrink: 0 }, children: "\u26A0\uFE0F This chat has been reported" })), _jsxs("div", { style: { flex: 1, overflowY: 'auto', padding: '14px', display: 'flex', flexDirection: 'column', gap: 10, background: '#f8f9fc' }, className: "cw-scroll", children: [grouped.map(({ date, msgs }) => (_jsxs(React.Fragment, { children: [_jsx(DateDivider, { label: date }), msgs.map(msg => (_jsx(Bubble, { msg: msg, primaryColor: config.primaryColor }, msg.id)))] }, date))), messages.length === 0 && (_jsxs("div", { style: { margin: 'auto', textAlign: 'center', color: '#c4cad4', fontSize: 13 }, children: [_jsx("div", { style: { fontSize: 28, marginBottom: 8 }, children: "\uD83D\uDCAC" }), "Say hello to ", activeUser.name, "!"] })), _jsx("div", { ref: endRef })] }), _jsxs("div", { style: { borderTop: '1px solid #eef0f5', padding: '10px 12px 8px', background: '#fff', flexShrink: 0, position: 'relative' }, children: [privacyEnabled && showPrivacy && (_jsxs("div", { style: {
+                }, children: [_jsx("button", { type: "button", onClick: () => setSlideMenuOpen(true), style: hdrBtn, "aria-label": "Open menu", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [_jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" })] }) }), _jsxs("div", { style: { width: 36, height: 36, borderRadius: '50%', backgroundColor: peerAvatar, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 13, flexShrink: 0, position: 'relative' }, children: [peerInit, _jsx("span", { style: { position: 'absolute', bottom: 0, right: 0, width: 9, height: 9, borderRadius: '50%', border: '2px solid', borderColor: 'transparent', backgroundColor: activeUser.status === 'online' ? '#22c55e' : activeUser.status === 'away' ? '#f59e0b' : '#9ca3af' } })] }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: 14, color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: activeUser.name }), _jsx("div", { style: { fontSize: 11, color: 'rgba(255,255,255,0.8)' }, children: activeUser.designation })] }), _jsx("span", { style: { fontSize: 13, fontWeight: 700, color: '#fff', opacity: 0.95, flexShrink: 0 }, children: headerRole }), onToggleMessageSound && (_jsxs("label", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 6,
+                            cursor: 'pointer',
+                            flexShrink: 0,
+                            marginLeft: 4,
+                        }, children: [_jsx("span", { style: { fontSize: 10, color: 'rgba(255,255,255,0.85)', fontWeight: 600 }, children: "Sound" }), _jsx("button", { type: "button", role: "switch", "aria-checked": messageSoundEnabled, onClick: () => onToggleMessageSound(!messageSoundEnabled), style: {
+                                    width: 36,
+                                    height: 20,
+                                    borderRadius: 10,
+                                    border: 'none',
+                                    background: messageSoundEnabled ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.2)',
+                                    position: 'relative',
+                                    cursor: 'pointer',
+                                    padding: 0,
+                                }, children: _jsx("span", { style: {
+                                        position: 'absolute',
+                                        top: 2,
+                                        left: messageSoundEnabled ? 18 : 2,
+                                        width: 16,
+                                        height: 16,
+                                        borderRadius: '50%',
+                                        background: '#fff',
+                                        transition: 'left 0.15s ease',
+                                    } }) })] })), config.allowWebCall && (_jsx("button", { type: "button", onClick: () => onStartCall(false), style: hdrBtn, title: "Voice Call", children: _jsx("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8a19.79 19.79 0 01-3.07-8.68A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z", fill: "#fff" }) }) })), _jsx("button", { type: "button", onClick: () => setShowMenu(v => !v), style: Object.assign(Object.assign({}, hdrBtn), { background: 'rgba(255,255,255,0.2)' }), title: "More options", "aria-expanded": showMenu, children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "5", r: "1.5", fill: "#fff" }), _jsx("circle", { cx: "12", cy: "12", r: "1.5", fill: "#fff" }), _jsx("circle", { cx: "12", cy: "19", r: "1.5", fill: "#fff" })] }) })] }), showMenu && (_jsxs("div", { style: { position: 'absolute', top: 52, right: 12, zIndex: 120, background: '#fff', borderRadius: 12, boxShadow: '0 8px 30px rgba(0,0,0,0.16)', padding: '6px', minWidth: 200, animation: 'cw-fadeUp 0.18s ease' }, children: [config.allowTranscriptDownload && (_jsx(MenuItem, { icon: "\uD83D\uDCE5", label: "Download Transcript", onClick: handleTranscript })), viewerIsDev && activeUser.type === 'user' && otherDevelopers.length > 0 && onTransferToDeveloper && (_jsx(MenuItem, { icon: "\uD83D\uDD00", label: "Transfer to developer", onClick: () => { setShowMenu(false); setTransferOpen(true); } })), _jsx(MenuItem, { icon: isPaused ? '▶️' : '⏸', label: isPaused ? 'Resume Chat' : 'Pause Chat', onClick: () => { setShowMenu(false); setShowConfirm('pause'); } }), config.allowReport && !isReported && (_jsx(MenuItem, { icon: "\u26A0\uFE0F", label: "Report Chat", onClick: () => { setShowMenu(false); setShowConfirm('report'); } })), config.allowBlock && activeUser.type === 'user' && !isBlocked && (_jsx(MenuItem, { icon: "\uD83D\uDEAB", label: "Block User", onClick: () => { setShowMenu(false); setShowConfirm('block'); }, danger: true })), _jsx("div", { style: { borderTop: '1px solid #f0f2f5', margin: '4px 0' } }), _jsx(MenuItem, { icon: "\u2715", label: "Close Chat", onClick: onClose })] })), isPaused && (_jsxs("div", { style: { background: '#fef3c7', padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#92400e', textAlign: 'center', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }, children: ["\u23F8 Chat is paused \u2014 users cannot send messages", _jsx("button", { type: "button", onClick: onTogglePause, style: { background: '#92400e', color: '#fff', border: 'none', borderRadius: 6, padding: '2px 8px', fontSize: 11, cursor: 'pointer', marginLeft: 4 }, children: "Resume" })] })), isBlocked && (_jsx("div", { style: { background: '#fee2e2', padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#991b1b', textAlign: 'center', flexShrink: 0 }, children: "\uD83D\uDEAB This user is blocked" })), isReported && (_jsx("div", { style: { background: '#fef3c7', padding: '6px 16px', fontSize: 11, color: '#92400e', textAlign: 'center', flexShrink: 0 }, children: "\u26A0\uFE0F This chat has been reported" })), _jsxs("div", { style: { flex: 1, overflowY: 'auto', padding: '14px', display: 'flex', flexDirection: 'column', gap: 10, background: '#f8f9fc' }, className: "cw-scroll", children: [grouped.map(({ date, msgs }) => (_jsxs(React.Fragment, { children: [_jsx(DateDivider, { label: date }), msgs.map(msg => (_jsx(Bubble, { msg: msg, primaryColor: config.primaryColor }, msg.id)))] }, date))), messages.length === 0 && (_jsxs("div", { style: { margin: 'auto', textAlign: 'center', color: '#c4cad4', fontSize: 13 }, children: [_jsx("div", { style: { fontSize: 28, marginBottom: 8 }, children: "\uD83D\uDCAC" }), "Say hello to ", activeUser.name, "!"] })), _jsx("div", { ref: endRef })] }), _jsxs("div", { style: { borderTop: '1px solid #eef0f5', padding: '10px 12px 8px', background: '#fff', flexShrink: 0, position: 'relative' }, children: [privacyEnabled && showPrivacy && (_jsxs("div", { style: {
                             position: 'relative',
                             marginBottom: 10,
                             padding: '12px 36px 12px 12px',
@@ -289,13 +315,14 @@ const AttachmentRow = ({ msg, isMe, primaryColor }) => {
     var _a;
     const name = (_a = msg.attachmentName) !== null && _a !== void 0 ? _a : 'File';
     const href = msg.attachmentUrl;
-    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }, children: [_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, 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: isMe ? '#fff' : '#334155', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: 14, wordBreak: 'break-word' }, children: name }), msg.attachmentSize && _jsx("div", { style: { fontSize: 11, opacity: 0.8 }, children: msg.attachmentSize })] }), href && (_jsx("a", { href: href, download: name, style: {
-                    fontSize: 12,
-                    fontWeight: 700,
-                    color: isMe ? '#fff' : primaryColor,
-                    textDecoration: 'underline',
-                    whiteSpace: 'nowrap',
-                }, children: "Download" }))] }));
+    const label = shortAttachmentLabel(name, 10);
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }, children: [_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, 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: isMe ? '#fff' : '#334155', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [href ? (_jsxs("a", { href: href, download: name, title: name, style: {
+                            fontWeight: 700,
+                            fontSize: 14,
+                            wordBreak: 'break-word',
+                            color: isMe ? '#fff' : primaryColor,
+                            textDecoration: 'underline',
+                        }, children: ["[", label, "]"] })) : (_jsxs("div", { style: { fontWeight: 700, fontSize: 14, wordBreak: 'break-word' }, title: name, children: ["[", label, "]"] })), msg.attachmentSize && _jsx("div", { style: { fontSize: 11, opacity: 0.8 }, children: msg.attachmentSize })] })] }));
 };
 const Bubble = ({ msg, primaryColor }) => {
     const isMe = msg.senderId === 'me';

package/dist/components/ChatWidget.js

@@ -1,22 +1,26 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { loadLocalConfig } from '../config';
 import { mergeTheme } from '../utils/theme';
 import { useRemoteConfig } from '../hooks/useRemoteConfig';
 import { useChat } from '../hooks/useChat';
 import { useWebRTC } from '../hooks/useWebRTC';
+import { saveSession, loadSession } from '../utils/widgetSession';
+import { playMessageSound, getMessageSoundEnabled, setMessageSoundEnabled } from '../utils/messageSound';
 import { HomeScreen } from './HomeScreen';
 import { UserListScreen } from './UserListScreen';
 import { ChatScreen } from './ChatScreen';
 import { RecentChatsScreen } from './RecentChatsScreen';
 import { TicketScreen } from './TicketScreen';
+import { TicketDetailScreen } from './TicketDetailScreen';
+import { TicketFormScreen } from './TicketFormScreen';
 import { BlockListScreen } from './BlockList';
 import { CallScreen } from './CallScreen';
 import { MaintenanceView } from './MaintenanceView';
 import { BottomTabs } from './Tabs/BottomTabs';
 export const ChatWidget = ({ theme: localTheme }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     /* SSR guard */
     const [mounted, setMounted] = useState(false);
     useEffect(() => { setMounted(true); }, []);
@@ -33,6 +37,9 @@ export const ChatWidget = ({ theme: localTheme }) => {
     const [activeTab, setActiveTab] = useState('home');
     const [screen, setScreen] = useState('home');
     const [userListCtx, setUserListCtx] = useState('support');
+    const [chatReturnCtx, setChatReturnCtx] = useState('conversation');
+    const [viewingTicketId, setViewingTicketId] = useState(null);
+    const [messageSoundEnabled, setMessageSoundEnabledState] = useState(true);
     /* App state */
     const [tickets, setTickets] = useState((_a = data === null || data === void 0 ? void 0 : data.sampleTickets) !== null && _a !== void 0 ? _a : []);
     const [recentChats, setRecentChats] = useState([]);
@@ -71,16 +78,83 @@ export const ChatWidget = ({ theme: localTheme }) => {
         setClosing(false);
         setIsOpen(true);
     };
+    const persistWidgetState = useCallback(() => {
+        var _a;
+        const w = data === null || data === void 0 ? void 0 : data.widget;
+        if (!w)
+            return;
+        saveSession(w.id, {
+            screen,
+            activeTab,
+            userListCtx,
+            activeUserUid: (_a = activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid) !== null && _a !== void 0 ? _a : null,
+            messages,
+            viewingTicketId,
+            chatReturnCtx,
+        });
+    }, [data === null || data === void 0 ? void 0 : data.widget, screen, activeTab, userListCtx, activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid, messages, viewingTicketId, chatReturnCtx]);
     const closeDrawer = useCallback(() => {
+        persistWidgetState();
         setClosing(true);
         setTimeout(() => {
             setIsOpen(false);
             setClosing(false);
-            setScreen('home');
-            setActiveTab('home');
-            clearChat();
         }, 300);
-    }, [clearChat]);
+    }, [persistWidgetState]);
+    const restoredRef = useRef(false);
+    useEffect(() => {
+        var _a, _b, _c;
+        if (!(data === null || data === void 0 ? void 0 : data.widget) || restoredRef.current)
+            return;
+        const w = data.widget;
+        setMessageSoundEnabledState(getMessageSoundEnabled(w.id));
+        const p = loadSession(w.id);
+        if (p) {
+            setScreen(p.screen);
+            setActiveTab(p.activeTab);
+            setUserListCtx(p.userListCtx);
+            setViewingTicketId((_a = p.viewingTicketId) !== null && _a !== void 0 ? _a : null);
+            setChatReturnCtx((_b = p.chatReturnCtx) !== null && _b !== void 0 ? _b : 'conversation');
+            if (p.activeUserUid) {
+                const u = [...data.developers, ...data.users].find(x => x.uid === p.activeUserUid);
+                if (u) {
+                    const hist = Array.isArray(p.messages) && p.messages.length
+                        ? p.messages
+                        : ((_c = data.sampleChats[u.uid]) !== null && _c !== void 0 ? _c : []);
+                    selectUser(u, hist);
+                }
+            }
+        }
+        restoredRef.current = true;
+    }, [data, selectUser]);
+    useEffect(() => {
+        if (!(data === null || data === void 0 ? void 0 : data.widget))
+            return;
+        persistWidgetState();
+    }, [(_c = data === null || data === void 0 ? void 0 : data.widget) === null || _c === void 0 ? void 0 : _c.id, screen, activeTab, userListCtx, activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid, messages, viewingTicketId, chatReturnCtx, persistWidgetState]);
+    const incomingSoundRef = useRef(0);
+    useEffect(() => {
+        incomingSoundRef.current = messages.length;
+    }, [activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid]);
+    useEffect(() => {
+        if (!messageSoundEnabled || !activeUser || !(data === null || data === void 0 ? void 0 : data.widget))
+            return;
+        if (messages.length < incomingSoundRef.current) {
+            incomingSoundRef.current = messages.length;
+            return;
+        }
+        const added = messages.slice(incomingSoundRef.current);
+        incomingSoundRef.current = messages.length;
+        if (added.some(m => m.senderId !== 'me'))
+            playMessageSound();
+    }, [messages, messageSoundEnabled, activeUser, data === null || data === void 0 ? void 0 : data.widget]);
+    const toggleMessageSound = useCallback((enabled) => {
+        const w = data === null || data === void 0 ? void 0 : data.widget;
+        if (!w)
+            return;
+        setMessageSoundEnabled(w.id, enabled);
+        setMessageSoundEnabledState(enabled);
+    }, [data === null || data === void 0 ? void 0 : data.widget]);
     /* ── Navigation ──────────────────────────────────────────────────────── */
     const handleCardClick = useCallback((ctx) => {
         if (ctx === 'ticket') {
@@ -103,20 +177,34 @@ export const ChatWidget = ({ theme: localTheme }) => {
             setScreen('user-list');
         }
     }, [clearChat]);
-    const handleSelectUser = useCallback((user) => {
+    const listCtxForUser = useCallback((user, viewerIsDev) => {
+        if (viewerIsDev)
+            return user.type === 'user' ? 'support' : 'conversation';
+        return user.type === 'developer' ? 'support' : 'conversation';
+    }, []);
+    const handleSelectUser = useCallback((user, returnCtxOverride) => {
         var _a;
-        // Load history from sample chats if available
+        setChatReturnCtx(returnCtxOverride !== null && returnCtxOverride !== void 0 ? returnCtxOverride : userListCtx);
         const history = (_a = data === null || data === void 0 ? void 0 : data.sampleChats[user.uid]) !== null && _a !== void 0 ? _a : [];
         selectUser(user, history);
         setScreen('chat');
-        // Update recent chats
         setRecentChats(prev => {
             const exists = prev.find(r => r.user.uid === user.uid);
             if (exists)
                 return prev;
             return [{ id: `rc_${user.uid}`, user, lastMessage: '', lastTime: new Date().toISOString(), unread: 0, isPaused: false }, ...prev];
         });
-    }, [data, selectUser]);
+    }, [data, selectUser, userListCtx]);
+    const handleBackFromChat = useCallback(() => {
+        clearChat();
+        setUserListCtx(chatReturnCtx);
+        setScreen('user-list');
+    }, [clearChat, chatReturnCtx]);
+    const handleOpenTicket = useCallback((id) => {
+        setViewingTicketId(id);
+        setScreen('ticket-detail');
+        setActiveTab('tickets');
+    }, []);
     const handleTabChange = useCallback((tab) => {
         setActiveTab(tab);
         setScreen(tab === 'home' ? 'home' : tab === 'chats' ? 'recent-chats' : 'tickets');
@@ -127,7 +215,7 @@ export const ChatWidget = ({ theme: localTheme }) => {
             return;
         setBlockedUids(prev => [...prev, activeUser.uid]);
         clearChat();
-        setScreen('home');
+        setScreen('block-list');
         setActiveTab('home');
     }, [activeUser, clearChat]);
     const handleUnblock = useCallback((uid) => {
@@ -142,7 +230,10 @@ export const ChatWidget = ({ theme: localTheme }) => {
             updatedAt: new Date().toISOString(),
             assignedTo: null,
         };
-        setTickets(prev => [t, ...prev]);
+        setTickets(prev => [...prev, t]);
+        setViewingTicketId(t.id);
+        setScreen('ticket-detail');
+        setActiveTab('tickets');
     }, []);
     /* ── Pause sync back into recent chats ──────────────────────────────── */
     const handleTogglePause = useCallback(() => {
@@ -182,7 +273,7 @@ export const ChatWidget = ({ theme: localTheme }) => {
             return u.type === 'user';
         })
         : [];
-    const otherDevelopers = (_c = data === null || data === void 0 ? void 0 : data.developers.filter(d => d.uid !== viewerUid)) !== null && _c !== void 0 ? _c : [];
+    const otherDevelopers = (_d = data === null || data === void 0 ? void 0 : data.developers.filter(d => d.uid !== viewerUid)) !== null && _d !== void 0 ? _d : [];
     const blockedUsers = allUsers.filter(u => blockedUids.includes(u.uid));
     const handleTransferToDeveloper = useCallback((dev) => {
         var _a;
@@ -273,11 +364,16 @@ export const ChatWidget = ({ theme: localTheme }) => {
                                     right: theme.buttonPosition === 'bottom-left' ? 'auto' : 12,
                                     left: theme.buttonPosition === 'bottom-left' ? 12 : 'auto',
                                     zIndex: 20, display: 'flex', gap: 6,
-                                }, children: _jsx(CornerBtn, { onClick: closeDrawer, title: "Close", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round" }) }) }) })), widgetConfig.status === 'MAINTENANCE' && (_jsx(MaintenanceView, { primaryColor: primaryColor })), widgetConfig.status === 'DISABLE' && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: 32, textAlign: 'center', gap: 12 }, children: [_jsx("div", { style: { fontSize: 40 }, children: "\uD83D\uDD12" }), _jsx("p", { style: { fontWeight: 700, color: '#1a2332' }, children: "Chat is disabled" }), _jsx("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 }, children: "Close" })] })), widgetConfig.status === 'ACTIVE' && (_jsxs("div", { className: "cw-scroll", style: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: [screen === 'home' && (_jsx(HomeScreen, { config: widgetConfig, onNavigate: handleCardClick, tickets: tickets })), screen === 'user-list' && (_jsx(UserListScreen, { context: userListCtx, users: filteredUsers, primaryColor: primaryColor, viewerType: (_d = widgetConfig.viewerType) !== null && _d !== void 0 ? _d : 'user', onBack: () => setScreen('home'), onSelectUser: handleSelectUser })), screen === 'chat' && activeUser && (_jsx(ChatScreen, { activeUser: activeUser, messages: messages, config: widgetConfig, isPaused: isPaused, isReported: isReported, isBlocked: isBlocked, onSend: sendMessage, onBack: () => { clearChat(); setScreen('home'); setActiveTab('home'); }, onClose: closeDrawer, onTogglePause: handleTogglePause, onReport: reportChat, onBlock: handleBlock, onStartCall: handleStartCall, onNavAction: handleNavFromMenu, otherDevelopers: otherDevelopers, onTransferToDeveloper: handleTransferToDeveloper })), screen === 'call' && callSession.peer && (_jsx(CallScreen, { session: callSession, localVideoRef: localVideoRef, remoteVideoRef: remoteVideoRef, onEnd: handleEndCall, onToggleMute: toggleMute, onToggleCamera: toggleCamera, primaryColor: primaryColor })), screen === 'recent-chats' && (_jsx(RecentChatsScreen, { chats: recentChats, config: widgetConfig, onSelectChat: handleSelectUser })), screen === 'tickets' && (_jsx(TicketScreen, { tickets: tickets, config: widgetConfig, onRaiseTicket: handleRaiseTicket })), screen === 'block-list' && (_jsx(BlockListScreen, { blockedUsers: blockedUsers, config: widgetConfig, onUnblock: handleUnblock, onBack: () => { setScreen('home'); setActiveTab('home'); } }))] })), widgetConfig.status === 'ACTIVE' &&
+                                }, children: _jsx(CornerBtn, { onClick: closeDrawer, title: "Close", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round" }) }) }) })), widgetConfig.status === 'MAINTENANCE' && (_jsx(MaintenanceView, { primaryColor: primaryColor })), widgetConfig.status === 'DISABLE' && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: 32, textAlign: 'center', gap: 12 }, children: [_jsx("div", { style: { fontSize: 40 }, children: "\uD83D\uDD12" }), _jsx("p", { style: { fontWeight: 700, color: '#1a2332' }, children: "Chat is disabled" }), _jsx("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 }, children: "Close" })] })), widgetConfig.status === 'ACTIVE' && (_jsxs("div", { className: "cw-scroll", style: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: [screen === 'home' && (_jsx(HomeScreen, { config: widgetConfig, onNavigate: handleCardClick, onOpenTicket: handleOpenTicket, tickets: tickets })), screen === 'user-list' && (_jsx(UserListScreen, { context: userListCtx, users: filteredUsers, primaryColor: primaryColor, viewerType: (_e = widgetConfig.viewerType) !== null && _e !== void 0 ? _e : 'user', onBack: () => setScreen('home'), onSelectUser: handleSelectUser, onBlockList: userListCtx === 'conversation' ? () => setScreen('block-list') : undefined })), screen === 'chat' && activeUser && (_jsx(ChatScreen, { activeUser: activeUser, messages: messages, config: widgetConfig, isPaused: isPaused, isReported: isReported, isBlocked: isBlocked, onSend: sendMessage, onBack: handleBackFromChat, onClose: closeDrawer, onTogglePause: handleTogglePause, onReport: reportChat, onBlock: handleBlock, onStartCall: handleStartCall, onNavAction: handleNavFromMenu, otherDevelopers: otherDevelopers, onTransferToDeveloper: handleTransferToDeveloper, messageSoundEnabled: messageSoundEnabled, onToggleMessageSound: toggleMessageSound })), screen === 'call' && callSession.peer && (_jsx(CallScreen, { session: callSession, localVideoRef: localVideoRef, remoteVideoRef: remoteVideoRef, onEnd: handleEndCall, onToggleMute: toggleMute, onToggleCamera: toggleCamera, primaryColor: primaryColor })), screen === 'recent-chats' && (_jsx(RecentChatsScreen, { chats: recentChats, config: widgetConfig, onSelectChat: u => handleSelectUser(u, listCtxForUser(u, viewerIsDev)) })), screen === 'tickets' && (_jsx(TicketScreen, { tickets: tickets, config: widgetConfig, onNewTicket: () => setScreen('ticket-new'), onSelectTicket: id => { setViewingTicketId(id); setScreen('ticket-detail'); } })), screen === 'ticket-new' && (_jsx(TicketFormScreen, { config: widgetConfig, onSubmit: handleRaiseTicket, onCancel: () => setScreen('tickets') })), screen === 'ticket-detail' && viewingTicketId && ((() => {
+                                        const t = tickets.find(x => x.id === viewingTicketId);
+                                        return t ? (_jsx(TicketDetailScreen, { ticket: t, config: widgetConfig, onBack: () => { setViewingTicketId(null); setScreen('tickets'); } })) : null;
+                                    })()), screen === 'block-list' && (_jsx(BlockListScreen, { blockedUsers: blockedUsers, config: widgetConfig, onUnblock: handleUnblock, onBack: () => { setScreen('home'); setActiveTab('home'); } }))] })), widgetConfig.status === 'ACTIVE' &&
                                 screen !== 'chat' &&
                                 screen !== 'call' &&
                                 screen !== 'user-list' &&
-                                screen !== 'block-list' && (_jsx(BottomTabs, { active: activeTab, onChange: handleTabChange, primaryColor: primaryColor, onBlockList: () => setScreen('block-list') }))] }))] }))] }));
+                                screen !== 'block-list' &&
+                                screen !== 'ticket-detail' &&
+                                screen !== 'ticket-new' && (_jsx(BottomTabs, { active: activeTab, onChange: handleTabChange, primaryColor: primaryColor }))] }))] }))] }));
 };
 export default ChatWidget;
 /* ── Tiny corner button ────────────────────────────────────────────────────── */

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

@@ -3,6 +3,8 @@ import { WidgetConfig, UserListContext, Ticket } from '../../types';
 interface HomeScreenProps {
     config: WidgetConfig;
     onNavigate: (ctx: UserListContext | 'ticket') => void;
+    /** Open a specific pending ticket (full detail) */
+    onOpenTicket: (ticketId: string) => void;
     tickets: Ticket[];
 }
 export declare const HomeScreen: React.FC<HomeScreenProps>;

package/dist/components/HomeScreen/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useMemo } from 'react';
 import { SlideNavMenu } from '../SlideNavMenu';
 import { truncateWords } from '../../utils/chat';
-export const HomeScreen = ({ config, onNavigate, tickets }) => {
+export const HomeScreen = ({ config, onNavigate, onOpenTicket, tickets }) => {
     var _a, _b, _c, _d;
     const [menuOpen, setMenuOpen] = useState(false);
     const showSupport = config.chatType === 'SUPPORT' || config.chatType === 'BOTH';
@@ -51,7 +51,7 @@ export const HomeScreen = ({ config, onNavigate, tickets }) => {
                             color: '#0f172a',
                             letterSpacing: '-0.03em',
                             lineHeight: 1.2,
-                        }, children: config.welcomeTitle }), _jsx("p", { style: { margin: '0 0 28px', fontSize: 14, color: '#64748b', lineHeight: 1.55 }, children: config.welcomeSubtitle }), _jsx("h2", { style: { margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }, children: "Continue Conversations" }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }, children: pendingTickets.length > 0 ? (pendingTickets.map(t => (_jsxs("button", { type: "button", onClick: () => onNavigate('ticket'), style: {
+                        }, children: config.welcomeTitle }), _jsx("p", { style: { margin: '0 0 28px', fontSize: 14, color: '#64748b', lineHeight: 1.55 }, children: config.welcomeSubtitle }), _jsx("h2", { style: { margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }, children: "Continue Conversations" }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }, children: pendingTickets.length > 0 ? (pendingTickets.map(t => (_jsxs("button", { type: "button", onClick: () => onOpenTicket(t.id), style: {
                                 width: '100%',
                                 textAlign: 'left',
                                 padding: '14px 16px',

package/dist/components/Tabs/BottomTabs.d.ts

@@ -4,7 +4,6 @@ interface BottomTabsProps {
     active: BottomTab;
     onChange: (tab: BottomTab) => void;
     primaryColor: string;
-    onBlockList: () => void;
 }
 export declare const BottomTabs: React.FC<BottomTabsProps>;
 export {};

package/dist/components/Tabs/BottomTabs.js

@@ -1,33 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const BottomTabs = ({ active, onChange, primaryColor, onBlockList }) => {
+export const BottomTabs = ({ active, onChange, primaryColor }) => {
     const tabs = [
         { key: 'home', label: 'Home', Icon: HomeIcon },
         { key: 'chats', label: 'Chats', Icon: ChatsIcon },
         { key: 'tickets', label: 'Tickets', Icon: TicketsIcon },
     ];
-    return (_jsxs("div", { style: {
+    return (_jsx("div", { style: {
             display: 'flex', borderTop: '1px solid #eef0f5',
             backgroundColor: '#fff', flexShrink: 0,
-        }, children: [tabs.map(tab => {
-                const isActive = active === tab.key;
-                return (_jsxs("button", { onClick: () => onChange(tab.key), style: {
-                        flex: 1, padding: '10px 0 8px',
-                        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
-                        background: 'transparent', border: 'none', cursor: 'pointer',
-                        fontSize: '10px', fontWeight: isActive ? 700 : 500,
-                        color: isActive ? primaryColor : '#9aa3af',
-                        borderTop: isActive ? `2px solid ${primaryColor}` : '2px solid transparent',
-                        transition: 'color 0.15s',
-                        fontFamily: 'inherit',
-                    }, children: [_jsx(tab.Icon, { a: isActive, c: isActive ? primaryColor : '#b0bec5' }), tab.label] }, tab.key));
-            }), _jsxs("button", { onClick: onBlockList, style: {
-                    padding: '10px 14px 8px',
+        }, children: tabs.map(tab => {
+            const isActive = active === tab.key;
+            return (_jsxs("button", { type: "button", onClick: () => onChange(tab.key), style: {
+                    flex: 1, padding: '10px 0 8px',
                     display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
                     background: 'transparent', border: 'none', cursor: 'pointer',
-                    fontSize: '10px', fontWeight: 500, color: '#9aa3af',
-                    borderTop: '2px solid transparent',
-                    transition: 'color 0.15s', fontFamily: 'inherit',
-                }, title: "Block List", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "#b0bec5", strokeWidth: "1.8" }), _jsx("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07", stroke: "#b0bec5", strokeWidth: "1.8", strokeLinecap: "round" })] }), "Blocked"] })] }));
+                    fontSize: '10px', fontWeight: isActive ? 700 : 500,
+                    color: isActive ? primaryColor : '#9aa3af',
+                    borderTop: isActive ? `2px solid ${primaryColor}` : '2px solid transparent',
+                    transition: 'color 0.15s',
+                    fontFamily: 'inherit',
+                }, children: [_jsx(tab.Icon, { a: isActive, c: isActive ? primaryColor : '#b0bec5' }), tab.label] }, tab.key));
+        }) }));
 };
 const HomeIcon = ({ a, c }) => (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H4a1 1 0 01-1-1V9.5z", stroke: c, strokeWidth: a ? 2.2 : 1.8, fill: a ? `${c}20` : 'none', strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M9 21V12h6v9", stroke: c, strokeWidth: a ? 2.2 : 1.8, strokeLinecap: "round", strokeLinejoin: "round" })] }));
 const ChatsIcon = ({ a, c }) => (_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: c, strokeWidth: a ? 2.2 : 1.8, fill: a ? `${c}20` : 'none', strokeLinecap: "round", strokeLinejoin: "round" }) }));

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Ticket, WidgetConfig } from '../../types';
+interface TicketDetailScreenProps {
+    ticket: Ticket;
+    config: WidgetConfig;
+    onBack: () => void;
+}
+export declare const TicketDetailScreen: React.FC<TicketDetailScreenProps>;
+export {};

package/dist/components/TicketDetailScreen/index.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sm = {
+    open: { label: 'Open', bg: '', color: '' },
+    'in-progress': { label: 'In Progress', bg: '#fef3c7', color: '#d97706' },
+    resolved: { label: 'Resolved', bg: '#f0fdf4', color: '#16a34a' },
+    closed: { label: 'Closed', bg: '#f3f4f6', color: '#6b7280' },
+};
+const pm = {
+    low: { label: 'Low', color: '#6b7280' },
+    medium: { label: 'Medium', color: '#d97706' },
+    high: { label: 'High', color: '#ef4444' },
+};
+export const TicketDetailScreen = ({ ticket, config, onBack }) => {
+    const st = sm[ticket.status];
+    const pr = pm[ticket.priority];
+    const stBg = ticket.status === 'open' ? `${config.primaryColor}14` : st.bg;
+    const stColor = ticket.status === 'open' ? config.primaryColor : st.color;
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideIn 0.22s ease' }, children: [_jsxs("div", { style: {
+                    background: `linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
+                    padding: '14px 18px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    flexShrink: 0,
+                }, children: [_jsx("button", { type: "button", onClick: onBack, style: {
+                            background: 'rgba(255,255,255,0.22)',
+                            border: 'none',
+                            borderRadius: '50%',
+                            width: 36,
+                            height: 36,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            cursor: 'pointer',
+                            flexShrink: 0,
+                        }, 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.2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 800, fontSize: 16, color: '#fff', lineHeight: 1.25 }, children: ticket.title }), _jsxs("div", { style: { fontSize: 12, color: 'rgba(255,255,255,0.85)', marginTop: 2 }, children: ["#", ticket.id] })] })] }), _jsxs("div", { className: "cw-scroll", style: { flex: 1, overflowY: 'auto', padding: '20px 18px' }, children: [_jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 16 }, children: [_jsx("span", { style: {
+                                    fontSize: 11,
+                                    fontWeight: 700,
+                                    padding: '5px 12px',
+                                    borderRadius: 20,
+                                    backgroundColor: stBg,
+                                    color: stColor,
+                                    textTransform: 'uppercase',
+                                    letterSpacing: '0.04em',
+                                }, children: st.label }), _jsxs("span", { style: { fontSize: 11, fontWeight: 700, padding: '5px 12px', borderRadius: 20, color: pr.color, background: `${pr.color}15` }, children: ["\u25CF ", pr.label, " priority"] })] }), _jsx("h3", { style: { margin: '0 0 8px', fontSize: 13, fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.06em' }, children: "Description" }), _jsx("p", { style: { margin: '0 0 24px', fontSize: 15, color: '#1e293b', lineHeight: 1.65, whiteSpace: 'pre-wrap' }, children: ticket.description || '—' }), _jsxs("div", { style: { fontSize: 13, color: '#94a3b8', display: 'grid', gap: 8 }, children: [_jsxs("div", { children: [_jsx("strong", { style: { color: '#64748b' }, children: "Created" }), " \u00B7 ", new Date(ticket.createdAt).toLocaleString()] }), _jsxs("div", { children: [_jsx("strong", { style: { color: '#64748b' }, children: "Updated" }), " \u00B7 ", new Date(ticket.updatedAt).toLocaleString()] }), ticket.assignedTo && (_jsxs("div", { children: [_jsx("strong", { style: { color: '#64748b' }, children: "Assigned" }), " \u00B7 ", ticket.assignedTo] }))] })] })] }));
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Ticket, WidgetConfig } from '../../types';
+interface TicketFormScreenProps {
+    config: WidgetConfig;
+    onSubmit: (title: string, desc: string, priority: Ticket['priority']) => void;
+    onCancel: () => void;
+}
+export declare const TicketFormScreen: React.FC<TicketFormScreenProps>;
+export {};

package/dist/components/TicketFormScreen/index.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+function inputStyle(primaryColor) {
+    return {
+        width: '100%',
+        padding: '11px 14px',
+        borderRadius: 10,
+        border: '1.5px solid #e5e7eb',
+        outline: 'none',
+        fontSize: 14,
+        color: '#1a2332',
+        boxSizing: 'border-box',
+        fontFamily: 'inherit',
+        transition: 'border-color 0.2s',
+    };
+}
+export const TicketFormScreen = ({ config, onSubmit, onCancel }) => {
+    const [title, setTitle] = useState('');
+    const [desc, setDesc] = useState('');
+    const [priority, setPriority] = useState('medium');
+    const pm = {
+        low: { label: 'Low', color: '#6b7280' },
+        medium: { label: 'Medium', color: '#d97706' },
+        high: { label: 'High', color: '#ef4444' },
+    };
+    const handleSubmit = () => {
+        if (!title.trim())
+            return;
+        onSubmit(title.trim(), desc.trim(), priority);
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', background: '#fff' }, children: [_jsxs("div", { style: {
+                    background: `linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
+                    padding: '14px 18px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    flexShrink: 0,
+                }, children: [_jsx("button", { type: "button", onClick: onCancel, style: {
+                            background: 'rgba(255,255,255,0.22)',
+                            border: 'none',
+                            borderRadius: '50%',
+                            width: 36,
+                            height: 36,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            cursor: 'pointer',
+                        }, 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.2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsxs("div", { children: [_jsx("h2", { style: { margin: 0, fontSize: 18, fontWeight: 800, color: '#fff' }, children: "New ticket" }), _jsx("p", { style: { margin: '4px 0 0', fontSize: 12, color: 'rgba(255,255,255,0.85)' }, children: "Describe your issue below" })] })] }), _jsxs("div", { className: "cw-scroll", style: { flex: 1, overflowY: 'auto', padding: '20px 18px' }, children: [_jsx("input", { placeholder: "Title *", value: title, onChange: e => setTitle(e.target.value), style: inputStyle(config.primaryColor), onFocus: e => (e.target.style.borderColor = config.primaryColor), onBlur: e => (e.target.style.borderColor = '#e5e7eb') }), _jsx("textarea", { placeholder: "Describe the issue\u2026", value: desc, onChange: e => setDesc(e.target.value), rows: 5, style: Object.assign(Object.assign({}, inputStyle(config.primaryColor)), { resize: 'none', marginTop: 12 }), onFocus: e => (e.target.style.borderColor = config.primaryColor), onBlur: e => (e.target.style.borderColor = '#e5e7eb') }), _jsx("div", { style: { display: 'flex', gap: 8, marginTop: 12, marginBottom: 20 }, children: ['low', 'medium', 'high'].map(p => (_jsx("button", { type: "button", onClick: () => setPriority(p), style: {
+                                flex: 1,
+                                padding: '8px',
+                                border: `1.5px solid ${priority === p ? pm[p].color : '#e5e7eb'}`,
+                                borderRadius: 8,
+                                background: priority === p ? `${pm[p].color}15` : '#fff',
+                                color: pm[p].color,
+                                fontWeight: 700,
+                                fontSize: 12,
+                                cursor: 'pointer',
+                                textTransform: 'capitalize',
+                            }, children: pm[p].label }, p))) }), _jsx("button", { type: "button", onClick: handleSubmit, disabled: !title.trim(), style: {
+                            width: '100%',
+                            padding: '12px',
+                            borderRadius: 10,
+                            border: 'none',
+                            background: title.trim() ? config.primaryColor : '#e5e7eb',
+                            color: title.trim() ? '#fff' : '#9ca3af',
+                            fontWeight: 700,
+                            fontSize: 15,
+                            cursor: title.trim() ? 'pointer' : 'not-allowed',
+                        }, children: "Submit ticket" })] })] }));
+};

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

@@ -3,7 +3,8 @@ import { Ticket, WidgetConfig } from '../../types';
 interface TicketScreenProps {
     tickets: Ticket[];
     config: WidgetConfig;
-    onRaiseTicket: (title: string, desc: string, priority: Ticket['priority']) => void;
+    onNewTicket: () => void;
+    onSelectTicket: (id: string) => void;
 }
 export declare const TicketScreen: React.FC<TicketScreenProps>;
 export {};