@genesislcap/ai-assistant 14.403.0-ai-assistant.1

package/dist/esm/main/main.js

@@ -0,0 +1,491 @@
+var FoundationAiAssistant_1;
+import { __awaiter, __decorate } from "tslib";
+import { AIProvider } from '@genesislcap/foundation-ai';
+import { createTypedBroadcastChannel } from '@genesislcap/foundation-broadcast-channel';
+import { customElement, html, GenesisElement, observable, volatile, attr, } from '@genesislcap/web-core';
+import { AI_ACTIVITY_CHANNEL_NAME } from '../channel/ai-activity-channel';
+import { ChatDriver } from '../components/chat-driver/chat-driver';
+import { AiChatInteractionWrapper } from '../components/chat-interaction-wrapper/chat-interaction-wrapper';
+import { AiChatMarkdown } from '../components/chat-markdown/chat-markdown';
+import { AiHaloOverlay } from '../components/halo-overlay';
+import { logger } from '../utils/logger';
+import { styles } from './main.styles';
+import { FoundationAiAssistantTemplate } from './main.template';
+import { ALL_ANIMATIONS } from './main.types';
+AiChatMarkdown;
+AiChatInteractionWrapper;
+AiHaloOverlay;
+/**
+ * Foundation AI Assistant component.
+ *
+ * @remarks
+ * Lazy-loaded via `configure()`. Inject an `AIProvider` and `AiAssistantConfig` through the DI
+ * container. The component creates a `ChatDriver` to manage the conversation loop.
+ *
+ * @beta
+ */
+let FoundationAiAssistant = FoundationAiAssistant_1 = class FoundationAiAssistant extends GenesisElement {
+    constructor() {
+        super(...arguments);
+        this.designSystemPrefix = 'rapid';
+        this.channelName = AI_ACTIVITY_CHANNEL_NAME;
+        this.placeholder = 'Message assistant...';
+        this.chatConfig = {};
+        this.messages = [];
+        this.state = 'idle';
+        this.inputValue = '';
+        this.attachments = [];
+        this.attachmentErrors = [];
+        /** Current user-facing toggle state for tool call visibility. */
+        this.showToolCalls = false;
+        /** Current user-facing toggle state for thinking step visibility. */
+        this.showThinkingSteps = false;
+        /** Currently enabled animations. */
+        this.enabledAnimations = [];
+        /** Whether the loading spinner is currently visible. Controlled by the loading delay timer. */
+        this.showLoadingIndicator = false;
+        /** Whether the settings panel is open. */
+        this.settingsOpen = false;
+        this.haloStartPublished = false;
+        /**
+         * Whether the halo animation should be shown.
+         * True when the AI is actively computing (loading state, no pending interaction).
+         */
+        this.showHalo = false;
+        this.onChannelMessage = (event) => {
+            var _a, _b;
+            if (((_a = event.data) === null || _a === void 0 ? void 0 : _a.type) === 'chat-popin' && ((_b = event.data.detail) === null || _b === void 0 ? void 0 : _b.state)) {
+                this.applyState(event.data.detail.state);
+            }
+        };
+    }
+    syncShowHalo() {
+        if (this.state !== 'loading') {
+            this.showHalo = false;
+            return;
+        }
+        const last = this.messages[this.messages.length - 1];
+        this.showHalo = !(last === null || last === void 0 ? void 0 : last.interaction);
+    }
+    /** True when there is a pending (unresolved) interaction — disables the popout button. */
+    get hasActivePendingInteraction() {
+        if (this.state !== 'loading')
+            return false;
+        const last = this.messages[this.messages.length - 1];
+        return !!(last === null || last === void 0 ? void 0 : last.interaction) && !last.interaction.resolved;
+    }
+    showHaloChanged() {
+        var _a, _b;
+        if (!((_a = this.enabledAnimations) === null || _a === void 0 ? void 0 : _a.includes('halo')))
+            return;
+        if (!this.showHalo) {
+            (_b = this.activityChannel) === null || _b === void 0 ? void 0 : _b.postMessage('halo-stop');
+            this.haloStartPublished = false;
+        }
+        // halo-start is published exclusively from messagesChanged when toolCalls arrive,
+        // so we never re-activate grids on non-toolCall transitions (e.g. tool results
+        // arriving after an interaction resolves).
+    }
+    getActiveToolNames() {
+        var _a;
+        for (let i = this.messages.length - 1; i >= 0; i -= 1) {
+            const msg = this.messages[i];
+            if ((_a = msg.toolCalls) === null || _a === void 0 ? void 0 : _a.length) {
+                return msg.toolCalls.map((tc) => tc.name);
+            }
+        }
+        return [];
+    }
+    /**
+     * Messages filtered by the current toggle state.
+     * Tool-related messages (those with toolCalls or toolResult) are hidden when
+     * `showToolCalls` is false.
+     */
+    get visibleMessages() {
+        return this.messages.filter((m) => {
+            var _a, _b, _c;
+            // Never show tool messages to the user
+            if (m.role === 'tool') {
+                return false;
+            }
+            // Filter thinking messages based on toggle
+            if (m.thinking && !this.showThinkingSteps) {
+                return false;
+            }
+            // Filter out empty assistant messages that might have slipped through
+            if (m.role === 'assistant' && !((_a = m.content) === null || _a === void 0 ? void 0 : _a.trim()) && !((_b = m.toolCalls) === null || _b === void 0 ? void 0 : _b.length) && !m.interaction) {
+                return false;
+            }
+            const isToolRelated = !!(((_c = m.toolCalls) === null || _c === void 0 ? void 0 : _c.length) || m.toolResult);
+            return !isToolRelated || this.showToolCalls;
+        });
+    }
+    connectedCallback() {
+        var _a, _b, _c;
+        super.connectedCallback();
+        this.activityChannel = createTypedBroadcastChannel(this.channelName);
+        const { showToolCalls, showThinkingSteps, animations } = this.chatConfig;
+        this.showToolCalls = showToolCalls === true;
+        this.showThinkingSteps = showThinkingSteps === true;
+        this.enabledAnimations =
+            (_a = animations === null || animations === void 0 ? void 0 : animations.enabled) !== null && _a !== void 0 ? _a : (animations ? [...ALL_ANIMATIONS] : []);
+        this.driver = new ChatDriver(this.aiProvider, (_b = this.toolHandlers) !== null && _b !== void 0 ? _b : {}, (_c = this.toolDefinitions) !== null && _c !== void 0 ? _c : [], this.systemPrompt);
+        this.driver.addEventListener('history-updated', (e) => {
+            this.messages = [...e.detail];
+        });
+        // When embedded in a bubble (expand mode), listen for chat-popin to restore state
+        // when the layout panel collapses back.
+        if (this.popoutMode === 'expand') {
+            this.activityChannel.addEventListener('message', this.onChannelMessage);
+        }
+        logger.debug('FoundationAiAssistant connected');
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        super.disconnectedCallback();
+        this.stopLoadingTimer();
+        this.state = 'idle';
+        (_a = this.activityChannel) === null || _a === void 0 ? void 0 : _a.removeEventListener('message', this.onChannelMessage);
+        (_b = this.activityChannel) === null || _b === void 0 ? void 0 : _b.close();
+        this.activityChannel = undefined;
+        this.driver = undefined;
+    }
+    stateChanged() {
+        this.syncShowHalo();
+    }
+    messagesChanged() {
+        var _a, _b, _c, _d;
+        // Reset the loading timer when an assistant message arrives mid-loop so each
+        // individual step gets a fresh window before the spinner appears.
+        // If the last message is a blocking interaction, stop the timer — the AI is
+        // waiting for the user, not computing.
+        if (this.state === 'loading') {
+            const last = this.messages[this.messages.length - 1];
+            if (last === null || last === void 0 ? void 0 : last.interaction) {
+                this.stopLoadingTimer();
+            }
+            else if ((last === null || last === void 0 ? void 0 : last.role) === 'assistant') {
+                this.startLoadingTimer();
+            }
+        }
+        this.syncShowHalo();
+        // Publish halo-start whenever a new toolCalls message arrives.
+        // If we've already published one this turn, send halo-stop first so grids
+        // not relevant to the new tools begin deactivating (fix #2).
+        // Never publish with empty toolNames (fix #3).
+        if (this.showHalo && ((_a = this.enabledAnimations) === null || _a === void 0 ? void 0 : _a.includes('halo'))) {
+            const last = this.messages[this.messages.length - 1];
+            if ((_b = last === null || last === void 0 ? void 0 : last.toolCalls) === null || _b === void 0 ? void 0 : _b.length) {
+                const toolNames = this.getActiveToolNames();
+                if (toolNames.length) {
+                    if (this.haloStartPublished) {
+                        (_c = this.activityChannel) === null || _c === void 0 ? void 0 : _c.postMessage('halo-stop');
+                    }
+                    (_d = this.activityChannel) === null || _d === void 0 ? void 0 : _d.postMessage('halo-start', { toolNames });
+                    this.haloStartPublished = true;
+                }
+            }
+        }
+        this.scrollToBottom();
+    }
+    showLoadingIndicatorChanged() {
+        // Scroll to bottom when the spinner appears so it is visible.
+        if (this.showLoadingIndicator) {
+            this.scrollToBottom();
+        }
+    }
+    // Double rAF: first frame lets the framework flush the DOM update,
+    // second frame reads the correct scrollHeight after layout.
+    scrollToBottom() {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                var _a;
+                const el = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.messages');
+                if (el)
+                    el.scrollTop = el.scrollHeight;
+            });
+        });
+    }
+    startLoadingTimer() {
+        var _a;
+        this.clearLoadingTimer();
+        const delay = (_a = this.chatConfig.loadingDelay) !== null && _a !== void 0 ? _a : FoundationAiAssistant_1.DEFAULT_LOADING_DELAY_S;
+        if (delay === 0) {
+            this.showLoadingIndicator = true;
+        }
+        else {
+            this.loadingTimer = setTimeout(() => {
+                this.showLoadingIndicator = true;
+            }, delay * FoundationAiAssistant_1.MS_PER_SECOND);
+        }
+    }
+    clearLoadingTimer() {
+        if (this.loadingTimer !== undefined) {
+            clearTimeout(this.loadingTimer);
+            this.loadingTimer = undefined;
+        }
+    }
+    stopLoadingTimer() {
+        this.clearLoadingTimer();
+        this.showLoadingIndicator = false;
+    }
+    /** Called when the user clicks the popout button. */
+    handlePopout() {
+        var _a, _b;
+        if (this.popoutMode === 'expand') {
+            (_a = this.activityChannel) === null || _a === void 0 ? void 0 : _a.postMessage('chat-popout', { state: this.serializeState() });
+        }
+        else if (this.popoutMode === 'collapse') {
+            (_b = this.activityChannel) === null || _b === void 0 ? void 0 : _b.postMessage('chat-popin', { state: this.serializeState() });
+        }
+    }
+    /** Applies a serialized state snapshot to this live instance (used on collapse path). */
+    applyState(state) {
+        var _a;
+        this.messages = [...state.messages];
+        this.showToolCalls = state.showToolCalls;
+        this.showThinkingSteps = state.showThinkingSteps;
+        this.enabledAnimations = [...state.enabledAnimations];
+        (_a = this.driver) === null || _a === void 0 ? void 0 : _a.loadHistory(state.messages);
+    }
+    serializeState() {
+        return {
+            messages: [...this.messages],
+            showToolCalls: this.showToolCalls,
+            showThinkingSteps: this.showThinkingSteps,
+            enabledAnimations: [...this.enabledAnimations],
+        };
+    }
+    toggleSettings() {
+        this.settingsOpen = !this.settingsOpen;
+    }
+    toggleShowToolCalls() {
+        this.showToolCalls = !this.showToolCalls;
+    }
+    toggleShowThinkingSteps() {
+        this.showThinkingSteps = !this.showThinkingSteps;
+    }
+    setEnabledAnimations(animations) {
+        this.enabledAnimations = animations;
+    }
+    downloadHistory() {
+        var _a, _b;
+        const timestamp = new Date().toISOString().replace(/:/g, '-');
+        const agentName = ((_a = this.headerTitle) !== null && _a !== void 0 ? _a : 'chat').toLowerCase().replace(/\s+/g, '-');
+        const payload = {
+            messages: this.messages,
+            debug: (_b = this.debugStateFactory) === null || _b === void 0 ? void 0 : _b.call(this),
+        };
+        const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${agentName}-${timestamp}.json`;
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+    triggerFileInput() {
+        var _a, _b;
+        (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.file-input')) === null || _b === void 0 ? void 0 : _b.click();
+    }
+    handleFileSelect(e) {
+        void this.loadSelectedFiles(e);
+    }
+    removeAttachment(attachment) {
+        this.attachments = this.attachments.filter((a) => a !== attachment);
+    }
+    removeAttachmentError(message) {
+        const idx = this.attachmentErrors.indexOf(message);
+        if (idx !== -1) {
+            this.attachmentErrors = [
+                ...this.attachmentErrors.slice(0, idx),
+                ...this.attachmentErrors.slice(idx + 1),
+            ];
+        }
+    }
+    isAcceptedFile(file) {
+        var _a, _b;
+        const accepted = this.chatConfig.acceptedFiles;
+        if (!accepted)
+            return false;
+        const acceptedList = accepted.split(',').map((s) => s.trim().toLowerCase());
+        const ext = `.${(_b = (_a = file.name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : ''}`;
+        return acceptedList.some((a) => a === ext ||
+            a === file.type ||
+            (a.endsWith('/*') && file.type.startsWith(a.replace('/*', '/'))));
+    }
+    readFileAsText(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = () => reject(new Error(`Failed to read file: ${file.name}`));
+            reader.readAsText(file);
+        });
+    }
+    loadSelectedFiles(e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const input = e.target;
+            const files = Array.from((_a = input.files) !== null && _a !== void 0 ? _a : []);
+            input.value = '';
+            const results = yield Promise.all(files.map((file) => __awaiter(this, void 0, void 0, function* () {
+                if (!this.isAcceptedFile(file)) {
+                    return { ok: false, message: `"${file.name}" is not an accepted file type.` };
+                }
+                try {
+                    const content = yield this.readFileAsText(file);
+                    return {
+                        ok: true,
+                        attachment: { name: file.name, content, mimeType: file.type || 'text/plain' },
+                    };
+                }
+                catch (readError) {
+                    logger.error('Failed to read file:', readError);
+                    return { ok: false, message: `Failed to read "${file.name}".` };
+                }
+            })));
+            const newAttachments = results
+                .filter((r) => r.ok)
+                .map((r) => r.attachment);
+            const newErrors = results
+                .filter((r) => !r.ok)
+                .map((r) => r.message);
+            if (newAttachments.length)
+                this.attachments = [...this.attachments, ...newAttachments];
+            if (newErrors.length)
+                this.attachmentErrors = [...this.attachmentErrors, ...newErrors];
+        });
+    }
+    handleSendClick() {
+        this.send();
+    }
+    send() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const input = this.inputValue.trim();
+            if ((!input && !this.attachments.length) || this.state === 'loading')
+                return;
+            const pendingAttachments = this.attachments.length ? [...this.attachments] : undefined;
+            this.inputValue = '';
+            this.attachments = [];
+            this.attachmentErrors = [];
+            this.state = 'loading';
+            this.startLoadingTimer();
+            const displayInput = (pendingAttachments === null || pendingAttachments === void 0 ? void 0 : pendingAttachments.length)
+                ? `${input}\n\n*Attached: ${pendingAttachments.map((a) => a.name).join(', ')}*`
+                : input;
+            try {
+                yield ((_a = this.driver) === null || _a === void 0 ? void 0 : _a.sendMessage(displayInput, pendingAttachments));
+            }
+            finally {
+                this.stopLoadingTimer();
+                this.state = 'idle';
+            }
+        });
+    }
+    onChatHeaderMouseDown(e) {
+        if (this.popoutMode !== 'expand')
+            return;
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('chat-header-mousedown', {
+            bubbles: true,
+            composed: true,
+            detail: { clientX: e.clientX, clientY: e.clientY },
+        }));
+    }
+    handleInteractionCompleted(e) {
+        var _a;
+        const detail = e.detail;
+        if (detail && detail.interactionId) {
+            this.startLoadingTimer();
+            (_a = this.driver) === null || _a === void 0 ? void 0 : _a.resolveInteraction(detail.interactionId, detail);
+        }
+    }
+};
+FoundationAiAssistant.DEFAULT_LOADING_DELAY_S = 5;
+FoundationAiAssistant.MS_PER_SECOND = 1000;
+__decorate([
+    AIProvider
+], FoundationAiAssistant.prototype, "aiProvider", void 0);
+__decorate([
+    observable
+], FoundationAiAssistant.prototype, "designSystemPrefix", void 0);
+__decorate([
+    attr({ attribute: 'header-title' })
+], FoundationAiAssistant.prototype, "headerTitle", void 0);
+__decorate([
+    attr({ attribute: 'channel-name' })
+], FoundationAiAssistant.prototype, "channelName", void 0);
+__decorate([
+    attr({ attribute: 'image-src' })
+], FoundationAiAssistant.prototype, "imageSrc", void 0);
+__decorate([
+    attr()
+], FoundationAiAssistant.prototype, "placeholder", void 0);
+__decorate([
+    attr({ attribute: 'popout-mode' })
+], FoundationAiAssistant.prototype, "popoutMode", void 0);
+__decorate([
+    observable
+], FoundationAiAssistant.prototype, "systemPrompt", void 0);
+__decorate([
+    observable
+], FoundationAiAssistant.prototype, "toolDefinitions", void 0);
+__decorate([
+    observable
+], FoundationAiAssistant.prototype, "toolHandlers", void 0);
+__decorate([
+    observable
+], FoundationAiAssistant.prototype, "chatConfig", void 0);
+__decorate([
+    observable
+], FoundationAiAssistant.prototype, "debugStateFactory", void 0);
+__decorate([
+    observable
+], FoundationAiAssistant.prototype, "messages", void 0);
+__decorate([
+    observable
+], FoundationAiAssistant.prototype, "state", void 0);
+__decorate([
+    observable
+], FoundationAiAssistant.prototype, "inputValue", void 0);
+__decorate([
+    observable
+], FoundationAiAssistant.prototype, "attachments", void 0);
+__decorate([
+    observable
+], FoundationAiAssistant.prototype, "attachmentErrors", void 0);
+__decorate([
+    observable
+], FoundationAiAssistant.prototype, "showToolCalls", void 0);
+__decorate([
+    observable
+], FoundationAiAssistant.prototype, "showThinkingSteps", void 0);
+__decorate([
+    observable
+], FoundationAiAssistant.prototype, "enabledAnimations", void 0);
+__decorate([
+    observable
+], FoundationAiAssistant.prototype, "showLoadingIndicator", void 0);
+__decorate([
+    observable
+], FoundationAiAssistant.prototype, "settingsOpen", void 0);
+__decorate([
+    observable
+], FoundationAiAssistant.prototype, "showHalo", void 0);
+__decorate([
+    volatile
+], FoundationAiAssistant.prototype, "hasActivePendingInteraction", null);
+__decorate([
+    volatile
+], FoundationAiAssistant.prototype, "visibleMessages", null);
+FoundationAiAssistant = FoundationAiAssistant_1 = __decorate([
+    customElement({
+        name: 'foundation-ai-assistant',
+        template: html `
+    ${(x) => FoundationAiAssistantTemplate(x.designSystemPrefix)}
+  `,
+        styles,
+    })
+], FoundationAiAssistant);
+export { FoundationAiAssistant };