feat: hide audio interface for non chrome browsers (COR-000) (#187)

voiceflow · Sep 25, 2024 · 7b969b2 · 7b969b2
1 parent fbed384
commit 7b969b2
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 8 deletions.
diff --git a/packages/react-chat/src/components/ChatInput/hooks.ts b/packages/react-chat/src/components/ChatInput/hooks.ts
@@ -1,6 +1,7 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import ReactSpeechRecognition, { useSpeechRecognition as useReactSpeechRecognition } from 'react-speech-recognition';
 
+import { isChrome } from '@/device';
 import type { ChatSpeechRecognitionConfig, ChatSpeechRecognitionState } from '@/dtos/ChatConfig.dto';
 
 export const useSpeechRecognition = ({
@@ -15,9 +16,9 @@ export const useSpeechRecognition = ({
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const reactSpeechRecognition = useReactSpeechRecognition({ clearTranscriptOnListen: true });
 
+  const browserSupportsSpeechRecognition = reactSpeechRecognition.browserSupportsSpeechRecognition && isChrome();
   const customSpeechRecognitionEnabled =
-    !!customSpeechRecognition &&
-    (customSpeechRecognition.overrideNative || !reactSpeechRecognition.browserSupportsSpeechRecognition);
+    !!customSpeechRecognition && (customSpeechRecognition.overrideNative || !browserSupportsSpeechRecognition);
 
   const prevListening = useRef(
     customSpeechRecognitionEnabled ? customSpeechRecognition.initialState.listening : reactSpeechRecognition.listening
@@ -94,7 +95,7 @@ export const useSpeechRecognition = ({
   }, [customSpeechRecognitionEnabled]);
 
   return {
-    available: customSpeechRecognitionEnabled || reactSpeechRecognition.browserSupportsSpeechRecognition,
+    available: customSpeechRecognitionEnabled || browserSupportsSpeechRecognition,
     listening: customSpeechRecognitionEnabled
       ? customSpeechRecognitionState.listening
       : reactSpeechRecognition.listening,

diff --git a/packages/react-chat/src/constants.ts b/packages/react-chat/src/constants.ts
@@ -32,5 +32,3 @@ export enum ClassName {
 }
 
 export const DEVICE_INFO = Bowser.parse(window.navigator.userAgent);
-
-export const IS_IOS = DEVICE_INFO.os.name === 'iOS';
diff --git a/packages/react-chat/src/contexts/RuntimeContext/useRuntimeState.ts b/packages/react-chat/src/contexts/RuntimeContext/useRuntimeState.ts
@@ -5,7 +5,7 @@ import cuid from 'cuid';
 import { useEffect, useRef, useState } from 'react';
 
 import { DEFAULT_MESSAGE_DELAY, MessageType } from '@/components/SystemResponse/constants';
-import { IS_IOS } from '@/constants';
+import { isIOS } from '@/device';
 import type { AssistantOptions } from '@/dtos/AssistantOptions.dto';
 import type { ChatConfig } from '@/dtos/ChatConfig.dto';
 import { useStateRef } from '@/hooks/useStateRef';
@@ -148,7 +148,7 @@ export const useRuntimeState = ({ assistant, config, traceHandlers }: Settings)
     playAudiosStack.current = [];
 
     // we need to play a silent audio on user interaction to enable async audio playback
-    if (IS_IOS && isAudioOutputEnabled()) {
+    if (isIOS() && isAudioOutputEnabled()) {
       audio.play(silentAudio);
     }
 
@@ -184,8 +184,8 @@ export const useRuntimeState = ({ assistant, config, traceHandlers }: Settings)
   const getTurns = () => sessionRef.current.turns;
 
   const stopAudios = () => {
-    audio.stop();
     playAudiosStack.current = [];
+    audio.stop();
   };
 
   const playAudioCircle = async () => {

diff --git a/packages/react-chat/src/device.ts b/packages/react-chat/src/device.ts
@@ -0,0 +1,23 @@
+import { DEVICE_INFO } from '@/constants';
+
+export const isIOS = () => DEVICE_INFO.os.name === 'iOS';
+
+export const isBrave = () => {
+  const browserNavigator = globalThis.navigator as Navigator & { brave?: { isBrave: () => boolean } };
+
+  if (!browserNavigator) return false;
+
+  if (browserNavigator.brave !== undefined) {
+    return browserNavigator.brave.isBrave.name === 'isBrave';
+  }
+
+  return false;
+};
+
+export const isArc = () => !!getComputedStyle(document.documentElement).getPropertyValue('--arc-palette-title');
+export const isEdge = () => DEVICE_INFO.browser.name === 'Microsoft Edge';
+export const isOpera = () => DEVICE_INFO.browser.name === 'Opera';
+export const isChrome = () => !isBrave() && !isArc() && DEVICE_INFO.browser.name === 'Chrome';
+export const isSafari = () => DEVICE_INFO.browser.name === 'Safari';
+export const isFirefox = () => DEVICE_INFO.browser.name === 'Firefox';
+export const isChromium = () => isEdge() || isChrome() || isBrave() || isArc() || isOpera();
Original file line number	Diff line number	Diff line change
Expand Up		@@ -32,5 +32,3 @@ export enum ClassName {
		}

		export const DEVICE_INFO = Bowser.parse(window.navigator.userAgent);

		export const IS_IOS = DEVICE_INFO.os.name === 'iOS';