@foisit/angular-wrapper 2.4.66 → 2.4.67
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.
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Component, Inject, Injectable, NgModule } from '@angular/core';
|
|
3
3
|
import { CommonModule } from '@angular/common';
|
|
4
|
-
import { CommandHandler, FallbackHandler, VoiceProcessor, TextToSpeech, GestureHandler, OverlayManager, StateManager } from '@foisit/core';
|
|
5
4
|
|
|
6
5
|
class AngularWrapperComponent {
|
|
7
6
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AngularWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -12,6 +11,1978 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
12
11
|
args: [{ selector: 'lib-angular-wrapper', imports: [CommonModule], template: "<p>AngularWrapper works!</p>\n" }]
|
|
13
12
|
}] });
|
|
14
13
|
|
|
14
|
+
class OpenAIService {
|
|
15
|
+
endpoint;
|
|
16
|
+
constructor(endpoint) {
|
|
17
|
+
this.endpoint =
|
|
18
|
+
endpoint || 'https://foisit-ninja.netlify.app/.netlify/functions/intent';
|
|
19
|
+
}
|
|
20
|
+
async determineIntent(userInput, availableCommands, context) {
|
|
21
|
+
try {
|
|
22
|
+
// Prepare the payload
|
|
23
|
+
const payload = {
|
|
24
|
+
userInput,
|
|
25
|
+
commands: availableCommands.map((cmd) => ({
|
|
26
|
+
id: cmd.id,
|
|
27
|
+
command: cmd.command,
|
|
28
|
+
description: cmd.description,
|
|
29
|
+
parameters: cmd.parameters, // Send param schemas to AI
|
|
30
|
+
})),
|
|
31
|
+
context,
|
|
32
|
+
};
|
|
33
|
+
const response = await fetch(this.endpoint, {
|
|
34
|
+
method: 'POST',
|
|
35
|
+
headers: {
|
|
36
|
+
'Content-Type': 'application/json',
|
|
37
|
+
},
|
|
38
|
+
body: JSON.stringify(payload),
|
|
39
|
+
});
|
|
40
|
+
if (!response.ok) {
|
|
41
|
+
throw new Error(`Proxy API Error: ${response.statusText}`);
|
|
42
|
+
}
|
|
43
|
+
const result = await response.json();
|
|
44
|
+
return result;
|
|
45
|
+
}
|
|
46
|
+
catch (error) {
|
|
47
|
+
console.error('OpenAIService Error:', error);
|
|
48
|
+
return { type: 'unknown' };
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
class CommandHandler {
|
|
54
|
+
commands = new Map();
|
|
55
|
+
openAIService = null;
|
|
56
|
+
context = null;
|
|
57
|
+
pendingConfirmation = null;
|
|
58
|
+
enableSmartIntent = true;
|
|
59
|
+
selectOptionsCache = new Map();
|
|
60
|
+
constructor(arg = true) {
|
|
61
|
+
if (typeof arg === 'boolean') {
|
|
62
|
+
this.enableSmartIntent = arg;
|
|
63
|
+
if (this.enableSmartIntent) {
|
|
64
|
+
this.openAIService = new OpenAIService();
|
|
65
|
+
}
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
this.enableSmartIntent = arg.enableSmartIntent ?? true;
|
|
69
|
+
if (this.enableSmartIntent) {
|
|
70
|
+
this.openAIService = new OpenAIService(arg.intentEndpoint);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
/** Add a new command (string or object) */
|
|
74
|
+
addCommand(commandOrObj, action) {
|
|
75
|
+
let cmd;
|
|
76
|
+
if (typeof commandOrObj === 'string') {
|
|
77
|
+
if (!action) {
|
|
78
|
+
throw new Error('Action required when adding command by string.');
|
|
79
|
+
}
|
|
80
|
+
cmd = {
|
|
81
|
+
id: commandOrObj.toLowerCase().replace(/\s+/g, '_'),
|
|
82
|
+
command: commandOrObj.toLowerCase(),
|
|
83
|
+
action,
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
cmd = { ...commandOrObj };
|
|
88
|
+
if (!cmd.id) {
|
|
89
|
+
cmd.id = cmd.command.toLowerCase().replace(/\s+/g, '_');
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
this.commands.set(cmd.command.toLowerCase(), cmd);
|
|
93
|
+
// Also index by ID for AI matching
|
|
94
|
+
if (cmd.id && cmd.id !== cmd.command) {
|
|
95
|
+
// We store it by ID in a separate map or just rely on iteration for AI
|
|
96
|
+
// For simplicity, let's keep the main map keyed by trigger phrase,
|
|
97
|
+
// but we'll lookup by ID in AI flow.
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
/** Remove an existing command */
|
|
101
|
+
removeCommand(command) {
|
|
102
|
+
this.commands.delete(command.toLowerCase());
|
|
103
|
+
}
|
|
104
|
+
/** Execute a command by matching input */
|
|
105
|
+
async executeCommand(input) {
|
|
106
|
+
// 0) Handle object input
|
|
107
|
+
if (typeof input === 'object' && input !== null) {
|
|
108
|
+
// Direct command trigger from UI: { commandId, params? }
|
|
109
|
+
if (this.isStructured(input)) {
|
|
110
|
+
const cmdId = String(input.commandId);
|
|
111
|
+
const rawParams = input.params ?? {};
|
|
112
|
+
const cmd = this.getCommandById(cmdId);
|
|
113
|
+
if (!cmd)
|
|
114
|
+
return { message: 'That command is not available.', type: 'error' };
|
|
115
|
+
const params = this.sanitizeParamsForCommand(cmd, rawParams);
|
|
116
|
+
const requiredParams = (cmd.parameters ?? []).filter((p) => p.required);
|
|
117
|
+
const missing = requiredParams.filter((p) => params[p.name] == null || params[p.name] === '');
|
|
118
|
+
if (missing.length > 0) {
|
|
119
|
+
// Ask for missing params via form and store context
|
|
120
|
+
this.context = { commandId: this.getCommandIdentifier(cmd), params };
|
|
121
|
+
return {
|
|
122
|
+
message: `Please provide the required details for "${cmd.command}".`,
|
|
123
|
+
type: 'form',
|
|
124
|
+
fields: missing,
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
if (cmd.critical) {
|
|
128
|
+
this.pendingConfirmation = { commandId: this.getCommandIdentifier(cmd), params };
|
|
129
|
+
return this.buildConfirmResponse(cmd);
|
|
130
|
+
}
|
|
131
|
+
return this.safeRunAction(cmd, params);
|
|
132
|
+
}
|
|
133
|
+
// Otherwise treat as continuation of a previously requested form
|
|
134
|
+
if (!this.context) {
|
|
135
|
+
return { message: 'Session expired or invalid context.', type: 'error' };
|
|
136
|
+
}
|
|
137
|
+
const cmd = this.getCommandById(this.context.commandId);
|
|
138
|
+
if (!cmd) {
|
|
139
|
+
this.context = null;
|
|
140
|
+
return { message: 'Session expired or invalid context.', type: 'error' };
|
|
141
|
+
}
|
|
142
|
+
if (Array.isArray(input)) {
|
|
143
|
+
return { message: 'Invalid form payload.', type: 'error' };
|
|
144
|
+
}
|
|
145
|
+
const mergedParams = {
|
|
146
|
+
...this.context.params,
|
|
147
|
+
...input,
|
|
148
|
+
};
|
|
149
|
+
// If this was a critical command, ask for confirmation before executing.
|
|
150
|
+
if (cmd.critical) {
|
|
151
|
+
this.context = null;
|
|
152
|
+
this.pendingConfirmation = {
|
|
153
|
+
commandId: this.getCommandIdentifier(cmd),
|
|
154
|
+
params: mergedParams,
|
|
155
|
+
};
|
|
156
|
+
return this.buildConfirmResponse(cmd);
|
|
157
|
+
}
|
|
158
|
+
const result = await this.safeRunAction(cmd, mergedParams);
|
|
159
|
+
this.context = null;
|
|
160
|
+
return this.normalizeResponse(result);
|
|
161
|
+
}
|
|
162
|
+
const trimmedInput = input.trim().toLowerCase();
|
|
163
|
+
// 1) Confirmation flow (Yes/No)
|
|
164
|
+
if (this.pendingConfirmation) {
|
|
165
|
+
const normalized = trimmedInput;
|
|
166
|
+
if (['yes', 'y', 'confirm', 'ok', 'okay'].includes(normalized)) {
|
|
167
|
+
const { commandId, params } = this.pendingConfirmation;
|
|
168
|
+
this.pendingConfirmation = null;
|
|
169
|
+
const cmd = this.getCommandById(commandId);
|
|
170
|
+
if (!cmd) {
|
|
171
|
+
return { message: 'That action is no longer available.', type: 'error' };
|
|
172
|
+
}
|
|
173
|
+
return this.safeRunAction(cmd, params);
|
|
174
|
+
}
|
|
175
|
+
if (['no', 'n', 'cancel', 'stop'].includes(normalized)) {
|
|
176
|
+
this.pendingConfirmation = null;
|
|
177
|
+
return { message: 'Cancelled.', type: 'success' };
|
|
178
|
+
}
|
|
179
|
+
return {
|
|
180
|
+
message: 'Please confirm: Yes or No.',
|
|
181
|
+
type: 'confirm',
|
|
182
|
+
options: [
|
|
183
|
+
{ label: 'Yes', value: 'yes' },
|
|
184
|
+
{ label: 'No', value: 'no' },
|
|
185
|
+
],
|
|
186
|
+
};
|
|
187
|
+
}
|
|
188
|
+
// 2) Exact match
|
|
189
|
+
const exactCommand = this.commands.get(trimmedInput);
|
|
190
|
+
if (exactCommand) {
|
|
191
|
+
const cmd = exactCommand;
|
|
192
|
+
// If the command needs params, collect them (no AI needed)
|
|
193
|
+
const requiredParams = (cmd.parameters ?? []).filter((p) => p.required);
|
|
194
|
+
if (requiredParams.length > 0) {
|
|
195
|
+
this.context = { commandId: this.getCommandIdentifier(cmd), params: {} };
|
|
196
|
+
return {
|
|
197
|
+
message: `Please provide the required details for "${cmd.command}".`,
|
|
198
|
+
type: 'form',
|
|
199
|
+
fields: requiredParams,
|
|
200
|
+
};
|
|
201
|
+
}
|
|
202
|
+
// Critical commands require confirmation
|
|
203
|
+
if (cmd.critical) {
|
|
204
|
+
this.pendingConfirmation = { commandId: this.getCommandIdentifier(cmd), params: {} };
|
|
205
|
+
return this.buildConfirmResponse(cmd);
|
|
206
|
+
}
|
|
207
|
+
// Always pass an object for params so actions can safely read optional fields.
|
|
208
|
+
return this.safeRunAction(cmd, {});
|
|
209
|
+
}
|
|
210
|
+
// 3) Deterministic (non-AI) fuzzy match using keywords/substring
|
|
211
|
+
const deterministic = await this.tryDeterministicMatch(trimmedInput);
|
|
212
|
+
if (deterministic)
|
|
213
|
+
return deterministic;
|
|
214
|
+
// 4) Smart intent fallback (AI)
|
|
215
|
+
if (this.enableSmartIntent && this.openAIService) {
|
|
216
|
+
const availableCommands = await this.getCommandsForAI();
|
|
217
|
+
const aiResult = await this.openAIService.determineIntent(trimmedInput, availableCommands, this.context);
|
|
218
|
+
return this.handleAIResult(aiResult);
|
|
219
|
+
}
|
|
220
|
+
// No deterministic match available and AI is disabled (or no AI configured).
|
|
221
|
+
// Return an error so callers (wrappers) can trigger fallback handling.
|
|
222
|
+
if (!this.enableSmartIntent) {
|
|
223
|
+
return { message: "I'm not sure what you mean.", type: 'error' };
|
|
224
|
+
}
|
|
225
|
+
// As a last resort, list available commands to let the user pick.
|
|
226
|
+
return this.listAllCommands();
|
|
227
|
+
}
|
|
228
|
+
async handleAIResult(result) {
|
|
229
|
+
if (result.type === 'match' && result.match) {
|
|
230
|
+
const cmd = this.getCommandById(result.match);
|
|
231
|
+
if (!cmd) {
|
|
232
|
+
return { message: "I'm not sure what you mean.", type: 'error' };
|
|
233
|
+
}
|
|
234
|
+
const rawParams = (result.params ?? {});
|
|
235
|
+
const sanitizedParams = this.sanitizeParamsForCommand(cmd, rawParams);
|
|
236
|
+
const params = cmd.allowAiParamExtraction === false ? {} : sanitizedParams;
|
|
237
|
+
const requiredParams = (cmd.parameters ?? []).filter((p) => p.required);
|
|
238
|
+
const missingRequired = requiredParams.filter((p) => params[p.name] == null || params[p.name] === '');
|
|
239
|
+
if (result.incomplete || missingRequired.length > 0) {
|
|
240
|
+
// Store partial params for continuation
|
|
241
|
+
this.context = { commandId: this.getCommandIdentifier(cmd), params };
|
|
242
|
+
const mustUseForm = cmd.collectRequiredViaForm !== false;
|
|
243
|
+
const askSingle = !mustUseForm && this.shouldAskSingleQuestion(missingRequired);
|
|
244
|
+
if (askSingle) {
|
|
245
|
+
const names = missingRequired.map((p) => p.name).join(' and ');
|
|
246
|
+
return {
|
|
247
|
+
message: result.message || `Please provide ${names}.`,
|
|
248
|
+
type: 'question',
|
|
249
|
+
};
|
|
250
|
+
}
|
|
251
|
+
return {
|
|
252
|
+
message: result.message || `Please fill in the missing details for "${cmd.command}".`,
|
|
253
|
+
type: 'form',
|
|
254
|
+
fields: missingRequired,
|
|
255
|
+
};
|
|
256
|
+
}
|
|
257
|
+
// Critical commands require confirmation
|
|
258
|
+
if (cmd.critical) {
|
|
259
|
+
this.pendingConfirmation = {
|
|
260
|
+
commandId: this.getCommandIdentifier(cmd),
|
|
261
|
+
params,
|
|
262
|
+
};
|
|
263
|
+
return this.buildConfirmResponse(cmd);
|
|
264
|
+
}
|
|
265
|
+
const actionResult = await cmd.action(params);
|
|
266
|
+
return this.normalizeResponse(actionResult);
|
|
267
|
+
}
|
|
268
|
+
if (result.type === 'ambiguous' && result.options && result.options.length) {
|
|
269
|
+
// Prefer clickable phrases that map to exact matches. Use commandId as value to
|
|
270
|
+
// make UI actions deterministic when the user clicks an option.
|
|
271
|
+
return {
|
|
272
|
+
message: result.message || 'Did you mean one of these?',
|
|
273
|
+
type: 'ambiguous',
|
|
274
|
+
options: result.options.map((o) => ({
|
|
275
|
+
label: o.label,
|
|
276
|
+
value: o.commandId ?? o.label,
|
|
277
|
+
commandId: o.commandId,
|
|
278
|
+
})),
|
|
279
|
+
};
|
|
280
|
+
}
|
|
281
|
+
// Unknown / fallback: show all available commands
|
|
282
|
+
return this.listAllCommands();
|
|
283
|
+
}
|
|
284
|
+
sanitizeParamsForCommand(cmd, params) {
|
|
285
|
+
const sanitized = { ...(params ?? {}) };
|
|
286
|
+
for (const p of cmd.parameters ?? []) {
|
|
287
|
+
const value = sanitized[p.name];
|
|
288
|
+
if (p.type === 'string') {
|
|
289
|
+
if (typeof value !== 'string') {
|
|
290
|
+
delete sanitized[p.name];
|
|
291
|
+
continue;
|
|
292
|
+
}
|
|
293
|
+
const trimmed = value.trim();
|
|
294
|
+
if (!trimmed) {
|
|
295
|
+
delete sanitized[p.name];
|
|
296
|
+
continue;
|
|
297
|
+
}
|
|
298
|
+
sanitized[p.name] = trimmed;
|
|
299
|
+
}
|
|
300
|
+
if (p.type === 'number') {
|
|
301
|
+
const numeric = typeof value === 'number' ? value : Number(value?.toString().trim());
|
|
302
|
+
if (Number.isNaN(numeric)) {
|
|
303
|
+
delete sanitized[p.name];
|
|
304
|
+
continue;
|
|
305
|
+
}
|
|
306
|
+
if (typeof p.min === 'number' && numeric < p.min) {
|
|
307
|
+
delete sanitized[p.name];
|
|
308
|
+
continue;
|
|
309
|
+
}
|
|
310
|
+
if (typeof p.max === 'number' && numeric > p.max) {
|
|
311
|
+
delete sanitized[p.name];
|
|
312
|
+
continue;
|
|
313
|
+
}
|
|
314
|
+
sanitized[p.name] = numeric;
|
|
315
|
+
}
|
|
316
|
+
if (p.type === 'date') {
|
|
317
|
+
const v = sanitized[p.name];
|
|
318
|
+
if (typeof v === 'string') {
|
|
319
|
+
const s = v.trim();
|
|
320
|
+
if (!this.isIsoDateString(s)) {
|
|
321
|
+
delete sanitized[p.name];
|
|
322
|
+
}
|
|
323
|
+
else {
|
|
324
|
+
sanitized[p.name] = s;
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
else {
|
|
328
|
+
delete sanitized[p.name];
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
if (p.type === 'select') {
|
|
332
|
+
const v = typeof value === 'string' ? value : value?.toString();
|
|
333
|
+
if (!v) {
|
|
334
|
+
delete sanitized[p.name];
|
|
335
|
+
continue;
|
|
336
|
+
}
|
|
337
|
+
if (Array.isArray(p.options) && p.options.length > 0) {
|
|
338
|
+
const allowed = p.options.some((opt) => String(opt.value) === String(v));
|
|
339
|
+
if (!allowed) {
|
|
340
|
+
delete sanitized[p.name];
|
|
341
|
+
continue;
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
sanitized[p.name] = v;
|
|
345
|
+
}
|
|
346
|
+
// Defensive handling for file parameters: AI may return textual hints like "csv file".
|
|
347
|
+
// If we expect a File/Blob or a base64 data URL (when delivery='base64'), accept only
|
|
348
|
+
// those forms. Otherwise remove the param so the handler will ask the user via a form.
|
|
349
|
+
if (p.type === 'file') {
|
|
350
|
+
const val = sanitized[p.name];
|
|
351
|
+
const isFileLike = val && typeof val === 'object' && typeof val.name === 'string' && typeof val.size === 'number';
|
|
352
|
+
const isDataUrl = typeof val === 'string' && /^data:[^;]+;base64,/.test(val);
|
|
353
|
+
const delivery = p.delivery ?? 'file';
|
|
354
|
+
if (delivery === 'base64') {
|
|
355
|
+
// Accept either a data URL string or a File-like object
|
|
356
|
+
if (!isDataUrl && !isFileLike) {
|
|
357
|
+
delete sanitized[p.name];
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
else {
|
|
361
|
+
// delivery === 'file' -> expect a File/Blob object
|
|
362
|
+
if (!isFileLike) {
|
|
363
|
+
delete sanitized[p.name];
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
return sanitized;
|
|
369
|
+
}
|
|
370
|
+
isIsoDateString(value) {
|
|
371
|
+
if (!/^\d{4}-\d{2}-\d{2}$/.test(value))
|
|
372
|
+
return false;
|
|
373
|
+
const dt = new Date(`${value}T00:00:00Z`);
|
|
374
|
+
return !Number.isNaN(dt.getTime());
|
|
375
|
+
}
|
|
376
|
+
shouldAskSingleQuestion(missing) {
|
|
377
|
+
if (missing.length !== 1)
|
|
378
|
+
return false;
|
|
379
|
+
const t = missing[0].type;
|
|
380
|
+
return t === 'string' || t === 'number' || t === 'date';
|
|
381
|
+
}
|
|
382
|
+
buildConfirmResponse(cmd) {
|
|
383
|
+
return {
|
|
384
|
+
message: `Are you sure you want to run "${cmd.command}"?`,
|
|
385
|
+
type: 'confirm',
|
|
386
|
+
options: [
|
|
387
|
+
{ label: 'Yes', value: 'yes' },
|
|
388
|
+
{ label: 'No', value: 'no' },
|
|
389
|
+
],
|
|
390
|
+
};
|
|
391
|
+
}
|
|
392
|
+
async tryDeterministicMatch(input) {
|
|
393
|
+
// Substring or keyword-based match before AI
|
|
394
|
+
const candidates = [];
|
|
395
|
+
for (const cmd of this.commands.values()) {
|
|
396
|
+
let score = 0;
|
|
397
|
+
const commandPhrase = cmd.command.toLowerCase();
|
|
398
|
+
if (input.includes(commandPhrase))
|
|
399
|
+
score += 5;
|
|
400
|
+
const keywords = cmd.keywords ?? [];
|
|
401
|
+
for (const kw of keywords) {
|
|
402
|
+
const k = kw.toLowerCase().trim();
|
|
403
|
+
if (!k)
|
|
404
|
+
continue;
|
|
405
|
+
if (input === k)
|
|
406
|
+
score += 4;
|
|
407
|
+
else if (input.includes(k))
|
|
408
|
+
score += 3;
|
|
409
|
+
}
|
|
410
|
+
if (score > 0)
|
|
411
|
+
candidates.push({ cmd, score });
|
|
412
|
+
}
|
|
413
|
+
if (candidates.length === 0)
|
|
414
|
+
return null;
|
|
415
|
+
candidates.sort((a, b) => b.score - a.score);
|
|
416
|
+
const topScore = candidates[0].score;
|
|
417
|
+
const top = candidates.filter((c) => c.score === topScore).slice(0, 3);
|
|
418
|
+
// If multiple equally-good matches, ask the user to choose.
|
|
419
|
+
if (top.length > 1) {
|
|
420
|
+
return {
|
|
421
|
+
message: 'I think you mean one of these. Which one should I run?',
|
|
422
|
+
type: 'ambiguous',
|
|
423
|
+
options: top.map((c) => ({
|
|
424
|
+
label: c.cmd.command,
|
|
425
|
+
value: c.cmd.command,
|
|
426
|
+
commandId: c.cmd.id,
|
|
427
|
+
})),
|
|
428
|
+
};
|
|
429
|
+
}
|
|
430
|
+
const cmd = top[0].cmd;
|
|
431
|
+
// If params are required, ask with a form
|
|
432
|
+
const requiredParams = (cmd.parameters ?? []).filter((p) => p.required);
|
|
433
|
+
if (requiredParams.length > 0) {
|
|
434
|
+
this.context = { commandId: this.getCommandIdentifier(cmd), params: {} };
|
|
435
|
+
return {
|
|
436
|
+
message: `Please provide the required details for "${cmd.command}".`,
|
|
437
|
+
type: 'form',
|
|
438
|
+
fields: requiredParams,
|
|
439
|
+
};
|
|
440
|
+
}
|
|
441
|
+
if (cmd.critical) {
|
|
442
|
+
this.pendingConfirmation = { commandId: this.getCommandIdentifier(cmd), params: {} };
|
|
443
|
+
return this.buildConfirmResponse(cmd);
|
|
444
|
+
}
|
|
445
|
+
return this.safeRunAction(cmd, {});
|
|
446
|
+
}
|
|
447
|
+
async safeRunAction(cmd, params) {
|
|
448
|
+
try {
|
|
449
|
+
const result = await cmd.action(params ?? {});
|
|
450
|
+
return this.normalizeResponse(result);
|
|
451
|
+
}
|
|
452
|
+
catch {
|
|
453
|
+
return { message: 'Something went wrong while running that command.', type: 'error' };
|
|
454
|
+
}
|
|
455
|
+
}
|
|
456
|
+
async getCommandsForAI() {
|
|
457
|
+
const commands = Array.from(this.commands.values()).map((cmd) => ({
|
|
458
|
+
...cmd,
|
|
459
|
+
parameters: cmd.parameters
|
|
460
|
+
? cmd.parameters.map((param) => ({ ...param }))
|
|
461
|
+
: undefined,
|
|
462
|
+
}));
|
|
463
|
+
// Resolve async select options (cached) to give the model enough context.
|
|
464
|
+
await Promise.all(commands.map(async (cmd) => {
|
|
465
|
+
if (!cmd.parameters)
|
|
466
|
+
return;
|
|
467
|
+
await Promise.all(cmd.parameters.map(async (p) => {
|
|
468
|
+
if (p.type !== 'select' || !p.getOptions || (p.options && p.options.length))
|
|
469
|
+
return;
|
|
470
|
+
const cacheKey = `${cmd.id ?? cmd.command}:${p.name}`;
|
|
471
|
+
const cached = this.selectOptionsCache.get(cacheKey);
|
|
472
|
+
const now = Date.now();
|
|
473
|
+
if (cached && now - cached.ts < 60_000) {
|
|
474
|
+
p.options = cached.options;
|
|
475
|
+
return;
|
|
476
|
+
}
|
|
477
|
+
try {
|
|
478
|
+
const opts = await p.getOptions();
|
|
479
|
+
this.selectOptionsCache.set(cacheKey, { options: opts, ts: now });
|
|
480
|
+
p.options = opts;
|
|
481
|
+
}
|
|
482
|
+
catch {
|
|
483
|
+
// If options fail to load, keep as-is.
|
|
484
|
+
}
|
|
485
|
+
}));
|
|
486
|
+
}));
|
|
487
|
+
return commands;
|
|
488
|
+
}
|
|
489
|
+
getCommandById(id) {
|
|
490
|
+
for (const cmd of this.commands.values()) {
|
|
491
|
+
if (cmd.id === id)
|
|
492
|
+
return cmd;
|
|
493
|
+
}
|
|
494
|
+
return undefined;
|
|
495
|
+
}
|
|
496
|
+
listAllCommands() {
|
|
497
|
+
const options = Array.from(this.commands.values()).map((cmd) => ({
|
|
498
|
+
label: cmd.command,
|
|
499
|
+
value: cmd.id ?? cmd.command,
|
|
500
|
+
commandId: cmd.id ?? cmd.command,
|
|
501
|
+
}));
|
|
502
|
+
return {
|
|
503
|
+
message: 'Here are the available commands:',
|
|
504
|
+
type: 'ambiguous',
|
|
505
|
+
options,
|
|
506
|
+
};
|
|
507
|
+
}
|
|
508
|
+
normalizeResponse(result) {
|
|
509
|
+
if (typeof result === 'string') {
|
|
510
|
+
return { message: result, type: 'success' };
|
|
511
|
+
}
|
|
512
|
+
if (result && typeof result === 'object') {
|
|
513
|
+
return result;
|
|
514
|
+
}
|
|
515
|
+
return { message: 'Done', type: 'success' };
|
|
516
|
+
}
|
|
517
|
+
isStructured(input) {
|
|
518
|
+
return typeof input['commandId'] === 'string';
|
|
519
|
+
}
|
|
520
|
+
getCommandIdentifier(cmd) {
|
|
521
|
+
if (!cmd.id) {
|
|
522
|
+
cmd.id = cmd.command.toLowerCase().replace(/\s+/g, '_');
|
|
523
|
+
}
|
|
524
|
+
return cmd.id;
|
|
525
|
+
}
|
|
526
|
+
/** List all registered commands */
|
|
527
|
+
getCommands() {
|
|
528
|
+
return Array.from(this.commands.keys());
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
class TextToSpeech {
|
|
533
|
+
synth = (typeof window !== 'undefined' ? window.speechSynthesis : null);
|
|
534
|
+
speak(text, options) {
|
|
535
|
+
if (!this.synth) {
|
|
536
|
+
// eslint-disable-next-line no-console
|
|
537
|
+
console.error('SpeechSynthesis API is not supported in this environment.');
|
|
538
|
+
return;
|
|
539
|
+
}
|
|
540
|
+
const utterance = new SpeechSynthesisUtterance(text);
|
|
541
|
+
if (options) {
|
|
542
|
+
utterance.pitch = options.pitch || 1;
|
|
543
|
+
utterance.rate = options.rate || 1;
|
|
544
|
+
utterance.volume = options.volume || 1;
|
|
545
|
+
}
|
|
546
|
+
// Notify listeners (e.g., VoiceProcessor) to pause recognition while speaking
|
|
547
|
+
if (typeof window !== 'undefined') {
|
|
548
|
+
utterance.onstart = () => {
|
|
549
|
+
window.dispatchEvent(new CustomEvent('foisit:tts-start'));
|
|
550
|
+
};
|
|
551
|
+
utterance.onend = () => {
|
|
552
|
+
// eslint-disable-next-line no-console
|
|
553
|
+
console.log('Speech finished.');
|
|
554
|
+
window.dispatchEvent(new CustomEvent('foisit:tts-end'));
|
|
555
|
+
};
|
|
556
|
+
}
|
|
557
|
+
utterance.onerror = (event) => {
|
|
558
|
+
// eslint-disable-next-line no-console
|
|
559
|
+
console.error('Error during speech synthesis:', event.error);
|
|
560
|
+
};
|
|
561
|
+
this.synth.speak(utterance);
|
|
562
|
+
}
|
|
563
|
+
stopSpeaking() {
|
|
564
|
+
if (this.synth) {
|
|
565
|
+
this.synth.cancel();
|
|
566
|
+
}
|
|
567
|
+
}
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
class FallbackHandler {
|
|
571
|
+
fallbackMessage = 'Sorry, I didn’t understand that.';
|
|
572
|
+
setFallbackMessage(message) {
|
|
573
|
+
this.fallbackMessage = message;
|
|
574
|
+
}
|
|
575
|
+
handleFallback(transcript) {
|
|
576
|
+
// eslint-disable-next-line no-console
|
|
577
|
+
if (transcript)
|
|
578
|
+
console.log(`Fallback triggered for: "${transcript}"`);
|
|
579
|
+
console.log(this.fallbackMessage);
|
|
580
|
+
new TextToSpeech().speak(this.fallbackMessage);
|
|
581
|
+
}
|
|
582
|
+
getFallbackMessage() {
|
|
583
|
+
return this.fallbackMessage;
|
|
584
|
+
}
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
/* eslint-disable no-unused-vars */
|
|
588
|
+
|
|
589
|
+
const getRecognitionCtor = () => {
|
|
590
|
+
if (typeof window === 'undefined')
|
|
591
|
+
return null;
|
|
592
|
+
const w = window;
|
|
593
|
+
return w.SpeechRecognition ?? w.webkitSpeechRecognition ?? null;
|
|
594
|
+
};
|
|
595
|
+
class VoiceProcessor {
|
|
596
|
+
recognition = null;
|
|
597
|
+
isListening = false;
|
|
598
|
+
engineActive = false; // true after onstart, false after onend
|
|
599
|
+
intentionallyStopped = false;
|
|
600
|
+
restartAllowed = true;
|
|
601
|
+
lastStart = 0;
|
|
602
|
+
backoffMs = 250;
|
|
603
|
+
destroyed = false;
|
|
604
|
+
resultCallback = null;
|
|
605
|
+
ttsSpeaking = false;
|
|
606
|
+
visibilityHandler;
|
|
607
|
+
statusCallback;
|
|
608
|
+
debugEnabled = true; // enable debug logs to aid diagnosis
|
|
609
|
+
restartTimer = null;
|
|
610
|
+
prewarmed = false;
|
|
611
|
+
hadResultThisSession = false;
|
|
612
|
+
// Debug logger helpers
|
|
613
|
+
log(message) {
|
|
614
|
+
if (this.debugEnabled && message) {
|
|
615
|
+
// eslint-disable-next-line no-console
|
|
616
|
+
console.log('[VoiceProcessor]', message);
|
|
617
|
+
}
|
|
618
|
+
}
|
|
619
|
+
warn(message) {
|
|
620
|
+
if (this.debugEnabled && message) {
|
|
621
|
+
// eslint-disable-next-line no-console
|
|
622
|
+
console.warn('[VoiceProcessor]', message);
|
|
623
|
+
}
|
|
624
|
+
}
|
|
625
|
+
error(message) {
|
|
626
|
+
if (this.debugEnabled && message) {
|
|
627
|
+
// eslint-disable-next-line no-console
|
|
628
|
+
console.error('[VoiceProcessor]', message);
|
|
629
|
+
}
|
|
630
|
+
}
|
|
631
|
+
constructor(language = 'en-US', options = {}) {
|
|
632
|
+
const Ctor = getRecognitionCtor();
|
|
633
|
+
if (Ctor) {
|
|
634
|
+
this.recognition = new Ctor();
|
|
635
|
+
this.recognition.lang = language;
|
|
636
|
+
this.recognition.interimResults = options.interimResults ?? true;
|
|
637
|
+
this.recognition.continuous = options.continuous ?? true;
|
|
638
|
+
this.recognition.onresult = (event) => this.handleResult(event, options);
|
|
639
|
+
this.recognition.onend = () => this.handleEnd();
|
|
640
|
+
this.recognition.onstart = () => {
|
|
641
|
+
this.log('recognition onstart');
|
|
642
|
+
this.engineActive = true;
|
|
643
|
+
this.hadResultThisSession = false;
|
|
644
|
+
// Clear any pending restart attempts now that we are active
|
|
645
|
+
if (this.restartTimer) {
|
|
646
|
+
clearTimeout(this.restartTimer);
|
|
647
|
+
this.restartTimer = null;
|
|
648
|
+
}
|
|
649
|
+
this.backoffMs = 250;
|
|
650
|
+
if (this.isListening && !this.ttsSpeaking) {
|
|
651
|
+
this.emitStatus('listening');
|
|
652
|
+
}
|
|
653
|
+
};
|
|
654
|
+
const vrec = this.recognition;
|
|
655
|
+
vrec.onaudiostart = () => this.log('onaudiostart');
|
|
656
|
+
vrec.onsoundstart = () => this.log('onsoundstart');
|
|
657
|
+
vrec.onspeechstart = () => this.log('onspeechstart');
|
|
658
|
+
vrec.onspeechend = () => this.log('onspeechend');
|
|
659
|
+
vrec.onsoundend = () => this.log('onsoundend');
|
|
660
|
+
vrec.onaudioend = () => this.log('onaudioend');
|
|
661
|
+
this.recognition.onerror = (event) => this.handleError(event);
|
|
662
|
+
}
|
|
663
|
+
else {
|
|
664
|
+
// No native support; keep recognition null and let consumers feature-detect.
|
|
665
|
+
this.recognition = null;
|
|
666
|
+
// If unsupported, immediately report status so UI can show a clear fallback.
|
|
667
|
+
this.emitStatus('unsupported');
|
|
668
|
+
}
|
|
669
|
+
// Pause listening while TTS is speaking via CustomEvents dispatched by TextToSpeech
|
|
670
|
+
if (typeof window !== 'undefined') {
|
|
671
|
+
window.addEventListener('foisit:tts-start', this.onTTSStart);
|
|
672
|
+
window.addEventListener('foisit:tts-end', this.onTTSEnd);
|
|
673
|
+
// Pause on tab hide, resume on show
|
|
674
|
+
this.visibilityHandler = () => {
|
|
675
|
+
if (typeof document !== 'undefined' && document.hidden) {
|
|
676
|
+
try {
|
|
677
|
+
this.recognition?.stop();
|
|
678
|
+
}
|
|
679
|
+
catch { /* no-op */ }
|
|
680
|
+
this.emitStatus(this.ttsSpeaking ? 'speaking' : 'idle');
|
|
681
|
+
}
|
|
682
|
+
else if (this.isListening && !this.ttsSpeaking) {
|
|
683
|
+
this.safeRestart();
|
|
684
|
+
}
|
|
685
|
+
};
|
|
686
|
+
if (typeof document !== 'undefined') {
|
|
687
|
+
document.addEventListener('visibilitychange', this.visibilityHandler);
|
|
688
|
+
}
|
|
689
|
+
}
|
|
690
|
+
else {
|
|
691
|
+
// No window/document on server — do not register browser-only handlers
|
|
692
|
+
this.visibilityHandler = undefined;
|
|
693
|
+
}
|
|
694
|
+
}
|
|
695
|
+
/** Check if SpeechRecognition is available */
|
|
696
|
+
isSupported() {
|
|
697
|
+
return getRecognitionCtor() !== null;
|
|
698
|
+
}
|
|
699
|
+
/** Allow consumers (wrappers) to observe status changes */
|
|
700
|
+
onStatusChange(callback) {
|
|
701
|
+
this.statusCallback = callback;
|
|
702
|
+
}
|
|
703
|
+
/** Start listening for speech input */
|
|
704
|
+
startListening(callback) {
|
|
705
|
+
if (!this.isSupported() || !this.recognition) {
|
|
706
|
+
this.warn('VoiceProcessor: SpeechRecognition is not supported in this browser.');
|
|
707
|
+
this.emitStatus('unsupported');
|
|
708
|
+
return;
|
|
709
|
+
}
|
|
710
|
+
if (this.isListening) {
|
|
711
|
+
this.warn('VoiceProcessor: Already listening.');
|
|
712
|
+
this.resultCallback = callback; // update callback if needed
|
|
713
|
+
return;
|
|
714
|
+
}
|
|
715
|
+
this.resultCallback = callback;
|
|
716
|
+
this.intentionallyStopped = false;
|
|
717
|
+
this.restartAllowed = true;
|
|
718
|
+
this.isListening = true;
|
|
719
|
+
this.emitStatus('listening');
|
|
720
|
+
// Warm up mic to avoid immediate onend in some environments
|
|
721
|
+
this.prewarmAudio().finally(() => {
|
|
722
|
+
this.safeRestart();
|
|
723
|
+
});
|
|
724
|
+
}
|
|
725
|
+
/** Stop listening for speech input */
|
|
726
|
+
stopListening() {
|
|
727
|
+
this.intentionallyStopped = true;
|
|
728
|
+
this.restartAllowed = false;
|
|
729
|
+
this.isListening = false;
|
|
730
|
+
this.emitStatus(this.ttsSpeaking ? 'speaking' : 'idle');
|
|
731
|
+
try {
|
|
732
|
+
this.recognition?.stop();
|
|
733
|
+
}
|
|
734
|
+
catch { /* no-op */ }
|
|
735
|
+
}
|
|
736
|
+
/** Clean up listeners */
|
|
737
|
+
destroy() {
|
|
738
|
+
this.destroyed = true;
|
|
739
|
+
this.stopListening();
|
|
740
|
+
this.resultCallback = null;
|
|
741
|
+
window.removeEventListener('foisit:tts-start', this.onTTSStart);
|
|
742
|
+
window.removeEventListener('foisit:tts-end', this.onTTSEnd);
|
|
743
|
+
if (this.visibilityHandler) {
|
|
744
|
+
document.removeEventListener('visibilitychange', this.visibilityHandler);
|
|
745
|
+
this.visibilityHandler = undefined;
|
|
746
|
+
}
|
|
747
|
+
}
|
|
748
|
+
/** Handle recognized speech results */
|
|
749
|
+
handleResult(event, options) {
|
|
750
|
+
if (!this.resultCallback)
|
|
751
|
+
return;
|
|
752
|
+
const threshold = options.confidenceThreshold ?? 0.6;
|
|
753
|
+
// Emit each alternative result chunk; concatenate finals client-side if desired
|
|
754
|
+
for (let i = event.resultIndex; i < event.results.length; i++) {
|
|
755
|
+
const res = event.results[i];
|
|
756
|
+
const alt = res && res[0];
|
|
757
|
+
const transcript = alt?.transcript?.trim?.() || '';
|
|
758
|
+
const confidence = alt?.confidence ?? 0;
|
|
759
|
+
if (!transcript)
|
|
760
|
+
continue;
|
|
761
|
+
if (!res.isFinal && options.interimResults === false)
|
|
762
|
+
continue; // skip interim if disabled
|
|
763
|
+
if (res.isFinal && confidence < threshold)
|
|
764
|
+
continue; // ignore low-confidence finals
|
|
765
|
+
try {
|
|
766
|
+
this.hadResultThisSession = true;
|
|
767
|
+
this.resultCallback(transcript, !!res.isFinal);
|
|
768
|
+
}
|
|
769
|
+
catch {
|
|
770
|
+
// Swallow user callback exceptions to avoid killing recognition
|
|
771
|
+
this.error('VoiceProcessor: result callback error');
|
|
772
|
+
}
|
|
773
|
+
}
|
|
774
|
+
}
|
|
775
|
+
/** Handle session end */
|
|
776
|
+
handleEnd() {
|
|
777
|
+
this.log('recognition onend');
|
|
778
|
+
this.engineActive = false;
|
|
779
|
+
if (this.destroyed || this.intentionallyStopped || !this.restartAllowed || this.ttsSpeaking) {
|
|
780
|
+
if (!this.ttsSpeaking) {
|
|
781
|
+
this.isListening = false;
|
|
782
|
+
this.emitStatus('idle');
|
|
783
|
+
}
|
|
784
|
+
return;
|
|
785
|
+
}
|
|
786
|
+
// We are still in "listening" mode logically; recognition ended spuriously.
|
|
787
|
+
this.isListening = true;
|
|
788
|
+
// Best-effort restart (continuous can still end spuriously)
|
|
789
|
+
this.scheduleRestart();
|
|
790
|
+
}
|
|
791
|
+
/** Handle errors during speech recognition */
|
|
792
|
+
handleError(event) {
|
|
793
|
+
const err = event?.error;
|
|
794
|
+
this.warn(`Error occurred: ${err ?? 'unknown'}`);
|
|
795
|
+
// Fatal errors: don't spin
|
|
796
|
+
const fatal = ['not-allowed', 'service-not-allowed', 'bad-grammar', 'language-not-supported'];
|
|
797
|
+
if (err && fatal.includes(err)) {
|
|
798
|
+
this.intentionallyStopped = true;
|
|
799
|
+
this.restartAllowed = false;
|
|
800
|
+
this.isListening = false;
|
|
801
|
+
this.emitStatus('error', { error: err });
|
|
802
|
+
return;
|
|
803
|
+
}
|
|
804
|
+
// For transient errors, try restart
|
|
805
|
+
this.scheduleRestart();
|
|
806
|
+
}
|
|
807
|
+
safeRestart() {
|
|
808
|
+
if (!this.recognition)
|
|
809
|
+
return;
|
|
810
|
+
if (this.engineActive) {
|
|
811
|
+
this.log('safeRestart: engine already active, skipping start');
|
|
812
|
+
return;
|
|
813
|
+
}
|
|
814
|
+
const now = Date.now();
|
|
815
|
+
if (now - this.lastStart < 300) {
|
|
816
|
+
setTimeout(() => this.safeRestart(), 300);
|
|
817
|
+
return;
|
|
818
|
+
}
|
|
819
|
+
this.lastStart = now;
|
|
820
|
+
try {
|
|
821
|
+
this.log('calling recognition.start()');
|
|
822
|
+
this.recognition.start();
|
|
823
|
+
this.backoffMs = 250; // reset backoff on successful start
|
|
824
|
+
if (this.isListening && !this.ttsSpeaking) {
|
|
825
|
+
this.emitStatus('listening');
|
|
826
|
+
}
|
|
827
|
+
}
|
|
828
|
+
catch {
|
|
829
|
+
this.error('recognition.start() threw; scheduling restart');
|
|
830
|
+
this.scheduleRestart();
|
|
831
|
+
}
|
|
832
|
+
}
|
|
833
|
+
scheduleRestart() {
|
|
834
|
+
if (this.destroyed || this.intentionallyStopped || !this.restartAllowed || this.ttsSpeaking)
|
|
835
|
+
return;
|
|
836
|
+
if (this.engineActive) {
|
|
837
|
+
this.log('scheduleRestart: engine active, not scheduling');
|
|
838
|
+
return;
|
|
839
|
+
}
|
|
840
|
+
const delay = Math.min(this.backoffMs, 2000);
|
|
841
|
+
this.log(`scheduleRestart in ${delay}ms`);
|
|
842
|
+
if (this.restartTimer) {
|
|
843
|
+
// A restart is already scheduled; keep the earliest
|
|
844
|
+
this.log('scheduleRestart: restart already scheduled');
|
|
845
|
+
return;
|
|
846
|
+
}
|
|
847
|
+
this.restartTimer = setTimeout(() => {
|
|
848
|
+
this.restartTimer = null;
|
|
849
|
+
if (this.destroyed || this.intentionallyStopped || !this.restartAllowed || this.ttsSpeaking)
|
|
850
|
+
return;
|
|
851
|
+
this.safeRestart();
|
|
852
|
+
}, delay);
|
|
853
|
+
this.backoffMs = Math.min(this.backoffMs * 2, 2000);
|
|
854
|
+
}
|
|
855
|
+
async prewarmAudio() {
|
|
856
|
+
if (this.prewarmed)
|
|
857
|
+
return;
|
|
858
|
+
try {
|
|
859
|
+
if (typeof navigator === 'undefined' || !('mediaDevices' in navigator))
|
|
860
|
+
return;
|
|
861
|
+
const md = navigator.mediaDevices;
|
|
862
|
+
if (!md?.getUserMedia)
|
|
863
|
+
return;
|
|
864
|
+
this.log('prewarmAudio: requesting mic');
|
|
865
|
+
const stream = await md.getUserMedia({ audio: true });
|
|
866
|
+
for (const track of stream.getTracks())
|
|
867
|
+
track.stop();
|
|
868
|
+
this.prewarmed = true;
|
|
869
|
+
this.log('prewarmAudio: mic ready');
|
|
870
|
+
}
|
|
871
|
+
catch {
|
|
872
|
+
this.warn('prewarmAudio: failed to get mic');
|
|
873
|
+
}
|
|
874
|
+
}
|
|
875
|
+
onTTSStart = () => {
|
|
876
|
+
this.ttsSpeaking = true;
|
|
877
|
+
try {
|
|
878
|
+
this.recognition?.stop();
|
|
879
|
+
}
|
|
880
|
+
catch { /* no-op */ }
|
|
881
|
+
// If we were listening, switch to speaking state
|
|
882
|
+
if (this.isListening) {
|
|
883
|
+
this.emitStatus('speaking');
|
|
884
|
+
}
|
|
885
|
+
};
|
|
886
|
+
onTTSEnd = () => {
|
|
887
|
+
this.ttsSpeaking = false;
|
|
888
|
+
if (this.isListening && this.restartAllowed) {
|
|
889
|
+
this.safeRestart();
|
|
890
|
+
}
|
|
891
|
+
else {
|
|
892
|
+
this.emitStatus(this.isListening ? 'listening' : 'idle');
|
|
893
|
+
}
|
|
894
|
+
};
|
|
895
|
+
emitStatus(status, details) {
|
|
896
|
+
if (!this.statusCallback)
|
|
897
|
+
return;
|
|
898
|
+
try {
|
|
899
|
+
this.statusCallback(status, details);
|
|
900
|
+
}
|
|
901
|
+
catch {
|
|
902
|
+
// Never let consumer errors break recognition
|
|
903
|
+
this.error('VoiceProcessor: status callback error');
|
|
904
|
+
}
|
|
905
|
+
}
|
|
906
|
+
}
|
|
907
|
+
|
|
908
|
+
class GestureHandler {
|
|
909
|
+
lastTap = 0;
|
|
910
|
+
dblClickListener;
|
|
911
|
+
touchEndListener;
|
|
912
|
+
/**
|
|
913
|
+
* Sets up double-click and double-tap listeners
|
|
914
|
+
* @param onDoubleClickOrTap Callback to execute when a double-click or double-tap is detected
|
|
915
|
+
*/
|
|
916
|
+
setupDoubleTapListener(onDoubleClickOrTap) {
|
|
917
|
+
// Ensure we never stack multiple listeners for the same instance
|
|
918
|
+
this.destroy();
|
|
919
|
+
// Handle double-click (desktop)
|
|
920
|
+
this.dblClickListener = () => {
|
|
921
|
+
onDoubleClickOrTap();
|
|
922
|
+
};
|
|
923
|
+
document.addEventListener('dblclick', this.dblClickListener);
|
|
924
|
+
// Handle double-tap (mobile)
|
|
925
|
+
this.touchEndListener = () => {
|
|
926
|
+
const currentTime = new Date().getTime();
|
|
927
|
+
const tapInterval = currentTime - this.lastTap;
|
|
928
|
+
if (tapInterval < 300 && tapInterval > 0) {
|
|
929
|
+
onDoubleClickOrTap();
|
|
930
|
+
}
|
|
931
|
+
this.lastTap = currentTime;
|
|
932
|
+
};
|
|
933
|
+
document.addEventListener('touchend', this.touchEndListener);
|
|
934
|
+
}
|
|
935
|
+
destroy() {
|
|
936
|
+
if (this.dblClickListener) {
|
|
937
|
+
document.removeEventListener('dblclick', this.dblClickListener);
|
|
938
|
+
}
|
|
939
|
+
if (this.touchEndListener) {
|
|
940
|
+
document.removeEventListener('touchend', this.touchEndListener);
|
|
941
|
+
}
|
|
942
|
+
this.dblClickListener = undefined;
|
|
943
|
+
this.touchEndListener = undefined;
|
|
944
|
+
}
|
|
945
|
+
}
|
|
946
|
+
function injectStyles() {
|
|
947
|
+
// Check if the styles are already injected
|
|
948
|
+
const existingStyle = document.querySelector('#assistant-styles');
|
|
949
|
+
if (existingStyle) {
|
|
950
|
+
console.log('Styles already injected');
|
|
951
|
+
return; // Avoid duplicate injection
|
|
952
|
+
}
|
|
953
|
+
// Create and inject the style element
|
|
954
|
+
const style = document.createElement('style');
|
|
955
|
+
style.id = 'assistant-styles';
|
|
956
|
+
style.innerHTML = `
|
|
957
|
+
/* Rounded shape with gradient animation */
|
|
958
|
+
.gradient-indicator {
|
|
959
|
+
position: fixed;
|
|
960
|
+
top: 20px;
|
|
961
|
+
right: 20px;
|
|
962
|
+
width: 60px;
|
|
963
|
+
height: 60px;
|
|
964
|
+
border-radius: 50%;
|
|
965
|
+
background: linear-gradient(135deg, #ff6ec4, #7873f5, #5e8cff, #6ed0f6);
|
|
966
|
+
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
|
967
|
+
animation: amoeba 5s infinite ease-in-out;
|
|
968
|
+
z-index: 9999; /* Ensure it's above all other elements */
|
|
969
|
+
}
|
|
970
|
+
|
|
971
|
+
/* Amoeba effect for the borders */
|
|
972
|
+
@keyframes amoeba {
|
|
973
|
+
0% {
|
|
974
|
+
border-radius: 50%;
|
|
975
|
+
}
|
|
976
|
+
25% {
|
|
977
|
+
border-radius: 40% 60% 60% 40%;
|
|
978
|
+
}
|
|
979
|
+
50% {
|
|
980
|
+
border-radius: 60% 40% 40% 60%;
|
|
981
|
+
}
|
|
982
|
+
75% {
|
|
983
|
+
border-radius: 40% 60% 60% 40%;
|
|
984
|
+
}
|
|
985
|
+
100% {
|
|
986
|
+
border-radius: 50%;
|
|
987
|
+
}
|
|
988
|
+
}
|
|
989
|
+
`;
|
|
990
|
+
document.head.appendChild(style);
|
|
991
|
+
console.log('Gradient styles injected');
|
|
992
|
+
}
|
|
993
|
+
function addGradientAnimation() {
|
|
994
|
+
// Check if the gradient indicator already exists
|
|
995
|
+
if (document.querySelector('#gradient-indicator')) {
|
|
996
|
+
return; // Avoid duplicate indicators
|
|
997
|
+
}
|
|
998
|
+
// Create a new div element
|
|
999
|
+
const gradientDiv = document.createElement('div');
|
|
1000
|
+
gradientDiv.id = 'gradient-indicator';
|
|
1001
|
+
// Inject styles dynamically
|
|
1002
|
+
injectStyles();
|
|
1003
|
+
// Add the gradient-indicator class to the div
|
|
1004
|
+
gradientDiv.classList.add('gradient-indicator');
|
|
1005
|
+
// Append the div to the body
|
|
1006
|
+
document.body.appendChild(gradientDiv);
|
|
1007
|
+
console.log('Gradient indicator added to the DOM');
|
|
1008
|
+
}
|
|
1009
|
+
function removeGradientAnimation() {
|
|
1010
|
+
const gradientDiv = document.querySelector('#gradient-indicator');
|
|
1011
|
+
if (gradientDiv) {
|
|
1012
|
+
gradientDiv.remove();
|
|
1013
|
+
console.log('Gradient indicator removed from the DOM');
|
|
1014
|
+
}
|
|
1015
|
+
}
|
|
1016
|
+
|
|
1017
|
+
function isBrowser() {
|
|
1018
|
+
return typeof window !== 'undefined' && typeof document !== 'undefined';
|
|
1019
|
+
}
|
|
1020
|
+
|
|
1021
|
+
class StateManager {
|
|
1022
|
+
state = 'idle';
|
|
1023
|
+
// eslint-disable-next-line no-unused-vars
|
|
1024
|
+
subscribers = [];
|
|
1025
|
+
getState() {
|
|
1026
|
+
return this.state;
|
|
1027
|
+
}
|
|
1028
|
+
setState(state) {
|
|
1029
|
+
this.state = state;
|
|
1030
|
+
this.notifySubscribers();
|
|
1031
|
+
console.log('State updated:', state);
|
|
1032
|
+
// Dynamically update body class based on state
|
|
1033
|
+
if (state === 'listening') {
|
|
1034
|
+
addGradientAnimation();
|
|
1035
|
+
}
|
|
1036
|
+
else {
|
|
1037
|
+
removeGradientAnimation();
|
|
1038
|
+
}
|
|
1039
|
+
}
|
|
1040
|
+
// eslint-disable-next-line no-unused-vars
|
|
1041
|
+
subscribe(callback) {
|
|
1042
|
+
this.subscribers.push(callback);
|
|
1043
|
+
}
|
|
1044
|
+
notifySubscribers() {
|
|
1045
|
+
this.subscribers.forEach((callback) => callback(this.state));
|
|
1046
|
+
}
|
|
1047
|
+
}
|
|
1048
|
+
|
|
1049
|
+
/* eslint-disable no-unused-vars */
|
|
1050
|
+
class OverlayManager {
|
|
1051
|
+
container = null;
|
|
1052
|
+
chatWindow = null;
|
|
1053
|
+
messagesContainer = null;
|
|
1054
|
+
input = null;
|
|
1055
|
+
isOpen = false;
|
|
1056
|
+
onSubmit;
|
|
1057
|
+
onClose;
|
|
1058
|
+
loadingEl = null;
|
|
1059
|
+
config;
|
|
1060
|
+
active = isBrowser();
|
|
1061
|
+
constructor(config) {
|
|
1062
|
+
this.config = config;
|
|
1063
|
+
if (this.active)
|
|
1064
|
+
this.init();
|
|
1065
|
+
}
|
|
1066
|
+
init() {
|
|
1067
|
+
if (this.container)
|
|
1068
|
+
return;
|
|
1069
|
+
this.injectOverlayStyles();
|
|
1070
|
+
// Reuse an existing overlay container if one already exists on the page.
|
|
1071
|
+
// This prevents duplicate overlays when multiple assistant instances are created (e.g., React StrictMode).
|
|
1072
|
+
const existing = document.getElementById('foisit-overlay-container');
|
|
1073
|
+
if (existing && existing instanceof HTMLElement) {
|
|
1074
|
+
this.container = existing;
|
|
1075
|
+
this.chatWindow = existing.querySelector('.foisit-chat');
|
|
1076
|
+
this.messagesContainer = existing.querySelector('.foisit-messages');
|
|
1077
|
+
this.input = existing.querySelector('input.foisit-input');
|
|
1078
|
+
if (this.config.floatingButton?.visible !== false && !existing.querySelector('.foisit-floating-btn')) {
|
|
1079
|
+
this.renderFloatingButton();
|
|
1080
|
+
}
|
|
1081
|
+
if (!this.chatWindow) {
|
|
1082
|
+
this.renderChatWindow();
|
|
1083
|
+
}
|
|
1084
|
+
return;
|
|
1085
|
+
}
|
|
1086
|
+
this.container = document.createElement('div');
|
|
1087
|
+
this.container.id = 'foisit-overlay-container';
|
|
1088
|
+
this.container.className = 'foisit-overlay-container';
|
|
1089
|
+
document.body.appendChild(this.container);
|
|
1090
|
+
if (this.config.floatingButton?.visible !== false) {
|
|
1091
|
+
this.renderFloatingButton();
|
|
1092
|
+
}
|
|
1093
|
+
this.renderChatWindow();
|
|
1094
|
+
}
|
|
1095
|
+
renderFloatingButton() {
|
|
1096
|
+
const btn = document.createElement('button');
|
|
1097
|
+
btn.innerHTML = this.config.floatingButton?.customHtml || '🎙️';
|
|
1098
|
+
const bottom = this.config.floatingButton?.position?.bottom || '20px';
|
|
1099
|
+
const right = this.config.floatingButton?.position?.right || '20px';
|
|
1100
|
+
btn.className = 'foisit-floating-btn';
|
|
1101
|
+
btn.style.bottom = bottom;
|
|
1102
|
+
btn.style.right = right;
|
|
1103
|
+
btn.onclick = () => this.toggle();
|
|
1104
|
+
btn.onmouseenter = () => (btn.style.transform = 'scale(1.05)');
|
|
1105
|
+
btn.onmouseleave = () => (btn.style.transform = 'scale(1)');
|
|
1106
|
+
this.container?.appendChild(btn);
|
|
1107
|
+
}
|
|
1108
|
+
renderChatWindow() {
|
|
1109
|
+
if (this.chatWindow)
|
|
1110
|
+
return;
|
|
1111
|
+
this.chatWindow = document.createElement('div');
|
|
1112
|
+
this.chatWindow.className = 'foisit-chat';
|
|
1113
|
+
// Header
|
|
1114
|
+
const header = document.createElement('div');
|
|
1115
|
+
header.className = 'foisit-header';
|
|
1116
|
+
const title = document.createElement('span');
|
|
1117
|
+
title.className = 'foisit-title';
|
|
1118
|
+
title.textContent = 'Foisit';
|
|
1119
|
+
const closeButton = document.createElement('button');
|
|
1120
|
+
closeButton.type = 'button';
|
|
1121
|
+
closeButton.className = 'foisit-close';
|
|
1122
|
+
closeButton.setAttribute('aria-label', 'Close');
|
|
1123
|
+
closeButton.innerHTML = '×';
|
|
1124
|
+
closeButton.addEventListener('click', () => this.toggle());
|
|
1125
|
+
header.appendChild(title);
|
|
1126
|
+
header.appendChild(closeButton);
|
|
1127
|
+
// Messages Area
|
|
1128
|
+
this.messagesContainer = document.createElement('div');
|
|
1129
|
+
this.messagesContainer.className = 'foisit-messages';
|
|
1130
|
+
// Input Area
|
|
1131
|
+
const inputArea = document.createElement('div');
|
|
1132
|
+
inputArea.className = 'foisit-input-area';
|
|
1133
|
+
this.input = document.createElement('input');
|
|
1134
|
+
this.input.placeholder =
|
|
1135
|
+
this.config.inputPlaceholder || 'Type a command...';
|
|
1136
|
+
this.input.className = 'foisit-input';
|
|
1137
|
+
this.input.addEventListener('keydown', (e) => {
|
|
1138
|
+
if (e.key === 'Enter' && this.input?.value.trim()) {
|
|
1139
|
+
const text = this.input.value.trim();
|
|
1140
|
+
this.input.value = '';
|
|
1141
|
+
if (this.onSubmit)
|
|
1142
|
+
this.onSubmit(text);
|
|
1143
|
+
}
|
|
1144
|
+
});
|
|
1145
|
+
inputArea.appendChild(this.input);
|
|
1146
|
+
this.chatWindow.appendChild(header);
|
|
1147
|
+
this.chatWindow.appendChild(this.messagesContainer);
|
|
1148
|
+
this.chatWindow.appendChild(inputArea);
|
|
1149
|
+
this.container?.appendChild(this.chatWindow);
|
|
1150
|
+
}
|
|
1151
|
+
registerCallbacks(onSubmit, onClose) {
|
|
1152
|
+
if (!this.active)
|
|
1153
|
+
return; // no-op on server
|
|
1154
|
+
this.onSubmit = onSubmit;
|
|
1155
|
+
this.onClose = onClose;
|
|
1156
|
+
}
|
|
1157
|
+
toggle(onSubmit, onClose) {
|
|
1158
|
+
if (!this.active)
|
|
1159
|
+
return; // no-op on server
|
|
1160
|
+
if (onSubmit)
|
|
1161
|
+
this.onSubmit = onSubmit;
|
|
1162
|
+
if (onClose)
|
|
1163
|
+
this.onClose = onClose;
|
|
1164
|
+
this.isOpen = !this.isOpen;
|
|
1165
|
+
if (this.chatWindow) {
|
|
1166
|
+
if (this.isOpen) {
|
|
1167
|
+
this.chatWindow.style.display = 'flex';
|
|
1168
|
+
requestAnimationFrame(() => {
|
|
1169
|
+
if (this.chatWindow) {
|
|
1170
|
+
this.chatWindow.style.opacity = '1';
|
|
1171
|
+
this.chatWindow.style.transform = 'translateY(0) scale(1)';
|
|
1172
|
+
}
|
|
1173
|
+
});
|
|
1174
|
+
setTimeout(() => this.input?.focus(), 100);
|
|
1175
|
+
}
|
|
1176
|
+
else {
|
|
1177
|
+
this.chatWindow.style.opacity = '0';
|
|
1178
|
+
this.chatWindow.style.transform = 'translateY(20px) scale(0.95)';
|
|
1179
|
+
setTimeout(() => {
|
|
1180
|
+
if (this.chatWindow && !this.isOpen) {
|
|
1181
|
+
this.chatWindow.style.display = 'none';
|
|
1182
|
+
}
|
|
1183
|
+
}, 200);
|
|
1184
|
+
if (this.onClose)
|
|
1185
|
+
this.onClose();
|
|
1186
|
+
}
|
|
1187
|
+
}
|
|
1188
|
+
}
|
|
1189
|
+
addMessage(text, type) {
|
|
1190
|
+
if (!this.messagesContainer)
|
|
1191
|
+
return;
|
|
1192
|
+
const msg = document.createElement('div');
|
|
1193
|
+
msg.textContent = text;
|
|
1194
|
+
msg.className = type === 'user' ? 'foisit-bubble user' : 'foisit-bubble system';
|
|
1195
|
+
this.messagesContainer.appendChild(msg);
|
|
1196
|
+
this.scrollToBottom();
|
|
1197
|
+
}
|
|
1198
|
+
addOptions(options) {
|
|
1199
|
+
if (!this.messagesContainer)
|
|
1200
|
+
return;
|
|
1201
|
+
const container = document.createElement('div');
|
|
1202
|
+
container.className = 'foisit-options-container';
|
|
1203
|
+
options.forEach((opt) => {
|
|
1204
|
+
const btn = document.createElement('button');
|
|
1205
|
+
btn.textContent = opt.label;
|
|
1206
|
+
btn.className = 'foisit-option-chip';
|
|
1207
|
+
btn.setAttribute('type', 'button');
|
|
1208
|
+
btn.setAttribute('aria-label', opt.label);
|
|
1209
|
+
const clickPayload = () => {
|
|
1210
|
+
// If commandId is provided, submit a structured payload so the handler
|
|
1211
|
+
// can run it deterministically: { commandId, params? }
|
|
1212
|
+
if (opt.commandId) {
|
|
1213
|
+
if (this.onSubmit)
|
|
1214
|
+
this.onSubmit({ commandId: opt.commandId });
|
|
1215
|
+
return;
|
|
1216
|
+
}
|
|
1217
|
+
// Otherwise fall back to value or label string
|
|
1218
|
+
const value = (opt && typeof opt.value === 'string' && opt.value.trim()) ? opt.value : opt.label;
|
|
1219
|
+
if (this.onSubmit)
|
|
1220
|
+
this.onSubmit(value);
|
|
1221
|
+
};
|
|
1222
|
+
btn.onclick = clickPayload;
|
|
1223
|
+
btn.onkeydown = (e) => {
|
|
1224
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
1225
|
+
e.preventDefault();
|
|
1226
|
+
clickPayload();
|
|
1227
|
+
}
|
|
1228
|
+
};
|
|
1229
|
+
container.appendChild(btn);
|
|
1230
|
+
});
|
|
1231
|
+
this.messagesContainer.appendChild(container);
|
|
1232
|
+
this.scrollToBottom();
|
|
1233
|
+
}
|
|
1234
|
+
addForm(message, fields, onSubmit) {
|
|
1235
|
+
if (!this.messagesContainer)
|
|
1236
|
+
return;
|
|
1237
|
+
this.addMessage(message, 'system');
|
|
1238
|
+
const form = document.createElement('form');
|
|
1239
|
+
form.className = 'foisit-form';
|
|
1240
|
+
const controls = [];
|
|
1241
|
+
const createLabel = (text, required) => {
|
|
1242
|
+
const label = document.createElement('div');
|
|
1243
|
+
label.className = 'foisit-form-label';
|
|
1244
|
+
label.innerHTML = text + (required ? ' <span class="foisit-req-star">*</span>' : '');
|
|
1245
|
+
return label;
|
|
1246
|
+
};
|
|
1247
|
+
const createError = () => {
|
|
1248
|
+
const error = document.createElement('div');
|
|
1249
|
+
error.className = 'foisit-form-error';
|
|
1250
|
+
error.style.display = 'none';
|
|
1251
|
+
return error;
|
|
1252
|
+
};
|
|
1253
|
+
(fields ?? []).forEach((field) => {
|
|
1254
|
+
const wrapper = document.createElement('div');
|
|
1255
|
+
wrapper.className = 'foisit-form-group';
|
|
1256
|
+
const labelText = field.description || field.name;
|
|
1257
|
+
wrapper.appendChild(createLabel(labelText, field.required));
|
|
1258
|
+
let inputEl;
|
|
1259
|
+
if (field.type === 'select') {
|
|
1260
|
+
const select = document.createElement('select');
|
|
1261
|
+
select.className = 'foisit-form-input';
|
|
1262
|
+
const placeholderOpt = document.createElement('option');
|
|
1263
|
+
placeholderOpt.value = '';
|
|
1264
|
+
placeholderOpt.textContent = 'Select...';
|
|
1265
|
+
select.appendChild(placeholderOpt);
|
|
1266
|
+
const populate = (options) => {
|
|
1267
|
+
(options ?? []).forEach((opt) => {
|
|
1268
|
+
const o = document.createElement('option');
|
|
1269
|
+
o.value = String(opt.value ?? opt.label ?? '');
|
|
1270
|
+
o.textContent = String(opt.label ?? opt.value ?? '');
|
|
1271
|
+
select.appendChild(o);
|
|
1272
|
+
});
|
|
1273
|
+
};
|
|
1274
|
+
if (Array.isArray(field.options) && field.options.length) {
|
|
1275
|
+
populate(field.options);
|
|
1276
|
+
}
|
|
1277
|
+
else if (typeof field.getOptions === 'function') {
|
|
1278
|
+
const getOptions = field.getOptions;
|
|
1279
|
+
const loadingOpt = document.createElement('option');
|
|
1280
|
+
loadingOpt.value = '';
|
|
1281
|
+
loadingOpt.textContent = 'Loading...';
|
|
1282
|
+
select.appendChild(loadingOpt);
|
|
1283
|
+
Promise.resolve()
|
|
1284
|
+
.then(() => getOptions())
|
|
1285
|
+
.then((opts) => {
|
|
1286
|
+
while (select.options.length > 1)
|
|
1287
|
+
select.remove(1);
|
|
1288
|
+
populate(opts);
|
|
1289
|
+
})
|
|
1290
|
+
.catch(() => {
|
|
1291
|
+
while (select.options.length > 1)
|
|
1292
|
+
select.remove(1);
|
|
1293
|
+
const errOpt = document.createElement('option');
|
|
1294
|
+
errOpt.value = '';
|
|
1295
|
+
errOpt.textContent = 'Error loading options';
|
|
1296
|
+
select.appendChild(errOpt);
|
|
1297
|
+
});
|
|
1298
|
+
}
|
|
1299
|
+
if (field.defaultValue != null) {
|
|
1300
|
+
select.value = String(field.defaultValue);
|
|
1301
|
+
}
|
|
1302
|
+
inputEl = select;
|
|
1303
|
+
}
|
|
1304
|
+
else if (field.type === 'file') {
|
|
1305
|
+
const ffield = field;
|
|
1306
|
+
const input = document.createElement('input');
|
|
1307
|
+
input.className = 'foisit-form-input';
|
|
1308
|
+
input.type = 'file';
|
|
1309
|
+
if (ffield.accept && Array.isArray(ffield.accept)) {
|
|
1310
|
+
input.accept = ffield.accept.join(',');
|
|
1311
|
+
}
|
|
1312
|
+
if (ffield.multiple)
|
|
1313
|
+
input.multiple = true;
|
|
1314
|
+
if (ffield.capture) {
|
|
1315
|
+
if (ffield.capture === true)
|
|
1316
|
+
input.setAttribute('capture', '');
|
|
1317
|
+
else
|
|
1318
|
+
input.setAttribute('capture', String(ffield.capture));
|
|
1319
|
+
}
|
|
1320
|
+
// Validation state stored on the element via dataset
|
|
1321
|
+
input.addEventListener('change', async () => {
|
|
1322
|
+
const files = Array.from(input.files || []);
|
|
1323
|
+
const errEl = errorEl;
|
|
1324
|
+
errEl.style.display = 'none';
|
|
1325
|
+
errEl.textContent = '';
|
|
1326
|
+
if (files.length === 0)
|
|
1327
|
+
return;
|
|
1328
|
+
// Basic validations: count and sizes
|
|
1329
|
+
const maxFiles = ffield.maxFiles ?? (ffield.multiple ? 10 : 1);
|
|
1330
|
+
if (files.length > maxFiles) {
|
|
1331
|
+
errEl.textContent = `Please select at most ${maxFiles} file(s).`;
|
|
1332
|
+
errEl.style.display = 'block';
|
|
1333
|
+
return;
|
|
1334
|
+
}
|
|
1335
|
+
const maxSize = ffield.maxSizeBytes ?? Infinity;
|
|
1336
|
+
const total = files.reduce((s, f) => s + f.size, 0);
|
|
1337
|
+
if (files.some(f => f.size > maxSize)) {
|
|
1338
|
+
errEl.textContent = `One or more files exceed the maximum size of ${Math.round(maxSize / 1024)} KB.`;
|
|
1339
|
+
errEl.style.display = 'block';
|
|
1340
|
+
return;
|
|
1341
|
+
}
|
|
1342
|
+
const maxTotal = ffield.maxTotalBytes ?? Infinity;
|
|
1343
|
+
if (total > maxTotal) {
|
|
1344
|
+
errEl.textContent = `Total selected files exceed the maximum of ${Math.round(maxTotal / 1024)} KB.`;
|
|
1345
|
+
errEl.style.display = 'block';
|
|
1346
|
+
return;
|
|
1347
|
+
}
|
|
1348
|
+
// Basic mime/extension check
|
|
1349
|
+
if (ffield.accept && Array.isArray(ffield.accept)) {
|
|
1350
|
+
const accepts = ffield.accept;
|
|
1351
|
+
const ok = files.every((file) => {
|
|
1352
|
+
if (!file.type)
|
|
1353
|
+
return true; // can't tell
|
|
1354
|
+
return accepts.some(a => a.startsWith('.') ? file.name.toLowerCase().endsWith(a.toLowerCase()) : file.type === a || file.type.startsWith(a.split('/')[0] + '/'));
|
|
1355
|
+
});
|
|
1356
|
+
if (!ok) {
|
|
1357
|
+
errEl.textContent = 'One or more files have an unsupported type.';
|
|
1358
|
+
errEl.style.display = 'block';
|
|
1359
|
+
return;
|
|
1360
|
+
}
|
|
1361
|
+
}
|
|
1362
|
+
});
|
|
1363
|
+
inputEl = input;
|
|
1364
|
+
}
|
|
1365
|
+
else {
|
|
1366
|
+
const input = document.createElement('input');
|
|
1367
|
+
input.className = 'foisit-form-input';
|
|
1368
|
+
if (field.type === 'string') {
|
|
1369
|
+
input.placeholder = field.placeholder || 'Type here...';
|
|
1370
|
+
}
|
|
1371
|
+
if (field.type === 'number') {
|
|
1372
|
+
input.type = 'number';
|
|
1373
|
+
if (typeof field.min === 'number')
|
|
1374
|
+
input.min = String(field.min);
|
|
1375
|
+
if (typeof field.max === 'number')
|
|
1376
|
+
input.max = String(field.max);
|
|
1377
|
+
if (typeof field.step === 'number')
|
|
1378
|
+
input.step = String(field.step);
|
|
1379
|
+
if (field.defaultValue != null)
|
|
1380
|
+
input.value = String(field.defaultValue);
|
|
1381
|
+
}
|
|
1382
|
+
else if (field.type === 'date') {
|
|
1383
|
+
input.type = 'date';
|
|
1384
|
+
if (typeof field.min === 'string')
|
|
1385
|
+
input.min = field.min;
|
|
1386
|
+
if (typeof field.max === 'string')
|
|
1387
|
+
input.max = field.max;
|
|
1388
|
+
if (field.defaultValue != null)
|
|
1389
|
+
input.value = String(field.defaultValue);
|
|
1390
|
+
}
|
|
1391
|
+
else {
|
|
1392
|
+
input.type = 'text';
|
|
1393
|
+
if (field.defaultValue != null)
|
|
1394
|
+
input.value = String(field.defaultValue);
|
|
1395
|
+
}
|
|
1396
|
+
inputEl = input;
|
|
1397
|
+
}
|
|
1398
|
+
// Add Error element
|
|
1399
|
+
const errorEl = createError();
|
|
1400
|
+
wrapper.appendChild(inputEl);
|
|
1401
|
+
wrapper.appendChild(errorEl); // Append error container
|
|
1402
|
+
controls.push({
|
|
1403
|
+
name: field.name,
|
|
1404
|
+
type: field.type,
|
|
1405
|
+
el: inputEl,
|
|
1406
|
+
required: field.required,
|
|
1407
|
+
});
|
|
1408
|
+
form.appendChild(wrapper);
|
|
1409
|
+
});
|
|
1410
|
+
const actions = document.createElement('div');
|
|
1411
|
+
actions.className = 'foisit-form-actions';
|
|
1412
|
+
const submitBtn = document.createElement('button');
|
|
1413
|
+
submitBtn.type = 'submit';
|
|
1414
|
+
submitBtn.textContent = 'Submit';
|
|
1415
|
+
submitBtn.className = 'foisit-option-chip';
|
|
1416
|
+
submitBtn.style.fontWeight = '600';
|
|
1417
|
+
actions.appendChild(submitBtn);
|
|
1418
|
+
form.appendChild(actions);
|
|
1419
|
+
form.onsubmit = async (e) => {
|
|
1420
|
+
e.preventDefault();
|
|
1421
|
+
const data = {};
|
|
1422
|
+
let hasError = false;
|
|
1423
|
+
// Clear previous errors
|
|
1424
|
+
form.querySelectorAll('.foisit-form-error').forEach(el => {
|
|
1425
|
+
el.style.display = 'none';
|
|
1426
|
+
el.textContent = '';
|
|
1427
|
+
});
|
|
1428
|
+
form.querySelectorAll('.foisit-form-input').forEach(el => {
|
|
1429
|
+
el.classList.remove('foisit-error-border');
|
|
1430
|
+
});
|
|
1431
|
+
for (const c of controls) {
|
|
1432
|
+
// FILE inputs need special handling
|
|
1433
|
+
if (c.type === 'file') {
|
|
1434
|
+
const fileWrapper = c.el.parentElement;
|
|
1435
|
+
const fileErrorEl = fileWrapper?.querySelector('.foisit-form-error');
|
|
1436
|
+
const input = c.el;
|
|
1437
|
+
const files = Array.from(input.files || []);
|
|
1438
|
+
if (c.required && files.length === 0) {
|
|
1439
|
+
hasError = true;
|
|
1440
|
+
input.classList.add('foisit-error-border');
|
|
1441
|
+
if (fileErrorEl) {
|
|
1442
|
+
fileErrorEl.textContent = 'This file is required';
|
|
1443
|
+
fileErrorEl.style.display = 'block';
|
|
1444
|
+
}
|
|
1445
|
+
continue;
|
|
1446
|
+
}
|
|
1447
|
+
if (files.length === 0)
|
|
1448
|
+
continue;
|
|
1449
|
+
// Find corresponding field definition
|
|
1450
|
+
const fieldDef = (fields ?? []).find((f) => f.name === c.name);
|
|
1451
|
+
const delivery = fieldDef?.delivery ?? 'file';
|
|
1452
|
+
// Run optional dimension/duration checks (best-effort)
|
|
1453
|
+
if (fieldDef?.maxWidth || fieldDef?.maxHeight) {
|
|
1454
|
+
// check first image only
|
|
1455
|
+
try {
|
|
1456
|
+
const dims = await this.getImageDimensions(files[0]);
|
|
1457
|
+
if (fieldDef.maxWidth && dims.width > fieldDef.maxWidth) {
|
|
1458
|
+
hasError = true;
|
|
1459
|
+
if (fileErrorEl) {
|
|
1460
|
+
fileErrorEl.textContent = `Image width must be ≤ ${fieldDef.maxWidth}px`;
|
|
1461
|
+
fileErrorEl.style.display = 'block';
|
|
1462
|
+
}
|
|
1463
|
+
continue;
|
|
1464
|
+
}
|
|
1465
|
+
if (fieldDef.maxHeight && dims.height > fieldDef.maxHeight) {
|
|
1466
|
+
hasError = true;
|
|
1467
|
+
if (fileErrorEl) {
|
|
1468
|
+
fileErrorEl.textContent = `Image height must be ≤ ${fieldDef.maxHeight}px`;
|
|
1469
|
+
fileErrorEl.style.display = 'block';
|
|
1470
|
+
}
|
|
1471
|
+
continue;
|
|
1472
|
+
}
|
|
1473
|
+
}
|
|
1474
|
+
catch {
|
|
1475
|
+
// ignore dimension check failures
|
|
1476
|
+
}
|
|
1477
|
+
}
|
|
1478
|
+
if (fieldDef?.maxDurationSec) {
|
|
1479
|
+
try {
|
|
1480
|
+
const dur = await this.getMediaDuration(files[0]);
|
|
1481
|
+
if (dur && dur > fieldDef.maxDurationSec) {
|
|
1482
|
+
hasError = true;
|
|
1483
|
+
if (fileErrorEl) {
|
|
1484
|
+
fileErrorEl.textContent = `Media duration must be ≤ ${fieldDef.maxDurationSec}s`;
|
|
1485
|
+
fileErrorEl.style.display = 'block';
|
|
1486
|
+
}
|
|
1487
|
+
continue;
|
|
1488
|
+
}
|
|
1489
|
+
}
|
|
1490
|
+
catch {
|
|
1491
|
+
// ignore
|
|
1492
|
+
}
|
|
1493
|
+
}
|
|
1494
|
+
// Prepare payload according to delivery
|
|
1495
|
+
if (delivery === 'file') {
|
|
1496
|
+
data[c.name] = fieldDef?.multiple ? files : files[0];
|
|
1497
|
+
}
|
|
1498
|
+
else if (delivery === 'base64') {
|
|
1499
|
+
try {
|
|
1500
|
+
const encoded = await Promise.all(files.map((file) => this.readFileAsDataURL(file)));
|
|
1501
|
+
data[c.name] = fieldDef?.multiple ? encoded : encoded[0];
|
|
1502
|
+
}
|
|
1503
|
+
catch {
|
|
1504
|
+
hasError = true;
|
|
1505
|
+
if (fileErrorEl) {
|
|
1506
|
+
fileErrorEl.textContent = 'Failed to encode file(s) to base64.';
|
|
1507
|
+
fileErrorEl.style.display = 'block';
|
|
1508
|
+
}
|
|
1509
|
+
continue;
|
|
1510
|
+
}
|
|
1511
|
+
}
|
|
1512
|
+
continue;
|
|
1513
|
+
}
|
|
1514
|
+
const val = (c.el.value ?? '').toString().trim();
|
|
1515
|
+
const valueWrapper = c.el.parentElement;
|
|
1516
|
+
const fieldErrorEl = valueWrapper?.querySelector('.foisit-form-error');
|
|
1517
|
+
if (c.required && (val == null || val === '')) {
|
|
1518
|
+
hasError = true;
|
|
1519
|
+
c.el.classList.add('foisit-error-border');
|
|
1520
|
+
if (fieldErrorEl) {
|
|
1521
|
+
fieldErrorEl.textContent = 'This field is required';
|
|
1522
|
+
fieldErrorEl.style.display = 'block';
|
|
1523
|
+
}
|
|
1524
|
+
continue;
|
|
1525
|
+
}
|
|
1526
|
+
if (val === '')
|
|
1527
|
+
continue;
|
|
1528
|
+
if (c.type === 'number') {
|
|
1529
|
+
const n = Number(val);
|
|
1530
|
+
if (!Number.isNaN(n))
|
|
1531
|
+
data[c.name] = n;
|
|
1532
|
+
}
|
|
1533
|
+
else {
|
|
1534
|
+
data[c.name] = val;
|
|
1535
|
+
}
|
|
1536
|
+
}
|
|
1537
|
+
if (hasError) {
|
|
1538
|
+
// Shake animation
|
|
1539
|
+
form.classList.add('foisit-shake');
|
|
1540
|
+
setTimeout(() => form.classList.remove('foisit-shake'), 400);
|
|
1541
|
+
return;
|
|
1542
|
+
}
|
|
1543
|
+
submitBtn.disabled = true;
|
|
1544
|
+
submitBtn.style.opacity = '0.6';
|
|
1545
|
+
controls.forEach((c) => {
|
|
1546
|
+
c.el.disabled = true;
|
|
1547
|
+
});
|
|
1548
|
+
onSubmit(data);
|
|
1549
|
+
};
|
|
1550
|
+
this.messagesContainer.appendChild(form);
|
|
1551
|
+
this.scrollToBottom();
|
|
1552
|
+
}
|
|
1553
|
+
showLoading() {
|
|
1554
|
+
if (!this.messagesContainer)
|
|
1555
|
+
return;
|
|
1556
|
+
if (this.loadingEl)
|
|
1557
|
+
return;
|
|
1558
|
+
this.loadingEl = document.createElement('div');
|
|
1559
|
+
this.loadingEl.className = 'foisit-loading-dots foisit-bubble system';
|
|
1560
|
+
// Create dots
|
|
1561
|
+
for (let i = 0; i < 3; i++) {
|
|
1562
|
+
const dot = document.createElement('div');
|
|
1563
|
+
dot.className = 'foisit-dot';
|
|
1564
|
+
dot.style.animation = `foisitPulse 1.4s infinite ease-in-out ${i * 0.2}s`;
|
|
1565
|
+
this.loadingEl.appendChild(dot);
|
|
1566
|
+
}
|
|
1567
|
+
this.messagesContainer.appendChild(this.loadingEl);
|
|
1568
|
+
this.scrollToBottom();
|
|
1569
|
+
}
|
|
1570
|
+
hideLoading() {
|
|
1571
|
+
this.loadingEl?.remove();
|
|
1572
|
+
this.loadingEl = null;
|
|
1573
|
+
}
|
|
1574
|
+
scrollToBottom() {
|
|
1575
|
+
if (this.messagesContainer) {
|
|
1576
|
+
this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
|
|
1577
|
+
}
|
|
1578
|
+
}
|
|
1579
|
+
destroy() {
|
|
1580
|
+
this.container?.remove();
|
|
1581
|
+
this.container = null;
|
|
1582
|
+
this.chatWindow = null;
|
|
1583
|
+
this.messagesContainer = null;
|
|
1584
|
+
this.input = null;
|
|
1585
|
+
this.isOpen = false;
|
|
1586
|
+
}
|
|
1587
|
+
readFileAsDataURL(file) {
|
|
1588
|
+
return new Promise((resolve, reject) => {
|
|
1589
|
+
const fr = new FileReader();
|
|
1590
|
+
fr.onerror = () => reject(new Error('Failed to read file'));
|
|
1591
|
+
fr.onload = () => resolve(String(fr.result));
|
|
1592
|
+
fr.readAsDataURL(file);
|
|
1593
|
+
});
|
|
1594
|
+
}
|
|
1595
|
+
getImageDimensions(file) {
|
|
1596
|
+
return new Promise((resolve) => {
|
|
1597
|
+
try {
|
|
1598
|
+
const url = URL.createObjectURL(file);
|
|
1599
|
+
const img = new Image();
|
|
1600
|
+
img.onload = () => {
|
|
1601
|
+
const dims = { width: img.naturalWidth || img.width, height: img.naturalHeight || img.height };
|
|
1602
|
+
URL.revokeObjectURL(url);
|
|
1603
|
+
resolve(dims);
|
|
1604
|
+
};
|
|
1605
|
+
img.onerror = () => {
|
|
1606
|
+
URL.revokeObjectURL(url);
|
|
1607
|
+
resolve({ width: 0, height: 0 });
|
|
1608
|
+
};
|
|
1609
|
+
img.src = url;
|
|
1610
|
+
}
|
|
1611
|
+
catch {
|
|
1612
|
+
resolve({ width: 0, height: 0 });
|
|
1613
|
+
}
|
|
1614
|
+
});
|
|
1615
|
+
}
|
|
1616
|
+
getMediaDuration(file) {
|
|
1617
|
+
return new Promise((resolve) => {
|
|
1618
|
+
try {
|
|
1619
|
+
const url = URL.createObjectURL(file);
|
|
1620
|
+
const el = file.type.startsWith('audio') ? document.createElement('audio') : document.createElement('video');
|
|
1621
|
+
let settled = false;
|
|
1622
|
+
const timeout = setTimeout(() => {
|
|
1623
|
+
if (!settled) {
|
|
1624
|
+
settled = true;
|
|
1625
|
+
URL.revokeObjectURL(url);
|
|
1626
|
+
resolve(0);
|
|
1627
|
+
}
|
|
1628
|
+
}, 5000);
|
|
1629
|
+
el.preload = 'metadata';
|
|
1630
|
+
el.onloadedmetadata = () => {
|
|
1631
|
+
if (settled)
|
|
1632
|
+
return;
|
|
1633
|
+
settled = true;
|
|
1634
|
+
clearTimeout(timeout);
|
|
1635
|
+
const mediaEl = el;
|
|
1636
|
+
const d = mediaEl.duration || 0;
|
|
1637
|
+
URL.revokeObjectURL(url);
|
|
1638
|
+
resolve(d);
|
|
1639
|
+
};
|
|
1640
|
+
el.onerror = () => {
|
|
1641
|
+
if (settled)
|
|
1642
|
+
return;
|
|
1643
|
+
settled = true;
|
|
1644
|
+
clearTimeout(timeout);
|
|
1645
|
+
URL.revokeObjectURL(url);
|
|
1646
|
+
resolve(0);
|
|
1647
|
+
};
|
|
1648
|
+
el.src = url;
|
|
1649
|
+
}
|
|
1650
|
+
catch {
|
|
1651
|
+
resolve(0);
|
|
1652
|
+
}
|
|
1653
|
+
});
|
|
1654
|
+
}
|
|
1655
|
+
injectOverlayStyles() {
|
|
1656
|
+
if (document.getElementById('foisit-overlay-styles'))
|
|
1657
|
+
return;
|
|
1658
|
+
const style = document.createElement('style');
|
|
1659
|
+
style.id = 'foisit-overlay-styles';
|
|
1660
|
+
style.textContent = `
|
|
1661
|
+
:root {
|
|
1662
|
+
/* LIGHT MODE (Default) - Smoother gradient */
|
|
1663
|
+
/* Changed: Softer, right-focused radial highlight to avoid a heavy white bottom */
|
|
1664
|
+
--foisit-bg: radial-gradient(ellipse at 75% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
|
|
1665
|
+
--foisit-border: 1px solid rgba(255, 255, 255, 0.25);
|
|
1666
|
+
--foisit-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
|
|
1667
|
+
--foisit-text: #333;
|
|
1668
|
+
|
|
1669
|
+
/* Input */
|
|
1670
|
+
--foisit-input-color: #333;
|
|
1671
|
+
--foisit-input-placeholder: rgba(60, 60, 67, 0.6);
|
|
1672
|
+
|
|
1673
|
+
/* Bubbles */
|
|
1674
|
+
--foisit-bubble-user-bg: rgba(0, 0, 0, 0.04);
|
|
1675
|
+
--foisit-bubble-user-text: #333;
|
|
1676
|
+
|
|
1677
|
+
--foisit-bubble-sys-bg: rgba(255, 255, 255, 0.45);
|
|
1678
|
+
--foisit-bubble-sys-text: #333;
|
|
1679
|
+
|
|
1680
|
+
/* Form Colors */
|
|
1681
|
+
--foisit-req-star: #ef4444; /* Red asterisk */
|
|
1682
|
+
--foisit-error-text: #dc2626;
|
|
1683
|
+
--foisit-error-border: #fca5a5;
|
|
1684
|
+
}
|
|
1685
|
+
|
|
1686
|
+
@media (prefers-color-scheme: dark) {
|
|
1687
|
+
:root {
|
|
1688
|
+
/* DARK MODE */
|
|
1689
|
+
--foisit-bg: linear-gradient(135deg, rgba(40, 40, 40, 0.65), rgba(40, 40, 40, 0.25));
|
|
1690
|
+
--foisit-border: 1px solid rgba(255, 255, 255, 0.1);
|
|
1691
|
+
--foisit-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
|
|
1692
|
+
--foisit-text: #fff;
|
|
1693
|
+
|
|
1694
|
+
/* Input */
|
|
1695
|
+
--foisit-input-color: white;
|
|
1696
|
+
--foisit-input-placeholder: rgba(235, 235, 245, 0.5);
|
|
1697
|
+
|
|
1698
|
+
/* Bubbles */
|
|
1699
|
+
--foisit-bubble-user-bg: rgba(255, 255, 255, 0.1);
|
|
1700
|
+
--foisit-bubble-user-text: white;
|
|
1701
|
+
|
|
1702
|
+
--foisit-bubble-sys-bg: rgba(255, 255, 255, 0.05);
|
|
1703
|
+
--foisit-bubble-sys-text: rgba(255, 255, 255, 0.9);
|
|
1704
|
+
|
|
1705
|
+
/* Form Colors */
|
|
1706
|
+
--foisit-req-star: #f87171;
|
|
1707
|
+
--foisit-error-text: #fca5a5;
|
|
1708
|
+
--foisit-error-border: #f87171;
|
|
1709
|
+
}
|
|
1710
|
+
}
|
|
1711
|
+
|
|
1712
|
+
@keyframes foisitPulse {
|
|
1713
|
+
0%, 100% { transform: scale(0.8); opacity: 0.5; }
|
|
1714
|
+
50% { transform: scale(1.2); opacity: 1; }
|
|
1715
|
+
}
|
|
1716
|
+
|
|
1717
|
+
@keyframes foisitShake {
|
|
1718
|
+
0%, 100% { transform: translateX(0); }
|
|
1719
|
+
25% { transform: translateX(-4px); }
|
|
1720
|
+
75% { transform: translateX(4px); }
|
|
1721
|
+
}
|
|
1722
|
+
.foisit-shake { animation: foisitShake 0.4s ease-in-out; }
|
|
1723
|
+
|
|
1724
|
+
/* Container */
|
|
1725
|
+
.foisit-overlay-container {
|
|
1726
|
+
position: fixed;
|
|
1727
|
+
inset: 0;
|
|
1728
|
+
z-index: 2147483647;
|
|
1729
|
+
pointer-events: none;
|
|
1730
|
+
display: flex;
|
|
1731
|
+
flex-direction: column;
|
|
1732
|
+
justify-content: flex-end;
|
|
1733
|
+
align-items: flex-end;
|
|
1734
|
+
padding: 20px;
|
|
1735
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
1736
|
+
}
|
|
1737
|
+
|
|
1738
|
+
.foisit-overlay-container * {
|
|
1739
|
+
box-sizing: border-box;
|
|
1740
|
+
}
|
|
1741
|
+
|
|
1742
|
+
/* Chat Window - Dynamic Height */
|
|
1743
|
+
.foisit-chat {
|
|
1744
|
+
position: absolute;
|
|
1745
|
+
top: 20px;
|
|
1746
|
+
right: 20px;
|
|
1747
|
+
width: min(420px, 92vw);
|
|
1748
|
+
|
|
1749
|
+
/* FIX: Auto height to prevent empty space */
|
|
1750
|
+
height: auto;
|
|
1751
|
+
min-height: 120px;
|
|
1752
|
+
max-height: 80vh;
|
|
1753
|
+
|
|
1754
|
+
background: var(--foisit-bg);
|
|
1755
|
+
border: var(--foisit-border);
|
|
1756
|
+
box-shadow: var(--foisit-shadow);
|
|
1757
|
+
|
|
1758
|
+
backdrop-filter: blur(20px);
|
|
1759
|
+
-webkit-backdrop-filter: blur(20px);
|
|
1760
|
+
|
|
1761
|
+
border-radius: 18px;
|
|
1762
|
+
display: none;
|
|
1763
|
+
flex-direction: column;
|
|
1764
|
+
overflow: hidden;
|
|
1765
|
+
pointer-events: auto;
|
|
1766
|
+
transform-origin: top right;
|
|
1767
|
+
transition: opacity 0.2s, transform 0.2s cubic-bezier(0.2, 0.9, 0.2, 1);
|
|
1768
|
+
}
|
|
1769
|
+
|
|
1770
|
+
.foisit-header {
|
|
1771
|
+
display: flex;
|
|
1772
|
+
align-items: center;
|
|
1773
|
+
justify-content: space-between;
|
|
1774
|
+
padding: 12px 16px;
|
|
1775
|
+
font-weight: 600;
|
|
1776
|
+
font-size: 14px;
|
|
1777
|
+
color: var(--foisit-text);
|
|
1778
|
+
border-bottom: 1px solid rgba(127,127,127,0.08); /* Subtle separator */
|
|
1779
|
+
}
|
|
1780
|
+
|
|
1781
|
+
.foisit-close {
|
|
1782
|
+
background: transparent;
|
|
1783
|
+
border: none;
|
|
1784
|
+
color: var(--foisit-text);
|
|
1785
|
+
opacity: 0.5;
|
|
1786
|
+
font-size: 24px;
|
|
1787
|
+
line-height: 1;
|
|
1788
|
+
cursor: pointer;
|
|
1789
|
+
padding: 0;
|
|
1790
|
+
width: 28px;
|
|
1791
|
+
height: 28px;
|
|
1792
|
+
display: flex;
|
|
1793
|
+
align-items: center;
|
|
1794
|
+
justify-content: center;
|
|
1795
|
+
transition: opacity 0.2s;
|
|
1796
|
+
}
|
|
1797
|
+
.foisit-close:hover { opacity: 1; }
|
|
1798
|
+
|
|
1799
|
+
/* Message Area */
|
|
1800
|
+
.foisit-messages {
|
|
1801
|
+
flex: 1;
|
|
1802
|
+
overflow-y: auto;
|
|
1803
|
+
padding: 16px;
|
|
1804
|
+
display: flex;
|
|
1805
|
+
flex-direction: column;
|
|
1806
|
+
gap: 10px;
|
|
1807
|
+
/* Ensure it doesn't get too tall initially */
|
|
1808
|
+
min-height: 60px;
|
|
1809
|
+
}
|
|
1810
|
+
|
|
1811
|
+
/* Make sure empty state isn't huge */
|
|
1812
|
+
.foisit-messages:empty {
|
|
1813
|
+
display: none;
|
|
1814
|
+
}
|
|
1815
|
+
|
|
1816
|
+
/* Only show messages container if it has children */
|
|
1817
|
+
.foisit-messages:not(:empty) {
|
|
1818
|
+
display: flex;
|
|
1819
|
+
}
|
|
1820
|
+
|
|
1821
|
+
/* Bubbles */
|
|
1822
|
+
.foisit-bubble {
|
|
1823
|
+
max-width: 90%;
|
|
1824
|
+
padding: 8px 14px;
|
|
1825
|
+
border-radius: 14px;
|
|
1826
|
+
font-size: 14px;
|
|
1827
|
+
line-height: 1.4;
|
|
1828
|
+
word-wrap: break-word;
|
|
1829
|
+
}
|
|
1830
|
+
|
|
1831
|
+
.foisit-bubble.user {
|
|
1832
|
+
align-self: flex-end;
|
|
1833
|
+
background: var(--foisit-bubble-user-bg);
|
|
1834
|
+
color: var(--foisit-bubble-user-text);
|
|
1835
|
+
border-bottom-right-radius: 4px;
|
|
1836
|
+
}
|
|
1837
|
+
|
|
1838
|
+
.foisit-bubble.system {
|
|
1839
|
+
align-self: flex-start;
|
|
1840
|
+
background: var(--foisit-bubble-sys-bg);
|
|
1841
|
+
color: var(--foisit-bubble-sys-text);
|
|
1842
|
+
border-bottom-left-radius: 4px;
|
|
1843
|
+
border: 1px solid rgba(255,255,255,0.1);
|
|
1844
|
+
}
|
|
1845
|
+
|
|
1846
|
+
/* Input Area */
|
|
1847
|
+
.foisit-input-area {
|
|
1848
|
+
padding: 0;
|
|
1849
|
+
width: 100%;
|
|
1850
|
+
border-top: 1px solid rgba(127,127,127,0.08);
|
|
1851
|
+
}
|
|
1852
|
+
|
|
1853
|
+
.foisit-input {
|
|
1854
|
+
width: 100%;
|
|
1855
|
+
background: transparent;
|
|
1856
|
+
border: none;
|
|
1857
|
+
font-size: 16px;
|
|
1858
|
+
color: var(--foisit-input-color);
|
|
1859
|
+
padding: 16px 20px;
|
|
1860
|
+
outline: none;
|
|
1861
|
+
text-align: left;
|
|
1862
|
+
}
|
|
1863
|
+
|
|
1864
|
+
.foisit-input::placeholder {
|
|
1865
|
+
color: var(--foisit-input-placeholder);
|
|
1866
|
+
font-weight: 400;
|
|
1867
|
+
}
|
|
1868
|
+
|
|
1869
|
+
/* Options & Buttons */
|
|
1870
|
+
.foisit-options-container {
|
|
1871
|
+
display: flex;
|
|
1872
|
+
flex-wrap: wrap;
|
|
1873
|
+
gap: 8px;
|
|
1874
|
+
margin-left: 2px;
|
|
1875
|
+
margin-top: 4px;
|
|
1876
|
+
}
|
|
1877
|
+
|
|
1878
|
+
.foisit-option-chip {
|
|
1879
|
+
padding: 6px 14px;
|
|
1880
|
+
background: var(--foisit-bubble-sys-bg);
|
|
1881
|
+
border: 1px solid rgba(127,127,127,0.1);
|
|
1882
|
+
border-radius: 20px;
|
|
1883
|
+
font-size: 13px;
|
|
1884
|
+
color: var(--foisit-text);
|
|
1885
|
+
cursor: pointer;
|
|
1886
|
+
transition: all 0.2s;
|
|
1887
|
+
font-weight: 500;
|
|
1888
|
+
}
|
|
1889
|
+
.foisit-option-chip:hover {
|
|
1890
|
+
background: rgba(127,127,127,0.15);
|
|
1891
|
+
}
|
|
1892
|
+
|
|
1893
|
+
/* Form Styling */
|
|
1894
|
+
.foisit-form {
|
|
1895
|
+
background: var(--foisit-bubble-sys-bg);
|
|
1896
|
+
padding: 16px;
|
|
1897
|
+
border-radius: 14px;
|
|
1898
|
+
display: flex;
|
|
1899
|
+
flex-direction: column;
|
|
1900
|
+
gap: 12px;
|
|
1901
|
+
width: 100%;
|
|
1902
|
+
border: 1px solid rgba(127,127,127,0.1);
|
|
1903
|
+
}
|
|
1904
|
+
|
|
1905
|
+
.foisit-form-label {
|
|
1906
|
+
font-size: 12px;
|
|
1907
|
+
font-weight: 600;
|
|
1908
|
+
color: var(--foisit-text);
|
|
1909
|
+
opacity: 0.9;
|
|
1910
|
+
margin-bottom: 2px;
|
|
1911
|
+
}
|
|
1912
|
+
|
|
1913
|
+
.foisit-req-star {
|
|
1914
|
+
color: var(--foisit-req-star);
|
|
1915
|
+
font-weight: bold;
|
|
1916
|
+
}
|
|
1917
|
+
|
|
1918
|
+
.foisit-form-input {
|
|
1919
|
+
width: 100%;
|
|
1920
|
+
padding: 10px;
|
|
1921
|
+
border-radius: 8px;
|
|
1922
|
+
border: 1px solid rgba(127,127,127,0.2);
|
|
1923
|
+
background: rgba(255,255,255,0.05); /* Very subtle fill */
|
|
1924
|
+
color: var(--foisit-text);
|
|
1925
|
+
font-size: 14px;
|
|
1926
|
+
outline: none;
|
|
1927
|
+
transition: border 0.2s;
|
|
1928
|
+
}
|
|
1929
|
+
.foisit-form-input:focus {
|
|
1930
|
+
border-color: var(--foisit-text);
|
|
1931
|
+
background: rgba(255,255,255,0.1);
|
|
1932
|
+
}
|
|
1933
|
+
|
|
1934
|
+
.foisit-error-border {
|
|
1935
|
+
border-color: var(--foisit-error-border) !important;
|
|
1936
|
+
}
|
|
1937
|
+
|
|
1938
|
+
.foisit-form-error {
|
|
1939
|
+
font-size: 11px;
|
|
1940
|
+
color: var(--foisit-error-text);
|
|
1941
|
+
margin-top: 4px;
|
|
1942
|
+
}
|
|
1943
|
+
|
|
1944
|
+
/* Loading */
|
|
1945
|
+
.foisit-loading-dots {
|
|
1946
|
+
display: inline-flex;
|
|
1947
|
+
gap: 4px;
|
|
1948
|
+
padding: 10px 14px;
|
|
1949
|
+
align-self: flex-start;
|
|
1950
|
+
}
|
|
1951
|
+
.foisit-dot {
|
|
1952
|
+
width: 6px;
|
|
1953
|
+
height: 6px;
|
|
1954
|
+
border-radius: 50%;
|
|
1955
|
+
background: var(--foisit-text);
|
|
1956
|
+
opacity: 0.4;
|
|
1957
|
+
}
|
|
1958
|
+
|
|
1959
|
+
/* Floating Button */
|
|
1960
|
+
.foisit-floating-btn {
|
|
1961
|
+
position: absolute;
|
|
1962
|
+
width: 56px;
|
|
1963
|
+
height: 56px;
|
|
1964
|
+
border-radius: 50%;
|
|
1965
|
+
border: 1px solid rgba(255,255,255,0.2);
|
|
1966
|
+
background: var(--foisit-bg);
|
|
1967
|
+
color: var(--foisit-text);
|
|
1968
|
+
backdrop-filter: blur(10px);
|
|
1969
|
+
-webkit-backdrop-filter: blur(10px);
|
|
1970
|
+
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
1971
|
+
cursor: pointer;
|
|
1972
|
+
pointer-events: auto;
|
|
1973
|
+
display: flex;
|
|
1974
|
+
align-items: center;
|
|
1975
|
+
justify-content: center;
|
|
1976
|
+
font-size: 24px;
|
|
1977
|
+
z-index: 100000;
|
|
1978
|
+
transition: transform 0.2s;
|
|
1979
|
+
}
|
|
1980
|
+
.foisit-floating-btn:hover { transform: scale(1.05); }
|
|
1981
|
+
`;
|
|
1982
|
+
document.head.appendChild(style);
|
|
1983
|
+
}
|
|
1984
|
+
}
|
|
1985
|
+
|
|
15
1986
|
class AssistantService {
|
|
16
1987
|
config;
|
|
17
1988
|
commandHandler;
|