import { Component, ViewChild } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { RunView } from '@memberjunction/core';
import * as i0 from "@angular/core";
import * as i1 from "../../services/component-studio-state.service";
import * as i2 from "@angular/forms";
const _c0 = ["chatThread"];
const _c1 = ["chatInput"];
const _forTrack0 = ($index, $item) => $item.Label;
const _forTrack1 = ($index, $item) => $item.ID;
function AIAssistantPanelComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 11);
    i0.ɵɵelement(1, "i", 25);
    i0.ɵɵelementStart(2, "span");
    i0.ɵɵtext(3, "Loading models...");
    i0.ɵɵelementEnd()();
} }
function AIAssistantPanelComponent_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "option", 27);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const model_r4 = ctx.$implicit;
    i0.ɵɵproperty("value", model_r4.ID);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(model_r4.DisplayLabel);
} }
function AIAssistantPanelComponent_Conditional_13_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "option", 28);
    i0.ɵɵtext(1, "No models available");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    i0.ɵɵproperty("value", null);
} }
function AIAssistantPanelComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
    const _r2 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "select", 26);
    i0.ɵɵtwoWayListener("ngModelChange", function AIAssistantPanelComponent_Conditional_13_Template_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.SelectedModelID, $event) || (ctx_r2.SelectedModelID = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵrepeaterCreate(1, AIAssistantPanelComponent_Conditional_13_For_2_Template, 2, 2, "option", 27, _forTrack1);
    i0.ɵɵconditionalCreate(3, AIAssistantPanelComponent_Conditional_13_Conditional_3_Template, 2, 1, "option", 28);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.SelectedModelID);
    i0.ɵɵproperty("disabled", ctx_r2.AvailableModels.length === 0);
    i0.ɵɵadvance();
    i0.ɵɵrepeater(ctx_r2.AvailableModels);
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r2.AvailableModels.length === 0 ? 3 : -1);
} }
function AIAssistantPanelComponent_For_16_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 29);
    i0.ɵɵlistener("click", function AIAssistantPanelComponent_For_16_Template_button_click_0_listener() { const action_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnQuickAction(action_r6)); });
    i0.ɵɵelement(1, "i");
    i0.ɵɵelementStart(2, "span");
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const action_r6 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵclassProp("disabled", !ctx_r2.IsQuickActionEnabled(action_r6));
    i0.ɵɵproperty("disabled", !ctx_r2.IsQuickActionEnabled(action_r6) || ctx_r2.IsWaitingForResponse)("title", action_r6.Label);
    i0.ɵɵadvance();
    i0.ɵɵclassMap(i0.ɵɵinterpolate1("fa-solid ", action_r6.Icon));
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(action_r6.Label);
} }
function AIAssistantPanelComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 16);
    i0.ɵɵelement(1, "i", 30);
    i0.ɵɵelementStart(2, "p");
    i0.ɵɵtext(3, "No messages yet. Start a conversation or use a quick action above.");
    i0.ɵɵelementEnd()();
} }
function AIAssistantPanelComponent_For_21_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 32);
    i0.ɵɵelement(1, "i", 5);
    i0.ɵɵelementEnd();
} }
function AIAssistantPanelComponent_For_21_Conditional_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 36);
    i0.ɵɵelement(1, "i", 37);
    i0.ɵɵelementEnd();
} }
function AIAssistantPanelComponent_For_21_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 31);
    i0.ɵɵconditionalCreate(1, AIAssistantPanelComponent_For_21_Conditional_1_Template, 2, 0, "div", 32);
    i0.ɵɵelementStart(2, "div", 33)(3, "div", 34);
    i0.ɵɵtext(4);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "div", 35);
    i0.ɵɵtext(6);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(7, AIAssistantPanelComponent_For_21_Conditional_7_Template, 2, 0, "div", 36);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const message_r7 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵclassProp("user", message_r7.Role === "user")("assistant", message_r7.Role === "assistant")("system", message_r7.Role === "system");
    i0.ɵɵadvance();
    i0.ɵɵconditional(message_r7.Role === "assistant" ? 1 : -1);
    i0.ɵɵadvance();
    i0.ɵɵclassProp("user-bubble", message_r7.Role === "user")("assistant-bubble", message_r7.Role === "assistant")("system-bubble", message_r7.Role === "system");
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(message_r7.Content);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r2.FormatTimestamp(message_r7.Timestamp));
    i0.ɵɵadvance();
    i0.ɵɵconditional(message_r7.Role === "user" ? 7 : -1);
} }
function AIAssistantPanelComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 18)(1, "div", 32);
    i0.ɵɵelement(2, "i", 5);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "div", 38)(4, "div", 39);
    i0.ɵɵelement(5, "span", 40)(6, "span", 40)(7, "span", 40);
    i0.ɵɵelementEnd()()();
} }
export class AIAssistantPanelComponent {
    State;
    cdr;
    chatThreadEl;
    chatInputEl;
    // --- Chat State ---
    Messages = [];
    InputText = '';
    IsWaitingForResponse = false;
    // --- Model Selector ---
    AvailableModels = [];
    SelectedModelID = null;
    IsLoadingModels = false;
    // --- Quick Actions ---
    QuickActions = [
        { Label: 'Fix Errors', Icon: 'fa-bug', Prompt: 'Fix this error: ', RequiresError: true },
        { Label: 'Improve Code', Icon: 'fa-magic', Prompt: 'Review and improve the current component code. Suggest optimizations, better patterns, and cleaner structure.', RequiresError: false },
        { Label: 'Generate Code', Icon: 'fa-code', Prompt: 'Generate code for the current component based on its specification.', RequiresError: false },
        { Label: 'Explain', Icon: 'fa-question-circle', Prompt: 'Explain what the current component does, including its structure, data flow, and key behaviors.', RequiresError: false }
    ];
    destroy$ = new Subject();
    constructor(State, cdr) {
        this.State = State;
        this.cdr = cdr;
    }
    async ngOnInit() {
        this.subscribeToErrorEvents();
        await this.LoadModels();
        this.addWelcomeMessage();
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    // ============================================================
    // MODEL LOADING
    // ============================================================
    async LoadModels() {
        this.IsLoadingModels = true;
        try {
            const rv = new RunView();
            const result = await rv.RunView({
                EntityName: 'MJ: AI Models',
                ExtraFilter: `IsActive = 1 AND AIModelTypeID IN (SELECT ID FROM __mj.vwAIModelTypes WHERE Name = 'LLM')`,
                OrderBy: 'PowerRank DESC, Name ASC',
                ResultType: 'entity_object'
            });
            if (result.Success && result.Results) {
                this.AvailableModels = result.Results.map(model => ({
                    ID: model.ID,
                    Name: model.Name,
                    Vendor: model.Vendor,
                    DisplayLabel: model.Vendor ? `${model.Name} (${model.Vendor})` : model.Name
                }));
                if (this.AvailableModels.length > 0) {
                    this.SelectedModelID = this.AvailableModels[0].ID;
                }
            }
        }
        catch (error) {
            console.error('Error loading AI models:', error);
        }
        finally {
            this.IsLoadingModels = false;
            this.cdr.detectChanges();
        }
    }
    // ============================================================
    // ERROR SUBSCRIPTION
    // ============================================================
    subscribeToErrorEvents() {
        this.State.SendErrorToAI
            .pipe(takeUntil(this.destroy$))
            .subscribe((error) => {
            this.handleIncomingError(error);
        });
    }
    handleIncomingError(error) {
        const errorDetails = error.technicalDetails
            ? (typeof error.technicalDetails === 'string' ? error.technicalDetails : JSON.stringify(error.technicalDetails, null, 2))
            : '';
        const systemContent = `Error detected [${error.type}]: ${error.message}${errorDetails ? '\n\nDetails:\n' + errorDetails : ''}`;
        this.addMessage('system', systemContent);
        this.InputText = `Fix this error: ${error.type} - ${error.message}`;
        this.cdr.detectChanges();
        this.focusInput();
    }
    // ============================================================
    // WELCOME MESSAGE
    // ============================================================
    addWelcomeMessage() {
        this.addMessage('assistant', 'Welcome to the Component Studio AI Assistant. I can help you fix errors, improve code, generate components, and explain how things work. Select a component and ask me anything!');
    }
    // ============================================================
    // CHAT ACTIONS
    // ============================================================
    OnSendMessage() {
        const text = this.InputText.trim();
        if (!text || this.IsWaitingForResponse)
            return;
        this.addMessage('user', text);
        this.InputText = '';
        this.resetInputHeight();
        this.simulateResponse(text);
    }
    OnQuickAction(action) {
        if (action.RequiresError && !this.State.CurrentError)
            return;
        if (action.RequiresError && this.State.CurrentError) {
            const errorContext = `${this.State.CurrentError.type} - ${this.State.CurrentError.message}`;
            this.InputText = `${action.Prompt}${errorContext}`;
        }
        else {
            this.InputText = action.Prompt;
        }
        this.cdr.detectChanges();
        this.focusInput();
    }
    OnInputKeydown(event) {
        if (event.key === 'Enter' && !event.shiftKey) {
            event.preventDefault();
            this.OnSendMessage();
        }
    }
    OnInputChange() {
        this.autoGrowTextarea();
    }
    OnCollapsePanel() {
        this.State.IsAIPanelCollapsed = true;
        this.State.StateChanged.emit();
    }
    IsQuickActionEnabled(action) {
        if (action.RequiresError) {
            return this.State.CurrentError != null;
        }
        return true;
    }
    // ============================================================
    // MESSAGE MANAGEMENT
    // ============================================================
    addMessage(role, content) {
        this.Messages.push({
            Role: role,
            Content: content,
            Timestamp: new Date()
        });
        this.cdr.detectChanges();
        this.scrollToBottom();
    }
    simulateResponse(userMessage) {
        this.IsWaitingForResponse = true;
        this.cdr.detectChanges();
        this.scrollToBottom();
        setTimeout(() => {
            this.addMessage('assistant', 'AI assistant coming soon \u2014 agent integration in progress. Your message has been received and will be processed once the AI backend is connected.');
            this.IsWaitingForResponse = false;
            this.cdr.detectChanges();
        }, 1000);
    }
    // ============================================================
    // UI HELPERS
    // ============================================================
    scrollToBottom() {
        Promise.resolve().then(() => {
            if (this.chatThreadEl) {
                const el = this.chatThreadEl.nativeElement;
                el.scrollTop = el.scrollHeight;
            }
        });
    }
    focusInput() {
        Promise.resolve().then(() => {
            if (this.chatInputEl) {
                this.chatInputEl.nativeElement.focus();
            }
        });
    }
    autoGrowTextarea() {
        if (!this.chatInputEl)
            return;
        const textarea = this.chatInputEl.nativeElement;
        textarea.style.height = 'auto';
        const lineHeight = 20;
        const maxLines = 4;
        const maxHeight = lineHeight * maxLines;
        textarea.style.height = Math.min(textarea.scrollHeight, maxHeight) + 'px';
    }
    resetInputHeight() {
        if (!this.chatInputEl)
            return;
        this.chatInputEl.nativeElement.style.height = 'auto';
    }
    FormatTimestamp(date) {
        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    }
    TrackByTimestamp(index, message) {
        return message.Timestamp.getTime();
    }
    static ɵfac = function AIAssistantPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AIAssistantPanelComponent)(i0.ɵɵdirectiveInject(i1.ComponentStudioStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAssistantPanelComponent, selectors: [["mj-ai-assistant-panel"]], viewQuery: function AIAssistantPanelComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(_c0, 5)(_c1, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chatThreadEl = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chatInputEl = _t.first);
        } }, standalone: false, decls: 38, vars: 8, consts: [["chatThread", ""], ["chatInput", ""], [1, "ai-assistant-panel"], [1, "panel-header"], [1, "header-title"], [1, "fa-solid", "fa-robot"], ["title", "Collapse panel", 1, "collapse-btn", 3, "click"], [1, "fa-solid", "fa-chevron-right"], [1, "model-selector"], [1, "model-label"], [1, "model-dropdown-wrapper"], [1, "model-loading"], [1, "model-dropdown", 3, "ngModel", "disabled"], [1, "quick-actions"], [1, "quick-action-btn", 3, "disabled", "title"], [1, "chat-thread"], [1, "empty-thread"], [1, "message-wrapper", 3, "user", "assistant", "system"], [1, "message-wrapper", "assistant"], [1, "chat-input-area"], [1, "input-wrapper"], ["placeholder", "Ask the AI assistant...", "rows", "1", 1, "chat-textarea", 3, "ngModelChange", "keydown", "input", "ngModel", "disabled"], ["title", "Send message", 1, "send-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-paper-plane"], [1, "input-hint"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "model-dropdown", 3, "ngModelChange", "ngModel", "disabled"], [3, "value"], ["disabled", "", 3, "value"], [1, "quick-action-btn", 3, "click", "disabled", "title"], [1, "fa-solid", "fa-comments"], [1, "message-wrapper"], [1, "message-avatar", "assistant-avatar"], [1, "message-bubble"], [1, "message-content"], [1, "message-timestamp"], [1, "message-avatar", "user-avatar"], [1, "fa-solid", "fa-user"], [1, "message-bubble", "assistant-bubble", "typing-bubble"], [1, "typing-indicator"], [1, "dot"]], template: function AIAssistantPanelComponent_Template(rf, ctx) { if (rf & 1) {
            const _r1 = i0.ɵɵgetCurrentView();
            i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4);
            i0.ɵɵelement(3, "i", 5);
            i0.ɵɵelementStart(4, "span");
            i0.ɵɵtext(5, "AI Assistant");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(6, "button", 6);
            i0.ɵɵlistener("click", function AIAssistantPanelComponent_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnCollapsePanel()); });
            i0.ɵɵelement(7, "i", 7);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(8, "div", 8)(9, "label", 9);
            i0.ɵɵtext(10, "Model");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(11, "div", 10);
            i0.ɵɵconditionalCreate(12, AIAssistantPanelComponent_Conditional_12_Template, 4, 0, "div", 11)(13, AIAssistantPanelComponent_Conditional_13_Template, 4, 3, "select", 12);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(14, "div", 13);
            i0.ɵɵrepeaterCreate(15, AIAssistantPanelComponent_For_16_Template, 4, 8, "button", 14, _forTrack0);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(17, "div", 15, 0);
            i0.ɵɵconditionalCreate(19, AIAssistantPanelComponent_Conditional_19_Template, 4, 0, "div", 16);
            i0.ɵɵrepeaterCreate(20, AIAssistantPanelComponent_For_21_Template, 8, 16, "div", 17, ctx.TrackByTimestamp, true);
            i0.ɵɵconditionalCreate(22, AIAssistantPanelComponent_Conditional_22_Template, 8, 0, "div", 18);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(23, "div", 19)(24, "div", 20)(25, "textarea", 21, 1);
            i0.ɵɵtwoWayListener("ngModelChange", function AIAssistantPanelComponent_Template_textarea_ngModelChange_25_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.InputText, $event) || (ctx.InputText = $event); return i0.ɵɵresetView($event); });
            i0.ɵɵlistener("keydown", function AIAssistantPanelComponent_Template_textarea_keydown_25_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnInputKeydown($event)); })("input", function AIAssistantPanelComponent_Template_textarea_input_25_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnInputChange()); });
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(27, "button", 22);
            i0.ɵɵlistener("click", function AIAssistantPanelComponent_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnSendMessage()); });
            i0.ɵɵelement(28, "i", 23);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(29, "div", 24)(30, "span");
            i0.ɵɵtext(31, "Press ");
            i0.ɵɵelementStart(32, "kbd");
            i0.ɵɵtext(33, "Enter");
            i0.ɵɵelementEnd();
            i0.ɵɵtext(34, " to send, ");
            i0.ɵɵelementStart(35, "kbd");
            i0.ɵɵtext(36, "Shift+Enter");
            i0.ɵɵelementEnd();
            i0.ɵɵtext(37, " for new line");
            i0.ɵɵelementEnd()()()();
        } if (rf & 2) {
            i0.ɵɵadvance(12);
            i0.ɵɵconditional(ctx.IsLoadingModels ? 12 : 13);
            i0.ɵɵadvance(3);
            i0.ɵɵrepeater(ctx.QuickActions);
            i0.ɵɵadvance(4);
            i0.ɵɵconditional(ctx.Messages.length === 0 ? 19 : -1);
            i0.ɵɵadvance();
            i0.ɵɵrepeater(ctx.Messages);
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(ctx.IsWaitingForResponse ? 22 : -1);
            i0.ɵɵadvance(3);
            i0.ɵɵtwoWayProperty("ngModel", ctx.InputText);
            i0.ɵɵproperty("disabled", ctx.IsWaitingForResponse);
            i0.ɵɵadvance(2);
            i0.ɵɵclassProp("active", ctx.InputText.trim().length > 0 && !ctx.IsWaitingForResponse);
            i0.ɵɵproperty("disabled", ctx.InputText.trim().length === 0 || ctx.IsWaitingForResponse);
        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel], styles: ["[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.ai-assistant-panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n}\n\n\n\n\n\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.panel-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.panel-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 16px;\n}\n\n.panel-header[_ngcontent-%COMP%]   .collapse-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.panel-header[_ngcontent-%COMP%]   .collapse-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n\n\n\n\n\n\n\n.model-selector[_ngcontent-%COMP%] {\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 6px;\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-dropdown-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-dropdown[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 7px 10px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 12px;\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.15s ease;\n  appearance: none;\n  -webkit-appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 8px center;\n  padding-right: 28px;\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-dropdown[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-dropdown[_ngcontent-%COMP%]:disabled {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  cursor: not-allowed;\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  padding: 7px 0;\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n\n\n\n\n\n.quick-actions[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\n}\n\n.quick-actions[_ngcontent-%COMP%]   .quick-action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n}\n\n.quick-actions[_ngcontent-%COMP%]   .quick-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.quick-actions[_ngcontent-%COMP%]   .quick-action-btn[_ngcontent-%COMP%]:hover:not(.disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.quick-actions[_ngcontent-%COMP%]   .quick-action-btn.disabled[_ngcontent-%COMP%] {\n  opacity: 0.4;\n  cursor: not-allowed;\n  background: var(--mj-bg-surface-sunken);\n}\n\n\n\n\n\n\n\n\n.chat-thread[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  scroll-behavior: smooth;\n}\n\n\n\n.chat-thread[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n\n.chat-thread[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.chat-thread[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 3px;\n}\n\n.chat-thread[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-secondary);\n}\n\n.empty-thread[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  text-align: center;\n  color: var(--mj-text-secondary);\n  padding: 32px 16px;\n}\n\n.empty-thread[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 36px;\n  margin-bottom: 12px;\n  opacity: 0.5;\n}\n\n.empty-thread[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 13px;\n  line-height: 1.5;\n  margin: 0;\n  max-width: 220px;\n}\n\n\n\n\n\n\n\n\n.message-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n}\n\n.message-wrapper.user[_ngcontent-%COMP%] {\n  justify-content: flex-end;\n}\n\n.message-wrapper.assistant[_ngcontent-%COMP%] {\n  justify-content: flex-start;\n}\n\n.message-wrapper.system[_ngcontent-%COMP%] {\n  justify-content: center;\n}\n\n.message-avatar[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-size: 12px;\n}\n\n.message-avatar.assistant-avatar[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.message-avatar.user-avatar[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.message-bubble[_ngcontent-%COMP%] {\n  max-width: 80%;\n  padding: 10px 14px;\n  border-radius: 16px;\n  position: relative;\n}\n\n.message-bubble.user-bubble[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-bottom-right-radius: 4px;\n}\n\n.message-bubble.user-bubble[_ngcontent-%COMP%]   .message-timestamp[_ngcontent-%COMP%] {\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.message-bubble.assistant-bubble[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n  border-bottom-left-radius: 4px;\n}\n\n.message-bubble.assistant-bubble[_ngcontent-%COMP%]   .message-timestamp[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n.message-bubble.system-bubble[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n  font-style: italic;\n  border-radius: 8px;\n  max-width: 90%;\n}\n\n.message-bubble.system-bubble[_ngcontent-%COMP%]   .message-timestamp[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.message-bubble.typing-bubble[_ngcontent-%COMP%] {\n  padding: 14px 18px;\n}\n\n.message-content[_ngcontent-%COMP%] {\n  font-size: 13px;\n  line-height: 1.5;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.message-timestamp[_ngcontent-%COMP%] {\n  font-size: 10px;\n  margin-top: 4px;\n  text-align: right;\n}\n\n\n\n\n\n\n\n\n.typing-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.typing-indicator[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--mj-text-secondary);\n  animation: _ngcontent-%COMP%_typingBounce 1.4s infinite ease-in-out both;\n}\n\n.typing-indicator[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%]:nth-child(1) {\n  animation-delay: 0s;\n}\n\n.typing-indicator[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%]:nth-child(2) {\n  animation-delay: 0.2s;\n}\n\n.typing-indicator[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%]:nth-child(3) {\n  animation-delay: 0.4s;\n}\n\n@keyframes _ngcontent-%COMP%_typingBounce {\n  0%, 60%, 100% {\n    transform: translateY(0);\n    opacity: 0.4;\n  }\n  30% {\n    transform: translateY(-6px);\n    opacity: 1;\n  }\n}\n\n\n\n\n\n\n\n\n.chat-input-area[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 12px;\n  padding: 4px 4px 4px 12px;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .chat-textarea[_ngcontent-%COMP%] {\n  flex: 1;\n  border: none;\n  outline: none;\n  resize: none;\n  font-size: 13px;\n  line-height: 20px;\n  color: var(--mj-text-primary);\n  background: transparent;\n  padding: 6px 0;\n  max-height: 80px;\n  font-family: inherit;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .chat-textarea[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .chat-textarea[_ngcontent-%COMP%]:disabled {\n  color: var(--mj-text-secondary);\n  cursor: not-allowed;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .send-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 8px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  cursor: not-allowed;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .send-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .send-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .send-btn.active[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .send-btn[_ngcontent-%COMP%]:disabled {\n  cursor: not-allowed;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .input-hint[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: center;\n  margin-top: 6px;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .input-hint[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-secondary);\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .input-hint[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 1px 4px;\n  font-size: 9px;\n  font-family: inherit;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 3px;\n  margin: 0 2px;\n}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAssistantPanelComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-ai-assistant-panel', template: "<div class=\"ai-assistant-panel\">\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"header-title\">\n      <i class=\"fa-solid fa-robot\"></i>\n      <span>AI Assistant</span>\n    </div>\n    <button class=\"collapse-btn\" (click)=\"OnCollapsePanel()\" title=\"Collapse panel\">\n      <i class=\"fa-solid fa-chevron-right\"></i>\n    </button>\n  </div>\n\n  <!-- Model Selector -->\n  <div class=\"model-selector\">\n    <label class=\"model-label\">Model</label>\n    <div class=\"model-dropdown-wrapper\">\n      @if (IsLoadingModels) {\n        <div class=\"model-loading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          <span>Loading models...</span>\n        </div>\n      } @else {\n        <select\n          class=\"model-dropdown\"\n          [(ngModel)]=\"SelectedModelID\"\n          [disabled]=\"AvailableModels.length === 0\">\n          @for (model of AvailableModels; track model.ID) {\n            <option [value]=\"model.ID\">{{ model.DisplayLabel }}</option>\n          }\n          @if (AvailableModels.length === 0) {\n            <option [value]=\"null\" disabled>No models available</option>\n          }\n        </select>\n      }\n    </div>\n  </div>\n\n  <!-- Quick Actions Bar -->\n  <div class=\"quick-actions\">\n    @for (action of QuickActions; track action.Label) {\n      <button\n        class=\"quick-action-btn\"\n        [class.disabled]=\"!IsQuickActionEnabled(action)\"\n        [disabled]=\"!IsQuickActionEnabled(action) || IsWaitingForResponse\"\n        (click)=\"OnQuickAction(action)\"\n        [title]=\"action.Label\">\n        <i class=\"fa-solid {{ action.Icon }}\"></i>\n        <span>{{ action.Label }}</span>\n      </button>\n    }\n  </div>\n\n  <!-- Chat Thread -->\n  <div class=\"chat-thread\" #chatThread>\n    @if (Messages.length === 0) {\n      <div class=\"empty-thread\">\n        <i class=\"fa-solid fa-comments\"></i>\n        <p>No messages yet. Start a conversation or use a quick action above.</p>\n      </div>\n    }\n\n    @for (message of Messages; track TrackByTimestamp($index, message)) {\n      <div class=\"message-wrapper\" [class.user]=\"message.Role === 'user'\" [class.assistant]=\"message.Role === 'assistant'\" [class.system]=\"message.Role === 'system'\">\n        @if (message.Role === 'assistant') {\n          <div class=\"message-avatar assistant-avatar\">\n            <i class=\"fa-solid fa-robot\"></i>\n          </div>\n        }\n\n        <div class=\"message-bubble\" [class.user-bubble]=\"message.Role === 'user'\" [class.assistant-bubble]=\"message.Role === 'assistant'\" [class.system-bubble]=\"message.Role === 'system'\">\n          <div class=\"message-content\">{{ message.Content }}</div>\n          <div class=\"message-timestamp\">{{ FormatTimestamp(message.Timestamp) }}</div>\n        </div>\n\n        @if (message.Role === 'user') {\n          <div class=\"message-avatar user-avatar\">\n            <i class=\"fa-solid fa-user\"></i>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Typing Indicator -->\n    @if (IsWaitingForResponse) {\n      <div class=\"message-wrapper assistant\">\n        <div class=\"message-avatar assistant-avatar\">\n          <i class=\"fa-solid fa-robot\"></i>\n        </div>\n        <div class=\"message-bubble assistant-bubble typing-bubble\">\n          <div class=\"typing-indicator\">\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Chat Input Area -->\n  <div class=\"chat-input-area\">\n    <div class=\"input-wrapper\">\n      <textarea\n        #chatInput\n        class=\"chat-textarea\"\n        [(ngModel)]=\"InputText\"\n        (keydown)=\"OnInputKeydown($event)\"\n        (input)=\"OnInputChange()\"\n        [disabled]=\"IsWaitingForResponse\"\n        placeholder=\"Ask the AI assistant...\"\n        rows=\"1\"></textarea>\n      <button\n        class=\"send-btn\"\n        [class.active]=\"InputText.trim().length > 0 && !IsWaitingForResponse\"\n        [disabled]=\"InputText.trim().length === 0 || IsWaitingForResponse\"\n        (click)=\"OnSendMessage()\"\n        title=\"Send message\">\n        <i class=\"fa-solid fa-paper-plane\"></i>\n      </button>\n    </div>\n    <div class=\"input-hint\">\n      <span>Press <kbd>Enter</kbd> to send, <kbd>Shift+Enter</kbd> for new line</span>\n    </div>\n  </div>\n</div>\n", styles: [":host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.ai-assistant-panel {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n}\n\n/* ============================================================ */\n/* HEADER                                                       */\n/* ============================================================ */\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.panel-header .header-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.panel-header .header-title i {\n  color: var(--mj-brand-primary);\n  font-size: 16px;\n}\n\n.panel-header .collapse-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.panel-header .collapse-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n/* ============================================================ */\n/* MODEL SELECTOR                                               */\n/* ============================================================ */\n\n.model-selector {\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.model-selector .model-label {\n  display: block;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 6px;\n}\n\n.model-selector .model-dropdown-wrapper {\n  position: relative;\n}\n\n.model-selector .model-dropdown {\n  width: 100%;\n  padding: 7px 10px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 12px;\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.15s ease;\n  appearance: none;\n  -webkit-appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 8px center;\n  padding-right: 28px;\n}\n\n.model-selector .model-dropdown:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.model-selector .model-dropdown:disabled {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  cursor: not-allowed;\n}\n\n.model-selector .model-loading {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  padding: 7px 0;\n}\n\n.model-selector .model-loading i {\n  font-size: 12px;\n}\n\n/* ============================================================ */\n/* QUICK ACTIONS                                                */\n/* ============================================================ */\n\n.quick-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\n}\n\n.quick-actions .quick-action-btn {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n}\n\n.quick-actions .quick-action-btn i {\n  font-size: 11px;\n}\n\n.quick-actions .quick-action-btn:hover:not(.disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.quick-actions .quick-action-btn.disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  background: var(--mj-bg-surface-sunken);\n}\n\n/* ============================================================ */\n/* CHAT THREAD                                                  */\n/* ============================================================ */\n\n.chat-thread {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  scroll-behavior: smooth;\n}\n\n/* Custom scrollbar */\n.chat-thread::-webkit-scrollbar {\n  width: 6px;\n}\n\n.chat-thread::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.chat-thread::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 3px;\n}\n\n.chat-thread::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-secondary);\n}\n\n.empty-thread {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  text-align: center;\n  color: var(--mj-text-secondary);\n  padding: 32px 16px;\n}\n\n.empty-thread i {\n  font-size: 36px;\n  margin-bottom: 12px;\n  opacity: 0.5;\n}\n\n.empty-thread p {\n  font-size: 13px;\n  line-height: 1.5;\n  margin: 0;\n  max-width: 220px;\n}\n\n/* ============================================================ */\n/* MESSAGE BUBBLES                                              */\n/* ============================================================ */\n\n.message-wrapper {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n}\n\n.message-wrapper.user {\n  justify-content: flex-end;\n}\n\n.message-wrapper.assistant {\n  justify-content: flex-start;\n}\n\n.message-wrapper.system {\n  justify-content: center;\n}\n\n.message-avatar {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-size: 12px;\n}\n\n.message-avatar.assistant-avatar {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.message-avatar.user-avatar {\n  background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.message-bubble {\n  max-width: 80%;\n  padding: 10px 14px;\n  border-radius: 16px;\n  position: relative;\n}\n\n.message-bubble.user-bubble {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-bottom-right-radius: 4px;\n}\n\n.message-bubble.user-bubble .message-timestamp {\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.message-bubble.assistant-bubble {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n  border-bottom-left-radius: 4px;\n}\n\n.message-bubble.assistant-bubble .message-timestamp {\n  color: var(--mj-text-secondary);\n}\n\n.message-bubble.system-bubble {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n  font-style: italic;\n  border-radius: 8px;\n  max-width: 90%;\n}\n\n.message-bubble.system-bubble .message-timestamp {\n  color: var(--mj-status-warning);\n}\n\n.message-bubble.typing-bubble {\n  padding: 14px 18px;\n}\n\n.message-content {\n  font-size: 13px;\n  line-height: 1.5;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.message-timestamp {\n  font-size: 10px;\n  margin-top: 4px;\n  text-align: right;\n}\n\n/* ============================================================ */\n/* TYPING INDICATOR                                             */\n/* ============================================================ */\n\n.typing-indicator {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.typing-indicator .dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--mj-text-secondary);\n  animation: typingBounce 1.4s infinite ease-in-out both;\n}\n\n.typing-indicator .dot:nth-child(1) {\n  animation-delay: 0s;\n}\n\n.typing-indicator .dot:nth-child(2) {\n  animation-delay: 0.2s;\n}\n\n.typing-indicator .dot:nth-child(3) {\n  animation-delay: 0.4s;\n}\n\n@keyframes typingBounce {\n  0%, 60%, 100% {\n    transform: translateY(0);\n    opacity: 0.4;\n  }\n  30% {\n    transform: translateY(-6px);\n    opacity: 1;\n  }\n}\n\n/* ============================================================ */\n/* CHAT INPUT AREA                                              */\n/* ============================================================ */\n\n.chat-input-area {\n  padding: 12px 16px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.chat-input-area .input-wrapper {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 12px;\n  padding: 4px 4px 4px 12px;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.chat-input-area .input-wrapper:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.chat-input-area .chat-textarea {\n  flex: 1;\n  border: none;\n  outline: none;\n  resize: none;\n  font-size: 13px;\n  line-height: 20px;\n  color: var(--mj-text-primary);\n  background: transparent;\n  padding: 6px 0;\n  max-height: 80px;\n  font-family: inherit;\n}\n\n.chat-input-area .chat-textarea::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.chat-input-area .chat-textarea:disabled {\n  color: var(--mj-text-secondary);\n  cursor: not-allowed;\n}\n\n.chat-input-area .send-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 8px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  cursor: not-allowed;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.chat-input-area .send-btn i {\n  font-size: 13px;\n}\n\n.chat-input-area .send-btn.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n}\n\n.chat-input-area .send-btn.active:hover {\n  background: var(--mj-brand-primary);\n}\n\n.chat-input-area .send-btn:disabled {\n  cursor: not-allowed;\n}\n\n.chat-input-area .input-hint {\n  display: flex;\n  justify-content: center;\n  margin-top: 6px;\n}\n\n.chat-input-area .input-hint span {\n  font-size: 10px;\n  color: var(--mj-text-secondary);\n}\n\n.chat-input-area .input-hint kbd {\n  display: inline-block;\n  padding: 1px 4px;\n  font-size: 9px;\n  font-family: inherit;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 3px;\n  margin: 0 2px;\n}\n"] }]
    }], () => [{ type: i1.ComponentStudioStateService }, { type: i0.ChangeDetectorRef }], { chatThreadEl: [{
            type: ViewChild,
            args: ['chatThread']
        }], chatInputEl: [{
            type: ViewChild,
            args: ['chatInput']
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAssistantPanelComponent, { className: "AIAssistantPanelComponent", filePath: "src/ComponentStudio/components/ai-assistant/ai-assistant-panel.component.ts", lineNumber: 43 }); })();
//# sourceMappingURL=ai-assistant-panel.component.js.map