Improve layout and structure of assistant components#99
Conversation
|
@sbansal1999 is attempting to deploy a commit to the Databuddy Team on Vercel. A member of the Team first needs to authorize it. |
|
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 WalkthroughRefactors ChatSection to use native scrolling, redesigns the welcome/quick-questions UI into a responsive grid, adjusts message rendering spacing, updates AIAssistantMain container classes for a gradient backdrop and full-height layout, simplifies AssistantPage rendering with early returns, and sets the websites/[id] layout container to h-full. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant P as AssistantPage
participant D as Data/State
participant M as AIAssistantMain
participant L as LoadingSkeleton
U->>P: Navigate to /websites/[id]/assistant
P->>D: Check isLoading & websiteData
alt isLoading or missing data
P-->>U: Render LoadingSkeleton
P->>L: Show
else ready
P-->>U: Render AIAssistantMain
P->>M: Show
end
sequenceDiagram
participant U as User
participant C as ChatSection
participant S as sendMessage()
participant V as Viewport
U->>C: Click quick question button
C->>S: sendMessage(text)
S-->>C: Message enqueued/rendered
C->>V: scrollToBottom()
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
@coderabbitai 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: 1
🔭 Outside diff range comments (1)
apps/dashboard/app/(main)/websites/[id]/assistant/components/chat-section.tsx (1)
172-176: ModelSelector onModelChange is a no-op; users can’t switch modelsonModelChange={() => {}} prevents the model from changing. Wire it to the model atom setter so the selection persists and impacts responses.
Apply this diff:
- const [selectedModel] = useAtom(modelAtom); + const [selectedModel, setSelectedModel] = useAtom(modelAtom);- <ModelSelector - disabled={isLoading} - onModelChange={() => {}} - selectedModel={selectedModel} - /> + <ModelSelector + disabled={isLoading} + onModelChange={setSelectedModel} + selectedModel={selectedModel} + />Also applies to: 81-82
🧹 Nitpick comments (2)
apps/dashboard/app/(main)/websites/[id]/assistant/components/chat-section.tsx (1)
90-96: Avoid repeated O(n) filters on every render; memoize messageStatsmessageStats runs three filters on each render. It’s minor now but grows with history size. Memoize based on messages to keep renders snappy.
Apply this diff:
-import { useEffect, useRef, useState } from 'react'; +import { useEffect, useMemo, useRef, useState } from 'react';- // Calculate message statistics - const messageStats = { - total: messages.length - 1, // Excluding welcome message - charts: messages.filter((m) => m.responseType === 'chart').length, - metrics: messages.filter((m) => m.responseType === 'metric').length, - text: messages.filter((m) => m.responseType === 'text').length, - }; + // Calculate message statistics + const messageStats = useMemo(() => { + const stats = { total: Math.max(0, messages.length - 1), charts: 0, metrics: 0, text: 0 }; + for (const m of messages) { + if (m.responseType === 'chart') stats.charts++; + else if (m.responseType === 'metric') stats.metrics++; + else if (m.responseType === 'text') stats.text++; + } + return stats; + }, [messages]);Also applies to: 15-15
apps/dashboard/app/(main)/websites/[id]/assistant/components/ai-assistant-main.tsx (1)
58-60: Gradient wrapper height chain confirmed
All ancestor layouts provide explicit height, so your outer<div className="h-full bg-gradient-to-br…">will stretch as expected:• apps/dashboard/app/layout.tsx
–<body className="flex h-full min-h-screen…">
• apps/dashboard/app/(main)/layout.tsx
– outer<div className="h-screen overflow-hidden…">
– nested<div className="h-screen…">wrapping{children}
• apps/dashboard/app/(main)/websites/[id]/layout.tsx (line 53)
–<div className="mx-auto h-full…">If you’re happy with two stacked gradients (outer and ChatSection’s inner backdrop), no change is needed. Otherwise, consider removing one gradient layer for a cleaner, single backdrop.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (4)
apps/dashboard/app/(main)/websites/[id]/assistant/components/ai-assistant-main.tsx(2 hunks)apps/dashboard/app/(main)/websites/[id]/assistant/components/chat-section.tsx(1 hunks)apps/dashboard/app/(main)/websites/[id]/assistant/page.tsx(1 hunks)apps/dashboard/app/(main)/websites/[id]/layout.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
apps/dashboard/app/(main)/websites/[id]/assistant/page.tsx (1)
apps/dashboard/app/(main)/websites/[id]/assistant/components/ai-assistant-main.tsx (1)
AIAssistantMain(16-80)
apps/dashboard/app/(main)/websites/[id]/assistant/components/chat-section.tsx (3)
apps/dashboard/lib/utils.ts (1)
cn(4-6)apps/dashboard/lib/discord-webhook.ts (1)
sendMessage(89-99)apps/dashboard/app/(main)/websites/[id]/assistant/components/message-bubble.tsx (1)
MessageBubble(259-268)
🔇 Additional comments (5)
apps/dashboard/app/(main)/websites/[id]/layout.tsx (1)
53-53: Height propagation verified; no changes needed
I confirmed that your addedh-fullwill work as intended:
- The root
<html>hash-fulland the<body>usesflex h-full min-h-screen.- All top-level layout wrappers employ
h-screenon their container<div>s.
With that full-height context upstream, the innerh-fullwill correctly fill its parent without causing double scroll.apps/dashboard/app/(main)/websites/[id]/assistant/components/chat-section.tsx (2)
209-267: Welcome/quick-examples redesign looks greatClean, cohesive welcome block and the responsive grid of examples improve UX and scannability. The subtle animations and iconography feel polished.
271-274: Direct MessageBubble rendering with reduced spacing is simpler and efficientDropping extra wrappers and using space-y-3 keeps the DOM lighter and layout tighter without sacrificing readability.
apps/dashboard/app/(main)/websites/[id]/assistant/page.tsx (1)
80-85: Early-return rendering path simplifies control flowClear separation of loading vs. loaded states. This pairs nicely with the AIAssistantMain wrapper now handling its own background/height.
apps/dashboard/app/(main)/websites/[id]/assistant/components/ai-assistant-main.tsx (1)
24-29: Type inference on .find callback is fine hereDropping the explicit Message type on the predicate parameter keeps things concise without losing safety. No action needed.
28adc1f to
a12e7d2
Compare
|
Pushed the |
2 participants
Desktop View
Tablet/Mobile View
Summary by CodeRabbit
New Features
Style
Refactor