floating-copilot-widget 1.2.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/FloatingCopilot.css +78 -36
  2. package/dist/FloatingCopilot.js +23 -3
  3. package/dist/index.esm.js +23 -3
  4. package/dist/index.js +23 -3
  5. package/package.json +1 -1
package/dist/FloatingCopilot.css CHANGED
@@ -14,33 +14,53 @@
14
14
  z-index: var(--z-index, 9999);
15
15
  }
16
16
 
17
- /* Floating Chat Icon */
17
+ /* Floating Chat Icon - Modern Bot Design */
18
18
  .copilot-chat-icon {
19
- width: 60px;
20
- height: 60px;
19
+ width: 64px;
20
+ height: 64px;
21
21
  border-radius: 50%;
22
- background: linear-gradient(135deg, var(--primary-color, #6366f1) 0%,
23
- rgba(var(--primary-color, 99, 102, 241), 0.8) 100%);
22
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
24
23
  border: none;
25
24
  cursor: pointer;
26
25
  display: flex;
27
26
  align-items: center;
28
27
  justify-content: center;
29
- font-size: 28px;
30
- box-shadow: var(--shadow-lg);
31
- transition: var(--transition-smooth);
28
+ box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
29
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
32
30
  backdrop-filter: blur(10px);
33
- color: white;
34
- font-weight: bold;
31
+ position: relative;
32
+ overflow: hidden;
33
+ padding: 0;
34
+ z-index: 999;
35
+ }
36
+
37
+ .copilot-chat-icon::before {
38
+ content: '';
39
+ position: absolute;
40
+ top: 0;
41
+ left: 0;
42
+ right: 0;
43
+ bottom: 0;
44
+ background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), transparent);
45
+ pointer-events: none;
46
+ border-radius: 50%;
47
+ }
48
+
49
+ .copilot-chat-icon svg {
50
+ width: 100%;
51
+ height: 100%;
52
+ position: relative;
53
+ z-index: 1;
54
+ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
35
55
  }
36
56
 
37
57
  .copilot-chat-icon:hover {
38
- transform: scale(1.1);
39
- box-shadow: var(--shadow-xl);
58
+ transform: scale(1.12);
59
+ box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5);
40
60
  }
41
61
 
42
62
  .copilot-chat-icon:active {
43
- transform: scale(0.95);
63
+ transform: scale(0.94);
44
64
  }
45
65
 
46
66
  .floating-copilot {
@@ -105,36 +125,52 @@
105
125
  display: flex;
106
126
  gap: 8px;
107
127
  align-items: center;
128
+ margin-left: auto;
129
+ padding-left: 12px;
108
130
  }
109
131
 
110
132
  .copilot-btn {
111
- background: rgba(255, 255, 255, 0.2);
112
- border: 1px solid rgba(255, 255, 255, 0.3);
113
- color: white;
114
- width: 32px;
115
- height: 32px;
133
+ background: rgba(255, 255, 255, 0.9) !important;
134
+ border: 2px solid rgba(255, 255, 255, 0.8) !important;
135
+ color: #6366f1 !important;
136
+ width: 40px;
137
+ height: 40px;
116
138
  border-radius: 8px;
117
139
  cursor: pointer;
118
- font-size: 16px;
119
- display: flex;
120
- align-items: center;
121
- justify-content: center;
122
- transition: var(--transition-smooth);
123
- backdrop-filter: blur(10px);
124
- padding: 0;
140
+ font-size: 20px;
141
+ font-weight: 700;
142
+ display: flex !important;
143
+ align-items: center !important;
144
+ justify-content: center !important;
145
+ transition: all 0.2s ease !important;
146
+ backdrop-filter: none !important;
147
+ padding: 0 !important;
125
148
  flex-shrink: 0;
149
+ position: relative;
150
+ z-index: 10;
151
+ visibility: visible !important;
152
+ opacity: 1 !important;
153
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
126
154
  }
127
155
 
128
156
  .copilot-btn:hover {
129
- background: rgba(255, 255, 255, 0.3);
130
- border-color: rgba(255, 255, 255, 0.4);
157
+ background: white !important;
158
+ border-color: white !important;
159
+ color: #4f46e5 !important;
131
160
  transform: translateY(-2px);
132
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
161
+ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
133
162
  }
134
163
 
135
164
  .copilot-btn:active {
136
165
  transform: translateY(0);
137
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
166
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
167
+ }
168
+
169
+ .copilot-minimize-btn,
170
+ .copilot-maximize-btn,
171
+ .copilot-close-btn {
172
+ display: flex !important;
173
+ visibility: visible !important;
138
174
  }
139
175
 
140
176
  /* Messages Container */
@@ -162,8 +198,12 @@
162
198
  }
163
199
 
164
200
  .copilot-empty-icon {
165
- font-size: 48px;
166
- opacity: 0.5;
201
+ width: 80px;
202
+ height: 80px;
203
+ opacity: 0.7;
204
+ display: flex;
205
+ align-items: center;
206
+ justify-content: center;
167
207
  }
168
208
 
169
209
  /* Message Styles */
@@ -263,19 +303,21 @@
263
303
 
264
304
  .copilot-send-btn {
265
305
  padding: 11px 16px;
266
- background: linear-gradient(135deg, var(--primary-color, #6366f1) 0%,
267
- rgba(var(--primary-color, 99, 102, 241), 0.8) 100%);
306
+ background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
268
307
  color: white;
269
308
  border: none;
270
309
  border-radius: 10px;
271
310
  cursor: pointer;
272
- font-weight: 600;
273
- font-size: 16px;
311
+ font-weight: 700;
312
+ font-size: 18px;
274
313
  transition: var(--transition-smooth);
275
- box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
314
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
276
315
  letter-spacing: 0.3px;
277
316
  min-width: 50px;
278
317
  flex-shrink: 0;
318
+ display: flex;
319
+ align-items: center;
320
+ justify-content: center;
279
321
  }
280
322
 
281
323
  .copilot-send-btn:hover {
package/dist/FloatingCopilot.js CHANGED
@@ -1,8 +1,26 @@
1
1
  import React, { useState, useRef, useEffect } from 'react';
2
2
  import { defaultConfig } from './types';
3
3
  import './FloatingCopilot.css';
4
+ // Bot Avatar SVG Component
5
+ const BotAvatar = ({ primaryColor = '#667eea' }) => {
6
+ const secondaryColor = '#764ba2';
7
+ return (React.createElement("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { display: 'block' } },
8
+ React.createElement("defs", null,
9
+ React.createElement("linearGradient", { id: "botGradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%" },
10
+ React.createElement("stop", { offset: "0%", stopColor: primaryColor }),
11
+ React.createElement("stop", { offset: "100%", stopColor: secondaryColor }))),
12
+ React.createElement("rect", { x: "12", y: "16", width: "40", height: "36", rx: "8", fill: "url(#botGradient)" }),
13
+ React.createElement("circle", { cx: "18", cy: "18", r: "5", fill: "url(#botGradient)" }),
14
+ React.createElement("circle", { cx: "46", cy: "18", r: "5", fill: "url(#botGradient)" }),
15
+ React.createElement("circle", { cx: "24", cy: "26", r: "4", fill: "white" }),
16
+ React.createElement("circle", { cx: "40", cy: "26", r: "4", fill: "white" }),
17
+ React.createElement("circle", { cx: "24", cy: "27", r: "2", fill: "#764ba2" }),
18
+ React.createElement("circle", { cx: "40", cy: "27", r: "2", fill: "#764ba2" }),
19
+ React.createElement("path", { d: "M 26 38 Q 32 42 38 38", stroke: "white", strokeWidth: "1.5", fill: "none", strokeLinecap: "round" }),
20
+ React.createElement("circle", { cx: "32", cy: "32", r: "33", fill: "none", stroke: "url(#botGradient)", strokeWidth: "0.5", opacity: "0.3" })));
21
+ };
4
22
  export const FloatingCopilot = ({ config = {} }) => {
5
- var _a, _b;
23
+ var _a, _b, _c, _d;
6
24
  const finalConfig = Object.assign(Object.assign({}, defaultConfig), config);
7
25
  const [messages, setMessages] = useState([]);
8
26
  const [inputValue, setInputValue] = useState('');
@@ -185,7 +203,8 @@ export const FloatingCopilot = ({ config = {} }) => {
185
203
  // Closed state - show only chat icon
186
204
  if (!isOpen) {
187
205
  return (React.createElement("div", { style: Object.assign(Object.assign({}, getPositionStyle()), getThemeStyle()), className: "copilot-wrapper" },
188
- React.createElement("button", { className: "copilot-chat-icon", onClick: handleToggleOpen, title: "Open chat", "aria-label": "Open chat" }, "\uD83D\uDCAC")));
206
+ React.createElement("button", { className: "copilot-chat-icon", onClick: handleToggleOpen, title: "Open chat", "aria-label": "Open chat" },
207
+ React.createElement(BotAvatar, { primaryColor: ((_c = finalConfig.theme) === null || _c === void 0 ? void 0 : _c.primaryColor) || '#667eea' }))));
189
208
  }
190
209
  // Open state - show full chat
191
210
  return (React.createElement("div", { ref: containerRef, className: `floating-copilot ${isMaximized ? 'maximized' : ''}`, style: Object.assign(Object.assign(Object.assign({}, getPositionStyle()), { width: isMaximized ? '100%' : size.width, height: isMaximized ? '100%' : size.height }), getThemeStyle()) },
@@ -196,7 +215,8 @@ export const FloatingCopilot = ({ config = {} }) => {
196
215
  finalConfig.showMaximizeBtn && (React.createElement("button", { className: "copilot-btn copilot-maximize-btn", onClick: handleMaximize, title: isMaximized ? 'Restore' : 'Maximize', "aria-label": isMaximized ? 'Restore' : 'Maximize' }, isMaximized ? '⤡' : '⤢')),
197
216
  finalConfig.showCloseBtn && (React.createElement("button", { className: "copilot-btn copilot-close-btn", onClick: handleClose, title: "Close", "aria-label": "Close" }, "\u2715"))))),
198
217
  React.createElement("div", { className: "copilot-messages" }, messages.length === 0 ? (React.createElement("div", { className: "copilot-empty-state" },
199
- React.createElement("div", { className: "copilot-empty-icon" }, "\uD83D\uDCAC"),
218
+ React.createElement("div", { className: "copilot-empty-icon" },
219
+ React.createElement(BotAvatar, { primaryColor: ((_d = finalConfig.theme) === null || _d === void 0 ? void 0 : _d.primaryColor) || '#667eea' })),
200
220
  React.createElement("p", null, "Start a conversation..."))) : (React.createElement(React.Fragment, null,
201
221
  messages.map((msg) => (React.createElement("div", { key: msg.id, className: `copilot-message copilot-message-${msg.sender}` },
202
222
  React.createElement("div", { className: "copilot-message-content" }, msg.text),
package/dist/index.esm.js CHANGED
@@ -23,8 +23,26 @@ const defaultConfig = {
23
23
  },
24
24
  };
25
25
 
26
+ // Bot Avatar SVG Component
27
+ const BotAvatar = ({ primaryColor = '#667eea' }) => {
28
+ const secondaryColor = '#764ba2';
29
+ return (React.createElement("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { display: 'block' } },
30
+ React.createElement("defs", null,
31
+ React.createElement("linearGradient", { id: "botGradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%" },
32
+ React.createElement("stop", { offset: "0%", stopColor: primaryColor }),
33
+ React.createElement("stop", { offset: "100%", stopColor: secondaryColor }))),
34
+ React.createElement("rect", { x: "12", y: "16", width: "40", height: "36", rx: "8", fill: "url(#botGradient)" }),
35
+ React.createElement("circle", { cx: "18", cy: "18", r: "5", fill: "url(#botGradient)" }),
36
+ React.createElement("circle", { cx: "46", cy: "18", r: "5", fill: "url(#botGradient)" }),
37
+ React.createElement("circle", { cx: "24", cy: "26", r: "4", fill: "white" }),
38
+ React.createElement("circle", { cx: "40", cy: "26", r: "4", fill: "white" }),
39
+ React.createElement("circle", { cx: "24", cy: "27", r: "2", fill: "#764ba2" }),
40
+ React.createElement("circle", { cx: "40", cy: "27", r: "2", fill: "#764ba2" }),
41
+ React.createElement("path", { d: "M 26 38 Q 32 42 38 38", stroke: "white", strokeWidth: "1.5", fill: "none", strokeLinecap: "round" }),
42
+ React.createElement("circle", { cx: "32", cy: "32", r: "33", fill: "none", stroke: "url(#botGradient)", strokeWidth: "0.5", opacity: "0.3" })));
43
+ };
26
44
  const FloatingCopilot = ({ config = {} }) => {
27
- var _a, _b;
45
+ var _a, _b, _c, _d;
28
46
  const finalConfig = Object.assign(Object.assign({}, defaultConfig), config);
29
47
  const [messages, setMessages] = useState([]);
30
48
  const [inputValue, setInputValue] = useState('');
@@ -207,7 +225,8 @@ const FloatingCopilot = ({ config = {} }) => {
207
225
  // Closed state - show only chat icon
208
226
  if (!isOpen) {
209
227
  return (React.createElement("div", { style: Object.assign(Object.assign({}, getPositionStyle()), getThemeStyle()), className: "copilot-wrapper" },
210
- React.createElement("button", { className: "copilot-chat-icon", onClick: handleToggleOpen, title: "Open chat", "aria-label": "Open chat" }, "\uD83D\uDCAC")));
228
+ React.createElement("button", { className: "copilot-chat-icon", onClick: handleToggleOpen, title: "Open chat", "aria-label": "Open chat" },
229
+ React.createElement(BotAvatar, { primaryColor: ((_c = finalConfig.theme) === null || _c === void 0 ? void 0 : _c.primaryColor) || '#667eea' }))));
211
230
  }
212
231
  // Open state - show full chat
213
232
  return (React.createElement("div", { ref: containerRef, className: `floating-copilot ${isMaximized ? 'maximized' : ''}`, style: Object.assign(Object.assign(Object.assign({}, getPositionStyle()), { width: isMaximized ? '100%' : size.width, height: isMaximized ? '100%' : size.height }), getThemeStyle()) },
@@ -218,7 +237,8 @@ const FloatingCopilot = ({ config = {} }) => {
218
237
  finalConfig.showMaximizeBtn && (React.createElement("button", { className: "copilot-btn copilot-maximize-btn", onClick: handleMaximize, title: isMaximized ? 'Restore' : 'Maximize', "aria-label": isMaximized ? 'Restore' : 'Maximize' }, isMaximized ? '⤡' : '⤢')),
219
238
  finalConfig.showCloseBtn && (React.createElement("button", { className: "copilot-btn copilot-close-btn", onClick: handleClose, title: "Close", "aria-label": "Close" }, "\u2715"))))),
220
239
  React.createElement("div", { className: "copilot-messages" }, messages.length === 0 ? (React.createElement("div", { className: "copilot-empty-state" },
221
- React.createElement("div", { className: "copilot-empty-icon" }, "\uD83D\uDCAC"),
240
+ React.createElement("div", { className: "copilot-empty-icon" },
241
+ React.createElement(BotAvatar, { primaryColor: ((_d = finalConfig.theme) === null || _d === void 0 ? void 0 : _d.primaryColor) || '#667eea' })),
222
242
  React.createElement("p", null, "Start a conversation..."))) : (React.createElement(React.Fragment, null,
223
243
  messages.map((msg) => (React.createElement("div", { key: msg.id, className: `copilot-message copilot-message-${msg.sender}` },
224
244
  React.createElement("div", { className: "copilot-message-content" }, msg.text),
package/dist/index.js CHANGED
@@ -27,8 +27,26 @@ const defaultConfig = {
27
27
  },
28
28
  };
29
29
 
30
+ // Bot Avatar SVG Component
31
+ const BotAvatar = ({ primaryColor = '#667eea' }) => {
32
+ const secondaryColor = '#764ba2';
33
+ return (React.createElement("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { display: 'block' } },
34
+ React.createElement("defs", null,
35
+ React.createElement("linearGradient", { id: "botGradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%" },
36
+ React.createElement("stop", { offset: "0%", stopColor: primaryColor }),
37
+ React.createElement("stop", { offset: "100%", stopColor: secondaryColor }))),
38
+ React.createElement("rect", { x: "12", y: "16", width: "40", height: "36", rx: "8", fill: "url(#botGradient)" }),
39
+ React.createElement("circle", { cx: "18", cy: "18", r: "5", fill: "url(#botGradient)" }),
40
+ React.createElement("circle", { cx: "46", cy: "18", r: "5", fill: "url(#botGradient)" }),
41
+ React.createElement("circle", { cx: "24", cy: "26", r: "4", fill: "white" }),
42
+ React.createElement("circle", { cx: "40", cy: "26", r: "4", fill: "white" }),
43
+ React.createElement("circle", { cx: "24", cy: "27", r: "2", fill: "#764ba2" }),
44
+ React.createElement("circle", { cx: "40", cy: "27", r: "2", fill: "#764ba2" }),
45
+ React.createElement("path", { d: "M 26 38 Q 32 42 38 38", stroke: "white", strokeWidth: "1.5", fill: "none", strokeLinecap: "round" }),
46
+ React.createElement("circle", { cx: "32", cy: "32", r: "33", fill: "none", stroke: "url(#botGradient)", strokeWidth: "0.5", opacity: "0.3" })));
47
+ };
30
48
  const FloatingCopilot = ({ config = {} }) => {
31
- var _a, _b;
49
+ var _a, _b, _c, _d;
32
50
  const finalConfig = Object.assign(Object.assign({}, defaultConfig), config);
33
51
  const [messages, setMessages] = React.useState([]);
34
52
  const [inputValue, setInputValue] = React.useState('');
@@ -211,7 +229,8 @@ const FloatingCopilot = ({ config = {} }) => {
211
229
  // Closed state - show only chat icon
212
230
  if (!isOpen) {
213
231
  return (React.createElement("div", { style: Object.assign(Object.assign({}, getPositionStyle()), getThemeStyle()), className: "copilot-wrapper" },
214
- React.createElement("button", { className: "copilot-chat-icon", onClick: handleToggleOpen, title: "Open chat", "aria-label": "Open chat" }, "\uD83D\uDCAC")));
232
+ React.createElement("button", { className: "copilot-chat-icon", onClick: handleToggleOpen, title: "Open chat", "aria-label": "Open chat" },
233
+ React.createElement(BotAvatar, { primaryColor: ((_c = finalConfig.theme) === null || _c === void 0 ? void 0 : _c.primaryColor) || '#667eea' }))));
215
234
  }
216
235
  // Open state - show full chat
217
236
  return (React.createElement("div", { ref: containerRef, className: `floating-copilot ${isMaximized ? 'maximized' : ''}`, style: Object.assign(Object.assign(Object.assign({}, getPositionStyle()), { width: isMaximized ? '100%' : size.width, height: isMaximized ? '100%' : size.height }), getThemeStyle()) },
@@ -222,7 +241,8 @@ const FloatingCopilot = ({ config = {} }) => {
222
241
  finalConfig.showMaximizeBtn && (React.createElement("button", { className: "copilot-btn copilot-maximize-btn", onClick: handleMaximize, title: isMaximized ? 'Restore' : 'Maximize', "aria-label": isMaximized ? 'Restore' : 'Maximize' }, isMaximized ? '⤡' : '⤢')),
223
242
  finalConfig.showCloseBtn && (React.createElement("button", { className: "copilot-btn copilot-close-btn", onClick: handleClose, title: "Close", "aria-label": "Close" }, "\u2715"))))),
224
243
  React.createElement("div", { className: "copilot-messages" }, messages.length === 0 ? (React.createElement("div", { className: "copilot-empty-state" },
225
- React.createElement("div", { className: "copilot-empty-icon" }, "\uD83D\uDCAC"),
244
+ React.createElement("div", { className: "copilot-empty-icon" },
245
+ React.createElement(BotAvatar, { primaryColor: ((_d = finalConfig.theme) === null || _d === void 0 ? void 0 : _d.primaryColor) || '#667eea' })),
226
246
  React.createElement("p", null, "Start a conversation..."))) : (React.createElement(React.Fragment, null,
227
247
  messages.map((msg) => (React.createElement("div", { key: msg.id, className: `copilot-message copilot-message-${msg.sender}` },
228
248
  React.createElement("div", { className: "copilot-message-content" }, msg.text),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "floating-copilot-widget",
3
- "version": "1.2.0",
3
+ "version": "1.4.0",
4
4
  "description": "A highly configurable floating chat widget plugin for React websites. Draggable, resizable, themeable, and production-ready.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",