@rolatech/angular-components 20.1.1 → 20.1.3-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { model, output, ViewEncapsulation, Component, viewChild, input, inject, Renderer2, ViewChild, Inject, booleanAttribute, ElementRef, effect, HostBinding, InjectionToken, makeEnvironmentProviders, PLATFORM_ID, ChangeDetectionStrategy, contentChild, computed, NgModule, ChangeDetectorRef, HostListener, signal, Input, contentChildren } from '@angular/core';
|
|
2
|
+
import { model, output, ViewEncapsulation, Component, viewChild, input, inject, Renderer2, ViewChild, Inject, booleanAttribute, ElementRef, effect, HostBinding, InjectionToken, makeEnvironmentProviders, PLATFORM_ID, ChangeDetectionStrategy, contentChild, computed, NgModule, ChangeDetectorRef, HostListener, signal, Input, contentChildren, viewChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, isPlatformBrowser, NgClass } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
@@ -2196,23 +2196,62 @@ class ConversationMessage {
|
|
|
2196
2196
|
message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
|
|
2197
2197
|
call() { }
|
|
2198
2198
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConversationMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2199
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ConversationMessage, isStandalone: true, selector: "rolatech-conversation-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (message().role === 'user') {\n<div class=\"flex justify-end\">\n <div class=\"flex flex-col items-end w-full
|
|
2199
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ConversationMessage, isStandalone: true, selector: "rolatech-conversation-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (message().role === 'user') {\n<div class=\"flex justify-end\">\n <div class=\"flex flex-col items-end w-full py-3\">\n <div\n class=\"max-w-[80%] rounded-2xl px-4 py-2 shadow-sm bg-[var(--rt-brand-color)] text-white whitespace-pre-wrap break-words\"\n >\n <div>{{ message().text }}</div>\n </div>\n\n <div class=\"text-xs text-gray-400 mt-1 pr-1\">{{ message().createdAt | date:'shortTime' }}</div>\n </div>\n</div>\n}@else {\n<div class=\"flex justify-start\">\n <div class=\"flex flex-col items-start w-full py-3\">\n @if (message().role === 'assistant') { @for (seg of message().segments ?? []; track $index) { @switch (seg.kind) { @case\n ('text') {\n <div class=\"whitespace-pre-wrap break-all\">{{ seg.text }}</div>\n } @case ('group') {\n <a\n class=\"w-full flex flex-col p-3 mb-3 shadow rounded-xl hover:bg-[--rt-raised-background] cursor-pointer\"\n [routerLink]=\"['/properties', seg.item.id]\"\n target=\"_blank\"\n >\n <div class=\"flex flex-row\">\n @if (seg.item.mediaUrl) {\n <div class=\"min-w-20 w-20 object-cover aspect-video rounded-lg mr-3\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"seg.item.mediaUrl\" ratio=\"square\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-square rounded-lg\"></div>\n }\n </div>\n } @else {\n <div class=\"min-w-20 w-20 object-cover aspect-square rounded-lg mr-3\">\n <rolatech-image-placeholder ratio=\"square\"></rolatech-image-placeholder>\n </div>\n }\n <div class=\"flex w-full justify-between\">\n <div class=\"flex justify-between w-full\">\n <div class=\"flex flex-col gap-3 p-1\">\n <div class=\"font-bold\">{{ seg.item.title }}</div>\n <div class=\"mt-1\">{{ seg.item.price }}</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"mx-2 my-3 bg-black opacity-10 h-[1px]\"></div>\n <div class=\"px-1\">\n <div><span class=\"opacity-70 text-sm\">Address: </span>{{seg.item.address}}</div>\n @if (seg.item.phone) {\n <div><span class=\"opacity-70 text-sm\">Phone: </span>{{seg.item.phone}}</div>\n <button mat-flat-button (click)=\"call()\">Call me</button>\n }\n </div>\n </a>\n } @case ('json') {\n <pre class=\"mt-2 text-xs overflow-auto\">{{ seg.data | json }}</pre>\n } @case ('tool') {\n <div class=\"w-full opacity-70 py-2 rounded-xl text-sm bg-[--rt-raised-background] mb-2 break-all\">\n <span class=\"font-bold\">Using Tool</span><span> | {{ seg.tool.tool }}: {{ seg.tool.args }} {{seg.tool.results}}</span>\n </div>\n } } } @if (message().done) {\n <div class=\"text-xs opacity-50 mt-2\">[done]</div>\n } }\n </div>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], deferBlockDependencies: [() => [Promise.resolve().then(function () { return thumbnail_component; }).then(m => m.ThumbnailComponent)]] });
|
|
2200
2200
|
}
|
|
2201
2201
|
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.3.4", ngImport: i0, type: ConversationMessage, resolveDeferredDeps: () => [Promise.resolve().then(function () { return thumbnail_component; }).then(m => m.ThumbnailComponent)], resolveMetadata: ThumbnailComponent => ({ decorators: [{
|
|
2202
2202
|
type: Component,
|
|
2203
|
-
args: [{ selector: 'rolatech-conversation-message', imports: [CommonModule, RouterLink, ThumbnailComponent, ImagePlaceholderComponent, MatButtonModule], template: "@if (message().role === 'user') {\n<div class=\"flex justify-end\">\n <div class=\"flex flex-col items-end w-full
|
|
2203
|
+
args: [{ selector: 'rolatech-conversation-message', imports: [CommonModule, RouterLink, ThumbnailComponent, ImagePlaceholderComponent, MatButtonModule], template: "@if (message().role === 'user') {\n<div class=\"flex justify-end\">\n <div class=\"flex flex-col items-end w-full py-3\">\n <div\n class=\"max-w-[80%] rounded-2xl px-4 py-2 shadow-sm bg-[var(--rt-brand-color)] text-white whitespace-pre-wrap break-words\"\n >\n <div>{{ message().text }}</div>\n </div>\n\n <div class=\"text-xs text-gray-400 mt-1 pr-1\">{{ message().createdAt | date:'shortTime' }}</div>\n </div>\n</div>\n}@else {\n<div class=\"flex justify-start\">\n <div class=\"flex flex-col items-start w-full py-3\">\n @if (message().role === 'assistant') { @for (seg of message().segments ?? []; track $index) { @switch (seg.kind) { @case\n ('text') {\n <div class=\"whitespace-pre-wrap break-all\">{{ seg.text }}</div>\n } @case ('group') {\n <a\n class=\"w-full flex flex-col p-3 mb-3 shadow rounded-xl hover:bg-[--rt-raised-background] cursor-pointer\"\n [routerLink]=\"['/properties', seg.item.id]\"\n target=\"_blank\"\n >\n <div class=\"flex flex-row\">\n @if (seg.item.mediaUrl) {\n <div class=\"min-w-20 w-20 object-cover aspect-video rounded-lg mr-3\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"seg.item.mediaUrl\" ratio=\"square\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-square rounded-lg\"></div>\n }\n </div>\n } @else {\n <div class=\"min-w-20 w-20 object-cover aspect-square rounded-lg mr-3\">\n <rolatech-image-placeholder ratio=\"square\"></rolatech-image-placeholder>\n </div>\n }\n <div class=\"flex w-full justify-between\">\n <div class=\"flex justify-between w-full\">\n <div class=\"flex flex-col gap-3 p-1\">\n <div class=\"font-bold\">{{ seg.item.title }}</div>\n <div class=\"mt-1\">{{ seg.item.price }}</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"mx-2 my-3 bg-black opacity-10 h-[1px]\"></div>\n <div class=\"px-1\">\n <div><span class=\"opacity-70 text-sm\">Address: </span>{{seg.item.address}}</div>\n @if (seg.item.phone) {\n <div><span class=\"opacity-70 text-sm\">Phone: </span>{{seg.item.phone}}</div>\n <button mat-flat-button (click)=\"call()\">Call me</button>\n }\n </div>\n </a>\n } @case ('json') {\n <pre class=\"mt-2 text-xs overflow-auto\">{{ seg.data | json }}</pre>\n } @case ('tool') {\n <div class=\"w-full opacity-70 py-2 rounded-xl text-sm bg-[--rt-raised-background] mb-2 break-all\">\n <span class=\"font-bold\">Using Tool</span><span> | {{ seg.tool.tool }}: {{ seg.tool.args }} {{seg.tool.results}}</span>\n </div>\n } } } @if (message().done) {\n <div class=\"text-xs opacity-50 mt-2\">[done]</div>\n } }\n </div>\n</div>\n}\n" }]
|
|
2204
2204
|
}], ctorParameters: null, propDecorators: null }) });
|
|
2205
2205
|
|
|
2206
|
+
const isSafari = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
|
2206
2207
|
class ConversationContent {
|
|
2207
2208
|
messages = input.required(...(ngDevMode ? [{ debugName: "messages" }] : []));
|
|
2208
|
-
scrollArea = viewChild('scrollArea'
|
|
2209
|
+
scrollArea = viewChild.required('scrollArea');
|
|
2210
|
+
// private messageItems = viewChild.required<QueryList<ElementRef<HTMLElement>>>('messageItem');
|
|
2211
|
+
// private messageItems = viewChildren<ElementRef<HTMLElement>>('messageItem');
|
|
2212
|
+
messageItems = viewChildren('messageItem', ...(ngDevMode ? [{ debugName: "messageItems", read: (ElementRef) }] : [{ read: (ElementRef) }]));
|
|
2213
|
+
rafId = null;
|
|
2214
|
+
firstPaint = true;
|
|
2209
2215
|
shouldStick = signal(true, ...(ngDevMode ? [{ debugName: "shouldStick" }] : []));
|
|
2210
2216
|
streaming = input.required(...(ngDevMode ? [{ debugName: "streaming" }] : []));
|
|
2217
|
+
direction = input('bottom-to-top', ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
2218
|
+
shouldScroll = false;
|
|
2219
|
+
constructor() {
|
|
2220
|
+
// React whenever the list of message nodes changes
|
|
2221
|
+
// React when message nodes change (e.g., new message rendered)
|
|
2222
|
+
// effect(() => {
|
|
2223
|
+
// const items = this.messageItems();
|
|
2224
|
+
// if (!items.length) return;
|
|
2225
|
+
// // Find the latest message data & its element
|
|
2226
|
+
// const list = this.messages();
|
|
2227
|
+
// const lastMsg = list[list.length - 1];
|
|
2228
|
+
// const lastEl = items[items.length - 1].nativeElement;
|
|
2229
|
+
// console.log(lastMsg.role);
|
|
2230
|
+
// console.log(this.isUser(lastMsg));
|
|
2231
|
+
// if (!lastMsg || !this.isUser(lastMsg)) return;
|
|
2232
|
+
// console.log(lastEl);
|
|
2233
|
+
// this.scheduleScrollUserMessageToTop(lastEl);
|
|
2234
|
+
// });
|
|
2235
|
+
}
|
|
2236
|
+
ngOnChanges(changes) {
|
|
2237
|
+
if (changes['messages']) {
|
|
2238
|
+
// console.log(changes['messages']);
|
|
2239
|
+
this.shouldScroll = true;
|
|
2240
|
+
// queueMicrotask(() => this.scrollUserMessageToTop());
|
|
2241
|
+
}
|
|
2242
|
+
}
|
|
2243
|
+
ngAfterViewChecked() {
|
|
2244
|
+
if (this.shouldScroll) {
|
|
2245
|
+
requestAnimationFrame(() => this.scrollToBottom('smooth'));
|
|
2246
|
+
this.shouldScroll = false;
|
|
2247
|
+
}
|
|
2248
|
+
}
|
|
2211
2249
|
ngAfterViewInit() {
|
|
2212
|
-
const el = this.scrollArea()
|
|
2250
|
+
const el = this.scrollArea().nativeElement;
|
|
2213
2251
|
if (!el)
|
|
2214
2252
|
return;
|
|
2215
2253
|
el.addEventListener('scroll', () => {
|
|
2254
|
+
console.log(22);
|
|
2216
2255
|
const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 20;
|
|
2217
2256
|
this.shouldStick.set(atBottom);
|
|
2218
2257
|
});
|
|
@@ -2221,16 +2260,56 @@ class ConversationContent {
|
|
|
2221
2260
|
const el = this.scrollArea()?.nativeElement;
|
|
2222
2261
|
if (!el)
|
|
2223
2262
|
return;
|
|
2263
|
+
el.lastElementChild?.scrollIntoView({ behavior, block: 'start' });
|
|
2224
2264
|
el.scrollTo({ top: el.scrollHeight, behavior });
|
|
2225
|
-
|
|
2265
|
+
}
|
|
2266
|
+
scrollUserMessageToTop() {
|
|
2267
|
+
const items = this.messageItems();
|
|
2268
|
+
if (!items.length)
|
|
2269
|
+
return;
|
|
2270
|
+
// Find the latest message data & its element
|
|
2271
|
+
const list = this.messages();
|
|
2272
|
+
const lastMsg = list[list.length - 1];
|
|
2273
|
+
const lastEl = items[items.length - 1].nativeElement;
|
|
2274
|
+
console.log(lastMsg.role);
|
|
2275
|
+
console.log(this.isUser(lastMsg));
|
|
2276
|
+
if (!lastMsg || !this.isUser(lastMsg))
|
|
2277
|
+
return;
|
|
2278
|
+
if (this.isUser(lastMsg)) {
|
|
2279
|
+
lastEl.scrollIntoView({ block: 'start', behavior: 'smooth' });
|
|
2280
|
+
}
|
|
2281
|
+
}
|
|
2282
|
+
// Define your “user” test once; adjust to your schema
|
|
2283
|
+
isUser(m) {
|
|
2284
|
+
return m.role === 'user';
|
|
2285
|
+
}
|
|
2286
|
+
scheduleScrollUserMessageToTop(targetEl) {
|
|
2287
|
+
if (this.rafId != null)
|
|
2288
|
+
cancelAnimationFrame(this.rafId);
|
|
2289
|
+
this.rafId = requestAnimationFrame(() => {
|
|
2290
|
+
this.rafId = null;
|
|
2291
|
+
const scroller = this.scrollArea().nativeElement;
|
|
2292
|
+
if (!scroller || !targetEl.isConnected)
|
|
2293
|
+
return;
|
|
2294
|
+
// Position the target at the top of the visible area (with a small cushion)
|
|
2295
|
+
const pad = 8;
|
|
2296
|
+
const cRect = scroller.getBoundingClientRect();
|
|
2297
|
+
const tRect = targetEl.getBoundingClientRect();
|
|
2298
|
+
const nextTop = Math.max(0, Math.floor(scroller.scrollTop + (tRect.top - cRect.top) - pad));
|
|
2299
|
+
scroller.scrollTo({
|
|
2300
|
+
top: nextTop,
|
|
2301
|
+
behavior: this.firstPaint ? 'auto' : 'smooth',
|
|
2302
|
+
});
|
|
2303
|
+
this.firstPaint = false;
|
|
2304
|
+
});
|
|
2226
2305
|
}
|
|
2227
2306
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConversationContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2228
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ConversationContent, isStandalone: true, selector: "rolatech-conversation-content", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, streaming: { classPropertyName: "streaming", publicName: "streaming", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "block h-full min-h-0" }, viewQueries: [{ propertyName: "scrollArea", first: true, predicate: ["scrollArea"], descendants: true, isSignal: true }], ngImport: i0, template: "<div
|
|
2307
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ConversationContent, isStandalone: true, selector: "rolatech-conversation-content", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, streaming: { classPropertyName: "streaming", publicName: "streaming", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block h-full min-h-0" }, viewQueries: [{ propertyName: "scrollArea", first: true, predicate: ["scrollArea"], descendants: true, isSignal: true }, { propertyName: "messageItems", predicate: ["messageItem"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"h-full min-h-0 overflow-y-auto px-4\">\n <div #scrollArea class=\"w-full md:max-w-[768px] xl:max-w-[1024px] 2xl:max-w-[1024px] mx-auto [overflow-anchor:none]\">\n @for (m of messages(); track m.id) {\n <rolatech-conversation-message #messageItem [message]=\"m\" class=\"mb-3\" />\n } @if (streaming()) {\n <div class=\"flex items-center gap-2 text-sm opacity-80\">\n <span class=\"inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin\"></span>\n <span>Streaming\u2026</span>\n </div>\n }\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ConversationMessage, selector: "rolatech-conversation-message", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2229
2308
|
}
|
|
2230
2309
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConversationContent, decorators: [{
|
|
2231
2310
|
type: Component,
|
|
2232
|
-
args: [{ selector: 'rolatech-conversation-content', imports: [CommonModule, ConversationMessage], host: { class: 'block h-full min-h-0' }, template: "<div
|
|
2233
|
-
}] });
|
|
2311
|
+
args: [{ selector: 'rolatech-conversation-content', imports: [CommonModule, ConversationMessage], host: { class: 'block h-full min-h-0' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"h-full min-h-0 overflow-y-auto px-4\">\n <div #scrollArea class=\"w-full md:max-w-[768px] xl:max-w-[1024px] 2xl:max-w-[1024px] mx-auto [overflow-anchor:none]\">\n @for (m of messages(); track m.id) {\n <rolatech-conversation-message #messageItem [message]=\"m\" class=\"mb-3\" />\n } @if (streaming()) {\n <div class=\"flex items-center gap-2 text-sm opacity-80\">\n <span class=\"inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin\"></span>\n <span>Streaming\u2026</span>\n </div>\n }\n </div>\n</div>\n" }]
|
|
2312
|
+
}], ctorParameters: () => [] });
|
|
2234
2313
|
|
|
2235
2314
|
class ConversationHeader {
|
|
2236
2315
|
status = input("u", ...(ngDevMode ? [{ debugName: "status" }] : []));
|
|
@@ -2277,11 +2356,11 @@ class ConversationInput {
|
|
|
2277
2356
|
el.style.height = Math.min(el.scrollHeight, 220) + 'px';
|
|
2278
2357
|
}
|
|
2279
2358
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConversationInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2280
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.4", type: ConversationInput, isStandalone: true, selector: "rolatech-conversation-input", outputs: { send: "send" }, viewQueries: [{ propertyName: "ta", first: true, predicate: ["ta"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"
|
|
2359
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.4", type: ConversationInput, isStandalone: true, selector: "rolatech-conversation-input", outputs: { send: "send" }, viewQueries: [{ propertyName: "ta", first: true, predicate: ["ta"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"px-3 py-3 md:px-0 w-full md:max-w-[768px] xl:max-w-[1024px] 2xl:max-w-[1024px] mx-auto\">\n <div class=\"flex rounded-2xl p-1 dark:bg-[--rt-raised-background] border border-black border-opacity-20\">\n <textarea\n #ta\n rows=\"1\"\n class=\"w-full border border-transparent appearance-none rounded p-2 py-2.5 resize-none outline-none dark:bg-[--rt-raised-background]\"\n placeholder=\"Ask about properties...\"\n (keydown)=\"onKeydown($event)\"\n (compositionstart)=\"onCompositionStart()\"\n (compositionend)=\"onCompositionEnd()\"\n (input)=\"autoResize()\"\n ></textarea>\n <button\n matIconButton\n (click)=\"emitSend()\"\n [disabled]=\"!ta.value.trim()\"\n [ngClass]=\"!ta.value.trim() ? '' : '!bg-[--rt-brand-color] !text-[--rt-text-primary-inverse]'\"\n >\n <mat-icon>arrow_upward</mat-icon>\n </button>\n </div>\n <!-- <div\n class=\"text-token-text-secondary relative mt-auto flex min-h-8 w-full items-center justify-center p-2 text-center text-xs md:px-[60px]\"\n >\n Primecasa Assistant can make mistakes. Check important info.\n </div> -->\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
2281
2360
|
}
|
|
2282
2361
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConversationInput, decorators: [{
|
|
2283
2362
|
type: Component,
|
|
2284
|
-
args: [{ selector: 'rolatech-conversation-input', imports: [CommonModule, MatButtonModule, MatIcon], template: "<div class=\"
|
|
2363
|
+
args: [{ selector: 'rolatech-conversation-input', imports: [CommonModule, MatButtonModule, MatIcon], template: "<div class=\"px-3 py-3 md:px-0 w-full md:max-w-[768px] xl:max-w-[1024px] 2xl:max-w-[1024px] mx-auto\">\n <div class=\"flex rounded-2xl p-1 dark:bg-[--rt-raised-background] border border-black border-opacity-20\">\n <textarea\n #ta\n rows=\"1\"\n class=\"w-full border border-transparent appearance-none rounded p-2 py-2.5 resize-none outline-none dark:bg-[--rt-raised-background]\"\n placeholder=\"Ask about properties...\"\n (keydown)=\"onKeydown($event)\"\n (compositionstart)=\"onCompositionStart()\"\n (compositionend)=\"onCompositionEnd()\"\n (input)=\"autoResize()\"\n ></textarea>\n <button\n matIconButton\n (click)=\"emitSend()\"\n [disabled]=\"!ta.value.trim()\"\n [ngClass]=\"!ta.value.trim() ? '' : '!bg-[--rt-brand-color] !text-[--rt-text-primary-inverse]'\"\n >\n <mat-icon>arrow_upward</mat-icon>\n </button>\n </div>\n <!-- <div\n class=\"text-token-text-secondary relative mt-auto flex min-h-8 w-full items-center justify-center p-2 text-center text-xs md:px-[60px]\"\n >\n Primecasa Assistant can make mistakes. Check important info.\n </div> -->\n</div>\n" }]
|
|
2285
2364
|
}] });
|
|
2286
2365
|
|
|
2287
2366
|
/**
|