Fix: corrige les trois points de review de la landing (markup, snippet iframe, échec de copie) - #65
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 22 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughLe bouton de copie gère maintenant les états de succès et d’échec. Le snippet iframe normalise son URL et utilise une bordure CSS. Les traductions couvrent l’échec de copie. Deux sections utilisent une structure HTML sémantique avec ChangesMises à jour de la landing page
Estimated code review effort: 3 (Moderate) | ~20 minutes Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
components/landing/copy-embed-code-button.tsx (1)
11-74: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUtilisez
useTranslationsdans ce composant client.
CopyEmbedCodeButtonrend les libellés visibles. Il reçoit actuellement les traductions comme props. UtilisezuseTranslations("landing.widget")dans ce composant, puis supprimezcopyLabel,copiedLabeletcopyFailedLabelde son interface et de l’appelant.Cette modification réduit aussi la fonction sous la limite de 50 lignes.
Correctif proposé
+import { useTranslations } from "next-intl"; interface CopyEmbedCodeButtonProps { code: string; - copyLabel: string; - copiedLabel: string; - copyFailedLabel: string; } -export function CopyEmbedCodeButton({ - code, - copyLabel, - copiedLabel, - copyFailedLabel, -}: CopyEmbedCodeButtonProps) { +export function CopyEmbedCodeButton({ code }: CopyEmbedCodeButtonProps) { + const translations = useTranslations("landing.widget"); const [copyStatus, setCopyStatus] = useState<CopyStatus>("idle"); const statusLabel: Record<CopyStatus, string> = { - idle: copyLabel, - copied: copiedLabel, - failed: copyFailedLabel, + idle: translations("copy"), + copied: translations("copied"), + failed: translations("copyFailed"), };<CopyEmbedCodeButton code={embedCode} - copyLabel={t("copy")} - copiedLabel={t("copied")} - copyFailedLabel={t("copyFailed")} />As per coding guidelines, « Utiliser
getTranslationscôté serveur etuseTranslationscôté client » et « les fonctions à 50 lignes maximum ».🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/landing/copy-embed-code-button.tsx` around lines 11 - 74, Update CopyEmbedCodeButton to call useTranslations("landing.widget") and derive the idle, copied, and failed status labels from that translator. Remove copyLabel, copiedLabel, and copyFailedLabel from CopyEmbedCodeButtonProps and update its caller to stop passing them, while preserving the existing status behavior and keeping the component within the 50-line limit.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/landing/embed-widget-section.tsx`:
- Around line 15-18: Ajoutez dans lib/validations.ts un schéma Zod pour
NEXT_PUBLIC_APP_URL qui n’accepte que des URL HTTPS propres et valides. Validez
cette variable d’environnement avant d’appeler buildEmbedCode, puis transmettez
uniquement la valeur validée afin d’éviter de générer un src vide, invalide ou
mal échappé.
---
Nitpick comments:
In `@components/landing/copy-embed-code-button.tsx`:
- Around line 11-74: Update CopyEmbedCodeButton to call
useTranslations("landing.widget") and derive the idle, copied, and failed status
labels from that translator. Remove copyLabel, copiedLabel, and copyFailedLabel
from CopyEmbedCodeButtonProps and update its caller to stop passing them, while
preserving the existing status behavior and keeping the component within the
50-line limit.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: b917d1ba-6204-4a02-a8c0-850ea79c113b
📒 Files selected for processing (6)
components/landing/copy-embed-code-button.tsxcomponents/landing/embed-widget-section.tsxcomponents/landing/medical-record-section.tsxcomponents/landing/security-section.tsxmessages/en.jsonmessages/fr.json
| function buildEmbedCode(appUrl: string): string { | ||
| return `<iframe src="${appUrl}/widget/${DEMO_CLINIC_SLUG}" width="100%" height="600" frameborder="0"></iframe>`; | ||
| const normalizedAppUrl = appUrl.replace(/\/+$/, ""); | ||
|
|
||
| return `<iframe src="${normalizedAppUrl}/widget/${DEMO_CLINIC_SLUG}" width="100%" height="600" style="border:0"></iframe>`; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== locate file and validation/env references =="
git ls-files | rg '(^components/landing/embed-widget-section\.tsx$|^lib/validations\.ts$|validations|NEXT_PUBLIC_APP_URL|buildEmbedCode|DEMO_CLINIC_SLUG)$' || true
echo
echo "== target file =="
if [ -f components/landing/embed-widget-section.tsx ]; then
cat -n components/landing/embed-widget-section.tsx
fi
echo
echo "== validations and env usage =="
if [ -f lib/validations.ts ]; then
cat -n lib/validations.ts
fi
rg -n "NEXT_PUBLIC_APP_URL|buildEmbedCode|DEMO_CLINIC_SLUG|validations|env" -S components lib app pages .env* 2>/dev/null || true
echo
echo "== deterministic string behavior for sample values =="
node - <<'JS'
function buildEmbedCode(appUrl, slug = 'demo-clinic-slug') {
const normalizedAppUrl = appUrl.replace(/\/+$/, "");
return `<iframe src="${normalizedAppUrl}/widget/${slug}" width="100%" height="600" style="border:0"></iframe>`;
}
for (const input of ['', 'invalid', 'https://example.com?q="<img src=x>'] ) {
console.log(JSON.stringify(buildEmbedCode(input)));
}
JSRepository: Zoubeir23/DocFlowAI
Length of output: 26356
Validez NEXT_PUBLIC_APP_URL avec Zod avant de générer le snippet.
buildEmbedCode accepte toute valeur de process.env.NEXT_PUBLIC_APP_URL, ce qui peut produire un src vide, invalide ou mal échappé. Ajoutez un schéma lib/validations.ts, autorisez uniquement https et une URL propre, et passez cette valeur validée à buildEmbedCode.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/landing/embed-widget-section.tsx` around lines 15 - 18, Ajoutez
dans lib/validations.ts un schéma Zod pour NEXT_PUBLIC_APP_URL qui n’accepte que
des URL HTTPS propres et valides. Validez cette variable d’environnement avant
d’appeler buildEmbedCode, puis transmettez uniquement la valeur validée afin
d’éviter de générer un src vide, invalide ou mal échappé.
Source: Coding guidelines
Contexte
Trois défauts relevés lors de la review de la PR #61, laissés en suivi lors du merge.
Ce qui change
1. Markup de liste invalide —
medical-record-section.tsx,security-section.tsxLes
<dt>/<dd>n'étaient pas des enfants autorisés de leur<dl>: dans la section Dossier & IAils étaient imbriqués deux niveaux plus bas, et dans la section Sécurité ils cohabitaient avec un
<svg>dans le même conteneur. La spécification n'autorise qu'un seul<div>d'enveloppe, necontenant que des
dt/dd.Les deux sections passent en
<ul>/<li>avec<h3>/<p>, sémantiquement correct et cohérentavec le reste de la landing.
2. Snippet d'intégration du widget —
embed-widget-section.tsxframebordera disparu du standard HTML : remplacé parstyle="border:0".NEXT_PUBLIC_APP_URLpouvait finir par une barre oblique et produirehttps://exemple.fr//widget/…dans le code que le praticien colle sur son propre site. L'URL est désormais normalisée.
3. Échec de copie silencieux —
copy-embed-code-button.tsxLe
catchremettait simplement l'état àfalse: hors contexte sécurisé ou si la permission estrefusée, le clic n'avait aucun effet visible. Le bouton expose maintenant trois états
(
idle/copied/failed) avec un libellé traduit, une icône d'alerte et une borduredestructive, plus
aria-live="polite". Nouvelle clélanding.widget.copyFaileden FR et EN.Tests
npx tsc --noEmit,npm run lint— propresnpx vitest run— 193 testsnpm run build— succèsframeborderdl/dt/dd, 0 occurrence deframeborderhttps://docflow.ia,https://docflow.ia/ethttps://docflow.ia///Summary by CodeRabbit
Améliorations
Traductions