From 870a8c409cfce62a70dcc98b0ee51fcde431ab9b Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 28 Jul 2025 18:47:31 +0100
Subject: [PATCH] Add clarity unmasking on AI tutor

---
 src/components/AIChatHistory/SearchAIChatHistory.tsx   | 1 +
 src/components/AIQuiz/AIOpenEndedQuestion.tsx          | 1 +
 src/components/AIQuiz/AIQuizGenerator.tsx              | 1 +
 src/components/AIRoadmap/AIRoadmapChat.tsx             | 1 +
 src/components/ContentGenerator/ContentGenerator.tsx   | 1 +
 src/components/ContentGenerator/QuestionAnswerChat.tsx | 1 +
 src/components/GenerateCourse/AICourse.tsx             | 1 +
 src/components/GenerateCourse/AICourseSearch.tsx       | 1 +
 src/components/GenerateCourse/FineTuneCourse.tsx       | 1 +
 src/components/GenerateCourse/ModifyCoursePrompt.tsx   | 1 +
 src/components/GenerateGuide/AIGuideChat.tsx           | 1 +
 src/components/RoadmapAIChat/RoadmapChatListing.tsx    | 1 +
 12 files changed, 12 insertions(+)

diff --git a/src/components/AIChatHistory/SearchAIChatHistory.tsx b/src/components/AIChatHistory/SearchAIChatHistory.tsx
index 84dee4d9c..17c2a0b74 100644
--- a/src/components/AIChatHistory/SearchAIChatHistory.tsx
+++ b/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)}
       />
 
diff --git a/src/components/AIQuiz/AIOpenEndedQuestion.tsx b/src/components/AIQuiz/AIOpenEndedQuestion.tsx
index 453fa5d3b..d8ef57ded 100644
--- a/src/components/AIQuiz/AIOpenEndedQuestion.tsx
+++ b/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',
diff --git a/src/components/AIQuiz/AIQuizGenerator.tsx b/src/components/AIQuiz/AIQuizGenerator.tsx
index 706405838..12c640c36 100644
--- a/src/components/AIQuiz/AIQuizGenerator.tsx
+++ b/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">
diff --git a/src/components/AIRoadmap/AIRoadmapChat.tsx b/src/components/AIRoadmap/AIRoadmapChat.tsx
index 88b74cea0..9de8aeea2 100644
--- a/src/components/AIRoadmap/AIRoadmapChat.tsx
+++ b/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();
diff --git a/src/components/ContentGenerator/ContentGenerator.tsx b/src/components/ContentGenerator/ContentGenerator.tsx
index 47d530f86..a1e3388c0 100644
--- a/src/components/ContentGenerator/ContentGenerator.tsx
+++ b/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">
diff --git a/src/components/ContentGenerator/QuestionAnswerChat.tsx b/src/components/ContentGenerator/QuestionAnswerChat.tsx
index 840699497..148f4394c 100644
--- a/src/components/ContentGenerator/QuestionAnswerChat.tsx
+++ b/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) {
diff --git a/src/components/GenerateCourse/AICourse.tsx b/src/components/GenerateCourse/AICourse.tsx
index 4e85d1972..1f5408613 100644
--- a/src/components/GenerateCourse/AICourse.tsx
+++ b/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">
diff --git a/src/components/GenerateCourse/AICourseSearch.tsx b/src/components/GenerateCourse/AICourseSearch.tsx
index 9b9da1f54..7820ced43 100644
--- a/src/components/GenerateCourse/AICourseSearch.tsx
+++ b/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>
   );
diff --git a/src/components/GenerateCourse/FineTuneCourse.tsx b/src/components/GenerateCourse/FineTuneCourse.tsx
index 8f5d0e237..64fb074fd 100644
--- a/src/components/GenerateCourse/FineTuneCourse.tsx
+++ b/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>
diff --git a/src/components/GenerateCourse/ModifyCoursePrompt.tsx b/src/components/GenerateCourse/ModifyCoursePrompt.tsx
index 94824f822..c65b587c6 100644
--- a/src/components/GenerateCourse/ModifyCoursePrompt.tsx
+++ b/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">
diff --git a/src/components/GenerateGuide/AIGuideChat.tsx b/src/components/GenerateGuide/AIGuideChat.tsx
index 77611a30b..fd5a5a31a 100644
--- a/src/components/GenerateGuide/AIGuideChat.tsx
+++ b/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();
diff --git a/src/components/RoadmapAIChat/RoadmapChatListing.tsx b/src/components/RoadmapAIChat/RoadmapChatListing.tsx
index 9f39051ad..8cd9148bd 100644
--- a/src/components/RoadmapAIChat/RoadmapChatListing.tsx
+++ b/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">