feat(chat): redesign chat input bottom bar and improve animations

[rafavalls]

Reorganize bottom bar layout: agent selector, file upload, and mode selector grouped on the left; model name and send button on the right.

• Model selector shows text name only (no logo), strips provider prefix
• Agent button uses animated SVG gradient dashed border (chart-1 to chart-4)
• File upload and mode selector use consistent bordered icon buttons
• Agent badge header animates in/out with grid-rows collapse + ease-out
• File node chip uses design system tokens instead of hardcoded colors
• Simplify home greeting to "What's on your mind, {name}?"

---

Summary by cubic

Redesigned the chat input bottom bar for a clearer layout and smoother agent badge animations. Unified icon button styles and simplified model display to reduce visual noise.

• New Features
  • Left: agent selector, file upload, mode. Right: model (text-only) and send.
  • Model selector shows only the model name and strips provider prefixes.
  • Agent selector uses an animated SVG gradient dashed border; agent badge expands/collapses smoothly.
  • Mode and file upload are bordered icon buttons with consistent hover/disabled behavior.
  • File chip uses design system tokens (no hardcoded colors).
  • Home greeting simplified to “What’s on your mind, {name}?”.

^{Written for commit 7cfde78. Summary will update on new commits.}

[github-actions]

🧪 Benchmark

Should we run the Virtual MCP strategy benchmark for this PR?

React with 👍 to run the benchmark.

Reaction	Action
👍	Run quick benchmark (10 & 128 tools)

Benchmark will run on the next push after you react.

[github-actions]

Release Options

Should a new version be published when this PR is merged?

React with an emoji to vote on the release type:

Reaction	Type	Next Version
👍	Prerelease	2.120.2-alpha.1
🎉	Patch	2.120.2
❤️	Minor	2.121.0
🚀	Major	3.0.0

Current version: 2.120.1

Deployment

• Deploy to production (triggers ArgoCD sync after Docker image is published)

[cubic-dev-ai]

1 issue found across 7 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/mesh/src/web/components/chat/input.tsx">

<violation number="1" location="apps/mesh/src/web/components/chat/input.tsx:372">
P2: Avoid calling setShowWrapper during render. Move this state update into a useEffect so React doesn’t warn about state updates in render and risk render loops.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: Avoid calling setShowWrapper during render. Move this state update into a useEffect so React doesn’t warn about state updates in render and risk render loops.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/mesh/src/web/components/chat/input.tsx, line 372:

<comment>Avoid calling setShowWrapper during render. Move this state update into a useEffect so React doesn’t warn about state updates in render and risk render loops.</comment>

<file context>
@@ -335,35 +363,90 @@ export function ChatInput() {
+
+  // Track if wrapper visuals should still show (stays true during exit animation)
+  const [showWrapper, setShowWrapper] = useState(false);
+  if (hasAgentBadge && !showWrapper) {
+    setShowWrapper(true);
+  }
</file context>

Suggested change

	if (hasAgentBadge && !showWrapper) {
	setShowWrapper(true);
	}
	useEffect(() => {
	if (hasAgentBadge) {
	setShowWrapper(true);
	}
	}, [hasAgentBadge]);