ajaxter-chat 1.0.3 → 2.0.1

package/src/components/ChatWidget.tsx

@@ -0,0 +1,327 @@
+'use client';
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { ChatWidgetProps, BottomTab, Screen, UserListContext, ChatUser, Ticket } from '../types';
+import { loadChatConfig, buildUserListUrl } from '../config';
+import { mergeTheme } from '../utils/theme';
+import { useUsers } from '../hooks/useUsers';
+import { useChat } from '../hooks/useChat';
+
+// Screens
+import { HomeScreen }        from './HomeScreen';
+import { UserListScreen }    from './UserListScreen';
+import { ChatScreen }        from './ChatScreen';
+import { RecentChatsScreen } from './RecentChatsScreen';
+import { TicketScreen }      from './TicketScreen';
+import { MaintenanceView }   from './MaintenanceView';
+import { BottomTabs }        from './Tabs/BottomTabs';
+
+export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme }) => {
+  const [isMounted, setIsMounted]       = useState(false);
+  const [isOpen, setIsOpen]             = useState(false);
+  const [isMaximized, setIsMaximized]   = useState(false);
+  const [activeTab, setActiveTab]       = useState<BottomTab>('home');
+  const [screen, setScreen]             = useState<Screen>('home');
+  const [userListCtx, setUserListCtx]   = useState<UserListContext>('support');
+  const [tickets, setTickets]           = useState<Ticket[]>([]);
+
+  // SSR guard
+  useEffect(() => { setIsMounted(true); }, []);
+
+  const config = loadChatConfig();
+  const t      = mergeTheme(theme);
+  const apiUrl = buildUserListUrl(config);
+
+  // Determine filter based on context
+  const filterType = userListCtx === 'support' ? 'developer' : 'user';
+  const { users, loading, error } = useUsers(
+    apiUrl,
+    filterType,
+    config.status === 'ACTIVE' && screen === 'user-list'
+  );
+
+  const { messages, activeUser, selectUser, sendMessage, clearChat } = useChat();
+
+  // ── Navigation helpers ─────────────────────────────────────────────────────
+  const goHome = useCallback(() => { setScreen('home'); setActiveTab('home'); }, []);
+
+  const handleTabChange = useCallback((tab: BottomTab) => {
+    setActiveTab(tab);
+    if (tab === 'home')    { setScreen('home');         }
+    if (tab === 'chats')   { setScreen('recent-chats'); }
+    if (tab === 'tickets') { setScreen('tickets');      }
+  }, []);
+
+  const handleCardClick = useCallback((ctx: UserListContext | 'ticket') => {
+    if (ctx === 'ticket') {
+      setActiveTab('tickets');
+      setScreen('tickets');
+    } else {
+      setUserListCtx(ctx as UserListContext);
+      setScreen('user-list');
+    }
+  }, []);
+
+  const handleSelectUser = useCallback((user: ChatUser) => {
+    selectUser(user);
+    setScreen('chat');
+  }, [selectUser]);
+
+  const handleBackFromUserList = useCallback(() => {
+    setScreen('home');
+  }, []);
+
+  const handleBackFromChat = useCallback(() => {
+    clearChat();
+    setScreen('user-list');
+  }, [clearChat]);
+
+  const handleRaiseTicket = useCallback((title: string, description: string) => {
+    const t: Ticket = {
+      id:          `ticket_${Date.now()}`,
+      title,
+      description,
+      status:      'open',
+      priority:    'medium',
+      createdAt:   new Date(),
+      updatedAt:   new Date(),
+    };
+    setTickets(prev => [t, ...prev]);
+  }, []);
+
+  // ── Sizing ─────────────────────────────────────────────────────────────────
+  const normalW  = 380;
+  const normalH  = 560;
+  const maxW     = 480;
+  const maxH     = 720;
+
+  const width  = isMaximized ? maxW  : normalW;
+  const height = isMaximized ? maxH  : normalH;
+
+  const posStyle: React.CSSProperties = t.buttonPosition === 'bottom-left'
+    ? { left: 24, right: 'auto' }
+    : { right: 24, left: 'auto' };
+
+  if (!isMounted)            return null;
+  if (config.status === 'DISABLE') return null;
+
+  return (
+    <>
+      {/* ── Global keyframes ── */}
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
+        @keyframes cw-fadeUp {
+          from { opacity:0; transform:translateY(10px); }
+          to   { opacity:1; transform:translateY(0);    }
+        }
+        @keyframes cw-slideInRight {
+          from { opacity:0; transform:translateX(18px); }
+          to   { opacity:1; transform:translateX(0);    }
+        }
+        @keyframes cw-popIn {
+          from { opacity:0; transform:scale(0.88) translateY(16px); }
+          to   { opacity:1; transform:scale(1)    translateY(0);    }
+        }
+        .cw-scrollbar::-webkit-scrollbar { width:4px; }
+        .cw-scrollbar::-webkit-scrollbar-track { background:transparent; }
+        .cw-scrollbar::-webkit-scrollbar-thumb { background:#e0e0e0; border-radius:4px; }
+      `}</style>
+
+      {/* ── Floating Button ── */}
+      <button
+        onClick={() => setIsOpen(o => !o)}
+        aria-label={isOpen ? 'Close chat' : t.buttonLabel}
+        style={{
+          position: 'fixed',
+          bottom: 24,
+          ...posStyle,
+          zIndex: 9999,
+          display: 'flex', alignItems: 'center', gap: 10,
+          padding: isOpen ? '14px' : '13px 22px',
+          backgroundColor: t.buttonColor,
+          color: t.buttonTextColor,
+          border: 'none', borderRadius: 50,
+          cursor: 'pointer',
+          fontFamily: t.fontFamily,
+          fontSize: '15px', fontWeight: 700,
+          boxShadow: `0 8px 28px ${t.buttonColor}55`,
+          transition: 'all 0.3s cubic-bezier(0.34,1.56,0.64,1)',
+          transform: isOpen ? 'scale(0.94)' : 'scale(1)',
+          minWidth: isOpen ? 50 : 'auto',
+          justifyContent: 'center',
+        }}
+        onMouseEnter={e => {
+          if (!isOpen) {
+            (e.currentTarget as HTMLElement).style.transform = 'scale(1.06) translateY(-2px)';
+            (e.currentTarget as HTMLElement).style.boxShadow = `0 12px 36px ${t.buttonColor}77`;
+          }
+        }}
+        onMouseLeave={e => {
+          (e.currentTarget as HTMLElement).style.transform = isOpen ? 'scale(0.94)' : 'scale(1)';
+          (e.currentTarget as HTMLElement).style.boxShadow = `0 8px 28px ${t.buttonColor}55`;
+        }}
+      >
+        {isOpen
+          ? <CloseIcon color={t.buttonTextColor} />
+          : <><ChatBubbleIcon color={t.buttonTextColor} /><span>{t.buttonLabel}</span></>
+        }
+      </button>
+
+      {/* ── Chat Window ── */}
+      {isOpen && (
+        <div
+          style={{
+            position: 'fixed',
+            bottom: 86,
+            ...posStyle,
+            zIndex: 9998,
+            width,
+            height,
+            maxWidth:  'calc(100vw - 32px)',
+            maxHeight: 'calc(100vh - 110px)',
+            backgroundColor: '#fff',
+            borderRadius: t.borderRadius,
+            boxShadow: '0 20px 70px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.08)',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+            fontFamily: t.fontFamily,
+            animation: 'cw-popIn 0.3s cubic-bezier(0.34,1.56,0.64,1)',
+            transition: 'width 0.3s ease, height 0.3s ease',
+          }}
+        >
+          {/* Resize toggle button */}
+          {screen !== 'chat' && (
+            <button
+              onClick={() => setIsMaximized(m => !m)}
+              title={isMaximized ? 'Minimize' : 'Maximize'}
+              style={{
+                position: 'absolute', top: 12, right: 48, zIndex: 10,
+                background: 'rgba(255,255,255,0.22)', border: 'none', borderRadius: '50%',
+                width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                cursor: 'pointer', transition: 'background 0.15s',
+              }}
+              onMouseEnter={e => (e.currentTarget as HTMLElement).style.background = 'rgba(255,255,255,0.38)'}
+              onMouseLeave={e => (e.currentTarget as HTMLElement).style.background = 'rgba(255,255,255,0.22)'}
+            >
+              {isMaximized
+                ? <MinimizeIcon />
+                : <MaximizeIcon />
+              }
+            </button>
+          )}
+
+          {/* Close button (top-right X) */}
+          {screen !== 'chat' && (
+            <button
+              onClick={() => setIsOpen(false)}
+              title="Close"
+              style={{
+                position: 'absolute', top: 12, right: 12, zIndex: 10,
+                background: 'rgba(255,255,255,0.22)', border: 'none', borderRadius: '50%',
+                width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                cursor: 'pointer',
+              }}
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+                <path d="M18 6L6 18M6 6l12 12" stroke="#fff" strokeWidth="2.5" strokeLinecap="round"/>
+              </svg>
+            </button>
+          )}
+
+          {/* ── Screen Router ── */}
+          <div className="cw-scrollbar" style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+
+            {config.status === 'MAINTENANCE' && (
+              <MaintenanceView primaryColor={t.primaryColor} fontFamily={t.fontFamily} />
+            )}
+
+            {config.status === 'ACTIVE' && (
+              <>
+                {screen === 'home' && (
+                  <HomeScreen config={config} theme={theme} onNavigate={handleCardClick} />
+                )}
+
+                {screen === 'user-list' && (
+                  <UserListScreen
+                    context={userListCtx}
+                    users={users}
+                    loading={loading}
+                    error={error}
+                    theme={theme}
+                    onBack={handleBackFromUserList}
+                    onSelectUser={handleSelectUser}
+                  />
+                )}
+
+                {screen === 'chat' && activeUser && (
+                  <ChatScreen
+                    activeUser={activeUser}
+                    messages={messages}
+                    onSend={sendMessage}
+                    onBack={handleBackFromChat}
+                    onClose={() => setIsOpen(false)}
+                    theme={theme}
+                  />
+                )}
+
+                {screen === 'recent-chats' && (
+                  <RecentChatsScreen
+                    chats={[]}
+                    theme={theme}
+                    onSelectChat={handleSelectUser}
+                  />
+                )}
+
+                {screen === 'tickets' && (
+                  <TicketScreen
+                    tickets={tickets}
+                    theme={theme}
+                    onRaiseTicket={handleRaiseTicket}
+                  />
+                )}
+              </>
+            )}
+          </div>
+
+          {/* ── Bottom Tabs (hidden in chat screen) ── */}
+          {screen !== 'chat' && screen !== 'user-list' && config.status !== 'MAINTENANCE' && (
+            <BottomTabs
+              active={activeTab}
+              onChange={handleTabChange}
+              primaryColor={t.primaryColor}
+              fontFamily={t.fontFamily}
+            />
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ChatWidget;
+
+// ── Tiny SVG icons ─────────────────────────────────────────────────────────────
+const ChatBubbleIcon: React.FC<{ color: string }> = ({ color }) => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+    <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"
+      stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+const CloseIcon: React.FC<{ color: string }> = ({ color }) => (
+  <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+    <path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="2.5" strokeLinecap="round"/>
+  </svg>
+);
+const MaximizeIcon = () => (
+  <svg width="13" height="13" 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>
+);
+const MinimizeIcon = () => (
+  <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
+    <path d="M8 3v5H3M21 8h-5V3M3 16h5v5M16 21v-5h5"
+      stroke="#fff" strokeWidth="2.2" strokeLinecap="round"/>
+  </svg>
+);

package/src/components/HomeScreen/index.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { ChatConfig, ChatWidgetTheme, UserListContext } from '../../types';
+import { mergeTheme } from '../../utils/theme';
+
+interface HomeScreenProps {
+  config: ChatConfig;
+  theme?: ChatWidgetTheme;
+  onNavigate: (ctx: UserListContext | 'ticket') => void;
+}
+
+export const HomeScreen: React.FC<HomeScreenProps> = ({ config, theme, onNavigate }) => {
+  const t = mergeTheme(theme);
+  const showSupport      = config.chatType === 'SUPPORT' || config.chatType === 'BOTH';
+  const showConversation = config.chatType === 'CHAT'    || config.chatType === 'BOTH';
+
+  const cards = [
+    showSupport && {
+      key:      'support' as UserListContext,
+      title:    'Need Support',
+      subtitle: 'We typically reply in a few minutes',
+      onClick:  () => onNavigate('support'),
+    },
+    showConversation && {
+      key:      'conversation' as UserListContext,
+      title:    'New Conversation',
+      subtitle: 'With your colleague',
+      onClick:  () => onNavigate('conversation'),
+    },
+    // Raise Ticket is always shown
+    {
+      key:      'ticket' as const,
+      title:    'Raise Ticket',
+      subtitle: 'For major changes',
+      onClick:  () => onNavigate('ticket'),
+    },
+  ].filter(Boolean) as Array<{ key: string; title: string; subtitle: string; onClick: () => void }>;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      {/* Teal hero header */}
+      <div
+        style={{
+          backgroundColor: t.primaryColor,
+          padding: '32px 24px 40px',
+          flexShrink: 0,
+        }}
+      >
+        <h1
+          style={{
+            margin: '0 0 8px',
+            fontSize: '28px',
+            fontWeight: 800,
+            color: '#fff',
+            letterSpacing: '-0.03em',
+            fontFamily: t.fontFamily,
+          }}
+        >
+          Hi there 👋
+        </h1>
+        <p style={{ margin: 0, fontSize: '15px', color: 'rgba(255,255,255,0.85)', fontFamily: t.fontFamily }}>
+          Need help? start a conversation:
+        </p>
+      </div>
+
+      {/* Cards — float over the header with negative margin trick */}
+      <div
+        style={{
+          flex: 1,
+          overflowY: 'auto',
+          padding: '0 16px 16px',
+          marginTop: '-24px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '10px',
+        }}
+      >
+        {cards.map((card, i) => (
+          <button
+            key={card.key}
+            onClick={card.onClick}
+            style={{
+              width: '100%',
+              background: '#fff',
+              border: 'none',
+              borderRadius: '14px',
+              padding: '18px 20px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              cursor: 'pointer',
+              textAlign: 'left',
+              boxShadow: '0 2px 12px rgba(0,0,0,0.09)',
+              transition: 'transform 0.15s ease, box-shadow 0.15s ease',
+              animation: `cw-fadeUp 0.35s ease both`,
+              animationDelay: `${i * 0.08}s`,
+              fontFamily: t.fontFamily,
+            }}
+            onMouseEnter={e => {
+              (e.currentTarget as HTMLElement).style.transform  = 'translateY(-2px)';
+              (e.currentTarget as HTMLElement).style.boxShadow = '0 6px 20px rgba(0,0,0,0.13)';
+            }}
+            onMouseLeave={e => {
+              (e.currentTarget as HTMLElement).style.transform  = 'translateY(0)';
+              (e.currentTarget as HTMLElement).style.boxShadow = '0 2px 12px rgba(0,0,0,0.09)';
+            }}
+          >
+            <div>
+              <div style={{ fontWeight: 700, fontSize: '15px', color: '#1a2332', marginBottom: '3px' }}>
+                {card.title}
+              </div>
+              <div style={{ fontSize: '13px', color: '#7b8fa1' }}>
+                {card.subtitle}
+              </div>
+            </div>
+            <SendArrow color={t.primaryColor} />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const SendArrow: React.FC<{ color: string }> = ({ color }) => (
+  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
+    <path
+      d="M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z"
+      stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/components/MaintenanceView/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+interface MaintenanceViewProps {
+  primaryColor: string;
+  fontFamily: string;
+}
+
+export const MaintenanceView: React.FC<MaintenanceViewProps> = ({ primaryColor, fontFamily }) => (
+  <div style={{
+    display: 'flex', flexDirection: 'column', alignItems: 'center',
+    justifyContent: 'center', height: '100%', padding: '32px',
+    fontFamily, textAlign: 'center', gap: 16,
+  }}>
+    <div style={{
+      width: 72, height: 72, borderRadius: '50%',
+      backgroundColor: `${primaryColor}15`,
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+    }}>
+      <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
+        <path d="M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
+          stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      </svg>
+    </div>
+    <h3 style={{ margin: 0, fontSize: '17px', fontWeight: 800, color: '#1a2332', letterSpacing: '-0.02em' }}>
+      Under Maintenance
+    </h3>
+    <p style={{ margin: 0, fontSize: '14px', color: '#7b8fa1', lineHeight: 1.6, maxWidth: 220 }}>
+      Chat is under maintenance. We'll be back shortly!
+    </p>
+    <span style={{
+      display: 'inline-flex', alignItems: 'center', gap: 6,
+      padding: '6px 14px', borderRadius: 20,
+      backgroundColor: '#fff3cd', color: '#856404',
+      fontSize: '12px', fontWeight: 700,
+      border: '1px solid #ffc10730',
+    }}>
+      <span style={{ width: 6, height: 6, borderRadius: '50%', backgroundColor: '#ffc107', display: 'inline-block' }} />
+      Temporarily Unavailable
+    </span>
+  </div>
+);

package/src/components/RecentChatsScreen/index.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { ChatUser, ChatWidgetTheme } from '../../types';
+import { mergeTheme } from '../../utils/theme';
+
+interface RecentChat {
+  id: string;
+  user: ChatUser;
+  lastMessage: string;
+  lastTime: Date;
+  unread: number;
+}
+
+interface RecentChatsScreenProps {
+  chats: RecentChat[];
+  theme?: ChatWidgetTheme;
+  onSelectChat: (user: ChatUser) => void;
+}
+
+export const RecentChatsScreen: React.FC<RecentChatsScreenProps> = ({ chats, theme, onSelectChat }) => {
+  const t = mergeTheme(theme);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      {/* Header */}
+      <div style={{
+        backgroundColor: t.primaryColor,
+        padding: '20px 20px 24px',
+        flexShrink: 0,
+      }}>
+        <h2 style={{ margin: 0, fontSize: '20px', fontWeight: 800, color: '#fff', fontFamily: t.fontFamily, letterSpacing: '-0.02em' }}>
+          Recent Chats
+        </h2>
+        <p style={{ margin: '4px 0 0', fontSize: '13px', color: 'rgba(255,255,255,0.8)', fontFamily: t.fontFamily }}>
+          Your conversation history
+        </p>
+      </div>
+
+      <div style={{ flex: 1, overflowY: 'auto' }}>
+        {chats.length === 0 ? (
+          <div style={{ padding: '50px 24px', textAlign: 'center', fontFamily: t.fontFamily }}>
+            <div style={{ fontSize: '36px', marginBottom: 12 }}>💬</div>
+            <div style={{ fontWeight: 700, color: '#1a2332', marginBottom: 6 }}>No chats yet</div>
+            <div style={{ fontSize: '13px', color: '#7b8fa1' }}>
+              Start a conversation from the home tab
+            </div>
+          </div>
+        ) : (
+          chats.map((chat, i) => {
+            const initials = chat.user.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+            const avatarColors = ['#1aaa96','#2563EB','#7C3AED','#D97706','#DC2626'];
+            const bg = avatarColors[chat.user.name.charCodeAt(0) % avatarColors.length];
+            const timeStr = new Date(chat.lastTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+            return (
+              <button
+                key={chat.id}
+                onClick={() => onSelectChat(chat.user)}
+                style={{
+                  width: '100%', padding: '14px 20px',
+                  display: 'flex', alignItems: 'center', gap: '14px',
+                  background: 'transparent', border: 'none',
+                  borderBottom: '1px solid #f3f4f6',
+                  cursor: 'pointer', textAlign: 'left',
+                  fontFamily: t.fontFamily,
+                  animation: `cw-fadeUp 0.3s ease both`,
+                  animationDelay: `${i * 0.05}s`,
+                  transition: 'background 0.15s',
+                }}
+                onMouseEnter={e => (e.currentTarget as HTMLElement).style.background = '#f8fdfc'}
+                onMouseLeave={e => (e.currentTarget as HTMLElement).style.background = 'transparent'}
+              >
+                <div style={{
+                  width: 46, height: 46, borderRadius: '50%', backgroundColor: bg,
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  color: '#fff', fontWeight: 700, fontSize: '15px', flexShrink: 0,
+                  position: 'relative',
+                }}>
+                  {initials}
+                  {chat.unread > 0 && (
+                    <span style={{
+                      position: 'absolute', top: -2, right: -2,
+                      width: 18, height: 18, borderRadius: '50%',
+                      backgroundColor: '#ff4757', color: '#fff',
+                      fontSize: '10px', fontWeight: 700,
+                      display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      border: '2px solid #fff',
+                    }}>
+                      {chat.unread}
+                    </span>
+                  )}
+                </div>
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 3 }}>
+                    <span style={{ fontWeight: 700, fontSize: '14px', color: '#1a2332' }}>{chat.user.name}</span>
+                    <span style={{ fontSize: '11px', color: '#b0bec5' }}>{timeStr}</span>
+                  </div>
+                  <div style={{ fontSize: '13px', color: '#7b8fa1', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    {chat.lastMessage}
+                  </div>
+                </div>
+              </button>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+};