ajaxter-chat 1.0.3 → 3.0.1

package/README.md

@@ -1,303 +1,186 @@
-# Chat Widget
+# react-chat-widget-extension v3
 
-A reusable, fully configurable floating chat widget for **React.js** and **Next.js** applications.
-
-- ✅ Environment-variable-driven behavior (status, type, API endpoint)
-- ✅ Fully themeable via a `theme` prop (colors, fonts, button, position)
-- ✅ SSR-safe — works with Next.js App Router and Pages Router
-- ✅ TypeScript-first
-- ✅ WebSocket-ready architecture
-- ✅ Loading skeletons, empty states, error handling built in
-
----
-
-## Folder Structure
-
-```
-my_first_project/
-├── src/
-│   ├── index.ts                        # Public API exports
-│   ├── types/
-│   │   └── index.ts                    # All TypeScript types & interfaces
-│   ├── config/
-│   │   └── index.ts                    # Env variable loader (Next.js + React safe)
-│   ├── services/
-│   │   └── userService.ts              # Fetch users from API
-│   ├── hooks/
-│   │   ├── useUsers.ts                 # Fetch & filter users hook
-│   │   └── useChat.ts                  # Chat state & message management hook
-│   ├── utils/
-│   │   └── theme.ts                    # Theme merging & CSS variable utilities
-│   └── components/
-│       ├── ChatWidget.tsx              # 🏠 Root widget — mount this in your app
-│       ├── ChatButton/
-│       │   └── index.tsx               # Floating action button
-│       ├── ChatWindow/
-│       │   └── index.tsx               # Expandable chat panel
-│       ├── UserList/
-│       │   └── index.tsx               # User list with loading/error/empty states
-│       ├── ChatBox/
-│       │   └── index.tsx               # Conversation panel + message input
-│       └── MaintenanceView/
-│           └── index.tsx               # Shown when CHAT_STATUS=MAINTENANCE
-├── examples/
-│   ├── react-app/
-│   │   ├── .env.example                # React env variables template
-│   │   └── App.tsx                     # React usage example
-│   └── nextjs-app/
-│       ├── .env.local.example          # Next.js env variables template
-│       ├── app/
-│       │   ├── layout.tsx              # App Router: root layout
-│       │   ├── ChatWidgetWrapper.tsx   # App Router: 'use client' boundary
-│       │   └── page.tsx                # App Router: home page
-│       └── pages/
-│           ├── _app.tsx                # Pages Router: global app
-│           └── index.tsx               # Pages Router: index page
-├── package.json
-├── tsconfig.json
-└── README.md
-```
+A production-ready **drawer/slider-based** chat widget for React.js and Next.js.
+All configuration is loaded remotely from your hosted `chatData.json`.
 
 ---
 
-## Installation
-
-```bash
-npm install ajaxter-chat
-# or
-yarn add ajaxter-chat
-```
-
----
-
-## Environment Variables
-
-### React.js (.env)
+## Setup (2 env vars only)
 
+### React (.env)
 ```env
-REACT_APP_CHAT_HOST_URL=http://your-api.com
-REACT_APP_CHAT_HOST_PORT=4000
-REACT_APP_CHAT_USER_LIST=api/v1/chat/users
-REACT_APP_CHAT_STATUS=ACTIVE
-REACT_APP_CHAT_TYPE=BOTH
+REACT_APP_CHAT_API_KEY=demo1234
+REACT_APP_CHAT_WIDGET_ID=demo
 ```
 
 ### Next.js (.env.local)
-
 ```env
-NEXT_PUBLIC_CHAT_HOST_URL=http://your-api.com
-NEXT_PUBLIC_CHAT_HOST_PORT=4000
-NEXT_PUBLIC_CHAT_USER_LIST=api/v1/chat/users
-NEXT_PUBLIC_CHAT_STATUS=ACTIVE
-NEXT_PUBLIC_CHAT_TYPE=BOTH
+NEXT_PUBLIC_CHAT_API_KEY=demo1234
+NEXT_PUBLIC_CHAT_WIDGET_ID=demo
 ```
 
-### Variable Reference
-
-| Variable           | Type                                  | Description                              |
-|--------------------|---------------------------------------|------------------------------------------|
-| `CHAT_HOST_URL`    | string                                | Base URL of your chat/user API           |
-| `CHAT_HOST_PORT`   | number                                | Port for your API server                 |
-| `CHAT_USER_LIST`   | string                                | User list URL — see **User List API** below |
-| `CHAT_STATUS`      | `ACTIVE` \| `DISABLE` \| `MAINTENANCE` | Controls widget visibility & state       |
-| `CHAT_TYPE`        | `SUPPORT` \| `CHAT` \| `BOTH`         | Controls which users are shown           |
-
----
-
-## CHAT_STATUS Behavior
-
-| Value           | Behavior                                                      |
-|-----------------|---------------------------------------------------------------|
-| `ACTIVE`        | Widget is fully enabled                                        |
-| `DISABLE`       | Widget is **not rendered at all** — zero DOM footprint        |
-| `MAINTENANCE`   | Widget opens but shows a maintenance message (non-interactive)|
-
 ---
 
-## CHAT_TYPE Behavior
-
-| Value     | User List Shown                          | UI                          |
-|-----------|------------------------------------------|-----------------------------|
-| `SUPPORT` | Only `type: "developer"` users           | Single panel                |
-| `CHAT`    | Only `type: "user"` users                | Single panel                |
-| `BOTH`    | Both developers and users                | Two tabs (Support / Users)  |
-
----
+## Remote Config URL
 
-## User List API
-
-The widget calls `CHAT_USER_LIST` in three ways:
-
-1. **Same-origin / BFF (recommended)** — value starts with `/`, e.g. `/api/v1/chat/users`. The browser only shows a request to **your** app; your route handler proxies to the real API server-side, so the upstream URL (e.g. `http://your-api.com:4000/...`) does not appear as the client request URL in DevTools.
-2. **Full URL** — value starts with `http://` or `https://`; that exact URL is fetched (visible in Network).
-3. **Legacy** — otherwise it is built as  
-   `CHAT_HOST_URL` + optional `:CHAT_HOST_PORT` + path.
-
-Example (Next.js route at `app/api/v1/chat/users/route.ts` that forwards to your backend):
-
-```env
-NEXT_PUBLIC_CHAT_USER_LIST=/api/v1/chat/users
+The widget fetches all config from:
 ```
-
-Legacy example:
-
+GET https://window.mscorpres.com/TEST/chatData.json
 ```
-GET ${CHAT_HOST_URL}:${CHAT_HOST_PORT}/${CHAT_USER_LIST}
+With headers:
 ```
+X-Chat-Api-Key:   demo1234
+X-Chat-Widget-Id: demo
+```
+
+---
+
+## chatData.json Schema
 
-Expected response:
+Host this file at the URL above:
 
 ```json
-[
-  {
-    "name": "Alice Dev",
-    "uid": "uid_001",
-    "email": "alice@company.com",
-    "mobile": "+1234567890",
-    "project": "Platform Team",
-    "type": "developer"
+{
+  "widget": {
+    "id": "demo",
+    "apiKey": "demo1234",
+    "status": "ACTIVE",
+    "chatType": "BOTH",
+    "primaryColor": "#2563EB",
+    "buttonLabel": "Support",
+    "buttonPosition": "bottom-right",
+    "welcomeTitle": "Hi there 👋",
+    "welcomeSubtitle": "Need help? Start a conversation:",
+    "allowVoiceMessage": true,
+    "allowAttachment": true,
+    "allowEmoji": true,
+    "allowWebCall": true,
+    "maxEmojiCount": 20,
+    "allowTranscriptDownload": true,
+    "allowReport": true,
+    "allowBlock": true
   },
-  {
-    "name": "Bob Smith",
-    "uid": "uid_002",
-    "email": "bob@client.com",
-    "mobile": "+0987654321",
-    "project": "Client Portal",
-    "type": "user"
-  }
-]
+  "developers": [ { "uid":"dev_001","name":"...","type":"developer","status":"online", ... } ],
+  "users":      [ { "uid":"usr_001","name":"...","type":"user","status":"online", ... }      ],
+  "sampleChats":   { "dev_001": [ { "id":"msg_001","senderId":"me","text":"Hi!","type":"text", ... } ] },
+  "sampleTickets": [ { "id":"TKT-0001","title":"...","status":"open","priority":"high", ... } ],
+  "blockedUsers":  []
+}
 ```
 
 ---
 
 ## Usage
 
-### React.js
-
+### React
 ```tsx
-// App.tsx
-import { ChatWidget } from 'ajaxter-chat';
-
-function App() {
-  return (
-    <div>
-      <main>Your app content</main>
-
-      <ChatWidget
-        theme={{
-          primaryColor: '#6C63FF',
-          buttonColor: '#6C63FF',
-          buttonTextColor: '#ffffff',
-          buttonLabel: 'Chat with us',
-          buttonPosition: 'bottom-right',
-          fontFamily: "'DM Sans', sans-serif",
-          borderRadius: '16px',
-        }}
-      />
-    </div>
-  );
+import { ChatWidget } from 'react-chat-widget-extension';
+export default function App() {
+  return <><main>App</main><ChatWidget /></>;
 }
 ```
 
-### Next.js — App Router
-
+### Next.js App Router
 ```tsx
 // app/ChatWidgetWrapper.tsx
 'use client';
-import { ChatWidget } from 'ajaxter-chat';
-
-export function ChatWidgetWrapper() {
-  return <ChatWidget theme={{ primaryColor: '#0ea5e9' }} />;
-}
-```
+import { ChatWidget } from 'react-chat-widget-extension';
+export function ChatWidgetWrapper() { return <ChatWidget />; }
 
-```tsx
 // app/layout.tsx
 import { ChatWidgetWrapper } from './ChatWidgetWrapper';
-
-export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body>
-        {children}
-        <ChatWidgetWrapper />
-      </body>
-    </html>
-  );
+export default function Layout({ children }) {
+  return <html><body>{children}<ChatWidgetWrapper /></body></html>;
 }
 ```
 
-### Next.js — Pages Router
-
+### Next.js Pages Router
 ```tsx
 // pages/_app.tsx
-import { ChatWidget } from 'ajaxter-chat';
-
+import { ChatWidget } from 'react-chat-widget-extension';
 export default function MyApp({ Component, pageProps }) {
-  return (
-    <>
-      <Component {...pageProps} />
-      <ChatWidget theme={{ primaryColor: '#10b981' }} />
-    </>
-  );
+  return <><Component {...pageProps}/><ChatWidget /></>;
 }
 ```
 
 ---
 
-## Theme Props
-
-All theme properties are **optional**. Defaults are used when omitted.
-
-```tsx
-interface ChatWidgetTheme {
-  fontFamily?: string;       // Default: "'DM Sans', 'Segoe UI', sans-serif"
-  primaryColor?: string;     // Default: '#6C63FF'  — header, accents, active states
-  backgroundColor?: string;  // Default: '#ffffff'  — widget panel background
-  buttonColor?: string;      // Default: '#6C63FF'  — floating button background
-  buttonTextColor?: string;  // Default: '#ffffff'  — floating button text/icon color
-  buttonLabel?: string;      // Default: 'Chat with us'
-  buttonPosition?: 'bottom-right' | 'bottom-left'; // Default: 'bottom-right'
-  borderRadius?: string;     // Default: '16px'
-}
-```
+## Features
+
+| Feature | Details |
+|---|---|
+| **Drawer/Slider UI** | Slides in from right (or left) with smooth animation. Backdrop closes it. |
+| **Home Screen** | "Hi there 👋" hero, cards for Support / New Conversation / Raise Ticket |
+| **User List** | Slide-in panel with online status dot, designation, project |
+| **Chat Screen** | Matches the UI image — hamburger back, title "Support", phone + fullscreen icons |
+| **Enter Your Details** | Blue card at top of chat (ticket chat body placeholder) |
+| **Voice Messages** | Record via MediaRecorder API, shows duration |
+| **Attachments** | File picker, shows filename + size as message |
+| **Emoji Picker** | 20 curated emojis, limited count via `maxEmojiCount` |
+| **Pause Chat** | Developer can pause — user cannot send messages |
+| **Resume Chat** | One-click resume from banner or menu |
+| **Report Chat** | Flags chat, shows warning banner |
+| **Block User** | Blocks users only (not developers), with confirm dialog |
+| **Block List Tab** | View all blocked users, one-click unblock |
+| **Download Transcript** | Saves plain-text .txt file of full conversation |
+| **WebRTC Calls** | Secure P2P voice/video call with mute + camera toggle |
+| **Ticket Screen** | Raise tickets with title, description, priority selector |
+| **Ticket History** | Shows all tickets with status badge and priority color |
+| **Recent Chats Tab** | Shows past conversations with unread badges |
+| **Maximize/Minimize** | Toggle drawer width 380px ↔ 480px |
+| **Slide Close** | Smooth slide-out animation on close |
+| **SSR Safe** | isMounted guard, works in Next.js App Router and Pages Router |
+| **CHAT_STATUS** | ACTIVE / DISABLE / MAINTENANCE handled |
 
 ---
 
-## WebSocket Integration
-
-The `useChat` hook is ready for WebSocket integration. Look for the `TODO` comments in:
-
-- `src/hooks/useChat.ts` → Add `socket.emit('message', newMsg)` in `sendMessage`
-- `src/hooks/useChat.ts` → Add `socket.on('message', ...)` listener in `selectUser`
-- `src/components/ChatWindow/index.tsx` → Initialize socket connection on mount
-
-Example with socket.io:
+## WebSocket Integration Points
 
+In `src/hooks/useChat.ts` — find the `// TODO:` comments:
 ```ts
-// In useChat.ts — sendMessage
-socket.emit('chat:message', { to: activeUser.uid, text });
+// In selectUser:
+// socket.emit('join', { roomId: user.uid });
+// socket.on('message', msg => setMessages(prev => [...prev, msg]));
 
-// In useChat.ts — selectUser
-socket.on('chat:message', (msg: ChatMessage) => {
-  setMessages((prev) => [...prev, msg]);
-});
+// In sendMessage:
+// socket.emit('message', msg);
 ```
 
----
-
-## Build
-
-```bash
-cd my_first_project
-npm install
-npm run build        # Compile TypeScript → dist/
-npm run type-check   # Verify types without emitting
-npm run dev          # Watch mode
+In `src/hooks/useWebRTC.ts` — find the `// TODO:` comments:
+```ts
+// ICE candidate: socket.emit('ice-candidate', { candidate, to: peer.uid });
+// Offer:         socket.emit('call-offer', { offer, to: peer.uid });
+// Answer:        socket.emit('call-answer', { answer, to: peer.uid });
 ```
 
 ---
 
-## License
+## Folder Structure
 
-MIT
+```
+src/
+├── index.ts
+├── types/index.ts
+├── config/index.ts              ← reads CHAT_API_KEY + CHAT_WIDGET_ID, fetches chatData.json
+├── utils/theme.ts
+├── utils/chat.ts                ← transcript, avatarColor, formatTime, downloadText
+├── hooks/
+│   ├── useRemoteConfig.ts       ← fetches chatData.json
+│   ├── useChat.ts               ← messages, pause, report
+│   └── useWebRTC.ts             ← P2P WebRTC calling
+└── components/
+    ├── ChatWidget.tsx            ← 🏠 Root drawer orchestrator
+    ├── HomeScreen/
+    ├── UserListScreen/
+    ├── ChatScreen/               ← voice, attach, emoji, pause, report, block, transcript, call
+    ├── CallScreen/               ← WebRTC video/audio UI
+    ├── EmojiPicker/
+    ├── TicketScreen/
+    ├── RecentChatsScreen/
+    ├── BlockList/
+    ├── MaintenanceView/
+    └── Tabs/BottomTabs.tsx       ← Home / Chats / Tickets / Blocked
+
+public/
+└── chatData.json                 ← Sample JSON — host at window.mscorpres.com/TEST/chatData.json
+```

package/dist/components/BlockList/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ChatUser, WidgetConfig } from '../../types';
+interface BlockListScreenProps {
+    blockedUsers: ChatUser[];
+    config: WidgetConfig;
+    onUnblock: (uid: string) => void;
+    onBack: () => void;
+}
+export declare const BlockListScreen: React.FC<BlockListScreenProps>;
+export {};

package/dist/components/BlockList/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { avatarColor, initials } from '../../utils/chat';
+export const BlockListScreen = ({ blockedUsers, config, onUnblock, onBack, }) => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideIn 0.22s ease' }, children: [_jsxs("div", { style: {
+                background: `linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
+                padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0,
+            }, children: [_jsx("button", { onClick: onBack, style: backBtnStyle, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M19 12H5M5 12L12 19M5 12L12 5", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: 16, color: '#fff' }, children: "Block List" }), _jsxs("div", { style: { fontSize: 12, color: 'rgba(255,255,255,0.8)' }, children: [blockedUsers.length, " blocked user", blockedUsers.length !== 1 ? 's' : ''] })] })] }), _jsx("div", { style: { flex: 1, overflowY: 'auto' }, children: blockedUsers.length === 0 ? (_jsxs("div", { style: { padding: '50px 24px', textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 36, marginBottom: 10 }, children: "\u2705" }), _jsx("div", { style: { fontWeight: 700, color: '#1a2332', marginBottom: 6 }, children: "No blocked users" }), _jsx("div", { style: { fontSize: 13, color: '#7b8fa1' }, children: "Users you block will appear here" })] })) : (blockedUsers.map((user, i) => (_jsxs("div", { style: {
+                    padding: '13px 16px', display: 'flex', alignItems: 'center', gap: 13,
+                    borderBottom: '1px solid #f0f2f5',
+                    animation: `cw-fadeUp 0.28s ease both`, animationDelay: `${i * 0.05}s`,
+                }, children: [_jsx("div", { style: {
+                            width: 44, height: 44, borderRadius: '50%',
+                            backgroundColor: avatarColor(user.name),
+                            display: 'flex', alignItems: 'center', justifyContent: 'center',
+                            color: '#fff', fontWeight: 700, fontSize: 14, flexShrink: 0,
+                            filter: 'grayscale(0.6)', opacity: 0.7,
+                        }, children: initials(user.name) }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: 14, color: '#6b7280' }, children: user.name }), _jsx("div", { style: { fontSize: 12, color: '#9ca3af', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: user.email })] }), _jsx("button", { onClick: () => onUnblock(user.uid), style: {
+                            padding: '6px 14px', borderRadius: 20,
+                            border: `1.5px solid ${config.primaryColor}`,
+                            background: 'transparent', color: config.primaryColor,
+                            fontSize: 12, fontWeight: 700, cursor: 'pointer',
+                            transition: 'all 0.15s', flexShrink: 0,
+                        }, onMouseEnter: e => {
+                            e.currentTarget.style.background = config.primaryColor;
+                            e.currentTarget.style.color = '#fff';
+                        }, onMouseLeave: e => {
+                            e.currentTarget.style.background = 'transparent';
+                            e.currentTarget.style.color = config.primaryColor;
+                        }, children: "Unblock" })] }, user.uid)))) })] }));
+const backBtnStyle = {
+    background: 'rgba(255,255,255,0.22)', border: 'none', borderRadius: '50%',
+    width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center',
+    cursor: 'pointer', flexShrink: 0,
+};

package/dist/components/CallScreen/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CallSession } from '../../types';
+interface CallScreenProps {
+    session: CallSession;
+    localVideoRef: React.RefObject<HTMLVideoElement | null>;
+    remoteVideoRef: React.RefObject<HTMLVideoElement | null>;
+    onEnd: () => void;
+    onToggleMute: () => void;
+    onToggleCamera: () => void;
+    primaryColor: string;
+}
+export declare const CallScreen: React.FC<CallScreenProps>;
+export {};

package/dist/components/CallScreen/index.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { avatarColor, initials } from '../../utils/chat';
+export const CallScreen = ({ session, localVideoRef, remoteVideoRef, onEnd, onToggleMute, onToggleCamera, primaryColor, }) => {
+    const [duration, setDuration] = useState(0);
+    const peer = session.peer;
+    useEffect(() => {
+        if (session.state !== 'connected' || !session.startedAt)
+            return;
+        const t = setInterval(() => {
+            setDuration(Math.floor((Date.now() - session.startedAt.getTime()) / 1000));
+        }, 1000);
+        return () => clearInterval(t);
+    }, [session.state, session.startedAt]);
+    const mins = String(Math.floor(duration / 60)).padStart(2, '0');
+    const secs = String(duration % 60).padStart(2, '0');
+    return (_jsxs("div", { style: {
+            display: 'flex', flexDirection: 'column', height: '100%',
+            background: session.isCameraOn ? '#000' : `linear-gradient(145deg,${primaryColor}dd,#0f172a)`,
+            color: '#fff', animation: 'cw-slideIn 0.22s ease',
+            position: 'relative', overflow: 'hidden',
+        }, children: [_jsx("video", { ref: remoteVideoRef, autoPlay: true, playsInline: true, style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: session.state === 'connected' ? 1 : 0 } }), _jsx("video", { ref: localVideoRef, autoPlay: true, playsInline: true, muted: true, style: {
+                    position: 'absolute', bottom: 120, right: 14,
+                    width: 90, height: 120, borderRadius: 10,
+                    objectFit: 'cover', border: '2px solid rgba(255,255,255,0.3)',
+                    display: session.isCameraOn ? 'block' : 'none',
+                    zIndex: 10,
+                } }), _jsxs("div", { style: { position: 'relative', zIndex: 5, display: 'flex', flexDirection: 'column', height: '100%', background: 'rgba(0,0,0,0.35)' }, children: [_jsx("div", { style: { padding: '16px 18px', display: 'flex', alignItems: 'center', gap: 10 }, children: _jsx("div", { style: { flex: 1 }, children: _jsxs("div", { style: { fontWeight: 700, fontSize: 15, color: '#fff' }, children: [session.state === 'calling' && 'Calling...', session.state === 'connected' && 'Connected', session.state === 'ended' && 'Call Ended'] }) }) }), _jsx("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16 }, children: peer && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                                        width: 90, height: 90, borderRadius: '50%',
+                                        backgroundColor: avatarColor(peer.name),
+                                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                        fontSize: 28, fontWeight: 700, color: '#fff',
+                                        boxShadow: '0 0 0 4px rgba(255,255,255,0.2)',
+                                        animation: session.state === 'calling' ? 'cw-pulse 1.5s ease infinite' : 'none',
+                                    }, children: initials(peer.name) }), _jsxs("div", { style: { textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 20, fontWeight: 800 }, children: peer.name }), _jsxs("div", { style: { fontSize: 13, opacity: 0.8, marginTop: 4 }, children: [session.state === 'calling' && 'Ringing...', session.state === 'connected' && `${mins}:${secs}`, session.state === 'ended' && 'Call ended'] })] })] })) }), _jsxs("div", { style: { padding: '24px', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 20 }, children: [_jsx(CallBtn, { active: session.isMuted, activeColor: "#374151", onClick: onToggleMute, title: session.isMuted ? 'Unmute' : 'Mute', children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: session.isMuted
+                                        ? _jsxs(_Fragment, { children: [_jsx("path", { d: "M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z", stroke: "#fff", strokeWidth: "2" }), _jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23", stroke: "#ef4444", strokeWidth: "2" })] })
+                                        : _jsxs(_Fragment, { children: [_jsx("path", { d: "M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round" }), _jsx("path", { d: "M19 10v2a7 7 0 01-14 0v-2M12 19v4", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round" })] }) }) }), _jsx("button", { onClick: onEnd, style: {
+                                    width: 60, height: 60, borderRadius: '50%', backgroundColor: '#ef4444',
+                                    border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                    boxShadow: '0 4px 16px rgba(239,68,68,0.5)', flexShrink: 0,
+                                }, children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8a19.79 19.79 0 01-3.07-8.68A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z", fill: "#fff", transform: "rotate(135 12 12)" }) }) }), _jsx(CallBtn, { active: session.isCameraOn, activeColor: primaryColor, onClick: onToggleCamera, title: "Camera", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M23 7l-7 5 7 5V7zM1 5h13a2 2 0 012 2v10a2 2 0 01-2 2H1a2 2 0 01-2-2V7a2 2 0 012-2z", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] })] }));
+};
+const CallBtn = ({ active, activeColor, onClick, title, children, }) => (_jsx("button", { onClick: onClick, title: title, style: {
+        width: 50, height: 50, borderRadius: '50%',
+        backgroundColor: active ? activeColor : 'rgba(255,255,255,0.2)',
+        border: 'none', cursor: 'pointer',
+        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+    }, children: children }));

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ChatMessage, ChatUser, WidgetConfig } from '../../types';
+interface ChatScreenProps {
+    activeUser: ChatUser;
+    messages: ChatMessage[];
+    config: WidgetConfig;
+    isPaused: boolean;
+    isReported: boolean;
+    isBlocked: boolean;
+    onSend: (text: string, type?: ChatMessage['type'], extra?: Partial<ChatMessage>) => void;
+    onBack: () => void;
+    onClose: () => void;
+    onTogglePause: () => void;
+    onReport: () => void;
+    onBlock: () => void;
+    onStartCall: (withVideo: boolean) => void;
+}
+export declare const ChatScreen: React.FC<ChatScreenProps>;
+export {};