ai/agent-chat/agent-chat-tool-approval-mode.component.ts

Description

Dropdown that lets the user switch between manual and automatic tool approval for the agent chat. Extracted from c8y-agent-chat to keep that component small; place it inside a c8y-ai-chat-action so it renders in the chat action bar.

Example

Metadata

changeDetection ChangeDetectionStrategy.OnPush

host { }

selector c8y-agent-chat-tool-approval-mode

imports

C8yTranslatePipe

IconDirective

BsDropdownModule

CdkTrapFocus

templateVariables

`autoLabel`	`'Auto' \| translate`
`manualLabel`	`'Manual' \| translate`

templateUrl ./agent-chat-tool-approval-mode.component.html

Relationships

Used by

AgentChatComponent

Depends on

C8yTranslatePipe
IconDirective
BsDropdownModule
CdkTrapFocus

@let autoLabel = 'Auto' | translate;
@let manualLabel = 'Manual' | translate;
<!-- Escape must close only the menu; unstopped it also closes the drawer hosting the chat. -->
<div
  class="dropdown"
  dropdown
  [dropup]="true"
  #toolApprovalDropdown="bs-dropdown"
  [cdkTrapFocus]="toolApprovalDropdown.isOpen"
  (onHidden)="toolApprovalToggle.focus()"
  (keyup.escape)="toolApprovalDropdown.isOpen && $event.stopPropagation()"
  (keydown.escape)="toolApprovalDropdown.isOpen && $event.stopPropagation()"
>
  <button
    class="dropdown-toggle btn btn-clean btn-sm d-flex a-i-center gap-4"
    [title]="'Tool approval mode' | translate"
    [attr.aria-expanded]="toolApprovalDropdown.isOpen"
    type="button"
    data-cy="chat-tool-approval-mode"
    dropdownToggle
    #toolApprovalToggle
  >
    <i
      [c8yIcon]="globalToolApproval() ? 'bolt' : 'hand-paper-o'"
      aria-hidden="true"
    ></i>
    <span>{{ globalToolApproval() ? autoLabel : manualLabel }}</span>
    <i
      c8yIcon="caret-down"
      aria-hidden="true"
    ></i>
  </button>
  <ul
    class="dropdown-menu"
    [attr.aria-label]="'Tool approval mode' | translate"
    role="menu"
    *dropdownMenu
  >
    <li
      [class.active]="!globalToolApproval()"
      role="none"
    >
      <button
        class="a-i-start"
        [attr.aria-checked]="!globalToolApproval()"
        role="menuitemradio"
        type="button"
        (click)="modeChange.emit(false)"
        data-cy="chat-tool-approval-manual"
      >
        <i
          [class.invisible]="globalToolApproval()"
          class="icon-16 text-primary"
          [c8yIcon]="'check'"
          aria-hidden="true"
        ></i>
        <i
          class="icon-16"
          [c8yIcon]="'hand-paper-o'"
          aria-hidden="true"
        ></i>
        <span>
          {{ manualLabel }}
          <small class="d-block text-muted">
            {{ 'Ask before running each tool' | translate }}
          </small>
        </span>
      </button>
    </li>
    <li
      [class.active]="globalToolApproval()"
      role="none"
    >
      <button
        class="a-i-start"
        [attr.aria-checked]="globalToolApproval()"
        role="menuitemradio"
        type="button"
        (click)="modeChange.emit(true)"
        data-cy="chat-tool-approval-auto"
      >
        <i
          class="text-primary icon-16"
          [class.invisible]="!globalToolApproval()"
          [c8yIcon]="'check'"
          aria-hidden="true"
        ></i>
        <i
          class="icon-16"
          [c8yIcon]="'bolt'"
          aria-hidden="true"
        ></i>
        <span>
          {{ autoLabel }}
          <small class="d-block text-muted">
            {{ 'Run tools without asking' | translate }}
          </small>
        </span>
      </button>
    </li>
  </ul>
</div>