callix-dialer-widget 1.5.4 → 1.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/callix-dialer.css +1 -0
- package/dist-widget/callix-dialer.es.js +1407 -226
- package/dist-widget/callix-dialer.es.js.map +1 -1
- package/dist-widget/callix-dialer.umd.js +5 -5
- package/dist-widget/callix-dialer.umd.js.map +1 -1
- package/dist-widget/package.json +61 -0
- package/dist-widget/test-single-widget.html +324 -0
- package/package.json +1 -1
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "callix-dialer-widget",
|
|
3
|
+
"version": "1.6.0",
|
|
4
|
+
"description": "Widget de discador Callix para integração via CDN - Componente React para gerenciamento de chamadas VoIP",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist-widget/callix-dialer.umd.js",
|
|
7
|
+
"module": "./dist-widget/callix-dialer.es.js",
|
|
8
|
+
"types": "./dist-widget/index.d.ts",
|
|
9
|
+
"files": [
|
|
10
|
+
"dist-widget",
|
|
11
|
+
"README.md",
|
|
12
|
+
"WIDGET-README.md"
|
|
13
|
+
],
|
|
14
|
+
"exports": {
|
|
15
|
+
".": {
|
|
16
|
+
"import": "./dist-widget/callix-dialer.es.js",
|
|
17
|
+
"require": "./dist-widget/callix-dialer.umd.js",
|
|
18
|
+
"types": "./dist-widget/index.d.ts"
|
|
19
|
+
},
|
|
20
|
+
"./style.css": "./dist-widget/callix-dialer.css"
|
|
21
|
+
},
|
|
22
|
+
"keywords": [
|
|
23
|
+
"callix",
|
|
24
|
+
"dialer",
|
|
25
|
+
"widget",
|
|
26
|
+
"voip",
|
|
27
|
+
"webrtc",
|
|
28
|
+
"phone",
|
|
29
|
+
"call",
|
|
30
|
+
"react",
|
|
31
|
+
"cdn",
|
|
32
|
+
"component"
|
|
33
|
+
],
|
|
34
|
+
"author": "Callix Brasil",
|
|
35
|
+
"license": "MIT",
|
|
36
|
+
"repository": {
|
|
37
|
+
"type": "git",
|
|
38
|
+
"url": "https://github.com/callixbrasil/dialer-widget"
|
|
39
|
+
},
|
|
40
|
+
"homepage": "https://github.com/callixbrasil/dialer-widget#readme",
|
|
41
|
+
"bugs": {
|
|
42
|
+
"url": "https://github.com/callixbrasil/dialer-widget/issues"
|
|
43
|
+
},
|
|
44
|
+
"publishConfig": {
|
|
45
|
+
"access": "public",
|
|
46
|
+
"registry": "https://registry.npmjs.org/"
|
|
47
|
+
},
|
|
48
|
+
"peerDependencies": {
|
|
49
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
50
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
51
|
+
},
|
|
52
|
+
"dependencies": {
|
|
53
|
+
"@callixbrasil/client-sdk": "0.0.7",
|
|
54
|
+
"@callixbrasil/client-sdk-react": "0.0.8"
|
|
55
|
+
},
|
|
56
|
+
"devDependencies": {},
|
|
57
|
+
"engines": {
|
|
58
|
+
"node": ">=18.0.0",
|
|
59
|
+
"pnpm": ">=8.0.0"
|
|
60
|
+
}
|
|
61
|
+
}
|
|
@@ -0,0 +1,324 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="pt-BR">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
6
|
+
<title>Callix Dialer - Teste Mobile Mode</title>
|
|
7
|
+
<!-- Widget CSS -->
|
|
8
|
+
<link rel="stylesheet" href="./dist-widget/callix-dialer.css">
|
|
9
|
+
<style>
|
|
10
|
+
/* Reset básico para a página hospedeira - NÃO deve conflitar com o widget */
|
|
11
|
+
* {
|
|
12
|
+
margin: 0;
|
|
13
|
+
padding: 0;
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
body {
|
|
18
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
19
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
20
|
+
min-height: 100vh;
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.host-header {
|
|
26
|
+
background: rgba(0, 0, 0, 0.2);
|
|
27
|
+
color: white;
|
|
28
|
+
padding: 16px 20px;
|
|
29
|
+
text-align: center;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.host-header h1 {
|
|
33
|
+
font-size: 18px;
|
|
34
|
+
font-weight: 600;
|
|
35
|
+
margin-bottom: 4px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.host-header p {
|
|
39
|
+
font-size: 12px;
|
|
40
|
+
opacity: 0.8;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* Área principal que contém o widget */
|
|
44
|
+
.widget-area {
|
|
45
|
+
flex: 1;
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: stretch;
|
|
48
|
+
justify-content: center;
|
|
49
|
+
padding: 20px;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Container do widget - define tamanho */
|
|
53
|
+
#dialer-container {
|
|
54
|
+
position: relative; /* NECESSÁRIO para position:absolute do filho */
|
|
55
|
+
width: 100%;
|
|
56
|
+
max-width: 430px;
|
|
57
|
+
height: 100%;
|
|
58
|
+
max-height: 932px;
|
|
59
|
+
min-height: 600px;
|
|
60
|
+
background: #f2f2f7;
|
|
61
|
+
border-radius: 20px;
|
|
62
|
+
overflow: hidden;
|
|
63
|
+
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Controles de debug */
|
|
67
|
+
.debug-panel {
|
|
68
|
+
background: rgba(0, 0, 0, 0.8);
|
|
69
|
+
color: white;
|
|
70
|
+
padding: 12px 16px;
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-wrap: wrap;
|
|
73
|
+
gap: 8px;
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.debug-panel button {
|
|
79
|
+
background: rgba(255, 255, 255, 0.15);
|
|
80
|
+
color: white;
|
|
81
|
+
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
82
|
+
padding: 8px 16px;
|
|
83
|
+
border-radius: 8px;
|
|
84
|
+
cursor: pointer;
|
|
85
|
+
font-size: 12px;
|
|
86
|
+
transition: all 0.2s;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.debug-panel button:hover {
|
|
90
|
+
background: rgba(255, 255, 255, 0.25);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.debug-panel button.active {
|
|
94
|
+
background: #007aff;
|
|
95
|
+
border-color: #007aff;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.debug-panel .mode-label {
|
|
99
|
+
font-size: 11px;
|
|
100
|
+
opacity: 0.7;
|
|
101
|
+
margin-right: 8px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/* Console de logs */
|
|
105
|
+
.log-panel {
|
|
106
|
+
background: #1e1e1e;
|
|
107
|
+
color: #d4d4d4;
|
|
108
|
+
font-family: 'Consolas', 'Monaco', monospace;
|
|
109
|
+
font-size: 11px;
|
|
110
|
+
padding: 12px 16px;
|
|
111
|
+
max-height: 150px;
|
|
112
|
+
overflow-y: auto;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.log-panel .log-entry {
|
|
116
|
+
padding: 2px 0;
|
|
117
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.log-panel .log-entry.info { color: #3794ff; }
|
|
121
|
+
.log-panel .log-entry.warn { color: #cca700; }
|
|
122
|
+
.log-panel .log-entry.error { color: #f14c4c; }
|
|
123
|
+
.log-panel .log-entry.success { color: #4ec9b0; }
|
|
124
|
+
|
|
125
|
+
.log-panel .log-time {
|
|
126
|
+
opacity: 0.5;
|
|
127
|
+
margin-right: 8px;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* Responsivo */
|
|
131
|
+
@media (max-width: 500px) {
|
|
132
|
+
.widget-area {
|
|
133
|
+
padding: 0;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
#dialer-container {
|
|
137
|
+
border-radius: 0;
|
|
138
|
+
max-width: 100%;
|
|
139
|
+
max-height: 100%;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.debug-panel {
|
|
143
|
+
padding: 8px;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.debug-panel button {
|
|
147
|
+
padding: 6px 12px;
|
|
148
|
+
font-size: 11px;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
@media (max-height: 700px) {
|
|
153
|
+
.host-header {
|
|
154
|
+
padding: 10px;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.host-header h1 {
|
|
158
|
+
font-size: 14px;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.host-header p {
|
|
162
|
+
display: none;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.log-panel {
|
|
166
|
+
max-height: 80px;
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
</style>
|
|
170
|
+
</head>
|
|
171
|
+
<body>
|
|
172
|
+
<header class="host-header">
|
|
173
|
+
<h1>🔧 Callix Dialer - Teste Local</h1>
|
|
174
|
+
<p>Widget mobile mode embarcado em página hospedeira</p>
|
|
175
|
+
</header>
|
|
176
|
+
|
|
177
|
+
<div class="debug-panel">
|
|
178
|
+
<span class="mode-label">Modo:</span>
|
|
179
|
+
<button id="btn-mobile" class="active">Mobile</button>
|
|
180
|
+
<button id="btn-inline">Inline</button>
|
|
181
|
+
<button id="btn-floating">Floating</button>
|
|
182
|
+
<button id="btn-clear-logs">Limpar Logs</button>
|
|
183
|
+
<button id="btn-clear-session">Limpar Sessão</button>
|
|
184
|
+
</div>
|
|
185
|
+
|
|
186
|
+
<main class="widget-area">
|
|
187
|
+
<div id="dialer-container" data-callix-mode="mobile"></div>
|
|
188
|
+
</main>
|
|
189
|
+
|
|
190
|
+
<div class="log-panel" id="log-panel">
|
|
191
|
+
<div class="log-entry info"><span class="log-time">--:--:--</span>Aguardando inicialização...</div>
|
|
192
|
+
</div>
|
|
193
|
+
|
|
194
|
+
<!-- React CDN - Necessário para o widget UMD -->
|
|
195
|
+
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
196
|
+
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
197
|
+
|
|
198
|
+
<!-- Widget UMD -->
|
|
199
|
+
<script src="./dist-widget/callix-dialer.umd.js"></script>
|
|
200
|
+
<script>
|
|
201
|
+
// ===================================
|
|
202
|
+
// Logger para o painel de debug
|
|
203
|
+
// ===================================
|
|
204
|
+
const logPanel = document.getElementById('log-panel');
|
|
205
|
+
|
|
206
|
+
function logToPanel(message, type = 'info') {
|
|
207
|
+
const now = new Date();
|
|
208
|
+
const time = now.toTimeString().slice(0, 8);
|
|
209
|
+
const entry = document.createElement('div');
|
|
210
|
+
entry.className = `log-entry ${type}`;
|
|
211
|
+
entry.innerHTML = `<span class="log-time">${time}</span>${message}`;
|
|
212
|
+
logPanel.appendChild(entry);
|
|
213
|
+
logPanel.scrollTop = logPanel.scrollHeight;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
// Interceptar console para mostrar no painel
|
|
217
|
+
const originalLog = console.log;
|
|
218
|
+
const originalWarn = console.warn;
|
|
219
|
+
const originalError = console.error;
|
|
220
|
+
|
|
221
|
+
console.log = function(...args) {
|
|
222
|
+
originalLog.apply(console, args);
|
|
223
|
+
const msg = args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' ');
|
|
224
|
+
if (msg.includes('[Callix') || msg.includes('SDK') || msg.includes('session') || msg.includes('call')) {
|
|
225
|
+
logToPanel(msg, 'info');
|
|
226
|
+
}
|
|
227
|
+
};
|
|
228
|
+
|
|
229
|
+
console.warn = function(...args) {
|
|
230
|
+
originalWarn.apply(console, args);
|
|
231
|
+
const msg = args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' ');
|
|
232
|
+
logToPanel('⚠️ ' + msg, 'warn');
|
|
233
|
+
};
|
|
234
|
+
|
|
235
|
+
console.error = function(...args) {
|
|
236
|
+
originalError.apply(console, args);
|
|
237
|
+
const msg = args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' ');
|
|
238
|
+
logToPanel('❌ ' + msg, 'error');
|
|
239
|
+
};
|
|
240
|
+
|
|
241
|
+
// ===================================
|
|
242
|
+
// Inicialização do Widget
|
|
243
|
+
// ===================================
|
|
244
|
+
let currentWidget = null;
|
|
245
|
+
let currentMode = 'mobile';
|
|
246
|
+
|
|
247
|
+
function initWidget(mode = 'mobile') {
|
|
248
|
+
// Destruir widget anterior se existir
|
|
249
|
+
if (currentWidget) {
|
|
250
|
+
currentWidget.destroy();
|
|
251
|
+
currentWidget = null;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
const container = document.getElementById('dialer-container');
|
|
255
|
+
container.innerHTML = '';
|
|
256
|
+
container.dataset.callixMode = mode;
|
|
257
|
+
|
|
258
|
+
// Atualizar botões
|
|
259
|
+
document.querySelectorAll('.debug-panel button').forEach(btn => {
|
|
260
|
+
if (btn.id.startsWith('btn-')) {
|
|
261
|
+
btn.classList.remove('active');
|
|
262
|
+
}
|
|
263
|
+
});
|
|
264
|
+
const activeBtn = document.getElementById(`btn-${mode}`);
|
|
265
|
+
if (activeBtn) activeBtn.classList.add('active');
|
|
266
|
+
|
|
267
|
+
currentMode = mode;
|
|
268
|
+
logToPanel(`Inicializando widget no modo: ${mode}`, 'info');
|
|
269
|
+
|
|
270
|
+
try {
|
|
271
|
+
currentWidget = CallixDialer.init({
|
|
272
|
+
container: '#dialer-container',
|
|
273
|
+
apiUrl: '/api/user-sdk-session',
|
|
274
|
+
uiVariant: mode,
|
|
275
|
+
onReady: () => {
|
|
276
|
+
logToPanel(`✅ Widget ${mode} pronto!`, 'success');
|
|
277
|
+
},
|
|
278
|
+
onError: (error) => {
|
|
279
|
+
logToPanel(`Erro: ${error.message}`, 'error');
|
|
280
|
+
}
|
|
281
|
+
});
|
|
282
|
+
} catch (error) {
|
|
283
|
+
logToPanel(`Erro ao criar widget: ${error.message}`, 'error');
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
// ===================================
|
|
288
|
+
// Event Listeners
|
|
289
|
+
// ===================================
|
|
290
|
+
document.getElementById('btn-mobile').addEventListener('click', () => initWidget('mobile'));
|
|
291
|
+
document.getElementById('btn-inline').addEventListener('click', () => initWidget('default'));
|
|
292
|
+
document.getElementById('btn-floating').addEventListener('click', () => initWidget('floating'));
|
|
293
|
+
|
|
294
|
+
document.getElementById('btn-clear-logs').addEventListener('click', () => {
|
|
295
|
+
logPanel.innerHTML = '';
|
|
296
|
+
logToPanel('Logs limpos', 'info');
|
|
297
|
+
});
|
|
298
|
+
|
|
299
|
+
document.getElementById('btn-clear-session').addEventListener('click', () => {
|
|
300
|
+
// Limpar todas as chaves do localStorage relacionadas ao Callix
|
|
301
|
+
const keys = Object.keys(localStorage).filter(k => k.startsWith('callix_'));
|
|
302
|
+
keys.forEach(k => localStorage.removeItem(k));
|
|
303
|
+
logToPanel(`Sessão limpa (${keys.length} chaves removidas)`, 'warn');
|
|
304
|
+
// Reiniciar widget
|
|
305
|
+
setTimeout(() => initWidget(currentMode), 500);
|
|
306
|
+
});
|
|
307
|
+
|
|
308
|
+
// ===================================
|
|
309
|
+
// Inicialização
|
|
310
|
+
// ===================================
|
|
311
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
312
|
+
logToPanel('DOM carregado, iniciando widget...', 'info');
|
|
313
|
+
|
|
314
|
+
if (typeof CallixDialer === 'undefined') {
|
|
315
|
+
logToPanel('CallixDialer não encontrado! Verifique se o bundle foi gerado.', 'error');
|
|
316
|
+
return;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
logToPanel(`CallixDialer v${CallixDialer.version || '?'} carregado`, 'success');
|
|
320
|
+
initWidget('mobile');
|
|
321
|
+
});
|
|
322
|
+
</script>
|
|
323
|
+
</body>
|
|
324
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "callix-dialer-widget",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.0",
|
|
4
4
|
"description": "Widget de discador Callix para integração via CDN - Componente React para gerenciamento de chamadas VoIP",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist-widget/callix-dialer.umd.js",
|