refactor(dashboard): unify AI chat surfaces on assistant-ui Thread#1427
Merged
Conversation
…ents surfaces - Rewrite data-grid with URL-synced state, new sizing logic, tests - Move analytics/replays → session-replays; add per-user session replays card - Add team-analytics and team-payments to team detail page - Add project_user.last_active_at index + permission-definitions pagination - Various editable-input / inline-save-discard / settings polish
…sion handling - Introduced pagination for teams in the dashboard, allowing for efficient data retrieval and display. - Updated permission definitions to include cursor-based pagination, improving user experience when navigating through permissions. - Refactored various components to utilize the new paginated API, ensuring consistency across the application. - Added error handling for pagination and improved loading states in user session replays and team member tables. - Enhanced the data grid to support URL-synced state for column widths and visibility, improving user customization options. This update significantly enhances the dashboard's performance and usability, particularly for users managing large teams and permissions.
- Updated the ProjectUser model to simplify indexing on lastActiveAt. - Refactored permission definitions pagination to utilize a unified schema, improving consistency across project and team permissions. - Enhanced error handling in pagination logic for better user feedback. - Improved loading states and data retrieval efficiency in various components, including session replays and team permissions. These changes streamline the permission management experience and optimize data handling in the dashboard.
…election logic - Renamed cursor comparator variable for clarity in session replay queries. - Enhanced search query handling to include escape character for better SQL compatibility. - Introduced error handling for asynchronous queries in the Team Analytics section, providing default values for failed queries. - Refactored data grid selection logic to support flexible row selection modes and improved column width distribution. These changes enhance the robustness and usability of the dashboard components, particularly in data retrieval and user interaction.
- Deleted the 'dev:tui' script from various package.json files across apps and examples, as it was redundant and not utilized in the current development workflow. - This cleanup helps streamline the project configuration and reduces potential confusion for developers.
- Updated user and team listing functions to utilize paginated APIs, enhancing data retrieval efficiency. - Refactored related components to support the new pagination structure, ensuring consistency across the application. - Improved error handling and response structures for better user feedback during data operations. These changes optimize the performance of user and team management features in the dashboard.
- Enhanced the `paginatePermissionDefinitions` function to include sorting by ID using a string comparison utility. - Improved error handling for cursor validation, throwing a `StatusError` when the cursor is not found, ensuring better user feedback. - Updated related components to maintain consistency in pagination behavior across the application. These changes optimize the user experience when navigating permission definitions and enhance data retrieval reliability.
- Improved cursor-based pagination logic to ensure that the cursor matches the current filter set, preventing issues when filters are swapped between requests. - Updated error handling to throw a `KnownErrors.ItemNotFound` when the cursor is invalid or does not meet duration constraints. - Refactored related components to maintain consistency in pagination behavior across the application. These changes enhance the reliability of data retrieval and improve user experience when navigating session replays and team permissions.
- Updated the user permissions type to allow for null values, indicating permission fetch failures distinctly from empty arrays. - Improved loading state management in the TeamMemberTable and EditPermissionDialog components to provide better user feedback during permission retrieval. - Refactored permission-related logic to ensure consistent handling of permissions across the dashboard. These changes enhance the user experience by clearly indicating permission loading issues and improving the overall reliability of permission management.
- Replaced the use of `createDefaultDataGridState` with `useDataGridUrlState` across multiple components to improve state persistence and URL synchronization. - Updated pagination logic in various tables to ensure consistent handling of grid states and improve user experience during data retrieval. - Refactored components to utilize the new user picker table for better user selection functionality. These changes enhance the overall reliability and usability of the dashboard's data grid features.
Replaces the bespoke ai-chat-shared chat UI used by ask-ai, the stack companion widget, vibe coding chat, and the create-dashboard preview with the shared assistant-ui Thread component. Extracts the streaming request/format helpers into a new chat-stream module and the tool call UI into a reusable ToolFallback.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (28)
📝 WalkthroughWalkthroughThis PR implements a major migration of frontend AI chat interactions from ChangesAI Chat Migration & Permission Pagination
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
apps/backend/src/app/api/latest/users/crud.tsxParsing error: error TS5012: Cannot read file '/tsconfig.json': ENOENT: no such file or directory, open '/tsconfig.json'. apps/dashboard/src/components/assistant-ui/thread.tsxParsing error: error TS5012: Cannot read file '/tsconfig.json': ENOENT: no such file or directory, open '/tsconfig.json'. apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/use-ai-query-chat.tsParsing error: error TS5012: Cannot read file '/tsconfig.json': ENOENT: no such file or directory, open '/tsconfig.json'.
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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 |
Contributor
Greptile SummaryThis PR replaces four separate bespoke chat UIs (ask-ai, stack-companion widget, vibe-coding chat, analytics query dialog) with the shared
Confidence Score: 5/5Safe to merge; the refactoring is largely mechanical and well-tested with no data-integrity or auth regressions. The streaming and formatting helpers are cleanly extracted and the previous silent-parse-drop bug is now fixed with captureError. The migration from useChat to useLocalRuntime/useLocalThreadRuntime is consistent across surfaces, tests cover the updated extractLatestQuery logic, and backward-compatible deserialization of legacy stored messages is handled. New findings are limited to the dropped onBlur keyboard shortcut in the command-palette ask-ai panel and the semantically mismatched DatabaseIcon used as the generic tool fallback icon. The three email page clients (email-drafts, email-templates, email-themes) each set composerAttachments without providing an attachmentAdapter, which was flagged in the previous review and remains unresolved. Important Files Changed
Prompt To Fix All With AIFix the following 2 code review issues. Work through them one at a time, proposing concise fixes.
---
### Issue 1 of 2
apps/dashboard/src/components/commands/ask-ai.tsx:96-103
**`onBlur` keyboard-navigation prop is silently dropped**
`CmdKPreviewProps` includes an `onBlur` callback that the old implementation invoked when the user pressed `ArrowLeft` at position 0 in the follow-up input, returning keyboard focus to the command-palette search bar. `AIChatPreviewInner` now ignores this prop entirely — it's spread into the component via `...rest` but never destructured or forwarded to the `Thread` composer. Users relying on the ArrowLeft shortcut to navigate back to the command palette will find it no longer works.
### Issue 2 of 2
apps/dashboard/src/components/assistant-ui/tool-fallback.tsx:52-53
**`DatabaseIcon` used for all tool types regardless of semantics**
The fallback icon is `DatabaseIcon` for every tool call, including the `docs` tool used by the ask-ai and stack-companion surfaces. When the backend calls `docs` to retrieve documentation, users see a database icon and the label "docs" — which is confusing. Consider mapping `docs` to a document/book icon, or using a more neutral icon (e.g. `CpuIcon` / `SparkleIcon`) as the default.
Reviews (4): Last reviewed commit: "Refactor AIChatPreview component to util..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
- Removed unused parameters from session replay queries, specifically `sort_direction` and `q`, to simplify the API. - Updated user and team listing functions to utilize non-paginated APIs, enhancing data retrieval efficiency. - Refactored related components to support the new API structure, ensuring consistency across the application. - Improved error handling and response structures for better user feedback during data operations. These changes optimize the performance of session replay and user management features in the dashboard.
- Modified the `limit` parameter in the user query schema to remove the maximum cap description, simplifying the API documentation. - Updated corresponding OpenAPI specifications in both admin and server JSON files to reflect the change in the `limit` parameter description. These changes enhance the clarity of the API documentation and improve user understanding of the query parameters.
- Added a newline at the end of the `admin.json` and `server.json` files to comply with JSON formatting standards. This change ensures better compatibility with various parsers and tools that expect a newline at the end of files.
…r/assistant-ui-chat-surfaces
- Replaced fixed retry count with a timeout-based approach in the `waitForMessagesWithSubjectCount` method to improve flexibility and reliability. - Introduced configurable timeout and interval values, allowing for better control over message fetching behavior. These changes optimize the waiting mechanism for message retrieval in end-to-end tests.
- Updated the conversation dialog component to utilize UserPickerTable instead of UserSearchPicker for improved user experience and functionality.
…on type selection - Simplified the loading state handling in the RuleTriggerHistoryDialog component to ensure proper state updates based on the latest request ID. - Enhanced the action type selection logic in the RuleEditor component to restrict values to valid options, improving user input validation.
…r/assistant-ui-chat-surfaces
- Added error capturing for parsing failures in the AI chat stream to improve debugging and error tracking. - Updated the AI chat widget to generate a unique tool call ID using `crypto.randomUUID()` when none is provided, ensuring each tool call is uniquely identifiable. These changes improve the robustness of the chat functionality and enhance error visibility.
- Updated the AIChatPreview component to accept the query prop directly, enhancing its functionality by using it as a key for the inner component. - This change improves the component's performance and ensures that the correct query is passed down to the AIChatPreviewInner.
N2D4
approved these changes
May 14, 2026
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
2 participants
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.
Summary
ai-chat-sharedchat UI (used by ask-ai, the stack companion widget, vibe coding chat, and the create-dashboard preview) with the sharedassistant-uiThreadcomponent.components/assistant-ui/chat-stream.tsmodule so each surface only owns itsChatModelAdapter.ToolFallbackfor tool-call rendering and delete the now-unusedai-chat-shared.tsx(-1386 / +747 lines net).Stacked on top of
refactor/data-grid-and-dashboard-surfaces.Base:
refactor/data-grid-and-dashboard-surfaces→ Head:refactor/assistant-ui-chat-surfaces· 18 files changedScreenshots
Analytics → Tables — AI Query dialog
Stack Companion — chat widget
Ask-AI command palette (⌘K → Ask AI)
Email editor — embedded chat panel
Notes for reviewers
The four surfaces above all previously shared
components/commands/ai-chat-shared.tsx(516 lines, deleted). After this PR they each own a thinChatModelAdapterand render throughcomponents/assistant-ui/thread.tsx+ the newchat-stream.tshelpers. Visual differences between before and after are intentional — theassistant-uiThreadbrings its own message bubbles, scroll-to-bottom behaviour, composer, andToolFallbackrendering. The email editor's chat panel is the surface where the behaviour change is most visible (tool-call rendering now consistent with the rest of the app).Heaviest changes (lines):
components/stack-companion/ai-chat-widget.tsx(571)components/commands/ai-chat-shared.tsx(516, deleted)analytics/tables/ai-query-dialog.tsx(429)components/vibe-coding/chat-adapters.ts(400)components/assistant-ui/chat-stream.ts(284, new)components/commands/ask-ai.tsx(274)components/assistant-ui/thread.tsx(115)components/assistant-ui/tool-fallback.tsx(113)Test plan
pnpm lintpnpm typecheckToolFallback).chat-stream.tsis shared).Summary by CodeRabbit
New Features
Improvements