@headwai/chat-bubble 8.0.2-rc.fix-npm-publishing.5f9ef8a → 8.1.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.
- package/README.dev.md +50 -268
- package/README.md +45 -25
- package/dist-widget/chat-bubble.js +72 -72
- package/dist-widget/icons/favicon.svg +8 -9
- package/dist-widget/index.html +86 -197
- package/package.json +1 -1
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
-
<svg
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
</svg>
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<svg data-bbox="5.3 3.7 83.9 83.9" xmlns="http://www.w3.org/2000/svg" height="91.2" width="91.2" data-type="color">
|
|
3
|
+
<g>
|
|
4
|
+
<path fill="#00b3e1" d="M67.5 63.6h19.4c1.3 0 2.3 1 2.3 2.3v19.4c0 1.3-1 2.3-2.3 2.3H66.6c-.8 0-1.4-.6-1.4-1.4V65.9c0-1.3 1-2.3 2.3-2.3" data-color="1"/>
|
|
5
|
+
<path fill="#002b53" d="M89.2 15.7v6H24.8c-.8 0-1.5.7-1.5 1.5v64.4h-6c-6.6 0-12-5.4-12-12V5.2c0-.8.7-1.5 1.5-1.5h70.3c6.6 0 12 5.4 12 12z" data-color="2"/>
|
|
6
|
+
<path fill="#0079c2" d="M89.2 42.6v9H54.8c-.8 0-1.5.7-1.5 1.5v34.4h-9c-5 0-9-4-9-9V35.1c0-.8.7-1.5 1.5-1.5h43.4c5 0 9 4 9 9" data-color="3"/>
|
|
7
|
+
</g>
|
|
8
|
+
</svg>
|
package/dist-widget/index.html
CHANGED
|
@@ -2,229 +2,118 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
|
-
<link rel="icon" type="image/svg+xml" href="/
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="./icons/favicon.svg" />
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
7
|
<title>HeadwAI Chat Bubble</title>
|
|
8
8
|
<style>
|
|
9
9
|
body {
|
|
10
|
-
font-family:
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
font-family:
|
|
11
|
+
'Inter',
|
|
12
|
+
-apple-system,
|
|
13
|
+
BlinkMacSystemFont,
|
|
14
|
+
'Segoe UI',
|
|
15
|
+
Roboto,
|
|
16
|
+
sans-serif;
|
|
17
|
+
margin: 0;
|
|
18
|
+
padding: 0;
|
|
19
|
+
background: white;
|
|
13
20
|
min-height: 100vh;
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
justify-content: center;
|
|
14
24
|
}
|
|
15
|
-
.
|
|
25
|
+
.container {
|
|
16
26
|
background: white;
|
|
17
|
-
padding:
|
|
18
|
-
border-radius:
|
|
19
|
-
box-shadow: 0
|
|
20
|
-
|
|
21
|
-
max-width:
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
background: #007bff;
|
|
25
|
-
color: white;
|
|
26
|
-
border: none;
|
|
27
|
-
padding: 12px 24px;
|
|
28
|
-
border-radius: 6px;
|
|
29
|
-
cursor: pointer;
|
|
30
|
-
margin: 10px 10px 10px 0;
|
|
31
|
-
font-size: 16px;
|
|
32
|
-
transition: background-color 0.2s;
|
|
33
|
-
}
|
|
34
|
-
.test-button:hover {
|
|
35
|
-
background: #0056b3;
|
|
36
|
-
}
|
|
37
|
-
.test-link {
|
|
38
|
-
color: #007bff;
|
|
39
|
-
text-decoration: none;
|
|
40
|
-
padding: 10px;
|
|
41
|
-
display: inline-block;
|
|
42
|
-
border: 2px solid #007bff;
|
|
43
|
-
border-radius: 4px;
|
|
44
|
-
margin: 10px 10px 10px 0;
|
|
45
|
-
transition: all 0.2s;
|
|
27
|
+
padding: 60px;
|
|
28
|
+
border-radius: 20px;
|
|
29
|
+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
30
|
+
text-align: center;
|
|
31
|
+
max-width: 500px;
|
|
32
|
+
width: 90%;
|
|
33
|
+
border: 1px solid #e5e7eb;
|
|
46
34
|
}
|
|
47
|
-
.
|
|
48
|
-
|
|
49
|
-
|
|
35
|
+
.logo {
|
|
36
|
+
width: 120px;
|
|
37
|
+
height: 120px;
|
|
38
|
+
margin: 0 auto 30px;
|
|
50
39
|
}
|
|
51
|
-
.
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
text-align: center;
|
|
56
|
-
border-radius: 8px;
|
|
57
|
-
cursor: pointer;
|
|
58
|
-
margin: 10px 0;
|
|
59
|
-
transition: all 0.2s;
|
|
40
|
+
.logo img {
|
|
41
|
+
width: 100%;
|
|
42
|
+
height: 100%;
|
|
43
|
+
object-fit: contain;
|
|
60
44
|
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
45
|
+
h1 {
|
|
46
|
+
color: #333;
|
|
47
|
+
margin: 0 0 20px;
|
|
48
|
+
font-size: 32px;
|
|
49
|
+
font-weight: 600;
|
|
64
50
|
}
|
|
65
|
-
.
|
|
51
|
+
.subtitle {
|
|
52
|
+
color: #666;
|
|
53
|
+
margin-bottom: 40px;
|
|
66
54
|
font-size: 18px;
|
|
67
|
-
|
|
68
|
-
color: #495057;
|
|
55
|
+
line-height: 1.5;
|
|
69
56
|
}
|
|
70
|
-
.
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
background: rgba(255, 193, 7, 0.3);
|
|
77
|
-
border: 3px solid #ffc107;
|
|
57
|
+
.link {
|
|
58
|
+
display: inline-block;
|
|
59
|
+
background: #667eea;
|
|
60
|
+
color: white;
|
|
61
|
+
text-decoration: none;
|
|
62
|
+
padding: 16px 32px;
|
|
78
63
|
border-radius: 12px;
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
64
|
+
margin: 10px;
|
|
65
|
+
font-size: 16px;
|
|
66
|
+
font-weight: 500;
|
|
67
|
+
transition: all 0.3s ease;
|
|
68
|
+
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
|
69
|
+
}
|
|
70
|
+
.link:hover {
|
|
71
|
+
background: #5a67d8;
|
|
72
|
+
transform: translateY(-2px);
|
|
73
|
+
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
|
|
87
74
|
}
|
|
88
|
-
.
|
|
89
|
-
background:
|
|
90
|
-
|
|
91
|
-
|
|
75
|
+
.link.secondary {
|
|
76
|
+
background: #f8f9fa;
|
|
77
|
+
color: #667eea;
|
|
78
|
+
border: 2px solid #667eea;
|
|
79
|
+
}
|
|
80
|
+
.link.secondary:hover {
|
|
81
|
+
background: #667eea;
|
|
82
|
+
color: white;
|
|
92
83
|
}
|
|
93
84
|
</style>
|
|
94
85
|
<script type="module" crossorigin src="./chat-bubble.js"></script>
|
|
95
86
|
<link rel="stylesheet" crossorigin href="./chat-bubble.css">
|
|
96
87
|
</head>
|
|
97
88
|
<body>
|
|
98
|
-
<div class="
|
|
99
|
-
<
|
|
100
|
-
|
|
101
|
-
This page tests whether elements are clickable when the HeadwAI Chat
|
|
102
|
-
Bubble is closed.
|
|
103
|
-
</p>
|
|
104
|
-
|
|
105
|
-
<!-- Info Panel -->
|
|
106
|
-
<div
|
|
107
|
-
style="
|
|
108
|
-
background: #f0f8ff;
|
|
109
|
-
padding: 15px;
|
|
110
|
-
border-radius: 8px;
|
|
111
|
-
margin-bottom: 20px;
|
|
112
|
-
border: 2px solid #4a90e2;
|
|
113
|
-
"
|
|
114
|
-
>
|
|
115
|
-
<h3 style="margin-top: 0; color: #2c5aa0">� Font Size Detection</h3>
|
|
116
|
-
<p style="font-size: 14px; color: #666; margin: 0">
|
|
117
|
-
💡 The HeadwAI Chat Bubble now automatically detects and inherits the
|
|
118
|
-
font size from its container element at initialization.<br />
|
|
119
|
-
🔧 All buttons use em-based sizing for consistent relative scaling.<br />
|
|
120
|
-
✅ This ensures the widget adapts to different website font sizes
|
|
121
|
-
automatically.
|
|
122
|
-
</p>
|
|
89
|
+
<div class="container">
|
|
90
|
+
<div class="logo">
|
|
91
|
+
<img src="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20data-bbox='5.3%203.7%2083.9%2083.9'%20xmlns='http://www.w3.org/2000/svg'%20height='91.2'%20width='91.2'%20data-type='color'%3e%3cg%3e%3cpath%20fill='%2300b3e1'%20d='M67.5%2063.6h19.4c1.3%200%202.3%201%202.3%202.3v19.4c0%201.3-1%202.3-2.3%202.3H66.6c-.8%200-1.4-.6-1.4-1.4V65.9c0-1.3%201-2.3%202.3-2.3'%20data-color='1'/%3e%3cpath%20fill='%23002b53'%20d='M89.2%2015.7v6H24.8c-.8%200-1.5.7-1.5%201.5v64.4h-6c-6.6%200-12-5.4-12-12V5.2c0-.8.7-1.5%201.5-1.5h70.3c6.6%200%2012%205.4%2012%2012z'%20data-color='2'/%3e%3cpath%20fill='%230079c2'%20d='M89.2%2042.6v9H54.8c-.8%200-1.5.7-1.5%201.5v34.4h-9c-5%200-9-4-9-9V35.1c0-.8.7-1.5%201.5-1.5h43.4c5%200%209%204%209%209'%20data-color='3'/%3e%3c/g%3e%3c/svg%3e" alt="HeadwAI Logo" />
|
|
123
92
|
</div>
|
|
93
|
+
<h1>Chat Bubble</h1>
|
|
94
|
+
<p class="subtitle">Easy-to-integrate AI chat widget for your website</p>
|
|
124
95
|
|
|
125
|
-
<
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
<a
|
|
144
|
-
href="#"
|
|
145
|
-
class="test-link"
|
|
146
|
-
onclick="showAlert('Link 2 clicked!'); return false;"
|
|
147
|
-
>Test Link 2</a
|
|
148
|
-
>
|
|
149
|
-
|
|
150
|
-
<h3>Click Areas:</h3>
|
|
151
|
-
<div class="click-area" onclick="showAlert('Large area clicked!')">
|
|
152
|
-
<p>Large Clickable Area - Click anywhere in this box</p>
|
|
96
|
+
<div>
|
|
97
|
+
<a href="https://chat-bubble.headwai.org/" class="link" target="_blank">
|
|
98
|
+
🎮 Try it Live
|
|
99
|
+
</a>
|
|
100
|
+
<a
|
|
101
|
+
href="https://www.headwai.org/contact"
|
|
102
|
+
class="link secondary"
|
|
103
|
+
target="_blank"
|
|
104
|
+
>
|
|
105
|
+
💬 Contact HeadwAI GmbH
|
|
106
|
+
</a>
|
|
107
|
+
<a
|
|
108
|
+
href="https://github.com/headwAI-GmbH/chat-bubble/issues"
|
|
109
|
+
class="link secondary"
|
|
110
|
+
target="_blank"
|
|
111
|
+
>
|
|
112
|
+
🛠️ Help Develop
|
|
113
|
+
</a>
|
|
153
114
|
</div>
|
|
154
|
-
|
|
155
|
-
<div class="counter">Click Counter: <span id="counter">0</span></div>
|
|
156
|
-
</div>
|
|
157
|
-
|
|
158
|
-
<div class="test-container">
|
|
159
|
-
<h3>Instructions:</h3>
|
|
160
|
-
<ol>
|
|
161
|
-
<li>
|
|
162
|
-
<strong>Chat Closed:</strong> You should see a large yellow test area
|
|
163
|
-
in bottom-right - click anywhere on it
|
|
164
|
-
</li>
|
|
165
|
-
<li>
|
|
166
|
-
<strong>Chat Closed:</strong> Click all buttons and links above - they
|
|
167
|
-
should all work
|
|
168
|
-
</li>
|
|
169
|
-
<li>
|
|
170
|
-
<strong>Open Chat:</strong> Click the HeadwAI Chat Bubble icon (small
|
|
171
|
-
circle in bottom-right)
|
|
172
|
-
</li>
|
|
173
|
-
<li>
|
|
174
|
-
<strong>Chat Open:</strong> Yellow area should be partially visible
|
|
175
|
-
around the edges of the chat window
|
|
176
|
-
</li>
|
|
177
|
-
<li>
|
|
178
|
-
<strong>Chat Open:</strong> Try clicking the visible yellow parts -
|
|
179
|
-
they should work!
|
|
180
|
-
</li>
|
|
181
|
-
<li>
|
|
182
|
-
<strong>Chat Open:</strong> Try clicking the chat window area - should
|
|
183
|
-
interact with chat, not yellow area
|
|
184
|
-
</li>
|
|
185
|
-
<li>
|
|
186
|
-
<strong>Close Chat:</strong> Full yellow area should be clickable
|
|
187
|
-
again
|
|
188
|
-
</li>
|
|
189
|
-
</ol>
|
|
190
|
-
<p><strong>Expected behavior:</strong></p>
|
|
191
|
-
<ul>
|
|
192
|
-
<li>✅ Full yellow area clickable when chat closed</li>
|
|
193
|
-
<li>✅ Yellow area partially overlapped when chat open</li>
|
|
194
|
-
<li>✅ Visible yellow parts still clickable when chat open</li>
|
|
195
|
-
<li>✅ Chat window blocks clicks to yellow area behind it</li>
|
|
196
|
-
</ul>
|
|
197
|
-
</div>
|
|
198
|
-
|
|
199
|
-
<!-- Test area that will be partially overlapped by chat window -->
|
|
200
|
-
<div
|
|
201
|
-
class="bottom-right-area"
|
|
202
|
-
onclick="showAlert('Yellow test area clicked! Check if this works in visible parts when chat is open.')"
|
|
203
|
-
>
|
|
204
|
-
🟨 OVERLAP TEST AREA 🟨<br />
|
|
205
|
-
<small>Larger than chat window</small><br />
|
|
206
|
-
<small>Click visible parts!</small>
|
|
207
115
|
</div>
|
|
208
116
|
|
|
209
117
|
<div id="chat-bubble-container"></div>
|
|
210
|
-
|
|
211
|
-
<script>
|
|
212
|
-
let clickCount = 0;
|
|
213
|
-
|
|
214
|
-
function showAlert(message) {
|
|
215
|
-
alert(message);
|
|
216
|
-
console.log('Click event:', message);
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
function incrementCounter() {
|
|
220
|
-
clickCount++;
|
|
221
|
-
document.getElementById('counter').textContent = clickCount;
|
|
222
|
-
console.log('Counter incremented to:', clickCount);
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
// Log when page is ready
|
|
226
|
-
console.log('Test page loaded. HeadwAI Chat Bubble should load next.');
|
|
227
|
-
</script>
|
|
228
|
-
|
|
229
118
|
</body>
|
|
230
119
|
</html>
|