ajaxter-chat 3.0.8 → 3.0.10

package/src/components/TicketScreen/index.tsx

@@ -1,24 +1,14 @@
-import React, { useState } from 'react';
+import React from 'react';
 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 const TicketScreen: React.FC<TicketScreenProps> = ({ tickets, config, onRaiseTicket }) => {
-  const [showForm,  setShowForm]  = useState(false);
-  const [title,     setTitle]     = useState('');
-  const [desc,      setDesc]      = useState('');
-  const [priority,  setPriority]  = useState<Ticket['priority']>('medium');
-
-  const handleSubmit = () => {
-    if (!title.trim()) return;
-    onRaiseTicket(title.trim(), desc.trim(), priority);
-    setTitle(''); setDesc(''); setPriority('medium'); setShowForm(false);
-  };
-
+export const TicketScreen: React.FC<TicketScreenProps> = ({ tickets, config, onNewTicket, onSelectTicket }) => {
   const sm: Record<Ticket['status'], { label: string; bg: string; color: string }> = {
     open:          { label:'Open',        bg:`${config.primaryColor}14`, color: config.primaryColor },
     'in-progress': { label:'In Progress', bg:'#fef3c7',                  color:'#d97706'            },
@@ -34,7 +24,6 @@ export const TicketScreen: React.FC<TicketScreenProps> = ({ tickets, config, onR
 
   return (
     <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
-      {/* Header */}
       <div style={{
         background:`linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
         padding:'18px 18px 22px', flexShrink:0, position:'relative',
@@ -46,46 +35,16 @@ export const TicketScreen: React.FC<TicketScreenProps> = ({ tickets, config, onR
               {tickets.length} ticket{tickets.length!==1?'s':''} raised
             </p>
           </div>
-          <button onClick={() => setShowForm(v => !v)} style={{
+          <button type="button" onClick={onNewTicket} style={{
             background:'rgba(255,255,255,0.22)', border:'none', borderRadius:20,
             padding:'7px 14px', color:'#fff', fontWeight:700, fontSize:13,
             cursor:'pointer', display:'flex', alignItems:'center', gap:5,
           }}>
-            {showForm ? '✕ Cancel' : '+ New'}
+            + New
           </button>
         </div>
       </div>
 
-      {/* New Ticket Form */}
-      {showForm && (
-        <div style={{ padding:'16px', borderBottom:'1px solid #eef0f5', background:'#fafcff', flexShrink:0, animation:'cw-fadeUp 0.2s ease' }}>
-          <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')}
-          />
-          <textarea placeholder="Describe the issue…" value={desc} onChange={e => setDesc(e.target.value)} rows={3}
-            style={{ ...inputStyle(config.primaryColor), resize:'none', marginTop:8 }} onFocus={e=>(e.target.style.borderColor=config.primaryColor)} onBlur={e=>(e.target.style.borderColor='#e5e7eb')}
-          />
-          {/* Priority */}
-          <div style={{ display:'flex', gap:8, marginTop:8, marginBottom:12 }}>
-            {(['low','medium','high'] as Ticket['priority'][]).map(p => (
-              <button key={p} onClick={() => setPriority(p)} style={{
-                flex:1, padding:'6px', 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',
-                transition:'all 0.15s',
-              }}>{pm[p].label}</button>
-            ))}
-          </div>
-          <button onClick={handleSubmit} disabled={!title.trim()} style={{
-            width:'100%', padding:'10px', borderRadius:10, border:'none',
-            background: title.trim() ? config.primaryColor : '#e5e7eb',
-            color: title.trim() ? '#fff' : '#9ca3af',
-            fontWeight:700, fontSize:14, cursor: title.trim() ? 'pointer' : 'not-allowed',
-          }}>Submit Ticket</button>
-        </div>
-      )}
-
-      {/* List */}
       <div style={{ flex:1, overflowY:'auto' }}>
         {tickets.length === 0 ? (
           <div style={{ padding:'50px 24px', textAlign:'center' }}>
@@ -94,7 +53,17 @@ export const TicketScreen: React.FC<TicketScreenProps> = ({ tickets, config, onR
             <div style={{ fontSize:13, color:'#7b8fa1' }}>Raise a ticket for major issues</div>
           </div>
         ) : tickets.map((t, i) => (
-          <div key={t.id} style={{ padding:'14px 16px', borderBottom:'1px solid #f0f2f5', animation:`cw-fadeUp 0.3s ease both`, animationDelay:`${i*0.05}s` }}>
+          <button
+            key={t.id}
+            type="button"
+            onClick={() => onSelectTicket(t.id)}
+            style={{
+              width:'100%', padding:'14px 16px', borderBottom:'1px solid #f0f2f5',
+              animation:`cw-fadeUp 0.3s ease both`, animationDelay:`${i*0.05}s`,
+              background:'transparent', borderLeft:'none', borderRight:'none', borderTop:'none',
+              cursor:'pointer', textAlign:'left', fontFamily:'inherit',
+            }}
+          >
             <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', marginBottom:5 }}>
               <span style={{ fontWeight:700, fontSize:14, color:'#1a2332', flex:1, paddingRight:10 }}>{t.title}</span>
               <span style={{ fontSize:10, fontWeight:700, padding:'3px 9px', borderRadius:20, backgroundColor:sm[t.status].bg, color:sm[t.status].color, whiteSpace:'nowrap', textTransform:'uppercase', letterSpacing:'0.04em', flexShrink:0 }}>
@@ -107,18 +76,9 @@ export const TicketScreen: React.FC<TicketScreenProps> = ({ tickets, config, onR
               <span>#{t.id}</span>
               <span>{new Date(t.createdAt).toLocaleDateString([], { month:'short', day:'numeric' })}</span>
             </div>
-          </div>
+          </button>
         ))}
       </div>
     </div>
   );
 };
-
-function inputStyle(primaryColor: string): React.CSSProperties {
-  return {
-    width:'100%', padding:'9px 13px', borderRadius:10,
-    border:'1.5px solid #e5e7eb', outline:'none',
-    fontSize:14, color:'#1a2332', boxSizing:'border-box',
-    fontFamily:'inherit', transition:'border-color 0.2s',
-  };
-}

package/src/components/UserListScreen/index.tsx

@@ -10,10 +10,15 @@ interface UserListScreenProps {
   viewerType?: 'user' | 'developer';
   onBack: () => void;
   onSelectUser: (user: ChatUser) => void;
+  /** Shown on “New Conversation” list — opens block list */
+  onBlockList?: () => void;
+  /** “Need Support” (user → agents): show home icon instead of back arrow */
+  useHomeHeader?: boolean;
 }
 
 export const UserListScreen: React.FC<UserListScreenProps> = ({
-  context, users, primaryColor, viewerType = 'user', onBack, onSelectUser,
+  context, users, primaryColor, viewerType = 'user', onBack, onSelectUser, onBlockList,
+  useHomeHeader = false,
 }) => {
   const isStaff = viewerType === 'developer';
   const title    = context === 'support'
@@ -26,12 +31,39 @@ export const UserListScreen: React.FC<UserListScreenProps> = ({
   return (
     <div style={{ display:'flex', flexDirection:'column', height:'100%', animation:'cw-slideIn 0.22s ease' }}>
       {/* Header */}
-      <div style={{ background:`linear-gradient(135deg,${primaryColor},${primaryColor}cc)`, padding:'14px 18px', display:'flex', alignItems:'center', gap:12, flexShrink:0 }}>
-        <BackBtn onClick={onBack} />
-        <div>
+      <div style={{ background:`linear-gradient(135deg,${primaryColor},${primaryColor}cc)`, padding:'14px 18px', display:'flex', alignItems:'center', gap:12, flexShrink:0, position:'relative' }}>
+        {useHomeHeader ? <HomeBtn onClick={onBack} /> : <BackBtn onClick={onBack} />}
+        <div style={{ flex: 1, minWidth: 0 }}>
           <div style={{ fontWeight:700, fontSize:16, color:'#fff' }}>{title}</div>
           <div style={{ fontSize:12, color:'rgba(255,255,255,0.8)' }}>{subtitle}</div>
         </div>
+        {context === 'conversation' && onBlockList && (
+          <button
+            type="button"
+            onClick={onBlockList}
+            style={{
+              flexShrink: 0,
+              background: 'rgba(255,255,255,0.2)',
+              border: 'none',
+              borderRadius: 10,
+              padding: '8px 12px',
+              color: '#fff',
+              fontSize: 12,
+              fontWeight: 700,
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+            }}
+            title="Blocked users"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+              <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.8" />
+              <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+            </svg>
+            Blocked
+          </button>
+        )}
       </div>
 
       {/* User list */}
@@ -90,7 +122,7 @@ export const UserListScreen: React.FC<UserListScreenProps> = ({
 };
 
 const BackBtn: React.FC<{ onClick: () => void }> = ({ onClick }) => (
-  <button onClick={onClick} style={{
+  <button type="button" onClick={onClick} style={{
     background:'rgba(255,255,255,0.22)', border:'none', borderRadius:'50%',
     width:32, height:32, display:'flex', alignItems:'center', justifyContent:'center',
     cursor:'pointer', flexShrink:0,
@@ -101,6 +133,20 @@ const BackBtn: React.FC<{ onClick: () => void }> = ({ onClick }) => (
   </button>
 );
 
+const HomeBtn: React.FC<{ onClick: () => void }> = ({ onClick }) => (
+  <button type="button" onClick={onClick} title="Home" aria-label="Home" style={{
+    background:'rgba(255,255,255,0.22)', border:'none', borderRadius:'50%',
+    width:32, height:32, display:'flex', alignItems:'center', justifyContent:'center',
+    cursor:'pointer', flexShrink:0,
+  }}>
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+      <path d="M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H4a1 1 0 01-1-1V9.5z"
+        stroke="#fff" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M9 21V12h6v9" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  </button>
+);
+
 const Empty: React.FC = () => (
   <div style={{ padding:'50px 24px', textAlign:'center' }}>
     <div style={{ fontSize:36, marginBottom:10 }}>👥</div>

package/src/types/index.ts

@@ -65,6 +65,8 @@ export type Screen       =
   | 'chat'
   | 'recent-chats'
   | 'tickets'
+  | 'ticket-new'
+  | 'ticket-detail'
   | 'block-list'
   | 'call';
 export type UserListContext = 'support' | 'conversation';
@@ -96,6 +98,8 @@ export interface ChatMessage {
   attachmentSize?: string;
   /** Blob URL for attachment download (local send) */
   attachmentUrl?: string;
+  /** e.g. image/png — used for inline image preview in bubbles */
+  attachmentMime?: string;
   voiceDuration?: number;  // seconds
   /** Blob URL for in-bubble audio playback (local recording) */
   voiceUrl?: string;

package/src/utils/fileName.ts

@@ -0,0 +1,6 @@
+/** Display name: first 10 chars + "[...]" if longer; full name in tooltip via title */
+export function shortAttachmentLabel(fileName: string, maxChars = 10): string {
+  const n = fileName.trim();
+  if (n.length <= maxChars) return n;
+  return `${n.slice(0, maxChars)}[...]`;
+}

package/src/utils/messageSound.ts

@@ -0,0 +1,47 @@
+/** Short notification tone for incoming chat messages */
+export function playMessageSound(): void {
+  try {
+    const AC = window.AudioContext || (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+    if (!AC) return;
+    const ctx = new AC();
+    const o = ctx.createOscillator();
+    const g = ctx.createGain();
+    o.connect(g);
+    g.connect(ctx.destination);
+    o.type = 'sine';
+    o.frequency.value = 880;
+    g.gain.value = 0.07;
+    o.start();
+    setTimeout(() => {
+      try {
+        o.stop();
+        void ctx.close();
+      } catch {
+        /* ignore */
+      }
+    }, 100);
+  } catch {
+    /* ignore */
+  }
+}
+
+const soundPrefKey = (widgetId: string) => `ajaxter_sound_${widgetId}`;
+
+export function getMessageSoundEnabled(widgetId: string): boolean {
+  if (typeof window === 'undefined') return true;
+  try {
+    const v = localStorage.getItem(soundPrefKey(widgetId));
+    if (v === null) return true;
+    return v === '1';
+  } catch {
+    return true;
+  }
+}
+
+export function setMessageSoundEnabled(widgetId: string, enabled: boolean): void {
+  try {
+    localStorage.setItem(soundPrefKey(widgetId), enabled ? '1' : '0');
+  } catch {
+    /* ignore */
+  }
+}

package/src/utils/widgetSession.ts

@@ -0,0 +1,34 @@
+import { Screen, BottomTab, UserListContext, ChatMessage } from '../types';
+
+export interface PersistedWidgetSession {
+  screen: Screen;
+  activeTab: BottomTab;
+  userListCtx: UserListContext;
+  activeUserUid: string | null;
+  messages: ChatMessage[];
+  viewingTicketId: string | null;
+  chatReturnCtx: UserListContext;
+}
+
+export function sessionKey(widgetId: string): string {
+  return `ajaxter_widget_session_${widgetId}`;
+}
+
+export function loadSession(widgetId: string): PersistedWidgetSession | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const raw = sessionStorage.getItem(sessionKey(widgetId));
+    if (!raw) return null;
+    return JSON.parse(raw) as PersistedWidgetSession;
+  } catch {
+    return null;
+  }
+}
+
+export function saveSession(widgetId: string, state: PersistedWidgetSession): void {
+  try {
+    sessionStorage.setItem(sessionKey(widgetId), JSON.stringify(state));
+  } catch {
+    /* quota */
+  }
+}