@masterteam/faris 0.0.1

package/fesm2022/masterteam-faris.mjs

@@ -0,0 +1,1932 @@
+import * as i0 from '@angular/core';
+import { inject, Pipe, Injectable, EventEmitter, Output, Input, Component, ViewContainerRef, forwardRef, ViewChild } from '@angular/core';
+import { Button } from '@masterteam/components/button';
+import { ConfirmationService } from '@masterteam/components/confirmation';
+import { BehaviorSubject, of, EMPTY, Subject, Subscription } from 'rxjs';
+import { DomSanitizer } from '@angular/platform-browser';
+import { TranslocoService } from '@jsverse/transloco';
+import { HttpContext, HttpClient } from '@angular/common/http';
+import { Router, NavigationEnd } from '@angular/router';
+import { REQUEST_CONTEXT } from '@masterteam/components';
+import { ToastService } from '@masterteam/components/toast';
+import { filter, map, tap, finalize, debounceTime, switchMap, catchError, takeUntil } from 'rxjs/operators';
+import * as i1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Icon } from '@masterteam/icons';
+import { DOCUMENT } from '@angular/common';
+import { trigger, transition, style, animate } from '@angular/animations';
+
+class FarisTranslatePipe {
+    transloco = inject(TranslocoService);
+    transform(key, params) {
+        if (!key) {
+            return '';
+        }
+        return this.transloco.translate(key, params);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisTranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: FarisTranslatePipe, isStandalone: true, name: "translate", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisTranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'translate',
+                    standalone: true,
+                    pure: false,
+                }]
+        }] });
+
+function normalizeAuthUser(rawUser) {
+    if (!rawUser || typeof rawUser !== 'object') {
+        return null;
+    }
+    const details = rawUser?.user ?? rawUser?.data?.user ?? rawUser;
+    const resolvedId = details?.id ??
+        details?.userId ??
+        details?.user_id ??
+        rawUser?.id ??
+        rawUser?.userId ??
+        rawUser?.user_id ??
+        '';
+    const resolvedDisplayName = details?.displayName ??
+        details?.name ??
+        details?.userName ??
+        details?.username ??
+        '';
+    const resolvedPhoto = details?.photo ?? details?.image ?? null;
+    return {
+        ...rawUser,
+        user: {
+            ...details,
+            id: resolvedId ? String(resolvedId) : '',
+            displayName: resolvedDisplayName,
+            photo: resolvedPhoto,
+        },
+    };
+}
+function resolveFarisAuthFromLocalStorage() {
+    try {
+        const raw = localStorage.getItem('auth');
+        if (!raw) {
+            return { user: null, token: '' };
+        }
+        const parsed = JSON.parse(raw);
+        const user = normalizeAuthUser(parsed?.user ?? parsed ?? null);
+        const token = (typeof parsed?.token === 'string' && parsed.token) ||
+            (typeof parsed?.accessToken === 'string' && parsed.accessToken) ||
+            (typeof user?.token === 'string' && user.token) ||
+            (typeof user?.accessToken === 'string' && user.accessToken) ||
+            (typeof user?.data?.token === 'string' && user.data.token) ||
+            '';
+        return { user, token };
+    }
+    catch {
+        return { user: null, token: '' };
+    }
+}
+
+const DEFAULT_FARIS_URL = 'http://34.166.126.184:8004/';
+function resolveFarisUrlFromLocalStorage(fallbackUrl = DEFAULT_FARIS_URL) {
+    const directValue = localStorage.getItem('farisUrl');
+    if (directValue?.trim()) {
+        return directValue;
+    }
+    const configValue = localStorage.getItem('config');
+    if (!configValue) {
+        return fallbackUrl;
+    }
+    try {
+        const parsed = JSON.parse(configValue);
+        const farisApiUrl = parsed?.config?.farisApiUrl ||
+            parsed?.config?.basicConfig?.farisApiUrl ||
+            parsed?.farisApiUrl ||
+            parsed?.basicConfig?.farisApiUrl;
+        if (typeof farisApiUrl === 'string' && farisApiUrl.trim()) {
+            return farisApiUrl;
+        }
+    }
+    catch {
+        // ignore parse errors and use fallback
+    }
+    return fallbackUrl;
+}
+
+class FarisService {
+    sessionId = null;
+    baseUrl = '';
+    requestContext = new HttpContext().set(REQUEST_CONTEXT, {
+        useBaseUrl: false,
+    });
+    activeLevelMenuItem = '';
+    activeModuleId = null;
+    mySpaceActiveTab = '';
+    kpiTemplateId = '';
+    kpiSchemaId = '';
+    initiativesTemplateId = '';
+    initiativesSchemaId = '';
+    strategyTemplateId = '';
+    conversations = new BehaviorSubject([]);
+    http = inject(HttpClient);
+    toast = inject(ToastService);
+    router = inject(Router, { optional: true });
+    constructor() {
+        const farisUrl = resolveFarisUrlFromLocalStorage();
+        this.baseUrl = this.normalizeBaseUrl(farisUrl);
+        if (this.router) {
+            this.subscribeToRouterChanges();
+            this.fillValuesFromRoute(this.router.routerState.snapshot.url);
+        }
+    }
+    get currentUser() {
+        return resolveFarisAuthFromLocalStorage().user;
+    }
+    get currentToken() {
+        const localStorageToken = resolveFarisAuthFromLocalStorage().token;
+        if (localStorageToken) {
+            return localStorageToken;
+        }
+        return this.currentUser?.token ?? '';
+    }
+    get currentUserId() {
+        const details = this.resolveCurrentUserDetails();
+        const resolvedId = details?.id ??
+            details?.userId ??
+            details?.user_id ??
+            this.currentUser?.id ??
+            this.currentUser?.userId ??
+            this.currentUser?.user_id;
+        return resolvedId == null ? '' : String(resolvedId);
+    }
+    get currentUserName() {
+        const details = this.resolveCurrentUserDetails();
+        return (details?.displayName ??
+            details?.name ??
+            details?.userName ??
+            details?.username ??
+            '');
+    }
+    normalizeBaseUrl(url) {
+        return url.endsWith('/') ? url.slice(0, -1) : url;
+    }
+    subscribeToRouterChanges() {
+        if (!this.router) {
+            return;
+        }
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd))
+            .subscribe((event) => {
+            this.fillValuesFromRoute(event.urlAfterRedirects);
+        });
+    }
+    fillValuesFromRoute(currentUrl) {
+        this.mySpaceActiveTab = '';
+        this.kpiTemplateId = '';
+        this.kpiSchemaId = '';
+        this.initiativesTemplateId = '';
+        this.initiativesSchemaId = '';
+        this.strategyTemplateId = '';
+        if (currentUrl.includes('/tasks-center')) {
+            this.getMySpaceValuesFromUrl(currentUrl);
+        }
+        if (currentUrl.includes('/kpis')) {
+            this.getKpisValuesFromUrl(currentUrl);
+        }
+        if (currentUrl.includes('/initiatives')) {
+            this.getInitiativesValuesFromUrl(currentUrl);
+        }
+        if (currentUrl.includes('/strategy')) {
+            this.getStrategyValuesFromUrl(currentUrl);
+        }
+    }
+    getLevelValuesFromUrl(currentUrl) {
+        const splitUrl = currentUrl.split('/');
+        const thirdSegment = splitUrl[3];
+        const fourthSegment = splitUrl[4];
+        this.activeLevelMenuItem = thirdSegment?.includes('?')
+            ? thirdSegment.split('?')[0]
+            : thirdSegment;
+        this.activeModuleId = Number.isNaN(Number(fourthSegment))
+            ? null
+            : fourthSegment;
+        if (splitUrl.includes('log')) {
+            const index = splitUrl.findIndex((item) => item === 'log');
+            this.activeLevelMenuItem = '';
+            for (let i = index; i < splitUrl.length; i += 1) {
+                this.activeLevelMenuItem += `${splitUrl[i]}${i === splitUrl.length - 1 ? '' : '/'}`;
+            }
+        }
+    }
+    getMySpaceValuesFromUrl(currentUrl) {
+        const splitUrl = currentUrl.split('/');
+        if (splitUrl[2]) {
+            this.mySpaceActiveTab = splitUrl[2].includes('?')
+                ? splitUrl[2].split('?')[0]
+                : splitUrl[2];
+        }
+    }
+    getKpisValuesFromUrl(currentUrl) {
+        const splitUrl = currentUrl.split('/');
+        if (splitUrl[3]) {
+            this.kpiTemplateId = splitUrl[2].includes('?')
+                ? splitUrl[2].split('?')[0]
+                : splitUrl[2];
+            this.kpiSchemaId = splitUrl[3].includes('?')
+                ? splitUrl[3].split('?')[0]
+                : splitUrl[3];
+        }
+    }
+    getInitiativesValuesFromUrl(currentUrl) {
+        const splitUrl = currentUrl.split('/');
+        if (splitUrl[3]) {
+            this.initiativesTemplateId = splitUrl[2].includes('?')
+                ? splitUrl[2].split('?')[0]
+                : splitUrl[2];
+            this.initiativesSchemaId = splitUrl[3].includes('?')
+                ? splitUrl[3].split('?')[0]
+                : splitUrl[3];
+        }
+    }
+    getStrategyValuesFromUrl(currentUrl) {
+        const splitUrl = currentUrl.split('/');
+        if (splitUrl[3]) {
+            this.strategyTemplateId = splitUrl[2].includes('?')
+                ? splitUrl[2].split('?')[0]
+                : splitUrl[2];
+        }
+    }
+    extractCanvasJson(markdown) {
+        if (!markdown) {
+            return null;
+        }
+        const regex = /```canvas\s*([\s\S]*?)\s*```/;
+        const match = markdown.match(regex);
+        if (!match?.[1]) {
+            return null;
+        }
+        try {
+            return JSON.parse(match[1].trim());
+        }
+        catch {
+            return null;
+        }
+    }
+    generateIframUrl(message, conversationId) {
+        const canvasJson = this.extractCanvasJson(message?.content);
+        if (!canvasJson) {
+            return '';
+        }
+        switch (canvasJson.agent) {
+            case 'kpi-data-agent':
+                return `${this.baseUrl}/agents/quality-guard?id=${canvasJson?.payload?.id}&name=${canvasJson?.payload?.name}&description=${canvasJson?.payload?.description}&session_id=${conversationId}&auth_token=${this.currentToken}&router_message_id=${message?.message_id}`;
+            case 'kpi-benchmark-agent':
+                return `${this.baseUrl}/agents/benchmarking-agent?id=${canvasJson?.payload?.id}&name=${canvasJson?.payload?.name}&session_id=${conversationId}&auth_token=${this.currentToken}&router_message_id=${message?.message_id}`;
+            case 'kpi-summary-agent':
+                return `${this.baseUrl}/agents/executive-summary?id=${canvasJson?.payload?.id}&name=${canvasJson?.payload?.name}&session_id=${conversationId}&auth_token=${this.currentToken}&router_message_id=${message?.message_id}`;
+            default:
+                return '';
+        }
+    }
+    sendMessage(message) {
+        const url = `${this.baseUrl}/chat`;
+        const body = {
+            user_message: message,
+            session_id: this.sessionId,
+            user_name: this.currentUserName,
+            user_id: this.currentUserId,
+            current_view: this.buildCurrentView(),
+        };
+        return this.http.post(url, body, { context: this.requestContext }).pipe(map((res) => {
+            if (res?.data && typeof res.data === 'object') {
+                return {
+                    ...res,
+                    ...res.data,
+                };
+            }
+            return res;
+        }), tap((res) => {
+            if (res?.session_id) {
+                this.sessionId = res.session_id;
+                setTimeout(() => {
+                    this.getUserDetails().subscribe();
+                }, 150);
+            }
+        }));
+    }
+    clearSession() {
+        this.sessionId = null;
+    }
+    getUserDetails() {
+        if (!this.currentUserId) {
+            this.conversations.next([]);
+            return of({ conversations: [] });
+        }
+        const url = `${this.baseUrl}/users/${this.currentUserId}`;
+        return this.http.get(url, { context: this.requestContext }).pipe(map((res) => {
+            const conversations = this.resolveConversationsPayload(res).map((conversation) => this.normalizeConversation(conversation));
+            return { conversations };
+        }), tap((res) => {
+            this.conversations.next(res.conversations);
+        }));
+    }
+    getConversationDetails(sessionId) {
+        this.sessionId = sessionId;
+        const url = `${this.baseUrl}/conversations/${sessionId}`;
+        return this.http
+            .get(url, { context: this.requestContext })
+            .pipe(map((res) => this.resolveConversationMessagesPayload(res).map((item) => this.normalizeConversationMessage(item))));
+    }
+    deleteConversation(sessionId) {
+        const url = `${this.baseUrl}/conversations/${sessionId}`;
+        return this.http.delete(url, { context: this.requestContext });
+    }
+    copyToClipboard(content) {
+        if (!content || typeof content !== 'string') {
+            this.toast.error('Failed to copy content');
+            return;
+        }
+        navigator.clipboard
+            .writeText(content)
+            .then(() => {
+            this.toast.success('Content copied to clipboard');
+        })
+            .catch(() => {
+            this.toast.error('Failed to copy content');
+        });
+    }
+    downloadDocument(item) {
+        const url = `${this.baseUrl}/download-docx/${item.message_id}`;
+        return this.http
+            .get(url, { responseType: 'blob', context: this.requestContext })
+            .pipe(tap((res) => {
+            const blobUrl = window.URL.createObjectURL(res);
+            const link = document.createElement('a');
+            link.href = blobUrl;
+            link.download = `faris-response-${item.message_id}.docx`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            window.URL.revokeObjectURL(blobUrl);
+        }));
+    }
+    sendFeedback(messageId, score, traceId, feedback) {
+        if (!this.sessionId) {
+            return EMPTY;
+        }
+        const url = `${this.baseUrl}/feedback`;
+        const body = {
+            session_id: this.sessionId,
+            message_id: messageId,
+            score,
+            trace_id: traceId,
+            feedback,
+        };
+        return this.http.post(url, body, { context: this.requestContext }).pipe(tap(() => {
+            this.getUserDetails().subscribe();
+        }));
+    }
+    generate() {
+        return this.generator();
+    }
+    buildCurrentView() {
+        let currentView = { page: 'Home' };
+        if (this.mySpaceActiveTab) {
+            currentView = {
+                page: 'tasks-center',
+                Module: this.mySpaceActiveTab === 'Support'
+                    ? 'escalation'
+                    : this.mySpaceActiveTab.toLowerCase(),
+            };
+        }
+        if (this.kpiSchemaId && this.kpiTemplateId) {
+            currentView = {
+                page: 'kpis',
+                schemaId: this.kpiSchemaId,
+                templateId: this.kpiTemplateId,
+            };
+        }
+        if (this.initiativesTemplateId && this.initiativesSchemaId) {
+            currentView = {
+                page: 'initiatives',
+                schemaId: this.initiativesSchemaId,
+                templateId: this.initiativesTemplateId,
+            };
+        }
+        if (this.strategyTemplateId) {
+            currentView = {
+                page: 'strategy',
+                templateId: this.strategyTemplateId,
+            };
+        }
+        if (this.activeModuleId) {
+            currentView['ModuleId'] = this.activeModuleId;
+        }
+        return currentView;
+    }
+    resolveCurrentUserDetails() {
+        const user = this.currentUser;
+        return user?.user ?? user?.data?.user ?? user ?? null;
+    }
+    resolveConversationsPayload(res) {
+        const candidates = [
+            res,
+            res?.conversations,
+            res?.data?.conversations,
+            res?.data?.items,
+            res?.data,
+            res?.result?.conversations,
+            res?.result,
+            res?.payload?.conversations,
+            res?.payload,
+        ];
+        for (const candidate of candidates) {
+            if (Array.isArray(candidate)) {
+                return candidate;
+            }
+        }
+        return [];
+    }
+    normalizeConversation(conversation) {
+        const resolvedId = conversation?.id ??
+            conversation?.session_id ??
+            conversation?.sessionId ??
+            conversation?.conversation_id ??
+            conversation?.conversationId;
+        const resolvedUpdatedAt = conversation?.updated_at ??
+            conversation?.updatedAt ??
+            conversation?.last_updated_at ??
+            conversation?.lastUpdatedAt ??
+            conversation?.created_at ??
+            conversation?.createdAt ??
+            conversation?.timestamp ??
+            conversation?.date ??
+            null;
+        const resolvedTitle = conversation?.title ??
+            conversation?.conversation_title ??
+            conversation?.conversationTitle ??
+            conversation?.name ??
+            conversation?.subject ??
+            '';
+        return {
+            ...conversation,
+            id: resolvedId == null ? '' : String(resolvedId),
+            updated_at: resolvedUpdatedAt,
+            title: resolvedTitle,
+        };
+    }
+    resolveConversationMessagesPayload(res) {
+        const candidates = [
+            res,
+            res?.messages,
+            res?.conversation,
+            res?.data?.messages,
+            res?.data?.conversation,
+            res?.data,
+            res?.result?.messages,
+            res?.result,
+            res?.payload?.messages,
+            res?.payload,
+        ];
+        for (const candidate of candidates) {
+            if (Array.isArray(candidate)) {
+                return candidate;
+            }
+        }
+        return [];
+    }
+    normalizeConversationMessage(item) {
+        const normalizedRole = this.resolveMessageRole(item);
+        return {
+            ...item,
+            role: normalizedRole,
+            content: item?.content ?? item?.message ?? item?.text ?? '',
+            message_id: item?.message_id ??
+                item?.messageId ??
+                item?.id ??
+                item?.router_message_id,
+            trace_id: item?.trace_id ?? item?.traceId,
+            score: item?.score ?? null,
+            feedback: item?.feedback ?? null,
+        };
+    }
+    resolveMessageRole(item) {
+        const role = item?.role ?? item?.sender ?? item?.messageRole ?? item?.message_role;
+        if (role === 'user' || role === 'assistant') {
+            return role;
+        }
+        if (typeof role === 'string') {
+            const normalized = role.toLowerCase();
+            if (normalized.includes('assistant') ||
+                normalized.includes('bot') ||
+                normalized.includes('ai') ||
+                normalized.includes('system')) {
+                return 'assistant';
+            }
+        }
+        if (item?.is_user === true || item?.fromUser === true) {
+            return 'user';
+        }
+        return 'assistant';
+    }
+    generator() {
+        return `${this.s4()}${this.s4()}-${this.s4()}-${this.s4()}-${this.s4()}-${this.s4()}${this.s4()}${this.s4()}`;
+    }
+    s4() {
+        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class FarisCanvasComponent {
+    message = null;
+    conversationId = null;
+    closed = new EventEmitter();
+    loading = true;
+    iframeUrl = null;
+    farisService = inject(FarisService);
+    sanitizer = inject(DomSanitizer);
+    ngOnInit() {
+        this.setIframeUrl();
+        this.loading = true;
+    }
+    ngOnChanges() {
+        this.setIframeUrl();
+        this.loading = true;
+    }
+    onIframeLoad() {
+        this.loading = false;
+    }
+    closeCanvas() {
+        this.closed.emit();
+    }
+    setIframeUrl() {
+        const url = this.farisService.generateIframUrl(this.message, this.conversationId);
+        this.iframeUrl = url
+            ? this.sanitizer.bypassSecurityTrustResourceUrl(url)
+            : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FarisCanvasComponent, isStandalone: true, selector: "mt-faris-canvas", inputs: { message: "message", conversationId: "conversationId" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "@if (iframeUrl) {\r\n  <div class=\"faris-canvas-frame\">\r\n    <div class=\"faris-canvas-frame-header\">\r\n      <mt-button\r\n        type=\"button\"\r\n        icon=\"general.x-close\"\r\n        variant=\"text\"\r\n        styleClass=\"faris-btn\"\r\n        aria-label=\"Close Canvas\"\r\n        (click)=\"closeCanvas()\"\r\n      ></mt-button>\r\n    </div>\r\n\r\n    <div class=\"faris-canvas-iframe-container\">\r\n      @if (loading) {\r\n        <div class=\"iframe-loading\">\r\n          <div\r\n            class=\"h-6 w-6 animate-spin rounded-full border-2 border-slate-300 border-t-[var(--primary-color)]\"\r\n          ></div>\r\n        </div>\r\n      }\r\n\r\n      <iframe\r\n        [src]=\"iframeUrl\"\r\n        width=\"100%\"\r\n        height=\"100vh\"\r\n        frameborder=\"0\"\r\n        allowfullscreen\r\n        (load)=\"onIframeLoad()\"\r\n      ></iframe>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div class=\"faris-canvas-empty p-4 text-sm text-slate-600\">\r\n    {{ \"faris.unable-to-load-content\" | translate }}\r\n  </div>\r\n}\r\n", styles: [":host{background-color:#fff;padding:.25em}.faris-canvas-frame{border:2px solid lightgray;border-radius:var(--faris-border-radius);background:#fff;overflow:hidden;position:relative;height:calc(100vh - 1em);display:flex;flex-direction:column}.faris-canvas-frame-header{display:flex;justify-content:flex-end;align-items:center;background:#f7f9fa;border-bottom:1px solid #e0e0e0;padding:.5em 1em;min-height:48px;z-index:10}.faris-canvas-iframe-container{height:100%;width:100%;position:relative;flex:1 1 auto}.faris-canvas-iframe-container .iframe-loading{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2;background:#ffffffb3}.faris-canvas-iframe-container iframe{border:none;min-height:400px;height:100%;width:100%;display:block}.faris-canvas-iframe-container .spinner-border{width:1.25em;height:1.25em}\n"], dependencies: [{ kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: FarisTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisCanvasComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-faris-canvas', standalone: true, imports: [FarisTranslatePipe, Button], template: "@if (iframeUrl) {\r\n  <div class=\"faris-canvas-frame\">\r\n    <div class=\"faris-canvas-frame-header\">\r\n      <mt-button\r\n        type=\"button\"\r\n        icon=\"general.x-close\"\r\n        variant=\"text\"\r\n        styleClass=\"faris-btn\"\r\n        aria-label=\"Close Canvas\"\r\n        (click)=\"closeCanvas()\"\r\n      ></mt-button>\r\n    </div>\r\n\r\n    <div class=\"faris-canvas-iframe-container\">\r\n      @if (loading) {\r\n        <div class=\"iframe-loading\">\r\n          <div\r\n            class=\"h-6 w-6 animate-spin rounded-full border-2 border-slate-300 border-t-[var(--primary-color)]\"\r\n          ></div>\r\n        </div>\r\n      }\r\n\r\n      <iframe\r\n        [src]=\"iframeUrl\"\r\n        width=\"100%\"\r\n        height=\"100vh\"\r\n        frameborder=\"0\"\r\n        allowfullscreen\r\n        (load)=\"onIframeLoad()\"\r\n      ></iframe>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div class=\"faris-canvas-empty p-4 text-sm text-slate-600\">\r\n    {{ \"faris.unable-to-load-content\" | translate }}\r\n  </div>\r\n}\r\n", styles: [":host{background-color:#fff;padding:.25em}.faris-canvas-frame{border:2px solid lightgray;border-radius:var(--faris-border-radius);background:#fff;overflow:hidden;position:relative;height:calc(100vh - 1em);display:flex;flex-direction:column}.faris-canvas-frame-header{display:flex;justify-content:flex-end;align-items:center;background:#f7f9fa;border-bottom:1px solid #e0e0e0;padding:.5em 1em;min-height:48px;z-index:10}.faris-canvas-iframe-container{height:100%;width:100%;position:relative;flex:1 1 auto}.faris-canvas-iframe-container .iframe-loading{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2;background:#ffffffb3}.faris-canvas-iframe-container iframe{border:none;min-height:400px;height:100%;width:100%;display:block}.faris-canvas-iframe-container .spinner-border{width:1.25em;height:1.25em}\n"] }]
+        }], propDecorators: { message: [{
+                type: Input
+            }], conversationId: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }] } });
+
+class AgentCardComponent {
+    agent;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AgentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: AgentCardComponent, isStandalone: true, selector: "mt-faris-agent-card", inputs: { agent: "agent" }, ngImport: i0, template: "<div\r\n  class=\"flex cursor-pointer items-center gap-3 rounded-md border border-slate-200 bg-slate-50 px-2 py-2 transition hover:bg-slate-100\"\r\n  [style.border-color]=\"agent?.color || null\"\r\n>\r\n  <img\r\n    class=\"h-10 w-10 rounded object-contain p-1\"\r\n    [src]=\"agent?.icon\"\r\n    alt=\"\"\r\n  />\r\n  <div class=\"text-sm leading-5\">\r\n    <strong class=\"block text-slate-900\">{{ agent?.title }}</strong>\r\n    <p class=\"m-0 text-slate-600\">{{ agent?.desc }}</p>\r\n  </div>\r\n</div>\r\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AgentCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-faris-agent-card', standalone: true, template: "<div\r\n  class=\"flex cursor-pointer items-center gap-3 rounded-md border border-slate-200 bg-slate-50 px-2 py-2 transition hover:bg-slate-100\"\r\n  [style.border-color]=\"agent?.color || null\"\r\n>\r\n  <img\r\n    class=\"h-10 w-10 rounded object-contain p-1\"\r\n    [src]=\"agent?.icon\"\r\n    alt=\"\"\r\n  />\r\n  <div class=\"text-sm leading-5\">\r\n    <strong class=\"block text-slate-900\">{{ agent?.title }}</strong>\r\n    <p class=\"m-0 text-slate-600\">{{ agent?.desc }}</p>\r\n  </div>\r\n</div>\r\n" }]
+        }], propDecorators: { agent: [{
+                type: Input
+            }] } });
+
+class FarisMarkdownPipe {
+    sanitizer = inject(DomSanitizer);
+    transform(value) {
+        const source = this.toStringValue(value);
+        if (!source) {
+            return '';
+        }
+        const escaped = this.escapeHtml(source).replace(/\r\n/g, '\n');
+        const html = this.toHtml(escaped);
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+    toHtml(content) {
+        let html = content;
+        html = html.replace(/```canvas\s*[\s\S]*?```/gi, '');
+        html = html.replace(/```chart\s*([\s\S]*?)```/gi, (_match, code) => {
+            const payload = encodeURIComponent(code.trim());
+            return `<div class="chart-placeholder" data-options="${payload}"></div>`;
+        });
+        html = html.replace(/```([a-zA-Z0-9_-]+)?\s*([\s\S]*?)```/g, (_match, lang, code) => `<pre class="faris-code"><code class="language-${lang ?? 'plain'}">${code.trim()}</code></pre>`);
+        html = html.replace(/^###\s+(.+)$/gm, '<h3>$1</h3>');
+        html = html.replace(/^##\s+(.+)$/gm, '<h2>$1</h2>');
+        html = html.replace(/^#\s+(.+)$/gm, '<h1>$1</h1>');
+        html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+        html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+        html = html.replace(/\[(.+?)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+        return html.replace(/\n/g, '<br>');
+    }
+    toStringValue(value) {
+        if (typeof value === 'string') {
+            return value;
+        }
+        if (value == null) {
+            return '';
+        }
+        try {
+            return JSON.stringify(value, null, 2);
+        }
+        catch {
+            return String(value);
+        }
+    }
+    escapeHtml(content) {
+        return content
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisMarkdownPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: FarisMarkdownPipe, isStandalone: true, name: "farisMarkdown" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisMarkdownPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'farisMarkdown',
+                    standalone: true,
+                }]
+        }] });
+
+class FarisMessageActionsComponent {
+    currentVote = null;
+    canvasMessage = false;
+    downloading = false;
+    action = new EventEmitter();
+    emitAction(action) {
+        this.action.emit(action);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisMessageActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FarisMessageActionsComponent, isStandalone: true, selector: "mt-faris-message-actions", inputs: { currentVote: "currentVote", canvasMessage: "canvasMessage", downloading: "downloading" }, outputs: { action: "action" }, ngImport: i0, template: "<div class=\"feedback-controls mt-3 flex items-center gap-1\">\r\n  <mt-button\r\n    type=\"button\"\r\n    icon=\"general.copy-01\"\r\n    variant=\"text\"\r\n    styleClass=\"faris-btn faris-btn-muted\"\r\n    [tooltip]=\"'faris.copy-response' | translate\"\r\n    (click)=\"emitAction('copy')\"\r\n  ></mt-button>\r\n\r\n  @if (!canvasMessage) {\r\n    <mt-button\r\n      type=\"button\"\r\n      icon=\"file.file-plus-01\"\r\n      variant=\"text\"\r\n      styleClass=\"faris-btn faris-btn-muted\"\r\n      [loading]=\"downloading\"\r\n      [tooltip]=\"'faris.create-document' | translate\"\r\n      (click)=\"emitAction('download')\"\r\n    ></mt-button>\r\n  }\r\n\r\n  <mt-button\r\n    type=\"button\"\r\n    icon=\"arrow.refresh-cw-01\"\r\n    variant=\"text\"\r\n    styleClass=\"faris-btn faris-btn-muted\"\r\n    [tooltip]=\"'faris.retry-response' | translate\"\r\n    (click)=\"emitAction('retry')\"\r\n  ></mt-button>\r\n\r\n  <div class=\"feedback-separator mx-1 h-6 w-px bg-black/10\"></div>\r\n\r\n  <mt-button\r\n    type=\"button\"\r\n    icon=\"alert.thumbs-up\"\r\n    variant=\"text\"\r\n    [styleClass]=\"\r\n      'faris-btn faris-btn-muted like' +\r\n      (currentVote === 'like' ? ' text-green-600' : '')\r\n    \"\r\n    [tooltip]=\"'faris.helpful' | translate\"\r\n    (click)=\"emitAction('like')\"\r\n  ></mt-button>\r\n\r\n  <mt-button\r\n    type=\"button\"\r\n    icon=\"alert.thumbs-down\"\r\n    variant=\"text\"\r\n    [styleClass]=\"\r\n      'faris-btn faris-btn-muted dislike' +\r\n      (currentVote === 'dislike' ? ' text-red-600' : '')\r\n    \"\r\n    [tooltip]=\"'faris.not-helpful' | translate\"\r\n    (click)=\"emitAction('dislike')\"\r\n  ></mt-button>\r\n</div>\r\n", styles: [".feedback-controls{display:flex;align-items:center;margin-top:.75em;gap:.25em}.faris-btn.like:hover{background-color:rgb(from var(--success) r g b / 10%)}.faris-btn.dislike:hover{background-color:rgb(from var(--danger) r g b / 10%)}.feedback-separator{width:1px;height:1.5em;background-color:#0000001a;margin:0 .25em}\n"], dependencies: [{ kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: FarisTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisMessageActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-faris-message-actions', standalone: true, imports: [FarisTranslatePipe, Button], template: "<div class=\"feedback-controls mt-3 flex items-center gap-1\">\r\n  <mt-button\r\n    type=\"button\"\r\n    icon=\"general.copy-01\"\r\n    variant=\"text\"\r\n    styleClass=\"faris-btn faris-btn-muted\"\r\n    [tooltip]=\"'faris.copy-response' | translate\"\r\n    (click)=\"emitAction('copy')\"\r\n  ></mt-button>\r\n\r\n  @if (!canvasMessage) {\r\n    <mt-button\r\n      type=\"button\"\r\n      icon=\"file.file-plus-01\"\r\n      variant=\"text\"\r\n      styleClass=\"faris-btn faris-btn-muted\"\r\n      [loading]=\"downloading\"\r\n      [tooltip]=\"'faris.create-document' | translate\"\r\n      (click)=\"emitAction('download')\"\r\n    ></mt-button>\r\n  }\r\n\r\n  <mt-button\r\n    type=\"button\"\r\n    icon=\"arrow.refresh-cw-01\"\r\n    variant=\"text\"\r\n    styleClass=\"faris-btn faris-btn-muted\"\r\n    [tooltip]=\"'faris.retry-response' | translate\"\r\n    (click)=\"emitAction('retry')\"\r\n  ></mt-button>\r\n\r\n  <div class=\"feedback-separator mx-1 h-6 w-px bg-black/10\"></div>\r\n\r\n  <mt-button\r\n    type=\"button\"\r\n    icon=\"alert.thumbs-up\"\r\n    variant=\"text\"\r\n    [styleClass]=\"\r\n      'faris-btn faris-btn-muted like' +\r\n      (currentVote === 'like' ? ' text-green-600' : '')\r\n    \"\r\n    [tooltip]=\"'faris.helpful' | translate\"\r\n    (click)=\"emitAction('like')\"\r\n  ></mt-button>\r\n\r\n  <mt-button\r\n    type=\"button\"\r\n    icon=\"alert.thumbs-down\"\r\n    variant=\"text\"\r\n    [styleClass]=\"\r\n      'faris-btn faris-btn-muted dislike' +\r\n      (currentVote === 'dislike' ? ' text-red-600' : '')\r\n    \"\r\n    [tooltip]=\"'faris.not-helpful' | translate\"\r\n    (click)=\"emitAction('dislike')\"\r\n  ></mt-button>\r\n</div>\r\n", styles: [".feedback-controls{display:flex;align-items:center;margin-top:.75em;gap:.25em}.faris-btn.like:hover{background-color:rgb(from var(--success) r g b / 10%)}.faris-btn.dislike:hover{background-color:rgb(from var(--danger) r g b / 10%)}.feedback-separator{width:1px;height:1.5em;background-color:#0000001a;margin:0 .25em}\n"] }]
+        }], propDecorators: { currentVote: [{
+                type: Input
+            }], canvasMessage: [{
+                type: Input
+            }], downloading: [{
+                type: Input
+            }], action: [{
+                type: Output
+            }] } });
+
+class ParseMentionPipe {
+    transform(value) {
+        if (!value) {
+            return '';
+        }
+        const regex = /@{{({.*?})}}/g;
+        return value.replace(regex, (match, jsonString) => {
+            try {
+                const jsonObject = JSON.parse(jsonString);
+                return `@${jsonObject.title}`;
+            }
+            catch {
+                return match;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ParseMentionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: ParseMentionPipe, isStandalone: true, name: "parseMention" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ParseMentionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'parseMention',
+                    standalone: true,
+                }]
+        }] });
+
+class FarisMessageComponent {
+    item;
+    currentUserPhoto = '';
+    loading = false;
+    thinkingText = '';
+    fallbackUserPhoto = 'data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"><circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"%23e2e8f0\"/><circle cx=\"20\" cy=\"15\" r=\"7\" fill=\"%2394a3b8\"/><path d=\"M8 34c2.5-6 7.5-9 12-9s9.5 3 12 9\" fill=\"%2394a3b8\"/></svg>';
+    action = new EventEmitter();
+    canvas = new EventEmitter();
+    canvasMessage = false;
+    downloading = false;
+    farisService = inject(FarisService);
+    ngOnInit() {
+        this.canvasMessage = this.resolveContent(this.item?.content).includes('```canvas');
+    }
+    takeAction(action, item) {
+        if (action === 'download') {
+            this.downloadDocument(item);
+        }
+        this.action.emit({ action, item });
+    }
+    launchCanvas() {
+        this.canvas.emit(this.item);
+    }
+    setFallbackUserPhoto() {
+        this.currentUserPhoto = this.fallbackUserPhoto;
+    }
+    downloadDocument(item) {
+        this.downloading = true;
+        this.farisService
+            .downloadDocument(item)
+            .pipe(finalize(() => (this.downloading = false)))
+            .subscribe();
+    }
+    resolveContent(content) {
+        if (typeof content === 'string') {
+            return content;
+        }
+        if (content == null) {
+            return '';
+        }
+        try {
+            return JSON.stringify(content);
+        }
+        catch {
+            return String(content);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FarisMessageComponent, isStandalone: true, selector: "mt-faris-message", inputs: { item: "item", currentUserPhoto: "currentUserPhoto", loading: "loading", thinkingText: "thinkingText" }, outputs: { action: "action", canvas: "canvas" }, ngImport: i0, template: "@if (item.role === \"user\") {\r\n  <div class=\"faris-message\">\r\n    <img\r\n      [src]=\"currentUserPhoto || fallbackUserPhoto\"\r\n      (error)=\"setFallbackUserPhoto()\"\r\n      class=\"rounded-full user-img-md\"\r\n      alt=\"\"\r\n    />\r\n    <div\r\n      class=\"result-markdown result-width user\"\r\n      [innerHTML]=\"item.content | parseMention | farisMarkdown\"\r\n    ></div>\r\n  </div>\r\n}\r\n\r\n@if (item.role === \"assistant\") {\r\n  <div class=\"faris-message\">\r\n    <div class=\"gemini-ic\" [class.thinking]=\"loading && !item.loaded\">\r\n      <svg\r\n        focusable=\"false\"\r\n        viewBox=\"0 -960 960 960\"\r\n        height=\"28\"\r\n        width=\"28\"\r\n        class=\"EiVpKc aoH\"\r\n      >\r\n        <path\r\n          d=\"M480-80q2,0 2-2q0-82 31-154t85-126t126-85t154-31q2,0 2-2t-2-2q-82,0-154-31T598-598T513-724T482-878q0-2-2-2t-2,2q0,82-31,154T362-598T236-513T82-482q-2,0-2,2t2,2q82,0 154,31t126,85t85,126T478-82q0,2 2,2Z\"\r\n        ></path>\r\n      </svg>\r\n    </div>\r\n\r\n    <div class=\"flex w-[85%] max-w-[98%] flex-col\">\r\n      @if (!loading || item.loaded) {\r\n        <div class=\"w-full\">\r\n          <div\r\n            class=\"result-markdown faris\"\r\n            [innerHTML]=\"item.content | farisMarkdown\"\r\n          ></div>\r\n\r\n          @if (canvasMessage) {\r\n            <mt-button\r\n              type=\"button\"\r\n              [label]=\"'faris.launch-canvas' | translate\"\r\n              variant=\"outlined\"\r\n              size=\"small\"\r\n              styleClass=\"mt-2\"\r\n              (click)=\"launchCanvas()\"\r\n            ></mt-button>\r\n          }\r\n\r\n          <mt-faris-message-actions\r\n            [downloading]=\"downloading\"\r\n            [canvasMessage]=\"canvasMessage\"\r\n            [currentVote]=\"\r\n              item.feedback === '1'\r\n                ? 'like'\r\n                : item.feedback === '-1'\r\n                  ? 'dislike'\r\n                  : null\r\n            \"\r\n            (action)=\"takeAction($event, item)\"\r\n          >\r\n          </mt-faris-message-actions>\r\n        </div>\r\n      }\r\n\r\n      @if (loading && !item.loaded) {\r\n        <div class=\"thinking-text\">{{ thinkingText }}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";@keyframes thinking-animation{0%{filter:drop-shadow(0 0 2px rgba(74,144,226,.5))}50%{filter:drop-shadow(0 0 8px rgb(123,207,255))}to{filter:drop-shadow(0 0 2px rgba(74,144,226,.5))}}@keyframes thinking-text-animation{0%{background-position:0% 50%}to{background-position:100% 50%}}.faris-message{display:flex;gap:1em}.user-img-md{height:24px;width:24px;object-fit:cover}.result-width{width:85%;max-width:98%}.result-markdown{padding:10px;border-radius:var(--faris-lg-border-radius);overflow-wrap:anywhere}.result-markdown pre.faris-code{margin:8px 0;overflow-x:auto;border-radius:var(--faris-sm-border-radius);background:#f6f8fa;padding:8px}.result-markdown code{border-radius:var(--faris-sm-border-radius);background:#f6f8fa;padding:2px 4px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.85em}.result-markdown h1,.result-markdown h2,.result-markdown h3{margin:10px 0 6px;font-weight:600;line-height:1.3}.result-markdown h1{font-size:1.1em}.result-markdown h2{font-size:1em}.result-markdown h3{font-size:.95em}.result-markdown a{color:var(--primary-color);text-decoration:underline}.result-markdown.user{background-color:var(--primary-color, #e9eef6);color:#fff}.result-markdown.faris{border:1px solid #dfe2e5}::ng-deep .md-table-wrapper{width:100%;overflow-y:auto}::ng-deep .gemini-ic.thinking{animation:thinking-animation 2s infinite}.thinking-text{background:linear-gradient(to right,#a3a3a3 20%,#c3c3c3 30%,#f0f0f0 50%,#f8f8f8,#f0f0f0,#c3c3c3 80%,#a3a3a3);animation:thinking-text-animation 1.5s infinite linear;-webkit-background-clip:text;background-clip:text;background-size:500% auto;color:transparent;font-size:1em}.thinking-text:after{overflow:hidden;display:inline-block;vertical-align:bottom;content:\"\\2026\";color:#f8f8f8;width:0;animation:ellipsis .9s infinite steps(4,end)}@keyframes ellipsis{to{width:1.25em}}\n"], dependencies: [{ kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FarisMessageActionsComponent, selector: "mt-faris-message-actions", inputs: ["currentVote", "canvasMessage", "downloading"], outputs: ["action"] }, { kind: "pipe", type: ParseMentionPipe, name: "parseMention" }, { kind: "pipe", type: FarisTranslatePipe, name: "translate" }, { kind: "pipe", type: FarisMarkdownPipe, name: "farisMarkdown" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-faris-message', standalone: true, imports: [
+                        Button,
+                        ParseMentionPipe,
+                        FarisTranslatePipe,
+                        FarisMarkdownPipe,
+                        FarisMessageActionsComponent,
+                    ], template: "@if (item.role === \"user\") {\r\n  <div class=\"faris-message\">\r\n    <img\r\n      [src]=\"currentUserPhoto || fallbackUserPhoto\"\r\n      (error)=\"setFallbackUserPhoto()\"\r\n      class=\"rounded-full user-img-md\"\r\n      alt=\"\"\r\n    />\r\n    <div\r\n      class=\"result-markdown result-width user\"\r\n      [innerHTML]=\"item.content | parseMention | farisMarkdown\"\r\n    ></div>\r\n  </div>\r\n}\r\n\r\n@if (item.role === \"assistant\") {\r\n  <div class=\"faris-message\">\r\n    <div class=\"gemini-ic\" [class.thinking]=\"loading && !item.loaded\">\r\n      <svg\r\n        focusable=\"false\"\r\n        viewBox=\"0 -960 960 960\"\r\n        height=\"28\"\r\n        width=\"28\"\r\n        class=\"EiVpKc aoH\"\r\n      >\r\n        <path\r\n          d=\"M480-80q2,0 2-2q0-82 31-154t85-126t126-85t154-31q2,0 2-2t-2-2q-82,0-154-31T598-598T513-724T482-878q0-2-2-2t-2,2q0,82-31,154T362-598T236-513T82-482q-2,0-2,2t2,2q82,0 154,31t126,85t85,126T478-82q0,2 2,2Z\"\r\n        ></path>\r\n      </svg>\r\n    </div>\r\n\r\n    <div class=\"flex w-[85%] max-w-[98%] flex-col\">\r\n      @if (!loading || item.loaded) {\r\n        <div class=\"w-full\">\r\n          <div\r\n            class=\"result-markdown faris\"\r\n            [innerHTML]=\"item.content | farisMarkdown\"\r\n          ></div>\r\n\r\n          @if (canvasMessage) {\r\n            <mt-button\r\n              type=\"button\"\r\n              [label]=\"'faris.launch-canvas' | translate\"\r\n              variant=\"outlined\"\r\n              size=\"small\"\r\n              styleClass=\"mt-2\"\r\n              (click)=\"launchCanvas()\"\r\n            ></mt-button>\r\n          }\r\n\r\n          <mt-faris-message-actions\r\n            [downloading]=\"downloading\"\r\n            [canvasMessage]=\"canvasMessage\"\r\n            [currentVote]=\"\r\n              item.feedback === '1'\r\n                ? 'like'\r\n                : item.feedback === '-1'\r\n                  ? 'dislike'\r\n                  : null\r\n            \"\r\n            (action)=\"takeAction($event, item)\"\r\n          >\r\n          </mt-faris-message-actions>\r\n        </div>\r\n      }\r\n\r\n      @if (loading && !item.loaded) {\r\n        <div class=\"thinking-text\">{{ thinkingText }}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";@keyframes thinking-animation{0%{filter:drop-shadow(0 0 2px rgba(74,144,226,.5))}50%{filter:drop-shadow(0 0 8px rgb(123,207,255))}to{filter:drop-shadow(0 0 2px rgba(74,144,226,.5))}}@keyframes thinking-text-animation{0%{background-position:0% 50%}to{background-position:100% 50%}}.faris-message{display:flex;gap:1em}.user-img-md{height:24px;width:24px;object-fit:cover}.result-width{width:85%;max-width:98%}.result-markdown{padding:10px;border-radius:var(--faris-lg-border-radius);overflow-wrap:anywhere}.result-markdown pre.faris-code{margin:8px 0;overflow-x:auto;border-radius:var(--faris-sm-border-radius);background:#f6f8fa;padding:8px}.result-markdown code{border-radius:var(--faris-sm-border-radius);background:#f6f8fa;padding:2px 4px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.85em}.result-markdown h1,.result-markdown h2,.result-markdown h3{margin:10px 0 6px;font-weight:600;line-height:1.3}.result-markdown h1{font-size:1.1em}.result-markdown h2{font-size:1em}.result-markdown h3{font-size:.95em}.result-markdown a{color:var(--primary-color);text-decoration:underline}.result-markdown.user{background-color:var(--primary-color, #e9eef6);color:#fff}.result-markdown.faris{border:1px solid #dfe2e5}::ng-deep .md-table-wrapper{width:100%;overflow-y:auto}::ng-deep .gemini-ic.thinking{animation:thinking-animation 2s infinite}.thinking-text{background:linear-gradient(to right,#a3a3a3 20%,#c3c3c3 30%,#f0f0f0 50%,#f8f8f8,#f0f0f0,#c3c3c3 80%,#a3a3a3);animation:thinking-text-animation 1.5s infinite linear;-webkit-background-clip:text;background-clip:text;background-size:500% auto;color:transparent;font-size:1em}.thinking-text:after{overflow:hidden;display:inline-block;vertical-align:bottom;content:\"\\2026\";color:#f8f8f8;width:0;animation:ellipsis .9s infinite steps(4,end)}@keyframes ellipsis{to{width:1.25em}}\n"] }]
+        }], propDecorators: { item: [{
+                type: Input
+            }], currentUserPhoto: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], thinkingText: [{
+                type: Input
+            }], action: [{
+                type: Output
+            }], canvas: [{
+                type: Output
+            }] } });
+
+class MentionApiService {
+    baseUrl = '';
+    http = inject(HttpClient);
+    constructor() {
+        let url = resolveFarisUrlFromLocalStorage();
+        if (url.endsWith('/')) {
+            url = url.slice(0, -1);
+        }
+        this.baseUrl = url;
+    }
+    search(term) {
+        return this.http.get(`${this.baseUrl}/search`, {
+            params: { query: term },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MentionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MentionApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MentionApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class MentionListComponent {
+    items = [];
+    loading = false;
+    itemSelected = new EventEmitter();
+    activeIndex = 0;
+    ngOnChanges() {
+        this.activeIndex = 0;
+        setTimeout(() => this.scrollActiveItemIntoView(), 0);
+    }
+    onItemClick(event, item) {
+        event.preventDefault();
+        this.itemSelected.emit(item);
+    }
+    moveActiveUp() {
+        if (!this.items.length) {
+            return;
+        }
+        this.activeIndex =
+            (this.activeIndex - 1 + this.items.length) % this.items.length;
+        this.scrollActiveItemIntoView();
+    }
+    moveActiveDown() {
+        if (!this.items.length) {
+            return;
+        }
+        this.activeIndex = (this.activeIndex + 1) % this.items.length;
+        this.scrollActiveItemIntoView();
+    }
+    selectActiveItem() {
+        if (!this.items.length) {
+            return;
+        }
+        this.itemSelected.emit(this.items[this.activeIndex]);
+    }
+    scrollActiveItemIntoView() {
+        const list = document.querySelector('.mention-list');
+        if (!list) {
+            return;
+        }
+        const items = list.querySelectorAll('.mention-item');
+        if (!items.length) {
+            return;
+        }
+        const activeItem = items[this.activeIndex];
+        activeItem?.scrollIntoView({ block: 'nearest' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MentionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MentionListComponent, isStandalone: true, selector: "mt-faris-mention-list", inputs: { items: "items", loading: "loading" }, outputs: { itemSelected: "itemSelected" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"mention-list\">\r\n  @if (loading) {\r\n    <li title=\"loading...\">\r\n      <div class=\"mention-item skeleton\">&nbsp;</div>\r\n      <div class=\"mention-item skeleton\">&nbsp;</div>\r\n      <div class=\"mention-item skeleton\">&nbsp;</div>\r\n    </li>\r\n  }\r\n\r\n  @if (!loading && items.length === 0) {\r\n    <li class=\"mention-item-empty\">\r\n      {{ \"faris.no-results-found\" | translate }}\r\n    </li>\r\n  }\r\n\r\n  @for (item of items; track item.id; let i = $index) {\r\n    <li\r\n      (mousedown)=\"onItemClick($event, item)\"\r\n      class=\"mention-item\"\r\n      [class.active]=\"i === activeIndex\"\r\n      [hidden]=\"loading\"\r\n    >\r\n      {{ item.title }}\r\n      @if (item.levelType) {\r\n        <span class=\"mention-item-type\">({{ item.levelType }})</span>\r\n      }\r\n    </li>\r\n  }\r\n</ul>\r\n", styles: [".mention-list{list-style:none;margin:0;padding:5px;background:#fff;border-radius:var(--faris-border-radius);box-shadow:0 5px 10px #0000001a;max-height:200px;overflow-y:auto;z-index:1503;background-color:#ffffffbf;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.mention-item{padding:8px 12px;cursor:pointer;border-radius:var(--faris-sm-border-radius)}.mention-item:not(:last-child){margin-bottom:4px}.mention-item:hover{background-color:#f2f2f2}.mention-item-empty{padding:8px 12px;color:#888;font-style:italic}.mention-item.active{background-color:#e5e5e5;font-weight:700}.mention-item-type{opacity:.75;font-size:.9em}.skeleton{background-color:#e0e0e0;animation:pulse 1.5s infinite ease-in-out}@keyframes pulse{0%{background-color:#e0e0e0}50%{background-color:#f0f0f0}to{background-color:#e0e0e0}}\n"], dependencies: [{ kind: "pipe", type: FarisTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MentionListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-faris-mention-list', standalone: true, imports: [FarisTranslatePipe], template: "<ul class=\"mention-list\">\r\n  @if (loading) {\r\n    <li title=\"loading...\">\r\n      <div class=\"mention-item skeleton\">&nbsp;</div>\r\n      <div class=\"mention-item skeleton\">&nbsp;</div>\r\n      <div class=\"mention-item skeleton\">&nbsp;</div>\r\n    </li>\r\n  }\r\n\r\n  @if (!loading && items.length === 0) {\r\n    <li class=\"mention-item-empty\">\r\n      {{ \"faris.no-results-found\" | translate }}\r\n    </li>\r\n  }\r\n\r\n  @for (item of items; track item.id; let i = $index) {\r\n    <li\r\n      (mousedown)=\"onItemClick($event, item)\"\r\n      class=\"mention-item\"\r\n      [class.active]=\"i === activeIndex\"\r\n      [hidden]=\"loading\"\r\n    >\r\n      {{ item.title }}\r\n      @if (item.levelType) {\r\n        <span class=\"mention-item-type\">({{ item.levelType }})</span>\r\n      }\r\n    </li>\r\n  }\r\n</ul>\r\n", styles: [".mention-list{list-style:none;margin:0;padding:5px;background:#fff;border-radius:var(--faris-border-radius);box-shadow:0 5px 10px #0000001a;max-height:200px;overflow-y:auto;z-index:1503;background-color:#ffffffbf;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.mention-item{padding:8px 12px;cursor:pointer;border-radius:var(--faris-sm-border-radius)}.mention-item:not(:last-child){margin-bottom:4px}.mention-item:hover{background-color:#f2f2f2}.mention-item-empty{padding:8px 12px;color:#888;font-style:italic}.mention-item.active{background-color:#e5e5e5;font-weight:700}.mention-item-type{opacity:.75;font-size:.9em}.skeleton{background-color:#e0e0e0;animation:pulse 1.5s infinite ease-in-out}@keyframes pulse{0%{background-color:#e0e0e0}50%{background-color:#f0f0f0}to{background-color:#e0e0e0}}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], itemSelected: [{
+                type: Output
+            }] } });
+
+class MentionInputComponent {
+    inputRef;
+    loading = false;
+    resizeObserver;
+    overlayRef = null;
+    destroy$ = new Subject();
+    search$ = new Subject();
+    onChange = () => { };
+    onTouched = () => { };
+    mentionListInstance = null;
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    mentionApiService = inject(MentionApiService);
+    ngOnInit() {
+        this.search$
+            .pipe(debounceTime(300), switchMap((searchTerm) => {
+            this.loading = true;
+            if (this.overlayRef) {
+                this.showSuggestions([]);
+            }
+            return this.mentionApiService.search(searchTerm).pipe(catchError((_err) => {
+                this.loading = false;
+                return of([]);
+            }));
+        }), takeUntil(this.destroy$))
+            .subscribe((items) => {
+            this.loading = false;
+            if (this.overlayRef) {
+                this.showSuggestions(items);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const { offsetWidth } = entry.target;
+                if (this.overlayRef) {
+                    this.overlayRef.updatePosition();
+                    this.overlayRef.updateSize({
+                        width: 'fit-content',
+                        minWidth: '250px',
+                        maxWidth: `${offsetWidth}px`,
+                    });
+                }
+            }
+        });
+        this.resizeObserver.observe(this.inputRef.nativeElement);
+    }
+    onInput() {
+        const { word, trigger } = this.getCurrentWord();
+        if (trigger === '@' && word.length) {
+            this.openOverlay();
+            this.search$.next(word);
+        }
+        else {
+            this.closeOverlay();
+        }
+        this.emitValueChange();
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    onArrowUpDown(event) {
+        const keyboardEvent = event;
+        if (!this.overlayRef || !this.mentionListInstance) {
+            return;
+        }
+        event.preventDefault();
+        if (keyboardEvent.key === 'ArrowUp') {
+            this.mentionListInstance.moveActiveUp();
+        }
+        else if (keyboardEvent.key === 'ArrowDown') {
+            this.mentionListInstance.moveActiveDown();
+        }
+    }
+    onEnter(event) {
+        const keyboardEvent = event;
+        if (this.overlayRef && this.mentionListInstance) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.mentionListInstance.selectActiveItem();
+            return;
+        }
+        this.insertParagraphAtCaret(keyboardEvent);
+    }
+    onTab(event) {
+        if (!this.overlayRef || !this.mentionListInstance) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.mentionListInstance.selectActiveItem();
+    }
+    writeValue(value) {
+        if (!this.inputRef?.nativeElement) {
+            return;
+        }
+        this.inputRef.nativeElement.innerHTML = value || '<p><br></p>';
+        if (!value && this.overlayRef) {
+            this.closeOverlay();
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (!this.inputRef?.nativeElement) {
+            return;
+        }
+        this.inputRef.nativeElement.contentEditable = isDisabled ? 'false' : 'true';
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.resizeObserver?.disconnect();
+        this.closeOverlay();
+    }
+    insertParagraphAtCaret(event) {
+        if (event.key !== 'Enter') {
+            return;
+        }
+        event.preventDefault();
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            return;
+        }
+        const range = selection.getRangeAt(0);
+        let currentParagraph = range.startContainer;
+        while (currentParagraph &&
+            currentParagraph.nodeType === Node.ELEMENT_NODE &&
+            currentParagraph.tagName !== 'P') {
+            currentParagraph = currentParagraph.parentElement;
+        }
+        if (!currentParagraph || currentParagraph.tagName !== 'P') {
+            const paragraph = document.createElement('p');
+            paragraph.innerHTML = '<br>';
+            this.inputRef.nativeElement.appendChild(paragraph);
+            this.moveCaretToEndOf(paragraph);
+            return;
+        }
+        const afterRange = range.cloneRange();
+        afterRange.setEndAfter(currentParagraph);
+        const fragment = afterRange.extractContents();
+        const newParagraph = document.createElement('p');
+        if (fragment.textContent?.trim().length) {
+            newParagraph.appendChild(fragment);
+        }
+        else {
+            newParagraph.innerHTML = '<br>';
+        }
+        if (currentParagraph.nextSibling) {
+            currentParagraph.parentNode?.insertBefore(newParagraph, currentParagraph.nextSibling);
+        }
+        else {
+            currentParagraph.parentNode?.appendChild(newParagraph);
+        }
+        this.moveCaretToEndOf(newParagraph);
+    }
+    getCurrentWord() {
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            return { word: '', trigger: null };
+        }
+        const blockNode = this.getCaretBlockNode(this.inputRef.nativeElement);
+        if (!blockNode) {
+            return { word: '', trigger: null };
+        }
+        const range = selection.getRangeAt(0).cloneRange();
+        range.selectNodeContents(blockNode);
+        range.setEnd(selection.anchorNode, selection.anchorOffset);
+        const textBeforeCaret = range.toString();
+        const match = textBeforeCaret.match(/@(\w*)$/);
+        if (match) {
+            return { word: match[1], trigger: '@' };
+        }
+        return { word: '', trigger: null };
+    }
+    openOverlay() {
+        if (this.overlayRef) {
+            return;
+        }
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.inputRef)
+            .withPush(true)
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -8,
+            },
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 8,
+            },
+        ]);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            panelClass: 'mention-overlay-panel',
+            width: 'fit-content',
+            minWidth: '250px',
+            maxWidth: `${this.inputRef.nativeElement.offsetWidth}px`,
+        });
+    }
+    showSuggestions(items = []) {
+        if (!this.overlayRef) {
+            return;
+        }
+        if (this.overlayRef.hasAttached()) {
+            this.overlayRef.detach();
+        }
+        const strippedItems = items.map((item) => ({
+            ...item,
+            rank: undefined,
+        }));
+        const portal = new ComponentPortal(MentionListComponent, this.viewContainerRef);
+        const componentRef = this.overlayRef.attach(portal);
+        componentRef.instance.items = strippedItems;
+        componentRef.instance.loading = this.loading;
+        this.mentionListInstance = componentRef.instance;
+        if (items.length > 0) {
+            this.mentionListInstance.activeIndex = 0;
+        }
+        componentRef.instance.itemSelected
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((item) => {
+            this.insertMention(item);
+            this.closeOverlay();
+        });
+    }
+    insertMention(item) {
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            return;
+        }
+        const blockNode = this.getCaretBlockNode(this.inputRef.nativeElement);
+        if (!blockNode) {
+            return;
+        }
+        const range = selection.getRangeAt(0);
+        const preCaretRange = range.cloneRange();
+        preCaretRange.selectNodeContents(blockNode);
+        preCaretRange.setEnd(selection.anchorNode, selection.anchorOffset);
+        const textBeforeCaret = preCaretRange.toString();
+        const lastAt = textBeforeCaret.lastIndexOf('@');
+        if (lastAt === -1) {
+            return;
+        }
+        let charCount = textBeforeCaret.length - lastAt;
+        const treeWalker = document.createTreeWalker(blockNode, NodeFilter.SHOW_TEXT, null);
+        let currentNode = treeWalker.lastChild();
+        let offset = 0;
+        while (currentNode && charCount > 0) {
+            if (currentNode.textContent) {
+                if (charCount <= currentNode.textContent.length) {
+                    offset = currentNode.textContent.length - charCount;
+                    break;
+                }
+                charCount -= currentNode.textContent.length;
+            }
+            currentNode = treeWalker.previousNode();
+        }
+        if (!currentNode) {
+            return;
+        }
+        const newRange = document.createRange();
+        newRange.setStart(currentNode, offset);
+        newRange.setEnd(range.endContainer, range.endOffset);
+        newRange.deleteContents();
+        const mentionNode = document.createElement('span');
+        mentionNode.className = 'mention-highlight';
+        mentionNode.contentEditable = 'false';
+        mentionNode.textContent = `@${item.title}`;
+        mentionNode.setAttribute('data-mention', JSON.stringify(item));
+        newRange.insertNode(mentionNode);
+        const space = document.createTextNode('\u00A0');
+        mentionNode.after(space);
+        const afterRange = document.createRange();
+        afterRange.setStartAfter(space);
+        afterRange.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(afterRange);
+        this.inputRef.nativeElement.focus();
+        this.emitValueChange();
+    }
+    emitValueChange() {
+        if (!this.inputRef?.nativeElement) {
+            return;
+        }
+        this.onChange(this.getEncodedValue());
+    }
+    closeOverlay() {
+        if (!this.overlayRef) {
+            return;
+        }
+        this.overlayRef.dispose();
+        this.overlayRef = null;
+        this.mentionListInstance = null;
+    }
+    getEncodedValue() {
+        const traverse = (node) => {
+            let result = '';
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const element = node;
+                if (element.classList.contains('mention-highlight') &&
+                    element.hasAttribute('data-mention')) {
+                    result += `@{{${element.getAttribute('data-mention')}}}`;
+                }
+                else {
+                    node.childNodes.forEach((child) => {
+                        result += traverse(child);
+                    });
+                }
+            }
+            else if (node.nodeType === Node.TEXT_NODE) {
+                result += node.textContent ?? '';
+            }
+            return result;
+        };
+        return traverse(this.inputRef.nativeElement);
+    }
+    getCaretBlockNode(container) {
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            return null;
+        }
+        let node = selection.anchorNode;
+        while (node && node !== container) {
+            if (node.nodeType === Node.ELEMENT_NODE &&
+                node.tagName.match(/^(DIV|P|LI)$/)) {
+                return node;
+            }
+            node = node.parentNode;
+        }
+        return container;
+    }
+    moveCaretToEndOf(element) {
+        const range = document.createRange();
+        const selection = window.getSelection();
+        range.selectNodeContents(element);
+        range.collapse(false);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+        element.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MentionInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MentionInputComponent, isStandalone: true, selector: "mt-faris-mention-input", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MentionInputComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["mentionInput"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n  #mentionInput\r\n  class=\"mention-input\"\r\n  contenteditable=\"true\"\r\n  (input)=\"onInput()\"\r\n  (blur)=\"onBlur()\"\r\n  (keydown.arrowUp)=\"onArrowUpDown($event)\"\r\n  (keydown.arrowDown)=\"onArrowUpDown($event)\"\r\n  (keydown.enter)=\"onEnter($event)\"\r\n  (keydown.tab)=\"onTab($event)\"\r\n></div>\r\n", styles: [":host{width:100%;display:block}::ng-deep .cdk-overlay-connected-position-bounding-box:has(.mention-overlay-panel){display:flex;flex-direction:column;position:absolute}::ng-deep .mention-overlay-panel{z-index:1501}::ng-deep .mention-input .mention-highlight{font-weight:700;border-radius:var(--faris-sm-border-radius)}.mention-input{min-height:40px;min-height:3em;height:3em;max-height:3em;cursor:text;line-height:1.5;outline:none;overflow-y:auto;border:1px solid #dee2e6;padding:.5em;border-radius:var(--faris-border-radius);resize:none;font-size:1em;background-color:#fff}.mention-input p{margin:0}.mention-input:focus{box-shadow:0 5px 10px #00000014}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MentionInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-faris-mention-input', standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MentionInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\r\n  #mentionInput\r\n  class=\"mention-input\"\r\n  contenteditable=\"true\"\r\n  (input)=\"onInput()\"\r\n  (blur)=\"onBlur()\"\r\n  (keydown.arrowUp)=\"onArrowUpDown($event)\"\r\n  (keydown.arrowDown)=\"onArrowUpDown($event)\"\r\n  (keydown.enter)=\"onEnter($event)\"\r\n  (keydown.tab)=\"onTab($event)\"\r\n></div>\r\n", styles: [":host{width:100%;display:block}::ng-deep .cdk-overlay-connected-position-bounding-box:has(.mention-overlay-panel){display:flex;flex-direction:column;position:absolute}::ng-deep .mention-overlay-panel{z-index:1501}::ng-deep .mention-input .mention-highlight{font-weight:700;border-radius:var(--faris-sm-border-radius)}.mention-input{min-height:40px;min-height:3em;height:3em;max-height:3em;cursor:text;line-height:1.5;outline:none;overflow-y:auto;border:1px solid #dee2e6;padding:.5em;border-radius:var(--faris-border-radius);resize:none;font-size:1em;background-color:#fff}.mention-input p{margin:0}.mention-input:focus{box-shadow:0 5px 10px #00000014}\n"] }]
+        }], propDecorators: { inputRef: [{
+                type: ViewChild,
+                args: ['mentionInput', { static: true }]
+            }] } });
+
+class FarisChatComponent {
+    _selectedConversation = null;
+    _selectedConversationId = null;
+    set selectedConversation(conversation) {
+        const nextConversationId = this.resolveConversationId(conversation);
+        if (nextConversationId &&
+            nextConversationId === this._selectedConversationId) {
+            return;
+        }
+        this._selectedConversation = conversation;
+        this._selectedConversationId = nextConversationId;
+        if (!nextConversationId) {
+            this._selectedConversation = null;
+            this._selectedConversationId = null;
+            this.chatHistory = [];
+            this.showResult = false;
+            this.farisService.clearSession();
+        }
+        else {
+            this.getConversationDetails(nextConversationId);
+        }
+        this.userInput = '';
+    }
+    launchCanvas = new EventEmitter();
+    selectConversation = new EventEmitter();
+    userInput = '';
+    showResult = false;
+    loading = false;
+    markdownContent = '';
+    currentUserPhoto = '';
+    chatHistory = [];
+    dots = '';
+    intervalId = null;
+    thinkingText = '';
+    deepThinkingTimeoutId = null;
+    deepThinkingDelay = 10000;
+    deepThinkingText = 'Deep thinking is needed and the response might take more than usual...';
+    thinkingTexts = [
+        'Thinking',
+        'Hmm, analyzing the data',
+        'Let me think for a moment',
+        'Just a second, processing your request',
+        'Considering all possibilities',
+        "Let's see what I can come up with",
+        'Running some calculations',
+        'Thinking hard about this one',
+        'Let me get back to you',
+    ];
+    agents = [];
+    subscriptions = new Subscription();
+    farisService = inject(FarisService);
+    get selectedChatId() {
+        return this._selectedConversationId ?? '';
+    }
+    get currentUserDisplayName() {
+        const currentUser = this.farisService.currentUser;
+        return (currentUser?.user?.displayName ??
+            currentUser?.displayName ??
+            currentUser?.user?.name ??
+            currentUser?.name ??
+            '');
+    }
+    ngOnInit() {
+        this.loading = true;
+        this.currentUserPhoto = this.resolveUserPhoto();
+        this.startThinking(false);
+        setTimeout(() => {
+            this.loading = false;
+        }, 600);
+    }
+    sendQuery(query) {
+        const value = (query || this.userInput || '').trim();
+        if (!value || this.loading) {
+            return;
+        }
+        this.userInput = value;
+        this.showResult = true;
+        this.loading = true;
+        this.startThinking();
+        this.chatHistory = [
+            ...this.chatHistory,
+            { role: 'user', content: value, loaded: true },
+            { role: 'assistant', content: this.markdownContent, loaded: false },
+        ];
+        this.subscriptions.add(this.farisService
+            .sendMessage(value)
+            .pipe(finalize(() => {
+            this.loading = false;
+            this.stopThinking();
+        }))
+            .subscribe((res) => {
+            const index = this.chatHistory.length - 1;
+            this.chatHistory[index].content = res?.content;
+            this.chatHistory[index].loaded = true;
+            this.chatHistory[index].message_id = res?.message_id;
+            this.chatHistory[index].trace_id = res?.trace_id;
+            this.chatHistory[index].feedback = res?.feedback;
+            this.chatHistory[index].score = res?.score;
+            this.scrollToBottom();
+            const canvas = this.resolveContent(res?.content).includes('\n```canvas');
+            if (!this.selectedChatId) {
+                const sessionId = res?.session_id ?? res?.sessionId ?? res?.id ?? undefined;
+                this.selectConversation.emit({
+                    id: sessionId,
+                    title: res?.conversation_title ?? res?.conversationTitle ?? value,
+                });
+            }
+            if (canvas) {
+                this.launchCanvas.emit(this.chatHistory[index]);
+            }
+        }));
+        setTimeout(() => {
+            this.userInput = '';
+        }, 10);
+    }
+    takeAction(action, item) {
+        if (!this.selectedChatId || !item?.message_id) {
+            return;
+        }
+        switch (action) {
+            case 'like':
+            case 'dislike':
+                this.likeDislikeFeedback(action, item);
+                break;
+            case 'copy':
+                this.farisService.copyToClipboard(this.resolveContent(item.content));
+                break;
+            default:
+                break;
+        }
+    }
+    ngOnDestroy() {
+        this.chatHistory = [];
+        this.showResult = false;
+        this.farisService.clearSession();
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+        if (this.deepThinkingTimeoutId) {
+            clearTimeout(this.deepThinkingTimeoutId);
+            this.deepThinkingTimeoutId = null;
+        }
+        if (!this.subscriptions.closed) {
+            this.subscriptions.unsubscribe();
+        }
+    }
+    resolveUserPhoto() {
+        const currentUser = this.farisService.currentUser;
+        const photo = currentUser?.user?.photo ??
+            currentUser?.photo ??
+            currentUser?.user?.image ??
+            currentUser?.image;
+        if (typeof photo === 'string') {
+            return photo;
+        }
+        return photo?.fileName ?? '';
+    }
+    startThinking(shouldGenerateNew = true) {
+        this.thinkingText = this.getRandomThinkingText(shouldGenerateNew);
+        this.scrollToBottom();
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+        }
+        let count = 0;
+        this.intervalId = setInterval(() => {
+            count = (count + 1) % 4;
+            this.dots = '.'.repeat(count);
+        }, 500);
+        if (this.deepThinkingTimeoutId) {
+            clearTimeout(this.deepThinkingTimeoutId);
+        }
+        this.deepThinkingTimeoutId = setTimeout(() => {
+            if (this.loading) {
+                this.thinkingText = this.deepThinkingText;
+            }
+        }, this.deepThinkingDelay);
+    }
+    stopThinking() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+        this.dots = '';
+        if (this.deepThinkingTimeoutId) {
+            clearTimeout(this.deepThinkingTimeoutId);
+            this.deepThinkingTimeoutId = null;
+        }
+    }
+    scrollToBottom() {
+        const container = document.getElementById('results-container');
+        if (!container) {
+            return;
+        }
+        setTimeout(() => {
+            container.scrollTo({
+                top: container.scrollHeight + 100,
+                behavior: 'smooth',
+            });
+        }, 150);
+    }
+    getRandomThinkingText(generateNew = true) {
+        if (!generateNew) {
+            return this.thinkingTexts[0];
+        }
+        const randomIndex = Math.floor(Math.random() * this.thinkingTexts.length);
+        return this.thinkingTexts[randomIndex];
+    }
+    getConversationDetails(id) {
+        this.subscriptions.add(this.farisService.getConversationDetails(id).subscribe((res) => {
+            this.showResult = true;
+            this.chatHistory = (res || []).map((item) => ({
+                role: item.role,
+                content: item.content,
+                loaded: true,
+                message_id: item.message_id,
+                trace_id: item.trace_id,
+                score: item.score,
+                feedback: item.feedback,
+            }));
+            this.scrollToBottom();
+        }));
+    }
+    resolveConversationId(conversation) {
+        const id = conversation?.id ??
+            conversation?.session_id ??
+            conversation?.sessionId ??
+            conversation?.conversation_id ??
+            conversation?.conversationId;
+        return id == null ? null : String(id);
+    }
+    likeDislikeFeedback(vote, item) {
+        if (!this.selectedChatId || !item?.message_id) {
+            return;
+        }
+        let score = vote === 'like' ? 1 : -1;
+        if ((item.feedback === 1 && score === 1) ||
+            (item.feedback === -1 && score === -1)) {
+            score = 0;
+        }
+        this.subscriptions.add(this.farisService
+            .sendFeedback(item.message_id, score, item.trace_id)
+            .subscribe());
+    }
+    resolveContent(content) {
+        if (typeof content === 'string') {
+            return content;
+        }
+        if (content == null) {
+            return '';
+        }
+        try {
+            return JSON.stringify(content);
+        }
+        catch {
+            return String(content);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FarisChatComponent, isStandalone: true, selector: "mt-faris-chat", inputs: { selectedConversation: "selectedConversation" }, outputs: { launchCanvas: "launchCanvas", selectConversation: "selectConversation" }, ngImport: i0, template: "<div class=\"relative flex h-full w-full flex-col justify-between\" #container>\r\n  @if (!showResult) {\r\n    <div class=\"welcome-user\">\r\n      <span class=\"hello-gradient\"\r\n        >{{ \"faris.hello\" | translate }}, {{ currentUserDisplayName }}</span\r\n      >\r\n      <span class=\"welcome-text\">{{\r\n        \"faris.welcome-message\" | translate\r\n      }}</span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"results-container\" id=\"results-container\">\r\n    <div class=\"pre-defined-questions flex w-full flex-col\">\r\n      @if (!showResult) {\r\n        @for (agent of agents; track agent?.title) {\r\n          <mt-faris-agent-card\r\n            class=\"real-content\"\r\n            [agent]=\"agent\"\r\n            (click)=\"sendQuery(agent.title)\"\r\n          ></mt-faris-agent-card>\r\n        }\r\n      }\r\n\r\n      @if (showResult) {\r\n        @for (\r\n          item of chatHistory;\r\n          track item.trace_id || item.message_id || $index\r\n        ) {\r\n          <mt-faris-message\r\n            [item]=\"item\"\r\n            [currentUserPhoto]=\"currentUserPhoto\"\r\n            [loading]=\"loading\"\r\n            [thinkingText]=\"thinkingText\"\r\n            (action)=\"takeAction($event.action, $event.item)\"\r\n            (canvas)=\"launchCanvas.emit($event)\"\r\n          >\r\n          </mt-faris-message>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"search-box\">\r\n    <form class=\"w-full\" #chatForm=\"ngForm\" (ngSubmit)=\"sendQuery(userInput)\">\r\n      <div class=\"input-box\">\r\n        <mt-faris-mention-input\r\n          [(ngModel)]=\"userInput\"\r\n          [ngModelOptions]=\"{ standalone: true }\"\r\n          (keydown.enter)=\"sendQuery(userInput)\"\r\n        ></mt-faris-mention-input>\r\n\r\n        <mt-button\r\n          type=\"submit\"\r\n          icon=\"communication.send-01\"\r\n          variant=\"text\"\r\n          styleClass=\"faris-btn faris-btn-lg\"\r\n          [disabled]=\"!userInput || !userInput.trim() || loading\"\r\n        ></mt-button>\r\n      </div>\r\n    </form>\r\n\r\n    <small>{{ \"faris.input-message\" | translate }}</small>\r\n  </div>\r\n</div>\r\n", styles: [".results-container{height:90%;overflow-y:auto;margin:0 1em 100px}.conversations-container{height:85%;overflow-y:auto;margin:0 1em 140px}.search-box{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:90px;border-top:1px solid #dee2e6;gap:.5em;padding:.5em 1em;bottom:0;left:0}.search-box small{font-size:.65em;opacity:.8}.search-box .input-box{display:flex;align-items:center;gap:.5em}.search-box .input-box textarea{border:1px solid #dee2e6;padding:.5em;border-radius:var(--faris-border-radius);box-shadow:0 5px 10px #00000014;resize:none;height:unset!important;width:100%!important;outline:none;font-size:1em}.search-box .input-box textarea::-webkit-input-placeholder{font-size:1em}.pre-defined-questions{gap:1em;width:100%}.welcome-user{display:flex;flex-direction:column;gap:.5em;font-size:1.1em;font-weight:500;padding:0 1em 1.2em;line-height:22px}.welcome-user .hello-gradient{font-size:1.5em;font-weight:700;background:-webkit-linear-gradient(315deg,#217bfe 0,#078efb 33%,#ac87eb 100%);background:linear-gradient(135deg,#217bfe 0,#078efb 33%,#ac87eb);background-size:200% 100%;display:-webkit-inline-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-word;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;inline-size:-webkit-fit-content;inline-size:fit-content;display:block;animation:gradient-shine 1.5s ease-in}@keyframes gradient-shine{0%{background-position:200% center;opacity:0}60%{opacity:1}to{background-position:0% center;opacity:1}}.welcome-user .welcome-text{display:inline-block;background:linear-gradient(90deg,#888 100%,transparent 0%);background-size:0% 100%;background-repeat:no-repeat;color:transparent;background-clip:text;-webkit-background-clip:text;animation:fill-gray 1.5s forwards;animation-delay:.5s}@keyframes fill-text{0%{background-size:0% 100%;opacity:0}30%{opacity:1}to{background-size:200% 100%;opacity:1}}@keyframes fill-gray{0%{background-size:0% 100%;opacity:0}30%{opacity:1}to{background-size:100% 100%;opacity:1}}:dir(rtl) .welcome-user .hello-gradient{background:linear-gradient(-135deg,#217bfe 0,#078efb 33%,#ac87eb);background-size:200% 100%;background-position:0% center;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gradient-shine-rtl 1.5s ease-in}@keyframes gradient-shine-rtl{0%{background-position:-200% center;opacity:0}60%{opacity:1}to{background-position:0% center;opacity:1}}:dir(rtl) .welcome-user .welcome-text{background:linear-gradient(270deg,#888 100%,transparent 0%);background-size:0% 100%;background-repeat:no-repeat;background-position:right center;background-clip:text;-webkit-background-clip:text;color:transparent;animation:fill-gray-rtl 1.5s forwards;animation-delay:.5s}@keyframes fill-gray-rtl{0%{background-size:0% 100%;opacity:0}30%{opacity:1}to{background-size:100% 100%;opacity:1}}::ng-deep markdown{width:calc(100% - 28px)}::ng-deep markdown h1{font-size:1em}::ng-deep markdown h2{font-size:.9em}::ng-deep markdown h3{font-size:.8em}::ng-deep markdown h4{font-size:.7em}::ng-deep markdown h5{font-size:.6em}::ng-deep markdown h6{font-size:.5em}::ng-deep markdown p{font-size:.9em;line-height:1.5;margin:8px 0}::ng-deep markdown ul,::ng-deep markdown ol{font-size:.9em;line-height:1.5;margin-inline-start:1.5em;padding:0;list-style-type:disclosure-closed}::ng-deep markdown li{margin-bottom:.5em}::ng-deep markdown blockquote{border-inline-start:4px solid #dfe2e5;padding:.5em 1em;margin:1em 0;background-color:#f6f8fa}::ng-deep markdown code{background-color:#f6f8fa;padding:.2em .4em;border-radius:var(--faris-sm-border-radius);font-family:Courier New,Courier,monospace}::ng-deep markdown table{width:100%;border-collapse:collapse;margin:1em 0}::ng-deep markdown th,::ng-deep markdown td{border:1px solid #dfe2e5;padding:.5em;text-align:start}::ng-deep markdown th{background-color:#f6f8fa;font-weight:700}::ng-deep markdown img{max-width:100%;height:auto;display:block;margin:1em 0}::ng-deep markdown .chart-placeholder{width:100%!important}.thinking{position:absolute;inset-inline-start:0;bottom:110px}#thinkingText{font-size:12px;font-weight:700}@keyframes dots{0%{content:\".\"}33%{content:\"..\"}66%{content:\"...\"}}#dots:after{content:\".\";animation:dots 1s infinite steps(3,end)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: AgentCardComponent, selector: "mt-faris-agent-card", inputs: ["agent"] }, { kind: "component", type: FarisMessageComponent, selector: "mt-faris-message", inputs: ["item", "currentUserPhoto", "loading", "thinkingText"], outputs: ["action", "canvas"] }, { kind: "component", type: MentionInputComponent, selector: "mt-faris-mention-input" }, { kind: "pipe", type: FarisTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisChatComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-faris-chat', standalone: true, imports: [
+                        FormsModule,
+                        Button,
+                        AgentCardComponent,
+                        FarisTranslatePipe,
+                        FarisMessageComponent,
+                        MentionInputComponent,
+                    ], template: "<div class=\"relative flex h-full w-full flex-col justify-between\" #container>\r\n  @if (!showResult) {\r\n    <div class=\"welcome-user\">\r\n      <span class=\"hello-gradient\"\r\n        >{{ \"faris.hello\" | translate }}, {{ currentUserDisplayName }}</span\r\n      >\r\n      <span class=\"welcome-text\">{{\r\n        \"faris.welcome-message\" | translate\r\n      }}</span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"results-container\" id=\"results-container\">\r\n    <div class=\"pre-defined-questions flex w-full flex-col\">\r\n      @if (!showResult) {\r\n        @for (agent of agents; track agent?.title) {\r\n          <mt-faris-agent-card\r\n            class=\"real-content\"\r\n            [agent]=\"agent\"\r\n            (click)=\"sendQuery(agent.title)\"\r\n          ></mt-faris-agent-card>\r\n        }\r\n      }\r\n\r\n      @if (showResult) {\r\n        @for (\r\n          item of chatHistory;\r\n          track item.trace_id || item.message_id || $index\r\n        ) {\r\n          <mt-faris-message\r\n            [item]=\"item\"\r\n            [currentUserPhoto]=\"currentUserPhoto\"\r\n            [loading]=\"loading\"\r\n            [thinkingText]=\"thinkingText\"\r\n            (action)=\"takeAction($event.action, $event.item)\"\r\n            (canvas)=\"launchCanvas.emit($event)\"\r\n          >\r\n          </mt-faris-message>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"search-box\">\r\n    <form class=\"w-full\" #chatForm=\"ngForm\" (ngSubmit)=\"sendQuery(userInput)\">\r\n      <div class=\"input-box\">\r\n        <mt-faris-mention-input\r\n          [(ngModel)]=\"userInput\"\r\n          [ngModelOptions]=\"{ standalone: true }\"\r\n          (keydown.enter)=\"sendQuery(userInput)\"\r\n        ></mt-faris-mention-input>\r\n\r\n        <mt-button\r\n          type=\"submit\"\r\n          icon=\"communication.send-01\"\r\n          variant=\"text\"\r\n          styleClass=\"faris-btn faris-btn-lg\"\r\n          [disabled]=\"!userInput || !userInput.trim() || loading\"\r\n        ></mt-button>\r\n      </div>\r\n    </form>\r\n\r\n    <small>{{ \"faris.input-message\" | translate }}</small>\r\n  </div>\r\n</div>\r\n", styles: [".results-container{height:90%;overflow-y:auto;margin:0 1em 100px}.conversations-container{height:85%;overflow-y:auto;margin:0 1em 140px}.search-box{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:90px;border-top:1px solid #dee2e6;gap:.5em;padding:.5em 1em;bottom:0;left:0}.search-box small{font-size:.65em;opacity:.8}.search-box .input-box{display:flex;align-items:center;gap:.5em}.search-box .input-box textarea{border:1px solid #dee2e6;padding:.5em;border-radius:var(--faris-border-radius);box-shadow:0 5px 10px #00000014;resize:none;height:unset!important;width:100%!important;outline:none;font-size:1em}.search-box .input-box textarea::-webkit-input-placeholder{font-size:1em}.pre-defined-questions{gap:1em;width:100%}.welcome-user{display:flex;flex-direction:column;gap:.5em;font-size:1.1em;font-weight:500;padding:0 1em 1.2em;line-height:22px}.welcome-user .hello-gradient{font-size:1.5em;font-weight:700;background:-webkit-linear-gradient(315deg,#217bfe 0,#078efb 33%,#ac87eb 100%);background:linear-gradient(135deg,#217bfe 0,#078efb 33%,#ac87eb);background-size:200% 100%;display:-webkit-inline-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-word;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;inline-size:-webkit-fit-content;inline-size:fit-content;display:block;animation:gradient-shine 1.5s ease-in}@keyframes gradient-shine{0%{background-position:200% center;opacity:0}60%{opacity:1}to{background-position:0% center;opacity:1}}.welcome-user .welcome-text{display:inline-block;background:linear-gradient(90deg,#888 100%,transparent 0%);background-size:0% 100%;background-repeat:no-repeat;color:transparent;background-clip:text;-webkit-background-clip:text;animation:fill-gray 1.5s forwards;animation-delay:.5s}@keyframes fill-text{0%{background-size:0% 100%;opacity:0}30%{opacity:1}to{background-size:200% 100%;opacity:1}}@keyframes fill-gray{0%{background-size:0% 100%;opacity:0}30%{opacity:1}to{background-size:100% 100%;opacity:1}}:dir(rtl) .welcome-user .hello-gradient{background:linear-gradient(-135deg,#217bfe 0,#078efb 33%,#ac87eb);background-size:200% 100%;background-position:0% center;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gradient-shine-rtl 1.5s ease-in}@keyframes gradient-shine-rtl{0%{background-position:-200% center;opacity:0}60%{opacity:1}to{background-position:0% center;opacity:1}}:dir(rtl) .welcome-user .welcome-text{background:linear-gradient(270deg,#888 100%,transparent 0%);background-size:0% 100%;background-repeat:no-repeat;background-position:right center;background-clip:text;-webkit-background-clip:text;color:transparent;animation:fill-gray-rtl 1.5s forwards;animation-delay:.5s}@keyframes fill-gray-rtl{0%{background-size:0% 100%;opacity:0}30%{opacity:1}to{background-size:100% 100%;opacity:1}}::ng-deep markdown{width:calc(100% - 28px)}::ng-deep markdown h1{font-size:1em}::ng-deep markdown h2{font-size:.9em}::ng-deep markdown h3{font-size:.8em}::ng-deep markdown h4{font-size:.7em}::ng-deep markdown h5{font-size:.6em}::ng-deep markdown h6{font-size:.5em}::ng-deep markdown p{font-size:.9em;line-height:1.5;margin:8px 0}::ng-deep markdown ul,::ng-deep markdown ol{font-size:.9em;line-height:1.5;margin-inline-start:1.5em;padding:0;list-style-type:disclosure-closed}::ng-deep markdown li{margin-bottom:.5em}::ng-deep markdown blockquote{border-inline-start:4px solid #dfe2e5;padding:.5em 1em;margin:1em 0;background-color:#f6f8fa}::ng-deep markdown code{background-color:#f6f8fa;padding:.2em .4em;border-radius:var(--faris-sm-border-radius);font-family:Courier New,Courier,monospace}::ng-deep markdown table{width:100%;border-collapse:collapse;margin:1em 0}::ng-deep markdown th,::ng-deep markdown td{border:1px solid #dfe2e5;padding:.5em;text-align:start}::ng-deep markdown th{background-color:#f6f8fa;font-weight:700}::ng-deep markdown img{max-width:100%;height:auto;display:block;margin:1em 0}::ng-deep markdown .chart-placeholder{width:100%!important}.thinking{position:absolute;inset-inline-start:0;bottom:110px}#thinkingText{font-size:12px;font-weight:700}@keyframes dots{0%{content:\".\"}33%{content:\"..\"}66%{content:\"...\"}}#dots:after{content:\".\";animation:dots 1s infinite steps(3,end)}\n"] }]
+        }], propDecorators: { selectedConversation: [{
+                type: Input
+            }], launchCanvas: [{
+                type: Output
+            }], selectConversation: [{
+                type: Output
+            }] } });
+
+class FarisChatHistoryComponent {
+    userConversations = [];
+    showChatHistory = false;
+    selectedConversation = null;
+    selectConversation = new EventEmitter();
+    deleteConversationHandler = new EventEmitter();
+    closeHistory = new EventEmitter();
+    groupedConversations = [];
+    ngOnChanges(changes) {
+        if (changes['userConversations']) {
+            this.groupedConversations = this.groupConversations(this.userConversations || []);
+        }
+    }
+    onCloseHistory() {
+        this.closeHistory.emit(true);
+    }
+    onSelectConversation(conversation) {
+        this.selectConversation.emit(conversation);
+    }
+    onDeleteConversation(event, id) {
+        event.stopPropagation();
+        this.deleteConversationHandler.emit({ event, id });
+    }
+    groupConversations(conversations) {
+        const normalized = (conversations || []).map((conversation, index) => this.normalizeConversation(conversation, index));
+        const sorted = [...normalized].sort((a, b) => this.resolveConversationTimestamp(b) -
+            this.resolveConversationTimestamp(a));
+        const todayGroup = { label: 'Today', conversations: [] };
+        const yesterdayGroup = {
+            label: 'Yesterday',
+            conversations: [],
+        };
+        const thisWeekGroup = {
+            label: 'This Week',
+            conversations: [],
+        };
+        const lastWeekGroup = {
+            label: 'Last Week',
+            conversations: [],
+        };
+        const monthGroups = new Map();
+        const now = new Date();
+        const todayStart = this.startOfDay(now).getTime();
+        const yesterdayStart = this.startOfDay(this.addDays(now, -1)).getTime();
+        const thisWeekStart = this.startOfWeek(now).getTime();
+        const lastWeekStart = this.startOfWeek(this.addDays(now, -7)).getTime();
+        for (const conversation of sorted) {
+            const updatedDate = this.resolveConversationDate(conversation) ?? now;
+            const updatedStart = this.startOfDay(updatedDate).getTime();
+            if (updatedStart === todayStart) {
+                conversation.displayDate = 'Today';
+                todayGroup.conversations.push(conversation);
+                continue;
+            }
+            if (updatedStart === yesterdayStart) {
+                conversation.displayDate = 'Yesterday';
+                yesterdayGroup.conversations.push(conversation);
+                continue;
+            }
+            if (updatedStart >= thisWeekStart) {
+                conversation.displayDate = this.formatDayMonth(updatedDate);
+                thisWeekGroup.conversations.push(conversation);
+                continue;
+            }
+            if (updatedStart >= lastWeekStart) {
+                conversation.displayDate = this.formatDayMonth(updatedDate);
+                lastWeekGroup.conversations.push(conversation);
+                continue;
+            }
+            const monthLabel = this.formatMonthYear(updatedDate);
+            conversation.displayDate = this.formatDayMonth(updatedDate);
+            if (!monthGroups.has(monthLabel)) {
+                monthGroups.set(monthLabel, {
+                    label: monthLabel,
+                    conversations: [],
+                    sortValue: this.startOfMonth(updatedDate).getTime(),
+                });
+            }
+            monthGroups.get(monthLabel)?.conversations.push(conversation);
+        }
+        const fixedOrder = [
+            todayGroup,
+            yesterdayGroup,
+            thisWeekGroup,
+            lastWeekGroup,
+        ].filter((group) => group.conversations.length > 0);
+        const orderedMonthGroups = Array.from(monthGroups.values()).sort((a, b) => (b.sortValue ?? 0) - (a.sortValue ?? 0));
+        return [...fixedOrder, ...orderedMonthGroups];
+    }
+    formatDayMonth(date) {
+        return new Intl.DateTimeFormat('en', {
+            day: 'numeric',
+            month: 'short',
+        }).format(date);
+    }
+    formatMonthYear(date) {
+        return new Intl.DateTimeFormat('en', {
+            month: 'long',
+            year: 'numeric',
+        }).format(date);
+    }
+    startOfDay(date) {
+        const result = new Date(date);
+        result.setHours(0, 0, 0, 0);
+        return result;
+    }
+    startOfWeek(date) {
+        const result = this.startOfDay(date);
+        const day = result.getDay();
+        result.setDate(result.getDate() - day);
+        return result;
+    }
+    startOfMonth(date) {
+        const result = this.startOfDay(date);
+        result.setDate(1);
+        return result;
+    }
+    addDays(date, days) {
+        const result = new Date(date);
+        result.setDate(result.getDate() + days);
+        return result;
+    }
+    normalizeConversation(conversation, index) {
+        const id = conversation?.id ??
+            conversation?.session_id ??
+            conversation?.sessionId ??
+            conversation?.conversation_id ??
+            conversation?.conversationId ??
+            `conversation-${index}`;
+        const updatedAt = conversation?.updated_at ??
+            conversation?.updatedAt ??
+            conversation?.last_updated_at ??
+            conversation?.lastUpdatedAt ??
+            conversation?.created_at ??
+            conversation?.createdAt ??
+            conversation?.timestamp ??
+            conversation?.date ??
+            null;
+        const title = conversation?.title ??
+            conversation?.conversation_title ??
+            conversation?.conversationTitle ??
+            conversation?.name ??
+            conversation?.subject ??
+            '';
+        return {
+            ...conversation,
+            id: String(id),
+            updated_at: updatedAt,
+            title,
+        };
+    }
+    resolveConversationDate(conversation) {
+        const candidate = conversation?.updated_at;
+        if (!candidate) {
+            return null;
+        }
+        const date = new Date(candidate);
+        return Number.isNaN(date.getTime()) ? null : date;
+    }
+    resolveConversationTimestamp(conversation) {
+        return this.resolveConversationDate(conversation)?.getTime() ?? 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisChatHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FarisChatHistoryComponent, isStandalone: true, selector: "mt-faris-chat-history", inputs: { userConversations: "userConversations", showChatHistory: "showChatHistory", selectedConversation: "selectedConversation" }, outputs: { selectConversation: "selectConversation", deleteConversationHandler: "deleteConversationHandler", closeHistory: "closeHistory" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"conversations-history\"\r\n  [class.closed-chat-history-side]=\"!showChatHistory\"\r\n>\r\n  <div class=\"conversations-header\">\r\n    <span class=\"conversations-title\">{{\r\n      \"faris.chat-history\" | translate\r\n    }}</span>\r\n    <mt-button\r\n      type=\"button\"\r\n      icon=\"general.x-close\"\r\n      variant=\"text\"\r\n      styleClass=\"faris-btn\"\r\n      (click)=\"onCloseHistory()\"\r\n    ></mt-button>\r\n  </div>\r\n\r\n  <div class=\"conversations-list\">\r\n    @for (group of groupedConversations; track group.label) {\r\n      <div class=\"conversation-group-header\">{{ group.label }}</div>\r\n\r\n      @for (conversation of group.conversations; track conversation.id) {\r\n        <div\r\n          class=\"conversation-item flex w-full cursor-pointer items-center justify-between gap-2 rounded-md p-2\"\r\n          (click)=\"onSelectConversation(conversation)\"\r\n          [class.active-conversation]=\"\r\n            selectedConversation?.id === conversation.id\r\n          \"\r\n        >\r\n          <mt-icon icon=\"communication.message-chat-circle\"></mt-icon>\r\n\r\n          <div class=\"conversation-title-group\">\r\n            <div class=\"conversation-title\">\r\n              {{ (conversation?.title | parseMention) || \" \" }}\r\n            </div>\r\n            <div class=\"conversation-subtitle\">\r\n              {{ conversation.displayDate }}\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"conversation-actions\">\r\n            <mt-button\r\n              type=\"button\"\r\n              icon=\"general.trash-01\"\r\n              variant=\"text\"\r\n              styleClass=\"faris-btn faris-btn-muted text-red-600\"\r\n              [tooltip]=\"'faris.delete' | translate\"\r\n              (click)=\"onDeleteConversation($event, conversation?.id)\"\r\n            ></mt-button>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".conversations-history{display:flex;flex-direction:column;height:100%;background:#f8f9fa;border-inline-end:1px solid #e0e0e0;overflow-y:auto;width:20vw;min-width:220px;max-width:320px;transition:width .2s;overflow-x:hidden}.conversations-history .conversations-header{display:flex;align-items:center;justify-content:space-between;padding:.5em .75em;font-size:1.1em;font-weight:500;color:#333;border-bottom:1px solid #e0e0e0}.conversations-history .conversations-header .history-close-button{display:flex;align-items:center;justify-content:center;border:1px solid transparent;background-color:transparent;border-radius:var(--faris-sm-border-radius);width:2em;height:2em;cursor:pointer;font-size:1.1em;padding:0;transition:all .2s ease}.conversations-history .conversations-header .history-close-button:hover{background-color:#0000000d}.conversations-history .conversations-list{display:flex;flex-direction:column;padding:.5em;gap:.5em;overflow-y:auto;height:calc(100vh - 50px)}.conversations-history .conversation-title-group{flex:1;overflow:hidden}.conversations-history .conversation-title-group .conversation-title{font-size:.98em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:inherit}.conversations-history .conversation-title-group .conversation-subtitle{font-size:.9em;opacity:.8}.conversations-history .conversation-group-header{margin-top:1em;margin-bottom:.5em;font-size:1.1em}.conversations-history .conversation-item{cursor:pointer;color:#333;border-radius:var(--faris-border-radius);transition:background .15s;-webkit-user-select:none;user-select:none}.conversations-history .conversation-item .conversation-actions{display:flex;align-items:center;gap:.5em;opacity:0;transition:all .2s ease}.conversations-history .conversation-item:hover .conversation-actions{opacity:1}.conversations-history mt-icon{font-size:1.2em}.conversations-history .conversation-item{gap:.5em}.conversations-history .conversation-item.active,.conversations-history .conversation-item.active-conversation{background:#e3f2fd;color:var(--primary-color);font-weight:600}.conversations-history .conversation-item:hover:not(.active-conversation){background:#f1f1f1}.closed-chat-history-side{width:0px!important;min-width:0px!important;border-inline-end:none!important}\n"], dependencies: [{ kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "pipe", type: FarisTranslatePipe, name: "translate" }, { kind: "pipe", type: ParseMentionPipe, name: "parseMention" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisChatHistoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-faris-chat-history', standalone: true, imports: [FarisTranslatePipe, ParseMentionPipe, Button, Icon], template: "<div\r\n  class=\"conversations-history\"\r\n  [class.closed-chat-history-side]=\"!showChatHistory\"\r\n>\r\n  <div class=\"conversations-header\">\r\n    <span class=\"conversations-title\">{{\r\n      \"faris.chat-history\" | translate\r\n    }}</span>\r\n    <mt-button\r\n      type=\"button\"\r\n      icon=\"general.x-close\"\r\n      variant=\"text\"\r\n      styleClass=\"faris-btn\"\r\n      (click)=\"onCloseHistory()\"\r\n    ></mt-button>\r\n  </div>\r\n\r\n  <div class=\"conversations-list\">\r\n    @for (group of groupedConversations; track group.label) {\r\n      <div class=\"conversation-group-header\">{{ group.label }}</div>\r\n\r\n      @for (conversation of group.conversations; track conversation.id) {\r\n        <div\r\n          class=\"conversation-item flex w-full cursor-pointer items-center justify-between gap-2 rounded-md p-2\"\r\n          (click)=\"onSelectConversation(conversation)\"\r\n          [class.active-conversation]=\"\r\n            selectedConversation?.id === conversation.id\r\n          \"\r\n        >\r\n          <mt-icon icon=\"communication.message-chat-circle\"></mt-icon>\r\n\r\n          <div class=\"conversation-title-group\">\r\n            <div class=\"conversation-title\">\r\n              {{ (conversation?.title | parseMention) || \" \" }}\r\n            </div>\r\n            <div class=\"conversation-subtitle\">\r\n              {{ conversation.displayDate }}\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"conversation-actions\">\r\n            <mt-button\r\n              type=\"button\"\r\n              icon=\"general.trash-01\"\r\n              variant=\"text\"\r\n              styleClass=\"faris-btn faris-btn-muted text-red-600\"\r\n              [tooltip]=\"'faris.delete' | translate\"\r\n              (click)=\"onDeleteConversation($event, conversation?.id)\"\r\n            ></mt-button>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".conversations-history{display:flex;flex-direction:column;height:100%;background:#f8f9fa;border-inline-end:1px solid #e0e0e0;overflow-y:auto;width:20vw;min-width:220px;max-width:320px;transition:width .2s;overflow-x:hidden}.conversations-history .conversations-header{display:flex;align-items:center;justify-content:space-between;padding:.5em .75em;font-size:1.1em;font-weight:500;color:#333;border-bottom:1px solid #e0e0e0}.conversations-history .conversations-header .history-close-button{display:flex;align-items:center;justify-content:center;border:1px solid transparent;background-color:transparent;border-radius:var(--faris-sm-border-radius);width:2em;height:2em;cursor:pointer;font-size:1.1em;padding:0;transition:all .2s ease}.conversations-history .conversations-header .history-close-button:hover{background-color:#0000000d}.conversations-history .conversations-list{display:flex;flex-direction:column;padding:.5em;gap:.5em;overflow-y:auto;height:calc(100vh - 50px)}.conversations-history .conversation-title-group{flex:1;overflow:hidden}.conversations-history .conversation-title-group .conversation-title{font-size:.98em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:inherit}.conversations-history .conversation-title-group .conversation-subtitle{font-size:.9em;opacity:.8}.conversations-history .conversation-group-header{margin-top:1em;margin-bottom:.5em;font-size:1.1em}.conversations-history .conversation-item{cursor:pointer;color:#333;border-radius:var(--faris-border-radius);transition:background .15s;-webkit-user-select:none;user-select:none}.conversations-history .conversation-item .conversation-actions{display:flex;align-items:center;gap:.5em;opacity:0;transition:all .2s ease}.conversations-history .conversation-item:hover .conversation-actions{opacity:1}.conversations-history mt-icon{font-size:1.2em}.conversations-history .conversation-item{gap:.5em}.conversations-history .conversation-item.active,.conversations-history .conversation-item.active-conversation{background:#e3f2fd;color:var(--primary-color);font-weight:600}.conversations-history .conversation-item:hover:not(.active-conversation){background:#f1f1f1}.closed-chat-history-side{width:0px!important;min-width:0px!important;border-inline-end:none!important}\n"] }]
+        }], propDecorators: { userConversations: [{
+                type: Input
+            }], showChatHistory: [{
+                type: Input
+            }], selectedConversation: [{
+                type: Input
+            }], selectConversation: [{
+                type: Output
+            }], deleteConversationHandler: [{
+                type: Output
+            }], closeHistory: [{
+                type: Output
+            }] } });
+
+class MinimizablePopupComponent {
+    title = '';
+    maximized = false;
+    closed = new EventEmitter();
+    direction = 'ltr';
+    isClosing = false;
+    document = inject(DOCUMENT);
+    ngOnInit() {
+        this.document.body.style.overflow = 'hidden';
+        this.direction =
+            this.document.documentElement.dir === 'rtl' ? 'rtl' : 'ltr';
+    }
+    ngOnDestroy() {
+        this.document.body.style.overflow = 'auto';
+    }
+    get enterTransform() {
+        return this.direction === 'rtl' ? 'translateX(-100%)' : 'translateX(100%)';
+    }
+    get leaveTransform() {
+        return this.direction === 'rtl' ? 'translateX(-100%)' : 'translateX(100%)';
+    }
+    close() {
+        this.isClosing = true;
+    }
+    onAnimationDone(event) {
+        if (event.toState === 'void' && this.isClosing) {
+            this.closed.emit(true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MinimizablePopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MinimizablePopupComponent, isStandalone: true, selector: "mt-faris-popup", inputs: { title: "title", maximized: "maximized" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"custom-window-backdrop\"></div>\r\n@if (!isClosing) {\r\n  <div\r\n    class=\"custom-window-modal\"\r\n    [@slideInOut]=\"{\r\n      value: '',\r\n      params: {\r\n        enterTransform: enterTransform,\r\n        leaveTransform: leaveTransform,\r\n      },\r\n    }\"\r\n    (@slideInOut.done)=\"onAnimationDone($event)\"\r\n  >\r\n    <ng-content select=\"[panelCanvas]\"></ng-content>\r\n    <div class=\"custom-window-container\" [class.maximized]=\"maximized\">\r\n      <ng-content select=\"[panelSidebar]\"></ng-content>\r\n      <div class=\"resizable-panel\">\r\n        <div class=\"panel-content\">\r\n          <div\r\n            class=\"modal-header flex items-center justify-between p-4 border-bottom-1 border-b border-surface-300\"\r\n          >\r\n            <h5 class=\"modal-title custom-window-title\">\r\n              <ng-content select=\"[panelTitle]\"></ng-content>\r\n            </h5>\r\n            <div class=\"modal-controls flex items-center\">\r\n              <ng-content select=\"[panelActions]\"></ng-content>\r\n              <mt-button\r\n                type=\"button\"\r\n                icon=\"general.x-close\"\r\n                variant=\"text\"\r\n                styleClass=\"faris-btn\"\r\n                (click)=\"close()\"\r\n              ></mt-button>\r\n            </div>\r\n          </div>\r\n          <div class=\"modal-body w-full\">\r\n            <ng-content select=\"[panelChat]\"></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@keyframes smooth-appear{0%{opacity:0}to{opacity:1}}:host{display:block;position:fixed;inset:0;z-index:1501!important}.custom-window-backdrop{position:fixed;inset:0;background-color:#0003;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1500!important}.custom-window-modal{position:relative;display:flex;justify-content:flex-end;z-index:1501!important}.custom-window-modal .modal-header{background:#fff;border-radius:0!important}.custom-window-modal .modal-controls{display:flex;align-items:center;justify-content:flex-end;gap:.5em}.custom-window-modal .modal-controls button{margin-left:.25em}.custom-window-modal .modal-body{height:calc(100% - 79px)!important;max-height:100%!important;padding:1em 0!important}.custom-window-modal .custom-window-container{display:flex;justify-content:flex-end;transition:all .4s ease}.custom-window-modal .custom-window-container.maximized,.custom-window-modal .custom-window-container.maximized .resizable-panel{flex:1}.custom-window-title{flex:1;overflow:hidden}.minimized-tab{position:fixed;bottom:10px;left:0;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.resizable-container{position:fixed;inset:0;display:flex;justify-content:flex-end;pointer-events:none;transition:all .4s ease;transform:translate(0);align-items:end}.resizable-container.resizing{background-color:#0000001a;pointer-events:auto}.resizable-panel{position:relative;flex:1;width:35vw;min-width:600px;height:100vh;background:#fff;pointer-events:auto;display:flex;flex-direction:column;align-items:end}.resize-handle{height:6px;cursor:ns-resize;background:#ccc;position:absolute;top:0;left:0;right:0}.resize-handle.horizontal{width:3px;height:100%;cursor:ew-resize;z-index:1500}.panel-content{flex:1;overflow:auto;width:100%}.custom-close-badge{top:-30%;right:-10%}.minimized-tab-1{left:115px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-2{left:230px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-3{left:345px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-4{left:460px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-5{left:575px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-6{left:690px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-7{left:805px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-8{left:920px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-9{left:1035px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-10{left:1150px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-11{left:1265px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-12{left:1380px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-13{left:1495px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-14{left:1610px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-15{left:1725px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-16{left:1840px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-17{left:1955px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-18{left:2070px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-19{left:2185px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-20{left:2300px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-1{right:115px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-2{right:230px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-3{right:345px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-4{right:460px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-5{right:575px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-6{right:690px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-7{right:805px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-8{right:920px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-9{right:1035px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-10{right:1150px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-11{right:1265px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-12{right:1380px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-13{right:1495px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-14{right:1610px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-15{right:1725px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-16{right:1840px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-17{right:1955px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-18{right:2070px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-19{right:2185px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-20{right:2300px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .custom-close-badge{left:-10%;right:auto}\n"], dependencies: [{ kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }], animations: [
+            trigger('slideInOut', [
+                transition(':enter', [
+                    style({ transform: '{{enterTransform}}' }),
+                    animate('300ms cubic-bezier(0.4,0,0.2,1)', style({ transform: 'translateX(0)' })),
+                ], { params: { enterTransform: 'translateX(100%)' } }),
+                transition(':leave', [
+                    animate('300ms cubic-bezier(0.4,0,0.2,1)', style({ transform: '{{leaveTransform}}' })),
+                ], { params: { leaveTransform: 'translateX(100%)' } }),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MinimizablePopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-faris-popup', standalone: true, imports: [Button], animations: [
+                        trigger('slideInOut', [
+                            transition(':enter', [
+                                style({ transform: '{{enterTransform}}' }),
+                                animate('300ms cubic-bezier(0.4,0,0.2,1)', style({ transform: 'translateX(0)' })),
+                            ], { params: { enterTransform: 'translateX(100%)' } }),
+                            transition(':leave', [
+                                animate('300ms cubic-bezier(0.4,0,0.2,1)', style({ transform: '{{leaveTransform}}' })),
+                            ], { params: { leaveTransform: 'translateX(100%)' } }),
+                        ]),
+                    ], template: "<div class=\"custom-window-backdrop\"></div>\r\n@if (!isClosing) {\r\n  <div\r\n    class=\"custom-window-modal\"\r\n    [@slideInOut]=\"{\r\n      value: '',\r\n      params: {\r\n        enterTransform: enterTransform,\r\n        leaveTransform: leaveTransform,\r\n      },\r\n    }\"\r\n    (@slideInOut.done)=\"onAnimationDone($event)\"\r\n  >\r\n    <ng-content select=\"[panelCanvas]\"></ng-content>\r\n    <div class=\"custom-window-container\" [class.maximized]=\"maximized\">\r\n      <ng-content select=\"[panelSidebar]\"></ng-content>\r\n      <div class=\"resizable-panel\">\r\n        <div class=\"panel-content\">\r\n          <div\r\n            class=\"modal-header flex items-center justify-between p-4 border-bottom-1 border-b border-surface-300\"\r\n          >\r\n            <h5 class=\"modal-title custom-window-title\">\r\n              <ng-content select=\"[panelTitle]\"></ng-content>\r\n            </h5>\r\n            <div class=\"modal-controls flex items-center\">\r\n              <ng-content select=\"[panelActions]\"></ng-content>\r\n              <mt-button\r\n                type=\"button\"\r\n                icon=\"general.x-close\"\r\n                variant=\"text\"\r\n                styleClass=\"faris-btn\"\r\n                (click)=\"close()\"\r\n              ></mt-button>\r\n            </div>\r\n          </div>\r\n          <div class=\"modal-body w-full\">\r\n            <ng-content select=\"[panelChat]\"></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@keyframes smooth-appear{0%{opacity:0}to{opacity:1}}:host{display:block;position:fixed;inset:0;z-index:1501!important}.custom-window-backdrop{position:fixed;inset:0;background-color:#0003;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1500!important}.custom-window-modal{position:relative;display:flex;justify-content:flex-end;z-index:1501!important}.custom-window-modal .modal-header{background:#fff;border-radius:0!important}.custom-window-modal .modal-controls{display:flex;align-items:center;justify-content:flex-end;gap:.5em}.custom-window-modal .modal-controls button{margin-left:.25em}.custom-window-modal .modal-body{height:calc(100% - 79px)!important;max-height:100%!important;padding:1em 0!important}.custom-window-modal .custom-window-container{display:flex;justify-content:flex-end;transition:all .4s ease}.custom-window-modal .custom-window-container.maximized,.custom-window-modal .custom-window-container.maximized .resizable-panel{flex:1}.custom-window-title{flex:1;overflow:hidden}.minimized-tab{position:fixed;bottom:10px;left:0;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.resizable-container{position:fixed;inset:0;display:flex;justify-content:flex-end;pointer-events:none;transition:all .4s ease;transform:translate(0);align-items:end}.resizable-container.resizing{background-color:#0000001a;pointer-events:auto}.resizable-panel{position:relative;flex:1;width:35vw;min-width:600px;height:100vh;background:#fff;pointer-events:auto;display:flex;flex-direction:column;align-items:end}.resize-handle{height:6px;cursor:ns-resize;background:#ccc;position:absolute;top:0;left:0;right:0}.resize-handle.horizontal{width:3px;height:100%;cursor:ew-resize;z-index:1500}.panel-content{flex:1;overflow:auto;width:100%}.custom-close-badge{top:-30%;right:-10%}.minimized-tab-1{left:115px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-2{left:230px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-3{left:345px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-4{left:460px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-5{left:575px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-6{left:690px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-7{left:805px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-8{left:920px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-9{left:1035px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-10{left:1150px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-11{left:1265px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-12{left:1380px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-13{left:1495px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-14{left:1610px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-15{left:1725px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-16{left:1840px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-17{left:1955px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-18{left:2070px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-19{left:2185px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}.minimized-tab-20{left:2300px;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-1{right:115px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-2{right:230px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-3{right:345px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-4{right:460px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-5{right:575px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-6{right:690px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-7{right:805px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-8{right:920px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-9{right:1035px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-10{right:1150px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-11{right:1265px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-12{right:1380px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-13{right:1495px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-14{right:1610px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-15{right:1725px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-16{right:1840px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-17{right:1955px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-18{right:2070px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-19{right:2185px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .minimized-tab-20{right:2300px;left:auto;position:fixed;bottom:10px;z-index:1501;background-color:var(--primary-color, #2a2e34);color:#fff;border:none;padding:.5em 1em;border-radius:.25em;cursor:pointer}::ng-deep [lang=ar] .custom-close-badge{left:-10%;right:auto}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], maximized: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }] } });
+
+const initialCanvasData = {
+    visible: false,
+    message: null,
+    conversationId: null,
+};
+class FarisComponent {
+    showChatBot = false;
+    showChatBotChange = new EventEmitter();
+    showChatHistory = false;
+    userConversations = [];
+    selectedConversation = null;
+    canvasData = initialCanvasData;
+    maximized = false;
+    subscription;
+    subscriptions = new Subscription();
+    farisService = inject(FarisService);
+    confirmationService = inject(ConfirmationService);
+    getUserDetails() {
+        this.subscriptions.add(this.farisService.getUserDetails().subscribe());
+    }
+    ngOnChanges(changes) {
+        if (!changes['showChatBot']) {
+            return;
+        }
+        if (changes['showChatBot'].currentValue) {
+            this.onChatOpened();
+            return;
+        }
+        this.onChatClosed();
+    }
+    launchCanvas(item) {
+        this.canvasData = {
+            visible: true,
+            message: item,
+            conversationId: this.selectedConversation?.id ?? null,
+        };
+    }
+    onDeleteConversationHandler({ event, id, }) {
+        this.confirmationService.confirmDelete({
+            event,
+            type: 'popup',
+            accept: () => {
+                this.deleteConversation(id);
+            },
+            reject: () => { },
+        });
+    }
+    deleteConversation(id) {
+        this.subscriptions.add(this.farisService.deleteConversation(String(id)).subscribe(() => {
+            if (id === this.selectedConversation?.id) {
+                this.openNewChat();
+            }
+            setTimeout(() => {
+                this.getUserDetails();
+            }, 250);
+        }));
+    }
+    selectConversation(conversation) {
+        if (this.selectedConversation !== conversation) {
+            this.selectedConversation = conversation;
+            this.canvasData = initialCanvasData;
+        }
+    }
+    onSelectConversation(conversation) {
+        this.selectConversation(conversation);
+    }
+    onCloseHistory() {
+        this.showChatHistory = false;
+    }
+    toggleChatHistory() {
+        this.showChatHistory = !this.showChatHistory;
+        if (this.showChatHistory) {
+            this.getUserDetails();
+        }
+    }
+    openFarisChat() {
+        this.showChatBot = !this.showChatBot;
+        this.showChatBotChange.emit(this.showChatBot);
+        if (this.showChatBot) {
+            this.onChatOpened();
+            return;
+        }
+        this.onChatClosed();
+    }
+    getUniqueArrayByProperty(array) {
+        const uniqueMap = new Map();
+        array.forEach((item, index) => {
+            const key = item?.id ??
+                item?.session_id ??
+                item?.sessionId ??
+                item?.conversation_id ??
+                item?.conversationId ??
+                `conversation-${index}`;
+            uniqueMap.set(String(key), item);
+        });
+        return Array.from(uniqueMap.values());
+    }
+    closeChatBot() {
+        this.showChatBot = false;
+        this.showChatBotChange.emit(false);
+        this.onChatClosed();
+        this.selectedConversation = null;
+        this.maximized = false;
+        this.canvasData = initialCanvasData;
+    }
+    openNewChat() {
+        this.selectConversation(null);
+    }
+    ngOnDestroy() {
+        if (this.subscription && !this.subscription.closed) {
+            this.subscription.unsubscribe();
+        }
+        if (!this.subscriptions.closed) {
+            this.subscriptions.unsubscribe();
+        }
+    }
+    onChatOpened() {
+        this.getUserDetails();
+        if (this.subscription && !this.subscription.closed) {
+            return;
+        }
+        this.subscriptions.add((this.subscription = this.farisService.conversations.subscribe((value) => {
+            if (!value.length) {
+                this.selectConversation(null);
+            }
+            this.userConversations = this.getUniqueArrayByProperty(value);
+        })));
+    }
+    onChatClosed() {
+        this.farisService.conversations.next([]);
+        this.showChatHistory = false;
+        this.userConversations = [];
+        this.farisService.clearSession();
+        if (this.subscription && !this.subscription.closed) {
+            this.subscription.unsubscribe();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FarisComponent, isStandalone: true, selector: "mt-faris", inputs: { showChatBot: "showChatBot" }, outputs: { showChatBotChange: "showChatBotChange" }, usesOnChanges: true, ngImport: i0, template: "@if (showChatBot) {\r\n  <mt-faris-popup\r\n    class=\"chat-bot-popup\"\r\n    [maximized]=\"maximized && !canvasData.visible\"\r\n    (closed)=\"closeChatBot()\"\r\n  >\r\n    <div panelTitle class=\"faris-title-container\">\r\n      <div class=\"gemini-ic has-hover\">\r\n        <svg\r\n          focusable=\"false\"\r\n          viewBox=\"0 -960 960 960\"\r\n          height=\"28\"\r\n          width=\"28\"\r\n          class=\"EiVpKc aoH\"\r\n        >\r\n          <path\r\n            d=\"M480-80q2,0 2-2q0-82 31-154t85-126t126-85t154-31q2,0 2-2t-2-2q-82,0-154-31T598-598T513-724T482-878q0-2-2-2t-2,2q0,82-31,154T362-598T236-513T82-482q-2,0-2,2t2,2q82,0 154,31t126,85t85,126T478-82q0,2 2,2Z\"\r\n          ></path>\r\n        </svg>\r\n      </div>\r\n      <div class=\"faris-title-group\">\r\n        <div class=\"faris-title\">Ask Faris</div>\r\n        <div\r\n          class=\"faris-subtitle\"\r\n          [title]=\"(selectedConversation?.title | parseMention) ?? ''\"\r\n        >\r\n          {{\r\n            (selectedConversation?.title | parseMention) ||\r\n              (\"faris.new-conversation\" | translate)\r\n          }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container panelActions>\r\n      <mt-button\r\n        type=\"button\"\r\n        icon=\"general.plus\"\r\n        variant=\"text\"\r\n        styleClass=\"faris-btn\"\r\n        (click)=\"openNewChat()\"\r\n      ></mt-button>\r\n      <mt-button\r\n        type=\"button\"\r\n        [icon]=\"maximized ? 'layout.minimize-02' : 'layout.maximize-02'\"\r\n        variant=\"text\"\r\n        styleClass=\"faris-btn\"\r\n        (click)=\"maximized = !maximized\"\r\n      ></mt-button>\r\n      <mt-button\r\n        type=\"button\"\r\n        icon=\"custom.history-sp\"\r\n        variant=\"text\"\r\n        styleClass=\"faris-btn\"\r\n        (click)=\"toggleChatHistory()\"\r\n      ></mt-button>\r\n    </ng-container>\r\n\r\n    @if (canvasData.visible) {\r\n      <mt-faris-canvas\r\n        [message]=\"canvasData.message\"\r\n        [conversationId]=\"canvasData.conversationId\"\r\n        class=\"flex-1\"\r\n        panelCanvas\r\n        (closed)=\"canvasData.visible = false\"\r\n      ></mt-faris-canvas>\r\n    }\r\n\r\n    <mt-faris-chat-history\r\n      panelSidebar\r\n      [userConversations]=\"userConversations\"\r\n      [showChatHistory]=\"showChatHistory\"\r\n      [selectedConversation]=\"selectedConversation\"\r\n      (selectConversation)=\"onSelectConversation($event)\"\r\n      (deleteConversationHandler)=\"onDeleteConversationHandler($event)\"\r\n      (closeHistory)=\"onCloseHistory()\"\r\n    >\r\n    </mt-faris-chat-history>\r\n\r\n    <div panelChat class=\"flex h-full w-full\">\r\n      <mt-faris-chat\r\n        class=\"w-full\"\r\n        (launchCanvas)=\"launchCanvas($event)\"\r\n        (selectConversation)=\"onSelectConversation($event)\"\r\n        [selectedConversation]=\"selectedConversation\"\r\n      >\r\n      </mt-faris-chat>\r\n    </div>\r\n  </mt-faris-popup>\r\n}\r\n", styles: [":host{font-size:15.4545px}::ng-deep :root{--faris-border-radius: 8px;--faris-sm-border-radius: 5px;--faris-lg-border-radius: 10px}::ng-deep .faris-btn{display:flex;align-items:center;justify-content:center;border:1px solid transparent;background-color:transparent;border-radius:var(--faris-sm-border-radius);width:2em;height:2em;cursor:pointer;font-size:1.1em;padding:0;transition:all .2s ease}::ng-deep .faris-btn-muted{color:#99a1af}::ng-deep .faris-btn:hover{background-color:#0000000d}::ng-deep .faris-btn-lg{width:2.5em;height:2.5em;font-size:1.4em}::ng-deep .faris-btn:disabled{cursor:not-allowed;opacity:.7}::ng-deep .gemini-ic{display:inline-block;cursor:pointer;transition:transform .3s ease;transform-origin:center center;position:relative}::ng-deep .gemini-ic svg{fill:#4a90e2;transition:fill .3s ease;filter:drop-shadow(0 0 2px rgba(74,144,226,.5))}::ng-deep .gemini-ic.has-hover:hover{animation:gemini-hover-animation 1.5s infinite alternate ease-in-out;transform-origin:center center}::ng-deep .gemini-ic:hover svg{fill:#4a90e2;filter:drop-shadow(0 0 8px rgba(123,207,255,.9))}::ng-deep .gemini-ic.rotating{display:flex;width:22px;height:22px;animation:rotate 2s linear infinite;transform-origin:center center}@keyframes gemini-hover-animation{0%{transform:scale(1) rotate(0);filter:drop-shadow(0 0 2px rgba(74,144,226,.5))}50%{transform:scale(1.15) rotate(10deg);filter:drop-shadow(0 0 12px rgb(123,207,255))}to{transform:scale(1) rotate(-10deg);filter:drop-shadow(0 0 2px rgba(74,144,226,.5))}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.faris-title-container{display:flex;align-items:center;font-weight:500;gap:.5em;overflow:hidden}.faris-title-container .faris-title-group{flex:1;overflow:hidden}.faris-title-container .faris-title-group .faris-title{font-size:1em}.faris-title-container .faris-title-group .faris-subtitle{font-size:.9em;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.closed-chat-history-side{min-width:60px!important}.hide-shadow-btn:focus{box-shadow:none!important}.conversation-item{height:40px}.conversation-item.active-conversation{background-color:var(--primary-color);color:var(--white)}.conversation-item.active-conversation mt-icon{color:var(--white)}.conversation-item label{font-size:15px;font-weight:600;line-height:20px}\n"], dependencies: [{ kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: MinimizablePopupComponent, selector: "mt-faris-popup", inputs: ["title", "maximized"], outputs: ["closed"] }, { kind: "component", type: FarisCanvasComponent, selector: "mt-faris-canvas", inputs: ["message", "conversationId"], outputs: ["closed"] }, { kind: "component", type: FarisChatHistoryComponent, selector: "mt-faris-chat-history", inputs: ["userConversations", "showChatHistory", "selectedConversation"], outputs: ["selectConversation", "deleteConversationHandler", "closeHistory"] }, { kind: "component", type: FarisChatComponent, selector: "mt-faris-chat", inputs: ["selectedConversation"], outputs: ["launchCanvas", "selectConversation"] }, { kind: "pipe", type: ParseMentionPipe, name: "parseMention" }, { kind: "pipe", type: FarisTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FarisComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-faris', standalone: true, imports: [
+                        Button,
+                        MinimizablePopupComponent,
+                        ParseMentionPipe,
+                        FarisTranslatePipe,
+                        FarisCanvasComponent,
+                        FarisChatHistoryComponent,
+                        FarisChatComponent,
+                    ], template: "@if (showChatBot) {\r\n  <mt-faris-popup\r\n    class=\"chat-bot-popup\"\r\n    [maximized]=\"maximized && !canvasData.visible\"\r\n    (closed)=\"closeChatBot()\"\r\n  >\r\n    <div panelTitle class=\"faris-title-container\">\r\n      <div class=\"gemini-ic has-hover\">\r\n        <svg\r\n          focusable=\"false\"\r\n          viewBox=\"0 -960 960 960\"\r\n          height=\"28\"\r\n          width=\"28\"\r\n          class=\"EiVpKc aoH\"\r\n        >\r\n          <path\r\n            d=\"M480-80q2,0 2-2q0-82 31-154t85-126t126-85t154-31q2,0 2-2t-2-2q-82,0-154-31T598-598T513-724T482-878q0-2-2-2t-2,2q0,82-31,154T362-598T236-513T82-482q-2,0-2,2t2,2q82,0 154,31t126,85t85,126T478-82q0,2 2,2Z\"\r\n          ></path>\r\n        </svg>\r\n      </div>\r\n      <div class=\"faris-title-group\">\r\n        <div class=\"faris-title\">Ask Faris</div>\r\n        <div\r\n          class=\"faris-subtitle\"\r\n          [title]=\"(selectedConversation?.title | parseMention) ?? ''\"\r\n        >\r\n          {{\r\n            (selectedConversation?.title | parseMention) ||\r\n              (\"faris.new-conversation\" | translate)\r\n          }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container panelActions>\r\n      <mt-button\r\n        type=\"button\"\r\n        icon=\"general.plus\"\r\n        variant=\"text\"\r\n        styleClass=\"faris-btn\"\r\n        (click)=\"openNewChat()\"\r\n      ></mt-button>\r\n      <mt-button\r\n        type=\"button\"\r\n        [icon]=\"maximized ? 'layout.minimize-02' : 'layout.maximize-02'\"\r\n        variant=\"text\"\r\n        styleClass=\"faris-btn\"\r\n        (click)=\"maximized = !maximized\"\r\n      ></mt-button>\r\n      <mt-button\r\n        type=\"button\"\r\n        icon=\"custom.history-sp\"\r\n        variant=\"text\"\r\n        styleClass=\"faris-btn\"\r\n        (click)=\"toggleChatHistory()\"\r\n      ></mt-button>\r\n    </ng-container>\r\n\r\n    @if (canvasData.visible) {\r\n      <mt-faris-canvas\r\n        [message]=\"canvasData.message\"\r\n        [conversationId]=\"canvasData.conversationId\"\r\n        class=\"flex-1\"\r\n        panelCanvas\r\n        (closed)=\"canvasData.visible = false\"\r\n      ></mt-faris-canvas>\r\n    }\r\n\r\n    <mt-faris-chat-history\r\n      panelSidebar\r\n      [userConversations]=\"userConversations\"\r\n      [showChatHistory]=\"showChatHistory\"\r\n      [selectedConversation]=\"selectedConversation\"\r\n      (selectConversation)=\"onSelectConversation($event)\"\r\n      (deleteConversationHandler)=\"onDeleteConversationHandler($event)\"\r\n      (closeHistory)=\"onCloseHistory()\"\r\n    >\r\n    </mt-faris-chat-history>\r\n\r\n    <div panelChat class=\"flex h-full w-full\">\r\n      <mt-faris-chat\r\n        class=\"w-full\"\r\n        (launchCanvas)=\"launchCanvas($event)\"\r\n        (selectConversation)=\"onSelectConversation($event)\"\r\n        [selectedConversation]=\"selectedConversation\"\r\n      >\r\n      </mt-faris-chat>\r\n    </div>\r\n  </mt-faris-popup>\r\n}\r\n", styles: [":host{font-size:15.4545px}::ng-deep :root{--faris-border-radius: 8px;--faris-sm-border-radius: 5px;--faris-lg-border-radius: 10px}::ng-deep .faris-btn{display:flex;align-items:center;justify-content:center;border:1px solid transparent;background-color:transparent;border-radius:var(--faris-sm-border-radius);width:2em;height:2em;cursor:pointer;font-size:1.1em;padding:0;transition:all .2s ease}::ng-deep .faris-btn-muted{color:#99a1af}::ng-deep .faris-btn:hover{background-color:#0000000d}::ng-deep .faris-btn-lg{width:2.5em;height:2.5em;font-size:1.4em}::ng-deep .faris-btn:disabled{cursor:not-allowed;opacity:.7}::ng-deep .gemini-ic{display:inline-block;cursor:pointer;transition:transform .3s ease;transform-origin:center center;position:relative}::ng-deep .gemini-ic svg{fill:#4a90e2;transition:fill .3s ease;filter:drop-shadow(0 0 2px rgba(74,144,226,.5))}::ng-deep .gemini-ic.has-hover:hover{animation:gemini-hover-animation 1.5s infinite alternate ease-in-out;transform-origin:center center}::ng-deep .gemini-ic:hover svg{fill:#4a90e2;filter:drop-shadow(0 0 8px rgba(123,207,255,.9))}::ng-deep .gemini-ic.rotating{display:flex;width:22px;height:22px;animation:rotate 2s linear infinite;transform-origin:center center}@keyframes gemini-hover-animation{0%{transform:scale(1) rotate(0);filter:drop-shadow(0 0 2px rgba(74,144,226,.5))}50%{transform:scale(1.15) rotate(10deg);filter:drop-shadow(0 0 12px rgb(123,207,255))}to{transform:scale(1) rotate(-10deg);filter:drop-shadow(0 0 2px rgba(74,144,226,.5))}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.faris-title-container{display:flex;align-items:center;font-weight:500;gap:.5em;overflow:hidden}.faris-title-container .faris-title-group{flex:1;overflow:hidden}.faris-title-container .faris-title-group .faris-title{font-size:1em}.faris-title-container .faris-title-group .faris-subtitle{font-size:.9em;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.closed-chat-history-side{min-width:60px!important}.hide-shadow-btn:focus{box-shadow:none!important}.conversation-item{height:40px}.conversation-item.active-conversation{background-color:var(--primary-color);color:var(--white)}.conversation-item.active-conversation mt-icon{color:var(--white)}.conversation-item label{font-size:15px;font-weight:600;line-height:20px}\n"] }]
+        }], propDecorators: { showChatBot: [{
+                type: Input
+            }], showChatBotChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FarisComponent, FarisService, resolveFarisAuthFromLocalStorage };
+//# sourceMappingURL=masterteam-faris.mjs.map