ai/ai-chat/ai-chat-speech-to-text.component.ts

Description

A microphone button for the c8y-ai-chat action bar that transcribes speech into the chat input using the browser's Web Speech API. Recognized text is appended to the current prompt.

The button is only rendered when the current browser supports the Web Speech API, so it stays hidden where speech input is unavailable. While a recognition session is running the microphone icon pulses.

c8y-ai-chat renders this button automatically unless config.enableSpeechToText is false, so you normally do not place it yourself.

Example

Metadata

changeDetection ChangeDetectionStrategy.OnPush

host { }

selector c8y-ai-chat-speech-to-text

imports

C8yTranslatePipe

IconDirective

templateVariables

label (isListening() ? stopLabel : startLabel) | translate

templateUrl ./ai-chat-speech-to-text.component.html

Relationships

Used by

AiChatComponent

Depends on

C8yTranslatePipe
IconDirective

@if (isAvailable()) {
  @let label = (isListening() ? stopLabel : startLabel) | translate;
  <button
    class="btn btn-dot c8y-speech-to-text-btn"
    [class.c8y-speech-to-text-btn--listening]="isListening()"
    [attr.title]="label"
    [attr.aria-label]="label"
    [attr.aria-pressed]="isListening()"
    type="button"
    [disabled]="disabled()"
    (click)="toggleListening()"
  >
    <i
      class="c8y-speech-to-text-btn__icon"
      [c8yIcon]="'microphone'"
      aria-hidden="true"
    ></i>
    <span
      class="sr-only"
      aria-live="polite"
      role="status"
    >
      @if (isListening()) {
        {{ 'Listening…' | translate }}
      }
    </span>
  </button>
}