@headwai/chat-bubble 6.4.1 → 6.6.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/dist-widget/chat-bubble.css +1 -1
- package/dist-widget/chat-bubble.js +119 -119
- package/dist-widget/index.html +198 -2
- package/package.json +1 -1
package/dist-widget/index.html
CHANGED
|
@@ -1,14 +1,210 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
7
|
<title>Chat Bubble Widget</title>
|
|
8
|
+
<style>
|
|
9
|
+
body {
|
|
10
|
+
font-family: Arial, sans-serif;
|
|
11
|
+
margin: 20px;
|
|
12
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
13
|
+
min-height: 100vh;
|
|
14
|
+
}
|
|
15
|
+
.test-container {
|
|
16
|
+
background: white;
|
|
17
|
+
padding: 20px;
|
|
18
|
+
border-radius: 8px;
|
|
19
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
20
|
+
margin-bottom: 20px;
|
|
21
|
+
max-width: 600px;
|
|
22
|
+
}
|
|
23
|
+
.test-button {
|
|
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;
|
|
46
|
+
}
|
|
47
|
+
.test-link:hover {
|
|
48
|
+
background: #007bff;
|
|
49
|
+
color: white;
|
|
50
|
+
}
|
|
51
|
+
.click-area {
|
|
52
|
+
background: #f8f9fa;
|
|
53
|
+
border: 2px dashed #dee2e6;
|
|
54
|
+
padding: 40px;
|
|
55
|
+
text-align: center;
|
|
56
|
+
border-radius: 8px;
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
margin: 10px 0;
|
|
59
|
+
transition: all 0.2s;
|
|
60
|
+
}
|
|
61
|
+
.click-area:hover {
|
|
62
|
+
background: #e9ecef;
|
|
63
|
+
border-color: #adb5bd;
|
|
64
|
+
}
|
|
65
|
+
.counter {
|
|
66
|
+
font-size: 18px;
|
|
67
|
+
font-weight: bold;
|
|
68
|
+
color: #495057;
|
|
69
|
+
}
|
|
70
|
+
.bottom-right-area {
|
|
71
|
+
position: fixed;
|
|
72
|
+
bottom: 0px;
|
|
73
|
+
right: 0px;
|
|
74
|
+
width: 480px;
|
|
75
|
+
height: 680px;
|
|
76
|
+
background: rgba(255, 193, 7, 0.3);
|
|
77
|
+
border: 3px solid #ffc107;
|
|
78
|
+
border-radius: 12px;
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
justify-content: center;
|
|
82
|
+
cursor: pointer;
|
|
83
|
+
font-weight: bold;
|
|
84
|
+
text-align: center;
|
|
85
|
+
transition: all 0.2s;
|
|
86
|
+
z-index: 10; /* Lower than chat window (z-index: 999) */
|
|
87
|
+
}
|
|
88
|
+
.bottom-right-area:hover {
|
|
89
|
+
background: rgba(255, 193, 7, 0.6);
|
|
90
|
+
border-color: #ff9f00;
|
|
91
|
+
transform: scale(1.02);
|
|
92
|
+
}
|
|
93
|
+
</style>
|
|
8
94
|
<script type="module" crossorigin src="/chat-bubble.js"></script>
|
|
9
95
|
<link rel="stylesheet" crossorigin href="/chat-bubble.css">
|
|
10
96
|
</head>
|
|
11
97
|
<body>
|
|
98
|
+
<div class="test-container">
|
|
99
|
+
<h1>Chat Bubble Click Test Page</h1>
|
|
100
|
+
<p>
|
|
101
|
+
This page tests whether elements are clickable when the chat bubble is
|
|
102
|
+
closed.
|
|
103
|
+
</p>
|
|
104
|
+
|
|
105
|
+
<h3>Test Buttons:</h3>
|
|
106
|
+
<button class="test-button" onclick="showAlert('Button 1 clicked!')">
|
|
107
|
+
Test Button 1
|
|
108
|
+
</button>
|
|
109
|
+
<button class="test-button" onclick="showAlert('Button 2 clicked!')">
|
|
110
|
+
Test Button 2
|
|
111
|
+
</button>
|
|
112
|
+
<button class="test-button" onclick="incrementCounter()">
|
|
113
|
+
Click Counter
|
|
114
|
+
</button>
|
|
115
|
+
|
|
116
|
+
<h3>Test Links:</h3>
|
|
117
|
+
<a
|
|
118
|
+
href="#"
|
|
119
|
+
class="test-link"
|
|
120
|
+
onclick="showAlert('Link 1 clicked!'); return false;"
|
|
121
|
+
>Test Link 1</a
|
|
122
|
+
>
|
|
123
|
+
<a
|
|
124
|
+
href="#"
|
|
125
|
+
class="test-link"
|
|
126
|
+
onclick="showAlert('Link 2 clicked!'); return false;"
|
|
127
|
+
>Test Link 2</a
|
|
128
|
+
>
|
|
129
|
+
|
|
130
|
+
<h3>Click Areas:</h3>
|
|
131
|
+
<div class="click-area" onclick="showAlert('Large area clicked!')">
|
|
132
|
+
<p>Large Clickable Area - Click anywhere in this box</p>
|
|
133
|
+
</div>
|
|
134
|
+
|
|
135
|
+
<div class="counter">Click Counter: <span id="counter">0</span></div>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<div class="test-container">
|
|
139
|
+
<h3>Instructions:</h3>
|
|
140
|
+
<ol>
|
|
141
|
+
<li>
|
|
142
|
+
<strong>Chat Closed:</strong> You should see a large yellow test area
|
|
143
|
+
in bottom-right - click anywhere on it
|
|
144
|
+
</li>
|
|
145
|
+
<li>
|
|
146
|
+
<strong>Chat Closed:</strong> Click all buttons and links above - they
|
|
147
|
+
should all work
|
|
148
|
+
</li>
|
|
149
|
+
<li>
|
|
150
|
+
<strong>Open Chat:</strong> Click the chat bubble icon (small circle
|
|
151
|
+
in bottom-right)
|
|
152
|
+
</li>
|
|
153
|
+
<li>
|
|
154
|
+
<strong>Chat Open:</strong> Yellow area should be partially visible
|
|
155
|
+
around the edges of the chat window
|
|
156
|
+
</li>
|
|
157
|
+
<li>
|
|
158
|
+
<strong>Chat Open:</strong> Try clicking the visible yellow parts -
|
|
159
|
+
they should work!
|
|
160
|
+
</li>
|
|
161
|
+
<li>
|
|
162
|
+
<strong>Chat Open:</strong> Try clicking the chat window area - should
|
|
163
|
+
interact with chat, not yellow area
|
|
164
|
+
</li>
|
|
165
|
+
<li>
|
|
166
|
+
<strong>Close Chat:</strong> Full yellow area should be clickable
|
|
167
|
+
again
|
|
168
|
+
</li>
|
|
169
|
+
</ol>
|
|
170
|
+
<p><strong>Expected behavior:</strong></p>
|
|
171
|
+
<ul>
|
|
172
|
+
<li>✅ Full yellow area clickable when chat closed</li>
|
|
173
|
+
<li>✅ Yellow area partially overlapped when chat open</li>
|
|
174
|
+
<li>✅ Visible yellow parts still clickable when chat open</li>
|
|
175
|
+
<li>✅ Chat window blocks clicks to yellow area behind it</li>
|
|
176
|
+
</ul>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<!-- Test area that will be partially overlapped by chat window -->
|
|
180
|
+
<div
|
|
181
|
+
class="bottom-right-area"
|
|
182
|
+
onclick="showAlert('Yellow test area clicked! Check if this works in visible parts when chat is open.')"
|
|
183
|
+
>
|
|
184
|
+
🟨 OVERLAP TEST AREA 🟨<br />
|
|
185
|
+
<small>Larger than chat window</small><br />
|
|
186
|
+
<small>Click visible parts!</small>
|
|
187
|
+
</div>
|
|
188
|
+
|
|
12
189
|
<div id="chat-bubble-container"></div>
|
|
190
|
+
|
|
191
|
+
<script>
|
|
192
|
+
let clickCount = 0;
|
|
193
|
+
|
|
194
|
+
function showAlert(message) {
|
|
195
|
+
alert(message);
|
|
196
|
+
console.log('Click event:', message);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
function incrementCounter() {
|
|
200
|
+
clickCount++;
|
|
201
|
+
document.getElementById('counter').textContent = clickCount;
|
|
202
|
+
console.log('Counter incremented to:', clickCount);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
// Log when page is ready
|
|
206
|
+
console.log('Test page loaded. Chat bubble should load next.');
|
|
207
|
+
</script>
|
|
208
|
+
|
|
13
209
|
</body>
|
|
14
|
-
</html>
|
|
210
|
+
</html>
|