[BLD-26] Portal: AI Chat UI improvements #7764
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
|
WalkthroughThis change set refactors the assistant chat UI in the portal application to align with the dashboard's implementation, modularizes message rendering and feedback, introduces new UI components for toasts and shimmer effects, and updates related styling and configuration. It also adjusts import paths, removes a deprecated ScrollShadow component, and enhances markdown rendering and icon uniqueness. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ChatComponent
participant RenderMessage
participant RenderAIResponse
participant ReactQuery
participant SonnerToaster
User->>ChatComponent: Send message
ChatComponent->>ChatComponent: Update messages list
ChatComponent->>RenderMessage: Render each message
RenderMessage->>RenderAIResponse: If assistant message
RenderAIResponse->>ReactQuery: Send feedback (thumbs up/down)
ReactQuery-->>RenderAIResponse: Success/Failure response
RenderAIResponse->>SonnerToaster: Show toast notification
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
No clearly out-of-scope functional changes were identified. All changes appear relevant to the chat UI enhancement or necessary support components/styles. Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (19)
💤 Files with no reviewable changes (3)
✅ Files skipped from review due to trivial changes (5)
🚧 Files skipped from review as they are similar to previous changes (11)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
the
Portal
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7764 +/- ##
=======================================
Coverage 56.42% 56.42%
=======================================
Files 904 904
Lines 58674 58674
Branches 4139 4139
=======================================
Hits 33108 33108
Misses 25461 25461
Partials 105 105
🚀 New features to boost your workflow:
|
![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
🔭 Outside diff range comments (1)
apps/portal/src/app/chat/page.tsx (1)
6-6: Move QueryClient instantiation inside the componentCreating QueryClient at the module level creates a singleton instance that persists across all renders and potentially across different users in SSR scenarios. This can lead to cache pollution and unexpected behavior.
Move the QueryClient instantiation inside the component with proper memoization:
-const queryClient = new QueryClient(); export default function ChatPage() { + const [queryClient] = useState(() => new QueryClient()); return (
🧹 Nitpick comments (7)
apps/portal/src/app/chat/page.tsx (1)
11-11: Consider using rem units instead of px for better scalabilityThe change from rem-based height calculations to fixed pixel values reduces responsiveness and maintainability. The rem units scale with the user's font size preferences, making the UI more accessible.
Consider reverting to rem units or using CSS custom properties for these values:
- <div className="flex h-[calc(100vh-65px)] flex-col overflow-hidden lg:h-[calc(100vh-102px)]"> + <div className="flex h-[calc(100vh-4rem)] flex-col overflow-hidden lg:h-[calc(100vh-6.5rem)]">apps/portal/src/components/AI/chat.tsx (2)
235-248: Consider extracting icon components to a separate fileThe
aiIconanduserIconconstants could be moved to a separate file for better organization and reusability across other chat-related components.Create a new file
apps/portal/src/components/AI/chat-icons.tsx:import { UserIcon } from "lucide-react"; import { ThirdwebIcon } from "@/icons/thirdweb"; export const AIChatIcon = () => ( <div className="rounded-full size-7 lg:size-9 border shrink-0 flex items-center justify-center bg-inverted"> <ThirdwebIcon className="size-3 lg:size-4 text-inverted-foreground" isMonoChrome /> </div> ); export const UserChatIcon = () => ( <div className="rounded-full size-7 lg:size-9 border bg-card shrink-0 flex items-center justify-center translate-y-1"> <UserIcon className="size-3 lg:size-4 text-muted-foreground" /> </div> );
160-165: Remove array length check for scroll anchorThe condition
messages.length > 0is unnecessary sincescrollIntoViewwill simply do nothing if the element doesn't need to scroll.- if (scrollAnchorRef.current && messages.length > 0) { + if (scrollAnchorRef.current) { scrollAnchorRef.current.scrollIntoView({ behavior: "smooth", }); }apps/portal/src/components/code/RenderCode.tsx (1)
1-2: Unify alias usage for internal importsGreat to see the
ScrollShadowpath switched to the@alias. For consistency (and to avoid brittle relative hops), consider doing the same forcn:-import { cn } from "../../lib/utils"; +import { cn } from "@/lib/utils";Keeps imports homogeneous and resilient to future folder moves.
apps/portal/src/components/Document/Code.tsx (1)
14-18: Minor path style inconsistency
ScrollShadownow uses the alias, butCopyButtonstill comes from a relative"../others/CopyButton". If that file also migrated tocomponents/ui, consider adopting the alias for parity:-import { CopyButton } from "../others/CopyButton"; +import { CopyButton } from "@/components/ui/CopyButton";Purely organisational, no functional impact.
apps/portal/src/components/ui/table.tsx (1)
2-3: Alias switch looks good – but drop the inline commentPath update is correct. The trailing comment (
// Path within portal/components/ui) is noise in production code; remove unless it adds real value.apps/portal/src/components/code/CodeBlockContainer.tsx (1)
4-8: Consistent aliasing & barrel importNice alias usage. As with the other files, consider importing
Buttonfrom the central UI barrel (@/components/ui/button) instead of the relative"../ui/button"to keep import style uniform.
size-limit report 📦
|
Merge activity
|
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR primarily focuses on enhancing the UI components and improving the styling, particularly around the `ScrollShadow` component. It also introduces new animations and adjusts various layouts for better responsiveness.
### Detailed summary
- Removed `ScrollShadow.tsx` and its CSS module.
- Updated color in `NextTopLoader` from `--link-foreground` to `--foreground`.
- Added `sonner` package for toasts.
- Integrated `ScrollShadow` in multiple components.
- Adjusted layout styles in `page.tsx` and `MarkdownRenderer.tsx`.
- Enhanced `Chat` component with `ScrollShadow` for better scrolling behavior.
- Introduced `TextShimmer` and `UnderlineLink` components.
- Improved styling and responsiveness in various components.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **New Features**
* Introduced a shimmering text effect for loading states.
* Added a customizable toast notification system with theme support.
* Added an underlined link component for consistent link styling.
* **Enhancements**
* Refined chat interface with improved empty state, message rendering, feedback handling, and visual distinction between user and AI messages.
* Updated markdown rendering for improved link, heading, list, and paragraph styles.
* Improved icon rendering with unique ID management and monochrome support.
* Adjusted chat page and loader bar styling for better layout and color consistency.
* **Bug Fixes**
* Corrected React key usage in code snippet rendering to use unique platform IDs.
* **Refactor**
* Modularized chat message rendering and feedback logic.
* Updated import paths for scroll shadow components across multiple files.
* **Chores**
* Updated dependencies to include the "sonner" package.
* Cleaned up whitespace, formatting, and removed unused lint comments.
* Adjusted Tailwind configuration for border radius and added shimmer animation.
* **Removals**
* Deleted legacy scroll shadow component and associated CSS.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
07-31-_bld-26_portal_ai_chat_ui_improvements
branch
from
4b7b003 to
0483776
Compare
graphite-app
bot
deleted the
07-31-_bld-26_portal_ai_chat_ui_improvements
branch
PR-Codex overview
This PR focuses on refactoring the codebase by removing the
ScrollShadowcomponent and updating various components and styles to enhance UI consistency and functionality. It also introduces new dependencies and modifies existing ones.Detailed summary
ScrollShadow.tsxandScrollShadow.module.css.colorprop inNextTopLoaderfromhsl(var(--link-foreground))tohsl(var(--foreground)).sonnerdependency topackage.json.ScrollShadowimports across multiple components.page.tsxand other components.MarkdownRendererto useUnderlineLinkfor links.TextShimmerandToastercomponents for improved UI feedback.Chatcomponent to utilizeScrollShadowfor message display.ThirdwebIconto use a prefix for IDs.Summary by CodeRabbit
New Features
Enhancements
Bug Fixes
Refactor
Chores
Removals