ajaxter-chat 3.0.7 → 3.0.8

package/dist/components/ChatWidget.js

@@ -15,9 +15,6 @@ import { BlockListScreen } from './BlockList';
 import { CallScreen } from './CallScreen';
 import { MaintenanceView } from './MaintenanceView';
 import { BottomTabs } from './Tabs/BottomTabs';
-/* ─── Drawer width ─────────────────────────────────────────────────────────── */
-const DRAWER_W_NORMAL = 380;
-const DRAWER_W_MAX = 480;
 export const ChatWidget = ({ theme: localTheme }) => {
     var _a, _b, _c, _d;
     /* SSR guard */
@@ -31,7 +28,6 @@ export const ChatWidget = ({ theme: localTheme }) => {
     const theme = mergeTheme((data === null || data === void 0 ? void 0 : data.widget) ? { primaryColor: data.widget.primaryColor, buttonLabel: data.widget.buttonLabel, buttonPosition: data.widget.buttonPosition } : undefined, localTheme);
     /* Drawer open state */
     const [isOpen, setIsOpen] = useState(false);
-    const [isMaximized, setIsMaximized] = useState(false);
     const [closing, setClosing] = useState(false); // for slide-out animation
     /* Navigation */
     const [activeTab, setActiveTab] = useState('home');
@@ -168,7 +164,6 @@ export const ChatWidget = ({ theme: localTheme }) => {
     }, [endCall]);
     /* ── Derived ─────────────────────────────────────────────────────────── */
     const isBlocked = activeUser ? blockedUids.includes(activeUser.uid) : false;
-    const drawerW = isMaximized ? DRAWER_W_MAX : DRAWER_W_NORMAL;
     const widgetConfig = data === null || data === void 0 ? void 0 : data.widget;
     const primaryColor = theme.primaryColor;
     const allUsers = data ? [...data.developers, ...data.users] : [];
@@ -209,9 +204,20 @@ export const ChatWidget = ({ theme: localTheme }) => {
     const posStyle = theme.buttonPosition === 'bottom-left'
         ? { left: 24, right: 'auto' }
         : { right: 24, left: 'auto' };
+    /* No radius on top-left / bottom-left; left-docked panel keeps inner TR/BR curve */
     const drawerPosStyle = theme.buttonPosition === 'bottom-left'
-        ? { left: 0, borderRadius: '0 16px 16px 0' }
-        : { right: 0, borderRadius: '16px 0 0 16px' };
+        ? {
+            left: 0,
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+            borderTopRightRadius: 16,
+            borderBottomRightRadius: 16,
+        }
+        : {
+            right: 0,
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+        };
     /* ── Don't render until mounted (SSR safe) ──────────────────────────── */
     if (!mounted)
         return null;
@@ -235,6 +241,15 @@ export const ChatWidget = ({ theme: localTheme }) => {
 
         .cw-drawer-enter { animation: ${theme.buttonPosition === 'bottom-left' ? 'cw-slideInLeft' : 'cw-slideInRight'} 0.32s cubic-bezier(0.22,1,0.36,1) both; }
         .cw-drawer-exit  { animation: ${theme.buttonPosition === 'bottom-left' ? 'cw-slideOutLeft' : 'cw-slideOutRight'} 0.28s cubic-bezier(0.55,0,1,0.45) both; }
+
+        .cw-drawer-panel {
+          width: 30%;
+          max-width: 100vw;
+          min-width: 0;
+        }
+        @media (max-width: 1024px) {
+          .cw-drawer-panel { width: 100%; }
+        }
       ` }), !isOpen && (_jsxs("button", { className: "cw-root", onClick: openDrawer, "aria-label": theme.buttonLabel, style: Object.assign(Object.assign({ position: 'fixed', bottom: 24, zIndex: 9999 }, posStyle), { display: 'flex', alignItems: 'center', gap: 10, padding: '13px 22px', backgroundColor: theme.buttonColor, color: theme.buttonTextColor, border: 'none', borderRadius: 50, cursor: 'pointer', fontSize: 15, fontWeight: 700, boxShadow: `0 8px 28px ${theme.buttonColor}55`, animation: 'cw-btnPop 0.4s cubic-bezier(0.34,1.56,0.64,1)', transition: 'transform 0.2s, box-shadow 0.2s' }), onMouseEnter: e => {
                     e.currentTarget.style.transform = 'scale(1.06) translateY(-2px)';
                     e.currentTarget.style.boxShadow = `0 14px 36px ${theme.buttonColor}66`;
@@ -246,21 +261,19 @@ export const ChatWidget = ({ theme: localTheme }) => {
                     backgroundColor: 'rgba(0,0,0,0.35)',
                     opacity: closing ? 0 : 1,
                     transition: 'opacity 0.3s',
-                } })), isOpen && (_jsxs("div", { className: `cw-root ${closing ? 'cw-drawer-exit' : 'cw-drawer-enter'}`, style: Object.assign(Object.assign({ position: 'fixed', top: 0, bottom: 0 }, drawerPosStyle), { zIndex: 9998, width: drawerW, maxWidth: '100vw', backgroundColor: '#fff', boxShadow: theme.buttonPosition === 'bottom-left'
+                } })), isOpen && (_jsxs("div", { className: `cw-root cw-drawer-panel ${closing ? 'cw-drawer-exit' : 'cw-drawer-enter'}`, style: Object.assign(Object.assign({ position: 'fixed', top: 0, bottom: 0 }, drawerPosStyle), { zIndex: 9998, backgroundColor: '#fff', boxShadow: theme.buttonPosition === 'bottom-left'
                         ? '4px 0 40px rgba(0,0,0,0.18)'
-                        : '-4px 0 40px rgba(0,0,0,0.18)', display: 'flex', flexDirection: 'column', overflow: 'hidden', transition: 'width 0.28s ease' }), children: [cfgLoading && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 16 }, children: [_jsx("div", { style: {
+                        : '-4px 0 40px rgba(0,0,0,0.18)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }), children: [cfgLoading && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 16 }, children: [_jsx("div", { style: {
                                     width: 40, height: 40, borderRadius: '50%',
                                     border: `3px solid ${primaryColor}30`,
                                     borderTopColor: primaryColor,
                                     animation: 'spin 0.8s linear infinite',
-                                } }), _jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` }), _jsx("p", { style: { fontSize: 14, color: '#7b8fa1' }, children: "Loading chat\u2026" })] })), cfgError && !cfgLoading && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 12, padding: 32, textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 40 }, children: "\u26A0\uFE0F" }), _jsx("p", { style: { fontWeight: 700, color: '#1a2332' }, children: "Could not load chat configuration" }), _jsx("p", { style: { fontSize: 13, color: '#7b8fa1', lineHeight: 1.6 }, children: cfgError }), _jsx("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 }, children: "Close" })] })), !cfgLoading && !cfgError && widgetConfig && (_jsxs(_Fragment, { children: [screen !== 'chat' && screen !== 'call' && (_jsxs("div", { style: {
+                                } }), _jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` }), _jsx("p", { style: { fontSize: 14, color: '#7b8fa1' }, children: "Loading chat\u2026" })] })), cfgError && !cfgLoading && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 12, padding: 32, textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 40 }, children: "\u26A0\uFE0F" }), _jsx("p", { style: { fontWeight: 700, color: '#1a2332' }, children: "Could not load chat configuration" }), _jsx("p", { style: { fontSize: 13, color: '#7b8fa1', lineHeight: 1.6 }, children: cfgError }), _jsx("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 }, children: "Close" })] })), !cfgLoading && !cfgError && widgetConfig && (_jsxs(_Fragment, { children: [screen !== 'chat' && screen !== 'call' && (_jsx("div", { style: {
                                     position: 'absolute', top: 12,
                                     right: theme.buttonPosition === 'bottom-left' ? 'auto' : 12,
                                     left: theme.buttonPosition === 'bottom-left' ? 12 : 'auto',
                                     zIndex: 20, display: 'flex', gap: 6,
-                                }, children: [_jsx(CornerBtn, { onClick: () => setIsMaximized(m => !m), title: isMaximized ? 'Minimize' : 'Maximize', children: isMaximized
-                                            ? _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M8 3v5H3M21 8h-5V3M3 16h5v5M16 21v-5h5", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }) })
-                                            : _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M8 3H5a2 2 0 00-2 2v3M21 8V5a2 2 0 00-2-2h-3M3 16v3a2 2 0 002 2h3M16 21h3a2 2 0 002-2v-3", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }) }) }), _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, 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' &&
                                 screen !== 'chat' &&
                                 screen !== 'call' &&
                                 screen !== 'user-list' &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajaxter-chat",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "description": "Drawer-based chat widget with support chat, tickets, WebRTC calling, voice messages, block list, and transcript download.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/ChatWidget.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { ChatWidgetProps, BottomTab, Screen, UserListContext, ChatUser, Ticket, RecentChat, ChatMessage } from '../types';
 import { loadLocalConfig } from '../config';
 import { mergeTheme } from '../utils/theme';
@@ -18,10 +18,6 @@ import { CallScreen }        from './CallScreen';
 import { MaintenanceView }   from './MaintenanceView';
 import { BottomTabs }        from './Tabs/BottomTabs';
 
-/* ─── Drawer width ─────────────────────────────────────────────────────────── */
-const DRAWER_W_NORMAL = 380;
-const DRAWER_W_MAX    = 480;
-
 export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) => {
   /* SSR guard */
   const [mounted, setMounted] = useState(false);
@@ -41,7 +37,6 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
 
   /* Drawer open state */
   const [isOpen,      setIsOpen]      = useState(false);
-  const [isMaximized, setIsMaximized] = useState(false);
   const [closing,     setClosing]     = useState(false); // for slide-out animation
 
   /* Navigation */
@@ -191,7 +186,6 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
 
   /* ── Derived ─────────────────────────────────────────────────────────── */
   const isBlocked      = activeUser ? blockedUids.includes(activeUser.uid) : false;
-  const drawerW        = isMaximized ? DRAWER_W_MAX : DRAWER_W_NORMAL;
   const widgetConfig   = data?.widget;
   const primaryColor   = theme.primaryColor;
 
@@ -235,9 +229,21 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
     ? { left: 24, right: 'auto' }
     : { right: 24, left: 'auto' };
 
-  const drawerPosStyle: React.CSSProperties = theme.buttonPosition === 'bottom-left'
-    ? { left: 0, borderRadius: '0 16px 16px 0' }
-    : { right: 0, borderRadius: '16px 0 0 16px' };
+  /* No radius on top-left / bottom-left; left-docked panel keeps inner TR/BR curve */
+  const drawerPosStyle: React.CSSProperties =
+    theme.buttonPosition === 'bottom-left'
+      ? {
+          left: 0,
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+          borderTopRightRadius: 16,
+          borderBottomRightRadius: 16,
+        }
+      : {
+          right: 0,
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+        };
 
   /* ── Don't render until mounted (SSR safe) ──────────────────────────── */
   if (!mounted) return null;
@@ -265,6 +271,15 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
 
         .cw-drawer-enter { animation: ${theme.buttonPosition === 'bottom-left' ? 'cw-slideInLeft' : 'cw-slideInRight'} 0.32s cubic-bezier(0.22,1,0.36,1) both; }
         .cw-drawer-exit  { animation: ${theme.buttonPosition === 'bottom-left' ? 'cw-slideOutLeft' : 'cw-slideOutRight'} 0.28s cubic-bezier(0.55,0,1,0.45) both; }
+
+        .cw-drawer-panel {
+          width: 30%;
+          max-width: 100vw;
+          min-width: 0;
+        }
+        @media (max-width: 1024px) {
+          .cw-drawer-panel { width: 100%; }
+        }
       `}</style>
 
       {/* ── Floating Button ── */}
@@ -319,15 +334,13 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
       {/* ── Drawer / Slider ── */}
       {isOpen && (
         <div
-          className={`cw-root ${closing ? 'cw-drawer-exit' : 'cw-drawer-enter'}`}
+          className={`cw-root cw-drawer-panel ${closing ? 'cw-drawer-exit' : 'cw-drawer-enter'}`}
           style={{
             position: 'fixed',
             top: 0,
             bottom: 0,
             ...drawerPosStyle,
             zIndex: 9998,
-            width: drawerW,
-            maxWidth: '100vw',
             backgroundColor: '#fff',
             boxShadow: theme.buttonPosition === 'bottom-left'
               ? '4px 0 40px rgba(0,0,0,0.18)'
@@ -335,7 +348,6 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
             display: 'flex',
             flexDirection: 'column',
             overflow: 'hidden',
-            transition: 'width 0.28s ease',
           }}
         >
           {/* ── Loading state ── */}
@@ -373,12 +385,6 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
                   left:  theme.buttonPosition === 'bottom-left' ? 12    : 'auto',
                   zIndex: 20, display: 'flex', gap: 6,
                 }}>
-                  <CornerBtn onClick={() => setIsMaximized(m => !m)} title={isMaximized ? 'Minimize' : 'Maximize'}>
-                    {isMaximized
-                      ? <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M8 3v5H3M21 8h-5V3M3 16h5v5M16 21v-5h5" stroke="#fff" strokeWidth="2.2" strokeLinecap="round"/></svg>
-                      : <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M8 3H5a2 2 0 00-2 2v3M21 8V5a2 2 0 00-2-2h-3M3 16v3a2 2 0 002 2h3M16 21h3a2 2 0 002-2v-3" stroke="#fff" strokeWidth="2.2" strokeLinecap="round"/></svg>
-                    }
-                  </CornerBtn>
                   <CornerBtn onClick={closeDrawer} title="Close">
                     <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
                       <path d="M18 6L6 18M6 6l12 12" stroke="#fff" strokeWidth="2.5" strokeLinecap="round"/>