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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.6.10-voiceText-1",
+  "version": "1.6.10-voiceText-2",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/public/css/tailwind-brandCrowd.css

@@ -1438,6 +1438,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(208 208 208 / var(--tw-bg-opacity));
 }
+.theme-brandCrowd .tw-bg-grayscale-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(43 43 43 / var(--tw-bg-opacity));
+}
 .theme-brandCrowd .tw-bg-info-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(204 234 247 / var(--tw-bg-opacity));
@@ -2085,10 +2089,6 @@ video {
 .theme-brandCrowd .tw-ease-out {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
-.theme-brandCrowd .hover\:tw-border-grayscale-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(239 239 239 / var(--tw-border-opacity));
-}
 .theme-brandCrowd .hover\:tw-border-grayscale-400:hover {
   --tw-border-opacity: 1;
   border-color: rgb(230 230 230 / var(--tw-border-opacity));
@@ -2137,6 +2137,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(208 208 208 / var(--tw-bg-opacity));
 }
+.theme-brandCrowd .hover\:tw-bg-grayscale-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(43 43 43 / var(--tw-bg-opacity));
+}
 .theme-brandCrowd .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(204 234 247 / var(--tw-bg-opacity));

package/public/css/tailwind-brandPage.css

@@ -1362,6 +1362,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(208 208 208 / var(--tw-bg-opacity));
 }
+.theme-brandPage .tw-bg-grayscale-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(43 43 43 / var(--tw-bg-opacity));
+}
 .theme-brandPage .tw-bg-transparent {
   background-color: transparent;
 }
@@ -1873,10 +1877,6 @@ video {
 .theme-brandPage .tw-ease-out {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
-.theme-brandPage .hover\:tw-border-grayscale-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(239 239 239 / var(--tw-border-opacity));
-}
 .theme-brandPage .hover\:tw-border-grayscale-400:hover {
   --tw-border-opacity: 1;
   border-color: rgb(230 230 230 / var(--tw-border-opacity));
@@ -1901,6 +1901,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(208 208 208 / var(--tw-bg-opacity));
 }
+.theme-brandPage .hover\:tw-bg-grayscale-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(43 43 43 / var(--tw-bg-opacity));
+}
 .theme-brandPage .hover\:tw-text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));

package/public/css/tailwind-crazyDomains.css

@@ -1438,6 +1438,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(199 204 207 / var(--tw-bg-opacity));
 }
+.theme-crazyDomains .tw-bg-grayscale-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(87 97 99 / var(--tw-bg-opacity));
+}
 .theme-crazyDomains .tw-bg-info-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(230 246 253 / var(--tw-bg-opacity));
@@ -2085,10 +2089,6 @@ 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));
@@ -2137,6 +2137,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(199 204 207 / var(--tw-bg-opacity));
 }
+.theme-crazyDomains .hover\:tw-bg-grayscale-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(87 97 99 / var(--tw-bg-opacity));
+}
 .theme-crazyDomains .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(230 246 253 / var(--tw-bg-opacity));

package/public/css/tailwind-designCom.css

@@ -1438,6 +1438,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(209 209 209 / var(--tw-bg-opacity));
 }
+.theme-designCom .tw-bg-grayscale-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
 .theme-designCom .tw-bg-info-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(236 238 254 / var(--tw-bg-opacity));
@@ -2085,10 +2089,6 @@ 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));
@@ -2137,6 +2137,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(209 209 209 / var(--tw-bg-opacity));
 }
+.theme-designCom .hover\:tw-bg-grayscale-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
 .theme-designCom .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(236 238 254 / var(--tw-bg-opacity));

package/public/css/tailwind-designCrowd.css

@@ -1438,6 +1438,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(204 204 204 / var(--tw-bg-opacity));
 }
+.theme-designCrowd .tw-bg-grayscale-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(82 93 96 / var(--tw-bg-opacity));
+}
 .theme-designCrowd .tw-bg-info-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(207 234 251 / var(--tw-bg-opacity));
@@ -2085,10 +2089,6 @@ 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));
@@ -2137,6 +2137,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(204 204 204 / var(--tw-bg-opacity));
 }
+.theme-designCrowd .hover\:tw-bg-grayscale-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(82 93 96 / var(--tw-bg-opacity));
+}
 .theme-designCrowd .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(207 234 251 / var(--tw-bg-opacity));