ajaxter-chat 2.0.1 → 3.0.1

package/src/hooks/useRemoteConfig.ts

@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react';
+import { RemoteChatData } from '../types';
+import { fetchRemoteChatData } from '../config';
+
+export function useRemoteConfig(apiKey: string, widgetId: string) {
+  const [data,    setData]    = useState<RemoteChatData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error,   setError]   = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    fetchRemoteChatData(apiKey, widgetId)
+      .then(d  => { if (!cancelled) { setData(d); setLoading(false); } })
+      .catch(e => { if (!cancelled) { setError(e.message); setLoading(false); } });
+    return () => { cancelled = true; };
+  }, [apiKey, widgetId]);
+
+  return { data, loading, error };
+}

package/src/hooks/useWebRTC.ts

@@ -0,0 +1,130 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { CallSession, CallState, ChatUser } from '../types';
+
+const ICE_SERVERS: RTCIceServer[] = [
+  { urls: 'stun:stun.l.google.com:19302' },
+  { urls: 'stun:stun1.l.google.com:19302' },
+];
+
+export function useWebRTC() {
+  const [session, setSession] = useState<CallSession>({
+    state:     'idle',
+    peer:      null,
+    startedAt: null,
+    isMuted:   false,
+    isCameraOn: false,
+  });
+
+  const pcRef         = useRef<RTCPeerConnection | null>(null);
+  const localStream   = useRef<MediaStream | null>(null);
+  const localVideoRef = useRef<HTMLVideoElement | null>(null);
+  const remoteVideoRef = useRef<HTMLVideoElement | null>(null);
+
+  const updateSession = (patch: Partial<CallSession>) =>
+    setSession(prev => ({ ...prev, ...patch }));
+
+  /** Start an outgoing call */
+  const startCall = useCallback(async (peer: ChatUser, withVideo = false) => {
+    updateSession({ state: 'calling', peer });
+
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: true,
+      video: withVideo,
+    });
+    localStream.current = stream;
+    if (localVideoRef.current) localVideoRef.current.srcObject = stream;
+
+    const pc = new RTCPeerConnection({ iceServers: ICE_SERVERS });
+    pcRef.current = pc;
+
+    stream.getTracks().forEach(t => pc.addTrack(t, stream));
+
+    pc.ontrack = e => {
+      if (remoteVideoRef.current) remoteVideoRef.current.srcObject = e.streams[0];
+      updateSession({ state: 'connected', startedAt: new Date(), isCameraOn: withVideo });
+    };
+
+    pc.onicecandidate = e => {
+      if (e.candidate) {
+        // TODO: socket.emit('ice-candidate', { candidate: e.candidate, to: peer.uid });
+        console.log('[WebRTC] ICE candidate ready — send via signalling:', e.candidate);
+      }
+    };
+
+    const offer = await pc.createOffer();
+    await pc.setLocalDescription(offer);
+    // TODO: socket.emit('call-offer', { offer, to: peer.uid, from: 'me' });
+    console.log('[WebRTC] Offer created — send via signalling server:', offer);
+  }, []);
+
+  /** Accept an incoming call offer */
+  const acceptCall = useCallback(async (
+    offer: RTCSessionDescriptionInit,
+    peer: ChatUser,
+    withVideo = false
+  ) => {
+    updateSession({ state: 'connected', peer, startedAt: new Date(), isCameraOn: withVideo });
+
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: withVideo });
+    localStream.current = stream;
+    if (localVideoRef.current) localVideoRef.current.srcObject = stream;
+
+    const pc = new RTCPeerConnection({ iceServers: ICE_SERVERS });
+    pcRef.current = pc;
+    stream.getTracks().forEach(t => pc.addTrack(t, stream));
+    pc.ontrack = e => {
+      if (remoteVideoRef.current) remoteVideoRef.current.srcObject = e.streams[0];
+    };
+    pc.onicecandidate = e => {
+      if (e.candidate) {
+        // TODO: socket.emit('ice-candidate', { candidate: e.candidate, to: peer.uid });
+      }
+    };
+
+    await pc.setRemoteDescription(offer);
+    const answer = await pc.createAnswer();
+    await pc.setLocalDescription(answer);
+    // TODO: socket.emit('call-answer', { answer, to: peer.uid });
+  }, []);
+
+  /** Hang up */
+  const endCall = useCallback(() => {
+    localStream.current?.getTracks().forEach(t => t.stop());
+    pcRef.current?.close();
+    pcRef.current = null;
+    localStream.current = null;
+    updateSession({ state: 'ended', peer: null, startedAt: null });
+    setTimeout(() => updateSession({ state: 'idle' }), 1800);
+  }, []);
+
+  const toggleMute = useCallback(() => {
+    if (!localStream.current) return;
+    const enabled = !session.isMuted;
+    localStream.current.getAudioTracks().forEach(t => { t.enabled = enabled; });
+    updateSession({ isMuted: !session.isMuted });
+  }, [session.isMuted]);
+
+  const toggleCamera = useCallback(() => {
+    if (!localStream.current) return;
+    const enabled = !session.isCameraOn;
+    localStream.current.getVideoTracks().forEach(t => { t.enabled = enabled; });
+    updateSession({ isCameraOn: enabled });
+  }, [session.isCameraOn]);
+
+  // Cleanup on unmount
+  useEffect(() => () => {
+    localStream.current?.getTracks().forEach(t => t.stop());
+    pcRef.current?.close();
+  }, []);
+
+  return {
+    session,
+    localVideoRef,
+    remoteVideoRef,
+    startCall,
+    acceptCall,
+    endCall,
+    toggleMute,
+    toggleCamera,
+  };
+}

package/src/index.ts

@@ -1,18 +1,29 @@
 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 { 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 { BlockListScreen }    from './components/BlockList';
+export { CallScreen }         from './components/CallScreen';
+export { MaintenanceView }    from './components/MaintenanceView';
+export { BottomTabs }         from './components/Tabs/BottomTabs';
+export { EmojiPicker }        from './components/EmojiPicker';
+
+export { useChat }            from './hooks/useChat';
+export { useWebRTC }          from './hooks/useWebRTC';
+export { useRemoteConfig }    from './hooks/useRemoteConfig';
+
+export { loadLocalConfig, fetchRemoteChatData } from './config';
+export { mergeTheme, darken }                   from './utils/theme';
+export { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText } from './utils/chat';
+
 export type {
-  ChatUser, ChatMessage, ChatConfig, ChatWidgetTheme,
-  ChatWidgetProps, ChatStatus, ChatType, UserType,
-  Screen, BottomTab, UserListContext, Ticket,
+  ChatWidgetProps, ChatWidgetTheme,
+  WidgetConfig, RemoteChatData,
+  ChatUser, ChatMessage, Ticket, RecentChat,
+  CallSession, CallState,
+  ChatStatus, ChatType, UserType, OnlineStatus,
+  Screen, BottomTab, UserListContext, MessageType,
+  LocalEnvConfig,
 } from './types';

package/src/types/index.ts

@@ -1,80 +1,125 @@
-// ─── 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
+// ─── Remote Config (from chatData.json) ────────────────────────────────────
+export interface WidgetConfig {
+  id: string;
+  apiKey: string;
+  status: ChatStatus;
+  chatType: ChatType;
+  primaryColor: string;
+  buttonLabel: string;
+  buttonPosition: 'bottom-right' | 'bottom-left';
+  welcomeTitle: string;
+  welcomeSubtitle: string;
+  allowVoiceMessage: boolean;
+  allowAttachment: boolean;
+  allowEmoji: boolean;
+  allowWebCall: boolean;
+  maxEmojiCount: number;
+  allowTranscriptDownload: boolean;
+  allowReport: boolean;
+  allowBlock: boolean;
+}
 
-// ─── Bottom Tabs ──────────────────────────────────────────────────────────────
-export type BottomTab = 'home' | 'chats' | 'tickets';
+export interface RemoteChatData {
+  widget: WidgetConfig;
+  developers: ChatUser[];
+  users: ChatUser[];
+  sampleChats: Record<string, ChatMessage[]>;
+  sampleTickets: Ticket[];
+  blockedUsers: string[];
+}
 
-// ─── Widget Size ──────────────────────────────────────────────────────────────
-export type WidgetSize = 'normal' | 'maximized';
+// ─── Enums ──────────────────────────────────────────────────────────────────
+export type ChatStatus   = 'ACTIVE' | 'DISABLE' | 'MAINTENANCE';
+export type ChatType     = 'SUPPORT' | 'CHAT' | 'BOTH';
+export type UserType     = 'developer' | 'user';
+export type OnlineStatus = 'online' | 'away' | 'offline';
+export type BottomTab    = 'home' | 'chats' | 'tickets';
+export type Screen       =
+  | 'home'
+  | 'user-list'
+  | 'chat'
+  | 'recent-chats'
+  | 'tickets'
+  | 'block-list'
+  | 'call';
+export type UserListContext = 'support' | 'conversation';
+export type MessageType = 'text' | 'voice' | 'attachment' | 'emoji';
 
-// ─── Data Models ──────────────────────────────────────────────────────────────
+// ─── User ───────────────────────────────────────────────────────────────────
 export interface ChatUser {
-  name: string;
   uid: string;
+  name: string;
   email: string;
   mobile: string;
   project: string;
   type: UserType;
+  avatar: string | null;
+  status: OnlineStatus;
+  designation: string;
 }
 
+// ─── Message ────────────────────────────────────────────────────────────────
 export interface ChatMessage {
   id: string;
   senderId: string;
   receiverId: string;
   text: string;
-  timestamp: Date;
+  timestamp: string;
+  type: MessageType;
   status: 'sent' | 'delivered' | 'read';
+  attachmentName?: string;
+  attachmentSize?: string;
+  voiceDuration?: number;  // seconds
+}
+
+// ─── Ticket ─────────────────────────────────────────────────────────────────
+export interface Ticket {
+  id: string;
+  title: string;
+  description: string;
+  status: 'open' | 'in-progress' | 'resolved' | 'closed';
+  priority: 'low' | 'medium' | 'high';
+  createdAt: string;
+  updatedAt: string;
+  assignedTo: string | null;
 }
 
+// ─── Recent Chat ─────────────────────────────────────────────────────────────
 export interface RecentChat {
   id: string;
   user: ChatUser;
   lastMessage: string;
-  lastTime: Date;
+  lastTime: string;
   unread: number;
+  isPaused: boolean;
 }
 
-export interface Ticket {
-  id: string;
-  title: string;
-  description: string;
-  status: 'open' | 'in-progress' | 'resolved' | 'closed';
-  priority: 'low' | 'medium' | 'high';
-  createdAt: Date;
-  updatedAt: Date;
+// ─── Call ───────────────────────────────────────────────────────────────────
+export type CallState = 'idle' | 'calling' | 'connected' | 'ended';
+
+export interface CallSession {
+  state: CallState;
+  peer: ChatUser | null;
+  startedAt: Date | null;
+  isMuted: boolean;
+  isCameraOn: boolean;
 }
 
-// ─── Config ───────────────────────────────────────────────────────────────────
-export interface ChatConfig {
-  hostUrl: string;
-  hostPort: number | null;   // optional
-  userListEndpoint: string;
-  status: ChatStatus;
-  chatType: ChatType;
+// ─── Local env config ────────────────────────────────────────────────────────
+export interface LocalEnvConfig {
+  apiKey: string;
+  widgetId: string;
 }
 
-// ─── Theme ────────────────────────────────────────────────────────────────────
+// ─── Theme prop (still overridable) ─────────────────────────────────────────
 export interface ChatWidgetTheme {
-  primaryColor?: string;        // teal header + accents (default: #1aaa96)
+  primaryColor?: string;
   fontFamily?: string;
   buttonColor?: string;
   buttonTextColor?: string;
   buttonLabel?: string;
   buttonPosition?: 'bottom-right' | 'bottom-left';
   borderRadius?: string;
-  backgroundColor?: string;
 }
 
 export interface ChatWidgetProps {

package/src/utils/chat.ts

@@ -0,0 +1,70 @@
+import { ChatMessage, ChatUser } from '../types';
+
+/** Generate a consistent avatar color from a name */
+export function avatarColor(name: string): string {
+  const palette = [
+    '#2563EB','#7C3AED','#059669','#D97706',
+    '#DC2626','#0891B2','#4F46E5','#BE185D',
+  ];
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  return palette[Math.abs(hash) % palette.length];
+}
+
+/** Get initials from full name */
+export function initials(name: string): string {
+  return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+}
+
+/** Format timestamp to readable time string */
+export function formatTime(ts: string | Date): string {
+  return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+/** Format date for chat separators */
+export function formatDate(ts: string | Date): string {
+  const d = new Date(ts);
+  const today = new Date();
+  const yesterday = new Date(today); yesterday.setDate(today.getDate() - 1);
+  if (d.toDateString() === today.toDateString())     return 'Today';
+  if (d.toDateString() === yesterday.toDateString()) return 'Yesterday';
+  return d.toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+/** Generate a plain-text transcript from messages */
+export function generateTranscript(
+  messages: ChatMessage[],
+  peer: ChatUser,
+  myName = 'Me'
+): string {
+  const header = [
+    '═══════════════════════════════════════',
+    '  CHAT TRANSCRIPT',
+    `  Conversation with: ${peer.name} (${peer.email})`,
+    `  Downloaded: ${new Date().toLocaleString()}`,
+    '═══════════════════════════════════════',
+    '',
+  ].join('\n');
+
+  const body = messages.map(m => {
+    const sender = m.senderId === 'me' ? myName : peer.name;
+    const time   = new Date(m.timestamp).toLocaleString();
+    const label  = m.type === 'voice'      ? '[Voice Message]'
+                 : m.type === 'attachment' ? `[Attachment: ${m.attachmentName ?? 'file'}]`
+                 : m.text;
+    return `[${time}] ${sender}: ${label}`;
+  }).join('\n');
+
+  return header + body;
+}
+
+/** Trigger a file download in the browser */
+export function downloadText(content: string, filename: string) {
+  const blob = new Blob([content], { type: 'text/plain' });
+  const url  = URL.createObjectURL(blob);
+  const a    = document.createElement('a');
+  a.href     = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}

package/src/utils/theme.ts

@@ -1,16 +1,27 @@
 import { ChatWidgetTheme } from '../types';
 
 export const defaultTheme: Required<ChatWidgetTheme> = {
-  primaryColor:    '#1aaa96',
+  primaryColor:    '#2563EB',
   fontFamily:      "'DM Sans', 'Segoe UI', sans-serif",
-  buttonColor:     '#1aaa96',
+  buttonColor:     '#2563EB',
   buttonTextColor: '#ffffff',
-  buttonLabel:     'Chat with us',
+  buttonLabel:     'Support',
   buttonPosition:  'bottom-right',
-  borderRadius:    '16px',
-  backgroundColor: '#ffffff',
+  borderRadius:    '0px',   // drawer uses 16px only on top-left / bottom-left
 };
 
-export function mergeTheme(custom?: ChatWidgetTheme): Required<ChatWidgetTheme> {
-  return { ...defaultTheme, ...custom };
+export function mergeTheme(
+  remote?: Partial<ChatWidgetTheme>,
+  local?: ChatWidgetTheme
+): Required<ChatWidgetTheme> {
+  return { ...defaultTheme, ...remote, ...local };
+}
+
+/** Darken a hex color by `amount` (0-255) */
+export function darken(hex: string, amount = 20): string {
+  const n = parseInt(hex.replace('#', ''), 16);
+  const r = Math.max(0, (n >> 16) - amount);
+  const g = Math.max(0, ((n >> 8) & 0xff) - amount);
+  const b = Math.max(0, (n & 0xff) - amount);
+  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
 }

package/dist/hooks/useUsers.d.ts

@@ -1,7 +0,0 @@
-import { ChatUser, UserType } from '../types';
-export declare function useUsers(url: string, filterType?: UserType, enabled?: boolean): {
-    users: ChatUser[];
-    loading: boolean;
-    error: string | null;
-    refetch: () => Promise<void>;
-};

package/dist/hooks/useUsers.js

@@ -1,26 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import { fetchUsers } from '../services/userService';
-export function useUsers(url, filterType, enabled = true) {
-    const [users, setUsers] = useState([]);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(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/dist/services/userService.d.ts

@@ -1,2 +0,0 @@
-import { ChatUser } from '../types';
-export declare function fetchUsers(url: string): Promise<ChatUser[]>;

package/dist/services/userService.js

@@ -1,9 +0,0 @@
-export async function fetchUsers(url) {
-    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;
-}

package/dist/src/components/ChatScreen/index.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { ChatMessage, ChatUser, ChatWidgetTheme } from '../../types';
-interface ChatScreenProps {
-    activeUser: ChatUser;
-    messages: ChatMessage[];
-    onSend: (text: string) => void;
-    onBack: () => void;
-    onClose: () => void;
-    theme?: ChatWidgetTheme;
-}
-export declare const ChatScreen: React.FC<ChatScreenProps>;
-export {};

package/dist/src/components/ChatScreen/index.js

@@ -1,83 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
-import { mergeTheme } from '../../utils/theme';
-export const ChatScreen = ({ activeUser, messages, onSend, onBack, onClose, theme, }) => {
-    const t = mergeTheme(theme);
-    const [text, setText] = useState('');
-    const endRef = useRef(null);
-    const inputRef = useRef(null);
-    useEffect(() => { var _a; (_a = endRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' }); }, [messages]);
-    const handleSend = () => {
-        var _a;
-        if (!text.trim())
-            return;
-        onSend(text);
-        setText('');
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    const handleKey = (e) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            handleSend();
-        }
-    };
-    const initials = activeUser.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideInRight 0.25s ease' }, children: [_jsxs("div", { style: {
-                    backgroundColor: t.primaryColor,
-                    padding: '14px 18px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '10px',
-                    flexShrink: 0,
-                }, children: [_jsx("button", { onClick: onBack, style: iconBtnStyle, children: _jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M19 12H5M5 12L12 19M5 12L12 5", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("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,
-                        }, children: initials }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: '14px', color: '#fff', fontFamily: t.fontFamily }, children: activeUser.name }), _jsxs("div", { style: { fontSize: '11px', color: 'rgba(255,255,255,0.8)', display: 'flex', alignItems: 'center', gap: 4 }, children: [_jsx("span", { style: { width: 6, height: 6, borderRadius: '50%', backgroundColor: '#a8f0c6', display: 'inline-block' } }), "Online"] })] }), _jsx("button", { onClick: onClose, style: iconBtnStyle, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round" }) }) })] }), _jsxs("div", { style: {
-                    flex: 1, overflowY: 'auto', padding: '18px 16px',
-                    display: 'flex', flexDirection: 'column', gap: '10px',
-                    backgroundColor: '#f7f8fc',
-                }, children: [messages.length === 0 && (_jsxs("div", { style: {
-                            margin: 'auto', textAlign: 'center',
-                            fontSize: '13px', color: '#b0bec5',
-                            fontFamily: t.fontFamily,
-                        }, children: [_jsx("div", { style: { fontSize: '28px', marginBottom: 8 }, children: "\uD83D\uDCAC" }), "Say hi to ", activeUser.name, "!"] })), messages.map(msg => (_jsx(Bubble, { msg: msg, primaryColor: t.primaryColor, font: t.fontFamily }, msg.id))), _jsx("div", { ref: endRef })] }), _jsxs("div", { style: {
-                    borderTop: '1px solid #eef0f5',
-                    padding: '10px 14px',
-                    backgroundColor: '#fff',
-                    display: 'flex',
-                    alignItems: 'flex-end',
-                    gap: '10px',
-                    flexShrink: 0,
-                }, children: [_jsx("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',
-                        } }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }, children: [_jsx(IconBtn, { onClick: () => { }, title: "Reaction", children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [_jsx("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" }), _jsx("path", { d: "M8 15s1.5 2 4 2 4-2 4-2", stroke: "#9aa3af", strokeWidth: "1.8", strokeLinecap: "round" })] }) }), _jsx(IconBtn, { onClick: () => { }, title: "Attach", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: _jsx("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" }) }) }), _jsx(IconBtn, { onClick: () => { }, title: "Emoji", children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "#9aa3af", strokeWidth: "1.8" }), _jsx("path", { d: "M8 14s1.5 2 4 2 4-2 4-2", stroke: "#9aa3af", strokeWidth: "1.8", strokeLinecap: "round" }), _jsx("line", { x1: "9", y1: "9", x2: "9.01", y2: "9", stroke: "#9aa3af", strokeWidth: "2.5", strokeLinecap: "round" }), _jsx("line", { x1: "15", y1: "9", x2: "15.01", y2: "9", stroke: "#9aa3af", strokeWidth: "2.5", strokeLinecap: "round" })] }) }), text.trim() && (_jsx("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',
-                                }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] })] })] }));
-};
-const Bubble = ({ msg, primaryColor, font }) => {
-    const isMe = msg.senderId === 'me';
-    const time = new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: isMe ? 'flex-end' : 'flex-start', gap: 3 }, children: [_jsx("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',
-                }, children: msg.text }), _jsx("span", { style: { fontSize: '11px', color: '#b0bec5', padding: '0 4px' }, children: time })] }));
-};
-const IconBtn = ({ onClick, title, children }) => (_jsx("button", { onClick: onClick, title: title, style: { background: 'none', border: 'none', cursor: 'pointer', padding: '4px', display: 'flex', alignItems: 'center', borderRadius: '6px' }, onMouseEnter: e => e.currentTarget.style.background = '#f3f4f6', onMouseLeave: e => e.currentTarget.style.background = 'none', children: children }));
-const iconBtnStyle = {
-    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,
-};

package/dist/src/components/ChatWidget.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ChatWidgetProps } from '../types';
-export declare const ChatWidget: React.FC<ChatWidgetProps>;
-export default ChatWidget;