@designcrowd/fe-shared-lib 1.6.9 → 1.6.10-voiceText-1

package/public/css/tailwind-crazyDomains.css

@@ -1896,6 +1896,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(140 18 59 / var(--tw-text-opacity));
 }
+.theme-crazyDomains .tw-text-grayscale-400 {
+  --tw-text-opacity: 1;
+  color: rgb(235 238 243 / var(--tw-text-opacity));
+}
 .theme-crazyDomains .tw-text-grayscale-500 {
   --tw-text-opacity: 1;
   color: rgb(199 204 207 / var(--tw-text-opacity));
@@ -2049,6 +2053,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-crazyDomains .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-crazyDomains .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2076,6 +2085,10 @@ video {
 .theme-crazyDomains .tw-ease-out {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+.theme-crazyDomains .hover\:tw-border-grayscale-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(240 240 245 / var(--tw-border-opacity));
+}
 .theme-crazyDomains .hover\:tw-border-grayscale-400:hover {
   --tw-border-opacity: 1;
   border-color: rgb(235 238 243 / var(--tw-border-opacity));
@@ -2240,6 +2253,18 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-crazyDomains .focus\:tw-ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.theme-crazyDomains .focus\:tw-ring-primary-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(111 172 47 / var(--tw-ring-opacity));
+}
+.theme-crazyDomains .focus\:tw-ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
 .theme-crazyDomains .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(0 161 239 / var(--tw-text-opacity));

package/public/css/tailwind-designCom.css

@@ -1896,6 +1896,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(136 44 32 / var(--tw-text-opacity));
 }
+.theme-designCom .tw-text-grayscale-400 {
+  --tw-text-opacity: 1;
+  color: rgb(227 227 227 / var(--tw-text-opacity));
+}
 .theme-designCom .tw-text-grayscale-500 {
   --tw-text-opacity: 1;
   color: rgb(209 209 209 / var(--tw-text-opacity));
@@ -2049,6 +2053,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-designCom .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-designCom .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2076,6 +2085,10 @@ video {
 .theme-designCom .tw-ease-out {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+.theme-designCom .hover\:tw-border-grayscale-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(237 237 237 / var(--tw-border-opacity));
+}
 .theme-designCom .hover\:tw-border-grayscale-400:hover {
   --tw-border-opacity: 1;
   border-color: rgb(227 227 227 / var(--tw-border-opacity));
@@ -2240,6 +2253,18 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-designCom .focus\:tw-ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.theme-designCom .focus\:tw-ring-primary-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(63 89 246 / var(--tw-ring-opacity));
+}
+.theme-designCom .focus\:tw-ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
 .theme-designCom .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(63 89 246 / var(--tw-text-opacity));

package/public/css/tailwind-designCrowd.css

@@ -1896,6 +1896,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(146 38 36 / var(--tw-text-opacity));
 }
+.theme-designCrowd .tw-text-grayscale-400 {
+  --tw-text-opacity: 1;
+  color: rgb(230 230 230 / var(--tw-text-opacity));
+}
 .theme-designCrowd .tw-text-grayscale-500 {
   --tw-text-opacity: 1;
   color: rgb(204 204 204 / var(--tw-text-opacity));
@@ -2049,6 +2053,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-designCrowd .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-designCrowd .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2076,6 +2085,10 @@ video {
 .theme-designCrowd .tw-ease-out {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+.theme-designCrowd .hover\:tw-border-grayscale-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 239 239 / var(--tw-border-opacity));
+}
 .theme-designCrowd .hover\:tw-border-grayscale-400:hover {
   --tw-border-opacity: 1;
   border-color: rgb(230 230 230 / var(--tw-border-opacity));
@@ -2240,6 +2253,18 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-designCrowd .focus\:tw-ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.theme-designCrowd .focus\:tw-ring-primary-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(17 151 235 / var(--tw-ring-opacity));
+}
+.theme-designCrowd .focus\:tw-ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
 .theme-designCrowd .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(17 151 235 / var(--tw-text-opacity));

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';
@@ -636,6 +637,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.js

@@ -0,0 +1,105 @@
+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
+          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: 'Prompt Input (Dark Theme)',
+};
+
+export const PromptVariantStates = () => ({
+  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">Prompt 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 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 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 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 :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 red ring animation
+      </p>
+    </div>
+  `,
+});
+
+PromptVariantStates.story = {
+  name: 'Prompt Variant States',
+};

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

@@ -0,0 +1,121 @@
+<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-2 tw-bg-transparent tw-flex tw-items-center tw-justify-center tw-transition-all tw-duration-200 tw-cursor-pointer focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-offset-2 focus:tw-ring-primary-500"
+    :class="[
+      sizeClasses,
+      isListening ? 'voice-prompt-listening tw-border-error-500' : 'tw-border-grayscale-400 hover:tw-border-grayscale-300',
+      disabled ? 'tw-opacity-50 tw-cursor-not-allowed' : '',
+    ]"
+    @click="toggle"
+  >
+    <Icon
+      name="microphone"
+      :size="iconSize"
+      :class="isListening ? 'tw-text-error-500' : 'tw-text-grayscale-400'"
+    />
+  </button>
+</template>
+
+<script setup>
+import { watch, toRef, computed } from 'vue';
+import Icon from '../Icon/Icon.vue';
+import { useVoiceToText } from '../../../useVoiceToText';
+
+const props = defineProps({
+  lang: {
+    type: String,
+    default: 'en-US',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (value) => ['sm', 'md', 'lg'].includes(value),
+  },
+});
+
+const sizeClasses = computed(() => {
+  const sizes = {
+    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 = {
+    sm: 'sm',
+    md: 'md',
+    lg: 'md',
+  };
+  return sizes[props.size];
+});
+
+const emit = defineEmits(['on-transcript', 'on-interim-transcript', 'on-start', 'on-stop', 'on-error']);
+
+const { isSupported, isListening, transcript, isFinal, error, toggle, setLang } = useVoiceToText({
+  lang: props.lang,
+});
+
+// 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 {
+  animation: voice-ring-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes voice-ring-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
+  }
+}
+</style>

package/src/useVoiceToText.js

@@ -0,0 +1,174 @@
+import { ref, computed, readonly } from 'vue';
+
+// Singleton instance and state (lazily initialized)
+let recognition = null;
+let isInitialized = false;
+let errorClearTimeout = null;
+let state = null;
+
+// Error message mapping per spec
+const ERROR_MESSAGES = {
+  '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() {
+  if (!state) {
+    state = {
+      isListening: ref(false),
+      transcript: ref(''),
+      isFinal: ref(false),
+      error: ref(null),
+    };
+  }
+  return state;
+}
+
+/**
+ * Singleton composable that wraps the Web Speech API (SpeechRecognition).
+ * All calls to useVoiceToText() return the same shared instance.
+ *
+ * @param {Object} options
+ * @param {string} options.lang - BCP 47 language tag (default: 'en-US')
+ * @returns {Object} Voice-to-text state and controls
+ */
+export function useVoiceToText(options = {}) {
+  const { lang = 'en-US' } = options;
+
+  // Get or create shared state
+  const { isListening, transcript, isFinal, error } = getState();
+
+  // Check for browser support
+  const SpeechRecognition =
+    typeof window !== 'undefined' ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
+
+  const isSupported = computed(() => !!SpeechRecognition);
+
+  // Initialize singleton once
+  if (!isInitialized && SpeechRecognition) {
+    recognition = new SpeechRecognition();
+    recognition.continuous = true;
+    recognition.interimResults = true;
+
+    recognition.onresult = (event) => {
+      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) => {
+      // 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) {
+      // Handle case where recognition is already started
+      // eslint-disable-next-line no-console
+      console.warn('[useVoiceToText] Failed to start:', e.message);
+    }
+  };
+
+  const stop = () => {
+    if (!recognition || !isListening.value) return;
+
+    try {
+      recognition.stop();
+    } catch (e) {
+      // Handle case where recognition is already stopped
+      // eslint-disable-next-line no-console
+      console.warn('[useVoiceToText] Failed to stop:', e.message);
+    }
+  };
+
+  const toggle = () => {
+    if (isListening.value) {
+      stop();
+    } else {
+      start();
+    }
+  };
+
+  const setLang = (newLang) => {
+    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,
+  };
+}