ajaxter-chat 3.0.3 → 3.0.5

package/src/components/ChatWidget.tsx

@@ -115,6 +115,17 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
     }
   }, []);
 
+  const handleNavFromMenu = useCallback((ctx: UserListContext | 'ticket') => {
+    clearChat();
+    if (ctx === 'ticket') {
+      setActiveTab('tickets');
+      setScreen('tickets');
+    } else {
+      setUserListCtx(ctx);
+      setScreen('user-list');
+    }
+  }, [clearChat]);
+
   const handleSelectUser = useCallback((user: ChatUser) => {
     // Load history from sample chats if available
     const history = data?.sampleChats[user.uid] ?? [];
@@ -366,7 +377,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
                 <div className="cw-scroll" style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
 
                   {screen === 'home' && (
-                    <HomeScreen config={widgetConfig} onNavigate={handleCardClick} />
+                    <HomeScreen config={widgetConfig} onNavigate={handleCardClick} tickets={tickets} />
                   )}
 
                   {screen === 'user-list' && (
@@ -394,6 +405,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
                       onReport={reportChat}
                       onBlock={handleBlock}
                       onStartCall={handleStartCall}
+                      onNavAction={handleNavFromMenu}
                     />
                   )}
 

package/src/components/HomeScreen/index.tsx

@@ -1,106 +1,266 @@
-import React from 'react';
-import { WidgetConfig, UserListContext } from '../../types';
+import React, { useState } from 'react';
+import { WidgetConfig, UserListContext, Ticket } from '../../types';
+import { SlideNavMenu } from '../SlideNavMenu';
 
 interface HomeScreenProps {
   config: WidgetConfig;
   onNavigate: (ctx: UserListContext | 'ticket') => void;
+  tickets: Ticket[];
 }
 
-export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate }) => {
+export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, tickets }) => {
+  const [menuOpen, setMenuOpen] = useState(false);
   const showSupport = config.chatType === 'SUPPORT' || config.chatType === 'BOTH';
-  const showChat    = config.chatType === 'CHAT'    || config.chatType === 'BOTH';
+  const showChat = config.chatType === 'CHAT' || config.chatType === 'BOTH';
 
-  const cards = [
-    showSupport && {
-      key: 'support' as UserListContext,
-      icon: '🛠',
-      title: 'Need Support',
-      subtitle: 'We typically reply in a few minutes',
-      onClick: () => onNavigate('support'),
-    },
-    showChat && {
-      key: 'conversation' as UserListContext,
-      icon: '💬',
-      title: 'New Conversation',
-      subtitle: 'With your colleague',
-      onClick: () => onNavigate('conversation'),
-    },
-    {
-      key: 'ticket',
-      icon: '🎫',
-      title: 'Raise Ticket',
-      subtitle: 'For major changes',
-      onClick: () => onNavigate('ticket'),
-    },
-  ].filter(Boolean) as Array<{ key: string; icon: string; title: string; subtitle: string; onClick: () => void }>;
+  const continueItems = tickets.slice(0, 2);
+
+  const handleCallUs = () => {
+    const raw = config.supportPhone?.trim();
+    if (!raw) return;
+    window.location.href = `tel:${raw.replace(/\s/g, '')}`;
+  };
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      {/* Hero */}
-      <div style={{
-        background: `linear-gradient(145deg, ${config.primaryColor}, ${config.primaryColor}dd)`,
-        padding: '36px 24px 52px',
-        flexShrink: 0,
-        position: 'relative',
-        overflow: 'hidden',
-      }}>
-        {/* Decorative circles */}
-        <div style={{ position:'absolute', top:-40, right:-40, width:140, height:140, borderRadius:'50%', background:'rgba(255,255,255,0.07)' }} />
-        <div style={{ position:'absolute', bottom:-20, left:-20, width:90,  height:90,  borderRadius:'50%', background:'rgba(255,255,255,0.05)' }} />
-        <h1 style={{ margin:'0 0 8px', fontSize:26, fontWeight:800, color:'#fff', letterSpacing:'-0.03em' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', position: 'relative', overflow: 'hidden', background: '#fafbfc' }}>
+      <SlideNavMenu
+        open={menuOpen}
+        onClose={() => setMenuOpen(false)}
+        primaryColor={config.primaryColor}
+        chatType={config.chatType}
+        onSelect={onNavigate}
+      />
+
+      {/* Top bar — burger left */}
+      <div
+        style={{
+          flexShrink: 0,
+          padding: '14px 16px 10px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          background: '#fff',
+          borderBottom: '1px solid #eef0f5',
+        }}
+      >
+        <button
+          type="button"
+          aria-label="Open menu"
+          onClick={() => setMenuOpen(true)}
+          style={{
+            width: 40,
+            height: 40,
+            borderRadius: 10,
+            border: 'none',
+            background: '#f1f5f9',
+            cursor: 'pointer',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 5,
+            flexShrink: 0,
+          }}
+        >
+          <span style={{ width: 18, height: 2, background: '#334155', borderRadius: 1 }} />
+          <span style={{ width: 18, height: 2, background: '#334155', borderRadius: 1 }} />
+          <span style={{ width: 18, height: 2, background: '#334155', borderRadius: 1 }} />
+        </button>
+      </div>
+
+      <div className="cw-scroll" style={{ flex: 1, overflowY: 'auto', padding: '20px 18px 28px' }}>
+        {/* Title + description */}
+        <h1
+          style={{
+            margin: '0 0 8px',
+            fontSize: 24,
+            fontWeight: 800,
+            color: '#0f172a',
+            letterSpacing: '-0.03em',
+            lineHeight: 1.2,
+          }}
+        >
           {config.welcomeTitle}
         </h1>
-        <p style={{ margin:0, fontSize:14, color:'rgba(255,255,255,0.85)', lineHeight:1.6 }}>
+        <p style={{ margin: '0 0 28px', fontSize: 14, color: '#64748b', lineHeight: 1.55 }}>
           {config.welcomeSubtitle}
         </p>
-      </div>
 
-      {/* Cards float over hero */}
-      <div style={{ flex:1, overflowY:'auto', padding:'0 16px 20px', marginTop:-28, display:'flex', flexDirection:'column', gap:10 }}>
-        {cards.map((card, i) => (
+        {/* Continue Conversations */}
+        <h2 style={{ margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }}>Continue Conversations</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
+          {continueItems.length > 0 ? (
+            continueItems.map(t => (
+              <button
+                key={t.id}
+                type="button"
+                onClick={() => onNavigate('ticket')}
+                style={{
+                  width: '100%',
+                  textAlign: 'left',
+                  padding: '14px 16px',
+                  borderRadius: 14,
+                  border: 'none',
+                  background: '#e0f2fe',
+                  color: '#0369a1',
+                  fontSize: 14,
+                  fontWeight: 600,
+                  cursor: 'pointer',
+                  boxShadow: '0 1px 3px rgba(0,0,0,0.06)',
+                }}
+              >
+                {t.title}
+              </button>
+            ))
+          ) : (
+            <>
+              <div
+                style={{
+                  padding: '14px 16px',
+                  borderRadius: 14,
+                  background: '#e0f2fe',
+                  color: '#64748b',
+                  fontSize: 14,
+                  fontWeight: 500,
+                }}
+              >
+                No open tickets yet
+              </div>
+              <div
+                style={{
+                  padding: '14px 16px',
+                  borderRadius: 14,
+                  background: '#e0f2fe',
+                  color: '#64748b',
+                  fontSize: 14,
+                  fontWeight: 500,
+                }}
+              >
+                Start via Raise ticket below
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* Talk to our experts */}
+        <h2 style={{ margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }}>Talk to our experts</h2>
+
+        {showSupport && (
           <button
-            key={card.key}
-            onClick={card.onClick}
+            type="button"
+            onClick={() => onNavigate('support')}
             style={{
-              width:'100%', background:'#fff', border:'none', borderRadius:14,
-              padding:'18px 20px', display:'flex', alignItems:'center',
-              justifyContent:'space-between', cursor:'pointer', textAlign:'left',
-              boxShadow:'0 2px 14px rgba(0,0,0,0.10)',
-              animation:`cw-fadeUp 0.35s ease both`,
-              animationDelay:`${i * 0.08}s`,
-              transition:'transform 0.15s, box-shadow 0.15s',
+              width: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 10,
+              padding: '14px 18px',
+              marginBottom: showChat ? 10 : 14,
+              borderRadius: 14,
+              border: 'none',
+              background: '#ede9fe',
+              color: '#5b21b6',
+              fontSize: 15,
+              fontWeight: 700,
+              cursor: 'pointer',
+              boxShadow: '0 2px 8px rgba(91,33,182,0.12)',
             }}
-            onMouseEnter={e => {
-              (e.currentTarget as HTMLElement).style.transform  = 'translateY(-2px)';
-              (e.currentTarget as HTMLElement).style.boxShadow = '0 8px 24px rgba(0,0,0,0.14)';
+          >
+            <span style={{ fontSize: 18 }}>👤</span>
+            Support
+          </button>
+        )}
+
+        {showChat && showSupport && (
+          <button
+            type="button"
+            onClick={() => onNavigate('conversation')}
+            style={{
+              width: '100%',
+              padding: '12px 16px',
+              marginBottom: 14,
+              borderRadius: 12,
+              border: '1.5px solid #e9d5ff',
+              background: '#fff',
+              color: '#6d28d9',
+              fontSize: 14,
+              fontWeight: 600,
+              cursor: 'pointer',
             }}
-            onMouseLeave={e => {
-              (e.currentTarget as HTMLElement).style.transform  = 'translateY(0)';
-              (e.currentTarget as HTMLElement).style.boxShadow = '0 2px 14px rgba(0,0,0,0.10)';
+          >
+            New Conversation
+          </button>
+        )}
+
+        {showChat && !showSupport && (
+          <button
+            type="button"
+            onClick={() => onNavigate('conversation')}
+            style={{
+              width: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 10,
+              padding: '14px 18px',
+              marginBottom: 14,
+              borderRadius: 14,
+              border: 'none',
+              background: '#ede9fe',
+              color: '#5b21b6',
+              fontSize: 15,
+              fontWeight: 700,
+              cursor: 'pointer',
             }}
           >
-            <div style={{ display:'flex', alignItems:'center', gap:14 }}>
-              <div style={{
-                width:44, height:44, borderRadius:12,
-                backgroundColor:`${config.primaryColor}14`,
-                display:'flex', alignItems:'center', justifyContent:'center',
-                fontSize:20, flexShrink:0,
-              }}>{card.icon}</div>
-              <div>
-                <div style={{ fontWeight:700, fontSize:15, color:'#1a2332', marginBottom:2 }}>{card.title}</div>
-                <div style={{ fontSize:12, color:'#7b8fa1' }}>{card.subtitle}</div>
-              </div>
-            </div>
-            <SendArrow color={config.primaryColor} />
+            <span style={{ fontSize: 18 }}>💬</span>
+            New Conversation
           </button>
-        ))}
+        )}
+
+        <div
+          style={{
+            borderRadius: 18,
+            padding: '22px 20px 20px',
+            background: 'linear-gradient(145deg, #fce7f3 0%, #e9d5ff 45%, #ddd6fe 100%)',
+            position: 'relative',
+            overflow: 'hidden',
+          }}
+        >
+          <div style={{ position: 'absolute', top: -20, right: -20, width: 100, height: 100, borderRadius: '50%', background: 'rgba(255,255,255,0.35)' }} />
+          <p style={{ margin: '0 0 16px', fontSize: 15, fontWeight: 700, color: '#4c1d95', lineHeight: 1.45, position: 'relative' }}>
+            Need specialized help? Our teams are ready to assist you with any questions.
+          </p>
+          <button
+            type="button"
+            onClick={handleCallUs}
+            disabled={!config.supportPhone}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 8,
+              padding: '10px 18px',
+              borderRadius: 12,
+              border: 'none',
+              background: config.supportPhone ? config.primaryColor : '#94a3b8',
+              color: '#fff',
+              fontSize: 14,
+              fontWeight: 700,
+              cursor: config.supportPhone ? 'pointer' : 'not-allowed',
+              position: 'relative',
+            }}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+              <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"
+              />
+            </svg>
+            Call Us
+          </button>
+        </div>
       </div>
     </div>
   );
 };
-
-const SendArrow: React.FC<{ color: string }> = ({ color }) => (
-  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style={{ flexShrink:0 }}>
-    <path d="M5 12h14M12 5l7 7-7 7" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
-  </svg>
-);

package/src/components/SlideNavMenu.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { ChatType, UserListContext } from '../types';
+
+export interface SlideNavMenuProps {
+  open: boolean;
+  onClose: () => void;
+  primaryColor: string;
+  chatType: ChatType;
+  onSelect: (ctx: UserListContext | 'ticket') => void;
+  /** When set, shows “Back to home” at the bottom (e.g. chat screen) */
+  onBackHome?: () => void;
+}
+
+export const SlideNavMenu: React.FC<SlideNavMenuProps> = ({
+  open,
+  onClose,
+  primaryColor,
+  chatType,
+  onSelect,
+  onBackHome,
+}) => {
+  const showSupport = chatType === 'SUPPORT' || chatType === 'BOTH';
+  const showChat = chatType === 'CHAT' || chatType === 'BOTH';
+
+  const items: Array<{ key: UserListContext | 'ticket'; icon: string; title: string } | null> = [
+    showSupport ? { key: 'support', icon: '🛠', title: 'Need Support' } : null,
+    showChat ? { key: 'conversation', icon: '💬', title: 'New Conversation' } : null,
+    { key: 'ticket', icon: '🎫', title: 'Raise ticket' },
+  ];
+
+  if (!open) return null;
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label="Close menu"
+        onClick={onClose}
+        style={{
+          position: 'absolute',
+          inset: 0,
+          zIndex: 200,
+          background: 'rgba(15,23,42,0.45)',
+          border: 'none',
+          cursor: 'pointer',
+          animation: 'cw-fadeIn 0.2s ease',
+        }}
+      />
+      <style>{`@keyframes cw-fadeIn { from { opacity: 0; } to { opacity: 1; } }`}</style>
+      <nav
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          bottom: 0,
+          width: 'min(300px, 88%)',
+          zIndex: 210,
+          background: '#fff',
+          boxShadow: '8px 0 32px rgba(0,0,0,0.12)',
+          display: 'flex',
+          flexDirection: 'column',
+          padding: '20px 0 16px',
+          animation: 'cw-slideNavIn 0.28s cubic-bezier(0.22, 1, 0.36, 1)',
+        }}
+      >
+        <style>{`@keyframes cw-slideNavIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }`}</style>
+        <div style={{ padding: '0 20px 16px', borderBottom: '1px solid #eef0f5' }}>
+          <p style={{ margin: 0, fontSize: 13, fontWeight: 700, color: '#64748b', letterSpacing: '0.04em' }}>Menu</p>
+        </div>
+        <div style={{ flex: 1, overflowY: 'auto', padding: '12px 12px' }}>
+          {items.filter(Boolean).map(item => {
+            const it = item!;
+            return (
+              <button
+                key={it.key}
+                type="button"
+                onClick={() => {
+                  onSelect(it.key);
+                  onClose();
+                }}
+                style={{
+                  width: '100%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 12,
+                  padding: '14px 14px',
+                  marginBottom: 6,
+                  border: 'none',
+                  borderRadius: 12,
+                  background: '#f8fafc',
+                  cursor: 'pointer',
+                  textAlign: 'left',
+                  fontSize: 15,
+                  fontWeight: 600,
+                  color: '#1e293b',
+                  transition: 'background 0.15s',
+                }}
+                onMouseEnter={e => {
+                  (e.currentTarget as HTMLButtonElement).style.background = `${primaryColor}12`;
+                }}
+                onMouseLeave={e => {
+                  (e.currentTarget as HTMLButtonElement).style.background = '#f8fafc';
+                }}
+              >
+                <span style={{ fontSize: 20 }}>{it.icon}</span>
+                {it.title}
+              </button>
+            );
+          })}
+        </div>
+        {onBackHome && (
+          <div style={{ padding: '0 12px', borderTop: '1px solid #eef0f5', paddingTop: 12 }}>
+            <button
+              type="button"
+              onClick={() => {
+                onBackHome();
+                onClose();
+              }}
+              style={{
+                width: '100%',
+                padding: '12px 14px',
+                border: '1.5px solid #e2e8f0',
+                borderRadius: 12,
+                background: '#fff',
+                fontSize: 14,
+                fontWeight: 600,
+                color: '#475569',
+                cursor: 'pointer',
+              }}
+            >
+              ← Back to home
+            </button>
+          </div>
+        )}
+      </nav>
+    </>
+  );
+};

package/src/config/index.ts

@@ -1,6 +1,10 @@
 import { LocalEnvConfig, RemoteChatData } from '../types';
 
-/** Default JSON endpoint; override with REACT_APP_CHAT_CONFIG_URL / NEXT_PUBLIC_CHAT_CONFIG_URL */
+/**
+ * Default JSON endpoint. Override with `REACT_APP_CHAT_CONFIG_URL` / `NEXT_PUBLIC_CHAT_CONFIG_URL`.
+ * If the remote host does not send CORS headers, set this to a same-origin path (e.g. `/api/chat-config`)
+ * and proxy the JSON from your server — see `examples/next-app-router-chat-proxy.ts`.
+ */
 const DEFAULT_CHAT_DATA_BASE = 'https://window.mscorpres.com/TEST/chatData.json';
 const DEMO_API_KEY   = 'demo1234';
 const DEMO_WIDGET_ID = 'demo';

package/src/index.ts

@@ -9,6 +9,7 @@ export { CallScreen }         from './components/CallScreen';
 export { MaintenanceView }    from './components/MaintenanceView';
 export { BottomTabs }         from './components/Tabs/BottomTabs';
 export { EmojiPicker }        from './components/EmojiPicker';
+export { SlideNavMenu }       from './components/SlideNavMenu';
 
 export { useChat }            from './hooks/useChat';
 export { useWebRTC }          from './hooks/useWebRTC';

package/src/types/index.ts

@@ -9,6 +9,12 @@ export interface WidgetConfig {
   buttonPosition: 'bottom-right' | 'bottom-left';
   welcomeTitle: string;
   welcomeSubtitle: string;
+  /** Shown in footer (e.g. branch / location name) */
+  branch?: string;
+  /** Optional label above branch (e.g. "Answers by") */
+  footerPoweredBy?: string;
+  /** Shown on home “Call Us” (tel: link) */
+  supportPhone?: string;
   allowVoiceMessage: boolean;
   allowAttachment: boolean;
   allowEmoji: boolean;
@@ -69,7 +75,11 @@ export interface ChatMessage {
   status: 'sent' | 'delivered' | 'read';
   attachmentName?: string;
   attachmentSize?: string;
+  /** Blob URL for attachment download (local send) */
+  attachmentUrl?: string;
   voiceDuration?: number;  // seconds
+  /** Blob URL for in-bubble audio playback (local recording) */
+  voiceUrl?: string;
 }
 
 // ─── Ticket ─────────────────────────────────────────────────────────────────