minor ui fixes, and enhancements of guidelines, reasons - #232
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughWalkthroughThis PR expands the AI creation flow with new translation keys for UI placeholders and guidelines, introduces Guidelines and Reasons components for displaying contextual information, updates the Mitra platform's terms reference, enhances file-sharing with mobile Web Share API support, and implements flow-specific session management and new chat creation controls. Changes
Sequence DiagramssequenceDiagram
participant User
participant Frontend as File Sharing<br/>(handleShareFile)
participant API as Device API<br/>(Clipboard/Share)
participant System as Notification<br/>System
User->>Frontend: Trigger share action
Frontend->>Frontend: Detect device type
alt Desktop
Frontend->>API: Copy URL to clipboard
API-->>Frontend: Success
Frontend->>System: Show success notification
System-->>User: Display confirmation
else Mobile
Frontend->>API: Request Web Share API
alt Share supported
API->>API: Create file blob
API-->>Frontend: File ready
Frontend->>API: Share file
API-->>Frontend: Share complete
Frontend->>System: Show success notification
System-->>User: Display confirmation
else Share unsupported
Frontend->>API: Copy URL to clipboard
API-->>Frontend: Success
Frontend->>System: Show fallback notification
System-->>User: Display confirmation
end
end
sequenceDiagram
participant WS as WebSocket<br/>Message
participant InitialSwitch
participant SessionStore
participant FlowCallback
WS->>InitialSwitch: Receive flow validation
InitialSwitch->>InitialSwitch: Check flow type
alt Flow is LCF
InitialSwitch->>SessionStore: Fetch new session ID
SessionStore-->>InitialSwitch: New session ID
InitialSwitch->>SessionStore: Update with new session
InitialSwitch->>InitialSwitch: Set flow type to LCF
InitialSwitch->>FlowCallback: Invoke callback
FlowCallback-->>InitialSwitch: Complete
else Other flows (LFA, FREE_FLOW, MIP)
InitialSwitch->>InitialSwitch: Set flow type (lowercased)
InitialSwitch->>FlowCallback: Invoke callback directly
FlowCallback-->>InitialSwitch: Complete
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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 |
|
@CodeRabbit review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In `@public/locales/en/ai_creation_translation.json`:
- Around line 12-16: The new locale file ai_creation_translation.json
(containing keys like "download", "chatPlaceholder", "placeholderProcessing",
"placeholderListening", "back" and the other keys added at lines noted) is
present only in en; add an identical ai_creation_translation.json to the hi, kn,
and te locale directories containing proper translations for all keys (or at
minimum the same key structure with translated values) so those locales do not
fall back to raw keys; ensure filenames match exactly and include all keys
present in the en file (including those near lines 76-77 and 92-93).
In
`@src/pages/ai-creation/pages/shikshalokam-mitra/mitra-pages/components/Guidelines.jsx`:
- Around line 1-27: The <Guidelines> component renders a <p> with both children
and dangerouslySetInnerHTML which causes lint warnings; remove the empty child
by making the <p> that uses dangerouslySetInnerHTML self-closing (i.e., do not
include inner children) and keep the existing __html: text usage, and optionally
add a comment or TODO to sanitize with DOMPurify later if the HTML becomes
untrusted.
In
`@src/pages/ai-creation/pages/shikshalokam-mitra/mitra-pages/InitialSwitch.jsx`:
- Around line 147-157: The current branch for LCF calls getNewSessionID()
without error handling so if it rejects the flow type never gets set; modify the
LCF branch around compareFlowTypesEquality(...) to await or then/catch
getNewSessionID(), and in the catch ensure you log the error and still call
useAICreationSessionStore.getState().setSelectedFlowType(validation?.toLowerCase())
and onFlowTypeSelectedRef.current?.(validation?.toLowerCase()) (leaving session
unchanged on failure); when getNewSessionID() succeeds, call
useAICreationSessionStore.getState().setSession(newSession) then
setSelectedFlowType and invoke onFlowTypeSelectedRef as today.
In
`@src/pages/ai-creation/pages/shikshalokam-mitra/mitra-pages/StateMachineDefineChallenge.jsx`:
- Around line 612-613: The ChatWindow component requires the
isDefineChallengeSection prop but it isn't being passed from
StateMachineDefineChallenge; update the ChatWindow JSX within
StateMachineDefineChallenge (the ChatWindow(...) element) to include
isDefineChallengeSection={isDefineChallengeSection} so the ChatWindow component
receives and can use that variable for its conditional logic.
🧹 Nitpick comments (5)
src/pages/ai-creation/pages/improvement-plan/index.jsx (1)
10-17: Potential stale data:itemscaptured once at mount.
itemsis assigned viagetState().getMedia()outside theuseEffect, so it captures the value at component mount time. If the store updates after mount,itemswon't reflect those changes, and theuseEffectwon't re-run sinceitemsisn't in the dependency array.Consider either:
- Moving the store access inside the effect, or
- Using the reactive selector pattern like
chatHistoryin other componentsSuggested fix
const ImprovementPlan = () => { const [media, setMedia] = useState([]); const { projectId } = useParams(); - const items = useAICreationSessionStore.getState().getMedia() + const items = useAICreationSessionStore(state => state.getMedia?.() || []); useEffect(() => { const mediaItems = items || []; setMedia(mediaItems); - }, [projectId]); + }, [projectId, items]);src/pages/ai-creation/pages/shikshalokam-mitra/mitra-pages/components/Reasons.jsx (1)
21-21: Consider i18n for fallback text.The hardcoded "No reason provided" string should ideally use a translation key for consistency with the rest of the app's i18n approach.
Suggested change
+import { useTranslation } from "react-i18next"; + const Reasons = ({ reasonList = [], customClassNames = {} }) => { + const { t } = useTranslation("ai_creation_translation"); // ... <li key={index} className="text-gray-700 text-sm"> - {item?.reason || "No reason provided"} + {item?.reason || t("noReasonProvided")} </li>public/locales/en/ai_creation_translation.json (1)
76-77: Render rich‑text translations safely.These new guideline strings embed HTML (
<strong>,<br/>). Please verify they’re rendered viaTrans/component mapping (or sanitized) so users don’t see raw tags and to keep XSS risk controlled if translations ever move to a CMS.Also applies to: 92-93
src/pages/ai-creation/utils/file.js (2)
2-2: Extract a reusable toast helper to avoid duplication.The same
showNotificationpayload appears three times; a small helper will reduce drift and make future tweaks safer.♻️ Proposed refactor
+const notifyUrlCopied = (fullFileName) => + showNotification({ + message: `${fullFileName} URL copied to clipboard!`, + type: "success", + options: { + autoClose: 3000, + position: "top-center", + style: { fontWeight: "bold", color: "#1D1616" }, + }, + }); @@ - showNotification({ - message: `${fullFileName} URL copied to clipboard!`, - type: "success", - options: { - autoClose: 3000, - position: "top-center", - style: { fontWeight: "bold", color: "#1D1616" } - } - }); + notifyUrlCopied(fullFileName); @@ - showNotification({ - message: `${fullFileName} URL copied to clipboard!`, - type: "success", - options: { - autoClose: 3000, - position: "top-center", - style: { fontWeight: "bold", color: "#1D1616" } - } - }); + notifyUrlCopied(fullFileName); @@ - showNotification({ - message: `${fullFileName} URL copied to clipboard!`, - type: "success", - options: { - autoClose: 3000, - position: "top-center", - style: { fontWeight: "bold", color: "#1D1616" } - } - }); + notifyUrlCopied(fullFileName);Also applies to: 20-38, 76-84, 93-101
8-10: Replace UA sniffing gate with capability-first detection.UA sniffing to gate the Web Share vs. clipboard choice is fragile—iPadOS, UA-reduced browsers, and other edge cases can misclassify. Your code already includes proper capability checks (
navigator.shareandnavigator.canShare()); instead of trusting the user-agent, try Web Share directly and fall back gracefully:const handleShareFile = async (/* params */) => { const fullFileName = getFileName(fileName, fileExtension); // Try Web Share if supported if (navigator.share && navigator.canShare?.({ files: [fileBlob] })) { // Web Share logic } else { // Clipboard fallback (works on all platforms) } };This eliminates the UA dependency and lets the browser's own APIs decide, which is more reliable across all devices and browsers.
2 participants
Summary by CodeRabbit
Release Notes
New Features
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.