floating-copilot-widget 1.2.0 → 1.3.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 +67 -30
  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,49 @@
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.25) !important;
134
+ border: 1px solid rgba(255, 255, 255, 0.4) !important;
135
+ color: white !important;
136
+ width: 36px;
137
+ height: 36px;
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);
140
+ font-size: 18px;
141
+ display: flex !important;
142
+ align-items: center !important;
143
+ justify-content: center !important;
144
+ transition: all 0.2s ease !important;
123
145
  backdrop-filter: blur(10px);
124
- padding: 0;
146
+ padding: 0 !important;
125
147
  flex-shrink: 0;
148
+ position: relative;
149
+ z-index: 10;
150
+ visibility: visible !important;
151
+ opacity: 1 !important;
126
152
  }
127
153
 
128
154
  .copilot-btn:hover {
129
- background: rgba(255, 255, 255, 0.3);
130
- border-color: rgba(255, 255, 255, 0.4);
155
+ background: rgba(255, 255, 255, 0.35) !important;
156
+ border-color: rgba(255, 255, 255, 0.5) !important;
131
157
  transform: translateY(-2px);
132
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
158
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
133
159
  }
134
160
 
135
161
  .copilot-btn:active {
136
162
  transform: translateY(0);
137
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
163
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
164
+ }
165
+
166
+ .copilot-minimize-btn,
167
+ .copilot-maximize-btn,
168
+ .copilot-close-btn {
169
+ display: flex !important;
170
+ visibility: visible !important;
138
171
  }
139
172
 
140
173
  /* Messages Container */
@@ -162,8 +195,12 @@
162
195
  }
163
196
 
164
197
  .copilot-empty-icon {
165
- font-size: 48px;
166
- opacity: 0.5;
198
+ width: 80px;
199
+ height: 80px;
200
+ opacity: 0.7;
201
+ display: flex;
202
+ align-items: center;
203
+ justify-content: center;
167
204
  }
168
205
 
169
206
  /* Message Styles */
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.3.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",