@theseam/ui-common 1.0.2-beta.57 → 1.0.2-beta.59

package/fesm2022/theseam-ui-common-ai.mjs

@@ -1,6 +1,997 @@
-var publicApi = {};
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injector, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, ChangeDetectorRef, NgZone, ViewChild } from '@angular/core';
+import { NgForOf, NgIf, NgComponentOutlet, AsyncPipe, JsonPipe } from '@angular/common';
+import { BehaviorSubject, switchMap, of, startWith, map, shareReplay } from 'rxjs';
+import { TheSeamOverlayScrollbarDirective } from '@theseam/ui-common/scrollbar';
+import { MarkdownComponent } from 'ngx-markdown';
+import * as i1 from '@angular/forms';
+import { FormControl, Validators, ReactiveFormsModule, FormGroup } from '@angular/forms';
+import * as i2 from '@theseam/ui-common/rich-text';
+import { TheSeamRichTextModule } from '@theseam/ui-common/rich-text';
+import * as i4 from '@theseam/ui-common/form-field';
+import { TheSeamFormFieldModule } from '@theseam/ui-common/form-field';
+import * as i4$1 from '@theseam/ui-common/buttons';
+import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
+import { ComponentHarness } from '@angular/cdk/testing';
+import { THESEAM_DATATABLE_PREFERENCES_ACCESSOR, DatatablePreferencesService, EMPTY_DATATABLE_PREFERENCES, mapColumnsAlterationsStates } from '@theseam/ui-common/datatable';
+import * as i2$1 from '@theseam/ui-common/loading';
+import { TheSeamLoadingModule } from '@theseam/ui-common/loading';
+import { AlterationsDiffComponent } from '@theseam/ui-common/datatable-alterations-display';
+
+class LmStudioAiProvider {
+    async chat(messages) {
+        const url = 'http://localhost:1234/v1/chat/completions';
+        const headers = {
+            'Content-Type': 'application/json',
+        };
+        const model = 'model-identifier';
+        const response = await fetch(url, {
+            method: 'POST',
+            headers,
+            body: JSON.stringify({
+                model,
+                messages: messages.map((m) => ({ role: m.role, content: m.content })),
+            }),
+        });
+        const data = await response.json();
+        console.log('Response from AI:', data);
+        const content = data.choices[0].message.content;
+        console.log(`%cResponse from AI. content:\n${content}`, 'color: limegreen;');
+        return { content };
+    }
+}
+
+class OpenRouterAiProvider {
+    async chat(messages) {
+        const defaultApiKey = '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';
+        const url = 'https://openrouter.ai/api/v1/chat/completions';
+        const apiKey = localStorage.getItem('openrouter-api-key') || defaultApiKey;
+        const headers = {
+            Authorization: `Bearer ${apiKey}`,
+            'Content-Type': 'application/json',
+        };
+        const model = 'google/gemini-2.5-flash';
+        const response = await fetch(url, {
+            method: 'POST',
+            headers,
+            body: JSON.stringify({
+                model,
+                messages: messages.map((m) => ({ role: m.role, content: m.content })),
+                response_format: { type: 'json_object' },
+            }),
+        });
+        const data = await response.json();
+        console.log('Response from AI:', data);
+        const content = data.choices[0].message.content;
+        console.log(`%cResponse from AI. content:\n${content}`, 'color: limegreen;');
+        return { content };
+    }
+}
+
+class MockAiProvider {
+    _response;
+    constructor(_response = 'Mock response') {
+        this._response = _response;
+    }
+    async chat(messages) {
+        const content = typeof this._response === 'function'
+            ? this._response(messages)
+            : this._response;
+        return { content };
+    }
+}
+
+const THESEAM_CHAT_PROVIDER = new InjectionToken('TheSeamChatProvider');
+
+/**
+ * Splits a raw AI response string into an ordered array of segments.
+ * Fenced code blocks with `seam-` prefixed language tags become custom-block
+ * segments; everything else stays as markdown.
+ */
+function parseChatResponse(input) {
+    if (!input) {
+        return [];
+    }
+    const segments = [];
+    const pattern = /^```(seam-[\w-]+)\n([\s\S]*?)^```/gm;
+    let lastIndex = 0;
+    let match;
+    while ((match = pattern.exec(input)) !== null) {
+        if (match.index > lastIndex) {
+            segments.push({
+                type: 'markdown',
+                content: input.slice(lastIndex, match.index),
+            });
+        }
+        segments.push({
+            type: 'custom-block',
+            tag: match[1],
+            content: match[2].replace(/\n$/, ''),
+        });
+        lastIndex = match.index + match[0].length;
+    }
+    if (lastIndex < input.length) {
+        segments.push({ type: 'markdown', content: input.slice(lastIndex) });
+    }
+    return segments;
+}
+
+const THESEAM_CHAT_BLOCK_REGISTRY = new InjectionToken('TheSeamChatBlockRegistry');
+
+class SeamChatMessageComponent {
+    message;
+    _blockRegistry = inject(THESEAM_CHAT_BLOCK_REGISTRY, {
+        optional: true,
+    });
+    _injector = inject(Injector);
+    _getBlockComponent(tag) {
+        return this._blockRegistry?.get(tag) ?? null;
+    }
+    _createBlockInjector(content) {
+        return Injector.create({
+            providers: [{ provide: 'CHAT_BLOCK_CONTENT', useValue: content }],
+            parent: this._injector,
+        });
+    }
+    _buildFallbackMarkdown(tag, content) {
+        return '```' + tag + '\n' + content + '\n```';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SeamChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SeamChatMessageComponent, isStandalone: true, selector: "seam-chat-message", inputs: { message: "message" }, ngImport: i0, template: `
+    <div
+      class="seam-chat-message"
+      [class.seam-chat-message--user]="message.role === 'user'"
+      [class.seam-chat-message--assistant]="message.role === 'assistant'"
+    >
+      <div class="seam-chat-message__role">
+        {{ message.role === 'user' ? 'You' : 'Assistant' }}
+      </div>
+      <div class="seam-chat-message__content">
+        <ng-container *ngFor="let segment of message.segments">
+          <markdown
+            *ngIf="segment.type === 'markdown'"
+            [data]="segment.content"
+          ></markdown>
+          <ng-container *ngIf="segment.type === 'custom-block'">
+            <ng-container
+              *ngIf="
+                _getBlockComponent(segment.tag) as blockComponent;
+                else fallbackBlock
+              "
+            >
+              <ng-container
+                *ngComponentOutlet="
+                  blockComponent;
+                  injector: _createBlockInjector(segment.content)
+                "
+              ></ng-container>
+            </ng-container>
+            <ng-template #fallbackBlock>
+              <markdown
+                [data]="_buildFallbackMarkdown(segment.tag, segment.content)"
+              ></markdown>
+            </ng-template>
+          </ng-container>
+        </ng-container>
+      </div>
+    </div>
+  `, isInline: true, styles: [".seam-chat-message{display:flex;flex-direction:column;padding:8px 12px;margin-bottom:8px}.seam-chat-message--user{align-items:flex-end}.seam-chat-message--user .seam-chat-message__content{background-color:#e8f5e9;border-radius:8px;padding:8px 12px;max-width:80%}.seam-chat-message--assistant .seam-chat-message__content{background-color:#f1f3f5;border-radius:8px;padding:8px 12px;max-width:80%}.seam-chat-message__role{font-size:.75rem;color:#6c757d;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SeamChatMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-chat-message', imports: [NgForOf, NgIf, MarkdownComponent, NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="seam-chat-message"
+      [class.seam-chat-message--user]="message.role === 'user'"
+      [class.seam-chat-message--assistant]="message.role === 'assistant'"
+    >
+      <div class="seam-chat-message__role">
+        {{ message.role === 'user' ? 'You' : 'Assistant' }}
+      </div>
+      <div class="seam-chat-message__content">
+        <ng-container *ngFor="let segment of message.segments">
+          <markdown
+            *ngIf="segment.type === 'markdown'"
+            [data]="segment.content"
+          ></markdown>
+          <ng-container *ngIf="segment.type === 'custom-block'">
+            <ng-container
+              *ngIf="
+                _getBlockComponent(segment.tag) as blockComponent;
+                else fallbackBlock
+              "
+            >
+              <ng-container
+                *ngComponentOutlet="
+                  blockComponent;
+                  injector: _createBlockInjector(segment.content)
+                "
+              ></ng-container>
+            </ng-container>
+            <ng-template #fallbackBlock>
+              <markdown
+                [data]="_buildFallbackMarkdown(segment.tag, segment.content)"
+              ></markdown>
+            </ng-template>
+          </ng-container>
+        </ng-container>
+      </div>
+    </div>
+  `, styles: [".seam-chat-message{display:flex;flex-direction:column;padding:8px 12px;margin-bottom:8px}.seam-chat-message--user{align-items:flex-end}.seam-chat-message--user .seam-chat-message__content{background-color:#e8f5e9;border-radius:8px;padding:8px 12px;max-width:80%}.seam-chat-message--assistant .seam-chat-message__content{background-color:#f1f3f5;border-radius:8px;padding:8px 12px;max-width:80%}.seam-chat-message__role{font-size:.75rem;color:#6c757d;margin-bottom:4px}\n"] }]
+        }], propDecorators: { message: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class SeamChatInputComponent {
+    placeholder = 'Type a message...';
+    disabled = false;
+    messageSent = new EventEmitter();
+    _control = new FormControl('', [Validators.required]);
+    _onEnterKey(event) {
+        const keyEvent = event;
+        if (keyEvent.shiftKey) {
+            return;
+        }
+        keyEvent.preventDefault();
+        this._onSend();
+    }
+    _onSend() {
+        const value = this._control.value?.trim();
+        if (!value || this.disabled) {
+            return;
+        }
+        this.messageSent.emit(value);
+        this._control.reset();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SeamChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SeamChatInputComponent, isStandalone: true, selector: "seam-chat-input", inputs: { placeholder: "placeholder", disabled: "disabled" }, outputs: { messageSent: "messageSent" }, ngImport: i0, template: `
+    <div class="seam-chat-input">
+      <seam-form-field>
+        <seam-rich-text
+          [formControl]="_control"
+          [placeholder]="placeholder"
+          [disableRichText]="true"
+          [rows]="2.7"
+          [resizable]="false"
+          (keydown.enter)="_onEnterKey($event)"
+        ></seam-rich-text>
+      </seam-form-field>
+      <button
+        seamButton
+        theme="primary"
+        class="seam-chat-send-btn"
+        [disabled]="disabled || _control.invalid"
+        (click)="_onSend()"
+      >
+        Send
+      </button>
+    </div>
+  `, isInline: true, styles: [".seam-chat-input{display:flex;align-items:flex-end;gap:8px;padding:8px;border-top:1px solid #dee2e6}seam-form-field{flex:1}.seam-chat-send-btn{flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TheSeamRichTextModule }, { kind: "component", type: i2.RichTextComponent, selector: "seam-rich-text", inputs: ["value", "required", "placeholder", "rows", "resizable", "disableRichText", "displayCharacterCounter", "minLength", "maxLength", "characterCounterTpl", "characterCounterFn", "useMentions", "mentionItems", "mentionSearchFn", "mentionRenderListFn", "mentionListLoadingText", "mentionListEmptyText"], outputs: ["quillEditorCreated", "quillEditorChanged", "quillContentChanged", "quillSelectionChanged", "quillFocus", "quillBlur", "mentionsUpdated"] }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "ngmodule", type: TheSeamButtonsModule }, { kind: "component", type: i4$1.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SeamChatInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-chat-input', imports: [
+                        ReactiveFormsModule,
+                        TheSeamRichTextModule,
+                        TheSeamFormFieldModule,
+                        TheSeamButtonsModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="seam-chat-input">
+      <seam-form-field>
+        <seam-rich-text
+          [formControl]="_control"
+          [placeholder]="placeholder"
+          [disableRichText]="true"
+          [rows]="2.7"
+          [resizable]="false"
+          (keydown.enter)="_onEnterKey($event)"
+        ></seam-rich-text>
+      </seam-form-field>
+      <button
+        seamButton
+        theme="primary"
+        class="seam-chat-send-btn"
+        [disabled]="disabled || _control.invalid"
+        (click)="_onSend()"
+      >
+        Send
+      </button>
+    </div>
+  `, styles: [".seam-chat-input{display:flex;align-items:flex-end;gap:8px;padding:8px;border-top:1px solid #dee2e6}seam-form-field{flex:1}.seam-chat-send-btn{flex-shrink:0}\n"] }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], messageSent: [{
+                type: Output
+            }] } });
+
+class TheSeamChatComponent {
+    _provider = inject(THESEAM_CHAT_PROVIDER, { optional: true });
+    _cdr = inject(ChangeDetectorRef);
+    _ngZone = inject(NgZone);
+    systemPrompt = '';
+    placeholder = 'Type a message...';
+    _messageList;
+    _messageListScrollbar;
+    _loadingSubject = new BehaviorSubject(false);
+    _messages = [];
+    _displayMessages = [];
+    // Pixels of slack allowed when deciding if the viewport is "at the bottom".
+    // Small enough that scrolling up a line unpins, but forgiving of sub-pixel drift.
+    _pinnedThreshold = 32;
+    // True when the viewport is (or should be) tracking the latest content. Starts
+    // true so the first messages scroll into view. Updated on every scroll event.
+    _isPinnedToBottom = true;
+    // Set when a user action (e.g. sending a message) requires the view to jump
+    // to the bottom on the next content-size change, regardless of pinned state.
+    // Cleared as soon as it's consumed.
+    _forceScrollOnNextResize = false;
+    ngAfterViewInit() {
+        const scrollInstance = this._messageListScrollbar?.instance;
+        if (!scrollInstance) {
+            return;
+        }
+        // OverlayScrollbars callbacks run outside Angular already (the directive's
+        // service initializes with runOutsideAngular). These handlers only update
+        // local flags and call scroll() — no change detection needed.
+        this._ngZone.runOutsideAngular(() => {
+            scrollInstance.options({
+                callbacks: {
+                    onScroll: () => this._updatePinnedState(),
+                    // Fires when the content's scrollable size changes: a new message
+                    // appended, a custom block finishing its async render, an image
+                    // finishing loading, etc. This removes the need for a setTimeout
+                    // hack because we react to actual size changes rather than guessing
+                    // when rendering has settled.
+                    onContentSizeChanged: () => this._maybeScrollToBottom(),
+                },
+            });
+        });
+    }
+    async _onMessageSent(text) {
+        if (this._loadingSubject.value || !this._provider) {
+            if (!this._provider) {
+                console.error('No chat provider configured.');
+            }
+            return;
+        }
+        const userMessage = { role: 'user', content: text };
+        this._messages.push(userMessage);
+        this._displayMessages = [
+            ...this._displayMessages,
+            {
+                role: 'user',
+                segments: [{ type: 'markdown', content: text }],
+                timestamp: new Date(),
+            },
+        ];
+        // The user just sent a message — jump to the bottom even if they had
+        // scrolled up previously. Consumed by the next onContentSizeChanged.
+        this._forceScrollOnNextResize = true;
+        this._cdr.markForCheck();
+        this._loadingSubject.next(true);
+        try {
+            const messagesToSend = [];
+            if (this.systemPrompt) {
+                messagesToSend.push({ role: 'system', content: this.systemPrompt });
+            }
+            messagesToSend.push(...this._messages);
+            const response = await this._provider.chat(messagesToSend);
+            const assistantMessage = {
+                role: 'assistant',
+                content: response.content,
+            };
+            this._messages.push(assistantMessage);
+            this._displayMessages = [
+                ...this._displayMessages,
+                {
+                    role: 'assistant',
+                    segments: parseChatResponse(response.content),
+                    timestamp: new Date(),
+                },
+            ];
+        }
+        catch (err) {
+            console.error('Chat provider error:', err);
+        }
+        finally {
+            this._loadingSubject.next(false);
+            this._cdr.markForCheck();
+        }
+    }
+    _updatePinnedState() {
+        const scrollInstance = this._messageListScrollbar?.instance;
+        if (!scrollInstance) {
+            return;
+        }
+        const info = scrollInstance.scroll();
+        this._isPinnedToBottom =
+            info.position.y >= info.max.y - this._pinnedThreshold;
+    }
+    _maybeScrollToBottom() {
+        // Auto-scroll only when the user expects it:
+        //   - They just sent a message (forceScroll), OR
+        //   - They were already following the latest content (pinnedToBottom).
+        // If they scrolled up to read an earlier message, we leave their viewport
+        // alone so continued content growth (e.g. a streaming answer or an
+        // async-rendered block) doesn't keep yanking it back.
+        if (this._forceScrollOnNextResize || this._isPinnedToBottom) {
+            this._scrollToBottom();
+            this._forceScrollOnNextResize = false;
+        }
+    }
+    _scrollToBottom() {
+        const scrollInstance = this._messageListScrollbar?.instance;
+        if (scrollInstance) {
+            const state = scrollInstance.getState();
+            scrollInstance.scroll({ y: state.contentScrollSize.height });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TheSeamChatComponent, isStandalone: true, selector: "seam-chat", inputs: { systemPrompt: "systemPrompt", placeholder: "placeholder" }, viewQueries: [{ propertyName: "_messageList", first: true, predicate: ["messageList"], descendants: true }, { propertyName: "_messageListScrollbar", first: true, predicate: TheSeamOverlayScrollbarDirective, descendants: true }], ngImport: i0, template: "<div class=\"seam-chat\">\n  <div class=\"seam-chat__messages\" #messageList seamOverlayScrollbar>\n    <seam-chat-message\n      *ngFor=\"let msg of _displayMessages\"\n      [message]=\"msg\"\n    ></seam-chat-message>\n\n    <div *ngIf=\"_loadingSubject | async\" class=\"seam-chat__loading\">\n      <span>Thinking...</span>\n    </div>\n  </div>\n\n  <seam-chat-input\n    [placeholder]=\"placeholder\"\n    [disabled]=\"!!(_loadingSubject | async)\"\n    (messageSent)=\"_onMessageSent($event)\"\n  ></seam-chat-input>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.seam-chat{display:flex;flex-direction:column;height:100%;overflow:hidden}.seam-chat__messages{flex:1;overflow-y:auto;padding:12px}.seam-chat__loading{padding:8px 12px;color:#6c757d;font-style:italic}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SeamChatMessageComponent, selector: "seam-chat-message", inputs: ["message"] }, { kind: "component", type: SeamChatInputComponent, selector: "seam-chat-input", inputs: ["placeholder", "disabled"], outputs: ["messageSent"] }, { kind: "directive", type: TheSeamOverlayScrollbarDirective, selector: "[seamOverlayScrollbar]", inputs: ["seamOverlayScrollbar", "overlayScrollbarEnabled"], exportAs: ["seamOverlayScrollbar"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamChatComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-chat', imports: [
+                        AsyncPipe,
+                        NgForOf,
+                        NgIf,
+                        SeamChatMessageComponent,
+                        SeamChatInputComponent,
+                        TheSeamOverlayScrollbarDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"seam-chat\">\n  <div class=\"seam-chat__messages\" #messageList seamOverlayScrollbar>\n    <seam-chat-message\n      *ngFor=\"let msg of _displayMessages\"\n      [message]=\"msg\"\n    ></seam-chat-message>\n\n    <div *ngIf=\"_loadingSubject | async\" class=\"seam-chat__loading\">\n      <span>Thinking...</span>\n    </div>\n  </div>\n\n  <seam-chat-input\n    [placeholder]=\"placeholder\"\n    [disabled]=\"!!(_loadingSubject | async)\"\n    (messageSent)=\"_onMessageSent($event)\"\n  ></seam-chat-input>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.seam-chat{display:flex;flex-direction:column;height:100%;overflow:hidden}.seam-chat__messages{flex:1;overflow-y:auto;padding:12px}.seam-chat__loading{padding:8px 12px;color:#6c757d;font-style:italic}\n"] }]
+        }], propDecorators: { systemPrompt: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], _messageList: [{
+                type: ViewChild,
+                args: ['messageList']
+            }], _messageListScrollbar: [{
+                type: ViewChild,
+                args: [TheSeamOverlayScrollbarDirective]
+            }] } });
+
+class TheSeamChatMessageHarness extends ComponentHarness {
+    static hostSelector = 'seam-chat-message';
+    _role = this.locatorForOptional('.seam-chat-message__role');
+    _content = this.locatorForOptional('.seam-chat-message__content');
+    async getRole() {
+        const roleEl = await this._role();
+        const text = await roleEl?.text();
+        return text?.trim().toLowerCase() ?? '';
+    }
+    async getText() {
+        const contentEl = await this._content();
+        return (await contentEl?.text())?.trim() ?? '';
+    }
+}
+class TheSeamChatInputHarness extends ComponentHarness {
+    static hostSelector = 'seam-chat-input';
+    async getSendButton() {
+        return this.locatorFor('button')();
+    }
+    async isSendDisabled() {
+        const btn = await this.getSendButton();
+        return (await btn.getAttribute('disabled')) !== null;
+    }
+}
+class TheSeamChatHarness extends ComponentHarness {
+    static hostSelector = 'seam-chat';
+    _messages = this.locatorForAll(TheSeamChatMessageHarness);
+    _input = this.locatorFor(TheSeamChatInputHarness);
+    _loading = this.locatorForOptional('.seam-chat__loading');
+    async getMessages() {
+        return this._messages();
+    }
+    async getInput() {
+        return this._input();
+    }
+    async isLoading() {
+        return (await this._loading()) !== null;
+    }
+}
+
+const assistantPrompt = `You are a helpful assistant that provides formatting json code for a datatable.
+A datatable is a table that displays data in rows and columns, similar to a spreadsheet, with column sorting and data filtering.
+
+Your job is not to provide a descriptive analysis of the request or any additional information. The user will ignore anything that is not a JSON object.
+
+The user will provide a request, and you will respond with a JSON object that contains an array of table alterations.
+The following is the typescript interface for a datatable column and the alterations you can make to it:
+
+\`\`\`typescript
+interface TableColumn {
+  /** Column property */
+  prop: string,
+  /** Column name */
+  name: string,
+  /** Column cell type - determines filter type */
+  cellType?: 'string' | 'integer' | 'decimal' | 'currency' | 'date' | 'phone',
+  /** Whether the column is sortable */
+  sortable?: boolean,
+  /** Whether the column is filterable */
+  filterable?: boolean,
+  /** Whether the column is visible */
+  visible?: boolean,
+  /** Whether the column is resizable */
+  resizable?: boolean,
+  /** Whether the column is draggable */
+  draggable?: boolean,
+  /** Column width */
+  width?: number,
+  /** Column index */
+  index?: number,
+}
+
+interface SortItem {
+  /** Column property */
+  prop: string,
+  /** Sort direction */
+  dir: 'asc' | 'desc'
+}
+
+interface SortState {
+  /** The list of sorts */
+  sorts: SortItem[]
+}
+
+interface OrderRecord {
+  /** Column property */
+  columnProp: string,
+  /** Column order, which is the index that it will be placed in the columns array. */
+  index: number
+}
+
+interface OrderState {
+  /** The list of column order records */
+  columns: OrderRecord[]
+}
+
+interface WidthState {
+  /** The column property that this width alteration applies to */
+  columnProp: string
+  /** The width of the column. Number is in pixels. */
+  width?: number
+  /** Whether the column can auto resize. Needs to be false to guarantee a specific width. */
+  canAutoResize: boolean
+}
+
+interface HideColumnState {
+  /** The column property that this alteration applies to */
+  columnProp: string
+  /** Whether the column is hidden */
+  hidden: boolean
+}
+
+interface FilterState {
+  /** The column property that this filter applies to */
+  columnProp: string,
+  /** The filter type based on column cellType */
+  filterType: 'text' | 'numeric' | 'date',
+  /** The filter operation */
+  operation: string,
+  /** The filter value (for single value operations) */
+  value?: any,
+  /** The from value (for range operations like 'between') */
+  fromValue?: any,
+  /** The to value (for range operations like 'between') */
+  toValue?: any
+}
+
+interface TableAlteration<TType extends string, TState> {
+  /**
+   * Unique identifier for the alteration.
+   */
+  id: string
+  /**
+   * The type of alteration.
+   */
+  type: TType
+  /** The alteration state */
+  state: TState
+}
+
+/**
+ * Sort alteration for a datatable.
+ * "id" should always be "sort" for this alteration.
+ */
+type SortAlteration = TableAlteration<'sort', SortState>
+
+/**
+ * Order alteration for a datatable column.
+ *
+ * "id" should always be "order" for this alteration.
+ */
+type OrderAlteration = TableAlteration<'order', OrderState>
+
+/**
+ * Width alteration for a datatable column.
+ *
+ * "id" should always be "width-<prop>" for this alteration. So, for example, if the column property is "name", the id would be "width-name".
+ */
+type WidthAlteration = TableAlteration<'width', WidthState>
+
+/**
+ * Hide column alteration for a datatable column.
+ *
+ * "id" should always be "hide-column-<prop>" for this alteration. So, for example, if the column property is "name", the id would be "hide-column-name".
+ */
+type HideColumnAlteration = TableAlteration<'hide-column', HideColumnState>
+
+/**
+ * Filter alteration for a datatable column.
+ * "id" should be "filter--<columnProp>" for this alteration.
+ * For example, if filtering the "age" column, the id would be "filter--age".
+ */
+type FilterAlteration = TableAlteration<'filter', FilterState>
+\`\`\`
+
+## Filter Operations by Type
+
+### Text Filters (cellType: 'string', 'phone')
+- 'contains': Text contains the value (case-insensitive)
+- 'eq': Text equals the value exactly
+- 'neq': Text does not equal the value
+- 'ncontains': Text does not contain the value
+- 'blank': Field is empty/null
+- 'not-blank': Field is not empty/null
+
+### Numeric Filters (cellType: 'integer', 'decimal', 'currency')
+- 'eq': Equals the value
+- 'gt': Greater than the value
+- 'gte': Greater than or equal to the value
+- 'lt': Less than the value
+- 'lte': Less than or equal to the value
+- 'between': Between fromValue and toValue (inclusive)
+- 'not-between': Not between fromValue and toValue
+- 'blank': Field is empty/null
+- 'not-blank': Field is not empty/null
+
+### Date Filters (cellType: 'date')
+- 'eq': Date equals the value
+- 'gt': Date is after the value
+- 'gte': Date is on or after the value
+- 'lt': Date is before the value
+- 'lte': Date is on or before the value
+- 'between': Date is between fromValue and toValue (inclusive)
+- 'not-between': Date is not between fromValue and toValue
+- 'blank': Field is empty/null
+- 'not-blank': Field is not empty/null
+
+## Examples
+
+Filter age greater than 30:
+\`\`\`json
+{
+  "id": "filter--age",
+  "type": "filter",
+  "state": {
+    "columnProp": "age",
+    "filterType": "numeric",
+    "operation": "gt",
+    "value": 30
+  }
+}
+\`\`\`
+
+Filter color contains "red":
+\`\`\`json
+{
+  "id": "filter--color",
+  "type": "filter",
+  "state": {
+    "columnProp": "color",
+    "filterType": "text",
+    "operation": "contains",
+    "value": "red"
+  }
+}
+\`\`\`
+
+Filter age between 25 and 65:
+\`\`\`json
+{
+  "id": "filter--age",
+  "type": "filter",
+  "state": {
+    "columnProp": "age",
+    "filterType": "numeric",
+    "operation": "between",
+    "fromValue": 25,
+    "toValue": 65
+  }
+}
+\`\`\`
+
+Sort by name ascending:
+\`\`\`json
+{
+  "id": "sort",
+  "type": "sort",
+  "state": {
+    "sorts": [
+      {
+        "prop": "name",
+        "dir": "asc"
+      }
+    ]
+  }
+}
+\`\`\`
+
+Hide the age column:
+\`\`\`json
+{
+  "id": "hide-column-age",
+  "type": "hide-column",
+  "state": {
+    "columnProp": "age",
+    "hidden": true
+  }
+}
+\`\`\`
+
+Set name column width to 300 pixels:
+\`\`\`json
+{
+  "id": "width-name",
+  "type": "width",
+  "state": {
+    "columnProp": "name",
+    "width": 300,
+    "canAutoResize": false
+  }
+}
+\`\`\`
+
+Reorder columns (name first, age second, color third):
+\`\`\`json
+{
+  "id": "order",
+  "type": "order",
+  "state": {
+    "columns": [
+      { "columnProp": "name", "index": 0 },
+      { "columnProp": "age", "index": 1 },
+      { "columnProp": "color", "index": 2 }
+    ]
+  }
+}
+\`\`\`
+`;
+const getUserPrompt = (columns, request) => `
+Columns:
+\`\`\`json
+${JSON.stringify(columns, null, 2)}
+\`\`\`
+Request: "${request}"
+`;
+function parseResponse(responseContent, responseFormat) {
+    if (responseFormat?.type === 'json_object') {
+        return JSON.parse(responseContent);
+    }
+    // Parse the JSON string to an object, which is in the string between the code blocks.
+    // So, need to find the first and last code block markers.
+    const startIndex = responseContent.indexOf('```json') + '```json'.length;
+    const endIndex = responseContent.lastIndexOf('```');
+    const alterations = responseContent.substring(startIndex, endIndex).trim();
+    // console.log('Alterations:', alterations)
+    return JSON.parse(alterations);
+}
+const THESEAM_DATATABLE_PROMPTER_PROVIDER = new InjectionToken('TheSeamDatatablePrompterProvider');
+
+class TheSeamDatatablePrompterComponent {
+    // cdr = inject(ChangeDetectorRef)
+    _prefsAccessor = inject(THESEAM_DATATABLE_PREFERENCES_ACCESSOR, { optional: true });
+    _dtPrefsService = inject(DatatablePreferencesService);
+    _aiProvider = inject(THESEAM_DATATABLE_PROMPTER_PROVIDER, {
+        optional: true,
+    });
+    _loadingSubject = new BehaviorSubject(false);
+    _altsDataSubject = new BehaviorSubject(undefined);
+    loading$ = this._loadingSubject.asObservable();
+    diffMode = 'auto';
+    compact = true;
+    set prompt(value) {
+        if (value) {
+            this._form.controls.prompt.setValue(value);
+        }
+        else {
+            this._form.controls.prompt.setValue('Sort color descending order');
+        }
+    }
+    set datatable(value) {
+        this._datatableSubject.next(value);
+    }
+    get datatable() {
+        return this._datatableSubject.value;
+    }
+    _datatableSubject = new BehaviorSubject(null);
+    showAlts = true;
+    _form = new FormGroup({
+        prompt: new FormControl('Sort color descending order', [
+            Validators.required,
+        ]),
+    });
+    _alterations$ = this._datatableSubject
+        .asObservable()
+        .pipe(switchMap((dt) => {
+        if (!dt) {
+            return of(dt);
+        }
+        return dt._columnsAlterationsManager.changes.pipe(startWith(undefined), map(() => dt));
+    }), switchMap((datatable) => {
+        if (!datatable) {
+            return of([]);
+        }
+        const key = datatable.preferencesKey;
+        if (!key) {
+            // eslint-disable-next-line no-console
+            console.warn('No preferences key set on datatable, returning empty alterations.');
+            return of([]);
+        }
+        return (this._dtPrefsService.preferences(key).pipe(switchMap((prefs) => {
+            // console.log('~~~~Current preferences:', prefs)
+            if (!prefs) {
+                return of(JSON.parse(JSON.stringify(EMPTY_DATATABLE_PREFERENCES))
+                    .alterations);
+            }
+            // return of(JSON.parse(prefs).alterations as ColumnsAlterationState[])
+            return of(prefs.alterations);
+        })) ?? of([]));
+    }));
+    _alterationsDisplayItems$ = this._alterations$.pipe(switchMap((alterations) => {
+        console.log('~~~~~Current alterations:', alterations);
+        if (!alterations || alterations.length === 0) {
+            return of([]);
+        }
+        const alts = mapColumnsAlterationsStates(alterations);
+        console.log('~~~~~Mapped alterations:', alts);
+        return of(alts.map((a) => a.toDisplayItem()));
+    }), shareReplay({ bufferSize: 1, refCount: true }));
+    _pendingAlterationsSubject = new BehaviorSubject([]);
+    _pendingAlterationsDisplayItems$ = this._pendingAlterationsSubject.asObservable().pipe(switchMap((pending) => {
+        if (!pending || pending.length === 0) {
+            return of([]);
+        }
+        const alts = mapColumnsAlterationsStates(pending);
+        console.log('~~~~~Mapped alterations2:', alts);
+        return of(alts.map((a) => a.toDisplayItem()));
+    }), shareReplay({ bufferSize: 1, refCount: true }));
+    _onSubmit() {
+        console.log('Submitting prompt:', this._form.value);
+        if (this._form.invalid) {
+            return;
+        }
+        if (this._loadingSubject.value) {
+            console.warn('Already loading, ignoring submit.');
+            return;
+        }
+        const prompt = this._form.value.prompt;
+        if (!prompt) {
+            return;
+        }
+        console.log('datatable', this._datatableSubject.value);
+        const columns = (this._datatableSubject.value?.ngxDatatable?.columns || []).map((col) => ({
+            prop: col.prop,
+            name: col.name,
+            cellType: col.cellType || 'string',
+            sortable: col.sortable,
+            filterable: true,
+            visible: true,
+            resizable: col.resizeable,
+            draggable: col.draggable,
+        }));
+        console.log('columns', columns);
+        const userPrompt = getUserPrompt(columns, prompt);
+        console.log('userPrompt', userPrompt);
+        this._loadingSubject.next(true);
+        if (!this._aiProvider) {
+            console.error('No AI provider configured, cannot submit prompt.');
+            this._loadingSubject.next(false);
+            return;
+        }
+        this._aiProvider
+            .chat([
+            { role: 'system', content: assistantPrompt },
+            { role: 'user', content: userPrompt },
+        ])
+            .then(async (response) => {
+            const alterations = parseResponse(response.content, undefined);
+            // this._form.reset()
+            console.log('Received alterations:', alterations);
+            const datatable = this._datatableSubject.value;
+            if (!datatable) {
+                console.error('No datatable found to apply alterations to.');
+                return;
+            }
+            const key = this.datatable.preferencesKey;
+            const before = await this._prefsAccessor?.get(key).toPromise();
+            console.log('Current preferences before update:', before);
+            const _apply = async () => {
+                console.log('Preferences updated successfully.');
+                const _cols = this.datatable.ngxDatatable.columns;
+                const cols = [..._cols];
+                console.log('this.datatable!.columns', cols);
+                const after = await this._prefsAccessor?.get(key).toPromise();
+                let _after = (JSON.parse(after || '{}').alterations ||
+                    []);
+                if (!Array.isArray(_after)) {
+                    _after = [_after];
+                }
+                const mgr = this.datatable._columnsAlterationsManager;
+                console.log('_columnsAlterationsManager', mgr, mgr.get());
+                const alts = mapColumnsAlterationsStates(_after);
+                console.log('Mapped alterations:', alts);
+                const columnsBefore = JSON.parse(JSON.stringify(this.datatable.ngxDatatable.columns.map((x) => x.prop)));
+                console.log('Columns before applying alterations:', columnsBefore);
+                for (const a of alts) {
+                    console.log('Applying alteration:', a);
+                    a.apply(cols, this.datatable);
+                }
+                console.log('Current preferences after update:', after);
+                console.log(_after);
+                this.datatable.columns = [...cols];
+                const columnsAfter = JSON.parse(JSON.stringify(this.datatable.ngxDatatable.columns.map((x) => x.prop)));
+                console.log('Columns after applying alterations:', columnsAfter);
+                mgr.add(alts);
+                datatable._cdr.detectChanges();
+                this._pendingAlterationsSubject.next(_after);
+            };
+            this._prefsAccessor
+                ?.update(key, JSON.stringify({
+                version: 2,
+                alterations,
+            }))
+                .subscribe(async () => {
+                // TODO: Cleanup. This is a hack to ensure the datatable updates after the preferences are set.
+                await _apply();
+                datatable.rows = [...datatable.rows];
+                datatable._cdr.detectChanges();
+                await _apply();
+                this._loadingSubject.next(false);
+            });
+        })
+            .catch((err) => {
+            console.error('Error submitting prompt:', err);
+            this._loadingSubject.next(false);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamDatatablePrompterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TheSeamDatatablePrompterComponent, isStandalone: true, selector: "seam-datatable-prompter", inputs: { diffMode: "diffMode", compact: "compact", prompt: "prompt", datatable: "datatable", showAlts: "showAlts" }, ngImport: i0, template: "<div class=\"d-block border rounded border-lightgray\">\n  <div\n    [formGroup]=\"_form\"\n    (ngSubmit)=\"_onSubmit()\"\n    class=\"d-block position-relative\"\n  >\n    <div>\n      <div class=\"p-1\">\n        <!-- <textarea formControlName=\"prompt\" style=\"width: 800px; height: 100px;\"></textarea> -->\n        <seam-form-field [numPaddingErrors]=\"0\">\n          <seam-rich-text\n            seamInput\n            formControlName=\"prompt\"\n            placeholder=\"Describe what you want to apply to the datatable.\"\n            [rows]=\"3\"\n            [resizable]=\"false\"\n            [disableRichText]=\"true\"\n          ></seam-rich-text>\n        </seam-form-field>\n      </div>\n      <div class=\"p-1\">\n        <button\n          class=\"mr-1\"\n          type=\"submit\"\n          seamButton\n          theme=\"primary\"\n          size=\"sm\"\n          (click)=\"_onSubmit()\"\n        >\n          Submit\n        </button>\n        <button seamButton theme=\"lightgray\" size=\"sm\" (click)=\"_form.reset()\">\n          Reset\n        </button>\n      </div>\n    </div>\n    <div\n      *ngIf=\"loading$ | async\"\n      class=\"d-block position-absolute\"\n      style=\"top: 0; left: 0; right: 0; bottom: 0\"\n    >\n      <seam-loading></seam-loading>\n    </div>\n  </div>\n\n  <div class=\"p-2\" *ngIf=\"showAlts\">\n    <div>Active Alterations</div>\n    <div class=\"p-2 border rounded bg-lightgray\">\n      <!-- {{ _alterations$ | async | json }} -->\n      <div *ngFor=\"let alteration of _alterations$ | async; let last = last\">\n        <div\n          class=\"d-flex align-items-center border border-dark rounded p-1\"\n          [class.mb-1]=\"!last\"\n        >\n          <span class=\"badge bg-secondary\">{{ alteration.type }}</span>\n          <!-- <span class=\"badge bg-primary\">{{ alteration.label }}</span> -->\n          <!-- <div>\n            {{ alteration.value | json }}\n          </div> -->\n          <div *ngIf=\"alteration.type === 'sort'\">\n            <div class=\"d-flex flex-column\">\n              <div\n                *ngFor=\"let sort of alteration.state.sorts; let last = last\"\n                [class.mb-1]=\"!last\"\n              >\n                <span class=\"badge bg-lightgray\"\n                  >{{ sort.prop }} ({{ sort.dir }})</span\n                >\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <seam-alterations-diff\n      [currentItems]=\"(_alterationsDisplayItems$ | async) ?? []\"\n      [pendingItems]=\"(_pendingAlterationsDisplayItems$ | async) ?? []\"\n      [compact]=\"compact\"\n      [diffMode]=\"diffMode\"\n    ></seam-alterations-diff>\n  </div>\n</div>\n", styles: [":host{display:block;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TheSeamLoadingModule }, { kind: "component", type: i2$1.TheSeamLoadingComponent, selector: "seam-loading", inputs: ["theme"] }, { kind: "ngmodule", type: TheSeamRichTextModule }, { kind: "component", type: i2.RichTextComponent, selector: "seam-rich-text", inputs: ["value", "required", "placeholder", "rows", "resizable", "disableRichText", "displayCharacterCounter", "minLength", "maxLength", "characterCounterTpl", "characterCounterFn", "useMentions", "mentionItems", "mentionSearchFn", "mentionRenderListFn", "mentionListLoadingText", "mentionListEmptyText"], outputs: ["quillEditorCreated", "quillEditorChanged", "quillContentChanged", "quillSelectionChanged", "quillFocus", "quillBlur", "mentionsUpdated"] }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i4.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i4.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "ngmodule", type: TheSeamButtonsModule }, { kind: "component", type: i4$1.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "component", type: AlterationsDiffComponent, selector: "seam-alterations-diff", inputs: ["currentItems", "pendingItems", "diffMode", "initialDiffState", "compact"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamDatatablePrompterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-datatable-prompter', imports: [
+                        ReactiveFormsModule,
+                        AsyncPipe,
+                        JsonPipe,
+                        NgForOf,
+                        NgIf,
+                        TheSeamLoadingModule,
+                        TheSeamRichTextModule,
+                        TheSeamFormFieldModule,
+                        TheSeamButtonsModule,
+                        AlterationsDiffComponent,
+                    ], template: "<div class=\"d-block border rounded border-lightgray\">\n  <div\n    [formGroup]=\"_form\"\n    (ngSubmit)=\"_onSubmit()\"\n    class=\"d-block position-relative\"\n  >\n    <div>\n      <div class=\"p-1\">\n        <!-- <textarea formControlName=\"prompt\" style=\"width: 800px; height: 100px;\"></textarea> -->\n        <seam-form-field [numPaddingErrors]=\"0\">\n          <seam-rich-text\n            seamInput\n            formControlName=\"prompt\"\n            placeholder=\"Describe what you want to apply to the datatable.\"\n            [rows]=\"3\"\n            [resizable]=\"false\"\n            [disableRichText]=\"true\"\n          ></seam-rich-text>\n        </seam-form-field>\n      </div>\n      <div class=\"p-1\">\n        <button\n          class=\"mr-1\"\n          type=\"submit\"\n          seamButton\n          theme=\"primary\"\n          size=\"sm\"\n          (click)=\"_onSubmit()\"\n        >\n          Submit\n        </button>\n        <button seamButton theme=\"lightgray\" size=\"sm\" (click)=\"_form.reset()\">\n          Reset\n        </button>\n      </div>\n    </div>\n    <div\n      *ngIf=\"loading$ | async\"\n      class=\"d-block position-absolute\"\n      style=\"top: 0; left: 0; right: 0; bottom: 0\"\n    >\n      <seam-loading></seam-loading>\n    </div>\n  </div>\n\n  <div class=\"p-2\" *ngIf=\"showAlts\">\n    <div>Active Alterations</div>\n    <div class=\"p-2 border rounded bg-lightgray\">\n      <!-- {{ _alterations$ | async | json }} -->\n      <div *ngFor=\"let alteration of _alterations$ | async; let last = last\">\n        <div\n          class=\"d-flex align-items-center border border-dark rounded p-1\"\n          [class.mb-1]=\"!last\"\n        >\n          <span class=\"badge bg-secondary\">{{ alteration.type }}</span>\n          <!-- <span class=\"badge bg-primary\">{{ alteration.label }}</span> -->\n          <!-- <div>\n            {{ alteration.value | json }}\n          </div> -->\n          <div *ngIf=\"alteration.type === 'sort'\">\n            <div class=\"d-flex flex-column\">\n              <div\n                *ngFor=\"let sort of alteration.state.sorts; let last = last\"\n                [class.mb-1]=\"!last\"\n              >\n                <span class=\"badge bg-lightgray\"\n                  >{{ sort.prop }} ({{ sort.dir }})</span\n                >\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <seam-alterations-diff\n      [currentItems]=\"(_alterationsDisplayItems$ | async) ?? []\"\n      [pendingItems]=\"(_pendingAlterationsDisplayItems$ | async) ?? []\"\n      [compact]=\"compact\"\n      [diffMode]=\"diffMode\"\n    ></seam-alterations-diff>\n  </div>\n</div>\n", styles: [":host{display:block;overflow:hidden}\n"] }]
+        }], propDecorators: { diffMode: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }], prompt: [{
+                type: Input
+            }], datatable: [{
+                type: Input
+            }], showAlts: [{
+                type: Input
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
+
+export { LmStudioAiProvider, MockAiProvider, OpenRouterAiProvider, THESEAM_CHAT_BLOCK_REGISTRY, THESEAM_CHAT_PROVIDER, THESEAM_DATATABLE_PROMPTER_PROVIDER, TheSeamChatComponent, TheSeamChatHarness, TheSeamDatatablePrompterComponent, assistantPrompt, getUserPrompt, parseChatResponse, parseResponse };
 //# sourceMappingURL=theseam-ui-common-ai.mjs.map