unified date formatting, and use tooltips for dates, use default sidebar styles, mobile responsive, add favicon#6
Conversation
…bar styles, mobile responsive, add favicon
There was a problem hiding this comment.
Pull request overview
This PR updates the chat UI to use a unified, timezone-stable date formatting utility, shifts chat list dates into tooltips, and adjusts the sidebar/layout behavior for improved mobile responsiveness while also standardizing the app icon usage.
Changes:
- Introduces shared date utilities (
lib/date-format.ts) and switches chat timestamps to ISO strings for consistent parsing/formatting. - Updates chat sidebar and chat area UI for tooltip-based dates and mobile sidebar toggling.
- Replaces icon/favicons to use a single
public/icon.pngand updates layout providers accordingly.
Reviewed changes
Copilot reviewed 10 out of 12 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| public/icon.png | Adds new app icon asset (used in sidebar + metadata). |
| package.json | Minor dependency ordering change. |
| lib/date-format.ts | New shared formatting/parsing utilities (locale + timezone stable). |
| lib/data/chat.ts | Changes chat timestamps to ISO strings to support stable formatting/parsing. |
| components/ui/tooltip.tsx | Minor tooltip arrow styling tweak. |
| components/ui/dropdown-menu.tsx | Refactors Tailwind class variants for dropdown items/labels/sub-triggers. |
| components/chat-sidebar.tsx | Uses icon image, adds tooltip date display, updates sidebar collapsible mode, tweaks dropdown alignment. |
| components/chat-area.tsx | Uses shared date formatting utilities and adds mobile sidebar trigger. |
| app/layout.tsx | Updates metadata icons to /icon.png and wraps app in TooltipProvider. |
| app/chat/loading.tsx | Updates loading skeleton layout to match new chat area structure. |
| app/chat/layout.tsx | Removes custom sidebar width override and relies on sidebar defaults. |
Comments suppressed due to low confidence (1)
components/ui/dropdown-menu.tsx:162
data-inset:pl-8is likely not a valid Tailwind data-attribute variant; the usual form isdata-[inset]:pl-8(matching thedata-insetattribute that Radix/shadcn patterns emit). If this doesn’t compile, inset labels won’t indent as intended.
<DropdownMenuPrimitive.Label
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn(
"px-2 py-1.5 text-sm font-medium data-inset:pl-8",
className,
)}
{...props}
/>
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 10 minutes and 18 seconds. ⌛ 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. 📝 WalkthroughWalkthroughRefactors chat layout and sidebar sizing, centralizes date/time formatting into a new utility module, converts stored timestamps to ISO strings, adds global TooltipProvider, updates loading skeletons and chat/sidebar UI (offcanvas sidebar, logo image, timestamp tooltips), and adjusts several UI utility components. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 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 |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
![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
🧹 Nitpick comments (1)
app/chat/loading.tsx (1)
20-35: Consider data-driven rendering for repeated message skeleton rowsThe four repeated blocks are structurally similar; mapping from a small config array will reduce duplication and simplify future tweaks.
Refactor sketch
+ {[ + { reverse: true, bubble: "h-12 w-[60%]" }, + { reverse: false, bubble: "h-16 w-[80%]" }, + { reverse: true, bubble: "h-12 w-[60%]" }, + { reverse: false, bubble: "h-16 w-[80%]" }, + ].map((row, i) => ( + <div key={i} className={`flex gap-4 ${row.reverse ? "flex-row-reverse" : ""}`}> + <Skeleton className="size-8 shrink-0 rounded-sm" /> + <Skeleton className={`${row.bubble} rounded-lg`} /> + </div> + ))} - <div className="flex flex-row-reverse gap-4"> - <Skeleton className="size-8 shrink-0 rounded-sm" /> - <Skeleton className="h-12 w-[60%] rounded-lg" /> - </div> - <div className="flex gap-4"> - <Skeleton className="size-8 shrink-0 rounded-sm" /> - <Skeleton className="h-16 w-[80%] rounded-lg" /> - </div> - <div className="flex flex-row-reverse gap-4"> - <Skeleton className="size-8 shrink-0 rounded-sm" /> - <Skeleton className="h-12 w-[60%] rounded-lg" /> - </div> - <div className="flex gap-4"> - <Skeleton className="size-8 shrink-0 rounded-sm" /> - <Skeleton className="h-16 w-[80%] rounded-lg" /> - </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/chat/loading.tsx` around lines 20 - 35, The four repeated Skeleton message blocks in app/chat/loading.tsx are duplicated; refactor the Loading component (or the function rendering these rows) to use a small config array (e.g., objects describing alignment and height/width classes) and map over it to render each row instead of repeating JSX. Use unique identifiers like the Skeleton elements and class combos ("flex flex-row-reverse gap-4", "flex gap-4", "size-8", "h-12 w-[60%]", "h-16 w-[80%]") in the config so the mapped render preserves alignment and sizes, making future changes easier and removing duplication. Ensure keys for mapped items are stable (index or a small id in config) and keep existing classNames unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/chat/loading.tsx`:
- Around line 18-19: The scrollable container div with className "min-h-0 flex-1
overflow-y-auto px-4 pb-28 md:px-6" has insufficient bottom padding so the last
message skeleton can sit under the sticky composer; update that div to increase
the bottom padding to match the sticky composer height (e.g., change pb-28 to
pb-44 and add a responsive rule like md:pb-44 or appropriate value), and apply
the same padding alignment to the sticky composer/footer block so both elements
use the same bottom spacing convention.
- Around line 9-15: The header skeletons use fixed classes "w-56" and "w-40"
which cause overflow on narrow viewports; update the layout so the left skeleton
group can shrink and the right skeleton can size responsively: add a shrinking
container (e.g., apply "min-w-0" to the parent flex or the left <div
className="space-y-1">) and replace the fixed widths on the Skeleton components
with responsive sizing (e.g., use "w-full max-w-[14rem]" / "w-full
max-w-[10rem]" or give the left group "flex-1" and the Skeletons "w-full
max-w-...") so the elements wrap/shrink instead of causing horizontal scroll
while preserving gap and alignment.
---
Nitpick comments:
In `@app/chat/loading.tsx`:
- Around line 20-35: The four repeated Skeleton message blocks in
app/chat/loading.tsx are duplicated; refactor the Loading component (or the
function rendering these rows) to use a small config array (e.g., objects
describing alignment and height/width classes) and map over it to render each
row instead of repeating JSX. Use unique identifiers like the Skeleton elements
and class combos ("flex flex-row-reverse gap-4", "flex gap-4", "size-8", "h-12
w-[60%]", "h-16 w-[80%]") in the config so the mapped render preserves alignment
and sizes, making future changes easier and removing duplication. Ensure keys
for mapped items are stable (index or a small id in config) and keep existing
classNames unchanged.
🪄 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
Run ID: 9046d320-a7cb-419d-9947-c86bdc27bb2e
⛔ Files ignored due to path filters (2)
app/favicon.icois excluded by!**/*.icopublic/icon.pngis excluded by!**/*.png
📒 Files selected for processing (10)
app/chat/layout.tsxapp/chat/loading.tsxapp/layout.tsxcomponents/chat-area.tsxcomponents/chat-sidebar.tsxcomponents/ui/dropdown-menu.tsxcomponents/ui/tooltip.tsxlib/data/chat.tslib/date-format.tspackage.json
👮 Files not reviewed due to content moderation or server errors (8)
- lib/data/chat.ts
- components/ui/dropdown-menu.tsx
- lib/date-format.ts
- components/ui/tooltip.tsx
- app/layout.tsx
- app/chat/layout.tsx
- components/chat-area.tsx
- components/chat-sidebar.tsx
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 12 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
No description provided.