@designcrowd/fe-shared-lib 1.6.10-voiceText → 1.6.10-voiceText-2

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

@@ -1,18 +1,12 @@
 import VoiceToTextButton from './VoiceToTextButton.vue';
-import TextInput from '../TextInput/TextInput.vue';
 
 export default {
   title: 'Components/VoiceToTextButton',
   component: VoiceToTextButton,
 };
 
-export const Default = () => ({
+export const PromptInputDemo = () => ({
   components: { VoiceToTextButton },
-  template: '<VoiceToTextButton />',
-});
-
-export const WithTranscriptDisplay = () => ({
-  components: { VoiceToTextButton, TextInput },
   data() {
     return {
       transcript: '',
@@ -21,87 +15,228 @@ export const WithTranscriptDisplay = () => ({
     };
   },
   template: `
-    <div class="tw-flex tw-flex-col tw-gap-4 tw-max-w-md">
-      <div class="tw-flex tw-gap-2 tw-items-end">
-        <TextInput
+    <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"
-          label="Search"
-          placeholder="Click the mic and speak..."
-          class="tw-flex-1"
+          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-text-sm tw-text-grayscale-600">
-        <p v-if="isListening" class="tw-text-primary-500 tw-font-medium">
-          Listening... speak now
+
+      <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-500">
+        <p v-else-if="error" class="tw-text-error-400">
           {{ error }}
         </p>
-        <p v-else>
-          Click the microphone button to start voice input
-        </p>
       </div>
     </div>
   `,
 });
 
-WithTranscriptDisplay.story = {
-  name: 'Interactive Demo',
+PromptInputDemo.story = {
+  name: 'Dark - Prompt Input',
 };
 
-export const Disabled = () => ({
+export const DarkVariantStates = () => ({
   components: { VoiceToTextButton },
   template: `
-    <div class="tw-flex tw-gap-4 tw-items-center">
-      <div class="tw-text-center">
-        <VoiceToTextButton />
-        <p class="tw-text-xs tw-mt-2 tw-text-grayscale-600">Enabled</p>
-      </div>
-      <div class="tw-text-center">
-        <VoiceToTextButton :disabled="true" />
-        <p class="tw-text-xs tw-mt-2 tw-text-grayscale-600">Disabled</p>
+    <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>
   `,
 });
 
-Disabled.story = {
-  name: 'Disabled State',
+DarkVariantStates.story = {
+  name: 'Dark - Variant States',
 };
 
-export const LanguageVariants = () => ({
+export const LightInputDemo = () => ({
   components: { VoiceToTextButton },
   data() {
     return {
-      languages: [
-        { code: 'en-US', name: 'English (US)' },
-        { code: 'de-DE', name: 'German' },
-        { code: 'fr-FR', name: 'French' },
-        { code: 'es-ES', name: 'Spanish' },
-      ],
+      transcript: '',
+      isListening: false,
+      error: null,
     };
   },
   template: `
-    <div class="tw-flex tw-flex-wrap tw-gap-4">
-      <div
-        v-for="lang in languages"
-        :key="lang.code"
-        class="tw-text-center tw-p-2 tw-border tw-border-grayscale-300 tw-rounded"
-      >
-        <VoiceToTextButton :lang="lang.code" />
-        <p class="tw-text-xs tw-mt-2">{{ lang.name }}</p>
+    <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>
   `,
 });
 
-LanguageVariants.story = {
-  name: 'Language Variants',
+SideBySide.story = {
+  name: 'Side by Side Comparison',
 };

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

@@ -1,19 +1,31 @@
 <template>
-  <Button
+  <button
     v-if="isSupported"
-    icon="microphone"
+    type="button"
     :disabled="disabled"
-    variant="outline"
-    :class="{ 'voice-listening': isListening }"
     :aria-label="isListening ? 'Stop voice input' : 'Start voice input'"
     data-test="voice-to-text-button"
-    @on-click="toggle"
-  />
+    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"
+    />
+  </button>
 </template>
 
 <script setup>
-import { watch, toRef } from 'vue';
-import Button from '../Button/Button.vue';
+import { watch, toRef, computed } from 'vue';
+import Icon from '../Icon/Icon.vue';
 import { useVoiceToText } from '../../../useVoiceToText';
 
 const props = defineProps({
@@ -25,6 +37,34 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (value) => ['sm', 'md', 'lg'].includes(value),
+  },
+  variant: {
+    type: String,
+    default: 'dark',
+    validator: (value) => ['light', 'dark'].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']);
@@ -33,6 +73,21 @@ const { isSupported, isListening, transcript, isFinal, error, toggle, setLang }
   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);
 
@@ -68,17 +123,22 @@ watch(error, (newError) => {
 </script>
 
 <style scoped>
-.voice-listening {
-  animation: voice-pulse 1.5s ease-in-out infinite;
+.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-pulse {
+@keyframes voice-bg-pulse {
   0%,
   100% {
-    box-shadow: 0 0 0 0 var(--color-primary, rgba(242, 27, 63, 0.4));
+    opacity: 1;
   }
   50% {
-    box-shadow: 0 0 0 8px transparent;
+    opacity: 0.5;
   }
 }
 </style>

package/src/useVoiceToText.js

@@ -134,6 +134,7 @@ export function useVoiceToText(options = {}) {
   const stop = () => {
     if (!recognition || !isListening.value) return;
 
+    isListening.value = false;
     try {
       recognition.stop();
     } catch (e) {