@dataclouder/ngx-agent-cards 0.0.83 → 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.
@@ -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 i9 from '@dataclouder/ngx-core';
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 i5$2 from 'primeng/speeddial';
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.conversationSettings;
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: "<span *ngIf=\"chatMessage?.multiMessages\">\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</span>\n\n@if (!chatMessage?.multiMessages) {\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\n @if (!chatMessage.transcriptionTimestamps) {\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" }] }); }
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: "<span *ngIf=\"chatMessage?.multiMessages\">\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</span>\n\n@if (!chatMessage?.multiMessages) {\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\n @if (!chatMessage.transcriptionTimestamps) {\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
+ 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
- this.defaultVoice = this.getVoice(this.agentCard.conversationSettings.voice);
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: i9.ToastAlertsAbstractService, decorators: [{
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: i9.ToastAlertsAbstractService, decorators: [{
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: i9.ToastAlertsAbstractService, decorators: [{
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.onDetailsCard = new EventEmitter();
2650
- this.onEditCard = new EventEmitter();
2651
- this.onDeleteCard = new EventEmitter();
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.onDetailsCard.emit(this.card._id);
2666
+ this.onCardAction.emit({ event: 'details', card: this.card });
2660
2667
  }
2661
2668
  onEdit() {
2662
- this.onEditCard.emit(this.card._id);
2669
+ this.onCardAction.emit({ event: 'edit', card: this.card });
2663
2670
  }
2664
2671
  onDelete() {
2665
- this.onDeleteCard.emit(this.card._id);
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: { onDetailsCard: "onDetailsCard", onEditCard: "onEditCard", onDeleteCard: "onDeleteCard" }, ngImport: i0, template: "<p-card class=\"card-image\">\n <img [src]=\"card?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n <div 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\n<!-- <div class=\"card\">\n \n\n <span class=\"title-text\">{{ card.title }}</span>\n\n <img [src]=\"card?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n</div> -->\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;border-radius:15px}.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: "ngmodule", type: CardModule }, { kind: "component", type: i3$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
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, CardModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-card class=\"card-image\">\n <img [src]=\"card?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n <div 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\n<!-- <div class=\"card\">\n \n\n <span class=\"title-text\">{{ card.title }}</span>\n\n <img [src]=\"card?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n</div> -->\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;border-radius:15px}.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"] }]
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
- }], onDetailsCard: [{
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.onDetailsCard.subscribe((id) => {
2733
- this.goToDetails(id);
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(id) {
2772
- this.goToDetailsEvent.emit(id);
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,24 +2803,19 @@ class AgentCardListComponent extends PaginationBase {
2807
2803
  this.cdr.detectChanges();
2808
2804
  this.subscribeDinamicInstantToEvents();
2809
2805
  }
2810
- doBarAction({ action, item }) {
2811
- debugger;
2812
- // console.log('doAction', { action, item });
2813
- if (action === 'new') {
2814
- this.goToEdit();
2806
+ onCardAction(actionEvent) {
2807
+ if (actionEvent.action == 'delete') {
2808
+ this.deleteCard(actionEvent.item._id);
2815
2809
  }
2816
- else if (action === 'edit') {
2817
- this.goToEdit(item?.['id']);
2818
- }
2819
- else if (action === 'delete') {
2820
- this.deleteCard(item?.['id']);
2810
+ else if (actionEvent.action == 'edit') {
2811
+ this.doAction(actionEvent); // handle by father
2821
2812
  }
2822
- else if (action === 'changeView') {
2823
- this.viewMode = this.viewMode === 'cards' ? 'table' : 'cards';
2813
+ else if (actionEvent.action == 'details') {
2814
+ this.doAction(actionEvent); // handle by father.
2824
2815
  }
2825
2816
  }
2826
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 }); }
2827
- 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", actions: "actions" }, outputs: { goToDetailsEvent: "goToDetailsEvent", goToEditEvent: "goToEditEvent", deleteEvent: "deleteEvent", onSelect: "onSelect" }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [isAdmin]=\"true\" (onAction)=\"doBarAction($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)=\"doAction($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\n @if(getCustomButtons) {\n <div style=\"position: absolute; top: 4px; right: 4px; z-index: 1000\">\n <p-speeddial\n [model]=\"getCustomButtons(card)\"\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 </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: i5$2.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: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["onlyView", "columns", "tableData", "actions"], outputs: ["onAction"] }] }); }
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"] }] }); }
2828
2819
  }
2829
2820
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AgentCardListComponent, decorators: [{
2830
2821
  type: Component,
@@ -2838,11 +2829,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
2838
2829
  SkeletonModule,
2839
2830
  SpeedDialModule,
2840
2831
  QuickTableComponent,
2841
- ], standalone: true, template: "<dc-filter-bar [isAdmin]=\"true\" (onAction)=\"doBarAction($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)=\"doAction($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\n @if(getCustomButtons) {\n <div style=\"position: absolute; top: 4px; right: 4px; z-index: 1000\">\n <p-speeddial\n [model]=\"getCustomButtons(card)\"\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 </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"] }]
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"] }]
2842
2833
  }], ctorParameters: () => [{ type: AgentCardsAbstractService, decorators: [{
2843
2834
  type: Inject,
2844
2835
  args: [CONVERSATION_AI_TOKEN]
2845
- }] }, { type: i9.ToastAlertsAbstractService, decorators: [{
2836
+ }] }, { type: i6$2.ToastAlertsAbstractService, decorators: [{
2846
2837
  type: Inject,
2847
2838
  args: [TOAST_ALERTS_TOKEN]
2848
2839
  }] }, { type: i1$3.ActivatedRoute }, { type: i1$3.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { viewMode: [{
@@ -2853,21 +2844,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
2853
2844
  type: Input
2854
2845
  }], getCustomButtons: [{
2855
2846
  type: Input
2856
- }], goToDetailsEvent: [{
2857
- type: Output
2858
- }], goToEditEvent: [{
2859
- type: Output
2860
- }], deleteEvent: [{
2861
- type: Output
2862
- }], onSelect: [{
2863
- type: Output
2864
2847
  }], outlets: [{
2865
2848
  type: ViewChildren,
2866
2849
  args: ['outlet']
2867
- }], actions: [{
2868
- type: Input
2869
2850
  }] } });
2870
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
+ };
2871
2859
  class DcAgentCardDetailsComponent {
2872
2860
  constructor(agentCardService, route, cdr) {
2873
2861
  this.agentCardService = agentCardService;
@@ -2884,11 +2872,15 @@ class DcAgentCardDetailsComponent {
2884
2872
  console.log(this.conversationCardId);
2885
2873
  }
2886
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
+ }
2887
2879
  console.log(this.conversation);
2888
2880
  this.cdr.detectChanges();
2889
2881
  }
2890
2882
  startConversation() {
2891
- console.log('last version startConversation', this.conversation);
2883
+ console.log('⚠️ last version startConversation', this.conversation);
2892
2884
  this.onStartConversation.emit(this.conversation);
2893
2885
  }
2894
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 }); }