@interopio/io-assist-ng 1.0.1 → 1.1.1

package/dist/fesm2022/interopio-io-assist-ng.mjs

@@ -13,6 +13,11 @@ import { RemarkModule, PrismComponent, HeadingComponent } from 'ngx-remark';
 import remarkGfm from 'remark-gfm';
 import remarkParse from 'remark-parse';
 import { unified } from 'unified';
+import 'prismjs';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-yaml';
+import 'prismjs/components/prism-markdown';
 import { IoAiWebFactory } from '@interopio/ai-web';
 import { IOConnectStore, provideIoConnect } from '@interopio/ng';
 import { FormsModule } from '@angular/forms';
@@ -201,10 +206,10 @@ class LoggerService {
         }
         return this._logger.subLogger(`${LIB_NAME}.${subSystem}`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LoggerService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: LoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: LoggerService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LoggerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: LoggerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -340,10 +345,10 @@ class ComponentEffectManagerService {
     getLogger() {
         return this._logger.get(this.LOGGER_NAME);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ComponentEffectManagerService, deps: [{ token: COMPONENT_NAME }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ComponentEffectManagerService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ComponentEffectManagerService, deps: [{ token: COMPONENT_NAME }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ComponentEffectManagerService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ComponentEffectManagerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ComponentEffectManagerService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -369,13 +374,13 @@ class AppButtonComponent {
     buttonType = input(APP_BUTTON_TYPES.DEFAULT, ...(ngDevMode ? [{ debugName: "buttonType" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     onClick = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: AppButtonComponent, isStandalone: true, selector: "app-button", inputs: { buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button\n    class=\"app-button\"\n    [ngClass]=\"{\n        'flex justify-center items-center rounded-sm cursor-pointer gap-1 px-spacing-6 py-spacing-3': true,\n        'hover:text-text-states-active hover:border-border-hover': !disabled(),\n        'disabled:bg-button-background-disabled disabled:text-button-text-states-disabled disabled:cursor-not-allowed':\n            disabled(),\n        'border-border-default text-text-default border': buttonType() === APP_BUTTON_TYPES.DEFAULT,\n        'bg-button-submit-background hover:opacity-95 text-white':\n            buttonType() === APP_BUTTON_TYPES.SUBMIT,\n        'bg-button-danger-background': buttonType() === APP_BUTTON_TYPES.DANGER,\n    }\"\n    [disabled]=\"disabled()\"\n    (click)=\"onClick.emit()\"\n>\n    <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.22", type: AppButtonComponent, isStandalone: true, selector: "app-button", inputs: { buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button\n    class=\"app-button\"\n    [ngClass]=\"{\n        'flex justify-center items-center rounded-sm cursor-pointer gap-1 px-spacing-6 py-spacing-3': true,\n        'hover:text-text-states-active hover:border-border-hover': !disabled(),\n        'disabled:bg-button-background-disabled disabled:text-button-text-states-disabled disabled:cursor-not-allowed':\n            disabled(),\n        'border-border-default text-text-default border': buttonType() === APP_BUTTON_TYPES.DEFAULT,\n        'bg-button-submit-background hover:opacity-95 text-white':\n            buttonType() === APP_BUTTON_TYPES.SUBMIT,\n        'bg-button-danger-background': buttonType() === APP_BUTTON_TYPES.DANGER,\n    }\"\n    [disabled]=\"disabled()\"\n    (click)=\"onClick.emit()\"\n>\n    <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-button', imports: [CommonModule], template: "<button\n    class=\"app-button\"\n    [ngClass]=\"{\n        'flex justify-center items-center rounded-sm cursor-pointer gap-1 px-spacing-6 py-spacing-3': true,\n        'hover:text-text-states-active hover:border-border-hover': !disabled(),\n        'disabled:bg-button-background-disabled disabled:text-button-text-states-disabled disabled:cursor-not-allowed':\n            disabled(),\n        'border-border-default text-text-default border': buttonType() === APP_BUTTON_TYPES.DEFAULT,\n        'bg-button-submit-background hover:opacity-95 text-white':\n            buttonType() === APP_BUTTON_TYPES.SUBMIT,\n        'bg-button-danger-background': buttonType() === APP_BUTTON_TYPES.DANGER,\n    }\"\n    [disabled]=\"disabled()\"\n    (click)=\"onClick.emit()\"\n>\n    <ng-content></ng-content>\n</button>\n" }]
-        }] });
+        }], propDecorators: { buttonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonType", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
 
 var APP_ICON_SIZES;
 (function (APP_ICON_SIZES) {
@@ -1154,15 +1159,15 @@ function removeDangerousAttributes(element) {
             this.removeIconHoverStyles();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: AppIconComponent, isStandalone: true, selector: "app-icon", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconFill: { classPropertyName: "iconFill", publicName: "iconFill", isSignal: true, isRequired: false, transformFunction: null }, disabledIconFill: { classPropertyName: "disabledIconFill", publicName: "disabledIconFill", isSignal: true, isRequired: false, transformFunction: null }, hoverIconFill: { classPropertyName: "hoverIconFill", publicName: "hoverIconFill", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isWrapped: { classPropertyName: "isWrapped", publicName: "isWrapped", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, customIcon: { classPropertyName: "customIcon", publicName: "customIcon", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, hoverBackgroundShape: { classPropertyName: "hoverBackgroundShape", publicName: "hoverBackgroundShape", isSignal: true, isRequired: false, transformFunction: null }, hoverBackgroundColor: { classPropertyName: "hoverBackgroundColor", publicName: "hoverBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, isHoveredExternal: { classPropertyName: "isHoveredExternal", publicName: "isHoveredExternal", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, host: { listeners: { "click": "handleClick($event)", "keydown": "handleKeyDown($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class": "hostClasses()", "style": "hostStyles()", "style.width.px": "isWrapped() ? sizeAsNumber() * 2 : sizeAsNumber()", "style.height.px": "isWrapped() ? sizeAsNumber() * 2 : sizeAsNumber()", "attr.title": "getTitle()", "attr.tabindex": "tabIndex()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: AppIconComponent, isStandalone: true, selector: "app-icon", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconFill: { classPropertyName: "iconFill", publicName: "iconFill", isSignal: true, isRequired: false, transformFunction: null }, disabledIconFill: { classPropertyName: "disabledIconFill", publicName: "disabledIconFill", isSignal: true, isRequired: false, transformFunction: null }, hoverIconFill: { classPropertyName: "hoverIconFill", publicName: "hoverIconFill", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isWrapped: { classPropertyName: "isWrapped", publicName: "isWrapped", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, customIcon: { classPropertyName: "customIcon", publicName: "customIcon", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, hoverBackgroundShape: { classPropertyName: "hoverBackgroundShape", publicName: "hoverBackgroundShape", isSignal: true, isRequired: false, transformFunction: null }, hoverBackgroundColor: { classPropertyName: "hoverBackgroundColor", publicName: "hoverBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, isHoveredExternal: { classPropertyName: "isHoveredExternal", publicName: "isHoveredExternal", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, host: { listeners: { "click": "handleClick($event)", "keydown": "handleKeyDown($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class": "hostClasses()", "style": "hostStyles()", "style.width.px": "isWrapped() ? sizeAsNumber() * 2 : sizeAsNumber()", "style.height.px": "isWrapped() ? sizeAsNumber() * 2 : sizeAsNumber()", "attr.title": "getTitle()", "attr.tabindex": "tabIndex()" } }, providers: [
             {
                 provide: ComponentEffectManagerService,
                 useFactory: () => new ComponentEffectManagerService('AppIconComponent'),
             },
         ], viewQueries: [{ propertyName: "iconDivRef", first: true, predicate: ["iconDiv"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"icon-wrapper\"\n    [ngClass]=\"{\n        'pointer-events-none': true,\n        'cursor-pointer': isDisabled() === false,\n        'cursor-not-allowed': isDisabled() === true,\n    }\"\n    [style.width.px]=\"sizeAsNumber()\"\n    [style.height.px]=\"sizeAsNumber()\"\n>\n    @let hasCustomInlineSvgIcon =\n        hasCustomIcon() && isCustomIconInlineSvg() && customIconSanitizedSvg();\n    @let hasCustomImageIcon =\n        hasCustomIcon() && shouldCustomIconRenderAsImage() && customIconImageUrl();\n    @let shouldShowVariantIcon = !hasCustomIcon();\n\n    <!-- Custom Icon: Inline SVG -->\n    @if (hasCustomInlineSvgIcon) {\n        <div\n            #iconDiv\n            class=\"icon-wrapper__svg w-full h-full flex justify-center items-center\"\n            [ngStyle]=\"getIconStyles()\"\n            [innerHTML]=\"customIconSanitizedSvg()\"\n        ></div>\n    }\n\n    <!-- Custom Icon: Image (URL or Data URL) - Using CSS Mask for theming -->\n    @if (hasCustomImageIcon) {\n        <div\n            #iconDiv\n            class=\"icon-wrapper__image w-full h-full\"\n            [ngStyle]=\"getImageIconMaskStyles()\"\n        ></div>\n    }\n\n    <!-- Variant-based Icon -->\n    @if (shouldShowVariantIcon) {\n        <div\n            #iconDiv\n            class=\"icon-wrapper__svg\"\n            [ngClass]=\"getIconClasses()\"\n            [ngStyle]=\"getIconStyles()\"\n            [innerHTML]=\"getIconSvgPath()\"\n        ></div>\n    }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-icon', imports: [CommonModule], host: {
                         '[class]': 'hostClasses()',
@@ -1181,7 +1186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                             useFactory: () => new ComponentEffectManagerService('AppIconComponent'),
                         },
                     ], template: "<div\n    class=\"icon-wrapper\"\n    [ngClass]=\"{\n        'pointer-events-none': true,\n        'cursor-pointer': isDisabled() === false,\n        'cursor-not-allowed': isDisabled() === true,\n    }\"\n    [style.width.px]=\"sizeAsNumber()\"\n    [style.height.px]=\"sizeAsNumber()\"\n>\n    @let hasCustomInlineSvgIcon =\n        hasCustomIcon() && isCustomIconInlineSvg() && customIconSanitizedSvg();\n    @let hasCustomImageIcon =\n        hasCustomIcon() && shouldCustomIconRenderAsImage() && customIconImageUrl();\n    @let shouldShowVariantIcon = !hasCustomIcon();\n\n    <!-- Custom Icon: Inline SVG -->\n    @if (hasCustomInlineSvgIcon) {\n        <div\n            #iconDiv\n            class=\"icon-wrapper__svg w-full h-full flex justify-center items-center\"\n            [ngStyle]=\"getIconStyles()\"\n            [innerHTML]=\"customIconSanitizedSvg()\"\n        ></div>\n    }\n\n    <!-- Custom Icon: Image (URL or Data URL) - Using CSS Mask for theming -->\n    @if (hasCustomImageIcon) {\n        <div\n            #iconDiv\n            class=\"icon-wrapper__image w-full h-full\"\n            [ngStyle]=\"getImageIconMaskStyles()\"\n        ></div>\n    }\n\n    <!-- Variant-based Icon -->\n    @if (shouldShowVariantIcon) {\n        <div\n            #iconDiv\n            class=\"icon-wrapper__svg\"\n            [ngClass]=\"getIconClasses()\"\n            [ngStyle]=\"getIconStyles()\"\n            [innerHTML]=\"getIconSvgPath()\"\n        ></div>\n    }\n</div>" }]
-        }], propDecorators: { iconDivRef: [{
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconFill: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconFill", required: false }] }], disabledIconFill: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledIconFill", required: false }] }], hoverIconFill: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverIconFill", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isWrapped: [{ type: i0.Input, args: [{ isSignal: true, alias: "isWrapped", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], customIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "customIcon", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], hoverBackgroundShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverBackgroundShape", required: false }] }], hoverBackgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverBackgroundColor", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], isHoveredExternal: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHoveredExternal", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], iconDivRef: [{
                 type: ViewChild,
                 args: ['iconDiv', { static: false }]
             }] } });
@@ -1230,16 +1235,16 @@ class AppPanelComponent {
         container.clear();
         return container.createComponent(component);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: AppPanelComponent, isStandalone: true, selector: "app-panel", inputs: { isHeaderCloseButtonDisplayed: { classPropertyName: "isHeaderCloseButtonDisplayed", publicName: "isHeaderCloseButtonDisplayed", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, htmlContent: { classPropertyName: "htmlContent", publicName: "htmlContent", isSignal: true, isRequired: false, transformFunction: null }, footerButtons: { classPropertyName: "footerButtons", publicName: "footerButtons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose", onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "panelBodyContent", first: true, predicate: ["panelBodyContent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div\n    class=\"app-panel\"\n    [ngClass]=\"{\n        'flex flex-col bg-panel-background rounded-2xl border border-panel-border shadow-panel-box-shadow w-auto md:min-w-[540px] min-w-[320px] max-w-[960px] max-h-[90vh] box-border overflow-hidden': true,\n    }\"\n>\n    <!-- Panel Header -->\n    <div\n        class=\"app-panel__header\"\n        [ngClass]=\"{\n            'flex justify-end text-text-black-white text-xl font-weight-600 gap-2 flex-shrink-0 px-6 pt-6': true,\n        }\"\n    >\n        @if (title()) {\n            <span\n                [ngClass]=\"{\n                    'flex flex-1 items-center text-text-black-white leading-[24px] truncate': true,\n                }\"\n                >{{ title() }}</span\n            >\n        }\n\n        @if (isHeaderCloseButtonDisplayed()) {\n            <app-icon\n                [variant]=\"APP_ICON_VARIANTS.CLOSE\"\n                [size]=\"APP_ICON_SIZES.M\"\n                [iconFill]=\"'--app-text-black-white'\"\n                [hoverIconFill]=\"'--app-text-black-white'\"\n                (onClick)=\"onClose.emit()\"\n            ></app-icon>\n        }\n    </div>\n\n    @if (description()) {\n        <div\n            class=\"app-panel__description\"\n            [ngClass]=\"{\n                'flex-shrink-0 px-6 pt-3': true,\n            }\"\n        >\n            <p\n                [ngClass]=\"{\n                    'text-text-secondary text-sm truncate': true,\n                }\"\n            >\n                {{ description() }}\n            </p>\n        </div>\n    }\n\n    <!-- Scrollable wrapper for content -->\n    <div\n        class=\"app-panel__scrollable-wrapper\"\n        [ngClass]=\"{\n            'flex-1 min-h-0 overflow-y-auto overflow-x-hidden custom-scrollbar mt-3': true,\n        }\"\n    >\n        <div\n            class=\"app-panel__scrollable-content\"\n            [ngClass]=\"{\n                'px-3 pb-6': true,\n            }\"\n        >\n            @if (htmlContent()) {\n                <div\n                    class=\"app-panel__html-content\"\n                    [ngClass]=\"{\n                        'text-text-black-white text-sm': true,\n                    }\"\n                    [innerHTML]=\"htmlContent()\"\n                ></div>\n            }\n\n            <div\n                class=\"app-panel__content\"\n                [ngClass]=\"{\n                    'text-text-black-white font-weight-400 break-words w-full': true,\n                }\"\n            >\n                <ng-content select=\"[panel-content]\"></ng-content>\n            </div>\n\n            <div #panelBodyContent></div>\n        </div>\n    </div>\n\n    <div\n        class=\"app-panel__footer\"\n        [ngClass]=\"{\n            'empty:hidden flex justify-end gap-2 flex-shrink-0 w-full px-6 pb-6 pt-3': true,\n        }\"\n    >\n        <ng-content select=\"[panel-footer]\"></ng-content>\n\n        @if (footerButtons()) {\n            @for (button of footerButtons(); track button) {\n                <app-button\n                    [buttonType]=\"button.type\"\n                    [disabled]=\"false\"\n                    (click)=\"handleButtonClick(button)\"\n                    >{{ button.label }}</app-button\n                >\n            }\n        }\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["buttonType", "disabled"], outputs: ["onClick"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: AppPanelComponent, isStandalone: true, selector: "app-panel", inputs: { isHeaderCloseButtonDisplayed: { classPropertyName: "isHeaderCloseButtonDisplayed", publicName: "isHeaderCloseButtonDisplayed", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, htmlContent: { classPropertyName: "htmlContent", publicName: "htmlContent", isSignal: true, isRequired: false, transformFunction: null }, footerButtons: { classPropertyName: "footerButtons", publicName: "footerButtons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose", onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "panelBodyContent", first: true, predicate: ["panelBodyContent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div\n    class=\"app-panel\"\n    [ngClass]=\"{\n        'flex flex-col bg-panel-background rounded-2xl border border-panel-border shadow-panel-box-shadow w-auto md:min-w-[540px] min-w-[320px] max-w-[960px] max-h-[90vh] box-border overflow-hidden': true,\n    }\"\n>\n    <!-- Panel Header -->\n    <div\n        class=\"app-panel__header\"\n        [ngClass]=\"{\n            'flex justify-end text-text-black-white text-xl font-weight-600 gap-2 flex-shrink-0 px-6 pt-6': true,\n        }\"\n    >\n        @if (title()) {\n            <span\n                [ngClass]=\"{\n                    'flex flex-1 items-center text-text-black-white leading-[24px] truncate': true,\n                }\"\n                >{{ title() }}</span\n            >\n        }\n\n        @if (isHeaderCloseButtonDisplayed()) {\n            <app-icon\n                [variant]=\"APP_ICON_VARIANTS.CLOSE\"\n                [size]=\"APP_ICON_SIZES.M\"\n                [iconFill]=\"'--app-text-black-white'\"\n                [hoverIconFill]=\"'--app-text-black-white'\"\n                (onClick)=\"onClose.emit()\"\n            ></app-icon>\n        }\n    </div>\n\n    @if (description()) {\n        <div\n            class=\"app-panel__description\"\n            [ngClass]=\"{\n                'flex-shrink-0 px-6 pt-3': true,\n            }\"\n        >\n            <p\n                [ngClass]=\"{\n                    'text-text-secondary text-sm truncate': true,\n                }\"\n            >\n                {{ description() }}\n            </p>\n        </div>\n    }\n\n    <!-- Scrollable wrapper for content -->\n    <div\n        class=\"app-panel__scrollable-wrapper\"\n        [ngClass]=\"{\n            'flex-1 min-h-0 overflow-y-auto overflow-x-hidden custom-scrollbar mt-3': true,\n        }\"\n    >\n        <div\n            class=\"app-panel__scrollable-content\"\n            [ngClass]=\"{\n                'px-3 pb-6': true,\n            }\"\n        >\n            @if (htmlContent()) {\n                <div\n                    class=\"app-panel__html-content\"\n                    [ngClass]=\"{\n                        'text-text-black-white text-sm': true,\n                    }\"\n                    [innerHTML]=\"htmlContent()\"\n                ></div>\n            }\n\n            <div\n                class=\"app-panel__content\"\n                [ngClass]=\"{\n                    'text-text-black-white font-weight-400 break-words w-full': true,\n                }\"\n            >\n                <ng-content select=\"[panel-content]\"></ng-content>\n            </div>\n\n            <div #panelBodyContent></div>\n        </div>\n    </div>\n\n    <div\n        class=\"app-panel__footer\"\n        [ngClass]=\"{\n            'empty:hidden flex justify-end gap-2 flex-shrink-0 w-full px-6 pb-6 pt-3': true,\n        }\"\n    >\n        <ng-content select=\"[panel-footer]\"></ng-content>\n\n        @if (footerButtons()) {\n            @for (button of footerButtons(); track button) {\n                <app-button\n                    [buttonType]=\"button.type\"\n                    [disabled]=\"false\"\n                    (click)=\"handleButtonClick(button)\"\n                    >{{ button.label }}</app-button\n                >\n            }\n        }\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["buttonType", "disabled"], outputs: ["onClick"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-panel', imports: [...MODULES$n, ...COMPONENTS$n], template: "<div\n    class=\"app-panel\"\n    [ngClass]=\"{\n        'flex flex-col bg-panel-background rounded-2xl border border-panel-border shadow-panel-box-shadow w-auto md:min-w-[540px] min-w-[320px] max-w-[960px] max-h-[90vh] box-border overflow-hidden': true,\n    }\"\n>\n    <!-- Panel Header -->\n    <div\n        class=\"app-panel__header\"\n        [ngClass]=\"{\n            'flex justify-end text-text-black-white text-xl font-weight-600 gap-2 flex-shrink-0 px-6 pt-6': true,\n        }\"\n    >\n        @if (title()) {\n            <span\n                [ngClass]=\"{\n                    'flex flex-1 items-center text-text-black-white leading-[24px] truncate': true,\n                }\"\n                >{{ title() }}</span\n            >\n        }\n\n        @if (isHeaderCloseButtonDisplayed()) {\n            <app-icon\n                [variant]=\"APP_ICON_VARIANTS.CLOSE\"\n                [size]=\"APP_ICON_SIZES.M\"\n                [iconFill]=\"'--app-text-black-white'\"\n                [hoverIconFill]=\"'--app-text-black-white'\"\n                (onClick)=\"onClose.emit()\"\n            ></app-icon>\n        }\n    </div>\n\n    @if (description()) {\n        <div\n            class=\"app-panel__description\"\n            [ngClass]=\"{\n                'flex-shrink-0 px-6 pt-3': true,\n            }\"\n        >\n            <p\n                [ngClass]=\"{\n                    'text-text-secondary text-sm truncate': true,\n                }\"\n            >\n                {{ description() }}\n            </p>\n        </div>\n    }\n\n    <!-- Scrollable wrapper for content -->\n    <div\n        class=\"app-panel__scrollable-wrapper\"\n        [ngClass]=\"{\n            'flex-1 min-h-0 overflow-y-auto overflow-x-hidden custom-scrollbar mt-3': true,\n        }\"\n    >\n        <div\n            class=\"app-panel__scrollable-content\"\n            [ngClass]=\"{\n                'px-3 pb-6': true,\n            }\"\n        >\n            @if (htmlContent()) {\n                <div\n                    class=\"app-panel__html-content\"\n                    [ngClass]=\"{\n                        'text-text-black-white text-sm': true,\n                    }\"\n                    [innerHTML]=\"htmlContent()\"\n                ></div>\n            }\n\n            <div\n                class=\"app-panel__content\"\n                [ngClass]=\"{\n                    'text-text-black-white font-weight-400 break-words w-full': true,\n                }\"\n            >\n                <ng-content select=\"[panel-content]\"></ng-content>\n            </div>\n\n            <div #panelBodyContent></div>\n        </div>\n    </div>\n\n    <div\n        class=\"app-panel__footer\"\n        [ngClass]=\"{\n            'empty:hidden flex justify-end gap-2 flex-shrink-0 w-full px-6 pb-6 pt-3': true,\n        }\"\n    >\n        <ng-content select=\"[panel-footer]\"></ng-content>\n\n        @if (footerButtons()) {\n            @for (button of footerButtons(); track button) {\n                <app-button\n                    [buttonType]=\"button.type\"\n                    [disabled]=\"false\"\n                    (click)=\"handleButtonClick(button)\"\n                    >{{ button.label }}</app-button\n                >\n            }\n        }\n    </div>\n</div>" }]
         }], propDecorators: { panelBodyContent: [{
                 type: ViewChild,
                 args: ['panelBodyContent', { read: ViewContainerRef, static: false }]
-            }] } });
+            }], isHeaderCloseButtonDisplayed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHeaderCloseButtonDisplayed", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], htmlContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "htmlContent", required: false }] }], footerButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerButtons", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }] } });
 
 /**
  * Service to manage overlay states such as:
@@ -1327,10 +1332,10 @@ class OverlayService {
             this._overlayStack.splice(index, 1);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: OverlayService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: OverlayService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: OverlayService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: OverlayService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1515,10 +1520,10 @@ class ResponsiveUIService {
     matches(query) {
         return window.matchMedia(query).matches;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ResponsiveUIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ResponsiveUIService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ResponsiveUIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ResponsiveUIService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ResponsiveUIService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ResponsiveUIService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1699,10 +1704,10 @@ class MessageFacade {
     dispatchToggleToolMessage(toolMessageId, parentToolTraceId) {
         this._store.dispatch(toggleToolMessage({ toolMessageId, parentToolTraceId }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MessageFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MessageFacade });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: MessageFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: MessageFacade });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MessageFacade, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: MessageFacade, decorators: [{
             type: Injectable
         }] });
 
@@ -1751,10 +1756,10 @@ class PromptFacade {
     dispatchToggleFavoritePrompt(name) {
         this._store.dispatch(togglePromptFavorite({ name }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PromptFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PromptFacade, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: PromptFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: PromptFacade, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PromptFacade, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: PromptFacade, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2379,16 +2384,16 @@ class AnimationEffectDirective {
     onMouseMove(event) {
         this.animationStrategy.onMouseMove(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AnimationEffectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: AnimationEffectDirective, isStandalone: true, selector: "[animationEffect]", inputs: { animationEffect: { classPropertyName: "animationEffect", publicName: "animationEffect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { animationStarted: "animationStarted", animationCompleted: "animationCompleted" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousemove": "onMouseMove($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AnimationEffectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.22", type: AnimationEffectDirective, isStandalone: true, selector: "[animationEffect]", inputs: { animationEffect: { classPropertyName: "animationEffect", publicName: "animationEffect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { animationStarted: "animationStarted", animationCompleted: "animationCompleted" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousemove": "onMouseMove($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AnimationEffectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AnimationEffectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[animationEffect]',
                     standalone: true,
                 }]
-        }], propDecorators: { onMouseEnter: [{
+        }], propDecorators: { animationEffect: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationEffect", required: false }] }], animationStarted: [{ type: i0.Output, args: ["animationStarted"] }], animationCompleted: [{ type: i0.Output, args: ["animationCompleted"] }], onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
             }], onMouseLeave: [{
@@ -2548,10 +2553,10 @@ class ResponseStreamFacade {
     dispatchUntrackThreadStreamState(threadId) {
         this._store.dispatch(untrackThreadStreamState({ threadId }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ResponseStreamFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ResponseStreamFacade, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ResponseStreamFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ResponseStreamFacade, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ResponseStreamFacade, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ResponseStreamFacade, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2629,10 +2634,10 @@ class ThreadFacade {
     dispatchChangeActiveThread(threadId) {
         this._store.dispatch(changeActiveThread({ threadId }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThreadFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThreadFacade, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ThreadFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ThreadFacade, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThreadFacade, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ThreadFacade, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2681,10 +2686,10 @@ class WorkingContextFacade {
     dispatchFetchIsWorkingContextEnabled() {
         this._store.dispatch(fetchIsWorkingContextEnabled());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WorkingContextFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WorkingContextFacade });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: WorkingContextFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: WorkingContextFacade });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WorkingContextFacade, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: WorkingContextFacade, decorators: [{
             type: Injectable
         }] });
 
@@ -2693,13 +2698,13 @@ const COMPONENTS$m = [PrismComponent, HeadingComponent];
 class AppMdFormatterComponent {
     processor = unified().use(remarkGfm).use(remarkParse);
     content = input.required(...(ngDevMode ? [{ debugName: "content" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppMdFormatterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: AppMdFormatterComponent, isStandalone: true, selector: "app-md-formatter", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<remark class=\"remark\" [processor]=\"processor\" [markdown]=\"content()\">\n    <!-- Handles Code Blocks Rendering -->\n    <remark-prism\n        *remarkTemplate=\"'code'; let node\"\n        class=\"io-assist-code-theme\"\n        [code]=\"node.value\"\n        [language]=\"node.lang\"\n    />\n\n    <!-- Custom Links Rendering -->\n    <span *remarkTemplate=\"'link'; let node\">\n        <a\n            style=\"color: var(--app-accent-color-1)\"\n            [href]=\"node?.url\"\n            [title]=\"node.title ?? ''\"\n            [remarkNode]=\"node\"\n        >\n        </a>\n    </span>\n\n    <!-- Handles Heading Rendering -->\n    <remark-heading *remarkTemplate=\"'heading'; let node\" [node]=\"node\"></remark-heading>\n</remark>\n", styles: [":host{width:100%;max-width:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:0 2px}:host ::ng-deep remark-node *{padding:8px 0}:host ::ng-deep h1,:host ::ng-deep h2,:host ::ng-deep h3,:host ::ng-deep h4,:host ::ng-deep h5,:host ::ng-deep h6{font-size:revert;font-weight:revert;margin:revert;font-family:Inter}:host ::ng-deep remark-node span:not(h1 span,h2 span,h3 span,h4 span,h5 span,h6 span){font-size:16px;font-style:normal;font-weight:400;line-height:19px}.io-assist-code-theme{position:relative;border-radius:16px;background:var(--color-app-background);z-index:1;display:block}.io-assist-code-theme:before{content:\"\";position:absolute;border-radius:16px;background:linear-gradient(90deg,var(--color-app-accent-color-1),var(--color-app-accent-color-2));z-index:0;top:14px;left:-2px;width:calc(100% + 4px);height:calc(100% - 28px)}.io-assist-code-theme ::ng-deep pre{position:relative;padding:12px;border-radius:16px;border:none}.io-assist-code-theme ::ng-deep code{display:block;white-space:pre-wrap;word-break:break-word;max-width:100%;box-sizing:border-box}:host ::ng-deep remark-node table{margin:8px 0;position:relative;z-index:1}:host ::ng-deep remark-node table:before{content:\"\";background-image:linear-gradient(90deg,var(--color-app-accent-color-1),var(--color-app-accent-color-2));position:absolute;z-index:-1;top:-2px;left:-2px;width:calc(100% + 4px);height:calc(100% + 4px)}:host ::ng-deep remark-node table thead{text-align:left;font-weight:600;color:var(--color-text-states-active);background-color:var(--color-proto-background);z-index:1;width:100%;position:relative}:host ::ng-deep remark-node table thead th{padding:12px 16px}:host ::ng-deep remark-node tbody tr:nth-child(2n){background:var(--color-app-background-secondary)}:host ::ng-deep remark-node tbody tr:nth-child(odd){background:var(--color-app-background)}:host ::ng-deep remark-node td{padding:12px 16px;color:var(--color-text-default)}:host ::ng-deep remark-node ul,:host ::ng-deep remark-node ol{padding-left:20px;margin:8px 0;font-size:14px;font-style:normal;font-weight:400;line-height:19px;color:var(--color-text-default)}:host ::ng-deep remark-node ol{list-style-type:decimal}:host ::ng-deep remark-node ul{list-style-type:disc}:host ::ng-deep remark-node li{padding:4px 0}:host ::ng-deep remark-node blockquote{padding:16px;margin:16px 0;border-radius:16px;color:var(--color-text-default);display:flex;flex-direction:column;gap:4px;position:relative;border:1px solid var(--color-app-accent-color-1)}:host ::ng-deep remark-node hr{border:none;z-index:1;position:relative;margin:8px 0;padding:8px 0}:host ::ng-deep remark-node hr:before{content:\"\";background-image:linear-gradient(90deg,var(--color-app-accent-color-1),var(--color-app-accent-color-2));position:absolute;z-index:-1;top:0;left:0;width:100%;height:1px}:host ::ng-deep remark-node p{font-size:16px;font-style:normal;font-weight:400;line-height:19px!important}:host ::ng-deep remark-node p strong span{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: RemarkModule }, { kind: "component", type: i1$1.RemarkComponent, selector: "remark", inputs: ["markdown", "processor", "debug"] }, { kind: "directive", type: i1$1.RemarkTemplateDirective, selector: "[remarkTemplate]", inputs: ["remarkTemplate"] }, { kind: "component", type: i1$1.RemarkNodeComponent, selector: "remark-node, [remarkNode]", inputs: ["remarkNode"] }, { kind: "component", type: PrismComponent, selector: "remark-prism", inputs: ["code", "language"] }, { kind: "component", type: HeadingComponent, selector: "remark-heading", inputs: ["node", "prefix", "maintainCase", "linkClass", "linkText"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppMdFormatterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.22", type: AppMdFormatterComponent, isStandalone: true, selector: "app-md-formatter", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<remark class=\"remark\" [processor]=\"processor\" [markdown]=\"content()\">\n    <!-- Handles Code Blocks Rendering -->\n    <remark-prism\n        *remarkTemplate=\"'code'; let node\"\n        class=\"io-assist-code-theme\"\n        [code]=\"node.value\"\n        [language]=\"node.lang\"\n    />\n\n    <!-- Custom Links Rendering -->\n    <span *remarkTemplate=\"'link'; let node\">\n        <a\n            style=\"color: var(--app-accent-color-1)\"\n            [href]=\"node?.url\"\n            [title]=\"node.title ?? ''\"\n            [remarkNode]=\"node\"\n        >\n        </a>\n    </span>\n\n    <!-- Handles Heading Rendering -->\n    <remark-heading *remarkTemplate=\"'heading'; let node\" [node]=\"node\"></remark-heading>\n</remark>\n", styles: [":host{width:100%;max-width:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:0 2px}:host ::ng-deep remark-node *{padding:8px 0}:host ::ng-deep h1,:host ::ng-deep h2,:host ::ng-deep h3,:host ::ng-deep h4,:host ::ng-deep h5,:host ::ng-deep h6{font-size:revert;font-weight:revert;margin:revert;font-family:Inter}:host ::ng-deep remark-node span:not(h1 span,h2 span,h3 span,h4 span,h5 span,h6 span){font-size:16px;font-style:normal;font-weight:400;line-height:19px}.io-assist-code-theme{position:relative;border-radius:16px;background:var(--color-app-background);z-index:1;display:block}.io-assist-code-theme:before{content:\"\";position:absolute;border-radius:16px;background:linear-gradient(90deg,var(--color-app-accent-color-1),var(--color-app-accent-color-2));z-index:0;top:14px;left:-2px;width:calc(100% + 4px);height:calc(100% - 28px)}.io-assist-code-theme ::ng-deep pre{position:relative;padding:12px;border-radius:16px;border:none}.io-assist-code-theme ::ng-deep code{display:block;white-space:pre-wrap;word-break:break-word;max-width:100%;box-sizing:border-box}:host ::ng-deep remark-node table{margin:8px 0;position:relative;z-index:1}:host ::ng-deep remark-node table:before{content:\"\";background-image:linear-gradient(90deg,var(--color-app-accent-color-1),var(--color-app-accent-color-2));position:absolute;z-index:-1;top:-2px;left:-2px;width:calc(100% + 4px);height:calc(100% + 4px)}:host ::ng-deep remark-node table thead{text-align:left;font-weight:600;color:var(--color-text-states-active);background-color:var(--color-proto-background);z-index:1;width:100%;position:relative}:host ::ng-deep remark-node table thead th{padding:12px 16px}:host ::ng-deep remark-node tbody tr:nth-child(2n){background:var(--color-app-background-secondary)}:host ::ng-deep remark-node tbody tr:nth-child(odd){background:var(--color-app-background)}:host ::ng-deep remark-node td{padding:12px 16px;color:var(--color-text-default)}:host ::ng-deep remark-node ul,:host ::ng-deep remark-node ol{padding-left:20px;margin:8px 0;font-size:14px;font-style:normal;font-weight:400;line-height:19px;color:var(--color-text-default)}:host ::ng-deep remark-node ol{list-style-type:decimal}:host ::ng-deep remark-node ul{list-style-type:disc}:host ::ng-deep remark-node li{padding:4px 0}:host ::ng-deep remark-node blockquote{padding:16px;margin:16px 0;border-radius:16px;color:var(--color-text-default);display:flex;flex-direction:column;gap:4px;position:relative;border:1px solid var(--color-app-accent-color-1)}:host ::ng-deep remark-node hr{border:none;z-index:1;position:relative;margin:8px 0;padding:8px 0}:host ::ng-deep remark-node hr:before{content:\"\";background-image:linear-gradient(90deg,var(--color-app-accent-color-1),var(--color-app-accent-color-2));position:absolute;z-index:-1;top:0;left:0;width:100%;height:1px}:host ::ng-deep remark-node p{font-size:16px;font-style:normal;font-weight:400;line-height:19px!important}:host ::ng-deep remark-node p strong span{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: RemarkModule }, { kind: "component", type: i1$1.RemarkComponent, selector: "remark", inputs: ["markdown", "processor", "debug"] }, { kind: "directive", type: i1$1.RemarkTemplateDirective, selector: "[remarkTemplate]", inputs: ["remarkTemplate"] }, { kind: "component", type: i1$1.RemarkNodeComponent, selector: "remark-node, [remarkNode]", inputs: ["remarkNode"] }, { kind: "component", type: PrismComponent, selector: "remark-prism", inputs: ["code", "language"] }, { kind: "component", type: HeadingComponent, selector: "remark-heading", inputs: ["node", "prefix", "maintainCase", "linkClass", "linkText"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppMdFormatterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppMdFormatterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-md-formatter', imports: [...MODULES$m, ...COMPONENTS$m], template: "<remark class=\"remark\" [processor]=\"processor\" [markdown]=\"content()\">\n    <!-- Handles Code Blocks Rendering -->\n    <remark-prism\n        *remarkTemplate=\"'code'; let node\"\n        class=\"io-assist-code-theme\"\n        [code]=\"node.value\"\n        [language]=\"node.lang\"\n    />\n\n    <!-- Custom Links Rendering -->\n    <span *remarkTemplate=\"'link'; let node\">\n        <a\n            style=\"color: var(--app-accent-color-1)\"\n            [href]=\"node?.url\"\n            [title]=\"node.title ?? ''\"\n            [remarkNode]=\"node\"\n        >\n        </a>\n    </span>\n\n    <!-- Handles Heading Rendering -->\n    <remark-heading *remarkTemplate=\"'heading'; let node\" [node]=\"node\"></remark-heading>\n</remark>\n", styles: [":host{width:100%;max-width:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:0 2px}:host ::ng-deep remark-node *{padding:8px 0}:host ::ng-deep h1,:host ::ng-deep h2,:host ::ng-deep h3,:host ::ng-deep h4,:host ::ng-deep h5,:host ::ng-deep h6{font-size:revert;font-weight:revert;margin:revert;font-family:Inter}:host ::ng-deep remark-node span:not(h1 span,h2 span,h3 span,h4 span,h5 span,h6 span){font-size:16px;font-style:normal;font-weight:400;line-height:19px}.io-assist-code-theme{position:relative;border-radius:16px;background:var(--color-app-background);z-index:1;display:block}.io-assist-code-theme:before{content:\"\";position:absolute;border-radius:16px;background:linear-gradient(90deg,var(--color-app-accent-color-1),var(--color-app-accent-color-2));z-index:0;top:14px;left:-2px;width:calc(100% + 4px);height:calc(100% - 28px)}.io-assist-code-theme ::ng-deep pre{position:relative;padding:12px;border-radius:16px;border:none}.io-assist-code-theme ::ng-deep code{display:block;white-space:pre-wrap;word-break:break-word;max-width:100%;box-sizing:border-box}:host ::ng-deep remark-node table{margin:8px 0;position:relative;z-index:1}:host ::ng-deep remark-node table:before{content:\"\";background-image:linear-gradient(90deg,var(--color-app-accent-color-1),var(--color-app-accent-color-2));position:absolute;z-index:-1;top:-2px;left:-2px;width:calc(100% + 4px);height:calc(100% + 4px)}:host ::ng-deep remark-node table thead{text-align:left;font-weight:600;color:var(--color-text-states-active);background-color:var(--color-proto-background);z-index:1;width:100%;position:relative}:host ::ng-deep remark-node table thead th{padding:12px 16px}:host ::ng-deep remark-node tbody tr:nth-child(2n){background:var(--color-app-background-secondary)}:host ::ng-deep remark-node tbody tr:nth-child(odd){background:var(--color-app-background)}:host ::ng-deep remark-node td{padding:12px 16px;color:var(--color-text-default)}:host ::ng-deep remark-node ul,:host ::ng-deep remark-node ol{padding-left:20px;margin:8px 0;font-size:14px;font-style:normal;font-weight:400;line-height:19px;color:var(--color-text-default)}:host ::ng-deep remark-node ol{list-style-type:decimal}:host ::ng-deep remark-node ul{list-style-type:disc}:host ::ng-deep remark-node li{padding:4px 0}:host ::ng-deep remark-node blockquote{padding:16px;margin:16px 0;border-radius:16px;color:var(--color-text-default);display:flex;flex-direction:column;gap:4px;position:relative;border:1px solid var(--color-app-accent-color-1)}:host ::ng-deep remark-node hr{border:none;z-index:1;position:relative;margin:8px 0;padding:8px 0}:host ::ng-deep remark-node hr:before{content:\"\";background-image:linear-gradient(90deg,var(--color-app-accent-color-1),var(--color-app-accent-color-2));position:absolute;z-index:-1;top:0;left:0;width:100%;height:1px}:host ::ng-deep remark-node p{font-size:16px;font-style:normal;font-weight:400;line-height:19px!important}:host ::ng-deep remark-node p strong span{font-weight:600}\n"] }]
-        }] });
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }] } });
 
 const textToJSONMarkdown = (content) => {
     return '```json\n' + JSON.stringify(content, null, 2) + '\n```';
@@ -2777,10 +2782,10 @@ class SubscriptionCleanupService {
     getLogger() {
         return this._logger.get(this.LOGGER_NAME);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SubscriptionCleanupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SubscriptionCleanupService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: SubscriptionCleanupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: SubscriptionCleanupService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SubscriptionCleanupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: SubscriptionCleanupService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -2861,10 +2866,10 @@ class AppLifecycleFacade {
     dispatchInitAppCoreServices() {
         return this.store.dispatch(initialAppCoreServicesInit());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppLifecycleFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppLifecycleFacade, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppLifecycleFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppLifecycleFacade, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppLifecycleFacade, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppLifecycleFacade, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2928,8 +2933,10 @@ class IOConnectService {
         this._isUnsubscribed.set(true);
     }
     async initializeIOIntelWeb(config) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        window.io = this._ioConnect;
+        // Debug-only global. NOT required by IoAiWebFactory — the factory takes the
+        // io.Connect instance as a direct argument and never reads `window.io`. Host
+        // apps that need a global set their own. Commented out to verify nothing depends on it.
+        // (window as any).io = this._ioConnect;
         return IoAiWebFactory(this._ioConnect, config);
     }
     async isModalsAvailable() {
@@ -2976,10 +2983,10 @@ class IOConnectService {
     getLogger() {
         return this._logger.get(this.LOGGER_NAME);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IOConnectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IOConnectService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: IOConnectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: IOConnectService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IOConnectService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: IOConnectService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -3158,10 +3165,10 @@ class ElicitationService {
     getLogger() {
         return this._logger.get(this.LOGGER_NAME);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ElicitationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ElicitationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ElicitationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ElicitationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ElicitationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ElicitationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3208,10 +3215,10 @@ class AgentFacade {
     dispatchSelectAgent(agentId) {
         this._store.dispatch(selectAgent({ agentId }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AgentFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AgentFacade, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AgentFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AgentFacade, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AgentFacade, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AgentFacade, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3321,10 +3328,10 @@ class AgentService {
             },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AgentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AgentService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AgentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AgentService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AgentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AgentService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3544,10 +3551,10 @@ class SamplingService {
     getLogger() {
         return this._logger.get(this.LOGGER_NAME);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SamplingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SamplingService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: SamplingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: SamplingService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SamplingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: SamplingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3767,17 +3774,18 @@ class McpAppsService {
     _logger() {
         return this._loggerService.get('McpAppsService');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: McpAppsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: McpAppsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: McpAppsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: McpAppsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: McpAppsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: McpAppsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
+// Re-enable the directive below if the `(window as any).intel` debug line is restored.
+// /* eslint-disable @typescript-eslint/no-explicit-any */
 class IOAiWebService {
     _ioConnectService = inject(IOConnectService);
     _samplingService = inject(SamplingService);
@@ -3828,7 +3836,9 @@ class IOAiWebService {
             .get(this.LOGGER_NAME)
             .debug(`IO Intel Web API initialized: ${JSON.stringify(ioIntelWebAPI)}`);
         if (ioIntelWebAPI) {
-            window.intel = ioIntelWebAPI; // For debugging purposes
+            // Debug-only global, never read by app/lib code. Commented out to verify
+            // nothing depends on it.
+            // (window as any).intel = ioIntelWebAPI; // For debugging purposes
             this._ioIntelWeb.set(ioIntelWebAPI);
             this._loadingState.set({ type: LOADING_STATE.SUCCESS });
             this._mcpAppsService.attach(ioIntelWebAPI);
@@ -3929,10 +3939,10 @@ class IOAiWebService {
             },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IOAiWebService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IOAiWebService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: IOAiWebService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: IOAiWebService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IOAiWebService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: IOAiWebService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3950,10 +3960,10 @@ class WorkingContextService {
     isWorkingContextEnabled() {
         return Promise.resolve(this._ioIntelWebService.isWorkingContextEnabled());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WorkingContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WorkingContextService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: WorkingContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: WorkingContextService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WorkingContextService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: WorkingContextService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3986,10 +3996,10 @@ class WorkingContextPanelComponent {
     textToJSONMarkdown() {
         return textToJSONMarkdown(this.workingContext());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WorkingContextPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: WorkingContextPanelComponent, isStandalone: true, selector: "working-context-panel", providers: [WorkingContextFacade, SubscriptionCleanupService], ngImport: i0, template: "<div class=\"flex flex-1 flex-col p-4 gap-4\">\n    <div\n        class=\"flex items-center gap-2 mb-4 p-4 bg-app-background-secondary border border-border-default rounded\"\n    >\n        <app-icon\n            [variant]=\"APP_ICON_VARIANTS.INFO\"\n            [size]=\"APP_ICON_SIZES.M\"\n            [iconFill]=\"'--app-accent-color-1'\"\n            [isWrapped]=\"false\"\n        >\n        </app-icon>\n\n        <p class=\"text-sm text-proto-text-default\">\n            {{ UI_STRINGS.CALLOUT_TEXT }}\n        </p>\n    </div>\n\n    <app-md-formatter [content]=\"textToJSONMarkdown()\"></app-md-formatter>\n</div>\n", styles: [":host ::ng-deep remark-prism.io-assist-code-theme>pre{height:30vh;max-height:620px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }, { kind: "component", type: AppMdFormatterComponent, selector: "app-md-formatter", inputs: ["content"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: WorkingContextPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.22", type: WorkingContextPanelComponent, isStandalone: true, selector: "working-context-panel", providers: [WorkingContextFacade, SubscriptionCleanupService], ngImport: i0, template: "<div class=\"flex flex-1 flex-col p-4 gap-4\">\n    <div\n        class=\"flex items-center gap-2 mb-4 p-4 bg-app-background-secondary border border-border-default rounded\"\n    >\n        <app-icon\n            [variant]=\"APP_ICON_VARIANTS.INFO\"\n            [size]=\"APP_ICON_SIZES.M\"\n            [iconFill]=\"'--app-accent-color-1'\"\n            [isWrapped]=\"false\"\n        >\n        </app-icon>\n\n        <p class=\"text-sm text-proto-text-default\">\n            {{ UI_STRINGS.CALLOUT_TEXT }}\n        </p>\n    </div>\n\n    <app-md-formatter [content]=\"textToJSONMarkdown()\"></app-md-formatter>\n</div>\n", styles: [":host ::ng-deep remark-prism.io-assist-code-theme>pre{height:30vh;max-height:620px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }, { kind: "component", type: AppMdFormatterComponent, selector: "app-md-formatter", inputs: ["content"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WorkingContextPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: WorkingContextPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'working-context-panel', imports: [...MODULES$l, ...COMPONENTS$l], providers: [WorkingContextFacade, SubscriptionCleanupService], template: "<div class=\"flex flex-1 flex-col p-4 gap-4\">\n    <div\n        class=\"flex items-center gap-2 mb-4 p-4 bg-app-background-secondary border border-border-default rounded\"\n    >\n        <app-icon\n            [variant]=\"APP_ICON_VARIANTS.INFO\"\n            [size]=\"APP_ICON_SIZES.M\"\n            [iconFill]=\"'--app-accent-color-1'\"\n            [isWrapped]=\"false\"\n        >\n        </app-icon>\n\n        <p class=\"text-sm text-proto-text-default\">\n            {{ UI_STRINGS.CALLOUT_TEXT }}\n        </p>\n    </div>\n\n    <app-md-formatter [content]=\"textToJSONMarkdown()\"></app-md-formatter>\n</div>\n", styles: [":host ::ng-deep remark-prism.io-assist-code-theme>pre{height:30vh;max-height:620px}\n"] }]
         }] });
@@ -4040,10 +4050,10 @@ class HeaderComponent {
             ],
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HeaderComponent, isStandalone: true, selector: "header", host: { styleAttribute: "display: flex; width: 100%;" }, providers: [WorkingContextFacade], ngImport: i0, template: "@let showHomeButton = isLoadingMessages() || messageLength() > 0;\n@let showThreadPanelToggleButton = !isThreadHistoryDisplayed();\n@let hasNotification = hasAnyCompletionNotification();\n\n<div\n    class=\"header\"\n    [ngClass]=\"{\n        'flex flex-1 justify-start px-4 py-2 gap-4 self-stretch': true,\n    }\"\n>\n    @if (showThreadPanelToggleButton || showHomeButton) {\n        <div\n            [ngClass]=\"{\n                flex: true,\n            }\"\n        >\n            @if (showThreadPanelToggleButton) {\n                <div class=\"relative\">\n                    <app-icon\n                        [variant]=\"APP_ICON_VARIANTS.THREAD_HISTORY\"\n                        (click)=\"displayThreadHistory()\"\n                    ></app-icon>\n\n                    @if (hasNotification) {\n                        <span\n                            class=\"absolute -top-1 -right-1 w-2.5 h-2.5 rounded-full bg-orange-500\"\n                            title=\"New responses available\"\n                        ></span>\n                    }\n                </div>\n            }\n\n            @if (showHomeButton) {\n                <app-icon [variant]=\"APP_ICON_VARIANTS.HOME\" (click)=\"displayHome()\"></app-icon>\n            }\n        </div>\n    }\n\n    <!-- Context Area -->\n    @if (isWorkingContextEnabled()) {\n        <button\n            [ngClass]=\"{\n                'flex justify-center items-center px-2 py-1 border-[1px] rounded-[4px] text-text-default cursor-pointer': true,\n                'hover:text-text-states-hover hover:text-states-hover': true,\n                'font-weight-400 text-xs leading-[100%]': true,\n            }\"\n            [animationEffect]=\"AnimationType.HOVER_MOUSE_FOLLOW\"\n            (click)=\"handleWorkingContextPanelOpen()\"\n        >\n            {{ UI_STRINGS.WORKING_CONTEXT_PANEL_COMPONENT.VIEW_WORKING_CONTEXT_BUTTON }}\n        </button>\n    }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }, { kind: "directive", type: AnimationEffectDirective, selector: "[animationEffect]", inputs: ["animationEffect"], outputs: ["animationStarted", "animationCompleted"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: HeaderComponent, isStandalone: true, selector: "header", host: { styleAttribute: "display: flex; width: 100%;" }, providers: [WorkingContextFacade], ngImport: i0, template: "@let showHomeButton = isLoadingMessages() || messageLength() > 0;\n@let showThreadPanelToggleButton = !isThreadHistoryDisplayed();\n@let hasNotification = hasAnyCompletionNotification();\n\n<div\n    class=\"header\"\n    [ngClass]=\"{\n        'flex flex-1 justify-start px-4 py-2 gap-4 self-stretch': true,\n    }\"\n>\n    @if (showThreadPanelToggleButton || showHomeButton) {\n        <div\n            [ngClass]=\"{\n                flex: true,\n            }\"\n        >\n            @if (showThreadPanelToggleButton) {\n                <div class=\"relative\">\n                    <app-icon\n                        [variant]=\"APP_ICON_VARIANTS.THREAD_HISTORY\"\n                        (click)=\"displayThreadHistory()\"\n                    ></app-icon>\n\n                    @if (hasNotification) {\n                        <span\n                            class=\"absolute -top-1 -right-1 w-2.5 h-2.5 rounded-full bg-orange-500\"\n                            title=\"New responses available\"\n                        ></span>\n                    }\n                </div>\n            }\n\n            @if (showHomeButton) {\n                <app-icon [variant]=\"APP_ICON_VARIANTS.HOME\" (click)=\"displayHome()\"></app-icon>\n            }\n        </div>\n    }\n\n    <!-- Context Area -->\n    @if (isWorkingContextEnabled()) {\n        <button\n            [ngClass]=\"{\n                'flex justify-center items-center px-2 py-1 border-[1px] rounded-[4px] text-text-default cursor-pointer': true,\n                'hover:text-text-states-hover hover:text-states-hover': true,\n                'font-weight-400 text-xs leading-[100%]': true,\n            }\"\n            [animationEffect]=\"AnimationType.HOVER_MOUSE_FOLLOW\"\n            (click)=\"handleWorkingContextPanelOpen()\"\n        >\n            {{ UI_STRINGS.WORKING_CONTEXT_PANEL_COMPONENT.VIEW_WORKING_CONTEXT_BUTTON }}\n        </button>\n    }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }, { kind: "directive", type: AnimationEffectDirective, selector: "[animationEffect]", inputs: ["animationEffect"], outputs: ["animationStarted", "animationCompleted"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'header', imports: [...MODULES$k, ...COMPONENTS$k, ...DIRECTIVES$2], providers: [WorkingContextFacade], host: {
                         style: 'display: flex; width: 100%;',
@@ -4109,13 +4119,13 @@ class AppInputComponent {
         this.value.set('');
         this.onValueChange.emit('');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: AppInputComponent, isStandalone: true, selector: "app-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isLabelSrOnly: { classPropertyName: "isLabelSrOnly", publicName: "isLabelSrOnly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, showLeadingIcon: { classPropertyName: "showLeadingIcon", publicName: "showLeadingIcon", isSignal: true, isRequired: false, transformFunction: null }, leadingIconVariant: { classPropertyName: "leadingIconVariant", publicName: "leadingIconVariant", isSignal: true, isRequired: false, transformFunction: null }, showTrailingIcon: { classPropertyName: "showTrailingIcon", publicName: "showTrailingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIconVariant: { classPropertyName: "trailingIconVariant", publicName: "trailingIconVariant", isSignal: true, isRequired: false, transformFunction: null }, iconsSize: { classPropertyName: "iconsSize", publicName: "iconsSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "@if (label()) {\n    <span\n        class=\"app-input-label\"\n        [ngClass]=\"{\n            'flex text-input-default text-sm mb-2': true,\n            'text-input-label-disabled': disabled(),\n            'sr-only': isLabelSrOnly(),\n        }\"\n        >{{ label() }}</span\n    >\n}\n\n<div\n    class=\"app-input\"\n    [ngClass]=\"{\n        'flex flex-col items-start justify-center w-full p-2 mb-1 rounded-input-radius border-[1px]': true,\n        'hover:bg-input-background-hover hover:border-input-border-hover':\n            !disabled() && !error() && !isActive(),\n        'focus-within:bg-input-background-active focus-within:border-input-border-active':\n            !disabled() && !error() && isActive(),\n        'bg-input-background-disabled border-none': disabled(),\n        'border-input-border bg-input-background': !error() && !disabled(),\n        'border-input-error-border': error(),\n    }\"\n>\n    <div\n        class=\"app-input-wrapper__inner\"\n        [ngClass]=\"{\n            'flex gap-spacing-2 items-center w-full': true,\n        }\"\n    >\n        @if (showLeadingIcon()) {\n            <app-icon\n                class=\"app-input-wrapper__leading-icon\"\n                [variant]=\"leadingIconVariant()\"\n                [size]=\"iconsSize()\"\n                [isDisabled]=\"disabled()\"\n                [disabledIconFill]=\"'--app-input-icon-disabled'\"\n                [iconFill]=\"isActive() ? '--app-input-icon-active' : '--app-input-icon'\"\n                [isWrapped]=\"false\"\n            ></app-icon>\n        }\n\n        <input\n            class=\"app-input-wrapper__field\"\n            [ngClass]=\"{\n                'flex-1 min-w-0 bg-transparent border-0 outline-none font-default text-xs': true,\n                'text-input-text': !disabled() && !isActive(),\n                'text-input-text-active': isActive(),\n                'text-input-icon-disabled cursor-not-allowed': disabled(),\n            }\"\n            [type]=\"type()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"value()\"\n            [disabled]=\"disabled()\"\n            (focus)=\"isActive.set(true)\"\n            (blur)=\"isActive.set(false)\"\n            (keyup)=\"onKeyUp($event)\"\n        />\n\n        @if (showTrailingIcon() && value()) {\n            <app-icon\n                class=\"app-input-wrapper__trailing-icon\"\n                [ngClass]=\"{\n                    'cursor-pointer': true,\n                }\"\n                [variant]=\"trailingIconVariant()\"\n                [size]=\"iconsSize()\"\n                [isDisabled]=\"disabled()\"\n                [disabledIconFill]=\"'app-input-icon-disabled'\"\n                [iconFill]=\"isActive() ? 'app-input-icon-active' : 'app-input-icon'\"\n                [isWrapped]=\"false\"\n                (onClick)=\"clearContent()\"\n            ></app-icon>\n        }\n    </div>\n</div>\n\n@if (error()) {\n    <div\n        class=\"app-input-error\"\n        [ngClass]=\"{\n            'flex items-center justify-end w-full': true,\n        }\"\n    >\n        <div\n            [ngClass]=\"{\n                'flex items-center justify-center shrink-0 pe-1': true,\n            }\"\n        >\n            <app-icon\n                [variant]=\"APP_ICON_VARIANTS.ERROR_CLOSE\"\n                [size]=\"APP_ICON_SIZES.XS\"\n                [isWrapped]=\"false\"\n                [iconFill]=\"'--app-red-700'\"\n                [hoverIconFill]=\"'--app-red-700'\"\n            ></app-icon>\n        </div>\n        <p\n            class=\"app-input-error__text\"\n            [ngClass]=\"{\n                'flex-1 min-w-0 font-default font-weight-weight-400 text-input-error text-input-error-text leading-input-error tracking-input-error': true,\n            }\"\n        >\n            {{ error() }}\n        </p>\n    </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: AppInputComponent, isStandalone: true, selector: "app-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isLabelSrOnly: { classPropertyName: "isLabelSrOnly", publicName: "isLabelSrOnly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, showLeadingIcon: { classPropertyName: "showLeadingIcon", publicName: "showLeadingIcon", isSignal: true, isRequired: false, transformFunction: null }, leadingIconVariant: { classPropertyName: "leadingIconVariant", publicName: "leadingIconVariant", isSignal: true, isRequired: false, transformFunction: null }, showTrailingIcon: { classPropertyName: "showTrailingIcon", publicName: "showTrailingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIconVariant: { classPropertyName: "trailingIconVariant", publicName: "trailingIconVariant", isSignal: true, isRequired: false, transformFunction: null }, iconsSize: { classPropertyName: "iconsSize", publicName: "iconsSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "@if (label()) {\n    <span\n        class=\"app-input-label\"\n        [ngClass]=\"{\n            'flex text-input-default text-sm mb-2': true,\n            'text-input-label-disabled': disabled(),\n            'sr-only': isLabelSrOnly(),\n        }\"\n        >{{ label() }}</span\n    >\n}\n\n<div\n    class=\"app-input\"\n    [ngClass]=\"{\n        'flex flex-col items-start justify-center w-full p-2 mb-1 rounded-input-radius border-[1px]': true,\n        'hover:bg-input-background-hover hover:border-input-border-hover':\n            !disabled() && !error() && !isActive(),\n        'focus-within:bg-input-background-active focus-within:border-input-border-active':\n            !disabled() && !error() && isActive(),\n        'bg-input-background-disabled border-none': disabled(),\n        'border-input-border bg-input-background': !error() && !disabled(),\n        'border-input-error-border': error(),\n    }\"\n>\n    <div\n        class=\"app-input-wrapper__inner\"\n        [ngClass]=\"{\n            'flex gap-spacing-2 items-center w-full': true,\n        }\"\n    >\n        @if (showLeadingIcon()) {\n            <app-icon\n                class=\"app-input-wrapper__leading-icon\"\n                [variant]=\"leadingIconVariant()\"\n                [size]=\"iconsSize()\"\n                [isDisabled]=\"disabled()\"\n                [disabledIconFill]=\"'--app-input-icon-disabled'\"\n                [iconFill]=\"isActive() ? '--app-input-icon-active' : '--app-input-icon'\"\n                [isWrapped]=\"false\"\n            ></app-icon>\n        }\n\n        <input\n            class=\"app-input-wrapper__field\"\n            [ngClass]=\"{\n                'flex-1 min-w-0 bg-transparent border-0 outline-none font-default text-xs': true,\n                'text-input-text': !disabled() && !isActive(),\n                'text-input-text-active': isActive(),\n                'text-input-icon-disabled cursor-not-allowed': disabled(),\n            }\"\n            [type]=\"type()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"value()\"\n            [disabled]=\"disabled()\"\n            (focus)=\"isActive.set(true)\"\n            (blur)=\"isActive.set(false)\"\n            (keyup)=\"onKeyUp($event)\"\n        />\n\n        @if (showTrailingIcon() && value()) {\n            <app-icon\n                class=\"app-input-wrapper__trailing-icon\"\n                [ngClass]=\"{\n                    'cursor-pointer': true,\n                }\"\n                [variant]=\"trailingIconVariant()\"\n                [size]=\"iconsSize()\"\n                [isDisabled]=\"disabled()\"\n                [disabledIconFill]=\"'app-input-icon-disabled'\"\n                [iconFill]=\"isActive() ? 'app-input-icon-active' : 'app-input-icon'\"\n                [isWrapped]=\"false\"\n                (onClick)=\"clearContent()\"\n            ></app-icon>\n        }\n    </div>\n</div>\n\n@if (error()) {\n    <div\n        class=\"app-input-error\"\n        [ngClass]=\"{\n            'flex items-center justify-end w-full': true,\n        }\"\n    >\n        <div\n            [ngClass]=\"{\n                'flex items-center justify-center shrink-0 pe-1': true,\n            }\"\n        >\n            <app-icon\n                [variant]=\"APP_ICON_VARIANTS.ERROR_CLOSE\"\n                [size]=\"APP_ICON_SIZES.XS\"\n                [isWrapped]=\"false\"\n                [iconFill]=\"'--app-red-700'\"\n                [hoverIconFill]=\"'--app-red-700'\"\n            ></app-icon>\n        </div>\n        <p\n            class=\"app-input-error__text\"\n            [ngClass]=\"{\n                'flex-1 min-w-0 font-default font-weight-weight-400 text-input-error text-input-error-text leading-input-error tracking-input-error': true,\n            }\"\n        >\n            {{ error() }}\n        </p>\n    </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-input', imports: [...MODULES$j, ...COMPONENTS$j], template: "@if (label()) {\n    <span\n        class=\"app-input-label\"\n        [ngClass]=\"{\n            'flex text-input-default text-sm mb-2': true,\n            'text-input-label-disabled': disabled(),\n            'sr-only': isLabelSrOnly(),\n        }\"\n        >{{ label() }}</span\n    >\n}\n\n<div\n    class=\"app-input\"\n    [ngClass]=\"{\n        'flex flex-col items-start justify-center w-full p-2 mb-1 rounded-input-radius border-[1px]': true,\n        'hover:bg-input-background-hover hover:border-input-border-hover':\n            !disabled() && !error() && !isActive(),\n        'focus-within:bg-input-background-active focus-within:border-input-border-active':\n            !disabled() && !error() && isActive(),\n        'bg-input-background-disabled border-none': disabled(),\n        'border-input-border bg-input-background': !error() && !disabled(),\n        'border-input-error-border': error(),\n    }\"\n>\n    <div\n        class=\"app-input-wrapper__inner\"\n        [ngClass]=\"{\n            'flex gap-spacing-2 items-center w-full': true,\n        }\"\n    >\n        @if (showLeadingIcon()) {\n            <app-icon\n                class=\"app-input-wrapper__leading-icon\"\n                [variant]=\"leadingIconVariant()\"\n                [size]=\"iconsSize()\"\n                [isDisabled]=\"disabled()\"\n                [disabledIconFill]=\"'--app-input-icon-disabled'\"\n                [iconFill]=\"isActive() ? '--app-input-icon-active' : '--app-input-icon'\"\n                [isWrapped]=\"false\"\n            ></app-icon>\n        }\n\n        <input\n            class=\"app-input-wrapper__field\"\n            [ngClass]=\"{\n                'flex-1 min-w-0 bg-transparent border-0 outline-none font-default text-xs': true,\n                'text-input-text': !disabled() && !isActive(),\n                'text-input-text-active': isActive(),\n                'text-input-icon-disabled cursor-not-allowed': disabled(),\n            }\"\n            [type]=\"type()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"value()\"\n            [disabled]=\"disabled()\"\n            (focus)=\"isActive.set(true)\"\n            (blur)=\"isActive.set(false)\"\n            (keyup)=\"onKeyUp($event)\"\n        />\n\n        @if (showTrailingIcon() && value()) {\n            <app-icon\n                class=\"app-input-wrapper__trailing-icon\"\n                [ngClass]=\"{\n                    'cursor-pointer': true,\n                }\"\n                [variant]=\"trailingIconVariant()\"\n                [size]=\"iconsSize()\"\n                [isDisabled]=\"disabled()\"\n                [disabledIconFill]=\"'app-input-icon-disabled'\"\n                [iconFill]=\"isActive() ? 'app-input-icon-active' : 'app-input-icon'\"\n                [isWrapped]=\"false\"\n                (onClick)=\"clearContent()\"\n            ></app-icon>\n        }\n    </div>\n</div>\n\n@if (error()) {\n    <div\n        class=\"app-input-error\"\n        [ngClass]=\"{\n            'flex items-center justify-end w-full': true,\n        }\"\n    >\n        <div\n            [ngClass]=\"{\n                'flex items-center justify-center shrink-0 pe-1': true,\n            }\"\n        >\n            <app-icon\n                [variant]=\"APP_ICON_VARIANTS.ERROR_CLOSE\"\n                [size]=\"APP_ICON_SIZES.XS\"\n                [isWrapped]=\"false\"\n                [iconFill]=\"'--app-red-700'\"\n                [hoverIconFill]=\"'--app-red-700'\"\n            ></app-icon>\n        </div>\n        <p\n            class=\"app-input-error__text\"\n            [ngClass]=\"{\n                'flex-1 min-w-0 font-default font-weight-weight-400 text-input-error text-input-error-text leading-input-error tracking-input-error': true,\n            }\"\n        >\n            {{ error() }}\n        </p>\n    </div>\n}\n" }]
-        }] });
+        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isLabelSrOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLabelSrOnly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], showLeadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLeadingIcon", required: false }] }], leadingIconVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIconVariant", required: false }] }], showTrailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrailingIcon", required: false }] }], trailingIconVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIconVariant", required: false }] }], iconsSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconsSize", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }] } });
 
 const MODULES$i = [CommonModule];
 const COMPONENTS$i = [AppIconComponent];
@@ -4153,17 +4163,17 @@ class PromptListItemComponent {
         event.preventDefault();
         this._promptFacade.dispatchToggleFavoritePrompt(this.prompt().name);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PromptListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: PromptListItemComponent, isStandalone: true, selector: "prompt-list-item", inputs: { prompt: { classPropertyName: "prompt", publicName: "prompt", isSignal: true, isRequired: true, transformFunction: null }, isDisplayedInFavoriteList: { classPropertyName: "isDisplayedInFavoriteList", publicName: "isDisplayedInFavoriteList", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@let promptName = prompt().name;\n<!-- @let isAnyOperationPending = isUpdatePending() || isDeletePending(); -->\n<!-- @let favoriteListItemMode = isDisplayedInFavoriteList(); -->\n@let isFavorite = isCurrentPromptInFavorites();\n\n<div\n    class=\"flex flex-1 justify-between items-center p-2 gap-2 cursor-pointer min-w-0\"\n    tabindex=\"0\"\n    [ngClass]=\"{\n        'hover:bg-app-background-secondary rounded-md': !isDisplayedInFavoriteList(),\n        'h-[48px] hover:shadow-[0_0.5px_0.5px_0.5px_rgba(0,0,0,0.15)] rounded-2xl':\n            isDisplayedInFavoriteList(),\n    }\"\n    (click)=\"handlePromptSelect()\"\n    (keyup)=\"handlePromptSelect()\"\n>\n    <!-- Prompt Icon -->\n    <app-icon\n        class=\"shrink-0\"\n        [variant]=\"APP_ICON_VARIANTS.PROMPT_PANEL\"\n        [customIcon]=\"customIcon()\"\n        [isHoveredExternal]=\"isHostHoveredSignal()\"\n    ></app-icon>\n\n    <!-- Prompt Title -->\n    <span\n        class=\"flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-xs\"\n        [ngClass]=\"{\n            'text-text-default': true,\n            'text-text-states-hover': isHostHoveredSignal(),\n        }\"\n        >{{ promptName }}</span\n    >\n\n    <app-icon\n        class=\"p-2 ps-1 shrink-0\"\n        [variant]=\"isFavorite ? APP_ICON_VARIANTS.STAR_FILLED : APP_ICON_VARIANTS.STAR_OUTLINE\"\n        [isHoveredExternal]=\"isHostHoveredSignal()\"\n        (click)=\"handlePromptToggleFavorite($event)\"\n    ></app-icon>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: PromptListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.22", type: PromptListItemComponent, isStandalone: true, selector: "prompt-list-item", inputs: { prompt: { classPropertyName: "prompt", publicName: "prompt", isSignal: true, isRequired: true, transformFunction: null }, isDisplayedInFavoriteList: { classPropertyName: "isDisplayedInFavoriteList", publicName: "isDisplayedInFavoriteList", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@let promptName = prompt().name;\n<!-- @let isAnyOperationPending = isUpdatePending() || isDeletePending(); -->\n<!-- @let favoriteListItemMode = isDisplayedInFavoriteList(); -->\n@let isFavorite = isCurrentPromptInFavorites();\n\n<div\n    class=\"flex flex-1 justify-between items-center p-2 gap-2 cursor-pointer min-w-0\"\n    tabindex=\"0\"\n    [ngClass]=\"{\n        'hover:bg-app-background-secondary rounded-md': !isDisplayedInFavoriteList(),\n        'h-[48px] hover:shadow-[0_0.5px_0.5px_0.5px_rgba(0,0,0,0.15)] rounded-2xl':\n            isDisplayedInFavoriteList(),\n    }\"\n    (click)=\"handlePromptSelect()\"\n    (keyup)=\"handlePromptSelect()\"\n>\n    <!-- Prompt Icon -->\n    <app-icon\n        class=\"shrink-0\"\n        [variant]=\"APP_ICON_VARIANTS.PROMPT_PANEL\"\n        [customIcon]=\"customIcon()\"\n        [isHoveredExternal]=\"isHostHoveredSignal()\"\n    ></app-icon>\n\n    <!-- Prompt Title -->\n    <span\n        class=\"flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-xs\"\n        [ngClass]=\"{\n            'text-text-default': true,\n            'text-text-states-hover': isHostHoveredSignal(),\n        }\"\n        >{{ promptName }}</span\n    >\n\n    <app-icon\n        class=\"p-2 ps-1 shrink-0\"\n        [variant]=\"isFavorite ? APP_ICON_VARIANTS.STAR_FILLED : APP_ICON_VARIANTS.STAR_OUTLINE\"\n        [isHoveredExternal]=\"isHostHoveredSignal()\"\n        (click)=\"handlePromptToggleFavorite($event)\"\n    ></app-icon>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PromptListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: PromptListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'prompt-list-item', imports: [MODULES$i, COMPONENTS$i], host: {
                         '[class]': 'hostClasses()',
                         '(mouseenter)': 'handleMouseEnter()',
                         '(mouseleave)': 'handleMouseLeave()',
                     }, template: "@let promptName = prompt().name;\n<!-- @let isAnyOperationPending = isUpdatePending() || isDeletePending(); -->\n<!-- @let favoriteListItemMode = isDisplayedInFavoriteList(); -->\n@let isFavorite = isCurrentPromptInFavorites();\n\n<div\n    class=\"flex flex-1 justify-between items-center p-2 gap-2 cursor-pointer min-w-0\"\n    tabindex=\"0\"\n    [ngClass]=\"{\n        'hover:bg-app-background-secondary rounded-md': !isDisplayedInFavoriteList(),\n        'h-[48px] hover:shadow-[0_0.5px_0.5px_0.5px_rgba(0,0,0,0.15)] rounded-2xl':\n            isDisplayedInFavoriteList(),\n    }\"\n    (click)=\"handlePromptSelect()\"\n    (keyup)=\"handlePromptSelect()\"\n>\n    <!-- Prompt Icon -->\n    <app-icon\n        class=\"shrink-0\"\n        [variant]=\"APP_ICON_VARIANTS.PROMPT_PANEL\"\n        [customIcon]=\"customIcon()\"\n        [isHoveredExternal]=\"isHostHoveredSignal()\"\n    ></app-icon>\n\n    <!-- Prompt Title -->\n    <span\n        class=\"flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-xs\"\n        [ngClass]=\"{\n            'text-text-default': true,\n            'text-text-states-hover': isHostHoveredSignal(),\n        }\"\n        >{{ promptName }}</span\n    >\n\n    <app-icon\n        class=\"p-2 ps-1 shrink-0\"\n        [variant]=\"isFavorite ? APP_ICON_VARIANTS.STAR_FILLED : APP_ICON_VARIANTS.STAR_OUTLINE\"\n        [isHoveredExternal]=\"isHostHoveredSignal()\"\n        (click)=\"handlePromptToggleFavorite($event)\"\n    ></app-icon>\n</div>" }]
-        }] });
+        }], propDecorators: { prompt: [{ type: i0.Input, args: [{ isSignal: true, alias: "prompt", required: true }] }], isDisplayedInFavoriteList: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisplayedInFavoriteList", required: false }] }] } });
 
 const MODULES$h = [CommonModule];
 const COMPONENTS$h = [PromptListItemComponent, AppInputComponent];
@@ -4225,13 +4235,13 @@ class PromptListComponent {
         // TODO: Provide the exact link to io-assist
         window.open('https://docs-ai.interop.io/', '_blank', 'noopener,noreferrer');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PromptListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: PromptListComponent, isStandalone: true, selector: "prompt-list", inputs: { showFavoriteOnly: { classPropertyName: "showFavoriteOnly", publicName: "showFavoriteOnly", isSignal: true, isRequired: false, transformFunction: null } }, providers: [PromptFacade], ngImport: i0, template: "@let noAvailablePrompts = promptsToDisplay().length === 0;\n@let hasPrompts = promptsToDisplay().length > 0;\n@let isFavoriteOnlyList = showFavoriteOnly();\n@let shouldRenderInfoSection = noAvailablePrompts;\n@let hasCategories = promptGroups().length > 0;\n@let hasAnyPromptsInSystem = hasAnyPrompts();\n\n@if (!isFavoriteOnlyList && hasAnyPromptsInSystem) {\n    <app-input\n        [ngClass]=\"{\n            'sticky top-0': true,\n        }\"\n        [placeholder]=\"UI_STRINGS.INPUT_TOOLTIP\"\n        [showLeadingIcon]=\"true\"\n        [showTrailingIcon]=\"true\"\n        (onValueChange)=\"searchTerm.set($event)\"\n    />\n}\n\n<div\n    class=\"prompt-list\"\n    [ngClass]=\"{\n        'flex flex-col w-full h-full gap-[10px] py-2 pt-2 min-h-0': true,\n    }\"\n>\n    @if (isFavoriteOnlyList) {\n        <div\n            class=\"prompt-list__header\"\n            [ngClass]=\"{\n                'flex items-center p-2 w-full shrink-0': true,\n            }\"\n        >\n            <span\n                [ngClass]=\"{\n                    'text-xs text-text-default tracking-wide': true,\n                }\"\n                ><p>{{ UI_STRINGS.FAVORITE_PROMPTS }}</p></span\n            >\n        </div>\n    }\n\n    @if (shouldRenderInfoSection) {\n        <div\n            class=\"prompt-list__info\"\n            [ngClass]=\"{\n                'flex justify-center items-center h-16': true,\n            }\"\n        >\n            @if (noAvailablePrompts && !isFavoriteOnlyList && !hasAnyPromptsInSystem) {\n                <div\n                    [ngClass]=\"{\n                        'flex flex-col items-center gap-2 text-center px-4': true,\n                    }\"\n                >\n                    <span\n                        [ngClass]=\"{\n                            'text-proto-text-default': true,\n                        }\"\n                        >{{ UI_STRINGS.NO_PROMPTS_CONFIGURED }}</span\n                    >\n                    <!-- TODO: Add link to documentation -->\n                    <button\n                        type=\"button\"\n                        [ngClass]=\"{\n                            'text-xs text-blue-500 hover:text-blue-600 underline cursor-pointer': true,\n                        }\"\n                        (click)=\"onDocsLinkClick()\"\n                    >\n                        {{ UI_STRINGS.NO_PROMPTS_SEE_MORE }}\n                    </button>\n                </div>\n            }\n\n            @if (noAvailablePrompts && !isFavoriteOnlyList && hasAnyPromptsInSystem) {\n                <span\n                    [ngClass]=\"{\n                        'text-proto-text-default': true,\n                    }\"\n                    >{{ UI_STRINGS.NO_PROMPTS }}</span\n                >\n            }\n\n            @if (noAvailablePrompts && isFavoriteOnlyList) {\n                <span\n                    [ngClass]=\"{\n                        'text-proto-text-default': true,\n                    }\"\n                    >{{ UI_STRINGS.NO_FAVORITE_PROMPTS }}</span\n                >\n            }\n        </div>\n    }\n\n    <div\n        class=\"prompt-list__items\"\n        [ngClass]=\"{\n            'flex flex-col gap-3 w-full min-h-0 ': true,\n            'md:flex-row md:flex-wrap md:justify-center gap-3': isFavoriteOnlyList,\n            'overflow-y-auto overflow-x-hidden custom-scrollbar custom-scrollbar-no-gutter':\n                !isFavoriteOnlyList,\n        }\"\n    >\n        @if (hasPrompts) {\n            <!-- Render with categories when not in favorite mode and has category groups -->\n            @if (!isFavoriteOnlyList && hasCategories) {\n                @for (group of promptGroups(); track group.category) {\n                    <!-- Category header -->\n                    <div\n                        class=\"prompt-category-header\"\n                        [ngClass]=\"{\n                            'flex items-center px-2 py-1 mb-1': true,\n                        }\"\n                    >\n                        <span\n                            [ngClass]=\"{\n                                'text-[10px] font-normal text-text-default leading-[13px] tracking-[0.1px]': true,\n                            }\"\n                            >{{ group.category }}</span\n                        >\n                    </div>\n\n                    <!-- Prompts in this category -->\n                    @for (prompt of group.prompts; track prompt.name) {\n                        <prompt-list-item\n                            [prompt]=\"prompt\"\n                            [isDisplayedInFavoriteList]=\"false\"\n                        ></prompt-list-item>\n                    }\n                }\n            }\n\n            <!-- Render without categories for favorite mode -->\n            @if (isFavoriteOnlyList) {\n                @for (prompt of promptsToDisplay(); track prompt.name) {\n                    <prompt-list-item\n                        [prompt]=\"prompt\"\n                        [isDisplayedInFavoriteList]=\"true\"\n                    ></prompt-list-item>\n                }\n            }\n        }\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: PromptListItemComponent, selector: "prompt-list-item", inputs: ["prompt", "isDisplayedInFavoriteList"] }, { kind: "component", type: AppInputComponent, selector: "app-input", inputs: ["placeholder", "type", "label", "isLabelSrOnly", "disabled", "error", "showLeadingIcon", "leadingIconVariant", "showTrailingIcon", "trailingIconVariant", "iconsSize"], outputs: ["onValueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: PromptListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: PromptListComponent, isStandalone: true, selector: "prompt-list", inputs: { showFavoriteOnly: { classPropertyName: "showFavoriteOnly", publicName: "showFavoriteOnly", isSignal: true, isRequired: false, transformFunction: null } }, providers: [PromptFacade], ngImport: i0, template: "@let noAvailablePrompts = promptsToDisplay().length === 0;\n@let hasPrompts = promptsToDisplay().length > 0;\n@let isFavoriteOnlyList = showFavoriteOnly();\n@let shouldRenderInfoSection = noAvailablePrompts;\n@let hasCategories = promptGroups().length > 0;\n@let hasAnyPromptsInSystem = hasAnyPrompts();\n\n@if (!isFavoriteOnlyList && hasAnyPromptsInSystem) {\n    <app-input\n        [ngClass]=\"{\n            'sticky top-0': true,\n        }\"\n        [placeholder]=\"UI_STRINGS.INPUT_TOOLTIP\"\n        [showLeadingIcon]=\"true\"\n        [showTrailingIcon]=\"true\"\n        (onValueChange)=\"searchTerm.set($event)\"\n    />\n}\n\n<div\n    class=\"prompt-list\"\n    [ngClass]=\"{\n        'flex flex-col w-full h-full gap-[10px] py-2 pt-2 min-h-0': true,\n    }\"\n>\n    @if (isFavoriteOnlyList) {\n        <div\n            class=\"prompt-list__header\"\n            [ngClass]=\"{\n                'flex items-center p-2 w-full shrink-0': true,\n            }\"\n        >\n            <span\n                [ngClass]=\"{\n                    'text-xs text-text-default tracking-wide': true,\n                }\"\n                ><p>{{ UI_STRINGS.FAVORITE_PROMPTS }}</p></span\n            >\n        </div>\n    }\n\n    @if (shouldRenderInfoSection) {\n        <div\n            class=\"prompt-list__info\"\n            [ngClass]=\"{\n                'flex justify-center items-center h-16': true,\n            }\"\n        >\n            @if (noAvailablePrompts && !isFavoriteOnlyList && !hasAnyPromptsInSystem) {\n                <div\n                    [ngClass]=\"{\n                        'flex flex-col items-center gap-2 text-center px-4': true,\n                    }\"\n                >\n                    <span\n                        [ngClass]=\"{\n                            'text-proto-text-default': true,\n                        }\"\n                        >{{ UI_STRINGS.NO_PROMPTS_CONFIGURED }}</span\n                    >\n                    <!-- TODO: Add link to documentation -->\n                    <button\n                        type=\"button\"\n                        [ngClass]=\"{\n                            'text-xs text-blue-500 hover:text-blue-600 underline cursor-pointer': true,\n                        }\"\n                        (click)=\"onDocsLinkClick()\"\n                    >\n                        {{ UI_STRINGS.NO_PROMPTS_SEE_MORE }}\n                    </button>\n                </div>\n            }\n\n            @if (noAvailablePrompts && !isFavoriteOnlyList && hasAnyPromptsInSystem) {\n                <span\n                    [ngClass]=\"{\n                        'text-proto-text-default': true,\n                    }\"\n                    >{{ UI_STRINGS.NO_PROMPTS }}</span\n                >\n            }\n\n            @if (noAvailablePrompts && isFavoriteOnlyList) {\n                <span\n                    [ngClass]=\"{\n                        'text-proto-text-default': true,\n                    }\"\n                    >{{ UI_STRINGS.NO_FAVORITE_PROMPTS }}</span\n                >\n            }\n        </div>\n    }\n\n    <div\n        class=\"prompt-list__items\"\n        [ngClass]=\"{\n            'flex flex-col gap-3 w-full min-h-0 ': true,\n            'md:flex-row md:flex-wrap md:justify-center gap-3': isFavoriteOnlyList,\n            'overflow-y-auto overflow-x-hidden custom-scrollbar custom-scrollbar-no-gutter':\n                !isFavoriteOnlyList,\n        }\"\n    >\n        @if (hasPrompts) {\n            <!-- Render with categories when not in favorite mode and has category groups -->\n            @if (!isFavoriteOnlyList && hasCategories) {\n                @for (group of promptGroups(); track group.category) {\n                    <!-- Category header -->\n                    <div\n                        class=\"prompt-category-header\"\n                        [ngClass]=\"{\n                            'flex items-center px-2 py-1 mb-1': true,\n                        }\"\n                    >\n                        <span\n                            [ngClass]=\"{\n                                'text-[10px] font-normal text-text-default leading-[13px] tracking-[0.1px]': true,\n                            }\"\n                            >{{ group.category }}</span\n                        >\n                    </div>\n\n                    <!-- Prompts in this category -->\n                    @for (prompt of group.prompts; track prompt.name) {\n                        <prompt-list-item\n                            [prompt]=\"prompt\"\n                            [isDisplayedInFavoriteList]=\"false\"\n                        ></prompt-list-item>\n                    }\n                }\n            }\n\n            <!-- Render without categories for favorite mode -->\n            @if (isFavoriteOnlyList) {\n                @for (prompt of promptsToDisplay(); track prompt.name) {\n                    <prompt-list-item\n                        [prompt]=\"prompt\"\n                        [isDisplayedInFavoriteList]=\"true\"\n                    ></prompt-list-item>\n                }\n            }\n        }\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: PromptListItemComponent, selector: "prompt-list-item", inputs: ["prompt", "isDisplayedInFavoriteList"] }, { kind: "component", type: AppInputComponent, selector: "app-input", inputs: ["placeholder", "type", "label", "isLabelSrOnly", "disabled", "error", "showLeadingIcon", "leadingIconVariant", "showTrailingIcon", "trailingIconVariant", "iconsSize"], outputs: ["onValueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PromptListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: PromptListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'prompt-list', imports: [...COMPONENTS$h, ...MODULES$h], providers: [PromptFacade], template: "@let noAvailablePrompts = promptsToDisplay().length === 0;\n@let hasPrompts = promptsToDisplay().length > 0;\n@let isFavoriteOnlyList = showFavoriteOnly();\n@let shouldRenderInfoSection = noAvailablePrompts;\n@let hasCategories = promptGroups().length > 0;\n@let hasAnyPromptsInSystem = hasAnyPrompts();\n\n@if (!isFavoriteOnlyList && hasAnyPromptsInSystem) {\n    <app-input\n        [ngClass]=\"{\n            'sticky top-0': true,\n        }\"\n        [placeholder]=\"UI_STRINGS.INPUT_TOOLTIP\"\n        [showLeadingIcon]=\"true\"\n        [showTrailingIcon]=\"true\"\n        (onValueChange)=\"searchTerm.set($event)\"\n    />\n}\n\n<div\n    class=\"prompt-list\"\n    [ngClass]=\"{\n        'flex flex-col w-full h-full gap-[10px] py-2 pt-2 min-h-0': true,\n    }\"\n>\n    @if (isFavoriteOnlyList) {\n        <div\n            class=\"prompt-list__header\"\n            [ngClass]=\"{\n                'flex items-center p-2 w-full shrink-0': true,\n            }\"\n        >\n            <span\n                [ngClass]=\"{\n                    'text-xs text-text-default tracking-wide': true,\n                }\"\n                ><p>{{ UI_STRINGS.FAVORITE_PROMPTS }}</p></span\n            >\n        </div>\n    }\n\n    @if (shouldRenderInfoSection) {\n        <div\n            class=\"prompt-list__info\"\n            [ngClass]=\"{\n                'flex justify-center items-center h-16': true,\n            }\"\n        >\n            @if (noAvailablePrompts && !isFavoriteOnlyList && !hasAnyPromptsInSystem) {\n                <div\n                    [ngClass]=\"{\n                        'flex flex-col items-center gap-2 text-center px-4': true,\n                    }\"\n                >\n                    <span\n                        [ngClass]=\"{\n                            'text-proto-text-default': true,\n                        }\"\n                        >{{ UI_STRINGS.NO_PROMPTS_CONFIGURED }}</span\n                    >\n                    <!-- TODO: Add link to documentation -->\n                    <button\n                        type=\"button\"\n                        [ngClass]=\"{\n                            'text-xs text-blue-500 hover:text-blue-600 underline cursor-pointer': true,\n                        }\"\n                        (click)=\"onDocsLinkClick()\"\n                    >\n                        {{ UI_STRINGS.NO_PROMPTS_SEE_MORE }}\n                    </button>\n                </div>\n            }\n\n            @if (noAvailablePrompts && !isFavoriteOnlyList && hasAnyPromptsInSystem) {\n                <span\n                    [ngClass]=\"{\n                        'text-proto-text-default': true,\n                    }\"\n                    >{{ UI_STRINGS.NO_PROMPTS }}</span\n                >\n            }\n\n            @if (noAvailablePrompts && isFavoriteOnlyList) {\n                <span\n                    [ngClass]=\"{\n                        'text-proto-text-default': true,\n                    }\"\n                    >{{ UI_STRINGS.NO_FAVORITE_PROMPTS }}</span\n                >\n            }\n        </div>\n    }\n\n    <div\n        class=\"prompt-list__items\"\n        [ngClass]=\"{\n            'flex flex-col gap-3 w-full min-h-0 ': true,\n            'md:flex-row md:flex-wrap md:justify-center gap-3': isFavoriteOnlyList,\n            'overflow-y-auto overflow-x-hidden custom-scrollbar custom-scrollbar-no-gutter':\n                !isFavoriteOnlyList,\n        }\"\n    >\n        @if (hasPrompts) {\n            <!-- Render with categories when not in favorite mode and has category groups -->\n            @if (!isFavoriteOnlyList && hasCategories) {\n                @for (group of promptGroups(); track group.category) {\n                    <!-- Category header -->\n                    <div\n                        class=\"prompt-category-header\"\n                        [ngClass]=\"{\n                            'flex items-center px-2 py-1 mb-1': true,\n                        }\"\n                    >\n                        <span\n                            [ngClass]=\"{\n                                'text-[10px] font-normal text-text-default leading-[13px] tracking-[0.1px]': true,\n                            }\"\n                            >{{ group.category }}</span\n                        >\n                    </div>\n\n                    <!-- Prompts in this category -->\n                    @for (prompt of group.prompts; track prompt.name) {\n                        <prompt-list-item\n                            [prompt]=\"prompt\"\n                            [isDisplayedInFavoriteList]=\"false\"\n                        ></prompt-list-item>\n                    }\n                }\n            }\n\n            <!-- Render without categories for favorite mode -->\n            @if (isFavoriteOnlyList) {\n                @for (prompt of promptsToDisplay(); track prompt.name) {\n                    <prompt-list-item\n                        [prompt]=\"prompt\"\n                        [isDisplayedInFavoriteList]=\"true\"\n                    ></prompt-list-item>\n                }\n            }\n        }\n    </div>\n</div>\n" }]
-        }] });
+        }], propDecorators: { showFavoriteOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFavoriteOnly", required: false }] }] } });
 
 var TOOL_ACTIONS;
 (function (TOOL_ACTIONS) {
@@ -4278,23 +4288,23 @@ class ToolFacade {
     dispatchToggleTool(tool) {
         this._store.dispatch(toggleTool({ tool }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolFacade });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolFacade });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolFacade, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolFacade, decorators: [{
             type: Injectable
         }] });
 
 class ToolInfoComponent {
     UI_STRINGS = UI_STRINGS.TOOL_INFO;
     tool = input.required(...(ngDevMode ? [{ debugName: "tool" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: ToolInfoComponent, isStandalone: true, selector: "tool-info", inputs: { tool: { classPropertyName: "tool", publicName: "tool", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\n    class=\"flex justify-center bg-app-background-secondary text-text-default border border-border-default p-4 rounded-md leading-[17px] text-xs min-w-[240px] max-w-[320px]\"\n>\n    <div>\n        <span class=\"text-text-states-active font-weight-600\">Server name: </span>\n        {{ tool().source.mcpName }}\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.22", type: ToolInfoComponent, isStandalone: true, selector: "tool-info", inputs: { tool: { classPropertyName: "tool", publicName: "tool", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\n    class=\"flex justify-center bg-app-background-secondary text-text-default border border-border-default p-4 rounded-md leading-[17px] text-xs min-w-[240px] max-w-[320px]\"\n>\n    <div>\n        <span class=\"text-text-states-active font-weight-600\">Server name: </span>\n        {{ tool().source.mcpName }}\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tool-info', imports: [CommonModule], template: "<div\n    class=\"flex justify-center bg-app-background-secondary text-text-default border border-border-default p-4 rounded-md leading-[17px] text-xs min-w-[240px] max-w-[320px]\"\n>\n    <div>\n        <span class=\"text-text-states-active font-weight-600\">Server name: </span>\n        {{ tool().source.mcpName }}\n    </div>\n</div>\n" }]
-        }] });
+        }], propDecorators: { tool: [{ type: i0.Input, args: [{ isSignal: true, alias: "tool", required: true }] }] } });
 
 const MODULES$g = [CommonModule];
 const COMPONENTS$g = [AppIconComponent];
@@ -4335,13 +4345,13 @@ class AppToggleComponent {
             this.handleToggle();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: AppToggleComponent, isStandalone: true, selector: "app-toggle", inputs: { isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onToggle: "onToggle" }, ngImport: i0, template: "<div\n    class=\"app-toggle\"\n    [ngClass]=\"{\n        'relative inline-flex items-center w-[34px] h-[16px] rounded-full transition-colors duration-300 ease-in-out': true,\n        'hover:bg-toggle-background-hover-disabled': !isChecked() && !isDisabled(),\n        'hover:bg-toggle-background-hover-enabled': isChecked() && !isDisabled(),\n        'cursor-pointer': !isDisabled(),\n        'cursor-not-allowed opacity-50': isDisabled(),\n        'bg-toggle-background-disabled': !isChecked(),\n        'bg-toggle-background-enabled': isChecked(),\n    }\"\n    [attr.role]=\"'switch'\"\n    [attr.aria-checked]=\"isChecked()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    (click)=\"handleToggle()\"\n    (keydown)=\"handleKeyDown($event)\"\n>\n    <div\n        class=\"app-toggle__icon-wrapper\"\n        [ngClass]=\"{\n            'flex flex-1 justify-end transition-all duration-300': true,\n            'justify-start': isChecked(),\n        }\"\n    >\n        <app-icon\n            class=\"app-toggle__icon\"\n            [ngClass]=\"{\n                'm-[4px]': true,\n            }\"\n            [variant]=\"isChecked() ? APP_ICON_VARIANTS.CHECK : APP_ICON_VARIANTS.CLOSE\"\n            [size]=\"APP_ICON_SIZES.XXS\"\n            [iconFill]=\"'--app-text-states-active'\"\n            [isWrapped]=\"false\"\n        >\n        </app-icon>\n    </div>\n\n    <!-- Toggle Circle -->\n    <div\n        class=\"app-toggle__circle\"\n        [ngClass]=\"{\n            'absolute w-[12px] h-[12px] bg-toggle-circle rounded-full transition-all duration-300 ease-in-out flex items-center justify-center': true,\n            'left-[2px]': !isChecked(),\n            'left-[20px]': isChecked(),\n        }\"\n    ></div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.22", type: AppToggleComponent, isStandalone: true, selector: "app-toggle", inputs: { isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onToggle: "onToggle" }, ngImport: i0, template: "<div\n    class=\"app-toggle\"\n    [ngClass]=\"{\n        'relative inline-flex items-center w-[34px] h-[16px] rounded-full transition-colors duration-300 ease-in-out': true,\n        'hover:bg-toggle-background-hover-disabled': !isChecked() && !isDisabled(),\n        'hover:bg-toggle-background-hover-enabled': isChecked() && !isDisabled(),\n        'cursor-pointer': !isDisabled(),\n        'cursor-not-allowed opacity-50': isDisabled(),\n        'bg-toggle-background-disabled': !isChecked(),\n        'bg-toggle-background-enabled': isChecked(),\n    }\"\n    [attr.role]=\"'switch'\"\n    [attr.aria-checked]=\"isChecked()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    (click)=\"handleToggle()\"\n    (keydown)=\"handleKeyDown($event)\"\n>\n    <div\n        class=\"app-toggle__icon-wrapper\"\n        [ngClass]=\"{\n            'flex flex-1 justify-end transition-all duration-300': true,\n            'justify-start': isChecked(),\n        }\"\n    >\n        <app-icon\n            class=\"app-toggle__icon\"\n            [ngClass]=\"{\n                'm-[4px]': true,\n            }\"\n            [variant]=\"isChecked() ? APP_ICON_VARIANTS.CHECK : APP_ICON_VARIANTS.CLOSE\"\n            [size]=\"APP_ICON_SIZES.XXS\"\n            [iconFill]=\"'--app-text-states-active'\"\n            [isWrapped]=\"false\"\n        >\n        </app-icon>\n    </div>\n\n    <!-- Toggle Circle -->\n    <div\n        class=\"app-toggle__circle\"\n        [ngClass]=\"{\n            'absolute w-[12px] h-[12px] bg-toggle-circle rounded-full transition-all duration-300 ease-in-out flex items-center justify-center': true,\n            'left-[2px]': !isChecked(),\n            'left-[20px]': isChecked(),\n        }\"\n    ></div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-toggle', imports: [...MODULES$g, ...COMPONENTS$g], template: "<div\n    class=\"app-toggle\"\n    [ngClass]=\"{\n        'relative inline-flex items-center w-[34px] h-[16px] rounded-full transition-colors duration-300 ease-in-out': true,\n        'hover:bg-toggle-background-hover-disabled': !isChecked() && !isDisabled(),\n        'hover:bg-toggle-background-hover-enabled': isChecked() && !isDisabled(),\n        'cursor-pointer': !isDisabled(),\n        'cursor-not-allowed opacity-50': isDisabled(),\n        'bg-toggle-background-disabled': !isChecked(),\n        'bg-toggle-background-enabled': isChecked(),\n    }\"\n    [attr.role]=\"'switch'\"\n    [attr.aria-checked]=\"isChecked()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    (click)=\"handleToggle()\"\n    (keydown)=\"handleKeyDown($event)\"\n>\n    <div\n        class=\"app-toggle__icon-wrapper\"\n        [ngClass]=\"{\n            'flex flex-1 justify-end transition-all duration-300': true,\n            'justify-start': isChecked(),\n        }\"\n    >\n        <app-icon\n            class=\"app-toggle__icon\"\n            [ngClass]=\"{\n                'm-[4px]': true,\n            }\"\n            [variant]=\"isChecked() ? APP_ICON_VARIANTS.CHECK : APP_ICON_VARIANTS.CLOSE\"\n            [size]=\"APP_ICON_SIZES.XXS\"\n            [iconFill]=\"'--app-text-states-active'\"\n            [isWrapped]=\"false\"\n        >\n        </app-icon>\n    </div>\n\n    <!-- Toggle Circle -->\n    <div\n        class=\"app-toggle__circle\"\n        [ngClass]=\"{\n            'absolute w-[12px] h-[12px] bg-toggle-circle rounded-full transition-all duration-300 ease-in-out flex items-center justify-center': true,\n            'left-[2px]': !isChecked(),\n            'left-[20px]': isChecked(),\n        }\"\n    ></div>\n</div>\n" }]
-        }] });
+        }], propDecorators: { isChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChecked", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], onToggle: [{ type: i0.Output, args: ["onToggle"] }] } });
 
 var TOOLTIP_POSITIONS;
 (function (TOOLTIP_POSITIONS) {
@@ -4506,13 +4516,13 @@ class AppTooltipComponent {
         this.tooltipWidth.set(rect.width);
         this.tooltipHeight.set(rect.height);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: AppTooltipComponent, isStandalone: true, selector: "app-tooltip", inputs: { tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, triggerOffset: { classPropertyName: "triggerOffset", publicName: "triggerOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:scroll": "onViewportChange()", "window:resize": "onViewportChange()" } }, viewQueries: [{ propertyName: "tooltipTriggerElement", first: true, predicate: ["triggerElement"], descendants: true, isSignal: true }, { propertyName: "tooltipContainer", first: true, predicate: ["tooltipContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<span\n    #triggerElement\n    [ngClass]=\"{\n        'inline-block': true,\n    }\"\n    (mouseenter)=\"showTooltip()\"\n    (mouseleave)=\"hideTooltip()\"\n    (focusin)=\"showTooltip()\"\n    (focusout)=\"hideTooltip()\"\n>\n    <ng-content select=\"[tooltip-trigger]\"></ng-content>\n</span>\n\n<!-- Tooltip Template -->\n<ng-template #tooltipTemplate>\n    <div\n        #tooltipContainer\n        class=\"app-tooltip\"\n        [ngClass]=\"{\n            'fixed z-[999999] pointer-events-none transition-opacity duration-150': true,\n            'opacity-0': !isPositioned(),\n            'opacity-100': isPositioned(),\n        }\"\n        [ngStyle]=\"{ left: coordinates().x + 'px', top: coordinates().y + 'px' }\"\n    >\n        <ng-content select=\"[tooltip-content]\"></ng-content>\n    </div>\n</ng-template>\n\n<!-- Rendered tooltip -->\n@if (isVisible()) {\n    <ng-container *ngTemplateOutlet=\"tooltipTemplate\"></ng-container>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: AppTooltipComponent, isStandalone: true, selector: "app-tooltip", inputs: { tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, triggerOffset: { classPropertyName: "triggerOffset", publicName: "triggerOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:scroll": "onViewportChange()", "window:resize": "onViewportChange()" } }, viewQueries: [{ propertyName: "tooltipTriggerElement", first: true, predicate: ["triggerElement"], descendants: true, isSignal: true }, { propertyName: "tooltipContainer", first: true, predicate: ["tooltipContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<span\n    #triggerElement\n    [ngClass]=\"{\n        'inline-block': true,\n    }\"\n    (mouseenter)=\"showTooltip()\"\n    (mouseleave)=\"hideTooltip()\"\n    (focusin)=\"showTooltip()\"\n    (focusout)=\"hideTooltip()\"\n>\n    <ng-content select=\"[tooltip-trigger]\"></ng-content>\n</span>\n\n<!-- Tooltip Template -->\n<ng-template #tooltipTemplate>\n    <div\n        #tooltipContainer\n        class=\"app-tooltip\"\n        [ngClass]=\"{\n            'fixed z-[999999] pointer-events-none transition-opacity duration-150': true,\n            'opacity-0': !isPositioned(),\n            'opacity-100': isPositioned(),\n        }\"\n        [ngStyle]=\"{ left: coordinates().x + 'px', top: coordinates().y + 'px' }\"\n    >\n        <ng-content select=\"[tooltip-content]\"></ng-content>\n    </div>\n</ng-template>\n\n<!-- Rendered tooltip -->\n@if (isVisible()) {\n    <ng-container *ngTemplateOutlet=\"tooltipTemplate\"></ng-container>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppTooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-tooltip', imports: [CommonModule], template: "<span\n    #triggerElement\n    [ngClass]=\"{\n        'inline-block': true,\n    }\"\n    (mouseenter)=\"showTooltip()\"\n    (mouseleave)=\"hideTooltip()\"\n    (focusin)=\"showTooltip()\"\n    (focusout)=\"hideTooltip()\"\n>\n    <ng-content select=\"[tooltip-trigger]\"></ng-content>\n</span>\n\n<!-- Tooltip Template -->\n<ng-template #tooltipTemplate>\n    <div\n        #tooltipContainer\n        class=\"app-tooltip\"\n        [ngClass]=\"{\n            'fixed z-[999999] pointer-events-none transition-opacity duration-150': true,\n            'opacity-0': !isPositioned(),\n            'opacity-100': isPositioned(),\n        }\"\n        [ngStyle]=\"{ left: coordinates().x + 'px', top: coordinates().y + 'px' }\"\n    >\n        <ng-content select=\"[tooltip-content]\"></ng-content>\n    </div>\n</ng-template>\n\n<!-- Rendered tooltip -->\n@if (isVisible()) {\n    <ng-container *ngTemplateOutlet=\"tooltipTemplate\"></ng-container>\n}\n" }]
-        }], propDecorators: { onViewportChange: [{
+        }], propDecorators: { tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], triggerOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerOffset", required: false }] }], tooltipTriggerElement: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], tooltipContainer: [{ type: i0.ViewChild, args: ['tooltipContainer', { isSignal: true }] }], onViewportChange: [{
                 type: HostListener,
                 args: ['window:scroll']
             }, {
@@ -4549,16 +4559,16 @@ class ToolListItemComponent {
     handleMouseLeave() {
         this.isHovered.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: ToolListItemComponent, isStandalone: true, selector: "tool-list-item", inputs: { tool: { classPropertyName: "tool", publicName: "tool", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" } }, ngImport: i0, template: "@let toolName = tool().name;\n<div\n    class=\"flex justify-between content-center items-center px-2 py-1 gap-2 cursor-pointer rounded-md\"\n    tabindex=\"0\"\n    [ngClass]=\"{\n        'hover:bg-app-background-secondary': isHovered(),\n    }\"\n>\n    <app-toggle [isChecked]=\"isEnabled()\" (onToggle)=\"handleToolToggle(tool())\" />\n\n    <!-- Tool Title -->\n    <span\n        class=\"flex flex-1 text-text-default text-xs\"\n        [ngClass]=\"{\n            'text-text-states-hover': isHovered(),\n        }\"\n        >{{ toolName }}</span\n    >\n\n    <!-- Tool Info -->\n    <app-tooltip [tooltipPosition]=\"TOOLTIP_POSITIONS.TOP\">\n        <app-icon\n            tooltip-trigger\n            [variant]=\"APP_ICON_VARIANTS.INFO\"\n            [iconFill]=\"!isHovered() ? '--app-text-default' : '--app-text-states-active'\"\n            [hoverBackgroundColor]=\"'--app-icon-background-hover'\"\n            [size]=\"APP_ICON_SIZES.XS\"\n        ></app-icon>\n\n        <tool-info tooltip-content [tool]=\"tool()\"></tool-info>\n    </app-tooltip>\n</div>\n", dependencies: [{ kind: "component", type: AppToggleComponent, selector: "app-toggle", inputs: ["isChecked", "isDisabled"], outputs: ["onToggle"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }, { kind: "component", type: AppTooltipComponent, selector: "app-tooltip", inputs: ["tooltipPosition", "triggerOffset"] }, { kind: "component", type: ToolInfoComponent, selector: "tool-info", inputs: ["tool"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.22", type: ToolListItemComponent, isStandalone: true, selector: "tool-list-item", inputs: { tool: { classPropertyName: "tool", publicName: "tool", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" } }, ngImport: i0, template: "@let toolName = tool().name;\n<div\n    class=\"flex justify-between content-center items-center px-2 py-1 gap-2 cursor-pointer rounded-md\"\n    tabindex=\"0\"\n    [ngClass]=\"{\n        'hover:bg-app-background-secondary': isHovered(),\n    }\"\n>\n    <app-toggle [isChecked]=\"isEnabled()\" (onToggle)=\"handleToolToggle(tool())\" />\n\n    <!-- Tool Title -->\n    <span\n        class=\"flex flex-1 text-text-default text-xs\"\n        [ngClass]=\"{\n            'text-text-states-hover': isHovered(),\n        }\"\n        >{{ toolName }}</span\n    >\n\n    <!-- Tool Info -->\n    <app-tooltip [tooltipPosition]=\"TOOLTIP_POSITIONS.TOP\">\n        <app-icon\n            tooltip-trigger\n            [variant]=\"APP_ICON_VARIANTS.INFO\"\n            [iconFill]=\"!isHovered() ? '--app-text-default' : '--app-text-states-active'\"\n            [hoverBackgroundColor]=\"'--app-icon-background-hover'\"\n            [size]=\"APP_ICON_SIZES.XS\"\n        ></app-icon>\n\n        <tool-info tooltip-content [tool]=\"tool()\"></tool-info>\n    </app-tooltip>\n</div>\n", dependencies: [{ kind: "component", type: AppToggleComponent, selector: "app-toggle", inputs: ["isChecked", "isDisabled"], outputs: ["onToggle"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }, { kind: "component", type: AppTooltipComponent, selector: "app-tooltip", inputs: ["tooltipPosition", "triggerOffset"] }, { kind: "component", type: ToolInfoComponent, selector: "tool-info", inputs: ["tool"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tool-list-item', imports: [...COMPONENTS$f, ...MODULES$f], host: {
                         '(mouseenter)': 'handleMouseEnter()',
                         '(mouseleave)': 'handleMouseLeave()',
                     }, template: "@let toolName = tool().name;\n<div\n    class=\"flex justify-between content-center items-center px-2 py-1 gap-2 cursor-pointer rounded-md\"\n    tabindex=\"0\"\n    [ngClass]=\"{\n        'hover:bg-app-background-secondary': isHovered(),\n    }\"\n>\n    <app-toggle [isChecked]=\"isEnabled()\" (onToggle)=\"handleToolToggle(tool())\" />\n\n    <!-- Tool Title -->\n    <span\n        class=\"flex flex-1 text-text-default text-xs\"\n        [ngClass]=\"{\n            'text-text-states-hover': isHovered(),\n        }\"\n        >{{ toolName }}</span\n    >\n\n    <!-- Tool Info -->\n    <app-tooltip [tooltipPosition]=\"TOOLTIP_POSITIONS.TOP\">\n        <app-icon\n            tooltip-trigger\n            [variant]=\"APP_ICON_VARIANTS.INFO\"\n            [iconFill]=\"!isHovered() ? '--app-text-default' : '--app-text-states-active'\"\n            [hoverBackgroundColor]=\"'--app-icon-background-hover'\"\n            [size]=\"APP_ICON_SIZES.XS\"\n        ></app-icon>\n\n        <tool-info tooltip-content [tool]=\"tool()\"></tool-info>\n    </app-tooltip>\n</div>\n" }]
-        }] });
+        }], propDecorators: { tool: [{ type: i0.Input, args: [{ isSignal: true, alias: "tool", required: true }] }] } });
 
 const MODULES$e = [CommonModule];
 const COMPONENTS$e = [ToolListItemComponent, AppInputComponent];
@@ -4581,10 +4591,10 @@ class ToolListComponent {
         // TODO: Provide the exact link to io-assist
         window.open('https://docs-ai.interop.io/', '_blank', 'noopener,noreferrer');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ToolListComponent, isStandalone: true, selector: "tool-list", providers: [ToolFacade], ngImport: i0, template: "@let isLoadingTools = isLoading();\n@let hasTools = tools().length > 0;\n@let hasFilteredTools = !isLoadingTools && filteredTools().length > 0;\n\n@if (!isLoadingTools && hasTools) {\n    <!-- Needs to be displayed above the tool list toggle icon -->\n    <app-input\n        [ngClass]=\"{\n            'sticky top-0 z-1': true,\n        }\"\n        [placeholder]=\"UI_STRINGS.INPUT_TOOLTIP\"\n        [showLeadingIcon]=\"true\"\n        [showTrailingIcon]=\"true\"\n        (onValueChange)=\"searchTerm.set($event)\"\n    />\n}\n\n<div\n    class=\"tool-list\"\n    [ngClass]=\"{\n        'flex flex-col items-center pt-2': true,\n    }\"\n>\n    @if (isLoadingTools) {\n        <span\n            [ngClass]=\"{\n                'text-proto-text-default': true,\n            }\"\n            >{{ UI_STRINGS.LOADING_TOOLS }}</span\n        >\n    }\n\n    @if (hasFilteredTools) {\n        @for (tool of filteredTools(); track tool.name) {\n            <tool-list-item\n                [ngClass]=\"{\n                    'w-full': true,\n                }\"\n                [tool]=\"tool\"\n            ></tool-list-item>\n        }\n    }\n\n    @if (hasTools && !hasFilteredTools) {\n        <span\n            [ngClass]=\"{\n                'text-proto-text-default': true,\n            }\"\n            >{{ UI_STRINGS.NO_FILTERED_TOOLS }}</span\n        >\n    }\n\n    @if (!hasTools && !isLoadingTools) {\n        <div\n            [ngClass]=\"{\n                'flex flex-col items-center gap-2 text-center px-4': true,\n            }\"\n        >\n            <span\n                [ngClass]=\"{\n                    'text-proto-text-default': true,\n                }\"\n                >{{ UI_STRINGS.NO_TOOLS }}</span\n            >\n            <!-- TODO: Add link to documentation -->\n            <button\n                type=\"button\"\n                [ngClass]=\"{\n                    'text-xs text-blue-500 hover:text-blue-600 underline cursor-pointer': true,\n                }\"\n                (click)=\"onDocsLinkClick()\"\n            >\n                {{ UI_STRINGS.NO_TOOLS_SEE_MORE }}\n            </button>\n        </div>\n    }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToolListItemComponent, selector: "tool-list-item", inputs: ["tool"] }, { kind: "component", type: AppInputComponent, selector: "app-input", inputs: ["placeholder", "type", "label", "isLabelSrOnly", "disabled", "error", "showLeadingIcon", "leadingIconVariant", "showTrailingIcon", "trailingIconVariant", "iconsSize"], outputs: ["onValueChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: ToolListComponent, isStandalone: true, selector: "tool-list", providers: [ToolFacade], ngImport: i0, template: "@let isLoadingTools = isLoading();\n@let hasTools = tools().length > 0;\n@let hasFilteredTools = !isLoadingTools && filteredTools().length > 0;\n\n@if (!isLoadingTools && hasTools) {\n    <!-- Needs to be displayed above the tool list toggle icon -->\n    <app-input\n        [ngClass]=\"{\n            'sticky top-0 z-1': true,\n        }\"\n        [placeholder]=\"UI_STRINGS.INPUT_TOOLTIP\"\n        [showLeadingIcon]=\"true\"\n        [showTrailingIcon]=\"true\"\n        (onValueChange)=\"searchTerm.set($event)\"\n    />\n}\n\n<div\n    class=\"tool-list\"\n    [ngClass]=\"{\n        'flex flex-col items-center pt-2': true,\n    }\"\n>\n    @if (isLoadingTools) {\n        <span\n            [ngClass]=\"{\n                'text-proto-text-default': true,\n            }\"\n            >{{ UI_STRINGS.LOADING_TOOLS }}</span\n        >\n    }\n\n    @if (hasFilteredTools) {\n        @for (tool of filteredTools(); track tool.name) {\n            <tool-list-item\n                [ngClass]=\"{\n                    'w-full': true,\n                }\"\n                [tool]=\"tool\"\n            ></tool-list-item>\n        }\n    }\n\n    @if (hasTools && !hasFilteredTools) {\n        <span\n            [ngClass]=\"{\n                'text-proto-text-default': true,\n            }\"\n            >{{ UI_STRINGS.NO_FILTERED_TOOLS }}</span\n        >\n    }\n\n    @if (!hasTools && !isLoadingTools) {\n        <div\n            [ngClass]=\"{\n                'flex flex-col items-center gap-2 text-center px-4': true,\n            }\"\n        >\n            <span\n                [ngClass]=\"{\n                    'text-proto-text-default': true,\n                }\"\n                >{{ UI_STRINGS.NO_TOOLS }}</span\n            >\n            <!-- TODO: Add link to documentation -->\n            <button\n                type=\"button\"\n                [ngClass]=\"{\n                    'text-xs text-blue-500 hover:text-blue-600 underline cursor-pointer': true,\n                }\"\n                (click)=\"onDocsLinkClick()\"\n            >\n                {{ UI_STRINGS.NO_TOOLS_SEE_MORE }}\n            </button>\n        </div>\n    }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToolListItemComponent, selector: "tool-list-item", inputs: ["tool"] }, { kind: "component", type: AppInputComponent, selector: "app-input", inputs: ["placeholder", "type", "label", "isLabelSrOnly", "disabled", "error", "showLeadingIcon", "leadingIconVariant", "showTrailingIcon", "trailingIconVariant", "iconsSize"], outputs: ["onValueChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tool-list', imports: [...MODULES$e, ...COMPONENTS$e], providers: [ToolFacade], template: "@let isLoadingTools = isLoading();\n@let hasTools = tools().length > 0;\n@let hasFilteredTools = !isLoadingTools && filteredTools().length > 0;\n\n@if (!isLoadingTools && hasTools) {\n    <!-- Needs to be displayed above the tool list toggle icon -->\n    <app-input\n        [ngClass]=\"{\n            'sticky top-0 z-1': true,\n        }\"\n        [placeholder]=\"UI_STRINGS.INPUT_TOOLTIP\"\n        [showLeadingIcon]=\"true\"\n        [showTrailingIcon]=\"true\"\n        (onValueChange)=\"searchTerm.set($event)\"\n    />\n}\n\n<div\n    class=\"tool-list\"\n    [ngClass]=\"{\n        'flex flex-col items-center pt-2': true,\n    }\"\n>\n    @if (isLoadingTools) {\n        <span\n            [ngClass]=\"{\n                'text-proto-text-default': true,\n            }\"\n            >{{ UI_STRINGS.LOADING_TOOLS }}</span\n        >\n    }\n\n    @if (hasFilteredTools) {\n        @for (tool of filteredTools(); track tool.name) {\n            <tool-list-item\n                [ngClass]=\"{\n                    'w-full': true,\n                }\"\n                [tool]=\"tool\"\n            ></tool-list-item>\n        }\n    }\n\n    @if (hasTools && !hasFilteredTools) {\n        <span\n            [ngClass]=\"{\n                'text-proto-text-default': true,\n            }\"\n            >{{ UI_STRINGS.NO_FILTERED_TOOLS }}</span\n        >\n    }\n\n    @if (!hasTools && !isLoadingTools) {\n        <div\n            [ngClass]=\"{\n                'flex flex-col items-center gap-2 text-center px-4': true,\n            }\"\n        >\n            <span\n                [ngClass]=\"{\n                    'text-proto-text-default': true,\n                }\"\n                >{{ UI_STRINGS.NO_TOOLS }}</span\n            >\n            <!-- TODO: Add link to documentation -->\n            <button\n                type=\"button\"\n                [ngClass]=\"{\n                    'text-xs text-blue-500 hover:text-blue-600 underline cursor-pointer': true,\n                }\"\n                (click)=\"onDocsLinkClick()\"\n            >\n                {{ UI_STRINGS.NO_TOOLS_SEE_MORE }}\n            </button>\n        </div>\n    }\n</div>" }]
         }] });
@@ -4611,10 +4621,10 @@ class InputAreaActionBarComponent {
             isHeaderCloseButtonDisplayed: true,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: InputAreaActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: InputAreaActionBarComponent, isStandalone: true, selector: "input-area-action-bar", ngImport: i0, template: "<div\n    class=\"input-area-action-bar\"\n    [ngClass]=\"{\n        'flex flex-1 gap-0.5': true,\n    }\"\n>\n    <app-icon\n        [variant]=\"APP_ICON_VARIANTS.PROMPT_PANEL\"\n        [size]=\"APP_ICON_SIZES.S\"\n        [hoverBackgroundColor]=\"'app-icon-background-hover'\"\n        (onClick)=\"handlePromptPanelOverlayOpen()\"\n    >\n    </app-icon>\n    <app-icon\n        [variant]=\"APP_ICON_VARIANTS.TOOL_PANEL\"\n        [size]=\"APP_ICON_SIZES.S\"\n        [hoverBackgroundColor]=\"'app-icon-background-hover'\"\n        (onClick)=\"handleToolPanelOverlayOpen()\"\n    >\n    </app-icon>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: InputAreaActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.22", type: InputAreaActionBarComponent, isStandalone: true, selector: "input-area-action-bar", ngImport: i0, template: "<div\n    class=\"input-area-action-bar\"\n    [ngClass]=\"{\n        'flex flex-1 gap-0.5': true,\n    }\"\n>\n    <app-icon\n        [variant]=\"APP_ICON_VARIANTS.PROMPT_PANEL\"\n        [size]=\"APP_ICON_SIZES.S\"\n        [hoverBackgroundColor]=\"'app-icon-background-hover'\"\n        (onClick)=\"handlePromptPanelOverlayOpen()\"\n    >\n    </app-icon>\n    <app-icon\n        [variant]=\"APP_ICON_VARIANTS.TOOL_PANEL\"\n        [size]=\"APP_ICON_SIZES.S\"\n        [hoverBackgroundColor]=\"'app-icon-background-hover'\"\n        (onClick)=\"handleToolPanelOverlayOpen()\"\n    >\n    </app-icon>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: InputAreaActionBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: InputAreaActionBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'input-area-action-bar', imports: [...MODULES$d, ...COMPONENTS$d], template: "<div\n    class=\"input-area-action-bar\"\n    [ngClass]=\"{\n        'flex flex-1 gap-0.5': true,\n    }\"\n>\n    <app-icon\n        [variant]=\"APP_ICON_VARIANTS.PROMPT_PANEL\"\n        [size]=\"APP_ICON_SIZES.S\"\n        [hoverBackgroundColor]=\"'app-icon-background-hover'\"\n        (onClick)=\"handlePromptPanelOverlayOpen()\"\n    >\n    </app-icon>\n    <app-icon\n        [variant]=\"APP_ICON_VARIANTS.TOOL_PANEL\"\n        [size]=\"APP_ICON_SIZES.S\"\n        [hoverBackgroundColor]=\"'app-icon-background-hover'\"\n        (onClick)=\"handleToolPanelOverlayOpen()\"\n    >\n    </app-icon>\n</div>\n" }]
         }] });
@@ -4664,13 +4674,13 @@ class InputAreaSendButtonComponent {
         }
         this._messageFacade.dispatchAbortResponseGeneration(activeThreadId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: InputAreaSendButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: InputAreaSendButtonComponent, isStandalone: true, selector: "input-area-send-button", inputs: { userQuery: { classPropertyName: "userQuery", publicName: "userQuery", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSend: "onSend" }, ngImport: i0, template: "@let showStopButton = isGeneratingResponse() && messageLength() > 0;\n@let disableInputButton = (!userQuery().trim() || isLoadingMessagesFromThread()) && !showStopButton;\n\n@let showDefaultIcon = !showStopButton && disableInputButton;\n@let showSendIcon = !showStopButton && !disableInputButton;\n\n@if (showDefaultIcon) {\n    <app-icon\n        [isDisabled]=\"disableInputButton\"\n        [backgroundColor]=\"'--app-icon-background-disabled'\"\n        [disabledIconFill]=\"'--app-icon-disabled'\"\n        [variant]=\"APP_ICON_VARIANTS.PAPER_PLANE\"\n        [size]=\"APP_ICON_SIZES.S\"\n    ></app-icon>\n}\n\n@if (showSendIcon) {\n    <app-icon\n        [variant]=\"APP_ICON_VARIANTS.ARROW_UP\"\n        [backgroundColor]=\"'--app-accent-color-1'\"\n        [iconFill]=\"'--app-neutrals-0'\"\n        [hoverIconFill]=\"'--app-neutrals-0'\"\n        [hoverBackgroundColor]=\"'--app-accent-color-1'\"\n        [size]=\"APP_ICON_SIZES.S\"\n        (onClick)=\"handleSendMessage()\"\n    ></app-icon>\n}\n\n@if (showStopButton) {\n    <app-icon\n        [variant]=\"APP_ICON_VARIANTS.RECTANGLE\"\n        [backgroundColor]=\"'--app-accent-color-1'\"\n        [iconFill]=\"'--app-neutrals-0'\"\n        [hoverIconFill]=\"'--app-neutrals-0'\"\n        [hoverBackgroundColor]=\"'--app-accent-color-1'\"\n        [size]=\"APP_ICON_SIZES.S\"\n        (onClick)=\"handleStopMessage()\"\n    ></app-icon>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: InputAreaSendButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: InputAreaSendButtonComponent, isStandalone: true, selector: "input-area-send-button", inputs: { userQuery: { classPropertyName: "userQuery", publicName: "userQuery", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSend: "onSend" }, ngImport: i0, template: "@let showStopButton = isGeneratingResponse() && messageLength() > 0;\n@let disableInputButton = (!userQuery().trim() || isLoadingMessagesFromThread()) && !showStopButton;\n\n@let showDefaultIcon = !showStopButton && disableInputButton;\n@let showSendIcon = !showStopButton && !disableInputButton;\n\n@if (showDefaultIcon) {\n    <app-icon\n        data-testid=\"chat-send-button\"\n        [isDisabled]=\"disableInputButton\"\n        [backgroundColor]=\"'--app-icon-background-disabled'\"\n        [disabledIconFill]=\"'--app-icon-disabled'\"\n        [variant]=\"APP_ICON_VARIANTS.PAPER_PLANE\"\n        [size]=\"APP_ICON_SIZES.S\"\n    ></app-icon>\n}\n\n@if (showSendIcon) {\n    <app-icon\n        data-testid=\"chat-send-button\"\n        [variant]=\"APP_ICON_VARIANTS.ARROW_UP\"\n        [backgroundColor]=\"'--app-accent-color-1'\"\n        [iconFill]=\"'--app-neutrals-0'\"\n        [hoverIconFill]=\"'--app-neutrals-0'\"\n        [hoverBackgroundColor]=\"'--app-accent-color-1'\"\n        [size]=\"APP_ICON_SIZES.S\"\n        (onClick)=\"handleSendMessage()\"\n    ></app-icon>\n}\n\n@if (showStopButton) {\n    <app-icon\n        data-testid=\"chat-stop-button\"\n        [variant]=\"APP_ICON_VARIANTS.RECTANGLE\"\n        [backgroundColor]=\"'--app-accent-color-1'\"\n        [iconFill]=\"'--app-neutrals-0'\"\n        [hoverIconFill]=\"'--app-neutrals-0'\"\n        [hoverBackgroundColor]=\"'--app-accent-color-1'\"\n        [size]=\"APP_ICON_SIZES.S\"\n        (onClick)=\"handleStopMessage()\"\n    ></app-icon>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: InputAreaSendButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: InputAreaSendButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-area-send-button', imports: [...MODULES$c, ...COMPONENTS$c], template: "@let showStopButton = isGeneratingResponse() && messageLength() > 0;\n@let disableInputButton = (!userQuery().trim() || isLoadingMessagesFromThread()) && !showStopButton;\n\n@let showDefaultIcon = !showStopButton && disableInputButton;\n@let showSendIcon = !showStopButton && !disableInputButton;\n\n@if (showDefaultIcon) {\n    <app-icon\n        [isDisabled]=\"disableInputButton\"\n        [backgroundColor]=\"'--app-icon-background-disabled'\"\n        [disabledIconFill]=\"'--app-icon-disabled'\"\n        [variant]=\"APP_ICON_VARIANTS.PAPER_PLANE\"\n        [size]=\"APP_ICON_SIZES.S\"\n    ></app-icon>\n}\n\n@if (showSendIcon) {\n    <app-icon\n        [variant]=\"APP_ICON_VARIANTS.ARROW_UP\"\n        [backgroundColor]=\"'--app-accent-color-1'\"\n        [iconFill]=\"'--app-neutrals-0'\"\n        [hoverIconFill]=\"'--app-neutrals-0'\"\n        [hoverBackgroundColor]=\"'--app-accent-color-1'\"\n        [size]=\"APP_ICON_SIZES.S\"\n        (onClick)=\"handleSendMessage()\"\n    ></app-icon>\n}\n\n@if (showStopButton) {\n    <app-icon\n        [variant]=\"APP_ICON_VARIANTS.RECTANGLE\"\n        [backgroundColor]=\"'--app-accent-color-1'\"\n        [iconFill]=\"'--app-neutrals-0'\"\n        [hoverIconFill]=\"'--app-neutrals-0'\"\n        [hoverBackgroundColor]=\"'--app-accent-color-1'\"\n        [size]=\"APP_ICON_SIZES.S\"\n        (onClick)=\"handleStopMessage()\"\n    ></app-icon>\n}\n" }]
-        }] });
+            args: [{ selector: 'input-area-send-button', imports: [...MODULES$c, ...COMPONENTS$c], template: "@let showStopButton = isGeneratingResponse() && messageLength() > 0;\n@let disableInputButton = (!userQuery().trim() || isLoadingMessagesFromThread()) && !showStopButton;\n\n@let showDefaultIcon = !showStopButton && disableInputButton;\n@let showSendIcon = !showStopButton && !disableInputButton;\n\n@if (showDefaultIcon) {\n    <app-icon\n        data-testid=\"chat-send-button\"\n        [isDisabled]=\"disableInputButton\"\n        [backgroundColor]=\"'--app-icon-background-disabled'\"\n        [disabledIconFill]=\"'--app-icon-disabled'\"\n        [variant]=\"APP_ICON_VARIANTS.PAPER_PLANE\"\n        [size]=\"APP_ICON_SIZES.S\"\n    ></app-icon>\n}\n\n@if (showSendIcon) {\n    <app-icon\n        data-testid=\"chat-send-button\"\n        [variant]=\"APP_ICON_VARIANTS.ARROW_UP\"\n        [backgroundColor]=\"'--app-accent-color-1'\"\n        [iconFill]=\"'--app-neutrals-0'\"\n        [hoverIconFill]=\"'--app-neutrals-0'\"\n        [hoverBackgroundColor]=\"'--app-accent-color-1'\"\n        [size]=\"APP_ICON_SIZES.S\"\n        (onClick)=\"handleSendMessage()\"\n    ></app-icon>\n}\n\n@if (showStopButton) {\n    <app-icon\n        data-testid=\"chat-stop-button\"\n        [variant]=\"APP_ICON_VARIANTS.RECTANGLE\"\n        [backgroundColor]=\"'--app-accent-color-1'\"\n        [iconFill]=\"'--app-neutrals-0'\"\n        [hoverIconFill]=\"'--app-neutrals-0'\"\n        [hoverBackgroundColor]=\"'--app-accent-color-1'\"\n        [size]=\"APP_ICON_SIZES.S\"\n        (onClick)=\"handleStopMessage()\"\n    ></app-icon>\n}\n" }]
+        }], propDecorators: { userQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "userQuery", required: true }] }], onSend: [{ type: i0.Output, args: ["onSend"] }] } });
 
 /**
  * AccentGradientBorderDirective
@@ -4781,15 +4791,15 @@ class AccentGradientBorderDirective {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AccentGradientBorderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: AccentGradientBorderDirective, isStandalone: true, selector: "[accentGradientBorder]", inputs: { accentGradientBorder: { classPropertyName: "accentGradientBorder", publicName: "accentGradientBorder", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AccentGradientBorderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.22", type: AccentGradientBorderDirective, isStandalone: true, selector: "[accentGradientBorder]", inputs: { accentGradientBorder: { classPropertyName: "accentGradientBorder", publicName: "accentGradientBorder", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: ComponentEffectManagerService,
                 useFactory: () => new ComponentEffectManagerService('AccentGradientBorderDirective'),
             },
         ], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AccentGradientBorderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AccentGradientBorderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[accentGradientBorder]',
@@ -4801,7 +4811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                         },
                     ],
                 }]
-        }] });
+        }], propDecorators: { accentGradientBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentGradientBorder", required: false }] }] } });
 
 const COMPONENTS$b = [InputAreaActionBarComponent, InputAreaSendButtonComponent];
 const DIRECTIVES$1 = [AccentGradientBorderDirective, AnimationEffectDirective];
@@ -4925,16 +4935,16 @@ class InputAreaComponent {
             this.setInputValue(description);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: InputAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.1", type: InputAreaComponent, isStandalone: true, selector: "input-area", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: InputAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.22", type: InputAreaComponent, isStandalone: true, selector: "input-area", providers: [
             PromptFacade,
             {
                 provide: ComponentEffectManagerService,
                 useFactory: () => new ComponentEffectManagerService('InputAreaComponent'),
             },
-        ], viewQueries: [{ propertyName: "sendButton", first: true, predicate: InputAreaSendButtonComponent, descendants: true, isSignal: true }, { propertyName: "inputAreaRef", first: true, predicate: ["inputTextArea"], descendants: true, isSignal: true }, { propertyName: "animationDirective", first: true, predicate: AnimationEffectDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    class=\"input-area\"\n    [ngClass]=\"{\n        'w-full': true,\n    }\"\n>\n    <div\n        class=\"input-area__container\"\n        [ngClass]=\"{\n            relative: true,\n        }\"\n    >\n        <!-- Main input container -->\n        <div\n            class=\"input-area__content\"\n            [accentGradientBorder]=\"!isAnimationComplete()\"\n            [ngClass]=\"{\n                'relative rounded-2xl': true,\n            }\"\n        >\n            <div\n                [animationEffect]=\"[AnimationType.MOUNT_360_GLOW, AnimationType.HOVER_MOUSE_FOLLOW]\"\n                [ngClass]=\"{\n                    'flex flex-col gap-4 p-4 rounded-2xl': true,\n                }\"\n                (animationStarted)=\"handleAnimationStart()\"\n                (animationEnded)=\"handleAnimationEnd()\"\n            >\n                <!-- Text input area -->\n                <div\n                    class=\"input-area__textarea-wrapper\"\n                    [ngClass]=\"{\n                        'flex gap-3 items-start px-2': true,\n                    }\"\n                >\n                    <textarea\n                        #inputTextArea\n                        placeholder=\"{{ UI_STRINGS.INPUT_PLACEHOLDER }}\"\n                        class=\"input-area__textarea\"\n                        rows=\"1\"\n                        [ngClass]=\"{\n                            'flex-1 custom-scrollbar custom-scrollbar-no-gutter text-text-default text-sm leading-4 h-auto min-h-[17px] max-h-[260px] resize-none border-none outline-none overflow-y-auto whitespace-pre-wrap': true,\n                            'placeholder:text-text-states-default': true,\n                            'hover:text-text-states-active': true,\n                        }\"\n                        [value]=\"inputValue()\"\n                        (input)=\"handleInputChange($event)\"\n                        (keydown)=\"handleKeyDown($event)\"\n                    ></textarea>\n                </div>\n                <!-- Footer with toolbar and send button -->\n                <div\n                    class=\"input-area__footer\"\n                    [ngClass]=\"{\n                        'flex gap-3 items-center justify-between': true,\n                    }\"\n                >\n                    <input-area-action-bar\n                        [ngClass]=\"{\n                            'flex-1': true,\n                        }\"\n                    ></input-area-action-bar>\n\n                    <input-area-send-button\n                        [userQuery]=\"inputValue()\"\n                        (onSend)=\"setInputValue('')\"\n                    ></input-area-send-button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "component", type: InputAreaActionBarComponent, selector: "input-area-action-bar" }, { kind: "component", type: InputAreaSendButtonComponent, selector: "input-area-send-button", inputs: ["userQuery"], outputs: ["onSend"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: AccentGradientBorderDirective, selector: "[accentGradientBorder]", inputs: ["accentGradientBorder"] }, { kind: "directive", type: AnimationEffectDirective, selector: "[animationEffect]", inputs: ["animationEffect"], outputs: ["animationStarted", "animationCompleted"] }] });
+        ], viewQueries: [{ propertyName: "sendButton", first: true, predicate: InputAreaSendButtonComponent, descendants: true, isSignal: true }, { propertyName: "inputAreaRef", first: true, predicate: ["inputTextArea"], descendants: true, isSignal: true }, { propertyName: "animationDirective", first: true, predicate: AnimationEffectDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    class=\"input-area\"\n    [ngClass]=\"{\n        'w-full': true,\n    }\"\n>\n    <div\n        class=\"input-area__container\"\n        [ngClass]=\"{\n            relative: true,\n        }\"\n    >\n        <!-- Main input container -->\n        <div\n            class=\"input-area__content\"\n            [accentGradientBorder]=\"!isAnimationComplete()\"\n            [ngClass]=\"{\n                'relative rounded-2xl': true,\n            }\"\n        >\n            <div\n                [animationEffect]=\"[AnimationType.MOUNT_360_GLOW, AnimationType.HOVER_MOUSE_FOLLOW]\"\n                [ngClass]=\"{\n                    'flex flex-col gap-4 p-4 rounded-2xl': true,\n                }\"\n                (animationStarted)=\"handleAnimationStart()\"\n                (animationEnded)=\"handleAnimationEnd()\"\n            >\n                <!-- Text input area -->\n                <div\n                    class=\"input-area__textarea-wrapper\"\n                    [ngClass]=\"{\n                        'flex gap-3 items-start px-2': true,\n                    }\"\n                >\n                    <textarea\n                        #inputTextArea\n                        placeholder=\"{{ UI_STRINGS.INPUT_PLACEHOLDER }}\"\n                        data-testid=\"chat-input-field\"\n                        class=\"input-area__textarea\"\n                        rows=\"1\"\n                        [ngClass]=\"{\n                            'flex-1 custom-scrollbar custom-scrollbar-no-gutter text-text-default text-sm leading-4 h-auto min-h-[17px] max-h-[260px] resize-none border-none outline-none overflow-y-auto whitespace-pre-wrap': true,\n                            'placeholder:text-text-states-default': true,\n                            'hover:text-text-states-active': true,\n                        }\"\n                        [value]=\"inputValue()\"\n                        (input)=\"handleInputChange($event)\"\n                        (keydown)=\"handleKeyDown($event)\"\n                    ></textarea>\n                </div>\n                <!-- Footer with toolbar and send button -->\n                <div\n                    class=\"input-area__footer\"\n                    [ngClass]=\"{\n                        'flex gap-3 items-center justify-between': true,\n                    }\"\n                >\n                    <input-area-action-bar\n                        [ngClass]=\"{\n                            'flex-1': true,\n                        }\"\n                    ></input-area-action-bar>\n\n                    <input-area-send-button\n                        [userQuery]=\"inputValue()\"\n                        (onSend)=\"setInputValue('')\"\n                    ></input-area-send-button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "component", type: InputAreaActionBarComponent, selector: "input-area-action-bar" }, { kind: "component", type: InputAreaSendButtonComponent, selector: "input-area-send-button", inputs: ["userQuery"], outputs: ["onSend"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: AccentGradientBorderDirective, selector: "[accentGradientBorder]", inputs: ["accentGradientBorder"] }, { kind: "directive", type: AnimationEffectDirective, selector: "[animationEffect]", inputs: ["animationEffect"], outputs: ["animationStarted", "animationCompleted"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: InputAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: InputAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'input-area', imports: [...COMPONENTS$b, ...MODULES$b, ...DIRECTIVES$1], providers: [
                         PromptFacade,
@@ -4942,19 +4952,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                             provide: ComponentEffectManagerService,
                             useFactory: () => new ComponentEffectManagerService('InputAreaComponent'),
                         },
-                    ], template: "<div\n    class=\"input-area\"\n    [ngClass]=\"{\n        'w-full': true,\n    }\"\n>\n    <div\n        class=\"input-area__container\"\n        [ngClass]=\"{\n            relative: true,\n        }\"\n    >\n        <!-- Main input container -->\n        <div\n            class=\"input-area__content\"\n            [accentGradientBorder]=\"!isAnimationComplete()\"\n            [ngClass]=\"{\n                'relative rounded-2xl': true,\n            }\"\n        >\n            <div\n                [animationEffect]=\"[AnimationType.MOUNT_360_GLOW, AnimationType.HOVER_MOUSE_FOLLOW]\"\n                [ngClass]=\"{\n                    'flex flex-col gap-4 p-4 rounded-2xl': true,\n                }\"\n                (animationStarted)=\"handleAnimationStart()\"\n                (animationEnded)=\"handleAnimationEnd()\"\n            >\n                <!-- Text input area -->\n                <div\n                    class=\"input-area__textarea-wrapper\"\n                    [ngClass]=\"{\n                        'flex gap-3 items-start px-2': true,\n                    }\"\n                >\n                    <textarea\n                        #inputTextArea\n                        placeholder=\"{{ UI_STRINGS.INPUT_PLACEHOLDER }}\"\n                        class=\"input-area__textarea\"\n                        rows=\"1\"\n                        [ngClass]=\"{\n                            'flex-1 custom-scrollbar custom-scrollbar-no-gutter text-text-default text-sm leading-4 h-auto min-h-[17px] max-h-[260px] resize-none border-none outline-none overflow-y-auto whitespace-pre-wrap': true,\n                            'placeholder:text-text-states-default': true,\n                            'hover:text-text-states-active': true,\n                        }\"\n                        [value]=\"inputValue()\"\n                        (input)=\"handleInputChange($event)\"\n                        (keydown)=\"handleKeyDown($event)\"\n                    ></textarea>\n                </div>\n                <!-- Footer with toolbar and send button -->\n                <div\n                    class=\"input-area__footer\"\n                    [ngClass]=\"{\n                        'flex gap-3 items-center justify-between': true,\n                    }\"\n                >\n                    <input-area-action-bar\n                        [ngClass]=\"{\n                            'flex-1': true,\n                        }\"\n                    ></input-area-action-bar>\n\n                    <input-area-send-button\n                        [userQuery]=\"inputValue()\"\n                        (onSend)=\"setInputValue('')\"\n                    ></input-area-send-button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>" }]
-        }] });
+                    ], template: "<div\n    class=\"input-area\"\n    [ngClass]=\"{\n        'w-full': true,\n    }\"\n>\n    <div\n        class=\"input-area__container\"\n        [ngClass]=\"{\n            relative: true,\n        }\"\n    >\n        <!-- Main input container -->\n        <div\n            class=\"input-area__content\"\n            [accentGradientBorder]=\"!isAnimationComplete()\"\n            [ngClass]=\"{\n                'relative rounded-2xl': true,\n            }\"\n        >\n            <div\n                [animationEffect]=\"[AnimationType.MOUNT_360_GLOW, AnimationType.HOVER_MOUSE_FOLLOW]\"\n                [ngClass]=\"{\n                    'flex flex-col gap-4 p-4 rounded-2xl': true,\n                }\"\n                (animationStarted)=\"handleAnimationStart()\"\n                (animationEnded)=\"handleAnimationEnd()\"\n            >\n                <!-- Text input area -->\n                <div\n                    class=\"input-area__textarea-wrapper\"\n                    [ngClass]=\"{\n                        'flex gap-3 items-start px-2': true,\n                    }\"\n                >\n                    <textarea\n                        #inputTextArea\n                        placeholder=\"{{ UI_STRINGS.INPUT_PLACEHOLDER }}\"\n                        data-testid=\"chat-input-field\"\n                        class=\"input-area__textarea\"\n                        rows=\"1\"\n                        [ngClass]=\"{\n                            'flex-1 custom-scrollbar custom-scrollbar-no-gutter text-text-default text-sm leading-4 h-auto min-h-[17px] max-h-[260px] resize-none border-none outline-none overflow-y-auto whitespace-pre-wrap': true,\n                            'placeholder:text-text-states-default': true,\n                            'hover:text-text-states-active': true,\n                        }\"\n                        [value]=\"inputValue()\"\n                        (input)=\"handleInputChange($event)\"\n                        (keydown)=\"handleKeyDown($event)\"\n                    ></textarea>\n                </div>\n                <!-- Footer with toolbar and send button -->\n                <div\n                    class=\"input-area__footer\"\n                    [ngClass]=\"{\n                        'flex gap-3 items-center justify-between': true,\n                    }\"\n                >\n                    <input-area-action-bar\n                        [ngClass]=\"{\n                            'flex-1': true,\n                        }\"\n                    ></input-area-action-bar>\n\n                    <input-area-send-button\n                        [userQuery]=\"inputValue()\"\n                        (onSend)=\"setInputValue('')\"\n                    ></input-area-send-button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>" }]
+        }], propDecorators: { sendButton: [{ type: i0.ViewChild, args: [i0.forwardRef(() => InputAreaSendButtonComponent), { isSignal: true }] }], inputAreaRef: [{ type: i0.ViewChild, args: ['inputTextArea', { isSignal: true }] }], animationDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AnimationEffectDirective), { isSignal: true }] }] } });
 
 class AppSpinnerComponent {
     APP_SPINNER_COMPONENT_SIZE = APP_SPINNER_COMPONENT_SIZE;
     size = input(APP_SPINNER_COMPONENT_SIZE.MEDIUM, ...(ngDevMode ? [{ debugName: "size" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: AppSpinnerComponent, isStandalone: true, selector: "app-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n    class=\"app-spinner\"\n    [ngClass]=\"{\n        'flex items-center justify-center': true,\n    }\"\n>\n    <div\n        class=\"app-spinner__circle\"\n        [ngClass]=\"{\n            'rounded-full animate-spin border-t-proto-background-light border-proto-text-disabled': true,\n            'w-6 h-6 border-2': size() === APP_SPINNER_COMPONENT_SIZE.SMALL,\n            'w-12 h-12 border-4': size() === APP_SPINNER_COMPONENT_SIZE.MEDIUM,\n            'w-16 h-16 border-8': size() === APP_SPINNER_COMPONENT_SIZE.LARGE,\n        }\"\n    ></div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.22", type: AppSpinnerComponent, isStandalone: true, selector: "app-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n    class=\"app-spinner\"\n    [ngClass]=\"{\n        'flex items-center justify-center': true,\n    }\"\n>\n    <div\n        class=\"app-spinner__circle\"\n        [ngClass]=\"{\n            'rounded-full animate-spin border-t-proto-background-light border-proto-text-disabled': true,\n            'w-6 h-6 border-2': size() === APP_SPINNER_COMPONENT_SIZE.SMALL,\n            'w-12 h-12 border-4': size() === APP_SPINNER_COMPONENT_SIZE.MEDIUM,\n            'w-16 h-16 border-8': size() === APP_SPINNER_COMPONENT_SIZE.LARGE,\n        }\"\n    ></div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-spinner', imports: [CommonModule], template: "<div\n    class=\"app-spinner\"\n    [ngClass]=\"{\n        'flex items-center justify-center': true,\n    }\"\n>\n    <div\n        class=\"app-spinner__circle\"\n        [ngClass]=\"{\n            'rounded-full animate-spin border-t-proto-background-light border-proto-text-disabled': true,\n            'w-6 h-6 border-2': size() === APP_SPINNER_COMPONENT_SIZE.SMALL,\n            'w-12 h-12 border-4': size() === APP_SPINNER_COMPONENT_SIZE.MEDIUM,\n            'w-16 h-16 border-8': size() === APP_SPINNER_COMPONENT_SIZE.LARGE,\n        }\"\n    ></div>\n</div>\n" }]
-        }] });
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 const MODULES$a = [CommonModule];
 const COMPONENTS$a = [AppIconComponent];
@@ -5058,15 +5068,15 @@ class ScrollAreaComponent {
         this._mutationObserver.disconnect();
         this._mutationObserver = undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ScrollAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ScrollAreaComponent, isStandalone: true, selector: "scroll-area", inputs: { shouldExpandSpacer: { classPropertyName: "shouldExpandSpacer", publicName: "shouldExpandSpacer", isSignal: true, isRequired: false, transformFunction: null }, isForceScrollToBottomEnabled: { classPropertyName: "isForceScrollToBottomEnabled", publicName: "isForceScrollToBottomEnabled", isSignal: true, isRequired: false, transformFunction: null }, elementToObserve: { classPropertyName: "elementToObserve", publicName: "elementToObserve", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "scroll-area flex flex-col flex-1 min-h-0 relative" }, viewQueries: [{ propertyName: "scrollArea", first: true, predicate: ["scrollArea"], descendants: true, isSignal: true }, { propertyName: "spacerElement", first: true, predicate: ["spacerElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    #scrollArea\n    class=\"scroll-area\"\n    [ngClass]=\"{\n        'flex flex-1 flex-col min-h-0 overflow-y-auto custom-scrollbar custom-scrollbar-no-gutter': true,\n    }\"\n    (scroll)=\"handleOnScroll()\"\n>\n    <ng-content></ng-content>\n\n    <div #spacerElement class=\"scroll-area__spacer\"></div>\n</div>\n\n@if (!isCloseToBottom()) {\n    <app-icon\n        class=\"scroll-area__scroll-to-bottom-button\"\n        [ngClass]=\"{\n            'absolute bottom-5 flex flex-1 justify-center items-center self-center cursor-pointer rounded-full shadow-xs transition-shadow shadow-border-default z-999': true,\n            'hover:shadow-border-hover': true,\n            'transition-opacity duration-500 ease-in-out': true,\n        }\"\n        [variant]=\"APP_ICON_VARIANTS.ARROW_DOWN\"\n        [size]=\"APP_ICON_SIZES.S\"\n        [backgroundColor]=\"'--app-background-secondary'\"\n        (onClick)=\"scrollToBottom()\"\n    ></app-icon>\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ScrollAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: ScrollAreaComponent, isStandalone: true, selector: "scroll-area", inputs: { shouldExpandSpacer: { classPropertyName: "shouldExpandSpacer", publicName: "shouldExpandSpacer", isSignal: true, isRequired: false, transformFunction: null }, isForceScrollToBottomEnabled: { classPropertyName: "isForceScrollToBottomEnabled", publicName: "isForceScrollToBottomEnabled", isSignal: true, isRequired: false, transformFunction: null }, elementToObserve: { classPropertyName: "elementToObserve", publicName: "elementToObserve", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "scroll-area flex flex-col flex-1 min-h-0 relative" }, viewQueries: [{ propertyName: "scrollArea", first: true, predicate: ["scrollArea"], descendants: true, isSignal: true }, { propertyName: "spacerElement", first: true, predicate: ["spacerElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    #scrollArea\n    class=\"scroll-area\"\n    [ngClass]=\"{\n        'flex flex-1 flex-col min-h-0 overflow-y-auto custom-scrollbar custom-scrollbar-no-gutter': true,\n    }\"\n    (scroll)=\"handleOnScroll()\"\n>\n    <ng-content></ng-content>\n\n    <div #spacerElement class=\"scroll-area__spacer\"></div>\n</div>\n\n@if (!isCloseToBottom()) {\n    <app-icon\n        data-testid=\"scroll-to-bottom\"\n        class=\"scroll-area__scroll-to-bottom-button\"\n        [ngClass]=\"{\n            'absolute bottom-5 flex flex-1 justify-center items-center self-center cursor-pointer rounded-full shadow-xs transition-shadow shadow-border-default z-999': true,\n            'hover:shadow-border-hover': true,\n            'transition-opacity duration-500 ease-in-out': true,\n        }\"\n        [variant]=\"APP_ICON_VARIANTS.ARROW_DOWN\"\n        [size]=\"APP_ICON_SIZES.S\"\n        [backgroundColor]=\"'--app-background-secondary'\"\n        (onClick)=\"scrollToBottom()\"\n    ></app-icon>\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ScrollAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ScrollAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'scroll-area', imports: [...MODULES$a, ...COMPONENTS$a], host: {
                         class: 'scroll-area flex flex-col flex-1 min-h-0 relative',
-                    }, template: "<div\n    #scrollArea\n    class=\"scroll-area\"\n    [ngClass]=\"{\n        'flex flex-1 flex-col min-h-0 overflow-y-auto custom-scrollbar custom-scrollbar-no-gutter': true,\n    }\"\n    (scroll)=\"handleOnScroll()\"\n>\n    <ng-content></ng-content>\n\n    <div #spacerElement class=\"scroll-area__spacer\"></div>\n</div>\n\n@if (!isCloseToBottom()) {\n    <app-icon\n        class=\"scroll-area__scroll-to-bottom-button\"\n        [ngClass]=\"{\n            'absolute bottom-5 flex flex-1 justify-center items-center self-center cursor-pointer rounded-full shadow-xs transition-shadow shadow-border-default z-999': true,\n            'hover:shadow-border-hover': true,\n            'transition-opacity duration-500 ease-in-out': true,\n        }\"\n        [variant]=\"APP_ICON_VARIANTS.ARROW_DOWN\"\n        [size]=\"APP_ICON_SIZES.S\"\n        [backgroundColor]=\"'--app-background-secondary'\"\n        (onClick)=\"scrollToBottom()\"\n    ></app-icon>\n}" }]
-        }] });
+                    }, template: "<div\n    #scrollArea\n    class=\"scroll-area\"\n    [ngClass]=\"{\n        'flex flex-1 flex-col min-h-0 overflow-y-auto custom-scrollbar custom-scrollbar-no-gutter': true,\n    }\"\n    (scroll)=\"handleOnScroll()\"\n>\n    <ng-content></ng-content>\n\n    <div #spacerElement class=\"scroll-area__spacer\"></div>\n</div>\n\n@if (!isCloseToBottom()) {\n    <app-icon\n        data-testid=\"scroll-to-bottom\"\n        class=\"scroll-area__scroll-to-bottom-button\"\n        [ngClass]=\"{\n            'absolute bottom-5 flex flex-1 justify-center items-center self-center cursor-pointer rounded-full shadow-xs transition-shadow shadow-border-default z-999': true,\n            'hover:shadow-border-hover': true,\n            'transition-opacity duration-500 ease-in-out': true,\n        }\"\n        [variant]=\"APP_ICON_VARIANTS.ARROW_DOWN\"\n        [size]=\"APP_ICON_SIZES.S\"\n        [backgroundColor]=\"'--app-background-secondary'\"\n        (onClick)=\"scrollToBottom()\"\n    ></app-icon>\n}" }]
+        }], propDecorators: { shouldExpandSpacer: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldExpandSpacer", required: false }] }], isForceScrollToBottomEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isForceScrollToBottomEnabled", required: false }] }], elementToObserve: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementToObserve", required: false }] }], scrollArea: [{ type: i0.ViewChild, args: ['scrollArea', { isSignal: true }] }], spacerElement: [{ type: i0.ViewChild, args: ['spacerElement', { isSignal: true }] }] } });
 
 class CopyToClipboardService {
     _logger = inject(LoggerService);
@@ -5107,10 +5117,10 @@ class CopyToClipboardService {
             document.body.removeChild(textarea);
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CopyToClipboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CopyToClipboardService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: CopyToClipboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: CopyToClipboardService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CopyToClipboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: CopyToClipboardService, decorators: [{
             type: Injectable
         }] });
 
@@ -5121,13 +5131,13 @@ class AppCopyToClipboardButtonComponent {
     handleCopyResponse() {
         this._copyToClipboardService.copyToClipboard(this.textToCopy());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppCopyToClipboardButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: AppCopyToClipboardButtonComponent, isStandalone: true, selector: "app-copy-to-clipboard-button", inputs: { textToCopy: { classPropertyName: "textToCopy", publicName: "textToCopy", isSignal: true, isRequired: true, transformFunction: null } }, providers: [CopyToClipboardService], ngImport: i0, template: "<button class=\"app-opy-to-clipboard-button\" (click)=\"handleCopyResponse()\">\n    <ng-content>{{ UI_STRINGS.COPY }}</ng-content>\n</button>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppCopyToClipboardButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.22", type: AppCopyToClipboardButtonComponent, isStandalone: true, selector: "app-copy-to-clipboard-button", inputs: { textToCopy: { classPropertyName: "textToCopy", publicName: "textToCopy", isSignal: true, isRequired: true, transformFunction: null } }, providers: [CopyToClipboardService], ngImport: i0, template: "<button class=\"app-opy-to-clipboard-button\" (click)=\"handleCopyResponse()\">\n    <ng-content>{{ UI_STRINGS.COPY }}</ng-content>\n</button>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppCopyToClipboardButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppCopyToClipboardButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-copy-to-clipboard-button', providers: [CopyToClipboardService], template: "<button class=\"app-opy-to-clipboard-button\" (click)=\"handleCopyResponse()\">\n    <ng-content>{{ UI_STRINGS.COPY }}</ng-content>\n</button>\n" }]
-        }] });
+        }], propDecorators: { textToCopy: [{ type: i0.Input, args: [{ isSignal: true, alias: "textToCopy", required: true }] }] } });
 
 /**
  * Processes AG-UI events from a StreamResponse (RunHandle) and converts them into Redux actions.
@@ -5654,25 +5664,25 @@ class MessageFooterComponent {
             messages: [userMessage],
         }, this._activeThreadId());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MessageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: MessageFooterComponent, isStandalone: true, selector: "message-footer", inputs: { messageFooterId: { classPropertyName: "messageFooterId", publicName: "messageFooterId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\n    class=\"message-footer\"\n    [ngClass]=\"{\n        'flex flex-1 gap-[2px]': true,\n    }\"\n>\n    <app-copy-to-clipboard-button [textToCopy]=\"handleResponseToText()\">\n        <app-icon [variant]=\"APP_ICON_VARIANTS.COPY\"></app-icon>\n    </app-copy-to-clipboard-button>\n    <app-icon [variant]=\"APP_ICON_VARIANTS.RELOAD\" (click)=\"handleRegenerateResponse()\"></app-icon>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppCopyToClipboardButtonComponent, selector: "app-copy-to-clipboard-button", inputs: ["textToCopy"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: MessageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.22", type: MessageFooterComponent, isStandalone: true, selector: "message-footer", inputs: { messageFooterId: { classPropertyName: "messageFooterId", publicName: "messageFooterId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\n    class=\"message-footer\"\n    data-testid=\"message-footer\"\n    [ngClass]=\"{\n        'flex flex-1 gap-[2px]': true,\n    }\"\n>\n    <app-copy-to-clipboard-button [textToCopy]=\"handleResponseToText()\">\n        <app-icon [variant]=\"APP_ICON_VARIANTS.COPY\"></app-icon>\n    </app-copy-to-clipboard-button>\n    <app-icon [variant]=\"APP_ICON_VARIANTS.RELOAD\" (click)=\"handleRegenerateResponse()\"></app-icon>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppCopyToClipboardButtonComponent, selector: "app-copy-to-clipboard-button", inputs: ["textToCopy"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MessageFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: MessageFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'message-footer', imports: [...MODULES$9, ...COMPONENTS$9], template: "<div\n    class=\"message-footer\"\n    [ngClass]=\"{\n        'flex flex-1 gap-[2px]': true,\n    }\"\n>\n    <app-copy-to-clipboard-button [textToCopy]=\"handleResponseToText()\">\n        <app-icon [variant]=\"APP_ICON_VARIANTS.COPY\"></app-icon>\n    </app-copy-to-clipboard-button>\n    <app-icon [variant]=\"APP_ICON_VARIANTS.RELOAD\" (click)=\"handleRegenerateResponse()\"></app-icon>\n</div>\n" }]
-        }] });
+            args: [{ selector: 'message-footer', imports: [...MODULES$9, ...COMPONENTS$9], template: "<div\n    class=\"message-footer\"\n    data-testid=\"message-footer\"\n    [ngClass]=\"{\n        'flex flex-1 gap-[2px]': true,\n    }\"\n>\n    <app-copy-to-clipboard-button [textToCopy]=\"handleResponseToText()\">\n        <app-icon [variant]=\"APP_ICON_VARIANTS.COPY\"></app-icon>\n    </app-copy-to-clipboard-button>\n    <app-icon [variant]=\"APP_ICON_VARIANTS.RELOAD\" (click)=\"handleRegenerateResponse()\"></app-icon>\n</div>\n" }]
+        }], propDecorators: { messageFooterId: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageFooterId", required: true }] }] } });
 
 const MODULES$8 = [CommonModule];
 const COMPONENTS$8 = [AppMdFormatterComponent, MessageFooterComponent];
 class AssistantMessageComponent {
     message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AssistantMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: AssistantMessageComponent, isStandalone: true, selector: "assistant-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let shouldDisplayFooter =\n    message().displayFooter && message().responseForUserQueryId && message().content !== '';\n\n<div\n    class=\"assistant-message\"\n    [ngClass]=\"{\n        'flex flex-col flex-1 self-stretch text-text-states-active font-weight-400 leading-[19px] safe-word-break': true,\n    }\"\n>\n    <app-md-formatter [content]=\"message().content ?? ''\"></app-md-formatter>\n\n    @if (shouldDisplayFooter) {\n        <message-footer [messageFooterId]=\"message().responseForUserQueryId ?? ''\"></message-footer>\n    }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppMdFormatterComponent, selector: "app-md-formatter", inputs: ["content"] }, { kind: "component", type: MessageFooterComponent, selector: "message-footer", inputs: ["messageFooterId"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AssistantMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: AssistantMessageComponent, isStandalone: true, selector: "assistant-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let shouldDisplayFooter =\n    message().displayFooter && message().responseForUserQueryId && message().content !== '';\n\n<div\n    class=\"assistant-message\"\n    data-testid=\"assistant-message\"\n    [ngClass]=\"{\n        'flex flex-col flex-1 self-stretch text-text-states-active font-weight-400 leading-[19px] safe-word-break': true,\n    }\"\n>\n    <app-md-formatter [content]=\"message().content ?? ''\"></app-md-formatter>\n\n    @if (shouldDisplayFooter) {\n        <message-footer [messageFooterId]=\"message().responseForUserQueryId ?? ''\"></message-footer>\n    }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppMdFormatterComponent, selector: "app-md-formatter", inputs: ["content"] }, { kind: "component", type: MessageFooterComponent, selector: "message-footer", inputs: ["messageFooterId"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AssistantMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AssistantMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'assistant-message', imports: [...MODULES$8, ...COMPONENTS$8], template: "@let shouldDisplayFooter =\n    message().displayFooter && message().responseForUserQueryId && message().content !== '';\n\n<div\n    class=\"assistant-message\"\n    [ngClass]=\"{\n        'flex flex-col flex-1 self-stretch text-text-states-active font-weight-400 leading-[19px] safe-word-break': true,\n    }\"\n>\n    <app-md-formatter [content]=\"message().content ?? ''\"></app-md-formatter>\n\n    @if (shouldDisplayFooter) {\n        <message-footer [messageFooterId]=\"message().responseForUserQueryId ?? ''\"></message-footer>\n    }\n</div>" }]
-        }] });
+            args: [{ selector: 'assistant-message', imports: [...MODULES$8, ...COMPONENTS$8], template: "@let shouldDisplayFooter =\n    message().displayFooter && message().responseForUserQueryId && message().content !== '';\n\n<div\n    class=\"assistant-message\"\n    data-testid=\"assistant-message\"\n    [ngClass]=\"{\n        'flex flex-col flex-1 self-stretch text-text-states-active font-weight-400 leading-[19px] safe-word-break': true,\n    }\"\n>\n    <app-md-formatter [content]=\"message().content ?? ''\"></app-md-formatter>\n\n    @if (shouldDisplayFooter) {\n        <message-footer [messageFooterId]=\"message().responseForUserQueryId ?? ''\"></message-footer>\n    }\n</div>" }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }] } });
 
 class McpAppResourceComponent {
     /** The live AppInstance returned by ai-web. Pass null/undefined when not yet available. */
@@ -5730,13 +5740,13 @@ class McpAppResourceComponent {
         this._mountedInstanceId = null;
         this._elementAppended = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: McpAppResourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.1", type: McpAppResourceComponent, isStandalone: true, selector: "mcp-app-resource", inputs: { appInstance: { classPropertyName: "appInstance", publicName: "appInstance", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `<div #container class="mcp-app-container"></div>`, isInline: true, styles: [".mcp-app-container{width:100%}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: McpAppResourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.22", type: McpAppResourceComponent, isStandalone: true, selector: "mcp-app-resource", inputs: { appInstance: { classPropertyName: "appInstance", publicName: "appInstance", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `<div #container class="mcp-app-container"></div>`, isInline: true, styles: [".mcp-app-container{width:100%}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: McpAppResourceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: McpAppResourceComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mcp-app-resource', template: `<div #container class="mcp-app-container"></div>`, styles: [".mcp-app-container{width:100%}\n"] }]
-        }] });
+        }], propDecorators: { appInstance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appInstance", required: false }] }], _containerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }] } });
 
 const MODULES$7 = [CommonModule];
 const COMPONENTS$7 = [AppIconComponent, AppMdFormatterComponent];
@@ -5808,13 +5818,13 @@ class ToolMessageComponent {
             text: parsedText,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ToolMessageComponent, isStandalone: true, selector: "tool-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, parentToolTraceId: { classPropertyName: "parentToolTraceId", publicName: "parentToolTraceId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let hasResult = message().result !== undefined && message().result !== null;\n@let isExpanded = message().isExpanded !== undefined ? message().isExpanded : false;\n\n<div\n    class=\"tool-message-wrapper\"\n    [ngClass]=\"{\n        'flex flex-col text-text-states-active justify-start py-2 px-[3px] text-[13px] font-weight-600 leading-[100%]': true,\n    }\"\n>\n    <div\n        class=\"tool-message__header-wrapper\"\n        [ngClass]=\"{ 'flex items-center justify-center gap-2 px-1': true }\"\n    >\n        <app-icon\n            [title]=\"\n                hasResult ? UI_STRINGS.TOOL_EXECUTION_SUCCESS : UI_STRINGS.TOOL_EXECUTION_PENDING\n            \"\n            [iconFill]=\"hasResult ? '--app-accent-color-1' : 'text-text-states-active'\"\n            [hoverIconFill]=\"hasResult ? '--app-accent-color-1' : 'text-text-states-active'\"\n            [size]=\"APP_ICON_SIZES.XXXS\"\n            [variant]=\"\n                hasResult ? APP_ICON_VARIANTS.CIRCLE_FILLED : APP_ICON_VARIANTS.CIRCLE_OUTLINE\n            \"\n        ></app-icon>\n\n        <div\n            class=\"tool-message__header\"\n            tabindex=\"0\"\n            [ngClass]=\"{ 'flex flex-1 cursor-pointer': true }\"\n            (click)=\"handleToggle()\"\n            (keyup)=\"handleToggle()\"\n        >\n            <div class=\"flex flex-1 ps-2 items-center\">\n                {{ message().toolName }}\n            </div>\n\n            <app-icon\n                [variant]=\"\n                    isExpanded ? APP_ICON_VARIANTS.CHEVRON_UP : APP_ICON_VARIANTS.CHEVRON_DOWN\n                \"\n            ></app-icon>\n        </div>\n    </div>\n\n    @if (isExpanded) {\n        <div\n            class=\"tool-message__detail-pane\"\n            [ngClass]=\"{\n                'flex flex-col gap-4 list-none pt-2 px-2 w-full': true,\n            }\"\n        >\n            <div\n                class=\"tool-message__detail-pane-section\"\n                [ngClass]=\"{\n                    'px-3 border-l border-text-default': true,\n                }\"\n            >\n                <div class=\"tool-message__detail-pane-section-content\" [ngClass]=\"{ 'px-2': true }\">\n                    <span>Input</span>\n                    <app-md-formatter [content]=\"handleArgsToJSONMarkdown()\"></app-md-formatter>\n\n                    <span>Output</span>\n                    <app-md-formatter [content]=\"handleResultToJSONMarkdown()\"></app-md-formatter>\n                </div>\n            </div>\n        </div>\n    }\n</div>\n", styles: [":host ::ng-deep .io-assist-code-theme:before{background:none!important;background-color:transparent!important}:host ::ng-deep pre .language-json{max-height:320px}@media (min-width: 1024px){:host ::ng-deep pre .language-json{max-height:400px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }, { kind: "component", type: AppMdFormatterComponent, selector: "app-md-formatter", inputs: ["content"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: ToolMessageComponent, isStandalone: true, selector: "tool-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, parentToolTraceId: { classPropertyName: "parentToolTraceId", publicName: "parentToolTraceId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let hasResult = message().result !== undefined && message().result !== null;\n@let isExpanded = message().isExpanded !== undefined ? message().isExpanded : false;\n\n<div\n    class=\"tool-message-wrapper\"\n    [ngClass]=\"{\n        'flex flex-col text-text-states-active justify-start py-2 px-[3px] text-[13px] font-weight-600 leading-[100%]': true,\n    }\"\n>\n    <div\n        class=\"tool-message__header-wrapper\"\n        [ngClass]=\"{ 'flex items-center justify-center gap-2 px-1': true }\"\n    >\n        <app-icon\n            [title]=\"\n                hasResult ? UI_STRINGS.TOOL_EXECUTION_SUCCESS : UI_STRINGS.TOOL_EXECUTION_PENDING\n            \"\n            [iconFill]=\"hasResult ? '--app-accent-color-1' : 'text-text-states-active'\"\n            [hoverIconFill]=\"hasResult ? '--app-accent-color-1' : 'text-text-states-active'\"\n            [size]=\"APP_ICON_SIZES.XXXS\"\n            [variant]=\"\n                hasResult ? APP_ICON_VARIANTS.CIRCLE_FILLED : APP_ICON_VARIANTS.CIRCLE_OUTLINE\n            \"\n        ></app-icon>\n\n        <div\n            class=\"tool-message__header\"\n            tabindex=\"0\"\n            [ngClass]=\"{ 'flex flex-1 cursor-pointer': true }\"\n            (click)=\"handleToggle()\"\n            (keyup)=\"handleToggle()\"\n        >\n            <div class=\"flex flex-1 ps-2 items-center\">\n                {{ message().toolName }}\n            </div>\n\n            <app-icon\n                [variant]=\"\n                    isExpanded ? APP_ICON_VARIANTS.CHEVRON_UP : APP_ICON_VARIANTS.CHEVRON_DOWN\n                \"\n            ></app-icon>\n        </div>\n    </div>\n\n    @if (isExpanded) {\n        <div\n            class=\"tool-message__detail-pane\"\n            [ngClass]=\"{\n                'flex flex-col gap-4 list-none pt-2 px-2 w-full': true,\n            }\"\n        >\n            <div\n                class=\"tool-message__detail-pane-section\"\n                [ngClass]=\"{\n                    'px-3 border-l border-text-default': true,\n                }\"\n            >\n                <div class=\"tool-message__detail-pane-section-content\" [ngClass]=\"{ 'px-2': true }\">\n                    <span>Input</span>\n                    <app-md-formatter [content]=\"handleArgsToJSONMarkdown()\"></app-md-formatter>\n\n                    <span>Output</span>\n                    <app-md-formatter [content]=\"handleResultToJSONMarkdown()\"></app-md-formatter>\n                </div>\n            </div>\n        </div>\n    }\n</div>\n", styles: [":host ::ng-deep .io-assist-code-theme:before{background:none!important;background-color:transparent!important}:host ::ng-deep pre .language-json{max-height:320px}@media (min-width: 1024px){:host ::ng-deep pre .language-json{max-height:400px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }, { kind: "component", type: AppMdFormatterComponent, selector: "app-md-formatter", inputs: ["content"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tool-message', imports: [...MODULES$7, ...COMPONENTS$7], template: "@let hasResult = message().result !== undefined && message().result !== null;\n@let isExpanded = message().isExpanded !== undefined ? message().isExpanded : false;\n\n<div\n    class=\"tool-message-wrapper\"\n    [ngClass]=\"{\n        'flex flex-col text-text-states-active justify-start py-2 px-[3px] text-[13px] font-weight-600 leading-[100%]': true,\n    }\"\n>\n    <div\n        class=\"tool-message__header-wrapper\"\n        [ngClass]=\"{ 'flex items-center justify-center gap-2 px-1': true }\"\n    >\n        <app-icon\n            [title]=\"\n                hasResult ? UI_STRINGS.TOOL_EXECUTION_SUCCESS : UI_STRINGS.TOOL_EXECUTION_PENDING\n            \"\n            [iconFill]=\"hasResult ? '--app-accent-color-1' : 'text-text-states-active'\"\n            [hoverIconFill]=\"hasResult ? '--app-accent-color-1' : 'text-text-states-active'\"\n            [size]=\"APP_ICON_SIZES.XXXS\"\n            [variant]=\"\n                hasResult ? APP_ICON_VARIANTS.CIRCLE_FILLED : APP_ICON_VARIANTS.CIRCLE_OUTLINE\n            \"\n        ></app-icon>\n\n        <div\n            class=\"tool-message__header\"\n            tabindex=\"0\"\n            [ngClass]=\"{ 'flex flex-1 cursor-pointer': true }\"\n            (click)=\"handleToggle()\"\n            (keyup)=\"handleToggle()\"\n        >\n            <div class=\"flex flex-1 ps-2 items-center\">\n                {{ message().toolName }}\n            </div>\n\n            <app-icon\n                [variant]=\"\n                    isExpanded ? APP_ICON_VARIANTS.CHEVRON_UP : APP_ICON_VARIANTS.CHEVRON_DOWN\n                \"\n            ></app-icon>\n        </div>\n    </div>\n\n    @if (isExpanded) {\n        <div\n            class=\"tool-message__detail-pane\"\n            [ngClass]=\"{\n                'flex flex-col gap-4 list-none pt-2 px-2 w-full': true,\n            }\"\n        >\n            <div\n                class=\"tool-message__detail-pane-section\"\n                [ngClass]=\"{\n                    'px-3 border-l border-text-default': true,\n                }\"\n            >\n                <div class=\"tool-message__detail-pane-section-content\" [ngClass]=\"{ 'px-2': true }\">\n                    <span>Input</span>\n                    <app-md-formatter [content]=\"handleArgsToJSONMarkdown()\"></app-md-formatter>\n\n                    <span>Output</span>\n                    <app-md-formatter [content]=\"handleResultToJSONMarkdown()\"></app-md-formatter>\n                </div>\n            </div>\n        </div>\n    }\n</div>\n", styles: [":host ::ng-deep .io-assist-code-theme:before{background:none!important;background-color:transparent!important}:host ::ng-deep pre .language-json{max-height:320px}@media (min-width: 1024px){:host ::ng-deep pre .language-json{max-height:400px}}\n"] }]
-        }] });
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], parentToolTraceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentToolTraceId", required: true }] }] } });
 
 const MODULES$6 = [CommonModule];
 const COMPONENTS$6 = [
@@ -5853,13 +5863,13 @@ class ToolTraceMessageComponent {
     toggleExpanded() {
         this._messageFacade.dispatchToggleToolTrace(this.parentMessage());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolTraceMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ToolTraceMessageComponent, isStandalone: true, selector: "tool-trace-message", inputs: { parentMessage: { classPropertyName: "parentMessage", publicName: "parentMessage", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let uiMessage = currentToolTraceState()?.uiMessage ?? 'No UI Message';\n@let executedTools = currentToolTraceState()?.executedTools ?? [];\n@let isExpanded = currentToolTraceState()?.isExpanded ?? false;\n@let toolTraceId = currentToolTraceState()?.stateForMessageId ?? '';\n@let showFooter = shouldDisplayFooter() && responseForUserQueryId() !== undefined;\n\n@if (isExpanded) {\n    <div\n        class=\"tool-trace-message\"\n        [accentGradientBorder]=\"isExpanded\"\n        [id]=\"'tool-trace-message-' + parentMessage()\"\n        [ngClass]=\"{\n            'relative flex flex-col flex-1 gap-2 text-text-default rounded-[8px]': true,\n        }\"\n    >\n        <!-- Main content container -->\n        <div\n            class=\"tool-trace-message__content\"\n            [ngClass]=\"{\n                'relative flex flex-col gap-2 px-4 py-6': true,\n            }\"\n        >\n            <div\n                class=\"tool-trace-message__header\"\n                tabindex=\"0\"\n                [ngClass]=\"{\n                    'flex items-center gap-2 cursor-pointer hover:text-text-states-active': true,\n                    'cursor-default': executedTools.length === 0,\n                    'flex-row-reverse justify-end': isExpanded,\n                }\"\n                (click)=\"toggleExpanded()\"\n                (keyup.enter)=\"toggleExpanded()\"\n                (keyup.space)=\"toggleExpanded()\"\n            >\n                <span class=\"tool-trace-message__title\">{{ uiMessage }}</span>\n\n                @if (executedTools.length > 0) {\n                    <app-icon\n                        class=\"tool-trace-message__expand-icon\"\n                        [iconFill]=\"isExpanded ? '--app-accent-color-1' : '--app-text-default'\"\n                        [hoverIconFill]=\"\n                            isExpanded ? '--app-accent-color-1' : '--app-text-states-active'\n                        \"\n                        [title]=\"\n                            isExpanded\n                                ? UI_STRINGS.COLLAPSE_BUTTON_TEXT\n                                : UI_STRINGS.EXPAND_BUTTON_TEXT\n                        \"\n                        [variant]=\"\n                            isExpanded\n                                ? APP_ICON_VARIANTS.CHEVRON_DOWN\n                                : APP_ICON_VARIANTS.CHEVRON_RIGHT\n                        \"\n                    ></app-icon>\n                }\n            </div>\n\n            @if (isExpanded && executedTools.length > 0) {\n                <div class=\"tool-trace-message__body\">\n                    @for (tool of executedTools; track $index) {\n                        <tool-message\n                            [message]=\"tool\"\n                            [parentToolTraceId]=\"toolTraceId\"\n                        ></tool-message>\n                    }\n                </div>\n\n                <div class=\"tool-trace-message__footer\">\n                    <app-button (onClick)=\"toggleExpanded()\">{{\n                        UI_STRINGS.CLOSE_BUTTON_TEXT\n                    }}</app-button>\n                </div>\n            }\n        </div>\n    </div>\n}\n\n@if (!isExpanded) {\n    <div\n        class=\"tool-trace-message\"\n        [id]=\"'tool-trace-message-' + parentMessage()\"\n        [ngClass]=\"{\n            'relative flex flex-col flex-1 gap-2 text-text-default rounded-[8px]': true,\n        }\"\n    >\n        <!-- Main content container -->\n        <div\n            class=\"tool-trace-message__content\"\n            [ngClass]=\"{\n                'relative flex flex-col gap-2 px-4 py-6': true,\n            }\"\n        >\n            <div\n                class=\"tool-trace-message__header\"\n                tabindex=\"0\"\n                [ngClass]=\"{\n                    'flex items-center gap-2 cursor-pointer hover:text-text-states-active': true,\n                    'cursor-default': executedTools.length === 0,\n                    'flex-row-reverse justify-end': isExpanded,\n                }\"\n                (click)=\"toggleExpanded()\"\n                (keyup.enter)=\"toggleExpanded()\"\n                (keyup.space)=\"toggleExpanded()\"\n            >\n                <span class=\"tool-trace-message__title\">{{ uiMessage }}</span>\n\n                @if (executedTools.length > 0) {\n                    <app-icon\n                        class=\"tool-trace-message__expand-icon\"\n                        [iconFill]=\"isExpanded ? '--app-accent-color-1' : '--app-text-default'\"\n                        [hoverIconFill]=\"\n                            isExpanded ? '--app-accent-color-1' : '--app-text-states-active'\n                        \"\n                        [title]=\"\n                            isExpanded\n                                ? UI_STRINGS.COLLAPSE_BUTTON_TEXT\n                                : UI_STRINGS.EXPAND_BUTTON_TEXT\n                        \"\n                        [variant]=\"\n                            isExpanded\n                                ? APP_ICON_VARIANTS.CHEVRON_DOWN\n                                : APP_ICON_VARIANTS.CHEVRON_RIGHT\n                        \"\n                    ></app-icon>\n                }\n            </div>\n\n            @if (isExpanded && executedTools.length > 0) {\n                <div class=\"tool-trace-message__body\">\n                    @for (tool of executedTools; track $index) {\n                        <tool-message\n                            [message]=\"tool\"\n                            [parentToolTraceId]=\"toolTraceId\"\n                        ></tool-message>\n                    }\n                </div>\n\n                <div class=\"tool-trace-message__footer\">\n                    <app-button (onClick)=\"toggleExpanded()\">{{\n                        UI_STRINGS.CLOSE_BUTTON_TEXT\n                    }}</app-button>\n                </div>\n            }\n        </div>\n    </div>\n}\n\n@if (showFooter) {\n    <message-footer [messageFooterId]=\"responseForUserQueryId()!\"></message-footer>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }, { kind: "component", type: ToolMessageComponent, selector: "tool-message", inputs: ["message", "parentToolTraceId"] }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["buttonType", "disabled"], outputs: ["onClick"] }, { kind: "component", type: MessageFooterComponent, selector: "message-footer", inputs: ["messageFooterId"] }, { kind: "directive", type: AccentGradientBorderDirective, selector: "[accentGradientBorder]", inputs: ["accentGradientBorder"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolTraceMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: ToolTraceMessageComponent, isStandalone: true, selector: "tool-trace-message", inputs: { parentMessage: { classPropertyName: "parentMessage", publicName: "parentMessage", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let uiMessage = currentToolTraceState()?.uiMessage ?? 'No UI Message';\n@let executedTools = currentToolTraceState()?.executedTools ?? [];\n@let isExpanded = currentToolTraceState()?.isExpanded ?? false;\n@let toolTraceId = currentToolTraceState()?.stateForMessageId ?? '';\n@let showFooter = shouldDisplayFooter() && responseForUserQueryId() !== undefined;\n\n@if (isExpanded) {\n    <div\n        class=\"tool-trace-message\"\n        [accentGradientBorder]=\"isExpanded\"\n        [id]=\"'tool-trace-message-' + parentMessage()\"\n        [ngClass]=\"{\n            'relative flex flex-col flex-1 gap-2 text-text-default rounded-[8px]': true,\n        }\"\n    >\n        <!-- Main content container -->\n        <div\n            class=\"tool-trace-message__content\"\n            [ngClass]=\"{\n                'relative flex flex-col gap-2 px-4 py-6': true,\n            }\"\n        >\n            <div\n                class=\"tool-trace-message__header\"\n                tabindex=\"0\"\n                [ngClass]=\"{\n                    'flex items-center gap-2 cursor-pointer hover:text-text-states-active': true,\n                    'cursor-default': executedTools.length === 0,\n                    'flex-row-reverse justify-end': isExpanded,\n                }\"\n                (click)=\"toggleExpanded()\"\n                (keyup.enter)=\"toggleExpanded()\"\n                (keyup.space)=\"toggleExpanded()\"\n            >\n                <span class=\"tool-trace-message__title\">{{ uiMessage }}</span>\n\n                @if (executedTools.length > 0) {\n                    <app-icon\n                        class=\"tool-trace-message__expand-icon\"\n                        [iconFill]=\"isExpanded ? '--app-accent-color-1' : '--app-text-default'\"\n                        [hoverIconFill]=\"\n                            isExpanded ? '--app-accent-color-1' : '--app-text-states-active'\n                        \"\n                        [title]=\"\n                            isExpanded\n                                ? UI_STRINGS.COLLAPSE_BUTTON_TEXT\n                                : UI_STRINGS.EXPAND_BUTTON_TEXT\n                        \"\n                        [variant]=\"\n                            isExpanded\n                                ? APP_ICON_VARIANTS.CHEVRON_DOWN\n                                : APP_ICON_VARIANTS.CHEVRON_RIGHT\n                        \"\n                    ></app-icon>\n                }\n            </div>\n\n            @if (isExpanded && executedTools.length > 0) {\n                <div class=\"tool-trace-message__body\">\n                    @for (tool of executedTools; track $index) {\n                        <tool-message\n                            [message]=\"tool\"\n                            [parentToolTraceId]=\"toolTraceId\"\n                        ></tool-message>\n                    }\n                </div>\n\n                <div class=\"tool-trace-message__footer\">\n                    <app-button (onClick)=\"toggleExpanded()\">{{\n                        UI_STRINGS.CLOSE_BUTTON_TEXT\n                    }}</app-button>\n                </div>\n            }\n        </div>\n    </div>\n}\n\n@if (!isExpanded) {\n    <div\n        class=\"tool-trace-message\"\n        [id]=\"'tool-trace-message-' + parentMessage()\"\n        [ngClass]=\"{\n            'relative flex flex-col flex-1 gap-2 text-text-default rounded-[8px]': true,\n        }\"\n    >\n        <!-- Main content container -->\n        <div\n            class=\"tool-trace-message__content\"\n            [ngClass]=\"{\n                'relative flex flex-col gap-2 px-4 py-6': true,\n            }\"\n        >\n            <div\n                class=\"tool-trace-message__header\"\n                tabindex=\"0\"\n                [ngClass]=\"{\n                    'flex items-center gap-2 cursor-pointer hover:text-text-states-active': true,\n                    'cursor-default': executedTools.length === 0,\n                    'flex-row-reverse justify-end': isExpanded,\n                }\"\n                (click)=\"toggleExpanded()\"\n                (keyup.enter)=\"toggleExpanded()\"\n                (keyup.space)=\"toggleExpanded()\"\n            >\n                <span class=\"tool-trace-message__title\">{{ uiMessage }}</span>\n\n                @if (executedTools.length > 0) {\n                    <app-icon\n                        class=\"tool-trace-message__expand-icon\"\n                        [iconFill]=\"isExpanded ? '--app-accent-color-1' : '--app-text-default'\"\n                        [hoverIconFill]=\"\n                            isExpanded ? '--app-accent-color-1' : '--app-text-states-active'\n                        \"\n                        [title]=\"\n                            isExpanded\n                                ? UI_STRINGS.COLLAPSE_BUTTON_TEXT\n                                : UI_STRINGS.EXPAND_BUTTON_TEXT\n                        \"\n                        [variant]=\"\n                            isExpanded\n                                ? APP_ICON_VARIANTS.CHEVRON_DOWN\n                                : APP_ICON_VARIANTS.CHEVRON_RIGHT\n                        \"\n                    ></app-icon>\n                }\n            </div>\n\n            @if (isExpanded && executedTools.length > 0) {\n                <div class=\"tool-trace-message__body\">\n                    @for (tool of executedTools; track $index) {\n                        <tool-message\n                            [message]=\"tool\"\n                            [parentToolTraceId]=\"toolTraceId\"\n                        ></tool-message>\n                    }\n                </div>\n\n                <div class=\"tool-trace-message__footer\">\n                    <app-button (onClick)=\"toggleExpanded()\">{{\n                        UI_STRINGS.CLOSE_BUTTON_TEXT\n                    }}</app-button>\n                </div>\n            }\n        </div>\n    </div>\n}\n\n@if (showFooter) {\n    <message-footer [messageFooterId]=\"responseForUserQueryId()!\"></message-footer>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }, { kind: "component", type: ToolMessageComponent, selector: "tool-message", inputs: ["message", "parentToolTraceId"] }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["buttonType", "disabled"], outputs: ["onClick"] }, { kind: "component", type: MessageFooterComponent, selector: "message-footer", inputs: ["messageFooterId"] }, { kind: "directive", type: AccentGradientBorderDirective, selector: "[accentGradientBorder]", inputs: ["accentGradientBorder"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolTraceMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolTraceMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tool-trace-message', imports: [...MODULES$6, ...COMPONENTS$6, ...DIRECTIVES], template: "@let uiMessage = currentToolTraceState()?.uiMessage ?? 'No UI Message';\n@let executedTools = currentToolTraceState()?.executedTools ?? [];\n@let isExpanded = currentToolTraceState()?.isExpanded ?? false;\n@let toolTraceId = currentToolTraceState()?.stateForMessageId ?? '';\n@let showFooter = shouldDisplayFooter() && responseForUserQueryId() !== undefined;\n\n@if (isExpanded) {\n    <div\n        class=\"tool-trace-message\"\n        [accentGradientBorder]=\"isExpanded\"\n        [id]=\"'tool-trace-message-' + parentMessage()\"\n        [ngClass]=\"{\n            'relative flex flex-col flex-1 gap-2 text-text-default rounded-[8px]': true,\n        }\"\n    >\n        <!-- Main content container -->\n        <div\n            class=\"tool-trace-message__content\"\n            [ngClass]=\"{\n                'relative flex flex-col gap-2 px-4 py-6': true,\n            }\"\n        >\n            <div\n                class=\"tool-trace-message__header\"\n                tabindex=\"0\"\n                [ngClass]=\"{\n                    'flex items-center gap-2 cursor-pointer hover:text-text-states-active': true,\n                    'cursor-default': executedTools.length === 0,\n                    'flex-row-reverse justify-end': isExpanded,\n                }\"\n                (click)=\"toggleExpanded()\"\n                (keyup.enter)=\"toggleExpanded()\"\n                (keyup.space)=\"toggleExpanded()\"\n            >\n                <span class=\"tool-trace-message__title\">{{ uiMessage }}</span>\n\n                @if (executedTools.length > 0) {\n                    <app-icon\n                        class=\"tool-trace-message__expand-icon\"\n                        [iconFill]=\"isExpanded ? '--app-accent-color-1' : '--app-text-default'\"\n                        [hoverIconFill]=\"\n                            isExpanded ? '--app-accent-color-1' : '--app-text-states-active'\n                        \"\n                        [title]=\"\n                            isExpanded\n                                ? UI_STRINGS.COLLAPSE_BUTTON_TEXT\n                                : UI_STRINGS.EXPAND_BUTTON_TEXT\n                        \"\n                        [variant]=\"\n                            isExpanded\n                                ? APP_ICON_VARIANTS.CHEVRON_DOWN\n                                : APP_ICON_VARIANTS.CHEVRON_RIGHT\n                        \"\n                    ></app-icon>\n                }\n            </div>\n\n            @if (isExpanded && executedTools.length > 0) {\n                <div class=\"tool-trace-message__body\">\n                    @for (tool of executedTools; track $index) {\n                        <tool-message\n                            [message]=\"tool\"\n                            [parentToolTraceId]=\"toolTraceId\"\n                        ></tool-message>\n                    }\n                </div>\n\n                <div class=\"tool-trace-message__footer\">\n                    <app-button (onClick)=\"toggleExpanded()\">{{\n                        UI_STRINGS.CLOSE_BUTTON_TEXT\n                    }}</app-button>\n                </div>\n            }\n        </div>\n    </div>\n}\n\n@if (!isExpanded) {\n    <div\n        class=\"tool-trace-message\"\n        [id]=\"'tool-trace-message-' + parentMessage()\"\n        [ngClass]=\"{\n            'relative flex flex-col flex-1 gap-2 text-text-default rounded-[8px]': true,\n        }\"\n    >\n        <!-- Main content container -->\n        <div\n            class=\"tool-trace-message__content\"\n            [ngClass]=\"{\n                'relative flex flex-col gap-2 px-4 py-6': true,\n            }\"\n        >\n            <div\n                class=\"tool-trace-message__header\"\n                tabindex=\"0\"\n                [ngClass]=\"{\n                    'flex items-center gap-2 cursor-pointer hover:text-text-states-active': true,\n                    'cursor-default': executedTools.length === 0,\n                    'flex-row-reverse justify-end': isExpanded,\n                }\"\n                (click)=\"toggleExpanded()\"\n                (keyup.enter)=\"toggleExpanded()\"\n                (keyup.space)=\"toggleExpanded()\"\n            >\n                <span class=\"tool-trace-message__title\">{{ uiMessage }}</span>\n\n                @if (executedTools.length > 0) {\n                    <app-icon\n                        class=\"tool-trace-message__expand-icon\"\n                        [iconFill]=\"isExpanded ? '--app-accent-color-1' : '--app-text-default'\"\n                        [hoverIconFill]=\"\n                            isExpanded ? '--app-accent-color-1' : '--app-text-states-active'\n                        \"\n                        [title]=\"\n                            isExpanded\n                                ? UI_STRINGS.COLLAPSE_BUTTON_TEXT\n                                : UI_STRINGS.EXPAND_BUTTON_TEXT\n                        \"\n                        [variant]=\"\n                            isExpanded\n                                ? APP_ICON_VARIANTS.CHEVRON_DOWN\n                                : APP_ICON_VARIANTS.CHEVRON_RIGHT\n                        \"\n                    ></app-icon>\n                }\n            </div>\n\n            @if (isExpanded && executedTools.length > 0) {\n                <div class=\"tool-trace-message__body\">\n                    @for (tool of executedTools; track $index) {\n                        <tool-message\n                            [message]=\"tool\"\n                            [parentToolTraceId]=\"toolTraceId\"\n                        ></tool-message>\n                    }\n                </div>\n\n                <div class=\"tool-trace-message__footer\">\n                    <app-button (onClick)=\"toggleExpanded()\">{{\n                        UI_STRINGS.CLOSE_BUTTON_TEXT\n                    }}</app-button>\n                </div>\n            }\n        </div>\n    </div>\n}\n\n@if (showFooter) {\n    <message-footer [messageFooterId]=\"responseForUserQueryId()!\"></message-footer>\n}\n" }]
-        }] });
+        }], propDecorators: { parentMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentMessage", required: true }] }] } });
 
 const MODULES$5 = [CommonModule];
 const COMPONENTS$5 = [AppSpinnerComponent, AppIconComponent];
@@ -5886,13 +5896,13 @@ class UserMessageComponent {
             messages: [userMessage],
         }, this._activeThreadId());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: UserMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: UserMessageComponent, isStandalone: true, selector: "user-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let showLoadingSpinner = isGeneratingResponse() && message().id === lastUserMessage()?.id;\n@let showReloadButton = error() && message().id === lastUserMessage()?.id;\n@let showError = error() && message().id === lastUserMessage()?.id;\n\n<div\n    class=\"user-message\"\n    [ngClass]=\"{\n        'flex flex-col justify-end': true,\n    }\"\n>\n    <div class=\"user-message__inner\" [ngClass]=\"{ 'flex items-end justify-end': true }\">\n        <div\n            class=\"user-message__actions\"\n            [ngClass]=\"{\n                'flex items-end px-2': true,\n            }\"\n        >\n            @if (showLoadingSpinner) {\n                <app-spinner [size]=\"APP_SPINNER_COMPONENT_SIZE.SMALL\" />\n            }\n\n            @if (showReloadButton) {\n                <app-icon\n                    [variant]=\"APP_ICON_VARIANTS.RELOAD\"\n                    [size]=\"APP_ICON_SIZES.S\"\n                    [backgroundColor]=\"'--app-accent-color-3'\"\n                    [iconFill]=\"'--app-neutrals-1000'\"\n                    [hoverIconFill]=\"'--app-accent-color-3'\"\n                    (click)=\"reloadResponse()\"\n                    >Reload</app-icon\n                >\n            }\n        </div>\n\n        <div class=\"user-message__content flex min-w-0\">\n            <div\n                class=\"user-message__bubble\"\n                [ngClass]=\"{\n                    'p-4 list-none text-[14px] leading-[18px] font-weight-400 text-user-message-text bg-user-message-background rounded-2xl max-w-[620px]': true,\n                    'min-w-0 whitespace-pre-wrap break-words': true,\n                }\"\n            >\n                {{ message().content }}\n            </div>\n        </div>\n    </div>\n\n    @if (showError) {\n        <div\n            class=\"user-message__error\"\n            [ngClass]=\"{\n                'flex justify-end py-1 text-text-default text-[13px] font-weight-400 leading-[100%]': true,\n            }\"\n        >\n            {{ error() }}\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSpinnerComponent, selector: "app-spinner", inputs: ["size"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: UserMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: UserMessageComponent, isStandalone: true, selector: "user-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let showLoadingSpinner = isGeneratingResponse() && message().id === lastUserMessage()?.id;\n@let showReloadButton = error() && message().id === lastUserMessage()?.id;\n@let showError = error() && message().id === lastUserMessage()?.id;\n\n<div\n    class=\"user-message\"\n    [ngClass]=\"{\n        'flex flex-col justify-end': true,\n    }\"\n>\n    <div class=\"user-message__inner\" [ngClass]=\"{ 'flex items-end justify-end': true }\">\n        <div\n            class=\"user-message__actions\"\n            [ngClass]=\"{\n                'flex items-end px-2': true,\n            }\"\n        >\n            @if (showLoadingSpinner) {\n                <app-spinner data-testid=\"loading-indicator\" [size]=\"APP_SPINNER_COMPONENT_SIZE.SMALL\" />\n            }\n\n            @if (showReloadButton) {\n                <app-icon\n                    [variant]=\"APP_ICON_VARIANTS.RELOAD\"\n                    [size]=\"APP_ICON_SIZES.S\"\n                    [backgroundColor]=\"'--app-accent-color-3'\"\n                    [iconFill]=\"'--app-neutrals-1000'\"\n                    [hoverIconFill]=\"'--app-accent-color-3'\"\n                    (click)=\"reloadResponse()\"\n                    >Reload</app-icon\n                >\n            }\n        </div>\n\n        <div class=\"user-message__content flex min-w-0\">\n            <div\n                class=\"user-message__bubble\"\n                [ngClass]=\"{\n                    'p-4 list-none text-[14px] leading-[18px] font-weight-400 text-user-message-text bg-user-message-background rounded-2xl max-w-[620px]': true,\n                    'min-w-0 whitespace-pre-wrap break-words': true,\n                }\"\n            >\n                {{ message().content }}\n            </div>\n        </div>\n    </div>\n\n    @if (showError) {\n        <div\n            class=\"user-message__error\"\n            [ngClass]=\"{\n                'flex justify-end py-1 text-text-default text-[13px] font-weight-400 leading-[100%]': true,\n            }\"\n        >\n            {{ error() }}\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSpinnerComponent, selector: "app-spinner", inputs: ["size"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: UserMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: UserMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'user-message', imports: [...MODULES$5, ...COMPONENTS$5], template: "@let showLoadingSpinner = isGeneratingResponse() && message().id === lastUserMessage()?.id;\n@let showReloadButton = error() && message().id === lastUserMessage()?.id;\n@let showError = error() && message().id === lastUserMessage()?.id;\n\n<div\n    class=\"user-message\"\n    [ngClass]=\"{\n        'flex flex-col justify-end': true,\n    }\"\n>\n    <div class=\"user-message__inner\" [ngClass]=\"{ 'flex items-end justify-end': true }\">\n        <div\n            class=\"user-message__actions\"\n            [ngClass]=\"{\n                'flex items-end px-2': true,\n            }\"\n        >\n            @if (showLoadingSpinner) {\n                <app-spinner [size]=\"APP_SPINNER_COMPONENT_SIZE.SMALL\" />\n            }\n\n            @if (showReloadButton) {\n                <app-icon\n                    [variant]=\"APP_ICON_VARIANTS.RELOAD\"\n                    [size]=\"APP_ICON_SIZES.S\"\n                    [backgroundColor]=\"'--app-accent-color-3'\"\n                    [iconFill]=\"'--app-neutrals-1000'\"\n                    [hoverIconFill]=\"'--app-accent-color-3'\"\n                    (click)=\"reloadResponse()\"\n                    >Reload</app-icon\n                >\n            }\n        </div>\n\n        <div class=\"user-message__content flex min-w-0\">\n            <div\n                class=\"user-message__bubble\"\n                [ngClass]=\"{\n                    'p-4 list-none text-[14px] leading-[18px] font-weight-400 text-user-message-text bg-user-message-background rounded-2xl max-w-[620px]': true,\n                    'min-w-0 whitespace-pre-wrap break-words': true,\n                }\"\n            >\n                {{ message().content }}\n            </div>\n        </div>\n    </div>\n\n    @if (showError) {\n        <div\n            class=\"user-message__error\"\n            [ngClass]=\"{\n                'flex justify-end py-1 text-text-default text-[13px] font-weight-400 leading-[100%]': true,\n            }\"\n        >\n            {{ error() }}\n        </div>\n    }\n</div>\n" }]
-        }] });
+            args: [{ selector: 'user-message', imports: [...MODULES$5, ...COMPONENTS$5], template: "@let showLoadingSpinner = isGeneratingResponse() && message().id === lastUserMessage()?.id;\n@let showReloadButton = error() && message().id === lastUserMessage()?.id;\n@let showError = error() && message().id === lastUserMessage()?.id;\n\n<div\n    class=\"user-message\"\n    [ngClass]=\"{\n        'flex flex-col justify-end': true,\n    }\"\n>\n    <div class=\"user-message__inner\" [ngClass]=\"{ 'flex items-end justify-end': true }\">\n        <div\n            class=\"user-message__actions\"\n            [ngClass]=\"{\n                'flex items-end px-2': true,\n            }\"\n        >\n            @if (showLoadingSpinner) {\n                <app-spinner data-testid=\"loading-indicator\" [size]=\"APP_SPINNER_COMPONENT_SIZE.SMALL\" />\n            }\n\n            @if (showReloadButton) {\n                <app-icon\n                    [variant]=\"APP_ICON_VARIANTS.RELOAD\"\n                    [size]=\"APP_ICON_SIZES.S\"\n                    [backgroundColor]=\"'--app-accent-color-3'\"\n                    [iconFill]=\"'--app-neutrals-1000'\"\n                    [hoverIconFill]=\"'--app-accent-color-3'\"\n                    (click)=\"reloadResponse()\"\n                    >Reload</app-icon\n                >\n            }\n        </div>\n\n        <div class=\"user-message__content flex min-w-0\">\n            <div\n                class=\"user-message__bubble\"\n                [ngClass]=\"{\n                    'p-4 list-none text-[14px] leading-[18px] font-weight-400 text-user-message-text bg-user-message-background rounded-2xl max-w-[620px]': true,\n                    'min-w-0 whitespace-pre-wrap break-words': true,\n                }\"\n            >\n                {{ message().content }}\n            </div>\n        </div>\n    </div>\n\n    @if (showError) {\n        <div\n            class=\"user-message__error\"\n            [ngClass]=\"{\n                'flex justify-end py-1 text-text-default text-[13px] font-weight-400 leading-[100%]': true,\n            }\"\n        >\n            {{ error() }}\n        </div>\n    }\n</div>\n" }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }] } });
 
 const COMPONENTS$4 = [
     ScrollAreaComponent,
@@ -5944,19 +5954,19 @@ class MessageAreaComponent {
     showToolTraceForMessage(messageId) {
         return this.toolTraceState().some((state) => state.stateForMessageId === messageId && state.executedTools.length > 0);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MessageAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: MessageAreaComponent, isStandalone: true, selector: "message-area", viewQueries: [{ propertyName: "messageAreaRef", first: true, predicate: ["messageArea"], descendants: true, isSignal: true }], ngImport: i0, template: "<scroll-area\n    [isForceScrollToBottomEnabled]=\"isSuccessFetchedFromThread()\"\n    [shouldExpandSpacer]=\"isLastUserMessage()\"\n    [elementToObserve]=\"messageAreaRef() ?? null\"\n>\n    @if (isLoadingMessagesFromThread()) {\n        <div\n            [ngClass]=\"{\n                'flex flex-1 justify-center items-center p-4': true,\n            }\"\n        >\n            <app-spinner [size]=\"APP_SPINNER_COMPONENT_SIZE.MEDIUM\"></app-spinner>\n        </div>\n    }\n\n    <div\n        #messageArea\n        class=\"message-area\"\n        [ngClass]=\"{\n            'flex flex-1 flex-col gap-8 w-full min-w-[200px] max-w-[920px] mx-auto px-3': true,\n            'md:max-w-[720px]': true,\n        }\"\n    >\n        @for (message of allMessages(); track message.id) {\n            @if (message.role === UI_MESSAGE_ROLES.USER) {\n                <user-message [message]=\"message\"></user-message>\n                <!-- Handles tool messages inside -->\n            }\n\n            @if (message.role === UI_MESSAGE_ROLES.ASSISTANT) {\n                <assistant-message [message]=\"message\"></assistant-message>\n\n                @for (instance of getMcpAppsForResponse(message.responseForUserQueryId); track instance.id) {\n                    <mcp-app-resource [appInstance]=\"instance\"></mcp-app-resource>\n                }\n            }\n\n            @if (showToolTraceForMessage(message.id)) {\n                <tool-trace-message [parentMessage]=\"message.id\"></tool-trace-message>\n            }\n        }\n    </div>\n</scroll-area>", dependencies: [{ kind: "component", type: ScrollAreaComponent, selector: "scroll-area", inputs: ["shouldExpandSpacer", "isForceScrollToBottomEnabled", "elementToObserve"] }, { kind: "component", type: AssistantMessageComponent, selector: "assistant-message", inputs: ["message"] }, { kind: "component", type: UserMessageComponent, selector: "user-message", inputs: ["message"] }, { kind: "component", type: AppSpinnerComponent, selector: "app-spinner", inputs: ["size"] }, { kind: "component", type: ToolTraceMessageComponent, selector: "tool-trace-message", inputs: ["parentMessage"] }, { kind: "component", type: McpAppResourceComponent, selector: "mcp-app-resource", inputs: ["appInstance"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: MessageAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: MessageAreaComponent, isStandalone: true, selector: "message-area", viewQueries: [{ propertyName: "messageAreaRef", first: true, predicate: ["messageArea"], descendants: true, isSignal: true }], ngImport: i0, template: "<scroll-area\n    [isForceScrollToBottomEnabled]=\"isSuccessFetchedFromThread()\"\n    [shouldExpandSpacer]=\"isLastUserMessage()\"\n    [elementToObserve]=\"messageAreaRef() ?? null\"\n>\n    @if (isLoadingMessagesFromThread()) {\n        <div\n            [ngClass]=\"{\n                'flex flex-1 justify-center items-center p-4': true,\n            }\"\n        >\n            <app-spinner [size]=\"APP_SPINNER_COMPONENT_SIZE.MEDIUM\"></app-spinner>\n        </div>\n    }\n\n    <div\n        #messageArea\n        class=\"message-area\"\n        [ngClass]=\"{\n            'flex flex-1 flex-col gap-8 w-full min-w-[200px] max-w-[920px] mx-auto px-3': true,\n            'md:max-w-[720px]': true,\n        }\"\n    >\n        @for (message of allMessages(); track message.id) {\n            @if (message.role === UI_MESSAGE_ROLES.USER) {\n                <user-message [message]=\"message\"></user-message>\n                <!-- Handles tool messages inside -->\n            }\n\n            @if (message.role === UI_MESSAGE_ROLES.ASSISTANT) {\n                <assistant-message [message]=\"message\"></assistant-message>\n\n                @for (instance of getMcpAppsForResponse(message.responseForUserQueryId); track instance.id) {\n                    <mcp-app-resource [appInstance]=\"instance\"></mcp-app-resource>\n                }\n            }\n\n            @if (showToolTraceForMessage(message.id)) {\n                <tool-trace-message [parentMessage]=\"message.id\"></tool-trace-message>\n            }\n        }\n    </div>\n</scroll-area>", dependencies: [{ kind: "component", type: ScrollAreaComponent, selector: "scroll-area", inputs: ["shouldExpandSpacer", "isForceScrollToBottomEnabled", "elementToObserve"] }, { kind: "component", type: AssistantMessageComponent, selector: "assistant-message", inputs: ["message"] }, { kind: "component", type: UserMessageComponent, selector: "user-message", inputs: ["message"] }, { kind: "component", type: AppSpinnerComponent, selector: "app-spinner", inputs: ["size"] }, { kind: "component", type: ToolTraceMessageComponent, selector: "tool-trace-message", inputs: ["parentMessage"] }, { kind: "component", type: McpAppResourceComponent, selector: "mcp-app-resource", inputs: ["appInstance"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MessageAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: MessageAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'message-area', imports: [...COMPONENTS$4, ...MODULES$4], template: "<scroll-area\n    [isForceScrollToBottomEnabled]=\"isSuccessFetchedFromThread()\"\n    [shouldExpandSpacer]=\"isLastUserMessage()\"\n    [elementToObserve]=\"messageAreaRef() ?? null\"\n>\n    @if (isLoadingMessagesFromThread()) {\n        <div\n            [ngClass]=\"{\n                'flex flex-1 justify-center items-center p-4': true,\n            }\"\n        >\n            <app-spinner [size]=\"APP_SPINNER_COMPONENT_SIZE.MEDIUM\"></app-spinner>\n        </div>\n    }\n\n    <div\n        #messageArea\n        class=\"message-area\"\n        [ngClass]=\"{\n            'flex flex-1 flex-col gap-8 w-full min-w-[200px] max-w-[920px] mx-auto px-3': true,\n            'md:max-w-[720px]': true,\n        }\"\n    >\n        @for (message of allMessages(); track message.id) {\n            @if (message.role === UI_MESSAGE_ROLES.USER) {\n                <user-message [message]=\"message\"></user-message>\n                <!-- Handles tool messages inside -->\n            }\n\n            @if (message.role === UI_MESSAGE_ROLES.ASSISTANT) {\n                <assistant-message [message]=\"message\"></assistant-message>\n\n                @for (instance of getMcpAppsForResponse(message.responseForUserQueryId); track instance.id) {\n                    <mcp-app-resource [appInstance]=\"instance\"></mcp-app-resource>\n                }\n            }\n\n            @if (showToolTraceForMessage(message.id)) {\n                <tool-trace-message [parentMessage]=\"message.id\"></tool-trace-message>\n            }\n        }\n    </div>\n</scroll-area>" }]
-        }] });
+        }], propDecorators: { messageAreaRef: [{ type: i0.ViewChild, args: ['messageArea', { isSignal: true }] }] } });
 
 class FavoritePromptListComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FavoritePromptListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: FavoritePromptListComponent, isStandalone: true, selector: "favorite-prompt-list", ngImport: i0, template: "<prompt-list [showFavoriteOnly]=\"true\"></prompt-list>\n", dependencies: [{ kind: "component", type: PromptListComponent, selector: "prompt-list", inputs: ["showFavoriteOnly"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: FavoritePromptListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.22", type: FavoritePromptListComponent, isStandalone: true, selector: "favorite-prompt-list", ngImport: i0, template: "<prompt-list [showFavoriteOnly]=\"true\"></prompt-list>\n", dependencies: [{ kind: "component", type: PromptListComponent, selector: "prompt-list", inputs: ["showFavoriteOnly"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FavoritePromptListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: FavoritePromptListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'favorite-prompt-list', imports: [PromptListComponent], template: "<prompt-list [showFavoriteOnly]=\"true\"></prompt-list>\n" }]
         }] });
@@ -6039,15 +6049,15 @@ class ThreadHistoryListItemComponent {
     registerEffects() {
         this._effectService.registerEffect('ThreadHistoryListItem.focusThreadNameInput.on.isEditModeEnabled', () => this.isEditModeEnabled() && this.threadNameInput()?.nativeElement.focus());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThreadHistoryListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ThreadHistoryListItemComponent, isStandalone: true, selector: "thread-history-list-item", inputs: { thread: { classPropertyName: "thread", publicName: "thread", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ThreadHistoryListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: ThreadHistoryListItemComponent, isStandalone: true, selector: "thread-history-list-item", inputs: { thread: { classPropertyName: "thread", publicName: "thread", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
             {
                 provide: ComponentEffectManagerService,
                 useFactory: () => new ComponentEffectManagerService('ThreadHistoryListItemComponent'),
             },
         ], viewQueries: [{ propertyName: "threadNameInput", first: true, predicate: ["threadNameInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@let isCurrentlyActive = activeThreadId() === thread().id;\n@let isTryingToDeleteThread = thread().state === THREAD_STATE.DELETING;\n@let isTryingToRenameThread = thread().state === THREAD_STATE.RENAMING;\n@let isThreadActionPending =\n    isThreadStreaming() || isTryingToDeleteThread || isTryingToRenameThread;\n@let hasNotification = hasCompletionNotification();\n@let showNotificationBadge = hasNotification && !isCurrentlyActive;\n\n<div\n    class=\"flex flex-1 justify-start gap-2 px-4 h-8 rounded-md hover:bg-thread-list-item-hover-background group\"\n    tabindex=\"0\"\n    [ngClass]=\"{\n        'bg-thread-list-item-hover-background': isCurrentlyActive,\n    }\"\n    (keyup.enter)=\"handleThreadSelection()\"\n    (click)=\"handleThreadSelection()\"\n>\n    <div class=\"flex items-center gap-2 cursor-pointer p-2 flex-1 min-w-0\">\n        @if (!isEditModeEnabled()) {\n            <div\n                class=\"flex items-center text-xs text-text-default flex-1 min-w-0 overflow-hidden\"\n                [ngClass]=\"{\n                    'text-text-states-active': isCurrentlyActive,\n                }\"\n            >\n                @if (showNotificationBadge) {\n                    <span\n                        class=\"w-2 h-2 rounded-full bg-orange-500 mr-2 flex-shrink-0\"\n                        title=\"New response available\"\n                    ></span>\n                }\n\n                <span class=\"truncate block\" [attr.title]=\"thread().title\">\n                    {{ thread().title }}\n                </span>\n\n                @if (isThreadActionPending) {\n                    <app-spinner\n                        class=\"pl-2 flex-shrink-0\"\n                        tabindex=\"-1\"\n                        [size]=\"APP_SPINNER_COMPONENT_SIZE.SMALL\"\n                    ></app-spinner>\n                }\n            </div>\n        }\n\n        @if (isEditModeEnabled()) {\n            <input\n                #threadNameInput\n                class=\"flex-1 px-2 border border-proto-border-default rounded text-proto-text-default\"\n                [value]=\"thread().title\"\n                (blur)=\"handleEditModeDisable(); onRenameThread(threadNameInput.value)\"\n                (keydown.enter)=\"handleEditModeDisable(); onRenameThread(threadNameInput.value)\"\n                (keydown.escape)=\"handleEditModeDisable(); $event.stopPropagation()\"\n            />\n        }\n\n        <!-- Thread Action Buttons -->\n        <div\n            class=\"hidden group-hover:flex gap-2 ml-auto\"\n            [ngClass]=\"{ flex: isCurrentlyActive, hidden: !isCurrentlyActive }\"\n        >\n            <app-icon\n                [variant]=\"APP_ICON_VARIANTS.EDIT\"\n                [tabIndex]=\"isCurrentlyActive ? 0 : -1\"\n                [size]=\"APP_ICON_SIZES.S\"\n                [isDisabled]=\"isThreadActionPending\"\n                (onClick)=\"handleEditModeEnable()\"\n            />\n            <app-icon\n                [variant]=\"APP_ICON_VARIANTS.DELETE\"\n                [tabIndex]=\"isCurrentlyActive ? 0 : -1\"\n                [size]=\"APP_ICON_SIZES.S\"\n                [isDisabled]=\"isCurrentlyActive || isThreadActionPending\"\n                (onClick)=\"onDeleteThread(thread()); $event.stopPropagation()\"\n            />\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSpinnerComponent, selector: "app-spinner", inputs: ["size"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThreadHistoryListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ThreadHistoryListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'thread-history-list-item', imports: [...MODULES$3, ...COMPONENTS$3], providers: [
                         {
@@ -6055,17 +6065,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                             useFactory: () => new ComponentEffectManagerService('ThreadHistoryListItemComponent'),
                         },
                     ], template: "@let isCurrentlyActive = activeThreadId() === thread().id;\n@let isTryingToDeleteThread = thread().state === THREAD_STATE.DELETING;\n@let isTryingToRenameThread = thread().state === THREAD_STATE.RENAMING;\n@let isThreadActionPending =\n    isThreadStreaming() || isTryingToDeleteThread || isTryingToRenameThread;\n@let hasNotification = hasCompletionNotification();\n@let showNotificationBadge = hasNotification && !isCurrentlyActive;\n\n<div\n    class=\"flex flex-1 justify-start gap-2 px-4 h-8 rounded-md hover:bg-thread-list-item-hover-background group\"\n    tabindex=\"0\"\n    [ngClass]=\"{\n        'bg-thread-list-item-hover-background': isCurrentlyActive,\n    }\"\n    (keyup.enter)=\"handleThreadSelection()\"\n    (click)=\"handleThreadSelection()\"\n>\n    <div class=\"flex items-center gap-2 cursor-pointer p-2 flex-1 min-w-0\">\n        @if (!isEditModeEnabled()) {\n            <div\n                class=\"flex items-center text-xs text-text-default flex-1 min-w-0 overflow-hidden\"\n                [ngClass]=\"{\n                    'text-text-states-active': isCurrentlyActive,\n                }\"\n            >\n                @if (showNotificationBadge) {\n                    <span\n                        class=\"w-2 h-2 rounded-full bg-orange-500 mr-2 flex-shrink-0\"\n                        title=\"New response available\"\n                    ></span>\n                }\n\n                <span class=\"truncate block\" [attr.title]=\"thread().title\">\n                    {{ thread().title }}\n                </span>\n\n                @if (isThreadActionPending) {\n                    <app-spinner\n                        class=\"pl-2 flex-shrink-0\"\n                        tabindex=\"-1\"\n                        [size]=\"APP_SPINNER_COMPONENT_SIZE.SMALL\"\n                    ></app-spinner>\n                }\n            </div>\n        }\n\n        @if (isEditModeEnabled()) {\n            <input\n                #threadNameInput\n                class=\"flex-1 px-2 border border-proto-border-default rounded text-proto-text-default\"\n                [value]=\"thread().title\"\n                (blur)=\"handleEditModeDisable(); onRenameThread(threadNameInput.value)\"\n                (keydown.enter)=\"handleEditModeDisable(); onRenameThread(threadNameInput.value)\"\n                (keydown.escape)=\"handleEditModeDisable(); $event.stopPropagation()\"\n            />\n        }\n\n        <!-- Thread Action Buttons -->\n        <div\n            class=\"hidden group-hover:flex gap-2 ml-auto\"\n            [ngClass]=\"{ flex: isCurrentlyActive, hidden: !isCurrentlyActive }\"\n        >\n            <app-icon\n                [variant]=\"APP_ICON_VARIANTS.EDIT\"\n                [tabIndex]=\"isCurrentlyActive ? 0 : -1\"\n                [size]=\"APP_ICON_SIZES.S\"\n                [isDisabled]=\"isThreadActionPending\"\n                (onClick)=\"handleEditModeEnable()\"\n            />\n            <app-icon\n                [variant]=\"APP_ICON_VARIANTS.DELETE\"\n                [tabIndex]=\"isCurrentlyActive ? 0 : -1\"\n                [size]=\"APP_ICON_SIZES.S\"\n                [isDisabled]=\"isCurrentlyActive || isThreadActionPending\"\n                (onClick)=\"onDeleteThread(thread()); $event.stopPropagation()\"\n            />\n        </div>\n    </div>\n</div>" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { thread: [{ type: i0.Input, args: [{ isSignal: true, alias: "thread", required: true }] }], threadNameInput: [{ type: i0.ViewChild, args: ['threadNameInput', { isSignal: true }] }] } });
 
 class ThreadHistoryListItemDividerComponent {
     dividerLabel = input('', ...(ngDevMode ? [{ debugName: "dividerLabel" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThreadHistoryListItemDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: ThreadHistoryListItemDividerComponent, isStandalone: true, selector: "thread-history-list-item-divider", inputs: { dividerLabel: { classPropertyName: "dividerLabel", publicName: "dividerLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n    class=\"thread-history-list-item-divider\"\n    [ngClass]=\"{\n        'text-xs text-proto-text-disabled cursor-default': true,\n    }\"\n    >{{ dividerLabel() }}</span\n>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ThreadHistoryListItemDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.22", type: ThreadHistoryListItemDividerComponent, isStandalone: true, selector: "thread-history-list-item-divider", inputs: { dividerLabel: { classPropertyName: "dividerLabel", publicName: "dividerLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n    class=\"thread-history-list-item-divider\"\n    [ngClass]=\"{\n        'text-xs text-proto-text-disabled cursor-default': true,\n    }\"\n    >{{ dividerLabel() }}</span\n>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThreadHistoryListItemDividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ThreadHistoryListItemDividerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'thread-history-list-item-divider', imports: [CommonModule], template: "<span\n    class=\"thread-history-list-item-divider\"\n    [ngClass]=\"{\n        'text-xs text-proto-text-disabled cursor-default': true,\n    }\"\n    >{{ dividerLabel() }}</span\n>\n" }]
-        }] });
+        }], propDecorators: { dividerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerLabel", required: false }] }] } });
 
 const MODULES$2 = [CommonModule];
 const COMPONENTS$2 = [
@@ -6152,15 +6162,15 @@ class ThreadHistoryListComponent {
             this._threadFacade.dispatchFetchThreads(SELECTED_AGENT);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThreadHistoryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ThreadHistoryListComponent, isStandalone: true, selector: "thread-history-list", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ThreadHistoryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: ThreadHistoryListComponent, isStandalone: true, selector: "thread-history-list", providers: [
             {
                 provide: ComponentEffectManagerService,
                 useFactory: () => new ComponentEffectManagerService('ThreadHistoryListComponent'),
             },
         ], ngImport: i0, template: "@let isLoading = isFetchingThreads();\n@let hasNoThreads = !isLoading && threadsWithDivider().length === 0;\n@let hasThreads = !isLoading && threadsWithDivider().length > 0;\n\n@if (isLoading) {\n    <app-spinner\n        [ngClass]=\"{\n            'flex flex-1 justify-center items-center': true,\n        }\"\n        [size]=\"APP_SPINNER_COMPONENT_SIZE.MEDIUM\"></app-spinner>\n}\n\n@if (hasNoThreads) {\n    <p\n        [ngClass]=\"{\n            'flex flex-1 justify-center items-center text-proto-text-default': true,\n        }\"\n    >\n        {{ UI_STRINGS.NO_THREADS }}\n    </p>\n}\n\n@if (hasThreads) {\n    @for (threadWithDivider of threadsWithDivider(); track threadWithDivider.thread.id) {\n        @if (threadWithDivider.showDivider) {\n            <thread-history-list-item-divider\n                [ngClass]=\"{\n                    'p-2 pb-0': true,\n                }\"\n                [dividerLabel]=\"threadWithDivider.divider\"\n            ></thread-history-list-item-divider>\n        }\n\n        <thread-history-list-item [thread]=\"threadWithDivider.thread\"></thread-history-list-item>\n    }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThreadHistoryListItemComponent, selector: "thread-history-list-item", inputs: ["thread"] }, { kind: "component", type: ThreadHistoryListItemDividerComponent, selector: "thread-history-list-item-divider", inputs: ["dividerLabel"] }, { kind: "component", type: AppSpinnerComponent, selector: "app-spinner", inputs: ["size"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThreadHistoryListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ThreadHistoryListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'thread-history-list', imports: [...MODULES$2, ...COMPONENTS$2], providers: [
                         {
@@ -6191,10 +6201,10 @@ class ThreadHistoryComponent {
     hideThreadHistory() {
         this._overlayService.hideThreadHistory();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThreadHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ThreadHistoryComponent, isStandalone: true, selector: "thread-history", ngImport: i0, template: "<div\n    class=\"absolute left-0 top-0 md:static md:left-auto md:top-auto flex flex-col w-full h-full bg-app-background-secondary z-10 md:w-[368px] md:min-w-[368px] md:max-w-[368px] flex-shrink-0\"\n>\n    <!-- Thread History Header -->\n    <div class=\"flex items-center gap-4 px-4 py-2\">\n        <!-- Thread Header Title Section -->\n        <app-icon [variant]=\"APP_ICON_VARIANTS.THREAD_HISTORY\" (click)=\"hideThreadHistory()\" />\n\n        <!-- IO.Assist Logo -->\n        @if (isDarkMode()) {\n            <svg\n                width=\"68\"\n                height=\"14\"\n                viewBox=\"0 0 68 14\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n            >\n                <path\n                    d=\"M0.220798 3.28877H1.38651V13.2145H0.220798V3.28877ZM0.255084 1.38592C0.106512 1.22592 0.0322266 1.04306 0.0322266 0.837346C0.0322266 0.631632 0.106512 0.454489 0.255084 0.305918C0.415084 0.145918 0.597941 0.065918 0.803655 0.065918C1.00937 0.065918 1.18651 0.145918 1.33508 0.305918C1.49508 0.454489 1.57508 0.631632 1.57508 0.837346C1.57508 1.04306 1.49508 1.22592 1.33508 1.38592C1.18651 1.53449 1.00937 1.60877 0.803655 1.60877C0.597941 1.60877 0.415084 1.53449 0.255084 1.38592Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M8.38897 12.3745C9.5204 12.3745 10.4804 11.9745 11.269 11.1745C12.069 10.3631 12.469 9.38592 12.469 8.24306C12.469 7.11163 12.069 6.14592 11.269 5.34592C10.4804 4.53449 9.5204 4.12877 8.38897 4.12877C7.26897 4.12877 6.30897 4.53449 5.50897 5.34592C4.70897 6.14592 4.30897 7.11163 4.30897 8.24306C4.30897 9.38592 4.70897 10.3631 5.50897 11.1745C6.30897 11.9745 7.26897 12.3745 8.38897 12.3745ZM8.38897 13.5059C6.93754 13.5059 5.69182 12.9916 4.65182 11.9631C3.62325 10.9345 3.10897 9.69449 3.10897 8.24306C3.10897 6.79163 3.62325 5.55735 4.65182 4.5402C5.69182 3.51163 6.93754 2.99735 8.38897 2.99735C9.85182 2.99735 11.0975 3.51163 12.1261 4.5402C13.1547 5.55735 13.669 6.79163 13.669 8.24306C13.669 9.69449 13.1547 10.9345 12.1261 11.9631C11.0975 12.9916 9.85182 13.5059 8.38897 13.5059Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M16.4192 13.4039C16.072 13.4039 15.78 13.2855 15.5433 13.0488C15.3066 12.812 15.1882 12.528 15.1882 12.1965C15.1882 11.8651 15.3066 11.581 15.5433 11.3443C15.78 11.1076 16.072 10.9892 16.4192 10.9892C16.7349 10.9892 17.0111 11.1076 17.2478 11.3443C17.4845 11.581 17.6029 11.8651 17.6029 12.1965C17.6029 12.528 17.4845 12.812 17.2478 13.0488C17.0111 13.2855 16.7349 13.4039 16.4192 13.4039Z\"\n                    fill=\"#F25F1F\"\n                />\n                <path\n                    d=\"M22.7104 9.13449H28.1276L25.4361 2.08877H25.4018L22.7104 9.13449ZM30.9733 13.2145H29.7047L28.5733 10.2831H22.2476L21.1161 13.2145H19.8647L24.8361 0.357346H26.0018L30.9733 13.2145Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M39.5573 5.84306H38.3744C38.3744 5.35163 38.1459 4.94592 37.6887 4.62592C37.243 4.29449 36.6487 4.12877 35.9059 4.12877C35.1401 4.12877 34.5401 4.26592 34.1059 4.5402C33.6716 4.80306 33.4544 5.15735 33.4544 5.60306C33.4544 6.11735 33.6144 6.51735 33.9344 6.80306C34.2544 7.07735 34.6544 7.24878 35.1344 7.31735C35.6144 7.38592 36.1287 7.47163 36.6773 7.57449C37.2373 7.66592 37.7573 7.7802 38.2373 7.91735C38.7173 8.05449 39.1173 8.3402 39.4373 8.77449C39.7573 9.19735 39.9173 9.76877 39.9173 10.4888C39.9173 11.4373 39.5573 12.1802 38.8373 12.7173C38.1287 13.2431 37.1516 13.5059 35.9059 13.5059C34.7059 13.5059 33.7402 13.2031 33.0087 12.5973C32.2773 11.9802 31.9116 11.1916 31.9116 10.2316H33.0944C33.0944 10.8602 33.3459 11.3745 33.8487 11.7745C34.3516 12.1745 35.0373 12.3745 35.9059 12.3745C36.7973 12.3745 37.4887 12.2088 37.9801 11.8773C38.4716 11.5345 38.7173 11.0545 38.7173 10.4373C38.7173 10.0031 38.5973 9.6602 38.3573 9.40877C38.1173 9.14592 37.8087 8.96306 37.4316 8.8602C37.0544 8.75735 36.6373 8.67735 36.1801 8.6202C35.723 8.56306 35.2602 8.49449 34.7916 8.41449C34.3344 8.32306 33.9173 8.19163 33.5401 8.0202C33.163 7.83735 32.8544 7.55163 32.6144 7.16306C32.3744 6.76306 32.2544 6.25449 32.2544 5.63735C32.2544 4.7802 32.5973 4.12877 33.283 3.68306C33.9802 3.22592 34.8544 2.99735 35.9059 2.99735C36.9916 2.99735 37.8716 3.26592 38.5459 3.80306C39.2201 4.32877 39.5573 5.00877 39.5573 5.84306Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M48.9323 5.84306H47.7494C47.7494 5.35163 47.5209 4.94592 47.0637 4.62592C46.618 4.29449 46.0237 4.12877 45.2809 4.12877C44.5151 4.12877 43.9151 4.26592 43.4809 4.5402C43.0466 4.80306 42.8294 5.15735 42.8294 5.60306C42.8294 6.11735 42.9894 6.51735 43.3094 6.80306C43.6294 7.07735 44.0294 7.24878 44.5094 7.31735C44.9894 7.38592 45.5037 7.47163 46.0523 7.57449C46.6123 7.66592 47.1323 7.7802 47.6123 7.91735C48.0923 8.05449 48.4923 8.3402 48.8123 8.77449C49.1323 9.19735 49.2923 9.76877 49.2923 10.4888C49.2923 11.4373 48.9323 12.1802 48.2123 12.7173C47.5037 13.2431 46.5266 13.5059 45.2809 13.5059C44.0809 13.5059 43.1151 13.2031 42.3837 12.5973C41.6523 11.9802 41.2866 11.1916 41.2866 10.2316H42.4694C42.4694 10.8602 42.7209 11.3745 43.2237 11.7745C43.7266 12.1745 44.4123 12.3745 45.2809 12.3745C46.1723 12.3745 46.8637 12.2088 47.3551 11.8773C47.8466 11.5345 48.0923 11.0545 48.0923 10.4373C48.0923 10.0031 47.9723 9.6602 47.7323 9.40877C47.4923 9.14592 47.1837 8.96306 46.8066 8.8602C46.4294 8.75735 46.0123 8.67735 45.5551 8.6202C45.098 8.56306 44.6352 8.49449 44.1666 8.41449C43.7094 8.32306 43.2923 8.19163 42.9151 8.0202C42.538 7.83735 42.2294 7.55163 41.9894 7.16306C41.7494 6.76306 41.6294 6.25449 41.6294 5.63735C41.6294 4.7802 41.9723 4.12877 42.658 3.68306C43.3551 3.22592 44.2294 2.99735 45.2809 2.99735C46.3666 2.99735 47.2466 3.26592 47.9209 3.80306C48.5951 4.32877 48.9323 5.00877 48.9323 5.84306Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M51.0044 3.28877H52.1701V13.2145H51.0044V3.28877ZM51.0387 1.38592C50.8901 1.22592 50.8159 1.04306 50.8159 0.837346C50.8159 0.631632 50.8901 0.454489 51.0387 0.305918C51.1987 0.145918 51.3816 0.065918 51.5873 0.065918C51.793 0.065918 51.9701 0.145918 52.1187 0.305918C52.2787 0.454489 52.3587 0.631632 52.3587 0.837346C52.3587 1.04306 52.2787 1.22592 52.1187 1.38592C51.9701 1.53449 51.793 1.60877 51.5873 1.60877C51.3816 1.60877 51.1987 1.53449 51.0387 1.38592Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M61.5383 5.84306H60.3555C60.3555 5.35163 60.1269 4.94592 59.6697 4.62592C59.224 4.29449 58.6297 4.12877 57.8869 4.12877C57.1212 4.12877 56.5212 4.26592 56.0869 4.5402C55.6526 4.80306 55.4355 5.15735 55.4355 5.60306C55.4355 6.11735 55.5955 6.51735 55.9155 6.80306C56.2355 7.07735 56.6355 7.24878 57.1155 7.31735C57.5955 7.38592 58.1097 7.47163 58.6583 7.57449C59.2183 7.66592 59.7383 7.7802 60.2183 7.91735C60.6983 8.05449 61.0983 8.3402 61.4183 8.77449C61.7383 9.19735 61.8983 9.76877 61.8983 10.4888C61.8983 11.4373 61.5383 12.1802 60.8183 12.7173C60.1097 13.2431 59.1326 13.5059 57.8869 13.5059C56.6869 13.5059 55.7212 13.2031 54.9897 12.5973C54.2583 11.9802 53.8926 11.1916 53.8926 10.2316H55.0755C55.0755 10.8602 55.3269 11.3745 55.8297 11.7745C56.3326 12.1745 57.0183 12.3745 57.8869 12.3745C58.7783 12.3745 59.4697 12.2088 59.9612 11.8773C60.4526 11.5345 60.6983 11.0545 60.6983 10.4373C60.6983 10.0031 60.5783 9.6602 60.3383 9.40877C60.0983 9.14592 59.7897 8.96306 59.4126 8.8602C59.0355 8.75735 58.6183 8.67735 58.1612 8.6202C57.704 8.56306 57.2412 8.49449 56.7726 8.41449C56.3155 8.32306 55.8983 8.19163 55.5212 8.0202C55.144 7.83735 54.8355 7.55163 54.5955 7.16306C54.3555 6.76306 54.2355 6.25449 54.2355 5.63735C54.2355 4.7802 54.5783 4.12877 55.264 3.68306C55.9612 3.22592 56.8355 2.99735 57.8869 2.99735C58.9726 2.99735 59.8526 3.26592 60.5269 3.80306C61.2012 4.32877 61.5383 5.00877 61.5383 5.84306Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M65.2562 4.45449V10.8831C65.2562 11.2716 65.3647 11.5631 65.5819 11.7573C65.799 11.9516 66.079 12.0488 66.4219 12.0488H67.3133V13.2145H66.4219C65.759 13.2145 65.2047 13.0031 64.759 12.5802C64.3133 12.1573 64.0905 11.5916 64.0905 10.8831V4.45449H62.9247V3.28877H64.0905V1.04306H65.2562V3.28877H67.3133V4.45449H65.2562Z\"\n                    fill=\"white\"\n                />\n            </svg>\n        }\n\n        @if (!isDarkMode()) {\n            <svg\n                width=\"68\"\n                height=\"14\"\n                viewBox=\"0 0 121 24\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n            >\n                <path\n                    d=\"M0.336735 5.7551H2.41837V23.4796H0.336735V5.7551ZM0.397959 2.35714C0.132653 2.07143 0 1.7449 0 1.37755C0 1.0102 0.132653 0.693878 0.397959 0.428571C0.683674 0.142857 1.0102 0 1.37755 0C1.7449 0 2.06122 0.142857 2.32653 0.428571C2.61225 0.693878 2.7551 1.0102 2.7551 1.37755C2.7551 1.7449 2.61225 2.07143 2.32653 2.35714C2.06122 2.62245 1.7449 2.7551 1.37755 2.7551C1.0102 2.7551 0.683674 2.62245 0.397959 2.35714Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M14.9228 21.9796C16.9432 21.9796 18.6574 21.2653 20.0656 19.8367C21.4942 18.3878 22.2085 16.6429 22.2085 14.602C22.2085 12.5816 21.4942 10.8571 20.0656 9.42857C18.6574 7.97959 16.9432 7.2551 14.9228 7.2551C12.9228 7.2551 11.2085 7.97959 9.77989 9.42857C8.35132 10.8571 7.63704 12.5816 7.63704 14.602C7.63704 16.6429 8.35132 18.3878 9.77989 19.8367C11.2085 21.2653 12.9228 21.9796 14.9228 21.9796ZM14.9228 24C12.3309 24 10.1064 23.0816 8.24928 21.2449C6.41255 19.4082 5.49418 17.1939 5.49418 14.602C5.49418 12.0102 6.41255 9.80612 8.24928 7.98979C10.1064 6.15306 12.3309 5.23469 14.9228 5.23469C17.535 5.23469 19.7595 6.15306 21.5962 7.98979C23.433 9.80612 24.3513 12.0102 24.3513 14.602C24.3513 17.1939 23.433 19.4082 21.5962 21.2449C19.7595 23.0816 17.535 24 14.9228 24Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M29.2625 23.8178C28.6425 23.8178 28.1211 23.6064 27.6984 23.1837C27.2756 22.7609 27.0643 22.2536 27.0643 21.6618C27.0643 21.07 27.2756 20.5627 27.6984 20.1399C28.1211 19.7172 28.6425 19.5058 29.2625 19.5058C29.8262 19.5058 30.3194 19.7172 30.7421 20.1399C31.1648 20.5627 31.3762 21.07 31.3762 21.6618C31.3762 22.2536 31.1648 22.7609 30.7421 23.1837C30.3194 23.6064 29.8262 23.8178 29.2625 23.8178Z\"\n                    fill=\"#F25F1F\"\n                />\n                <path\n                    d=\"M40.4968 16.1939H50.1702L45.3641 3.61224H45.3029L40.4968 16.1939ZM55.2519 23.4796H52.9866L50.9662 18.2449H39.6702L37.6498 23.4796H35.4151L44.2927 0.520407H46.3743L55.2519 23.4796Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M70.5805 10.3163H68.4682C68.4682 9.43878 68.0601 8.71428 67.2437 8.14286C66.4478 7.55102 65.3866 7.2551 64.0601 7.2551C62.6927 7.2551 61.6213 7.5 60.8458 7.98979C60.0703 8.45918 59.6825 9.09184 59.6825 9.88775C59.6825 10.8061 59.9682 11.5204 60.5397 12.0306C61.1111 12.5204 61.8254 12.8265 62.6825 12.949C63.5397 13.0714 64.458 13.2245 65.4376 13.4082C66.4376 13.5714 67.3662 13.7755 68.2233 14.0204C69.0805 14.2653 69.7948 14.7755 70.3662 15.551C70.9376 16.3061 71.2233 17.3265 71.2233 18.6122C71.2233 20.3061 70.5805 21.6327 69.2948 22.5918C68.0295 23.5306 66.2846 24 64.0601 24C61.9172 24 60.1927 23.4592 58.8866 22.3776C57.5805 21.2755 56.9274 19.8673 56.9274 18.1531H59.0397C59.0397 19.2755 59.4886 20.1939 60.3866 20.9082C61.2846 21.6224 62.509 21.9796 64.0601 21.9796C65.6519 21.9796 66.8866 21.6837 67.7642 21.0918C68.6417 20.4796 69.0805 19.6224 69.0805 18.5204C69.0805 17.7449 68.8662 17.1327 68.4376 16.6837C68.009 16.2143 67.458 15.8878 66.7846 15.7041C66.1111 15.5204 65.3662 15.3776 64.5499 15.2755C63.7335 15.1735 62.907 15.051 62.0703 14.9082C61.254 14.7449 60.5091 14.5102 59.8356 14.2041C59.1621 13.8776 58.6111 13.3673 58.1825 12.6735C57.754 11.9592 57.5397 11.051 57.5397 9.94898C57.5397 8.41837 58.1519 7.2551 59.3764 6.45918C60.6213 5.64286 62.1825 5.23469 64.0601 5.23469C65.9988 5.23469 67.5703 5.71429 68.7744 6.67347C69.9784 7.61224 70.5805 8.82653 70.5805 10.3163Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M87.3216 10.3163H85.2093C85.2093 9.43878 84.8011 8.71428 83.9848 8.14286C83.1889 7.55102 82.1277 7.2551 80.8011 7.2551C79.4338 7.2551 78.3624 7.5 77.5869 7.98979C76.8113 8.45918 76.4236 9.09184 76.4236 9.88775C76.4236 10.8061 76.7093 11.5204 77.2807 12.0306C77.8522 12.5204 78.5664 12.8265 79.4236 12.949C80.2807 13.0714 81.1991 13.2245 82.1787 13.4082C83.1787 13.5714 84.1073 13.7755 84.9644 14.0204C85.8216 14.2653 86.5358 14.7755 87.1073 15.551C87.6787 16.3061 87.9644 17.3265 87.9644 18.6122C87.9644 20.3061 87.3216 21.6327 86.0358 22.5918C84.7705 23.5306 83.0256 24 80.8011 24C78.6583 24 76.9338 23.4592 75.6277 22.3776C74.3215 21.2755 73.6685 19.8673 73.6685 18.1531H75.7807C75.7807 19.2755 76.2297 20.1939 77.1277 20.9082C78.0256 21.6224 79.2501 21.9796 80.8011 21.9796C82.393 21.9796 83.6277 21.6837 84.5052 21.0918C85.3828 20.4796 85.8215 19.6224 85.8215 18.5204C85.8215 17.7449 85.6073 17.1327 85.1787 16.6837C84.7501 16.2143 84.1991 15.8878 83.5256 15.7041C82.8522 15.5204 82.1073 15.3776 81.2909 15.2755C80.4746 15.1735 79.6481 15.051 78.8113 14.9082C77.995 14.7449 77.2501 14.5102 76.5767 14.2041C75.9032 13.8776 75.3522 13.3673 74.9236 12.6735C74.495 11.9592 74.2807 11.051 74.2807 9.94898C74.2807 8.41837 74.893 7.2551 76.1175 6.45918C77.3624 5.64286 78.9236 5.23469 80.8011 5.23469C82.7399 5.23469 84.3113 5.71429 85.5154 6.67347C86.7195 7.61224 87.3216 8.82653 87.3216 10.3163Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M91.0218 5.7551H93.1034V23.4796H91.0218V5.7551ZM91.083 2.35714C90.8177 2.07143 90.6851 1.7449 90.6851 1.37755C90.6851 1.0102 90.8177 0.693878 91.083 0.428571C91.3687 0.142857 91.6953 0 92.0626 0C92.43 0 92.7463 0.142857 93.0116 0.428571C93.2973 0.693878 93.4402 1.0102 93.4402 1.37755C93.4402 1.7449 93.2973 2.07143 93.0116 2.35714C92.7463 2.62245 92.43 2.7551 92.0626 2.7551C91.6953 2.7551 91.3687 2.62245 91.083 2.35714Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M109.832 10.3163H107.72C107.72 9.43878 107.312 8.71428 106.496 8.14286C105.7 7.55102 104.638 7.2551 103.312 7.2551C101.945 7.2551 100.873 7.5 100.098 7.98979C99.3221 8.45918 98.9343 9.09184 98.9343 9.88775C98.9343 10.8061 99.2201 11.5204 99.7915 12.0306C100.363 12.5204 101.077 12.8265 101.934 12.949C102.791 13.0714 103.71 13.2245 104.689 13.4082C105.689 13.5714 106.618 13.7755 107.475 14.0204C108.332 14.2653 109.047 14.7755 109.618 15.551C110.189 16.3061 110.475 17.3265 110.475 18.6122C110.475 20.3061 109.832 21.6327 108.547 22.5918C107.281 23.5306 105.536 24 103.312 24C101.169 24 99.4446 23.4592 98.1384 22.3776C96.8323 21.2755 96.1792 19.8673 96.1792 18.1531H98.2915C98.2915 19.2755 98.7405 20.1939 99.6384 20.9082C100.536 21.6224 101.761 21.9796 103.312 21.9796C104.904 21.9796 106.138 21.6837 107.016 21.0918C107.894 20.4796 108.332 19.6224 108.332 18.5204C108.332 17.7449 108.118 17.1327 107.689 16.6837C107.261 16.2143 106.71 15.8878 106.036 15.7041C105.363 15.5204 104.618 15.3776 103.802 15.2755C102.985 15.1735 102.159 15.051 101.322 14.9082C100.506 14.7449 99.7609 14.5102 99.0874 14.2041C98.4139 13.8776 97.8629 13.3673 97.4343 12.6735C97.0058 11.9592 96.7915 11.051 96.7915 9.94898C96.7915 8.41837 97.4037 7.2551 98.6282 6.45918C99.8731 5.64286 101.434 5.23469 103.312 5.23469C105.251 5.23469 106.822 5.71429 108.026 6.67347C109.23 7.61224 109.832 8.82653 109.832 10.3163Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M116.471 7.83673V19.3163C116.471 20.0102 116.665 20.5306 117.053 20.8776C117.441 21.2245 117.941 21.398 118.553 21.398H120.145V23.4796H118.553C117.369 23.4796 116.38 23.102 115.584 22.3469C114.788 21.5918 114.39 20.5816 114.39 19.3163V7.83673H112.308V5.7551H114.39V1.7449H116.471V5.7551H120.145V7.83673H116.471Z\"\n                    fill=\"#26272A\"\n                />\n            </svg>\n        }\n    </div>\n\n    <!-- Thread History List Container -->\n    <thread-history-list class=\"flex flex-1 flex-col p-2 overflow-y-scroll custom-scrollbar custom-scrollbar-no-gutter\"></thread-history-list>\n\n    <!-- User Profile Section -->\n    @if (hasUsername()) {\n        <div\n            class=\"thread-history__user-profile\"\n            [ngClass]=\"{\n                'flex items-center gap-3 px-4 py-3 mt-auto border-t border-border-default': true,\n            }\"\n        >\n            <!-- User Avatar -->\n            <div\n                class=\"thread-history__user-avatar\"\n                [ngClass]=\"{\n                    'flex items-center justify-center w-6 h-6 rounded-full bg-app-accent-color-1 text-white text-neutrals-0 font-weight-600 text-[12px] flex-shrink-0': true,\n                }\"\n            >\n                {{ userInitial() }}\n            </div>\n\n            <!-- User Info -->\n            <div\n                class=\"thread-history__user-info\"\n                [ngClass]=\"{\n                    'flex flex-col flex-1 min-w-0': true,\n                }\"\n            >\n                <span\n                    [ngClass]=\"{\n                        'text-text-default text-[12px] leading-[12px] font-weight-400 truncate': true,\n                    }\"\n                    [attr.title]=\"username()\"\n                >\n                    {{ username() }}\n                </span>\n            </div>\n        </div>\n    }\n\n    <!-- Thread History Footer TODO: Revert and implement once we decide to support chat model picking -->\n    <!-- <div class=\"flex items-center px-4 py-2 border-t border-proto-border-default\">\n        <select\n            class=\"p-2 border border-proto-border-default rounded text-proto-text-default bg-proto-background-light w-full\"\n        >\n            <option value=\"gpt-4\">GPT-4</option>\n            <option value=\"gpt-3.5-turbo\">GPT-3.5 Turbo</option>\n        </select>\n    </div> -->\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThreadHistoryListComponent, selector: "thread-history-list" }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ThreadHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: ThreadHistoryComponent, isStandalone: true, selector: "thread-history", ngImport: i0, template: "<div\n    class=\"absolute left-0 top-0 md:static md:left-auto md:top-auto flex flex-col w-full h-full bg-app-background-secondary z-10 md:w-[368px] md:min-w-[368px] md:max-w-[368px] flex-shrink-0\"\n>\n    <!-- Thread History Header -->\n    <div class=\"flex items-center gap-4 px-4 py-2\">\n        <!-- Thread Header Title Section -->\n        <app-icon [variant]=\"APP_ICON_VARIANTS.THREAD_HISTORY\" (click)=\"hideThreadHistory()\" />\n\n        <!-- IO.Assist Logo -->\n        @if (isDarkMode()) {\n            <svg\n                width=\"68\"\n                height=\"14\"\n                viewBox=\"0 0 68 14\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n            >\n                <path\n                    d=\"M0.220798 3.28877H1.38651V13.2145H0.220798V3.28877ZM0.255084 1.38592C0.106512 1.22592 0.0322266 1.04306 0.0322266 0.837346C0.0322266 0.631632 0.106512 0.454489 0.255084 0.305918C0.415084 0.145918 0.597941 0.065918 0.803655 0.065918C1.00937 0.065918 1.18651 0.145918 1.33508 0.305918C1.49508 0.454489 1.57508 0.631632 1.57508 0.837346C1.57508 1.04306 1.49508 1.22592 1.33508 1.38592C1.18651 1.53449 1.00937 1.60877 0.803655 1.60877C0.597941 1.60877 0.415084 1.53449 0.255084 1.38592Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M8.38897 12.3745C9.5204 12.3745 10.4804 11.9745 11.269 11.1745C12.069 10.3631 12.469 9.38592 12.469 8.24306C12.469 7.11163 12.069 6.14592 11.269 5.34592C10.4804 4.53449 9.5204 4.12877 8.38897 4.12877C7.26897 4.12877 6.30897 4.53449 5.50897 5.34592C4.70897 6.14592 4.30897 7.11163 4.30897 8.24306C4.30897 9.38592 4.70897 10.3631 5.50897 11.1745C6.30897 11.9745 7.26897 12.3745 8.38897 12.3745ZM8.38897 13.5059C6.93754 13.5059 5.69182 12.9916 4.65182 11.9631C3.62325 10.9345 3.10897 9.69449 3.10897 8.24306C3.10897 6.79163 3.62325 5.55735 4.65182 4.5402C5.69182 3.51163 6.93754 2.99735 8.38897 2.99735C9.85182 2.99735 11.0975 3.51163 12.1261 4.5402C13.1547 5.55735 13.669 6.79163 13.669 8.24306C13.669 9.69449 13.1547 10.9345 12.1261 11.9631C11.0975 12.9916 9.85182 13.5059 8.38897 13.5059Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M16.4192 13.4039C16.072 13.4039 15.78 13.2855 15.5433 13.0488C15.3066 12.812 15.1882 12.528 15.1882 12.1965C15.1882 11.8651 15.3066 11.581 15.5433 11.3443C15.78 11.1076 16.072 10.9892 16.4192 10.9892C16.7349 10.9892 17.0111 11.1076 17.2478 11.3443C17.4845 11.581 17.6029 11.8651 17.6029 12.1965C17.6029 12.528 17.4845 12.812 17.2478 13.0488C17.0111 13.2855 16.7349 13.4039 16.4192 13.4039Z\"\n                    fill=\"#F25F1F\"\n                />\n                <path\n                    d=\"M22.7104 9.13449H28.1276L25.4361 2.08877H25.4018L22.7104 9.13449ZM30.9733 13.2145H29.7047L28.5733 10.2831H22.2476L21.1161 13.2145H19.8647L24.8361 0.357346H26.0018L30.9733 13.2145Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M39.5573 5.84306H38.3744C38.3744 5.35163 38.1459 4.94592 37.6887 4.62592C37.243 4.29449 36.6487 4.12877 35.9059 4.12877C35.1401 4.12877 34.5401 4.26592 34.1059 4.5402C33.6716 4.80306 33.4544 5.15735 33.4544 5.60306C33.4544 6.11735 33.6144 6.51735 33.9344 6.80306C34.2544 7.07735 34.6544 7.24878 35.1344 7.31735C35.6144 7.38592 36.1287 7.47163 36.6773 7.57449C37.2373 7.66592 37.7573 7.7802 38.2373 7.91735C38.7173 8.05449 39.1173 8.3402 39.4373 8.77449C39.7573 9.19735 39.9173 9.76877 39.9173 10.4888C39.9173 11.4373 39.5573 12.1802 38.8373 12.7173C38.1287 13.2431 37.1516 13.5059 35.9059 13.5059C34.7059 13.5059 33.7402 13.2031 33.0087 12.5973C32.2773 11.9802 31.9116 11.1916 31.9116 10.2316H33.0944C33.0944 10.8602 33.3459 11.3745 33.8487 11.7745C34.3516 12.1745 35.0373 12.3745 35.9059 12.3745C36.7973 12.3745 37.4887 12.2088 37.9801 11.8773C38.4716 11.5345 38.7173 11.0545 38.7173 10.4373C38.7173 10.0031 38.5973 9.6602 38.3573 9.40877C38.1173 9.14592 37.8087 8.96306 37.4316 8.8602C37.0544 8.75735 36.6373 8.67735 36.1801 8.6202C35.723 8.56306 35.2602 8.49449 34.7916 8.41449C34.3344 8.32306 33.9173 8.19163 33.5401 8.0202C33.163 7.83735 32.8544 7.55163 32.6144 7.16306C32.3744 6.76306 32.2544 6.25449 32.2544 5.63735C32.2544 4.7802 32.5973 4.12877 33.283 3.68306C33.9802 3.22592 34.8544 2.99735 35.9059 2.99735C36.9916 2.99735 37.8716 3.26592 38.5459 3.80306C39.2201 4.32877 39.5573 5.00877 39.5573 5.84306Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M48.9323 5.84306H47.7494C47.7494 5.35163 47.5209 4.94592 47.0637 4.62592C46.618 4.29449 46.0237 4.12877 45.2809 4.12877C44.5151 4.12877 43.9151 4.26592 43.4809 4.5402C43.0466 4.80306 42.8294 5.15735 42.8294 5.60306C42.8294 6.11735 42.9894 6.51735 43.3094 6.80306C43.6294 7.07735 44.0294 7.24878 44.5094 7.31735C44.9894 7.38592 45.5037 7.47163 46.0523 7.57449C46.6123 7.66592 47.1323 7.7802 47.6123 7.91735C48.0923 8.05449 48.4923 8.3402 48.8123 8.77449C49.1323 9.19735 49.2923 9.76877 49.2923 10.4888C49.2923 11.4373 48.9323 12.1802 48.2123 12.7173C47.5037 13.2431 46.5266 13.5059 45.2809 13.5059C44.0809 13.5059 43.1151 13.2031 42.3837 12.5973C41.6523 11.9802 41.2866 11.1916 41.2866 10.2316H42.4694C42.4694 10.8602 42.7209 11.3745 43.2237 11.7745C43.7266 12.1745 44.4123 12.3745 45.2809 12.3745C46.1723 12.3745 46.8637 12.2088 47.3551 11.8773C47.8466 11.5345 48.0923 11.0545 48.0923 10.4373C48.0923 10.0031 47.9723 9.6602 47.7323 9.40877C47.4923 9.14592 47.1837 8.96306 46.8066 8.8602C46.4294 8.75735 46.0123 8.67735 45.5551 8.6202C45.098 8.56306 44.6352 8.49449 44.1666 8.41449C43.7094 8.32306 43.2923 8.19163 42.9151 8.0202C42.538 7.83735 42.2294 7.55163 41.9894 7.16306C41.7494 6.76306 41.6294 6.25449 41.6294 5.63735C41.6294 4.7802 41.9723 4.12877 42.658 3.68306C43.3551 3.22592 44.2294 2.99735 45.2809 2.99735C46.3666 2.99735 47.2466 3.26592 47.9209 3.80306C48.5951 4.32877 48.9323 5.00877 48.9323 5.84306Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M51.0044 3.28877H52.1701V13.2145H51.0044V3.28877ZM51.0387 1.38592C50.8901 1.22592 50.8159 1.04306 50.8159 0.837346C50.8159 0.631632 50.8901 0.454489 51.0387 0.305918C51.1987 0.145918 51.3816 0.065918 51.5873 0.065918C51.793 0.065918 51.9701 0.145918 52.1187 0.305918C52.2787 0.454489 52.3587 0.631632 52.3587 0.837346C52.3587 1.04306 52.2787 1.22592 52.1187 1.38592C51.9701 1.53449 51.793 1.60877 51.5873 1.60877C51.3816 1.60877 51.1987 1.53449 51.0387 1.38592Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M61.5383 5.84306H60.3555C60.3555 5.35163 60.1269 4.94592 59.6697 4.62592C59.224 4.29449 58.6297 4.12877 57.8869 4.12877C57.1212 4.12877 56.5212 4.26592 56.0869 4.5402C55.6526 4.80306 55.4355 5.15735 55.4355 5.60306C55.4355 6.11735 55.5955 6.51735 55.9155 6.80306C56.2355 7.07735 56.6355 7.24878 57.1155 7.31735C57.5955 7.38592 58.1097 7.47163 58.6583 7.57449C59.2183 7.66592 59.7383 7.7802 60.2183 7.91735C60.6983 8.05449 61.0983 8.3402 61.4183 8.77449C61.7383 9.19735 61.8983 9.76877 61.8983 10.4888C61.8983 11.4373 61.5383 12.1802 60.8183 12.7173C60.1097 13.2431 59.1326 13.5059 57.8869 13.5059C56.6869 13.5059 55.7212 13.2031 54.9897 12.5973C54.2583 11.9802 53.8926 11.1916 53.8926 10.2316H55.0755C55.0755 10.8602 55.3269 11.3745 55.8297 11.7745C56.3326 12.1745 57.0183 12.3745 57.8869 12.3745C58.7783 12.3745 59.4697 12.2088 59.9612 11.8773C60.4526 11.5345 60.6983 11.0545 60.6983 10.4373C60.6983 10.0031 60.5783 9.6602 60.3383 9.40877C60.0983 9.14592 59.7897 8.96306 59.4126 8.8602C59.0355 8.75735 58.6183 8.67735 58.1612 8.6202C57.704 8.56306 57.2412 8.49449 56.7726 8.41449C56.3155 8.32306 55.8983 8.19163 55.5212 8.0202C55.144 7.83735 54.8355 7.55163 54.5955 7.16306C54.3555 6.76306 54.2355 6.25449 54.2355 5.63735C54.2355 4.7802 54.5783 4.12877 55.264 3.68306C55.9612 3.22592 56.8355 2.99735 57.8869 2.99735C58.9726 2.99735 59.8526 3.26592 60.5269 3.80306C61.2012 4.32877 61.5383 5.00877 61.5383 5.84306Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M65.2562 4.45449V10.8831C65.2562 11.2716 65.3647 11.5631 65.5819 11.7573C65.799 11.9516 66.079 12.0488 66.4219 12.0488H67.3133V13.2145H66.4219C65.759 13.2145 65.2047 13.0031 64.759 12.5802C64.3133 12.1573 64.0905 11.5916 64.0905 10.8831V4.45449H62.9247V3.28877H64.0905V1.04306H65.2562V3.28877H67.3133V4.45449H65.2562Z\"\n                    fill=\"white\"\n                />\n            </svg>\n        }\n\n        @if (!isDarkMode()) {\n            <svg\n                width=\"68\"\n                height=\"14\"\n                viewBox=\"0 0 121 24\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n            >\n                <path\n                    d=\"M0.336735 5.7551H2.41837V23.4796H0.336735V5.7551ZM0.397959 2.35714C0.132653 2.07143 0 1.7449 0 1.37755C0 1.0102 0.132653 0.693878 0.397959 0.428571C0.683674 0.142857 1.0102 0 1.37755 0C1.7449 0 2.06122 0.142857 2.32653 0.428571C2.61225 0.693878 2.7551 1.0102 2.7551 1.37755C2.7551 1.7449 2.61225 2.07143 2.32653 2.35714C2.06122 2.62245 1.7449 2.7551 1.37755 2.7551C1.0102 2.7551 0.683674 2.62245 0.397959 2.35714Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M14.9228 21.9796C16.9432 21.9796 18.6574 21.2653 20.0656 19.8367C21.4942 18.3878 22.2085 16.6429 22.2085 14.602C22.2085 12.5816 21.4942 10.8571 20.0656 9.42857C18.6574 7.97959 16.9432 7.2551 14.9228 7.2551C12.9228 7.2551 11.2085 7.97959 9.77989 9.42857C8.35132 10.8571 7.63704 12.5816 7.63704 14.602C7.63704 16.6429 8.35132 18.3878 9.77989 19.8367C11.2085 21.2653 12.9228 21.9796 14.9228 21.9796ZM14.9228 24C12.3309 24 10.1064 23.0816 8.24928 21.2449C6.41255 19.4082 5.49418 17.1939 5.49418 14.602C5.49418 12.0102 6.41255 9.80612 8.24928 7.98979C10.1064 6.15306 12.3309 5.23469 14.9228 5.23469C17.535 5.23469 19.7595 6.15306 21.5962 7.98979C23.433 9.80612 24.3513 12.0102 24.3513 14.602C24.3513 17.1939 23.433 19.4082 21.5962 21.2449C19.7595 23.0816 17.535 24 14.9228 24Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M29.2625 23.8178C28.6425 23.8178 28.1211 23.6064 27.6984 23.1837C27.2756 22.7609 27.0643 22.2536 27.0643 21.6618C27.0643 21.07 27.2756 20.5627 27.6984 20.1399C28.1211 19.7172 28.6425 19.5058 29.2625 19.5058C29.8262 19.5058 30.3194 19.7172 30.7421 20.1399C31.1648 20.5627 31.3762 21.07 31.3762 21.6618C31.3762 22.2536 31.1648 22.7609 30.7421 23.1837C30.3194 23.6064 29.8262 23.8178 29.2625 23.8178Z\"\n                    fill=\"#F25F1F\"\n                />\n                <path\n                    d=\"M40.4968 16.1939H50.1702L45.3641 3.61224H45.3029L40.4968 16.1939ZM55.2519 23.4796H52.9866L50.9662 18.2449H39.6702L37.6498 23.4796H35.4151L44.2927 0.520407H46.3743L55.2519 23.4796Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M70.5805 10.3163H68.4682C68.4682 9.43878 68.0601 8.71428 67.2437 8.14286C66.4478 7.55102 65.3866 7.2551 64.0601 7.2551C62.6927 7.2551 61.6213 7.5 60.8458 7.98979C60.0703 8.45918 59.6825 9.09184 59.6825 9.88775C59.6825 10.8061 59.9682 11.5204 60.5397 12.0306C61.1111 12.5204 61.8254 12.8265 62.6825 12.949C63.5397 13.0714 64.458 13.2245 65.4376 13.4082C66.4376 13.5714 67.3662 13.7755 68.2233 14.0204C69.0805 14.2653 69.7948 14.7755 70.3662 15.551C70.9376 16.3061 71.2233 17.3265 71.2233 18.6122C71.2233 20.3061 70.5805 21.6327 69.2948 22.5918C68.0295 23.5306 66.2846 24 64.0601 24C61.9172 24 60.1927 23.4592 58.8866 22.3776C57.5805 21.2755 56.9274 19.8673 56.9274 18.1531H59.0397C59.0397 19.2755 59.4886 20.1939 60.3866 20.9082C61.2846 21.6224 62.509 21.9796 64.0601 21.9796C65.6519 21.9796 66.8866 21.6837 67.7642 21.0918C68.6417 20.4796 69.0805 19.6224 69.0805 18.5204C69.0805 17.7449 68.8662 17.1327 68.4376 16.6837C68.009 16.2143 67.458 15.8878 66.7846 15.7041C66.1111 15.5204 65.3662 15.3776 64.5499 15.2755C63.7335 15.1735 62.907 15.051 62.0703 14.9082C61.254 14.7449 60.5091 14.5102 59.8356 14.2041C59.1621 13.8776 58.6111 13.3673 58.1825 12.6735C57.754 11.9592 57.5397 11.051 57.5397 9.94898C57.5397 8.41837 58.1519 7.2551 59.3764 6.45918C60.6213 5.64286 62.1825 5.23469 64.0601 5.23469C65.9988 5.23469 67.5703 5.71429 68.7744 6.67347C69.9784 7.61224 70.5805 8.82653 70.5805 10.3163Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M87.3216 10.3163H85.2093C85.2093 9.43878 84.8011 8.71428 83.9848 8.14286C83.1889 7.55102 82.1277 7.2551 80.8011 7.2551C79.4338 7.2551 78.3624 7.5 77.5869 7.98979C76.8113 8.45918 76.4236 9.09184 76.4236 9.88775C76.4236 10.8061 76.7093 11.5204 77.2807 12.0306C77.8522 12.5204 78.5664 12.8265 79.4236 12.949C80.2807 13.0714 81.1991 13.2245 82.1787 13.4082C83.1787 13.5714 84.1073 13.7755 84.9644 14.0204C85.8216 14.2653 86.5358 14.7755 87.1073 15.551C87.6787 16.3061 87.9644 17.3265 87.9644 18.6122C87.9644 20.3061 87.3216 21.6327 86.0358 22.5918C84.7705 23.5306 83.0256 24 80.8011 24C78.6583 24 76.9338 23.4592 75.6277 22.3776C74.3215 21.2755 73.6685 19.8673 73.6685 18.1531H75.7807C75.7807 19.2755 76.2297 20.1939 77.1277 20.9082C78.0256 21.6224 79.2501 21.9796 80.8011 21.9796C82.393 21.9796 83.6277 21.6837 84.5052 21.0918C85.3828 20.4796 85.8215 19.6224 85.8215 18.5204C85.8215 17.7449 85.6073 17.1327 85.1787 16.6837C84.7501 16.2143 84.1991 15.8878 83.5256 15.7041C82.8522 15.5204 82.1073 15.3776 81.2909 15.2755C80.4746 15.1735 79.6481 15.051 78.8113 14.9082C77.995 14.7449 77.2501 14.5102 76.5767 14.2041C75.9032 13.8776 75.3522 13.3673 74.9236 12.6735C74.495 11.9592 74.2807 11.051 74.2807 9.94898C74.2807 8.41837 74.893 7.2551 76.1175 6.45918C77.3624 5.64286 78.9236 5.23469 80.8011 5.23469C82.7399 5.23469 84.3113 5.71429 85.5154 6.67347C86.7195 7.61224 87.3216 8.82653 87.3216 10.3163Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M91.0218 5.7551H93.1034V23.4796H91.0218V5.7551ZM91.083 2.35714C90.8177 2.07143 90.6851 1.7449 90.6851 1.37755C90.6851 1.0102 90.8177 0.693878 91.083 0.428571C91.3687 0.142857 91.6953 0 92.0626 0C92.43 0 92.7463 0.142857 93.0116 0.428571C93.2973 0.693878 93.4402 1.0102 93.4402 1.37755C93.4402 1.7449 93.2973 2.07143 93.0116 2.35714C92.7463 2.62245 92.43 2.7551 92.0626 2.7551C91.6953 2.7551 91.3687 2.62245 91.083 2.35714Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M109.832 10.3163H107.72C107.72 9.43878 107.312 8.71428 106.496 8.14286C105.7 7.55102 104.638 7.2551 103.312 7.2551C101.945 7.2551 100.873 7.5 100.098 7.98979C99.3221 8.45918 98.9343 9.09184 98.9343 9.88775C98.9343 10.8061 99.2201 11.5204 99.7915 12.0306C100.363 12.5204 101.077 12.8265 101.934 12.949C102.791 13.0714 103.71 13.2245 104.689 13.4082C105.689 13.5714 106.618 13.7755 107.475 14.0204C108.332 14.2653 109.047 14.7755 109.618 15.551C110.189 16.3061 110.475 17.3265 110.475 18.6122C110.475 20.3061 109.832 21.6327 108.547 22.5918C107.281 23.5306 105.536 24 103.312 24C101.169 24 99.4446 23.4592 98.1384 22.3776C96.8323 21.2755 96.1792 19.8673 96.1792 18.1531H98.2915C98.2915 19.2755 98.7405 20.1939 99.6384 20.9082C100.536 21.6224 101.761 21.9796 103.312 21.9796C104.904 21.9796 106.138 21.6837 107.016 21.0918C107.894 20.4796 108.332 19.6224 108.332 18.5204C108.332 17.7449 108.118 17.1327 107.689 16.6837C107.261 16.2143 106.71 15.8878 106.036 15.7041C105.363 15.5204 104.618 15.3776 103.802 15.2755C102.985 15.1735 102.159 15.051 101.322 14.9082C100.506 14.7449 99.7609 14.5102 99.0874 14.2041C98.4139 13.8776 97.8629 13.3673 97.4343 12.6735C97.0058 11.9592 96.7915 11.051 96.7915 9.94898C96.7915 8.41837 97.4037 7.2551 98.6282 6.45918C99.8731 5.64286 101.434 5.23469 103.312 5.23469C105.251 5.23469 106.822 5.71429 108.026 6.67347C109.23 7.61224 109.832 8.82653 109.832 10.3163Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M116.471 7.83673V19.3163C116.471 20.0102 116.665 20.5306 117.053 20.8776C117.441 21.2245 117.941 21.398 118.553 21.398H120.145V23.4796H118.553C117.369 23.4796 116.38 23.102 115.584 22.3469C114.788 21.5918 114.39 20.5816 114.39 19.3163V7.83673H112.308V5.7551H114.39V1.7449H116.471V5.7551H120.145V7.83673H116.471Z\"\n                    fill=\"#26272A\"\n                />\n            </svg>\n        }\n    </div>\n\n    <!-- Thread History List Container -->\n    <thread-history-list class=\"flex flex-1 flex-col p-2 overflow-y-scroll custom-scrollbar custom-scrollbar-no-gutter\"></thread-history-list>\n\n    <!-- User Profile Section -->\n    @if (hasUsername()) {\n        <div\n            class=\"thread-history__user-profile\"\n            [ngClass]=\"{\n                'flex items-center gap-3 px-4 py-3 mt-auto border-t border-border-default': true,\n            }\"\n        >\n            <!-- User Avatar -->\n            <div\n                class=\"thread-history__user-avatar\"\n                [ngClass]=\"{\n                    'flex items-center justify-center w-6 h-6 rounded-full bg-app-accent-color-1 text-white text-neutrals-0 font-weight-600 text-[12px] flex-shrink-0': true,\n                }\"\n            >\n                {{ userInitial() }}\n            </div>\n\n            <!-- User Info -->\n            <div\n                class=\"thread-history__user-info\"\n                [ngClass]=\"{\n                    'flex flex-col flex-1 min-w-0': true,\n                }\"\n            >\n                <span\n                    [ngClass]=\"{\n                        'text-text-default text-[12px] leading-[12px] font-weight-400 truncate': true,\n                    }\"\n                    [attr.title]=\"username()\"\n                >\n                    {{ username() }}\n                </span>\n            </div>\n        </div>\n    }\n\n    <!-- Thread History Footer TODO: Revert and implement once we decide to support chat model picking -->\n    <!-- <div class=\"flex items-center px-4 py-2 border-t border-proto-border-default\">\n        <select\n            class=\"p-2 border border-proto-border-default rounded text-proto-text-default bg-proto-background-light w-full\"\n        >\n            <option value=\"gpt-4\">GPT-4</option>\n            <option value=\"gpt-3.5-turbo\">GPT-3.5 Turbo</option>\n        </select>\n    </div> -->\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThreadHistoryListComponent, selector: "thread-history-list" }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["variant", "size", "iconFill", "disabledIconFill", "hoverIconFill", "isDisabled", "isWrapped", "title", "customIcon", "backgroundColor", "hoverBackgroundShape", "hoverBackgroundColor", "isHoveredExternal", "tabIndex"], outputs: ["onClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThreadHistoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ThreadHistoryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'thread-history', imports: [CommonModule, ThreadHistoryListComponent, AppIconComponent], template: "<div\n    class=\"absolute left-0 top-0 md:static md:left-auto md:top-auto flex flex-col w-full h-full bg-app-background-secondary z-10 md:w-[368px] md:min-w-[368px] md:max-w-[368px] flex-shrink-0\"\n>\n    <!-- Thread History Header -->\n    <div class=\"flex items-center gap-4 px-4 py-2\">\n        <!-- Thread Header Title Section -->\n        <app-icon [variant]=\"APP_ICON_VARIANTS.THREAD_HISTORY\" (click)=\"hideThreadHistory()\" />\n\n        <!-- IO.Assist Logo -->\n        @if (isDarkMode()) {\n            <svg\n                width=\"68\"\n                height=\"14\"\n                viewBox=\"0 0 68 14\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n            >\n                <path\n                    d=\"M0.220798 3.28877H1.38651V13.2145H0.220798V3.28877ZM0.255084 1.38592C0.106512 1.22592 0.0322266 1.04306 0.0322266 0.837346C0.0322266 0.631632 0.106512 0.454489 0.255084 0.305918C0.415084 0.145918 0.597941 0.065918 0.803655 0.065918C1.00937 0.065918 1.18651 0.145918 1.33508 0.305918C1.49508 0.454489 1.57508 0.631632 1.57508 0.837346C1.57508 1.04306 1.49508 1.22592 1.33508 1.38592C1.18651 1.53449 1.00937 1.60877 0.803655 1.60877C0.597941 1.60877 0.415084 1.53449 0.255084 1.38592Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M8.38897 12.3745C9.5204 12.3745 10.4804 11.9745 11.269 11.1745C12.069 10.3631 12.469 9.38592 12.469 8.24306C12.469 7.11163 12.069 6.14592 11.269 5.34592C10.4804 4.53449 9.5204 4.12877 8.38897 4.12877C7.26897 4.12877 6.30897 4.53449 5.50897 5.34592C4.70897 6.14592 4.30897 7.11163 4.30897 8.24306C4.30897 9.38592 4.70897 10.3631 5.50897 11.1745C6.30897 11.9745 7.26897 12.3745 8.38897 12.3745ZM8.38897 13.5059C6.93754 13.5059 5.69182 12.9916 4.65182 11.9631C3.62325 10.9345 3.10897 9.69449 3.10897 8.24306C3.10897 6.79163 3.62325 5.55735 4.65182 4.5402C5.69182 3.51163 6.93754 2.99735 8.38897 2.99735C9.85182 2.99735 11.0975 3.51163 12.1261 4.5402C13.1547 5.55735 13.669 6.79163 13.669 8.24306C13.669 9.69449 13.1547 10.9345 12.1261 11.9631C11.0975 12.9916 9.85182 13.5059 8.38897 13.5059Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M16.4192 13.4039C16.072 13.4039 15.78 13.2855 15.5433 13.0488C15.3066 12.812 15.1882 12.528 15.1882 12.1965C15.1882 11.8651 15.3066 11.581 15.5433 11.3443C15.78 11.1076 16.072 10.9892 16.4192 10.9892C16.7349 10.9892 17.0111 11.1076 17.2478 11.3443C17.4845 11.581 17.6029 11.8651 17.6029 12.1965C17.6029 12.528 17.4845 12.812 17.2478 13.0488C17.0111 13.2855 16.7349 13.4039 16.4192 13.4039Z\"\n                    fill=\"#F25F1F\"\n                />\n                <path\n                    d=\"M22.7104 9.13449H28.1276L25.4361 2.08877H25.4018L22.7104 9.13449ZM30.9733 13.2145H29.7047L28.5733 10.2831H22.2476L21.1161 13.2145H19.8647L24.8361 0.357346H26.0018L30.9733 13.2145Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M39.5573 5.84306H38.3744C38.3744 5.35163 38.1459 4.94592 37.6887 4.62592C37.243 4.29449 36.6487 4.12877 35.9059 4.12877C35.1401 4.12877 34.5401 4.26592 34.1059 4.5402C33.6716 4.80306 33.4544 5.15735 33.4544 5.60306C33.4544 6.11735 33.6144 6.51735 33.9344 6.80306C34.2544 7.07735 34.6544 7.24878 35.1344 7.31735C35.6144 7.38592 36.1287 7.47163 36.6773 7.57449C37.2373 7.66592 37.7573 7.7802 38.2373 7.91735C38.7173 8.05449 39.1173 8.3402 39.4373 8.77449C39.7573 9.19735 39.9173 9.76877 39.9173 10.4888C39.9173 11.4373 39.5573 12.1802 38.8373 12.7173C38.1287 13.2431 37.1516 13.5059 35.9059 13.5059C34.7059 13.5059 33.7402 13.2031 33.0087 12.5973C32.2773 11.9802 31.9116 11.1916 31.9116 10.2316H33.0944C33.0944 10.8602 33.3459 11.3745 33.8487 11.7745C34.3516 12.1745 35.0373 12.3745 35.9059 12.3745C36.7973 12.3745 37.4887 12.2088 37.9801 11.8773C38.4716 11.5345 38.7173 11.0545 38.7173 10.4373C38.7173 10.0031 38.5973 9.6602 38.3573 9.40877C38.1173 9.14592 37.8087 8.96306 37.4316 8.8602C37.0544 8.75735 36.6373 8.67735 36.1801 8.6202C35.723 8.56306 35.2602 8.49449 34.7916 8.41449C34.3344 8.32306 33.9173 8.19163 33.5401 8.0202C33.163 7.83735 32.8544 7.55163 32.6144 7.16306C32.3744 6.76306 32.2544 6.25449 32.2544 5.63735C32.2544 4.7802 32.5973 4.12877 33.283 3.68306C33.9802 3.22592 34.8544 2.99735 35.9059 2.99735C36.9916 2.99735 37.8716 3.26592 38.5459 3.80306C39.2201 4.32877 39.5573 5.00877 39.5573 5.84306Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M48.9323 5.84306H47.7494C47.7494 5.35163 47.5209 4.94592 47.0637 4.62592C46.618 4.29449 46.0237 4.12877 45.2809 4.12877C44.5151 4.12877 43.9151 4.26592 43.4809 4.5402C43.0466 4.80306 42.8294 5.15735 42.8294 5.60306C42.8294 6.11735 42.9894 6.51735 43.3094 6.80306C43.6294 7.07735 44.0294 7.24878 44.5094 7.31735C44.9894 7.38592 45.5037 7.47163 46.0523 7.57449C46.6123 7.66592 47.1323 7.7802 47.6123 7.91735C48.0923 8.05449 48.4923 8.3402 48.8123 8.77449C49.1323 9.19735 49.2923 9.76877 49.2923 10.4888C49.2923 11.4373 48.9323 12.1802 48.2123 12.7173C47.5037 13.2431 46.5266 13.5059 45.2809 13.5059C44.0809 13.5059 43.1151 13.2031 42.3837 12.5973C41.6523 11.9802 41.2866 11.1916 41.2866 10.2316H42.4694C42.4694 10.8602 42.7209 11.3745 43.2237 11.7745C43.7266 12.1745 44.4123 12.3745 45.2809 12.3745C46.1723 12.3745 46.8637 12.2088 47.3551 11.8773C47.8466 11.5345 48.0923 11.0545 48.0923 10.4373C48.0923 10.0031 47.9723 9.6602 47.7323 9.40877C47.4923 9.14592 47.1837 8.96306 46.8066 8.8602C46.4294 8.75735 46.0123 8.67735 45.5551 8.6202C45.098 8.56306 44.6352 8.49449 44.1666 8.41449C43.7094 8.32306 43.2923 8.19163 42.9151 8.0202C42.538 7.83735 42.2294 7.55163 41.9894 7.16306C41.7494 6.76306 41.6294 6.25449 41.6294 5.63735C41.6294 4.7802 41.9723 4.12877 42.658 3.68306C43.3551 3.22592 44.2294 2.99735 45.2809 2.99735C46.3666 2.99735 47.2466 3.26592 47.9209 3.80306C48.5951 4.32877 48.9323 5.00877 48.9323 5.84306Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M51.0044 3.28877H52.1701V13.2145H51.0044V3.28877ZM51.0387 1.38592C50.8901 1.22592 50.8159 1.04306 50.8159 0.837346C50.8159 0.631632 50.8901 0.454489 51.0387 0.305918C51.1987 0.145918 51.3816 0.065918 51.5873 0.065918C51.793 0.065918 51.9701 0.145918 52.1187 0.305918C52.2787 0.454489 52.3587 0.631632 52.3587 0.837346C52.3587 1.04306 52.2787 1.22592 52.1187 1.38592C51.9701 1.53449 51.793 1.60877 51.5873 1.60877C51.3816 1.60877 51.1987 1.53449 51.0387 1.38592Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M61.5383 5.84306H60.3555C60.3555 5.35163 60.1269 4.94592 59.6697 4.62592C59.224 4.29449 58.6297 4.12877 57.8869 4.12877C57.1212 4.12877 56.5212 4.26592 56.0869 4.5402C55.6526 4.80306 55.4355 5.15735 55.4355 5.60306C55.4355 6.11735 55.5955 6.51735 55.9155 6.80306C56.2355 7.07735 56.6355 7.24878 57.1155 7.31735C57.5955 7.38592 58.1097 7.47163 58.6583 7.57449C59.2183 7.66592 59.7383 7.7802 60.2183 7.91735C60.6983 8.05449 61.0983 8.3402 61.4183 8.77449C61.7383 9.19735 61.8983 9.76877 61.8983 10.4888C61.8983 11.4373 61.5383 12.1802 60.8183 12.7173C60.1097 13.2431 59.1326 13.5059 57.8869 13.5059C56.6869 13.5059 55.7212 13.2031 54.9897 12.5973C54.2583 11.9802 53.8926 11.1916 53.8926 10.2316H55.0755C55.0755 10.8602 55.3269 11.3745 55.8297 11.7745C56.3326 12.1745 57.0183 12.3745 57.8869 12.3745C58.7783 12.3745 59.4697 12.2088 59.9612 11.8773C60.4526 11.5345 60.6983 11.0545 60.6983 10.4373C60.6983 10.0031 60.5783 9.6602 60.3383 9.40877C60.0983 9.14592 59.7897 8.96306 59.4126 8.8602C59.0355 8.75735 58.6183 8.67735 58.1612 8.6202C57.704 8.56306 57.2412 8.49449 56.7726 8.41449C56.3155 8.32306 55.8983 8.19163 55.5212 8.0202C55.144 7.83735 54.8355 7.55163 54.5955 7.16306C54.3555 6.76306 54.2355 6.25449 54.2355 5.63735C54.2355 4.7802 54.5783 4.12877 55.264 3.68306C55.9612 3.22592 56.8355 2.99735 57.8869 2.99735C58.9726 2.99735 59.8526 3.26592 60.5269 3.80306C61.2012 4.32877 61.5383 5.00877 61.5383 5.84306Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M65.2562 4.45449V10.8831C65.2562 11.2716 65.3647 11.5631 65.5819 11.7573C65.799 11.9516 66.079 12.0488 66.4219 12.0488H67.3133V13.2145H66.4219C65.759 13.2145 65.2047 13.0031 64.759 12.5802C64.3133 12.1573 64.0905 11.5916 64.0905 10.8831V4.45449H62.9247V3.28877H64.0905V1.04306H65.2562V3.28877H67.3133V4.45449H65.2562Z\"\n                    fill=\"white\"\n                />\n            </svg>\n        }\n\n        @if (!isDarkMode()) {\n            <svg\n                width=\"68\"\n                height=\"14\"\n                viewBox=\"0 0 121 24\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n            >\n                <path\n                    d=\"M0.336735 5.7551H2.41837V23.4796H0.336735V5.7551ZM0.397959 2.35714C0.132653 2.07143 0 1.7449 0 1.37755C0 1.0102 0.132653 0.693878 0.397959 0.428571C0.683674 0.142857 1.0102 0 1.37755 0C1.7449 0 2.06122 0.142857 2.32653 0.428571C2.61225 0.693878 2.7551 1.0102 2.7551 1.37755C2.7551 1.7449 2.61225 2.07143 2.32653 2.35714C2.06122 2.62245 1.7449 2.7551 1.37755 2.7551C1.0102 2.7551 0.683674 2.62245 0.397959 2.35714Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M14.9228 21.9796C16.9432 21.9796 18.6574 21.2653 20.0656 19.8367C21.4942 18.3878 22.2085 16.6429 22.2085 14.602C22.2085 12.5816 21.4942 10.8571 20.0656 9.42857C18.6574 7.97959 16.9432 7.2551 14.9228 7.2551C12.9228 7.2551 11.2085 7.97959 9.77989 9.42857C8.35132 10.8571 7.63704 12.5816 7.63704 14.602C7.63704 16.6429 8.35132 18.3878 9.77989 19.8367C11.2085 21.2653 12.9228 21.9796 14.9228 21.9796ZM14.9228 24C12.3309 24 10.1064 23.0816 8.24928 21.2449C6.41255 19.4082 5.49418 17.1939 5.49418 14.602C5.49418 12.0102 6.41255 9.80612 8.24928 7.98979C10.1064 6.15306 12.3309 5.23469 14.9228 5.23469C17.535 5.23469 19.7595 6.15306 21.5962 7.98979C23.433 9.80612 24.3513 12.0102 24.3513 14.602C24.3513 17.1939 23.433 19.4082 21.5962 21.2449C19.7595 23.0816 17.535 24 14.9228 24Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M29.2625 23.8178C28.6425 23.8178 28.1211 23.6064 27.6984 23.1837C27.2756 22.7609 27.0643 22.2536 27.0643 21.6618C27.0643 21.07 27.2756 20.5627 27.6984 20.1399C28.1211 19.7172 28.6425 19.5058 29.2625 19.5058C29.8262 19.5058 30.3194 19.7172 30.7421 20.1399C31.1648 20.5627 31.3762 21.07 31.3762 21.6618C31.3762 22.2536 31.1648 22.7609 30.7421 23.1837C30.3194 23.6064 29.8262 23.8178 29.2625 23.8178Z\"\n                    fill=\"#F25F1F\"\n                />\n                <path\n                    d=\"M40.4968 16.1939H50.1702L45.3641 3.61224H45.3029L40.4968 16.1939ZM55.2519 23.4796H52.9866L50.9662 18.2449H39.6702L37.6498 23.4796H35.4151L44.2927 0.520407H46.3743L55.2519 23.4796Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M70.5805 10.3163H68.4682C68.4682 9.43878 68.0601 8.71428 67.2437 8.14286C66.4478 7.55102 65.3866 7.2551 64.0601 7.2551C62.6927 7.2551 61.6213 7.5 60.8458 7.98979C60.0703 8.45918 59.6825 9.09184 59.6825 9.88775C59.6825 10.8061 59.9682 11.5204 60.5397 12.0306C61.1111 12.5204 61.8254 12.8265 62.6825 12.949C63.5397 13.0714 64.458 13.2245 65.4376 13.4082C66.4376 13.5714 67.3662 13.7755 68.2233 14.0204C69.0805 14.2653 69.7948 14.7755 70.3662 15.551C70.9376 16.3061 71.2233 17.3265 71.2233 18.6122C71.2233 20.3061 70.5805 21.6327 69.2948 22.5918C68.0295 23.5306 66.2846 24 64.0601 24C61.9172 24 60.1927 23.4592 58.8866 22.3776C57.5805 21.2755 56.9274 19.8673 56.9274 18.1531H59.0397C59.0397 19.2755 59.4886 20.1939 60.3866 20.9082C61.2846 21.6224 62.509 21.9796 64.0601 21.9796C65.6519 21.9796 66.8866 21.6837 67.7642 21.0918C68.6417 20.4796 69.0805 19.6224 69.0805 18.5204C69.0805 17.7449 68.8662 17.1327 68.4376 16.6837C68.009 16.2143 67.458 15.8878 66.7846 15.7041C66.1111 15.5204 65.3662 15.3776 64.5499 15.2755C63.7335 15.1735 62.907 15.051 62.0703 14.9082C61.254 14.7449 60.5091 14.5102 59.8356 14.2041C59.1621 13.8776 58.6111 13.3673 58.1825 12.6735C57.754 11.9592 57.5397 11.051 57.5397 9.94898C57.5397 8.41837 58.1519 7.2551 59.3764 6.45918C60.6213 5.64286 62.1825 5.23469 64.0601 5.23469C65.9988 5.23469 67.5703 5.71429 68.7744 6.67347C69.9784 7.61224 70.5805 8.82653 70.5805 10.3163Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M87.3216 10.3163H85.2093C85.2093 9.43878 84.8011 8.71428 83.9848 8.14286C83.1889 7.55102 82.1277 7.2551 80.8011 7.2551C79.4338 7.2551 78.3624 7.5 77.5869 7.98979C76.8113 8.45918 76.4236 9.09184 76.4236 9.88775C76.4236 10.8061 76.7093 11.5204 77.2807 12.0306C77.8522 12.5204 78.5664 12.8265 79.4236 12.949C80.2807 13.0714 81.1991 13.2245 82.1787 13.4082C83.1787 13.5714 84.1073 13.7755 84.9644 14.0204C85.8216 14.2653 86.5358 14.7755 87.1073 15.551C87.6787 16.3061 87.9644 17.3265 87.9644 18.6122C87.9644 20.3061 87.3216 21.6327 86.0358 22.5918C84.7705 23.5306 83.0256 24 80.8011 24C78.6583 24 76.9338 23.4592 75.6277 22.3776C74.3215 21.2755 73.6685 19.8673 73.6685 18.1531H75.7807C75.7807 19.2755 76.2297 20.1939 77.1277 20.9082C78.0256 21.6224 79.2501 21.9796 80.8011 21.9796C82.393 21.9796 83.6277 21.6837 84.5052 21.0918C85.3828 20.4796 85.8215 19.6224 85.8215 18.5204C85.8215 17.7449 85.6073 17.1327 85.1787 16.6837C84.7501 16.2143 84.1991 15.8878 83.5256 15.7041C82.8522 15.5204 82.1073 15.3776 81.2909 15.2755C80.4746 15.1735 79.6481 15.051 78.8113 14.9082C77.995 14.7449 77.2501 14.5102 76.5767 14.2041C75.9032 13.8776 75.3522 13.3673 74.9236 12.6735C74.495 11.9592 74.2807 11.051 74.2807 9.94898C74.2807 8.41837 74.893 7.2551 76.1175 6.45918C77.3624 5.64286 78.9236 5.23469 80.8011 5.23469C82.7399 5.23469 84.3113 5.71429 85.5154 6.67347C86.7195 7.61224 87.3216 8.82653 87.3216 10.3163Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M91.0218 5.7551H93.1034V23.4796H91.0218V5.7551ZM91.083 2.35714C90.8177 2.07143 90.6851 1.7449 90.6851 1.37755C90.6851 1.0102 90.8177 0.693878 91.083 0.428571C91.3687 0.142857 91.6953 0 92.0626 0C92.43 0 92.7463 0.142857 93.0116 0.428571C93.2973 0.693878 93.4402 1.0102 93.4402 1.37755C93.4402 1.7449 93.2973 2.07143 93.0116 2.35714C92.7463 2.62245 92.43 2.7551 92.0626 2.7551C91.6953 2.7551 91.3687 2.62245 91.083 2.35714Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M109.832 10.3163H107.72C107.72 9.43878 107.312 8.71428 106.496 8.14286C105.7 7.55102 104.638 7.2551 103.312 7.2551C101.945 7.2551 100.873 7.5 100.098 7.98979C99.3221 8.45918 98.9343 9.09184 98.9343 9.88775C98.9343 10.8061 99.2201 11.5204 99.7915 12.0306C100.363 12.5204 101.077 12.8265 101.934 12.949C102.791 13.0714 103.71 13.2245 104.689 13.4082C105.689 13.5714 106.618 13.7755 107.475 14.0204C108.332 14.2653 109.047 14.7755 109.618 15.551C110.189 16.3061 110.475 17.3265 110.475 18.6122C110.475 20.3061 109.832 21.6327 108.547 22.5918C107.281 23.5306 105.536 24 103.312 24C101.169 24 99.4446 23.4592 98.1384 22.3776C96.8323 21.2755 96.1792 19.8673 96.1792 18.1531H98.2915C98.2915 19.2755 98.7405 20.1939 99.6384 20.9082C100.536 21.6224 101.761 21.9796 103.312 21.9796C104.904 21.9796 106.138 21.6837 107.016 21.0918C107.894 20.4796 108.332 19.6224 108.332 18.5204C108.332 17.7449 108.118 17.1327 107.689 16.6837C107.261 16.2143 106.71 15.8878 106.036 15.7041C105.363 15.5204 104.618 15.3776 103.802 15.2755C102.985 15.1735 102.159 15.051 101.322 14.9082C100.506 14.7449 99.7609 14.5102 99.0874 14.2041C98.4139 13.8776 97.8629 13.3673 97.4343 12.6735C97.0058 11.9592 96.7915 11.051 96.7915 9.94898C96.7915 8.41837 97.4037 7.2551 98.6282 6.45918C99.8731 5.64286 101.434 5.23469 103.312 5.23469C105.251 5.23469 106.822 5.71429 108.026 6.67347C109.23 7.61224 109.832 8.82653 109.832 10.3163Z\"\n                    fill=\"#26272A\"\n                />\n                <path\n                    d=\"M116.471 7.83673V19.3163C116.471 20.0102 116.665 20.5306 117.053 20.8776C117.441 21.2245 117.941 21.398 118.553 21.398H120.145V23.4796H118.553C117.369 23.4796 116.38 23.102 115.584 22.3469C114.788 21.5918 114.39 20.5816 114.39 19.3163V7.83673H112.308V5.7551H114.39V1.7449H116.471V5.7551H120.145V7.83673H116.471Z\"\n                    fill=\"#26272A\"\n                />\n            </svg>\n        }\n    </div>\n\n    <!-- Thread History List Container -->\n    <thread-history-list class=\"flex flex-1 flex-col p-2 overflow-y-scroll custom-scrollbar custom-scrollbar-no-gutter\"></thread-history-list>\n\n    <!-- User Profile Section -->\n    @if (hasUsername()) {\n        <div\n            class=\"thread-history__user-profile\"\n            [ngClass]=\"{\n                'flex items-center gap-3 px-4 py-3 mt-auto border-t border-border-default': true,\n            }\"\n        >\n            <!-- User Avatar -->\n            <div\n                class=\"thread-history__user-avatar\"\n                [ngClass]=\"{\n                    'flex items-center justify-center w-6 h-6 rounded-full bg-app-accent-color-1 text-white text-neutrals-0 font-weight-600 text-[12px] flex-shrink-0': true,\n                }\"\n            >\n                {{ userInitial() }}\n            </div>\n\n            <!-- User Info -->\n            <div\n                class=\"thread-history__user-info\"\n                [ngClass]=\"{\n                    'flex flex-col flex-1 min-w-0': true,\n                }\"\n            >\n                <span\n                    [ngClass]=\"{\n                        'text-text-default text-[12px] leading-[12px] font-weight-400 truncate': true,\n                    }\"\n                    [attr.title]=\"username()\"\n                >\n                    {{ username() }}\n                </span>\n            </div>\n        </div>\n    }\n\n    <!-- Thread History Footer TODO: Revert and implement once we decide to support chat model picking -->\n    <!-- <div class=\"flex items-center px-4 py-2 border-t border-proto-border-default\">\n        <select\n            class=\"p-2 border border-proto-border-default rounded text-proto-text-default bg-proto-background-light w-full\"\n        >\n            <option value=\"gpt-4\">GPT-4</option>\n            <option value=\"gpt-3.5-turbo\">GPT-3.5 Turbo</option>\n        </select>\n    </div> -->\n</div>" }]
         }] });
@@ -6232,8 +6242,8 @@ class ChatComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ChatComponent, isStandalone: true, selector: "chat", host: { classAttribute: "flex flex-1 flex-col bg-app-background min-h-0 text-app-text-default" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: ChatComponent, isStandalone: true, selector: "chat", host: { classAttribute: "flex flex-1 flex-col bg-app-background min-h-0 text-app-text-default" }, providers: [
             MessageFacade,
             PromptFacade,
             {
@@ -6242,7 +6252,7 @@ class ChatComponent {
             },
         ], ngImport: i0, template: "@let showMessageArea = isLoadingMessages() || messageLength() > 0;\n@let showWelcomeMessage = !showMessageArea;\n@let showFavoritePrompts = !showMessageArea && hasFavoritePrompts();\n\n<div\n    [ngClass]=\"{\n        'flex flex-1 min-h-0 overflow-hidden': true,\n    }\"\n>\n    @if (isThreadHistoryDisplayed()) {\n        <thread-history></thread-history>\n    }\n\n    <div\n        [ngClass]=\"{\n            'flex flex-col flex-1 min-h-0 min-w-0 items-center justify-end': true,\n        }\"\n    >\n        <!-- Chat Header -->\n        <header></header>\n\n        <!-- Chat Main Content -->\n        <div\n            [ngClass]=\"{\n                'flex flex-col flex-1 min-h-0 pb-0 w-full overflow-x-hidden overflow-auto custom-scrollbar custom-scrollbar-no-gutter': true,\n                'pt-24 md:pt-20 gap-12 md:gap-14': !showMessageArea,\n                'pt-0 gap-0': showMessageArea,\n            }\"\n        >\n            @if (showWelcomeMessage) {\n                <div\n                    [ngClass]=\"{\n                        'flex flex-col gap-3 items-center px-4 pt-[160px]': true,\n                    }\"\n                >\n                    <h2\n                        [ngClass]=\"{\n                            'text-[28px] font-bold text-text-states-active text-center': true,\n                            'md:text-[44px]': true,\n                        }\"\n                    >\n                        {{ UI_STRINGS.GENERAL.WELCOME_MESSAGE(loggedInUser()) }}\n                    </h2>\n                </div>\n            }\n\n            <div\n                [ngClass]=\"{\n                    'flex flex-1 min-h-0 flex-col items-center': true,\n                    'gap-6': !showMessageArea,\n                    'gap-0': showMessageArea,\n                }\"\n            >\n                @if (showMessageArea) {\n                    <message-area\n                        [ngClass]=\"{\n                            'flex-1 flex flex-col min-h-0 w-full': true,\n                        }\"\n                    ></message-area>\n                }\n\n                <input-area\n                    [ngClass]=\"{\n                        'flex max-w-[920px] w-full px-4': true,\n                        'md:max-w-[720px]': true,\n                    }\"\n                ></input-area>\n\n                @if (showFavoritePrompts) {\n                    <favorite-prompt-list\n                        [ngClass]=\"{\n                            'max-w-[920px] w-full px-4': true,\n                        }\"\n                    ></favorite-prompt-list>\n                }\n\n                <div\n                    [ngClass]=\"{\n                        'flex justify-center items-end text-center p-4': true,\n                        'pt-4': showMessageArea,\n                        'flex-1 pt-0': !showMessageArea,\n                    }\"\n                >\n                    <span\n                        [ngClass]=\"{\n                            'text-xs text-text-default tracking-wide': true,\n                        }\"\n                        >{{ UI_STRINGS.GENERAL.AI_CONTENT_INFO }}</span\n                    >\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThreadHistoryComponent, selector: "thread-history" }, { kind: "component", type: FavoritePromptListComponent, selector: "favorite-prompt-list" }, { kind: "component", type: InputAreaComponent, selector: "input-area" }, { kind: "component", type: HeaderComponent, selector: "header" }, { kind: "component", type: MessageAreaComponent, selector: "message-area" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ChatComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
             args: [{ selector: 'chat', imports: [MODULES$1, COMPONENTS$1], providers: [
                         MessageFacade,
@@ -6384,59 +6394,6 @@ const IoAssistDynamicConfigSchema = z.object({
         .optional(),
 });
 
-/**
- * Service to load consumer assets like stylesheets and scripts.
- *
- * Assets are directly appended to the document head and body.
- */
-class ConsumerAssetLoaderService {
-    _logger = inject(LoggerService);
-    LOGGER_NAME = 'ConsumerAssetLoaderService';
-    _links = [
-        'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
-        'https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/themes/prism-twilight.min.css',
-        // add more stylesheets if needed
-    ];
-    _scripts = [
-        'https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/prism.min.js',
-        'https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/plugins/autoloader/prism-autoloader.min.js',
-        // add more scripts if needed
-    ];
-    _isLoaded = signal(false, ...(ngDevMode ? [{ debugName: "_isLoaded" }] : []));
-    loadConsumerAssets() {
-        if (this._isLoaded()) {
-            this._logger.get(this.LOGGER_NAME).warn('Consumer assets have already been loaded.');
-            return;
-        }
-        this.loadLinks();
-        this.loadScripts();
-        this._isLoaded.set(true);
-    }
-    loadLinks() {
-        this._links.forEach((href) => {
-            const linkElement = document.createElement('link');
-            linkElement.rel = 'stylesheet';
-            linkElement.href = href;
-            document.head.appendChild(linkElement);
-        });
-    }
-    loadScripts() {
-        this._scripts.forEach((src) => {
-            const scriptElement = document.createElement('script');
-            scriptElement.src = src;
-            document.body.appendChild(scriptElement);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ConsumerAssetLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ConsumerAssetLoaderService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ConsumerAssetLoaderService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 const COMPONENTS = [AppSpinnerComponent, ChatComponent];
 const MODULES = [CommonModule];
 class IoAssist {
@@ -6456,31 +6413,26 @@ class IoAssist {
     appCoreServicesError = this._appLifecycleFacade.appCoreServicesErrorMessage;
     isAppCoreServicesError = computed(() => this._appLifecycleFacade.appCoreServicesErrorMessage() !== null, ...(ngDevMode ? [{ debugName: "isAppCoreServicesError" }] : []));
     isAppCoreServicesPending = this._appLifecycleFacade.isPendingAppCoreServicesOperation;
-    _consumerAssetLoaderService = inject(ConsumerAssetLoaderService);
     ngOnInit() {
         const parsedConfig = IoAssistDynamicConfigSchema.parse(this.config());
         this._dynamicConfigToken.set(parsedConfig);
         this.registerEffects();
     }
-    // Must be explicitly called after view init to ensure that the DOM is ready for asset injection
-    ngAfterViewInit() {
-        this._consumerAssetLoaderService.loadConsumerAssets();
-    }
     refreshPage() {
         window.location.reload();
     }
     registerEffects() {
         this._effectService.registerEffect('IoAssist.subscribeToThemeChanges', () => this.isIoReady() && this._ioService.startIODependentTasks());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IoAssist, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: IoAssist, isStandalone: true, selector: "io-assist", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: IoAssist, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.22", type: IoAssist, isStandalone: true, selector: "io-assist", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
             {
                 provide: ComponentEffectManagerService,
                 useFactory: () => new ComponentEffectManagerService('IoAssist'),
             },
         ], ngImport: i0, template: "@let chatUIReadyToDisplay = (isIoReady() && isAppCoreServicesStarted());\n@let showAppCoreServicesError = isAppCoreServicesError() && !isAppCoreServicesPending();\n@let showError = !isIoReady() || showAppCoreServicesError;\n@let isOperationPending = isAppCoreServicesPending() && !isAppCoreServicesStarted();\n\n\n<div class=\"flex flex-1 w-full h-lvh bg-app-background font-default\">\n    @if (!chatUIReadyToDisplay) {\n        <div class=\"m-auto text-center\">\n            @if (showError) {\n                @if (!isIoReady()) {\n                    <p class=\"text-sm text-gray-500\">{{ UI_STRINGS.CANNOT_CONNECT_TO_IO }}</p>\n                }\n\n                @if (showAppCoreServicesError) {\n                    <p class=\"text-sm text-red-500\">{{ appCoreServicesError() }}</p>\n                    <p class=\"text-sm text-gray-500 mt-2\">{{ UI_STRINGS.IO_INTEL_INIT_ERROR }}</p>\n                    <!-- TODO: ADD PROPER DOCUMENTATION LINK -->\n                    <p class=\"text-sm text-gray-500 mt-2\">{{ UI_STRINGS.DOCUMENTATION_LINK() }}</p>\n\n                    <button\n                        class=\"mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors\"\n                        (click)=\"refreshPage()\"\n                    >\n                        {{ UI_STRINGS.REFRESH }}\n                    </button>\n                }\n            }\n\n            @if (isOperationPending) {\n                <app-spinner [size]=\"APP_SPINNER_COMPONENT_SIZE.MEDIUM\"></app-spinner>\n                <p class=\"text-sm text-gray-500 mt-2\">{{ UI_STRINGS.INITIALIZING_SERVICES }}</p>\n            }\n        </div>\n    }\n\n    @if (chatUIReadyToDisplay) {\n        <chat />\n    }\n</div>\n\n\n", dependencies: [{ kind: "component", type: AppSpinnerComponent, selector: "app-spinner", inputs: ["size"] }, { kind: "component", type: ChatComponent, selector: "chat" }, { kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IoAssist, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: IoAssist, decorators: [{
             type: Component,
             args: [{ selector: 'io-assist', imports: [...COMPONENTS, ...MODULES], providers: [
                         {
@@ -6488,7 +6440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                             useFactory: () => new ComponentEffectManagerService('IoAssist'),
                         },
                     ], template: "@let chatUIReadyToDisplay = (isIoReady() && isAppCoreServicesStarted());\n@let showAppCoreServicesError = isAppCoreServicesError() && !isAppCoreServicesPending();\n@let showError = !isIoReady() || showAppCoreServicesError;\n@let isOperationPending = isAppCoreServicesPending() && !isAppCoreServicesStarted();\n\n\n<div class=\"flex flex-1 w-full h-lvh bg-app-background font-default\">\n    @if (!chatUIReadyToDisplay) {\n        <div class=\"m-auto text-center\">\n            @if (showError) {\n                @if (!isIoReady()) {\n                    <p class=\"text-sm text-gray-500\">{{ UI_STRINGS.CANNOT_CONNECT_TO_IO }}</p>\n                }\n\n                @if (showAppCoreServicesError) {\n                    <p class=\"text-sm text-red-500\">{{ appCoreServicesError() }}</p>\n                    <p class=\"text-sm text-gray-500 mt-2\">{{ UI_STRINGS.IO_INTEL_INIT_ERROR }}</p>\n                    <!-- TODO: ADD PROPER DOCUMENTATION LINK -->\n                    <p class=\"text-sm text-gray-500 mt-2\">{{ UI_STRINGS.DOCUMENTATION_LINK() }}</p>\n\n                    <button\n                        class=\"mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors\"\n                        (click)=\"refreshPage()\"\n                    >\n                        {{ UI_STRINGS.REFRESH }}\n                    </button>\n                }\n            }\n\n            @if (isOperationPending) {\n                <app-spinner [size]=\"APP_SPINNER_COMPONENT_SIZE.MEDIUM\"></app-spinner>\n                <p class=\"text-sm text-gray-500 mt-2\">{{ UI_STRINGS.INITIALIZING_SERVICES }}</p>\n            }\n        </div>\n    }\n\n    @if (chatUIReadyToDisplay) {\n        <chat />\n    }\n</div>\n\n\n" }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class AgentManagerService {
     _ioIntelWebService = inject(IOAiWebService);
@@ -6505,10 +6457,10 @@ class AgentManagerService {
             throw new Error('Failed to fetch agents.');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AgentManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AgentManagerService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AgentManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AgentManagerService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AgentManagerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AgentManagerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -6547,10 +6499,10 @@ class AgentEffects {
     getLogger() {
         return this._logger.get(this.LOGGER_NAME);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AgentEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AgentEffects });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AgentEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AgentEffects });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AgentEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AgentEffects, decorators: [{
             type: Injectable
         }] });
 
@@ -6608,10 +6560,10 @@ class AppLifecycleEffects {
         this._promptFacade.dispatchParsePromptsConfig();
         // this._xxxFacade.dispatchListXXX();
     })), { dispatch: false });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppLifecycleEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppLifecycleEffects });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppLifecycleEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppLifecycleEffects });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AppLifecycleEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: AppLifecycleEffects, decorators: [{
             type: Injectable
         }] });
 
@@ -6778,9 +6730,10 @@ class ThreadService {
                 const existingCall = toolCallMap.get(toolCallId);
                 if (existingCall) {
                     existingCall.result = toolInvocation.result;
+                    // Skip adding new message
+                    return null;
                 }
-                // Skip adding new message
-                return null;
+                // No preceding call found (new format: Tool part comes directly with a tool result)
             }
             const newMessage = {
                 id: toolCallId,
@@ -6804,10 +6757,10 @@ class ThreadService {
         };
         return UIThread;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThreadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThreadService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ThreadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ThreadService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThreadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ThreadService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -6916,10 +6869,10 @@ class MessageEffects {
         }));
         return of(getResponseFailure({ error, threadId }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MessageEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MessageEffects });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: MessageEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: MessageEffects });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MessageEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: MessageEffects, decorators: [{
             type: Injectable
         }] });
 
@@ -7231,10 +7184,10 @@ class PromptService {
     getLogger() {
         return this._logger.get(this.LOGGER_NAME);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PromptService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PromptService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: PromptService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: PromptService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PromptService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: PromptService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -7282,10 +7235,10 @@ class PromptEffects {
     closeOverlayOnPromptSelect$ = createEffect(() => this._actions$.pipe(ofType(selectPrompt), map(() => {
         this._overlayService.closeCurrentOverlay();
     })), { dispatch: false });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PromptEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PromptEffects });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: PromptEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: PromptEffects });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PromptEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: PromptEffects, decorators: [{
             type: Injectable
         }] });
 
@@ -7503,10 +7456,10 @@ class ThreadEffects {
     changeActiveThread$ = createEffect(() => this._actions$.pipe(ofType(changeActiveThread), map((action) => {
         return untrackThreadStreamState({ threadId: action.threadId ?? '' });
     })));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThreadEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThreadEffects });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ThreadEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ThreadEffects });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThreadEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ThreadEffects, decorators: [{
             type: Injectable
         }] });
 
@@ -7590,10 +7543,10 @@ class ToolsService {
     toggleTool(tool) {
         return this._ioIntelWebService.toggleTool(tool.name, !tool.enabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -7628,10 +7581,10 @@ class ToolEffects {
             }))));
         }));
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolEffects });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolEffects });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToolEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: ToolEffects, decorators: [{
             type: Injectable
         }] });
 
@@ -7698,10 +7651,10 @@ class WorkingContextEffects {
             error: error instanceof Error ? error : new Error(String(error)),
         }))));
     })));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WorkingContextEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WorkingContextEffects });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: WorkingContextEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: WorkingContextEffects });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WorkingContextEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.22", ngImport: i0, type: WorkingContextEffects, decorators: [{
             type: Injectable
         }] });