@memberjunction/ng-dashboards 5.36.0 → 5.38.0

package/dist/ComponentStudio/components/ai-assistant/ai-assistant-panel.component.js

@@ -1,402 +1,305 @@
-import { Component, ViewChild } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { RunView } from '@memberjunction/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, } from '@angular/core';
+import { CompositeKey, LogError } from '@memberjunction/core';
+import { UUIDsEqual } from '@memberjunction/global';
+import { AIEngineBase } from '@memberjunction/ai-engine-base';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
+import { Subject, takeUntil } from 'rxjs';
+import { MJEnvironmentEntityExtended } from '@memberjunction/core-entities';
+import { NavigationService } from '@memberjunction/ng-shared';
 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"];
+import * as i2 from "@memberjunction/ng-conversations";
 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)); });
+function AIAssistantPanelComponent_For_10_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 11);
+    i0.ɵɵlistener("click", function AIAssistantPanelComponent_For_10_Template_button_click_0_listener() { const action_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnQuickAction(action_r2)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const action_r6 = ctx.$implicit;
+    const action_r2 = 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.ɵɵclassProp("disabled", !ctx_r2.IsQuickActionEnabled(action_r2));
+    i0.ɵɵproperty("disabled", !ctx_r2.IsQuickActionEnabled(action_r2))("title", action_r2.Label);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(i0.ɵɵinterpolate1("fa-solid ", action_r6.Icon));
+    i0.ɵɵclassMap(i0.ɵɵinterpolate1("fa-solid ", action_r2.Icon));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(action_r6.Label);
+    i0.ɵɵtextInterpolate(action_r2.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);
+function AIAssistantPanelComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-conversation-chat-area", 12);
+    i0.ɵɵlistener("conversationCreated", function AIAssistantPanelComponent_Conditional_12_Template_mj_conversation_chat_area_conversationCreated_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnConversationCreated($event)); })("pendingMessageConsumed", function AIAssistantPanelComponent_Conditional_12_Template_mj_conversation_chat_area_pendingMessageConsumed_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnPendingMessageConsumed()); })("openEntityRecord", function AIAssistantPanelComponent_Conditional_12_Template_mj_conversation_chat_area_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnOpenEntityRecord($event)); })("navigationRequest", function AIAssistantPanelComponent_Conditional_12_Template_mj_conversation_chat_area_navigationRequest_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnNavigationRequest($event)); })("taskClicked", function AIAssistantPanelComponent_Conditional_12_Template_mj_conversation_chat_area_taskClicked_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnTaskClicked($event)); })("artifactLinkClicked", function AIAssistantPanelComponent_Conditional_12_Template_mj_conversation_chat_area_artifactLinkClicked_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnArtifactLinkClicked($event)); })("conversationRenamed", function AIAssistantPanelComponent_Conditional_12_Template_mj_conversation_chat_area_conversationRenamed_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnConversationRenamed($event)); })("threadOpened", function AIAssistantPanelComponent_Conditional_12_Template_mj_conversation_chat_area_threadOpened_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnThreadOpened($event)); })("threadClosed", function AIAssistantPanelComponent_Conditional_12_Template_mj_conversation_chat_area_threadClosed_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnThreadClosed()); })("pendingArtifactConsumed", function AIAssistantPanelComponent_Conditional_12_Template_mj_conversation_chat_area_pendingArtifactConsumed_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnPendingArtifactConsumed()); });
     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);
+    i0.ɵɵproperty("Provider", ctx_r2.Provider)("environmentId", ctx_r2.EnvironmentId)("currentUser", ctx_r2.CurrentUser)("conversationId", ctx_r2.ChatConversationId)("conversation", ctx_r2.ChatConversation)("isNewConversation", ctx_r2.ChatIsNewConversation)("pendingMessage", ctx_r2.PendingMessage)("pendingAttachments", ctx_r2.PendingAttachments)("threadId", ctx_r2.ChatThreadId)("pendingArtifactId", ctx_r2.ChatPendingArtifactId)("pendingArtifactVersionNumber", ctx_r2.ChatPendingArtifactVersionNumber)("overlayMode", true)("showExportButton", false)("showShareButton", false)("showArtifactIndicator", false)("appContext", ctx_r2.ChatAppContext)("defaultAgentId", ctx_r2.CodesmithAgentId)("applicationScope", "Application")("applicationId", ctx_r2.CockpitApplicationId)("linkedEntityId", ctx_r2.ComponentsEntityID)("linkedRecordId", ctx_r2.LinkedComponentID)("emptyStateGreeting", "How can I help with this component?");
 } }
-function AIAssistantPanelComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18)(1, "div", 32);
-    i0.ɵɵelement(2, "i", 5);
+function AIAssistantPanelComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵtext(1, "Loading\u2026");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 38)(4, "div", 39);
-    i0.ɵɵelement(5, "span", 40)(6, "span", 40)(7, "span", 40);
-    i0.ɵɵelementEnd()()();
 } }
+/**
+ * Component Studio's right-pane AI assistant.
+ *
+ * Previously this was a 880-line bespoke chat stub that emitted "AI
+ * assistant coming soon" — no agent was actually called. This version
+ * thin-wraps `<mj-conversation-chat-area>` (the same primitive the main
+ * Chat app and the Form Builder cockpit use) so the assistant becomes
+ * fully functional with zero duplicated chat plumbing.
+ *
+ * Domain integration preserved from the old stub:
+ *   - **Quick-actions bar** (Fix Errors / Improve / Generate / Explain)
+ *     above the chat — clicking sets `PendingMessage` which the chat-area
+ *     consumes on the next render, mirroring the empty-state handoff.
+ *   - **`SendErrorToAI` channel** — when the runtime preview throws, the
+ *     state service emits a `ComponentError`. We listen and shove a
+ *     "Fix this error: …" message into the same pendingMessage pipe so
+ *     the user doesn't have to copy/paste error text.
+ *
+ * Scoping:
+ *   - `[applicationScope]="'Application'"` + Component Studio app ID →
+ *     conversations stay out of main chat (per the migration scoping work).
+ *   - `[defaultAgentId]` → Codesmith Agent so messages route to the code
+ *     specialist instead of Sage by default. User can still @mention any
+ *     agent, override via the per-conversation pin, or pick a different
+ *     agent through the chat header's picker.
+ */
 export class AIAssistantPanelComponent extends BaseAngularComponent {
     State;
-    cdr;
-    chatThreadEl;
-    chatInputEl;
-    // --- Chat State ---
-    Messages = [];
-    InputText = '';
-    IsWaitingForResponse = false;
-    // --- Model Selector ---
-    AvailableModels = [];
-    SelectedModelID = null;
-    IsLoadingModels = false;
-    // --- Quick Actions ---
+    /** Quick actions surfaced as buttons above the embedded chat. */
     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 }
+        { Label: 'Explain', Icon: 'fa-question-circle', Prompt: 'Explain what the current component does, including its structure, data flow, and key behaviors.', RequiresError: false },
     ];
+    /** Embedded chat state — same shape the Form Builder cockpit uses. */
+    ChatConversation = null;
+    ChatConversationId = null;
+    ChatIsNewConversation = true;
+    PendingMessage = null;
+    PendingAttachments = null;
+    ChatThreadId = null;
+    ChatPendingArtifactId = null;
+    ChatPendingArtifactVersionNumber = null;
+    /** Snapshot from NavigationService — drives the agent's app context. */
+    ChatAppContext = null;
+    /** Codesmith Agent ID resolved from AIEngineBase cache (no RunView). */
+    CodesmithAgentId = null;
+    /** Component Studio's Application ID — resolved from Metadata cache. */
+    CockpitApplicationId = null;
+    /**
+     * EntityID for `MJ: Components`. Stamped on every conversation
+     * created from this panel as the `LinkedEntityID`, paired with the
+     * currently-selected Component's ID. Enables "show prior conversations
+     * about THIS component" later. In-memory Metadata lookup; no RunView.
+     */
+    ComponentsEntityID = null;
+    /**
+     * The DB-backed Component ID currently selected — null when the
+     * panel has nothing selected, or when the selection is a
+     * file-loaded (transient) component that has no persistent DB row
+     * to link conversations to. Used as `[linkedRecordId]` on the
+     * embedded chat-area. Pairs with {@link ComponentsEntityID}.
+     */
+    get LinkedComponentID() {
+        const sel = this.State.SelectedComponent;
+        if (!sel)
+            return null;
+        // FileLoadedComponent has `isFileLoaded === true` and a lower-case
+        // `id`; DbComponentSummary has the canonical `ID`. Discriminate by
+        // the flag rather than property presence to keep TS happy.
+        if ('isFileLoaded' in sel && sel.isFileLoaded === true)
+            return null;
+        return sel.ID ?? null;
+    }
+    static CODESMITH_AGENT_NAME = 'Codesmith Agent';
+    static COCKPIT_APP_NAME = 'Component Studio';
     destroy$ = new Subject();
-    constructor(State, cdr) {
+    appContextSubscription = null;
+    cdr = inject(ChangeDetectorRef);
+    navigationService = inject(NavigationService);
+    constructor(State) {
         super();
         this.State = State;
-        this.cdr = cdr;
     }
-    async ngOnInit() {
-        this.subscribeToErrorEvents();
-        await this.LoadModels();
-        this.addWelcomeMessage();
+    get EnvironmentId() {
+        return MJEnvironmentEntityExtended.DefaultEnvironmentID;
     }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+    get CurrentUser() {
+        return this.ProviderToUse?.CurrentUser ?? null;
     }
-    // ============================================================
-    // MODEL LOADING
-    // ============================================================
-    async LoadModels() {
-        this.IsLoadingModels = true;
+    async ngOnInit() {
         try {
-            const rv = RunView.FromMetadataProvider(this.ProviderToUse);
-            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;
-                }
+            // Resolve default agent + cockpit app ID from in-memory caches
+            // (no RunView round-trips). Both fall back to null cleanly:
+            // missing agent → routes through Sage; missing app → safety
+            // guard in chat-area demotes scope to 'Global'.
+            await AIEngineBase.Instance.Config(false);
+            const codesmith = AIEngineBase.Instance.Agents
+                ?.find(a => a.Name?.trim().toLowerCase() === AIAssistantPanelComponent.CODESMITH_AGENT_NAME.toLowerCase());
+            this.CodesmithAgentId = codesmith?.ID ?? null;
+            if (!codesmith) {
+                LogError(`AIAssistantPanel: '${AIAssistantPanelComponent.CODESMITH_AGENT_NAME}' not found in AIEngineBase cache`);
             }
+            const md = this.ProviderToUse;
+            const app = md.Applications?.find(a => a.Name?.trim().toLowerCase() === AIAssistantPanelComponent.COCKPIT_APP_NAME.toLowerCase());
+            this.CockpitApplicationId = app?.ID ?? null;
+            // Resolve MJ: Components entity ID for conversation linkage.
+            const componentsEntity = md.EntityByName?.('MJ: Components');
+            if (!componentsEntity) {
+                LogError(`AIAssistantPanel: Entity 'MJ: Components' not found in Metadata cache — conversation linkage will be skipped.`);
+            }
+            this.ComponentsEntityID = componentsEntity?.ID ?? null;
+            // Subscribe to the Explorer shell's app-context publisher so
+            // the agent sees the same snapshot the floating overlay sees.
+            this.appContextSubscription = this.navigationService.AppContextSnapshot$
+                .subscribe(snapshot => {
+                this.ChatAppContext = snapshot;
+                this.cdr.markForCheck();
+            });
+            // Wire the SendErrorToAI channel — when the runtime preview
+            // hits an error, push a canned "Fix this error: …" message
+            // into the chat-area's pendingMessage pipe so the user
+            // doesn't have to manually copy the error text.
+            this.State.SendErrorToAI
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(err => this.handleIncomingError(err));
+            this.cdr.markForCheck();
         }
-        catch (error) {
-            console.error('Error loading AI models:', error);
-        }
-        finally {
-            this.IsLoadingModels = false;
-            this.cdr.detectChanges();
+        catch (err) {
+            LogError(`AIAssistantPanel.ngOnInit: ${err instanceof Error ? err.message : String(err)}`);
         }
     }
-    // ============================================================
-    // 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!');
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.appContextSubscription?.unsubscribe();
+        this.appContextSubscription = null;
     }
-    // ============================================================
-    // CHAT ACTIONS
-    // ============================================================
-    OnSendMessage() {
-        const text = this.InputText.trim();
-        if (!text || this.IsWaitingForResponse)
-            return;
-        this.addMessage('user', text);
-        this.InputText = '';
-        this.resetInputHeight();
-        this.simulateResponse(text);
+    /** Collapse the right pane (delegated to the parent dashboard). */
+    OnCollapsePanel() {
+        this.State.IsAIPanelCollapsed = true;
+        this.State.StateChanged.emit();
     }
+    /** Quick-action click — prefill the chat with the canned prompt. */
     OnQuickAction(action) {
         if (action.RequiresError && !this.State.CurrentError)
             return;
+        let prompt = action.Prompt;
         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;
+            prompt += `${this.State.CurrentError.type} - ${this.State.CurrentError.message}`;
         }
-        this.cdr.detectChanges();
-        this.focusInput();
+        this.PendingMessage = prompt;
+        this.PendingAttachments = null;
+        this.cdr.markForCheck();
     }
-    OnInputKeydown(event) {
-        if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault();
-            this.OnSendMessage();
-        }
+    IsQuickActionEnabled(action) {
+        return !action.RequiresError || this.State.CurrentError != null;
     }
-    OnInputChange() {
-        this.autoGrowTextarea();
+    /** Runtime preview surfaced an error — auto-send "Fix this error: …". */
+    handleIncomingError(error) {
+        const details = error.technicalDetails
+            ? (typeof error.technicalDetails === 'string'
+                ? error.technicalDetails
+                : JSON.stringify(error.technicalDetails, null, 2))
+            : '';
+        this.PendingMessage = `Fix this error: ${error.type} - ${error.message}${details ? '\n\nDetails:\n' + details : ''}`;
+        this.PendingAttachments = null;
+        this.cdr.markForCheck();
     }
-    OnCollapsePanel() {
-        this.State.IsAIPanelCollapsed = true;
-        this.State.StateChanged.emit();
+    // ── chat-area event wiring ───────────────────────────────────────
+    OnConversationCreated(event) {
+        this.PendingMessage = event.pendingMessage ?? null;
+        this.PendingAttachments = (event.pendingAttachments ?? null);
+        this.ChatConversation = event.conversation;
+        this.ChatConversationId = event.conversation.ID;
+        this.ChatIsNewConversation = false;
+        this.cdr.markForCheck();
     }
-    IsQuickActionEnabled(action) {
-        if (action.RequiresError) {
-            return this.State.CurrentError != null;
+    OnPendingMessageConsumed() {
+        this.PendingMessage = null;
+        this.PendingAttachments = null;
+        this.cdr.markForCheck();
+    }
+    OnOpenEntityRecord(event) {
+        try {
+            this.navigationService.OpenEntityRecord(event.entityName, event.compositeKey);
+        }
+        catch (err) {
+            LogError(`AIAssistantPanel.OnOpenEntityRecord: ${err instanceof Error ? err.message : String(err)}`);
         }
-        return true;
     }
-    // ============================================================
-    // MESSAGE MANAGEMENT
-    // ============================================================
-    addMessage(role, content) {
-        this.Messages.push({
-            Role: role,
-            Content: content,
-            Timestamp: new Date()
-        });
-        this.cdr.detectChanges();
-        this.scrollToBottom();
+    OnNavigationRequest(event) {
+        void this.navigationService.OpenNavItemByName(event.navItemName, event.params, event.appId);
     }
-    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);
+    OnTaskClicked(task) {
+        try {
+            const key = CompositeKey.FromID(task.ID);
+            this.navigationService.OpenEntityRecord('MJ: Tasks', key);
+        }
+        catch (err) {
+            LogError(`AIAssistantPanel.OnTaskClicked: ${err instanceof Error ? err.message : String(err)}`);
+        }
     }
-    // ============================================================
-    // UI HELPERS
-    // ============================================================
-    scrollToBottom() {
-        Promise.resolve().then(() => {
-            if (this.chatThreadEl) {
-                const el = this.chatThreadEl.nativeElement;
-                el.scrollTop = el.scrollHeight;
-            }
-        });
+    OnArtifactLinkClicked(event) {
+        const navItemName = event.type === 'conversation' ? 'Conversations' : 'Collections';
+        const paramKey = event.type === 'conversation' ? 'conversationId' : 'collectionId';
+        void this.navigationService.OpenNavItemByName(navItemName, { [paramKey]: event.id });
     }
-    focusInput() {
-        Promise.resolve().then(() => {
-            if (this.chatInputEl) {
-                this.chatInputEl.nativeElement.focus();
+    OnConversationRenamed(event) {
+        if (this.ChatConversation && UUIDsEqual(this.ChatConversation.ID, event.conversationId)) {
+            this.ChatConversation.Name = event.name;
+            if (event.description !== undefined) {
+                this.ChatConversation.Description = event.description;
             }
-        });
-    }
-    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';
+            this.cdr.markForCheck();
+        }
     }
-    resetInputHeight() {
-        if (!this.chatInputEl)
-            return;
-        this.chatInputEl.nativeElement.style.height = 'auto';
+    OnThreadOpened(threadId) {
+        this.ChatThreadId = threadId;
+        this.cdr.markForCheck();
     }
-    FormatTimestamp(date) {
-        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    OnThreadClosed() {
+        this.ChatThreadId = null;
+        this.cdr.markForCheck();
     }
-    TrackByTimestamp(index, message) {
-        return message.Timestamp.getTime();
+    OnPendingArtifactConsumed() {
+        this.ChatPendingArtifactId = null;
+        this.ChatPendingArtifactVersionNumber = null;
+        this.cdr.markForCheck();
     }
-    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, features: [i0.ɵɵInheritDefinitionFeature], 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);
+    static ɵfac = function AIAssistantPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AIAssistantPanelComponent)(i0.ɵɵdirectiveInject(i1.ComponentStudioStateService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAssistantPanelComponent, selectors: [["mj-ai-assistant-panel"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 14, vars: 1, consts: [[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, "quick-actions"], [1, "quick-action-btn", 3, "disabled", "title"], [1, "chat-host"], [3, "Provider", "environmentId", "currentUser", "conversationId", "conversation", "isNewConversation", "pendingMessage", "pendingAttachments", "threadId", "pendingArtifactId", "pendingArtifactVersionNumber", "overlayMode", "showExportButton", "showShareButton", "showArtifactIndicator", "appContext", "defaultAgentId", "applicationScope", "applicationId", "linkedEntityId", "linkedRecordId", "emptyStateGreeting"], [1, "chat-host__empty"], [1, "quick-action-btn", 3, "click", "disabled", "title"], [3, "conversationCreated", "pendingMessageConsumed", "openEntityRecord", "navigationRequest", "taskClicked", "artifactLinkClicked", "conversationRenamed", "threadOpened", "threadClosed", "pendingArtifactConsumed", "Provider", "environmentId", "currentUser", "conversationId", "conversation", "isNewConversation", "pendingMessage", "pendingAttachments", "threadId", "pendingArtifactId", "pendingArtifactVersionNumber", "overlayMode", "showExportButton", "showShareButton", "showArtifactIndicator", "appContext", "defaultAgentId", "applicationScope", "applicationId", "linkedEntityId", "linkedRecordId", "emptyStateGreeting"]], template: function AIAssistantPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
+            i0.ɵɵelement(3, "i", 3);
             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.ɵɵelementStart(6, "button", 4);
+            i0.ɵɵlistener("click", function AIAssistantPanelComponent_Template_button_click_6_listener() { return ctx.OnCollapsePanel(); });
+            i0.ɵɵelement(7, "i", 5);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(14, "div", 13);
-            i0.ɵɵrepeaterCreate(15, AIAssistantPanelComponent_For_16_Template, 4, 8, "button", 14, _forTrack0);
+            i0.ɵɵelementStart(8, "div", 6);
+            i0.ɵɵrepeaterCreate(9, AIAssistantPanelComponent_For_10_Template, 4, 8, "button", 7, _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.ɵɵelementStart(11, "div", 8);
+            i0.ɵɵconditionalCreate(12, AIAssistantPanelComponent_Conditional_12_Template, 1, 22, "mj-conversation-chat-area", 9)(13, AIAssistantPanelComponent_Conditional_13_Template, 2, 0, "div", 10);
             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.ɵɵadvance(9);
             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}"] });
+            i0.ɵɵconditional(ctx.CurrentUser ? 12 : 13);
+        } }, dependencies: [i2.ConversationChatAreaComponent], 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: background 0.15s, color 0.15s;\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.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-card);\n  flex-shrink: 0;\n}\n\n.quick-action-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  border-radius: 4px;\n  font-size: 12px;\n  cursor: pointer;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.quick-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n}\n\n.quick-action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.quick-action-btn[_ngcontent-%COMP%]:disabled, \n.quick-action-btn.disabled[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n\n\n\n\n\n\n\n.chat-host[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.chat-host[_ngcontent-%COMP%]   mj-conversation-chat-area[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.chat-host__empty[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}"], changeDetection: 0 });
 }
 (() => { (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: 44 }); })();
+        args: [{ standalone: false, selector: 'mj-ai-assistant-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-assistant-panel\">\n  <!-- Header: title + collapse. Style + classes match the prior bespoke\n       chat so the panel chrome lines up with the rest of the cockpit. -->\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  <!-- Quick Actions: clicking a button stuffs the canned prompt into\n       `PendingMessage`, which the chat-area below picks up on its next\n       render cycle and sends as if the user typed it. Same mechanism the\n       SendErrorToAI handler uses. \"Fix Errors\" disables until an error\n       has actually been observed in the runtime preview. -->\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)\"\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  <!-- Embedded chat-area \u2014 same primitive the main Chat app and the Form\n       Builder cockpit use. Conversations here are scoped to the\n       Component Studio app so they don't pollute main chat; the default\n       agent is Codesmith (resolved at init from the AIEngineBase cache);\n       and the conversation-header agent picker stays enabled so the user\n       can switch on the fly. -->\n  <div class=\"chat-host\">\n    @if (CurrentUser) {\n      <mj-conversation-chat-area\n        [Provider]=\"Provider\"\n        [environmentId]=\"EnvironmentId\"\n        [currentUser]=\"CurrentUser\"\n        [conversationId]=\"ChatConversationId\"\n        [conversation]=\"ChatConversation\"\n        [isNewConversation]=\"ChatIsNewConversation\"\n        [pendingMessage]=\"PendingMessage\"\n        [pendingAttachments]=\"PendingAttachments\"\n        [threadId]=\"ChatThreadId\"\n        [pendingArtifactId]=\"ChatPendingArtifactId\"\n        [pendingArtifactVersionNumber]=\"ChatPendingArtifactVersionNumber\"\n        [overlayMode]=\"true\"\n        [showExportButton]=\"false\"\n        [showShareButton]=\"false\"\n        [showArtifactIndicator]=\"false\"\n        [appContext]=\"$any(ChatAppContext)\"\n        [defaultAgentId]=\"CodesmithAgentId\"\n        [applicationScope]=\"'Application'\"\n        [applicationId]=\"CockpitApplicationId\"\n        [linkedEntityId]=\"ComponentsEntityID\"\n        [linkedRecordId]=\"LinkedComponentID\"\n        [emptyStateGreeting]=\"'How can I help with this component?'\"\n        (conversationCreated)=\"OnConversationCreated($event)\"\n        (pendingMessageConsumed)=\"OnPendingMessageConsumed()\"\n        (openEntityRecord)=\"OnOpenEntityRecord($event)\"\n        (navigationRequest)=\"OnNavigationRequest($event)\"\n        (taskClicked)=\"OnTaskClicked($event)\"\n        (artifactLinkClicked)=\"OnArtifactLinkClicked($event)\"\n        (conversationRenamed)=\"OnConversationRenamed($event)\"\n        (threadOpened)=\"OnThreadOpened($event)\"\n        (threadClosed)=\"OnThreadClosed()\"\n        (pendingArtifactConsumed)=\"OnPendingArtifactConsumed()\">\n      </mj-conversation-chat-area>\n    } @else {\n      <div class=\"chat-host__empty\">Loading\u2026</div>\n    }\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: background 0.15s, color 0.15s;\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/* 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-card);\n  flex-shrink: 0;\n}\n\n.quick-action-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  border-radius: 4px;\n  font-size: 12px;\n  cursor: pointer;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.quick-action-btn i {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n}\n\n.quick-action-btn:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.quick-action-btn:disabled,\n.quick-action-btn.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ============================================================ */\n/* CHAT HOST                                                    */\n/* ============================================================ */\n\n.chat-host {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.chat-host mj-conversation-chat-area {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.chat-host__empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n"] }]
+    }], () => [{ type: i1.ComponentStudioStateService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAssistantPanelComponent, { className: "AIAssistantPanelComponent", filePath: "src/ComponentStudio/components/ai-assistant/ai-assistant-panel.component.ts", lineNumber: 71 }); })();
 //# sourceMappingURL=ai-assistant-panel.component.js.map