ajaxter-chat 2.0.1 → 3.0.1

package/README.md

@@ -1,82 +1,71 @@
-# react-chat-widget-extension v2
+# react-chat-widget-extension v3
 
-A drop-in floating chat widget for **React.js** and **Next.js** with a multi-screen UI, ticket system, and full theme control.
+A production-ready **drawer/slider-based** chat widget for React.js and Next.js.
+All configuration is loaded remotely from your hosted `chatData.json`.
 
 ---
 
-## Screens & Navigation Flow
-
-```
-Floating Button
-    └── Opens Widget Window
-            ├── [Home Screen]          ← default on open
-            │       ├── Need Support   → [User List Screen: developers] → [Chat Screen]
-            │       ├── New Convo      → [User List Screen: users]      → [Chat Screen]
-            │       └── Raise Ticket   → [Ticket Screen]  (always shown)
-            │
-            ├── [Bottom Tab: Home]     ← Home screen
-            ├── [Bottom Tab: Chats]    ← Recent conversations list
-            └── [Bottom Tab: Tickets]  ← All raised tickets + new ticket form
-```
-
----
-
-## Environment Variables
+## Setup (2 env vars only)
 
 ### React (.env)
 ```env
-REACT_APP_CHAT_HOST_URL=http://your-api.com
-REACT_APP_CHAT_HOST_PORT=4000            # Optional — omit to use URL default port
-REACT_APP_CHAT_USER_LIST=api/v1/users
-REACT_APP_CHAT_STATUS=ACTIVE             # ACTIVE | DISABLE | MAINTENANCE
-REACT_APP_CHAT_TYPE=BOTH                 # SUPPORT | CHAT | 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          # Optional
-NEXT_PUBLIC_CHAT_USER_LIST=api/v1/users
-NEXT_PUBLIC_CHAT_STATUS=ACTIVE
-NEXT_PUBLIC_CHAT_TYPE=BOTH
+NEXT_PUBLIC_CHAT_API_KEY=demo1234
+NEXT_PUBLIC_CHAT_WIDGET_ID=demo
 ```
 
 ---
 
-## CHAT_STATUS Behaviour
-
-| Value         | Behaviour                                              |
-|---------------|--------------------------------------------------------|
-| `ACTIVE`      | Widget fully enabled                                   |
-| `DISABLE`     | Widget **not rendered at all** — zero DOM footprint    |
-| `MAINTENANCE` | Widget opens but shows a maintenance message           |
-
----
-
-## CHAT_TYPE Behaviour
-
-| Value     | Home Cards Shown                    | User List Filter  |
-|-----------|-------------------------------------|-------------------|
-| `SUPPORT` | Need Support only                   | `type=developer`  |
-| `CHAT`    | New Conversation only               | `type=user`       |
-| `BOTH`    | Both cards                          | Per card clicked  |
+## Remote Config URL
 
-> **Raise Ticket is always shown regardless of CHAT_TYPE.**
+The widget fetches all config from:
+```
+GET https://window.mscorpres.com/TEST/chatData.json
+```
+With headers:
+```
+X-Chat-Api-Key:   demo1234
+X-Chat-Widget-Id: demo
+```
 
 ---
 
-## User List API
+## chatData.json Schema
 
-```
-GET {CHAT_HOST_URL}[:{CHAT_HOST_PORT}]/{CHAT_USER_LIST}
-```
+Host this file at the URL above:
 
-Expected response:
 ```json
-[
-  { "name": "Alice", "uid": "u1", "email": "alice@co.com", "mobile": "", "project": "Platform", "type": "developer" },
-  { "name": "Bob",   "uid": "u2", "email": "bob@co.com",   "mobile": "", "project": "Portal",   "type": "user"      }
-]
+{
+  "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
+  },
+  "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":  []
+}
 ```
 
 ---
@@ -85,111 +74,113 @@ Expected response:
 
 ### React
 ```tsx
-// App.tsx
 import { ChatWidget } from 'react-chat-widget-extension';
-
 export default function App() {
-  return (
-    <>
-      <main>Your app</main>
-      <ChatWidget
-        theme={{
-          primaryColor:   '#1aaa96',
-          buttonLabel:    'Chat with us',
-          buttonPosition: 'bottom-right',
-        }}
-      />
-    </>
-  );
+  return <><main>App</main><ChatWidget /></>;
 }
 ```
 
-### Next.js — App Router
+### Next.js App Router
 ```tsx
 // app/ChatWidgetWrapper.tsx
 'use client';
 import { ChatWidget } from 'react-chat-widget-extension';
-export function ChatWidgetWrapper() {
-  return <ChatWidget theme={{ primaryColor: '#1aaa96' }} />;
-}
+export function ChatWidgetWrapper() { return <ChatWidget />; }
 
 // app/layout.tsx
 import { ChatWidgetWrapper } from './ChatWidgetWrapper';
-export default function RootLayout({ children }) {
+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 'react-chat-widget-extension';
 export default function MyApp({ Component, pageProps }) {
-  return <><Component {...pageProps} /><ChatWidget theme={{ primaryColor: '#1aaa96' }} /></>;
+  return <><Component {...pageProps}/><ChatWidget /></>;
 }
 ```
 
 ---
 
-## Theme Props (all optional)
-
-| Prop              | Type                               | Default                          | Description                          |
-|-------------------|------------------------------------|----------------------------------|--------------------------------------|
-| `primaryColor`    | `string`                           | `'#1aaa96'`                      | Header, active states, send button   |
-| `buttonColor`     | `string`                           | `'#1aaa96'`                      | Floating button background           |
-| `buttonTextColor` | `string`                           | `'#ffffff'`                      | Floating button text/icon            |
-| `buttonLabel`     | `string`                           | `'Chat with us'`                 | Floating button label                |
-| `buttonPosition`  | `'bottom-right' \| 'bottom-left'`  | `'bottom-right'`                 | Floating button corner               |
-| `fontFamily`      | `string`                           | `"'DM Sans', 'Segoe UI', ..."`   | Font used across the widget          |
-| `borderRadius`    | `string`                           | `'16px'`                         | Widget panel corner radius           |
-| `backgroundColor` | `string`                           | `'#ffffff'`                      | Widget panel background              |
-
----
-
-## Folder Structure
-
-```
-src/
-├── index.ts                          ← Public API exports
-├── types/index.ts                    ← All TypeScript types
-├── config/index.ts                   ← Env loader (NEXT_PUBLIC_ + REACT_APP_)
-├── services/userService.ts           ← fetch() user list API
-├── hooks/
-│   ├── useUsers.ts                   ← Fetch & filter users
-│   └── useChat.ts                    ← Message state, WebSocket-ready
-├── utils/theme.ts                    ← defaultTheme + mergeTheme
-└── components/
-    ├── ChatWidget.tsx                ← 🏠 Root — mount this in your app
-    ├── HomeScreen/                   ← Hi there + option cards
-    ├── UserListScreen/               ← Slide-in user picker
-    ├── ChatScreen/                   ← Conversation + input bar
-    ├── RecentChatsScreen/            ← Bottom tab: Chats
-    ├── TicketScreen/                 ← Bottom tab: Tickets + raise form
-    ├── MaintenanceView/              ← Shown when MAINTENANCE
-    └── Tabs/BottomTabs.tsx           ← Home / Chats / Tickets tabs
-```
+## 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 Points
 
-Look for `// TODO:` comments in `src/hooks/useChat.ts`:
-
+In `src/hooks/useChat.ts` — find the `// TODO:` comments:
 ```ts
-// In selectUser — connect and listen:
-// socket.emit('join', user.uid);
-// socket.on('message', (msg) => setMessages(prev => [...prev, msg]));
+// In selectUser:
+// socket.emit('join', { roomId: user.uid });
+// socket.on('message', msg => setMessages(prev => [...prev, msg]));
 
-// In sendMessage — emit outgoing:
-// socket.emit('message', newMsg);
+// In sendMessage:
+// socket.emit('message', msg);
 ```
 
----
+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 });
+```
 
-## Resize (Maximize / Minimize)
+---
 
-The widget has a maximize/minimize toggle button in the top-right of the panel header.
-- **Normal size**: 380×560px
-- **Maximized**: 480×720px
-- Both sizes respect `max-width: calc(100vw - 32px)` and `max-height: calc(100vh - 110px)` for mobile safety.
+## Folder Structure
 
+```
+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

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