Add clarity unmasking on AI tutor

src/components/AIChatHistory/SearchAIChatHistory.tsx

@@ -39,6 +39,7 @@ export function SearchAIChatHistory(props: SearchAIChatHistoryProps) {
         minLength={3}
         maxLength={255}
         value={search}
+        data-clarity-unmask="true"
         onChange={(e) => setSearch(e.target.value)}
       />
 

src/components/AIQuiz/AIOpenEndedQuestion.tsx

@@ -96,6 +96,7 @@ export function AIOpenEndedQuestion(props: AIOpenEndedQuestionProps) {
 
       <div className="mt-6">
         <textarea
+          data-clarity-unmask="true"
           className={cn(
             'min-h-[200px] w-full resize-none rounded-xl border border-gray-200 p-4 text-lg',
             'focus:border-gray-400 focus:ring-0 focus:outline-none',

src/components/AIQuiz/AIQuizGenerator.tsx

@@ -190,6 +190,7 @@ export function AIQuizGenerator() {
             className="block w-full rounded-xl border border-gray-200 bg-white p-4 outline-none placeholder:text-gray-500 focus:border-gray-500"
             required
             minLength={3}
+            data-clarity-unmask="true"
           />
         </div>
         <div className="flex flex-col gap-2">

src/components/AIRoadmap/AIRoadmapChat.tsx

@@ -328,6 +328,7 @@ export function AIRoadmapChat(props: AIRoadmapChatProps) {
               value={inputValue}
               onChange={(e) => setInputValue(e.target.value)}
               autoFocus
+              data-clarity-unmask="true"
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {
                   e.preventDefault();

src/components/ContentGenerator/ContentGenerator.tsx

@@ -190,6 +190,7 @@ export function ContentGenerator() {
             className="block w-full rounded-xl border border-gray-200 bg-white p-4 outline-none placeholder:text-gray-500 focus:border-gray-500"
             required
             minLength={3}
+            data-clarity-unmask="true"
           />
         </div>
         <div className="flex flex-col gap-2">

src/components/ContentGenerator/QuestionAnswerChat.tsx

@@ -257,6 +257,7 @@ export function QuestionAnswerChat(props: QuestionAnswerChatProps) {
                             ? 'Type your answer...'
                             : 'Or type your own answer...'
                         }
+                        data-clarity-unmask="true"
                         autoFocus
                         onKeyDown={(e) => {
                           if (e.key === 'Enter' && !e.shiftKey) {

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">

src/components/GenerateGuide/AIGuideChat.tsx

@@ -357,6 +357,7 @@ export function AIGuideChat(props: AIGuideChatProps) {
               value={inputValue}
               onChange={(e) => setInputValue(e.target.value)}
               autoFocus
+              data-clarity-unmask="true"
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {
                   e.preventDefault();

src/components/RoadmapAIChat/RoadmapChatListing.tsx

@@ -55,6 +55,7 @@ export default function RoadmapChatListing(props: RoadmapChatListingProps) {
         value={search}
         onChange={(e) => setSearch(e.target.value)}
         className="mb-6 w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm placeholder-gray-400 focus:border-gray-300 focus:outline-none"
+        data-clarity-unmask="true"
       />
 
       <div className="flex flex-col gap-8">