@c8y/ngx-components 1024.20.8 → 1024.21.3

package/fesm2022/c8y-ngx-components-ai-ai-chat.mjs

@@ -460,9 +460,11 @@ class AiChatMessageActionComponent {
          */
         this.disabled = false;
         /**
-         * Tooltip text displayed when hovering over the action button.
+         * Tooltip text displayed when hovering over the action button, also used as its accessible name.
+         * Not named `tooltip`, as that attribute would also attach ngx-bootstrap's tooltip directive to
+         * this component wherever `TooltipModule` is imported, showing the tooltip twice.
          */
-        this.tooltip = '';
+        this.tooltipText = '';
         /**
          * Icon to display in the action button.
          */
@@ -472,16 +474,28 @@ class AiChatMessageActionComponent {
          */
         this.actionClicked = new EventEmitter();
     }
+    /**
+     * @deprecated Use `tooltipText` instead. Binding `tooltip` on this component also attaches
+     * ngx-bootstrap's tooltip directive wherever `TooltipModule` is imported, showing the tooltip twice.
+     */
+    set tooltip(value) {
+        this.tooltipText = value;
+    }
+    get tooltip() {
+        return this.tooltipText;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AiChatMessageActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AiChatMessageActionComponent, isStandalone: true, selector: "c8y-ai-chat-message-action", inputs: { custom: "custom", disabled: "disabled", tooltip: "tooltip", icon: "icon" }, outputs: { actionClicked: "actionClicked" }, ngImport: i0, template: "@if (!custom) {\n  <button\n    class=\"btn btn-dot text-muted\"\n    [attr.aria-label]=\"tooltip | translate\"\n    [tooltip]=\"tooltip | translate\"\n    [adaptivePosition]=\"true\"\n    [delay]=\"500\"\n    (click)=\"actionClicked.emit()\"\n    [disabled]=\"disabled\"\n  >\n    <i\n      class=\"text-12\"\n      [c8yIcon]=\"icon\"\n    ></i>\n  </button>\n} @else {\n  <ng-content></ng-content>\n}\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AiChatMessageActionComponent, isStandalone: true, selector: "c8y-ai-chat-message-action", inputs: { custom: "custom", disabled: "disabled", tooltipText: "tooltipText", tooltip: "tooltip", icon: "icon" }, outputs: { actionClicked: "actionClicked" }, ngImport: i0, template: "@if (!custom) {\n  <button\n    class=\"btn btn-dot text-muted\"\n    [attr.aria-label]=\"tooltipText | translate\"\n    [tooltip]=\"tooltipText | translate\"\n    placement=\"top\"\n    container=\"body\"\n    [adaptivePosition]=\"false\"\n    [delay]=\"500\"\n    (click)=\"actionClicked.emit()\"\n    [disabled]=\"disabled\"\n  >\n    <i\n      class=\"text-12\"\n      [c8yIcon]=\"icon\"\n    ></i>\n  </button>\n} @else {\n  <ng-content></ng-content>\n}\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AiChatMessageActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-ai-chat-message-action', standalone: true, imports: [TooltipModule, C8yTranslatePipe, IconDirective], changeDetection: ChangeDetectionStrategy.Eager, template: "@if (!custom) {\n  <button\n    class=\"btn btn-dot text-muted\"\n    [attr.aria-label]=\"tooltip | translate\"\n    [tooltip]=\"tooltip | translate\"\n    [adaptivePosition]=\"true\"\n    [delay]=\"500\"\n    (click)=\"actionClicked.emit()\"\n    [disabled]=\"disabled\"\n  >\n    <i\n      class=\"text-12\"\n      [c8yIcon]=\"icon\"\n    ></i>\n  </button>\n} @else {\n  <ng-content></ng-content>\n}\n" }]
+            args: [{ selector: 'c8y-ai-chat-message-action', standalone: true, imports: [TooltipModule, C8yTranslatePipe, IconDirective], changeDetection: ChangeDetectionStrategy.Eager, template: "@if (!custom) {\n  <button\n    class=\"btn btn-dot text-muted\"\n    [attr.aria-label]=\"tooltipText | translate\"\n    [tooltip]=\"tooltipText | translate\"\n    placement=\"top\"\n    container=\"body\"\n    [adaptivePosition]=\"false\"\n    [delay]=\"500\"\n    (click)=\"actionClicked.emit()\"\n    [disabled]=\"disabled\"\n  >\n    <i\n      class=\"text-12\"\n      [c8yIcon]=\"icon\"\n    ></i>\n  </button>\n} @else {\n  <ng-content></ng-content>\n}\n" }]
         }], propDecorators: { custom: [{
                 type: Input
             }], disabled: [{
                 type: Input
+            }], tooltipText: [{
+                type: Input
             }], tooltip: [{
                 type: Input
             }], icon: [{
@@ -500,6 +514,8 @@ class AiChatMessageComponent {
     constructor() {
         this.role = input(...(ngDevMode ? [undefined, { debugName: "role" }] : /* istanbul ignore next */ []));
         this.message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : /* istanbul ignore next */ []));
+        /** Name of the agent to show above the message; nothing is shown when undefined. */
+        this.agentLabel = input(undefined, ...(ngDevMode ? [{ debugName: "agentLabel" }] : /* istanbul ignore next */ []));
         this.translateService = inject(TranslateService);
         this.roleResolved = computed(() => {
             return this.message()?.role || this.role();
@@ -522,8 +538,14 @@ class AiChatMessageComponent {
         this.messageContentAriaLabel = computed(() => {
             const msg = this.message();
             const time = msg.role != 'system' && msg.timestamp ? new Date(msg.timestamp).toLocaleTimeString() : '';
+            const agent = this.agentLabel();
             let tpl;
-            if (time) {
+            if (agent && this.roleResolved() !== 'user') {
+                tpl = time
+                    ? gettext('Assistant message from {{ agent }} at {{ time }}')
+                    : gettext('Assistant message from {{ agent }}');
+            }
+            else if (time) {
                 tpl =
                     this.roleResolved() === 'user'
                         ? gettext('User message at {{ time }}')
@@ -532,16 +554,16 @@ class AiChatMessageComponent {
             else {
                 tpl = this.roleResolved() === 'user' ? gettext('User message') : gettext('Assistant message');
             }
-            return this.translateService.instant(tpl, { time });
+            return this.translateService.instant(tpl, { time, agent });
         }, ...(ngDevMode ? [{ debugName: "messageContentAriaLabel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AiChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AiChatMessageComponent, isStandalone: true, selector: "c8y-ai-chat-message", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"d-col\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"article\"\n>\n  <div\n    class=\"chat-message text-break-word\"\n    [ngClass]=\"{\n      'user-message': message()?.role === 'user' || role() === 'user',\n      'agent-message': message()?.role === 'assistant' || role() === 'assistant'\n    }\"\n  >\n    <!-- Visually hidden label included when users copy-paste from the chat, e.g. to report issues -->\n    <span\n      class=\"hidden-copy-label\"\n      aria-hidden=\"true\"\n    >\n      {{ `====== ${messageContentAriaLabel()} ======` }}</span\n    >\n\n    <!-- Apply the class and aria-label to both the main content and whatever is projected, so we get the same styling by default -->\n    <div\n      class=\"message-content\"\n      [attr.aria-label]=\"messageContentAriaLabel()\"\n    >\n      <div style=\"display: contents\">\n        <ng-content select=\":not(c8y-ai-chat-message-action)\"></ng-content>\n      </div>\n    </div>\n    @if (message()?.timestamp) {\n      <div class=\"message-timestamp\">\n        <span\n          tabindex=\"0\"\n          [tooltip]=\"message()?.timestamp | c8yDate\"\n        >\n          {{ message()?.timestamp | c8yDate: 'adaptiveDate' }}\n        </span>\n      </div>\n    }\n  </div>\n  <div\n    class=\"message-action\"\n    [attr.aria-label]=\"'Message actions' | translate\"\n    role=\"toolbar\"\n    [ngClass]=\"{\n      'user-action showOnHover': message()?.role === 'user' || role() === 'user',\n      'agent-action p-l-16': message()?.role === 'assistant' || role() === 'assistant'\n    }\"\n  >\n    <ng-content select=\"c8y-ai-chat-message-action\"></ng-content>\n  </div>\n</div>\n", styles: [".hidden-copy-label{display:block;font-size:0;line-height:0;-webkit-user-select:text;user-select:text}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AiChatMessageComponent, isStandalone: true, selector: "c8y-ai-chat-message", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, agentLabel: { classPropertyName: "agentLabel", publicName: "agentLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"d-col\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"article\"\n>\n  <div\n    class=\"chat-message text-break-word\"\n    [ngClass]=\"{\n      'user-message': message()?.role === 'user' || role() === 'user',\n      'agent-message': message()?.role === 'assistant' || role() === 'assistant'\n    }\"\n  >\n    <!-- Visually hidden label included when users copy-paste from the chat, e.g. to report issues -->\n    <span\n      class=\"hidden-copy-label\"\n      aria-hidden=\"true\"\n    >\n      {{ `====== ${messageContentAriaLabel()} ======` }}</span\n    >\n\n    @if (agentLabel()) {\n      <div\n        class=\"text-muted text-12 m-b-4\"\n        aria-hidden=\"true\"\n        data-cy=\"ai-chat-message-agent\"\n      >\n        {{ agentLabel() }}\n      </div>\n    }\n\n    <!-- Apply the class and aria-label to both the main content and whatever is projected, so we get the same styling by default -->\n    <div\n      class=\"message-content\"\n      [attr.aria-label]=\"messageContentAriaLabel()\"\n    >\n      <div style=\"display: contents\">\n        <ng-content select=\":not(c8y-ai-chat-message-action)\"></ng-content>\n      </div>\n    </div>\n    @if (message()?.timestamp) {\n      <div class=\"message-timestamp\">\n        <span\n          tabindex=\"0\"\n          [tooltip]=\"message()?.timestamp | c8yDate\"\n        >\n          {{ message()?.timestamp | c8yDate: 'adaptiveDate' }}\n        </span>\n      </div>\n    }\n  </div>\n  <div\n    class=\"message-action\"\n    [attr.aria-label]=\"'Message actions' | translate\"\n    role=\"toolbar\"\n    [ngClass]=\"{\n      'user-action showOnHover': message()?.role === 'user' || role() === 'user',\n      'agent-action p-l-16': message()?.role === 'assistant' || role() === 'assistant'\n    }\"\n  >\n    <ng-content select=\"c8y-ai-chat-message-action\"></ng-content>\n  </div>\n</div>\n", styles: [".hidden-copy-label{display:block;font-size:0;line-height:0;-webkit-user-select:text;user-select:text}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AiChatMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-ai-chat-message', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, TooltipModule, C8yTranslatePipe, DatePipe], template: "<div\n  class=\"d-col\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"article\"\n>\n  <div\n    class=\"chat-message text-break-word\"\n    [ngClass]=\"{\n      'user-message': message()?.role === 'user' || role() === 'user',\n      'agent-message': message()?.role === 'assistant' || role() === 'assistant'\n    }\"\n  >\n    <!-- Visually hidden label included when users copy-paste from the chat, e.g. to report issues -->\n    <span\n      class=\"hidden-copy-label\"\n      aria-hidden=\"true\"\n    >\n      {{ `====== ${messageContentAriaLabel()} ======` }}</span\n    >\n\n    <!-- Apply the class and aria-label to both the main content and whatever is projected, so we get the same styling by default -->\n    <div\n      class=\"message-content\"\n      [attr.aria-label]=\"messageContentAriaLabel()\"\n    >\n      <div style=\"display: contents\">\n        <ng-content select=\":not(c8y-ai-chat-message-action)\"></ng-content>\n      </div>\n    </div>\n    @if (message()?.timestamp) {\n      <div class=\"message-timestamp\">\n        <span\n          tabindex=\"0\"\n          [tooltip]=\"message()?.timestamp | c8yDate\"\n        >\n          {{ message()?.timestamp | c8yDate: 'adaptiveDate' }}\n        </span>\n      </div>\n    }\n  </div>\n  <div\n    class=\"message-action\"\n    [attr.aria-label]=\"'Message actions' | translate\"\n    role=\"toolbar\"\n    [ngClass]=\"{\n      'user-action showOnHover': message()?.role === 'user' || role() === 'user',\n      'agent-action p-l-16': message()?.role === 'assistant' || role() === 'assistant'\n    }\"\n  >\n    <ng-content select=\"c8y-ai-chat-message-action\"></ng-content>\n  </div>\n</div>\n", styles: [".hidden-copy-label{display:block;font-size:0;line-height:0;-webkit-user-select:text;user-select:text}\n"] }]
-        }], propDecorators: { role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }] } });
+            args: [{ selector: 'c8y-ai-chat-message', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, TooltipModule, C8yTranslatePipe, DatePipe], template: "<div\n  class=\"d-col\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"article\"\n>\n  <div\n    class=\"chat-message text-break-word\"\n    [ngClass]=\"{\n      'user-message': message()?.role === 'user' || role() === 'user',\n      'agent-message': message()?.role === 'assistant' || role() === 'assistant'\n    }\"\n  >\n    <!-- Visually hidden label included when users copy-paste from the chat, e.g. to report issues -->\n    <span\n      class=\"hidden-copy-label\"\n      aria-hidden=\"true\"\n    >\n      {{ `====== ${messageContentAriaLabel()} ======` }}</span\n    >\n\n    @if (agentLabel()) {\n      <div\n        class=\"text-muted text-12 m-b-4\"\n        aria-hidden=\"true\"\n        data-cy=\"ai-chat-message-agent\"\n      >\n        {{ agentLabel() }}\n      </div>\n    }\n\n    <!-- Apply the class and aria-label to both the main content and whatever is projected, so we get the same styling by default -->\n    <div\n      class=\"message-content\"\n      [attr.aria-label]=\"messageContentAriaLabel()\"\n    >\n      <div style=\"display: contents\">\n        <ng-content select=\":not(c8y-ai-chat-message-action)\"></ng-content>\n      </div>\n    </div>\n    @if (message()?.timestamp) {\n      <div class=\"message-timestamp\">\n        <span\n          tabindex=\"0\"\n          [tooltip]=\"message()?.timestamp | c8yDate\"\n        >\n          {{ message()?.timestamp | c8yDate: 'adaptiveDate' }}\n        </span>\n      </div>\n    }\n  </div>\n  <div\n    class=\"message-action\"\n    [attr.aria-label]=\"'Message actions' | translate\"\n    role=\"toolbar\"\n    [ngClass]=\"{\n      'user-action showOnHover': message()?.role === 'user' || role() === 'user',\n      'agent-action p-l-16': message()?.role === 'assistant' || role() === 'assistant'\n    }\"\n  >\n    <ng-content select=\"c8y-ai-chat-message-action\"></ng-content>\n  </div>\n</div>\n", styles: [".hidden-copy-label{display:block;font-size:0;line-height:0;-webkit-user-select:text;user-select:text}\n"] }]
+        }], propDecorators: { role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], agentLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "agentLabel", required: false }] }] } });
 
 /**
  * Thin wrapper around the browser's Web Speech API (`SpeechRecognition`) used to transcribe speech