@nualang/nualang-ui-components 0.1.1400 → 0.2.0

package/dist/hooks/useLanguageTokens.js

@@ -1,73 +0,0 @@
-import { useEffect, useState } from "react";
-import { getTokenizer } from "../utils/japaneseTokenizer";
-
-// Languages that don't use interword spaces and therefore need
-// dictionary/segmenter-based tokenization for per-word hover targets.
-export function isSpaceFreeLanguage(learnLang) {
-  return learnLang === "chinese" || learnLang === "japanese";
-}
-const CHINESE_SEGMENTER = typeof Intl !== "undefined" && typeof Intl.Segmenter === "function" ? new Intl.Segmenter("zh", {
-  granularity: "word"
-}) : null;
-function segmentChinese(text) {
-  if (!text) return [];
-  if (!CHINESE_SEGMENTER) {
-    // No Intl.Segmenter (very old browsers) — fall back to one token per char.
-    // Still better than one token per whole sentence.
-    return Array.from(text);
-  }
-  const out = [];
-  for (const {
-    segment
-  } of CHINESE_SEGMENTER.segment(text)) {
-    if (segment) out.push(segment);
-  }
-  return out;
-}
-
-// Returns an array of word-strings for the given text, using a
-// language-appropriate word-boundary strategy:
-//   - Chinese: Intl.Segmenter (synchronous, built-in)
-//   - Japanese: kuromoji (async; returns null while loading)
-//   - Other / falsy learnLang: returns null (caller should fall back to
-//     whitespace splitting)
-//
-// Consumers should treat `null` as "not tokenized yet" — for Japanese that
-// means the kuromoji dict is still fetching; for non-CJK it means this hook
-// is not responsible for tokenization.
-export function useLanguageTokens(text, learnLang) {
-  const [tokens, setTokens] = useState(() => {
-    if (!text || !isSpaceFreeLanguage(learnLang)) return null;
-    if (learnLang === "chinese") return segmentChinese(text);
-    return null;
-  });
-  useEffect(() => {
-    if (!text || !isSpaceFreeLanguage(learnLang)) {
-      setTokens(null);
-      return undefined;
-    }
-    if (learnLang === "chinese") {
-      setTokens(segmentChinese(text));
-      return undefined;
-    }
-
-    // Japanese: load kuromoji tokenizer (may be async on first use).
-    let cancelled = false;
-    setTokens(null);
-    (async () => {
-      try {
-        const tokenizer = await getTokenizer();
-        if (cancelled) return;
-        const segs = tokenizer.tokenize(text).map(t => t.surface_form).filter(s => typeof s === "string" && s.length > 0);
-        setTokens(segs);
-      } catch (error) {
-        console.error("[useLanguageTokens] Tokenization failed:", error);
-        if (!cancelled) setTokens(null);
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [text, learnLang]);
-  return tokens;
-}

package/dist/hooks/useListScroll.js

@@ -1,19 +0,0 @@
-import { useState, useEffect, useMemo } from "react";
-import { useInView } from "react-intersection-observer";
-export default function useListScroll({
-  allItems,
-  pageLimit = 12
-}) {
-  const [limit, setLimit] = useState(pageLimit);
-  const {
-    ref,
-    inView
-  } = useInView();
-  useEffect(() => {
-    if (inView) {
-      setLimit(limit + pageLimit);
-    }
-  }, [inView]);
-  const items = useMemo(() => (allItems || []).slice(0, limit), [allItems, limit]);
-  return [items, ref];
-}

package/dist/hooks/usePhonetics.js

@@ -1,64 +0,0 @@
-import { useState, useEffect } from "react";
-import { getTokenizer, tokensToSegments } from "../utils/japaneseTokenizer";
-export function usePhonetics(text, learnLang) {
-  const [phoneticSegments, setPhoneticSegments] = useState(null);
-  useEffect(() => {
-    if (!text || learnLang !== "chinese" && learnLang !== "japanese") {
-      setPhoneticSegments(null);
-      return;
-    }
-    let cancelled = false;
-    async function convert() {
-      try {
-        if (learnLang === "chinese") {
-          const {
-            pinyin
-          } = await import("pinyin-pro");
-          const trimmed = text.trim();
-          const chars = Array.from(trimmed);
-          // Pass the whole string so pinyin-pro can resolve polyphones (多音字)
-          // using word-level context (e.g. 银行 → yín háng, not yín xíng).
-          // `nonZh: "spaced"` keeps each non-Chinese character as a separate element,
-          // so the output aligns 1:1 with Array.from(trimmed).
-          const pinyinArray = pinyin(trimmed, {
-            type: "array",
-            toneType: "symbol",
-            nonZh: "spaced"
-          });
-          const CJK_REGEX = /[\u4e00-\u9fff]/;
-          const aligned = pinyinArray.length === chars.length;
-          const segments = chars.map((char, i) => {
-            const isCjk = CJK_REGEX.test(char);
-            if (!isCjk) return {
-              text: char,
-              phonetic: null
-            };
-            // If alignment drifts for any reason, fall back to per-char pinyin
-            // for that slot rather than producing a garbled reading.
-            const phonetic = aligned ? pinyinArray[i] : pinyin(char, {
-              toneType: "symbol"
-            });
-            return {
-              text: char,
-              phonetic
-            };
-          });
-          if (!cancelled) setPhoneticSegments(segments);
-        } else if (learnLang === "japanese") {
-          const tokenizer = await getTokenizer();
-          const tokens = tokenizer.tokenize(text.trim());
-          const segments = tokensToSegments(tokens);
-          if (!cancelled) setPhoneticSegments(segments);
-        }
-      } catch (error) {
-        console.error("[usePhonetics] Conversion failed:", error);
-        if (!cancelled) setPhoneticSegments(null);
-      }
-    }
-    convert();
-    return () => {
-      cancelled = true;
-    };
-  }, [text, learnLang]);
-  return phoneticSegments;
-}

package/dist/hooks/usePhraseNameDialog.js

@@ -1,10 +0,0 @@
-import PhraseNameDialog from "../Dialogs/PhraseNameDialog/PhraseNameDialog";
-export default function usePhraseNameDialog(t) {
-  const getPhraseName = async () => {
-    const phraseName = await PhraseNameDialog({
-      t
-    });
-    return phraseName;
-  };
-  return [getPhraseName];
-}

package/dist/hooks/useProgressiveImg.js

@@ -1,21 +0,0 @@
-// https://benhoneywill.com/progressive-image-loading-with-react-hooks/
-import { useEffect, useState } from "react";
-const useProgressiveImg = (lowQualitySrc, highQualitySrc) => {
-  // use high quality image if no low quality image is found
-  const [src, setSrc] = useState(lowQualitySrc || highQualitySrc);
-  useEffect(() => {
-    // load high quality image if it's not currently the src
-    if (highQualitySrc && highQualitySrc !== src) {
-      setSrc(lowQualitySrc);
-      const img = new Image();
-      img.src = highQualitySrc;
-      img.onload = () => {
-        setSrc(highQualitySrc);
-      };
-    }
-  }, [lowQualitySrc, highQualitySrc, src]);
-  return [src, {
-    blur: src === lowQualitySrc
-  }];
-};
-export default useProgressiveImg;

package/dist/hooks/useRecognition.js

@@ -1,455 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-import io from "socket.io-client";
-import config from "../config";
-import { localeCompare, removeAllSymbols, getBrowserInfo, getMachineInfo, getMicrophoneInfo, downsampleBuffer } from "../utils/index";
-import logger from "../logger";
-const ENDPOINT = import.meta.env.REACT_APP_GCLOUD_SPEECH || "wss://speech-rec-service.dev-1.nualang.com";
-
-// connection to socket
-const socket = io(ENDPOINT, {
-  withCredentials: true,
-  autoConnect: false,
-  transports: ["websocket"] // use WebSocket only
-});
-socket.on("connect_error", error => {
-  // revert to classic upgrade
-  // socket.io.opts.transports = ["polling", "websocket"];
-  console.error(error);
-});
-
-// audioStream constraints
-const constraints = {
-  audio: true,
-  video: false
-};
-const version = ["v1", "v2"].includes(import.meta.env.REACT_APP_SPEECH_RECOGNITION_VERSION) ? import.meta.env.REACT_APP_SPEECH_RECOGNITION_VERSION : "v1";
-const audioRecordingLimit = 60000;
-export default function useRecognition(props = {}) {
-  const {
-    currentPhraseText,
-    trackRecommendedEvent,
-    learnLang,
-    exerciseName,
-    gameId,
-    openSnackbar
-  } = props;
-  const browserSupportsSpeechRecognition = true;
-  const [recognitionState, setRecognitionState] = useState({
-    interimTranscript: "",
-    finalTranscript: "",
-    transcriptConfidence: null,
-    transcriptWords: null,
-    recognizing: false,
-    isRecognizingDisabled: false,
-    micPlaybackEnabled: false,
-    attemptAudioURL: null,
-    audioBlob: null,
-    error: false
-  });
-  const [isSocketConnected, setIsSocketConnected] = useState(socket.connected);
-  const processorRef = useRef();
-  const audioContextRef = useRef();
-  const audioInputRef = useRef();
-  const mediaRecorderRef = useRef();
-  const stopAudioRecordingTimeoutIdRef = useRef();
-  const streamRef = useRef();
-  const serverErrorRef = useRef();
-  async function loadModule() {
-    try {
-      await audioContextRef.current.audioWorklet.addModule(`/worklets/recording-processor-v2.js`);
-    } catch (e) {
-      console.error(`Failed to load module /worklets/recording-processor-v2.js`);
-      throw e;
-    }
-  }
-  async function setupAudioContext() {
-    try {
-      if (!audioContextRef.current) {
-        audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)({
-          // if Non-interactive, use 'playback' or 'balanced'
-          // https://developer.mozilla.org/en-US/docs/Web/API/AudioContextLatencyCategory
-          latencyHint: "interactive"
-        });
-        await loadModule();
-      }
-      audioContextRef.current.resume();
-    } catch (e) {
-      console.error(`Sorry, there was an issue setting up the audio context`, e);
-      throw e;
-    }
-  }
-  useEffect(() => {
-    function onConnect() {
-      setIsSocketConnected(true);
-    }
-    function onDisconnect() {
-      setIsSocketConnected(false);
-    }
-    socket.on("connect", onConnect);
-    socket.on("disconnect", onDisconnect);
-
-    // no-op if the socket is already connected
-    socket.connect();
-    return () => {
-      socket.disconnect();
-      socket.off("connect", onConnect);
-      socket.off("disconnect", onDisconnect);
-      closeAll();
-    };
-  }, []);
-
-  /**
-   * Stops recording and closes everything down. Runs on error or on stop.
-   */
-  function closeAll(keepSocketAlive) {
-    // Clear the listeners (prevents issue if opening and closing repeatedly)
-    if (keepSocketAlive) {
-      socket.off("speechData");
-      socket.off("serverError");
-    }
-    let tracks = streamRef.current ? streamRef.current.getTracks() : null;
-    if (tracks && Array.isArray(tracks)) {
-      // will remove the recording indicator
-      tracks.forEach(function (track) {
-        track.stop();
-      });
-    }
-    if (processorRef.current) {
-      if (audioInputRef.current) {
-        try {
-          audioInputRef.current.disconnect(processorRef.current);
-        } catch (error) {
-          logger.warn(`Attempt to disconnect input failed: ${error}`);
-        }
-      }
-      processorRef.current.disconnect(audioContextRef.current.destination);
-    }
-    if (audioContextRef.current) {
-      audioContextRef.current.close().then(function () {
-        audioInputRef.current = null;
-        processorRef.current = null;
-        audioContextRef.current = null;
-      });
-    }
-  }
-  function recognitionAlert(message) {
-    if (openSnackbar) {
-      openSnackbar(message, "error");
-    } else {
-      alert(message);
-    }
-  }
-
-  /**
-   * @param {object} gcloudParams Params for gcloud
-   * @param {function} onData Callback to run on data each time it's received
-   * @param {function} onError Callback to run on an error if one is emitted.
-   */
-  const initRecording = async (gcloudParams, onData, onError) => {
-    try {
-      await setupAudioContext();
-      const handleSuccess = function (stream) {
-        const gcloudConfig = {
-          config: {
-            encoding: "LINEAR16",
-            sampleRateHertz: 16000,
-            languageCode: gcloudParams.languageCode || "en-US",
-            profanityFilter: true,
-            enableWordTimeOffsets: false,
-            speechContexts: gcloudParams.speechContexts,
-            maxAlternatives: gcloudParams.maxAlternatives || 10,
-            enableWordConfidence: gcloudParams.enableWordConfidence || false,
-            model: gcloudParams.model,
-            enableAutomaticPunctuation: true
-          },
-          single_utterance: gcloudParams.single_utterance,
-          interimResults: gcloudParams.interimResults // If you want interim results, set this to true
-        };
-        socket.emit("startGoogleCloudStream", gcloudConfig, version); // init socket Google Speech Connection
-
-        streamRef.current = stream;
-        audioInputRef.current = audioContextRef.current.createMediaStreamSource(stream);
-        serverErrorRef.current = null;
-        processorRef.current = new AudioWorkletNode(audioContextRef.current, "recording-processor-v2");
-        processorRef.current.connect(audioContextRef.current.destination);
-        audioContextRef.current.resume();
-        audioInputRef.current.connect(processorRef.current);
-        processorRef.current.port.onmessage = event => {
-          const audioData = event.data;
-          socket.emit("binaryData", audioData, version);
-        };
-        processorRef.current.port.onmessage = event => {
-          const audioData = event.data;
-          let sampleRate = 44100; // Default sample rate
-          if (audioContextRef?.current?.sampleRate && audioContextRef?.current?.sampleRate !== 44100) {
-            sampleRate = audioContextRef.current.sampleRate;
-          }
-          const result = downsampleBuffer(audioData, sampleRate, 16000);
-          socket.emit("binaryData", result, version);
-        };
-        if (window.MediaRecorder) {
-          mediaRecorderRef.current = new MediaRecorder(stream);
-          mediaRecorderRef.current.ondataavailable = e => {
-            const audioChunks = [];
-            audioChunks.push(e.data);
-            const audioBlob = new Blob(audioChunks, {
-              type: mediaRecorderRef.current.mimeType
-            });
-            const audioUrl = URL.createObjectURL(audioBlob);
-            setRecognitionState(prevState => ({
-              ...prevState,
-              attemptAudioURL: audioUrl,
-              audioBlob: audioBlob
-            }));
-          };
-          mediaRecorderRef.current.start();
-        }
-        if (/Android|webOS|Safari|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
-          // wait half second to indicate recording, this helps prevent speech being lost at the start
-          return new Promise(resolve => setTimeout(resolve, 500));
-        }
-      };
-      if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-        navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).then(() => {
-          if (!serverErrorRef.current) {
-            setRecognitionState(prevState => ({
-              ...prevState,
-              recognizing: true
-            }));
-          }
-        }).catch(err => {
-          /* handle the error */
-          console.error(err);
-          if (["Permission denied", "The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.", "The request is not allowed by the user agent or the platform in the current context."].includes(err?.message)) {
-            recognitionAlert("Permission denied, Please allow microphone access and refresh the page.");
-          }
-          setRecognitionState(prevState => ({
-            ...prevState,
-            recognizing: false
-          }));
-        });
-      } else {
-        setRecognitionState(prevState => ({
-          ...prevState,
-          recognizing: false
-        }));
-        recognitionAlert("Speech recognition not supported, please try another browser.");
-      }
-
-      // Bind the data handler callback
-      if (onData) {
-        socket.on("speechData", data => {
-          onData(data);
-        });
-      }
-      socket.on("serverError", error => {
-        console.error(`There was an issue on the server`, error);
-        serverErrorRef.current = true;
-        if (onError) {
-          onError(error);
-        }
-      });
-    } catch (error) {
-      if (onError) {
-        onError(error);
-      }
-    }
-  };
-  const indicateEndStream = () => {
-    socket.emit("endGoogleCloudStream", "");
-  };
-  const captureSpeechRecognitionNoTranscript = async () => {
-    const {
-      userAgent,
-      language,
-      mediaDevices
-    } = navigator;
-    const browser = getBrowserInfo(userAgent);
-    const machineInfo = getMachineInfo(userAgent);
-    const [availableMicrophones, activeMicrophone] = await getMicrophoneInfo(mediaDevices);
-    const eventBody = {
-      A1_phrase: `${currentPhraseText}`,
-      A2_active_microphone: `${activeMicrophone}`,
-      A3_available_microphones: `${availableMicrophones}`,
-      A4_browser: `${browser}`,
-      A5_socket_state: isSocketConnected ? "connected" : "disconnected",
-      A6_machine_info: `${machineInfo}`,
-      A7_user_language: `${language}`,
-      A8_learn_language: `${learnLang}`,
-      A9_exercise: gameId ? `${exerciseName}-${gameId}` : `${exerciseName}`
-    };
-    trackRecommendedEvent("speech_recognition_no_transcript", eventBody);
-  };
-  const stopRecording = (keepSocketAlive, triggerEvent) => {
-    // indicate end stream to trigger interim transcript to return as final transcript
-    if (socket) {
-      indicateEndStream();
-    }
-    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
-      mediaRecorderRef.current.stop();
-    }
-    setTimeout(() => {
-      closeAll(keepSocketAlive);
-      setRecognitionState(prevState => ({
-        ...prevState,
-        isRecognizingDisabled: false
-      }));
-      const {
-        finalTranscript,
-        interimTranscript
-      } = recognitionState;
-      if (triggerEvent && (!finalTranscript || finalTranscript === "") && (!interimTranscript || interimTranscript === "")) {
-        captureSpeechRecognitionNoTranscript().catch(console.error);
-      }
-    }, 2000);
-  };
-  useEffect(() => {
-    return () => {
-      stopRecording(false);
-    };
-  }, []);
-  const startRecognition = (lang, speechContexts, model) => {
-    let finalTranscript = "";
-    initRecording({
-      languageCode: lang,
-      interimResults: true,
-      single_utterance: false,
-      speechContexts,
-      enableWordConfidence: true,
-      model
-    }, data => {
-      if (data.results.length > 0) {
-        let interimTranscript = "";
-        let transcriptConfidence = null;
-        let transcriptWords = null;
-        let alternatives = [];
-        for (let i = 0; i < data.results.length; i += 1) {
-          const result = data.results[parseInt(i)];
-          if (result && result.alternatives && result.alternatives[0]) {
-            alternatives = result.alternatives;
-            const {
-              transcript,
-              confidence,
-              words
-            } = alternatives[0];
-            transcriptConfidence = confidence;
-            transcriptWords = words;
-            // transcriptConfidence = confidence + 0.07 > 1 ? 1 : confidence + 0.07;
-            if (result.isFinal) {
-              // Check for expected transcript and alternatives results
-              if (speechContexts && speechContexts.length > 0 && speechContexts[0].phrases && speechContexts[0].phrases.length > 0 && alternatives && alternatives.length > 1) {
-                const expectedTranscript = speechContexts[0].phrases.join(" ");
-                // Check if expected transcript is in alternatives
-                const transcriptMatched = alternatives.findIndex(alternative => {
-                  const stringMatched = localeCompare(removeAllSymbols(expectedTranscript).trim(), removeAllSymbols(alternative.transcript).trim());
-                  if (stringMatched === 0) {
-                    return true;
-                  } else {
-                    return false;
-                  }
-                });
-                if (transcriptMatched > -1) {
-                  // expected transcript found in alternatives, set finalTranscript and transcriptConfidence
-                  const altResult = alternatives[transcriptMatched];
-                  const altTranscript = altResult.transcript.trim();
-                  const altTranscriptConfidence = altResult.confidence;
-                  finalTranscript += `${altTranscript} `;
-                  transcriptConfidence = altTranscriptConfidence;
-                  transcriptWords = (altResult.words || []).length > 0 ? altResult.words : altTranscript.split(" ").map(w => ({
-                    word: w,
-                    confidence: altTranscriptConfidence,
-                    startTime: null,
-                    endTime: null,
-                    speakerTag: 0
-                  }));
-
-                  // transcriptConfidence = alternatives[transcriptMatched].confidence + 0.07 > 1 ? 1 : alternatives[transcriptMatched].confidence + 0.07;
-                } else {
-                  // expected transcript not in alternatives, set finalTranscript
-                  finalTranscript += `${transcript.trim()} `;
-                }
-              } else {
-                // no expected transcript and alternatives results, set finalTranscript
-                finalTranscript += `${transcript.trim()} `;
-              }
-            } else {
-              interimTranscript += transcript;
-            }
-          }
-        }
-        setRecognitionState(prevState => ({
-          ...prevState,
-          interimTranscript: interimTranscript.trim(),
-          finalTranscript: finalTranscript.trim(),
-          transcriptConfidence,
-          transcriptWords
-        }));
-      }
-    }, error => {
-      stop();
-      logger.error(error);
-      recognitionAlert("There was a problem, please try again.", "error");
-    });
-  };
-  const toggleListen = (lang, speechContexts, model, triggerEvent) => {
-    const {
-      recognizing
-    } = recognitionState;
-    if (recognizing) {
-      stop(triggerEvent);
-    } else {
-      start(lang, speechContexts, model);
-    }
-  };
-  const startListening = (lang, speechContexts, model) => {
-    start(lang, speechContexts, model);
-  };
-  const stopListening = () => {
-    stop();
-  };
-  const start = (lang, speechContexts, model) => {
-    stopAudioRecordingTimeoutIdRef.current = setTimeout(() => {
-      stop();
-    }, audioRecordingLimit);
-    startRecognition(config.languages[lang?.toLowerCase()]?.SpeechRecognitionTag ?? config.languages[lang?.toLowerCase()]?.Tag, speechContexts, model);
-  };
-  const stop = triggerEvent => {
-    if (stopAudioRecordingTimeoutIdRef.current) {
-      clearTimeout(stopAudioRecordingTimeoutIdRef.current);
-      stopAudioRecordingTimeoutIdRef.current = null;
-    }
-    setRecognitionState(prevState => ({
-      ...prevState,
-      recognizing: false,
-      isRecognizingDisabled: true
-    }));
-    stopRecording(true, triggerEvent);
-  };
-  const resetTranscript = () => {
-    setRecognitionState(prevState => ({
-      ...prevState,
-      interimTranscript: "",
-      finalTranscript: "",
-      transcriptConfidence: null,
-      transcriptWords: null
-    }));
-  };
-  const clearAttemptAudio = () => {
-    setRecognitionState(prevState => ({
-      ...prevState,
-      attemptAudioURL: null,
-      audioBlob: null
-    }));
-  };
-  return {
-    recognitionState,
-    isSocketConnected,
-    toggleListen,
-    startListening,
-    stopListening,
-    indicateEndStream,
-    resetTranscript,
-    clearAttemptAudio,
-    browserSupportsSpeechRecognition
-  };
-}