ajaxter-chat 3.0.8 → 3.0.10

package/src/components/ChatWidget.tsx

@@ -1,18 +1,22 @@
 'use client';
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { ChatWidgetProps, BottomTab, Screen, UserListContext, ChatUser, Ticket, RecentChat, ChatMessage } from '../types';
 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';
@@ -43,6 +47,9 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
   const [activeTab,    setActiveTab]    = useState<BottomTab>('home');
   const [screen,       setScreen]       = useState<Screen>('home');
   const [userListCtx,  setUserListCtx]  = useState<UserListContext>('support');
+  const [chatReturnCtx, setChatReturnCtx] = useState<UserListContext>('conversation');
+  const [viewingTicketId, setViewingTicketId] = useState<string | null>(null);
+  const [messageSoundEnabled, setMessageSoundEnabledState] = useState(true);
 
   /* App state */
   const [tickets,      setTickets]      = useState<Ticket[]>(data?.sampleTickets ?? []);
@@ -88,16 +95,81 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
     setIsOpen(true);
   };
 
+  const persistWidgetState = useCallback(() => {
+    const w = data?.widget;
+    if (!w) return;
+    saveSession(w.id, {
+      screen,
+      activeTab,
+      userListCtx,
+      activeUserUid: activeUser?.uid ?? null,
+      messages,
+      viewingTicketId,
+      chatReturnCtx,
+    });
+  }, [data?.widget, screen, activeTab, userListCtx, 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(() => {
+    if (!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(p.viewingTicketId ?? null);
+      setChatReturnCtx(p.chatReturnCtx ?? '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
+            : (data.sampleChats[u.uid] ?? []);
+          selectUser(u, hist);
+        }
+      }
+    }
+    restoredRef.current = true;
+  }, [data, selectUser]);
+
+  useEffect(() => {
+    if (!data?.widget) return;
+    persistWidgetState();
+  }, [data?.widget?.id, screen, activeTab, userListCtx, activeUser?.uid, messages, viewingTicketId, chatReturnCtx, persistWidgetState]);
+
+  const incomingSoundRef = useRef(0);
+  useEffect(() => {
+    incomingSoundRef.current = messages.length;
+  }, [activeUser?.uid]);
+
+  useEffect(() => {
+    if (!messageSoundEnabled || !activeUser || !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?.widget]);
+
+  const toggleMessageSound = useCallback((enabled: boolean) => {
+    const w = data?.widget;
+    if (!w) return;
+    setMessageSoundEnabled(w.id, enabled);
+    setMessageSoundEnabledState(enabled);
+  }, [data?.widget]);
 
   /* ── Navigation ──────────────────────────────────────────────────────── */
   const handleCardClick = useCallback((ctx: UserListContext | 'ticket') => {
@@ -121,18 +193,34 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
     }
   }, [clearChat]);
 
-  const handleSelectUser = useCallback((user: ChatUser) => {
-    // Load history from sample chats if available
+  const listCtxForUser = useCallback((user: ChatUser, viewerIsDev: boolean): UserListContext => {
+    if (viewerIsDev) return user.type === 'user' ? 'support' : 'conversation';
+    return user.type === 'developer' ? 'support' : 'conversation';
+  }, []);
+
+  const handleSelectUser = useCallback((user: ChatUser, returnCtxOverride?: UserListContext) => {
+    setChatReturnCtx(returnCtxOverride ?? userListCtx);
     const history = data?.sampleChats[user.uid] ?? [];
     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: string) => {
+    setViewingTicketId(id);
+    setScreen('ticket-detail');
+    setActiveTab('tickets');
+  }, []);
 
   const handleTabChange = useCallback((tab: BottomTab) => {
     setActiveTab(tab);
@@ -144,7 +232,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
     if (!activeUser) return;
     setBlockedUids(prev => [...prev, activeUser.uid]);
     clearChat();
-    setScreen('home');
+    setScreen('block-list');
     setActiveTab('home');
   }, [activeUser, clearChat]);
 
@@ -161,7 +249,10 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ 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 ──────────────────────────────── */
@@ -412,7 +503,12 @@ 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} tickets={tickets} />
+                    <HomeScreen
+                      config={widgetConfig}
+                      onNavigate={handleCardClick}
+                      onOpenTicket={handleOpenTicket}
+                      tickets={tickets}
+                    />
                   )}
 
                   {screen === 'user-list' && (
@@ -423,6 +519,8 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
                       viewerType={widgetConfig.viewerType ?? 'user'}
                       onBack={() => setScreen('home')}
                       onSelectUser={handleSelectUser}
+                      onBlockList={userListCtx === 'conversation' ? () => setScreen('block-list') : undefined}
+                      useHomeHeader={userListCtx === 'support' && widgetConfig.viewerType !== 'developer'}
                     />
                   )}
 
@@ -435,7 +533,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
                       isReported={isReported}
                       isBlocked={isBlocked}
                       onSend={sendMessage}
-                      onBack={() => { clearChat(); setScreen('home'); setActiveTab('home'); }}
+                      onBack={handleBackFromChat}
                       onClose={closeDrawer}
                       onTogglePause={handleTogglePause}
                       onReport={reportChat}
@@ -444,6 +542,8 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
                       onNavAction={handleNavFromMenu}
                       otherDevelopers={otherDevelopers}
                       onTransferToDeveloper={handleTransferToDeveloper}
+                      messageSoundEnabled={messageSoundEnabled}
+                      onToggleMessageSound={toggleMessageSound}
                     />
                   )}
 
@@ -463,7 +563,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
                     <RecentChatsScreen
                       chats={recentChats}
                       config={widgetConfig}
-                      onSelectChat={handleSelectUser}
+                      onSelectChat={u => handleSelectUser(u, listCtxForUser(u, viewerIsDev))}
                     />
                   )}
 
@@ -471,10 +571,32 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
                     <TicketScreen
                       tickets={tickets}
                       config={widgetConfig}
-                      onRaiseTicket={handleRaiseTicket}
+                      onNewTicket={() => setScreen('ticket-new')}
+                      onSelectTicket={id => { setViewingTicketId(id); setScreen('ticket-detail'); }}
                     />
                   )}
 
+                  {screen === 'ticket-new' && (
+                    <TicketFormScreen
+                      config={widgetConfig}
+                      onSubmit={handleRaiseTicket}
+                      onCancel={() => setScreen('tickets')}
+                    />
+                  )}
+
+                  {screen === 'ticket-detail' && viewingTicketId && (
+                    (() => {
+                      const t = tickets.find(x => x.id === viewingTicketId);
+                      return t ? (
+                        <TicketDetailScreen
+                          ticket={t}
+                          config={widgetConfig}
+                          onBack={() => { setViewingTicketId(null); setScreen('tickets'); }}
+                        />
+                      ) : null;
+                    })()
+                  )}
+
                   {screen === 'block-list' && (
                     <BlockListScreen
                       blockedUsers={blockedUsers}
@@ -491,12 +613,13 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
                screen !== 'chat' &&
                screen !== 'call' &&
                screen !== 'user-list' &&
-               screen !== 'block-list' && (
+               screen !== 'block-list' &&
+               screen !== 'ticket-detail' &&
+               screen !== 'ticket-new' && (
                 <BottomTabs
                   active={activeTab}
                   onChange={handleTabChange}
                   primaryColor={primaryColor}
-                  onBlockList={() => setScreen('block-list')}
                 />
               )}
             </>

package/src/components/HomeScreen/index.tsx

@@ -6,10 +6,12 @@ import { truncateWords } from '../../utils/chat';
 interface HomeScreenProps {
   config: WidgetConfig;
   onNavigate: (ctx: UserListContext | 'ticket') => void;
+  /** Open a specific pending ticket (full detail) */
+  onOpenTicket: (ticketId: string) => void;
   tickets: Ticket[];
 }
 
-export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, tickets }) => {
+export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, onOpenTicket, tickets }) => {
   const [menuOpen, setMenuOpen] = useState(false);
   const showSupport = config.chatType === 'SUPPORT' || config.chatType === 'BOTH';
   const showChat = config.chatType === 'CHAT' || config.chatType === 'BOTH';
@@ -110,7 +112,7 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, tick
               <button
                 key={t.id}
                 type="button"
-                onClick={() => onNavigate('ticket')}
+                onClick={() => onOpenTicket(t.id)}
                 style={{
                   width: '100%',
                   textAlign: 'left',

package/src/components/Tabs/BottomTabs.tsx

@@ -5,10 +5,9 @@ interface BottomTabsProps {
   active:       BottomTab;
   onChange:     (tab: BottomTab) => void;
   primaryColor: string;
-  onBlockList:  () => void;
 }
 
-export const BottomTabs: React.FC<BottomTabsProps> = ({ active, onChange, primaryColor, onBlockList }) => {
+export const BottomTabs: React.FC<BottomTabsProps> = ({ active, onChange, primaryColor }) => {
   const tabs: { key: BottomTab; label: string; Icon: React.FC<{ a: boolean; c: string }> }[] = [
     { key: 'home',    label: 'Home',    Icon: HomeIcon    },
     { key: 'chats',   label: 'Chats',   Icon: ChatsIcon   },
@@ -25,6 +24,7 @@ export const BottomTabs: React.FC<BottomTabsProps> = ({ active, onChange, primar
         return (
           <button
             key={tab.key}
+            type="button"
             onClick={() => onChange(tab.key)}
             style={{
               flex: 1, padding: '10px 0 8px',
@@ -42,26 +42,6 @@ export const BottomTabs: React.FC<BottomTabsProps> = ({ active, onChange, primar
           </button>
         );
       })}
-
-      {/* Block list icon */}
-      <button
-        onClick={onBlockList}
-        style={{
-          padding: '10px 14px 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"
-      >
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
-          <circle cx="12" cy="12" r="10" stroke="#b0bec5" strokeWidth="1.8" />
-          <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" stroke="#b0bec5" strokeWidth="1.8" strokeLinecap="round" />
-        </svg>
-        Blocked
-      </button>
     </div>
   );
 };

package/src/components/TicketDetailScreen/index.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { Ticket, WidgetConfig } from '../../types';
+
+interface TicketDetailScreenProps {
+  ticket: Ticket;
+  config: WidgetConfig;
+  onBack: () => void;
+}
+
+const sm: Record<Ticket['status'], { label: string; bg: string; color: string }> = {
+  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: Record<Ticket['priority'], { label: string; color: string }> = {
+  low:    { label: 'Low',    color: '#6b7280' },
+  medium: { label: 'Medium', color: '#d97706' },
+  high:   { label: 'High',   color: '#ef4444' },
+};
+
+export const TicketDetailScreen: React.FC<TicketDetailScreenProps> = ({ 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 (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideIn 0.22s ease' }}>
+      <div
+        style={{
+          background: `linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
+          padding: '14px 18px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          flexShrink: 0,
+        }}
+      >
+        <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,
+          }}
+        >
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+            <path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </button>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ fontWeight: 800, fontSize: 16, color: '#fff', lineHeight: 1.25 }}>{ticket.title}</div>
+          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.85)', marginTop: 2 }}>#{ticket.id}</div>
+        </div>
+      </div>
+
+      <div className="cw-scroll" style={{ flex: 1, overflowY: 'auto', padding: '20px 18px' }}>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 16 }}>
+          <span
+            style={{
+              fontSize: 11,
+              fontWeight: 700,
+              padding: '5px 12px',
+              borderRadius: 20,
+              backgroundColor: stBg,
+              color: stColor,
+              textTransform: 'uppercase',
+              letterSpacing: '0.04em',
+            }}
+          >
+            {st.label}
+          </span>
+          <span style={{ fontSize: 11, fontWeight: 700, padding: '5px 12px', borderRadius: 20, color: pr.color, background: `${pr.color}15` }}>
+            ● {pr.label} priority
+          </span>
+        </div>
+
+        <h3 style={{ margin: '0 0 8px', fontSize: 13, fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
+          Description
+        </h3>
+        <p style={{ margin: '0 0 24px', fontSize: 15, color: '#1e293b', lineHeight: 1.65, whiteSpace: 'pre-wrap' }}>
+          {ticket.description || '—'}
+        </p>
+
+        <div style={{ fontSize: 13, color: '#94a3b8', display: 'grid', gap: 8 }}>
+          <div>
+            <strong style={{ color: '#64748b' }}>Created</strong> · {new Date(ticket.createdAt).toLocaleString()}
+          </div>
+          <div>
+            <strong style={{ color: '#64748b' }}>Updated</strong> · {new Date(ticket.updatedAt).toLocaleString()}
+          </div>
+          {ticket.assignedTo && (
+            <div>
+              <strong style={{ color: '#64748b' }}>Assigned</strong> · {ticket.assignedTo}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/TicketFormScreen/index.tsx

@@ -0,0 +1,151 @@
+import React, { useState } from 'react';
+import { Ticket, WidgetConfig } from '../../types';
+
+interface TicketFormScreenProps {
+  config: WidgetConfig;
+  onSubmit: (title: string, desc: string, priority: Ticket['priority']) => void;
+  onCancel: () => void;
+}
+
+function inputStyle(primaryColor: string): React.CSSProperties {
+  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: React.FC<TicketFormScreenProps> = ({ config, onSubmit, onCancel }) => {
+  const [title, setTitle] = useState('');
+  const [desc, setDesc] = useState('');
+  const [priority, setPriority] = useState<Ticket['priority']>('medium');
+
+  const pm: Record<Ticket['priority'], { label: string; color: string }> = {
+    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 (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: '#fff', minHeight: 0 }}>
+      <div
+        style={{
+          background: `linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
+          padding: '14px 18px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          flexShrink: 0,
+        }}
+      >
+        <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',
+          }}
+        >
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+            <path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </button>
+        <div>
+          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 800, color: '#fff' }}>New ticket</h2>
+          <p style={{ margin: '4px 0 0', fontSize: 12, color: 'rgba(255,255,255,0.85)' }}>Describe your issue below</p>
+        </div>
+      </div>
+
+      <div className="cw-scroll" style={{ flex: 1, overflowY: 'auto', padding: '20px 18px', minHeight: 0 }}>
+        <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={5}
+          style={{ ...inputStyle(config.primaryColor), resize: 'none', marginTop: 12 }}
+          onFocus={e => (e.target.style.borderColor = config.primaryColor)}
+          onBlur={e => (e.target.style.borderColor = '#e5e7eb')}
+        />
+        <div style={{ display: 'flex', gap: 8, marginTop: 12, paddingBottom: 8 }}>
+          {(['low', 'medium', 'high'] as Ticket['priority'][]).map(p => (
+            <button
+              key={p}
+              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',
+              }}
+            >
+              {pm[p].label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div
+        style={{
+          flexShrink: 0,
+          padding: '12px 18px 18px',
+          borderTop: '1px solid #eef0f5',
+          background: '#fff',
+          boxShadow: '0 -4px 20px rgba(15,23,42,0.06)',
+        }}
+      >
+        <button
+          type="button"
+          onClick={handleSubmit}
+          disabled={!title.trim()}
+          style={{
+            width: '100%',
+            padding: '14px',
+            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',
+          }}
+        >
+          Submit ticket
+        </button>
+      </div>
+    </div>
+  );
+};