ajaxter-chat 1.0.3 → 2.0.1

package/README.md

@@ -1,170 +1,81 @@
-# Chat Widget
+# react-chat-widget-extension v2
 
-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
+A drop-in floating chat widget for **React.js** and **Next.js** with a multi-screen UI, ticket system, and full theme control.
 
 ---
 
-## Folder Structure
+## Screens & Navigation Flow
 
 ```
-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
-```
-
----
-
-## Installation
-
-```bash
-npm install ajaxter-chat
-# or
-yarn add ajaxter-chat
+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
 
-### React.js (.env)
-
+### 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_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
 ```
 
 ### 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_HOST_PORT=4000          # Optional
+NEXT_PUBLIC_CHAT_USER_LIST=api/v1/users
 NEXT_PUBLIC_CHAT_STATUS=ACTIVE
 NEXT_PUBLIC_CHAT_TYPE=BOTH
 ```
 
-### 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
+## CHAT_STATUS Behaviour
 
-| 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)|
+| 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 Behavior
+## 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  |
 
-| 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)  |
+> **Raise Ticket is always shown regardless of CHAT_TYPE.**
 
 ---
 
 ## 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
-```
-
-Legacy example:
-
 ```
-GET ${CHAT_HOST_URL}:${CHAT_HOST_PORT}/${CHAT_USER_LIST}
+GET {CHAT_HOST_URL}[:{CHAT_HOST_PORT}]/{CHAT_USER_LIST}
 ```
 
 Expected response:
-
 ```json
 [
-  {
-    "name": "Alice Dev",
-    "uid": "uid_001",
-    "email": "alice@company.com",
-    "mobile": "+1234567890",
-    "project": "Platform Team",
-    "type": "developer"
-  },
-  {
-    "name": "Bob Smith",
-    "uid": "uid_002",
-    "email": "bob@client.com",
-    "mobile": "+0987654321",
-    "project": "Client Portal",
-    "type": "user"
-  }
+  { "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"      }
 ]
 ```
 
@@ -172,132 +83,113 @@ Expected response:
 
 ## Usage
 
-### React.js
-
+### React
 ```tsx
 // App.tsx
-import { ChatWidget } from 'ajaxter-chat';
+import { ChatWidget } from 'react-chat-widget-extension';
 
-function App() {
+export default function App() {
   return (
-    <div>
-      <main>Your app content</main>
-
+    <>
+      <main>Your app</main>
       <ChatWidget
         theme={{
-          primaryColor: '#6C63FF',
-          buttonColor: '#6C63FF',
-          buttonTextColor: '#ffffff',
-          buttonLabel: 'Chat with us',
+          primaryColor:   '#1aaa96',
+          buttonLabel:    'Chat with us',
           buttonPosition: 'bottom-right',
-          fontFamily: "'DM Sans', sans-serif",
-          borderRadius: '16px',
         }}
       />
-    </div>
+    </>
   );
 }
 ```
 
 ### Next.js — App Router
-
 ```tsx
 // app/ChatWidgetWrapper.tsx
 'use client';
-import { ChatWidget } from 'ajaxter-chat';
-
+import { ChatWidget } from 'react-chat-widget-extension';
 export function ChatWidgetWrapper() {
-  return <ChatWidget theme={{ primaryColor: '#0ea5e9' }} />;
+  return <ChatWidget theme={{ primaryColor: '#1aaa96' }} />;
 }
-```
 
-```tsx
 // app/layout.tsx
 import { ChatWidgetWrapper } from './ChatWidgetWrapper';
-
 export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body>
-        {children}
-        <ChatWidgetWrapper />
-      </body>
-    </html>
-  );
+  return <html><body>{children}<ChatWidgetWrapper /></body></html>;
 }
 ```
 
 ### 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={{ primaryColor: '#1aaa96' }} /></>;
 }
 ```
 
 ---
 
-## Theme Props
+## Theme Props (all optional)
 
-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'
-}
-```
+| 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              |
 
 ---
 
-## WebSocket Integration
+## 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
+```
 
-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
+## WebSocket Integration Points
 
-Example with socket.io:
+Look for `// TODO:` comments in `src/hooks/useChat.ts`:
 
 ```ts
-// In useChat.ts — sendMessage
-socket.emit('chat:message', { to: activeUser.uid, text });
+// In selectUser — connect and listen:
+// socket.emit('join', 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 — emit outgoing:
+// socket.emit('message', newMsg);
 ```
 
 ---
 
-## 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
-```
-
----
+## Resize (Maximize / Minimize)
 
-## License
+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.
 
-MIT

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

@@ -0,0 +1,12 @@
+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/components/ChatScreen/index.js

@@ -0,0 +1,83 @@
+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/components/ChatWidget.d.ts

@@ -1,28 +1,4 @@
 import React from 'react';
 import { ChatWidgetProps } from '../types';
-/**
- * ChatWidget
- *
- * Drop-in chat widget for React.js and Next.js apps.
- * All behavior is configured via environment variables.
- * All UI styling is configured via the `theme` prop.
- *
- * @example
- * // Basic usage
- * <ChatWidget />
- *
- * @example
- * // With custom theme
- * <ChatWidget
- *   theme={{
- *     primaryColor: '#FF6B6B',
- *     buttonColor: '#FF6B6B',
- *     buttonLabel: 'Need Help?',
- *     buttonPosition: 'bottom-left',
- *     fontFamily: "'Inter', sans-serif",
- *     borderRadius: '12px',
- *   }}
- * />
- */
 export declare const ChatWidget: React.FC<ChatWidgetProps>;
 export default ChatWidget;