@meshmakers/shared-ui 3.4.1480 → 3.5.0

package/fesm2022/meshmakers-shared-ui-assistant.mjs

@@ -0,0 +1,819 @@
+import { assistantMessages, ASSISTANT_SLASH_COMMANDS, selectAssistantAttachments, formatAssistantMessage, proposalDecisionLabel, ASSISTANT_TOOL_CALL_COMPONENT, AssistantService, ASSISTANT_PANEL_OPTIONS, DEFAULT_ASSISTANT_PANEL_STORAGE_KEY, DEFAULT_ASSISTANT_PANEL_MIN_WIDTH, DEFAULT_ASSISTANT_PANEL_MAX_WIDTH } from '@meshmakers/shared-ui/assistant-core';
+export { ASSISTANT_ENABLED, ASSISTANT_MESSAGES, ASSISTANT_NOT_CONNECTED_MESSAGE, ASSISTANT_PAGE_CONTEXT, ASSISTANT_PANEL_OPTIONS, ASSISTANT_SLASH_COMMANDS, ASSISTANT_TOOL_CALL_COMPONENT, ASSISTANT_TRANSPORT, AssistantExplainDirective, AssistantService, AssistantToolCallRowComponent, DEFAULT_ASSISTANT_MESSAGES, DEFAULT_ASSISTANT_PANEL_MAX_WIDTH, DEFAULT_ASSISTANT_PANEL_MIN_WIDTH, DEFAULT_ASSISTANT_PANEL_STORAGE_KEY, DEFAULT_ASSISTANT_SLASH_COMMANDS, FakeAssistantTransport, IfAssistantDirective, NotConnectedAssistantTransport, assistantFileAccepted, assistantHotkey, deriveAssistantContext, formatAssistantFileSize, formatAssistantMessage, proposalDecisionLabel, resolveAssistantMessages, selectAssistantAttachments } from '@meshmakers/shared-ui/assistant-core';
+import * as i0 from '@angular/core';
+import { Pipe, model, input, output, viewChild, signal, computed, inject, ChangeDetectionStrategy, Component, ElementRef, effect, Injector, DestroyRef, afterNextRender, untracked } from '@angular/core';
+import { Marked } from 'marked';
+import { SVGIconComponent } from '@progress/kendo-angular-icons';
+import { xIcon, paperclipIcon, plusIcon, clockArrowRotateIcon, trashIcon } from '@progress/kendo-svg-icons';
+import { NgComponentOutlet } from '@angular/common';
+import { OctoBotComponent } from '@meshmakers/shared-ui';
+
+/** Protocols an assistant link may use; everything else (javascript:, data:, vbscript: …) renders as text. */
+const SAFE_PROTOCOLS = new Set(['http:', 'https:', 'mailto:']);
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+/** Classifies a link target: external (http/https/mailto), relative (same origin) or unsafe. */
+function classifyAssistantHref(href) {
+    const value = (href ?? '').trim();
+    if (!value) {
+        return 'unsafe';
+    }
+    // Strip control characters and whitespace browsers ignore inside a scheme ("java\nscript:").
+    // eslint-disable-next-line no-control-regex
+    const compact = value.replace(/[\u0000- \u007f]/g, '');
+    const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(compact);
+    if (scheme) {
+        return SAFE_PROTOCOLS.has(`${scheme[1].toLowerCase()}:`) ? 'external' : 'unsafe';
+    }
+    // Protocol-relative URLs leave the origin. Browsers treat a backslash like "/" in http(s)
+    // URLs, so "/\evil.example" and "\\evil.example" leave it as well.
+    if (compact.replace(/\\/g, '/').startsWith('//')) {
+        return 'unsafe';
+    }
+    return 'relative';
+}
+function safeLink(href, labelHtml, title) {
+    const kind = classifyAssistantHref(href);
+    if (kind === 'unsafe') {
+        return labelHtml;
+    }
+    const titleAttr = title ? ` title="${escapeHtml(title)}"` : '';
+    const external = kind === 'external' ? ' target="_blank" rel="noopener noreferrer"' : '';
+    return `<a href="${escapeHtml(href.trim())}"${titleAttr}${external}>${labelHtml}</a>`;
+}
+/**
+ * Markdown renderer for assistant turns. Model output is untrusted, so:
+ * raw HTML is shown as text, images never load (they become their alt text,
+ * linked when the source is a safe URL), links only keep http(s)/mailto and
+ * relative targets — external ones open in a new tab with
+ * `rel="noopener noreferrer"` — and anything else renders as its label.
+ * The result is bound with `[innerHTML]`, so Angular's sanitizer runs as a
+ * second layer.
+ */
+const assistantMarked = new Marked({
+    async: false,
+    gfm: true,
+    renderer: {
+        html({ text }) {
+            return escapeHtml(text);
+        },
+        link(token) {
+            return safeLink(token.href, this.parser.parseInline(token.tokens), token.title);
+        },
+        image({ href, text }) {
+            const label = escapeHtml(text || 'image');
+            return classifyAssistantHref(href) === 'unsafe' ? label : safeLink(href, label);
+        }
+    }
+});
+/** Renders untrusted assistant markdown to HTML with the rules above. */
+function renderAssistantMarkdown(markdown) {
+    return assistantMarked.parse(markdown ?? '', { async: false });
+}
+/** `{{ text | assistantMarkdown }}` for `[innerHTML]` bindings. */
+class AssistantMarkdownPipe {
+    transform(markdown) {
+        return renderAssistantMarkdown(markdown);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AssistantMarkdownPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.5", ngImport: i0, type: AssistantMarkdownPipe, isStandalone: true, name: "assistantMarkdown" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AssistantMarkdownPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'assistantMarkdown' }]
+        }] });
+
+let nextComposerId = 0;
+/**
+ * Composer (ui-concept §5.3): multi-line, Enter sends, Shift+Enter is a newline,
+ * typing `/` at the start lists the slash commands (`ASSISTANT_SLASH_COMMANDS`, by default
+ * `/explain`, `/query`, `/summarise`, `/draft-pipeline`). The suggestion list follows the combobox
+ * pattern: focus stays in the textarea, ↑/↓ move, Enter/Tab pick, Esc closes the
+ * list (and only then lets Esc reach the panel).
+ *
+ * With {@link attachments} set (the transport accepts files, AB#5621) an "Attach file" button opens
+ * a file picker limited to `accept`; files are checked against `maxFiles` / `maxFileSizeBytes`,
+ * rejected ones are announced in an alert, attached ones are listed with a remove button, and a
+ * message may then be sent without text. Without it there is no attachment UI.
+ */
+class AssistantComposerComponent {
+    /** The composer text (two-way). */
+    text = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Whether Enter may send; false while the transport is not ready. */
+    canSend = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canSend" }] : /* istanbul ignore next */ []));
+    /** A turn is running: the send button becomes a stop button. */
+    sending = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sending" }] : /* istanbul ignore next */ []));
+    /** Accepted attachments; `null` (default) = no attachment UI. */
+    attachments = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
+    /** The attached files (two-way); sent with the next message by the host. */
+    files = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    send = output();
+    stop = output();
+    /** Translations; members left out fall back to {@link ASSISTANT_MESSAGES}, then English. */
+    messages = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    m = assistantMessages(this.messages);
+    textarea = viewChild.required('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textarea" }] : /* istanbul ignore next */ []));
+    fileInput = viewChild('fileInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
+    /** Messages about rejected files of the last pick. */
+    attachmentErrors = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "attachmentErrors" }] : /* istanbul ignore next */ []));
+    /** Something to send: text, or (with attachments) at least one file. */
+    hasContent = computed(() => this.text().trim().length > 0 || (!!this.attachments() && this.files().length > 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasContent" }] : /* istanbul ignore next */ []));
+    multiple = computed(() => (this.attachments()?.maxFiles ?? 1) > 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    xIcon = xIcon;
+    paperclipIcon = paperclipIcon;
+    commands = inject(ASSISTANT_SLASH_COMMANDS);
+    listId = `assistant-slash-${nextComposerId++}`;
+    activeIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    dismissedFor = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissedFor" }] : /* istanbul ignore next */ []));
+    /** Slash commands matching what was typed, while the text is a bare `/word`. */
+    suggestions = computed(() => {
+        const text = this.text();
+        if (!/^\/[\w-]*$/.test(text) || this.dismissedFor() === text) {
+            return [];
+        }
+        return this.commands.filter(command => command.command.startsWith(text.toLowerCase()));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
+    activeOptionId = computed(() => this.suggestions().length ? `${this.listId}-${Math.min(this.activeIndex(), this.suggestions().length - 1)}` : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []));
+    /** Focuses the textarea with the caret at the end (entry points prefill it). */
+    focus() {
+        const element = this.textarea().nativeElement;
+        element.focus();
+        element.setSelectionRange(element.value.length, element.value.length);
+    }
+    onInput(value) {
+        this.text.set(value);
+        this.activeIndex.set(0);
+    }
+    onKeydown(event) {
+        if (event.isComposing) {
+            return;
+        }
+        const suggestions = this.suggestions();
+        if (suggestions.length) {
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.activeIndex.update(index => (index + 1) % suggestions.length);
+                    return;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.activeIndex.update(index => (index - 1 + suggestions.length) % suggestions.length);
+                    return;
+                case 'Enter':
+                case 'Tab':
+                    if (!event.shiftKey) {
+                        event.preventDefault();
+                        this.pick(suggestions[Math.min(this.activeIndex(), suggestions.length - 1)]);
+                        return;
+                    }
+                    break;
+                case 'Escape':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.dismissedFor.set(this.text());
+                    return;
+            }
+        }
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            this.submit();
+        }
+    }
+    pick(command) {
+        this.text.set(`${command.command} `);
+        this.activeIndex.set(0);
+        this.focus();
+    }
+    submit() {
+        if (this.canSend() && this.hasContent()) {
+            this.attachmentErrors.set([]);
+            this.send.emit(this.text());
+        }
+    }
+    openFilePicker() {
+        this.fileInput()?.nativeElement.click();
+    }
+    onFilesPicked(input) {
+        const options = this.attachments();
+        const picked = Array.from(input.files ?? []);
+        // Reset so picking the same file again fires `change`.
+        input.value = '';
+        if (!options || !picked.length) {
+            return;
+        }
+        const selection = selectAssistantAttachments(this.files(), picked, options, this.m());
+        this.files.set(selection.files);
+        this.attachmentErrors.set(selection.errors);
+    }
+    removeFile(index) {
+        this.files.update(files => files.filter((_, i) => i !== index));
+        this.attachmentErrors.set([]);
+        this.focus();
+    }
+    format(message, values) {
+        return formatAssistantMessage(message, values);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AssistantComposerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AssistantComposerComponent, isStandalone: true, selector: "mm-assistant-composer", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, canSend: { classPropertyName: "canSend", publicName: "canSend", isSignal: true, isRequired: false, transformFunction: null }, sending: { classPropertyName: "sending", publicName: "sending", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange", files: "filesChange", send: "send", stop: "stop" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"composer\">\n  @if (suggestions().length) {\n    <ul class=\"suggestions\" role=\"listbox\" [id]=\"listId\" [attr.aria-label]=\"m().commandsLabel\">\n      @for (command of suggestions(); track command.command; let i = $index) {\n        <li role=\"option\" [id]=\"listId + '-' + i\" [attr.aria-selected]=\"activeOptionId() === listId + '-' + i\"\n            (mousedown)=\"$event.preventDefault()\" (click)=\"pick(command)\">\n          <span class=\"cmd\">{{ command.command }}</span>\n          <span class=\"cmd-desc\">{{ command.description }}</span>\n        </li>\n      }\n    </ul>\n  }\n  @if (attachments(); as options) {\n    @if (files().length) {\n      <ul class=\"files\" [attr.aria-label]=\"m().attachmentsLabel\">\n        @for (file of files(); track $index; let i = $index) {\n          <li class=\"file\">\n            <span class=\"file-name\" [title]=\"file.name\">{{ file.name }}</span>\n            <button type=\"button\" [attr.aria-label]=\"format(m().removeAttachment, { name: file.name })\" [title]=\"format(m().removeAttachment, { name: file.name })\" (click)=\"removeFile(i)\"><kendo-svg-icon [icon]=\"xIcon\" size=\"small\"></kendo-svg-icon></button>\n          </li>\n        }\n      </ul>\n    }\n    @if (attachmentErrors().length) {\n      <div class=\"file-errors\" role=\"alert\">\n        @for (error of attachmentErrors(); track $index) {\n          <p>{{ error }}</p>\n        }\n      </div>\n    }\n    <input #fileInput class=\"file-input\" type=\"file\" tabindex=\"-1\" aria-hidden=\"true\"\n           [attr.accept]=\"options.accept || null\" [multiple]=\"multiple()\"\n           (change)=\"onFilesPicked($any($event.target))\">\n  }\n  <div class=\"box\">\n    @if (attachments()) {\n      <button type=\"button\" class=\"attach\" [attr.aria-label]=\"m().attachFile\" [title]=\"m().attachFile\" (click)=\"openFilePicker()\">\n        <kendo-svg-icon [icon]=\"paperclipIcon\"></kendo-svg-icon>\n      </button>\n    }\n    <textarea #input\n              rows=\"2\"\n              [attr.aria-label]=\"m().composerLabel\"\n              [placeholder]=\"m().composerPlaceholder\"\n              aria-autocomplete=\"list\"\n              [attr.aria-controls]=\"suggestions().length ? listId : null\"\n              [attr.aria-expanded]=\"suggestions().length > 0\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              [value]=\"text()\"\n              (input)=\"onInput($any($event.target).value)\"\n              (keydown)=\"onKeydown($event)\"></textarea>\n    @if (sending()) {\n      <button type=\"button\" class=\"send\" (click)=\"stop.emit()\">{{ m().stop }}</button>\n    } @else {\n      <button type=\"button\" class=\"send\" [disabled]=\"!canSend() || !hasContent()\" (click)=\"submit()\">{{ m().send }}</button>\n    }\n  </div>\n  <div class=\"hint\" aria-hidden=\"true\">\n    @for (command of commands; track command.command) {\n      <kbd>{{ command.command }}</kbd>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.composer{position:relative;display:grid;gap:var(--theme-space-2);padding:10px 14px;border-top:1px solid var(--theme-border-subtle)}.box{display:flex;align-items:flex-end;gap:var(--theme-space-2);padding:6px 8px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-sm);background:var(--theme-bg-input)}.box:focus-within{box-shadow:var(--theme-focus-ring)}textarea{flex:1;min-width:0;min-height:40px;max-height:160px;border:0;outline:0;resize:vertical;background:none;color:var(--theme-text-primary);font:inherit}.send{flex:none;height:26px;padding:0 10px;border:1px solid var(--theme-accent);border-radius:var(--theme-radius-sm);background:var(--theme-accent);color:var(--theme-text-on-accent);font:inherit;font-size:.75rem;cursor:pointer}.send:disabled{border-color:var(--theme-border-default);background:none;color:var(--theme-text-muted);cursor:default}.send:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.hint{display:flex;flex-wrap:wrap;gap:var(--theme-space-2)}.hint kbd{padding:0 5px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-xs);color:var(--theme-text-muted);font-family:var(--theme-font-mono);font-size:.6875rem}.suggestions{position:absolute;right:14px;bottom:calc(100% - 4px);left:14px;z-index:1;margin:0;padding:4px;list-style:none;border-radius:var(--theme-radius-lg);background:var(--theme-bg-overlay);box-shadow:var(--theme-shadow-popup)}.suggestions li{display:flex;gap:var(--theme-space-3);padding:6px 8px;border-radius:var(--theme-radius-sm);cursor:pointer}.suggestions li[aria-selected=true]{background:var(--theme-accent-subtle)}.cmd{font-family:var(--theme-font-mono);color:var(--theme-text-primary)}.cmd-desc{color:var(--theme-text-secondary)}.attach{flex:none;display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:var(--theme-radius-sm);background:none;color:var(--theme-text-secondary);cursor:pointer}.attach:hover{background:var(--theme-bg-hover);color:var(--theme-text-primary)}.attach:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.file-input{display:none}.files{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}.file{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:22px;padding:0 4px 0 8px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-xs);font-size:.75rem;color:var(--theme-text-secondary)}.file button{display:inline-grid;flex:none;place-items:center;border:0;padding:0 2px;background:none;color:var(--theme-text-muted);cursor:pointer}.file button:hover{color:var(--theme-text-primary)}.file button:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.file-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-errors{color:var(--theme-status-error);font-size:.75rem}.file-errors p{margin:0}\n"], dependencies: [{ kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AssistantComposerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-assistant-composer', imports: [SVGIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"composer\">\n  @if (suggestions().length) {\n    <ul class=\"suggestions\" role=\"listbox\" [id]=\"listId\" [attr.aria-label]=\"m().commandsLabel\">\n      @for (command of suggestions(); track command.command; let i = $index) {\n        <li role=\"option\" [id]=\"listId + '-' + i\" [attr.aria-selected]=\"activeOptionId() === listId + '-' + i\"\n            (mousedown)=\"$event.preventDefault()\" (click)=\"pick(command)\">\n          <span class=\"cmd\">{{ command.command }}</span>\n          <span class=\"cmd-desc\">{{ command.description }}</span>\n        </li>\n      }\n    </ul>\n  }\n  @if (attachments(); as options) {\n    @if (files().length) {\n      <ul class=\"files\" [attr.aria-label]=\"m().attachmentsLabel\">\n        @for (file of files(); track $index; let i = $index) {\n          <li class=\"file\">\n            <span class=\"file-name\" [title]=\"file.name\">{{ file.name }}</span>\n            <button type=\"button\" [attr.aria-label]=\"format(m().removeAttachment, { name: file.name })\" [title]=\"format(m().removeAttachment, { name: file.name })\" (click)=\"removeFile(i)\"><kendo-svg-icon [icon]=\"xIcon\" size=\"small\"></kendo-svg-icon></button>\n          </li>\n        }\n      </ul>\n    }\n    @if (attachmentErrors().length) {\n      <div class=\"file-errors\" role=\"alert\">\n        @for (error of attachmentErrors(); track $index) {\n          <p>{{ error }}</p>\n        }\n      </div>\n    }\n    <input #fileInput class=\"file-input\" type=\"file\" tabindex=\"-1\" aria-hidden=\"true\"\n           [attr.accept]=\"options.accept || null\" [multiple]=\"multiple()\"\n           (change)=\"onFilesPicked($any($event.target))\">\n  }\n  <div class=\"box\">\n    @if (attachments()) {\n      <button type=\"button\" class=\"attach\" [attr.aria-label]=\"m().attachFile\" [title]=\"m().attachFile\" (click)=\"openFilePicker()\">\n        <kendo-svg-icon [icon]=\"paperclipIcon\"></kendo-svg-icon>\n      </button>\n    }\n    <textarea #input\n              rows=\"2\"\n              [attr.aria-label]=\"m().composerLabel\"\n              [placeholder]=\"m().composerPlaceholder\"\n              aria-autocomplete=\"list\"\n              [attr.aria-controls]=\"suggestions().length ? listId : null\"\n              [attr.aria-expanded]=\"suggestions().length > 0\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              [value]=\"text()\"\n              (input)=\"onInput($any($event.target).value)\"\n              (keydown)=\"onKeydown($event)\"></textarea>\n    @if (sending()) {\n      <button type=\"button\" class=\"send\" (click)=\"stop.emit()\">{{ m().stop }}</button>\n    } @else {\n      <button type=\"button\" class=\"send\" [disabled]=\"!canSend() || !hasContent()\" (click)=\"submit()\">{{ m().send }}</button>\n    }\n  </div>\n  <div class=\"hint\" aria-hidden=\"true\">\n    @for (command of commands; track command.command) {\n      <kbd>{{ command.command }}</kbd>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.composer{position:relative;display:grid;gap:var(--theme-space-2);padding:10px 14px;border-top:1px solid var(--theme-border-subtle)}.box{display:flex;align-items:flex-end;gap:var(--theme-space-2);padding:6px 8px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-sm);background:var(--theme-bg-input)}.box:focus-within{box-shadow:var(--theme-focus-ring)}textarea{flex:1;min-width:0;min-height:40px;max-height:160px;border:0;outline:0;resize:vertical;background:none;color:var(--theme-text-primary);font:inherit}.send{flex:none;height:26px;padding:0 10px;border:1px solid var(--theme-accent);border-radius:var(--theme-radius-sm);background:var(--theme-accent);color:var(--theme-text-on-accent);font:inherit;font-size:.75rem;cursor:pointer}.send:disabled{border-color:var(--theme-border-default);background:none;color:var(--theme-text-muted);cursor:default}.send:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.hint{display:flex;flex-wrap:wrap;gap:var(--theme-space-2)}.hint kbd{padding:0 5px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-xs);color:var(--theme-text-muted);font-family:var(--theme-font-mono);font-size:.6875rem}.suggestions{position:absolute;right:14px;bottom:calc(100% - 4px);left:14px;z-index:1;margin:0;padding:4px;list-style:none;border-radius:var(--theme-radius-lg);background:var(--theme-bg-overlay);box-shadow:var(--theme-shadow-popup)}.suggestions li{display:flex;gap:var(--theme-space-3);padding:6px 8px;border-radius:var(--theme-radius-sm);cursor:pointer}.suggestions li[aria-selected=true]{background:var(--theme-accent-subtle)}.cmd{font-family:var(--theme-font-mono);color:var(--theme-text-primary)}.cmd-desc{color:var(--theme-text-secondary)}.attach{flex:none;display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:var(--theme-radius-sm);background:none;color:var(--theme-text-secondary);cursor:pointer}.attach:hover{background:var(--theme-bg-hover);color:var(--theme-text-primary)}.attach:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.file-input{display:none}.files{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}.file{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:22px;padding:0 4px 0 8px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-xs);font-size:.75rem;color:var(--theme-text-secondary)}.file button{display:inline-grid;flex:none;place-items:center;border:0;padding:0 2px;background:none;color:var(--theme-text-muted);cursor:pointer}.file button:hover{color:var(--theme-text-primary)}.file button:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.file-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-errors{color:var(--theme-status-error);font-size:.75rem}.file-errors p{margin:0}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }, { type: i0.Output, args: ["textChange"] }], canSend: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSend", required: false }] }], sending: [{ type: i0.Input, args: [{ isSignal: true, alias: "sending", required: false }] }], attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], send: [{ type: i0.Output, args: ["send"] }], stop: [{ type: i0.Output, args: ["stop"] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], textarea: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+
+/**
+ * A write the assistant proposes (ui-concept §5.3/§5.6, wireframe screen 6):
+ * violet card with a parameter table and Run / Edit / Discard. The buttons only
+ * emit — the card never executes anything; the host forwards the decision.
+ */
+class AssistantProposalCardComponent {
+    proposal = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "proposal" }] : /* istanbul ignore next */ []));
+    /** Set once the person ran or discarded the proposal; disables the buttons. */
+    decision = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decision" }] : /* istanbul ignore next */ []));
+    run = output();
+    edit = output();
+    discard = output();
+    /** Translations; members left out fall back to {@link ASSISTANT_MESSAGES}, then English. */
+    messages = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    m = assistantMessages(this.messages);
+    cardLabel = computed(() => formatAssistantMessage(this.m().proposalLabel, { title: this.proposal().title }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cardLabel" }] : /* istanbul ignore next */ []));
+    decisionLabel = computed(() => {
+        const decision = this.decision();
+        return decision ? proposalDecisionLabel(decision, this.m()) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decisionLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AssistantProposalCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AssistantProposalCardComponent, isStandalone: true, selector: "mm-assistant-proposal-card", inputs: { proposal: { classPropertyName: "proposal", publicName: "proposal", isSignal: true, isRequired: true, transformFunction: null }, decision: { classPropertyName: "decision", publicName: "decision", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { run: "run", edit: "edit", discard: "discard" }, ngImport: i0, template: "<article class=\"proposal\" [class.settled]=\"decision() !== null\" [attr.aria-label]=\"cardLabel()\">\n  <header class=\"proposal-head\">\n    <span aria-hidden=\"true\">\u2726</span> {{ m().proposal }}@if (proposal().writes) { \u00B7 {{ m().writesToTenant }} }\n  </header>\n  <div class=\"proposal-body\">\n    <p class=\"proposal-title\">{{ proposal().title }}</p>\n    @if (proposal().description) {\n      <p class=\"proposal-description\">{{ proposal().description }}</p>\n    }\n    @if (proposal().parameters.length) {\n      <dl class=\"proposal-params\">\n        @for (param of proposal().parameters; track param.name) {\n          <dt>{{ param.name }}</dt>\n          <dd>{{ param.value }}</dd>\n        }\n      </dl>\n    }\n    <p class=\"proposal-meta\">{{ m().tool }} <span class=\"mono\">{{ proposal().toolName }}</span> \u00B7 {{ m().runsAfterConfirm }}</p>\n  </div>\n  <footer class=\"proposal-foot\">\n    @if (decisionLabel(); as label) {\n      <span class=\"proposal-decision\" role=\"status\">{{ label }}</span>\n    } @else {\n      <button type=\"button\" class=\"btn primary\" (click)=\"run.emit(proposal())\">{{ m().run }}</button>\n      <button type=\"button\" class=\"btn\" (click)=\"edit.emit(proposal())\">{{ m().edit }}</button>\n      <button type=\"button\" class=\"btn\" (click)=\"discard.emit(proposal())\">{{ m().discard }}</button>\n    }\n  </footer>\n</article>\n", styles: [":host{display:block}.proposal{overflow:hidden;border:1px solid color-mix(in srgb,var(--theme-ai) 55%,transparent);border-radius:var(--theme-radius-md);background:var(--theme-bg-surface)}.proposal.settled{border-color:var(--theme-border-default)}.proposal-head{padding:6px 10px;background:var(--theme-ai-subtle);color:var(--theme-ai);font-size:.75rem;font-weight:500}.proposal-body{display:grid;gap:var(--theme-space-1);padding:10px;font-size:.75rem}.proposal-body p{margin:0}.proposal-title{color:var(--theme-text-primary)}.proposal-description,.proposal-meta{color:var(--theme-text-secondary)}.proposal-params{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px var(--theme-space-3);margin:0}.proposal-params dt{color:var(--theme-text-secondary)}.proposal-params dd{margin:0;overflow-wrap:anywhere;font-family:var(--theme-font-mono)}.mono{font-family:var(--theme-font-mono);color:var(--theme-text-primary)}.proposal-foot{display:flex;align-items:center;gap:6px;padding:8px 10px;border-top:1px solid var(--theme-border-subtle)}.proposal-decision{color:var(--theme-text-secondary);font-size:.75rem}.btn{height:26px;padding:0 10px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-sm);background:var(--theme-bg-elevated);color:var(--theme-text-primary);font:inherit;font-size:.75rem;cursor:pointer}.btn:hover{border-color:var(--theme-border-strong)}.btn:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.btn.primary{border-color:var(--theme-accent);background:var(--theme-accent);color:var(--theme-text-on-accent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AssistantProposalCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-assistant-proposal-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"proposal\" [class.settled]=\"decision() !== null\" [attr.aria-label]=\"cardLabel()\">\n  <header class=\"proposal-head\">\n    <span aria-hidden=\"true\">\u2726</span> {{ m().proposal }}@if (proposal().writes) { \u00B7 {{ m().writesToTenant }} }\n  </header>\n  <div class=\"proposal-body\">\n    <p class=\"proposal-title\">{{ proposal().title }}</p>\n    @if (proposal().description) {\n      <p class=\"proposal-description\">{{ proposal().description }}</p>\n    }\n    @if (proposal().parameters.length) {\n      <dl class=\"proposal-params\">\n        @for (param of proposal().parameters; track param.name) {\n          <dt>{{ param.name }}</dt>\n          <dd>{{ param.value }}</dd>\n        }\n      </dl>\n    }\n    <p class=\"proposal-meta\">{{ m().tool }} <span class=\"mono\">{{ proposal().toolName }}</span> \u00B7 {{ m().runsAfterConfirm }}</p>\n  </div>\n  <footer class=\"proposal-foot\">\n    @if (decisionLabel(); as label) {\n      <span class=\"proposal-decision\" role=\"status\">{{ label }}</span>\n    } @else {\n      <button type=\"button\" class=\"btn primary\" (click)=\"run.emit(proposal())\">{{ m().run }}</button>\n      <button type=\"button\" class=\"btn\" (click)=\"edit.emit(proposal())\">{{ m().edit }}</button>\n      <button type=\"button\" class=\"btn\" (click)=\"discard.emit(proposal())\">{{ m().discard }}</button>\n    }\n  </footer>\n</article>\n", styles: [":host{display:block}.proposal{overflow:hidden;border:1px solid color-mix(in srgb,var(--theme-ai) 55%,transparent);border-radius:var(--theme-radius-md);background:var(--theme-bg-surface)}.proposal.settled{border-color:var(--theme-border-default)}.proposal-head{padding:6px 10px;background:var(--theme-ai-subtle);color:var(--theme-ai);font-size:.75rem;font-weight:500}.proposal-body{display:grid;gap:var(--theme-space-1);padding:10px;font-size:.75rem}.proposal-body p{margin:0}.proposal-title{color:var(--theme-text-primary)}.proposal-description,.proposal-meta{color:var(--theme-text-secondary)}.proposal-params{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px var(--theme-space-3);margin:0}.proposal-params dt{color:var(--theme-text-secondary)}.proposal-params dd{margin:0;overflow-wrap:anywhere;font-family:var(--theme-font-mono)}.mono{font-family:var(--theme-font-mono);color:var(--theme-text-primary)}.proposal-foot{display:flex;align-items:center;gap:6px;padding:8px 10px;border-top:1px solid var(--theme-border-subtle)}.proposal-decision{color:var(--theme-text-secondary);font-size:.75rem}.btn{height:26px;padding:0 10px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-sm);background:var(--theme-bg-elevated);color:var(--theme-text-primary);font:inherit;font-size:.75rem;cursor:pointer}.btn:hover{border-color:var(--theme-border-strong)}.btn:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.btn.primary{border-color:var(--theme-accent);background:var(--theme-accent);color:var(--theme-text-on-accent)}\n"] }]
+        }], propDecorators: { proposal: [{ type: i0.Input, args: [{ isSignal: true, alias: "proposal", required: true }] }], decision: [{ type: i0.Input, args: [{ isSignal: true, alias: "decision", required: false }] }], run: [{ type: i0.Output, args: ["run"] }], edit: [{ type: i0.Output, args: ["edit"] }], discard: [{ type: i0.Output, args: ["discard"] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }] } });
+
+/**
+ * The conversation (wireframe screen 6): user turns, assistant turns (markdown
+ * via `renderAssistantMarkdown`: no images, safe links only; violet edge), tool-call rows and proposal cards. Tool calls
+ * render with the `ASSISTANT_TOOL_CALL_COMPONENT` (an OctoMesh host passes `mm-ai-tool-call` from
+ * `@meshmakers/octo-ai-console`, ui-concept §5.1 "do not rebuild"); proposals are emitted, never executed.
+ *
+ * A user turn sent through a slash command's `expand` (AB#5621) shows the expanded prompt with the
+ * typed command (`slashCommand`) as a small label above it.
+ *
+ * While an assistant turn streams it shows the OctoBot `thinking` with "Thinking…" (AB#3444);
+ * once the reply is complete the newest assistant turn keeps the OctoBot as a still frame. The
+ * figure is decorative — the text carries the meaning — and appears at most once in the thread.
+ *
+ * The list is an `aria-live` log; it is `aria-busy` while a turn streams so a
+ * screen reader announces finished messages instead of every token. Nothing
+ * inside it carries its own live role, so each addition is announced once.
+ */
+class AssistantThreadComponent {
+    host = inject(ElementRef);
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    proposalDecision = output();
+    /** Translations; members left out fall back to {@link ASSISTANT_MESSAGES}, then English. */
+    messages = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    m = assistantMessages(this.messages);
+    toolCallComponent = inject(ASSISTANT_TOOL_CALL_COMPONENT);
+    /** Id of the newest assistant turn: the only one that shows the resting OctoBot. */
+    lastAssistantId = computed(() => {
+        const items = this.items();
+        for (let i = items.length - 1; i >= 0; i--) {
+            if (items[i].kind === 'assistant') {
+                return items[i].id;
+            }
+        }
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastAssistantId" }] : /* istanbul ignore next */ []));
+    streaming = computed(() => this.items().some(item => item.kind === 'assistant' && item.streaming), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "streaming" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Keep the newest turn in view.
+        effect(() => {
+            this.items();
+            queueMicrotask(() => {
+                const element = this.host.nativeElement;
+                element.scrollTop = element.scrollHeight;
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AssistantThreadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AssistantThreadComponent, isStandalone: true, selector: "mm-assistant-thread", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { proposalDecision: "proposalDecision" }, ngImport: i0, template: "<ol class=\"thread\" role=\"log\" aria-live=\"polite\" aria-relevant=\"additions text\" [attr.aria-label]=\"m().conversationLabel\"\n    [attr.aria-busy]=\"streaming()\">\n  @for (item of items(); track item.id) {\n    @switch (item.kind) {\n      @case ('user') {\n        <li class=\"msg user\"><span class=\"sr-only\">{{ m().youPrefix }}</span>@if (item.slashCommand) {<span class=\"slash-command\"><span class=\"sr-only\">{{ m().slashCommandPrefix }}</span>{{ item.slashCommand }}</span>}{{ item.text }}@if (item.attachments?.length) {<ul class=\"attachments\" [attr.aria-label]=\"m().attachmentsLabel\">@for (file of item.attachments; track $index) {<li class=\"attachment\">{{ file.name }}</li>}</ul>}</li>\n      }\n      @case ('assistant') {\n        <li class=\"msg bot\">\n          <span class=\"sr-only\">{{ m().assistantPrefix }}</span>\n          <div class=\"md\" [innerHTML]=\"item.markdown | assistantMarkdown\"></div>\n          @if (item.streaming) {\n            <span class=\"streaming\" data-testid=\"assistant-thinking\">\n              <mm-octobot animation=\"thinking\" size=\"sm\" />\n              <span class=\"streaming-text\">{{ m().thinking }}</span>\n            </span>\n          } @else if (item.id === lastAssistantId()) {\n            <mm-octobot class=\"settled\" animation=\"thinking\" size=\"sm\" still data-testid=\"assistant-settled\" />\n          }\n        </li>\n      }\n      @case ('tool-call') {\n        <li class=\"msg tool\"><ng-container *ngComponentOutlet=\"toolCallComponent; inputs: { call: item.call }\"></ng-container></li>\n      }\n      @case ('proposal') {\n        <li class=\"msg\">\n          <mm-assistant-proposal-card\n            [messages]=\"messages()\"\n            [proposal]=\"item.proposal\"\n            [decision]=\"item.decision\"\n            (run)=\"proposalDecision.emit({ kind: 'run', proposal: $event })\"\n            (edit)=\"proposalDecision.emit({ kind: 'edit', proposal: $event })\"\n            (discard)=\"proposalDecision.emit({ kind: 'discard', proposal: $event })\">\n          </mm-assistant-proposal-card>\n        </li>\n      }\n      @case ('error') {\n        <li class=\"msg error\"><span class=\"sr-only\">{{ m().errorPrefix }}</span>{{ item.text }}</li>\n      }\n    }\n  }\n</ol>\n", styles: [":host{display:block;overflow:auto}.thread{display:grid;align-content:start;gap:var(--theme-space-3);margin:0;padding:14px;list-style:none}.msg{display:grid;gap:6px;min-width:0;overflow-wrap:anywhere}.user{justify-self:end;max-width:85%;padding:8px 12px;border-radius:var(--theme-radius-md);background:var(--theme-bg-overlay);white-space:pre-wrap}.slash-command{color:var(--theme-text-muted);font-family:var(--theme-font-mono, monospace);font-size:.71875rem;overflow-wrap:anywhere}.attachments{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 0;padding:0;list-style:none;white-space:normal}.attachment{padding:0 6px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-xs);color:var(--theme-text-secondary);font-size:.75rem}.bot{padding-left:12px;border-left:2px solid var(--theme-ai)}.bot ::ng-deep p{margin:0 0 var(--theme-space-2)}.bot ::ng-deep a{color:var(--theme-text-accent)}.streaming{display:inline-flex;align-items:center;gap:var(--theme-space-2);color:var(--theme-text-secondary);font-size:.8125rem}.settled{opacity:.85}.error{color:var(--theme-status-error)}mm-ai-tool-call{--mm-ai-tool-bg: var(--theme-bg-app);--mm-ai-tool-border: var(--theme-border-default);--mm-ai-tool-text: var(--theme-text-primary);--mm-ai-tool-muted: var(--theme-text-secondary);--mm-ai-tool-success: var(--theme-status-success);--mm-ai-tool-failed: var(--theme-status-error);--mm-ai-tool-rejected: var(--theme-status-warning);--mm-ai-tool-pending: var(--theme-status-neutral);--mm-ai-tool-code-bg: var(--theme-bg-sunken)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AssistantProposalCardComponent, selector: "mm-assistant-proposal-card", inputs: ["proposal", "decision", "messages"], outputs: ["run", "edit", "discard"] }, { kind: "component", type: OctoBotComponent, selector: "mm-octobot", inputs: ["animation", "size", "label", "loading", "still", "playOnce"] }, { kind: "pipe", type: AssistantMarkdownPipe, name: "assistantMarkdown" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AssistantThreadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-assistant-thread', imports: [NgComponentOutlet, AssistantMarkdownPipe, AssistantProposalCardComponent, OctoBotComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ol class=\"thread\" role=\"log\" aria-live=\"polite\" aria-relevant=\"additions text\" [attr.aria-label]=\"m().conversationLabel\"\n    [attr.aria-busy]=\"streaming()\">\n  @for (item of items(); track item.id) {\n    @switch (item.kind) {\n      @case ('user') {\n        <li class=\"msg user\"><span class=\"sr-only\">{{ m().youPrefix }}</span>@if (item.slashCommand) {<span class=\"slash-command\"><span class=\"sr-only\">{{ m().slashCommandPrefix }}</span>{{ item.slashCommand }}</span>}{{ item.text }}@if (item.attachments?.length) {<ul class=\"attachments\" [attr.aria-label]=\"m().attachmentsLabel\">@for (file of item.attachments; track $index) {<li class=\"attachment\">{{ file.name }}</li>}</ul>}</li>\n      }\n      @case ('assistant') {\n        <li class=\"msg bot\">\n          <span class=\"sr-only\">{{ m().assistantPrefix }}</span>\n          <div class=\"md\" [innerHTML]=\"item.markdown | assistantMarkdown\"></div>\n          @if (item.streaming) {\n            <span class=\"streaming\" data-testid=\"assistant-thinking\">\n              <mm-octobot animation=\"thinking\" size=\"sm\" />\n              <span class=\"streaming-text\">{{ m().thinking }}</span>\n            </span>\n          } @else if (item.id === lastAssistantId()) {\n            <mm-octobot class=\"settled\" animation=\"thinking\" size=\"sm\" still data-testid=\"assistant-settled\" />\n          }\n        </li>\n      }\n      @case ('tool-call') {\n        <li class=\"msg tool\"><ng-container *ngComponentOutlet=\"toolCallComponent; inputs: { call: item.call }\"></ng-container></li>\n      }\n      @case ('proposal') {\n        <li class=\"msg\">\n          <mm-assistant-proposal-card\n            [messages]=\"messages()\"\n            [proposal]=\"item.proposal\"\n            [decision]=\"item.decision\"\n            (run)=\"proposalDecision.emit({ kind: 'run', proposal: $event })\"\n            (edit)=\"proposalDecision.emit({ kind: 'edit', proposal: $event })\"\n            (discard)=\"proposalDecision.emit({ kind: 'discard', proposal: $event })\">\n          </mm-assistant-proposal-card>\n        </li>\n      }\n      @case ('error') {\n        <li class=\"msg error\"><span class=\"sr-only\">{{ m().errorPrefix }}</span>{{ item.text }}</li>\n      }\n    }\n  }\n</ol>\n", styles: [":host{display:block;overflow:auto}.thread{display:grid;align-content:start;gap:var(--theme-space-3);margin:0;padding:14px;list-style:none}.msg{display:grid;gap:6px;min-width:0;overflow-wrap:anywhere}.user{justify-self:end;max-width:85%;padding:8px 12px;border-radius:var(--theme-radius-md);background:var(--theme-bg-overlay);white-space:pre-wrap}.slash-command{color:var(--theme-text-muted);font-family:var(--theme-font-mono, monospace);font-size:.71875rem;overflow-wrap:anywhere}.attachments{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 0;padding:0;list-style:none;white-space:normal}.attachment{padding:0 6px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-xs);color:var(--theme-text-secondary);font-size:.75rem}.bot{padding-left:12px;border-left:2px solid var(--theme-ai)}.bot ::ng-deep p{margin:0 0 var(--theme-space-2)}.bot ::ng-deep a{color:var(--theme-text-accent)}.streaming{display:inline-flex;align-items:center;gap:var(--theme-space-2);color:var(--theme-text-secondary);font-size:.8125rem}.settled{opacity:.85}.error{color:var(--theme-status-error)}mm-ai-tool-call{--mm-ai-tool-bg: var(--theme-bg-app);--mm-ai-tool-border: var(--theme-border-default);--mm-ai-tool-text: var(--theme-text-primary);--mm-ai-tool-muted: var(--theme-text-secondary);--mm-ai-tool-success: var(--theme-status-success);--mm-ai-tool-failed: var(--theme-status-error);--mm-ai-tool-rejected: var(--theme-status-warning);--mm-ai-tool-pending: var(--theme-status-neutral);--mm-ai-tool-code-bg: var(--theme-bg-sunken)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], proposalDecision: [{ type: i0.Output, args: ["proposalDecision"] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }] } });
+
+/** Width of the panel before anyone resized it (CSS: 400 px, 340 px ≤ 1180 px), used until measured. */
+const FALLBACK_WIDTH = 400;
+/** Window width the handle always leaves to the content. */
+const MIN_CONTENT_WIDTH = 240;
+/** Keyboard step of the resize handle in px (Shift: four times). */
+const RESIZE_STEP = 16;
+/** The persisted width, or null when absent, invalid or storage is unavailable. */
+function readStoredWidth(key) {
+    if (!key) {
+        return null;
+    }
+    try {
+        const raw = globalThis.localStorage?.getItem(key);
+        const width = raw === null || raw === undefined ? NaN : Number(raw);
+        return Number.isFinite(width) && width > 0 ? width : null;
+    }
+    catch {
+        return null;
+    }
+}
+/** Best effort: storage may be missing, full or blocked. */
+function writeStoredWidth(key, width) {
+    if (!key) {
+        return;
+    }
+    try {
+        if (width === null) {
+            globalThis.localStorage?.removeItem(key);
+        }
+        else {
+            globalThis.localStorage?.setItem(key, String(Math.round(width)));
+        }
+    }
+    catch {
+        // Persistence is best effort.
+    }
+}
+/**
+ * Right-side assistant panel (ui-concept §5.3, wireframe screen 6): header,
+ * removable context chips, thread, composer. Non-modal: the page stays usable.
+ * Opening focuses the composer, Esc closes and focus returns to where it was
+ * (AssistantService). Below 640 px it covers the screen under the top bar and
+ * becomes a modal dialog (`aria-modal`, Tab trapped) so the page behind is out
+ * of reach. Removing a context chip moves focus to the next chip, else the composer.
+ *
+ * Host it only while {@link AssistantService.enabled} is set and the panel is open
+ * (`@if (assistant.enabled && assistant.isOpen()) { <mm-assistant-panel /> }`); the thread
+ * lives in the service, so closing and navigating keep it.
+ *
+ * Optional transport capabilities (AB#5621) add UI only when the transport has them:
+ * - **sessions** — "New chat" and "Chats" in the header; the chat list replaces the thread
+ *   (open a chat, delete with an inline confirmation; Esc returns to the chat);
+ * - **starter questions** — shown as buttons on an empty thread; clicking one sends it;
+ * - **attachments** — the composer's "Attach file" button (see `mm-assistant-composer`).
+ *
+ * Header actions ("New chat", "Chats", close) are icon buttons with tooltip and `aria-label` from
+ * the messages, so they never wrap in a narrow panel (AB#5621).
+ *
+ * **Layout (AB#5621)** — inputs, else {@link ASSISTANT_PANEL_OPTIONS}, else the defaults:
+ * - `resizable` (default `false`, so no handle and no extra tab stop; opt in per input or token):
+ *   a handle on the left edge (`role="separator"`) changes the width by dragging or with ←/→
+ *   (Shift: bigger steps), Home/End (min/max); a double click forgets the chosen width. The width
+ *   stays within `minWidth`..`maxWidth` (320..720 px, and at least 240 px of the window stay free)
+ *   and is kept in `localStorage` under `storageKey` (`mm-assistant-panel-width`; `null` = not
+ *   kept). Without `resizable`, or until someone resizes it, the panel keeps its CSS width (400 px,
+ *   340 px ≤ 1180 px). Unavailable storage only means the width is not kept.
+ * - `mode`: `docked` (default, pushes the content) or `overlay` (floats over it, `position: fixed`
+ *   at the right edge below `--mm-assistant-overlay-top`, default 48 px; stacking via
+ *   `--mm-assistant-overlay-z-index`, default 20).
+ * On phones neither applies: the panel is the full-screen dialog.
+ */
+class AssistantPanelComponent {
+    assistant = inject(AssistantService);
+    injector = inject(Injector);
+    host = inject(ElementRef);
+    composer = viewChild(AssistantComposerComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "composer" }] : /* istanbul ignore next */ []));
+    /** Translations; members left out fall back to {@link ASSISTANT_MESSAGES}, then English. */
+    messages = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    m = assistantMessages(this.messages);
+    /** `docked` pushes the content, `overlay` floats over it (default: options token, else `docked`). */
+    mode = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Shows the resize handle (default: options token, else `false`). */
+    resizable = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
+    /** Smallest width in px of the resize handle (default: options token, else 320). */
+    minWidth = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    /** Largest width in px of the resize handle (default: options token, else 720). */
+    maxWidth = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * `localStorage` key of the chosen width; `null` = not kept. Left out (`undefined`): options
+     * token, else `mm-assistant-panel-width`.
+     */
+    storageKey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "storageKey" }] : /* istanbul ignore next */ []));
+    xIcon = xIcon;
+    plusIcon = plusIcon;
+    historyIcon = clockArrowRotateIcon;
+    trashIcon = trashIcon;
+    options = inject(ASSISTANT_PANEL_OPTIONS, { optional: true });
+    effectiveMode = computed(() => this.mode() ?? this.options?.mode ?? 'docked', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveMode" }] : /* istanbul ignore next */ []));
+    overlay = computed(() => this.effectiveMode() === 'overlay' && !this.isPhone(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
+    effectiveStorageKey = computed(() => {
+        const key = this.storageKey();
+        if (key !== undefined) {
+            return key;
+        }
+        return this.options?.storageKey !== undefined ? this.options.storageKey : DEFAULT_ASSISTANT_PANEL_STORAGE_KEY;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveStorageKey" }] : /* istanbul ignore next */ []));
+    effectiveMin = computed(() => Math.max(0, Math.round(this.minWidth() ?? this.options?.minWidth ?? DEFAULT_ASSISTANT_PANEL_MIN_WIDTH)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveMin" }] : /* istanbul ignore next */ []));
+    effectiveMax = computed(() => {
+        const configured = this.maxWidth() ?? this.options?.maxWidth ?? DEFAULT_ASSISTANT_PANEL_MAX_WIDTH;
+        const viewport = typeof window !== 'undefined' && window.innerWidth > 0 ? window.innerWidth - MIN_CONTENT_WIDTH : Infinity;
+        return Math.round(Math.max(this.effectiveMin(), Math.min(configured, viewport)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveMax" }] : /* istanbul ignore next */ []));
+    /** The handle is shown (never on phones). */
+    canResize = computed(() => (this.resizable() ?? this.options?.resizable ?? false) && !this.isPhone(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canResize" }] : /* istanbul ignore next */ []));
+    /** Width chosen in this panel instance; `undefined` = not touched yet (stored width applies). */
+    chosenWidth = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chosenWidth" }] : /* istanbul ignore next */ []));
+    storedWidth = computed(() => readStoredWidth(this.effectiveStorageKey()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "storedWidth" }] : /* istanbul ignore next */ []));
+    /** The inline width in px, or null for the CSS default. */
+    appliedWidth = computed(() => {
+        const chosen = this.chosenWidth();
+        const width = chosen === undefined ? this.storedWidth() : chosen;
+        return width === null || !this.canResize() ? null : this.clampWidth(width);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appliedWidth" }] : /* istanbul ignore next */ []));
+    /** CSS width as rendered, for `aria-valuenow` before the first resize. */
+    measuredWidth = signal(FALLBACK_WIDTH, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measuredWidth" }] : /* istanbul ignore next */ []));
+    currentWidth = computed(() => this.appliedWidth() ?? this.clampWidth(this.measuredWidth()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentWidth" }] : /* istanbul ignore next */ []));
+    resizing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []));
+    stopDrag = null;
+    /** Phone layout (≤ 640 px, the shell's breakpoint): the panel is a modal dialog. */
+    isPhone = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPhone" }] : /* istanbul ignore next */ []));
+    connected = computed(() => this.assistant.transportStatus() !== 'unavailable', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connected" }] : /* istanbul ignore next */ []));
+    /** `chat` = thread + composer; `sessions` = the saved chats list (session-capable transports only). */
+    view = signal('chat', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    /** Session whose deletion waits for confirmation. */
+    confirmingDelete = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "confirmingDelete" }] : /* istanbul ignore next */ []));
+    /** Session being opened or deleted (its buttons are disabled meanwhile). */
+    busySession = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "busySession" }] : /* istanbul ignore next */ []));
+    /**
+     * Greeting of an empty chat (AB#3444): the OctoBot waves once, then rests on its still frame.
+     * Not shown while the assistant is unavailable (the panel says so instead).
+     */
+    showGreeting = computed(() => this.view() === 'chat' && this.assistant.thread().length === 0 && this.connected()
+        && this.assistant.transportStatus() !== 'error', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showGreeting" }] : /* istanbul ignore next */ []));
+    /** Starter questions on an empty thread (transports with `starterQuestions` only). */
+    showStarters = computed(() => this.view() === 'chat' && this.assistant.thread().length === 0 && this.assistant.starterQuestions().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showStarters" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const query = typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+            ? window.matchMedia('(max-width: 640px)')
+            : null;
+        if (query) {
+            this.isPhone.set(query.matches);
+            const listener = (event) => this.isPhone.set(event.matches);
+            query.addEventListener('change', listener);
+            inject(DestroyRef).onDestroy(() => query.removeEventListener('change', listener));
+        }
+        this.assistant.loadStarterQuestions();
+        afterNextRender(() => this.measure());
+        inject(DestroyRef).onDestroy(() => this.stopDrag?.());
+        // Every entry point bumps focusRequest; the composer gets focus once rendered.
+        effect(() => {
+            this.assistant.focusRequest();
+            untracked(() => {
+                this.view.set('chat');
+                this.focusComposer();
+            });
+        });
+    }
+    /** Pointer drag on the handle: the panel sits on the right, so moving left widens it. */
+    startResize(event) {
+        if (event.button !== 0 || !this.canResize()) {
+            return;
+        }
+        event.preventDefault();
+        this.stopDrag?.();
+        const startX = event.clientX;
+        const startWidth = this.currentWidth();
+        const move = (moveEvent) => this.setWidth(startWidth + startX - moveEvent.clientX, false);
+        const end = () => {
+            this.stopDrag?.();
+            const width = this.chosenWidth();
+            if (width !== undefined) {
+                writeStoredWidth(this.effectiveStorageKey(), width);
+            }
+        };
+        document.addEventListener('pointermove', move);
+        document.addEventListener('pointerup', end);
+        document.addEventListener('pointercancel', end);
+        this.resizing.set(true);
+        this.stopDrag = () => {
+            document.removeEventListener('pointermove', move);
+            document.removeEventListener('pointerup', end);
+            document.removeEventListener('pointercancel', end);
+            this.resizing.set(false);
+            this.stopDrag = null;
+        };
+    }
+    /** ←/→ resize (Shift: ×4), Home/End jump to min/max; the width is kept right away. */
+    onResizeKey(event) {
+        const step = event.shiftKey ? RESIZE_STEP * 4 : RESIZE_STEP;
+        let width;
+        switch (event.key) {
+            case 'ArrowLeft':
+                width = this.currentWidth() + step;
+                break;
+            case 'ArrowRight':
+                width = this.currentWidth() - step;
+                break;
+            case 'Home':
+                width = this.effectiveMin();
+                break;
+            case 'End':
+                width = this.effectiveMax();
+                break;
+            default: return;
+        }
+        event.preventDefault();
+        this.setWidth(width, true);
+    }
+    /** Double click on the handle: back to the default width, forgetting the kept one. */
+    resetWidth() {
+        this.chosenWidth.set(null);
+        writeStoredWidth(this.effectiveStorageKey(), null);
+        afterNextRender(() => this.measure(), { injector: this.injector });
+    }
+    setWidth(width, persist) {
+        const clamped = this.clampWidth(width);
+        this.chosenWidth.set(clamped);
+        if (persist) {
+            writeStoredWidth(this.effectiveStorageKey(), clamped);
+        }
+    }
+    clampWidth(width) {
+        return Math.round(Math.min(this.effectiveMax(), Math.max(this.effectiveMin(), width)));
+    }
+    measure() {
+        const width = this.host.nativeElement.getBoundingClientRect().width;
+        if (width > 0) {
+            this.measuredWidth.set(width);
+        }
+    }
+    onEscape(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
+        event.preventDefault();
+        if (this.confirmingDelete()) {
+            this.cancelDelete();
+        }
+        else if (this.view() === 'sessions') {
+            this.backToChat();
+        }
+        else {
+            this.assistant.close();
+        }
+    }
+    /** Shows the saved chats and reloads them. */
+    showSessions() {
+        this.confirmingDelete.set(null);
+        this.view.set('sessions');
+        void this.assistant.refreshSessions();
+        this.focusSessionList();
+    }
+    backToChat() {
+        this.confirmingDelete.set(null);
+        this.view.set('chat');
+        this.focusComposer();
+    }
+    newChat() {
+        this.assistant.newThread();
+        this.backToChat();
+    }
+    async openSession(session) {
+        this.busySession.set(session.id);
+        try {
+            await this.assistant.openSession(session.id);
+        }
+        finally {
+            this.busySession.set(null);
+        }
+        this.backToChat();
+    }
+    askDelete(session) {
+        this.confirmingDelete.set(session.id);
+        afterNextRender(() => this.host.nativeElement.querySelector('.session-confirm .confirm-delete')?.focus(), { injector: this.injector });
+    }
+    cancelDelete() {
+        const id = this.confirmingDelete();
+        this.confirmingDelete.set(null);
+        afterNextRender(() => Array.from(this.host.nativeElement.querySelectorAll('.session-row'))
+            .find(row => row.dataset['sessionId'] === id)?.querySelector('.session-delete')?.focus(), { injector: this.injector });
+    }
+    async confirmDelete(session) {
+        this.busySession.set(session.id);
+        let deleted;
+        try {
+            deleted = await this.assistant.deleteSession(session.id);
+        }
+        finally {
+            this.busySession.set(null);
+            this.confirmingDelete.set(null);
+        }
+        if (deleted) {
+            await this.assistant.refreshSessions();
+            this.focusSessionList();
+        }
+        else {
+            // The error row lives in the thread.
+            this.backToChat();
+        }
+    }
+    sendStarter(question) {
+        this.assistant.send(question);
+    }
+    /** Locale date + time of a session, or '' when absent or unparsable. */
+    sessionDate(session) {
+        if (!session.createdAt) {
+            return '';
+        }
+        const date = new Date(session.createdAt);
+        return Number.isNaN(date.getTime()) ? '' : date.toLocaleString(undefined, { dateStyle: 'short', timeStyle: 'short' });
+    }
+    /** First chat of the list, else the back button. */
+    focusSessionList() {
+        afterNextRender(() => {
+            const root = this.host.nativeElement;
+            (root.querySelector('.session-open') ?? root.querySelector('.back'))?.focus();
+        }, { injector: this.injector });
+    }
+    focusComposer() {
+        afterNextRender(() => this.composer()?.focus(), { injector: this.injector });
+    }
+    /** Phone dialog: Tab and Shift+Tab cycle inside the panel. */
+    onTab(event) {
+        if (!this.isPhone() || event.defaultPrevented) {
+            return;
+        }
+        const focusable = Array.from(this.host.nativeElement.querySelectorAll('button:not([disabled]), textarea:not([disabled]), input:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])'));
+        if (!focusable.length) {
+            return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = document.activeElement;
+        const backwards = event.shiftKey;
+        if (backwards && (active === first || !this.host.nativeElement.contains(active))) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!backwards && (active === last || !this.host.nativeElement.contains(active))) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    /** Drops a chip and keeps keyboard users in the row: next chip, else the composer. */
+    removeChip(id, index) {
+        this.assistant.removeChip(id);
+        afterNextRender(() => {
+            const buttons = this.host.nativeElement.querySelectorAll('.ctx-chip button');
+            const next = buttons[Math.min(index, buttons.length - 1)];
+            if (next) {
+                next.focus();
+            }
+            else {
+                this.composer()?.focus();
+            }
+        }, { injector: this.injector });
+    }
+    format(message, values) {
+        return formatAssistantMessage(message, values);
+    }
+    onDecision(decision) {
+        this.assistant.decideProposal(decision.kind, decision.proposal);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AssistantPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AssistantPanelComponent, isStandalone: true, selector: "mm-assistant-panel", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-labelledby": "assistant-panel-title", "id": "assistant-panel" }, listeners: { "keydown.escape": "onEscape($event)", "keydown.tab": "onTab($event)", "keydown.shift.tab": "onTab($event)" }, properties: { "attr.role": "isPhone() ? \"dialog\" : \"complementary\"", "attr.aria-modal": "isPhone() ? \"true\" : null", "class.mm-assistant-overlay": "overlay()", "class.mm-assistant-resizing": "resizing()", "attr.data-mode": "effectiveMode()", "style.width.px": "isPhone() ? null : appliedWidth()" } }, viewQueries: [{ propertyName: "composer", first: true, predicate: AssistantComposerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (canResize()) {\n  <div class=\"resize-handle\" role=\"separator\" tabindex=\"0\" aria-orientation=\"vertical\" aria-controls=\"assistant-panel\"\n       [attr.aria-label]=\"m().resizePanel\" [title]=\"m().resizePanel\"\n       [attr.aria-valuenow]=\"currentWidth()\" [attr.aria-valuemin]=\"effectiveMin()\" [attr.aria-valuemax]=\"effectiveMax()\"\n       (pointerdown)=\"startResize($event)\" (keydown)=\"onResizeKey($event)\" (dblclick)=\"resetWidth()\"></div>\n}\n\n<header class=\"head\">\n  <span class=\"sparkle\" aria-hidden=\"true\">\u2726</span>\n  <h2 class=\"title\" id=\"assistant-panel-title\">{{ m().title }}</h2>\n  @if (connected()) {\n    <span class=\"chip-neutral\" [title]=\"m().readsWithYourPermissions\">{{ m().readsWithYourPermissions }}</span>\n  }\n  @if (assistant.sessionsSupported) {\n    <div class=\"head-actions\">\n      <button type=\"button\" class=\"icon-btn new-chat\" [attr.aria-label]=\"m().newChat\" [title]=\"m().newChat\" (click)=\"newChat()\">\n        <kendo-svg-icon [icon]=\"plusIcon\"></kendo-svg-icon>\n      </button>\n      <button type=\"button\" class=\"icon-btn sessions-toggle\" aria-controls=\"assistant-sessions\"\n              [attr.aria-label]=\"m().sessions\" [title]=\"m().sessions\"\n              [attr.aria-expanded]=\"view() === 'sessions'\"\n              (click)=\"view() === 'sessions' ? backToChat() : showSessions()\">\n        <kendo-svg-icon [icon]=\"historyIcon\"></kendo-svg-icon>\n      </button>\n    </div>\n  }\n  <button type=\"button\" class=\"icon-btn close\" [attr.aria-label]=\"m().closeAssistant\" [title]=\"m().closeAssistant\" (click)=\"assistant.close()\">\n    <kendo-svg-icon [icon]=\"xIcon\"></kendo-svg-icon>\n  </button>\n</header>\n\n@if (assistant.contextChips().length) {\n  <ul class=\"ctx\" [attr.aria-label]=\"m().contextLabel\">\n    @for (chip of assistant.contextChips(); track chip.id; let i = $index) {\n      <li class=\"ctx-chip\" [attr.data-kind]=\"chip.kind\" [title]=\"chip.value\">\n        <span class=\"ctx-label\">{{ chip.label }}</span>\n        <button type=\"button\" [attr.aria-label]=\"format(m().removeContext, { label: chip.label })\" [title]=\"format(m().removeContext, { label: chip.label })\" (click)=\"removeChip(chip.id, i)\"><kendo-svg-icon [icon]=\"xIcon\" size=\"small\"></kendo-svg-icon></button>\n      </li>\n    }\n  </ul>\n}\n\n@if (view() === 'sessions') {\n  <section class=\"sessions\" id=\"assistant-sessions\" [attr.aria-label]=\"m().sessionsLabel\">\n    <button type=\"button\" class=\"text-btn back\" (click)=\"backToChat()\">\u2190 {{ m().backToChat }}</button>\n    <ul class=\"session-list\">\n      @for (session of assistant.sessions(); track session.id) {\n        <li class=\"session-row\" [attr.data-session-id]=\"session.id\"\n            [class.active]=\"session.id === assistant.activeSessionId()\">\n          @if (confirmingDelete() === session.id) {\n            <div class=\"session-confirm\" role=\"group\" [attr.aria-label]=\"format(m().deleteSessionConfirm, { title: session.title })\">\n              <span class=\"confirm-text\">{{ format(m().deleteSessionConfirm, { title: session.title }) }}</span>\n              <button type=\"button\" class=\"text-btn danger confirm-delete\" [disabled]=\"busySession() === session.id\"\n                      (click)=\"confirmDelete(session)\">{{ m().delete }}</button>\n              <button type=\"button\" class=\"text-btn cancel-delete\" (click)=\"cancelDelete()\">{{ m().cancel }}</button>\n            </div>\n          } @else {\n            <button type=\"button\" class=\"session-open\" [title]=\"session.title\"\n                    [attr.aria-current]=\"session.id === assistant.activeSessionId() ? 'true' : null\"\n                    [disabled]=\"busySession() === session.id\"\n                    (click)=\"openSession(session)\">\n              <span class=\"session-title\">{{ session.title }}</span>\n              @if (sessionDate(session); as date) {\n                <span class=\"session-date\">{{ date }}</span>\n              }\n            </button>\n            @if (assistant.sessionDeleteSupported) {\n              <button type=\"button\" class=\"icon-btn session-delete\"\n                      [attr.aria-label]=\"format(m().deleteSession, { title: session.title })\"\n                      [title]=\"format(m().deleteSession, { title: session.title })\"\n                      [disabled]=\"busySession() === session.id\"\n                      (click)=\"askDelete(session)\">\n                <kendo-svg-icon [icon]=\"trashIcon\" size=\"small\"></kendo-svg-icon>\n              </button>\n            }\n          }\n        </li>\n      } @empty {\n        <li class=\"session-empty\">{{ m().noSessions }}</li>\n      }\n    </ul>\n  </section>\n} @else {\n  @if (showGreeting()) {\n    <div class=\"greeting\" data-testid=\"assistant-greeting\">\n      <mm-octobot animation=\"wave\" size=\"md\" playOnce />\n      <p class=\"greeting-text\">{{ m().greeting }}</p>\n    </div>\n  }\n  @if (showStarters()) {\n    <section class=\"starters\" aria-labelledby=\"assistant-starters-title\">\n      <h3 class=\"starters-title\" id=\"assistant-starters-title\">{{ m().startersTitle }}</h3>\n      <ul class=\"starter-list\">\n        @for (question of assistant.starterQuestions(); track $index) {\n          <li><button type=\"button\" class=\"starter\" [disabled]=\"!assistant.canSend()\" (click)=\"sendStarter(question)\">{{ question }}</button></li>\n        }\n      </ul>\n    </section>\n  }\n\n  <mm-assistant-thread class=\"thread\" [items]=\"assistant.thread()\" [messages]=\"messages()\" (proposalDecision)=\"onDecision($event)\"></mm-assistant-thread>\n\n  @if (!connected() || assistant.transportStatus() === 'error') {\n    <div class=\"unavailable\" role=\"status\">\n      <span class=\"sparkle\" aria-hidden=\"true\">\u2726</span>\n      <p>{{ assistant.transportMessage() ?? m().notAvailable }}</p>\n    </div>\n  }\n\n  <mm-assistant-composer\n    [messages]=\"messages()\"\n    [text]=\"assistant.draft()\"\n    (textChange)=\"assistant.setDraft($event)\"\n    [attachments]=\"assistant.attachments\"\n    [files]=\"assistant.draftFiles()\"\n    (filesChange)=\"assistant.setDraftFiles($event)\"\n    [canSend]=\"assistant.canSend()\"\n    [sending]=\"assistant.sending()\"\n    (send)=\"assistant.send($event)\"\n    (stop)=\"assistant.stop()\">\n  </mm-assistant-composer>\n}\n", styles: [":host{position:relative;display:flex;flex-direction:column;width:400px;min-height:0;border-left:1px solid var(--theme-border-subtle);background:var(--theme-bg-surface);color:var(--theme-text-primary)}.head{display:flex;align-items:center;gap:var(--theme-space-2);padding:10px 14px;border-bottom:1px solid var(--theme-border-subtle)}.title{flex:none;margin:0;white-space:nowrap;font-family:var(--theme-font-display);font-size:.8125rem;font-weight:600}.sparkle{color:var(--theme-ai)}.chip-neutral{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-left:6px;padding:0 7px;border-radius:var(--theme-radius-xs);background:var(--theme-status-neutral-subtle);color:var(--theme-text-secondary);font-size:.71875rem}.icon-btn{flex:none;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:var(--theme-radius-sm);background:none;color:var(--theme-text-secondary);cursor:pointer}.icon-btn:hover{background:var(--theme-bg-hover)}.icon-btn[aria-expanded=true]{background:var(--theme-accent-subtle);color:var(--theme-text-primary)}.icon-btn:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.close{margin-left:auto}.ctx{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:8px 14px;list-style:none;border-bottom:1px solid var(--theme-border-subtle)}.ctx-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:22px;padding:0 4px 0 8px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-xs);font-size:.75rem;color:var(--theme-text-secondary)}.ctx-chip button{display:inline-grid;flex:none;place-items:center;border:0;padding:0 2px;background:none;color:var(--theme-text-muted);cursor:pointer}.ctx-chip button:hover{color:var(--theme-text-primary)}.ctx-chip button:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.ctx-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.thread{flex:1 1 auto;min-height:0}.unavailable{display:flex;align-items:center;gap:var(--theme-space-2);margin:0 14px var(--theme-space-2);padding:8px 10px;border:1px dashed var(--theme-border-default);border-radius:var(--theme-radius-sm);color:var(--theme-text-secondary)}.unavailable p{margin:0}@media(max-width:1180px){:host{width:340px}}@media(max-width:640px){:host{position:fixed;inset:48px 0 0;z-index:30;width:auto;border-left:0}}.head-actions{display:flex;flex:none;gap:2px;margin-left:auto}.head-actions+.close{margin-left:0}.text-btn{height:26px;padding:0 8px;border:0;border-radius:var(--theme-radius-sm);background:none;color:var(--theme-text-secondary);font:inherit;font-size:.75rem;cursor:pointer}.text-btn:hover:not(:disabled){background:var(--theme-bg-hover);color:var(--theme-text-primary)}.text-btn[aria-expanded=true]{background:var(--theme-accent-subtle);color:var(--theme-text-primary)}.text-btn:disabled{color:var(--theme-text-muted);cursor:default}.text-btn:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.text-btn.danger{color:var(--theme-status-error)}.sessions{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--theme-space-2);min-height:0;padding:10px 14px;overflow:auto}.sessions .back{align-self:flex-start}.session-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}.session-row{display:flex;align-items:center;gap:4px;border-radius:var(--theme-radius-sm)}.session-row.active{background:var(--theme-accent-subtle)}.session-open{display:grid;flex:1 1 auto;min-width:0;padding:6px 8px;border:0;border-radius:var(--theme-radius-sm);background:none;color:var(--theme-text-primary);font:inherit;text-align:left;cursor:pointer}.session-open:hover:not(:disabled){background:var(--theme-bg-hover)}.session-open:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.session-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.session-date{color:var(--theme-text-muted);font-size:.71875rem}.session-confirm{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:4px;padding:4px 8px}.confirm-text{flex:1 1 100%;overflow-wrap:anywhere}.session-empty{padding:6px 8px;color:var(--theme-text-secondary)}.greeting{display:grid;justify-items:center;gap:var(--theme-space-2);padding:20px 14px 0;text-align:center}.greeting-text{margin:0;color:var(--theme-text-primary);font-weight:600}.starters{display:grid;gap:var(--theme-space-2);padding:14px 14px 0}.starters-title{margin:0;color:var(--theme-text-secondary);font-size:.75rem;font-weight:600}.starter-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}.starter{width:100%;padding:6px 10px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-sm);background:none;color:var(--theme-text-primary);font:inherit;text-align:left;cursor:pointer}.starter:hover:not(:disabled){border-color:var(--theme-ai);background:var(--theme-bg-hover)}.starter:disabled{color:var(--theme-text-muted);cursor:default}.starter:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.resize-handle{--mm-resize-line: transparent;--mm-resize-grip: var(--theme-border-default, var(--theme-border-subtle, rgba(128, 128, 128, .5)));position:absolute;top:0;bottom:0;left:-4px;z-index:1;width:8px;cursor:col-resize;touch-action:none}.resize-handle:after{content:\"\";position:absolute;top:0;bottom:0;left:3px;width:2px;background:var(--mm-resize-line);transition:background-color .15s}.resize-handle:before{content:\"\";position:absolute;top:50%;left:2px;z-index:1;width:4px;height:32px;margin-top:-16px;border-radius:2px;background:var(--mm-resize-grip);transition:background-color .15s}.resize-handle:hover,.resize-handle:focus-visible{--mm-resize-line: var(--theme-accent);--mm-resize-grip: var(--theme-accent)}.resize-handle:focus-visible{outline:none}:host(.mm-assistant-resizing){-webkit-user-select:none;user-select:none;cursor:col-resize}:host(.mm-assistant-resizing) .resize-handle{--mm-resize-line: var(--theme-accent);--mm-resize-grip: var(--theme-accent)}@media(prefers-reduced-motion:reduce){.resize-handle:after,.resize-handle:before{transition:none}}:host(.mm-assistant-overlay){position:fixed;top:var(--mm-assistant-overlay-top, 48px);right:0;bottom:0;z-index:var(--mm-assistant-overlay-z-index, 20);box-shadow:var(--theme-shadow-panel)}\n"], dependencies: [{ kind: "component", type: AssistantThreadComponent, selector: "mm-assistant-thread", inputs: ["items", "messages"], outputs: ["proposalDecision"] }, { kind: "component", type: AssistantComposerComponent, selector: "mm-assistant-composer", inputs: ["text", "canSend", "sending", "attachments", "files", "messages"], outputs: ["textChange", "filesChange", "send", "stop"] }, { kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }, { kind: "component", type: OctoBotComponent, selector: "mm-octobot", inputs: ["animation", "size", "label", "loading", "still", "playOnce"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AssistantPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-assistant-panel', imports: [AssistantThreadComponent, AssistantComposerComponent, SVGIconComponent, OctoBotComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.role]': 'isPhone() ? "dialog" : "complementary"',
+                        '[attr.aria-modal]': 'isPhone() ? "true" : null',
+                        'aria-labelledby': 'assistant-panel-title',
+                        id: 'assistant-panel',
+                        '[class.mm-assistant-overlay]': 'overlay()',
+                        '[class.mm-assistant-resizing]': 'resizing()',
+                        '[attr.data-mode]': 'effectiveMode()',
+                        '[style.width.px]': 'isPhone() ? null : appliedWidth()',
+                        '(keydown.escape)': 'onEscape($event)',
+                        '(keydown.tab)': 'onTab($event)',
+                        '(keydown.shift.tab)': 'onTab($event)'
+                    }, template: "@if (canResize()) {\n  <div class=\"resize-handle\" role=\"separator\" tabindex=\"0\" aria-orientation=\"vertical\" aria-controls=\"assistant-panel\"\n       [attr.aria-label]=\"m().resizePanel\" [title]=\"m().resizePanel\"\n       [attr.aria-valuenow]=\"currentWidth()\" [attr.aria-valuemin]=\"effectiveMin()\" [attr.aria-valuemax]=\"effectiveMax()\"\n       (pointerdown)=\"startResize($event)\" (keydown)=\"onResizeKey($event)\" (dblclick)=\"resetWidth()\"></div>\n}\n\n<header class=\"head\">\n  <span class=\"sparkle\" aria-hidden=\"true\">\u2726</span>\n  <h2 class=\"title\" id=\"assistant-panel-title\">{{ m().title }}</h2>\n  @if (connected()) {\n    <span class=\"chip-neutral\" [title]=\"m().readsWithYourPermissions\">{{ m().readsWithYourPermissions }}</span>\n  }\n  @if (assistant.sessionsSupported) {\n    <div class=\"head-actions\">\n      <button type=\"button\" class=\"icon-btn new-chat\" [attr.aria-label]=\"m().newChat\" [title]=\"m().newChat\" (click)=\"newChat()\">\n        <kendo-svg-icon [icon]=\"plusIcon\"></kendo-svg-icon>\n      </button>\n      <button type=\"button\" class=\"icon-btn sessions-toggle\" aria-controls=\"assistant-sessions\"\n              [attr.aria-label]=\"m().sessions\" [title]=\"m().sessions\"\n              [attr.aria-expanded]=\"view() === 'sessions'\"\n              (click)=\"view() === 'sessions' ? backToChat() : showSessions()\">\n        <kendo-svg-icon [icon]=\"historyIcon\"></kendo-svg-icon>\n      </button>\n    </div>\n  }\n  <button type=\"button\" class=\"icon-btn close\" [attr.aria-label]=\"m().closeAssistant\" [title]=\"m().closeAssistant\" (click)=\"assistant.close()\">\n    <kendo-svg-icon [icon]=\"xIcon\"></kendo-svg-icon>\n  </button>\n</header>\n\n@if (assistant.contextChips().length) {\n  <ul class=\"ctx\" [attr.aria-label]=\"m().contextLabel\">\n    @for (chip of assistant.contextChips(); track chip.id; let i = $index) {\n      <li class=\"ctx-chip\" [attr.data-kind]=\"chip.kind\" [title]=\"chip.value\">\n        <span class=\"ctx-label\">{{ chip.label }}</span>\n        <button type=\"button\" [attr.aria-label]=\"format(m().removeContext, { label: chip.label })\" [title]=\"format(m().removeContext, { label: chip.label })\" (click)=\"removeChip(chip.id, i)\"><kendo-svg-icon [icon]=\"xIcon\" size=\"small\"></kendo-svg-icon></button>\n      </li>\n    }\n  </ul>\n}\n\n@if (view() === 'sessions') {\n  <section class=\"sessions\" id=\"assistant-sessions\" [attr.aria-label]=\"m().sessionsLabel\">\n    <button type=\"button\" class=\"text-btn back\" (click)=\"backToChat()\">\u2190 {{ m().backToChat }}</button>\n    <ul class=\"session-list\">\n      @for (session of assistant.sessions(); track session.id) {\n        <li class=\"session-row\" [attr.data-session-id]=\"session.id\"\n            [class.active]=\"session.id === assistant.activeSessionId()\">\n          @if (confirmingDelete() === session.id) {\n            <div class=\"session-confirm\" role=\"group\" [attr.aria-label]=\"format(m().deleteSessionConfirm, { title: session.title })\">\n              <span class=\"confirm-text\">{{ format(m().deleteSessionConfirm, { title: session.title }) }}</span>\n              <button type=\"button\" class=\"text-btn danger confirm-delete\" [disabled]=\"busySession() === session.id\"\n                      (click)=\"confirmDelete(session)\">{{ m().delete }}</button>\n              <button type=\"button\" class=\"text-btn cancel-delete\" (click)=\"cancelDelete()\">{{ m().cancel }}</button>\n            </div>\n          } @else {\n            <button type=\"button\" class=\"session-open\" [title]=\"session.title\"\n                    [attr.aria-current]=\"session.id === assistant.activeSessionId() ? 'true' : null\"\n                    [disabled]=\"busySession() === session.id\"\n                    (click)=\"openSession(session)\">\n              <span class=\"session-title\">{{ session.title }}</span>\n              @if (sessionDate(session); as date) {\n                <span class=\"session-date\">{{ date }}</span>\n              }\n            </button>\n            @if (assistant.sessionDeleteSupported) {\n              <button type=\"button\" class=\"icon-btn session-delete\"\n                      [attr.aria-label]=\"format(m().deleteSession, { title: session.title })\"\n                      [title]=\"format(m().deleteSession, { title: session.title })\"\n                      [disabled]=\"busySession() === session.id\"\n                      (click)=\"askDelete(session)\">\n                <kendo-svg-icon [icon]=\"trashIcon\" size=\"small\"></kendo-svg-icon>\n              </button>\n            }\n          }\n        </li>\n      } @empty {\n        <li class=\"session-empty\">{{ m().noSessions }}</li>\n      }\n    </ul>\n  </section>\n} @else {\n  @if (showGreeting()) {\n    <div class=\"greeting\" data-testid=\"assistant-greeting\">\n      <mm-octobot animation=\"wave\" size=\"md\" playOnce />\n      <p class=\"greeting-text\">{{ m().greeting }}</p>\n    </div>\n  }\n  @if (showStarters()) {\n    <section class=\"starters\" aria-labelledby=\"assistant-starters-title\">\n      <h3 class=\"starters-title\" id=\"assistant-starters-title\">{{ m().startersTitle }}</h3>\n      <ul class=\"starter-list\">\n        @for (question of assistant.starterQuestions(); track $index) {\n          <li><button type=\"button\" class=\"starter\" [disabled]=\"!assistant.canSend()\" (click)=\"sendStarter(question)\">{{ question }}</button></li>\n        }\n      </ul>\n    </section>\n  }\n\n  <mm-assistant-thread class=\"thread\" [items]=\"assistant.thread()\" [messages]=\"messages()\" (proposalDecision)=\"onDecision($event)\"></mm-assistant-thread>\n\n  @if (!connected() || assistant.transportStatus() === 'error') {\n    <div class=\"unavailable\" role=\"status\">\n      <span class=\"sparkle\" aria-hidden=\"true\">\u2726</span>\n      <p>{{ assistant.transportMessage() ?? m().notAvailable }}</p>\n    </div>\n  }\n\n  <mm-assistant-composer\n    [messages]=\"messages()\"\n    [text]=\"assistant.draft()\"\n    (textChange)=\"assistant.setDraft($event)\"\n    [attachments]=\"assistant.attachments\"\n    [files]=\"assistant.draftFiles()\"\n    (filesChange)=\"assistant.setDraftFiles($event)\"\n    [canSend]=\"assistant.canSend()\"\n    [sending]=\"assistant.sending()\"\n    (send)=\"assistant.send($event)\"\n    (stop)=\"assistant.stop()\">\n  </mm-assistant-composer>\n}\n", styles: [":host{position:relative;display:flex;flex-direction:column;width:400px;min-height:0;border-left:1px solid var(--theme-border-subtle);background:var(--theme-bg-surface);color:var(--theme-text-primary)}.head{display:flex;align-items:center;gap:var(--theme-space-2);padding:10px 14px;border-bottom:1px solid var(--theme-border-subtle)}.title{flex:none;margin:0;white-space:nowrap;font-family:var(--theme-font-display);font-size:.8125rem;font-weight:600}.sparkle{color:var(--theme-ai)}.chip-neutral{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-left:6px;padding:0 7px;border-radius:var(--theme-radius-xs);background:var(--theme-status-neutral-subtle);color:var(--theme-text-secondary);font-size:.71875rem}.icon-btn{flex:none;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:var(--theme-radius-sm);background:none;color:var(--theme-text-secondary);cursor:pointer}.icon-btn:hover{background:var(--theme-bg-hover)}.icon-btn[aria-expanded=true]{background:var(--theme-accent-subtle);color:var(--theme-text-primary)}.icon-btn:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.close{margin-left:auto}.ctx{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:8px 14px;list-style:none;border-bottom:1px solid var(--theme-border-subtle)}.ctx-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:22px;padding:0 4px 0 8px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-xs);font-size:.75rem;color:var(--theme-text-secondary)}.ctx-chip button{display:inline-grid;flex:none;place-items:center;border:0;padding:0 2px;background:none;color:var(--theme-text-muted);cursor:pointer}.ctx-chip button:hover{color:var(--theme-text-primary)}.ctx-chip button:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.ctx-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.thread{flex:1 1 auto;min-height:0}.unavailable{display:flex;align-items:center;gap:var(--theme-space-2);margin:0 14px var(--theme-space-2);padding:8px 10px;border:1px dashed var(--theme-border-default);border-radius:var(--theme-radius-sm);color:var(--theme-text-secondary)}.unavailable p{margin:0}@media(max-width:1180px){:host{width:340px}}@media(max-width:640px){:host{position:fixed;inset:48px 0 0;z-index:30;width:auto;border-left:0}}.head-actions{display:flex;flex:none;gap:2px;margin-left:auto}.head-actions+.close{margin-left:0}.text-btn{height:26px;padding:0 8px;border:0;border-radius:var(--theme-radius-sm);background:none;color:var(--theme-text-secondary);font:inherit;font-size:.75rem;cursor:pointer}.text-btn:hover:not(:disabled){background:var(--theme-bg-hover);color:var(--theme-text-primary)}.text-btn[aria-expanded=true]{background:var(--theme-accent-subtle);color:var(--theme-text-primary)}.text-btn:disabled{color:var(--theme-text-muted);cursor:default}.text-btn:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.text-btn.danger{color:var(--theme-status-error)}.sessions{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--theme-space-2);min-height:0;padding:10px 14px;overflow:auto}.sessions .back{align-self:flex-start}.session-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}.session-row{display:flex;align-items:center;gap:4px;border-radius:var(--theme-radius-sm)}.session-row.active{background:var(--theme-accent-subtle)}.session-open{display:grid;flex:1 1 auto;min-width:0;padding:6px 8px;border:0;border-radius:var(--theme-radius-sm);background:none;color:var(--theme-text-primary);font:inherit;text-align:left;cursor:pointer}.session-open:hover:not(:disabled){background:var(--theme-bg-hover)}.session-open:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.session-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.session-date{color:var(--theme-text-muted);font-size:.71875rem}.session-confirm{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:4px;padding:4px 8px}.confirm-text{flex:1 1 100%;overflow-wrap:anywhere}.session-empty{padding:6px 8px;color:var(--theme-text-secondary)}.greeting{display:grid;justify-items:center;gap:var(--theme-space-2);padding:20px 14px 0;text-align:center}.greeting-text{margin:0;color:var(--theme-text-primary);font-weight:600}.starters{display:grid;gap:var(--theme-space-2);padding:14px 14px 0}.starters-title{margin:0;color:var(--theme-text-secondary);font-size:.75rem;font-weight:600}.starter-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}.starter{width:100%;padding:6px 10px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-sm);background:none;color:var(--theme-text-primary);font:inherit;text-align:left;cursor:pointer}.starter:hover:not(:disabled){border-color:var(--theme-ai);background:var(--theme-bg-hover)}.starter:disabled{color:var(--theme-text-muted);cursor:default}.starter:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.resize-handle{--mm-resize-line: transparent;--mm-resize-grip: var(--theme-border-default, var(--theme-border-subtle, rgba(128, 128, 128, .5)));position:absolute;top:0;bottom:0;left:-4px;z-index:1;width:8px;cursor:col-resize;touch-action:none}.resize-handle:after{content:\"\";position:absolute;top:0;bottom:0;left:3px;width:2px;background:var(--mm-resize-line);transition:background-color .15s}.resize-handle:before{content:\"\";position:absolute;top:50%;left:2px;z-index:1;width:4px;height:32px;margin-top:-16px;border-radius:2px;background:var(--mm-resize-grip);transition:background-color .15s}.resize-handle:hover,.resize-handle:focus-visible{--mm-resize-line: var(--theme-accent);--mm-resize-grip: var(--theme-accent)}.resize-handle:focus-visible{outline:none}:host(.mm-assistant-resizing){-webkit-user-select:none;user-select:none;cursor:col-resize}:host(.mm-assistant-resizing) .resize-handle{--mm-resize-line: var(--theme-accent);--mm-resize-grip: var(--theme-accent)}@media(prefers-reduced-motion:reduce){.resize-handle:after,.resize-handle:before{transition:none}}:host(.mm-assistant-overlay){position:fixed;top:var(--mm-assistant-overlay-top, 48px);right:0;bottom:0;z-index:var(--mm-assistant-overlay-z-index, 20);box-shadow:var(--theme-shadow-panel)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { composer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AssistantComposerComponent), { isSignal: true }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], storageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "storageKey", required: false }] }] } });
+
+/*
+ * Public API Surface of @meshmakers/shared-ui/assistant (AB#5621)
+ */
+/**
+ * The assistant side panel of the OctoMesh Refinery Studio as an app-agnostic building block:
+ * panel (header, removable context chips, thread, composer with slash commands), proposal cards,
+ * "✦ Explain" directives and the {@link AssistantService} state. It never answers by itself —
+ * turns come from an {@link AssistantTransport} the host provides.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import { AssistantPanelComponent, AssistantService, ASSISTANT_ENABLED, ASSISTANT_TRANSPORT,
+ *          assistantHotkey } from '@meshmakers/shared-ui/assistant';
+ *
+ * // app.config.ts — off by default; without a transport the panel says "backend not available"
+ * providers: [
+ *   { provide: ASSISTANT_ENABLED, useValue: true },
+ *   { provide: ASSISTANT_TRANSPORT, useExisting: MyChatTransport },
+ * ]
+ *
+ * // AppComponent
+ * template: `@if (assistant.enabled && assistant.isOpen()) { <mm-assistant-panel /> }`
+ * @HostListener('document:keydown', ['$event'])
+ * onKeydown(event: KeyboardEvent): void {
+ *   if (this.assistant.enabled && assistantHotkey(event)) { event.preventDefault(); this.assistant.toggle(); }
+ * }
+ * ```
+ *
+ * Wire the top bar toggle of `@meshmakers/shared-ui/shell` with
+ * `[assistantAvailable]="assistant.enabled" [assistantOpen]="assistant.isOpen()" (assistantToggle)="assistant.toggle()"`.
+ * Proposal decisions (Run / Edit / Discard) are only published on `AssistantService.proposalDecisions$`.
+ *
+ * Tokens:
+ * - `ASSISTANT_ENABLED` (default `false`) — the single feature flag;
+ * - `ASSISTANT_TRANSPORT` (default {@link NotConnectedAssistantTransport}) — where turns come from;
+ * - `ASSISTANT_PAGE_CONTEXT` (optional) — area/tab labels for the page chip;
+ * - `ASSISTANT_TOOL_CALL_COMPONENT` (default {@link AssistantToolCallRowComponent}) — tool-call renderer
+ *   (OctoMesh hosts: `AiToolCallComponent` of `@meshmakers/octo-ai-console`);
+ * - `ASSISTANT_SLASH_COMMANDS` (default {@link DEFAULT_ASSISTANT_SLASH_COMMANDS}) — composer commands; a
+ *   command with `expand(command, args)` is sent (and shown) as the prompt it returns (AB#5621);
+ * - `ASSISTANT_PANEL_OPTIONS` (optional) — panel layout: `mode` (`docked` | `overlay`), `resizable` (off by default),
+ *   `minWidth` / `maxWidth`, `storageKey` of the persisted width (AB#5621);
+ * - `ASSISTANT_MESSAGES` — translations (`Partial<AssistantMessages>`; component `messages` inputs win).
+ *
+ * Requires the `marked` package (markdown of assistant turns).
+ *
+ * The startup-needed, `marked`-free part (service, hotkey, tokens, transports, models, messages,
+ * Explain directives) lives in `@meshmakers/shared-ui/assistant-core` and is re-exported here with
+ * the same identity. Import from `assistant-core` in eagerly loaded code and load the panel lazily.
+ * {@link FakeAssistantTransport} is a scriptable transport for host specs.
+ *
+ * Optional transport capabilities (AB#5621) — the panel adds UI only for what the transport has:
+ * `sessions` + `loadSession` (+ `refreshSessions`, `deleteSession`, `newSession`, `activeSessionId`)
+ * → "New chat" / "Chats" list; `attachments` → composer file picker, files on
+ * `AssistantSendRequest.files`; `starterQuestions()` → clickable questions on an empty thread.
+ */
+// Startup part — re-exported from assistant-core so tokens and classes keep a single identity.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AssistantComposerComponent, AssistantMarkdownPipe, AssistantPanelComponent, AssistantProposalCardComponent, AssistantThreadComponent, classifyAssistantHref, renderAssistantMarkdown };
+//# sourceMappingURL=meshmakers-shared-ui-assistant.mjs.map