@m6d/cortex-client 1.0.0

package/fesm2022/m6d-cortex-client.mjs

@@ -0,0 +1,1286 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, NgZone, Injectable, signal, DestroyRef, Pipe, input, ChangeDetectionStrategy, Component, computed, forwardRef, effect, viewChild, model, Injector } from '@angular/core';
+import { Chat } from '@ai-sdk/angular';
+import { DefaultChatTransport, lastAssistantMessageIsCompleteWithToolCalls, isStaticToolUIPart, generateId } from 'ai';
+import { Observable, retry, timer, share, Subject, of, defer, finalize, tap, switchMap, map, concatMap } from 'rxjs';
+import { fromPromise } from 'rxjs/internal/observable/innerFrom';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1$1 from '@angular/forms';
+import { FormControl, Validators, FormBuilder, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { TranslatePipe, TranslateService, provideTranslateService, provideTranslateLoader } from '@ngx-translate/core';
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import * as i1 from '@angular/platform-browser';
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import sql from 'highlight.js/lib/languages/sql';
+
+const CORTEX_CLIENT_CONFIG = new InjectionToken('CORTEX_CLIENT_CONFIG');
+
+class CortexClientWebSocketService {
+    events$;
+    constructor() {
+        const config = inject(CORTEX_CLIENT_CONFIG);
+        const ngZone = inject(NgZone);
+        this.events$ = new Observable((subscriber) => {
+            const wsUrl = config.wsUrl ?? deriveWsUrl(config.transport.baseUrl);
+            let ws;
+            Promise.resolve(config.transport.getAuthHeaders()).then((headers) => {
+                if (subscriber.closed)
+                    return;
+                const fullWsUrl = appendTokenToUrl(wsUrl, headers);
+                ws = new WebSocket(fullWsUrl);
+                ws.addEventListener('message', (event) => {
+                    let parsed;
+                    try {
+                        parsed = JSON.parse(event.data);
+                    }
+                    catch {
+                        return;
+                    }
+                    ngZone.run(() => subscriber.next(parsed));
+                });
+                ws.addEventListener('error', (e) => subscriber.error(e));
+                ws.addEventListener('close', () => subscriber.error(new Error('WebSocket closed')));
+            });
+            return () => ws?.close();
+        }).pipe(retry({
+            delay: (_, retryCount) => timer(Math.min(1000 * 2 ** (retryCount - 1), 30_000)),
+        }), share());
+    }
+    get events() {
+        return this.events$;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CortexClientWebSocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CortexClientWebSocketService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CortexClientWebSocketService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+function deriveWsUrl(baseUrl) {
+    const url = typeof baseUrl === 'string' ? baseUrl : baseUrl();
+    const parsed = new URL(url, window.location.origin);
+    parsed.protocol = parsed.protocol === 'https:' ? 'wss:' : 'ws:';
+    parsed.pathname = parsed.pathname.replace(/\/$/, '') + '/ws';
+    return parsed.toString();
+}
+function appendTokenToUrl(wsUrl, headers) {
+    const authHeader = headers['Authorization'] ?? headers['authorization'];
+    if (!authHeader?.startsWith('Bearer '))
+        return wsUrl;
+    const token = authHeader.slice(7);
+    const separator = wsUrl.includes('?') ? '&' : '?';
+    return `${wsUrl}${separator}token=${encodeURIComponent(token)}`;
+}
+
+class CortexChatService {
+    threads = signal(undefined, ...(ngDevMode ? [{ debugName: "threads" }] : []));
+    selectedThread = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedThread" }] : []));
+    chat = signal(undefined, ...(ngDevMode ? [{ debugName: "chat" }] : []));
+    isLoadingMessages = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingMessages" }] : []));
+    isAgentWorking = signal(false, ...(ngDevMode ? [{ debugName: "isAgentWorking" }] : []));
+    hasPendingToolCalls = signal(false, ...(ngDevMode ? [{ debugName: "hasPendingToolCalls" }] : []));
+    events = new Subject();
+    config = inject(CORTEX_CLIENT_CONFIG);
+    wsService = inject(CortexClientWebSocketService);
+    destroyRef = inject(DestroyRef);
+    constructor() {
+        this.reloadThreads().subscribe();
+        this.subscribeToWsEvents();
+    }
+    get events$() {
+        return this.events.asObservable();
+    }
+    selectThread(thread, options) {
+        if (this.isLoadingMessages())
+            return of();
+        if (this.selectedThread()?.id === thread.id)
+            return of();
+        return (options?.skipLoadingMessages
+            ? of([])
+            : defer(() => {
+                this.isLoadingMessages.set(true);
+                return fromPromise(this.fetchJson(`/threads/${thread.id}/messages`)).pipe(finalize(() => this.isLoadingMessages.set(false)));
+            })).pipe(tap((messages) => {
+            const chat = new Chat({
+                id: thread.id,
+                sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
+                onData: () => {
+                    this.events.next('onData');
+                },
+                onToolCall: async ({ toolCall }) => {
+                    if (!this.config.onToolCall)
+                        return;
+                    const tc = toolCall;
+                    const result = this.config.onToolCall(tc);
+                    if (result == null)
+                        return;
+                    const output = result instanceof Promise ? await result : result;
+                    chat.addToolOutput({
+                        tool: tc.toolName,
+                        toolCallId: tc.toolCallId,
+                        output,
+                    });
+                },
+                onError: () => {
+                    this.isAgentWorking.set(false);
+                    this.hasPendingToolCalls.set(false);
+                    this.events.next('onError');
+                },
+                onFinish: () => {
+                    const lastAssistantMsg = [...chat.messages]
+                        .reverse()
+                        .find((m) => m.role === 'assistant');
+                    const pending = lastAssistantMsg?.parts?.some((p) => p.type.startsWith('tool-') &&
+                        p.state !== 'output-available' &&
+                        p.state !== 'output-error' &&
+                        p.state !== 'output-denied');
+                    if (pending) {
+                        this.hasPendingToolCalls.set(true);
+                    }
+                    else {
+                        this.isAgentWorking.set(false);
+                        this.hasPendingToolCalls.set(false);
+                    }
+                    this.events.next('onFinish');
+                },
+                messages: messages,
+                transport: new DefaultChatTransport({
+                    api: this.resolveUrl('/chat'),
+                    headers: async () => await this.resolveHeaders(),
+                    prepareSendMessagesRequest: ({ messages, id, body, ...rest }) => {
+                        this.isAgentWorking.set(true);
+                        this.hasPendingToolCalls.set(false);
+                        return {
+                            ...rest,
+                            body: {
+                                ...body,
+                                id,
+                                messages: [messages.at(-1)],
+                            },
+                        };
+                    },
+                }),
+            });
+            fixChat(chat);
+            this.chat.set(chat);
+            this.selectedThread.set(thread);
+            // Check if loaded messages have pending tool calls
+            const lastAssistantMsg = [...messages].reverse().find((m) => m.role === 'assistant');
+            const pending = lastAssistantMsg?.parts?.some((p) => p.type.startsWith('tool-') &&
+                p.state !== 'output-available' &&
+                p.state !== 'output-error' &&
+                p.state !== 'output-denied');
+            if (pending) {
+                this.hasPendingToolCalls.set(true);
+            }
+            this.events.next('onThreadSelected');
+        }));
+    }
+    deselectThread() {
+        if (!this.selectedThread())
+            return;
+        this.abort();
+        this.selectedThread.set(undefined);
+        this.chat.set(undefined);
+    }
+    send(prompt) {
+        if (this.isAgentWorking())
+            return of();
+        const ensureThread = this.selectedThread()
+            ? of(undefined)
+            : fromPromise(this.fetchJson('/threads', {
+                method: 'POST',
+                body: JSON.stringify({ prompt }),
+            })).pipe(switchMap((thread) => this.selectThread(thread, { skipLoadingMessages: true }).pipe(map(() => undefined))), tap(() => this.reloadThreads().subscribe()));
+        return ensureThread.pipe(switchMap(() => fromPromise(this.chat().sendMessage({ text: prompt }))), tap(() => this.events.next('onSend')));
+    }
+    abort() {
+        const chat = this.chat();
+        if (!chat || !this.isAgentWorking())
+            return;
+        chat.stop();
+        this.isAgentWorking.set(false);
+        this.hasPendingToolCalls.set(false);
+        const threadId = this.selectedThread()?.id;
+        if (!threadId)
+            return;
+        this.reloadMessages(threadId).subscribe((messages) => {
+            if (!this.chat())
+                return;
+            this.chat().messages = messages;
+        });
+    }
+    deleteThread(threadId) {
+        if (this.selectedThread()?.id === threadId)
+            this.deselectThread();
+        return fromPromise(this.fetchJson(`/threads/${threadId}`, { method: 'DELETE' })).pipe(concatMap(() => this.reloadThreads()));
+    }
+    subscribeToWsEvents() {
+        this.wsService.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+            switch (event.type) {
+                case 'thread:title-updated':
+                    this.onThreadTitleUpdated(event.payload);
+                    break;
+            }
+        });
+    }
+    onThreadTitleUpdated(payload) {
+        const current = this.threads();
+        if (current) {
+            this.threads.set(current.map((t) => (t.id === payload.threadId ? { ...t, title: payload.title } : t)));
+        }
+        const selected = this.selectedThread();
+        if (selected?.id === payload.threadId) {
+            this.selectedThread.set({ ...selected, title: payload.title });
+        }
+    }
+    reloadThreads() {
+        return fromPromise(this.fetchJson('/threads')).pipe(tap((threads) => this.threads.set(threads)));
+    }
+    reloadMessages(threadId) {
+        return fromPromise(this.fetchJson(`/threads/${threadId}/messages`));
+    }
+    resolveUrl(path) {
+        const baseUrl = this.config.transport.baseUrl;
+        const base = typeof baseUrl === 'string' ? baseUrl : baseUrl();
+        return base.replace(/\/$/, '') + path;
+    }
+    async resolveHeaders() {
+        return await Promise.resolve(this.config.transport.getAuthHeaders());
+    }
+    async fetchJson(path, init) {
+        const url = this.resolveUrl(path);
+        const headers = await this.resolveHeaders();
+        const res = await fetch(url, {
+            ...init,
+            headers: {
+                'Content-Type': 'application/json',
+                ...headers,
+                ...init?.headers,
+            },
+        });
+        if (!res.ok)
+            throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+        const text = await res.text();
+        return text ? JSON.parse(text) : undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CortexChatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CortexChatService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CortexChatService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+/**
+ * Override snapshot to avoid structuredClone failing on
+ * Object.defineProperty getter/setter parts.
+ */
+function fixChat(chat) {
+    function deepClone(value) {
+        if (value === null || value === undefined)
+            return value;
+        if (typeof value !== 'object')
+            return value;
+        if (Array.isArray(value))
+            return value.map(deepClone);
+        const result = {};
+        for (const key of Object.keys(value)) {
+            result[key] = deepClone(value[key]);
+        }
+        return result;
+    }
+    chat.state.snapshot = deepClone;
+}
+
+class MarkedPipe {
+    sanitizer;
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(value) {
+        if (!value) {
+            return '';
+        }
+        let html = marked.parse(value, { async: false });
+        html = html
+            .replace(/<table>/g, '<div style="overflow-x:auto"><table style="width:auto">')
+            .replace(/<\/table>/g, '</table></div>')
+            .replace(/<(t[hd])([\s>])/g, '<$1 style="padding:0.5rem 1rem"$2');
+        return this.sanitizer.bypassSecurityTrustHtml(DOMPurify.sanitize(html));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MarkedPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: MarkedPipe, isStandalone: true, name: "marked" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MarkedPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'marked',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
+
+class MessageTextPartComponent {
+    role = input.required(...(ngDevMode ? [{ debugName: "role" }] : []));
+    textPart = input.required(...(ngDevMode ? [{ debugName: "textPart" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageTextPartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: MessageTextPartComponent, isStandalone: true, selector: "cortex-message-text-part", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: true, transformFunction: null }, textPart: { classPropertyName: "textPart", publicName: "textPart", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"w-full flex flex-col\"\n  [ngClass]=\"{\n    'items-end': role() === 'assistant',\n    'items-start': role() === 'user',\n  }\"\n>\n  <div\n    class=\"max-w-4/5 text-[13px] leading-relaxed p-4 rounded-2xl border border-slate-200 prose\"\n    [ngClass]=\"{\n      'bg-slate-100 text-slate-700 ltr:rounded-br-none rtl:rounded-bl-none': role() === 'assistant',\n      'bg-slate-50 text-slate-700 ltr:rounded-bl-none rtl:rounded-br-none': role() === 'user',\n    }\"\n    [innerHTML]=\"textPart().text | marked\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: MarkedPipe, name: "marked" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageTextPartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cortex-message-text-part', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, MarkedPipe], template: "<div\n  class=\"w-full flex flex-col\"\n  [ngClass]=\"{\n    'items-end': role() === 'assistant',\n    'items-start': role() === 'user',\n  }\"\n>\n  <div\n    class=\"max-w-4/5 text-[13px] leading-relaxed p-4 rounded-2xl border border-slate-200 prose\"\n    [ngClass]=\"{\n      'bg-slate-100 text-slate-700 ltr:rounded-br-none rtl:rounded-bl-none': role() === 'assistant',\n      'bg-slate-50 text-slate-700 ltr:rounded-bl-none rtl:rounded-br-none': role() === 'user',\n    }\"\n    [innerHTML]=\"textPart().text | marked\"\n  ></div>\n</div>\n" }]
+        }], propDecorators: { role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: true }] }], textPart: [{ type: i0.Input, args: [{ isSignal: true, alias: "textPart", required: true }] }] } });
+
+class MessageReasoningPartComponent {
+    reasoningPart = input.required(...(ngDevMode ? [{ debugName: "reasoningPart" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageReasoningPartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MessageReasoningPartComponent, isStandalone: true, selector: "cortex-message-reasoning-part", inputs: { reasoningPart: { classPropertyName: "reasoningPart", publicName: "reasoningPart", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let p = reasoningPart();\n<details class=\"group w-full rounded-lg border border-slate-200 bg-slate-50 overflow-hidden\">\n  <summary\n    class=\"list-none [&::-webkit-details-marker]:hidden cursor-pointer select-none px-4 py-3 flex items-center gap-3\"\n  >\n    <div class=\"flex items-center gap-2 min-w-0 flex-1\">\n      <span\n        class=\"inline-flex h-6 w-6 items-center justify-center rounded bg-indigo-100 text-indigo-600\"\n      >\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n          <path\n            d=\"M10 2C6.686 2 4 4.686 4 8c0 1.655.672 3.154 1.757 4.243.362.363.576.858.576 1.371V14.5a1 1 0 0 0 1 1h5.334a1 1 0 0 0 1-1v-.886c0-.513.214-1.008.576-1.371A5.978 5.978 0 0 0 16 8c0-3.314-2.686-6-6-6Z\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M7.5 17.5h5M8.5 8a2 2 0 0 1 2-2\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </span>\n\n      <div class=\"min-w-0\">\n        <div class=\"flex items-center gap-2\">\n          <div class=\"font-medium text-slate-700 text-sm\">Reasoning</div>\n          @if (p.state) {\n            <span\n              class=\"inline-flex items-center rounded px-1.5 py-0.5 text-[11px] font-medium\"\n              [class.bg-amber-100.text-amber-700]=\"p.state === 'streaming'\"\n              [class.bg-emerald-100.text-emerald-700]=\"p.state === 'done'\"\n            >\n              {{ p.state === 'streaming' ? 'Streaming' : 'Done' }}\n            </span>\n          }\n        </div>\n      </div>\n    </div>\n\n    <span\n      class=\"ml-auto inline-flex h-6 w-6 items-center justify-center rounded text-slate-400 transition group-open:rotate-180\"\n      aria-hidden=\"true\"\n    >\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\n        <path\n          d=\"m5.75 8.25 4.25 4.25 4.25-4.25\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </span>\n  </summary>\n\n  <div class=\"px-4 pb-4\">\n    <div class=\"mt-1 rounded bg-white border border-slate-200 p-3\">\n      <pre\n        class=\"m-0 whitespace-pre-wrap wrap-break-word font-mono text-xs leading-relaxed text-slate-700\"\n        >{{ p.text.trim() ? p.text : 'No reasoning provided.' }}</pre\n      >\n    </div>\n  </div>\n</details>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageReasoningPartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cortex-message-reasoning-part', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let p = reasoningPart();\n<details class=\"group w-full rounded-lg border border-slate-200 bg-slate-50 overflow-hidden\">\n  <summary\n    class=\"list-none [&::-webkit-details-marker]:hidden cursor-pointer select-none px-4 py-3 flex items-center gap-3\"\n  >\n    <div class=\"flex items-center gap-2 min-w-0 flex-1\">\n      <span\n        class=\"inline-flex h-6 w-6 items-center justify-center rounded bg-indigo-100 text-indigo-600\"\n      >\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n          <path\n            d=\"M10 2C6.686 2 4 4.686 4 8c0 1.655.672 3.154 1.757 4.243.362.363.576.858.576 1.371V14.5a1 1 0 0 0 1 1h5.334a1 1 0 0 0 1-1v-.886c0-.513.214-1.008.576-1.371A5.978 5.978 0 0 0 16 8c0-3.314-2.686-6-6-6Z\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M7.5 17.5h5M8.5 8a2 2 0 0 1 2-2\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </span>\n\n      <div class=\"min-w-0\">\n        <div class=\"flex items-center gap-2\">\n          <div class=\"font-medium text-slate-700 text-sm\">Reasoning</div>\n          @if (p.state) {\n            <span\n              class=\"inline-flex items-center rounded px-1.5 py-0.5 text-[11px] font-medium\"\n              [class.bg-amber-100.text-amber-700]=\"p.state === 'streaming'\"\n              [class.bg-emerald-100.text-emerald-700]=\"p.state === 'done'\"\n            >\n              {{ p.state === 'streaming' ? 'Streaming' : 'Done' }}\n            </span>\n          }\n        </div>\n      </div>\n    </div>\n\n    <span\n      class=\"ml-auto inline-flex h-6 w-6 items-center justify-center rounded text-slate-400 transition group-open:rotate-180\"\n      aria-hidden=\"true\"\n    >\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\n        <path\n          d=\"m5.75 8.25 4.25 4.25 4.25-4.25\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </span>\n  </summary>\n\n  <div class=\"px-4 pb-4\">\n    <div class=\"mt-1 rounded bg-white border border-slate-200 p-3\">\n      <pre\n        class=\"m-0 whitespace-pre-wrap wrap-break-word font-mono text-xs leading-relaxed text-slate-700\"\n        >{{ p.text.trim() ? p.text : 'No reasoning provided.' }}</pre\n      >\n    </div>\n  </div>\n</details>\n" }]
+        }], propDecorators: { reasoningPart: [{ type: i0.Input, args: [{ isSignal: true, alias: "reasoningPart", required: true }] }] } });
+
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('cypher', sql);
+class HighlightPipe {
+    sanitizer;
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(code, lang) {
+        if (!code)
+            return '';
+        const highlighted = hljs.getLanguage(lang)
+            ? hljs.highlight(code, { language: lang }).value
+            : this.escapeHtml(code);
+        return this.sanitizer.bypassSecurityTrustHtml(highlighted);
+    }
+    escapeHtml(str) {
+        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HighlightPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: HighlightPipe, isStandalone: true, name: "highlight" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HighlightPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'highlight', standalone: true }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
+
+class JsonTreeComponent {
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    expandDepth = input(1, ...(ngDevMode ? [{ debugName: "expandDepth" }] : []));
+    collapsedPaths = new Set();
+    userToggled = new Set();
+    isCollapsed(path, depth) {
+        if (this.userToggled.has(path)) {
+            return this.collapsedPaths.has(path);
+        }
+        return depth >= this.expandDepth();
+    }
+    toggle(path, depth) {
+        this.userToggled.add(path);
+        const currentlyCollapsed = this.isCollapsed(path, depth);
+        if (currentlyCollapsed) {
+            this.collapsedPaths.delete(path);
+        }
+        else {
+            this.collapsedPaths.add(path);
+        }
+    }
+    isObject(value) {
+        return value !== null && typeof value === 'object' && !Array.isArray(value);
+    }
+    isArray(value) {
+        return Array.isArray(value);
+    }
+    objectEntries(value) {
+        if (!this.isObject(value))
+            return [];
+        return Object.entries(value);
+    }
+    arrayItems(value) {
+        return Array.isArray(value) ? value : [];
+    }
+    objectLength(value) {
+        if (!this.isObject(value))
+            return 0;
+        return Object.keys(value).length;
+    }
+    arrayLength(value) {
+        return Array.isArray(value) ? value.length : 0;
+    }
+    formatPrimitive(value) {
+        if (value === null || value === undefined)
+            return 'null';
+        if (typeof value === 'string')
+            return JSON.stringify(value);
+        return String(value);
+    }
+    primitiveClass(value) {
+        if (value === null || value === undefined)
+            return 'jt-null';
+        if (typeof value === 'string')
+            return 'jt-string';
+        if (typeof value === 'number')
+            return 'jt-number';
+        if (typeof value === 'boolean')
+            return 'jt-boolean';
+        return '';
+    }
+    isContainer(value) {
+        return this.isObject(value) || this.isArray(value);
+    }
+    parsed(value) {
+        return this.deepParse(value);
+    }
+    deepParse(value) {
+        if (typeof value === 'string') {
+            const trimmed = value.trim();
+            if ((trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+                (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+                try {
+                    return this.deepParse(JSON.parse(trimmed));
+                }
+                catch {
+                    return value;
+                }
+            }
+            return value;
+        }
+        if (Array.isArray(value)) {
+            return value.map((item) => this.deepParse(item));
+        }
+        if (value !== null && typeof value === 'object') {
+            const result = {};
+            for (const [key, val] of Object.entries(value)) {
+                result[key] = this.deepParse(val);
+            }
+            return result;
+        }
+        return value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: JsonTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: JsonTreeComponent, isStandalone: true, selector: "cortex-json-tree", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, expandDepth: { classPropertyName: "expandDepth", publicName: "expandDepth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block font-mono text-[12px] leading-5 select-text" }, ngImport: i0, template: "<!-- Entry point: parse and render the root value -->\n<ng-container\n  *ngTemplateOutlet=\"valueTemplate; context: { $implicit: parsed(data()), path: '$', depth: 0 }\"\n/>\n\n<!-- Recursive value renderer -->\n<ng-template #valueTemplate let-value let-path=\"path\" let-depth=\"depth\">\n  @if (isObject(value)) {\n    @if (objectLength(value) === 0) {\n      <span class=\"jt-bracket\">{{ '{' }}{{ '}' }}</span>\n    } @else {\n      <span class=\"jt-toggle\" (click)=\"toggle(path, depth); $event.stopPropagation()\" role=\"button\">\n        <span class=\"jt-arrow\" [class.jt-arrow--collapsed]=\"isCollapsed(path, depth)\">&#9662;</span>\n        <span class=\"jt-bracket\">{{ '{' }}</span>\n      </span>\n      @if (isCollapsed(path, depth)) {\n        <span\n          class=\"jt-collapsed-hint\"\n          (click)=\"toggle(path, depth); $event.stopPropagation()\"\n          role=\"button\"\n          >{{ objectLength(value) }}\n          {{ objectLength(value) === 1 ? 'property' : 'properties' }}</span\n        ><span class=\"jt-bracket\">{{ '}' }}</span>\n      } @else {\n        <div class=\"jt-indent\">\n          @for (entry of objectEntries(value); track entry[0]; let last = $last) {\n            <div class=\"jt-line\">\n              <span class=\"jt-key\">\"{{ entry[0] }}\"</span><span class=\"jt-colon\">: </span>\n              @if (isContainer(entry[1])) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    valueTemplate;\n                    context: { $implicit: entry[1], path: path + '.' + entry[0], depth: depth + 1 }\n                  \"\n                />\n              } @else {\n                <span [class]=\"primitiveClass(entry[1])\">{{ formatPrimitive(entry[1]) }}</span>\n              }\n              @if (!last) {\n                <span class=\"jt-comma\">,</span>\n              }\n            </div>\n          }\n        </div>\n        <span class=\"jt-bracket\">{{ '}' }}</span>\n      }\n    }\n  } @else if (isArray(value)) {\n    @if (arrayLength(value) === 0) {\n      <span class=\"jt-bracket\">[]</span>\n    } @else {\n      <span class=\"jt-toggle\" (click)=\"toggle(path, depth); $event.stopPropagation()\" role=\"button\">\n        <span class=\"jt-arrow\" [class.jt-arrow--collapsed]=\"isCollapsed(path, depth)\">&#9662;</span>\n        <span class=\"jt-bracket\">[</span>\n      </span>\n      @if (isCollapsed(path, depth)) {\n        <span\n          class=\"jt-collapsed-hint\"\n          (click)=\"toggle(path, depth); $event.stopPropagation()\"\n          role=\"button\"\n          >{{ arrayLength(value) }} {{ arrayLength(value) === 1 ? 'item' : 'items' }}</span\n        ><span class=\"jt-bracket\">]</span>\n      } @else {\n        <div class=\"jt-indent\">\n          @for (item of arrayItems(value); track $index; let last = $last) {\n            <div class=\"jt-line\">\n              @if (isContainer(item)) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    valueTemplate;\n                    context: { $implicit: item, path: path + '[' + $index + ']', depth: depth + 1 }\n                  \"\n                />\n              } @else {\n                <span [class]=\"primitiveClass(item)\">{{ formatPrimitive(item) }}</span>\n              }\n              @if (!last) {\n                <span class=\"jt-comma\">,</span>\n              }\n            </div>\n          }\n        </div>\n        <span class=\"jt-bracket\">]</span>\n      }\n    }\n  } @else {\n    <span [class]=\"primitiveClass(value)\">{{ formatPrimitive(value) }}</span>\n  }\n</ng-template>\n", styles: [":host{white-space:pre-wrap;word-break:break-word}.jt-indent{padding-inline-start:1.25em;border-inline-start:1px solid #e2e8f0;margin-inline-start:.3em}.jt-line{position:relative}.jt-toggle{cursor:pointer;-webkit-user-select:none;user-select:none}.jt-toggle:hover .jt-arrow{color:#475569}.jt-arrow{display:inline-block;width:1em;text-align:center;color:#94a3b8;font-size:.7em;transition:transform .15s ease;vertical-align:middle}.jt-arrow--collapsed{transform:rotate(-90deg)}.jt-bracket{color:#64748b}.jt-key{color:#6366f1}.jt-colon{color:#64748b}.jt-comma{color:#94a3b8}.jt-string{color:#059669}.jt-number{color:#2563eb}.jt-boolean{color:#d97706}.jt-null{color:#94a3b8;font-style:italic}.jt-collapsed-hint{display:inline-block;padding:0 .4em;margin:0 .15em;font-size:10px;line-height:1.5;color:#94a3b8;background:#f8fafc;border:1px solid #e2e8f0;border-radius:3px;font-style:italic;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle}.jt-collapsed-hint:hover{color:#64748b;border-color:#cbd5e1;background:#f1f5f9}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: JsonTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cortex-json-tree', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: { class: 'block font-mono text-[12px] leading-5 select-text' }, template: "<!-- Entry point: parse and render the root value -->\n<ng-container\n  *ngTemplateOutlet=\"valueTemplate; context: { $implicit: parsed(data()), path: '$', depth: 0 }\"\n/>\n\n<!-- Recursive value renderer -->\n<ng-template #valueTemplate let-value let-path=\"path\" let-depth=\"depth\">\n  @if (isObject(value)) {\n    @if (objectLength(value) === 0) {\n      <span class=\"jt-bracket\">{{ '{' }}{{ '}' }}</span>\n    } @else {\n      <span class=\"jt-toggle\" (click)=\"toggle(path, depth); $event.stopPropagation()\" role=\"button\">\n        <span class=\"jt-arrow\" [class.jt-arrow--collapsed]=\"isCollapsed(path, depth)\">&#9662;</span>\n        <span class=\"jt-bracket\">{{ '{' }}</span>\n      </span>\n      @if (isCollapsed(path, depth)) {\n        <span\n          class=\"jt-collapsed-hint\"\n          (click)=\"toggle(path, depth); $event.stopPropagation()\"\n          role=\"button\"\n          >{{ objectLength(value) }}\n          {{ objectLength(value) === 1 ? 'property' : 'properties' }}</span\n        ><span class=\"jt-bracket\">{{ '}' }}</span>\n      } @else {\n        <div class=\"jt-indent\">\n          @for (entry of objectEntries(value); track entry[0]; let last = $last) {\n            <div class=\"jt-line\">\n              <span class=\"jt-key\">\"{{ entry[0] }}\"</span><span class=\"jt-colon\">: </span>\n              @if (isContainer(entry[1])) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    valueTemplate;\n                    context: { $implicit: entry[1], path: path + '.' + entry[0], depth: depth + 1 }\n                  \"\n                />\n              } @else {\n                <span [class]=\"primitiveClass(entry[1])\">{{ formatPrimitive(entry[1]) }}</span>\n              }\n              @if (!last) {\n                <span class=\"jt-comma\">,</span>\n              }\n            </div>\n          }\n        </div>\n        <span class=\"jt-bracket\">{{ '}' }}</span>\n      }\n    }\n  } @else if (isArray(value)) {\n    @if (arrayLength(value) === 0) {\n      <span class=\"jt-bracket\">[]</span>\n    } @else {\n      <span class=\"jt-toggle\" (click)=\"toggle(path, depth); $event.stopPropagation()\" role=\"button\">\n        <span class=\"jt-arrow\" [class.jt-arrow--collapsed]=\"isCollapsed(path, depth)\">&#9662;</span>\n        <span class=\"jt-bracket\">[</span>\n      </span>\n      @if (isCollapsed(path, depth)) {\n        <span\n          class=\"jt-collapsed-hint\"\n          (click)=\"toggle(path, depth); $event.stopPropagation()\"\n          role=\"button\"\n          >{{ arrayLength(value) }} {{ arrayLength(value) === 1 ? 'item' : 'items' }}</span\n        ><span class=\"jt-bracket\">]</span>\n      } @else {\n        <div class=\"jt-indent\">\n          @for (item of arrayItems(value); track $index; let last = $last) {\n            <div class=\"jt-line\">\n              @if (isContainer(item)) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    valueTemplate;\n                    context: { $implicit: item, path: path + '[' + $index + ']', depth: depth + 1 }\n                  \"\n                />\n              } @else {\n                <span [class]=\"primitiveClass(item)\">{{ formatPrimitive(item) }}</span>\n              }\n              @if (!last) {\n                <span class=\"jt-comma\">,</span>\n              }\n            </div>\n          }\n        </div>\n        <span class=\"jt-bracket\">]</span>\n      }\n    }\n  } @else {\n    <span [class]=\"primitiveClass(value)\">{{ formatPrimitive(value) }}</span>\n  }\n</ng-template>\n", styles: [":host{white-space:pre-wrap;word-break:break-word}.jt-indent{padding-inline-start:1.25em;border-inline-start:1px solid #e2e8f0;margin-inline-start:.3em}.jt-line{position:relative}.jt-toggle{cursor:pointer;-webkit-user-select:none;user-select:none}.jt-toggle:hover .jt-arrow{color:#475569}.jt-arrow{display:inline-block;width:1em;text-align:center;color:#94a3b8;font-size:.7em;transition:transform .15s ease;vertical-align:middle}.jt-arrow--collapsed{transform:rotate(-90deg)}.jt-bracket{color:#64748b}.jt-key{color:#6366f1}.jt-colon{color:#64748b}.jt-comma{color:#94a3b8}.jt-string{color:#059669}.jt-number{color:#2563eb}.jt-boolean{color:#d97706}.jt-null{color:#94a3b8;font-style:italic}.jt-collapsed-hint{display:inline-block;padding:0 .4em;margin:0 .15em;font-size:10px;line-height:1.5;color:#94a3b8;background:#f8fafc;border:1px solid #e2e8f0;border-radius:3px;font-style:italic;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle}.jt-collapsed-hint:hover{color:#64748b;border-color:#cbd5e1;background:#f1f5f9}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], expandDepth: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandDepth", required: false }] }] } });
+
+class MessageToolCallPartComponent {
+    static CODE_FIELDS = {
+        code: 'javascript',
+        query: 'cypher',
+    };
+    toolCallPart = input.required(...(ngDevMode ? [{ debugName: "toolCallPart" }] : []));
+    codeSnippets = computed(() => {
+        const inp = this.toolCallPart().input;
+        if (!inp || typeof inp !== 'object')
+            return [];
+        const record = inp;
+        const snippets = [];
+        for (const [key, lang] of Object.entries(MessageToolCallPartComponent.CODE_FIELDS)) {
+            if (key in record && typeof record[key] === 'string') {
+                snippets.push({
+                    key,
+                    lang,
+                    value: record[key].replace(/\\n/g, '\n'),
+                });
+            }
+        }
+        return snippets;
+    }, ...(ngDevMode ? [{ debugName: "codeSnippets" }] : []));
+    remainingInput = computed(() => {
+        const inp = this.toolCallPart().input;
+        if (!inp || typeof inp !== 'object')
+            return inp;
+        const record = inp;
+        const codeKeys = Object.keys(MessageToolCallPartComponent.CODE_FIELDS);
+        const remaining = {};
+        let hasKeys = false;
+        for (const [key, val] of Object.entries(record)) {
+            if (!codeKeys.includes(key)) {
+                remaining[key] = val;
+                hasKeys = true;
+            }
+        }
+        return hasKeys ? remaining : null;
+    }, ...(ngDevMode ? [{ debugName: "remainingInput" }] : []));
+    toolName() {
+        const type = this.toolCallPart().type;
+        if (!type)
+            return '';
+        return type.startsWith('tool-') ? type.slice('tool-'.length) : type;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageToolCallPartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MessageToolCallPartComponent, isStandalone: true, selector: "cortex-message-tool-call-part", inputs: { toolCallPart: { classPropertyName: "toolCallPart", publicName: "toolCallPart", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<details class=\"group w-full rounded-lg border border-slate-200 bg-slate-50 overflow-hidden\">\n  <summary\n    class=\"list-none [&::-webkit-details-marker]:hidden cursor-pointer select-none px-4 py-3 group-open:border-b group-open:border-slate-200\"\n  >\n    <div class=\"flex items-start gap-3\">\n      <div\n        class=\"shrink-0 mt-0.5 size-7 rounded bg-slate-800 text-white flex items-center justify-center\"\n        aria-hidden=\"true\"\n      >\n        <svg viewBox=\"0 0 20 20\" class=\"size-4\" fill=\"none\">\n          <path\n            d=\"M6.5 6.5 3.75 10l2.75 3.5M13.5 6.5 16.25 10l-2.75 3.5M11.25 5.75 8.75 14.25\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </div>\n\n      <div class=\"min-w-0 flex-1\">\n        <div class=\"flex items-center gap-2\">\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"flex items-center gap-2 min-w-0\">\n              <div\n                class=\"font-medium text-slate-800 text-sm truncate\"\n                [attr.title]=\"toolCallPart().title || null\"\n              >\n                {{ toolCallPart().title ?? 'Tool call' }}\n              </div>\n              @if (toolName()) {\n                <span\n                  class=\"hidden sm:inline-flex items-center rounded bg-slate-200 px-1.5 py-0.5 text-[11px] font-medium text-slate-600 font-mono\"\n                  [attr.title]=\"toolCallPart().type || null\"\n                  >{{ toolName() }}</span\n                >\n              }\n            </div>\n            <div class=\"mt-0.5 text-[11px] text-slate-500 break-all\">\n              <span class=\"font-medium text-slate-600\">ID</span>\n              <span class=\"font-mono\"> {{ toolCallPart().toolCallId }}</span>\n              @if (toolCallPart().providerExecuted) {\n                <span class=\"ml-2 inline-flex items-center gap-1 text-emerald-700\">\n                  <span class=\"size-1.5 rounded-full bg-emerald-500\"></span>\n                  provider\n                </span>\n              }\n            </div>\n          </div>\n\n          <div class=\"flex items-center gap-2\">\n            <span\n              class=\"inline-flex items-center gap-1.5 rounded px-2 py-1 text-[11px] font-medium border\"\n              [ngClass]=\"{\n                'bg-emerald-50 text-emerald-700 border-emerald-200':\n                  toolCallPart().state === 'output-available',\n                'bg-red-50 text-red-700 border-red-200': toolCallPart().state === 'output-error',\n                'bg-slate-100 text-slate-600 border-slate-200':\n                  toolCallPart().state === 'output-denied',\n                'bg-violet-50 text-violet-700 border-violet-200':\n                  toolCallPart().state === 'approval-requested' ||\n                  toolCallPart().state === 'approval-responded',\n                'bg-amber-50 text-amber-700 border-amber-200':\n                  toolCallPart().state === 'input-streaming' ||\n                  toolCallPart().state === 'input-available',\n              }\"\n            >\n              @switch (toolCallPart().state) {\n                @case ('input-streaming') {\n                  <span class=\"size-1.5 rounded-full bg-amber-500 animate-pulse\"></span>\n                  Calling\n                }\n                @case ('input-available') {\n                  <span class=\"size-1.5 rounded-full bg-amber-500\"></span> Input ready\n                }\n                @case ('approval-requested') {\n                  <span class=\"size-1.5 rounded-full bg-violet-500 animate-pulse\"></span>\n                  Needs approval\n                }\n                @case ('approval-responded') {\n                  @if (toolCallPart().approval?.approved) {\n                    <span class=\"size-1.5 rounded-full bg-emerald-500\"></span> Approved\n                  } @else {\n                    <span class=\"size-1.5 rounded-full bg-slate-500\"></span> Responded\n                  }\n                }\n                @case ('output-available') {\n                  <span class=\"size-1.5 rounded-full bg-emerald-500\"></span>\n                  {{ 'translate_completed' | translate }}\n                }\n                @case ('output-error') {\n                  <span class=\"size-1.5 rounded-full bg-red-500\"></span> Error\n                }\n                @case ('output-denied') {\n                  <span class=\"size-1.5 rounded-full bg-slate-500\"></span> Denied\n                }\n              }\n            </span>\n\n            <span\n              class=\"inline-flex size-6 items-center justify-center rounded text-slate-400 transition group-open:rotate-180\"\n              aria-hidden=\"true\"\n            >\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\n                <path\n                  d=\"m5.75 8.25 4.25 4.25 4.25-4.25\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.5\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </summary>\n\n  <div class=\"bg-white px-4 pb-4 pt-3\">\n    <div class=\"grid gap-3\">\n      @for (snippet of codeSnippets(); track snippet.key) {\n        <div class=\"rounded-lg border border-slate-200 overflow-hidden\">\n          <div\n            class=\"px-3 py-2 flex items-center justify-between border-b border-slate-200 bg-slate-50\"\n          >\n            <div class=\"text-[11px] font-medium text-slate-600\">\n              {{ snippet.key }}\n            </div>\n            <div class=\"text-[11px] text-slate-400 font-mono\">\n              {{ snippet.lang }}\n            </div>\n          </div>\n          <pre\n            dir=\"ltr\"\n            class=\"m-0 max-h-80 overflow-auto p-3 text-[12px] leading-5 font-mono whitespace-pre wrap-break-word\"\n          ><code class=\"hljs\" [innerHTML]=\"snippet.value | highlight : snippet.lang\"></code></pre>\n        </div>\n      }\n\n      @if (remainingInput(); as remaining) {\n        <div class=\"rounded-lg border border-slate-200 overflow-hidden\">\n          <div\n            class=\"px-3 py-2 flex items-center justify-between border-b border-slate-200 bg-slate-50\"\n          >\n            <div class=\"text-[11px] font-medium text-slate-600\">Input</div>\n            <div class=\"text-[11px] text-slate-400 font-mono\">json</div>\n          </div>\n          <div dir=\"ltr\" class=\"max-h-64 overflow-auto p-3\">\n            <cortex-json-tree [data]=\"remaining\" [expandDepth]=\"2\" />\n          </div>\n        </div>\n      }\n\n      @if (toolCallPart().state === 'output-available') {\n        <div class=\"rounded-lg border border-emerald-200 overflow-hidden\">\n          <div\n            class=\"px-3 py-2 flex items-center justify-between border-b border-emerald-200 bg-emerald-50\"\n          >\n            <div class=\"text-[11px] font-medium text-emerald-700\">Output</div>\n            <div class=\"text-[11px] text-emerald-600 font-mono\">json</div>\n          </div>\n          <div dir=\"ltr\" class=\"max-h-64 overflow-auto p-3\">\n            <cortex-json-tree [data]=\"toolCallPart().output\" [expandDepth]=\"2\" />\n          </div>\n        </div>\n      }\n\n      @if (toolCallPart().state === 'output-error') {\n        <div class=\"rounded-lg border border-red-200 overflow-hidden\">\n          <div\n            class=\"px-3 py-2 flex items-center justify-between border-b border-red-200 bg-red-50\"\n          >\n            <div class=\"text-[11px] font-medium text-red-700\">Error</div>\n            <div class=\"text-[11px] text-red-600 font-mono\">text</div>\n          </div>\n          <pre\n            dir=\"ltr\"\n            class=\"m-0 max-h-64 overflow-auto p-3 text-[12px] leading-5 font-mono text-red-800 whitespace-pre-wrap wrap-break-word\"\n            >{{ toolCallPart().errorText }}</pre\n          >\n        </div>\n      }\n\n      @if (toolCallPart().state === 'output-denied') {\n        <div class=\"rounded-lg border border-slate-200 overflow-hidden\">\n          <div\n            class=\"px-3 py-2 flex items-center justify-between border-b border-slate-200 bg-slate-50\"\n          >\n            <div class=\"text-[11px] font-medium text-slate-600\">Denied</div>\n            <div class=\"text-[11px] text-slate-500 font-mono\">approval</div>\n          </div>\n          <div class=\"p-3 text-[12px] text-slate-700\">\n            Tool execution was denied.\n            @if (toolCallPart().approval?.reason) {\n              <div class=\"mt-2 rounded bg-slate-50 border border-slate-200 p-2\">\n                <div class=\"text-[11px] font-medium text-slate-600\">Reason</div>\n                <div class=\"mt-1 font-mono text-[12px] text-slate-700 wrap-break-word\">\n                  {{ toolCallPart().approval?.reason }}\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      @if (toolCallPart().state === 'approval-requested') {\n        <div class=\"rounded-lg border border-violet-200 overflow-hidden\">\n          <div\n            class=\"px-3 py-2 flex items-center justify-between border-b border-violet-200 bg-violet-50\"\n          >\n            <div class=\"text-[11px] font-medium text-violet-700\">Approval requested</div>\n            <div class=\"text-[11px] text-violet-600 font-mono\">\n              {{ toolCallPart().approval?.id }}\n            </div>\n          </div>\n          <div class=\"p-3 text-[12px] text-violet-800\">\n            Waiting for approval to execute this tool.\n          </div>\n        </div>\n      }\n\n      @if (toolCallPart().state === 'approval-responded') {\n        <div class=\"rounded-lg border border-violet-200 overflow-hidden\">\n          <div\n            class=\"px-3 py-2 flex items-center justify-between border-b border-violet-200 bg-violet-50\"\n          >\n            <div class=\"text-[11px] font-medium text-violet-700\">Approval response</div>\n            <div class=\"text-[11px] text-violet-600 font-mono\">\n              {{ toolCallPart().approval?.id }}\n            </div>\n          </div>\n          <div class=\"p-3 text-[12px] text-violet-800\">\n            @if (toolCallPart().approval?.approved) {\n              Approved.\n            } @else {\n              Response received.\n            }\n            @if (toolCallPart().approval?.reason) {\n              <div class=\"mt-2 rounded bg-violet-50 border border-violet-200 p-2\">\n                <div class=\"text-[11px] font-medium text-violet-700\">Reason</div>\n                <div class=\"mt-1 font-mono text-[12px] text-violet-800 wrap-break-word\">\n                  {{ toolCallPart().approval?.reason }}\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</details>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: JsonTreeComponent, selector: "cortex-json-tree", inputs: ["data", "expandDepth"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageToolCallPartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cortex-message-tool-call-part', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HighlightPipe, NgClass, TranslatePipe, JsonTreeComponent], template: "<details class=\"group w-full rounded-lg border border-slate-200 bg-slate-50 overflow-hidden\">\n  <summary\n    class=\"list-none [&::-webkit-details-marker]:hidden cursor-pointer select-none px-4 py-3 group-open:border-b group-open:border-slate-200\"\n  >\n    <div class=\"flex items-start gap-3\">\n      <div\n        class=\"shrink-0 mt-0.5 size-7 rounded bg-slate-800 text-white flex items-center justify-center\"\n        aria-hidden=\"true\"\n      >\n        <svg viewBox=\"0 0 20 20\" class=\"size-4\" fill=\"none\">\n          <path\n            d=\"M6.5 6.5 3.75 10l2.75 3.5M13.5 6.5 16.25 10l-2.75 3.5M11.25 5.75 8.75 14.25\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </div>\n\n      <div class=\"min-w-0 flex-1\">\n        <div class=\"flex items-center gap-2\">\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"flex items-center gap-2 min-w-0\">\n              <div\n                class=\"font-medium text-slate-800 text-sm truncate\"\n                [attr.title]=\"toolCallPart().title || null\"\n              >\n                {{ toolCallPart().title ?? 'Tool call' }}\n              </div>\n              @if (toolName()) {\n                <span\n                  class=\"hidden sm:inline-flex items-center rounded bg-slate-200 px-1.5 py-0.5 text-[11px] font-medium text-slate-600 font-mono\"\n                  [attr.title]=\"toolCallPart().type || null\"\n                  >{{ toolName() }}</span\n                >\n              }\n            </div>\n            <div class=\"mt-0.5 text-[11px] text-slate-500 break-all\">\n              <span class=\"font-medium text-slate-600\">ID</span>\n              <span class=\"font-mono\"> {{ toolCallPart().toolCallId }}</span>\n              @if (toolCallPart().providerExecuted) {\n                <span class=\"ml-2 inline-flex items-center gap-1 text-emerald-700\">\n                  <span class=\"size-1.5 rounded-full bg-emerald-500\"></span>\n                  provider\n                </span>\n              }\n            </div>\n          </div>\n\n          <div class=\"flex items-center gap-2\">\n            <span\n              class=\"inline-flex items-center gap-1.5 rounded px-2 py-1 text-[11px] font-medium border\"\n              [ngClass]=\"{\n                'bg-emerald-50 text-emerald-700 border-emerald-200':\n                  toolCallPart().state === 'output-available',\n                'bg-red-50 text-red-700 border-red-200': toolCallPart().state === 'output-error',\n                'bg-slate-100 text-slate-600 border-slate-200':\n                  toolCallPart().state === 'output-denied',\n                'bg-violet-50 text-violet-700 border-violet-200':\n                  toolCallPart().state === 'approval-requested' ||\n                  toolCallPart().state === 'approval-responded',\n                'bg-amber-50 text-amber-700 border-amber-200':\n                  toolCallPart().state === 'input-streaming' ||\n                  toolCallPart().state === 'input-available',\n              }\"\n            >\n              @switch (toolCallPart().state) {\n                @case ('input-streaming') {\n                  <span class=\"size-1.5 rounded-full bg-amber-500 animate-pulse\"></span>\n                  Calling\n                }\n                @case ('input-available') {\n                  <span class=\"size-1.5 rounded-full bg-amber-500\"></span> Input ready\n                }\n                @case ('approval-requested') {\n                  <span class=\"size-1.5 rounded-full bg-violet-500 animate-pulse\"></span>\n                  Needs approval\n                }\n                @case ('approval-responded') {\n                  @if (toolCallPart().approval?.approved) {\n                    <span class=\"size-1.5 rounded-full bg-emerald-500\"></span> Approved\n                  } @else {\n                    <span class=\"size-1.5 rounded-full bg-slate-500\"></span> Responded\n                  }\n                }\n                @case ('output-available') {\n                  <span class=\"size-1.5 rounded-full bg-emerald-500\"></span>\n                  {{ 'translate_completed' | translate }}\n                }\n                @case ('output-error') {\n                  <span class=\"size-1.5 rounded-full bg-red-500\"></span> Error\n                }\n                @case ('output-denied') {\n                  <span class=\"size-1.5 rounded-full bg-slate-500\"></span> Denied\n                }\n              }\n            </span>\n\n            <span\n              class=\"inline-flex size-6 items-center justify-center rounded text-slate-400 transition group-open:rotate-180\"\n              aria-hidden=\"true\"\n            >\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\">\n                <path\n                  d=\"m5.75 8.25 4.25 4.25 4.25-4.25\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.5\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </summary>\n\n  <div class=\"bg-white px-4 pb-4 pt-3\">\n    <div class=\"grid gap-3\">\n      @for (snippet of codeSnippets(); track snippet.key) {\n        <div class=\"rounded-lg border border-slate-200 overflow-hidden\">\n          <div\n            class=\"px-3 py-2 flex items-center justify-between border-b border-slate-200 bg-slate-50\"\n          >\n            <div class=\"text-[11px] font-medium text-slate-600\">\n              {{ snippet.key }}\n            </div>\n            <div class=\"text-[11px] text-slate-400 font-mono\">\n              {{ snippet.lang }}\n            </div>\n          </div>\n          <pre\n            dir=\"ltr\"\n            class=\"m-0 max-h-80 overflow-auto p-3 text-[12px] leading-5 font-mono whitespace-pre wrap-break-word\"\n          ><code class=\"hljs\" [innerHTML]=\"snippet.value | highlight : snippet.lang\"></code></pre>\n        </div>\n      }\n\n      @if (remainingInput(); as remaining) {\n        <div class=\"rounded-lg border border-slate-200 overflow-hidden\">\n          <div\n            class=\"px-3 py-2 flex items-center justify-between border-b border-slate-200 bg-slate-50\"\n          >\n            <div class=\"text-[11px] font-medium text-slate-600\">Input</div>\n            <div class=\"text-[11px] text-slate-400 font-mono\">json</div>\n          </div>\n          <div dir=\"ltr\" class=\"max-h-64 overflow-auto p-3\">\n            <cortex-json-tree [data]=\"remaining\" [expandDepth]=\"2\" />\n          </div>\n        </div>\n      }\n\n      @if (toolCallPart().state === 'output-available') {\n        <div class=\"rounded-lg border border-emerald-200 overflow-hidden\">\n          <div\n            class=\"px-3 py-2 flex items-center justify-between border-b border-emerald-200 bg-emerald-50\"\n          >\n            <div class=\"text-[11px] font-medium text-emerald-700\">Output</div>\n            <div class=\"text-[11px] text-emerald-600 font-mono\">json</div>\n          </div>\n          <div dir=\"ltr\" class=\"max-h-64 overflow-auto p-3\">\n            <cortex-json-tree [data]=\"toolCallPart().output\" [expandDepth]=\"2\" />\n          </div>\n        </div>\n      }\n\n      @if (toolCallPart().state === 'output-error') {\n        <div class=\"rounded-lg border border-red-200 overflow-hidden\">\n          <div\n            class=\"px-3 py-2 flex items-center justify-between border-b border-red-200 bg-red-50\"\n          >\n            <div class=\"text-[11px] font-medium text-red-700\">Error</div>\n            <div class=\"text-[11px] text-red-600 font-mono\">text</div>\n          </div>\n          <pre\n            dir=\"ltr\"\n            class=\"m-0 max-h-64 overflow-auto p-3 text-[12px] leading-5 font-mono text-red-800 whitespace-pre-wrap wrap-break-word\"\n            >{{ toolCallPart().errorText }}</pre\n          >\n        </div>\n      }\n\n      @if (toolCallPart().state === 'output-denied') {\n        <div class=\"rounded-lg border border-slate-200 overflow-hidden\">\n          <div\n            class=\"px-3 py-2 flex items-center justify-between border-b border-slate-200 bg-slate-50\"\n          >\n            <div class=\"text-[11px] font-medium text-slate-600\">Denied</div>\n            <div class=\"text-[11px] text-slate-500 font-mono\">approval</div>\n          </div>\n          <div class=\"p-3 text-[12px] text-slate-700\">\n            Tool execution was denied.\n            @if (toolCallPart().approval?.reason) {\n              <div class=\"mt-2 rounded bg-slate-50 border border-slate-200 p-2\">\n                <div class=\"text-[11px] font-medium text-slate-600\">Reason</div>\n                <div class=\"mt-1 font-mono text-[12px] text-slate-700 wrap-break-word\">\n                  {{ toolCallPart().approval?.reason }}\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      @if (toolCallPart().state === 'approval-requested') {\n        <div class=\"rounded-lg border border-violet-200 overflow-hidden\">\n          <div\n            class=\"px-3 py-2 flex items-center justify-between border-b border-violet-200 bg-violet-50\"\n          >\n            <div class=\"text-[11px] font-medium text-violet-700\">Approval requested</div>\n            <div class=\"text-[11px] text-violet-600 font-mono\">\n              {{ toolCallPart().approval?.id }}\n            </div>\n          </div>\n          <div class=\"p-3 text-[12px] text-violet-800\">\n            Waiting for approval to execute this tool.\n          </div>\n        </div>\n      }\n\n      @if (toolCallPart().state === 'approval-responded') {\n        <div class=\"rounded-lg border border-violet-200 overflow-hidden\">\n          <div\n            class=\"px-3 py-2 flex items-center justify-between border-b border-violet-200 bg-violet-50\"\n          >\n            <div class=\"text-[11px] font-medium text-violet-700\">Approval response</div>\n            <div class=\"text-[11px] text-violet-600 font-mono\">\n              {{ toolCallPart().approval?.id }}\n            </div>\n          </div>\n          <div class=\"p-3 text-[12px] text-violet-800\">\n            @if (toolCallPart().approval?.approved) {\n              Approved.\n            } @else {\n              Response received.\n            }\n            @if (toolCallPart().approval?.reason) {\n              <div class=\"mt-2 rounded bg-violet-50 border border-violet-200 p-2\">\n                <div class=\"text-[11px] font-medium text-violet-700\">Reason</div>\n                <div class=\"mt-1 font-mono text-[12px] text-violet-800 wrap-break-word\">\n                  {{ toolCallPart().approval?.reason }}\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</details>\n" }]
+        }], propDecorators: { toolCallPart: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolCallPart", required: true }] }] } });
+
+class MessageCaptureFilesPartComponent {
+    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
+    toolPart = input.required(...(ngDevMode ? [{ debugName: "toolPart" }] : []));
+    data = computed(() => this.toolPart().input, ...(ngDevMode ? [{ debugName: "data" }] : []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    outputData = computed(() => {
+        const raw = this.toolPart().output;
+        if (!raw)
+            return null;
+        const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw;
+        return parsed;
+    }, ...(ngDevMode ? [{ debugName: "outputData" }] : []));
+    form = computed(() => {
+        const form = this.fb.group({
+            files: this.fb.array(this.data().files.map((x) => this.fb.group({
+                id: new FormControl(x.id, { nonNullable: true, validators: [Validators.required] }),
+                file: new FormControl(null, {
+                    nonNullable: true,
+                    validators: [Validators.required],
+                }),
+            }))),
+        });
+        if (this.toolPart().output) {
+            form.disable();
+        }
+        return form;
+    }, ...(ngDevMode ? [{ debugName: "form" }] : []));
+    fb = inject(FormBuilder);
+    chatService = inject(CortexChatService);
+    config = inject(CORTEX_CLIENT_CONFIG);
+    async submit() {
+        if (this.form().invalid || this.isLoading())
+            return;
+        this.isLoading.set(true);
+        const { files } = this.form().getRawValue();
+        const baseUrl = this.config.transport.baseUrl;
+        const base = typeof baseUrl === 'string' ? baseUrl : baseUrl();
+        const url = base.replace(/\/$/, '') + '/files';
+        fromPromise((async () => {
+            const headers = await Promise.resolve(this.config.transport.getAuthHeaders());
+            const res = await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    ...headers,
+                },
+                body: JSON.stringify({
+                    files,
+                    toolCallId: this.toolPart().toolCallId,
+                    message: this.message(),
+                }),
+            });
+            if (!res.ok)
+                throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+            return res.json();
+        })())
+            .pipe(finalize(() => this.isLoading.set(false)))
+            .subscribe((result) => {
+            this.chatService.chat()?.addToolOutput({
+                tool: 'captureFiles',
+                toolCallId: this.toolPart().toolCallId,
+                output: {
+                    status: 'success',
+                    result,
+                },
+            });
+        });
+    }
+    async downloadFile(uploadId) {
+        const baseUrl = this.config.transport.baseUrl;
+        const base = typeof baseUrl === 'string' ? baseUrl : baseUrl();
+        const url = base.replace(/\/$/, '') + '/files/' + uploadId;
+        const headers = await Promise.resolve(this.config.transport.getAuthHeaders());
+        const response = await fetch(url, { headers });
+        const disposition = response.headers.get('Content-Disposition');
+        const name = disposition?.match(/filename="?([^";\n]+)"?/)?.[1] ?? uploadId;
+        const blob = await response.blob();
+        const blobUrl = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = blobUrl;
+        a.download = name;
+        a.click();
+        URL.revokeObjectURL(blobUrl);
+    }
+    cancel() {
+        this.chatService.chat()?.addToolOutput({
+            tool: 'captureFiles',
+            toolCallId: this.toolPart().toolCallId,
+            output: {
+                status: 'canceled',
+                message: 'User canceled upload',
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageCaptureFilesPartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MessageCaptureFilesPartComponent, isStandalone: true, selector: "cortex-message-capture-files-part", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, toolPart: { classPropertyName: "toolPart", publicName: "toolPart", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (outputData(); as output) {\n  <!-- \u2500\u2500 Result state \u2500\u2500 -->\n  @if (output.status === 'success') {\n    <div\n      class=\"overflow-hidden rounded-2xl border border-emerald-200 bg-linear-to-b from-emerald-50/80 to-white\"\n    >\n      <div class=\"flex items-center gap-3 px-4 py-3 sm:px-5\">\n        <div\n          class=\"inline-flex size-8 shrink-0 items-center justify-center rounded-lg border border-emerald-200 bg-emerald-100 text-emerald-600\"\n        >\n          <svg viewBox=\"0 0 20 20\" class=\"size-4\" fill=\"none\">\n            <path\n              d=\"M5.5 10.5 L8.5 13.5 L14.5 7\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.75\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </div>\n        <div class=\"min-w-0\">\n          <h3 class=\"text-[13px] font-semibold tracking-tight text-emerald-800\">\n            {{ 'translate_files_attached' | translate: { count: data().files.length } }}\n          </h3>\n        </div>\n      </div>\n\n      <div class=\"border-t border-emerald-100 px-4 py-2.5 sm:px-5\">\n        <ul class=\"flex flex-wrap gap-2\">\n          @for (file of outputData()!.result!; track file.uploadId) {\n            <li>\n              <button\n                type=\"button\"\n                (click)=\"downloadFile(file.uploadId)\"\n                class=\"inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-emerald-100 bg-white px-2.5 py-1.5 text-[12px] font-medium text-emerald-700 shadow-xs transition-all hover:border-emerald-200 hover:bg-emerald-50 hover:shadow-sm active:scale-[0.97]\"\n              >\n                <svg viewBox=\"0 0 16 16\" class=\"size-3.5 shrink-0 text-emerald-400\" fill=\"none\">\n                  <path\n                    d=\"M4 1.5h5.172a2 2 0 0 1 1.414.586l2.328 2.328a2 2 0 0 1 .586 1.414V12.5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2Z\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.25\"\n                  />\n                  <path\n                    d=\"M9.5 1.5v2a2 2 0 0 0 2 2h2\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.25\"\n                    stroke-linecap=\"round\"\n                  />\n                </svg>\n                <span class=\"truncate max-w-[180px]\">{{ data().files[$index].label }}</span>\n                <svg viewBox=\"0 0 16 16\" class=\"size-3 shrink-0 text-emerald-300\" fill=\"none\">\n                  <path\n                    d=\"M8 3v7m0 0L5.5 7.5M8 10l2.5-2.5M3 13h10\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </button>\n            </li>\n          }\n        </ul>\n      </div>\n    </div>\n  } @else {\n    <!-- Canceled state -->\n    <div class=\"flex justify-center\">\n      <div\n        class=\"inline-flex items-center gap-2.5 rounded-lg border border-slate-200 bg-slate-50 px-4 py-2.5\"\n      >\n        <div\n          class=\"inline-flex size-6 shrink-0 items-center justify-center rounded-md border border-slate-200 bg-slate-100 text-slate-400\"\n        >\n          <svg viewBox=\"0 0 20 20\" class=\"size-3\" fill=\"none\">\n            <path d=\"M6 10h8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n          </svg>\n        </div>\n        <span class=\"text-[13px] font-medium text-slate-400\">{{\n          'translate_file_upload_skipped' | translate\n        }}</span>\n      </div>\n    </div>\n  }\n} @else {\n  <!-- \u2500\u2500 Upload form \u2500\u2500 -->\n  <form [formGroup]=\"form()\" class=\"w-full\">\n    @if (data().files.length === 1) {\n      <!-- Single file: minimal inline -->\n      <fieldset [formArray]=\"form().controls.files\">\n        <div [formGroupName]=\"0\" class=\"rounded-xl border border-slate-200 bg-slate-50 p-3\">\n          <label for=\"capture-file-0\" class=\"mb-1.5 block text-[12px] text-slate-500\">\n            {{ data().files[0].label }}\n          </label>\n          <input hidden formControlName=\"id\" />\n          <div class=\"flex items-center gap-2\">\n            <cortex-file-input id=\"capture-file-0\" formControlName=\"file\" class=\"min-w-0 flex-1\" />\n            <button\n              (click)=\"cancel()\"\n              [disabled]=\"isLoading()\"\n              type=\"button\"\n              class=\"shrink-0 text-[12px] font-medium text-slate-400 transition-colors hover:text-slate-600\"\n            >\n              {{ 'translate_cancel' | translate }}\n            </button>\n            <button\n              (click)=\"submit()\"\n              type=\"button\"\n              class=\"inline-flex shrink-0 items-center rounded-md bg-slate-800 px-3 py-1.5 text-[12px] font-medium text-slate-100 transition-colors hover:bg-slate-700 active:bg-slate-900 disabled:cursor-not-allowed disabled:bg-slate-300\"\n              [disabled]=\"form().invalid || isLoading()\"\n            >\n              @if (isLoading()) {\n                <svg class=\"mr-1.5 size-3 animate-spin\" viewBox=\"0 0 16 16\" fill=\"none\">\n                  <circle\n                    cx=\"8\"\n                    cy=\"8\"\n                    r=\"6\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    class=\"opacity-25\"\n                  />\n                  <path\n                    d=\"M14 8a6 6 0 0 0-6-6\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                  />\n                </svg>\n                {{ 'translate_uploading' | translate }}\n              } @else {\n                {{ 'translate_submit' | translate }}\n              }\n            </button>\n          </div>\n        </div>\n      </fieldset>\n    } @else {\n      <!-- Multi-file: full form -->\n      <div\n        class=\"overflow-hidden rounded-2xl border border-slate-200 bg-gradient-to-b from-white to-slate-50\"\n      >\n        <div class=\"border-b border-slate-200 bg-white/85 px-4 py-3 sm:px-5\">\n          <div class=\"flex items-start gap-3\">\n            <div\n              class=\"mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-lg border border-slate-200 bg-slate-100 text-slate-600\"\n              aria-hidden=\"true\"\n            >\n              <svg viewBox=\"0 0 20 20\" class=\"size-4\" fill=\"none\">\n                <path\n                  d=\"M4 13.5a3.5 3.5 0 0 1-.5-6.97 5.002 5.002 0 0 1 9.78-1.03A4.5 4.5 0 0 1 15.5 14\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.4\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n                <path\n                  d=\"M10 10v7m0-7-2.5 2.5M10 10l2.5 2.5\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.4\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            </div>\n\n            <div class=\"min-w-0\">\n              <h3 class=\"text-[13px] font-semibold tracking-tight text-slate-800\">\n                {{ 'translate_attach_requested_files' | translate }}\n              </h3>\n              <p class=\"mt-0.5 text-[11px] text-slate-500\">\n                {{ 'translate_n_files_required' | translate: { count: data().files.length } }}\n              </p>\n            </div>\n          </div>\n        </div>\n\n        <fieldset [formArray]=\"form().controls.files\" class=\"grid gap-3 p-4 sm:p-5\">\n          @for (file of form().controls.files.value; track $index) {\n            <div\n              [formGroupName]=\"$index\"\n              class=\"rounded-xl border border-slate-200 bg-white p-3 transition-colors hover:border-slate-300\"\n            >\n              <div class=\"mb-2 flex items-center justify-between gap-2\">\n                <label\n                  [for]=\"'capture-file-' + $index\"\n                  class=\"block text-[12px] font-medium leading-none text-slate-700\"\n                >\n                  {{ data().files[$index].label }}\n                </label>\n                <span\n                  class=\"inline-flex items-center rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-slate-500\"\n                >\n                  {{ 'translate_required' | translate }}\n                </span>\n              </div>\n\n              <input hidden formControlName=\"id\" />\n              <cortex-file-input [id]=\"'capture-file-' + $index\" formControlName=\"file\" />\n            </div>\n          }\n        </fieldset>\n\n        <div\n          class=\"flex items-center justify-end gap-2 border-t border-slate-200 bg-white/90 px-4 py-3 sm:px-5\"\n        >\n          <button\n            (click)=\"cancel()\"\n            [disabled]=\"isLoading()\"\n            type=\"button\"\n            class=\"inline-flex items-center rounded-md border border-slate-300 bg-white px-3 py-1.5 text-[12px] font-medium text-slate-600 transition-colors hover:bg-slate-50 active:bg-slate-100\"\n          >\n            {{ 'translate_cancel' | translate }}\n          </button>\n          <button\n            (click)=\"submit()\"\n            type=\"button\"\n            class=\"inline-flex items-center rounded-md bg-slate-800 px-3 py-1.5 text-[12px] font-medium text-slate-100 transition-colors hover:bg-slate-700 active:bg-slate-900 disabled:cursor-not-allowed disabled:bg-slate-300\"\n            [disabled]=\"form().invalid || isLoading()\"\n          >\n            @if (isLoading()) {\n              <svg class=\"mr-1.5 size-3 animate-spin\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <circle\n                  cx=\"8\"\n                  cy=\"8\"\n                  r=\"6\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  class=\"opacity-25\"\n                />\n                <path\n                  d=\"M14 8a6 6 0 0 0-6-6\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n              {{ 'translate_uploading' | translate }}\n            } @else {\n              {{ 'translate_submit_files' | translate }}\n            }\n          </button>\n        </div>\n      </div>\n    }\n  </form>\n}\n", styles: [":host{display:block;width:100%}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.ɵNgNoValidate), selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i0.forwardRef(() => i1$1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormArrayDirective), selector: "[formArray]", inputs: ["formArray"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormGroupName), selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i0.forwardRef(() => FileInputComponent), selector: "cortex-file-input", inputs: ["allowedMimeTypes"] }, { kind: "pipe", type: i0.forwardRef(() => TranslatePipe), name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageCaptureFilesPartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cortex-message-capture-files-part', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, forwardRef(() => FileInputComponent), TranslatePipe], template: "@if (outputData(); as output) {\n  <!-- \u2500\u2500 Result state \u2500\u2500 -->\n  @if (output.status === 'success') {\n    <div\n      class=\"overflow-hidden rounded-2xl border border-emerald-200 bg-linear-to-b from-emerald-50/80 to-white\"\n    >\n      <div class=\"flex items-center gap-3 px-4 py-3 sm:px-5\">\n        <div\n          class=\"inline-flex size-8 shrink-0 items-center justify-center rounded-lg border border-emerald-200 bg-emerald-100 text-emerald-600\"\n        >\n          <svg viewBox=\"0 0 20 20\" class=\"size-4\" fill=\"none\">\n            <path\n              d=\"M5.5 10.5 L8.5 13.5 L14.5 7\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.75\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </div>\n        <div class=\"min-w-0\">\n          <h3 class=\"text-[13px] font-semibold tracking-tight text-emerald-800\">\n            {{ 'translate_files_attached' | translate: { count: data().files.length } }}\n          </h3>\n        </div>\n      </div>\n\n      <div class=\"border-t border-emerald-100 px-4 py-2.5 sm:px-5\">\n        <ul class=\"flex flex-wrap gap-2\">\n          @for (file of outputData()!.result!; track file.uploadId) {\n            <li>\n              <button\n                type=\"button\"\n                (click)=\"downloadFile(file.uploadId)\"\n                class=\"inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-emerald-100 bg-white px-2.5 py-1.5 text-[12px] font-medium text-emerald-700 shadow-xs transition-all hover:border-emerald-200 hover:bg-emerald-50 hover:shadow-sm active:scale-[0.97]\"\n              >\n                <svg viewBox=\"0 0 16 16\" class=\"size-3.5 shrink-0 text-emerald-400\" fill=\"none\">\n                  <path\n                    d=\"M4 1.5h5.172a2 2 0 0 1 1.414.586l2.328 2.328a2 2 0 0 1 .586 1.414V12.5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2Z\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.25\"\n                  />\n                  <path\n                    d=\"M9.5 1.5v2a2 2 0 0 0 2 2h2\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.25\"\n                    stroke-linecap=\"round\"\n                  />\n                </svg>\n                <span class=\"truncate max-w-[180px]\">{{ data().files[$index].label }}</span>\n                <svg viewBox=\"0 0 16 16\" class=\"size-3 shrink-0 text-emerald-300\" fill=\"none\">\n                  <path\n                    d=\"M8 3v7m0 0L5.5 7.5M8 10l2.5-2.5M3 13h10\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </button>\n            </li>\n          }\n        </ul>\n      </div>\n    </div>\n  } @else {\n    <!-- Canceled state -->\n    <div class=\"flex justify-center\">\n      <div\n        class=\"inline-flex items-center gap-2.5 rounded-lg border border-slate-200 bg-slate-50 px-4 py-2.5\"\n      >\n        <div\n          class=\"inline-flex size-6 shrink-0 items-center justify-center rounded-md border border-slate-200 bg-slate-100 text-slate-400\"\n        >\n          <svg viewBox=\"0 0 20 20\" class=\"size-3\" fill=\"none\">\n            <path d=\"M6 10h8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n          </svg>\n        </div>\n        <span class=\"text-[13px] font-medium text-slate-400\">{{\n          'translate_file_upload_skipped' | translate\n        }}</span>\n      </div>\n    </div>\n  }\n} @else {\n  <!-- \u2500\u2500 Upload form \u2500\u2500 -->\n  <form [formGroup]=\"form()\" class=\"w-full\">\n    @if (data().files.length === 1) {\n      <!-- Single file: minimal inline -->\n      <fieldset [formArray]=\"form().controls.files\">\n        <div [formGroupName]=\"0\" class=\"rounded-xl border border-slate-200 bg-slate-50 p-3\">\n          <label for=\"capture-file-0\" class=\"mb-1.5 block text-[12px] text-slate-500\">\n            {{ data().files[0].label }}\n          </label>\n          <input hidden formControlName=\"id\" />\n          <div class=\"flex items-center gap-2\">\n            <cortex-file-input id=\"capture-file-0\" formControlName=\"file\" class=\"min-w-0 flex-1\" />\n            <button\n              (click)=\"cancel()\"\n              [disabled]=\"isLoading()\"\n              type=\"button\"\n              class=\"shrink-0 text-[12px] font-medium text-slate-400 transition-colors hover:text-slate-600\"\n            >\n              {{ 'translate_cancel' | translate }}\n            </button>\n            <button\n              (click)=\"submit()\"\n              type=\"button\"\n              class=\"inline-flex shrink-0 items-center rounded-md bg-slate-800 px-3 py-1.5 text-[12px] font-medium text-slate-100 transition-colors hover:bg-slate-700 active:bg-slate-900 disabled:cursor-not-allowed disabled:bg-slate-300\"\n              [disabled]=\"form().invalid || isLoading()\"\n            >\n              @if (isLoading()) {\n                <svg class=\"mr-1.5 size-3 animate-spin\" viewBox=\"0 0 16 16\" fill=\"none\">\n                  <circle\n                    cx=\"8\"\n                    cy=\"8\"\n                    r=\"6\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    class=\"opacity-25\"\n                  />\n                  <path\n                    d=\"M14 8a6 6 0 0 0-6-6\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                  />\n                </svg>\n                {{ 'translate_uploading' | translate }}\n              } @else {\n                {{ 'translate_submit' | translate }}\n              }\n            </button>\n          </div>\n        </div>\n      </fieldset>\n    } @else {\n      <!-- Multi-file: full form -->\n      <div\n        class=\"overflow-hidden rounded-2xl border border-slate-200 bg-gradient-to-b from-white to-slate-50\"\n      >\n        <div class=\"border-b border-slate-200 bg-white/85 px-4 py-3 sm:px-5\">\n          <div class=\"flex items-start gap-3\">\n            <div\n              class=\"mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-lg border border-slate-200 bg-slate-100 text-slate-600\"\n              aria-hidden=\"true\"\n            >\n              <svg viewBox=\"0 0 20 20\" class=\"size-4\" fill=\"none\">\n                <path\n                  d=\"M4 13.5a3.5 3.5 0 0 1-.5-6.97 5.002 5.002 0 0 1 9.78-1.03A4.5 4.5 0 0 1 15.5 14\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.4\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n                <path\n                  d=\"M10 10v7m0-7-2.5 2.5M10 10l2.5 2.5\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.4\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            </div>\n\n            <div class=\"min-w-0\">\n              <h3 class=\"text-[13px] font-semibold tracking-tight text-slate-800\">\n                {{ 'translate_attach_requested_files' | translate }}\n              </h3>\n              <p class=\"mt-0.5 text-[11px] text-slate-500\">\n                {{ 'translate_n_files_required' | translate: { count: data().files.length } }}\n              </p>\n            </div>\n          </div>\n        </div>\n\n        <fieldset [formArray]=\"form().controls.files\" class=\"grid gap-3 p-4 sm:p-5\">\n          @for (file of form().controls.files.value; track $index) {\n            <div\n              [formGroupName]=\"$index\"\n              class=\"rounded-xl border border-slate-200 bg-white p-3 transition-colors hover:border-slate-300\"\n            >\n              <div class=\"mb-2 flex items-center justify-between gap-2\">\n                <label\n                  [for]=\"'capture-file-' + $index\"\n                  class=\"block text-[12px] font-medium leading-none text-slate-700\"\n                >\n                  {{ data().files[$index].label }}\n                </label>\n                <span\n                  class=\"inline-flex items-center rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-slate-500\"\n                >\n                  {{ 'translate_required' | translate }}\n                </span>\n              </div>\n\n              <input hidden formControlName=\"id\" />\n              <cortex-file-input [id]=\"'capture-file-' + $index\" formControlName=\"file\" />\n            </div>\n          }\n        </fieldset>\n\n        <div\n          class=\"flex items-center justify-end gap-2 border-t border-slate-200 bg-white/90 px-4 py-3 sm:px-5\"\n        >\n          <button\n            (click)=\"cancel()\"\n            [disabled]=\"isLoading()\"\n            type=\"button\"\n            class=\"inline-flex items-center rounded-md border border-slate-300 bg-white px-3 py-1.5 text-[12px] font-medium text-slate-600 transition-colors hover:bg-slate-50 active:bg-slate-100\"\n          >\n            {{ 'translate_cancel' | translate }}\n          </button>\n          <button\n            (click)=\"submit()\"\n            type=\"button\"\n            class=\"inline-flex items-center rounded-md bg-slate-800 px-3 py-1.5 text-[12px] font-medium text-slate-100 transition-colors hover:bg-slate-700 active:bg-slate-900 disabled:cursor-not-allowed disabled:bg-slate-300\"\n            [disabled]=\"form().invalid || isLoading()\"\n          >\n            @if (isLoading()) {\n              <svg class=\"mr-1.5 size-3 animate-spin\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <circle\n                  cx=\"8\"\n                  cy=\"8\"\n                  r=\"6\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  class=\"opacity-25\"\n                />\n                <path\n                  d=\"M14 8a6 6 0 0 0-6-6\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n              {{ 'translate_uploading' | translate }}\n            } @else {\n              {{ 'translate_submit_files' | translate }}\n            }\n          </button>\n        </div>\n      </div>\n    }\n  </form>\n}\n", styles: [":host{display:block;width:100%}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], toolPart: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolPart", required: true }] }] } });
+class FileInputComponent {
+    allowedMimeTypes = input('*/*', ...(ngDevMode ? [{ debugName: "allowedMimeTypes" }] : []));
+    value = signal(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    onTouch;
+    isProcessing = signal(false, ...(ngDevMode ? [{ debugName: "isProcessing" }] : []));
+    onChange;
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    async loadFile(event) {
+        const fileInput = event.target;
+        if (fileInput.files?.length !== 1)
+            return;
+        const inputFile = fileInput.files[0];
+        const result = await convertFileToBase64(inputFile);
+        this.updateValue({
+            name: result.name,
+            bytes: result.bytes,
+        });
+    }
+    updateValue(value) {
+        this.value.set(value);
+        this.onChange?.(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: FileInputComponent, isStandalone: true, selector: "cortex-file-input", inputs: { allowedMimeTypes: { classPropertyName: "allowedMimeTypes", publicName: "allowedMimeTypes", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: forwardRef(() => FileInputComponent),
+            },
+        ], ngImport: i0, template: `<div
+    class="flex w-full cursor-pointer items-center rounded-lg border border-slate-300 bg-slate-50 transition hover:border-slate-400 focus-within:ring-2 focus-within:ring-slate-300"
+  >
+    <button
+      type="button"
+      (click)="fileInput.click()"
+      class="m-1 shrink-0 cursor-pointer rounded-md border-0 bg-slate-800 px-3 py-1.5 text-[11px] font-semibold tracking-wide text-slate-100 hover:bg-slate-700"
+    >
+      {{ 'translate_choose_file' | translate }}
+    </button>
+    <span class="truncate px-3 text-[12px] text-slate-600">{{
+      value()?.name ?? ('translate_no_file_chosen' | translate)
+    }}</span>
+    <input #fileInput (change)="loadFile($event)" type="file" class="hidden" />
+  </div>`, isInline: true, dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FileInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cortex-file-input',
+                    template: `<div
+    class="flex w-full cursor-pointer items-center rounded-lg border border-slate-300 bg-slate-50 transition hover:border-slate-400 focus-within:ring-2 focus-within:ring-slate-300"
+  >
+    <button
+      type="button"
+      (click)="fileInput.click()"
+      class="m-1 shrink-0 cursor-pointer rounded-md border-0 bg-slate-800 px-3 py-1.5 text-[11px] font-semibold tracking-wide text-slate-100 hover:bg-slate-700"
+    >
+      {{ 'translate_choose_file' | translate }}
+    </button>
+    <span class="truncate px-3 text-[12px] text-slate-600">{{
+      value()?.name ?? ('translate_no_file_chosen' | translate)
+    }}</span>
+    <input #fileInput (change)="loadFile($event)" type="file" class="hidden" />
+  </div>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [TranslatePipe],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => FileInputComponent),
+                        },
+                    ],
+                }]
+        }], propDecorators: { allowedMimeTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedMimeTypes", required: false }] }] } });
+async function convertFileToBase64(file) {
+    return new Promise((resolve, reject) => {
+        const tokens = file.name.split('.');
+        const format = tokens.length > 1 ? tokens[tokens.length - 1] : '';
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+            const parts = reader.result.split(',');
+            const mimeType = parts[0].replace('data:', '').replace(';base64', '');
+            resolve({
+                name: file.name,
+                bytes: parts[1],
+                mimeType,
+                format,
+                readerResult: reader.result,
+            });
+        };
+        reader.onerror = () => reject();
+    });
+}
+
+const STATUS_COUNT = 10;
+class MessageToolCallAnimatedComponent {
+    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
+    toolCallPart = input.required(...(ngDevMode ? [{ debugName: "toolCallPart" }] : []));
+    config = inject(CORTEX_CLIENT_CONFIG);
+    customComponent = computed(() => {
+        const toolName = this.toolCallPart().type;
+        const name = toolName?.startsWith('tool-') ? toolName.slice('tool-'.length) : toolName;
+        return name ? (this.config.toolComponents?.[name] ?? null) : null;
+    }, ...(ngDevMode ? [{ debugName: "customComponent" }] : []));
+    animState = computed(() => {
+        const state = this.toolCallPart().state;
+        switch (state) {
+            case 'input-streaming':
+                return 'starting';
+            case 'input-available':
+            case 'approval-requested':
+            case 'approval-responded':
+                return 'processing';
+            case 'output-available':
+                return 'complete';
+            case 'output-error':
+                return 'error';
+            case 'output-denied':
+                return 'denied';
+            default:
+                return 'processing';
+        }
+    }, ...(ngDevMode ? [{ debugName: "animState" }] : []));
+    isActive = computed(() => {
+        const s = this.animState();
+        return s === 'starting' || s === 'processing';
+    }, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    displayTitleKey = computed(() => {
+        const state = this.animState();
+        switch (state) {
+            case 'starting':
+            case 'processing':
+                return `translate_tool_status_${this.stableIndex()}`;
+            case 'complete':
+                return `translate_tool_done_${this.stableIndex()}`;
+            case 'error':
+                return 'translate_tool_error';
+            case 'denied':
+                return 'translate_tool_denied';
+            default:
+                return `translate_tool_status_${this.stableIndex()}`;
+        }
+    }, ...(ngDevMode ? [{ debugName: "displayTitleKey" }] : []));
+    stableIndex = computed(() => {
+        const id = this.toolCallPart().toolCallId ?? '';
+        let hash = 0;
+        for (let i = 0; i < id.length; i++) {
+            hash = (hash * 31 + id.charCodeAt(i)) | 0;
+        }
+        return Math.abs(hash) % STATUS_COUNT;
+    }, ...(ngDevMode ? [{ debugName: "stableIndex" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageToolCallAnimatedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MessageToolCallAnimatedComponent, isStandalone: true, selector: "cortex-message-tool-call-animated", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, toolCallPart: { classPropertyName: "toolCallPart", publicName: "toolCallPart", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "block w-full" }, ngImport: i0, template: "@if (customComponent(); as custom) {\n  <ng-container\n    *ngComponentOutlet=\"custom; inputs: { toolCallPart: toolCallPart(), message: message() }\"\n  />\n} @else {\n  @switch (toolCallPart().type) {\n    @case ('tool-captureFiles') {\n      <cortex-message-capture-files-part [toolPart]=\"toolCallPart()\" [message]=\"message()\" />\n    }\n    @default {\n      @let state = animState();\n      @let active = isActive();\n\n      <div class=\"flex justify-center\">\n        <div\n          class=\"inline-flex items-center gap-2.5 py-2.5 px-4 rounded-lg border relative overflow-hidden transition-colors duration-300\"\n          [ngClass]=\"{\n            'border-indigo-200 bg-indigo-50': active,\n            'border-emerald-200 bg-emerald-50': state === 'complete',\n            'border-red-200 bg-red-50': state === 'error',\n            'border-slate-200 bg-slate-50 opacity-60': state === 'denied',\n          }\"\n        >\n          <!-- Icon box -->\n          <div\n            class=\"relative size-6 flex items-center justify-center rounded-md border shrink-0 transition-colors duration-300\"\n            [ngClass]=\"{\n              'bg-indigo-100 border-indigo-200': active,\n              'bg-emerald-100 border-emerald-200': state === 'complete',\n              'bg-red-100 border-red-200': state === 'error',\n              'bg-slate-100 border-slate-200': state === 'denied',\n            }\"\n          >\n            <!-- Spinner -->\n            <div\n              class=\"absolute size-3 border-[1.5px] border-indigo-200 border-t-indigo-500 rounded-full animate-spin transition-opacity duration-200\"\n              [ngClass]=\"active ? 'opacity-100' : 'opacity-0'\"\n            ></div>\n            <!-- Check -->\n            <svg\n              class=\"absolute size-3 transition-all duration-200\"\n              [ngClass]=\"\n                state === 'complete'\n                  ? 'opacity-100 scale-100 text-emerald-600'\n                  : 'opacity-0 scale-[0.6]'\n              \"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M5.5 10.5 L8.5 13.5 L14.5 7\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n            <!-- Error -->\n            <svg\n              class=\"absolute size-3 transition-all duration-200\"\n              [ngClass]=\"\n                state === 'error' ? 'opacity-100 scale-100 text-red-600' : 'opacity-0 scale-[0.6]'\n              \"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M6.5 6.5 L13.5 13.5 M13.5 6.5 L6.5 13.5\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n              />\n            </svg>\n            <!-- Denied -->\n            <svg\n              class=\"absolute size-3 transition-all duration-200\"\n              [ngClass]=\"\n                state === 'denied'\n                  ? 'opacity-100 scale-100 text-slate-400'\n                  : 'opacity-0 scale-[0.6]'\n              \"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M6 10 L14 10\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n              />\n            </svg>\n          </div>\n\n          <!-- Title -->\n          <span\n            class=\"text-[13px] font-medium whitespace-nowrap overflow-hidden text-ellipsis transition-colors duration-300\"\n            [ngClass]=\"{\n              'text-indigo-700': active,\n              'text-emerald-700': state === 'complete',\n              'text-red-600': state === 'error',\n              'text-slate-400': state === 'denied',\n            }\"\n          >\n            {{ displayTitleKey() | translate }}\n          </span>\n\n          <!-- Bottom bar -->\n          <div class=\"absolute bottom-0 inset-x-0 h-0.5 overflow-hidden\">\n            <div\n              class=\"h-full w-full origin-left\"\n              [ngClass]=\"{\n                'bg-indigo-400 animate-bar-slide': active,\n                'bg-emerald-400 animate-bar-fill': state === 'complete',\n                'bg-red-400 animate-bar-fill': state === 'error',\n                'opacity-0': state === 'denied',\n              }\"\n            ></div>\n          </div>\n        </div>\n      </div>\n    }\n  }\n}\n", styles: [".animate-bar-slide{animation:bar-slide 1.5s ease-in-out infinite}.animate-bar-fill{animation:bar-fill .3s ease-out both}@keyframes bar-slide{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes bar-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MessageCaptureFilesPartComponent, selector: "cortex-message-capture-files-part", inputs: ["message", "toolPart"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageToolCallAnimatedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cortex-message-tool-call-animated', imports: [NgClass, MessageCaptureFilesPartComponent, TranslatePipe], host: { class: 'block w-full' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (customComponent(); as custom) {\n  <ng-container\n    *ngComponentOutlet=\"custom; inputs: { toolCallPart: toolCallPart(), message: message() }\"\n  />\n} @else {\n  @switch (toolCallPart().type) {\n    @case ('tool-captureFiles') {\n      <cortex-message-capture-files-part [toolPart]=\"toolCallPart()\" [message]=\"message()\" />\n    }\n    @default {\n      @let state = animState();\n      @let active = isActive();\n\n      <div class=\"flex justify-center\">\n        <div\n          class=\"inline-flex items-center gap-2.5 py-2.5 px-4 rounded-lg border relative overflow-hidden transition-colors duration-300\"\n          [ngClass]=\"{\n            'border-indigo-200 bg-indigo-50': active,\n            'border-emerald-200 bg-emerald-50': state === 'complete',\n            'border-red-200 bg-red-50': state === 'error',\n            'border-slate-200 bg-slate-50 opacity-60': state === 'denied',\n          }\"\n        >\n          <!-- Icon box -->\n          <div\n            class=\"relative size-6 flex items-center justify-center rounded-md border shrink-0 transition-colors duration-300\"\n            [ngClass]=\"{\n              'bg-indigo-100 border-indigo-200': active,\n              'bg-emerald-100 border-emerald-200': state === 'complete',\n              'bg-red-100 border-red-200': state === 'error',\n              'bg-slate-100 border-slate-200': state === 'denied',\n            }\"\n          >\n            <!-- Spinner -->\n            <div\n              class=\"absolute size-3 border-[1.5px] border-indigo-200 border-t-indigo-500 rounded-full animate-spin transition-opacity duration-200\"\n              [ngClass]=\"active ? 'opacity-100' : 'opacity-0'\"\n            ></div>\n            <!-- Check -->\n            <svg\n              class=\"absolute size-3 transition-all duration-200\"\n              [ngClass]=\"\n                state === 'complete'\n                  ? 'opacity-100 scale-100 text-emerald-600'\n                  : 'opacity-0 scale-[0.6]'\n              \"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M5.5 10.5 L8.5 13.5 L14.5 7\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n            <!-- Error -->\n            <svg\n              class=\"absolute size-3 transition-all duration-200\"\n              [ngClass]=\"\n                state === 'error' ? 'opacity-100 scale-100 text-red-600' : 'opacity-0 scale-[0.6]'\n              \"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M6.5 6.5 L13.5 13.5 M13.5 6.5 L6.5 13.5\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n              />\n            </svg>\n            <!-- Denied -->\n            <svg\n              class=\"absolute size-3 transition-all duration-200\"\n              [ngClass]=\"\n                state === 'denied'\n                  ? 'opacity-100 scale-100 text-slate-400'\n                  : 'opacity-0 scale-[0.6]'\n              \"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M6 10 L14 10\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n              />\n            </svg>\n          </div>\n\n          <!-- Title -->\n          <span\n            class=\"text-[13px] font-medium whitespace-nowrap overflow-hidden text-ellipsis transition-colors duration-300\"\n            [ngClass]=\"{\n              'text-indigo-700': active,\n              'text-emerald-700': state === 'complete',\n              'text-red-600': state === 'error',\n              'text-slate-400': state === 'denied',\n            }\"\n          >\n            {{ displayTitleKey() | translate }}\n          </span>\n\n          <!-- Bottom bar -->\n          <div class=\"absolute bottom-0 inset-x-0 h-0.5 overflow-hidden\">\n            <div\n              class=\"h-full w-full origin-left\"\n              [ngClass]=\"{\n                'bg-indigo-400 animate-bar-slide': active,\n                'bg-emerald-400 animate-bar-fill': state === 'complete',\n                'bg-red-400 animate-bar-fill': state === 'error',\n                'opacity-0': state === 'denied',\n              }\"\n            ></div>\n          </div>\n        </div>\n      </div>\n    }\n  }\n}\n", styles: [".animate-bar-slide{animation:bar-slide 1.5s ease-in-out infinite}.animate-bar-fill{animation:bar-fill .3s ease-out both}@keyframes bar-slide{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes bar-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}\n"] }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], toolCallPart: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolCallPart", required: true }] }] } });
+
+class MessageReasoningAnimatedComponent {
+    reasoningPart = input.required(...(ngDevMode ? [{ debugName: "reasoningPart" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageReasoningAnimatedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: MessageReasoningAnimatedComponent, isStandalone: true, selector: "cortex-message-reasoning-animated", inputs: { reasoningPart: { classPropertyName: "reasoningPart", publicName: "reasoningPart", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "flex justify-center" }, ngImport: i0, template: "@let p = reasoningPart();\n@let streaming = p.state === 'streaming';\n\n<div\n  class=\"inline-flex items-center gap-2.5 py-2 pl-3 pr-4 rounded-lg border transition-colors duration-300\"\n  [ngClass]=\"streaming ? 'border-indigo-200 bg-indigo-50' : 'border-slate-200 bg-slate-50'\"\n>\n  <div class=\"flex items-center gap-1\">\n    <span\n      class=\"size-[5px] rounded-full transition-all duration-400\"\n      [ngClass]=\"streaming ? 'animate-dot-pulse bg-indigo-300' : 'bg-slate-300 opacity-40'\"\n    ></span>\n    <span\n      class=\"size-[5px] rounded-full transition-all duration-400\"\n      [ngClass]=\"streaming ? 'animate-dot-pulse bg-indigo-300' : 'bg-slate-300 opacity-40'\"\n      [style.animation-delay]=\"streaming ? '200ms' : '0ms'\"\n    ></span>\n    <span\n      class=\"size-[5px] rounded-full transition-all duration-400\"\n      [ngClass]=\"streaming ? 'animate-dot-pulse bg-indigo-300' : 'bg-slate-300 opacity-40'\"\n      [style.animation-delay]=\"streaming ? '400ms' : '0ms'\"\n    ></span>\n    <span\n      class=\"size-[5px] rounded-full transition-all duration-400\"\n      [ngClass]=\"streaming ? 'animate-dot-pulse bg-indigo-300' : 'bg-slate-300 opacity-40'\"\n      [style.animation-delay]=\"streaming ? '600ms' : '0ms'\"\n    ></span>\n  </div>\n\n  <span\n    class=\"text-[13px] font-medium transition-colors duration-300\"\n    [ngClass]=\"streaming ? 'text-indigo-600' : 'text-slate-400'\"\n  >\n    {{ streaming ? ('translate_thinking' | translate) : ('translate_reasoned' | translate) }}\n  </span>\n</div>\n", styles: [".animate-dot-pulse{animation:dot-pulse 1.4s ease-in-out infinite}@keyframes dot-pulse{0%,to{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1.3);background-color:#6366f1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageReasoningAnimatedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cortex-message-reasoning-animated', imports: [NgClass, TranslatePipe], host: { class: 'flex justify-center' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let p = reasoningPart();\n@let streaming = p.state === 'streaming';\n\n<div\n  class=\"inline-flex items-center gap-2.5 py-2 pl-3 pr-4 rounded-lg border transition-colors duration-300\"\n  [ngClass]=\"streaming ? 'border-indigo-200 bg-indigo-50' : 'border-slate-200 bg-slate-50'\"\n>\n  <div class=\"flex items-center gap-1\">\n    <span\n      class=\"size-[5px] rounded-full transition-all duration-400\"\n      [ngClass]=\"streaming ? 'animate-dot-pulse bg-indigo-300' : 'bg-slate-300 opacity-40'\"\n    ></span>\n    <span\n      class=\"size-[5px] rounded-full transition-all duration-400\"\n      [ngClass]=\"streaming ? 'animate-dot-pulse bg-indigo-300' : 'bg-slate-300 opacity-40'\"\n      [style.animation-delay]=\"streaming ? '200ms' : '0ms'\"\n    ></span>\n    <span\n      class=\"size-[5px] rounded-full transition-all duration-400\"\n      [ngClass]=\"streaming ? 'animate-dot-pulse bg-indigo-300' : 'bg-slate-300 opacity-40'\"\n      [style.animation-delay]=\"streaming ? '400ms' : '0ms'\"\n    ></span>\n    <span\n      class=\"size-[5px] rounded-full transition-all duration-400\"\n      [ngClass]=\"streaming ? 'animate-dot-pulse bg-indigo-300' : 'bg-slate-300 opacity-40'\"\n      [style.animation-delay]=\"streaming ? '600ms' : '0ms'\"\n    ></span>\n  </div>\n\n  <span\n    class=\"text-[13px] font-medium transition-colors duration-300\"\n    [ngClass]=\"streaming ? 'text-indigo-600' : 'text-slate-400'\"\n  >\n    {{ streaming ? ('translate_thinking' | translate) : ('translate_reasoned' | translate) }}\n  </span>\n</div>\n", styles: [".animate-dot-pulse{animation:dot-pulse 1.4s ease-in-out infinite}@keyframes dot-pulse{0%,to{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1.3);background-color:#6366f1}}\n"] }]
+        }], propDecorators: { reasoningPart: [{ type: i0.Input, args: [{ isSignal: true, alias: "reasoningPart", required: true }] }] } });
+
+class MessagePartComponent {
+    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
+    part = input.required(...(ngDevMode ? [{ debugName: "part" }] : []));
+    debugMode = input(false, ...(ngDevMode ? [{ debugName: "debugMode" }] : []));
+    animate = input(false, ...(ngDevMode ? [{ debugName: "animate" }] : []));
+    config = inject(CORTEX_CLIENT_CONFIG);
+    isStaticToolUIPart = isStaticToolUIPart;
+    customToolComponent = computed(() => {
+        const p = this.part();
+        if (!isStaticToolUIPart(p))
+            return null;
+        const toolName = p.type?.startsWith('tool-') ? p.type.slice('tool-'.length) : p.type;
+        return toolName ? (this.config.toolComponents?.[toolName] ?? null) : null;
+    }, ...(ngDevMode ? [{ debugName: "customToolComponent" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessagePartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MessagePartComponent, isStandalone: true, selector: "cortex-message-part", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, part: { classPropertyName: "part", publicName: "part", isSignal: true, isRequired: true, transformFunction: null }, debugMode: { classPropertyName: "debugMode", publicName: "debugMode", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.animate-part-enter": "animate()" } }, ngImport: i0, template: "@let myPart = part();\n@switch (myPart.type) {\n  @case ('text') {\n    <cortex-message-text-part [textPart]=\"myPart\" [role]=\"message().role\" />\n  }\n  @case ('reasoning') {\n    @if (debugMode()) {\n      <cortex-message-reasoning-part [reasoningPart]=\"myPart\" />\n    } @else {\n      <cortex-message-reasoning-animated [reasoningPart]=\"myPart\" />\n    }\n  }\n  @default {\n    @if (isStaticToolUIPart(myPart)) {\n      @if (!debugMode() || customToolComponent()) {\n        <cortex-message-tool-call-animated [toolCallPart]=\"myPart\" [message]=\"message()\" />\n      } @else {\n        <cortex-message-tool-call-part [toolCallPart]=\"myPart\" />\n      }\n    } @else {\n      <p class=\"text-center text-xs text-slate-400\">Unhandled type: {{ part().type }}</p>\n    }\n  }\n}\n", styles: [":host{display:block}:host:empty{display:none}:host.animate-part-enter{animation:partFadeInUp .2s cubic-bezier(.34,1.56,.64,1) both}@keyframes partFadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: MessageTextPartComponent, selector: "cortex-message-text-part", inputs: ["role", "textPart"] }, { kind: "component", type: MessageReasoningPartComponent, selector: "cortex-message-reasoning-part", inputs: ["reasoningPart"] }, { kind: "component", type: MessageToolCallPartComponent, selector: "cortex-message-tool-call-part", inputs: ["toolCallPart"] }, { kind: "component", type: MessageToolCallAnimatedComponent, selector: "cortex-message-tool-call-animated", inputs: ["message", "toolCallPart"] }, { kind: "component", type: MessageReasoningAnimatedComponent, selector: "cortex-message-reasoning-animated", inputs: ["reasoningPart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessagePartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cortex-message-part', imports: [
+                        MessageTextPartComponent,
+                        MessageReasoningPartComponent,
+                        MessageToolCallPartComponent,
+                        MessageToolCallAnimatedComponent,
+                        MessageReasoningAnimatedComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.animate-part-enter]': 'animate()',
+                    }, template: "@let myPart = part();\n@switch (myPart.type) {\n  @case ('text') {\n    <cortex-message-text-part [textPart]=\"myPart\" [role]=\"message().role\" />\n  }\n  @case ('reasoning') {\n    @if (debugMode()) {\n      <cortex-message-reasoning-part [reasoningPart]=\"myPart\" />\n    } @else {\n      <cortex-message-reasoning-animated [reasoningPart]=\"myPart\" />\n    }\n  }\n  @default {\n    @if (isStaticToolUIPart(myPart)) {\n      @if (!debugMode() || customToolComponent()) {\n        <cortex-message-tool-call-animated [toolCallPart]=\"myPart\" [message]=\"message()\" />\n      } @else {\n        <cortex-message-tool-call-part [toolCallPart]=\"myPart\" />\n      }\n    } @else {\n      <p class=\"text-center text-xs text-slate-400\">Unhandled type: {{ part().type }}</p>\n    }\n  }\n}\n", styles: [":host{display:block}:host:empty{display:none}:host.animate-part-enter{animation:partFadeInUp .2s cubic-bezier(.34,1.56,.64,1) both}@keyframes partFadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], part: [{ type: i0.Input, args: [{ isSignal: true, alias: "part", required: true }] }], debugMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugMode", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }] } });
+
+class MessageComponent {
+    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
+    debugMode = input(false, ...(ngDevMode ? [{ debugName: "debugMode" }] : []));
+    animate = input(false, ...(ngDevMode ? [{ debugName: "animate" }] : []));
+    visibleParts = computed(() => this.parts().filter((x) => x.type !== 'step-start'), ...(ngDevMode ? [{ debugName: "visibleParts" }] : []));
+    parts = signal([], ...(ngDevMode ? [{ debugName: "parts" }] : []));
+    constructor() {
+        effect(() => {
+            const parts = this.message().parts;
+            this.parts.set(parts);
+            const originalPush = parts.push;
+            parts.push = (...items) => {
+                const newParts = items;
+                newParts.forEach((x) => (x.__id = generateId()));
+                this.parts.update((x) => [...x, ...newParts]);
+                newParts.forEach((part) => {
+                    Object.keys(part).forEach((prop) => {
+                        let value = part[prop];
+                        Object.defineProperty(part, prop, {
+                            get: () => value,
+                            set: (newValue) => {
+                                value = newValue;
+                                this.parts.update((existingParts) => {
+                                    return existingParts.map((x) => {
+                                        return x.__id === part.__id ? { ...x, [prop]: newValue } : x;
+                                    });
+                                });
+                            },
+                            configurable: true,
+                        });
+                    });
+                });
+                return originalPush.apply(parts, newParts);
+            };
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MessageComponent, isStandalone: true, selector: "cortex-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, debugMode: { classPropertyName: "debugMode", publicName: "debugMode", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (visibleParts().length) {\n  <div class=\"w-full flex flex-col gap-2\">\n    @for (part of visibleParts(); track $index) {\n      <cortex-message-part\n        [part]=\"part\"\n        [message]=\"message()\"\n        [debugMode]=\"debugMode()\"\n        [animate]=\"animate()\"\n      />\n    }\n  </div>\n}\n", styles: [":host:empty{display:none}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: MessagePartComponent, selector: "cortex-message-part", inputs: ["message", "part", "debugMode", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cortex-message', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MessagePartComponent], template: "@if (visibleParts().length) {\n  <div class=\"w-full flex flex-col gap-2\">\n    @for (part of visibleParts(); track $index) {\n      <cortex-message-part\n        [part]=\"part\"\n        [message]=\"message()\"\n        [debugMode]=\"debugMode()\"\n        [animate]=\"animate()\"\n      />\n    }\n  </div>\n}\n", styles: [":host:empty{display:none}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], debugMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugMode", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }] } });
+
+class MessageListComponent {
+    chatService;
+    debugMode = input(false, ...(ngDevMode ? [{ debugName: "debugMode" }] : []));
+    messagesContainer = viewChild('messagesContainer', ...(ngDevMode ? [{ debugName: "messagesContainer" }] : []));
+    shouldScrollToBottom = true;
+    isNearBottom = true;
+    animateNewParts = signal(false, ...(ngDevMode ? [{ debugName: "animateNewParts" }] : []));
+    constructor(chatService, destroyRef) {
+        this.chatService = chatService;
+        this.scrollToBottom();
+        effect(() => {
+            this.chatService.chat()?.messages;
+            if (!this.shouldScrollToBottom && !this.isNearBottom) {
+                return;
+            }
+            queueMicrotask(() => {
+                this.scrollToBottom();
+                this.shouldScrollToBottom = false;
+            });
+        });
+        chatService.events$.pipe(takeUntilDestroyed(destroyRef)).subscribe((event) => {
+            if (event === 'onThreadSelected') {
+                this.animateNewParts.set(false);
+                this.shouldScrollToBottom = true;
+                queueMicrotask(() => this.animateNewParts.set(true));
+            }
+            if (event === 'onSend')
+                this.shouldScrollToBottom = true;
+        });
+    }
+    ngAfterViewInit() {
+        queueMicrotask(() => {
+            this.scrollToBottom();
+            this.shouldScrollToBottom = false;
+            this.animateNewParts.set(true);
+        });
+    }
+    onScroll() {
+        const el = this.messagesContainer()?.nativeElement;
+        if (!el)
+            return;
+        this.isNearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 100;
+    }
+    scrollToBottom() {
+        const el = this.messagesContainer()?.nativeElement;
+        if (el) {
+            el.scrollTop = el.scrollHeight;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageListComponent, deps: [{ token: CortexChatService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MessageListComponent, isStandalone: true, selector: "cortex-message-list", inputs: { debugMode: { classPropertyName: "debugMode", publicName: "debugMode", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["messagesContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"h-full overflow-y-auto w-full flex flex-col gap-2 p-4\"\n  #messagesContainer\n  (scroll)=\"onScroll()\"\n>\n  @for (message of chatService.chat()?.messages; track message.id) {\n    <cortex-message [message]=\"message\" [debugMode]=\"debugMode()\" [animate]=\"animateNewParts()\" />\n  }\n</div>\n", dependencies: [{ kind: "component", type: MessageComponent, selector: "cortex-message", inputs: ["message", "debugMode", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cortex-message-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MessageComponent], template: "<div\n  class=\"h-full overflow-y-auto w-full flex flex-col gap-2 p-4\"\n  #messagesContainer\n  (scroll)=\"onScroll()\"\n>\n  @for (message of chatService.chat()?.messages; track message.id) {\n    <cortex-message [message]=\"message\" [debugMode]=\"debugMode()\" [animate]=\"animateNewParts()\" />\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: CortexChatService }, { type: i0.DestroyRef }], propDecorators: { debugMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugMode", required: false }] }], messagesContainer: [{ type: i0.ViewChild, args: ['messagesContainer', { isSignal: true }] }] } });
+
+var translate_new$1 = "New";
+var translate_threads$1 = "Threads";
+var translate_n_conversations$1 = "{{count}} conversations";
+var translate_untitled$1 = "Untitled";
+var translate_new_chat$1 = "New Chat";
+var translate_normal$1 = "Normal";
+var translate_debug$1 = "Debug";
+var translate_type_a_message$1 = "Type a message...";
+var translate_thinking$1 = "Thinking";
+var translate_reasoned$1 = "Reasoned";
+var translate_knowledge_graph_query$1 = "Knowledge Graph Query";
+var translate_javascript_code_execution$1 = "JavaScript Code Execution";
+var translate_completed$1 = "Completed";
+var translate_files_attached$1 = "{{count}} file(s) attached";
+var translate_file_upload_skipped$1 = "File upload skipped";
+var translate_cancel$1 = "Cancel";
+var translate_uploading$1 = "Uploading…";
+var translate_submit$1 = "Submit";
+var translate_attach_requested_files$1 = "Attach requested files";
+var translate_n_files_required$1 = "{{count}} file(s) required";
+var translate_required$1 = "Required";
+var translate_submit_files$1 = "Submit files";
+var translate_choose_file$1 = "Choose file";
+var translate_no_file_chosen$1 = "No file chosen";
+var translate_tool_status_0$1 = "Fetching data…";
+var translate_tool_status_1$1 = "Analyzing information…";
+var translate_tool_status_2$1 = "Processing request…";
+var translate_tool_status_3$1 = "Gathering results…";
+var translate_tool_status_4$1 = "Preparing response…";
+var translate_tool_status_5$1 = "Looking things up…";
+var translate_tool_status_6$1 = "Checking records…";
+var translate_tool_status_7$1 = "Reviewing details…";
+var translate_tool_status_8$1 = "Running calculations…";
+var translate_tool_status_9$1 = "Pulling information…";
+var translate_tool_done_0$1 = "Data fetched successfully";
+var translate_tool_done_1$1 = "Analysis completed successfully";
+var translate_tool_done_2$1 = "Request processed successfully";
+var translate_tool_done_3$1 = "Results gathered successfully";
+var translate_tool_done_4$1 = "Response prepared successfully";
+var translate_tool_done_5$1 = "Lookup completed successfully";
+var translate_tool_done_6$1 = "Records checked successfully";
+var translate_tool_done_7$1 = "Review completed successfully";
+var translate_tool_done_8$1 = "Calculations completed successfully";
+var translate_tool_done_9$1 = "Information retrieved successfully";
+var translate_tool_error$1 = "Something went wrong";
+var translate_tool_denied$1 = "Cancelled";
+var en = {
+	translate_new: translate_new$1,
+	translate_threads: translate_threads$1,
+	translate_n_conversations: translate_n_conversations$1,
+	translate_untitled: translate_untitled$1,
+	translate_new_chat: translate_new_chat$1,
+	translate_normal: translate_normal$1,
+	translate_debug: translate_debug$1,
+	translate_type_a_message: translate_type_a_message$1,
+	translate_thinking: translate_thinking$1,
+	translate_reasoned: translate_reasoned$1,
+	translate_knowledge_graph_query: translate_knowledge_graph_query$1,
+	translate_javascript_code_execution: translate_javascript_code_execution$1,
+	translate_completed: translate_completed$1,
+	translate_files_attached: translate_files_attached$1,
+	translate_file_upload_skipped: translate_file_upload_skipped$1,
+	translate_cancel: translate_cancel$1,
+	translate_uploading: translate_uploading$1,
+	translate_submit: translate_submit$1,
+	translate_attach_requested_files: translate_attach_requested_files$1,
+	translate_n_files_required: translate_n_files_required$1,
+	translate_required: translate_required$1,
+	translate_submit_files: translate_submit_files$1,
+	translate_choose_file: translate_choose_file$1,
+	translate_no_file_chosen: translate_no_file_chosen$1,
+	translate_tool_status_0: translate_tool_status_0$1,
+	translate_tool_status_1: translate_tool_status_1$1,
+	translate_tool_status_2: translate_tool_status_2$1,
+	translate_tool_status_3: translate_tool_status_3$1,
+	translate_tool_status_4: translate_tool_status_4$1,
+	translate_tool_status_5: translate_tool_status_5$1,
+	translate_tool_status_6: translate_tool_status_6$1,
+	translate_tool_status_7: translate_tool_status_7$1,
+	translate_tool_status_8: translate_tool_status_8$1,
+	translate_tool_status_9: translate_tool_status_9$1,
+	translate_tool_done_0: translate_tool_done_0$1,
+	translate_tool_done_1: translate_tool_done_1$1,
+	translate_tool_done_2: translate_tool_done_2$1,
+	translate_tool_done_3: translate_tool_done_3$1,
+	translate_tool_done_4: translate_tool_done_4$1,
+	translate_tool_done_5: translate_tool_done_5$1,
+	translate_tool_done_6: translate_tool_done_6$1,
+	translate_tool_done_7: translate_tool_done_7$1,
+	translate_tool_done_8: translate_tool_done_8$1,
+	translate_tool_done_9: translate_tool_done_9$1,
+	translate_tool_error: translate_tool_error$1,
+	translate_tool_denied: translate_tool_denied$1
+};
+
+var translate_new = "جديد";
+var translate_threads = "المحادثات";
+var translate_n_conversations = "{{count}} محادثات";
+var translate_untitled = "بدون عنوان";
+var translate_new_chat = "محادثة جديدة";
+var translate_normal = "عادي";
+var translate_debug = "تصحيح";
+var translate_type_a_message = "اكتب رسالة...";
+var translate_thinking = "يفكر";
+var translate_reasoned = "تم الاستنتاج";
+var translate_knowledge_graph_query = "استعلام الرسم البياني المعرفي";
+var translate_javascript_code_execution = "تنفيذ كود جافاسكريبت";
+var translate_completed = "مكتمل";
+var translate_files_attached = "{{count}} ملف(ات) مرفقة";
+var translate_file_upload_skipped = "تم تخطي رفع الملف";
+var translate_cancel = "إلغاء";
+var translate_uploading = "جارٍ الرفع…";
+var translate_submit = "إرسال";
+var translate_attach_requested_files = "إرفاق الملفات المطلوبة";
+var translate_n_files_required = "{{count}} ملف(ات) مطلوبة";
+var translate_required = "مطلوب";
+var translate_submit_files = "إرسال الملفات";
+var translate_choose_file = "اختر ملف";
+var translate_no_file_chosen = "لم يتم اختيار ملف";
+var translate_tool_status_0 = "جارٍ جلب البيانات…";
+var translate_tool_status_1 = "جارٍ تحليل المعلومات…";
+var translate_tool_status_2 = "جارٍ معالجة الطلب…";
+var translate_tool_status_3 = "جارٍ تجميع النتائج…";
+var translate_tool_status_4 = "جارٍ تحضير الرد…";
+var translate_tool_status_5 = "جارٍ البحث…";
+var translate_tool_status_6 = "جارٍ فحص السجلات…";
+var translate_tool_status_7 = "جارٍ مراجعة التفاصيل…";
+var translate_tool_status_8 = "جارٍ إجراء الحسابات…";
+var translate_tool_status_9 = "جارٍ سحب المعلومات…";
+var translate_tool_done_0 = "تم جلب البيانات بنجاح";
+var translate_tool_done_1 = "تم التحليل بنجاح";
+var translate_tool_done_2 = "تمت معالجة الطلب بنجاح";
+var translate_tool_done_3 = "تم تجميع النتائج بنجاح";
+var translate_tool_done_4 = "تم تحضير الرد بنجاح";
+var translate_tool_done_5 = "تم البحث بنجاح";
+var translate_tool_done_6 = "تم فحص السجلات بنجاح";
+var translate_tool_done_7 = "تمت المراجعة بنجاح";
+var translate_tool_done_8 = "تمت الحسابات بنجاح";
+var translate_tool_done_9 = "تم استرجاع المعلومات بنجاح";
+var translate_tool_error = "حدث خطأ";
+var translate_tool_denied = "تم الإلغاء";
+var ar = {
+	translate_new: translate_new,
+	translate_threads: translate_threads,
+	translate_n_conversations: translate_n_conversations,
+	translate_untitled: translate_untitled,
+	translate_new_chat: translate_new_chat,
+	translate_normal: translate_normal,
+	translate_debug: translate_debug,
+	translate_type_a_message: translate_type_a_message,
+	translate_thinking: translate_thinking,
+	translate_reasoned: translate_reasoned,
+	translate_knowledge_graph_query: translate_knowledge_graph_query,
+	translate_javascript_code_execution: translate_javascript_code_execution,
+	translate_completed: translate_completed,
+	translate_files_attached: translate_files_attached,
+	translate_file_upload_skipped: translate_file_upload_skipped,
+	translate_cancel: translate_cancel,
+	translate_uploading: translate_uploading,
+	translate_submit: translate_submit,
+	translate_attach_requested_files: translate_attach_requested_files,
+	translate_n_files_required: translate_n_files_required,
+	translate_required: translate_required,
+	translate_submit_files: translate_submit_files,
+	translate_choose_file: translate_choose_file,
+	translate_no_file_chosen: translate_no_file_chosen,
+	translate_tool_status_0: translate_tool_status_0,
+	translate_tool_status_1: translate_tool_status_1,
+	translate_tool_status_2: translate_tool_status_2,
+	translate_tool_status_3: translate_tool_status_3,
+	translate_tool_status_4: translate_tool_status_4,
+	translate_tool_status_5: translate_tool_status_5,
+	translate_tool_status_6: translate_tool_status_6,
+	translate_tool_status_7: translate_tool_status_7,
+	translate_tool_status_8: translate_tool_status_8,
+	translate_tool_status_9: translate_tool_status_9,
+	translate_tool_done_0: translate_tool_done_0,
+	translate_tool_done_1: translate_tool_done_1,
+	translate_tool_done_2: translate_tool_done_2,
+	translate_tool_done_3: translate_tool_done_3,
+	translate_tool_done_4: translate_tool_done_4,
+	translate_tool_done_5: translate_tool_done_5,
+	translate_tool_done_6: translate_tool_done_6,
+	translate_tool_done_7: translate_tool_done_7,
+	translate_tool_done_8: translate_tool_done_8,
+	translate_tool_done_9: translate_tool_done_9,
+	translate_tool_error: translate_tool_error,
+	translate_tool_denied: translate_tool_denied
+};
+
+const translations = { en, ar };
+class CortexClientTranslateLoader {
+    getTranslation(lang) {
+        return of(translations[lang] ?? translations['en']);
+    }
+}
+
+class CortexClientConfigRef {
+    config;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CortexClientConfigRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CortexClientConfigRef });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CortexClientConfigRef, decorators: [{
+            type: Injectable
+        }] });
+class CortexChatWidgetComponent {
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+    text = model('', ...(ngDevMode ? [{ debugName: "text" }] : []));
+    debugMode = signal(false, ...(ngDevMode ? [{ debugName: "debugMode" }] : []));
+    screen = signal('threads', ...(ngDevMode ? [{ debugName: "screen" }] : []));
+    theme = signal(undefined, ...(ngDevMode ? [{ debugName: "theme" }] : []));
+    chatService;
+    configRef = inject(CortexClientConfigRef);
+    injector = inject(Injector);
+    ngOnInit() {
+        this.configRef.config = this.config();
+        this.theme.set(this.config().theme);
+        this.chatService = this.injector.get(CortexChatService);
+        const translateService = this.injector.get(TranslateService);
+        translateService.use(this.config().locale());
+        effect(() => {
+            translateService.use(this.config().locale());
+        }, { injector: this.injector });
+    }
+    toggleDebugMode() {
+        this.debugMode.update((v) => !v);
+    }
+    selectThread(thread) {
+        this.chatService.selectThread(thread).subscribe();
+        this.screen.set('chat');
+    }
+    goBack() {
+        this.chatService.deselectThread();
+        this.screen.set('threads');
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            this.send();
+        }
+    }
+    send() {
+        if (this.chatService.isAgentWorking())
+            return;
+        const text = this.text().trim();
+        if (!text)
+            return;
+        this.text.set('');
+        this.chatService.send(text).subscribe();
+    }
+    newChat() {
+        this.chatService.deselectThread();
+        this.screen.set('chat');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CortexChatWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CortexChatWidgetComponent, isStandalone: true, selector: "cortex-chat-widget", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange" }, host: { properties: { "style.--cortex-primary-color": "theme()?.primaryColor", "style.--cortex-bg-color": "theme()?.backgroundColor", "style.--cortex-surface-color": "theme()?.surfaceColor", "style.--cortex-text-color": "theme()?.textColor", "style.--cortex-border-radius": "theme()?.borderRadius" }, classAttribute: "block" }, providers: [
+            CortexClientConfigRef,
+            {
+                provide: CORTEX_CLIENT_CONFIG,
+                useFactory: () => inject(CortexClientConfigRef).config,
+            },
+            CortexChatService,
+            CortexClientWebSocketService,
+            ...provideTranslateService({
+                fallbackLang: 'en',
+                loader: provideTranslateLoader(CortexClientTranslateLoader),
+            }),
+        ], ngImport: i0, template: "<div class=\"w-full h-full relative overflow-hidden bg-slate-5\">\n  <!-- \u2550\u2550\u2550 SCREEN 1: THREADS \u2550\u2550\u2550 -->\n  <div\n    class=\"absolute inset-0 flex flex-col transition-transform duration-300 ease-out\"\n    [ngClass]=\"\n      screen() === 'threads' ? 'translate-x-0' : 'ltr:-translate-x-full rtl:translate-x-full'\n    \"\n  >\n    <!-- Threads header -->\n    <div class=\"shrink-0 px-5 pt-5 pb-4 flex items-center justify-between\">\n      <div>\n        <h2 class=\"text-[15px] font-semibold text-slate-800 tracking-tight\">\n          {{ 'translate_threads' | translate }}\n        </h2>\n        <p class=\"text-[11px] text-slate-400 mt-0.5\">\n          {{\n            'translate_n_conversations' | translate: { count: chatService.threads()?.length ?? 0 }\n          }}\n        </p>\n      </div>\n      <button\n        (click)=\"newChat()\"\n        class=\"inline-flex items-center gap-1.5 text-[12px] font-medium text-slate-100 bg-slate-800 px-3 py-1.5 rounded-md hover:bg-slate-700 active:bg-slate-900 transition-colors cursor-pointer\"\n      >\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n          <path\n            d=\"M8 3v10M3 8h10\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n        {{ 'translate_new' | translate }}\n      </button>\n    </div>\n\n    <!-- Threads list -->\n    <div class=\"flex-1 overflow-y-auto px-3 pb-3\">\n      <!-- Threads loading skeleton -->\n      @if (chatService.threads() === undefined) {\n        @for (i of [1, 2, 3, 4]; track i) {\n          <div class=\"flex items-center gap-3 px-3 py-3 mb-0.5\">\n            <div class=\"skeleton shrink-0 size-8\"></div>\n            <div class=\"flex-1 flex flex-col gap-1.5\">\n              <div class=\"skeleton h-3.5\" [style.width]=\"40 + i * 12 + '%'\"></div>\n            </div>\n          </div>\n        }\n      } @else {\n        @for (thread of chatService.threads(); track thread.id) {\n          <button\n            (click)=\"selectThread(thread)\"\n            class=\"group w-full text-start px-3 py-3 rounded-lg flex items-center gap-3 transition-colors cursor-pointer mb-0.5\"\n            [ngClass]=\"{\n              'bg-slate-200 text-slate-100': thread.id === chatService.selectedThread()?.id,\n              'text-slate-600 hover:bg-slate-100 active:bg-slate-150':\n                thread.id !== chatService.selectedThread()?.id,\n            }\"\n          >\n            <!-- Thread icon -->\n            <div\n              class=\"shrink-0 size-8 rounded-md flex items-center justify-center text-[11px] font-semibold rtl:transform rtl:rotate-180\"\n              [ngClass]=\"{\n                'bg-slate-700 text-slate-300': thread.id === chatService.selectedThread()?.id,\n                'bg-slate-200 text-slate-500': thread.id !== chatService.selectedThread()?.id,\n              }\"\n            >\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path\n                  d=\"M2.5 4.5h11M2.5 8h7M2.5 11.5h9\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.3\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n\n            <!-- Thread info -->\n            <div class=\"min-w-0 flex-1\">\n              <p\n                class=\"text-[13px] font-medium truncate leading-tight\"\n                [ngClass]=\"{\n                  'text-slate-100': thread.id === chatService.selectedThread()?.id,\n                  'text-slate-700': thread.id !== chatService.selectedThread()?.id,\n                }\"\n              >\n                {{ thread.title ?? ('translate_untitled' | translate) }}\n              </p>\n            </div>\n\n            <!-- Delete button -->\n            <button\n              (click)=\"$event.stopPropagation(); chatService.deleteThread(thread.id).subscribe()\"\n              class=\"shrink-0 opacity-0 group-hover:opacity-100 transition-opacity size-7 rounded-md flex items-center justify-center cursor-pointer\"\n              [ngClass]=\"{\n                'hover:bg-slate-600 text-slate-400': thread.id === chatService.selectedThread()?.id,\n                'hover:bg-slate-200 text-slate-400': thread.id !== chatService.selectedThread()?.id,\n              }\"\n            >\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path\n                  d=\"M4 4l8 8M12 4l-8 8\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.3\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </button>\n\n            <!-- Arrow -->\n            <svg\n              class=\"shrink-0 transition-colors rtl:transform rtl:rotate-180\"\n              [ngClass]=\"{\n                'text-slate-500': thread.id === chatService.selectedThread()?.id,\n                'text-slate-300 group-hover:text-slate-400':\n                  thread.id !== chatService.selectedThread()?.id,\n              }\"\n              width=\"10\"\n              height=\"10\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M6 4l4 4-4 4\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </button>\n        }\n\n        @if (!chatService.threads()?.length) {\n          <div class=\"flex flex-col items-center justify-center py-16 text-center\">\n            <div class=\"size-10 rounded-lg bg-slate-200 flex items-center justify-center mb-3\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" class=\"text-slate-400\">\n                <path\n                  d=\"M2.5 4.5h11M2.5 8h7M2.5 11.5h9\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.3\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n            <p class=\"text-[13px] text-slate-400 font-medium\">No threads yet</p>\n            <p class=\"text-[11px] text-slate-350 mt-1\">Start a new conversation</p>\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- \u2550\u2550\u2550 SCREEN 2: CHAT \u2550\u2550\u2550 -->\n  <div\n    class=\"absolute inset-0 flex flex-col transition-transform duration-300 ease-out\"\n    [ngClass]=\"screen() === 'chat' ? 'translate-x-0' : 'ltr:translate-x-full rtl:-translate-x-full'\"\n  >\n    <!-- Chat header -->\n    <div class=\"shrink-0 h-12 px-4 flex items-center gap-3 border-b border-slate-200 bg-white\">\n      <!-- Back button -->\n      <button\n        (click)=\"goBack()\"\n        class=\"shrink-0 size-8 rounded-md flex items-center justify-center text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-colors cursor-pointer\"\n      >\n        <svg\n          width=\"14\"\n          height=\"14\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          class=\"rtl:transform rtl:rotate-180\"\n        >\n          <path\n            d=\"M10 3L5 8l5 5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n\n      <!-- Title -->\n      <div class=\"min-w-0 flex-1\">\n        <p class=\"text-[13px] font-medium text-slate-700 truncate\">\n          {{ chatService.selectedThread()?.title ?? ('translate_new_chat' | translate) }}\n        </p>\n      </div>\n\n      <!-- Debug toggle -->\n      <button\n        (click)=\"toggleDebugMode()\"\n        class=\"shrink-0 text-[11px] font-medium px-2.5 py-1 rounded-md transition-colors cursor-pointer\"\n        [ngClass]=\"{\n          'bg-amber-50 text-amber-600 hover:bg-amber-100': debugMode(),\n          'bg-slate-100 text-slate-400 hover:bg-slate-200': !debugMode(),\n        }\"\n      >\n        {{ debugMode() ? ('translate_debug' | translate) : ('translate_normal' | translate) }}\n      </button>\n    </div>\n\n    <!-- Messages loading skeleton -->\n    @if (chatService.isLoadingMessages() && !chatService.isAgentWorking()) {\n      <div class=\"flex-1 overflow-hidden p-4 flex flex-col gap-2\">\n        <!-- User message skeleton -->\n        <div class=\"w-full flex flex-col items-start\">\n          <div\n            class=\"max-w-4/5 p-4 rounded-2xl rounded-bl-none border border-slate-200 bg-slate-50 flex flex-col gap-2\"\n          >\n            <div class=\"skeleton h-3 w-52\"></div>\n            <div class=\"skeleton h-3 w-36\"></div>\n          </div>\n        </div>\n        <!-- Assistant message skeleton -->\n        <div class=\"w-full flex flex-col items-end\">\n          <div\n            class=\"max-w-4/5 p-4 rounded-2xl rounded-br-none border border-slate-200 bg-slate-100 flex flex-col gap-2\"\n          >\n            <div class=\"skeleton h-3 w-64\"></div>\n            <div class=\"skeleton h-3 w-72\"></div>\n            <div class=\"skeleton h-3 w-48\"></div>\n          </div>\n        </div>\n        <!-- User message skeleton -->\n        <div class=\"w-full flex flex-col items-start\">\n          <div\n            class=\"max-w-4/5 p-4 rounded-2xl rounded-bl-none border border-slate-200 bg-slate-50 flex flex-col gap-2\"\n          >\n            <div class=\"skeleton h-3 w-44\"></div>\n          </div>\n        </div>\n        <!-- Assistant message skeleton -->\n        <div class=\"w-full flex flex-col items-end\">\n          <div\n            class=\"max-w-4/5 p-4 rounded-2xl rounded-br-none border border-slate-200 bg-slate-100 flex flex-col gap-2\"\n          >\n            <div class=\"skeleton h-3 w-56\"></div>\n            <div class=\"skeleton h-3 w-60\"></div>\n          </div>\n        </div>\n      </div>\n    } @else {\n      <!-- Messages area -->\n      <cortex-message-list class=\"flex-1 overflow-hidden\" [debugMode]=\"debugMode()\" />\n    }\n\n    <!-- Agent working indicator -->\n    @if (chatService.isAgentWorking() && !chatService.hasPendingToolCalls()) {\n      <div class=\"shrink-0 px-4 py-1.5 flex items-center gap-1.5\">\n        <div class=\"flex items-center gap-[3px]\">\n          <span class=\"cortex-working-dot block size-[5px] rounded-full bg-slate-400\"></span>\n          <span class=\"cortex-working-dot block size-[5px] rounded-full bg-slate-400\"></span>\n          <span class=\"cortex-working-dot block size-[5px] rounded-full bg-slate-400\"></span>\n        </div>\n        <span class=\"text-[11px] text-slate-400 font-medium\">{{\n          'translate_thinking' | translate\n        }}</span>\n      </div>\n    }\n\n    <!-- Chat input (hidden during pending tool calls) -->\n    @if (!chatService.hasPendingToolCalls()) {\n      <div class=\"shrink-0 p-3 bg-white border-t border-slate-200\">\n        <div\n          class=\"flex items-end gap-2 rounded-xl border border-slate-200 p-1.5 transition-colors\"\n          [ngClass]=\"{\n            'bg-slate-100': chatService.isAgentWorking(),\n            'bg-slate-50 focus-within:border-slate-300 focus-within:bg-white':\n              !chatService.isAgentWorking(),\n          }\"\n        >\n          <textarea\n            (keydown)=\"onKeydown($event)\"\n            [(ngModel)]=\"text\"\n            [placeholder]=\"\n              chatService.isAgentWorking() ? '' : ('translate_type_a_message' | translate)\n            \"\n            [disabled]=\"chatService.isAgentWorking()\"\n            rows=\"1\"\n            class=\"flex-1 bg-transparent resize-none border-0 outline-none text-[13px] placeholder:text-slate-350 py-1.5 px-2 min-h-[28px] max-h-[120px] leading-snug disabled:cursor-not-allowed disabled:border-0\"\n            [ngClass]=\"{\n              'text-slate-400': chatService.isAgentWorking(),\n              'text-slate-700': !chatService.isAgentWorking(),\n            }\"\n          ></textarea>\n          @if (chatService.isAgentWorking()) {\n            <!-- Stop button -->\n            <button\n              (click)=\"chatService.abort()\"\n              class=\"stop-btn shrink-0 size-8 rounded-lg flex items-center justify-center cursor-pointer relative\"\n            >\n              <!-- Pulsing ring -->\n              <span class=\"stop-btn-ring absolute inset-0 rounded-lg\"></span>\n              <!-- Stop icon (rounded square) -->\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" class=\"relative z-10\">\n                <rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" rx=\"2.5\" fill=\"currentColor\" />\n              </svg>\n            </button>\n          } @else {\n            <!-- Send button -->\n            <button\n              (click)=\"send()\"\n              class=\"shrink-0 size-8 rounded-lg flex items-center justify-center transition-colors\"\n              [ngClass]=\"{\n                'bg-slate-200 text-slate-400': !text().trim(),\n                'bg-slate-800 text-white hover:bg-slate-700 cursor-pointer': text().trim(),\n              }\"\n            >\n              <svg\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                class=\"rtl:transform rtl:rotate-180\"\n              >\n                <path\n                  d=\"M3 8h10M9 4l4 4-4 4\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.5\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            </button>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes skeleton-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg,#e2e8f0,#f1f5f9,#e2e8f0 80%);background-size:200% 100%;animation:skeleton-shimmer 1.8s ease-in-out infinite;border-radius:6px}@keyframes cortex-pulse{0%,to{opacity:.4}50%{opacity:1}}@keyframes cortex-dot-bounce{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-3px)}}.cortex-working-dot{animation:cortex-pulse 1.6s ease-in-out infinite,cortex-dot-bounce 1.2s ease-in-out infinite}.cortex-working-dot:nth-child(2){animation-delay:.15s}.cortex-working-dot:nth-child(3){animation-delay:.3s}@keyframes stop-pulse-ring{0%{opacity:.45;transform:scale(1)}50%{opacity:.15;transform:scale(1.12)}to{opacity:.45;transform:scale(1)}}@keyframes stop-fade-in{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.stop-btn{background:#e11d48;color:#fff;animation:stop-fade-in .2s ease-out both;transition:background .15s ease}.stop-btn:hover{background:#be123c}.stop-btn:active{transform:scale(.92)}.stop-btn-ring{background:#e11d48;animation:stop-pulse-ring 2s ease-in-out infinite;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MessageListComponent, selector: "cortex-message-list", inputs: ["debugMode"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CortexChatWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cortex-chat-widget', imports: [NgClass, MessageListComponent, FormsModule, TranslatePipe], providers: [
+                        CortexClientConfigRef,
+                        {
+                            provide: CORTEX_CLIENT_CONFIG,
+                            useFactory: () => inject(CortexClientConfigRef).config,
+                        },
+                        CortexChatService,
+                        CortexClientWebSocketService,
+                        ...provideTranslateService({
+                            fallbackLang: 'en',
+                            loader: provideTranslateLoader(CortexClientTranslateLoader),
+                        }),
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'block',
+                        '[style.--cortex-primary-color]': 'theme()?.primaryColor',
+                        '[style.--cortex-bg-color]': 'theme()?.backgroundColor',
+                        '[style.--cortex-surface-color]': 'theme()?.surfaceColor',
+                        '[style.--cortex-text-color]': 'theme()?.textColor',
+                        '[style.--cortex-border-radius]': 'theme()?.borderRadius',
+                    }, template: "<div class=\"w-full h-full relative overflow-hidden bg-slate-5\">\n  <!-- \u2550\u2550\u2550 SCREEN 1: THREADS \u2550\u2550\u2550 -->\n  <div\n    class=\"absolute inset-0 flex flex-col transition-transform duration-300 ease-out\"\n    [ngClass]=\"\n      screen() === 'threads' ? 'translate-x-0' : 'ltr:-translate-x-full rtl:translate-x-full'\n    \"\n  >\n    <!-- Threads header -->\n    <div class=\"shrink-0 px-5 pt-5 pb-4 flex items-center justify-between\">\n      <div>\n        <h2 class=\"text-[15px] font-semibold text-slate-800 tracking-tight\">\n          {{ 'translate_threads' | translate }}\n        </h2>\n        <p class=\"text-[11px] text-slate-400 mt-0.5\">\n          {{\n            'translate_n_conversations' | translate: { count: chatService.threads()?.length ?? 0 }\n          }}\n        </p>\n      </div>\n      <button\n        (click)=\"newChat()\"\n        class=\"inline-flex items-center gap-1.5 text-[12px] font-medium text-slate-100 bg-slate-800 px-3 py-1.5 rounded-md hover:bg-slate-700 active:bg-slate-900 transition-colors cursor-pointer\"\n      >\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n          <path\n            d=\"M8 3v10M3 8h10\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n        {{ 'translate_new' | translate }}\n      </button>\n    </div>\n\n    <!-- Threads list -->\n    <div class=\"flex-1 overflow-y-auto px-3 pb-3\">\n      <!-- Threads loading skeleton -->\n      @if (chatService.threads() === undefined) {\n        @for (i of [1, 2, 3, 4]; track i) {\n          <div class=\"flex items-center gap-3 px-3 py-3 mb-0.5\">\n            <div class=\"skeleton shrink-0 size-8\"></div>\n            <div class=\"flex-1 flex flex-col gap-1.5\">\n              <div class=\"skeleton h-3.5\" [style.width]=\"40 + i * 12 + '%'\"></div>\n            </div>\n          </div>\n        }\n      } @else {\n        @for (thread of chatService.threads(); track thread.id) {\n          <button\n            (click)=\"selectThread(thread)\"\n            class=\"group w-full text-start px-3 py-3 rounded-lg flex items-center gap-3 transition-colors cursor-pointer mb-0.5\"\n            [ngClass]=\"{\n              'bg-slate-200 text-slate-100': thread.id === chatService.selectedThread()?.id,\n              'text-slate-600 hover:bg-slate-100 active:bg-slate-150':\n                thread.id !== chatService.selectedThread()?.id,\n            }\"\n          >\n            <!-- Thread icon -->\n            <div\n              class=\"shrink-0 size-8 rounded-md flex items-center justify-center text-[11px] font-semibold rtl:transform rtl:rotate-180\"\n              [ngClass]=\"{\n                'bg-slate-700 text-slate-300': thread.id === chatService.selectedThread()?.id,\n                'bg-slate-200 text-slate-500': thread.id !== chatService.selectedThread()?.id,\n              }\"\n            >\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path\n                  d=\"M2.5 4.5h11M2.5 8h7M2.5 11.5h9\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.3\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n\n            <!-- Thread info -->\n            <div class=\"min-w-0 flex-1\">\n              <p\n                class=\"text-[13px] font-medium truncate leading-tight\"\n                [ngClass]=\"{\n                  'text-slate-100': thread.id === chatService.selectedThread()?.id,\n                  'text-slate-700': thread.id !== chatService.selectedThread()?.id,\n                }\"\n              >\n                {{ thread.title ?? ('translate_untitled' | translate) }}\n              </p>\n            </div>\n\n            <!-- Delete button -->\n            <button\n              (click)=\"$event.stopPropagation(); chatService.deleteThread(thread.id).subscribe()\"\n              class=\"shrink-0 opacity-0 group-hover:opacity-100 transition-opacity size-7 rounded-md flex items-center justify-center cursor-pointer\"\n              [ngClass]=\"{\n                'hover:bg-slate-600 text-slate-400': thread.id === chatService.selectedThread()?.id,\n                'hover:bg-slate-200 text-slate-400': thread.id !== chatService.selectedThread()?.id,\n              }\"\n            >\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path\n                  d=\"M4 4l8 8M12 4l-8 8\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.3\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </button>\n\n            <!-- Arrow -->\n            <svg\n              class=\"shrink-0 transition-colors rtl:transform rtl:rotate-180\"\n              [ngClass]=\"{\n                'text-slate-500': thread.id === chatService.selectedThread()?.id,\n                'text-slate-300 group-hover:text-slate-400':\n                  thread.id !== chatService.selectedThread()?.id,\n              }\"\n              width=\"10\"\n              height=\"10\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M6 4l4 4-4 4\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </button>\n        }\n\n        @if (!chatService.threads()?.length) {\n          <div class=\"flex flex-col items-center justify-center py-16 text-center\">\n            <div class=\"size-10 rounded-lg bg-slate-200 flex items-center justify-center mb-3\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" class=\"text-slate-400\">\n                <path\n                  d=\"M2.5 4.5h11M2.5 8h7M2.5 11.5h9\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.3\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n            <p class=\"text-[13px] text-slate-400 font-medium\">No threads yet</p>\n            <p class=\"text-[11px] text-slate-350 mt-1\">Start a new conversation</p>\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- \u2550\u2550\u2550 SCREEN 2: CHAT \u2550\u2550\u2550 -->\n  <div\n    class=\"absolute inset-0 flex flex-col transition-transform duration-300 ease-out\"\n    [ngClass]=\"screen() === 'chat' ? 'translate-x-0' : 'ltr:translate-x-full rtl:-translate-x-full'\"\n  >\n    <!-- Chat header -->\n    <div class=\"shrink-0 h-12 px-4 flex items-center gap-3 border-b border-slate-200 bg-white\">\n      <!-- Back button -->\n      <button\n        (click)=\"goBack()\"\n        class=\"shrink-0 size-8 rounded-md flex items-center justify-center text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-colors cursor-pointer\"\n      >\n        <svg\n          width=\"14\"\n          height=\"14\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          class=\"rtl:transform rtl:rotate-180\"\n        >\n          <path\n            d=\"M10 3L5 8l5 5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n\n      <!-- Title -->\n      <div class=\"min-w-0 flex-1\">\n        <p class=\"text-[13px] font-medium text-slate-700 truncate\">\n          {{ chatService.selectedThread()?.title ?? ('translate_new_chat' | translate) }}\n        </p>\n      </div>\n\n      <!-- Debug toggle -->\n      <button\n        (click)=\"toggleDebugMode()\"\n        class=\"shrink-0 text-[11px] font-medium px-2.5 py-1 rounded-md transition-colors cursor-pointer\"\n        [ngClass]=\"{\n          'bg-amber-50 text-amber-600 hover:bg-amber-100': debugMode(),\n          'bg-slate-100 text-slate-400 hover:bg-slate-200': !debugMode(),\n        }\"\n      >\n        {{ debugMode() ? ('translate_debug' | translate) : ('translate_normal' | translate) }}\n      </button>\n    </div>\n\n    <!-- Messages loading skeleton -->\n    @if (chatService.isLoadingMessages() && !chatService.isAgentWorking()) {\n      <div class=\"flex-1 overflow-hidden p-4 flex flex-col gap-2\">\n        <!-- User message skeleton -->\n        <div class=\"w-full flex flex-col items-start\">\n          <div\n            class=\"max-w-4/5 p-4 rounded-2xl rounded-bl-none border border-slate-200 bg-slate-50 flex flex-col gap-2\"\n          >\n            <div class=\"skeleton h-3 w-52\"></div>\n            <div class=\"skeleton h-3 w-36\"></div>\n          </div>\n        </div>\n        <!-- Assistant message skeleton -->\n        <div class=\"w-full flex flex-col items-end\">\n          <div\n            class=\"max-w-4/5 p-4 rounded-2xl rounded-br-none border border-slate-200 bg-slate-100 flex flex-col gap-2\"\n          >\n            <div class=\"skeleton h-3 w-64\"></div>\n            <div class=\"skeleton h-3 w-72\"></div>\n            <div class=\"skeleton h-3 w-48\"></div>\n          </div>\n        </div>\n        <!-- User message skeleton -->\n        <div class=\"w-full flex flex-col items-start\">\n          <div\n            class=\"max-w-4/5 p-4 rounded-2xl rounded-bl-none border border-slate-200 bg-slate-50 flex flex-col gap-2\"\n          >\n            <div class=\"skeleton h-3 w-44\"></div>\n          </div>\n        </div>\n        <!-- Assistant message skeleton -->\n        <div class=\"w-full flex flex-col items-end\">\n          <div\n            class=\"max-w-4/5 p-4 rounded-2xl rounded-br-none border border-slate-200 bg-slate-100 flex flex-col gap-2\"\n          >\n            <div class=\"skeleton h-3 w-56\"></div>\n            <div class=\"skeleton h-3 w-60\"></div>\n          </div>\n        </div>\n      </div>\n    } @else {\n      <!-- Messages area -->\n      <cortex-message-list class=\"flex-1 overflow-hidden\" [debugMode]=\"debugMode()\" />\n    }\n\n    <!-- Agent working indicator -->\n    @if (chatService.isAgentWorking() && !chatService.hasPendingToolCalls()) {\n      <div class=\"shrink-0 px-4 py-1.5 flex items-center gap-1.5\">\n        <div class=\"flex items-center gap-[3px]\">\n          <span class=\"cortex-working-dot block size-[5px] rounded-full bg-slate-400\"></span>\n          <span class=\"cortex-working-dot block size-[5px] rounded-full bg-slate-400\"></span>\n          <span class=\"cortex-working-dot block size-[5px] rounded-full bg-slate-400\"></span>\n        </div>\n        <span class=\"text-[11px] text-slate-400 font-medium\">{{\n          'translate_thinking' | translate\n        }}</span>\n      </div>\n    }\n\n    <!-- Chat input (hidden during pending tool calls) -->\n    @if (!chatService.hasPendingToolCalls()) {\n      <div class=\"shrink-0 p-3 bg-white border-t border-slate-200\">\n        <div\n          class=\"flex items-end gap-2 rounded-xl border border-slate-200 p-1.5 transition-colors\"\n          [ngClass]=\"{\n            'bg-slate-100': chatService.isAgentWorking(),\n            'bg-slate-50 focus-within:border-slate-300 focus-within:bg-white':\n              !chatService.isAgentWorking(),\n          }\"\n        >\n          <textarea\n            (keydown)=\"onKeydown($event)\"\n            [(ngModel)]=\"text\"\n            [placeholder]=\"\n              chatService.isAgentWorking() ? '' : ('translate_type_a_message' | translate)\n            \"\n            [disabled]=\"chatService.isAgentWorking()\"\n            rows=\"1\"\n            class=\"flex-1 bg-transparent resize-none border-0 outline-none text-[13px] placeholder:text-slate-350 py-1.5 px-2 min-h-[28px] max-h-[120px] leading-snug disabled:cursor-not-allowed disabled:border-0\"\n            [ngClass]=\"{\n              'text-slate-400': chatService.isAgentWorking(),\n              'text-slate-700': !chatService.isAgentWorking(),\n            }\"\n          ></textarea>\n          @if (chatService.isAgentWorking()) {\n            <!-- Stop button -->\n            <button\n              (click)=\"chatService.abort()\"\n              class=\"stop-btn shrink-0 size-8 rounded-lg flex items-center justify-center cursor-pointer relative\"\n            >\n              <!-- Pulsing ring -->\n              <span class=\"stop-btn-ring absolute inset-0 rounded-lg\"></span>\n              <!-- Stop icon (rounded square) -->\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" class=\"relative z-10\">\n                <rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" rx=\"2.5\" fill=\"currentColor\" />\n              </svg>\n            </button>\n          } @else {\n            <!-- Send button -->\n            <button\n              (click)=\"send()\"\n              class=\"shrink-0 size-8 rounded-lg flex items-center justify-center transition-colors\"\n              [ngClass]=\"{\n                'bg-slate-200 text-slate-400': !text().trim(),\n                'bg-slate-800 text-white hover:bg-slate-700 cursor-pointer': text().trim(),\n              }\"\n            >\n              <svg\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                class=\"rtl:transform rtl:rotate-180\"\n              >\n                <path\n                  d=\"M3 8h10M9 4l4 4-4 4\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.5\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            </button>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes skeleton-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg,#e2e8f0,#f1f5f9,#e2e8f0 80%);background-size:200% 100%;animation:skeleton-shimmer 1.8s ease-in-out infinite;border-radius:6px}@keyframes cortex-pulse{0%,to{opacity:.4}50%{opacity:1}}@keyframes cortex-dot-bounce{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-3px)}}.cortex-working-dot{animation:cortex-pulse 1.6s ease-in-out infinite,cortex-dot-bounce 1.2s ease-in-out infinite}.cortex-working-dot:nth-child(2){animation-delay:.15s}.cortex-working-dot:nth-child(3){animation-delay:.3s}@keyframes stop-pulse-ring{0%{opacity:.45;transform:scale(1)}50%{opacity:.15;transform:scale(1.12)}to{opacity:.45;transform:scale(1)}}@keyframes stop-fade-in{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.stop-btn{background:#e11d48;color:#fff;animation:stop-fade-in .2s ease-out both;transition:background .15s ease}.stop-btn:hover{background:#be123c}.stop-btn:active{transform:scale(.92)}.stop-btn-ring{background:#e11d48;animation:stop-pulse-ring 2s ease-in-out infinite;pointer-events:none}\n"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }, { type: i0.Output, args: ["textChange"] }] } });
+
+class PrettyJsonPipe {
+    transform(value) {
+        if (value == null)
+            return '';
+        const formatted = this.deepFormat(value);
+        return JSON.stringify(formatted, null, 2).replace(/\\n/g, '\n');
+    }
+    deepFormat(value) {
+        if (typeof value === 'string') {
+            const trimmed = value.trim();
+            if ((trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+                (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+                try {
+                    const parsed = JSON.parse(trimmed);
+                    return this.deepFormat(parsed);
+                }
+                catch {
+                    // Not valid JSON, fall through
+                }
+            }
+            return value;
+        }
+        if (Array.isArray(value)) {
+            return value.map((item) => this.deepFormat(item));
+        }
+        if (value !== null && typeof value === 'object') {
+            const result = {};
+            for (const [key, val] of Object.entries(value)) {
+                result[key] = this.deepFormat(val);
+            }
+            return result;
+        }
+        return value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrettyJsonPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: PrettyJsonPipe, isStandalone: true, name: "prettyJson" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrettyJsonPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'prettyJson', standalone: true }]
+        }] });
+
+/*
+ * Public API Surface of cortex-client
+ */
+// Services
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CortexChatService, CortexChatWidgetComponent, CortexClientWebSocketService, FileInputComponent, HighlightPipe, JsonTreeComponent, MarkedPipe, MessageCaptureFilesPartComponent, MessageComponent, MessageListComponent, MessagePartComponent, MessageReasoningAnimatedComponent, MessageReasoningPartComponent, MessageTextPartComponent, MessageToolCallAnimatedComponent, MessageToolCallPartComponent, PrettyJsonPipe };
+//# sourceMappingURL=m6d-cortex-client.mjs.map