Fix/live char counter askdoubt#655
Conversation
|
@OmanshiRaj is attempting to deploy a commit to the Karan Mani Tripathi 's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
CodeAnt AI is reviewing your PR. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
|
Warning Review limit reached
More reviews will be available in 12 minutes and 11 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
size/s
gssoc'26
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
⭐ Star Required
Hi @OmanshiRaj! Thank you for your contribution to DoubtDesk.
Before we can complete the review and merge this pull request, please star the DoubtDesk repository.
Once you have starred the repository, please drop a comment here saying "done" and we will proceed with reviewing your PR. Thank you!
codeant-ai
Bot
added
the
size:S
github-actions
Bot
removed
the
size:S
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
| if (navigator.clipboard && window.isSecureContext) { | ||
| await navigator.clipboard.writeText(url); | ||
| } else { | ||
| // Fallback for non-HTTPS or older browsers | ||
| const textArea = document.createElement("textarea"); | ||
| textArea.value = url; | ||
| textArea.style.position = "fixed"; | ||
| textArea.style.opacity = "0"; | ||
| document.body.appendChild(textArea); | ||
| textArea.select(); | ||
| document.execCommand("copy"); | ||
| document.body.removeChild(textArea); | ||
| } | ||
| toast.success(SHARE_MESSAGES.COPY_SUCCESS); |
There was a problem hiding this comment.
🟠 Architect Review — HIGH
The fallback share path calls document.execCommand("copy") but ignores its boolean return value and always shows the COPY_SUCCESS toast, so in non-secure/legacy contexts users can be told "Link copied!" even when the copy command fails.
Suggestion: Capture the boolean result of document.execCommand("copy") and only show the success toast when it returns true; if it returns false or throws, route through the existing COPY_ERROR toast so the fallback behaves as a real success/failure operation.
Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is an **Architect / Logical Review** comment left during a code review. These reviews are first-class, important findings — not optional suggestions. Do NOT dismiss this as a 'big architectural change' just because the title says architect review; most of these can be resolved with a small, localized fix once the intent is understood.
**Path:** src/components/DoubtCard.tsx
**Line:** 205:218
**Comment:**
*HIGH: The fallback share path calls document.execCommand("copy") but ignores its boolean return value and always shows the COPY_SUCCESS toast, so in non-secure/legacy contexts users can be told "Link copied!" even when the copy command fails.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
If a suggested approach is provided above, use it as the authoritative instruction. If no explicit code suggestion is given, you MUST still draft and apply your own minimal, localized fix — do not punt back with 'no suggestion provided, review manually'. Keep the change as small as possible: add a guard clause, gate on a loading state, reorder an await, wrap in a conditional, etc. Do not refactor surrounding code or expand scope beyond the finding.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
| {charCount === 0 && ( | ||
| <span className="text-slate-500">Min {minLength} · Max {maxLength} characters</span> | ||
| <span className={`font-medium tabular-nums ${ | ||
| charCount > maxLength | ||
| ? "text-red-500 dark:text-red-400" | ||
| : charCount >= maxLength * 0.9 | ||
| ? "text-amber-500 dark:text-amber-400" | ||
| : "text-slate-500 dark:text-slate-400" | ||
| }`}> | ||
| {charCount}/{maxLength} | ||
| </span> | ||
| )} |
There was a problem hiding this comment.
Suggestion: The new counter is wrapped in a charCount === 0 condition, so it only renders when the textarea is empty. That makes the amber/red thresholds unreachable and prevents this counter from being live as text is entered. Render this counter outside the zero-only guard (or change the guard) so its color logic can actually update with input length. [incorrect condition logic]
Severity Level: Major ⚠️
- ❌ AskDoubt modal's new counter never shows amber/red.
- ⚠️ Users get inconsistent feedback between hint and main counter.Steps of Reproduction ✅
1. Open any doubt in the UI that renders `DoubtCard` and trigger the edit flow so that
`isEditModalOpen` becomes true, causing `<AskDoubt ... />` to be rendered as shown in
`src/components/DoubtCard.tsx:19-28`.
2. In `AskDoubt` (defined in `src/components/AskDoubt.tsx:9-18`), note that `charCount` is
derived from `content.length`, with `maxLength` and `minLength` set to 500 and 20
respectively (lines 12-17).
3. Scroll to the textarea footer in `AskDoubt.tsx` where the validation/counter UI is
rendered (around lines 43-71 in the snippet), and observe the conditional block at line
507: `{charCount === 0 && ( <span className={\`font-medium tabular-nums
${...}\`}>{charCount}/{maxLength}</span> )}`.
4. With the modal open, verify that when the textarea is empty (`charCount === 0`) the new
`{charCount}/{maxLength}` span appears in grey; as soon as you type a single character (so
`charCount > 0`), the `charCount === 0` guard evaluates to false, the span is no longer
rendered, and its internal amber/red threshold logic (`charCount > maxLength` / `charCount
>= maxLength * 0.9`) can never be reached for this counter, meaning the "live" color-coded
hint described by the PR only ever shows the grey state.Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** src/components/AskDoubt.tsx
**Line:** 507:517
**Comment:**
*Incorrect Condition Logic: The new counter is wrapped in a `charCount === 0` condition, so it only renders when the textarea is empty. That makes the amber/red thresholds unreachable and prevents this counter from being live as text is entered. Render this counter outside the zero-only guard (or change the guard) so its color logic can actually update with input length.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix| textArea.select(); | ||
| document.execCommand("copy"); | ||
| document.body.removeChild(textArea); |
There was a problem hiding this comment.
Suggestion: In the fallback copy path, the return value of document.execCommand("copy") is ignored. This API can return false without throwing, so the code can still report copy success even when nothing was copied. Check the boolean result and treat a false return as a failure. [logic error]
Severity Level: Major ⚠️
- ❌ Copy share reports success even when clipboard write fails.
- ⚠️ Users may assume shared link copied when it wasn't.Steps of Reproduction ✅
1. Render a `DoubtCard` (src/components/DoubtCard.tsx) and click the share button wired at
lines 205-212, then choose the dropdown item whose `onClick` is `handleShare` at lines
214-218.
2. Run the app in an environment where `navigator.clipboard` is unavailable or
`window.isSecureContext` is false (e.g., serving over HTTP), which causes `handleShare` at
lines 23-37 to take the fallback branch instead of using
`navigator.clipboard.writeText(url)`.
3. In this fallback, at lines 30-37, a hidden textarea is created, appended to
`document.body`, selected, and `document.execCommand("copy")` is invoked; the boolean
return value of `execCommand("copy")` is ignored (`textArea.select();
document.execCommand("copy"); document.body.removeChild(textArea);`).
4. When the browser returns `false` for the copy operation (unsupported or blocked command
with no thrown error), execution continues and
`toast.success(SHARE_MESSAGES.COPY_SUCCESS)` is called at line 39, so the UI reports "copy
success" even though the URL was never actually copied to the clipboard.Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** src/components/DoubtCard.tsx
**Line:** 214:216
**Comment:**
*Logic Error: In the fallback copy path, the return value of `document.execCommand("copy")` is ignored. This API can return `false` without throwing, so the code can still report copy success even when nothing was copied. Check the boolean result and treat a `false` return as a failure.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
|
CodeAnt AI finished reviewing your PR. |
knoxiboy
left a comment
knoxiboy
left a comment
There was a problem hiding this comment.
@OmanshiRaj look into the problem mentioned by coderabbit & codeant and resolve the problem also look into the failing CI tests and fix them as well
2 participants
User description
CLOSES #638
Replaced the static "Min 20 · Max 500 characters" hint in src/components/AskDoubt.tsx (line 508) with a live color-coded counter that updates as the user types. The counter displays {charCount}/{maxLength} and shifts from gray (normal) → amber (≥ 90% of limit) → red (over limit), giving users real-time visual feedback before they hit submit instead of only seeing an error toast after the fact. This improves UX especially on mobile where users can't easily judge text length, and aligns the empty-state hint with the existing live counter already shown during typing.
CodeAnt-AI Description
Improve text length feedback, sharing, and image labels
What Changed
Impact
✅ Clearer write limits while typing✅ Fewer failed copy-link actions✅ Better screen reader support for doubt images💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.