Add clarity unmasking on AI tutor

src/components/GenerateCourse/AICourse.tsx

@@ -132,6 +132,7 @@ export function AICourse(props: AICourseProps) {
             placeholder="e.g. JavaScript Promises, React Hooks, Go Routines etc"
             className="w-full rounded-md border-none bg-transparent px-4 pt-4 pb-8 text-gray-900 focus:outline-hidden max-sm:placeholder:text-base"
             maxLength={50}
+            data-clarity-unmask="true"
           />
 
           <div className="flex flex-col items-start justify-between gap-2 px-4 pb-4 md:flex-row md:items-center">

src/components/GenerateCourse/AICourseSearch.tsx

@@ -43,6 +43,7 @@ export function AICourseSearch(props: AICourseSearchProps) {
         value={searchTerm}
         onChange={(e) => setSearchTerm(e.target.value)}
         disabled={disabled}
+        data-clarity-unmask="true"
       />
     </div>
   );

src/components/GenerateCourse/FineTuneCourse.tsx

@@ -27,6 +27,7 @@ function Question(props: QuestionProps) {
         className="min-h-[80px] w-full resize-none px-4 py-3 text-gray-700 placeholder:text-gray-400 focus:outline-hidden"
         value={value}
         onChange={(e) => onChange(e.target.value)}
+        data-clarity-unmask="true"
         autoFocus={autoFocus}
       />
     </div>

src/components/GenerateCourse/ModifyCoursePrompt.tsx

@@ -44,6 +44,7 @@ export function ModifyCoursePrompt(props: ModifyCoursePromptProps) {
             onChange={(e) => setPrompt(e.target.value)}
             className="w-full rounded-md border border-gray-200 p-2 placeholder:text-sm focus:outline-black"
             placeholder="e.g. make sure to add a section on React hooks"
+            data-clarity-unmask="true"
           />
 
           <p className="text-sm text-gray-500">