@designcrowd/fe-shared-lib 1.7.1 → 1.8.1

package/src/atoms/components/VoiceToTextButton/VoiceToTextButton.vue

@@ -0,0 +1,147 @@
+<template>
+  <button
+    v-if="isSupported"
+    type="button"
+    :disabled="disabled"
+    :aria-label="isListening ? 'Stop voice input' : 'Start voice input'"
+    data-test="voice-to-text-button"
+    class="voice-prompt-button tw-rounded-full tw-border-0 tw-flex tw-items-center tw-justify-center tw-transition-all tw-duration-200 tw-cursor-pointer focus:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-primary-500"
+    :class="[
+      sizeClasses,
+      variantClasses.button,
+      isListening ? 'voice-prompt-listening' : '',
+      disabled ? 'tw-opacity-50 tw-cursor-not-allowed' : '',
+    ]"
+    :style="isListening ? { '--voice-bg': variantClasses.recordingBg } : {}"
+    @click="toggle"
+  >
+    <Icon
+      name="microphone"
+      :size="iconSize"
+      :class="variantClasses.icon"
+      aria-hidden="true"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { watch, toRef, computed } from 'vue';
+import Icon from '../Icon/Icon.vue';
+import { useVoiceToText } from '../../../useVoiceToText';
+
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonVariant = 'light' | 'dark';
+
+interface VoiceToTextButtonProps {
+  lang?: string;
+  disabled?: boolean;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+}
+
+const props = withDefaults(defineProps<VoiceToTextButtonProps>(), {
+  lang: 'en-US',
+  disabled: false,
+  size: 'md',
+  variant: 'dark',
+});
+
+const sizeClasses = computed(() => {
+  const sizes: Record<ButtonSize, string> = {
+    sm: 'tw-w-8 tw-h-8',
+    md: 'tw-w-10 tw-h-10',
+    lg: 'tw-w-12 tw-h-12',
+  };
+  return sizes[props.size];
+});
+
+const iconSize = computed(() => {
+  const sizes: Record<ButtonSize, string> = {
+    sm: 'sm',
+    md: 'md',
+    lg: 'md',
+  };
+  return sizes[props.size];
+});
+
+const emit = defineEmits<{
+  'on-transcript': [transcript: string];
+  'on-interim-transcript': [transcript: string];
+  'on-start': [];
+  'on-stop': [];
+  'on-error': [error: string];
+}>();
+
+const { isSupported, isListening, transcript, isFinal, error, toggle, setLang } = useVoiceToText({
+  lang: props.lang,
+});
+
+const variantClasses = computed(() => {
+  if (props.variant === 'light') {
+    return {
+      button: isListening.value ? '' : 'tw-bg-transparent hover:tw-bg-grayscale-200',
+      icon: isListening.value ? 'tw-text-grayscale-700' : 'tw-text-grayscale-600',
+      recordingBg: '#EDEDED',
+    };
+  }
+  return {
+    button: isListening.value ? '' : 'tw-bg-transparent hover:tw-bg-grayscale-700',
+    icon: isListening.value ? 'tw-text-white' : 'tw-text-grayscale-400',
+    recordingBg: '#606060',
+  };
+});
+
+// Keep recognition language in sync with prop
+watch(toRef(props, 'lang'), setLang);
+
+// Watch for transcript changes and emit appropriate events
+watch(
+  [transcript, isFinal],
+  ([newTranscript, newIsFinal]) => {
+    if (newIsFinal && newTranscript) {
+      emit('on-transcript', newTranscript);
+    } else if (newTranscript) {
+      emit('on-interim-transcript', newTranscript);
+    }
+  },
+  { flush: 'sync' },
+);
+
+// Watch for listening state changes
+watch(isListening, (newVal, oldVal) => {
+  if (newVal && !oldVal) {
+    emit('on-start');
+  }
+  if (!newVal && oldVal) {
+    emit('on-stop');
+  }
+});
+
+// Watch for errors
+watch(error, (newError) => {
+  if (newError) {
+    emit('on-error', newError);
+  }
+});
+</script>
+
+<style scoped>
+.voice-prompt-button {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.voice-prompt-listening {
+  background-color: var(--voice-bg);
+  animation: voice-bg-pulse 2s ease-in-out infinite;
+}
+
+@keyframes voice-bg-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+</style>

package/src/types/speech-recognition.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable no-undef, no-unused-vars */
+export {};
+
+declare global {
+  interface Window {
+    webkitSpeechRecognition: typeof SpeechRecognition;
+  }
+}

package/src/useVoiceToText.ts

@@ -0,0 +1,196 @@
+/* eslint-disable no-undef */
+import { ref, computed, readonly, type Ref, type ComputedRef, type DeepReadonly } from 'vue';
+
+export interface UseVoiceToTextOptions {
+  lang?: string;
+}
+
+export interface UseVoiceToTextReturn {
+  isSupported: ComputedRef<boolean>;
+  isListening: DeepReadonly<Ref<boolean>>;
+  transcript: DeepReadonly<Ref<string>>;
+  isFinal: DeepReadonly<Ref<boolean>>;
+  error: DeepReadonly<Ref<string | null>>;
+  start: () => void;
+  stop: () => void;
+  toggle: () => void;
+  // eslint-disable-next-line no-unused-vars
+  setLang: (lang: string) => void;
+}
+
+interface VoiceToTextState {
+  isListening: Ref<boolean>;
+  transcript: Ref<string>;
+  isFinal: Ref<boolean>;
+  error: Ref<string | null>;
+}
+
+// Singleton instance and state (lazily initialized)
+let recognition: SpeechRecognition | null = null;
+let isInitialized = false;
+let errorClearTimeout: ReturnType<typeof setTimeout> | null = null;
+let state: VoiceToTextState | null = null;
+
+// Error message mapping per spec
+const ERROR_MESSAGES: Record<string, string> = {
+  'not-allowed': 'Microphone permission was denied. Please allow access.',
+  'language-not-supported': 'This language is not supported.',
+  network: 'A network error occurred. Please check your connection.',
+  'audio-capture': 'No microphone was found or microphone is not working.',
+};
+
+const ERROR_CLEAR_DELAY = 5000;
+
+function getState(): VoiceToTextState {
+  if (!state) {
+    state = {
+      isListening: ref(false),
+      transcript: ref(''),
+      isFinal: ref(false),
+      error: ref<string | null>(null),
+    };
+  }
+  return state;
+}
+
+/**
+ * Singleton composable that wraps the Web Speech API (SpeechRecognition).
+ * All calls to useVoiceToText() return the same shared instance.
+ */
+export function useVoiceToText(options: UseVoiceToTextOptions = {}): UseVoiceToTextReturn {
+  const { lang = 'en-US' } = options;
+
+  // Get or create shared state
+  const { isListening, transcript, isFinal, error } = getState();
+
+  // Check for browser support
+  const SpeechRecognitionCtor: typeof SpeechRecognition | null =
+    typeof window !== 'undefined' ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
+
+  const isSupported = computed(() => !!SpeechRecognitionCtor);
+
+  // Initialize singleton once
+  if (!isInitialized && SpeechRecognitionCtor) {
+    recognition = new SpeechRecognitionCtor();
+    recognition.continuous = true;
+    recognition.interimResults = true;
+
+    recognition.onresult = (event: SpeechRecognitionEvent) => {
+      let interimTranscript = '';
+      let finalTranscript = '';
+
+      for (let i = event.resultIndex; i < event.results.length; i += 1) {
+        const result = event.results[i];
+        if (result.isFinal) {
+          finalTranscript += result[0].transcript;
+        } else {
+          interimTranscript += result[0].transcript;
+        }
+      }
+
+      if (finalTranscript) {
+        transcript.value = finalTranscript;
+        isFinal.value = true;
+      } else {
+        transcript.value = interimTranscript;
+        isFinal.value = false;
+      }
+    };
+
+    recognition.onerror = (event: SpeechRecognitionErrorEvent) => {
+      // Suppress no-speech and aborted errors per spec
+      if (event.error === 'no-speech' || event.error === 'aborted') {
+        return;
+      }
+
+      const message = ERROR_MESSAGES[event.error] || 'An error occurred with speech recognition.';
+      error.value = message;
+
+      // eslint-disable-next-line no-console
+      console.warn('[useVoiceToText]', event.error, message);
+
+      // Auto-clear error after timeout
+      if (errorClearTimeout) {
+        clearTimeout(errorClearTimeout);
+      }
+      errorClearTimeout = setTimeout(() => {
+        error.value = null;
+      }, ERROR_CLEAR_DELAY);
+    };
+
+    recognition.onend = () => {
+      isListening.value = false;
+    };
+
+    isInitialized = true;
+  }
+
+  // Update language on existing instance
+  if (recognition) {
+    recognition.lang = lang;
+  }
+
+  const start = () => {
+    if (!recognition || isListening.value) return;
+
+    // Clear previous state
+    transcript.value = '';
+    isFinal.value = false;
+    error.value = null;
+    if (errorClearTimeout) {
+      clearTimeout(errorClearTimeout);
+      errorClearTimeout = null;
+    }
+
+    try {
+      recognition.start();
+      isListening.value = true;
+    } catch (e: unknown) {
+      // Handle case where recognition is already started
+      // eslint-disable-next-line no-console
+      console.warn('[useVoiceToText] Failed to start:', (e as Error).message);
+    }
+  };
+
+  const stop = () => {
+    if (!recognition || !isListening.value) return;
+
+    isListening.value = false;
+    try {
+      recognition.stop();
+    } catch (e: unknown) {
+      // Handle case where recognition is already stopped
+      // eslint-disable-next-line no-console
+      console.warn('[useVoiceToText] Failed to stop:', (e as Error).message);
+    }
+  };
+
+  const toggle = () => {
+    if (isListening.value) {
+      stop();
+    } else {
+      start();
+    }
+  };
+
+  const setLang = (newLang: string) => {
+    if (recognition) {
+      recognition.lang = newLang;
+    }
+  };
+
+  return {
+    // State (reactive, read-only)
+    isSupported,
+    isListening: readonly(isListening),
+    transcript: readonly(transcript),
+    isFinal: readonly(isFinal),
+    error: readonly(error),
+
+    // Actions
+    start,
+    stop,
+    toggle,
+    setLang,
+  };
+}