@foisit/angular-wrapper 2.5.0 → 2.5.1

package/fesm2022/foisit-angular-wrapper.mjs

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
 import { Component, Inject, Injectable, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { CommandHandler, FallbackHandler, VoiceProcessor, TextToSpeech, GestureHandler, OverlayManager, StateManager } from '@foisit/core';
 
 class AngularWrapperComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AngularWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -12,6 +11,2372 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             args: [{ selector: 'lib-angular-wrapper', imports: [CommonModule], template: "<p>AngularWrapper works!</p>\n" }]
         }] });
 
+class OpenAIService {
+    endpoint;
+    constructor(endpoint) {
+        this.endpoint =
+            endpoint || 'https://foisit-ninja.netlify.app/.netlify/functions/intent';
+    }
+    async determineIntent(userInput, availableCommands, context) {
+        try {
+            // Prepare the payload
+            const payload = {
+                userInput,
+                commands: availableCommands.map((cmd) => ({
+                    id: cmd.id,
+                    command: cmd.command,
+                    description: cmd.description,
+                    parameters: cmd.parameters, // Send param schemas to AI
+                })),
+                context,
+            };
+            const response = await fetch(this.endpoint, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload),
+            });
+            if (!response.ok) {
+                throw new Error(`Proxy API Error: ${response.statusText}`);
+            }
+            const result = await response.json();
+            return result;
+        }
+        catch (error) {
+            console.error('OpenAIService Error:', error);
+            return { type: 'unknown' };
+        }
+    }
+}
+
+class CommandHandler {
+    commands = new Map();
+    openAIService = null;
+    context = null;
+    pendingConfirmation = null;
+    enableSmartIntent = true;
+    selectOptionsCache = new Map();
+    constructor(arg = true) {
+        if (typeof arg === 'boolean') {
+            this.enableSmartIntent = arg;
+            if (this.enableSmartIntent) {
+                this.openAIService = new OpenAIService();
+            }
+            return;
+        }
+        this.enableSmartIntent = arg.enableSmartIntent ?? true;
+        if (this.enableSmartIntent) {
+            this.openAIService = new OpenAIService(arg.intentEndpoint);
+        }
+    }
+    /** Add a new command (string or object) */
+    addCommand(commandOrObj, action) {
+        let cmd;
+        if (typeof commandOrObj === 'string') {
+            if (!action) {
+                throw new Error('Action required when adding command by string.');
+            }
+            cmd = {
+                id: commandOrObj.toLowerCase().replace(/\s+/g, '_'),
+                command: commandOrObj.toLowerCase(),
+                action,
+            };
+        }
+        else {
+            cmd = { ...commandOrObj };
+            if (!cmd.id) {
+                cmd.id = cmd.command.toLowerCase().replace(/\s+/g, '_');
+            }
+        }
+        this.commands.set(cmd.command.toLowerCase(), cmd);
+        // Also index by ID for AI matching
+        if (cmd.id && cmd.id !== cmd.command) {
+            // We store it by ID in a separate map or just rely on iteration for AI
+            // For simplicity, let's keep the main map keyed by trigger phrase,
+            // but we'll lookup by ID in AI flow.
+        }
+    }
+    /** Remove an existing command */
+    removeCommand(command) {
+        this.commands.delete(command.toLowerCase());
+    }
+    /** Execute a command by matching input */
+    async executeCommand(input) {
+        // 0) Handle object input
+        if (typeof input === 'object' && input !== null) {
+            // Direct command trigger from UI: { commandId, params? }
+            if (this.isStructured(input)) {
+                const cmdId = String(input.commandId);
+                const rawParams = input.params ?? {};
+                const cmd = this.getCommandById(cmdId);
+                if (!cmd)
+                    return { message: 'That command is not available.', type: 'error' };
+                const params = this.sanitizeParamsForCommand(cmd, rawParams);
+                const requiredParams = (cmd.parameters ?? []).filter((p) => p.required);
+                const missing = requiredParams.filter((p) => params[p.name] == null || params[p.name] === '');
+                if (missing.length > 0) {
+                    // Ask for missing params via form and store context
+                    this.context = { commandId: this.getCommandIdentifier(cmd), params };
+                    return {
+                        message: `Please provide the required details for "${cmd.command}".`,
+                        type: 'form',
+                        fields: missing,
+                    };
+                }
+                if (cmd.critical) {
+                    this.pendingConfirmation = { commandId: this.getCommandIdentifier(cmd), params };
+                    return this.buildConfirmResponse(cmd);
+                }
+                return this.safeRunAction(cmd, params);
+            }
+            // Otherwise treat as continuation of a previously requested form
+            if (!this.context) {
+                return { message: 'Session expired or invalid context.', type: 'error' };
+            }
+            const cmd = this.getCommandById(this.context.commandId);
+            if (!cmd) {
+                this.context = null;
+                return { message: 'Session expired or invalid context.', type: 'error' };
+            }
+            if (Array.isArray(input)) {
+                return { message: 'Invalid form payload.', type: 'error' };
+            }
+            const mergedParams = {
+                ...this.context.params,
+                ...input,
+            };
+            // If this was a critical command, ask for confirmation before executing.
+            if (cmd.critical) {
+                this.context = null;
+                this.pendingConfirmation = {
+                    commandId: this.getCommandIdentifier(cmd),
+                    params: mergedParams,
+                };
+                return this.buildConfirmResponse(cmd);
+            }
+            const result = await this.safeRunAction(cmd, mergedParams);
+            this.context = null;
+            return this.normalizeResponse(result);
+        }
+        const trimmedInput = input.trim().toLowerCase();
+        // 1) Confirmation flow (Yes/No)
+        if (this.pendingConfirmation) {
+            const normalized = trimmedInput;
+            if (['yes', 'y', 'confirm', 'ok', 'okay'].includes(normalized)) {
+                const { commandId, params } = this.pendingConfirmation;
+                this.pendingConfirmation = null;
+                const cmd = this.getCommandById(commandId);
+                if (!cmd) {
+                    return { message: 'That action is no longer available.', type: 'error' };
+                }
+                return this.safeRunAction(cmd, params);
+            }
+            if (['no', 'n', 'cancel', 'stop'].includes(normalized)) {
+                this.pendingConfirmation = null;
+                return { message: 'Cancelled.', type: 'success' };
+            }
+            return {
+                message: 'Please confirm: Yes or No.',
+                type: 'confirm',
+                options: [
+                    { label: 'Yes', value: 'yes' },
+                    { label: 'No', value: 'no' },
+                ],
+            };
+        }
+        // 2) Exact match
+        const exactCommand = this.commands.get(trimmedInput);
+        if (exactCommand) {
+            const cmd = exactCommand;
+            // Macro commands bypass all parameter collection and confirmation for instant execution
+            if (cmd.macro) {
+                return this.safeRunAction(cmd, {});
+            }
+            // If the command needs params, collect them (no AI needed)
+            const requiredParams = (cmd.parameters ?? []).filter((p) => p.required);
+            if (requiredParams.length > 0) {
+                this.context = { commandId: this.getCommandIdentifier(cmd), params: {} };
+                return {
+                    message: `Please provide the required details for "${cmd.command}".`,
+                    type: 'form',
+                    fields: requiredParams,
+                };
+            }
+            // Critical commands require confirmation
+            if (cmd.critical) {
+                this.pendingConfirmation = { commandId: this.getCommandIdentifier(cmd), params: {} };
+                return this.buildConfirmResponse(cmd);
+            }
+            // Always pass an object for params so actions can safely read optional fields.
+            return this.safeRunAction(cmd, {});
+        }
+        // 3) Deterministic (non-AI) fuzzy match using keywords/substring
+        const deterministic = await this.tryDeterministicMatch(trimmedInput);
+        if (deterministic)
+            return deterministic;
+        // 4) Smart intent fallback (AI)
+        if (this.enableSmartIntent && this.openAIService) {
+            const availableCommands = await this.getCommandsForAI();
+            const aiResult = await this.openAIService.determineIntent(trimmedInput, availableCommands, this.context);
+            return this.handleAIResult(aiResult);
+        }
+        // No deterministic match available and AI is disabled (or no AI configured).
+        // Return an error so callers (wrappers) can trigger fallback handling.
+        if (!this.enableSmartIntent) {
+            return { message: "I'm not sure what you mean.", type: 'error' };
+        }
+        // As a last resort, list available commands to let the user pick.
+        return this.listAllCommands();
+    }
+    async handleAIResult(result) {
+        if (result.type === 'match' && result.match) {
+            const cmd = this.getCommandById(result.match);
+            if (!cmd) {
+                return { message: "I'm not sure what you mean.", type: 'error' };
+            }
+            // Macro commands bypass all parameter collection and confirmation for instant execution
+            if (cmd.macro) {
+                return this.safeRunAction(cmd, {});
+            }
+            const rawParams = (result.params ?? {});
+            const sanitizedParams = this.sanitizeParamsForCommand(cmd, rawParams);
+            const params = cmd.allowAiParamExtraction === false ? {} : sanitizedParams;
+            const requiredParams = (cmd.parameters ?? []).filter((p) => p.required);
+            const missingRequired = requiredParams.filter((p) => params[p.name] == null || params[p.name] === '');
+            if (result.incomplete || missingRequired.length > 0) {
+                // Store partial params for continuation
+                this.context = { commandId: this.getCommandIdentifier(cmd), params };
+                const mustUseForm = cmd.collectRequiredViaForm !== false;
+                const askSingle = !mustUseForm && this.shouldAskSingleQuestion(missingRequired);
+                if (askSingle) {
+                    const names = missingRequired.map((p) => p.name).join(' and ');
+                    return {
+                        message: result.message || `Please provide ${names}.`,
+                        type: 'question',
+                    };
+                }
+                return {
+                    message: result.message || `Please fill in the missing details for "${cmd.command}".`,
+                    type: 'form',
+                    fields: missingRequired,
+                };
+            }
+            // Critical commands require confirmation
+            if (cmd.critical) {
+                this.pendingConfirmation = {
+                    commandId: this.getCommandIdentifier(cmd),
+                    params,
+                };
+                return this.buildConfirmResponse(cmd);
+            }
+            const actionResult = await cmd.action(params);
+            return this.normalizeResponse(actionResult);
+        }
+        if (result.type === 'ambiguous' && result.options && result.options.length) {
+            // Prefer clickable phrases that map to exact matches. Use commandId as value to
+            // make UI actions deterministic when the user clicks an option.
+            return {
+                message: result.message || 'Did you mean one of these?',
+                type: 'ambiguous',
+                options: result.options.map((o) => ({
+                    label: o.label,
+                    value: o.commandId ?? o.label,
+                    commandId: o.commandId,
+                })),
+            };
+        }
+        // Unknown / fallback: show all available commands
+        return this.listAllCommands();
+    }
+    sanitizeParamsForCommand(cmd, params) {
+        const sanitized = { ...(params ?? {}) };
+        for (const p of cmd.parameters ?? []) {
+            const value = sanitized[p.name];
+            if (p.type === 'string') {
+                if (typeof value !== 'string') {
+                    delete sanitized[p.name];
+                    continue;
+                }
+                const trimmed = value.trim();
+                if (!trimmed) {
+                    delete sanitized[p.name];
+                    continue;
+                }
+                sanitized[p.name] = trimmed;
+            }
+            if (p.type === 'number') {
+                const numeric = typeof value === 'number' ? value : Number(value?.toString().trim());
+                if (Number.isNaN(numeric)) {
+                    delete sanitized[p.name];
+                    continue;
+                }
+                if (typeof p.min === 'number' && numeric < p.min) {
+                    delete sanitized[p.name];
+                    continue;
+                }
+                if (typeof p.max === 'number' && numeric > p.max) {
+                    delete sanitized[p.name];
+                    continue;
+                }
+                sanitized[p.name] = numeric;
+            }
+            if (p.type === 'date') {
+                const v = sanitized[p.name];
+                if (typeof v === 'string') {
+                    const s = v.trim();
+                    if (!this.isIsoDateString(s)) {
+                        delete sanitized[p.name];
+                    }
+                    else {
+                        sanitized[p.name] = s;
+                    }
+                }
+                else {
+                    delete sanitized[p.name];
+                }
+            }
+            if (p.type === 'select') {
+                const v = typeof value === 'string' ? value : value?.toString();
+                if (!v) {
+                    delete sanitized[p.name];
+                    continue;
+                }
+                if (Array.isArray(p.options) && p.options.length > 0) {
+                    const allowed = p.options.some((opt) => String(opt.value) === String(v));
+                    if (!allowed) {
+                        delete sanitized[p.name];
+                        continue;
+                    }
+                }
+                sanitized[p.name] = v;
+            }
+            // Defensive handling for file parameters: AI may return textual hints like "csv file".
+            // If we expect a File/Blob or a base64 data URL (when delivery='base64'), accept only
+            // those forms. Otherwise remove the param so the handler will ask the user via a form.
+            if (p.type === 'file') {
+                const val = sanitized[p.name];
+                const isFileLike = val && typeof val === 'object' && typeof val.name === 'string' && typeof val.size === 'number';
+                const isDataUrl = typeof val === 'string' && /^data:[^;]+;base64,/.test(val);
+                const delivery = p.delivery ?? 'file';
+                if (delivery === 'base64') {
+                    // Accept either a data URL string or a File-like object
+                    if (!isDataUrl && !isFileLike) {
+                        delete sanitized[p.name];
+                    }
+                }
+                else {
+                    // delivery === 'file' -> expect a File/Blob object
+                    if (!isFileLike) {
+                        delete sanitized[p.name];
+                    }
+                }
+            }
+        }
+        return sanitized;
+    }
+    isIsoDateString(value) {
+        if (!/^\d{4}-\d{2}-\d{2}$/.test(value))
+            return false;
+        const dt = new Date(`${value}T00:00:00Z`);
+        return !Number.isNaN(dt.getTime());
+    }
+    shouldAskSingleQuestion(missing) {
+        if (missing.length !== 1)
+            return false;
+        const t = missing[0].type;
+        return t === 'string' || t === 'number' || t === 'date';
+    }
+    buildConfirmResponse(cmd) {
+        return {
+            message: `Are you sure you want to run "${cmd.command}"?`,
+            type: 'confirm',
+            options: [
+                { label: 'Yes', value: 'yes' },
+                { label: 'No', value: 'no' },
+            ],
+        };
+    }
+    async tryDeterministicMatch(input) {
+        // Substring or keyword-based match before AI
+        const candidates = [];
+        for (const cmd of this.commands.values()) {
+            let score = 0;
+            const commandPhrase = cmd.command.toLowerCase();
+            if (input.includes(commandPhrase))
+                score += 5;
+            const keywords = cmd.keywords ?? [];
+            for (const kw of keywords) {
+                const k = kw.toLowerCase().trim();
+                if (!k)
+                    continue;
+                if (input === k)
+                    score += 4;
+                else if (input.includes(k))
+                    score += 3;
+            }
+            if (score > 0)
+                candidates.push({ cmd, score });
+        }
+        if (candidates.length === 0)
+            return null;
+        candidates.sort((a, b) => b.score - a.score);
+        const topScore = candidates[0].score;
+        const top = candidates.filter((c) => c.score === topScore).slice(0, 3);
+        // If multiple equally-good matches, ask the user to choose.
+        if (top.length > 1) {
+            return {
+                message: 'I think you mean one of these. Which one should I run?',
+                type: 'ambiguous',
+                options: top.map((c) => ({
+                    label: c.cmd.command,
+                    value: c.cmd.command,
+                    commandId: c.cmd.id,
+                })),
+            };
+        }
+        const cmd = top[0].cmd;
+        // If params are required, ask with a form
+        const requiredParams = (cmd.parameters ?? []).filter((p) => p.required);
+        if (requiredParams.length > 0) {
+            this.context = { commandId: this.getCommandIdentifier(cmd), params: {} };
+            return {
+                message: `Please provide the required details for "${cmd.command}".`,
+                type: 'form',
+                fields: requiredParams,
+            };
+        }
+        if (cmd.critical) {
+            this.pendingConfirmation = { commandId: this.getCommandIdentifier(cmd), params: {} };
+            return this.buildConfirmResponse(cmd);
+        }
+        return this.safeRunAction(cmd, {});
+    }
+    async safeRunAction(cmd, params) {
+        try {
+            const result = await cmd.action(params ?? {});
+            return this.normalizeResponse(result);
+        }
+        catch {
+            return { message: 'Something went wrong while running that command.', type: 'error' };
+        }
+    }
+    async getCommandsForAI() {
+        const commands = Array.from(this.commands.values()).map((cmd) => ({
+            ...cmd,
+            parameters: cmd.parameters
+                ? cmd.parameters.map((param) => ({ ...param }))
+                : undefined,
+        }));
+        // Resolve async select options (cached) to give the model enough context.
+        await Promise.all(commands.map(async (cmd) => {
+            if (!cmd.parameters)
+                return;
+            await Promise.all(cmd.parameters.map(async (p) => {
+                if (p.type !== 'select' || !p.getOptions || (p.options && p.options.length))
+                    return;
+                const cacheKey = `${cmd.id ?? cmd.command}:${p.name}`;
+                const cached = this.selectOptionsCache.get(cacheKey);
+                const now = Date.now();
+                if (cached && now - cached.ts < 60_000) {
+                    p.options = cached.options;
+                    return;
+                }
+                try {
+                    const opts = await p.getOptions();
+                    this.selectOptionsCache.set(cacheKey, { options: opts, ts: now });
+                    p.options = opts;
+                }
+                catch {
+                    // If options fail to load, keep as-is.
+                }
+            }));
+        }));
+        return commands;
+    }
+    getCommandById(id) {
+        for (const cmd of this.commands.values()) {
+            if (cmd.id === id)
+                return cmd;
+        }
+        return undefined;
+    }
+    listAllCommands() {
+        const options = Array.from(this.commands.values()).map((cmd) => ({
+            label: cmd.command,
+            value: cmd.id ?? cmd.command,
+            commandId: cmd.id ?? cmd.command,
+        }));
+        return {
+            message: 'Here are the available commands:',
+            type: 'ambiguous',
+            options,
+        };
+    }
+    normalizeResponse(result) {
+        if (typeof result === 'string') {
+            return { message: result, type: 'success' };
+        }
+        if (result && typeof result === 'object') {
+            return result;
+        }
+        return { message: 'Done', type: 'success' };
+    }
+    isStructured(input) {
+        return typeof input['commandId'] === 'string';
+    }
+    getCommandIdentifier(cmd) {
+        if (!cmd.id) {
+            cmd.id = cmd.command.toLowerCase().replace(/\s+/g, '_');
+        }
+        return cmd.id;
+    }
+    /** List all registered commands */
+    getCommands() {
+        return Array.from(this.commands.keys());
+    }
+}
+
+class TextToSpeech {
+    synth = (typeof window !== 'undefined' ? window.speechSynthesis : null);
+    speak(text, options) {
+        if (!this.synth) {
+            // eslint-disable-next-line no-console
+            console.error('SpeechSynthesis API is not supported in this environment.');
+            return;
+        }
+        const utterance = new SpeechSynthesisUtterance(text);
+        if (options) {
+            utterance.pitch = options.pitch || 1;
+            utterance.rate = options.rate || 1;
+            utterance.volume = options.volume || 1;
+        }
+        // Notify listeners (e.g., VoiceProcessor) to pause recognition while speaking
+        if (typeof window !== 'undefined') {
+            utterance.onstart = () => {
+                window.dispatchEvent(new CustomEvent('foisit:tts-start'));
+            };
+            utterance.onend = () => {
+                // eslint-disable-next-line no-console
+                console.log('Speech finished.');
+                window.dispatchEvent(new CustomEvent('foisit:tts-end'));
+            };
+        }
+        utterance.onerror = (event) => {
+            // eslint-disable-next-line no-console
+            console.error('Error during speech synthesis:', event.error);
+        };
+        this.synth.speak(utterance);
+    }
+    stopSpeaking() {
+        if (this.synth) {
+            this.synth.cancel();
+        }
+    }
+}
+
+class FallbackHandler {
+    fallbackMessage = 'Sorry, I didn’t understand that.';
+    setFallbackMessage(message) {
+        this.fallbackMessage = message;
+    }
+    handleFallback(transcript) {
+        // eslint-disable-next-line no-console
+        if (transcript)
+            console.log(`Fallback triggered for: "${transcript}"`);
+        console.log(this.fallbackMessage);
+        new TextToSpeech().speak(this.fallbackMessage);
+    }
+    getFallbackMessage() {
+        return this.fallbackMessage;
+    }
+}
+
+/* eslint-disable no-unused-vars */
+
+const getRecognitionCtor = () => {
+    if (typeof window === 'undefined')
+        return null;
+    const w = window;
+    return w.SpeechRecognition ?? w.webkitSpeechRecognition ?? null;
+};
+class VoiceProcessor {
+    recognition = null;
+    isListening = false;
+    engineActive = false; // true after onstart, false after onend
+    intentionallyStopped = false;
+    restartAllowed = true;
+    lastStart = 0;
+    backoffMs = 250;
+    destroyed = false;
+    resultCallback = null;
+    ttsSpeaking = false;
+    visibilityHandler;
+    statusCallback;
+    debugEnabled = true; // enable debug logs to aid diagnosis
+    restartTimer = null;
+    prewarmed = false;
+    hadResultThisSession = false;
+    // Debug logger helpers
+    log(message) {
+        if (this.debugEnabled && message) {
+            // eslint-disable-next-line no-console
+            console.log('[VoiceProcessor]', message);
+        }
+    }
+    warn(message) {
+        if (this.debugEnabled && message) {
+            // eslint-disable-next-line no-console
+            console.warn('[VoiceProcessor]', message);
+        }
+    }
+    error(message) {
+        if (this.debugEnabled && message) {
+            // eslint-disable-next-line no-console
+            console.error('[VoiceProcessor]', message);
+        }
+    }
+    constructor(language = 'en-US', options = {}) {
+        const Ctor = getRecognitionCtor();
+        if (Ctor) {
+            this.recognition = new Ctor();
+            this.recognition.lang = language;
+            this.recognition.interimResults = options.interimResults ?? true;
+            this.recognition.continuous = options.continuous ?? true;
+            this.recognition.onresult = (event) => this.handleResult(event, options);
+            this.recognition.onend = () => this.handleEnd();
+            this.recognition.onstart = () => {
+                this.log('recognition onstart');
+                this.engineActive = true;
+                this.hadResultThisSession = false;
+                // Clear any pending restart attempts now that we are active
+                if (this.restartTimer) {
+                    clearTimeout(this.restartTimer);
+                    this.restartTimer = null;
+                }
+                this.backoffMs = 250;
+                if (this.isListening && !this.ttsSpeaking) {
+                    this.emitStatus('listening');
+                }
+            };
+            const vrec = this.recognition;
+            vrec.onaudiostart = () => this.log('onaudiostart');
+            vrec.onsoundstart = () => this.log('onsoundstart');
+            vrec.onspeechstart = () => this.log('onspeechstart');
+            vrec.onspeechend = () => this.log('onspeechend');
+            vrec.onsoundend = () => this.log('onsoundend');
+            vrec.onaudioend = () => this.log('onaudioend');
+            this.recognition.onerror = (event) => this.handleError(event);
+        }
+        else {
+            // No native support; keep recognition null and let consumers feature-detect.
+            this.recognition = null;
+            // If unsupported, immediately report status so UI can show a clear fallback.
+            this.emitStatus('unsupported');
+        }
+        // Pause listening while TTS is speaking via CustomEvents dispatched by TextToSpeech
+        if (typeof window !== 'undefined') {
+            window.addEventListener('foisit:tts-start', this.onTTSStart);
+            window.addEventListener('foisit:tts-end', this.onTTSEnd);
+            // Pause on tab hide, resume on show
+            this.visibilityHandler = () => {
+                if (typeof document !== 'undefined' && document.hidden) {
+                    try {
+                        this.recognition?.stop();
+                    }
+                    catch { /* no-op */ }
+                    this.emitStatus(this.ttsSpeaking ? 'speaking' : 'idle');
+                }
+                else if (this.isListening && !this.ttsSpeaking) {
+                    this.safeRestart();
+                }
+            };
+            if (typeof document !== 'undefined') {
+                document.addEventListener('visibilitychange', this.visibilityHandler);
+            }
+        }
+        else {
+            // No window/document on server — do not register browser-only handlers
+            this.visibilityHandler = undefined;
+        }
+    }
+    /** Check if SpeechRecognition is available */
+    isSupported() {
+        return getRecognitionCtor() !== null;
+    }
+    /** Allow consumers (wrappers) to observe status changes */
+    onStatusChange(callback) {
+        this.statusCallback = callback;
+    }
+    /** Start listening for speech input */
+    startListening(callback) {
+        if (!this.isSupported() || !this.recognition) {
+            this.warn('VoiceProcessor: SpeechRecognition is not supported in this browser.');
+            this.emitStatus('unsupported');
+            return;
+        }
+        if (this.isListening) {
+            this.warn('VoiceProcessor: Already listening.');
+            this.resultCallback = callback; // update callback if needed
+            return;
+        }
+        this.resultCallback = callback;
+        this.intentionallyStopped = false;
+        this.restartAllowed = true;
+        this.isListening = true;
+        this.emitStatus('listening');
+        // Warm up mic to avoid immediate onend in some environments
+        this.prewarmAudio().finally(() => {
+            this.safeRestart();
+        });
+    }
+    /** Stop listening for speech input */
+    stopListening() {
+        this.intentionallyStopped = true;
+        this.restartAllowed = false;
+        this.isListening = false;
+        this.emitStatus(this.ttsSpeaking ? 'speaking' : 'idle');
+        try {
+            this.recognition?.stop();
+        }
+        catch { /* no-op */ }
+    }
+    /** Clean up listeners */
+    destroy() {
+        this.destroyed = true;
+        this.stopListening();
+        this.resultCallback = null;
+        window.removeEventListener('foisit:tts-start', this.onTTSStart);
+        window.removeEventListener('foisit:tts-end', this.onTTSEnd);
+        if (this.visibilityHandler) {
+            document.removeEventListener('visibilitychange', this.visibilityHandler);
+            this.visibilityHandler = undefined;
+        }
+    }
+    /** Handle recognized speech results */
+    handleResult(event, options) {
+        if (!this.resultCallback)
+            return;
+        const threshold = options.confidenceThreshold ?? 0.6;
+        // Emit each alternative result chunk; concatenate finals client-side if desired
+        for (let i = event.resultIndex; i < event.results.length; i++) {
+            const res = event.results[i];
+            const alt = res && res[0];
+            const transcript = alt?.transcript?.trim?.() || '';
+            const confidence = alt?.confidence ?? 0;
+            if (!transcript)
+                continue;
+            if (!res.isFinal && options.interimResults === false)
+                continue; // skip interim if disabled
+            if (res.isFinal && confidence < threshold)
+                continue; // ignore low-confidence finals
+            try {
+                this.hadResultThisSession = true;
+                this.resultCallback(transcript, !!res.isFinal);
+            }
+            catch {
+                // Swallow user callback exceptions to avoid killing recognition
+                this.error('VoiceProcessor: result callback error');
+            }
+        }
+    }
+    /** Handle session end */
+    handleEnd() {
+        this.log('recognition onend');
+        this.engineActive = false;
+        if (this.destroyed || this.intentionallyStopped || !this.restartAllowed || this.ttsSpeaking) {
+            if (!this.ttsSpeaking) {
+                this.isListening = false;
+                this.emitStatus('idle');
+            }
+            return;
+        }
+        // We are still in "listening" mode logically; recognition ended spuriously.
+        this.isListening = true;
+        // Best-effort restart (continuous can still end spuriously)
+        this.scheduleRestart();
+    }
+    /** Handle errors during speech recognition */
+    handleError(event) {
+        const err = event?.error;
+        this.warn(`Error occurred: ${err ?? 'unknown'}`);
+        // Fatal errors: don't spin
+        const fatal = ['not-allowed', 'service-not-allowed', 'bad-grammar', 'language-not-supported'];
+        if (err && fatal.includes(err)) {
+            this.intentionallyStopped = true;
+            this.restartAllowed = false;
+            this.isListening = false;
+            this.emitStatus('error', { error: err });
+            return;
+        }
+        // For transient errors, try restart
+        this.scheduleRestart();
+    }
+    safeRestart() {
+        if (!this.recognition)
+            return;
+        if (this.engineActive) {
+            this.log('safeRestart: engine already active, skipping start');
+            return;
+        }
+        const now = Date.now();
+        if (now - this.lastStart < 300) {
+            setTimeout(() => this.safeRestart(), 300);
+            return;
+        }
+        this.lastStart = now;
+        try {
+            this.log('calling recognition.start()');
+            this.recognition.start();
+            this.backoffMs = 250; // reset backoff on successful start
+            if (this.isListening && !this.ttsSpeaking) {
+                this.emitStatus('listening');
+            }
+        }
+        catch {
+            this.error('recognition.start() threw; scheduling restart');
+            this.scheduleRestart();
+        }
+    }
+    scheduleRestart() {
+        if (this.destroyed || this.intentionallyStopped || !this.restartAllowed || this.ttsSpeaking)
+            return;
+        if (this.engineActive) {
+            this.log('scheduleRestart: engine active, not scheduling');
+            return;
+        }
+        const delay = Math.min(this.backoffMs, 2000);
+        this.log(`scheduleRestart in ${delay}ms`);
+        if (this.restartTimer) {
+            // A restart is already scheduled; keep the earliest
+            this.log('scheduleRestart: restart already scheduled');
+            return;
+        }
+        this.restartTimer = setTimeout(() => {
+            this.restartTimer = null;
+            if (this.destroyed || this.intentionallyStopped || !this.restartAllowed || this.ttsSpeaking)
+                return;
+            this.safeRestart();
+        }, delay);
+        this.backoffMs = Math.min(this.backoffMs * 2, 2000);
+    }
+    async prewarmAudio() {
+        if (this.prewarmed)
+            return;
+        try {
+            if (typeof navigator === 'undefined' || !('mediaDevices' in navigator))
+                return;
+            const md = navigator.mediaDevices;
+            if (!md?.getUserMedia)
+                return;
+            this.log('prewarmAudio: requesting mic');
+            const stream = await md.getUserMedia({ audio: true });
+            for (const track of stream.getTracks())
+                track.stop();
+            this.prewarmed = true;
+            this.log('prewarmAudio: mic ready');
+        }
+        catch {
+            this.warn('prewarmAudio: failed to get mic');
+        }
+    }
+    onTTSStart = () => {
+        this.ttsSpeaking = true;
+        try {
+            this.recognition?.stop();
+        }
+        catch { /* no-op */ }
+        // If we were listening, switch to speaking state
+        if (this.isListening) {
+            this.emitStatus('speaking');
+        }
+    };
+    onTTSEnd = () => {
+        this.ttsSpeaking = false;
+        if (this.isListening && this.restartAllowed) {
+            this.safeRestart();
+        }
+        else {
+            this.emitStatus(this.isListening ? 'listening' : 'idle');
+        }
+    };
+    emitStatus(status, details) {
+        if (!this.statusCallback)
+            return;
+        try {
+            this.statusCallback(status, details);
+        }
+        catch {
+            // Never let consumer errors break recognition
+            this.error('VoiceProcessor: status callback error');
+        }
+    }
+}
+
+class GestureHandler {
+    lastTap = 0;
+    tapCount = 0;
+    tapTimeout;
+    dblClickListener;
+    touchEndListener;
+    clickListener;
+    /**
+     * Sets up triple-click and triple-tap listeners
+     * @param onTripleClickOrTap Callback to execute when a triple-click or triple-tap is detected
+     */
+    setupTripleTapListener(onTripleClickOrTap) {
+        // Ensure we never stack multiple listeners for the same instance
+        this.destroy();
+        // Handle triple-click (desktop) - implement manually since no built-in triple-click event
+        this.clickListener = () => {
+            this.tapCount++;
+            if (this.tapCount === 1) {
+                // Start timeout for first click
+                this.tapTimeout = window.setTimeout(() => {
+                    this.tapCount = 0;
+                }, 500); // Reset after 500ms
+            }
+            else if (this.tapCount === 3) {
+                // Triple click detected
+                clearTimeout(this.tapTimeout);
+                this.tapCount = 0;
+                onTripleClickOrTap();
+            }
+        };
+        document.addEventListener('click', this.clickListener);
+        // Handle triple-tap (mobile)
+        this.touchEndListener = () => {
+            const currentTime = new Date().getTime();
+            const tapInterval = currentTime - this.lastTap;
+            if (tapInterval < 500 && tapInterval > 0) {
+                this.tapCount++;
+                if (this.tapCount === 3) {
+                    this.tapCount = 0;
+                    onTripleClickOrTap();
+                }
+            }
+            else {
+                this.tapCount = 1;
+            }
+            this.lastTap = currentTime;
+        };
+        document.addEventListener('touchend', this.touchEndListener);
+    }
+    destroy() {
+        if (this.dblClickListener) {
+            document.removeEventListener('dblclick', this.dblClickListener);
+        }
+        if (this.touchEndListener) {
+            document.removeEventListener('touchend', this.touchEndListener);
+        }
+        if (this.clickListener) {
+            document.removeEventListener('click', this.clickListener);
+        }
+        if (this.tapTimeout) {
+            clearTimeout(this.tapTimeout);
+        }
+        this.dblClickListener = undefined;
+        this.touchEndListener = undefined;
+        this.clickListener = undefined;
+        this.tapTimeout = undefined;
+        this.tapCount = 0;
+    }
+}
+function injectStyles() {
+    // Check if the styles are already injected
+    const existingStyle = document.querySelector('#assistant-styles');
+    if (existingStyle) {
+        console.log('Styles already injected');
+        return; // Avoid duplicate injection
+    }
+    // Create and inject the style element
+    const style = document.createElement('style');
+    style.id = 'assistant-styles';
+    style.innerHTML = `
+    /* Rounded shape with gradient animation */
+    .gradient-indicator {
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #ff6ec4, #7873f5, #5e8cff, #6ed0f6);
+      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+      animation: amoeba 5s infinite ease-in-out;
+      z-index: 9999; /* Ensure it's above all other elements */
+    }
+
+    /* Amoeba effect for the borders */
+    @keyframes amoeba {
+      0% {
+        border-radius: 50%;
+      }
+      25% {
+        border-radius: 40% 60% 60% 40%;
+      }
+      50% {
+        border-radius: 60% 40% 40% 60%;
+      }
+      75% {
+        border-radius: 40% 60% 60% 40%;
+      }
+      100% {
+        border-radius: 50%;
+      }
+    }
+  `;
+    document.head.appendChild(style);
+    console.log('Gradient styles injected');
+}
+function addGradientAnimation() {
+    // Check if the gradient indicator already exists
+    if (document.querySelector('#gradient-indicator')) {
+        return; // Avoid duplicate indicators
+    }
+    // Create a new div element
+    const gradientDiv = document.createElement('div');
+    gradientDiv.id = 'gradient-indicator';
+    // Inject styles dynamically
+    injectStyles();
+    // Add the gradient-indicator class to the div
+    gradientDiv.classList.add('gradient-indicator');
+    // Append the div to the body
+    document.body.appendChild(gradientDiv);
+    console.log('Gradient indicator added to the DOM');
+}
+function removeGradientAnimation() {
+    const gradientDiv = document.querySelector('#gradient-indicator');
+    if (gradientDiv) {
+        gradientDiv.remove();
+        console.log('Gradient indicator removed from the DOM');
+    }
+}
+
+function isBrowser() {
+    return typeof window !== 'undefined' && typeof document !== 'undefined';
+}
+
+class StateManager {
+    state = 'idle';
+    // eslint-disable-next-line no-unused-vars
+    subscribers = [];
+    getState() {
+        return this.state;
+    }
+    setState(state) {
+        this.state = state;
+        this.notifySubscribers();
+        console.log('State updated:', state);
+        // Dynamically update body class based on state
+        if (state === 'listening') {
+            addGradientAnimation();
+        }
+        else {
+            removeGradientAnimation();
+        }
+    }
+    // eslint-disable-next-line no-unused-vars
+    subscribe(callback) {
+        this.subscribers.push(callback);
+    }
+    notifySubscribers() {
+        this.subscribers.forEach((callback) => callback(this.state));
+    }
+}
+
+/* eslint-disable no-unused-vars */
+class OverlayManager {
+    container = null;
+    chatWindow = null;
+    messagesContainer = null;
+    input = null;
+    isOpen = false;
+    onSubmit;
+    onClose;
+    loadingEl = null;
+    config;
+    gestureHandler;
+    // Command handlers registered programmatically by the host app
+    commandHandlers = new Map();
+    // Optional external executor (e.g. CommandHandler from wrappers)
+    externalCommandExecutor;
+    active = isBrowser();
+    constructor(config) {
+        this.config = config;
+        if (this.active)
+            this.init();
+    }
+    /** Register a command handler that can be invoked programmatically via `runCommand` */
+    registerCommandHandler(commandId, handler) {
+        if (!commandId || typeof handler !== 'function')
+            return;
+        this.commandHandlers.set(commandId, handler);
+    }
+    /** Check whether a programmatic handler is registered locally */
+    hasCommandHandler(commandId) {
+        return this.commandHandlers.has(commandId);
+    }
+    /** Set an external executor (used to run commands registered via CommandHandler) */
+    setExternalCommandExecutor(exec) {
+        this.externalCommandExecutor = exec;
+    }
+    /** Unregister a previously registered command handler */
+    unregisterCommandHandler(commandId) {
+        if (!commandId)
+            return;
+        this.commandHandlers.delete(commandId);
+    }
+    /**
+     * Run a registered command by id. Options:
+     * - `params`: passed to the handler
+     * - `openOverlay`: if true, open the overlay before running
+     * - `showInvocation`: if true, show the invocation as a user message
+     */
+    async runCommand(options) {
+        if (!options || !options.commandId)
+            throw new Error('runCommand requires a commandId');
+        const { commandId, params, openOverlay = true, showInvocation = true } = options;
+        if (openOverlay && !this.isOpen)
+            this.toggle();
+        const handler = this.commandHandlers.get(commandId);
+        // Only show a user invocation bubble when invoking a handler registered
+        // directly on the overlay (programmatic handlers). If we're delegating
+        // to an external executor (e.g. CommandHandler), suppress the user bubble
+        // so the overlay starts with the system/AI response.
+        if (handler && showInvocation && this.messagesContainer) {
+            this.addMessage(`Command: ${commandId}`, 'user');
+        }
+        if (handler) {
+            try {
+                this.showLoading();
+                const result = await handler(params);
+                this.hideLoading();
+                if (typeof result === 'string') {
+                    this.addMessage(result, 'system');
+                }
+                else if (result && typeof result === 'object') {
+                    try {
+                        this.addMessage(JSON.stringify(result, null, 2), 'system');
+                    }
+                    catch (_) {
+                        this.addMessage(String(result), 'system');
+                    }
+                }
+                else if (result === undefined || result === null) {
+                    // no-op
+                }
+                else {
+                    this.addMessage(String(result), 'system');
+                }
+                return result;
+            }
+            catch (err) {
+                this.hideLoading();
+                this.addMessage(`Command "${commandId}" failed: ${String(err)}`, 'system');
+                throw err;
+            }
+        }
+        // No local handler — delegate to external executor if available. The
+        // external executor (CommandHandler) returns an InteractiveResponse which
+        // the caller (AssistantService) should process and render via its
+        // `processResponse` method. Here we just return that object.
+        if (this.externalCommandExecutor) {
+            try {
+                this.showLoading();
+                const resp = await this.externalCommandExecutor({ commandId, params });
+                this.hideLoading();
+                return resp;
+            }
+            catch (err) {
+                this.hideLoading();
+                this.addMessage(`Command "${commandId}" failed: ${String(err)}`, 'system');
+                throw err;
+            }
+        }
+        // No handler anywhere
+        this.addMessage(`No handler registered for command "${commandId}".`, 'system');
+        return undefined;
+    }
+    init() {
+        if (this.container)
+            return;
+        this.injectOverlayStyles();
+        // Reuse an existing overlay container if one already exists on the page.
+        // This prevents duplicate overlays when multiple assistant instances are created (e.g., React StrictMode).
+        const existing = document.getElementById('foisit-overlay-container');
+        if (existing && existing instanceof HTMLElement) {
+            this.container = existing;
+            this.chatWindow = existing.querySelector('.foisit-chat');
+            this.messagesContainer = existing.querySelector('.foisit-messages');
+            this.input = existing.querySelector('input.foisit-input');
+            if (this.config.floatingButton?.visible !== false && !existing.querySelector('.foisit-floating-btn')) {
+                this.renderFloatingButton();
+            }
+            if (!this.chatWindow) {
+                this.renderChatWindow();
+            }
+            if (this.config.enableGestureActivation) {
+                this.gestureHandler = new GestureHandler();
+                this.gestureHandler.setupTripleTapListener(() => this.toggle());
+            }
+            return;
+        }
+        this.container = document.createElement('div');
+        this.container.id = 'foisit-overlay-container';
+        this.container.className = 'foisit-overlay-container';
+        document.body.appendChild(this.container);
+        if (this.config.floatingButton?.visible !== false) {
+            this.renderFloatingButton();
+        }
+        this.renderChatWindow();
+        if (this.config.enableGestureActivation) {
+            this.gestureHandler = new GestureHandler();
+            this.gestureHandler.setupTripleTapListener(() => this.toggle());
+        }
+    }
+    renderFloatingButton() {
+        const btn = document.createElement('button');
+        btn.innerHTML = this.config.floatingButton?.customHtml || '🎙️';
+        const bottom = this.config.floatingButton?.position?.bottom || '20px';
+        const right = this.config.floatingButton?.position?.right || '20px';
+        btn.className = 'foisit-floating-btn';
+        btn.style.bottom = bottom;
+        btn.style.right = right;
+        btn.onclick = () => this.toggle();
+        btn.onmouseenter = () => (btn.style.transform = 'scale(1.05)');
+        btn.onmouseleave = () => (btn.style.transform = 'scale(1)');
+        this.container?.appendChild(btn);
+    }
+    renderChatWindow() {
+        if (this.chatWindow)
+            return;
+        this.chatWindow = document.createElement('div');
+        this.chatWindow.className = 'foisit-chat';
+        // Header
+        const header = document.createElement('div');
+        header.className = 'foisit-header';
+        const title = document.createElement('span');
+        title.className = 'foisit-title';
+        title.textContent = 'Foisit';
+        const closeButton = document.createElement('button');
+        closeButton.type = 'button';
+        closeButton.className = 'foisit-close';
+        closeButton.setAttribute('aria-label', 'Close');
+        closeButton.innerHTML = '&times;';
+        closeButton.addEventListener('click', () => this.toggle());
+        header.appendChild(title);
+        header.appendChild(closeButton);
+        // Messages Area
+        this.messagesContainer = document.createElement('div');
+        this.messagesContainer.className = 'foisit-messages';
+        // Input Area
+        const inputArea = document.createElement('div');
+        inputArea.className = 'foisit-input-area';
+        this.input = document.createElement('input');
+        this.input.placeholder =
+            this.config.inputPlaceholder || 'Type a command...';
+        this.input.className = 'foisit-input';
+        this.input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && this.input?.value.trim()) {
+                const text = this.input.value.trim();
+                this.input.value = '';
+                if (this.onSubmit)
+                    this.onSubmit(text);
+            }
+        });
+        inputArea.appendChild(this.input);
+        this.chatWindow.appendChild(header);
+        this.chatWindow.appendChild(this.messagesContainer);
+        this.chatWindow.appendChild(inputArea);
+        this.container?.appendChild(this.chatWindow);
+    }
+    registerCallbacks(onSubmit, onClose) {
+        if (!this.active)
+            return; // no-op on server
+        this.onSubmit = onSubmit;
+        this.onClose = onClose;
+    }
+    toggle(onSubmit, onClose) {
+        if (!this.active)
+            return; // no-op on server
+        if (onSubmit)
+            this.onSubmit = onSubmit;
+        if (onClose)
+            this.onClose = onClose;
+        this.isOpen = !this.isOpen;
+        if (this.chatWindow) {
+            if (this.isOpen) {
+                // Ensure the container can receive pointer events while open so
+                // click-outside detection works (CSS defaults to pointer-events: none).
+                if (this.container)
+                    this.container.style.pointerEvents = 'auto';
+                this.chatWindow.style.display = 'flex';
+                requestAnimationFrame(() => {
+                    if (this.chatWindow) {
+                        this.chatWindow.style.opacity = '1';
+                        this.chatWindow.style.transform = 'translateY(0) scale(1)';
+                    }
+                });
+                setTimeout(() => this.input?.focus(), 100);
+                // Add click-outside-to-close listener
+                this.addClickOutsideListener();
+            }
+            else {
+                this.chatWindow.style.opacity = '0';
+                this.chatWindow.style.transform = 'translateY(20px) scale(0.95)';
+                setTimeout(() => {
+                    if (this.chatWindow && !this.isOpen) {
+                        this.chatWindow.style.display = 'none';
+                    }
+                }, 200);
+                if (this.onClose)
+                    this.onClose();
+                // Remove click-outside-to-close listener and disable container pointer events
+                this.removeClickOutsideListener();
+                if (this.container)
+                    this.container.style.pointerEvents = 'none';
+            }
+        }
+    }
+    addClickOutsideListener() {
+        if (!this.container)
+            return;
+        // Remove any existing listener first
+        this.removeClickOutsideListener();
+        // Add click listener to container
+        this.container.addEventListener('click', this.handleClickOutside);
+    }
+    removeClickOutsideListener() {
+        if (!this.container)
+            return;
+        this.container.removeEventListener('click', this.handleClickOutside);
+    }
+    handleClickOutside = (event) => {
+        const target = event.target;
+        // Don't close if clicking on the chat window or its contents
+        if (this.chatWindow && this.chatWindow.contains(target)) {
+            return;
+        }
+        // Don't close if clicking on the floating button
+        if (target.closest('.foisit-floating-btn')) {
+            return;
+        }
+        // Close the overlay
+        this.toggle();
+    };
+    addMessage(text, type) {
+        if (!this.messagesContainer)
+            return;
+        const msg = document.createElement('div');
+        // Render markdown for system (AI) messages, keep user messages as plain text
+        if (type === 'system') {
+            msg.innerHTML = this.renderMarkdown(text);
+        }
+        else {
+            msg.textContent = text;
+        }
+        msg.className = type === 'user' ? 'foisit-bubble user' : 'foisit-bubble system';
+        // Entrance animation: fade + slight upward motion. Duration scales so
+        // short messages animate a bit slower, long messages appear faster.
+        const length = (text || '').length || 0;
+        // Base duration (ms) reduced for longer content
+        const duration = Math.max(120, 700 - Math.min(600, Math.floor(length * 6)));
+        // Prepare initial state
+        msg.style.opacity = '0';
+        msg.style.transform = 'translateY(8px)';
+        msg.style.transition = 'none';
+        this.messagesContainer.appendChild(msg);
+        // Animate entrance and scroll instantly to bottom
+        this.animateMessageEntrance(msg, duration);
+        this.scrollToBottom();
+    }
+    addOptions(options) {
+        if (!this.messagesContainer)
+            return;
+        const container = document.createElement('div');
+        container.className = 'foisit-options-container';
+        options.forEach((opt) => {
+            const btn = document.createElement('button');
+            btn.textContent = opt.label;
+            btn.className = 'foisit-option-chip';
+            btn.setAttribute('type', 'button');
+            btn.setAttribute('aria-label', opt.label);
+            const clickPayload = () => {
+                // If commandId is provided, submit a structured payload so the handler
+                // can run it deterministically: { commandId, params? }
+                if (opt.commandId) {
+                    if (this.onSubmit)
+                        this.onSubmit({ commandId: opt.commandId });
+                    return;
+                }
+                // Otherwise fall back to value or label string
+                const value = (opt && typeof opt.value === 'string' && opt.value.trim()) ? opt.value : opt.label;
+                if (this.onSubmit)
+                    this.onSubmit(value);
+            };
+            btn.onclick = clickPayload;
+            btn.onkeydown = (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    clickPayload();
+                }
+            };
+            container.appendChild(btn);
+        });
+        this.messagesContainer.appendChild(container);
+        this.scrollToBottom();
+    }
+    addForm(message, fields, onSubmit) {
+        if (!this.messagesContainer)
+            return;
+        this.addMessage(message, 'system');
+        const form = document.createElement('form');
+        form.className = 'foisit-form';
+        const controls = [];
+        const createLabel = (text, required) => {
+            const label = document.createElement('div');
+            label.className = 'foisit-form-label';
+            label.innerHTML = text + (required ? ' <span class="foisit-req-star">*</span>' : '');
+            return label;
+        };
+        const createError = () => {
+            const error = document.createElement('div');
+            error.className = 'foisit-form-error';
+            error.style.display = 'none';
+            return error;
+        };
+        (fields ?? []).forEach((field) => {
+            const wrapper = document.createElement('div');
+            wrapper.className = 'foisit-form-group';
+            const labelText = field.description || field.name;
+            wrapper.appendChild(createLabel(labelText, field.required));
+            let inputEl;
+            if (field.type === 'select') {
+                const select = document.createElement('select');
+                select.className = 'foisit-form-input';
+                const placeholderOpt = document.createElement('option');
+                placeholderOpt.value = '';
+                placeholderOpt.textContent = 'Select...';
+                select.appendChild(placeholderOpt);
+                const populate = (options) => {
+                    (options ?? []).forEach((opt) => {
+                        const o = document.createElement('option');
+                        o.value = String(opt.value ?? opt.label ?? '');
+                        o.textContent = String(opt.label ?? opt.value ?? '');
+                        select.appendChild(o);
+                    });
+                };
+                if (Array.isArray(field.options) && field.options.length) {
+                    populate(field.options);
+                }
+                else if (typeof field.getOptions === 'function') {
+                    const getOptions = field.getOptions;
+                    const loadingOpt = document.createElement('option');
+                    loadingOpt.value = '';
+                    loadingOpt.textContent = 'Loading...';
+                    select.appendChild(loadingOpt);
+                    Promise.resolve()
+                        .then(() => getOptions())
+                        .then((opts) => {
+                        while (select.options.length > 1)
+                            select.remove(1);
+                        populate(opts);
+                    })
+                        .catch(() => {
+                        while (select.options.length > 1)
+                            select.remove(1);
+                        const errOpt = document.createElement('option');
+                        errOpt.value = '';
+                        errOpt.textContent = 'Error loading options';
+                        select.appendChild(errOpt);
+                    });
+                }
+                if (field.defaultValue != null) {
+                    select.value = String(field.defaultValue);
+                }
+                inputEl = select;
+            }
+            else if (field.type === 'file') {
+                const ffield = field;
+                const input = document.createElement('input');
+                input.className = 'foisit-form-input';
+                input.type = 'file';
+                if (ffield.accept && Array.isArray(ffield.accept)) {
+                    input.accept = ffield.accept.join(',');
+                }
+                if (ffield.multiple)
+                    input.multiple = true;
+                if (ffield.capture) {
+                    if (ffield.capture === true)
+                        input.setAttribute('capture', '');
+                    else
+                        input.setAttribute('capture', String(ffield.capture));
+                }
+                // Validation state stored on the element via dataset
+                input.addEventListener('change', async () => {
+                    const files = Array.from(input.files || []);
+                    const errEl = errorEl;
+                    errEl.style.display = 'none';
+                    errEl.textContent = '';
+                    if (files.length === 0)
+                        return;
+                    // Basic validations: count and sizes
+                    const maxFiles = ffield.maxFiles ?? (ffield.multiple ? 10 : 1);
+                    if (files.length > maxFiles) {
+                        errEl.textContent = `Please select at most ${maxFiles} file(s).`;
+                        errEl.style.display = 'block';
+                        return;
+                    }
+                    const maxSize = ffield.maxSizeBytes ?? Infinity;
+                    const total = files.reduce((s, f) => s + f.size, 0);
+                    if (files.some(f => f.size > maxSize)) {
+                        errEl.textContent = `One or more files exceed the maximum size of ${Math.round(maxSize / 1024)} KB.`;
+                        errEl.style.display = 'block';
+                        return;
+                    }
+                    const maxTotal = ffield.maxTotalBytes ?? Infinity;
+                    if (total > maxTotal) {
+                        errEl.textContent = `Total selected files exceed the maximum of ${Math.round(maxTotal / 1024)} KB.`;
+                        errEl.style.display = 'block';
+                        return;
+                    }
+                    // Basic mime/extension check
+                    if (ffield.accept && Array.isArray(ffield.accept)) {
+                        const accepts = ffield.accept;
+                        const ok = files.every((file) => {
+                            if (!file.type)
+                                return true; // can't tell
+                            return accepts.some(a => a.startsWith('.') ? file.name.toLowerCase().endsWith(a.toLowerCase()) : file.type === a || file.type.startsWith(a.split('/')[0] + '/'));
+                        });
+                        if (!ok) {
+                            errEl.textContent = 'One or more files have an unsupported type.';
+                            errEl.style.display = 'block';
+                            return;
+                        }
+                    }
+                });
+                inputEl = input;
+            }
+            else {
+                const input = document.createElement('input');
+                input.className = 'foisit-form-input';
+                if (field.type === 'string') {
+                    input.placeholder = field.placeholder || 'Type here...';
+                }
+                if (field.type === 'number') {
+                    input.type = 'number';
+                    if (typeof field.min === 'number')
+                        input.min = String(field.min);
+                    if (typeof field.max === 'number')
+                        input.max = String(field.max);
+                    if (typeof field.step === 'number')
+                        input.step = String(field.step);
+                    if (field.defaultValue != null)
+                        input.value = String(field.defaultValue);
+                }
+                else if (field.type === 'date') {
+                    input.type = 'date';
+                    if (typeof field.min === 'string')
+                        input.min = field.min;
+                    if (typeof field.max === 'string')
+                        input.max = field.max;
+                    if (field.defaultValue != null)
+                        input.value = String(field.defaultValue);
+                }
+                else {
+                    input.type = 'text';
+                    if (field.defaultValue != null)
+                        input.value = String(field.defaultValue);
+                }
+                inputEl = input;
+            }
+            // Add Error element
+            const errorEl = createError();
+            wrapper.appendChild(inputEl);
+            wrapper.appendChild(errorEl); // Append error container
+            controls.push({
+                name: field.name,
+                type: field.type,
+                el: inputEl,
+                required: field.required,
+            });
+            form.appendChild(wrapper);
+        });
+        const actions = document.createElement('div');
+        actions.className = 'foisit-form-actions';
+        const submitBtn = document.createElement('button');
+        submitBtn.type = 'submit';
+        submitBtn.textContent = 'Submit';
+        submitBtn.className = 'foisit-option-chip';
+        submitBtn.style.fontWeight = '600';
+        actions.appendChild(submitBtn);
+        form.appendChild(actions);
+        form.onsubmit = async (e) => {
+            e.preventDefault();
+            const data = {};
+            let hasError = false;
+            // Clear previous errors
+            form.querySelectorAll('.foisit-form-error').forEach(el => {
+                el.style.display = 'none';
+                el.textContent = '';
+            });
+            form.querySelectorAll('.foisit-form-input').forEach(el => {
+                el.classList.remove('foisit-error-border');
+            });
+            for (const c of controls) {
+                // FILE inputs need special handling
+                if (c.type === 'file') {
+                    const fileWrapper = c.el.parentElement;
+                    const fileErrorEl = fileWrapper?.querySelector('.foisit-form-error');
+                    const input = c.el;
+                    const files = Array.from(input.files || []);
+                    if (c.required && files.length === 0) {
+                        hasError = true;
+                        input.classList.add('foisit-error-border');
+                        if (fileErrorEl) {
+                            fileErrorEl.textContent = 'This file is required';
+                            fileErrorEl.style.display = 'block';
+                        }
+                        continue;
+                    }
+                    if (files.length === 0)
+                        continue;
+                    // Find corresponding field definition
+                    const fieldDef = (fields ?? []).find((f) => f.name === c.name);
+                    const delivery = fieldDef?.delivery ?? 'file';
+                    // Run optional dimension/duration checks (best-effort)
+                    if (fieldDef?.maxWidth || fieldDef?.maxHeight) {
+                        // check first image only
+                        try {
+                            const dims = await this.getImageDimensions(files[0]);
+                            if (fieldDef.maxWidth && dims.width > fieldDef.maxWidth) {
+                                hasError = true;
+                                if (fileErrorEl) {
+                                    fileErrorEl.textContent = `Image width must be ≤ ${fieldDef.maxWidth}px`;
+                                    fileErrorEl.style.display = 'block';
+                                }
+                                continue;
+                            }
+                            if (fieldDef.maxHeight && dims.height > fieldDef.maxHeight) {
+                                hasError = true;
+                                if (fileErrorEl) {
+                                    fileErrorEl.textContent = `Image height must be ≤ ${fieldDef.maxHeight}px`;
+                                    fileErrorEl.style.display = 'block';
+                                }
+                                continue;
+                            }
+                        }
+                        catch {
+                            // ignore dimension check failures
+                        }
+                    }
+                    if (fieldDef?.maxDurationSec) {
+                        try {
+                            const dur = await this.getMediaDuration(files[0]);
+                            if (dur && dur > fieldDef.maxDurationSec) {
+                                hasError = true;
+                                if (fileErrorEl) {
+                                    fileErrorEl.textContent = `Media duration must be ≤ ${fieldDef.maxDurationSec}s`;
+                                    fileErrorEl.style.display = 'block';
+                                }
+                                continue;
+                            }
+                        }
+                        catch {
+                            // ignore
+                        }
+                    }
+                    // Prepare payload according to delivery
+                    if (delivery === 'file') {
+                        data[c.name] = fieldDef?.multiple ? files : files[0];
+                    }
+                    else if (delivery === 'base64') {
+                        try {
+                            const encoded = await Promise.all(files.map((file) => this.readFileAsDataURL(file)));
+                            data[c.name] = fieldDef?.multiple ? encoded : encoded[0];
+                        }
+                        catch {
+                            hasError = true;
+                            if (fileErrorEl) {
+                                fileErrorEl.textContent = 'Failed to encode file(s) to base64.';
+                                fileErrorEl.style.display = 'block';
+                            }
+                            continue;
+                        }
+                    }
+                    continue;
+                }
+                const val = (c.el.value ?? '').toString().trim();
+                const valueWrapper = c.el.parentElement;
+                const fieldErrorEl = valueWrapper?.querySelector('.foisit-form-error');
+                if (c.required && (val == null || val === '')) {
+                    hasError = true;
+                    c.el.classList.add('foisit-error-border');
+                    if (fieldErrorEl) {
+                        fieldErrorEl.textContent = 'This field is required';
+                        fieldErrorEl.style.display = 'block';
+                    }
+                    continue;
+                }
+                if (val === '')
+                    continue;
+                if (c.type === 'number') {
+                    const n = Number(val);
+                    if (!Number.isNaN(n))
+                        data[c.name] = n;
+                }
+                else {
+                    data[c.name] = val;
+                }
+            }
+            if (hasError) {
+                // Shake animation
+                form.classList.add('foisit-shake');
+                setTimeout(() => form.classList.remove('foisit-shake'), 400);
+                return;
+            }
+            submitBtn.disabled = true;
+            submitBtn.style.opacity = '0.6';
+            controls.forEach((c) => {
+                c.el.disabled = true;
+            });
+            onSubmit(data);
+        };
+        this.messagesContainer.appendChild(form);
+        this.scrollToBottom();
+    }
+    showLoading() {
+        if (!this.messagesContainer)
+            return;
+        if (this.loadingEl)
+            return;
+        this.loadingEl = document.createElement('div');
+        this.loadingEl.className = 'foisit-loading-dots foisit-bubble system';
+        // Create dots
+        for (let i = 0; i < 3; i++) {
+            const dot = document.createElement('div');
+            dot.className = 'foisit-dot';
+            dot.style.animation = `foisitPulse 1.4s infinite ease-in-out ${i * 0.2}s`;
+            this.loadingEl.appendChild(dot);
+        }
+        this.messagesContainer.appendChild(this.loadingEl);
+        this.scrollToBottom();
+    }
+    hideLoading() {
+        this.loadingEl?.remove();
+        this.loadingEl = null;
+    }
+    scrollToBottom() {
+        if (this.messagesContainer) {
+            this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
+        }
+    }
+    /** Subtle entrance animation for new messages */
+    animateMessageEntrance(el, duration) {
+        if (!el)
+            return;
+        // Force a reflow so transition will apply
+        // apply transition
+        // Use ease-out cubic for a subtle feel
+        el.style.transition = `opacity ${duration}ms cubic-bezier(0.22, 0.9, 0.32, 1), transform ${Math.max(120, duration)}ms cubic-bezier(0.22, 0.9, 0.32, 1)`;
+        // trigger in next frame
+        requestAnimationFrame(() => {
+            el.style.opacity = '1';
+            el.style.transform = 'translateY(0)';
+        });
+        // cleanup transition after done
+        const cleanup = () => {
+            try {
+                el.style.transition = '';
+                // eslint-disable-next-line no-empty, @typescript-eslint/no-unused-vars
+            }
+            catch (_) { }
+            el.removeEventListener('transitionend', cleanup);
+        };
+        el.addEventListener('transitionend', cleanup);
+    }
+    /** Smoothly scroll messages container to bottom over duration (ms) */
+    animateScrollToBottom(duration) {
+        if (!this.messagesContainer)
+            return;
+        const el = this.messagesContainer;
+        const start = el.scrollTop;
+        const end = el.scrollHeight - el.clientHeight;
+        if (end <= start || duration <= 0) {
+            el.scrollTop = end;
+            return;
+        }
+        const delta = end - start;
+        const startTime = performance.now();
+        const step = (now) => {
+            const t = Math.min(1, (now - startTime) / duration);
+            // easeOutCubic
+            const eased = 1 - Math.pow(1 - t, 3);
+            el.scrollTop = Math.round(start + delta * eased);
+            if (t < 1)
+                requestAnimationFrame(step);
+        };
+        requestAnimationFrame(step);
+    }
+    destroy() {
+        this.removeClickOutsideListener();
+        this.container?.remove();
+        this.container = null;
+        this.chatWindow = null;
+        this.messagesContainer = null;
+        this.input = null;
+        this.isOpen = false;
+    }
+    /** Escape HTML special characters to prevent XSS */
+    escapeHtml(text) {
+        const map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#039;',
+        };
+        return text.replace(/[&<>"']/g, (char) => map[char]);
+    }
+    /** Simple markdown renderer for AI responses */
+    renderMarkdown(text) {
+        // First escape HTML to prevent XSS
+        let html = this.escapeHtml(text);
+        // Code blocks (```lang ... ```)
+        html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (_match, lang, code) => {
+            const langClass = lang ? ` class="language-${lang}"` : '';
+            return `<pre class="foisit-code-block"><code${langClass}>${code.trim()}</code></pre>`;
+        });
+        // Inline code (`code`)
+        html = html.replace(/`([^`]+)`/g, '<code class="foisit-inline-code">$1</code>');
+        // Headings (# to ######)
+        html = html.replace(/^###### (.+)$/gm, '<h6 class="foisit-md-h6">$1</h6>');
+        html = html.replace(/^##### (.+)$/gm, '<h5 class="foisit-md-h5">$1</h5>');
+        html = html.replace(/^#### (.+)$/gm, '<h4 class="foisit-md-h4">$1</h4>');
+        html = html.replace(/^### (.+)$/gm, '<h3 class="foisit-md-h3">$1</h3>');
+        html = html.replace(/^## (.+)$/gm, '<h2 class="foisit-md-h2">$1</h2>');
+        html = html.replace(/^# (.+)$/gm, '<h1 class="foisit-md-h1">$1</h1>');
+        // Bold (**text** or __text__)
+        html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        html = html.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+        // Italic (*text* or _text_)
+        html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+        html = html.replace(/(?<!_)_([^_]+)_(?!_)/g, '<em>$1</em>');
+        // Strikethrough (~~text~~)
+        html = html.replace(/~~([^~]+)~~/g, '<del>$1</del>');
+        // Links [text](url)
+        html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="foisit-md-link">$1</a>');
+        // Unordered lists (- or *)
+        // eslint-disable-next-line no-useless-escape
+        html = html.replace(/^[\-\*] (.+)$/gm, '<li class="foisit-md-li">$1</li>');
+        html = html.replace(/(<li class="foisit-md-li">.*<\/li>\n?)+/g, (match) => `<ul class="foisit-md-ul">${match}</ul>`);
+        // Ordered lists (1. 2. etc)
+        html = html.replace(/^\d+\. (.+)$/gm, '<li class="foisit-md-li">$1</li>');
+        // Wrap consecutive <li> not already in <ul> into <ol>
+        html = html.replace(/(?<!<\/ul>)(<li class="foisit-md-li">.*<\/li>\n?)+/g, (match) => {
+            if (!match.includes('<ul')) {
+                return `<ol class="foisit-md-ol">${match}</ol>`;
+            }
+            return match;
+        });
+        // Blockquotes (> text)
+        html = html.replace(/^&gt; (.+)$/gm, '<blockquote class="foisit-md-blockquote">$1</blockquote>');
+        // Horizontal rule (--- or *** or ___)
+        html = html.replace(/^(---|___|\*\*\*)$/gm, '<hr class="foisit-md-hr">');
+        // Line breaks: convert double newlines to paragraphs, single to <br>
+        html = html.replace(/\n\n+/g, '</p><p class="foisit-md-p">');
+        html = html.replace(/\n/g, '<br>');
+        // Wrap in paragraph if not starting with block element
+        if (!html.match(/^<(h[1-6]|ul|ol|pre|blockquote|hr|p)/)) {
+            html = `<p class="foisit-md-p">${html}</p>`;
+        }
+        return html;
+    }
+    readFileAsDataURL(file) {
+        return new Promise((resolve, reject) => {
+            const fr = new FileReader();
+            fr.onerror = () => reject(new Error('Failed to read file'));
+            fr.onload = () => resolve(String(fr.result));
+            fr.readAsDataURL(file);
+        });
+    }
+    getImageDimensions(file) {
+        return new Promise((resolve) => {
+            try {
+                const url = URL.createObjectURL(file);
+                const img = new Image();
+                img.onload = () => {
+                    const dims = { width: img.naturalWidth || img.width, height: img.naturalHeight || img.height };
+                    URL.revokeObjectURL(url);
+                    resolve(dims);
+                };
+                img.onerror = () => {
+                    URL.revokeObjectURL(url);
+                    resolve({ width: 0, height: 0 });
+                };
+                img.src = url;
+            }
+            catch {
+                resolve({ width: 0, height: 0 });
+            }
+        });
+    }
+    getMediaDuration(file) {
+        return new Promise((resolve) => {
+            try {
+                const url = URL.createObjectURL(file);
+                const el = file.type.startsWith('audio') ? document.createElement('audio') : document.createElement('video');
+                let settled = false;
+                const timeout = setTimeout(() => {
+                    if (!settled) {
+                        settled = true;
+                        URL.revokeObjectURL(url);
+                        resolve(0);
+                    }
+                }, 5000);
+                el.preload = 'metadata';
+                el.onloadedmetadata = () => {
+                    if (settled)
+                        return;
+                    settled = true;
+                    clearTimeout(timeout);
+                    const mediaEl = el;
+                    const d = mediaEl.duration || 0;
+                    URL.revokeObjectURL(url);
+                    resolve(d);
+                };
+                el.onerror = () => {
+                    if (settled)
+                        return;
+                    settled = true;
+                    clearTimeout(timeout);
+                    URL.revokeObjectURL(url);
+                    resolve(0);
+                };
+                el.src = url;
+            }
+            catch {
+                resolve(0);
+            }
+        });
+    }
+    injectOverlayStyles() {
+        if (document.getElementById('foisit-overlay-styles'))
+            return;
+        const style = document.createElement('style');
+        style.id = 'foisit-overlay-styles';
+        style.textContent = `
+      :root {
+        /* LIGHT MODE (Default) - Smoother gradient */
+        /* Changed: Softer, right-focused radial highlight to avoid a heavy white bottom */
+        --foisit-bg: radial-gradient(ellipse at 75% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
+        --foisit-border: 1px solid rgba(255, 255, 255, 0.25);
+        --foisit-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+        --foisit-text: #333;
+
+        /* Input */
+        --foisit-input-color: #333;
+        --foisit-input-placeholder: rgba(60, 60, 67, 0.6);
+
+        /* Bubbles */
+        --foisit-bubble-user-bg: rgba(0, 0, 0, 0.04);
+        --foisit-bubble-user-text: #333;
+
+        --foisit-bubble-sys-bg: rgba(255, 255, 255, 0.45);
+        --foisit-bubble-sys-text: #333;
+
+        /* Form Colors */
+        --foisit-req-star: #ef4444; /* Red asterisk */
+        --foisit-error-text: #dc2626;
+        --foisit-error-border: #fca5a5;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        :root {
+          /* DARK MODE */
+          --foisit-bg: linear-gradient(135deg, rgba(40, 40, 40, 0.65), rgba(40, 40, 40, 0.25));
+          --foisit-border: 1px solid rgba(255, 255, 255, 0.1);
+          --foisit-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
+          --foisit-text: #fff;
+
+          /* Input */
+          --foisit-input-color: white;
+          --foisit-input-placeholder: rgba(235, 235, 245, 0.5);
+
+          /* Bubbles */
+          --foisit-bubble-user-bg: rgba(255, 255, 255, 0.1);
+          --foisit-bubble-user-text: white;
+
+          --foisit-bubble-sys-bg: rgba(255, 255, 255, 0.05);
+          --foisit-bubble-sys-text: rgba(255, 255, 255, 0.9);
+
+          /* Form Colors */
+          --foisit-req-star: #f87171;
+          --foisit-error-text: #fca5a5;
+          --foisit-error-border: #f87171;
+        }
+      }
+
+      @keyframes foisitPulse {
+        0%, 100% { transform: scale(0.8); opacity: 0.5; }
+        50% { transform: scale(1.2); opacity: 1; }
+      }
+
+      @keyframes foisitShake {
+        0%, 100% { transform: translateX(0); }
+        25% { transform: translateX(-4px); }
+        75% { transform: translateX(4px); }
+      }
+      .foisit-shake { animation: foisitShake 0.4s ease-in-out; }
+
+      /* Container */
+      .foisit-overlay-container {
+        position: fixed;
+        inset: 0;
+        z-index: 2147483647;
+        pointer-events: none;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        align-items: flex-end;
+        padding: 20px;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      }
+
+      .foisit-overlay-container * {
+        box-sizing: border-box;
+      }
+
+      /* Chat Window - Dynamic Height */
+      .foisit-chat {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        width: min(420px, 92vw);
+
+        /* FIX: Auto height to prevent empty space */
+        height: auto;
+        min-height: 120px;
+        max-height: 80vh;
+
+        background: var(--foisit-bg);
+        border: var(--foisit-border);
+        box-shadow: var(--foisit-shadow);
+
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+
+        border-radius: 18px;
+        display: none;
+        flex-direction: column;
+        overflow: hidden;
+        pointer-events: auto;
+        transform-origin: top right;
+        transition: opacity 0.2s, transform 0.2s cubic-bezier(0.2, 0.9, 0.2, 1);
+      }
+
+      .foisit-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 16px;
+        font-weight: 600;
+        font-size: 14px;
+        color: var(--foisit-text);
+        border-bottom: 1px solid rgba(127,127,127,0.08); /* Subtle separator */
+      }
+
+      .foisit-close {
+        background: transparent;
+        border: none;
+        color: var(--foisit-text);
+        opacity: 0.5;
+        font-size: 24px;
+        line-height: 1;
+        cursor: pointer;
+        padding: 0;
+        width: 28px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: opacity 0.2s;
+      }
+      .foisit-close:hover { opacity: 1; }
+
+      /* Message Area */
+      .foisit-messages {
+        flex: 1;
+        overflow-y: auto;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        /* Ensure it doesn't get too tall initially */
+        min-height: 60px;
+      }
+
+      /* Make sure empty state isn't huge */
+      .foisit-messages:empty {
+        display: none;
+      }
+
+      /* Only show messages container if it has children */
+      .foisit-messages:not(:empty) {
+        display: flex;
+      }
+
+      /* Bubbles */
+      .foisit-bubble {
+        max-width: 90%;
+        padding: 8px 14px;
+        border-radius: 14px;
+        font-size: 14px;
+        line-height: 1.4;
+        word-wrap: break-word;
+      }
+
+      .foisit-bubble.user {
+        align-self: flex-end;
+        background: var(--foisit-bubble-user-bg);
+        color: var(--foisit-bubble-user-text);
+        border-bottom-right-radius: 4px;
+      }
+
+      .foisit-bubble.system {
+        align-self: flex-start;
+        background: var(--foisit-bubble-sys-bg);
+        color: var(--foisit-bubble-sys-text);
+        border-bottom-left-radius: 4px;
+        border: 1px solid rgba(255,255,255,0.1);
+      }
+
+      /* Input Area */
+      .foisit-input-area {
+        padding: 0;
+        width: 100%;
+        border-top: 1px solid rgba(127,127,127,0.08);
+      }
+
+      .foisit-input {
+        width: 100%;
+        background: transparent;
+        border: none;
+        font-size: 16px;
+        color: var(--foisit-input-color);
+        padding: 16px 20px;
+        outline: none;
+        text-align: left;
+      }
+
+      .foisit-input::placeholder {
+        color: var(--foisit-input-placeholder);
+        font-weight: 400;
+      }
+
+      /* Options & Buttons */
+      .foisit-options-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-left: 2px;
+        margin-top: 4px;
+      }
+
+      .foisit-option-chip {
+        padding: 6px 14px;
+        background: var(--foisit-bubble-sys-bg);
+        border: 1px solid rgba(127,127,127,0.1);
+        border-radius: 20px;
+        font-size: 13px;
+        color: var(--foisit-text);
+        cursor: pointer;
+        transition: all 0.2s;
+        font-weight: 500;
+      }
+      .foisit-option-chip:hover {
+        background: rgba(127,127,127,0.15);
+      }
+
+      /* Form Styling */
+      .foisit-form {
+        background: var(--foisit-bubble-sys-bg);
+        padding: 16px;
+        border-radius: 14px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        width: 100%;
+        border: 1px solid rgba(127,127,127,0.1);
+      }
+
+      .foisit-form-label {
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--foisit-text);
+        opacity: 0.9;
+        margin-bottom: 2px;
+      }
+
+      .foisit-req-star {
+        color: var(--foisit-req-star);
+        font-weight: bold;
+      }
+
+      .foisit-form-input {
+        width: 100%;
+        padding: 10px;
+        border-radius: 8px;
+        border: 1px solid rgba(127,127,127,0.2);
+        background: rgba(255,255,255,0.05); /* Very subtle fill */
+        color: var(--foisit-text);
+        font-size: 14px;
+        outline: none;
+        transition: border 0.2s;
+      }
+      .foisit-form-input:focus {
+        border-color: var(--foisit-text);
+        background: rgba(255,255,255,0.1);
+      }
+
+      .foisit-error-border {
+        border-color: var(--foisit-error-border) !important;
+      }
+
+      .foisit-form-error {
+        font-size: 11px;
+        color: var(--foisit-error-text);
+        margin-top: 4px;
+      }
+
+      /* Loading */
+      .foisit-loading-dots {
+        display: inline-flex;
+        gap: 4px;
+        padding: 10px 14px;
+        align-self: flex-start;
+      }
+      .foisit-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--foisit-text);
+        opacity: 0.4;
+      }
+
+      /* Floating Button */
+      .foisit-floating-btn {
+        position: absolute;
+        width: 56px;
+        height: 56px;
+        border-radius: 50%;
+        border: 1px solid rgba(255,255,255,0.2);
+        background: var(--foisit-bg);
+        color: var(--foisit-text);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        cursor: pointer;
+        pointer-events: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+        z-index: 100000;
+        transition: transform 0.2s;
+      }
+      .foisit-floating-btn:hover { transform: scale(1.05); }
+
+      /* Markdown Styles */
+      .foisit-bubble.system .foisit-md-p { margin: 0 0 0.5em 0; }
+      .foisit-bubble.system .foisit-md-p:last-child { margin-bottom: 0; }
+
+      .foisit-bubble.system .foisit-md-h1,
+      .foisit-bubble.system .foisit-md-h2,
+      .foisit-bubble.system .foisit-md-h3,
+      .foisit-bubble.system .foisit-md-h4,
+      .foisit-bubble.system .foisit-md-h5,
+      .foisit-bubble.system .foisit-md-h6 {
+        margin: 0.8em 0 0.4em 0;
+        font-weight: 600;
+        line-height: 1.3;
+      }
+      .foisit-bubble.system .foisit-md-h1:first-child,
+      .foisit-bubble.system .foisit-md-h2:first-child,
+      .foisit-bubble.system .foisit-md-h3:first-child { margin-top: 0; }
+
+      .foisit-bubble.system .foisit-md-h1 { font-size: 1.4em; }
+      .foisit-bubble.system .foisit-md-h2 { font-size: 1.25em; }
+      .foisit-bubble.system .foisit-md-h3 { font-size: 1.1em; }
+      .foisit-bubble.system .foisit-md-h4 { font-size: 1em; }
+      .foisit-bubble.system .foisit-md-h5 { font-size: 0.95em; }
+      .foisit-bubble.system .foisit-md-h6 { font-size: 0.9em; opacity: 0.85; }
+
+      .foisit-bubble.system .foisit-md-ul,
+      .foisit-bubble.system .foisit-md-ol {
+        margin: 0.5em 0;
+        padding-left: 1.5em;
+      }
+      .foisit-bubble.system .foisit-md-li { margin: 0.25em 0; }
+
+      .foisit-bubble.system .foisit-code-block {
+        background: rgba(0,0,0,0.15);
+        border-radius: 6px;
+        padding: 10px 12px;
+        margin: 0.5em 0;
+        overflow-x: auto;
+        font-family: 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+        font-size: 0.85em;
+        line-height: 1.4;
+      }
+      .foisit-bubble.system .foisit-code-block code {
+        background: transparent;
+        padding: 0;
+      }
+
+      .foisit-bubble.system .foisit-inline-code {
+        background: rgba(0,0,0,0.1);
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+        font-size: 0.9em;
+      }
+
+      .foisit-bubble.system .foisit-md-blockquote {
+        border-left: 3px solid rgba(127,127,127,0.4);
+        margin: 0.5em 0;
+        padding-left: 12px;
+        opacity: 0.9;
+        font-style: italic;
+      }
+
+      .foisit-bubble.system .foisit-md-link {
+        color: inherit;
+        text-decoration: underline;
+        opacity: 0.9;
+      }
+      .foisit-bubble.system .foisit-md-link:hover { opacity: 1; }
+
+      .foisit-bubble.system .foisit-md-hr {
+        border: none;
+        border-top: 1px solid rgba(127,127,127,0.3);
+        margin: 0.8em 0;
+      }
+
+      .foisit-bubble.system strong { font-weight: 600; }
+      .foisit-bubble.system em { font-style: italic; }
+      .foisit-bubble.system del { text-decoration: line-through; opacity: 0.7; }
+
+      @media (prefers-color-scheme: dark) {
+        .foisit-bubble.system .foisit-code-block { background: rgba(255,255,255,0.08); }
+        .foisit-bubble.system .foisit-inline-code { background: rgba(255,255,255,0.1); }
+      }
+    `;
+        document.head.appendChild(style);
+    }
+}
+
 class AssistantService {
     config;
     commandHandler;