feat(platform): improve chat UX with animation fixes and add-agent button

[Israeltheminer]

Summary

• Fix thinking animation visibility by moving the hide-when-streaming check from ThinkingAnimation into ChatMessages for cleaner component boundaries
• Prevent flicker between multi-step tool calls by checking for in-flight assistant messages in hasIncompleteAssistantMessage
• Simplify TypewriterText by removing the CSS custom property reveal mechanism (--reveal-chars, .typewriter-container)
• Add "Add agent" button to AgentSelector with a URL-based dialog state hook (useDialogSearchParam)

Test plan

• Verify thinking animation shows/hides correctly during streaming
• Verify no flicker between sequential tool calls
• Verify typewriter text renders correctly without CSS variable approach
• Verify "Add agent" button opens create-agent dialog
• Run test suites: thinking-animation.test.tsx, agent-selector.test.tsx, use-dialog-search-param.test.ts

Summary by CodeRabbit

• New Features

  • Added the ability to create custom agents directly from the agent selector.
  • Enhanced thinking indicator to remain visible during multi-step assistant message processing.

• Bug Fixes

  • Improved thinking animation display logic for accurate visibility during text streaming.

• Tests

  • Added comprehensive test coverage for agent selector creation flow, thinking animation behavior, and dialog state management.

[greptile-apps]

Greptile Summary

This PR improves the chat UX by fixing animation visibility issues and adding an "Add agent" button to the agent selector.

Key improvements:

• Fixed thinking animation visibility: moved the hide-when-streaming check from ThinkingAnimation into ChatMessages (chat-messages.tsx:173), creating cleaner component boundaries by making the parent responsible for visibility logic
• Prevented flicker between multi-step tool calls: enhanced hasIncompleteAssistantMessage in use-message-processing.ts:287-291 to check for any in-flight assistant messages (streaming or pending), not just the newest message status
• Simplified typewriter implementation: removed the CSS custom property reveal mechanism (--reveal-chars, .typewriter-container) from both typewriter-text.tsx and globals.css, relying directly on IncrementalMarkdown instead
• Added "Add agent" button: integrated CreateCustomAgentDialog into AgentSelector with permission-based visibility (canManageAgents) and URL-based dialog state management via the new useDialogSearchParam hook

Test coverage:

• Updated thinking-animation.test.tsx to reflect new visibility behavior (now shows when streaming text with no active tools)
• Added comprehensive tests for AgentSelector component (permissions, dialog opening, rendering)
• Added tests for the new useDialogSearchParam hook (URL state management, param preservation)

Confidence Score: 5/5

• This PR is safe to merge with no critical issues identified
• The changes are well-architected refactorings with clear separation of concerns. The thinking animation visibility logic is properly moved to the parent component, the flicker fix correctly handles in-flight messages, and the typewriter simplification removes unused CSS. The new "Add agent" feature is well-tested and properly integrated. All changes are covered by updated/new tests.
• No files require special attention

Important Files Changed

Filename	Overview
services/platform/app/features/chat/components/thinking-animation.tsx	removed hide-when-streaming logic by deleting the check for streamingMessage?.text && toolDetails.length === 0, moving responsibility to parent component
services/platform/app/features/chat/components/chat-messages.tsx	added conditional !streamingMessage?.text to hide thinking animation when typewriter text is visible
services/platform/app/features/chat/hooks/use-message-processing.ts	improved hasIncompleteAssistantMessage to check for in-flight assistant messages (streaming or pending), preventing flicker between multi-step tool calls
services/platform/app/features/chat/components/typewriter-text.tsx	removed CSS custom property mechanism (--reveal-chars, container ref, and useEffect), simplifying component by relying on IncrementalMarkdown directly
services/platform/app/hooks/use-dialog-search-param.ts	new hook that manages dialog state via URL search params using useUrlState, providing isOpen, open, close, and onOpenChange methods
services/platform/app/features/chat/components/agent-selector.tsx	added "Add agent" button with ability check (canManageAgents), CreateCustomAgentDialog integration, and URL-based dialog state management

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[ChatMessages Component] -->|hasIncompleteAssistantMessage| B{Check streamingMessage.text}
    B -->|Has text| C[Hide ThinkingAnimation<br/>Show TypewriterText]
    B -->|No text| D[Show ThinkingAnimation]
    
    E[use-message-processing] -->|Enhanced Logic| F{Check newest message}
    F -->|Not complete| G[Return true]
    F -->|Complete| H{Any assistant msg<br/>streaming/pending?}
    H -->|Yes| I[Return true<br/>Prevents flicker]
    H -->|No| J[Return false]
    
    K[AgentSelector] -->|User clicks Add| L[useDialogSearchParam.open]
    L -->|Sets URL param| M[dialog=create-agent]
    M -->|Triggers| N[CreateCustomAgentDialog]
    
    O[TypewriterText] -->|Simplified| P[IncrementalMarkdown]
    O -.->|Removed| Q[CSS --reveal-chars<br/>Container ref<br/>useEffect]

Loading

_{Last reviewed commit: 666f9ff}

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR introduces agent creation capabilities to the chat interface with URL-based dialog state management. It adds a new useDialogSearchParam hook to manage dialog state via URL parameters and enhances the AgentSelector component with permission-based gating and a custom agent creation dialog trigger. The PR also adjusts the thinking animation rendering logic to remain visible during multi-step tool calls and simplifies the typewriter component by removing CSS variable synchronization. Message processing hooks are enhanced to better track incomplete assistant messages across streaming states, and the thinking animation display is decoupled from text presence conditions.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• feat(platform): refactor chat stream buffer and typewriter rendering #510: Modifies the same typewriter/streaming stack (typewriter-text.tsx, incremental-markdown, globals.css) with related simplifications to CSS-driven reveal mechanics.
• feat(platform): polish chat streaming UX and improve resilience #512: Modifies the same ThinkingAnimation component and its tests, changing rendering conditions for streaming text and tool parts.
• refactor(platform): simplify agent selector #534: Modifies the same agent-selector.tsx component, affecting option rendering logic and dialog integration.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 60.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately captures the main changes: animation fixes (ThinkingAnimation, TypewriterText simplification) and the new add-agent button feature for AgentSelector.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/chat-ux-improvements

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@services/platform/app/features/chat/components/agent-selector.tsx`:
- Around line 120-123: The CreateCustomAgentDialog can be opened via the URL
param even when the user lacks permission; guard both the programmatic opener
and the dialog render by checking the same permission flag. In
handleAddAgentClick only call createAgentDialog.open() if canManageAgents is
true (and keep the existing setOpen(false) behavior), and ensure anywhere the
URL-driven open (useDialogSearchParam/createAgentDialog.open on mount or effect)
first verifies canManageAgents and otherwise clears the dialog param or forces
the dialog closed. Also wrap/render CreateCustomAgentDialog only when
canManageAgents is true so unauthorized users cannot see it (reference:
canManageAgents, createAgentDialog, CreateCustomAgentDialog,
useDialogSearchParam).

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2015851 and 666f9ff.

📒 Files selected for processing (11)

• services/platform/app/features/chat/components/__tests__/agent-selector.test.tsx
• services/platform/app/features/chat/components/__tests__/thinking-animation.test.tsx
• services/platform/app/features/chat/components/agent-selector.tsx
• services/platform/app/features/chat/components/chat-messages.tsx
• services/platform/app/features/chat/components/thinking-animation.tsx
• services/platform/app/features/chat/components/typewriter-text.tsx
• services/platform/app/features/chat/hooks/use-message-processing.ts
• services/platform/app/globals.css
• services/platform/app/hooks/__tests__/use-dialog-search-param.test.ts
• services/platform/app/hooks/use-dialog-search-param.ts
• services/platform/messages/en.json

💤 Files with no reviewable changes (2)

• services/platform/app/globals.css
• services/platform/app/features/chat/components/thinking-animation.tsx