Add frontend components for chat interface; implement message sending… - #2
Merged
Conversation
… and personality selection
|
Warning Rate limit exceeded
To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing. ⌛ How to resolve this issue?After the wait time has elapsed, 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 have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThis PR introduces a complete static web UI for a Norse-mythology-themed chat application. The changes include an HTML page structure, comprehensive dark-themed styling, and client-side JavaScript logic that handles personality selection via god-chips, message sending to an API endpoint, response rendering, and session management with a unique UUID per chat session. ChangesChat UI Foundation
Sequence DiagramsequenceDiagram
participant User
participant ChatUI as Chat UI<br/>(app.js)
participant API as /api/v1/chat
participant DOM as DOM & Display
User->>ChatUI: 1. Select god chip (e.g., LOKI)
ChatUI->>DOM: Set personality select value
User->>ChatUI: 2. Type message & press Enter
ChatUI->>ChatUI: Validate input, set isWaiting=true
ChatUI->>DOM: Show typing indicator, disable send button
ChatUI->>API: 3. POST { personality, message, sessionId }
alt Success
API-->>ChatUI: Response with assistant message
ChatUI->>ChatUI: Map personality to god name (e.g., "Loki")
ChatUI->>DOM: Append assistant message bubble with god label
else Error
API-->>ChatUI: Exception thrown
ChatUI->>DOM: Append system error message
end
ChatUI->>DOM: 4. Hide typing indicator, enable send button
ChatUI->>DOM: Scroll chat window to bottom
ChatUI->>ChatUI: Clear waiting flag
DOM-->>User: Display updated chat with message & response
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 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/main/resources/static/app.js`:
- Around line 65-73: In appendMessage, avoid using innerHTML for assistant
output to prevent XSS: instead create a child element for the assistant label
(use the existing name string in a created element) and a separate content
element where you assign text to textContent (or create a text node) rather than
interpolating `text` into msgDiv.innerHTML; update the branch that checks `if
(role === 'assistant')` to append the label element and the text-content element
to msgDiv so the user/LLM-supplied `text` is never parsed as HTML.
- Around line 43-61: Wrap the fetch in an AbortController: create a controller
before the fetch, pass controller.signal into the fetch call, start a timeout
(e.g. 15s) that calls controller.abort(), and clear that timeout after the
response/when awaiting completes; in the catch block detect AbortError and call
appendMessage('assistant','System','Request timed out') (or similar) and ensure
chatState.isWaiting is set to false; keep the existing setLoading(false) in
finally so the UI is re-enabled. Reference: the fetch POST to '/api/v1/chat',
the controller.signal, the timeout handler, appendMessage, chatState.isWaiting,
and setLoading.
In `@src/main/resources/static/index.html`:
- Around line 45-57: Add accessible live-region semantics so screen readers
announce new messages and typing state: update the chat container(s) referenced
by IDs "chat-window" and "typing-indicator" to include appropriate ARIA
attributes (e.g., aria-live="polite" and role="status", and consider
aria-atomic="true" on "chat-window") so dynamically injected assistant messages
and the typing text are announced; ensure any code that appends new assistant
message nodes (the message element with class "assistant" inside "chat-window")
does not override or remove these attributes when updating DOM.
- Around line 37-42: The personality chips are non-semantic divs (elements with
class "god-chip" and data-god attributes) which prevents keyboard and AT
interaction—replace each <div class="god-chip" data-god="..."> with a semantic
<button type="button" class="god-chip" data-god="..."> and remove duplicate
attributes (e.g., Heimdall had two class attributes); then update the toggle
logic in src/main/resources/static/app.js (the code that adds/removes the
"active" class on .god-chip) to also set aria-pressed="true" when activating and
aria-pressed="false" when deactivating so the UI stays accessible and in sync.
In `@src/main/resources/static/style.css`:
- Line 19: Remove the quoted font-family names and the camelCase keyframe name
to satisfy Stylelint: unquote 'Georgia' (use Georgia) where it appears
(currently at the shown line and also at the other occurrences mentioned),
rename the keyframes rule named fadeIn to a kebab-case name (e.g., fade-in) and
update any animation or animation-name declarations that reference fadeIn to the
new kebab-case identifier (check the `@keyframes` block and all uses). Ensure
consistency across all occurrences (lines referenced: the shown line and the
other instances noted).
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: aa1e6520-cd10-4ccc-95cd-5eea59d3bbe0
📒 Files selected for processing (3)
src/main/resources/static/app.jssrc/main/resources/static/index.htmlsrc/main/resources/static/style.css
…ibility; update personality selection buttons and chat window attributes
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.
This pull request introduces a new mythological-themed web chat interface, allowing users to interact with various Norse gods through a modern, visually appealing UI. The main additions are a new HTML file (
index.html), a JavaScript file for chat logic (app.js), and a comprehensive CSS stylesheet (style.css). Together, these changes implement the frontend for the "Asgard AI" chat application.The most important changes are:
New Chat Application Frontend
index.htmlto provide the structure for the chat app, including a header, selectable Norse god personalities ("god chips"), a chat window, typing indicator, and message input area.style.cssto deliver a custom mythological visual theme, with responsive layout, rune-inspired colors, and distinct styles for user and AI (god) messages, as well as interactive god selection chips.Interactive Chat Functionality
app.jsto implement chat logic: manages session state, handles god chip selection, sends user messages to the backend (/api/v1/chat), displays responses, and shows a typing indicator while awaiting replies. Also, it ensures Heimdall is the default selected god.User Experience Enhancements
Summary by CodeRabbit