@memberjunction/ng-skip-chat 2.69.1 → 2.71.0

package/dist/lib/skip-chat/skip-chat.component.js

@@ -9,7 +9,6 @@ import { DataContext } from '@memberjunction/data-context';
 import { CopyScalarsAndArrays, InvokeManualResize, MJEventType, MJGlobal, SafeJSONParse } from '@memberjunction/global';
 import { SkipSingleMessageComponent } from '../skip-single-message/skip-single-message.component';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
-import { SkipReactComponentHost, GlobalComponentRegistry, registerExampleComponents, compileAndRegisterComponent } from '../dynamic-report/skip-react-component-host';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/router";
 import * as i2 from "@angular/common";
@@ -145,8 +144,7 @@ function SkipChatComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.AllowNewConversations ? 5 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("height", 280, "px");
-    i0.ɵɵproperty("data", ctx_r2.Conversations)("itemClass", i0.ɵɵpureFunction0(6, _c8));
+    i0.ɵɵproperty("data", ctx_r2.Conversations)("itemClass", i0.ɵɵpureFunction0(4, _c8));
 } }
 function SkipChatComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
@@ -231,22 +229,22 @@ function SkipChatComponent_span_16_Template(rf, ctx) { if (rf & 1) {
 } }
 function SkipChatComponent_Conditional_17_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 64)(1, "span", 70);
+    i0.ɵɵelementStart(0, "button", 64)(1, "span", 68);
     i0.ɵɵlistener("click", function SkipChatComponent_Conditional_17_Conditional_5_Template_span_click_1_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.showDataContextDialog()); });
     i0.ɵɵelementEnd()();
 } }
 function SkipChatComponent_Conditional_17_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 71);
+    i0.ɵɵelementStart(0, "button", 69);
     i0.ɵɵlistener("click", function SkipChatComponent_Conditional_17_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.stopProcessing()); });
-    i0.ɵɵelement(1, "span", 72);
+    i0.ɵɵelement(1, "span", 70);
     i0.ɵɵelementEnd();
 } }
 function SkipChatComponent_Conditional_17_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 73);
+    i0.ɵɵelementStart(0, "button", 71);
     i0.ɵɵlistener("click", function SkipChatComponent_Conditional_17_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.sendSkipMessage()); });
-    i0.ɵɵelement(1, "span", 74);
+    i0.ɵɵelement(1, "span", 72);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -254,7 +252,7 @@ function SkipChatComponent_Conditional_17_Conditional_7_Template(rf, ctx) { if (
 } }
 function SkipChatComponent_Conditional_17_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 67)(1, "span", 75);
+    i0.ɵɵelementStart(0, "button", 67)(1, "span", 73);
     i0.ɵɵlistener("click", function SkipChatComponent_Conditional_17_Conditional_8_Template_span_click_1_listener() { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.showSharingDialog()); });
     i0.ɵɵelementEnd()();
 } }
@@ -265,9 +263,7 @@ function SkipChatComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(4, "div", 63);
     i0.ɵɵtemplate(5, SkipChatComponent_Conditional_17_Conditional_5_Template, 2, 0, "button", 64)(6, SkipChatComponent_Conditional_17_Conditional_6_Template, 2, 0, "button", 65)(7, SkipChatComponent_Conditional_17_Conditional_7_Template, 2, 1, "button", 66)(8, SkipChatComponent_Conditional_17_Conditional_8_Template, 2, 0, "button", 67);
-    i0.ɵɵelementStart(9, "button", 68)(10, "span", 69);
-    i0.ɵɵlistener("click", function SkipChatComponent_Conditional_17_Template_span_click_10_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.testButtonClick()); });
-    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
@@ -283,7 +279,7 @@ function SkipChatComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
 } }
 function SkipChatComponent_skip_artifact_viewer_19_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "skip-artifact-viewer", 76);
+    i0.ɵɵelementStart(0, "skip-artifact-viewer", 74);
     i0.ɵɵlistener("NavigateToMatchingReport", function SkipChatComponent_skip_artifact_viewer_19_Template_skip_artifact_viewer_NavigateToMatchingReport_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.NavigateToMatchingReport.emit($event)); })("NewReportCreated", function SkipChatComponent_skip_artifact_viewer_19_Template_skip_artifact_viewer_NewReportCreated_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.NewReportCreated.emit($event)); })("DrillDownEvent", function SkipChatComponent_skip_artifact_viewer_19_Template_skip_artifact_viewer_DrillDownEvent_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.DrillDownEvent.emit($event)); })("ArtifactInfoChanged", function SkipChatComponent_skip_artifact_viewer_19_Template_skip_artifact_viewer_ArtifactInfoChanged_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onArtifactInfoChanged($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -292,7 +288,7 @@ function SkipChatComponent_skip_artifact_viewer_19_Template(rf, ctx) { if (rf &
 } }
 function SkipChatComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-data-context-dialog", 77);
+    i0.ɵɵelementStart(0, "mj-data-context-dialog", 75);
     i0.ɵɵlistener("dialogClosed", function SkipChatComponent_Conditional_20_Template_mj_data_context_dialog_dialogClosed_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDataContextDialog()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -301,14 +297,14 @@ function SkipChatComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
 } }
 function SkipChatComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dialog", 78);
+    i0.ɵɵelementStart(0, "kendo-dialog", 76);
     i0.ɵɵlistener("close", function SkipChatComponent_Conditional_21_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeSharingDialog("no")); });
-    i0.ɵɵelement(1, "mj-resource-permissions", 79, 6);
-    i0.ɵɵelementStart(3, "kendo-dialog-actions")(4, "button", 80);
+    i0.ɵɵelement(1, "mj-resource-permissions", 77, 6);
+    i0.ɵɵelementStart(3, "kendo-dialog-actions")(4, "button", 78);
     i0.ɵɵlistener("click", function SkipChatComponent_Conditional_21_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r22); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeSharingDialog("yes")); });
     i0.ɵɵtext(5, " Save ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 81);
+    i0.ɵɵelementStart(6, "button", 79);
     i0.ɵɵlistener("click", function SkipChatComponent_Conditional_21_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r22); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeSharingDialog("no")); });
     i0.ɵɵtext(7, " Cancel ");
     i0.ɵɵelementEnd()()();
@@ -320,16 +316,16 @@ function SkipChatComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
 } }
 function SkipChatComponent_kendo_dialog_22_Template(rf, ctx) { if (rf & 1) {
     const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dialog", 82);
+    i0.ɵɵelementStart(0, "kendo-dialog", 80);
     i0.ɵɵlistener("close", function SkipChatComponent_kendo_dialog_22_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDeleteConversation("no")); });
-    i0.ɵɵelementStart(1, "p", 83);
+    i0.ɵɵelementStart(1, "p", 81);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "kendo-dialog-actions")(4, "button", 80);
+    i0.ɵɵelementStart(3, "kendo-dialog-actions")(4, "button", 78);
     i0.ɵɵlistener("click", function SkipChatComponent_kendo_dialog_22_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r23); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDeleteConversation("yes")); });
     i0.ɵɵtext(5, " Yes ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 81);
+    i0.ɵɵelementStart(6, "button", 79);
     i0.ɵɵlistener("click", function SkipChatComponent_kendo_dialog_22_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r23); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDeleteConversation("no")); });
     i0.ɵɵtext(7, " No ");
     i0.ɵɵelementEnd()()();
@@ -341,16 +337,16 @@ function SkipChatComponent_kendo_dialog_22_Template(rf, ctx) { if (rf & 1) {
 } }
 function SkipChatComponent_kendo_dialog_23_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dialog", 82);
+    i0.ɵɵelementStart(0, "kendo-dialog", 80);
     i0.ɵɵlistener("close", function SkipChatComponent_kendo_dialog_23_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeMessageEditOrDeleteDialog("no")); });
-    i0.ɵɵelementStart(1, "p", 83);
+    i0.ɵɵelementStart(1, "p", 81);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "kendo-dialog-actions")(4, "button", 80);
+    i0.ɵɵelementStart(3, "kendo-dialog-actions")(4, "button", 78);
     i0.ɵɵlistener("click", function SkipChatComponent_kendo_dialog_23_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeMessageEditOrDeleteDialog("yes")); });
     i0.ɵɵtext(5, " Yes ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 81);
+    i0.ɵɵelementStart(6, "button", 79);
     i0.ɵɵlistener("click", function SkipChatComponent_kendo_dialog_23_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeMessageEditOrDeleteDialog("no")); });
     i0.ɵɵtext(7, " No ");
     i0.ɵɵelementEnd()()();
@@ -2303,34 +2299,6 @@ export class SkipChatComponent extends BaseAngularComponent {
             await new Promise(resolve => setTimeout(resolve, 100));
             attempts++;
         }
-        // Register the pre-built example components
-        if (window.React) {
-            console.log('React is available, registering pre-built components...');
-            console.log('Babel available:', !!window.Babel);
-            console.log('Chart available:', !!window.Chart);
-            try {
-                const registered = await registerExampleComponents(window.React, window.Chart);
-                if (registered) {
-                    console.log('Pre-built components registered successfully');
-                    // Mark these as pre-built so we don't try to re-register them
-                    this.registeredTestComponents.set('ActionBrowser', { componentName: 'ActionBrowser', prebuilt: true });
-                    this.registeredTestComponents.set('SearchBox', { componentName: 'SearchBox', prebuilt: true });
-                    this.registeredTestComponents.set('CategoryChart', { componentName: 'CategoryChart', prebuilt: true });
-                    // Verify registration
-                    const registry = GlobalComponentRegistry.Instance;
-                    console.log('Registry keys after registration:', registry.getRegisteredKeys());
-                }
-                else {
-                    console.error('Failed to register pre-built components');
-                }
-            }
-            catch (error) {
-                console.error('Error during component registration:', error);
-            }
-        }
-        else {
-            console.error('React not available for component registration');
-        }
     }
     getRequiredChildComponents(componentName) {
         // For pre-built components, return their specific dependencies
@@ -2352,624 +2320,6 @@ export class SkipChatComponent extends BaseAngularComponent {
             }
         }
     }
-    /**
-     * Process a SkipComponentRootSpec and register all components recursively
-     */
-    async processSkipComponentSpec(spec) {
-        const errors = [];
-        const registeredComponents = [];
-        try {
-            // Register root component (plain function, auto-wrapped)
-            const rootComponentName = spec.componentName;
-            const success = await compileAndRegisterComponent(rootComponentName, spec.componentCode, 'Global', // Use Global context for all test components
-            'v1');
-            if (success) {
-                registeredComponents.push(rootComponentName);
-                this.registeredTestComponents.set(rootComponentName, spec);
-            }
-            else {
-                errors.push(`Failed to register root component: ${rootComponentName}`);
-            }
-            // Recursively register child components (plain functions, auto-wrapped)
-            if (spec.childComponents && Array.isArray(spec.childComponents)) {
-                for (const child of spec.childComponents) {
-                    await this.registerComponentHierarchy(child, registeredComponents, errors);
-                }
-            }
-            return {
-                success: errors.length === 0,
-                rootComponentName,
-                registeredComponents,
-                errors
-            };
-        }
-        catch (error) {
-            errors.push(`Error processing spec: ${error.message}`);
-            return {
-                success: false,
-                rootComponentName: spec.componentName || 'Unknown',
-                registeredComponents,
-                errors
-            };
-        }
-    }
-    /**
-     * Recursively register child components
-     */
-    async registerComponentHierarchy(spec, registeredComponents, errors) {
-        try {
-            if (spec.componentCode) {
-                // Child components are plain functions, auto-wrapped
-                const success = await compileAndRegisterComponent(spec.componentName, spec.componentCode, 'Global', // Use Global context for all test components
-                'v1');
-                if (success) {
-                    registeredComponents.push(spec.componentName);
-                }
-                else {
-                    errors.push(`Failed to register component: ${spec.componentName}`);
-                }
-            }
-            // Process nested children
-            const childArray = spec.childComponents || spec.components || [];
-            for (const child of childArray) {
-                await this.registerComponentHierarchy(child, registeredComponents, errors);
-            }
-        }
-        catch (error) {
-            errors.push(`Error registering ${spec.componentName}: ${error.message}`);
-        }
-    }
-    /**
-     * TEMPORARY TEST METHOD - Handle test button click
-     */
-    async testButtonClick() {
-        console.log('Test button clicked - Opening Component Tester');
-        // If dialog already exists, just show it
-        if (this.componentTesterDialog) {
-            return;
-        }
-        // Create the dialog container directly in the DOM
-        const dialogContainer = document.createElement('div');
-        dialogContainer.style.position = 'fixed';
-        dialogContainer.style.top = '50%';
-        dialogContainer.style.left = '50%';
-        dialogContainer.style.transform = 'translate(-50%, -50%)';
-        dialogContainer.style.width = '90vw';
-        dialogContainer.style.maxWidth = '1400px';
-        dialogContainer.style.height = '85vh';
-        dialogContainer.style.backgroundColor = 'white';
-        dialogContainer.style.boxShadow = '0 4px 20px rgba(0,0,0,0.3)';
-        dialogContainer.style.borderRadius = '8px';
-        dialogContainer.style.zIndex = '10000';
-        dialogContainer.style.display = 'flex';
-        dialogContainer.style.flexDirection = 'column';
-        // Create header
-        const header = document.createElement('div');
-        header.style.padding = '16px 20px';
-        header.style.borderBottom = '1px solid #e0e0e0';
-        header.style.display = 'flex';
-        header.style.justifyContent = 'space-between';
-        header.style.alignItems = 'center';
-        header.style.backgroundColor = '#f5f5f5';
-        header.style.borderRadius = '8px 8px 0 0';
-        const title = document.createElement('h3');
-        title.textContent = 'Skip Component Tester';
-        title.style.margin = '0';
-        title.style.fontSize = '18px';
-        title.style.fontWeight = '600';
-        const closeButton = document.createElement('button');
-        closeButton.innerHTML = '×';
-        closeButton.style.fontSize = '28px';
-        closeButton.style.border = 'none';
-        closeButton.style.background = 'none';
-        closeButton.style.cursor = 'pointer';
-        closeButton.style.padding = '0';
-        closeButton.style.width = '32px';
-        closeButton.style.height = '32px';
-        closeButton.style.lineHeight = '1';
-        closeButton.onclick = () => {
-            // Clean up splitter event listeners
-            if (testerContent.refs.splitter && testerContent.refs.splitter.cleanup) {
-                testerContent.refs.splitter.cleanup();
-            }
-            document.body.removeChild(dialogContainer);
-            document.body.removeChild(backdrop);
-            // Clear test components from registry
-            this.registeredTestComponents.forEach((spec, name) => {
-                if (!spec.prebuilt) {
-                    // Only remove user-added components, not pre-built ones
-                    GlobalComponentRegistry.Instance.remove(`${name}_Global_v1`);
-                }
-            });
-            this.registeredTestComponents.clear();
-            this.componentTesterDialog = null;
-        };
-        header.appendChild(title);
-        header.appendChild(closeButton);
-        // Create backdrop
-        const backdrop = document.createElement('div');
-        backdrop.style.position = 'fixed';
-        backdrop.style.top = '0';
-        backdrop.style.left = '0';
-        backdrop.style.right = '0';
-        backdrop.style.bottom = '0';
-        backdrop.style.backgroundColor = 'rgba(0,0,0,0.5)';
-        backdrop.style.zIndex = '9999';
-        // Create the component tester content
-        const testerContent = this.createComponentTesterContent();
-        testerContent.element.style.flex = '1';
-        testerContent.element.style.overflow = 'hidden';
-        dialogContainer.appendChild(header);
-        dialogContainer.appendChild(testerContent.element);
-        // Add to DOM
-        document.body.appendChild(backdrop);
-        document.body.appendChild(dialogContainer);
-        // Store reference for cleanup
-        this.componentTesterDialog = { close: () => closeButton.click() };
-        // Initialize code editor and other functionality
-        setTimeout(() => {
-            this.initializeComponentTester(testerContent);
-        }, 100);
-    }
-    createComponentTesterContent() {
-        const container = document.createElement('div');
-        container.style.height = '100%';
-        container.style.display = 'flex';
-        container.style.flexDirection = 'column';
-        // Header with controls
-        const header = document.createElement('div');
-        header.style.padding = '16px';
-        header.style.borderBottom = '1px solid #e0e0e0';
-        header.style.display = 'flex';
-        header.style.gap = '16px';
-        header.style.alignItems = 'center';
-        // Component selector dropdown
-        const selectorLabel = document.createElement('label');
-        selectorLabel.textContent = 'Component: ';
-        selectorLabel.style.fontWeight = 'bold';
-        const componentSelector = document.createElement('select');
-        componentSelector.style.padding = '8px';
-        componentSelector.style.borderRadius = '4px';
-        componentSelector.style.border = '1px solid #ccc';
-        componentSelector.style.minWidth = '200px';
-        // Add default option
-        const defaultOption = document.createElement('option');
-        defaultOption.value = '';
-        defaultOption.textContent = 'Select a component...';
-        componentSelector.appendChild(defaultOption);
-        // Add new component button
-        const addNewBtn = document.createElement('button');
-        addNewBtn.textContent = 'Add New Component';
-        addNewBtn.className = 'k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary';
-        addNewBtn.style.marginLeft = 'auto';
-        // Parse & Register button
-        const parseBtn = document.createElement('button');
-        parseBtn.textContent = 'Parse & Register';
-        parseBtn.className = 'k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary';
-        parseBtn.disabled = true;
-        // Clear button
-        const clearBtn = document.createElement('button');
-        clearBtn.textContent = 'Clear All';
-        clearBtn.className = 'k-button k-button-md k-rounded-md k-button-solid k-button-solid-base';
-        header.appendChild(selectorLabel);
-        header.appendChild(componentSelector);
-        header.appendChild(parseBtn);
-        header.appendChild(clearBtn);
-        header.appendChild(addNewBtn);
-        // Main content area with split view
-        const content = document.createElement('div');
-        content.style.flex = '1';
-        content.style.display = 'flex';
-        content.style.overflow = 'hidden';
-        content.style.position = 'relative';
-        // Get saved splitter position from local storage
-        const savedPosition = localStorage.getItem('skipComponentTesterSplitterPosition');
-        const leftWidth = savedPosition ? parseFloat(savedPosition) : 50;
-        const rightWidth = 100 - leftWidth;
-        // Left panel - Code editor
-        const leftPanel = document.createElement('div');
-        leftPanel.style.width = `${leftWidth}%`;
-        leftPanel.style.display = 'flex';
-        leftPanel.style.flexDirection = 'column';
-        leftPanel.style.minWidth = '200px';
-        const editorLabel = document.createElement('div');
-        editorLabel.style.padding = '8px 16px';
-        editorLabel.style.backgroundColor = '#f5f5f5';
-        editorLabel.style.borderBottom = '1px solid #e0e0e0';
-        editorLabel.innerHTML = '<strong>JSON Input (SkipComponentRootSpec)</strong>';
-        const editorContainer = document.createElement('div');
-        editorContainer.style.flex = '1';
-        editorContainer.style.position = 'relative';
-        leftPanel.appendChild(editorLabel);
-        leftPanel.appendChild(editorContainer);
-        // Splitter handle
-        const splitter = document.createElement('div');
-        splitter.style.width = '6px';
-        splitter.style.backgroundColor = '#e0e0e0';
-        splitter.style.cursor = 'col-resize';
-        splitter.style.position = 'relative';
-        splitter.style.userSelect = 'none';
-        // Add hover effect
-        splitter.onmouseenter = () => {
-            splitter.style.backgroundColor = '#c0c0c0';
-        };
-        splitter.onmouseleave = () => {
-            if (!isDragging) {
-                splitter.style.backgroundColor = '#e0e0e0';
-            }
-        };
-        // Right panel - Component preview
-        const rightPanel = document.createElement('div');
-        rightPanel.style.width = `${rightWidth}%`;
-        rightPanel.style.display = 'flex';
-        rightPanel.style.flexDirection = 'column';
-        rightPanel.style.minWidth = '200px';
-        const previewLabel = document.createElement('div');
-        previewLabel.style.padding = '8px 16px';
-        previewLabel.style.backgroundColor = '#f5f5f5';
-        previewLabel.style.borderBottom = '1px solid #e0e0e0';
-        previewLabel.innerHTML = '<strong>Component Preview</strong>';
-        const previewContainer = document.createElement('div');
-        previewContainer.style.flex = '1';
-        previewContainer.style.overflow = 'auto';
-        previewContainer.style.padding = '16px';
-        rightPanel.appendChild(previewLabel);
-        rightPanel.appendChild(previewContainer);
-        // Add splitter drag functionality
-        let isDragging = false;
-        let startX = 0;
-        let startLeftWidth = 0;
-        const handleMouseDown = (e) => {
-            isDragging = true;
-            startX = e.pageX;
-            startLeftWidth = leftPanel.offsetWidth;
-            splitter.style.backgroundColor = '#a0a0a0';
-            // Prevent text selection during drag
-            document.body.style.userSelect = 'none';
-            document.body.style.cursor = 'col-resize';
-            e.preventDefault();
-        };
-        const handleMouseMove = (e) => {
-            if (!isDragging)
-                return;
-            const containerWidth = content.offsetWidth;
-            const deltaX = e.pageX - startX;
-            const newLeftWidth = startLeftWidth + deltaX;
-            const newLeftPercent = (newLeftWidth / containerWidth) * 100;
-            // Limit the splitter position (20% to 80%)
-            if (newLeftPercent >= 20 && newLeftPercent <= 80) {
-                leftPanel.style.width = `${newLeftPercent}%`;
-                rightPanel.style.width = `${100 - newLeftPercent}%`;
-            }
-        };
-        const handleMouseUp = () => {
-            if (!isDragging)
-                return;
-            isDragging = false;
-            splitter.style.backgroundColor = '#e0e0e0';
-            document.body.style.userSelect = '';
-            document.body.style.cursor = '';
-            // Save position to local storage
-            const containerWidth = content.offsetWidth;
-            const leftPercent = (leftPanel.offsetWidth / containerWidth) * 100;
-            localStorage.setItem('skipComponentTesterSplitterPosition', leftPercent.toString());
-        };
-        splitter.addEventListener('mousedown', handleMouseDown);
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-        // Clean up event listeners when dialog is closed
-        splitter.cleanup = () => {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-        };
-        // Error display area
-        const errorContainer = document.createElement('div');
-        errorContainer.style.display = 'none';
-        errorContainer.style.padding = '16px';
-        errorContainer.style.backgroundColor = '#fee';
-        errorContainer.style.color = '#c00';
-        errorContainer.style.borderTop = '1px solid #fcc';
-        errorContainer.style.maxHeight = '150px';
-        errorContainer.style.overflow = 'auto';
-        content.appendChild(leftPanel);
-        content.appendChild(splitter);
-        content.appendChild(rightPanel);
-        container.appendChild(header);
-        container.appendChild(content);
-        container.appendChild(errorContainer);
-        return {
-            element: container,
-            refs: {
-                componentSelector,
-                addNewBtn,
-                parseBtn,
-                clearBtn,
-                editorContainer,
-                previewContainer,
-                errorContainer,
-                splitter
-            }
-        };
-    }
-    async initializeComponentTester(testerContent) {
-        const { componentSelector, addNewBtn, parseBtn, clearBtn, editorContainer, previewContainer, errorContainer } = testerContent.refs;
-        let currentHost = null;
-        let codeEditorValue = '';
-        // First, ensure React and other libraries are loaded by creating a temporary host
-        const tempContainer = document.createElement('div');
-        tempContainer.style.display = 'none';
-        document.body.appendChild(tempContainer);
-        // this is done to get React loaded
-        const tempSpec = {
-            componentCode: 'function TempComponent() {};',
-            componentName: 'TempComponent',
-            functionalRequirements: 'Load React and other libraries',
-            technicalDesign: 'Temporary component to load libraries',
-            componentType: 'report',
-            title: 'Temporary Component',
-            description: 'This component is used to load React and other libraries for testing purposes',
-            callbackStrategy: 'none',
-            childComponents: [],
-            stateStructure: {},
-            userExplanation: 'This component is used to load React and other libraries for testing purposes',
-            techExplanation: 'This component is used to load React and other libraries for testing purposes'
-        };
-        const tempHost = new SkipReactComponentHost({
-            component: tempSpec,
-            container: tempContainer,
-            data: {},
-            metadata: { requiredChildComponents: [], componentContext: 'Global', version: 'v1' }
-        });
-        try {
-            await tempHost.initialize();
-            console.log('Libraries loaded via temporary host');
-        }
-        catch (error) {
-            console.error('Error loading libraries:', error);
-        }
-        finally {
-            tempHost.destroy();
-            document.body.removeChild(tempContainer);
-        }
-        // Now register the pre-built test components
-        await this.registerPrebuiltComponents();
-        // Add pre-built components to dropdown
-        const prebuiltComponents = [
-            { name: 'ActionBrowser', label: 'Action Browser (Pre-built)' },
-            { name: 'SearchBox', label: 'Search Box (Pre-built)' },
-            { name: 'CategoryChart', label: 'Category Chart (Pre-built)' }
-        ];
-        for (const comp of prebuiltComponents) {
-            const option = document.createElement('option');
-            option.value = comp.name;
-            option.textContent = comp.label;
-            componentSelector.appendChild(option);
-            // Ensure pre-built components are marked as such in our tracking map
-            if (!this.registeredTestComponents.has(comp.name)) {
-                this.registeredTestComponents.set(comp.name, { componentName: comp.name, prebuilt: true });
-            }
-        }
-        // Create a textarea for now instead of the Angular component
-        const codeEditor = document.createElement('textarea');
-        codeEditor.style.width = '100%';
-        codeEditor.style.height = '100%';
-        codeEditor.style.fontFamily = 'monospace';
-        codeEditor.style.fontSize = '13px';
-        codeEditor.style.border = 'none';
-        codeEditor.style.outline = 'none';
-        codeEditor.style.resize = 'none';
-        codeEditor.style.padding = '16px';
-        codeEditor.style.backgroundColor = '#f5f5f5';
-        // Listen for value changes
-        codeEditor.addEventListener('input', (event) => {
-            codeEditorValue = event.target.value;
-            parseBtn.disabled = !codeEditorValue.trim();
-        });
-        editorContainer.appendChild(codeEditor);
-        // Set initial value with example
-        const exampleSpec = {
-            componentName: "ExampleComponent",
-            componentType: "report",
-            title: "Example Component",
-            description: "An example component",
-            functionalRequirements: "Display hello world",
-            technicalDesign: "Simple React component",
-            callbackStrategy: "none",
-            stateStructure: {},
-            childComponents: [],
-            userExplanation: "Shows hello world",
-            techExplanation: "React createElement",
-            componentCode: `
-        function createComponent(React) {
-          const Component = () => {
-            return React.createElement('div', {
-              style: { padding: '20px', fontSize: '18px' }
-            }, 'Hello from Skip Component!');
-          };
-          return { component: Component };
-        }
-      `
-        };
-        setTimeout(() => {
-            codeEditor.value = JSON.stringify(exampleSpec, null, 2);
-            codeEditorValue = JSON.stringify(exampleSpec, null, 2);
-            parseBtn.disabled = false;
-        }, 200);
-        // Handle component selection
-        componentSelector.addEventListener('change', async () => {
-            const selectedName = componentSelector.value;
-            if (!selectedName) {
-                if (currentHost) {
-                    currentHost.destroy();
-                    currentHost = null;
-                }
-                previewContainer.innerHTML = '<div style="color: #666; text-align: center; padding: 40px;">Select a component to preview</div>';
-                return;
-            }
-            // Wait a bit to ensure components are registered
-            await new Promise(resolve => setTimeout(resolve, 100));
-            // Debug: Check registry state
-            const registry = GlobalComponentRegistry.Instance;
-            console.log('Before rendering - Registry keys:', registry.getRegisteredKeys());
-            console.log('Looking for component:', selectedName);
-            // Render the selected component
-            currentHost = await this.renderTestComponent(selectedName, previewContainer, currentHost);
-        });
-        // Handle parse & register button
-        parseBtn.addEventListener('click', async () => {
-            errorContainer.style.display = 'none';
-            errorContainer.innerHTML = '';
-            try {
-                const spec = JSON.parse(codeEditorValue);
-                // Generate unique name if component already exists
-                let componentName = spec.componentName;
-                let counter = 1;
-                while (this.registeredTestComponents.has(componentName)) {
-                    componentName = `${spec.componentName}_${counter}`;
-                    counter++;
-                }
-                const result = await this.processSkipComponentSpec(spec);
-                if (result.success) {
-                    // Add to dropdown
-                    const option = document.createElement('option');
-                    option.value = componentName;
-                    option.textContent = `${componentName} (${result.registeredComponents.length} components)`;
-                    componentSelector.appendChild(option);
-                    componentSelector.value = componentName;
-                    // Trigger change event to render
-                    componentSelector.dispatchEvent(new Event('change'));
-                    this.notificationService.CreateSimpleNotification(`Successfully registered ${result.registeredComponents.length} components`, 'success', 3000);
-                }
-                else {
-                    errorContainer.style.display = 'block';
-                    errorContainer.innerHTML = '<strong>Errors:</strong><br>' + result.errors.join('<br>');
-                }
-            }
-            catch (error) {
-                errorContainer.style.display = 'block';
-                errorContainer.innerHTML = '<strong>JSON Parse Error:</strong><br>' + error.message;
-            }
-        });
-        // Handle clear button
-        clearBtn.addEventListener('click', () => {
-            // Clear only non-prebuilt components
-            this.registeredTestComponents.forEach((spec, name) => {
-                if (!spec.prebuilt) {
-                    GlobalComponentRegistry.Instance.remove(`${name}_Global_v1`);
-                    this.registeredTestComponents.delete(name);
-                }
-            });
-            // Clear dropdown but keep pre-built options
-            componentSelector.innerHTML = '';
-            const defaultOption = document.createElement('option');
-            defaultOption.value = '';
-            defaultOption.textContent = 'Select a component...';
-            componentSelector.appendChild(defaultOption);
-            // Re-add pre-built components
-            for (const comp of prebuiltComponents) {
-                const option = document.createElement('option');
-                option.value = comp.name;
-                option.textContent = comp.label;
-                componentSelector.appendChild(option);
-            }
-            // Clear preview
-            if (currentHost) {
-                currentHost.destroy();
-                currentHost = null;
-            }
-            previewContainer.innerHTML = '<div style="color: #666; text-align: center; padding: 40px;">Select a component to preview</div>';
-            // Clear editor
-            codeEditor.value = '';
-            codeEditorValue = '';
-            parseBtn.disabled = true;
-        });
-        // Handle add new button
-        addNewBtn.addEventListener('click', () => {
-            codeEditor.value = JSON.stringify(exampleSpec, null, 2);
-            codeEditorValue = JSON.stringify(exampleSpec, null, 2);
-            parseBtn.disabled = false;
-        });
-        // Initial state
-        previewContainer.innerHTML = '<div style="color: #666; text-align: center; padding: 40px;">Paste JSON and click "Parse & Register" to test a component</div>';
-    }
-    async renderTestComponent(componentName, container, currentHost) {
-        // Clean up existing host
-        if (currentHost) {
-            currentHost.destroy();
-        }
-        container.innerHTML = '';
-        try {
-            // Create wrapper component that uses the selected component
-            const wrapperCode = `
-        function createComponent(React, ReactDOM, useState, useEffect, useCallback, createStateUpdater, createStandardEventHandler, libraries) {
-          const WrapperComponent = ({ data, utilities, userState, callbacks, styles, components }) => {
-            const SelectedComponent = components['${componentName}'];
-            
-            if (!SelectedComponent) {
-              return React.createElement('div', {
-                style: { color: 'red', padding: '20px' }
-              }, 'Component "${componentName}" not found in registry');
-            }
-            
-            return React.createElement(SelectedComponent, {
-              data: data,
-              utilities: utilities,
-              userState: userState,
-              callbacks: callbacks,
-              styles: styles,
-              components: components
-            });
-          };
-          
-          return { component: WrapperComponent };
-        }
-      `;
-            // The React host will handle all registration automatically
-            const host = new SkipReactComponentHost({
-                component: {
-                    componentName: 'TestWrapper',
-                    componentCode: wrapperCode,
-                    componentType: 'other',
-                    childComponents: [], // No child components for the wrapper
-                    functionalRequirements: 'Test wrapper component',
-                    technicalDesign: 'Wrapper for testing components',
-                    description: 'Wrapper component for testing',
-                    callbackStrategy: 'none',
-                    stateStructure: {},
-                    title: 'Test Wrapper',
-                    userExplanation: 'This is a test wrapper',
-                    techExplanation: 'Wraps components for testing'
-                },
-                container: container,
-                data: {},
-                initialState: {},
-                utilities: {
-                    md: {},
-                    rv: new TestRunView(),
-                    rq: {}
-                },
-                metadata: {
-                    requiredChildComponents: this.getRequiredChildComponents(componentName),
-                    componentContext: 'Global', // Always use Global context for test components
-                    version: 'v1'
-                },
-                callbacks: {
-                    RefreshData: () => console.log('Refresh data requested'),
-                    UpdateUserState: (state) => console.log('User state updated:', state),
-                    OpenEntityRecord: (entityName, key) => console.log('Open entity:', entityName, key),
-                    NotifyEvent: (eventType, data) => console.log('Event:', eventType, data)
-                }
-            });
-            await host.initialize();
-            console.log('Component rendered successfully');
-            return host;
-        }
-        catch (error) {
-            console.error('Error rendering component:', error);
-            container.innerHTML = `<div style="color: red; padding: 20px;">Error rendering component: ${error}</div>`;
-            return null;
-        }
-    }
     static ɵfac = function SkipChatComponent_Factory(t) { return new (t || SkipChatComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i1.ActivatedRoute), i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i2.Location), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i3.MJNotificationService), i0.ɵɵdirectiveInject(i4.DialogService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SkipChatComponent, selectors: [["skip-chat"]], viewQuery: function SkipChatComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(Container, 7);
@@ -2992,10 +2342,10 @@ export class SkipChatComponent extends BaseAngularComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.topLevelDiv = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.resourcePermissionsRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.splitPanel = _t.first);
-        } }, inputs: { AllowSend: "AllowSend", Messages: "Messages", Conversations: "Conversations", SelectedConversation: "SelectedConversation", ConversationEditMode: "ConversationEditMode", ShowConversationList: "ShowConversationList", AllowNewConversations: "AllowNewConversations", Title: "Title", DataContextID: "DataContextID", LinkedEntity: "LinkedEntity", LinkedEntityCompositeKey: "LinkedEntityCompositeKey", ShowDataContextButton: "ShowDataContextButton", IncludeLinkedConversationsInList: "IncludeLinkedConversationsInList", SkipLogoURL: "SkipLogoURL", SkipMarkOnlyLogoURL: "SkipMarkOnlyLogoURL", UserImage: "UserImage", VerboseLogging: "VerboseLogging", UpdateAppRoute: "UpdateAppRoute", ShowSkipLogoInConversationList: "ShowSkipLogoInConversationList", ShowSharingButton: "ShowSharingButton", SharingExcludeRoleNames: "SharingExcludeRoleNames", SharingExcludeEmails: "SharingExcludeEmails", EnableArtifactSplitView: "EnableArtifactSplitView", DefaultSplitRatio: "DefaultSplitRatio", DefaultTextboxPlaceholder: "DefaultTextboxPlaceholder", ProcessingTextBoxPlaceholder: "ProcessingTextBoxPlaceholder", WelcomeQuestions: "WelcomeQuestions", AutoLoad: "AutoLoad" }, outputs: { NavigateToMatchingReport: "NavigateToMatchingReport", ConversationSelected: "ConversationSelected", NewReportCreated: "NewReportCreated", DrillDownEvent: "DrillDownEvent", ArtifactSelected: "ArtifactSelected", ArtifactViewed: "ArtifactViewed" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 24, vars: 18, consts: [["topLevelDiv", ""], ["splitPanel", ""], ["AskSkipPanel", ""], ["scrollContainer", ""], ["conversationList", ""], ["AskSkipInput", ""], ["resourcePermissions", ""], ["kendoDialogContainer", "", 1, "chat-container"], [1, "layout"], [1, "left-panel"], [1, "fa-solid", "fa-table-columns", "toggle-icon"], [1, "right-panel"], ["mjFillContainer", "", 3, "SplitRatioChanged", "VersionSelected", "Mode", "SplitRatio", "RightPanelHeaderContent", "VersionList", "SelectedVersionId", "fillWidth", "fillHeight"], ["left-panel", "", 1, "conversation-wrapper"], [2, "width", "0", "height", "0", "overflow", "hidden", "position", "absolute"], [1, "messages", 3, "scroll"], ["class", "welcome-wrapper", 4, "ngIf"], [1, "loading-convo-messages-wrapper"], ["mjContainer", "", "mjSkipResize", "true", 1, "messages-container"], ["class", "scroll-to-bottom-icon", 3, "left", "click", 4, "ngIf"], [1, "input-area"], ["right-panel", ""], [3, "ArtifactID", "ArtifactVersionID", "DataContext", "NavigateToMatchingReport", "NewReportCreated", "DrillDownEvent", "ArtifactInfoChanged", 4, "ngIf"], [3, "dataContextId", "Provider"], ["title", "Share Conversation", 3, "width", "height"], ["title", "Please confirm", 3, "minWidth", "width", "close", 4, "ngIf"], [1, "conversation-history"], [1, "new-chat-area"], [1, "fa-solid", "fa-table-columns", "toggle-icon", 3, "click"], [1, "avatar", 3, "src"], [1, "fa-solid", "fa-pen-to-square", "new-convo-icon"], [1, "conversation-list", 3, "data", "itemClass"], ["kendoListViewItemTemplate", ""], [1, "fa-solid", "fa-pen-to-square", "new-convo-icon", 3, "click"], [1, "conversation-item", 3, "click", "ngClass", "title"], ["class", "fa-regular fa-clock", 4, "ngIf"], [1, "text-container"], [4, "ngIf"], ["maxlength", "100", 3, "ngModel", "ngModelChange", 4, "ngIf"], ["class", "edit-conversation-panel", 4, "ngIf"], [1, "fa-regular", "fa-clock"], ["maxlength", "100", 3, "ngModelChange", "ngModel"], [1, "edit-conversation-panel"], ["class", "fa-solid fa-pen-to-square", 3, "click", 4, "ngIf"], ["class", "fa-regular fa-trash-can", 3, "click", 4, "ngIf"], ["class", "fa-solid fa-check", 3, "click", 4, "ngIf"], ["class", "fa-solid fa-xmark", 3, "click", 4, "ngIf"], [1, "fa-solid", "fa-pen-to-square", 3, "click"], [1, "fa-regular", "fa-trash-can", 3, "click"], [1, "fa-solid", "fa-check", 3, "click"], [1, "fa-solid", "fa-xmark", 3, "click"], [1, "welcome-wrapper"], [1, "welcome-message"], [3, "src"], [1, "welcome-header-text"], [1, "welcome-suggested-questions"], [1, "welcome-suggested-questions-col"], [1, "welcome-question", 3, "click"], [1, "welcome-question-header"], [1, "scroll-to-bottom-icon", 3, "click"], [1, "fas", "fa-arrow-down"], [1, "text-area-wrapper"], ["type", "text", 3, "keyup.enter", "input", "disabled", "placeholder"], [1, "button-area"], ["kendoButton", ""], ["kendoButton", "", 1, "stop-button"], ["kendoButton", "", 3, "disabled"], ["kendoButton", "", 1, "share-button"], ["kendoButton", "", 1, "test-button", 2, "background-color", "#ff0000", "color", "white"], [1, "fa-solid", "fa-flask", 3, "click"], [1, "fa-solid", "fa-gear", 3, "click"], ["kendoButton", "", 1, "stop-button", 3, "click"], [1, "fas", "fa-solid", "fa-stop"], ["kendoButton", "", 3, "click", "disabled"], [1, "fas", "fa-solid", "fa-arrow-up"], [1, "fa-solid", "fa-share", 3, "click"], [3, "NavigateToMatchingReport", "NewReportCreated", "DrillDownEvent", "ArtifactInfoChanged", "ArtifactID", "ArtifactVersionID", "DataContext"], [3, "dialogClosed", "dataContextId", "Provider"], ["title", "Share Conversation", 3, "close", "width", "height"], [3, "Provider", "ResourceTypeID", "ResourceRecordID", "ExcludedRoleNames", "ExcludedUserEmails"], ["kendoButton", "", "themeColor", "primary", 3, "click"], ["kendoButton", "", 3, "click"], ["title", "Please confirm", 3, "close", "minWidth", "width"], [2, "margin", "30px", "text-align", "center"]], template: function SkipChatComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { AllowSend: "AllowSend", Messages: "Messages", Conversations: "Conversations", SelectedConversation: "SelectedConversation", ConversationEditMode: "ConversationEditMode", ShowConversationList: "ShowConversationList", AllowNewConversations: "AllowNewConversations", Title: "Title", DataContextID: "DataContextID", LinkedEntity: "LinkedEntity", LinkedEntityCompositeKey: "LinkedEntityCompositeKey", ShowDataContextButton: "ShowDataContextButton", IncludeLinkedConversationsInList: "IncludeLinkedConversationsInList", SkipLogoURL: "SkipLogoURL", SkipMarkOnlyLogoURL: "SkipMarkOnlyLogoURL", UserImage: "UserImage", VerboseLogging: "VerboseLogging", UpdateAppRoute: "UpdateAppRoute", ShowSkipLogoInConversationList: "ShowSkipLogoInConversationList", ShowSharingButton: "ShowSharingButton", SharingExcludeRoleNames: "SharingExcludeRoleNames", SharingExcludeEmails: "SharingExcludeEmails", EnableArtifactSplitView: "EnableArtifactSplitView", DefaultSplitRatio: "DefaultSplitRatio", DefaultTextboxPlaceholder: "DefaultTextboxPlaceholder", ProcessingTextBoxPlaceholder: "ProcessingTextBoxPlaceholder", WelcomeQuestions: "WelcomeQuestions", AutoLoad: "AutoLoad" }, outputs: { NavigateToMatchingReport: "NavigateToMatchingReport", ConversationSelected: "ConversationSelected", NewReportCreated: "NewReportCreated", DrillDownEvent: "DrillDownEvent", ArtifactSelected: "ArtifactSelected", ArtifactViewed: "ArtifactViewed" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 24, vars: 18, consts: [["topLevelDiv", ""], ["splitPanel", ""], ["AskSkipPanel", ""], ["scrollContainer", ""], ["conversationList", ""], ["AskSkipInput", ""], ["resourcePermissions", ""], ["kendoDialogContainer", "", 1, "chat-container"], [1, "layout"], [1, "left-panel"], [1, "fa-solid", "fa-table-columns", "toggle-icon"], [1, "right-panel"], ["mjFillContainer", "", 3, "SplitRatioChanged", "VersionSelected", "Mode", "SplitRatio", "RightPanelHeaderContent", "VersionList", "SelectedVersionId", "fillWidth", "fillHeight"], ["left-panel", "", 1, "conversation-wrapper"], [2, "width", "0", "height", "0", "overflow", "hidden", "position", "absolute"], [1, "messages", 3, "scroll"], ["class", "welcome-wrapper", 4, "ngIf"], [1, "loading-convo-messages-wrapper"], ["mjContainer", "", "mjSkipResize", "true", 1, "messages-container"], ["class", "scroll-to-bottom-icon", 3, "left", "click", 4, "ngIf"], [1, "input-area"], ["right-panel", ""], [3, "ArtifactID", "ArtifactVersionID", "DataContext", "NavigateToMatchingReport", "NewReportCreated", "DrillDownEvent", "ArtifactInfoChanged", 4, "ngIf"], [3, "dataContextId", "Provider"], ["title", "Share Conversation", 3, "width", "height"], ["title", "Please confirm", 3, "minWidth", "width", "close", 4, "ngIf"], [1, "conversation-history"], [1, "new-chat-area"], [1, "fa-solid", "fa-table-columns", "toggle-icon", 3, "click"], [1, "avatar", 3, "src"], [1, "fa-solid", "fa-pen-to-square", "new-convo-icon"], [1, "conversation-list", 3, "data", "itemClass"], ["kendoListViewItemTemplate", ""], [1, "fa-solid", "fa-pen-to-square", "new-convo-icon", 3, "click"], [1, "conversation-item", 3, "click", "ngClass", "title"], ["class", "fa-regular fa-clock", 4, "ngIf"], [1, "text-container"], [4, "ngIf"], ["maxlength", "100", 3, "ngModel", "ngModelChange", 4, "ngIf"], ["class", "edit-conversation-panel", 4, "ngIf"], [1, "fa-regular", "fa-clock"], ["maxlength", "100", 3, "ngModelChange", "ngModel"], [1, "edit-conversation-panel"], ["class", "fa-solid fa-pen-to-square", 3, "click", 4, "ngIf"], ["class", "fa-regular fa-trash-can", 3, "click", 4, "ngIf"], ["class", "fa-solid fa-check", 3, "click", 4, "ngIf"], ["class", "fa-solid fa-xmark", 3, "click", 4, "ngIf"], [1, "fa-solid", "fa-pen-to-square", 3, "click"], [1, "fa-regular", "fa-trash-can", 3, "click"], [1, "fa-solid", "fa-check", 3, "click"], [1, "fa-solid", "fa-xmark", 3, "click"], [1, "welcome-wrapper"], [1, "welcome-message"], [3, "src"], [1, "welcome-header-text"], [1, "welcome-suggested-questions"], [1, "welcome-suggested-questions-col"], [1, "welcome-question", 3, "click"], [1, "welcome-question-header"], [1, "scroll-to-bottom-icon", 3, "click"], [1, "fas", "fa-arrow-down"], [1, "text-area-wrapper"], ["type", "text", 3, "keyup.enter", "input", "disabled", "placeholder"], [1, "button-area"], ["kendoButton", ""], ["kendoButton", "", 1, "stop-button"], ["kendoButton", "", 3, "disabled"], ["kendoButton", "", 1, "share-button"], [1, "fa-solid", "fa-gear", 3, "click"], ["kendoButton", "", 1, "stop-button", 3, "click"], [1, "fas", "fa-solid", "fa-stop"], ["kendoButton", "", 3, "click", "disabled"], [1, "fas", "fa-solid", "fa-arrow-up"], [1, "fa-solid", "fa-share", 3, "click"], [3, "NavigateToMatchingReport", "NewReportCreated", "DrillDownEvent", "ArtifactInfoChanged", "ArtifactID", "ArtifactVersionID", "DataContext"], [3, "dialogClosed", "dataContextId", "Provider"], ["title", "Share Conversation", 3, "close", "width", "height"], [3, "Provider", "ResourceTypeID", "ResourceRecordID", "ExcludedRoleNames", "ExcludedUserEmails"], ["kendoButton", "", "themeColor", "primary", 3, "click"], ["kendoButton", "", 3, "click"], ["title", "Please confirm", 3, "close", "minWidth", "width"], [2, "margin", "30px", "text-align", "center"]], template: function SkipChatComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 7, 0)(2, "div", 8);
-            i0.ɵɵtemplate(3, SkipChatComponent_Conditional_3_Template, 9, 7, "div", 9)(4, SkipChatComponent_Conditional_4_Template, 1, 0, "span", 10);
+            i0.ɵɵtemplate(3, SkipChatComponent_Conditional_3_Template, 9, 5, "div", 9)(4, SkipChatComponent_Conditional_4_Template, 1, 0, "span", 10);
             i0.ɵɵelementStart(5, "div", 11)(6, "skip-split-panel", 12, 1);
             i0.ɵɵlistener("SplitRatioChanged", function SkipChatComponent_Template_skip_split_panel_SplitRatioChanged_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSplitRatioChanged($event)); })("VersionSelected", function SkipChatComponent_Template_skip_split_panel_VersionSelected_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onArtifactVersionSelected($event)); });
             i0.ɵɵelementStart(8, "div", 13);
@@ -3006,7 +2356,7 @@ export class SkipChatComponent extends BaseAngularComponent {
             i0.ɵɵelement(15, "div", 18);
             i0.ɵɵtemplate(16, SkipChatComponent_span_16_Template, 2, 2, "span", 19);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(17, SkipChatComponent_Conditional_17_Template, 11, 7, "div", 20);
+            i0.ɵɵtemplate(17, SkipChatComponent_Conditional_17_Template, 9, 7, "div", 20);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(18, "div", 21);
             i0.ɵɵtemplate(19, SkipChatComponent_skip_artifact_viewer_19_Template, 1, 3, "skip-artifact-viewer", 22);
@@ -3041,7 +2391,7 @@ export class SkipChatComponent extends BaseAngularComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SkipChatComponent, [{
         type: Component,
-        args: [{ selector: 'skip-chat', template: "<div class=\"chat-container\" kendoDialogContainer #topLevelDiv>\n    <div class=\"layout\">\n        @if (IsConversationListVisible) {\n            <div class=\"left-panel\">\n                <div class=\"conversation-history\">\n                    <div class=\"new-chat-area\">\n                        <span class=\"fa-solid fa-table-columns toggle-icon\" (click)=\"DisplayConversationList(false)\"></span>\n                        @if (ShowSkipLogoInConversationList) {\n                            <img [src]=\"SkipLogoURL\" class=\"avatar\" />\n                        }\n                        @if (AllowNewConversations) {\n                            <span class=\"fa-solid fa-pen-to-square new-convo-icon\" (click)=\"CreateNewConversation()\"></span>                            \n                        }\n                    </div>\n                    <kendo-listview\n                        class=\"conversation-list\"\n                        [data]=\"Conversations\"\n                        [style.height.px]=\"280\"\n                        [itemClass]=\"{ 'item-border': true }\" \n                        #conversationList\n                        >\n                        <ng-template kendoListViewItemTemplate let-dataItem=\"dataItem\">\n                            <div class=\"conversation-item\" \n                                    [ngClass]=\"GetConversationItemClass(dataItem)\"\n                                    [title]=\"dataItem.Name\" \n                                    (click)=\"SelectConversation(dataItem)\"> \n                                <span *ngIf=\"SelectedConversation && IsSkipProcessing(dataItem)\" class=\"fa-regular fa-clock\"></span>\n                                <div class=\"text-container\">\n                                    <span *ngIf=\"dataItem.ID !== SelectedConversation?.ID || !ConversationEditMode\">{{ dataItem.Name }}</span>\n                                    <textarea *ngIf=\"dataItem.ID === SelectedConversation?.ID && ConversationEditMode\" [(ngModel)]=\"dataItem.Name\" maxlength=\"100\"></textarea>\n                                </div>\n                                <div *ngIf=\"SelectedConversation?.ID === dataItem.ID\" class=\"edit-conversation-panel\">\n                                    <span *ngIf=\"!ConversationEditMode\" class=\"fa-solid fa-pen-to-square\" (click)=\"editConvo(dataItem)\"></span>\n                                    <span *ngIf=\"!ConversationEditMode\" class=\"fa-regular fa-trash-can\" (click)=\"showDeleteConvoDialog(dataItem)\"></span>\n                                    <span *ngIf=\"ConversationEditMode\" class=\"fa-solid fa-check\" (click)=\"saveConvoName(dataItem)\"></span>\n                                    <span *ngIf=\"ConversationEditMode\" class=\"fa-solid fa-xmark\" (click)=\"cancelConvoEdit(dataItem)\"></span>\n                                </div>\n                            </div>\n                        </ng-template>\n                    </kendo-listview>\n                    <!-- COMMENTED OUT as we don't want to support embedded conversations in the UI for now\n                            <div class=\"embedded-conversations\"><input kendoCheckBox type=\"checkbox\" [(ngModel)]=\"IncludeLinkedConversationsInList\" (ngModelChange)=\"loadConversations()\"/> <span (click)=\"FlipEmbeddedConversationState()\">Show Linked Conversations</span></div> -->\n                </div>    \n            </div>\n        }\n        @if (!IsConversationListVisible) {\n            <span class=\"fa-solid fa-table-columns toggle-icon\" (click)=\"DisplayConversationList(true)\"></span>\n        }\n\n        <div class=\"right-panel\">\n            <skip-split-panel \n                #splitPanel\n                [Mode]=\"EnableArtifactSplitView && selectedArtifact ? 'BothSides' : 'LeftOnly'\" \n                [SplitRatio]=\"SplitRatio\" \n                (SplitRatioChanged)=\"onSplitRatioChanged($event)\"\n                [RightPanelHeaderContent]=\"artifactHeaderInfo\"\n                [VersionList]=\"artifactVersionList\"\n                [SelectedVersionId]=\"selectedArtifactVersionId\"\n                (VersionSelected)=\"onArtifactVersionSelected($event)\"\n                mjFillContainer [fillWidth]=\"false\" [fillHeight]=\"true\">\n                \n                <!-- Left Panel (Chat) -->\n                <div left-panel class=\"conversation-wrapper\">\n                    <!-- Use this for reference only, but don't display - hidden via width:0, height:0 -->\n                    <div #AskSkipPanel style=\"width:0; height:0; overflow:hidden; position:absolute;\"></div>\n                    \n                    <div class=\"messages\" #scrollContainer (scroll)=\"checkScroll()\">\n                        <div class=\"welcome-wrapper\" *ngIf=\"(!Messages || Messages.length ===0) && _conversationLoadComplete\">\n                            <div class='welcome-message'>\n                                <img [src]=\"SkipLogoURL\" />\n                                <div class=\"welcome-header-text\">What can I help with today?</div>\n                            </div>\n                            <div class='welcome-suggested-questions'>\n                                <div class=\"welcome-suggested-questions-col\">\n                                    <div class=\"welcome-question\" (click)=\"sendPrompt(WelcomeQuestions[0].prompt)\">\n                                        <span class=\"welcome-question-header\">{{WelcomeQuestions[0].topLine}}</span>\n                                        <span>{{WelcomeQuestions[0].bottomLine}}</span>\n                                    </div>\n                                    <div class=\"welcome-question\" (click)=\"sendPrompt(WelcomeQuestions[1].prompt)\">\n                                        <span class=\"welcome-question-header\">{{WelcomeQuestions[1].topLine}}</span>\n                                        <span>{{WelcomeQuestions[1].bottomLine}}</span>\n                                    </div>    \n                                </div>\n                                <div class=\"welcome-suggested-questions-col\">\n                                    <div class=\"welcome-question\" (click)=\"sendPrompt(WelcomeQuestions[2].prompt)\">\n                                        <span class=\"welcome-question-header\">{{WelcomeQuestions[2].topLine}}</span>\n                                        <span>{{WelcomeQuestions[2].bottomLine}}</span>\n                                    </div>\n                                    <div class=\"welcome-question\" (click)=\"sendPrompt(WelcomeQuestions[3].prompt)\">\n                                        <span class=\"welcome-question-header\">{{WelcomeQuestions[3].topLine}}</span>\n                                        <span>{{WelcomeQuestions[3].bottomLine}}</span>\n                                    </div>    \n                                </div>\n                            </div>    \n                        </div>\n                        @if (!_conversationLoadComplete) {\n                            <div class=\"loading-convo-messages-wrapper\">\n                                <kendo-loader></kendo-loader>\n                            </div>\n                        }   \n                        <div class=\"messages-container\" mjContainer mjSkipResize=\"true\"><!--mjSkipResize results in everything below this level NOT being resized, performance optimization-->\n                            <!-- Dynamic messages will be injected here -->\n                        </div>\n                        <span class=\"scroll-to-bottom-icon\" \n                              *ngIf=\"_showScrollToBottomIcon && Messages && Messages.length > 0\" \n                              [style.left.px]=\"getScrollToBottomIconPosition()\"\n                              (click)=\"scrollToBottomAnimate()\">\n                            <i class=\"fas fa-arrow-down\"></i>\n                        </span>\n                    </div>\n                    @if (SelectedConversationCurrentUserPermissionLevel === 'Owner' || \n                        SelectedConversationCurrentUserPermissionLevel === 'Edit') {\n                        <div class=\"input-area\">\n                            <div class=\"text-area-wrapper\">\n                                <textarea\n                                    #AskSkipInput \n                                    [disabled]=\"SelectedConversation && IsSkipProcessing(SelectedConversation)\" \n                                    (keyup.enter)=\"onEnter($event)\" \n                                    (input)=\"onInputChange($event)\"\n                                    type=\"text\" \n                                    [placeholder]=\"_AskSkipTextboxPlaceholder\"></textarea>\n                            </div>\n                            <div class=\"button-area\" [style.marginLeft.px]=\"-35 * NumVisibleButtons\">\n                                @if (ShowDataContextButton) {\n                                    <button kendoButton >\n                                        <span class=\"fa-solid fa-gear\" \n                                                (click)=\"showDataContextDialog()\"></span>\n                                    </button>    \n                                }\n                                @if (SelectedConversation && IsSkipProcessing(SelectedConversation)) {\n                                    <button kendoButton \n                                        class=\"stop-button\"\n                                        (click)=\"stopProcessing()\">\n                                        <span class=\"fas fa-solid fa-stop\"></span>\n                                    </button>\n                                }\n                                @else {\n                                    <button kendoButton \n                                        [disabled]=\"IsTextAreaEmpty()\" \n                                        (click)=\"sendSkipMessage()\">\n                                        <span class=\"fas fa-solid fa-arrow-up\"></span>\n                                    </button>\n                                }\n                                @if (ShowSharingButton && SelectedConversationCurrentUserPermissionLevel === 'Owner') {\n                                    <button kendoButton class=\"share-button\">\n                                        <span class=\"fa-solid fa-share\"\n                                                (click)=\"showSharingDialog()\"></span>\n                                    </button>    \n                                }\n                                <!-- TEMPORARY TEST BUTTON -->\n                                <button kendoButton class=\"test-button\" style=\"background-color: #ff0000; color: white;\">\n                                    <span class=\"fa-solid fa-flask\"\n                                            (click)=\"testButtonClick()\"></span>\n                                </button>\n                            </div>\n                        </div>\n                    }\n                </div>\n                \n                <!-- Right Panel (Artifact Viewer) -->\n                <div right-panel>\n                    <skip-artifact-viewer\n                        *ngIf=\"selectedArtifact\"\n                        [ArtifactID]=\"selectedArtifact.artifactId\"\n                        [ArtifactVersionID]=\"selectedArtifact.artifactVersionId\"\n                        [DataContext]=\"DataContext\"\n                        (NavigateToMatchingReport)=\"NavigateToMatchingReport.emit($event)\"\n                        (NewReportCreated)=\"NewReportCreated.emit($event)\"\n                        (DrillDownEvent)=\"DrillDownEvent.emit($event)\"\n                        (ArtifactInfoChanged)=\"onArtifactInfoChanged($event)\">\n                    </skip-artifact-viewer>\n                </div>\n            </skip-split-panel>\n        </div>    \n    </div> \n</div>     \n\n@if(isDataContextDialogVisible) {\n    <mj-data-context-dialog [dataContextId]=\"DataContextID\" (dialogClosed)=\"closeDataContextDialog()\" [Provider]=\"ProviderToUse\"></mj-data-context-dialog>\n}\n@if(isSharingDialogVisible && SelectedConversation && conversationResourceTypeID) {\n    <kendo-dialog\n        title=\"Share Conversation\"\n        (close)=\"closeSharingDialog('no')\"\n        [width]=\"650\"\n        [height]=\"400\"\n    >\n        <mj-resource-permissions \n            [Provider]=\"Provider\"\n            [ResourceTypeID]=\"conversationResourceTypeID\"\n            [ResourceRecordID]=\"SelectedConversation.ID\"\n            [ExcludedRoleNames]=\"SharingExcludeRoleNames\"\n            [ExcludedUserEmails]=\"SharingExcludeEmails\"\n            #resourcePermissions\n        >\n        </mj-resource-permissions>\n        <kendo-dialog-actions>\n            <button kendoButton (click)=\"closeSharingDialog('yes')\" themeColor=\"primary\">\n                Save\n            </button>\n        <button kendoButton (click)=\"closeSharingDialog('no')\">\n            Cancel\n        </button>\n        </kendo-dialog-actions>\n    </kendo-dialog>    \n}\n\n<kendo-dialog\n    title=\"Please confirm\"\n    *ngIf=\"confirmDeleteConversationDialogOpen\"\n    (close)=\"closeDeleteConversation('no')\"\n    [minWidth]=\"250\"\n    [width]=\"450\"\n>\n    <p style=\"margin: 30px; text-align: center;\">\n        Would you like to delete {{SelectedConversation?.Name}}?\n    </p>\n    <kendo-dialog-actions>\n        <button kendoButton (click)=\"closeDeleteConversation('yes')\" themeColor=\"primary\">\n            Yes\n        </button>\n    <button kendoButton (click)=\"closeDeleteConversation('no')\">\n        No\n    </button>\n    </kendo-dialog-actions>\n</kendo-dialog>    \n\n<kendo-dialog\n    title=\"Please confirm\"\n    *ngIf=\"confirmMessageEditOrDeleteDialogOpen\"\n    (close)=\"closeMessageEditOrDeleteDialog('no')\"\n    [minWidth]=\"250\"\n    [width]=\"450\"\n>\n    <p style=\"margin: 30px; text-align: center;\">\n        Would you like to {{messageEditOrDeleteType}} this message? Doing so will result in any subsequent messages in the conversation being deleted.\n    </p>\n    <kendo-dialog-actions>\n        <button kendoButton (click)=\"closeMessageEditOrDeleteDialog('yes')\" themeColor=\"primary\">\n            Yes\n        </button>\n    <button kendoButton (click)=\"closeMessageEditOrDeleteDialog('no')\">\n        No\n    </button>\n    </kendo-dialog-actions>\n</kendo-dialog>  ", styles: [".layout {\n    display: flex;\n    flex-direction: row; /* Ensures left and right panels are side by side */\n    height: 100%; /* Fill the available height */\n    width: 100%; /* Fill the available width */\n    position: relative;\n    overflow: hidden; /* Prevent content from expanding beyond container */\n}\n\n.left-panel {\n    width: 272px; /* Fixed width for the conversation list */\n    background-color: #f8f9fa; /* Optional: Background color */\n    border-right: 1px solid #ddd; /* Optional: Add a divider */\n    overflow-y: auto; /* Enable scrolling if content overflows */\n    overflow-x: hidden; /* Hide horizontal scrollbar */\n    position: relative;\n\n    scrollbar-width: thin; /* For Firefox */\n    scrollbar-color: #d3d3d3 #f8f9fa; /* Thumb color and track color */\n}\n\n/* For WebKit-based browsers (Chrome, Edge, Safari) */\n.left-panel::-webkit-scrollbar {\n    width: 8px; /* Narrower scrollbar */\n    background-color: #f8f9fa; /* Scrollbar track color */\n}\n\n.left-panel::-webkit-scrollbar-thumb {\n    background-color: #d3d3d3; /* Lighter gray scrollbar thumb */\n    border-radius: 4px; /* Rounded corners for the thumb */\n}\n\n.left-panel::-webkit-scrollbar-thumb:hover {\n    background-color: #c0c0c0; /* Slightly darker gray on hover */\n}\n\n.left-panel::-webkit-scrollbar-track {\n    background-color: #f8f9fa; /* Background of the scrollbar track */\n}\n\n.right-panel {\n    flex: 1; /* Take up the remaining space */\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    max-height: 100%; /* Don't exceed parent container height */\n    overflow: hidden; /* Hide overflow to prevent double scrollbars */\n}\n\n.conversation-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 8px 16px;\n    background-color: #f5f7f9;\n    border-bottom: 1px solid #dde4ee;\n    height: 40px;\n    flex-shrink: 0;\n}\n\n.conversation-title {\n    font-size: 15px;\n    font-weight: 500;\n    color: #333;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 70%;\n}\n\n.artifact-counter-container {\n    display: flex;\n    align-items: center;\n}\n\n\n.new-convo-icon {\n    color: #808080; /* Mid-gray */\n    font-size: 18px; /* Adjust icon size */\n    cursor: pointer; /* Make it clear the icon is clickable */\n    z-index: 10; /* Ensure the icon is above other content */\n    padding: 5px;\n    border-radius: 4px;\n}\n\n.toggle-icon {\n    color: #808080; /* Mid-gray */\n    font-size: 18px; /* Adjust icon size */\n    cursor: pointer; /* Make it clear the icon is clickable */\n    z-index: 10; /* Ensure the icon is above other content */\n    margin-left: 6px;\n    padding: 3px;\n    border-radius: 3px;\n}\n \n\n.right-panel .toggle-icon {\n    margin-left: 3px;\n    margin-top: 2px;\n    position: absolute;\n    top: 10px;\n    left: auto;\n    right: 10px; /* For the right panel toggle */\n}\n\n\n.chat-container {\n    padding: 5px;\n    display: flex;\n    flex-direction: row;\n    height: calc(100vh - 111px);\n    font-family: S\u00F6hne, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"Helvetica Neue\", Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    font-size: 1rem;\n    /*initial sizes*/\n    width: 100%;\n    overflow: hidden; /* Prevent container from growing beyond viewport */\n    background-color: #f9f9f9;\n}\n\n.conversation-wrapper {\n    display: flex;\n    flex-direction: column;\n    position: relative; /* This ensures child absolute elements position relative to this container */\n    background-color: #f9f9f9;\n    height: 100%; /* Ensure it takes full height */\n    max-height: 100%; /* Don't exceed parent container height */\n    flex: 1;\n    overflow: auto; /* Allow content to scroll */\n}\n\n.new-conversation {\n    height: 30px;\n    font-size: large;\n}\n\n.conversation-history {\n    width: 240px;\n    min-width: 240px;\n    height: 95%;\n    overflow-y: auto; /* Add scroll if the content exceeds the height */\n    overflow-x: hidden; /* Hide horizontal scrollbar */\n    margin-right: 10px;\n    padding-top: 5px;\n    background-color: #f9f9f9;\n    margin-top: 0px;  \n    padding: 12px;  \n}\n\n.k-tabstrip-content-for-skip {\n    padding: 0;\n    padding-block: 0;\n}\n\n\n.conversation-history > button {\n    height: 25px;\n}\n\n.skip-title {\n    font-size: larger;\n    margin-bottom: 5px;\n    height: 20px;\n    margin-top: 5px;\n}\n\n.conversation-list {\n    margin-top: 5px;\n    padding-top: 5px;\n    \n    border: 0;\n    background-color: #f9f9f9;\n}\n\n\n\n/* Center the welcome message vertically and horizontally */\n.welcome-wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 5;\n}\n\n.welcome-message {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    overflow: hidden;\n    height: 100%;\n    padding-bottom: 100px; /* Push the content up a bit */\n}\n\n.embedded-conversations {\n    margin-left: 3px;\n    margin-top: 5px;\n    font-size: 10pt;\n    color: rgb(48, 48, 235);\n}\n.embedded-conversations > span {\n    margin-top: 4px;\n    margin-left: 5px;\n    cursor: pointer;\n}\n.conversation-item-linked {\n    color: rgb(48, 48, 235);\n}\n\n.welcome-message img {\n    width: 120px;\n    height: 50px;\n    margin-bottom: 20px; /* Adds some space between the image and the text below */\n    position: relative;\n    z-index: 10;\n}\n\n.welcome-header-text {\n    font-size: larger;\n    font-weight: bold;\n}\n\n/* Position the welcome-suggested-questions at the bottom of its container */\n.welcome-suggested-questions {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-content: center;\n    margin-top: 30px; /* Push questions down for spacing */\n}\n.welcome-suggested-questions-col {\n    display: flex;\n    margin-bottom: 10px; /* Space between rows */\n}\n\n/* Flex layout for questions, two per row */\n.welcome-question {\n    display: flex;\n    flex-direction: column; /* Stack the header and text vertically */\n    align-items: left;;\n    width: 300px;  \n    justify-content: space-between;\n    margin: 5px; /* Adds some space around each question */\n    border: solid 1px rgba(41, 28, 28, 0.08);\n    border-radius: 15px;\n    padding: 10px;\n    cursor: pointer;\n}\n\n.welcome-question:hover {\n    background-color: rgba(0, 0, 0, 0.05);\n}\n\n\n.welcome-question-header {\n    font-size: 12pt;\n    font-weight: bold;\n    display: block; /* Ensures the header is on its own line */\n}\n\n/* Non-bold text for the content below the header */\n.welcome-question span:not(.welcome-question-header) {\n    font-weight: normal;\n    font-size: 10pt;\n}\n\n\n.messages {\n    overflow-y: auto !important; /* enable scrolling if the content overflows */\n    overflow-x: hidden !important; /* hide horizontal scrollbar */\n    /* border: solid 1px rgba(0, 0, 0, 0.08); */\n    margin-bottom: 5px;\n\n    margin-top: 2px; /* align it with the top of converation history exactly*/\n\n    background-color: #f9f9f9;\n    flex: 1 1 auto; /* Take up available space but don't push parent beyond size */\n    height: calc(100% - 50px); /* Ensure messages container has a height */\n    max-height: 100%; /* Don't exceed parent height */\n    scrollbar-width: thin; /* For Firefox */\n    scrollbar-color: #d3d3d3 #f8f9fa; /* Thumb color and track color */\n    position: relative; /* For proper positioning of scroll icon */\n}\n\n/* For WebKit-based browsers (Chrome, Edge, Safari) */\n.messages::-webkit-scrollbar {\n    width: 8px; /* Narrower scrollbar */\n    background-color: #f8f9fa; /* Scrollbar track color */\n}\n\n.messages::-webkit-scrollbar-thumb {\n    background-color: #d3d3d3; /* Lighter gray scrollbar thumb */\n    border-radius: 4px; /* Rounded corners for the thumb */\n}\n\n.messages::-webkit-scrollbar-thumb:hover {\n    background-color: #c0c0c0; /* Slightly darker gray on hover */\n}\n\n.messages::-webkit-scrollbar-track {\n    background-color: #f8f9fa; /* Background of the scrollbar track */\n}\n\n/* Class for the messages container */\n.messages-container {\n    min-height: 20px; /* Ensure container takes space even when empty */\n}\n\n\n\n.new-chat-area {\n    display: flex;\n    justify-content: space-between; /* Aligns children (img and button) to each end */\n    align-items: center; /* Centers children vertically */\n}\n.avatar {\n    max-height: 24px;\n    margin-right: 10px;\n    margin-left: 5px;\n    margin-bottom: 3px;\n    /* Ensure the image aligns to the left */\n    margin-right: auto; /* Pushes everything else to the right */\n}\n\n.conversation-item {\n    margin-left: 5px;\n    margin-right: 5px;\n    padding-top: 10px;\n    padding-bottom: 10px;\n    padding-left: 5px;\n    padding-right: 5px;\n    border-radius: 5px;\n    cursor: pointer;\n    overflow: hidden;\n    max-height: 150px;\n    font-size: 14px;\n\n    display: flex;\n    align-items: flex-start; /* Align items to the top */\n\n    flex-wrap: wrap; /* Allow items to wrap to the next line */\n}\n\n.text-container {\n    flex: 1; /* Take up remaining space */\n    display: flex;\n    flex-direction: column; /* Stack children vertically */\n}\n\n.text-container textarea {\n    resize: none; /* Disable resizing */\n    /* Add more styles for the textarea if needed */\n}\n\n.conversation-item > .conversation-icon {\n    margin-top: 3px;\n}\n\n.conversation-item span {\n    display: inline-block;\n    white-space: pre-wrap;  /* Allow text to wrap */\n    overflow: auto;\n    word-wrap: break-word;\n    margin-left: 3px;     /* Move the text to the right */\n}\n\n.conversation-item:hover {\n    background-color: rgba(0, 0, 0, 0.05);\n}\n.conversation-item-selected {\n    background-color: rgba(0, 0, 0, 0.15);\n}\n\n\n.conversation-item > .conversation-icon {\n    margin-right: 11px;\n}\n.edit-conversation-panel {\n    display: flex;\n    justify-content: flex-end; /* Align icons to the right */\n    margin-top: 2px; /* litle buffer on top */\n    margin-right: 2px; /* litle buffer to the right */\n}\n.edit-conversation-panel > .k-icon {\n    margin-left: 5px;\n    cursor: pointer;\n}\n.edit-conversation-panel > .k-icon:hover {\n    color: #ff0000;\n}\n\n\n\n.input-area {\n    min-height: 35px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 15px;\n    position: sticky;\n    bottom: 0;\n    background-color: #f9f9f9;\n    z-index: 10;\n}\n\n.input-area > .button-area {\n    vertical-align: top;\n    margin-top: 3px;\n    margin-left: -65px;\n}\n/*all buttons in the button area within the input area*/\n.button-area > button {\n    width: 30px;\n    height: 30px;\n    border-radius: 12px;\n    margin-left: 3px;\n}\n\n/* Stop button styling */\n.button-area > button.stop-button {\n    background-color: #dc3545;\n    color: white;\n}\n\n.button-area > button.stop-button:hover {\n    background-color: #c82333;\n}\n/* .input-area > button:first-of-type {\n    margin-left: -40px;\n}\n.input-area > button:last-child {\n    margin-left: -65px;\n}\n.input-area > .share-button {\n    margin-left: 10px;\n} */\n\n.text-area-wrapper {\n    padding: 3px;\n    border: solid 1px rgba(0, 0, 0, 0.08) ;\n    border-radius: 15px;\n\n    margin-top: 4px;\n    margin-right: -1px;\n    min-height: 42px;\n    max-height: 100%; /* Prevent it from growing beyond the container */\n\n    overflow: hidden;    \n    align-items: center;\n\n    /*combined width and padding is 800*/\n    width: 710px;    \n    padding-right: 90px\n} \n.text-area-wrapper > textarea {\n    border: 0;\n    outline: 0;\n    resize: none;\n\n    min-height: 20px; /* Initial height */\n\n    width: 100%;\n    overflow-y: hidden; /* Hide scrollbar */\n\n    font-family: S\u00F6hne, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"Helvetica Neue\", Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    font-size: 1rem;\n\n    margin-left: 7px;\n    margin-top: 7px;\n    margin-bottom: 5px;\n\n    background-color: #f9f9f9;\n}\n\n/* .text-area-wrapper > textarea:disabled {\n    background-color: white;\n} */\n\n.input-wrapper {\n    flex-grow: 1; /* This will make the input-wrapper take the remaining space */\n    height: 100%;\n}\n\n.waiting-for-ai {\n    position: absolute;\n    display: flex; /* Use flexbox layout */\n    bottom: 100px;\n    z-index: 999;\n    left: 10px; \n}\n  \n.scroll-to-bottom-icon {\n    position: fixed; /* Fixed positioning to float over content */\n    bottom: 120px; /* Position relative to the viewport */\n    /* left position will be set dynamically via inline style */\n    transform: translateX(-50%); /* Shift it back by half its width to center it */\n    z-index: 1000; /* Ensure it stays on top */\n    background-color: white; /* Circle background color */\n    color: black; /* Icon color */\n    border-radius: 50%; /* Makes the background a circle */\n    width: 40px; /* Circle size */\n    height: 40px; /* Circle size */\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    box-shadow: 0px 0px 5px rgba(0,0,0,0.3); /* Subtle shadow for better visibility */\n    cursor: pointer;\n    opacity: 0.9; /* Slightly transparent */\n}\n\n.loading-convo-messages-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    z-index: 1000;\n}\n\n@media (min-width: 600px) {\n    .welcome-suggested-questions {\n        display: flex;\n        flex-wrap: wrap; /* Allows questions to wrap to the next line */\n        align-content: flex-end; /* Aligns the content to the bottom */\n    }\n}\n  \n"] }]
+        args: [{ selector: 'skip-chat', template: "<div class=\"chat-container\" kendoDialogContainer #topLevelDiv>\n    <div class=\"layout\">\n        @if (IsConversationListVisible) {\n            <div class=\"left-panel\">\n                <div class=\"conversation-history\">\n                    <div class=\"new-chat-area\">\n                        <span class=\"fa-solid fa-table-columns toggle-icon\" (click)=\"DisplayConversationList(false)\"></span>\n                        @if (ShowSkipLogoInConversationList) {\n                            <img [src]=\"SkipLogoURL\" class=\"avatar\" />\n                        }\n                        @if (AllowNewConversations) {\n                            <span class=\"fa-solid fa-pen-to-square new-convo-icon\" (click)=\"CreateNewConversation()\"></span>                            \n                        }\n                    </div>\n                    <kendo-listview\n                        class=\"conversation-list\"\n                        [data]=\"Conversations\"\n                        [itemClass]=\"{ 'item-border': true }\" \n                        #conversationList\n                        >\n                        <ng-template kendoListViewItemTemplate let-dataItem=\"dataItem\">\n                            <div class=\"conversation-item\" \n                                    [ngClass]=\"GetConversationItemClass(dataItem)\"\n                                    [title]=\"dataItem.Name\" \n                                    (click)=\"SelectConversation(dataItem)\"> \n                                <span *ngIf=\"SelectedConversation && IsSkipProcessing(dataItem)\" class=\"fa-regular fa-clock\"></span>\n                                <div class=\"text-container\">\n                                    <span *ngIf=\"dataItem.ID !== SelectedConversation?.ID || !ConversationEditMode\">{{ dataItem.Name }}</span>\n                                    <textarea *ngIf=\"dataItem.ID === SelectedConversation?.ID && ConversationEditMode\" [(ngModel)]=\"dataItem.Name\" maxlength=\"100\"></textarea>\n                                </div>\n                                <div *ngIf=\"SelectedConversation?.ID === dataItem.ID\" class=\"edit-conversation-panel\">\n                                    <span *ngIf=\"!ConversationEditMode\" class=\"fa-solid fa-pen-to-square\" (click)=\"editConvo(dataItem)\"></span>\n                                    <span *ngIf=\"!ConversationEditMode\" class=\"fa-regular fa-trash-can\" (click)=\"showDeleteConvoDialog(dataItem)\"></span>\n                                    <span *ngIf=\"ConversationEditMode\" class=\"fa-solid fa-check\" (click)=\"saveConvoName(dataItem)\"></span>\n                                    <span *ngIf=\"ConversationEditMode\" class=\"fa-solid fa-xmark\" (click)=\"cancelConvoEdit(dataItem)\"></span>\n                                </div>\n                            </div>\n                        </ng-template>\n                    </kendo-listview>\n                    <!-- COMMENTED OUT as we don't want to support embedded conversations in the UI for now\n                            <div class=\"embedded-conversations\"><input kendoCheckBox type=\"checkbox\" [(ngModel)]=\"IncludeLinkedConversationsInList\" (ngModelChange)=\"loadConversations()\"/> <span (click)=\"FlipEmbeddedConversationState()\">Show Linked Conversations</span></div> -->\n                </div>    \n            </div>\n        }\n        @if (!IsConversationListVisible) {\n            <span class=\"fa-solid fa-table-columns toggle-icon\" (click)=\"DisplayConversationList(true)\"></span>\n        }\n\n        <div class=\"right-panel\">\n            <skip-split-panel \n                #splitPanel\n                [Mode]=\"EnableArtifactSplitView && selectedArtifact ? 'BothSides' : 'LeftOnly'\" \n                [SplitRatio]=\"SplitRatio\" \n                (SplitRatioChanged)=\"onSplitRatioChanged($event)\"\n                [RightPanelHeaderContent]=\"artifactHeaderInfo\"\n                [VersionList]=\"artifactVersionList\"\n                [SelectedVersionId]=\"selectedArtifactVersionId\"\n                (VersionSelected)=\"onArtifactVersionSelected($event)\"\n                mjFillContainer [fillWidth]=\"false\" [fillHeight]=\"true\">\n                \n                <!-- Left Panel (Chat) -->\n                <div left-panel class=\"conversation-wrapper\">\n                    <!-- Use this for reference only, but don't display - hidden via width:0, height:0 -->\n                    <div #AskSkipPanel style=\"width:0; height:0; overflow:hidden; position:absolute;\"></div>\n                    \n                    <div class=\"messages\" #scrollContainer (scroll)=\"checkScroll()\">\n                        <div class=\"welcome-wrapper\" *ngIf=\"(!Messages || Messages.length ===0) && _conversationLoadComplete\">\n                            <div class='welcome-message'>\n                                <img [src]=\"SkipLogoURL\" />\n                                <div class=\"welcome-header-text\">What can I help with today?</div>\n                            </div>\n                            <div class='welcome-suggested-questions'>\n                                <div class=\"welcome-suggested-questions-col\">\n                                    <div class=\"welcome-question\" (click)=\"sendPrompt(WelcomeQuestions[0].prompt)\">\n                                        <span class=\"welcome-question-header\">{{WelcomeQuestions[0].topLine}}</span>\n                                        <span>{{WelcomeQuestions[0].bottomLine}}</span>\n                                    </div>\n                                    <div class=\"welcome-question\" (click)=\"sendPrompt(WelcomeQuestions[1].prompt)\">\n                                        <span class=\"welcome-question-header\">{{WelcomeQuestions[1].topLine}}</span>\n                                        <span>{{WelcomeQuestions[1].bottomLine}}</span>\n                                    </div>    \n                                </div>\n                                <div class=\"welcome-suggested-questions-col\">\n                                    <div class=\"welcome-question\" (click)=\"sendPrompt(WelcomeQuestions[2].prompt)\">\n                                        <span class=\"welcome-question-header\">{{WelcomeQuestions[2].topLine}}</span>\n                                        <span>{{WelcomeQuestions[2].bottomLine}}</span>\n                                    </div>\n                                    <div class=\"welcome-question\" (click)=\"sendPrompt(WelcomeQuestions[3].prompt)\">\n                                        <span class=\"welcome-question-header\">{{WelcomeQuestions[3].topLine}}</span>\n                                        <span>{{WelcomeQuestions[3].bottomLine}}</span>\n                                    </div>    \n                                </div>\n                            </div>    \n                        </div>\n                        @if (!_conversationLoadComplete) {\n                            <div class=\"loading-convo-messages-wrapper\">\n                                <kendo-loader></kendo-loader>\n                            </div>\n                        }   \n                        <div class=\"messages-container\" mjContainer mjSkipResize=\"true\"><!--mjSkipResize results in everything below this level NOT being resized, performance optimization-->\n                            <!-- Dynamic messages will be injected here -->\n                        </div>\n                        <span class=\"scroll-to-bottom-icon\" \n                              *ngIf=\"_showScrollToBottomIcon && Messages && Messages.length > 0\" \n                              [style.left.px]=\"getScrollToBottomIconPosition()\"\n                              (click)=\"scrollToBottomAnimate()\">\n                            <i class=\"fas fa-arrow-down\"></i>\n                        </span>\n                    </div>\n                    @if (SelectedConversationCurrentUserPermissionLevel === 'Owner' || \n                        SelectedConversationCurrentUserPermissionLevel === 'Edit') {\n                        <div class=\"input-area\">\n                            <div class=\"text-area-wrapper\">\n                                <textarea\n                                    #AskSkipInput \n                                    [disabled]=\"SelectedConversation && IsSkipProcessing(SelectedConversation)\" \n                                    (keyup.enter)=\"onEnter($event)\" \n                                    (input)=\"onInputChange($event)\"\n                                    type=\"text\" \n                                    [placeholder]=\"_AskSkipTextboxPlaceholder\"></textarea>\n                            </div>\n                            <div class=\"button-area\" [style.marginLeft.px]=\"-35 * NumVisibleButtons\">\n                                @if (ShowDataContextButton) {\n                                    <button kendoButton >\n                                        <span class=\"fa-solid fa-gear\" \n                                                (click)=\"showDataContextDialog()\"></span>\n                                    </button>    \n                                }\n                                @if (SelectedConversation && IsSkipProcessing(SelectedConversation)) {\n                                    <button kendoButton \n                                        class=\"stop-button\"\n                                        (click)=\"stopProcessing()\">\n                                        <span class=\"fas fa-solid fa-stop\"></span>\n                                    </button>\n                                }\n                                @else {\n                                    <button kendoButton \n                                        [disabled]=\"IsTextAreaEmpty()\" \n                                        (click)=\"sendSkipMessage()\">\n                                        <span class=\"fas fa-solid fa-arrow-up\"></span>\n                                    </button>\n                                }\n                                @if (ShowSharingButton && SelectedConversationCurrentUserPermissionLevel === 'Owner') {\n                                    <button kendoButton class=\"share-button\">\n                                        <span class=\"fa-solid fa-share\"\n                                                (click)=\"showSharingDialog()\"></span>\n                                    </button>    \n                                }\n                            </div>\n                        </div>\n                    }\n                </div>\n                \n                <!-- Right Panel (Artifact Viewer) -->\n                <div right-panel>\n                    <skip-artifact-viewer\n                        *ngIf=\"selectedArtifact\"\n                        [ArtifactID]=\"selectedArtifact.artifactId\"\n                        [ArtifactVersionID]=\"selectedArtifact.artifactVersionId\"\n                        [DataContext]=\"DataContext\"\n                        (NavigateToMatchingReport)=\"NavigateToMatchingReport.emit($event)\"\n                        (NewReportCreated)=\"NewReportCreated.emit($event)\"\n                        (DrillDownEvent)=\"DrillDownEvent.emit($event)\"\n                        (ArtifactInfoChanged)=\"onArtifactInfoChanged($event)\">\n                    </skip-artifact-viewer>\n                </div>\n            </skip-split-panel>\n        </div>    \n    </div> \n</div>     \n\n@if(isDataContextDialogVisible) {\n    <mj-data-context-dialog [dataContextId]=\"DataContextID\" (dialogClosed)=\"closeDataContextDialog()\" [Provider]=\"ProviderToUse\"></mj-data-context-dialog>\n}\n@if(isSharingDialogVisible && SelectedConversation && conversationResourceTypeID) {\n    <kendo-dialog\n        title=\"Share Conversation\"\n        (close)=\"closeSharingDialog('no')\"\n        [width]=\"650\"\n        [height]=\"400\"\n    >\n        <mj-resource-permissions \n            [Provider]=\"Provider\"\n            [ResourceTypeID]=\"conversationResourceTypeID\"\n            [ResourceRecordID]=\"SelectedConversation.ID\"\n            [ExcludedRoleNames]=\"SharingExcludeRoleNames\"\n            [ExcludedUserEmails]=\"SharingExcludeEmails\"\n            #resourcePermissions\n        >\n        </mj-resource-permissions>\n        <kendo-dialog-actions>\n            <button kendoButton (click)=\"closeSharingDialog('yes')\" themeColor=\"primary\">\n                Save\n            </button>\n        <button kendoButton (click)=\"closeSharingDialog('no')\">\n            Cancel\n        </button>\n        </kendo-dialog-actions>\n    </kendo-dialog>    \n}\n\n<kendo-dialog\n    title=\"Please confirm\"\n    *ngIf=\"confirmDeleteConversationDialogOpen\"\n    (close)=\"closeDeleteConversation('no')\"\n    [minWidth]=\"250\"\n    [width]=\"450\"\n>\n    <p style=\"margin: 30px; text-align: center;\">\n        Would you like to delete {{SelectedConversation?.Name}}?\n    </p>\n    <kendo-dialog-actions>\n        <button kendoButton (click)=\"closeDeleteConversation('yes')\" themeColor=\"primary\">\n            Yes\n        </button>\n    <button kendoButton (click)=\"closeDeleteConversation('no')\">\n        No\n    </button>\n    </kendo-dialog-actions>\n</kendo-dialog>    \n\n<kendo-dialog\n    title=\"Please confirm\"\n    *ngIf=\"confirmMessageEditOrDeleteDialogOpen\"\n    (close)=\"closeMessageEditOrDeleteDialog('no')\"\n    [minWidth]=\"250\"\n    [width]=\"450\"\n>\n    <p style=\"margin: 30px; text-align: center;\">\n        Would you like to {{messageEditOrDeleteType}} this message? Doing so will result in any subsequent messages in the conversation being deleted.\n    </p>\n    <kendo-dialog-actions>\n        <button kendoButton (click)=\"closeMessageEditOrDeleteDialog('yes')\" themeColor=\"primary\">\n            Yes\n        </button>\n    <button kendoButton (click)=\"closeMessageEditOrDeleteDialog('no')\">\n        No\n    </button>\n    </kendo-dialog-actions>\n</kendo-dialog>  ", styles: [".layout {\n    display: flex;\n    flex-direction: row; /* Ensures left and right panels are side by side */\n    height: 100%; /* Fill the available height */\n    width: 100%; /* Fill the available width */\n    position: relative;\n    overflow: hidden; /* Prevent content from expanding beyond container */\n}\n\n.left-panel {\n    width: 272px; /* Fixed width for the conversation list */\n    background-color: #f8f9fa; /* Optional: Background color */\n    border-right: 1px solid #ddd; /* Optional: Add a divider */\n    overflow-y: auto; /* Enable scrolling if content overflows */\n    overflow-x: hidden; /* Hide horizontal scrollbar */\n    position: relative;\n\n    scrollbar-width: thin; /* For Firefox */\n    scrollbar-color: #d3d3d3 #f8f9fa; /* Thumb color and track color */\n}\n\n/* For WebKit-based browsers (Chrome, Edge, Safari) */\n.left-panel::-webkit-scrollbar {\n    width: 8px; /* Narrower scrollbar */\n    background-color: #f8f9fa; /* Scrollbar track color */\n}\n\n.left-panel::-webkit-scrollbar-thumb {\n    background-color: #d3d3d3; /* Lighter gray scrollbar thumb */\n    border-radius: 4px; /* Rounded corners for the thumb */\n}\n\n.left-panel::-webkit-scrollbar-thumb:hover {\n    background-color: #c0c0c0; /* Slightly darker gray on hover */\n}\n\n.left-panel::-webkit-scrollbar-track {\n    background-color: #f8f9fa; /* Background of the scrollbar track */\n}\n\n.right-panel {\n    flex: 1; /* Take up the remaining space */\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    max-height: 100%; /* Don't exceed parent container height */\n    overflow: hidden; /* Hide overflow to prevent double scrollbars */\n}\n\n.conversation-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 8px 16px;\n    background-color: #f5f7f9;\n    border-bottom: 1px solid #dde4ee;\n    height: 40px;\n    flex-shrink: 0;\n}\n\n.conversation-title {\n    font-size: 15px;\n    font-weight: 500;\n    color: #333;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 70%;\n}\n\n.artifact-counter-container {\n    display: flex;\n    align-items: center;\n}\n\n\n.new-convo-icon {\n    color: #808080; /* Mid-gray */\n    font-size: 18px; /* Adjust icon size */\n    cursor: pointer; /* Make it clear the icon is clickable */\n    z-index: 10; /* Ensure the icon is above other content */\n    padding: 5px;\n    border-radius: 4px;\n}\n\n.toggle-icon {\n    color: #808080; /* Mid-gray */\n    font-size: 18px; /* Adjust icon size */\n    cursor: pointer; /* Make it clear the icon is clickable */\n    z-index: 10; /* Ensure the icon is above other content */\n    margin-left: 6px;\n    padding: 3px;\n    border-radius: 3px;\n}\n \n\n.right-panel .toggle-icon {\n    margin-left: 3px;\n    margin-top: 2px;\n    position: absolute;\n    top: 10px;\n    left: auto;\n    right: 10px; /* For the right panel toggle */\n}\n\n\n.chat-container {\n    padding: 5px;\n    display: flex;\n    flex-direction: row;\n    height: calc(100vh - 111px);\n    font-family: S\u00F6hne, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"Helvetica Neue\", Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    font-size: 1rem;\n    /*initial sizes*/\n    width: 100%;\n    overflow: hidden; /* Prevent container from growing beyond viewport */\n    background-color: #f9f9f9;\n}\n\n.conversation-wrapper {\n    display: flex;\n    flex-direction: column;\n    position: relative; /* This ensures child absolute elements position relative to this container */\n    background-color: #f9f9f9;\n    height: 100%; /* Ensure it takes full height */\n    max-height: 100%; /* Don't exceed parent container height */\n    flex: 1;\n    overflow: auto; /* Allow content to scroll */\n}\n\n.new-conversation {\n    height: 30px;\n    font-size: large;\n}\n\n.conversation-history {\n    width: 240px;\n    min-width: 240px;\n    height: 95%;\n    overflow-y: auto; /* Add scroll if the content exceeds the height */\n    overflow-x: hidden; /* Hide horizontal scrollbar */\n    margin-right: 10px;\n    padding-top: 5px;\n    background-color: #f9f9f9;\n    margin-top: 0px;  \n    padding: 12px;  \n}\n\n.k-tabstrip-content-for-skip {\n    padding: 0;\n    padding-block: 0;\n}\n\n\n.conversation-history > button {\n    height: 25px;\n}\n\n.skip-title {\n    font-size: larger;\n    margin-bottom: 5px;\n    height: 20px;\n    margin-top: 5px;\n}\n\n.conversation-list {\n    margin-top: 5px;\n    padding-top: 5px;\n    \n    border: 0;\n    background-color: #f9f9f9;\n}\n\n\n\n/* Center the welcome message vertically and horizontally */\n.welcome-wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 5;\n}\n\n.welcome-message {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    overflow: hidden;\n    height: 100%;\n    padding-bottom: 100px; /* Push the content up a bit */\n}\n\n.embedded-conversations {\n    margin-left: 3px;\n    margin-top: 5px;\n    font-size: 10pt;\n    color: rgb(48, 48, 235);\n}\n.embedded-conversations > span {\n    margin-top: 4px;\n    margin-left: 5px;\n    cursor: pointer;\n}\n.conversation-item-linked {\n    color: rgb(48, 48, 235);\n}\n\n.welcome-message img {\n    width: 120px;\n    height: 50px;\n    margin-bottom: 20px; /* Adds some space between the image and the text below */\n    position: relative;\n    z-index: 10;\n}\n\n.welcome-header-text {\n    font-size: larger;\n    font-weight: bold;\n}\n\n/* Position the welcome-suggested-questions at the bottom of its container */\n.welcome-suggested-questions {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-content: center;\n    margin-top: 30px; /* Push questions down for spacing */\n}\n.welcome-suggested-questions-col {\n    display: flex;\n    margin-bottom: 10px; /* Space between rows */\n}\n\n/* Flex layout for questions, two per row */\n.welcome-question {\n    display: flex;\n    flex-direction: column; /* Stack the header and text vertically */\n    align-items: left;;\n    width: 300px;  \n    justify-content: space-between;\n    margin: 5px; /* Adds some space around each question */\n    border: solid 1px rgba(41, 28, 28, 0.08);\n    border-radius: 15px;\n    padding: 10px;\n    cursor: pointer;\n}\n\n.welcome-question:hover {\n    background-color: rgba(0, 0, 0, 0.05);\n}\n\n\n.welcome-question-header {\n    font-size: 12pt;\n    font-weight: bold;\n    display: block; /* Ensures the header is on its own line */\n}\n\n/* Non-bold text for the content below the header */\n.welcome-question span:not(.welcome-question-header) {\n    font-weight: normal;\n    font-size: 10pt;\n}\n\n\n.messages {\n    overflow-y: auto !important; /* enable scrolling if the content overflows */\n    overflow-x: hidden !important; /* hide horizontal scrollbar */\n    /* border: solid 1px rgba(0, 0, 0, 0.08); */\n    margin-bottom: 5px;\n\n    margin-top: 2px; /* align it with the top of converation history exactly*/\n\n    background-color: #f9f9f9;\n    flex: 1 1 auto; /* Take up available space but don't push parent beyond size */\n    height: calc(100% - 50px); /* Ensure messages container has a height */\n    max-height: 100%; /* Don't exceed parent height */\n    scrollbar-width: thin; /* For Firefox */\n    scrollbar-color: #d3d3d3 #f8f9fa; /* Thumb color and track color */\n    position: relative; /* For proper positioning of scroll icon */\n}\n\n/* For WebKit-based browsers (Chrome, Edge, Safari) */\n.messages::-webkit-scrollbar {\n    width: 8px; /* Narrower scrollbar */\n    background-color: #f8f9fa; /* Scrollbar track color */\n}\n\n.messages::-webkit-scrollbar-thumb {\n    background-color: #d3d3d3; /* Lighter gray scrollbar thumb */\n    border-radius: 4px; /* Rounded corners for the thumb */\n}\n\n.messages::-webkit-scrollbar-thumb:hover {\n    background-color: #c0c0c0; /* Slightly darker gray on hover */\n}\n\n.messages::-webkit-scrollbar-track {\n    background-color: #f8f9fa; /* Background of the scrollbar track */\n}\n\n/* Class for the messages container */\n.messages-container {\n    min-height: 20px; /* Ensure container takes space even when empty */\n}\n\n\n\n.new-chat-area {\n    display: flex;\n    justify-content: space-between; /* Aligns children (img and button) to each end */\n    align-items: center; /* Centers children vertically */\n}\n.avatar {\n    max-height: 24px;\n    margin-right: 10px;\n    margin-left: 5px;\n    margin-bottom: 3px;\n    /* Ensure the image aligns to the left */\n    margin-right: auto; /* Pushes everything else to the right */\n}\n\n.conversation-item {\n    margin-left: 5px;\n    margin-right: 5px;\n    padding-top: 10px;\n    padding-bottom: 10px;\n    padding-left: 5px;\n    padding-right: 5px;\n    border-radius: 5px;\n    cursor: pointer;\n    overflow: hidden;\n    max-height: 150px;\n    font-size: 14px;\n\n    display: flex;\n    align-items: flex-start; /* Align items to the top */\n\n    flex-wrap: wrap; /* Allow items to wrap to the next line */\n}\n\n.text-container {\n    flex: 1; /* Take up remaining space */\n    display: flex;\n    flex-direction: column; /* Stack children vertically */\n}\n\n.text-container textarea {\n    resize: none; /* Disable resizing */\n    /* Add more styles for the textarea if needed */\n}\n\n.conversation-item > .conversation-icon {\n    margin-top: 3px;\n}\n\n.conversation-item span {\n    display: inline-block;\n    white-space: pre-wrap;  /* Allow text to wrap */\n    overflow: auto;\n    word-wrap: break-word;\n    margin-left: 3px;     /* Move the text to the right */\n}\n\n.conversation-item:hover {\n    background-color: rgba(0, 0, 0, 0.05);\n}\n.conversation-item-selected {\n    background-color: rgba(0, 0, 0, 0.15);\n}\n\n\n.conversation-item > .conversation-icon {\n    margin-right: 11px;\n}\n.edit-conversation-panel {\n    display: flex;\n    justify-content: flex-end; /* Align icons to the right */\n    margin-top: 2px; /* litle buffer on top */\n    margin-right: 2px; /* litle buffer to the right */\n}\n.edit-conversation-panel > .k-icon {\n    margin-left: 5px;\n    cursor: pointer;\n}\n.edit-conversation-panel > .k-icon:hover {\n    color: #ff0000;\n}\n\n\n\n.input-area {\n    min-height: 35px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 15px;\n    position: sticky;\n    bottom: 0;\n    background-color: #f9f9f9;\n    z-index: 10;\n}\n\n.input-area > .button-area {\n    vertical-align: top;\n    margin-top: 3px;\n    margin-left: -65px;\n}\n/*all buttons in the button area within the input area*/\n.button-area > button {\n    width: 30px;\n    height: 30px;\n    border-radius: 12px;\n    margin-left: 3px;\n}\n\n/* Stop button styling */\n.button-area > button.stop-button {\n    background-color: #dc3545;\n    color: white;\n}\n\n.button-area > button.stop-button:hover {\n    background-color: #c82333;\n}\n/* .input-area > button:first-of-type {\n    margin-left: -40px;\n}\n.input-area > button:last-child {\n    margin-left: -65px;\n}\n.input-area > .share-button {\n    margin-left: 10px;\n} */\n\n.text-area-wrapper {\n    padding: 3px;\n    border: solid 1px rgba(0, 0, 0, 0.08) ;\n    border-radius: 15px;\n\n    margin-top: 4px;\n    margin-right: -1px;\n    min-height: 42px;\n    max-height: 100%; /* Prevent it from growing beyond the container */\n\n    overflow: hidden;    \n    align-items: center;\n\n    /*combined width and padding is 800*/\n    width: 710px;    \n    padding-right: 90px\n} \n.text-area-wrapper > textarea {\n    border: 0;\n    outline: 0;\n    resize: none;\n\n    min-height: 20px; /* Initial height */\n\n    width: 100%;\n    overflow-y: hidden; /* Hide scrollbar */\n\n    font-family: S\u00F6hne, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"Helvetica Neue\", Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    font-size: 1rem;\n\n    margin-left: 7px;\n    margin-top: 7px;\n    margin-bottom: 5px;\n\n    background-color: #f9f9f9;\n}\n\n/* .text-area-wrapper > textarea:disabled {\n    background-color: white;\n} */\n\n.input-wrapper {\n    flex-grow: 1; /* This will make the input-wrapper take the remaining space */\n    height: 100%;\n}\n\n.waiting-for-ai {\n    position: absolute;\n    display: flex; /* Use flexbox layout */\n    bottom: 100px;\n    z-index: 999;\n    left: 10px; \n}\n  \n.scroll-to-bottom-icon {\n    position: fixed; /* Fixed positioning to float over content */\n    bottom: 120px; /* Position relative to the viewport */\n    /* left position will be set dynamically via inline style */\n    transform: translateX(-50%); /* Shift it back by half its width to center it */\n    z-index: 1000; /* Ensure it stays on top */\n    background-color: white; /* Circle background color */\n    color: black; /* Icon color */\n    border-radius: 50%; /* Makes the background a circle */\n    width: 40px; /* Circle size */\n    height: 40px; /* Circle size */\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    box-shadow: 0px 0px 5px rgba(0,0,0,0.3); /* Subtle shadow for better visibility */\n    cursor: pointer;\n    opacity: 0.9; /* Slightly transparent */\n}\n\n.loading-convo-messages-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    z-index: 1000;\n}\n\n@media (min-width: 600px) {\n    .welcome-suggested-questions {\n        display: flex;\n        flex-wrap: wrap; /* Allows questions to wrap to the next line */\n        align-content: flex-end; /* Aligns the content to the bottom */\n    }\n}\n  \n"] }]
     }], () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ActivatedRoute }, { type: i1.Router }, { type: i2.Location }, { type: i0.ChangeDetectorRef }, { type: i3.MJNotificationService }, { type: i4.DialogService }], { AllowSend: [{
             type: Input
         }], Messages: [{
@@ -3138,19 +2488,5 @@ export class SkipChatComponent extends BaseAngularComponent {
             type: ViewChild,
             args: ['splitPanel']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SkipChatComponent, { className: "SkipChatComponent", filePath: "src/lib/skip-chat/skip-chat.component.ts", lineNumber: 49 }); })();
-class TestRunView {
-    _rv;
-    constructor() {
-        this._rv = new RunView();
-    }
-    runView(params) {
-        console.log('Running single view with params:', params);
-        return this._rv.RunView(params);
-    }
-    runViews(params) {
-        console.log('Running multiple views with params:', params);
-        return this._rv.RunViews(params);
-    }
-}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SkipChatComponent, { className: "SkipChatComponent", filePath: "src/lib/skip-chat/skip-chat.component.ts", lineNumber: 46 }); })();
 //# sourceMappingURL=skip-chat.component.js.map