Skip to content

refactor(ai): migrate AI UI to shadcn and improve message rendering - #92

Merged
2witstudios merged 1 commit into
masterfrom
AI-UI-to-Shadcn
Dec 17, 2025
Merged

2witstudios merged 1 commit into
masterfrom
AI-UI-to-Shadcn

Conversation

@2witstudios

@2witstudios 2witstudios commented Dec 17, 2025 •

Copy link
Copy Markdown
Owner

Summary

  • Migrated AI components to use shadcn/ui primitives
  • Restructured AI components into functional groups (ui, chat, tools)
  • Improved tool call rendering with inline/borderless design
  • Added task dropdowns to AI chat headers with expandable editing
  • Removed bubble styling from assistant messages for cleaner inline look
  • Various bug fixes for task management, code blocks, and accessibility

Changes

  • Component restructure: Consolidated message rendering into shared/chat/
  • Tool calls: Made tool calls inline/borderless, added task dropdowns
  • Message styling: Removed assistant message bubbles, kept user bubbles
  • Task management: Added per-field loading, optimistic updates, status toggles
  • Code blocks: Improved language inference, error handling, accessibility

Test plan

  • Verify AI chat displays correctly in sidebar, page AI, and global assistant
  • Verify user messages still have bubble styling
  • Verify assistant messages are inline without bubbles
  • Verify tool calls render correctly
  • Verify task dropdowns work with editing and navigation
  • Build passes

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Refactor

    • Reorganized chat message header structure with separate layouts for user and assistant messages
    • Repositioned edit and delete action buttons to dedicated right-aligned areas for improved clarity
  • Style

    • Removed assistant name labels from chat messages and streaming indicators across the interface
    • Simplified visual styling including message backgrounds, container padding, and indicator spacing

✏️ Tip: You can customize this high-level summary in your review settings.

- Remove background and header from assistant text messages
- Keep user message bubbles with "You" header intact
- Remove assistantName prop from StreamingIndicator and ChatMessagesArea
- Update all views: sidebar, page AI, global assistant

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@chatgpt-codex-connector

Copy link
Copy Markdown

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

@coderabbitai

coderabbitai Bot commented Dec 17, 2025 •

Copy link
Copy Markdown
Contributor

Caution

Review failed

The pull request is closed.

Walkthrough

The pull request removes the assistantName prop from messaging components across the codebase, including ChatMessagesArea and StreamingIndicator. Additionally, CompactMessageRenderer and MessageRenderer undergo header layout refactoring to reorganize user and AI message header structures and action button placement.

Changes

Cohort / File(s) Summary
Assistant name prop removal
apps/web/src/components/ai/shared/chat/ChatMessagesArea.tsx, StreamingIndicator.tsx
Removed assistantName prop from interfaces and component implementations; StreamingIndicator now renders without assistant name label and simplified styling
Parent component prop updates
apps/web/src/components/layout/middle-content/page-views/ai-page/AiChatView.tsx, dashboard/GlobalAssistantView.tsx
Removed assistantName prop from ChatMessagesArea invocations
Message renderer header refactoring
apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx, MessageRenderer.tsx
Reorganized header layout: user messages now display inline "You" label with optional "(edited)" tag; action buttons moved to separate right-aligned areas for both user and AI messages; adjusted padding and background styling
Streaming UI adjustment
apps/web/src/components/layout/right-sidebar/ai-assistant/SidebarChatTab.tsx
Removed assistant name label from streaming indicator; reduced visual spacing with margin-bottom adjustment

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–25 minutes

  • MessageRenderer.tsx and CompactMessageRenderer.tsx require careful review of header layout restructuring, conditional rendering branches for user vs. AI messages, and action button placement logic
  • Verify that user and non-user message styling and action button visibility logic align across both renderers
  • Confirm that the "You" label, edited indicator, and action buttons render correctly in their new positions

Poem

🐰 The assistant's name fades from view,
Headers shuffle, action buttons renew,
Messages dance in structured rows,
User and AI in orderly flows,
Simpler streams, a cleaner show! ✨

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch AI-UI-to-Shadcn

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d36606d and 0235f2a.

📒 Files selected for processing (7)
  • apps/web/src/components/ai/shared/chat/ChatMessagesArea.tsx (1 hunks)
  • apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx (1 hunks)
  • apps/web/src/components/ai/shared/chat/MessageRenderer.tsx (1 hunks)
  • apps/web/src/components/ai/shared/chat/StreamingIndicator.tsx (1 hunks)
  • apps/web/src/components/layout/middle-content/page-views/ai-page/AiChatView.tsx (0 hunks)
  • apps/web/src/components/layout/middle-content/page-views/dashboard/GlobalAssistantView.tsx (0 hunks)
  • apps/web/src/components/layout/right-sidebar/ai-assistant/SidebarChatTab.tsx (1 hunks)

Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant