outman/dify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

search model in provider settings

Browse Source
This commit is contained in:
JzoNg 2024-10-31 19:17:21 +08:00
parent 197f1b3957
commit 581d09895e
6 changed files with 59 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/components/header/account-setting/index.tsx
View File

@ -199,13 +199,13 @@ export default function AccountSetting({
)}
</div>
<div className='px-4 sm:px-8 pt-2'>
{activeMenu === 'provider' && <ModelProviderPage searchText={searchValue} />}
{activeMenu === 'members' && <MembersPage />}
{activeMenu === 'billing' && <BillingPage />}
{activeMenu === 'language' && <LanguagePage />}
{activeMenu === 'provider' && <ModelProviderPage />}
{activeMenu === 'data-source' && <DataSourcePage />}
{activeMenu === 'api-based-extension' && <ApiBasedExtensionPage />}
{activeMenu === 'custom' && <CustomPage />}
{activeMenu === 'language' && <LanguagePage />}
</div>
</div>
</div>

68
web/app/components/header/account-setting/model-provider-page/index.tsx
View File

@ -1,13 +1,13 @@
import { useMemo, useState } from 'react'
import { useEffect, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Link from 'next/link'
import { useDebounce } from 'ahooks'
import {
RiAlertFill,
RiArrowDownSLine,
RiArrowRightUpLine,
RiBrainLine,
} from '@remixicon/react'
import { useContext } from 'use-context-selector'
import SystemModelSelector from './system-model-selector'
import ProviderAddedCard, { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
// import ProviderCard from './provider-card'
@ -26,16 +26,23 @@ import {
useUpdateModelProviders,
} from './hooks'
import Divider from '@/app/components/base/divider'
import Loading from '@/app/components/base/loading'
import ProviderCard from '@/app/components/plugins/provider-card'
import I18n from '@/context/i18n'
import { useProviderContext } from '@/context/provider-context'
import { useModalContextSelector } from '@/context/modal-context'
import { useEventEmitterContextContext } from '@/context/event-emitter'
import {
useMarketplacePlugins,
} from '@/app/components/plugins/marketplace/hooks'
import { PluginType } from '@/app/components/plugins/types'
import cn from '@/utils/classnames'
import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
type Props = {
searchText: string
}
const ModelProviderPage = () => {
const ModelProviderPage = ({ searchText }: Props) => {
const debouncedSearchText = useDebounce(searchText, { wait: 500 })
const { t } = useTranslation()
const { eventEmitter } = useEventEmitterContextContext()
const updateModelProviders = useUpdateModelProviders()
@ -67,6 +74,18 @@ const ModelProviderPage = () => {
return [configuredProviders, notConfiguredProviders]
}, [providers])
const [filteredConfiguredProviders, filteredNotConfiguredProviders] = useMemo(() => {
const filteredConfiguredProviders = configuredProviders.filter(
provider => provider.provider.toLowerCase().includes(debouncedSearchText.toLowerCase())
|| Object.values(provider.label).some(text => text.toLowerCase().includes(debouncedSearchText.toLowerCase())),
)
const filteredNotConfiguredProviders = notConfiguredProviders.filter(
provider => provider.provider.toLowerCase().includes(debouncedSearchText.toLowerCase())
|| Object.values(provider.label).some(text => text.toLowerCase().includes(debouncedSearchText.toLowerCase())),
)
return [filteredConfiguredProviders, filteredNotConfiguredProviders]
}, [configuredProviders, debouncedSearchText, notConfiguredProviders])
const handleOpenModal = (
provider: ModelProvider,
@ -102,10 +121,28 @@ const ModelProviderPage = () => {
}
const [collapse, setCollapse] = useState(false)
const { locale } = useContext(I18n)
// TODO #Plugin list API#
const pluginList = [toolNotion, extensionDallE, modelGPT4]
const {
plugins,
queryPlugins,
queryPluginsWithDebounced,
isLoading: isPluginsLoading,
} = useMarketplacePlugins()
useEffect(() => {
if (searchText) {
queryPluginsWithDebounced({
query: searchText,
category: PluginType.model,
})
}
else {
queryPlugins({
query: searchText,
category: PluginType.model,
})
}
}, [queryPlugins, queryPluginsWithDebounced, searchText])
return (
<div className='relative pt-1 -mt-2'>
@ -132,7 +169,7 @@ const ModelProviderPage = () => {
/>
</div>
</div>
{!configuredProviders?.length && (
{!filteredConfiguredProviders?.length && (
<div className='mb-2 p-4 rounded-[10px]' style={{ background: 'linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%)' }}>
<div className='w-10 h-10 flex items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur'>
<RiBrainLine className='w-5 h-5 text-text-primary' />
@ -141,9 +178,9 @@ const ModelProviderPage = () => {
<div className='mt-1 text-text-tertiary system-xs-regular'>{t('common.modelProvider.emptyProviderTip')}</div>
</div>
)}
{!!configuredProviders?.length && (
{!!filteredConfiguredProviders?.length && (
<div className='relative'>
{configuredProviders?.map(provider => (
{filteredConfiguredProviders?.map(provider => (
<ProviderAddedCard
key={provider.provider}
provider={provider}
@ -152,11 +189,11 @@ const ModelProviderPage = () => {
))}
</div>
)}
{false && !!notConfiguredProviders?.length && (
{!!filteredNotConfiguredProviders?.length && (
<>
<div className='flex items-center mb-2 pt-2 text-text-primary system-md-semibold'>{t('common.modelProvider.configureRequired')}</div>
<div className='relative'>
{notConfiguredProviders?.map(provider => (
{filteredNotConfiguredProviders?.map(provider => (
<ProviderAddedCard
notConfigured
key={provider.provider}
@ -182,13 +219,14 @@ const ModelProviderPage = () => {
</Link>
</div>
</div>
{!collapse && (
{!collapse && !isPluginsLoading && (
<div className='grid grid-cols-2 gap-2'>
{pluginList.map((plugin, index) => (
{plugins.map((plugin, index) => (
<ProviderCard key={index} installed={false} payload={plugin as any} />
))}
</div>
)}
{!collapse && isPluginsLoading && <Loading type='area' />}
</div>
</div>
)

1
web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
View File

@ -132,6 +132,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
>
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
<Button
className='relative'
variant={notConfigured ? 'primary' : 'secondary'}
size='small'
>

2
web/app/components/plugins/marketplace/context.tsx
View File

@ -130,7 +130,7 @@ export const MarketplaceContextProvider = ({
queryMarketplaceCollectionsAndPlugins({
category: type === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : type,
})
setPlugins(undefined)
setPlugins([])
return
}

2
web/app/components/plugins/marketplace/hooks.ts
View File

@ -40,7 +40,7 @@ export const useMarketplaceCollectionsAndPlugins = () => {
export const useMarketplacePlugins = () => {
const [isLoading, setIsLoading] = useState(false)
const [plugins, setPlugins] = useState<Plugin[]>()
const [plugins, setPlugins] = useState<Plugin[]>([])
const queryPlugins = useCallback(async (query: PluginsSearchParams) => {
setIsLoading(true)

2
web/app/components/tools/marketplace/hooks.ts
View File

@ -37,7 +37,7 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
}
else {
queryMarketplaceCollectionsAndPlugins()
setPlugins(undefined)
setPlugins([])
}
}, [searchPluginText, filterPluginTags, queryPlugins, queryMarketplaceCollectionsAndPlugins, queryPluginsWithDebounced, setPlugins])