ajaxter-chat 1.0.3 → 2.0.1

package/src/components/Tabs/BottomTabs.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { BottomTab } from '../../types';
+
+interface BottomTabsProps {
+  active: BottomTab;
+  onChange: (tab: BottomTab) => void;
+  primaryColor: string;
+  fontFamily: string;
+}
+
+export const BottomTabs: React.FC<BottomTabsProps> = ({ active, onChange, primaryColor, fontFamily }) => {
+  const tabs: { key: BottomTab; label: string; Icon: React.FC<{ active: boolean; color: string }> }[] = [
+    { key: 'home',    label: 'Home',    Icon: HomeIcon    },
+    { key: 'chats',   label: 'Chats',   Icon: ChatsIcon   },
+    { key: 'tickets', label: 'Tickets', Icon: TicketsIcon },
+  ];
+
+  return (
+    <div style={{
+      display: 'flex',
+      borderTop: '1px solid #eef0f5',
+      backgroundColor: '#fff',
+      flexShrink: 0,
+    }}>
+      {tabs.map(tab => {
+        const isActive = active === tab.key;
+        return (
+          <button
+            key={tab.key}
+            onClick={() => onChange(tab.key)}
+            style={{
+              flex: 1, padding: '10px 0 8px',
+              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
+              background: 'transparent', border: 'none', cursor: 'pointer',
+              fontFamily, fontSize: '10px', fontWeight: isActive ? 700 : 500,
+              color: isActive ? primaryColor : '#9aa3af',
+              transition: 'color 0.15s',
+              borderTop: isActive ? `2px solid ${primaryColor}` : '2px solid transparent',
+            }}
+          >
+            <tab.Icon active={isActive} color={isActive ? primaryColor : '#b0bec5'} />
+            {tab.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+// ── Icons ─────────────────────────────────────────────────────────────────────
+
+const HomeIcon: React.FC<{ active: boolean; color: string }> = ({ active, color }) => (
+  <svg width="22" height="22" 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={color} strokeWidth={active ? 2.2 : 1.8} strokeLinecap="round" strokeLinejoin="round"
+      fill={active ? `${color}20` : 'none'}
+    />
+    <path d="M9 21V12h6v9" stroke={color} strokeWidth={active ? 2.2 : 1.8} strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+const ChatsIcon: React.FC<{ active: boolean; color: string }> = ({ active, color }) => (
+  <svg width="22" height="22" 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={active ? 2.2 : 1.8} strokeLinecap="round" strokeLinejoin="round"
+      fill={active ? `${color}20` : 'none'}
+    />
+  </svg>
+);
+
+const TicketsIcon: React.FC<{ active: boolean; color: string }> = ({ active, color }) => (
+  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
+    <path
+      d="M15 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V9l-4-4z"
+      stroke={color} strokeWidth={active ? 2.2 : 1.8} strokeLinecap="round" strokeLinejoin="round"
+      fill={active ? `${color}20` : 'none'}
+    />
+    <path d="M15 5v4h4M9 13h6M9 17h4" stroke={color} strokeWidth={active ? 2.2 : 1.8} strokeLinecap="round"/>
+  </svg>
+);

package/src/components/TicketScreen/index.tsx

@@ -0,0 +1,170 @@
+import React, { useState } from 'react';
+import { ChatWidgetTheme, Ticket } from '../../types';
+import { mergeTheme } from '../../utils/theme';
+
+interface TicketScreenProps {
+  tickets: Ticket[];
+  theme?: ChatWidgetTheme;
+  onRaiseTicket: (title: string, description: string) => void;
+}
+
+export const TicketScreen: React.FC<TicketScreenProps> = ({ tickets, theme, onRaiseTicket }) => {
+  const t = mergeTheme(theme);
+  const [showForm, setShowForm] = useState(false);
+  const [title, setTitle] = useState('');
+  const [desc,  setDesc]  = useState('');
+
+  const handleSubmit = () => {
+    if (!title.trim()) return;
+    onRaiseTicket(title.trim(), desc.trim());
+    setTitle(''); setDesc(''); setShowForm(false);
+  };
+
+  const statusMeta: Record<Ticket['status'], { label: string; bg: string; color: string }> = {
+    'open':        { label: 'Open',        bg: '#e6faf8', color: t.primaryColor },
+    'in-progress': { label: 'In Progress', bg: '#fffbeb', color: '#d97706' },
+    'resolved':    { label: 'Resolved',    bg: '#f0fdf4', color: '#16a34a' },
+    'closed':      { label: 'Closed',      bg: '#f3f4f6', color: '#6b7280' },
+  };
+
+  const priorityMeta: Record<Ticket['priority'], { label: string; color: string }> = {
+    low:    { label: '↓ Low',    color: '#6b7280' },
+    medium: { label: '→ Medium', color: '#d97706' },
+    high:   { label: '↑ High',   color: '#dc2626' },
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      {/* Header */}
+      <div style={{ backgroundColor: t.primaryColor, padding: '20px 20px 24px', flexShrink: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <div>
+            <h2 style={{ margin: 0, fontSize: '20px', fontWeight: 800, color: '#fff', fontFamily: t.fontFamily, letterSpacing: '-0.02em' }}>
+              Tickets
+            </h2>
+            <p style={{ margin: '4px 0 0', fontSize: '13px', color: 'rgba(255,255,255,0.8)', fontFamily: t.fontFamily }}>
+              {tickets.length} ticket{tickets.length !== 1 ? 's' : ''} raised
+            </p>
+          </div>
+          <button
+            onClick={() => setShowForm(v => !v)}
+            style={{
+              background: 'rgba(255,255,255,0.25)', border: 'none', borderRadius: '20px',
+              padding: '8px 16px', color: '#fff', fontWeight: 700, fontSize: '13px',
+              cursor: 'pointer', fontFamily: t.fontFamily, display: 'flex', alignItems: 'center', gap: 5,
+            }}
+          >
+            {showForm ? '✕ Cancel' : '+ New Ticket'}
+          </button>
+        </div>
+      </div>
+
+      {/* New Ticket Form */}
+      {showForm && (
+        <div style={{
+          padding: '16px 20px',
+          borderBottom: '1px solid #eef0f5',
+          backgroundColor: '#fafcff',
+          animation: 'cw-fadeUp 0.2s ease',
+          flexShrink: 0,
+        }}>
+          <input
+            placeholder="Ticket title *"
+            value={title}
+            onChange={e => setTitle(e.target.value)}
+            style={{
+              width: '100%', padding: '10px 14px', borderRadius: 10,
+              border: '1.5px solid #e2e8f0', outline: 'none',
+              fontFamily: t.fontFamily, fontSize: '14px', color: '#1a2332',
+              marginBottom: 10, boxSizing: 'border-box',
+            }}
+            onFocus={e => (e.target.style.borderColor = t.primaryColor)}
+            onBlur={e => (e.target.style.borderColor = '#e2e8f0')}
+          />
+          <textarea
+            placeholder="Describe the issue (optional)"
+            value={desc}
+            onChange={e => setDesc(e.target.value)}
+            rows={3}
+            style={{
+              width: '100%', padding: '10px 14px', borderRadius: 10,
+              border: '1.5px solid #e2e8f0', outline: 'none', resize: 'none',
+              fontFamily: t.fontFamily, fontSize: '14px', color: '#1a2332',
+              marginBottom: 10, boxSizing: 'border-box',
+            }}
+            onFocus={e => (e.target.style.borderColor = t.primaryColor)}
+            onBlur={e => (e.target.style.borderColor = '#e2e8f0')}
+          />
+          <button
+            onClick={handleSubmit}
+            disabled={!title.trim()}
+            style={{
+              width: '100%', padding: '11px', borderRadius: 10,
+              backgroundColor: title.trim() ? t.primaryColor : '#e2e8f0',
+              color: title.trim() ? '#fff' : '#9aa3af',
+              border: 'none', cursor: title.trim() ? 'pointer' : 'not-allowed',
+              fontWeight: 700, fontSize: '14px', fontFamily: t.fontFamily,
+              transition: 'background 0.2s',
+            }}
+          >
+            Submit Ticket
+          </button>
+        </div>
+      )}
+
+      {/* Ticket List */}
+      <div style={{ flex: 1, overflowY: 'auto' }}>
+        {tickets.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 tickets yet</div>
+            <div style={{ fontSize: '13px', color: '#7b8fa1' }}>
+              Raise a ticket for major issues or changes
+            </div>
+          </div>
+        ) : (
+          tickets.map((ticket, i) => {
+            const sm = statusMeta[ticket.status];
+            const pm = priorityMeta[ticket.priority];
+            const date = new Date(ticket.createdAt).toLocaleDateString([], { month: 'short', day: 'numeric' });
+            return (
+              <div
+                key={ticket.id}
+                style={{
+                  padding: '14px 20px',
+                  borderBottom: '1px solid #f3f4f6',
+                  fontFamily: t.fontFamily,
+                  animation: `cw-fadeUp 0.3s ease both`,
+                  animationDelay: `${i * 0.05}s`,
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 6 }}>
+                  <span style={{ fontWeight: 700, fontSize: '14px', color: '#1a2332', flex: 1, paddingRight: 12 }}>
+                    {ticket.title}
+                  </span>
+                  <span style={{
+                    fontSize: '10px', fontWeight: 700, padding: '3px 9px', borderRadius: 20,
+                    backgroundColor: sm.bg, color: sm.color, whiteSpace: 'nowrap',
+                    textTransform: 'uppercase', letterSpacing: '0.04em',
+                  }}>
+                    {sm.label}
+                  </span>
+                </div>
+                {ticket.description && (
+                  <div style={{ fontSize: '13px', color: '#7b8fa1', marginBottom: 8, lineHeight: 1.5 }}>
+                    {ticket.description}
+                  </div>
+                )}
+                <div style={{ display: 'flex', gap: 12, fontSize: '11px', color: '#b0bec5' }}>
+                  <span style={{ color: pm.color, fontWeight: 600 }}>{pm.label}</span>
+                  <span>#{ticket.id.slice(-6).toUpperCase()}</span>
+                  <span>{date}</span>
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/UserListScreen/index.tsx

@@ -0,0 +1,181 @@
+import React from 'react';
+import { ChatUser, ChatWidgetTheme, UserListContext } from '../../types';
+import { mergeTheme } from '../../utils/theme';
+
+interface UserListScreenProps {
+  context: UserListContext;
+  users: ChatUser[];
+  loading: boolean;
+  error: string | null;
+  theme?: ChatWidgetTheme;
+  onBack: () => void;
+  onSelectUser: (user: ChatUser) => void;
+}
+
+export const UserListScreen: React.FC<UserListScreenProps> = ({
+  context, users, loading, error, theme, onBack, onSelectUser,
+}) => {
+  const t = mergeTheme(theme);
+  const title = context === 'support' ? 'Need Support' : 'New Conversation';
+  const subtitle = context === 'support'
+    ? 'Choose a support agent'
+    : 'Choose a colleague to chat with';
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideInRight 0.25s ease' }}>
+      {/* Header */}
+      <div
+        style={{
+          backgroundColor: t.primaryColor,
+          padding: '16px 20px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '12px',
+          flexShrink: 0,
+        }}
+      >
+        <button
+          onClick={onBack}
+          style={{
+            background: 'rgba(255,255,255,0.2)',
+            border: 'none',
+            borderRadius: '50%',
+            width: '34px',
+            height: '34px',
+            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.5" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </button>
+        <div>
+          <div style={{ fontWeight: 700, fontSize: '16px', color: '#fff', fontFamily: t.fontFamily }}>
+            {title}
+          </div>
+          <div style={{ fontSize: '12px', color: 'rgba(255,255,255,0.8)', fontFamily: t.fontFamily }}>
+            {subtitle}
+          </div>
+        </div>
+      </div>
+
+      {/* List */}
+      <div style={{ flex: 1, overflowY: 'auto', padding: '8px 0' }}>
+        {loading && <UserListSkeleton />}
+        {error && <ErrorState message={error} color={t.primaryColor} font={t.fontFamily} />}
+        {!loading && !error && users.length === 0 && (
+          <EmptyState color={t.primaryColor} font={t.fontFamily} />
+        )}
+        {!loading && !error && users.map((user, i) => (
+          <UserRow
+            key={user.uid}
+            user={user}
+            index={i}
+            primaryColor={t.primaryColor}
+            fontFamily={t.fontFamily}
+            onClick={() => onSelectUser(user)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+// ── Sub-components ─────────────────────────────────────────────────────────────
+
+const UserRow: React.FC<{
+  user: ChatUser; index: number;
+  primaryColor: string; fontFamily: string;
+  onClick: () => void;
+}> = ({ user, index, primaryColor, fontFamily, onClick }) => {
+  const initials = user.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+  const avatarColors = ['#1aaa96','#2563EB','#7C3AED','#D97706','#DC2626','#059669'];
+  const bg = avatarColors[user.name.charCodeAt(0) % avatarColors.length];
+
+  return (
+    <button
+      onClick={onClick}
+      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,
+        animation: 'cw-fadeUp 0.3s ease both',
+        animationDelay: `${index * 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'}
+    >
+      {/* Avatar */}
+      <div style={{
+        width: '46px', height: '46px', borderRadius: '50%',
+        backgroundColor: bg, flexShrink: 0,
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        color: '#fff', fontWeight: 700, fontSize: '15px',
+      }}>
+        {initials}
+      </div>
+      {/* Info */}
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ fontWeight: 700, fontSize: '14px', color: '#1a2332', marginBottom: '2px' }}>
+          {user.name}
+        </div>
+        <div style={{ fontSize: '12px', color: '#7b8fa1', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {user.project || user.email}
+        </div>
+      </div>
+      {/* Type badge */}
+      <span style={{
+        fontSize: '10px', fontWeight: 700, padding: '3px 9px',
+        borderRadius: '20px', textTransform: 'uppercase', letterSpacing: '0.05em',
+        backgroundColor: user.type === 'developer' ? '#e6faf8' : '#eff6ff',
+        color: user.type === 'developer' ? primaryColor : '#2563EB',
+        border: `1px solid ${user.type === 'developer' ? primaryColor + '30' : '#2563eb30'}`,
+      }}>
+        {user.type === 'developer' ? 'Dev' : 'User'}
+      </span>
+    </button>
+  );
+};
+
+const UserListSkeleton: React.FC = () => (
+  <>
+    {[1,2,3,4].map(i => (
+      <div key={i} style={{ padding: '14px 20px', display: 'flex', gap: '14px', alignItems: 'center' }}>
+        <div style={{ width: 46, height: 46, borderRadius: '50%', background: '#f0f0f0', flexShrink: 0 }} />
+        <div style={{ flex: 1 }}>
+          <div style={{ height: 13, width: '55%', background: '#f0f0f0', borderRadius: 6, marginBottom: 7 }} />
+          <div style={{ height: 11, width: '38%', background: '#f0f0f0', borderRadius: 6 }} />
+        </div>
+      </div>
+    ))}
+  </>
+);
+
+const ErrorState: React.FC<{ message: string; color: string; font: string }> = ({ message, color, font }) => (
+  <div style={{ padding: '40px 24px', textAlign: 'center', fontFamily: font }}>
+    <div style={{ fontSize: '32px', marginBottom: '10px' }}>⚠️</div>
+    <div style={{ fontWeight: 700, color: '#1a2332', marginBottom: '6px' }}>Could not load users</div>
+    <div style={{ fontSize: '13px', color: '#7b8fa1' }}>{message}</div>
+  </div>
+);
+
+const EmptyState: React.FC<{ color: string; font: string }> = ({ color, font }) => (
+  <div style={{ padding: '40px 24px', textAlign: 'center', fontFamily: font }}>
+    <div style={{ fontSize: '32px', marginBottom: '10px' }}>👥</div>
+    <div style={{ fontWeight: 700, color: '#1a2332', marginBottom: '6px' }}>No users available</div>
+    <div style={{ fontSize: '13px', color: '#7b8fa1' }}>Check back later</div>
+  </div>
+);

package/src/config/index.ts

@@ -0,0 +1,46 @@
+import { ChatConfig, ChatStatus, ChatType } from '../types';
+
+function getEnv(key: string): string | undefined {
+  if (typeof process !== 'undefined' && process.env) {
+    return (
+      process.env[`NEXT_PUBLIC_${key}`] ??
+      process.env[`REACT_APP_${key}`] ??
+      process.env[key] ??
+      undefined
+    );
+  }
+  return undefined;
+}
+
+function validateStatus(v?: string): ChatStatus {
+  if (v === 'ACTIVE' || v === 'DISABLE' || v === 'MAINTENANCE') return v;
+  console.warn(`[ChatWidget] Invalid CHAT_STATUS "${v}". Defaulting to DISABLE.`);
+  return 'DISABLE';
+}
+
+function validateChatType(v?: string): ChatType {
+  if (v === 'SUPPORT' || v === 'CHAT' || v === 'BOTH') return v;
+  console.warn(`[ChatWidget] Invalid CHAT_TYPE "${v}". Defaulting to SUPPORT.`);
+  return 'SUPPORT';
+}
+
+export function loadChatConfig(): ChatConfig {
+  const portStr = getEnv('CHAT_HOST_PORT');
+  const hostPort = portStr ? parseInt(portStr, 10) : null;
+
+  return {
+    hostUrl:          getEnv('CHAT_HOST_URL')  ?? 'http://localhost',
+    hostPort,
+    userListEndpoint: getEnv('CHAT_USER_LIST') ?? 'api/users',
+    status:           validateStatus(getEnv('CHAT_STATUS')),
+    chatType:         validateChatType(getEnv('CHAT_TYPE')),
+  };
+}
+
+export function buildUserListUrl(config: ChatConfig): string {
+  const base     = config.hostUrl.replace(/\/$/, '');
+  const endpoint = config.userListEndpoint.replace(/^\//, '');
+  // Port is optional
+  const portPart = config.hostPort ? `:${config.hostPort}` : '';
+  return `${base}${portPart}/${endpoint}`;
+}

package/src/hooks/useChat.ts

@@ -0,0 +1,31 @@
+import { useState, useCallback } from 'react';
+import { ChatMessage, ChatUser } from '../types';
+
+export function useChat() {
+  const [messages,   setMessages]   = useState<ChatMessage[]>([]);
+  const [activeUser, setActiveUser] = useState<ChatUser | null>(null);
+
+  const selectUser = useCallback((user: ChatUser) => {
+    setActiveUser(user);
+    setMessages([]);
+    // TODO: socket.emit('join', user.uid); socket.on('message', handler)
+  }, []);
+
+  const sendMessage = useCallback((text: string) => {
+    if (!activeUser || !text.trim()) return;
+    const msg: ChatMessage = {
+      id:         `msg_${Date.now()}`,
+      senderId:   'me',
+      receiverId: activeUser.uid,
+      text:       text.trim(),
+      timestamp:  new Date(),
+      status:     'sent',
+    };
+    setMessages(prev => [...prev, msg]);
+    // TODO: socket.emit('message', msg)
+  }, [activeUser]);
+
+  const clearChat = useCallback(() => { setMessages([]); setActiveUser(null); }, []);
+
+  return { messages, activeUser, selectUser, sendMessage, clearChat };
+}

package/src/hooks/useUsers.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect, useCallback } from 'react';
+import { ChatUser, UserType } from '../types';
+import { fetchUsers } from '../services/userService';
+
+export function useUsers(url: string, filterType?: UserType, enabled = true) {
+  const [users,   setUsers]   = useState<ChatUser[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error,   setError]   = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    if (!enabled) return;
+    setLoading(true); setError(null);
+    try {
+      const data = await fetchUsers(url);
+      setUsers(filterType ? data.filter(u => u.type === filterType) : data);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unknown error');
+      setUsers([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [url, filterType, enabled]);
+
+  useEffect(() => { load(); }, [load]);
+
+  return { users, loading, error, refetch: load };
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+export { ChatWidget, default } from './components/ChatWidget';
+export { HomeScreen }        from './components/HomeScreen';
+export { UserListScreen }    from './components/UserListScreen';
+export { ChatScreen }        from './components/ChatScreen';
+export { RecentChatsScreen } from './components/RecentChatsScreen';
+export { TicketScreen }      from './components/TicketScreen';
+export { MaintenanceView }   from './components/MaintenanceView';
+export { BottomTabs }        from './components/Tabs/BottomTabs';
+export { useUsers }          from './hooks/useUsers';
+export { useChat }           from './hooks/useChat';
+export { loadChatConfig, buildUserListUrl } from './config';
+export { fetchUsers }        from './services/userService';
+export { defaultTheme, mergeTheme } from './utils/theme';
+export type {
+  ChatUser, ChatMessage, ChatConfig, ChatWidgetTheme,
+  ChatWidgetProps, ChatStatus, ChatType, UserType,
+  Screen, BottomTab, UserListContext, Ticket,
+} from './types';

package/src/services/userService.ts

@@ -0,0 +1,9 @@
+import { ChatUser } from '../types';
+
+export async function fetchUsers(url: string): Promise<ChatUser[]> {
+  const res = await fetch(url, { headers: { 'Content-Type': 'application/json' } });
+  if (!res.ok) throw new Error(`Failed to fetch users: ${res.status}`);
+  const data = await res.json();
+  if (!Array.isArray(data)) throw new Error('User API did not return an array');
+  return data as ChatUser[];
+}

package/src/types/index.ts

@@ -0,0 +1,82 @@
+// ─── Status & Type ────────────────────────────────────────────────────────────
+export type ChatStatus = 'ACTIVE' | 'DISABLE' | 'MAINTENANCE';
+export type ChatType   = 'SUPPORT' | 'CHAT' | 'BOTH';
+export type UserType   = 'developer' | 'user';
+
+// ─── Navigation Screens ───────────────────────────────────────────────────────
+export type Screen =
+  | 'home'
+  | 'user-list'        // slide-in: pick a user before chat
+  | 'chat'             // active chat conversation
+  | 'recent-chats'     // bottom tab 2
+  | 'tickets';         // bottom tab 3
+
+export type UserListContext = 'support' | 'conversation'; // which card was clicked
+
+// ─── Bottom Tabs ──────────────────────────────────────────────────────────────
+export type BottomTab = 'home' | 'chats' | 'tickets';
+
+// ─── Widget Size ──────────────────────────────────────────────────────────────
+export type WidgetSize = 'normal' | 'maximized';
+
+// ─── Data Models ──────────────────────────────────────────────────────────────
+export interface ChatUser {
+  name: string;
+  uid: string;
+  email: string;
+  mobile: string;
+  project: string;
+  type: UserType;
+}
+
+export interface ChatMessage {
+  id: string;
+  senderId: string;
+  receiverId: string;
+  text: string;
+  timestamp: Date;
+  status: 'sent' | 'delivered' | 'read';
+}
+
+export interface RecentChat {
+  id: string;
+  user: ChatUser;
+  lastMessage: string;
+  lastTime: Date;
+  unread: number;
+}
+
+export interface Ticket {
+  id: string;
+  title: string;
+  description: string;
+  status: 'open' | 'in-progress' | 'resolved' | 'closed';
+  priority: 'low' | 'medium' | 'high';
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+// ─── Config ───────────────────────────────────────────────────────────────────
+export interface ChatConfig {
+  hostUrl: string;
+  hostPort: number | null;   // optional
+  userListEndpoint: string;
+  status: ChatStatus;
+  chatType: ChatType;
+}
+
+// ─── Theme ────────────────────────────────────────────────────────────────────
+export interface ChatWidgetTheme {
+  primaryColor?: string;        // teal header + accents (default: #1aaa96)
+  fontFamily?: string;
+  buttonColor?: string;
+  buttonTextColor?: string;
+  buttonLabel?: string;
+  buttonPosition?: 'bottom-right' | 'bottom-left';
+  borderRadius?: string;
+  backgroundColor?: string;
+}
+
+export interface ChatWidgetProps {
+  theme?: ChatWidgetTheme;
+}

package/src/utils/theme.ts

@@ -0,0 +1,16 @@
+import { ChatWidgetTheme } from '../types';
+
+export const defaultTheme: Required<ChatWidgetTheme> = {
+  primaryColor:    '#1aaa96',
+  fontFamily:      "'DM Sans', 'Segoe UI', sans-serif",
+  buttonColor:     '#1aaa96',
+  buttonTextColor: '#ffffff',
+  buttonLabel:     'Chat with us',
+  buttonPosition:  'bottom-right',
+  borderRadius:    '16px',
+  backgroundColor: '#ffffff',
+};
+
+export function mergeTheme(custom?: ChatWidgetTheme): Required<ChatWidgetTheme> {
+  return { ...defaultTheme, ...custom };
+}