provider-list.tsx 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. 'use client'
  2. import { useEffect, useMemo, useState } from 'react'
  3. import cn from 'classnames'
  4. import { useTranslation } from 'react-i18next'
  5. import type { Collection } from './types'
  6. import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
  7. import TabSliderNew from '@/app/components/base/tab-slider-new'
  8. import LabelFilter from '@/app/components/tools/labels/filter'
  9. import SearchInput from '@/app/components/base/search-input'
  10. import { DotsGrid, XClose } from '@/app/components/base/icons/src/vender/line/general'
  11. import { Colors } from '@/app/components/base/icons/src/vender/line/others'
  12. import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
  13. import CustomCreateCard from '@/app/components/tools/provider/custom-create-card'
  14. import ContributeCard from '@/app/components/tools/provider/contribute'
  15. import ProviderCard from '@/app/components/tools/provider/card'
  16. import ProviderDetail from '@/app/components/tools/provider/detail'
  17. import Empty from '@/app/components/tools/add-tool-modal/empty'
  18. import { fetchCollectionList } from '@/service/tools'
  19. const ProviderList = () => {
  20. const { t } = useTranslation()
  21. const [activeTab, setActiveTab] = useTabSearchParams({
  22. defaultTab: 'builtin',
  23. })
  24. const options = [
  25. { value: 'builtin', text: t('tools.type.builtIn'), icon: <DotsGrid className='w-[14px] h-[14px] mr-1'/> },
  26. { value: 'api', text: t('tools.type.custom'), icon: <Colors className='w-[14px] h-[14px] mr-1'/> },
  27. { value: 'workflow', text: t('tools.type.workflow'), icon: <Route className='w-[14px] h-[14px] mr-1'/> },
  28. ]
  29. const [tagFilterValue, setTagFilterValue] = useState<string[]>([])
  30. const handleTagsChange = (value: string[]) => {
  31. setTagFilterValue(value)
  32. }
  33. const [keywords, setKeywords] = useState<string>('')
  34. const handleKeywordsChange = (value: string) => {
  35. setKeywords(value)
  36. }
  37. const [collectionList, setCollectionList] = useState<Collection[]>([])
  38. const filteredCollectionList = useMemo(() => {
  39. return collectionList.filter((collection) => {
  40. if (collection.type !== activeTab)
  41. return false
  42. if (tagFilterValue.length > 0 && (!collection.labels || collection.labels.every(label => !tagFilterValue.includes(label))))
  43. return false
  44. if (keywords)
  45. return collection.name.toLowerCase().includes(keywords.toLowerCase())
  46. return true
  47. })
  48. }, [activeTab, tagFilterValue, keywords, collectionList])
  49. const getProviderList = async () => {
  50. const list = await fetchCollectionList()
  51. setCollectionList([...list])
  52. }
  53. useEffect(() => {
  54. getProviderList()
  55. }, [])
  56. const [currentProvider, setCurrentProvider] = useState<Collection | undefined>()
  57. useEffect(() => {
  58. if (currentProvider && collectionList.length > 0) {
  59. const newCurrentProvider = collectionList.find(collection => collection.id === currentProvider.id)
  60. setCurrentProvider(newCurrentProvider)
  61. }
  62. }, [collectionList, currentProvider])
  63. return (
  64. <div className='relative flex overflow-hidden bg-gray-100 shrink-0 h-0 grow'>
  65. <div className='relative flex flex-col overflow-y-auto bg-gray-100 grow'>
  66. <div className={cn(
  67. 'sticky top-0 flex justify-between items-center pt-4 px-12 pb-2 leading-[56px] bg-gray-100 z-10 flex-wrap gap-y-2',
  68. currentProvider && 'pr-6',
  69. )}>
  70. <TabSliderNew
  71. value={activeTab}
  72. onChange={(state) => {
  73. setActiveTab(state)
  74. if (state !== activeTab)
  75. setCurrentProvider(undefined)
  76. }}
  77. options={options}
  78. />
  79. <div className='flex items-center gap-2'>
  80. <LabelFilter value={tagFilterValue} onChange={handleTagsChange} />
  81. <SearchInput className='w-[200px]' value={keywords} onChange={handleKeywordsChange} />
  82. </div>
  83. </div>
  84. <div className={cn(
  85. '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',
  86. currentProvider && 'pr-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
  87. )}>
  88. {activeTab === 'builtin' && <ContributeCard />}
  89. {activeTab === 'api' && <CustomCreateCard onRefreshData={getProviderList}/>}
  90. {filteredCollectionList.map(collection => (
  91. <ProviderCard
  92. active={currentProvider?.id === collection.id}
  93. onSelect={() => setCurrentProvider(collection)}
  94. key={collection.id}
  95. collection={collection}
  96. />
  97. ))}
  98. {!filteredCollectionList.length && <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'><Empty/></div>}
  99. </div>
  100. </div>
  101. <div className={cn(
  102. 'shrink-0 w-0 border-l-[0.5px] border-black/8 overflow-y-auto transition-all duration-200 ease-in-out',
  103. currentProvider && 'w-[420px]',
  104. )}>
  105. {currentProvider && <ProviderDetail collection={currentProvider} onRefreshData={getProviderList} />}
  106. </div>
  107. <div className='absolute top-5 right-5 p-1 cursor-pointer' onClick={() => setCurrentProvider(undefined)}><XClose className='w-4 h-4'/></div>
  108. </div>
  109. )
  110. }
  111. ProviderList.displayName = 'ToolProviderList'
  112. export default ProviderList