@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 = '&times;';
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;