From 0f1165af6470f1d76a15d6050987e6510b1c58de Mon Sep 17 00:00:00 2001
From: Xin Wang <wangx@macmini.com>
Date: Fri, 27 Feb 2026 15:12:01 +0800
Subject: [PATCH] Enhance Dialog component to accept contentClassName prop for
 customizable styling. Update ToolLibraryPage to utilize new prop for improved
 modal layout. Refactor text in ToolLibrary for clarity.

---
 web/components/UI.tsx     | 5 +++--
 web/pages/ToolLibrary.tsx | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/components/UI.tsx b/web/components/UI.tsx
index 28109bd..ffd5767 100644
--- a/web/components/UI.tsx
+++ b/web/components/UI.tsx
@@ -209,15 +209,16 @@ interface DialogProps {
   title: string;
   children: React.ReactNode;
   footer?: React.ReactNode;
+  contentClassName?: string;
 }
 
-export const Dialog: React.FC<DialogProps> = ({ isOpen, onClose, title, children, footer }) => {
+export const Dialog: React.FC<DialogProps> = ({ isOpen, onClose, title, children, footer, contentClassName }) => {
   if (!isOpen) return null;
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
        <div className="fixed inset-0 bg-black/80 backdrop-blur-sm transition-opacity animate-in fade-in" onClick={onClose} />
-       <div className="relative z-50 w-full max-w-lg rounded-xl border border-white/10 bg-card p-6 shadow-2xl animate-in zoom-in-95 duration-200">
+       <div className={`relative z-50 w-full max-w-lg rounded-xl border border-white/10 bg-card p-6 shadow-2xl animate-in zoom-in-95 duration-200 ${contentClassName || ''}`}>
           <div className="flex flex-col space-y-1.5 text-center sm:text-left mb-4">
              <h2 className="text-lg font-semibold leading-none tracking-tight">{title}</h2>
           </div>
diff --git a/web/pages/ToolLibrary.tsx b/web/pages/ToolLibrary.tsx
index 8c6b898..cfc097c 100644
--- a/web/pages/ToolLibrary.tsx
+++ b/web/pages/ToolLibrary.tsx
@@ -486,6 +486,7 @@ export const ToolLibraryPage: React.FC = () => {
         isOpen={isToolModalOpen}
         onClose={() => setIsToolModalOpen(false)}
         title={editingTool ? '编辑自定义工具' : '添加自定义工具'}
+        contentClassName="max-w-4xl"
         footer={
           <>
             <Button variant="ghost" onClick={() => setIsToolModalOpen(false)}>取消</Button>
@@ -560,7 +561,7 @@ export const ToolLibraryPage: React.FC = () => {
             </div>
             {toolParameters.length === 0 ? (
               <div className="rounded-md border border-white/10 bg-black/20 p-3 text-xs text-muted-foreground">
-                当前无参数。可以按 ElevenLabs 风格逐个添加参数，无需直接编辑 JSON Schema。
+                当前无参数。可以逐个添加参数，无需直接编辑 JSON Schema。
               </div>
             ) : (
               <div className="space-y-3">