@progress/kendo-react-buttons/SpeechToTextButton/SpeechToTextButton.mjs

All you need in React Button in one package: disabled/enabled states, built-in styles and more. KendoReact Buttons package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import e from "react";
import { KendoSpeechRecognition as $ } from "@progress/kendo-webspeech-common";
import { Button as ee } from "../Button.mjs";
import { validatePackage as te, getLicenseMessage as ne, classNames as re, WatermarkOverlay as se } from "@progress/kendo-react-common";
import { stopSmIcon as oe, microphoneOutlineIcon as ae } from "@progress/kendo-svg-icons";
import { speechToTextAriaLabel as T, messages as x, speechToTextTitle as A } from "../messages/index.mjs";
import { useLocalization as ce } from "@progress/kendo-react-intl";
import { packageMetadata as I } from "../package-metadata.mjs";
const ie = e.forwardRef((a, M) => {
  const y = !te(I, { component: "SpeechToTextButton" }), E = ne(I), p = ce(), {
    fillMode: z = "solid",
    rounded: H = "medium",
    size: L = "medium",
    themeColor: B = "base",
    ariaLabel: l,
    svgIcon: g,
    disabled: N,
    iconSize: F = "medium",
    title: u,
    className: O,
    id: K,
    style: P,
    lang: h = "en-US",
    continuous: S = !1,
    interimResults: v = !1,
    maxAlternatives: b = 1,
    integrationMode: W = "webSpeech",
    onStart: f,
    onResult: c,
    onEnd: m,
    onError: r,
    ..._
  } = a, s = e.useRef(null), n = e.useRef(!1), [o, i] = e.useState(!1), U = e.useCallback(async () => {
    n.current = !0, i(!0), f && await f();
  }, [f]), j = e.useCallback(async () => {
    n.current = !1, i(!1), m && await m();
  }, [m]), q = e.useCallback(
    (t) => {
      const w = t.results, R = w[w.length - 1], Z = Array.from(R).map((C) => ({
        transcript: C.transcript,
        confidence: C.confidence
      }));
      c == null || c({
        isFinal: R.isFinal,
        alternatives: Z
      });
    },
    [c]
  ), D = e.useCallback(
    (t) => {
      i(!1), n.current = !1, r == null || r({
        errorMessage: t.error
      });
    },
    [r]
  ), G = () => {
    var t;
    if (typeof window != "undefined" && !("webkitSpeechRecognition" in window || "SpeechRecognition" in window)) {
      r && r({ errorMessage: "Speech Recognition API is not supported in this browser." });
      return;
    }
    (t = s.current) != null && t.isActive() && s.current.stop(), s.current = new $({
      lang: h,
      continuous: S,
      interimResults: v,
      maxAlternatives: b,
      events: {
        start: U,
        end: j,
        result: q,
        error: D
      }
    });
  }, k = e.useCallback(() => {
    var t;
    n.current || (t = s.current) == null || t.start();
  }, []), d = e.useCallback(() => {
    var t;
    n.current && ((t = s.current) == null || t.stop());
  }, []), J = e.useCallback(() => {
    var t;
    n.current && ((t = s.current) == null || t.abort(), n.current = !1, i(!1));
  }, []), Q = () => n.current;
  e.useImperativeHandle(M, () => ({
    start: k,
    stop: d,
    abort: J,
    isActive: Q
  })), e.useEffect(() => (G(), () => {
    n.current && d();
  }), [h, S, v, b, W]);
  const V = () => {
    o ? d() : k();
  }, X = a.icon !== void 0 || a.iconClass !== void 0, Y = e.useMemo(() => o ? oe : g || ae, [o, g]);
  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
    ee,
    {
      id: K,
      className: re(
        {
          "k-speech-to-text-button": !0,
          "k-listening": o
        },
        O
      ),
      style: P,
      svgIcon: X ? void 0 : Y,
      iconSize: F,
      fillMode: z,
      rounded: H,
      size: L,
      themeColor: B,
      "aria-label": l != null ? l : p.toLanguageString(T, x[T]),
      "aria-pressed": o,
      disabled: N,
      title: u != null ? u : p.toLanguageString(A, x[A]),
      onClick: V,
      ..._
    },
    a.children
  ), y && /* @__PURE__ */ e.createElement(se, { message: E }));
});
ie.displayName = "KendoSpeechToTextButton";
export {
  ie as SpeechToTextButton
};