refactor(dashboard): unify AI chat surfaces on assistant-ui Thread#1427
refactor(dashboard): unify AI chat surfaces on assistant-ui Thread#1427mantrakp04 wants to merge 7 commits into
Conversation
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.
|
|
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 ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
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}
…r/assistant-ui-chat-surfaces
…nd theme components - Introduced the `composerAttachments` prop in the `EmailDraftUI`, `EmailTemplateUI`, and `EmailThemeUI` components to enhance functionality and support attachment features in email creation.
- Updated the AI query dialog to include new components such as `MarkdownText`, `Thread`, and `ToolFallback` for improved user interaction. - Refactored the chat handling logic to utilize `ThreadMessage` for better message structure and processing. - Replaced the `setMessages` method with `clearMessages` for more intuitive chat management. - Enhanced test cases to accommodate the new message structure and ensure robust functionality. These changes streamline the AI query experience and improve the overall user interface in the analytics section.
…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.
2 participants
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).