From e7dc16fd08d09966c2fd191bbe28a2d51413f2fe Mon Sep 17 00:00:00 2001 From: JzoNg Date: Fri, 11 Oct 2024 16:21:03 +0800 Subject: [PATCH] provider card --- .../(commonLayout)/plugins/test/card/page.tsx | 2 +- .../model-provider-page/index.tsx | 49 ++++++++++-- .../components/plugins/install-model-item.tsx | 7 +- web/app/components/plugins/provider-card.tsx | 74 +++++++++++++++++++ web/i18n/en-US/common.ts | 2 +- 5 files changed, 124 insertions(+), 10 deletions(-) create mode 100644 web/app/components/plugins/provider-card.tsx diff --git a/web/app/(commonLayout)/plugins/test/card/page.tsx b/web/app/(commonLayout)/plugins/test/card/page.tsx index e7ba6849bb..0b76e183f9 100644 --- a/web/app/(commonLayout)/plugins/test/card/page.tsx +++ b/web/app/(commonLayout)/plugins/test/card/page.tsx @@ -43,7 +43,7 @@ const PluginList = async () => {

Install model provide

{pluginList.map((plugin, index) => ( - + ))}
diff --git a/web/app/components/header/account-setting/model-provider-page/index.tsx b/web/app/components/header/account-setting/model-provider-page/index.tsx index 8dc6513c05..5f0ac829c1 100644 --- a/web/app/components/header/account-setting/model-provider-page/index.tsx +++ b/web/app/components/header/account-setting/model-provider-page/index.tsx @@ -1,6 +1,13 @@ -import { useMemo } from 'react' +import { useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' -import { RiAlertFill, RiBrainLine } from '@remixicon/react' +import Link from 'next/link' +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' @@ -18,11 +25,16 @@ import { useUpdateModelList, useUpdateModelProviders, } from './hooks' +import Divider from '@/app/components/base/divider' +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 cn from '@/utils/classnames' +import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock' + const ModelProviderPage = () => { const { t } = useTranslation() const { eventEmitter } = useEventEmitterContextContext() @@ -89,6 +101,12 @@ const ModelProviderPage = () => { }) } + const [collapse, setCollapse] = useState(false) + const { locale } = useContext(I18n) + + // TODO #Plugin list API# + const pluginList = [toolNotion, extensionDallE, modelGPT4] + return (
@@ -134,7 +152,7 @@ const ModelProviderPage = () => { ))}
)} - {!!notConfiguredProviders?.length && ( + {false && !!notConfiguredProviders?.length && ( <>
{t('common.modelProvider.configureRequired')}
@@ -149,8 +167,29 @@ const ModelProviderPage = () => {
)} -
{t('common.modelProvider.installProvider')}
-
{t('common.modelProvider.discoverMore')}
+
+ +
+
setCollapse(!collapse)}> + + {t('common.modelProvider.installProvider')} +
+
+ {t('common.modelProvider.discoverMore')} + + Dify Marketplace + + +
+
+ {!collapse && ( +
+ {pluginList.map((plugin, index) => ( + + ))} +
+ )} +
) } diff --git a/web/app/components/plugins/install-model-item.tsx b/web/app/components/plugins/install-model-item.tsx index 05d8426566..57a00ce1ef 100644 --- a/web/app/components/plugins/install-model-item.tsx +++ b/web/app/components/plugins/install-model-item.tsx @@ -1,5 +1,5 @@ -import type { FC } from 'react' import React from 'react' +import type { FC } from 'react' import { RiVerifiedBadgeLine } from '@remixicon/react' import Badge from '../base/badge' import type { Plugin } from './types' @@ -7,19 +7,20 @@ import Description from './card/base/description' import Icon from './card/base/card-icon' import Title from './card/base/title' import DownloadCount from './card/base/download-count' -import { getLocaleOnServer } from '@/i18n/server' +import type { Locale } from '@/i18n' import cn from '@/utils/classnames' type Props = { className?: string + locale: Locale // The component is used in both client and server side, so we can't get the locale from both side(getLocaleOnServer and useContext) payload: Plugin } const PluginItem: FC = async ({ className, + locale, payload, }) => { - const locale = getLocaleOnServer() const { org, label } = payload return ( diff --git a/web/app/components/plugins/provider-card.tsx b/web/app/components/plugins/provider-card.tsx new file mode 100644 index 0000000000..4892d9da29 --- /dev/null +++ b/web/app/components/plugins/provider-card.tsx @@ -0,0 +1,74 @@ +import React from 'react' +import type { FC } from 'react' +import { RiArrowRightUpLine, RiVerifiedBadgeLine } from '@remixicon/react' +import Badge from '../base/badge' +import type { Plugin } from './types' +import Description from './card/base/description' +import Icon from './card/base/card-icon' +import Title from './card/base/title' +import DownloadCount from './card/base/download-count' +import Button from '@/app/components/base/button' +import type { Locale } from '@/i18n' +import cn from '@/utils/classnames' + +type Props = { + className?: string + locale: Locale // The component is used in both client and server side, so we can't get the locale from both side(getLocaleOnServer and useContext) + payload: Plugin +} + +const ProviderCard: FC = ({ + className, + locale, + payload, +}) => { + const { org, label } = payload + + return ( +
+ {/* Header */} +
+ +
+
+ + <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" /> + </div> + <div className='mb-1 flex justify-between items-center h-4'> + <div className='flex items-center'> + <div className='text-text-tertiary system-xs-regular'>{org}</div> + <div className='mx-2 text-text-quaternary system-xs-regular'>ยท</div> + <DownloadCount downloadCount={payload.install_count || 0} /> + </div> + </div> + </div> + </div> + <Description className='mt-3' text={payload.brief[locale]} descriptionLineRows={2}></Description> + <div className='mt-3 flex space-x-0.5'> + {['LLM', 'text embedding', 'speech2text'].map(tag => ( + <Badge key={tag} text={tag} /> + ))} + </div> + <div + className='hidden group-hover:flex items-center gap-2 absolute bottom-0 left-0 right-0 p-4 pt-8' + style={{ background: 'linear-gradient(0deg, #F9FAFB 60.27%, rgba(249, 250, 251, 0.00) 100%)' }} + > + <Button + className='flex-grow' + variant='primary' + > + Install + </Button> + <Button + className='flex-grow' + variant='secondary' + > + Details + <RiArrowRightUpLine className='w-4 h-4' /> + </Button> + </div> + </div> + ) +} + +export default ProviderCard diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts index 11db6f7359..963a9d6a59 100644 --- a/web/i18n/en-US/common.ts +++ b/web/i18n/en-US/common.ts @@ -377,7 +377,7 @@ const translation = { configureRequired: 'Configure required', configureTip: 'Set up api-key or add model to use', installProvider: 'Install model providers', - discoverMore: 'Discover more in', + discoverMore: 'Discover more in ', emptyProviderTitle: 'Model provider not set up', emptyProviderTip: 'Please install a model provider first.', },