feat(web): show disabled reasons in tooltips when buttons are disabled (#2430)

* feat(web): show disabled reasons in tooltips when buttons are disabled

- Add disabled reason tooltips for model card actions (set default, delete)
- Add disabled reason tooltips for marketplace skill card install button
- Add disabled reason display for chat input when disabled
- Add internationalization support for all disabled reasons (en/zh)
- Model card: Show specific reasons when set-default or delete buttons are disabled
- Marketplace skill card: Show specific reasons when install button is disabled
- Chat composer: Show reason text below input when input is disabled

* fix: show disabled action reasons via tooltips

* fix(web): restore accessible labels for model action tooltips

web/frontend/src/components/chat/chat-composer.tsx

@@ -46,6 +46,12 @@ export function ChatComposer({
     ? t("chat.placeholder")
     : t(`chat.disabledPlaceholder.${inputDisabledReason}`)
 
+  const inputDisabledReason = (() => {
+    if (!isConnected) return t("chat.inputDisabled.notConnected")
+    if (!hasDefaultModel) return t("chat.inputDisabled.noModel")
+    return null
+  })()
+
   const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.nativeEvent.isComposing) return
     if (e.key === "Enter" && !e.shiftKey) {
@@ -89,6 +95,7 @@ export function ChatComposer({
           onKeyDown={handleKeyDown}
           placeholder={placeholder}
           disabled={!canInput}
+          title={inputDisabledReason || undefined}
           className={cn(
             "placeholder:text-muted-foreground/50 max-h-[200px] min-h-[60px] resize-none border-0 bg-transparent px-2 py-1 text-[15px] shadow-none transition-colors focus-visible:ring-0 focus-visible:outline-none dark:bg-transparent",
             !canInput && "cursor-not-allowed",
@@ -96,6 +103,11 @@ export function ChatComposer({
           minRows={1}
           maxRows={8}
         />
+        {!canInput && inputDisabledReason && (
+          <div className="px-3 py-1 text-xs text-muted-foreground">
+            {inputDisabledReason}
+          </div>
+        )}
 
         <div className="mt-2 flex items-center justify-between px-1">
           <div className="flex items-center gap-1">