feat: add global chatbot UI - #512
Open
yhi9839 wants to merge 1 commit into
Open
Conversation
Open
4 tasks
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughAdded a responsive client-side chatbot with session-aware API messaging, retry and expired-session handling, accessibility controls, collision-aware positioning, and global overlay integration. ChangesChatbot overlay
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant ChatbotWidget
participant useChatbotMessageMutation
participant chatbotService
participant ChatbotMessagesAPI
User->>ChatbotWidget: Submit message
ChatbotWidget->>useChatbotMessageMutation: Send request
useChatbotMessageMutation->>chatbotService: Call sendMessage
chatbotService->>ChatbotMessagesAPI: POST chatbot message
ChatbotMessagesAPI-->>chatbotService: Return chatbot reply
chatbotService-->>ChatbotWidget: Update conversation
Suggested labels: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 `@src/components/common/Chatbot/ChatbotWidget.tsx`:
- Around line 282-290: The mobile panel in ChatbotWidget’s checkmo-chatbot-panel
dialog needs a real keyboard focus trap whenever isTabletUp is false, so Tab and
Shift+Tab remain within the modal rather than reaching page controls behind it.
Use the project’s dialog primitive if available, otherwise add the established
tested focus-trap mechanism, while preserving focus restoration when
isPanelVisible changes to false.
In `@src/types/chatbot.ts`:
- Around line 1-4: Extend ChatbotMessageRequest with a clientMessageId field,
then update ChatbotWidget to generate one identifier per user submission and
reuse it across retries for Request timeout, CHATBOT_502, and CHATBOT_503.
Ensure the /v1/chatbot/messages handler uses sessionToken plus clientMessageId
to deduplicate repeated requests or return the previously cached result.
🪄 Autofix
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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 769d1fea-31ca-4da2-8abf-5f305486a63b
📒 Files selected for processing (12)
docs/agent/agent-log.mdsrc/app/(main)/layout.tsxsrc/components/base-ui/Float.tsxsrc/components/common/AppOpenCta.tsxsrc/components/common/Chatbot/ChatbotWidget.tsxsrc/components/common/GlobalAppOpenCta.tsxsrc/components/common/GlobalMainOverlays.tsxsrc/hooks/mutations/useChatbotMutation.tssrc/lib/api/endpoints/chatbot.tssrc/lib/api/endpoints/index.tssrc/services/chatbotService.tssrc/types/chatbot.ts
Comment on lines
+282
to
+290
| {isPanelVisible && ( | ||
| <div className="fixed inset-0 z-[80] bg-Black/10 t:pointer-events-none t:bg-transparent"> | ||
| <section | ||
| id="checkmo-chatbot-panel" | ||
| role="dialog" | ||
| aria-label="책모 도우미" | ||
| aria-modal={!isTabletUp} | ||
| className="pointer-events-auto fixed inset-0 flex h-[100dvh] flex-col overflow-hidden bg-background shadow-[0_3px_12px_rgba(61,52,46,0.2)] t:inset-auto t:right-[43px] t:bottom-[54px] t:h-[640px] t:max-h-[calc(100dvh-108px)] t:w-[426px] t:rounded-[8px] t:border t:border-Subbrown-4" | ||
| > |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Trap keyboard focus while the mobile dialog is modal.
Line 288 sets aria-modal on mobile, but the dialog does not contain Tab or Shift+Tab focus. Keyboard users can move from the chatbot input to Header and page controls behind the overlay.
Use the project dialog primitive or add a tested focus trap for the mobile panel. Keep focus restoration when the dialog closes.
🤖 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 `@src/components/common/Chatbot/ChatbotWidget.tsx` around lines 282 - 290, The
mobile panel in ChatbotWidget’s checkmo-chatbot-panel dialog needs a real
keyboard focus trap whenever isTabletUp is false, so Tab and Shift+Tab remain
within the modal rather than reaching page controls behind it. Use the project’s
dialog primitive if available, otherwise add the established tested focus-trap
mechanism, while preserving focus restoration when isPanelVisible changes to
false.
Comment on lines
+1
to
+4
| export interface ChatbotMessageRequest { | ||
| sessionToken?: string | null; | ||
| message: string; | ||
| } |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | 🏗️ Heavy lift
🧩 Analysis chain
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
# Trace the client payload, retry path, and any available API schema or route contract.
rg -n -C 6 \
'ChatbotMessageRequest|/v1/chatbot/messages|clientMessageId|idempotency|Request timeout|CHATBOT_502|CHATBOT_503' \
src
# Locate repository-local API specifications, mocks, or backend contract documents.
fd -t f . | rg -i '(chatbot|openapi|swagger|api.*(schema|contract)|schema.*api|route)'Repository: checkmo2025/FE
Length of output: 5288
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
echo "## chatbot types"
cat -n src/types/chatbot.ts
echo "## chatbot service"
cat -n src/services/chatbotService.ts
echo "## chatbot mutation"
cat -n src/hooks/mutations/useChatbotMutation.ts
echo "## chatbot widget relevant section"
sed -n '1,180p' src/components/common/Chatbot/ChatbotWidget.tsx | cat -n
echo "## api client timeout/error helpers"
sed -n '60,125p' src/lib/api/client.ts | cat -nRepository: checkmo2025/FE
Length of output: 11131
Add a client-side message id before retrying chatbot messages.
ChatbotMessageRequest only sends sessionToken and message. On Request timeout, CHATBOT_502, and CHATBOT_503, ChatbotWidget allows retrying the same submit. Add a clientMessageId to ChatbotMessageRequest, generate it once per user submit, and reuse it for retries. Ensure /v1/chatbot/messages deduplicates or returns the cached result when the same sessionToken and clientMessageId are retried.
🤖 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 `@src/types/chatbot.ts` around lines 1 - 4, Extend ChatbotMessageRequest with a
clientMessageId field, then update ChatbotWidget to generate one identifier per
user submission and reuse it across retries for Request timeout, CHATBOT_502,
and CHATBOT_503. Ensure the /v1/chatbot/messages handler uses sessionToken plus
clientMessageId to deduplicate repeated requests or return the previously cached
result.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 개요 (Summary)
🛠️ 변경 사항 (Changes)
📸 스크린샷 (Screenshots)
(UI 변경 사항이 있다면 첨부해주세요)
✅ 체크리스트 (Checklist)
pnpm build)pnpm lint)Summary by CodeRabbit