@dataclouder/ngx-agent-cards 0.0.82 → 0.0.84
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.
- package/fesm2022/dataclouder-ngx-agent-cards.mjs +71 -63
- package/fesm2022/dataclouder-ngx-agent-cards.mjs.map +1 -1
- package/lib/components/dc-agent-card-lists/agent-card-default-ui/agent-card-default-ui.component.d.ts +7 -4
- package/lib/components/dc-agent-card-lists/dc-agent-card-lists.component.d.ts +12 -10
- package/package.json +1 -1
|
@@ -11,7 +11,7 @@ import * as i6 from 'primeng/skeleton';
|
|
|
11
11
|
import { SkeletonModule } from 'primeng/skeleton';
|
|
12
12
|
import * as i6$1 from 'primeng/dialog';
|
|
13
13
|
import { DialogModule } from 'primeng/dialog';
|
|
14
|
-
import * as
|
|
14
|
+
import * as i6$2 from '@dataclouder/ngx-core';
|
|
15
15
|
import { TOAST_ALERTS_TOKEN, PaginationBase, DCFilterBarComponent, QuickTableComponent } from '@dataclouder/ngx-core';
|
|
16
16
|
import { DCMicComponent } from '@dataclouder/ngx-mic';
|
|
17
17
|
import * as i7$2 from 'primeng/progressbar';
|
|
@@ -58,7 +58,7 @@ import { ChipModule } from 'primeng/chip';
|
|
|
58
58
|
import * as i1$3 from '@angular/router';
|
|
59
59
|
import * as i3$2 from 'primeng/paginator';
|
|
60
60
|
import { PaginatorModule } from 'primeng/paginator';
|
|
61
|
-
import * as
|
|
61
|
+
import * as i2$3 from 'primeng/speeddial';
|
|
62
62
|
import { SpeedDialModule } from 'primeng/speeddial';
|
|
63
63
|
|
|
64
64
|
const characterCardStringDataDefinition = `
|
|
@@ -519,7 +519,7 @@ class DCConversationPromptBuilderService {
|
|
|
519
519
|
}
|
|
520
520
|
// For chat conversation i need inital settings.
|
|
521
521
|
buildConversationSettings(agentCard, parseDict = null) {
|
|
522
|
-
const converstionSettings = agentCard
|
|
522
|
+
const converstionSettings = agentCard?.conversationSettings;
|
|
523
523
|
converstionSettings.messages = this.buildConversationMessages(agentCard, parseDict);
|
|
524
524
|
converstionSettings.last_prompt = this.getJailBrakePrompt(agentCard);
|
|
525
525
|
return converstionSettings;
|
|
@@ -1082,6 +1082,7 @@ class ChatMessageComponent {
|
|
|
1082
1082
|
return;
|
|
1083
1083
|
}
|
|
1084
1084
|
console.log(this.chatMessage.multiMessages);
|
|
1085
|
+
this.cdr.markForCheck();
|
|
1085
1086
|
// this is an assistant message
|
|
1086
1087
|
if (this.chatMessage.multiMessages) {
|
|
1087
1088
|
this.generateAndPlayAllAudios(this.chatMessage.multiMessages);
|
|
@@ -1244,11 +1245,11 @@ class ChatMessageComponent {
|
|
|
1244
1245
|
return result;
|
|
1245
1246
|
}
|
|
1246
1247
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ChatMessageComponent, deps: [{ token: AudioService }, { token: CONVERSATION_AI_TOKEN }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1247
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: ChatMessageComponent, isStandalone: true, selector: "dc-chat-message", inputs: { chatMessage: "chatMessage", chatUserSettings: "chatUserSettings" }, ngImport: i0, template: "
|
|
1248
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: ChatMessageComponent, isStandalone: true, selector: "dc-chat-message", inputs: { chatMessage: "chatMessage", chatUserSettings: "chatUserSettings" }, ngImport: i0, template: "@if (chatMessage?.multiMessages) {\n<h5>Multi message</h5>\n<span style=\"line-height: 1.5\" *ngFor=\"let message of chatMessage.multiMessages\">\n <div [ngClass]=\"message.tag\" *ngIf=\"message.transcriptionTimestamps\">\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: message.isLoading, message: message }\"></ng-container>\n <span *ngFor=\"let word of message.transcriptionTimestamps\" [class.highlight]=\"word.highlighted\">\n {{ word.word }}\n </span>\n </div>\n\n <div *ngIf=\"!message.transcriptionTimestamps\">\n <div (click)=\"playMessage(message)\">\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: message.isLoading, message: message }\"></ng-container>\n <span style=\"margin-left: 2px\" [ngClass]=\"message.tag\" [innerHtml]=\"message.text\"> </span>\n </div>\n </div>\n</span>\n}@else {\n\n<span>\n @if (chatMessage.transcriptionTimestamps) {\n <div>\n <span *ngFor=\"let word of chatMessage.transcriptionTimestamps\" [class.highlight]=\"word.highlighted\">\n {{ word.word }}\n </span>\n </div>\n } @else {\n <div>\n <span (click)=\"playMessage(chatMessage)\" [innerHTML]=\"chatMessage.content | simpleMdToHtml\"></span>\n </div>\n }\n</span>\n}\n\n<div class=\"small\" *ngIf=\"chatMessage.translation\">\n <hr class=\"divider\" />\n {{ chatMessage.translation }}\n</div>\n\n<ng-template #iconTemplate let-isLoading=\"isLoading\" let-message=\"message\">\n <i *ngIf=\"isLoading\" (click)=\"playMessage(message)\">\n <dc-icon class=\"spin-animation\" name=\"loading\"></dc-icon>\n </i>\n\n <i *ngIf=\"!isLoading\" (click)=\"playMessage(message)\">\n <dc-icon name=\"play\"></dc-icon>\n </i>\n</ng-template>\n", styles: [":host{display:block}.highlight{background-color:#fff8a7;color:#011630;text-decoration:underline #59a4ff solid 3px}::ng-deep .em{color:#0d5878;font-style:italic}::ng-deep .strong{font-weight:700;color:#515151}::ng-deep .em_strong{font-weight:700;font-style:italic;color:#0d5878}.small{margin-top:8x;font-size:small;line-height:1.6;color:#393744;font-style:italic}.divider{margin:.5rem 40px;border-top:1px solid #ffa77e}.spin-animation{display:inline-block;animation:spin 2s linear infinite;transform-origin:center center;transform-box:fill-box;vertical-align:middle}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconsComponent, selector: "dc-icon", inputs: ["name", "size", "color"] }, { kind: "pipe", type: SimpleMdToHtmlPipe, name: "simpleMdToHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1248
1249
|
}
|
|
1249
1250
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ChatMessageComponent, decorators: [{
|
|
1250
1251
|
type: Component,
|
|
1251
|
-
args: [{ selector: 'dc-chat-message', standalone: true, imports: [CommonModule, IconsComponent, SimpleMdToHtmlPipe], template: "
|
|
1252
|
+
args: [{ selector: 'dc-chat-message', standalone: true, imports: [CommonModule, IconsComponent, SimpleMdToHtmlPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (chatMessage?.multiMessages) {\n<h5>Multi message</h5>\n<span style=\"line-height: 1.5\" *ngFor=\"let message of chatMessage.multiMessages\">\n <div [ngClass]=\"message.tag\" *ngIf=\"message.transcriptionTimestamps\">\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: message.isLoading, message: message }\"></ng-container>\n <span *ngFor=\"let word of message.transcriptionTimestamps\" [class.highlight]=\"word.highlighted\">\n {{ word.word }}\n </span>\n </div>\n\n <div *ngIf=\"!message.transcriptionTimestamps\">\n <div (click)=\"playMessage(message)\">\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: message.isLoading, message: message }\"></ng-container>\n <span style=\"margin-left: 2px\" [ngClass]=\"message.tag\" [innerHtml]=\"message.text\"> </span>\n </div>\n </div>\n</span>\n}@else {\n\n<span>\n @if (chatMessage.transcriptionTimestamps) {\n <div>\n <span *ngFor=\"let word of chatMessage.transcriptionTimestamps\" [class.highlight]=\"word.highlighted\">\n {{ word.word }}\n </span>\n </div>\n } @else {\n <div>\n <span (click)=\"playMessage(chatMessage)\" [innerHTML]=\"chatMessage.content | simpleMdToHtml\"></span>\n </div>\n }\n</span>\n}\n\n<div class=\"small\" *ngIf=\"chatMessage.translation\">\n <hr class=\"divider\" />\n {{ chatMessage.translation }}\n</div>\n\n<ng-template #iconTemplate let-isLoading=\"isLoading\" let-message=\"message\">\n <i *ngIf=\"isLoading\" (click)=\"playMessage(message)\">\n <dc-icon class=\"spin-animation\" name=\"loading\"></dc-icon>\n </i>\n\n <i *ngIf=\"!isLoading\" (click)=\"playMessage(message)\">\n <dc-icon name=\"play\"></dc-icon>\n </i>\n</ng-template>\n", styles: [":host{display:block}.highlight{background-color:#fff8a7;color:#011630;text-decoration:underline #59a4ff solid 3px}::ng-deep .em{color:#0d5878;font-style:italic}::ng-deep .strong{font-weight:700;color:#515151}::ng-deep .em_strong{font-weight:700;font-style:italic;color:#0d5878}.small{margin-top:8x;font-size:small;line-height:1.6;color:#393744;font-style:italic}.divider{margin:.5rem 40px;border-top:1px solid #ffa77e}.spin-animation{display:inline-block;animation:spin 2s linear infinite;transform-origin:center center;transform-box:fill-box;vertical-align:middle}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
1252
1253
|
}], ctorParameters: () => [{ type: AudioService }, { type: AgentCardsAbstractService, decorators: [{
|
|
1253
1254
|
type: Inject,
|
|
1254
1255
|
args: [CONVERSATION_AI_TOKEN]
|
|
@@ -1523,7 +1524,10 @@ class DCChatComponent {
|
|
|
1523
1524
|
this.isInfoVisible = false;
|
|
1524
1525
|
}
|
|
1525
1526
|
async ngOnInit() {
|
|
1526
|
-
|
|
1527
|
+
if (!this.agentCard?.conversationSettings) {
|
|
1528
|
+
throw new Error('Conversation settings are required');
|
|
1529
|
+
}
|
|
1530
|
+
this.defaultVoice = this.getVoice(this.agentCard?.conversationSettings?.voice);
|
|
1527
1531
|
// This method overrides the conversationSettings of the agentCard so message will be there.
|
|
1528
1532
|
this.conversationSettings = this.conversationBuilder.buildConversationSettings(this.agentCard, this.parseDict);
|
|
1529
1533
|
this.agentCard.conversationSettings = this.conversationSettings; // Save a copy here.
|
|
@@ -1872,7 +1876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
|
|
|
1872
1876
|
}], ctorParameters: () => [{ type: AgentCardsAbstractService, decorators: [{
|
|
1873
1877
|
type: Inject,
|
|
1874
1878
|
args: [CONVERSATION_AI_TOKEN]
|
|
1875
|
-
}] }, { type:
|
|
1879
|
+
}] }, { type: i6$2.ToastAlertsAbstractService, decorators: [{
|
|
1876
1880
|
type: Inject,
|
|
1877
1881
|
args: [TOAST_ALERTS_TOKEN]
|
|
1878
1882
|
}] }, { type: DCConversationPromptBuilderService }, { type: i1$2.DialogService }, { type: i0.ChangeDetectorRef }], propDecorators: { chatUserSettings: [{
|
|
@@ -2170,7 +2174,7 @@ class AccountPlatformForm {
|
|
|
2170
2174
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AccountPlatformForm, decorators: [{
|
|
2171
2175
|
type: Component,
|
|
2172
2176
|
args: [{ selector: 'account-platform-form', imports: [ReactiveFormsModule, CardModule, TextareaModule, DropdownModule, ButtonModule, SelectModule, InputTextModule, ChipModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"source-form-card\">\n <p-card header=\"Cuenta\">\n @for (formAccount of formArray.controls; track formAccount) {\n <form [formGroup]=\"$any(formAccount)\">\n <div class=\"form-field\">\n <label class=\"block\">Platform</label>\n <p-dropdown [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-dropdown>\n </div>\n\n <div class=\"form-field\">\n <label for=\"name\" class=\"block\">Username</label>\n <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n </div>\n\n <div class=\"form-field\">\n <label class=\"block\">Email</label>\n <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n </div>\n </form>\n }\n </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"] }]
|
|
2173
|
-
}], ctorParameters: () => [{ type: i1$3.ActivatedRoute }, { type: i1$1.FormBuilder }, { type: i1$3.Router }, { type:
|
|
2177
|
+
}], ctorParameters: () => [{ type: i1$3.ActivatedRoute }, { type: i1$1.FormBuilder }, { type: i1$3.Router }, { type: i6$2.ToastAlertsAbstractService, decorators: [{
|
|
2174
2178
|
type: Inject,
|
|
2175
2179
|
args: [TOAST_ALERTS_TOKEN]
|
|
2176
2180
|
}] }], propDecorators: { formArray: [{
|
|
@@ -2623,7 +2627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
|
|
|
2623
2627
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i2$2.MultiImagesStorageService }, { type: AgentCardsAbstractService, decorators: [{
|
|
2624
2628
|
type: Inject,
|
|
2625
2629
|
args: [CONVERSATION_AI_TOKEN]
|
|
2626
|
-
}] }, { type: i0.ChangeDetectorRef }, { type: i1$3.Router }, { type: i1$3.ActivatedRoute }, { type: i1$2.DialogService }, { type: DCConversationPromptBuilderService }, { type:
|
|
2630
|
+
}] }, { type: i0.ChangeDetectorRef }, { type: i1$3.Router }, { type: i1$3.ActivatedRoute }, { type: i1$2.DialogService }, { type: DCConversationPromptBuilderService }, { type: i6$2.ToastAlertsAbstractService, decorators: [{
|
|
2627
2631
|
type: Optional
|
|
2628
2632
|
}, {
|
|
2629
2633
|
type: Inject,
|
|
@@ -2646,9 +2650,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
|
|
|
2646
2650
|
|
|
2647
2651
|
class DCConversationCardUIComponent {
|
|
2648
2652
|
constructor() {
|
|
2649
|
-
this.
|
|
2650
|
-
|
|
2651
|
-
|
|
2653
|
+
this.speedDialModel = [
|
|
2654
|
+
{ label: 'Edit', icon: 'pi pi-pencil', title: 'edit', severity: 'primary', command: () => this.onEdit() },
|
|
2655
|
+
{ label: 'Delete', icon: 'pi pi-trash', title: 'delete', severity: 'danger', command: () => this.onDelete() },
|
|
2656
|
+
{ label: 'Select', icon: 'pi pi-check', title: 'select', severity: 'success', command: () => this.onDetails() },
|
|
2657
|
+
];
|
|
2658
|
+
this.onCardAction = new EventEmitter();
|
|
2652
2659
|
}
|
|
2653
2660
|
ngOnInit() {
|
|
2654
2661
|
const name = this.card.characterCard.data.name;
|
|
@@ -2656,27 +2663,23 @@ class DCConversationCardUIComponent {
|
|
|
2656
2663
|
this.card.characterCard.data.description = description.replace(/{{char}}/g, name);
|
|
2657
2664
|
}
|
|
2658
2665
|
onDetails() {
|
|
2659
|
-
this.
|
|
2666
|
+
this.onCardAction.emit({ event: 'details', card: this.card });
|
|
2660
2667
|
}
|
|
2661
2668
|
onEdit() {
|
|
2662
|
-
this.
|
|
2669
|
+
this.onCardAction.emit({ event: 'edit', card: this.card });
|
|
2663
2670
|
}
|
|
2664
2671
|
onDelete() {
|
|
2665
|
-
this.
|
|
2672
|
+
this.onCardAction.emit({ event: 'delete', card: this.card });
|
|
2666
2673
|
}
|
|
2667
2674
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCConversationCardUIComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2668
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: DCConversationCardUIComponent, isStandalone: true, selector: "dc-agent-card-default-ui", inputs: { card: "card" }, outputs: {
|
|
2675
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: DCConversationCardUIComponent, isStandalone: true, selector: "dc-agent-card-default-ui", inputs: { card: "card" }, outputs: { onCardAction: "onCardAction" }, ngImport: i0, template: "<p-card class=\"card-image\">\n <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n <p-speeddial\n [model]=\"speedDialModel\"\n [radius]=\"70\"\n type=\"quarter-circle\"\n direction=\"down-left\"\n [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n </div>\n\n <img [src]=\"card?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n <div (click)=\"onDetails()\" class=\"content\">\n <h2 class=\"title-text\">{{ card.title }}</h2>\n\n <h5 class=\"title\">\n <span [innerHTML]=\"card.characterCard?.data.description | truncate : 100\"></span>\n </h5>\n\n <p-button\n (click)=\"onDetails()\"\n [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n icon=\"pi pi-comment\"\n [rounded]=\"true\"\n severity=\"info\"\n [outlined]=\"true\"\n [raised]=\"true\" />\n </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1.5rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: PopoverModule }, { kind: "pipe", type: TruncatePipe, name: "truncate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i7$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$3.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i3$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2669
2676
|
}
|
|
2670
2677
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCConversationCardUIComponent, decorators: [{
|
|
2671
2678
|
type: Component,
|
|
2672
|
-
args: [{ selector: 'dc-agent-card-default-ui', imports: [PopoverModule, TruncatePipe, ButtonModule, SpeedDialModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<
|
|
2679
|
+
args: [{ selector: 'dc-agent-card-default-ui', imports: [PopoverModule, TruncatePipe, ButtonModule, SpeedDialModule, CardModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-card class=\"card-image\">\n <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n <p-speeddial\n [model]=\"speedDialModel\"\n [radius]=\"70\"\n type=\"quarter-circle\"\n direction=\"down-left\"\n [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n </div>\n\n <img [src]=\"card?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n <div (click)=\"onDetails()\" class=\"content\">\n <h2 class=\"title-text\">{{ card.title }}</h2>\n\n <h5 class=\"title\">\n <span [innerHTML]=\"card.characterCard?.data.description | truncate : 100\"></span>\n </h5>\n\n <p-button\n (click)=\"onDetails()\"\n [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n icon=\"pi pi-comment\"\n [rounded]=\"true\"\n severity=\"info\"\n [outlined]=\"true\"\n [raised]=\"true\" />\n </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1.5rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"] }]
|
|
2673
2680
|
}], propDecorators: { card: [{
|
|
2674
2681
|
type: Input
|
|
2675
|
-
}],
|
|
2676
|
-
type: Output
|
|
2677
|
-
}], onEditCard: [{
|
|
2678
|
-
type: Output
|
|
2679
|
-
}], onDeleteCard: [{
|
|
2682
|
+
}], onCardAction: [{
|
|
2680
2683
|
type: Output
|
|
2681
2684
|
}] } });
|
|
2682
2685
|
|
|
@@ -2688,11 +2691,6 @@ const DefaultColumns = [
|
|
|
2688
2691
|
{ field: 'characterCard.data.name', header: 'Character Name', type: 'text' },
|
|
2689
2692
|
{ field: 'title', header: 'Title', type: 'text' },
|
|
2690
2693
|
];
|
|
2691
|
-
const DefaultActions = [
|
|
2692
|
-
{ label: 'Edit', icon: 'pi pi-pencil', title: 'edit', severity: 'primary' },
|
|
2693
|
-
{ label: 'Delete', icon: 'pi pi-trash', title: 'delete', severity: 'danger' },
|
|
2694
|
-
{ label: 'Select', icon: 'pi pi-check', title: 'select', severity: 'success' },
|
|
2695
|
-
];
|
|
2696
2694
|
class AgentCardListComponent extends PaginationBase {
|
|
2697
2695
|
constructor(agentCardService, toastService, route, router, cdr) {
|
|
2698
2696
|
super(route, router);
|
|
@@ -2701,15 +2699,6 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2701
2699
|
this.cdr = cdr;
|
|
2702
2700
|
this.viewMode = 'cards';
|
|
2703
2701
|
this.gridLayout = true;
|
|
2704
|
-
// @deprecated use onAction
|
|
2705
|
-
this.goToDetailsEvent = new EventEmitter();
|
|
2706
|
-
// @deprecated use onAction
|
|
2707
|
-
this.goToEditEvent = new EventEmitter();
|
|
2708
|
-
// @deprecated use onAction
|
|
2709
|
-
this.deleteEvent = new EventEmitter();
|
|
2710
|
-
// @deprecated use onAction
|
|
2711
|
-
this.onSelect = new EventEmitter();
|
|
2712
|
-
this.actions = DefaultActions;
|
|
2713
2702
|
this.agentCards = [];
|
|
2714
2703
|
this.cardEventSubs = [];
|
|
2715
2704
|
this.cardComponent = null;
|
|
@@ -2729,12 +2718,8 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2729
2718
|
subscribeToCardEvents() {
|
|
2730
2719
|
this.outlets.forEach((outlet) => {
|
|
2731
2720
|
const instance = outlet.componentInstance;
|
|
2732
|
-
this.cardEventSubs.push(instance.
|
|
2733
|
-
this.
|
|
2734
|
-
}), instance.onEditCard.subscribe((id) => {
|
|
2735
|
-
this.goToEdit(id);
|
|
2736
|
-
}), instance.onDeleteCard.subscribe((id) => {
|
|
2737
|
-
this.deleteCard(id);
|
|
2721
|
+
this.cardEventSubs.push(instance.onCardAction.subscribe((action) => {
|
|
2722
|
+
this.onCardAction({ action: action.event, item: action.card });
|
|
2738
2723
|
}));
|
|
2739
2724
|
});
|
|
2740
2725
|
}
|
|
@@ -2768,23 +2753,34 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2768
2753
|
async getAllConversationCards() {
|
|
2769
2754
|
return this.agentCardService.getAllConversationCards();
|
|
2770
2755
|
}
|
|
2771
|
-
async goToDetails(
|
|
2772
|
-
this.
|
|
2773
|
-
}
|
|
2774
|
-
async goToEdit(id = null) {
|
|
2775
|
-
console.log('goToEdit', id);
|
|
2776
|
-
this.goToEditEvent.emit(id);
|
|
2756
|
+
async goToDetails(action) {
|
|
2757
|
+
this.onAction.emit({ action: 'details', item: action.item });
|
|
2777
2758
|
}
|
|
2778
2759
|
async deleteCard(id) {
|
|
2779
2760
|
await this.agentCardService.deleteConversationCard(id);
|
|
2780
2761
|
this.agentCards = this.agentCards.filter((card) => card._id !== id);
|
|
2781
|
-
this.deleteEvent.emit(id);
|
|
2782
2762
|
this.toastService.success({ title: 'Conversation card deleted', subtitle: 'The conversation card has been deleted' });
|
|
2763
|
+
this.cdr.detectChanges();
|
|
2783
2764
|
}
|
|
2784
2765
|
// Implement the abstract method from PaginationBase
|
|
2785
2766
|
async loadData() {
|
|
2786
2767
|
return this.loadConversationCards();
|
|
2787
2768
|
}
|
|
2769
|
+
doFilterBarAction({ action, item }) {
|
|
2770
|
+
// console.log('doAction', { action, item });
|
|
2771
|
+
if (action === 'new') {
|
|
2772
|
+
this.onAction.emit({ action: 'new' });
|
|
2773
|
+
}
|
|
2774
|
+
else if (action === 'edit') {
|
|
2775
|
+
this.onAction.emit({ action: 'edit', item: item?.['id'] });
|
|
2776
|
+
}
|
|
2777
|
+
else if (action === 'delete') {
|
|
2778
|
+
this.onAction.emit({ action: 'delete', item: item?.['id'] });
|
|
2779
|
+
}
|
|
2780
|
+
else if (action === 'changeView') {
|
|
2781
|
+
this.viewMode = this.viewMode === 'cards' ? 'table' : 'cards';
|
|
2782
|
+
}
|
|
2783
|
+
}
|
|
2788
2784
|
async search(text) {
|
|
2789
2785
|
console.log('search', text);
|
|
2790
2786
|
const filters = {
|
|
@@ -2807,8 +2803,19 @@ class AgentCardListComponent extends PaginationBase {
|
|
|
2807
2803
|
this.cdr.detectChanges();
|
|
2808
2804
|
this.subscribeDinamicInstantToEvents();
|
|
2809
2805
|
}
|
|
2806
|
+
onCardAction(actionEvent) {
|
|
2807
|
+
if (actionEvent.action == 'delete') {
|
|
2808
|
+
this.deleteCard(actionEvent.item._id);
|
|
2809
|
+
}
|
|
2810
|
+
else if (actionEvent.action == 'edit') {
|
|
2811
|
+
this.doAction(actionEvent); // handle by father
|
|
2812
|
+
}
|
|
2813
|
+
else if (actionEvent.action == 'details') {
|
|
2814
|
+
this.doAction(actionEvent); // handle by father.
|
|
2815
|
+
}
|
|
2816
|
+
}
|
|
2810
2817
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AgentCardListComponent, deps: [{ token: CONVERSATION_AI_TOKEN }, { token: TOAST_ALERTS_TOKEN }, { token: i1$3.ActivatedRoute }, { token: i1$3.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2811
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AgentCardListComponent, isStandalone: true, selector: "dc-agent-card-lists", inputs: { viewMode: "viewMode", customCardComponent: "customCardComponent", gridLayout: "gridLayout", getCustomButtons: "getCustomButtons"
|
|
2818
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AgentCardListComponent, isStandalone: true, selector: "dc-agent-card-lists", inputs: { viewMode: "viewMode", customCardComponent: "customCardComponent", gridLayout: "gridLayout", getCustomButtons: "getCustomButtons" }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [isAdmin]=\"true\" (onAction)=\"doFilterBarAction($event)\" (onSearch)=\"search($event)\" (onFilterChange)=\"filterChange($event)\"></dc-filter-bar>\n\n@if(viewMode === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"agentCards\" [actions]=\"actions\" (onAction)=\"onCardAction($event)\"></app-quick-table>\n\n}@else{\n\n<div class=\"conversation-card-lists\">\n @if(!isLoading) {\n <div [ngClass]=\"{ 'cards-container': gridLayout }\">\n @for (card of agentCards; track card) {\n <div style=\"position: relative\">\n <ng-container #outlet=\"ngComponentOutlet\" [ngComponentOutlet]=\"cardComponent\" [ngComponentOutletInputs]=\"{ card: card }\"> </ng-container>\n </div>\n }\n </div>\n }\n</div>\n\n@if(isLoading) {\n<div>\n <p-skeleton styleClass=\"mb-2\" />\n <p-skeleton width=\"10rem\" styleClass=\"mb-2\" />\n <p-skeleton width=\"5rem\" styleClass=\"mb-2\" />\n <p-skeleton height=\"2rem\" styleClass=\"mb-2\" />\n <p-skeleton width=\"10rem\" height=\"4rem\" />\n</div>\n} @if(agentCards.length === 0) {\n<div>\n <p>No conversations found or no connection with server</p>\n</div>\n} }\n\n<p-paginator\n currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n [showCurrentPageReport]=\"true\"\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"paginatorFirst\"\n [rows]=\"paginatorRows\"\n [totalRecords]=\"totalRecords\"\n [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:block;height:100%}.options-icon{cursor:pointer;position:absolute;top:2px;right:3px;font-size:1.2rem;color:#dde9e9;background-color:#4f486281;border-radius:50%;padding:5px;z-index:1000}.conversation-card-lists{padding:1.5rem;width:100%;height:100%;display:flex;flex-direction:column}.conversation-card-lists .cards-container{display:flex;flex-wrap:wrap;gap:2rem;width:100%;justify-content:center;flex:1;overflow-y:auto;min-height:0}.conversation-card-lists .cards-container>div{flex:0 0 240px}.conversation-card-lists .dc-card{position:relative;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:.5rem;transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;gap:2px}.conversation-card-lists .dc-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.conversation-card-lists .dc-card .dc-card-header{position:absolute;top:10px;left:5px;border-radius:5px;padding:5px}.conversation-card-lists .dc-card .dc-card-header:before{content:\"\";position:absolute;inset:0;background-color:#4d30db81;filter:blur(2px);border-radius:5px;z-index:0}.conversation-card-lists .dc-card .dc-card-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#ece7e7;position:relative;z-index:1}.conversation-card-lists .dc-card .dc-card-content{flex:1}.conversation-card-lists .dc-card .dc-card-content p{margin:0;color:#666;line-height:1.5}.conversation-card-lists .dc-card button{padding:.5rem 1rem;border:none;border-radius:4px;background-color:#007bff;color:#fff;cursor:pointer;font-weight:500;transition:background-color .2s ease}.conversation-card-lists .dc-card button:hover{background-color:#0056b3}.conversation-card-lists .dc-card button:active{transform:translateY(1px)}:host{display:flex;flex-direction:column;height:100%}p-paginator{margin-top:1rem;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i3$2.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["isAdmin", "customFilters", "items"], outputs: ["onAction", "onChangeSort", "onNew", "onSearch", "onFilterChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i6.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["onlyView", "columns", "tableData", "actions"], outputs: ["onAction"] }] }); }
|
|
2812
2819
|
}
|
|
2813
2820
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AgentCardListComponent, decorators: [{
|
|
2814
2821
|
type: Component,
|
|
@@ -2822,11 +2829,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
|
|
|
2822
2829
|
SkeletonModule,
|
|
2823
2830
|
SpeedDialModule,
|
|
2824
2831
|
QuickTableComponent,
|
|
2825
|
-
], standalone: true, template: "<dc-filter-bar [isAdmin]=\"true\" (
|
|
2832
|
+
], standalone: true, template: "<dc-filter-bar [isAdmin]=\"true\" (onAction)=\"doFilterBarAction($event)\" (onSearch)=\"search($event)\" (onFilterChange)=\"filterChange($event)\"></dc-filter-bar>\n\n@if(viewMode === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"agentCards\" [actions]=\"actions\" (onAction)=\"onCardAction($event)\"></app-quick-table>\n\n}@else{\n\n<div class=\"conversation-card-lists\">\n @if(!isLoading) {\n <div [ngClass]=\"{ 'cards-container': gridLayout }\">\n @for (card of agentCards; track card) {\n <div style=\"position: relative\">\n <ng-container #outlet=\"ngComponentOutlet\" [ngComponentOutlet]=\"cardComponent\" [ngComponentOutletInputs]=\"{ card: card }\"> </ng-container>\n </div>\n }\n </div>\n }\n</div>\n\n@if(isLoading) {\n<div>\n <p-skeleton styleClass=\"mb-2\" />\n <p-skeleton width=\"10rem\" styleClass=\"mb-2\" />\n <p-skeleton width=\"5rem\" styleClass=\"mb-2\" />\n <p-skeleton height=\"2rem\" styleClass=\"mb-2\" />\n <p-skeleton width=\"10rem\" height=\"4rem\" />\n</div>\n} @if(agentCards.length === 0) {\n<div>\n <p>No conversations found or no connection with server</p>\n</div>\n} }\n\n<p-paginator\n currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n [showCurrentPageReport]=\"true\"\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"paginatorFirst\"\n [rows]=\"paginatorRows\"\n [totalRecords]=\"totalRecords\"\n [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:block;height:100%}.options-icon{cursor:pointer;position:absolute;top:2px;right:3px;font-size:1.2rem;color:#dde9e9;background-color:#4f486281;border-radius:50%;padding:5px;z-index:1000}.conversation-card-lists{padding:1.5rem;width:100%;height:100%;display:flex;flex-direction:column}.conversation-card-lists .cards-container{display:flex;flex-wrap:wrap;gap:2rem;width:100%;justify-content:center;flex:1;overflow-y:auto;min-height:0}.conversation-card-lists .cards-container>div{flex:0 0 240px}.conversation-card-lists .dc-card{position:relative;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:.5rem;transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;gap:2px}.conversation-card-lists .dc-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.conversation-card-lists .dc-card .dc-card-header{position:absolute;top:10px;left:5px;border-radius:5px;padding:5px}.conversation-card-lists .dc-card .dc-card-header:before{content:\"\";position:absolute;inset:0;background-color:#4d30db81;filter:blur(2px);border-radius:5px;z-index:0}.conversation-card-lists .dc-card .dc-card-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#ece7e7;position:relative;z-index:1}.conversation-card-lists .dc-card .dc-card-content{flex:1}.conversation-card-lists .dc-card .dc-card-content p{margin:0;color:#666;line-height:1.5}.conversation-card-lists .dc-card button{padding:.5rem 1rem;border:none;border-radius:4px;background-color:#007bff;color:#fff;cursor:pointer;font-weight:500;transition:background-color .2s ease}.conversation-card-lists .dc-card button:hover{background-color:#0056b3}.conversation-card-lists .dc-card button:active{transform:translateY(1px)}:host{display:flex;flex-direction:column;height:100%}p-paginator{margin-top:1rem;flex-shrink:0}\n"] }]
|
|
2826
2833
|
}], ctorParameters: () => [{ type: AgentCardsAbstractService, decorators: [{
|
|
2827
2834
|
type: Inject,
|
|
2828
2835
|
args: [CONVERSATION_AI_TOKEN]
|
|
2829
|
-
}] }, { type:
|
|
2836
|
+
}] }, { type: i6$2.ToastAlertsAbstractService, decorators: [{
|
|
2830
2837
|
type: Inject,
|
|
2831
2838
|
args: [TOAST_ALERTS_TOKEN]
|
|
2832
2839
|
}] }, { type: i1$3.ActivatedRoute }, { type: i1$3.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { viewMode: [{
|
|
@@ -2837,21 +2844,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
|
|
|
2837
2844
|
type: Input
|
|
2838
2845
|
}], getCustomButtons: [{
|
|
2839
2846
|
type: Input
|
|
2840
|
-
}], goToDetailsEvent: [{
|
|
2841
|
-
type: Output
|
|
2842
|
-
}], goToEditEvent: [{
|
|
2843
|
-
type: Output
|
|
2844
|
-
}], deleteEvent: [{
|
|
2845
|
-
type: Output
|
|
2846
|
-
}], onSelect: [{
|
|
2847
|
-
type: Output
|
|
2848
2847
|
}], outlets: [{
|
|
2849
2848
|
type: ViewChildren,
|
|
2850
2849
|
args: ['outlet']
|
|
2851
|
-
}], actions: [{
|
|
2852
|
-
type: Input
|
|
2853
2850
|
}] } });
|
|
2854
2851
|
|
|
2852
|
+
const DefaultConversationSettings = {
|
|
2853
|
+
textEngine: TextEngines.SimpleText,
|
|
2854
|
+
conversationType: ConversationType.Default,
|
|
2855
|
+
tts: { voice: '', secondaryVoice: '', speed: '1', speedRate: 1 },
|
|
2856
|
+
autoStart: false, // usally start with characterCard.first_mes but if not set also can start with LLM response.
|
|
2857
|
+
messages: [], // Esto es calculado por el prompt builder tomando el agente.
|
|
2858
|
+
};
|
|
2855
2859
|
class DcAgentCardDetailsComponent {
|
|
2856
2860
|
constructor(agentCardService, route, cdr) {
|
|
2857
2861
|
this.agentCardService = agentCardService;
|
|
@@ -2868,11 +2872,15 @@ class DcAgentCardDetailsComponent {
|
|
|
2868
2872
|
console.log(this.conversationCardId);
|
|
2869
2873
|
}
|
|
2870
2874
|
this.conversation = await this.agentCardService.findConversationCardByID(this.conversationCardId);
|
|
2875
|
+
if (!this.conversation.conversationSettings) {
|
|
2876
|
+
console.warn('⚠️ Conversation settings not found ⚠️ probably is an old version of the card.');
|
|
2877
|
+
this.conversation.conversationSettings = {};
|
|
2878
|
+
}
|
|
2871
2879
|
console.log(this.conversation);
|
|
2872
2880
|
this.cdr.detectChanges();
|
|
2873
2881
|
}
|
|
2874
2882
|
startConversation() {
|
|
2875
|
-
console.log('last version startConversation', this.conversation);
|
|
2883
|
+
console.log('⚠️ last version startConversation', this.conversation);
|
|
2876
2884
|
this.onStartConversation.emit(this.conversation);
|
|
2877
2885
|
}
|
|
2878
2886
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DcAgentCardDetailsComponent, deps: [{ token: CONVERSATION_AI_TOKEN }, { token: i1$3.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|