hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-16 06:16:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

frontend for model runtime (#1861)

Browse Source 
Co-authored-by: Joel <iamjoel007@gmail.com>
This commit is contained in:
zxhlyh
2024-01-03 00:05:08 +08:00
committed by GitHub
parent d069c668f8
commit d70d61b1cb
29 changed files with 1442 additions and 917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx Normal file
View File

@@ -0,0 +1,46 @@
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import ModelIcon from '../model-icon'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
import { useProviderContext } from '@/context/provider-context'
import TooltipPlus from '@/app/components/base/tooltip-plus'
type ModelTriggerProps = {
modelName: string
providerName: string
className?: string
}
const ModelTrigger: FC<ModelTriggerProps> = ({
modelName,
providerName,
className,
}) => {
const { t } = useTranslation()
const { modelProviders } = useProviderContext()
const currentProvider = modelProviders.find(provider => provider.provider === providerName)
return (
<div
className={`
group flex items-center px-2 h-8 rounded-lg bg-[#FFFAEB] cursor-pointer
${className}
`}
>
<ModelIcon
className='shrink-0 mr-1.5'
provider={currentProvider}
modelName={modelName}
/>
<div className='mr-1 text-[13px] font-medium text-gray-800 truncate'>
{modelName}
</div>
<div className='shrink-0 flex items-center justify-center w-4 h-4'>
<TooltipPlus popupContent={t('common.modelProvider.deprecated')}>
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
</TooltipPlus>
</div>
</div>
)
}
export default ModelTrigger

72
web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
View File

@@ -6,10 +6,10 @@ import {
ModelFeatureTextEnum,
} from '../declarations'
import {
MagicBox,
// MagicBox,
MagicEyes,
MagicWand,
Robot,
// MagicWand,
// Robot,
} from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
import TooltipPlus from '@/app/components/base/tooltip-plus'
@@ -23,41 +23,41 @@ const FeatureIcon: FC<FeatureIconProps> = ({
}) => {
const { t } = useTranslation()
if (feature === ModelFeatureEnum.agentThought) {
return (
<TooltipPlus
popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.agentThought })}
>
<ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
<Robot className='w-3 h-3' />
</ModelBadge>
</TooltipPlus>
)
}
// if (feature === ModelFeatureEnum.agentThought) {
// return (
// <TooltipPlus
// popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.agentThought })}
// >
// <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
// <Robot className='w-3 h-3' />
// </ModelBadge>
// </TooltipPlus>
// )
// }
if (feature === ModelFeatureEnum.toolCall) {
return (
<TooltipPlus
popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.toolCall })}
>
<ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
<MagicWand className='w-3 h-3' />
</ModelBadge>
</TooltipPlus>
)
}
// if (feature === ModelFeatureEnum.toolCall) {
// return (
// <TooltipPlus
// popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.toolCall })}
// >
// <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
// <MagicWand className='w-3 h-3' />
// </ModelBadge>
// </TooltipPlus>
// )
// }
if (feature === ModelFeatureEnum.multiToolCall) {
return (
<TooltipPlus
popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.multiToolCall })}
>
<ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
<MagicBox className='w-3 h-3' />
</ModelBadge>
</TooltipPlus>
)
}
// if (feature === ModelFeatureEnum.multiToolCall) {
// return (
// <TooltipPlus
// popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.multiToolCall })}
// >
// <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
// <MagicBox className='w-3 h-3' />
// </ModelBadge>
// </TooltipPlus>
// )
// }
if (feature === ModelFeatureEnum.vision) {
return (

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

@@ -8,6 +8,7 @@ import type {
import { useCurrentProviderAndModel } from '../hooks'
import ModelTrigger from './model-trigger'
import EmptyTrigger from './empty-trigger'
import DeprecatedModelTrigger from './deprecated-model-trigger'
import Popup from './popup'
import {
PortalToFollowElem,
@@ -77,7 +78,16 @@ const ModelSelector: FC<ModelSelectorProps> = ({
)
}
{
!currentModel && (
!currentModel && defaultModel && (
<DeprecatedModelTrigger
modelName={defaultModel?.model || ''}
providerName={defaultModel?.provider || ''}
className={triggerClassName}
/>
)
}
{
!defaultModel && (
<EmptyTrigger
open={open}
className={triggerClassName}

27
web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
View File

@@ -3,10 +3,16 @@ import type {
Model,
ModelItem,
} from '../declarations'
import {
MODEL_STATUS_TEXT,
ModelStatusEnum,
} from '../declarations'
import { useLanguage } from '../hooks'
import ModelIcon from '../model-icon'
import ModelName from '../model-name'
// import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
import TooltipPlus from '@/app/components/base/tooltip-plus'
type ModelTriggerProps = {
open: boolean
@@ -20,12 +26,15 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
model,
className,
}) => {
const language = useLanguage()
return (
<div
className={`
group flex items-center px-2 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer
${className}
${open && '!bg-gray-200'}
${model.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]'}
`}
>
<ModelIcon
@@ -40,9 +49,19 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
showFeatures
/>
<div className='shrink-0 flex items-center justify-center w-4 h-4'>
<ChevronDown
className='w-3.5 h-3.5 text-gray-500'
/>
{
model.status !== ModelStatusEnum.active
? (
<TooltipPlus popupContent={MODEL_STATUS_TEXT[model.status][language]}>
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
</TooltipPlus>
)
: (
<ChevronDown
className='w-3.5 h-3.5 text-gray-500'
/>
)
}
</div>
</div>
)

2
web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
View File

@@ -102,7 +102,7 @@ const PopupItem: FC<PopupItemProps> = ({
showFeatures
/>
{
defaultModel?.model === modelItem.model && (
defaultModel?.model === modelItem.model && defaultModel.provider === currentProvider.provider && (
<Check className='shrink-0 w-4 h-4 text-primary-600' />
)
}