From bcaf14464ab96b196ce04fba292ecd4d1f911fe0 Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Fri, 30 Jan 2026 22:45:53 +0800
Subject: [PATCH] fix(ui): improve disabled state cursor and no-agent empty
 state

- Add cursor-not-allowed and reduced opacity to ChatInput when disabled
- Show user icon in empty state when no agent is selected
- Pass contextual placeholder text based on agent selection

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/web/app/components/chat.tsx          | 13 ++++++++++---
 packages/ui/src/components/chat-input.tsx | 13 +++++++++----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/apps/web/app/components/chat.tsx b/apps/web/app/components/chat.tsx
index ce455e6a..2a9ef392 100644
--- a/apps/web/app/components/chat.tsx
+++ b/apps/web/app/components/chat.tsx
@@ -5,6 +5,8 @@ import { SidebarTrigger } from "@multica/ui/components/ui/sidebar";
 import { Badge } from "@multica/ui/components/ui/badge";
 import { ChatInput } from "@multica/ui/components/chat-input";
 import { MemoizedMarkdown } from "@multica/ui/components/markdown";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { UserIcon } from "@hugeicons/core-free-icons";
 import { useMessages } from "../hooks/use-messages";
 import { useGateway } from "../hooks/use-gateway";
 import { useHub } from "../hooks/use-hub";
@@ -64,8 +66,9 @@ export function Chat() {
 
       <main ref={mainRef} className="flex-1 overflow-y-auto min-h-0" style={fadeStyle}>
         {!activeAgentId ? (
-          <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
-            Select an agent to start chatting
+          <div className="flex flex-col items-center justify-center h-full gap-3 text-muted-foreground">
+            <HugeiconsIcon icon={UserIcon} strokeWidth={1.5} className="size-10 opacity-30" />
+            <span className="text-sm">Select an agent to start chatting</span>
           </div>
         ) : filtered.length === 0 ? (
           <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
@@ -98,7 +101,11 @@ export function Chat() {
       </main>
 
       <footer className="w-full p-2 pt-1 max-w-4xl mx-auto">
-        <ChatInput onSubmit={handleSend} disabled={!canSend} />
+        <ChatInput
+          onSubmit={handleSend}
+          disabled={!canSend}
+          placeholder={!activeAgentId ? "Select an agent first..." : "Type a message..."}
+        />
       </footer>
     </div>
   );
diff --git a/packages/ui/src/components/chat-input.tsx b/packages/ui/src/components/chat-input.tsx
index 9c9a2b05..ce5a3e94 100644
--- a/packages/ui/src/components/chat-input.tsx
+++ b/packages/ui/src/components/chat-input.tsx
@@ -3,13 +3,15 @@ import { useRef } from "react";
 import { Button } from "@multica/ui/components/ui/button";
 import { ArrowUpIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
+import { cn } from "@multica/ui/lib/utils";
 
 interface ChatInputProps {
   onSubmit?: (value: string) => void;
   disabled?: boolean;
+  placeholder?: string;
 }
 
-export function ChatInput({ onSubmit, disabled }: ChatInputProps) {
+export function ChatInput({ onSubmit, disabled, placeholder = "Type a message..." }: ChatInputProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const handleSubmit = () => {
@@ -22,12 +24,15 @@ export function ChatInput({ onSubmit, disabled }: ChatInputProps) {
   };
 
   return (
-    <div className="bg-card rounded-xl p-3 border border-border">
+    <div className={cn(
+      "bg-card rounded-xl p-3 border border-border transition-colors",
+      disabled && "cursor-not-allowed opacity-60"
+    )}>
       <textarea
         ref={textareaRef}
         rows={2}
         disabled={disabled}
-        placeholder="Type a message..."
+        placeholder={placeholder}
         onChange={(e) => {
           e.target.style.height = "auto";
           e.target.style.height = `${Math.min(e.target.scrollHeight, 200)}px`;
@@ -38,7 +43,7 @@ export function ChatInput({ onSubmit, disabled }: ChatInputProps) {
             handleSubmit();
           }
         }}
-        className="w-full resize-none bg-transparent px-1 py-1 text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:opacity-50"
+        className="w-full resize-none bg-transparent px-1 py-1 text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
       />
       <div className="flex items-center justify-end pt-2">
         <Button size="icon" onClick={handleSubmit} disabled={disabled}>