feat: advanced prompt (#1330)

Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: JzoNg <jzongcode@gmail.com> Co-authored-by: Gillian97 <jinling.sunshine@gmail.com>
2025-12-09 02:46:52 +08:00 · 2023-10-12 23:14:28 +08:00
parent 42a5b3ec17
commit 5b9858a8a3
131 changed files with 5944 additions and 451 deletions
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -116,7 +116,7 @@ export default function AccountSetting({
      isShow
      onClose={() => { }}
      className={s.modal}
-      wrapperClassName='pt-[60px]'
+      wrapperClassName='!z-20 pt-[60px]'
    >
      <div className='flex'>
        <div className='w-[200px] p-4 border border-gray-100'>
--- a/web/app/components/header/account-setting/model-page/configs/huggingface_hub.tsx
+++ b/web/app/components/header/account-setting/model-page/configs/huggingface_hub.tsx
@@ -121,6 +121,13 @@ const config: ProviderConfig = {
              'zh-Hans': '文本生成',
            },
          },
+          // {
+          //   key: 'chat',
+          //   label: {
+          //     'en': 'Chat',
+          //     'zh-Hans': '聊天',
+          //   },
+          // },
          {
            key: 'embeddings',
            label: {
@@ -217,22 +224,33 @@ const config: ProviderConfig = {
          'en': 'Task',
          'zh-Hans': 'Task',
        },
-        options: [
-          {
-            key: 'text2text-generation',
-            label: {
-              'en': 'Text-to-Text Generation',
-              'zh-Hans': 'Text-to-Text Generation',
+        options: (value?: FormValue) => {
+          if (value?.model_type === 'chat') {
+            return [{
+              key: 'question-answer',
+              label: {
+                'en': '问答',
+                'zh-Hans': 'Question Answer',
+              },
+            }]
+          }
+          return [
+            {
+              key: 'text2text-generation',
+              label: {
+                'en': 'Text-to-Text Generation',
+                'zh-Hans': 'Text-to-Text Generation',
+              },
            },
-          },
-          {
-            key: 'text-generation',
-            label: {
-              'en': 'Text Generation',
-              'zh-Hans': 'Text Generation',
+            {
+              key: 'text-generation',
+              label: {
+                'en': 'Text Generation',
+                'zh-Hans': 'Text Generation',
+              },
            },
-          },
-        ],
+          ]
+        },
      },
      {
        hidden: (value?: FormValue) => !(value?.huggingfacehub_api_type === 'inference_endpoints' && value?.model_type === 'embeddings'),
--- a/web/app/components/header/account-setting/model-page/configs/replicate.tsx
+++ b/web/app/components/header/account-setting/model-page/configs/replicate.tsx
@@ -61,6 +61,13 @@ const config: ProviderConfig = {
              'zh-Hans': '文本生成',
            },
          },
+          // {
+          //   key: 'chat',
+          //   label: {
+          //     'en': 'Chat',
+          //     'zh-Hans': '聊天',
+          //   },
+          // },
          {
            key: 'embeddings',
            label: {
--- a/web/app/components/header/account-setting/model-page/declarations.ts
+++ b/web/app/components/header/account-setting/model-page/declarations.ts
@@ -1,4 +1,5 @@
 import type { ReactElement } from 'react'
+import type { ModelModeType } from '@/types/app'

 export type FormValue = Record<string, string>

@@ -77,6 +78,7 @@ export type BackendModel = {
  model_name: string
  model_display_name: string // not always exist
  model_type: ModelType
+  model_mode: ModelModeType
  model_provider: {
    provider_name: ProviderEnum
    provider_type: PreferredProviderTypeEnum
--- a/web/app/components/header/account-setting/model-page/model-modal/Form.tsx
+++ b/web/app/components/header/account-setting/model-page/model-modal/Form.tsx
@@ -108,6 +108,15 @@ const Form: FC<FormProps> = ({
      )
        extraValue.task_type = 'text-generation'

+      if (
+        (
+          (k === 'model_type' && v === 'chat' && value.huggingfacehub_api_type === 'inference_endpoints')
+          || (k === 'huggingfacehub_api_type' && v === 'inference_endpoints' && value.model_type === 'chat')
+        )
+        && modelModal?.key === ProviderEnum.huggingface_hub
+      )
+        extraValue.task_type = 'question-answer'
+
      handleMultiFormChange({ ...value, [k]: v, ...extraValue }, k)
    }
  }
--- a/web/app/components/header/account-setting/model-page/model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-page/model-selector/index.tsx
@@ -4,6 +4,7 @@ import { Popover, Transition } from '@headlessui/react'
 import { useTranslation } from 'react-i18next'
 import _ from 'lodash-es'
 import cn from 'classnames'
+import s from './style.module.css'
 import type { BackendModel, ProviderEnum } from '@/app/components/header/account-setting/model-page/declarations'
 import { ModelType } from '@/app/components/header/account-setting/model-page/declarations'
 import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
@@ -15,6 +16,10 @@ import ModelIcon from '@/app/components/app/configuration/config-model/model-ico
 import ModelName, { supportI18nModelName } from '@/app/components/app/configuration/config-model/model-name'
 import ProviderName from '@/app/components/app/configuration/config-model/provider-name'
 import { useProviderContext } from '@/context/provider-context'
+import ModelModeTypeLabel from '@/app/components/app/configuration/config-model/model-mode-type-label'
+import type { ModelModeType } from '@/types/app'
+import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
+import AccountSetting from '@/app/components/header/account-setting'

 type Props = {
  value: {
@@ -22,6 +27,8 @@ type Props = {
    modelName: string
  } | undefined
  modelType: ModelType
+  isShowModelModeType?: boolean
+  isShowAddModel?: boolean
  supportAgentThought?: boolean
  onChange: (value: BackendModel) => void
  popClassName?: string
@@ -34,6 +41,7 @@ type ModelOption = {
  value: string
  providerName: ProviderEnum
  modelDisplayName: string
+  model_mode: ModelModeType
 } | {
  type: 'provider'
  value: ProviderEnum
@@ -42,6 +50,8 @@ type ModelOption = {
 const ModelSelector: FC<Props> = ({
  value,
  modelType,
+  isShowModelModeType,
+  isShowAddModel,
  supportAgentThought,
  onChange,
  popClassName,
@@ -89,18 +99,21 @@ const ModelSelector: FC<Props> = ({
        value: providerName,
      })
      const models = filteredModelList.filter(m => m.model_provider.provider_name === providerName)
-      models.forEach(({ model_name, model_display_name }) => {
+      models.forEach(({ model_name, model_display_name, model_mode }) => {
        res.push({
          type: 'model',
          providerName,
          value: model_name,
          modelDisplayName: model_display_name,
+          model_mode,
        })
      })
    })
    return res
  })()

+  const [showSettingModal, setShowSettingModal] = useState(false)
+
  return (
    <div className=''>
      <Popover className='relative'>
@@ -117,7 +130,12 @@ const ModelSelector: FC<Props> = ({
                          modelId={value.modelName}
                          providerName={value.providerName}
                        />
-                        <div className='mr-1.5 grow text-left text-sm text-gray-900 truncate'><ModelName modelId={value.modelName} modelDisplayName={currModel?.model_display_name} /></div>
+                        <div className='mr-1.5 grow flex items-center text-left text-sm text-gray-900 truncate'>
+                          <ModelName modelId={value.modelName} modelDisplayName={currModel?.model_display_name} />
+                          {isShowModelModeType && (
+                            <ModelModeTypeLabel className='ml-2' type={currModel?.model_mode as ModelModeType} />
+                          )}
+                        </div>
                      </>
                    )
                    : (
@@ -148,7 +166,7 @@ const ModelSelector: FC<Props> = ({
            leaveFrom='opacity-100'
            leaveTo='opacity-0'
          >
-            <Popover.Panel className={cn(popClassName, 'absolute top-10 p-1 min-w-[232px] max-w-[260px] max-h-[366px] bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg overflow-auto z-10')}>
+            <Popover.Panel className={cn(popClassName, isShowModelModeType ? 'max-w-[312px]' : 'max-w-[260px]', 'absolute top-10 p-1 min-w-[232px] max-h-[366px] bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg overflow-auto z-10')}>
              <div className='px-2 pt-2 pb-1'>
                <div className='flex items-center px-2 h-8 bg-gray-100 rounded-lg'>
                  <div className='mr-1.5 p-[1px]'><SearchLg className='w-[14px] h-[14px] text-gray-400' /></div>
@@ -189,7 +207,7 @@ const ModelSelector: FC<Props> = ({
                    return (
                      <Popover.Button
                        key={`${model.providerName}-${model.value}`}
-                        className={`
+                        className={`${s.optionItem}
                        flex items-center px-3 w-full h-8 rounded-lg hover:bg-gray-50
                        ${!readonly ? 'cursor-pointer' : 'cursor-auto'}
                        ${(value?.providerName === model.providerName && value?.modelName === model.value) && 'bg-gray-50'}
@@ -206,7 +224,12 @@ const ModelSelector: FC<Props> = ({
                          modelId={model.value}
                          providerName={model.providerName}
                        />
-                        <div className='grow text-left text-sm text-gray-900 truncate'><ModelName modelId={model.value} modelDisplayName={model.modelDisplayName} /></div>
+                        <div className='mr-2 grow flex items-center text-left text-sm text-gray-900 truncate'>
+                          <ModelName modelId={model.value} modelDisplayName={model.modelDisplayName} />
+                          {isShowModelModeType && (
+                            <ModelModeTypeLabel className={`${s.modelModeLabel} ml-2`} type={model.model_mode} />
+                          )}
+                        </div>
                        { (value?.providerName === model.providerName && value?.modelName === model.value) && <Check className='shrink-0 w-4 h-4 text-primary-600' /> }
                      </Popover.Button>
                    )
@@ -218,10 +241,33 @@ const ModelSelector: FC<Props> = ({
              {(search && filteredModelList.length === 0) && (
                <div className='px-3 pt-1.5 h-[30px] text-center text-xs text-gray-500'>{t('common.modelProvider.noModelFound', { model: search })}</div>
              )}
+
+              {isShowAddModel && (
+                <div
+                  className='border-t flex items-center h-9 pl-3  text-xs text-[#155EEF] cursor-pointer'
+                  style={{
+                    borderColor: 'rgba(0, 0, 0, 0.05)',
+                  }}
+                  onClick={() => {
+                    setShowSettingModal(true)
+                  }}
+                >
+                  <CubeOutline className='w-4 h-4 mr-2' />
+                  <div>{t('common.model.addMoreModel')}</div>
+                </div>
+              )}
            </Popover.Panel>
          </Transition>
        )}
      </Popover>
+
+      {
+        showSettingModal && (
+          <AccountSetting activeTab="provider" onCancel={async () => {
+            setShowSettingModal(false)
+          }} />
+        )
+      }
    </div>
  )
 }
--- a/web/app/components/header/account-setting/model-page/model-selector/style.module.css
+++ b/web/app/components/header/account-setting/model-page/model-selector/style.module.css
@@ -0,0 +1,7 @@
+.modelModeLabel {
+  visibility: hidden;
+}
+
+.optionItem:hover .modelModeLabel {
+  visibility: visible;
+}