Conversation
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthroughAdds a Shell context (chat + left-sidebar hooks) with a chat-mode FSM, refactors chat and layout components to consume useShell, replaces prior providers with ShellProvider, and introduces a resizable right chat panel and chat-mode-driven UI/styling. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant UI as Chat UI
participant Shell as ShellContext (useShell)
participant FSM as Chat FSM (actor)
participant Data as Chat Store / Groups
User->>UI: click button / press hotkey
UI->>Shell: chat.sendEvent({ type: OPEN | CLOSE | TOGGLE | SHIFT })
Shell->>FSM: dispatch event
FSM-->>Shell: snapshot (mode)
Shell-->>UI: chat.mode updated
alt opening with no group
UI->>Data: createChatGroup (derive title)
Data-->>Shell: new groupId
Shell-->>UI: groupId set
end
UI->>UI: re-render (Floating vs RightPanel)
sequenceDiagram
autonumber
participant App as App Layout
participant Shell as ShellProvider
participant Body as Main Body
participant Chat as ChatView (Right Panel)
App->>Shell: initialize (useChatMode + useLeftSidebar)
Shell-->>Body: leftsidebar.expanded
Shell-->>Chat: chat.mode
App->>App: render ResizablePanelGroup
alt chat.mode == RightPanelOpen
App->>Chat: render right resizable panel (with handle)
else
App->>Chat: omit panel (or render floating)
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~55 minutes Possibly related PRs
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (6)
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: 3
🧹 Nitpick comments (1)
apps/desktop2/src/routes/app/main/_layout.tsx (1)
24-39: TODO comment indicates incomplete work.The NotSureAboutThis component has a TODO comment and appears to be a temporary solution for session initialization. Consider tracking this as a separate issue to properly implement this functionality.
Do you want me to open a new issue to track the completion of this TODO?
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
apps/desktop2/src/components/chat/body.tsx(2 hunks)apps/desktop2/src/components/chat/header.tsx(5 hunks)apps/desktop2/src/components/chat/index.tsx(2 hunks)apps/desktop2/src/components/chat/input.tsx(3 hunks)apps/desktop2/src/components/chat/trigger.tsx(1 hunks)apps/desktop2/src/components/chat/view.tsx(4 hunks)apps/desktop2/src/components/main/body/index.tsx(4 hunks)apps/desktop2/src/components/main/sidebar/index.tsx(2 hunks)apps/desktop2/src/contexts/shell/chat.ts(1 hunks)apps/desktop2/src/contexts/shell/index.tsx(1 hunks)apps/desktop2/src/contexts/shell/leftsidebar.ts(1 hunks)apps/desktop2/src/routes/app/main/_layout.index.tsx(1 hunks)apps/desktop2/src/routes/app/main/_layout.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
apps/desktop2/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (apps/desktop2/.cursor/rules/style.mdc)
apps/desktop2/**/*.{tsx,jsx}: When there are many Tailwind classNames with conditional logic, use the cn utility imported asimport { cn } from "@hypr/ui/lib/utils"
Always pass an array to cn when composing Tailwind classNames
Split cn array entries by logical grouping when composing Tailwind classNames
Files:
apps/desktop2/src/components/chat/body.tsxapps/desktop2/src/components/chat/trigger.tsxapps/desktop2/src/contexts/shell/index.tsxapps/desktop2/src/components/chat/view.tsxapps/desktop2/src/components/chat/input.tsxapps/desktop2/src/routes/app/main/_layout.index.tsxapps/desktop2/src/components/chat/index.tsxapps/desktop2/src/components/main/body/index.tsxapps/desktop2/src/components/main/sidebar/index.tsxapps/desktop2/src/routes/app/main/_layout.tsxapps/desktop2/src/components/chat/header.tsx
**/*.{js,ts,tsx,rs}
⚙️ CodeRabbit configuration file
**/*.{js,ts,tsx,rs}: 1. Do not add any error handling. Keep the existing one.
2. No unused imports, variables, or functions.
3. For comments, keep it minimal. It should be about "Why", not "What".
Files:
apps/desktop2/src/components/chat/body.tsxapps/desktop2/src/contexts/shell/leftsidebar.tsapps/desktop2/src/components/chat/trigger.tsxapps/desktop2/src/contexts/shell/index.tsxapps/desktop2/src/components/chat/view.tsxapps/desktop2/src/components/chat/input.tsxapps/desktop2/src/routes/app/main/_layout.index.tsxapps/desktop2/src/components/chat/index.tsxapps/desktop2/src/components/main/body/index.tsxapps/desktop2/src/components/main/sidebar/index.tsxapps/desktop2/src/contexts/shell/chat.tsapps/desktop2/src/routes/app/main/_layout.tsxapps/desktop2/src/components/chat/header.tsx
🧬 Code graph analysis (10)
apps/desktop2/src/components/chat/body.tsx (2)
apps/desktop2/src/contexts/shell/index.tsx (1)
useShell(24-30)packages/ui/src/lib/utils.ts (1)
cn(4-6)
apps/desktop2/src/contexts/shell/index.tsx (2)
apps/desktop2/src/contexts/shell/chat.ts (1)
useChatMode(38-62)apps/desktop2/src/contexts/shell/leftsidebar.ts (1)
useLeftSidebar(4-28)
apps/desktop2/src/components/chat/view.tsx (3)
apps/desktop2/src/contexts/shell/index.tsx (1)
useShell(24-30)apps/desktop2/src/components/chat/header.tsx (1)
ChatHeader(10-56)apps/desktop2/src/components/chat/session.tsx (1)
ChatSession(21-135)
apps/desktop2/src/components/chat/input.tsx (2)
apps/desktop2/src/contexts/shell/index.tsx (1)
useShell(24-30)packages/ui/src/lib/utils.ts (1)
cn(4-6)
apps/desktop2/src/routes/app/main/_layout.index.tsx (4)
apps/desktop2/src/contexts/shell/index.tsx (1)
useShell(24-30)apps/desktop2/src/components/main/sidebar/index.tsx (1)
LeftSidebar(10-47)apps/desktop2/src/components/main/body/index.tsx (1)
Body(20-37)apps/desktop2/src/components/chat/view.tsx (1)
ChatView(14-111)
apps/desktop2/src/components/chat/index.tsx (3)
apps/desktop2/src/contexts/shell/index.tsx (1)
useShell(24-30)apps/desktop2/src/hooks/useAutoCloser.ts (1)
useAutoCloser(4-37)apps/desktop2/src/components/chat/view.tsx (1)
ChatView(14-111)
apps/desktop2/src/components/main/body/index.tsx (2)
apps/desktop2/src/contexts/shell/index.tsx (1)
useShell(24-30)apps/desktop2/src/components/chat/index.tsx (1)
ChatFloatingButton(11-44)
apps/desktop2/src/components/main/sidebar/index.tsx (2)
apps/desktop2/src/contexts/shell/index.tsx (1)
useShell(24-30)apps/desktop2/src/contexts/search/index.tsx (1)
useSearch(581-587)
apps/desktop2/src/routes/app/main/_layout.tsx (2)
apps/desktop2/src/contexts/shell/index.tsx (1)
ShellProvider(13-22)apps/desktop2/src/contexts/search/index.tsx (1)
SearchProvider(440-579)
apps/desktop2/src/components/chat/header.tsx (2)
apps/desktop2/src/contexts/shell/index.tsx (1)
useShell(24-30)packages/ui/src/lib/utils.ts (1)
cn(4-6)
🪛 Biome (2.1.2)
apps/desktop2/src/components/chat/view.tsx
[error] 113-113: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
⏰ 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). (2)
- GitHub Check: ci (macos, macos-14)
- GitHub Check: ci (windows, windows-latest)
🔇 Additional comments (12)
apps/desktop2/src/components/chat/trigger.tsx (1)
3-3: Signature formatting looks good.No functional changes; the tighter destructuring is fine by me.
apps/desktop2/src/routes/app/main/_layout.tsx (1)
15-20: LGTM! Clean provider composition.The refactor from multi-provider setup to a single ShellProvider wrapping SearchProvider is a cleaner and more maintainable approach. The hierarchy is well-structured.
apps/desktop2/src/contexts/shell/index.tsx (1)
1-30: LGTM! Well-structured context implementation.The ShellProvider and useShell hook follow React context best practices. The composition of chat and leftsidebar state into a single context simplifies state management and reduces provider nesting.
apps/desktop2/src/routes/app/main/_layout.index.tsx (1)
13-40: LGTM! Effective use of resizable panels.The layout effectively uses the shell context to conditionally render the left sidebar and chat panel. The ResizablePanelGroup setup with dynamic ChatView rendering provides a good user experience.
apps/desktop2/src/components/main/sidebar/index.tsx (1)
10-47: LGTM! Consistent migration to shell context.The migration from useLeftSidebar to useShell is clean and maintains all existing functionality. The fixed width with shrink-0 ensures the sidebar maintains its size in the flex layout.
apps/desktop2/src/components/chat/header.tsx (3)
23-30: LGTM! Proper use of cn utility.The conditional styling based on chat.mode is clean and follows the coding guidelines for using the cn utility with array entries for logical grouping.
As per coding guidelines.
40-47: LGTM! Mode-dependent toggle behavior.The toggle button correctly switches between PictureInPicture2Icon and PanelRightIcon based on chat.mode, providing clear visual feedback for the current state.
111-115: LGTM! Consistent cn usage throughout.All className compositions properly use the cn utility as required by the coding guidelines.
As per coding guidelines.
Also applies to: 173-176, 181-185, 189-193
apps/desktop2/src/components/chat/index.tsx (1)
11-44: LGTM! Clean refactor to shell-driven state.The migration from local state management to shell-driven state with event-based transitions is a clean design. The removal of props from ChatView simplifies the component interface and centralizes state management.
apps/desktop2/src/components/main/body/index.tsx (2)
20-37: LGTM! Proper conditional rendering.The Body component correctly uses shell context and conditionally renders the ChatFloatingButton based on chat.mode, preventing duplicate UI elements when the right panel is open.
39-117: LGTM! Effective state-driven layout adjustments.The Header component properly uses leftsidebar state to adjust padding, render the toggle icon, and re-key the Reorder.Group for proper reinitialization when the sidebar expands/collapses.
apps/desktop2/src/components/chat/view.tsx (1)
14-111: LGTM! Clean shell-driven refactor.The ChatView refactor removes props and local state in favor of shell context, centralizing chat state management. The group creation logic when sending the first message is appropriate and maintains user experience.
1 participant
No description provided.