Add Explicit mode for Text preference user.

app/package.json

@@ -1,13 +1,18 @@
 {
   "name": "impression",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Make your impression better",
   "keywords": [
-    "semantic-analysis",
+    "semantic analysis",
     "nlp",
-    "speech-recognition",
+    "speech recognition",
     "productivity",
-    "career"
+    "career",
+    "personal use",
+    "feedback",
+    "utility",
+    "react app",
+    "modern web"
   ],
   "homepage": "https://m-a-y-a-n-k.github.io/Impression/",
   "private": true,

app/src/components/AnimatedMic.jsx

@@ -10,6 +10,7 @@ import MicNotSupport from "./MicNotSupport";
 
 const AnimatedMic = ({ updateUserFeedback }) => {
   const [listen, setListen] = useState(false);
+  const [useText, setUseText] = useState(false);
 
   const {
     listening,
@@ -36,6 +37,10 @@ const AnimatedMic = ({ updateUserFeedback }) => {
     });
   };
 
+  const useTextOption = () => {
+    setUseText(true);
+  }
+
   useEffect(() => {
     if (!listening) {
       setListen(false);
@@ -56,8 +61,14 @@ const AnimatedMic = ({ updateUserFeedback }) => {
   const micNotSupported =
     !browserSupportsSpeechRecognition || !isMicrophoneAvailable;
 
-  if (micNotSupported) {
-    return <MicNotSupport updateUserFeedback={updateUserFeedback} />;
+  if (micNotSupported || useText) {
+    return (
+      <MicNotSupport 
+        updateUserFeedback={updateUserFeedback} 
+        explicitMode={useText}
+        setImplicitMode={() => setUseText(false)}
+      />
+    );
   }
 
   return (
@@ -74,6 +85,9 @@ const AnimatedMic = ({ updateUserFeedback }) => {
         <div className={"mic"} data-listen={listen}></div>
       </motion.div>
       {!listen && <p>Tap Mic</p>}
+      {!listen && (<div className="use-text-intead" onClick={useTextOption}>
+        <p>Don't use Mic? Go with <strong>Text</strong> instead</p>
+      </div>)}
     </div>
   );
 };

app/src/components/Intro.jsx

@@ -6,13 +6,14 @@ const Intro = () => {
     <Typewriter
       onInit={(typewriter) => {
         typewriter
+          .changeDeleteSpeed(50)
           .typeString("Hi ,")
           .pauseFor(500)
           .deleteAll()
-          .typeString("Let's help you sound impressive")
+          .typeString("Let's help you sound more impressive.")
           .deleteAll()
           .pauseFor(250)
-          .typeString("Try it out")
+          .typeString("Try it.")
           .start();
       }}
     />

app/src/components/MicNotSupport.jsx

@@ -6,30 +6,53 @@ import { Textarea } from "@fluentui/react-components";
 import { feedbackCTAMotionConfig } from "../config/feedbackCTAMotion";
 import { motion } from "framer-motion";
 
-const MicNotSupport = ({ updateUserFeedback }) => {
+const MicNotSupport = (props) => {
+  const { updateUserFeedback, explicitMode = false, setImplicitMode } = props;
   const [rtcIssue, setRtcIssue] = useState("device");
   const [text, setText] = useState("");
 
   useEffect(() => {
     const getRTCProblem = () => {
+      if(explicitMode){
+        setRtcIssue("explicit");
+        return ;
+      }
+
       if (!DetectRTC.isWebRTCSupported) {
         setRtcIssue("browser");
-      } else if (!DetectRTC.isWebsiteHasMicrophonePermissions) {
+        return ;
+      } 
+      if (!DetectRTC.isWebsiteHasMicrophonePermissions) {
         setRtcIssue("permission");
-      } else if (!DetectRTC.hasMicrophone) {
+        return ;
+      } 
+      if (!DetectRTC.hasMicrophone) {
         setRtcIssue("device");
+        return ;
       }
     };
 
     getRTCProblem();
-  }, []);
+  }, [explicitMode]);
 
   const { feedback, hint } = micSupportConfig[rtcIssue] || {};
 
   return (
     <div className="mic-support-container">
       {feedback && <h3 className="feedback">{feedback}</h3>}
-      {hint && <p className="hint">{hint}</p>}
+      {hint && (
+        <p 
+          className="hint" 
+          data-explicit={explicitMode} 
+          onClick={() => {
+            if(explicitMode){
+              setImplicitMode();
+            }
+          }}
+        >
+          {hint}
+        </p>
+      )}
       <Textarea
         value={text}
         onChange={(event) => {

app/src/config/micSupport.js

@@ -1,16 +1,21 @@
 export const micSupportConfig = {
-  browser: {
-    feedback: "Your browser does not support microphone",
-    hint: "Try a different browser or type below and submit instead"
-  },
   device: {
     feedback: "Your device does not have a mic",
     hint:
       "Try using external mic and refresh the page or type and submit instead"
   },
+  browser: {
+    feedback: "Your browser does not support microphone",
+    hint: "Try a different browser or type below and submit instead"
+  },
   permission: {
     feedback: "You have disabled mic access",
     hint:
       "Try enabling your mic and refresh the page or type below and submit instead"
-  }
+  },
+  explicit: {
+    feedback: "Like the old conventional way ?. Got you covered.",
+    hint:
+      "Type below and submit. You can try out the mic also by tapping here."
+  },
 };

app/src/constants.js

@@ -1 +1 @@
-export const INTRO_DURATION = 12500;
+export const INTRO_DURATION = 14000;

app/src/styles/AnimatedMic.css

@@ -32,3 +32,12 @@
   background-color: red;
   scale: 1.2;
 }
+
+.use-text-intead {
+  color: rgba(237, 240, 248, 0.7);
+  cursor: pointer;
+}
+
+.use-text-intead:hover {
+  color: white;
+}

app/src/styles/MicNotSupport.css

@@ -13,6 +13,10 @@
   font-style: italic;
 }
 
+.mic-support-container .hint[data-explicit="true"] {
+  cursor: pointer;
+}
+
 .mic-support-submit-btn {
   position: absolute;
   width: 100%;