История страницы

this.$robot.dialogService.onAction(actions => {
  if (actions.find(action => action.toLowerCase() === 'next') && !this.disabled) {
    this.moveNext() // Имитирование нажатия кнопки Продолжить
  }
})

this.$robot.dialogService.onAction(actions => {
  if (actions.find(action => action.toLowerCase() === 'save_and_continue') && this.isNotEmptyName) {
    this.saveUser() // Имитирование нажатия кнопки Продолжить
  }
})

this.$robot.dialogService.onAction(actions => {
  if (actions.find(action => action.toLowerCase() === 'about-hotel')) {
    this.aboutHotel() // Имитирование нажатия кнопки Об отеле
  }

  if (actions.find(action => action.toLowerCase() === 'to-chat')) {
    this.toChat() // Имитирование нажатия кнопки Поболтать
  }

  if (actions.find(action => action.toLowerCase() === 'to-data')) {
    this.toData() // Имитирование нажатия кнопки Персональные данные
  }
})

this.$robot.dialogService.onAction(actions => {
  if (actions.find(action => action.toLowerCase() === 'back')) {
    this.$router.back() // Имитирование нажатия кнопки Назад на экране Поболтать
  }
})

<template>
  <div class="voice-input">
    <pb-input
      ref="input-wrap"
      :input-options="inputOptions"
      :mask-options="maskOptions"
      @accept="$emit('update:modelValue', $event.target.value)"
      :modelValue="modelValue"
    />

    <pb-icon-button>
      <svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M3.33337 3.5C3.33337 1.567 4.90038 0 6.83337 0V0C8.76637 0 10.3334 1.567 10.3334 3.5V9.5C10.3334 11.433 8.76637 13 6.83337 13V13C4.90038 13 3.33337 11.433 3.33337 9.5V3.5Z" fill="#2D68FF"/>
        <path d="M0.833374 9V9.5C0.833374 12.8137 3.51967 15.5 6.83337 15.5V15.5C10.1471 15.5 12.8334 12.8137 12.8334 9.5V9" stroke="#2D68FF"/>
        <path d="M6.83337 15.5V20" stroke="#2D68FF"/>
        <path d="M4.33337 19.5H9.33337" stroke="#2D68FF"/>
      </svg>
    </pb-icon-button>
  </div>

</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  name: 'VoiceInput',
})
</script>

<style lang="scss" scoped>

</style>

<pb-icon-button
  :class="['voice-input__icon _transparent', { '_animated': isListening }]"
  @click="toggleListen"
>

props: {
  modelValue: [String, Number],
  inputOptions: {
    type: Object as PropType<InputTextareaOptions>,
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    default: () => {}
  },
  maskOptions: {
    type: Object as PropType<MaskOptions>,
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    default: () => {}
  }
}

import { InputTextareaOptions, MaskOptions } from '@pb/ui-kit/src/components/input/inputTextareaMixin'

data (): { inputElement: null | HTMLInputElement, isListening: boolean } {
  return {
    inputElement: null,
    isListening: false
  }
}

toggleListen (): void {
  this.$robot.dialogService.isMute
    ? this.$robot.dialogService.muteOff()
    : this.$robot.dialogService.muteOn()

  this.isListening = !this.isListening
}

this.inputElement = this.$el.querySelector('input')

this.$robot.dialogService.onUserReplic((text, isFinished) => {
  if (this.isListening && isFinished) {
    (this.inputElement as HTMLInputElement).focus();
    (this.inputElement as HTMLInputElement).value = text; // Текст из лингвобазы
    (this.inputElement as HTMLInputElement).blur()

    // Если тихий режим выключать сразу, то сработают userAction'ы, поэтому используем таймаут.
    setTimeout(() => {
      this.toggleListen()
    }, TIMEOUT_FOR_MUTE_OFF) 
  }
})

const TIMEOUT_FOR_MUTE_OFF = 500

watch: {
  isListening (newValue) {
    if (newValue) {
      (this.inputElement as HTMLInputElement).focus()
    }
  }
}

.voice-input {
  position: relative;

  &__icon {
    position: absolute;
    right: 0;

    &._animated {
      animation: pulse 1.5s linear infinite;

      border-radius: 50%;
      box-shadow: 0 0 0 0 #2D68FF;
      filter: invert(30%) sepia(100%) saturate(1265%) hue-rotate(209deg) brightness(101%) contrast(109%);
    }
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #2D68FF;
  }
  70% {
    box-shadow: 0 0 0 3px rgba(45, 104, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(45, 104, 255, 0);
  }
}

components: {
  Header,
  Modal,
  VoiceInput
}

<div class="data-entry__input-wrapper">
  <VoiceInput
    v-model="name"
    :input-options="{
      label: 'Фамилия'
    }"
    :mask-options="{
      type: 'text'
    }"
  />
  <VoiceInput
    v-model="name"
    :input-options="{
      label: 'Имя'
    }"
    :mask-options="{
      type: 'text'
    }"
  />
  <VoiceInput
    v-model="patronymic"
    :input-options="{
      label: 'Отчество'
    }"
    :mask-options="{
      type: 'text'
    }"
  />
</div>

this.$robot.dialogService.onAction(actions => {
  if (actions.find(action => action.toLowerCase() === 'confirm') && this.isNotEmptyFields) {
    this.confirm()
  }

  if (actions.find(action => action.toLowerCase() === 'open-modal') && !this.isShowModal) {
    this.isShowModal = true
  }

  if (actions.find(action => action.toLowerCase() === 'close-modal') && this.isShowModal) {
    this.isShowModal = false
  }
})

this.$robot.dialogService.onAction(actions => {
  if (actions.find(action => action.toLowerCase() === 'to-main')) {
    this.$router.push('/')
  }
})