new style of provider detail

web/app/components/tools/provider-list.tsx

@@ -1,7 +1,6 @@
 'use client'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiCloseLine } from '@remixicon/react'
 import type { Collection } from './types'
 import Marketplace from './marketplace'
 import cn from '@/utils/classnames'
@@ -9,18 +8,15 @@ import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import TabSliderNew from '@/app/components/base/tab-slider-new'
 import LabelFilter from '@/app/components/tools/labels/filter'
 import SearchInput from '@/app/components/base/search-input'
-// import CustomCreateCard from '@/app/components/tools/provider/custom-create-card'
 import ProviderDetail from '@/app/components/tools/provider/detail'
 import Empty from '@/app/components/tools/add-tool-modal/empty'
 import { fetchCollectionList } from '@/service/tools'
 import Card from '@/app/components/plugins/card'
-import { useGetLanguage } from '@/context/i18n'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import { useSelector as useAppContextSelector } from '@/context/app-context'
 
 const ProviderList = () => {
   const { t } = useTranslation()
-  const language = useGetLanguage()
   const containerRef = useRef<HTMLDivElement>(null)
   const { enable_marketplace } = useAppContextSelector(s => s.systemFeatures)
 
@@ -97,7 +93,6 @@ const ProviderList = () => {
           'relative grid content-start grid-cols-1 gap-4 px-12 pt-2 pb-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0',
           currentProvider && 'pr-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
         )}>
-          {/* {activeTab === 'api' && <CustomCreateCard onRefreshData={getProviderList} />} */}
           {filteredCollectionList.map(collection => (
             <div
               key={collection.id}
@@ -131,13 +126,13 @@ const ProviderList = () => {
           )
         }
       </div>
-      <div className={cn(
+      {currentProvider && (
-        'shrink-0 w-0 border-l-[0.5px] border-black/8 overflow-y-auto transition-all duration-200 ease-in-out',
+        <ProviderDetail
-        currentProvider && 'w-[420px]',
+          collection={currentProvider}
-      )}>
+          onHide={() => setCurrentProvider(undefined)}
-        {currentProvider && <ProviderDetail collection={currentProvider} onRefreshData={getProviderList} />}
+          onRefreshData={getProviderList}
-      </div>
+        />
-      <div className='absolute top-5 right-5 p-1 cursor-pointer' onClick={() => setCurrentProvider(undefined)}><RiCloseLine className='w-4 h-4' /></div>
+      )}
     </div>
   )
 }

web/app/components/tools/provider/detail.tsx

@@ -17,6 +17,7 @@ import ConfigCredential from '@/app/components/tools/setting/build-in/config-cre
 import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal'
 import WorkflowToolModal from '@/app/components/tools/workflow-tool'
 import Toast from '@/app/components/base/toast'
+import Drawer from '@/app/components/base/drawer'
 import {
   deleteWorkflowTool,
   fetchBuiltInToolList,
@@ -38,11 +39,13 @@ import { useAppContext } from '@/context/app-context'
 
 type Props = {
   collection: Collection
+  onHide: () => void
   onRefreshData: () => void
 }
 
 const ProviderDetail = ({
   collection,
+  onHide,
   onRefreshData,
 }: Props) => {
   const { t } = useTranslation()
@@ -213,164 +216,174 @@ const ProviderDetail = ({
   }, [collection.name, collection.type, getCustomProvider, getProviderToolList, getWorkflowToolProvider])
 
   return (
-    <div className='px-6 py-3'>
+    <Drawer
-      <div className='flex items-center py-1 gap-2'>
+      isOpen={!!collection}
-        <div className='relative shrink-0'>
+      clickOutsideNotOpen={false}
-          {typeof collection.icon === 'string' && (
+      onClose={onHide}
-            <div className='w-8 h-8 bg-center bg-cover bg-no-repeat rounded-md' style={{ backgroundImage: `url(${collection.icon})` }} />
+      footer={null}
-          )}
+      mask={false}
-          {typeof collection.icon !== 'string' && (
+      positionCenter={false}
-            <AppIcon
+      panelClassname={cn('justify-start mt-[64px] mr-2 mb-2 !w-[420px] !max-w-[420px] !p-0 !bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl')}
-              size='small'
+    >
-              icon={collection.icon.content}
+      <div className='px-6 py-3'>
-              background={collection.icon.background}
+        <div className='flex items-center py-1 gap-2'>
-            />
+          <div className='relative shrink-0'>
-          )}
+            {typeof collection.icon === 'string' && (
-        </div>
+              <div className='w-8 h-8 bg-center bg-cover bg-no-repeat rounded-md' style={{ backgroundImage: `url(${collection.icon})` }} />
-        <div className='grow w-0 py-[1px]'>
+            )}
-          <div className='flex items-center text-md leading-6 font-semibold text-gray-900'>
+            {typeof collection.icon !== 'string' && (
-            <div className='truncate' title={collection.label[language]}>{collection.label[language]}</div>
+              <AppIcon
+                size='small'
+                icon={collection.icon.content}
+                background={collection.icon.background}
+              />
+            )}
           </div>
-        </div>
+          <div className='grow w-0 py-[1px]'>
-      </div>
+            <div className='flex items-center text-md leading-6 font-semibold text-gray-900'>
-      <div className='mt-2 min-h-[36px] text-gray-500 text-sm leading-[18px]'>{collection.description[language]}</div>
+              <div className='truncate' title={collection.label[language]}>{collection.label[language]}</div>
-      <div className='flex gap-1 border-b-[0.5px] border-black/5'>
-        {(collection.type === CollectionType.builtIn) && needAuth && (
-          <Button
-            variant={isAuthed ? 'secondary' : 'primary'}
-            className={cn('shrink-0 my-3 w-full', isAuthed && 'bg-white')}
-            onClick={() => {
-              if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
-                showSettingAuthModal()
-            }}
-            disabled={!isCurrentWorkspaceManager}
-          >
-            {isAuthed && <Indicator className='mr-2' color={'green'} />}
-            <div className={cn('text-white leading-[18px] text-[13px] font-medium', isAuthed && '!text-gray-700')}>
-              {isAuthed ? t('tools.auth.authorized') : t('tools.auth.unauthorized')}
             </div>
-          </Button>
+          </div>
-        )}
+        </div>
-        {collection.type === CollectionType.custom && !isDetailLoading && (
+        <div className='mt-2 min-h-[36px] text-gray-500 text-sm leading-[18px]'>{collection.description[language]}</div>
-          <Button
+        <div className='flex gap-1 border-b-[0.5px] border-black/5'>
-            className={cn('shrink-0 my-3 w-full')}
+          {(collection.type === CollectionType.builtIn) && needAuth && (
-            onClick={() => setIsShowEditCustomCollectionModal(true)}
-          >
-            <Settings01 className='mr-1 w-4 h-4 text-gray-500' />
-            <div className='leading-5 text-sm font-medium text-gray-700'>{t('tools.createTool.editAction')}</div>
-          </Button>
-        )}
-        {collection.type === CollectionType.workflow && !isDetailLoading && customCollection && (
-          <>
             <Button
-              variant='primary'
+              variant={isAuthed ? 'secondary' : 'primary'}
-              className={cn('shrink-0 my-3 w-[183px]')}
+              className={cn('shrink-0 my-3 w-full', isAuthed && 'bg-white')}
+              onClick={() => {
+                if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
+                  showSettingAuthModal()
+              }}
+              disabled={!isCurrentWorkspaceManager}
             >
-              <a className='flex items-center text-white' href={`/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel='noreferrer' target='_blank'>
+              {isAuthed && <Indicator className='mr-2' color={'green'} />}
-                <div className='leading-5 text-sm font-medium'>{t('tools.openInStudio')}</div>
+              <div className={cn('text-white leading-[18px] text-[13px] font-medium', isAuthed && '!text-gray-700')}>
-                <LinkExternal02 className='ml-1 w-4 h-4' />
+                {isAuthed ? t('tools.auth.authorized') : t('tools.auth.unauthorized')}
-              </a>
+              </div>
             </Button>
+          )}
+          {collection.type === CollectionType.custom && !isDetailLoading && (
             <Button
-              className={cn('shrink-0 my-3 w-[183px]')}
+              className={cn('shrink-0 my-3 w-full')}
-              onClick={() => setIsShowEditWorkflowToolModal(true)}
+              onClick={() => setIsShowEditCustomCollectionModal(true)}
-              disabled={!isCurrentWorkspaceManager}
             >
+              <Settings01 className='mr-1 w-4 h-4 text-gray-500' />
               <div className='leading-5 text-sm font-medium text-gray-700'>{t('tools.createTool.editAction')}</div>
             </Button>
-          </>
+          )}
+          {collection.type === CollectionType.workflow && !isDetailLoading && customCollection && (
+            <>
+              <Button
+                variant='primary'
+                className={cn('shrink-0 my-3 w-[183px]')}
+              >
+                <a className='flex items-center text-white' href={`/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel='noreferrer' target='_blank'>
+                  <div className='leading-5 text-sm font-medium'>{t('tools.openInStudio')}</div>
+                  <LinkExternal02 className='ml-1 w-4 h-4' />
+                </a>
+              </Button>
+              <Button
+                className={cn('shrink-0 my-3 w-[183px]')}
+                onClick={() => setIsShowEditWorkflowToolModal(true)}
+                disabled={!isCurrentWorkspaceManager}
+              >
+                <div className='leading-5 text-sm font-medium text-gray-700'>{t('tools.createTool.editAction')}</div>
+              </Button>
+            </>
+          )}
+        </div>
+        {/* Tools */}
+        <div className='pt-3'>
+          {isDetailLoading && <div className='flex h-[200px]'><Loading type='app' /></div>}
+          {!isDetailLoading && (
+            <div className='text-xs font-medium leading-6 text-gray-500'>
+              {collection.type === CollectionType.workflow && <span className=''>{t('tools.createTool.toolInput.title').toLocaleUpperCase()}</span>}
+              {collection.type !== CollectionType.workflow && <span className=''>{t('tools.includeToolNum', { num: toolList.length }).toLocaleUpperCase()}</span>}
+              {needAuth && (isBuiltIn || isModel) && !isAuthed && (
+                <>
+                  <span className='px-1'>·</span>
+                  <span className='text-[#DC6803]'>{t('tools.auth.setup').toLocaleUpperCase()}</span>
+                </>
+              )}
+            </div>
+          )}
+          {!isDetailLoading && (
+            <div className='mt-1'>
+              {collection.type !== CollectionType.workflow && toolList.map(tool => (
+                <ToolItem
+                  key={tool.name}
+                  disabled={needAuth && (isBuiltIn || isModel) && !isAuthed}
+                  collection={collection}
+                  tool={tool}
+                  isBuiltIn={isBuiltIn}
+                  isModel={isModel}
+                />
+              ))}
+              {collection.type === CollectionType.workflow && (customCollection as WorkflowToolProviderResponse)?.tool?.parameters.map(item => (
+                <div key={item.name} className='mb-2 px-4 py-3 rounded-xl bg-gray-25 border-[0.5px] border-gray-200'>
+                  <div className='flex items-center gap-2'>
+                    <span className='font-medium text-sm text-gray-900'>{item.name}</span>
+                    <span className='text-xs leading-[18px] text-gray-500'>{item.type}</span>
+                    <span className='font-medium text-xs leading-[18px] text-[#ec4a0a]'>{item.required ? t('tools.createTool.toolInput.required') : ''}</span>
+                  </div>
+                  <div className='h-[18px] leading-[18px] text-gray-500 text-xs'>{item.llm_description}</div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+        {showSettingAuth && (
+          <ConfigCredential
+            collection={collection}
+            onCancel={() => setShowSettingAuth(false)}
+            onSaved={async (value) => {
+              await updateBuiltInToolCredential(collection.name, value)
+              Toast.notify({
+                type: 'success',
+                message: t('common.api.actionSuccess'),
+              })
+              await onRefreshData()
+              setShowSettingAuth(false)
+            }}
+            onRemove={async () => {
+              await removeBuiltInToolCredential(collection.name)
+              Toast.notify({
+                type: 'success',
+                message: t('common.api.actionSuccess'),
+              })
+              await onRefreshData()
+              setShowSettingAuth(false)
+            }}
+          />
         )}
-      </div>
+        {isShowEditCollectionToolModal && (
-      {/* Tools */}
+          <EditCustomToolModal
-      <div className='pt-3'>
+            payload={customCollection}
-        {isDetailLoading && <div className='flex h-[200px]'><Loading type='app' /></div>}
+            onHide={() => setIsShowEditCustomCollectionModal(false)}
-        {!isDetailLoading && (
+            onEdit={doUpdateCustomToolCollection}
-          <div className='text-xs font-medium leading-6 text-gray-500'>
+            onRemove={onClickCustomToolDelete}
-            {collection.type === CollectionType.workflow && <span className=''>{t('tools.createTool.toolInput.title').toLocaleUpperCase()}</span>}
+          />
-            {collection.type !== CollectionType.workflow && <span className=''>{t('tools.includeToolNum', { num: toolList.length }).toLocaleUpperCase()}</span>}
-            {needAuth && (isBuiltIn || isModel) && !isAuthed && (
-              <>
-                <span className='px-1'>·</span>
-                <span className='text-[#DC6803]'>{t('tools.auth.setup').toLocaleUpperCase()}</span>
-              </>
-            )}
-          </div>
         )}
-        {!isDetailLoading && (
+        {isShowEditWorkflowToolModal && (
-          <div className='mt-1'>
+          <WorkflowToolModal
-            {collection.type !== CollectionType.workflow && toolList.map(tool => (
+            payload={customCollection}
-              <ToolItem
+            onHide={() => setIsShowEditWorkflowToolModal(false)}
-                key={tool.name}
+            onRemove={onClickWorkflowToolDelete}
-                disabled={needAuth && (isBuiltIn || isModel) && !isAuthed}
+            onSave={updateWorkflowToolProvider}
-                collection={collection}
+          />
-                tool={tool}
+        )}
-                isBuiltIn={isBuiltIn}
+        {showConfirmDelete && (
-                isModel={isModel}
+          <Confirm
-              />
+            title={t('tools.createTool.deleteToolConfirmTitle')}
-            ))}
+            content={t('tools.createTool.deleteToolConfirmContent')}
-            {collection.type === CollectionType.workflow && (customCollection as WorkflowToolProviderResponse)?.tool?.parameters.map(item => (
+            isShow={showConfirmDelete}
-              <div key={item.name} className='mb-2 px-4 py-3 rounded-xl bg-gray-25 border-[0.5px] border-gray-200'>
+            onConfirm={handleConfirmDelete}
-                <div className='flex items-center gap-2'>
+            onCancel={() => setShowConfirmDelete(false)}
-                  <span className='font-medium text-sm text-gray-900'>{item.name}</span>
+          />
-                  <span className='text-xs leading-[18px] text-gray-500'>{item.type}</span>
-                  <span className='font-medium text-xs leading-[18px] text-[#ec4a0a]'>{item.required ? t('tools.createTool.toolInput.required') : ''}</span>
-                </div>
-                <div className='h-[18px] leading-[18px] text-gray-500 text-xs'>{item.llm_description}</div>
-              </div>
-            ))}
-          </div>
         )}
       </div>
-      {showSettingAuth && (
+    </Drawer>
-        <ConfigCredential
-          collection={collection}
-          onCancel={() => setShowSettingAuth(false)}
-          onSaved={async (value) => {
-            await updateBuiltInToolCredential(collection.name, value)
-            Toast.notify({
-              type: 'success',
-              message: t('common.api.actionSuccess'),
-            })
-            await onRefreshData()
-            setShowSettingAuth(false)
-          }}
-          onRemove={async () => {
-            await removeBuiltInToolCredential(collection.name)
-            Toast.notify({
-              type: 'success',
-              message: t('common.api.actionSuccess'),
-            })
-            await onRefreshData()
-            setShowSettingAuth(false)
-          }}
-        />
-      )}
-      {isShowEditCollectionToolModal && (
-        <EditCustomToolModal
-          payload={customCollection}
-          onHide={() => setIsShowEditCustomCollectionModal(false)}
-          onEdit={doUpdateCustomToolCollection}
-          onRemove={onClickCustomToolDelete}
-        />
-      )}
-      {isShowEditWorkflowToolModal && (
-        <WorkflowToolModal
-          payload={customCollection}
-          onHide={() => setIsShowEditWorkflowToolModal(false)}
-          onRemove={onClickWorkflowToolDelete}
-          onSave={updateWorkflowToolProvider}
-        />
-      )}
-      {showConfirmDelete && (
-        <Confirm
-          title={t('tools.createTool.deleteToolConfirmTitle')}
-          content={t('tools.createTool.deleteToolConfirmContent')}
-          isShow={showConfirmDelete}
-          onConfirm={handleConfirmDelete}
-          onCancel={() => setShowConfirmDelete(false)}
-        />
-      )}
-    </div>
   )
 }
 export default ProviderDetail