@rolatech/angular-components 20.1.6-beta.0 → 20.1.6-beta.2
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, viewChildren } 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, Pipe, 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';
|
|
@@ -70,6 +70,7 @@ import { MatTreeModule } from '@angular/material/tree';
|
|
|
70
70
|
import * as i2$3 from '@rolatech/angular-services';
|
|
71
71
|
import { LoadingService, DialogService, SnackBarService, TitleService, NavigationService, BackButtonDirective } from '@rolatech/angular-services';
|
|
72
72
|
import { map as map$1 } from 'lodash';
|
|
73
|
+
import { marked } from 'marked';
|
|
73
74
|
|
|
74
75
|
class ChatBox {
|
|
75
76
|
isStreaming = false;
|
|
@@ -2192,15 +2193,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
2192
2193
|
args: [{ selector: 'rolatech-panel-header', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: [".indicator-collapsed{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.indicator-expanded{transform:rotate(180deg)}.content-collapsed{max-height:0;visibility:hidden;transition:max-height 225ms cubic-bezier(.4,0,.2,1)}.content-expanded{max-height:1000px;visibility:visible}\n"] }]
|
|
2193
2194
|
}] });
|
|
2194
2195
|
|
|
2196
|
+
class MarkdownPipe {
|
|
2197
|
+
sanitizer = inject(DomSanitizer);
|
|
2198
|
+
// transform(value: string): SafeHtml {
|
|
2199
|
+
// if (!value) return '';
|
|
2200
|
+
// const html = marked.parse(value, { breaks: true }) as string;
|
|
2201
|
+
// return this.sanitizer.bypassSecurityTrustHtml(html);
|
|
2202
|
+
// }
|
|
2203
|
+
constructor() {
|
|
2204
|
+
marked.setOptions({
|
|
2205
|
+
gfm: true, // ✅ Enables GitHub Flavored Markdown (tables, etc.)
|
|
2206
|
+
breaks: true,
|
|
2207
|
+
});
|
|
2208
|
+
}
|
|
2209
|
+
transform(value) {
|
|
2210
|
+
if (!value)
|
|
2211
|
+
return '';
|
|
2212
|
+
const html = marked.parse(value);
|
|
2213
|
+
return this.sanitizer.bypassSecurityTrustHtml(html);
|
|
2214
|
+
}
|
|
2215
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MarkdownPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2216
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: MarkdownPipe, isStandalone: true, name: "markdown" });
|
|
2217
|
+
}
|
|
2218
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MarkdownPipe, decorators: [{
|
|
2219
|
+
type: Pipe,
|
|
2220
|
+
args: [{
|
|
2221
|
+
name: 'markdown',
|
|
2222
|
+
standalone: true,
|
|
2223
|
+
}]
|
|
2224
|
+
}], ctorParameters: () => [] });
|
|
2225
|
+
|
|
2195
2226
|
class ConversationMessage {
|
|
2196
2227
|
message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
|
|
2197
2228
|
call() { }
|
|
2198
2229
|
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 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)]] });
|
|
2230
|
+
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 <!-- <div class=\"markdown-body\" [innerHTML]=\"seg.text | markdown\"></div> -->\n <article class=\"prose dark:prose-invert max-w-none\" [innerHTML]=\"seg.text | markdown\"></article>\n\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" }, { kind: "pipe", type: MarkdownPipe, name: "markdown" }], deferBlockDependencies: [() => [Promise.resolve().then(function () { return thumbnail_component; }).then(m => m.ThumbnailComponent)]] });
|
|
2200
2231
|
}
|
|
2201
2232
|
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
2233
|
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 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" }]
|
|
2234
|
+
args: [{ selector: 'rolatech-conversation-message', imports: [CommonModule, RouterLink, ThumbnailComponent, ImagePlaceholderComponent, MatButtonModule, MarkdownPipe], 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 <!-- <div class=\"markdown-body\" [innerHTML]=\"seg.text | markdown\"></div> -->\n <article class=\"prose dark:prose-invert max-w-none\" [innerHTML]=\"seg.text | markdown\"></article>\n\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
2235
|
}], ctorParameters: null, propDecorators: null }) });
|
|
2205
2236
|
|
|
2206
2237
|
const isSafari = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|