@designcrowd/fe-shared-lib 1.7.0 → 1.8.0

package/docs/voice-to-text-discussion.md

@@ -0,0 +1,330 @@
+# Slack Thread: #growth-it-runs-on-local-team
+
+**Date:** 2026-04-09
+**Thread link:** https://designcrowd.slack.com/archives/C02955Q465R/p1775707213792599
+**Participants:** Zach, Loïc, ap, pmac, Mik
+
+---
+
+## Zach — 4:00 AM
+
+**@Loïc** for https://designcrowd.atlassian.net/browse/GT-9885 there is a chromium package that handles voice to text really well. Works on Edge, Chrome and Safari but not other browsers. I've slapped together a PoC here https://gt-9885.bc.designcrowd.ninja/ . Nothing I need you to do, just wanted you to be aware so you can coordinate/plan appropriately.
+
+![image.png](voice-to-text-discussion-attachments/image.png)
+
+---
+
+## Loïc — 4:41 AM
+
+Thanks Zach. Have you got a link to that package?
+
+Doesn’t seem to work in other languages but maybe relies on the browser set language?
+
+> Works on Edge, Chrome and Safari but not other browsers
+What other browsers would that not work on? Would imagine it would cover most if built on Chromium?
+
+---
+
+## Loïc — 4:43 AM
+
+> Doesn’t seem to work in other languages but maybe relies on the browser set language?
+GPT voice to text works fine on the same browser for me when I speak in French.
+
+---
+
+## Zach — 4:46 AM
+
+https://vueuse.org/core/useSpeechRecognition/ is the package. This is the browser support breakdown https://caniuse.com/mdn-api_speechrecognitionevent. It uses https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API under the hood. Skimming the docs I dont see anything about language support.
+
+![image.png](voice-to-text-discussion-attachments/image_1.png)
+
+---
+
+## Loïc — 4:49 AM
+
+GPT:
+> Short answer: **yes — but not by itself.**
+> How `useSpeechRecognition` handles languages
+> The VueUse composable is just a thin wrapper around the browser’s **Web Speech API**. It lets you *set* the language via the `lang` option:
+> ```useSpeechRecognition({
+>   lang: 'fr-FR' // or 'es-ES', 'de-DE', etc.
+> })```
+> So technically:
+> :white_check_mark: You **can use other languages** by changing `lang`
+> • :exclamation: But support depends entirely on the **browser + underlying speech engine** ([vueuse.org](http://vueuse.org))
+> 
+> What actually determines language support
+> The real behavior comes from the browser’s `SpeechRecognition` implementation:
+> Chrome (and Chromium browsers) → best support, many languages
+> Safari → limited support
+> • Firefox → basically **no support** for this API
+> VueUse just passes your config through — it doesn’t add language models itself. ([vueuse.org](http://vueuse.org))
+> 
+> Practical implications
+> • You can switch languages dynamically:
+> ```const lang = ref('en-US')
+> 
+> const speech = useSpeechRecognition({ lang })```
+> • But:
+> Some languages may be **less accurate**
+> Some may **not work at all** depending on browser
+> Offline support is usually **not available**
+> 
+> TL;DR
+> • :white_check_mark: Works with multiple languages via `lang`
+> • :exclamation: Limited by browser + Web Speech API support
+> • :x: Not a full multilingual engine on its own
+> 
+> If you tell me what languages you want (e.g. French + English switching), I can suggest the most reliable setup or alternatives (like Whisper, Vosk, etc.).
+
+---
+
+## Zach — 4:49 AM
+
+Oh thats super easy.
+
+---
+
+## Zach — 4:50 AM
+
+We always have the users language handy
+
+---
+
+## Loïc — 4:50 AM
+
+:+1:
+
+---
+
+## Loïc — 4:50 AM
+
+No Firefox support is probably the biggest unknown here but if we are able to hide the functionality if the browser is not supported then that should be fine.
+
+---
+
+## Loïc — 4:51 AM
+
+FYI **@ap** ^
+
+---
+
+## Zach — 4:52 AM
+
+Hiding should also be easy. It's already working in my demo.
+
+---
+
+## ap — 5:02 AM
+
+we could extend this to send to a cloud service to do the speech to text for firefox?
+
+---
+
+## Zach — 5:04 AM
+
+Thats where it starts to get tricky. We would need to use/build a cloud service if we wanted to support firefox. It's just a lot more effort.
+
+---
+
+## Zach — 5:04 AM
+
+Also this is free
+
+---
+
+## ap — 5:10 AM
+
+i was thinking as a fallback at a later stage once we understand the take up from customers
+
+---
+
+## Loïc — 12:13 AM
+
+**@pmac**
+
+---
+
+## Zach — 3:28 AM
+
+https://gt-9885.dcom.designcrowd.ninja/ **@Loïc** **@ap** Check it out.
+1. Use Chrome or Safari
+2. Make sure to set the AB test variations like in the screen shot. 
+3. First click should ask for microphone permissions
+4. It will transcribe into the input in real time
+5. Click to stop
+6. ta daaa
+**@ap** It is very easy to wire up: https://github.com/designcrowd/BrandCrowd.Net/pull/12884/changes#diff-8cf5baa45c1f1700d712ccef3bc0485214f743b907c9916c9bc6372b9475bbf8
+
+• It will hide itself if the browser does not support it
+• Language support is there but not tested yet
+• emits events for interim transcript chunks and the final transcript
+• Easy to drop in and wire up to any existing input
+• Its only styled for the new ai prompt input at the moment. We will need to add style variations in fe-shared-lib.
+Lets me know if there are any questions/changes you want. If not, I will wrap it up and get it to QA.
+
+![image.png](voice-to-text-discussion-attachments/image_2.png)
+
+---
+
+## pmac — 3:32 AM
+
+just catching up .. this is client side and only works in some browsers?
+
+---
+
+## Zach — 3:32 AM
+
+correct
+
+---
+
+## pmac — 3:39 AM
+
+.. and I assume you chose this path as it was quick to implement
+
+---
+
+## pmac — 3:39 AM
+
+I have a feeling that we're going to see much better transcription using the newer speech to text models
+
+---
+
+## pmac — 3:47 AM
+
+what does the server side solution look like, that would work for all browsers? I suppose we'd be sending wav/mp3 to a backend transcription.
+
+---
+
+## Zach — 1:10 AM
+
+If we wanted to do server side we have a few options. Best choice is to buy something off the shelf. Having made my own local tool for voice to text using whisper, there are a bunch of issues we just dont want to handle. Whisper starts to hallucinate pretty badly after about 90 seconds, so we would have to handle streaming, chunking and a bunch of other stuff.
+
+I would want to find something that we just import a package and set an API key somewhere and then its done.
+
+The approach using the built in browser tools was so easy and fast I think it makes sense to try it out first and see what kind of returns we get. Also, all phone keyboards have voice to text built in that I think most people prefer to use.
+
+Where we are at now with the browser solution is to just do a once over on styling and nail down the AB test variation details and timing. It's code complete.
+
+---
+
+## pmac — 1:13 AM
+
+for server side, I would be expecting us to use something like the AWS Transcribe product
+
+---
+
+## Zach — 1:15 AM
+
+Thats the one I was looking at before I stumbled onto the browser native option.
+
+---
+
+## Zach — 1:17 AM
+
+Looks like the price is $1.44/hr for streaming transcription.
+
+---
+
+## pmac — 1:18 AM
+
+lets leave it in the back pocket
+
+---
+
+## Loïc — 1:41 AM
+
+works well in French
+
+---
+
+## Loïc — 1:42 AM
+
+the UI doesn’t look like what we had in designs?
+
+---
+
+## Zach — 1:43 AM
+
+Yea, I can't find designs for the new AI long prompt input we've got.
+
+---
+
+## Zach — 1:44 AM
+
+If you are happy with the design we've got in the figma for the other style I can apply to both.
+
+---
+
+## Loïc — 1:44 AM
+
+these ones in the ticket https://www.figma.com/design/gz0bEUjboSGaAMMtalOqVS/Maker---Speech-to-Text-in-AI?node-id=7-636&t=cIYxelUljv4Qp17M-1 ?
+
+![Screenshot 2026-04-15 at 11.44.18 am.png](voice-to-text-discussion-attachments/Screenshot 2026-04-15 at 11.44.18 am.png)
+
+---
+
+## Zach — 1:45 AM
+
+You sure you want that same design for the dark theme AI prompt as well?
+
+---
+
+## Zach — 1:45 AM
+
+Happy to do it, I can just implement both dark and light so it looks like the figma designs just with reversed colors on the AI prompt.
+
+---
+
+## pmac — 1:48 AM
+
+**@Zach** how do I get it to show for me?
+
+---
+
+## Zach — 1:49 AM
+
+In the bottom right there is an "AB" button. Click it and set these two campaigns to variation 1.
+
+![image.png](voice-to-text-discussion-attachments/image_3.png)
+
+---
+
+## Loïc — 1:49 AM
+
+**@Mik** see Zach’s comment about dark theme AI prompt
+
+---
+
+## Mik — 2:00 AM
+
+hey **@Zach**, ideally it should look like this in dark mode - is this also what you envision?
+
+![image.png](voice-to-text-discussion-attachments/image_4.png)
+
+---
+
+## Loïc — 2:01 AM
+
+have you got a screen for when it’s recording?
+
+---
+
+## Zach — 2:06 AM
+
+**@Mik** that was what I was thinking.  We've already got the microphone icon so all good there. Is the light grey circle around the microphone icon indicating when its recording?
+
+---
+
+## Mik — 2:08 AM
+
+yes, it's recording
+
+---
+
+## Zach — 2:09 AM
+
+I will get the UI tightened up then lets everyone know when its ready for another review.
+
+---

package/index.cjs

@@ -1,17 +1,17 @@
-const bcTheme = require("./src/themes/bc");
-const bpTheme = require("./src/themes/bp");
-const dcTheme = require("./src/themes/dc");
-const cdTheme = require("./src/themes/cd");
-const dcomTheme = require("./src/themes/dcom");
-const viewports = require("./src/viewports");
-
-module.exports = {
-  themes: {
-    brandCrowd: bcTheme,
-    brandPage: bpTheme,
-    crazyDomains: cdTheme,
-    designCrowd: dcTheme,
-    designCom: dcomTheme,
-  },
-  viewports,
+const bcTheme = require("./src/themes/bc");
+const bpTheme = require("./src/themes/bp");
+const dcTheme = require("./src/themes/dc");
+const cdTheme = require("./src/themes/cd");
+const dcomTheme = require("./src/themes/dcom");
+const viewports = require("./src/viewports");
+
+module.exports = {
+  themes: {
+    brandCrowd: bcTheme,
+    brandPage: bpTheme,
+    crazyDomains: cdTheme,
+    designCrowd: dcTheme,
+    designCom: dcomTheme,
+  },
+  viewports,
 };

package/index.js

@@ -1,62 +1,64 @@
-export { default as UploadYourLogoDropzone } from './src/experiences/components/UploadYourLogoDropzone/UploadYourLogoDropzone.vue';
-export { default as UploadYourLogoApplication } from './src/experiences/components/UploadYourLogoApplication/UploadYourLogoApplication.vue';
-export { default as UploadedLogoSearchResultCard } from './src/experiences/components/UploadedLogoSearchResultCard/UploadedLogoSearchResultCard.vue';
-export { default as SignUpModal } from './src/experiences/components/AuthFlow/SignUpModal.vue';
-export { default as SignUp } from './src/experiences/components/AuthFlow/SignUp.vue';
-export { default as SignIn } from './src/experiences/components/AuthFlow/SignIn.vue';
-export { default as ForgotPasswordModal } from './src/experiences/components/AuthFlow/ForgotPasswordModal.vue';
-export { default as ForgotPassword } from './src/experiences/components/AuthFlow/ForgotPassword.vue';
-export { default as ResetPasswordModal } from './src/experiences/components/AuthFlow/ResetPasswordModal.vue';
-export { default as ResetPassword } from './src/experiences/components/AuthFlow/ResetPassword.vue';
-export { default as ResetPasswordSuccessModal } from './src/experiences/components/AuthFlow/ResetPasswordSuccessModal.vue';
-export { default as PaymentConfigList } from './src/experiences/components/PaymentConfigList/PaymentConfigList.vue';
-export { default as PaymentConfigDropdown } from './src/experiences/components/PaymentConfigList/PaymentConfigDropdown.vue';
-export { default as brandPageApiClient } from './src/experiences/clients/brand-page-api.client';
-export { default as brandCrowdApiClient } from './src/experiences/clients/brand-crowd-api.client';
-export { default as SellDomainNameListModal } from './src/experiences/components/SellDomainNameListModal/SellDomainNameListModal.vue';
-export { default as SellDomainNameList } from './src/experiences/components/SellDomainNameList/SellDomainNameList.vue';
-export { default as SellDomainNameWidget } from './src/experiences/components/SellDomainNameWidget/SellDomainNameWidget.vue';
-export { default as PublishBrandPageModal } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue';
-export { default as PublishBrandPageCard } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue';
-export { default as WebsiteContextualUpgradeModal } from './src/experiences/components/WebsitesContextualUpgradeModal/WebsiteContextualUpgradeModal.vue';
-export { WEBSITE_UPGRADE_CONTEXT_TYPES } from './src/experiences/models/websiteContextualModel';
-
-export { setSharedLibLocaleAsync, tr } from './src/useSharedLibTranslate';
-
-export { default as Button } from './src/atoms/components/Button/Button.vue';
-export { default as ButtonGroup } from './src/atoms/components/ButtonGroup/ButtonGroup.vue';
-export { default as Dropdown } from './src/atoms/components/Dropdown/Dropdown.vue';
-export { default as DropdownItem } from './src/atoms/components/Dropdown/DropdownItem.vue';
-export { default as Icon } from './src/atoms/components/Icon/Icon.vue';
-export { default as DcomIcon } from './src/atoms/components/design-com/Icon/Icon.vue';
-export { default as Modal } from './src/atoms/components/Modal/Modal.vue';
-export { default as Loader } from './src/atoms/components/Loader/Loader.vue';
-export { default as AiPoweredLoader } from './src/atoms/components/AiPoweredLoader/AiPoweredLoader.vue';
-export { default as Tooltip } from './src/atoms/components/Tooltip/Tooltip.vue';
-export { default as Picture } from './src/atoms/components/Picture/Picture.vue';
-export { default as HelloBar } from './src/atoms/components/HelloBar/HelloBar.vue';
-export { default as PromoCard } from './src/atoms/components/PromoCard/PromoCard.vue';
-export { default as SearchBar } from './src/atoms/components/SearchBar/SearchBar.vue';
-export { default as StarRating } from './src/atoms/components/StarRating/StarRating.vue';
-export { default as TabMenu } from './src/atoms/components/TabMenu/TabMenu.vue';
-export { default as TextInput } from './src/atoms/components/TextInput/TextInput.vue';
-export { default as TextCopyField } from './src/atoms/components/TextCopyField/TextCopyField.vue';
-export { default as Textarea } from './src/atoms/components/Textarea/Textarea.vue';
-export { default as Toggle } from './src/atoms/components/Toggle/Toggle.vue';
-export { default as Checkbox } from './src/atoms/components/Checkbox/Checkbox.vue';
-export { default as ColorPicker } from './src/atoms/components/ColorPicker/ColorPicker.vue';
-export { default as Carousel } from './src/atoms/components/Carousel/Carousel.vue';
-export { default as Checktile } from './src/atoms/components/Checktile/Checktile.vue';
-export { default as Pill } from './src/atoms/components/Pill/Pill.vue';
-export { default as PillBar } from './src/atoms/components/PillBar/PillBar.vue';
-export { default as Notice } from './src/atoms/components/Notice/Notice.vue';
-export { default as Masonry } from './src/atoms/components/Masonry/Masonry.vue';
-export { default as CollapsiblePanel } from './src/atoms/components/CollapsiblePanel/CollapsiblePanel.vue';
-export { default as Slider } from './src/atoms/components/Slider/Slider.vue';
-export { default as Price } from './src/atoms/components/Price/Price.vue';
-export { default as HashRouteModal } from './src/atoms/components/Modal/HashRouteModal.vue';
-export { default as Select } from './src/atoms/components/Select/Select.vue';
-export { default as NumberStepper } from './src/atoms/components/NumberStepper/NumberStepper.vue';
-export { default as CopyToClipboardText } from './src/atoms/components/CopyToClipboardText/CopyToClipboardText.vue';
-export { default as SparkleIcon } from './src/atoms/components/SparkleIcon/SparkleIcon.vue';
-export { default as SideNavigationPanel } from './src/experiences/components/SideNavigationPanel/SideNavigationPanel.vue';
+export { default as UploadYourLogoDropzone } from './src/experiences/components/UploadYourLogoDropzone/UploadYourLogoDropzone.vue';
+export { default as UploadYourLogoApplication } from './src/experiences/components/UploadYourLogoApplication/UploadYourLogoApplication.vue';
+export { default as UploadedLogoSearchResultCard } from './src/experiences/components/UploadedLogoSearchResultCard/UploadedLogoSearchResultCard.vue';
+export { default as SignUpModal } from './src/experiences/components/AuthFlow/SignUpModal.vue';
+export { default as SignUp } from './src/experiences/components/AuthFlow/SignUp.vue';
+export { default as SignIn } from './src/experiences/components/AuthFlow/SignIn.vue';
+export { default as ForgotPasswordModal } from './src/experiences/components/AuthFlow/ForgotPasswordModal.vue';
+export { default as ForgotPassword } from './src/experiences/components/AuthFlow/ForgotPassword.vue';
+export { default as ResetPasswordModal } from './src/experiences/components/AuthFlow/ResetPasswordModal.vue';
+export { default as ResetPassword } from './src/experiences/components/AuthFlow/ResetPassword.vue';
+export { default as ResetPasswordSuccessModal } from './src/experiences/components/AuthFlow/ResetPasswordSuccessModal.vue';
+export { default as PaymentConfigList } from './src/experiences/components/PaymentConfigList/PaymentConfigList.vue';
+export { default as PaymentConfigDropdown } from './src/experiences/components/PaymentConfigList/PaymentConfigDropdown.vue';
+export { default as brandPageApiClient } from './src/experiences/clients/brand-page-api.client';
+export { default as brandCrowdApiClient } from './src/experiences/clients/brand-crowd-api.client';
+export { default as SellDomainNameListModal } from './src/experiences/components/SellDomainNameListModal/SellDomainNameListModal.vue';
+export { default as SellDomainNameList } from './src/experiences/components/SellDomainNameList/SellDomainNameList.vue';
+export { default as SellDomainNameWidget } from './src/experiences/components/SellDomainNameWidget/SellDomainNameWidget.vue';
+export { default as PublishBrandPageModal } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue';
+export { default as PublishBrandPageCard } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue';
+export { default as WebsiteContextualUpgradeModal } from './src/experiences/components/WebsitesContextualUpgradeModal/WebsiteContextualUpgradeModal.vue';
+export { WEBSITE_UPGRADE_CONTEXT_TYPES } from './src/experiences/models/websiteContextualModel';
+
+export { setSharedLibLocaleAsync, tr } from './src/useSharedLibTranslate';
+export { useVoiceToText } from './src/useVoiceToText';
+
+export { default as Button } from './src/atoms/components/Button/Button.vue';
+export { default as ButtonGroup } from './src/atoms/components/ButtonGroup/ButtonGroup.vue';
+export { default as Dropdown } from './src/atoms/components/Dropdown/Dropdown.vue';
+export { default as DropdownItem } from './src/atoms/components/Dropdown/DropdownItem.vue';
+export { default as Icon } from './src/atoms/components/Icon/Icon.vue';
+export { default as DcomIcon } from './src/atoms/components/design-com/Icon/Icon.vue';
+export { default as Modal } from './src/atoms/components/Modal/Modal.vue';
+export { default as Loader } from './src/atoms/components/Loader/Loader.vue';
+export { default as AiPoweredLoader } from './src/atoms/components/AiPoweredLoader/AiPoweredLoader.vue';
+export { default as Tooltip } from './src/atoms/components/Tooltip/Tooltip.vue';
+export { default as Picture } from './src/atoms/components/Picture/Picture.vue';
+export { default as HelloBar } from './src/atoms/components/HelloBar/HelloBar.vue';
+export { default as PromoCard } from './src/atoms/components/PromoCard/PromoCard.vue';
+export { default as SearchBar } from './src/atoms/components/SearchBar/SearchBar.vue';
+export { default as StarRating } from './src/atoms/components/StarRating/StarRating.vue';
+export { default as TabMenu } from './src/atoms/components/TabMenu/TabMenu.vue';
+export { default as TextInput } from './src/atoms/components/TextInput/TextInput.vue';
+export { default as TextCopyField } from './src/atoms/components/TextCopyField/TextCopyField.vue';
+export { default as Textarea } from './src/atoms/components/Textarea/Textarea.vue';
+export { default as Toggle } from './src/atoms/components/Toggle/Toggle.vue';
+export { default as Checkbox } from './src/atoms/components/Checkbox/Checkbox.vue';
+export { default as ColorPicker } from './src/atoms/components/ColorPicker/ColorPicker.vue';
+export { default as Carousel } from './src/atoms/components/Carousel/Carousel.vue';
+export { default as Checktile } from './src/atoms/components/Checktile/Checktile.vue';
+export { default as Pill } from './src/atoms/components/Pill/Pill.vue';
+export { default as PillBar } from './src/atoms/components/PillBar/PillBar.vue';
+export { default as Notice } from './src/atoms/components/Notice/Notice.vue';
+export { default as Masonry } from './src/atoms/components/Masonry/Masonry.vue';
+export { default as CollapsiblePanel } from './src/atoms/components/CollapsiblePanel/CollapsiblePanel.vue';
+export { default as Slider } from './src/atoms/components/Slider/Slider.vue';
+export { default as Price } from './src/atoms/components/Price/Price.vue';
+export { default as HashRouteModal } from './src/atoms/components/Modal/HashRouteModal.vue';
+export { default as Select } from './src/atoms/components/Select/Select.vue';
+export { default as NumberStepper } from './src/atoms/components/NumberStepper/NumberStepper.vue';
+export { default as CopyToClipboardText } from './src/atoms/components/CopyToClipboardText/CopyToClipboardText.vue';
+export { default as SparkleIcon } from './src/atoms/components/SparkleIcon/SparkleIcon.vue';
+export { default as VoiceToTextButton } from './src/atoms/components/VoiceToTextButton/VoiceToTextButton.vue';
+export { default as SideNavigationPanel } from './src/experiences/components/SideNavigationPanel/SideNavigationPanel.vue';

package/nodemon.translation.json

@@ -1,7 +1,7 @@
-{
-    "exec": "npm run bundle-translation",
-    "ext": ".json",
-    "watch": [
-        "./src"
-    ]
+{
+    "exec": "npm run bundle-translation",
+    "ext": ".json",
+    "watch": [
+        "./src"
+    ]
 }