ajaxter-chat 1.0.1 → 2.0.1

package/dist/types/index.d.ts

@@ -1,9 +1,10 @@
 export type ChatStatus = 'ACTIVE' | 'DISABLE' | 'MAINTENANCE';
 export type ChatType = 'SUPPORT' | 'CHAT' | 'BOTH';
 export type UserType = 'developer' | 'user';
-export type TabType = 'developers' | 'users';
-export type BottomNavTab = 'home' | 'chats' | 'tickets';
-export type HomeFlow = 'home' | 'pickUser' | 'chat' | 'raiseTicket';
+export type Screen = 'home' | 'user-list' | 'chat' | 'recent-chats' | 'tickets';
+export type UserListContext = 'support' | 'conversation';
+export type BottomTab = 'home' | 'chats' | 'tickets';
+export type WidgetSize = 'normal' | 'maximized';
 export interface ChatUser {
     name: string;
     uid: string;
@@ -20,52 +21,38 @@ export interface ChatMessage {
     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;
+}
 export interface ChatConfig {
     hostUrl: string;
-    /** When omitted, URLs use `hostUrl` only (no `:port` segment). */
-    hostPort?: number;
+    hostPort: number | null;
     userListEndpoint: string;
     status: ChatStatus;
     chatType: ChatType;
-    /** Show “Need Support” card on home (env `CHAT_SHOW_NEED_SUPPORT`). */
-    showNeedSupport: boolean;
-    /** Show “New Conversation” card on home (env `CHAT_SHOW_NEW_CONVERSATION`). */
-    showNewConversation: boolean;
-    /** Pixel bounds for the resize slider (env `CHAT_WIDGET_*`). */
-    widgetMinWidth: number;
-    widgetMaxWidth: number;
-    widgetMinHeight: number;
-    widgetMaxHeight: number;
-    /** Default widget size as ratio 0–1 between min and max. */
-    widgetDefaultSize: number;
-}
-export interface RaisedTicket {
-    id: string;
-    subject: string;
-    body: string;
-    createdAt: Date;
-    status: 'open' | 'closed';
-}
-export interface RecentChat {
-    user: ChatUser;
-    lastMessage: string;
-    updatedAt: Date;
 }
 export interface ChatWidgetTheme {
-    fontFamily?: string;
     primaryColor?: string;
-    backgroundColor?: string;
+    fontFamily?: string;
     buttonColor?: string;
     buttonTextColor?: string;
     buttonLabel?: string;
     buttonPosition?: 'bottom-right' | 'bottom-left';
     borderRadius?: string;
-    /** Override config min width (px). */
-    widgetMinWidth?: number;
-    widgetMaxWidth?: number;
-    widgetMinHeight?: number;
-    widgetMaxHeight?: number;
-    widgetDefaultSize?: number;
+    backgroundColor?: string;
 }
 export interface ChatWidgetProps {
     theme?: ChatWidgetTheme;

package/dist/utils/theme.d.ts

@@ -1,4 +1,3 @@
 import { ChatWidgetTheme } from '../types';
 export declare const defaultTheme: Required<ChatWidgetTheme>;
 export declare function mergeTheme(custom?: ChatWidgetTheme): Required<ChatWidgetTheme>;
-export declare function themeToCSS(theme: Required<ChatWidgetTheme>): string;

package/dist/utils/theme.js

@@ -1,28 +1,13 @@
 export const defaultTheme = {
+    primaryColor: '#1aaa96',
     fontFamily: "'DM Sans', 'Segoe UI', sans-serif",
-    primaryColor: '#13947e',
-    backgroundColor: '#ffffff',
-    buttonColor: '#13947e',
+    buttonColor: '#1aaa96',
     buttonTextColor: '#ffffff',
     buttonLabel: 'Chat with us',
     buttonPosition: 'bottom-right',
     borderRadius: '16px',
-    widgetMinWidth: 320,
-    widgetMaxWidth: 720,
-    widgetMinHeight: 420,
-    widgetMaxHeight: 720,
-    widgetDefaultSize: 0.45,
+    backgroundColor: '#ffffff',
 };
 export function mergeTheme(custom) {
     return Object.assign(Object.assign({}, defaultTheme), custom);
 }
-export function themeToCSS(theme) {
-    return `
-    --cw-font: ${theme.fontFamily};
-    --cw-primary: ${theme.primaryColor};
-    --cw-bg: ${theme.backgroundColor};
-    --cw-btn-bg: ${theme.buttonColor};
-    --cw-btn-text: ${theme.buttonTextColor};
-    --cw-radius: ${theme.borderRadius};
-  `;
-}

package/package.json

@@ -1,18 +1,14 @@
 {
   "name": "ajaxter-chat",
-  "version": "1.0.1",
-  "description": "A reusable, configurable chat widget for React.js and Next.js applications.",
+  "version": "2.0.1",
+  "description": "A reusable configurable chat widget for React.js and Next.js with support chat, user chat, and ticket raising.",
   "main": "dist/index.js",
-  "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist", "src"],
   "sideEffects": false,
   "scripts": {
     "build": "tsc",
     "dev": "tsc --watch",
-    "lint": "eslint src --ext .ts,.tsx",
     "type-check": "tsc --noEmit"
   },
   "peerDependencies": {
@@ -20,19 +16,13 @@
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@types/node": "^25.5.0",
-    "@types/react": "^18.3.28",
-    "@types/react-dom": "^18.3.7",
-    "typescript": "^5.9.3"
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "^5.0.0"
   },
-  "keywords": [
-    "react",
-    "nextjs",
-    "chat",
-    "widget",
-    "support",
-    "typescript",
-    "ajaxter"
-  ],
+  "keywords": ["react", "nextjs", "chat", "widget", "support", "tickets", "typescript"],
   "license": "MIT"
 }

package/src/components/ChatScreen/index.tsx

@@ -0,0 +1,205 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { ChatMessage, ChatUser, ChatWidgetTheme } from '../../types';
+import { mergeTheme } from '../../utils/theme';
+
+interface ChatScreenProps {
+  activeUser: ChatUser;
+  messages: ChatMessage[];
+  onSend: (text: string) => void;
+  onBack: () => void;
+  onClose: () => void;
+  theme?: ChatWidgetTheme;
+}
+
+export const ChatScreen: React.FC<ChatScreenProps> = ({
+  activeUser, messages, onSend, onBack, onClose, theme,
+}) => {
+  const t = mergeTheme(theme);
+  const [text, setText] = useState('');
+  const endRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => { endRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]);
+
+  const handleSend = () => {
+    if (!text.trim()) return;
+    onSend(text);
+    setText('');
+    inputRef.current?.focus();
+  };
+
+  const handleKey = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); }
+  };
+
+  const initials = activeUser.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideInRight 0.25s ease' }}>
+      {/* Teal header */}
+      <div style={{
+        backgroundColor: t.primaryColor,
+        padding: '14px 18px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '10px',
+        flexShrink: 0,
+      }}>
+        <button onClick={onBack} style={iconBtnStyle}>
+          <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 style={{
+          width: 36, height: 36, borderRadius: '50%',
+          backgroundColor: 'rgba(255,255,255,0.25)',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          fontWeight: 700, fontSize: '13px', color: '#fff', flexShrink: 0,
+        }}>
+          {initials}
+        </div>
+
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ fontWeight: 700, fontSize: '14px', color: '#fff', fontFamily: t.fontFamily }}>
+            {activeUser.name}
+          </div>
+          <div style={{ fontSize: '11px', color: 'rgba(255,255,255,0.8)', display: 'flex', alignItems: 'center', gap: 4 }}>
+            <span style={{ width: 6, height: 6, borderRadius: '50%', backgroundColor: '#a8f0c6', display: 'inline-block' }} />
+            Online
+          </div>
+        </div>
+
+        <button onClick={onClose} style={iconBtnStyle}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+            <path d="M18 6L6 18M6 6l12 12" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Messages area */}
+      <div style={{
+        flex: 1, overflowY: 'auto', padding: '18px 16px',
+        display: 'flex', flexDirection: 'column', gap: '10px',
+        backgroundColor: '#f7f8fc',
+      }}>
+        {messages.length === 0 && (
+          <div style={{
+            margin: 'auto', textAlign: 'center',
+            fontSize: '13px', color: '#b0bec5',
+            fontFamily: t.fontFamily,
+          }}>
+            <div style={{ fontSize: '28px', marginBottom: 8 }}>💬</div>
+            Say hi to {activeUser.name}!
+          </div>
+        )}
+        {messages.map(msg => (
+          <Bubble key={msg.id} msg={msg} primaryColor={t.primaryColor} font={t.fontFamily} />
+        ))}
+        <div ref={endRef} />
+      </div>
+
+      {/* Input bar — matching image 2 exactly */}
+      <div style={{
+        borderTop: '1px solid #eef0f5',
+        padding: '10px 14px',
+        backgroundColor: '#fff',
+        display: 'flex',
+        alignItems: 'flex-end',
+        gap: '10px',
+        flexShrink: 0,
+      }}>
+        <textarea
+          ref={inputRef}
+          value={text}
+          onChange={e => setText(e.target.value)}
+          onKeyDown={handleKey}
+          placeholder="Type and press [enter].."
+          rows={1}
+          style={{
+            flex: 1, resize: 'none', border: 'none', outline: 'none',
+            fontFamily: t.fontFamily, fontSize: '14px', lineHeight: '1.5',
+            maxHeight: '80px', overflowY: 'auto', color: '#1a2332',
+            padding: '6px 0', backgroundColor: 'transparent',
+          }}
+        />
+        {/* Action icons: like, attachment, emoji — matching image 2 */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }}>
+          <IconBtn onClick={() => {}} title="Reaction">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <path d="M14 9h.01M10 9h.01M12 2a10 10 0 100 20A10 10 0 0012 2zm0 14s-4-1.5-4-4" stroke="#9aa3af" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+              <path d="M8 15s1.5 2 4 2 4-2 4-2" stroke="#9aa3af" strokeWidth="1.8" strokeLinecap="round"/>
+            </svg>
+          </IconBtn>
+          <IconBtn onClick={() => {}} title="Attach">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66L9.41 17.41a2 2 0 01-2.83-2.83l8.49-8.48" stroke="#9aa3af" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+          </IconBtn>
+          <IconBtn onClick={() => {}} title="Emoji">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <circle cx="12" cy="12" r="10" stroke="#9aa3af" strokeWidth="1.8"/>
+              <path d="M8 14s1.5 2 4 2 4-2 4-2" stroke="#9aa3af" strokeWidth="1.8" strokeLinecap="round"/>
+              <line x1="9" y1="9" x2="9.01" y2="9" stroke="#9aa3af" strokeWidth="2.5" strokeLinecap="round"/>
+              <line x1="15" y1="9" x2="15.01" y2="9" stroke="#9aa3af" strokeWidth="2.5" strokeLinecap="round"/>
+            </svg>
+          </IconBtn>
+          {text.trim() && (
+            <button
+              onClick={handleSend}
+              style={{
+                width: 36, height: 36, borderRadius: '50%',
+                backgroundColor: t.primaryColor, border: 'none',
+                cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                transition: 'transform 0.15s',
+              }}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                <path d="M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Bubble: React.FC<{ msg: ChatMessage; primaryColor: string; font: string }> = ({ msg, primaryColor, font }) => {
+  const isMe = msg.senderId === 'me';
+  const time = new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: isMe ? 'flex-end' : 'flex-start', gap: 3 }}>
+      <div style={{
+        maxWidth: '75%', padding: '10px 14px',
+        borderRadius: isMe ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
+        backgroundColor: isMe ? primaryColor : '#fff',
+        color: isMe ? '#fff' : '#1a2332',
+        fontSize: '14px', lineHeight: '1.5',
+        boxShadow: '0 1px 4px rgba(0,0,0,0.07)',
+        fontFamily: font, wordBreak: 'break-word',
+      }}>
+        {msg.text}
+      </div>
+      <span style={{ fontSize: '11px', color: '#b0bec5', padding: '0 4px' }}>{time}</span>
+    </div>
+  );
+};
+
+const IconBtn: React.FC<{ onClick: () => void; title: string; children: React.ReactNode }> = ({ onClick, title, children }) => (
+  <button
+    onClick={onClick}
+    title={title}
+    style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '4px', display: 'flex', alignItems: 'center', borderRadius: '6px' }}
+    onMouseEnter={e => (e.currentTarget as HTMLElement).style.background = '#f3f4f6'}
+    onMouseLeave={e => (e.currentTarget as HTMLElement).style.background = 'none'}
+  >
+    {children}
+  </button>
+);
+
+const iconBtnStyle: React.CSSProperties = {
+  background: 'rgba(255,255,255,0.2)', border: 'none', borderRadius: '50%',
+  width: 34, height: 34, display: 'flex', alignItems: 'center', justifyContent: 'center',
+  cursor: 'pointer', flexShrink: 0,
+};