onairos 2.1.1 โ 2.1.2
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/onairos.bundle.js +1 -1
- package/dist/onairos.bundle.js.map +1 -1
- package/dist/onairos.esm.js +1 -1
- package/dist/onairos.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/DataRequest.js +82 -54
- package/src/iframe/dataRequestHandler.js +103 -26
- package/src/mobile/MobileDataRequestPage.jsx +8 -1
- package/src/onairosButton.jsx +4 -2
- package/test-enhanced-live-mode.html +321 -0
|
@@ -0,0 +1,321 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Enhanced Onairos Live Mode Test</title>
|
|
7
|
+
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
|
8
|
+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
|
9
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
10
|
+
<script type="module" src="./dist/onairos.esm.js"></script>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div id="root" class="p-8 max-w-6xl mx-auto">
|
|
14
|
+
<div class="text-center mb-8">
|
|
15
|
+
<h1 class="text-4xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
|
16
|
+
๐ Enhanced Onairos Live Mode Test
|
|
17
|
+
</h1>
|
|
18
|
+
<p class="text-gray-600 text-lg">Testing live APIs with enhanced visual design and callback functionality</p>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
|
|
22
|
+
<!-- Enhanced Features Card -->
|
|
23
|
+
<div class="p-6 bg-gradient-to-br from-green-50 to-emerald-50 border border-green-200 rounded-xl shadow-lg">
|
|
24
|
+
<h2 class="text-xl font-semibold text-green-800 mb-4 flex items-center">
|
|
25
|
+
<span class="mr-2">โ
</span> Enhanced Features
|
|
26
|
+
</h2>
|
|
27
|
+
<ul class="space-y-3 text-green-700">
|
|
28
|
+
<li class="flex items-start">
|
|
29
|
+
<span class="mr-2 text-green-500">๐จ</span>
|
|
30
|
+
<span>Improved visual design with modern UI components</span>
|
|
31
|
+
</li>
|
|
32
|
+
<li class="flex items-start">
|
|
33
|
+
<span class="mr-2 text-green-500">๐</span>
|
|
34
|
+
<span>Correct data types: Basic Info, Personality, Preferences</span>
|
|
35
|
+
</li>
|
|
36
|
+
<li class="flex items-start">
|
|
37
|
+
<span class="mr-2 text-green-500">๐</span>
|
|
38
|
+
<span>Auto mode toggle (default false for API URL return)</span>
|
|
39
|
+
</li>
|
|
40
|
+
<li class="flex items-start">
|
|
41
|
+
<span class="mr-2 text-green-500">๐งช</span>
|
|
42
|
+
<span>Test/Live mode switching with proper endpoints</span>
|
|
43
|
+
</li>
|
|
44
|
+
<li class="flex items-start">
|
|
45
|
+
<span class="mr-2 text-green-500">๐</span>
|
|
46
|
+
<span>Proper callback handling with response format</span>
|
|
47
|
+
</li>
|
|
48
|
+
</ul>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<!-- API Configuration Card -->
|
|
52
|
+
<div class="p-6 bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200 rounded-xl shadow-lg">
|
|
53
|
+
<h2 class="text-xl font-semibold text-blue-800 mb-4 flex items-center">
|
|
54
|
+
<span class="mr-2">๐ง</span> API Configuration
|
|
55
|
+
</h2>
|
|
56
|
+
<div class="space-y-3 text-blue-700">
|
|
57
|
+
<div class="flex items-center justify-between">
|
|
58
|
+
<span>Live Mode:</span>
|
|
59
|
+
<span class="px-2 py-1 bg-green-600 text-white text-xs rounded-full">ENABLED</span>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="flex items-center justify-between">
|
|
62
|
+
<span>Live Endpoint:</span>
|
|
63
|
+
<code class="text-xs bg-blue-100 px-2 py-1 rounded">api2.onairos.uk/inference</code>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="flex items-center justify-between">
|
|
66
|
+
<span>Test Endpoint:</span>
|
|
67
|
+
<code class="text-xs bg-gray-100 px-2 py-1 rounded">api2.onairos.uk/inferenceTest</code>
|
|
68
|
+
</div>
|
|
69
|
+
<div class="flex items-center justify-between">
|
|
70
|
+
<span>Auto Fetch:</span>
|
|
71
|
+
<span class="px-2 py-1 bg-orange-600 text-white text-xs rounded-full">FALSE (returns API URL)</span>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<!-- Test Configurations -->
|
|
78
|
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
79
|
+
<!-- Test Mode Configuration -->
|
|
80
|
+
<div class="p-4 bg-white border border-gray-200 rounded-lg shadow">
|
|
81
|
+
<h3 class="font-semibold mb-3 text-gray-800">๐งช Test Mode</h3>
|
|
82
|
+
<div class="space-y-2">
|
|
83
|
+
<button id="testModeBtn" class="w-full px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors">
|
|
84
|
+
Test with Test APIs
|
|
85
|
+
</button>
|
|
86
|
+
<p class="text-xs text-gray-600">Uses /inferenceTest endpoint with mock data</p>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
<!-- Live Mode Configuration -->
|
|
91
|
+
<div class="p-4 bg-white border border-gray-200 rounded-lg shadow">
|
|
92
|
+
<h3 class="font-semibold mb-3 text-gray-800">๐ Live Mode</h3>
|
|
93
|
+
<div class="space-y-2">
|
|
94
|
+
<button id="liveModeBtn" class="w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
|
|
95
|
+
Test with Live APIs
|
|
96
|
+
</button>
|
|
97
|
+
<p class="text-xs text-gray-600">Uses /inference endpoint with real data</p>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<!-- Auto Fetch Configuration -->
|
|
102
|
+
<div class="p-4 bg-white border border-gray-200 rounded-lg shadow">
|
|
103
|
+
<h3 class="font-semibold mb-3 text-gray-800">๐ Auto Fetch Mode</h3>
|
|
104
|
+
<div class="space-y-2">
|
|
105
|
+
<button id="autoFetchBtn" class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
|
|
106
|
+
Test Auto API Call
|
|
107
|
+
</button>
|
|
108
|
+
<p class="text-xs text-gray-600">Automatically calls API and returns results</p>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<!-- Current Configuration Display -->
|
|
114
|
+
<div class="mb-6 p-4 bg-gray-50 border border-gray-200 rounded-lg">
|
|
115
|
+
<h3 class="font-semibold mb-2">Current Configuration:</h3>
|
|
116
|
+
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
|
117
|
+
<div>
|
|
118
|
+
<span class="font-medium">Test Mode:</span>
|
|
119
|
+
<span id="currentTestMode" class="ml-2 px-2 py-1 bg-red-100 text-red-800 rounded text-xs">false</span>
|
|
120
|
+
</div>
|
|
121
|
+
<div>
|
|
122
|
+
<span class="font-medium">Auto Fetch:</span>
|
|
123
|
+
<span id="currentAutoFetch" class="ml-2 px-2 py-1 bg-red-100 text-red-800 rounded text-xs">false</span>
|
|
124
|
+
</div>
|
|
125
|
+
<div>
|
|
126
|
+
<span class="font-medium">Endpoint:</span>
|
|
127
|
+
<span id="currentEndpoint" class="ml-2 text-xs text-gray-600">api2.onairos.uk/inference</span>
|
|
128
|
+
</div>
|
|
129
|
+
<div>
|
|
130
|
+
<span class="font-medium">Mode:</span>
|
|
131
|
+
<span id="currentMode" class="ml-2 px-2 py-1 bg-green-100 text-green-800 rounded text-xs">LIVE</span>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
<!-- Onairos Button Container -->
|
|
137
|
+
<div class="text-center mb-6">
|
|
138
|
+
<h3 class="text-lg font-semibold mb-4">Click to Test Enhanced Onairos Flow:</h3>
|
|
139
|
+
<div id="button-container" class="inline-block"></div>
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
<!-- Results Display -->
|
|
143
|
+
<div id="result" class="mt-6 p-6 bg-white border border-gray-200 rounded-xl shadow-lg hidden">
|
|
144
|
+
<h3 class="font-semibold mb-4 text-lg text-gray-800 flex items-center">
|
|
145
|
+
<span class="mr-2">๐</span> Enhanced Completion Result:
|
|
146
|
+
</h3>
|
|
147
|
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
148
|
+
<div>
|
|
149
|
+
<h4 class="font-medium mb-2 text-gray-700">Response Data:</h4>
|
|
150
|
+
<pre id="result-data" class="text-sm text-gray-700 bg-gray-50 p-4 rounded-lg overflow-auto max-h-96"></pre>
|
|
151
|
+
</div>
|
|
152
|
+
<div>
|
|
153
|
+
<h4 class="font-medium mb-2 text-gray-700">Test Summary:</h4>
|
|
154
|
+
<div id="test-summary" class="space-y-2"></div>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
|
|
159
|
+
<!-- Logs Container -->
|
|
160
|
+
<div class="mt-8">
|
|
161
|
+
<h3 class="text-lg font-semibold mb-4 text-gray-800">๐ Test Logs:</h3>
|
|
162
|
+
<div id="logs" class="bg-black text-green-400 p-4 rounded-lg font-mono text-sm max-h-64 overflow-y-auto"></div>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
<script>
|
|
167
|
+
let currentConfig = {
|
|
168
|
+
testMode: false,
|
|
169
|
+
autoFetch: false
|
|
170
|
+
};
|
|
171
|
+
|
|
172
|
+
function updateConfigDisplay() {
|
|
173
|
+
document.getElementById('currentTestMode').textContent = currentConfig.testMode;
|
|
174
|
+
document.getElementById('currentTestMode').className = currentConfig.testMode
|
|
175
|
+
? 'ml-2 px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs'
|
|
176
|
+
: 'ml-2 px-2 py-1 bg-red-100 text-red-800 rounded text-xs';
|
|
177
|
+
|
|
178
|
+
document.getElementById('currentAutoFetch').textContent = currentConfig.autoFetch;
|
|
179
|
+
document.getElementById('currentAutoFetch').className = currentConfig.autoFetch
|
|
180
|
+
? 'ml-2 px-2 py-1 bg-green-100 text-green-800 rounded text-xs'
|
|
181
|
+
: 'ml-2 px-2 py-1 bg-red-100 text-red-800 rounded text-xs';
|
|
182
|
+
|
|
183
|
+
const endpoint = currentConfig.testMode ? 'api2.onairos.uk/inferenceTest' : 'api2.onairos.uk/inference';
|
|
184
|
+
document.getElementById('currentEndpoint').textContent = endpoint;
|
|
185
|
+
|
|
186
|
+
const mode = currentConfig.testMode ? 'TEST' : 'LIVE';
|
|
187
|
+
document.getElementById('currentMode').textContent = mode;
|
|
188
|
+
document.getElementById('currentMode').className = currentConfig.testMode
|
|
189
|
+
? 'ml-2 px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs'
|
|
190
|
+
: 'ml-2 px-2 py-1 bg-green-100 text-green-800 rounded text-xs';
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
function addLog(message, type = 'info') {
|
|
194
|
+
const logs = document.getElementById('logs');
|
|
195
|
+
const timestamp = new Date().toLocaleTimeString();
|
|
196
|
+
const colors = {
|
|
197
|
+
info: 'text-blue-400',
|
|
198
|
+
success: 'text-green-400',
|
|
199
|
+
error: 'text-red-400',
|
|
200
|
+
warning: 'text-yellow-400'
|
|
201
|
+
};
|
|
202
|
+
|
|
203
|
+
const logEntry = document.createElement('div');
|
|
204
|
+
logEntry.className = colors[type] || 'text-green-400';
|
|
205
|
+
logEntry.innerHTML = `<span class="text-gray-500">[${timestamp}]</span> ${message}`;
|
|
206
|
+
logs.appendChild(logEntry);
|
|
207
|
+
logs.scrollTop = logs.scrollHeight;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
function renderButton() {
|
|
211
|
+
const { OnairosButton } = window.Onairos || {};
|
|
212
|
+
|
|
213
|
+
if (!OnairosButton) {
|
|
214
|
+
addLog('โ OnairosButton not found, using fallback', 'error');
|
|
215
|
+
return;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
const buttonElement = React.createElement(OnairosButton, {
|
|
219
|
+
requestData: ['basic', 'personality', 'preferences'],
|
|
220
|
+
webpageName: 'Enhanced Live Test App',
|
|
221
|
+
onComplete: handleComplete,
|
|
222
|
+
autoFetch: currentConfig.autoFetch,
|
|
223
|
+
testMode: currentConfig.testMode,
|
|
224
|
+
buttonType: 'pill',
|
|
225
|
+
visualType: 'full',
|
|
226
|
+
textColor: 'black',
|
|
227
|
+
appIcon: 'https://onairos.sirv.com/Images/OnairosBlack.png'
|
|
228
|
+
});
|
|
229
|
+
|
|
230
|
+
ReactDOM.render(buttonElement, document.getElementById('button-container'));
|
|
231
|
+
addLog(`โ
Button rendered with testMode: ${currentConfig.testMode}, autoFetch: ${currentConfig.autoFetch}`, 'success');
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
async function handleComplete(result) {
|
|
235
|
+
try {
|
|
236
|
+
addLog('๐ Data request completed!', 'success');
|
|
237
|
+
|
|
238
|
+
// Show results
|
|
239
|
+
document.getElementById('result').classList.remove('hidden');
|
|
240
|
+
document.getElementById('result-data').textContent = JSON.stringify(result, null, 2);
|
|
241
|
+
|
|
242
|
+
// Create test summary
|
|
243
|
+
const summary = document.getElementById('test-summary');
|
|
244
|
+
summary.innerHTML = '';
|
|
245
|
+
|
|
246
|
+
const addSummaryItem = (label, value, isGood = true) => {
|
|
247
|
+
const item = document.createElement('div');
|
|
248
|
+
item.className = `flex items-center justify-between p-2 rounded ${isGood ? 'bg-green-50 text-green-800' : 'bg-red-50 text-red-800'}`;
|
|
249
|
+
item.innerHTML = `
|
|
250
|
+
<span>${label}:</span>
|
|
251
|
+
<span class="font-mono text-xs">${value}</span>
|
|
252
|
+
`;
|
|
253
|
+
summary.appendChild(item);
|
|
254
|
+
};
|
|
255
|
+
|
|
256
|
+
addSummaryItem('Success', result.success ? 'true' : 'false', result.success);
|
|
257
|
+
addSummaryItem('Test Mode', result.testMode ? 'true' : 'false');
|
|
258
|
+
addSummaryItem('API URL', result.apiUrl ? 'provided' : 'missing', !!result.apiUrl);
|
|
259
|
+
addSummaryItem('Auto Fetch', currentConfig.autoFetch ? 'true' : 'false');
|
|
260
|
+
|
|
261
|
+
if (result.approvedData) {
|
|
262
|
+
addSummaryItem('Data Types', result.approvedData.length);
|
|
263
|
+
addLog(`๐ Approved data types: ${result.approvedData.join(', ')}`, 'info');
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
if (result.apiResponse) {
|
|
267
|
+
addSummaryItem('API Response', 'received', true);
|
|
268
|
+
addLog('๐ก API response received', 'success');
|
|
269
|
+
|
|
270
|
+
if (result.testMode && result.apiResponse.InferenceResult) {
|
|
271
|
+
addLog('โ
Test mode InferenceResult format confirmed', 'success');
|
|
272
|
+
}
|
|
273
|
+
} else if (!currentConfig.autoFetch) {
|
|
274
|
+
addLog('๐ก API URL provided for manual calling (auto fetch disabled)', 'info');
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
if (result.apiError) {
|
|
278
|
+
addSummaryItem('API Error', result.apiError, false);
|
|
279
|
+
addLog(`โ API Error: ${result.apiError}`, 'error');
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
addLog('โ
Enhanced callback handling test complete!', 'success');
|
|
283
|
+
|
|
284
|
+
} catch (error) {
|
|
285
|
+
addLog(`โ Test completion failed: ${error.message}`, 'error');
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
// Event handlers
|
|
290
|
+
document.getElementById('testModeBtn').addEventListener('click', () => {
|
|
291
|
+
currentConfig.testMode = true;
|
|
292
|
+
currentConfig.autoFetch = false;
|
|
293
|
+
updateConfigDisplay();
|
|
294
|
+
renderButton();
|
|
295
|
+
addLog('๐งช Switched to TEST mode', 'info');
|
|
296
|
+
});
|
|
297
|
+
|
|
298
|
+
document.getElementById('liveModeBtn').addEventListener('click', () => {
|
|
299
|
+
currentConfig.testMode = false;
|
|
300
|
+
currentConfig.autoFetch = false;
|
|
301
|
+
updateConfigDisplay();
|
|
302
|
+
renderButton();
|
|
303
|
+
addLog('๐ Switched to LIVE mode', 'info');
|
|
304
|
+
});
|
|
305
|
+
|
|
306
|
+
document.getElementById('autoFetchBtn').addEventListener('click', () => {
|
|
307
|
+
currentConfig.autoFetch = true;
|
|
308
|
+
updateConfigDisplay();
|
|
309
|
+
renderButton();
|
|
310
|
+
addLog('๐ Auto fetch ENABLED', 'info');
|
|
311
|
+
});
|
|
312
|
+
|
|
313
|
+
// Initialize
|
|
314
|
+
updateConfigDisplay();
|
|
315
|
+
renderButton();
|
|
316
|
+
addLog('๐ Enhanced Onairos Live Mode Test initialized', 'success');
|
|
317
|
+
addLog('๐ Data types: Basic Info, Personality, Preferences', 'info');
|
|
318
|
+
addLog('๐ง Ready for end-to-end testing!', 'success');
|
|
319
|
+
</script>
|
|
320
|
+
</body>
|
|
321
|
+
</html>
|