From 59f8d116af6e4b8856ff95f776073d948d4f7e22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9D=9E=E6=B3=95=E6=93=8D=E4=BD=9C?= <hjlarry@163.com>
Date: Thu, 7 Nov 2024 18:10:41 +0800
Subject: [PATCH] chore: improve custom tool's display (#10410)

---
 .../tools/edit-custom-collection-modal/config-credentials.tsx | 4 ++--
 .../tools/edit-custom-collection-modal/get-schema.tsx         | 4 ++--
 .../components/tools/edit-custom-collection-modal/index.tsx   | 4 ++--
 web/app/components/tools/provider/custom-create-card.tsx      | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
index d580c00102..4b24bcb931 100644
--- a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
@@ -120,7 +120,7 @@ const ConfigCredential: FC<Props> = ({
                   <input
                     value={tempCredential.api_key_header}
                     onChange={e => setTempCredential({ ...tempCredential, api_key_header: e.target.value })}
-                    className='w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow'
+                    className='w-full h-10 px-3 text-sm font-normal  border border-transparent bg-gray-100 rounded-lg grow outline-none focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs'
                     placeholder={t('tools.createTool.authMethod.types.apiKeyPlaceholder')!}
                   />
                 </div>
@@ -129,7 +129,7 @@ const ConfigCredential: FC<Props> = ({
                   <input
                     value={tempCredential.api_key_value}
                     onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
-                    className='w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow'
+                    className='w-full h-10 px-3 text-sm font-normal  border border-transparent bg-gray-100 rounded-lg grow outline-none focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs'
                     placeholder={t('tools.createTool.authMethod.types.apiValuePlaceholder')!}
                   />
                 </div>
diff --git a/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
index 7b0244e3e3..2552c67568 100644
--- a/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
@@ -70,7 +70,7 @@ const GetSchema: FC<Props> = ({
             <div className='relative'>
               <input
                 type='text'
-                className='w-[244px] h-8 pl-1.5 pr-[44px] overflow-x-auto border border-gray-200 rounded-lg text-[13px]'
+                className='w-[244px] h-8 pl-1.5 pr-[44px] overflow-x-auto border border-gray-200 rounded-lg text-[13px] focus:outline-none focus:border-components-input-border-active'
                 placeholder={t('tools.createTool.importFromUrlPlaceHolder')!}
                 value={importUrl}
                 onChange={e => setImportUrl(e.target.value)}
@@ -89,7 +89,7 @@ const GetSchema: FC<Props> = ({
           </div>
         )}
       </div>
-      <div className='relative' ref={showExamplesRef}>
+      <div className='relative -mt-0.5' ref={showExamplesRef}>
         <Button
           size='small'
           className='space-x-1'
diff --git a/web/app/components/tools/edit-custom-collection-modal/index.tsx b/web/app/components/tools/edit-custom-collection-modal/index.tsx
index c734c91e13..555fd0dd08 100644
--- a/web/app/components/tools/edit-custom-collection-modal/index.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@@ -186,8 +186,8 @@ const EditCustomCollectionModal: FC<Props> = ({
         positionCenter={isAdd && !positionLeft}
         onHide={onHide}
         title={t(`tools.createTool.${isAdd ? 'title' : 'editTitle'}`)!}
-        panelClassName='mt-2 !w-[630px]'
-        maxWidthClassName='!max-w-[630px]'
+        panelClassName='mt-2 !w-[640px]'
+        maxWidthClassName='!max-w-[640px]'
         height='calc(100vh - 16px)'
         headerClassName='!border-b-black/5'
         body={
diff --git a/web/app/components/tools/provider/custom-create-card.tsx b/web/app/components/tools/provider/custom-create-card.tsx
index 99a2ad2be3..d6aa9ab533 100644
--- a/web/app/components/tools/provider/custom-create-card.tsx
+++ b/web/app/components/tools/provider/custom-create-card.tsx
@@ -27,8 +27,8 @@ const Contribute = ({ onRefreshData }: Props) => {
 
   const linkUrl = useMemo(() => {
     if (language.startsWith('zh_'))
-      return 'https://docs.dify.ai/v/zh-hans/guides/gong-ju/quick-tool-integration'
-    return 'https://docs.dify.ai/tutorials/quick-tool-integration'
+      return 'https://docs.dify.ai/zh-hans/guides/tools#ru-he-chuang-jian-zi-ding-yi-gong-ju'
+    return 'https://docs.dify.ai/guides/tools#how-to-create-custom-tools'
   }, [language])
 
   const [isShowEditCollectionToolModal, setIsShowEditCustomCollectionModal] = useState(false)