@designcrowd/fe-shared-lib 1.7.1 → 1.8.0

package/src/atoms/components/Icon/Icon.vue

@@ -237,6 +237,7 @@ import IconLinkInBioFilled from './icons/link-in-bio-filled.vue';
 import IconMedia from './icons/media.vue';
 import IconMinusCircleLight from './icons/minus-circle-light.vue';
 import IconMinus from './icons/minus.vue';
+import IconMicrophone from './icons/microphone.vue';
 import IconMobile from './icons/mobile.vue';
 import IconOther from './icons/other.vue';
 import IconPageButtons from './icons/page-buttons.vue';
@@ -638,6 +639,7 @@ export default {
     IconContactMessage,
     IconMinus,
     IconMinusCircleLight,
+    IconMicrophone,
     IconMobile,
     IconMug,
     IconOther,

package/src/atoms/components/Icon/icons/microphone.vue

@@ -0,0 +1,5 @@
+<template>
+  <path
+    d="M8 1a2 2 0 0 0-2 2v4a2 2 0 1 0 4 0V3a2 2 0 0 0-2-2zM4.5 7a.5.5 0 0 1 .5.5V8a3 3 0 1 0 6 0v-.5a.5.5 0 0 1 1 0V8a4 4 0 0 1-3.5 3.97V14h2a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1h2v-2.03A4 4 0 0 1 4 8v-.5a.5.5 0 0 1 .5-.5z"
+  />
+</template>

package/src/atoms/components/VoiceToTextButton/VoiceToTextButton.stories.ts

@@ -0,0 +1,242 @@
+import VoiceToTextButton from './VoiceToTextButton.vue';
+
+export default {
+  title: 'Components/VoiceToTextButton',
+  component: VoiceToTextButton,
+};
+
+export const PromptInputDemo = () => ({
+  components: { VoiceToTextButton },
+  data() {
+    return {
+      transcript: '',
+      isListening: false,
+      error: null,
+    };
+  },
+  template: `
+    <div class="tw-min-h-[400px] tw-p-8 tw-flex tw-flex-col tw-items-center tw-justify-center" style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);">
+      <h1 class="tw-text-white tw-text-3xl tw-font-bold tw-mb-2 tw-text-center">Design anything with AI</h1>
+      <p class="tw-text-grayscale-400 tw-mb-8 tw-text-center">Design a logo, a website, or anything else in seconds with the power of AI</p>
+
+      <div class="tw-w-full tw-max-w-xl tw-bg-grayscale-800 tw-rounded-full tw-px-6 tw-py-3 tw-flex tw-items-center tw-gap-3">
+        <input
+          v-model="transcript"
+          type="text"
+          placeholder="What would you like to design?"
+          class="tw-flex-1 tw-bg-transparent tw-border-none tw-text-white tw-placeholder-grayscale-500 focus:tw-outline-none tw-text-base"
+        />
+        <VoiceToTextButton
+          variant="dark"
+          size="md"
+          @on-transcript="transcript = $event"
+          @on-interim-transcript="transcript = $event"
+          @on-start="isListening = true; error = null"
+          @on-stop="isListening = false"
+          @on-error="error = $event"
+        />
+        <button class="tw-w-10 tw-h-10 tw-rounded-full tw-bg-secondary-500 tw-flex tw-items-center tw-justify-center tw-text-white hover:tw-bg-secondary-600 tw-transition-colors">
+          <svg xmlns="http://www.w3.org/2000/svg" class="tw-w-5 tw-h-5" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+          </svg>
+        </button>
+      </div>
+
+      <div class="tw-mt-4 tw-text-sm tw-h-6">
+        <p v-if="isListening" class="tw-text-error-500 tw-font-medium">
+          Recording... speak now
+        </p>
+        <p v-else-if="error" class="tw-text-error-400">
+          {{ error }}
+        </p>
+      </div>
+    </div>
+  `,
+});
+
+PromptInputDemo.story = {
+  name: 'Dark - Prompt Input',
+};
+
+export const DarkVariantStates = () => ({
+  components: { VoiceToTextButton },
+  template: `
+    <div class="tw-p-8" style="background: #1a1a2e;">
+      <h3 class="tw-text-white tw-text-lg tw-font-semibold tw-mb-6">Dark Variant - All States</h3>
+
+      <div class="tw-flex tw-gap-8 tw-items-start">
+        <div class="tw-text-center">
+          <div class="tw-mb-2 tw-p-4 tw-bg-grayscale-800 tw-rounded-lg tw-inline-block">
+            <VoiceToTextButton variant="dark" size="sm" />
+          </div>
+          <p class="tw-text-grayscale-400 tw-text-xs">Small</p>
+        </div>
+
+        <div class="tw-text-center">
+          <div class="tw-mb-2 tw-p-4 tw-bg-grayscale-800 tw-rounded-lg tw-inline-block">
+            <VoiceToTextButton variant="dark" size="md" />
+          </div>
+          <p class="tw-text-grayscale-400 tw-text-xs">Medium (default)</p>
+        </div>
+
+        <div class="tw-text-center">
+          <div class="tw-mb-2 tw-p-4 tw-bg-grayscale-800 tw-rounded-lg tw-inline-block">
+            <VoiceToTextButton variant="dark" size="lg" />
+          </div>
+          <p class="tw-text-grayscale-400 tw-text-xs">Large</p>
+        </div>
+
+        <div class="tw-text-center">
+          <div class="tw-mb-2 tw-p-4 tw-bg-grayscale-800 tw-rounded-lg tw-inline-block">
+            <VoiceToTextButton variant="dark" :disabled="true" />
+          </div>
+          <p class="tw-text-grayscale-400 tw-text-xs">Disabled</p>
+        </div>
+      </div>
+
+      <p class="tw-text-grayscale-500 tw-text-sm tw-mt-6">
+        Click any button to see the recording state with grey circle indicator
+      </p>
+    </div>
+  `,
+});
+
+DarkVariantStates.story = {
+  name: 'Dark - Variant States',
+};
+
+export const LightInputDemo = () => ({
+  components: { VoiceToTextButton },
+  data() {
+    return {
+      transcript: '',
+      isListening: false,
+      error: null,
+    };
+  },
+  template: `
+    <div class="tw-min-h-[400px] tw-p-8 tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-white">
+      <h1 class="tw-text-grayscale-800 tw-text-3xl tw-font-bold tw-mb-2 tw-text-center">Search</h1>
+      <p class="tw-text-grayscale-600 tw-mb-8 tw-text-center">Find what you're looking for</p>
+
+      <div class="tw-w-full tw-max-w-xl tw-bg-grayscale-100 tw-rounded-full tw-px-6 tw-py-3 tw-flex tw-items-center tw-gap-3 tw-border tw-border-grayscale-300">
+        <input
+          v-model="transcript"
+          type="text"
+          placeholder="Type to search..."
+          class="tw-flex-1 tw-bg-transparent tw-border-none tw-text-grayscale-800 tw-placeholder-grayscale-500 focus:tw-outline-none tw-text-base"
+        />
+        <VoiceToTextButton
+          variant="light"
+          size="md"
+          @on-transcript="transcript = $event"
+          @on-interim-transcript="transcript = $event"
+          @on-start="isListening = true; error = null"
+          @on-stop="isListening = false"
+          @on-error="error = $event"
+        />
+      </div>
+
+      <div class="tw-mt-4 tw-text-sm tw-h-6">
+        <p v-if="isListening" class="tw-text-error-500 tw-font-medium">
+          Recording... speak now
+        </p>
+        <p v-else-if="error" class="tw-text-error-400">
+          {{ error }}
+        </p>
+      </div>
+    </div>
+  `,
+});
+
+LightInputDemo.story = {
+  name: 'Light - Search Input',
+};
+
+export const LightVariantStates = () => ({
+  components: { VoiceToTextButton },
+  template: `
+    <div class="tw-p-8 tw-bg-white">
+      <h3 class="tw-text-grayscale-800 tw-text-lg tw-font-semibold tw-mb-6">Light Variant - All States</h3>
+
+      <div class="tw-flex tw-gap-8 tw-items-start">
+        <div class="tw-text-center">
+          <div class="tw-mb-2 tw-p-4 tw-bg-grayscale-100 tw-rounded-lg tw-inline-block">
+            <VoiceToTextButton variant="light" size="sm" />
+          </div>
+          <p class="tw-text-grayscale-600 tw-text-xs">Small</p>
+        </div>
+
+        <div class="tw-text-center">
+          <div class="tw-mb-2 tw-p-4 tw-bg-grayscale-100 tw-rounded-lg tw-inline-block">
+            <VoiceToTextButton variant="light" size="md" />
+          </div>
+          <p class="tw-text-grayscale-600 tw-text-xs">Medium (default)</p>
+        </div>
+
+        <div class="tw-text-center">
+          <div class="tw-mb-2 tw-p-4 tw-bg-grayscale-100 tw-rounded-lg tw-inline-block">
+            <VoiceToTextButton variant="light" size="lg" />
+          </div>
+          <p class="tw-text-grayscale-600 tw-text-xs">Large</p>
+        </div>
+
+        <div class="tw-text-center">
+          <div class="tw-mb-2 tw-p-4 tw-bg-grayscale-100 tw-rounded-lg tw-inline-block">
+            <VoiceToTextButton variant="light" :disabled="true" />
+          </div>
+          <p class="tw-text-grayscale-600 tw-text-xs">Disabled</p>
+        </div>
+      </div>
+
+      <p class="tw-text-grayscale-500 tw-text-sm tw-mt-6">
+        Click any button to see the recording state with grey circle indicator
+      </p>
+    </div>
+  `,
+});
+
+LightVariantStates.story = {
+  name: 'Light - Variant States',
+};
+
+export const SideBySide = () => ({
+  components: { VoiceToTextButton },
+  template: `
+    <div class="tw-flex tw-min-h-[300px]">
+      <div class="tw-flex-1 tw-p-8 tw-flex tw-flex-col tw-items-center tw-justify-center" style="background: #1a1a2e;">
+        <h3 class="tw-text-white tw-text-lg tw-font-semibold tw-mb-6">Dark Variant</h3>
+        <div class="tw-flex tw-gap-4 tw-items-center">
+          <div class="tw-p-3 tw-bg-grayscale-800 tw-rounded-lg">
+            <VoiceToTextButton variant="dark" size="sm" />
+          </div>
+          <div class="tw-p-3 tw-bg-grayscale-800 tw-rounded-lg">
+            <VoiceToTextButton variant="dark" size="md" />
+          </div>
+          <div class="tw-p-3 tw-bg-grayscale-800 tw-rounded-lg">
+            <VoiceToTextButton variant="dark" size="lg" />
+          </div>
+        </div>
+      </div>
+
+      <div class="tw-flex-1 tw-p-8 tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-white">
+        <h3 class="tw-text-grayscale-800 tw-text-lg tw-font-semibold tw-mb-6">Light Variant</h3>
+        <div class="tw-flex tw-gap-4 tw-items-center">
+          <div class="tw-p-3 tw-bg-grayscale-100 tw-rounded-lg">
+            <VoiceToTextButton variant="light" size="sm" />
+          </div>
+          <div class="tw-p-3 tw-bg-grayscale-100 tw-rounded-lg">
+            <VoiceToTextButton variant="light" size="md" />
+          </div>
+          <div class="tw-p-3 tw-bg-grayscale-100 tw-rounded-lg">
+            <VoiceToTextButton variant="light" size="lg" />
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+});
+
+SideBySide.story = {
+  name: 'Side by Side Comparison',
+};

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,
+  };
+}